diff options
Diffstat (limited to 'files')
2280 files changed, 17044 insertions, 19257 deletions
diff --git a/files/de/_redirects.txt b/files/de/_redirects.txt index 30ab6fb6ff..337bc6522a 100644 --- a/files/de/_redirects.txt +++ b/files/de/_redirects.txt @@ -195,8 +195,8 @@ /de/docs/CSS_Referenz/Mozilla_CSS_Erweiterungen /de/docs/Web/CSS/Mozilla_Extensions /de/docs/CSS_in_HTML_einbinden /de/docs/Web/CSS/@import /de/docs/DOM /de/docs/Web/API/Document_Object_Model -/de/docs/DOM/File.fileName /de/docs/Web/API/File/fileName -/de/docs/DOM/File.fileSize /de/docs/Web/API/File/fileSize +/de/docs/DOM/File.fileName /de/docs/conflicting/Web/API/File/name +/de/docs/DOM/File.fileSize /de/docs/Web/API/Blob/size /de/docs/DOM/File.name /de/docs/Web/API/File/name /de/docs/DOM/Node /de/docs/Web/API/Node /de/docs/DOM/Node.childNodes /de/docs/Web/API/Node/childNodes @@ -421,6 +421,8 @@ /de/docs/Web/API/Element.querySelector /de/docs/Web/API/Element/querySelector /de/docs/Web/API/File/Typ /de/docs/Web/API/File/type /de/docs/Web/API/File/Zugriff_auf_Dateien_von_Webapplikationen /de/docs/Web/API/File/Using_files_from_web_applications +/de/docs/Web/API/File/fileName /de/docs/conflicting/Web/API/File/name +/de/docs/Web/API/File/fileSize /de/docs/Web/API/Blob/size /de/docs/Web/API/FullscreenOptions /de/docs/orphaned/Web/API/FullscreenOptions /de/docs/Web/API/IndexedDB_API/IndexedDB_verwenden /de/docs/Web/API/IndexedDB_API/Using_IndexedDB /de/docs/Web/API/Navigator/registerProtocolHandler/Webbasierte_protokoll-handler /de/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers diff --git a/files/de/_wikihistory.json b/files/de/_wikihistory.json index a402e431bf..8a0840e847 100644 --- a/files/de/_wikihistory.json +++ b/files/de/_wikihistory.json @@ -2245,6 +2245,13 @@ "fscholz" ] }, + "Web/API/Blob/size": { + "modified": "2019-03-23T23:33:53.208Z", + "contributors": [ + "fscholz", + "nothine" + ] + }, "Web/API/CSS": { "modified": "2020-10-15T22:34:59.314Z", "contributors": [ @@ -3008,20 +3015,6 @@ "matschu" ] }, - "Web/API/File/fileName": { - "modified": "2019-03-23T23:33:53.570Z", - "contributors": [ - "fscholz", - "nothine" - ] - }, - "Web/API/File/fileSize": { - "modified": "2019-03-23T23:33:53.208Z", - "contributors": [ - "fscholz", - "nothine" - ] - }, "Web/API/File/name": { "modified": "2019-03-23T23:33:48.935Z", "contributors": [ @@ -13569,6 +13562,13 @@ "Sheppy" ] }, + "conflicting/Web/API/File/name": { + "modified": "2019-03-23T23:33:53.570Z", + "contributors": [ + "fscholz", + "nothine" + ] + }, "conflicting/Web/API/WindowOrWorkerGlobalScope": { "modified": "2019-03-23T23:01:42.969Z", "contributors": [ diff --git a/files/de/web/api/file/filename/index.html b/files/de/conflicting/web/api/file/name/index.html index 7dbf4f7559..af385a0406 100644 --- a/files/de/web/api/file/filename/index.html +++ b/files/de/conflicting/web/api/file/name/index.html @@ -1,10 +1,11 @@ --- title: File.fileName -slug: Web/API/File/fileName +slug: conflicting/Web/API/File/name tags: - DOM - Files translation_of: Web/API/File/fileName +original_slug: Web/API/File/fileName --- <p>{{APIRef("File API")}}{{non-standard_header}}</p> diff --git a/files/de/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/de/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html index 30072b924d..682c287965 100644 --- a/files/de/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html +++ b/files/de/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html @@ -93,12 +93,10 @@ original_slug: Web/Barrierefreiheit/An_overview_of_accessible_web_applications_a <p>Entwickler sollten ARIA-Zustände einsetzen, um den Zustand von Komponenten zu deklarieren und mit CSS-Attribut-Selektoren die visuelle Darstellung je nach Zustand entsprechend verändern (anstatt per Skript den Klassennamen des Elements zu ändern).</p> -<p>Die Website der Open Ajax Alliance stellt<a class="external" href="http://www.oaa-accessibility.org/example/25/"> Beispiel zu CSS-Attributseletoren in Verbindung mit ARIA</a> bereit. Das Beispiel zeigt die Oberfläche eines WYSIWYG-Editors mit einem dynamischen Menü-System. Elemente, die gerade selektiert sind, unterscheiden sich visuell von anderen Elementen. Relevant sind hier besonders die unten beschriebenen Teile.</p> +<p>Die Website der Open Ajax Alliance stellt Beispiel zu CSS-Attributseletoren in Verbindung mit ARIA</a> bereit. Das Beispiel zeigt die Oberfläche eines WYSIWYG-Editors mit einem dynamischen Menü-System. Elemente, die gerade selektiert sind, unterscheiden sich visuell von anderen Elementen. Relevant sind hier besonders die unten beschriebenen Teile.</p> <p>Bei diesem Beispiel wird für des Menüs der HTML-Code aus Beispiel 1a verwendet. In Zeile 7 und 13 wird die Eigenschaft aria-checked eingesetzt, um den Zustand der Selektion anzuzeigen.</p> -<p><em>Beispiel 1a. HTML für ein selektierbares Menü (übernommen von <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>).</em></p> - <pre class="deki-transform"><ul id="fontMenu" class="menu" role="menu" aria-hidden="true"> <li id="sans-serif" class="menu-item" @@ -117,8 +115,6 @@ original_slug: Web/Barrierefreiheit/An_overview_of_accessible_web_applications_a <p>Für die Änderung der visuellen Darstellung des selektierten Elements wird der CSS-Code aus Beispiel 1b verwendet. Beachten Sie, dass keine Klassennamen benutzt werden, einzig der Zustand des aria-checked-Attribute in Zeile 1 entscheidet also über die Darstellung des Elements.</p> -<p><em><em>Beispiel 1b. Attribute-basierte Selektoren zum Anzeigen des Zustands (übernommen von<a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink"> http://www.oaa-accessibility.org/example/25/</a>).</em></em></p> - <pre class="deki-transform">li[aria-checked="true"] { font-weight: bold; background-image: url('images/dot.png'); @@ -129,8 +125,6 @@ original_slug: Web/Barrierefreiheit/An_overview_of_accessible_web_applications_a <p>Zur Aktualisierung der Eigenschaft aria-checked wird der JavaScript-Code aus Beispiel 1c verwendet. Auch das Skript ändert nur den Wert der Attribute (Zeile 3 und 8) und es wird kein Klassenname hinzugefügt oder entfernt.</p> -<p><em><em>Beispiel 1c. JavaScript zur Aktualisierung des Attributs aria-checked (übernommen von<a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink"> http://www.oaa-accessibility.org/example/25/</a>)</em></em><em><em><em>.</em></em></em></p> - <pre class="deki-transform">var processMenuChoice = function(item) { // 'check' the selected item item.setAttribute('aria-checked', 'true'); @@ -148,12 +142,10 @@ original_slug: Web/Barrierefreiheit/An_overview_of_accessible_web_applications_a <p>Bei Änderungen der Sichtbarkeit von Elementen (verstecken oder sichtbar machen von Elementen) sollten Entwickler nur den Wert der Eigenschaft <strong>aria-hidden</strong> verändern. Dabei sollte die oben beschreibene Technik angewendet und CSS (<code>display:none</code>) eingesetzt werden, um das Element zu verstecken.</p> -<p>Auf der Website der Open Ajax Alliance findet man hierzu <a class="external" href="http://www.oaa-accessibility.org/example/39/">ein Beispiel mit einem Tooltip </a>bei dem das Attribut <strong>aria-hidden</strong> eingesetzt wird, um die Sichtbarkeit des Tooltips zu verändern. Das Beispiel zeigt ein einfaches Formular, bei dem Anweisungen zu den einzelnen Feldern eingeblendet werden. Auf die wichtigsten Details wird im Folgenden genauer eingegangen.</p> +<p>Auf der Website der Open Ajax Alliance findet man hierzu ein Beispiel mit einem Tooltip </a>bei dem das Attribut <strong>aria-hidden</strong> eingesetzt wird, um die Sichtbarkeit des Tooltips zu verändern. Das Beispiel zeigt ein einfaches Formular, bei dem Anweisungen zu den einzelnen Feldern eingeblendet werden. Auf die wichtigsten Details wird im Folgenden genauer eingegangen.</p> <p>Beispiel 2a zeigt den HTML-Code für einen Tooltip. In Zeile 9 wird der Zustand von <strong>aria-hidden</strong> auf <code>true</code> gesetzt.</p> -<p><em>Beispiel 2a. HTML für ein Tooltip (übernommen von<a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink"> http://www.oaa-accessibility.org/example/39/</a>).</em></p> - <pre class="deki-transform"><div class="text"> <label id="tp1-label" for="first">First Name:</label> <input type="text" id="first" name="first" size="20" @@ -168,9 +160,6 @@ original_slug: Web/Barrierefreiheit/An_overview_of_accessible_web_applications_a <p>Das Beispiel 2b unten zeigt den CSS-Code für das Markup. Wie schon beim ersten Beispiel wird auch hier kein Klassenname benutzt, sondern nur der Wert der Attribute <strong>aria-hidden</strong> geändert.</p> -<p><em><em>Beispiel 2b. Attributbasierte Selektoren zur Anzeige des Zustands (übernommen von<br> - <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></em></p> - <pre class="deki-transform">div.tooltip[aria-hidden="true"] { display: none; } @@ -178,8 +167,6 @@ original_slug: Web/Barrierefreiheit/An_overview_of_accessible_web_applications_a <p>Beispiel 2c zeigt den JavaScript-Code zur Aktulisierung der Eigenschaft <strong>aria-hidden</strong>. Wieder wird per Skript nur die Attribute <strong>aria-hidden</strong> in Zeile 2 verändert und kein Klassenname hinzugefügt oder entfernt.</p> -<p><em><em>Beispiel 2c. JavaScript zur Aktualisierung des Attributs aria-checked (übernommen von <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>)</em></em><em><em><em>.</em></em></em></p> - <pre class="deki-transform">var showTip = function(el) { el.setAttribute('aria-hidden', 'false'); }</pre> diff --git a/files/de/web/accessibility/keyboard-navigable_javascript_widgets/index.html b/files/de/web/accessibility/keyboard-navigable_javascript_widgets/index.html index 3ebb479e97..ee5a97756c 100644 --- a/files/de/web/accessibility/keyboard-navigable_javascript_widgets/index.html +++ b/files/de/web/accessibility/keyboard-navigable_javascript_widgets/index.html @@ -107,7 +107,7 @@ original_slug: Web/Barrierefreiheit/Tastaturgesteuerte_JavaScript_Komponenten <li>Der <code>tabindex</code> des fokussierten Elements wird auf "0" gesetzt.</li> <li>Der <code>tabindex</code> des zuvor fokussierte Elements wird auf "-1" gesetzt.</li> </ol> -<p>Hier finden Sie ein Beispiel für eine <a class="external text external-icon" href="http://www.oaa-accessibility.org/example/40/" rel="nofollow">WAI-ARIA Baumansicht</a> bei der diese Technik eingesetzt wird.</p> + <h5 id="Tipps">Tipps</h5> <h6 id="Mit_element.focus()_den_Fokus_setzen">Mit element.focus() den Fokus setzen</h6> <p>Benutzen Sie nicht die Funktionen <code>createEvent()</code>, <code>initEvent()</code> und <code>dispatchEvent()</code> um ein Element zu fokussieren. DOM-Focus-Events arbeiten nur informell: Sie werden vom System erzeugt, wenn ein Element fokussiert wird, aber nicht verwendet, um den Fokus zu setzen. Greifen Sie stattdessen auf <code>element.focus()</code> zurück.</p> @@ -116,8 +116,8 @@ original_slug: Web/Barrierefreiheit/Tastaturgesteuerte_JavaScript_Komponenten <p><code>onfocus</code> und <code>onblur</code> können nun mit jedem beliebigen Element verwendet werden. Es existiert jedoch kein Standard-DOM-Interface, um den aktuellen Fokus im Dokument abzufragen. Wenn man den Fokus verfolgen möchte, muss der aktuelle Zustand in einer JavaScript-Variablen hinterlegt werden.</p> <h4 id="Technik_2_aria-activedescendant">Technik 2: aria-activedescendant</h4> <p>Bei dieser Technik wird ein einzelner Event-Handler mit der Container-Komponente verknüpft und <code>aria-activedescendant</code> dazu benutzt, um einen "virtuellen" Fokus zu verwalten. (<a class="external text" href="../../../../An_Overview_of_Accessible_Web_Applications_and_Widgets" rel="nofollow" title="https://developer.mozilla.org/An_Overview_of_Accessible_Web_Applications_and_Widgets">Mehr Informationen über ARIA finden Sie indieser Übersicht</a>).</p> -<p>The <code>aria-activedescendant</code> property identifies the ID of the descendent element that currently has the virtual focus. The event handler on the container must respond to key and mouse events by updating the value of <code>aria-activedescendant</code> and ensuring that the current item is styled appropriately (for example, with a border or background color). See the source code of this <a class="external text" href="http://www.oaa-accessibility.org/example/28/" rel="nofollow">ARIA radiogroup example</a> for a direct illustration of how this works.</p> -<p>Die Eigenschaft <code>aria-activedescendent</code> enthält die ID des untergeordneten Elements, das aktuell fokussiert ist. Der Event-Handler des Containers muss auf Tastatur- und Mauseingaben reagieren, den Wert von <code>aria-activedescendent</code> aktualisieren und sicherstellen, dass die Darstellung des Elements entsprechend angepasst wird (z.B. Rahmen oder Hintergrundfarbe). Ein konkretes Beispiel für diese Technik liefert der Quellcode des <a class="external text" href="http://www.oaa-accessibility.org/example/28/" rel="nofollow">ARIA-Radiogruppen-Beispiels</a>.</p> +<p>The <code>aria-activedescendant</code> property identifies the ID of the descendent element that currently has the virtual focus. The event handler on the container must respond to key and mouse events by updating the value of <code>aria-activedescendant</code> and ensuring that the current item is styled appropriately (for example, with a border or background color).</p> +<p>Die Eigenschaft <code>aria-activedescendent</code> enthält die ID des untergeordneten Elements, das aktuell fokussiert ist. Der Event-Handler des Containers muss auf Tastatur- und Mauseingaben reagieren, den Wert von <code>aria-activedescendent</code> aktualisieren und sicherstellen, dass die Darstellung des Elements entsprechend angepasst wird (z.B. Rahmen oder Hintergrundfarbe).</p> <h5 id="Tipps_2">Tipps</h5> <h6 id="scrollIntoView">scrollIntoView</h6> <p>Note that the use of this pattern requires the author to ensure that the current <em>focused</em> widget is scrolled into view. You should be able to use the {{ domxref("element.scrollIntoView()") }} function, but we recommend confirming this works for you in your target browsers using the <a class="external text" href="http://www.quirksmode.org/dom/tests/scrollintoview.html" rel="nofollow">quirksmode test</a>.Bei der Benutzung dieses Musters muss der Entwickler sicherstellen, dass das aktuell <em>fokussierte</em> Element in Sichtweite gescrollt wird. Für diesen Zweck kann die Funktion <code>element.scrollIntoView()</code> eingesetzt werden. Überprüfen Sie jedoch unbedingt mit dem <a class="external text external-icon" href="http://www.quirksmode.org/dom/tests/scrollintoview.html" rel="nofollow">Quirksmode-Test</a>, ob dies für ihre Browser, die unterstützt werden sollen, fehlerfrei funktioniert.</p> diff --git a/files/de/web/api/file/filesize/index.html b/files/de/web/api/blob/size/index.html index 0c91c5f739..f4d832f944 100644 --- a/files/de/web/api/file/filesize/index.html +++ b/files/de/web/api/blob/size/index.html @@ -1,11 +1,12 @@ --- title: File.fileSize -slug: Web/API/File/fileSize +slug: Web/API/Blob/size tags: - DOM - Files - Property translation_of: Web/API/File/fileSize +original_slug: Web/API/File/fileSize --- <p>{{APIRef("File API") }}{{non-standard_header}}</p> diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index a9ca29c7e8..a07f527a28 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -1537,6 +1537,7 @@ /es/docs/Web/API/Event/createEvent /es/docs/Web/API/Document/createEvent /es/docs/Web/API/Fetch_API/Conceptos_basicos /es/docs/Web/API/Fetch_API/Basic_concepts /es/docs/Web/API/Fetch_API/Utilizando_Fetch /es/docs/Web/API/Fetch_API/Using_Fetch +/es/docs/Web/API/File/fileName /es/docs/conflicting/Web/API/File/name /es/docs/Web/API/Geolocalización /es/docs/Web/API/Geolocation /es/docs/Web/API/Geolocation.clearWatch /es/docs/Web/API/Geolocation/clearWatch /es/docs/Web/API/Geolocation.getCurrentPosition /es/docs/Web/API/Geolocation/getCurrentPosition @@ -1546,6 +1547,7 @@ /es/docs/Web/API/HTMLOrForeignElement/focus /es/docs/orphaned/Web/API/HTMLOrForeignElement/focus /es/docs/Web/API/IDBObjectStore.add /es/docs/Web/API/IDBObjectStore/add /es/docs/Web/API/IndexedDB_API/Usando_IndexedDB /es/docs/Web/API/IndexedDB_API/Using_IndexedDB +/es/docs/Web/API/KeyboardEvent/which /es/docs/Web/API/UIEvent/which /es/docs/Web/API/Navigator.getUserMedia /es/docs/Web/API/Navigator/getUserMedia /es/docs/Web/API/NavigatorConcurrentHardware /es/docs/orphaned/Web/API/NavigatorConcurrentHardware /es/docs/Web/API/NavigatorConcurrentHardware/hardwareConcurrency /es/docs/orphaned/Web/API/NavigatorConcurrentHardware/hardwareConcurrency @@ -1596,7 +1598,7 @@ /es/docs/Web/API/WindowTimers/setTimeout /es/docs/Web/API/setTimeout /es/docs/Web/API/XMLHttpRequest/FormData /es/docs/Web/API/FormData /es/docs/Web/API/event.defaultPrevented /es/docs/Web/API/Event/defaultPrevented -/es/docs/Web/API/event.which /es/docs/Web/API/KeyboardEvent/which +/es/docs/Web/API/event.which /es/docs/Web/API/UIEvent/which /es/docs/Web/Accesibilidad /es/docs/Web/Accessibility /es/docs/Web/Accesibilidad/Comunidad /es/docs/Web/Accessibility/Community /es/docs/Web/Accesibilidad/Understanding_WCAG /es/docs/Web/Accessibility/Understanding_WCAG diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index fd2d790297..4b1222be2c 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -6609,14 +6609,6 @@ "Izel" ] }, - "Web/API/File/fileName": { - "modified": "2020-02-09T09:40:59.258Z", - "contributors": [ - "blanchart", - "IsraelFloresDGA", - "BrodaNoel" - ] - }, "Web/API/File/lastModifiedDate": { "modified": "2019-03-23T22:06:34.338Z", "contributors": [ @@ -7446,14 +7438,6 @@ "empirreamm" ] }, - "Web/API/KeyboardEvent/which": { - "modified": "2019-03-23T23:25:30.040Z", - "contributors": [ - "fscholz", - "jsx", - "arthusu" - ] - }, "Web/API/Location": { "modified": "2020-03-11T08:46:40.807Z", "contributors": [ @@ -8440,6 +8424,14 @@ "fscholz" ] }, + "Web/API/UIEvent/which": { + "modified": "2019-03-23T23:25:30.040Z", + "contributors": [ + "fscholz", + "jsx", + "arthusu" + ] + }, "Web/API/URL": { "modified": "2019-03-23T22:19:12.735Z", "contributors": [ @@ -21362,6 +21354,14 @@ "tureey" ] }, + "conflicting/Web/API/File/name": { + "modified": "2020-02-09T09:40:59.258Z", + "contributors": [ + "blanchart", + "IsraelFloresDGA", + "BrodaNoel" + ] + }, "conflicting/Web/API/Geolocation": { "modified": "2019-03-23T23:01:31.642Z", "contributors": [ diff --git a/files/es/web/api/file/filename/index.html b/files/es/conflicting/web/api/file/name/index.html index 2179e85756..5813cf521c 100644 --- a/files/es/web/api/file/filename/index.html +++ b/files/es/conflicting/web/api/file/name/index.html @@ -1,6 +1,6 @@ --- title: File.fileName -slug: Web/API/File/fileName +slug: conflicting/Web/API/File/name tags: - API - Archivos @@ -9,6 +9,7 @@ tags: - Propiedad - Referencia translation_of: Web/API/File/fileName +original_slug: Web/API/File/fileName --- <p>{{APIRef("File API")}}{{non-standard_header}} {{obsolete_header(7.0)}}</p> diff --git a/files/es/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html b/files/es/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html index e8bd99f940..77f3aa804a 100644 --- a/files/es/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html +++ b/files/es/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html @@ -97,13 +97,6 @@ document.getElementById("formInstruction").setAttribute("role", "alert");</pre> <pre class="brush: js">// removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert: document.getElementById("expirationWarning").className = ""; </pre> -<h4 id="Ejemplos_funcionales">Ejemplos funcionales:</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/example/1/">Rol de alerta utilizando una caja de alerta ARIA</a></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/alertdialog1/">Alerta utilizando una caja de dialogo modal ARIA</a></li> -</ul> - <h3 id="Notas">Notas </h3> <ul> diff --git a/files/es/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html b/files/es/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html index b6b45a05bc..e32e9663fd 100644 --- a/files/es/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html +++ b/files/es/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html @@ -40,10 +40,6 @@ original_slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_el_atributo_aria-re </form> </pre> -<h4 id="Ejemplos_en_acción">Ejemplos en acción:</h4> - -<p><a class="external" href="http://www.oaa-accessibility.org/examplep/tooltip1/">Ejemplo de un Tooltip</a> (incluye el uso del atributo <code>aria-required</code>)</p> - <h3 id="Notas">Notas </h3> <h3 id="Usan_ARIA_roles">Usan ARIA roles</h3> diff --git a/files/es/web/api/keyboardevent/which/index.html b/files/es/web/api/uievent/which/index.html index 11e1e3e48e..e86c4363e1 100644 --- a/files/es/web/api/keyboardevent/which/index.html +++ b/files/es/web/api/uievent/which/index.html @@ -1,12 +1,13 @@ --- title: event.which -slug: Web/API/KeyboardEvent/which +slug: Web/API/UIEvent/which tags: - DOM - events - metodo - which translation_of: Web/API/KeyboardEvent/which +original_slug: Web/API/KeyboardEvent/which --- <p>{{ ApiRef() }}</p> <h3 id="Summary" name="Summary">Resumen</h3> diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt index 9cd2fc2d36..b429d17874 100644 --- a/files/fr/_redirects.txt +++ b/files/fr/_redirects.txt @@ -3467,6 +3467,7 @@ /fr/docs/Web/API/AudioContext/createGain /fr/docs/Web/API/BaseAudioContext/createGain /fr/docs/Web/API/Body /fr/docs/orphaned/Web/API/Body /fr/docs/Web/API/Body/json /fr/docs/orphaned/Web/API/Body/json +/fr/docs/Web/API/ByteString /fr/docs/Web/JavaScript/Reference/Global_Objects/String /fr/docs/Web/API/CSSMatrix /fr/docs/Web/API/DOMMatrix /fr/docs/Web/API/Canvas_API/Tutoriel_canvas /fr/docs/Web/API/Canvas_API/Tutorial /fr/docs/Web/API/Canvas_API/Tutoriel_canvas/Advanced_animations /fr/docs/Web/API/Canvas_API/Tutorial/Advanced_animations @@ -3646,6 +3647,8 @@ /fr/docs/Web/API/EventTarget/attachEvent /fr/docs/Web/API/EventTarget/addEventListener /fr/docs/Web/API/EventTarget/detachEvent /fr/docs/Web/API/EventTarget/removeEventListener /fr/docs/Web/API/EventTarget/fireEvent /fr/docs/Web/API/EventTarget/dispatchEvent +/fr/docs/Web/API/File/fileName /fr/docs/Web/API/File/name +/fr/docs/Web/API/File/fileSize /fr/docs/Web/API/Blob/size /fr/docs/Web/API/FileList/FileList /fr/docs/Web/API/FileList /fr/docs/Web/API/FileReader/FileList /fr/docs/Web/API/FileList /fr/docs/Web/API/FormData/Utilisation_objets_FormData /fr/docs/Web/API/FormData/Using_FormData_Objects diff --git a/files/fr/_wikihistory.json b/files/fr/_wikihistory.json index fcdcc1acd9..d0a2f3d840 100644 --- a/files/fr/_wikihistory.json +++ b/files/fr/_wikihistory.json @@ -11979,6 +11979,12 @@ "wlalele" ] }, + "Web/API/Blob/size": { + "modified": "2019-03-18T21:38:36.545Z", + "contributors": [ + "loella16" + ] + }, "Web/API/Blob/type": { "modified": "2020-10-15T21:55:27.760Z", "contributors": [ @@ -12013,14 +12019,6 @@ "loella16" ] }, - "Web/API/ByteString": { - "modified": "2019-03-23T22:50:30.417Z", - "contributors": [ - "BEHOUBA", - "SphinxKnight", - "Hell_Carlito" - ] - }, "Web/API/CDATASection": { "modified": "2020-10-15T21:37:54.310Z", "contributors": [ @@ -15875,18 +15873,12 @@ "jean_pierre" ] }, - "Web/API/File/fileName": { + "Web/API/File/name": { "modified": "2019-03-18T21:38:44.194Z", "contributors": [ "loella16" ] }, - "Web/API/File/fileSize": { - "modified": "2019-03-18T21:38:36.545Z", - "contributors": [ - "loella16" - ] - }, "Web/API/FileList": { "modified": "2020-10-15T21:10:58.823Z", "contributors": [ @@ -38297,18 +38289,11 @@ ] }, "Web/JavaScript/Reference/Global_Objects/String": { - "modified": "2020-10-15T21:09:29.467Z", + "modified": "2019-03-23T22:50:30.417Z", "contributors": [ + "BEHOUBA", "SphinxKnight", - "Brack0", - "grandoc", - "LCaba49", - "gabrielvv", - "tregagnon", - "teoli", - "fscholz", - "daniel35310", - "rat" + "Hell_Carlito" ] }, "Web/JavaScript/Reference/Global_Objects/String/@@iterator": { diff --git a/files/fr/glossary/fps/index.html b/files/fr/glossary/fps/index.html new file mode 100644 index 0000000000..b36d2e90e0 --- /dev/null +++ b/files/fr/glossary/fps/index.html @@ -0,0 +1,23 @@ +--- +title: Fréquence d'images (FPS) +slug: Glossary/FPS +translation_of: 'Glossary/FPS' +--- +<p>Une <strong>fréquence d'images</strong> est la vitesse à laquelle le navigateur est capable de recalculer, de mettre en page et de peindre le contenu à l'écran. Les <strong>images par seconde</strong>, ou <strong>fps</strong> (« <i>frames per second</i> » en anglais), correspondent au nombre d'images pouvant être affichées en une seconde. La fréquence d'images de l'objectif pour l'infographie du site web est de 60fps.</p> + +<p>Les films ont généralement une fréquence d'images de 24fps. Ils sont capables d'avoir moins d'images par seconde car l'illusion de la vie est créée avec des flous de mouvement. Lorsque vous vous déplacez sur un écran d'ordinateur, il n'y a pas de flou de mouvement (sauf si vous animez un <a href="/fr/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS">sprite</a> d'image avec des flous de mouvement).</p> + +<section id="Quick_links"> +<ol> + <li><a href="/fr/docs/Glossary">Glossaire</a> + <ol> + <li>{{glossary("FPS")}}</li> + </ol> + </li> + <li>Articles Wikipedia + <ol> + <li>{{Interwiki("wikipedia", "Frame rate")}}</li> + </ol> + </li> +</ol> +</section> diff --git a/files/fr/learn/css/building_blocks/handling_different_text_directions/index.html b/files/fr/learn/css/building_blocks/handling_different_text_directions/index.html index a7586c5ebf..4523b58fa4 100644 --- a/files/fr/learn/css/building_blocks/handling_different_text_directions/index.html +++ b/files/fr/learn/css/building_blocks/handling_different_text_directions/index.html @@ -6,151 +6,153 @@ original_slug: Apprendre/CSS/Building_blocks/Handling_different_text_directions --- <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</div> -<p>Beaucoup des propriétés et des valeurs que nous avons rencontrées jusqu'ici dans notre apprentissage du CSS ont été associées aux dimensions physiques de notre écran. Nous créons des bordues en haut, à droite, en bas et à gauche d'une box, par exemple. Ces dimensions physiques s'accordent très bien au contenu qui est visionné horizontalement, et par défaut le web à tendance à mieux supporter les langues qui se lisent de gauche à droite (par exemple l'anglais ou le Français) que celles qui se lisent de droite à gauche (comme l'Arabe).</p> +<p>Beaucoup des propriétés et des valeurs que nous avons rencontrées jusqu'ici dans notre apprentissage du CSS ont été associées aux dimensions physiques de notre écran. Nous créons des bordures en haut, à droite, en bas et à gauche d'une box, par exemple. Ces dimensions physiques s'accordent très bien au contenu qui est visionné horizontalement, et par défaut le web a tendance à mieux supporter les langues qui se lisent de gauche à droite (par exemple l'anglais ou le français) que celles qui se lisent de droite à gauche (comme l'arabe).</p> -<p>Ces dernières années cependant, le CSS a évolué pour supporter du contenu orienté dans différentes directions, comme la droite vers la gauche, mais également le haut vers le bas (comme le Japonais) — Ces différentes directionnalités sont appelées <strong>writing modes</strong> (modes d'écriture en français). En progressant dans votre apprentissage et en travaillant sur l'agencement, une compréhension des modes d'écriture vous sera très utile, donc nous allons vous les présenter maintenant.</p> +<p>Ces dernières années cependant, le CSS a évolué pour supporter du contenu orienté dans différentes directions, comme la droite vers la gauche, mais également le haut vers le bas (comme le japonais) — Ces différentes directions sont appelées <strong>modes d'écriture</strong> (<i lang="en">writing modes</i> en anglais). En progressant dans votre apprentissage et en travaillant sur l'agencement, une compréhension des modes d'écriture vous sera très utile, donc nous allons vous les présenter maintenant.</p> <table class="learn-box standard-table"> <tbody> <tr> - <th scope="row">Prerequisites:</th> - <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td> + <th scope="row">Prérequis :</th> + <td>Notions informatiques de base, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">avoir installé les logiciels de base</a>, notions élémentaires sur <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">la manipulation des fichiers</a>, notions élémentaires sur HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">l'introduction à HTML</a>), et une idée du fonctionnement de CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">les premiers pas en CSS</a>.)</td> </tr> <tr> - <th scope="row">Objective:</th> - <td>To understand the importance of writing modes to modern CSS.</td> + <th scope="row">Objectif :</th> + <td>Comprendre l'importance des modes d'écriture pour le CSS moderne.</td> </tr> </tbody> </table> <h2 id="Que_sont_les_modes_décritures">Que sont les modes d'écritures?</h2> -<p>Un mode d'écriture en CSS fait référence au sens d'écriture du texte, soit horizontalement, soit verticalement. La propriété {{cssxref("writing-mode")}} nous permet de passer d'un mode d'écriture à un autre. Vous n'avez pas besoin de travailler dans une langue qui utilise un mode d'écriture vertical pour vouloir l'utiliser — vous pourriez aussi changer le mode d'écriture de certaines parties de votre agencement dans un but créatif.</p> +<p>Un mode d'écriture en CSS fait référence au sens d'écriture du texte : horizontal ou vertical. La propriété <a href="/fr/docs/Web/CSS/writing-mode"><code>writing-mode</code></a> nous permet de passer d'un mode d'écriture à un autre. Vous n'avez pas besoin de travailler dans une langue qui utilise un mode d'écriture vertical pour vouloir l'utiliser — vous pourriez aussi changer le mode d'écriture de certaines parties de votre agencement dans un but créatif.</p> <p>Dans l'exemple ci-dessous nous avons un titre affiché qui utilise <code>writing-mode: vertical-rl</code>. Le texte est maintenant affiché verticalement. Les textes verticaux sont communs dans le design graphique, et peuvent être un moyen pour ajouter un look plus intéressant à votre design web.</p> <p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}</p> -<p>Les trois valeurs possibles pour la propriété <code><a href="/en-US/docs/Web/CSS/writing-mode">writing-mode</a></code> sont:</p> +<p>Les trois valeurs possibles pour la propriété <code><a href="/fr/docs/Web/CSS/writing-mode">writing-mode</a></code> sont :</p> <ul> - <li><code>horizontal-tb</code>: Top-to-bottom block flow direction. Sentences run horizontally.</li> - <li><code>vertical-rl</code>: Right-to-left block flow direction. Sentences run vertically.</li> - <li><code>vertical-lr</code>: Left-to-right block flow direction. Sentences run vertically.</li> + <li><code>horizontal-tb</code> : Direction de bloc allant du haut vers le bas, les phrases sont écrites horizontalement.</li> + <li><code>vertical-rl</code> : Direction de bloc allant de droite à gauche, les phrases sont écrites verticalement.</li> + <li><code>vertical-lr</code> : Direction de bloc allant de gauche à droite, les phrases sont écrites verticalement.</li> </ul> -<p>So the <code>writing-mode</code> property is in reality setting the direction in which block-level elements are displayed on the page — either from top-to-bottom, right-to-left, or left-to-right. This then dictates the direction text flows in sentences.</p> +<p>La propriété <code>writing-mode</code> définit d'abord la direction selon laquelle les éléments de bloc sont affichés sur la page : de haut en bas, de droite à gauche ou de gauche à droite. Elle indique ensuite la direction selon laquelle le texte est écrit au sein des phrases.</p> -<h2 id="Writing_modes_and_block_and_inline_layout">Writing modes and block and inline layout</h2> +<h2 id="writing_modes_and_block_and_inline_layout">Modes d'écriture et disposition en bloc ou en ligne</h2> -<p>We have already discussed <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model#Block_and_inline_boxes">block and inline layout</a>, and the fact that some things display as block elements and others as inline elements. As we have seen described above, block and inline is tied to the writing mode of the document, and not the physical screen. Blocks are only displayed from the top to the bottom of the page if you are using a writing mode that displays text horizontally, such as English.</p> +<p>Nous avons déjà abordé <a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model#block_and_inline_boxes">la disposition en ligne et en bloc</a> et le fait que certains éléments s'affichent en bloc et d'autres en ligne. Dans les descriptions précédentes, on voit que le caractère « de bloc » ou « en ligne » est lié au mode d'écriture du document et pas à l'écran, physique. Les blocs sont uniquement affichés de haut en bas sur la page si on utilise un mode d'écriture qui organise le texte horizontalement, comme celui utilisé pour le français.</p> -<p>If we look at an example this will become clearer. In this next example I have two boxes that contain a heading and a paragraph. The first uses <code>writing-mode: horizontal-tb</code>, a writing mode that is written horizontally and from the top of the page to the bottom. The second uses <code>writing-mode: vertical-rl</code>; this is a writing mode that is written vertically and from right to left.</p> +<p>Prenons un exemple pour éclaircir tout ça. Ici, on a deux boîtes qui contiennent un titre et un paragraphe. La première boîte utilise <code>writing-mode: horizontal-tb</code>, c'est-à-dire un mode d'écriture où le texte est écrit horizontalement et où le contenu s'organise du haut de la page vers le bas. La deuxième boîte utilise <code>writing-mode: vertical-rl</code>, c'est-à-dire un mode d'écriture où le texte est écrit verticalement et où le contenu va de droite à gauche.</p> <p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}</p> -<p>When we switch the writing mode, we are changing which direction is block and which is inline. In a <code>horizontal-tb</code> writing mode the block direction runs from top to bottom; in a <code>vertical-rl</code> writing mode the block direction runs right-to-left horizontally. So the <strong>block dimension</strong> is always the direction blocks are displayed on the page in the writing mode in use. The <strong>inline dimension</strong> is always the direction a sentence flows.</p> +<p>Lorsqu'on change de mode d'écriture, on change la direction utilisée pour l'axe de bloc et celle pour l'axe en ligne. Avec un mode d'écriture <code>horizontal-tb</code>, la direction de bloc va de haut en bas avec un mode d'écriture <code>vertical-rl</code>, la direction de bloc va de droite à gauche. Ainsi, la <strong>dimension de bloc</strong> correspond toujours à la direction selon laquelle les blocs sont affichés sur la page pour le mode d'écriture utilisé. La <strong>dimension en ligne</strong> correspond toujours à la direction selon laquelle les phrases sont écrites.</p> -<p>This figure shows the two dimensions when in a horizontal writing mode.<img alt="Showing the block and inline axis for a horizontal writing mode." src="https://mdn.mozillademos.org/files/16574/horizontal-tb.png" style="height: 353px; width: 634px;"></p> +<p>Ce schéma illustre les deux dimensions pour un mode d'écriture horizontal.</p> -<p>This figure shows the two dimensions in a vertical writing mode.</p> +<p><img alt="Illustration de l'axe de bloc et de l'axe en ligne pour un mode d'écriture horizontal." src="horizontal-tb.png"></p> -<p><img alt="Showing the block and inline axis for a vertical writing mode." src="https://mdn.mozillademos.org/files/16575/vertical.png" style="height: 472px; width: 406px;"></p> +<p>Ce schéma illustre les deux dimensions pour un mode d'écriture vertical.</p> -<p>Once you start to look at CSS layout, and in particular the newer layout methods, this idea of block and inline becomes very important. We will revisit it later on.</p> +<p><img alt="Illustration de l'axe de bloc et de l'axe en ligne pour un mode d'écriture vertical." src="vertical.png"></p> + +<p>Lorsqu'on commence à travailler sur des dispositions CSS, notamment avec les méthodes de disposition récentes, les notions de bloc et d'en ligne se révèlent cruciales. Nous y reviendrons par la suite.</p> <h3 id="Direction">Direction</h3> -<p>In addition to writing mode we also have text direction. As mentioned above, some languages such as Arabic are written horizontally, but right-to-left. This is not something you are likely to use in a creative sense — if you simply want to line something up on the right there are other ways to do so — however it is important to understand this as part of the nature of CSS. The web is not just for languages that are displayed left-to-right!</p> +<p>En plus des modes d'écriture, il existe également la direction du texte. Comme mentionné avant, certaines langues comme l'arabe sont écrites horizontalement mais de droite à gauche. Il ne s'agit probablement pas là d'un aspect qui sera utilisé à des fins artistiques (si on souhaite aligner quelque chose à droite, il existe d'autres façons de faire) mais il est important de comprendre que cela fait partie de la nature de CSS. Le Web ne concerne pas uniquement les langues écrites de gauches à droite !</p> -<p>Due to the fact that writing mode and direction of text can change, newer CSS layout methods do not refer to left and right, and top and bottom. Instead they will talk about <em>start</em> and <em>end</em> along with this idea of inline and block. Don't worry too much about that right now, but keep these ideas in mind as you start to look at layout; you will find it really helpful in your understanding of CSS.</p> +<p>Étant donné que les modes d'écritures et les directions du texte peuvent varier, les nouvelles méthodes de disposition CSS ne font pas référence à la gauche, la droite, le haut ou le bas. À la place, elles utilisent les notions de <em>début</em> et de <em>fin</em>, combinées aux notions bloc et en ligne. Ne vous souciez pas trop de ça pour le moment, mais gardez ces idées en tête lorsque vous verrez ces notions pour les méthodes de disposition, cela vous sera utile pour une bonne compréhension de CSS.</p> -<h2 id="Logical_properties_and_values">Logical properties and values</h2> +<h2 id="logical_properties_and_values">Propriétés et valeurs logiques</h2> -<p>The reason to talk about writing modes and direction at this point in your learning however, is because of the fact we have already looked at a lot of properties which are tied to the physical dimensions of the screen, and make most sense when in a horizontal writing mode.</p> +<p>Nous abordons maintenant les modes d'écriture et la direction du texte maintenant, car les propriétés que nous avons vues jusqu'à présent étaient plutôt liées aux dimensions physiques de l'écran et à un mode d'écriture horizontal.</p> -<p>Let's take a look at our two boxes again — one with a <code>horizontal-tb</code> writing mode and one with <code>vertical-rl</code>. I have given both of these boxes a {{cssxref("width")}}. You can see that when the box is in the vertical writing mode, it still has a width, and this is causing the text to overflow.</p> +<p>Reprenons nos deux boîtes : celle avec le mode d'écriture <code>horizontal-tb</code> et celle avec le mode d'écriture <code>vertical-rl</code>. Pour ces deux boîtes, on a défini <a href="/fr/docs/Web/CSS/width"><code>width</code></a>. Pour la boîte avec le mode d'écriture vertical, cela provoque un dépassement du texte.</p> <p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}</p> -<p>What we really want in this scenario, is to essentially swap height and width along with the writing mode. When we're in a vertical writing mode we want the box to expand in the block dimension just like it does in the horizontal mode.</p> +<p>Ce qu'on veut plus probablement dans ce scénario, c'est de passer de la largeur à la hauteur selon le mode d'écriture : quand on utilise un mode d'écriture vertical, on souhaite que la boîte soit redimensionnée selon l'axe de bloc, comme pour le mode horizontal.</p> -<p>To make this easier, CSS has recently developed a set of mapped properties. These essentially replace physical properties — things like <code>width</code> and <code>height</code> — with <strong>logical</strong>, or <strong>flow relative</strong> versions.</p> +<p>Pour faciliter cela, CSS est désormais doté d'un ensemble de propriétés correspondantes. Dans l'ensemble, ces propriétés remplacent les propriétés physiques comme <code>width</code> ou <code>height</code> par des versions <strong>logiques</strong> ou <strong>relatives au flux</strong>.</p> -<p>The property mapped to <code>width</code> when in a horizontal writing mode is called {{cssxref("inline-size")}} — it refers to the size in the inline dimension. The property for <code>height</code> is named {{cssxref("block-size")}} and is the size in the block dimension. You can see how this works in the example below where we have replaced <code>width</code> with <code>inline-size</code>.</p> +<p>La propriété logique qui correspond à <code>width</code> lorsqu'on utilise un mode d'écriture horizontal est appelée <a href="/fr/docs/Web/CSS/inline-size"><code>inline-size</code></a> : elle fait référence à la dimension selon l'axe en ligne. La propriété correspondant à <code>height</code> est quant à elle intitulée <a href="/fr/docs/Web/CSS/block-size"><code>block-size</code></a> et représente la taille selon la dimension de bloc. Vous pouvez observer leur fonctionnement dans l'exemple qui suit où nous avons remplacé <code>width</code> par <code>inline-size</code>.</p> -<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}</p> +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 950)}}</p> -<h3 id="Logical_margin_border_and_padding_properties">Logical margin, border, and padding properties</h3> +<h3 id="logical_margin_border_and_padding_properties">Propriétés logiques pour les marges, bordures et remplissages</h3> -<p>In the last two lessons we have learned about the CSS box model, and CSS borders. In the margin, border, and padding properties you will find many instances of physical properties, for example {{cssxref("margin-top")}}, {{cssxref("padding-left")}}, and {{cssxref("border-bottom")}}. In the same way that we have mappings for width and height there are mappings for these properties.</p> +<p>Dans les deux précédentes leçons, nous avons abordé le modèle de boîte CSS et les bordures. Pour les propriétés qui régissent les marges, bordures et le remplissage, vous verrez de nombreuses propriétés physiques comme <a href="/fr/docs/Web/CSS/margin-top"><code>margin-top</code></a>, <a href="/fr/docs/Web/CSS/padding-left"><code>padding-left</code></a>, et <a href="/fr/docs/Web/CSS/border-bottom"><code>border-bottom</code></a>. À l'instar de la hauteur et de la largeur, ces propriétés disposent de propriétés logiques équivalentes.</p> -<p>The <code>margin-top</code> property is mapped to {{cssxref("margin-block-start")}} — this will always refer to the margin at the start of the block dimension.</p> +<p>La propriété physique <code>margin-top</code> correspond à la propriété logique <a href="/fr/docs/Web/CSS/margin-block-start"><code>margin-block-start</code></a> pour un mode d'écriture horizontal. Cette propriété logique fera toujours référence à la marge située au début de la dimension de bloc.</p> -<p>The {{cssxref("padding-left")}} property maps to {{cssxref("padding-inline-start")}}, the padding that is applied to the start of the inline direction. This will be where sentences start in that writing mode. The {{cssxref("border-bottom")}} property maps to {{cssxref("border-block-end")}}, which is the border at the end of the block dimension.</p> +<p>La propriété physique <a href="/fr/docs/Web/CSS/padding-left"><code>padding-left</code></a> trouve son équivalent avec <a href="/fr/docs/Web/CSS/padding-inline-start"><code>padding-inline-start</code></a>, le remplissage (<i lang="en">padding</i>) appliqué au début de la direction en ligne. Cela correspond à l'endroit où les phrases commencent pour le mode d'écriture courant. La propriété <a href="/fr/docs/Web/CSS/border-bottom"><code>border-bottom</code></a> a quant à elle l'équivalent <a href="/fr/docs/Web/CSS/border-block-end"><code>border-block-end</code></a> qui représente la bordure sur à la fin de la dimension de bloc.</p> -<p>You can see a comparison between physical and logical properties below.</p> +<p>Vous pouvez voir une comparaison entre les propriétés physiques et logiques ci-après.</p> -<p><strong>If you change the writing mode of the boxes by switching the <code>writing-mode</code> property on <code>.box</code> to <code>vertical-rl</code>, you will see how the physical properties stay tied to their physical direction, whereas the logical properties switch with the writing mode.</strong></p> +<p><strong>Si vous changez le mode d'écriture des boîtes en modifiant la valeur de <code>writing-mode</code> sur le sélecteur <code>.box</code> afin de la passer à <code>vertical-rl</code>, vous pourrez voir que les propriétés physiques restent liées aux directions physiques tandis que les propriétés logiques s'adaptent en fonction du mode d'écriture.</strong></p> -<p><strong>You can also see that the {{htmlelement("h2")}} has a black <code>border-bottom</code>. Can you work out how to make that bottom border always go below the text in both writing modes?</strong></p> +<p><strong>Vous pouvez également voir que <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h2></code></a> a une bordure avec <code>border-bottom</code>. Pouvez-vous adapter le code afin que la bordure sous le texte suive cette direction, quel que soit le mode d'écriture ?</strong></p> <p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}</p> -<p>There are a huge number of properties when you consider all of the individual border longhands, and you can see all of the mapped properties on the MDN page for <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">Logical Properties and Values</a>.</p> +<p>Il existe de nombreuses propriétés détaillées pour gérer les différents aspects des bordures, vous pouvez voir l'ensemble des correspondances sur la page MDN des <a href="/fr/docs/Web/CSS/CSS_Logical_Properties">propriétés et valeurs logiques</a>.</p> -<h3 id="Logical_values">Logical values</h3> +<h3 id="logical_values">Valeurs logiques</h3> -<p>We have so far looked at logical property names. There are also some properties that take physical values of <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. These values also have mappings, to logical values — <code>block-start</code>, <code>inline-end</code>, <code>block-end</code>, and <code>inline-start</code>.</p> +<p>Jusqu'à présent, nous avons étudié les noms des propriétés logiques. Il existe également des propriétés dont les valeurs sont caractérisées physiquement comme <code>top</code>, <code>right</code>, <code>bottom</code>, et <code>left</code>. Ces valeurs disposent également d'équivalences logiques : <code>block-start</code>, <code>inline-end</code>, <code>block-end</code>, et <code>inline-start</code>.</p> -<p>For example, you can float an image left to cause text to wrap round the image. You could replace <code>left</code> with <code>inline-start</code> as shown in the example below.</p> +<p>Ainsi, on peut faire flotter une image à gauche pour que le texte soit écrit autour de l'image. Dans l'exemple qui suit, vous pouvez remplacer <code>left</code> avec <code>inline-start</code>.</p> -<p><strong>Change the writing mode on this example to <code>vertical-rl</code> to see what happens to the image. Change <code>inline-start</code> to <code>inline-end</code> to change the float.</strong></p> +<p><strong>Modifiez le mode d'écriture de cet exemple afin de le passer à <code>vertical-rl</code> pour voir ce qui se produit sur l'image. Modifiez <code>inline-start</code> à <code>inline-end</code> pour changer l'emplacement du flottement.</strong></p> -<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}</p> +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 850)}}</p> -<p>Here we are also using logical margin values to ensure the margin is in the correct place no matter what the writing mode is.</p> +<p>Ici, on utilise aussi les valeurs logiques pour les marges afin de s'assurer que les marges sont correctement positionnées, quel que soit le mode d'écriture.</p> -<div class="blockIndicator note"> -<p>Currently, only Firefox supports flow relative values for <code>float</code>. If you are using <strong>Google Chrome</strong> or <strong>Microsoft Edge</strong>, you may find that the image did not float.</p> +<div class="notecard note"> + <p><strong>Note :</strong> Actuellement, seul Firefox prend en charge les valeurs relatives de flux pour <code>float</code>. Si vous utilisez <strong>Google Chrome</strong> ou <strong>Microsoft Edge</strong>, vous obtiendrez vraisemblablement un résultat où l'image ne flotte pas.</p> </div> -<h3 id="Should_you_use_physical_or_logical_properties">Should you use physical or logical properties?</h3> +<h3 id="should_you_use_physical_or_logical_properties">Faut-il utiliser les propriétés physiques ou logiques ?</h3> -<p>The logical properties and values are newer than their physical equivalents, and therefore have only recently been implemented in browsers. You can check any property page on MDN to see how far back the browser support goes. If you are not using multiple writing modes then for now you might prefer to use the physical versions. However, ultimately we expect that people will transition to the logical versions for most things, as they make a lot of sense once you start also dealing with layout methods such as flexbox and grid.</p> +<p>Les propriétés logiques et les valeurs correspondantes sont plus récentes que leurs équivalents physiques et l'implémentation de ces premières est donc également plus récente. Vous pouvez consulter la page de chaque propriété sur MDN pour vérifier le tableau de compatibilité des navigateurs. Si vous n'utilisez pas plusieurs modes d'écriture, vous pourrez préférer les versions physiques. Toutefois, on s'attend à terme que les personnes utilisent les versions logiques dans la majorité des cas étant donné leur pertinence pour certaines méthodes de dispositions comme les grilles CSS ou <i lang="en">flexbox</i>.</p> -<h2 id="Test_your_skills!">Test your skills!</h2> +<h2 id="test_your_skills!">Testez vos compétences !</h2> -<p>We have covered a lot in this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/CSS/Building_blocks/Writing_Modes_Tasks">Test your skills: writing modes</a>.</p> +<p>Nous avons abordé de nombreux concepts dans cet article, mais avez-vous retenu les informations fondamentales ? Vous pourrez trouver différents tests sur le sujet pour vérifier que vous avez assimilé les bonnes informations : voir <a href="/fr/docs/Learn/CSS/Building_blocks/Writing_Modes_Tasks">Testez vos compétences : les modes d'écriture</a>.</p> -<h2 id="Summary">Summary</h2> +<h2 id="summary">Résumé</h2> -<p>The concepts explained in this lesson are becoming increasingly important in CSS. An understanding of the block and inline direction — and how text flow changes with a change in writing mode — will be very useful going forward. It will help you in understanding CSS even if you never use a writing mode other than a horizontal one.</p> +<p>Les concepts expliqués ici revêtent une importance croissante en CSS. Comprendre les directions en ligne et de bloc, ainsi que la façon dont le flux de texte change selon le mode d'écriture vous sera désormais très utile. Vous aurez une meilleure compréhension de CSS, même si vous n'utilisez qu'un seul mode d'écriture horizontal.</p> -<p>In the next module we will take a good look at overflow in CSS.</p> +<p>Dans le prochain module, nous verrons comment les dépassements sont gérés en CSS.</p> <p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</p> -<h2 id="In_this_module">In this 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 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/overflowing_content/index.html b/files/fr/learn/css/building_blocks/overflowing_content/index.html index 0f9c1ac83a..5adba69e5e 100644 --- a/files/fr/learn/css/building_blocks/overflowing_content/index.html +++ b/files/fr/learn/css/building_blocks/overflowing_content/index.html @@ -1,31 +1,31 @@ --- -title: Overflow - Débordements de contenu +title: Débordements de contenu (overflow) slug: Learn/CSS/Building_blocks/Overflowing_content translation_of: Learn/CSS/Building_blocks/Overflowing_content original_slug: Apprendre/CSS/Building_blocks/Overflowing_content --- <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</div> -<p>Dans ce cours nous allons étudier un autre concept important en CSS — <strong>overflow (débordement)</strong>. Un overflow (débordement de contenu) correspond à ce qui se produit lorsque le contenu à insérer dans une boîte occupe trop d'espace pour s'y insérer confortablement. Dans ce guide vous allez apprendre à gérer cela.</p> +<p>Dans ce cours nous allons étudier un autre concept important en CSS : les <strong>débordements</strong> (<i lang="en">overflows</i> en anglais). Un débordement de contenu correspond à ce qui se produit lorsque le contenu à insérer dans une boîte occupe trop d'espace pour s'y insérer confortablement. Dans ce guide vous allez apprendre à gérer cela.</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="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>.</td> + <th scope="row">Prérequis :</th> + <td>Connaissances élémentaires en 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/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction à HTML</a>), et une idée <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">du fonctionnement de CSS</a>.</td> </tr> <tr> - <th scope="row">Objectif:</th> - <td>Comprendre le principe de l'overflow et comment le gérer.</td> + <th scope="row">Objectif :</th> + <td>Comprendre le principe des débordements et comment les gérer.</td> </tr> </tbody> </table> -<h2 id="Quest_ce_quun_overflow">Qu'est ce qu'un overflow?</h2> +<h2 id="what_is_overflow">Qu'est-ce qu'un débordement ?</h2> -<p>Nous savons déjà qu'en CSS tout fonctionne par boîte, et que nous pouvons définir la taille de ces boîtes en leur donnant les valeurs {{cssxref("width")}} et {{cssxref("height")}} (ou {{cssxref("inline-size")}} et {{cssxref("block-size")}}). Un overflow correspond à ce qui se produit lorsqu'il y a trop de contenu dans une boîte et que ce contenu ne s'y intègre pas confortablement. CSS propose différents outils pour gérer ce phénomène, c'est un concept utile à comprendre à ce stade. Vous allez rencontrer des cas d'overflow fréquemment en codant du CSS, particulièrement quand vous irez plus loin dans la mise en page avec CSS.</p> +<p>Nous savons déjà qu'en CSS tout fonctionne par boîte, et que nous pouvons définir la taille de ces boîtes en leur donnant les valeurs <a href="/fr/docs/Web/CSS/width"><code>width</code></a> et <a href="/fr/docs/Web/CSS/height"><code>height</code></a> (ou <a href="/fr/docs/Web/CSS/inline-size"><code>inline-size</code></a> et <a href="/fr/docs/Web/CSS/block-size"><code>block-size</code></a>). Un dépassement correspond à ce qui se produit lorsqu'il y a trop de contenu dans une boîte et que ce contenu ne s'y intègre pas confortablement. CSS propose différents outils pour gérer ce phénomène, c'est un concept utile à comprendre à ce stade. Vous allez rencontrer des cas de dépassement fréquemment en codant du CSS, particulièrement quand vous irez plus loin dans la mise en page avec CSS.</p> -<h2 id="CSS_essaie_déviter_les_pertes_de_données">CSS essaie d'éviter les pertes de données</h2> +<h2 id="css_tries_to_avoid_data_loss">CSS essaie d'éviter les pertes de données</h2> <p>Commençons par observer deux exemples qui montrent comment CSS se comporte par défaut quand il y a un débordement de contenu.</p> @@ -41,13 +41,13 @@ original_slug: Apprendre/CSS/Building_blocks/Overflowing_content <p>Dans la mesure du possible, le CSS ne masque pas votre contenu ; le faire entraînerait des pertes de données, ce qui pose généralement problème. En termes de CSS, cela signifie que certains contenus disparaissent. Le problème de la disparition de contenu est que vous pourriez ne pas remarquer qu'il a disparu. Vos visiteurs également ne le remarqueront peut-être pas. Si c'est le bouton "Envoyer" d'un formulaire qui disparaît et que personne ne peut remplir ce formulaire, c'est un gros problème ! Au lieu de cela, le CSS a tendance à déborder de manière visible. Il est probable que vous verrez le désordre, ou au pire un visiteur de votre site vous fera savoir que certains contenus se chevauchent et qu'il faut donc les corriger.</p> -<p>Si vous avez défini une boîte avec des valeurs <code>width</code> ou <code>height</code>, CSS part du principe que vous savez ce que vous faîtes et que vous gérez le risque de débordement. En général, contraindre la dimension du bloc est problématique lorsque du texte va être mis dans une boîte, car il peut y avoir plus de texte que prévu lors de la conception du site ou que le texte peut être plus gros - par exemple si l'utilisateur a augmenté la taille de sa police.</p> +<p>Si vous avez défini une boîte avec des valeurs <code>width</code> ou <code>height</code>, CSS part du principe que vous savez ce que vous faites et que vous gérez le risque de débordement. En général, contraindre la dimension du bloc est problématique lorsque du texte va être mis dans une boîte, car il peut y avoir plus de texte que prévu lors de la conception du site ou que le texte peut être plus gros - par exemple si l'utilisateur a augmenté la taille de sa police.</p> -<p>Dans les deux prochaines leçons, nous examinerons différentes façons de contrôler la taille des éléments afin de limiter l'overflow. Cependant, si vous avez besoin d'une taille fixe, vous pouvez également contrôler le comportement du trop-plein. Voyons maintenant!</p> +<p>Dans les deux prochaines leçons, nous examinerons différentes façons de contrôler la taille des éléments afin de limiter le dépassement. Cependant, si vous avez besoin d'une taille fixe, vous pouvez également contrôler le comportement du trop-plein. Voyons maintenant !</p> -<h2 id="La_propriété_overflow">La propriété overflow</h2> +<h2 id="the_overflow_property">La propriété overflow</h2> -<p>La propriété {{cssxref("overflow")}} est la façon dont vous prenez le contrôle du débordement d'un élément et dîtes au navigateur comment vous voulez qu'il se comporte. La valeur par défaut est <code>visible</code>, c'est pourquoi, par défaut, nous pouvons voir notre contenu quand il déborde.</p> +<p>La propriété <a href="/fr/docs/Web/CSS/overflow"><code>overflow</code></a> est la façon dont vous prenez le contrôle du débordement d'un élément et dîtes au navigateur comment vous voulez qu'il se comporte. La valeur par défaut est <code>visible</code>, c'est pourquoi, par défaut, nous pouvons voir notre contenu quand il déborde.</p> <p>Si vous souhaitez recadrer le contenu qui déborde, vous pouvez définir <code>overflow: hidden</code> pour votre boîte. Cela fera exactement ce qui est indiqué — cacher le débordement. Vous ne devez donc le faire que si la disparition du contenu ne pose pas de problème.</p> @@ -59,66 +59,66 @@ original_slug: Apprendre/CSS/Building_blocks/Overflowing_content <p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}</p> -<p>Dans l'exemple ci-dessus nous n'avons besoin de faire défiler que l'axe <code>y</code>, cependant nous avons des barres de défilement sur les deux axes. Vous pourriez utiliser à la place la propriété {{cssxref("overflow-y")}}, qui définit <code>overflow-y: scroll</code> afin de faire défiler uniquement sur l'axe <code>y</code>.</p> +<p>Dans l'exemple ci-dessus nous n'avons besoin de faire défiler que l'axe <code>y</code>, cependant nous avons des barres de défilement sur les deux axes. Vous pourriez utiliser à la place la propriété <a href="/fr/docs/Web/CSS/overflow-y"><code>overflow-y</code></a>, qui définit <code>overflow-y: scroll</code> afin de faire défiler uniquement sur l'axe <code>y</code>.</p> <p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}</p> -<p>Vous pourriez également faire défiler sur l'axe x en utilisant {{cssxref("overflow-x")}}, bien que ce ne soit pas une méthode recommandée pour gérer les longs mots ! Si vous avez besoin de gérer un long mot dans une petite boîte alors vous pourriez vous tourner vers les propriétés {{cssxref("word-break")}} ou {{cssxref("overflow-wrap")}}. En complément, certaines méthodes présentées dans le cours <a href="/docs/Apprendre/CSS/Building_blocks/Sizing_items_in_CSS">Définir la taille des éléments en CSS</a> peuvent vous aider à créer des boîtes qui s'adapteront mieux à des quantités variables de contenu.</p> +<p>Vous pourriez également faire défiler sur l'axe x en utilisant <a href="/fr/docs/Web/CSS/overflow-x"><code>overflow-x</code></a>, bien que ce ne soit pas une méthode recommandée pour gérer les longs mots ! Si vous avez besoin de gérer un long mot dans une petite boîte alors vous pourriez vous tourner vers les propriétés <a href="/fr/docs/Web/CSS/word-break"><code>word-break</code></a> ou <a href="/fr/docs/Web/CSS/overflow-wrap"><code>overflow-wrap</code></a>. En complément, certaines méthodes présentées dans le cours <a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Définir la taille des éléments en CSS</a> peuvent vous aider à créer des boîtes qui s'adapteront mieux à des quantités variables de contenu.</p> <p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}</p> <p>Comme pour <code>scroll</code>, une barre de défilement apparaîtra sur l'axe sélectionné qu'il y ait suffisamment de contenu ou pas pour créer un défilement.</p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: vous pouvez spécifier le défilement x et y simultanément en utilisant la propriété <code>overflow</code> en déclarant deux valeurs. Si deux mots clés sont spécifiés , le premier s'applique à <code>overflow-x</code> et le second à <code>overflow-y</code>. Sinon, <code>overflow-x</code> et <code>overflow-y</code> sont définis sur la même valeur. Par exemple, <code>overflow: scroll hidden</code> définira <code>overflow-x</code> sur <code>scroll</code> et <code>overflow-y</code> sur <code>hidden</code>.</p> +<div class="notecard note"> +<p><strong>Note :</strong> vous pouvez spécifier le défilement x et y simultanément en utilisant la propriété <code>overflow</code> en déclarant deux valeurs. Si deux mots clés sont spécifiés, le premier s'applique à <code>overflow-x</code> et le second à <code>overflow-y</code>. Sinon, <code>overflow-x</code> et <code>overflow-y</code> sont définis sur la même valeur. Par exemple, <code>overflow: scroll hidden</code> définira <code>overflow-x</code> sur <code>scroll</code> et <code>overflow-y</code> sur <code>hidden</code>.</p> </div> -<p>Si vous souhaitez que les barres de défilement n'apparaissent que si il y a plus de contenu que la boîte ne peut en contenir, utilisez <code>overflow: auto</code>. Dans ce cas c'est le navigateur qui décidera d'afficher ou non les barres de défilement. Les navigateurs Desktop ne le font généralement que lorsqu'il y a suffisamment de contenu pour provoquer un débordement.</p> +<p>Si vous souhaitez que les barres de défilement n'apparaissent que s'il y a plus de contenu que la boîte ne peut en contenir, utilisez <code>overflow: auto</code>. Dans ce cas c'est le navigateur qui décidera d'afficher ou non les barres de défilement. Les navigateurs de bureau ne le font généralement que lorsqu'il y a suffisamment de contenu pour provoquer un débordement.</p> <p><strong>Dans l'exemple ci-dessous, retirez du contenu jusqu'à ce que ça rentre dans la boîte et vous devriez voir les barres de défilement disparaître.</strong></p> <p>{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}</p> -<h2 id="Overflow_crée_un_Block_Formatting_Context">Overflow crée un "Block Formatting Context"</h2> +<h2 id="overflow_establishes_a_block_formatting_context">Overflow crée un "Block Formatting Context"</h2> -<p>Il existe un concept dans le CSS de "<strong>Block Formatting Context</strong>" (BFC). Ce n'est pas quelque chose dont vous devez trop vous préoccuper pour l'instant, mais il est utile de savoir que lorsque vous utilisez une valeur d'overflow comme <code>scroll</code> ou <code>auto</code> vous créez un BFC. Le résultat est que le contenu de la boîte pour laquelle vous avez modifié la valeur de <code>overflow</code> devient une mini mise en page à part entière. Les éléments extérieurs au conteneur ne peuvent pas pénétrer dans le conteneur, et rien ne peut sortir de cette boîte pour pénétrer dans la mise en page qui l'entoure. Cela permet d'activer le défilement, car tout le contenu de votre boîte devra être intégré et ne pas chevaucher d'autres éléments de la page afin de créer une expérience de défilement cohérente.</p> +<p>Il existe un concept dans le CSS de <strong><i lang="en">Block Formatting Context</i></strong> (BFC). Ce n'est pas quelque chose dont vous devez trop vous préoccuper pour l'instant, mais il est utile de savoir que lorsque vous utilisez une valeur de <code>overflow</code> comme <code>scroll</code> ou <code>auto</code> vous créez un BFC. Le résultat est que le contenu de la boîte pour laquelle vous avez modifié la valeur de <code>overflow</code> devient une mini mise en page à part entière. Les éléments extérieurs au conteneur ne peuvent pas pénétrer dans le conteneur, et rien ne peut sortir de cette boîte pour pénétrer dans la mise en page qui l'entoure. Cela permet d'activer le défilement, car tout le contenu de votre boîte devra être intégré et ne pas chevaucher d'autres éléments de la page afin de créer une expérience de défilement cohérente.</p> -<h2 id="Débordements_indésirables_en_web_design">Débordements indésirables en web design</h2> +<h2 id="unwanted_overflow_in_web_design">Débordements indésirables en web design</h2> -<p>Les méthodes de mise en page modernes (comme étudiées dans le module <a href="/docs/Apprendre/CSS/CSS_layout">La mise en page avec le CSS</a>) gèrent très bien l'overflow. Elles ont été conçues pour faire face au fait que nous avons tendance à ne pas pouvoir prévoir la quantité de contenu que nous aurons sur le web. Par le passé, les développeurs utilisaient souvent des hauteurs fixes pour aligner le bas des boîtes qui n'avaient pas vraiment de relation entre elles. C'était une méthode fragile et il peut arriver qu'occasionnellement, dans une application ancienne, vous soyez confrontés à une boîte dans laquelle le contenu déborde sur la suite de la page. Si vous observez ce phénomène, vous savez maintenant qu'il s'agit d'un overflow ; idéalement vous devriez remanier la mise en page afin de ne pas avoir à contraindre la taille de la boîte.</p> +<p>Les méthodes de mise en page modernes (comme étudiées dans le module <a href="/fr/docs/Learn/CSS/CSS_layout">La mise en page avec le CSS</a>) gèrent très bien le débordement. Elles ont été conçues pour faire face au fait que nous avons tendance à ne pas pouvoir prévoir la quantité de contenu que nous aurons sur le web. Par le passé, les développeurs utilisaient souvent des hauteurs fixes pour aligner le bas des boîtes qui n'avaient pas vraiment de relation entre elles. C'était une méthode fragile et il peut arriver qu'occasionnellement, dans une application ancienne, vous soyez confrontés à une boîte dans laquelle le contenu déborde sur la suite de la page. Si vous observez ce phénomène, vous savez maintenant qu'il s'agit d'un débordement ; idéalement vous devriez remanier la mise en page afin de ne pas avoir à contraindre la taille de la boîte.</p> -<p>Lorsque vous développez un site, vous devez toujours garder à l'esprit les problèmes d'overflow. Vous devez tester des conceptions avec des quantités de contenu importantes et réduites, augmenter la taille de la police et vous assurer que votre CSS peut s'en sortir de manière efficace. La modification de la valeur d'overflow pour masquer le contenu ou ajouter des barres de défilement ne sera probablement réservée qu'à quelques rares cas particuliers - par exemple lorsque vous voulez spécifiquement une barre de défilement.</p> +<p>Lorsque vous développez un site, vous devez toujours garder à l'esprit les problèmes de débordement. Vous devez tester des conceptions avec des quantités de contenu importantes et réduites, augmenter la taille de la police et vous assurer que votre CSS peut s'en sortir de manière efficace. La modification de la valeur d'<code>overflow</code> pour masquer le contenu ou ajouter des barres de défilement ne sera probablement réservée qu'à quelques rares cas particuliers - par exemple lorsque vous voulez spécifiquement une barre de défilement.</p> -<h2 id="Testez-vous!">Testez-vous!</h2> +<h2 id="test_your_skills!">Testez vos compétences !</h2> <p>Nous avons couvert 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 bien retenu ces informations avant de partir - voir (en anglais) <a href="/en-US/docs/Learn/CSS/Building_blocks/Overflow_Tasks">Testez vos compétences: overflow</a>.</p> -<h2 id="Résumé">Résumé</h2> +<h2 id="summary">Résumé</h2> -<p>Cette courte leçon a introduit le concept d'overflow ; vous comprenez maintenant que le CSS essaie de ne pas faire disparaître le contenu qui déborde car cela entraînerait des pertes de données. Vous avez découvert que vous pouvez gérer un overflow éventuel, et que vous devez également tester votre travail pour vous assurer que vous ne causez pas accidentellement un overflow problématique.</p> +<p>Cette courte leçon a introduit le concept de débordement ; vous comprenez maintenant que le CSS essaie de ne pas faire disparaître le contenu qui déborde car cela entraînerait des pertes de données. Vous avez découvert que vous pouvez gérer un débordement éventuel, et que vous devez également tester votre travail pour vous assurer que vous ne causez pas accidentellement un débordement problématique.</p> <p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "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> + <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/values_and_units/index.html b/files/fr/learn/css/building_blocks/values_and_units/index.html index 3968c70cae..bf161a3abc 100644 --- a/files/fr/learn/css/building_blocks/values_and_units/index.html +++ b/files/fr/learn/css/building_blocks/values_and_units/index.html @@ -6,48 +6,49 @@ original_slug: Apprendre/CSS/Building_blocks/Values_and_units --- <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</div> -<p>Chaque propriété utilisée en CSS a un type de valeur définissant un ensemble de valeurs autorisées pour cette propriété. Visiter des pages de propriétés sur MDN vous aidera à comprendre les valeurs associées à un type de valeur, qui sont valides pour une propriété particulière. Dans cette leçon nous allons observer quelques uns des types de valeurs les plus fréquemment utilisés, et leurs valeurs et unités les plus communes.</p> +<p>Chaque propriété utilisée en CSS possède un type de valeur qui définit l'ensemble des valeurs autorisées pour cette propriété. Visiter des pages de propriétés sur MDN vous aidera à comprendre les valeurs associées à un type de valeur, qui sont valides pour une propriété particulière. Dans cette leçon, nous allons observer quelques-uns des types de valeur les plus fréquemment utilisés, ainsi que leurs valeurs et unités les plus communes.</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="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>.</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/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_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>Apprendre les différents types de valeurs et d'unités utilisés dans les propriétés CSS.</td> </tr> </tbody> </table> -<h2 id="Quest-ce_quune_valeur_CSS">Qu'est-ce qu'une valeur CSS?</h2> +<h2 id="Quest-ce_quune_valeur_CSS">Qu'est-ce qu'une valeur CSS ?</h2> -<p>Dans les spécifications CSS et sur les pages de propriétés ici sur MDN, vous pourrez identifier les types de valeurs car ils sont entourés par des chevrons, tel que <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> ou <code><a href="/en-US/docs/Web/CSS/length"><length></a></code>. Quand vous voyez le type de valeur <code><color></code>, valide pour une propriété particulière, cela signifie que vous pouvez utiliser n'importe quelle couleur valide comme valeur pour cette propriété, comme énoncé dans la page de référence de <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code>.</p> +<p>Dans les spécifications CSS et sur les pages de propriétés présentes sur MDN, vous pourrez identifier les types de valeurs, car ils sont entourés par des chevrons, tel que <code><a href="/fr/docs/Web/CSS/color_value"><color></a></code> ou <code><a href="/fr/docs/Web/CSS/length"><length></a></code>. Quand vous voyez le type de valeur <code><color></code>, valide pour une propriété particulière, cela signifie que vous pouvez utiliser n'importe quelle couleur valide comme valeur pour cette propriété, comme énoncé dans la page de référence de <code><a href="/fr/docs/Web/CSS/color_value"><color></a></code>.</p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Vous verrez également des valeurs CSS appelées <em>types de données</em>. Les termes sont interchangeables — Quand vous voyez quelque chose en CSS identifié comme type de données, c'est juste une façon différente de dire type de valeur. Le terme <em>valeur</em> se rapporte à n'importe quelle expression particulière supportée par un type de valeur que vous avez choisi d'utiliser.</p> +<div class="notecard note"> +<p><strong>Note</strong> : Vous verrez également des valeurs CSS appelées <em>types de données</em>. Les termes sont interchangeables — Quand vous voyez quelque chose en CSS identifié comme type de données, c'est juste une façon différente de dire type de valeur. Le terme <em>valeur</em> se rapporte à n'importe quelle expression particulière supportée par un type de valeur que vous avez choisi d'utiliser.</p> </div> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Oui, les types de valeur CSS tendent à être indiqués par des chevrons, pour les différencier des propriétés CSS (ex: la propriété {{cssxref("color")}}, comparée au type de données <a href="/en-US/docs/Web/CSS/color_value"><color></a>). Vous pourriez aussi être désorienté entre les ttypes de données CSS et les éléments HTML, car ils utilisent tous deux les chevrons, mais c'est peu probable — ils sont utilisés dans des contextes très différents.</p> +<div class="notecard note"> +<p><strong>Note</strong> : Oui, les types de valeurs CSS tendent à être indiqués par des chevrons, pour les différencier des propriétés CSS (ex : la propriété <a href="/fr/docs/Web/CSS/color"><code>color</code></a>, comparée au type de données <a href="/fr/docs/Web/CSS/color_value"><color></a>). Vous pourriez aussi être désorienté entre les types de données CSS et les éléments HTML, car ils utilisent tous deux les chevrons, mais c'est peu probable — ils sont utilisés dans des contextes très différents.</p> </div> -<p>Dans l'exemple suivant, nous avons défini la couleur de notre titre en utilisant un mot-clé, et la couleur de fond en utilisant la fonction <code>rgb()</code>:</p> +<p>Dans l'exemple suivant, nous avons défini la couleur de notre titre en utilisant un mot-clé, et la couleur de fond en utilisant la fonction <code>rgb()</code> :</p> -<pre class="brush: css notranslate"><code>h1 { +<pre class="brush: css ">h1 { color: black; background-color: rgb(197,93,161); -} </code> +} </pre> -<p>Un type de valeurs en CSS est une manière de définir un ensemble de valeurs autorisées. Cela signifie que si vous voyez <code><color></code> comme valide, vous n'avez pas besoin de vous demander quel type de valeur vous pouvez utiliser — mot-clés, valeurs hex, fonctions <code>rgb()</code>, etc. Vous pouvez utiliser <em>n'importe quelle</em> valeur <code><color></code> disponible, en supposant qu'elle soit supportée par votre navigateur. La pageMDN pour chaque valeur vous donnera les informations au sujet du support par le navigateur. Par exemple, si vous regardez la page <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code>, vous verrez que la section sur la compatibilité des navigateurs liste différents types de valeurs pour "color" et le support.</p> +<p>Un type de valeur en CSS est une manière de définir un ensemble de valeurs autorisées. Cela signifie que si vous voyez <code><color></code> comme valide, vous n'avez pas besoin de vous demander quel type de valeur vous pouvez utiliser — mot-clés, valeurs hex, fonctions <code>rgb()</code>, etc. Vous pouvez utiliser <em>n'importe quelle</em> valeur <code><color></code> disponible, en supposant qu'elle soit supportée par votre navigateur. La page MDN pour chaque valeur vous donnera les informations au sujet du support par le navigateur. Par exemple, si vous regardez la page <code><a href="/fr/docs/Web/CSS/color_value"><color></a></code>, vous verrez que la section sur la compatibilité des navigateurs liste différents types de valeurs pour "color" et le support.</p> -<p>Observons quelques uns des types de valeurs et d'unités que vous pouvez fréquemment rencontrer, avec des exemples, pour que vous puissiez essayer différentes valeurs possibles.</p> +<p>Observons quelques-uns des types de valeurs et d'unités que vous pouvez fréquemment rencontrer, avec des exemples, pour que vous puissiez essayer différentes valeurs possibles.</p> -<h2 id="Nombres_longueurs_et_pourcentages">Nombres, longueurs et pourcentages</h2> -<p>Il éxiste de nombreux types de valeurs numériques que vous pourrez trouver vous même en utilisant CSS. Les suivants sont tous classés comme numériques:</p> +<h2 id="numbers_lengths_and_percentages">Nombres, longueurs et pourcentages</h2> + +<p>Il existe plusieurs types de valeur numérique que vous pourrez utiliser en CSS. Les types qui suivent sont classés comme numériques :</p> <table class="standard-table"> <thead> @@ -58,336 +59,337 @@ original_slug: Apprendre/CSS/Building_blocks/Values_and_units </thead> <tbody> <tr> - <td><code><a href="/en-US/docs/Web/CSS/integer"><integer></a></code></td> - <td><code><integer></code> est un nombre entier comme <code>1024</code> ou <code>-55</code>.</td> + <td><code><a href="/fr/docs/Web/CSS/integer"><integer></a></code></td> + <td>Une valeur de type <code><integer></code> est un nombre entier comme <code>1024</code> ou <code>-55</code>.</td> </tr> <tr> - <td><code><a href="/en-US/docs/Web/CSS/number"><number></a></code></td> - <td><code><number></code> représente un nombre décimal — il peut avoir, ou non, un point décimal avec un composant fractionnaire. Par exemple, <code>0.255</code>, <code>128</code>, ou <code>-1.2</code>.</td> + <td><code><a href="/fr/docs/Web/CSS/number"><number></a></code></td> + <td>Une valeur de type <code><number></code> représente un nombre décimal (qui peut avoir ou ne pas avoir de partie décimale). Par exemple : <code>0.255</code>, <code>128</code>, ou <code>-1.2</code>.</td> </tr> <tr> - <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/dimension"><dimension></a></code></td> - <td><code><dimension></code> est un <code><number></code> avec une unité attachée à lui. Par exemple, <code>45deg</code>, <code>5s</code>, ou <code>10px</code>. <code><dimension></code> est divisé en d'autres catégories incluant les types <code><a href="/en-US/docs/Web/CSS/length"><length></a></code>, <code><a href="/en-US/docs/Web/CSS/angle"><angle></a></code>, <code><a href="/en-US/docs/Web/CSS/time"><time></a></code>, <code>et <a href="/en-US/docs/Web/CSS/resolution"><resolution></a></code><a href="/en-US/docs/Web/CSS/resolution">.</a></td> + <td><code><a href="/fr/docs/Web/CSS/dimension"><dimension></a></code></td> + <td>Une valeur de type <code><dimension></code> est une valeur de type <code><number></code> à laquelle est attachée une unité. Par exemple : <code>45deg</code>, <code>5s</code>, ou <code>10px</code>. <code><dimension></code> est une catégorie de type qui inclut les types <code><a href="/fr/docs/Web/CSS/length"><length></a></code>, <code><a href="/fr/docs/Web/CSS/angle"><angle></a></code>, <code><a href="/fr/docs/Web/CSS/time"><time></a></code>, et <code><a href="/fr/docs/Web/CSS/resolution"><resolution></a></code>.</td> </tr> <tr> - <td><code><a href="/en-US/docs/Web/CSS/percentage"><percentage></a></code></td> - <td><code><percentage></code> représente une fraction d'une autre valeur. Par exemple, <code>50%</code>. Les valeurs de pourcentage sont toujours relatives à une qutre quantité. Par exemple, la longeur d'un élément est relative à la longueur de son élément parent.</td> + <td><code><a href="/fr/docs/Web/CSS/percentage"><percentage></a></code></td> + <td>Une valeur de type <code><percentage></code> représente une fraction relative à une autre valeur. Par exemple : <code>50%</code>. Les valeurs de pourcentages sont toujours relatives à une autre quantité. Ainsi, la longueur d'un élément pourra être relative à la longueur de son élément parent.</td> </tr> </tbody> </table> -<h3 id="Longueurs">Longueurs</h3> +<h3 id="lengths">Longueurs</h3> -<p>The numeric type you will come across most frequently is <code><length></code>. For example <code>10px</code> (pixels) or <code>30em</code>. There are two types of lengths used in CSS — relative and absolute. It's important to know the difference in order to understand how big things will become.</p> +<p>Le type numérique que vous rencontrerez le plus souvent est le type <code><length></code>. Par exemple : <code>10px</code> (pixels) ou <code>30em</code>. Il existe deux types de longueurs en CSS : les longueurs relatives et les longueurs absolues. Connaître la différence entre les deux est important pour comprendre la taille que les éléments obtiendront.</p> -<h4 id="Absolute_length_units">Absolute length units</h4> +<h4 id="absolute_length_units">Unités de longueur absolue</h4> -<p>The following are all <strong>absolute</strong> length units — they are not relative to anything else, and are generally considered to always be the same size.</p> +<p>La liste qui suit contient uniquement des unités de longueur <strong>absolue</strong>. Ces quantités ne sont pas relatives à quoi que ce soit d'autre et leur taille sera considérée comme constante.</p> <table class="standard-table"> <thead> <tr> - <th scope="col">Unit</th> - <th scope="col">Name</th> - <th scope="col">Equivalent to</th> + <th scope="col">Unité</th> + <th scope="col">Nom</th> + <th scope="col">Équivalent à</th> </tr> </thead> <tbody> <tr> <td><code>cm</code></td> - <td>Centimeters</td> - <td>1cm = 96px/2.54</td> + <td>Centimètres</td> + <td>1cm = 38px = 25/64in</td> </tr> <tr> <td><code>mm</code></td> - <td>Millimeters</td> + <td>Millimètres</td> <td>1mm = 1/10th of 1cm</td> </tr> <tr> <td><code>Q</code></td> - <td>Quarter-millimeters</td> + <td>Quarts de millimètre</td> <td>1Q = 1/40th of 1cm</td> </tr> <tr> <td><code>in</code></td> - <td>Inches</td> + <td>Pouces (<i lang="en">inches</i>)</td> <td>1in = 2.54cm = 96px</td> </tr> <tr> <td><code>pc</code></td> <td>Picas</td> - <td>1pc = 1/6th of 1in</td> + <td>1pc = 1/6e de 1in</td> </tr> <tr> <td><code>pt</code></td> <td>Points</td> - <td>1pt = 1/72th of 1in</td> + <td>1pt = 1/72e de 1in</td> </tr> <tr> <td><code>px</code></td> <td>Pixels</td> - <td>1px = 1/96th of 1in</td> + <td>1px = 1/96th de 1in</td> </tr> </tbody> </table> -<p>Most of these units are more useful when used for print, rather than screen output. For example, we don't typically use <code>cm</code> (centimeters) on screen. The only value that you will commonly use is <code>px</code> (pixels).</p> +<p>La plupart de ces unités sont utiles pour l'impression plutôt que pour l'affichage sur un écran. Ainsi, on n'utilise généralement pas <code>cm</code> (centimètres) sur un écran. La seule unité ici que vous rencontrerez fréquemment est <code>px</code> (pixels).</p> -<h4 id="Relative_length_units">Relative length units</h4> +<h4 id="relative_length_units">Unités de longueur relative</h4> -<p>Relative length units are relative to something else, perhaps the size of the parent element's font, or the size of the viewport. The benefit of using relative units is that with some careful planning you can make it so the size of text or other element scales relative to everything else on the page. Some of the most useful units for web development are listed in the table below.</p> +<p>Les unités de longueur relative permettent d'exprimer des quantités relatives à quelque chose d'autre comme la taille de la police de l'élément parent ou la taille de la zone d'affichage (<i lang="en">viewport</i>). L'avantage d'utiliser des unités relatives est qu'avec un peu d'organisation, on peut faire que la taille du texte ou d'autres éléments se mette à l'échelle, relativement à quelque chose d'autre sur la page. La plupart des unités les plus utiles pour le développement web sont présentes dans le tableau qui suit.</p> <table class="standard-table"> <thead> <tr> - <th scope="col">Unit</th> - <th scope="col">Relative to</th> + <th scope="col">Unité</th> + <th scope="col">Relative à</th> </tr> </thead> <tbody> <tr> <td><code>em</code></td> - <td>Font size of the parent, in the case of typographical properties like <code><a href="/en-US/docs/Web/CSS/font-size">font-size</a></code>, and font size of the element itself, in the case of other properties like <code><a href="/en-US/docs/Web/CSS/width">width</a></code>.</td> + <td>Pour les propriétés typographiques comme <code><a href="/fr/docs/Web/CSS/font-size">font-size</a></code>, relative à la taille de la police de l'élément parent. Pour les autres propriétés comme <code><a href="/fr/docs/Web/CSS/width">width</a></code>, relative à la taille de la police de l'élément;</td> </tr> <tr> <td><code>ex</code></td> - <td>x-height of the element's font.</td> + <td>La hauteur d'x de la police de l'élément.</td> </tr> <tr> <td><code>ch</code></td> - <td>The advance measure (width) of the glyph "0" of the element's font.</td> + <td>La <a href="https://fr.wikipedia.org/wiki/Chasse_(typographie)">chasse/avance</a> du glyphe « 0 » pour la police de l'élément.</td> </tr> <tr> <td><code>rem</code></td> - <td>Font size of the root element.</td> + <td>La taille de la police pour l'élément racine.</td> </tr> <tr> <td><code>lh</code></td> - <td>Line height of the element.</td> + <td>La hauteur de ligne pour l'élément.</td> </tr> <tr> <td><code>vw</code></td> - <td>1% of the viewport's width.</td> + <td>1% de la largeur du <i lang="en">viewport</i> (la zone d'affichage).</td> </tr> <tr> <td><code>vh</code></td> - <td>1% of the viewport's height.</td> + <td>1% de la hauteur du <i lang="en">viewport</i> (la zone d'affichage).</td> </tr> <tr> <td><code>vmin</code></td> - <td>1% of the viewport's smaller dimension.</td> + <td>1% de la plus petite dimension du <i lang="en">viewport</i> (la zone d'affichage).</td> </tr> <tr> <td><code>vmax</code></td> - <td>1% of the viewport's larger dimension.</td> + <td>1% de la plus grande dimension du <i lang="en">viewport</i> (la zone d'affichage).</td> </tr> </tbody> </table> -<h4 id="Exploring_an_example">Exploring an example</h4> +<h4 id="exploring_an_example">Exploration d'un exemple</h4> -<p>In the example below, you can see how some relative and absolute length units behave. The first box has a {{cssxref("width")}} set in pixels. As an absolute unit, this width will remain the same no matter what else changes.</p> +<p>Dans l'exemple qui suit, vous pouvez observer le fonctionnement de certaines unités de longueur relative et absolue. La première boîte a la propriété <a href="/fr/docs/Web/CSS/width"><code>width</code></a> définie en pixels. Il s'agit d'une unité absolue et cette largeur restera donc la même, quels que soient les autres changements.</p> -<p>The second box has a width set in <code>vw</code> (viewport width) units. This value is relative to the viewport width, and so 10vw is 10 percent of the width of the viewport. If you change the width of your browser window, the size of the box should change. However this example is embedded into the page using an <code><a href="/en-US/docs/Web/HTML/Element/iframe"><iframe></a></code>, so this won't work. To see this in action you'll have to <a href="https://mdn.github.io/css-examples/learn/values-units/length.html">try the example after opening it in its own browser tab</a>.</p> +<p>La deuxième boîte a sa largeur définie avec l'unité <code>vw</code> (relative à la largeur de la zone d'affichage). Cette valeur est relative à la largeur du <i lang="en">viewport</i>. Ainsi, <code>10vw</code> correspondra à 10 pourcents de la largeur de la zone d'affichage. Si vous changez la largeur de la fenêtre de votre navigateur, la taille de cette boîte devrait changer. Toutefois, si l'exemple est intégré dans la page avec un élément <code><a href="/fr/docs/Web/HTML/Element/iframe"><iframe></a></code>, cela ne fonctionnera pas. Pour voir concrètement le résultat, vous devrez ouvrir <a href="https://mdn.github.io/css-examples/learn/values-units/length.html">l'exemple dans un nouvel onglet avant d'ajuster la taille de votre fenêtre</a>.</p> -<p>The third box uses <code>em</code> units. These are relative to the font size. I've set a font size of <code>1em</code> on the containing {{htmlelement("div")}}, which has a class of <code>.wrapper</code>. Change this value to <code>1.5em</code> and you will see that the font size of all the elements increases, but only the last item will get wider, as the width is relative to that font size.</p> +<p>La troisième boîte utilise les unités <code>em</code>. Ces unités sont relatives à la taille de la police. On a défini une taille de police de <code>1em</code> sur l'élément <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> englobant et qui a la classe <code>.wrapper</code>. Passez cette valeur à <code>1.5em</code> et vous pourrez voir que la taille de la police de tous les éléments augmente mais que seul le dernier élément s'élargit du fait que sa largeur soit relative à cette taille de police.</p> -<p>After following the instructions above, try playing with the values in other ways, to see what you get.</p> +<p>Après avoir suivi ces instructions, n'hésitez pas à modifier les valeurs autrement pour voir ce que ça donne.</p> <p>{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}</p> -<h4 id="ems_and_rems">ems and rems</h4> +<h4 id="ems_and_rems">ems et rems</h4> -<p><code>em</code> and <code>rem</code> are the two relative lengths you are likely to encounter most frequently when sizing anything from boxes to text. It's worth understanding how these work, and the differences between them, especially when you start getting on to more complex subjects like <a href="/en-US/docs/Learn/CSS/Styling_text">styling text</a> or <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a>. The below example provides a demonstration.</p> +<p><code>em</code> et <code>rem</code> sont deux unités de longueur relative que vous rencontrerez fréquemment dès que vous dimensionnerez des boîtes ou du texte. Aussi, il est intéressant de comprendre leur fonctionnement, les différences entre ces deux unités, surtout avant d'aborder des sujets plus complexes comme <a href="/fr/docs/Learn/CSS/Styling_text">la mise en forme du texte</a> ou <a href="/fr/docs/Learn/CSS/CSS_layout">les dispositions CSS</a>. L'exemple qui suit fournit une démonstration.</p> -<p>The HTML is a set of nested lists — we have three lists in total and both examples have the same HTML. The only difference is that the first has a class of <em>ems</em> and the second a class of <em>rems</em>.</p> +<p>Le HTML utilisé ci-après est un ensemble de listes imbriquées : il y a trois listes au total et les exemples partagent tous le même code HTML. La seule différence est que le premier utilise une classe <em>ems</em> et que le second utilise une classe <em>rems</em>.</p> -<p>To start with, we set 16px as the font size on the <code><html></code> element.</p> +<p>Pour commencer, on définit la taille de la police à 16px sur l'élément <code><html></code>.</p> -<p><strong>To recap, the em unit means "my parent element's font-size"</strong> in the case of typography. The {{htmlelement("li")}} elements inside the {{htmlelement("ul")}} with a <code>class</code> of <code>ems</code> take their sizing from their parent. So each successive level of nesting gets progressively larger, as each has its font size set to <code>1.3em</code> — 1.3 times its parent's font size.</p> +<p><strong>Pour récapituler, l'unité <code>em</code> signifie « la taille de police de l'élément parent »</strong> pour ce qui concerne la typographie. Les éléments <a href="/fr/docs/Web/HTML/Element/li"><code><li></code></a> à l'intérieur de <a href="/fr/docs/Web/HTML/Element/ul"><code><ul></code></a> et qui ont un attribut <code>class</code> avec <code>ems</code> prendront donc leur taille en fonction de celle de leur parent. Aussi, chaque niveau plus grand que le précédent, car chacun a une taille de police de <code>1.3em</code> soit 1,3 fois plus grand que la taille de police pour l'élément parent.</p> -<p><strong>To recap, the rem unit means "The root element's font-size"</strong>. (rem stands for "root em".) The {{htmlelement("li")}} elements inside the {{htmlelement("ul")}} with a <code>class</code> of <code>rems</code> take their sizing from the root element (<code><html></code>). This means that each successive level of nesting does not keep getting larger.</p> +<p><strong>Pour récapituler, l'unité <code>rem</code> signifie « la taille de police de l'élément racine »</strong> (rem est l'acronyme anglais de « <i lang="en">root em</i> » qu'on pourrait traduire par « em racine ».) Les éléments <a href="/fr/docs/Web/HTML/Element/li"><code><li></code></a> à l'intérieur de <a href="/fr/docs/Web/HTML/Element/ul"><code><ul></code></a> et qui ont un attribut <code>class</code> avec <code>rems</code> prendront leur taille à partir de l'élément racine (<code><html></code>). Cela signifie que les niveaux successifs ne gagneront pas en largeur.</p> -<p>However, if you change the <code><html></code> <code>font-size</code> in the CSS you will see that everything else changes relative to it — both <code>rem</code>- and <code>em</code>-sized text.</p> +<p>Toutefois, si vous modifier la taille de la police avec <code>font-size</code> pour <code><html></code> dans la feuille CSS, vous pourrez voir que toutes les tailles varient en fonction de celle-ci, tant celles qui utilisent <code>rem</code> que celles qui utilisent <code>em</code>.</p> -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} </p> +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} </p> -<h3 id="Percentages">Percentages</h3> +<h3 id="percentages">Pourcentages</h3> -<p>In a lot of cases, a percentage is treated in the same way as a length. The thing with percentages is that they are always set relative to some other value. For example, if you set an element's <code>font-size</code> as a percentage it will be a percentage of the <code>font-size</code> of the element's parent. If you use a percentage for a <code>width</code> value, it will be a percentage of the <code>width</code> of the parent.</p> +<p>Dans la plupart des cas, un pourcentage est traité comme une longueur. Un pourcentage est toujours relatif à une autre valeur. Ainsi, si vous définissez la propriété <code>font-size</code> d'un élément avec un pourcentage, ce pourcentage sera relatif à la valeur de <code>font-size</code> de l'élément parent. Si vous utilisez un pourcentage pour <code>width</code>, la valeur obtenue sera le pourcentage de la valeur de <code>width</code> pour l'élément parent.</p> -<p>In the below example the two percentage-sized boxes and the two pixel-sized boxes have the same class names. Both sets are 200px and 40% wide respectively.</p> +<p>Dans l'exemple qui suit, on a deux boîtes dimensionnées avec des pourcentages et deux boîtes dimensionnées en pixels, elles partagent les mêmes noms de classes. Chaque ensemble est dimensionné respectivement avec 40% et 200px.</p> -<p>The difference is that the second set of two boxes is inside a wrapper that is 400 pixels wide. The second 200px wide box is the same width as the first one, but the second 40% box is now 40% of 400px — a lot narrower than the first one!</p> +<p>La différence est que le deuxième ensemble avec les deux boîtes se situe dans un contenant large de 400 pixels. La boîte dimensionnée avec 200px a la même largeur que dans le premier ensemble, en revanche, la boîte dimensionnée avec 40% a une largeur de 40% de 400px ce qui est beaucoup plus étroit que l'autre !</p> -<p><strong>Try changing the width of the wrapper or the percentage value to see how this works.</strong></p> +<p><strong>Essayez de modifier la largeur du bloc englobant ou la valeur du pourcentage pour voir comment cela fonctionne.</strong></p> -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p> +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p> -<p>The next example has font sizes set in percentages. Each <code><li></code> has a <code>font-size</code> of 80%, therefore the nested list items become progressively smaller as they inherit their sizing from their parent.</p> +<p>Le prochain exemple utilise des tailles de police définies en pourcentages. Chaque élément <code><li></code> a <code>font-size</code> avec 80%, ainsi les éléments de listes imbriqués deviennent de plus en plus petits en héritant de la taille de leur parent.</p> -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} </p> +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} </p> -<p>Note that, while many value types accept a length or a percentage, there are some that only accept length. You can see which values are accepted on the MDN property reference pages. If the allowed value includes <code><a href="/en-US/docs/Web/CSS/length-percentage"><length-percentage></a></code> then you can use a length or a percentage. If the allowed value only includes <code><length></code>, it is not possible to use a percentage.</p> +<p>On notera que, bien que de nombreuses propriétés acceptent une longueur ou un pourcentage, il en existe certaines qui n'acceptent que des longueurs. Vous pouvez voir cette information sur les pages de référence de chaque propriété sur MDN. Si les valeurs autorisées incluent le type <code><a href="/fr/docs/Web/CSS/length-percentage"><length-percentage></a></code>, on peut utiliser une longueur ou un pourcentage. Si les valeurs autorisées n'incluent que <code><length></code>, il n'est pas possible d'utiliser un pourcentage.</p> -<h3 id="Numbers">Numbers</h3> +<h3 id="numbers">Nombres</h3> -<p>Some value types accept numbers, without any unit added to them. An example of a property which accepts a unitless number is the <code>opacity</code> property, which controls the opacity of an element (how transparent it is). This property accepts a number between <code>0</code> (fully transparent) and <code>1</code> (fully opaque).</p> +<p>Certains types de valeur acceptent des nombres, sans unité. Une telle propriété est, par exemple, <code>opacity</code> qui contrôle l'opacité d'un élément. Cette propriété acceptera une valeur numérique (sans unité) comprise entre <code>0</code> (transparence complète) et <code>1</code> (complètement opaque).</p> -<p><strong>In the below example, try changing the value of <code>opacity</code> to various decimal values between <code>0</code> and <code>1</code> and see how the box and its contents become more or less opaque.</strong></p> +<p><strong>Dans l'exemple qui suit, essayez de modifier la valeur de la propriété <code>opacity</code> en utilisant différentes valeurs décimales entre <code>0</code> et <code>1</code> afin de voir comment la boîte et son contenu changent en opacité.</strong></p> -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} </p> +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} </p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: When you use a number in CSS as a value it should not be surrounded in quotes.</p> +<div class="notecard note"> +<p><strong>Note :</strong> Lorsqu'on utilise un nombre pour une valeur en CSS, il ne doit pas être écrit avec des guillemets ou quotes autour.</p> </div> -<h2 id="Color">Color</h2> +<h2 id="color">Couleur</h2> -<p>There are many ways to specify color in CSS, some of which are more recently implemented than others. The same color values can be used everywhere in CSS, whether you are specifying text color, background color, or whatever else.</p> +<p>Il existe de nombreuses façons d'utiliser des couleurs en CSS, certaines ayant été plus récemment implémentées que d'autres. Les mêmes valeurs de couleur peuvent être utilisées n'importe où en CSS, qu'il s'agisse d'une couleur pour du texte, d'une couleur d'arrière-plan ou de toute autre couleur.</p> -<p>The standard color system available in modern computers is 24 bit, which allows the display of about 16.7 million distinct colors via a combination of different red, green and blue channels with 256 different values per channel (256 x 256 x 256 = 16,777,216.) Let's have a look at some of the ways in which we can specify colors in CSS.</p> +<p>Le système standard de couleurs disponible pour les ordinateurs modernes utilise 24 bits, ce qui permet d'afficher 16,7 millions de couleurs différentes par des combinaisons de canaux rouge, vert et bleu dont chacun peut avoir 256 valeurs distinctes (256 x 256 x 256 = 16 777 216). Voyons quelques façons d'indiquer des couleurs en CSS.</p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: In this tutorial we will look at the common methods of specifying color that have good browser support; there are others but they don't have as good support and are less common.</p> +<div class="notecard note"> +<p><strong>Note :</strong> Dans ce tutoriel, nous verrons les méthodes communément utilisées pour définir les couleurs et qui disposent d'une bonne prise en charge des navigateurs. Il en existe d'autres, mais elles sont moins bien prises en charge et sont moins fréquentes.</p> </div> -<h3 id="Color_keywords">Color keywords</h3> +<h3 id="color_keywords">Mots-clés pour les couleurs</h3> -<p>Quite often in examples here in the learn section or elsewhere on MDN you will see the color keywords used, as they are a simple and understandable way of specifying color. There are a number of these keywords, some of which have fairly entertaining names! You can see a full list on the page for the <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> value type.</p> +<p>Dans la plupart des exemples de cette section d'apprentissage ou à d'autres endroits sur MDN, vous verrez des mots-clés utilisés pour définir des couleurs : il s'agit d'une méthode simple et compréhensible pour indiquer une couleur. Il existe de nombreux mots-clés, certains avec des noms plutôt amusants. Vous pouvez consulter la liste complète sur la page pour le type de valeur <code><a href="/fr/docs/Web/CSS/color_value"><color></a></code>.</p> -<p><strong>Try playing with different color values in the live examples below, to get more of an idea how they work.</strong></p> +<p><strong>Essayez de manipuler les différentes valeurs de couleur dans l'exemple ci-après afin de mieux comprendre comment celles-ci fonctionnent.</strong></p> -<h3 id="Hexadecimal_RGB_values">Hexadecimal RGB values</h3> +<h3 id="hexadecimal_rgb_values">Valeurs RGB hexadécimales</h3> -<p>The next type of color value you are likely to encounter is hexadecimal codes. Each hex value consists of a hash/pound symbol (#) followed by six hexadecimal numbers, each of which can take one of 16 values between 0 and f (which represents 15) — so <code>0123456789abcdef</code>. Each pair of values represents one of the channels — red, green and blue — and allows us to specify any of the 256 available values for each (16 x 16 = 256.)</p> +<p>Les autres valeurs de couleur que vous rencontrerez assez souvent sont celles représentées avec des codes hexadécimaux. Chaque valeur hexadécimale se compose d'un croisillon (#) suivi de six chiffres hexadécimaux dont chacun peut prendre une valeur parmi 16 : de 0 à f (la lettre utilisée pour représentée 15) (les chiffres hexadécimaux sont : <code>0123456789abcdef</code>). Dans ces six chiffres, chaque paire de chiffre représente la valeur pour l'un des canaux de couleurs (rouge, vert et bleu) et permet d'indiquer l'une des 256 valeurs disponibles.</p> -<p>These values are a bit more complex and less easy to understand, but they are a lot more versatile than keywords — you can use hex values to represent any color you want to use in your color scheme.</p> +<p>Ces valeurs sont un peu plus complexes et moins faciles à comprendre, mais elles permettent d'exprimer beaucoup plus de couleurs que les mots-clés. Vous pouvez utiliser les valeurs hexadécimales pour représenter n'importe quelle couleur dans votre palette.</p> -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} </p> +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} </p> -<p><strong>Again, try changing the values to see how the colors vary.</strong></p> +<p><strong>Là encore, essayez de modifier les valeurs pour voir comment les couleurs varient.</strong></p> -<h3 id="RGB_and_RGBA_values">RGB and RGBA values</h3> +<h3 id="rgb_and_rgba_values">Les valeurs RGB et RGBA</h3> -<p>The third scheme we'll talk about here is RGB. An RGB value is a function — <code>rgb()</code> — which is given three parameters that represent the red, green, and blue channel values of the colors, in much the same way as hex values. The difference with RGB is that each channel is represented not by two hex digits, but by a decimal number between 0 and 255 — somewhat easier to understand.</p> +<p>La troisième façon que nous aborderons ici est RGB (pour « <i lang="en">Red, Green, Blue</i> » soit : rouge, vert, bleu en français). Une valeur RGB est une fonction <code>rgb()</code> à laquelle on passe trois paramètres qui représentent respectivement les valeurs des canaux rouge, vert, bleu (de la même façon que pour les valeurs hexadécimales). Contrairement aux valeurs hexadécimales, les valeurs des composantes ne sont pas exprimées en hexadécimal (avec des chiffres de 0 à f) mais avec un nombre décimal compris entre 0 et 255. Cela rend la compréhension de la valeur plus simple.</p> -<p>Let's rewrite our last example to use RGB colors:</p> +<p>Réécrivons notre dernier exemple afin d'utiliser les couleurs RGB :</p> -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p> +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p> -<p>You can also use RGBA colors — these work in exactly the same way as RGB colors, and so you can use any RGB values. However, there is a fourth value that represents the alpha channel of the color, which controls opacity. If you set this value to <code>0</code> it will make the color fully transparent, whereas <code>1</code> will make it fully opaque. Values in between give you different levels of transparency.</p> +<p>Il est aussi possible d'utiliser des couleurs RGBA : celles-ci fonctionnent exactement comme les couleurs RGB (et il est donc possible d'utiliser n'importe quelle valeur RGB pour une valeur RGBA). Toutefois, les valeurs RGBA utilisent une quatrième valeur qui représente le canal alpha de la couleur qui contrôle son opacité. Avec une valeur de <code>0</code> pour le canal alpha, la couleur sera complètement transparente tandis qu'avec <code>1</code>, elle sera complètement opaque. Les valeurs intermédiaires fourniront des niveaux progressifs d'opacité.</p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Setting an alpha channel on a color has one key difference to using the {{cssxref("opacity")}} property we looked at earlier. When you use opacity you make the element and everything inside it opaque, whereas using RGBA colors only makes the color you are specifying opaque.</p> +<div class="notecard note"> +<p><strong>Note :</strong> Définir un canal alpha sur une couleur n'est pas exactement la même chose qu'utiliser la propriété <a href="/fr/docs/Web/CSS/opacity"><code>opacity</code></a> dont nous avons parlé auparavant. Lorsqu'on utilise <code>opacity</code>, c'est tout l'élément et ce qu'il contient qui devient plus ou moins opaque/transparent alors que lorsqu'on définit une couleur RGBA, seule la couleur est plus ou moins opaque.</p> </div> -<p>In the example below I have added a background image to the containing block of our colored boxes. I have then set the boxes to have different opacity values — notice how the background shows through more when the alpha channel value is smaller.</p> +<p>Dans l'exemple qui suit, on a ajouté une image d'arrière-plan au bloc englobant les boîtes colorées. On a ensuite réglé différentes valeurs d'opacité pour les différentes boîtes : vous pouvez voir comment l'arrière-plan est de plus en plus visible au fur et à mesure que la valeur du canal alpha est faible.</p> <p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}</p> -<p><strong>In this example, try changing the alpha channel values to see how it affects the color output. </strong></p> +<p><strong>Dans cet exemple, essayez de modifier les valeurs pour le canal alpha afin de voir comment la couleur est modifiée.</strong></p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: At some point modern browsers were updated so that <code>rgba()</code> and <code>rgb()</code>, and <code>hsl()</code> and <code>hsla()</code> (see below), became pure aliases of each other and started to behave exactly the same. So for example both <code>rgba()</code> and <code>rgb()</code> accept colors with and without alpha channel values. Try changing the above example's <code>rgba()</code> functions to <code>rgb()</code> and see if the colors still work! Which style you use is up to you, but separating out non-transparent and transparent color definitions to use the different functions gives (very) slightly better browser support and can act as a visual indicator of where transparent colors are being defined in your code.</p> +<div class="notecard note"> +<h4>Note :</h4> +<p>Avec la spécification <i lang="en">CSS Colors Level 4</i>, <code>rgba()</code> est un alias pour <code>rgb()</code> et <code>hsla()</code> est un alias pour <code>hsl()</code> (voir ci-après). Pour les navigateurs qui implémentent ce standard, ces fonctions synonymes acceptent les mêmes paramètres et se comportent de la même façon. Essayez de modifier l'exemple qui précède pour passer de fonctions <code>rgba()</code> à des fonctions <code>rgb()</code> pour voir si les couleurs fonctionnent toujours. Le style que vous utiliserez ne dépend que de vous mais séparer les définitions de couleurs transparentes et de couleurs non-transparentes fournira une prise en charge navigateur (légèrement) meilleure tout en explicitant visuellement (dans votre code) où les couleurs transparentes sont définies.</p> </div> -<h3 id="HSL_and_HSLA_values">HSL and HSLA values</h3> +<h3 id="hsl_and_hsla_values">Valeurs HSL et HSLA</h3> -<p>Slightly less well-supported than RGB is the HSL color model (not supported on old versions of IE), which was implemented after much interest from designers. Instead of red, green, and blue values, the <code>hsl()</code> function accepts hue, saturation, and lightness values, which are used to distinguish between the 16.7 million colors, but in a different way:</p> +<p>Avec une prise en charge légèrement plus faible que RGB, on a le modèle de couleurs HSL (non pris en charge pour d'anciennes versions d'Internet Explorer) qui a été implémentée après un intérêt marqué de la part des designers. Plutôt que d'indiquer des valeurs pour les canaux rouge, vert, bleu, la fonction <code>hsl()</code> prend des paramètres pour la teinte (<i lang="en">hue</i> en anglais), la saturation et la luminosité. Cela permet aussi d'obtenir 16,7 millions de couleurs mais différemment :</p> <ul> - <li><strong>Hue</strong>: The base shade of the color. This takes a value between 0 and 360, representing the angles around a color wheel.</li> - <li><strong>Saturation</strong>: How saturated is the color? This takes a value from 0–100%, where 0 is no color (it will appear as a shade of grey), and 100% is full color saturation</li> - <li><strong>Lightness</strong>: How light or bright is the color? This takes a value from 0–100%, where 0 is no light (it will appear completely black) and 100% is full light (it will appear completely white)</li> + <li><strong>Teinte (<i lang="en">hue</i>)</strong> : La couleur de base. La valeur utilisée est comprise entre 0 et 360 et représente l'angle sur une roue de couleurs.</li> + <li><strong>Saturation</strong> : La saturation de la couleur. La valeur est comprise entre 0 et 100% où 0 indique qu'il n'y a pas de couleur (ce sera une nuance de gris) et où 100% indique une saturation en couleur complète.</li> + <li><strong>Luminosité</strong> : La clarté ou la luminosité de la couleur. La valeur est comprise entre 0 et 100%, où 0 indique qu'il n'y a pas de luminosité (la couleur sera complètement noire) et où 100% indique une lumière pure (la couleur sera complètement blanche).</li> </ul> -<p>We can update the RGB example to use HSL colors like this:</p> +<p>On peut mettre à jour notre exemple RGB afin d'utiliser les couleurs HSL :</p> -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} </p> +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}}</p> -<p>Just as RGB has RGBA, HSL has an HSLA equivalent, which gives you the same ability to specify the alpha channel. I've demonstrated this below by changing my RGBA example to use HSLA colors.</p> +<p>À l'instar de RGBA pour RGB, il existe un équivalent HSLA à HSL qui permet aussi d'indiquer une valeur pour le canal alpha. Voici un exemple où on a converti l'exemple RGBA afin d'utiliser des couleurs HSLA.</p> -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} </p> +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} </p> -<p>You can use any of these color values in your projects. It is likely that for most projects you will decide on a color palette and then use those colors — and your chosen method of specifying color — throughout the whole project. You can mix and match color models, however for consistency it is usually best if your entire project uses the same one!</p> +<p>Vous pouvez utiliser n'importe laquelle de ces couleurs dans vos projets et il est probable que, pour la plupart des projets, vous décidiez d'une palette de couleurs pour vous limiter à elles dans un souci de cohérence, de même pour la méthode utilisée pour définir les couleurs. Vous pouvez bien entendu mélanger les différents modèles de définition des couleurs, mais il est souvent mieux d'être cohérent et d'en fixer un seul pour un même projet !</p> -<h2 id="Images">Images</h2> +<h2 id="images">Images</h2> -<p>The <code><a href="/en-US/docs/Web/CSS/image"><image></a></code> value type is used wherever an image is a valid value. This can be an actual image file pointed to via a <code>url()</code> function, or a gradient.</p> +<p>Le type de valeur <code><a href="/fr/docs/Web/CSS/image"><image></a></code> est utilisé à chaque endroit où une image est une valeur valide. Il peut s'agir d'une image à proprement parler dans un fichier (avec une fonction <code>url()</code> qui utilisera l'adresse du fichier avec l'image) ou d'un dégradé.</p> -<p>In the example below, we have demonstrated an image and a gradient in use as a value for the CSS <code>background-image</code> property.</p> +<p>Voici un exemple où on utilise une image et un dégradé pour la propriété CSS <code>background-image</code>.</p> -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} </p> +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} </p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: there are some other possible values for <code><image></code>, however these are newer and currently have poor browser support. Check out the page on MDN for the <code><a href="/en-US/docs/Web/CSS/image"><image></a></code> data type if you want to read about them.</p> +<div class="notecard note"> +<p><strong>Note :</strong> il existe d'autres valeurs possibles pour le type <code><image></code>, toutefois celles-ci sont plus récentes et moins bien prises en charge par les navigateurs. Consultez la page MDN pour le type de données <code><a href="/fr/docs/Web/CSS/image"><image></a></code> si vous voulez en savoir plus.</p> </div> -<h2 id="Position">Position</h2> +<h2 id="position">Position</h2> -<p>The <code><a href="/en-US/docs/Web/CSS/position_value"><position></a></code> value type represents a set of 2D coordinates, used to position an item such as a background image (via <code><a href="/en-US/docs/Web/CSS/background-position">background-position</a></code>). It can take keywords such as <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>, and <code>center</code> to align items with specific bounds of a 2D box, along with lengths, which represent offsets from the top and left-hand edges of the box.</p> +<p>Le type de valeur <code><a href="/fr/docs/Web/CSS/position_value"><position></a></code> représente un ensemble de coordonnées sur deux dimensions, utilisé pour positionner un objet comme une image d'arrière-plan (via <code><a href="/fr/docs/Web/CSS/background-position">background-position</a></code>). Ces valeurs peuvent être indiquées avec des mots-clés comme <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>, et <code>center</code> afin d'aligner les objets sur les bords d'une boîte en deux dimensions et avec des longueurs qui représentent les décalages par rapport au coin supérieur gauche de la boîte.</p> -<p>A typical position value consists of two values — the first sets the position horizontally, the second vertically. If you only specify values for one axis the other will default to <code>center</code>.</p> +<p>Une position se compose généralement de deux valeurs : la première indiquant la position horizontale et la seconde indiquant la position verticale. Si une seule valeur est fournie, l'autre valeur sera <code>center</code> par défaut.</p> -<p>In the following example we have positioned a background image 40px from the top and to the right of the container using a keyword.</p> +<p>Dans l'exemple suivant, on a positionné une image d'arrière-plan à 40px du bord haut et vers la droite du conteneur en utilisant un mot-clé.</p> -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} </p> +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} </p> -<p><strong>Play around with these values to see how you can push the image around.</strong></p> +<p><strong>Manipulez, modifiez ces valeurs pour voir comment décaler l'image dans le conteneur.</strong></p> -<h2 id="Strings_and_identifiers">Strings and identifiers</h2> +<h2 id="strings_and_identifiers">Chaînes de caractères et identifiants</h2> -<p>Throughout the examples above, we've seen places where keywords are used as a value (for example <code><color></code> keywords like <code>red</code>, <code>black</code>, <code>rebeccapurple</code>, and <code>goldenrod</code>). These keywords are more accurately described as <em>identifiers</em>, a special value that CSS understands. As such they are not quoted — they are not treated as strings.</p> +<p>Dans les différents exemples qui précèdent, on a vu des endroits où les mots-clés sont utilisés comme valeur (par exemple <code><color></code> qui peut utiliser des mots-clés comme <code>red</code>, <code>black</code>, <code>rebeccapurple</code>, et <code>goldenrod</code>). Si on veut être plus précis, on dira que ces mots-clés sont des <em>identifiants</em>, une valeur spéciale comprise par le moteur CSS. Ces identifiants n'ont pas besoin d'être délimités par des guillemets/quotes : ce ne sont pas des chaînes de caractères.</p> -<p>There are places where you use strings in CSS. For example <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#Generating_content_with_before_and_after">when specifying generated content</a>. In this case, the value is quoted to demonstrate that it is a string. In the below example we use unquoted color keywords along with a quoted generated content string.</p> +<p>À d'autres endroits en CSS, on utilise des chaînes de caractères, comme <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#generating_content_with_before_and_after">lorsqu'on définit du contenu généré</a>. Dans ces cas, la valeur est délimitée par des quotes (" ou ') pour indiquer qu'il s'agit bien d'une chaîne de caractères. Dans l'exemple qui suit, on utilise des mots-clés de couleur (des identifiants sans quote) ainsi qu'une chaîne de caractères pour du contenu généré.</p> -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} </p> +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} </p> -<h2 id="Functions">Functions</h2> +<h2 id="functions">Functions</h2> -<p>The final type of value we will take a look at is the group of values known as functions. In programming, a function is a reusable section of code that can be run multiple times to complete a repetitive task with minimum effort on the part of both the developer and the computer. Functions are usually associated with languages like JavaScript, Python, or C++, but they do exist in CSS too, as property values. We've already seen functions in action in the Colors section — <code>rgb()</code>, <code>hsl()</code>, etc. The value used to return an image from a file — <code>url()</code> — is also a function.</p> +<p>Les dernières valeurs que nous verrons ici sont les fonctions. En programmation, une fonction est une section de code réutilisable qui peut être exécutée plusieurs fois afin de réaliser une tâche de façon répétitive avec le minimum effort de la part du développeur ou de l'ordinateur. Les fonctions sont généralement associées à des langages comme JavaScript, Python ou C++ mais elles existent en CSS également pour être utilisées comme valeurs de propriétés. En fait, nous avons déjà vu des fonctions dans la section à propos des couleurs : <code>rgb()</code>, <code>hsl()</code>, etc. La valeur utilisée pour récupérer une image à partir d'un fichier, <code>url()</code> est également une fonction.</p> -<p>A value that behaves more like something you might find in a traditional programming language is the <code>calc()</code> CSS function. This function gives you the ability to do simple calculations inside your CSS. It's particularly useful if you want to work out values that you can't define when writing the CSS for your project, and need the browser to work out for you at runtime.</p> +<p>Une fonction qui est peut-être plus proche des langages de programmation traditionnels est la fonction CSS <code>calc()</code>. Cette fonction permet de réaliser des calculs simples à l'intérieur du code CSS. Elle s'avère particulièrement utile pour déterminer des valeurs qui ne sont pas connues d'avance lorsqu'on écrit la feuille de style CSS et pour lesquelles ce sera le navigateur qui pourra les déterminer lors de l'exécution.</p> -<p>For example, below we are using <code>calc()</code> to make the box <code>20% + 100px</code> wide. The 20% is calculated from the width of the parent container <code>.wrapper</code> and so will change if that width changes. We can't do this calculation beforehand because we don't know what 20% of the parent will be, so we use <code>calc()</code> to tell the browser to do it for us.</p> +<p>Dans le prochain exemple, on utilise <code>calc()</code> afin que la boîte soit large de <code>20% + 100px</code>. Les 20% sont calculés à partir de la largeur du conteneur parent : <code>.wrapper</code> et changeront donc lorsque la largeur du parent changera. Ce calcul ne peut pas être effectué au préalable, car on ne peut pas savoir à l'avance ce que représenteront ces 20%. Aussi, on utilise <code>calc()</code> pour indiquer au navigateur de réaliser ce calcul.</p> <p>{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}</p> -<h2 id="Test_your_skills!">Test your skills!</h2> +<h2 id="test_your_skills!">Testez vos compétences !</h2> -<p>We have covered a lot in this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_tasks">Test your skills: Values and units</a>.</p> +<p>Nous avons abordé de nombreuses notions dans cet article. Avez-vous retenu les informations essentielles ? Vous pourrez trouver différents exercices pour vérifier que vous avez retenu les bonnes informations avant de poursuivre : rendez-vous sur <a href="/fr/docs/Learn/CSS/Building_blocks/Values_tasks">Testez vos compétences : valeurs et unités CSS</a>.</p> -<h2 id="Summary">Summary</h2> +<h2 id="summary">Résumé</h2> -<p>This has been a quick run-through of the most common types of values and units you might encounter. You can have a look at all of the different types on the <a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS Values and units</a> reference page; you will encounter many of these in use as you work through these lessons.</p> +<p>Voici un rapide tour des types de valeur et unités que vous pourrez rencontrer en CSS. Vous pouvez consulter la liste exhaustive des différents types sur <a href="/fr/docs/Web/CSS/CSS_Values_and_Units">la page de référence MDN sur les valeurs et unités CSS</a>. Vous verrez de nombreuses types et valeurs à mesure que vous progresserez dans ces leçons.</p> -<p>The key thing to remember is that each property has a defined list of allowed value types, and each value type has a definition explaining what the values are. You can then look up the specifics here on MDN.</p> +<p>La notion cruciale à garder en mémoire est que chaque propriété possède une liste de types de valeur autorisés et que chaque type de valeur possède une définition indiquant les valeurs possibles. Vous pourrez trouver toutes les informations et détails sur MDN.</p> -<p>For example, understanding that <code><a href="/en-US/docs/Web/CSS/image"><image></a></code> also allows you to create a color gradient is useful but perhaps non-obvious knowledge to have!</p> +<p>Par exemple, comprendre le type <code><a href="/fr/docs/Web/CSS/image"><image></a></code> vous permettra de comprendre comment créer un dégradé de couleur. C'est utile mais ce n'est pas forcément évident de prime abord.</p> <p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</p> -<h2 id="In_this_module">In this module</h2> +<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/server-side/django/skeleton_website/index.html b/files/fr/learn/server-side/django/skeleton_website/index.html index 9bf5f6e1ff..a9189bb599 100644 --- a/files/fr/learn/server-side/django/skeleton_website/index.html +++ b/files/fr/learn/server-side/django/skeleton_website/index.html @@ -249,7 +249,7 @@ urlpatterns += [ ] </pre> -<p>La racine du site ('/') est prise en compte par Django, il est donc inutile d'écrire le chemin avec le caractère '/' en début. Si vous maitenez ce mode d'écriture, vous aurez le message ci-dessous au démarrage du serveur :</p> +<p>La racine du site ('/') est prise en compte par Django, il est donc inutile d'écrire le chemin avec le caractère '/' en début. Si vous maintenez ce mode d'écriture, vous aurez le message ci-dessous au démarrage du serveur :</p> <pre class="brush: python notranslate">System check identified some issues: diff --git a/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html index f833504f91..6e0e55a51d 100644 --- a/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html +++ b/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html @@ -100,12 +100,8 @@ original_slug: >- <p>Lorsque la visibilité du contenu est modifiée (c'est-à-dire qu'un élément est masqué ou affiché), les développeurs doivent modifier la valeur de la propriété <strong><code>aria-hidden</code></strong>. Les techniques décrites ci-dessus doivent être utilisées pour déclarer du CSS permettant de cacher visuellement un élément en utilisant <code>display:none</code>.</p> -<p>Le site Web Open Ajax Alliance fournit<a class="external" href="http://www.oaa-accessibility.org/example/39/" title="http://www.oaa-accessibility.org/example/39/"> un exemple de tooltip qui utilise <strong><code>aria-hidden</code></strong> pour controler la visibilité du tooltip.</a> L'exemple montre un formulaire Web simple avec des info-bulles contenant des instructions associées aux champs d’entrée.</p> - <p>Les parties pertinentes de l'exemple sont expliquées ci-dessous.Dans cet exemple, le code HTML de l’info-bulle a le format indiqué dans l'exemple 2a. La ligne 9 définit l’état <strong><code>aria-hidden</code></strong> à <code>true</code>.</p> -<p><em>Exemple 2a. HTML pour un tooltip (adapté de <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p> - <pre class="brush: html"><div class="text"> <label id="tp1-label" for="first">First Name:</label> <input type="text" id="first" name="first" size="20" @@ -119,7 +115,7 @@ original_slug: >- </pre> <p>Le CSS pour ce balisage est montré dans l'exemple 2b. Notez qu’il n’y a pas de nom de classe personnalisé utilisé, seul le statut de l'attribut <strong><code>aria-hidden</code></strong> à la ligne 1<em>.<br> - Exemple 2b. Un attribut basé sur le sélecteur indiquant l'état (tiré de <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p> + Exemple 2b. Un attribut basé sur le sélecteur indiquant l'état.</em></p> <pre class="brush: css">div.tooltip[aria-hidden="true"] { display: none; @@ -128,7 +124,7 @@ original_slug: >- <p>Le JavaScript à mettre à jour est la propriété <strong><code>aria-hidden</code></strong> du formulaire montré dans l'exemple 2c. Notez que le script met à jour seulement l'attribut <strong><code>aria-hidden</code></strong> à la (ligne 2) ; il n'y a pas besoin d'ajouter ou de supprimer un nom de classe personnalisé.</p> -<p><em>Exemple 2c. JavaScript pour mettre à jour l'attribut aria-checked (basé sur <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p> +<p><em>Exemple 2c. JavaScript pour mettre à jour l'attribut aria-checked.</em></p> <pre class="brush: javascript">var showTip = function(el) { el.setAttribute('aria-hidden', 'false'); diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html index cd2d7f18e1..54ee617393 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html @@ -96,13 +96,6 @@ document.getElementById("formInstruction").setAttribute("role", "alert");</pre> <pre class="brush: js">// suppression de la classe 'hidden' rend l’élément visible, ce qui entraînera l’annonce de l’alerte par le lecteur d’écran : document.getElementById("expirationWarning").className = ""; </pre> -<h4 id="Exemples_concrets">Exemples concrets :</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/example/1/" hreflang="en">Exemple de rôle d’alerte utilisant une boîte d’alerte ARIA (en)</a> ;</li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/alertdialog1/" hreflang="en" title="http://www.oaa-accessibility.org/examplep/alertdialog1/">Exemple d’alerte utilisant une boîte de dialogue d’alerte ARIA modal (en)</a>.</li> -</ul> - <h3 id="Notes">Notes </h3> <ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html index 8ac82788d0..66429091ce 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html @@ -92,10 +92,6 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-inva <p>Remarquez que le <code>rôle</code> ARIA de l’alerte est définit comme étant <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert" title="Using the alert role"><code>"alert"</code></a>.</p> -<h4 id="Exemples_concrets">Exemples concrets :</h4> - -<p><a class="external" href="http://www.oaa-accessibility.org/examplep/alert1/" title="http://www.oaa-accessibility.org/examplep/alert1/">Exemple de <code>role</code> d’alerte</a> (utilisant l’attribut <code>aria-invalid</code>).</p> - <h3 id="Notes">Notes</h3> <ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html index c2549b91b5..8138705e0a 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html @@ -128,13 +128,6 @@ une préparation inerte prescrite plus pour le soulagement mental du patient que </div> </pre> -<h4 id="Exemples_concrets">Exemples concrets :</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/button2/" title="http://www.oaa-accessibility.org/examplep/button2/">Exemple de bouton</a> utilisant <code>aria-labelledby</code> ;</li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/combobox1/" title="http://www.oaa-accessibility.org/examplep/combobox1/">Exemple de boite combinée</a> utilisant <code>aria-labelledby</code>.</li> -</ul> - <h3 id="Notes">Notes</h3> <p>L’affectation d’<em>API accessibilité</em> la plus courante pour un label est la propriété de <em>nom accessible</em>.</p> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html index 90e6c148a3..994ea05cd5 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html @@ -47,12 +47,6 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orie </a> </pre> -<h4 id="Exemples_concrets">Exemples concrets :</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/" title="http://www.oaa-accessibility.org/examplep/slider1/">Exemple de curseur</a>.</li> -</ul> - <h3 id="Notes">Notes</h3> <h3 id="Utilisé_avec_les_rôles_ARIA">Utilisé avec les rôles ARIA</h3> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html index 08c666f665..a86e8db23f 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html @@ -46,10 +46,6 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-requ </form> </pre> -<h4 id="Exemples_concrets">Exemples concrets :</h4> - -<p><a class="external" href="http://www.oaa-accessibility.org/examplep/tooltip1/" title="http://www.oaa-accessibility.org/examplep/tooltip1/">Exemple d’infobulle</a> (comprenant l’utilisation de l’attribut <code>aria-required</code>).</p> - <h3 id="Notes">Notes</h3> <h3 id="Utilisé_dans_les_rôles_ARIA">Utilisé dans les rôles ARIA</h3> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html index 029aa028be..df425ca798 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html @@ -37,14 +37,6 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valu <pre class="brush: html"><div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> </pre> -<h4 id="Exemples_concrets">Exemples concrets :</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/progressbar1/" title="http://www.oaa-accessibility.org/examplep/progressbar1/">Exemple de barre de progression</a> ;</li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/" title="http://www.oaa-accessibility.org/examplep/slider1/">Exemple de curseur</a> ;</li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/spinbutton1/" title="http://www.oaa-accessibility.org/examplep/spinbutton1/">Exemple de bouton rotatif</a>.</li> -</ul> - <h3 id="Notes">Notes</h3> <h3 id="Utilisés_avec_les_rôles_ARIA">Utilisés avec les rôles ARIA</h3> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html index 5fc255f447..19249b6361 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html @@ -33,14 +33,6 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valu <pre class="brush: html"><div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> </pre> -<h4 id="Exemples_concrets">Exemples concrets :</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/progressbar1/" title="http://www.oaa-accessibility.org/examplep/progressbar1/">Exemple de barre de progression</a> ;</li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/" title="http://www.oaa-accessibility.org/examplep/slider1/">Exemple de curseur</a> ;</li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/spinbutton1/" title="http://www.oaa-accessibility.org/examplep/spinbutton1/">Exemple de bouton rotatif</a>.</li> -</ul> - <h3 id="Notes">Notes</h3> <h3 id="Utilisé_avec_les_rôles_ARIA">Utilisé avec les rôles ARIA</h3> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html index a8d90ca014..114e5e4a31 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html @@ -90,12 +90,6 @@ var updateSlider = function (newValue) { }; </pre> -<h4 id="Exemples_concrets">Exemples concrets :</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/" title="http://www.oaa-accessibility.org/examplep/slider1/">Exemple de curseur</a></li> -</ul> - <h3 id="Notes">Notes</h3> <h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> diff --git a/files/fr/web/accessibility/aria/forms/basic_form_hints/index.html b/files/fr/web/accessibility/aria/forms/basic_form_hints/index.html index 04e086c5d0..89eb5e579b 100644 --- a/files/fr/web/accessibility/aria/forms/basic_form_hints/index.html +++ b/files/fr/web/accessibility/aria/forms/basic_form_hints/index.html @@ -44,7 +44,7 @@ original_slug: Accessibilité/ARIA/formulaires/Indications_elementaires_pour_les <p>L’exemple ci-dessous montre un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée. Remarquez, à la ligne 3, que l’attribut <code>aria-labelledby</code> de l’élément {{ HTMLElement("ul") }} est défini comme « rg1_label », et est identique à l’<code>id</code> de l’élément {{ HTMLElement("h3") }} de la ligne 1, qui sert de label au groupe de boutons radio.</p> -<p><em>Exemple 2. Un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée (d'après <a href="http://www.oaa-accessibility.org/examplep/radio1/">http://www.oaa-accessibility.org/examplep/radio1/</a>)</em></p> +<p><em>Exemple 2. Un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée </em></p> <pre class="brush: html"><h3 id="rg1_label">Options du déjeuner</h3> diff --git a/files/fr/web/api/file/filesize/index.html b/files/fr/web/api/blob/size/index.html index b7d03c1e7d..8896e44695 100644 --- a/files/fr/web/api/file/filesize/index.html +++ b/files/fr/web/api/blob/size/index.html @@ -1,12 +1,13 @@ --- title: File.fileSize -slug: Web/API/File/fileSize +slug: Web/API/Blob/size tags: - API - DOM - Fichier - Propriétés translation_of: Web/API/File/fileSize +original_slug: Web/API/File/fileSize --- <p>{{APIRef("File API") }}{{non-standard_header}}</p> diff --git a/files/fr/web/api/element/insertadjacenthtml/index.html b/files/fr/web/api/element/insertadjacenthtml/index.html index 38da627e69..b82e7dc4a5 100644 --- a/files/fr/web/api/element/insertadjacenthtml/index.html +++ b/files/fr/web/api/element/insertadjacenthtml/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/Element/insertAdjacentHTML --- <div>{{APIRef("DOM")}}</div> -<p><code>insertAdjacentHTML()</code> analyse le texte spécifié en tant que HTML ou XML et insère les noeuds résultants dans le DOM à la position spécifiée. L'élement qui est utilisé n'est pas réanalysé et les élements qu'il contient ne sont donc pas corrompus. Ceci, et le fait d'éviter la sérialisation supplémentaire, rend la fonction plus rapide et directe que <strong><span style="font-family: courier new,andale mono,monospace;">innerHTML</span>.</strong></p> +<p><code>insertAdjacentHTML()</code> analyse le texte spécifié en tant que HTML ou XML et insère les noeuds résultants dans le DOM à la position spécifiée. L'élement qui est utilisé n'est pas réanalysé et les élements qu'il contient ne sont donc pas corrompus. Ceci, et le fait d'éviter la sérialisation supplémentaire, rend la fonction plus rapide et directe que <strong><span style="font-family: courier new,andale mono,monospace;">innerHTML</span>.</strong></p> <h2 id="Syntax" name="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/file/filename/index.html b/files/fr/web/api/file/name/index.html index 50942c002b..2dddc3083c 100644 --- a/files/fr/web/api/file/filename/index.html +++ b/files/fr/web/api/file/name/index.html @@ -1,6 +1,6 @@ --- title: File.fileName -slug: Web/API/File/fileName +slug: Web/API/File/name tags: - API - DOM @@ -8,6 +8,7 @@ tags: - Nom - Propriétés translation_of: Web/API/File/fileName +original_slug: Web/API/File/fileName --- <p>{{APIRef("File API")}}{{non-standard_header}}</p> diff --git a/files/fr/web/api/location/reload/index.html b/files/fr/web/api/location/reload/index.html index c825101853..891a307902 100644 --- a/files/fr/web/api/location/reload/index.html +++ b/files/fr/web/api/location/reload/index.html @@ -1,61 +1,42 @@ --- -title: Location.reload() +title: 'Location : reload()' slug: Web/API/Location/reload -tags: - - API - - JavaScript - - Location - - Méthode - - Reference translation_of: Web/API/Location/reload +browser-compat: api.Location.reload --- <div>{{ APIRef("HTML DOM") }}</div> -<p><span class="seoSummary">La méthode <code><strong>Location.reload()</strong></code> recharge la ressource depuis l'URL actuelle.</span></p> +<p>La méthode <code><strong>location.reload()</strong></code> recharge l'URL courante, à la façon du bouton « Actualiser ».</p> -<p>Si l'action est impossible à cause d'une violation de sécurité, une {{domxref("DOMException")}} de type <code>SECURITY_ERROR</code> est lancée. Cela se produit si l'origine du script appelant est différente de l'origine de la page initialement désignée par l'objet {{domxref("Location")}}, principalement quand le script est hébergé sur un autre domaine. Voir la page <a href="/fr/docs/Web/Security/Same_origin_policy_for_JavaScript">Same-origin policy</a> pour plus d'informations.</p> +<p>Le rechargement peut être bloqué avec une exception <a href="/fr/docs/Web/API/DOMException"><code>DOMException</code></a> <code>SECURITY_ERROR</code>. Cela se produit si <a href="/fr/docs/Glossary/Origin">l'origine</a> du script qui invoque <code>location.reload()</code> est différente de l'origine de la page qui possède l'objet <a href="/fr/docs/Web/API/Location"><code>Location</code></a>. Voir <a href="/fr/docs/Web/Security/Same-origin_policy">les règles sur l'origine</a> pour plus d'informations.</p> -<h2 id="Syntaxe">Syntaxe</h2> +<h2 id="syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><em>object</em>.reload(); +<pre class="brush: js"> +location.reload(); </pre> -<h2 id="Exemples">Exemples</h2> +<h2 id="location.reload_n_a_pas_de_paramètre">location.reload() n'a pas de paramètre</h2> -<pre class="brush: js notranslate">// Recharge la page actuelle -document.location.reload();</pre> +<p>Firefox prend en charge un paramètre booléen non-standard <a href="https://searchfox.org/mozilla-central/source/dom/base/Location.cpp#551"><code>forceGet</code></a> pour la méthode <code>location.reload()</code>, qui permet à Firefox de passer outre le cache et d'effectuer un rafraîchissement forcé du document. Toutefois, pour tous les autres navigateurs, tout argument utilisé en appelant <code>location.reload()</code> sera ignoré et n'aura aucun effet.</p> -<h2 id="Spécifications">Spécifications</h2> +<p>Il est toutefois possible que vous rencontriez des occurrences de <code>location.reload(true)</code> dans du code existant basé sur l'hypothèse que ce rafraîchissement forcé aurait lieu dans tous les navigateurs. Une recherche GitHub "<code>location.reload(true)</code>" renvoie <a href="https://github.com/search?q=%22location.reload%28true%29%22&type=code">plusieurs centaines de milliers de résultats</a>.</p> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "history.html#dom-location-reload", "Location.reload()")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Pas de différence avec {{SpecName("HTML5 W3C")}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "browsers.html#dom-location-reload", "Location.reload()")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +<p>Historiquement, une version de Netscape Navigator a introduit la prise en charge de cet argument et cela s'est retrouvé dans Firefox. À un moment, le groupe de travail du W3C sur les API Web <a href="https://www.w3.org/2005/06/tracker/webapi/issues/69">a ouvert le sujet</a> pour étudier son ajout à la spécification pour <code>location.reload()</code>. Toutefois, il n'a jamais été ajouté formellement.</p> -<h2 id="Compatibilité">Compatibilité</h2> +<p>En résumé, ce paramètre booléen ne fait pas partie de la spécification actuelle <code>location.reload()</code> et n'en a en fait jamais fait partie.</p> +<h2 id="spécifications">Spécifications</h2> +<p>{{Specifications}}</p> -<p>{{Compat("api.Location.reload")}}</p> +<h2 id="compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<h2 id="Voir_aussi">Voir aussi</h2> +<p>{{Compat}}</p> + +<h2 id="voir_aussi">Voir aussi</h2> <ul> - <li>L'interface {{domxref("Location")}} à laquelle appartient cette méthode.</li> - <li>Méthodes similaires : {{domxref("Location.assign()")}} et {{domxref("Location.replace()")}}.</li> + <li>L'interface <a href="/fr/docs/Web/API/Location"><code>Location</code></a> à laquelle appartient cette méthode.</li> + <li>Des méthodes semblables : <a href="/fr/docs/Web/API/Location/assign"><code>Location.assign()</code></a> et <a href="/fr/docs/Web/API/Location/replace"><code>Location.replace()</code></a>.</li> </ul> diff --git a/files/fr/web/api/websocket/binarytype/index.html b/files/fr/web/api/websocket/binarytype/index.html new file mode 100644 index 0000000000..f9dc94bbb4 --- /dev/null +++ b/files/fr/web/api/websocket/binarytype/index.html @@ -0,0 +1,54 @@ +--- +title: WebSocket.binaryType +slug: Web/API/WebSocket/binaryType +browser-compat: api.WebSocket.binaryType +--- +<p>{{APIRef("Web Sockets API")}}</p> + +<p>La propriété <strong><code>WebSocket.binaryType</code></strong> contrôle le type de données binaires reçues via la connexion WebSocket.</p> + +<h2 id="syntax">Syntaxe</h2> + +<pre class="brush: js"> +var binaryType = aWebSocket.binaryType; +</pre> + +<h2 id="value">Valeur</h2> + +<p>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> ayant l'une de ces deux valeurs :</p> + +<dl> + <dt><code>"blob"</code></dt> + <dd>Utilise des objets <a href="/fr/docs/Web/API/Blob"><code>Blob</code></a> pour les données binaires. Il s'agit de la valeur par défaut.</dd> + <dt><code>"arraybuffer"</code></dt> + <dd>Utilise des objets <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer"><code>ArrayBuffer</code></a> pour les données binaires. + </dd> +</dl> + +<h2 id="examples">Exemples</h2> + +<pre class="brush: js"> +// On crée une connexion WebSocket connection. +const socket = new WebSocket("ws://localhost:8080"); +// On change le type de données binaires de "blob" à "arraybuffer" +socket.binaryType = "arraybuffer"; + +// On écoute les différents messages +socket.addEventListener("message", function (event) { + if(event.data instanceof ArrayBuffer) { + // Frame de données binaires + const view = new DataView(event.data); + console.log(view.getInt32(0)); + } else { + // Frame textuelle + console.log(event.data); + } +});</pre> + +<h2 id="specifications">Spécifications</h2> + +<p>{{Specifications}}</p> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat}}</p> diff --git a/files/fr/web/api/websocket/bufferedamount/index.html b/files/fr/web/api/websocket/bufferedamount/index.html new file mode 100644 index 0000000000..c4492c5c61 --- /dev/null +++ b/files/fr/web/api/websocket/bufferedamount/index.html @@ -0,0 +1,26 @@ +--- +title: WebSocket.bufferedAmount +slug: Web/API/WebSocket/bufferedAmount +browser-compat: api.WebSocket.bufferedAmount +--- +<p>{{APIRef("Web Sockets API")}}</p> + +<p>La propriété en lecture seule <strong><code>WebSocket.bufferedAmount</code></strong> renvoie le nombre d'octets de données qui ont été placées dans la queue via des appels à <a href="/fr/docs/Web/API/WebSocket/send"><code>send()</code></a> mais qui n'ont pas encore été transmises sur le réseau. Cette valeur est réinitialisée à zéro lorsque toutes les données ont été envoyées. Cette valeur n'est pas remise à zéro lorsque la connexion est fermée. Des appels successifs à <a href="/fr/docs/Web/API/WebSocket/send"><code>send()</code></a> feront croître cette valeur.</p> + +<h2 id="syntax">Syntaxe</h2> + +<pre class="brush: js"> +var bufferedAmount = aWebSocket.bufferedAmount; +</pre> + +<h2 id="value">Valeur</h2> + +<p>Un nombre au format <code>unsigned long</code>.</p> + +<h2 id="specifications">Spécifications</h2> + +<p>{{Specifications}}</p> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat}}</p> diff --git a/files/fr/web/api/websocket/close/index.html b/files/fr/web/api/websocket/close/index.html new file mode 100644 index 0000000000..09621ca71b --- /dev/null +++ b/files/fr/web/api/websocket/close/index.html @@ -0,0 +1,45 @@ +--- +title: WebSocket.close() +slug: Web/API/WebSocket/close +browser-compat: api.WebSocket.close +--- +<p>{{APIRef("Web Sockets API")}}</p> + +<p>La méthode <strong><code>WebSocket.close()</code></strong> ferme la connexion <a href="/fr/docs/Web/API/WebSocket"><code>WebSocket</code></a> ou interrompt l'éventuelle tentative de connexion. Si la connexion est déjà fermée (état <code>CLOSED</code>), cette méthode ne fait rien.</p> + +<h2 id="syntax">Syntaxe</h2> + +<pre class="brush: js">WebSocket.close();</pre> +<pre class="brush: js">WebSocket.close(code);</pre> +<pre class="brush: js">WebSocket.close(reason);</pre> +<pre class="brush: js">WebSocket.close(code, reason);</pre> + +<h3 id="parameters">Paramètres</h3> + +<dl> + <dt><code>code</code> {{optional_inline}}</dt> + <dd>Une valeur numérique indiquant le code de statut qui explique pourquoi la connexion est fermée. Si ce paramètre n'est pas fourni, 1005 sera la valeur par défaut. Voir <a href="/fr/docs/Web/API/CloseEvent#status_codes">la liste des codes de statut</a> de <a href="/fr/docs/Web/API/CloseEvent"><code>CloseEvent</code></a> pour les valeurs autorisées.</dd> + <dt><code>reason</code> {{optional_inline}}</dt> + <dd>Une chaîne de caractères, lisible et compréhensible par un humain qui explique pourquoi la connexion est fermée. Cette chaîne ne doit pas être plus longue que 123 octets de texte UTF-8 (attention, <strong>cela ne signifie pas</strong> 123 caractères).</dd> +</dl> + +<h3 id="exceptions_thrown">Exceptions levées</h3> + +<dl> + <dt><code>INVALID_ACCESS_ERR</code></dt> + <dd>Un code invalide a été fourni avec <code>code</code>.</dd> + <dt><code>SYNTAX_ERR</code></dt> + <dd>La chaîne de caractères pour <code>reason</code> est trop longue ou contient des <i lang="en">surrogates</i> non appairés.</dd> +</dl> + +<div class="note"> + <p><strong>Note :</strong> Avant Gecko 8.0, cette méthode ne prenait en charge aucun paramètre.</p> +</div> + +<h2 id="specifications">Spécifications</h2> + +<p>{{Specifications}}</p> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat}}</p> diff --git a/files/fr/web/api/websocket/close_event/index.html b/files/fr/web/api/websocket/close_event/index.html index f1ed8b2ff0..e09d0bb1db 100644 --- a/files/fr/web/api/websocket/close_event/index.html +++ b/files/fr/web/api/websocket/close_event/index.html @@ -1,72 +1,61 @@ --- -title: close +title: 'WebSocket : évènement close' slug: Web/API/WebSocket/close_event +browser-compat: api.WebSocket.close_event translation_of: Web/API/WebSocket/close_event --- -<p>Le gestionnaire de fermuture (<strong>close</strong>) est exécuté lorsqu'une connexion avec un socket Web est fermée.</p> +<div>{{APIRef}}</div> -<h2 id="Informations_générales">Informations générales</h2> +<p>L'évènement <code>close</code> est déclenché lorsqu'une connexion avec une <code>WebSocket</code> est fermée.</p> -<dl> - <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/websockets/">WebSocket</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">Event</dd> - <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> - <dd style="margin: 0 0 0 120px;">Non</dd> - <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> - <dd style="margin: 0 0 0 120px;">Non</dd> - <dt style="float: left; text-align: right; width: 120px;">Cible</dt> - <dd style="margin: 0 0 0 120px;"><a href="/en-US/docs/WebSockets/WebSockets_reference/WebSocket" title="/en-US/docs/WebSockets/WebSockets_reference/WebSocket">WebSocket</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> - <dd style="margin: 0 0 0 120px;">Aucune</dd> -</dl> - -<h2 id="Propriétés">Propriétés</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> +<table class="properties"> <tbody> <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The event target (the topmost target in the DOM tree).</td> + <th scope="row">Bouillonne/Remonte</th> + <td>Non</td> </tr> <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> + <th scope="row">Annulable</th> + <td>Non</td> </tr> <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> + <th scope="row">Interface</th> + <td><a href="/fr/docs/Web/API/CloseEvent"><code>CloseEvent</code></a></td> </tr> <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> + <th scope="row">Propriété de gestionnaire d'évènement correspondante</th> + <td><a href="/fr/docs/Web/API/WebSocket/onclose"><code>onclose</code></a></td> </tr> </tbody> </table> -<h2 id="Evénements_liés">Evénements liés</h2> +<h2 id="examples">Exemples</h2> -<ul> - <li>{{event("open")}}</li> - <li>{{event("close")}}</li> - <li>{{event("error")}}</li> - <li>{{event("message")}}</li> -</ul> +<p>On peut vouloir savoir lorsque la connexion a été fermée afin de mettre à jour l'interface utilisateur ou, éventuellement, pour sauvegarder des données à propos de la connexion. Soit une variable <code>socketExemple</code> qui fait référence à une connexion WebSocket ouverte, le fragment de code suivant gère la situation où la socket a été fermée :</p> + +<pre class="brush: js">socketExemple.addEventListener('close', (event) => { + console.log('La connexion a été fermée avec succès.'); +});</pre> + +<p>On peut effectuer les mêmes actions avec la propriété de gestion d'évènement correspondante :</p> + +<pre class="brush: js">socketExemple.onclose = function (event) { + console.log('La connexion a été fermée avec succès.'); +};</pre> + +<h2 id="specifications">Spécifications</h2> + +<p>{{Specifications}}</p> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="Voir aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/WebSockets/Writing_WebSocket_client_applications">Ecrire des applications client WebSocket</a></li> + <li><a href="/fr/docs/Web/API/WebSocket/error_event">WebSocket : évènement <code>error</code></a></li> + <li><a href="/fr/docs/Web/API/WebSocket/message_event">WebSocket : évènement <code>message</code></a></li> + <li><a href="/fr/docs/Web/API/WebSocket/open_event">WebSocket : évènement <code>open</code></a></li> + <li><a href="/fr/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">Écrire des applications clientes WebSocket</a></li> </ul> diff --git a/files/fr/web/api/websocket/error_event/index.html b/files/fr/web/api/websocket/error_event/index.html new file mode 100644 index 0000000000..91bb314dde --- /dev/null +++ b/files/fr/web/api/websocket/error_event/index.html @@ -0,0 +1,57 @@ +--- +title: 'WebSocket : évènement error' +slug: Web/API/WebSocket/error_event +browser-compat: api.WebSocket.error_event +--- +<div>{{APIRef}}</div> + +<p>L'évènement <code>error</code> est déclenché lorsqu'une connexion avec une <code>WebSocket</code> a été fermée à cause d'une erreur (par exemple lorsque des données n'ont pu être envoyées).</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bouillonne/Remonte</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td><a href="/fr/docs/Web/API/Event"><code>Event</code></a></td> + </tr> + <tr> + <th scope="row">Propriété de gestionnaire d'évènement correspondante</th> + <td><a href="/fr/docs/Web/API/WebSocket/onerror"><code>onerror</code></a></td> + </tr> + </tbody> +</table> + +<h2 id="examples">Exemples</h2> + +<pre class="brush: js"> +// On crée une connexion WebSocket +const socket = new WebSocket('ws://localhost:8080'); + +// On écoute les éventuelles erreurs +socket.addEventListener('error', function (event) { + console.log('Erreur WebSocket : ', event); +});</pre> + +<h2 id="specifications">Spécifications</h2> + +<p>{{Specifications}}</p> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat}}</p> + +<h2 id="see_also">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/API/WebSocket/close_event">WebSocket : évènement <code>close</code></a></li> + <li><a href="/fr/docs/Web/API/WebSocket/message_event">WebSocket : évènement <code>message</code></a></li> + <li><a href="/fr/docs/Web/API/WebSocket/open_event">WebSocket : évènement <code>open</code></a></li> + <li><a href="/fr/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">Écrire des applications clientes WebSocket</a></li> +</ul> diff --git a/files/fr/web/api/websocket/extensions/index.html b/files/fr/web/api/websocket/extensions/index.html new file mode 100644 index 0000000000..5846b29953 --- /dev/null +++ b/files/fr/web/api/websocket/extensions/index.html @@ -0,0 +1,26 @@ +--- +title: WebSocket.extensions +slug: Web/API/WebSocket/extensions +browser-compat: api.WebSocket.extensions +--- +<p>{{APIRef("Web Sockets API")}}</p> + +<p>La propriété en lecture seule <strong><code>WebSocket.extensions</code></strong> renvoie les extensions sélectionnées par le serveur. Actuellement, cette propriété vaut une chaîne de caractères vide ou la liste des extensions négociées par la connexion.</p> + +<h2 id="syntax">Syntaxe</h2> + +<pre class="brush: js"> +var extensions = aWebSocket.extensions; +</pre> + +<h2 id="value">Valeur</h2> + +<p>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>.</p> + +<h2 id="specifications">Spécifications</h2> + +<p>{{Specifications}}</p> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat}}</p> diff --git a/files/fr/web/api/websocket/index.html b/files/fr/web/api/websocket/index.html index d9aa659440..45acf344a3 100644 --- a/files/fr/web/api/websocket/index.html +++ b/files/fr/web/api/websocket/index.html @@ -1,298 +1,125 @@ --- title: WebSocket slug: Web/API/WebSocket -tags: - - API - - WebSocket - - WebSockets +browser-compat: api.WebSocket translation_of: Web/API/WebSocket --- -<p>{{APIRef("Web Sockets API")}}{{ SeeCompatTable() }}</p> +<div>{{APIRef("Web Sockets API")}}</div> -<p>L'objet WebSocket fournit une API permettant la création et la gestion d'une <span style="background-color: rgba(212, 221, 228, 0.14902); font-size: 14.4444446563721px; line-height: 23.3333339691162px;">connexion</span> <a href="/en/WebSockets" title="en/WebSockets">WebSocket</a> avec un serveur, ainsi que l'émission et la réception de données par l'intermédiaire de cette <span style="background-color: rgba(212, 221, 228, 0.14902); font-size: 14.4444446563721px; line-height: 23.3333339691162px;">connexion</span>.</p> +<p>L'objet <code>WebSocket</code> fournit l'API qui permet de créer et de gérer une connexion <a href="/fr/docs/Web/API/WebSockets_API">WebSocket</a> à un serveur ainsi que d'envoyer et de recevoir des données sur cette connexion.</p> -<p>Le constructeur WebSocket accepte deux paramètres, un paramètre obligatoire et un facultatif:</p> +<p>Pour construire un objet <code>WebSocket</code>, on utilisera le constructeur <code><a href="/fr/docs/Web/API/WebSocket/WebSocket">WebSocket()</a></code>.</p> -<pre>WebSocket WebSocket( - in DOMString url, - in optional DOMString protocols -); +<p>{{AvailableInWorkers}}</p> -WebSocket WebSocket( - in DOMString url, - in optional DOMString[] protocols -); -</pre> +<h2 id="constructor">Constructeur</h2> <dl> - <dt><code>url</code></dt> - <dd>URL à laquelle se connecter; ce devrait être l'URL à laquelle le serveur WebSocket répondra.</dd> - <dt><code>protocols</code> {{ optional_inline() }}</dt> - <dd>Une chaîne de caractères spécifiant un protocole, ou <span style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;">un tableau de chaîne de caractères (plusieurs protocoles)</span>. Ces chaînes sont utilisées pour indiquer les sous-protocoles, afin qu'un même serveur puisse implémenter de multiples sous-protocoles WebSocket (par exemple, vous pourriez souhaiter qu'un serveur soit capable de gérer différents types d'intéractions en fonction du protocole spécifié). Si vous ne passez aucune chaîne de caractères pour le(s) protocole(s), une chaîne vide est utilisée.</dd> + <dt><a href="/fr/docs/Web/API/WebSocket/WebSocket"><code>WebSocket(url[, protocols])</code></a></dt> + <dd>Renvoie un nouvel objet <code>WebSocket</code>.</dd> </dl> -<p>Le constructeur peut lancer des exceptions:</p> - -<dl> - <dt><code>SECURITY_ERR</code></dt> - <dd>Le port vers lequel la <span style="background-color: rgba(212, 221, 228, 0.14902); font-size: 14.4444446563721px; line-height: 23.3333339691162px;">connexion</span> est tentée est actuellement bloqué.</dd> -</dl> - -<dl> -</dl> - -<h2 id="Method_overview" name="Method_overview">Vue d'ensemble des méthodes</h2> - -<table class="standard-table"> - <tbody> - <tr> - <td><code>void <a href="#close()">close</a>(in optional unsigned long code, in optional DOMString reason);</code></td> - </tr> - <tr> - <td><code>void <a href="#send()">send</a>(in DOMString data);</code></td> - </tr> - </tbody> -</table> - -<h2 id="Attributes" name="Attributes">Attributs</h2> +<h2 id="constants">Constantes</h2> <table class="standard-table"> <tbody> <tr> - <td class="header">Attribut</td> - <td class="header">Type</td> - <td class="header">Description</td> + <td class="header">Constante</td> + <td class="header">Valeur</td> </tr> <tr> - <td><code>binaryType</code></td> - <td>{{DOMXref("DOMString")}}</td> - <td>Une chaîne de caractères indiquant le type de données binaires transmises par la connexion. Les valeurs possibles sont soit "blob" si des objets DOM {{ domxref("Blob") }} sont utilisés ou "arraybuffer" si des objets <a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a> sont utilisés.</td> - </tr> - <tr> - <td><code>bufferedAmount</code></td> - <td><code><a href="/en/unsigned_long" title="en/unsigned long">unsigned long</a></code></td> - <td>Le nombre d'octets de données mis en fil d'attente (n'étant pas encore transmis sur le réseau) en effectuant des appels à {{ manch("send") }}. Cette valeur n'est pas remise à zéro quand la connexion est fermée; elle continue d'augmenter si les appels à {{ manch("send") }} persistent. <strong>Lecture seule.</strong></td> - </tr> - <tr> - <td><code>extensions</code></td> - <td>{{DOMXref("DOMString")}}</td> - <td>Extensions sélectionnées par le serveur. Actuellement, c'est une chaîne de caractères vide ou une liste des extensions telle que décidée par la connexion.</td> - </tr> - <tr> - <td><code>onclose</code></td> - <td>{{DOMXref("EventListener")}}</td> - <td>Un gestionnaire d'évènement à appeler quand la valeur de l'attribut <code>readyState</code> de la connexion WebSocket devient <code>CLOSED</code>. Le gestionnaire reçoit un évènement <a href="/en/WebSockets/WebSockets_reference/CloseEvent" title="en/WebSockets/WebSockets reference/CloseEvent"><code>CloseEvent</code></a> nommé "close".</td> - </tr> - <tr> - <td><code>onerror</code></td> - <td>{{DOMXref("EventListener")}}</td> - <td><span style="background-color: rgba(212, 221, 228, 0.14902); font-size: 14.4444446563721px; line-height: 23.3333339691162px;">Un gestionnaire d'évènement à appeler quand une erreur survient</span>. L'évènement est un évènement de base, nommé "error".</td> - </tr> - <tr> - <td><code>onmessage</code></td> - <td>{{DOMXref("EventListener")}}</td> - <td><span style="background-color: rgba(212, 221, 228, 0.14902); font-size: 14.4444446563721px; line-height: 23.3333339691162px;">Un gestionnaire d'évènement à appeler</span> quand un message émis par le serveur est reçu. Le gestionnaire reçoit un évènement <a href="/en/WebSockets/WebSockets_reference/MessageEvent" title="en/WebSockets/WebSockets reference/MessageEvent"><code>MessageEvent</code></a> nommé "message".</td> - </tr> - <tr> - <td><code>onopen</code></td> - <td>{{DOMXref("EventListener")}}</td> - <td><span style="background-color: rgba(212, 221, 228, 0.14902); font-size: 14.4444446563721px; line-height: 23.3333339691162px;">Un gestionnaire d'évènement à appeler</span> quand la valeur de l'attribut <code>readyState</code> de la connexion WebSocket devient <code>OPEN</code>; cela indique que la connexion est prête à recevoir et émettre des données. L'évènement est un évènement de base nommé "open".</td> - </tr> - <tr> - <td><code>protocol</code></td> - <td>{{DOMXref("DOMString")}}</td> - <td>Une chaîne de caractères indiquant le nom du sous-protocole que le serveur a choisi; ce sera l'une des chaînes spécifiées dans le paramètre <code>protocols</code> lors de la création de l'objet WebSocket.</td> - </tr> - <tr> - <td><code>readyState</code></td> - <td><code><a href="/en/unsigned_short" title="en/unsigned short">unsigned short</a></code></td> - <td>Le statut (actuel) de la connexion; c'est une valeur de {{ anch("Constantes de statut") }}. <strong>Lecture Seule.</strong></td> - </tr> - <tr> - <td><code>url</code></td> - <td>{{DOMXref("DOMString")}}</td> - <td>L'URL telle que déterminée par le constructeur. C'est toujours une URL absolue. <strong>Lecture Seule.</strong></td> - </tr> - </tbody> -</table> - -<h2 id="Constants" name="Constants">Constantes</h2> - -<h3 id="Constantes_de_statut">Constantes de statut</h3> - -<p>Ces constantes sont utilisées par l'attribut <code>readyState</code> pour décrire le statut de la connexion WebSocket.</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">Constant</td> - <td class="header">Value</td> - <td class="header">Description</td> - </tr> - <tr> - <td><code>CONNECTING</code></td> + <td><code>WebSocket.CONNECTING</code></td> <td><code>0</code></td> - <td>La connexion n'est pas encore établie.</td> </tr> <tr> - <td><code>OPEN</code></td> + <td><code>WebSocket.OPEN</code></td> <td><code>1</code></td> - <td>La connexion est établie et prête pour la communication.</td> </tr> <tr> - <td><code>CLOSING</code></td> + <td><code>WebSocket.CLOSING</code></td> <td><code>2</code></td> - <td>La connexion est en train de se fermer.</td> </tr> <tr> - <td><code>CLOSED</code></td> + <td><code>WebSocket.CLOSED</code></td> <td><code>3</code></td> - <td>La connexion est fermée ou n'a pas pu être établie.</td> </tr> </tbody> </table> -<h2 id="Methods" name="Methods">Méthodes</h2> - -<h3 id="close()" name="close()">close()</h3> - -<p>Ferme la connexion Websocket ou abandonne la tentative de connexion. Si la connexion est déjà fermée (statut <code>CLOSED)</code>, cette méthode est sans effet.</p> - -<pre class="eval">void close( - in optional unsigned short code, - in optional DOMString reason -); -</pre> - -<h6 id="Parameters" name="Parameters">Paramètres</h6> +<h2 id="properties">Propriétés</h2> <dl> - <dt><code>code</code> {{ optional_inline() }}</dt> - <dd>Une valeur numérique indiquant le code du statut décrivant pourquoi la connexion est fermée. Si ce paramètre n'est pas spécifié, une valeur par défaut de 1000 est utilisée (indiquant une fermeture standard de "transaction terminée"). Voir la <a href="/en/WebSockets/WebSockets_reference/CloseEvent#Status_codes" title="en/WebSockets/WebSockets reference/CloseEvent#Status codes">liste des codes de statut</a> sur la page de l'évènement <a href="/en/WebSockets/WebSockets_reference/CloseEvent" title="en/WebSockets/WebSockets reference/CloseEvent"><code>CloseEvent</code></a> pour les valeurs autorisées.</dd> - <dt><code>reason</code> {{ optional_inline() }}</dt> - <dd>Une chaîne de caractère <em>humainement-compréhensible</em> expliquant pourquoi la connexion est fermée. Cette chaîne ne doit pas excéder 123 octets <span style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;">(et non </span><strong style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;">pas</strong><span style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;"> caractères) </span>de texte UTF-8.</dd> + <dt><a href="/fr/docs/Web/API/WebSocket/binaryType"><code>WebSocket.binaryType</code></a></dt> + <dd>Le type de données binaire utilisé par la connexion.</dd> + <dt><a href="/fr/docs/Web/API/WebSocket/bufferedAmount"><code>WebSocket.bufferedAmount</code></a> {{readonlyinline}}</dt> + <dd>Le nombre d'octets de données dans la queue.</dd> + <dt><a href="/fr/docs/Web/API/WebSocket/extensions"><code>WebSocket.extensions</code></a> {{readonlyinline}}</dt> + <dd>Les extensions sélectionnées par le serveur.</dd> + <dt><a href="/fr/docs/Web/API/WebSocket/onclose"><code>WebSocket.onclose</code></a></dt> + <dd>Un gestionnaire d'évènement à appeler lorsque la connexion est fermée.</dd> + <dt><a href="/fr/docs/Web/API/WebSocket/onerror"><code>WebSocket.onerror</code></a></dt> + <dd>Un gestionnaire d'évènement à appeler en cas d'erreur.</dd> + <dt><a href="/fr/docs/Web/API/WebSocket/onmessage"><code>WebSocket.onmessage</code></a></dt> + <dd>Un gestionnaire d'évènement à appeler lors de la réception d'un message du serveur.</dd> + <dt><a href="/fr/docs/Web/API/WebSocket/onopen"><code>WebSocket.onopen</code></a></dt> + <dd>Un gestionnaire d'évènement à appeler lorsque la connexion est ouverte.</dd> + <dt><a href="/fr/docs/Web/API/WebSocket/protocol"><code>WebSocket.protocol</code></a> {{readonlyinline}}</dt> + <dd>Le sous-protocole sélectionné par le serveur.</dd> + <dt><a href="/fr/docs/Web/API/WebSocket/readyState"><code>WebSocket.readyState</code></a> {{readonlyinline}}</dt> + <dd>L'état courant de la connexion.</dd> + <dt><a href="/fr/docs/Web/API/WebSocket/url"><code>WebSocket.url</code></a> {{readonlyinline}}</dt> + <dd>L'URL absolue de la WebSocket.</dd> </dl> -<h6 id="Exceptions_lancées">Exceptions lancées</h6> +<h2 id="methods">Méthodes</h2> <dl> - <dt><code>INVALID_ACCESS_ERR</code></dt> - <dd>Un code invalide a été spécifié.</dd> - <dt><code>SYNTAX_ERR</code></dt> - <dd>La chaîne de caractères (paramètre <strong>reason</strong>) est trop longue ou contient des données invalides.</dd> + <dt><a href="/fr/docs/Web/API/WebSocket/close"><code>WebSocket.close([code[, reason]])</code></a></dt> + <dd>Ferme la connexion.</dd> + <dt><a href="/fr/docs/Web/API/WebSocket/send"><code>WebSocket.send(data)</code></a></dt> + <dd>Ajoute des données à transmettre à la queue.</dd> </dl> -<h6 id="Notes">Notes</h6> - -<p>Concernant Gecko: Cette méthode ne supporte aucun paramètre avant Gecko 8.0 {{ geckoRelease("8.0") }}.</p> - -<h3 id="send()" name="send()">send()</h3> - -<p>Émet des données vers le serveur via la connexion WebSocket.</p> - -<pre class="eval">void send( - in DOMString data -); - -void send( - in ArrayBuffer data -); - -void send( - in Blob data -); -</pre> - -<h6 id="Parameters" name="Parameters">Paramètres</h6> +<h2 id="events">Évènements</h2> -<dl> - <dt><code>data</code></dt> - <dd>Une chaîne de caractères à envoyer au serveur.</dd> -</dl> - -<h6 id="Exceptions_lancées_2">Exceptions lancées</h6> +<p>Vous pouvez écouter ces évènements en utilisant la méthode <code>addEventListener()</code> ou en affectant un gestionnaire d'évènement à la propriété <code>on<em>nomevenement</em></code> de cette interface.</p> <dl> - <dt><code>INVALID_STATE_ERR</code></dt> - <dd>La connexion n'est pas actuellent ouverte (valeur de l'attribut <em>readyState</em> <code>OPEN)</code>.</dd> - <dt><code>SYNTAX_ERR</code></dt> - <dd>La chaîne de caractères contient des données invalides.</dd> + <dt><a href="/fr/docs/Web/API/WebSocket/close_event"><code>close</code></a></dt> + <dd>Déclenché lorsqu'une connexion avec une <code>WebSocket</code> est fermée. Également disponible avec la propriété <a href="/fr/docs/Web/API/WebSocket/onclose"><code>onclose</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/WebSocket/error_event"><code>error</code></a></dt> + <dd>Déclenché lorsqu'une connexion avec une <code>WebSocket</code> a été fermée à cause d'une erreur, par exemple lorsque des données n'ont pu être envoyées. Également disponible avec la propriété <a href="/fr/docs/Web/API/WebSocket/onerror"><code>onerror</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/WebSocket/message_event"><code>message</code></a></dt> + <dd>Déclenché lorsque des données sont reçues via une <code>WebSocket</code>. Également disponible avec la propriété <a href="/fr/docs/Web/API/WebSocket/onmessage"><code>onmessage</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/WebSocket/open_event"><code>open</code></a></dt> + <dd>Déclenché lorsqu'une connexion avec une <code>WebSocket</code> est ouverte. Également disponible avec la propriété <a href="/fr/docs/Web/API/WebSocket/onopen"><code>onopen</code></a>.</dd> </dl> -<h6 id="Remarques">Remarques</h6> - -<div class="note"> -<p><strong>Note:</strong> L'implémentation de la méthode <code>send()</code> dans Gecko diffère quelques peu des spécifications dans {{Gecko("6.0")}}; Gecko retourne une valeur booléenne (<code>boolean)</code> indiquant si la connexion est toujours ouverte (et, par extension, que les données ont bien été mise en fil d'émission ou émises); cette différence est corrigée dans {{Gecko("8.0")}}.</p> - -<p>Sur {{Gecko("11.0")}}, le support d'<code><a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer">ArrayBuffer</a></code> est implémenté, mais pas le type de données {{ domxref("Blob") }}.</p> -</div> - -<h2 id="See_also" name="See_also">Exemple</h2> - -<pre class="brush: js">var socket = null; -try { - // Connexion vers un serveur HTTP - // prennant en charge le protocole WebSocket ("ws://"). - socket = new WebSocket("ws://localhost"); - - // ----- OU ----- - - // Connexion vers un serveur HTTPS - // prennant en charge le protocole WebSocket over SSL ("wss://"). - socket = new WebSocket("wss://localhost"); -} catch (exception) { - console.error(exception); -} - -// Récupération des erreurs. -// Si la connexion ne s'établie pas, -// l'erreur sera émise ici. -socket.onerror = function(error) { - console.error(error); -}; +<h2 id="examples">Exemples</h2> -// Lorsque la connexion est établie. -socket.onopen = function(event) { - console.log("Connexion établie."); +<pre class="brush: js">// Créer une connexion WebSocket +const socket = new WebSocket('ws://localhost:8080'); - // Lorsque la connexion se termine. - this.onclose = function(event) { - console.log("Connexion terminé."); - }; +// La connexion est ouverte +socket.addEventListener('open', function (event) { + socket.send('Coucou le serveur !'); +}); - // Lorsque le serveur envoi un message. - this.onmessage = function(event) { - console.log("Message:", event.data); - }; +// Écouter les messages +socket.addEventListener('message', function (event) { + console.log('Voici un message du serveur', event.data); +});</pre> - // Envoi d'un message vers le serveur. - this.send("Hello world!"); -}; -</pre> +<h2 id="specifications">Spécifications</h2> -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Specification</th> - <th>Status</th> - <th>Comment</th> - </tr> - <tr> - <td>{{SpecName("Websockets", "#the-websocket-interface", "WebSocket")}}</td> - <td>{{Spec2("Websockets")}}</td> - <td>Definition initiale</td> - </tr> - </tbody> -</table> +<p>{{Specifications}}</p> -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<p>{{Compat("api.WebSocket")}}</p> +<p>{{Compat}}</p> -<h2 id="See_also">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">Écrire des applications client WebSocket</a></li> + <li><a href="/fr/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">Écrire des applications clientes WebSocket</a></li> </ul> diff --git a/files/fr/web/api/websocket/message_event/index.html b/files/fr/web/api/websocket/message_event/index.html new file mode 100644 index 0000000000..dc35ad18b2 --- /dev/null +++ b/files/fr/web/api/websocket/message_event/index.html @@ -0,0 +1,57 @@ +--- +title: 'WebSocket : évènement message' +slug: Web/API/WebSocket/message_event +browser-compat: api.WebSocket.message_event +--- +<div>{{APIRef}}</div> + +<p>L'évènement <code>message</code> est déclenché lorsque des données sont reçues via une <code>WebSocket</code>.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bouillonne/Remonte</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td><a href="/fr/docs/Web/API/MessageEvent"><code>MessageEvent</code></a></td> + </tr> + <tr> + <th scope="row">Propriété de gestionnaire d'évènement correspondante</th> + <td><a href="/fr/docs/Web/API/WebSocket/onmessage"><code>onmessage</code></a></td> + </tr> + </tbody> +</table> + +<h2 id="examples">Exemples</h2> + +<pre class="brush: js"> +// Crée une connexion WebSocket +const socket = new WebSocket('ws://localhost:8080'); + +// Écoute les différents messages +socket.addEventListener('message', function (event) { + console.log('Message reçu du serveur ', event.data); +});</pre> + +<h2 id="specifications">Spécifications</h2> + +<p>{{Specifications}}</p> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat}}</p> + +<h2 id="see_also">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/API/WebSocket/close_event">WebSocket : évènement <code>close</code></a></li> + <li><a href="/fr/docs/Web/API/WebSocket/error_event">WebSocket : évènement <code>error</code></a></li> + <li><a href="/fr/docs/Web/API/WebSocket/open_event">WebSocket : évènement <code>open</code></a></li> + <li><a href="/fr/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">Écrire des applications clientes WebSocket</a></li> + </ul> diff --git a/files/fr/web/api/websocket/onclose/index.html b/files/fr/web/api/websocket/onclose/index.html new file mode 100644 index 0000000000..040f03c485 --- /dev/null +++ b/files/fr/web/api/websocket/onclose/index.html @@ -0,0 +1,27 @@ +--- +title: WebSocket.onclose +slug: Web/API/WebSocket/onclose +browser-compat: api.WebSocket.onclose +--- +<p>{{APIRef("Web Sockets API")}}</p> + +<p>La propriété <code><strong>WebSocket.onclose</strong></code> est un <a href="/fr/docs/Web/Events/Event_handlers">gestionnaire d'évènement</a> invoqué lorsque l'état <a href="/fr/docs/Web/API/WebSocket/readyState"><code>readyState</code></a> de la connexion WebSocket change de valeur pour passer à <a href="/fr/docs/Web/API/WebSocket/readyState"><code>CLOSED</code></a>. Ce gestionnaire est appelé avec un paramètre <a href="/fr/docs/Web/API/CloseEvent"><code>CloseEvent</code></a>.</p> + +<h2 id="syntax">Syntaxe</h2> + +<pre class="brush: js"> +unWebSocket.onclose = function(event) { + console.log("La WebSocket est désormais fermée."); +};</pre> + +<h2 id="value">Valeur</h2> + +<p>Une fonction <a href="/fr/docs/Web/API/EventListener"><code>EventListener</code></a>.</p> + +<h2 id="specifications">Spécifications</h2> + +<p>{{Specifications}}</p> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat}}</p> diff --git a/files/fr/web/api/websocket/onerror/index.html b/files/fr/web/api/websocket/onerror/index.html new file mode 100644 index 0000000000..5ffafd26cd --- /dev/null +++ b/files/fr/web/api/websocket/onerror/index.html @@ -0,0 +1,35 @@ +--- +title: WebSocket.onerror +slug: Web/API/WebSocket/onerror +browser-compat: api.WebSocket.onerror +--- +<div>{{APIRef("Web Sockets API")}}</div> + +<p>La propriété <code><strong>onerror</strong></code> de l'interface <a href="/fr/docs/Web/API/WebSocket"><code>WebSocket</code></a> est un gestionnaire d'évènement qui est appelé lorsqu'une erreur se produit sur la connexion WebSocket.</p> + +<p>Il est également possible d'ajouter un gestionnaire d'évènement <code>error</code> avec la méthode <a href="/fr/docs/Web/API/EventTarget/addEventListener"><code>addEventListener()</code></a>.</p> + +<h2 id="syntax">Syntaxe</h2> + +<pre class="brush: js"> +webSocket.onerror = eventHandler; +</pre> + +<h3 id="value">Valeur</h3> + +<p>Une fonction ou un <a href="/fr/docs/Web/Events/Event_handlers">gestionnaire d'évènement</a> qui est exécuté lorsqu'un évènement <code>error</code> se produit sur la connexion WebSocket.</p> + +<h2 id="example">Exemple</h2> + +<pre class="brush: js"> +webSocket.onerror = function(event) { + console.error("Erreur WebSocket observée :", event); +};</pre> + +<h2 id="specifications">Spécifications</h2> + +<p>{{Specifications}}</p> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat}}</p> diff --git a/files/fr/web/api/websocket/onmessage/index.html b/files/fr/web/api/websocket/onmessage/index.html new file mode 100644 index 0000000000..03ff9451fb --- /dev/null +++ b/files/fr/web/api/websocket/onmessage/index.html @@ -0,0 +1,27 @@ +--- +title: WebSocket.onmessage +slug: Web/API/WebSocket/onmessage +browser-compat: api.WebSocket.onmessage +--- +<div>{{APIRef("Web Sockets API")}}</div> + +<p>La propriété <strong><code>WebSocket.onmessage</code></strong> est un <a href="/fr/docs/Web/Events/Event_handlers">gestionnaire d'évènement</a> qui est appelé lorsqu'un message est reçu depuis le serveur. Ce gestionnaire est appelé avec un évènement <a href="/fr/docs/Web/API/MessageEvent"><code>MessageEvent</code></a> en paramètre.</p> + +<h2 id="syntax">Syntaxe</h2> + +<pre class="brush: js"> +unWebSocket.onmessage = function(event) { + console.debug("Message WebSocket reçu :", event); +};</pre> + +<h2 id="value">Valeur</h2> + +<p>Un objet <a href="/fr/docs/Web/API/EventListener"><code>EventListener</code></a>.</p> + +<h2 id="specifications">Spécifications</h2> + +<p>{{Specifications}}</p> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat}}</p> diff --git a/files/fr/web/api/websocket/onopen/index.html b/files/fr/web/api/websocket/onopen/index.html new file mode 100644 index 0000000000..488b3eb0be --- /dev/null +++ b/files/fr/web/api/websocket/onopen/index.html @@ -0,0 +1,27 @@ +--- +title: WebSocket.onopen +slug: Web/API/WebSocket/onopen +browser-compat: api.WebSocket.onopen +--- +<div>{{APIRef("Web Sockets API")}}</div> + +<p>La propriété <strong><code>WebSocket.onopen</code></strong> est un <a href="/fr/docs/Web/Events/Event_handlers">gestionnaire d'évènement</a> qui est appelé lorsque l'état (<a href="/fr/docs/Web/API/WebSocket/readyState"><code>readyState</code></a>) de la connexion <a href="/fr/docs/Web/API/WebSocket"><code>WebSocket</code></a> passe à <code>1</code>, indiquant que la connexion est prête pour l'envoi et la réception de données. Lorsqu'il est appelé, ce gestionnaire d'évènement reçoit un objet <a href="/fr/docs/Web/API/Event"><code>Event</code></a> en paramètre.</p> + +<h2 id="syntax">Syntaxe</h2> + +<pre class="brush: js"> +uneWebSocket.onopen = function(event) { + console.log("La WebSocket est désormais ouverte."); +};</pre> + +<h2 id="value">Valeur</h2> + +<p>Un objet <a href="/fr/docs/Web/API/EventListener"><code>EventListener</code></a>.</p> + +<h2 id="specifications">Spécifications</h2> + +<p>{{Specifications}}</p> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat}}</p> diff --git a/files/fr/web/api/websocket/open_event/index.html b/files/fr/web/api/websocket/open_event/index.html new file mode 100644 index 0000000000..cfa28af7bb --- /dev/null +++ b/files/fr/web/api/websocket/open_event/index.html @@ -0,0 +1,57 @@ +--- +title: 'WebSocket : évènement open' +slug: Web/API/WebSocket/open_event +browser-compat: api.WebSocket.open_event +--- +<div>{{APIRef}}</div> + +<p>L'évènement <code>open</code> est déclenché lorsqu'une connexion avec une <code>WebSocket</code> est ouverte.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bouillonne/Remonte</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td><a href="/fr/docs/Web/API/Event"><code>Event</code></a></td> + </tr> + <tr> + <th scope="row">Propriété de gestionnaire d'évènement correspondante</th> + <td><a href="/fr/docs/Web/API/WebSocket/onopen"><code>onopen</code></a></td> + </tr> + </tbody> +</table> + +<h2 id="examples">Exemples</h2> + +<pre class="brush: js"> +// Crée une connexion WebSocket +const socket = new WebSocket('ws://localhost:8080'); + +// La connexion est ouverte +socket.addEventListener('open', (event) => { + socket.send('Coucou serveur !'); +});</pre> + +<h2 id="specifications">Spécifications</h2> + +<p>{{Specifications}}</p> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat}}</p> + +<h2 id="see_also">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/API/WebSocket/close_event">WebSocket : évènement <code>close</code></a></li> + <li><a href="/fr/docs/Web/API/WebSocket/error_event">WebSocket : évènement <code>error</code></a></li> + <li><a href="/fr/docs/Web/API/WebSocket/message_event">WebSocket : évènement <code>message</code></a></li> + <li><a href="/fr/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">Écrire des applications clientes WebSocket</a></li> + </ul> diff --git a/files/fr/web/api/websocket/protocol/index.html b/files/fr/web/api/websocket/protocol/index.html new file mode 100644 index 0000000000..cf2bc5d053 --- /dev/null +++ b/files/fr/web/api/websocket/protocol/index.html @@ -0,0 +1,26 @@ +--- +title: WebSocket.protocol +slug: Web/API/WebSocket/protocol +browser-compat: api.WebSocket.protocol +--- +<p>{{APIRef("Web Sockets API")}}</p> + +<p>La propriété en lecture seule <strong><code>WebSocket.protocol</code></strong> renvoie le nom du sous protocole sélectionné par le serveur. Cette valeur sera l'une des chaînes de caractères du paramètre <code>protocols</code> utilisé lors de la création de l'objet <a href="/fr/docs/Web/API/WebSocket"><code>WebSocket</code></a> ou la chaîne vide si aucune connexion n'est établie.</p> + +<h2 id="syntax">Syntax</h2> + +<pre class="brush: js"> +var protocol = uneWebSocket.protocol; +</pre> + +<h2 id="value">Valeur</h2> + +<p>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>.</p> + +<h2 id="specifications">Spécifications</h2> + +<p>{{Specifications}}</p> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat}}</p> diff --git a/files/fr/web/api/websocket/readystate/index.html b/files/fr/web/api/websocket/readystate/index.html new file mode 100644 index 0000000000..d33114d5f5 --- /dev/null +++ b/files/fr/web/api/websocket/readystate/index.html @@ -0,0 +1,56 @@ +--- +title: WebSocket.readyState +slug: Web/API/WebSocket/readyState +browser-compat: api.WebSocket.readyState +--- +<p>{{APIRef("Web Sockets API")}}</p> + +<p>La propriété en lecture seule <strong><code>WebSocket.readyState</code></strong> renvoie l'état courant de la connexion <a href="/fr/docs/Web/API/WebSocket"><code>WebSocket</code></a>.</p> + +<h2 id="syntax">Syntaxe</h2> + +<pre class="brush: js"> +var readyState = uneWebSocket.readyState; +</pre> + +<h2 id="value">Valeur</h2> + +<p>Cette propriété peut valoir l'une des valeurs de type <code>unsigned short</code> suivantes :</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Valeur</td> + <td class="header">État</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>0</code></td> + <td><code>CONNECTING</code></td> + <td>La socket a été créée. La connexion n'est pas encore ouverte.</td> + </tr> + <tr> + <td><code>1</code></td> + <td><code>OPEN</code></td> + <td>La connexion est ouverte et prête pour la communication.</td> + </tr> + <tr> + <td><code>2</code></td> + <td><code>CLOSING</code></td> + <td>La connexion est en cours de fermeture.</td> + </tr> + <tr> + <td><code>3</code></td> + <td><code>CLOSED</code></td> + <td>La connexion est fermée ou n'a pas pu être ouverte.</td> + </tr> + </tbody> +</table> + +<h2 id="specifications">Spécifications</h2> + +<p>{{Specifications}}</p> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat}}</p> diff --git a/files/fr/web/api/websocket/send/index.html b/files/fr/web/api/websocket/send/index.html new file mode 100644 index 0000000000..62cd149882 --- /dev/null +++ b/files/fr/web/api/websocket/send/index.html @@ -0,0 +1,55 @@ +--- +title: WebSocket.send() +slug: Web/API/WebSocket/send +browser-compat: api.WebSocket.send +--- +<p>{{APIRef("Web Sockets API")}}</p> + +<p>La méthode <strong><code>WebSocket.send()</code></strong> rajoute les données indiquées à la queue pour transmission au serveur via la connexion WebSocket, augmentant ainsi la valeur de <code>bufferedAmount</code> du nombre d'octets nécessaires pour les données. Si les données ne peuvent être envoyées (par exemple parce qu'elles doivent être mises en tampon mais que la mémoire tampon est pleine), la socket est fermée automatiquement.</p> + +<h2 id="syntax">Syntaxe</h2> + +<pre class="brush: js"> +WebSocket.send("Coucou serveur !"); +</pre> + +<h3 id="parameters">Paramètres</h3> + +<dl> + <dt><code>data</code></dt> + <dd>Les données à envoyer au serveur. La valeur peut avoir un des types suivants : + <dl> + <dt><a href="/fr/docs/Web/API/USVString"><code>USVString</code></a></dt> + <dd>Une chaîne de caractères. Cette chaîne est ajoutée au tampon au format UTF-8 et la valeur de <code>bufferedAmount</code> est augmentée du nombre d'octets nécessaires pour représenter cette chaîne de caractères UTF-8.</dd> + <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer"><code>ArrayBuffer</code></a></dt> + <dd>Les données binaires peuvent aussi être envoyées avec un tableau typé. Son contenu binaire est mis en tampon et la valeur de <code>bufferedAmount</code> est augmentée du nombre d'octets nécessaires.</dd> + <dt><a href="/fr/docs/Web/API/Blob"><code>Blob</code></a></dt> + <dd>Lorsqu'une valeur <code>Blob</code> est fournie, les données brutes du blob sont rajoutées à la queue pour être transmises dans une <i lang="en">frame</i> binaire. La valeur de <code>bufferedAmount</code> est augmentée du nombre d'octets utilisés pour représenter ces données brutes.</dd> + <dt><a href="/fr/docs/Web/API/ArrayBufferView"><code>ArrayBufferView</code></a></dt> + <dd>Il est possible d'envoyer n'importe quel objet étant <a href="/fr/docs/Web/JavaScript/Typed_arrays">un tableau typé JavaScript</a> sous la forme d'une <i lang="en">frame</i> binaire. Le contenu des données binaires est rajouté à la queue dans le tampon et la valeur de <code>bufferedAmount</code> est augmentée du nombre d'octets correspondant.</dd> + </dl> + </dd> +</dl> + +<h3 id="exceptions_thrown">Exceptions levées</h3> + +<dl> + <dt><code>INVALID_STATE_ERR</code></dt> + <dd>La connexion n'est pas ouverte actuellement.</dd> + <dt><code>SYNTAX_ERR</code></dt> + <dd>Les données sont une chaîne de caractères pour laquelle il existe des <i lang="en">surrogates</i> non appairés.</dd> +</dl> + +<div class="note"> + <p><strong>Note :</strong> Pour Gecko 6.0, l'implémentation de <code>send()</code> varie de la spécification : le moteur renvoie un booléen indiquant si la connexion est toujours ouverte (par extension, cela indique si les données ont été correctement rajoutées à la queue ou transmises). Ce comportement a été corrigé avec Gecko 8.0.</p> + + <p>Avec Gecko 11.0, la prise en charge des <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer"><code>ArrayBuffer</code></a> est implémentée mais pas celle pour les objets <a href="/fr/docs/Web/API/Blob"><code>Blob</code></a>.</p> +</div> + +<h2 id="specifications">Spécifications</h2> + +<p>{{Specifications}}</p> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat}}</p> diff --git a/files/fr/web/api/websocket/url/index.html b/files/fr/web/api/websocket/url/index.html new file mode 100644 index 0000000000..acaa13de14 --- /dev/null +++ b/files/fr/web/api/websocket/url/index.html @@ -0,0 +1,26 @@ +--- +title: WebSocket.url +slug: Web/API/WebSocket/url +browser-compat: api.WebSocket.url +--- +<p>{{APIRef("Web Sockets API")}}</p> + +<p>La propriété en lecture seule <strong><code>WebSocket.url</code></strong> renvoie l'URL absolue de la <a href="/fr/docs/Web/API/WebSocket"><code>WebSocket</code></a> telle que résolue par le constructeur.</p> + +<h2 id="syntax">Syntaxe</h2> + +<pre class="brush: js"> +var url = aWebSocket.url; +</pre> + +<h2 id="value">Valeur</h2> + +<p>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>.</p> + +<h2 id="specifications">Spécifications</h2> + +<p>{{Specifications}}</p> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat}}</p> diff --git a/files/fr/web/api/websocket/websocket/index.html b/files/fr/web/api/websocket/websocket/index.html new file mode 100644 index 0000000000..955611fa20 --- /dev/null +++ b/files/fr/web/api/websocket/websocket/index.html @@ -0,0 +1,42 @@ +--- +title: WebSocket() +slug: Web/API/WebSocket/WebSocket +browser-compat: api.WebSocket.WebSocket +--- +<p>{{APIRef("Web Sockets API")}}</p> + +<p>Le constructeur <code><strong>WebSocket()</strong></code> renvoie un nouvel objet <a href="/fr/docs/Web/API/WebSocket"><code>WebSocket</code></a>.</p> + +<h2 id="syntax">Syntaxe</h2> + +<pre class="brush: js"> +var <em>aWebSocket</em> = new WebSocket(<em>url</em> [, protocols]); +</pre> + +<h3 id="parameters">Paramètres</h3> + +<dl> + <dt><code>url</code></dt> + <dd>L'URL à laquelle se connecter. Cela devrait être l'URL à laquelle le serveur WebSocket répondra.</dd> + <dt><code>protocols</code> {{optional_inline}}</dt> + <dd>Une valeur qui est une chaîne de caractères représentant un seul protocole ou un tableau de chaînes de caractères représentant une liste de protocoles. Ces chaînes de caractères indiquent des sous-protocoles : un serveur donné pourra implémenter différents sous-protocoles WebSocket (on peut vouloir qu'un serveur soit capable de gérér différents types d'interaction selon le <code>protocol</code> indiqué). + </dd> + <dd>Si cette valeur est absence, c'est un tableau vide qui est utilisé par défaut : <code>[]</code>.</dd> +</dl> + +<h3 id="exceptions_thrown">Exceptions levées</h3> + +<dl> + <dt><code>SECURITY_ERR</code></dt> + <dd>Le port ciblé par la tentative de connexion est bloqué.</dd> + <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></dt> + <dd>L'URL est invalide.</dd> +</dl> + +<h2 id="specifications">Spécifications</h2> + +<p>{{Specifications}}</p> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat}}</p> diff --git a/files/fr/web/api/window/location/index.html b/files/fr/web/api/window/location/index.html index 91686951bc..f8074f97f9 100644 --- a/files/fr/web/api/window/location/index.html +++ b/files/fr/web/api/window/location/index.html @@ -1,229 +1,197 @@ --- -title: window.location -slug: Web/API/window/location -tags: - - DOM - - DOM_0 +title: Window.location +slug: Web/API/Window/location translation_of: Web/API/Window/location +browser-compat: api.Window.location --- -<p>Renvoie un objet <code>Location</code> contenant des informations concernant l'URL actuelle du document et fournit des méthodes pour modifier cette URL. Cette propriété peut être utilisée pour charger une autre page.</p> +<p>{{APIRef}}</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<p>La propriété en lecture seule <strong><code>Window.location</code></strong> renvoie un objet <a href="/fr/docs/Web/API/Location"><code>Location</code></a> qui contient des informations à propos de l'emplacement courant du document.</p> -<pre class="syntaxbox"> var adresseActuelle = window.location; - window.location = nouvelleAdresse;</pre> +<p>Bien que <code>Window.location</code> soit un objet <code>Location</code> en <em>lecture seule</em>, on peut lui affecter une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>. Cela signifie qu'on peut, la plupart du temps, manipuler <code>location</code> comme une chaîne de caractères : <code>location = 'http://www.example.com'</code> est par exemple synonyme de <code>location.href = 'http://www.example.com'</code>.</p> -<p>où</p> +<p>Voir la page de l'interface <a href="/fr/docs/Web/API/Location"><code>Location</code></a> pour connaître l'ensemble des propriétés disponibles.</p> -<ul> - <li><em>adresseActuelle</em> est un objet de type <code>Location</code>, fournissant des informations à propos de l'URL courante et des méthodes pour la modifier. Ses propriétés et méthodes sont décrites ci-dessous.</li> - <li><em>nouvelleAdresse</em> est un objet <code>Location</code> ou une chaîne de caractères indiquant l'URL à charger.</li> -</ul> +<h2 id="syntaxe">Syntaxe</h2> -<h2 id="L.27objet_Location" name="L.27objet_Location">L'objet <code>Location</code></h2> +<pre class="brush: js"> +var <var>oldLocation</var> = location; +location = <var>newLocation</var>; +</pre> -<p>Les objets <code>Location</code> ont une méthode <code>toString</code> renvoyant l'URL courante. Il est également possible d'assigner une chaîne à <code>window.location</code>. Cela signifie que <code>window.location</code> peut être utilisé comme s'il s'agissait d'une chaîne dans la plupart des cas. De temps en temps, par exemple pour appeler une méthode d'objet <a href="/fr/R%C3%A9f%C3%A9rence_de_JavaScript_1.5_Core/Objets_globaux/String" title="fr/Référence_de_JavaScript_1.5_Core/Objets_globaux/String">String</a>, il est nécessaire d'appeler explicitement <code>toString</code> :</p> +<h2 id="exemples">Exemples</h2> -<pre class="brush: js">alert(window.location.toString().charAt(17)) +<h3 id="exemple_simple">Exemple simple</h3> + +<pre class="brush: js"> +console.log(location); // affiche "https://developer.mozilla.org/fr/docs/Web/API/Window/location" dans la console </pre> -<h2 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s">Propriétés</h2> - -<p>Toutes les propriétés suivantes sont des chaînes de caractères. Elles peuvent être lues pour obtenir des informations concernant l'URL courante, ou modifiées pour accéder à une autre adresse URL.</p> - -<p>La colonne « Exemple » contient les valeurs de ces propriétés pour l'URL suivante :<span class="nowiki"> http://www.example.com:8080/search?q=devmo#test</span></p> - -<table class="fullwidth-table"> - <tbody> - <tr> - <th>Propriété</th> - <th>Description</th> - <th>Exemple</th> - </tr> - <tr> - <td><a name="hash"><code>hash</code></a></td> - <td>La partie de l'URL qui suit le symbole « # », s'il y en un, avec ce symbole inclus. Une chaîne de caractères vide s'il n'y a pas de symbole #, ou qu'il n'est suivi par rien. Vous pouvez écouter l'<a href="/en-US/docs/Web/Reference/Events/hashchange" title="/en-US/docs/Web/Reference/Events/hashchange">évènement hashchange</a> pour être alerté des changements du hash dans les navigateurs le supportant.</td> - <td>#test</td> - </tr> - <tr> - <td><a name="host"><code>host</code></a></td> - <td>Le nom de l'hôte et son numéro de port.</td> - <td>www.<span class="nowiki">example</span>.com:8080</td> - </tr> - <tr> - <td><a name="hostname"><code>hostname</code></a></td> - <td>Le nom de l'hôte (sans son numéro de port).</td> - <td>www.<span class="nowiki">example</span>.com</td> - </tr> - <tr> - <td><a name="href"><code>href</code></a></td> - <td>L'URL entière.</td> - <td><span class="nowiki">http://www.</span><span class="nowiki">example</span><span class="nowiki">.com:8080/search?q=devmo#test</span></td> - </tr> - <tr> - <td><a name="origin"><code>origin</code></a></td> - <td>L'origine de l'URL</td> - <td><span class="nowiki">http://www.</span><span class="nowiki">example</span><span class="nowiki">.com:8080</span></td> - </tr> - <tr> - <td><a name="pathname"><code>pathname</code></a></td> - <td>Le chemin (relativement à l'hôte).</td> - <td>/search</td> - </tr> - <tr> - <td><a name="port"><code>port</code></a></td> - <td>Le numéro de port de l'URL. Si l'URL n'a pas de port (si le site utilise le port 80, le port par défaut de la plupart des sites), une chaîne de caractères vide est renvoyée.</td> - <td>8080</td> - </tr> - <tr> - <td><a name="protocol"><code>protocol</code></a></td> - <td>Le protocole de l'URL.</td> - <td>http:</td> - </tr> - <tr> - <td><a name="search"><code>search</code></a></td> - <td>La partie de l'URL qui suit le symbole « <code>?</code> », avec ce symbole inclus</td> - <td>?q=devmo</td> - </tr> - </tbody> -</table> - -<h2 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h2> - -<table class="fullwidth-table"> - <tbody> - <tr> - <th>Méthode</th> - <th>Description</th> - </tr> - <tr> - <td><code>assign(<em>url</em>)</code></td> - <td>Charge le document situé à l'URL spécifiée.</td> - </tr> - <tr> - <td><code>reload(<em>forceget</em>)</code></td> - <td>Recharge le document depuis l'URL actuelle. <code>forceget</code> est une valeur booléenne, qui lorsqu'elle vaut <code>true</code> force la page à être rechargée depuis le serveur. Si elle vaut <code>false</code> ou n'est pas précisée, le navigateur peut recharger la page depuis son cache.</td> - </tr> - <tr> - <td><code>replace(<em>url</em>)</code></td> - <td>Remplace le document courant par celui situé à l'URL fournie. La différence avec la méthode <code>assign()</code> est qu'après un <code>replace()</code>, la page courante ne sera pas enregistrée dans l'historique de la session, ce qui signifie que l'utilisateur ne pourra pas utiliser le bouton « Page précédente » pour y retourner.</td> - </tr> - <tr> - <td><code>toString()</code></td> - <td>Renvoie la représentation sous forme de chaîne de l'URL de l'objet <code>Location</code>. Consultez la <a href="/fr/docs/JavaScript/Référence_JavaScript/Référence_JavaScript/Objets_globaux/Object/toString" title="fr/Référence_de_JavaScript_1.5_Core/Objets_globaux/Object/toString">référence JavaScript</a> pour plus de détails.</td> - </tr> - </tbody> -</table> - -<h2 id="Exemple" name="Exemple">Exemples</h2> - -<h3 id="Exemple_1_Naviguer_vers_une_nouvelle_page">Exemple 1 : Naviguer vers une nouvelle page</h3> - -<p>A chaque fois qu'une nouvelle valeur est assignée à l'objet <code>Location</code>, un document sera chargé en utilisant l'URL fournie, comme si <code>window.location.assign() </code>avait été appelé avec la nouvelle URL.</p> - -<pre class="brush: js">window.location.assign("http://www.mozilla.org"); // ou -window.location = "http://www.mozilla.org"; +<h3 id="premier_exemple_naviguer_sur_une_nouvelle_page">Premier exemple : naviguer sur une nouvelle page</h3> + +<p>Lorsqu'une nouvelle valeur est affectée à l'objet <code>location</code>, un document sera chargé en utilisant l'URL comme si <code>location.assign()</code> avait été invoquée avec l'URL modifiée.</p> + +<div class="notecard note"> + <p><strong>Note :</strong> <a + href="https://html.spec.whatwg.org/multipage/browsers.html#allowed-to-navigate">Les marqueurs de bac à sable relatifs à la navigation</a> pourront lever une exception et empêcher la navigation.</p> +</div> + +<pre class="brush: js"> +location.assign("http://www.mozilla.org"); // ou +location = "http://www.mozilla.org"; </pre> -<h3 id="Exemple_2_Forcer_le_rechargement_de_la_page_actuelle_depuis_le_serveur">Exemple 2 : Forcer le rechargement de la page actuelle depuis le serveur</h3> +<h3 id="deuxième_exemple_recharger_la_page_courante">Deuxième exemple : recharger la page courante</h3> -<pre class="brush: js">window.location.reload(true);</pre> +<pre class="brush: js">location.reload();</pre> -<h3 id="Exemple_3_Afficher_les_propriétés_de_l'URL_actuelle_dans_une_fenêtre_d'alerte">Exemple 3 : Afficher les propriétés de l'URL actuelle dans une fenêtre d'alerte</h3> +<h3 id="troisième_exemple">Troisième exemple</h3> -<pre class="brush: js">function montrerLoc() { - var oLocation = window.location, aLog = ["Propriété (Typeof): valeur", "window.location (" + (typeof oLocation) + "): " + oLocation ]; - for (var sProp in oLocation){ - aLog.push(sProp + " (" + (typeof oLocation[sProp]) + "): " + (oLocation[sProp] || "n/a")); - } - alert(aLog.join("\n")); -} +<p>Dans cet exemple, on recharge la page avec la méthode <a href="/fr/docs/Web/API/Location/replace"><code>replace()</code></a> afin d'insérer la valeur de <code>location.pathname</code> dans l'ancre :</p> -// dans le HTM: <button onclick="montrerLoc();">Montrer les propriétés de Location</button> +<pre class="brush: js"> +function reloadPageWithHash() { + var initialPage = location.pathname; + location.replace('http://example.com/#' + initialPage); +} </pre> -<h3 id="Exemple_4_Envoyer_une_chaine_de_données_au_serveur_en_modifiant_la_propriété_search">Exemple 4 : Envoyer une chaine de données au serveur en modifiant la propriété <code>search</code></h3> +<h3 id="quatrième_exemple_afficher_les_propriétés_de_l_url_courante">Quatrième exemple : afficher les propriétés de l'URL courante</h3> -<pre class="brush: js">function envoyerDonnees (sData) { - window.location.search = sData; +<pre class="brush: js"> +function showLoc() { + var oLocation = location, aLog = ["Property (Typeof): Value", "location (" + (typeof oLocation) + "): " + oLocation ]; + for (var sProp in oLocation){ + aLog.push(sProp + " (" + (typeof oLocation[sProp]) + "): " + (oLocation[sProp] || "n/a")); + } + console.log(aLog.join("\n")); } - -// dans le HTML : <button onclick="envoyerDonnees('des infos');">Envoyer des données</button> </pre> -<p>L'adresse URL complêtée par "?des%20infos" est envoyée au serveur (si aucune action est prise en charge par le serveur, le document actuel est rechargé avec la nouvelle chaîne de caractère modifié).</p> - -<h3 id="Exemple_5_Obtenir_la_valeur_d'un_paramètre_de_l'URL_par_window.location.search">Exemple 5 : Obtenir la valeur d'un paramètre de l'URL par <code>window.location.search</code></h3> +<h3 id="cinquième_exemple_envoyer_une_chaîne_de_données_au_serveur_en_modifiant_la_propriété_search">Cinquième exemple : envoyer une chaîne de données au serveur en modifiant la propriété search</h3> -<pre class="brush: js">function obtenirParametre (sVar) { - return unescape(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + escape(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1")); +<pre class="brush: js"> +function sendData (sData) { + location.search = sData; } -alert(obtenirParametre("nom")); +// Dans le HTML: <button onclick="sendData('Des données');">Envoyer des données</button> </pre> -<h3 id="Exemple_6_Placer_les_valeurs_obtenues_par_window.location.search_dans_un_objet_nommé_oParametres">Exemple 6 : Placer les valeurs obtenues par <code>window.location.search</code> dans un objet nommé <code>oParametres</code></h3> +<p>On ajoutera "?Des%20données" à l'URL courante qui sera alors envoyée au serveur. Si aucune action n'est entreprise par le serveur, le document courant est rechargé avec la chaîne de recherche modifiée.</p> -<pre class="brush: js">var oParametre = {}; +<h3 id="sixième_exemple_utiliser_les_marques-pages_sans_changer_la_propriété_hash">Sixième exemple : utiliser les marques-pages sans changer la propriété <code>hash</code></h3> + +<pre class="brush: html"> +<!doctype html> + <html> + <head> + <meta charset="UTF-8"/> + <title>Exemple MDN</title> + <script> +function showNode (oNode) { + document.documentElement.scrollTop = oNode.offsetTop; + document.documentElement.scrollLeft = oNode.offsetLeft; +} -if (window.location.search.length > 1) { - for (var aItKey, nKeyId = 0, aCouples = window.location.search.substr(1).split("&"); nKeyId < aCouples.length; nKeyId++) { - aItKey = aCouples[nKeyId].split("="); - oParametre[unescape(aItKey[0])] = aItKey.length > 1 ? unescape(aItKey[1]) : ""; - } +function showBookmark (sBookmark, bUseHash) { + if (arguments.length === 1 || bUseHash) { location.hash = sBookmark; return; } + var oBookmark = document.querySelector(sBookmark); + if (oBookmark) { showNode(oBookmark); } } + </script> + <style> +span.intLink { + cursor: pointer; + color: #0000ff; + text-decoration: underline; +} + </style> + </head> + +<body> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.</p> + <p>Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibendum quis. Cras adipiscing ultricies fermentum. Praesent bibendum condimentum feugiat.</p> + <p id="myBookmark1">[&nbsp;<span class="intLink" onclick="showBookmark('#myBookmark2');">Aller au marque-page n°2</span>&nbsp;]</p> + <p>Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt. Nulla vitae tempor nisl. Etiam congue, elit vitae egestas mollis, ipsum nisi malesuada turpis, a volutpat arcu arcu id risus.</p> + <p>Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.</p> + <p>Aenean viverra varius mauris, sed elementum lacus interdum non. Phasellus sit amet lectus vitae eros egestas pellentesque fermentum eget magna. Quisque mauris nisl, gravida vitae placerat et, condimentum id metus. Nulla eu est dictum dolor pulvinar volutpat. Pellentesque vitae sollicitudin nunc. Donec neque magna, lobortis id egestas nec, sodales quis lectus. Fusce cursus sollicitudin porta. Suspendisse ut tortor in mauris tincidunt rhoncus. Maecenas tincidunt fermentum facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> + <p>Suspendisse turpis nisl, consectetur in lacinia ut, ornare vel mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non lectus eu turpis vulputate cursus. Mauris interdum tincidunt erat id pharetra. Nullam in libero elit, sed consequat lectus. Morbi odio nisi, porta vitae molestie ut, gravida ut nunc. Ut non est dui, id ullamcorper orci. Praesent vel elementum felis. Maecenas ornare, dui quis auctor hendrerit, turpis sem ullamcorper odio, in auctor magna metus quis leo. Morbi at odio ante.</p> + <p>Curabitur est ipsum, porta ac viverra faucibus, eleifend sed eros. In sit amet vehicula tortor. Vestibulum viverra pellentesque erat a elementum. Integer commodo ultricies lorem, eget tincidunt risus viverra et. In enim turpis, porttitor ac ornare et, suscipit sit amet nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel ultrices nibh. Sed commodo aliquam aliquam. Nulla euismod, odio ut eleifend mollis, nisi dui gravida nibh, vitae laoreet turpis purus id ipsum. Donec convallis, velit non scelerisque bibendum, diam nulla auctor nunc, vel dictum risus ipsum sit amet est. Praesent ut nibh sit amet nibh congue pulvinar. Suspendisse dictum porttitor tempor.</p> + <p>Vestibulum dignissim erat vitae lectus auctor ac bibendum eros semper. Integer aliquet, leo non ornare faucibus, risus arcu tristique dolor, a aliquet massa mauris quis arcu. In porttitor, lectus ac semper egestas, ligula magna laoreet libero, eu commodo mauris odio id ante. In hac habitasse platea dictumst. In pretium erat diam, nec consequat eros. Praesent augue mi, consequat sed porttitor at, volutpat vitae eros. Sed pretium pharetra dapibus. Donec auctor interdum erat, lacinia molestie nibh commodo ut. Maecenas vestibulum vulputate felis, ut ullamcorper arcu faucibus in. Curabitur id arcu est. In semper mollis lorem at pellentesque. Sed lectus nisl, vestibulum id scelerisque eu, feugiat et tortor. Pellentesque porttitor facilisis ultricies.</p> + <p id="myBookmark2">[&nbsp;<span class="intLink" onclick="showBookmark('#myBookmark1');">Aller au marque-page n°1</span> | <span class="intLink" onclick="showBookmark('#myBookmark1', false);">Aller au marque-page n°1 sans utiliser location.hash</span> | <span class="intLink" onclick="showBookmark('#myBookmark3');">Aller au marque-page n°3</span>&nbsp;]</p> + <p>Phasellus tempus fringilla nunc, eget sagittis orci molestie vel. Nulla sollicitudin diam non quam iaculis ac porta justo venenatis. Quisque tellus urna, molestie vitae egestas sit amet, suscipit sed sem. Quisque nec lorem eu velit faucibus tristique ut ut dolor. Cras eu tortor ut libero placerat venenatis ut ut massa. Sed quis libero augue, et consequat libero. Morbi rutrum augue sed turpis elementum sed luctus nisl molestie. Aenean vitae purus risus, a semper nisl. Pellentesque malesuada, est id sagittis consequat, libero mauris tincidunt tellus, eu sagittis arcu purus rutrum eros. Quisque eget eleifend mi. Duis pharetra mi ac eros mattis lacinia rutrum ipsum varius.</p> + <p>Fusce cursus pulvinar aliquam. Duis justo enim, ornare vitae elementum sed, porta a quam. Aliquam eu enim eu libero mollis tempus. Morbi ornare aliquam posuere. Proin faucibus luctus libero, sed ultrices lorem sagittis et. Vestibulum malesuada, ante nec molestie vehicula, quam diam mollis ipsum, rhoncus posuere mauris lectus in eros. Nullam feugiat ultrices augue, ac sodales sem mollis in.</p> + <p id="myBookmark3"><em>Voici le marque-page n°3</em></p> + <p>Proin vitae sem non lorem pellentesque molestie. Nam tempus massa et turpis placerat sit amet sollicitudin orci sodales. Pellentesque enim enim, sagittis a lobortis ut, tempus sed arcu. Aliquam augue turpis, varius vel bibendum ut, aliquam at diam. Nam lobortis, dui eu hendrerit pellentesque, sem neque porttitor erat, non dapibus velit lectus in metus. Vestibulum sit amet felis enim. In quis est vitae nunc malesuada consequat nec nec sapien. Suspendisse aliquam massa placerat dui lacinia luctus sed vitae risus. Fusce tempus, neque id ultrices volutpat, mi urna auctor arcu, viverra semper libero sem vel enim. Mauris dictum, elit non placerat malesuada, libero elit euismod nibh, nec posuere massa arcu eu risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna velit, dapibus eget varius feugiat, pellentesque sit amet ligula. Maecenas nulla nisl, facilisis eu egestas scelerisque, mollis eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sed congue mi.</p> + <p>Fusce metus velit, pharetra at vestibulum nec, facilisis porttitor mi. Curabitur ligula sapien, fermentum vel porttitor id, rutrum sit amet magna. Sed sit amet sollicitudin turpis. Aenean luctus rhoncus dolor, et pulvinar ante egestas et. Donec ac massa orci, quis dapibus augue. Vivamus consectetur auctor pellentesque. Praesent vestibulum tincidunt ante sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce purus metus, imperdiet vitae iaculis convallis, bibendum vitae turpis.</p> + <p>Fusce aliquet molestie dolor, in ornare dui sodales nec. In molestie sollicitudin felis a porta. Mauris nec orci sit amet orci blandit tristique congue nec nunc. Praesent et tellus sollicitudin mauris accumsan fringilla. Morbi sodales, justo eu sollicitudin lacinia, lectus sapien ullamcorper eros, quis molestie urna elit bibendum risus. Proin eget tincidunt quam. Nam luctus commodo mauris, eu posuere nunc luctus non. Nulla facilisi. Vivamus eget leo rhoncus quam accumsan fringilla. Aliquam sit amet lorem est. Nullam vel tellus nibh, id imperdiet orci. Integer egestas leo eu turpis blandit scelerisque.</p> + <p>Etiam in blandit tellus. Integer sed varius quam. Vestibulum dapibus mi gravida arcu viverra blandit. Praesent tristique augue id sem adipiscing pellentesque. Sed sollicitudin, leo sed interdum elementum, nisi ante condimentum leo, eget ornare libero diam semper quam. Vivamus augue urna, porta eget ultrices et, dapibus ut ligula. Ut laoreet consequat faucibus. Praesent at lectus ut lectus malesuada mollis. Nam interdum adipiscing eros, nec sodales mi porta nec. Proin et quam vitae sem interdum aliquet. Proin vel odio at lacus vehicula aliquet.</p> + <p>Etiam placerat dui ut sem ornare vel vestibulum augue mattis. Sed semper malesuada mi, eu bibendum lacus lobortis nec. Etiam fringilla elementum risus, eget consequat urna laoreet nec. Etiam mollis quam non sem convallis vel consectetur lectus ullamcorper. Aenean mattis lacus quis ligula mattis eget vestibulum diam hendrerit. In non placerat mauris. Praesent faucibus nunc quis eros sagittis viverra. In hac habitasse platea dictumst. Suspendisse eget nisl erat, ac molestie massa. Praesent mollis vestibulum tincidunt. Fusce suscipit laoreet malesuada. Aliquam erat volutpat. Aliquam dictum elementum rhoncus. Praesent in est massa, pulvinar sodales nunc. Pellentesque gravida euismod mi ac convallis.</p> + <p>Mauris vel odio vel nulla facilisis lacinia. Aliquam ultrices est at leo blandit tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse porttitor adipiscing facilisis. Duis cursus quam iaculis augue interdum porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vulputate magna ac metus pretium condimentum. In tempus, est eget vestibulum blandit, velit massa dignissim nisl, ut scelerisque lorem neque vel velit. Maecenas fermentum commodo viverra. Curabitur a nibh non velit aliquam cursus. Integer semper condimentum tortor a pellentesque. Pellentesque semper, nisl id porttitor vehicula, sem dui feugiat lacus, vitae consequat augue urna vel odio.</p> + <p>Vestibulum id neque nec turpis iaculis pulvinar et a massa. Vestibulum sed nibh vitae arcu eleifend egestas. Mauris fermentum ultrices blandit. Suspendisse vitae lorem libero. Aenean et pellentesque tellus. Morbi quis neque orci, eu dignissim dui. Fusce sollicitudin mauris ac arcu vestibulum imperdiet. Proin ultricies nisl sit amet enim imperdiet eu ornare dui tempus. Maecenas lobortis nisi a tortor vestibulum vel eleifend tellus vestibulum. Donec metus sapien, hendrerit a fermentum id, dictum quis libero.</p> + <p>Pellentesque a lorem nulla, in tempor justo. Duis odio nisl, dignissim sed consequat sit amet, hendrerit ac neque. Nunc ac augue nec massa tempor rhoncus. Nam feugiat, tellus a varius euismod, justo nisl faucibus velit, ut vulputate justo massa eu nibh. Sed bibendum urna quis magna facilisis in accumsan dolor malesuada. Morbi sit amet nunc risus, in faucibus sem. Nullam sollicitudin magna sed sem mollis id commodo libero condimentum. Duis eu massa et lacus semper molestie ut adipiscing sem.</p> + <p>Sed id nulla mi, eget suscipit eros. Aliquam tempus molestie rutrum. In quis varius elit. Nullam dignissim neque nec velit vulputate porttitor. Mauris ac ligula sit amet elit fermentum rhoncus. In tellus urna, pulvinar quis condimentum ut, porta nec justo. In hac habitasse platea dictumst. Proin volutpat elit id quam molestie ac commodo lacus sagittis. Quisque placerat, augue tempor placerat pulvinar, nisi nisi venenatis urna, eget convallis eros velit quis magna. Suspendisse volutpat iaculis quam, ut tristique lacus luctus quis.</p> + <p>Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.</p> +</body> +</html> +</pre> -// alert(oParametre.votreValeur); +<p>La même chose mais avec un défilement animé :</p> + +<pre class="brush: js"> +var showBookmark = (function () { + var _useHash, _scrollX, _scrollY, _nodeX, _nodeY, _itFrame, _scrollId = -1, _bookMark, + /* + * nDuration: la durée, exprimée en millisecondes, pour chaque frame + * nFrames: le nombre de frames pour chaque défilement + */ + nDuration = 200, nFrames = 10; + + function _next () { + if (_itFrame > nFrames) { clearInterval(_scrollId); _scrollId = -1; return; } + _isBot = true; + document.documentElement.scrollTop = Math.round(_scrollY + (_nodeY - _scrollY) * _itFrame / nFrames); + document.documentElement.scrollLeft = Math.round(_scrollX + (_nodeX - _scrollX) * _itFrame / nFrames); + if (_useHash && _itFrame === nFrames) { location.hash = _bookMark; } + _itFrame++; + } + + function _chkOwner () { + if (_isBot) { _isBot = false; return; } + if (_scrollId > -1) { clearInterval(_scrollId); _scrollId = -1; } + } + + if (window.addEventListener) { window.addEventListener("scroll", _chkOwner, false); } + else if (window.attachEvent) { window.attachEvent("onscroll", _chkOwner); } + + return function (sBookmark, bUseHash) { + var oNode = document.querySelector(sBookmark); + _scrollY = document.documentElement.scrollTop; + _scrollX = document.documentElement.scrollLeft; + _bookMark = sBookmark; + _useHash = bUseHash === true; + _nodeX = oNode.offsetLeft; + _nodeY = oNode.offsetTop; + _itFrame = 1; + if (_scrollId === -1) { _scrollId = setInterval(_next, Math.round(nDuration / nFrames)); } + }; +})(); </pre> -<p>… la même chose avec un constructeur anonyme :</p> +<h2 id="spécifications">Spécifications</h2> -<pre class="brush: js">var oParametre = new (function (sRecherche) { - if (sRecherche.length > 1) { - for (var aItKey, nKeyId = 0, aCouples = sRecherche.substr(1).split("&"); nKeyId < aCouples.length; nKeyId++) { - aItKey = aCouples[nKeyId].split("="); - this[unescape(aItKey[0])] = aItKey.length > 1 ? unescape(aItKey[1]) : ""; - } - } -})(window.location.search); +<p>{{Specifications}}</p> -// alert(oParametre.votreValeur); -</pre> +<h2 id="compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat}}</p> -<h2 id="Specifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', "history.html#the-location-interface", - "Window.location")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Aucun changement par rapport à {{SpecName("HTML5 W3C")}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", - "Window.location")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Window.location")}}</p> - -<h2 id="See_also">Voir aussi</h2> +<h2 id="voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur" title="en/DOM/Manipulating the browser history">Manipuler l'historique du navigateur</a></li> - <li>{{domxref('window.history')}}</li> - <li><a href="/en-US/docs/Web/Reference/Events/hashchange" title="/en-US/docs/DOM/Mozilla_event_reference/hashchange">hashchange</a></li> + <li>L'interface qui décrit la valeur renvoyée par cette propriété : <a href="/fr/docs/Web/API/Location"><code>Location</code></a>.</li> + <li>Une information similaire, mais attachée au document courant : <a href="/fr/docs/Web/API/Document/location"><code>Document.location</code></a>.</li> + <li><a href="/fr/docs/Web/API/History_API">Manipuler l'historique du navigateur avec l'API History</a></li> + <li><a href="/fr/docs/Web/API/Window/hashchange_event"><code>hashchange</code></a></li> </ul> diff --git a/files/fr/web/css/--_star_/index.html b/files/fr/web/css/--_star_/index.html index 99a4c1f7b0..456b7022d5 100644 --- a/files/fr/web/css/--_star_/index.html +++ b/files/fr/web/css/--_star_/index.html @@ -42,7 +42,7 @@ translation_of: Web/CSS/--* <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[2,3]">:root { +<pre class="brush: css">:root { --premiere-couleur: #488cff; --seconde-couleur: #ffff8c; } diff --git a/files/fr/web/css/-moz-context-properties/index.html b/files/fr/web/css/-moz-context-properties/index.html index edda2fb4cc..c7cf7e321f 100644 --- a/files/fr/web/css/-moz-context-properties/index.html +++ b/files/fr/web/css/-moz-context-properties/index.html @@ -67,7 +67,7 @@ translation_of: Web/CSS/-moz-context-properties <p>Ici, l'attribut <code>src</code> de l'image correspond à une URI de données qui contient une simple image SVG. L'élément <code><rect></code> est paramétré afin de récupérer les valeurs <code>fill</code> et <code>stroke</code> telles que fournies par les propriétés {{cssxref("fill")}} et {{cssxref("stroke")}} de l'élément <code><img></code> grâce aux mots-clés <code>context-fill</code>/<code>context-stroke</code>. On utilise aussi une couleur de secours pour le remplissage (<code>fill</code>) (qui sera utilisée si le SVG est chargé en dehors de tout contexte, dans un nouvel onglet par exemple). On notera que, si une couleur est directement définie sur le SVG et qu'une couleur contextuelle (ici celle fournie par l'image) est également indiquée, ce sera cette dernière qui l'emportera.</p> <div class="note"> -<p><strong>Note </strong>: vous pouvez consulter <a href="https://mdn.github.io/css-examples/moz-context-properties/">un exemple complet sur notre dépôt Github</a>.</p> +<p><strong>Note :</strong> vous pouvez consulter <a href="https://mdn.github.io/css-examples/moz-context-properties/">un exemple complet sur notre dépôt Github</a>.</p> </div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/-moz-float-edge/index.html b/files/fr/web/css/-moz-float-edge/index.html index 0d0eed3a7d..a81710c8d9 100644 --- a/files/fr/web/css/-moz-float-edge/index.html +++ b/files/fr/web/css/-moz-float-edge/index.html @@ -58,7 +58,7 @@ translation_of: Web/CSS/-moz-float-edge <h3 id="HTML">HTML</h3> -<pre class="html prettyprint"><div class="box"> +<pre class="html"><div class="box"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. diff --git a/files/fr/web/css/-moz-force-broken-image-icon/index.html b/files/fr/web/css/-moz-force-broken-image-icon/index.html index df4536f14d..58e1ca993b 100644 --- a/files/fr/web/css/-moz-force-broken-image-icon/index.html +++ b/files/fr/web/css/-moz-force-broken-image-icon/index.html @@ -19,7 +19,8 @@ translation_of: Web/CSS/-moz-force-broken-image-icon <dl> <dt>{{cssxref("<integer>")}}</dt> <dd>Une valeur de 1 indique qu'une icône d'image brisée est affichée même si l'image possède un attribut {{HTMLElement("img", "<code>alt</code>", "#attr-alt")}}. <code>0</code> indique que seul l'attribut <code>alt</code> doit être affiché. - <div class="note"><strong>Note :</strong> Même si la valeur est <code>1</code>, l'attribut <code>alt</code> sera affiché. Voir ci-après.</div> + <div class="note"> + <p><strong>Note :</strong> Même si la valeur est <code>1</code>, l'attribut <code>alt</code> sera affiché. Voir ci-après.</p></div> </dd> </dl> @@ -45,7 +46,9 @@ translation_of: Web/CSS/-moz-force-broken-image-icon <p>{{EmbedLiveSample('Exemples','125','125','/files/4619/broken%20image%20link.png')}}</p> -<div class="note"><strong>Note :</strong> Si <code>-moz-force-broken-image-icon</code> a la valeur <code>1</code> et que ni la hauteur ni largeur de l'image ne sont spécifiées alors l'image ne sera pas affichée et l'attribut <code>alt</code> sera masqué.</div> +<div class="note"> + <p><strong>Note :</strong> Si <code>-moz-force-broken-image-icon</code> a la valeur <code>1</code> et que ni la hauteur ni largeur de l'image ne sont spécifiées alors l'image ne sera pas affichée et l'attribut <code>alt</code> sera masqué.</p> +</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/-moz-outline-radius-bottomleft/index.html b/files/fr/web/css/-moz-outline-radius-bottomleft/index.html index 13259534a0..4b4cbfb209 100644 --- a/files/fr/web/css/-moz-outline-radius-bottomleft/index.html +++ b/files/fr/web/css/-moz-outline-radius-bottomleft/index.html @@ -31,7 +31,7 @@ translation_of: Web/CSS/-moz-outline-radius-bottomleft <p>{{EmbedLiveSample("Exemples")}}</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.</p> </div> diff --git a/files/fr/web/css/-moz-outline-radius-bottomright/index.html b/files/fr/web/css/-moz-outline-radius-bottomright/index.html index 831cb29e39..8c4e1a813a 100644 --- a/files/fr/web/css/-moz-outline-radius-bottomright/index.html +++ b/files/fr/web/css/-moz-outline-radius-bottomright/index.html @@ -31,7 +31,7 @@ translation_of: Web/CSS/-moz-outline-radius-bottomright <p>{{EmbedLiveSample("Example")}}</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.</p> </div> diff --git a/files/fr/web/css/-moz-outline-radius-topleft/index.html b/files/fr/web/css/-moz-outline-radius-topleft/index.html index 28fef48dc0..825b0b8e08 100644 --- a/files/fr/web/css/-moz-outline-radius-topleft/index.html +++ b/files/fr/web/css/-moz-outline-radius-topleft/index.html @@ -31,7 +31,7 @@ translation_of: Web/CSS/-moz-outline-radius-topleft <p>{{EmbedLiveSample("Exemples")}}</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.</p> </div> diff --git a/files/fr/web/css/-moz-outline-radius-topright/index.html b/files/fr/web/css/-moz-outline-radius-topright/index.html index 962f74ece2..df414e6d10 100644 --- a/files/fr/web/css/-moz-outline-radius-topright/index.html +++ b/files/fr/web/css/-moz-outline-radius-topright/index.html @@ -31,7 +31,7 @@ translation_of: Web/CSS/-moz-outline-radius-topright <p>{{EmbedLiveSample("Exemples")}}</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.</p> </div> diff --git a/files/fr/web/css/-moz-outline-radius/index.html b/files/fr/web/css/-moz-outline-radius/index.html index 4662069831..f91a602fcb 100644 --- a/files/fr/web/css/-moz-outline-radius/index.html +++ b/files/fr/web/css/-moz-outline-radius/index.html @@ -36,7 +36,9 @@ translation_of: Web/CSS/-moz-outline-radius <h3 id="Valeurs">Valeurs</h3> -<div class="note"><strong>Note :</strong> Les valeurs pour les coefficients elliptiques et les valeurs de type <code><percentage></code> respectent la même syntaxe que pour {{cssxref("border-radius")}}.</div> +<div class="note"> + <p><strong>Note :</strong> Les valeurs pour les coefficients elliptiques et les valeurs de type <code><percentage></code> respectent la même syntaxe que pour {{cssxref("border-radius")}}.</p> +</div> <p>Une, deux, trois ou quatre valeurs <code><outline-radius></code> dont chacune peut être de type :</p> @@ -93,7 +95,7 @@ translation_of: Web/CSS/-moz-outline-radius <p>{{EmbedLiveSample('Exemples', '200', '200')}}</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.</p> </div> diff --git a/files/fr/web/css/-moz-user-focus/index.html b/files/fr/web/css/-moz-user-focus/index.html index 76049ca339..62492eb50c 100644 --- a/files/fr/web/css/-moz-user-focus/index.html +++ b/files/fr/web/css/-moz-user-focus/index.html @@ -24,7 +24,9 @@ translation_of: Web/CSS/-moz-user-focus <p>En utilisant la valeur <code>ignore</code>, on peut désactiver la prise de focus sur l'élément (l'utilisateur ne pourra pas activer l'élément) et l'élément sera sauté lors de la navigation à la tabulation.</p> -<div class="note"><strong>Note :</strong> Cette propriété ne fonctionne pas pour les éléments XUL {{XULElem("textbox")}} car l'élément <code>textbox</code> en tant que tel ne reçoit jamais le focus. À la place, XBL crée un élément HTML {{HTMLElement("input")}} anonyme à l'intérieur du <code>textbox</code> et que l'élément reçoit le focus. On peut empêcher le <code>textbox</code> de prendre le focus clavier en passant son index de tabulation à <code>-1</code>, pour l'empêcher de prendre le focus souris, on pourra utiliser les événements <code>mousedown</code>.</div> +<div class="note"> + <p><strong>Note :</strong> Cette propriété ne fonctionne pas pour les éléments XUL {{XULElem("textbox")}} car l'élément <code>textbox</code> en tant que tel ne reçoit jamais le focus. À la place, XBL crée un élément HTML {{HTMLElement("input")}} anonyme à l'intérieur du <code>textbox</code> et que l'élément reçoit le focus. On peut empêcher le <code>textbox</code> de prendre le focus clavier en passant son index de tabulation à <code>-1</code>, pour l'empêcher de prendre le focus souris, on pourra utiliser les événements <code>mousedown</code>.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/-webkit-box-reflect/index.html b/files/fr/web/css/-webkit-box-reflect/index.html index d84d50ceb8..856a9ca5b0 100644 --- a/files/fr/web/css/-webkit-box-reflect/index.html +++ b/files/fr/web/css/-webkit-box-reflect/index.html @@ -30,7 +30,9 @@ translation_of: Web/CSS/-webkit-box-reflect -webkit-box-reflect: unset; </pre> -<div class="warning"><strong>Attention !</strong> Cette fonctionnalité ne doit pas être utilisée sur le Web. Pour créer des effets de reflet sur le Web, on pourra utiliser la fonction CSS standard {{cssxref("element", "element()")}}.</div> +<div class="warning"> + <p><strong>Attention :</strong> Cette fonctionnalité ne doit pas être utilisée sur le Web. Pour créer des effets de reflet sur le Web, on pourra utiliser la fonction CSS standard {{cssxref("element()", "element()")}}.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -51,7 +53,7 @@ translation_of: Web/CSS/-webkit-box-reflect <h2 id="Spécifications">Spécifications</h2> -<p>Cette propriété n'est pas en voie de standardisation et ne fera pas partie de CSS. Pour créer des reflets en CSS, on pourra utiliser la fonction standard {{cssxref("element", "element()")}}.</p> +<p>Cette propriété n'est pas en voie de standardisation et ne fera pas partie de CSS. Pour créer des reflets en CSS, on pourra utiliser la fonction standard {{cssxref("element()", "element()")}}.</p> <p>{{cssinfo}}</p> @@ -62,7 +64,7 @@ translation_of: Web/CSS/-webkit-box-reflect <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="external" href="https://developer.apple.com/library/safari/documentation/appleapplications/reference/safaricssref/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW16">La documentation Apple</a></li> + <li><a href="https://developer.apple.com/library/safari/documentation/appleapplications/reference/safaricssref/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW16">La documentation Apple</a></li> <li><a href="https://www.webkit.org/blog/182/css-reflections/">La spécification WebKit</a></li> - <li>L'article de Lea Verou sur les réflexions CSS <a class="external" href="https://lea.verou.me/2011/06/css-reflections-for-firefox-with-moz-element-and-svg-masks/">en utilisant les fonctionnalités en voie de standardisation</a></li> + <li>L'article de Lea Verou sur les réflexions CSS <a href="https://lea.verou.me/2011/06/css-reflections-for-firefox-with-moz-element-and-svg-masks/">en utilisant les fonctionnalités en voie de standardisation</a></li> </ul> diff --git a/files/fr/web/css/-webkit-line-clamp/index.html b/files/fr/web/css/-webkit-line-clamp/index.html index d869807051..26895d4690 100644 --- a/files/fr/web/css/-webkit-line-clamp/index.html +++ b/files/fr/web/css/-webkit-line-clamp/index.html @@ -16,7 +16,7 @@ translation_of: Web/CSS/-webkit-line-clamp <p>Lorsqu'on applique ce style à une ancre, la troncature pourra intervenir au milieu du texte (et pas nécessairement à la fin).</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Au départ, cette propriété était implémentée dans WebKit avec quelques problèmes. Elle a été standardisée à des fins de support pour les sites historiques. Le module de spécification <a href="https://www.w3.org/TR/css-overflow-3/#propdef--webkit-line-clamp">CSS Overflow Module Level 3</a> définit également une propriété {{cssxref("line-clamp")}} qui doit remplacer <code>-webkit-line-clamp</code>.</p> </div> diff --git a/files/fr/web/css/-webkit-mask-attachment/index.html b/files/fr/web/css/-webkit-mask-attachment/index.html index 1a65e9de55..f278d89b0f 100644 --- a/files/fr/web/css/-webkit-mask-attachment/index.html +++ b/files/fr/web/css/-webkit-mask-attachment/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/-webkit-mask-attachment --- <div>{{CSSRef}}{{Non-standard_header}}</div> -<p id="Summary">Si la propriété {{cssxref("-webkit-mask-image")}} est définie, <strong><code>-webkit-mask-attachment</code></strong> permet de déterminer si la position de l'image est fixe par rapport à la zone d'affichage ou si elle défile avec le bloc qui l'englobe.</p> +<p>Si la propriété {{cssxref("-webkit-mask-image")}} est définie, <strong><code>-webkit-mask-attachment</code></strong> permet de déterminer si la position de l'image est fixe par rapport à la zone d'affichage ou si elle défile avec le bloc qui l'englobe.</p> <pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */ -webkit-mask-attachment: scroll; diff --git a/files/fr/web/css/-webkit-text-fill-color/index.html b/files/fr/web/css/-webkit-text-fill-color/index.html index f0d8ef51c0..f00bc2ae33 100644 --- a/files/fr/web/css/-webkit-text-fill-color/index.html +++ b/files/fr/web/css/-webkit-text-fill-color/index.html @@ -41,7 +41,7 @@ translation_of: Web/CSS/-webkit-text-fill-color <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[4]">p { +<pre class="brush: css">p { margin: 0; font-size: 3em; -webkit-text-fill-color: green; @@ -74,8 +74,7 @@ translation_of: Web/CSS/-webkit-text-fill-color <td>Définition initiale dans un standard.</td> </tr> <tr> - <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-fill-color" hreflang="en" lang="en">Référence CSS Safari<br> - <small lang="en-US">'-webkit-text-fill-color' dans ce document.</small></a></td> + <td><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-fill-color">Référence CSS Safari -webkit-text-fill-color' dans ce document.</a></td> <td>Documentation non-officielle, non-standard.</td> <td>Documentation initiale.</td> </tr> diff --git a/files/fr/web/css/-webkit-text-stroke-color/index.html b/files/fr/web/css/-webkit-text-stroke-color/index.html index 9ab30e149d..8717f6e1aa 100644 --- a/files/fr/web/css/-webkit-text-stroke-color/index.html +++ b/files/fr/web/css/-webkit-text-stroke-color/index.html @@ -57,14 +57,10 @@ translation_of: Web/CSS/-webkit-text-stroke-color } </pre> -<div class="hidden"> -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var colorPicker = document.querySelector("input"); +<pre class="brush: js hidden">var colorPicker = document.querySelector("input"); colorPicker.addEventListener("change", function(evt) { document.querySelector("p").style.webkitTextStrokeColor = evt.target.value; });</pre> -</div> <h3 id="Résultat">Résultat</h3> @@ -87,8 +83,7 @@ colorPicker.addEventListener("change", function(evt) { <td>Définition initiale dans un standard.</td> </tr> <tr> - <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-color" hreflang="en" lang="en">Référence CSS Safari<br> - <small lang="en-US">'-webkit-text-stroke-color' dans ce document.</small></a></td> + <td><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-color">Référence CSS Safari -webkit-text-stroke-color dans ce document.</a></td> <td>Documentation non-officielle, non-standard.</td> <td>Documentation initiale.</td> </tr> diff --git a/files/fr/web/css/-webkit-text-stroke-width/index.html b/files/fr/web/css/-webkit-text-stroke-width/index.html index c79d9aad32..9e34011338 100644 --- a/files/fr/web/css/-webkit-text-stroke-width/index.html +++ b/files/fr/web/css/-webkit-text-stroke-width/index.html @@ -96,8 +96,7 @@ translation_of: Web/CSS/-webkit-text-stroke-width <td>Définition initiale dans un standard.</td> </tr> <tr> - <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-width" hreflang="en" lang="en">Référence CSS Safari<br> - <small lang="en-US">'-webkit-text-stroke-width' dans ce document.</small></a></td> + <td><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-width">Référence CSS Safari -webkit-text-stroke-width dans ce document.</a></td> <td>Documentation non-officielle, non-standard.</td> <td>Documentation initiale.</td> </tr> diff --git a/files/fr/web/css/-webkit-text-stroke/index.html b/files/fr/web/css/-webkit-text-stroke/index.html index 2f26e7941b..1b44d52d3b 100644 --- a/files/fr/web/css/-webkit-text-stroke/index.html +++ b/files/fr/web/css/-webkit-text-stroke/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/-webkit-text-stroke <p>La propriété <strong><code>-webkit-text-stroke</code></strong> permet de définir l'épaisseur et la couleur du contour utilisé pour les lettres d'un texte. Cette propriété est une propriété raccourcie qui permet de définir les propriétés {{cssxref("-webkit-text-stroke-width")}} et {{cssxref("-webkit-text-stroke-color")}}.</p> -<pre class="brush:css no-line-numbers notranslate">/* Valeurs de largeur et de couleur */ +<pre class="brush:css no-line-numbers">/* Valeurs de largeur et de couleur */ -webkit-text-stroke: 4px navy; /* Valeurs globales */ @@ -40,7 +40,7 @@ translation_of: Web/CSS/-webkit-text-stroke <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[4] notranslate">#exemple { +<pre class="brush: css">#exemple { font-size: 3em; margin: 0; -webkit-text-stroke: 2px red; @@ -48,7 +48,7 @@ translation_of: Web/CSS/-webkit-text-stroke <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p id="exemple">Le contour de ce texte est rouge.</p></pre> +<pre class="brush: html"><p id="exemple">Le contour de ce texte est rouge.</p></pre> <h3 id="Résultat">Résultat</h3> @@ -71,8 +71,7 @@ translation_of: Web/CSS/-webkit-text-stroke <td>Définition initiale dans un standard.</td> </tr> <tr> - <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_text_stroke" hreflang="en" lang="en">Référence CSS Safari<br> - <small lang="en-US">'-webkit-text-stroke' dans ce document.</small></a></td> + <td><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_text_stroke">Référence CSS Safari -webkit-text-stroke dans ce document.</a></td> <td>Documentation non-officielle, non-standard.</td> <td>Documentation initiale.</td> </tr> diff --git a/files/fr/web/css/@counter-style/fallback/index.html b/files/fr/web/css/@counter-style/fallback/index.html index a1ac0eea87..92c54c2c55 100644 --- a/files/fr/web/css/@counter-style/fallback/index.html +++ b/files/fr/web/css/@counter-style/fallback/index.html @@ -41,7 +41,7 @@ fallback: custom-gangnam-style; <h3 id="HTML">HTML</h3> -<pre class="brush: html" id="htmlOutput"><ul class="exemple"> +<pre class="brush: html"><ul class="exemple"> <li>Un</li> <li>Deux</li> <li>Trois</li> diff --git a/files/fr/web/css/@counter-style/index.html b/files/fr/web/css/@counter-style/index.html index c9c649758c..6a557b88d4 100644 --- a/files/fr/web/css/@counter-style/index.html +++ b/files/fr/web/css/@counter-style/index.html @@ -152,7 +152,7 @@ ul { <h3 id="Notes_relatives_à_Quantum">Notes relatives à Quantum</h3> <ul> - <li>Gecko permettait d'utiliser <code>none</code> comme valeur pour les descripteurs <code>system</code> et <code>fallback</code> de <code>@counter-style</code> alors que ce devrait être invalide selon la spécification. Le nouveau moteur CSS de Firefox, Quantum CSS (aussi appelé <a class="external external-icon" href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, prévu pour Firefox 57) a résolu ce bug ({{bug(1377414)}}).</li> + <li>Gecko permettait d'utiliser <code>none</code> comme valeur pour les descripteurs <code>system</code> et <code>fallback</code> de <code>@counter-style</code> alors que ce devrait être invalide selon la spécification. Le nouveau moteur CSS de Firefox, Quantum CSS (aussi appelé <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, prévu pour Firefox 57) a résolu ce bug ({{bug(1377414)}}).</li> </ul> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/@counter-style/range/index.html b/files/fr/web/css/@counter-style/range/index.html index 29d5eeda87..4bc4ce55cd 100644 --- a/files/fr/web/css/@counter-style/range/index.html +++ b/files/fr/web/css/@counter-style/range/index.html @@ -46,8 +46,7 @@ range: infinite 6, 10 infinite; <dt><code>auto</code></dt> <dd>L'intervalle dépend du système choisi pour le compteur comme indiqué ci-avant.</dd> <dt><code>[ [ | infinite ]{2} ]#</code></dt> - <dd>Une liste d'intervalles séparées par des virgule. Pour chaque intervalle, la première valeur représente le minorant de l'intervalle inférieure et la deuxième représente le majorant. L'intervalle est un segment et inclue donc le minorant et le majorant. Si le mot-clé <code>infinite</code> est utilisé en premier, il indique l'infini négatif comme borne inférieure et s'il est utilisé comme seconde valeur pour l'intervalle, il correspondra à l'infini positif (utilisé alors comme borne supérieure). L'intervalle sur lequel s'applique le compteur défini correspond à l'union des intervalles qui composent cette liste.</dd> - <dd>Si un minorant indiqué est supérieur à un majorant, le descripteur sera considéré comme invalide et sera ignoré.</dd> + <dd>Une liste d'intervalles séparées par des virgule. Pour chaque intervalle, la première valeur représente le minorant de l'intervalle inférieure et la deuxième représente le majorant. L'intervalle est un segment et inclue donc le minorant et le majorant. Si le mot-clé <code>infinite</code> est utilisé en premier, il indique l'infini négatif comme borne inférieure et s'il est utilisé comme seconde valeur pour l'intervalle, il correspondra à l'infini positif (utilisé alors comme borne supérieure). L'intervalle sur lequel s'applique le compteur défini correspond à l'union des intervalles qui composent cette liste. Si un minorant indiqué est supérieur à un majorant, le descripteur sera considéré comme invalide et sera ignoré.</dd> </dl> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> diff --git a/files/fr/web/css/@counter-style/system/index.html b/files/fr/web/css/@counter-style/system/index.html index 847ba6fa2f..07ba664616 100644 --- a/files/fr/web/css/@counter-style/system/index.html +++ b/files/fr/web/css/@counter-style/system/index.html @@ -38,31 +38,21 @@ system: extends decimal; <dl> <dt><code>cyclic</code></dt> - <dd>Le système itère et boucle parmi la liste des symboles fournis. Une fois que la fin de la liste est atteinte, le système reprend au début de la liste. Ce système est pertinent lorsqu'on a un seul symbole ou une liste non numérotée avec des puces. Afin que le style du compteur soit valide, il faut au moins définir un symbole via le descripteur {{cssxref("symbols")}}.</dd> + <dd>Le système itère et boucle parmi la liste des symboles fournis. Une fois que la fin de la liste est atteinte, le système reprend au début de la liste. Ce système est pertinent lorsqu'on a un seul symbole ou une liste non numérotée avec des puces. Afin que le style du compteur soit valide, il faut au moins définir un symbole via le descripteur {{cssxref("symbols()")}}.</dd> <dt><code>fixed</code></dt> <dd>Cette valeur permet de définir un ensemble fini de symboles. Une fois que le système a utilisé les différents symboles, il poursuivra en utilisant le système de secours. Afin que le style du compteur soit valide, il faut qu'au moins un symbole soit défini avec le descripteur <code>symbols</code>. On peut éventuellement ajouter un entier (valeur {{cssxref("integer")}}) après le système et qui définit la valeur du premier symbole. La valeur par défaut de ce paramètre (s'il est absent) est <code>1</code>.</dd> <dt><code>symbolic</code></dt> <dd>Le système itère sur la liste des symboles et à chaque boucle, on double, triple, etc. la représentation. Ainsi, si les symboles fournis sont ◽ et ◾, au cycle suivant, on aura ◽◽ puis ◾◾, ensuite ◽◽◽ et ◾◾◾ et ainsi de suite. Afin que le style du compteur soit valide, il faut définir au moins un symbole avec le descripteur <code>symbols</code>. Ce système de compteur ne fonctionne que pour les valeurs positives.</dd> <dt><code>alphabetic</code></dt> - <dd>Le système interprète les symboles comme les chiffres d'un système de numérotation alphabétique. Ainsi, si les lettres <code>a</code> à <code>z</code> sont définies comme symbole dans un style de compteur dont le système est <code>alphabetic</code>, les 26 premières représentations du compteur seront <code>a</code>, <code>b</code>, etc. jusqu'à <code>z</code> (jusqu'ici, le comportement est identique à celui obtenu grâce à <code>symbolic</code>) mais ensuite, le système poursuivra avec <code>aa</code>, <code>ab</code>, <code>ac</code>, etc.<br> - <br> + <dd>Le système interprète les symboles comme les chiffres d'un système de numérotation alphabétique. Ainsi, si les lettres <code>a</code> à <code>z</code> sont définies comme symbole dans un style de compteur dont le système est <code>alphabetic</code>, les 26 premières représentations du compteur seront <code>a</code>, <code>b</code>, etc. jusqu'à <code>z</code> (jusqu'ici, le comportement est identique à celui obtenu grâce à <code>symbolic</code>) mais ensuite, le système poursuivra avec <code>aa</code>, <code>ab</code>, <code>ac</code>, etc. Pour que le style du compteur soit valide, il faut qu'au moins deux symboles soient fournis. Le premier symbole est interprété comme <code>1</code>, le suivant comme <code>2</code> et ainsi de suite. Ce système ne fonctionne que pour les valeurs positives.</dd> <dt><code>numeric</code></dt> - <dd>Les symboles sont interprétés comme les chiffres d'un <a href="https://fr.wikipedia.org/wiki/Notation_positionnelle">système de notation positionnelle</a>. Ce système est très proche de celui qu'on peut obtenir avec <code>alphabetic</code> sauf que, pour ce dernier, le premier symbole fourni par <code>symbols</code> sera interprété comme <code>1</code>, le suivant comme <code>2</code> et ainsi de suite alors que pour <code>numeric</code>, le premier symbole est interprété comme 0, le suivant comme <code>1</code>, puis <code>2</code> etc.<br> - <br> - Pour que le style de compteur soit valide, il faut qu'au moins deux symboles soient définis avec <code>symbols</code>. Le premier symbole qui est fourni sera interprété comme <code>0</code>. Comme on peut le voir dans l'exemple ci-après, si on utilise les chiffres de <code>0</code> à <code>9</code> comme symboles, on obtiendra le même résultat qu'avec le système décimal.</dd> + <dd>Les symboles sont interprétés comme les chiffres d'un <a href="https://fr.wikipedia.org/wiki/Notation_positionnelle">système de notation positionnelle</a>. Ce système est très proche de celui qu'on peut obtenir avec <code>alphabetic</code> sauf que, pour ce dernier, le premier symbole fourni par <code>symbols</code> sera interprété comme <code>1</code>, le suivant comme <code>2</code> et ainsi de suite alors que pour <code>numeric</code>, le premier symbole est interprété comme 0, le suivant comme <code>1</code>, puis <code>2</code> etc. Pour que le style de compteur soit valide, il faut qu'au moins deux symboles soient définis avec <code>symbols</code>. Le premier symbole qui est fourni sera interprété comme <code>0</code>. Comme on peut le voir dans l'exemple ci-après, si on utilise les chiffres de <code>0</code> à <code>9</code> comme symboles, on obtiendra le même résultat qu'avec le système décimal.</dd> <dt><code>additive</code></dt> - <dd>Ce système peut être utilisé pour représenter <a href="https://fr.wikipedia.org/wiki/Notation_additive_(num%C3%A9ration)">des systèmes de numérotations additives</a> telles que les chiffres romains qui, plutôt que de réutiliser des chiffres pour obtenir différentes valeurs, définissent des chiffres supplémentaires pour représenter de grandes valeurs. La valeur d'un nombre représenté dans ce sytème est obtenue en sommant les différents chiffres qui le représentent.<br> - <br> - Le descripteur supplémentaire {{cssxref("additive-symbols")}} doit être utilisé avec au moins un tuple additif pour que le style de compteur soit considéré comme valide. Un tuple additif est composé d'un symbole de compteur et d'un poids entier positif. Les tuples additifs doivent être définis dans l'ordre décroissant de leurs poids afin que le système soit valide.</dd> - <dd> - <p>On voit dans l'exemple ci-après que <code>range</code> est utilisé afin de définir l'intervalle de validité. Une fois en dehors de cet intervalle, on utilisera la représentation classique avec <code>decimal</code> (le style de secours). Si on veut utiliser les chiffres romains, on pourra utiliser les valeurs de style prédéfinies comme <code>upper-roman</code> ou <code>lower-roman</code> afin d'éviter de réinventer la roue.</p> + <dd>Ce système peut être utilisé pour représenter <a href="https://fr.wikipedia.org/wiki/Notation_additive_(num%C3%A9ration)">des systèmes de numérotations additives</a> telles que les chiffres romains qui, plutôt que de réutiliser des chiffres pour obtenir différentes valeurs, définissent des chiffres supplémentaires pour représenter de grandes valeurs. La valeur d'un nombre représenté dans ce sytème est obtenue en sommant les différents chiffres qui le représentent. Le descripteur supplémentaire {{cssxref("additive-symbols")}} doit être utilisé avec au moins un tuple additif pour que le style de compteur soit considéré comme valide. Un tuple additif est composé d'un symbole de compteur et d'un poids entier positif. Les tuples additifs doivent être définis dans l'ordre décroissant de leurs poids afin que le système soit valide. On voit dans l'exemple ci-après que <code>range</code> est utilisé afin de définir l'intervalle de validité. Une fois en dehors de cet intervalle, on utilisera la représentation classique avec <code>decimal</code> (le style de secours). Si on veut utiliser les chiffres romains, on pourra utiliser les valeurs de style prédéfinies comme <code>upper-roman</code> ou <code>lower-roman</code> afin d'éviter de réinventer la roue. </dd> <dt><code>extends</code></dt> - <dd>Ce mot-clé permet aux auteurs d'utiliser l'algorithme d'un autre style de compteur et de modifier ses autres caractéristiques. Si une règle d'un style de compteur utilise le système <code>extends</code> et que certains de ces descripteurs ne font pas définis, leurs valeurs seront prises depuis le style de compteur indiqué. Si le nom du style référencé n'existe pas, le style de secours (décimal) sera utilisé.<br> - <br> - Pour que le style de compteur soit valide, il ne doit pas contenir de descripteur <code>symbols</code> ou <code>additive-symbols</code>. Si, selon les différents styles de compteur, on a un cycle de référence (A qui pointe vers B qui pointe vers C qui pointe vers A par exemple), l'agent utilisateur considèrera que tous les styles étendent le style décimal.</dd> - <dd>Dans l'exemple final, le style de compteur utiliser les valeurs du système de compteur <code>lower-alpha</code> mais retire le point comme suffixe et entour les caractères entre parenthèses (pour obtenir <code>(a)</code> <code>(b)</code> etc).</dd> + <dd>Ce mot-clé permet aux auteurs d'utiliser l'algorithme d'un autre style de compteur et de modifier ses autres caractéristiques. Si une règle d'un style de compteur utilise le système <code>extends</code> et que certains de ces descripteurs ne font pas définis, leurs valeurs seront prises depuis le style de compteur indiqué. Si le nom du style référencé n'existe pas, le style de secours (décimal) sera utilisé. Pour que le style de compteur soit valide, il ne doit pas contenir de descripteur <code>symbols</code> ou <code>additive-symbols</code>. Si, selon les différents styles de compteur, on a un cycle de référence (A qui pointe vers B qui pointe vers C qui pointe vers A par exemple), l'agent utilisateur considèrera que tous les styles étendent le style décimal. Dans l'exemple final, le style de compteur utiliser les valeurs du système de compteur <code>lower-alpha</code> mais retire le point comme suffixe et entour les caractères entre parenthèses (pour obtenir <code>(a)</code> <code>(b)</code> etc).</dd> </dl> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -334,5 +324,5 @@ system: extends decimal; <li>{{cssxref("list-style")}},</li> <li>{{cssxref("list-style-image")}},</li> <li>{{cssxref("list-style-position")}},</li> - <li>{{cssxref("symbols", "symbols()")}}, la notation fonctionnelle utilisée pour créer des styles de compteur anonymes.</li> + <li>{{cssxref("symbols()", "symbols()")}}, la notation fonctionnelle utilisée pour créer des styles de compteur anonymes.</li> </ul> diff --git a/files/fr/web/css/@font-face/ascent-override/index.html b/files/fr/web/css/@font-face/ascent-override/index.html index 54a738dcdc..dbbeb8eaa3 100644 --- a/files/fr/web/css/@font-face/ascent-override/index.html +++ b/files/fr/web/css/@font-face/ascent-override/index.html @@ -6,7 +6,7 @@ translation_of: 'Web/CSS/@font-face/ascent-override' --- <p>{{CSSRef}}</p> -<p>Le descripteur CSS <strong><code>ascent-override</code></strong> définit la mesure du jambage supérieur (ascendant) de la police (voir la <a class="external" href="https://fr.wikipedia.org/wiki/Jambage">définition de jambage</a>). La mesure du jambage supérieur correspond à la distance verticale par rapport à la hauteur d'X (hauteur du caractère bas de casse, à l'exclusion des jambages inférieurs et supérieurs) que CSS doit utiliser pour agencer les boîtes dans un contexte de formatage en ligne.</p> +<p>Le descripteur CSS <strong><code>ascent-override</code></strong> définit la mesure du jambage supérieur (ascendant) de la police (voir la <a href="https://fr.wikipedia.org/wiki/Jambage">définition de jambage</a>). La mesure du jambage supérieur correspond à la distance verticale par rapport à la hauteur d'X (hauteur du caractère bas de casse, à l'exclusion des jambages inférieurs et supérieurs) que CSS doit utiliser pour agencer les boîtes dans un contexte de formatage en ligne.</p> <h2 id="syntax">Syntaxe</h2> diff --git a/files/fr/web/css/@font-face/descent-override/index.html b/files/fr/web/css/@font-face/descent-override/index.html index 23655a5f02..6805fdd77f 100644 --- a/files/fr/web/css/@font-face/descent-override/index.html +++ b/files/fr/web/css/@font-face/descent-override/index.html @@ -6,7 +6,7 @@ translation_of: 'Web/CSS/@font-face/descent-override' --- <p>{{CSSRef}}</p> -<p>Le descripteur CSS <strong><code>descent-override</code></strong> définit la mesure du jambage inférieur (descendant) de la police (voir la <a class="external" href="https://fr.wikipedia.org/wiki/Jambage">définition de jambage</a>). La mesure du jambage inférieur correspond à la distance verticale par rapport à la hauteur d'X (hauteur du caractère bas de casse, à l'exclusion des jambages inférieurs et supérieurs) que CSS doit utiliser pour agencer les boîtes dans un contexte de formatage en ligne.</p> +<p>Le descripteur CSS <strong><code>descent-override</code></strong> définit la mesure du jambage inférieur (descendant) de la police (voir la <a href="https://fr.wikipedia.org/wiki/Jambage">définition de jambage</a>). La mesure du jambage inférieur correspond à la distance verticale par rapport à la hauteur d'X (hauteur du caractère bas de casse, à l'exclusion des jambages inférieurs et supérieurs) que CSS doit utiliser pour agencer les boîtes dans un contexte de formatage en ligne.</p> <h2 id="syntax">Syntaxe</h2> diff --git a/files/fr/web/css/@font-face/font-display/index.html b/files/fr/web/css/@font-face/font-display/index.html index 798e350ac7..2b89c8661d 100644 --- a/files/fr/web/css/@font-face/font-display/index.html +++ b/files/fr/web/css/@font-face/font-display/index.html @@ -57,7 +57,7 @@ font-display: optional;</pre> <h2 id="Exemples">Exemples</h2> -<pre class="brush: css; highlight[7]">@font-face { +<pre class="brush: css">@font-face { font-family: FonteExemple; src: url(/chemin/vers/fonts/examplefont.woff) format('woff'), url(/chemin/vers/fonts/examplefont.eot) format('eot'); diff --git a/files/fr/web/css/@font-face/font-stretch/index.html b/files/fr/web/css/@font-face/font-stretch/index.html index 66d3a0211d..505de0c2ac 100644 --- a/files/fr/web/css/@font-face/font-stretch/index.html +++ b/files/fr/web/css/@font-face/font-stretch/index.html @@ -130,10 +130,10 @@ font-stretch: condensed ultra-condensed;; <h2 id="Accessibilité">Accessibilité</h2> -<p>Les personnes atteintes de dyslexie ou d'autres troubles cognitifs pourront avoir des difficultés à lire des textes dont la fonte est trop condensée, notamment <a href="/en-US/docs/Web/CSS/color#Accessibility_concerns">si le contraste des couleurs est trop faible</a>.</p> +<p>Les personnes atteintes de dyslexie ou d'autres troubles cognitifs pourront avoir des difficultés à lire des textes dont la fonte est trop condensée, notamment <a href="/en-US/docs/Web/CSS/color#accessibility_concerns">si le contraste des couleurs est trop faible</a>.</p> <ul> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG - Partie 1.4 (MDN)</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG - Partie 1.4 (MDN)</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Respecter le critère 1.4.8 - Comprendre les règles WCAG 2.0 (W3C)</a></li> </ul> diff --git a/files/fr/web/css/@font-face/font-style/index.html b/files/fr/web/css/@font-face/font-style/index.html index c9776cadef..672e77a232 100644 --- a/files/fr/web/css/@font-face/font-style/index.html +++ b/files/fr/web/css/@font-face/font-style/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/@font-face/font-style --- <div>{{CSSRef}}</div> -<p>Le descripteur <strong><code>font-style</code></strong>, associé à <a href="/fr/docs/Web/CSS/Règles_@">la règle @</a> {{cssxref("@font-face")}}, permet d'indiquer le style de police pour la police définie via la règle.</p> +<p>Le descripteur <strong><code>font-style</code></strong>, associé à <a href="/fr/docs/Web/CSS/At-rule">la règle @</a> {{cssxref("@font-face")}}, permet d'indiquer le style de police pour la police définie via la règle.</p> <p>Pour une police donnée (un ensemble de fontes), les auteurs peuvent télécharger plusieurs fichiers correspondant à la même police mais pour différents styles. Le descripteur <code>font-style</code> peut alors être utilisé afin d'indiquer explicitement le style associé à la fonte. La valeur du descripteur correspond à la propriété de la fonte.</p> @@ -49,11 +49,11 @@ font-style: oblique 30deg 50deg;</pre> src: url('garamond.ttf'); }</pre> -<p><img alt="unstyled Garamond" src="https://mdn.mozillademos.org/files/12265/garamondunstyled.JPG" style="height: 101px; width: 276px;"></p> +<p><img alt="unstyled Garamond" src="garamondunstyled.jpg"></p> <p>La version en italique du texte utilisera les mêmes glyphes que la version normale, artificiellement penchés de quelques degrés.</p> -<p><img alt="artificially sloped garamond" src="https://mdn.mozillademos.org/files/12267/garamondartificialstyle.JPG" style="height: 101px; width: 276px;"></p> +<p><img alt="artificially sloped garamond" src="garamondartificialstyle.jpg"></p> <p>En revanche, si on dispose d'une vraie version italique, on peut l'indiquer via le descripteur <code>src</code> et indiquer que c'est une police italique via <code>font-style</code>. Une « vraie » police italique utilisera des glyphes différents et la qualité calligraphique obtenue sera meilleure qu'avec les glyphes normaux penchés artificiellement.</p> @@ -64,7 +64,7 @@ font-style: oblique 30deg 50deg;</pre> font-style: italic; }</pre> -<p><img alt="italic garamond" src="https://mdn.mozillademos.org/files/12269/garamonditalic.JPG" style="height: 101px; width: 267px;"></p> +<p><img alt="italic garamond" src="garamonditalic.jpg"></p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/@font-feature-values/index.html b/files/fr/web/css/@font-feature-values/index.html index a6363edbf5..cf733cde7b 100644 --- a/files/fr/web/css/@font-feature-values/index.html +++ b/files/fr/web/css/@font-feature-values/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/@font-feature-values --- <div>{{CSSRef}}</div> -<p>La <a href="/fr/docs/Web/CSS/Règles_@">règle @</a> <strong><code>@font-feature-values</code></strong> permet aux auteurs d'utiliser un nom personnalisé dans une règle utilisant la propriété {{cssxref("font-variant-alternates")}} afin de régler finement les caractéristiques OpenType. Elle permet de simplifier les feuilles de style lorsqu'on utilise plusieurs polices.</p> +<p>La <a href="/fr/docs/Web/CSS/At-rule">règle @</a> <strong><code>@font-feature-values</code></strong> permet aux auteurs d'utiliser un nom personnalisé dans une règle utilisant la propriété {{cssxref("font-variant-alternates")}} afin de régler finement les caractéristiques OpenType. Elle permet de simplifier les feuilles de style lorsqu'on utilise plusieurs polices.</p> <pre class="brush: css">@font-feature-values Font One { /* On active la caractéristique nice-style @@ -34,24 +34,24 @@ translation_of: Web/CSS/@font-feature-values } </pre> -<p>La règle @ <code>@font-feature-values</code> peut être utilisée au plus haut niveau d'une feuille de style et aussi au sein <a href="/fr/docs/Web/CSS/Règles_@" title="CSS/At-rule#Conditional_Group_Rules">d'un groupe de règles conditionnelles</a>.</p> +<p>La règle @ <code>@font-feature-values</code> peut être utilisée au plus haut niveau d'une feuille de style et aussi au sein <a href="/fr/docs/Web/CSS/At-rule" title="CSS/At-rule#Conditional_Group_Rules">d'un groupe de règles conditionnelles</a>.</p> <h2 id="Syntaxe">Syntaxe</h2> <h3 id="Blocs_liés_aux_caractéristiques">Blocs liés aux caractéristiques</h3> <dl> - <dt><a name="@swash"><code>@swash</code></a></dt> + <dt><code>@swash</code></dt> <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "swash()", "#swash()")}}. Une telle caractéristique est définie avec une seule valeur : <code>ident1: 2</code> est valide alors que <code>ident2: 2 4</code> est invalide.</dd> - <dt><a name="@annotation"><code>@annotation</code></a></dt> + <dt><code>@annotation</code></dt> <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "annotation()", "#annotation()")}}. Une telle caractéristique est définie avec une seule valeur : <code>ident1: 2</code> est valide alors que <code>ident2: 2 4</code> est invalide.</dd> - <dt><a name="@ornaments"><code>@ornaments</code></a></dt> + <dt><code>@ornaments</code></dt> <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "ornaments()", "#ornaments()")}}. La caractéristique d'ornement est définie avec une seule valeur : <code>ident1: 2</code> est valide alors que <code>ident2: 2 4</code> est invalide.</dd> - <dt><a name="@stylistic"><code>@stylistic</code></a></dt> + <dt><code>@stylistic</code></dt> <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "stylistic()", "#stylistic()")}}. Une telle caractéristique est définie avec une seule valeur : <code>ident1: 2</code> est valide alors que <code>ident2: 2 4</code> est invalide.</dd> - <dt><a name="@styleset"><code>@styleset</code></a></dt> + <dt><code>@styleset</code></dt> <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "styleset()", "#styleset()")}}. Plusieurs valeurs peuvent être utilisées pour cette caractéristique : <code>ident1: 2 4 12 1</code> correspondra aux valeurs OpenType <code>ss02</code>, <code>ss04</code>, <code>ss12</code>, <code>ss01</code>. Les valeurs supérieures à <code>99</code> sont valides mais ne correspondent à aucune valeur OpenType et sont donc ignorées.</dd> - <dt><a name="@character-variant"><code>@character-variant</code></a></dt> + <dt><code>@character-variant</code></dt> <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "character-variant()", "#character-variant()")}}. Pour cette définition, on peut utiliser une ou deux valeurs : <code>ident1: 2</code> correspond à <code>cv02=1</code> et <code>ident2: 2 4</code> correspond à <code>cv02)4</code>, en revanche <code>ident2: 2 4 5</code> est invalide.</dd> </dl> diff --git a/files/fr/web/css/@keyframes/index.html b/files/fr/web/css/@keyframes/index.html index dd8fb53d18..9856d8f815 100644 --- a/files/fr/web/css/@keyframes/index.html +++ b/files/fr/web/css/@keyframes/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/@keyframes <p>La <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">règle </a><strong><code>@keyframes</code></strong> permet aux auteurs de définir les étapes qui composent la séquence d'une animation CSS. Cela permet de contrôler une animation plus finement que ce qu'on pourrait obtenir avec <a href="/fr/docs/Web/CSS/CSS_Transitions">les transitions</a>.</p> -<pre class="brush: css no-line-numbers notranslate">@keyframes slidein { +<pre class="brush: css no-line-numbers">@keyframes slidein { from { margin-left: 100%; width: 300%; @@ -45,7 +45,7 @@ translation_of: Web/CSS/@keyframes <p>Si des propriétés ne sont pas définies à chaque étape, elles sont interpolées si possible. Si ces propriétés ne peuvent pas être interpolées, elles sont retirées de l'animation :</p> -<pre class="brush: css notranslate">@keyframes identifier { +<pre class="brush: css">@keyframes identifier { 0% { top: 0; left: 0; } 30% { top: 50px; } 68%, 72% { left: 50px; } @@ -61,7 +61,7 @@ translation_of: Web/CSS/@keyframes <p>Les déclarations qui utilisent <code>!important</code> dans une description d'étape sont ignorées</p> -<pre class="brush: css notranslate">@keyframes important1 { +<pre class="brush: css">@keyframes important1 { from { margin-top: 50px; } 50% { margin-top: 150px !important; } /* ignorée */ to { margin-top: 100px; } @@ -98,7 +98,7 @@ translation_of: Web/CSS/@keyframes <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { animation-duration: 25s; animation-name: slidein; } @@ -122,7 +122,7 @@ translation_of: Web/CSS/@keyframes <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> Le Chat grimaça en apercevant Alice. Elle trouva qu’il avait l’air bon enfant, et cependant il avait de très longues griffes et une grande rangée de dents ; diff --git a/files/fr/web/css/@media/-moz-device-pixel-ratio/index.html b/files/fr/web/css/@media/-moz-device-pixel-ratio/index.html index 36e47eb9d4..10c33af0f5 100644 --- a/files/fr/web/css/@media/-moz-device-pixel-ratio/index.html +++ b/files/fr/web/css/@media/-moz-device-pixel-ratio/index.html @@ -11,10 +11,10 @@ translation_of: Web/CSS/@media/-moz-device-pixel-ratio --- <div>{{cssref}} {{Non-standard_header}} {{Deprecated_header}}{{h3_gecko_minversion("-moz-device-pixel-ratio", "2.0")}} {{deprecated_inline("16")}}</div> -<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> <strong><code>-moz-device-pixel-ratio</code></strong>, associée à <a href="/fr/docs/Web/CSS/@media" title="The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."><code>@media</code></a>, est une caractéristique propre à Gecko et peut être utilisée pour appliquer certains styles en fonctions du nombres de pixels physiques par pixel CSS.</p> +<p>La <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries#ciblfer_des_caract%c3%a9ristiques_m%c3%a9dia">caractéristique média</a> <strong><code>-moz-device-pixel-ratio</code></strong>, associée à <a href="/fr/docs/Web/CSS/@media" title="The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."><code>@media</code></a>, est une caractéristique propre à Gecko et peut être utilisée pour appliquer certains styles en fonctions du nombres de pixels physiques par pixel CSS.</p> <div class="warning"> -<p><strong>Ne pas utiliser cette fonctionnalité ! </strong>La caractéristique <code><a href="/fr/docs/Web/CSS/@media/resolution">resolution</a></code> et l'unité <code>dppx</code> permettent d'obtenir le même mécanisme.<br> +<p><strong>Attention :</strong> Ne pas utiliser cette fonctionnalité ! La caractéristique <code><a href="/fr/docs/Web/CSS/@media/resolution">resolution</a></code> et l'unité <code>dppx</code> permettent d'obtenir le même mécanisme.<br> <br> <code>-moz-device-pixel-ratio</code> peut être utilisée si besoin d'être compatible avec des versions de Firefox antérieures à la version 16 et <code>-webkit-device-pixel-ratio</code> peut être utilisée avec les navigateurs WebKit qui ne prennent pas en charge <code>dppx</code>. Par exemple :</p> @@ -23,10 +23,12 @@ translation_of: Web/CSS/@media/-moz-device-pixel-ratio (min-resolution: 2dppx), /* La méthode standard */ (min-resolution: 192dpi) /* Utilisée si dppx n'est pas gérée */ </pre> -<p>Voir <a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">cet article du CSSWG</a> pour les bonnes pratiques quant à la compatibilité de <code>resolution</code> et <code>dppx</code>.</p> +<p>Voir <a href="https://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">cet article du CSSWG</a> pour les bonnes pratiques quant à la compatibilité de <code>resolution</code> et <code>dppx</code>.</p> </div> -<div class="note"><strong>Note</strong> : Cette caractéristique est également implémentée par Webkit et <a href="https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx">IE 11 pour Windows Phone 8.1</a> sous le nom <code>-webkit-device-pixel-ratio</code>. Les versions préfixées pour les seuils minimal / maximal sont intitulées <code>min--moz-device-pixel-ratio</code> et <code>max--moz-device-pixel-ratio</code> sous Gecko, tandis que sous Webkit, elles sont intitulées <code>-webkit-min-device-pixel-ratio</code> et <code>-webkit-max-device-pixel-ratio</code>.</div> +<div class="note"> + <p><strong>Note :</strong> Cette caractéristique est également implémentée par Webkit et <a href="https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx">IE 11 pour Windows Phone 8.1</a> sous le nom <code>-webkit-device-pixel-ratio</code>. Les versions préfixées pour les seuils minimal / maximal sont intitulées <code>min--moz-device-pixel-ratio</code> et <code>max--moz-device-pixel-ratio</code> sous Gecko, tandis que sous Webkit, elles sont intitulées <code>-webkit-min-device-pixel-ratio</code> et <code>-webkit-max-device-pixel-ratio</code>.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/@media/-ms-high-contrast/index.html b/files/fr/web/css/@media/-ms-high-contrast/index.html index aca491ee04..814c43f592 100644 --- a/files/fr/web/css/@media/-ms-high-contrast/index.html +++ b/files/fr/web/css/@media/-ms-high-contrast/index.html @@ -12,7 +12,7 @@ original_slug: Web/CSS/-ms-high-contrast --- <div>{{CSSRef}}{{Non-standard_header}}</div> -<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> <code><strong>-ms-high-contrast</strong></code>, relative à la règle @ <code><a href="/fr/docs/Web/CSS/@media">@media</a></code>, est une <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">extension Microsoft </a>qui décrit si l'application est affichée dans un mode de contraste élevé et, si c'est le cas, quelle est la variation de couleur affichée.</p> +<p>La <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries#cibler_des_caract%c3%a9ristiques_m%c3%a9dia">caractéristique média</a> <code><strong>-ms-high-contrast</strong></code>, relative à la règle @ <code><a href="/fr/docs/Web/CSS/@media">@media</a></code>, est une <a href="/en-US/docs/Web/CSS/Microsoft_extensions">extension Microsoft </a>qui décrit si l'application est affichée dans un mode de contraste élevé et, si c'est le cas, quelle est la variation de couleur affichée.</p> <p>Cette caractéristique média s'applique aux média de type matriciel (<em>bitmap</em>). Elle ne gère pas les préfixes <code>min</code> et <code>max</code>.</p> @@ -59,7 +59,7 @@ original_slug: Web/CSS/-ms-high-contrast } </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <p>Cette caractéristique est propre à Microsoft et n'est décrite dans aucune spécification.</p> diff --git a/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html b/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html index 451c83f18d..3d96ba5464 100644 --- a/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html +++ b/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html @@ -12,10 +12,10 @@ translation_of: Web/CSS/@media/-webkit-device-pixel-ratio <p><strong><code>-webkit-device-pixel-ratio</code></strong> est une caractéristique média non-standard, alternative à la caractéristique média standard {{cssxref("@media/resolution","resolution")}}.</p> -<p>Sa valeur correspond au nombre de pixels physiques utilisés par l'appareil pour représenter <a href="/fr/docs/Web/CSS/length#Unités_de_longueur_absolues">un pixel CSS (<code>px</code>)</a>. Bien que la valeur soit de type {{cssxref("<number>")}}, sans unité donc, l'unité implicite est <a href="/fr/docs/Web/CSS/resolution#Unités"><code>dppx</code></a>.</p> +<p>Sa valeur correspond au nombre de pixels physiques utilisés par l'appareil pour représenter <a href="/fr/docs/Web/CSS/length#unités_de_longueur_absolues">un pixel CSS (<code>px</code>)</a>. Bien que la valeur soit de type {{cssxref("<number>")}}, sans unité donc, l'unité implicite est <a href="/fr/docs/Web/CSS/resolution#unités"><code>dppx</code></a>.</p> <div class="warning"> -<p><strong>Attention !</strong> Cette caractéristique est spécifique à WebKit. Tant que possible, on utilisera {{cssxref("@media/resolution","resolution")}}.</p> +<p><strong>Attention :</strong> Cette caractéristique est spécifique à WebKit. Tant que possible, on utilisera {{cssxref("@media/resolution","resolution")}}.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -26,7 +26,7 @@ translation_of: Web/CSS/@media/-webkit-device-pixel-ratio <dl> <dt>{{cssxref("<number>")}}</dt> - <dd>Le nombre de pixels physiques pour chaque pixel (<code><a href="/fr/docs/Web/CSS/length#Unités_de_longueur_absolues">px</a></code>) CSS. Bien que la valeur soit un nombre et ne permette pas d'utiliser des unités, l'unité implicite est <code><a href="/fr/docs/Web/CSS/resolution#dppx">dppx</a></code>.</dd> + <dd>Le nombre de pixels physiques pour chaque pixel (<code><a href="/fr/docs/Web/CSS/length#unités_de_longueur_absolues">px</a></code>) CSS. Bien que la valeur soit un nombre et ne permette pas d'utiliser des unités, l'unité implicite est <code><a href="/fr/docs/Web/CSS/resolution#dppx">dppx</a></code>.</dd> </dl> <h2 id="Implémentation">Implémentation</h2> @@ -93,8 +93,7 @@ translation_of: Web/CSS/@media/-webkit-device-pixel-ratio <td>Définition initiale dans un standard.</td> </tr> <tr> - <td><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3" hreflang="en" lang="en">Safari CSS Reference<br> - <small lang="en-US">'media query extensions' in that document.</small></a></td> + <td><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3">Safari CSS Reference 'media query extensions'.</a></td> <td>Documentation non-officielle, non-standard.</td> <td>Documentation initiale.</td> </tr> diff --git a/files/fr/web/css/@media/-webkit-transform-3d/index.html b/files/fr/web/css/@media/-webkit-transform-3d/index.html index 35c5545966..887649670d 100644 --- a/files/fr/web/css/@media/-webkit-transform-3d/index.html +++ b/files/fr/web/css/@media/-webkit-transform-3d/index.html @@ -47,8 +47,7 @@ translation_of: Web/CSS/@media/-webkit-transform-3d <td>Définition initiale dans un standard.</td> </tr> <tr> - <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3" hreflang="en" lang="en">Safari CSS Reference<br> - <small lang="en-US">'media query extensions' in that document.</small></a></td> + <td><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3">Safari CSS Reference media query extensions in that document.</a></td> <td>Documentation non-officielle, non-standard.</td> <td>Documentation initiale.</td> </tr> diff --git a/files/fr/web/css/@media/aspect-ratio/index.html b/files/fr/web/css/@media/aspect-ratio/index.html index 14bdf4689b..0999d4619e 100644 --- a/files/fr/web/css/@media/aspect-ratio/index.html +++ b/files/fr/web/css/@media/aspect-ratio/index.html @@ -17,68 +17,25 @@ translation_of: Web/CSS/@media/aspect-ratio <h2 id="Exemples">Exemples</h2> -<div class="note"> -<p><strong>Note :</strong> L'exemple suivant est contenu dans un élément {{HTMLElement("iframe")}} et crée donc sa propre zone d'affichage (<em>viewport</em>), vous pouvez redimensionner l'<code>iframe</code> afin d'observer l'effet d'<code>aspect-ratio</code>.</p> -</div> +<h3 id="exemples_de_valeurs_pour_aspect-ratio">Exemples de valeurs pour aspect-ratio</h3> -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><label id="wf" for="w">width:165</label> -<input id="w" name="w" type="range" min="100" max="250" step="5" value="165"> -<label id="hf" for="w">height:165</label> -<input id="h" name="h" type="range" min="100" max="250" step="5" value="165"> - -<iframe id="outer" src="data:text/html, - <style> - @media (min-aspect-ratio: 8/5) { - div { - background: %239af; - } - } - @media (max-aspect-ratio: 3/2) { - div { - background: %239ff; - } - } - @media (aspect-ratio: 1/1) { - div { - background: %23f9a; - } - } - </style> - <div id='inner'> - Vous pouvez redimensionner le viewport en largeur - et en hauteur pour voir l'effet. - </div> -"> - -</iframe> +<pre class="brush: css"> +aspect-ratio: 1 / 1; +aspect-ratio: 16 / 9; </pre> -<h3 id="CSS">CSS</h3> +<h2 id="Correspondance_entre_width_et_height_et_aspect-ratio">Correspondance entre width et height et aspect-ratio</h2> -<pre class="brush: css">iframe{ - display:block; -}</pre> - -<h3 id="JavaScript">JavaScript</h3> +<p>Les navigateurs ont ajouté une propriété <code>aspect-ratio</code> interne qui s'applique aux <a href="/fr/docs/Web/CSS/Replaced_element">éléments remplacés</a> et aux autres éléments associés qui acceptent des attributs <code>width</code> et <code>height</code>. Celle-ci apparaît dans la feuille de style interne de l'agent utilisateur.</p> -<pre class="brush: js">outer.style.width=outer.style.height="165px" +<p>Pour Firefox, la feuille de style interne ressemble à :</p> -w.onchange=w.oninput=function(){ - outer.style.width=w.value+"px" - wf.textContent="width:"+w.value -} -h.onchange=h.oninput=function(){ - outer.style.height=h.value+"px" - hf.textContent="height:"+h.value +<pre class="brush: css"> +img, input[type="image"], video, embed, iframe, marquee, object, table { + aspect-ratio: attr(width) / attr(height); }</pre> -<h3 id="Résultat">Résultat</h3> - -<div style="overflow: auto;"> -<p>{{EmbedLiveSample('Exemples')}}</p> -</div> +<p>Pour en savoir plus, vous pouvez consulter <a href="https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/">Définir la hauteur et largeur des images redevient important (en anglais)</a>.</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/@media/forced-colors/index.html b/files/fr/web/css/@media/forced-colors/index.html index d347ae71b9..ab75ac487c 100644 --- a/files/fr/web/css/@media/forced-colors/index.html +++ b/files/fr/web/css/@media/forced-colors/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/@media/forced-colors <p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Caractéristiques_média_(media_features)">caractéristique média</a> <strong><code>forced-colors</code></strong> est utilisée afin de détecter si l'utilisateur a choisi une palette de couleur restreinte via le navigateur ou l'agent utilisateur.</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Cette fonctionnalité n'est pas encore implémentée par aucun agent utilisateur</p> </div> diff --git a/files/fr/web/css/@media/prefers-color-scheme/index.html b/files/fr/web/css/@media/prefers-color-scheme/index.html index a240eb36c8..4476aacdf7 100644 --- a/files/fr/web/css/@media/prefers-color-scheme/index.html +++ b/files/fr/web/css/@media/prefers-color-scheme/index.html @@ -10,8 +10,8 @@ translation_of: Web/CSS/@media/prefers-color-scheme --- <div>{{CSSRef}}</div> -<div class="blockIndicator note"> -<p>Si vous avez modifié <code>privacy.resistFingerprinting</code> à <strong>vrai</strong>, le paramètre {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} sera redéfini à <code>light</code>.<br> +<div class="note"> +<p><strong>Note :</strong> Si vous avez modifié <code>privacy.resistFingerprinting</code> à <strong>vrai</strong>, le paramètre {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} sera redéfini à <code>light</code>.<br> Sinon, vous pouvez créer le paramètre numérique <code>ui.systemUsesDarkTheme</code> pour redéfinier le comportement par défaut et retourner <code>light</code> (valeur : 0), <code>dark</code> (valeur : 1), or <code>no-preference</code> (valeur : 2). (Firefox retournera<code>light</code> si une autre valeur est utilisée.)</p> </div> @@ -30,7 +30,7 @@ translation_of: Web/CSS/@media/prefers-color-scheme <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">.day { background: #eee; color: black; } +<pre class="brush: css">.day { background: #eee; color: black; } .night { background: #333; color: white; } @media (prefers-color-scheme: dark) { @@ -54,7 +54,7 @@ translation_of: Web/CSS/@media/prefers-color-scheme <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div class="day">Jour (initial)</div> +<pre class="brush: html"><div class="day">Jour (initial)</div> <div class="day light-scheme">Jour (modifié si utilisation d'un thème clair)</div> <div class="day dark-scheme">Jour (modifié si utilisation d'un thème sombre)</div> <br> diff --git a/files/fr/web/css/@media/prefers-reduced-motion/index.html b/files/fr/web/css/@media/prefers-reduced-motion/index.html index 9f161ee4fd..daf259477f 100644 --- a/files/fr/web/css/@media/prefers-reduced-motion/index.html +++ b/files/fr/web/css/@media/prefers-reduced-motion/index.html @@ -12,11 +12,10 @@ translation_of: Web/CSS/@media/prefers-reduced-motion --- <div>{{CSSRef}}</div> -<p class="summary">La <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">requêtes média</a> <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>prefers-reduced-motion</code></strong> détecte si l'utilisateur a demandé au système de minimiser la quantité d'animation ou de mouvement.</p> +<p>La <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries#media_features">requêtes média</a> <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>prefers-reduced-motion</code></strong> détecte si l'utilisateur a demandé au système de minimiser la quantité d'animation ou de mouvement.</p> -<div class="notecard warning"> - <p><b>Important :</b><p> - <p>Un exemple intégré au bas de cette page comporte un mouvement d'échelle qui peut poser problème à certains lecteurs. Les lecteurs souffrant de troubles du mouvement vestibulaire peuvent souhaiter activer la fonction de réduction du mouvement sur leur appareil avant de visionner l'animation.</p> +<div class="warning"> + <p><strong>Attention :</strong> Un exemple intégré au bas de cette page comporte un mouvement d'échelle qui peut poser problème à certains lecteurs. Les lecteurs souffrant de troubles du mouvement vestibulaire peuvent souhaiter activer la fonction de réduction du mouvement sur leur appareil avant de visionner l'animation.</p> </div> <h2 id="syntax">Syntaxe</h2> @@ -63,8 +62,7 @@ translation_of: Web/CSS/@media/prefers-reduced-motion } </pre> -<div class="hidden"> -<pre class="brush: css">.animation { +<pre class="brush: css hidden">.animation { background-color: rebeccapurple; color: #fff; font: 1.2em Helvetica, arial, sans-serif; @@ -106,7 +104,6 @@ translation_of: Web/CSS/@media/prefers-reduced-motion } } </pre> -</div> <h3 id="result">Résultat</h3> diff --git a/files/fr/web/css/@media/shape/index.html b/files/fr/web/css/@media/shape/index.html index c065872f83..0f07c013b2 100644 --- a/files/fr/web/css/@media/shape/index.html +++ b/files/fr/web/css/@media/shape/index.html @@ -26,7 +26,7 @@ translation_of: Web/CSS/@media/shape <h2 id="Exemples">Exemples</h2> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Aucun navigateur n'implémente actuellement cette fonctionnalité.</p> </div> diff --git a/files/fr/web/css/@page/index.html b/files/fr/web/css/@page/index.html index 7dea723ef5..9d44d62546 100644 --- a/files/fr/web/css/@page/index.html +++ b/files/fr/web/css/@page/index.html @@ -21,7 +21,9 @@ translation_of: Web/CSS/@page <p>La règle @ <code>@page</code> peut être manipulée via le CSSOM, notamment avec l'interface {{domxref("CSSPageRule")}}.</p> -<div class="note"><strong>Note :</strong> Le W3C est en train de discuter de la gestion des unités de longueur ({{cssxref("<length>")}}) relative à la zone d'affichage (<em>viewport</em>) : <code>vh</code>, <code>vw</code>, <code>vmin</code> et <code>vmax</code>. En attendant, il est conseillé de ne pas les utiliser au sein d'une règle <code>@page</code>.</div> +<div class="note"> + <p><strong>Note :</strong> Le W3C est en train de discuter de la gestion des unités de longueur ({{cssxref("<length>")}}) relative à la zone d'affichage (<em>viewport</em>) : <code>vh</code>, <code>vw</code>, <code>vmin</code> et <code>vmax</code>. En attendant, il est conseillé de ne pas les utiliser au sein d'une règle <code>@page</code>.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -33,12 +35,12 @@ translation_of: Web/CSS/@page </dl> <dl> - <dt><code><a href="/fr/docs/Web/CSS/@page/marks">marks</a></code></dt> + <dt><code><a href="/fr/docs/orphaned/Web/CSS/@page/marks">marks</a></code></dt> <dd>Ajoute des marques pour la découpe ou l'alignement des pages du document.</dd> </dl> <dl> - <dt><a href="/fr/docs/Web/CSS/@page/bleed"><code>bleed</code></a></dt> + <dt><a href="/fr/docs/orphaned/Web/CSS/@page/bleed"><code>bleed</code></a></dt> <dd>Définit la limite au-delà de la boîte de la page au-delà de laquelle le contenu affiché est rogné.</dd> </dl> diff --git a/files/fr/web/css/@page/size/index.html b/files/fr/web/css/@page/size/index.html index 4a162a450a..89d4723b4d 100644 --- a/files/fr/web/css/@page/size/index.html +++ b/files/fr/web/css/@page/size/index.html @@ -53,7 +53,7 @@ size: A4 portrait; <dt><code><length></code></dt> <dd>Une valeur de longueur (cf. {{cssxref("<length>")}}). La première valeur utilisée correspond à la largeur de la boîte de la page et la deuxième correspond à la hauteur. Si une seule valeur est fournie, celle-ci sera utilisée pour la largeur et pour la hauteur.</dd> <dt><code><page-size></code></dt> - <dd> + <dd><p>Un mot-clé avec l'une des valeurs suivantes :</p> <dl> <dt><code>A5</code></dt> <dd>Ce mot-clé correspond aux dimensions ISO standard : 148mm x 210mm.</dd> diff --git a/files/fr/web/css/@supports/index.html b/files/fr/web/css/@supports/index.html index 05205b390c..163bcdd89f 100644 --- a/files/fr/web/css/@supports/index.html +++ b/files/fr/web/css/@supports/index.html @@ -64,7 +64,7 @@ translation_of: Web/CSS/@supports <pre class="brush:css">@supports not ( not ( transform-origin: 2px ) ) { } @supports (display: grid) and ( not (display: inline-grid) ) { }</pre> -<div class="note style-wrap"> +<div class="note"> <p><strong>Note :</strong> Au niveau le plus haut, il n'est pas nécessaire d'encadrer l'opérateur <code>not</code> entre parenthèses. Si on souhaite le combiner avec d'autres opérateurs comme <code>and</code> ou <code>or</code>, il faudra utiliser des parenthèses.</p> </div> @@ -98,8 +98,8 @@ translation_of: Web/CSS/@supports <pre class="brush:css">@supports ( transform-style: preserve-3d ) or (( -moz-transform-style: preserve-3d ) or (( -o-transform-style: preserve-3d ) or ( -webkit-transform-style: preserve-3d ))) { }</pre> -<div class="note style-wrap"> -<p><strong>Note</strong> : Lorsqu'on utilise à la fois l'opérateur <code>and</code> et l'opérateur <code>or</code>, il devient nécessaire d'utiliser des parenthèses pour que l'ordre d'application des opérateurs soit défini. Si on n'utilise pas de parenthèses, la condition sera considérée comme invalide et l'ensemble de la règle @ sera ignorée.</p> +<div class="note"> +<p><strong>Note :</strong> Lorsqu'on utilise à la fois l'opérateur <code>and</code> et l'opérateur <code>or</code>, il devient nécessaire d'utiliser des parenthèses pour que l'ordre d'application des opérateurs soit défini. Si on n'utilise pas de parenthèses, la condition sera considérée comme invalide et l'ensemble de la règle @ sera ignorée.</p> </div> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> diff --git a/files/fr/web/css/@viewport/index.html b/files/fr/web/css/@viewport/index.html index 97247a26e3..b14056c7ea 100644 --- a/files/fr/web/css/@viewport/index.html +++ b/files/fr/web/css/@viewport/index.html @@ -58,7 +58,7 @@ translation_of: Web/CSS/@viewport </dl> <div class="note"> -<p><strong>Note : </strong>Un facteur de zoom de <code>1.0</code> ou <code>100%</code> correspond à une absence de zoom. Les valeurs supérieures traduiront une augmentation du niveau de zoom (agrandissement des images et du texte) et les valeurs inférieures correspondront à une réduction du niveau de zoom.</p> +<p><strong>Note :</strong>Un facteur de zoom de <code>1.0</code> ou <code>100%</code> correspond à une absence de zoom. Les valeurs supérieures traduiront une augmentation du niveau de zoom (agrandissement des images et du texte) et les valeurs inférieures correspondront à une réduction du niveau de zoom.</p> </div> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> diff --git a/files/fr/web/css/_colon_-moz-first-node/index.html b/files/fr/web/css/_colon_-moz-first-node/index.html index fd7e45bb27..74fcd7f5bb 100644 --- a/files/fr/web/css/_colon_-moz-first-node/index.html +++ b/files/fr/web/css/_colon_-moz-first-node/index.html @@ -12,7 +12,9 @@ translation_of: 'Web/CSS/:-moz-first-node' <p>La pseudo-classe <strong><code>:-moz-first-node</code></strong> correspond à un élément si celui-ci est le premier nœud d'un autre élément. Cette pseudo-classe est différente de {{cssxref(":first-child")}} car elle ne cible pas le premier élément qui possède du texte (hors blancs).</p> -<p class="note"><strong>Note :</strong> Tout blanc qui serait au début d'un élément est ignoré pour la détermination de <code>:-moz-last-node</code>.</p> +<div class="note"> + <p><strong>Note :</strong> Tout blanc qui serait au début d'un élément est ignoré pour la détermination de <code>:-moz-last-node</code>.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/_colon_-moz-last-node/index.html b/files/fr/web/css/_colon_-moz-last-node/index.html index 4133fb53a9..aab079a2e6 100644 --- a/files/fr/web/css/_colon_-moz-last-node/index.html +++ b/files/fr/web/css/_colon_-moz-last-node/index.html @@ -12,7 +12,9 @@ translation_of: 'Web/CSS/:-moz-last-node' <p>La pseudo-classe <strong><code>:-moz-last-node</code></strong> correspond à un élément si celui-ci est le dernier nœud d'un autre élément. Cette pseudo-classe est différente de {{cssxref(":last-child")}} car elle ne cible pas le dernier élément qui possède du texte (hors blancs).</p> -<p class="note"><strong>Note :</strong> Tout blanc qui serait à la fin d'un élément est ignoré pour la détermination de <code>:-moz-last-node</code>.</p> +<div class="note"> + <p><strong>Note :</strong> Tout blanc qui serait à la fin d'un élément est ignoré pour la détermination de <code>:-moz-last-node</code>.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/_colon_-moz-only-whitespace/index.html b/files/fr/web/css/_colon_-moz-only-whitespace/index.html index 0a34f1d26c..d53499bc80 100644 --- a/files/fr/web/css/_colon_-moz-only-whitespace/index.html +++ b/files/fr/web/css/_colon_-moz-only-whitespace/index.html @@ -11,7 +11,7 @@ translation_of: 'Web/CSS/:-moz-only-whitespace' --- <div>{{CSSRef}}{{SeeCompatTable}}</div> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Dans la spécification {{SpecName("CSS4 Selectors", "#the-empty-pseudo")}}, le sélecteur {{CSSxRef(":empty")}} a été modifié pour se comporter comme <code>:-moz-only-whitespace</code> mais aucun navigateur ne prend actuellement en charge cette fonctionnalité.</p> </div> @@ -30,8 +30,7 @@ translation_of: 'Web/CSS/:-moz-only-whitespace' <h3 id="CSS">CSS</h3> -<div class="hidden"> -<pre class="brush: css">:root { +<pre class="brush: css hidden">:root { overflow: hidden; max-width: 100vw; max-height: 100vh; @@ -45,7 +44,6 @@ div { min-height: 1rem; } </pre> -</div> <pre class="brush: css">div { border: 4px solid red; diff --git a/files/fr/web/css/_colon_-moz-window-inactive/index.html b/files/fr/web/css/_colon_-moz-window-inactive/index.html index 68c8be972f..e0352a939f 100644 --- a/files/fr/web/css/_colon_-moz-window-inactive/index.html +++ b/files/fr/web/css/_colon_-moz-window-inactive/index.html @@ -12,7 +12,9 @@ translation_of: 'Web/CSS/:-moz-window-inactive' <p>La pseudo-classe <strong><code>:-moz-window-inactive</code></strong>, spécifique à Mozilla, correspond à n'importe quel élément qui se trouve sur une fenêtre inactive.</p> -<div class="note"><strong>Note :</strong> Avant l'existence de cette pseudo-classe, on pouvait donner des styles différents aux fenêtres avec l'attribut <code>active="true"</code> sur la fenêtre XUL de plus haut niveau. Cet attribut n'est plus utilisé.</div> +<div class="note"> + <p><strong>Note :</strong> Avant l'existence de cette pseudo-classe, on pouvait donner des styles différents aux fenêtres avec l'attribut <code>active="true"</code> sur la fenêtre XUL de plus haut niveau. Cet attribut n'est plus utilisé.</p> +</div> <p><code>:-moz-window-inactive</code> fonctionne également pour le contenu des documents HTML.</p> diff --git a/files/fr/web/css/_colon_active/index.html b/files/fr/web/css/_colon_active/index.html index 617efb14c9..0ac630a4c3 100644 --- a/files/fr/web/css/_colon_active/index.html +++ b/files/fr/web/css/_colon_active/index.html @@ -21,7 +21,9 @@ a:active { <p>La mise en forme associée peut être surchargée par les autres pseudo-classes pour les liens : {{cssxref(":link")}}, {{cssxref(":hover")}} et {{cssxref(":visited")}} lorsqu'elles sont utilisées dans des règles qui suivent. Afin de mettre en forme les liens de façon correcte, la règle avec <code>:active</code> doit être écrite après les autres : <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> -<div class="note"><strong>Note :</strong> Pour les systèmes qui utilisent une souris avec plusieurs boutons, CSS 3 spécifie que la pseudo-classe <code>:active</code> ne doit s'appliquer qu'au bouton principal. Pour les souris de droitiers, c'est généralement le bouton le plus à gauche.</div> +<div class="note"> + <p><strong>Note :</strong> Pour les systèmes qui utilisent une souris avec plusieurs boutons, CSS 3 spécifie que la pseudo-classe <code>:active</code> ne doit s'appliquer qu'au bouton principal. Pour les souris de droitiers, c'est généralement le bouton le plus à gauche.</p> +</div> <h2 id="Syntax">Syntax</h2> diff --git a/files/fr/web/css/_colon_autofill/index.html b/files/fr/web/css/_colon_autofill/index.html index 94196944d2..c74d26ed18 100644 --- a/files/fr/web/css/_colon_autofill/index.html +++ b/files/fr/web/css/_colon_autofill/index.html @@ -13,7 +13,9 @@ original_slug: Web/CSS/:-webkit-autofill <p>La pseudo-classe <strong><code>:-webkit-autofill</code></strong> correspond à un élément {{HTMLElement("input")}} lorsque sa valeur est remplie automatiquement par le navigateur.</p> -<p class="note"><strong>Note :</strong> Pour plusieurs navigateurs, les feuilles de style de l'agent utilisateur utilisent <code>!important</code> pour les déclarations avec <code>:-webkit-autofill</code> ce qui les rend difficilement modifiables sans utiliser JavaScript.</p> +<div class="note"> + <p><strong>Note :</strong> Pour plusieurs navigateurs, les feuilles de style de l'agent utilisateur utilisent <code>!important</code> pour les déclarations avec <code>:-webkit-autofill</code> ce qui les rend difficilement modifiables sans utiliser JavaScript.</p> +</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/_colon_blank/index.html b/files/fr/web/css/_colon_blank/index.html index b67a791497..db9d6f5d06 100644 --- a/files/fr/web/css/_colon_blank/index.html +++ b/files/fr/web/css/_colon_blank/index.html @@ -11,7 +11,7 @@ translation_of: 'Web/CSS/:blank' --- <p>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Le sélecteur <code>:blank</code> est une fonctionnalité considérée risquée car en cours de modification par le CSSWG. Voir <a href="https://github.com/w3c/csswg-drafts/issues/1967" title="[selectors] decide on :blank">l'<em>issue</em> n°1967 à ce propos</a>.</p> </div> diff --git a/files/fr/web/css/_colon_checked/index.html b/files/fr/web/css/_colon_checked/index.html index e29ddf49b8..fba13cef19 100644 --- a/files/fr/web/css/_colon_checked/index.html +++ b/files/fr/web/css/_colon_checked/index.html @@ -1,15 +1,15 @@ --- title: ':checked' -slug: 'Web/CSS/:checked' +slug: Web/CSS/:checked tags: - CSS - Pseudo-classe - Reference -translation_of: 'Web/CSS/:checked' +translation_of: Web/CSS/:checked --- <div>{{CSSRef}}</div> -<p>La pseudo-classe <strong><code>:checked</code></strong> représente n'importe quel <strong>bouton radio</strong> (<code><a href="/fr/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code>), <strong>case à cocher </strong>(<code><a href="/fr/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code>) ou <strong>option</strong> ({{HTMLElement("option")}} d'un élément {{HTMLElement("select")}}) qui est coché ou activé (<code>on</code>). L'utilisateur peut modifier cet état en cliquant sur l'élément ou en sélectionnant une valeur différente auquel cas la pseudo-classe <code>:checked</code> ne s'applique plus à l'élément en question.</p> +<p>La pseudo-classe <strong><code>:checked</code></strong> représente n'importe quel <strong>bouton radio</strong> (<code><a href="/fr/docs/Web/HTML/Element/Input/radio"><input type="radio"></a></code>), <strong>case à cocher </strong>(<code><a href="/fr/docs/Web/HTML/Element/Input/checkbox"><input type="checkbox"></a></code>) ou <strong>option</strong> ({{HTMLElement("option")}} d'un élément {{HTMLElement("select")}}) qui est coché ou activé (<code>on</code>). L'utilisateur peut modifier cet état en cliquant sur l'élément ou en sélectionnant une valeur différente auquel cas la pseudo-classe <code>:checked</code> ne s'applique plus à l'élément en question.</p> <pre class="brush: css no-line-numbers">/* cible n'importe quel bouton radio sélectionné, case /* à cocher cochée ou option sélectionnée */ @@ -29,70 +29,64 @@ input:checked { <h2 id="Exemples">Exemples</h2> -<p>Ici, on utilise la pseudo-classe <code>:checked</code> pseudo-class applied to hidden checkboxes appended at the beginning of your page could be employed in order to store some dynamic booleans to be used by a CSS rule. The following example shows how to hide/show some expandable elements by simply clicking on a button (<a class="internal" href="/@api/deki/files/6246/=expandable-elements.html" title="Expandable elements through the :checked pseudoclass">download this demo</a>).</p> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">#expand-btn { - margin: 0 3px; - display: inline-block; - font: 12px / 13px "Lucida Grande", sans-serif; - text-shadow: rgba(255, 255, 255, 0.4) 0 1px; - padding: 3px 6px; - border: 1px solid rgba(0, 0, 0, 0.6); - background-color: #969696; - cursor: default; - border-radius: 3px; - box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white; -} +<h3 id="exemple_simple">Exemple simple</h3> -#isexpanded:checked ~ #expand-btn, #isexpanded:checked ~ * #expand-btn { - background: #B5B5B5; - box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px; -} +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"> +<div> + <input type="radio" name="my-input" id="yes"> + <label for="yes">Oui</label> -#isexpanded, .expandable { - display: none; + <input type="radio" name="my-input" id="no"> + <label for="no">Non</label> +</div> + +<div> + <input type="checkbox" name="my-checkbox" id="opt-in"> + <label for="opt-in">Cochez-moi !</label> +</div> + +<select name="my-select" id="fruit"> + <option value="opt1">Pommes</option> + <option value="opt2">Raisins</option> + <option value="opt3">Poires</option> +</select> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css"> +div, +select { + margin: 8px; } -#isexpanded:checked ~ * tr.expandable { - display: table-row; - background: #cccccc; +/* Libellés pour les entrées cochées */ +input:checked + label { + color: red; +} +/* Éléments radio cochés */ +input[type="radio"]:checked { + box-shadow: 0 0 0 3px orange; } -#isexpanded:checked ~ p.expandable, #isexpanded:checked ~ * p.expandable { - display: block; - background: #cccccc; +/* Éléments cases à cocher cochés */ +input[type="checkbox"]:checked { + box-shadow: 0 0 0 3px hotpink; } -</pre> -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><input type="checkbox" id="isexpanded" /> - -<table> - <thead> - <tr><th>Colonne 1</th><th>Colonne 2</th><th>Colonne 3</th></tr> - </thead> - <tbody> - <tr class="expandable"><td>[cellule]</td><td>[cellule]</td><td>[cellule]</td></tr> - <tr><td>[cellule]</td><td>[cellule]</td><td>[cellule]</td></tr> - <tr><td>[cellule]</td><td>[cellule]</td><td>[cellule]</td></tr> - <tr class="expandable"><td>[cellule]</td><td>[cellule]</td><td>[cellule]</td></tr> - <tr class="expandable"><td>[cellule]</td><td>[cellule]</td><td>[cellule]</td></tr> - </tbody> -</table> - -<p>[Un texte normal]</p> -<p><label for="isexpanded" id="expand-btn">Afficher les éléments masqués</label></p> -<p class="expandable">[Un texte caché]</p> -<p>[Un texte normal]</p> +/* Éléments options sélectionnés */ +option:checked { + box-shadow: 0 0 0 3px lime; + color: red; +} </pre> -<h3 id="Résultat">Résultat</h3> +<h4 id="résultat">Résultat</h4> -<p>{{EmbedLiveSample('Exemples','300','450')}}</p> +<p>{{EmbedLiveSample("exemple_simple")}}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/_colon_default/index.html b/files/fr/web/css/_colon_default/index.html index 0581ed4c6a..195232f149 100644 --- a/files/fr/web/css/_colon_default/index.html +++ b/files/fr/web/css/_colon_default/index.html @@ -26,7 +26,7 @@ translation_of: 'Web/CSS/:default' <li>L'élément <code><button></code> est ciblé si c'est le bouton d'envoi par défaut d'un formulaire, c'est-à-dire le premier bouton (selon l'ordre du DOM) appartenant au formulaire (cela vaut également pour les éléments {{htmlelement("input")}} dont le type permet d'envoyer des formulaires tels que <code>image</code> ou <code>submit</code>).</li> </ul> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> La spécification WHATWG HTML définit cela dans <a href="https://html.spec.whatwg.org/multipage/semantics-other.html#selector-default">le paragraphe 4.16.3</a>.</p> </div> diff --git a/files/fr/web/css/_colon_dir/index.html b/files/fr/web/css/_colon_dir/index.html index 4bc716dd55..258e28c8b5 100644 --- a/files/fr/web/css/_colon_dir/index.html +++ b/files/fr/web/css/_colon_dir/index.html @@ -24,20 +24,19 @@ translation_of: 'Web/CSS/:dir' <h2 id="Syntaxe">Syntaxe</h2> -<p id="Syntaxe_formelle">La pseudo-classe <code>:dir()</code> nécessite un paramètre qui indique la direction du texte qu'on souhaite cibler</p> +<p>La pseudo-classe <code>:dir()</code> nécessite un paramètre qui indique la direction du texte qu'on souhaite cibler</p> <h3 id="Paramètres">Paramètres</h3> <dl> <dt><code>direction</code></dt> <dd>La direction du texte pour les éléments qu'on souhaite sélectionner. La valeur peut être <code>ltr</code> (texte écrit de gauche à droite) ou <code>rtl</code> (texte écrit de droite à gauche).</dd> - <dt> - <h3 id="Syntaxe_formelle_2">Syntaxe formelle</h3> - - {{csssyntax}} - </dt> </dl> +<h3 id="Syntaxe_formelle_2">Syntaxe formelle</h3> + +<p>{{csssyntax}}</p> + <h2 id="Exemples">Exemples</h2> <h3 id="CSS">CSS</h3> diff --git a/files/fr/web/css/_colon_empty/index.html b/files/fr/web/css/_colon_empty/index.html index 70af2f5971..81091c8db4 100644 --- a/files/fr/web/css/_colon_empty/index.html +++ b/files/fr/web/css/_colon_empty/index.html @@ -1,11 +1,11 @@ --- title: ':empty' -slug: 'Web/CSS/:empty' +slug: Web/CSS/:empty tags: - CSS - Pseudo-classe - Reference -translation_of: 'Web/CSS/:empty' +translation_of: Web/CSS/:empty --- <div>{{CSSRef}}</div> @@ -17,8 +17,8 @@ div:empty { background: lime; }</pre> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Avec {{SpecName("CSS4 Selectors", "#the-empty-pseudo")}}, le sélecteur <code>:empty</code> a été modifié afin de se comporter comme <span style="white-space: nowrap;">{{CSSxRef(":-moz-only-whitespace")}}</span> mais, à l'heure actuelle, aucun navigateur ne prend en charge cette fonctionnalité.</p> +<div class="note"> +<p><strong>Note :</strong> Avec {{SpecName("CSS4 Selectors", "#the-empty-pseudo")}}, le sélecteur <code>:empty</code> a été modifié afin de se comporter comme {{CSSxRef(":-moz-only-whitespace")}} mais, à l'heure actuelle, aucun navigateur ne prend en charge cette fonctionnalité.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -59,15 +59,15 @@ div:empty { <h2 id="Accessibilité">Accessibilité</h2> -<p>Les technologies d'assistance telles que les lecteurs d'écran ne peuvent pas analyser un contenu interactif vide. Tout contenu interactif doit avoir un nom accessible, fourni sous la forme d'une valeur textuelle via l'élément parent du contrôle ({{HTMLElement("a")}}, {{HTMLElement("button")}}, etc.). Les noms accessibles pemettent d'exposer le contrôle interactif au sein de <a href="/fr/Apprendre/a11y/What_is_accessibility">l'arbre d'accessibilité</a>, une API communiquant des informations qui peuvent être utilisées par les technologies d'assistance.</p> +<p>Les technologies d'assistance telles que les lecteurs d'écran ne peuvent pas analyser un contenu interactif vide. Tout contenu interactif doit avoir un nom accessible, fourni sous la forme d'une valeur textuelle via l'élément parent du contrôle ({{HTMLElement("a")}}, {{HTMLElement("button")}}, etc.). Les noms accessibles pemettent d'exposer le contrôle interactif au sein de <a href="/fr/docs/Learn/Accessibility/What_is_accessibility">l'arbre d'accessibilité</a>, une API communiquant des informations qui peuvent être utilisées par les technologies d'assistance.</p> <p>Le texte fournissant le nom accessible peut être masqué grâce <a href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link" rel="noopener">à des propriétés</a> afin de le retirer visuellement mais de le conserver pour les technologies d'assistance. Cette méthode est généralement utilisée pour les boutons utilisant une simple icône comme indication.</p> <ul> - <li><a href="https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/" hreflang="en">Qu'est-ce qu'un nom accessible ? The Paciello Group (en anglais)</a></li> - <li><a href="https://gomakethings.com/hidden-content-for-better-a11y/" hreflang="en"><em lang="en">Hidden content for better a11y</em> (en anglais)</a></li> + <li><a href="https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/">Qu'est-ce qu'un nom accessible ? The Paciello Group (en anglais)</a></li> + <li><a href="https://gomakethings.com/hidden-content-for-better-a11y/"><i lang="en">Hidden content for better a11y</i> (en anglais)</a></li> <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">Comprendre la règle WCAG 2.4</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html" hreflang="en"><em lang="en">Understanding Success Criterion 2.4.4</em> (en anglais) </a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html"><i lang="en">Understanding Success Criterion 2.4.4</i> (en anglais) </a></li> </ul> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/_colon_enabled/index.html b/files/fr/web/css/_colon_enabled/index.html index 3b3cc1ba71..09241724f6 100644 --- a/files/fr/web/css/_colon_enabled/index.html +++ b/files/fr/web/css/_colon_enabled/index.html @@ -24,7 +24,6 @@ input:enabled { <p>Dans cet exemple, les textes des éléments activés seront verts alors que ceux des éléments désactivés seront gris. L'utilisateur peut ainsi reconnaître les éléments avec lesquels interagir.</p> -<div id="Enabled_Disabled_Inputs_Example"> <h3 id="HTML">HTML</h3> <pre class="brush:html"><form action="url_of_form"> @@ -52,7 +51,6 @@ input:disabled { <h3 id="Résultat">Résultat</h3> <div>{{EmbedLiveSample("Exemples",550,95)}}</div> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/_colon_first-child/index.html b/files/fr/web/css/_colon_first-child/index.html index 4b4d1012c9..f82d5e854b 100644 --- a/files/fr/web/css/_colon_first-child/index.html +++ b/files/fr/web/css/_colon_first-child/index.html @@ -19,7 +19,7 @@ p:first-child { }</pre> <div class="note"> -<p><strong>Note </strong>: Tel que défini initialement, il était nécessaire que l'élément sélectionné ait un élément parent. À partir de la spécification de niveau 4 pour les sélecteurs, cela n'est plus obligatoire.</p> +<p><strong>Note :</strong> Tel que défini initialement, il était nécessaire que l'élément sélectionné ait un élément parent. À partir de la spécification de niveau 4 pour les sélecteurs, cela n'est plus obligatoire.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/_colon_first-of-type/index.html b/files/fr/web/css/_colon_first-of-type/index.html index 4aa63d0fc8..c4582933bd 100644 --- a/files/fr/web/css/_colon_first-of-type/index.html +++ b/files/fr/web/css/_colon_first-of-type/index.html @@ -49,7 +49,7 @@ p:first-of-type { <div>{{EmbedLiveSample('Exemples','100%', '120')}}</div> <div class="note"> -<p><strong>Note </strong><strong>:</strong> On peut voir ici que c'est le sélecteur universel qui est pris en compte quand aucun sélecteur simple n'est écrit directement avec la pseudo-classe.</p> +<p><strong>Note :</strong> On peut voir ici que c'est le sélecteur universel qui est pris en compte quand aucun sélecteur simple n'est écrit directement avec la pseudo-classe.</p> </div> <div class="note"> diff --git a/files/fr/web/css/_colon_first/index.html b/files/fr/web/css/_colon_first/index.html index 9587b8d0df..00a1c2771e 100644 --- a/files/fr/web/css/_colon_first/index.html +++ b/files/fr/web/css/_colon_first/index.html @@ -1,17 +1,17 @@ --- title: ':first' -slug: 'Web/CSS/:first' +slug: Web/CSS/:first tags: - CSS - Pseudo-classe - Reference -translation_of: 'Web/CSS/:first' +translation_of: Web/CSS/:first --- <div>{{CSSRef}}</div> <p>La pseudo-classe <strong><code>:first</code></strong>, liée à la règle @ {{cssxref("@page")}} décrit la mise en forme de la première page lors de l'impression d'un document. ( voir {{cssxref(":first-child")}} pour le premier élément d'un noeud )</p> -<pre class="brush: css no-line-numbers notranslate">/* Cible le contenu de la première page */ +<pre class="brush: css no-line-numbers">/* Cible le contenu de la première page */ /* lorsqu'on imprime */ @page :first { margin-left: 50%; @@ -26,7 +26,7 @@ translation_of: 'Web/CSS/:first' <li>Les propriétés liées aux sauts de page : {{cssxref("page-break")}}</li> </ul> -<p>De plus, seules <a href="/fr/docs/Web/CSS/length#Unités_de_longueur_absolues">les unités absolues</a> peuvent être utilisées pour les marges.</p> +<p>De plus, seules <a href="/fr/docs/Web/CSS/length#unités_de_longueur_absolues">les unités absolues</a> peuvent être utilisées pour les marges.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -36,7 +36,7 @@ translation_of: 'Web/CSS/:first' <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">@page :first { +<pre class="brush: css">@page :first { margin-left: 50%; margin-top: 50%; } @@ -47,13 +47,13 @@ p { <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>Première page.</p> +<pre class="brush: html"><p>Première page.</p> <p>Deuxième page.</p> <button>Imprimer</button></pre> <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate">document.querySelector("button").addEventListener('click', () => { +<pre class="brush: js">document.querySelector("button").addEventListener('click', () => { window.print(); });</pre> diff --git a/files/fr/web/css/_colon_focus-visible/index.html b/files/fr/web/css/_colon_focus-visible/index.html index ecdd7ca410..8354f4329b 100644 --- a/files/fr/web/css/_colon_focus-visible/index.html +++ b/files/fr/web/css/_colon_focus-visible/index.html @@ -125,8 +125,6 @@ custom-button:focus-visible { <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>{{Compat("css.selectors.focus-visible")}}</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/_colon_fullscreen/index.html b/files/fr/web/css/_colon_fullscreen/index.html index 5e63891e2c..70a63996e7 100644 --- a/files/fr/web/css/_colon_fullscreen/index.html +++ b/files/fr/web/css/_colon_fullscreen/index.html @@ -10,7 +10,7 @@ translation_of: 'Web/CSS/:fullscreen' --- <div>{{CSSRef}}</div> -<p><span class="seoSummary">La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:fullscreen</code></strong> permet de cibler tout élément qui est en mode plein écran. Si plusieurs éléments ont été mis en plein écran, tous ces éléments seront ciblés.</span></p> +<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:fullscreen</code></strong> permet de cibler tout élément qui est en mode plein écran. Si plusieurs éléments ont été mis en plein écran, tous ces éléments seront ciblés.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/_colon_host()/index.html b/files/fr/web/css/_colon_host()/index.html index 9533eaabf0..f2bbe1b429 100644 --- a/files/fr/web/css/_colon_host()/index.html +++ b/files/fr/web/css/_colon_host()/index.html @@ -14,7 +14,7 @@ translation_of: 'Web/CSS/:host()' <p>Le scénario principal pour utiliser cette fonction consiste à vouloir cibler une certaine classe d'éléments personnalisés : pour cela, on passera la classe comme argument de la fonction <code>:host()</code>. Cette fonction ne peut pas être utilisée avec un sélecteur de descendant, pour cela il faudra utiliser {{cssxref(":host-context()")}}.</p> <div class="note"> -<p><strong>Note</strong> : Cette fonction n'a aucun effet si elle est utilisée en dehors d'un <em>shadow DOM</em>.</p> +<p><strong>Note :</strong> Cette fonction n'a aucun effet si elle est utilisée en dehors d'un <em>shadow DOM</em>.</p> </div> <pre class="brush: css no-line-numbers">/* On cible l'hôte du shadow DOM uniquement s'il diff --git a/files/fr/web/css/_colon_host-context()/index.html b/files/fr/web/css/_colon_host-context()/index.html index 606220fd36..6457aa73c3 100644 --- a/files/fr/web/css/_colon_host-context()/index.html +++ b/files/fr/web/css/_colon_host-context()/index.html @@ -16,7 +16,7 @@ translation_of: 'Web/CSS/:host-context()' <p>Un cas d'usage fréquent consiste à utilise un sélecteur de descendant — <code>h1</code> par exemple — afin de sélectionner uniquement les instances d'un élément personnalisé (<em>custom element</em>) présentes à l'intérieur d'un élément <code><h1></code>.</p> <div class="note"> -<p><strong>Note</strong> : Cette pseudo-classe n'a aucun effet en dehors d'un <em>shadow DOM</em>.</p> +<p><strong>Note :</strong> Cette pseudo-classe n'a aucun effet en dehors d'un <em>shadow DOM</em>.</p> </div> <pre class="brush: css no-line-numbers">/* Cible un hôte uniquement si c'est un descendant diff --git a/files/fr/web/css/_colon_host/index.html b/files/fr/web/css/_colon_host/index.html index 93b5e59bde..e8a2a7a89f 100644 --- a/files/fr/web/css/_colon_host/index.html +++ b/files/fr/web/css/_colon_host/index.html @@ -12,7 +12,7 @@ translation_of: 'Web/CSS/:host' <p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:host</code></strong> permet de cibler l'hôte d'un <em><a href="/fr/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a></em> contenant le CSS à utiliser pour cet hôte. Autrement dit, elle permet de sélectionner un élément personnalisé (<em>custom element</em>) depuis l'intérieur du <em>shadow DOM</em>.</p> <div class="note"> -<p><strong>Note </strong>: Cette pseudo-classe n'a aucun effet lorsqu'elle est utilisée à l'extérieur d'un <em>shadow DOM</em>.</p> +<p><strong>Note :</strong> Cette pseudo-classe n'a aucun effet lorsqu'elle est utilisée à l'extérieur d'un <em>shadow DOM</em>.</p> </div> <pre class="brush: css no-line-numbers">/* Cible la racine d'un hôte de shadow DOM */ @@ -71,7 +71,7 @@ style.textContent = 'span:hover { text-decoration: underline; }' + </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2> +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("css.selectors.host")}}</p> diff --git a/files/fr/web/css/_colon_hover/index.html b/files/fr/web/css/_colon_hover/index.html index cbaa7781ed..3871067514 100644 --- a/files/fr/web/css/_colon_hover/index.html +++ b/files/fr/web/css/_colon_hover/index.html @@ -1,11 +1,11 @@ --- title: ':hover' -slug: 'Web/CSS/:hover' +slug: Web/CSS/:hover tags: - CSS - Pseudo-classe - Reference -translation_of: 'Web/CSS/:hover' +translation_of: Web/CSS/:hover --- <div>{{CSSRef}}</div> @@ -19,9 +19,11 @@ a:hover { <p>La mise en forme ciblée par cette pseudo-classe peut être surchargée par d'autres pseudo-classes relatives aux liens hypertextes comme {{cssxref(":link")}}, {{cssxref(":visited")}}, et {{cssxref(":active")}}, apparaissant dans des règles subséquentes. Pour décorer les liens sans effet de bord problématique, on placera la règle <code>:hover</code> après les règles <code>:link</code> et <code>:visited</code> mais avant la règle <code>:active</code> (l'ordre est <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code> – un moyen mnémotechnique est de se souvenir des initiales LVHA) tandis que l'ordre de la règle {{cssxref(":focus")}} est indifférent.</p> -<p>La pseudo-classe <code>:hover</code> peut être appliquée à n'importe quel <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a>. {{experimental_inline}}</p> +<p>La pseudo-classe <code>:hover</code> peut être appliquée à n'importe quel <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-élément</a>. {{experimental_inline}}</p> -<div class="note"><strong>Note d'utilisation :</strong> sur les écrans tactiles, <code>:hover</code> est problématique voire impossible. La pseudo-classe <code>:hover</code> n'est jamais valide, ou seulement pendant un très court instant après avoir touché l'élément. Puisque les appareils à écrans tactiles sont très courants, il est important que les développeurs web ne placent pas de contenu accessible seulement lors du survol, puisque ce contenu sera caché pour les utilisateurs de tels appareils.</div> +<div class="note"> + <p><strong>Note :</strong> sur les écrans tactiles, <code>:hover</code> est problématique voire impossible. La pseudo-classe <code>:hover</code> n'est jamais valide, ou seulement pendant un très court instant après avoir touché l'élément. Puisque les appareils à écrans tactiles sont très courants, il est important que les développeurs web ne placent pas de contenu accessible seulement lors du survol, puisque ce contenu sera caché pour les utilisateurs de tels appareils.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/_colon_in-range/index.html b/files/fr/web/css/_colon_in-range/index.html index 5283d2fcba..b8c69639c9 100644 --- a/files/fr/web/css/_colon_in-range/index.html +++ b/files/fr/web/css/_colon_in-range/index.html @@ -1,11 +1,11 @@ --- title: ':in-range' -slug: 'Web/CSS/:in-range' +slug: Web/CSS/:in-range tags: - CSS - Pseudo-classe - Reference -translation_of: 'Web/CSS/:in-range' +translation_of: Web/CSS/:in-range --- <div>{{CSSRef}}</div> @@ -20,7 +20,9 @@ input:in-range { <p>Cette pseudo-classe s'avère utile lorsqu'on souhaite fournir une indication visuelle quand la valeur est en dehors de la fourchette autorisée.</p> -<div class="note"><strong>Note :</strong> Cette pseudo-classe ne s'applique qu'aux éléments qui ont des limites de valeurs (autrement dit la valeur doit être comprise dans un intervalle donné). Sans ces limitations, l'élément ne pourra pas être vu comme <em>dans l'intervalle</em> ou <em>en dehors de l'intervalle</em>.</div> +<div class="note"> + <p><strong>Note :</strong> Cette pseudo-classe ne s'applique qu'aux éléments qui ont des limites de valeurs (autrement dit la valeur doit être comprise dans un intervalle donné). Sans ces limitations, l'élément ne pourra pas être vu comme <em>dans l'intervalle</em> ou <em>en dehors de l'intervalle</em>.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -30,7 +32,7 @@ input:in-range { <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight:[5]">li { +<pre class="brush: css">li { list-style: none; margin-bottom: 1em; } @@ -51,7 +53,6 @@ input:out-of-range + label::after { content:' non autorisée !'; }</pre> -<div id="example"> <h3 id="HTML">HTML</h3> <pre class="brush: html; highlight:[3]"><form action="" id="form1"> @@ -64,7 +65,6 @@ input:out-of-range + label::after { </form></pre> <h3 id="Résultat">Résultat</h3> -</div> <div>{{EmbedLiveSample('Exemples',600,140)}}</div> @@ -100,5 +100,5 @@ input:out-of-range + label::after { <ul> <li>{{cssxref(":out-of-range")}}</li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Guide de validation pour les données de formulaire</a></li> + <li><a href="/fr/docs/Learn/Forms/Form_validation">Guide de validation pour les données de formulaire</a></li> </ul> diff --git a/files/fr/web/css/_colon_indeterminate/index.html b/files/fr/web/css/_colon_indeterminate/index.html index cef942a8b3..a94a588e4b 100644 --- a/files/fr/web/css/_colon_indeterminate/index.html +++ b/files/fr/web/css/_colon_indeterminate/index.html @@ -1,11 +1,11 @@ --- title: ':indeterminate' -slug: 'Web/CSS/:indeterminate' +slug: Web/CSS/:indeterminate tags: - CSS - Pseudo-classe - Reference -translation_of: 'Web/CSS/:indeterminate' +translation_of: Web/CSS/:indeterminate --- <div>{{CSSRef}}</div> @@ -20,8 +20,8 @@ input:indeterminate { <p>Cela inclut :</p> <ul> - <li>un élément <code><a href="/fr/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code> dont la propriété du DOM <code>indeterminate</code> est fixée à <code>true</code> via du code JavaScript</li> - <li>des éléments <code><a href="/fr/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code> dont tous les boutons radio du groupe sont décochés</li> + <li>un élément <code><a href="/fr/docs/Web/HTML/Element/Input/checkbox"><input type="checkbox"></a></code> dont la propriété du DOM <code>indeterminate</code> est fixée à <code>true</code> via du code JavaScript</li> + <li>des éléments <code><a href="/fr/docs/Web/HTML/Element/Input/radio"><input type="radio"></a></code> dont tous les boutons radio du groupe sont décochés</li> <li>des éléments {{HTMLElement("progress")}} dans un état indéterminé.</li> </ul> @@ -35,7 +35,7 @@ input:indeterminate { <h4 id="CSS">CSS</h4> -<pre class="brush: css; hightlight[5]">input, span { +<pre class="brush: css">input, span { background: red; } @@ -71,7 +71,7 @@ for(var i = 0; i < inputs.length; i++) { <h4 id="CSS_2">CSS</h4> -<pre class="brush: css; hightlight[5]">progress:indeterminate { +<pre class="brush: css">progress:indeterminate { opacity: 0.5; box-shadow: 0 0 2px 1px red; } diff --git a/files/fr/web/css/_colon_is/index.html b/files/fr/web/css/_colon_is/index.html index beee9542e7..3268425e30 100644 --- a/files/fr/web/css/_colon_is/index.html +++ b/files/fr/web/css/_colon_is/index.html @@ -1,19 +1,19 @@ --- title: ':is() (:matches(), :any())' -slug: 'Web/CSS/:is' +slug: Web/CSS/:is tags: - CSS - Experimental - Pseudo-classe - Reference - Web -translation_of: 'Web/CSS/:is' +translation_of: Web/CSS/:is --- <div>{{CSSRef}}{{SeeCompatTable}}</div> <p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:is()</code></strong> prend comme argument une liste de sélecteurs, et cible tous les éléments sélectionnés par chaque sélecteur de cette liste. Cela permet d'écrire des sélecteurs expansifs de façon plus concise.</p> -<p>La plupart des navigateurs prennent encore en charge cette fonctionnalité via <code>:matches()</code>, ou via la pseudo-classe préfixée — <code>:any()</code> (anciennes versions de Chrome, Firefox et Safari). <code>:any()</code> fonctionne exactement comme <code>:matches()</code> et <code>:is()</code> mais nécessite l'utilisation de préfixes et ne prend pas en charge <a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs">les sélecteurs complexes</a>.</p> +<p>La plupart des navigateurs prennent encore en charge cette fonctionnalité via <code>:matches()</code>, ou via la pseudo-classe préfixée — <code>:any()</code> (anciennes versions de Chrome, Firefox et Safari). <code>:any()</code> fonctionne exactement comme <code>:matches()</code> et <code>:is()</code> mais nécessite l'utilisation de préfixes et ne prend pas en charge <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">les sélecteurs complexes</a>.</p> <div class="note"> <p><strong>Note :</strong> <code>:matches()</code> a été renommé en <code>is()</code> d'après <a href="https://github.com/w3c/csswg-drafts/issues/3258">l'<em>issue</em> 3258 du CSSWG</a>.</p> @@ -158,13 +158,13 @@ dir ol dir, dir ul dir, dir menu dir, dir dir dir { list-style-type: square; }</pre> -<p>En revanche, le modèle d'usage suivant n'est pas recommandée (cf. <a href="#Issues_with_performance_and_specificity">la section qui suit sur les performances</a>) :</p> +<p>En revanche, le modèle d'usage suivant n'est pas recommandée (cf. <a href="#issues_with_performance_and_specificity">la section qui suit sur les performances</a>) :</p> <pre class="brush: css">:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) :matches(ul, menu, dir) { list-style-type: square; }</pre> -<h3 id="Notes" name="Notes">Simplifier les sélecteurs de section</h3> +<h3 id="Notes">Simplifier les sélecteurs de section</h3> <p>La pseudo-classe <code>:matches</code> est particulièrement utile lorsqu'on manipule les <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">sections et en-têtes</a> HTML5. {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} et {{HTMLElement("nav")}} étant souvent imbriqués les uns dans les autres, les mettre en forme (sans <code>:matches()</code>) s'avèrerait plutôt compliqué.</p> @@ -230,7 +230,7 @@ h1 { <h2 id="Notes_2">Notes</h2> -<h3 id="Issues_with_performance_and_specificity" name="Issues_with_performance_and_specificity">Problèmes de performances avec <code>any():</code> et la spécificité</h3> +<h3 id="Issues_with_performance_and_specificity">Problèmes de performances avec <code>any():</code> et la spécificité</h3> <p>{{Bug(561154)}} suit un problème de spécificité relatif à <code>:-moz-any()</code>. L'implémentation place <code>:-moz-any()</code> dans la catégorie des règles universelles, ce qui signifie que si on l'utilise comme sélecteur le plus à droite, ce sera plus lent que d'utiliser un sélecteur d'identifiant, de classe ou de balise comme premier sélecteur.</p> @@ -269,7 +269,7 @@ h1 { </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2> +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("css.selectors.is")}}</p> diff --git a/files/fr/web/css/_colon_last-of-type/index.html b/files/fr/web/css/_colon_last-of-type/index.html index f2c319d43b..8feeeed2f2 100644 --- a/files/fr/web/css/_colon_last-of-type/index.html +++ b/files/fr/web/css/_colon_last-of-type/index.html @@ -18,7 +18,7 @@ p:last-of-type { }</pre> <div class="note"> -<p><strong>Note : </strong>Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce n'est plus nécessaire depuis (spécification pour les sélecteurs de CSS4).</p> +<p><strong>Note :</strong> Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce n'est plus nécessaire depuis (spécification pour les sélecteurs de CSS4).</p> </div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/_colon_left/index.html b/files/fr/web/css/_colon_left/index.html index 44523734fc..545f6f24f1 100644 --- a/files/fr/web/css/_colon_left/index.html +++ b/files/fr/web/css/_colon_left/index.html @@ -20,7 +20,9 @@ translation_of: 'Web/CSS/:left' <p>La position de la page soit à gauche ou à droite dépend de la direction d'écriture globale du document. Par exemple, si la première page est selon la direction « gauche à droite » alors elle sera une page {{cssxref(":right")}}, si elle est définie de « droite à gauche » ce sera une page <code>:left</code>.</p> -<div class="note"><strong>Note :</strong> Il n'est pas possible de changer toutes les propriétés CSS. Seules les propriétés {{cssxref("margin")}}, {{cssxref("padding")}}, {{cssxref("border")}} et {{cssxref("background")}} de <strong>la boîte correspondant à la page</strong> peuvent être modifiées. Toutes les autres propriétés CSS seront ignorées. Seule la boîte correspondant à la page pourra être affectée, le contenu du document ne pourra pas être modifié.</div> +<div class="note"> + <p><strong>Note :</strong> Il n'est pas possible de changer toutes les propriétés CSS. Seules les propriétés {{cssxref("margin")}}, {{cssxref("padding")}}, {{cssxref("border")}} et {{cssxref("background")}} de <strong>la boîte correspondant à la page</strong> peuvent être modifiées. Toutes les autres propriétés CSS seront ignorées. Seule la boîte correspondant à la page pourra être affectée, le contenu du document ne pourra pas être modifié.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/_colon_not/index.html b/files/fr/web/css/_colon_not/index.html index 56d703d285..8cf347c1fc 100644 --- a/files/fr/web/css/_colon_not/index.html +++ b/files/fr/web/css/_colon_not/index.html @@ -1,11 +1,11 @@ --- title: ':not' -slug: 'Web/CSS/:not' +slug: Web/CSS/:not tags: - CSS - Pseudo-classe - Reference -translation_of: 'Web/CSS/:not' +translation_of: Web/CSS/:not --- <div>{{CSSRef}}</div> @@ -17,25 +17,25 @@ translation_of: 'Web/CSS/:not' color: blue; }</pre> -<p>La <a href="/fr/Apprendre/CSS/Les_bases/La_cascade_et_l_héritage">spécificité</a> de la pseudo-classe <code>:not</code> est la spécificité de son argument. La pseudo-classe de négation n'ajoute pas de spécificité, contrairement aux autres pseudo-classes.</p> +<p>La <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">spécificité</a> de la pseudo-classe <code>:not</code> est la spécificité de son argument. La pseudo-classe de négation n'ajoute pas de spécificité, contrairement aux autres pseudo-classes.</p> <div class="note"> -<p><strong>Notes :</strong></p> - +<p><strong>Note :</strong> <ul> <li>Attention à ne pas écrire de sélecteurs inutiles à l'aide de cette pseudo-classe. Ainsi, <code>:not(*) </code>va exclure tous les éléments et ne sera jamais appliqué.</li> - <li>À l'inverse, il est possible d'augmenter la <a href="/fr/docs/Web/CSS/Spécificité">spécificitié</a> d'un sélecteur. Ainsi. <code>toto:not(truc)</code> ciblera les mêmes éléments que <code>toto</code>, mais avec une spécificité plus forte.</li> + <li>À l'inverse, il est possible d'augmenter la <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">spécificitié</a> d'un sélecteur. Ainsi. <code>toto:not(truc)</code> ciblera les mêmes éléments que <code>toto</code>, mais avec une spécificité plus forte.</li> <li><code>:not(toto){}</code> ciblera tout élément qui n'est pas <code>toto</code>, <strong>notamment {{HTMLElement("html")}} et {{HTMLElement("body")}}</strong>.</li> <li>Ce sélecteur ne s'applique qu'à un seul élément. Il ne peut pas être utilisé afin d'exclure tous les ancêtres. Ainsi, <code>body :not(table) a</code> s'appliquera aux liens contenus dans un tableau car {{HTMLElement("tr")}} ne sera pas ciblé par la partie <code>:not()</code> du sélecteur.</li> </ul> +</p> </div> <h2 id="Syntaxe">Syntaxe</h2> -<p>La pseudo-classe <code>:not()</code> prend en argument une liste d'un ou plusieurs sélecteurs séparés par des virgules. Cette liste ne doit pas contenir d'autre sélecteur de négation ou <a href="/fr/docs/Web/CSS/Pseudo-éléments">de pseudo-élément</a>.</p> +<p>La pseudo-classe <code>:not()</code> prend en argument une liste d'un ou plusieurs sélecteurs séparés par des virgules. Cette liste ne doit pas contenir d'autre sélecteur de négation ou <a href="/fr/docs/Web/CSS/Pseudo-elements">de pseudo-élément</a>.</p> <div class="warning"> -<p><strong>Attention</strong>, la possibilité d'avoir plusieurs sélecteurs est expérimentale et n'est pas encore largement prise en charge.</p> +<p><strong>Attention :</strong> la possibilité d'avoir plusieurs sélecteurs est expérimentale et n'est pas encore largement prise en charge.</p> </div> {{csssyntax}} diff --git a/files/fr/web/css/_colon_nth-child/index.html b/files/fr/web/css/_colon_nth-child/index.html index ca67129ec6..0e9b1efcac 100644 --- a/files/fr/web/css/_colon_nth-child/index.html +++ b/files/fr/web/css/_colon_nth-child/index.html @@ -83,7 +83,6 @@ body :nth-child(4n) { <h3 id="Exemple_démonstratif">Exemple démonstratif</h3> -<div id="Exemple_demonstratif"> <h4 id="CSS">CSS</h4> <pre class="brush: css">html { @@ -165,7 +164,6 @@ span, div em { <span>Puis un dernier</span> </div> </pre> -</div> <h4 id="Résultat">Résultat</h4> diff --git a/files/fr/web/css/_colon_nth-of-type/index.html b/files/fr/web/css/_colon_nth-of-type/index.html index 54d7fe30b2..9a64cd08c6 100644 --- a/files/fr/web/css/_colon_nth-of-type/index.html +++ b/files/fr/web/css/_colon_nth-of-type/index.html @@ -1,13 +1,13 @@ --- title: ':nth-of-type' -slug: 'Web/CSS/:nth-of-type' +slug: Web/CSS/:nth-of-type tags: - CSS - Mise en page - Pseudo-classe - Reference - Web -translation_of: 'Web/CSS/:nth-of-type' +translation_of: Web/CSS/:nth-of-type --- <div>{{CSSRef}}</div> @@ -39,7 +39,7 @@ p:nth-of-type(4n) { <h3 id="HTML">HTML</h3> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="punctuation token"><div> +<pre class="brush: html"><div> <div>Cet élément n'est pas compté.</div> <p>1er paragraphe.</p> <p>2e paragraphe.</p> @@ -47,24 +47,24 @@ p:nth-of-type(4n) { <p>3e paragraphe.</p> <p>4e paragraphe.</p> </div> -</span></span></code></pre> +</pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css line-numbers language-css"><code class="language-css">/* Paragraphes impairs */ +<pre class="brush: css line-numbers language-css">/* Paragraphes impairs */ p:nth-of-type(2n+1) { color: red; } /* Paragraphes pairs */ -</code><code class="language-css"><span class="selector token">p<span class="pseudo-class token">:nth-of-type(2n)</span> </span><span class="punctuation token">{</span> - <span class="property token">color</span><span class="punctuation token">:</span> blue<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="comment token">/* Premier paragraphe */</span> -<span class="selector token">p<span class="pseudo-class token">:nth-of-type(1)</span> </span><span class="punctuation token">{</span> - <span class="property token">font-weight</span><span class="punctuation token">:</span> bold<span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +p:nth-of-type(2n) { + color: blue; +} + +/* Premier paragraphe */ +p:nth-of-type(1) { + font-weight: bold; +}</pre> <h3 id="Résultat">Résultat</h3> diff --git a/files/fr/web/css/_colon_only-child/index.html b/files/fr/web/css/_colon_only-child/index.html index d47ce1274a..0f992ae22e 100644 --- a/files/fr/web/css/_colon_only-child/index.html +++ b/files/fr/web/css/_colon_only-child/index.html @@ -65,7 +65,7 @@ p:only-child { <h4 id="CSS_2">CSS</h4> -<pre class="brush: css l">li li { +<pre class="brush: css">li li { list-style-type : disc; } @@ -77,7 +77,7 @@ li:only-child { <h4 id="HTML_2">HTML</h4> -<pre class="brush: html language-html"><ol> +<pre class="brush: html"><ol> <li>Premier <ul> <li>Ceci est l'unique élément enfant</li> diff --git a/files/fr/web/css/_colon_only-of-type/index.html b/files/fr/web/css/_colon_only-of-type/index.html index 43cab12bcd..4c1042a821 100644 --- a/files/fr/web/css/_colon_only-of-type/index.html +++ b/files/fr/web/css/_colon_only-of-type/index.html @@ -17,9 +17,8 @@ p:only-of-type { background-color: lime; }</pre> -<div class="note"><strong>Note :</strong> Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce n'est plus nécessaire depuis (spécification pour les sélecteurs de CSS4). - -<p> </p> +<div class="note"> + <p><strong>Note :</strong> Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce n'est plus nécessaire depuis (spécification pour les sélecteurs de CSS4).</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -30,7 +29,7 @@ p:only-of-type { <h3 id="CSS">CSS</h3> -<pre class="brush: css l">li li { +<pre class="brush: css">li li { list-style-type : disc; } @@ -42,7 +41,7 @@ li:only-of-type { <h3 id="HTML">HTML</h3> -<pre class="brush: html language-html"><ol> +<pre class="brush: html"><ol> <li>Premier <ul> <li>Ceci est l'unique li</li> diff --git a/files/fr/web/css/_colon_out-of-range/index.html b/files/fr/web/css/_colon_out-of-range/index.html index 8db6dc91da..44486cf80d 100644 --- a/files/fr/web/css/_colon_out-of-range/index.html +++ b/files/fr/web/css/_colon_out-of-range/index.html @@ -1,11 +1,11 @@ --- title: ':out-of-range' -slug: 'Web/CSS/:out-of-range' +slug: Web/CSS/:out-of-range tags: - CSS - Pseudo-classe - Reference -translation_of: 'Web/CSS/:out-of-range' +translation_of: Web/CSS/:out-of-range --- <div>{{CSSRef}}</div> @@ -18,7 +18,9 @@ input:out-of-range { background-color: rgba(255, 0, 0, 0.25); }</pre> -<div class="note"><strong>Note :</strong> Cette pseudo-classe s'applique seulement aux éléments qui ont des valeurs limites.</div> +<div class="note"> + <p><strong>Note :</strong> Cette pseudo-classe s'applique seulement aux éléments qui ont des valeurs limites.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -28,7 +30,7 @@ input:out-of-range { <h3 id="HTML">HTML</h3> -<pre class="brush: html; highlight:[4]"><form action="" id="form1"> +<pre class="brush: html"><form action="" id="form1"> <ul>Les valeurs entre 1 et 10 sont autorisées. <li> <input id="valeur1" name="valeur1" type="number" placeholder="1 à 10" min="1" max="10" value="12"> @@ -101,5 +103,5 @@ input:out-of-range + label::after { <ul> <li>{{cssxref(":in-range")}}</li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Le guide de validation des données de formulaire</a></li> + <li><a href="/fr/docs/Learn/Forms/Form_validation">Le guide de validation des données de formulaire</a></li> </ul> diff --git a/files/fr/web/css/_colon_placeholder-shown/index.html b/files/fr/web/css/_colon_placeholder-shown/index.html index e6fe947e5b..93f571be8a 100644 --- a/files/fr/web/css/_colon_placeholder-shown/index.html +++ b/files/fr/web/css/_colon_placeholder-shown/index.html @@ -27,17 +27,15 @@ translation_of: 'Web/CSS/:placeholder-shown' <h4 id="CSS">CSS</h4> -<div class="hidden"> -<pre class="brush: css">input:-ms-input-placeholder { +<pre class="brush: css hidden">input:-ms-input-placeholder { border-color: silver; } input:-moz-placeholder { border-color: silver; }</pre> -</div> -<pre class="brush: css; highlight[6]">input { +<pre class="brush: css">input { border: 2px solid black; padding: 3px; } @@ -64,8 +62,7 @@ input:-moz-placeholder { <h4 id="CSS_2">CSS</h4> -<div class="hidden"> -<pre class="brush: css">input:-ms-input-placeholder { +<pre class="brush: css hidden">input:-ms-input-placeholder { text-overflow: ellipsis; } @@ -90,8 +87,7 @@ input:-moz-placeholder { <h4 id="CSS_3">CSS</h4> -<div class="hidden"> -<pre class="brush: css">input:-ms-input-placeholder { +<pre class="brush: css hidden">input:-ms-input-placeholder { color: red; font-style: italic; } @@ -100,7 +96,6 @@ input:-moz-placeholder { color: red; font-style: italic; }</pre> -</div> <pre class="brush: css">input:placeholder-shown { color: red; @@ -134,8 +129,7 @@ input:-moz-placeholder { <h4 id="CSS_4">CSS</h4> -<div class="hidden"> -<pre class="brush: css">input.studentid:-ms-input-placeholder { +<pre class="brush: css hidden">input.studentid:-ms-input-placeholder { background-color: yellow; color: red; font-style: italic; @@ -146,9 +140,8 @@ input.studentid:-moz-placeholder { color: red; font-style: italic; }</pre> -</div> -<pre class="brush: css; highlight[6]">input { +<pre class="brush: css">input { background-color: #E8E8E8; color: black; } diff --git a/files/fr/web/css/_colon_read-only/index.html b/files/fr/web/css/_colon_read-only/index.html index 9040f249b6..41a0a4a663 100644 --- a/files/fr/web/css/_colon_read-only/index.html +++ b/files/fr/web/css/_colon_read-only/index.html @@ -25,7 +25,7 @@ input:read-only { }</pre> <div class="note"> -<p><strong>Note </strong>: Ce sélecteur ne permet pas de cibler que les éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}} avec {{htmlattrxref("readonly", "input")}}. Il permet de sélectionner n'importe quel élément qui ne peut pas être édité par l'utilisateur.</p> +<p><strong>Note :</strong> Ce sélecteur ne permet pas de cibler que les éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}} avec {{htmlattrxref("readonly", "input")}}. Il permet de sélectionner n'importe quel élément qui ne peut pas être édité par l'utilisateur.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -59,7 +59,7 @@ p[contenteditable="true"] { color: blue; } <p>{{EmbedLiveSample("Exemples")}}</p> -<h2 class="editable" id="Spécifications">Spécifications</h2> +<h2 id="Spécifications">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/css/_colon_right/index.html b/files/fr/web/css/_colon_right/index.html index 9b7584c2c5..ecaaba1862 100644 --- a/files/fr/web/css/_colon_right/index.html +++ b/files/fr/web/css/_colon_right/index.html @@ -19,7 +19,9 @@ translation_of: 'Web/CSS/:right' <p>La position de la page (à gauche ou à droite) dépend de la direction d'écriture appliquée au document. Si la première page est écrite de la gauche vers la droite, alors ce sera une page droite, sinon ce sera une page gauche (qui pourra alors être ciblée avec {{cssxref(":left")}}).</p> -<div class="note"><strong>Note :</strong> Il n'est pas possible de modifier toutes les propriétés CSS. Seules les propriétés {{cssxref("margin")}}, {{cssxref("padding")}}, {{cssxref("border")}}, and {{cssxref("background")}} <strong>de la boîte correspondant à la page</strong> peuvent être modifiées. Toutes les autres propriétés CSS seront ignorées, et seulement la boîte correspondant à la page, et en aucun cas le contenu du document pourront être affectés.</div> +<div class="note"> + <p><strong>Note :</strong> Il n'est pas possible de modifier toutes les propriétés CSS. Seules les propriétés {{cssxref("margin")}}, {{cssxref("padding")}}, {{cssxref("border")}}, and {{cssxref("background")}} <strong>de la boîte correspondant à la page</strong> peuvent être modifiées. Toutes les autres propriétés CSS seront ignorées, et seulement la boîte correspondant à la page, et en aucun cas le contenu du document pourront être affectés.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/_colon_target/index.html b/files/fr/web/css/_colon_target/index.html index 0ae8e2b7f7..183349cc73 100644 --- a/files/fr/web/css/_colon_target/index.html +++ b/files/fr/web/css/_colon_target/index.html @@ -25,7 +25,9 @@ translation_of: 'Web/CSS/:target' <pre class="brush: html"><section id="section2">Exemple</section></pre> -<div class="note"><strong>Note :</strong> L'attribut <code>id</code> a été ajouté avec HTML 4 (décembre 1997). Dans les anciennes versions de HTML, <code><a></code> était nécessairement l'élément cible. La pseudo-classe <code>:target</code> permet également de gérer ces cibles.</div> +<div class="note"> + <p><strong>Note :</strong> L'attribut <code>id</code> a été ajouté avec HTML 4 (décembre 1997). Dans les anciennes versions de HTML, <code><a></code> était nécessairement l'élément cible. La pseudo-classe <code>:target</code> permet également de gérer ces cibles.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/_doublecolon_-moz-progress-bar/index.html b/files/fr/web/css/_doublecolon_-moz-progress-bar/index.html index a6817d1f5c..51dc574676 100644 --- a/files/fr/web/css/_doublecolon_-moz-progress-bar/index.html +++ b/files/fr/web/css/_doublecolon_-moz-progress-bar/index.html @@ -32,10 +32,6 @@ translation_of: 'Web/CSS/::-moz-progress-bar' <p>{{EmbedLiveSample('Exemples')}}</p> -<p>Une barre de progression mise en forme de cette façon devrait ressembler à :</p> - -<p><img alt="Custom styled progress bar" class="default internal" src="/@api/deki/files/5387/=redbar.png"></p> - <h2 id="Spécifications">Spécifications</h2> <p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.</p> diff --git a/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.html b/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.html index 05ee5929ce..9fc489d9c2 100644 --- a/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.html +++ b/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.html @@ -1,12 +1,12 @@ --- title: '::-webkit-progress-bar' -slug: 'Web/CSS/::-webkit-progress-bar' +slug: Web/CSS/::-webkit-progress-bar tags: - CSS - Non-standard - Pseudo-element - Reference -translation_of: 'Web/CSS/::-webkit-progress-bar' +translation_of: Web/CSS/::-webkit-progress-bar --- <div>{{CSSRef}}{{Non-standard_header}}</div> @@ -40,7 +40,7 @@ translation_of: 'Web/CSS/::-webkit-progress-bar' <p>Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13488/progress-bar.png" style="height: 43px; width: 194px;"></p> +<p><img alt="" src="progress-bar.png"></p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/_doublecolon_-webkit-progress-value/index.html b/files/fr/web/css/_doublecolon_-webkit-progress-value/index.html index ebe55d9b17..91a831dcef 100644 --- a/files/fr/web/css/_doublecolon_-webkit-progress-value/index.html +++ b/files/fr/web/css/_doublecolon_-webkit-progress-value/index.html @@ -1,12 +1,12 @@ --- title: '::-webkit-progress-value' -slug: 'Web/CSS/::-webkit-progress-value' +slug: Web/CSS/::-webkit-progress-value tags: - CSS - Non-standard - Pseudo-element - Reference -translation_of: 'Web/CSS/::-webkit-progress-value' +translation_of: Web/CSS/::-webkit-progress-value --- <div>{{CSSRef}}{{Non-standard_header}}</div> @@ -39,7 +39,7 @@ translation_of: 'Web/CSS/::-webkit-progress-value' <p>Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13490/progress-value.png" style="height: 60px; width: 249px;"></p> +<p><img alt="" src="progress-value.png"></p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/_doublecolon_backdrop/index.html b/files/fr/web/css/_doublecolon_backdrop/index.html index 801ee9e7dc..4a5d8fae17 100644 --- a/files/fr/web/css/_doublecolon_backdrop/index.html +++ b/files/fr/web/css/_doublecolon_backdrop/index.html @@ -1,11 +1,11 @@ --- title: '::backdrop' -slug: 'Web/CSS/::backdrop' +slug: Web/CSS/::backdrop tags: - CSS - Pseudo-element - Reference -translation_of: 'Web/CSS/::backdrop' +translation_of: Web/CSS/::backdrop --- <div>{{CSSRef}}</div> @@ -19,7 +19,9 @@ dialog::backdrop { background: rgba(255,0,0,.25); }</pre> -<p class="note"><strong>Note :</strong> L'élément <code>::backdrop</code> peut être utilisé comme un arrière-plan/masque pour l'élément afin de cacher le document en-dessous lorsque l'élément est affiché en plein écran selon la spécification.</p> +<div class="note"> + <p><strong>Note :</strong> L'élément <code>::backdrop</code> peut être utilisé comme un arrière-plan/masque pour l'élément afin de cacher le document en-dessous lorsque l'élément est affiché en plein écran selon la spécification.</p> +</div> <p>Ce pseudo-élément n'hérite d'aucun autre élément et aucun autre élément n'hérite de ce pseudo-élément. Aucune restriction ne s'applique pour les propriétés qui peuvent être appliquées à ce pseudo-élément.</p> @@ -38,7 +40,7 @@ dialog::backdrop { <p>Voici le résultat obtenu :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/16287/bbb-backdrop.png" style="height: 282px; width: 500px;"></p> +<p><img alt="" src="bbb-backdrop.png"></p> <p>On peut voir ici les bandes bleu-gris au dessus et en dessous de la vidéo alors que la zone est normalement noire.</p> diff --git a/files/fr/web/css/_doublecolon_before/index.html b/files/fr/web/css/_doublecolon_before/index.html index eef6a0affd..51d962fb43 100644 --- a/files/fr/web/css/_doublecolon_before/index.html +++ b/files/fr/web/css/_doublecolon_before/index.html @@ -11,7 +11,7 @@ translation_of: 'Web/CSS/::before' <p><strong><code>::before</code></strong> crée un <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> qui sera le premier enfant de l'élément ciblé. Généralement utilisé pour ajouter du contenu esthétique à un élément via la propriété CSS {{cssxref("content")}}. Par défaut, l'élément créé est de type en-ligne (<em>inline</em>).</p> -<pre class="brush:css no-line-numbers notranslate">/* On ajoute un coeur avant les liens */ +<pre class="brush:css no-line-numbers">/* On ajoute un coeur avant les liens */ a::before { content: "♥"; } @@ -35,11 +35,11 @@ a::before { <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><q>Quelques guillemets</q>, dit-il, <q>sont mieux que pas du tout</q></pre> +<pre class="brush: html"><q>Quelques guillemets</q>, dit-il, <q>sont mieux que pas du tout</q></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">q::before { +<pre class="brush: css">q::before { content: "«"; color: blue; } @@ -58,11 +58,11 @@ q::after { <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><span class="ribbon">Observez où est placée la boite orange.</span></pre> +<pre class="brush: html"><span class="ribbon">Observez où est placée la boite orange.</span></pre> <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">.ribbon { +<pre class="brush: css">.ribbon { background-color: #5BC8F7; } @@ -83,7 +83,7 @@ q::after { <h4 id="HTML_3">HTML</h4> -<pre class="brush: html notranslate"><ul> +<pre class="brush: html"><ul> <li>Acheter du lait</li> <li>Promener le chien</li> <li>Faire de l'exercice</li> @@ -95,7 +95,7 @@ q::after { <h4 id="CSS_3">CSS</h4> -<pre class="brush: css notranslate">li { +<pre class="brush: css">li { list-style-type: none; position: relative; margin: 1px; @@ -124,7 +124,7 @@ li.done::before { <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js notranslate">var list = document.querySelector('ul'); +<pre class="brush: js">var list = document.querySelector('ul'); list.addEventListener('click', function(ev) { if( ev.target.tagName === 'LI') { ev.target.classList.toggle('done'); diff --git a/files/fr/web/css/_doublecolon_cue-region/index.html b/files/fr/web/css/_doublecolon_cue-region/index.html index 3a8f67bccd..4386cd36f5 100644 --- a/files/fr/web/css/_doublecolon_cue-region/index.html +++ b/files/fr/web/css/_doublecolon_cue-region/index.html @@ -10,7 +10,7 @@ translation_of: 'Web/CSS/::cue-region' --- <p>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</p> -<p><span class="seoSummary">Le pseudo-élément CSS <strong><code>::cue-region</code></strong> correspond à une piste {{DOMxRef("WebVTT API", "WebVTT", "", 1)}} de l'élément ciblé. Il peut être utilisé afin de <a href="/docs/Web/API/WebVTT_API#Styling_WebTT_cues">mettre en forme des sous-titres et autres indications textuelles</a> de pistes VTT.</span></p> +<p>Le pseudo-élément CSS <strong><code>::cue-region</code></strong> correspond à une piste {{DOMxRef("WebVTT API", "WebVTT", "", 1)}} de l'élément ciblé. Il peut être utilisé afin de <a href="/docs/Web/API/WebVTT_API#Styling_WebTT_cues">mettre en forme des sous-titres et autres indications textuelles</a> de pistes VTT.</p> <pre class="brush: css; no-line-numbers">::cue-region { color: yellow; @@ -44,7 +44,7 @@ translation_of: 'Web/CSS/::cue-region' <h2 id="Exemples">Exemples</h2> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Un exemple doit être construit pour cette page, n'hésitez pas à le faire sur la version anglaise d'abord avant de le reporter ici.</p> </div> diff --git a/files/fr/web/css/_doublecolon_cue/index.html b/files/fr/web/css/_doublecolon_cue/index.html index 837a7189fc..01ab9c8284 100644 --- a/files/fr/web/css/_doublecolon_cue/index.html +++ b/files/fr/web/css/_doublecolon_cue/index.html @@ -10,7 +10,7 @@ translation_of: 'Web/CSS/::cue' --- <div>{{CSSRef}}</div> -<p><span class="seoSummary">Le pseudo-élément CSS <strong><code>::cue</code></strong> permet de cibler les indications textuelles <a href="/fr/docs/Web/API/WebVTT_API">WebVTT</a> d'un élément. Ce pseudo-élément peut être utilisé afin de mettre en forme <a href="/fr/docs/Web/API/WebVTT_API#Styling_WebTT_cues">les légendes et autres indications textuelles</a> pour les médias avec des pistes VTT.</span></p> +<p>Le pseudo-élément CSS <strong><code>::cue</code></strong> permet de cibler les indications textuelles <a href="/fr/docs/Web/API/WebVTT_API">WebVTT</a> d'un élément. Ce pseudo-élément peut être utilisé afin de mettre en forme <a href="/fr/docs/Web/API/WebVTT_API#Styling_WebTT_cues">les légendes et autres indications textuelles</a> pour les médias avec des pistes VTT.</p> <pre class="brush: css no-line-numbers">::cue { color: yellow; diff --git a/files/fr/web/css/_doublecolon_first-letter/index.html b/files/fr/web/css/_doublecolon_first-letter/index.html index 4e41941be8..23d75fa8fd 100644 --- a/files/fr/web/css/_doublecolon_first-letter/index.html +++ b/files/fr/web/css/_doublecolon_first-letter/index.html @@ -1,15 +1,15 @@ --- title: '::first-letter' -slug: 'Web/CSS/::first-letter' +slug: Web/CSS/::first-letter tags: - CSS - Pseudo-element - Reference -translation_of: 'Web/CSS/::first-letter' +translation_of: Web/CSS/::first-letter --- <div>{{CSSRef}}</div> -<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> <strong><code>::first-letter</code></strong> sélectionne la première lettre de la première ligne d'un bloc, si elle n'est pas précédée par un quelconque autre contenu (comme une image ou un tableau en ligne) sur sa ligne.</p> +<p>Le <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-élément</a> <strong><code>::first-letter</code></strong> sélectionne la première lettre de la première ligne d'un bloc, si elle n'est pas précédée par un quelconque autre contenu (comme une image ou un tableau en ligne) sur sa ligne.</p> <pre class="brush: css no-line-numbers">/* Sélectionne la première lettre */ /* d'un élément <p> */ @@ -21,8 +21,8 @@ p::first-letter { <p>La première lettre d'un élément n'est pas forcément évidente à identifier :</p> <ul> - <li>La ponctuation, c'est-à-dire n'importe quel caractère défini dans une des classes Unicode <em lang="en">open</em> (Ps), <em lang="en">close</em> (Pe), <em lang="en">initial quote</em> (Pi), <em lang="en">final quote</em> (Pf) et <em lang="en">other punctuation</em> (Po) , précédant ou suivant immédiatement la première lettre est aussi sélectionnée par ce pseudo-élément.</li> - <li>D'autre part, certaines langues possèdent des digraphes qui sont mis en majuscule ensemble, comme le <code>IJ</code> en néerlandais. Dans ces rares cas, les deux lettres du digraphes doivent être sélectionnées par le pseudo-élément <code>::first-letter</code>. (Ceci est mal supporté par les navigateurs, reportez vous au <a href="/fr/CSS/::first-letter#Compatibilité_des_navigateurs">tableau de compatibilité des navigateurs</a>).</li> + <li>La ponctuation, c'est-à-dire n'importe quel caractère défini dans une des classes Unicode <i lang="en">open</i> (Ps), <i lang="en">close</i> (Pe), <i lang="en">initial quote</i> (Pi), <i lang="en">final quote</i> (Pf) et <i lang="en">other punctuation</i> (Po) , précédant ou suivant immédiatement la première lettre est aussi sélectionnée par ce pseudo-élément.</li> + <li>D'autre part, certaines langues possèdent des digraphes qui sont mis en majuscule ensemble, comme le <code>IJ</code> en néerlandais. Dans ces rares cas, les deux lettres du digraphes doivent être sélectionnées par le pseudo-élément <code>::first-letter</code>. (Ceci est mal supporté par les navigateurs, reportez vous au <a href="/fr/docs/Web/CSS/::first-letter#compatibilit%c3%a9_des_navigateurs">tableau de compatibilité des navigateurs</a>).</li> <li>Enfin, une combinaison du pseudo-élément {{cssxref("::before")}} et de la propriété {{cssxref("content")}} peut injecter du texte au début de l'élément. Dans ce cas, <code>::first-letter</code> sélectionnera la première lettre du contenu inséré.</li> </ul> @@ -44,11 +44,11 @@ p::first-letter { <p>Puisque cette liste sera complétée dans l'avenir, il est recommandé de ne pas utiliser d'autres propriétés dans un bloc de déclaration, de manière à concevoir un CSS pérenne.</p> -<div class="note">Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Puisque les pseudo-classes suivaient elles aussi cette convention, la distinction était impossible. Afin de résoudre ce problème, CSS 2.1 a modifié la convention des pseudo-éléments. Désormais un pseudo-élément est précédé de deux caractères deux-points, et une pseudo-classe est toujours précédée d'un seul caractère deux-points.<br> -<br> -Du fait que de nombreux navigateurs avaient déjà implémentés la syntaxe CSS 2 dans une version publique, tous les navigateurs supportant la syntaxe à deux caractères deux-points peuvent aussi supporter l'ancienne syntaxe à un caractère deux-points.<br> -<br> -Si les navigateurs anciens doivent être supportés, <code>:first-letter</code> est le seul choix viable. Sinon, la syntaxe <code>::first-letter</code> doit être privilégiée.</div> +<div class="note"> + <p><strong>Note :</strong> Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Puisque les pseudo-classes suivaient elles aussi cette convention, la distinction était impossible. Afin de résoudre ce problème, CSS 2.1 a modifié la convention des pseudo-éléments. Désormais un pseudo-élément est précédé de deux caractères deux-points, et une pseudo-classe est toujours précédée d'un seul caractère deux-points.</p> + <p>Du fait que de nombreux navigateurs avaient déjà implémentés la syntaxe CSS 2 dans une version publique, tous les navigateurs supportant la syntaxe à deux caractères deux-points peuvent aussi supporter l'ancienne syntaxe à un caractère deux-points.</p> + <p>Si les navigateurs anciens doivent être supportés, <code>:first-letter</code> est le seul choix viable. Sinon, la syntaxe <code>::first-letter</code> doit être privilégiée.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/_doublecolon_first-line/index.html b/files/fr/web/css/_doublecolon_first-line/index.html index 5b2d2c24c5..11f165eae1 100644 --- a/files/fr/web/css/_doublecolon_first-line/index.html +++ b/files/fr/web/css/_doublecolon_first-line/index.html @@ -1,15 +1,15 @@ --- title: '::first-line (:first-line)' -slug: 'Web/CSS/::first-line' +slug: Web/CSS/::first-line tags: - CSS - Pseudo-element - Reference -translation_of: 'Web/CSS/::first-line' +translation_of: Web/CSS/::first-line --- <div>{{CSSRef}}</div> -<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> <strong><code>::first-line</code></strong> applique la décoration à la première ligne d'un élément. La quantité de texte sur la première ligne dépend de nombreux facteurs, comme la largeur des éléments ou du document, mais aussi de la taille du texte. Comme tous les pseudo-éléments, les sélecteurs contenant <code>::first-line</code> ne ciblent pas un élément HTML réel.</p> +<p>Le <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-élément</a> <strong><code>::first-line</code></strong> applique la décoration à la première ligne d'un élément. La quantité de texte sur la première ligne dépend de nombreux facteurs, comme la largeur des éléments ou du document, mais aussi de la taille du texte. Comme tous les pseudo-éléments, les sélecteurs contenant <code>::first-line</code> ne ciblent pas un élément HTML réel.</p> <pre class="brush: css no-line-numbers">/* Sélectionne la première ligne */ /* d'un élément <p> */ @@ -34,11 +34,11 @@ translation_of: 'Web/CSS/::first-line' <p>Comme cette liste sera étendue dans le futur, il est recommandé de ne pas utiliser d'autres propriétés dans un bloc de déclaration, de manière à ce que le CSS reste pérenne.</p> -<div class="note">Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Comme les pseudo-classes utilisaient aussi la même convention, ils n'était pas possible de les distinguer. Afin de résoudre cela, CSS 2.1 à changé la convention des pseudo-éléments. Désormais, un pseudo-élément est précédé de deux caractères deux-points, et une pseudo-classe d'un seul.<br> -<br> -Puisque de nombreux navigateurs avaient déjà mis en place la version CSS 2 dans une version publique, tous les navigateurs supportent les deux syntaxes.<br> -<br> -Si les navigateurs anciens doivent être supportés, <code>:first-line</code> est le seul choix viable ; sinon<code>,::first-line</code> est préféré.</div> +<div class="note"> + <p><strong>Note :</strong> Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Comme les pseudo-classes utilisaient aussi la même convention, ils n'était pas possible de les distinguer. Afin de résoudre cela, CSS 2.1 à changé la convention des pseudo-éléments. Désormais, un pseudo-élément est précédé de deux caractères deux-points, et une pseudo-classe d'un seul.</p> + <p>Puisque de nombreux navigateurs avaient déjà mis en place la version CSS 2 dans une version publique, tous les navigateurs supportent les deux syntaxes.</p> + <p>Si les navigateurs anciens doivent être supportés, <code>:first-line</code> est le seul choix viable ; sinon<code>,::first-line</code> est préféré.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/_doublecolon_marker/index.html b/files/fr/web/css/_doublecolon_marker/index.html index c7e5be8e76..d4f4c6f0dc 100644 --- a/files/fr/web/css/_doublecolon_marker/index.html +++ b/files/fr/web/css/_doublecolon_marker/index.html @@ -28,7 +28,7 @@ translation_of: 'Web/CSS/::marker' <li><a href="/fr/docs/Web/CSS/CSS_Fonts">Toutes les propriétés liées aux polices (font).</a></li> </ul> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> La spécification indique que d'autres propriétés CSS pourraient être prises en charge à l'avenir.</p> </div> diff --git a/files/fr/web/css/_doublecolon_placeholder/index.html b/files/fr/web/css/_doublecolon_placeholder/index.html index 4416c4ae92..54944043c7 100644 --- a/files/fr/web/css/_doublecolon_placeholder/index.html +++ b/files/fr/web/css/_doublecolon_placeholder/index.html @@ -1,11 +1,11 @@ --- title: '::placeholder' -slug: 'Web/CSS/::placeholder' +slug: Web/CSS/::placeholder tags: - CSS - Pseudo-element - Reference -translation_of: 'Web/CSS/::placeholder' +translation_of: Web/CSS/::placeholder --- <div>{{CSSRef}}</div> @@ -71,7 +71,7 @@ translation_of: 'Web/CSS/::placeholder' <ul> <li><a href="https://webaim.org/resources/contrastchecker/" rel="noopener">WebAIM : vérificateur de contraste</a></li> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Explications des recommendation WCAG 1.4</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Explications des recommendation WCAG 1.4</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> </ul> @@ -83,7 +83,7 @@ translation_of: 'Web/CSS/::placeholder' <p>Avec cette méthode, le contenu indicatif est disponible à tout moment (même lorsqu'une information a été saisie par l'utilisateur) et le champ est vide lorsque la page est chargée. La plupart des lecteurs d'écran utiliseront <code>aria-describedby</code> afin de lire l'indication lorsque le libellé du champ aura été annoncé. La personne utilisant le lecteur d'écran pourra arrêter les annonces si elle estime que les informations supplémentaires ne sont pas nécessaires.</p> -<pre class="brush:html line-numbers language-html"><label for="user-email">Votre adresse mail</label> +<pre class="brush:html"><label for="user-email">Votre adresse mail</label> <span id="user-email-hint" class="input-hint">Exemple : johndoe@example.com</span> <input id="user-email" aria-describedby="user-email-hint" name="email" type="email"> </pre> @@ -94,11 +94,11 @@ translation_of: 'Web/CSS/::placeholder' <h3 id="Mode_«_contraste_élevé_»_de_Windows">Mode « contraste élevé » de Windows</h3> -<p>Lorsque le <a href="/en-US/docs/Web/CSS/-ms-high-contrast">mode de contraste élevé de Windows</a> est actif, les textes de substitution apparaîtront avec la même mise en forme que les textes saisis par l'utilisateur. Il est alors impossible de distinguer un texte saisi d'un texte indicatif.</p> +<p>Lorsque le <a href="/en-US/docs/Web/CSS/@media/-ms-high-contrast">mode de contraste élevé de Windows</a> est actif, les textes de substitution apparaîtront avec la même mise en forme que les textes saisis par l'utilisateur. Il est alors impossible de distinguer un texte saisi d'un texte indicatif.</p> <ul> - <li><a href="http://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast">Greg Whitworth — Comment utiliser <code>-ms-high-contrast</code> (en anglais)</a></li> - <li>{{cssxref("-ms-high-contrast")}}</li> + <li><a href="https://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast">Greg Whitworth — Comment utiliser <code>-ms-high-contrast</code> (en anglais)</a></li> + <li>{{cssxref("@media/-ms-high-contrast")}}</li> </ul> <h3 id="Libellés_(HTMLElement(<label>))">Libellés ({{HTMLElement("<label>")}})</h3> @@ -147,7 +147,7 @@ translation_of: 'Web/CSS/::placeholder' <li>Les équivalents <strong>non-standards</strong> : <ul> <li>{{cssxref("::-webkit-input-placeholder")}}</li> - <li>{{cssxref("::-moz-placeholder")}}</li> + <li>{{cssxref("::placeholder")}}</li> <li>{{cssxref(":-ms-input-placeholder")}}</li> </ul> </li> diff --git a/files/fr/web/css/_doublecolon_selection/index.html b/files/fr/web/css/_doublecolon_selection/index.html index 5f7d4f0385..2072d308a1 100644 --- a/files/fr/web/css/_doublecolon_selection/index.html +++ b/files/fr/web/css/_doublecolon_selection/index.html @@ -1,15 +1,15 @@ --- title: '::selection' -slug: 'Web/CSS/::selection' +slug: Web/CSS/::selection tags: - CSS - Pseudo-element - Reference -translation_of: 'Web/CSS/::selection' +translation_of: Web/CSS/::selection --- <div>{{CSSRef}}</div> -<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> <strong><code>::selection</code></strong> permet d'appliquer des règles CSS à une portion du document qui a été sélectionnée par l'utilisateur (via la souris ou un autre dispositif de pointage).</p> +<p>Le <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-élément</a> <strong><code>::selection</code></strong> permet d'appliquer des règles CSS à une portion du document qui a été sélectionnée par l'utilisateur (via la souris ou un autre dispositif de pointage).</p> <pre class="brush: css no-line-numbers">::selection { background-color: cyan; @@ -92,7 +92,7 @@ p::selection { <ul> <li><a href="https://webaim.org/resources/contrastchecker/" rel="noopener">WebAIM : vérificateur de contraste</a></li> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Explications des recommendation WCAG 1.4</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Explications des recommendation WCAG 1.4</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> </ul> @@ -116,9 +116,8 @@ p::selection { </table> <div class="note"> -<p><strong>Note : </strong>Bien que ce pseudo-élément était inscrit dans les brouillons pour la spécification des sélecteurs CSS de niveau 3, il a été retiré dans la phase de recommandation car le comportement n'était pas suffisamment défini, notamment avec les éléments imbriqués, de plus, l'interopérabilité n'était pas encore aboutie <a class="external" href="https://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html">(selon une discussion de la liste de diffusion W3C Style)</a>.<br> - <br> - Le pseudo-élément <code>::selection</code> a de nouveau été ajouté dans la spécification pour <a href="https://dev.w3.org/csswg/css-pseudo-4/">les pseudo-éléments de niveau 4</a>.</p> +<p><strong>Note :</strong> Bien que ce pseudo-élément était inscrit dans les brouillons pour la spécification des sélecteurs CSS de niveau 3, il a été retiré dans la phase de recommandation car le comportement n'était pas suffisamment défini, notamment avec les éléments imbriqués, de plus, l'interopérabilité n'était pas encore aboutie <a href="https://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html">(selon une discussion de la liste de diffusion W3C Style)</a>.</p> +<p>Le pseudo-élément <code>::selection</code> a de nouveau été ajouté dans la spécification pour <a href="https://dev.w3.org/csswg/css-pseudo-4/">les pseudo-éléments de niveau 4</a>.</p> </div> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> diff --git a/files/fr/web/css/adjacent_sibling_combinator/index.html b/files/fr/web/css/adjacent_sibling_combinator/index.html index a359824b96..c6100f0b8e 100644 --- a/files/fr/web/css/adjacent_sibling_combinator/index.html +++ b/files/fr/web/css/adjacent_sibling_combinator/index.html @@ -26,7 +26,6 @@ img + p { <h3 id="CSS">CSS</h3> -<div id="Example_1"> <pre class="brush: css">li:first-of-type + li { color: red; } @@ -41,7 +40,6 @@ img + p { </ul></pre> <h3 id="Résultat">Résultat</h3> -</div> <p>{{EmbedLiveSample('Exemples', 200, 100)}}</p> diff --git a/files/fr/web/css/align-content/index.html b/files/fr/web/css/align-content/index.html index 62625c4cfa..014928628a 100644 --- a/files/fr/web/css/align-content/index.html +++ b/files/fr/web/css/align-content/index.html @@ -9,14 +9,12 @@ translation_of: Web/CSS/align-content --- <div>{{CSSRef}}</div> -<p>La propriété CSS <strong><code>align-content</code></strong> définit la façon dont l'espace est réparti entre et autour des éléments le long de l'axe en bloc du conteneur (c'est-à-dire l'axe orthogonal à l'axe d'écriture) lorsque celui-ci est <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS">un conteneur de boîte flexible</a> et le long de l'axe principal lorsque le conteneur est une grille.</p> +<p>La propriété CSS <strong><code>align-content</code></strong> définit la façon dont l'espace est réparti entre et autour des éléments le long de l'axe en bloc du conteneur (c'est-à-dire l'axe orthogonal à l'axe d'écriture) lorsque celui-ci est <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">un conteneur de boîte flexible</a> et le long de l'axe principal lorsque le conteneur est une grille.</p> <p>L'exemple qui suit utilise une grille comme conteneur afin d'illustrer le comportement des valeurs de cette propriété.</p> <div>{{EmbedInteractiveExample("pages/css/align-content.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété n'aura aucun effet sur les boîtes flexibles disposées sur une seule ligne (celles avec <code>flex-wrap: nowrap</code> par exemple).</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -78,7 +76,7 @@ align-content: unset;</pre> <dt><code>baseline<br> first baseline</code><br> <code>last baseline</code></dt> - <dd><img alt="La ligne de base est la ligne sur laquelle reposent la plupart des lettres et en dessous de laquelle le jambage des caractéres descend." src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Typography_Line_Terms.svg/410px-Typography_Line_Terms.svg.png" style="height: 110px; width: 410px;">Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.<br> + <dd><img alt="La ligne de base est la ligne sur laquelle reposent la plupart des lettres et en dessous de laquelle le jambage des caractéres descend." src="410px-typography_line_terms.svg.png">Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.<br> Si <code>first baseline</code> n'est pas prise en charge, la valeur correspondra à <code>start</code>, si <code>last baseline</code> n'est pas prise en charge, la valeur correspondra à <code>end</code>.</dd> <dt><code>space-between</code></dt> <dd>Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, le premier élément est aligné sur le bord au début du conteneur et le dernier élément est aligné sur le bord à la fin du conteneur.</dd> @@ -102,7 +100,7 @@ align-content: unset;</pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[4]">#container { +<pre class="brush: css">#container { height:200px; width: 240px; align-content: center; /* Cette valeur peut être changée dans la démonstration */ @@ -220,10 +218,7 @@ select { </div> </pre> -<div class="hidden"> -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var values = document.getElementById('values'); +<pre class="brush: js hidden">var values = document.getElementById('values'); var display = document.getElementById('display'); var container = document.getElementById('container'); @@ -235,7 +230,6 @@ display.addEventListener('change', function (evt) { container.className = evt.target.value; }); </pre> -</div> <h3 id="Résultat">Résultat</h3> @@ -282,9 +276,9 @@ display.addEventListener('change', function (evt) { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles</a></li> - <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner des objets dans une grille</a></em></li> - <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li> - <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></em></li> + <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Utiliser les boîtes flexibles</a></li> + <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Aligner des objets dans une grille</a></em></li> + <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Les concepts de bases</a></em></li> + <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligner des objets dans un conteneur flexible</a></em></li> <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li> </ul> diff --git a/files/fr/web/css/align-items/index.html b/files/fr/web/css/align-items/index.html index 1774fe755e..69e1fcd440 100644 --- a/files/fr/web/css/align-items/index.html +++ b/files/fr/web/css/align-items/index.html @@ -9,14 +9,14 @@ translation_of: Web/CSS/align-items --- <div>{{CSSRef}}</div> -<p><span class="seoSummary">La propriété CSS <strong><code>align-items</code></strong> définit la valeur de {{cssxref("align-self")}} sur l'ensemble des éléments-fils directs.</span> La propriété <code>align-self</code> définit elle l'alignement d'un objet au sein de son conteneur. Pour les boîtes flexibles, cette propriété contrôle l'alignement par rapport à l'axe secondaire (<em>cross axis</em>). Au sein d'une grille CSS, elle contrôle l'alignement des éléments sur l'axe de bloc de <a href="/fr/docs/Glossaire/Zones_de_grille">la zone de grille</a> correspondante.</p> +<p>La propriété CSS <strong><code>align-items</code></strong> définit la valeur de {{cssxref("align-self")}} sur l'ensemble des éléments-fils directs.</p> + +<p>La propriété <code>align-self</code> définit elle l'alignement d'un objet au sein de son conteneur. Pour les boîtes flexibles, cette propriété contrôle l'alignement par rapport à l'axe secondaire (<em>cross axis</em>). Au sein d'une grille CSS, elle contrôle l'alignement des éléments sur l'axe de bloc de <a href="/fr/docs/Glossary/Grid_Areas">la zone de grille</a> correspondante.</p> <p>L'exemple qui suit illustre le fonctionnement des différentes valeurs de <code>align-items</code> au sein d'une grile.</p> <div>{{EmbedInteractiveExample("pages/css/align-items.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>À l'heure actuelle, cette propriété est prise en charge pour les dispositions <em>Flexbox</em> et grilles CSS. Pour les boîtes flexibles, cela contrôle l'alignement des objets sur l'axe secondaire et pour les grilles, cela contrôle l'alignement sur l'axe en bloc.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -79,9 +79,6 @@ align-items: unset; <dd>Les éléments sont accolés au bord du début du conteneur dans l'axe de bloc.</dd> <dt><code>self-end</code></dt> <dd>Les éléments sont accolés au bord à la fin du conteneur dans l'axe de bloc.</dd> -</dl> - -<dl> <dt><code>baseline</code></dt> <dt><code>first baseline<br> last baseline</code></dt> @@ -92,18 +89,16 @@ align-items: unset; <dd>Ce mot-clé est utilisé avec un mot-clé d'alignement. Si la taille d'un des éléments dépasse du conteneur avec la valeur d'alignement indiquée, l'alignement sera réalisé avec la valeur <code>start</code> à la place.</dd> <dt><code>unsafe</code></dt> <dd>Ce mot-clé est utilisé avec un mot-clé d'alignement. Quelle que soit la taille relative et l'éventuel dépassement de l'élément par rapport au conteneur, la valeur indiquée pour l'alignement est respectée.</dd> - <dt> - <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - </dt> </dl> +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> {{csssyntax}} <h2 id="Exemples">Exemples</h2> <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[4]">#container { +<pre class="brush: css">#container { height:200px; width: 240px; align-items: center; /* Cette valeur peut être modifiée dans l'exemple */ @@ -218,10 +213,7 @@ select { </div> </pre> -<div class="hidden"> -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var values = document.getElementById('values'); +<pre class="brush: js hidden">var values = document.getElementById('values'); var display = document.getElementById('display'); var container = document.getElementById('container'); @@ -233,7 +225,6 @@ display.addEventListener('change', function (evt) { container.className = evt.target.value; }); </pre> -</div> <h3 id="Résultat">Résultat</h3> @@ -278,10 +269,10 @@ display.addEventListener('change', function (evt) { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles CSS</a></li> - <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li> - <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></em></li> - <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner des objets dans une grille</a></em></li> + <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Utiliser les boîtes flexibles CSS</a></li> + <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Les concepts de bases</a></em></li> + <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligner des objets dans un conteneur flexible</a></em></li> + <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Aligner des objets dans une grille</a></em></li> <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li> <li>La propriété {{cssxref("align-self")}}</li> </ul> diff --git a/files/fr/web/css/align-self/index.html b/files/fr/web/css/align-self/index.html index 1d9dfbfc23..02b2574984 100644 --- a/files/fr/web/css/align-self/index.html +++ b/files/fr/web/css/align-self/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/align-self <div>{{EmbedInteractiveExample("pages/css/align-self.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété ne s'applique pas aux boîtes qui sont des blocs ou aux cellules d'un tableau.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/all/index.html b/files/fr/web/css/all/index.html index 18c96dcd4a..335620c2ee 100644 --- a/files/fr/web/css/all/index.html +++ b/files/fr/web/css/all/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/all <div>{{EmbedInteractiveExample("pages/css/all.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs globales */ @@ -79,7 +77,6 @@ blockquote { <h3 id="Résultat">Résultat</h3> -<div id="ex0" style="display: inline-block; width: 225px; vertical-align: top;"> <h4 id="Pas_de_propriété_all">Pas de propriété <code>all</code></h4> <pre class="brush: html hidden"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre> @@ -89,9 +86,7 @@ blockquote { background-color: skyblue; color: red; }</pre> {{EmbedLiveSample("ex0", "200", "125")}} <p>L'élément {{HTMLElement("blockquote")}} utilise la mise en forme par défaut du navigateur avec un arrière-plan spécifique et une couleur pour le texte. L'élément se comporte comme un élément de bloc : le texte qui suit est placé en dessous.</p> -</div> -<div id="ex1" style="display: inline-block; width: 225px; vertical-align: top;"> <h4 id="allunset"><code>all:unset</code></h4> <pre class="brush: html hidden"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre> @@ -102,9 +97,7 @@ blockquote { all: unset; }</pre> {{EmbedLiveSample("ex1", "200", "125")}} <p>L'élément {{HTMLElement("blockquote")}} n'utilise pas la mise en forme par défaut du naivgateur, c'est un élément en ligne (<em>inline</em>) (sa valeur initiale), la valeur de {{cssxref("background-color")}} est <code>transparent</code> (la valeur initiale), mais {{cssxref("font-size")}} vaut toujours <code>small</code> (valeur héritée) et {{cssxref("color")}} vaut (valeur héritée).</p> -</div> -<div id="ex2" style="display: inline-block; width: 225px; vertical-align: top;"> <h4 id="allinitial"><code>all:initial</code></h4> <pre class="brush: html hidden"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre> @@ -115,9 +108,7 @@ blockquote { all: initial; }</pre> {{EmbedLiveSample("ex2", "200", "125")}} <p>L'élément {{HTMLElement("blockquote")}} n'utilise pas la mise en forme par défaut du navigateur, c'est un élément en ligne (sa valeur initiale). La propriété {{cssxref("background-color")}} vaut <code>transparent</code> (sa valeur initiale), {{cssxref("font-size")}} vaut <code>normal</code> (valeur initiale) et {{cssxref("color")}} vaut <code>black</code> (sa valeur initiale).</p> -</div> -<div id="ex3" style="display: inline-block; width: 225px; vertical-align: top;"> <h4 id="allinherit"><code>all:inherit</code></h4> <pre class="brush: html hidden"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre> @@ -128,7 +119,6 @@ blockquote { all: inherit; }</pre> {{EmbedLiveSample("ex3", "200", "125")}} <p>L'élément {{HTMLElement("blockquote")}} n'utilise pas la mise en forme par défaut du navigateur, c'est un élément de bloc (valeur héritée depuis l'élément englobant {{HTMLElement("div")}}), {{cssxref("background-color")}} vaut <code>#F0F0F0</code> (valeur héritée), {{cssxref("font-size")}} vaut <code>small</code> (valeur héritée) et {{cssxref("color")}} vaut <code>blue</code> (valeur héritée).</p> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/alpha-value/index.html b/files/fr/web/css/alpha-value/index.html index 2a260de8f1..a2736fad98 100644 --- a/files/fr/web/css/alpha-value/index.html +++ b/files/fr/web/css/alpha-value/index.html @@ -25,13 +25,17 @@ translation_of: Web/CSS/alpha-value <p>Certaines fonctionnalités CSS utilisent des valeurs <code><alpha-value></code> dont <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#RGB_colors">les notations fonctionnelles pour les couleurs telles que <code>rgba()</code> et <code>hsla()</code></a> et aussi {{cssxref("shape-image-threshold")}} (qui détermine les pixels à prendre en compte pour une image lorsqu'on souhaite en extraire une forme).</p> -<pre class="brush: css no-line-numbers language-css"><code class="language-css"><span class="comment token">/* <rgba()> */</span> -<span class="property token">color</span><span class="punctuation token">:</span> <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">34</span><span class="punctuation token">,</span> <span class="number token">12</span><span class="punctuation token">,</span> <span class="number token">64</span><span class="punctuation token">,</span> <span class="number token">0.6</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="property token">color</span><span class="punctuation token">:</span> <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">34.0</span> <span class="number token">12</span> <span class="number token">64</span> <span class="operator token">/</span> <span class="number token">60</span><span class="token unit">%</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code> - -<code class="language-css"><span class="comment token">/* shape-image-threshold */ -</span><span class="property token">shape-image-threshold</span><span class="punctuation token">:</span> <span class="number token">70%</span><span class="punctuation token">;</span> -<span class="property token">shape-image-threshold</span><span class="punctuation token">:</span> <span class="number token">0.7</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: css"> +/* <rgba()> */ +color: rgba(34, 12, 64, 0.6); +color: rgba(34.0 12 64 / 60%); +</pre> + +<pre class="brush: css"> +/* shape-image-threshold */ +shape-image-threshold: 70%; +shape-image-threshold: 0.7; +</pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/angle/index.html b/files/fr/web/css/angle/index.html index 1a936ee1fe..f020237b66 100644 --- a/files/fr/web/css/angle/index.html +++ b/files/fr/web/css/angle/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/angle <div>{{EmbedInteractiveExample("pages/css/type-angle.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <p>Pour exprimer une valeur de ce type, on utilisera une valeur de type {{cssxref("<number>")}} (un nombre), immédiatement suivie d'une unité <code>deg</code>, <code>grad</code>, <code>rad</code> ou <code>turn</code>. Comme pour les autres dimensions présentes en CSS, il n'y a pas d'espace entre le littéral réservé à l'unité et le nombre qui indique la mesure de l'angle. L'unité est facultative pour la valeur <code>0</code> (bien qu'il soit recommandé d'écrire une unité pour des raisons de lisibilité et de cohérence). Il est possible d'utiliser un signe <code>+</code> ou <code>-</code> en préfixe.</p> @@ -43,25 +41,25 @@ translation_of: Web/CSS/angle <table> <tbody> <tr> - <td><img alt="Angle90.png" class="default internal" src="/@api/deki/files/5704/=Angle90.png"></td> + <td><img src="angle90.png"></td> <td> <p>Un angle droit orienté dans le sens horaire : <code>90deg = 100grad = 0.25turn ≈ 1.5708rad</code></p> </td> </tr> <tr> - <td><img alt="Angle180.png" class="default internal" src="/@api/deki/files/5706/=Angle180.png"></td> + <td><img src="angle180.png"></td> <td>Un angle plat orienté dans le sens horaire : <code>180deg = 200grad = 0.5turn ≈ 3.1416rad</code></td> </tr> <tr> - <td><img alt="AngleMinus90.png" class="default internal" src="/@api/deki/files/5707/=AngleMinus90.png"></td> + <td><img src="angleminus90.png"></td> <td>Un angle droit orienté dans le sens anti-horaire : <code>-90deg = -100grad = -0.25turn ≈ -1.5708rad</code></td> </tr> <tr> - <td><img alt="Angle0.png" class="default internal" src="/@api/deki/files/5708/=Angle0.png"></td> + <td><img src="angle0.png"></td> <td> <p>Un angle nul : <code>0 = 0deg = 0grad = 0turn = 0rad</code></p> - <div class="note"><strong>Note :</strong>Si, dans l'absolu, on peut exprimer la valeur nulle sans unité, il est fortement recommandé d'indiquer l'unité afin de lever toute ambiguïté possible entre les angles et les longueurs.</div> + <div class="note"><p><strong>Note :</strong>Si, dans l'absolu, on peut exprimer la valeur nulle sans unité, il est fortement recommandé d'indiquer l'unité afin de lever toute ambiguïté possible entre les angles et les longueurs.</p></div> </td> </tr> </tbody> diff --git a/files/fr/web/css/animation-delay/index.html b/files/fr/web/css/animation-delay/index.html index f7efca1935..733ba4d654 100644 --- a/files/fr/web/css/animation-delay/index.html +++ b/files/fr/web/css/animation-delay/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/animation-delay <div>{{EmbedInteractiveExample("pages/css/animation-delay.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La valeur par défaut, <code>0s</code>, indique que l'animation doit démarrer dès qu'elle est appliquée. Dans les autres cas, la valeur indique le décalage à observer entre le début de l'animation et le moment où celle-ci a été appliquée sur l'élément.</p> <p>Si des valeurs négatives sont utilisées, l'animation débutera immédiatement en étant déjà « avancée ». Par exemple, si on utilise la valeur <code>-1s</code> comme durée, l'animation commencera immédiatement avec l'état qu'elle aurait « normalement » eue au bout d'une seconde.</p> diff --git a/files/fr/web/css/animation-direction/index.html b/files/fr/web/css/animation-direction/index.html index 88527d3588..45fa6dbf7b 100644 --- a/files/fr/web/css/animation-direction/index.html +++ b/files/fr/web/css/animation-direction/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/animation-direction <div>{{EmbedInteractiveExample("pages/css/animation-direction.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Généralement, on passera par la propriété raccourcie {{cssxref("animation")}} qui permet de définir les différentes propriétés liées aux animations avec une déclaration.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/animation-duration/index.html b/files/fr/web/css/animation-duration/index.html index ec4e6dd410..766d826733 100644 --- a/files/fr/web/css/animation-duration/index.html +++ b/files/fr/web/css/animation-duration/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/animation-duration <div>{{EmbedInteractiveExample("pages/css/animation-duration.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La valeur par défaut est <code>0s</code>, ce qui indique qu'aucune animation ne doit avoir lieu.</p> <p>Généralement, on passera par la propriété raccourcie {{cssxref("animation")}} afin de définir, en une seule déclaration, les différentes propriétés liées aux animations.</p> @@ -34,9 +32,13 @@ animation-duration: 10s, 30s, 230ms; <dd>La durée d'un cycle pour l'animation. Cette valeur peut être indiquée en secondes (<code>s</code> comme suffixe pour l'unité) ou en millisecondes (<code>ms</code> comme suffixe pour l'unité). Si aucune unité n'est définie, la déclaration sera considérée comme invalide.</dd> </dl> -<div class="note"><strong>Note :</strong> Les valeurs négatives sont considérées comme invalides. Certaines implémentations, préfixées, considèrent parfois que ces valeurs sont synonymes de <code>0s</code>.</div> +<div class="note"> + <p><strong>Note :</strong> Les valeurs négatives sont considérées comme invalides. Certaines implémentations, préfixées, considèrent parfois que ces valeurs sont synonymes de <code>0s</code>.</p> +</div> -<div class="note"><strong>Note :</strong> Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété <code>animation-*</code>, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">les valeurs des propriétés pour plusieurs animations</a>.</div> +<div class="note"> + <p><strong>Note :</strong> Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété <code>animation-*</code>, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer <a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations">les valeurs des propriétés pour plusieurs animations</a>.</p> +</div> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -103,6 +105,6 @@ animation-duration: 10s, 30s, 230ms; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Manipuler les animations CSS</a></li> <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li> </ul> diff --git a/files/fr/web/css/animation-fill-mode/index.html b/files/fr/web/css/animation-fill-mode/index.html index fe7afbd8d3..01b33f2513 100644 --- a/files/fr/web/css/animation-fill-mode/index.html +++ b/files/fr/web/css/animation-fill-mode/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/animation-fill-mode <div>{{EmbedInteractiveExample("pages/css/animation-fill-mode.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/animation-iteration-count/index.html b/files/fr/web/css/animation-iteration-count/index.html index 85c80ff18b..7291b39c13 100644 --- a/files/fr/web/css/animation-iteration-count/index.html +++ b/files/fr/web/css/animation-iteration-count/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/animation-iteration-count <div>{{EmbedInteractiveExample("pages/css/animation-iteration-count.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Généralement, on utilisera la propriété raccourcie {{cssxref("animation")}} afin de définir toutes les propriétés relatives à une animation.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/animation-name/index.html b/files/fr/web/css/animation-name/index.html index 3ea322393f..107ab29d0c 100644 --- a/files/fr/web/css/animation-name/index.html +++ b/files/fr/web/css/animation-name/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/animation-name <div>{{EmbedInteractiveExample("pages/css/animation-name.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Généralement, on pourra utiliser la propriété raccourcie {{cssxref("animation")}} pour définir l'ensemble des propriétés liées aux animations.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/animation-play-state/index.html b/files/fr/web/css/animation-play-state/index.html index 98a89cd532..c0dcf45efb 100644 --- a/files/fr/web/css/animation-play-state/index.html +++ b/files/fr/web/css/animation-play-state/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/animation-play-state <div>{{EmbedInteractiveExample("pages/css/animation-play-state.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Lorsqu'on reprend une animation en pause, celle-ci reprendra où elle avait été interrompue (elle ne recommencera pas depuis le début de la séquence).</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/animation-timing-function/index.html b/files/fr/web/css/animation-timing-function/index.html index 736ccbf5cd..f3b7858272 100644 --- a/files/fr/web/css/animation-timing-function/index.html +++ b/files/fr/web/css/animation-timing-function/index.html @@ -9,12 +9,10 @@ translation_of: Web/CSS/animation-timing-function --- <div>{{CSSRef}}</div> -<p>La propriété <code><strong>animation-timing-function</strong></code> définit la façon dont une animation CSS doit se dérouler au fur et à mesure de chaque cycle. Cette propriété prendra comme valeurs une ou plusieurs fonctions {{cssxref("<timing-function>")}}.</p> +<p>La propriété <code><strong>animation-timing-function</strong></code> définit la façon dont une animation CSS doit se dérouler au fur et à mesure de chaque cycle. Cette propriété prendra comme valeurs une ou plusieurs fonctions {{cssxref("easing-function")}}.</p> <div>{{EmbedInteractiveExample("pages/css/animation-timing-function.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Généralement, on pourra utiliser la propriété raccourcie {{cssxref("animation")}} pour définir l'ensemble des propriétés liées à une animation.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -57,7 +55,7 @@ animation-timing-function: unset; <dl> <dt><code><timing-function></code></dt> - <dd>Chaque valeur {{cssxref("<timing-function>")}} représente une fonction temporelle à rattacher à une animation définie grâce à {{cssxref("animation-name")}}. + <dd>Chaque valeur {{cssxref("easing-function")}} représente une fonction temporelle à rattacher à une animation définie grâce à {{cssxref("animation-name")}}. <p>Les valeurs avec des mots-clés (<code>ease</code>, <code>linear</code>, <code>ease-in-out</code>, etc.) correspondent à une courbe de Bézier cubique fixe avec quatre valeurs prédéfinies; La fonction <code>cubic-bezier()</code> permet de paramétrer une courbe spécifique. Les fonctions en escalier permettent de diviser l'animation en intervalles de même durée.</p> <dl> @@ -99,7 +97,7 @@ animation-timing-function: unset; </dl> <div class="note"> -<p><strong>Note </strong>: Lorsqu'on définit plusieurs valeurs, séparées par des virgules, sur une propriété <code>animation-*</code>, elles seront affectées selon leur ordre aux différentes animations listées par {{cssxref("animation-name")}}. Si le nombre de valeurs n'est pas le même que le nombre d'animation, voir <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS#Utiliser_plusieurs_valeurs_pour_différentes_animations">Paramétrer plusieurs valeurs de propriétés pour les animations</a>.</p> +<p><strong>Note :</strong> Lorsqu'on définit plusieurs valeurs, séparées par des virgules, sur une propriété <code>animation-*</code>, elles seront affectées selon leur ordre aux différentes animations listées par {{cssxref("animation-name")}}. Si le nombre de valeurs n'est pas le même que le nombre d'animation, voir <a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations#utiliser_plusieurs_valeurs_pour_diff%c3%a9rentes_animations">Paramétrer plusieurs valeurs de propriétés pour les animations</a>.</p> </div> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -111,8 +109,7 @@ animation-timing-function: unset; <div> <h3 id="Courbes_de_Bézier_cubiques">Courbes de Bézier cubiques</h3> -<div class="hidden"> -<pre class="brush:html"><div class="parent"> +<pre class="brush:html hidden"><div class="parent"> <div class="ease">ease</div> <div class="easein">ease-in</div> <div class="easeout">ease-out</div> @@ -121,7 +118,7 @@ animation-timing-function: unset; <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div> </div></pre> -<pre class="brush:css;">.parent > div[class] { +<pre class="brush:css hidden">.parent > div[class] { animation-name: changeme; animation-duration: 10s; animation-iteration-count: infinite; @@ -144,7 +141,6 @@ animation-timing-function: unset; } } </pre> -</div> <pre class="brush: css">.ease { animation-timing-function: ease; @@ -171,8 +167,7 @@ animation-timing-function: unset; <div> <h3 id="Fonctions_en_escalier">Fonctions en escalier</h3> -<div class="hidden"> -<pre class="brush:html"><div class="parent"> +<pre class="brush:html hidden"><div class="parent"> <div class="jump-start">jump-start</div> <div class="jump-end">jump-end</div> <div class="jump-both">jump-both</div> @@ -183,7 +178,7 @@ animation-timing-function: unset; <div class="step-end">step-end</div> </div></pre> -<pre class="brush:css;">.parent > div[class] { +<pre class="brush:css hidden">.parent > div[class] { animation-name: changeme; animation-duration: 10s; animation-iteration-count: infinite; @@ -206,7 +201,6 @@ animation-timing-function: unset; } } </pre> -</div> <pre class="brush: css">.jump-start { animation-timing-function: steps(5, jump-start); @@ -264,7 +258,7 @@ animation-timing-function: unset; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS" title="CSS developer guide about CSS animations">Utiliser les animations CSS</a></li> - <li>{{cssxref('timing-function')}}</li> + <li><a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS developer guide about CSS animations">Utiliser les animations CSS</a></li> + <li>{{cssxref('easing-function')}}</li> <li>L'API JavaScript {{domxref("AnimationEvent")}}</li> </ul> diff --git a/files/fr/web/css/animation/index.html b/files/fr/web/css/animation/index.html index 2458dfa40f..fd5be78c0d 100644 --- a/files/fr/web/css/animation/index.html +++ b/files/fr/web/css/animation/index.html @@ -27,8 +27,6 @@ translation_of: Web/CSS/animation <div>{{EmbedInteractiveExample("pages/css/animation.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <pre class="brush:css no-line-numbers">/* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */ animation: 3s ease-in 1s 2 reverse both paused slidein; @@ -40,8 +38,8 @@ translation_of: Web/CSS/animation animation: 3s slidein; </pre> -<div class="hidden" id="animation"> -<pre class="brush: html"><div class="grid"> +<h2 id="animation_example">Exemple d'animation</h2> +<pre class="brush: html hidden"><div class="grid"> <div class="col"> <div class="note"> Avec l'animation suivante : @@ -80,7 +78,7 @@ translation_of: Web/CSS/animation </div> </div></pre> -<pre class="brush: css">html,body { +<pre class="brush: css hidden">html,body { height: 100%; box-sizing: border-box; } @@ -172,7 +170,7 @@ button.restart { transform-origin: left center; }</pre> -<pre class="brush: js">window.addEventListener('load', function () { +<pre class="brush: js hidden">window.addEventListener('load', function () { var ANIMATION = Array.from(document.querySelectorAll('.animation')); var BUTTON = Array.from(document.querySelectorAll('button')); @@ -211,9 +209,8 @@ button.restart { btn.addEventListener('click', function () { playPause(index); }); }); })</pre> -</div> -<p>{{EmbedLiveSample("animation", "100%", 260, "", "", "example-outcome-frame")}}</p> +<p>{{EmbedLiveSample("animation_example", "100%", 260, "", "", "example-outcome-frame")}}</p> <p><a href="/fr/docs/Web/CSS/Liste_propriétés_CSS_animées">Une liste des propriétés qui peuvent être animées</a> est disponible. On notera que cette liste est également valable pour <a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">les transitions CSS</a>.</p> diff --git a/files/fr/web/css/appearance/index.html b/files/fr/web/css/appearance/index.html index 1de60de406..3f709c1ac5 100644 --- a/files/fr/web/css/appearance/index.html +++ b/files/fr/web/css/appearance/index.html @@ -21,8 +21,6 @@ browser-compat: css.properties.appearance <div>{{EmbedInteractiveExample("pages/css/appearance.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété était utilisée dans les feuilles de style XUL afin de mettre en forme des <em>widgets</em> utilisant la mise en forme de la plateforme utilisée. Elle est également utilisée dans les implémentations XBL pour les <em>widgets</em> livrés avec les logiciels Mozilla.</p> <div class="note"> diff --git a/files/fr/web/css/attr()/index.html b/files/fr/web/css/attr()/index.html index cb6a859554..1a026e67da 100644 --- a/files/fr/web/css/attr()/index.html +++ b/files/fr/web/css/attr()/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/attr() <p>La fonction <strong><code>attr()</code></strong> est utilisée afin de récupérer la valeur d'un attribut d'un élément pour l'utiliser dans la feuille de style. Cette fonction peut également être utilisée sur <a href="/fr/docs/Web/CSS/Pseudo-elements">les pseudo-éléments</a> auquel cas c'est la valeur correspondant à l'élément source qui est renvoyée.</p> -<pre class="brush:css no-line-numbers notranslate">/* Utilisation simple */ +<pre class="brush:css no-line-numbers">/* Utilisation simple */ attr(data-count); attr(title); @@ -168,11 +168,11 @@ attr(data-something, "default"); <h4 id="HTML">HTML</h4> -<pre class="brush: html; notranslate"><p data-toto="coucou">world</p></pre> +<pre class="brush: html;"><p data-toto="coucou">world</p></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css; highlight[2] notranslate">[data-toto]::before { +<pre class="brush: css">[data-toto]::before { content: attr(data-toto) " "; }</pre> @@ -186,19 +186,17 @@ attr(data-something, "default"); <h4 id="HTML_2">HTML</h4> -<pre class="brush: html; notranslate"><div class="background" data-background="lime"></div></pre> +<pre class="brush: html;"><div class="background" data-background="lime"></div></pre> <h4 id="CSS_2">CSS</h4> -<div class="hidden"> -<pre class="brush: css; notranslate">html, +<pre class="brush: css;">html, body, .background { height: 100vh; }</pre> -</div> -<pre class="brush: css; highlight[6] notranslate">.background { +<pre class="brush: css">.background { background-color: red; } @@ -246,7 +244,7 @@ body, <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Sélecteurs_d_attribut">Sélecteur d'attribut</a></li> - <li><a href="/fr/docs/Web/HTML/Attributs_universels/data-*">Attributs HTML <code>data-*</code></a></li> + <li><a href="/fr/docs/Web/CSS/Attribute_selectors">Sélecteur d'attribut</a></li> + <li><a href="/fr/docs/Web/HTML/Global_attributes/data-*">Attributs HTML <code>data-*</code></a></li> <li><a href="/fr/docs/Web/SVG/Attribute/data-*">Attributs SVG <code>data-*</code></a></li> </ul> diff --git a/files/fr/web/css/attribute_selectors/index.html b/files/fr/web/css/attribute_selectors/index.html index e90c7d7fec..1c0631a784 100644 --- a/files/fr/web/css/attribute_selectors/index.html +++ b/files/fr/web/css/attribute_selectors/index.html @@ -57,7 +57,7 @@ a[class~="logo"] { <dd>Permet de cibler un élément qui possède un attribut <code>attr</code> dont la valeur se termine par <code>valeur</code>.</dd> <dt><code>[<em>attr</em>*=<em>valeur</em>]</code></dt> <dd>Permet de cibler un élément qui possède un attribut <code>attr</code> et dont la valeur contient au moins une occurrence de <code>valeur</code> dans la chaîne de caractères.</dd> - <dt id="case-insensitive"><code>[<em>attr</em> <em>operateur</em> <em>valeur</em> i]</code></dt> + <dt><code>[<em>attr</em> <em>operateur</em> <em>valeur</em> i]</code></dt> <dd>On peut ajouter un <code>i</code> (ou <code>I</code>) avant le crochet de fin. Dans ce cas, la casse ne sera pas prise en compte (pour les caractères contenus sur l'intervalle ASCII).</dd> <dt><code>[attr operateur valeur s]</code> {{experimental_inline}}</dt> <dd>Ajouter un <code>s</code> (ou <code>S</code>) avant le crochet fermant permettra d'effectuer une comparaison de valeur sensible à la casse (pour les caractères ASCII).</dd> diff --git a/files/fr/web/css/backface-visibility/index.html b/files/fr/web/css/backface-visibility/index.html index 2f0a69cc68..510a676f14 100644 --- a/files/fr/web/css/backface-visibility/index.html +++ b/files/fr/web/css/backface-visibility/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/backface-visibility <div>{{EmbedInteractiveExample("pages/css/backface-visibility.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Dans certains cas, on souhaite que la face avant ne soit pas visible par transparence. Par exemple, si on souhaite simuler une carte à jouer qu'on retourne.</p> <p>Cette propriété n'aura aucun effet tant que les transformations appliquées sont uniquement en 2D car aucun effet de perspective ne sera introduit.</p> diff --git a/files/fr/web/css/background-attachment/index.html b/files/fr/web/css/background-attachment/index.html index 549d4d3cc6..a047e44575 100644 --- a/files/fr/web/css/background-attachment/index.html +++ b/files/fr/web/css/background-attachment/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/background-attachment <div>{{EmbedInteractiveExample("pages/css/background-attachment.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */ @@ -51,7 +49,7 @@ background-attachment: unset; <h4 id="CSS">CSS</h4> -<pre class="brush:css; highlight:[3];">p { +<pre class="brush:css">p { background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); background-attachment: fixed; } @@ -76,7 +74,7 @@ background-attachment: unset; <h4 id="CSS_2">CSS</h4> -<pre class="brush:css; highlight:[3];">p { +<pre class="brush:css">p { background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif"); background-attachment: fixed, scroll; background-repeat: no-repeat, repeat-y; diff --git a/files/fr/web/css/background-blend-mode/index.html b/files/fr/web/css/background-blend-mode/index.html index 4a1096ca9d..0b8bc30a7f 100644 --- a/files/fr/web/css/background-blend-mode/index.html +++ b/files/fr/web/css/background-blend-mode/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/background-blend-mode <div>{{EmbedInteractiveExample("pages/css/background-blend-mode.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les modes de fusions (<em>blending modes</em>) doivent être définis dans le même ordre que les images sont définies avec {{cssxref("background-image")}}. Si la liste des modes de fusion et la liste des images d'arrière-plan ne sont pas de la même longueur, la première liste sera répétée ou tronquée pour que les longueurs soient égales.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/background-clip/index.html b/files/fr/web/css/background-clip/index.html index bad08f1652..78a5167402 100644 --- a/files/fr/web/css/background-clip/index.html +++ b/files/fr/web/css/background-clip/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/background-clip <div>{{EmbedInteractiveExample("pages/css/background-clip.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Si aucune image ({{cssxref("background-image")}}) ni couleur ({{cssxref("background-color")}}) d'arrière-plan n'est définie, cette propriété aura uniquement un effet visuel lorsque la bordure possède des régions transparentes (via {{cssxref("border-style")}} ou {{cssxref("border-image")}}). Dans les autres cas, la bordure recouvrira la zone où se situera la différence .</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/background-color/index.html b/files/fr/web/css/background-color/index.html index 77f77b6d54..b536c82c49 100644 --- a/files/fr/web/css/background-color/index.html +++ b/files/fr/web/css/background-color/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/background-color <div>{{EmbedInteractiveExample("pages/css/background-color.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/background-image/index.html b/files/fr/web/css/background-image/index.html index 7aed346038..8060b3da48 100644 --- a/files/fr/web/css/background-image/index.html +++ b/files/fr/web/css/background-image/index.html @@ -13,15 +13,15 @@ translation_of: Web/CSS/background-image <div>{{EmbedInteractiveExample("pages/css/background-image.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les images sont dessinées les unes au-dessus des autres. La première image indiquée est dessinée comme étant la plus proche de l'utilisateur.</p> <p>Les bordures de l'élément sont dessinés par-dessus l'arrière-plan et la couleur {{cssxref("background-color")}} est dessinée sous l'arrière-plan. La position et les limites de chaque image sont gérées grâce aux propriétés {{cssxref("background-clip")}} et {{cssxref("background-origin")}}.</p> <p>Si une image donnée ne peut pas être chargée (par exemple lorsqu'il est impossible de charger un fichier via l'URI indiquée), les navigateurs considèreront la valeur comme <code>none</code>.</p> -<div class="note"><strong>Note :</strong> Même si les images sont opaques et que les couleurs ne seront pas affichées de façon normale, les développeurs doivent toujours définir une couleur d'arrière-plan via {{cssxref("background-color")}} au cas où les images ne peuvent être chargées.</div> +<div class="note"> + <p><strong>Note :</strong> Même si les images sont opaques et que les couleurs ne seront pas affichées de façon normale, les développeurs doivent toujours définir une couleur d'arrière-plan via {{cssxref("background-color")}} au cas où les images ne peuvent être chargées.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -155,7 +155,7 @@ div { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Images/Sprites_CSS">Implémenter des sprites en CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS">Implémenter des sprites en CSS</a></li> <li>{{HTMLElement("img")}},</li> <li>{{cssxref("<image>")}},</li> <li>{{cssxref("<gradient>")}},</li> @@ -163,7 +163,7 @@ div { <li>{{cssxref("radial-gradient")}},</li> <li>{{cssxref("repeating-linear-gradient")}},</li> <li>{{cssxref("repeating-radial-gradient")}},</li> - <li>{{cssxref("element")}},</li> + <li>{{cssxref("element()")}},</li> <li>{{cssxref("_image", "image()")}},</li> <li>{{cssxref("image-set")}},</li> <li>{{cssxref("url","url()")}}</li> diff --git a/files/fr/web/css/background-origin/index.html b/files/fr/web/css/background-origin/index.html index bbe137266b..30fda75135 100644 --- a/files/fr/web/css/background-origin/index.html +++ b/files/fr/web/css/background-origin/index.html @@ -13,11 +13,11 @@ translation_of: Web/CSS/background-origin <div>{{EmbedInteractiveExample("pages/css/background-origin.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Attention, <code>background-origin</code> est ignorée lorsque {{cssxref("background-attachment")}} vaut <code>fixed</code>.</p> -<div class="note"><strong>Note : </strong>Cette propriété est rattachée à la propriété raccourcie {{cssxref("background")}}. Aussi, si on a une déclaration <code>background-origin</code> avant la propriété raccourcie et que cette dernière ne définit pas la valeur de l'origine, ce sera la valeur initiale par défaut qui sera prise en compte pour <code>background-origin</code>.</div> +<div class="note"> + <p><strong>Note :</strong> Cette propriété est rattachée à la propriété raccourcie {{cssxref("background")}}. Aussi, si on a une déclaration <code>background-origin</code> avant la propriété raccourcie et que cette dernière ne définit pas la valeur de l'origine, ce sera la valeur initiale par défaut qui sera prise en compte pour <code>background-origin</code>.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/background-position-x/index.html b/files/fr/web/css/background-position-x/index.html index 7d841b7ce5..19ef27e117 100644 --- a/files/fr/web/css/background-position-x/index.html +++ b/files/fr/web/css/background-position-x/index.html @@ -16,9 +16,9 @@ translation_of: Web/CSS/background-position-x <div>{{EmbedInteractiveExample("pages/css/background-position-x.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<div class="note"><strong>Note : </strong>La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration de <code>background-position-x</code>.</div> +<div class="note"> + <p><strong>Note :</strong> La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration de <code>background-position-x</code>.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -102,5 +102,5 @@ background-position-x: unset; <li>{{cssxref("background-position-y")}}</li> <li>{{cssxref("background-position-inline")}}</li> <li>{{cssxref("background-position-block")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Manipuler plusieurs arrière-plans</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Manipuler plusieurs arrière-plans</a></li> </ul> diff --git a/files/fr/web/css/background-position-y/index.html b/files/fr/web/css/background-position-y/index.html index 07c6c16350..d6346071e7 100644 --- a/files/fr/web/css/background-position-y/index.html +++ b/files/fr/web/css/background-position-y/index.html @@ -14,9 +14,9 @@ translation_of: Web/CSS/background-position-y <div>{{EmbedInteractiveExample("pages/css/background-position-y.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<div class="note"><strong>Note : </strong>La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration.</div> +<div class="note"> + <p><strong>Note :</strong> La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -101,5 +101,5 @@ background-position-y: unset; <li>{{cssxref("background-position-x")}}</li> <li>{{cssxref("background-position-inline")}}</li> <li>{{cssxref("background-position-block")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Manipuler plusieurs arrière-plans</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Manipuler plusieurs arrière-plans</a></li> </ul> diff --git a/files/fr/web/css/background-position/index.html b/files/fr/web/css/background-position/index.html index a132fa982d..5649bec662 100644 --- a/files/fr/web/css/background-position/index.html +++ b/files/fr/web/css/background-position/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/background-position <div>{{EmbedInteractiveExample("pages/css/background-position.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeurs utilisant un mot-clé */ @@ -51,12 +49,11 @@ background-position: unset; <p>La propriété <code>background-position</code> peut être définie grâce à une ou plusieurs valeurs <code><a href="#<position>"><position></a></code>, séparées par des virgules.</p> -<h3 id="Values" name="Values">Valeurs</h3> +<h3 id="Values">Valeurs</h3> <dl> - <dt><a id="<position>" name="<position>"><code><position></code></a></dt> - <dd>Une valeur {{cssxref("<position>")}}. Une position définit un couple de coordonnées XY qui permet de placer un objet par rapport aux bords de la boîte d'un élément. Une position peut être définie avec une ou deux valeurs.La première correspond à la position horizontale et la seconde à la position verticale.</dd> - <dd> + <dt><code><position></code></dt> + <dd>Une valeur {{cssxref("<position>")}}. Une position définit un couple de coordonnées XY qui permet de placer un objet par rapport aux bords de la boîte d'un élément. Une position peut être définie avec une ou deux valeurs.La première correspond à la position horizontale et la seconde à la position verticale. <p><strong>Définition avec une valeur :</strong> la valeur peut être :</p> <ul> @@ -186,7 +183,7 @@ L'ordre est le même entre background-image et -position. <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Gérer plusieurs arrières-plans</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Gérer plusieurs arrières-plans</a></li> <li>{{cssxref("background-position-x")}}</li> <li>{{cssxref("background-position-y")}}</li> <li>{{cssxref("background-position-inline")}}</li> diff --git a/files/fr/web/css/background-repeat/index.html b/files/fr/web/css/background-repeat/index.html index faeff47297..91aeac12e6 100644 --- a/files/fr/web/css/background-repeat/index.html +++ b/files/fr/web/css/background-repeat/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/background-repeat <div>{{EmbedInteractiveExample("pages/css/background-repeat.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Par défaut, les images répétées sont rognées à la taille de l'élément mais elles peuvent être redimensionnées pour occuper l'espace avec un nombre entier de répétitions (<code>round</code>) voire être distribuées avec des espaces entre les motifs pour remplir la zone (<code>space</code>).</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -45,8 +43,7 @@ background-repeat: unset; <dl> <dt><code><repeat-style></code></dt> - <dd>Un mot-clé qui peut être utilisé dans la syntaxe à une valeur ou à deux valeurs. La syntaxe utilisant une valeur est une notation raccourcie dont voici le tableau de correspondance :</dd> - <dd> + <dd>Un mot-clé qui peut être utilisé dans la syntaxe à une valeur ou à deux valeurs. La syntaxe utilisant une valeur est une notation raccourcie dont voici le tableau de correspondance : <table class="standard-table"> <tbody> <tr> @@ -79,8 +76,7 @@ background-repeat: unset; </tr> </tbody> </table> - Lorsqu'on utilise la syntaxe à deux valeurs, la première indique la méthode de répétition pour l'axe horizontal et la seconde celle pour l'axe vertical. Voici un tableau décrivant chacune des options :</dd> - <dd> + Lorsqu'on utilise la syntaxe à deux valeurs, la première indique la méthode de répétition pour l'axe horizontal et la seconde celle pour l'axe vertical. Voici un tableau décrivant chacune des options : <table class="standard-table"> <tbody> <tr> @@ -227,5 +223,5 @@ div { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Utiliser plusieurs arrières-plans en CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Utiliser plusieurs arrières-plans en CSS</a></li> </ul> diff --git a/files/fr/web/css/background-size/index.html b/files/fr/web/css/background-size/index.html index edb088c899..3ab7be1f5f 100644 --- a/files/fr/web/css/background-size/index.html +++ b/files/fr/web/css/background-size/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/background-size <div>{{EmbedInteractiveExample("pages/css/background-size.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> L'espace qui n'est pas rempli par l'image d'arrière-plan aura la couleur définie par la propriété {{cssxref("background-color")}}. De plus, la couleur d'arrière-plan sera visible si l'image d'arrière-plan est transparente.</p> </div> @@ -65,15 +63,15 @@ background-size: unset; <h3 id="Valeurs">Valeurs</h3> <dl> - <dt id="contain"><code>contain</code></dt> + <dt><code>contain</code></dt> <dd>Un mot-clé qui redimensionne l'image afin qu'elle soit la plus grande possible et que l'image conserve ses proportions. L'image est contrainte dans le conteneur. Les zones éventuellement vide sont remplies avec la couleur d'arrière-plan (définie grâce à {{cssxref("background-color")}}). Par défaut, l'image est centrée sauf si {{cssxref("background-position")}} a été modifiée.</dd> - <dt id="cover"><code>cover</code></dt> + <dt><code>cover</code></dt> <dd>Un mot-clé dont le comportement est opposé à celui de <code>contain</code>. L'image est redimensionnée pour être aussi grande que possible et pour conserver ses proportions. L'image couvre toute la largeur ou la hauteur du conteneur et les parties qui dépassent sont rognées si les proportions du conteneur sont différentes (il n'y aucun espace libre sur lequel on verrait la couleur d'arrière-plan).</dd> - <dt id="auto"><code>auto</code></dt> + <dt><code>auto</code></dt> <dd>Un mot-clé qui redimensionne l'image d'arrière-plan afin que ses proportions soient conservées.</dd> - <dt id="length"><code><length></code></dt> + <dt><code><length></code></dt> <dd>Une valeur de type {{cssxref("<length>")}} qui redimensionne l'image afin que celle-ci occupe la longueur indiquée dans la dimension concernée. Les valeurs négatives ne sont pas autorisées.</dd> - <dt id="percentage"><code><percentage></code></dt> + <dt><code><percentage></code></dt> <dd>Une valeur de type {{cssxref("<percentage>")}} qui redimensionne l'image d'arrière-plan proportionnellement à la taille de la zone dédiée à l'arrière-plan, définie via {{cssxref("background-origin")}}. Par défaut, cette zone correspond à la boîte de contenu et de remplissage (<em>padding</em>) mais peut être modifiée pour contenir uniquement la boîte de contenu ou, à l'inverse, les boîtes de contenu, remplissage et marge. Si la propriété {{cssxref("background-attachment")}} vaut <code>fixed</code>, la zone de positionnement de l'arrière-plan sera la fenêtre du navigateur (sans les barres de défilement). Les valeurs négatives ne sont pas autorisées.</dd> </dl> @@ -98,13 +96,10 @@ background-size: unset; <p>Selon le caractère intrinsèque ou non des dimensions et des proportions, la taille d'affichage de l'image d'arrière-plan est calculée de la façon suivante :</p> -<dl> - <dt>Si les deux composants de <code>background-size</code> sont définis et qu'aucun ne vaut <code>auto</code> :</dt> - <dd>L'image utilise la taille définie.</dd> - <dt>Si <code>background-size</code> vaut <code>contain</code> ou <code>cover</code> :</dt> - <dd>L'image est affichée et ses proportions sont conservées pour que l'image soit contenue dans la zone ou la recouvre complètement. Si l'image ne possède pas de proportions intrinsèques; elle est affichée avec la taille de la zone de positionnement de l'arrière-plan.</dd> - <dt>Si <code>background-size</code> vaut <code>auto</code> ou <code>auto auto</code> :</dt> - <dd> +<ul> + <li><p>Si les deux composants de <code>background-size</code> sont définis et qu'aucun ne vaut <code>auto</code> : L'image utilise la taille définie.</p></li> + <li><p>Si <code>background-size</code> vaut <code>contain</code> ou <code>cover</code> : L'image est affichée et ses proportions sont conservées pour que l'image soit contenue dans la zone ou la recouvre complètement. Si l'image ne possède pas de proportions intrinsèques; elle est affichée avec la taille de la zone de positionnement de l'arrière-plan.</p></li> + <li><p>Si <code>background-size</code> vaut <code>auto</code> ou <code>auto auto</code> :</p> <ul> <li>Si l'image possède deux dimensions intrinsèques, c'est cette taille qui est utilisée.</li> <li>Si elle ne possède pas de dimension intrinsèque ni de proportion intrinsèque, elle est affichée avec la taille de la zone dédiée à l'arrière-plan.</li> @@ -112,21 +107,18 @@ background-size: unset; <li>Si l'image possède une dimension intrinsèque et une proportion, elle est affichée avec cette dimension et cette proportion.</li> <li>Si l'image possède une dimension intrinsèque mais aucune proportion, elle sera affichée avec la dimension intrinsèque et l'autre dimension suivra la taille de la zone pour l'arrière-plan.</li> </ul> - </dd> - <dd> - <div class="note"><strong>Note :</strong> Les images SVG peuvent contenir un attribut <code><a href="/fr/docs/Web/SVG/Attribute/preserveAspectRatio">preserveAspectRatio</a></code> pour lequel la valeur par défaut est équivalente à <code>contain</code>. Pour Firefox 43, à la différence de Chrome 52, une valeur explicite pour <code>background-size</code> permet d'ignorer <code>preserveAspectRatio</code>.</div> - </dd> - <dt>Si <code>background-size</code> possède une composante <code>auto</code> et que l'autre composante est différente de <code>auto</code> :</dt> - <dd> + <div class="note"><p><strong>Note :</strong> Les images SVG peuvent contenir un attribut <code><a href="/fr/docs/Web/SVG/Attribute/preserveAspectRatio">preserveAspectRatio</a></code> pour lequel la valeur par défaut est équivalente à <code>contain</code>. Pour Firefox 43, à la différence de Chrome 52, une valeur explicite pour <code>background-size</code> permet d'ignorer <code>preserveAspectRatio</code>.</p></div> +</li> + <li><p>Si <code>background-size</code> possède une composante <code>auto</code> et que l'autre composante est différente de <code>auto</code> :</p> <ul> <li>Si l'image possède une proportion intrinsèque, elle sera affichée avec la dimension indiquée et la deuxième sera calculée grâce à la proportion.</li> <li>Si l'image ne possède aucune proportion intrinsèque, la dimension indiquée sera utilisée pour la dimension concernée et on utilisera la dimension intrinsèque de l'image pour l'autre axe si elle existe. Sinon, on prendra la dimension de la zone de l'arrière-plan pour cet axe.</li> </ul> - </dd> -</dl> + </li> +</ul> <div class="note"> -<p><strong>Note : </strong>Le dimensionnement des images d'arrière-plan qui sont des images vectorielles sans dimension ou proportion intrinsèque n'est pas implémenté par l'ensemble des navigateur. Attention à bien vérifier le résultat obtenu dans les différents navigateurs par rapport aux règles émises ci-avant.</p> +<p><strong>Note :</strong> Le dimensionnement des images d'arrière-plan qui sont des images vectorielles sans dimension ou proportion intrinsèque n'est pas implémenté par l'ensemble des navigateur. Attention à bien vérifier le résultat obtenu dans les différents navigateurs par rapport aux règles émises ci-avant.</p> </div> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -258,7 +250,7 @@ background-size: unset; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images">Redimensionner les images d'arrière-plan</a></li> - <li><a href="/fr/docs/Web/CSS/Redimensionnement_arrière-plans_SVG">Redimensionner les arrière-plans SVG</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images">Redimensionner les images d'arrière-plan</a></li> + <li><a href="/fr/docs/Web/CSS/Scaling_of_SVG_backgrounds">Redimensionner les arrière-plans SVG</a></li> <li>{{cssxref("object-fit")}}</li> </ul> diff --git a/files/fr/web/css/background/index.html b/files/fr/web/css/background/index.html index ed55b04e8a..a404e63da6 100644 --- a/files/fr/web/css/background/index.html +++ b/files/fr/web/css/background/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/background <div>{{EmbedInteractiveExample("pages/css/background.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Elle permet de définir une ou plusieurs valeurs pour : {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, et {{cssxref("background-attachment")}}.</p> <p>Lorsqu'on utilise la propriété raccourcie <code>background</code>, les valeurs fournies sont appliquées et pour les valeurs absentes, la propriété réinitialisera les propriétés détaillées avec leurs valeurs initiales.</p> @@ -92,7 +90,7 @@ background: no-repeat center/80% url("../img/image.png"); <h3 id="CSS">CSS</h3> -<pre class="brush:css' highlight:[2,6];">.attention { +<pre class="brush:css">.attention { background: pink; } @@ -153,6 +151,6 @@ background: no-repeat center/80% url("../img/image.png"); <ul> <li>{{cssxref("box-decoration-break")}}</li> - <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Les gradients</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Gérer plusieurs arrière-plans</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Les gradients</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Gérer plusieurs arrière-plans</a></li> </ul> diff --git a/files/fr/web/css/basic-shape/index.html b/files/fr/web/css/basic-shape/index.html index 30bee0b07c..0205f6ff16 100644 --- a/files/fr/web/css/basic-shape/index.html +++ b/files/fr/web/css/basic-shape/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/basic-shape <div>{{EmbedInteractiveExample("pages/css/type-basic-shape.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <p>Lorsque cette syntaxe est utilisée pour définir des formes, la boîte de référence sera indiquée par chaque propriété qui utilise des valeurs <code><basic-shape></code>. L'origine du repère utilisé se situe dans le coin en haut à gauche de la boîte de référence avec un axe des abscisses allant vers la droite et un axe des ordonnées allant vers le bas. Toutes les longueurs exprimées en pourcentages sont calculées en fonction des dimensions de la boîte de référence.</p> @@ -22,44 +20,47 @@ translation_of: Web/CSS/basic-shape <p>Les formes qui suivent sont prises en charge. Toutes les valeurs <code><basic-shape></code> sont créées via une notation fonctionnelle (pour analyser la syntaxe, se référer à <a href="/fr/docs/Web/CSS/Syntaxe_de_d%C3%A9finition_des_valeurs">cette page explicative</a>).</p> <dl> - <dt><code><a name="inset()"></a>inset()</code></dt> + <dt><code>inset()</code></dt> <dd> + <p>Cette fonction permet de définir un rectangle incrusté (<em>inset</em>).</p> <pre class="syntaxbox">inset( <shape-arg>{1,4} [round <border-radius>]? )</pre> - <p>Cette fonction permet de définir un rectangle incrusté (<em>inset</em>).</p> - <p>Lorsque les quatre premiers arguments sont fournis, ils représentent respectivement les décalages, vers l'intérieur, depuis les côtés haut, droit, bas et gauche par rapport à la boîte de référence. Ces arguments peuvent être utilisés de la même façon que pour {{cssxref("margin")}} afin d'utiliser seulement une, deux ou quatre valeurs.</p> <p>L'argument facultatif <code><border-radius></code> permet de définir des coins arrondis pour le rectangle incrusté en utilisant la même syntaxe que pour la propriété raccourcie {{cssxref("border-radius")}}.</p> <p>Si on utilise deux valeurs de décalage pour le même axe (par exemple un décalage depuis le bas et un décalage depuis le haut) dont la somme est supérieure à la dimension de la boîte sur cet axe, la forme obtenue ne contiendra aucune zone. On aura alors une zone de flottement vide.</p> </dd> - <dt><code><a name="polygon()"></a>polygon()</code></dt> + <dt><code>polygon()</code></dt> <dd> + <p>Définit un polygone.</p> <pre class="syntaxbox">polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )</pre> <p><code><fill-rule></code> représente <a href="/fr/docs/Web/SVG/Attribute/fill-rule">la règle de remplissage</a> utilisée pour déterminer l'intérieur du polygone. Les valeurs possibles sont <code>nonzero</code> et <code>evenodd</code>. La valeur par défaut pour cet argument est <code>nonzero</code>.</p> - <p>Ensuite, chaque paire d'arguments dans la liste représente les coordonnées <em>x<sub>i</sub></em> et <em>y<sub>i</sub></em> du i-ème sommet du polygone.</p> + <p>Ensuite, chaque paire d'arguments dans la liste représente les coordonnées <em>xi</em> et <em>yi</em> du i-ème sommet du polygone.</p> </dd> - <dt><code><a name="circle()"></a>circle(</code>)</dt> + <dt><code>circle(</code>)</dt> <dd> + <p>Définit un cercle.</p> <pre class="syntaxbox">circle( [<shape-radius>]? [at <position>]? )</pre> <p>L'argument <code><shape-radius></code> représente le rayon du cercle. Les valeurs négatives ne sont pas autorisées et les valeurs exprimées en pourcentages seront calculées de la façon suivante en fonction de la hauteur et de la largeur de la boîte de référence <code>sqrt(largeur^2+hauteur^2)/sqrt(2)</code>.</p> <p>L'argument {{cssxref("<position>")}} définit la position pour le centre du cercle. La valeur par défaut est <code>center</code>.</p> </dd> - <dt><code><a name="ellipse()"></a>ellipse()</code></dt> + <dt><code>ellipse()</code></dt> <dd> + <p>Définit une ellipse.</p> <pre class="syntaxbox">ellipse( [<shape-radius>{2}]? [at <position>]? )</pre> <p>Les arguments <code><shape-radius></code> représentent les demi-axes horizontaux (r<sub>x</sub>) et verticaux (r<sub>y</sub>) de l'ellipse. Les valeurs négatives ne sont pas autorisées. Les valeurs exprimées en pourcentages sont calculées : en fonction de la hauteur de la boîte de référence pour le demi-axe vertical, en fonction de la largeur de la boîte de référence pour le demi-axe horizontal.</p> <p>L'argument {{cssxref("<position>")}} définit l'emplacement du centre de l'ellipse. La valeur par défaut est <code>center</code>.</p> </dd> - <dt><code><a id="path()" name="path()"></a>path()</code></dt> + <dt><code>path()</code></dt> <dd> + <p>Définit un chemin.</p> <pre class="syntaxbox"><code>path( [<fill-rule>,]? <string>)</code></pre> <p>L'argument optionnel <code><fill-rule></code> représente <a href="/fr/docs/Web/SVG/Attribute/fill-rule">la règle de remplissage</a> utilisée pour déterminer l'intérieur du chemin. Les valeurs possibles sont <code>nonzero</code> et <code>evenodd</code>. La valeur par défaut est <code>nonzero</code>.</p> @@ -89,7 +90,7 @@ translation_of: Web/CSS/basic-shape <h2 id="L'interpolation_des_formes_simples">L'interpolation des formes simples</h2> -<div>Afin d'obtenir une interpolation entre deux formes simples, il faut que les règles qui suivent soient respectées. Les valeurs des argument des fonctions de formes sont interpolées comme une liste simple. Les valeurs de la liste sont interpolées comme <a href="/fr/docs/Web/CSS/length">des longueurs</a>, <a href="/fr/docs/Web/CSS/percentage">des pourcentages</a> ou <a href="/fr/docs/Web/CSS/calc">des valeurs calculées</a> lorsque c'est possible. Si les valeurs de la liste ne sont pas de ces types mais sont identiques, ces valeurs seront interpolées.</div> +<div>Afin d'obtenir une interpolation entre deux formes simples, il faut que les règles qui suivent soient respectées. Les valeurs des argument des fonctions de formes sont interpolées comme une liste simple. Les valeurs de la liste sont interpolées comme <a href="/fr/docs/Web/CSS/length">des longueurs</a>, <a href="/fr/docs/Web/CSS/percentage">des pourcentages</a> ou <a href="/fr/docs/Web/CSS/calc()">des valeurs calculées</a> lorsque c'est possible. Si les valeurs de la liste ne sont pas de ces types mais sont identiques, ces valeurs seront interpolées.</div> <div> </div> diff --git a/files/fr/web/css/blend-mode/index.html b/files/fr/web/css/blend-mode/index.html index 2f025a5746..cd83ad75cd 100644 --- a/files/fr/web/css/blend-mode/index.html +++ b/files/fr/web/css/blend-mode/index.html @@ -23,292 +23,296 @@ translation_of: Web/CSS/blend-mode <dt><code>normal</code></dt> <dd> <p>La couleur finale obtenue est la couleur du premier plan, quelle que soit la couleur de l'arrière-plan. On obtient ainsi un effet similaire à la superposition de deux feuilles de papier opaques.</p> - - <div class="hidden" id="normal"> - <pre class="brush: html"><div id="div"></div></pre> - - <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: normal; -}</pre> - </div> - - <p>{{EmbedLiveSample('normal', "300", "300")}}</p> </dd> <dt><code>multiply</code></dt> <dd> <p>La couleur finale est obtenue en multipliant les couleurs du premier plan et de l'arrière-plan.<br> Si une des couches est noire, le résultat obtenu sera une image noire. Si une des couches est blanche, cela ne modifiera pas l'autre image. On obtient ainsi un effet semblable à la superposition de deux transparents.</p> + </dd> + <dt><code>screen</code></dt> + <dd> + <p>La couleur finale est obtenue en : inversant les couleurs des deux plans, en les multipliant et en inversant la couleur obtenue. Si une des couches est noire, le résultat obtenu sera l'image de l'autre couche. Si une des couches est blanche, l'image obtenue sera blanche. L'effet obtenu est semblable à la projection de deux images sur un écran.</p> + </dd> + <dt><code>overlay</code></dt> + <dd>La couleur finale est celle décrite par <code>multiply</code> si l'arrière-plan est plus sombre ou de <code>screen</code> si elle est plus claire. On a un effet semblable à <code>hard-light</code> avec les couches interverties. + </dd> + <dt><code>darken</code></dt> + <dd> + <p>La couleur finale est la couleur la plus sombre des deux couches.</p> + </dd> + <dt><code>lighten</code></dt> + <dd> + <p>La couleur finale est la couleur la plus claire des deux couches.</p> + </dd> + <dt><code>color-dodge</code></dt> + <dd> + <p>La couleur finale est obtenue en divisant la couleur de l'arrière-plan avec l'inverse de la couleur du premier plan.<br> + Un premier-plan noir n'entraînera aucun changement.</p> + </dd> + <dt><code>color-burn</code></dt> + <dd> + <p>La couleur finale est obtenu en inversant la couleur de l'arrière-plan qui sera divisée par la couleur du premier-plan puis inversée. Un premier-plan blanc n'entraînera aucun changement et un premier-plan qui possède exactement l'inverse de l'arrière-plan entraînera une image noire.</p> + </dd> + <dt><code>hard-light</code></dt> + <dd> + <p>La couleur finale est le résultat de <code>multiply</code> si le premier plan est plus sombre ou de <code>screen</code> si la couleur de premier-plan est plus claire. L'effet obtenu est équivalent à <code>overlay</code> avec les deux couches interverties.</p> + </dd> + <dt><code>soft-light</code></dt> + <dd> + <p>La couleur finale obtenue est semblable à <code>hard-light</code>, mais est plus douce<em><code>.</code></em></p> + </dd> + <dt><code>difference</code></dt> + <dd> + <p>La couleur finale est obtenue en soustrayant la couleur la plus sombre à la couleur la plus claire. Une couche noire n'aura aucun effet et une couche blanche inversera l'autre image.</p> + </dd> + <dt><code>exclusion</code></dt> + <dd> + <p>La couleur finale obtenue est semblable à <code>difference</code> avec moins de contraste. Comme pour <code>difference</code>, une couche noire n'aura aucun effet et une couche blanche inversera l'autre couche.</p> + </dd> + <dt><code>hue</code></dt> + <dd> + <p>La couleur finale aura la teinte de la couleur du premier-plan et la saturation et la luminosité de la couleur de l'arrière-plan.</p> + </dd> + <dt><code>saturation</code></dt> + <dd> + <p>La couleur finale aura la saturation de la couleur du premier plan et la teinte et la luminosité de la couleur de l'arrière-plan.</p> + </dd> + <dt><code>color</code></dt> + <dd> + <p>La couleur finale aura la teinte et la saturation du premier plan et la luminosité de l'arrière-plan. Cet effet conserve les niveaux de gris et peut être utilisé pour coloriser le premier plan.</p> + </dd> + <dt><code>luminosity</code></dt> + <dd> + <p>La couleur finale aura la luminosité de la couleur du premier plan et la teinte et la saturation de la couleur de l'arrière-plan.</p> + </dd> +</dl> + - <div class="hidden" id="multiply"> - <pre class="brush: html"><div id="div"></div></pre> +<h2 id="examples">Exemples</h2> + +<h3 id="normal">normal</h3> + + <pre class="brush: html hidden"><div id="div"></div></pre> <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: multiply; + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: normal; }</pre> - </div> - <p>{{EmbedLiveSample('multiply', "300", "300")}}</p> - </dd> - <dt><code>screen</code></dt> - <dd> - <p>La couleur finale est obtenue en : inversant les couleurs des deux plans, en les multipliant et en inversant la couleur obtenue. Si une des couches est noire, le résultat obtenu sera l'image de l'autre couche. Si une des couches est blanche, l'image obtenue sera blanche. L'effet obtenu est semblable à la projection de deux images sur un écran.</p> +<p>{{ EmbedLiveSample('normal', "300", "350") }}</p> + +<h3 id="multiply">multiply</h3> - <div class="hidden" id="screen"> - <pre class="brush: html"><div id="div"></div></pre> + <pre class="brush: html hidden"><div id="div"></div></pre> <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: screen; + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: multiply; }</pre> - </div> - <p>{{EmbedLiveSample('screen', "300", "300")}}</p> - </dd> - <dt><code>overlay</code></dt> - <dd>La couleur finale est celle décrite par <code>multiply</code> si l'arrière-plan est plus sombre ou de <code>screen</code> si elle est plus claire. On a un effet semblable à <code>hard-light</code> avec les couches interverties. - <div class="hidden" id="overlay"> - <pre class="brush: html"><div id="div"></div></pre> +<p>{{ EmbedLiveSample('multiply', "300", "350") }}</p> + +<h3 id="screen">screen</h3> + + <pre class="brush: html hidden"><div id="div"></div></pre> <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: overlay; + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: screen; }</pre> - </div> - <p>{{EmbedLiveSample('overlay', "300", "300")}}</p> - </dd> - <dt><code>darken</code></dt> - <dd> - <p>La couleur finale est la couleur la plus sombre des deux couches.</p> +<p>{{ EmbedLiveSample('screen', "300", "350") }}</p> - <div class="hidden" id="darken"> - <pre class="brush: html"><div id="div"></div></pre> +<h3 id="overlay">overlay</h3> + + <pre class="brush: html hidden"><div id="div"></div></pre> <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: darken; + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: overlay; }</pre> - </div> - <p>{{EmbedLiveSample('darken', "300", "300")}}</p> - </dd> - <dt><code>lighten</code></dt> - <dd> - <p>La couleur finale est la couleur la plus claire des deux couches.</p> +<p>{{ EmbedLiveSample('overlay', "300", "350") }}</p> - <div class="hidden" id="lighten"> - <pre class="brush: html"><div id="div"></div></pre> +<h3 id="darken">darken</h3> + + <pre class="brush: html hidden"><div id="div"></div></pre> <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: lighten; + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: darken; }</pre> - </div> - <p>{{EmbedLiveSample('lighten', "300", "300")}}</p> - </dd> - <dt><code>color-dodge</code></dt> - <dd> - <p>La couleur finale est obtenue en divisant la couleur de l'arrière-plan avec l'inverse de la couleur du premier plan.<br> - Un premier-plan noir n'entraînera aucun changement.</p> +<p>{{ EmbedLiveSample('darken', "300", "350") }}</p> - <div class="hidden" id="color-dodge"> - <pre class="brush: html"><div id="div"></div></pre> +<h3 id="lighten">lighten</h3> + + <pre class="brush: html hidden"><div id="div"></div></pre> <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: color-dodge; + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: lighten; }</pre> - </div> - <p>{{EmbedLiveSample('color-dodge', "300", "300")}}</p> - </dd> - <dt><code>color-burn</code></dt> - <dd> - <p>La couleur finale est obtenu en inversant la couleur de l'arrière-plan qui sera divisée par la couleur du premier-plan puis inversée. Un premier-plan blanc n'entraînera aucun changement et un premier-plan qui possède exactement l'inverse de l'arrière-plan entraînera une image noire.</p> +<p>{{ EmbedLiveSample('lighten', "300", "350") }}</p> - <div class="hidden" id="color-burn"> - <pre class="brush: html"><div id="div"></div></pre> +<h3 id="color-dodge">color-dodge</h3> + + <pre class="brush: html hidden"><div id="div"></div></pre> <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: color-burn; + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: color-dodge; }</pre> - </div> - <p>{{EmbedLiveSample('color-burn', "300", "300")}}</p> - </dd> - <dt><code>hard-light</code></dt> - <dd> - <p>La couleur finale est le résultat de <code>multiply</code> si le premier plan est plus sombre ou de <code>screen</code> si la couleur de premier-plan est plus claire. L'effet obtenu est équivalent à <code>overlay</code> avec les deux couches interverties.</p> +<p>{{ EmbedLiveSample('color-dodge', "300", "350") }}</p> + +<h3 id="color-burn">color-burn</h3> - <div class="hidden" id="hard-light"> - <pre class="brush: html"><div id="div"></div></pre> + <pre class="brush: html hidden"><div id="div"></div></pre> <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: hard-light; + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: color-burn; }</pre> - </div> - <p>{{EmbedLiveSample('hard-light', "300", "300")}}</p> - </dd> - <dt><code>soft-light</code></dt> - <dd> - <p>La couleur finale obtenue est semblable à <code>hard-light</code>, mais est plus douce<em><code>.</code></em></p> +<p>{{ EmbedLiveSample('color-burn', "300", "350") }}</p> + +<h3 id="hard-light">hard-light</h3> - <div class="hidden" id="soft-light"> - <pre class="brush: html"><div id="div"></div></pre> + <pre class="brush: html hidden"><div id="div"></div></pre> <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: soft-light; + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: hard-light; }</pre> - </div> - <p>{{EmbedLiveSample('soft-light', "300", "300")}}</p> - </dd> - <dt><code>difference</code></dt> - <dd> - <p>La couleur finale est obtenue en soustrayant la couleur la plus sombre à la couleur la plus claire. Une couche noire n'aura aucun effet et une couche blanche inversera l'autre image.</p> +<p>{{ EmbedLiveSample('hard-light', "300", "350") }}</p> + +<h3 id="soft-light">soft-light</h3> - <div class="hidden" id="difference"> - <pre class="brush: html"><div id="div"></div></pre> + <pre class="brush: html hidden"><div id="div"></div></pre> <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: difference; + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: soft-light; }</pre> - </div> - <p>{{EmbedLiveSample('difference', "300", "300")}}</p> - </dd> - <dt><code>exclusion</code></dt> - <dd> - <p>La couleur finale obtenue est semblable à <code>difference</code> avec moins de contraste. Comme pour <code>difference</code>, une couche noire n'aura aucun effet et une couche blanche inversera l'autre couche.</p> +<p>{{ EmbedLiveSample('soft-light', "300", "350") }}</p> - <div class="hidden" id="exclusion"> - <pre class="brush: html"><div id="div"></div></pre> +<h3 id="difference">difference</h3> + + <pre class="brush: html hidden"><div id="div"></div></pre> <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: exclusion; + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: difference; }</pre> - </div> - <p>{{EmbedLiveSample('exclusion', "300", "300")}}</p> - </dd> - <dt><code>hue</code></dt> - <dd> - <p>La couleur finale aura la teinte de la couleur du premier-plan et la saturation et la luminosité de la couleur de l'arrière-plan.</p> +<p>{{ EmbedLiveSample('difference', "300", "350") }}</p> - <div class="hidden" id="hue"> - <pre class="brush: html"><div id="div"></div></pre> +<h3 id="exclusion">exclusion</h3> + + <pre class="brush: html hidden"><div id="div"></div></pre> <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: hue; + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: exclusion; }</pre> - </div> - <p>{{EmbedLiveSample('hue', "300", "300")}}</p> - </dd> - <dt><code>saturation</code></dt> - <dd> - <p>La couleur finale aura la saturation de la couleur du premier plan et la teinte et la luminosité de la couleur de l'arrière-plan.</p> +<p>{{ EmbedLiveSample('exclusion', "300", "350") }}</p> + +<h3 id="hue">hue</h3> - <div class="hidden" id="saturation"> - <pre class="brush: html"><div id="div"></div></pre> + <pre class="brush: html hidden"><div id="div"></div></pre> <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: saturation; + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: hue; }</pre> - </div> - <p>{{EmbedLiveSample('saturation', "300", "300")}}</p> - </dd> - <dt><code>color</code></dt> - <dd> - <p>La couleur finale aura la teinte et la saturation du premier plan et la luminosité de l'arrière-plan. Cet effet conserve les niveaux de gris et peut être utilisé pour coloriser le premier plan.</p> +<p>{{ EmbedLiveSample('hue', "300", "350") }}</p> + +<h3 id="saturation">saturation</h3> - <div class="hidden" id="color"> - <pre class="brush: html"><div id="div"></div></pre> + <pre class="brush: html hidden"><div id="div"></div></pre> <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: color; + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: saturation; }</pre> - </div> - <p>{{EmbedLiveSample('color', "300", "300")}}</p> - </dd> - <dt><code>luminosity</code></dt> - <dd> - <p>La couleur finale aura la luminosité de la couleur du premier plan et la teinte et la saturation de la couleur de l'arrière-plan.</p> +<p>{{ EmbedLiveSample('saturation', "300", "350") }}</p> - <div class="hidden" id="luminosity"> - <pre class="brush: html"><div id="div"></div></pre> +<h3 id="color">color</h3> + + <pre class="brush: html hidden"><div id="div"></div></pre> <pre class="brush: css">#div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: luminosity; + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: color; }</pre> - </div> - <p>{{EmbedLiveSample('luminosity', "300", "300")}}</p> - </dd> -</dl> +<p>{{ EmbedLiveSample('color', "300", "350") }}</p> + +<h3 id="luminosity">luminosity</h3> + + <pre class="brush: html hidden"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('br.png'), + url('tr.png'); + background-blend-mode: luminosity; +}</pre> + +<p>{{ EmbedLiveSample('luminosity', "300", "350") }}</p> <h2 id="L'interpolation_des_modes_de_fusion">L'interpolation des modes de fusion</h2> diff --git a/files/fr/web/css/block-size/index.html b/files/fr/web/css/block-size/index.html index 2994e685a5..4ed59048b2 100644 --- a/files/fr/web/css/block-size/index.html +++ b/files/fr/web/css/block-size/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/block-size <div>{{EmbedInteractiveExample("pages/css/block-size.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Si le mode d'écriture est vertical, la valeur de <code>block-size</code> fera référence à la largeur de l'élément et sinon, elle fera référence à sa hauteur.</p> <p>L'autre propriété logique permettant de définir la dimension sur l'autre axe est {{cssxref("inline-size")}}.</p> diff --git a/files/fr/web/css/border-block-end-color/index.html b/files/fr/web/css/border-block-end-color/index.html index a6422a9b92..0837a30800 100644 --- a/files/fr/web/css/border-block-end-color/index.html +++ b/files/fr/web/css/border-block-end-color/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/border-block-end-color <div>{{EmbedInteractiveExample("pages/css/border-block-end-color.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :</p> <ul> diff --git a/files/fr/web/css/border-block-end-style/index.html b/files/fr/web/css/border-block-end-style/index.html index d776b6e2f3..2f381a74bc 100644 --- a/files/fr/web/css/border-block-end-style/index.html +++ b/files/fr/web/css/border-block-end-style/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/border-block-end-style <div>{{EmbedInteractiveExample("pages/css/border-block-end-style.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les autres propriétés logiques permettant de définir le style de la bordure sont les suivantes :</p> <ul> diff --git a/files/fr/web/css/border-block-end-width/index.html b/files/fr/web/css/border-block-end-width/index.html index 09d58b14b9..a6cd3ee9ea 100644 --- a/files/fr/web/css/border-block-end-width/index.html +++ b/files/fr/web/css/border-block-end-width/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/border-block-end-width <div>{{EmbedInteractiveExample("pages/css/border-block-end-width.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété logique est à rapprocher des autres propriétés logiques {{cssxref("border-block-start-width")}}, {{cssxref("border-inline-end-width")}} et {{cssxref("border-inline-end-width")}} qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/border-block-end/index.html b/files/fr/web/css/border-block-end/index.html index 64b30fe781..4ec15731fe 100644 --- a/files/fr/web/css/border-block-end/index.html +++ b/files/fr/web/css/border-block-end/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/border-block-end <div>{{EmbedInteractiveExample("pages/css/border-block-end.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p> <p>On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés :</p> diff --git a/files/fr/web/css/border-block-start-color/index.html b/files/fr/web/css/border-block-start-color/index.html index 2a19ee6af8..95208d2f9b 100644 --- a/files/fr/web/css/border-block-start-color/index.html +++ b/files/fr/web/css/border-block-start-color/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/border-block-start-color <div>{{EmbedInteractiveExample("pages/css/border-block-start-color.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :</p> <ul> diff --git a/files/fr/web/css/border-block-start-style/index.html b/files/fr/web/css/border-block-start-style/index.html index 1cc6d32187..a6060e2c1d 100644 --- a/files/fr/web/css/border-block-start-style/index.html +++ b/files/fr/web/css/border-block-start-style/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/border-block-start-style <div>{{EmbedInteractiveExample("pages/css/border-block-start-style.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les autres propriétés logiques permettant de définir le style de la bordure sont les suivantes :</p> <ul> diff --git a/files/fr/web/css/border-block-start-width/index.html b/files/fr/web/css/border-block-start-width/index.html index 4b4014b773..4e9e0f6139 100644 --- a/files/fr/web/css/border-block-start-width/index.html +++ b/files/fr/web/css/border-block-start-width/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/border-block-start-width <div>{{EmbedInteractiveExample("pages/css/border-block-start-width.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété logique est à rapprocher des autres propriétés logiques {{cssxref("border-inline-start-width")}}, {{cssxref("border-block-end-width")}} et {{cssxref("border-inline-end-width")}} qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/border-block-start/index.html b/files/fr/web/css/border-block-start/index.html index 2dc10fd173..44fa752755 100644 --- a/files/fr/web/css/border-block-start/index.html +++ b/files/fr/web/css/border-block-start/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/border-block-start <div>{{EmbedInteractiveExample("pages/css/border-block-start.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p> <p>On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés :</p> diff --git a/files/fr/web/css/border-bottom-color/index.html b/files/fr/web/css/border-bottom-color/index.html index 2c1405eb2e..a1c9a1bf02 100644 --- a/files/fr/web/css/border-bottom-color/index.html +++ b/files/fr/web/css/border-bottom-color/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/border-bottom-color <div>{{EmbedInteractiveExample("pages/css/border-bottom-color.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs de type <color> */ diff --git a/files/fr/web/css/border-bottom-left-radius/index.html b/files/fr/web/css/border-bottom-left-radius/index.html index 7fbe0c67a8..be45e9ff52 100644 --- a/files/fr/web/css/border-bottom-left-radius/index.html +++ b/files/fr/web/css/border-bottom-left-radius/index.html @@ -13,11 +13,11 @@ translation_of: Web/CSS/border-bottom-left-radius <div>{{EmbedInteractiveExample("pages/css/border-bottom-left-radius.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>L'arrondi peut être un fragment de cercle ou d'ellipse. Si une des valeurs vaut 0, aucun arrondi n'a lieu et le coin est un angle droit.Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de {{cssxref("background-clip")}}.</p> -<div class="note"><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après <code>border-bottom-left-radius</code>, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">la propriété raccourcie</a>.</div> +<div class="note"> + <p><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après <code>border-bottom-left-radius</code>, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de <a href="/fr/docs/Web/CSS/Shorthand_properties">la propriété raccourcie</a>.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/border-bottom-right-radius/index.html b/files/fr/web/css/border-bottom-right-radius/index.html index 01202f17c2..9a9fb45657 100644 --- a/files/fr/web/css/border-bottom-right-radius/index.html +++ b/files/fr/web/css/border-bottom-right-radius/index.html @@ -13,11 +13,11 @@ translation_of: Web/CSS/border-bottom-right-radius <div>{{EmbedInteractiveExample("pages/css/border-bottom-right-radius.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de {{cssxref("background-clip")}}.</p> -<div class="note"><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après <code>border-bottom-right-radius</code>, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">la propriété raccourcie</a>.</div> +<div class="note"> + <p><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après <code>border-bottom-right-radius</code>, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de <a href="/fr/docs/Web/CSS/Shorthand_properties">la propriété raccourcie</a>.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/border-bottom-style/index.html b/files/fr/web/css/border-bottom-style/index.html index 25af11dd26..82a22dc543 100644 --- a/files/fr/web/css/border-bottom-style/index.html +++ b/files/fr/web/css/border-bottom-style/index.html @@ -13,9 +13,9 @@ translation_of: Web/CSS/border-bottom-style <div>{{EmbedInteractiveExample("pages/css/border-bottom-style.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<div class="note"><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</div> +<div class="note"> + <p><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -46,73 +46,43 @@ border-bottom-style: unset; <tbody> <tr> <td><code>none</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: none; background-color: palegreen;"> </div> - </td> <td>L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-bottom-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>none</code> a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera affichée.</td> </tr> <tr> <td><code>hidden</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: hidden; background-color: palegreen;"> </div> - </td> <td>L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-bottom-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera affichée.</td> </tr> <tr> <td><code>dotted</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: dotted; background-color: palegreen;"> </div> - </td> <td>Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-bottom-width")}}.</td> </tr> <tr> <td><code>dashed</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: dashed; background-color: palegreen;"> </div> - </td> <td>Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.</td> </tr> <tr> <td><code>solid</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: solid; background-color: palegreen;"> </div> - </td> <td>Affiche une ligne droite continue.</td> </tr> <tr> <td><code>double</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: double; background-color: palegreen;"> </div> - </td> <td>Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-bottom-width")}}.</td> </tr> <tr> <td><code>groove</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: groove; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à <code>ridge</code>.</td> </tr> <tr> <td><code>ridge</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: ridge; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec <code>groove</code>.</td> </tr> <tr> <td><code>inset</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: inset; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut <code>collapsed</code>, cette valeur se comporte comme <code>groove</code>.</td> </tr> <tr> <td><code>outset</code></td> <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: outset; background-color: palegreen;"> </div> - </td> - <td> <p>La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut <code>collapsed</code>, cette valeur se comporte comme <code>ridge</code>.</p> </td> </tr> diff --git a/files/fr/web/css/border-bottom-width/index.html b/files/fr/web/css/border-bottom-width/index.html index 32224d9304..62e85b5adb 100644 --- a/files/fr/web/css/border-bottom-width/index.html +++ b/files/fr/web/css/border-bottom-width/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/border-bottom-width <div>{{EmbedInteractiveExample("pages/css/border-bottom-width.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Une valeur de longueur */ @@ -39,31 +37,11 @@ border-bottom-width: unset; <dl> <dt><code><line-width></code></dt> <dd>Une valeur de longueur ({{cssxref("<length>")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le bas de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes : - <table class="standard-table"> - <tbody> - <tr> - <td><code>thin</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: solid; border-bottom-width: thin; background-color: palegreen;"> </div> - </td> - <td>Une bordure fine.</td> - </tr> - <tr> - <td><code>medium</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: solid; border-bottom-width: medium; background-color: palegreen;"> </div> - </td> - <td>Une bordure moyenne.</td> - </tr> - <tr> - <td><code>thick</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: solid; border-bottom-width: thick; background-color: palegreen;"> </div> - </td> - <td>Une bordure épaisse.</td> - </tr> - </tbody> - </table> + <ul> + <li><code>thin</code> (fin)</li> + <li><code>medium</code> (intermédiaire)</li> + <li><code>thick</code> (épais)</li> + </ul> La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée <code>thin ≤ medium ≤ thick</code> et que ces valeurs soient constantes pour un même document<code>.</code></dd> </dl> diff --git a/files/fr/web/css/border-bottom/index.html b/files/fr/web/css/border-bottom/index.html index b02a21e637..40903908a8 100644 --- a/files/fr/web/css/border-bottom/index.html +++ b/files/fr/web/css/border-bottom/index.html @@ -23,8 +23,6 @@ translation_of: Web/CSS/border-bottom <div>{{EmbedInteractiveExample("pages/css/border-bottom.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> Comme pour les autres propriétés raccourcies, <code>border-bottom</code> définit toujours les valeurs de toutes les propriétés qu'elle peut définir, même si celles-ci ne sont pas indiquées. Pour les valeurs qui ne sont pas indiquées, on prendra les valeurs par défaut. Ainsi :</p> diff --git a/files/fr/web/css/border-collapse/index.html b/files/fr/web/css/border-collapse/index.html index 44857ef640..1751aa7ddf 100644 --- a/files/fr/web/css/border-collapse/index.html +++ b/files/fr/web/css/border-collapse/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/border-collapse <div>{{EmbedInteractiveExample("pages/css/border-collapse.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Le modèle des <em>bordures séparées</em> est celui qui est traditionnellement utilisé par HTML. Les cellules adjacente ont des bordures distinctes et la distance entre ces bordures est définie par la propriété {{cssxref("border-spacing")}}.</p> <p>Le modèle des <em>bordures fusionnées</em> permet que les cellules adjacentes partagent leurs bordures. Lorsqu'on utilise ce modèle, les valeurs <code>inset</code> et <code>outset</code> de {{cssxref("border-style")}} se comportent respectivement comme <code>groove</code> et <code>ridge</code>.</p> diff --git a/files/fr/web/css/border-color/index.html b/files/fr/web/css/border-color/index.html index 75ccdf21eb..34c8a624c4 100644 --- a/files/fr/web/css/border-color/index.html +++ b/files/fr/web/css/border-color/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/border-color <div>{{EmbedInteractiveExample("pages/css/border-color.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Chaque côté peut être paramétré individuellement grâce aux propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} et {{cssxref("border-left-color")}} ou, si on utilise les propriétés logiques : {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}} et {{cssxref("border-inline-end-color")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/border-image-outset/index.html b/files/fr/web/css/border-image-outset/index.html index 268d5a3a87..72861fff31 100644 --- a/files/fr/web/css/border-image-outset/index.html +++ b/files/fr/web/css/border-image-outset/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/border-image-outset <div>{{EmbedInteractiveExample("pages/css/border-image-outset.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les fragments de l'image de bordure qui sont affichées en dehors de la boîte de bordure suite à l'utilisation de cette propriété n'entraîneront pas la création de barres de défilement. Ces zones ne capturent ni n'entraînent d'événements de pointeur par rapport à l'élément concerné.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/border-image-repeat/index.html b/files/fr/web/css/border-image-repeat/index.html index cdd8232f24..73277c07d4 100644 --- a/files/fr/web/css/border-image-repeat/index.html +++ b/files/fr/web/css/border-image-repeat/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/border-image-repeat <div>{{EmbedInteractiveExample("pages/css/border-image-repeat.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* border-image-repeat */ diff --git a/files/fr/web/css/border-image-slice/index.html b/files/fr/web/css/border-image-slice/index.html index 5466c32526..ab1572f57c 100644 --- a/files/fr/web/css/border-image-slice/index.html +++ b/files/fr/web/css/border-image-slice/index.html @@ -13,9 +13,7 @@ translation_of: Web/CSS/border-image-slice <div>{{EmbedInteractiveExample("pages/css/border-image-slice.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p><img alt="Les 9 zones définies par border-image-slice" src="/files/3814/border-image-slice.png" style="height: 132px; margin: 1px; padding: 1em; width: 250px;"></p> +<p><img alt="Les 9 zones définies par border-image-slice" src="border-image-slice.png"></p> <p>Les quatre valeurs contrôlent les positions des lignes de découpe. Si certaines ne sont pas définies, leurs valeurs sont déduites des valeurs fournies (se référer à la section sur la syntaxe).</p> @@ -126,5 +124,5 @@ border-image-slice: unset; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Propriétés_raccourcies#Quelques_cas_aux_limites_épineux">Description illustrée de la syntaxe multi-valuée</a></li> + <li><a href="/fr/docs/Web/CSS/Shorthand_properties#quelques_cas_aux_limites_%c3%a9pineux">Description illustrée de la syntaxe multi-valuée</a></li> </ul> diff --git a/files/fr/web/css/border-image-source/index.html b/files/fr/web/css/border-image-source/index.html index 904c1ccdfd..f030f45974 100644 --- a/files/fr/web/css/border-image-source/index.html +++ b/files/fr/web/css/border-image-source/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/border-image-source <div>{{EmbedInteractiveExample("pages/css/border-image-source.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */ diff --git a/files/fr/web/css/border-image-width/index.html b/files/fr/web/css/border-image-width/index.html index 03f2a742d1..f334914cde 100644 --- a/files/fr/web/css/border-image-width/index.html +++ b/files/fr/web/css/border-image-width/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/border-image-width <div>{{EmbedInteractiveExample("pages/css/border-image-width.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Si <code>border-image-width</code> est supérieur à {{cssxref("border-width")}}, la bordure imagée s'étendra au-delà du <em>padding</em> voire du contenu.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/border-image/index.html b/files/fr/web/css/border-image/index.html index a17db19da4..d945857f9f 100644 --- a/files/fr/web/css/border-image/index.html +++ b/files/fr/web/css/border-image/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/border-image <div>{{EmbedInteractiveExample("pages/css/border-image.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cela permet d'obtenir des effets de dessin complexes sans avoir à complexifier l'utilisation des boîtes CSS. La propriété <code>border-image</code> sera utilisée plutôt que le style défini via la propriété {{cssxref("border-style")}}. Selon la spécification, <code>border-style</code> <strong>doit</strong> être présente si <code>border-image</code> est utilisée.</p> <div class="note"> diff --git a/files/fr/web/css/border-inline-end-color/index.html b/files/fr/web/css/border-inline-end-color/index.html index 9289f6ecda..bc4b34cade 100644 --- a/files/fr/web/css/border-inline-end-color/index.html +++ b/files/fr/web/css/border-inline-end-color/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/border-inline-end-color <div>{{EmbedInteractiveExample("pages/css/border-inline-end-color.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :</p> <ul> diff --git a/files/fr/web/css/border-inline-end-style/index.html b/files/fr/web/css/border-inline-end-style/index.html index e161161904..7fa9597e99 100644 --- a/files/fr/web/css/border-inline-end-style/index.html +++ b/files/fr/web/css/border-inline-end-style/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/border-inline-end-style <div>{{EmbedInteractiveExample("pages/css/border-inline-end-style.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les autres propriétés logiques permettant de définir le style de la bordure sont les suivantes :</p> <ul> diff --git a/files/fr/web/css/border-inline-end-width/index.html b/files/fr/web/css/border-inline-end-width/index.html index 41aac7ad6c..1c01412029 100644 --- a/files/fr/web/css/border-inline-end-width/index.html +++ b/files/fr/web/css/border-inline-end-width/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/border-inline-end-width <div>{{EmbedInteractiveExample("pages/css/border-inline-end-width.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété logique est à rapprocher des autres propriétés logiques {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}} et {{cssxref("border-inline-start-width")}} qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/border-inline-end/index.html b/files/fr/web/css/border-inline-end/index.html index a801d40d70..860957487a 100644 --- a/files/fr/web/css/border-inline-end/index.html +++ b/files/fr/web/css/border-inline-end/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/border-inline-end <div>{{EmbedInteractiveExample("pages/css/border-inline-end.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p> <p>On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés :</p> diff --git a/files/fr/web/css/border-inline-start-color/index.html b/files/fr/web/css/border-inline-start-color/index.html index 8cf5b5b11f..f2b6520344 100644 --- a/files/fr/web/css/border-inline-start-color/index.html +++ b/files/fr/web/css/border-inline-start-color/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/border-inline-start-color <div>{{EmbedInteractiveExample("pages/css/border-inline-start-color.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :</p> <ul> diff --git a/files/fr/web/css/border-inline-start-width/index.html b/files/fr/web/css/border-inline-start-width/index.html index 648cd04479..a530bc3c6e 100644 --- a/files/fr/web/css/border-inline-start-width/index.html +++ b/files/fr/web/css/border-inline-start-width/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/border-inline-start-width <div>{{EmbedInteractiveExample("pages/css/border-inline-start-width.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété logique est à rapprocher des autres propriétés logiques {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}} et {{cssxref("border-inline-end-width")}} qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/border-inline-start/index.html b/files/fr/web/css/border-inline-start/index.html index 31c508d4ed..1e57c3f268 100644 --- a/files/fr/web/css/border-inline-start/index.html +++ b/files/fr/web/css/border-inline-start/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/border-inline-start <div>{{EmbedInteractiveExample("pages/css/border-inline-start.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p> <p>On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés :</p> diff --git a/files/fr/web/css/border-left-color/index.html b/files/fr/web/css/border-left-color/index.html index 7c333ed82f..d19f3c7ad2 100644 --- a/files/fr/web/css/border-left-color/index.html +++ b/files/fr/web/css/border-left-color/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/border-left-color <div>{{EmbedInteractiveExample("pages/css/border-left-color.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs de type <color> */ diff --git a/files/fr/web/css/border-left-style/index.html b/files/fr/web/css/border-left-style/index.html index ad7a1c9fb9..3bb7d560f3 100644 --- a/files/fr/web/css/border-left-style/index.html +++ b/files/fr/web/css/border-left-style/index.html @@ -13,9 +13,9 @@ translation_of: Web/CSS/border-left-style <div>{{EmbedInteractiveExample("pages/css/border-left-style.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<div class="note"><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</div> +<div class="note"> + <p><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -46,73 +46,43 @@ border-left-style: unset; <tbody> <tr> <td><code>none</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: none; background-color: palegreen;"> </div> - </td> <td>L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-left-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>none</code> a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera affichée.</td> </tr> <tr> <td><code>hidden</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: hidden; background-color: palegreen;"> </div> - </td> <td>L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-left-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera affichée.</td> </tr> <tr> <td><code>dotted</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: dotted; background-color: palegreen;"> </div> - </td> <td>Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-left-width")}}.</td> </tr> <tr> <td><code>dashed</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: dashed; background-color: palegreen;"> </div> - </td> <td>Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.</td> </tr> <tr> <td><code>solid</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: solid; background-color: palegreen;"> </div> - </td> <td>Affiche une ligne droite continue.</td> </tr> <tr> <td><code>double</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: double; background-color: palegreen;"> </div> - </td> <td>Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-left-width")}}.</td> </tr> <tr> <td><code>groove</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: groove; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à <code>ridge</code>.</td> </tr> <tr> <td><code>ridge</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: ridge; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec <code>groove</code>.</td> </tr> <tr> <td><code>inset</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: inset; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut <code>collapsed</code>, cette valeur se comporte comme <code>groove</code>.</td> </tr> <tr> <td><code>outset</code></td> <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: outset; background-color: palegreen;"> </div> - </td> - <td> <p>La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut <code>collapsed</code>, cette valeur se comporte comme <code>ridge</code>.</p> </td> </tr> diff --git a/files/fr/web/css/border-left-width/index.html b/files/fr/web/css/border-left-width/index.html index 4b5b84a190..5c218977d1 100644 --- a/files/fr/web/css/border-left-width/index.html +++ b/files/fr/web/css/border-left-width/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/border-left-width <div>{{EmbedInteractiveExample("pages/css/border-left-width.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Une valeur de longueur */ @@ -39,31 +37,11 @@ border-left-width: unset; <dl> <dt><code><br-width></code></dt> <dd>Une valeur de longueur ({{cssxref("<length>")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le côté gauche de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes : - <table class="standard-table"> - <tbody> - <tr> - <td><code>thin</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: solid; border-left-width: thin; background-color: palegreen;"> </div> - </td> - <td>Une bordure fine.</td> - </tr> - <tr> - <td><code>medium</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: solid; border-left-width: medium; background-color: palegreen;"> </div> - </td> - <td>Une bordure moyenne.</td> - </tr> - <tr> - <td><code>thick</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: solid; border-left-width: thick; background-color: palegreen;"> </div> - </td> - <td>Une bordure épaisse.</td> - </tr> - </tbody> - </table> + <ul> + <li><code>thin</code> (fin)</li> + <li><code>medium</code> (intermédiaire)</li> + <li><code>thick</code> (épais)</li> + </ul> La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée <code>thin ≤ medium ≤ thick</code> et que ces valeurs soient constantes pour un même document<code>.</code></dd> </dl> diff --git a/files/fr/web/css/border-left/index.html b/files/fr/web/css/border-left/index.html index b0a1a7de7d..bd60bc0f95 100644 --- a/files/fr/web/css/border-left/index.html +++ b/files/fr/web/css/border-left/index.html @@ -23,8 +23,6 @@ translation_of: Web/CSS/border-left <div>{{EmbedInteractiveExample("pages/css/border-left.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> Les trois valeurs de la propriété raccourcie peuvent être définies dans n'importe quel ordre et une ou deux d'entre elles peuvent être absentes.</p> diff --git a/files/fr/web/css/border-radius/index.html b/files/fr/web/css/border-radius/index.html index 779403fa01..540cf83bc4 100644 --- a/files/fr/web/css/border-radius/index.html +++ b/files/fr/web/css/border-radius/index.html @@ -14,11 +14,9 @@ translation_of: Web/CSS/border-radius <div>{{EmbedInteractiveExample("pages/css/border-radius.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La courbure s'applique à l'arrière-plan (défini avec la propriété {{cssxref("background")}}) même si l'élément n'a aucune bordure. Le rognage de l'arrière plan s'applique sur la boîte définie par {{cssxref("background-clip")}}.</p> -<p>Cette propriété est une <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriété raccourcie</a> qui permet de définir :</p> +<p>Cette propriété est une <a href="/fr/docs/Web/CSS/Shorthand_properties">propriété raccourcie</a> qui permet de définir :</p> <ul> <li>{{cssxref("border-top-left-radius")}},</li> @@ -29,7 +27,9 @@ translation_of: Web/CSS/border-radius <p>La propriété <code>border-radius</code> ne s'applique pas aux tableaux lorsque {{cssxref("border-collapse")}} vaut <code>collapse</code>.</p> -<div class="note"><strong>Note :</strong> Comme pour les autres propriétés raccourcies, il n'est pas possible d'hériter de valeurs individuelles (par exemple (<code>border-radius:0 0 inherit inherit</code> pour surcharger les définitions existantes). Si on souhaite avoir un comportement de ce type, on devra utiliser les propriétés détaillées.</div> +<div class="note"> + <p><strong>Note :</strong> Comme pour les autres propriétés raccourcies, il n'est pas possible d'hériter de valeurs individuelles (par exemple (<code>border-radius:0 0 inherit inherit</code> pour surcharger les définitions existantes). Si on souhaite avoir un comportement de ce type, on devra utiliser les propriétés détaillées.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -94,46 +94,46 @@ border-radius: unset; <tbody> <tr> <td style="vertical-align: top;">Une seule valeur</td> - <td><img alt="all-corner.png" class="default internal" src="/@api/deki/files/6138/=all-corner.png"></td> + <td><img src="all-corner.png"></td> <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon à utiliser pour chaque coin lorsqu'on utilise une seule valeur dans la déclaration.</td> </tr> <tr> <td style="vertical-align: top;">Deux valeurs (coin en haut à gauche et en bas à droite)</td> - <td><img alt="top-left-bottom-right.png" class="default internal" src="/@api/deki/files/6141/=top-left-bottom-right.png"></td> + <td><img src="top-left-bottom-right.png"></td> <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à gauche et le coin en bas à droite de la boîte de bordure lorsqu'on utilise deux valeurs dans la déclaration.</td> </tr> <tr> <td style="vertical-align: top;">Coin en haut à droite et en bas à gauche (syntaxe à deux et trois valeurs)</td> - <td><img alt="top-right-bottom-left.png" class="default internal" src="/@api/deki/files/6143/=top-right-bottom-left.png"></td> + <td><img src="top-right-bottom-left.png"></td> <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à droite et le coin en bas à gauche de la boîte de bordure lorsqu'on utilise deux ou trois valeurs dans la déclaration.</td> </tr> <tr> <td style="vertical-align: top;">Coin en haut à gauche</td> - <td><img alt="top-left.png" class="default internal" src="/@api/deki/files/6142/=top-left.png"></td> + <td><img src="top-left.png"></td> <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à gauche de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec trois ou quatre valeurs.</td> </tr> <tr> <td style="vertical-align: top;">Coin en haut à droite</td> - <td style="margin-left: 2px;"><img alt="top-right.png" class="default internal" src="/@api/deki/files/6144/=top-right.png"></td> + <td style="margin-left: 2px;"><img src="top-right.png"></td> <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à droite de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec quatre valeurs.</td> </tr> <tr> <td style="vertical-align: top;">Coin en bas à droite</td> - <td style="margin-left: 2px;"><img alt="bottom-rigth.png" class="default internal" src="/@api/deki/files/6140/=bottom-rigth.png"></td> + <td style="margin-left: 2px;"><img src="bottom-rigth.png"></td> <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en bas à droite de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec trois ou quatre valeurs.</td> </tr> <tr> <td style="vertical-align: top;">Coin en bas à gauche</td> - <td><img alt="bottom-left.png" class="default internal" src="/@api/deki/files/6139/=bottom-left.png"></td> + <td><img src="bottom-left.png"></td> <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en bas à gauche de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec quatre valeurs.</td> </tr> </tbody> </table> <dl> - <dt><a id="length" name="length"><code><length></code></a></dt> + <dt><code><length></code></dt> <dd>Cette valeur indique la mesure du rayon de courbure du cercle ou la mesure du demi grand axe ou du demi petit axe de l'ellipse traduisant la courbure. Cette valeur peut être exprimée avec les différentes unités de {{cssxref("<length>")}}. Les valeurs négatives sont considérées comme invalides.</dd> - <dt><a id="percentage" name="percentage"><code><percentage></code></a></dt> + <dt><code><percentage></code></dt> <dd>Cette valeur traduit la mesure du rayon de courbure (elliptique ou circulaire) exprimée en pourcentages par rapport à la taille de la boîte. Les rayons verticaux sont donc proportionnels à la hauteur de la boîte et les rayons horizontaux proportionnels à la largeur de la boîte. Les valeurs négatives sont considérées comme invalides. Voir {{cssxref("<percentage>")}} pour plus de détails.</dd> </dl> diff --git a/files/fr/web/css/border-right-color/index.html b/files/fr/web/css/border-right-color/index.html index 9136bfccec..7ec0703a27 100644 --- a/files/fr/web/css/border-right-color/index.html +++ b/files/fr/web/css/border-right-color/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/border-right-color <div>{{EmbedInteractiveExample("pages/css/border-right-color.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs de type <color> */ diff --git a/files/fr/web/css/border-right-style/index.html b/files/fr/web/css/border-right-style/index.html index 63edb2d351..13e84b546f 100644 --- a/files/fr/web/css/border-right-style/index.html +++ b/files/fr/web/css/border-right-style/index.html @@ -13,9 +13,9 @@ translation_of: Web/CSS/border-right-style <div>{{EmbedInteractiveExample("pages/css/border-right-style.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<div class="note"><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</div> +<div class="note"> + <p><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -46,73 +46,43 @@ border-right-style: unset; <tbody> <tr> <td><code>none</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: none; background-color: palegreen;"> </div> - </td> <td>L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-right-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>none</code> a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera affichée.</td> </tr> <tr> <td><code>hidden</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: hidden; background-color: palegreen;"> </div> - </td> <td>L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-right-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera affichée.</td> </tr> <tr> <td><code>dotted</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: dotted; background-color: palegreen;"> </div> - </td> <td>Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-right-width")}}.</td> </tr> <tr> <td><code>dashed</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: dashed; background-color: palegreen;"> </div> - </td> <td>Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.</td> </tr> <tr> <td><code>solid</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: solid; background-color: palegreen;"> </div> - </td> <td>Affiche une ligne droite continue.</td> </tr> <tr> <td><code>double</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: double; background-color: palegreen;"> </div> - </td> <td>Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-right-width")}}.</td> </tr> <tr> <td><code>groove</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: groove; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à <code>ridge</code>.</td> </tr> <tr> <td><code>ridge</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: ridge; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec <code>groove</code>.</td> </tr> <tr> <td><code>inset</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: inset; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut <code>collapsed</code>, cette valeur se comporte comme <code>groove</code>.</td> </tr> <tr> <td><code>outset</code></td> <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: outset; background-color: palegreen;"> </div> - </td> - <td> <p>La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut <code>collapsed</code>, cette valeur se comporte comme <code>ridge</code>.</p> </td> </tr> diff --git a/files/fr/web/css/border-right-width/index.html b/files/fr/web/css/border-right-width/index.html index 3211387ef2..f2233827aa 100644 --- a/files/fr/web/css/border-right-width/index.html +++ b/files/fr/web/css/border-right-width/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/border-right-width <div>{{EmbedInteractiveExample("pages/css/border-right-width.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ @@ -38,31 +36,11 @@ border-right-width: unset;</pre> <dl> <dt><code><br-width></code></dt> <dd>Une valeur de longueur ({{cssxref("<length>")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le côté droit de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes : - <table class="standard-table"> - <tbody> - <tr> - <td><code>thin</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: solid; border-right-width: thin; background-color: palegreen;"> </div> - </td> - <td>Une bordure fine.</td> - </tr> - <tr> - <td><code>medium</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: solid; border-right-width: medium; background-color: palegreen;"> </div> - </td> - <td>Une bordure moyenne.</td> - </tr> - <tr> - <td><code>thick</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: solid; border-right-width: thick; background-color: palegreen;"> </div> - </td> - <td>Une bordure épaisse.</td> - </tr> - </tbody> - </table> + <ul> + <li><code>thin</code> (fin)</li> + <li><code>medium</code> (intermédiaire)</li> + <li><code>thick</code> (épais)</li> + </ul> La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée <code>thin ≤ medium ≤ thick</code> et que ces valeurs soient constantes pour un même document.</dd> </dl> diff --git a/files/fr/web/css/border-right/index.html b/files/fr/web/css/border-right/index.html index 5ce5ece5b2..9c33a5c287 100644 --- a/files/fr/web/css/border-right/index.html +++ b/files/fr/web/css/border-right/index.html @@ -21,8 +21,6 @@ translation_of: Web/CSS/border-right <div>{{EmbedInteractiveExample("pages/css/border-right.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Ces propriétés permettent de décrire la bordure du côté droit d'un élément.</p> <div class="note"> diff --git a/files/fr/web/css/border-spacing/index.html b/files/fr/web/css/border-spacing/index.html index f06382de34..f6e0d18643 100644 --- a/files/fr/web/css/border-spacing/index.html +++ b/files/fr/web/css/border-spacing/index.html @@ -14,12 +14,10 @@ translation_of: Web/CSS/border-spacing <div>{{EmbedInteractiveExample("pages/css/border-spacing.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La valeur de <code>border-spacing</code> est également utilisée le long du bord extérieur du tableau, où la distance entre la bordure du tableau et les cellules dans la première/dernière colonne ou ligne est la somme du <code>border-spacing</code> approprié (horizontal ou vertical) et du {{cssxref("padding")}} correspondant (top, right, bottom ou left).</p> <div class="note"> -<p><strong>Note</strong> : La propriété <code>border-spacing</code> équivaut à l'attribut déprécié <code>cellspacing</code> de l'élément <code><table></code>, sauf qu'il possède une seconde valeur optionnelle qui peut être utilisée pour définir différents espacements horizontaux et verticaux.</p> +<p><strong>Note :</strong> La propriété <code>border-spacing</code> équivaut à l'attribut déprécié <code>cellspacing</code> de l'élément <code><table></code>, sauf qu'il possède une seconde valeur optionnelle qui peut être utilisée pour définir différents espacements horizontaux et verticaux.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/border-style/index.html b/files/fr/web/css/border-style/index.html index 78f8ed3007..1ddbc35fff 100644 --- a/files/fr/web/css/border-style/index.html +++ b/files/fr/web/css/border-style/index.html @@ -11,9 +11,7 @@ translation_of: Web/CSS/border-style <p>La propriété CSS <strong><code>border-style</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de définir le style des lignes utilisées pour les bordures des quatre côtés de la boîte d'un élément.</p> -<div>{{EmbedInteractiveExample("pages/css/border-style.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<div>{{EmbedInteractiveExample("pages/css/border-style.html")}}</div <h2 id="Syntaxe">Syntaxe</h2> @@ -44,7 +42,9 @@ border-style: initial; border-style: unset; </pre> -<div class="note"><strong>Note :</strong> La valeur par défaut de <code>border-style</code> est <code>none</code>. Cela signifie que si on modifie {{cssxref("border-width")}} et {{cssxref("border-color")}}, on ne verra pas la bordure tant que cette propriété n'est pas différente de <code>none</code> ou de <code>hidden</code>.</div> +<div class="note"> + <p><strong>Note :</strong> La valeur par défaut de <code>border-style</code> est <code>none</code>. Cela signifie que si on modifie {{cssxref("border-width")}} et {{cssxref("border-color")}}, on ne verra pas la bordure tant que cette propriété n'est pas différente de <code>none</code> ou de <code>hidden</code>.</p> +</div> <p>La propriété <code>border-style</code> peut être définie avec une, deux, trois ou quatre valeurs :</p> @@ -73,66 +73,39 @@ border-style: unset; </tr> <tr> <td><code>hidden</code></td> - <td> - <div style="border-width: 3px; border-style: hidden; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div> - </td> <td>L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera affichée.</td> </tr> <tr> <td><code>dotted</code></td> - <td> - <div style="border-width: 3px; border-style: dotted; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div> - </td> <td>Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-width")}}.</td> </tr> <tr> <td><code>dashed</code></td> - <td> - <div style="border-width: 3px; border-style: dashed; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div> - </td> <td>Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.</td> </tr> <tr> <td><code>solid</code></td> - <td> - <div style="border-width: 3px; border-style: solid; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div> - </td> <td>Affiche une ligne droite continue.</td> </tr> <tr> <td><code>double</code></td> - <td> - <div style="border-width: 3px; border-style: double; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div> - </td> <td>Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}}.</td> </tr> <tr> <td><code>groove</code></td> - <td> - <div style="border-width: 3px; border-style: groove; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à <code>ridge</code>.</td> </tr> <tr> <td><code>ridge</code></td> - <td> - <div style="border-width: 3px; border-style: ridge; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec <code>groove</code>.</td> </tr> <tr> <td><code>inset</code></td> - <td> - <div style="border-width: 3px; border-style: inset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut <code>collapsed</code>, cette valeur se comporte comme <code>groove</code>.</td> </tr> <tr> <td><code>outset</code></td> <td> - <div style="border-width: 3px; border-style: outset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div> - </td> - <td> <p>La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut <code>collapsed</code>, cette valeur se comporte comme <code>ridge</code>.</p> </td> </tr> diff --git a/files/fr/web/css/border-top-color/index.html b/files/fr/web/css/border-top-color/index.html index d3a9afc9b6..4abdfc1493 100644 --- a/files/fr/web/css/border-top-color/index.html +++ b/files/fr/web/css/border-top-color/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/border-top-color <div>{{EmbedInteractiveExample("pages/css/border-top-color.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs de type <color> */ diff --git a/files/fr/web/css/border-top-left-radius/index.html b/files/fr/web/css/border-top-left-radius/index.html index d894bf6244..0c34d5e94d 100644 --- a/files/fr/web/css/border-top-left-radius/index.html +++ b/files/fr/web/css/border-top-left-radius/index.html @@ -13,9 +13,9 @@ translation_of: Web/CSS/border-top-left-radius <div>{{EmbedInteractiveExample("pages/css/border-top-left-radius.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<div class="note"><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après <code>border-top-left-radius</code>, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">la propriété raccourcie</a>.</div> +<div class="note"> + <p><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après <code>border-top-left-radius</code>, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de <a href="/fr/docs/Web/CSS/Shorthand_properties">la propriété raccourcie</a>.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/border-top-right-radius/index.html b/files/fr/web/css/border-top-right-radius/index.html index 6c283db1cb..51c7324d0f 100644 --- a/files/fr/web/css/border-top-right-radius/index.html +++ b/files/fr/web/css/border-top-right-radius/index.html @@ -13,11 +13,11 @@ translation_of: Web/CSS/border-top-right-radius <div>{{EmbedInteractiveExample("pages/css/border-top-right-radius.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de {{cssxref("background-clip")}}.</p> -<div class="note"><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après <code>border-top-radius-radius</code>, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">la propriété raccourcie</a>.</div> +<div class="note"> + <p><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après <code>border-top-radius-radius</code>, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de <a href="/fr/docs/Web/CSS/Shorthand_properties">la propriété raccourcie</a>.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/border-top-style/index.html b/files/fr/web/css/border-top-style/index.html index 6509483f06..aa175464ec 100644 --- a/files/fr/web/css/border-top-style/index.html +++ b/files/fr/web/css/border-top-style/index.html @@ -13,9 +13,9 @@ translation_of: Web/CSS/border-top-style <div>{{EmbedInteractiveExample("pages/css/border-top-style.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<div class="note"><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</div> +<div class="note"> + <p><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -46,73 +46,43 @@ border-top-style: inherit; <tbody> <tr> <td><code>none</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: none; background-color: palegreen;"> </div> - </td> <td>L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-top-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>none</code> a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera affichée.</td> </tr> <tr> <td><code>hidden</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: hidden; background-color: palegreen;"> </div> - </td> <td>L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-top-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera affichée.</td> </tr> <tr> <td><code>dotted</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: dotted; background-color: palegreen;"> </div> - </td> <td>Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-top-width")}}.</td> </tr> <tr> <td><code>dashed</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: dashed; background-color: palegreen;"> </div> - </td> <td>Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.</td> </tr> <tr> <td><code>solid</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: solid; background-color: palegreen;"> </div> - </td> <td>Affiche une ligne droite continue.</td> </tr> <tr> <td><code>double</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: double; background-color: palegreen;"> </div> - </td> <td>Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-top-width")}}.</td> </tr> <tr> <td><code>groove</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: groove; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à <code>ridge</code>.</td> </tr> <tr> <td><code>ridge</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: ridge; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec <code>groove</code>.</td> </tr> <tr> <td><code>inset</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: inset; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut <code>collapsed</code>, cette valeur se comporte comme <code>groove</code>.</td> </tr> <tr> <td><code>outset</code></td> <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: outset; background-color: palegreen;"> </div> - </td> - <td> <p>La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut <code>collapsed</code>, cette valeur se comporte comme <code>ridge</code>.</p> </td> </tr> diff --git a/files/fr/web/css/border-top-width/index.html b/files/fr/web/css/border-top-width/index.html index 835f9c5cc5..e96b5ef89f 100644 --- a/files/fr/web/css/border-top-width/index.html +++ b/files/fr/web/css/border-top-width/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/border-top-width <div>{{EmbedInteractiveExample("pages/css/border-top-width.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Une valeur de longueur */ @@ -39,31 +37,11 @@ border-top-width: unset; <dl> <dt><code><line-width></code></dt> <dd>Une valeur de longueur ({{cssxref("<length>")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le haut de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes : - <table class="standard-table"> - <tbody> - <tr> - <td><code>thin</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: solid; border-top-width: thin; background-color: palegreen;"> </div> - </td> - <td>Une bordure fine.</td> - </tr> - <tr> - <td><code>medium</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: solid; border-top-width: medium; background-color: palegreen;"> </div> - </td> - <td>Une bordure moyenne.</td> - </tr> - <tr> - <td><code>thick</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: solid; border-top-width: thick; background-color: palegreen;"> </div> - </td> - <td>Une bordure épaisse.</td> - </tr> - </tbody> - </table> + <ul> + <li><code>thin</code> (fin)</li> + <li><code>medium</code> (intermédiaire)</li> + <li><code>thick</code> (épais)</li> + </ul> La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée <code>thin ≤ medium ≤ thick</code> et que ces valeurs soient constantes pour un même document.</dd> </dl> diff --git a/files/fr/web/css/border-top/index.html b/files/fr/web/css/border-top/index.html index 8393224111..4b9d59fe82 100644 --- a/files/fr/web/css/border-top/index.html +++ b/files/fr/web/css/border-top/index.html @@ -21,8 +21,6 @@ translation_of: Web/CSS/border-top <div>{{EmbedInteractiveExample("pages/css/border-top.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> Les trois valeurs de la propriété raccourcie peuvent être définies dans n'importe quel ordre et une ou deux d'entre elles peuvent être absentes.</p> diff --git a/files/fr/web/css/border-width/index.html b/files/fr/web/css/border-width/index.html index 2399f59f98..f41d3cb8a7 100644 --- a/files/fr/web/css/border-width/index.html +++ b/files/fr/web/css/border-width/index.html @@ -26,8 +26,6 @@ translation_of: Web/CSS/border-width <div>{{EmbedInteractiveExample("pages/css/border-width.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */ @@ -68,31 +66,11 @@ border-width: unset; <dl> <dt><code><line-width></code></dt> <dd>Une valeur de longueur (type {{cssxref("<length>")}} ou un mot-clé indiquant l'épaisseur de la bordure. Le mot-clé doit être l'une des valeurs suivantes : - <table class="standard-table"> - <tbody> - <tr> - <td><code>thin</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: thin; background-color: palegreen;"> </div> - </td> - <td>La bordure est fine.</td> - </tr> - <tr> - <td><code>medium</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: medium; background-color: palegreen;"> </div> - </td> - <td>La bordure est moyenne.</td> - </tr> - <tr> - <td><code>thick</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: thick; background-color: palegreen;"> </div> - </td> - <td>La bordure est épaisse.</td> - </tr> - </tbody> - </table> + <ul> + <li><code>thin</code> (fin)</li> + <li><code>medium</code> (intermédiaire)</li> + <li><code>thick</code> (épais)</li> + </ul> La spécification ne définit pas précisément l'épaisseur correspondante à chacun de ces mots-clés, les rendant dépendants de l'implémentation. Toutefois, la spécification indique que l'épaisseur doit suivre la relation d'inégalité suivante : <code>thin ≤ medium ≤ thick</code> et que les valeurs pour chaque mot-clé doivent être constantes pour un même document.</dd> </dl> diff --git a/files/fr/web/css/border/index.html b/files/fr/web/css/border/index.html index c44cac3e09..1c1edbdede 100644 --- a/files/fr/web/css/border/index.html +++ b/files/fr/web/css/border/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/border <div>{{EmbedInteractiveExample("pages/css/border.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Comme pour toutes les propriétés raccourcie, si une valeur est absente pour la propriété détaillée correspondante, cette dernière sera réinitialisée avec sa valeur initiale. On notera également que {{cssxref("border-image")}} ne peut pas être définie via cette propriété raccourcie mais elle sera quand même réinitialisée (sa valeur initiale est <code>none</code>). Ainsi, <code>border</code> peut être utilisée pour réinitialiser n'importe quelle propriété liée à la bordure définie plus haut dans la cascade.</p> <div class="note"> @@ -59,11 +57,11 @@ border: unset; <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><a id="br-width" name="br-width"><code><line-width></code></a></dt> + <dt><code><line-width></code></dt> <dd>Voir {{cssxref("border-width")}} (la valeur par défaut est <code>medium</code>).</dd> - <dt><a id="br-style" name="br-style"><code><line-style></code></a></dt> + <dt><code><line-style></code></dt> <dd>Voir {{cssxref("border-style")}} (la valeur par défaut est <code>none</code>).</dd> - <dt><a id="color" name="color"><code><color></code></a></dt> + <dt><code><color></code></dt> <dd>Voir {{cssxref("border-color")}}. Une valeur de type {{cssxref("<color>")}} qui indique la couleur de la bordure. La valeur par défaut qui sera utilisée sera la valeur de la propriété {{cssxref("color")}} de l'élément (qui est la couleur du texte de l'élément, pas de son arrière-plan).</dd> </dl> diff --git a/files/fr/web/css/bottom/index.html b/files/fr/web/css/bottom/index.html index 3a23446bda..b1b5d78f15 100644 --- a/files/fr/web/css/bottom/index.html +++ b/files/fr/web/css/bottom/index.html @@ -11,9 +11,7 @@ translation_of: Web/CSS/bottom <p>La propriété <strong><code>bottom</code></strong> contribue à la définition de l'emplacement vertical des <a href="/fr/docs/Web/CSS/position">éléments positionnés</a>. Elle n'a aucun effet pour les éléments non-positionnés.</p> -<div>{{EmbedInteractiveExample("pages/css/bottom.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<div>{{EmbedInteractiveExample("pages/css/bottom.html")}}</div <p>Pour les <strong>éléments positionnés de façon absolue</strong>, c'est-à-dire ceux dont la valeur de la propriété {{cssxref("position")}} vaut <code>absolute</code> ou <code>fixed</code>, la propriété <code>bottom</code> définit la distance entre le bord bas de la marge de l'élément et le bord bas du bloc qui contient l'élément.</p> @@ -50,17 +48,17 @@ bottom: unset; <dt><code><length></code></dt> <dd>Une longueur (type {{cssxref("<length>")}} qui représente : <ul> - <li>La distance depuis le bord bas du bloc englobant pour <strong>les éléments positionnés de façon absolue</strong></li> - <li>Le décalage avec lequel l'élément est déplacé au-dessus de sa position normale dans le flux pour pour <strong>les éléments positionnés de façon relative </strong>.</li> + <li>La distance depuis le bord bas du bloc englobant pour les éléments positionnés de façon absolue</li> + <li>Le décalage avec lequel l'élément est déplacé au-dessus de sa position normale dans le flux pour pour les éléments positionnés de façon relative.</li> </ul> </dd> <dt><code><percentage></code></dt> <dd>Une valeur de pourcentage (type {{cssxref("<percentage>")}} exprimée par rapport à la hauteur du bloc englobant.</dd> <dt><code>auto</code></dt> - <dd> + <dd> Indique pour : <ul> - <li>Pour <strong>les éléments positionnés de façon absolue :</strong> la position de l'élément se base sur la propriété {{cssxref("top")}} et <code>height: auto</code> est traitée comme une hauteur basée sur la taille du contenu</li> - <li>Pour <strong>les éléments positionnés de façon relative :</strong> le décalage avec lequel l'élément est déplacé est construit à partir de la propriété {{cssxref("top")}} et si celle-ci vaut également <code>auto</code>, l'élément n'est pas déplacé verticalement.</li> + <li>Les éléments positionnés de façon absolue : la position de l'élément se base sur la propriété {{cssxref("top")}} et <code>height: auto</code> est traitée comme une hauteur basée sur la taille du contenu</li> + <li>Les éléments positionnés de façon relative : le décalage avec lequel l'élément est déplacé est construit à partir de la propriété {{cssxref("top")}} et si celle-ci vaut également <code>auto</code>, l'élément n'est pas déplacé verticalement.</li> </ul> </dd> <dt><code>inherit</code></dt> diff --git a/files/fr/web/css/box-align/index.html b/files/fr/web/css/box-align/index.html index 65c0e3ea92..731682f8ba 100644 --- a/files/fr/web/css/box-align/index.html +++ b/files/fr/web/css/box-align/index.html @@ -112,8 +112,8 @@ div.exemple > p { <h2 id="Spécifications">Spécifications</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li> - <li><a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification</a> {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li> + <li><a href="http://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li> + <li><a href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification</a> {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li> </ul> <p>{{cssinfo}}</p> diff --git a/files/fr/web/css/box-decoration-break/index.html b/files/fr/web/css/box-decoration-break/index.html index 989fe8020e..cfbe10973c 100644 --- a/files/fr/web/css/box-decoration-break/index.html +++ b/files/fr/web/css/box-decoration-break/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/box-decoration-break <div>{{EmbedInteractiveExample("pages/css/box-decoration-break.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ @@ -72,7 +70,7 @@ box-decoration-break: unset; <h5 id="Image_équivalente">Image équivalente</h5> -<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example." src="https://mdn.mozillademos.org/files/8167/box-decoration-break-inline-slice.png" style="height: 177px; width: 191px;"></p> +<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example." src="box-decoration-break-inline-slice.png"></p> <h4 id="Avec_clone">Avec <code>clone</code></h4> @@ -103,29 +101,21 @@ box-decoration-break: unset; <h5 id="Image_équivalente_2">Image équivalente</h5> -<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example" src="https://mdn.mozillademos.org/files/8169/box-decoration-break-inline-clone.png" style="height: 180px; width: 231px;"></p> +<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example" src="box-decoration-break-inline-clone.png"></p> <h3 id="Gestion_des_fragments_pour_les_boîtes_en_bloc">Gestion des fragments pour les boîtes en bloc</h3> -<p>Voici ce qu'on pourra obtenir de façon analogue avec un élément de bloc :</p> - -<ol> - <li>Sans fragmentation</li> -</ol> +<p>Voici ce qu'on pourra obtenir de façon analogue avec un élément de bloc sans fragmentation:</p> -<p><img alt="A screenshot of the rendering of the block element used in the examples without any fragmentation." src="https://mdn.mozillademos.org/files/8181/box-decoration-break-block.png" style="height: 149px; width: 333px;"></p> +<p><img alt="A screenshot of the rendering of the block element used in the examples without any fragmentation." src="box-decoration-break-block.png"></p> -<ol start="2"> - <li>En décomposant le bloc sur trois colonnes, normalement (<code>slice</code>), on aura :</li> -</ol> +<p>En décomposant le bloc sur trois colonnes, normalement (<code>slice</code>), on aura :</p> -<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice." src="https://mdn.mozillademos.org/files/8183/box-decoration-break-block-slice.png" style="height: 55px; max-width: none; width: 1025px;"></p> +<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice." src="box-decoration-break-block-slice.png"></p> -<ol start="3"> - <li>Si on applique <code>box-decoration-break:clone</code>, voici le résultat :</li> -</ol> +<p>Si on applique <code>box-decoration-break:clone</code>, voici le résultat :</p> -<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone." src="https://mdn.mozillademos.org/files/8185/box-decoration-break-block-clone.png" style="height: 61px; max-width: none; width: 1023px;"></p> +<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone." src="box-decoration-break-block-clone.png"></p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/box-direction/index.html b/files/fr/web/css/box-direction/index.html index 749a876f1f..9a62ce1e3f 100644 --- a/files/fr/web/css/box-direction/index.html +++ b/files/fr/web/css/box-direction/index.html @@ -11,10 +11,10 @@ translation_of: Web/CSS/box-direction <div>{{CSSRef}}{{Non-standard_header}}</div> <div class="warning"> -<p><strong>Attention ! </strong>Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version. La propriété <code>-moz-box-direction</code> ne peut être utilisée que dans des composants XUL tandis que la propriété <code>box-direction</code> a été remplacée par la propriété standard <code>flex-direction</code>. Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> pour plus d'informations sur ce qui doit être utilisé à la place.</p> +<p><strong>Attention :</strong> Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version. La propriété <code>-moz-box-direction</code> ne peut être utilisée que dans des composants XUL tandis que la propriété <code>box-direction</code> a été remplacée par la propriété standard <code>flex-direction</code>. Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> pour plus d'informations sur ce qui doit être utilisé à la place.</p> </div> -<p>La propriété <strong><code>box-direction</code></strong> définit si une boîte doit organiser son contenu dans la direction normale (de haut en bas ou de gauche à droite). Pour plus de détails sur les propriétés des éléments flexibles, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a>.</p> +<p>La propriété <strong><code>box-direction</code></strong> définit si une boîte doit organiser son contenu dans la direction normale (de haut en bas ou de gauche à droite). Pour plus de détails sur les propriétés des éléments flexibles, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a>.</p> <pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ box-direction: normal; @@ -58,8 +58,8 @@ box-direction: unset; <h2 id="Spécifications">Spécifications</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{note("L'état de cette spécification ne reflète pas l'implémentation de Mozilla ou Webkit.")}}</li> - <li><a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification</a> {{note("Les implémentations de WebKit et Mozilla se basent sur cette version de la spécification")}}</li> + <li><a href="https://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{note("L'état de cette spécification ne reflète pas l'implémentation de Mozilla ou Webkit.")}}</li> + <li><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification</a> {{note("Les implémentations de WebKit et Mozilla se basent sur cette version de la spécification")}}</li> </ul> <p>{{cssinfo}}</p> diff --git a/files/fr/web/css/box-flex-group/index.html b/files/fr/web/css/box-flex-group/index.html index 39b0639069..c04d6907b0 100644 --- a/files/fr/web/css/box-flex-group/index.html +++ b/files/fr/web/css/box-flex-group/index.html @@ -11,12 +11,12 @@ translation_of: Web/CSS/box-flex-group <div>{{CSSRef}}{{Non-standard_header}}</div> <div class="warning"> -<p><strong>Attention ! </strong>Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p> +<p><strong>Attention :</strong> Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p> </div> -<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> pour plus d'informations.</p> +<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> pour plus d'informations.</p> -<p>La propriété <strong><code>box-flex-group</code></strong> permet d'affecter un élément fils de la boîte flexible à un groupe. Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p> +<p>La propriété <strong><code>box-flex-group</code></strong> permet d'affecter un élément fils de la boîte flexible à un groupe. Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p> <pre class="brush:css no-line-numbers">/* Un entier désignant le groupe */ /* Type <integer> */ @@ -44,8 +44,8 @@ box-flex-group: unset; <h2 id="Spécifications">Spécifications</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li> - <li><a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification.</a> {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li> + <li><a href="https://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li> + <li><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification.</a> {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li> </ul> <p>{{cssinfo}}</p> diff --git a/files/fr/web/css/box-flex/index.html b/files/fr/web/css/box-flex/index.html index 33eb7e1a38..8029705961 100644 --- a/files/fr/web/css/box-flex/index.html +++ b/files/fr/web/css/box-flex/index.html @@ -10,9 +10,11 @@ translation_of: Web/CSS/box-flex --- <div>{{CSSRef}}{{Non-standard_header}}</div> -<p class="warning">Cette propriété est utilisée pour contrôler certaines parties du modèle de boîtes XUL. Elle ne correspond ni à l'ancienne version de la spécification pour <code>box-flex</code> ni au comportement de <code>-webkit-box-flex</code>. Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> pour plus d'informations sur ce qui doit être utilisé à la place.</p> +<div class="warning"> + <p><strong>Attention :</strong> Cette propriété est utilisée pour contrôler certaines parties du modèle de boîtes XUL. Elle ne correspond ni à l'ancienne version de la spécification pour <code>box-flex</code> ni au comportement de <code>-webkit-box-flex</code>. Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> pour plus d'informations sur ce qui doit être utilisé à la place.</p> +</div> -<p>Les propriétés <strong><code>-moz-box-flex</code></strong> et <strong><code>-webkit-box-flex</code></strong> définissent la façon dont une boîte <code>-moz-box</code> ou <code>-webkit-box</code> s'étend pour remplir la boîte englobante, dans la direction indiquée par la disposition de la boîte. Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p> +<p>Les propriétés <strong><code>-moz-box-flex</code></strong> et <strong><code>-webkit-box-flex</code></strong> définissent la façon dont une boîte <code>-moz-box</code> ou <code>-webkit-box</code> s'étend pour remplir la boîte englobante, dans la direction indiquée par la disposition de la boîte. Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p> <pre class="brush:css no-line-numbers">/* Valeurs numériques */ /* Type <number> */ @@ -90,7 +92,7 @@ div.exemple > p:nth-child(2) { <h2 id="Spécifications">Spécifications</h2> -<p>Cette propriété n'est pas une propriété standard. <a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Une ancienne version de la spécification CSS3 pour les boîtes flexibles</a> définissait une propriété <code>box-flex</code> mais ce brouillon a depuis été remplacé.</p> +<p>Cette propriété n'est pas une propriété standard. <a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Une ancienne version de la spécification CSS3 pour les boîtes flexibles</a> définissait une propriété <code>box-flex</code> mais ce brouillon a depuis été remplacé.</p> <p>{{cssinfo}}</p> diff --git a/files/fr/web/css/box-lines/index.html b/files/fr/web/css/box-lines/index.html index 8807932717..9c01911dbc 100644 --- a/files/fr/web/css/box-lines/index.html +++ b/files/fr/web/css/box-lines/index.html @@ -10,13 +10,13 @@ translation_of: Web/CSS/box-lines --- <div>{{CSSRef}}{{Non-standard_header}}</div> -<div class="blockIndicator warning"> -<p><strong>Attention ! </strong>Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p> +<div class="warning"> +<p><strong>Attention :</strong> Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p> </div> -<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> pour plus d'informations.</p> +<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> pour plus d'informations.</p> -<p>La propriété <strong><code>box-lines</code></strong> détermine si la boîte se compose d'une ou plusieurs rangées (des lignes pour les boîtes orientées horizontalement et des colonnes pour les boîtes orientées verticalement). Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p> +<p>La propriété <strong><code>box-lines</code></strong> détermine si la boîte se compose d'une ou plusieurs rangées (des lignes pour les boîtes orientées horizontalement et des colonnes pour les boîtes orientées verticalement). Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p> <pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ box-lines: single; @@ -58,8 +58,8 @@ box-lines: unset; <h2 id="Spécifications">Spécifications</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li> - <li><a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification.</a> {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li> + <li><a href="https://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li> + <li><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification.</a> {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li> </ul> <p>{{cssinfo}}</p> diff --git a/files/fr/web/css/box-ordinal-group/index.html b/files/fr/web/css/box-ordinal-group/index.html index 34b81a4c1f..b9d400c5d1 100644 --- a/files/fr/web/css/box-ordinal-group/index.html +++ b/files/fr/web/css/box-ordinal-group/index.html @@ -11,12 +11,12 @@ translation_of: Web/CSS/box-ordinal-group <div>{{CSSRef}}{{Non-standard_header}}</div> <div class="warning"> -<p><strong>Attention ! </strong>Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p> +<p><strong>Attention :</strong> Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p> </div> -<p><span class="seoSummary">La propriété <strong><code>box-ordinal-group</code></strong> permet d'affecter les éléments fils d'une boîtes flexible à un groupe numéroté. Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</span></p> +<p>La propriété <strong><code>box-ordinal-group</code></strong> permet d'affecter les éléments fils d'une boîtes flexible à un groupe numéroté. Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p> -<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> pour plus d'informations.</p> +<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> pour plus d'informations.</p> <pre class="brush:css">/* Un entier indiquant le groupe */ /* Type <integer> */ @@ -29,7 +29,7 @@ box-ordinal-group: initial; box-ordinal-group: unset; </pre> -<p>Les groupes ordinaux peuvent être utilisés avec la propriété {{cssxref("box-direction")}} afin de contrôler l'ordre dans lequel les éléments fils apparaissent dans la boîte. Lorsque <a href="/fr/docs/Web/CSS/Valeur_calculée">la valeur calculée</a> de <strong><code>box-direction</code></strong> est <code>normal</code>, une boîte affichera ses éléments en commençant par le groupe dont l'ordre est le plus faible et les disposera de gauche à droite pour les boîtes horizontales et du haut vers le bas pour les boîtes verticales. Les éléments dont l'ordre est égal seront disposés dans l'ordre dans lequel ils apparaissent. Lorsque la direction est inversée, les ordres sont gérés de la même façon, les éléments apparaîtront dans l'ordre inverse.</p> +<p>Les groupes ordinaux peuvent être utilisés avec la propriété {{cssxref("box-direction")}} afin de contrôler l'ordre dans lequel les éléments fils apparaissent dans la boîte. Lorsque <a href="/fr/docs/Web/CSS/computed_value">la valeur calculée</a> de <strong><code>box-direction</code></strong> est <code>normal</code>, une boîte affichera ses éléments en commençant par le groupe dont l'ordre est le plus faible et les disposera de gauche à droite pour les boîtes horizontales et du haut vers le bas pour les boîtes verticales. Les éléments dont l'ordre est égal seront disposés dans l'ordre dans lequel ils apparaissent. Lorsque la direction est inversée, les ordres sont gérés de la même façon, les éléments apparaîtront dans l'ordre inverse.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -42,8 +42,8 @@ box-ordinal-group: unset; <h2 id="Spécifications">Spécifications</h2> <ul> - <li><a class="external" href="https://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a>{{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li> - <li><a class="external" href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification.</a>{{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li> + <li><a href="https://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a>{{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li> + <li><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification.</a>{{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li> </ul> <p>{{cssinfo}}</p> diff --git a/files/fr/web/css/box-orient/index.html b/files/fr/web/css/box-orient/index.html index ee9e876725..9c5220bd16 100644 --- a/files/fr/web/css/box-orient/index.html +++ b/files/fr/web/css/box-orient/index.html @@ -11,12 +11,12 @@ translation_of: Web/CSS/box-orient <div>{{CSSRef}}{{Non-standard_header}}</div> <div class="warning"> -<p><strong>Attention ! </strong>Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p> +<p><strong>Attention :</strong> Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p> </div> <p>La propriété CSS <strong><code>box-orient</code></strong> définit si un élément organise son contenu horizontalement ou verticalement.</p> -<p>Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p> +<p>Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p> <pre class="brush:css">/* Valeurs avec un mot-clé */ box-orient: horizontal; @@ -89,8 +89,8 @@ box-orient: unset; <h2 id="Spécifications">Spécifications</h2> <ul> - <li><a class="external" href="https://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li> - <li><a class="external" href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification.</a> {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li> + <li><a href="https://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li> + <li><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification.</a> {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li> </ul> <p>{{cssinfo}}</p> diff --git a/files/fr/web/css/box-pack/index.html b/files/fr/web/css/box-pack/index.html index 6462999d93..45fd486ed7 100644 --- a/files/fr/web/css/box-pack/index.html +++ b/files/fr/web/css/box-pack/index.html @@ -10,11 +10,11 @@ translation_of: Web/CSS/box-pack --- <div>{{CSSRef}}{{Non-standard_header}}</div> -<div class="blockIndicator warning"> -<p><strong>Attention ! </strong>Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p> +<div class="warning"> +<p><strong>Attention :</strong> Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p> </div> -<div>Les propriétés CSS <strong><code>-moz-box-pack</code></strong> et <strong><code>-webkit-box-pack</code></strong> définissent la façon dont une boîte <code>-moz-box</code> ou <code>-webkit-box</code> groupe son contenu dans la direction de la disposition. L'effet de cette propriété n'est visible que s'il reste de l'espace supplémentaire dans la boîte. Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</div> +<div>Les propriétés CSS <strong><code>-moz-box-pack</code></strong> et <strong><code>-webkit-box-pack</code></strong> définissent la façon dont une boîte <code>-moz-box</code> ou <code>-webkit-box</code> groupe son contenu dans la direction de la disposition. L'effet de cette propriété n'est visible que s'il reste de l'espace supplémentaire dans la boîte. Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</div> <pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ box-pack: start; @@ -28,7 +28,7 @@ box-pack: initial; box-pack: unset; </pre> -<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> pour plus d'informations.</p> +<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> pour plus d'informations.</p> <p>La direction de la disposition dépend de l'orientation de l'élément : horizontale ou verticale.</p> @@ -130,7 +130,7 @@ div.exemple p { <h2 id="Spécifications">Spécifications</h2> -<p>Cette propriété n'est pas standard mais une propriété semblable est apparue <a class="external" href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">avec les brouillons de spécification pour les boîtes flexibles CSS3</a> et a été remplacée dans les versions suivantes de la spécification.</p> +<p>Cette propriété n'est pas standard mais une propriété semblable est apparue <a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">avec les brouillons de spécification pour les boîtes flexibles CSS3</a> et a été remplacée dans les versions suivantes de la spécification.</p> <p>{{cssinfo}}</p> diff --git a/files/fr/web/css/box-shadow/index.html b/files/fr/web/css/box-shadow/index.html index 6c8ec5bc41..a8e3cae319 100644 --- a/files/fr/web/css/box-shadow/index.html +++ b/files/fr/web/css/box-shadow/index.html @@ -11,9 +11,7 @@ translation_of: Web/CSS/box-shadow <p>La propriété CSS <strong><code>box-shadow</code></strong> ajoute des ombres à la boîte d'un élément via une liste d'ombres séparées par des virgules. Une boîte d'ombre est définie avec des décalages horizontal et vertical par rapport à l'élément, avec des rayons de flou et d'étalement et avec une couleur.</p> -<div>{{EmbedInteractiveExample("pages/css/box-shadow.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<div>{{EmbedInteractiveExample("pages/css/box-shadow.html")}}</div <p>Elle permet de projeter une ombre depuis un élément. Si une {{cssxref("border-radius")}} est définie sur l'élément avec l'ombre, la boîte de l'ombre prendra les mêmes arrondis. L'ordre des couches (<em>z order</em>) pour plusieurs ombres sera le même <a href="/fr/docs/Web/CSS/text-shadow">que pour les ombres texte</a> (la première ombre est sur le dessus).</p> @@ -59,17 +57,17 @@ box-shadow: unset; <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><a id="inset" name="inset"><code>inset</code></a></dt> + <dt><code>inset</code></dt> <dd>Si la valeur n'est pas définie (le cas par défaut), l'ombre sera une ombre portée (comme si la boîte était élevée au-dessus du contenu).<br> La présence du mot-clé <code>inset</code> modifie l'ombre afin qu'elle soit tournée vers l'intérieur du cadre (comme si le contenu était enfoncé dans la boîte). Les ombres tournées vers l'intérieur sont dessinées à l'intérieur de la bordure (même les transparentes), au-dessus de l'arrière-plan mais sous le contenu.</dd> - <dt><a id="offset" name="offset"><code><offset-x></code> <code><offset-y></code></a></dt> + <dt><code><offset-x></code> <code><offset-y></code></dt> <dd>Deux valeurs de longueur ({{cssxref("<length>")}} qui permettent de définir le décalage de l'ombre. <code><offset-x></code> définit la distance horizontale du décalage et les valeurs négatives placeront l'ombre à gauche de l'élément. <code><offset-y></code> définit la distance verticale et les distances négatives placent l'ombre au-dessus de l'élément (cf. {{cssxref("<length>")}} pour les différentes unités possibles).<br> Si les deux valeurs sont <code>0</code>, l'ombre est placée derrière l'élément (et peut générer un effet de flou si <code><blur-radius></code> et/ou <code><spread-radius></code> est utilisé).</dd> - <dt><a id="blur" name="blur"><code><blur-radius></code></a></dt> + <dt><code><blur-radius></code></dt> <dd>Une troisième valeur de longueur ({{cssxref("<length>")}}). Plus cette valeur sera grande, plus le flou de l'ombre sera diffus : l'ombre sera donc plus étalée et plus légère. Les valeurs négatives ne sont pas autorisées. Si la valeur n'est pas définie, sa valeur par défaut est <code>0</code> (le côté de l'ombre est rectiligne).</dd> - <dt><a id="spread" name="spread"><code><spread-radius></code></a></dt> + <dt><code><spread-radius></code></dt> <dd>Une quatrième valeur de longueur ({{cssxref("<length>")}}). Les valeurs positives étaleront l'ombre et les valeurs négatives rétréciront l'ombre. Si elle n'est pas définie, la valeur par défaut est <code>0</code> (l'ombre aura la même taille que l'élément).</dd> - <dt><a id="color" name="color"><code><color></code></a></dt> + <dt><code><color></code></dt> <dd>Une valeur de couleur ({{cssxref("<color>")}}). Si la valeur n'est pas définie, la couleur utilisée dépend du navigateur ce sera généralement la propriété {{cssxref("color")}} mais Safari affiche une ombre transparente.</dd> </dl> @@ -81,7 +79,7 @@ box-shadow: unset; {{csssyntax}} -<h2 class="cleared" id="Exemples">Exemples</h2> +<h2 id="Exemples">Exemples</h2> <h3 id="CSS">CSS</h3> @@ -117,7 +115,7 @@ box-shadow: unset; <p>{{EmbedLiveSample("Exemples","400","300")}}</p> -<h2 class="cleared" id="Spécifications">Spécifications</h2> +<h2 id="Spécifications">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/css/box-sizing/index.html b/files/fr/web/css/box-sizing/index.html index ddcdaf9e90..2108d237cb 100644 --- a/files/fr/web/css/box-sizing/index.html +++ b/files/fr/web/css/box-sizing/index.html @@ -22,8 +22,6 @@ translation_of: Web/CSS/box-sizing <div>{{EmbedInteractiveExample("pages/css/box-sizing.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>En CSS, la largeur et la hauteur affectées à un élément s'appliquent par défaut à la boîte de contenu (<em>content box</em>) de l'élément. Si l'élément possède une bordure (<em>border</em>) ou du remplissage (<em>padding</em>), celui-ci est ajouté à la largeur et/ou à la hauteur de la boîte affichée à l'écran. Cela signifie qu'il faut ajuster les valeurs de hauteur et de largeur afin qu'elles permettent d'ajouter n'importe quelle bordure ou n'importe quel remplissage qui serait ajouté par la suite.</p> <p>La propriété <code>box-sizing</code> peut être utilisée afin d'ajuster ce comportement :</p> @@ -33,7 +31,7 @@ translation_of: Web/CSS/box-sizing <li><code>border-box</code> indique au navigateur de prendre en compte la bordure et le remplissage dans la valeur définie pour la largeur et la hauteur. Autrement dit, si on définit un élément avec une largeur de 100 pixels, ces 100 pixels inclueront la bordure et le remplissage éventuellement ajoutés et c'est le contenu de la boîte qui sera compressé pour absorber cette largeur supplémentaire. Cela permet généralement de simplifier le dimensionnement des éléments.</li> </ul> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Il est souvent utile de définir <code>box-sizing</code> à <code>border-box</code> aux éléments de mise en page. Cela facilite grandement la gestion de la taille des éléments et élimine généralement un certain nombre d'écueils que vous pouvez rencontrer lors de la mise en page de votre contenu. D'autre part, lors de l'utilisation de la <code>position: relative</code> ou <code>position: absolute</code>, l'utilisation de <code>box-sizing: content-box</code> permet aux valeurs de positionnement d'être relatives au contenu, et indépendantes des changements de taille des bordures et de la taille de la marge interne, ce qui est parfois souhaitable.</p> </div> @@ -66,8 +64,8 @@ box-sizing: unset; {{csssyntax}} -<div class="blockIndicator note"> -<p>Note : La valeur <code>padding-box</code> a été dépréciée.</p> +<div class="note"> +<p><strong>Note :</strong> La valeur <code>padding-box</code> a été dépréciée.</p> </div> <h2 id="Exemples">Exemples</h2> diff --git a/files/fr/web/css/break-after/index.html b/files/fr/web/css/break-after/index.html index b2191bb0a0..4ed535eaf6 100644 --- a/files/fr/web/css/break-after/index.html +++ b/files/fr/web/css/break-after/index.html @@ -125,7 +125,7 @@ break-after: unset; </tbody> </table> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> La valeur <code>always</code> de <code>page-break-*</code> a été implémenté par les navigateurs comme une rupture de page et pas comme une rupture de colonne. C'est pourquoi l'alias correspondant à cette valeur est <code>page</code> et pas <code>always</code>.</p> </div> diff --git a/files/fr/web/css/break-before/index.html b/files/fr/web/css/break-before/index.html index 35bf0c5215..7ea0446d08 100644 --- a/files/fr/web/css/break-before/index.html +++ b/files/fr/web/css/break-before/index.html @@ -143,7 +143,7 @@ break-before: unset; </tbody> </table> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> La valeur <code>always</code> pour <code>page-break-before</code> a été implémentée par les navigateurs comme une rupture de page et non comme une rupture de colonne. C'est pourquoi l'alias ici utilisé est <code>page</code> et non <code>always</code>.</p> </div> diff --git a/files/fr/web/css/calc()/index.html b/files/fr/web/css/calc()/index.html index 6f3cbb1c7e..b3eb962d7b 100644 --- a/files/fr/web/css/calc()/index.html +++ b/files/fr/web/css/calc()/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/calc() <p>La fonction <strong><code>calc()</code></strong> peut être utilisée à n'importe quel endroit où une {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, {{cssxref("<percentage>")}} ou {{cssxref("<integer>")}} est nécessaire. Grâce à <code>calc()</code>, il est possible de réaliser des calculs pour déterminer la valeur d'une propriété CSS.</p> -<pre class="brush: css no-line-numbers notranslate">/* property: calc(expression) */ +<pre class="brush: css no-line-numbers">/* property: calc(expression) */ width: calc(100% - 80px); </pre> @@ -55,7 +55,7 @@ width: calc(100% - 80px); <p><code>calc()</code> rend le positionnement des objets facile en définissant une marge. Dans cet exemple, le CSS crée une bannière qui s'étend sur toute la fenêtre, avec un espace de 40 pixels entre chaque bout de la bannière et les bords de la fenêtre :</p> -<pre class="brush: css notranslate">.banniere { +<pre class="brush: css">.banniere { position: absolute; left: 40px; width: calc(100% - 80px); @@ -68,7 +68,7 @@ width: calc(100% - 80px); } </pre> -<pre class="brush: html notranslate"><div class="banniere">C'est une bannière !</div></pre> +<pre class="brush: html"><div class="banniere">C'est une bannière !</div></pre> <p>{{EmbedLiveSample("Positionner_un_objet_sur_l’écran_avec_une_marge", '100%', '60')}}</p> @@ -78,7 +78,7 @@ width: calc(100% - 80px); <p>Regardons un peu le CSS :</p> -<pre class="brush: css notranslate">input { +<pre class="brush: css">input { padding: 2px; display: block; width: calc(100% - 1em); @@ -93,7 +93,7 @@ width: calc(100% - 80px); <p>Dans ce cas, le formulaire est lui-même défini pour utiliser un sixième de la taille disponible de la fenêtre. Ensuite, pour s'assurer que les champs gardent une taille appropriée, nous utilisons <code>calc()</code> pour définir qu'ils doivent être de la largeur de leur conteneur moins 1em. Enfin, le HTML suivant utilise le CSS défini :</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div id="boiteformulaire"> <label>Tapez quelque chose :</label> <input type="text"> @@ -107,7 +107,7 @@ width: calc(100% - 80px); <p>Prenons la feuille de style suivante :</p> -<pre class="brush: css notranslate">.toto { +<pre class="brush: css">.toto { --largeurA: 100px; --largeurB: calc(var(--largeurA) / 2); --largeurC: calc(var(--largeurB) / 2); @@ -120,7 +120,7 @@ width: calc(100% - 80px); <p>Lorsque vous utilisez <code>calc()</code> pour définir la taille d'un texte, assurez-vous d'inclure <a href="/fr/docs/Web/CSS/length#Unités_de_longueur_relatives">une unité de longueur relative</a>. Par exemple :</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { font-size: calc(1.5rem + 3vw); }</pre> diff --git a/files/fr/web/css/caption-side/index.html b/files/fr/web/css/caption-side/index.html index e708794974..46b1691fd8 100644 --- a/files/fr/web/css/caption-side/index.html +++ b/files/fr/web/css/caption-side/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/caption-side <div>{{EmbedInteractiveExample("pages/css/caption-side.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/caret-color/index.html b/files/fr/web/css/caret-color/index.html index 71a7d3ed85..ef1f0eb278 100644 --- a/files/fr/web/css/caret-color/index.html +++ b/files/fr/web/css/caret-color/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/caret-color <div>{{EmbedInteractiveExample("pages/css/caret-color.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> Les agents utilisateurs peuvent considérer que d'autres objets doivent être impactés par cette propriété : par exemple le curseur de navigation, qui ressemble au curseur de saisie et qui peut être déplacé sur un texte non-éditable. En revanche, bien que l'icône du curseur de la souris puisse ressembler à un curseur de saisie lorsque {{cssxref("cursor")}} vaut <code>auto</code> ou <code>text</code> ou <code>vertical-text</code>, celle-ci n'est pas modifiée par cette propriété. Pour certains navigateurs qui ne prennent pas en charge cette propriété, la couleur du curseur de saisie n'est pas associée à la couleur de la police.</p> </div> @@ -39,7 +37,7 @@ caret-color: hsla(228, 4%, 24%, 0.8);</pre> <dl> <dt><code>auto</code></dt> <dd>L'agent utilisateur doit utiliser <code>currentcolor</code> mais peut ajuster la couleur du curseur afin d'améliorer la visibilité et le contraste avec le contenu environnant (l'arrière-plan, les ombres, etc.). - <div class="note"><strong>Note :</strong> Bien que l'agent utilisateur puisse utiliser <code>currentcolor</code> pour la valeur <code>auto</code>, cette dernière ne sera pas interpolée lors des animations/transitions (à la différence de la valeur <code>currentcolor</code>).</div> + <div class="note"><p><strong>Note :</strong> Bien que l'agent utilisateur puisse utiliser <code>currentcolor</code> pour la valeur <code>auto</code>, cette dernière ne sera pas interpolée lors des animations/transitions (à la différence de la valeur <code>currentcolor</code>).</p></div> </dd> <dt><color></dt> <dd>L'agent utilisateur utilise la couleur ({{cssxref("<color>")}}) indiquée comme couleur pour le curseur de saisie.</dd> @@ -95,7 +93,7 @@ caret-color: hsla(228, 4%, 24%, 0.8);</pre> <ul> <li>{{HTMLElement("input")}}</li> <li>L'attribut HTML {{htmlattrxref("contenteditable")}} qui rend le texte d'un élément éditable</li> - <li><a href="/fr/docs/Web/HTML/Contenu_editable">Rendre du contenu éditable</a></li> + <li><a href="/fr/docs/Web/Guide/HTML/Editable_content">Rendre du contenu éditable</a></li> <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></li> <li>Le type de données {{cssxref("<color>")}}</li> <li>Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}.</li> diff --git a/files/fr/web/css/clamp()/index.html b/files/fr/web/css/clamp()/index.html index 2781cfa678..242f7aa3f6 100644 --- a/files/fr/web/css/clamp()/index.html +++ b/files/fr/web/css/clamp()/index.html @@ -15,14 +15,14 @@ translation_of: Web/CSS/clamp() <p><strong>Note :</strong> l'expression <code>clamp(MIN, VAL, MAX)</code> sera résolue comme <code>max(MIN, min(VAL, MAX)))</code>.</p> </div> -<pre class="brush: css no-line-numbers notranslate">width: clamp(10px, 4em, 80px); +<pre class="brush: css no-line-numbers">width: clamp(10px, 4em, 80px); </pre> <p>Dans l'exemple précédent, la largeur fera au plus 80 pixels et au moins 10 pixels mais mesurera 4em de large si un em mesure entre 2.5 et 20px.</p> <p>Prenons comme hypothèse qu'un em mesure 16px de large :</p> -<pre class="brush: css no-line-numbers notranslate">width: clamp(10px, 4em, 80px); +<pre class="brush: css no-line-numbers">width: clamp(10px, 4em, 80px); /* avec 1em = 16px, on a 4em = 16px * 4 = 64px */ width: clamp(10px, 64px, 80px); /* clamp(MIN, VAL, MAX) est résolue comme max(MIN, min(VAL, MAX))) */ @@ -65,7 +65,7 @@ width: 64px; <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { font-size: 2rem; } h1.responsive { @@ -77,7 +77,7 @@ h1.responsive { <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><h1>Ce texte est toujours lisible mais sa taille ne change pas.</h1> +<pre class="brush: html"><h1>Ce texte est toujours lisible mais sa taille ne change pas.</h1> <h1 class="responsive">Ce texte est toujours lisible et s'adapte dans une certaine mesure.</h1> </pre> diff --git a/files/fr/web/css/clear/index.html b/files/fr/web/css/clear/index.html index 1b2fba1541..541ff870fa 100644 --- a/files/fr/web/css/clear/index.html +++ b/files/fr/web/css/clear/index.html @@ -13,16 +13,14 @@ translation_of: Web/CSS/clear <div>{{EmbedInteractiveExample("pages/css/clear.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p>Lorsqu'elle est appliquée aux blocs non-flottants, elle déplace <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">le bord de la bordure</a> de l'élément sous <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">le bord de la marge</a> de tous les éléments flottants concernés. Il y aura<a href="/fr/docs/Web/CSS/Fusion_des_marges"> fusion des marges (<em>margin collapsing</em>)</a> verticales entre l'élément flottant et le bloc non-flottant mais pas entre les élément flottants.</p> +<p>Lorsqu'elle est appliquée aux blocs non-flottants, elle déplace <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">le bord de la bordure</a> de l'élément sous <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">le bord de la marge</a> de tous les éléments flottants concernés. Il y aura<a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing"> fusion des marges (<em>margin collapsing</em>)</a> verticales entre l'élément flottant et le bloc non-flottant mais pas entre les élément flottants.</p> <p>Lorsqu'elle est appliquée aux éléments flottants, elle déplace <a href="/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte">le bord de la marge</a> de l'élément sous <a href="/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte">le bord de la marge</a> de tous les éléments flottants concernés. Cela impacte la position des éléments flottants suivants car ceux-ci ne peuvent pas être situés plus haut que les éléments flottants qui les précèdent.</p> -<p>Les éléments flottants qui sont dégagés sont les éléments flottants précédant l'élément ciblé, au sein de du <a href="/fr/docs/Web/CSS/Block_formatting_context">même contexte de formatage</a>.</p> +<p>Les éléments flottants qui sont dégagés sont les éléments flottants précédant l'élément ciblé, au sein de du <a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">même contexte de formatage</a>.</p> <div class="note"> -<p><strong>Note : </strong>Si un élément ne contient que des éléments flottants, sa hauteur sera nulle. Si on souhaite redimensionner l'élément afin qu'il contienne tous les éléments flottants à l'intérieur, on peut faire flotter ce conteneur ou utiliser <code>clear</code> sur un pseudo-élément remplacé {{cssxref("::after")}}.</p> +<p><strong>Note :</strong> Si un élément ne contient que des éléments flottants, sa hauteur sera nulle. Si on souhaite redimensionner l'élément afin qu'il contienne tous les éléments flottants à l'intérieur, on peut faire flotter ce conteneur ou utiliser <code>clear</code> sur un pseudo-élément remplacé {{cssxref("::after")}}.</p> <pre class="brush: css">#conteneur::after { content: ""; @@ -34,7 +32,7 @@ translation_of: Web/CSS/clear <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush: css:no-line-numbers">/* Valeurs avec mot-clé */ +<pre class="brush: css">/* Valeurs avec mot-clé */ clear: none; clear: left; clear: right; @@ -230,5 +228,5 @@ p { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Le modèle de boîtes</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîtes</a></li> </ul> diff --git a/files/fr/web/css/clip-path/index.html b/files/fr/web/css/clip-path/index.html index 0e59f1bbec..1888fb3c17 100644 --- a/files/fr/web/css/clip-path/index.html +++ b/files/fr/web/css/clip-path/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/clip-path <div>{{EmbedInteractiveExample("pages/css/clip-path.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> La propriété <code>clip-path</code> remplace la propriété {{cssxref("clip")}} désormais dépréciée.</p> </div> @@ -98,8 +96,7 @@ clip-path: unset; <h3 id="Comparaison_entre_HTML_et_SVG">Comparaison entre HTML et SVG</h3> -<div class="hidden" id="clip-path"> -<pre class="brush: html"><svg class="defs"> +<pre class="brush: html hidden"><svg class="defs"> <defs> <clipPath id="myPath" clipPathUnits="objectBoundingBox"> <path d="M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z" /> @@ -518,9 +515,8 @@ svg text { svg text.em { font-style: italic; }</pre> -</div> -<p>{{EmbedLiveSample("clip-path", "100%", 800, "", "", "example-outcome-frame")}}</p> +<p>{{EmbedLiveSample("Comparaison_entre_HTML_et_SVG", "100%", 800, "", "", "example-outcome-frame")}}</p> <h3 id="Exemple_complet">Exemple complet</h3> @@ -556,15 +552,11 @@ svg text.em { } </pre> -<div class="hidden"> -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js">var clipPathSelect = document.getElementById("clipPath"); +<pre class="brush: js hidden">var clipPathSelect = document.getElementById("clipPath"); clipPathSelect.addEventListener("change", function (evt) { document.getElementById("clipped").style.clipPath = evt.target.value; }); </pre> -</div> <h4 id="Résultat">Résultat</h4> diff --git a/files/fr/web/css/clip/index.html b/files/fr/web/css/clip/index.html index 8b882c9078..a7cf1ead61 100644 --- a/files/fr/web/css/clip/index.html +++ b/files/fr/web/css/clip/index.html @@ -27,7 +27,7 @@ clip: unset; </pre> <div class="warning"> -<p><strong>Attention ! </strong>Cette propriété est dépréciée et ne doit plus être utilisée. La propriété {{cssxref("clip-path")}} peut être utilisée à la place.</p> +<p><strong>Attention :</strong> Cette propriété est dépréciée et ne doit plus être utilisée. La propriété {{cssxref("clip-path")}} peut être utilisée à la place.</p> </div> <p>{{cssinfo}}</p> @@ -38,8 +38,7 @@ clip: unset; <dl> <dt><code><shape></code></dt> - <dd>Une forme rectangulaire indiquée avec <code>rect(<haut>, <droite>, <bas>, <gauche>)</code> ou avec <code>rect(<haut> <droite> <bas> <gauche>)</code>. <code><haut></code> et <code><bas></code> indiquent les décalages à partir du haut de la boîte de bordure, <code><gauche></code> et <code><droite></code> indiquent les décalages à partir du bord gauche de la boîte de bordure.</dd> - <dd><code><haut></code>, <code><droite></code>, <code><bas></code> et <code><gauche></code> peuvent avoir une valeur de longueur (type {{cssxref("<length>")}}) ou<code> auto</code>. Si un des côtés vaut <code>auto</code>, l'élément est rogné sur ce côté avec le bord intérieur de la boîte de bordure.</dd> + <dd>Une forme rectangulaire indiquée avec <code>rect(<haut>, <droite>, <bas>, <gauche>)</code> ou avec <code>rect(<haut> <droite> <bas> <gauche>)</code>. <code><haut></code> et <code><bas></code> indiquent les décalages à partir du haut de la boîte de bordure, <code><gauche></code> et <code><droite></code> indiquent les décalages à partir du bord gauche de la boîte de bordure.<code><haut></code>, <code><droite></code>, <code><bas></code> et <code><gauche></code> peuvent avoir une valeur de longueur (type {{cssxref("<length>")}}) ou<code> auto</code>. Si un des côtés vaut <code>auto</code>, l'élément est rogné sur ce côté avec le bord intérieur de la boîte de bordure.</dd> <dt><code>auto</code></dt> <dd>L'élément n'est pas rogné (la valeur par défaut). Attention, l'effet obtenu n'est pas le même que <code>rect(auto, auto, auto, auto)</code>.</dd> </dl> diff --git a/files/fr/web/css/color-adjust/index.html b/files/fr/web/css/color-adjust/index.html index 88640a6c4d..53e02b582a 100644 --- a/files/fr/web/css/color-adjust/index.html +++ b/files/fr/web/css/color-adjust/index.html @@ -11,12 +11,10 @@ translation_of: Web/CSS/color-adjust --- <div>{{CSSRef}}</div> -<p><span class="seoSummary">La propriété CSS <strong><code>color-adjust</code></strong> contrôle la façon dont l'agent utilisateur peut optimiser l'apparence de l'élément sur l'appareil. Par défaut, le navigateur est autorisé à appliquer tous les ajustements qu'il estime nécessaires afin d'ajuster l'élément au mieux pour l'appareil utilisé.</span></p> +<p>La propriété CSS <strong><code>color-adjust</code></strong> contrôle la façon dont l'agent utilisateur peut optimiser l'apparence de l'élément sur l'appareil. Par défaut, le navigateur est autorisé à appliquer tous les ajustements qu'il estime nécessaires afin d'ajuster l'élément au mieux pour l'appareil utilisé.</p> <div>{{EmbedInteractiveExample("pages/css/color-adjust.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Dans l'exemple précédent, le texte utilise la couleur ({{cssxref("color")}}), <code>#411</code> qui est très sombre et qui peut donc être difficile à lire avec l'arrière-plan noir (<code>black</code> pour la propriété {{cssxref("background-color")}}). Selon le navigateur, sa configuration et l'appareil utilisé, le navigateur peut choisir de retirer l'arrière-plan noir ou de modifier la couleur du texte afin d'améliorer le contraste et la lisibilité.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/color/index.html b/files/fr/web/css/color/index.html index 8b6d594f54..2b31fd1dae 100644 --- a/files/fr/web/css/color/index.html +++ b/files/fr/web/css/color/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/color <div>{{EmbedInteractiveExample("pages/css/color.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La valeur de cette propriété doit être une couleur uniforme. Celle-ci peut contenir des informations de transparences à partir de CSS3 mais ce ne doit pas être un dégradé ({{cssxref("<gradient>")}}) car en CSS un dégradé est considéré comme une image (type {{cssxref("<image>")}}) et pas comme une couleur.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/color_value/index.html b/files/fr/web/css/color_value/index.html index c362b45dab..e35eb28083 100644 --- a/files/fr/web/css/color_value/index.html +++ b/files/fr/web/css/color_value/index.html @@ -10,24 +10,24 @@ original_slug: Web/CSS/Type_color --- <div>{{CSSRef}}</div> -<p>Le type de données CSS <strong><code><color></code></strong> permet de représenter des couleurs dans <a class="external" href="https://fr.wikipedia.org/wiki/SRGB">l'espace de couleurs sRGB</a>. Une couleur pourra être décrite de trois façons :</p> +<p>Le type de données CSS <strong><code><color></code></strong> permet de représenter des couleurs dans <a href="https://fr.wikipedia.org/wiki/SRGB">l'espace de couleurs sRGB</a>. Une couleur pourra être décrite de trois façons :</p> <ul> <li>grâce à un mot-clé (comme <code>blue</code> ou <code>transparent</code> par exemple)</li> <li>en utilisant <a href="https://fr.wikipedia.org/wiki/Couleur_du_Web#Triplet_hexad.C3.A9cimal">le système de coordonnées cubiques RGB</a> (grâce à la notation #-hexadecimal ou aux notations fonctionnelles <code>rgb()</code> et <code>rgba()</code>)</li> - <li>en utilisant <a class="external" href="https://fr.wikipedia.org/wiki/Teinte_saturation_lumi%C3%A8re">le système de coordonnées cylindriques HSL</a> (grâce aux notations fonctionnelles <code>hsl()</code> et <code>hsla()</code>)</li> + <li>en utilisant <a href="https://fr.wikipedia.org/wiki/Teinte_saturation_lumi%C3%A8re">le système de coordonnées cylindriques HSL</a> (grâce aux notations fonctionnelles <code>hsl()</code> et <code>hsla()</code>)</li> </ul> <p>En plus de la couleur exprimée dans l'espace RGB, une valeur <code><color></code> contient également un <a href="https://fr.wikipedia.org/wiki/Alpha_blending">canal alpha</a> qui décrit la transparence de l'image et donc la façon dont cette image se <a href="https://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending">compose</a> avec son arrière-plan.</p> <div class="note"> -<p><strong>Note :</strong> Cet article décrit le type de donnée CSS <code><color></code> en détails. Si vous souhaitez en savoir plus sur l'utilisation des couleurs en HTML, n'hésitez pas à lire <a href="/fr/docs/Web/HTML/Appliquer_des_couleurs">Appliquer des couleurs à des éléments HTML grâce à CSS</a>.</p> +<p><strong>Note :</strong> Cet article décrit le type de donnée CSS <code><color></code> en détails. Si vous souhaitez en savoir plus sur l'utilisation des couleurs en HTML, n'hésitez pas à lire <a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs à des éléments HTML grâce à CSS</a>.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> <div class="note"> -<p>Bien que les valeurs des couleurs CSS soient définies précisément, elles pourront s'afficher différemment sur différents appareils. La plupart des appareils ne sont pas calibrés et certains navigateurs ne prennent pas en charge <a href="https://fr.wikipedia.org/wiki/Profil_ICC">le profil de couleurs</a> de l'appareil. Sans ces éléments, le rendu des couleurs peut varier.</p> +<p><strong>Note :</strong> Bien que les valeurs des couleurs CSS soient définies précisément, elles pourront s'afficher différemment sur différents appareils. La plupart des appareils ne sont pas calibrés et certains navigateurs ne prennent pas en charge <a href="https://fr.wikipedia.org/wiki/Profil_ICC">le profil de couleurs</a> de l'appareil. Sans ces éléments, le rendu des couleurs peut varier.</p> </div> <p>Il existe plusieurs méthodes pour décrire une valeur <code><color></code>.</p> @@ -65,7 +65,7 @@ original_slug: Web/CSS/Type_color <li>Bien que les noms des mots-clés soient calqués sur les couleurs X11, les couleurs correspondantes peuvent être différentes en CSS et avec X11 car pour ce dernier les couleurs étaient conçues pour le matériel du constructeur.</li> </ul> -<table id="colors_table"> +<table> <thead> <tr> <th scope="col">Spécification</th> @@ -981,7 +981,8 @@ original_slug: Web/CSS/Type_color <p><strong>Note :</strong> Attention lorsqu'on utilise ce mot-clé pour un dégradé (cf.{{cssxref("gradient")}}, <a href="https://www.w3.org/TR/2012/CR-css3-images-20120417/#color-stop-syntax">la spécification W3C indique que <code>transparent</code> devrait être calculé dans l'espace de couleurs avec pré-multiplication des alpha</a>. Cependant, les anciens navigateurs peuvent traiter ce noir avec une valeur <code>alpha</code> de 0.</p> </div> -<div class="note"><strong>Note historique :</strong> Le mot-clé <code>transparent</code> n'était pas une valeur de type <code><color></code> pour la spécification CSS de niveau 2 (première révision). C'était un mot-clé qui pouvait être utilisé comme valeur pour les propriétés {{cssxref("background")}} et {{cssxref("border")}}. Il a été ajouté afin de pouvoir surcharger l'héritage de couleurs opaques. Avec l'ajout de la gestion de l'opacité via <a href="https://fr.wikipedia.org/wiki/Alpha_blending">les canaux alpha</a>, <code>transparent</code> a été redéfini comme une couleur avec la spécification CSS de niveau 3 sur les couleurs, ce qui permet de l'utiliser à n'importe quel endroit où une valeur <code><color></code> est nécessaire (la propriété {{cssxref("color")}} par exemple).</div> +<div class="note"> + <p><strong>Note :</strong> Historiquement, le mot-clé <code>transparent</code> n'était pas une valeur de type <code><color></code> pour la spécification CSS de niveau 2 (première révision). C'était un mot-clé qui pouvait être utilisé comme valeur pour les propriétés {{cssxref("background")}} et {{cssxref("border")}}. Il a été ajouté afin de pouvoir surcharger l'héritage de couleurs opaques. Avec l'ajout de la gestion de l'opacité via <a href="https://fr.wikipedia.org/wiki/Alpha_blending">les canaux alpha</a>, <code>transparent</code> a été redéfini comme une couleur avec la spécification CSS de niveau 3 sur les couleurs, ce qui permet de l'utiliser à n'importe quel endroit où une valeur <code><color></code> est nécessaire (la propriété {{cssxref("color")}} par exemple).</p></div> <h3 id="Le_mot-clé_currentColor">Le mot-clé <code>currentColor</code></h3> @@ -1018,7 +1019,7 @@ original_slug: Web/CSS/Type_color <p>{{EmbedLiveSample('Exemple_live_n°2')}}</p> </div> -<h3 id="Les_couleurs_RGB"><a id="rgb" name="rgb">Les couleurs RGB</a></h3> +<h3 id="Les_couleurs_RGB">Les couleurs RGB</h3> <p>Les couleurs peuvent être définies selon le modèles rouge-vert-bleu-alpha (RGB avec une composante alpha, optionnelle, pour gérer la transparence.</p> @@ -1080,7 +1081,7 @@ rgba(1e2, .5e1, .5e0, +.25e2%) rgba(255 0 0 / 0.4) /* 40% opacité - rouge */ rgba(255 0 0 / 40%) /* 40% opacité - rouge */</pre> -<h3 id="Les_couleurs_HSL"><a id="hsl" name="hsl">Les couleurs HSL</a></h3> +<h3 id="Les_couleurs_HSL">Les couleurs HSL</h3> <p>Les couleurs peuvent également être définies selon le modèle HSL (pour <em>Hue-Saturation-Lightness</em> qui signifie teinte-saturation-clarté).</p> @@ -1113,7 +1114,7 @@ rgba(255 0 0 / 40%) /* 40% opacité - rouge */</pre> <h5 id="HSL">HSL</h5> -<pre class="brush: css" style="text-shadow: rgba(255,255,255,0.4) -1px -1px;">hsl(0, 100%,50%) /* red */ +<pre class="brush: css">hsl(0, 100%,50%) /* red */ hsl(30, 100%,50%) hsl(60, 100%,50%) hsl(90, 100%,50%) @@ -1155,7 +1156,7 @@ hsl(240 100% 50% / 5%) /* 5% opaque blue with percentage value for alpha */ <h5 id="HSLa">HSLa</h5> -<pre class="brush: css" style="text-shadow: rgba(255,255,255,0.4) -1px -1px;">hsla(240,100%,50%,0.05) /* 5% opaque blue */ +<pre class="brush: css">hsla(240,100%,50%,0.05) /* 5% opaque blue */ hsla(240,100%,50%, 0.4) /* 40% opaque blue */ hsla(240,100%,50%, 0.7) /* 70% opaque blue */ hsla(240,100%,50%, 1) /* full opaque blue */ @@ -1176,7 +1177,7 @@ hsla(240deg,100%,50%, 0.4) /* 40% opaque blue */</pre> <p>Tous les systèmes ne prennent pas en charges toutes les couleurs système. Cet usage est déprécié pour les pages web publiques (cf. ci-après le tableau des spécifications).</p> -<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0pt 0.5em 0.5em; -moz-column-rule: 1px solid powderblue; -moz-column-width: 15em; background: #eee; -webkit-columns: 15em; -webkit-column-rule: 1px solid powderblue; columns: 17em; column-rule: 1px solid powderblue;"> +<dl> <dt>ActiveBorder</dt> <dd>La bordure de la fenêtre active.</dd> <dt>ActiveCaption</dt> @@ -1237,7 +1238,7 @@ hsla(240deg,100%,50%, 0.4) /* 40% opaque blue */</pre> <h3 id="Ajouts_propres_à_Mozilla_pour_les_couleurs_système">Ajouts propres à Mozilla pour les couleurs système</h3> -<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0 0.5em 0.5em; -moz-column-rule: 1px solid powderblue; -moz-column-width: 17em; background: #eee; -webkit-columns: 17em; -webkit-column-rule: 1px solid powderblue; columns: 17em; column-rule: 1px solid powderblue;"> +<dl> <dt>-moz-ButtonDefault</dt> <dd>La couleur de la bordure autour des boutons représentant l'action par défaut d'une boîte de dialogue.</dd> <dt>-moz-ButtonHoverFace</dt> @@ -1249,70 +1250,59 @@ hsla(240deg,100%,50%, 0.4) /* 40% opaque blue */</pre> <dt>-moz-CellHighlightText</dt> <dd>La couleur du texte pour un élément sélectionné dans un widget arborescent. Devrait être utilisée avec <code>-moz-CellHighlight</code> comme couleur d'arrière-plan. Voir aussi <code>-moz-html-CellHighlightText</code>.</dd> <dt>-moz-Combobox</dt> - <dd>{{Gecko_minversion_inline("1.9.2")}} La couleur d'arrière-plan pour les listes déroulantes. Devrait être utilisée avec <code>-moz-ComboboxText</code> comme couleurs de premier-plan. Pour les versions antérieures à 1.9.2, on utilisera <code>-moz-Field</code> à la place.</dd> + <dd> La couleur d'arrière-plan pour les listes déroulantes. Devrait être utilisée avec <code>-moz-ComboboxText</code> comme couleurs de premier-plan. Pour les versions antérieures à 1.9.2, on utilisera <code>-moz-Field</code> à la place.</dd> <dt>-moz-ComboboxText</dt> - <dd>{{Gecko_minversion_inline("1.9.2")}} La couleur du texte pour les listes déroulantes. Devrait être utilisée avec <code>-moz-Combobox</code> comme couleur d'arrière-plan. Pour les versions antérieures à 1.9.2, on utilisera <code>-moz-FieldText</code> à la place.</dd> + <dd> La couleur du texte pour les listes déroulantes. Devrait être utilisée avec <code>-moz-Combobox</code> comme couleur d'arrière-plan. Pour les versions antérieures à 1.9.2, on utilisera <code>-moz-FieldText</code> à la place.</dd> <dt>-moz-Dialog</dt> <dd>La couleur d'arrière-plan pour les boîtes de dialogue. Devrait être utilisée avec <code>-moz-DialogText</code> comme couleur de premier-plan.</dd> <dt>-moz-DialogText</dt> <dd>La couleur du texte pour les boîtes de dialogue. Devrait être utilisée avec <code>-moz-Dialog</code> comme couleur d'arrière-plan.</dd> <dt>-moz-dragtargetzone</dt> <dt>-moz-EvenTreeRow</dt> - <dd>{{gecko_minversion_inline("1.9")}} La couleur d'arrière-plan pour les lignes numérotées paires d'un arbre. Devrait être utilisée avec<code>-moz-FieldText</code> comme couleur de premier-plan. Pour les versions de Gecko avant 1.9, on utilisera <code>-moz-Field</code>. Voir aussi <code>-moz-OddTreeRow</code>.</dd> + <dd> La couleur d'arrière-plan pour les lignes numérotées paires d'un arbre. Devrait être utilisée avec<code>-moz-FieldText</code> comme couleur de premier-plan. Pour les versions de Gecko avant 1.9, on utilisera <code>-moz-Field</code>. Voir aussi <code>-moz-OddTreeRow</code>.</dd> <dt>-moz-Field</dt> <dd>La couleur d'arrière-plan pour les champs texte. Devrait être utilisée avec <code>-moz-FieldText</code> comme couleur de premier-plan.</dd> <dt>-moz-FieldText</dt> <dd>La couleur du texte pour les champs texte. Devrait être utilisée avec <code>-moz-Field</code>, <code>-moz-EvenTreeRow</code>, ou <code>-moz-OddTreeRow</code> comme couleur d'arrière-plan.</dd> <dt>-moz-html-CellHighlight</dt> - <dd>{{gecko_minversion_inline("1.9")}} La couleur d'arrière-plan pour les éléments sélectionnés dans un élément HTML {{HTMLElement("select")}}. Devrait être utilisée avec <code>-moz-html-CellHighlightText</code> comme couleur de premier-plan. Avant Gecko 1.9, on utilisera <code>-moz-CellHighlight</code>.</dd> + <dd> La couleur d'arrière-plan pour les éléments sélectionnés dans un élément HTML {{HTMLElement("select")}}. Devrait être utilisée avec <code>-moz-html-CellHighlightText</code> comme couleur de premier-plan. Avant Gecko 1.9, on utilisera <code>-moz-CellHighlight</code>.</dd> <dt>-moz-html-CellHighlightText</dt> - <dd>{{gecko_minversion_inline("1.9")}} La couleur du texte pour les éléments sélectionnés dans un élément HTML {{HTMLElement("select")}}. Devrait être utilisée avec <code>-moz-html-CellHighlight</code> comme couleur d'arrière-plan. Avant Gecko 1.9, on utilisera <code>-moz-CellHighlightText</code>.</dd> - <dt>-moz-mac-accentdarkestshadow</dt> - <dt>-moz-mac-accentdarkshadow</dt> - <dt>-moz-mac-accentface</dt> - <dt>-moz-mac-accentlightesthighlight</dt> - <dt>-moz-mac-accentlightshadow</dt> - <dt>-moz-mac-accentregularhighlight</dt> - <dt>-moz-mac-accentregularshadow</dt> - <dt>-moz-mac-chrome-active</dt> - <dd>{{Gecko_minversion_inline("1.9.1")}}</dd> - <dt>-moz-mac-chrome-inactive</dt> - <dd>{{Gecko_minversion_inline("1.9.1")}}</dd> - <dt>-moz-mac-focusring</dt> - <dt>-moz-mac-menuselect</dt> - <dt>-moz-mac-menushadow</dt> - <dt>-moz-mac-menutextselect</dt> - <dt>-moz-MenuHover</dt> + <dd> La couleur du texte pour les éléments sélectionnés dans un élément HTML {{HTMLElement("select")}}. Devrait être utilisée avec <code>-moz-html-CellHighlight</code> comme couleur d'arrière-plan. Avant Gecko 1.9, on utilisera <code>-moz-CellHighlightText</code>.</dd> + <dt>-moz-mac-accentdarkestshadow, -moz-mac-accentdarkshadow, -moz-mac-accentface, -moz-mac-accentlightesthighlight, -moz-mac-accentlightshadow, -moz-mac-accentregularhighlight, -moz-mac-accentregularshadow</dt> + <dd><p>Couleurs d'accentuation.</p></dd> + <dt>-moz-mac-chrome-active, -moz-mac-chrome-inactive</dt> + <dd>Couleurs pour les éléments de chrome actifs/inactifs</dd> + <dt>-moz-mac-focusring, -moz-mac-menuselect, -moz-mac-menushadow, -moz-mac-menutextselect, -moz-MenuHover</dt> <dd>La couleur d'arrière-plan pour les éléments de menu survolés. Généralement semblable à <code>Highlight</code>. Devrait être utilisée avec <code>-moz-MenuHoverText</code> ou <code>-moz-MenuBarHoverText</code> comme couleur de premier-plan.</dd> <dt>-moz-MenuHoverText</dt> <dd>La couleur du texte pour les éléments de menu survolés. Généralement similaire à <code>HighlightText</code>. Devrait être utilisée avec <code>-moz-MenuHover</code> comme couleur d'arrière-plan.</dd> <dt>-moz-MenuBarText</dt> - <dd>{{Gecko_minversion_inline("1.9.2")}} La couleur du texte dans les barres de menu. Généralement similaire à <code>MenuText</code>. Devrait être utilisée avec <code>Menu</code> comme couleur d'arrière-plan.</dd> + <dd> La couleur du texte dans les barres de menu. Généralement similaire à <code>MenuText</code>. Devrait être utilisée avec <code>Menu</code> comme couleur d'arrière-plan.</dd> <dt>-moz-MenuBarHoverText</dt> <dd>La couleur du texte pour les éléments survolés dans les barres de menu, généralement similaire à <code>-moz-MenuHoverText</code>. Devrait être utilisée avec <code>-moz-MenuHover</code> comme couleur d'arrière-plan.</dd> <dt>-moz-nativehyperlinktext</dt> - <dd>{{Gecko_minversion_inline("1.9.1")}} La couleur par défaut de la plate-forme pour les hyperliens.</dd> + <dd> La couleur par défaut de la plate-forme pour les hyperliens.</dd> <dt>-moz-OddTreeRow</dt> - <dd>{{gecko_minversion_inline("1.9")}} La couleur d'arrière-plan pour les lignes numérotées impaires d'un arbre. Devrait être utilisée avec<code>-moz-FieldText</code> comme couleur de premier-plan. Pour les versions de Gecko avant 1.9, on utilisera <code>-moz-Field</code>. Voir aussi <code>-moz-EvenTreeRow</code>.</dd> + <dd> La couleur d'arrière-plan pour les lignes numérotées impaires d'un arbre. Devrait être utilisée avec<code>-moz-FieldText</code> comme couleur de premier-plan. Pour les versions de Gecko avant 1.9, on utilisera <code>-moz-Field</code>. Voir aussi <code>-moz-EvenTreeRow</code>.</dd> <dt>-moz-win-accentcolor</dt> - <dd>{{gecko_minversion_inline("56")}} Utilisée pour accéder à la couleur d'accentuation de Windows 10 pour les menus, la barre de tâches, les barres de titre.</dd> + <dd> Utilisée pour accéder à la couleur d'accentuation de Windows 10 pour les menus, la barre de tâches, les barres de titre.</dd> <dt>-moz-win-accentcolortext</dt> - <dd>{{gecko_minversion_inline("56")}} Utilisée pour accéder à la couleur d'accentuation de Windows 10 uttilisée pour le texte des menus, de la barre de tâches et des barres de titre.</dd> + <dd> Utilisée pour accéder à la couleur d'accentuation de Windows 10 uttilisée pour le texte des menus, de la barre de tâches et des barres de titre.</dd> <dt>-moz-win-communicationstext</dt> - <dd>{{gecko_minversion_inline("1.9")}} Devrait être utilisée comme couleur pour les textes des objets pour lesquels <code>{{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox;</code>.</dd> + <dd> Devrait être utilisée comme couleur pour les textes des objets pour lesquels <code>{{cssxref("appearance")}}: -moz-win-communications-toolbox;</code>.</dd> <dt>-moz-win-mediatext</dt> - <dd>{{gecko_minversion_inline("1.9")}} Devrait être utilisée comme couleur pour les textes des objets pour lesquels <code>{{cssxref("-moz-appearance")}}: -moz-win-media-toolbox</code>.</dd> + <dd> Devrait être utilisée comme couleur pour les textes des objets pour lesquels <code>{{cssxref("appearance")}}: -moz-win-media-toolbox</code>.</dd> </dl> <h3 id="Ajout_de_Mozilla_pour_les_couleurs_liées_aux_préférences">Ajout de Mozilla pour les couleurs liées aux préférences</h3> -<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0 0.5em 0.5em; background: #eee;"> +<dl> <dt>-moz-activehyperlinktext</dt> <dd>La couleur choisie par l'utilisateur pour le texte des liens actifs. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.</dd> <dt>-moz-default-background-color</dt> - <dd>{{Gecko_minversion_inline("5.0")}} La couleur choisie par l'utilisateur pour la couleur d'arrière-plan du document.</dd> + <dd> La couleur choisie par l'utilisateur pour la couleur d'arrière-plan du document.</dd> <dt>-moz-default-color</dt> - <dd>{{Gecko_minversion_inline("5.0")}} La couleur choisie par l'utilisateur pour la couleur du texte.</dd> + <dd> La couleur choisie par l'utilisateur pour la couleur du texte.</dd> <dt>-moz-hyperlinktext</dt> <dd>La couleur choisie par l'utilisateur pour le texte des liens non visités. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.</dd> <dt>-moz-visitedhyperlinktext</dt> @@ -1321,11 +1311,11 @@ hsla(240deg,100%,50%, 0.4) /* 40% opaque blue */</pre> <h2 id="Interpolation">Interpolation</h2> -<p>Les valeurs de type <code><color></code> peuvent être interpolées afin de créer des animations ou des dégradés (type <code><gradient></code>). Dans ce cas, elles sont interpolées via chacune de leurs composantes rouge, verte, bleue et chacune de ces coordonnées est gérée comme un nombre réel flottant. L'interpolation des couleurs est appliquée dans <a class="external" href="https://www.gimp.org/docs/plug-in/appendix-alpha.html">l'espace de couleurs alpha sRGBA prémultiplié</a> afin d'empêcher des tons de gris d'apparaître. Pour les animations, la vitesse de l'interpolation est définie selon <a href="/fr/docs/Web/CSS/timing-function">la fonction de temporisation</a> associée à l'animation.</p> +<p>Les valeurs de type <code><color></code> peuvent être interpolées afin de créer des animations ou des dégradés (type <code><gradient></code>). Dans ce cas, elles sont interpolées via chacune de leurs composantes rouge, verte, bleue et chacune de ces coordonnées est gérée comme un nombre réel flottant. L'interpolation des couleurs est appliquée dans <a href="https://www.gimp.org/docs/plug-in/appendix-alpha.html">l'espace de couleurs alpha sRGBA prémultiplié</a> afin d'empêcher des tons de gris d'apparaître. Pour les animations, la vitesse de l'interpolation est définie selon <a href="/fr/docs/Web/CSS/easing-function">la fonction de temporisation</a> associée à l'animation.</p> <h2 id="Accessibilité">Accessibilité</h2> -<p>La recommandation du W3C : <a class="external" href="https://www.w3.org/TR/WCAG/#visual-audio-contrast">WCAG 2.0</a> conseille vivement aux auteurs de ne pas utiliser la couleur comme le seul moyen de transmettre une information, une action ou un résultat. Certains utilisateurs peuvent rencontrer des difficultés à distinguer les couleurs. Bien entendu, cette recommandation ne vise pas à interdire l'utilisation des couleurs, elle indique simplement que ce ne doit pas être le seul moyen de fournir une information (voir l'article sur <a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Ies couleurs et le contraste</a> pour plus d'informations).</p> +<p>La recommandation du W3C : <a href="https://www.w3.org/TR/WCAG/#visual-audio-contrast">WCAG 2.0</a> conseille vivement aux auteurs de ne pas utiliser la couleur comme le seul moyen de transmettre une information, une action ou un résultat. Certains utilisateurs peuvent rencontrer des difficultés à distinguer les couleurs. Bien entendu, cette recommandation ne vise pas à interdire l'utilisation des couleurs, elle indique simplement que ce ne doit pas être le seul moyen de fournir une information (voir l'article sur <a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript#color_and_color_contrast">Ies couleurs et le contraste</a> pour plus d'informations).</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/column-count/index.html b/files/fr/web/css/column-count/index.html index 5bc759d2f4..372e04db1d 100644 --- a/files/fr/web/css/column-count/index.html +++ b/files/fr/web/css/column-count/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/column-count <div>{{EmbedInteractiveExample("pages/css/column-count.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/column-fill/index.html b/files/fr/web/css/column-fill/index.html index c2d4e37d2c..9d27ef3d0e 100644 --- a/files/fr/web/css/column-fill/index.html +++ b/files/fr/web/css/column-fill/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/column-fill <div>{{EmbedInteractiveExample("pages/css/column-fill.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/column-gap/index.html b/files/fr/web/css/column-gap/index.html index 2a0e75cfe3..d59b181788 100644 --- a/files/fr/web/css/column-gap/index.html +++ b/files/fr/web/css/column-gap/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/column-gap <div>{{EmbedInteractiveExample("pages/css/grid-column-gap.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La propriété <code>column-gap</code> était initialement définie dans le module de spécification <a href="/fr/docs/Web/CSS/Colonnes_CSS"><em>Multi-column Layout</em> (disposition en colonnes)</a>. Cette définition a depuis été élargie afin de pouvoir être utilisée dans les différents modes de disposition et fait désormais partie du module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em>. Cette propriété peut être utilisée pour les dispositions en colonnes, les dispositions flexibles ou les disposition en grille.</p> <div class="note"> @@ -125,7 +123,7 @@ column-gap: unset; <h4 id="CSS_3">CSS</h4> -<pre class="brush: css; highlight[6]">#grid { +<pre class="brush: css">#grid { display: grid; height: 100px; grid-template-columns: repeat(3, 1fr); @@ -138,11 +136,9 @@ column-gap: unset; } </pre> -<div class="hidden"> -<pre class="brush: css">#grid { +<pre class="brush: css hidden">#grid { grid-column-gap: 20px; }</pre> -</div> <h4 id="Résultat_3">Résultat</h4> diff --git a/files/fr/web/css/column-rule-color/index.html b/files/fr/web/css/column-rule-color/index.html index bfcd701946..c3d4c6938b 100644 --- a/files/fr/web/css/column-rule-color/index.html +++ b/files/fr/web/css/column-rule-color/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/column-rule-color <div>{{EmbedInteractiveExample("pages/css/column-rule-color.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs de couleur */ diff --git a/files/fr/web/css/column-rule-style/index.html b/files/fr/web/css/column-rule-style/index.html index ef4d7763fc..70bab31e69 100644 --- a/files/fr/web/css/column-rule-style/index.html +++ b/files/fr/web/css/column-rule-style/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/column-rule-style <div>{{EmbedInteractiveExample("pages/css/column-rule-style.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/column-rule-width/index.html b/files/fr/web/css/column-rule-width/index.html index 9794388667..27b3b4397a 100644 --- a/files/fr/web/css/column-rule-width/index.html +++ b/files/fr/web/css/column-rule-width/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/column-rule-width <div>{{EmbedInteractiveExample("pages/css/column-rule-width.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/column-rule/index.html b/files/fr/web/css/column-rule/index.html index 3e63b413ed..9ac19f4c6f 100644 --- a/files/fr/web/css/column-rule/index.html +++ b/files/fr/web/css/column-rule/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/column-rule <div>{{EmbedInteractiveExample("pages/css/column-rule.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété est une propriété raccourcie qui permet de définir {{cssxref("column-rule-width")}}, {{cssxref("column-rule-style")}} et {{cssxref("column-rule-color")}} (plutôt que d'avoir à les définir une par une, ce qui est plus laborieux).</p> <div class="note"> @@ -56,14 +54,12 @@ column-rule: unset; <h3 id="HTML">HTML</h3> -<div id="htmlOutputWrapper"> -<pre class="brush: html" id="htmlOutput"><div id="col_rul"> +<pre class="brush: html"><div id="col_rul"> <p> column one </p> <p> column two </p> <p> column three </p> </div> </pre> -</div> <h3 id="CSS">CSS</h3> diff --git a/files/fr/web/css/column-span/index.html b/files/fr/web/css/column-span/index.html index fe0ca74b74..ab7508ea5b 100644 --- a/files/fr/web/css/column-span/index.html +++ b/files/fr/web/css/column-span/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/column-span <div>{{EmbedInteractiveExample("pages/css/column-span.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ column-span: none; column-span: all; diff --git a/files/fr/web/css/column-width/index.html b/files/fr/web/css/column-width/index.html index 52dc069f9c..ebc538bee6 100644 --- a/files/fr/web/css/column-width/index.html +++ b/files/fr/web/css/column-width/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/column-width <div>{{EmbedInteractiveExample("pages/css/column-width.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Ainsi, si on a une colonne large de 300px avec un écart de 0px, on pourrait placer une seule colonne sur 599px mais avoir deux colonnes avec 600px. Ce réglage permet donc d'obtenir des effets qui s'adaptent aux différentes tailles d'écrans. Manipulée avec la propriété {{cssxref("column-count")}} qui a la précédence, il est nécessaire de définir toutes les valeurs de longueur pour avoir une largeur de colonne CSS exacte. Pour du texte horizontal, ces propriétés sont {{cssxref('width')}}, {{cssxref('column-width')}}, {{cssxref('column-gap')}} et {{cssxref('column-rule-width')}}.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/columns/index.html b/files/fr/web/css/columns/index.html index 8faef4d595..f13537bfe4 100644 --- a/files/fr/web/css/columns/index.html +++ b/files/fr/web/css/columns/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/columns <div>{{EmbedInteractiveExample("pages/css/columns.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Comme pour toute propriété raccourcie, toute propriété détaillée qui n'est pas définie se voit réinitialisée à sa valeur par défaut (surchargeant ainsi les éventuelles règles déclarées avant).</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/compositing_and_blending/index.html b/files/fr/web/css/compositing_and_blending/index.html index 3c62524882..721ca17ac9 100644 --- a/files/fr/web/css/compositing_and_blending/index.html +++ b/files/fr/web/css/compositing_and_blending/index.html @@ -17,22 +17,17 @@ translation_of: Web/CSS/Compositing_and_Blending <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("background-blend-mode")}}</li> <li>{{cssxref("isolation")}}</li> <li>{{cssxref("mix-blend-mode")}}</li> - <li> </li> </ul> -</div> <h3 id="Types_de_donnée">Types de donnée</h3> -<div class="index"> <ul> <li>{{cssxref("<blend-mode>")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/contain/index.html b/files/fr/web/css/contain/index.html index b98788d18f..e08a63ec08 100644 --- a/files/fr/web/css/contain/index.html +++ b/files/fr/web/css/contain/index.html @@ -29,7 +29,7 @@ contain: unset; <p>Cette propriété s'avère utile pour les pages qui contiennent de nombreux composants indépendants et permet de limiter la portée des règles sur le reste de la page.</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Lorsqu'elle est appliquée avec une valeur <code>paint</code>, <code>strict</code> ou <code>content</code>, cette propriété crée :</p> <ul> diff --git a/files/fr/web/css/containing_block/index.html b/files/fr/web/css/containing_block/index.html index 538fa642c6..8e3bff8fb9 100644 --- a/files/fr/web/css/containing_block/index.html +++ b/files/fr/web/css/containing_block/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/A_Propos_Du_Bloc_Conteneur --- <div>{{CSSRef}}</div> -<p class="summary">Le <strong>bloc englobant (<em>containing block</em>)</strong> affecte souvent la taille et la position d'un élément. La plupart du temps, le bloc englobant est la <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte#Les_propriétés_des_boîtes">zone de contenu</a> de l'ancêtre de <a href="/fr/docs/Web/HTML/Éléments_en_bloc">bloc</a> le plus proche mais cette règle n'est pas absolue. <span class="seoSummary">Dans cet article, nous verrons les différents facteurs qui participent à la définition du bloc englobant.</span></p> +<p>Le <strong>bloc englobant (<em>containing block</em>)</strong> affecte souvent la taille et la position d'un élément. La plupart du temps, le bloc englobant est la <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model#les_propri%c3%a9t%c3%a9s_des_bo%c3%aetes">zone de contenu</a> de l'ancêtre de <a href="/fr/docs/Web/HTML/Block-level_elements">bloc</a> le plus proche mais cette règle n'est pas absolue. Dans cet article, nous verrons les différents facteurs qui participent à la définition du bloc englobant.</p> <p>Lorsqu'un agent utilisateur (un navigateur web par exemple) dispose un document, il génère une boîte pour chaque élément du document. Chaque boîte est divisée en quatre zones :</p> @@ -21,7 +21,7 @@ original_slug: Web/CSS/A_Propos_Du_Bloc_Conteneur <li>La zone de marge (<em>margin area</em>)</li> </ol> -<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p> +<p><img alt="Diagram of the box model" src="box-model.png"></p> <div class="note"> <p><strong>Note :</strong> Voir <a href="/fr/docs/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte">cet article pour découvrir le modèle de boîtes</a> en CSS.</p> @@ -70,7 +70,7 @@ original_slug: Web/CSS/A_Propos_Du_Bloc_Conteneur <p>Le code HTML utilisé pour les exemples suivants sera :</p> -<pre class="brush: html notranslate"><body> +<pre class="brush: html"><body> <section> <p>Et voici un paragraphe !</p> </section> @@ -81,16 +81,14 @@ original_slug: Web/CSS/A_Propos_Du_Bloc_Conteneur <p>Dans cet exemple, le paragraphe est positionné de façon statique et son bloc englobant est la zone de contenu de {{HTMLElement("section")}} car cet élément est l'ancêtre le plus proche qui est un conteneur de bloc.</p> -<div class="hidden"> -<pre class="brush: html notranslate"><body> +<pre class="brush: html hidden"><body> <section> <p>Et voici un paragraphe !</p> </section> </body> </pre> -</div> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { background: beige; } @@ -116,16 +114,14 @@ p { <p>Dans cet exemple, le bloc englobant est formé par l'élément {{HTMLElement("body")}}<strong> </strong>car <code><section></code> n'est pas un conteneur de bloc en raison de <code>display: inline</code> et il ne crée pas de contexte de formatage.</p> -<div class="hidden"> -<pre class="brush: html notranslate"><body> +<pre class="brush: html"><body> <section> <p>Et voici un paragraphe !</p> </section> </body> </pre> -</div> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { background: beige; } @@ -147,16 +143,14 @@ p { <p>Ici, le bloc englobant du paragraphe est <code><section></code> car la propriété <code>position</code> de ce dernier vaut <code>absolute</code>. Les valeurs exprimées en pourcentages et associées au paragraphe sont relatives à la zone de remplissage du bloc englobant (ce ne serait pas le cas si la propriété {{cssxref("box-sizing")}} du bloc englobant valait <code>border-box</code>).</p> -<div class="hidden"> -<pre class="brush: html notranslate"><body> +<pre class="brush: html hidden"><body> <section> <p>Et voici un paragraphe !</p> </section> </body> </pre> -</div> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { background: beige; } @@ -186,16 +180,14 @@ p { <p>Dans cet exemple, la propriété <code>position</code> du paragraphe vaut <code>fixed</code>. Le bloc englobant est donc le bloc englobant initial (c'est-à-dire le <em>viewport</em> pour les écrans). Aussi, les dimensions du paragraphe changent selon la taille de la fenêtre du navigateur.</p> -<div class="hidden"> -<pre class="brush: html notranslate"><body> +<pre class="brush: html hidden"><body> <section> <p>Et voici un paragraphe !</p> </section> </body> </pre> -</div> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { background: beige; } @@ -223,16 +215,14 @@ p { <p>Dans cet exemple, la propriété <code>position</code> du paragraphe vaut <code>absolute</code>. Son bloc englobant est donc <code><section></code> car c'est l'ancêtre le plus proche dont la propriété {{cssxref("transform")}} ne vaut pas <code>none</code>.</p> -<div class="hidden"> -<pre class="brush: html notranslate"><body> +<pre class="brush: html hidden"><body> <section> <p>Et voici un paragraphe !</p> </section> </body> </pre> -</div> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { background: beige; } diff --git a/files/fr/web/css/content/index.html b/files/fr/web/css/content/index.html index 6e2af97e48..cd5ad04b5f 100644 --- a/files/fr/web/css/content/index.html +++ b/files/fr/web/css/content/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/content --- <div>{{CSSRef}}</div> -<p>La propriété <strong><code>content</code></strong> est utilisée avec les pseudo-éléments {{cssxref("::before")}} et {{cssxref("::after")}} afin de générer le contenu d'un élément. Les objets insérés via la propriété <code>content</code> sont des <em><a href="/fr/docs/Web/CSS/Élément_remplacé">éléments remplacés anonymes</a>.</em></p> +<p>La propriété <strong><code>content</code></strong> est utilisée avec les pseudo-éléments {{cssxref("::before")}} et {{cssxref("::after")}} afin de générer le contenu d'un élément. Les objets insérés via la propriété <code>content</code> sont des <em><a href="/fr/docs/Web/CSS/Replaced_element">éléments remplacés anonymes</a>.</em></p> <pre class="brush: css no-line-numbers">/* Des mots-clés qui ne peuvent pas être mélangés avec d'autres valeurs */ @@ -60,11 +60,9 @@ content: unset; <dt>{{cssxref("<string>")}}</dt> <dd>Contenu sous forme de texte. Les caractères non-latins doivent être encodés avec leur séquence d'échappement Unicode (<code>\000A9</code> représentera par exemple le symbole ©).</dd> <dt>{{cssxref("<image>")}}</dt> - <dd>Une image (valeur de type {{cssxref("<image>")}}) de type {{cssxref("<url>")}} ou {{cssxref("<gradient>")}} ou une partie de la page web fournie par la fonction {{cssxref("element", "element()")}} et qui indique le contenu à afficher.</dd> - <dt><code>counter()</code> ou <code>counters()</code> (cf. {{cssxref("<counter>")}})</dt> - <dd>Un compteur CSS, généralement un nombre, qui peut être affiché grâce à la fonction {{cssxref("counter")}} or {{cssxref("counters")}}.</dd> - <dd>La première possède deux formes : 'counter(<var>name</var>)' ou 'counter(<var>name</var>, <var>style</var>)'. Le texte généré est la valeur du compteur le plus profond possédant un nom donné dans ce pseudo-élément ; il est formaté selon le style indiqué (<code>decimal</code> par défaut).</dd> - <dd>La seconde a également deux formes : <code>counters(<var>name</var>, <var>string</var>)</code> ou <code>counters(<var>name</var>, <var>string</var>, <var>style</var>)</code>. Le texte généré est la valeur de tous les compteurs d'un nom donné dans ce pseudo-élément, depuis le moins profond jusqu'au plus profond séparés par la chaîne définie. Les compteurs sont formatés selon le style indiqué (<code>decimal</code> par défaut). Voir <a href="/fr/docs/Web/CSS/counter">la section sur les compteurs automatiques</a> et sur la numérotation pour plus d'informations.</dd> + <dd>Une image (valeur de type {{cssxref("<image>")}}) de type {{cssxref("<url>")}} ou {{cssxref("<gradient>")}} ou une partie de la page web fournie par la fonction {{cssxref("element()", "element()")}} et qui indique le contenu à afficher.</dd> + <dt><code>counter()</code> ou <code>counters()</code> (cf. {{cssxref("CSS_Lists_and_Counters/Using_CSS_counters")}})</dt> + <dd>Un compteur CSS, généralement un nombre, qui peut être affiché grâce à la fonction {{cssxref("CSS_Lists_and_Counters/Using_CSS_counters")}} or {{cssxref("counters()")}}. La première possède deux formes : 'counter(<var>name</var>)' ou 'counter(<var>name</var>, <var>style</var>)'. Le texte généré est la valeur du compteur le plus profond possédant un nom donné dans ce pseudo-élément ; il est formaté selon le style indiqué (<code>decimal</code> par défaut). La seconde a également deux formes : <code>counters(<var>name</var>, <var>string</var>)</code> ou <code>counters(<var>name</var>, <var>string</var>, <var>style</var>)</code>. Le texte généré est la valeur de tous les compteurs d'un nom donné dans ce pseudo-élément, depuis le moins profond jusqu'au plus profond séparés par la chaîne définie. Les compteurs sont formatés selon le style indiqué (<code>decimal</code> par défaut). Voir <a href="/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">la section sur les compteurs automatiques</a> et sur la numérotation pour plus d'informations.</dd> <dt><code>attr(X)</code></dt> <dd>Renvoie la valeur de l'attribut X de l'élément comme une chaîne. S'il n'existe pas d'attribut X, une chaîne vide est renvoyée. La sensibilité à la casse du nom de l'attribut dépend du langage utilisé.</dd> <dt><code>open-quote</code> | <code>close-quote</code></dt> @@ -216,7 +214,7 @@ li { <h2 id="Accessibilité">Accessibilité</h2> -<p>Le contenu généré par CSS n'est pas inclus dans le <a href="/fr/docs/Web/API/Document_Object_Model/Introduction">DOM</a>. Pour cette raison, il ne fait pas partie de l'<a href="/fr/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">arbre d'accessibilité</a> et certaines technologies d'assistances ou certains navigateurs ne permettront pas d'annoncer ce contenu. Si ce contenu porte des informations essentielles à la compréhension de la page, il faut inclure ces informations de façon sémantique dans le document principal.</p> +<p>Le contenu généré par CSS n'est pas inclus dans le <a href="/fr/docs/Web/API/Document_Object_Model/Introduction">DOM</a>. Pour cette raison, il ne fait pas partie de l'<a href="/fr/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis">arbre d'accessibilité</a> et certaines technologies d'assistances ou certains navigateurs ne permettront pas d'annoncer ce contenu. Si ce contenu porte des informations essentielles à la compréhension de la page, il faut inclure ces informations de façon sémantique dans le document principal.</p> <ul> <li><a href="https://tink.uk/accessibility-support-for-css-generated-content/">La prise en charge relative à l'accessibilité pour les contenus générés par CSS generated content – Tink (en anglais)</a></li> diff --git a/files/fr/web/css/counter()/index.html b/files/fr/web/css/counter()/index.html index a5ca778b1b..073e209928 100644 --- a/files/fr/web/css/counter()/index.html +++ b/files/fr/web/css/counter()/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/counter() --- <div>{{CSSRef}}</div> -<p>La fonction CSS <code><strong>counter</strong></code><strong><code>()</code></strong> renvoie une chaîne de caractères qui représente la valeur courante du compteur nommé (dont le nom est passé en argument). Elle est généralement utilisée pour construire un <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> mais elle peut tout à fait être utilisée à n'importe quel endroit où une valeur {{cssxref("<string>")}} est attendue.</p> +<p>La fonction CSS <code><strong>counter</strong></code><strong><code>()</code></strong> renvoie une chaîne de caractères qui représente la valeur courante du compteur nommé (dont le nom est passé en argument). Elle est généralement utilisée pour construire un <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-élément</a> mais elle peut tout à fait être utilisée à n'importe quel endroit où une valeur {{cssxref("<string>")}} est attendue.</p> <pre class="notranslate">/* Usage simple */ counter(nomcompteur); @@ -18,12 +18,12 @@ counter(nomcompteur); /* Modifier le type d'affichage du compteur */ counter(nomcompteur, upper-roman)</pre> -<p>Un <a href="/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS">compteur</a> CSS n'a aucun effet visible en lui-même. C'est la fonction <code>counter()</code> (ainsi que <code>counters()</code>) qui permet d'utiliser la chaîne de caractère ou l'image résultante.</p> +<p>Un <a href="/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">compteur</a> CSS n'a aucun effet visible en lui-même. C'est la fonction <code>counter()</code> (ainsi que <code>counters()</code>) qui permet d'utiliser la chaîne de caractère ou l'image résultante.</p> -<div class="blockIndicator note"> -<p><strong>Note :</strong> La fonction <code>counter()</code> peut être utilisée avec n'importe quelle propriété CSS mais la prise en charge des propriétés autres que {{CSSxRef("content")}} reste expérimentale et la prise en charge du paramètre « type ou unité » est hétérogène.</p> +<div class="note"> +<p><strong>Note :</strong> La fonction <code>counter()</code> peut être utilisée avec n'importe quelle propriété CSS mais la prise en charge des propriétés autres que {{CSSxRef("content")}} reste expérimentale et la prise en charge du paramètre « type ou unité » est hétérogène.</p> -<p>Veillez à consulter <a href="#Browser_compatibility">le tableau de compatibilité des navigateurs</a> avant d'utiliser ces fonctionnalités en production.</p> +<p>Veillez à consulter <a href="#browser_compatibility">le tableau de compatibilité des navigateurs</a> avant d'utiliser ces fonctionnalités en production.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -33,8 +33,8 @@ counter(nomcompteur, upper-roman)</pre> <dl> <dt>{{cssxref("<custom-ident>")}}</dt> <dd>Un nom identifiant le compteur (sensible à la casse). C'est le même nom qui pourra être utilisé avec {{cssxref("counter-reset")}} et {{cssxref("counter-increment")}}. Le nom ne peut pas commencer avec deux tirets et ne peut pas être l'un des mots-clés <code>none</code>, <code>unset</code>, <code>initial</code> ou <code>inherit</code>.</dd> - <dt><code style="white-space: nowrap;"><counter-style></code></dt> - <dd>Un nom de style de compteur ou une fonction <code><a href="/fr/docs/Web/CSS/symbols">symbols()</a></code>. Le nom d'un style de compteur peut indiquer un compteur <a href="/fr/docs/Web/CSS/list-style-type#Valeurs">alphabétique, numérique, symbolique ou encore utilisant un système de numération asiatique ou éthiopien</a> ou un autre <a href="/fr/docs/Web/CSS/CSS_Counter_Styles">style de compteur prédéfini</a>. Si cette valeur n'est pas fournie, le style par défaut est décimal.</dd> + <dt><code><counter-style></code></dt> + <dd>Un nom de style de compteur ou une fonction <a href="/fr/docs/Web/CSS/symbols()"><code>symbols()</code></a>. Le nom d'un style de compteur peut indiquer un compteur <a href="/fr/docs/Web/CSS/list-style-type#valeurs">alphabétique, numérique, symbolique ou encore utilisant un système de numération asiatique ou éthiopien</a> ou un autre <a href="/fr/docs/Web/CSS/CSS_Counter_Styles">style de compteur prédéfini</a>. Si cette valeur n'est pas fournie, le style par défaut est décimal.</dd> <dt><code>none</code></dt> <dd>Représente la chaîne de caractère vide.</dd> </dl> @@ -49,7 +49,7 @@ counter(nomcompteur, upper-roman)</pre> <h4 id="HTML">HTML</h4> -<pre class="brush: html; notranslate"><ol> +<pre class="brush: html;"><ol> <li></li> <li></li> <li></li> @@ -57,7 +57,7 @@ counter(nomcompteur, upper-roman)</pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css; highlight[2] notranslate">ol { +<pre class="brush: css">ol { counter-reset: listCounter; } li { @@ -76,7 +76,7 @@ li::after { <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><ol> +<pre class="brush: html"><ol> <li></li> <li></li> <li></li> @@ -84,7 +84,7 @@ li::after { <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">ol { +<pre class="brush: css">ol { counter-reset: count; } @@ -132,9 +132,9 @@ li::after { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS">Utiliser les compteurs CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">Utiliser les compteurs CSS</a></li> <li>{{cssxref("counter-reset")}}</li> <li>{{cssxref("counter-increment")}}</li> <li>{{cssxref("@counter-style")}}</li> - <li>La fonction CSS <code><a href="/fr/docs/Web/CSS/counters">counters()</a></code></li> + <li>La fonction CSS <code><a href="/fr/docs/Web/CSS/counters()">counters()</a></code></li> </ul> diff --git a/files/fr/web/css/counter-increment/index.html b/files/fr/web/css/counter-increment/index.html index 9757170c1d..d9e0aa20db 100644 --- a/files/fr/web/css/counter-increment/index.html +++ b/files/fr/web/css/counter-increment/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/counter-increment <div>{{EmbedInteractiveExample("pages/css/counter-increment.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> La valeur du compteur peut être réinitialisée avec une valeur arbitraire grâce à la propriété {{cssxref("counter-reset")}}.</p> </div> diff --git a/files/fr/web/css/counter-reset/index.html b/files/fr/web/css/counter-reset/index.html index a36bb40929..1b46b41b63 100644 --- a/files/fr/web/css/counter-reset/index.html +++ b/files/fr/web/css/counter-reset/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/counter-reset <div>{{EmbedInteractiveExample("pages/css/counter-reset.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> Pour incrémenter ou décrémenter le compteur, on pourra utiliser la propriété CSS {{cssxref("counter-increment")}}.</p> </div> diff --git a/files/fr/web/css/counters()/index.html b/files/fr/web/css/counters()/index.html index d0ecac78bc..6f78f5f900 100644 --- a/files/fr/web/css/counters()/index.html +++ b/files/fr/web/css/counters()/index.html @@ -16,7 +16,7 @@ translation_of: Web/CSS/counters() <li><code>counters(<var>name</var>, <var>string</var>, <var>style</var>)</code></li> </ul> -<p>Cette fonction est généralement utilisée sur des <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-éléments</a> mais peut théoriquement être utilisée à tout endroit où une valeur <code><a href="/fr/docs/Web/CSS/string"><string></a></code> est attendue. Le texte généré est la concaténation des compteurs en commençant par les compteurs « parents » puis en ajoutant la valeurs des compteurs « fils ». Les compteurs sont affichés avec le style indiqué (par défaut, ce sera <code>decimal</code>).</p> +<p>Cette fonction est généralement utilisée sur des <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-éléments</a> mais peut théoriquement être utilisée à tout endroit où une valeur <code><a href="/fr/docs/Web/CSS/string"><string></a></code> est attendue. Le texte généré est la concaténation des compteurs en commençant par les compteurs « parents » puis en ajoutant la valeurs des compteurs « fils ». Les compteurs sont affichés avec le style indiqué (par défaut, ce sera <code>decimal</code>).</p> <pre class="notranslate">/* Utilisation simple - style decimal par défaut */ counters(countername, '-'); @@ -26,7 +26,7 @@ counters(countername, '.', upper-roman)</pre> <p>Un compteur n'est pas visible en tant que tel. Les fonctions <code>counters()</code> et <code><a href="/fr/docs/Web/CSS/counter_function">counter()</a></code> doivent être utilisées pour créer du contenu.</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Bien que la fonction <code>counters()</code> puisse être utilisée avec n'importe quelle propriété CSS, la prise en charge des propriétés autres que {{CSSxRef("content")}} reste experimentale.</p> <p>Avant d'utiliser cette fonctionnalité en production, référez vous au tableau de compatibilité ci-après.</p> @@ -39,8 +39,8 @@ counters(countername, '.', upper-roman)</pre> <dl> <dt>{{cssxref("<custom-ident>")}}</dt> <dd>Un nom identifiant les compteurs à utiliser. C'est le même nom qui pourra être utilisé avec les propriétés {{cssxref("counter-reset")}} et {{cssxref("counter-increment")}}. Le nom ne peut pas commencer par deux tirets et ne peut pas être <code>none</code>, <code>unset</code>, <code>initial</code> ou <code>inherit</code>.</dd> - <dt><code style="white-space: nowrap;"><counter-style></code></dt> - <dd>Un style de compteur (cf. <a href="/fr/docs/Web/CSS/list-style-type#Valeurs">les valeurs décrites pour <code>list-style-type</code></a>) ou une fonction <code><a href="/fr/docs/Web/CSS/symbols">symbols()</a></code>. En absence de valeur, le style utilisé sera <code>decimal</code>.</dd> + <dt><code><counter-style></code></dt> + <dd>Un style de compteur (cf. <a href="/fr/docs/Web/CSS/list-style-type#valeurs">les valeurs décrites pour <code>list-style-type</code></a>) ou une fonction <a href="/fr/docs/Web/CSS/symbols()"><code>symbols()</code></a>. En absence de valeur, le style utilisé sera <code>decimal</code>.</dd> <dt>{{cssxref("<string>")}}</dt> <dd>Une suite de caractères. Les caractères qui ne sont pas latins doivent être encodés avec leur séquence d'échappement Unicode. <code>\000A9</code> représentera par exemple le symbole copyright (©).</dd> <dt><code>none</code></dt> @@ -57,7 +57,7 @@ counters(countername, '.', upper-roman)</pre> <h4 id="HTML">HTML</h4> -<pre class="brush: html; notranslate"><ol> +<pre class="brush: html;"><ol> <li> <ol> <li></li> @@ -83,7 +83,7 @@ counters(countername, '.', upper-roman)</pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css; highlight[2] notranslate">ol { +<pre class="brush: css">ol { counter-reset: listCounter; } li { @@ -104,7 +104,7 @@ li::before { <h4 id="HTML_2">HTML</h4> -<pre class="brush: html; notranslate"><ol> +<pre class="brush: html;"><ol> <li> <ol> <li></li> @@ -130,7 +130,7 @@ li::before { <h4 id="CSS_2">CSS</h4> -<pre class="brush: css; highlight[2] notranslate">ol { +<pre class="brush: css">ol { counter-reset: count; } li { @@ -178,7 +178,7 @@ li::before { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS">Utiliser les compteurs CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">Utiliser les compteurs CSS</a></li> <li>{{cssxref("counter-reset")}}</li> <li>{{cssxref("counter-increment")}}</li> <li>{{cssxref("@counter-style")}}</li> diff --git a/files/fr/web/css/cross-fade()/index.html b/files/fr/web/css/cross-fade()/index.html index 454b03cc02..452ff95ab5 100644 --- a/files/fr/web/css/cross-fade()/index.html +++ b/files/fr/web/css/cross-fade()/index.html @@ -12,11 +12,11 @@ translation_of: Web/CSS/cross-fade() <p>La fonction CSS <strong><code>cross-fade()</code></strong> peut être utilisée afin de fusionner deux ou plusieurs images avec une transparence donnée. On peut l'utiliser pour de nombreuses manipulations d'image : teinter une image avec une couleur donnée ou mettre en avant une zone de l'image en combinant celle-ci avec un dégradé radial.</p> -<div class="blockIndicator warning"> -<p><strong>Attention !</strong> À l'heure actuelle (janvier 2019), la syntaxe décrite par la spécification et les syntaxes implémentées sont différentes. Nous commencerons ici par définir la syntaxe telle que définie par la spécification puis celle utilisée au sein des implémentations actuelles.</p> +<div class="warning"> +<p><strong>Attention :</strong> À l'heure actuelle (janvier 2019), la syntaxe décrite par la spécification et les syntaxes implémentées sont différentes. Nous commencerons ici par définir la syntaxe telle que définie par la spécification puis celle utilisée au sein des implémentations actuelles.</p> </div> -<h2 id="Syntaxe_spécification"><a id="Syntaxe" name="Syntaxe">Syntaxe (spécification)</a></h2> +<h2 id="Syntaxe_spécification">Syntaxe (spécification)</h2> <p>La fonction <code>cross-fade()</code> prend comme argument une liste d'images accompagnée d'un pourcentage qui définit la proportion de chaque image dans le « mélange » obtenu. La valeur en pourcentage ne doit pas être entourée de quotes, doit contenir le symbole « % » et être comprise entre 0% et 100%.</p> @@ -26,7 +26,7 @@ translation_of: Web/CSS/cross-fade() <p>Le pourcentage utilisé pour chaque image peut être considéré comme une valeur d'opacité. Un coefficient à 0% indiquera que l'image sera complètement transparente pour le mélange final tandis qu'un coefficient à 100% rendra l'image complètement opaque. Si un des pourcentages est absent, l'ensemble des pourcentages exprimés est sommé et la différence avec 100% est répartie également entre toutes les images qui n'ont pas de coefficient.</p> -<pre class="brush: css notranslate">cross-fade(url(white.png) 0%, url(black.png) 100%); /* complètement noire */ +<pre class="brush: css">cross-fade(url(white.png) 0%, url(black.png) 100%); /* complètement noire */ cross-fade(url(white.png) 25%, url(black.png) 75%); /* 25% blanche, 75% noire*/ cross-fade(url(white.png) 50%, url(black.png) 50%); /* 50% blanche, 50% noire */ cross-fade(url(white.png) 75%, url(black.png) 25%); /* 75% blanche, 25% noire */ @@ -38,7 +38,7 @@ cross-fade(url(green.png) 75%, url(red.png) 75%); /* image avec du rouge et <p>Les lignes précédentes peuvent ainsi s'écrire également :</p> -<pre class="brush: css notranslate">cross-fade(url(white.png) 0%, url(black.png)); /* complètement noire */ +<pre class="brush: css">cross-fade(url(white.png) 0%, url(black.png)); /* complètement noire */ cross-fade(url(white.png) 25%, url(black.png)); /* 25% blanche, 75% noire*/ cross-fade(url(white.png), url(black.png)); /* 50% blanche, 50% noire */ cross-fade(url(white.png) 75%, url(black.png)); /* 75% blanche, 25% noire */ @@ -50,22 +50,17 @@ cross-fade(url(green.png) 75%, url(red.png) 75%); /* image avec du rouge et ver <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> -<div class="hidden">La syntaxe formelle décrite sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à proposer une<em>pull request</em> sur <a href="https://github.com/mdn/data">https://github.com/mdn/data</a>.</div> - -{{csssyntax}} - -<ul> -</ul> +<p>{{csssyntax}}</p> <h2 id="Exemples">Exemples</h2> <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div id="div"></div></pre> +<pre class="brush: html"><div id="div"></div></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[4-6] notranslate">#div { +<pre class="brush: css">#div { width: 300px; height: 300px; background-image: cross-fade( @@ -79,11 +74,11 @@ cross-fade(url(green.png) 75%, url(red.png) 75%); /* image avec du rouge et ver <h2 id="Ancienne_syntaxe_implémentations">Ancienne syntaxe (implémentations)</h2> -<pre class="syntaxbox notranslate">cross-fade( <image, <image>, <percentage> )</pre> +<pre class="syntaxbox">cross-fade( <image, <image>, <percentage> )</pre> -<p>La spécification de la fonction <code>cross-fade()</code> permet d'avoir plusieurs images et d'associer un coefficient de transparence à chacune des images. Ce n'a pas toujours été le cas et <a href="#Syntaxe">la syntaxe originale</a>, implémentée par certains navigateurs, ne permet d'avoir que deux images pour lesquelles la somme des coefficients doit être 100%. Cette syntaxe est prise en charge par Safari et préfixée avec <code>-webkit-</code> pour Chrome, Opera et les autres navigateurs basés sur Blink.</p> +<p>La spécification de la fonction <code>cross-fade()</code> permet d'avoir plusieurs images et d'associer un coefficient de transparence à chacune des images. Ce n'a pas toujours été le cas et <a href="#syntaxe">la syntaxe originale</a>, implémentée par certains navigateurs, ne permet d'avoir que deux images pour lesquelles la somme des coefficients doit être 100%. Cette syntaxe est prise en charge par Safari et préfixée avec <code>-webkit-</code> pour Chrome, Opera et les autres navigateurs basés sur Blink.</p> -<pre class="brush: css notranslate">cross-fade(url(white.png), url(black.png), 0%); /* complètement noire */ +<pre class="brush: css">cross-fade(url(white.png), url(black.png), 0%); /* complètement noire */ cross-fade(url(white.png), url(black.png), 25%); /* 25% blanche, 75% noire */ cross-fade(url(white.png), url(black.png), 50%); /* 50% blanche, 50% noire */ cross-fade(url(white.png), url(black.png), 75%); /* 75% blanche, 25% noire */ @@ -98,7 +93,7 @@ cross-fade(url(white.png), url(black.png), 100%); /* complètement blanche */ <h4 id="CSS_2">CSS</h4> -<pre class="brush: css; highlight[4-11] notranslate">.crossfade { +<pre class="brush: css">.crossfade { width: 300px; height: 300px; background-image: -webkit-cross-fade( @@ -113,7 +108,7 @@ cross-fade(url(white.png), url(black.png), 100%); /* complètement blanche */ <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><div class="crossfade"></div></pre> +<pre class="brush: html"><div class="crossfade"></div></pre> <h4 id="Résultat_2">Résultat</h4> @@ -158,7 +153,7 @@ cross-fade(url(white.png), url(black.png), 100%); /* complètement blanche */ <li>{{cssxref("url")}}</li> <li>{{cssxref("_image", "image()")}}</li> <li>{{cssxref("image-set")}}</li> - <li>{{cssxref("element")}}</li> - <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS" title="Using gradients">Utiliser les dégradés CSS</a></li> + <li>{{cssxref("element()")}}</li> + <li><a href="/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients" title="Using gradients">Utiliser les dégradés CSS</a></li> <li>Fonctions de création de dégradés : {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}, {{cssxref("conic-gradient", "conic-gradient()")}},</li> </ul> diff --git a/files/fr/web/css/css_animations/detecting_css_animation_support/index.html b/files/fr/web/css/css_animations/detecting_css_animation_support/index.html index 0824678ff8..7f33e6daf9 100644 --- a/files/fr/web/css/css_animations/detecting_css_animation_support/index.html +++ b/files/fr/web/css/css_animations/detecting_css_animation_support/index.html @@ -11,7 +11,7 @@ original_slug: Web/CSS/Animations_CSS/Détecter_la_prise_en_charge_des_animation <div>{{CSSRef}}{{obsolete_header}}</div> <div class="warning"> -<p><strong>Attention !</strong> Les techniques décrites dans cet article sont obsolètes et peuvent être remplacées par l'utilisation de {{cssxref("@supports")}}.</p> +<p><strong>Attention :</strong> Les techniques décrites dans cet article sont obsolètes et peuvent être remplacées par l'utilisation de {{cssxref("@supports")}}.</p> </div> <p>Avec les animations CSS, on peut ajouter des animations sur du contenu, uniquement en utilisant CSS. Toutefois, cette fonctionnalité n'est parfois pas disponible et on souhaiterait alors pouvoir gérer ce cas et appliquer un effet similaire avec JavaScript. Cet article, <a href="https://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/">basé sur ce billet de Christian Heilmann</a>, illustre une technique pour détecter la prise en charge des animations CSS.</p> @@ -96,5 +96,5 @@ if( animation === false ) { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">Les animations CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Les animations CSS</a></li> </ul> diff --git a/files/fr/web/css/css_animations/index.html b/files/fr/web/css/css_animations/index.html index 393e33754d..a0db694124 100644 --- a/files/fr/web/css/css_animations/index.html +++ b/files/fr/web/css/css_animations/index.html @@ -15,7 +15,6 @@ original_slug: Web/CSS/Animations_CSS <h3 id="Propriétés_CSS">Propriétés CSS</h3> -<div class="index"> <ul> <li>{{cssxref("animation")}}</li> <li>{{cssxref("animation-delay")}}</li> @@ -27,15 +26,12 @@ original_slug: Web/CSS/Animations_CSS <li>{{cssxref("animation-play-state")}}</li> <li>{{cssxref("animation-timing-function")}}</li> </ul> -</div> <h3 id="Règles_CSS">Règles @ CSS</h3> -<div class="index"> <ul> <li>{{cssxref("@keyframes")}}</li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/css_animations/tips/index.html b/files/fr/web/css/css_animations/tips/index.html index adb261195e..011e1c6e3a 100644 --- a/files/fr/web/css/css_animations/tips/index.html +++ b/files/fr/web/css/css_animations/tips/index.html @@ -22,8 +22,7 @@ original_slug: Web/CSS/Animations_CSS/Conseils <p>Tout d'abord, on définit l'animation avec des règles CSS (certaines règles superflues sont masquées ici à des fins de concision).</p> -<div class="hidden"> -<pre class="brush: css">.runButton { +<pre class="brush: css hidden">.runButton { cursor: pointer; width: 300px; border: 1px solid black; @@ -36,7 +35,6 @@ original_slug: Web/CSS/Animations_CSS/Conseils background-color: darkgreen; font: 14px "Open Sans", "Arial", sans-serif; }</pre> -</div> <pre class="brush: css">@keyframes colorchange { 0% { background: yellow } diff --git a/files/fr/web/css/css_animations/using_css_animations/index.html b/files/fr/web/css/css_animations/using_css_animations/index.html index ab83e1e420..2c0364c3f4 100644 --- a/files/fr/web/css/css_animations/using_css_animations/index.html +++ b/files/fr/web/css/css_animations/using_css_animations/index.html @@ -56,7 +56,9 @@ original_slug: Web/CSS/Animations_CSS/Utiliser_les_animations_CSS <h2 id="Exemples">Exemples</h2> -<div class="note"><strong>Note :</strong> Les exemples ci-après n'utilisent pas la version préfixée des propriétés liées aux animations. Il est possible que d'anciens navigateurs (antérieurs à 2017) aient besoin de ces préfixes pour fonctionner auquel cas l'exemple « <em>live</em> » ne fonctionnera pas.</div> +<div class="note"> + <p><strong>Note :</strong> Les exemples ci-après n'utilisent pas la version préfixée des propriétés liées aux animations. Il est possible que d'anciens navigateurs (antérieurs à 2017) aient besoin de ces préfixes pour fonctionner auquel cas l'exemple « <em>live</em> » ne fonctionnera pas.</p> +</div> <h3 id="Utiliser_une_animation_pour_que_le_texte_traverse_la_fenêtre_du_navigateur">Utiliser une animation pour que le texte traverse la fenêtre du navigateur</h3> @@ -231,7 +233,7 @@ her in a languid, sleepy voice.</p> }</pre> <div class="note"> -<p><strong>Note </strong>: Pour plus de détails, vous pouvez consulter la page de référence sur la propriété {{cssxref("animation")}}.</p> +<p><strong>Note :</strong> Pour plus de détails, vous pouvez consulter la page de référence sur la propriété {{cssxref("animation")}}.</p> </div> <h3 id="Utiliser_plusieurs_valeurs_pour_différentes_animations">Utiliser plusieurs valeurs pour différentes animations</h3> @@ -358,7 +360,7 @@ element.className = "slidein"; <ul> <li>{{domxref("AnimationEvent")}}</li> - <li><a href="/fr/docs/Web/CSS/Animations_CSS/Détecter_la_prise_en_charge_des_animations_CSS">Détecter la prise en charge des animations CSS</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">Manipuler les transitions CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support">Détecter la prise en charge des animations CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">Manipuler les transitions CSS</a></li> <li><a href="https://www.cssdebutant.com">CSS</a></li> </ul> diff --git a/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.html b/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.html index 9aa3cd49f6..c598a24870 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.html +++ b/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.html @@ -9,12 +9,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator --- <p>Cet outil peut être utilisé afin de générer des valeurs pour la propriété {{cssxref("border-image")}}.</p> -<div class="hidden"> -<h2 id="Border_Image_Generator" name="Border_Image_Generator">Générateur border-image</h2> - -<h3 id="Contenu_HTML">Contenu HTML</h3> - -<pre class="brush: html"> <div id="container"> +<pre class="brush: html hidden"> <div id="container"> <div id="gallery"> <div id="image-gallery"> @@ -152,9 +147,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator </div> </div></pre> -<h3 id="CSS_Content">CSS Content</h3> - -<pre class="brush: css">/* GRID OF TWELVE +<pre class="brush: css hidden">/* GRID OF TWELVE * ========================================================================== */ .span_12 { @@ -1217,9 +1210,7 @@ body[data-move='Y'] { </pre> -<h3 id="JavaScript_Content">JavaScript Content</h3> - -<pre class="brush: js">'use strict'; +<pre class="brush: js hidden">'use strict'; /** * UI-SlidersManager @@ -2622,6 +2613,5 @@ var BorderImage = (function BorderImage() { })(); </pre> -</div> <p>{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}}</p> diff --git a/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.html b/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.html index 993940bcdc..0cb8e25181 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.html +++ b/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.html @@ -9,12 +9,9 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator --- <p>Cet outil peut être utilisé afin de générer du code pour la propriété {{cssxref("border-radius")}}.</p> -<div class="hidden"> -<h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2> +<h2>border-radius-generator</h2> -<h3 id="Contenu_HTML">Contenu HTML</h3> - -<pre class="brush: html"><div id="container"> +<pre class="brush: html hidden"><div id="container"> <div class="group section"> <div id="preview" class="col span_12"> <div id="subject"> @@ -103,9 +100,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator </div> </pre> -<h3 id="Contenu_CSS">Contenu CSS</h3> - -<pre class="brush: css">/* GRID OF TEN +<pre class="brush: css hidden">/* GRID OF TEN * ========================================================================== */ .span_12 { @@ -818,9 +813,7 @@ body { </pre> -<h3 id="Contenu_JavaScript">Contenu JavaScript</h3> - -<pre class="brush: js"><code class="language-js">'use strict'; +<pre class="brush: js hidden"><code class="language-js">'use strict'; /** @@ -1596,6 +1589,5 @@ var BorderRadius = (function BorderRadius() { </code></pre> -</div> <p>{{EmbedLiveSample('border-radius-generator', '100%', '800px', '')}}</p> diff --git a/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html b/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html index 78e9288be3..bc0470ae50 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html +++ b/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html @@ -9,12 +9,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator --- <p>Cet outil visuel permet de construire des effets d'ombre et de générer du code pour la propriété {{cssxref("box-shadow")}} qui pourra être ajouté à votre feuille de style.</p> -<div class="hidden"> -<h2 id="box-shadow_generator" name="box-shadow_generator">box-shadow generator</h2> - -<h3 id="HTML_Content">HTML Content</h3> - -<pre class="brush: html"><div id="container"> +<pre class="brush: html hidden"><div id="container"> <div class="group section"> <div id="layer_manager"> <div class="group section"> @@ -213,9 +208,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator </div> </pre> -<h3 id="CSS_Content">CSS Content</h3> - -<pre class="brush: css">/* GRID OF TWELVE +<pre class="brush: css hidden">/* GRID OF TWELVE * ========================================================================== */ .span_12 { @@ -1175,9 +1168,7 @@ body { </pre> -<h3 id="JavaScript_Content">JavaScript Content</h3> - -<pre class="brush: js"><code class="language-js"> +<pre class="brush: js hidden"><code class="language-js"> 'use strict'; @@ -2877,7 +2868,6 @@ var BoxShadow = (function BoxShadow() { </code></pre> -</div> <div>{{EmbedLiveSample('box-shadow_generator', '100%', '1100px', '')}}</div> diff --git a/files/fr/web/css/css_backgrounds_and_borders/index.html b/files/fr/web/css/css_backgrounds_and_borders/index.html index 3180021066..bac2b33946 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/index.html +++ b/files/fr/web/css/css_backgrounds_and_borders/index.html @@ -16,7 +16,6 @@ translation_of: Web/CSS/CSS_Backgrounds_and_Borders <h3 id="Propriétés_CSS">Propriétés CSS</h3> -<div class="index"> <ul> <li>{{cssxref("background")}}</li> <li>{{cssxref("background-attachment")}}</li> @@ -63,7 +62,6 @@ translation_of: Web/CSS/CSS_Backgrounds_and_Borders <li>{{cssxref("border-width")}}</li> <li>{{cssxref("box-shadow")}}</li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html index 14ce7bad58..6a92d4d7e5 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html +++ b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html @@ -17,11 +17,11 @@ original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images <p>Prenons une image de grande taille (par exemple l'ancien logo de Firefox en 2485x2340px). On souhaite la carreler en quatre copies de 300x300 px, comme dans l'image suivante.</p> -<p><img alt="" src="https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png" style="height: 636px; width: 636px;"></p> +<p><img alt="" src="logo-quantum.9c5e96634f92.png"></p> <p>On peut utiliser la feuille de style CSS suivante pour obtenir l'effet voulu :</p> -<pre class="brush: css; highlight:[8]">.square { +<pre class="brush: css">.square { width: 300px; height: 300px; background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); @@ -43,15 +43,15 @@ original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images <p>L'image suivante montre le résultat obtenu.</p> -<p><img alt="Logo de Firefox étité" src="https://mdn.mozillademos.org/files/16630/s.codepen.io_Richienb_debug_LoNxGp_PNkvYGvgGyXA.png" style="height: 636px; width: 636px;"></p> +<p><img alt="Logo de Firefox étité" src="s.codepen.io_richienb_debug_lonxgp_pnkvygvggyxa.png"></p> <h2 id="Agrandir_une_image">Agrandir une image</h2> <p>On peut agrandir une image en arrière-plan. À l'image suivante, une favicône de 32x32 px est agrandie à 300x300 px.</p> -<p><img alt="Logo MDN à l'échelle" src="https://mdn.mozillademos.org/files/16631/favicon57.de33179910ae.1.1.png" style="height: 636px; width: 636px;"></p> +<p><img alt="Logo MDN à l'échelle" src="favicon57.de33179910ae.1.1.png"></p> -<pre class="brush: css; highlight:[5]">.square2 { +<pre class="brush: css">.square2 { width: 300px; height: 300px; background-image: url(favicon.png); @@ -74,15 +74,13 @@ original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images <p>Essayez de redimensionner la fenêtre de votre navigateur afin de voir la valeur <code>contain</code> en action (Votre navigateur doit supporter la mise à l'échelle d'images d'arrière-plan).</p> -<figure> <p>{{EmbedLiveSample("contain", "100%", "220")}}</p> -</figure> <pre class="brush:html"><div class="bgSizeContain"> <p>Redimensionnez la fenêtre de votre navigateur.</p> </div></pre> -<pre class="brush:css;highlight:[4]">.bgSizeContain { +<pre class="brush:css">.bgSizeContain { height: 200px; background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: contain; @@ -102,7 +100,7 @@ original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images <p>Redimensionnez la fenêtre de votre navigateur.</p> </div></pre> -<pre class="brush:css;highlight:[4]">.bgSizeCover { +<pre class="brush:css">.bgSizeCover { height: 200px; background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: cover; diff --git a/files/fr/web/css/css_basic_user_interface/index.html b/files/fr/web/css/css_basic_user_interface/index.html index 2e2abcc1f1..b8e3ba66e4 100644 --- a/files/fr/web/css/css_basic_user_interface/index.html +++ b/files/fr/web/css/css_basic_user_interface/index.html @@ -17,7 +17,6 @@ translation_of: Web/CSS/CSS_Basic_User_Interface <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{CSSxRef("appearance")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("box-sizing")}}</li> @@ -36,7 +35,6 @@ translation_of: Web/CSS/CSS_Basic_User_Interface <li>{{CSSxRef("text-overflow")}}</li> <li>{{CSSxRef("user-select")}} {{Experimental_Inline}}</li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html index c1b95b6eb2..d9cfe6891d 100644 --- a/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html +++ b/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -16,7 +16,7 @@ original_slug: Web/CSS/CSS_Basic_User_Interface/Utilisation_d_URL_pour_la_propri <p>La syntaxe de base (CSS 2.1) pour cette propriété est :</p> -<pre class="syntaxbox">{{CSSxRef("cursor")}}: <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">[</a> {{CSSxRef("<url>")}} , <a href="/fr/docs/Web/CSS/Syntaxe_de_définition_des_valeurs">]</a><a href="/fr/docs/Web/CSS/Syntaxe_de_définition_des_valeurs">*</a> {{CSSxRef("cursor", "<var><keyword></var>", "#Valeurs")}}</pre> +<pre class="syntaxbox">{{CSSxRef("cursor")}}: <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets">[</a> {{CSSxRef("<url>")}} , <a href="/fr/docs/Web/CSS/Value_definition_syntax">]</a><a href="/fr/docs/Web/CSS/Value_definition_syntax">*</a> {{CSSxRef("cursor", "<var><keyword></var>", "#Valeurs")}}</pre> <p>Ceci signifie que zéro URL ou plus peuvent être définies en étant séparées par des virgules et doivent être suivies par un des mots-clés comme <code>auto</code> ou <code>pointer</code>.</p> @@ -27,9 +27,9 @@ original_slug: Web/CSS/CSS_Basic_User_Interface/Utilisation_d_URL_pour_la_propri <p>En utilisant cette règle, le moteur essaiera d'abord de charger <code>toto.cur</code>. Si ce fichier n'existe pas ou si, pour une autre raison, l'URL n'est pas valable, ce sera celle de <code>truc.gif</code> qui sera essayée. Si cette valeur ne peut pas être utilisée non plus, le curseur correspondant à la valeur <code>auto</code> sera utilisé.</p> -<p>Le support de la <a class="external" href="https://www.w3.org/TR/css3-ui/#cursor">syntaxe</a> CSS3 pour les valeurs du curseur a été ajoutée à partir de Firefox 1.5.</p> +<p>Le support de la <a href="https://www.w3.org/TR/css3-ui/#cursor">syntaxe</a> CSS3 pour les valeurs du curseur a été ajoutée à partir de Firefox 1.5.</p> -<pre class="syntaxbox">{{CSSxRef("cursor")}}: <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">[</a> {{CSSxRef("<uri>")}} <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">[</a> <x> <y> <a href="/fr/docs/Web/CSS/Syntaxe_de_définition_des_valeurs">]</a><a href="/fr/docs/Web/CSS/Syntaxe_de_définition_des_valeurs">?</a> , <a href="/fr/docs/Web/CSS/Syntaxe_de_définition_des_valeurs">]</a><a href="/fr/docs/Web/CSS/Syntaxe_de_définition_des_valeurs">*</a> {{CSSxRef("cursor", "<var><keyword></var>", "#Valeurs")}} +<pre class="syntaxbox">{{CSSxRef("cursor")}}: <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets">[</a> {{CSSxRef("<uri>")}} <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets">[</a> <x> <y> <a href="/fr/docs/Web/CSS/Value_definition_syntax">]</a><a href="/fr/docs/Web/CSS/Value_definition_syntax">?</a> , <a href="/fr/docs/Web/CSS/Value_definition_syntax">]</a><a href="/fr/docs/Web/CSS/Value_definition_syntax">*</a> {{CSSxRef("cursor", "<var><keyword></var>", "#Valeurs")}} </pre> <p>Cette syntaxe permet d'indiquer les coordonnées des points chauds du curseur qui seront maintenues aux frontières de l'image du curseur. Si aucun n'est indiqué, les coordonnées du point chaud sont lus à partir du fichier lui-même (pour les fichier CUR et XBM) ou sont réglés au coin supérieur gauche de l'image. Un exemple de la syntaxe CSS3 est:</p> diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html index 9487c666d5..f7fc54380d 100644 --- a/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html @@ -9,7 +9,7 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_bloc_abs --- <div>{{CSSRef}}</div> -<p class="summary">Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes dans une disposition en bloc, y compris pour les éléments flottants, les éléments positionnés et les tableaux. Cette page détaille les aspects spécifiques relatifs à l'alignement et à la disposition en bloc. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">la page principale sur cette spécification</a>.</p> +<p>Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes dans une disposition en bloc, y compris pour les éléments flottants, les éléments positionnés et les tableaux. Cette page détaille les aspects spécifiques relatifs à l'alignement et à la disposition en bloc. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">la page principale sur cette spécification</a>.</p> <div class="note"> <p><strong>Note :</strong> À l'heure où cet article est écrit (juin 2018), il n'y a pas de réelle prise en charge des propriétés d'alignement pour la disposition en bloc. Ce document détaille les intentions de la spécification dans un souci d'exhaustivité mais il est probable que des modifications soient apportées au fur et à mesure de l'évolution de la spécification et de l'implémentation par les navigateurs.</p> diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html index f644790b67..2eb9626f5a 100644 --- a/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox --- <div>{{CSSRef}}</div> -<p class="summary">Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec les boîtes flexibles (<em>flexbox</em>). Cette page détaille les aspects spécifiques relatifs à l'alignement et aux boîtes flexibles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">la page principale sur cette spécification</a>.</p> +<p>Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec les boîtes flexibles (<em>flexbox</em>). Cette page détaille les aspects spécifiques relatifs à l'alignement et aux boîtes flexibles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">la page principale sur cette spécification</a>.</p> <h2 id="Exemple_simple">Exemple simple</h2> @@ -81,7 +81,6 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox <h3 id="Propriétés_CSS">Propriétés CSS</h3> -<div class="index"> <ul> <li>{{cssxref("justify-content")}}</li> <li>{{cssxref("align-content")}}</li> @@ -94,16 +93,13 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox <li>{{cssxref("column-gap")}}</li> <li>{{cssxref("gap")}}</li> </ul> -</div> <h3 id="Termes_du_glossaire">Termes du glossaire</h3> -<div class="index"> <ul> <li><a href="/fr/docs/Glossaire/Axe_transversal">Axe secondaire</a></li> <li><a href="/fr/docs/Glossaire/Axe_principal">Axe principal</a></li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html index 7efe8c5be7..8e6f9623b5 100644 --- a/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html @@ -11,7 +11,7 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille --- <div>{{CSSRef}}</div> -<p class="summary">Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">les grilles CSS</a>. Cette page détaille les aspects spécifiques relatifs à l'alignement et aux grilles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">la page principale sur cette spécification</a>.</p> +<p>Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">les grilles CSS</a>. Cette page détaille les aspects spécifiques relatifs à l'alignement et aux grilles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">la page principale sur cette spécification</a>.</p> <h2 id="Exemple_simple">Exemple simple</h2> @@ -25,7 +25,7 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille <p>L'axe en ligne correspond à l'axe selon lequel les mots d'une phrase sont écrits pour le mode d'écriture utilisé. Ainsi, pour une langue écrite horizontalement (comme le français ou l'arabe), l'axe en ligne sera horizontal. Pour les modes d'écriture verticaux, cet axe sera vertica.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15962/Inline_Axis.png" style="height: 306px; width: 940px;"></p> +<p><img alt="" src="inline_axis.png"></p> <p>Pour aligner des éléments selon l'axe en ligne, on utilisera les propriétés commençant par <code>justify-</code> : {{cssxref("justify-content")}}, {{cssxref("justify-items")}} et {{cssxref("justify-self")}}.</p> @@ -33,7 +33,7 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille <p>Pour aligner des éléments sur l'axe de bloc, on utilisera les propriétés commençant par <code>align-</code> : {{cssxref("align-content")}}, {{cssxref("align-items")}} et {{cssxref("align-self")}}.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15961/Block_Axis.png" style="height: 306px; width: 940px;"></p> +<p><img alt="" src="block_axis.png"></p> <h2 id="Alignement_individuel">Alignement individuel</h2> @@ -66,12 +66,12 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille <li>{{cssxref("row-gap")}}</li> <li>{{cssxref("column-gap")}}</li> <li>{{cssxref("gap")}}</li> - <li>{{cssxref("grid-row-gap")}}</li> + <li>{{cssxref("row-gap")}}</li> <li>{{cssxref("grid-column-gap")}}</li> - <li>{{cssxref("grid-gap")}}</li> + <li>{{cssxref("gap")}}</li> </ul> -<p>La spécification sur les grilles contenaient initialement les définitions des propriétés {{cssxref("grid-row-gap")}}, {{cssxref("grid-column-gap")}} et {{cssxref("grid-gap")}}. Les définitions de ces propriétés ont depuis été déplacées dans le module de spécification <em>Box Alignment</em> et ont respectivement été renommées en {{cssxref("row-gap")}}, {{cssxref("column-gap")}} et {{cssxref("gap")}}. Ainsi, elles peuvent être utilisées pour d'autres méthodes de disposition où les gouttières sont pertinentes.</p> +<p>La spécification sur les grilles contenaient initialement les définitions des propriétés {{cssxref("row-gap")}}, {{cssxref("grid-column-gap")}} et {{cssxref("gap")}}. Les définitions de ces propriétés ont depuis été déplacées dans le module de spécification <em>Box Alignment</em> et ont respectivement été renommées en {{cssxref("row-gap")}}, {{cssxref("column-gap")}} et {{cssxref("gap")}}. Ainsi, elles peuvent être utilisées pour d'autres méthodes de disposition où les gouttières sont pertinentes.</p> <p>À l'heure actuelle (juin 2018), seul Microsoft Edge prend en charge les versions non-préfixées pour ces propriétés. Il vaut donc mieux utiliser les deux versions (avec puis sans préfixe <code>grid-</code>) afin d'assurer une meilleure compatibilité.</p> @@ -79,7 +79,6 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille <h3 id="Propriétés_CSS">Propriétés CSS</h3> -<div class="index"> <ul> <li>{{cssxref("justify-content")}}</li> <li>{{cssxref("align-content")}}</li> @@ -94,21 +93,18 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille <li>{{cssxref("column-gap")}}</li> <li>{{cssxref("gap")}}</li> </ul> -</div> <h3 id="Termes_du_glossaire">Termes du glossaire</h3> -<div class="index"> <ul> - <li><a href="/fr/docs/Glossaire/Axe_transversal">Axe secondaire</a></li> - <li><a href="/fr/docs/Glossaire/Axe_principal">Axe principal</a></li> + <li><a href="/fr/docs/Glossary/Cross_Axis">Axe secondaire</a></li> + <li><a href="/fr/docs/Glossary/Main_Axis">Axe principal</a></li> </ul> -</div> <h2 id="Guides">Guides</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner les boîtes dans une disposition en grille</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Aligner les boîtes dans une disposition en grille</a></li> </ul> <h2 id="Ressources_externes">Ressources externes</h2> diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html index 81fa6692ae..f6195db8dc 100644 --- a/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html @@ -9,7 +9,7 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_colonnes --- <div>{{CSSRef}}</div> -<p class="summary">Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec <a href="/fr/docs/Web/CSS/Colonnes_CSS">une disposition multi-colonnes</a>. Cette page détaille les aspects spécifiques relatifs à l'alignement et au module <em>Multi-Column Layout</em>. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">la page principale sur cette spécification</a>.</p> +<p>Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec <a href="/fr/docs/Web/CSS/Colonnes_CSS">une disposition multi-colonnes</a>. Cette page détaille les aspects spécifiques relatifs à l'alignement et au module <em>Multi-Column Layout</em>. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">la page principale sur cette spécification</a>.</p> <p>Pour une disposition en colonne, le conteneur d'alignement est le conteneur de colonnes. Le sujet d'alignement correspond à la boîte de colonne. Les propriétés qui s'appliquent pour ce type de disposition sont détaillées ci-après.</p> @@ -33,20 +33,16 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_colonnes <h3 id="Propriétés_CSS">Propriétés CSS</h3> -<div class="index"> <ul> <li>{{cssxref("justify-content")}}</li> <li>{{cssxref("align-content")}}</li> <li>{{cssxref("column-gap")}}</li> </ul> -</div> <h3 id="Termes_du_glossaire">Termes du glossaire</h3> -<div class="index"> <ul> <li><a href="/fr/docs/Glossary/Alignment_Subject">Sujet d'alignement</a></li> <li><a href="/fr/docs/Glossary/Alignment_Container">Conteneur d'alignement</a></li> <li><a href="/fr/docs/Glossary/Fallback_Alignment">Alignement de recours</a></li> </ul> -</div> diff --git a/files/fr/web/css/css_box_alignment/index.html b/files/fr/web/css/css_box_alignment/index.html index e0787aca03..18feaec140 100644 --- a/files/fr/web/css/css_box_alignment/index.html +++ b/files/fr/web/css/css_box_alignment/index.html @@ -9,21 +9,21 @@ translation_of: Web/CSS/CSS_Box_Alignment --- <div>{{CSSRef}}</div> -<p class="summary">Le module de spécification <em>CSS Box Alignment</em> (alignement des boîtes en CSS) décrit les fonctionnalités relatives à l'alignement des boîtes pour les différents modes de disposition CSS : disposition en bloc, en tableau, disposition flexible et disposition en grille. L'objectif de ce module est d'obtenir des méthodes d'alignement cohérentes pour tout CSS. Dans ce guide, nous verrons les différents concepts utilisés par cette spécification.</p> +<p>Le module de spécification <em>CSS Box Alignment</em> (alignement des boîtes en CSS) décrit les fonctionnalités relatives à l'alignement des boîtes pour les différents modes de disposition CSS : disposition en bloc, en tableau, disposition flexible et disposition en grille. L'objectif de ce module est d'obtenir des méthodes d'alignement cohérentes pour tout CSS. Dans ce guide, nous verrons les différents concepts utilisés par cette spécification.</p> <div class="note"> -<p><strong>Note : </strong>La documentation relative à chaque méthode de disposition explicitera comment le module d'alignement est appliqué pour cette méthode.</p> +<p><strong>Note :</strong> La documentation relative à chaque méthode de disposition explicitera comment le module d'alignement est appliqué pour cette méthode.</p> </div> <h2 id="Anciennes_méthodes_d'alignement">Anciennes méthodes d'alignement</h2> <p>Par le passé, CSS disposait de peu d'outils pour l'alignement. Le texte pouvait être aligné grâce à {{cssxref("text-align")}}, les blocs pouvaient être centrés avec des marges ({{cssxref("margin")}}) automatique et les tableaux ou éléments en affichage <em>inline-block</em> pouvaient tirer parti de {{cssxref("vertical-align")}}. Désormais, l'alignement du texte est couvert par les modules <a href="https://www.w3.org/TR/css-inline-3/">Inline Layout</a> et <a href="https://www.w3.org/TR/css-text-3/">CSS Text</a> et, pour la première fois, avec le module <em>Box Alignment</em>, on dispose d'outils complets pour l'alignement vertical et horizontal.</p> -<p>Si vous connaissez déjà <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS">les boîtes flexibles (<em>flexbox</em>)</a>, vous reconnaitrez certaines propriétés faisant partie de la spécification de niveau 1 pour Flexbox. Toutefois, la spécification indique que la spécification <em>Box Alignment</em> est prioritaire car elle peut décrire certaines fonctionnalités supplémentaires.</p> +<p>Si vous connaissez déjà <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">les boîtes flexibles (<em>flexbox</em>)</a>, vous reconnaitrez certaines propriétés faisant partie de la spécification de niveau 1 pour Flexbox. Toutefois, la spécification indique que la spécification <em>Box Alignment</em> est prioritaire car elle peut décrire certaines fonctionnalités supplémentaires.</p> <h2 id="Exemples_simples">Exemples simples</h2> -<p>Dans les exemples suivants, nous allons voir comment certaines des propriétés d'alignement peuvent être appliquées sur des dispositions <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">en grille</a> ou utilisant <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS">les boîtes flexibles</a>.</p> +<p>Dans les exemples suivants, nous allons voir comment certaines des propriétés d'alignement peuvent être appliquées sur des dispositions <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">en grille</a> ou utilisant <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">les boîtes flexibles</a>.</p> <h3 id="Alignement_pour_une_disposition_en_grille">Alignement pour une disposition en grille</h3> @@ -49,7 +49,7 @@ translation_of: Web/CSS/CSS_Box_Alignment <p>Lorsqu'on utilise les propriétés d'alignement, on aligne le contenu selon deux axes : l'axe en ligne (<em>inline axis</em>) et l'axe de bloc (<em>block axis</em>). L'axe en ligne correspond à l'axe selon lequel les mots sont écrits pour ce mode d'écriture. En français, par exemple, l'axe en ligne est un axe horizontal dirigé de la gauche vers la droite. L'axe de bloc est orthogonal à l'axe en ligne et suit la direction selon laquelle les blocs de texte sont disposés les uns à la suite des autres.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15952/two-axes.png"></p> +<p><img alt="" src="two-axes.png"></p> <p>Lorsqu'on aligne des objets le long de l'axe en ligne, on utilisera les propriétés qui commencent par <code>justify-</code>:</p> @@ -79,7 +79,7 @@ translation_of: Web/CSS/CSS_Box_Alignment <p>Dans l'image qui suit, on voit un conteneur d'alignement qui contient deux sujets.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15953/align-container-subjects.png" style="height: 170px; width: 248px;"></p> +<p><img alt="" src="align-container-subjects.png"></p> <h3 id="L'alignement_de_recours_(fallback)">L'alignement de recours (<em>fallback</em>)</h3> @@ -117,7 +117,7 @@ translation_of: Web/CSS/CSS_Box_Alignment <p>On voit ici que ces deux exemples utilisent <code>justify-content: start</code> mais que l'emplacement des sujets varie selon le mode d'écriture.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15956/writing-mode-start.png" style="height: 101px; width: 478px;"></p> +<p><img alt="" src="writing-mode-start.png"></p> <h3 id="Alignement_selon_la_ligne_de_base">Alignement selon la ligne de base</h3> @@ -146,11 +146,11 @@ translation_of: Web/CSS/CSS_Box_Alignment <p>Ainsi, si des objets flexibles sont alignés avec <code>flex-start</code> et qu'on travaille dans un mode d'écriture horizontal de gauche à droite et de haut en bas (comme le français) avec <code>flex-direction</code> qui vaut <code>row</code>, les sujets commenceront à gauche et l'espace disponible sera affiché à droite après que les sujets aient été placés.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15954/justify-content-start.png" style="height: 100px; width: 559px;"></p> +<p><img alt="" src="justify-content-start.png"></p> <p>Si on utilise <code>justify-content: space-between</code> sur le conteneur flexible, l'espace disponible sera alors réparti entre les objets.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15955/justify-content-space-between.png" style="height: 100px; width: 559px;"></p> +<p><img alt="" src="justify-content-space-between.png"></p> <p>Pour que ces mots-clés aient un effet, il est nécessaire qu'il reste de l'espace supplémentaire. S'il n'y a plus d'espace, aucune distribution ne pourra être effectuée.</p> @@ -176,12 +176,12 @@ translation_of: Web/CSS/CSS_Box_Alignment <p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 500)}}</p> -<p>Dans cet exemple, on utilise la propriété {{cssxref("grid-gap")}} en plus de la propriété {{cssxref("gap")}}. Les propriétés d'espacement, initialement définies pour la disposition en grille, étaient préfixées par <code>grid-</code> et certains navigateurs ne prennent encore en charge que ces versions préfixées :</p> +<p>Dans cet exemple, on utilise la propriété {{cssxref("gap")}} en plus de la propriété {{cssxref("gap")}}. Les propriétés d'espacement, initialement définies pour la disposition en grille, étaient préfixées par <code>grid-</code> et certains navigateurs ne prennent encore en charge que ces versions préfixées :</p> <ul> - <li>{{cssxref("grid-row-gap")}}</li> + <li>{{cssxref("row-gap")}}</li> <li>{{cssxref("grid-column-gap")}}</li> - <li>{{cssxref("grid-gap")}}</li> + <li>{{cssxref("gap")}}</li> </ul> <p>Ces versions préfixées seront maintenues comme des alias des propriétés non-préfixées. Toutefois, il est toujours possible de les dédoubler comme on le fait avec les propriétés préfixées des différents éditeurs : déclarer la propriété <code>grid-gap</code> puis <code>gap</code> avec la même valeur.</p> @@ -203,7 +203,6 @@ translation_of: Web/CSS/CSS_Box_Alignment <h3 id="Propriétés_CSS">Propriétés CSS</h3> -<div class="index"> <ul> <li>{{cssxref("justify-content")}}</li> <li>{{cssxref("align-content")}}</li> @@ -218,26 +217,23 @@ translation_of: Web/CSS/CSS_Box_Alignment <li>{{cssxref("column-gap")}}</li> <li>{{cssxref("gap")}}</li> </ul> -</div> <h3 id="Termes_du_glossaire">Termes du glossaire</h3> -<div class="index"> <ul> - <li><a href="/fr/docs/Glossaire/Axe_transversal">Axe secondaire</a></li> - <li><a href="/fr/docs/Glossaire/Axe_principal">Axe principal</a></li> + <li><a href="/fr/docs/Glossary/Cross_Axis">Axe secondaire</a></li> + <li><a href="/fr/docs/Glossary/Main_Axis">Axe principal</a></li> <li><a href="/fr/docs/Glossary/Alignment_Container">Conteneur d'alignement</a></li> <li><a href="/fr/docs/Glossary/Alignment_Subject">Sujet d'alignement</a></li> <li><a href="/fr/docs/Glossary/Fallback_Alignment">Alignement de recours</a></li> </ul> -</div> <h2 id="Guides">Guides</h2> <ul> - <li>Guide CSS sur Flexbox : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de base de Flexbox</a></em></li> - <li>Guide CSS sur Flexbox : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner les éléments d'un conteneur flexible</a></em></li> - <li>Guide CSS sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner les boîtes dans une disposition en grille</a></em></li> + <li>Guide CSS sur Flexbox : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Les concepts de base de Flexbox</a></em></li> + <li>Guide CSS sur Flexbox : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligner les éléments d'un conteneur flexible</a></em></li> + <li>Guide CSS sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Aligner les boîtes dans une disposition en grille</a></em></li> </ul> <h2 id="Ressources_externes">Ressources externes</h2> diff --git a/files/fr/web/css/css_box_model/index.html b/files/fr/web/css/css_box_model/index.html index 53493637fa..61ad9dfd61 100644 --- a/files/fr/web/css/css_box_model/index.html +++ b/files/fr/web/css/css_box_model/index.html @@ -20,17 +20,14 @@ original_slug: Web/CSS/Modèle_de_boîte_CSS <h4 id="Les_propriétés_qui_définissent_le_flux_du_contenu_dans_une_boîte">Les propriétés qui définissent le flux du contenu dans une boîte</h4> -<div class="index"> <ul> <li>{{cssxref("overflow")}}</li> <li>{{cssxref("overflow-x")}}</li> <li>{{cssxref("overflow-y")}}</li> </ul> -</div> <h4 id="Les_propriétés_qui_définissent_la_taille_d'une_boîte">Les propriétés qui définissent la taille d'une boîte</h4> -<div class="index"> <ul> <li>{{cssxref("height")}}</li> <li>{{cssxref("width")}}</li> @@ -39,11 +36,9 @@ original_slug: Web/CSS/Modèle_de_boîte_CSS <li>{{cssxref("min-height")}}</li> <li>{{cssxref("min-width")}}</li> </ul> -</div> <h4 id="Les_propriétés_qui_définissent_les_marges_d'une_boîte">Les propriétés qui définissent les marges d'une boîte</h4> -<div class="index"> <ul> <li>{{cssxref("margin")}}</li> <li>{{cssxref("margin-bottom")}}</li> @@ -52,11 +47,9 @@ original_slug: Web/CSS/Modèle_de_boîte_CSS <li>{{cssxref("margin-top")}}</li> <li>{{CSSxRef("margin-trim")}} {{Experimental_Inline}}</li> </ul> -</div> <h4 id="Les_propriétés_qui_définissent_le_remplissage_(padding)_d'une_boîte">Les propriétés qui définissent le remplissage (<em>padding</em>) d'une boîte</h4> -<div class="index"> <ul> <li>{{cssxref("padding")}}</li> <li>{{cssxref("padding-bottom")}}</li> @@ -64,16 +57,13 @@ original_slug: Web/CSS/Modèle_de_boîte_CSS <li>{{cssxref("padding-right")}}</li> <li>{{cssxref("padding-top")}}</li> </ul> -</div> <h4 id="Les_autres_propriétés">Les autres propriétés</h4> -<div class="index"> <ul> <li>{{cssxref("box-shadow")}}</li> <li>{{cssxref("visibility")}}</li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/css_charsets/index.html b/files/fr/web/css/css_charsets/index.html index 46991607c2..07d2f1c593 100644 --- a/files/fr/web/css/css_charsets/index.html +++ b/files/fr/web/css/css_charsets/index.html @@ -17,11 +17,9 @@ original_slug: Web/CSS/Jeux_de_caractères_CSS <h3 id="Règles">Règles @</h3> -<div class="index"> <ul> <li>{{cssxref("@charset")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_color/index.html b/files/fr/web/css/css_color/index.html index eb61cf41cd..f07f716fe6 100644 --- a/files/fr/web/css/css_color/index.html +++ b/files/fr/web/css/css_color/index.html @@ -18,21 +18,17 @@ translation_of: Web/CSS/CSS_Color <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("color")}}</li> <li>{{cssxref("opacity")}}</li> <li>{{cssxref("color-adjust")}}</li> </ul> -</div> <h3 id="Types_de_données">Types de données</h3> -<div class="index"> <ul> <li>{{cssxref("<color>")}}</li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/css_colors/color_picker_tool/index.html b/files/fr/web/css/css_colors/color_picker_tool/index.html index 1996401a8b..0715ba2707 100644 --- a/files/fr/web/css/css_colors/color_picker_tool/index.html +++ b/files/fr/web/css/css_colors/color_picker_tool/index.html @@ -7,12 +7,7 @@ tags: translation_of: Web/CSS/CSS_Colors/Color_picker_tool original_slug: Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs --- -<div class="hidden"> -<h2 id="ColorPIcker_Tool" name="ColorPIcker_Tool">ColorPIcker Tool</h2> - -<h3 id="HTML_Content">HTML Content</h3> - -<pre class="brush: html"> <div id="container"> +<pre class="brush: html hidden"> <div id="container"> <div id="palette" class="block"> <div id="color-palette"></div> <div id="color-info"> @@ -37,11 +32,7 @@ original_slug: Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs </div> </div> -</pre> - -<h3 id="CSS_Content">CSS Content</h3> - -<pre class="brush: css">/* +<pre class="brush: css hidden">/* * COLOR PICKER TOOL */ diff --git a/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.html b/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.html index 4b69af66e0..344caf8221 100644 --- a/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.html +++ b/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.html @@ -9,7 +9,7 @@ original_slug: Web/CSS/CSS_Columns/Concepts_base_multi-colonnes --- <div>{{CSSRef}}</div> -<p class="summary">La disposition sur plusieurs colonnes (« <em>Multiple-column Layout</em> » ou « <em>multicol</em> » en anglais) est un module de spécification pour organiser du contenu sur un ensemble de colonnes, à la façon des colonnes dans un journal imprimé. Dans ce guide, nous verrons comment fonctionne cette spécification et quelques cas d'exemples.</p> +<p>La disposition sur plusieurs colonnes (« <em>Multiple-column Layout</em> » ou « <em>multicol</em> » en anglais) est un module de spécification pour organiser du contenu sur un ensemble de colonnes, à la façon des colonnes dans un journal imprimé. Dans ce guide, nous verrons comment fonctionne cette spécification et quelques cas d'exemples.</p> <h2 id="Concepts_et_terminologie">Concepts et terminologie</h2> diff --git a/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.html b/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.html index 96f2191770..fd6bd631ba 100644 --- a/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.html +++ b/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.html @@ -9,7 +9,7 @@ original_slug: Web/CSS/CSS_Columns/Gérer_rupture_contenu_entre_colonnes --- <div>{{CSSRef}}</div> -<p class="summary">Le contenu est coupé entre les colonnes d'une disposition multi-colonnes de la même façon qu'il est coupé entre chaque page d'un média paginé. Dans ces deux contextes, la façon dont on contrôle l'emplacement et la coupure se paramètre grâce aux propriétés décrites dans le module de spécification <em>CSS Fragmentation</em>. Dans ce guide, nous verrons comment fonctionne la fragmentation en multi-colonnes.</p> +<p>Le contenu est coupé entre les colonnes d'une disposition multi-colonnes de la même façon qu'il est coupé entre chaque page d'un média paginé. Dans ces deux contextes, la façon dont on contrôle l'emplacement et la coupure se paramètre grâce aux propriétés décrites dans le module de spécification <em>CSS Fragmentation</em>. Dans ce guide, nous verrons comment fonctionne la fragmentation en multi-colonnes.</p> <h2 id="Quelques_notions_de_bases_sur_la_fragmentation">Quelques notions de bases sur la fragmentation</h2> diff --git a/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.html b/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.html index 1cb00b72cd..e37d560b61 100644 --- a/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.html +++ b/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.html @@ -9,7 +9,7 @@ original_slug: Web/CSS/CSS_Columns/Gestion_dépassement_multi-colonnes --- <div>{{CSSRef}}</div> -<p class="summary">Dans ce guide, nous verrons comment gérer le dépassement avec une disposition multi-colonnes. Le dépassement peut avoir lieu pour chaque boîte de colonne ou lorsqu'il y a plus de contenu que de place dans le conteneur.</p> +<p>Dans ce guide, nous verrons comment gérer le dépassement avec une disposition multi-colonnes. Le dépassement peut avoir lieu pour chaque boîte de colonne ou lorsqu'il y a plus de contenu que de place dans le conteneur.</p> <h2 id="Le_dépassement_dans_les_boîtes_des_colonnes">Le dépassement dans les boîtes des colonnes</h2> @@ -19,7 +19,7 @@ original_slug: Web/CSS/CSS_Columns/Gestion_dépassement_multi-colonnes <p>{{EmbedGHLiveSample("css-examples/multicol/overflow/image.html", '100%', 800)}}</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/16095/image-overflow-multicol.png" style="height: 328px; width: 800px;"></p> +<p><img alt="" src="image-overflow-multicol.png"></p> <p>Si on veut une image qui se réduise à la boîte de la colonne, on pourra utiliser les solutions pour les images adaptatives et <code>max-width: 100%</code> pour y parvenir.</p> diff --git a/files/fr/web/css/css_columns/index.html b/files/fr/web/css/css_columns/index.html index b66e0686ea..80a7ed7f0a 100644 --- a/files/fr/web/css/css_columns/index.html +++ b/files/fr/web/css/css_columns/index.html @@ -26,7 +26,6 @@ translation_of: Web/CSS/CSS_Columns <h3 id="Propriétés_relatives_à_la_disposition_en_colonnes">Propriétés relatives à la disposition en colonnes</h3> -<div class="index"> <ul> <li>{{cssxref("column-count")}}</li> <li>{{cssxref("column-fill")}}</li> @@ -39,11 +38,9 @@ translation_of: Web/CSS/CSS_Columns <li>{{cssxref("column-width")}}</li> <li>{{cssxref("columns")}}</li> </ul> -</div> <h3 id="Propriétés_relatives_à_la_fragmentation">Propriétés relatives à la fragmentation</h3> -<div class="index"> <ul> <li>{{cssxref("break-after")}}</li> <li>{{cssxref("break-before")}}</li> @@ -51,7 +48,6 @@ translation_of: Web/CSS/CSS_Columns <li>{{cssxref("orphans")}}</li> <li>{{cssxref("widows")}}</li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/css_columns/spanning_columns/index.html b/files/fr/web/css/css_columns/spanning_columns/index.html index fe5533f9ab..9aa5652293 100644 --- a/files/fr/web/css/css_columns/spanning_columns/index.html +++ b/files/fr/web/css/css_columns/spanning_columns/index.html @@ -9,7 +9,7 @@ original_slug: Web/CSS/CSS_Columns/Répartir_entre_les_colonnes --- <div>{{CSSRef}}</div> -<p class="summary">Dans ce guide, nous verrons comment répartir les éléments sur plusieurs colonnes et comment contrôler le remplissage des colonnes.</p> +<p>Dans ce guide, nous verrons comment répartir les éléments sur plusieurs colonnes et comment contrôler le remplissage des colonnes.</p> <div class="note"> <p><strong>Note :</strong> Les fonctionnalités décrites dans cet article ne sont pas aussi bien prises en charge que celles décrites dans les deux articles précédents. Pour plus d'informations, nous vous invitons à vous référer aux tableaux de compatibilité à la fin des pages décrivant chacune des propriétés.</p> diff --git a/files/fr/web/css/css_columns/styling_columns/index.html b/files/fr/web/css/css_columns/styling_columns/index.html index 9cf822a190..58cf3879e6 100644 --- a/files/fr/web/css/css_columns/styling_columns/index.html +++ b/files/fr/web/css/css_columns/styling_columns/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Columns/Mettre_en_forme_les_colonnes --- <div>{{CSSRef}}</div> -<p class="summary">Les boîtes de colonne créées au sein des conteneurs multi-colonnes sont des boîtes anonymes et leur mise en forme est donc limitée. Elle n'est toutefois pas inexistante. Dans ce guide nous verrons comment modifier l'espace entre les colonnes et comment mettre en forme une ligne entre les colonnes.</p> +<p>Les boîtes de colonne créées au sein des conteneurs multi-colonnes sont des boîtes anonymes et leur mise en forme est donc limitée. Elle n'est toutefois pas inexistante. Dans ce guide nous verrons comment modifier l'espace entre les colonnes et comment mettre en forme une ligne entre les colonnes.</p> <h2 id="Peut-on_mettre_en_forme_les_boîtes_des_colonnes">Peut-on mettre en forme les boîtes des colonnes ?</h2> diff --git a/files/fr/web/css/css_columns/using_multi-column_layouts/index.html b/files/fr/web/css/css_columns/using_multi-column_layouts/index.html index b704ab6a8b..4dd83dfefd 100644 --- a/files/fr/web/css/css_columns/using_multi-column_layouts/index.html +++ b/files/fr/web/css/css_columns/using_multi-column_layouts/index.html @@ -31,7 +31,6 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes <h5 id="HTML">HTML</h5> -<div id="column_count"> <pre class="brush: html"><div id="col"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, @@ -52,7 +51,6 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes </p> </div> </pre> -</div> <h5 id="Résultat">Résultat</h5> @@ -66,16 +64,14 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes <h5 id="CSS_2">CSS</h5> -<div id="column_width"> <pre class="brush: css">#wid { column-width: 100px; } </pre> -</div> + <h5 id="HTML_2">HTML</h5> -<div id="column_count"> <pre class="brush: html"><div id="wid"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna @@ -87,7 +83,6 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes deserunt mollit anim id est laborum </div> </pre> -</div> <h5 id="Résultat_2">Résultat</h5> @@ -103,16 +98,13 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes <h5 id="CSS_3">CSS</h5> -<div id="column_short"> <pre class="brush: css">#col_short { columns: 12em; } </pre> -</div> <h5 id="HTML_3">HTML</h5> -<div id="column_count"> <pre class="brush: html"><div id="col_short"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna @@ -124,7 +116,6 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes deserunt mollit anim id est laborum </div> </pre> -</div> <h5 id="Résultat_3">Résultat</h5> @@ -132,21 +123,17 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes <p>De même, on pourra remplacer la déclaration <code>column-count: 4</code> avec ce bloc :</p> -<div id="4_columns"> <pre class="brush: css">#columns_4{ columns: 4; } </pre> -</div> <p>Enfin, pour synthétiser les instructions <code>column-width:8em</code> et <code>column-count:12</code>, on pourra utiliser les instructions suivantes :</p> -<div id="12_columns"> <pre class="brush: css">#columns_12 { columns: 12 8em; } </pre> -</div> <h3 id="Équilibrage_de_la_hauteur">Équilibrage de la hauteur</h3> @@ -169,7 +156,6 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes <h5 id="HTML_4">HTML</h5> -<div id="col_gap"> <pre class="brush: html"><div id="column_gap"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna @@ -181,7 +167,6 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes deserunt mollit anim id est laborum </div> </pre> -</div> <h5 id="Résultat_4">Résultat</h5> @@ -198,5 +183,5 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="external" href="https://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html" rel="freelink">https://weblogs.mozillazine.org/roc/a...18_for_we.html</a></li> + <li><a href="https://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html">https://weblogs.mozillazine.org/roc/a...18_for_we.html</a></li> </ul> diff --git a/files/fr/web/css/css_conditional_rules/index.html b/files/fr/web/css/css_conditional_rules/index.html index bf46148fad..70fad97d1c 100644 --- a/files/fr/web/css/css_conditional_rules/index.html +++ b/files/fr/web/css/css_conditional_rules/index.html @@ -16,14 +16,12 @@ translation_of: Web/CSS/CSS_Conditional_Rules <h3 id="Règles">Règles @</h3> -<div class="index"> <ul> <li>{{cssxref("@document")}}</li> <li>{{cssxref("@media")}}</li> <li>{{cssxref("@supports")}}</li> <li>{{cssxref("@import")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_containment/index.html b/files/fr/web/css/css_containment/index.html index f4914d7997..a6869b2050 100644 --- a/files/fr/web/css/css_containment/index.html +++ b/files/fr/web/css/css_containment/index.html @@ -89,7 +89,7 @@ original_slug: Web/CSS/Compartimentation_CSS <p>En utilisant <code>contain: style</code>, on s'assure que les propriétés {{cssxref("counter-increment")}} et {{cssxref("counter-set")}} créent de nouveaux compteurs limités à ce sous-arbre.</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> La valeur <code>style</code> est considérée comme « à risque » dans la spécification actuelle et pourrait ne pas être prise en charge partout (elle n'est actuellement pas prise en charge dans Firefox - novembre 2019).</p> </div> diff --git a/files/fr/web/css/css_counter_styles/index.html b/files/fr/web/css/css_counter_styles/index.html index 3dc28e2c2d..c09546d721 100644 --- a/files/fr/web/css/css_counter_styles/index.html +++ b/files/fr/web/css/css_counter_styles/index.html @@ -16,38 +16,33 @@ translation_of: Web/CSS/CSS_Counter_Styles <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("counter-increment")}}</li> <li>{{cssxref("counter-reset")}}</li> </ul> -</div> <h3 id="Règles">Règles @</h3> -<dl> - <dt>{{cssxref("@counter-style")}}</dt> - <dd> - <div class="index"> - <ul> - <li>{{cssxref("@counter-style/system","system")}}</li> - <li>{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}</li> - <li>{{cssxref("@counter-style/negative", "negative")}}</li> - <li>{{cssxref("@counter-style/prefix", "prefix")}}</li> - <li>{{cssxref("@counter-style/suffix", "suffix")}}</li> - <li>{{cssxref("@counter-style/range", "range")}}</li> - <li>{{cssxref("@counter-style/pad", "pad")}}</li> - <li>{{cssxref("@counter-style/speak-as", "speak-as")}}</li> - <li>{{cssxref("@counter-style/fallback", "fallback")}}</li> - </ul> - </div> - </dd> -</dl> +<ul> + <li>{{cssxref("@counter-style")}} + <ul> + <li>{{cssxref("@counter-style/system","system")}}</li> + <li>{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}</li> + <li>{{cssxref("@counter-style/negative", "negative")}}</li> + <li>{{cssxref("@counter-style/prefix", "prefix")}}</li> + <li>{{cssxref("@counter-style/suffix", "suffix")}}</li> + <li>{{cssxref("@counter-style/range", "range")}}</li> + <li>{{cssxref("@counter-style/pad", "pad")}}</li> + <li>{{cssxref("@counter-style/speak-as", "speak-as")}}</li> + <li>{{cssxref("@counter-style/fallback", "fallback")}}</li> + </ul> + </li> +</ul> <h2 id="Guides">Guides</h2> <dl> - <dt><a href="/fr/docs/Web/CSS/Compteurs_CSS">Manipuler les compteurs CSS</a></dt> + <dt><a href="/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">Manipuler les compteurs CSS</a></dt> <dd>Cet article décrit comment utiliser les compteurs CSS afin de numéroter des éléments HTML et de réaliser des comptages complexes.</dd> </dl> diff --git a/files/fr/web/css/css_device_adaptation/index.html b/files/fr/web/css/css_device_adaptation/index.html index 94f10a4ba4..7044575f90 100644 --- a/files/fr/web/css/css_device_adaptation/index.html +++ b/files/fr/web/css/css_device_adaptation/index.html @@ -14,11 +14,9 @@ translation_of: Web/CSS/CSS_Device_Adaptation <h3 id="Règles">Règles @</h3> -<div class="index"> <ul> <li>{{cssxref("@viewport")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_display/index.html b/files/fr/web/css/css_display/index.html index e1106b1422..18278b09b9 100644 --- a/files/fr/web/css/css_display/index.html +++ b/files/fr/web/css/css_display/index.html @@ -16,15 +16,12 @@ translation_of: Web/CSS/CSS_Display <h3 id="Propriétés_CSS">Propriétés CSS</h3> -<div class="index"> <ul> <li>{{cssxref("display")}}</li> </ul> -</div> <h3 id="Types_de_donnée_CSS">Types de donnée CSS</h3> -<div class="index"> <ul> <li>{{CSSxRef("<display-outside>")}}</li> <li>{{CSSxRef("<display-inside>")}}</li> @@ -33,7 +30,6 @@ translation_of: Web/CSS/CSS_Display <li>{{CSSxRef("<display-internal>")}}</li> <li>{{CSSxRef("<display-legacy>")}}</li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html index 11feda660f..228aad4a9b 100644 --- a/files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html +++ b/files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html @@ -1,6 +1,6 @@ --- title: Aligner des éléments dans un conteneur flexible -slug: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +slug: Web/CSS/css_flexible_box_layout/aligning_items_in_a_flex_container tags: - CSS - Flex @@ -13,11 +13,11 @@ original_slug: >- --- <p>{{CSSRef}}</p> -<p class="summary">Une des raisons qui ont poussé à l'adoption des boîtes flexibles est la présence d'outils d'alignement enfin corrects pour le Web. On pouvait ainsi enfin centrer une boîte sur un axe vertical. Dans ce guide, nous verrons dans le détail comment fonctionnent les propriétés d'alignement et de justification relatives aux boîtes flexibles.</p> +<p>Une des raisons qui ont poussé à l'adoption des boîtes flexibles est la présence d'outils d'alignement enfin corrects pour le Web. On pouvait ainsi enfin centrer une boîte sur un axe vertical. Dans ce guide, nous verrons dans le détail comment fonctionnent les propriétés d'alignement et de justification relatives aux boîtes flexibles.</p> <p>Afin de centrer notre boîte, nous allons utiliser la propriété <code>align-items</code> afin d'aligner l'objet sur l'axe secondaire (<em>cross axis</em> en anglais). Dans notre exemple, cet axe est l'axe de bloc et est orienté verticalement. La propriété <code>justify-content</code> est quant à elle utilisée pour aligner l'objet sur l'axe principal (<em>main axis</em> en anglais) (ici l'axe principal est l'axe en ligne qui s'étend horizontalement).</p> -<p><img alt="Un élément contenant une autre boîte centrée à l'intérieur" src="https://mdn.mozillademos.org/files/15627/align1.png" style="display: block; height: 357px; margin: 0px auto; width: 616px;"></p> +<p><img alt="Un élément contenant une autre boîte centrée à l'intérieur" src="align1.png"></p> <p> </p> @@ -39,7 +39,7 @@ original_slug: >- <p>Nous verrons également comment les marges automatiques peuvent être utilisées dans l'alignement des boîtes flexibles.</p> <div class="note"> -<p><strong>Note</strong> : Les propriétés d'alignement du module de spécification CSS Flexbox ont été placés dans leur propre spécification : <a href="https://www.w3.org/TR/css-align-3/">CSS Box Alignment Level 3</a>. Cette dernière remplacera à terme les propriétés définies dans le module Flexbox de niveau 1.</p> +<p><strong>Note :</strong> Les propriétés d'alignement du module de spécification CSS Flexbox ont été placés dans leur propre spécification : <a href="https://www.w3.org/TR/css-align-3/">CSS Box Alignment Level 3</a>. Cette dernière remplacera à terme les propriétés définies dans le module Flexbox de niveau 1.</p> </div> <h2 id="L'axe_secondaire_(cross_axis)">L'axe secondaire (<em>cross axis</em>)</h2> @@ -48,9 +48,9 @@ original_slug: >- <p>Prenons un exemple simple : nous ajoutons <code>display: flex</code> à un conteneur qui contient trois objets. Tous s'étirent afin d'être aussi grands que le plus grand des éléments car celui-ci définit la taille du conteneur sur l'axe secondaire. Si le conteneur flexible possède une hauteur définie, les objets qu'il contient s'étireront pour atteindre cette taille, quel que soit le contenu dont ils disposent.</p> -<p><img alt="Trois objets dont un avec un texte plus long qui le rend plus grand que les autres" src="https://mdn.mozillademos.org/files/15628/align2.png" style="display: block; height: 131px; margin: 0px auto; width: 509px;"></p> +<p><img alt="Trois objets dont un avec un texte plus long qui le rend plus grand que les autres" src="align2.png"></p> -<p><img alt="Trois objets étirés pour mesurer 200 pixels de haut" src="https://mdn.mozillademos.org/files/15629/align3.png" style="display: block; height: 207px; margin: 0px auto; width: 637px;"></p> +<p><img alt="Trois objets étirés pour mesurer 200 pixels de haut" src="align3.png"></p> <p>Les éléments obtiennent la même hauteur à cause de la valeur initiale de <code>align-items</code> qui contrôle l'alignement sur l'axe secondaire. Cette valeur initiale est <code>stretch</code> (qui indique que les objets du conteneur doivent être étirés sur l'axe).</p> @@ -80,11 +80,11 @@ original_slug: >- <p>Jusqu'à présent, les exemples fonctionnaient avec <code>flex-direction</code> valant <code>row</code> et avec un langage dont les lignes progressent du haut vers le bas. Cela signifie que l'axe principal est une ligne horizontale et que l'axe secondaire est une ligne verticale dirigée vers le bas.</p> -<p><img alt="Trois objets, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe vertical.." src="https://mdn.mozillademos.org/files/15630/align4.png" style="display: block; height: 204px; margin: 0px auto; width: 671px;"></p> +<p><img alt="Trois objets, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe vertical.." src="align4.png"></p> <p>Si on passe <code>flex-direction</code> à <code>column</code>, <code>align-items</code> et <code>align-self</code> aligneront les éléments à gauche et à droite.</p> -<p><img alt="Trois éléments, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe horizontal." src="https://mdn.mozillademos.org/files/15631/align5.png" style="display: block; height: 239px; margin: 0px auto; width: 687px;"></p> +<p><img alt="Trois éléments, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe horizontal." src="align5.png"></p> <p>Vous pouvez manipuler cet exemple qui reprend le même code que l'exemple précédent avec la seule exception que <code>flex-direction</code> vaut ici <code>column</code>.</p> @@ -119,7 +119,7 @@ original_slug: >- <p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} </p> <div class="note"> -<p><strong>Note</strong> : La valeur <code>space-evenly</code> n'est pas définie dans la spécification relative aux boîtes flexibles et a été dernièrement ajoutée à la spécification sur l'alignement des boîtes. Cette valeur est donc moins prise en charge par les navigateurs que les autres mots-clés.</p> +<p><strong>Note :</strong> La valeur <code>space-evenly</code> n'est pas définie dans la spécification relative aux boîtes flexibles et a été dernièrement ajoutée à la spécification sur l'alignement des boîtes. Cette valeur est donc moins prise en charge par les navigateurs que les autres mots-clés.</p> </div> <p>Vous pouvez consulter la documentation sur {{cssxref("align-content")}} pour en savoir plus, notamment sur la compatibilité des navigateurs.</p> @@ -130,7 +130,7 @@ original_slug: >- <p>Dans l'exemple initial avec <code>display: flex</code> appliqué au conteneur, les éléments formaient une ligne qui commençait au début du conteneur. Cela provient de la valeur initiale de <code>justify-content</code> qui est <code>flex-start</code>. Avec cette valeur, tout l'espace disponible est placé à la fin, après les éléments.</p> -<p><img alt="Trois éléments, chacun mesurant 100 pixels de large dans un conteneur de 500 pixels de large. L'espace disponible restant se situe après les éléments." src="https://mdn.mozillademos.org/files/15632/align6.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p> +<p><img alt="Trois éléments, chacun mesurant 100 pixels de large dans un conteneur de 500 pixels de large. L'espace disponible restant se situe après les éléments." src="align6.png"></p> <p>La propriété <code>justify-content</code> prend en charge les mêmes valeurs que <code>align-content</code>.</p> @@ -156,11 +156,11 @@ original_slug: >- <p>Rappelons ici qu'avec ces méthodes d'alignement, <code>flex-start</code> et <code>flex-end</code> respectent le mode d'écriture utilisé. Si on utilise <code>justify-content</code> avec la valeur <code>start</code> pour un contenu écrit en anglais (un mode d'écriture de la gauche vers la droite), les éléments commenceront à gauche du conteneur.</p> -<p><img alt="Trois éléments alignés sur la gauche" src="https://mdn.mozillademos.org/files/15638/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> +<p><img alt="Trois éléments alignés sur la gauche" src="basics5.png"></p> <p>Mais si le contenu est écrit en arabe (un mode d'écriture de la droite vers la gauche), les éléments démarreront à la droite du conteneur.</p> -<p><img alt="Trois éléments alignés sur la droite" src="https://mdn.mozillademos.org/files/15639/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p> +<p><img alt="Trois éléments alignés sur la droite" src="basics6.png"></p> <p>Dans l'exemple qui suit, on indique explicitement la valeur <code>rtl</code> pour la propriété <code>display</code> afin de forcer un mode d'écriture de droite à gauche. Vous pouvez retirer cette déclaration ou modifier la valeur de <code>justify-content</code> afin de voir comment les boîtes flexibles s'organisent lorsque le début de la ligne est à droite.</p> @@ -176,17 +176,17 @@ original_slug: >- <p>Si cela peut paraître déroutant, la règle principale à mémoriser est que, par défaut, si on ne change rien, les éléments flexibles sont organisés dans la direction naturelle de la langue dans laquelle le document est écrit. <code>flex-start</code> correspondra donc à la ligne de début depuis laquelle une phrase démarrerait.</p> -<p><img alt="Un diagramme illustrant la ligne de début à gauche et la ligne de fin à droite" src="https://mdn.mozillademos.org/files/15634/align8.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> +<p><img alt="Un diagramme illustrant la ligne de début à gauche et la ligne de fin à droite" src="align8.png"></p> <p>On peut changer l'axe avec <code>flex-direction: column</code>. Dans ce cas, <code>flex-start</code> correspondra à l'emplacement du début du premier paragraphe d'un texte.</p> -<p><img alt="Un diagramme illustrant la ligne de début en haut et la ligne de fin en bas" src="https://mdn.mozillademos.org/files/15636/align10.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p> +<p><img alt="Un diagramme illustrant la ligne de début en haut et la ligne de fin en bas" src="align10.png"></p> <p>Si on utilise <code>flex-direction</code> avec une des valeurs inversée, les éléments seront organisés dans l'ordre inverse (à l'opposé de la disposition naturelle de la langue utilisée pour le document). <code>flex-start</code> correspondra alors à la « fin » usuelle d'une ligne de texte sur une disposition en ligne et au dernier paragraphe sur une disposition organisée sur un axe principal vertical.</p> -<p><img alt="Un diagramme illustrant la ligne de début à droite et celle de fin à gauche" src="https://mdn.mozillademos.org/files/15635/align9.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> +<p><img alt="Un diagramme illustrant la ligne de début à droite et celle de fin à gauche" src="align9.png"></p> -<p><img alt="Un diagramme illustrant la ligne de début en bas et celle de fin en haut" src="https://mdn.mozillademos.org/files/15637/align11.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p> +<p><img alt="Un diagramme illustrant la ligne de début en bas et celle de fin en haut" src="align11.png"></p> <h2 id="Utiliser_les_marges_automatiques_pour_aligner_sur_l'axe_principal">Utiliser les marges automatiques pour aligner sur l'axe principal</h2> @@ -194,7 +194,7 @@ original_slug: >- <p>Un motif fréquent est l'organisation d'une barre de navigation où certains éléments clés sont situés à droite alors qu'un groupe principal est présent à gauche. On pourrait alors penser qu'il s'agit d'un cas d'utilisation pour une propriété comme <code>justify-self</code>… Cependant, si on regarde l'image qui suit et qu'on était capable de modifier <code>justify-self</code> sur l'élément <em>d</em>, cela changerait également l'alignement de l'élément <em>e</em> qui suit, ce qui pourrait ou non être voulu.</p> -<p><img alt="Cinq objets répartis en deux groupes. Trois sont situés à gauche et deux sont situés à droite." src="https://mdn.mozillademos.org/files/15633/align7.png" style="display: block; height: 84px; margin: 0px auto; width: 645px;"></p> +<p><img alt="Cinq objets répartis en deux groupes. Trois sont situés à gauche et deux sont situés à droite." src="align7.png"></p> <p>Plutôt que cela, on peut cibler le quatrième élément et le séparer des trois premiers en utilisant <code>margin-left: auto</code>. Une marge automatique consommera tout l'espace disponible sur l'axe correspondant.</p> @@ -208,12 +208,12 @@ original_slug: >- <p>Le module de spécification sur l'alignement des boîtes inclut également d'autres méthodes pour créer des espaces entre les objets telles que les propriétés <code>column-gap</code> et <code>row-gap</code> décrites dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">le module de grille CSS (<em>CSS Grid</em>)</a>. L'inclusion de ces propriétés dans le module d'alignement des boîtes signifie que nous pourrons plus tard les utiliser dans les dispositions avec les boîtes flexibles. Cela signifie qu'il ne sera plus nécessaire d'utiliser des marges afin d'espacer des éléments flexibles. Firefox 63 devrait implémenter les propriétés <code>gap</code> pour les dispositions flexibles.</p> -<p>Lorsque vous explorez les différentes méthodes d'alignement relatives aux boîtes flexibles, n'hésitez pas à étudier ce qui est disponible avec une disposition en grille (<em>CSS Grid Layout</em>). En effet, ces deux spécifications utilisent les propriétés d'alignement qui sont désormais détaillées dans la spécification sur l'alignement des boîtes. Vous pouvez en savoir plus sur le fonctionnement de ces propriétés sur une grille <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">grâce à cet article</a>. Une page récapitulative (en anglais) est également disponible pour comparer le fonctionnement de l'alignement par rapport à ces différentes spécifications : <em><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a></em>.</p> +<p>Lorsque vous explorez les différentes méthodes d'alignement relatives aux boîtes flexibles, n'hésitez pas à étudier ce qui est disponible avec une disposition en grille (<em>CSS Grid Layout</em>). En effet, ces deux spécifications utilisent les propriétés d'alignement qui sont désormais détaillées dans la spécification sur l'alignement des boîtes. Vous pouvez en savoir plus sur le fonctionnement de ces propriétés sur une grille <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">grâce à cet article</a>. Une page récapitulative (en anglais) est également disponible pour comparer le fonctionnement de l'alignement par rapport à ces différentes spécifications : <em><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a></em>.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module<em>CSS Box Alignment</em></a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox">L'alignement des boîtes avec Flexbox</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille">L'alignement des boîtes avec une grille CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">L'alignement des boîtes avec Flexbox</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">L'alignement des boîtes avec une grille CSS</a></li> </ul> diff --git a/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html index f3ed3dce07..4583fc1934 100644 --- a/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html +++ b/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins --- <div>{{CSSRef}}</div> -<p class="summary">Voici un ensemble de <em>mixins</em> pour vous permettre de bidouiller avec les boîtes flexibles grâce au support natif des navigateurs actuels.</p> +<p>Voici un ensemble de <em>mixins</em> pour vous permettre de bidouiller avec les boîtes flexibles grâce au support natif des navigateurs actuels.</p> <p>Dans ces <em>mixins</em>, on utilisera :</p> @@ -45,7 +45,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins <li><a href="https://drafts.csswg.org/css-flexbox/#flex-containers">Spécifications</a></li> </ul> -<div class="highlight"> <pre class="brush: css">@mixin flexbox { display: -webkit-box; display: -moz-box; @@ -56,9 +55,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins // Exemple d'utilisation %flexbox { @include flexbox; }</pre> -</div> -<div class="highlight"> <pre class="brush: css">@mixin inline-flex { display: -webkit-inline-box; display: -moz-inline-box; @@ -68,7 +65,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins } %inline-flex { @include inline-flex; }</pre> -</div> <h3 id="Direction_des_boîtes_flexibles">Direction des boîtes flexibles</h3> @@ -79,7 +75,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins <li><a href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">Spécification</a></li> </ul> -<div class="highlight"> <pre class="brush: css">@mixin flex-direction($value: row) { @if $value == row-reverse { -webkit-box-direction: reverse; @@ -109,7 +104,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins // Version plus courte : @mixin flex-dir($args...) { @include flex-direction($args...); }</pre> -</div> <h3 id="flex-wrap"><code>flex-wrap</code></h3> @@ -120,7 +114,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins <li><a href="https://drafts.csswg.org/css-flexbox/#flex-wrap-property">Spécification</a></li> </ul> -<div class="highlight"> <pre class="brush: css">@mixin flex-wrap($value: nowrap) { // No Webkit/FF Box fallback. -webkit-flex-wrap: $value; @@ -131,7 +124,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins } flex-wrap: $value; }</pre> -</div> <h3 id="flex-flow"><code>flex-flow</code></h3> @@ -142,14 +134,12 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins <li><a href="https://drafts.csswg.org/css-flexbox/#flex-flow-property">Spécification</a></li> </ul> -<div class="highlight"> <pre class="brush: css">@mixin flex-flow($values: (row nowrap)) { // No Webkit/FF Box fallback. -webkit-flex-flow: $values; -ms-flex-flow: $values; flex-flow: $values; }</pre> -</div> <h3 id="order"><code>order</code></h3> @@ -160,7 +150,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins <li><a href="https://drafts.csswg.org/css-flexbox/#order-property">Spécification</a></li> </ul> -<div class="highlight"> <pre class="brush: css">@mixin order($int: 0) { -webkit-box-ordinal-group: $int + 1; -moz-box-ordinal-group: $int + 1; @@ -168,7 +157,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins -ms-flex-order: $int; order: $int; }</pre> -</div> <h3 id="flex-grow"><code>flex-grow</code></h3> @@ -179,7 +167,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins <li><a href="https://drafts.csswg.org/css-flexbox/#flex-grow-property">Spécification</a></li> </ul> -<div class="highlight"> <pre class="brush: css">@mixin flex-grow($int: 1) { -webkit-box-flex: $int; -moz-box-flex: $int; @@ -187,7 +174,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins -ms-flex: $int; flex-grow: $int; }</pre> -</div> <h3 id="flex-shrink"><code>flex-shrink</code></h3> @@ -198,14 +184,12 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins <li><a href="https://drafts.csswg.org/css-flexbox/#flex-shrink-property">Spécification</a></li> </ul> -<div class="highlight"> <pre class="brush: css">@mixin flex-shrink($int: 0) { -webkit-flex-shrink: $int; -moz-flex-shrink: $int; -ms-flex: $int; flex-shrink: $int; }</pre> -</div> <h3 id="flex-basis"><code>flex-basis</code></h3> @@ -216,12 +200,10 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins <li><a href="https://drafts.csswg.org/css-flexbox/#flex-basis-property">Spécification</a></li> </ul> -<div class="highlight"> <pre class="brush: css">@mixin flex-basis($value: auto) { -webkit-flex-basis: $value; flex-basis: $value; }</pre> -</div> <h3 id="flex"><code>flex</code></h3> @@ -232,7 +214,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins <li><a href="https://drafts.csswg.org/css-flexbox/#flex-property">Spécification</a></li> </ul> -<div class="highlight"> <pre class="brush: css">@mixin flex($fg: 1, $fs: 0, $fb: auto) { // Définir une variable pour l'utiliser @@ -251,7 +232,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins -ms-flex: $fg $fs $fb; flex: $fg $fs $fb; }</pre> -</div> <h3 id="justify-content"><code>justify-content</code></h3> @@ -266,7 +246,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins <li><a href="https://drafts.csswg.org/css-flexbox/#justify-content-property">Spécification</a></li> </ul> -<div class="highlight"> <pre class="brush: css">@mixin justify-content($value: flex-start) { @if $value == flex-start { -webkit-box-pack: start; @@ -292,7 +271,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins } // Version plus courte : @mixin flex-just($args...) { @include justify-content($args...); }</pre> -</div> <h3 id="align-items"><code>align-items</code></h3> @@ -303,7 +281,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins <li><a href="https://drafts.csswg.org/css-flexbox/#align-items-property">Spécification</a></li> </ul> -<div class="highlight"> <pre class="brush: css">@mixin align-items($value: stretch) { @if $value == flex-start { -webkit-box-align: start; @@ -321,7 +298,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins -webkit-align-items: $value; align-items: $value; }</pre> -</div> <h3 id="align-self"><code>align-self</code></h3> @@ -330,7 +306,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins <li><a href="https://drafts.csswg.org/css-flexbox/#align-items-property">Spécification</a></li> </ul> -<div class="highlight"> <pre class="brush: css">@mixin align-self($value: auto) { // No Webkit Box Fallback. -webkit-align-self: $value; @@ -343,7 +318,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins } align-self: $value; }</pre> -</div> <h3 id="align-content"><code>align-content</code></h3> @@ -354,7 +328,6 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins <li><a href="https://drafts.csswg.org/css-flexbox/#align-content-property">Spécification</a></li> </ul> -<div class="highlight"> <pre class="brush: css">@mixin align-content($value: stretch) { // No Webkit Box Fallback. -webkit-align-content: $value; @@ -366,5 +339,4 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins -ms-flex-line-pack: $value; } align-content: $value; -}</pre> -</div> +}</pre>
\ No newline at end of file diff --git a/files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html index 4ae046089b..5aac168f3d 100644 --- a/files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html +++ b/files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -12,7 +12,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox --- <div>{{CSSRef}}</div> -<p class="summary">Le module des boîtes flexibles, aussi appelé « <em>flexbox</em> », a été conçu comme un modèle de disposition unidimensionnel et comme une méthode permettant de distribuer l'espace entre des objets d'une interface ainsi que de les aligner. Dans cet article, nous verrons les fonctionnalités principales des <em>flexbox</em> que nous approfondirons ensuite dans d'autres articles.</p> +<p>Le module des boîtes flexibles, aussi appelé « <em>flexbox</em> », a été conçu comme un modèle de disposition unidimensionnel et comme une méthode permettant de distribuer l'espace entre des objets d'une interface ainsi que de les aligner. Dans cet article, nous verrons les fonctionnalités principales des <em>flexbox</em> que nous approfondirons ensuite dans d'autres articles.</p> <p>Lorsqu'on décrit les boîtes flexibles comme une méthode de disposition unidimensionnelle, on indique en fait que les <em>flexbox</em> gèrent une seule dimension à la fois : une ligne ou une colonne. Ce modèle est à comparer au modèle bidimensionnel de <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">la disposition en grille (CSS Grid)</a> qui contrôle à la fois les colonnes et les lignes.</p> @@ -33,21 +33,21 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox <p>Si on choisit la valeur <code>row</code> ou <code>row-reverse</code>, l'axe principal sera aligné avec la direction « en ligne » (<em>inline</em> direction) (c'est la direction logique qui suit le sens d'écriture du document).</p> -<p><img alt="If flex-direction is set to row the main axis runs along the row in the inline direction." src="https://mdn.mozillademos.org/files/15614/Basics1.png" style="display: block; height: 152px; margin: 0px auto; width: 522px;"></p> +<p><img alt="If flex-direction is set to row the main axis runs along the row in the inline direction." src="basics1.png"></p> <p>Si on choisit la valeur <code>column</code> ou <code>column-reverse</code>, l'axe principal suivra la direction de bloc (<em>block direction</em>) et progressera le long de l'axe perpendiculaire au sens d'écriture.</p> -<p><img alt="If flex-direction is set to column the main axis runs in the block direction." src="https://mdn.mozillademos.org/files/15615/Basics2.png" style="display: block; height: 227px; margin: 0px auto; width: 709px;"></p> +<p><img alt="If flex-direction is set to column the main axis runs in the block direction." src="basics2.png"></p> <h3 id="L'axe_secondaire_(cross_axis)">L'axe secondaire (<em>cross axis</em>)</h3> <p>L'axe secondaire est perpendiculaire à l'axe principal. Ainsi, si <code>flex-direction</code> vaut <code>row</code> ou <code>row-reverse</code>, l'axe secondaire suivra l'axe des colonnes.</p> -<p><img alt="If flex-direction is set to row then the cross axis runs in the block direction." src="https://mdn.mozillademos.org/files/15616/Basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p> +<p><img alt="If flex-direction is set to row then the cross axis runs in the block direction." src="basics3.png"></p> <p>Si l'axe principale est <code>column</code> ou <code>column-reverse</code>, l'axe secondaire suivra celui des lignes (horizontales).</p> -<p><img alt="If flex-direction is set to column then the cross axis runs in the inline direction." src="https://mdn.mozillademos.org/files/15617/Basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p> +<p><img alt="If flex-direction is set to column then the cross axis runs in the inline direction." src="basics4.png"></p> <p>Comprendre les liens entre les différents axes est crucial lorsqu'on commence à aligner/justifier des éléments flexibles sur un axe ou l'autre grâce aux fonctionnalités et propriétés des boîtes flexibles.</p> @@ -59,11 +59,11 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox <p>Si <code>flex-direction</code> vaut <code>row</code> et que nous travaillons sur un document écrit en français, la ligne de début de l'axe principal sera située à gauche et la ligne de fin sera située à droite.</p> -<p><img alt="Working in English the start edge is on the left." src="https://mdn.mozillademos.org/files/15618/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> +<p><img alt="Working in English the start edge is on the left." src="basics5.png"></p> <p>Si on travaille sur un document écrit dans une langue arabe, la ligne de début de l'axe principal sera à droite et la ligne de fin à gauche.</p> -<p><img alt="The start edge in a RTL language is on the right." src="https://mdn.mozillademos.org/files/15619/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p> +<p><img alt="The start edge in a RTL language is on the right." src="basics6.png"></p> <p>Dans les deux cas, la ligne de début de l'axe secondaire est située en haut et la ligne de fin de cet axe est située en bas car ces deux langues sont écrites horizontalement.</p> @@ -132,7 +132,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox <p>Prenons un conteneur de 500 pixels de large et qui contient trois éléments de 100 pixels de large. Il faut donc 300 pixels pour disposer ces éléments et il reste ainsi 200 pixels d'espace disponible. Si on ne modifie pas les valeurs initiales, l'espace disponible sera placé après le dernier élément.</p> -<p><img alt="This flex container has available space after laying out the items." src="https://mdn.mozillademos.org/files/15620/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p> +<p><img alt="This flex container has available space after laying out the items." src="basics7.png"></p> <p>Si on préfère que les éléments s'étirent pour occuper l'espace restant, il nous faut une méthode pour distribuer cet espace parmi les éléments. C'est le rôle des propriétés <code>flex-</code> qui s'appliquent aux éléments.</p> @@ -233,4 +233,4 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox <h2 id="Prochaines_étapes">Prochaines étapes</h2> -<p>Avec cet article, vous devriez comprendre les différentes fonctionnalités et concepts relatifs aux <em>flexbox</em>. Dans le prochain article, nous verrons <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Liens_entre_flexbox_et_les_autres_dispositions">comment cette spécification s'articule avec les autres modules CSS</a>.</p> +<p>Avec cet article, vous devriez comprendre les différentes fonctionnalités et concepts relatifs aux <em>flexbox</em>. Dans le prochain article, nous verrons <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">comment cette spécification s'articule avec les autres modules CSS</a>.</p> diff --git a/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html b/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html index 4565ac8844..c2d689cf0e 100644 --- a/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html +++ b/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html @@ -16,7 +16,7 @@ original_slug: >- --- <div>{{CSSRef}}</div> -<p class="summary">Dans ce guide, nous verrons les trois propriétés appliquées aux éléments flexibles qui permettent de contrôler leurs tailles et flexibilités le long de l'axe principal : {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}} et {{cssxref("flex-basis")}}. Comprendre le fonctionnement de ces propriétés est primordial pour maîtriser les boîtes flexibles.</p> +<p>Dans ce guide, nous verrons les trois propriétés appliquées aux éléments flexibles qui permettent de contrôler leurs tailles et flexibilités le long de l'axe principal : {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}} et {{cssxref("flex-basis")}}. Comprendre le fonctionnement de ces propriétés est primordial pour maîtriser les boîtes flexibles.</p> <h2 id="Un_premier_aperçu">Un premier aperçu</h2> @@ -35,7 +35,7 @@ original_slug: >- } </pre> -<p>Dans l'article sur <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">les concepts de base relatifs aux boîtes flexibles</a>, nous avons pu introduire ces propriétés. Ici, nous les étudierons en profondeur afin de comprendre comment le navigateur les interprète.</p> +<p>Dans l'article sur <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">les concepts de base relatifs aux boîtes flexibles</a>, nous avons pu introduire ces propriétés. Ici, nous les étudierons en profondeur afin de comprendre comment le navigateur les interprète.</p> <h2 id="Les_concepts_majeurs_relatifs_à_l'axe_principal">Les concepts majeurs relatifs à l'axe principal</h2> @@ -55,7 +55,7 @@ original_slug: >- <p>Si votre navigateur ne prend pas en charge ces mots-clés, les paragraphes seront affichés normalement. La capture d'écran qui suit illustre le résultat obtenu avec un navigateur compatible :</p> -<p><img alt="Le premier paragraphe est aussi large que le plus long mot qu'il contient alors que le second est étendu sur une seule ligne et dépasse." src="https://mdn.mozillademos.org/files/15658/ratios-size.png" style="display: block; height: 558px; margin: 0px auto; width: 1520px;"></p> +<p><img alt="Le premier paragraphe est aussi large que le plus long mot qu'il contient alors que le second est étendu sur une seule ligne et dépasse." src="ratios-size.png"></p> <p>Pour la suite de cet article, gardez à l'esprit l'impact de <code>min-content</code> et <code>max-content</code> lorsque nous verrons les propriétés <code>flex-grow</code> et <code>flex-shrink</code>.</p> @@ -63,11 +63,11 @@ original_slug: >- <p>Pour étudier ces propriétés, nous devons définir le concept d'<strong>espace libre positif et négatif</strong>. Lorsqu'un conteneur flexible possède un espace libre positif, il dispose de plus d'espace qu'il n'est nécessaire pour afficher les éléments flexibles qu'il contient. Si on a, par exemple, un conteneur dont la largeur mesure 500 pixels, la propriété {{cssxref("flex-direction")}} qui vaut <code>row</code> et trois éléments qui mesurent chacun 100 pixels, il reste alors 200 pixels d'espace libre positif qui pourrait être réparti entre les éléments si on le souhaitait.</p> -<p><img alt="Une image illustrant l'espace restant après que les éléments aient été affichés." src="https://mdn.mozillademos.org/files/15654/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p> +<p><img alt="Une image illustrant l'espace restant après que les éléments aient été affichés." src="basics7.png"></p> <p>L'espace libre négatif est l'espace supplémentaire qui aurait été nécessaire pour contenir tous les éléments à l'intérieur du conteneur flexible. Si on dispose d'un conteneur dont la largeur mesure 500 pixels et trois éléments flexibles dont chacun mesure 200, l'espace total occupé mesure 600 pixels et on a donc 100 pixels d'espace libre négatif. Cet espace pourrait être retiré des éléments afin qu'ils soient contenus dans le conteneur.</p> -<p><img alt="Les objets dépassent du conteneur." src="https://mdn.mozillademos.org/files/15655/ratios1.png" style="display: block; height: 198px; margin: 0px auto; width: 634px;"></p> +<p><img alt="Les objets dépassent du conteneur." src="ratios1.png"></p> <p>C'est cette distribution de l'espace libre qu'il est nécessaire de comprendre afin d'étudier les différentes propriétés relatives aux propriétés flexibles.</p> @@ -101,11 +101,11 @@ original_slug: >- <p>Dans ce cas, <code>flex-basis</code> vaut <code>auto</code> et les objets n'ont pas de largeur explicite définie : ils sont donc dimensionnés automatiquement. Cela signifie que la boîte flexible utilisera la taille <code>max-content</code> des éléments. Après avoir disposé les objets, il reste de l'espace libre dans le conteneur flexible (ce qui correspond à la zone hachurée de la figure suivante) :</p> -<p><img alt="Une image illustrant l'espace libre positif avec une zone hachurée." src="https://mdn.mozillademos.org/files/15656/ratios2.png" style="display: block; height: 100px; margin: 0px auto; width: 634px;"></p> +<p><img alt="Une image illustrant l'espace libre positif avec une zone hachurée." src="ratios2.png"></p> <p>On utilise ici une valeur <code>flex-basis</code> égale à la taille du contenu, l'espace disponible qui peut être distribué est donc égal à la taille du conteneur (ici sa largeur) moins la taille des éléments. Cet espace est partagé équitablement entre les différents objets. Ainsi, l'objet le plus grand finira avec une taille plus grande, car sa taille de départ est plus importante bien que la même quantité d'espace restant ait été affectée aux autres objets :</p> -<p><img alt="L'espace positif est réparti entre les éléments." src="https://mdn.mozillademos.org/files/15657/ratios3.png" style="display: block; height: 100px; margin: 0px auto; width: 634px;"></p> +<p><img alt="L'espace positif est réparti entre les éléments." src="ratios3.png"></p> <p>Si on souhaite obtenir trois objets de la même taille alors qu'ils ont des tailles initiales différentes, on pourra utiliser :</p> @@ -197,6 +197,6 @@ original_slug: >- <h3 id="Les_autres_façons_de_distribuer_l'espace">Les autres façons de distribuer l'espace</h3> -<p>Si on ne souhaite pas ajouter d'espace aux objets, on pourra tout aussi bien répartir cet espace libre entre les objets ou autour grâce aux propriétés d'alignement vu dans <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">le guide sur l'alignement</a>. La propriété {{cssxref("justify-content")}} permettra de répartir cet espace entre les objets ou autour d'eux. Les marges automatiques peuvent être utilisées sur les objets flexibles afin d'absorber l'espace et de créer des gouttières entre ces objets.</p> +<p>Si on ne souhaite pas ajouter d'espace aux objets, on pourra tout aussi bien répartir cet espace libre entre les objets ou autour grâce aux propriétés d'alignement vu dans <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">le guide sur l'alignement</a>. La propriété {{cssxref("justify-content")}} permettra de répartir cet espace entre les objets ou autour d'eux. Les marges automatiques peuvent être utilisées sur les objets flexibles afin d'absorber l'espace et de créer des gouttières entre ces objets.</p> <p>Tout ces outils relatifs aux boîtes flexibles vous permettent d'accomplir la plupart des dispositions et n'auront plus de secret au fur et à mesure de vos essais et expérimentations.</p> diff --git a/files/fr/web/css/css_flexible_box_layout/index.html b/files/fr/web/css/css_flexible_box_layout/index.html index 46576643ce..a460f31765 100644 --- a/files/fr/web/css/css_flexible_box_layout/index.html +++ b/files/fr/web/css/css_flexible_box_layout/index.html @@ -23,7 +23,6 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout <h3 id="Propriétés_CSS">Propriétés CSS</h3> -<div class="index"> <ul> <li>{{cssxref("flex")}}</li> <li>{{cssxref("flex-basis")}}</li> @@ -34,13 +33,11 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout <li>{{cssxref("flex-wrap")}}</li> <li>{{cssxref("order")}}</li> </ul> -</div> <h3 id="Propriétés_relatives_à_l'alignement">Propriétés relatives à l'alignement</h3> <p>Les propriétés <code>align-content</code>, <code>align-self</code>, <code>align-items</code> et <code>justify-content</code> étaient initialement définies dans la spécification Flexbox mais sont désormais définies dans la spécification sur l'alignement des boîtes et la spécification Flexbox fait référence à cette nouvelle spécification pour les définitions à jour. Des propriétés d'alignement additionnelles ont également été définies dans le module de spécification <em>Box Alignment</em>.</p> -<div class="index"> <ul> <li>{{cssxref("align-content")}}</li> <li>{{cssxref("align-items")}}</li> @@ -52,11 +49,9 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout <li>{{cssxref("column-gap")}}</li> <li>{{cssxref("gap")}}</li> </ul> -</div> <h3 id="Termes_du_glossaire">Termes du glossaire</h3> -<div class="index"> <ul> <li><a href="/fr/docs/Glossary/Flexbox">Flexbox / boîte flexible</a></li> <li><a href="/fr/docs/Glossary/Flex_Container">Conteneur flexible</a></li> @@ -64,7 +59,6 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout <li><a href="/fr/docs/Glossary/Main_Axis">Axe principal</a></li> <li><a href="/fr/docs/Glossary/Cross_Axis">Axe secondaire</a></li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html b/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html index 17420014c9..b962f9eb69 100644 --- a/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html +++ b/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html @@ -15,7 +15,7 @@ original_slug: >- --- <p>{{CSSRef}}</p> -<p class="summary">Les boîtes flexibles ont été conçues comme une méthode de disposition unidimensionnelle. Autrement dit, elles permettent de disposer des éléments en lignes ou en colonnes mais pas en lignes et en colonnes en même temps. Il existe toutefois la possibilité de passer des éléments flexibles à la ligne pour créer de nouvelles lignes horizontales si {{cssxref("flex-direction")}} vaut <code>row</code> ou de nouvelles colonnes si <code>flex-direction</code> vaut <code>column</code>. Dans ce guide, nous verrons comment cela fonctionne, les cas pour lesquels cela a été prévu et les situations qui nécessitent plutôt d'utiliser <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">une disposition en grille (<em>CSS Grid</em>)</a>.</p> +<p>Les boîtes flexibles ont été conçues comme une méthode de disposition unidimensionnelle. Autrement dit, elles permettent de disposer des éléments en lignes ou en colonnes mais pas en lignes et en colonnes en même temps. Il existe toutefois la possibilité de passer des éléments flexibles à la ligne pour créer de nouvelles lignes horizontales si {{cssxref("flex-direction")}} vaut <code>row</code> ou de nouvelles colonnes si <code>flex-direction</code> vaut <code>column</code>. Dans ce guide, nous verrons comment cela fonctionne, les cas pour lesquels cela a été prévu et les situations qui nécessitent plutôt d'utiliser <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">une disposition en grille (<em>CSS Grid</em>)</a>.</p> <h2 id="Créer_des_passages_à_la_ligne">Créer des passages à la ligne</h2> @@ -82,7 +82,7 @@ original_slug: >- <p>Dans l'exemple qui suit, on a un conteneur flexible sans passage à la ligne. Le troisième élément possède plus de contenu que les autres mais est paramétré avec <code>visibility: collapse</code> et le conteneur flexible conserve donc une toise pour la hauteur nécessaire à l'affichage de cet élément. Si on retire <code>visibility: collapse</code> ou qu'on modifie la valeur de <code>visible</code>, on pourra voir l'élément disparaître et l'espace être redistribué entre les éléments qui ne sont pas repliés. La hauteur du conteneur flexible ne devrait pas changer.</p> <div class="note"> -<p><strong>Note </strong>: Il est nécessaire d'utiliser Firefox pour les deux exemples présentés ensuite car Chrome et Safari considèrent <code>collapse</code> comme équivalent à <code>hidden</code>.</p> +<p><strong>Note :</strong> Il est nécessaire d'utiliser Firefox pour les deux exemples présentés ensuite car Chrome et Safari considèrent <code>collapse</code> comme équivalent à <code>hidden</code>.</p> </div> <p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}</p> diff --git a/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.html b/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.html index c50e95a958..5fc57819e1 100644 --- a/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.html +++ b/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.html @@ -14,7 +14,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Ordonner_éléments_flexibles --- <p>{{CSSRef}}</p> -<p class="summary">Les nouvelles méthodes de disposition telles que les boîtes flexibles (<em>flexbox</em>) et la grille CSS (<em>CSS Grid</em>) apportent la possibilité de contrôler l'ordre du contenu. Dans cet article, nous verrons comment changer l'ordre visuel du contenu grâce aux boîtes flexibles. Nous examinerons également les conséquences de cette réorganisation du point de vue de l'accessibilité.</p> +<p>Les nouvelles méthodes de disposition telles que les boîtes flexibles (<em>flexbox</em>) et la grille CSS (<em>CSS Grid</em>) apportent la possibilité de contrôler l'ordre du contenu. Dans cet article, nous verrons comment changer l'ordre visuel du contenu grâce aux boîtes flexibles. Nous examinerons également les conséquences de cette réorganisation du point de vue de l'accessibilité.</p> <h2 id="Inverser_l'affichage_des_éléments">Inverser l'affichage des éléments</h2> @@ -29,19 +29,19 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Ordonner_éléments_flexibles <p>Les deux premières valeurs permettent de conserver l'ordre des éléments tels qu'ils apparaissent dans le document source et de les afficher les uns à la suite des autres à partir de la ligne du début.</p> -<p><img alt="Les objets sont affichés sur une ligne horizontale qui commence à gauche." src="https://mdn.mozillademos.org/files/15649/Basics1.png" style="display: flex; height: 152px; margin: 0px auto; width: 522px;"></p> +<p><img alt="Les objets sont affichés sur une ligne horizontale qui commence à gauche." src="basics1.png"></p> -<p><img alt="Les objets sont affichés sur une colonne qui commence en haut." src="https://mdn.mozillademos.org/files/15650/align10.png" style="display: flex; height: 273px; margin: 0px auto; width: 709px;"></p> +<p><img alt="Les objets sont affichés sur une colonne qui commence en haut." src="align10.png"></p> <p>Les deux valeurs suivantes inversent l'ordre des éléments en échangeant les lignes de début et de fin.</p> -<p><img alt="Les éléments sont affichés dans l'ordre inverse et commencent à droite." src="https://mdn.mozillademos.org/files/15651/align9.png" style="display: flex; height: 152px; margin: 0px auto; width: 631px;"></p> +<p><img alt="Les éléments sont affichés dans l'ordre inverse et commencent à droite." src="align9.png"></p> -<p><img alt="Les éléments sont affichés en colonne et dans l'ordre inverse, ils commencent par le bas." src="https://mdn.mozillademos.org/files/15652/align11.png" style="display: flex; height: 273px; margin: 0px auto; width: 709px;"></p> +<p><img alt="Les éléments sont affichés en colonne et dans l'ordre inverse, ils commencent par le bas." src="align11.png"></p> <p>Rappelons ici que les lignes de début et de fin sont liées aux modes d'écritures. Les exemples en lignes ci-avant illustrent comment <code>row</code> et <code>row-reverse</code> fonctionnent dans une langue qui s'écrit de gauche à droite (le français par exemple). Si on travaille avec une langue écrite de droite à gauche (l'arabe par exemple), <code>row</code> correspondrait au côté droit et <code>row-reverse</code> au côté gauche.</p> -<p><img alt="Des conteneurs flexibles avec des lettres arabes illustrant comment le contenu commence à droite normalement et commence à gauche lorsqu'on utilise row-reverse." src="https://mdn.mozillademos.org/files/15647/order-rtl.png" style="display: flex; height: 302px; margin: 0px auto; width: 528px;"></p> +<p><img alt="Des conteneurs flexibles avec des lettres arabes illustrant comment le contenu commence à droite normalement et commence à gauche lorsqu'on utilise row-reverse." src="order-rtl.png"></p> <p>Cette méthode peut donc sembler efficace pour afficher des éléments dans un ordre inversé. Toutefois, il faut garder à l'esprit que seul l'<em>affichage</em> est inversé. Sur ce sujet, la spécification explique :</p> @@ -58,7 +58,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Ordonner_éléments_flexibles </blockquote> <div class="note"> -<p><strong>Note </strong>: Pendant plusieurs années, Firefox possédait un bug avec lequel il essayait de suivre l'ordre visuel plutôt que l'ordre de la source, à la différence des autres navigateurs. Ce bug a été corrigé. Il faut toujours considérer l'ordre des éléments dans le document source comme étant l'ordre logique, tous les agents utilisateurs modernes respectent la spécification à cet égard.</p> +<p><strong>Note :</strong> Pendant plusieurs années, Firefox possédait un bug avec lequel il essayait de suivre l'ordre visuel plutôt que l'ordre de la source, à la différence des autres navigateurs. Ce bug a été corrigé. Il faut toujours considérer l'ordre des éléments dans le document source comme étant l'ordre logique, tous les agents utilisateurs modernes respectent la spécification à cet égard.</p> </div> <p>Dans l'exemple qui suit, nous avons ajouté une mise en forme sur le focus afin que vous puissiez voir quel lien est actif lorsque vous naviguez au clavier. Si vous modifier la valeur de <code>flex-direction</code>, vous pouvez voir que la navigation au clavier continue de suivre l'ordre dans lequel les éléments sont écrits dans le document source.</p> @@ -93,7 +93,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Ordonner_éléments_flexibles <li>Quatrième élément selon la source : <code>order: 3</code></li> </ul> -<p><img alt="Les éléments contiennent un nombre qui illustre leur ordre selon la source et on peut voir que leur ordre visuel a été réarrangé." src="https://mdn.mozillademos.org/files/15653/order-property.png" style="display: flex; height: 100px; margin: 0px auto; width: 634px;"></p> +<p><img alt="Les éléments contiennent un nombre qui illustre leur ordre selon la source et on peut voir que leur ordre visuel a été réarrangé." src="order-property.png"></p> <p>Vous pouvez manipuler les valeurs dans l'exemple qui suit afin de voir comment l'ordre est modifié. Essayez également de modifier la valeur de <code>flex-direction</code> pour utiliser <code>row-reverse</code> — la ligne de début est inversée et l'ordre des éléments commence à partir du côté opposé.</p> @@ -119,7 +119,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Ordonner_éléments_flexibles <ul> <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Une déconnexion entre les boîtes flexibles et la navigation au clavier (en anglais)</a></li> - <li><a href="http://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html">L'ordre de la source HTML vs l'ordre d'affichage CSS (en anglais)</a></li> + <li><a href="https://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html">L'ordre de la source HTML vs l'ordre d'affichage CSS (en anglais)</a></li> <li><a href="https://alastairc.ac/2017/06/the-responsive-order-conflict">Le conflit entre l'ordre <em>responsive</em> et le focus clavier (en anglais)</a></li> </ul> @@ -129,7 +129,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Ordonner_éléments_flexibles <p>Prenons comme exemple une disposition avec des cartes dont chacune contient une nouvelle. Le titre de la nouvelle est l'élément qui doit être mis en avant et celui sur lequel l'utilisateur doit arriver s'il navigue au clavier à la recherche d'un contenu à lire. Chaque carte possède également une date de façon à obtenir un <em>design</em> comme celui-ci.</p> -<p><img alt="Un composant avec une date, un titre puis un contenu." src="https://mdn.mozillademos.org/files/15648/order-card.png" style="height: 400px; width: 618px;"></p> +<p><img alt="Un composant avec une date, un titre puis un contenu." src="order-card.png"></p> <p>Visuellement, la date apparaît au-dessus du titre. Toutefois, si la carte était lue par un lecteur d'écran, on préfèrerait que le titre soit annoncé en premier puis que soit ensuite lue la date de publication. Pour ce faire, on peut utiliser la propriété <code>order</code>.</p> diff --git a/files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html b/files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html index a1b391b7ac..d48ee13ef4 100644 --- a/files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html +++ b/files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html @@ -14,10 +14,10 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Liens_entre_flexbox_et_les_autres --- <div>{{CSSRef}}</div> -<p class="summary">Dans cet article, nous verrons comment les boîtes flexibles interagissent avec les autres modules CSS. Nous verrons quelles sont les spécifications qui décrivent les boîtes flexibles et pourquoi les boîtes flexibles sont différentes des autres modules.</p> +<p>Dans cet article, nous verrons comment les boîtes flexibles interagissent avec les autres modules CSS. Nous verrons quelles sont les spécifications qui décrivent les boîtes flexibles et pourquoi les boîtes flexibles sont différentes des autres modules.</p> <div class="note"> -<p><strong>Note </strong>: Dans les versions 1 et 2 de CSS, la spécification était « monolithique » et décrite dans un seul document. Évoluant vers un langage riche possédant de nombreuses fonctionnalité, la maintenance de cette spécification unique est devenue problématiques, certaines parties évoluant à différentes vitesses. La spécification CSS a donc été modularisée et ce sont ces différents modules qui constituent CSS aujourd'hui. Ces modules sont liés les uns aux autres et sont chacun à différents stades de développement.</p> +<p><strong>Note :</strong> Dans les versions 1 et 2 de CSS, la spécification était « monolithique » et décrite dans un seul document. Évoluant vers un langage riche possédant de nombreuses fonctionnalité, la maintenance de cette spécification unique est devenue problématiques, certaines parties évoluant à différentes vitesses. La spécification CSS a donc été modularisée et ce sont ces différents modules qui constituent CSS aujourd'hui. Ces modules sont liés les uns aux autres et sont chacun à différents stades de développement.</p> </div> <h2 id="Le_module_d'alignement_des_boîtes_(Box_Alignment)">Le module d'alignement des boîtes (<em>Box Alignment</em>)</h2> @@ -40,7 +40,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Liens_entre_flexbox_et_les_autres <h2 id="Les_modes_d'écritures_(Writing_Modes)">Les modes d'écritures (<em>Writing Modes</em>)</h2> -<p>Dans l'article sur <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">les concepts de bases relatifs aux <em>flexbox</em></a>, nous avons vu que les boîtes flexibles prenaient en compte le mode d'écriture (la direction du texte). Les différents modes d'écritures sont décrits dans la spécification CSS <a href="https://www.w3.org/TR/css-writing-modes-3/">Writing Modes</a> qui détaille comment CSS prend en charge les différents modes d'écritures qui existent dans le monde. Cette spécification permet notamment de comprendre les directions <strong>de bloc</strong> et <strong>en ligne</strong> qui sont fondamentales pour les axes principal et secondaires des boîtes flexibles.</p> +<p>Dans l'article sur <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">les concepts de bases relatifs aux <em>flexbox</em></a>, nous avons vu que les boîtes flexibles prenaient en compte le mode d'écriture (la direction du texte). Les différents modes d'écritures sont décrits dans la spécification CSS <a href="https://www.w3.org/TR/css-writing-modes-3/">Writing Modes</a> qui détaille comment CSS prend en charge les différents modes d'écritures qui existent dans le monde. Cette spécification permet notamment de comprendre les directions <strong>de bloc</strong> et <strong>en ligne</strong> qui sont fondamentales pour les axes principal et secondaires des boîtes flexibles.</p> <p>On notera qu'il est possible de modifier le mode d'écriture d'un document pour d'autres raisons que des raisons linguistiques. Vous pouvez <a href="https://24ways.org/2016/css-writing-modes/">consulter cet article</a> pour en savoir plus sur les différentes façons d'utiliser les modes d'écriture, que ce soit en fonction de la langue du contenu ou pour des raisons créatives.</p> @@ -58,7 +58,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Liens_entre_flexbox_et_les_autres <p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} </p> -<p>Actuellement, seul Firefox prend en charge <code>sideways-rl</code> et <code>sideways-lr</code>. Il existe également certains problèmes relatifs à <code>writing-mode</code> et aux boîtes flexibles. Pour plus d'informations, vous pouvez consulter <a href="/fr/docs/Web/CSS/writing-mode#Compatibilité_des_navigateurs">les informations de compatibilité pour la propriété <code>writing-mode</code></a>. Toutefois, si vous souhaitez utiliser les modes d'écritures pour votre site/application, il est fortement conseillé de tester les résultats obtenus, ne serait-ce que parce que cela peut fortement nuire à la lisibilité !</p> +<p>Actuellement, seul Firefox prend en charge <code>sideways-rl</code> et <code>sideways-lr</code>. Il existe également certains problèmes relatifs à <code>writing-mode</code> et aux boîtes flexibles. Pour plus d'informations, vous pouvez consulter <a href="/fr/docs/Web/CSS/writing-mode#compatibilité_des_navigateurs">les informations de compatibilité pour la propriété <code>writing-mode</code></a>. Toutefois, si vous souhaitez utiliser les modes d'écritures pour votre site/application, il est fortement conseillé de tester les résultats obtenus, ne serait-ce que parce que cela peut fortement nuire à la lisibilité !</p> <p>On notera que la propriété <code>writing-mode</code> CSS ne doit pas être utilisée pour modifier le mode d'écriture d'un document entier. Cela doit être fait avec HTML en ajoutant un attribut <code>dir</code> et <code>lang</code> sur l'élément <code>html</code> afin d'indiquer la direction du texte par défaut et la langue du document. Ainsi, le document serait correctement affiché, même si le CSS n'était pas chargé.</p> @@ -66,7 +66,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Liens_entre_flexbox_et_les_autres <p>La spécification sur les boîtes flexibles contient <a href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">une définition</a> de ce qui se produit lorsqu'un élément utilisant une autre méthode de disposition devient un élément flexible (par exemple : un élément est positionné de façon flottante et son élément parent devient un conteneur flexible). Elle décrit également comment un conteneur flexible s'inscrit dans une disposition.</p> -<p>Un élément avec <code>display: flex</code> se comportera majoritairement comme un conteneur de bloc qui établit un bloc englobant. Les éléments flottants ne rentreront pas dans ce conteneur et <a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges">les marges des conteneurs ne fusionneront pas</a>.</p> +<p>Un élément avec <code>display: flex</code> se comportera majoritairement comme un conteneur de bloc qui établit un bloc englobant. Les éléments flottants ne rentreront pas dans ce conteneur et <a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">les marges des conteneurs ne fusionneront pas</a>.</p> <p>Pour un élément flexible, si celui-ci était avant un élément flottant ou dégagé (<em>cleared</em>) et qu'il devient flexible car son élément parent reçoit <code>display: flex</code>, le flottement et le dégagement ne s'appliquent plus. L'élément ne sera pas retiré du flux normal (ce qui aurait lieu avec un flottement). Si on a utilisé la propriété {{cssxref("vertical-align")}} avec <code>inline-block</code> ou si on a utilisé une disposition tabulaire, cela n'aura plus d'effet et on pourra utiliser les propriétés d'alignement des boîtes flexibles à la place.</p> @@ -98,7 +98,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Liens_entre_flexbox_et_les_autres <p>De façon générale, si vous ajoutez des marges autour d'éléments flexibles afin que ceux-ci soient alignés, vous devriez utiliser une méthode de disposition bidimensionnelle comme la grille CSS qui vous permettra de mieux organiser votre contenu. La taille du composant à mettre en forme n'a pas d'importance, on n'utilisera pas plus les boîtes flexibles pour un « petit » composant et la grille pour un « grand ». Essayez les différentes méthodes, profitez de la liberté de choix qui existe désormais avec ces outils.</p> -<p>Pour approfondir cette comparaison entre la grille et les boîtes flexibles, vous pouvez consulter <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition">cet article à propos des relations entre la grille CSS et les autres méthodes de disposition</a>. Cet article détaille les nombreuses différences entre la grille CSS et les boîtes flexibles ; il illustre aussi les fonctionnalités supplémentaires provenant de la grille. Cet article pourra vous aider à choisir la méthode de disposition à privilégier.</p> +<p>Pour approfondir cette comparaison entre la grille et les boîtes flexibles, vous pouvez consulter <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">cet article à propos des relations entre la grille CSS et les autres méthodes de disposition</a>. Cet article détaille les nombreuses différences entre la grille CSS et les boîtes flexibles ; il illustre aussi les fonctionnalités supplémentaires provenant de la grille. Cet article pourra vous aider à choisir la méthode de disposition à privilégier.</p> <h2 id="Les_boîtes_flexibles_et_display_contents">Les boîtes flexibles et <code>display: contents</code></h2> @@ -117,7 +117,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Liens_entre_flexbox_et_les_autres <p>On notera que cela ne retire que la boîte de la disposition. Les éléments fils au deuxième niveau ne deviennent pas des éléments fils directs pour d'autres notions. On peut voir dans l'exemple qu'on utilise un sélecteur sur les éléments fils directs pour gérer l'arrière-plan et les bordures : ces styles n'ont pas été appliqués aux éléments fils de deuxième rang. Ces éléments ont été disposés comme des éléments flexibles, mais ils ne récupèrent pas la mise en forme des éléments fils directs.</p> <div class="warning"> -<p><strong>Attention !</strong> Utiliser <code>display: contents</code> entraînera la suppression de l'élément dans l'arbre d'accessibilité et les lecteurs d'écran ne pourront pas en voir le contenu (comme si on avait utilisé <code>display: none</code>). La valeur <code>contents</code> doit uniquement être utilisée pour les éléments de présentation (et pas de contenu).</p> +<p><strong>Attention :</strong> Utiliser <code>display: contents</code> entraînera la suppression de l'élément dans l'arbre d'accessibilité et les lecteurs d'écran ne pourront pas en voir le contenu (comme si on avait utilisé <code>display: none</code>). La valeur <code>contents</code> doit uniquement être utilisée pour les éléments de présentation (et pas de contenu).</p> </div> <p>En retirant la boîte de l'élément parent, on ne peut pas utiliser cette boîte pour, par exemple, ajouter une couleur d'arrière-plan commune aux éléments fils imbriqués. Si on retire <code>display: contents</code> dans l'exemple, on peut voir que l'arrière-plan orange rattaché à l'élément disparaît avec la boîte.</p> diff --git a/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html index fdb4d31770..78a2dc9952 100644 --- a/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html +++ b/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html @@ -11,11 +11,11 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Cas_utilisation_flexbox --- <p>{{CSSRef}}</p> -<p class="summary">Dans ce guide, nous verrons quels sont les cas d'utilisation classiques pour les boîtes flexibles et lorsque cette méthode est plus pertinente qu'une autre méthode de disposition.</p> +<p>Dans ce guide, nous verrons quels sont les cas d'utilisation classiques pour les boîtes flexibles et lorsque cette méthode est plus pertinente qu'une autre méthode de disposition.</p> <h2 id="Pourquoi_choisir_les_boîtes_flexibles">Pourquoi choisir les boîtes flexibles ?</h2> -<p>Dans un monde où la compatibilité entre navigateurs serait un lointain souvenir, on pourrait choisir d'utiliser les boîtes flexibles lorsqu'on souhaite organiser un ensemble d'élément dans une direction ou dans une autre. Lorsqu'on place les éléments, on souhaite contrôler les dimensions de ces éléments dans cette direction ou contrôler l'espacement ainsi créé entre les éléments. C'est ce pourquoi les boîtes flexibles ont été conçues. Vous pouvez approfondir les différences entre les boîtes flexibles et la disposition en grille CSS avec <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Liens_entre_flexbox_et_les_autres_dispositions">l'article sur les relations entre <em>flexbox</em> et les autres méthodes de disposition</a> où nous voyons comment s'inscrivent les boîtes flexibles dans le paysage de CSS.</p> +<p>Dans un monde où la compatibilité entre navigateurs serait un lointain souvenir, on pourrait choisir d'utiliser les boîtes flexibles lorsqu'on souhaite organiser un ensemble d'élément dans une direction ou dans une autre. Lorsqu'on place les éléments, on souhaite contrôler les dimensions de ces éléments dans cette direction ou contrôler l'espacement ainsi créé entre les éléments. C'est ce pourquoi les boîtes flexibles ont été conçues. Vous pouvez approfondir les différences entre les boîtes flexibles et la disposition en grille CSS avec <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">l'article sur les relations entre <em>flexbox</em> et les autres méthodes de disposition</a> où nous voyons comment s'inscrivent les boîtes flexibles dans le paysage de CSS.</p> <p>Dans la réalité, on utilise souvent les boîtes flexibles pour créer des organisations qu'il serait plus pertinent de construire avec une disposition en grille et pour lesquelles les boîtes flexibles sont une méthode de recours et offrent une certaine capacité d'alignement. Sur ce deuxième aspect, cela pourra évoluer lorsque l'alignement des boîtes sera implémenté dans la disposition en bloc. Dans ce guide, nous verrons quels sont les cas classiques où on utilise les boîtes flexibles aujourd'hui.</p> @@ -27,7 +27,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Cas_utilisation_flexbox <h3 id="L'espace_distribué_en_dehors_des_éléments">L'espace distribué en dehors des éléments</h3> -<p>Pour répartir l'espace entre les éléments ou autour d'eux, on pourra utiliser les propriétés d'alignement des boîtes flexibles et la propriété {{cssxref("justify-content")}}. Vous pouvez approfondir cette propriété avec le guide <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a>, qui décrit comment aligner des objets sur l'axe principal.</p> +<p>Pour répartir l'espace entre les éléments ou autour d'eux, on pourra utiliser les propriétés d'alignement des boîtes flexibles et la propriété {{cssxref("justify-content")}}. Vous pouvez approfondir cette propriété avec le guide <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligner des objets dans un conteneur flexible</a>, qui décrit comment aligner des objets sur l'axe principal.</p> <p>Dans l'exemple qui suit, on affiche les éléments en utilisant leur taille naturelle et on écrit <code>justify-content: space-between</code> afin de répartir l'espace équitablement entre chaque élément. Cette répartition de l'espace peut être modifiée en utilisant la valeur <code>space-around</code> ou, lorsqu'elle est prise en charge, la valeur <code>space-evenly</code>. On peut également utiliser <code>flex-start</code> afin de placer l'espace après les éléments ou encore <code>flex-end</code> pour placer l'espace avant les éléments voire <code>center</code> afin de centrer les éléments.</p> @@ -35,7 +35,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Cas_utilisation_flexbox <h3 id="L'espace_distribué_au_sein_des_éléments">L'espace distribué au sein des éléments</h3> -<p>On pourrait aussi répartir cet espace disponible afin d'agrandir les éléments plutôt que de les espacer. Dans ce cas, on utilisera les propriétés {{cssxref("flex")}} afin de permettre aux éléments de grandir/rétrécir proportionnellement les uns aux autres, comme nous avons pu le détailler dans <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des éléments flexibles le long de l'axe principal</a>.</p> +<p>On pourrait aussi répartir cet espace disponible afin d'agrandir les éléments plutôt que de les espacer. Dans ce cas, on utilisera les propriétés {{cssxref("flex")}} afin de permettre aux éléments de grandir/rétrécir proportionnellement les uns aux autres, comme nous avons pu le détailler dans <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Contrôler les proportions des éléments flexibles le long de l'axe principal</a>.</p> <p>Si on souhaite que tous les éléments de la barre aient la même largeur, on utilisera <code>flex: auto</code> qui correspond à la notation raccourcie de <code>flex: 1 1 auto</code> — tous les objets grandissent et rétrécissent de la même façon à partir d'une taille de base automatique. Cela signifie que le plus grand élément occupera plus d'espace.</p> @@ -47,7 +47,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Cas_utilisation_flexbox <p>Une autre façon d'aligner les éléments le long de l'axe principal consiste à utiliser des marges automatiques. Cela permet d'obtenir une barre où une partie des éléments sont alignés à gauche alors qu'un second groupe est aligné à droite.</p> -<p>Dans l'exemple qui suit, on utilise la technique des marges automatiques détaillée dans <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible#Utiliser_les_marges_automatiques_pour_aligner_sur_l'axe_principal">Utiliser les marges automatiques pour l'alignement sur l'axe principal</a>. Les éléments sont alignés le long de l'axe principal avec <code>flex-start</code>, ce qui correspond au comportement initial (par défaut) des boîtes flexibles, et on affecte une marge automatique à gauche pour les éléments qu'on souhaite aligner à droite. Dans le code de l'exemple, vous pouvez déplacer la classe pour l'appliquer sur un autre élément afin de voir comment la césure se déplace.</p> +<p>Dans l'exemple qui suit, on utilise la technique des marges automatiques détaillée dans <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#utiliser_les_marges_automatiques_pour_aligner_sur_l'axe_principal">Utiliser les marges automatiques pour l'alignement sur l'axe principal</a>. Les éléments sont alignés le long de l'axe principal avec <code>flex-start</code>, ce qui correspond au comportement initial (par défaut) des boîtes flexibles, et on affecte une marge automatique à gauche pour les éléments qu'on souhaite aligner à droite. Dans le code de l'exemple, vous pouvez déplacer la classe pour l'appliquer sur un autre élément afin de voir comment la césure se déplace.</p> <p>Dans cet exemple, on utilise également des marges sur les éléments flexibles afin de créer des gouttières entre les éléments ainsi qu'une marge négative sur le conteneur afin que les éléments aux extrémités soient bien alignés sur les bords gauche et droit. Tant que les propriétés <code>gap</code> de la spécification sur l'alignement des boîtes (<em>Box Alignment</em>) ne sont pas implémentées pour les boîtes flexibles, il nous faut utiliser les marges de cette façon si on souhaite créer une gouttière entre les éléments.</p> @@ -67,7 +67,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Cas_utilisation_flexbox <p>Qu'on utilise les boîtes flexibles ou les grilles CSS afin d'organiser une liste de cartes, ces méthodes fonctionnent uniquement sur les éléments fils directs du conteneur flexible ou du conteneur de grille. Cela signifie que si on dispose d'une quantité de contenu variable, la carte s'étirera sur toute la hauteur de la grille ou sur toute la hauteur du conteneur flexible. Tout le contenu à l'intérieur utilise une disposition en bloc classique qui signifie que le pied de page d'une carte avec moins de contenu sera plus haut que celui d'une carte disposant de plus de contenu pour lequel le pied est bien aligné en bas de la carte.</p> -<p><img alt="Deux composants "carte" montrant que l'élément contenant le texte ne s'étire pas." src="https://mdn.mozillademos.org/files/15669/flex-cards.png" style="height: 626px; width: 964px;"></p> +<p><img alt="Deux composants "carte" montrant que l'élément contenant le texte ne s'étire pas." src="flex-cards.png"></p> <p>On peut résoudre ce problème avec les boîtes flexibles. Pour commencer, on transforme la carte en conteneur flexible avec {{cssxref("flex-direction")}}<code>: column</code>. Ensuite, on affecte un coefficient <code>flex: 1</code> à la zone du contenu (ce qui correspond à la notation raccourcie <code>flex: 1 1 0</code>) : l'élément pourra s'étirer ou se rétrécir avec une base <code>0</code>. Comme c'est le seul élément de la carte qui peut grandir, il occupera tout l'espace encore disponible dans le conteneur flexible et poussera le pied en bas de carte. Dans l'exemple qui suit, si on retire la propriété <code>flex</code>, on peut voir le pied remonter pour être inscrit directement après le contenu.</p> @@ -103,7 +103,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Cas_utilisation_flexbox flex: 1; }</pre> -<p>On pourrait aussi utiliser différents coefficients {{cssxref("flex-grow")}} pour chaque côté. Utiliser <code>flex: 1</code> pour le côté avec l'image et <code>flex: 3</code> pour le côté avec la description signifierait qu'ils partiraient tous les deux avec une base <code>flex-basis</code> <code>0</code> et que l'espace serait distribué dans des proportions différentes correspondantes aux valeurs de <code>flex-grow</code>. Les propriétés flexibles que nous utilisons ici sont décrites en détail dans le guide <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des éléments flexibles le long de l'axe principal</a>.</p> +<p>On pourrait aussi utiliser différents coefficients {{cssxref("flex-grow")}} pour chaque côté. Utiliser <code>flex: 1</code> pour le côté avec l'image et <code>flex: 3</code> pour le côté avec la description signifierait qu'ils partiraient tous les deux avec une base <code>flex-basis</code> <code>0</code> et que l'espace serait distribué dans des proportions différentes correspondantes aux valeurs de <code>flex-grow</code>. Les propriétés flexibles que nous utilisons ici sont décrites en détail dans le guide <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Contrôler les proportions des éléments flexibles le long de l'axe principal</a>.</p> <pre class="brush: css">.media .content { flex: 3; diff --git a/files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html b/files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html index aa81bb277c..f4e278deeb 100644 --- a/files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html +++ b/files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_no --- <div>{{CSSRef}}</div> -<p class="summary">Dans ce guide, nous verrons le comportement des éléments de bloc et des éléments en ligne lorsqu'ils sont placés dans le flux normal.</p> +<p>Dans ce guide, nous verrons le comportement des éléments de bloc et des éléments en ligne lorsqu'ils sont placés dans le flux normal.</p> <p>Le flux normal est défini par <a href="https://www.w3.org/TR/CSS2/visuren.html#normal-flow">la spécification CSS 2.1</a> qui explique comment les boîtes du flux normal s'inscrivent dans le contexte de formatage. Les boîtes peuvent être de bloc (<em>block</em>) ou en ligne (<em>inline</em>) mais pas les deux à la fois. Les boîtes de bloc contribuent au contexte de formatage des blocs et les boîtes en ligne contribuent au contexte de formatage en ligne.</p> @@ -34,11 +34,11 @@ original_slug: Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_no <p>Les éléments de bloc organisés avec un mode d'écriture horizontal (un document en français par exemple) sont disposés verticalement les uns au dessus des autres.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/16125/mdn-horizontal.png" style="height: 382px; width: 521px;"></p> +<p><img alt="" src="mdn-horizontal.png"></p> <p>Avec un mode d'écriture vertical, les boîtes seraient organisées horizontalement.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/16126/mdn-vertical.png" style="height: 382px; width: 418px;"></p> +<p><img alt="" src="mdn-vertical.png"></p> <p>Dans la suite de ce guide, nous prendrons l'hypothèse d'un mode d'écriture horizontal. Toutefois, tout ce qui est décrit fonctionne de la même façon pour un mode d'écriture vertical.</p> @@ -62,12 +62,12 @@ original_slug: Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_no <p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-collapsing.html", '100%', 500)}}</p> -<p>Pour en savoir plus à propos de la fusion des marges, vous pouvez lire <a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges">l'article dédié à la fusion des marges</a>.</p> +<p>Pour en savoir plus à propos de la fusion des marges, vous pouvez lire <a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">l'article dédié à la fusion des marges</a>.</p> <div class="note"> <p><strong>Note :</strong> Si vous n'êtes pas certain⋅e que la fusion des marges a lieu, vous pouvez utiliser les outils de développement de votre navigateur afin de voir la valeur réellement utilisée pour les marges.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/16124/box-model.png" style="height: 848px; width: 828px;"></p> +<p><img alt="" src="box-model.png"></p> </div> <h2 id="Les_éléments_qui_participent_à_un_contexte_de_formatage_en_ligne">Les éléments qui participent à un contexte de formatage en ligne</h2> @@ -84,7 +84,7 @@ original_slug: Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_no <p>{{EmbedGHLiveSample("css-examples/flow/block-inline/line-box.html", '100%', 500)}}</p> -<p>Pour en savoir plus sur le comportement des boîtes en ligne et des boîtes de bloc, vous pouvez consulter <a href="/fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle">le guide sur le modèle de formatage visuel</a>.</p> +<p>Pour en savoir plus sur le comportement des boîtes en ligne et des boîtes de bloc, vous pouvez consulter <a href="/fr/docs/Web/CSS/Visual_formatting_model">le guide sur le modèle de formatage visuel</a>.</p> <h2 id="La_propriété_display_et_la_disposition_de_flux">La propriété <code>display</code> et la disposition de flux</h2> @@ -122,8 +122,8 @@ original_slug: Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_no <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS">Le module de spécification <em>CSS Basic Box Model</em> qui définit les propriétés de base pour le modèle de boîte</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Normal_Flow">Apprendre - le fonctionnement du flux normal</a></li> - <li><a href="/fr/docs/Web/HTML/Éléments_en_ligne">Les éléments HTML en ligne</a></li> - <li><a href="/fr/docs/Web/HTML/Éléments_en_bloc">Les éléments HTML de bloc</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Box_Model">Le module de spécification <em>CSS Basic Box Model</em> qui définit les propriétés de base pour le modèle de boîte</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Apprendre - le fonctionnement du flux normal</a></li> + <li><a href="/fr/docs/Web/HTML/Inline_elements">Les éléments HTML en ligne</a></li> + <li><a href="/fr/docs/Web/HTML/Block-level_elements">Les éléments HTML de bloc</a></li> </ul> diff --git a/files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.html b/files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.html index e657b8106c..a1c3966d64 100644 --- a/files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.html +++ b/files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_dépassement --- <div>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}</div> -<p class="summary">Lorsque le conteneur est trop petit pour son contenu, on obtient une situation de dépassement. Le comportement du dépassement est importante dès qu'on manipule des objets CSS dont la taille est contrainte. Dans ce guide, nous verrons le fonctionnement du dépassement avec le flux normal.</p> +<p>Lorsque le conteneur est trop petit pour son contenu, on obtient une situation de dépassement. Le comportement du dépassement est importante dès qu'on manipule des objets CSS dont la taille est contrainte. Dans ce guide, nous verrons le fonctionnement du dépassement avec le flux normal.</p> <h2 id="Qu'est-ce_que_le_dépassement">Qu'est-ce que le dépassement ?</h2> diff --git a/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html b/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html index 26ad17b532..2291678c48 100644 --- a/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html +++ b/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html @@ -8,7 +8,7 @@ tags: translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes original_slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture --- -<p class="summary">La spécification CSS 2.1, qui décrit le comportement classique du flux normal, prend l'hypothèse d'un mode d'écriture horizontal. <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal">Les propriétés liées à la disposition</a> devraient fonctionner de façon identique pour les modes d'écritures verticaux. Dans ce guide, nous verrons comment le flux normal se comporte selon les différents modes d'écriture.</p> +<p>La spécification CSS 2.1, qui décrit le comportement classique du flux normal, prend l'hypothèse d'un mode d'écriture horizontal. <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal">Les propriétés liées à la disposition</a> devraient fonctionner de façon identique pour les modes d'écritures verticaux. Dans ce guide, nous verrons comment le flux normal se comporte selon les différents modes d'écriture.</p> <p>Ce guide n'est pas un guide exhaustif sur l'utilisation des modes d'écriture en CSS. Son objectif est de documenter les interactions, éventuellement inattendues, entre le flux et les modes d'écriture. Pour plus de ressources à ce sujet, vous pouvez vour référer aux <a href="#Ressources_externes">ressources externes</a> ainsi qu'à la section <a href="#Voir_aussi">Voir aussi</a> en fin de page.</p> @@ -76,13 +76,13 @@ original_slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture <p>Dans la plupart des cas, la disposition de flux fonctionne comme on s'y attend lorsqu'on change le mode d'écriture du document ou d'une de ses parties. Les modes d'écritures peuvent être utilisés pour écrire correctement une langue ou pour des aspects créatifs. CSS facilite cette utilisation en introduisant des propriétés et des valeurs logiques qui fonctionnent de façon homogène quel que soit le mode d'écriture. On peut alors créer des composants qui fonctionneront avec différents modes d'écriture.</p> -<h2 id="Voir_aussi_2"><a id="Voir_aussi" name="Voir_aussi">Voir aussi</a></h2> +<h2 id="Voir_aussi">Voir aussi</h2> <ul> <li><a href="/fr/docs/Web/CSS/CSS_Writing_Modes">Les modes d'écritures</a></li> </ul> -<h2 id="Ressources_externes_2"><a id="Ressources_externes" name="Ressources_externes">Ressources externes</a></h2> +<h2 id="Ressources_externes">Ressources externes</h2> <ul> <li><em><a href="https://24ways.org/2016/css-writing-modes/">CSS Writing Modes (en anglais)</a></em> par Jen Simmons sur <em>24 Ways</em></li> diff --git a/files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html b/files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html index c9bb3ac9b3..5a796df22f 100644 --- a/files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html +++ b/files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Flow_Layout/Dans_le_flux_ou_en_dehors --- <div>{{CSSRef}}</div> -<p class="summary">Dans <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal">le précédent guide</a>, nous avons vu le fonctionnement de la disposition en ligne et en bloc dans le flux normal. Tous les éléments qui sont « dans » le flux seront disposés grâce à cette méthode.</p> +<p>Dans <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal">le précédent guide</a>, nous avons vu le fonctionnement de la disposition en ligne et en bloc dans le flux normal. Tous les éléments qui sont « dans » le flux seront disposés grâce à cette méthode.</p> <p>Dans l'exemple qui suit, on a un titre, un paragraphe, une liste puis un paragraphe final qui contient un élément <code>strong</code>. Le titre et les paragraphes sont des éléments de blocs et l'élément <code>strong</code> est un élément en ligne. La liste est affichée en utilisant les boîtes flexibles afin d'avoir les éléments de la liste sur une même ligne mais cette liste contribue bien à la disposition en ligne et en bloc car le conteneur a un type <code>display</code> externe qui vaut <code>block</code>.</p> diff --git a/files/fr/web/css/css_flow_layout/index.html b/files/fr/web/css/css_flow_layout/index.html index 236f7b9341..c4932f195c 100644 --- a/files/fr/web/css/css_flow_layout/index.html +++ b/files/fr/web/css/css_flow_layout/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/CSS_Flow_Layout --- <div>{{CSSRef}}</div> -<p class="summary">Le <em>flux normal</em> ou « disposition en flux » (<em>Flow Layout</em>) correspond à la façon dont les éléments de bloc et les éléments en ligne sont disposés avant tout changement apporté à leur disposition. Lorsqu'un élément est retiré du <em>flux</em>, il est traité indépendamment.</p> +<p>Le <em>flux normal</em> ou « disposition en flux » (<em>Flow Layout</em>) correspond à la façon dont les éléments de bloc et les éléments en ligne sont disposés avant tout changement apporté à leur disposition. Lorsqu'un élément est retiré du <em>flux</em>, il est traité indépendamment.</p> <p>Avec un flux normal, les <strong>éléments en ligne (<em>inline elements</em>)</strong> sont affichés dans la direction « en incise », c'est-à-dire dans le sens dans lequel les mots sont écrits selon <a href="/fr/docs/Web/CSS/CSS_Writing_Modes">le mode d'écriture</a> du document. Les <strong>éléments de bloc (<em>block elements</em>)</strong> sont affichés les uns après les autres, à la façon des paragraphes selon le mode d'écriture du document.</p> diff --git a/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.html b/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.html index db1a7ee0d7..6478b943bc 100644 --- a/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.html +++ b/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Flow_Layout/Explications_contextes_formatage --- <div>{{CSSRef}}</div> -<p class="summary">Dans cet article, nous aborderons le concept des contextes de formatage. Ceux-ci peuvent être de dfiférents types : contextes de formatage de bloc, contextes de formatage en ligne, contextes de formatage flexibles. Nous verrons les bases de leur comportement et comment les utiliser.</p> +<p>Dans cet article, nous aborderons le concept des contextes de formatage. Ceux-ci peuvent être de dfiférents types : contextes de formatage de bloc, contextes de formatage en ligne, contextes de formatage flexibles. Nous verrons les bases de leur comportement et comment les utiliser.</p> <p>Sur une page web, tout s'inscrit dans un <strong>contexte de formatage</strong>, une zone qui a été définie pour être organisée d'une certaine façon. Un <strong>contexte de formatage en bloc</strong> (ou <em>block formatting context</em> (<abbr title="Block Formatting Context">BFC</abbr>)) organisera ses éléments fils selon une disposition en bloc, un <strong>contexte de formatage flexible</strong> organisera ses éléments fils comme des objets flexibles, etc. Chaque contexte de formatage possède des règles spécifiques qui décrivent le comportement de la disposition pour ce contexte.</p> diff --git a/files/fr/web/css/css_fonts/index.html b/files/fr/web/css/css_fonts/index.html index ac5fb425fd..76d002b94e 100644 --- a/files/fr/web/css/css_fonts/index.html +++ b/files/fr/web/css/css_fonts/index.html @@ -18,7 +18,7 @@ translation_of: Web/CSS/CSS_Fonts <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 600px; margin: 0 auto; font-family: "Helvetica Neue", "Arial", sans-serif; @@ -31,7 +31,7 @@ translation_of: Web/CSS/CSS_Fonts <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> Alice ne fut pas très-étonnée, tant elle commençait à s’habituer aux événements extraordinaires. Tandis qu’elle regardait encore l’endroit que le Chat venait de quitter, il reparut tout à coup. @@ -49,7 +49,6 @@ translation_of: Web/CSS/CSS_Fonts <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("font")}}</li> <li>{{cssxref("font-family")}}</li> @@ -73,37 +72,22 @@ translation_of: Web/CSS/CSS_Fonts <li>{{cssxref("font-weight")}}</li> <li>{{cssxref("line-height")}}</li> </ul> -</div> <h3 id="Règles">Règles @</h3> -<dl> - <dt>{{cssxref("@font-face")}}</dt> - <dd> - <div class="index"> - <ul> - <li>{{cssxref("@font-face/font-family", "font-family")}}</li> - <li>{{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}</li> - <li>{{cssxref("@font-face/font-style", "font-style")}}</li> - <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li> - <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li> - <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li> - <li>{{cssxref("@font-face/src", "src")}}</li> - <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li> +<ul> + <li>{{cssxref("@font-face")}}</li> + <li>{{cssxref("@font-feature-values")}}</li> </ul> - </div> - </dd> - <dt>{{cssxref("@font-feature-values")}}</dt> -</dl> <h2 id="Guides">Guides</h2> <dl> - <dt><a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Mise en forme du texte et utilisation des polices</a></dt> + <dt><a href="/fr/docs/Learn/CSS/Styling_text/Fundamentals">Mise en forme du texte et utilisation des polices</a></dt> <dd>Dans cet article, destiné aux débutants, nous abordons en détail les fonctionnalités pour la mise en forme du texte et la modification de la police.</dd> - <dt><a href="/fr/docs/Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType">Guide sur les caractéristiques de police OpenType</a></dt> + <dt><a href="/fr/docs/Web/CSS/CSS_Fonts/OpenType_fonts_guide">Guide sur les caractéristiques de police OpenType</a></dt> <dd>Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec CSS.</dd> - <dt><a href="/fr/docs/Web/CSS/CSS_Fonts/Guide_polices_variables">Guide sur les polices variables</a></dt> + <dt><a href="/fr/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Guide sur les polices variables</a></dt> <dd>Les polices variables sont une évolution de la spécification OpenType qui permet de faire varier différents axes d'une police (provenant d'un seul fichier) plutôt que d'avoir plusieurs polices d'une même fonte. Cet article fournit l'ensemble des informations nécessaires à l'exploration des polices variables.</dd> </dl> diff --git a/files/fr/web/css/css_fonts/opentype_fonts_guide/index.html b/files/fr/web/css/css_fonts/opentype_fonts_guide/index.html index 58699af2b5..ed04d4ca73 100644 --- a/files/fr/web/css/css_fonts/opentype_fonts_guide/index.html +++ b/files/fr/web/css/css_fonts/opentype_fonts_guide/index.html @@ -11,14 +11,14 @@ original_slug: Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType --- <div>{{CSSRef}}</div> -<p class="summary">Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage (<em>kerning</em> en anglais) qui définit l'espacement entre certaines lettres, les fractions et styles numériques, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec CSS.</p> +<p>Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage (<em>kerning</em> en anglais) qui définit l'espacement entre certaines lettres, les fractions et styles numériques, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec CSS.</p> <p>Pour certaines polices, une ou plusieurs caractéristiques sont activées par défaut (le crénage et les ligatures classiques sont souvent activées par exemple). D'autres caractéristiques sont inactives et peuvent être activées par choix dans certaines situations.</p> <p>En plus des caractéristiques communément utilisées telles que les ligatures ou <a href="https://fr.wikipedia.org/wiki/Chiffres_elz%C3%A9viriens">les chiffres elzéviriens</a>, il existe d'autres caractéristiques spécifiques telles que les ensembles stylistiques, les ensembles alternatifs voire des ensembles avec des altérations spécifiques pour une langue donnée. Pour ce dernier cas, ces altérations sont nécessaires à l'expression correcte du langage et il s'agit donc d'une caractéristique qui dépasse largement l'aspect purement stylistique d'autres caractéristiques.</p> <div class="warning"> -<p><strong>Attention !</strong> Il existe de nombreuses propriétés CSS qui permettent de manipuler les caractéristiques de police. Cependant, la plupart ne sont pas encore complètement implémentées ni prises en charge de façon homogène. Nous les verrons dans cet article mais il faudra la plupart du temps utiliser {{cssxref("font-feature-settings")}} pour les définir à un plus bas niveau. Il est possible d'écrire du CSS qui gère ces deux cas mais c'est plus laborieux. Mais lorsqu'on utilise <code>font-feature-settings</code> pour chaque caractéristique, il est nécessaire de réécrire la chaîne entière même si on ne souhaite changer qu'une caractéristique.</p> +<p><strong>Attention :</strong> Il existe de nombreuses propriétés CSS qui permettent de manipuler les caractéristiques de police. Cependant, la plupart ne sont pas encore complètement implémentées ni prises en charge de façon homogène. Nous les verrons dans cet article mais il faudra la plupart du temps utiliser {{cssxref("font-feature-settings")}} pour les définir à un plus bas niveau. Il est possible d'écrire du CSS qui gère ces deux cas mais c'est plus laborieux. Mais lorsqu'on utilise <code>font-feature-settings</code> pour chaque caractéristique, il est nécessaire de réécrire la chaîne entière même si on ne souhaite changer qu'une caractéristique.</p> </div> <h2 id="Découvrir_la_disponibilité_des_caractéristiques_pour_certaines_polices">Découvrir la disponibilité des caractéristiques pour certaines polices</h2> @@ -38,7 +38,7 @@ original_slug: Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType <p>Bien qu'aucune de ces caractéristiques ne soit critique pour l'utilisabilité d'un site, chacune d'elle peut rendre un site plus lisible voire raffiné</p> <blockquote> -<p>Les caractéristiques OpenType ressemblent à des compartiments secrets : en les déverouillant, une police peut évoluer de façon subtile ou complète. Toutes les caractéristiques OpenType ne doivent pas être utilisées tout le temps mais certaines d'entre elles sont majeures pour obtenir une typographie de premier rang. <cite><em>Tim Brown, Directeur de la typographie chez Adobe</em>.</cite></p> +<p>Les caractéristiques OpenType ressemblent à des compartiments secrets : en les déverouillant, une police peut évoluer de façon subtile ou complète. Toutes les caractéristiques OpenType ne doivent pas être utilisées tout le temps mais certaines d'entre elles sont majeures pour obtenir une typographie de premier rang. <em>Tim Brown, Directeur de la typographie chez Adobe</em>.</p> </blockquote> <h3 id="Au-delà_du_style_le_contenu_même">Au-delà du style : le contenu même</h3> @@ -153,7 +153,7 @@ original_slug: Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType <h2 id="Utiliser_font-feature-settings">Utiliser <code>font-feature-settings</code></h2> -<p>La propriété {{cssxref("font-feature-settings")}} permet d'utiliser une syntaxe « bas niveau » qui permet un accès explicite à chaque caractéristique OpenType disponible. On dispose ainsi d'un contrôle accru mais on perd l'héritage et il faut tout redéclarer à chaque fois qu'on souhaite modifier une caractéristique (sauf à utiliser <a href="/en-US/docs/Web/CSS/Using_CSS_variables">des propriétés CSS personnalisées</a> afin de définir les valeurs). Aussi, mieux vaut utiliser les propriétés standards lorsque c'est possible.</p> +<p>La propriété {{cssxref("font-feature-settings")}} permet d'utiliser une syntaxe « bas niveau » qui permet un accès explicite à chaque caractéristique OpenType disponible. On dispose ainsi d'un contrôle accru mais on perd l'héritage et il faut tout redéclarer à chaque fois qu'on souhaite modifier une caractéristique (sauf à utiliser <a href="/en-US/docs/Web/CSS/Using_CSS_custom_properties">des propriétés CSS personnalisées</a> afin de définir les valeurs). Aussi, mieux vaut utiliser les propriétés standards lorsque c'est possible.</p> <p>Il existe une myriade de caractéristiques possibles. Vous pouvez en voir quelques exemples ici et il existe plusieurs ressources pour en exploiter d'autres.</p> @@ -170,10 +170,10 @@ original_slug: Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType font-feature-settings: "liga" 0, "dlig" 0; }</pre> -<h4 class="brush: css" id="En_savoir_plus_sur_les_codes_des_caractéristiques_font-feature-settings">En savoir plus sur les codes des caractéristiques <code>font-feature-settings</code></h4> +<h4 id="En_savoir_plus_sur_les_codes_des_caractéristiques_font-feature-settings">En savoir plus sur les codes des caractéristiques <code>font-feature-settings</code></h4> <ul> - <li class="brush: css"><a href="https://sparanoid.com/lab/opentype-features/">Une démonstration des caractéristiques OpenType</a></li> + <li><a href="https://sparanoid.com/lab/opentype-features/">Une démonstration des caractéristiques OpenType</a></li> <li><a href="https://en.wikipedia.org/wiki/List_of_typographic_features">La liste des caractéristiques OpenType sur Wikipédia</a></li> </ul> diff --git a/files/fr/web/css/css_fonts/variable_fonts_guide/index.html b/files/fr/web/css/css_fonts/variable_fonts_guide/index.html index 737e6179c1..487a4b1948 100644 --- a/files/fr/web/css/css_fonts/variable_fonts_guide/index.html +++ b/files/fr/web/css/css_fonts/variable_fonts_guide/index.html @@ -11,10 +11,10 @@ original_slug: Web/CSS/CSS_Fonts/Guide_polices_variables --- <div>{{CSSRef}}</div> -<p class="summary"><strong>Les polices variables</strong> sont une évolution de la spécification OpenType et qui permet d'activer différentes variations d'une police dans un seul fichier plutôt que d'avoir différents fichiers pour chaque taille, graisse ou style. En CSS, on peut accéder à l'ensemble des variations en utilisant une seule référence {{cssxref("@font-face")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour commencer à utiliser les polices variables.</p> +<p><strong>Les polices variables</strong> sont une évolution de la spécification OpenType et qui permet d'activer différentes variations d'une police dans un seul fichier plutôt que d'avoir différents fichiers pour chaque taille, graisse ou style. En CSS, on peut accéder à l'ensemble des variations en utilisant une seule référence {{cssxref("@font-face")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour commencer à utiliser les polices variables.</p> <div class="warning"> -<p><strong>Attention ! </strong>Afin d'utiliser les polices variables, il faut s'assurer que son système d'exploitation est à jour. Pour les systèmes basés sur GNU/Linux, il faut la version la plus récente de Linux Freetype. Pour macOS, les versions antérieures à 10.13 ne prennent pas en charge les polices variables. Si votre système d'exploitation n'est pas à jour ou ne prend pas en charge les polices variables, vous ne pourrez pas en bénéficier sur le Web ou dans les outils de développement Firefox par exemple.</p> +<p><strong>Attention :</strong> Afin d'utiliser les polices variables, il faut s'assurer que son système d'exploitation est à jour. Pour les systèmes basés sur GNU/Linux, il faut la version la plus récente de Linux Freetype. Pour macOS, les versions antérieures à 10.13 ne prennent pas en charge les polices variables. Si votre système d'exploitation n'est pas à jour ou ne prend pas en charge les polices variables, vous ne pourrez pas en bénéficier sur le Web ou dans les outils de développement Firefox par exemple.</p> </div> <h2 id="Qu'est-ce_qu'une_police_variable">Qu'est-ce qu'une police variable ?</h2> @@ -71,7 +71,7 @@ original_slug: Web/CSS/CSS_Fonts/Guide_polices_variables <p><code>wght</code> correspondra à l'axe enregistré du même nom et <code>GRAD</code> à un axe spécifique.</p> </li> <li> - <p>Si on a défini des valeurs avec <code>font-variation-settings</code> et qu'on souhaite changer une de ces valeurs, il sera nécessaire de redéclarer l'ensemble des valeurs (de la même façon qu'on doit redéclarer l'ensemble des caractéristiques OpenType avec {{cssxref("font-feature-settings")}}). Il est possible de contourner cet écueil en utilisant <a href="/fr/docs/Web/CSS/Les_variables_CSS">des propriétés CSS personnalisées</a> pour les valeurs individuelles et en modifiant uniquement la valeur d'une des propriétés personnalisée (cf. l'exemple en fin d'article).</p> + <p>Si on a défini des valeurs avec <code>font-variation-settings</code> et qu'on souhaite changer une de ces valeurs, il sera nécessaire de redéclarer l'ensemble des valeurs (de la même façon qu'on doit redéclarer l'ensemble des caractéristiques OpenType avec {{cssxref("font-feature-settings")}}). Il est possible de contourner cet écueil en utilisant <a href="/fr/docs/Web/CSS/Using_CSS_custom_properties">des propriétés CSS personnalisées</a> pour les valeurs individuelles et en modifiant uniquement la valeur d'une des propriétés personnalisée (cf. l'exemple en fin d'article).</p> </li> </ol> diff --git a/files/fr/web/css/css_fragmentation/index.html b/files/fr/web/css/css_fragmentation/index.html index e6e860fb54..31f3a1c63d 100644 --- a/files/fr/web/css/css_fragmentation/index.html +++ b/files/fr/web/css/css_fragmentation/index.html @@ -17,7 +17,6 @@ translation_of: Web/CSS/CSS_Fragmentation <h2 id="Référence">Référence</h2> -<div class="index"> <ul> <li>{{cssxref("box-decoration-break")}}</li> <li>{{cssxref("break-after")}}</li> @@ -26,7 +25,6 @@ translation_of: Web/CSS/CSS_Fragmentation <li>{{cssxref("orphans")}}</li> <li>{{cssxref("widows")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_generated_content/index.html b/files/fr/web/css/css_generated_content/index.html index 09d0a27ed9..1892fb99c2 100644 --- a/files/fr/web/css/css_generated_content/index.html +++ b/files/fr/web/css/css_generated_content/index.html @@ -16,12 +16,10 @@ translation_of: Web/CSS/CSS_Generated_Content <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("content")}}</li> <li>{{cssxref("quotes")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html index 42060519b3..2fe6ab6f2c 100644 --- a/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html +++ b/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html @@ -16,9 +16,10 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS <p>En plus de pouvoir placer des objets de façon précise sur une grille, la spécification pour les grilles CSS définit le comportement obtenu lorsque certains des objets ne sont pas placés sur la grille (voire aucun). Pour voir comment fonctionne le placement automatique, il suffit de créer une grille avec un ensemble d'objets. Sans fournir aucune information de placement, ces objets se placeront chacun sur une cellule de la grille.</p> -<div id="placement_1"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} + +<h2 id="Placement_automatique">Placement automatique</h2> + +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -34,7 +35,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -52,7 +52,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS </div> </pre> -<p>{{EmbedLiveSample('placement_1', '500', '230')}}</p> +<p>{{EmbedLiveSample('Placement_automatique', '500', '230')}}</p> </div> <h2 id="Définir_des_règles_pour_le_placement_automatique">Définir des règles pour le placement automatique</h2> @@ -65,9 +65,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS <p>Il est toutefois possible de contrôler la taille de ces lignes grâce à la propriété <code>grid-auto-rows</code>. Ainsi, si on veut que les lignes créées automatiquement mesurent 100 pixels de haut, on utilisera :</p> -<div id="placement_2"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -83,7 +81,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -102,14 +99,12 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS } </pre> -<p>{{EmbedLiveSample('placement_2', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample('Dimensionner_les_lignes_de_la_grille_implicite', '500', '330')}}</p> +<h3 id="Dimensionner_les_lignes_avec_minmax">Dimensionner les lignes avec minmax()</h3> <p>On peut utiliser la fonction {{cssxref("minmax","minmax()")}} pour la valeur de {{cssxref("grid-auto-rows")}} afin de créer des lignes avec une taille minimale mais qui puissent être plus grandes si le contenu est plus grand que cette taille minimale.</p> -<div id="placement_3"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -125,7 +120,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -151,14 +145,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS } </pre> -<p>{{EmbedLiveSample('placement_3', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample('Dimensionner_les_lignes_avec_minmax', '500', '330')}}</p> + +<h3 id="Dimensionner_les_lignes_avec_une_liste_de_pistes">Dimensionner les lignes avec une liste de pistes</h3> <p>On peut aussi passer en argument une liste de pistes qui se répèteront. Dans l'exemple ci-après, on crée une piste implicite pour une ligne de 100 pixels et une seconde de <code>200px</code>. Ce motif sera utilisé tant que du contenu sera ajouté à la grille implicite.</p> -<div id="placement_4"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -174,7 +167,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -196,8 +188,8 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS } </pre> -<p>{{EmbedLiveSample('placement_4', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample('Dimensionner_les_lignes_avec_une_liste_de_pistes', '500', '330')}}</p> + <h3 id="Utiliser_le_placement_automatique_pour_les_colonnes">Utiliser le placement automatique pour les colonnes</h3> @@ -205,7 +197,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS <p>Dans le prochain exemple, on crée une grille avec trois lignes qui mesurent chacune 200 pixels de haut. On utilise le placement automatique en colonne. La première colonne qui sera créée mesurera 300 pixels de large, ensuite on aura une colonne de 100 pixels de large et ainsi de suite jusqu'à ce que tous les éléments puissent être placés.</p> -<div id="placement_5"> <pre class="brush: css">.wrapper { display: grid; grid-template-rows: repeat(3, 200px); @@ -215,8 +206,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -232,7 +222,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -246,8 +235,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS </div> </pre> -<p>{{EmbedLiveSample('placement_5', '500', '640')}}</p> -</div> +<p>{{EmbedLiveSample('Utiliser_le_placement_automatique_pour_les_colonnes', '500', '640')}}</p> <h2 id="Lordre_des_éléments_placés_automatiquement">L'ordre des éléments placés automatiquement</h2> @@ -261,9 +249,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS <p>La grille commencera par placer les éléments pour lesquels on a défini une position. Dans l'exemple qui suit, on a une grille avec 12 éléments, l'élément 2 et l'élément 5 sont placés en utilisant les lignes. On put voir comment ces deux éléments sont placés et comment les autres sont placés automatiquement dans les espaces restants. Les objets placés automatiquement seront placés avant les éléments qui sont placés, dans l'ordre du DOM.</p> -<div id="placement_6"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -279,7 +265,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -313,8 +298,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS } </pre> -<p>{{EmbedLiveSample('placement_6', '500', '450')}}</p> -</div> +<p>{{EmbedLiveSample('Les_éléments_avec_des_propriétés_de_placement', '500', '450')}}</p> <h3 id="Gérer_les_éléments_qui_sétalent_sur_plusieurs_pistes">Gérer les éléments qui s'étalent sur plusieurs pistes</h3> @@ -322,9 +306,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS <p>On peut voir coment cela laisse des espaces dans la grille car lorsqu'un élément placé automatiquement n'a pas suffisamment de place sur une piste, une nouvelle ligne sera créée jusqu'à ce que l'élément ait la place.</p> -<div id="placement_7"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -339,7 +321,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -378,8 +359,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS } </pre> -<p>{{EmbedLiveSample('placement_7', '500', '770')}}</p> -</div> +<p>{{EmbedLiveSample('Gérer_les_éléments_qui_sétalent_sur_plusieurs_pistes', '500', '770')}}</p> <h3 id="Combler_les_espaces">Combler les espaces</h3> @@ -389,9 +369,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS <p>Avec cette valeur, la grille cherchera donc à combler les espaces qu'elle a laissés quitte à ne pas respecter l'ordre du DOM. En revanche, l'ordre de la navigation au clavier (<em>tab order</em>) suivra toujours l'ordre du document. Nous étudierons cet aspect plus en détails dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilit%C3%A9">un article sur l'accessibilité</a>.</p> -<div id="placement_8"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -406,7 +384,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -446,8 +423,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS } </pre> -<p>{{EmbedLiveSample('placement_8', '500', '730')}}</p> -</div> +<p>{{EmbedLiveSample('Combler_les_espaces', '500', '730')}}</p> <h3 id="Les_éléments_anonymes_de_la_grille">Les éléments anonymes de la grille</h3> @@ -467,7 +443,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS <p>Le placement automatique peut être utile lorsqu'on a un ensemble d'objets qui se ressemblent. Ce peut être des éléments qui n'ont pas d'ordre logique particulier : une galerie de photos, une liste de produits. Dans ces cas de figure, on peut choisir d'utiliser une disposition dense afin de combler les trous de la grille. Dans l'exemple qui représente la galerie d'images, on a certaines images en paysage et d'autres en portrait (lorsqu'on utilise la classe <code>landscape</code> l'élément s'étend sur deux colonnes). On utilise ensuite <code>grid-auto-flow: dense</code> afin de créer une grille dense.</p> -<div id="placement_9"> <pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); @@ -506,14 +481,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS </ul> </pre> -<p>{{EmbedLiveSample('placement_9', '500', '1300')}}</p> -</div> +<p>{{EmbedLiveSample('Les_cas_dutilisation_pour_le_placement_automatique', '500', '1300')}}</p> <p>Le placement automatique peut également aider à disposer des éléments d'interface utilisateur qui ont un ordre logique. Dans l'exemple suivant, on voit comment manipuler les listes de définition. Les listes de définition sont intéressantes car il n'y a pas de niveau de regroupement pour regrouper un terme et ses définitions. Dans cet exemple, on autorise le placement automatique mais on a une classe pour qu'un élément <code>dt</code> démarre sur la première ligne et que l'élément <code>dd</code> sur la ligne 2. On s'assure ainsi que les termes sont bien en face de chaque définition, peu importe le nombre de définitions qu'on a pour un terme.</p> -<div id="placement_10"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<h3 id="Autre_exemple">Autre exemple</h3> + +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -521,7 +495,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS background-color: #fff4e6; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <dl> @@ -554,12 +527,11 @@ dd { } </pre> -<p>{{EmbedLiveSample('placement_10', '500', '230')}}</p> +<p>{{EmbedLiveSample('Autre_exemple', '500', '230')}}</p> <div class="note"> <p><strong>Note :</strong> Voir <a href="https://www.sitepoint.com/understanding-masonry-layout/">cet article de SitePoint</a> à propos de la disposition en briques pour d'autres cas d'utilisation.</p> </div> -</div> <h2 id="Quest-ce_que_le_placement_automatique_ne_permet_pas_de_réaliser_actuellement">Qu'est-ce que le placement automatique ne permet pas de réaliser (actuellement) ?</h2> diff --git a/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/grid2.jpg b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/grid2.jpg Binary files differnew file mode 100644 index 0000000000..04c2b6663a --- /dev/null +++ b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/grid2.jpg diff --git a/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/grid3.jpg b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/grid3.jpg Binary files differnew file mode 100644 index 0000000000..c2cf49bfae --- /dev/null +++ b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/grid3.jpg diff --git a/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html index d4dac05318..800c04293b 100644 --- a/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html +++ b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -40,7 +40,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base <p>Il peut arriver que l'on place plusieurs éléments dans une même cellule, ou que des zones se chevauchent. La superposition peut être contrôlée à l'aide de la propriété {{cssxref("z-index")}}.</p> -<p>La grille est une spécification puissante qui peut être combinée avec d'autres modules CSS tels que <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS">flexbox</a>. Le point de départ est le <strong>conteneur</strong>.</p> +<p>La grille est une spécification puissante qui peut être combinée avec d'autres modules CSS tels que <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a>. Le point de départ est le <strong>conteneur</strong>.</p> <h2 id="Le_conteneur">Le conteneur</h2> @@ -64,8 +64,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -79,13 +78,12 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base color: #d9480f; } </pre> -</div> <p>{{ EmbedLiveSample('Le_conteneur', '200', '330') }}</p> <p>Tous les enfants directs sont maintenant des éléments de grille. On ne voit pas la différence dans un navigateur, car la grille n'a qu'une seule colonne. Vous trouverez sans doute utile de travailler avec Firefox, qui propose un <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">inspecteur de grille</a> dans les outils de développement. En inspectant la grille dans Firefox, vous pouvez voir une petite icône à côté de la valeur <code>grid</code>. Un clic dessus permet d'afficher la grille correspondante dans le navigateur.</p> -<p><img alt="Using the Grid Highlighter in DevTools to view a grid" src="https://mdn.mozillademos.org/files/14791/Screen%20Shot%202017-03-17%20at%2014.47.48.png" style="height: 551px; width: 846px;"></p> +<p><img alt="Using the Grid Highlighter in DevTools to view a grid" src="screen_shot_2017-03-17_at_14.47.48.png"></p> <p>Cet outil vous permettra de mieux comprendre le fonctionnement de CSS Grid Layout.</p> @@ -95,13 +93,12 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base <p>Les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}} permettent de définir des colonnes et des rangées. Celles-ci définissent les pistes. Une <em>piste</em> est l'espace entre deux lignes d'une grille. L'image ci-dessous colore une piste de la grille – correspondant à la première rangée de la grille.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14637/1_Grid_Track.png" style="height: 400px; width: 600px;"></p> +<p><img alt="" src="1_grid_track.png"></p> <p>On peut ajouter la propriété <code>grid-template-columns</code> à notre exemple précédent, pour définir la taille des colonnes.</p> <p>Nous avons créé une grille avec trois pistes de 200 pixels de large. Chaque élément sera disposé dans l'une des cellules de la grille.</p> -<div id="grid_first"> <pre class="brush: html"><div class="wrapper"> <div>Un</div> <div>Deux</div> @@ -117,8 +114,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -132,16 +128,14 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base color: #d9480f; } </pre> -</div> <p>{{ EmbedLiveSample('grid_first', '610', '140') }}</p> -</div> + <h3 id="L'unité_fr">L'unité fr</h3> <p>Les pistes peuvent être définies à l'aide de n'importe quelle unité de mesure. Les grilles proposent aussi une nouvelle unité de mesure pour aider à la création de pistes flexibles. Cette unité, <code>fr</code>, représente une fraction de l'espace disponible dans le conteneur de la grille. Le code suivant crée trois colonnes égales qui se redimensionnent en fonction de l'espace disponible.</p> -<div id="fr_unit_ls"> <pre class="brush: html"><div class="wrapper"> <div>Un</div> <div>Deux</div> @@ -157,8 +151,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -172,10 +165,8 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base color: #d9480f; } </pre> -</div> -<p>{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}</p> -</div> +<p>{{ EmbedLiveSample("L'unité_fr", '220', '140') }}</p> <p>L'exemple suivant crée une grille avec une colonne de <code>2fr</code>, et deux colonnes de <code>1fr</code>. L'espace disponible est divisé en quatre. Les deux premières fractions sont allouées à la première colonne, et chacune des colonnes suivante dispose d'une fraction.</p> @@ -251,8 +242,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -266,7 +256,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base color: #d9480f; } </pre> -</div> <p>{{ EmbedLiveSample('Grille_implicite_et_grille_explicite', '230', '420') }}</p> @@ -274,7 +263,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base <p>Que l'on crée une grille explicite, ou que l'on définisse la taille des pistes créées implicitement, il peut être utile d'assigner une taille minimum, qui s'agrandit pour s'adapter au contenu. Par exemple on peut souhaiter que les rangées ne soient jamais moins hautes que 100 pixels, mais qu'elles aillent jusqu'à 300 pixels de haut si le contenu le nécessite.</p> -<p>La fonction {{cssxref("minmax", "minmax()")}} permet ce comportement. Dans l'exemple suivant nous utilisons <code>minmax()</code> comme valeur de la propriété {{cssxref("grid-auto-rows")}}. Les rangées créées automatiquement feront un minimum de 100 pixels, et un maximum de <code>auto</code>, ce qui signifie que la taille s'adaptera à la hauteur du contenu.</p> +<p>La fonction {{cssxref("minmax()", "minmax()")}} permet ce comportement. Dans l'exemple suivant nous utilisons <code>minmax()</code> comme valeur de la propriété {{cssxref("grid-auto-rows")}}. Les rangées créées automatiquement feront un minimum de 100 pixels, et un maximum de <code>auto</code>, ce qui signifie que la taille s'adaptera à la hauteur du contenu.</p> <pre class="brush: css">.wrapper { display: grid; @@ -283,8 +272,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -297,7 +285,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base padding: 1em; color: #d9480f; }</pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -317,7 +304,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base <p>Il faut noter que l'on définit les pistes d'une grille, et pas les lignes qui en résultent. La grille génère des lignes numérotées que l'on utilise pour positionner les éléments. Dans notre grille de trois colonnes et deux rangées, nous avons quatre lignes de colonnes.</p> -<p><img alt="Grid Lines" src="https://mdn.mozillademos.org/files/14793/GRID2.jpg" style="height: 456px; width: 764px;"></p> +<p><img alt="Grid Lines" src="grid2.jpg"></p> <p>Les lignes sont numérotées selon le sens de lecture du document. Dans un langage qui se lit de gauche à droite, la ligne 1 est située à gauche, dans un langage qui se lit de droite à gauche elle est située à droite. Les lignes peuvent aussi être nommées, comme nous le verrons plus loin dans ces pages.</p> @@ -356,8 +343,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -371,7 +357,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base color: #d9480f; } </pre> -</div> + <p>{{ EmbedLiveSample('Positionnement_des_éléments_sur_les_lignes', '230', '420') }}</p> @@ -381,17 +367,17 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base <p>Une <em>cellule</em> est la plus petite unité sur une grille, conceptuellement similaire à une cellule de tableau. Comme nous l'avons vu lorsqu'une grille est définie sur un élément ses enfants viennent se positionner chacun dans l'une des cellules de la grille. Dans l'image ci-dessous la première cellule est colorée.</p> -<p><img alt="The first cell of the grid highlighted" src="https://mdn.mozillademos.org/files/14643/1_Grid_Cell.png" style="height: 400px; width: 600px;"></p> +<p><img alt="The first cell of the grid highlighted" src="1_grid_cell.png"></p> <h2 id="Les_zones">Les zones</h2> <p>Un élément peut s'étendre sur plusieurs cellules d'une rangée ou d'une colonne, et cela crée une <em>zone</em>. Les zones doivent être rectangulaires - on ne peut pas créer de forme en L par exemple. La zone colorée ci-dessous s'étend sur deux rangées et deux colonnes.</p> -<p><img alt="A grid area" src="https://mdn.mozillademos.org/files/14645/1_Grid_Area.png" style="height: 400px; width: 600px;"></p> +<p><img alt="A grid area" src="1_grid_area.png"></p> <h2 id="Les_gouttières">Les gouttières</h2> -<p>Les <em>gouttière</em><em>s</em> entre les cellules sont définies à l'aide des propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}}, ou de la propriété raccourcie {{cssxref("grid-gap")}}. Dans l'exemple ci-dessous nous créons une gouttière de dix pixels de large entre les colonnes, et une gouttière de 1em de hauteur entre les rangées.</p> +<p>Les <em>gouttière</em><em>s</em> entre les cellules sont définies à l'aide des propriétés {{cssxref("grid-column-gap")}} et {{cssxref("row-gap")}}, ou de la propriété raccourcie {{cssxref("gap")}}. Dans l'exemple ci-dessous nous créons une gouttière de dix pixels de large entre les colonnes, et une gouttière de 1em de hauteur entre les rangées.</p> <pre class="brush: css">.wrapper { display: grid; @@ -402,7 +388,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base </pre> <div class="note"> -<p><strong>Note :</strong> Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe <code>grid-</code> soit : {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} et {{cssxref("grid-gap")}}.</p> +<p><strong>Note :</strong> Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe <code>grid-</code> soit : {{cssxref("grid-column-gap")}}, {{cssxref("row-gap")}} et {{cssxref("gap")}}.</p> <p>Les navigateurs actuels retirent progressivement ce préfixe (la version préfixée sera maintenue sous forme d'alias). À l'heure actuelle, certains navigateurs ne prennent pas encore la version sans préfixe et c'est pourquoi certains exemples de ce guide continuent d'utiliser les versions préfixées avec <code>grid-</code>.</p> </div> @@ -416,8 +402,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base </div> </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -431,7 +416,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base color: #d9480f; } </pre> -</div> <p>{{ EmbedLiveSample('Les_gouttières') }}</p> @@ -441,7 +425,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base <p>Un élément placé dans une grille peut aussi être le conteneur d'une autre grille. Dans l'exemple suivant nous retrouvons la grille de trois colonnes créée plus haut, avec deux éléments explicitement positionnés. Le premier élément contient lui-même des éléments. Comme ils ne sont pas des enfants directs de la grille principale, ils se positionnent normalement dans le flux.</p> -<div id="nesting"> <pre class="brush: html"><div class="wrapper"> <div class="box box1"> <div class="nested">a</div> @@ -455,7 +438,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base </div> </pre> -<p><img alt="Nested grid in flow" src="https://mdn.mozillademos.org/files/14795/grid3.jpg" style="height: 512px; width: 900px;"></p> +<p><img alt="Nested grid in flow" src="grid3.jpg"></p> <p>En définissant la propriété <code>display:grid</code> sur l'élément <code>box1</code>, il devient lui-même une grille et ses enfants se positionnent sur cette grille.</p> @@ -469,8 +452,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -490,12 +472,10 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base padding: 1em; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('nesting', '600', '340') }}</p> +<p>{{ EmbedLiveSample('Grilles_imbriquées', '600', '340') }}</p> -<p>Dans ce cas la grille imbriquée n'est pas liée à la grille qui la contient. Elle n'hérite pas des {{cssxref("grid-gap")}}, et ses lignes ne s'alignent pas avec celles de la grille parent.</p> +<p>Dans ce cas la grille imbriquée n'est pas liée à la grille qui la contient. Elle n'hérite pas des {{cssxref("gap")}}, et ses lignes ne s'alignent pas avec celles de la grille parent.</p> <h3 id="Sous-grille">Sous-grille</h3> @@ -517,7 +497,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base <p>Plusieurs éléments peuvent être placés dans la même cellule. Si nous retournons à notre exemple avec les items positionnés par numéros de ligne, nous pouvons modifier cela pour que deux items se chevauchent.</p> -<div id="l_ex"> <pre class="brush: html"><div class="wrapper"> <div class="box box1">Un</div> <div class="box box2">Deux</div> @@ -545,8 +524,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -560,10 +538,8 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base color: #d9480f; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('l_ex', '230', '420') }}</p> +<p>{{ EmbedLiveSample('Superposer_les_éléments_avec_z-index', '230', '420') }}</p> <p>L'élément <code>box2</code> est maintenant superposé avec <code>box1</code>, et comme il arrive après dans le code source il s'affiche par-dessus.</p> @@ -591,8 +567,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base } </pre> -<div class="hidden"> -<pre class="brush: html"><div class="wrapper"> +<pre class="brush: html hidden"><div class="wrapper"> <div class="box box1">Un</div> <div class="box box2">Deux</div> <div class="box box3">Trois</div> @@ -601,7 +576,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base </div> </pre> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -615,7 +590,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base color: #d9480f; } </pre> -</div> <p>{{ EmbedLiveSample("Contrôler_l’ordre_de_superposition", '230', '420') }}</p> diff --git a/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/screen_shot_2017-03-17_at_14.47.48.png b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/screen_shot_2017-03-17_at_14.47.48.png Binary files differnew file mode 100644 index 0000000000..33e4a5efab --- /dev/null +++ b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/screen_shot_2017-03-17_at_14.47.48.png diff --git a/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/7_block_axis.png b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/7_block_axis.png Binary files differnew file mode 100644 index 0000000000..d0d2ce3199 --- /dev/null +++ b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/7_block_axis.png diff --git a/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html index 7830f9ab48..6721ff8c67 100644 --- a/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html +++ b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html @@ -14,7 +14,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C <p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture","Web/CSS/CSS_Grid_Layout")}}</p> -<p>Si vous connaissez <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS">les boîtes flexibles (flexbox)</a> vous savez déjà comment aligner les éléments flexibles à l'intérieur d'un conteneur flexible. Ces propriétés d'alignement, initialement spécifiée dans la spécification des boîtes flexibles, sont désormais spécifiées dans une nouvelle spécification <a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a>. Cette spécification détaille le fonctionnement de l'alignement pour les différentes méthodes de disposition.</p> +<p>Si vous connaissez <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">les boîtes flexibles (flexbox)</a> vous savez déjà comment aligner les éléments flexibles à l'intérieur d'un conteneur flexible. Ces propriétés d'alignement, initialement spécifiée dans la spécification des boîtes flexibles, sont désormais spécifiées dans une nouvelle spécification <a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a>. Cette spécification détaille le fonctionnement de l'alignement pour les différentes méthodes de disposition.</p> <p>Chaque méthode de disposition qui implémente cette nouvelle spécification se comportera légèrement différemment selon les différences de contraintes et de fonctionnalités (et aussi selon le comportement historique). On ne pourra donc pas avoir un alignement exactement homogène. La spécification pour l'alignement des boîtes détaille le fonctionnement de chaque méthode mais malheureusement, à l'heure actuelle, aucun navigateur ne prend en charge cette spécification. À l'heure actuelle, les navigateurs respectent les règles de cette spécification pour l'alignement et la répartition de l'espace lorsqu'on utilise une disposition en grille. Dans cet article, nous verrons comment celles-ci fonctionnent. On retrouvera de nombreux points communs avec les boîtes flexibles pour le fonctionnement de ces propriétés et valeurs. Toutefois, les grilles fonctionnant sur deux axes et les boîtes flexibles sur un seul, il faudra faire attention à quelques différences. Commençons par analyser les deux axes utilisés lorsqu'il s'agit d'aligner des objets sur une grille.</p> @@ -22,11 +22,11 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C <p>Lorsqu'on manipule une grille, on dispose de deux axes sur lesquels aligner les objets. L'axe de bloc et l'axe en ligne. L'axe de bloc est l'axe selon lequel les blocs sont disposés quand on a une disposition en bloc (<em>block layout</em>). Par exemple, si on a deux paragraphes sur une page, par défaut, ils s'affichent l'un en dessous de l'autre.</p> -<p><img src="https://mdn.mozillademos.org/files/14725/7_Block_Axis.png" style="height: 306px; width: 940px;"></p> +<p><img src="7_block_axis.png"></p> <p><strong>L'axe en ligne est orthogonal à l'axe de bloc. C'est la direction selon laquelle progresse le texte.</strong></p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14773/7_Inline_Axis.png" style="height: 306px; width: 940px;"></p> +<p><img alt="" src="7_inline_axis.png"></p> <p>Grâce aux propriétés et à leurs valeurs, nous serons en mesure d'aligner le contenu de la grillle par rapport à ces deux axes.</p> @@ -34,6 +34,8 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C <p>Les propriétés {{cssxref("align-self")}} et {{cssxref("align-items")}} permettent de contrôler l'alignement selon l'axe de bloc. Lorsqu'on utilise ces propriétés, on modifie l'alignement de l'objet au sein de la zone de grille sur laquelle il est placé.</p> +<h3 id="utiliser_align-items">Utiliser align-items</h3> + <p>Dans l'exemple suivant, on a quatre zones sur la grille. On peut utiliser la propriété {{cssxref("align-items")}} sur le conteneur de la grille afin d'aligner les objets avec l'une des valeurs suivantes :</p> <ul> @@ -48,9 +50,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C <li><code>last baseline</code></li> </ul> -<div id="alignment_1"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -66,7 +66,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -102,18 +101,17 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C </div> </pre> -<p>{{EmbedLiveSample('alignment_1', '500', '450')}}</p> -</div> +<p>{{EmbedLiveSample('utiliser_align-items', '500', '450')}}</p> <p>Lorsqu'on utilise <code>align-self: start</code>, la hauteur de chaque <code><div></code> sera déterminée par le contenu du <code><div></code>. En revanche, si on n'utilise pas {{cssxref("align-self")}}, chaque <code><div></code> sera étiré afin de remplir la zone de la grille.</p> <p>La propriété {{cssxref("align-items")}} définit en fait la valeur de la propriété {{cssxref("align-self")}} pour tous les éléments fils de la grille. Cela signifie qu'on peut avoir un réglage plus fin sur chacun des objets de la grille en utilisant <code>align-self</code> pour les objets.</p> +<h3 id="utiliser_align-self">Utiliser align-self</h3> + <p>Dans le prochain exemple, on utilise la propriété <code>align-self</code> afin d'illustrer les différentes valeurs pour l'alignement. La première zone illustre le comportement par défaut pour <code>align-self</code> : l'objet est étiré. Le deuxième objet utilise la valeur <code>start</code>, le troisième utilise <code>end</code> et le quatrième utilise <code>center</code>.</p> -<div id="alignment_2"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -129,7 +127,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -167,8 +164,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C </div> </pre> -<p>{{EmbedLiveSample('alignment_2', '500', '450')}}</p> -</div> +<p>{{EmbedLiveSample('utiliser_align-self', '500', '450')}}</p> <h3 id="Gestion_des_objets_avec_un_ratio_intrinsèque">Gestion des objets avec un ratio intrinsèque</h3> @@ -196,9 +192,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C <p>Là encore, la valeur par défaut <code>stretch</code> pour les objets qui n'ont pas de ratio intrinsèque. Cela signifie que, par défaut, les objets de la grille couvriront l'ensemble de la zone de grille sur laquelle ils sont placés. Dans l'exemple qui suit, le premier objet illustre cet alignement par défaut.</p> -<div id="alignment_3"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -214,7 +208,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -251,9 +244,8 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C <div class="item4">Objet 4</div> </div> </pre> - +Justifier_les_objets_sur_laxe_en_ligne_inline_axis <p>{{EmbedLiveSample('alignment_3', '500', '450')}}</p> -</div> <p>Comme pour {{cssxref("align-self")}} et {{cssxref("align-items")}}, on peut utiliser la propriété {{cssxref("justify-items")}} sur le conteneur de la grille afin de régler la valeur de {{cssxref("justify-self")}} pour l'ensemble des objets de la grille.</p> @@ -267,9 +259,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C <p>En combinant les propriétés <code>align-</code><code>*</code> et <code>justify-*</code>, on peut facilement centrer un objet sur sa zone de grille.</p> -<div id="alignment_4"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -285,7 +275,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -308,8 +297,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C </div> </pre> -<p>{{EmbedLiveSample('alignment_4', '500', '480')}}</p> -</div> +<p>{{EmbedLiveSample('Centrer_un_objet_sur_une_zone', '500', '480')}}</p> <h2 id="Aligner_les_pistes_dune_grille_sur_laxe_de_bloc">Aligner les pistes d'une grille sur l'axe de bloc</h2> @@ -337,9 +325,9 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C <p>La propriété <code>align-content</code> s'applique sur le conteneur de la grille car elle porte sur l'ensemble de la grille. Pour une disposition en grille, la valeur par défaut est <code>start</code> : cela indique que les pistes commencent à partir du coin en haut à gauche de la grille.</p> -<div id="alignment_5"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<h3 id="alignement_par_defaut">Alignement par défaut</h3> + +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -355,7 +343,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -391,14 +378,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C </div> </pre> -<p>{{EmbedLiveSample('alignment_5', '500', '520')}}</p> -</div> +<p>{{EmbedLiveSample('alignement_par_defaut', '500', '520')}}</p> + +<h3 id="align-content_end">Utiliser align-content: end</h3> <p>Si on ajoute <code>align-content</code> avec la valeur <code>end</code> sur le conteneur, les pistes seront déplacées à la fin du conteneur selon l'axe des colonnes.</p> -<div id="alignment_6"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -414,7 +400,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -451,14 +436,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C </div> </pre> -<p>{{EmbedLiveSample('alignment_6', '500', '520')}}</p> -</div> +<p>{{EmbedLiveSample('align-content_end', '500', '520')}}</p> + +<h3 id="align-content_end_space-between">Utiliser align-content: space-between</h3> <p>Pour cette propriété, on peut également utiliser des valeurs qu'on manipule avec les boîtes flexibles : <code>space-between</code>, <code>space-around</code> et <code>space-evenly</code> qui permettent de répartir l'espace. Si on utilise {{cssxref("align-content")}} avec <code>space-between</code> pour notre exemple, on voit alors que les éléments sont espacés de façon équitable.</p> -<div id="alignment_7"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -474,7 +458,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -511,14 +494,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C </div> </pre> -<p>{{EmbedLiveSample('alignment_7', '500', '1570')}}</p> -</div> +<p>{{EmbedLiveSample('align-content_end_space-between', '500', '1570')}}</p> <p>On notera qu'en utilisant ces valeurs pour répartir l'espace, cela peut agrandir les objets de la grille. Si un objet s'étale sur plusieurs pistes, un espace sera ajouté entre chaque piste afin que l'objet qui doit être agrandi puisse absorber cet espace. Aussi, si vous choisissez d'utiliser ces valeurs, assurez-vous que le contenu des pistes puisse absorber cet espace supplémentaire ou que les propriétés d'alignement les renvoient au début de la piste plutôt que de les étirer.</p> <p>Dans l'image qui suit, on a a placé une grille en utilisant <code>align-content: start</code> et une autre grille qui utilise <code>align-content: space-between</code>. On peut voir la façon dont les objets 1 et 2 (qui s'étalent sur deux lignes) ont gagné en hauteur pour combler l'espace entre les pistes.</p> -<p><img src="https://mdn.mozillademos.org/files/14729/7_space-between.png" style="height: 534px; width: 1030px;"></p> +<p><img src="7_space-between.png"></p> <h2 id="Justifier_les_pistes_sur_laxe_des_lignes">Justifier les pistes sur l'axe des lignes</h2> @@ -526,9 +508,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C <p>Avec le même exemple, on utilise {{cssxref("justify-content")}} avec la valeur <code>space-around</code>. Là encore, les pistes qui s'étalent sur plus d'une colonne gagnent en largeur.</p> -<div id="alignment_8"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -544,7 +524,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -582,8 +561,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C </div> </pre> -<p>{{EmbedLiveSample('alignment_8', '500', '500')}}</p> -</div> +<p>{{EmbedLiveSample('Justifier_les_pistes_sur_laxe_des_lignes', '500', '500')}}</p> <h2 id="Alignement_et_marges_automatiques">Alignement et marges automatiques</h2> @@ -591,9 +569,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C <p>Dans l'exemple qui suit, pour l'objet 1, on utilise une marge à gauche avec <code>auto</code>. On peut alors voir le contenu poussé à droite de la zone (la marge à gauche occupant le plus d'espace possible).</p> -<div id="alignment_9"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -609,7 +585,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -646,12 +621,11 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C </div> </pre> -<p>{{EmbedLiveSample('alignment_9', '500', '500')}}</p> -</div> +<p>{{EmbedLiveSample('Alignement_et_marges_automatiques', '500', '500')}}</p> <p>On peut voir comment l'objet est aligné grâce à <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">l'outil de mise en évidence des grilles dans Firefox</a>.</p> -<p><img src="https://mdn.mozillademos.org/files/14731/7_auto_margins.png" style="height: 1000px; width: 1000px;"></p> +<p><img src="7_auto_margins.png"></p> <h2 id="Lalignement_et_les_modes_décriture">L'alignement et les modes d'écriture</h2> diff --git a/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html b/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html index 6071aa815d..1b93e665ec 100644 --- a/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html +++ b/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html @@ -59,7 +59,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progre <p>Le mode {{cssxref("float")}} ne s'applique plus sur l'objet et on peut utiliser la propriété {{cssxref("align-self")}} afin d'aligner le contenu vers la fin du conteneur.</p> -<div id="enhancement_1"> <pre class="brush: css">* {box-sizing: border-box;} img { max-width: 100%; @@ -103,22 +102,21 @@ img { </div> </pre> -<p>{{EmbedLiveSample('enhancement_1', '500', '180')}}</p> -</div> +<p>{{EmbedLiveSample('Effectuer_la_transition_depuis_une_disposition_flottante', '500', '180')}}</p> <p>Dans l'image qui suit, on voit à gauche ce qu'on obtient dans un navigateur qui ne prend pas en charge les grilles CSS et à droite le résultat obtenu pour un navigateur qui permet de les utiliser.</p> -<p><img alt="A simple example of overriding a floated layout using grid." src="https://mdn.mozillademos.org/files/14743/10-float-simple-override.png" style="height: 308px; width: 1620px;"></p> +<p><img alt="A simple example of overriding a floated layout using grid." src="10-float-simple-override.png"></p> <h3 id="Utiliser_les_requêtes_de_fonctionnalité_(feature_queries)">Utiliser les requêtes de fonctionnalité (<em>feature queries</em>)</h3> <p>L'exemple que nous venons de voir est très simple et on peut résoudre le problème sans avoir à écrire de code qui gênerait les navigateurs historiques, le code historique ne pose pas non plus de problème pour les navigateurs qui prennent en charge les grilles CSS. Dans la réalité, on fait parfois face à des cas plus complexes.</p> +<h4 id="un_exemple_plus_complexe">Un exemple plus complexe</h4> + <p>Dans le prochain exemple, nous aurons un ensemble de cartes disposées avec du flottement. On a défini une largeur ({{cssxref("width")}}) sur ces cartes afin de pouvoir appliquer le flottement {{cssxref("float")}}. Pour créer des espaces entre les cartes, on utilise une marge ({{cssxref("margin")}}) sur les objets puis une marge négative sur le conteneur.</p> -<div id="enhancement_2"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -135,7 +133,6 @@ img { color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper ul { overflow: hidden; @@ -180,22 +177,23 @@ img { </div> </pre> -<p>{{EmbedLiveSample('enhancement_2', '550', '400')}}</p> -</div> +<p>{{EmbedLiveSample('un_exemple_plus_complexe', '550', '400')}}</p> <p>Dans la capture qui suit, on voit un problème classique qui est causé par les dispositions flottantes : si on ajoute du contenu à l'une des cartes, la disposition est chamboulée.</p> -<p><img alt="A floated cards layout demonstrating the problem caused by uneven content height." src="https://mdn.mozillademos.org/files/14745/10-floated-cards.png" style="height: 536px; width: 550px;"></p> +<p><img alt="A floated cards layout demonstrating the problem caused by uneven content height." src="10-floated-cards.png"></p> <p>Pour gérer les anciens navigateurs dans une certaine mesure, on peut indiquer une hauteur minimale pour les boîtes avec {{cssxref("min-height")}} et espérer que les éditeurs n'ajouteront pas trop de contenu dans chaque boîte…</p> <p>Voyons comment améliorer cette disposition avec une grille : on transforme l'élément {{HTMLElement("ul")}} en un conteneur de grille avec trois pistes en colonne. Malheureusement, la largeur qu'on avait affectée aux éléments de la liste s'applique toujours et désormais, chaque élément de la liste occupe uniquement un tiers de la piste correspondante.</p> -<p><img alt="After applying grid to our container, the width of the items is now incorrect as they display at one third of the item width." src="https://mdn.mozillademos.org/files/14747/10-float-width-problem.png" style="height: 721px; width: 550px;"></p> +<p><img alt="After applying grid to our container, the width of the items is now incorrect as they display at one third of the item width." src="10-float-width-problem.png"></p> <p>Si on réinitialise la largeur avec <code>auto</code>, on n'aura plus le résultat souhaité dans les anciens navigateurs. Il faut donc trouver un moyen de définir la largeur pour les anciens navigateurs et de supprimer la largeur quand le navigateur prend en charge les grilles CSS. Grâce <a href="/fr/docs/Web/CSS/@supports">aux requêtes de fonctionnalité CSS</a>, on peut le faire directement en CSS.</p> -<p>Les requêtes de fonctionnalité ressemblent beaucoup aux <a href="/fr/docs/Web/CSS/Requêtes_média">requêtes de média</a> qu'on utilise pour créer des dispositions adaptatives. Ici, plutôt que de vérifier la largeur de la zone d'affichage ou telle caractéristique du navigateur ou de l'appareil, on vérifie la prise en charge d'une propriété CSS avec une certaine valeur grâce à une règle {{cssxref("@supports")}}. À l'intérieur de cette requête, on peut écrire le CSS nécessaire pour obtenir la nouvelle disposition et retiré tout ce qui est nécessaire pour l'ancienne mise en forme.</p> +<h4 id="une_solution_avec_les_requetes_de_fonctionnalité">Une solution avec les requêtes de fonctionnalité</h4> + +<p>Les requêtes de fonctionnalité ressemblent beaucoup aux <a href="/fr/docs/Web/CSS/Media_Queries">requêtes de média</a> qu'on utilise pour créer des dispositions adaptatives. Ici, plutôt que de vérifier la largeur de la zone d'affichage ou telle caractéristique du navigateur ou de l'appareil, on vérifie la prise en charge d'une propriété CSS avec une certaine valeur grâce à une règle {{cssxref("@supports")}}. À l'intérieur de cette requête, on peut écrire le CSS nécessaire pour obtenir la nouvelle disposition et retiré tout ce qui est nécessaire pour l'ancienne mise en forme.</p> <pre class="brush: css">@supports (display: grid) { .wrapper { @@ -208,11 +206,9 @@ img { <p>La prise en charge des requêtes de fonctionnalité par les différents navigateurs est excellente. Tous les navigateurs qui prennent en charge la nouvelle spécification pour les grilles CSS supportent aussi les requêtes de fonctionnalité. On peut donc les utiliser pour résoudre le problème précédent pour améliorer la disposition flottante.</p> -<p>On utilise donc <code>@supports</code> pour vérifier la prise en charge de <code>display: grid</code>;, ensuite on indique que {{HTMLElement("ul")}} est le conteneur de la grille, on définit la largeur et {{cssxref("min-height")}} avec <code>auto</code> pour les éléments {{HTMLElement("li")}}. On retire également les marges, les marges négatives et on remplace l'espacement avec la propriété {{cssxref("grid-gap")}}. Cela signifie qu'il n'y aura pas de marge finale sur la dernière ligne de boîtes. La disposition fonctionne également désormais lorsqu'une carte possède plus de contenu qu'une autre.</p> +<p>On utilise donc <code>@supports</code> pour vérifier la prise en charge de <code>display: grid</code>;, ensuite on indique que {{HTMLElement("ul")}} est le conteneur de la grille, on définit la largeur et {{cssxref("min-height")}} avec <code>auto</code> pour les éléments {{HTMLElement("li")}}. On retire également les marges, les marges négatives et on remplace l'espacement avec la propriété {{cssxref("gap")}}. Cela signifie qu'il n'y aura pas de marge finale sur la dernière ligne de boîtes. La disposition fonctionne également désormais lorsqu'une carte possède plus de contenu qu'une autre.</p> -<div id="enhancement_3"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -229,7 +225,6 @@ img { color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper ul { overflow: hidden; @@ -287,8 +282,7 @@ img { </div> </pre> -<p>{{EmbedLiveSample('enhancement_3', '550', '480')}}</p> -</div> +<p>{{EmbedLiveSample('une_solution_avec_les_requetes_de_fonctionnalité', '550', '480')}}</p> <h2 id="Surcharger_les_autres_valeurs_pour_display">Surcharger les autres valeurs pour <code>display</code></h2> @@ -296,9 +290,7 @@ img { <p>Là encore, on peut utiliser les requêtes de fonctionnalité pour surcharger <code>display: inline-block</code>. Ici aussi, il n'est pas nécessaire de tout surcharger. Pour les éléments concernés par <code>inline-block</code>, ils deviendront des objets de la grille et <code>inline-block</code> ne s'appliquera plus. Dans l'exemple qui suit, on utilise la propriété <code>vertical-align</code> sur les éléments lorsqu'on utilise le mode <code>inline-block</code>, cette propriété n'étant pas appliquée aux éléments d'une grille, elle est ignorée lorsque l'élément devient un objet de la grille.</p> -<div id="enhancement_4"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -316,7 +308,7 @@ img { color: #d9480f; } </pre> -</div> + <pre class="brush: css">.wrapper ul { margin: 0 -10px; @@ -374,8 +366,7 @@ img { </div> </pre> -<p>{{EmbedLiveSample('enhancement_4', '500', '480')}}</p> -</div> +<p>{{EmbedLiveSample('Surcharger_les_autres_valeurs_pour_display', '500', '480')}}</p> <p>Ici aussi, il faut reparamétrer la largeur de l'élément puis améliorer les autres propriétés. Dans cet exemple également on a utilisé <code>grid-gap</code> plutôt que des marges et des marges négatives pour créer les « gouttières ».</p> diff --git a/files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html b/files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html index ccde0b5c42..2270ae2deb 100644 --- a/files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html +++ b/files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html @@ -47,9 +47,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité <p>Dans cet exemple, on utilise une grille pour organiser un ensemble de boîtes qui contiennent des liens. On utilise les propriétés pour placer les éléments sur des lignes : la première boîte est placée sur la deuxième ligne. Visuellement, cette boîte apparaît désormais comme le quatrième élément de la liste. Mais si on utilise la touche tabulation pour naviguer au clavier parmi les liens, c'est toujours ce lien qui est en premier.</p> -<div id="accessibility_1"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -65,7 +63,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -88,8 +85,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité </div> </pre> -<p>{{EmbedLiveSample('accessibility_1', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample('Un_ré-ordonnancement_visuel_et_non_logique', '500', '330')}}</p> <p>Pour ce scénario, la spécification indique que, si la boîte 1 doit logiquement être placée ici, il faut alors modifier le document source plutôt que de réordonner les éléments grâce à la grille.</p> diff --git a/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html b/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html index b8ec3a91d3..d43798fd7f 100644 --- a/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html +++ b/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html @@ -42,7 +42,7 @@ original_slug: >- <p>Cela peut devenir un problème lorsqu'on développe un site qui doit fonctionner avec plusieurs langues dont certaines sont écrites de droite à gauche et non de gauche à droite. Les navigateurs savent plutôt bien gérer les différentes directions d'écriture. Dans l'exemple qui suit, on a deux paragraphes. Pour le deuxième, aucune propriété {{cssxref("text-align")}} n'est utilisée, alors que pour le second, on utilise <code>text-align</code> avec <code>left</code> et on ajoute <code>dir="rtl"</code> sur l'élément HTML ce qui a pour effet de changer la direction d'écriture. On peut voir que, dans le second paragraphe, la direction change et le texte est écrit de droite à gauche. Dans le premier cependant, avec <code>text-align value: left</code>, l'alignement reste à gauche.</p> -<p><img alt="A simple example of text direction." src="https://mdn.mozillademos.org/files/14733/8_direction_simple_example.png" style="height: 354px; width: 1136px;"></p> +<p><img alt="A simple example of text direction." src="8_direction_simple_example.png"></p> <p>Cela illustre un problème fréquent avec les propriétés et valeurs physiques en CSS : elles empêchent le navigateur de passer correctement d'un mode d'écriture à l'autre.</p> @@ -54,7 +54,7 @@ original_slug: >- <p>Lorsqu'on commence à travailler avec les propriétés logiques plutôt qu'avec les propriétés physiques, on cesse de voir le monde comme un espace qui va de gauche à droite et de haut en bas. Il faut de nouveaux axes de références : l'axe de bloc (<em>block axis</em> en anglais) et l'axe en ligne (<em>inline axis</em>). Le premier est l'axe orthogonal au sens d'écriture et le second est l'axe dans lequel on écrit. Ces axes <em>logiques</em> sont très utiles et on comprend mieux leurs rôles sur la grille.</p> -<p><img alt="An image showing the default direction of the Block and Inline Axes." src="https://mdn.mozillademos.org/files/14735/8-horizontal-tb.png" style="height: 256px; width: 500px;"></p> +<p><img alt="An image showing the default direction of the Block and Inline Axes." src="8-horizontal-tb.png"></p> <h2 id="Les_modes_d'écriture_CSS">Les modes d'écriture CSS</h2> @@ -74,9 +74,7 @@ original_slug: >- <p>Sur le Web, c'est la valeur <code>horizontal-tb</code> qui est la valeur par défaut pour le texte. C'est dans cette direction que vous lisez cet article. Les autres valeurs changeront la façon dont le texte est écrit sur le document et correspondent aux modes d'écriture utilisés dans d'autres langues. Dans l'exemple qui suit, on a deux paragraphes, le premier utilise la valeur par défaut <code>horizontal-tb</code> et le second utilise la valeur <code>vertical-rl</code>. Dans ce deuxième mode, le texte est toujours écrit de gauche à droite mais la direction du texte est verticale. Dans ce deuxième paragraphe, l'axe en ligne (<em>inline</em>) est donc l'axe vertical.</p> -<div id="writing_1"> -<div class="hidden"> -<pre class="brush: css">.wrapper > p { +<pre class="brush: css hidden">.wrapper > p { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; @@ -86,7 +84,6 @@ original_slug: >- max-width: 300px; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <p style="writing-mode: horizontal-tb">Mon mode d'écriture est celui par défaut <code>horizontal-tb</code></p> @@ -94,18 +91,17 @@ original_slug: >- </div> </pre> -<p>{{EmbedLiveSample('writing_1', '500', '420')}}</p> -</div> +<p>{{EmbedLiveSample("writing-mode", '500', '420')}}</p> <h2 id="La_gestion_des_modes_d'écriture_avec_une_grille">La gestion des modes d'écriture avec une grille</h2> <p>Si on reprend l'exemple avec la grille, on comprend mieux l'effet du changement du mode d'écriture qui change les axes logiques.</p> +<h3 id="Mode_d'écriture_par_défaut">Mode d'écriture par défaut</h3> + <p>Dans le prochain exemple, la grille possède trois colonnes et deux lignes. Cela signifie qu'il y a trois pistes qui traversent l'axe de bloc. Avec le mode d'écriture par défaut, la grille commence par placer les objets en haut à gauche en remplissant les trois cellules sur la première ligne avant de passer à la suivante, en formant une nouvelle ligne, etc.</p> -<div id="writing_2"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -121,7 +117,6 @@ original_slug: >- color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -140,14 +135,13 @@ original_slug: >- </div> </pre> -<p>{{EmbedLiveSample('writing_2', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample("Mode_d'écriture_par_défaut", '500', '330')}}</p> + +<h3 id="definir_writing-mode">Définir writing-mode</h3> <p>Si on ajoute <code>writing-mode: vertical-lr</code> au conteneur de la grille, on peut voir que les axes logiques s'appliquent désormais dans une autre direction. L'axe de bloc (aussi appelé l'axe des colonnes pour la grille) s'étend maintenant de gauche à droite et l'axe en ligne court verticalement.</p> -<div id="writing_3"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -163,7 +157,6 @@ original_slug: >- color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { writing-mode: vertical-lr; @@ -183,10 +176,9 @@ original_slug: >- </div> </pre> -<p>{{EmbedLiveSample('writing_3', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample("definir_writing-mode", '500', '330')}}</p> -<p><img alt="A image showing the direction of Block and Inline when writing-mode is vertical-lr" src="https://mdn.mozillademos.org/files/14737/8-vertical-lr.png" style="height: 360px; width: 257px;"></p> +<p><img alt="A image showing the direction of Block and Inline when writing-mode is vertical-lr" src="8-vertical-lr.png"></p> <h2 id="L'utilisation_de_valeurs_logiques_pour_l'alignement">L'utilisation de valeurs logiques pour l'alignement</h2> @@ -194,9 +186,7 @@ original_slug: >- <p>Dans le prochain exemple, on aligne des objets dans une grille pour laquelle <code>writing-mode: vertical-lr</code>. Les valeurs <code>start</code> et <code>end</code> fonctionnent de la même façon qu'avec le mode d'écriture par défaut mais, parce qu'elles sont logiques, on voit que la grille est bien renversée.</p> -<div id="writing_4"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -212,7 +202,6 @@ original_slug: >- color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { writing-mode: vertical-lr; @@ -248,8 +237,7 @@ original_slug: >- </div> </pre> -<p>{{EmbedLiveSample('writing_4', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample("L'utilisation_de_valeurs_logiques_pour_l'alignement", '500', '330')}}</p> <p>Si vous souhaitez voir l'effet obtenu avec une écriture verticale de haut en bas et de droite à gauche, il suffit de passer de <code>vertical-lr</code> à <code>vertical-rl</code> pour changer de mode d'écriture.</p> @@ -269,9 +257,9 @@ original_slug: >- <li>L'objet 3 commence à la colonne 1 et s'étend jusqu'à la troisième colonne.</li> </ul> -<div id="writing_5"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<h3 id="placement_sur_les_lignes_pour_du_texte_de_gauche_à_droite">Placement sur les lignes pour du texte de gauche à droite</h3> + +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -314,14 +302,13 @@ original_slug: >- </div> </pre> -<p>{{EmbedLiveSample('writing_5', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample("placement_sur_les_lignes_pour_du_texte_de_gauche_à_droite", '500', '330')}}</p> + +<h3 id="placement_sur_les_lignes_pour_du_texte_de_droite_à_gauche">Placement sur les lignes pour du texte de droite à gauche</h3> <p>Si on ajoute alors la propriété {{cssxref("direction")}} avec la valeur <code>rtl</code> pour le conteneur de la grille, la colonne 1 sera la plus à droite et la colonne 1 sera à gauche.</p> -<div id="writing_6"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -337,7 +324,6 @@ original_slug: >- color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { direction: rtl; @@ -365,8 +351,7 @@ original_slug: >- </div> </pre> -<p>{{EmbedLiveSample('writing_6', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample("placement_sur_les_lignes_pour_du_texte_de_droite_à_gauche", '500', '330')}}</p> <p>On voit ici que si on change la direction du texte pour la page ou pour une partie de la page : la disposition change selon lees numéros de lignes. Si on ne veut pas que les lignes bougent, on pourra utiliser des lignes nommées pour éviter cet effet.</p> @@ -398,7 +383,6 @@ original_slug: >- <p>Les modes d'écritures permettent d'afficher les documents en respectant les règles d'affichage de la langue utilisé. On peut également les utiliser afin de créer des effets stylistiques. Dans l'exemple ci-après, on a une grille avec du texte et des liens qui seront affichés verticalement, à côté du texte.</p> -<div id="writing_7"> <pre class="brush: css">.wrapper { display: grid; grid-gap: 20px; @@ -435,12 +419,11 @@ original_slug: >- </div> </pre> -<p>{{EmbedLiveSample('writing_7', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample("Utiliser_des_modes_d'écriture_hybrides_et_les_grilles_CSS", '500', '330')}}</p> <h2 id="Les_valeurs_physiques_et_les_grilles_CSS">Les valeurs physiques et les grilles CSS</h2> -<p>On rencontre souvent les propriétés physiques lorsqu'on construit un site web et, bien que la grille et les propriétés logiques permettent de respecter les modes d'écriture, il existe certains effets qui ne peuvent être obtenus qu'avec des propriétés et des valeurs physiques. Dans le guide sur <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">l'alignement des boîtes et les grilles</a>, nous avons vu comment utiliser les marges automatiques sur les zones d'une grille. Utiliser les marges automatiques pour contraindre le placement d'un élément est une astuce qu'on rencontre aussi avec les boîtes flexibles mais cela couple la disposition avec l'espace physique.</p> +<p>On rencontre souvent les propriétés physiques lorsqu'on construit un site web et, bien que la grille et les propriétés logiques permettent de respecter les modes d'écriture, il existe certains effets qui ne peuvent être obtenus qu'avec des propriétés et des valeurs physiques. Dans le guide sur <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">l'alignement des boîtes et les grilles</a>, nous avons vu comment utiliser les marges automatiques sur les zones d'une grille. Utiliser les marges automatiques pour contraindre le placement d'un élément est une astuce qu'on rencontre aussi avec les boîtes flexibles mais cela couple la disposition avec l'espace physique.</p> <p>Si on utilise le positionnement absolu dans une zone d'une grille, là encore, on utilisera des décalages physiques pour décaler l'élément au sein de la zone. Dans ces cas, il faut être conscient du couplage qu'on ajoute avec l'espace physique et comprendre qu'il faudra adapter la feuille de style si on veut par exemple passer d'un mode <code>ltr</code> à un mode <code>rtl</code>.</p> diff --git a/files/fr/web/css/css_grid_layout/grid_template_areas/index.html b/files/fr/web/css/css_grid_layout/grid_template_areas/index.html index 259dd33bbc..2b45f2fac6 100644 --- a/files/fr/web/css/css_grid_layout/grid_template_areas/index.html +++ b/files/fr/web/css/css_grid_layout/grid_template_areas/index.html @@ -13,7 +13,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille <p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}</p> -<p>Dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">le guide précédent</a>, on a étudié les lignes formées par une grille et comment positionner des objets sur ces lignes. Lorsqu'on utilise une grille CSS, on a toujours ces lignes et celles-ci permettent d'avoir une disposition simple. Toutefois, il existe une autre méthode de disposition avec les grilles, qu'on peut utiliser seule ou combinée avec les lignes. Avec cette méthode, on place les éléments sur des <em>zones</em> de la grille. Nous allons voir dans ce guide comment cela fonctionne voire comment on peut faire de l'ASCII-art en CSS avec les grilles !</p> +<p>Dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">le guide précédent</a>, on a étudié les lignes formées par une grille et comment positionner des objets sur ces lignes. Lorsqu'on utilise une grille CSS, on a toujours ces lignes et celles-ci permettent d'avoir une disposition simple. Toutefois, il existe une autre méthode de disposition avec les grilles, qu'on peut utiliser seule ou combinée avec les lignes. Avec cette méthode, on place les éléments sur des <em>zones</em> de la grille. Nous allons voir dans ce guide comment cela fonctionne voire comment on peut faire de l'ASCII-art en CSS avec les grilles !</p> <h2 id="Donner_un_nom_à_une_zone_de_grille">Donner un nom à une zone de grille</h2> @@ -26,7 +26,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille <p>Ici, on définit les quatre lignes qui entourent la zone en question :</p> -<p><img alt="The Grid Area defined by lines" src="https://mdn.mozillademos.org/files/14667/4_Area.png" style="height: 354px; width: 951px;"></p> +<p><img alt="The Grid Area defined by lines" src="4_area.png"></p> <p>On peut également définir une zone en lui donnant un nom puis en définissant l'emplacement de cette zone grâce à la propriété {{cssxref("grid-template-areas")}}. Vous pouvez choisir les noms de vos zones, on peut par exemple créer une disposition avec quatre zones :</p> @@ -37,11 +37,10 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille <li>Le contenu principale (<em>content</em>)</li> </ul> -<p><img alt="An image showing a simple two column layout with header and footer" src="https://mdn.mozillademos.org/files/14669/4_Layout.png" style="height: 397px; width: 900px;"></p> +<p><img alt="An image showing a simple two column layout with header and footer" src="4_layout.png"></p> <p>Avec {{cssxref("grid-area")}}, on affecte un nom à chacune de ces zones. Pour le moment, aucune disposition n'a été créée mais on a des noms qu'on pourra utiliser dans notre disposition :</p> -<div id="Grid_Area_1"> <pre class="brush: css">.header { grid-area: hd; } @@ -69,8 +68,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -88,7 +86,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div class="header">En-tête</div> @@ -97,8 +94,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille <div class="footer">Pied de page</div> </div></pre> -<p>{{EmbedLiveSample('Grid_Area_1', '300', '330')}}</p> -</div> +<p>{{EmbedLiveSample("Donner_un_nom_à_une_zone_de_grille", '300', '330')}}</p> <p>Grâce à cette méthode, il n'est pas nécessaire de gérer chacun des éléments individuellement. Tout est organisé au travers du conteneur. La disposition est décrite grâce à la propriété {{cssxref("grid-template-areas")}}.</p> @@ -120,8 +116,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -139,7 +134,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -159,7 +153,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille <div class="footer">Pied de page</div> </div></pre> -<p>{{EmbedLiveSample('Laisser_une_cellule_vide', '300', '330')}}</p> +<p>{{EmbedLiveSample("Laisser_une_cellule_vide", '300', '330')}}</p> <p>Si on veut que la disposition soit bien représentée, on peut utiliser plusieurs points. Tant que ceux-ci ne sont pas séparés par un espace, ils compteront pour une seule cellule. Dans le cas d'une disposition complexe, cela permet d'avoir des lignes et colonnes clairement alignées, y compris dans la règle CSS.</p> @@ -183,8 +177,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -202,7 +195,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -215,16 +207,14 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille } </pre> -<div class="hidden"> -<pre class="brush: html"><div class="wrapper"> +<pre class="brush: html hidden"><div class="wrapper"> <div class="header">En-tête</div> <div class="sidebar">Barre latérale</div> <div class="content">Contenu</div> <div class="footer">Pied de page</div> </div></pre> -</div> -<p>{{EmbedLiveSample('Occuper_plusieurs_cellules', '300', '330')}}</p> +<p>{{EmbedLiveSample("Occuper_plusieurs_cellules", '300', '330')}}</p> <p>La valeur utilisée pour {{cssxref("grid-template-areas")}} doit obligatoirement décrire une grille complète, sinon elle est considérée invalide et la propriété est ignorée. Cela signifie qu'il faut le même nombre de cellules pour chaque ligne (si une cellule est vide, on l'indiquera avec un point). Si des zones ne sont pas rectangulaires, cela sera également considéré comme invalide.</p> @@ -236,8 +226,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille <p>Pour la disposition vue précédemment, on définit ici une disposition par défaut sur une seule colonne pour les affichages étroits. On a donc une seule piste sur laquelle s'empilent les objets :</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -255,7 +244,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille color: #d9480f; } </pre> -</div> <pre class="brush: css">.header { grid-area: hd; @@ -302,14 +290,12 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille } </pre> -<div class="hidden"> -<pre class="brush: html"><div class="wrapper"> +<pre class="brush: html hidden"><div class="wrapper"> <div class="header">En-tête</div> <div class="sidebar">Barre latérale</div> <div class="content">Contenu</div> <div class="footer">Pied de page</div> </div></pre> -</div> <p>{{EmbedLiveSample("Redéfinir_une_grille_avec_des_media_queries", '550', '330')}}</p> @@ -317,15 +303,16 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille <p>La plupart des exemples illustrent une utilisation de la grille pour la disposition principale de la page. Toutefois, une grille peut également être utile pour les petits éléments. {{cssxref("grid-template-areas")}} est assez pratique car elle permet de voir facilement à quoi ressemblera l'élément.</p> +<h3 id="Exemple_d'objet_média">Exemple d'objet média</h3> + <p>Dans l'exemple qui suit, on crée un objet « media » qui servira de composant pour afficher un media (une image par exemple) d'un côté et un texte de l'autre. On pourra ainsi voir l'effet obtenu en changeant la disposition avec l'image à droite ou à gauche.</p> -<p><img alt="Images showing an example media object design" src="https://mdn.mozillademos.org/files/14671/4_Media_objects.png" style="height: 432px; width: 800px;"></p> +<p><img alt="Images showing an example media object design" src="4_media_objects.png"></p> <p>Ici, la grille se compose de deux pistes en colonnes. La colonne pour l'image est dimensionnée avec <code>1fr</code> et celle pour le texte reçoit <code>3fr</code>. Si on souhaitait utiliser une largeur fixe pour l'image, on aurait pu utiliser des pixels pour définir la taille de la colonne et utiliser <code>1fr</code> pour la zone du texte. Cette colonne de <code>1fr</code> aurait alors occupé le reste de l'espace.</p> <p>Pour la zone dédiée à l'image, on crée une zone de grille intitulée <code>img</code> et pour le texte, on crée une seconde zone intitulée <code>content</code>. Ensuite, on utilise ces noms pour créer l'organisation via la propriété <code>grid-template-areas</code>.</p> -<div id="Media_1"> <pre class="brush: css">* {box-sizing: border-box;} .media { @@ -361,14 +348,12 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille </div> </div></pre> -<p>{{EmbedLiveSample('Media_1', '300', '200')}}</p> -</div> +<p>{{EmbedLiveSample("Exemple_d'objet_média", '300', '200')}}</p> <h3 id="Afficher_l'image_de_l'autre_côté">Afficher l'image de l'autre côté</h3> <p>Si on a besoin d'afficher l'image d l'autre côté, il suffit de redéfinir une grille pour laquelle la piste qui mesure <code>1fr</code> est en dernier et d'échanger les valeurs dans {{cssxref("grid-template-areas")}}.</p> -<div id="Media_2"> <pre class="brush: css">* {box-sizing: border-box;} .media { @@ -409,8 +394,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille </div> </div></pre> -<p>{{EmbedLiveSample('Media_2', '300', '200') }}</p> -</div> +<p>{{EmbedLiveSample("Afficher_l'image_de_l'autre_côté", '300', '200') }}</p> <h2 id="Les_propriétés_raccourcies_pour_les_grilles_CSS">Les propriétés raccourcies pour les grilles CSS</h2> @@ -463,7 +447,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille <li>{{cssxref("grid-auto-flow")}}</li> </ul> -<p>Cette propriété réinitialise également la propriété {{cssxref("grid-gap")}} avec la valeur <code>0</code> mais, en revanche, elle ne permet pas de définir des espaces.</p> +<p>Cette propriété réinitialise également la propriété {{cssxref("gap")}} avec la valeur <code>0</code> mais, en revanche, elle ne permet pas de définir des espaces.</p> <p>On peut utiliser la même syntaxe qu'avec {{cssxref("grid-template")}} mais attention, cela réinitialisera les valeurs des autres propriétés :</p> diff --git a/files/fr/web/css/css_grid_layout/index.html b/files/fr/web/css/css_grid_layout/index.html index b097f662db..6d622ed3af 100644 --- a/files/fr/web/css/css_grid_layout/index.html +++ b/files/fr/web/css/css_grid_layout/index.html @@ -18,8 +18,7 @@ translation_of: Web/CSS/CSS_Grid_Layout <p>Dans l'exemple qui suit, on montre comment utiliser une grille avec trois pistes en colonnes pour laquelle les nouvelles lignes créées mesureront au moins 100 pixels et auront au plus la taille automatique (définie par leur contenu). Les éléments sont placés sur la grille grâce aux numéros des lignes horizontales et verticales.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { max-width: 940px; margin: 0 auto; @@ -32,7 +31,6 @@ translation_of: Web/CSS/CSS_Grid_Layout padding: 1em; color: #d9480f; }</pre> -</div> <h3 id="HTML">HTML</h3> @@ -85,7 +83,6 @@ translation_of: Web/CSS/CSS_Grid_Layout <h3 id="Propriétés_CSS">Propriétés CSS</h3> -<div class="index"> <ul> <li>{{cssxref("grid-template-columns")}}</li> <li>{{cssxref("grid-template-rows")}}</li> @@ -106,17 +103,14 @@ translation_of: Web/CSS/CSS_Grid_Layout <li>{{cssxref("column-gap")}}</li> <li>{{cssxref("gap")}}</li> </ul> -</div> <h3 id="Fonctions_CSS">Fonctions CSS</h3> -<div class="index"> <ul> <li>{{cssxref("repeat", "repeat()")}}</li> <li>{{cssxref("minmax", "minmax()")}}</li> <li>{{cssxref("fit-content", "fit-content()")}}</li> </ul> -</div> <h3 id="Types_de_donnée_CSS">Types de donnée CSS</h3> @@ -124,7 +118,6 @@ translation_of: Web/CSS/CSS_Grid_Layout <h3 id="Termes_définis_dans_le_glossaire">Termes définis dans le glossaire</h3> -<div class="index"> <ul> <li><a href="/fr/docs/Glossaire/Grid">Grille</a></li> <li><a href="/fr/docs/Glossaire/Grid_Lines">Lignes</a></li> @@ -136,11 +129,9 @@ translation_of: Web/CSS/CSS_Grid_Layout <li><a href="/fr/docs/Glossaire/Grid_Rows">Ligne horizontale </a></li> <li><a href="/fr/docs/Glossaire/Grid_Column">Colonnes</a></li> </ul> -</div> <h2 id="Guides">Guides</h2> -<div class="index"> <ul> <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base">Les concepts de base</a></li> <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Placer les éléments sur les lignes d'une grille CSS</a></li> @@ -155,7 +146,6 @@ translation_of: Web/CSS/CSS_Grid_Layout <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS">Construire des dispositions courantes avec des grilles CSS</a></li> <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Subgrid">Les sous-grilles (<em>subgrid</em>)</a></li> </ul> -</div> <h2 id="Ressources_externes">Ressources externes</h2> diff --git a/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html index a7fbb6e569..d31fb16a38 100644 --- a/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html +++ b/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html @@ -19,9 +19,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril <p>Lorsqu'on définit une grille avec <code>grid-template-rows</code> et <code>grid-template-columns</code>, on peut donner des noms aux lignes (toutes ou seulement quelques unes). Pour illustrer ce point, nous allons reprendre la disposition utilisée dans l'article sur le placement sur les lignes. Cette fois, nous allons utiliser des lignes avec des noms.</p> -<div id="example_named_lines"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -37,7 +35,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril color: #d9480f; } </pre> -</div> <p>Lorsqu'on définit la grille, on nomme les lignes entre crochets. Ces noms peuvent être n'importe quelle valeur. Ici, on définit un nom pour le début et la fin du conteneur, pour les lignes et pour les colonnes. On définit les blocs du centres (ici <code>content-start</code> et <code>content-end</code>), à la fois pour les lignes et pour les colonnes. Il n'est pas nécessaire de nommer toutes les lignes de la grille, on peut très bien uniquement nommer celles qui sont importantes.</p> @@ -79,8 +76,8 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril </div> </pre> -<p>{{EmbedLiveSample('example_named_lines', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample("Nommer_des_lignes_lorsqu'on_définit_une_grille", '500', '330')}}</p> + <p>Tout le reste continue de fonctionner de la même façon. Vous pouvez aussi utiliser des noms et des numéros. Le nommage des lignes est utile lorsqu'on souhaite créer une disposition <em>responsive</em> où on redéfinit la grille plutôt que d'avoir à redéfinir la position du contenu en changeant les numéros de lignes dans les <em>media queries</em>.</p> @@ -94,9 +91,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril <p>Bien qu'on puisse choisir n'importe quel nom (avec les contraintes qu'on vient d'énoncer), si on utilise les suffixes <code>-start</code> et <code>-end</code> pour désigner les lignes qui entourent une zone (comme dans l'exemple ci-avant), la grille créera automatiquement une zone nommée avec le nom utilisé devant ces suffixes. Si on reprend l'exemple précédent où on utilise <code>content-start</code> et <code>content-end</code> pour les lignes et pour les colonnes, cela signifie qu'on a, implicitement, une zone de grille intitulée <code>content</code> qu'on peut également manipuler</p> -<div id="implicit_areas_from_lines"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -112,7 +107,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril color: #d9480f; } </pre> -</div> <p>On utilise les mêmes définitions qu'avant mais cette fois, nous allons placer un objet dans la zone intitulée <code>content</code>.</p> @@ -133,8 +127,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril </div> </pre> -<p>{{EmbedLiveSample('implicit_areas_from_lines', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample("Définir_des_zones_de_grilles_implicites_à_l'aide_de_lignes_nommées", '500', '330')}}</p> <p>Il n'est pas nécessaire de définir l'emplacement de cette zone avec <code>grid-template-areas</code> car les lignes suffisent à créer la zone et à la placer.</p> @@ -166,13 +159,11 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril <p>Dans l'image qui suit, on peut voir l'emplacement de ces lignes. Certaines lignes peuvent avoir deux noms (par exemple, <code>sd-end</code> et <code>main-start</code> font référence à la même ligne verticale).</p> -<p><img alt="An image showing the implicit line names created by our grid areas." src="https://mdn.mozillademos.org/files/14699/5_multiple_lines_from_areas.png" style="height: 396px; width: 1140px;"></p> +<p><img alt="An image showing the implicit line names created by our grid areas." src="5_multiple_lines_from_areas.png"></p> <p>On peut positionner <code>overlay</code> grâce à ces lignes implicites, de la même façon qu'on aurait positionner un objet avec des lignes créées explicitement :</p> -<div id="implicit_lines_from_area"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -188,7 +179,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -231,8 +221,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril </div> </pre> -<p>{{EmbedLiveSample('implicit_lines_from_area', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample("Définir_des_lignes_implicites_à_l'aide_de_zones_nommées", '500', '330')}}</p> <p>Grâce à tout ça, on voit qu'on peut créer des lignes à partir de zones nommées et créer des zones à partir de lignes nommées. Aussi, mieux vaut prendre le temps de réfléchir aux noms utilisés lorsqu'on définit un grille. En effet, plus les noms utilisés seront clairs, plus la maintenance et le travail d'équipe seront simplifiés.</p> @@ -240,11 +229,11 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril <p>Si vous souhaitez que chaque ligne ait un nom différent, il faudra alors définir la piste de façon détaillée et non utiliser la syntaxe avec <code>repeat()</code> car il faut préciser le nom de la ligne entre crochets lorsqu'on définit les pistes. Si vous utilisez la syntaxe avec <code>repeat()</code>, vous obtiendrez plusieurs lignes avec le même nom… ce qui peut également être utile.</p> +<h3 id="une_grille_à_12_colonnes_avec_repeat">Une grille à 12 colonnes avec repeat()</h3> + <p>Dans l'exemple qui suit, nous allons créer une grille avec douze colonnes de même largeur. Avant de définir la taille d'une piste pour la colonne (<code>1fr</code>), on définit un nom : <code>[col-start]</code>. Cela signifie qu'on aura une grille avec 12 colonnes, toutes intitulées <code>col-start</code> et qui mesureront chacune <code>1fr</code> de large.</p> -<div id="multiple_lines_same_name"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -260,7 +249,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -286,12 +274,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril <div class="item2">Je vais de col-start 7 et je m'étends sur 3 lignes</div> </div></pre> -<p>{{EmbedLiveSample('multiple_lines_same_name', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample("une_grille_à_12_colonnes_avec_repeat", '500', '330')}}</p> <p>Si vous observez cette disposition grâce à l'outil de mise en évidence des grilles dans Firefox, vous verrez les différentes lignes et le placement des éléments sur ces lignes :</p> -<p><img alt="The 12 column grid with items placed. The Grid Highlighter shows the position of the lines." src="https://mdn.mozillademos.org/files/14695/5_named_lines1.png" style="height: 156px; width: 1958px;"></p> +<p><img alt="The 12 column grid with items placed. The Grid Highlighter shows the position of the lines." src="5_named_lines1.png"></p> + +<h3 id="Définir_des_lignes_nommées_avec_une_liste_de_piste">Définir des lignes nommées avec une liste de piste</h3> <p>La syntaxe <code>repeat()</code> permet également d'utiliser une liste de plusieurs pistes et pas uniquement une seule piste. Dans la règle qui suit, on crée une grille composée de huit pistes qui commence par une colonne plus étroite (<code>1fr</code>), intitulée <code>col1-start</code>, et qui est suivie par une colonne plus large (<code>3fr</code>), intitulée <code>col2-start</code>.</p> @@ -316,9 +305,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril <p>Si vous utilisez une liste de pistes, vous pouvez utiliser le mot-clé <code>span</code> pour indiquer le nombre de lignes à occuper mais aussi pour indiquer le nombre de lignes à occuper qui ont un nom donné.</p> -<div id="span_line_number"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -334,7 +321,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -355,14 +341,14 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril </div> </pre> -<p>{{EmbedLiveSample('span_line_number', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample('Définir_des_lignes_nommées_avec_une_liste_de_piste', '500', '330')}}</p> + +<h3 id="cadre_d_une_grille_à_12_colonnes">Cadre d'une grille à 12 colonnes</h3> <p>Avec ces trois derniers articles, nous avons vu de nombreuses façons qui permettaient de placer des objets sur une grille. Cela peut sembler un peu trop inutilement compliqué mais il faut garder à l'esprit que toutes ne sont pas obligatoirement nécessaires. Dans la pratique, utiliser des zones nommés pour des dispositions simples permet d'avoir une représentation visuelle simple et de déplacer les différents objets facilement sur la grille.</p> <p>Si on travaille avec une disposition sur plusieurs colonnes (comme celles utilisées dans ces derniers exemples), les lignes nommées feront parfaitement l'affaire. Si vous prenez par exemple des <em>frameworks</em> tels que Foundation ou Bootstrap, ceux-ci fonctionnent sur une grille avec 12 colonnes. Le <em>framework</em> importe ensuite le code nécessaire aux différents calculs afin de s'assurer que l'ensemble des colonnes fasse 100%. En utilisant une grille CSS, le seule code nécessaire pour obtenir un tel <em>framework</em> se résume à :</p> -<div class="three_column"> <pre class="brush: css">.wrapper { display: grid; grid-gap: 10px; @@ -372,8 +358,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril <p>On peut alors utiliser ce modèle pour mettre en forme notre page. Par exemple, on peut créer une disposition avec trois colonnes, un en-tête et un pied de page avec les règles suivantes :</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -389,7 +374,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <header class="main-header">Je suis l'en-tête</header> @@ -420,12 +404,12 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril } </pre> -<p>{{EmbedLiveSample('three_column', '500', '330')}}</p> +<p>{{ EmbedLiveSample('cadre_d_une_grille_à_12_colonnes', '500', '330') }}</p> <p>Là encore, l'outil de mise en évidence de la grille permet de voir comment le placement fonctionne :</p> -<p><img alt="The layout with the grid highlighted." src="https://mdn.mozillademos.org/files/14697/5_named_lines2.png" style="height: 378px; width: 1958px;"></p> -</div> +<p><img alt="The layout with the grid highlighted." src="5_named_lines2.png"></p> + <p>Et voilà tout ce dont on a besoin. Aucun calcul compliqué, la grille a automatiquement retiré la gouttière de 10 pixels avant d'affecter l'espace aux pistes qui mesurent <code>1fr</code>. Lorsque vous construirez vos propres disposition, vous serez plus à l'aise avec la syntaxe et utiliserez les techniques qui sont les plus pertinentes pour vos projets. Essayez de construire cetaines dispositions classiques avec des différentes méthodes, vous deviendrez plus efficaces pour manipuler les grilles CSS. Dans le prochain guide, nous verrons comment la grille peut placer des objets automatiquement, sans même avoir besoin d'utiliser les propriétés de placement !</p> diff --git a/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html b/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html index 96ba332efb..08aff7df63 100644 --- a/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html +++ b/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html @@ -16,7 +16,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un <p>Dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">l'article sur les concepts de base</a>, nous avons vu comment positionner des éléments en utilisant des numéros de lignes. Nous allons désormais étudier cette fonctionnalité de positionnement plus en détail.</p> -<p>Commencer par utiliser les lignes numérotées est plutôt logique car toutes les grilles possèdent des lignes numérotées. Ces lignes forment les colonnes et les lignes horizontales de la grille, elles sont numérotées à partir de 1. On notera aussi que la numérotation des lignes varie selon le mode d'écriture du document. Dans un document écrit de gauche à droite comme le français, la ligne numéro 1 est située à l'extrêmité gauche de la grille. Si l'écriture va de droite à gauche, la ligne numéro 1 sera celle qui est située le plus à droite. Nous explorerons ces notions sur les modes d'écriture dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture">un prochain guide</a>.</p> +<p>Commencer par utiliser les lignes numérotées est plutôt logique car toutes les grilles possèdent des lignes numérotées. Ces lignes forment les colonnes et les lignes horizontales de la grille, elles sont numérotées à partir de 1. On notera aussi que la numérotation des lignes varie selon le mode d'écriture du document. Dans un document écrit de gauche à droite comme le français, la ligne numéro 1 est située à l'extrêmité gauche de la grille. Si l'écriture va de droite à gauche, la ligne numéro 1 sera celle qui est située le plus à droite. Nous explorerons ces notions sur les modes d'écriture dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes">un prochain guide</a>.</p> <h2 id="Un_exemple_simple">Un exemple simple</h2> @@ -24,10 +24,9 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un <p>Dans le conteneur, on a quatre éléments fils. Si aucune autre règle de placement n'est indiquée, ces éléments seront placés automatiquement et la grille remplira les quatre premières cellules. Si vous utilisez <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">l'outil de mise en évidence des grilles de Firefox</a>, vous pouvez voir les colonnes et les lignes horizontales formées par la grille.</p> -<p><img alt="Our Grid highlighted in DevTools" src="https://mdn.mozillademos.org/files/14663/3_hilighted_grid.png" style="height: 296px; width: 900px;"></p> +<p><img alt="Our Grid highlighted in DevTools" src="3_hilighted_grid.png"></p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -43,7 +42,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -66,7 +64,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un <p>On peut placer les éléments d'une grille en utilisant les numéros de lignes qui définissent la zone allouée à l'élément. Si on souhaite que le premier élément commence tout à gauche et occupe une colonne, qu'il commence sur la première ligne et s'étale sur quatre lignes, on pourra utiliser les règles suivantes :</p> -<div id="Line_Number"> <pre class="brush: css">.box1 { grid-column-start: 1; grid-column-end: 2; @@ -75,12 +72,11 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un } </pre> -<p>Lorsqu'on positionne des objets sur la grille, les autres continueront d'être placés selon les règles de placement automatique. Nous verrons ces règles dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS">un prochain guide</a> mais grâce à cet exemple, on peut voir que les cellules vides sont remplies au fur et à mesure par les objets qui ne sont pas placés explicitement.</p> +<p>Lorsqu'on positionne des objets sur la grille, les autres continueront d'être placés selon les règles de placement automatique. Nous verrons ces règles dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">un prochain guide</a> mais grâce à cet exemple, on peut voir que les cellules vides sont remplies au fur et à mesure par les objets qui ne sont pas placés explicitement.</p> <p>On peut placer chacun des éléments individuellement et on peut également choisir de laisser certaines cellules vides. Un des avantages de la grille CSS est qu'on peut créer des espaces sans avoir à utiliser des marges ou d'autres méthodes de contournement.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -99,7 +95,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div class="box1">Un</div> @@ -129,16 +124,14 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un } </pre> -<p>{{EmbedLiveSample('Line_Number', '300', '330')}}</p> -</div> +<p>{{EmbedLiveSample("Positionner_les_éléments_d'une_grille_grâce_au_numéro_de_ligne", '300', '330')}}</p> + -<div id="Grid_Shorthands"> <h2 id="Les_propriétés_raccourcies_grid-column_et_grid-row">Les propriétés raccourcies <code>grid-column</code> et <code>grid-row</code></h2> <p>On a écrit beaucoup de règles pour positionner chaque élément. Heureusement, il existe des propriétés raccourcies qui permettent d'avoir une syntaxe plus concise. Les propriétés {{cssxref("grid-column-start")}} et {{cssxref("grid-column-end")}} peuvent être combinées pour former la propriété raccourcie {{cssxref("grid-column")}} et de la même façon, {{cssxref("grid-row-start")}} et {{cssxref("grid-row-end")}} peuvent être synthétisées avec {{cssxref("grid-row")}}.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -157,7 +150,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div class="box1">Un</div> @@ -185,16 +177,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un } </pre> -<p>{{EmbedLiveSample('Grid_Shorthands', '300', '330')}}</p> -</div> +<p>{{EmbedLiveSample('Les_propriétés_raccourcies_grid-column_et_grid-row', '300', '330')}}</p> -<h3 id="La_taille_par_défaut">La taille par défaut</h3> +<h2 id="La_taille_par_défaut">La taille par défaut</h2> <p>Dans les exemples précédents, on a défini chaque ligne et colonne de fin pour chaque élément. Mais si en pratique, on souhaite qu'un élément n'occupe qu'une seule piste, on peut omettre <code>grid-column-end</code> ou <code>grid-row-end</code>. Par défaut, les éléments occupent une seule piste. Notre exemple initial, avec les propriétés détaillées peut donc être réécrit de cette façon :</p> -<div id="End_Lines"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -213,7 +202,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div class="box1">Un</div> @@ -244,14 +232,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un } </pre> -<p>{{EmbedLiveSample('End_Lines', '300', '330')}}</p> -</div> +<p>{{EmbedLiveSample('La_taille_par_défaut', '300', '330')}}</p> + +<h3 id="Tailles_par_défaut_avec_les_propriétés_raccourcies">Tailles par défaut avec les propriétés raccourcies</h3> <p>Avec les propriétés raccourcies, on obtient le code suivant (sans aucune barre oblique ni seconde valeur pour les éléments qui n'occupent qu'une seule piste).</p> -<div id="New_Shorthand"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -270,7 +257,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div class="box1">Un</div> @@ -298,8 +284,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un } </pre> -<p>{{EmbedLiveSample('New_Shorthand', '300', '330')}}</p> -</div> +<p>{{EmbedLiveSample('Tailles_par_défaut_avec_les_propriétés_raccourcies', '300', '330')}}</p> <h2 id="La_propriété_grid-area">La propriété <code>grid-area</code></h2> @@ -312,8 +297,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un <li><code>grid-column-end</code></li> </ul> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -332,7 +316,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div class="box1">Un</div> @@ -358,7 +341,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un <p>{{EmbedLiveSample('La_propriété_grid-area', '300', '330')}}</p> -<p>L'ordre des valeurs utilisé pour <code>grid-area</code> peut sembler un peu étrange quand on connaît celui utilisé par les propriétés raccourcies pour les marges (<em>margin</em>) et le remplissage (<em>padding</em>). Cet ordre s'explique car les grilles CSS fonctionnent avec les différents modes d'écriture et on utilise des propriétés et des valeurs <em>logiques</em> plutôt que des propriétés et des valeurs <em>physiques</em>. Nous aborderons ce point dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture">un prochain article</a> mais il faut retenir ici que l'ordre des valeurs correspond aux directions logiques suivantes :</p> +<p>L'ordre des valeurs utilisé pour <code>grid-area</code> peut sembler un peu étrange quand on connaît celui utilisé par les propriétés raccourcies pour les marges (<em>margin</em>) et le remplissage (<em>padding</em>). Cet ordre s'explique car les grilles CSS fonctionnent avec les différents modes d'écriture et on utilise des propriétés et des valeurs <em>logiques</em> plutôt que des propriétés et des valeurs <em>physiques</em>. Nous aborderons ce point dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes">un prochain article</a> mais il faut retenir ici que l'ordre des valeurs correspond aux directions logiques suivantes :</p> <ul> <li><code>block-start</code></li> @@ -377,8 +360,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un <p>Dans le prochain exemple, on renverse la disposition de la grille en travaillant à partir du bas et de la droite.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -397,7 +379,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div class="box1">Un</div> @@ -446,18 +427,17 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un <h2 id="Les_gouttières">Les gouttières</h2> -<p>La spécification pour les grilles CSS permet également d'ajouter des espaces (« gouttières ») entre les colonnes et entre les lignes grâce aux propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}}. Celles-ci permettent de définir un espace, de la même façon que la propriété {{cssxref("column-gap")}} permet d'obtenir un espace pour un mode de disposition avec plusieurs colonnes.</p> +<p>La spécification pour les grilles CSS permet également d'ajouter des espaces (« gouttières ») entre les colonnes et entre les lignes grâce aux propriétés {{cssxref("grid-column-gap")}} et {{cssxref("row-gap")}}. Celles-ci permettent de définir un espace, de la même façon que la propriété {{cssxref("column-gap")}} permet d'obtenir un espace pour un mode de disposition avec plusieurs colonnes.</p> <div class="note"> -<p><strong>Note :</strong> Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe <code>grid-</code> soit : {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} et {{cssxref("grid-gap")}}.</p> +<p><strong>Note :</strong> Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe <code>grid-</code> soit : {{cssxref("grid-column-gap")}}, {{cssxref("row-gap")}} et {{cssxref("gap")}}.</p> <p>Les navigateurs actuels retirent progressivement ce préfixe (la version préfixée sera maintenue sous forme d'alias). À l'heure actuelle, certains navigateurs ne prennent pas encore la version sans préfixe et c'est pourquoi certains exemples de ce guide continuent d'utiliser les versions préfixées avec <code>grid-</code>.</p> </div> <p>Les gouttières apparaissent uniquement entre les pistes de la grille, elles n'ajoutent pas d'espace en haut, en bas, à gauche ou à droite du conteneur. Voyons comment ajouter des espaces sur l'exemple précédent grâce à ces propriétés :</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -476,7 +456,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div class="box1">Un</div> @@ -515,7 +494,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un <h3 id="Les_propriétés_raccourcies_pour_les_gouttières">Les propriétés raccourcies pour les gouttières</h3> -<p>Les deux propriétés que nous venons de voir peuvent être synthétisées grâce à la propriété raccourcie {{cssxref("grid-gap")}}. Si on fournit une seule valeur, celle-ci s'appliquera pour les espaces entre les colonnes et entre les lignes. Avec deux valeurs, la première sera utilisée pour <code>grid-row-gap</code> et la seconde pour <code>grid-column-gap</code>.</p> +<p>Les deux propriétés que nous venons de voir peuvent être synthétisées grâce à la propriété raccourcie {{cssxref("gap")}}. Si on fournit une seule valeur, celle-ci s'appliquera pour les espaces entre les colonnes et entre les lignes. Avec deux valeurs, la première sera utilisée pour <code>grid-row-gap</code> et la seconde pour <code>grid-column-gap</code>.</p> <pre class="brush: css">.wrapper { display: grid; @@ -531,8 +510,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un <p>On a vu comment indiquer la ligne de début et la ligne de fin avec des numéros. Il est aussi possible de définir la taille d'un élément en indiquant le numéro de la ligne de départ et le nombre de pistes sur lequel s'étale l'élément.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -551,7 +529,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div class="box1">Un</div> diff --git a/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html b/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html index ca59709909..b7af0ce06d 100644 --- a/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html +++ b/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html @@ -15,21 +15,19 @@ original_slug: >- <p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","","Web/CSS/CSS_Grid_Layout")}}</p> -<p>Pour clôturer ces différents guides, nous allons maintenant voir différentes dispositions sur lesquelles nous appliquerons des techniques avec les grilles CSS. Nous prendrons un exemple qui utilise <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">les zones nommées d'une grille</a>, un système de grille flexible avec 12 colonnes et aussi une liste de produits avec un placement automatique. Comme nous le verrons, il existe plusieurs méthodes pour accéder à chaque résultat. À vous de choisir la méthode qui vous paraît la plus pertinente et utile pour les problèmes que vous avez à résoudre et les dispositions que vous devez implémenter.</p> +<p>Pour clôturer ces différents guides, nous allons maintenant voir différentes dispositions sur lesquelles nous appliquerons des techniques avec les grilles CSS. Nous prendrons un exemple qui utilise <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">les zones nommées d'une grille</a>, un système de grille flexible avec 12 colonnes et aussi une liste de produits avec un placement automatique. Comme nous le verrons, il existe plusieurs méthodes pour accéder à chaque résultat. À vous de choisir la méthode qui vous paraît la plus pertinente et utile pour les problèmes que vous avez à résoudre et les dispositions que vous devez implémenter.</p> <h2 id="Une_disposition_adaptative_avec_une_à_trois_colonnes_en_utilisant_grid-template-areas">Une disposition adaptative avec une à trois colonnes en utilisant <code>grid-template-areas</code></h2> <p>De nombreux sites web sont construits comme une variation autour de cette disposition avec du contenu, une ou plusieurs barres latérale, un en-tête et un pied de page. Pour que le site soit <em>responsive</em>, on peut souhaiter avoir une seule colonne pour certaines tailles d'affichage, ajouter une barre latérale lorsqu'on a plus d'espace et enfin, avoir trois colonnes pour les écrans les plus larges.</p> -<p><img alt="Image of the three different layouts created by redefining our grid at two breakpoints." src="https://mdn.mozillademos.org/files/14749/11-responsive-areas.png"></p> +<p><img alt="Image of the three different layouts created by redefining our grid at two breakpoints." src="11-responsive-areas.png"></p> -<p>Ici, on crée une disposition avec des zones nommées comme on a pu le voir <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">dans l'article correspondant</a></em>.</p> +<p>Ici, on crée une disposition avec des zones nommées comme on a pu le voir <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">dans l'article correspondant</a></em>.</p> <p>Dans le document on a un conteneur qui contient un en-tête, un pied de page, du contenu principal, une barre de navigation, une barre latérale et un bloc dans lequel on souhaite placer de la publicité.</p> -<div id="layout_1"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { max-width: 1024px; @@ -50,7 +48,6 @@ nav ul { padding: 0; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <header class="main-head">L'en-tête</header> @@ -114,7 +111,7 @@ nav ul { } </pre> -<p>Après cette disposition par défaut pour les appareils mobiles, on peut ajouter une <a href="/fr/docs/Web/CSS/Requêtes_média">requête média (<em>media query</em>)</a> et redéfinir la disposition lorsqu'on a plus d'espace et qu'on peut afficher deux colonnes :</p> +<p>Après cette disposition par défaut pour les appareils mobiles, on peut ajouter une <a href="/fr/docs/Web/CSS/Media_Queries">requête média (<em>media query</em>)</a> et redéfinir la disposition lorsqu'on a plus d'espace et qu'on peut afficher deux colonnes :</p> <pre class="brush: css">@media (min-width: 500px) { .wrapper { @@ -155,8 +152,7 @@ nav ul { <p>Dans cette disposition, la barre de navigation est affichée dans la colonne à gauche, à côté du contenu. Sur la colonne à droite, on a la barre latérale au-dessus de la publicité. Le pied de page, quant à lui, s'étale sur tout le bas du conteneur. Ici aussi, on utilise une boîte flexible en colonne pour la barre de navigation.</p> -<p>{{EmbedLiveSample('layout_1', '800', '430')}}</p> -</div> +<p>{{EmbedLiveSample('Une_disposition_adaptative_avec_une_à_trois_colonnes_en_utilisant_grid-template-areas', '800', '430')}}</p> <p>Cet exemple est assez simple mais permet d'illustrer comme utiliser une grille afin de réorganiser le contenu pour différentes tailles d'écran. On voit par exemple comment on déplace le bloc <code>ad</code> dans les différentes organisations. L'utilisation des noms pour les zones permet de prototyper rapidement de nouvelles dispositions. Vous pouvez toujours utiliser la grille pour agencer votre prototype même si ce n'est pas la technologie que vous utiliserez pour votre site ou votre application en production.</p> @@ -164,9 +160,7 @@ nav ul { <p>Si vous travaillez avec un <em>framework</em> ou avec un système de grille, vous êtes peut-être habitué-e à travailler sur une grille avec 12 ou 16 colonnes. On peut recréer ce genre de système avec une grille CSS. Pour commencer, on crée une grille avec 12 colonnes dont chaque piste mesure <code>1fr</code>-unit et commence par une ligne intitulée <code>col-start</code>. Autrement dit, on aura 12 colonnes intitulées <code>col-start</code>.</p> -<div id="layout_2"> -<div class="hidden"> -<pre class="brush: css">.wrapper { +<pre class="brush: css hidden">.wrapper { max-width: 1024px; margin: 0 auto; font: 1.2em Helvetica, arial, sans-serif; @@ -178,7 +172,6 @@ nav ul { padding: 10px; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -216,24 +209,21 @@ nav ul { } </pre> -<p>{{EmbedLiveSample('layout_2', '800', '330')}}</p> -</div> +<p>{{EmbedLiveSample('Une_disposition_flexible_avec_12_colonnes', '800', '330')}}</p> -<p>Comme nous l'avons vu dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nomméees_sur_une_grille">le guide sur le nommage des lignes</a>, on utilise les noms des colonnes pour placer nos éléments. On a ici 12 colonnes avec le même nom, on utilise donc ce nom et l'indice qui indique le numéro. On pourrait tout aussi bien utiliser seulement le numéro si on voulait se passer des noms pour les lignes.</p> +<p>Comme nous l'avons vu dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">le guide sur le nommage des lignes</a>, on utilise les noms des colonnes pour placer nos éléments. On a ici 12 colonnes avec le même nom, on utilise donc ce nom et l'indice qui indique le numéro. On pourrait tout aussi bien utiliser seulement le numéro si on voulait se passer des noms pour les lignes.</p> <p>Plutôt que d'indiquer le numéro de la dernière colonne pour chaque élément, on a ici utilisé le mot-clé <code>span</code> pour indiquer la taille de chaque élément. Cette approche permet de revoir plus clairement la taille de chaque élément lorsqu'on ajoute une nouvelle disposition pour une nouvelle taille d'écran. Dans la capture qui suit, on peut voir comment les blocs sont positionnés sur la grilles. Pour cela, on a utilisé <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">l'inspecteur de grille de Firefox</a> qui indique de façon claire comment les objets sont placés.</p> -<p><img alt="Showing the items placed on the grid with grid tracks highlighted." src="https://mdn.mozillademos.org/files/14753/11-grid-inspector-12col.png"></p> +<p><img alt="Showing the items placed on the grid with grid tracks highlighted." src="11-grid-inspector-12col.png"></p> <p>Il y a certainement certaines différences fondamentales avec les systèmes que vous auriez pu utiliser précédemment. On voit par exemple qu'il n'est pas nécessaire d'ajouter de règles supplémentaires pour créer une ligne. Généralement, il faut ajouter des contrôles pour éviter que les éléments remontent sur les lignes au-dessus. Avec une grille CSS, ce n'est pas un problème, les lignes supérieures sont laissées vides. La disposition étant <em>stricte</em>, on peut très bien laisser des espaces dans notre plan. Il n'est pas non plus nécessaire de définir des classes spécifiques afin d'indenter les différents objets, il suffit ici d'indiquer la colonne de début et la colonne de fin.</p> -<h3 id="Construire_une_disposition_avec_ce_système_à_12_colonnes">Construire une disposition avec ce système à 12 colonnes</h3> +<h2 id="Construire_une_disposition_avec_ce_système_à_12_colonnes">Construire une disposition avec ce système à 12 colonnes</h2> <p>Pour voir comment cette méthode fonctionne en pratique, nous allons créé le même plan que celui que nous avons vu avec les zones nommées et {{cssxref("grid-template-areas")}} mais en utilisant désormais ce système à 12 colonnes. Commençons avec la même structure que celle utilisée plus haut avec les zones nommées :</p> -<div id="layout_3"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { max-width: 1024px; @@ -254,7 +244,6 @@ nav ul { padding: 0; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <header class="main-head">L'en-tête</header> @@ -350,22 +339,20 @@ nav ul { } </pre> -<p>{{EmbedLiveSample('layout_3', '800', '430')}}</p> -</div> +<p>{{EmbedLiveSample('Construire_une_disposition_avec_ce_système_à_12_colonnes', '800', '430')}}</p> <p>On peut à nouveau profiter de <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">l'inspecteur de grille</a> pour voir comment se compose effectivement notre disposition :</p> -<p><img alt="Showing the layout with grid tracks highlighted by the grid inspector." src="https://mdn.mozillademos.org/files/14755/11-grid-inspector-12col-layout.png" style="height: 614px; width: 2050px;"></p> +<p><img alt="Showing the layout with grid tracks highlighted by the grid inspector." src="11-grid-inspector-12col-layout.png"></p> <p>On notera qu'il n'a pas été nécessaire de redéfinir explicitement la position de chaque élément pour chaque résolution. On a pu hériter des emplacements des résolutions précédentes. On gagne donc à travailler en considérant les résolutions mobiles en premier lieu. On tire également parti du placement automatique géré par la grille avec l'ordre, logique, des éléments du documents. Dans le dernier exemple, nous allons voir comment le placement automatique sur la grille peut aider à positionner des objets..</p> <h2 id="Une_liste_produit_utilisant_le_placement_automatique">Une liste produit utilisant le placement automatique</h2> -<p>De nombreuses dispositions sont essentiellement composée de <em>cartes</em> ou <em>tuiles</em> : des listes produit, des galeries d'image, etc. Avec une grille, on peut facilement créer ce genre de liste de façon adaptative, sans avoir à ajouter de <a href="/fr/docs/Web/CSS/Requêtes_média">requêtes de média</a>. Dans l'exemple qui suit, nous allons combiner les grilles CSS et les boîtes flexibles afin d'obtenir une liste de produits.</p> +<p>De nombreuses dispositions sont essentiellement composée de <em>cartes</em> ou <em>tuiles</em> : des listes produit, des galeries d'image, etc. Avec une grille, on peut facilement créer ce genre de liste de façon adaptative, sans avoir à ajouter de <a href="/fr/docs/Web/CSS/Media_Queries">requêtes de média</a>. Dans l'exemple qui suit, nous allons combiner les grilles CSS et les boîtes flexibles afin d'obtenir une liste de produits.</p> <p>Le document utilisé contient une liste d'objets non ordonnée. Pour chaque produit, on a un titre, un texte dont la taille n'est pas fixe et un lien pour effectuer une action.</p> -<div id="layout_4"> <pre class="brush: html"><ul class="listing"> <li> <h2>Produit n°1</h2> @@ -398,8 +385,7 @@ nav ul { </ul> </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} img {max-width: 100%; display: block;} body { font: 1.2em Helvetica, arial, sans-serif; @@ -418,7 +404,6 @@ h2 { padding: 20px; } </pre> -</div> <p>Nous allons créer une grille avec un nombre de colonnes adaptable et chacune des colonnes sera flexible. On indique qu'une colonne doit avoir une largeur minimale de 200 pixels et que l'espace restant doit être réparti équitablement (toutes les colonnes auront donc la même largeur). Pour obtenir ce résultat, on utilise la fonction <code>minmax()</code> avec la notation <code>repeat</code> pour la propriété <code>grid-template-columns</code> qui permet de dimensionner les pistes.</p> @@ -454,18 +439,17 @@ h2 { <p>Voici un exemple où, d'après moi, l'utilisation des boîtes flexibles est pertinente par rapport à une autre grille : on ne fait qu'aligner ou organiser des objets sur un seul axe, ce qui est très bien géré avec une boîte flexible.</p> -<p>{{EmbedLiveSample('layout_4', '800', '900')}}</p> -</div> +<p>{{EmbedLiveSample('Une_liste_produit_utilisant_le_placement_automatique', '800', '900')}}</p> + +<h2 id="empecher_les_espaces_avec_dense">Empêcher les espaces avec dense</h2> <p>Le résultat est plutôt abouti mais on a parfois des cartes qui ont beaucoup plus de contenu. Si on veut que celles-ci soient plus large (pour éviter qu'elles soient trop hautes), on peut les étaler sur deux pistes. Pour cela, on a utilisé la classe <code>wide</code> sur l'objet avec plus de contenu et on ajoute une règle {{cssxref("grid-column-end")}} avec la valeur <code>span 2</code>. Désormais, lorsque la grille devra placer un élément de ce type, elle lui affectera deux colonnes. Cela signifie aussi que pour certaines tailles d'affichage, on aura un espace dans la grille lorsqu'il n'y aura pas suffisamment d'espace pour placer un objet sur deux colonnes :</p> -<p><img alt="The layout has gaps as there is not space to layout a two track item." src="https://mdn.mozillademos.org/files/14751/11-grid-auto-flow-sparse.png" style="height: 1664px; width: 1640px;"></p> +<p><img alt="The layout has gaps as there is not space to layout a two track item." src="11-grid-auto-flow-sparse.png"></p> <p>Si on veut éviter ces trous, on peut utiliser la règle {{cssxref("grid-auto-flow")}}<code>: dense </code>sur le conteneur de la grille. Attention à utiliser cette valeur car l'ordre logique n'est plus respecté. Aussi, il ne faut utiliser cette valeur uniquement lorsqu'il n'y a pas d'ordre pour les objets. Avec cette valeur, la navigation au clavier (<em>tab order</em>) continue de suivre l'ordre des éléments du document et pas l'ordre d'affichage des objets sur la grille.</p> -<div id="layout_5"> -<div class="hidden"> -<pre class="brush: html"><ul class="listing"> +<pre class="brush: html hidden"><ul class="listing"> <li> <h2>Item One</h2> <div class="body"><p>The content of this listing item goes here.</p></div> @@ -497,7 +481,7 @@ h2 { </ul> </pre> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} img {max-width: 100%; display: block;} body { font: 1.2em Helvetica, arial, sans-serif; @@ -529,7 +513,6 @@ h2 { padding: 10px; } </pre> -</div> <pre class="brush: css">.listing { list-style: none; @@ -544,10 +527,9 @@ h2 { } </pre> -<p>{{EmbedLiveSample('layout_5', '800', '900')}}</p> +<p>{{EmbedLiveSample('empecher_les_espaces_avec_dense', '800', '900')}}</p> <p>Cette technique de placement automatiquement peut s'avérer extrêmement utile si vous devez gérer du contenu produit par un CMS pour un ensemble d'objets qui se ressemblent et auxquels vous ajoutez une classe lors de la génération en HTML.</p> -</div> <h2 id="Aller_plus_loin">Aller plus loin</h2> diff --git a/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html index 6cfbf09b73..f32d5cd4b9 100644 --- a/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html +++ b/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d <h2 id="Les_grilles_et_les_boîtes_flexibles_flexbox">Les grilles et les boîtes flexibles (<em>flexbox</em>)</h2> -<p>La différence fondamentale, entre les grilles et <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS">les boîtes flexibles CSS</a>, est que les boîtes flexibles permettent d'organiser du contenu sur une dimension (sur une ligne ou sur une colonne). Les grilles ont été conçues pour une organisation bi-dimensionnelle. Les deux spécifications partagent cependant quelques points communs et si vous savez utiliser les boîtes flexibles, vous retrouverez quelques concepts qui vous aideront à appréhender les grilles CSS.</p> +<p>La différence fondamentale, entre les grilles et <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">les boîtes flexibles CSS</a>, est que les boîtes flexibles permettent d'organiser du contenu sur une dimension (sur une ligne ou sur une colonne). Les grilles ont été conçues pour une organisation bi-dimensionnelle. Les deux spécifications partagent cependant quelques points communs et si vous savez utiliser les boîtes flexibles, vous retrouverez quelques concepts qui vous aideront à appréhender les grilles CSS.</p> <h3 id="Disposition_sur_une_dimension_ou_sur_deux_dimensions">Disposition sur une dimension ou sur deux dimensions</h3> @@ -20,9 +20,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d <p>On utilise aussi la propriété {{cssxref("flex-wrap")}} avec la valeur <code>wrap</code>, afin de créer une nouvelle ligne si le conteneur devient trop étroit pour conserver <code>flex-basis</code>.</p> -<div id="onedtwod"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -38,7 +36,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -58,9 +55,8 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d flex: 1 1 150px; } </pre> -</div> -<p>{{EmbedLiveSample('onedtwod', '500', '230')}}</p> +<p>{{EmbedLiveSample('Disposition_sur_une_dimension_ou_sur_deux_dimensions', '500', '230')}}</p> <p>On peut voir ici que deux objets sont passés sur une nouvelle ligne. Ces objets partagent l'espace disponible sur cette nouvelle ligne et ne s'alignent pas par rapport aux objets de la ligne au-dessus. En effet, lorsque des éléments flexibles passent sur une nouvelle ligne (ou colonne), celle-ci forme un nouveau conteneur et l'espace de ce conteneur est distribué entre les objets.</p> @@ -70,9 +66,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d <p>Dans cet exemple, on crée la même disposition en utilisant la grille CSS. Ici, on a trois pistes <code>1fr</code>. Il n'est pas nécessaire de paramétrer quoi que ce soit sur les objets, ils se disposeront eux-mêmes dans chaque cellule formée par la grille. On peut alors voir que les objets restent dans une grille stricte, avec les lignes et les colonnes qui sont alignées. Avec cinq éléments, on a donc un espace restant à la fin de la deuxième ligne.</p> -<div class="Two_Dimensional_With_Grid"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -88,7 +82,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -105,7 +98,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d } </pre> -</div> <p>{{EmbedLiveSample('La_même_disposition_avec_une_grille_CSS', '300', '170')}}</p> <p>Lorsqu'il s'agit de choisir entre les grilles ou les boîtes flexibles, vous pouvez vous poser les questions suivantes :</p> @@ -133,8 +125,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d <p>Dans le premier exemple, on utilise les boîtes flexibles avec un conteneur qui dispose de trois objets. La propriété {{cssxref("min-height")}} est définie et paramètre la hauteur du conteneur flexible. {{cssxref("align-items")}} vaut <code>flex-end</code> pour le conteneur flexible et les objets s'empileront donc jusqu'à l'extrémité du conteneur flexible. On utilise également la propriété {{cssxref("align-self")}} sur <code>box1</code> afin de surcharger la valeur par défaut et d'étirer jusqu'à la hauteur du conteneur et jusqu'à <code>box2</code> afin que <code>box1</code> soit alignée avec le début du conteneur flexible.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -150,7 +141,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div class="box1">Un</div> @@ -178,8 +168,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d <p>Dans cet exemple, on utilise une grille pour créer la même disposition. Cette fois on utilise les propriétés d'alignement des boîtes. On aligne donc par rapport à <code>start</code> et <code>end</code> plutôt que par rapport à <code>flex-start</code> et <code>flex-end</code>. Dans le cas d'une disposition en grille, on aligne les éléments à l'intérieur de leur zone de grille. Dans ce cas, il s'agit d'une seule cellule mais on pourrait très bien construire une zone composée de plusieurs cellules.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -195,7 +184,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div class="box1">Un</div> @@ -233,8 +221,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d <p>Dans l'exemple qui suit, on utilise le mot-clé <code>auto-fill</code> à la place d'un entier dans la fonction <code>repeat</code> et on définit la taille d'une piste à 200 pixels. Cela signifie que la grille créera autant de pistes de 200 pixels en colonnes qu'il est possible d'en placer dans le conteneur.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -250,7 +237,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -273,8 +259,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d <p>Dans l'exemple qui suit, on crée des pistes qui sont remplies automatiquement avec <code>minmax</code>. On souhaite que les pistes mesurent au moins 200 pixels, avec un maximum de <code>1fr</code>. Lorsque le navigateur a calculé la quantité de colonnes qui tiendraient dans le conteneur (en tenant compte des espaces), il utilisera le maximum <code>1fr</code> afin de répartir l'espace restant entre les objets.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -290,7 +275,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -319,8 +303,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d <p>Dans l'exemple ci-après, on a un conteneur avec quatre enfants. Le troisième élément est positionné en absolu et est placé sur la grille. La grille, le conteneur, a <code>position:</code> <code>relative</code> et devient donc le contexte de positionnement pour cet objet.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -336,7 +319,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div class="box1">Un</div> @@ -379,7 +361,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d <p>Si l'élément positionné de façon absolue est contenue dans une grille mais que celle-ci ne crée pas de nouveau contexte de positionnement, l'élément sera retiré du flux comme dans l'exemple précédent. Les contextes de positionnement sont créés comme avec les autres méthodes de disposition. Dans l'exemple, si on retire <code>position:</code> <code>relative</code> dans le code précédent, le contexte de positionnement est fourni par la zone d'affichage (le <em>viewport</em>) :</p> -<p><img alt="Image of grid container as parent" src="https://mdn.mozillademos.org/files/14661/2_abspos_example.png" style="height: 408px; width: 1702px;"></p> +<p><img alt="Image of grid container as parent" src="2_abspos_example.png"></p> <p>Là encore, l'élément ne participe plus à la disposition de la grille pour le dimensionnement ou pour le placement des autres éléments.</p> @@ -389,8 +371,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d <p>On indique que <code>.box3</code> a une position relative puis on positionne l'élément avec des propriétés de décalage. Dans ce cas, le contexte de positionnement est la zone de la grille.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -406,7 +387,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div class="box1">Un</div> @@ -458,9 +438,9 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d <p>Si on utilise <code>display:</code> <code>contents</code> sur un élément, la boîte qu'il aurait normalement créé disparaîtra et les boîtes des éléments qui sont ses enfants apparaîtront comme si elles avaient grimpé d'un niveau. Cela signifie que les éléments fils d'un élément d'une grille peuvent, à leur tour, devenir des éléments de cette grille. Un peu perdu-e ? Voici un exemple. Dans le code qui suit, on a une grille dont le premier élément s'étend sur les trois pistes. Cet élément contient trois éléments imbriqués. Ces derniers n'étant pas des enfants directs de la grille, ils ne s'inscrivent pas dans la disposition en grille et sont affichés avec la disposition classique.</p> -<div id="Display_Contents_Before"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<h3>Utiliser display contents avant</h3> + +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -482,7 +462,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d padding: 1em; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div class="box box1"> @@ -509,14 +488,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d </pre> -<p>{{EmbedLiveSample('Display_Contents_Before', '400', '420')}}</p> -</div> +<p>{{EmbedLiveSample('utiliser_display_contents_avant', '400', '420')}}</p> +<h3>Utiliser display contents après</h3> + <p>Si on ajoute <code>display:</code> <code>contents</code> aux règles qui ciblent <code>box1</code>, la boîte de cet élément disparaîtra et ses sous-éléments deviendront alors des éléments de la grille qui se placeront selon les règles de placement automatiques pour la grille.</p> -<div id="Display_Contents_After"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -538,7 +516,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d padding: 1em; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div class="box box1"> @@ -565,8 +542,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d } </pre> -<p>{{EmbedLiveSample('Display_Contents_After', '400', '330')}}</p> -</div> +<p>{{EmbedLiveSample('utiliser_display_contents_après', '400', '330')}}</p> <p>Cela permet que des éléments imbriqués agissent comme s'ils faisaient partie de la grille. C'est également une méthode de contournement pour certains problèmes qui seront résolus par les « sous-grilles » (<em>subgrids</em>) lorsqu'elles seront implémentées. Vous pouvez également utiliser <code>display:</code> <code>contents</code> de façon similaire avec les boîtes flexibles afin que les éléments imbriqués deviennent des éléments flexibles.</p> diff --git a/files/fr/web/css/css_grid_layout/subgrid/index.html b/files/fr/web/css/css_grid_layout/subgrid/index.html index 10eee83ae2..bfd9bb1b1b 100644 --- a/files/fr/web/css/css_grid_layout/subgrid/index.html +++ b/files/fr/web/css/css_grid_layout/subgrid/index.html @@ -12,8 +12,8 @@ translation_of: Web/CSS/CSS_Grid_Layout/Subgrid <p>La valeur <code><strong>subgrid</strong></code> a été ajoutée par le module de spécification <em>CSS Grid Layout</em> de niveau 2 pour les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}}. Dans ce guide, nous verrons comment utiliser cette valeur ainsi que les cas d'utilisation ou patrons de conception qui peuvent en bénéficier.</p> -<div class="blockIndicator warning"> -<p><strong>Attention !</strong> Cette fonctionnalité est uniquement disponible dans Firefox Nightly à des fins de tests. Vous pouvez télécharger <a href="https://www.mozilla.org/firefox/channel/desktop/#nightly">Firefox Nightly</a> afin de tester les exemples ci-après.</p> +<div class="warning"> +<p><strong>Attention :</strong> Cette fonctionnalité est uniquement disponible dans Firefox Nightly à des fins de tests. Vous pouvez télécharger <a href="https://www.mozilla.org/firefox/channel/desktop/#nightly">Firefox Nightly</a> afin de tester les exemples ci-après.</p> </div> <h2 id="Une_introduction_à_subgrid">Une introduction à <code>subgrid</code></h2> @@ -72,7 +72,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Subgrid <p>Si on inspecte le résultat avec l'inspecteur de grille de Firefox, on pourra voir que l'espace auparavant occupé par la gouttière est partagé entre les cellules et permet d'agrandir la zone pour le contenu.</p> -<p><img alt="The smaller item displays in the gap as row-gap is set to 0 on the subgrid." src="https://mdn.mozillademos.org/files/16628/gap.png" style="height: 928px; width: 1312px;"></p> +<p><img alt="The smaller item displays in the gap as row-gap is set to 0 on the subgrid." src="gap.png"></p> <h2 id="Les_lignes_nommées">Les lignes nommées</h2> @@ -106,7 +106,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Subgrid <tr> <td>{{SpecName("CSS Grid 2")}}</td> <td>{{Spec2("CSS Grid 2")}}</td> - <td>Définition initiale des <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Sous-grille">sous-grilles (<em>subgrids</em>)</a>.</td> + <td>Définition initiale des <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#sous-grille">sous-grilles (<em>subgrids</em>)</a>.</td> </tr> </tbody> </table> @@ -114,5 +114,5 @@ translation_of: Web/CSS/CSS_Grid_Layout/Subgrid <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Sous-grille">Les concepts de bases des grilles CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#sous-grille">Les concepts de bases des grilles CSS</a></li> </ul> diff --git a/files/fr/web/css/css_images/index.html b/files/fr/web/css/css_images/index.html index 1bc5acf7c8..71e61e5b8d 100644 --- a/files/fr/web/css/css_images/index.html +++ b/files/fr/web/css/css_images/index.html @@ -16,7 +16,6 @@ translation_of: Web/CSS/CSS_Images <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{CSSxRef("image-orientation")}}</li> <li>{{CSSxRef("image-rendering")}}</li> @@ -24,11 +23,9 @@ translation_of: Web/CSS/CSS_Images <li>{{CSSxRef("object-fit")}}</li> <li>{{CSSxRef("object-position")}}</li> </ul> -</div> <h3 id="Fonctions">Fonctions</h3> -<div class="index"> <ul> <li>{{CSSxRef("linear-gradient", "linear-gradient()")}}</li> <li>{{CSSxRef("radial-gradient", "radial-gradient()")}}</li> @@ -41,16 +38,13 @@ translation_of: Web/CSS/CSS_Images <li>{{CSSxRef("_image", "image()")}}</li> <li>{{CSSxRef("cross-fade", "cross-fade()")}}</li> </ul> -</div> <h3 id="Types_de_données">Types de données</h3> -<div class="index"> <ul> <li>{{cssxref("<image>")}}</li> <li>{{cssxref("<gradient>")}}</li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/css_images/using_css_gradients/index.html b/files/fr/web/css/css_images/using_css_gradients/index.html index 5b836a6e21..6826ef0070 100644 --- a/files/fr/web/css/css_images/using_css_gradients/index.html +++ b/files/fr/web/css/css_images/using_css_gradients/index.html @@ -115,7 +115,7 @@ div { <p>L'angle est spécifié entre une ligne verticale et la ligne de dégradé, dans le sens inverse des aiguilles d'une montre. Autrement dit, <code>0deg</code> crée un dégradé vertical de bas en haut, tandis que <code>90deg</code> génère un dégradé horizontal de la gauche vers la droite :</p> -<p><img alt="linear_redangles.png" class="default internal" src="/files/3811/linear_red_angles.png"></p> +<p><img src="linear_red_angles.png"></p> <pre class="brush: css">background: linear-gradient(<angle>, red, white);</pre> @@ -233,15 +233,13 @@ div { <p>Pour créer une ligne franche entre deux couleurs et avoir deux bandes plutôt qu'un dégradé progressif, on peut définir deux points d'arrêt de couleur au même endroit. Dans l'exemple suivant, on a deux couleurs pour un même emplacement de point d'arrêt situé à <code>50%</code>:</p> -<div class="hidden"> -<pre class="brush: html"><div class="striped"></div> +<pre class="brush: html hidden"><div class="striped"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 120px; height: 120px; }</pre> -</div> <pre class="brush: css">.striped { background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%); @@ -253,17 +251,15 @@ div { <p>Pour inclure une bande d'une couleur donnée, sans transition au sein du dégradé, on utilisera deux points d'arrêt successif avec la même couleur. Ainsi, la couleur sera atteinte au premier point d'arrêt puis sera conservée jusqu'au suivant.</p> -<div class="hidden"> -<pre class="brush: html"><div class="multiposition-stops"></div> +<pre class="brush: html hidden"><div class="multiposition-stops"></div> <div class="multiposition-stop2"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 120px; height: 120px; float: left; margin-right: 10px; box-sizing: border-box; }</pre> -</div> <pre class="brush: css">.multiposition-stops { background: linear-gradient(to left, @@ -289,17 +285,15 @@ div { <p>Par défaut, un dégradé progresse linéairement entre les deux couleurs et la couleur médiane est atteinte à la moitié du parcours. Toutefois, si on veut atteindre cette couleur médiane plus tôt ou plus tard, on peut fournir une indication permettant de définir l'emplacement du milieu de la transition. Dans l'exemple qui suit, la couleur est à la moitié de la transition entre le vert et le cyan à 20% du dégradé (et non à 50%). Le deuxième exemple ne contient pas de telle indication et la transition s'effectue linéairement. Vous pouvez ainsi observer l'impact d'une telle indication.</p> -<div class="hidden"> -<pre class="brush: html"><div class="colorhint-gradient"></div> <div class="regular-progression"></div> +<pre class="brush: html hidden"><div class="colorhint-gradient"></div> <div class="regular-progression"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 120px; height: 120px; float: left; margin-right: 10px; box-sizing: border-box; }</pre> -</div> <pre class="brush: css">.colorhint-gradient { background: linear-gradient(to top, black, 20%, cyan); @@ -350,15 +344,13 @@ div { <p>De la même façon qu'avec les dégradés linéaires, il suffit de deux couleurs pour créer un dégradé radial.</p> -<div class="hidden"> -<pre class="brush: html"><div class="simple-radial"></div> +<pre class="brush: html hidden"><div class="simple-radial"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 120px; height: 120px; }</pre> -</div> <pre class="brush: css">.simple-radial { background: radial-gradient(red, blue); @@ -371,15 +363,13 @@ div { <p>À nouveau, comme pour les dégradés linéaires, il est possible de placer des arrêts de couleur en précisant un pourcentage ou une distance.</p> -<div class="hidden"> -<pre class="brush: html"><div class="radial-gradient"></div> +<pre class="brush: html hidden"><div class="radial-gradient"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 120px; height: 120px; }</pre> -</div> <pre class="brush: css">.radial-gradient { background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%); @@ -392,15 +382,13 @@ div { <p>La position du centre du dégradé peut être définie avec des mots-clés, des pourcetages ou des longueurs. Deux valeurs permettent de placer le centre sur les deux axes. Si une seule valeur est fournie, elle sera utilisée pour les deux axes.</p> -<div class="hidden"> -<pre class="brush: html"><div class="radial-gradient"></div> +<pre class="brush: html hidden"><div class="radial-gradient"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 120px; height: 240px; }</pre> -</div> <pre class="brush: css">.radial-gradient { background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%); @@ -417,15 +405,13 @@ div { <p>Dans l'exemple qui suit, on utilise la valeur <code>closest-side</code> pour la taille. Cela signifie que la taille du dégradé sera définie par la distance entre le point central de départ et le côté le plus proche de la boîte englobante.</p> -<div class="hidden"> -<pre class="brush: html"><div class="radial-ellipse-side"></div> +<pre class="brush: html hidden"><div class="radial-ellipse-side"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 240px; height: 100px; }</pre> -</div> <pre class="brush: css">.radial-ellipse-side { background: radial-gradient(ellipse closest-side, @@ -439,15 +425,13 @@ div { <p>Cet exemple ressemble fortement au précédent mais on utilise ici <code>farthest-corner</code> qui crée un dégradé dont la distance est celle entre le point de départ central et le côté le plus éloigné de la boîte englobante.</p> -<div class="hidden"> -<pre class="brush: html"><div class="radial-ellipse-far"></div> +<pre class="brush: html hidden"><div class="radial-ellipse-far"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 240px; height: 100px; }</pre> -</div> <pre class="brush: css">.radial-ellipse-far { background: radial-gradient(ellipse farthest-corner, @@ -461,15 +445,13 @@ div { <p>Pour cet exemple, on utilise <code>closest-side</code> qui permet de créer un cercle dont le rayon est la distance entre le point de départ central et le côté le plus proche de la boîte englobante. Ici, le rayon du cercle est donc la moitié de la hauteur de la boîte car les bords haut et bas sont équidistants du point de départ et plus proches que les côtés gauche et droit.</p> -<div class="hidden"> -<pre class="brush: html"><div class="radial-circle-close"></div> +<pre class="brush: html hidden"><div class="radial-circle-close"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 240px; height: 120px; }</pre> -</div> <pre class="brush: css">.radial-circle-close { background: radial-gradient(circle closest-side, @@ -483,15 +465,13 @@ div { <p>À l'instar des dégradés linéaires, on peut empiler des dégradés radiaux. Le premier dégradé indiqué sera celui sur la couche la plus haute et le dernier sera celui sur la couche la plus basse.</p> -<div class="hidden"> -<pre class="brush: html"><div class="stacked-radial"></div> +<pre class="brush: html hidden"><div class="stacked-radial"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 200px; height: 200px; }</pre> -</div> <pre class="brush: css">.stacked-radial { background: @@ -523,15 +503,13 @@ div { <p>Comme pour les dégradés linéaires et radiaux, il suffit de deux couleurs pour créer un dégradé conique. Par défaut, le centre du dégradé sera situé au centre (point 50% 50%) et le début du dégradé commencera vers le haut :</p> -<div class="hidden"> -<pre class="brush: html"><div class="simple-conic"></div> +<pre class="brush: html hidden"><div class="simple-conic"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 120px; height: 120px; }</pre> -</div> <pre class="brush: css">.simple-conic { background: conic-gradient(red, blue); @@ -546,15 +524,13 @@ div { <p>À l'instar des dégradés radiaux, on peut placer le centre d'un dégradé conique à l'aide de mots-clés, de valeurs (longueurs ou pourcentages) avec le mot-clé <code>at</code>.</p> -<div class="hidden"> -<pre class="brush: html"><div class="conic-gradient"></div> +<pre class="brush: html hidden"><div class="conic-gradient"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 120px; height: 120px; }</pre> -</div> <pre class="brush: css">.conic-gradient { background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%); @@ -567,15 +543,13 @@ div { <div> <h3 id="Modifier_l’angle">Modifier l’angle</h3> -<div class="hidden"> -<pre class="brush: html"><div class="conic-gradient"></div> +<pre class="brush: html hidden"><div class="conic-gradient"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 120px; height: 120px; }</pre> -</div> <pre class="brush: css">.conic-gradient { background: conic-gradient(from 45deg, red, orange, yellow, green, blue, purple); @@ -595,15 +569,13 @@ div { <p>Dans cet exemple, on utilise la fonction {{cssxref("repeating-linear-gradient")}} afin de créer un dégradé linéaire qui se répète le long d'une ligne. Les couleurs forment un cycle lorsque le motif se répète.</p> -<div class="hidden"> -<pre class="brush: html"><div class="repeating-linear"></div> +<pre class="brush: html hidden"><div class="repeating-linear"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 120px; height: 120px; }</pre> -</div> <pre class="brush: css">.repeating-linear { background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px); @@ -614,15 +586,13 @@ div { <h3 id="Répéter_plusieurs_dégradés_linéaires">Répéter plusieurs dégradés linéaires</h3> -<div class="hidden"> -<pre class="brush: html"><div class="multi-repeating-linear"></div> +<pre class="brush: html hidden"><div class="multi-repeating-linear"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 600px; height: 400px; }</pre> -</div> <pre class="brush: css">.multi-repeating-linear { background: @@ -646,14 +616,12 @@ div { <h3 id="Créer_un_tartan">Créer un tartan</h3> -<div class="hidden"> -<pre class="brush: html"><div class="plaid-gradient"></div></pre> +<pre class="brush: html hidden"><div class="plaid-gradient"></div></pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 200px; height: 200px; }</pre> -</div> <pre class="brush: css">.plaid-gradient { background: @@ -682,15 +650,13 @@ div { <p>Ici, on utilise la fonction {{cssxref("repeating-radial-gradient")}} afin de créer un dégradé radial qui se répète. Les couleurs utilisées forment un cycle lorsque le motif unitaire recommence.</p> -<div class="hidden"> -<pre class="brush: html"><div class="repeating-radial"></div> +<pre class="brush: html hidden"><div class="repeating-radial"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 120px; height: 120px; }</pre> -</div> <pre class="brush: css">.repeating-radial { background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); @@ -701,15 +667,13 @@ div { <h3 id="Répéter_plusieurs_dégradés_radiaux">Répéter plusieurs dégradés radiaux</h3> -<div class="hidden"> -<pre class="brush: html"><div class="multi-target"></div> +<pre class="brush: html hidden"><div class="multi-target"></div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 250px; height: 150px; }</pre> -</div> <pre class="brush: css">.multi-target { background: @@ -743,6 +707,6 @@ div { <li>{{cssxref("background")}}, {{cssxref("background-image")}}</li> </ul> </li> - <li><a class="external" href="https://lea.verou.me/css3patterns/">Une bibliothèque de motifs de dégradés CSS, créée par Lea Verou</a></li> + <li><a href="https://lea.verou.me/css3patterns/">Une bibliothèque de motifs de dégradés CSS, créée par Lea Verou</a></li> <li><a href="https://cssgenerator.org/gradient-css-generator.html">Un générateur de dégradé CSS</a></li> </ul> diff --git a/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.html b/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.html index 632152b9d6..019656613c 100644 --- a/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.html +++ b/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.html @@ -18,21 +18,21 @@ original_slug: Web/CSS/CSS_Lists/Indentation_homogène_des_listes <p>Commençons par une simple liste minimale. L'élément de la liste ne possède aucune puce (le marqueur devant l'élément). Pour le moment, il ne fait pas partie d'une liste.</p> -<p><img alt="" src="/@api/deki/files/619/=Consistent-list-indentation-figure1.gif"></p> +<p><img alt="" src="consistent-list-indentation-figure1.gif"></p> <p>La bordure pointillée rouge représente la limite extérieure de la zone de contenu de l'élément de la liste. Pour le moment, cet élément ne possède ni remplissage (<em>padding</em>) ni bordure. Si on ajoute deux autres éléments à la liste, on obtient alors ce résultat :</p> -<p><img alt="" src="/@api/deki/files/620/=Consistent-list-indentation-figure2.gif" style="height: 100px; width: 200px;"></p> +<p><img alt="" src="consistent-list-indentation-figure2.gif"></p> <p>À présent, nous allons placer ces éléments dans un élément parent. Pour cet exemple, nous utiliserons une liste non-ordonnée avec {{HTMLElement("ul")}}. Selon <a href="/fr/docs/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte">le modèle de boîtes CSS</a>, les boîtes des éléments de la liste s'inscrivent dans la boîte de contenu de l'élément parent. Cette dernière n'a, pour l'instant, aucune marge ni aucun remplissage (<em>padding</em>). On obtient donc ce résultat :</p> -<p><img alt="" src="/@api/deki/files/621/=Consistent-list-indentation-figure3.gif"></p> +<p><img alt="" src="consistent-list-indentation-figure3.gif"></p> <p>Ici, la bordure pointillée bleue révèle les limites de la zone de contenu de l'élément <code>ul</code>. Puisqu'il n'a pas de remplissage (<em>padding</em>), cette limite épouse étroitement celles des trois éléments de la liste.</p> <p>On ajoute maintenant les puces aux éléments de la liste. Puisqu'il s'agit d'une liste non ordonnée, nous ajoutons les traditionnelles puces en forme de disques pleins, comme ceci :</p> -<p><img alt="" src="/@api/deki/files/622/=Consistent-list-indentation-figure4.gif"></p> +<p><img alt="" src="consistent-list-indentation-figure4.gif"></p> <p>Visuellement, ces marqueurs apparaissent en dehors de la zone de contenu de l'élément <code>ul</code>, mais ce n'est pas ce qui est le plus important ici. Ce qui compte, c'est que ces marqueurs prennent place en dehors de la « boîte principale » des éléments <code>li</code>. Ils apparaissent comme des sortes d'appendices aux items de liste, qui se tiennent en dehors de la zone de contenu de chaque item, tout en étant attaché à chaque <code>li</code>.</p> @@ -61,12 +61,12 @@ original_slug: Web/CSS/CSS_Lists/Indentation_homogène_des_listes <p>Observons de plus près ces deux dernières approches. Dans Internet Explorer et Opera, les listes sont indentées en fixant une marge gauche de 40 pixels pour l'élément <code>ul</code>. Si nous appliquons une couleur d'arrière-plan, à celui-ci en conservant les bordures des éléments de la liste et de cet élément <code>ul</code>, nous obtenons le résultat qui suit :</p> -<p><img alt="" src="/@api/deki/files/623/=Consistent-list-indentation-figure5.gif"></p> +<p><img alt="" src="consistent-list-indentation-figure5.gif"></p> <p>De son côté, Gecko applique un <em>padding</em> gauche de 40 pixels à cet élément <code>ul</code>. Avec les mêmes styles que dans le cas précédent, notre exemple s'affichera dans un navigateur basé sur Gecko de la façon suivante :</p> <p><br> - <img alt="" src="/@api/deki/files/624/=Consistent-list-indentation-figure6.gif" style="height: 102px; width: 242px;"></p> + <img alt="" src="consistent-list-indentation-figure6.gif"></p> <p>Comme nous pouvons le voir, les marqueurs restent attachés aux éléments <code>li</code>, où qu'ils soient. La différence réside uniquement dans la manière dont l'élément <code>ul</code> est mis en forme. Nous ne pouvons voir cette différence que si nous essayons de donner un arrière-plan ou des bordures à cet élément <code>ul</code></p> diff --git a/files/fr/web/css/css_lists_and_counters/index.html b/files/fr/web/css/css_lists_and_counters/index.html index 40b79a5e95..44ea497254 100644 --- a/files/fr/web/css/css_lists_and_counters/index.html +++ b/files/fr/web/css/css_lists_and_counters/index.html @@ -15,14 +15,12 @@ original_slug: Web/CSS/CSS_Lists <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("list-style-image")}}</li> <li>{{cssxref("list-style-type")}}</li> <li>{{cssxref("list-style-position")}}</li> <li>{{cssxref("list-style")}}</li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/css_logical_properties/basic_concepts/index.html b/files/fr/web/css/css_logical_properties/basic_concepts/index.html index 0df0049658..82079917e4 100644 --- a/files/fr/web/css/css_logical_properties/basic_concepts/index.html +++ b/files/fr/web/css/css_logical_properties/basic_concepts/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Logical_Properties/Concepts_de_base --- <div>{{CSSRef}}</div> -<p class="summary">La spécification relative aux propriétés et valeurs logiques introduit une correspondance relative au flux pour de nombreuses propriétés et valeurs CSS. Dans cet article, nous verrons une introduction de cette spécification et expliquerons les propriétés et valeurs relatives au flux.</p> +<p>La spécification relative aux propriétés et valeurs logiques introduit une correspondance relative au flux pour de nombreuses propriétés et valeurs CSS. Dans cet article, nous verrons une introduction de cette spécification et expliquerons les propriétés et valeurs relatives au flux.</p> <h2 id="Quel_intérêt_pour_les_propriétés_logiques">Quel intérêt pour les propriétés logiques ?</h2> @@ -18,21 +18,21 @@ original_slug: Web/CSS/CSS_Logical_Properties/Concepts_de_base <p>Prenons un exemple pour comprendre la nécessité de telles propriétés et valeurs logiques. On dispose d'une grille CSS et le conteneur de la grille possède une certaine largeur. On y utilise {{CSSxRef("align-self")}} et {{CSSxRef("justify-self")}} afin d'aligner les éléments à l'intérieur de la grille. Ces propriétés sont relatives au flux : <code>justify-self: start</code> aligne l'élément au début de l'axe en ligne et <code>align-self: start</code> aligne l'élément au début de l'axe de bloc.</p> -<p><img alt="A grid in a horizontal writing mode" src="https://mdn.mozillademos.org/files/16338/grid-horizontal-width-sm.png" style="display: block; margin: 0 auto; width: 350px;"></p> +<p><img alt="A grid in a horizontal writing mode" src="grid-horizontal-width-sm.png"></p> <p>Si on change le mode d'écriture de ce composant grâce à la propriété {{CSSxRef("writing-mode")}} et avec la valeur <code>vertical-rl</code>, l'alignement continue de fonctionner de la même façon : l'axe en ligne est désormais l'axe vertical et l'axe de bloc court horizontalement. La grille n'a cependant pas la même allure car la largeur est nécessairement définie pour l'axe horizontal : de façon physique et pas relativement au flux de texte.</p> -<p><img alt="A grid in vertical writing mode." src="https://mdn.mozillademos.org/files/16339/grid-vertical-width-sm.png" style="display: block; margin: 0 auto; width: 350px;"></p> +<p><img alt="A grid in vertical writing mode." src="grid-vertical-width-sm.png"></p> <p>Si on avait utilisé la propriété logique {{CSSxRef("inline-size")}} plutôt que <code>width</code>, le composant aurait gardé les mêmes proportions, quel que soit le mode d'écriture utilisé.</p> -<p><img alt="A grid layout in vertical writing mode" src="https://mdn.mozillademos.org/files/16337/grid-vertical-inline-size-small.png" style="display: block; height: 382px; margin: 0 auto; width: 200px;"></p> +<p><img alt="A grid layout in vertical writing mode" src="grid-vertical-inline-size-small.png"></p> <p>Vous pouvez essayer ces différentes valeurs dans l'exemple qui suit et notamment modifier la propriété <code>writing-mode</code> pour la passer de <code>vertical-rl</code> à <code>horizontal-tb</code> sur le sélecteur <code>.box</code> afin d'observer la façon dont les différentes propriétés modifient la disposition.</p> <p>{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}</p> -<p><span style="letter-spacing: -0.00278rem;">Lorsqu'on travaille sur un site où on utilise un mode d'écriture qui n'est pas horizontal et progressant du haut vers le bas ou qu'on travaille sur un concept créatif, pouvoir utiliser des concepts relatifs au flux plutôt que des valeurs géométriques absolues.</span></p> +<p>Lorsqu'on travaille sur un site où on utilise un mode d'écriture qui n'est pas horizontal et progressant du haut vers le bas ou qu'on travaille sur un concept créatif, pouvoir utiliser des concepts relatifs au flux plutôt que des valeurs géométriques absolues.</p> <h2 id="Axe_de_bloc_et_axe_en_ligne">Axe de bloc et axe en ligne</h2> @@ -44,20 +44,20 @@ original_slug: Web/CSS/CSS_Logical_Properties/Concepts_de_base <p>Le diagramme ci-après illustre l'organisation des axes en ligne et des axes de bloc pour un mode d'écriture horizontal :</p> -<p><img alt="diagram showing the inline axis running horizontally, block axis vertically." src="https://mdn.mozillademos.org/files/16340/mdn-horizontal.png" style="display: block; height: 382px; margin: 0 auto; width: 521px;"></p> +<p><img alt="diagram showing the inline axis running horizontally, block axis vertically." src="mdn-horizontal.png"></p> <p>Le diagramme suivant illustre l'axe en ligne et l'axe de bloc pour un mode d'écriture vertical :</p> -<p><img alt="Diagram showing the block axis running horizontally the inline axis vertically." src="https://mdn.mozillademos.org/files/16341/mdn-vertical.png" style="display: block; height: 382px; margin: 0 auto; width: 418px;"></p> +<p><img alt="Diagram showing the block axis running horizontally the inline axis vertically." src="mdn-vertical.png"></p> <h2 id="Prise_en_charge_des_navigateurs">Prise en charge des navigateurs</h2> -<p>Les propriétés et valeurs logiques peuvent être catégorisées selon différents groupes, notamment pour la compatibilité des navigateurs. Certaines des propriétés logiques sont essentiellement des correspondances de propriétés physiques équivalentes ({{CSSxRef("inline-size")}} sera la propriété logique pouvant correspondre à la propriété physique {{CSSxRef("width")}} et {{CSSxRef("margin-inline-start")}} la propriété physique correspondant à {{CSSxRef("margin-left")}}). La prise en charge de ces propriétés logiques correspondant à des propriétés physiques est plutôt correcte pour les navigateurs récents, vous pouvez consulter les pages <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties#Reference">de référence pour ces propriétés sur MDN</a>, seul Edge ne prend pas en charge ces propriétés à date (décembre 2018).</p> +<p>Les propriétés et valeurs logiques peuvent être catégorisées selon différents groupes, notamment pour la compatibilité des navigateurs. Certaines des propriétés logiques sont essentiellement des correspondances de propriétés physiques équivalentes ({{CSSxRef("inline-size")}} sera la propriété logique pouvant correspondre à la propriété physique {{CSSxRef("width")}} et {{CSSxRef("margin-inline-start")}} la propriété physique correspondant à {{CSSxRef("margin-left")}}). La prise en charge de ces propriétés logiques correspondant à des propriétés physiques est plutôt correcte pour les navigateurs récents, vous pouvez consulter les pages <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties#reference">de référence pour ces propriétés sur MDN</a>, seul Edge ne prend pas en charge ces propriétés à date (décembre 2018).</p> <p>On a également un groupe de propriétés qui ne possèdent pas de correspondances directes avec les propriétés physiques. Ces propriétés sont des propriétés raccourcies qui font référence aux deux extrêmités d'un axe. Ainsi {{CSSxRef("margin-block")}} sera une propriété raccourcie pour {{CSSxRef("margin-block-start")}} et {{CSSxRef("margin-block-end")}}. Ce deuxième groupe n'est actuellement pas pris en charge par les navigateurs.</p> -<div class="blockIndicator note"> -<p><strong>Note : </strong>Le groupe de travail CSS est actuellement en réflexion pour les propriétés raccourcies avec quatre valeurs pour les propriétés logiques. Autrement dit, comment définir les marges logiques de la façon dont on utilise la propriété {{CSSxRef("margin")}}. Il faudrait en effet une sorte de modificateur si on continue d'utiliser le nom <code>margin</code> pour les propriétés relatives au flux. Pour en savoir plus sur les suggestions et commentaires, vous pouvez consulter l'<em>issue</em> GitHub <a href="https://github.com/w3c/csswg-drafts/issues/1282">n°1282</a>.</p> +<div class="note"> +<p><strong>Note :</strong> Le groupe de travail CSS est actuellement en réflexion pour les propriétés raccourcies avec quatre valeurs pour les propriétés logiques. Autrement dit, comment définir les marges logiques de la façon dont on utilise la propriété {{CSSxRef("margin")}}. Il faudrait en effet une sorte de modificateur si on continue d'utiliser le nom <code>margin</code> pour les propriétés relatives au flux. Pour en savoir plus sur les suggestions et commentaires, vous pouvez consulter l'<em>issue</em> GitHub <a href="https://github.com/w3c/csswg-drafts/issues/1282">n°1282</a>.</p> </div> <h3 id="Tester_la_compatibilité_des_navigateurs">Tester la compatibilité des navigateurs</h3> @@ -69,8 +69,8 @@ original_slug: Web/CSS/CSS_Logical_Properties/Concepts_de_base <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">L'alignement des boîtes pour une disposition en grille</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox">L'alignement des boîtes pour une disposition flexible</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">L'alignement des boîtes pour une disposition en grille</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">L'alignement des boîtes pour une disposition flexible</a></li> <li><a href="https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/">Comprendre les propriétés et les valeurs logiques</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture">Les modes d'écriture</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">Les modes d'écriture</a></li> </ul> diff --git a/files/fr/web/css/css_logical_properties/floating_and_positioning/index.html b/files/fr/web/css/css_logical_properties/floating_and_positioning/index.html index dbb69adc26..e7105dad8a 100644 --- a/files/fr/web/css/css_logical_properties/floating_and_positioning/index.html +++ b/files/fr/web/css/css_logical_properties/floating_and_positioning/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Logical_Properties/Propriétés_logiques_flottements_ --- <div>{{CSSRef}}</div> -<p class="summary"><a href="https://drafts.csswg.org/css-logical/">La spécification sur les propriétés et valeurs logiques</a> définit des valeurs logiques qui correspondent aux valeurs physiques utilisées pour {{cssxref("float")}} et {{cssxref("clear")}}. Elle définit aussi des propriétés logiques pour le positionnement lorsqu'on utilise une <a href="/fr/docs/Web/CSS/CSS_Positioning">disposition positionnée</a>. Dans ce guide, nous verrons comment utiliser ces valeurs et ces propriétés logiques.</p> +<p><a href="https://drafts.csswg.org/css-logical/">La spécification sur les propriétés et valeurs logiques</a> définit des valeurs logiques qui correspondent aux valeurs physiques utilisées pour {{cssxref("float")}} et {{cssxref("clear")}}. Elle définit aussi des propriétés logiques pour le positionnement lorsqu'on utilise une <a href="/fr/docs/Web/CSS/CSS_Positioning">disposition positionnée</a>. Dans ce guide, nous verrons comment utiliser ces valeurs et ces propriétés logiques.</p> <h2 id="Correspondance_entre_les_propriétés_et_les_valeurs">Correspondance entre les propriétés et les valeurs</h2> @@ -129,7 +129,7 @@ original_slug: Web/CSS/CSS_Logical_Properties/Propriétés_logiques_flottements_ <li>{{cssxref("inset-block")}} — elle permet de définir les décalage sur l'axe de bloc</li> </ul> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Les navigateurs n'ont, pour l'instant, pas implémenté ces nouvelles propriétés (décembre 2018). Pour plus d'informations sur la compatibilité des navigateurs, vous pouvez vous référer aux tableaux de compatibilité présents à la fin des pages de référence pour ces propriétés.</p> </div> diff --git a/files/fr/web/css/css_logical_properties/index.html b/files/fr/web/css/css_logical_properties/index.html index bf77e064c1..7d671c63ed 100644 --- a/files/fr/web/css/css_logical_properties/index.html +++ b/files/fr/web/css/css_logical_properties/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/CSS_Logical_Properties --- <div>{{CSSRef}}</div> -<p class="summary"><em><strong>CSS Logical Properties</strong></em> (les propriétés logiques CSS) est un module CSS qui définit une correspondance logique vers les propriétés physiques de contrôle de la mise en page selon le sens de lecture et l'orientation du texte. On aura deux directions logiques : <em>block</em> et <em>inline</em>, perpendiculaires, qui dépendent du sens de l'orientation du document.</p> +<p><em><strong>CSS Logical Properties</strong></em> (les propriétés logiques CSS) est un module CSS qui définit une correspondance logique vers les propriétés physiques de contrôle de la mise en page selon le sens de lecture et l'orientation du texte. On aura deux directions logiques : <em>block</em> et <em>inline</em>, perpendiculaires, qui dépendent du sens de l'orientation du document.</p> <p>Ce module définit également les propriétés logiques et les valeurs pour les propriétés précédemment définies avec <abbr title="Cascading Stylesheets">CSS</abbr> 2.1. Les propriétés logiques sont des propriétés dont l'orientation est relative au mode d'écriture du document et possèdent des propriétés physiques équivalentes.</p> @@ -20,9 +20,9 @@ translation_of: Web/CSS/CSS_Logical_Properties <p>Les propriétés et valeurs logiques utilisent les termes abstraits <em>bloc</em> (<em>block</em>) ou ligne (<em>inline</em>) afin de décrire leur direction. La signification physique de ces termes dépend du <a href="/fr/docs/Web/CSS/CSS_Writing_Modes">mode d'écriture</a>.</p> <dl> - <dt><a id="block-dimension" name="block-dimension">Dimension de bloc</a></dt> + <dt>Dimension de bloc</dt> <dd>C'est la dimension perpendiculaire au flux du texte sur une ligne. Autrement dit, il s'agit de la dimension verticale lorsque le texte est écrit dans un mode horizontal et de la dimension horizontale lorsque le texte est écrit verticalement (pour le français, cette dimension correspond donc à l'axe vertical).</dd> - <dt><a name="inline-dimension">Dimension en ligne</a></dt> + <dt>Dimension en ligne</dt> <dd>C'est la dimension parallèle au flux du texte sur une ligne. Autrement dit, il s'agit de la dimension horizontale lorsque le texte est écrit dans un mode horizontal et de la dimension verticale lorsque le texte est écrit verticalement (pour le français, cette dimension correspond donc à l'axe horizontal).</dd> </dl> @@ -30,7 +30,6 @@ translation_of: Web/CSS/CSS_Logical_Properties <h3 id="Propriétés_relatives_au_dimensionnement">Propriétés relatives au dimensionnement</h3> -<div class="index"> <ul> <li>{{CSSxRef("block-size")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("inline-size")}} {{Experimental_Inline}}</li> @@ -39,11 +38,9 @@ translation_of: Web/CSS/CSS_Logical_Properties <li>{{CSSxRef("min-block-size")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("min-inline-size")}} {{Experimental_Inline}}</li> </ul> -</div> <h3 id="Propriétés_relatives_aux_marges_bordures_et_remplissages">Propriétés relatives aux marges, bordures et remplissages</h3> -<div class="index"> <ul> <li>{{CSSxRef("border-block")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("border-block-color")}} {{Experimental_Inline}}</li> @@ -57,7 +54,7 @@ translation_of: Web/CSS/CSS_Logical_Properties <li>{{CSSxRef("border-block-start-width")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("border-block-style")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("border-block-width")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef("border-color")}} <span style="white-space: nowrap;">(mot-clé <code>logical</code> {{Experimental_Inline}})</span></li> + <li>{{CSSxRef("border-color")}} (mot-clé <code>logical</code> {{Experimental_Inline}})</li> <li>{{CSSxRef("border-inline")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("border-inline-color")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("border-inline-end")}} {{Experimental_Inline}}</li> @@ -74,16 +71,16 @@ translation_of: Web/CSS/CSS_Logical_Properties <li>{{CSSxRef("border-start-end-radius")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("border-end-start-radius")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("border-end-end-radius")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef("border-style")}} <span style="white-space: nowrap;">(mot-clé <code>logical</code> {{Experimental_Inline}})</span></li> - <li>{{CSSxRef("border-width")}} <span style="white-space: nowrap;">(mot-clé <code>logical</code> {{Experimental_Inline}})</span></li> - <li>{{CSSxRef("margin")}} <span style="white-space: nowrap;">(mot-clé <code>logical</code> {{Experimental_Inline}})</span></li> + <li>{{CSSxRef("border-style")}} (mot-clé <code>logical</code> {{Experimental_Inline}})</li> + <li>{{CSSxRef("border-width")}} (mot-clé <code>logical</code> {{Experimental_Inline}})</li> + <li>{{CSSxRef("margin")}} (mot-clé <code>logical</code> {{Experimental_Inline}})</li> <li>{{CSSxRef("margin-block")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("margin-block-end")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("margin-block-start")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("margin-inline")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("margin-inline-end")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("margin-inline-start")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef("padding")}} <span style="white-space: nowrap;">(mot-clé <code>logical</code> {{Experimental_Inline}})</span></li> + <li>{{CSSxRef("padding")}} (mot-clé <code>logical</code> {{Experimental_Inline}})</li> <li>{{CSSxRef("padding-block")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("padding-block-end")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("padding-block-start")}} {{Experimental_Inline}}</li> @@ -91,14 +88,12 @@ translation_of: Web/CSS/CSS_Logical_Properties <li>{{CSSxRef("padding-inline-end")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("padding-inline-start")}} {{Experimental_Inline}}</li> </ul> -</div> <h3 id="Propriétés_relatives_aux_flottements_et_au_positionnement">Propriétés relatives aux flottements et au positionnement</h3> -<div class="index"> <ul> - <li>{{CSSxRef("clear")}} (mots-clés <code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} et <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}})</span></li> - <li>{{CSSxRef("float")}} (mots-clés <code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} et <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}})</span></li> + <li>{{CSSxRef("clear")}} (mots-clés <code>inline-end</code> {{Experimental_Inline}} et <code>inline-start</code> {{Experimental_Inline}})</li> + <li>{{CSSxRef("float")}} (mots-clés <code>inline-end</code> {{Experimental_Inline}} et <code>inline-start</code> {{Experimental_Inline}})</li> <li>{{CSSxRef("inset")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("inset-block")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("inset-block-end")}} {{Experimental_Inline}}</li> @@ -107,38 +102,33 @@ translation_of: Web/CSS/CSS_Logical_Properties <li>{{CSSxRef("inset-inline-end")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("inset-inline-start")}} {{Experimental_Inline}}</li> </ul> -</div> <h3 id="Autres_propriétés">Autres propriétés</h3> -<div class="index"> <ul> - <li>{{CSSxRef("caption-side")}} (mots-clés <code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} et <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}})</span></li> + <li>{{CSSxRef("caption-side")}} (mots-clés <code>inline-end</code> {{Experimental_Inline}} et <code>inline-start</code> {{Experimental_Inline}})</li> <li>{{CSSxRef("overflow-block")}} {{Experimental_Inline}}</li> <li>{{CSSxRef("overflow-inline")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef("resize")}} {{Experimental_Inline}} (mots-clés <code>block</code> {{Experimental_Inline}} et <span style="white-space: nowrap;"><code>inline</code> {{Experimental_Inline}})</span></li> - <li>{{CSSxRef("text-align")}} (mots-clés <code>end</code> {{Experimental_Inline}} et <span style="white-space: nowrap;"><code>start</code> {{Experimental_Inline}})</span></li> + <li>{{CSSxRef("resize")}} {{Experimental_Inline}} (mots-clés <code>block</code> {{Experimental_Inline}} et <code>inline</code> {{Experimental_Inline}})</li> + <li>{{CSSxRef("text-align")}} (mots-clés <code>end</code> {{Experimental_Inline}} et <code>start</code> {{Experimental_Inline}})</li> </ul> -</div> <h3 id="Propriétés_dépréciées">Propriétés dépréciées</h3> -<div class="index"> <ul> - <li>{{CSSxRef("offset-block-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(désormais {{CSSxRef("inset-block-end")}} {{Experimental_Inline}})</span></li> - <li>{{CSSxRef("offset-block-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(désormais {{CSSxRef("inset-block-start")}} {{Experimental_Inline}})</span></li> - <li>{{CSSxRef("offset-inline-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(désormais {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}})</span></li> - <li>{{CSSxRef("offset-inline-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(désormais {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}})</span></li> + <li>{{CSSxRef("inset-block-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-block-end")}} {{Experimental_Inline}})</li> + <li>{{CSSxRef("inset-block-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-block-start")}} {{Experimental_Inline}})</li> + <li>{{CSSxRef("inset-inline-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}})</li> + <li>{{CSSxRef("inset-inline-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}})</li> </ul> -</div> <h2 id="Guides">Guides</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Concepts_de_base">Concepts de base pour les propriétés logiques et les valeurs logiques</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Dimensionnement">Les propriétés logiques utiles au dimensionnement</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Propriétés_logiques_marges_bordures_remplissages">Les propriétés logiques utiles aux marges, bordures et remplissage (<em>padding</em>)</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Propriétés_logiques_flottements_positionnement">Les propriétés logiques utiles aux flottements et au positionnement</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts">Concepts de base pour les propriétés logiques et les valeurs logiques</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Sizing">Les propriétés logiques utiles au dimensionnement</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Margins_borders_padding">Les propriétés logiques utiles aux marges, bordures et remplissage (<em>padding</em>)</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Floating_and_positioning">Les propriétés logiques utiles aux flottements et au positionnement</a></li> </ul> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_logical_properties/margins_borders_padding/index.html b/files/fr/web/css/css_logical_properties/margins_borders_padding/index.html index 82b2995802..cf45a45e67 100644 --- a/files/fr/web/css/css_logical_properties/margins_borders_padding/index.html +++ b/files/fr/web/css/css_logical_properties/margins_borders_padding/index.html @@ -11,7 +11,7 @@ original_slug: >- --- <p>{{CSSRef}}</p> -<p class="summary">La spécification <a href="https://drafts.csswg.org/css-logical/">sur les propriétés et valeurs logiques</a> définit des correspondances pour les propriétés servant à définir les marges, les bordures et les remplissages (<em>padding</em>) et les propriétés raccourcies associées. Dans ce guide, nous verrons comment utiliser ces propriétés logiques.</p> +<p>La spécification <a href="https://drafts.csswg.org/css-logical/">sur les propriétés et valeurs logiques</a> définit des correspondances pour les propriétés servant à définir les marges, les bordures et les remplissages (<em>padding</em>) et les propriétés raccourcies associées. Dans ce guide, nous verrons comment utiliser ces propriétés logiques.</p> <p>Si vous avez consulté la page principale sur <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">les propriétés et valeurs logiques</a>, vous avez pu voir une grande quantité de propriétés. Cela est principalement du au fait que pour chaque marge, bordure et remplissage, il y a quatre propriétés détaillées et une propriété raccourcie.</p> @@ -227,7 +227,7 @@ original_slug: >- margin-block: 5px 10px; }</pre> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Ces propriétés raccourcies, <code>margin-inline</code> et <code>margin-block</code>, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.</p> </div> @@ -253,7 +253,7 @@ original_slug: >- padding-block: 5px 10px; }</pre> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Ces propriétés raccourcies, <code>padding-inline</code> et <code>padding-block</code>, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.</p> </div> @@ -276,7 +276,7 @@ original_slug: >- border-inline-color: rebeccapurple; }</pre> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Ces propriétés raccourcies, <code>border-inline</code> et <code>border-block</code>, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.</p> </div> diff --git a/files/fr/web/css/css_logical_properties/sizing/index.html b/files/fr/web/css/css_logical_properties/sizing/index.html index 4b5c4dd892..2ede7d1bca 100644 --- a/files/fr/web/css/css_logical_properties/sizing/index.html +++ b/files/fr/web/css/css_logical_properties/sizing/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Logical_Properties/Dimensionnement --- <div>{{CSSRef}}</div> -<p class="summary">Dans ce guide, nous verrons les correspondances entre les propriétés physiques et les propriétés logiques qui peuvent être utilisées afin de dimensionner des éléments au sein d'un document.</p> +<p>Dans ce guide, nous verrons les correspondances entre les propriétés physiques et les propriétés logiques qui peuvent être utilisées afin de dimensionner des éléments au sein d'un document.</p> <p>Lorsqu'on définit la taille d'un objet, <a href="https://drafts.csswg.org/css-logical/">la spécification sur les propriétés et les valeurs logiques</a> permet de définir le dimensionnement en fonction du flux du texte (le mode d'écriture et son orientation) plutôt que relativement aux dimensions physiques du support (haut / bas / gauche / droite). Bien que ce premier fonctionnement, utilisant des propriétés et des valeurs <em>logiques</em>, puisse devenir la méthode par défaut à l'avenir, on peut tout à fait avoir besoin d'utiliser des propriétés et des valeurs <em>physiques</em> en combinaison avec ces propriétés et ces valeurs logiques.</p> @@ -85,6 +85,6 @@ original_slug: Web/CSS/CSS_Logical_Properties/Dimensionnement <p>{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}</p> -<div class="blockIndicator warning"> -<p><strong>Attention !</strong> À l'heure actuelle (décembre 2018), seul Firefox prend en charge les valeurs logiques pour <code>resize</code>.</p> +<div class="warning"> +<p><strong>Attention :</strong> À l'heure actuelle (décembre 2018), seul Firefox prend en charge les valeurs logiques pour <code>resize</code>.</p> </div> diff --git a/files/fr/web/css/css_masking/index.html b/files/fr/web/css/css_masking/index.html index 4d7acfab53..7eee5da307 100644 --- a/files/fr/web/css/css_masking/index.html +++ b/files/fr/web/css/css_masking/index.html @@ -17,7 +17,6 @@ original_slug: Web/CSS/CSS_Masks <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("clip")}} {{deprecated_inline}}</li> <li>{{cssxref("clip-path")}}</li> @@ -40,7 +39,6 @@ original_slug: Web/CSS/CSS_Masks <li>{{cssxref("mask-size")}}</li> <li>{{cssxref("mask-type")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_miscellaneous/index.html b/files/fr/web/css/css_miscellaneous/index.html index 45e4685f89..e7d51f4938 100644 --- a/files/fr/web/css/css_miscellaneous/index.html +++ b/files/fr/web/css/css_miscellaneous/index.html @@ -15,12 +15,10 @@ translation_of: Web/CSS/CSS_Miscellaneous <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("all")}}</li> <li>{{cssxref("text-rendering")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_motion_path/index.html b/files/fr/web/css/css_motion_path/index.html index cf8b5c7c5a..a20d3067bb 100644 --- a/files/fr/web/css/css_motion_path/index.html +++ b/files/fr/web/css/css_motion_path/index.html @@ -18,14 +18,12 @@ original_slug: Web/CSS/Motion_Path <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("offset")}}</li> <li>{{cssxref("offset-distance")}}</li> <li>{{cssxref("offset-path")}}</li> <li>{{cssxref("offset-rotate")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_namespaces/index.html b/files/fr/web/css/css_namespaces/index.html index 0e2b6ce694..ca72f88a6c 100644 --- a/files/fr/web/css/css_namespaces/index.html +++ b/files/fr/web/css/css_namespaces/index.html @@ -16,11 +16,9 @@ translation_of: Web/CSS/CSS_Namespaces <h3 id="Règles">Règles @</h3> -<div class="index"> <ul> <li>{{cssxref("@namespace")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_overflow/index.html b/files/fr/web/css/css_overflow/index.html index 9f5697820a..cbac890ad5 100644 --- a/files/fr/web/css/css_overflow/index.html +++ b/files/fr/web/css/css_overflow/index.html @@ -22,13 +22,10 @@ translation_of: Web/CSS/CSS_Overflow <div>{{EmbedInteractiveExample("pages/css/overflow.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Référence">Référence</h2> <h3 id="Propriétés_CSS">Propriétés CSS</h3> -<div class="index"> <ul> <li>{{CSSxRef("overflow")}}</li> <li>{{CSSxRef("overflow-block")}}</li> @@ -41,15 +38,12 @@ translation_of: Web/CSS/CSS_Overflow <li>{{CSSxRef("max-lines")}} {{experimental_inline}}</li> <li>{{CSSxRef("continue")}} {{experimental_inline}}</li> </ul> -</div> <h3 id="Propriétés_spécifiques">Propriétés spécifiques</h3> -<div class="index"> <ul> <li>{{CSSxRef("-webkit-line-clamp")}} {{non-standard_inline}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_pages/index.html b/files/fr/web/css/css_pages/index.html index 1d191006f2..a7f074727b 100644 --- a/files/fr/web/css/css_pages/index.html +++ b/files/fr/web/css/css_pages/index.html @@ -16,32 +16,26 @@ translation_of: Web/CSS/CSS_Pages <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("page-break-after")}}</li> <li>{{cssxref("page-break-before")}}</li> <li>{{cssxref("page-break-inside")}}</li> </ul> -</div> <h3 id="Règles">Règles @</h3> -<div class="index"> <ul> <li>{{cssxref('@page')}}</li> </ul> -</div> <h3 id="Pseudo-classes">Pseudo-classes</h3> -<div class="index"> <ul> <li>{{cssxref(':blank')}}</li> <li>{{cssxref(':first')}}</li> <li>{{cssxref(':left')}}</li> <li>{{cssxref(':right')}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_positioning/index.html b/files/fr/web/css/css_positioning/index.html index 518a4abaeb..7271af1172 100644 --- a/files/fr/web/css/css_positioning/index.html +++ b/files/fr/web/css/css_positioning/index.html @@ -16,7 +16,6 @@ translation_of: Web/CSS/CSS_Positioning <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("bottom")}}</li> <li>{{cssxref("clear")}}</li> @@ -27,7 +26,6 @@ translation_of: Web/CSS/CSS_Positioning <li>{{cssxref("top")}}</li> <li>{{cssxref("z-index")}}</li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html b/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html index e0076181f3..bfbc64fb1c 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html @@ -13,7 +13,7 @@ original_slug: Web/CSS/Comprendre_z-index/Ajout_de_z-index <h2 id="Ajouter_z-index">Ajouter <code>z-index</code></h2> -<p>Dans le premier exemple, <a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index">« empilement sans <code>z-index</code> »</a>, illustre comment l'empilement fonctionne par défaut. Pour définir un ordre d'empilement différent, il faut utiliser la propriété CSS {{cssxref("z-index")}}.</p> +<p>Dans le premier exemple, <a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">« empilement sans <code>z-index</code> »</a>, illustre comment l'empilement fonctionne par défaut. Pour définir un ordre d'empilement différent, il faut utiliser la propriété CSS {{cssxref("z-index")}}.</p> <p>Cette propriété, dont l'attribut est une valeur entière (positive ou négative), représente la position de l'élément le long de l'axe Z. Pour se représenter cette notion, on peut imaginer que la page possède plusieurs couches, les unes au dessus des autres. Chaque couche est numérotée. Un couche avec une grande valeur de <code>z-index</code> est affichée par dessus toutes celles dont la valeur est inférieure à la sienne.</p> @@ -36,12 +36,12 @@ original_slug: Web/CSS/Comprendre_z-index/Ajout_de_z-index </ul> <div class="note"> -<p><strong>Notes :</strong></p> +<p><strong>Note :</strong> <ul> <li>Lorsque la propriété <code>z-index</code> n'est pas définie, les éléments sont rendus sur la couche 0 par défaut.</li> - <li>Si plusieurs éléments possède la même valeur de <code>z-index</code> (c'est-à-dire qu'ils sont placés sur la même couche), alors les règles d'empilement expliquées dans <a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index">empilement sans <code>z-index</code></a> s'appliquent.</li> -</ul> + <li>Si plusieurs éléments possède la même valeur de <code>z-index</code> (c'est-à-dire qu'ils sont placés sur la même couche), alors les règles d'empilement expliquées dans <a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">empilement sans <code>z-index</code></a> s'appliquent.</li> +</ul></p> </div> <p>Dans l'exemple qui suit, l'empilement des couches a été réordonné en utilisant <code>z-index</code>. Le <code>z-index</code> du bloc DIV#5 n'a pas d'effet, l'élément n'étant pas positionné.</p> diff --git a/files/fr/web/css/css_positioning/understanding_z_index/index.html b/files/fr/web/css/css_positioning/understanding_z_index/index.html index 1f41be9467..92a9a86a4e 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/index.html @@ -16,7 +16,7 @@ original_slug: Web/CSS/Comprendre_z-index <p><em>Dans CSS 2.1, chaque boîte a une position dans les 3 dimensions. En plus de leurs positions horizontale et verticale, les boîtes sont disposées sur un axe Z et sont disposées les unes sur les autres. Les positions sur l'axe Z sont particulièrement importantes lorsque deux boîtes se chevauchent visuellement. </em></p> </blockquote> -<p>Source : <a class="external" href="https://www.w3.org/TR/CSS2/visuren.html#z-index">Section 9.9.1. de CSS 2.1 - La présentation en couches</a></p> +<p>Source : <a href="https://www.w3.org/TR/CSS2/visuren.html#z-index">Section 9.9.1. de CSS 2.1 - La présentation en couches</a></p> <p>Cela signifie que les règles de style CSS permettent de positionner des boîtes sur différentes couches, la couche « normale » étant la couche située en 0 sur l'axe Z. La position de chaque couche sur l'axe Z est exprimée par un nombre entier qui représente l'ordre d'empilement pour le rendu visuel. Plus cet entier sera grand, plus la couche sera haute dans la pile. Cette valeur se contrôle via la propriété CSS {{cssxref("z-index")}}.</p> diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html index ef04a825c1..2b0dc727af 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html @@ -37,7 +37,9 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_et_float <li>Les éléments enfants positionnés, dans leur ordre d'apparence (en HTML).</li> </ol> -<div class="note"><strong>Note :</strong> Dans l'exemple qui suit, tous les blocs sont transparents, excepté celui qui n'est pas positionné, montrant ainsi l'ordre d'empilement. Si l'on réduit l'opacité du bloc non positionné (DIV #4), il se produit quelque chose d'étrange : l'arrière-plan et la bordure de cet élément se placent par dessus les blocs flottants et les blocs positionnés. Il s'agit d'une interprétation particulière des spécifications CSS : l'application de l'opacité crée un nouveau contexte d'empilement (voir l'article : <a href="https://philipwalton.com/articles/what-no-one-told-you-about-z-index/">What No One Told You About Z-Index</a> de Philip Walton ou son excellente traduction de Vincent De Oliveira, <a href="https://iamvdo.me/blog/comprendre-z-index-et-les-contextes-dempilement">Ce que personne ne vous a dit sur z-index</a> et, bien-sûr, la <a href="https://www.w3.org/TR/CSS2/zindex.html">spécification</a>).</div> +<div class="note"> + <p><strong>Note :</strong> Dans l'exemple qui suit, tous les blocs sont transparents, excepté celui qui n'est pas positionné, montrant ainsi l'ordre d'empilement. Si l'on réduit l'opacité du bloc non positionné (DIV #4), il se produit quelque chose d'étrange : l'arrière-plan et la bordure de cet élément se placent par dessus les blocs flottants et les blocs positionnés. Il s'agit d'une interprétation particulière des spécifications CSS : l'application de l'opacité crée un nouveau contexte d'empilement (voir l'article : <a href="https://philipwalton.com/articles/what-no-one-told-you-about-z-index/">What No One Told You About Z-Index</a> de Philip Walton ou son excellente traduction de Vincent De Oliveira, <a href="https://iamvdo.me/blog/comprendre-z-index-et-les-contextes-dempilement">Ce que personne ne vous a dit sur z-index</a> et, bien-sûr, la <a href="https://www.w3.org/TR/CSS2/zindex.html">spécification</a>).</p> +</div> <p>{{EmbedLiveSample("Code_source_de_l’exemple", 600, 250)}}</p> @@ -123,12 +125,12 @@ b { <h2 id="Voir_aussi"><strong>Voir aussi</strong></h2> <ul> - <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index">L'empilement sans z-index</a> : Règles d'empilement par défaut</li> - <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Ajout_de_z-index">Ajouter z-index</a> : Utiliser z-index pour modifier l'empilement par défaut</li> - <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches">L'empilement de couches</a> : Remarques sur l'empilement de couches</li> - <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Exemple_1">Exemple d'empilement n°1</a> : Hiérarchie HTML à 2 niveaux, z-index sur le dernier niveau</li> - <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Exemple_2">Exemple d'empilement n°2</a> : Hiérarchie HTML à 2 niveaux, z-index sur tous les éléments</li> - <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Exemple_3">Exemple d'empilement n°3</a> : Hiérarchie HTML à 3 niveaux, z-index sur le deuxième niveau</li> + <li><a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">L'empilement sans z-index</a> : Règles d'empilement par défaut</li> + <li><a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Ajouter z-index</a> : Utiliser z-index pour modifier l'empilement par défaut</li> + <li><a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">L'empilement de couches</a> : Remarques sur l'empilement de couches</li> + <li><a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Exemple d'empilement n°1</a> : Hiérarchie HTML à 2 niveaux, z-index sur le dernier niveau</li> + <li><a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">Exemple d'empilement n°2</a> : Hiérarchie HTML à 2 niveaux, z-index sur tous les éléments</li> + <li><a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">Exemple d'empilement n°3</a> : Hiérarchie HTML à 3 niveaux, z-index sur le deuxième niveau</li> </ul> <div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_sans_z-index","Web/CSS/Comprendre_z-index/Ajout_de_z-index", "Web/CSS/Comprendre_z-index")}}</div> diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html index ed1138131b..dadbe3ec99 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html @@ -16,15 +16,15 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_1 <p>Le seul et unique contexte d'empilement est le contexte racine. Sans <code>z-index</code>, les éléments sont empilés dans leur ordre d'apparition dans le code HTML.</p> -<p><img alt="Figure 5a : Exemple de contexte d'empilement 1" class="internal" src="/@api/deki/files/1452/=Understanding_zindex_05a.png"></p> +<p><img alt="Figure 5a : Exemple de contexte d'empilement 1" src="understanding_zindex_05a.png"></p> <p>Si on assigne au bloc <em>DIV #2</em> une valeur de <code>z-index</code> positive (non nulle et non automatique), il est rendu par dessus tous les autres blocs.</p> -<p><img alt="Figure 5b : Exemple de contexte d'empilement 1" class="internal" src="/@api/deki/files/1453/=Understanding_zindex_05b.png"></p> +<p><img alt="Figure 5b : Exemple de contexte d'empilement 1" src="understanding_zindex_05b.png"></p> <p>Si maintenant on assigne également au bloc <em>DIV #4</em> une valeur de <code>z-index</code> positive, plus grande que celle du <em>DIV #2</em>, le bloc <em>DIV #4</em> est rendu par dessus tous les autres, y compris par dessus le bloc <em>DIV #2</em>.</p> -<p><img alt="Figure 5c : Exemple de contexte d'empilement 1" class="internal" src="/@api/deki/files/1454/=Understanding_zindex_05c.png"></p> +<p><img alt="Figure 5c : Exemple de contexte d'empilement 1" src="understanding_zindex_05c.png"></p> <p>Dans le dernier exemple, vous pouvez voir que les blocs <em>DIV #2</em> et <em>DIV #4</em> ne sont pas frères, parce qu'ils appartiennent à des parents différents dans la hiérarchie des éléments HTML. Néanmoins, l'empilement du bloc <em>DIV #4</em>, tout en respectant le bloc <em>DIV #2</em>, peut être contrôlé avec la propriété <code>z-index</code>. Il se fait que les éléments <em>DIV #1</em> et <em>DIV #3</em> n'ayant pas de <code>z-index</code> défini, ils ne créent pas de contexte d'empilement. Cela signifie que l'ensemble de leur contenu, y compris les blocs <em>DIV #2</em> et <em>DIV #3</em>, appartient au contexte d'empilement de la racine.</p> @@ -39,7 +39,10 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_1 </li> </ul> -<div class="note"><strong>Note :</strong> Les blocs <em>DIV #1</em> et <em>DIV #3</em> ne sont pas translucides. Il est important de se souvenir que d'assigner une valeur d'opacité inférieure à 1 à un élément positionné, crée implicitement un contexte d'empilement, de la même façon que l'ajout de propriétés <code>z-index</code>. Et cet exemple montre ce qui arrive lorsqu'un élément parent ne crée pas de contexte d'empilement.</div> +<div class="note"> + <p><strong>Note :</strong> Les blocs <em>DIV #1</em> et <em>DIV #3</em> ne sont pas translucides. Il est important de se souvenir que d'assigner une valeur d'opacité inférieure à 1 à un élément positionné, crée implicitement un contexte d'empilement, de la même façon que l'ajout de propriétés <code>z-index</code>. Et cet exemple montre ce qui arrive lorsqu'un élément parent ne crée pas de contexte d'empilement. + </p> +</div> <h2 id="Exemple"><strong>Exemple</strong></h2> diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html index 161afae998..e4dcfaa383 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html @@ -14,7 +14,7 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_2 <p>Ce deuxième exemple est très simple, mais il est essentiel à la compréhension du concept de <em>contexte d'empilement</em>. Nous avons les 4 mêmes blocs que l'exemple précédent, mais maintenant, nous appliquons des propriétés {{cssxref("z-index")}} aux deux niveaux de la hiérarchie.</p> -<p><img alt="Figure 6 : Exemple de contexte d'empilement 2" class="internal" src="/@api/deki/files/1455/=Understanding_zindex_06.png"></p> +<p>{{ EmbedLiveSample('Exemple', '352', '270') }}</p> <p>Vous pouvez voir que le bloc <em>DIV #2</em> (z-index : 2) est au dessus du bloc <em>DIV #3</em> (z-index : 1), parce qu'ils appartiennent tout les deux au même contexte d'empilement (celui de la racine), donc les valeurs de <code>z-index</code> régissent l'empilement des éléments.</p> @@ -35,7 +35,9 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_2 </li> </ul> -<div class="note"><strong>Note :</strong> Il est important de se souvenir qu'en général, la hiérarchie HTML est différente de la hiérarchie du contexte d'empilement. Dans la hiérarchie du contexte d'empilement, les éléments qui ne créent pas un contexte d'empilement sont regroupés avec leur parents.</div> +<div class="note"> + <p><strong>Note :</strong> Il est important de se souvenir qu'en général, la hiérarchie HTML est différente de la hiérarchie du contexte d'empilement. Dans la hiérarchie du contexte d'empilement, les éléments qui ne créent pas un contexte d'empilement sont regroupés avec leur parents.</p> +</div> <h2 id="Exemple">Exemple</h2> @@ -122,8 +124,5 @@ span.bold { </div> </pre> -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemple")}}</p> <div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_1","Web/CSS/Comprendre_z-index/Exemple_3", "Web/CSS/Comprendre_z-index")}}</div> diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html index ae2dfa1046..0668f2416a 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html @@ -18,7 +18,7 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_3 <p>Si les trois niveaux du menu se chevauchent partiellement, alors la gestion de l'empilement peut devenir problématique.</p> -<p><img alt="Figure 7 : Exemple de contexte d'empilement 3" class="internal" src="/@api/deki/files/1456/=Understanding_zindex_07.png"></p> +<p>{{ EmbedLiveSample('Exemple', '320', '330') }}</p> <p>Le menu de premier niveau est positionné relativement, ainsi aucun contexte d'empilement n'est créé.</p> @@ -54,7 +54,10 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_3 <p>On peut contourner ce problème en supprimant le chevauchement entre les différents niveaux du menu, ou en utilisant des valeurs de <code>z-index</code> individuelles (et différentes) assignées à l'aide de sélecteurs d'<em>id</em> plutôt que des sélecteurs de classe ou encore en aplatissant la hiérarchie HTML.</p> -<div class="note"><strong>Note :</strong> Dans le code source, vous remarquerez que les menus de deuxième et troisième niveaux sont construits à l'aide de plusieurs boîtes <em>DIV</em> contenues dans un élément positionné en absolu. Ceci sert à les grouper et à les positionner en une seule fois.</div> +<div class="note"> + <p><strong>Note :</strong> Dans le code source, vous remarquerez que les menus de deuxième et troisième niveaux sont construits à l'aide de plusieurs boîtes <em>DIV</em> contenues dans un élément positionné en absolu. Ceci sert à les grouper et à les positionner en une seule fois. + </p> +</div> <h2 id="Exemple">Exemple</h2> @@ -154,8 +157,5 @@ div.lev3 { </div> </pre> -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemple")}}</p> <div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_2","", "Web/CSS/Comprendre_z-index")}}</div> diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html index 89eddc49b5..f5c69a0055 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html @@ -26,16 +26,16 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_sans_z-index <p>Dans l'exemple suivant, les blocs en position absolue et relative sont correctement positionnés et dimensionnés pour illustrer les règles d'empilement. L'opacité a été réduite pour rendre les éléments transparents et faciliter ainsi la visualisation des superpositions.</p> <div class="note"> -<p><strong>Notes :</strong></p> - +<p><strong>Note :</strong> <ul> <li>Dans un groupe d'éléments sans aucune propriété <code>z-index</code>, tel que les blocs positionnés (DIV #1 à #4) dans l'exemple, l'ordre d'empilement des éléments est celui de leur ordre dans la hiérarchie HTML, quelle que soit leur position.</li> <li>Les blocs standards (DIV #5) dans le flux normal, sans aucune propriété de positionnement, sont toujours rendus avant les éléments positionnés, et apparaissent en dessous de ces derniers, même s'ils interviennent plus tard dans la hiérarchie HTML.</li> <li><strong>Attention</strong> : en copiant-collant le code ci-dessous, l'exemple ne fonctionnera pas pour le DIV#5 à cause de la propriété d'opacité qui lui a été affecté. Il apparaîtra donc au dessus des autres blocs.</li> </ul> +</p> </div> -<p><img alt="Figure 1. Exemple de règles d'empilement sans propriété z-index" class="internal" src="/@api/deki/files/1448/=Understanding_zindex_01.png"></p> +<p>{{EmbedLiveSample("Exemple", 600, 400)}}</p> <h2 id="Exemple">Exemple</h2> @@ -116,8 +116,4 @@ div { } </pre> -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemple","600","400")}}</p> - <div>{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_et_float", "Web/CSS/Comprendre_z-index")}}</div> diff --git a/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html index da1de35a86..a377b3b7ff 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html @@ -13,7 +13,7 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_de_couches <h2 id="Le_contexte_dempilement">Le contexte d'empilement</h2> -<p>Dans l'exemple précédent, <a href="/fr/docs/Web/CSS/Comprendre_z-index/Ajout_de_z-index">Ajout de z-index</a>, les blocs <em>DIV</em> sont rendus les uns au dessus des autres (de l'arrière vers l'avant), en commençant par celui dont la valeur de {{cssxref("z-index")}} est la plus faible et en finissant par celui dont la valeur de <code>z-index</code> est la plus forte. Dans cet exemple, il n'y a qu'un seul <em>contexte d'empilement</em>, qui est l'élément <code>HTML</code> racine de la page.</p> +<p>Dans l'exemple précédent, <a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Ajout de z-index</a>, les blocs <em>DIV</em> sont rendus les uns au dessus des autres (de l'arrière vers l'avant), en commençant par celui dont la valeur de {{cssxref("z-index")}} est la plus faible et en finissant par celui dont la valeur de <code>z-index</code> est la plus forte. Dans cet exemple, il n'y a qu'un seul <em>contexte d'empilement</em>, qui est l'élément <code>HTML</code> racine de la page.</p> <p>Dans certaines conditions, un contexte d'empilement enfant peut être créé à l'intérieur d'un bloc <em>DIV</em> (ou un autre élément) n'importe où dans le document. En particulier, un élément positionné (en absolu ou en relatif) possédant une valeur de <code>z-index</code> différente de <em>auto</em> crée son propre contexte d'empilement : tous ses éléments enfants sont entièrement empilés dans ce contexte, suivant les mêmes règles que celles expliquées précédemment. Les valeurs de <code>z-index</code> de ses enfants n'ont de signification que dans ce contexte. Le bloc <em>DIV</em> entier et son contenu sont empilés comme un seul élément dans le contexte d'empilement de leur parent.</p> @@ -52,11 +52,13 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_de_couches <li>Chaque contexte d'empilement est autonome : Une fois que le contenu de l'élément est empilé, l'élément entier est pris en compte dans l'ordre d'empilement du contexte parent.</li> </ul> -<div class="note"><strong>Notes :</strong> La hiérarchie des contextes d'empilement est un sous-ensemble de la hiérarchie des éléments HTML, car seuls les éléments positionnés dans l'espace (avec la propriété <code>z-index</code> créent des contextes d'empilement. On peut dire que les éléments qui ne créent pas leur propre contexte d'empilement sont <em>assimilés</em> par le contexte d'empilement parent.</div> +<div class="note"> + <p><strong>Note :</strong> La hiérarchie des contextes d'empilement est un sous-ensemble de la hiérarchie des éléments HTML, car seuls les éléments positionnés dans l'espace (avec la propriété <code>z-index</code> créent des contextes d'empilement. On peut dire que les éléments qui ne créent pas leur propre contexte d'empilement sont <em>assimilés</em> par le contexte d'empilement parent.</p> +</div> <h4 id="Illustration">Illustration</h4> -<p><img alt="Figure 1. Exemple de règles d'empilement modifiées avec la propriété z-index" class="internal" src="/@api/deki/files/1451/=Understanding_zindex_04.png"></p> +<p><img alt="Figure 1. Exemple de règles d'empilement modifiées avec la propriété z-index" src="understanding_zindex_04.png"></p> <p>Dans cet exemple, tous les éléments positionnés créent leur propre contexte d'empilement, du fait de leur positionnement et de leur valeur <code>z-index</code>. La hiérarchie des contextes d'empilement est organisée comme suit :</p> @@ -79,13 +81,14 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_de_couches <p>Il est important de noter que les blocs <em>DIV #4</em>, <em>DIV #5</em> et <em>DIV #6</em> sont les enfants du bloc <em>DIV #3</em>, donc leur empilement est complètement résolu à l'intérieur de ce dernier. Une fois que l'empilement et le rendu à l'intérieur du bloc 3 sont définis, la totalité de l'élément <em>DIV #3</em> est prise en compte pour l'empilement dans l'élément racine par rapport à ses <em>DIV</em> voisins.</p> <div class="note"> -<p><strong>Notes :</strong></p> +<p><strong>Note :</strong> <ul> <li><em>DIV #4</em> est rendu dans le bloc <em>DIV #1</em> car le <code>z-index</code> (5) de celui-ci est valide à l'intérieur du contexte d'empilement de l'élément racine, alors que le <code>z-index</code> (6) du bloc <em>DIV #4</em> est valide à l'intérieur du contexte d'empilement du bloc <em>DIV #3</em>. Ainsi, DIV #4 se trouve sous <em>DIV #1</em>, parce que <em>DIV #4</em> appartient à <em>DIV #3</em>, qui possède une valeur de <code>z-index</code> plus petite.</li> <li>Pour la même raison <em>DIV #2</em> (dont le <code>z-index</code> est 2) est rendu sous <em>DIV#5</em> (de <code>z-index</code> égal à 1) parce que <em>DIV #5</em> appartient à <em>DIV #3</em>, qui possède une valeur de <code>z-index</code> plus grande.</li> <li>Le <code>z-index</code> du bloc <em>DIV #3</em> est 4, mais cette valeur est indépendante du <code>z-index</code> du bloc <em>DIV #4</em>, <em>DIV #5</em> et <em>DIV #6</em>, parce qu'il appartient à un contexte d'empilement différent.</li> </ul> +</p> </div> <h2 id="Exemple">Exemple</h2> diff --git a/files/fr/web/css/css_properties_reference/index.html b/files/fr/web/css/css_properties_reference/index.html index 7c0812f001..a6c6fcca3a 100644 --- a/files/fr/web/css/css_properties_reference/index.html +++ b/files/fr/web/css/css_properties_reference/index.html @@ -11,7 +11,9 @@ translation_of: Web/CSS/CSS_Properties_Reference <p>Voici ci-dessous une liste simple des propriétés CSS les plus fréquemment utilisées avec leur équivalent en notation DOM, habituellement utilisée avec JavaScript :</p> -<div class="note"><strong>Note :</strong> Cette liste n'est pas exhaustive. Pour davantage de propriétés CSS, voir <a href="/fr/docs/Web/CSS/Reference">la référence CSS</a> et <a href="/fr/docs/Web/CSS/Extensions_Mozilla">les extensions CSS spécifiques à Mozilla</a>.</div> +<div class="note"> + <p><strong>Note :</strong> Cette liste n'est pas exhaustive. Pour davantage de propriétés CSS, voir <a href="/fr/docs/Web/CSS/Reference">la référence CSS</a> et <a href="/fr/docs/Web/CSS/Mozilla_Extensions">les extensions CSS spécifiques à Mozilla</a>.</p> +</div> <table> <thead> diff --git a/files/fr/web/css/css_ruby/index.html b/files/fr/web/css/css_ruby/index.html index cc9c44a3bb..1f9fade2e6 100644 --- a/files/fr/web/css/css_ruby/index.html +++ b/files/fr/web/css/css_ruby/index.html @@ -17,12 +17,10 @@ translation_of: Web/CSS/CSS_Ruby <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("ruby-align")}}</li> <li>{{cssxref("ruby-position")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_scroll_snap/basic_concepts/index.html b/files/fr/web/css/css_scroll_snap/basic_concepts/index.html index 8fbc368201..2eebe3962b 100644 --- a/files/fr/web/css/css_scroll_snap/basic_concepts/index.html +++ b/files/fr/web/css/css_scroll_snap/basic_concepts/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Scroll_Snap/Concepts_de_base --- <div>{{CSSRef}}</div> -<p class="summary"><a href="https://drafts.csswg.org/css-scroll-snap-1/">Le module de spécification CSS <em>Scroll Snap</em></a> fournit des outils pour « accrocher » sur certains points lors du défilement dans un document. Un tel comportement peut s'avérer utile pour obtenir un résultat analogue à certaines applications (qu'elles soient mobiles ou non).</p> +<p><a href="https://drafts.csswg.org/css-scroll-snap-1/">Le module de spécification CSS <em>Scroll Snap</em></a> fournit des outils pour « accrocher » sur certains points lors du défilement dans un document. Un tel comportement peut s'avérer utile pour obtenir un résultat analogue à certaines applications (qu'elles soient mobiles ou non).</p> <h2 id="Principes_fondamentaux">Principes fondamentaux</h2> @@ -62,7 +62,7 @@ original_slug: Web/CSS/CSS_Scroll_Snap/Concepts_de_base <p>Cela peut être utile pour s'assurer que les utilisateurs consultent chaque section sans louper du contenu par inadvertence. En revanche, cela peut rendre le défilement plus lent et ralentir considérablement un utilisateur qui chercherait une section donnée.</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> La propriété <code>scroll-snap-stop</code> est actuellement mise en question dans la version <em>Candidate Recommendation</em> de la spécification et pourrait être retirée.</p> </div> diff --git a/files/fr/web/css/css_scroll_snap/browser_compat/index.html b/files/fr/web/css/css_scroll_snap/browser_compat/index.html index 095ea0b616..c1eb4da23a 100644 --- a/files/fr/web/css/css_scroll_snap/browser_compat/index.html +++ b/files/fr/web/css/css_scroll_snap/browser_compat/index.html @@ -11,9 +11,9 @@ original_slug: Web/CSS/CSS_Scroll_Snap/Compatibilité_navigateurs --- <div>{{CSSRef}}</div> -<p class="summary">Firefox implémentait initialement une première version de la spécification <em>Scroll Snap</em> appelée alors <em>Scroll Snap Points</em>. Avec Firefox 68, c'est la nouvelle version de la spécification qui est implémentée et les anciennes propriétés sont retirées.</p> +<p>Firefox implémentait initialement une première version de la spécification <em>Scroll Snap</em> appelée alors <em>Scroll Snap Points</em>. Avec Firefox 68, c'est la nouvelle version de la spécification qui est implémentée et les anciennes propriétés sont retirées.</p> -<h2 class="summary" id="Que_faire_si_mon_style_utilisait_l'ancienne_implémentation_(Firefox_<_68)">Que faire si mon style utilisait l'ancienne implémentation (Firefox < 68) ?</h2> +<h2 id="Que_faire_si_mon_style_utilisait_l'ancienne_implémentation_(Firefox_<_68)">Que faire si mon style utilisait l'ancienne implémentation (Firefox < 68) ?</h2> <p>Si vous avez uniquement ciblé l'ancienne implémentation de Firefox avec les propriétés définies par <em>Scroll Snap Points</em>, vous devriez mettre à jour votre code afin d'utiliser la nouvelle spécification. Ainsi, votre code fonctionnera dans l'ensemble des navigateurs qui implémente la spécification à jour, y compris Firefox. Si vous n'effectuez pas ces changements, les accroches de défilement ne fonctionneront plus à partir de Firefox 68.</p> @@ -26,7 +26,7 @@ original_slug: Web/CSS/CSS_Scroll_Snap/Compatibilité_navigateurs <h2 id="Comment_utiliser_l'ancienne_implémentation_comme_méthode_de_recours">Comment utiliser l'ancienne implémentation comme méthode de recours ?</h2> -<p class="summary">Si vous utilisez déjà l'ancienne implémentation pour cibler les navigateurs plus anciens, vous pouvez continuer à l'utiliser de la façon décrite ci-après.</p> +<p>Si vous utilisez déjà l'ancienne implémentation pour cibler les navigateurs plus anciens, vous pouvez continuer à l'utiliser de la façon décrite ci-après.</p> <p>Dans ce premier exemple, on utilise l'ancienne version de la spécification et la nouvelle afin de pouvoir utiliser les positions d'accroche quel que soit le navigateur tant que celui-ci prend en charge les accroches au défilement.</p> diff --git a/files/fr/web/css/css_scroll_snap/index.html b/files/fr/web/css/css_scroll_snap/index.html index 6e79f674df..0c9ccd8baa 100644 --- a/files/fr/web/css/css_scroll_snap/index.html +++ b/files/fr/web/css/css_scroll_snap/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/CSS_Scroll_Snap --- <div>{{CSSRef}}</div> -<p class="summary"><em><strong>CSS Scroll Snap</strong></em> est un module de spécification CSS qui introduit les positions d'accroche lors du défilement. Cela permet de garantir la position sur laquelle on arrive après avoir fait défiler du contenu.</p> +<p><em><strong>CSS Scroll Snap</strong></em> est un module de spécification CSS qui introduit les positions d'accroche lors du défilement. Cela permet de garantir la position sur laquelle on arrive après avoir fait défiler du contenu.</p> <div class="note"> <p><strong>Note :</strong> La version précédente ce module, <em>Scroll Snap Points</em>, est dépréciée et est désormais remplacée par <em>CSS Scroll Snap</em>.</p> diff --git a/files/fr/web/css/css_scroll_snap_points/index.html b/files/fr/web/css/css_scroll_snap_points/index.html index 8d728f0b0c..bc27bffd62 100644 --- a/files/fr/web/css/css_scroll_snap_points/index.html +++ b/files/fr/web/css/css_scroll_snap_points/index.html @@ -21,7 +21,6 @@ translation_of: Web/CSS/CSS_Scroll_Snap_Points <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("scroll-snap-coordinate")}}</li> <li>{{cssxref("scroll-snap-destination")}}</li> @@ -29,7 +28,6 @@ translation_of: Web/CSS/CSS_Scroll_Snap_Points <li>{{cssxref("scroll-snap-points-y")}}</li> <li>{{cssxref("scroll-snap-type")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_scrollbars/index.html b/files/fr/web/css/css_scrollbars/index.html index 5a0fe0b208..acba92423a 100644 --- a/files/fr/web/css/css_scrollbars/index.html +++ b/files/fr/web/css/css_scrollbars/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/CSS_Scrollbars --- <div>{{CSSRef}} {{SeeCompatTable}}</div> -<p class="summary">Le module de spécification <em>CSS Scrollbars</em> standardise la mise en forme des barres de défilement (<em>scrollbar</em>) notamment introduite en 2000 avec Windows IE 5.5.</p> +<p>Le module de spécification <em>CSS Scrollbars</em> standardise la mise en forme des barres de défilement (<em>scrollbar</em>) notamment introduite en 2000 avec Windows IE 5.5.</p> <h2 id="Exemples">Exemples</h2> @@ -17,7 +17,6 @@ translation_of: Web/CSS/CSS_Scrollbars <h3 id="CSS">CSS</h3> -<div id="Example"> <pre class="brush:css">.scroller { width: 300px; height: 100px; @@ -33,18 +32,15 @@ translation_of: Web/CSS/CSS_Scrollbars <h3 id="Résultat">Résultat</h3> <p>{{EmbedLiveSample("Exemples")}}</p> -</div> <h2 id="Référence">Référence</h2> <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("scrollbar-width")}}</li> <li>{{cssxref("scrollbar-color")}}</li> </ul> -</div> <h2 id="Accessibilité">Accessibilité</h2> diff --git a/files/fr/web/css/css_selectors/index.html b/files/fr/web/css/css_selectors/index.html index 34200fe468..ead1aa386e 100644 --- a/files/fr/web/css/css_selectors/index.html +++ b/files/fr/web/css/css_selectors/index.html @@ -12,28 +12,28 @@ original_slug: Web/CSS/Sélecteurs_CSS --- <div>{{CSSRef}}</div> -<p class="summary"><span class="seoSummary"><strong>Les sélecteurs</strong> définissent les éléments sur lesquelles s'applique un ensemble de règles CSS.</span></p> +<p><strong>Les sélecteurs</strong> définissent les éléments sur lesquelles s'applique un ensemble de règles CSS.</p> <h2 id="Les_sélecteurs_simples">Les sélecteurs simples</h2> <dl> - <dt><a href="/fr/docs/Web/CSS/Sélecteurs_de_type">Les sélecteurs de type</a></dt> + <dt><a href="/fr/docs/Web/CSS/Type_selectors">Les sélecteurs de type</a></dt> <dd>Ce sélecteur simple permet de cibler les éléments qui correspondent au nom indiqué.<br> <strong>Syntaxe :</strong> <code><var>nomelement</var></code><br> <strong>Exemple :</strong> <code>input</code> permettra de cibler n'importe quel élément {{HTMLElement('input')}}.</dd> - <dt><a href="/fr/docs/Web/CSS/Sélecteurs_de_classe">Les sélecteurs de classe</a></dt> + <dt><a href="/fr/docs/Web/CSS/Class_selectors">Les sélecteurs de classe</a></dt> <dd>Ce sélecteur simple permet de cibler les éléments en fonction de la valeur de leur attribut <code>class</code>.<br> <strong>Syntaxe :</strong> <code>.<var>nomclasse</var></code><br> <strong>Exemple :</strong> <code>.index</code> permettra de cibler n'importe quel élément qui possède la classe <code>index</code> (vraisemblablement définie avec un attribut <code>class="index"</code>).</dd> - <dt><a href="/fr/docs/Web/CSS/Sélecteurs_d_ID">Les sélecteurs d'identifiant</a></dt> + <dt><a href="/fr/docs/Web/CSS/ID_selectors">Les sélecteurs d'identifiant</a></dt> <dd>Ce sélecteur simple permet de cibler un élément d'un document en fonction de la valeur de son attribut <code>id</code>. Dans un document, il ne doit y avoir qu'un seul élément pour un identifiant donné.<br> <strong>Syntaxe :</strong> <code>#<var>valeurid</var></code><br> <strong>Exemple :</strong> <code>#toc</code> permettra de cibler l'élément qui possède l'identifiant <code>toc</code> (vraisemblablement défini avec un attribut <code>id="toc"</code>).</dd> - <dt><a href="/fr/docs/Web/CSS/Sélecteurs_universels">Le sélecteur universel</a></dt> + <dt><a href="/fr/docs/Web/CSS/Universal_selectors">Le sélecteur universel</a></dt> <dd>Ce sélecteur permet de cibler tous les nœuds d'un document. Il existe également une variante pour ne cibler qu'un seul espace de noms et une variante pour cibler tous les espaces de noms.<br> <strong>Syntaxe :</strong> <code>*</code> <code>ns|*</code> <code>*|*</code><br> <strong>Exemple :</strong> <code>*</code> permettra de cibler tous les éléments du document.</dd> - <dt><a href="/fr/docs/Web/CSS/Sélecteurs_d_attribut">Les sélecteurs d'attribut</a></dt> + <dt><a href="/fr/docs/Web/CSS/Attribute_selectors">Les sélecteurs d'attribut</a></dt> <dd>Ce sélecteur simple permet de cibler des éléments d'un document en fonction de la valeur d'un de leurs attributs.<br> <strong>Syntaxe :</strong> <code>[attr]</code> <code>[attr=valeur]</code> <code>[attr~=valeur]</code> <code>[attr|=valeur] [attr^=valeur]</code> <code>[attr$=valeur]</code> <code>[attr*=valeur]</code><br> <strong>Exemple :</strong> <code>[autoplay]</code> permettra de cibler tous les éléments qui possède l'attribut <code>autoplay</code> défini (quelle que soit sa valeur).</dd> @@ -42,23 +42,23 @@ original_slug: Web/CSS/Sélecteurs_CSS <h2 id="Les_combinateurs">Les combinateurs</h2> <dl> - <dt><a href="/fr/docs/Web/CSS/Sélecteur_de_voisin_direct">Les sélecteurs de voisin direct</a></dt> + <dt><a href="/fr/docs/Web/CSS/Adjacent_sibling_combinator">Les sélecteurs de voisin direct</a></dt> <dd>Le combinateur <code>'+'</code> permet de sélectionner les nœuds qui suivent immédiatement un élément donné.<br> <strong>Syntaxe :</strong> <code><var>A</var> + <var>B</var></code><br> <strong>Exemple :</strong> <code>div + p</code> permettra de cibler n'importe quel élément {{HTMLElement('p')}} qui suit immédiatement un élément {{HTMLElement('div')}}.</dd> - <dt><a href="/fr/docs/Web/CSS/Sélecteurs_de_voisins_généraux">Les sélecteurs de voisins</a></dt> + <dt><a href="/fr/docs/Web/CSS/General_sibling_combinator">Les sélecteurs de voisins</a></dt> <dd>Le combinateur <code>'~'</code> permet de sélectionner les nœuds qui suivent un élément et qui ont le même parent.<br> <strong>Syntaxe :</strong> <code><var>A</var> ~ <var>B</var></code><br> <strong>Exemple :</strong> <code>p ~ span</code> permettra de cibler les éléments {{HTMLElement('span')}} qui suivent (immédiatement ou non) un élément {{HTMLElement('p')}} et qui ont le même élément parent.</dd> - <dt><a href="/fr/docs/Web/CSS/Sélecteurs_enfant">Les sélecteurs d'éléments enfants</a></dt> + <dt><a href="/fr/docs/Web/CSS/Child_combinator">Les sélecteurs d'éléments enfants</a></dt> <dd>Le combinateur <code>'>'</code> permet de sélectionner les nœuds qui sont des enfants directs d'un élément donné.<br> <strong>Syntaxe :</strong> <code><var>A</var> > <var>B</var></code><br> <strong>Exemple :</strong> <code>ul > li</code> permettra de cibler tous les éléments {{HTMLElement('li')}} qui sont directement situés sous un élément {{HTMLElement('ul')}}.</dd> - <dt><a href="/fr/docs/Web/CSS/Sélecteurs_descendant">Les sélecteurs d'éléments descendants</a></dt> + <dt><a href="/fr/docs/Web/CSS/Descendant_combinator">Les sélecteurs d'éléments descendants</a></dt> <dd>Le combinateur <code> </code> (espace) permet de sélectionner les nœuds qui sont des descendants (pas nécessairement des enfants directs) d'un élément donné.<br> <strong>Syntaxe :</strong> <code>A B</code><br> <strong>Exemple :</strong> <code>div span</code> permettra de cibler n'importe quel élément {{HTMLElement('span')}} situé à l'intérieur d'un élément {{HTMLElement('div')}}.</dd> - <dt><a href="/fr/docs/Web/CSS/Combinateur_colonne">Le combinateur de colonne</a>{{experimental_inline}}</dt> + <dt><a href="/fr/docs/Web/CSS/Column_combinator">Le combinateur de colonne</a>{{experimental_inline}}</dt> <dd>Le combinateur <code>||</code> sélectionne les nœuds qui appartiennent à une colonne. <strong>Syntaxe :</strong> <code>A || B</code><br> <strong>Exemple :</strong> <code>col || td</code> permettra de cibler n'importe quel élément {{HTMLElement('td')}} sous la portée d'une colonne {{HTMLElement('col')}}.</dd> </dl> @@ -73,7 +73,7 @@ original_slug: Web/CSS/Sélecteurs_CSS <h2 id="Les_pseudo-éléments">Les pseudo-éléments</h2> <dl> - <dt><a href="/fr/docs/Web/CSS/Pseudo-éléments">Les pseudo-éléments</a> représentent des entités du document qui ne sont pas décrites en HTML.</dt> + <dt><a href="/fr/docs/Web/CSS/Pseudo-elements">Les pseudo-éléments</a> représentent des entités du document qui ne sont pas décrites en HTML.</dt> <dd><strong>Exemple :</strong> <code>p::first-line</code> permettra de cibler la première ligne de chacun des éléments {{HTMLElement('p')}} (les paragraphes) du document.</dd> </dl> diff --git a/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html index 4c55b270d4..72c96372e8 100644 --- a/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html +++ b/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/Sélecteurs_CSS/Utiliser_la_pseudo-classe_:target_dans_un --- <div>{{CSSRef}}</div> -<p>Afin d'aider à identifier la destination d'un lien qui mène vers une portion spécifique du document, les <a class="external" href="https://www.w3.org/TR/css3-selectors/#target-pseudo">sélecteurs CSS3</a> ont introduit <a href="/fr/docs/Web/CSS/Pseudo-classes">la pseudo-classe</a> {{cssxref(":target")}}.</p> +<p>Afin d'aider à identifier la destination d'un lien qui mène vers une portion spécifique du document, les <a href="https://www.w3.org/TR/css3-selectors/#target-pseudo">sélecteurs CSS3</a> ont introduit <a href="/fr/docs/Web/CSS/Pseudo-classes">la pseudo-classe</a> {{cssxref(":target")}}.</p> <h2 id="Choisir_une_cible">Choisir une cible</h2> @@ -41,7 +41,6 @@ original_slug: Web/CSS/Sélecteurs_CSS/Utiliser_la_pseudo-classe_:target_dans_un <p>Dans l'exemple suivant, cinq liens pointent chacun vers une portion du même document. Actionner le lien « Premier », par exemple, fera en sorte que le<code> <h1 id="un"> </code>devienne l'élément cible. Notons que le document pourrait défiler vers une nouvelle position, jusqu'à la cible du lien.</p> -<div id="exemple"> <pre class="brush: html"><h4 id="un">...</h4> <p id="deux">...</p> <div id="trois">...</div> <a id="quatre">...</a> <em id="cinq">...</em> @@ -50,7 +49,6 @@ original_slug: Web/CSS/Sélecteurs_CSS/Utiliser_la_pseudo-classe_:target_dans_un <a href="#trois">Troisième</a> <a href="#quatre">Quatrième</a> <a href="#cinq">Cinquième</a></pre> -</div> <h2 id="Conclusion">Conclusion</h2> @@ -59,6 +57,6 @@ original_slug: Web/CSS/Sélecteurs_CSS/Utiliser_la_pseudo-classe_:target_dans_un <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="external" href="https://www.w3.org/TR/css3-selectors/#target-pseudo"><em>CSS3 Selectors #target-pseudo</em> (en anglais)</a></li> + <li><a href="https://www.w3.org/TR/css3-selectors/#target-pseudo"><em>CSS3 Selectors #target-pseudo</em> (en anglais)</a></li> <li>{{cssxref(":target")}}</li> </ul> diff --git a/files/fr/web/css/css_shapes/basic_shapes/index.html b/files/fr/web/css/css_shapes/basic_shapes/index.html index eed2d48370..46e4ebee5a 100644 --- a/files/fr/web/css/css_shapes/basic_shapes/index.html +++ b/files/fr/web/css/css_shapes/basic_shapes/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Shapes/Formes_simples --- <div>{{CSSRef}}</div> -<p class="summary">Les formes CSS peuvent être définies grâce au type {{cssxref("<basic-shape>")}}. Dans ce guide, nous verrons les différentes valeurs utilisables avec ce type et leur fonctionnement. Ces formes peuvent par exemple décrire des cercles simples voire des polygones complexes.</p> +<p>Les formes CSS peuvent être définies grâce au type {{cssxref("<basic-shape>")}}. Dans ce guide, nous verrons les différentes valeurs utilisables avec ce type et leur fonctionnement. Ces formes peuvent par exemple décrire des cercles simples voire des polygones complexes.</p> <p>Avant d'étudier ces formes dans le détail, attardons nous sur deux notions qui permettent de construire les formes :</p> @@ -27,11 +27,11 @@ original_slug: Web/CSS/CSS_Shapes/Formes_simples <h2 id="La_boîte_de_référence">La boîte de référence</h2> -<p>La boîte de référence définit le système de coordonnées de chaque forme. Nous avons déjà abordé cette boîte <a href="/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values">dans le guide sur la création de formes à partir des boîtes</a> où nous avons directement utilisé la boîte de référence afin de créer une forme.</p> +<p>La boîte de référence définit le système de coordonnées de chaque forme. Nous avons déjà abordé cette boîte <a href="/en-US/docs/Web/CSS/CSS_Shapes/From_box_values">dans le guide sur la création de formes à partir des boîtes</a> où nous avons directement utilisé la boîte de référence afin de créer une forme.</p> <p>L'inspecteur des formes CSS de Firefox affiche la boîte de référence lorsqu'on inspecte une forme. Dans la capture d'écran suivante, on a créé un cercle avec <code>shape-outside: circle(50%)</code>, l'élément flottant possède 20 pixels de remplissage avec la bordure et la marge. On voit que l'inspecteur affiche ces boîtes de référence. Lorsqu'on utilise une forme basique, la boîte de référence utilisée par défaut est la boîte des marges. Dans la capture d'écran, on voit que la forme est définie relativement aux boîtes du <a href="/fr/docs/Web/CSS/Mod%C3%A8le_de_bo%C3%AEte_CSS">modèle de boîtes</a>.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15904/shapes-reference-box.png" style="height: 840px; width: 1536px;"></p> +<p><img alt="" src="shapes-reference-box.png"></p> <p>La boîte de référence qu'on veut utiliser peut être ajoutée après la définition de la forme simple. Autrement dit, le comportement obtenu par défaut est équivalent à l'écriture de .</p> @@ -115,13 +115,13 @@ original_slug: Web/CSS/CSS_Shapes/Formes_simples <p>Lorsqu'on a décrit les boîtes de référence ci-avant, on a vu que la boîte de marge pourra rogner la forme. Pour observer cet effet, on peut déplacer le centre du cercle vers le contenu en utilisant la valeur 60% pour la position. Le centre du cercle est alors plus près du contenu et la forme du cercle pourrait dépasser la boîte de marge. La forme est donc rognée et on voit alors un aplat.</p> -<pre class="brush: css"><code>img { +<pre class="brush: css">img { float: left; shape-outside: circle(50% at 60%); } -</code></pre> +</pre> -<p><img alt="The circle shape is clipped by the margin box" src="https://mdn.mozillademos.org/files/15903/shapes-circle-clipped.png" style="height: 602px; width: 1536px;"></p> +<p><img alt="The circle shape is clipped by the margin box" src="shapes-circle-clipped.png"></p> <h2 id="ellipse()"><code>ellipse()</code></h2> @@ -145,6 +145,6 @@ original_slug: Web/CSS/CSS_Shapes/Formes_simples <p>L'inspecteur de formes Firefox s'avère très utile pour créer une forme de polygone. La capture d'écran qui suit illustre la forme dessinée dans l'outil.</p> -<p><img alt="The polygon basic shape, highlighted with the Shapes Inspector." src="https://mdn.mozillademos.org/files/15902/shapes-polygon.png" style="height: 540px; width: 1524px;"></p> +<p><img alt="The polygon basic shape, highlighted with the Shapes Inspector." src="shapes-polygon.png"></p> -<p>Une autre ressource qui peut s'avérer utile sur ces sujets est <a href="http://bennettfeely.com/clippy/">Clippy</a> : cet outil permet de créer des formes pour <code>clip-path</code>. Or, les formes utilisées pour <code>clip-path</code> sont les mêmes que pour les formes simples.</p> +<p>Une autre ressource qui peut s'avérer utile sur ces sujets est <a href="https://bennettfeely.com/clippy/">Clippy</a> : cet outil permet de créer des formes pour <code>clip-path</code>. Or, les formes utilisées pour <code>clip-path</code> sont les mêmes que pour les formes simples.</p> diff --git a/files/fr/web/css/css_shapes/from_box_values/index.html b/files/fr/web/css/css_shapes/from_box_values/index.html index ec57c04537..5ba429d0e6 100644 --- a/files/fr/web/css/css_shapes/from_box_values/index.html +++ b/files/fr/web/css/css_shapes/from_box_values/index.html @@ -12,7 +12,7 @@ original_slug: Web/CSS/CSS_Shapes/Créer_formes_boîtes --- <div>{{CSSRef}}</div> -<p class="summary">Une méthode permettant de créer des formes consiste à utiliser les valeurs provenant du modèle de boîte CSS. Dans cet article, nous verrons comment les utiliser.</p> +<p>Une méthode permettant de créer des formes consiste à utiliser les valeurs provenant du modèle de boîte CSS. Dans cet article, nous verrons comment les utiliser.</p> <p>Les <a href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">valeurs de boîte</a> qui sont autorisées pour les formes sont :</p> @@ -29,7 +29,7 @@ original_slug: Web/CSS/CSS_Shapes/Créer_formes_boîtes <p>Les valeurs énumérées ci-avant correspondent aux différentes boîtes du modèle de boîte CSS. En CSS, une boîte possède un contenu (<em>content</em>), du remplissage (<em>padding</em>), une bordure (<em>border</em>) ainsi qu'une marge (<em>margin</em>).</p> -<p><img alt="The Box Model consists of the margin, border, padding and content boxes." src="https://mdn.mozillademos.org/files/15845/box-model.png" style="height: 267px; width: 447px;"></p> +<p><img alt="The Box Model consists of the margin, border, padding and content boxes." src="box-model.png"></p> <p>En utilisant une de ces valeurs, il est possible de suivre le contour d'une de ces zones. Dans les exemples qui suivent, on utilise un élément qui possède du remplissage, une bordure et une marge afin d'observer l'impact de ces différentes valeurs pour la définition d'une forme et le comportement du contenu alentour.</p> @@ -62,7 +62,7 @@ original_slug: Web/CSS/CSS_Shapes/Créer_formes_boîtes <p>{{EmbedGHLiveSample("css-examples/shapes/box/content-box.html", '100%', 800)}}</p> <div class="note"> -<p><strong>Note :</strong> Pour en savoir plus sur le modèle de boîte CSS, voir <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">cet article</a>.</p> +<p><strong>Note :</strong> Pour en savoir plus sur le modèle de boîte CSS, voir <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">cet article</a>.</p> </div> <h2 id="Quand_utiliser_les_valeurs_de_boîte">Quand utiliser les valeurs de boîte</h2> @@ -73,4 +73,4 @@ original_slug: Web/CSS/CSS_Shapes/Créer_formes_boîtes <p>{{EmbedGHLiveSample("css-examples/shapes/box/bottom-margin-box.html", '100%', 800)}}</p> -<p>Pour obtenir des formes plus complexes, il faudra utiliser les valeurs de <a href="/fr/docs/Web/CSS/CSS_Shapes/Formes_simples">type <code><basic-shape></code> (les formes simples)</a> ou <a href="/fr/docs/Web/CSS/CSS_Shapes/Générer_formes_images">définir une forme à partir d'une image</a>, tel que nous le verrons dans les autres guides de cette section.</p> +<p>Pour obtenir des formes plus complexes, il faudra utiliser les valeurs de <a href="/fr/docs/Web/CSS/CSS_Shapes/Basic_Shapes">type <code><basic-shape></code> (les formes simples)</a> ou <a href="/fr/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">définir une forme à partir d'une image</a>, tel que nous le verrons dans les autres guides de cette section.</p> diff --git a/files/fr/web/css/css_shapes/index.html b/files/fr/web/css/css_shapes/index.html index 485385aa10..585e96ac67 100644 --- a/files/fr/web/css/css_shapes/index.html +++ b/files/fr/web/css/css_shapes/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/CSS_Shapes <p><em><strong>CSS Shapes</strong></em> est un module de spécification CSS qui décrit les formes géométriques. <a href="https://drafts.csswg.org/css-shapes/">Selon le niveau 1 de cette spécification</a>, les formes CSS peuvent être appliquées aux éléments flottants. Cette spécification définit différentes façon permettant de définir la forme d'un élément flottant afin que les lignes « coulent » autour de la forme plutôt qu'autour du rectangle formé par la boîte de l'élément.</p> -<h2 id="Basic_Example" name="Basic_Example">Exemple simple</h2> +<h2 id="exemple_simple">Exemple simple</h2> <p>Dans l'exemple qui suit, on a une image qui flotte à gauche et la propriété <code>shape-outside</code> qui lui est appliquée vaut <code>circle(50%)</code>. Ceci crée une forme circulaire autour de laquelle le contenu peut s'inscrire. Les boîtes des lignes pour le texte qui entourent l'image sont donc modifiées.</p> @@ -22,21 +22,17 @@ translation_of: Web/CSS/CSS_Shapes <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("shape-image-threshold")}}</li> <li>{{cssxref("shape-margin")}}</li> <li>{{cssxref("shape-outside")}}</li> </ul> -</div> <h3 id="Types_de_donnée">Types de donnée</h3> -<div class="index"> <ul> <li>{{cssxref("<basic-shape>")}}</li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/css_shapes/overview_of_css_shapes/index.html b/files/fr/web/css/css_shapes/overview_of_css_shapes/index.html index 4f7abd917f..ad57ea506d 100644 --- a/files/fr/web/css/css_shapes/overview_of_css_shapes/index.html +++ b/files/fr/web/css/css_shapes/overview_of_css_shapes/index.html @@ -11,7 +11,7 @@ original_slug: Web/CSS/CSS_Shapes/Aperçu_formes_CSS --- <div>{{CSSRef}}</div> -<p class="summary">La spécification <a href="https://www.w3.org/TR/css-shapes/">CSS Shapes Level 1</a> définit les formes géométriques en CSS. Pour ce module de niveau 1, ces formes s'appliquent aux éléments qui utilisent une disposition flottante. Dans cet article, nous verrons un aperçu de ce qu'il est possible de faire avec les formes en CSS.</p> +<p>La spécification <a href="https://www.w3.org/TR/css-shapes/">CSS Shapes Level 1</a> définit les formes géométriques en CSS. Pour ce module de niveau 1, ces formes s'appliquent aux éléments qui utilisent une disposition flottante. Dans cet article, nous verrons un aperçu de ce qu'il est possible de faire avec les formes en CSS.</p> <p>Si on fait flotter un élément à gauche d'un texte, on verra le texte écrit autour de cet élément en suivant un contour rectangulaire. Si on applique une forme circulaire à cet élément, le texte suivra alors le contour du cercle.</p> diff --git a/files/fr/web/css/css_shapes/shapes_from_images/index.html b/files/fr/web/css/css_shapes/shapes_from_images/index.html index 58a1729e2c..bbb1f822f7 100644 --- a/files/fr/web/css/css_shapes/shapes_from_images/index.html +++ b/files/fr/web/css/css_shapes/shapes_from_images/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Shapes/Générer_formes_images --- <div>{{CSSRef}}</div> -<p class="summary">Dans ce guide, nous allons voir comment créer une forme à partir d'une image, que ce soit un fichier avec un canal alpha ou un dégradé CSS. Grâce aux images, on peut suivre une forme complexe sans avoir à dessiner de polygone. On peut créer la forme à partir d'un éditeur graphique et utiliser le contour de cette image formé par la ligne des pixels moins opaques qu'un seuil donné.</p> +<p>Dans ce guide, nous allons voir comment créer une forme à partir d'une image, que ce soit un fichier avec un canal alpha ou un dégradé CSS. Grâce aux images, on peut suivre une forme complexe sans avoir à dessiner de polygone. On peut créer la forme à partir d'un éditeur graphique et utiliser le contour de cette image formé par la ligne des pixels moins opaques qu'un seuil donné.</p> <h2 id="Générer_une_forme_simple_avec_une_image">Générer une forme simple avec une image</h2> diff --git a/files/fr/web/css/css_table/index.html b/files/fr/web/css/css_table/index.html index 928231d528..7b01e5fe58 100644 --- a/files/fr/web/css/css_table/index.html +++ b/files/fr/web/css/css_table/index.html @@ -15,7 +15,6 @@ translation_of: Web/CSS/CSS_Table <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("border-collapse")}}</li> <li>{{cssxref("border-spacing")}}</li> @@ -24,7 +23,6 @@ translation_of: Web/CSS/CSS_Table <li>{{cssxref("table-layout")}}</li> <li>{{cssxref("vertical-align")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_text/index.html b/files/fr/web/css/css_text/index.html index 91ca768d97..31160cd80f 100644 --- a/files/fr/web/css/css_text/index.html +++ b/files/fr/web/css/css_text/index.html @@ -16,7 +16,6 @@ translation_of: Web/CSS/CSS_Text <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("hanging-punctuation")}}</li> <li>{{cssxref("hyphens")}}</li> @@ -34,7 +33,6 @@ translation_of: Web/CSS/CSS_Text <li>{{cssxref("word-break")}}</li> <li>{{cssxref("word-spacing")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_text_decoration/index.html b/files/fr/web/css/css_text_decoration/index.html index 885c8cdd54..e008cdc147 100644 --- a/files/fr/web/css/css_text_decoration/index.html +++ b/files/fr/web/css/css_text_decoration/index.html @@ -15,7 +15,6 @@ translation_of: Web/CSS/CSS_Text_Decoration <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("letter-spacing")}}</li> <li>{{cssxref("text-align")}}</li> @@ -34,7 +33,6 @@ translation_of: Web/CSS/CSS_Text_Decoration <li>{{cssxref("white-space")}}</li> <li>{{cssxref("word-spacing")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_transforms/index.html b/files/fr/web/css/css_transforms/index.html index 66190eedac..be8a54dc82 100644 --- a/files/fr/web/css/css_transforms/index.html +++ b/files/fr/web/css/css_transforms/index.html @@ -16,7 +16,6 @@ translation_of: Web/CSS/CSS_Transforms <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("backface-visibility")}}</li> <li>{{cssxref("perspective")}}</li> @@ -29,7 +28,6 @@ translation_of: Web/CSS/CSS_Transforms <li>{{cssxref("transform-style")}}</li> <li>{{cssxref("translate")}}</li> </ul> -</div> <h3 id="Types_de_donnée">Types de donnée</h3> diff --git a/files/fr/web/css/css_transforms/using_css_transforms/index.html b/files/fr/web/css/css_transforms/using_css_transforms/index.html index 93716e66d0..e52bf437be 100644 --- a/files/fr/web/css/css_transforms/using_css_transforms/index.html +++ b/files/fr/web/css/css_transforms/using_css_transforms/index.html @@ -19,7 +19,7 @@ original_slug: Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS <p>En modifiant l'espace des coordonnées, les <strong>transformations CSS</strong> permettent de changer la position d'un contenu affecté sans perturber le flux normal. Elles sont implémentées en utilisant un ensemble de propriétés CSS qui vous permettre d'appliquer des transformations affines aux éléments HTML. Ces transformations incluent la rotation, l'inclinaison et la translation à la fois dans le plan ou dans un espace 3D.</p> <div class="warning"> -<p><strong>Attention !</strong> Seuls les éléments positionnés selon <a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS">le modèle de boîtes</a> peuvent être transformés. Pour simplifier, on peut se souvenir que tout élément avec <code>display: block</code> est positionné selon le modèle de boîtes.</p> +<p><strong>Attention :</strong> Seuls les éléments positionnés selon <a href="/fr/docs/Web/CSS/CSS_Box_Model">le modèle de boîtes</a> peuvent être transformés. Pour simplifier, on peut se souvenir que tout élément avec <code>display: block</code> est positionné selon le modèle de boîtes.</p> </div> <h2 id="Propriétés_des_transformations_CSS">Propriétés des transformations CSS</h2> @@ -37,7 +37,7 @@ original_slug: Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS <p>Voici une version originale du logo MDN :</p> -<p><img alt="MDN Logo" src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png" style="height: 106px; width: 110px;"></p> +<p><img alt="MDN Logo" src="screen_shot_2016-02-16_at_15.53.54.png"></p> <h3 id="Rotation">Rotation</h3> @@ -45,7 +45,7 @@ original_slug: Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS <pre class="brush: html"><img style="transform: rotate(90deg); transform-origin: bottom left;" - src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png"> + src="screen_shot_2016-02-16_at_15.53.54.png"> </pre> <p>{{EmbedLiveSample('Rotation','auto',240)}}</p> @@ -56,7 +56,7 @@ original_slug: Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS <pre class="brush: html"><img style="transform: skewx(10deg) translatex(150px); transform-origin: bottom left;" - src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png"> + src="screen_shot_2016-02-16_at_15.53.54.png"> </pre> <p>{{EmbedLiveSample('Distorsion_et_translation')}}</p> diff --git a/files/fr/web/css/css_transitions/index.html b/files/fr/web/css/css_transitions/index.html index 5135e7a632..c9bcefcbf6 100644 --- a/files/fr/web/css/css_transitions/index.html +++ b/files/fr/web/css/css_transitions/index.html @@ -16,7 +16,6 @@ translation_of: Web/CSS/CSS_Transitions <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("transition")}}</li> <li>{{cssxref("transition-delay")}}</li> @@ -24,7 +23,6 @@ translation_of: Web/CSS/CSS_Transitions <li>{{cssxref("transition-property")}}</li> <li>{{cssxref("transition-timing-function")}}</li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/css_transitions/using_css_transitions/index.html b/files/fr/web/css/css_transitions/using_css_transitions/index.html index 19d7aefd57..9403828edb 100644 --- a/files/fr/web/css/css_transitions/using_css_transitions/index.html +++ b/files/fr/web/css/css_transitions/using_css_transitions/index.html @@ -15,7 +15,7 @@ original_slug: Web/CSS/CSS_Transitions/Utiliser_transitions_CSS <p>Les animations qui utilisent des transitions entre deux états sont souvent appelées <em>transitions implicites</em> car l'état initial et l'état final sont définis implicitement par le navigateur.</p> -<p><img alt="A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions." src="/files/4529/TransitionsPrinciple.png" style="display: block; height: 196px; margin: auto; width: 680px;"></p> +<p><img alt="A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions." src="transitionsprinciple.png"></p> <p>Les transitions CSS vous permettent de choisir :</p> @@ -28,18 +28,22 @@ original_slug: Web/CSS/CSS_Transitions/Utiliser_transitions_CSS <h2 id="Quelles_sont_les_propriétés_CSS_qui_peuvent_être_animées">Quelles sont les propriétés CSS qui peuvent être animées ?</h2> -<p>On peut définir les propriétés qu'on souhaite animer et la façon dont on souhaite les animer. Cela permet de créer des transitions complexes. Toutefois, toutes les propriétés ne peuvent pas être animées et <a href="/fr/docs/Web/CSS/Liste_propriétés_CSS_animées">la liste des propriétés concernées est limitée</a>.</p> +<p>On peut définir les propriétés qu'on souhaite animer et la façon dont on souhaite les animer. Cela permet de créer des transitions complexes. Toutefois, toutes les propriétés ne peuvent pas être animées et <a href="/fr/docs/Web/CSS/CSS_animated_properties">la liste des propriétés concernées est limitée</a>.</p> -<p class="note"><strong>Note :</strong> La gestion de la valeur <code>auto</code> représente un cas complexe. La spécification requiert de ne pas animer une telle valeur. Certains navigateurs dont ceux basés sur Gecko respectent cette règle mais d'autres comme WebKit sont moins stricts. Attention donc lors de l'utilisation des animations avec <code>auto</code>.</p> +<div class="note"> + <p><strong>Note :</strong> La gestion de la valeur <code>auto</code> représente un cas complexe. La spécification requiert de ne pas animer une telle valeur. Certains navigateurs dont ceux basés sur Gecko respectent cette règle mais d'autres comme WebKit sont moins stricts. Attention donc lors de l'utilisation des animations avec <code>auto</code>.</p> +</div> -<p class="note"><strong>Note :</strong> Attention lorsqu'on manipule des transitions directement après avoir ajouté un élément via <code>.appendChild()</code> ou en modiant <code>display: none;</code>. Cela sera compris comme si l'état initial n'avait jamais eu lieu et que l'élément avait toujours été dans son état final. Pour contourner ce problème, on peut appliquer <code>window.setTimeout()</code> pendant quelques millisecondes avant de modifier la propriété CSS sur laquelle on souhaite appliquer une transition.</p> +<div class="note"> + <p><strong>Note :</strong> Attention lorsqu'on manipule des transitions directement après avoir ajouté un élément via <code>.appendChild()</code> ou en modiant <code>display: none;</code>. Cela sera compris comme si l'état initial n'avait jamais eu lieu et que l'élément avait toujours été dans son état final. Pour contourner ce problème, on peut appliquer <code>window.setTimeout()</code> pendant quelques millisecondes avant de modifier la propriété CSS sur laquelle on souhaite appliquer une transition.</p> +</div> <h2 id="Les_propriétés_CSS_relatives_aux_transitions">Les propriétés CSS relatives aux transitions</h2> <p>Les transitions CSS sont généralement contrôlées grâce à la propriété raccourcie {{cssxref("transition")}}. Les différents composants d'une transition CSS peuvent être décrits dans le détail grâce aux propriétés détaillées suivantes :</p> <div class="note"> -<p><strong>Note : </strong>Dans les exemples ci-après, l'effet de répétition est uniquement utilisé à des fins de visualisation. Si vous souhaitez obtenir des effets visuels qui se répètent, il faudra utiliser la propriété {{cssxref("animation")}}.</p> +<p><strong>Note :</strong>Dans les exemples ci-après, l'effet de répétition est uniquement utilisé à des fins de visualisation. Si vous souhaitez obtenir des effets visuels qui se répètent, il faudra utiliser la propriété {{cssxref("animation")}}.</p> </div> <dl> @@ -47,815 +51,12 @@ original_slug: Web/CSS/CSS_Transitions/Utiliser_transitions_CSS <dd>Cette propriété définit le nom des propriétés CSS pour lesquelles on veut appliquer des transitions. Seules les propriétés listées ici seront sujettes aux transitions. Les modifications appliquées aux autres propriétés seront instantanées.</dd> <dt>{{cssxref("transition-duration")}}</dt> <dd>Cette propriété définit la durée de la transition. On peut définir une durée pour toutes les transitions ou une durée pour chacuune des propriétés. - <div> - <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> - <p><code>transition-duration: 0.5s</code></p> - - <div class="hidden"> - <pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - - <pre class="brush:css">.parent { width: 250px; height:125px;} -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; - -webkit-transition-duration: 0.5s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform -webkit-transform color; - transition-duration: 0.5s; - transition-timing-function: ease-in-out; -} -.box1{ - transform: rotate(270deg); - -webkit-transform: rotate(270deg); - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top: 25px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; - -webkit-transition-duration: 0.5s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform -webkit-transformv color; - transition-duration: 0.5s; - transition-timing-function: ease-in-out; -} -</pre> - - <pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; -} - -var intervalID = window.setInterval(updateTransition, 7000); -</pre> - </div> - - <div>{{EmbedLiveSample("duration_0_5s", 275, 150)}}</div> - </div> - - <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> - <p><code>transition-duration: 1s</code></p> - - <div class="hidden"> - <pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - - <pre class="brush: css">.parent { width: 250px; height:125px;} -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top -webkit-transform color; - -webkit-transition-duration: 1s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform color; - transition-duration: 1s; - transition-timing-function: ease-in-out; -} -.box1{ - transform: rotate(270deg); - -webkit-transform: rotate(270deg); - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top: 25px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color; - -webkit-transition-duration: 1s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform -webkit-transform color; - transition-duration: 1s; - transition-timing-function: ease-in-out; -} -</pre> - - <pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; -} - -var intervalID = window.setInterval(updateTransition, 7000); -</pre> - </div> - - <div>{{EmbedLiveSample("duration_1s",275,150)}}</div> - </div> - - <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> - <p><code>transition-duration: 2s</code></p> - - <div class="hidden"> - <pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - - <pre class="brush: css">.parent { width: 250px; height:125px;} -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; - -webkit-transition-duration: 2s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform -webkit-transform color; - transition-duration: 2s; - transition-timing-function: ease-in-out; -} -.box1{ - transform: rotate(270deg); - -webkit-transform: rotate(270deg); - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top: 25px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; - -webkit-transition-duration: 2s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform -webkit-transform color; - transition-duration: 2s; - transition-timing-function: ease-in-out; -} -</pre> - - <pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; -} - -var intervalID = window.setInterval(updateTransition, 7000); -</pre> - </div> - - <div>{{EmbedLiveSample("duration_2s",275,150)}}</div> - </div> - - <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> - <p><code>transition-duration: 4s</code></p> - - <div class="hidden"> - <pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - - <pre class="brush: css">.parent { width: 250px; height:125px;} -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; - -webkit-transition-duration: 4s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform -webkit-transform color; - transition-duration: 4s; - transition-timing-function: ease-in-out; -} -.box1{ - transform: rotate(270deg); - -webkit-transform: rotate(270deg); - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top: 25px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; - -webkit-transition-duration: 4s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform -webkit-transform color; - transition-duration: 4s; - transition-timing-function: ease-in-out; -} -</pre> - - <pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; -} - -var intervalID = window.setInterval(updateTransition, 7000); -</pre> - </div> - - <div>{{EmbedLiveSample("duration_4s",275,150)}}</div> - </div> - </div> </dd> <dt>{{cssxref("transition-timing-function")}}</dt> - <dd><img alt="" src="/files/3434/TF_with_output_gt_than_1.png" style="float: left; height: 173px; margin-right: 5px; width: 130px;">Cette propriété définit une fonction qui décrit la façon dont les valeurs intermédiaires sont calculées. On utilise pour cela des <a href="/fr/docs/Web/CSS/timing-function">fonctions de temporisation</a>. - <div class="cleared"> - <div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> - <p><code>transition-timing-function: ease</code></p> - - <div class="hidden"> - <pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - - <pre class="brush: css">.parent { width: 250px; height:125px;} -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-timing-function: ease; - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-timing-function: ease; -} -.box1{ - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top: 25px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-timing-function: ease; - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-timing-function: ease; -} -</pre> - - <pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; -} - -var intervalID = window.setInterval(updateTransition, 7000); -</pre> - </div> - - <div>{{EmbedLiveSample("ttf_ease",275,150)}}</div> - </div> - - <div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> - <p><code>transition-timing-function: linear</code></p> - - <div class="hidden"> - <pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - - <pre class="brush: css">.parent { width: 250px; height:125px;} -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-timing-function: linear; - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-timing-function: linear; -} -.box1{ - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top:25px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-timing-function: linear; - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-timing-function: linear; -} -</pre> - - <pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; -} - -var intervalID = window.setInterval(updateTransition, 7000); -</pre> - </div> - - <div>{{EmbedLiveSample("ttf_linear",275,150)}}</div> - </div> - - <div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> - <p><code>transition-timing-function: step-end</code></p> - - <div class="hidden"> - <pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - - <pre class="brush: css">.parent { width: 250px; height:125px;} -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-timing-function: step-end; - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-timing-function: step-end; -} -.box1{ - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top:25px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-timing-function: step-end; - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-timing-function: step-end; -} -</pre> - - <pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; -} - -var intervalID = window.setInterval(updateTransition, 7000); -</pre> - </div> - - <div>{{EmbedLiveSample("ttf_stepend",275,150)}}</div> - </div> - - <div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> - <p><code>transition-timing-function: steps(4, end)</code></p> - - <div class="hidden"> - <pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - - <pre class="brush: css">.parent { width: 250px; height:125px;} -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-timing-function: steps(4, end); - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-timing-function: steps(4, end); -} -.box1{ - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top: 25px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-timing-function: steps(4, end); - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-timing-function: steps(4, end); -} -</pre> - - <pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; -} - -var intervalID = window.setInterval(updateTransition, 7000); -</pre> - </div> - - <div>{{EmbedLiveSample("ttf_step4end",275,150)}}</div> - </div> - </div> + <dd>Cette propriété définit une fonction qui décrit la façon dont les valeurs intermédiaires sont calculées. On utilise pour cela des <a href="/fr/docs/Web/CSS/easing-function">fonctions de temporisation</a>. </dd> <dt>{{cssxref("transition-delay")}}</dt> <dd>Cette propriété indique le temps à attendre entre le moment où la propriété est modifiée et le début de la transition. - <div> - <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> - <p><code>transition-delay: 0.5s</code></p> - - <div class="hidden"> - <pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - - <pre class="brush: css">.parent { - width: 250px; - height: 125px; -} - -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-delay: 0.5s; - -webkit-transition-timing-function: linear; - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-delay: 0.5s; - transition-timing-function: linear; -} - -.box1 { - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top:25px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-delay: 0.5s; - -webkit-transition-timing-function: linear; - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-delay: 0.5s; - transition-timing-function: linear; -} -</pre> - - <pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; -} - -var intervalID = window.setInterval(updateTransition, 7000); -</pre> - </div> - - <div>{{EmbedLiveSample("delay_0_5s",275,150)}}</div> - </div> - - <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> - <p><code>transition-delay: 1s</code></p> - - <div class="hidden"> - <pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - - <pre class="brush: css">.parent { - width: 250px; - height: 125px; -} - -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-delay: 1s; - -webkit-transition-timing-function: linear; - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-delay: 1s; - transition-timing-function: linear; -} - -.box1{ - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top: 25px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-delay: 1s; - -webkit-transition-timing-function: linear; - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-delay: 1s; - transition-timing-function: linear; -} -</pre> - - <pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; -} - -var intervalID = window.setInterval(updateTransition, 7000); -</pre> - </div> - - <div>{{EmbedLiveSample("delay_1s",275,150)}}</div> - </div> - - <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> - <p><code>transition-delay: 2s</code></p> - - <div class="hidden"> - <pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - - <pre class="brush: css">.parent { - width: 250px; - height: 125px; -} - -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-delay: 2s; - -webkit-transition-timing-function: linear; - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-delay: 2s; - transition-timing-function: linear; -} - -.box1 { - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top: 25px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-delay: 2s; - -webkit-transition-timing-function: linear; - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-delay: 2s; - transition-timing-function: linear; -} -</pre> - - <pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; -} - -var intervalID = window.setInterval(updateTransition, 7000); -</pre> - </div> - - <div>{{EmbedLiveSample("delay_2s",275,150)}}</div> - </div> - - <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> - <p><code>transition-delay: 4s</code></p> - - <div class="hidden"> - <pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - - <pre class="brush: css">.parent { - width: 250px; - height: 125px; -} - -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-delay: 4s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-delay: 4s; - transition-timing-function: ease-in-out; -} - -.box1 { - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top: 25px; - position: absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration: 2s; - -webkit-transition-delay: 4s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top color; - transition-duration: 2s; - transition-delay: 4s; - transition-timing-function: ease-in-out; -} -</pre> - - <pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; -} - -var intervalID = window.setInterval(updateTransition, 7000); -</pre> - </div> - - <div>{{EmbedLiveSample("delay_4s",275,150)}}</div> - </div> - </div> </dd> </dl> @@ -882,6 +83,36 @@ var intervalID = window.setInterval(updateTransition, 7000); font-size: 36px; }</pre> +<h3 id="Exemple_avec_plusieurs_propriétés_animées">Exemple avec plusieurs propriétés animées</h3> + +<pre class="brush: html hidden highlight:[3]"><body> + <p>La boîte ci-dessous utilise des transitions pour les propriétés : width, height, background-color, transform. Survolez la boîte pour voir les animations.</p> + <div class="box">Sample</div> +</body></pre> + +<h4 id="CSS_Content">CSS Content</h4> + +<pre class="brush: css; highlight:[8,9]">.box { + border-style: solid; + border-width: 1px; + display: block; + width: 100px; + height: 100px; + background-color: #0000FF; + transition: width 2s, height 2s, background-color 2s, transform 2s; +} + +.box:hover { + background-color: #FFCCCC; + width: 200px; + height: 200px; + transform: rotate(180deg); +} +</pre> + +<p>{{EmbedLiveSample('Exemple_avec_plusieurs_propriétés_animées', 600, 300)}}</p> + + <h3 id="Appliquer_une_transition_sur_plusieurs_propriétés">Appliquer une transition sur plusieurs propriétés</h3> <h4 id="CSS">CSS</h4> @@ -1066,7 +297,9 @@ document.addEventListener('click', function(ev){ <pre class="brush: js">el.addEventListener("transitionrun", signalStart, true); el.addEventListener("transitionstart", signalStart, true);</pre> -<div class="note"><strong>Note :</strong> L'événement <code>transitionend</code> n'est pas déclenché si la transition est interrompue avant la fin de la transition si {{cssxref("display")}}<code>: none</code> ou si la valeur de la propriété est modifiée.</div> +<div class="note"> + <p><strong>Note :</strong> L'événement <code>transitionend</code> n'est pas déclenché si la transition est interrompue avant la fin de la transition si {{cssxref("display")}}<code>: none</code> ou si la valeur de la propriété est modifiée.</p> +</div> <h2 id="Spécifications">Spécifications</h2> @@ -1091,5 +324,5 @@ el.addEventListener("transitionstart", signalStart, true);</pre> <ul> <li>L'interface {{domxref("TransitionEvent")}} et l'événement {{event("transitionend")}}</li> - <li><a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">Utiliser les animations CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Utiliser les animations CSS</a></li> </ul> diff --git a/files/fr/web/css/css_types/index.html b/files/fr/web/css/css_types/index.html index 5642f8cf43..eb632cdba0 100644 --- a/files/fr/web/css/css_types/index.html +++ b/files/fr/web/css/css_types/index.html @@ -15,12 +15,11 @@ original_slug: Web/CSS/Types_CSS <p>Le module <strong><em>CSS basic data types</em></strong> définit les différents types de données CSS qui permettent de définir les types de valeurs (mots-clés et unités) acceptées par les différentes propriétés et fonctions. Lorsqu'on utilise une notation formelle, les types de données sont représentés par un mot-clé entre chevrons (< >).</p> <div class="note"> -<p><strong>Note </strong><strong>:</strong> Les types de donnée CSS sont un type spécial de <a href="https://www.w3.org/TR/css3-values/#component-types">composant de type de valeur</a>.</p> +<p><strong>Note :</strong> Les types de donnée CSS sont un type spécial de <a href="https://www.w3.org/TR/css3-values/#component-types">composant de type de valeur</a>.</p> </div> <h2 id="Référence">Référence</h2> -<div class="index"> <ul> <li>{{cssxref("<angle>")}}</li> <li>{{cssxref("<angle-percentage>")}}</li> @@ -61,7 +60,7 @@ original_slug: Web/CSS/Types_CSS <li>{{cssxref("<string>")}}</li> <li>{{cssxref("<time>")}}</li> <li>{{cssxref("<time-percentage>")}}</li> - <li>{{cssxref("<timing-function>")}}</li> + <li>{{cssxref("easing-function")}}</li> <li>{{cssxref("<toggle-value>")}}</li> <li>{{cssxref("<transform-function>")}}</li> <li>{{cssxref("<type-or-unit>")}}</li> @@ -69,7 +68,6 @@ original_slug: Web/CSS/Types_CSS <li>{{cssxref("<url-modifier>")}}</li> <li>{{cssxref("<zero>")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> @@ -98,6 +96,6 @@ original_slug: Web/CSS/Types_CSS <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Valeurs_et_unités_CSS">Unités et valeurs CSS</a></li> - <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Introduction à CSS : les valeurs et les unités</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Values_and_Units">Unités et valeurs CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Introduction à CSS : les valeurs et les unités</a></li> </ul> diff --git a/files/fr/web/css/css_values_and_units/index.html b/files/fr/web/css/css_values_and_units/index.html index b49a59e9aa..623b4118a6 100644 --- a/files/fr/web/css/css_values_and_units/index.html +++ b/files/fr/web/css/css_values_and_units/index.html @@ -58,10 +58,10 @@ original_slug: Web/CSS/Valeurs_et_unités_CSS <p>Dans une déclaration, on pourra donc écrire (sans quote) :</p> -<pre class="brush: css"><code>.box { +<pre class="brush: css">.box { break-inside: avoid; } -</code></pre> +</pre> <h3 id="Mots-clés_généraux">Mots-clés généraux</h3> @@ -409,18 +409,18 @@ original_slug: Web/CSS/Valeurs_et_unités_CSS <ul> <li>{{cssxref("calc()")}}</li> - <li>{{cssxref("min", "min()")}}</li> - <li>{{cssxref("max", "max()")}}</li> - <li>{{cssxref("clamp", "clamp()")}}</li> + <li>{{cssxref("min()", "min()")}}</li> + <li>{{cssxref("max()", "max()")}}</li> + <li>{{cssxref("clamp()", "clamp()")}}</li> <li>{{cssxref("toggle", "toggle()")}}</li> - <li>{{cssxref("attr", "attr()")}}</li> + <li>{{cssxref("attr()", "attr()")}}</li> </ul> <p>Les notations fonctionnelles sont des types de valeur qui peuvent représenter des types plus complexes ou qui impliquent un traitement spécifique du moteur de rendu. La syntaxe commence par le nom de la fonction, immédiatement suivi d'une parenthèse gauche <code>(</code> suivie des arguments de la notation, suivis d'une parenthèse droite<code>)</code>. Les fonctions peuvent prendre plusieurs arguments qui ont une forme analogue à celle utilisée pour les valeurs des propriétés.</p> <p>Les espaces sont optionnels mais autorisés à l'intérieur des parenthèses.</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Contrairement à d'autres langages, la virgule n'est pas toujours le séparateur utilisé entre les arguments d'une notation fonctionnelle.</p> </div> @@ -490,6 +490,6 @@ original_slug: Web/CSS/Valeurs_et_unités_CSS <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Types_CSS">Les types de donnée de base en CSS</a></li> - <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Introduction à CSS : les valeurs et les unités</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Types">Les types de donnée de base en CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Introduction à CSS : les valeurs et les unités</a></li> </ul> diff --git a/files/fr/web/css/css_variables/index.html b/files/fr/web/css/css_variables/index.html index 7d439c68e8..df08214795 100644 --- a/files/fr/web/css/css_variables/index.html +++ b/files/fr/web/css/css_variables/index.html @@ -16,11 +16,9 @@ translation_of: Web/CSS/CSS_Variables <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("--*")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/css_writing_modes/index.html b/files/fr/web/css/css_writing_modes/index.html index 7671959e67..66fa80e82d 100644 --- a/files/fr/web/css/css_writing_modes/index.html +++ b/files/fr/web/css/css_writing_modes/index.html @@ -16,7 +16,6 @@ translation_of: Web/CSS/CSS_Writing_Modes <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("direction")}}</li> <li>{{cssxref("glyph-orientation-horizontal")}}</li> @@ -25,7 +24,6 @@ translation_of: Web/CSS/CSS_Writing_Modes <li>{{cssxref("unicode-bidi")}}</li> <li>{{cssxref("writing-mode")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/cssom_view/coordinate_systems/index.html b/files/fr/web/css/cssom_view/coordinate_systems/index.html index 2d356ed5c8..a4de1dd910 100644 --- a/files/fr/web/css/cssom_view/coordinate_systems/index.html +++ b/files/fr/web/css/cssom_view/coordinate_systems/index.html @@ -129,9 +129,7 @@ inner.addEventListener("mouseleave", update, false);</pre> </div> </div></pre> -<details open><summary> <h3 id="CSS">CSS</h3> -</summary> <p>Le code CSS est uniquement utilisé à des fins stylistiques. La classe <code>"outer"</code> est utilisée pour la boîte englobante qu'on rend volontairement trop large pour la fenêtre de MDN afin de pouvoir <em>scroller</em> horizontalement. La boîte <code>"inner"</code> est celle sur laquelle on suit les évènements.</p> @@ -161,7 +159,6 @@ inner.addEventListener("mouseleave", update, false);</pre> width: 100%; text-align: center; }</pre> -</details> <h3 id="Résultat">Résultat</h3> @@ -172,7 +169,7 @@ inner.addEventListener("mouseleave", update, false);</pre> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a> : comment modifier un système de coordonnées</li> + <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Utiliser les transformations CSS</a> : comment modifier un système de coordonnées</li> <li>Les coordonnées relatives aux évènements de la souris : <ul> <li>{{domxref("MouseEvent.offsetX")}} et {{domxref("MouseEvent.offsetY")}}</li> diff --git a/files/fr/web/css/cssom_view/index.html b/files/fr/web/css/cssom_view/index.html index 155869c28d..d052cb0abc 100644 --- a/files/fr/web/css/cssom_view/index.html +++ b/files/fr/web/css/cssom_view/index.html @@ -17,11 +17,9 @@ translation_of: Web/CSS/CSSOM_View <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("scroll-behavior")}}</li> </ul> -</div> <h2 id="Guide">Guide</h2> diff --git a/files/fr/web/css/cursor/index.html b/files/fr/web/css/cursor/index.html index a413586854..2931c1851a 100644 --- a/files/fr/web/css/cursor/index.html +++ b/files/fr/web/css/cursor/index.html @@ -51,11 +51,11 @@ cursor: unset; <h3 id="values">Valeurs</h3> <dl> - <dt><code id="url"><url></code></dt> + <dt><code><url></code></dt> <dd>Une <code>url(…)</code> ou une liste d'URL séparées par des virgules <code>url(…), url(…), …</code> pointant vers un fichier image. On peut utiliser plusieurs <a href="/fr/docs/Web/CSS/url()"><code>url()</code></a>, au cas où certains types d'images ne sont pas pris en charge. Il est <em>obligatoire</em> qu'une valeur non-URL soit présente à la fin de cette liste.</dd> - <dt><code id="xy"><x></code> <code><y></code> {{experimental_inline}}</dt> + <dt><code><x></code> <code><y></code> {{experimental_inline}}</dt> <dd>Des coordonnées en abscisses et en ordonnées sans unité, inférieures à 32.</dd> - <dt><span id="keyword_values">Valeurs utilisant un mot-clé</span></dt> + <dt>Valeurs utilisant un mot-clé</dt> <dd> <p><strong>Vous pouvez déplacer votre souris au-dessus de chaque ligne pour tester.</strong></p> @@ -153,7 +153,7 @@ cursor: unset; <td><img alt="no-drop.gif" class="lwrap" src="no-drop.gif" style="float: left;"></td> <td>Le curseur indique qu'on ne peut pas déposer d'élément à cet endroit. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=B75173">bug 275173</a> pour Windows et Mac OS X, « <code>no-drop</code> a le même effet que <code>not-allowed</code> ».</td> </tr> - <tr id="grab" style="cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;"> + <tr style="cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;"> <td><code>grab</code></td> <td><img alt="grab.gif" class="default" src="grab.gif"></td> <td rowspan="2" style="cursor: auto;"> diff --git a/files/fr/web/css/custom-ident/index.html b/files/fr/web/css/custom-ident/index.html index 64c288514d..b9581cd660 100644 --- a/files/fr/web/css/custom-ident/index.html +++ b/files/fr/web/css/custom-ident/index.html @@ -21,7 +21,7 @@ translation_of: Web/CSS/custom-ident <li>un tiret (<code>-</code>)</li> <li>un tiret bas (<em>underscore</em>) (<code>_</code>),</li> <li>un caractère échappé via une barre oblique inversée (<code>\</code>),</li> - <li>un caractère <a class="external" href="http://en.wikipedia.org/wiki/Unicode">Unicode</a> (une barre oblique inversée suivie d'un à six chiffres hexadécimaux représentant le point de code Unicode).</li> + <li>un caractère <a href="http://en.wikipedia.org/wiki/Unicode">Unicode</a> (une barre oblique inversée suivie d'un à six chiffres hexadécimaux représentant le point de code Unicode).</li> </ul> <p>Le premier caractère de l'identifiant ne doit pas être un chiffre, un tiret suivi d'un chiffre ou un tiret suivi d'un autre tiret. Une valeur <code><custom-ident></code> ne doit pas être encadrée entre quotes ou entre doubles quotes car ce serait alors une valeur {{cssxref("<string>")}}.</p> diff --git a/files/fr/web/css/dimension/index.html b/files/fr/web/css/dimension/index.html index 230fa2a0f6..6be0130cde 100644 --- a/files/fr/web/css/dimension/index.html +++ b/files/fr/web/css/dimension/index.html @@ -21,7 +21,7 @@ translation_of: Web/CSS/dimension <h3 id="Dimensions_valides">Dimensions valides</h3> -<pre class="syntaxbox example-good">12px 12 pixels +<pre class="brush:css example-good">12px 12 pixels 1rem 1 rem 1.2pt 1.2 points 2200ms 2200 millisecondes @@ -31,7 +31,7 @@ translation_of: Web/CSS/dimension <h3 id="Dimensions_invalides">Dimensions invalides</h3> -<pre class="syntaxbox example-bad">12 px L'unité doit immédiatement être indiquée après le nombre +<pre class="brush:css example-bad">12 px L'unité doit immédiatement être indiquée après le nombre 12"px" Les unités sont des identifiants et ne doivent pas être entourées de quotes </pre> diff --git a/files/fr/web/css/display-inside/index.html b/files/fr/web/css/display-inside/index.html index 384a69f5bb..697b44c4c9 100644 --- a/files/fr/web/css/display-inside/index.html +++ b/files/fr/web/css/display-inside/index.html @@ -20,22 +20,22 @@ translation_of: Web/CSS/display-inside <dd>L'élément organise son contenu en utilisant la disposition en flux (disposition bloc/en ligne ou « <em>block and inline layout</em> » en anglais). <p>Si le type d'affichage extérieur est <code>inline</code> ou <code>run-in</code> et que l'élément participe à un contexte de formatage bloc ou en ligne, il génèrera une boîte en ligne. Sinon, il génèrera un conteneur de bloc.</p> - <p>Selon la valeur d'autres propriétés (telles que {{CSSxRef("position")}}, {{CSSxRef("float")}}, ou {{CSSxRef("overflow")}}) et selon que l'élément partcipe à un contexte de mise en forme de bloc ou en ligne, l'élément crée un nouveau <a href="/fr/docs/Web/CSS/Block_formatting_context">contexte de formatage de bloc</a> (BFC) pour son contenu ou intègre son contenu dans le contexte parent.</p> + <p>Selon la valeur d'autres propriétés (telles que {{CSSxRef("position")}}, {{CSSxRef("float")}}, ou {{CSSxRef("overflow")}}) et selon que l'élément partcipe à un contexte de mise en forme de bloc ou en ligne, l'élément crée un nouveau <a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">contexte de formatage de bloc</a> (BFC) pour son contenu ou intègre son contenu dans le contexte parent.</p> </dd> <dt><code>flow-root</code> {{Experimental_Inline}}</dt> - <dd>L'élément génère un bloc qui établit un nouveau <a href="/fr/docs/Web/CSS/Block_formatting_context">contexte de formatage de bloc</a>, définissant ainsi une nouvelle racine pour le formatage.</dd> + <dd>L'élément génère un bloc qui établit un nouveau <a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">contexte de formatage de bloc</a>, définissant ainsi une nouvelle racine pour le formatage.</dd> <dt><code>table</code></dt> <dd>L'élément se comporte comme un élément HTML {{HTMLElement("table")}}. Il définit une boîte de bloc.</dd> <dt><code>flex</code></dt> - <dd>L'élément se comporte comme un élément de bloc et dispose son contenu selon <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS">le modèle des boîtes flexibles</a>.</dd> + <dd>L'élément se comporte comme un élément de bloc et dispose son contenu selon <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">le modèle des boîtes flexibles</a>.</dd> <dt><code>grid</code></dt> - <dd>L'élément se comporte comme un élément de bloc et dispose son contenu selon <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base">le modèle des grilles</a>.</dd> + <dd>L'élément se comporte comme un élément de bloc et dispose son contenu selon <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">le modèle des grilles</a>.</dd> <dt><code>ruby</code> {{Experimental_Inline}}</dt> <dd>L'élément se comporte comme un élément en ligne et dispose son contenu selon le modèle de formatage ruby. Il se comporte comme un élément HTML {{HTMLElement("ruby")}}.</dd> </dl> <div class="note"> -<p><strong>Note : </strong>Les navigateurs qui prennent en charge la syntaxe avec deux valeurs peuvent n'utiliser que <code><display-inside></code> lorsque c'est cohérent. Ainsi, avec <code>display: flex</code> ou <code>display: grid</code>, la valeur utilisée de <code><display-outside></code> sera nécessairement <code>block</code>. On a ainsi le résultat attendu car on doit avoir <code>display: grid</code> avec un conteneur qui soit un bloc.</p> +<p><strong>Note :</strong> Les navigateurs qui prennent en charge la syntaxe avec deux valeurs peuvent n'utiliser que <code><display-inside></code> lorsque c'est cohérent. Ainsi, avec <code>display: flex</code> ou <code>display: grid</code>, la valeur utilisée de <code><display-outside></code> sera nécessairement <code>block</code>. On a ainsi le résultat attendu car on doit avoir <code>display: grid</code> avec un conteneur qui soit un bloc.</p> </div> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -113,6 +113,6 @@ translation_of: Web/CSS/display-inside <li>{{CSSxRef("<display-legacy>")}}</li> </ul> </li> - <li><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Concepts de base des boîtes flexibles (<em>flexbox</em>)</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base">Concepts de base des grilles CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Concepts de base des boîtes flexibles (<em>flexbox</em>)</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Concepts de base des grilles CSS</a></li> </ul> diff --git a/files/fr/web/css/display-legacy/index.html b/files/fr/web/css/display-legacy/index.html index 7980688bf4..759ab90d24 100644 --- a/files/fr/web/css/display-legacy/index.html +++ b/files/fr/web/css/display-legacy/index.html @@ -40,7 +40,6 @@ translation_of: Web/CSS/display-legacy <p>Dans l'exemple qui suit, on définit un conteneur flexible en ligne en utilisant le mot-clé historique <code>inline-flex</code>.</p> -<div id="Example"> <h3 id="CSS">CSS</h3> <pre class="brush: css">.container { @@ -60,7 +59,7 @@ Pas d'élément flexible <h3 id="Résultat">Résultat</h3> -<p>{{EmbedLiveSample("Exemple", 300, 150)}}</p> +<p>{{EmbedLiveSample("Exemples", 300, 150)}}</p> </div> <p>Avec la nouvelle syntaxe, on peut décrire le conteneur avec deux valeurs : la première pour le mode d'affichage extérieure (<code>inline</code>) et la seconde pour le mode d'affichage intérieur (<code>flex</code>).</p> diff --git a/files/fr/web/css/display-outside/index.html b/files/fr/web/css/display-outside/index.html index 7200b30672..5bde80335d 100644 --- a/files/fr/web/css/display-outside/index.html +++ b/files/fr/web/css/display-outside/index.html @@ -29,7 +29,7 @@ translation_of: Web/CSS/display-outside </dl> <div class="note"> -<p><strong>Note : </strong>Browsers that support the two value syntax, on finding the outer value only, such as when <code>display: block</code> or <code>display: inline</code> is specified, will set the inner value to <code>flow</code>. This will result in expected behavior; for example if you specify an element to be block, you would expect that the children of that element would participate in block and inline normal flow layout.</p> +<p><strong>Note :</strong> Browsers that support the two value syntax, on finding the outer value only, such as when <code>display: block</code> or <code>display: inline</code> is specified, will set the inner value to <code>flow</code>. This will result in expected behavior; for example if you specify an element to be block, you would expect that the children of that element would participate in block and inline normal flow layout.</p> <p><strong>Note : </strong>Les navigateurs qui prennent en charge la syntaxe avec deux valeurs utiliseront la valeur par défaut <code>flow</code> pour le mode intérieur si <code>display: block</code> ou <code>display: inline</code>. On a ainsi le résultat attendu (si on souhaite qu'un élément se comporte comme un bloc, on s'attend à ce que les éléments fils de cet élément contribuent à la disposition normale en bloc et en ligne).</p> </div> @@ -81,5 +81,5 @@ translation_of: Web/CSS/display-outside </ul> </li> <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline layout in Normal Flow</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts explained</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts">Formatting Contexts explained</a></li> </ul> diff --git a/files/fr/web/css/display/index.html b/files/fr/web/css/display/index.html index 1b09df2677..2f322c669c 100644 --- a/files/fr/web/css/display/index.html +++ b/files/fr/web/css/display/index.html @@ -18,7 +18,7 @@ translation_of: Web/CSS/display <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush:css no-line-numbers notranslate">/* Valeurs de type <display-outside> */ +<pre class="brush:css no-line-numbers">/* Valeurs de type <display-outside> */ display: block; display: inline; display: run-in; @@ -100,13 +100,13 @@ display: unset; <p>Les méthodes d'affichage historiques permettent d'obtenir les mêmes résultats avec un seul mot-clé. Ces valeurs devraient être privilégiées tant que la prise en charge de la syntaxe sur deux valeurs n'est pas mieux prise en charge. Ainsi, il est possible d'utiliseur deux valeur afin de définir un conteneur flexible en ligne :</p> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { display: inline flex; }</pre> <p>On pourra obtenir un comportement équivalent en écrivant cela avec une seule valeur.</p> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { display: inline-flex; } </pre> @@ -127,7 +127,7 @@ display: unset; <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> Texte visible </p> <p class="secret"> @@ -136,7 +136,7 @@ display: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p.secret { +<pre class="brush: css">p.secret { display: none; }</pre> diff --git a/files/fr/web/css/easing-function/index.html b/files/fr/web/css/easing-function/index.html index 4c5aa1924d..ed1e420f89 100644 --- a/files/fr/web/css/easing-function/index.html +++ b/files/fr/web/css/easing-function/index.html @@ -1,243 +1,311 @@ --- -title: <timing-function> +title: <easing-function> slug: Web/CSS/easing-function -tags: - - CSS - - Reference - - Type translation_of: Web/CSS/easing-function -translation_of_original: Web/CSS/timing-function -original_slug: Web/CSS/timing-function --- <div>{{CSSRef}}</div> -<p>Le type de donnée <strong><code><timing-function></code></strong> représente une fonction mathématique qui décrit la vitesse à laquelle évolue une valeur unidimensionnelle lors d'une transition ou d'une animation. Cela permet de définir une courbe d'accélération afin que la vitesse de l'animation puisse changer lors de son exécution. Ces fonctions sont souvent appelées « fonction de temporisation » ou « <em>easing functions</em> » (en anglais).</p> +<p>Le <a href="/fr/docs/Web/CSS/CSS_Types">type de données</a> CSS <strong><code><easing-function></code></strong> indique une fonction mathématique qui décrit la façon dont une valeur numérique évolue.</p> -<p>Cette fonction prend comme entrée un ratio de temps (0 : l'état initial, 1 : l'état final) et produit un ratio d'évolution (sous la forme d'une valeur {{cssxref("<number>")}}) allant également de 0.0 à 1.0.</p> +<p>Cette transition entre deux valeurs peut être appliquées dans différentes situations. Elle peut être utilisée pour décrire la rapidité selon laquelle les valeurs évoluent durant les animations. Elle permet ainsi de faire varier la vitesse de l'animation au fur et à mesure de sa progression. Elle peut aussi être utilisée pour interpoler deux couleurs au sein d'un dégradé.</p> -<p><img src="/files/3434/TF_with_output_gt_than_1.png"><img src="/files/3435/TF_with_output_gt_than_1_clipped.png" style="margin-right: 5px;"></p> +<p>Les fonctions d'évolution qui appartiennent au sous ensemble des courbes de Bézier cubiques sont souvent appelées des fonctions « douces » car elles permettent d'avoir des évolutions légères en début et en fin d'interpolation. Les fonctions d'évolution relient un ratio d'entrée à un ratio de sortie, tous les deux exprimés comme des nombres (<a href="/fr/docs/Web/CSS/<number>"><code><number></code></a>). Pour ces valeurs, <code>0.0</code> représente l'état initial et <code>1.0</code> représente l'état final.</p> -<p>Le ratio de sortie peut être supérieur à 1.0 ou inférieur à 0.0. Cela entraînera l'animation « plus loin » que l'état final ou initial avant de revenir. Cela permettra de créer un effet de <em>rebondissement</em>.</p> +<p>Selon la fonction utilisée, la sortie calculée peut parfois être supérieure à <code>1.0</code> ou être inférieure à <code>0.0</code> pendant le cours de l'animation. Cela placera la valeur plus loin que son état final puis la fera revenir. Pour les animations de certaines propriétés (comme <a href="/fr/docs/Web/CSS/left"><code>left</code></a> ou <a href="/fr/docs/Web/CSS/right"><code>right</code></a>), cela crée un effet de rebond.</p> -<p>Toutefois, si la valeur de sortie correspondante est entrainée hors de son domaine de validité (par exemple une composante de couleur entraînée au-delà de 255), la valeur est ramenée à la valeur autorisée la plus proche (dans l'exemple : 255).</p> +<img src="tf_with_output_gt_than_1.png"> -<h2 class="cleared" id="Valeurs">Valeurs</h2> +<p>Toutefois, certaines propriétés restreindront la valeur de sortie au sein d'un intervalle acceptable. Ainsi, pour une valeur représentant la composante d'une couleur, celle-ci sera écrétée pour rester dans l'intervalle autorisé 0-255. Certaines courbes <code>cubic-bezier()</code> illustrent cette propriété.</p> -<div style="width: 100%;"> -<p>CSS prend en charge deux types de fonctions de temporisation :</p> +<img src="tf_with_output_gt_than_1_clipped.png"> -<ul> - <li>un sous-ensemble des courbes de Bézier cubiques</li> - <li>des fonctions en escalier.</li> -</ul> - -<p>Les plus utiles de ces fonctions sont également disponibles via un mot-clé qui permet de les décrire.</p> - -<h3 id="La_classe_de_fonctions_cubic-bezier()">La classe de fonctions <code>cubic-bezier()</code></h3> - -<p style="float: left;"><img src="/files/3433/cubic-bezier,%20example.png"></p> - -<p>La notation fonctionnelle <code>cubic-bezier()</code> définit <a href="https://fr.wikipedia.org/wiki/Courbe_de_Bézier">une courbe de Bézier cubique</a>. Ces courbes sont continues et sont généralement « douces » (peu de variations) au début et à la fin.</p> - -<p>Une courbe de Bézier cubique se définit par quatre points P<sub>0</sub>, P<sub>1</sub>, P<sub>2</sub>, et P<sub>3</sub>. P<sub>0</sub> et P<sub>3</sub> correspondent respectivement au début et à la fin de la courbe. En CSS, ces points sont fixes car les coordonnées des points expriment des ratios. P<sub>0</sub> est donc <code>(0, 0)</code> (instant initial et état initial) et P<sub>3</sub> est <code>(1, 1)</code> (instant final et état final).</p> +<h2 id="syntax">Syntaxe</h2> -<p>Tous les courbes de Bézier cubiques ne peuvent pas être utilisées comme des fonctions de temporisation. Certaines de ces courbes ne sont pas des <a href="https://fr.wikipedia.org/wiki/Fonction_(math%C3%A9matiques)">fonctions mathématiques</a> (c'est-à-dire des courbes qui n'ont qu'une valeur pour une abscisse donnée). P<sub>0</sub> et P<sub>3</sub> sont fixés par la définition CSS et une courbe de Bézier cubique est donc uniquement valide si et seulement si les abscisses des points P<sub>1</sub> et P<sub>2</sub> sont toutes les deux comprises dans l'intervalle <code>[0, 1]</code>.</p> +<p>Il existe trois types de <a href="#easing_functions">fonctions de transition</a> : linéaires, <a href="https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">courbes de Bézier cubiques</a> et les fonctions en escalier. Une valeur du type <code><easing-function></code> décrit la fonction de transition en utilisant l'un de ces trois types.</p> -<p>Les courbes de Bézier cubiques pour lesquelles les ordonnées de P<sub>1</sub> et/ou P<sub>2</sub> sont situées en dehors de l'intervalle <code>[0, 1]</code> génèreront un effet de rebondissement.</p> +<h3 id="fonctions_de_transition">Fonctions de transition</h3> -<p>Lorsqu'on définit une courbe de Bézier invalide en CSS via <code>cubic-bezier</code>, le moteur ignore la déclaration dans son intégralité.</p> -</div> - -<h4 id="Syntaxe">Syntaxe</h4> - -<pre class="syntaxbox">cubic-bezier(<em>x<sub>1</sub></em>, <em>y<sub>1</sub></em>, <em>x<sub>2</sub></em>, <em>y<sub>2</sub></em>) -</pre> +<p>CSS prend en charge trois sortes de fonction de transition : les fonctions linéaires, le sous ensemble des courbes cubiques de Bézier qui sont des fonctions et les fonctions en escalier. Les fonctions les plus utiles peuvent être facilement utilisées grâce à des mots-clés.</p> -<p>avec</p> - -<dl> - <dt><strong><em>x<sub>1</sub></em>, <em>y<sub>1</sub></em>, <em>x<sub>2</sub></em>, <em>y<sub>2</sub></em></strong></dt> - <dd>qui sont des valeurs de type {{cssxref("<number>")}} représentant les abscisses et les ordonnées des points P<sub>1</sub> et P<sub>2</sub> définissant la courbe de Bézier cubique. x<sub>1</sub> et x<sub>2</sub> doivent appartenir à l'intervalle [0, 1], sinon la valeur est considérée comme invalide.</dd> -</dl> +<h4 id="les_fonctions_de_transition_linéaires">Les fonctions de transition linéaires</h4> -<h4 id="Exemples">Exemples</h4> +<h5 id="linear">linear</h5> -<p>Voici des courbes de Bézier cubiques qui peuvent être utilisées en CSS :</p> +<img alt="Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une ligne diagonale droite par de l'origine 0 0 jusqu'à arriver à la position 1 1." src="cubic-bezier-linear.png"> -<pre class="brush: css">cubic-bezier(0.1, 0.7, 1.0, 0.1) +<p>L'interpolation se fait à évolution constante, du début jusqu'à la fin. Ce mot-clé représente la fonction de transition décrite par <code>cubic-bezier(0.0, 0.0, 1.0, 1.0)</code>.</p> -cubic-bezier(0, 0, 1, 1) - -/* Des valeurs négatives pour les ordonnées pour */ -/* créer du rebondissement */ -cubic-bezier(0.1, -0.6, 0.2, 0) - -/* Idem avec des valeurs > 1 */ -cubic-bezier(0, 1.1, 0.8, 4) </pre> - -<p>En revanche, ces définitions sont invalides :</p> - -<pre class="brush: css example-bad">/* Bien que le type de sortie puisse être une couleur */ -/* les courbes de Bézier fonctionnent avec des ratios */ -/* numériques */ -cubic-bezier(0.1, red, 1.0, green) - -/* Les abscisses doivent appartenir à l'intervalle [0, 1] */ -/* car sinon la courbe n'est pas une fonction temporelle. */ -cubic-bezier(2.45, 0.6, 4, 0.1) - -/* Il faut définir les deux points, il n'y a pas de valeur */ -/* par défaut. */ -cubic-bezier(0.3, 2.1) - -/* Les abscisses doivent appartenir à l'intervalle [0, 1] */ -/* car sinon la courbe n'est pas une fonction temporelle. */ -cubic-bezier(-1.9, 0.3, -0.2, 2.1) -</pre> +<h4 id="cubic-bezier">La classe des fonctions de transition cubic-bezier()</h4> -<h3 id="La_classe_de_fonction_steps()">La classe de fonction <code>steps()</code></h3> +<img alt="Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une ligne courbe par de l'origine jusqu'à atteindre la position 1 1. Le point à l'origine est appelé 'P₀ = (0, 0)'. En partant de l'origine, on a une poignée de Bézier intitulée 'P₁ = (0.075, 0.75)'. Le point aux coordonnées 1 1 est intitulé 'P₃ = (1, 1)'. En partant du point 1 1, on a une poignée de Bézier intitulée 'P₂ = (0.0875, 0.36)'." src="cubic-bezier-example.png"> -<p>La notation fonctionnelle <code>steps()</code> permet de définir <a href="https://en.wikipedia.org/wiki/Step_function">une fonction en escalier</a> qui découpe les valeurs de sortie en « marches » de même longueur. Chacune de ces marches correspondra à une étape de l'animation.</p> +<p>La notation fonctionnelle <code>cubic-bezier()</code> définit <a href="https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier#Courbes_de_B%C3%A9zier_cubiques">une courbe de Bézier cubique</a>. Ces courbes étant continues, elles sont souvent utilisées afin de démarrer et de finir progressivement une interpolation. Elles sont parfois appelées <em>fonctions de transition</em>.</p> -<p style="float: left;"><img src="/files/3436/steps(2,start).png" style="height: 332px; width: 248px;"></p> +<p>Une courbe de Bézier cubique est définie par quatre points P<sub>0</sub>, P<sub>1</sub>, P<sub>2</sub> et P<sub>3</sub>. P<sub>0</sub> et P<sub>3</sub> représentent les points de début et de fin de la courbe. Pour les fonctions de transition CSS, ces points sont fixes, car les coordonnées représentent des ratios (sur les abscisses, le ratio en temps et sur les ordonnées, le ratio en sortie). P<sub>0</sub> est donc situé en <code>(0, 0)</code> et représente l'état initial. P<sub>3</sub> est en <code>(1, 1)</code> et réprésente l'état final.</p> -<p><code>steps(2, start)</code></p> +<p>Toutes les courbes de Bézier cubiques ne sont pas des fonctions de transition, car toutes ne sont pas <a href="https://fr.wikipedia.org/wiki/Fonction_(math%C3%A9matiques)">des fonctions mathématiques</a> (c'est-à-dire des courbes qui, pour une abscisse donnée, ont une seule ou zéro valeur). Avec les contraintes imposées sur P<sub>0</sub> et P<sub>3</sub> en CSS, une courbe de Bézier cubique sera une fonction mathématique et pourra être utilisée comme fonction de transition, si et seulement si les abscisses de P<sub>1</sub> et P<sub>2</sub> appartiennent, tous les deux, à l'intervalle <code>[0, 1]</code>.</p> -<p style="float: left;"><img src="/files/3437/steps(4,end).png" style="height: 332px; width: 248px;"></p> +<p>Les courbes de Bézier cubiques pour lesquelles les ordonnées des points P<sub>1</sub> ou P<sub>2</sub> sont en dehors de l'intervalle <code>[0, 1]</code> pourront générer un effet de rebond.</p> -<p><code>steps(4, end)</code></p> +<p>Si on utilise une déclaration <code>cubic-bezier</code> avec une fonction invalide, CSS ignorera l'ensemble de la propriété.</p> -<h4 class="cleared" id="Syntaxe_2">Syntaxe</h4> +<h5 id="syntaxe_2">Syntaxe</h5> -<pre class="syntaxbox">steps(<em>nombre_de_marche</em>, <em>direction</em>) +<pre class="brush: css">cubic-bezier(<var>x<sub>1</sub></var>, <var>y<sub>1</sub></var>, <var>x<sub>2</sub></var>, <var>y<sub>2</sub></var>) </pre> -<p>avec</p> +<p>avec :</p> <dl> - <dt><code><strong><em>nombre_de_marche</em></strong></code></dt> - <dd>Un entier (valeur de type {{cssxref("<integer>")}} qui représente le nombre de marches composant la fonction en escalier.</dd> - <dt><code><strong><em>direction</em></strong></code></dt> - <dd>Un mot-clé qui indique si la fonction est continue à gauche ou continue à droite : - <ul> - <li><code>start</code> indique une fonction continue à gauche : la première marche se déroule à partir du début de l'animation</li> - <li><code>end</code> indique une fonction continue à droite : la dernière marche se déroule lors de la fin de l'animation.</li> - </ul> - <code>end</code> est la valeur par défaut.</dd> + <dt><strong><var>x<sub>1</sub></var>, <var>y<sub>1</sub></var>, <var>x<sub>2</sub></var>, <var>y<sub>2</sub></var></strong></dt> + <dd>Des valeurs numériques (<a href="/fr/docs/Web/CSS/<number>"><code><number></code></a>) qui représentent les abscisses et ordonnées des points P<sub>1</sub> et P<sub>2</sub> qui définissent la courbe de Bézier cubique. x<sub>1</sub> et x<sub>2</sub> doivent appartenir à l'intervalle [0, 1] afin que la valeur soit valide.</dd> </dl> -<h4 id="Exemples_2">Exemples</h4> +<h4 id="Keywords_for_common_cubic-bezier_easing_functions">Mots-clés pour les fonctions de transition communes</h4> -<p>Voici des exemples de fonction de temporisation en escalier valides :</p> +<h5 id="ease">ease</h5> -<pre class="brush: css">/* Il y a cinq marches et la dernière est utilisée */ -/* avant la fin de l'animation. */ -steps(5, end) +<p><img alt="Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une ligne courbe part de l'origine jusqu'au point 1 1 en démarrant rapidement et finissant par un arc plat." src="cubic-bezier-ease.png"></p> -/* Une fonction à deux marches dont la première se */ -/* déroule au début de l'animation. */ -steps(2, start) +<p>L'interpolation démarre doucement puis accélère vivement avant de ralentir vers la fin. Ce mot-clé représente la fonction de transition <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code>. Cette valeur est semblable à <a href="#ease-in-out"><code>ease-in-out</code></a>, bien qu'elle accélère plus rapidement au début.</p> -/* Le deuxième paramètre est facultatif. */ -steps(2) -</pre> +<h5 id="ease-in">ease-in</h5> -<p>En revanche, celles-ci sont invalides :</p> +<p><img alt="Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une courbe part l'origine jusqu'au point 1 1 avec une bonne partie de la courbe proche de l'origine et qui s'élève en quasi-ligne droite afin d'atteindre le point d'arrivée 1 1." src="cubic-bezier-ease-in.png"></p> -<pre class="brush: css example-bad">/* Le premier paramètre doit être un entier (type */ -/* <integer>) */ -steps(2.0, end) +<p>L'interpolation démarre lentement puis s'accélère progressivement jusqu'à la fin où elle s'arrête de façon abrutpe. Ce mot-clé représente la fonction de transition <code>cubic-bezier(0.42, 0.0, 1.0, 1.0)</code>.</p> -/* Le nombre d'étapes ne peut pas être négatif. */ -steps(-3, start) +<h5 id="ease-in-out"><code>ease-in-out</code></h5> -/* Il ne peut pas être nul.*/ -steps(0, end) -</pre> +<p><img alt="Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une ligne courbe qui part de l'origine jusqu'à atteindre le point 1 1. La courbe est symétrique et ressemble à un S étiré" src="cubic-bezier-ease-in-out.png"></p> -<h3 id="La_classe_de_fonction_frames()">La classe de fonction <code>frames()</code></h3> +<p>L'interpolation démarre lentement puis accélère avant de ralentir vers la fin. Ce mot-clé représente la fonction de transition <code>cubic-bezier(0.42, 0.0, 0.58, 1.0)</code>. Au début, elle se comporte comme <a href="#ease-in"><code>ease-in</code></a> et à la fin, elle se comporte comme <a href="#ease-out"><code>ease-out</code></a>.</p> -<div class="note"> -<p><strong>Note :</strong> Le nom "frames" est <a href="https://github.com/w3c/csswg-drafts/issues/1301">actuellement en discussion</a> et la classe de fonction associée est actuellement désactivée dans les versions finales des différents navigateurs tant qu'une décision n'a pas été prise.</p> -</div> +<h5 id="ease-out">ease-out</h5> -<p>La notation fonctionnelle <code>frames()</code> définit une fonction en escalier avec des intervalles (les marches) équidistantes. La différence difference entre <code>frames()</code> et <code>steps()</code> est que <code>frames()</code> considèrent l'état initial (0%) et final (100%) comme étant des paliers à part entière. Ces états sont donc affichés aussi longtemps que les autres intervalles.</p> +<p><img alt="Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une ligne courbe part de l'origine jusqu'à atteindre le point 1 1. Cette courbe démarre comme une ligne droite en diagonale puis se courbe progressivement à l'approche de 1 1." src="cubic-bezer-ease-out.png"></p> -<p><img src="https://www.w3.org/TR/css-timing-1/frames-timing-func-examples.svg" style="float: left; height: 200px; width: 244px;"><code>frames(2), frames(4)</code></p> +<p>L'interpolation démarre abruptement puis ralentit progressivement vers la fin. Ce mot-clé correspond à la fonction de transition <code>cubic-bezier(0.0, 0.0, 0.58, 1.0)</code>.</p> -<p> </p> +<h4 id="steps">Les fonctions de transition en escalier</h4> -<p> </p> +<p>La notation fonctionnelle <code>steps()</code> définit une fonction en escalier qui divise le domaine des valeurs de sorties en marches équidistantes.</p> -<h4 id="Syntaxe_3">Syntaxe</h4> +<h5 id="syntaxe_3">Syntaxe</h5> -<pre class="syntaxbox">steps(<var>nombre_etapes</var>) +<pre class="brush: css">steps(<var>nombre_de_marches</var>, <var>direction</var>) </pre> -<p>où :</p> +<p>avec :</p> <dl> - <dt><var>nombre_etapes</var></dt> - <dd>Est un entier ({{cssxref("<integer>")}}) strictement positif qui représente le nombre d'intervalles équidistants qui composent la fonction en escalier.</dd> + <dt><var>nombre_de_marches</var></dt> + <dd>Un entier (<a href="/fr/docs/Web/CSS/<integer>"><code><integer></code></a>) strictement positif qui représente le nombre de segments équidistants qui composent la fonction en escalier.</dd> + <dt><var>direction</var></dt> + <dd> + <p>Un mot-clé qui indique si la fonction est continue à gauche ou continue à droite :</p> + <ul> + <li><code>jump-start</code> indique une fonction continue à gauche : le premier saut a lieu au début de l'interpolation ;</li> + <li><code>jump-end</code> indique une fonction continue à droite : le dernier saut a lieu à la fin de l'interpolation ;</li> + <li><code>jump-both</code> indique une fonction continue à droite et à gauche avec des pauses au début et à la fin, ce qui se traduit par l'ajout d'une étape lors de l'itération de l'interpolation ;</li> + <li><code>jump-none</code> indique qu'il n'y a pas de saut au début ou à la fin mais une temporisation de 1/n de la durée totale à chaque extrêmité.</li> + <li><code>start</code> est équivalent à <code>jump-start</code></li> + <li><code>end</code> est équivalent à <code>jump-end</code></li> + </ul> + <p><code>end</code> est la valeur par défaut.</p> + </dd> </dl> -<h4 id="Exemples_3">Exemples</h4> +<h5 id="steps_n_<direction>">steps( n, <direction> )</h5> -<p>Ces fonctions de temporisation sont valides :</p> - -<pre class="brush: css">/* Le paramètre est un entier positif. */ -frames(10) -</pre> - -<div class="note"> -<p><strong>Note :</strong> <a href="https://mdn.github.io/css-examples/animation-frames-timing-function/index-transitions.html">une démo de la fonction <code>frames()</code> avec un exemple fonctionnel</a> est disponible sur notre dépôt GitHub.</p> -</div> - -<p>Ces fonctions de temporisation sont invalides :</p> +<ul> + <li> + <p><code>steps(2, jump-start)</code><br> + <code>steps(2, start)</code></p> + <img alt="Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Trois points sont affichés : le premier aux coordonnées 0 0, le deuxième aux coordonnées 0,5 0,5 et le troisième aux coordonnées 1 1. Les deuxième et troisième points sont le début de lignes horizontales qui partent vers la gauche sur 0,5 unités." src="steps-2-start.png"></li> + <li> + <p><code>steps(4, jump-end)<br> + steps(4, end)</code></p> + <img alt="Quatre marches avec un saut de la quatrième à la valeur située à la fin." src="steps-4-end.png"></li> + <li> + <p><code>steps(5, jump-none)</code></p> + <img alt="Cinq marches, sans saut : 20% de temps s'écoule à l'étape initiale et 20% de temps s'écoule à l'étape finale." src="step5none.png"></li> + <li> + <p><code>steps(3, jump-both)</code></p> + <img alt="Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Cinq points sont affichés, respectivement aux coordonnées 0 0, 0 0,25, 0,5 0,5, 0,75 0,75, 1 1. Les deuxième, troisième et quatrième points ont des lignes qui partent vers la droite sur 0,25 unités." src="step3both.png"></li> +</ul> -<pre class="brush: css example-bad">/* Le paramètre passé à la fonction doit être un entier - et pas une valeur décimale, même si cette dernière est - égale à un entier. */ -frames(2.0) +<h5 id="step-start">step-start</h5> + +<p><img alt="Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Deux points sont présents, le premier situé aux coordonnées 0 0 et le second aux coordonnées 1 1. Une ligne horizontale part du deuxième point vers l'axe Y." src="steps-1-start.png"> L'interpolation saute directement à l'état final et reste ainsi jusqu'à la fin. Ce mot-clé correspond à la fonction de transition <code>steps(1, jump-start)</code> ou <code>steps(1, start)</code>.</p> + +<h5 id="step-end">step-end</h5> + +<p><img alt="Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Deux points sont présents, le premier situé aux coordonnées 0 0 et le second aux coordonnées 1 1. Une ligne horizontale part du premier point et reste sur l'axe des abscisses." src="steps-1-end.png"> L'interpolation reste dans son état initial jusqu'à la fin où elle saute directement à l'état final. Ce mot-clé représente la fonction de transition <code>steps(1, jump-end)</code> ou <code>steps(1, end)</code>.</p> + +<h2 id="exemples">Exemples</h2> + +<h3 id="comparaison_des_fonctions_de_transition">Comparaison des fonctions de transition</h3> + +<p>Dans cet exemple, on crée une animation qui peut être démarrée ou stoppée à l'aide du bouton fourni et un menu est affiché pour choisir la fonction de transition à utiliser : différents mots-clés sont disponibles ainsi que des exemples utilisant <code>cubic-bezier()</code> et <code>steps()</code>. L'idée est de fournir un outil de comparaison simple entre ces fonctions.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div> + <div></div> +</div> +<ul> + <li> + <button class="animation-button">Démarrer l'animation</button> + </li> + <li> + <label for="easing-select">Choisir une fonction de transition :</label> + <select id="easing-select"> + <option selected>linear</option> + <option>ease</option> + <option>ease-in</option> + <option>ease-in-out</option> + <option>ease-out</option> + <option>cubic-bezier(0.1, -0.6, 0.2, 0)</option> + <option>cubic-bezier(0, 1.1, 0.8, 4)</option> + <option>steps(5, end)</option> + <option>steps(3, start)</option> + <option>steps(4)</option> + </select> + </li> +</ul></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">body > div { + position: relative; + height: 100px; +} + +div > div { + position: absolute; + width: 50px; + height: 50px; + background-color: blue; + background-image: radial-gradient(circle at 10px 10px, rgba(25,255,255,0.8),rgba(25,255,255,0.4)); + border-radius: 50%; + top: 25px; + animation: 1.5s infinite alternate; +} + +@keyframes move-right { + from { + left: 10%; + } + + to { + left: 90%; + } +} + +li { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 20px; +}</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">const selectElem = document.querySelector("select"); +const startBtn = document.querySelector("button"); +const divElem = document.querySelector("div > div"); + +startBtn.addEventListener("click", () => { + if(startBtn.textContent === "Démarrer l'animation") { + divElem.style.animationName = "move-right"; + startBtn.textContent = "Arrêter l'animation"; + divElem.style.animationTimingFunction = selectElem.value; + } else { + divElem.style.animationName = "unset"; + startBtn.textContent = "Démarrer l'animation"; + } +}); + +selectElem.addEventListener("change", () => { + divElem.style.animationTimingFunction = selectElem.value; +});</pre> + +<h4 id="résultat">Résultat</h4> + +<p>{{EmbedLiveSample('comparaison_des_fonctions_de_transition', '100%', 300)}}</p> + +<h3 id="exemples_avec_cubic-bezier">Exemples avec cubic-bezier()</h3> + +<p>Ces courbes de Bézier cubiques sont valides pour être utilisées en CSS :</p> + +<pre class="brush: css">/* La courbe de Bézier canonique avec quatre nombres dans l'intervalle [0,1]. */ +cubic-bezier(0.1, 0.7, 1.0, 0.1) + +/* On peut aussi utiliser des valeurs entières (<integer>) car ce sont des nombres. */ +cubic-bezier(0, 0, 1, 1) -/* Le nombre de frames doit être positif. */ -frames(-3) +/* Les valeurs négatives pour les ordonnées sont valides et créent un effet de rebond.*/ +cubic-bezier(0.1, -0.6, 0.2, 0) -/* Il doit y avoir au moins une frame. */ -frames(0) +/* Les valeurs supérieures à 1.0 pour les ordonnées sont aussi valides. */ +cubic-bezier(0, 1.1, 0.8, 4) </pre> -<h3 id="Mots-clés_pour_les_fonctions_de_temporisation_usuelles">Mots-clés pour les fonctions de temporisation usuelles</h3> +<p>Ces courbes de Bézier cubiques sont invalides en CSS :</p> -<h4 id="linear"><code>linear</code></h4> +<pre class="brush: css example-bad"> +/* Bien que les valeurs animées puissent être des couleurs, + les courbes de Bézier ne fonctionnent qu'avec des ratios numériques.*/ +cubic-bezier(0.1, red, 1.0, green) -<p><img src="/files/3425/cubic-bezier,linear.png" style="float: left; height: 332px; width: 249px;">Ce mot-clé représente la fonction de temporisation <code>cubic-bezier(</code><code>0.0, 0.0, 1.0, 1.0</code><code>)</code>. Cette fonction permet de passer de l'état initial à l'état final avec une vitesse constante.</p> +/* Les abscisses doivent être dans l'intervalle [0, 1] car sinon l'intervalle + couvert par la courbe n'est pas valide. */ +cubic-bezier(2.45, 0.6, 4, 0.1) -<h4 class="cleared" id="ease"><code>ease</code></h4> +/* Les deux points doivent être explicitement définis, il n'y a pas de valeur + par défaut. */ +cubic-bezier(0.3, 2.1) -<p><img src="/files/3429/cubic-bezier,ease.png" style="float: left; height: 332px; width: 244px;">Ce mot-clé représente la fonction de temporisation <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code>. Cette fonction est semblable à <code>ease-in-out</code> sauf qu'elle accélère plus rapidement au début et ralentit dès la moitié du parcours..</p> +/* Les abscisses doivent être dans l'intervalle [0, 1], sinon la courbe + ne représente pas une fonction du temps. */ +cubic-bezier(-1.9, 0.3, -0.2, 2.1) </pre> -<h4 class="cleared" id="ease-in"><code>ease-in</code></h4> +<h3 id="exemples_avec_steps">Exemples avec steps()</h3> -<p><img src="/files/3426/cubic-bezier,ease-in.png" style="float: left; height: 332px; width: 249px;">Ce mot-clé représente la fonction de temporisation <code>cubic-bezier(0.42, 0.0, 1.0, 1.0)</code>. L'animation démarre lentement puis accélère progressivement jusqu'à atteindre l'état final. Cela donne l'impression que l'animation s'arrête brutalement.</p> +<p>Ces fonctions de transition sont valides :</p> -<h4 class="cleared" id="ease-in-out"><code>ease-in-out</code></h4> +<pre class="brush: css"> +/* Il y a 5 étapes, la dernière se produit juste avant + la fin de l'animation. */ +steps(5, end) -<p><img src="/files/3428/cubic-bezier,ease-in-out.png" style="float: left; height: 332px; width: 244px;">Ce mot-clé représente la fonction de temporisation <code>cubic-bezier(</code><code>0.42, 0.0, 0.58, 1.0</code><code>)</code>. L'animation démarre lentement puis accélère progressivement avant de ralentir à nouveau à l'approche de l'état final. Dans la première phase, la courbe se comporte comme <code>ease-in</code> et dans la deuxième moitié, elle se comporte comme <code>ease-out</code>.</p> +/* Un escalier à deux marches, la première se produisant + au début de l'animation. */ +steps(2, start) -<h4 class="cleared" id="ease-out"><code>ease-out</code></h4> +/* Le deuxième paramètre est optionnel. */ +steps(2) +</pre> -<p><img src="/files/3427/cubic-bezer,ease-out.png" style="float: left; height: 332px; width: 249px;">Ce mot-clé représente la fonction de temporisation <code>cubic-bezier(</code><code>0.0, 0.0, 0.58, 1.0</code><code>)</code>. L'animation démarre rapidement puis ralentit progressivement avant d'atteindre son état final.</p> +<div class="notecard note"> + <p><strong>Note :</strong> Si l'animation contient plusieurs arrêts, les marches décrites dans la fonction <code>steps()</code> s'appliqueront à chaque section. Ainsi, pour une animation avec trois segments et <code>steps(2)</code>, on aura au total 6 étapes, 2 pour chaque segment.</p> +</div> -<h4 class="cleared" id="step-start"><code>step-start</code></h4> +<p>Les fonctions de transitions qui suivent sont invalides :</p> -<p><img src="/files/3423/steps(1,start).png" style="float: left; height: 332px; width: 248px;">Ce mot-clé représente la fonction de temporisation <code>steps(1, start)</code> (ou <code>steps(1, jump-start)</code>). Avec cette fonction, l'animation passe directement à l'état final dès le début et conserve cet état jusqu'à la fin de l'animation.</p> +<pre class="brush: css example-bad"> +/* Le premier paramètre doit être un entier et ne peut pas être + une valeur décimale (même si celle-ci est égale à une valeur entière). */ +steps(2.0, jump-end) -<h4 class="cleared" id="step-end"><code>step-end</code></h4> +/* La quantité de marches ne doit pas être négative. */ +steps(-3, start) -<p><img src="/files/3424/steps(1,end).png" style="float: left; height: 332px; width: 248px;">Ce mot-clé représente la fonction de temporisation <code>steps(1, end)</code> (ou <code>steps(1, jump-end)</code>). Avec cette fonction, l'animation reste dans son état initial tout le long de la durée et passe directement à la position finale à la toute fin.</p> +/* Il doit y avoir au moins une marche.*/ +steps(0, jump-none)</pre> -<h2 class="cleared" id="Spécifications">Spécifications</h2> +<h2 id="spécifications">Spécifications</h2> <table class="standard-table"> <thead> @@ -249,26 +317,21 @@ frames(0) </thead> <tbody> <tr> - <td>{{SpecName('CSS3 Transitions', '#transition-timing-function', '<timing-function>')}}</td> - <td>{{Spec2('CSS3 Transitions')}}</td> + <td>{{SpecName('CSS Easing 1', '#typedef-easing-function', '<easing-function>')}}</td> + <td>{{Spec2('CSS Easing 1')}}</td> <td>Définition initiale.</td> </tr> - <tr> - <td>{{SpecName('CSS3 Animations', '#animation-timing-function', '<timing-function>')}}</td> - <td>{{Spec2('CSS3 Animations')}}</td> - <td>Définition de <code><single-timing-function></code> comme synonyme de <code><single-transition-timing-function></code> selon le module CSS pour les transitions.</td> - </tr> </tbody> </table> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<h2 id="compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>{{Compat("css.types.timing-function", 2)}}</p> +<p>{{Compat("css.types.easing-function", 2)}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="voir_aussi">Voir aussi</h2> <ul> - <li>Les propriétés {{cssxref("transition-timing-function")}} et {{cssxref("animation-timing-function")}} qui utilisent une valeur de type <code><timing-function></code></li> - <li><a href="/fr/docs/Web/CSS/Animations_CSS">Les animations CSS</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Transitions">Les transitions CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Animations">CSS Animations</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Transitions">CSS Transitions</a></li> + <li><a href="https://cubic-bezier.com/">cubic-bezier</a></li> </ul> diff --git a/files/fr/web/css/element()/index.html b/files/fr/web/css/element()/index.html index 79ceb799cc..a0f0f92cc2 100644 --- a/files/fr/web/css/element()/index.html +++ b/files/fr/web/css/element()/index.html @@ -17,7 +17,7 @@ translation_of: Web/CSS/element() <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">element(<var>id</var>)</pre> +<pre class="syntaxbox">element(<var>id</var>)</pre> <h3 id="Paramètres">Paramètres</h3> @@ -32,7 +32,7 @@ translation_of: Web/CSS/element() <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">.exemple { +<pre class="brush: css">.exemple { width: 400px; height: 400px; background: -moz-element(#monArrierePlan) no-repeat; @@ -58,7 +58,7 @@ translation_of: Web/CSS/element() <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><div class="exemple"> +<pre class="brush: html"><div class="exemple"> <p> Cet élément utilise l'élément #monArrierePlan comme image @@ -85,7 +85,7 @@ translation_of: Web/CSS/element() <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">.exemple { +<pre class="brush: css">.exemple { width: 400px; height: 100px; background: -moz-element(#monArrierePlan); @@ -98,7 +98,7 @@ translation_of: Web/CSS/element() <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><div class="exemple"></div> +<pre class="brush: html"><div class="exemple"></div> <div class="cache"> <button id="monArrierePlan" type="button"> diff --git a/files/fr/web/css/empty-cells/index.html b/files/fr/web/css/empty-cells/index.html index 13447bc517..dc25ad57ab 100644 --- a/files/fr/web/css/empty-cells/index.html +++ b/files/fr/web/css/empty-cells/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/empty-cells <div>{{EmbedInteractiveExample("pages/css/empty-cells.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété est uniquement appliquée lorsque <code>border-collapse</code> vaut <code>separate</code>.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/env()/index.html b/files/fr/web/css/env()/index.html index af2aa40afa..d155dcdd77 100644 --- a/files/fr/web/css/env()/index.html +++ b/files/fr/web/css/env()/index.html @@ -16,7 +16,7 @@ translation_of: Web/CSS/env() <p><code>env()</code> peut être utilisée aux endroits où on souhaite remplacer la valeur, à la façon de la fonction <code><a href="/fr/docs/Web/CSS/var()">var()</a></code>.</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) @@ -26,13 +26,13 @@ translation_of: Web/CSS/env() <p>La fonction <code>env()</code> peut être utilisée à n'importe quel endroit où une valeur peut être associée à une propriété, à n'importe quel endroit où une valeur peut être utilisée dans un descripteur d'une règle @ (ex. dans une <a href="/fr/docs/Web/CSS/@media">requête média</a>) et, de façon générale, à n'importe quel endroit où les valeurs CSS sont autorisées. Selon les évolutions de la spécification, cette fonction pourrait également être utilisées à d'autres endroits comme les sélecteurs.</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Les variables d'environnement furent initialement fournies par le navigateur iOS afin de permettre aux développeurs de placer le contenu sur une zone sûre de la zone d'affichage (<em>viewport</em>) et d'éviter le décrochement formé en haut de l'écran sur certains des appareils.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush: css notranslate">/* Utilisation des quatre zones sûres */ +<pre class="brush: css">/* Utilisation des quatre zones sûres */ env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) @@ -48,11 +48,11 @@ env(safe-area-inset-left, 1.4rem); <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><code id="safe-area-inset-top" style="white-space: nowrap;">safe-area-inset-top</code>, <code id="safe-area-inset-right" style="white-space: nowrap;">safe-area-inset-right</code>, <code id="safe-area-inset-bottom" style="white-space: nowrap;">safe-area-inset-bottom</code>, <code id="safe-area-inset-left" style="white-space: nowrap;">safe-area-inset-left</code></dt> + <dt><code>safe-area-inset-top</code>, <code>safe-area-inset-right</code>, <code>safe-area-inset-bottom</code>, <code>safe-area-inset-left</code></dt> <dd>Ces mots-clés sont des variables d'environnement qui définissent un rectangle avec les décalages par rapport à chacun des côtés de la zone d'affichage (<em>viewport</em>) dans lequel on pourra placer du contenu sans que ce dernier puisse être rogné du fait de la forme non rectangulaire de l'affichage.</dd> </dl> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> À la différence des autres propriétés CSS, les identifiants provenant de l'agent utilisateur sont sensibles à la casse.</p> </div> @@ -66,7 +66,7 @@ env(safe-area-inset-left, 1.4rem); <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> Si la fonction <code>env()</code> est prise en charge dans votre navigateur, le texte de ce paragraphe aura 50 pixels de padding avec la bordure gauche mais pas la droite / basse et haute. @@ -77,7 +77,7 @@ env(safe-area-inset-left, 1.4rem); <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 300px; border: 2px solid red; padding: @@ -93,7 +93,7 @@ env(safe-area-inset-left, 1.4rem); <h3 id="Exemples_de_valeurs">Exemples de valeurs</h3> -<pre class="brush: css notranslate">/* zéro pour les agents utilisateurs rectangulaires */ +<pre class="brush: css">/* zéro pour les agents utilisateurs rectangulaires */ padding: env(safe-area-inset-bottom, 50px); /* 50px car les propriétés de l'agent sont sensibles à la casse */ @@ -110,7 +110,7 @@ padding: env(x, 50px, 20px); <p>Pour la deuxième valeur, il est possible d'utiliser des virgules afin de fournir un ensemble composite de valeurs à la propriété. Toutefois, si la propriété en question ne permet pas de gérer plusieurs valeurs, la déclaration sera invalide.</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Les propriétés relatives à l'agent utilisateur ne sont pas réinitialisées avec la propriété {{cssxref("all")}}.</p> </div> diff --git a/files/fr/web/css/filter-function/blur()/index.html b/files/fr/web/css/filter-function/blur()/index.html index ae64a917d5..c181809d64 100644 --- a/files/fr/web/css/filter-function/blur()/index.html +++ b/files/fr/web/css/filter-function/blur()/index.html @@ -14,11 +14,9 @@ translation_of: Web/CSS/filter-function/blur() <div>{{EmbedInteractiveExample("pages/css/function-blur.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">blur(<em>rayon</em>)</pre> +<pre class="syntaxbox">blur(<em>rayon</em>)</pre> <h3 id="Paramètres">Paramètres</h3> @@ -29,7 +27,7 @@ translation_of: Web/CSS/filter-function/blur() <h2 id="Exemples">Exemples</h2> -<pre class="brush: css notranslate">blur(0); /* Aucun effet */ +<pre class="brush: css">blur(0); /* Aucun effet */ blur(8px); /* Un flou avec un rayon de 8px */ blur(1.17rem); /* Un flou avec un rayon de 1.17rem */</pre> diff --git a/files/fr/web/css/filter-function/brightness()/index.html b/files/fr/web/css/filter-function/brightness()/index.html index d06071ac24..3d3b983c25 100644 --- a/files/fr/web/css/filter-function/brightness()/index.html +++ b/files/fr/web/css/filter-function/brightness()/index.html @@ -14,11 +14,9 @@ translation_of: Web/CSS/filter-function/brightness() <div>{{EmbedInteractiveExample("pages/css/function-brightness.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">brightness(<em>multiplicateur</em>)</pre> +<pre class="syntaxbox">brightness(<em>multiplicateur</em>)</pre> <h3 id="Paramètres">Paramètres</h3> @@ -29,7 +27,7 @@ translation_of: Web/CSS/filter-function/brightness() <h2 id="Exemples">Exemples</h2> -<pre class="brush: css notranslate">brightness(0%) /* Complètement noir */ +<pre class="brush: css">brightness(0%) /* Complètement noir */ brightness(0.4) /* 40% de la clarté */ brightness(1) /* Aucun effet */ brightness(200%) /* Double la clarté */</pre> diff --git a/files/fr/web/css/filter-function/contrast()/index.html b/files/fr/web/css/filter-function/contrast()/index.html index 714787a110..84c66f25d3 100644 --- a/files/fr/web/css/filter-function/contrast()/index.html +++ b/files/fr/web/css/filter-function/contrast()/index.html @@ -14,11 +14,9 @@ translation_of: Web/CSS/filter-function/contrast() <div>{{EmbedInteractiveExample("pages/css/function-contrast.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">contrast(<em>multiplicateur</em>)</pre> +<pre class="syntaxbox">contrast(<em>multiplicateur</em>)</pre> <h3 id="Paramètres">Paramètres</h3> @@ -29,7 +27,7 @@ translation_of: Web/CSS/filter-function/contrast() <h2 id="Exemples">Exemples</h2> -<pre class="brush: css notranslate">contrast(0); /* Completely gray */ +<pre class="brush: css">contrast(0); /* Completely gray */ contrast(65%); /* 65% contrast */ contrast(1); /* No effect */ contrast(200%); /* Double contrast */</pre> diff --git a/files/fr/web/css/filter-function/drop-shadow()/index.html b/files/fr/web/css/filter-function/drop-shadow()/index.html index 51b2288aac..a39ea431ef 100644 --- a/files/fr/web/css/filter-function/drop-shadow()/index.html +++ b/files/fr/web/css/filter-function/drop-shadow()/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/filter-function/drop-shadow() <div>{{EmbedInteractiveExample("pages/css/function-drop-shadow.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>En pratique, une ombre portée correspond à une version floutée et décalée du masque alpha de l'image, dessiné dans une couleur donnée et fusionné sous l'image.</p> <div class="note"> @@ -24,7 +22,7 @@ translation_of: Web/CSS/filter-function/drop-shadow() <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">drop-shadow(<em>décalage-x</em>, <em>décalage-y</em>, <em>rayon-flou</em>, <em>rayon-étalement</em>, <em>couleur</em>)</pre> +<pre class="syntaxbox">drop-shadow(<em>décalage-x</em>, <em>décalage-y</em>, <em>rayon-flou</em>, <em>rayon-étalement</em>, <em>couleur</em>)</pre> <p>La fonction <code>drop-shadow()</code> accepte un paramètre de type <code><shadow></code> (défini avec la propriété {{cssxref("box-shadow")}}), mais où le mot-clé <code>inset</code> n'est pas autorisé.</p> @@ -36,9 +34,9 @@ translation_of: Web/CSS/filter-function/drop-shadow() <dt><code>rayon-flou</code> {{optional_inline}}</dt> <dd>Une longueur ({{cssxref("<length>")}}) qui représente le rayon du flou. Plus la valeur est élevée, plus l'ombre sera grande et floue. La valeur par défaut est <code>0</code> ce qui correspond à un contour net, sans flou. Il n'est pas possible d'utiliser des valeurs négatives</dd> <dt><code>rayon-étalement</code>{{optional_inline}}</dt> - <dd>Le rayon d'étalement de l'ombre, défini sous la forme d'une longueur ({{cssxref("<length>")}}). Les valeurs positives permettent d'avoir une ombre plus grande et plus étendue et les valeurs négatives permettent de réduire la zone d'ombre. La valeur par défaut est <code>0</code> : l'ombre a alors la même taille que l'image.</dd> - <dd> - <div class="warning"><strong>Attention !</strong> Chrome et Safari (basés sur WebKit) ne prennent pas en charge ce paramètre. S'il est utilisé, l'effet ne sera pas applique du tout.</div> + <dd>Le rayon d'étalement de l'ombre, défini sous la forme d'une longueur ({{cssxref("<length>")}}). Les valeurs positives permettent d'avoir une ombre plus grande et plus étendue et les valeurs négatives permettent de réduire la zone d'ombre. La valeur par défaut est <code>0</code> : l'ombre a alors la même taille que l'image. + <div class="warning"> + <p><strong>Attention :</strong> Chrome et Safari (basés sur WebKit) ne prennent pas en charge ce paramètre. S'il est utilisé, l'effet ne sera pas applique du tout.</p></div> </dd> <dt><code>couleur</code>{{optional_inline}}</dt> <dd>La couleur de l'ombre, indiquée sous la forme d'une valeur {{cssxref("<color>")}}. La valeur par défaut dépend du navigateur. Pour Firefox et Internet Explorer, c'est la valeur de la propriété {{cssxref("color")}} qui sera utilisée alors que les navigateurs basés sur WebKit utiliseront une ombre transparente par défaut.</dd> @@ -46,7 +44,7 @@ translation_of: Web/CSS/filter-function/drop-shadow() <h2 id="Exemples">Exemples</h2> -<pre class="brush: css notranslate">/* Une ombre noire avec un flou de 10px de rayon. */ +<pre class="brush: css">/* Une ombre noire avec un flou de 10px de rayon. */ drop-shadow(16px 16px 10px black) /* Une ombre rouge avec un flou de 1rem de rayon et de .3rem d'étalement */ diff --git a/files/fr/web/css/filter-function/grayscale()/index.html b/files/fr/web/css/filter-function/grayscale()/index.html index f469d4e70d..90c6abfb8e 100644 --- a/files/fr/web/css/filter-function/grayscale()/index.html +++ b/files/fr/web/css/filter-function/grayscale()/index.html @@ -14,11 +14,9 @@ translation_of: Web/CSS/filter-function/grayscale() <div>{{EmbedInteractiveExample("pages/css/function-grayscale.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">grayscale(<em>multiplicateur</em>)</pre> +<pre class="syntaxbox">grayscale(<em>multiplicateur</em>)</pre> <h3 id="Paramètres">Paramètres</h3> @@ -29,7 +27,7 @@ translation_of: Web/CSS/filter-function/grayscale() <h2 id="Exemples">Exemples</h2> -<pre class="brush: css notranslate">grayscale(0) /* Aucun effet */ +<pre class="brush: css">grayscale(0) /* Aucun effet */ grayscale(.7) /* Converti à 70% en niveaux de gris */ grayscale(100%) /* Uniquement en niveaux de gris */</pre> diff --git a/files/fr/web/css/filter-function/hue-rotate()/index.html b/files/fr/web/css/filter-function/hue-rotate()/index.html index 051c35b96b..b6d4eb4938 100644 --- a/files/fr/web/css/filter-function/hue-rotate()/index.html +++ b/files/fr/web/css/filter-function/hue-rotate()/index.html @@ -14,11 +14,9 @@ translation_of: Web/CSS/filter-function/hue-rotate() <div>{ {EmbedInteractiveExample("pages/css/function-hue-rotate.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">hue-rotate(<em>angle</em>)</pre> +<pre class="syntaxbox">hue-rotate(<em>angle</em>)</pre> <h3 id="Paramètres">Paramètres</h3> @@ -29,7 +27,7 @@ translation_of: Web/CSS/filter-function/hue-rotate() <h2 id="Exemples">Exemples</h2> -<pre class="brush: css notranslate">hue-rotate(-90deg); /* Correspond à une rotation de 270deg */ +<pre class="brush: css">hue-rotate(-90deg); /* Correspond à une rotation de 270deg */ hue-rotate(0deg); /* Sans effet */ hue-rotate(90deg); /* Rotation de 90deg */ hue-rotate(.5turn); /* Rotation de 180deg */ diff --git a/files/fr/web/css/filter-function/invert()/index.html b/files/fr/web/css/filter-function/invert()/index.html index 25a034fdd1..040d4f17b6 100644 --- a/files/fr/web/css/filter-function/invert()/index.html +++ b/files/fr/web/css/filter-function/invert()/index.html @@ -14,11 +14,9 @@ translation_of: Web/CSS/filter-function/invert() <div>{{EmbedInteractiveExample("pages/css/function-invert.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">invert(<em>multiplicateur</em>)</pre> +<pre class="syntaxbox">invert(<em>multiplicateur</em>)</pre> <h3 id="Paramètres">Paramètres</h3> @@ -29,7 +27,7 @@ translation_of: Web/CSS/filter-function/invert() <h2 id="Exemples">Exemples</h2> -<pre class="brush: css notranslate">invert(0); /* Aucun effet */ +<pre class="brush: css">invert(0); /* Aucun effet */ invert(.6); /* Inversion à 60% */ invert(100%); /* Négatif de l'image originale */</pre> diff --git a/files/fr/web/css/filter-function/opacity()/index.html b/files/fr/web/css/filter-function/opacity()/index.html index 6518f7b998..5bea0891bf 100644 --- a/files/fr/web/css/filter-function/opacity()/index.html +++ b/files/fr/web/css/filter-function/opacity()/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/filter-function/opacity() <div>{ {EmbedInteractiveExample("pages/css/function-opacity.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> Cette fonction est proche de la propriété {{cssxref("opacity")}} mais, selon le navigateur, les filtres CSS peuvent bénéficier de l'accélération matérielle pour de meilleures performances.</p> </div> diff --git a/files/fr/web/css/filter-function/saturate()/index.html b/files/fr/web/css/filter-function/saturate()/index.html index 4d5e6ac851..148cb8c934 100644 --- a/files/fr/web/css/filter-function/saturate()/index.html +++ b/files/fr/web/css/filter-function/saturate()/index.html @@ -14,11 +14,9 @@ translation_of: Web/CSS/filter-function/saturate() <div>{{EmbedInteractiveExample("pages/css/function-saturate.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">saturate(<em>multiplicateur</em>)</pre> +<pre class="syntaxbox">saturate(<em>multiplicateur</em>)</pre> <h3 id="Paramètres">Paramètres</h3> @@ -29,7 +27,7 @@ translation_of: Web/CSS/filter-function/saturate() <h2 id="Exemples">Exemples</h2> -<pre class="brush: css notranslate">saturate(0); /* Complètement sous-saturée */ +<pre class="brush: css">saturate(0); /* Complètement sous-saturée */ saturate(.4); /* Sous-saturée à 40% */ saturate(100%); /* Aucun effet */ saturate(200%); /* Saturation doublée */</pre> diff --git a/files/fr/web/css/filter-function/sepia()/index.html b/files/fr/web/css/filter-function/sepia()/index.html index b6e0b21e8d..993dba725f 100644 --- a/files/fr/web/css/filter-function/sepia()/index.html +++ b/files/fr/web/css/filter-function/sepia()/index.html @@ -14,11 +14,9 @@ translation_of: Web/CSS/filter-function/sepia() <div>{{EmbedInteractiveExample("pages/css/function-sepia.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">sepia(<em>multiplicateur</em>)</pre> +<pre class="syntaxbox">sepia(<em>multiplicateur</em>)</pre> <h3 id="Paramètres">Paramètres</h3> @@ -29,7 +27,7 @@ translation_of: Web/CSS/filter-function/sepia() <h2 id="Exemples">Exemples</h2> -<pre class="brush: css notranslate">sepia(0); /* Aucun effet */ +<pre class="brush: css">sepia(0); /* Aucun effet */ sepia(.65); /* 65% de sépia */ sepia(100%); /* Complètement sépia */</pre> diff --git a/files/fr/web/css/filter/index.html b/files/fr/web/css/filter/index.html index dddd7e82a6..ac1de9b8e8 100644 --- a/files/fr/web/css/filter/index.html +++ b/files/fr/web/css/filter/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/filter <div>{{EmbedInteractiveExample("pages/css/filter.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css">/* URL vers un filtre SVG */ @@ -101,8 +99,7 @@ img { <pre class="brush: css">filter: blur(5px) </pre> -<div id="blur_example" class="hidden"> -<pre class="brush: html"> <table class="standard-table"> +<pre class="brush: html hidden"> <table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">Original image</th> @@ -126,7 +123,7 @@ img { </tbody> </table></pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { height:100%; } body { @@ -168,18 +165,17 @@ table.standard-table td { height:100%; } </pre> -</div> -<pre class="brush: html line-numbers language-html"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: svg"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"> <feGaussianBlur in="SourceGraphic" stdDeviation="5"/> </filter> </svg></pre> -<p>{{EmbedLiveSample('blur_example','100%','236px','')}}</p> +<p>{{EmbedLiveSample('blur','100%','236px','')}}</p> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Voir {{cssxref("filter-function/blur", "blur()")}} pour plus d'informations.</p> +<div class="note"> +<p><strong>Note :</strong> Voir {{cssxref("filter-function/blur()", "blur()")}} pour plus d'informations.</p> </div> <h3 id="brightness"><code>brightness()</code></h3> @@ -188,7 +184,7 @@ table.standard-table td { <pre class="brush: css">filter: brightness(0.5)</pre> -<pre class="brush: html line-numbers language-html"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: svg"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> <filter id="brightness"> <feComponentTransfer> <feFuncR type="linear" slope="[amount]"/> @@ -198,8 +194,7 @@ table.standard-table td { </filter> </svg></pre> -<div id="brightness_example" class="hidden"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html hidden"><table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">Original image</th> @@ -228,7 +223,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { height:100%; } body { @@ -272,12 +267,11 @@ table.standard-table td { height:100%; } </pre> -</div> -<p>{{EmbedLiveSample('brightness_example','100%','231px','')}}</p> +<p>{{EmbedLiveSample('brightness','100%','231px','')}}</p> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Voir {{cssxref("filter-function/brightness", "brightness()")}} pour plus d'informations.</p> +<div class="note"> +<p><strong>Note :</strong> Voir {{cssxref("filter-function/brightness()", "brightness()")}} pour plus d'informations.</p> </div> <h3 id="contrast"><code>contrast()</code></h3> @@ -287,7 +281,7 @@ table.standard-table td { <pre class="brush: css">filter: contrast(200%) </pre> -<pre class="brush: html line-numbers language-html"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: svg"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> <filter id="contrast"> <feComponentTransfer> <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> @@ -297,8 +291,7 @@ table.standard-table td { </filter> </svg></pre> -<div id="contrast_example" class="hidden"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html hidden"><table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">Original image</th> @@ -327,7 +320,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { height:100%; } body { @@ -371,12 +364,11 @@ table.standard-table td { height:100%; } </pre> -</div> -<p>{{EmbedLiveSample('contrast_example','100%','203px','')}}</p> +<p>{{EmbedLiveSample('contrast','100%','203px','')}}</p> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Voir {{cssxref("filter-function/contrast", "contrast()")}} pour plus d'informations.</p> +<div class="note"> +<p><strong>Note :</strong> Voir {{cssxref("filter-function/contrast()", "contrast()")}} pour plus d'informations.</p> </div> <h3 id="drop-shadow"><code>drop-shadow()</code></h3> @@ -390,15 +382,14 @@ table.standard-table td { <dt><code><blur-radius></code> <small>(optionnel)</small></dt> <dd>Une troisième valeur de type {{cssxref("<length>")}}. Plus la valeur sera grande, plus le flou sera important (l'ombre sera plus grande et moins prononcée). Les valeurs négatives ne sont pas autorisée. La valeur par défaut est <code>0</code>, le bord de l'ombre sera droit.</dd> <dt><code><spread-radius></code> <small>(optionnel)</small></dt> - <dd>Un quatrième valeur de type {{cssxref("<length>")}}. Des valeurs positives agrandiront l'ombre et les valeurs négatives réduiront l'ombre. La valeur par défaut est <code>0</code> (l'ombre aura la même taille que l'élément). </dd> - <dd>Note: Webkit, and maybe other browsers, do not support this 4th length; it will not render if added.</dd> + <dd>Un quatrième valeur de type {{cssxref("<length>")}}. Des valeurs positives agrandiront l'ombre et les valeurs négatives réduiront l'ombre. La valeur par défaut est <code>0</code> (l'ombre aura la même taille que l'élément). Note: Webkit, and maybe other browsers, do not support this 4th length; it will not render if added.</dd> <dt><code><color></code> <small>(optionnel)</small></dt> <dd>Voir {{cssxref("<color>")}} pour les mots-clés et notations possibles. Si ce paramètre n'est pas défini, la couleur choisie dépendra du navigateur. Pour Gecko (Firefox), Presto (Opera) et Trident (Internet Explorer), la valeur de la propriété {{cssxref("color")}} est utilisée. Pour WebKit, si la couleur est absente, l'ombre sera transparente (donc inutile).</dd> </dl> <pre class="brush: css">filter: drop-shadow(16px 16px 10px black)</pre> -<pre class="brush: html line-numbers language-html"><svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: svg"><svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"> <filter id="drop-shadow"> <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/> <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/> @@ -411,8 +402,7 @@ table.standard-table td { </filter> </svg></pre> -<div id="shadow_example" class="hidden"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html hidden"><table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">Original image</th> @@ -462,7 +452,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { height:100%; } body { @@ -519,12 +509,11 @@ table.standard-table td { height:100%; } </pre> -</div> -<p>{{EmbedLiveSample('shadow_example','100%','300px','')}}</p> +<p>{{EmbedLiveSample('drop-shadow','100%','300px','')}}</p> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Voir {{cssxref("filter-function/drop-shadow", "drop-shadow()")}} pour plus d'informations.</p> +<div class="note"> +<p><strong>Note :</strong> Voir {{cssxref("filter-function/drop-shadow()", "drop-shadow()")}} pour plus d'informations.</p> </div> <h3 id="grayscale"><code>grayscale()</code></h3> @@ -533,8 +522,7 @@ table.standard-table td { <pre class="brush: css">filter: grayscale(100%)</pre> -<div id="grayscale_example" class="hidden"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html hidden"><table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">Original image</th> @@ -563,7 +551,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { height:100%; } body { @@ -607,12 +595,11 @@ table.standard-table td { height:100%; } </pre> -</div> -<p>{{EmbedLiveSample('grayscale_example','100%','209px','')}}</p> +<p>{{EmbedLiveSample('grayscale','100%','209px','')}}</p> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Voir {{cssxref("filter-function/grayscale", "grayscale()")}} pour plus d'informations.</p> +<div class="note"> +<p><strong>Note :</strong> Voir {{cssxref("filter-function/grayscale()", "grayscale()")}} pour plus d'informations.</p> </div> <h3 id="hue-rotate"><code>hue-rotate()</code></h3> @@ -621,8 +608,7 @@ table.standard-table td { <pre class="brush: css">filter: hue-rotate(90deg)</pre> -<div id="huerotate_example" class="hidden"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html hidden"><table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">Original image</th> @@ -648,7 +634,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { height:100%; } body { @@ -700,10 +686,10 @@ table.standard-table td { <filter /> </svg></pre> -<p>{{EmbedLiveSample('huerotate_example','100%','221px','')}}</p> +<p>{{EmbedLiveSample('hue-rotate','100%','221px','')}}</p> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Voir {{cssxref("filter-function/hue-rotate", "hue-rotate()")}} pour plus d'informations.</p> +<div class="note"> +<p><strong>Note :</strong> Voir {{cssxref("filter-function/hue-rotate()", "hue-rotate()")}} pour plus d'informations.</p> </div> <h3 id="invert"><code>invert()</code></h3> @@ -712,8 +698,7 @@ table.standard-table td { <pre class="brush: css">filter: invert(100%)</pre> -<div id="invert_example" class="hidden"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html hidden"><table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">Original image</th> @@ -742,7 +727,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { height:100%; } body { @@ -786,12 +771,11 @@ table.standard-table td { height:100%; } </pre> -</div> -<p>{{EmbedLiveSample('invert_example','100%','407px','')}}</p> +<p>{{EmbedLiveSample('invert','100%','407px','')}}</p> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Voir {{cssxref("filter-function/invert", "invert()")}} pour plus d'informations.</p> +<div class="note"> +<p><strong>Note :</strong> Voir {{cssxref("filter-function/invert()", "invert()")}} pour plus d'informations.</p> </div> <h3 id="opacity"><code>opacity()</code></h3> @@ -800,8 +784,7 @@ table.standard-table td { <pre class="brush: css">filter: opacity(50%)</pre> -<div id="opacity_example" class="hidden"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html hidden"><table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">Original image</th> @@ -828,7 +811,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { height:100%; } body { @@ -872,12 +855,11 @@ table.standard-table td { height:100%; } </pre> -</div> -<p>{{EmbedLiveSample('opacity_example','100%','210px','')}}</p> +<p>{{EmbedLiveSample('opacity','100%','210px','')}}</p> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Voir {{cssxref("filter-function/opacity", "opacity()")}} pour plus d'informations.</p> +<div class="note"> +<p><strong>Note :</strong> Voir {{cssxref("filter-function/opacity()", "opacity()")}} pour plus d'informations.</p> </div> <h3 id="saturate"><code>saturate()</code></h3> @@ -886,8 +868,7 @@ table.standard-table td { <pre class="brush: css">filter: saturate(200%)</pre> -<div id="saturate_example" class="hidden"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html hidden"><table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">Original image</th> @@ -913,7 +894,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { height:100%; } body { @@ -957,12 +938,11 @@ table.standard-table td { height:100%; } </pre> -</div> -<p>{{EmbedLiveSample('saturate_example','100%','332px','')}}</p> +<p>{{EmbedLiveSample('saturate','100%','332px','')}}</p> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Voir {{cssxref("filter-function/saturate", "saturate()")}} pour plus d'informations.</p> +<div class="note"> +<p><strong>Note :</strong> Voir {{cssxref("filter-function/saturate()", "saturate()")}} pour plus d'informations.</p> </div> <h3 id="sepia"><code>sepia()</code></h3> @@ -971,8 +951,7 @@ table.standard-table td { <pre class="brush: css">filter: sepia(100%)</pre> -<div id="sepia_example" class="hidden"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html hidden"><table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">Original image</th> @@ -1001,7 +980,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { height:100%; } body { @@ -1045,12 +1024,11 @@ table.standard-table td { height:100%; } </pre> -</div> -<p>{{EmbedLiveSample('sepia_example','100%','229px','')}}</p> +<p>{{EmbedLiveSample('sepia','100%','229px','')}}</p> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Voir {{cssxref("filter-function/sepia", "sepia()")}} pour plus d'informations.</p> +<div class="note"> +<p><strong>Note :</strong> Voir {{cssxref("filter-function/sepia()", "sepia()")}} pour plus d'informations.</p> </div> <h2 id="Enchaîner_les_fonctions">Enchaîner les fonctions</h2> @@ -1059,8 +1037,7 @@ table.standard-table td { <pre class="brush: css">filter: contrast(175%) brightness(103%)</pre> -<div id="combination()" class="hidden"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html hidden"><table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">Original image</th> @@ -1078,7 +1055,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { height:100%; } body { @@ -1123,7 +1100,6 @@ table.standard-table td { height:100%; } </pre> -</div> <p>{{EmbedLiveSample('Enchaîner_les_fonctions','100%','209px','')}}</p> diff --git a/files/fr/web/css/filter_effects/index.html b/files/fr/web/css/filter_effects/index.html index e3d0a2715d..d1865662cc 100644 --- a/files/fr/web/css/filter_effects/index.html +++ b/files/fr/web/css/filter_effects/index.html @@ -16,20 +16,16 @@ translation_of: Web/CSS/Filter_Effects <h3 id="Propriétés">Propriétés</h3> -<div class="index"> <ul> <li>{{cssxref("backdrop-filter")}}</li> <li>{{cssxref("filter")}}</li> </ul> -</div> <h3 id="Types_de_données">Types de données</h3> -<div class="index"> <ul> <li>{{cssxref("<filter-function>")}}</li> </ul> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/fit-content/index.html b/files/fr/web/css/fit-content/index.html index e1b6c7206f..822f7d15ea 100644 --- a/files/fr/web/css/fit-content/index.html +++ b/files/fr/web/css/fit-content/index.html @@ -23,7 +23,7 @@ fit-content(100ch) fit-content(40%) </pre> -<p>Cette fonction peut être utilisée pour définir la taille d'une piste via les propriétés relatives aux grilles CSS où la taille maximale est définie par <code><a href="/fr/docs/Web/CSS/grid-template-columns#max-content">max-content</a></code> et où la taille minimale est définie par <code><a href="/fr/docs/Web/CSS/grid-template-columns#auto">auto</a></code> et qui est calculée de façon similaire à <code>auto</code> (i.e. <code><a href="/fr/docs/Web/CSS/minmax">minmax(auto, max-content)</a></code>), sauf que la taille de la piste est ramenée à <var>argument</var> si celui-ci est supérieur à <code>auto</code>.</p> +<p>Cette fonction peut être utilisée pour définir la taille d'une piste via les propriétés relatives aux grilles CSS où la taille maximale est définie par <code><a href="/fr/docs/Web/CSS/grid-template-columns#max-content">max-content</a></code> et où la taille minimale est définie par <code><a href="/fr/docs/Web/CSS/grid-template-columns#auto">auto</a></code> et qui est calculée de façon similaire à <code>auto</code> (i.e. <code><a href="/fr/docs/Web/CSS/minmax()">minmax(auto, max-content)</a></code>), sauf que la taille de la piste est ramenée à <var>argument</var> si celui-ci est supérieur à <code>auto</code>.</p> <p>Elle peut également être utilisée pour définir la taille d'une boîte avec {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} et {{cssxref("max-height")}} où la taille maximale fait référence à la taille maximale du contenu et où la taille minimale fait référence à la taille minimale du contenu.</p> @@ -35,8 +35,7 @@ fit-content(40%) <dt><code><length></code></dt> <dd>Une longueur (valeur de type {{cssxref("<length>")}}) exprimée de façon absolue.</dd> <dt><code><percentage></code></dt> - <dd>Un pourcentage (valeur de type {{cssxref("<percentage>")}}) relatif à l'espace disponible sur l'axe indiqué (la hauteur ou la largeur).</dd> - <dd>Pour les propriétés qui concernent les grilles, le pourcentage est relative à la dimension en ligne du conteneur de la grille pour les pistes qui sont disposées en colonnes et à la dimension en block pour les pistes qui sont disposées en lignes. Sinon, le pourcentage est relatif à la dimension en ligne ou en bloc selon le mode d'écriture utilisé.</dd> + <dd>Un pourcentage (valeur de type {{cssxref("<percentage>")}}) relatif à l'espace disponible sur l'axe indiqué (la hauteur ou la largeur). Pour les propriétés qui concernent les grilles, le pourcentage est relative à la dimension en ligne du conteneur de la grille pour les pistes qui sont disposées en colonnes et à la dimension en block pour les pistes qui sont disposées en lignes. Sinon, le pourcentage est relatif à la dimension en ligne ou en bloc selon le mode d'écriture utilisé.</dd> </dl> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -47,7 +46,7 @@ fit-content(40%) <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[3]">#container { +<pre class="brush: css">#container { display: grid; grid-template-columns: fit-content(300px) fit-content(300px) 1fr; grid-gap: 5px; diff --git a/files/fr/web/css/flex-basis/index.html b/files/fr/web/css/flex-basis/index.html index 6528a4f24f..03d16b111d 100644 --- a/files/fr/web/css/flex-basis/index.html +++ b/files/fr/web/css/flex-basis/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/flex-basis <div>{{EmbedInteractiveExample("pages/css/flex-basis.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> Dans le cas où <code>flex-basis</code> (avec une valeur différente de <code>auto</code>) et <code>width</code> (ou <code>height</code> si <code>flex-direction: column</code>) sont définis pour un élément, c'est <code>flex-basis</code> qui a la priorité.</p> </div> @@ -48,21 +46,19 @@ flex-basis: unset; <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><a id="width" name="width"><code><'width'></code></a></dt> + <dt><code><'width'></code></dt> <dd>Un longueur absolue (type {{cssxref("<length>")}} ou un pourcentage (type {{cssxref("<percentage>")}})relatif à la taille principale du conteneur flexible ou encore le mot-clé <code>auto</code>. Les valeurs négatives ne sont pas autorisées. La valeur par défaut est <code>auto</code>.</dd> - <dt><a id="content" name="content"><code>content</code></a></dt> - <dd>Le dimensionnement se fera de façon automatique selon le contenu de l'élément flexible.</dd> - <dd> - <div class="note"><strong>Note : </strong>Cette valeur n'était pas définie par la première version de la spécification sur les boîtes flexibles. Aussi, certaines anciennes implémentations se basant sur cette version de la spécification ne prendront pas cette valeur en charge. Un effet équivalent peut être obtenu en réglant la taille principale ({{cssxref("width")}} ou {{cssxref("height")}}) avec <code>auto</code>.</div> + <dt><code>content</code></dt> + <dd>Le dimensionnement se fera de façon automatique selon le contenu de l'élément flexible. <div class="note"><p><strong>Note :</strong> Cette valeur n'était pas définie par la première version de la spécification sur les boîtes flexibles. Aussi, certaines anciennes implémentations se basant sur cette version de la spécification ne prendront pas cette valeur en charge. Un effet équivalent peut être obtenu en réglant la taille principale ({{cssxref("width")}} ou {{cssxref("height")}}) avec <code>auto</code>.</p></div> - <div class="note"><strong>Note :</strong> Voici un rapide historique pour cette propriété : + <div class="note"><p><strong>Note :</strong> Voici un rapide historique pour cette propriété : <ul> <li>Au début, <code>flex-basis:auto</code> signifiait « se référer à ma propriété <code>width</code> ou <code>height</code> »</li> <li>Ensuite, <code>flex-basis:auto</code> a été modifiée pour indiquer un dimensionnement automatique et le mot-clé <code>main-size</code> fut introduit pour faire référence à la propriété <code>width</code> ou <code>height</code>. L'implémentation dans Gecko a été suivie avec le bug {{bug("1032922")}}.</li> <li>Cette modification a été annulée avec le bug {{bug("1093316")}} afin qu'<code>auto</code> fasse à nouveau référence à la propriété <code>height</code> ou <code>width</code>. Le mot-clé <code>content</code> a été introduit pour déclencher un dimensionnement automatique (c'est le bug {{bug("1105111")}} qui couvre cette implémentation).</li> </ul> - </div> +</p></div> </dd> </dl> @@ -202,6 +198,6 @@ flex-basis: unset; <ul> <li>{{cssxref("width")}}</li> - <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li> - <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des boîtes flexibles le long de l'axe principal</a></em></li> + <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Les concepts de bases</a></em></li> + <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Contrôler les proportions des boîtes flexibles le long de l'axe principal</a></em></li> </ul> diff --git a/files/fr/web/css/flex-direction/index.html b/files/fr/web/css/flex-direction/index.html index 313e5cfc8e..68b9b2d921 100644 --- a/files/fr/web/css/flex-direction/index.html +++ b/files/fr/web/css/flex-direction/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/flex-direction <div>{{EmbedInteractiveExample("pages/css/flex-direction.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>On notera que les valeurs <code>row</code> et <code>row-reverse</code> sont impactées par la direction du conteneur. Si {{htmlattrxref("dir")}} vaut <code>ltr</code>, <code>row</code> représente l'axe horizontal allant de la gauche vers la droite et <code>row-reverse</code> représente le même axe allant de la droite vers la gauche. Si <code>dir</code> vaut <code>rtl</code>, <code>row</code> correspondra à l'axe horizontal orienté de la droite vers la gauche et <code>row-reverse</code> de la gauche vers la droite.</p> <p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p> diff --git a/files/fr/web/css/flex-flow/index.html b/files/fr/web/css/flex-flow/index.html index 8cc3445624..f6fd1b2c4b 100644 --- a/files/fr/web/css/flex-flow/index.html +++ b/files/fr/web/css/flex-flow/index.html @@ -13,9 +13,7 @@ translation_of: Web/CSS/flex-flow <div>{{EmbedInteractiveExample("pages/css/flex-flow.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p> +<p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -51,7 +49,7 @@ flex-flow: unset; <h2 id="Exemples">Exemples</h2> -<pre class="brush:css;highlight:3">element { +<pre class="brush:css">element { /* L'axe principal sera la direction de bloc */ /* et on commencera par le bas (main-start et */ @@ -91,6 +89,6 @@ flex-flow: unset; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li> - <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ordering_Flex_Items">Ordonner les éléments flexibles</a></em></li> + <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Les concepts de bases</a></em></li> + <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordonner les éléments flexibles</a></em></li> </ul> diff --git a/files/fr/web/css/flex-grow/index.html b/files/fr/web/css/flex-grow/index.html index 2a6b17accb..a90ebf2a8e 100644 --- a/files/fr/web/css/flex-grow/index.html +++ b/files/fr/web/css/flex-grow/index.html @@ -19,8 +19,6 @@ translation_of: Web/CSS/flex-grow <div>{{EmbedInteractiveExample("pages/css/flex-grow.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -39,7 +37,7 @@ flex-shrink: unset; <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><a id="number" name="number"><code><number></code></a></dt> + <dt><code><number></code></dt> <dd>Un nombre (type {{cssxref("<number>")}} qui correspond au facteur de grossissement utilisé. Plus la valeur est élevée, plus l'élément sera étendu si nécessaire. Les valeurs négatives sont invalides. La valeur par défaut est 0.</dd> </dl> @@ -51,7 +49,6 @@ flex-shrink: unset; <h3 id="HTML">HTML</h3> -<div id="Live_Sample"> <pre class="brush: html"><h4>A,B,C et F ont flex-shrink:1 . D et E ont flex-grow:1 .</h4> <div id="content"> <div class="box" style="background-color:red;">A</div> @@ -83,7 +80,6 @@ flex-shrink: unset; border: 3px solid rgba(0,0,0,.2); } </pre> -</div> <h3 id="Résultat">Résultat</h3> diff --git a/files/fr/web/css/flex-shrink/index.html b/files/fr/web/css/flex-shrink/index.html index c20a36a722..c3c04c7657 100644 --- a/files/fr/web/css/flex-shrink/index.html +++ b/files/fr/web/css/flex-shrink/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/flex-shrink <div>{{EmbedInteractiveExample("pages/css/flex-shrink.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -37,7 +35,7 @@ flex-shrink: unset; <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><a id="number" name="number"><code><number></code></a></dt> + <dt><code><number></code></dt> <dd>Un nombre (type {{cssxref("<number>")}}) qui correspond au facteur de rétrécissement utilisé. Plus la valeur est élevée, plus l'élément sera compressé si nécessaire. Les valeurs négatives sont invalides. La valeur par défaut est <code>1</code>.</dd> </dl> @@ -49,7 +47,6 @@ flex-shrink: unset; <h3 id="HTML">HTML</h3> -<div id="Live_Sample"> <pre class="brush: html"><p>A,B,C ont flex-shrink: 1. D et E ont flex-shrink: 2.</p> <div id="content"> <div class="box" style="background-color:red;">A</div> @@ -80,7 +77,6 @@ flex-shrink: unset; flex-shrink: 2; } </pre> -</div> <h3 id="Résultat">Résultat</h3> diff --git a/files/fr/web/css/flex-wrap/index.html b/files/fr/web/css/flex-wrap/index.html index c9e3361ecf..004f6f8e6f 100644 --- a/files/fr/web/css/flex-wrap/index.html +++ b/files/fr/web/css/flex-wrap/index.html @@ -13,9 +13,7 @@ translation_of: Web/CSS/flex-wrap <div>{{EmbedInteractiveExample("pages/css/flex-wrap.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p> +<p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -41,18 +39,16 @@ flex-wrap: unset; <dd>Les éléments flexibles sont disposé sur plusieurs lignes. La ligne <strong>cross-start</strong> est équivalente à <strong>start</strong> ou <strong>before</strong> en fonction de la valeur de <code>flex-direction</code> et la ligne <strong>cross-end</strong> est à l'opposée <strong>cross-start</strong>.</dd> <dt><code>wrap-reverse</code></dt> <dd>Se comporte comme <code>wrap</code> mais <strong>cross-start</strong> et <strong>cross-end</strong> sont permutées.</dd> - <dt> - <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - </dt> </dl> -{{csssyntax}} +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<p>{{csssyntax}}</p> <h2 id="Exemples">Exemples</h2> <h3 id="HTML">HTML</h3> -<div id="Live_Sample"> <pre class="brush: html"><h4>Un exemple de flex-wrap:wrap </h4> <div class="contenu"> <div class="rouge">1</div> @@ -117,7 +113,6 @@ flex-wrap: unset; } </pre> -</div> <h3 id="Résultat">Résultat</h3> @@ -151,6 +146,6 @@ flex-wrap: unset; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li> + <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Les concepts de bases</a></em></li> <li>Guide sur les boîtes flexibles : <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Maîtriser le retour à la ligne des éléments flexibles</a></em></li> </ul> diff --git a/files/fr/web/css/flex/index.html b/files/fr/web/css/flex/index.html index 61a7ced5c7..2214dc0f6f 100644 --- a/files/fr/web/css/flex/index.html +++ b/files/fr/web/css/flex/index.html @@ -17,12 +17,11 @@ translation_of: Web/CSS/flex <div>{{EmbedInteractiveExample("pages/css/flex.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<h2 id="description">Description</h2> <p>Pour la plupart des cas, on utilisera une des valeurs suivantes : <code>auto</code>, <code>initial</code>, <code>none</code> ou un nombre positif sans unité. Pour voir l'effet de ces valeurs, essayez de redimensionner les conteneurs flexibles ci-après :</p> -<div id="flex"> -<pre class="hidden brush: html notranslate"><div class="flex-container"> +<pre class="hidden brush: html"><div class="flex-container"> <div class="item auto">auto</div> <div class="item auto">auto</div> @@ -63,7 +62,7 @@ translation_of: Web/CSS/flex </div> </pre> -<pre class="hidden brush: css notranslate">* { +<pre class="hidden brush: css">* { box-sizing: border-box; } @@ -110,18 +109,15 @@ translation_of: Web/CSS/flex } </pre> -<p>{{EmbedLiveSample("flex", "100%","370")}}</p> +<p>{{EmbedLiveSample("description", "100%","370")}}</p> -<div id="flex"> <p>Par défaut, les éléments flexibles ne se rétrécissent pas en dessous de la taille minimale du contenu. Pour modifier ce comportement, il faudra paramétrer {{cssxref("min-width")}} ou {{cssxref("min-height")}}.</p> -</div> -<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS" title="CSS/Using_CSS_flexible_boxes">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a> pour plus d'informations.</p> -</div> +<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox" title="CSS/Using_CSS_flexible_boxes">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a> pour plus d'informations.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush:css no-line-numbers notranslate">/* Valeurs de base */ +<pre class="brush:css no-line-numbers">/* Valeurs de base */ flex: auto; flex: initial; flex: none; @@ -184,7 +180,6 @@ flex: unset; <h3 id="Valeurs">Valeurs</h3> -<div id="flex"> <dl> <dt><code>auto</code></dt> <dd>L'élément est dimensionné selon ses propriétés <code>width</code> et <code>height</code> mais peut grandir pour absorber l'espace libre disponible dans le conteneur flexible ou rétrécir à sa taille minimale pour rentrer dans le conteneur. Cette valeur est équivalente à "<code>flex: 1 1 auto</code>".</dd> @@ -192,19 +187,17 @@ flex: unset; <dd>L'élément est dimensionné selon ses propriétés <code>width</code> et <code>height</code>. Ce comportement est équivalent à la valeur par défaut (<code>0 1 auto</code>). Si besoin, l'élément rétrécit à sa taille minimale pour rentrer dans le conteneur mais il ne grandira pas s'il y a de l'espace disponible dans ce conteneur. Ce mot-clé est équivalent à "<code>flex: 0 1 auto</code>".</dd> <dt><code>none</code></dt> <dd>L'élément est dimensionné par rapport à ses propriétés <code>width</code> et <code>height</code>. Il n'est pas flexible : il ne peut ni rétrécir ni grandir selon l'espace du conteneur flexible. Ce mot-clé est équivalent à "<code>flex: 0 0 auto</code>".</dd> -</dl> -</div> - -<dl> - <dt><a id="grow" name="grow"><code><'flex-grow'></code></a></dt> + <dt><code><'flex-grow'></code></dt> <dd>Voir {{cssxref("flex-grow")}}. Les valeurs négatives sont interdites et la valeur par défaut est <code>1</code>.</dd> - <dt><a id="shrink" name="shrink"><code><'flex-shrink'></code></a></dt> + <dt><code><'flex-shrink'></code></dt> <dd>Voir {{cssxref("flex-shrink")}}. Les valeurs négatives sont interdites et la valeur par défaut est <code>1</code>.</dd> - <dt><a id="basis" name="basis"><code><'flex-basis'></code></a></dt> + <dt><code><'flex-basis'></code></dt> <dd>Voir {{cssxref("flex-basis")}}. Une valeur valide pour {{cssxref("width")}} et {{cssxref("height")}}. La valeur par défaut est <code>0</code>.</dd> </dl> -<div class="note"><strong>Note :</strong> Lorsqu'on utilise une ou deux valeurs sans unité dans la règle, <code>flex-basis</code> vaudra 0. Pour plus d'informations, voir <a href="https://drafts.csswg.org/css-flexbox/#flex-common">le brouillon de spécification du module des boîtes flexibles</a>.</div> +<div class="note"> + <p><strong>Note :</strong> Lorsqu'on utilise une ou deux valeurs sans unité dans la règle, <code>flex-basis</code> vaudra 0. Pour plus d'informations, voir <a href="https://drafts.csswg.org/css-flexbox/#flex-common">le brouillon de spécification du module des boîtes flexibles</a>.</p> +</div> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -214,7 +207,7 @@ flex: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">#flex-container { +<pre class="brush: css">#flex-container { display: flex; flex-direction: row; } @@ -230,7 +223,7 @@ flex: unset; <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div id="flex-container"> +<pre class="brush: html"><div id="flex-container"> <div class="flex-item" id="flex">Boîte flexible (cliquer pour passer à la boîte « normale »)</div> <div class="raw-item" id="raw">Boîte « normale » </div> </div> @@ -238,14 +231,14 @@ flex: unset; <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate">var flex = document.getElementById("flex"); +<pre class="brush: js">var flex = document.getElementById("flex"); var raw = document.getElementById("raw"); flex.addEventListener("click", function() { raw.style.display = raw.style.display == "none" ? "block" : "none"; }); </pre> -<pre class="brush: css notranslate">#flex-container { +<pre class="brush: css">#flex-container { width: 100%; font-family: Consolas, Arial, sans-serif; } @@ -292,6 +285,6 @@ flex.addEventListener("click", function() { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li> - <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des boîtes flexibles le long de l'axe principal</a></em></li> + <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Les concepts de bases</a></em></li> + <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Contrôler les proportions des boîtes flexibles le long de l'axe principal</a></em></li> </ul> diff --git a/files/fr/web/css/float/index.html b/files/fr/web/css/float/index.html index 71827a528e..e814524cfb 100644 --- a/files/fr/web/css/float/index.html +++ b/files/fr/web/css/float/index.html @@ -9,22 +9,19 @@ translation_of: Web/CSS/float --- <div>{{CSSRef}}</div> -<p>La propriété <strong><code>float</code></strong> indique qu'un élément doit être retiré du flux normal et doit être placé sur le côté droit ou sur le côté gauche de son conteneur. Le texte et les autres éléments en ligne (<em>inline</em>) entoureront alors l'élément flottant. L'élément est retiré du flux normal de la page mais s'inscrit toujours dans le flux (contrairement au <a href="/fr/docs/Web/CSS/position#Positionnement_absolu">positionnement absolu</a>).</p> +<p>La propriété <strong><code>float</code></strong> indique qu'un élément doit être retiré du flux normal et doit être placé sur le côté droit ou sur le côté gauche de son conteneur. Le texte et les autres éléments en ligne (<em>inline</em>) entoureront alors l'élément flottant. L'élément est retiré du flux normal de la page mais s'inscrit toujours dans le flux (contrairement au <a href="/fr/docs/Web/CSS/position#positionnement_absolu">positionnement absolu</a>).</p> <div>{{EmbedInteractiveExample("pages/css/float.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<p>Un <strong>élément flottant</strong> est un élément pour lequel <a href="/fr/docs/Web/CSS/computed_value">la valeur calculée</a> de <code>float</code> est différente de <code>none</code>.</p> -<p>Un <strong>élément flottant</strong> est un élément pour lequel <a href="/fr/docs/Web/CSS/Valeur_calculée">la valeur calculée</a> de <code>float</code> est différente de <code>none</code>.</p> - -<div id="float"> <p><code>float</code> implique l'utilisation d'une disposition en bloc, cette propriété modifie donc la valeur de {{cssxref("display")}} dans certains cas :</p> <table class="standard-table"> <thead> <tr> - <th scope="col"><a href="/fr/docs/Web/CSS/Valeur_spécifiée">Valeur spécifiée</a></th> - <th scope="col"><a href="/fr/docs/Web/CSS/Valeur_calculée">Valeur calculée</a></th> + <th scope="col"><a href="/fr/docs/Web/CSS/specified_value">Valeur spécifiée</a></th> + <th scope="col"><a href="/fr/docs/Web/CSS/computed_value">Valeur calculée</a></th> </tr> </thead> <tbody> @@ -87,7 +84,9 @@ translation_of: Web/CSS/float </tbody> </table> -<div class="note"><strong>Note : </strong>Si vous utilisez cette propriété via JavaScript, comme propriété de l'objet {{domxref("HTMLElement.style")}}, la plupart des navigateurs récents permettra d'utiliser <code>float</code> mais il faudra utiliser <code>cssFloat</code> (attention à la casse) pour les navigateurs plus anciens. Pour Internet Explorer 8 et les versions antérieures, elle était appelée <code>styleFloat</code>. Le terme <code>float</code> étant réservé en JavaScript, ce cas de figure était une exception à la règle qui définit que le nom de la propriété DOM est une version <a href="https://fr.wikipedia.org/wiki/CamelCase">CamelCase</a> de la propriété CSS construite avec des tirets. De même, <code>class</code> sera échappée en <code>className</code> et le <code>for</code> des éléments <label> sera converti en <code>htmlFor</code>).</div> +<div class="note"> + <p><strong>Note :</strong>Si vous utilisez cette propriété via JavaScript, comme propriété de l'objet {{domxref("HTMLElement.style")}}, la plupart des navigateurs récents permettra d'utiliser <code>float</code> mais il faudra utiliser <code>cssFloat</code> (attention à la casse) pour les navigateurs plus anciens. Pour Internet Explorer 8 et les versions antérieures, elle était appelée <code>styleFloat</code>. Le terme <code>float</code> étant réservé en JavaScript, ce cas de figure était une exception à la règle qui définit que le nom de la propriété DOM est une version <a href="https://fr.wikipedia.org/wiki/CamelCase">CamelCase</a> de la propriété CSS construite avec des tirets. De même, <code>class</code> sera échappée en <code>className</code> et le <code>for</code> des éléments <label> sera converti en <code>htmlFor</code>).</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -155,7 +154,7 @@ h4 { <p>Dans l'image suivante, on voit trois carrés rouges. Deux flottent à gauche et un flotte à droite. On voit que le deuxième carré à gauche est placé à droite du premier. Si on ajoutait d'autres carrés, ils s'empileraient sur la gauche jusqu'à remplir le conteneur, ensuite, on passerait sur une autre ligne.</p> -<p><img src="/@api/deki/files/4927/=floats.png" style="height: 248px; width: 729px;"></p> +<p><img src="floats.png"></p> <h2 id="Dégager_des_éléments_du_flottement">Dégager des éléments du flottement</h2> @@ -166,14 +165,15 @@ h4 { <pre class="brush:css">h2.deuxiemeTitre { clear: both; } </pre> -<p>Cela dit, cette méthode fonctionne uniquement s'il n'y a pas d'autres éléments dans le même <a href="/fr/docs/Web/CSS/Block_formatting_context" rel="internal">contexte de formatage de bloc</a> pour lesquels on voudrait que l'élément apparaisse à droite. Par exemple, si l'élément <code>H2</code> est entourée de barres latérales à gauche et à droite et qu'on utilise <code>clear</code>, le titre apparaîtra alors en bas, sous les barres, plutôt qu'entre elles.</p> +<p>Cela dit, cette méthode fonctionne uniquement s'il n'y a pas d'autres éléments dans le même <a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">contexte de formatage de bloc</a> pour lesquels on voudrait que l'élément apparaisse à droite. Par exemple, si l'élément <code>H2</code> est entourée de barres latérales à gauche et à droite et qu'on utilise <code>clear</code>, le titre apparaîtra alors en bas, sous les barres, plutôt qu'entre elles.</p> <p>Aussi, si on ne peut pas dégager un élément, on peut limiter le formatage en bloc au conteneur des éléments flottants. Pour reprendre l'exemple précédent, on voit que toutes les boîtes rouges sont dans un élément {{HTMLElement("p")}}. On peut alors utiliser {{cssxref("overflow")}} avec <code>hidden</code> ou <code>auto</code> afin que l'élément s'agrandisse pour les contenir, sans les faire tomber en bas :</p> <pre class="brush:css">p.avecBoitesRouges { overflow: hidden; height: auto; } </pre> -<div class="note"><strong>Note :</strong> En utilisant <code>overflow</code>: <code>scroll</code> on contiendra également les éléments fils flottants mais cela affichera des barres de défilement quelle que soit la hauteur du contenu. Ici, nous utilisons <code>auto</code> pour <code>height</code> afin d'indiquer que le conteneur doit s'agrandir si nécessaire.</div> +<div class="note"> + <p><strong>Note :</strong> En utilisant <code>overflow</code>: <code>scroll</code> on contiendra également les éléments fils flottants mais cela affichera des barres de défilement quelle que soit la hauteur du contenu. Ici, nous utilisons <code>auto</code> pour <code>height</code> afin d'indiquer que le conteneur doit s'agrandir si nécessaire.</p></div> <h2 id="Spécifications">Spécifications</h2> @@ -218,6 +218,5 @@ h4 { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Block_formatting_context">Le contexte de formatage des blocs</a></li> + <li><a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">Le contexte de formatage des blocs</a></li> </ul> -</div> diff --git a/files/fr/web/css/font-family/index.html b/files/fr/web/css/font-family/index.html index 7e45fc7aeb..7761699259 100644 --- a/files/fr/web/css/font-family/index.html +++ b/files/fr/web/css/font-family/index.html @@ -13,17 +13,16 @@ translation_of: Web/CSS/font-family <div>{{EmbedInteractiveExample("pages/css/font-family.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les valeurs sont séparées par des virgules, indiquant chacune une police alternative. Le moteur choisira la première valeur pour laquelle la police correspondante est installée sur l'ordinateur ou qui peut être téléchargée via la règle @ {{cssxref("@font-face")}} définie.</p> <p>Pour fixer <code>font-family</code> et d'autres propriétés liées aux polices de caractères, on pourra utiliser la propriété raccourcie {{cssxref("font")}}.</p> <p>Les auteurs doivent toujours inclure une famille de police générique dans cette liste car il n'y a aucune certitude qu'une police donnée aura été installée sur l'ordinateur ni qu'elle pourra être téléchargée grâce à {{cssxref("@font-face")}}. L'utilisation d'une famille de police générique permet au navigateur d'utiliser une police acceptable en recours si besoin.</p> -<div class="note"><strong>Note :</strong> La propriété <code>font-family</code> définit une liste de police, ordonnée par priorité, de la plus haute à la plus basse. La sélection de la police ne se fait pas pour l'ensemble du texte mais<strong> caractère par caractère</strong>. Ainsi si une police ne dispose pas du caractère à représenter, ce sera la police suivante qui sera utilisée pour représenter le caractère. Pour Internet Explorer, cela ne fonctionne pas avec la version 6 et les version antérieures.<br> -<br> -Les propriétés {{cssxref("font-style")}}, {{cssxref("font-variant")}} et {{cssxref("font-size")}} permettront d'influencer le choix en fonction du style, de la variante ou de la taille disponible parmi les polices de la liste.</div> +<div class="note"> + <p><strong>Note :</strong> La propriété <code>font-family</code> définit une liste de police, ordonnée par priorité, de la plus haute à la plus basse. La sélection de la police ne se fait pas pour l'ensemble du texte mais<strong> caractère par caractère</strong>. Ainsi si une police ne dispose pas du caractère à représenter, ce sera la police suivante qui sera utilisée pour représenter le caractère. Pour Internet Explorer, cela ne fonctionne pas avec la version 6 et les version antérieures.</p> + <p>Les propriétés {{cssxref("font-style")}}, {{cssxref("font-variant")}} et {{cssxref("font-size")}} permettront d'influencer le choix en fonction du style, de la variante ou de la taille disponible parmi les polices de la liste.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -57,9 +56,9 @@ font-family: unset; <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><a id="family-name" name="family-name"><code><family-name></code></a></dt> + <dt><code><family-name></code></dt> <dd>Le nom d'une famille de polices ; par exemple « Times » ou « Helvetica » sont des noms de famille de polices. Les noms de familles qui comportent des blancs doivent être encadrées par des doubles quotes (").</dd> - <dt><a id="generic-name" name="generic-name"><code><generic-name></code></a></dt> + <dt><code><generic-name></code></dt> <dd> <p>Les noms de famille génériques sont utilisés comme mécanisme de secours pour conserver l'intention de mise en forme de l'auteur lorsqu'aucune des polices indiquées n'est disponible. Les noms de famille génériques sont des mots-clés et ne doivent pas être encadrés par des doubles quotes. Un nom de famille générique devrait être utilisé comme dernier élément de la liste des noms. Les mots-clés suivants sont définis :</p> diff --git a/files/fr/web/css/font-feature-settings/index.html b/files/fr/web/css/font-feature-settings/index.html index 40af85146d..3297622581 100644 --- a/files/fr/web/css/font-feature-settings/index.html +++ b/files/fr/web/css/font-feature-settings/index.html @@ -13,11 +13,10 @@ translation_of: Web/CSS/font-feature-settings <div>{{EmbedInteractiveExample("pages/css/font-feature-settings.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<div class="note"><strong>Note :</strong> Lorsque c'est possible, les auteurs devraient utiliser la propriété raccourcie {{cssxref("font-variant")}} ou l'une des propriétés détaillées correspondantes parmi {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-numeric")}} ou {{cssxref("font-variant-position")}}.<br> -<br> -Cette propriété est une fonctionnalité bas-niveau permettant de gérer des cas particuliers où il n'y a aucun moyen d'accéder à une fonctionnalité OpenType donnée. Cette propriété CSS ne devrait notamment pas être utilisée pour activer les petites majuscules.</div> +<div class="note"> + <p><strong>Note :</strong> Lorsque c'est possible, les auteurs devraient utiliser la propriété raccourcie {{cssxref("font-variant")}} ou l'une des propriétés détaillées correspondantes parmi {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-numeric")}} ou {{cssxref("font-variant-position")}}.</p> + <p>Cette propriété est une fonctionnalité bas-niveau permettant de gérer des cas particuliers où il n'y a aucun moyen d'accéder à une fonctionnalité OpenType donnée. Cette propriété CSS ne devrait notamment pas être utilisée pour activer les petites majuscules.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -114,5 +113,5 @@ td.tabular { font-feature-settings: "tnum"; } <ul> <li><a href="https://www.microsoft.com/typography/otspec/featurelist.htm">La liste des fonctionnalités OpenType</a></li> - <li><a href="http://blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx"><em>Using the whole font</em>, un article MSDN en anglais</a></li> + <li><a href="https://blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx"><em>Using the whole font</em>, un article MSDN en anglais</a></li> </ul> diff --git a/files/fr/web/css/font-kerning/index.html b/files/fr/web/css/font-kerning/index.html index 556618fc62..b6870b4104 100644 --- a/files/fr/web/css/font-kerning/index.html +++ b/files/fr/web/css/font-kerning/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/font-kerning --- <div>{{CSSRef}}</div> -<p>La propriété <strong><code>font-kerning</code></strong> contrôle le crénage de la police ; c'est-à-dire l'espace créé entre les lettres. L'information de crénage est stockée dans la police et si la police est <em>bien crénée</em>, cette caractéristique permet aux caractères, quels qu'ils soient, d'être espacés de manière semblable.<img alt="Exemple pour font-kerning" src="https://mdn.mozillademos.org/files/8455/font-kerning.png" style="display: block; height: 84px; margin: auto; width: 180px;"></p> +<p>La propriété <strong><code>font-kerning</code></strong> contrôle le crénage de la police ; c'est-à-dire l'espace créé entre les lettres. L'information de crénage est stockée dans la police et si la police est <em>bien crénée</em>, cette caractéristique permet aux caractères, quels qu'ils soient, d'être espacés de manière semblable.<img alt="Exemple pour font-kerning" src="font-kerning.png"></p> <pre class="brush:css no-line-numbers">font-kerning: auto; font-kerning: normal; diff --git a/files/fr/web/css/font-optical-sizing/index.html b/files/fr/web/css/font-optical-sizing/index.html index 4223273b92..8ec9caeaf0 100644 --- a/files/fr/web/css/font-optical-sizing/index.html +++ b/files/fr/web/css/font-optical-sizing/index.html @@ -14,7 +14,7 @@ translation_of: Web/CSS/font-optical-sizing <p>Par exemple, les textes de petites tailles sont généralement affichés avec des traits plus épais et des empattements (<em>serifs</em>) plus grands. En revanche, les textes plus grands sont souvent plus fins et utilisent plus de contrastes entre les traits fins et épais.</p> <div class="note"> -<p><strong>Note</strong> : L'axe de variation pour la taille optique est représenté par <code>opsz</code> dans {{cssxref("font-variation-settings")}}.</p> +<p><strong>Note :</strong> L'axe de variation pour la taille optique est représenté par <code>opsz</code> dans {{cssxref("font-variation-settings")}}.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -71,7 +71,7 @@ p { qui prennent en charge cette fonctionnalité.</p></pre> <div class="note"> -<p><strong>Note</strong> : La police utilisée dans cet exemple possède un dimensionnement optique et est disponible sous licence libre <a href="https://github.com/TypeNetwork/Amstelvar/releases">en téléchargement sur GitHub</a>.</p> +<p><strong>Note :</strong> La police utilisée dans cet exemple possède un dimensionnement optique et est disponible sous licence libre <a href="https://github.com/TypeNetwork/Amstelvar/releases">en téléchargement sur GitHub</a>.</p> </div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/font-size-adjust/index.html b/files/fr/web/css/font-size-adjust/index.html index 6daeff331d..19af669501 100644 --- a/files/fr/web/css/font-size-adjust/index.html +++ b/files/fr/web/css/font-size-adjust/index.html @@ -134,5 +134,5 @@ font-size-adjust: 0.5; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144885" title="Link to Bugzilla bug 1144885">Un billet de David Baron sur <code>font-size-adjust</code> (en anglais)</a></li> + <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144885">Un billet de David Baron sur <code>font-size-adjust</code> (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/font-size/index.html b/files/fr/web/css/font-size/index.html index be4b7e30b2..09160e80d0 100644 --- a/files/fr/web/css/font-size/index.html +++ b/files/fr/web/css/font-size/index.html @@ -13,11 +13,9 @@ translation_of: Web/CSS/font-size <div>{{EmbedInteractiveExample("pages/css/font-size.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush:css no-line-numbers notranslate">/* Valeurs dont la taille est absolue */ +<pre class="brush:css no-line-numbers">/* Valeurs dont la taille est absolue */ font-size: xx-small; font-size: x-small; font-size: small; @@ -55,13 +53,13 @@ font-size: unset; <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><a id="absolue" name="absolue"><code>xx-small, x-small, small, medium, large, x-large, xx-large</code></a></dt> + <dt><code>xx-small, x-small, small, medium, large, x-large, xx-large</code></dt> <dd>Un ensemble de mots-clés désignant des valeurs absolues basées sur la taille par défaut de l'utilisateur (qui vaut <code>medium</code>). Le comportement est analogue à ce qu'on obtient en utilisant le code HTML <code><font size="1"></code> à <code><font size="7"></code> lorsque la taille par défaut de l'utilisateur vaut <code><font size="4"></code>.</dd> - <dt><a id="relative" name="relative"><code>larger, smaller</code></a></dt> + <dt><code>larger, smaller</code></dt> <dd>La taille de la fonte est plus grande (<code>larger</code>) ou plus petite (<code>smaller</code>) que celle de l'élément parent. Le ratio d'agrandissement/réduction est le même que celui qui sépare les mots-clés présentés avant.</dd> - <dt><a id="lp" name="lp"><code><length></code></a></dt> + <dt><code><length></code></dt> <dd>Une longueur positive (type {{cssxref("<length>")}} ou un pourcentage (type {{cssxref("<percentage>")}}). Lorsque les valeurs sont exprimées avec les unités <code>em</code> ou <code>ex</code>, la taille est alors relative à la taille de la fonte de l'élément parent. Ainsi, une valeur de <code>0.5em</code> indiquera que la taille de fonte pour l'élément courant est la moitié de celle utilisée pour l'élément parent. Lorsque l'unité utilisée est <code>rem</code>, la taille est alors relative à la taille de la fonte utilisée pour l'élément racine <code>html</code>.</dd> - <dt><a id="lp" name="lp"><code><percentage></code></a></dt> + <dt><code><percentage></code></dt> <dd>Les valeurs exprimées en pourcentages (type {{cssxref("<percentage>")}}) sont proportionnelles à la taille de fonte de l'élément parent.</dd> </dl> @@ -91,7 +89,7 @@ font-size: unset; <p>Pour calculer une équivalence entre <code>em</code> et un résultat exprimé en pixels, on peut utiliser cette formule :</p> -<pre class="brush: css notranslate">em = taille visée en px / font-size du parent en pixels</pre> +<pre class="brush: css">em = taille visée en px / font-size du parent en pixels</pre> <p>Ainsi, si la taille <code>font-size</code> de <code>body</code> vaut <code>1em</code> et que l'échelle par défaut du navigateur indique <code>1em</code> = <code>16px</code> et qu'on souhaite obtenir une <code>font-size</code> équivalente à <code>12px</code>, on pourra utiliser la valeur <code>0.75em</code> (car 12/16 = 0.75). De même, si on veut une taille analogue à <code>10px</code>, on utilisera <code>0.625em</code> (10/16 = 0.625).</p> @@ -99,7 +97,7 @@ font-size: unset; <p>Un autre aspect important est la <strong>composition</strong> des valeurs exprimées avec cette unité. Si on prend le fragment HTML suivant :</p> -<pre class="brush: html notranslate"><div> +<pre class="brush: html"><div> <span> Extérieur <span>Intérieur</span> @@ -110,7 +108,7 @@ font-size: unset; <p>Et qu'on applique la feuille de style suivante :</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { font-size: 62.5%; } span { @@ -129,7 +127,7 @@ span { <p>La feuille de style qui suit ressemble fortement à celle utilisée dans l'exemple précédent, on a simplement remplacé l'unité par <code>rem</code>.</p> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-size: 62.5%; } span { @@ -139,7 +137,7 @@ span { <p>On utilisera le même fragment de HTML :</p> -<pre class="brush: html notranslate"><span> +<pre class="brush: html"><span> Extérieur <span>Intérieur</span> Extérieur @@ -153,7 +151,7 @@ span { <h3 id="Premiers_exemples">Premiers exemples</h3> -<pre class="brush: css notranslate">/* Le paragraphe sera écrit avec une grande */ +<pre class="brush: css">/* Le paragraphe sera écrit avec une grande */ /* fonte. */ p { font-size: xx-large } @@ -170,7 +168,7 @@ span { font-size: 16px; } <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">.small { +<pre class="brush: css">.small { font-size: xx-small; } .larger { @@ -186,7 +184,7 @@ span { font-size: 16px; } <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><h1 class="small">Petit H1</h1> +<pre class="brush: html"><h1 class="small">Petit H1</h1> <h1 class="larger">H1 plus grand</h1> <h1 class="point">H1 de 24 points</h1> <h1 class="percent">H1 à 200%</h1></pre> diff --git a/files/fr/web/css/font-smooth/index.html b/files/fr/web/css/font-smooth/index.html index 2c1696ddde..f70c9d9e4f 100644 --- a/files/fr/web/css/font-smooth/index.html +++ b/files/fr/web/css/font-smooth/index.html @@ -24,7 +24,7 @@ font-smooth: 2em; </pre> <div class="note"> -<p><strong>Webkit</strong> implémente <strong><code>-webkit-font-smoothing</code></strong> avec d'autres valeurs, <strong>là aussi c'est une propriété non-standard qui ne devrait pas être utilisée</strong>.</p> +<p><strong>Note :</strong> Webkit implémente <strong><code>-webkit-font-smoothing</code></strong> avec d'autres valeurs, <strong>là aussi c'est une propriété non-standard qui ne devrait pas être utilisée</strong>.</p> <ul> <li><code>auto</code> : c'est le navigateur qui décide la meilleure approche</li> @@ -35,7 +35,7 @@ font-smooth: 2em; </div> <div class="note"> -<p><strong>Firefox</strong> implémente <strong><code>-moz-osx-font-smoothing</code></strong> avec d'autres valeurs, <strong>là aussi c'est une propriété non-standard qui ne devrait pas être utilisée</strong>.</p> +<p><strong>Note :</strong> Firefox implémente <strong><code>-moz-osx-font-smoothing</code></strong> avec d'autres valeurs, <strong>là aussi c'est une propriété non-standard qui ne devrait pas être utilisée</strong>.</p> <ul> <li><code>auto</code> - le choix est laissé au navigateur. Cela correspond généralement à <code>grayscale</code>.</li> @@ -45,7 +45,7 @@ font-smooth: 2em; <h2 id="Spécifications">Spécifications</h2> -<p>Bien que mentionnée dans les premiers brouillons pour <a href="http://www.w3.org/TR/WD-font/#font-smooth">CSS3 Fonts</a>, <code>font-smooth</code> a été retirée de cette spécification et ne fait plus partie du standard.</p> +<p>Bien que mentionnée dans les premiers brouillons pour <a href="https://www.w3.org/TR/WD-font/#font-smooth">CSS3 Fonts</a>, <code>font-smooth</code> a été retirée de cette spécification et ne fait plus partie du standard.</p> <p> </p> diff --git a/files/fr/web/css/font-stretch/index.html b/files/fr/web/css/font-stretch/index.html index 67e6c59bed..12889ebfbd 100644 --- a/files/fr/web/css/font-stretch/index.html +++ b/files/fr/web/css/font-stretch/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/font-stretch <p>La propriété <strong><code>font-stretch</code></strong> permet de choisir entre la forme normale, condensée ou étendue d'une police.</p> -<pre class="brush:css no-line-numbers notranslate">/* Valeurs avec un mot-clé */ +<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ font-stretch: ultra-condensed; font-stretch: extra-condensed; font-stretch: condensed; @@ -135,34 +135,34 @@ font-stretch: unset; <tbody> <tr> <th scope="row">Helvetica Neue</th> - <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page1.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page1.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page1.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page1.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page1.png"></td> </tr> <tr> <th scope="row">League Mono Variable</th> - <td><img alt="" src="https://mdn.mozillademos.org/files/16030/Screenshot_2018-06-06_example_page.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16031/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16032/Screenshot_2018-06-06_example_page2.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16033/Screenshot_2018-06-06_example_page3.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16034/l-100.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16035/l-112.5.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16036/l-125.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16037/l-150.png" style="height: 58px; width: 45px;"></td> - <td><img alt="" src="https://mdn.mozillademos.org/files/16038/l-200.png" style="height: 58px; width: 45px;"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page1.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page2.png"></td> + <td><img alt="" src="screenshot_2018-06-06_example_page3.png"></td> + <td><img alt="" src="l-100.png"></td> + <td><img alt="" src="l-112.5.png"></td> + <td><img alt="" src="l-125.png"></td> + <td><img alt="" src="l-150.png"></td> + <td><img alt="" src="l-200.png"></td> </tr> </tbody> </table> <ul> <li>Helvetica Neue est installée par défaut sur macOS et possède une seule fonte condensée en plus de la fonte normale. On voit dans ce tableau que les valeurs de <code>font-stretch</code> inférieures à 100% utilisent une fonte condensée alors que les autres valeurs utilisent la fonte normale.</li> - <li><a href="http://tylerfinck.com/leaguemonovariable/">League Mono Variable</a> est une police variable qui offre plusieurs variantes de fontes sur cet axe et on peut alors observer les variations de <code>font-stretch</code> selon les pourcentages choisis.</li> + <li><a href="https://tylerfinck.com/leaguemonovariable/">League Mono Variable</a> est une police variable qui offre plusieurs variantes de fontes sur cet axe et on peut alors observer les variations de <code>font-stretch</code> selon les pourcentages choisis.</li> </ul> <p>Pour les polices variables TrueType ou OpenType, c'est l'axe de variation <code>wdth</code> qui implémente ces largeurs variables.</p> @@ -177,12 +177,12 @@ font-stretch: unset; <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p class="stretch">Le texte est plus étiré.</p> +<pre class="brush: html"><p class="stretch">Le texte est plus étiré.</p> <p class="condensed">Le texte est plus resserré.</div></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">.stretch { +<pre class="brush: css">.stretch { font-stretch: extra-expanded; } @@ -198,10 +198,9 @@ font-stretch: unset; <p>Note : cet exemple ne fonctionnera uniquement avec les navigateurs qui prennent en charge les valeurs <code><percentage></code>.</p> -<div id="variable-font-demo"> <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <p class="condensed">an elephantine lizard</p> <p class="normal">an elephantine lizard</p> <p class="expanded">an elephantine lizard</p> @@ -210,7 +209,7 @@ font-stretch: unset; <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">/* +<pre class="brush: css">/* Cet exemple utilise la police League Mono Variable, développée par Tyler Finck (https://www.tylerfinck.com/) et utilisée ici selon la licence SIL Open Font, Version 1.1 : @@ -243,11 +242,10 @@ http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web } </pre> -</div> <h4 id="Résultat_2">Résultat</h4> -<p>{{EmbedLiveSample("variable-font-demo", 1200, 250, "", "", "example-outcome-frame")}}</p> +<p>{{EmbedLiveSample("Avec_un_pourcentage", 1200, 250, "", "", "example-outcome-frame")}}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/font-style/index.html b/files/fr/web/css/font-style/index.html index be9eccddf5..69952fea4f 100644 --- a/files/fr/web/css/font-style/index.html +++ b/files/fr/web/css/font-style/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/font-style <div>{{EmbedInteractiveExample("pages/css/font-style.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La forme <strong>italique</strong> est généralement une forme cursive qui utilise moins d'espace horizontal que les autres formes classiques. La forme <strong>oblique</strong> quant à elle est simplement une version penchée de la forme normale. Les formes italique et oblique peuvent être synthétisées par le navigateur si elles sont absente (le moteur penche alors les glyphes de la forme normale), pour plus d'informations sur l'activation de cette synthèse, voir la propriété {{cssxref("font-synthesis")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -60,11 +58,10 @@ font-style: unset; <p>Afin que l'exemple suivant fonctionne, votre navigateur doit prendre en charge la syntaxe <em>CSS Fonts Level 4</em> qui permet d'utiliser <code>font-style: oblique</code> suivi d'un angle.</p> -<div style="border: 10px solid #f5f9fa; padding: 1rem;">{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}</div> +<p>{{EmbedLiveSample("Variable_fonts", 1200, 180, "", "", "example-outcome-frame")}}</p> <h4 id="HTML">HTML</h4> -<div id="variable-font-example"> <pre class="brush: html"><header> <input type="range" id="slant" name="slant" min="-90" max="90" /> <label for="slant">Slant</label> @@ -103,8 +100,7 @@ label { </pre> -<div class="hidden"> -<pre class="brush: css">html, body { +<pre class="brush: css hidden">html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; @@ -128,7 +124,6 @@ header { margin-bottom: 0; } </pre> -</div> <h4 id="JavaScript">JavaScript</h4> @@ -146,7 +141,6 @@ slantInput.addEventListener('input', update); update(); </pre> -</div> <h2 id="Exemples">Exemples</h2> @@ -178,7 +172,7 @@ update(); <div class="note"> <p><strong>Note :</strong> Toutes les polices ne disposent pas nécessairement de formes pour <code>oblique</code> et <code>italic</code>, si ces formes sont absentes, le moteur simulera la forme absente à partir de celle qui est disponible. Voici un exemple du rendu d'une police qui dispose des différentes formes :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/12049/Screen%20Shot%202015-12-05%20at%2008.41.03.png" style="height: 135px; width: 466px;"></p> +<p><img alt="" src="screen_shot_2015-12-05_at_08.41.03.png"></p> </div> <h2 id="Accessibilité">Accessibilité</h2> @@ -186,7 +180,7 @@ update(); <p>L'utilisation de grandes portions de textes avec <code>font-style: italic</code> peut rendre la lecture difficile pour les personnes dyslexiques ou ayant des troubles cognitifs.</p> <ul> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li> <li><a href="https://www.w3.org/TR/WCAG21/#visual-presentation"><em>Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0 </em>(en anglais)</a></li> </ul> diff --git a/files/fr/web/css/font-synthesis/index.html b/files/fr/web/css/font-synthesis/index.html index 1e9c8cc657..db3390cd3b 100644 --- a/files/fr/web/css/font-synthesis/index.html +++ b/files/fr/web/css/font-synthesis/index.html @@ -14,7 +14,7 @@ translation_of: Web/CSS/font-synthesis <p>La propriété <strong><code>font-synthesis</code></strong> indique au navigateur s'il peut synthétiser la graisse ou la mise en italique des polices utilisées si ces variantes sont absentes.</p> -<pre class="brush:css notranslate">font-synthesis: none; +<pre class="brush:css">font-synthesis: none; font-synthesis: weight; font-synthesis: style; font-synthesis: weight style; @@ -56,11 +56,11 @@ font-synthesis: unset; <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div class="syn">Ne me synthétisez pas !</div></pre> +<pre class="brush: html"><div class="syn">Ne me synthétisez pas !</div></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">.syn {font-synthesis: none;} +<pre class="brush: css">.syn {font-synthesis: none;} </pre> <h3 id="Résultat">Résultat</h3> diff --git a/files/fr/web/css/font-variant-alternates/index.html b/files/fr/web/css/font-variant-alternates/index.html index a4c7d486a9..02f1d94305 100644 --- a/files/fr/web/css/font-variant-alternates/index.html +++ b/files/fr/web/css/font-variant-alternates/index.html @@ -48,19 +48,20 @@ font-variant-alternates: unset; <dd>Ce mot-clé désactive l'utilisation de tels glyphes alternatifs.</dd> <dt><code>historical-forms</code></dt> <dd>Ce mot-clé active l'affichage de formes historiques, c'est-à-dire des glyphes communs par le passé qui ne sont plus utilisés aujourd'hui. Cette valeur correspond à la valeur OpenType <code>hist</code>.</dd> - <dt><code><a name="stylistic()"></a>stylistic()</code></dt> + <dt><code>stylistic()</code></dt> <dd>Cette fonction active l'affichage de formes stylistiques alternatives. Le paramètre passé à la fonction est un nom spécifique à la fonte associé à un nombre. Elle correspond à la valeur OpenType <code>salt</code>, par exemple <code>salt 2</code>.</dd> - <dt><code><a name="styleset()"></a>styleset()</code></dt> + <dt><code>styleset()</code></dt> <dd>Cette fonction active l'utilisation d'un ensemble de caractères d'un style alternatif. Le paramètre est un nom spécifique à la fonte, associé à un nombre. Elle correspond à la valeur OpenType <code>ssXY</code> (par exemple <code>ss02</code>).</dd> - <dt><code><a name="character-variant()"></a>character-variant()</code></dt> + <dt><code>character-variant()</code></dt> <dd>Cette fonction active l'utilisation d'un ensemble de caractères stylistiques alternatifs. Elle est semblable à <code>styleset()</code> mais n'implique pas de cohérence entre les différents caractères. Avec cette valeur, les différents caractères peuvent avoir un style indépendant qui peut ne pas être cohérent. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Elle correspond à la valeur OpenType <code>cvXY</code> (par exemple <code>cv02</code>).</dd> - <dt><code><a name="swash()"></a>swash()</code></dt> + <dt><code>swash()</code></dt> <dd>Cette fonction active l'affichage des glypes <a href="https://fr.wikipedia.org/wiki/Lettre_orn%C3%A9e">pour les lettres ornées</a>. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Elle correspond aux valeurs OpenType <code>swsh</code> et <code>cswh</code> (par exemple <code>swsh 2</code> ou <code>cswh 2</code>).</dd> - <dt><code><a name="ornaments()"></a>ornaments()</code></dt> + <dt><code>ornaments()</code></dt> <dd>Cette fonction active l'affichage des ornements tels que les <a href="https://fr.wikipedia.org/wiki/Fleuron_(typographie)">fleurons</a> et autres casseaux. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Cette valeur correspond à la valeur OpenType <code>ornm</code> (par exemple <code>ornm 2</code>). - <div class="note"><strong>Note : </strong>afin de préserver la sémantique de la fonte, les fondeurs sont invités à ne pas créer de casseaux qui correspondent aux caractères Unicode déjà définis comme variantes d'ornement pour la puce (U+2022). De nombreuses fontes passent outre cette règle et perdent ainsi en qualité.</div> + <div class="note"> + <p><strong>Note :</strong> afin de préserver la sémantique de la fonte, les fondeurs sont invités à ne pas créer de casseaux qui correspondent aux caractères Unicode déjà définis comme variantes d'ornement pour la puce (U+2022). De nombreuses fontes passent outre cette règle et perdent ainsi en qualité.</p></div> </dd> - <dt><code><a name="annotation()"></a>annotation()</code></dt> + <dt><code>annotation()</code></dt> <dd>Cette fonction active l'affichage des annotations (telles que les chiffres entourés ou les caractères inversés). Le paramètre est un nom lié à la fonte auquel est associé un nombre. Cette valeur correspond à la valeur OpenType <code>nalt</code> (par exemple <code>nalt 2</code>).</dd> </dl> diff --git a/files/fr/web/css/font-variant-caps/index.html b/files/fr/web/css/font-variant-caps/index.html index 78d7d1d750..f182b3f024 100644 --- a/files/fr/web/css/font-variant-caps/index.html +++ b/files/fr/web/css/font-variant-caps/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/font-variant-caps <div>{{EmbedInteractiveExample("pages/css/font-variant-caps.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Quand une fonte inclut des glyphes de lettres capitales avec différents corps (taille), cette propriété sélectionne la plus appropriée. Si les très petites capitales ne sont pas toutes présentes pour cette fonte, ce seront les petites capitales qui seront utilisées. Si celles-ci ne sont pas présentes, le moteur les synthétisera à partir des glyphes des capitales.</p> <p>Certains caractères sans casse (comme les caractères de ponctuation) peuvent être représentés avec différents glyphes afin de mieux les représenter avec les caractères environnants. Les caractères sans casse ne sont pas synthétisés par le navigateur s'il n'y a pas de petite capitales.</p> @@ -32,7 +30,7 @@ translation_of: Web/CSS/font-variant-caps <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush:css notranslate">/* Valeurs avec un mot-clé */ +<pre class="brush:css">/* Valeurs avec un mot-clé */ font-variant-caps: normal; font-variant-caps: small-caps; font-variant-caps: all-small-caps; @@ -76,13 +74,13 @@ font-variant-caps: unset; <h3 id="CSS">CSS</h3> -<pre class="brush:css notranslate">.exemple { +<pre class="brush:css">.exemple { font-variant-caps: small-caps; }</pre> <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> La Reine devint pourpre de colère et après l’avoir considérée un moment avec des yeux flamboyants comme ceux d’une diff --git a/files/fr/web/css/font-variant-ligatures/index.html b/files/fr/web/css/font-variant-ligatures/index.html index bc4d432818..f22176a920 100644 --- a/files/fr/web/css/font-variant-ligatures/index.html +++ b/files/fr/web/css/font-variant-ligatures/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/font-variant-ligatures <div>{{EmbedInteractiveExample("pages/css/font-variant-ligatures.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">font-variant-ligatures: normal; diff --git a/files/fr/web/css/font-variant-numeric/index.html b/files/fr/web/css/font-variant-numeric/index.html index 60625ed3f5..b76c7896db 100644 --- a/files/fr/web/css/font-variant-numeric/index.html +++ b/files/fr/web/css/font-variant-numeric/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/font-variant-numeric <div>{{EmbedInteractiveExample("pages/css/font-variant-numeric.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">font-variant-numeric: normal; diff --git a/files/fr/web/css/font-variant/index.html b/files/fr/web/css/font-variant/index.html index 7f8f70fe8a..86e59df336 100644 --- a/files/fr/web/css/font-variant/index.html +++ b/files/fr/web/css/font-variant/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/font-variant <div>{{EmbedInteractiveExample("pages/css/font-variant.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">font-variant: small-caps; diff --git a/files/fr/web/css/font-variation-settings/index.html b/files/fr/web/css/font-variation-settings/index.html index 412b22650e..b8ac748682 100644 --- a/files/fr/web/css/font-variation-settings/index.html +++ b/files/fr/web/css/font-variation-settings/index.html @@ -13,13 +13,14 @@ translation_of: Web/CSS/font-variation-settings <div>{{EmbedInteractiveExample("pages/css/font-variation-settings.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété fonctionne à un niveau plus bas que {{cssxref("font-feature-settings")}} qui permet de définir les valeurs et les étiquettes (<em>tags</em>) pour les caractéristiques des polices.</p> -<div class="note"><strong>Note : </strong>Si possible, les auteurs web devraient utiliser d'autres méthodes pour contrôler l'affichage des polices de caractères et notamment la propriété raccourcie {{cssxref("font-variant")}} ou une des propriétés détaillée associée. Cette propriété est une fonctionnalité de bas niveau destinée à gérer les cas spécifiques pour lesquels il est autrement impossible d'activer ou de paramétrer une caractéristique OpenType existante.</div> +<div class="note"> + <p><strong>Note :</strong> Si possible, les auteurs web devraient utiliser d'autres méthodes pour contrôler l'affichage des polices de caractères et notamment la propriété raccourcie {{cssxref("font-variant")}} ou une des propriétés détaillée associée. Cette propriété est une fonctionnalité de bas niveau destinée à gérer les cas spécifiques pour lesquels il est autrement impossible d'activer ou de paramétrer une caractéristique OpenType existante.</p></div> -<div class="note"><strong>Note :</strong> Les caractéristiques définies avec <code>font-variation-settings</code> l'emporteront sur celles définies par les autres propriétés relatives aux polices (ex. <code>font-weight</code>), où qu'elles soient dans la cascade. Pour certains navigateurs, cela se vérifie uniquement lorsque la déclaration <code>@font-face</code> inclut un intervalle <code>font-weight</code>.</div> +<div class="note"> + <p><strong>Note :</strong> Les caractéristiques définies avec <code>font-variation-settings</code> l'emporteront sur celles définies par les autres propriétés relatives aux polices (ex. <code>font-weight</code>), où qu'elles soient dans la cascade. Pour certains navigateurs, cela se vérifie uniquement lorsque la déclaration <code>@font-face</code> inclut un intervalle <code>font-weight</code>.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -100,13 +101,13 @@ font-variation-settings: unset; <p>Les axes spécifiques peuvent correspondre à n'importe quel axe que le concepteur de la police souhaite faire varier (ce peut par exemple être la hauteur des hampes et des jambages, la taille des empattements ou tout autre chose). N'importe quel axe peut être utilisé tant qu'il a une étiquette unique sur quatre caractères. Il est possible que, si des axes spécifiques deviennent majoritairement présents, ils soient intégrés parmi les axes enregistrés.</p> <div class="note"> -<p><strong>Note </strong>: Les étiquettes des axes enregistrés sont écrits en minuscules et les axes spécifiques doivent être écrits en majuscules. On notera que rien n'oblige à suivre cette règle et qu'il est tout à fait possible que des concepteurs de polices donnent des étiquettes en minuscules à des axes spécifiques. Quoiqu'il en soit, on retiendra que les étiquettes des axes sont sensibles à la casse.</p> +<p><strong>Note :</strong> Les étiquettes des axes enregistrés sont écrits en minuscules et les axes spécifiques doivent être écrits en majuscules. On notera que rien n'oblige à suivre cette règle et qu'il est tout à fait possible que des concepteurs de polices donnent des étiquettes en minuscules à des axes spécifiques. Quoiqu'il en soit, on retiendra que les étiquettes des axes sont sensibles à la casse.</p> </div> <h2 id="Exemples">Exemples</h2> <div class="warning"> -<p><strong>Attention !</strong> Afin de pouvoir utiliser les polices variables, votre système d'exploitation doit être à jour et votre navigateur doit prendre en charge ces fonctionnalités. Ainsi, les systèmes basés sur Linux requièrent la dernière version de Linux Freetype et les systèmes macOS antérieurs à 10.13 ne prennent pas en charge les polices variables.</p> +<p><strong>Attention :</strong> Afin de pouvoir utiliser les polices variables, votre système d'exploitation doit être à jour et votre navigateur doit prendre en charge ces fonctionnalités. Ainsi, les systèmes basés sur Linux requièrent la dernière version de Linux Freetype et les systèmes macOS antérieurs à 10.13 ne prennent pas en charge les polices variables.</p> </div> <h3 id="Graisse_(wght)">Graisse (<code>wght</code>)</h3> @@ -124,7 +125,7 @@ font-variation-settings: unset; <h3 id="Autres_exemples">Autres exemples</h3> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Fonts/Guide_polices_variables">Guide sur les polices variables</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Guide sur les polices variables</a></li> <li><a href="https://v-fonts.com">v-fonts.com</a></li> <li><a href="https://axis-praxis.org">axis-praxis.org</a></li> </ul> @@ -157,7 +158,7 @@ font-variation-settings: unset; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Fonts/Guide_polices_variables">Guide sur les polices variables</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Guide sur les polices variables</a></li> <li><a href="https://www.microsoft.com/typography/otspec180/otvaroverview.htm">OpenType Font Variations Overview</a></li> <li><a href="https://www.microsoft.com/typography/otspec180/default.htm">OpenType specification</a></li> <li><a href="https://www.microsoft.com/typography/otspec/dvaraxisreg.htm">OpenType Design-Variation Axis Tag Registry</a></li> diff --git a/files/fr/web/css/font-weight/index.html b/files/fr/web/css/font-weight/index.html index 2bf9ca0d2a..f31a368277 100644 --- a/files/fr/web/css/font-weight/index.html +++ b/files/fr/web/css/font-weight/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/font-weight <div>{{EmbedInteractiveExample("pages/css/font-weight.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ @@ -142,7 +140,7 @@ font-weight: unset; </tbody> </table> -<h3 id="Correspondance_entre_les_valeurs_numériques_et_les_noms_communément_utilisés"><a id="communs" name="communs">Correspondance entre les valeurs numériques et les noms communément utilisés</a></h3> +<h3 id="Correspondance_entre_les_valeurs_numériques_et_les_noms_communément_utilisés">Correspondance entre les valeurs numériques et les noms communément utilisés</h3> <p>Les valeurs allant de 100 à 900 correspondent environ aux noms suivants, communément utilisés pour désigner les variantes de fonte, selon la graisse, d'une même police (<em>NdT : les noms sont laissés en anglais car généralement utilisés tels quels</em>) :</p> @@ -205,11 +203,10 @@ font-weight: unset; <p>Pour que l'exemple suivant fonctionne, il est nécessaire d'utiliser un navigateur qui prend en charge la spécification <em>CSS Fonts</em> de niveau 4.</p> -<div>{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}</div> +<div>{{EmbedLiveSample("Polices_variables", 1200, 180, "", "", "example-outcome-frame")}}</div> <h4 id="HTML">HTML</h4> -<div id="variable-font-example"> <pre class="brush: html"><header> <input type="range" id="weight" name="weight" min="1" max="1000" /> <label for="weight">Weight</label> @@ -249,8 +246,7 @@ label { } </pre> -<div class="hidden"> -<pre class="brush: css">html, body { +<pre class="brush: css hidden">html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; @@ -274,7 +270,6 @@ header { margin-bottom: 0; } </pre> -</div> <h4 id="JavaScript">JavaScript</h4> @@ -291,7 +286,6 @@ weightInput.addEventListener('input', update); update(); </pre> -</div> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -339,10 +333,10 @@ span { <h2 id="Accessibilité">Accessibilité</h2> -<p>Pour les personnes ayant une vision faible, il peut être extrêmement difficile de lire un texte avec <code>font-weight</code> qui vaut <code>100</code> ou <code>200</code>, notamment <a href="/fr/docs/Web/CSS/color#Accessibilité">si le contraste entre le texte et l'arrière-plan est faible</a>.</p> +<p>Pour les personnes ayant une vision faible, il peut être extrêmement difficile de lire un texte avec <code>font-weight</code> qui vaut <code>100</code> ou <code>200</code>, notamment <a href="/fr/docs/Web/CSS/color#accessibilité">si le contraste entre le texte et l'arrière-plan est faible</a>.</p> <ul> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener"><em>Understanding Success Criterion 1.4.8 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/font/index.html b/files/fr/web/css/font/index.html index 39c30122ca..0b2d7f2356 100644 --- a/files/fr/web/css/font/index.html +++ b/files/fr/web/css/font/index.html @@ -19,8 +19,6 @@ translation_of: Web/CSS/font <div>{{EmbedInteractiveExample("pages/css/font.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Comme pour les autres propriétés CSS, les valeurs qui ne sont pas définies avec la propriété raccourcie sont définies avec leur valeur initiale, ce qui peut surcharger les valeurs définies précédemment avec les propriétés « détaillées ». Bien qu'elles ne puissent pas directement être paramétrées avec <code>font</code>, les propriétés détaillées, {{cssxref("font-size-adjust")}}, et {{cssxref("font-kerning")}} sont également réinitialisées avec leurs valeurs initiales.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -94,7 +92,7 @@ font: unset; <dd>Voir la propriété {{cssxref("line-height")}}.</dd> <dt><code><'font-family'></code></dt> <dd>Voir la propriété {{cssxref("font-family")}}.</dd> - <dt><a id="keyword">Polices système :<code>caption</code> <code>icon</code> <code>menu</code> <code>message-box</code> <code>small-caption</code> <code>status-bar</code></a></dt> + <dt>Polices système :<code>caption</code> <code>icon</code> <code>menu</code> <code>message-box</code> <code>small-caption</code> <code>status-bar</code></dt> <dd>Un mot-clé peut être utilisé pour indiquer une police système spécifique : <table class="standard-table"> <tbody> diff --git a/files/fr/web/css/forced-color-adjust/index.html b/files/fr/web/css/forced-color-adjust/index.html index 2520c4fba1..6ce5f780c3 100644 --- a/files/fr/web/css/forced-color-adjust/index.html +++ b/files/fr/web/css/forced-color-adjust/index.html @@ -82,8 +82,7 @@ forced-color-adjust: unset;</pre> <p>{{EmbedLiveSample("preserving_colors", 640, 260)}}</p> -<figure role="figure" aria-label="L'exemple présenté ci-dessus restitué dans le mode de contrastes forts de Windows"><img src="windows-high-contrast.jpg" alt="L'exemple présenté ci-dessus affiche la première boîte avec un arrière-plan noir et la seconde avec un arrière-plan gris définit en CSS."> -<figcaption>L'exemple ci-dessus restitué dans le mode de contrastes forts de Windows</figcaption></figure> +<img src="windows-high-contrast.jpg" alt="L'exemple présenté ci-dessus affiche la première boîte avec un arrière-plan noir et la seconde avec un arrière-plan gris définit en CSS."> <h2 id="specifications">Spécifications</h2> diff --git a/files/fr/web/css/frequency/index.html b/files/fr/web/css/frequency/index.html index 9c698cf69a..f59efc67ae 100644 --- a/files/fr/web/css/frequency/index.html +++ b/files/fr/web/css/frequency/index.html @@ -61,7 +61,7 @@ translation_of: Web/CSS/frequency </tbody> </table> -<p>Ce type de donnés fut initialement introduit avec la spécification <a class="external" href="https://www.w3.org/TR/CSS2/">CSS Niveau 2</a> pour le <a href="/fr/docs/Web/CSS/@media/aural">groupe de média aural</a> qui est désormais obsolète. Ce type de données a donc été déprécié puis réintroduit avec CSS3 bien qu'aucune propriété ne l'utilise à l'heure actuelle.</p> +<p>Ce type de donnés fut initialement introduit avec la spécification <a href="https://www.w3.org/TR/CSS2/">CSS Niveau 2</a> pour le <a href="/fr/docs/Web/CSS/@media/aural">groupe de média aural</a> qui est désormais obsolète. Ce type de données a donc été déprécié puis réintroduit avec CSS3 bien qu'aucune propriété ne l'utilise à l'heure actuelle.</p> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> diff --git a/files/fr/web/css/gap/index.html b/files/fr/web/css/gap/index.html index ec7935f221..a4e27262ac 100644 --- a/files/fr/web/css/gap/index.html +++ b/files/fr/web/css/gap/index.html @@ -14,15 +14,13 @@ translation_of: Web/CSS/gap <div>{{EmbedInteractiveExample("pages/css/gap.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> La propriété {{cssxref("grid-gap")}} a initialement été définie dans le module de spécification <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>. Cette version préfixée a été remplacée par <code>gap</code>. Toutefois, à des fins de compatibilité envers les navigateurs qui n'implémentent pas encore la version non-préfixée, mieux vaut utiliser les deux versions.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush: css no-line-numbers notranslate">/* Une valeur de longueur */ +<pre class="brush: css no-line-numbers">/* Une valeur de longueur */ /* Type <length> */ gap: 20px; gap: 1em; @@ -80,7 +78,7 @@ gap: unset; <h4 id="HTML">HTML</h4> -<pre class="brush: html; notranslate"><div id="flexbox"> +<pre class="brush: html;"><div id="flexbox"> <div></div> <div></div> <div></div> @@ -92,7 +90,7 @@ gap: unset; <h4 id="CSS">CSS</h4> -<pre class="brush: css; highlight[5] notranslate">#flexbox { +<pre class="brush: css">#flexbox { display: flex; flex-wrap: wrap; width: 300px; @@ -117,7 +115,7 @@ gap: unset; <h4 id="HTML_2">HTML</h4> -<pre class="brush: html; notranslate"><div id="grid"> +<pre class="brush: html;"><div id="grid"> <div></div> <div></div> <div></div> @@ -131,14 +129,12 @@ gap: unset; <h4 id="CSS_2">CSS</h4> -<div class="hidden"> -<pre class="brush: css notranslate">#grid { +<pre class="brush: css hidden">#grid { grid-gap: 20px 5px; } </pre> -</div> -<pre class="brush: css; highlight[5] notranslate">#grid { +<pre class="brush: css">#grid { display: grid; height: 200px; grid-template: repeat(3, 1fr) / repeat(3, 1fr); @@ -159,7 +155,7 @@ gap: unset; <h4 id="HTML_3">HTML</h4> -<pre class="brush: html; notranslate"><p class="content-box"> +<pre class="brush: html;"><p class="content-box"> voici un texte en multi-colonne sur des colonnes avec une gouttière de 40 pixels créée grâce à la propriété CSS <code>gap</code>. Est-ce que c'est pas trop génial ? @@ -168,7 +164,7 @@ gap: unset; <h4 id="CSS_3">CSS</h4> -<pre class="brush: css; highlight[3] notranslate">.content-box { +<pre class="brush: css">.content-box { column-count: 3; gap: 40px; } diff --git a/files/fr/web/css/general_sibling_combinator/index.html b/files/fr/web/css/general_sibling_combinator/index.html index 96352aacb8..683722db57 100644 --- a/files/fr/web/css/general_sibling_combinator/index.html +++ b/files/fr/web/css/general_sibling_combinator/index.html @@ -13,7 +13,7 @@ original_slug: Web/CSS/Sélecteurs_de_voisins_généraux <p>Le combinateur <code>~</code> permet de séparer deux sélecteurs et de cibler un élément si celui-ci correspond au second sélecteur et est précédé (mais pas forcément voisin immédiat) d'un autre élément correspondant au premier sélecteur qui partage le même parent. Les deux éléments sont des fils d'un même parent {{domxref("Element")}}, voisins immédiats ou pas.</p> -<pre class="brush: css no-line-numbers notranslate">/* Parmi tous les éléments <img>, cibler tous +<pre class="brush: css no-line-numbers">/* Parmi tous les éléments <img>, cibler tous éléments <p> qui les suivent. */ img ~ p { color: red; @@ -21,20 +21,20 @@ img ~ p { <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">premier_element ~ second_element { <em>propriétés de style</em> } +<pre class="syntaxbox">premier_element ~ second_element { <em>propriétés de style</em> } </pre> <h2 id="Exemples">Exemples</h2> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p ~ span { +<pre class="brush: css">p ~ span { color: red; }</pre> <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><span>Ici, ce n'est pas rouge.</span> +<pre class="brush: html"><span>Ici, ce n'est pas rouge.</span> <p>Voici un paragraphe.</p> <code>Un peu de code.</code> <span>Et un autre span.</span> diff --git a/files/fr/web/css/gradient/index.html b/files/fr/web/css/gradient/index.html index 76c1c773d0..99fc1e5279 100644 --- a/files/fr/web/css/gradient/index.html +++ b/files/fr/web/css/gradient/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/gradient <div>{{EmbedInteractiveExample("pages/css/type-gradient.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Comme pour l'interpolation des autres couleurs, les dégradés sont calculés dans l'espace de couleurs alpha prémultiplié. Cela permet d'éviter l'apparition de nuances de gris lorsque la couleur et l'opacité varient (on peut constater ce problème avec le mot-clé <code>transparent</code> dans d'anciens navigateurs).</p> <h2 id="Les_types_de_dégradés">Les types de dégradés</h2> @@ -69,24 +67,20 @@ translation_of: Web/CSS/gradient <p>Les couleurs de transitions s'appliquent progressivement autour d'un cercle. Un tel dégradé est généré avec la fonction {{cssref("conic-gradient","conic-gradient()")}}.</p> -<div id="conic-gradient"> -<div class="hidden"> -<pre class="brush: html"><div class="conic-gradient">Conic gradient</div> +<pre class="brush: html hidden"><div class="conic-gradient">Conic gradient</div> </pre> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { width: 200px; height: 200px; }</pre> -</div> <pre class="brush: css">.conic-gradient { background: conic-gradient(lightpink, white, powderblue); } </pre> -<p>{{EmbedLiveSample('conic-gradient', 240, 80)}}</p> -</div> +<p>{{EmbedLiveSample('dégradé_conique', 240, 80)}}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/grid-area/index.html b/files/fr/web/css/grid-area/index.html index bd0d2366b5..ba2cd9ed2e 100644 --- a/files/fr/web/css/grid-area/index.html +++ b/files/fr/web/css/grid-area/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-area <div>{{EmbedInteractiveExample("pages/css/grid-area.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Si quatre valeurs <code><grid-line></code> sont fournies, la première sera appliquée à <code>grid-row-start</code>, la deuxième à <code>grid-column-start</code>, la troisième à <code>grid-row-end</code> et la quatrième à <code>grid-column-end</code>.</p> <p>Lorsqu'il n'y a pas de valeur pour <code>grid-column-end</code>, si <code>grid-column-start</code> est un identifiant de zone ({{cssxref("<custom-ident>")}}, <code>grid-column-end</code> sera défini avec cet identifiant, sinon il sera défini avec <code>auto</code>.</p> @@ -58,7 +56,7 @@ grid-area: unset;</pre> <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (<em>span</em>) automatique ou une taille par défaut de <code>1</code>.</dd> <dt><code><custom-ident></code></dt> <dd>S'il existe une ligne nommée avec '<custom-ident>-start', la première ligne correspondante contribue au placement de l'élément sur la grille. - <p class="note"><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-area: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne <code>foo-start</code> a été explicitement déclarée).</p> + <div class="note"><p><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-area: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne <code>foo-start</code> a été explicitement déclarée).</p></div> <p>Sinon, la valeur est traitée comme si on avait utilisé <code><custom-ident></code> et la valeur <code>1</code>.</p> </dd> @@ -84,7 +82,7 @@ grid-area: unset;</pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[9]">#grid { +<pre class="brush: css">#grid { display: grid; height: 100px; grid-template: repeat(4, 1fr) / 50px 100px; @@ -149,6 +147,6 @@ grid-area: unset;</pre> <li>{{cssxref("grid-column")}}</li> <li>{{cssxref("grid-column-start")}}</li> <li>{{cssxref("grid-column-end")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">Guide : les zones des grilles CSS</a></li> - <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/grid-template-areas/">les zones des grilles CSS (en anglais)</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Guide : les zones des grilles CSS</a></li> + <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/grid-template-areas/">les zones des grilles CSS (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/grid-auto-columns/index.html b/files/fr/web/css/grid-auto-columns/index.html index 6921b52014..a993203277 100644 --- a/files/fr/web/css/grid-auto-columns/index.html +++ b/files/fr/web/css/grid-auto-columns/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/grid-auto-columns <div>{{EmbedInteractiveExample("pages/css/grid-auto-columns.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Si un élément de la grille est positionné sur une colonne dont la taille n'est pas explicitement définie avec {{cssxref("grid-template-columns")}}, une piste implicite est créée pour contenir l'élément. Cela peut se produire lorsqu'on positionne un élément sur une ligne inexistante ou lorsque l'algorithme de placement automatique ajoute des colonnes supplémentaires.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -84,9 +82,7 @@ grid-auto-columns: unset; <dt><code>fit-content(argument)</code></dt> <dd>Cette notation représente la formule <code>min(max-content, max(auto, argument))</code> qui est calculée de façon semblable à <code>auto</code>, sauf qu'ici, la taille de la piste est écrétée à <em>argument</em> s'i elle est plus grande que le minimum <code>auto</code>.</dd> <dt><code>auto</code></dt> - <dd>Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille.</dd> - <dd> - <p class="note"><strong>Note :</strong> Les pistes de taille <code>auto</code> (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p> + <dd>Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille. <div class="note"><p><strong>Note :</strong> Les pistes de taille <code>auto</code> (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p></div> </dd> </dl> @@ -98,7 +94,7 @@ grid-auto-columns: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[6]">#grid { +<pre class="brush: css">#grid { width: 100px; display: grid; grid-template-areas: "a a"; @@ -153,6 +149,6 @@ grid-auto-columns: unset; <li>{{cssxref("grid-auto-rows")}}</li> <li>{{cssxref("grid-auto-flow")}}</li> <li>{{cssxref("grid")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS#Dimensionner_les_lignes_de_la_grille_implicite">Guide : le placement automatique sur la grille - dimensionner les lignes de la grille implicite</a></li> - <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-auto-placement-order/">Introduction au placement automatique sur la grille et à l'ordre des éléments (en anglais)</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout#dimensionner_les_lignes_de_la_grille_implicite">Guide : le placement automatique sur la grille - dimensionner les lignes de la grille implicite</a></li> + <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-auto-placement-order/">Introduction au placement automatique sur la grille et à l'ordre des éléments (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/grid-auto-flow/index.html b/files/fr/web/css/grid-auto-flow/index.html index bc3fcad666..1eb36acdc2 100644 --- a/files/fr/web/css/grid-auto-flow/index.html +++ b/files/fr/web/css/grid-auto-flow/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-auto-flow <div>{{EmbedInteractiveExample("pages/css/grid-auto-flow.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */ @@ -58,7 +56,7 @@ grid-auto-flow: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[7]">#grid { +<pre class="brush: css">#grid { height: 200px; width: 200px; display: grid; diff --git a/files/fr/web/css/grid-auto-rows/index.html b/files/fr/web/css/grid-auto-rows/index.html index 2dca2b456e..33e3e8721c 100644 --- a/files/fr/web/css/grid-auto-rows/index.html +++ b/files/fr/web/css/grid-auto-rows/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-auto-rows <div>{{EmbedInteractiveExample("pages/css/grid-auto-rows.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Si un élément de la grille est positionné sur une ligne dont la taille n'est pas explicitement définie avec {{cssxref("grid-template-rows")}}, une piste implicite est créée pour contenir l'élément. Cela peut se produire lorsqu'on positionne un élément sur une ligne inexistante ou lorsque l'algorithme de placement automatique ajoute des lignes supplémentaires.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -77,9 +75,7 @@ grid-auto-rows: unset; <dt><code>minmax(min, max)</code></dt> <dd>Une notation fonctionnelle qui définit un intervalle de taille entre <code>min</code> et <code>max</code>. Si <code>max</code> est inférieur à <code>min</code>, <code>max</code> est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur <code><flex></code> qui définit le facteur de flexibilité de la piste. En tant que minimum, elle est gérée comme zéro (ou comme le contenu minimal si le conteneur de la grille impose une contrainte de contenu minimal).</dd> <dt><code>auto</code></dt> - <dd>Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille.</dd> - <dd> - <p class="note"><strong>Note :</strong> Les pistes de taille <code>auto</code> (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p> + <dd>Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille. <div class="note"><p><strong>Note :</strong> Les pistes de taille <code>auto</code> (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p></div> </dd> </dl> @@ -91,7 +87,7 @@ grid-auto-rows: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[6]">#grid { +<pre class="brush: css">#grid { width: 200px; display: grid; grid-template-areas: "a a"; @@ -146,6 +142,6 @@ grid-auto-rows: unset; <li>{{cssxref("grid-auto-columns")}}</li> <li>{{cssxref("grid-auto-flow")}}</li> <li>{{cssxref("grid")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS#Dimensionner_les_lignes_de_la_grille_implicite">Guide : le placement automatique sur la grille - dimensionner les lignes de la grille implicite</a></li> - <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-auto-placement-order/">Introduction au placement automatique sur la grille et à l'ordre des éléments (en anglais)</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout#dimensionner_les_lignes_de_la_grille_implicite">Guide : le placement automatique sur la grille - dimensionner les lignes de la grille implicite</a></li> + <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-auto-placement-order/">Introduction au placement automatique sur la grille et à l'ordre des éléments (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/grid-column-end/index.html b/files/fr/web/css/grid-column-end/index.html index 0faefe81c5..d001f397c9 100644 --- a/files/fr/web/css/grid-column-end/index.html +++ b/files/fr/web/css/grid-column-end/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-column-end <div>{{EmbedInteractiveExample("pages/css/grid-column-end.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */ @@ -45,7 +43,7 @@ grid-column-end: unset; <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'objet sur la grille. Par défaut, la taille du fragment allouée vaut <code>1</code> s'il n'y a pas d'autres contraintes.</dd> <dt><code><custom-ident></code></dt> <dd>S'il existe une ligne nommée '<custom-ident>-end', cela placera l'élément sur la première ligne correspondante.. - <p class="note"><strong>Note :</strong> Les noms de zones génèrent automatiquement les noms de colonnes sous cette forme. Ainsi, <code>grid-column-end: foo;</code> permettra de désigner l'extrêmité (à la fin) de la zone nommée (sauf si une autre colonne a explicitement été nommée avec <code>foo-end</code>).</p> + <div class="note"><p><strong>Note :</strong> Les noms de zones génèrent automatiquement les noms de colonnes sous cette forme. Ainsi, <code>grid-column-end: foo;</code> permettra de désigner l'extrêmité (à la fin) de la zone nommée (sauf si une autre colonne a explicitement été nommée avec <code>foo-end</code>).</p></div> <p>Si aucune zone ne correspond, la valeur est traitée comme la combinaison de l'entier 1 et de <code><custom-ident></code> (cf. définition suivante).</p> </dd> @@ -98,8 +96,7 @@ grid-column-end: unset; } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -122,7 +119,6 @@ grid-column-end: unset; padding: 1em; } </pre> -</div> <p>{{EmbedLiveSample('Exemples', '230', '420')}}</p> @@ -159,6 +155,6 @@ grid-column-end: unset; <li>{{cssxref("grid-row-start")}}</li> <li>{{cssxref("grid-row-end")}}</li> <li>{{cssxref("grid-row")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : le placement sur les lignes d'une grille</a></li> - <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-line-based-placement/">le placement sur les lignes (en anglais)</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Guide : le placement sur les lignes d'une grille</a></li> + <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-line-based-placement/">le placement sur les lignes (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/grid-column-start/index.html b/files/fr/web/css/grid-column-start/index.html index 4687f88a42..a836b66012 100644 --- a/files/fr/web/css/grid-column-start/index.html +++ b/files/fr/web/css/grid-column-start/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-column-start <div>{{EmbedInteractiveExample("pages/css/grid-column-start.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */ @@ -55,7 +53,7 @@ grid-column-start: unset; <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (<em>span</em>) automatique ou une taille par défaut de <code>1</code>.</dd> <dt><code><custom-ident></code></dt> <dd>S'il existe une ligne nommée avec '<custom-ident>-start', la première ligne correspondante contribue au placement de l'élément sur la grille. - <p class="note"><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-column-start: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne <code>foo-start</code> a été explicitement déclarée).</p> + <div class="note"><p><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-column-start: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne <code>foo-start</code> a été explicitement déclarée).</p></div> <p>Sinon, la valeur est traitée comme si on avait utilisé <code><custom-ident></code> et la valeur <code>1</code>.</p> </dd> @@ -110,8 +108,7 @@ grid-column-start: unset; } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -134,7 +131,6 @@ grid-column-start: unset; padding: 1em; } </pre> -</div> <p>{{EmbedLiveSample('Exemples', '230', '420')}}</p> @@ -171,6 +167,6 @@ grid-column-start: unset; <li>{{cssxref("grid-row-start")}}</li> <li>{{cssxref("grid-row-end")}}</li> <li>{{cssxref("grid-row")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : le placement sur les lignes d'une grille</a></li> - <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-line-based-placement/">le placement sur les lignes (en anglais)</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Guide : le placement sur les lignes d'une grille</a></li> + <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-line-based-placement/">le placement sur les lignes (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/grid-column/index.html b/files/fr/web/css/grid-column/index.html index ec99cb6e15..f66d2c735d 100644 --- a/files/fr/web/css/grid-column/index.html +++ b/files/fr/web/css/grid-column/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-column <div>{{EmbedInteractiveExample("pages/css/grid-column.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Si deux valeurs <code><strong><grid-line></strong></code> sont utilisées pour la propriété, la valeur de <strong><code>grid-column-start</code></strong> sera définie avec la première valeur avant la barre oblique et la valeur de <strong><code>grid-column-end</code></strong> sera définie avec celle qui est située après la barre oblique.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -64,7 +62,7 @@ grid-column: unset; <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (<em>span</em>) automatique ou une taille par défaut de <code>1</code>.</dd> <dt><code><custom-ident></code></dt> <dd>S'il existe une ligne nommée avec '<custom-ident>-start'/'<custom-ident>-end', la première colonne correspondante contribue au placement de l'élément sur la grille. - <p class="note"><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-column-start: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre colonne <code>foo-start</code>/<code>foo-end</code> a été explicitement déclarée).</p> + <div class="note"><p><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-column-start: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre colonne <code>foo-start</code>/<code>foo-end</code> a été explicitement déclarée).</p></div> <p>Sinon, la valeur est traitée comme si on avait utilisé <code><custom-ident></code> et la valeur <code>1</code>.</p> </dd> @@ -90,7 +88,7 @@ grid-column: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[14,19]">#grid { +<pre class="brush: css">#grid { display: grid; height: 100px; grid-template-columns: repeat(6, 1fr); @@ -160,6 +158,6 @@ grid-column: unset; <li>{{cssxref("grid-row-end")}}</li> <li>{{cssxref("grid-column-start")}}</li> <li>{{cssxref("grid-column-end")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : le placement sur les lignes d'une grille CSS</a></li> - <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-line-based-placement/">le placement sur les lignes (en anglais)</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Guide : le placement sur les lignes d'une grille CSS</a></li> + <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-line-based-placement/">le placement sur les lignes (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/grid-row-end/index.html b/files/fr/web/css/grid-row-end/index.html index 18fafbffc8..5902383d70 100644 --- a/files/fr/web/css/grid-row-end/index.html +++ b/files/fr/web/css/grid-row-end/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-row-end <div>{{EmbedInteractiveExample("pages/css/grid-row-end.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */ @@ -45,7 +43,7 @@ grid-row-end: unset; <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'objet sur la grille. Par défaut, la taille du fragment allouée vaut <code>1</code> s'il n'y a pas d'autres contraintes.</dd> <dt><code><custom-ident></code></dt> <dd>S'il existe une ligne nommée '<custom-ident>-end', cela placera l'élément sur la première ligne correspondante.. - <p class="note"><strong>Note :</strong> Les noms de zones génèrent automatiquement les noms de lignes sous cette forme. Ainsi, <code>grid-row-end: foo;</code> permettra de désigner l'extrêmité (à la fin) de la zone nommée (sauf si une autre ligne a explicitement été nommée avec <code>foo-end</code>).</p> + <div class="note"><p><strong>Note :</strong> Les noms de zones génèrent automatiquement les noms de lignes sous cette forme. Ainsi, <code>grid-row-end: foo;</code> permettra de désigner l'extrêmité (à la fin) de la zone nommée (sauf si une autre ligne a explicitement été nommée avec <code>foo-end</code>).</p></div> <p>Si aucune zone ne correspond, la valeur est traitée comme la combinaison de l'entier 1 et de <code><custom-ident></code> (cf. définition suivante).</p> @@ -98,8 +96,7 @@ grid-row-end: unset; } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -122,7 +119,6 @@ grid-row-end: unset; padding: 1em; } </pre> -</div> <p>{{EmbedLiveSample('Exemples', '230', '420')}}</p> @@ -159,6 +155,6 @@ grid-row-end: unset; <li>{{cssxref("grid-column-start")}}</li> <li>{{cssxref("grid-column-end")}}</li> <li>{{cssxref("grid-column")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : Placer les éléments d'une grille sur les lignes</a></li> - <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-line-based-placement/">le placement des éléments d'une grille sur les lignes (en anglais)</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Guide : Placer les éléments d'une grille sur les lignes</a></li> + <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-line-based-placement/">le placement des éléments d'une grille sur les lignes (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/grid-row-start/index.html b/files/fr/web/css/grid-row-start/index.html index 0e3cf54e05..f39fc139e1 100644 --- a/files/fr/web/css/grid-row-start/index.html +++ b/files/fr/web/css/grid-row-start/index.html @@ -11,9 +11,7 @@ translation_of: Web/CSS/grid-row-start <p>La propriété <strong><code>grid-row-start</code></strong> définit le début de la position, sur une ligne, d'un élément placé sur la grille qui participe à une ligne, à un fragment de ligne ou rien (automatique). Par conséquent, cela définit également le début de la zone de la grille pour cet élément.</p> -<div>{{EmbedInteractiveExample("pages/css/grid-row-start.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<div>{{EmbedInteractiveExample("pages/css/grid-row-start.html")}}</div <h2 id="Syntaxe">Syntaxe</h2> @@ -55,7 +53,7 @@ grid-row-start: unset; <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (<em>span</em>) automatique ou une taille par défaut de <code>1</code>.</dd> <dt><code><custom-ident></code></dt> <dd>S'il existe une ligne nommée avec '<custom-ident>-start', la première ligne correspondante contribue au placement de l'élément sur la grille. - <p class="note"><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-row-start: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne <code>foo-start</code> a été explicitement déclarée).</p> + <div class="note"><p><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-row-start: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne <code>foo-start</code> a été explicitement déclarée).</p></div> <p>Sinon, la valeur est traitée comme si on avait utilisé <code><custom-ident></code> et la valeur <code>1</code>.</p> </dd> @@ -110,8 +108,7 @@ grid-row-start: unset; } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -134,7 +131,6 @@ grid-row-start: unset; padding: 1em; } </pre> -</div> <p>{{ EmbedLiveSample('Exemples', '230', '420') }}</p> @@ -171,6 +167,6 @@ grid-row-start: unset; <li>{{cssxref("grid-column-start")}}</li> <li>{{cssxref("grid-column-end")}}</li> <li>{{cssxref("grid-column")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : Placer les éléments d'une grille sur les lignes</a></li> - <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-line-based-placement/">le placement des éléments d'une grille sur les lignes (en anglais)</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Guide : Placer les éléments d'une grille sur les lignes</a></li> + <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-line-based-placement/">le placement des éléments d'une grille sur les lignes (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/grid-row/index.html b/files/fr/web/css/grid-row/index.html index 09bdf58085..f4c5b0b205 100644 --- a/files/fr/web/css/grid-row/index.html +++ b/files/fr/web/css/grid-row/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-row <div>{{EmbedInteractiveExample("pages/css/grid-row.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Si deux valeurs <strong><grid-line></strong> sont utilisées pour la propriété, la valeur de <strong><code>grid-row-start</code></strong> sera définie avec la première valeur avant la barre oblique et la valeur de <strong><code>grid-row-end</code></strong> sera définie avec celle qui est située après la barre oblique.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -52,7 +50,7 @@ grid-row: unset; <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (<em>span</em>) automatique ou une taille par défaut de <code>1</code>.</dd> <dt><code><custom-ident></code></dt> <dd>S'il existe une ligne nommée avec '<custom-ident>-start'/'<custom-ident>-end', la première ligne correspondante contribue au placement de l'élément sur la grille. - <p class="note"><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-row-start: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne <code>foo-start</code>/<code>foo-end</code> a été explicitement déclarée).</p> + <div class="note"><p><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-row-start: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne <code>foo-start</code>/<code>foo-end</code> a été explicitement déclarée).</p></div> <p>Sinon, la valeur est traitée comme si on avait utilisé <code><custom-ident></code> et la valeur <code>1</code>.</p> </dd> @@ -78,7 +76,7 @@ grid-row: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[14,19]">#grid { +<pre class="brush: css">#grid { display: grid; height: 200px; grid-template-columns: 200px; @@ -145,6 +143,6 @@ grid-row: unset; <li>{{cssxref("grid-column")}}</li> <li>{{cssxref("grid-column-start")}}</li> <li>{{cssxref("grid-column-end")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : Placer les éléments d'une grille sur les lignes</a></li> - <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-line-based-placement/">le placement des éléments d'une grille sur les lignes (en anglais)</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Guide : Placer les éléments d'une grille sur les lignes</a></li> + <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-line-based-placement/">le placement des éléments d'une grille sur les lignes (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/grid-template-areas/index.html b/files/fr/web/css/grid-template-areas/index.html index 458b89d1eb..f773ecdb67 100644 --- a/files/fr/web/css/grid-template-areas/index.html +++ b/files/fr/web/css/grid-template-areas/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-template-areas <div>{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Ces zones ne sont pas associées à un objet de la grille mais peuvent être utilisées avec les propriétés de placement : {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}} et les méthodes de raccourci correspondantes {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, and {{cssxref("grid-area")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -60,7 +58,7 @@ grid-template-areas: unset; <h3 id="CSS">CSS</h3> -<pre class="brush:css; highlight[5-7]">#page { +<pre class="brush:css">#page { display: grid; width: 100%; height: 250px; diff --git a/files/fr/web/css/grid-template-columns/index.html b/files/fr/web/css/grid-template-columns/index.html index 74a3f4baf9..6900f77183 100644 --- a/files/fr/web/css/grid-template-columns/index.html +++ b/files/fr/web/css/grid-template-columns/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-template-columns <div>{{EmbedInteractiveExample("pages/css/grid-template-columns.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */ @@ -57,20 +55,18 @@ grid-template-columns: unset; <dd>Une dimension positive dont l'unité <code>fr</code> indique le facteur de flexibilité de la piste. Chaque piste dimensionnée avec <code><flex></code> occupera une partie de l'espace restant en fonction de ce facteur. <p>Lorsque cette valeur apparaît en dehors de la notation <code>minmax()</code>, la valeur minimale <code>auto</code> est implicite (la valeur signifie <code>minmax(auto, <flex>)</code>). Voir {{cssxref("<flex>")}}.</p> </dd> - <dt id="max-content"><code>max-content</code></dt> + <dt><code>max-content</code></dt> <dd>Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille.</dd> <dt><code>min-content</code></dt> <dd>Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille.</dd> - <dt>{{cssxref("minmax","minmax(min, max)")}}</dt> + <dt>{{cssxref("minmax()","minmax(min, max)")}}</dt> <dd>Une notation fonctionnelle qui définit un intervalle de taille entre <code>min</code> et <code>max</code>. Si <code>max</code> est inférieur à <code>min</code>, <code>max</code> est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur <code><flex></code> qui définit le facteur de flexibilité de la piste. Cette valeur est invalide en tant que minimum.</dd> - <dt id="auto"><code>auto</code></dt> - <dd>Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille.</dd> - <dd> - <p class="note"><strong>Note :</strong> Les pistes de taille <code>auto</code> (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p> + <dt><code>auto</code></dt> + <dd>Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille. <div class="note"><p><strong>Note :</strong> Les pistes de taille <code>auto</code> (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p></div> </dd> - <dt id="fit-content()">{{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}</dt> + <dt>{{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}</dt> <dd>Cette notation représente la formule <code>min(max-content, max(auto, argument))</code> qui est calculée comme pour <code>auto</code> (i.e. <code>minmax(auto, max-content)</code>) sauf que la taille de la piste est ramenée à <em>argument</em> si elle est plus grande que le minimum fourni par <code>auto</code>.</dd> - <dt>{{cssxref("repeat","repeat( [ <positive-integer> | auto-fill | auto-fit ], <track-list> )")}}</dt> + <dt>{{cssxref("repeat()","repeat( [ <positive-integer> | auto-fill | auto-fit ], <track-list> )")}}</dt> <dd>Représente un fragment répété d'une liste de pistes, cela permet de gérer des grilles avec de nombreuses colonnes pour lesquelles on réutilise un motif.</dd> </dl> @@ -138,6 +134,6 @@ grid-template-columns: unset; <li>{{cssxref("grid-template-rows")}}</li> <li>{{cssxref("grid-template-areas")}}</li> <li>{{cssxref("grid-template")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Les_pistes">Guide : les concepts de base pour les grilles CSS : les pistes</a></li> - <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-define-a-grid/">définir une grille (en anglais)</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#les_pistes">Guide : les concepts de base pour les grilles CSS : les pistes</a></li> + <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-define-a-grid/">définir une grille (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/grid-template-rows/index.html b/files/fr/web/css/grid-template-rows/index.html index 6bbcfb190b..7fd43b2d89 100644 --- a/files/fr/web/css/grid-template-rows/index.html +++ b/files/fr/web/css/grid-template-rows/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-template-rows <div>{{EmbedInteractiveExample("pages/css/grid-template-rows.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */ @@ -65,16 +63,14 @@ grid-template-rows: unset; <dd>Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille.</dd> <dt><code>min-content</code></dt> <dd>Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille.</dd> - <dt>{{cssxref("minmax", "minmax(min, max)")}}</dt> + <dt>{{cssxref("minmax()", "minmax(min, max)")}}</dt> <dd>Une notation fonctionnelle qui définit un intervalle de taille entre <code>min</code> et <code>max</code>. Si <code>max</code> est inférieur à <code>min</code>, <code>max</code> est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur <code><flex></code> qui définit le facteur de flexibilité de la piste. Cette notation est invalide en tant que minimum.</dd> <dt><code>auto</code></dt> - <dd>Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille.</dd> - <dd> - <p class="note"><strong>Note :</strong> Les pistes de taille <code>auto</code> (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p> + <dd>Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille. <div class="note"><p><strong>Note :</strong> Les pistes de taille <code>auto</code> (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p></div> </dd> <dt>{{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}</dt> <dd>Cette notation représente la formule <code>min(max-content, max(auto, argument))</code> qui est calculée comme pour <code>auto</code> (i.e. <code>minmax(auto, max-content)</code>) sauf que la taille de la piste est ramenée à <em>argument</em> si elle est plus grande que le minimum fourni par <code>auto</code>.</dd> - <dt>{{cssxref("repeat","repeat( [ <positive-integer> | auto-fill | auto-fit ], <track-list> )")}}</dt> + <dt>{{cssxref("repeat()","repeat( [ <positive-integer> | auto-fill | auto-fit ], <track-list> )")}}</dt> <dd>Représente un fragment répété d'une liste de pistes, cela permet de gérer des grilles avec de nombreuses lignes pour lesquelles on réutilise un motif.</dd> </dl> @@ -142,6 +138,6 @@ grid-template-rows: unset; <li>{{cssxref("grid-template-columns")}}</li> <li>{{cssxref("grid-template-areas")}}</li> <li>{{cssxref("grid-template")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Les_pistes">Guide : les concepts de base pour les grilles CSS : les pistes</a></li> - <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-define-a-grid/">définir une grille (en anglais)</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#les_pistes">Guide : les concepts de base pour les grilles CSS : les pistes</a></li> + <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-define-a-grid/">définir une grille (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/grid-template/index.html b/files/fr/web/css/grid-template/index.html index 35e1f80d53..55dceb4931 100644 --- a/files/fr/web/css/grid-template/index.html +++ b/files/fr/web/css/grid-template/index.html @@ -9,12 +9,10 @@ translation_of: Web/CSS/grid-template --- <div>{{CSSRef}}</div> -<p>La propriété <strong><code>grid-template</code></strong> est une <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriété raccourcie</a> permettant de définir les colonnes, grilles et zones d'une grille.</p> +<p>La propriété <strong><code>grid-template</code></strong> est une <a href="/fr/docs/Web/CSS/Shorthand_properties">propriété raccourcie</a> permettant de définir les colonnes, grilles et zones d'une grille.</p> <div>{{EmbedInteractiveExample("pages/css/grid-template.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les propriétés détaillées sont {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-areas")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -52,11 +50,11 @@ grid-template: unset; <dd>Voir {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}} pour les valeurs définies. {{cssxref("grid-template-areas")}} recevra la valeur <code>none</code>.</dd> <dt><code>[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <track-list> ]?</code></dt> <dd>{{cssxref("grid-template-areas")}} est définie avec les chaînes listées, {{cssxref("grid-template-rows")}} est définie avec les tailles de piste suivant chaque chaîne (<code>auto</code> sera utilisé pour les tailles manquantes), les lignes seront découpées selon les noms avant et après chaque taille. {{cssxref("grid-template-columns")}} sera définie avec la valeur listée après la barre oblique (ou <code>none</code> sinon). - <p class="note"><strong>Note :</strong> La fonction {{cssxref("repeat()")}} n'est pas autorisée parmi les listes de pistes car les pistes sont conçues pour correspondre à la disposition finale (à la façon d'un dessin en ASCII).</p> + <div class="note"><p><strong>Note :</strong> La fonction {{cssxref("repeat()")}} n'est pas autorisée parmi les listes de pistes car les pistes sont conçues pour correspondre à la disposition finale (à la façon d'un dessin en ASCII).</p></div> </dd> </dl> -<p class="note"><strong>Note :</strong> La propriété raccourcie {{cssxref("grid")}} accepte la même syntaxe mais réinitialise également les propriétés implicites avec leurs valeurs initiales. On pourra utiliser <code>grid</code> (plutôt que <code>grid-template</code>) pour empêcher les valeurs de suivre la cascade de façon séparée.</p> +<div class="note"><p><strong>Note :</strong> La propriété raccourcie {{cssxref("grid")}} accepte la même syntaxe mais réinitialise également les propriétés implicites avec leurs valeurs initiales. On pourra utiliser <code>grid</code> (plutôt que <code>grid-template</code>) pour empêcher les valeurs de suivre la cascade de façon séparée.</p></div> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -66,7 +64,7 @@ grid-template: unset; <h3 id="CSS">CSS</h3> -<pre class="brush:css; highlight[5-8]">#page { +<pre class="brush:css">#page { display: grid; width: 100%; height: 200px; @@ -140,7 +138,7 @@ footer { <li>{{cssxref("grid-template-rows")}}</li> <li>{{cssxref("grid-template-areas")}}</li> <li>{{cssxref("grid-template-columns")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : Placer les éléments d'une grille sur les lignes</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille#Les_propriétés_raccourcies_pour_les_grilles_CSS">Guide : Les zones de grilles et les propriétés raccourcies</a></li> - <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/grid-template-shorthand/">les propriétés raccourcies pour les zones de grille (en anglais)</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Guide : Placer les éléments d'une grille sur les lignes</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#les_propri%c3%a9t%c3%a9s_raccourcies_pour_les_grilles_css">Guide : Les zones de grilles et les propriétés raccourcies</a></li> + <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/grid-template-shorthand/">les propriétés raccourcies pour les zones de grille (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/grid/index.html b/files/fr/web/css/grid/index.html index 0f46a23e6f..721ff66aa8 100644 --- a/files/fr/web/css/grid/index.html +++ b/files/fr/web/css/grid/index.html @@ -13,9 +13,9 @@ translation_of: Web/CSS/grid <div>{{EmbedInteractiveExample("pages/css/grid.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p class="note"><strong>Note :</strong> Une seule déclaration <code>grid</code> permettra uniquement de définir les propriétés explicites ou implicites. Les propriétés qui ne sont pas définies via la propriété raccourcie prendront leurs valeurs initiales. Les propriétés d'espacement ne sont pas surchargées par cette propriété raccourcie.</p> +<div class="note"> + <p><strong>Note :</strong> Une seule déclaration <code>grid</code> permettra uniquement de définir les propriétés explicites ou implicites. Les propriétés qui ne sont pas définies via la propriété raccourcie prendront leurs valeurs initiales. Les propriétés d'espacement ne sont pas surchargées par cette propriété raccourcie.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -133,6 +133,6 @@ grid: unset;</pre> <li>{{cssxref("grid-auto-columns")}}</li> <li>{{cssxref("grid-auto-rows")}}</li> <li>{{cssxref("grid-auto-flow")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : Placer les éléments d'une grille sur les lignes</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille#Les_propriétés_raccourcies_pour_les_grilles_CSS">Guide : Les zones de grilles et les propriétés raccourcies</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Guide : Placer les éléments d'une grille sur les lignes</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#les_propri%c3%a9t%c3%a9s_raccourcies_pour_les_grilles_css">Guide : Les zones de grilles et les propriétés raccourcies</a></li> </ul> diff --git a/files/fr/web/css/height/index.html b/files/fr/web/css/height/index.html index a2f98e01bf..e1e0f46885 100644 --- a/files/fr/web/css/height/index.html +++ b/files/fr/web/css/height/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/height <div>{{EmbedInteractiveExample("pages/css/height.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les propriétés {{cssxref("min-height")}} et {{cssxref("max-height")}} surchargent la propriété <code>height</code>.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/hyphens/index.html b/files/fr/web/css/hyphens/index.html index ef07f6262a..3dbfafaf66 100644 --- a/files/fr/web/css/hyphens/index.html +++ b/files/fr/web/css/hyphens/index.html @@ -13,11 +13,11 @@ translation_of: Web/CSS/hyphens <div>{{EmbedInteractiveExample("pages/css/hyphens.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<p>Les règles relatives aux traits d'union en fin de ligne dépendent de la langue utilisée. En HTML, la langue est définie grâce à l'attribut <code><a href="/fr/docs/Web/HTML/Global_attributes/lang">lang</a></code> et les navigateurs n'appliqueront les règles que si cet attribut est présent et que le dictionnaire correspondant (pour la gestion des traits d'union et des fins de ligne) est disponible. Pour des documents XML, on utilisera l'attribut <code><a href="/fr/docs/Web/SVG/Attribute/xml:lang">xml:lang</a></code>.</p> -<p>Les règles relatives aux traits d'union en fin de ligne dépendent de la langue utilisée. En HTML, la langue est définie grâce à l'attribut <code><a href="/fr/docs/Web/HTML/Attributs_globaux/lang">lang</a></code> et les navigateurs n'appliqueront les règles que si cet attribut est présent et que le dictionnaire correspondant (pour la gestion des traits d'union et des fins de ligne) est disponible. Pour des documents XML, on utilisera l'attribut <code><a href="/fr/docs/Web/SVG/Attribute/xml:lang">xml:lang</a></code>.</p> - -<div class="note"><strong>Note :</strong> Les règles exactes qui définissent l'application des traits d'union en fin de ligne ne sont pas explicitement définies par la spécification, aussi, le comportement peut varier entre les navigateurs.</div> +<div class="note"> + <p><strong>Note :</strong> Les règles exactes qui définissent l'application des traits d'union en fin de ligne ne sont pas explicitement définies par la spécification, aussi, le comportement peut varier entre les navigateurs.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -43,7 +43,9 @@ hyphens: unset; <dd>Le navigateur est libre de couper les mots là où il l'estime approprié selon les règles qu'il choisit. Les emplacements de coupe suggérés par certains caractères devraient être privilégiés par rapport aux coupes automatiques.</dd> </dl> -<div class="note"><strong>Note :</strong> Le comportement défini par <code>auto</code> dépend de la langue indiquée par le document. Aussi, il faut indiquer la langue via l'attribut HTML <code>lang</code> pour s'assurer que les fins de ligne et les traits d'union sont bien gérés selon la langue indiquée.</div> +<div class="note"> + <p><strong>Note :</strong> Le comportement défini par <code>auto</code> dépend de la langue indiquée par le document. Aussi, il faut indiquer la langue via l'attribut HTML <code>lang</code> pour s'assurer que les fins de ligne et les traits d'union sont bien gérés selon la langue indiquée.</p> +</div> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -103,9 +105,7 @@ p.auto { <h3 id="Résultat">Résultat</h3> -<figure> <p>{{EmbedLiveSample("Exemples", "100%", "490'")}}</p> -</figure> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/image-orientation/index.html b/files/fr/web/css/image-orientation/index.html index ae0c2f2f3d..1e5b7e4b90 100644 --- a/files/fr/web/css/image-orientation/index.html +++ b/files/fr/web/css/image-orientation/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/image-orientation <p>La propriété <strong><code>image-orientation</code></strong> décrit la façon d'obtenir l'orientation correcte d'une image quelle que soit la disposition du document. Cette propriété ne doit pas être utilisée afin de tourner l'image pour d'autres cas, si besoin, on pourra utiliser la propriété {{cssxref("transform")}} avec la fonction <code>rotate</code>.</p> <div class="warning"> -<p><strong>Attention !</strong> Cette propriété sera vraisemblablement dépréciée prochainement. Les fonctionnalités associées deviendront des propriétés de l'élément {{HTMLElement("img")}} et/ou de l'élément {{HTMLElement("picture")}} (excepté peut-être <code>from-image</code>).</p> +<p><strong>Attention :</strong> Cette propriété sera vraisemblablement dépréciée prochainement. Les fonctionnalités associées deviendront des propriétés de l'élément {{HTMLElement("img")}} et/ou de l'élément {{HTMLElement("picture")}} (excepté peut-être <code>from-image</code>).</p> </div> <pre class="brush:css no-line-numbers">/* Valeurs d'angle */ @@ -72,10 +72,7 @@ image-orientation: unset; } </pre> -<div class="hidden"> -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><img id="image" src="https://mdn.mozillademos.org/files/12668/MDN.svg" +<pre class="brush: html hidden"><img id="image" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="Orientation déterminée à partir de l'image"/> <select id="imageOrientation"> <option value="from-image">from-image</option> @@ -84,14 +81,11 @@ image-orientation: unset; </select> </pre> -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var imageOrientation = document.getElementById("imageOrientation"); +<pre class="brush: js hidden">var imageOrientation = document.getElementById("imageOrientation"); imageOrientation.addEventListener("change", function (evt) { document.getElementById("image").style.imageOrientation = evt.target.value; }); </pre> -</div> <h3 id="Résultat">Résultat</h3> diff --git a/files/fr/web/css/image-rendering/index.html b/files/fr/web/css/image-rendering/index.html index 2fc2cf426d..d0aef4a32e 100644 --- a/files/fr/web/css/image-rendering/index.html +++ b/files/fr/web/css/image-rendering/index.html @@ -41,7 +41,9 @@ image-rendering: unset; <dd>L'algorithme utilisé pour le redimensionnement doit maximiser l'apparence de l'image. Les algorithmes qui adoucissent les couleurs (ex. l'interpolation bilinéaire) sont acceptables. Cette valeur est destinée aux images telles que les photos.</dd> </dl> -<div class="note"><strong>Note :</strong> Les valeurs <code>optimizeQuality</code> et <code>optimizeSpeed</code> qui étaient présentes dans un brouillon de la spécification (et qui provenaient de la spécification équivalente pour SVG) sont synonymes respectifs de <code>smooth</code> et <code>pixelated</code>.</div> +<div class="note"> + <p><strong>Note :</strong> Les valeurs <code>optimizeQuality</code> et <code>optimizeSpeed</code> qui étaient présentes dans un brouillon de la spécification (et qui provenaient de la spécification équivalente pour SVG) sont synonymes respectifs de <code>smooth</code> et <code>pixelated</code>.</p> +</div> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -91,7 +93,7 @@ image-rendering: unset; <p>{{EmbedLiveSample("Exemples","100%","100%")}}</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> En pratique, les règles <code>pixelated</code> et <code>crisp-edges</code> peuvent être combinées en cas de besoin (l'une pouvant combler les éventuelles manques de l'autre et <em>vice versa</em>). Si besoin, un {{HTMLElement("canvas")}} peut fournir <a href="http://phrogz.net/tmp/canvas_image_zoom.html">une alternative pour les valeurs <code>crisp-edge</code> et <code>optimize-contrast</code></a> via la manipulation manuelle des données de l'image ou avec <code><a href="/fr/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled">imageSmoothingEnabled</a></code>.</p> </div> diff --git a/files/fr/web/css/image/index.html b/files/fr/web/css/image/index.html index f588bebb67..ae7382c629 100644 --- a/files/fr/web/css/image/index.html +++ b/files/fr/web/css/image/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/image --- <div>{{CSSRef}}</div> -<p>Le type de donnée CSS <strong><code><image></code></strong> représente une image en deux dimensions. Il existe deux types d'images en CSS : les images statiques (souvent utilisées via une URL (cf. {{cssxref("<url>")}})), et les images générées dynamiquement comme les dégradés (cf. {{cssxref("<gradient>")}}) ou les images construites à partir de fragments de l'arbre du DOM ({{CSSxRef("element")}}). D'autres fonctions peuvent être utilisées pour créer des images comme {{CSSxRef("imagefunction", "image()")}}, {{CSSxRef("image-set")}} et {{CSSxRef("cross-fade")}}.</p> +<p>Le type de donnée CSS <strong><code><image></code></strong> représente une image en deux dimensions. Il existe deux types d'images en CSS : les images statiques (souvent utilisées via une URL (cf. {{cssxref("<url>")}})), et les images générées dynamiquement comme les dégradés (cf. {{cssxref("<gradient>")}}) ou les images construites à partir de fragments de l'arbre du DOM ({{CSSxRef("element()")}}). D'autres fonctions peuvent être utilisées pour créer des images comme {{CSSxRef("imagefunction", "image()")}}, {{CSSxRef("image-set")}} et {{CSSxRef("cross-fade()")}}.</p> <p>Les images peuvent être utilisées pour de nombreuses propriétés CSS dont, par exemple, {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("list-style-image")}} et {{cssxref("cursor")}}.</p> @@ -64,7 +64,7 @@ translation_of: Web/CSS/image <td>?</td> </tr> <tr> - <td>{{cssxref("symbols")}} pour <code>@counter-style</code></td> + <td>{{cssxref("symbols()")}} pour <code>@counter-style</code></td> <td>Une fonctionnalité en cours de discussion. Si elle est prise en charge, la taille utilisée sera celle des curseurs utilisés par le système.</td> </tr> <tr> @@ -84,7 +84,9 @@ translation_of: Web/CSS/image <p>Les images peuvent être utilisées pour de nombreuses propriétés CSS comme {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("list-style-image")}} ou {{cssxref("cursor")}}.</p> -<div class="note"><strong>Note :</strong> tous les navigateurs ne supportent pas n'importe quel type d'image sur n'importe quelle propriété. Voir la section <a href="/fr/docs/CSS/image#Compatibilit.C3.A9_des_navigateurs">compatibilité des navigateurs</a> pour une liste explicative.</div> +<div class="note"> + <p><strong>Note :</strong> tous les navigateurs ne supportent pas n'importe quel type d'image sur n'importe quelle propriété. Voir la section <a href="/fr/docs/Web/CSS/image#compatibilit.c3.a9_des_navigateurs">compatibilité des navigateurs</a> pour une liste explicative.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -93,7 +95,7 @@ translation_of: Web/CSS/image <ul> <li>une image dénotée par le type de donnée CSS {{cssxref("<url>")}} et la fonction <code>url()</code> ;</li> <li>une valeur CSS {{cssxref("<gradient>")}} (représentant un dégradé) ;</li> - <li>une partie de la page, définie par la fonction {{cssxref("element")}} ;</li> + <li>une partie de la page, définie par la fonction {{cssxref("element()")}} ;</li> <li>une image, un fragment d'image ou une couleur définie grâce à la fonction {{cssxref("image()")}} ;</li> <li>une fusion de deux ou plusieurs images avec la fonction {{cssxref("cross-face")}}</li> <li>une image choisie parmi un ensemble d'images (selon leurs résolutions, l'appareil et la connexion utilisés) grâce à la fonction {{cssxref("image-set()")}}.</li> @@ -108,7 +110,7 @@ linear-gradient(blue, red) /* Un dégradé (<gradient>) */ element(#colonne3) /* Utilisation d'un élément de la page via la fonction element(), si colonne3 est bien un identifiant CSS existant. */ image(ltr 'arrow.png#xywh=0,0,16,16', red) - /* Une section de 16x16 pixels de l'image <code>arrow.png</code> et qui démarre au coin + /* Une section de 16x16 pixels de l'image arrow.png et qui démarre au coin supérieur gauche de l'image et qui sera utilisée si arrow.png est à un format pris en charge. Sinon, ce sera un fond rouge qui sera utilisé. Si la langue est écrite de gauche à droite, l'image sera inversée @@ -180,8 +182,8 @@ image-set('chat.jpg' 1x, 'chien.jpg' 1x) /* Chaque image doit avoir une résolut <li>{{cssxref("conic-gradient")}}</li> </ul> </li> - <li>{{cssxref("element")}}</li> + <li>{{cssxref("element()")}}</li> <li>{{CSSxRef("imagefunction", "image()")}}</li> <li>{{cssxref("image-set()")}}</li> - <li>{{CSSxRef("cross-fade")}}</li> + <li>{{CSSxRef("cross-fade()")}}</li> </ul> diff --git a/files/fr/web/css/index.html b/files/fr/web/css/index.html index fedb551fe9..17efcc84ae 100644 --- a/files/fr/web/css/index.html +++ b/files/fr/web/css/index.html @@ -12,38 +12,26 @@ translation_of: Web/CSS --- <p>{{CSSRef}}</p> -<div class="twocolumns"> -<div class="hidden"> -<div class="blockIndicator note"> -<p class="summary"><span class="seoSummary"><strong>Cascading Style Sheets</strong> (<strong>CSS</strong>) est un langage de feuille de style utilisé pour décrire la présentation d'un document écrit en <a href="/fr/docs/Web/HTML" title="HyperText Markup Language">HTML</a></span> ou en <a href="/fr/docs/Glossaire/XML">XML</a> (on inclut ici les langages basés sur XML comme <a href="/fr/docs/Web/SVG">SVG</a> ou {{Glossary("XHTML", "",1)}}). CSS décrit la façon dont les éléments doivent être affichés à l'écran, sur du papier, en vocalisation, ou sur d'autres supports.</p> -</div> -</div> -</div> +<p>CSS est l'un des langages principaux du <strong>Web ouvert</strong> et a été standardisé <a href="https://w3.org/Style/CSS/#specs">par le W3C</a>. Ce standard évolue sous forme de niveaux (<em>levels</em>), CSS1 est désormais considéré comme obsolète, CSS2.1 correspond à la recommandation et <a href="/fr/docs/Web/CSS/CSS3">CSS3</a>, qui est découpé en modules plus petits, est en voie de standardisation.</p> -<p>CSS est l'un des langages principaux du <strong>Web ouvert</strong> et a été standardisé <a class="external" href="https://w3.org/Style/CSS/#specs">par le W3C</a>. Ce standard évolue sous forme de niveaux (<em>levels</em>), CSS1 est désormais considéré comme obsolète, CSS2.1 correspond à la recommandation et <a href="/fr/docs/Web/CSS/CSS3">CSS3</a>, qui est découpé en modules plus petits, est en voie de standardisation.</p> +<h2 id="Key_resources">Ressources principales</h2> -<section id="sect1"> -<ul class="card-grid"> - <li><span>Introduction à CSS</span> +<dl> + <dt>Introduction à CSS</dt> + <dd>Si vous débutez en développement web, n'hésitez pas à consulter l'article <a href="/fr/docs/Learn/Getting_started_with_the_web/CSS_basics">les bases de CSS</a> pour découvrir CSS, ce que c'est et comment l'utiliser.</dd> + <dt>Tutoriels CSS</dt> + <dd>Notre section <a href="/fr/docs/Learn/CSS">Apprendre le Web - CSS</a> contient de nombreux tutoriels pour vous guider d'un niveau débutant à intermédiaire en CSS. Elle couvre l'ensemble des concepts fondamentaux en CSS.</dd> + <dt>La référence CSS</dt> + <dd><a href="/fr/docs/Web/CSS/Reference">Une référence exhaustive</a> destinée aux développeurs web expérimenté et qui décrit chaque propriété et concept de CSS.</dd> +</dl> - <p>Si vous débutez en développement web, n'hésitez pas à consulter l'article <a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS">les bases de CSS</a> pour découvrir CSS, ce que c'est et comment l'utiliser.</p> - </li> - <li><span>Tutoriels CSS</span> - <p>Notre section <a href="/fr/Apprendre/CSS">Apprendre le Web - CSS</a> contient de nombreux tutoriels pour vous guider d'un niveau débutant à intermédiaire en CSS. Elle couvre l'ensemble des concepts fondamentaux en CSS.</p> - </li> - <li><span>La référence CSS</span> - <p><a href="/fr/docs/Web/CSS/Reference">Une référence exhaustive</a> destinée aux développeurs web expérimenté et qui décrit chaque propriété et concept de CSS.</p> - </li> -</ul> -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="Tutoriels">Tutoriels</h2> +<h2 id="Tutoriels">Tutoriels</h2> -<p>La section <a href="/fr/Apprendre/CSS">Apprendre le Web</a> fournit différents modules qui permettent d'apprendre CSS sans connaissance particulière préalable.</p> +<p>La section <a href="/fr/docs/Learn/CSS">Apprendre le Web</a> fournit différents modules qui permettent d'apprendre CSS sans connaissance particulière préalable.</p> <dl> - <dt><a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Introduction à CSS</a></dt> + <dt><a href="/fr/docs/Learn/Getting_started_with_the_web/CSS_basics">Introduction à CSS</a></dt> <dd>Dans ce module, on commence avec les bases du fonctionnement de CSS : les sélecteurs, les propriétés, écrire des règles CSS, appliquer du CSS à un document HTML, utiliser des longueurs, des couleurs et d'autres unités. On voit également la cascade et l'héritage en CSS, les bases du modèle de boîtes et comment déboguer du code CSS.</dd> <dt><a href="/fr/docs/Learn/CSS/Styling_text">Mettre en forme le texte</a></dt> <dd>Dans ce chapitre, on voit comment mettre en forme du texte : changer la police, mettre en gras, mettre en italique, gérer les espaces entre les lignes et les lettres, ajouter des ombres portées, etc. En fin de chapitre, on voit comment appliquer des polices personnalisées sur une page et comment mettre en forme les listes et les liens.</dd> @@ -52,10 +40,8 @@ translation_of: Web/CSS <dt><a href="/fr/docs/Learn/CSS/CSS_layout">La disposition en CSS</a></dt> <dd>Avant ce chapitre, on a vu les concepts fondamentaux en CSS, comment mettre en forme du texte, comment manipuler des boîtes correctement, etc. On voit ici comment correctement placer les boîtes dans la zone d'affichage (<em>viewport</em>). Grâce aux concepts précédents, on peut désormais étudier les différentes méthodes pour positionner les éléments sur une page : les boîtes flottantes, le positionnement fixe et les nouveaux outils comme les boîtes flexibles (<em>flexbox</em>).</dd> </dl> -</div> -<div class="section"> -<h2 class="Tools" id="Références">Références</h2> +<h2 id="Références">Références</h2> <dl> <dt><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></dt> @@ -63,42 +49,39 @@ translation_of: Web/CSS <dt>Les concepts majeurs de CSS</dt> <dd>Plusieurs articles de cette section présentent les aspects clés du langage. On y décrit notamment : <ul> - <li><a href="/fr/docs/Web/CSS/Syntaxe">la syntaxe et les formes du langage</a></li> - <li><a href="/fr/docs/Web/CSS/Spécificité">la spécificité</a> et <a href="/fr/docs/Web/CSS/Héritage">l'héritage</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">la syntaxe et les formes du langage</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">la spécificité</a> et <a href="/fr/docs/Web/CSS/inheritance">l'héritage</a></li> <li><a href="/fr/docs/Web/CSS/Valeurs_et_unit%C3%A9s_CSS">les unités et valeurs CSS</a></li> - <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">le modèle de boîtes</a> et <a href="/fr/docs/CSS/margin_collapsing">la fusion des marges</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">le modèle de boîtes</a> et <a href="/fr/docs/CSS/margin_collapsing">la fusion des marges</a></li> <li><a href="/fr/docs/Web/CSS/All_About_The_Containing_Block">le bloc conteneur</a></li> - <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/L'empilement_de_couches">l'empilement</a> et <a href="/fr/docs/Web/CSS/Block_formatting_context">le contexte de formatage de blocs</a></li> - <li>les concepts de <a href="/fr/docs/Web/CSS/Valeur_initiale">valeur initiale</a>, <a href="/fr/docs/Web/CSS/Valeur_calculée">valeur calculée</a>, <a href="/fr/docs/Web/CSS/Valeur_utilisée">valeur utilisée</a> et <a href="/fr/docs/Web/CSS/valeur_reelle">valeur réelle</a></li> - <li><a href="/fr/docs/Web/CSS/Propriétés_raccourcies">Les propriétés raccourcies</a></li> - <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS">Les boîtes flexibles CSS (<u><em>flexbox</em></u>)</a></li> + <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/L'empilement_de_couches">l'empilement</a> et <a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">le contexte de formatage de blocs</a></li> + <li>les concepts de <a href="/fr/docs/Web/CSS/initial_value">valeur initiale</a>, <a href="/fr/docs/Web/CSS/computed_value">valeur calculée</a>, <a href="/fr/docs/Web/CSS/used_value">valeur utilisée</a> et <a href="/fr/docs/Web/CSS/actual_value">valeur réelle</a></li> + <li><a href="/fr/docs/Web/CSS/Shorthand_properties">Les propriétés raccourcies</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Les boîtes flexibles CSS (<em>flexbox</em>)</a></li> <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">La grille CSS</a></li> - <li><a href="/fr/docs/Web/CSS/Requêtes_média">Les <em>media queries</em> (requêtes media)</a></li> + <li><a href="/fr/docs/Web/CSS/Media_Queries">Les <em>media queries</em> (requêtes media)</a></li> <li><a href="/fr/docs/Web/CSS/animation">Les animations</a></li> </ul> </dd> </dl> -<h2 class="Tools" id="Livre_de_recettes">Livre de recettes</h2> +<h2 id="Livre_de_recettes">Livre de recettes</h2> <p><a href="/fr/docs/Web/CSS/Layout_cookbook">Le livre de recettes de disposition CSS</a> contient différentes recettes pour mettre en place différentes dispositions courantes. En plus de fournir du code pouvant servir de point de départ, ces recettes illustrent les différentes façons dont les spécifications CSS liées à la disposition peuvent être utilisées ainsi que les choix à faire en tant que développeur.</p> -<h2 class="Tools" id="Outils_de_développement_pour_CSS">Outils de développement pour CSS</h2> +<h2 id="Outils_de_développement_pour_CSS">Outils de développement pour CSS</h2> <ul> <li><a href="https://jigsaw.w3.org/css-validator/">Le service de validation CSS du W3C</a> permet de vérifier si une feuille de style CSS est valide.</li> - <li><a href="/fr/docs/Outils">Les outils de développement Firefox</a> permettent de visualiser, d'éditer une feuille de style en direct grâce à <a href="/fr/docs/Outils/Inspecteur">l'inspecteur</a> et à <a href="/fr/docs/Outils/Éditeur_de_style">l'éditeur de styles</a>.</li> + <li><a href="/fr/docs/Tools">Les outils de développement Firefox</a> permettent de visualiser, d'éditer une feuille de style en direct grâce à <a href="/fr/docs/Tools/Page_Inspector">l'inspecteur</a> et à <a href="/fr/docs/Tools/Style_Editor">l'éditeur de styles</a>.</li> <li><a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">L'extension Web Developer</a> permet d'éditer le code CSS des sites visités à la volée.</li> - <li><a href="/fr/docs/Web/CSS/Tools">D'autres outils</a>, <a href="https://www.cssdebutant.com/">guide pour les débutants</a>.</li> + <li><a href="/fr/docs/conflicting/Web/CSS_c2c099599c0a58c69d1390033045f244">D'autres outils</a>, <a href="https://www.cssdebutant.com/">guide pour les débutants</a>.</li> </ul> -</div> -</div> -</section> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/Apprendre/CSS">La partie CSS de la section Apprendre le Web.</a></li> - <li>Les langages web sur lesquels CSS est souvent utilisé : <a href="/fr/docs/Web/HTML">HTML</a>, <a href="/fr/docs/Web/SVG">SVG</a>, {{Glossary("XHTML", "",1)}} et <a href="/fr/docs/Glossaire/XML">XML</a>.</li> + <li><a href="/fr/docs/Learn/CSS">La partie CSS de la section Apprendre le Web.</a></li> + <li>Les langages web sur lesquels CSS est souvent utilisé : <a href="/fr/docs/Web/HTML">HTML</a>, <a href="/fr/docs/Web/SVG">SVG</a>, {{Glossary("XHTML", "",1)}} et <a href="/fr/docs/Glossary/XML">XML</a>.</li> <li>Des technologies Mozilla qui emploient CSS : <a href="/fr/docs/Mozilla/Firefox">Firefox</a>, <a href="/fr/docs/Mozilla/Add-ons/Thèmes">les thèmes</a> et <a href="/fr/docs/Mozilla/Thunderbird">extensions Thunderbird</a>.</li> </ul> diff --git a/files/fr/web/css/inline-size/index.html b/files/fr/web/css/inline-size/index.html index 6aec033a54..074f18db37 100644 --- a/files/fr/web/css/inline-size/index.html +++ b/files/fr/web/css/inline-size/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/inline-size <div>{{EmbedInteractiveExample("pages/css/inline-size.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété est à rapprocher de {{cssxref("block-size")}} qui définit l'autre dimension de l'élément.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/inline_formatting_context/index.html b/files/fr/web/css/inline_formatting_context/index.html index 80c8ddf694..d03ca3d9dc 100644 --- a/files/fr/web/css/inline_formatting_context/index.html +++ b/files/fr/web/css/inline_formatting_context/index.html @@ -34,8 +34,8 @@ original_slug: Web/CSS/Contexte_de_formatage_en_ligne <p>{{EmbedGHLiveSample("css-examples/inline-formatting/mbp.html", '100%', 920)}}</p> -<div class="blockIndicator note"> -<p><strong>Note</strong> : Dans ces exemples, on utilise les propriétés logiques (relatives à la direction du flux avec le mode d'écriture et la directionnalité) (ex. {{cssxref("padding-inline-start")}} plutôt que {{cssxref("padding-left")}}) afin qu'elles s'appliquent le long de la direction en ligne, que le texte soit horizontal ou vertical. Pour en savoir plus sur ces propriétés, voir <a href="/fr/docs/Web/CSS/CSS_Logical_Properties">les propriétés et les valeurs logiques en CSS</a>.</p> +<div class="note"> +<p><strong>Note :</strong> Dans ces exemples, on utilise les propriétés logiques (relatives à la direction du flux avec le mode d'écriture et la directionnalité) (ex. {{cssxref("padding-inline-start")}} plutôt que {{cssxref("padding-left")}}) afin qu'elles s'appliquent le long de la direction en ligne, que le texte soit horizontal ou vertical. Pour en savoir plus sur ces propriétés, voir <a href="/fr/docs/Web/CSS/CSS_Logical_Properties">les propriétés et les valeurs logiques en CSS</a>.</p> </div> <h2 id="Alignement_sur_la_direction_de_bloc_block">Alignement sur la direction de bloc (<em>block</em>)</h2> diff --git a/files/fr/web/css/integer/index.html b/files/fr/web/css/integer/index.html index 5672a7aa12..c0fe723597 100644 --- a/files/fr/web/css/integer/index.html +++ b/files/fr/web/css/integer/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/integer --- <div>{{CSSRef}}</div> -<p>Le type de donnée CSS <strong><code><integer></code></strong> permet de représenter des nombres entiers positifs ou négatifs. Aucune unité n'est liée à la valeur. Les entiers sont utilisés dans de nombreuses propriétés CSS comme {{cssxref("z-index")}}, {{cssxref("line-height")}}, {{cssxref("counter-increment")}}, {{cssxref("column-count")}}, {{cssxref("grid-row")}}, {{cssxref("repeat")}}. Ce type est un sous-type de {{cssxref("number")}}.</p> +<p>Le type de donnée CSS <strong><code><integer></code></strong> permet de représenter des nombres entiers positifs ou négatifs. Aucune unité n'est liée à la valeur. Les entiers sont utilisés dans de nombreuses propriétés CSS comme {{cssxref("z-index")}}, {{cssxref("line-height")}}, {{cssxref("counter-increment")}}, {{cssxref("column-count")}}, {{cssxref("grid-row")}}, {{cssxref("repeat()")}}. Ce type est un sous-type de {{cssxref("number")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -17,11 +17,13 @@ translation_of: Web/CSS/integer <p>Toutes les valeurs de type <code><integer></code> sont également des valeurs de type {{cssxref("<number>")}}, bien que l'inverse ne soit pas vrai.</p> -<div class="note"><strong>Note : </strong>Il n'y a pas de bornes à l'ensemble des valeurs de type <code><entier></code> valides. Opera supporte des valeurs jusqu'à 2<sup>15</sup>-1, IE jusqu'à 2<sup>20</sup>-1 et d'autres navigateurs des valeurs encore plus hautes. Durant le cycle CSS3 Values, il y a eu de nombreuses discussions pour définir une valeur minimale à supporter : la dernière décision, en date d'avril 2012 pendant la phase LC, était [-2<sup>27</sup>-1; 2<sup>27</sup>-1] <a href="https://lists.w3.org/Archives/Public/www-style/2012Apr/0633.html">#</a> mais d'autres valeurs comme 2<sup>24</sup>-1 et 2<sup>30</sup>-1 ont aussi été proposées <a href="https://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">#</a> <a href="https://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">#</a>. Le dernier brouillon ne fait plus apparaître de limite.</div> +<div class="note"> + <p><strong>Note :</strong> Il n'y a pas de bornes à l'ensemble des valeurs de type <code><entier></code> valides. Opera supporte des valeurs jusqu'à 2^15-1, IE jusqu'à 2^20-1 et d'autres navigateurs des valeurs encore plus hautes. Durant le cycle CSS3 Values, il y a eu de nombreuses discussions pour définir une valeur minimale à supporter : la dernière décision, en date d'avril 2012 pendant la phase LC, était [-2^27</sup>-1; 2^27</sup>-1] <a href="https://lists.w3.org/Archives/Public/www-style/2012Apr/0633.html">#</a> mais d'autres valeurs comme 2^24-1 et 2^30-1 ont aussi été proposées <a href="https://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">#</a> <a href="https://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">#</a>. Le dernier brouillon ne fait plus apparaître de limite.</p> +</div> <h2 id="Interpolation">Interpolation</h2> -<p>Les valeurs du type <code><entier></code> peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par incrémentation discrète. Le calcul est réalisé comme si les valeurs étaient des nombres réels, en virgule flottante et la valeur discrète est obtenue en utilisant la fonction <a class="external" href="https://fr.wikipedia.org/wiki/Partie_enti%C3%A8re_et_partie_fractionnaire#Fonction_partie_enti.C3.A8re">partie entière</a>. La rapidité de l'interpolation est déterminée par la {{cssxref("timing-function","fonction de temporisation")}} associée à l'animation.</p> +<p>Les valeurs du type <code><entier></code> peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par incrémentation discrète. Le calcul est réalisé comme si les valeurs étaient des nombres réels, en virgule flottante et la valeur discrète est obtenue en utilisant la fonction <a href="https://fr.wikipedia.org/wiki/Partie_enti%C3%A8re_et_partie_fractionnaire#Fonction_partie_enti.C3.A8re">partie entière</a>. La rapidité de l'interpolation est déterminée par la {{cssxref("easing-function","fonction de temporisation")}} associée à l'animation.</p> <h2 id="Exemples">Exemples</h2> diff --git a/files/fr/web/css/isolation/index.html b/files/fr/web/css/isolation/index.html index 7639e5e597..3805c54c08 100644 --- a/files/fr/web/css/isolation/index.html +++ b/files/fr/web/css/isolation/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/isolation <div>{{EmbedInteractiveExample("pages/css/isolation.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété s'avère particulièrement utile avec {{cssxref("mix-blend-mode")}} afin de ne mélanger que l'arrière plan d'un contexte d'empilement particulier.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/justify-content/index.html b/files/fr/web/css/justify-content/index.html index 64f81cec98..548aba3f62 100644 --- a/files/fr/web/css/justify-content/index.html +++ b/files/fr/web/css/justify-content/index.html @@ -16,13 +16,11 @@ translation_of: Web/CSS/justify-content <div>{{EmbedInteractiveExample("pages/css/justify-content.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>L'alignement est appliqué après que les longueurs et les marges automatiques ont été appliquées. Dans une disposition utilisant les boîtes flexibles, cela signifie que s'il existe au moins un élément flexible pour lequel {{cssxref("flex-grow")}} est différent de <code>0</code>, <code>justify-content</code> n'aura aucun effet car il n'y aura plus d'espace disponible.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush:css no-line-numbers notranslate">/* Alignement « géométrique » */ +<pre class="brush:css no-line-numbers">/* Alignement « géométrique » */ justify-content: center; /* Éléments groupés au centre */ justify-content: start; /* Éléments groupés au début */ justify-content: end; /* Éléments groupés à la fin */ @@ -108,7 +106,7 @@ justify-content: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">#container { +<pre class="brush: css">#container { display: flex; /* Cette valeur peut être changée dans l'exemple */ justify-content: space-between; @@ -121,10 +119,7 @@ justify-content: unset; } </pre> -<div class="hidden"> -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><div id="container"> +<pre class="brush: html hidden"><div id="container"> <div></div> <div></div> <div></div> @@ -146,15 +141,12 @@ justify-content: unset; <option value="stretch">stretch</option> </select></pre> -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js notranslate">var justifyContent = document.getElementById("justifyContent"); +<pre class="brush: js hidden">var justifyContent = document.getElementById("justifyContent"); justifyContent.addEventListener("change", function (evt) { document.getElementById("container").style.justifyContent = evt.target.value; }); </pre> -</div> <h3 id="Résultat">Résultat</h3> diff --git a/files/fr/web/css/justify-items/index.html b/files/fr/web/css/justify-items/index.html index a5787ac362..419349d270 100644 --- a/files/fr/web/css/justify-items/index.html +++ b/files/fr/web/css/justify-items/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/justify-items <div>{{EmbedInteractiveExample("pages/css/justify-items.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>L'effet de cette propriété sera différent selon le type de disposition utilisé :</p> <ul> @@ -135,9 +133,7 @@ justify-items: unset; <h3 id="CSS">CSS</h3> -<div id="alignment_8"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -153,7 +149,6 @@ justify-items: unset; color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -196,7 +191,6 @@ justify-items: unset; <h3 id="Résultat">Résultat</h3> <p>{{EmbedLiveSample('Exemples', '500', '500')}}</p> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/justify-self/index.html b/files/fr/web/css/justify-self/index.html index cba1779578..7537fad71c 100644 --- a/files/fr/web/css/justify-self/index.html +++ b/files/fr/web/css/justify-self/index.html @@ -11,9 +11,7 @@ translation_of: Web/CSS/justify-self <p>La propriété CSS <strong><code>justify-self</code></strong> définit la façon dont une boîte est alignée sur l'axe en ligne du conteneur.</p> -<div>{{EmbedInteractiveExample("pages/css/justify-self.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<div>{{EmbedInteractiveExample("pages/css/justify-self.html")}}</div <p>L'effet de cette propriété varie selon le mode de disposition utilisé :</p> @@ -127,9 +125,7 @@ justify-self: unset; <h3 id="CSS">CSS</h3> -<div id="alignment_8"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -145,7 +141,6 @@ justify-self: unset; color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -177,7 +172,6 @@ justify-self: unset; <h3 id="Résultat">Résultat</h3> <p>{{EmbedLiveSample('Exemples', '300', '300')}}</p> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html b/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html index 1be4399050..395d6d0e69 100644 --- a/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html +++ b/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html @@ -9,9 +9,9 @@ original_slug: Web/CSS/Layout_cookbook/Navigation_Breadcrumb --- <div>{{CSSRef}}</div> -<p class="summary">La navigation avec un fil d'Ariane (<em>breadcrumb</em>) permet à un utilisateur de comprendre l'emplacement auquel il se trouve au sein du site web en fournissant un fil d'Ariane permettant de revenir à la page de départ.</p> +<p>La navigation avec un fil d'Ariane (<em>breadcrumb</em>) permet à un utilisateur de comprendre l'emplacement auquel il se trouve au sein du site web en fournissant un fil d'Ariane permettant de revenir à la page de départ.</p> -<p><img alt="Links displayed inline with separators" src="https://mdn.mozillademos.org/files/16228/breadcrumb-navigation.png" style="height: 108px; width: 1268px;"></p> +<p><img alt="Links displayed inline with separators" src="breadcrumb-navigation.png"></p> <h2 id="Spécifications_sommaires">Spécifications sommaires</h2> @@ -39,7 +39,7 @@ original_slug: Web/CSS/Layout_cookbook/Navigation_Breadcrumb <p>{{Compat("css.properties.flex")}}</p> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Les boîtes flexibles CSS</a></li> diff --git a/files/fr/web/css/layout_cookbook/card/index.html b/files/fr/web/css/layout_cookbook/card/index.html index a0a498245b..7e92b24421 100644 --- a/files/fr/web/css/layout_cookbook/card/index.html +++ b/files/fr/web/css/layout_cookbook/card/index.html @@ -11,9 +11,9 @@ original_slug: Web/CSS/Layout_cookbook/Carte --- <p>{{CSSRef}}</p> -<p class="summary">Dans ce guide, nous verrons comment créer des cartes (<em>cards</em> en anglais), disposant éventuellement d'un pied de page, qui peuvent être organisée en listes.</p> +<p>Dans ce guide, nous verrons comment créer des cartes (<em>cards</em> en anglais), disposant éventuellement d'un pied de page, qui peuvent être organisée en listes.</p> -<p><img alt="Three card components in a row" src="https://mdn.mozillademos.org/files/16278/cards.png" style="height: 1172px; width: 1629px;"></p> +<p><img alt="Three card components in a row" src="cards.png"></p> <h2 id="Spécifications_sommaires">Spécifications sommaires</h2> @@ -45,16 +45,16 @@ original_slug: Web/CSS/Layout_cookbook/Carte <p>Si la carte possède un pied de page, celui-ci sera dimensionné automatiquement car les lignes ajoutées sur la grille implicite sont dimensionnés automatiquement. Aussi, le pied de page sera suffisamment grand pour contenir l'ensemble de son texte.</p> <div class="note"> -<p><strong>Note </strong>: Les éléments de différentes cartes ne seront pas alignés les uns avec les autres car chaque carte est une grille indépendante. La fonctionnalité de sous-grille (<em>subgrid</em>), proposée pour la version de niveau 2 du module de spécification CSS Grid, pourrait apporter une solution à ce problème.</p> +<p><strong>Note :</strong> Les éléments de différentes cartes ne seront pas alignés les uns avec les autres car chaque carte est une grille indépendante. La fonctionnalité de sous-grille (<em>subgrid</em>), proposée pour la version de niveau 2 du module de spécification CSS Grid, pourrait apporter une solution à ce problème.</p> </div> <h2 id="Méthodes_alternatives">Méthodes alternatives</h2> <p>On pourrait également utiliser <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">les boîtes flexibles</a> pour organiser le contenu d'une carte. Dans cette configuration, il faut laisser la zone dédiée au contenu s'étendre et ne pas rendre les autres éléments flexibles. On pourrait ainsi obtenir simplement cette disposition. Les grilles permettent de dimensionner les pistes au niveau du conteneur, pour les boîtes flexibles, il faut dimensionner chaque élément séparément.</p> -<p>Pour l'organisation de l'ensemble des cartes (et pas des cartes individuelles), on pourrait également utiliser les boîtes flexibles mais on aurait alors la dernière carte qui occuperait tout le reste d'une ligne et qui serait potentiellement plus larges que les autres cartes. Une autre méthode consisterait à utiliser <a href="/fr/docs/Web/CSS/Colonnes_CSS">une disposition multi-colonnes</a> où les cartes s'empileraient sur les différentes colonnes (un point qui peut être souhaitable ou indésirable selon l'effet désiré).</p> +<p>Pour l'organisation de l'ensemble des cartes (et pas des cartes individuelles), on pourrait également utiliser les boîtes flexibles mais on aurait alors la dernière carte qui occuperait tout le reste d'une ligne et qui serait potentiellement plus larges que les autres cartes. Une autre méthode consisterait à utiliser <a href="/fr/docs/Web/CSS/CSS_Columns">une disposition multi-colonnes</a> où les cartes s'empileraient sur les différentes colonnes (un point qui peut être souhaitable ou indésirable selon l'effet désiré).</p> -<p>Voir <a href="/fr/docs/Web/CSS/Layout_cookbook/Disposition_en_colonnes">la recette sur les colonnes</a> pour observer ces méthodes en action.</p> +<p>Voir <a href="/fr/docs/Web/CSS/Layout_cookbook/Column_layouts">la recette sur les colonnes</a> pour observer ces méthodes en action.</p> <h2 id="Accessibilité">Accessibilité</h2> @@ -72,9 +72,9 @@ original_slug: Web/CSS/Layout_cookbook/Carte <p>{{Compat("css.properties.grid-template-rows")}}</p> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> - <li>{{Cssxref("grid-template-columns")}}, {{Cssxref("grid-template-rows")}}, {{Cssxref("grid-gap")}}</li> + <li>{{Cssxref("grid-template-columns")}}, {{Cssxref("grid-template-rows")}}, {{Cssxref("gap")}}</li> <li><a href="https://inclusive-components.design/cards/"><em>Inclusive Components: Card</em> (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/layout_cookbook/center_an_element/index.html b/files/fr/web/css/layout_cookbook/center_an_element/index.html index 22e0f3458c..713d277510 100644 --- a/files/fr/web/css/layout_cookbook/center_an_element/index.html +++ b/files/fr/web/css/layout_cookbook/center_an_element/index.html @@ -13,9 +13,9 @@ original_slug: Web/CSS/Layout_cookbook/Centrer_un_element --- <div>{{CSSRef}}</div> -<p class="summary">Comment centrer une boîte dans une autre boîte ? Centrer à la fois horizontalement et verticalement était difficile avant l'arrivée des boîtes flexibles (<em>flexbox</em>), mais c'est désormais beaucoup plus simple grâce aux propriétés du module de spécification <em>Box Alignment</em>.</p> +<p>Comment centrer une boîte dans une autre boîte ? Centrer à la fois horizontalement et verticalement était difficile avant l'arrivée des boîtes flexibles (<em>flexbox</em>), mais c'est désormais beaucoup plus simple grâce aux propriétés du module de spécification <em>Box Alignment</em>.</p> -<p><img alt="an element centered inside a larger box" src="https://mdn.mozillademos.org/files/16182/cookbook-center.png" style="height: 421px; width: 1219px;"></p> +<p><img alt="an element centered inside a larger box" src="cookbook-center.png"></p> <h2 id="Spécifications_sommaires">Spécifications sommaires</h2> @@ -26,7 +26,7 @@ original_slug: Web/CSS/Layout_cookbook/Centrer_un_element <p>{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}</p> <div class="note"> -<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html">Télécharger cet exemple</a></p> +<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html">Télécharger cet exemple</a></p> </div> <h2 id="Choix_effectués">Choix effectués</h2> @@ -53,6 +53,6 @@ original_slug: Web/CSS/Layout_cookbook/Centrer_un_element <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox">L'alignement des boîtes avec Flexbox</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">L'alignement des boîtes avec Flexbox</a></li> <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">CSS Box alignment guide</a></li> </ul> diff --git a/files/fr/web/css/layout_cookbook/column_layouts/index.html b/files/fr/web/css/layout_cookbook/column_layouts/index.html index d0490947ff..8dfa422ffd 100644 --- a/files/fr/web/css/layout_cookbook/column_layouts/index.html +++ b/files/fr/web/css/layout_cookbook/column_layouts/index.html @@ -12,9 +12,9 @@ original_slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes --- <div>{{CSSRef}}</div> -<p class="summary">Vous aurez souvent à créer des dispositions organisées en colonnes. CSS fournit différentes méthodes pour parvenir à de telles dispositions. Les grilles CSS ou les boîtes flexibles ou encore les dispositions multi-colonnes peuvent être utilisées et choisir l'une de ces méthodes dépend de ce que l'on veut obtenir. Dans ce guide, nous verrons ces différentes options.</p> +<p>Vous aurez souvent à créer des dispositions organisées en colonnes. CSS fournit différentes méthodes pour parvenir à de telles dispositions. Les grilles CSS ou les boîtes flexibles ou encore les dispositions multi-colonnes peuvent être utilisées et choisir l'une de ces méthodes dépend de ce que l'on veut obtenir. Dans ce guide, nous verrons ces différentes options.</p> -<p><img alt="three different styles of layouts which have two columns in the container." src="https://mdn.mozillademos.org/files/16183/cookbook-multiple-columns.png" style="height: 406px; width: 1541px;"></p> +<p><img alt="three different styles of layouts which have two columns in the container." src="cookbook-multiple-columns.png"></p> <h2 id="Prérequis">Prérequis</h2> @@ -39,7 +39,7 @@ original_slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes <p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-multicol.html", '100%', 720)}}</p> <div class="note"> -<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-multicol--download.html">Télécharger cet exemple</a></p> +<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-multicol--download.html">Télécharger cet exemple</a></p> </div> <p>On utilisera une disposition multi-colonnes lorsque :</p> @@ -59,7 +59,7 @@ original_slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes <p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox.html", '100%', 720)}}</p> <div class="note"> -<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox--download.html">Télécharger cet exemple</a></p> +<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox--download.html">Télécharger cet exemple</a></p> </div> <p>Les boîtes flexibles peuvent également être utilisées afin de créer des dispositions où les objets flexibles « passent à la ligne » en utilisant la propriété {{cssxref("flex-wrap")}} et la valeur <code>wrap</code> sur le conteneur. Les nouvelles lignes répartiront l'espace pour cette ligne uniquement, il n'y aura pas d'alignement d'une ligne à l'autre (comme on peut le voir dans l'exemple qui suit). C'est pour cette raison qu'on décrit les boîtes flexibles comme étant une méthode de disposition sur une seul dimension : cette méthode permet de contrôler la disposition en ligne ou en colonne mais pas de gérer les deux à la fois.</p> @@ -67,7 +67,7 @@ original_slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes <p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}}</p> <div class="note"> -<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox-wrapping--download.html">Télécharger cet exemple</a></p> +<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox-wrapping--download.html">Télécharger cet exemple</a></p> </div> <p>On utilisera les boîtes flexibles pour :</p> @@ -85,7 +85,7 @@ original_slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes <p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-grid.html", '100%', 720)}}</p> <div class="note"> -<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-grid--download.html">Télécharger cet exemple</a></p> +<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-grid--download.html">Télécharger cet exemple</a></p> </div> <p>On utiliser les grilles CSS lorsque :</p> @@ -122,7 +122,7 @@ original_slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Colonnes_CSS">Guide pour les dispositions multi-colonnes</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Columns">Guide pour les dispositions multi-colonnes</a></li> <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Guide pour les boîtes flexibles (<em>flexbox</em>)</a></li> <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Guide pour les grilles CSS</a></li> </ul> diff --git a/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html b/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html index 846b912106..ac5e39c3e9 100644 --- a/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html +++ b/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html @@ -9,10 +9,12 @@ original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette/Cookbook_templa --- <p>{{CSSRef}}</p> -<div class="note"><strong>Note :</strong> Voici un modèle de contenu pour les pages de « recette » CSS. Vous êtes invité⋅e à utiliser cette page comme modèle lorsque vous créez une nouvelle recette.<br> -<em>Les commentaires en italiques sont des informations sur l'utilisation de telle ou telle partie du modèle.</em></div> +<div class="note"> + <p><strong>Note :</strong> Voici un modèle de contenu pour les pages de « recette » CSS. Vous êtes invité⋅e à utiliser cette page comme modèle lorsque vous créez une nouvelle recette.</p> + <p><em>Les commentaires en italiques sont des informations sur l'utilisation de telle ou telle partie du modèle.</em> +</p></div> -<p class="summary"><em>Une description du problème qu'on souhaite résoudre ou du motif qu'on illustre avec cette recette.</em></p> +<p><em>Une description du problème qu'on souhaite résoudre ou du motif qu'on illustre avec cette recette.</em></p> <h2 id="Spécifications_sommaires">Spécifications sommaires</h2> @@ -27,7 +29,7 @@ original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette/Cookbook_templa <p><em>Il faut modifier le lien pour cibler la version téléchargeable de votre exemple.</em></p> <div class="note"> -<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html">Télécharger cet exemple</a>.</p> +<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html">Télécharger cet exemple</a>.</p> </div> <h2 id="Choix_effectués">Choix effectués</h2> @@ -52,7 +54,7 @@ original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette/Cookbook_templa <p>{{Compat("css.properties.align-items")}}</p> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> <li><em>Liste de liens sur les propriétés concernées : {{Cssxref("example-property")}}</em></li> diff --git a/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html index 03a3396acc..e5a16b419a 100644 --- a/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html +++ b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html @@ -11,14 +11,14 @@ original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette --- <div>{{CSSRef}}</div> -<p class="summary">Si vous souhaitez contribuer en ajoutant une recette à celles présentées dans cette section de MDN, nous vous expliquons ici quelles étapes suivre pour que vos exemples soient publiés.</p> +<p>Si vous souhaitez contribuer en ajoutant une recette à celles présentées dans cette section de MDN, nous vous expliquons ici quelles étapes suivre pour que vos exemples soient publiés.</p> <h2 id="Qu'est-ce_qu'une_«_bonne_»_recette">Qu'est-ce qu'une « bonne » recette ?</h2> <p><strong>Une bonne recette consiste en la version la plus simple possible d'un motif utile pour concevoir une page web.</strong> Chaque ligne de CSS écrite dans la recette doit servir à illustrer le motif. Tout ce qui est purement décoratif pour l'exemple doit être exclus. L'idée est que la recette puisse servir de base à n'importe qui et de pouvoir appliquer ses propres styles sur l'exemple si besoin.</p> <div class="note"> -<p><strong>Note quant à la traduction et aux recettes en anglais :</strong> Une recette (l'exemple interactif, la version téléchargeable et la page MDN) doit d'abord être créée en anglais avant de pouvoir être mise à disposition en français. La suite de ce guide explique en français ce qu'il faut réaliser mais la majeure partie du contenu produit devra être en anglais.</p> +<p><strong>Note :</strong> Quant à la traduction et aux recettes en anglais, une recette (l'exemple interactif, la version téléchargeable et la page MDN) doit d'abord être créée en anglais avant de pouvoir être mise à disposition en français. La suite de ce guide explique en français ce qu'il faut réaliser mais la majeure partie du contenu produit devra être en anglais.</p> </div> <h2 id="Les_étapes_pour_la_publication">Les étapes pour la publication</h2> @@ -63,7 +63,7 @@ original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette <p>Le CSS éditable (celui du second bloc de l'en-tête) doit également être recopié dans la section <code>playable-css</code>.</p> -<p>Pour voir un exemple existant et comprendre les différentes parties, vous pouvez consulter <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center.html">center.html</a> qui est utilisé sur la page <a href="/fr/docs/Web/CSS/Layout_cookbook/Centrer_un_element">Comment centrer un élément</a>.</p> +<p>Pour voir un exemple existant et comprendre les différentes parties, vous pouvez consulter <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center.html">center.html</a> qui est utilisé sur la page <a href="/fr/docs/Web/CSS/Layout_cookbook/Center_an_element">Comment centrer un élément</a>.</p> <p>Si vous avez créé un <em>fork</em> du dépôt et que vous avez les fichiers CSS et JavaScript avec votre exemple, vous pouvez ouvrir la page dans un navigateur et l'ensemble devrait fonctionner de la même manière que lorsqu'il sera inclus dans une page.</p> @@ -85,12 +85,12 @@ original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette <h3 id="5._Créer_la_page_sur_MDN">5. Créer la page sur MDN</h3> -<p>Une fois l'exemple fusionné, vous pouvez créer l'article correspondant sur MDN. Pour cela, vous aurez besoin d'un compte et <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Create_and_edit_pages#Getting_page_creation_permissions">des permissions pour la création de page</a>. Vous pourrez alors créer une page comme sous-page de la section. <a href="/en-US/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template">Cette page modèle pourra vous servir de point de départ pour votre contenu</a>.</p> +<p>Une fois l'exemple fusionné, vous pouvez créer l'article correspondant sur MDN. Pour cela, vous aurez besoin d'un compte et <a href="/en-US/docs/MDN/Contribute/Howto/Create_and_edit_pages#Getting_page_creation_permissions">des permissions pour la création de page</a>. Vous pourrez alors créer une page comme sous-page de la section. <a href="/en-US/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template">Cette page modèle pourra vous servir de point de départ pour votre contenu</a>.</p> <p>Le modèle explique le contenu de chaque section. Vous pouvez également consulter les recettes existantes comme références. Si vous cliquez sur le bouton d'édition en haut de page, vous pourrez ainsi accéder au contenu « brut » de la page et voir comment les macros sont utilisées afin d'intégrer les données de compatibilité ou les exemples interactifs.</p> <div class="note"> -<p><strong>Note de traduction :</strong> Si vous souhaitez effectuer la traduction d'une recette existante, vous pouvez consulter <a href="/fr/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template">la page modèle en français</a>.</p> +<p><strong>Note :</strong> Si vous souhaitez effectuer la traduction d'une recette existante, vous pouvez consulter <a href="/fr/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template">la page modèle en français</a>.</p> </div> <p>Si vous avez besoin d'une aide générale sur l'utilisation de MDN, vous pouvez consulter les pages d'aide.</p> diff --git a/files/fr/web/css/layout_cookbook/grid_wrapper/index.html b/files/fr/web/css/layout_cookbook/grid_wrapper/index.html index f28922b563..249e8fa898 100644 --- a/files/fr/web/css/layout_cookbook/grid_wrapper/index.html +++ b/files/fr/web/css/layout_cookbook/grid_wrapper/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/Layout_cookbook/Grid_wrapper --- <div>{{CSSRef}}</div> -<p class="summary">Ce motif permet d'aligner le contenu d'une grille au centre grâce à un élément qui l'enveloppe. On peut également choisir quels éléments aligner au centre et lesquels adosser aux côtés.</p> +<p>Ce motif permet d'aligner le contenu d'une grille au centre grâce à un élément qui l'enveloppe. On peut également choisir quels éléments aligner au centre et lesquels adosser aux côtés.</p> <h2 id="Spécifications_sommaires">Spécifications sommaires</h2> @@ -20,14 +20,14 @@ translation_of: Web/CSS/Layout_cookbook/Grid_wrapper <p>{{EmbedGHLiveSample("css-examples/css-cookbook/grid-wrapper.html", '100%', 720)}}</p> <div class="note"> -<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/grid-wrapper--download.html">Télécharger cet exemple</a>.</p> +<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/grid-wrapper--download.html">Télécharger cet exemple</a>.</p> </div> <h2 id="Choix_effectués">Choix effectués</h2> -<p dir="ltr" id="docs-internal-guid-30ae4ecd-7fff-36c2-da7d-0fbb6ec4feae">Cette recette utilise la fonction {{cssxref("minmax()")}} afin de définir les tailles des pistes pour la propriété {{cssxref("grid-template-columns")}}.</p> +<p>Cette recette utilise la fonction {{cssxref("minmax()")}} afin de définir les tailles des pistes pour la propriété {{cssxref("grid-template-columns")}}.</p> -<p dir="ltr">Les deux colonnes extérieures ont une taille maximale de <code>1fr</code>, ce qui signifie qu'elles occuperont tout l'espace disponible dans le conteneur de grille.</p> +<p>Les deux colonnes extérieures ont une taille maximale de <code>1fr</code>, ce qui signifie qu'elles occuperont tout l'espace disponible dans le conteneur de grille.</p> <h2 id="Méthodes_de_recours_ou_alternatives">Méthodes de recours ou alternatives</h2> @@ -69,13 +69,11 @@ translation_of: Web/CSS/Layout_cookbook/Grid_wrapper <p>{{Compat("css.properties.grid-template-columns")}}</p> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> <li>{{Cssxref("grid-template-columns")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout" id="docs-internal-guid-ae8eafc9-7fff-65b9-8d8c-bb5f1e3c874c">Les grilles CSS sur MDN</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Les grilles CSS sur MDN</a></li> <li>Article :<a href="https://css-irl.info/more-flexibility-with-minmax/"> Les grilles CSS, plus de flexibilité avec <code>minmax()</code> (en anglais)</a></li> <li>Article : <a href="https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/">Isoler des éléments sur une grille CSS (en anglais)</a></li> -</ul> - -<p> </p> +</ul>
\ No newline at end of file diff --git a/files/fr/web/css/layout_cookbook/index.html b/files/fr/web/css/layout_cookbook/index.html index dc96a66da3..f3debbc018 100644 --- a/files/fr/web/css/layout_cookbook/index.html +++ b/files/fr/web/css/layout_cookbook/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/Layout_cookbook --- <div>{{CSSRef}}</div> -<p class="summary">Le livre de recettes CSS vise à illustrer différents motifs qu'on retrouve fréquemment sur le Web et qu'on pourrait souhaiter implémenter pour son propre site. En plus de fournir du code qui peut servir de point de départ, ces recettes mettent en avant les différents outils et dispositions qui peuvent être utilisées et les choix à effectuer lors du développement.</p> +<p>Le livre de recettes CSS vise à illustrer différents motifs qu'on retrouve fréquemment sur le Web et qu'on pourrait souhaiter implémenter pour son propre site. En plus de fournir du code qui peut servir de point de départ, ces recettes mettent en avant les différents outils et dispositions qui peuvent être utilisées et les choix à effectuer lors du développement.</p> <div class="note"> <p><strong>Note :</strong> Si vous débutez en CSS, nous vous conseillons de consulter <a href="/fr/docs/Apprendre/CSS/CSS_layout">notre module sur l'apprentissage de la disposition en CSS</a>. Ce guide vous fournira les informations de base pour comprendre le fonctionnement de chacune de ces recettes.</p> diff --git a/files/fr/web/css/layout_cookbook/list_group_with_badges/index.html b/files/fr/web/css/layout_cookbook/list_group_with_badges/index.html index 6b76635ff1..98a8a06891 100644 --- a/files/fr/web/css/layout_cookbook/list_group_with_badges/index.html +++ b/files/fr/web/css/layout_cookbook/list_group_with_badges/index.html @@ -10,9 +10,9 @@ original_slug: Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs --- <p>{{CSSRef}}</p> -<p class="summary">Dans cet article, nous verrons comment créer une liste de groupes dont chaque élément possède un compteur sous la forme d'un indicateur (<em>badge</em>).</p> +<p>Dans cet article, nous verrons comment créer une liste de groupes dont chaque élément possède un compteur sous la forme d'un indicateur (<em>badge</em>).</p> -<p><img alt="A list of items with a badge indicating a count displayed to the right of the text." src="https://mdn.mozillademos.org/files/16255/list-group-badges.png" style="height: 423px; width: 791px;"></p> +<p><img alt="A list of items with a badge indicating a count displayed to the right of the text." src="list-group-badges.png"></p> <h2 id="Spécifications_sommaires">Spécifications sommaires</h2> @@ -22,7 +22,9 @@ original_slug: Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs <p>{{EmbedGHLiveSample("css-examples/css-cookbook/list-group-badges.html", '100%', 720)}}</p> -<p class="note"><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/list-group-badges--download.html">Télécharger l'exemple</a>.</p> +<div class="note"> + <p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/list-group-badges--download.html">Télécharger l'exemple</a>.</p> +</div> <h2 id="Choix_effectués">Choix effectués</h2> @@ -44,9 +46,9 @@ original_slug: Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs <p>{{Compat("css.properties.align-items")}}</p> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox">Alignement des boîtes avec les boîtes flexibles</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">Alignement des boîtes avec les boîtes flexibles</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligner des objets dans un conteneur flexible</a></li> </ul> diff --git a/files/fr/web/css/layout_cookbook/media_objects/index.html b/files/fr/web/css/layout_cookbook/media_objects/index.html index 418850ee25..8c2ca3ae1e 100644 --- a/files/fr/web/css/layout_cookbook/media_objects/index.html +++ b/files/fr/web/css/layout_cookbook/media_objects/index.html @@ -9,9 +9,9 @@ translation_of: Web/CSS/Layout_cookbook/Media_objects --- <div>{{CSSRef}}</div> -<p class="summary">Le motif <em>Media Object</em> (qu'on peut traduire en « objet avec média ») est un motif qu'on rencontre fréquemment sur le Web. <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">Intitulé ainsi par Nicole Sullivan</a>, cela fait référence à une boîte organisée en deux colonnes dont l'une contient une image d'un côté et un texte descriptif de l'autre (par exemple l'image de profil de quelqu'un à gauche et un billet à droite).</p> +<p>Le motif <em>Media Object</em> (qu'on peut traduire en « objet avec média ») est un motif qu'on rencontre fréquemment sur le Web. <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">Intitulé ainsi par Nicole Sullivan</a>, cela fait référence à une boîte organisée en deux colonnes dont l'une contient une image d'un côté et un texte descriptif de l'autre (par exemple l'image de profil de quelqu'un à gauche et un billet à droite).</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/16112/media-object.png"></p> +<p><img alt="" src="media-object.png"></p> <h2 id="Spécifications_sommaires">Spécifications sommaires</h2> @@ -27,10 +27,10 @@ translation_of: Web/CSS/Layout_cookbook/Media_objects <h2 id="Recette">Recette</h2> -<p class="codepen">{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}</p> +<p>{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}</p> <div class="note"> -<p class="codepen"><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects--download.html">Télécharger cet exemple</a>.</p> +<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects--download.html">Télécharger cet exemple</a>.</p> </div> <h2 id="Choix_effectués">Choix effectués</h2> @@ -49,10 +49,10 @@ translation_of: Web/CSS/Layout_cookbook/Media_objects <p>Il existe différentes méthodes alternatives permettant d'obtenir ce résultat selon les navigateurs que vous souhaitez prendre en charge. Une méthode assez générique consiste à placer l'image en flottante à gauche et d'ajouter un dégagement sur la boîte afin qu'elle contienne bien tous les éléments flottants.</p> -<p class="codepen">{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}</p> +<p>{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}</p> <div class="note"> -<p class="codepen"><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects-fallback--download.html">Télécharger cet exemple</a>.</p> +<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects-fallback--download.html">Télécharger cet exemple</a>.</p> </div> <p>Une fois que les éléments flottants sont des éléments de grille, les dégagements ne s'appliquent plus et il n'est donc pas nécessaire de retirer quoi que ce soit sur les dégagements.</p> @@ -78,8 +78,8 @@ translation_of: Web/CSS/Layout_cookbook/Media_objects <ul> <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Les grilles CSS</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive">L'amélioration progressive et les grilles CSS</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">Utiliser les zones nommées des grilles</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">L'amélioration progressive et les grilles CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Utiliser les zones nommées des grilles</a></li> <li><code><a href="/fr/docs/Web/CSS/fit-content">fit-content</a></code></li> <li><code><a href="/fr/docs/Web/CSS/grid-template-areas">grid-template-areas</a></code></li> </ul> diff --git a/files/fr/web/css/layout_cookbook/pagination/index.html b/files/fr/web/css/layout_cookbook/pagination/index.html index 506e521b49..eacc793faa 100644 --- a/files/fr/web/css/layout_cookbook/pagination/index.html +++ b/files/fr/web/css/layout_cookbook/pagination/index.html @@ -10,9 +10,9 @@ translation_of: Web/CSS/Layout_cookbook/Pagination --- <p>{{CSSRef}}</p> -<p class="summary">Dans cette recette, nous verrons comment utiliser une méthode de navigation où l'utilisateur peut passer d'une page à une autre pour un ensemble donné via les numéros de ces pages (généralement affichés en bas de page).</p> +<p>Dans cette recette, nous verrons comment utiliser une méthode de navigation où l'utilisateur peut passer d'une page à une autre pour un ensemble donné via les numéros de ces pages (généralement affichés en bas de page).</p> -<p><img alt="Links to sets of pages in a paged listing" src="https://mdn.mozillademos.org/files/16279/pagination.png" style="height: 192px; width: 950px;"></p> +<p><img alt="Links to sets of pages in a paged listing" src="pagination.png"></p> <h2 id="Spécifications_sommaires">Spécifications sommaires</h2> @@ -25,7 +25,7 @@ translation_of: Web/CSS/Layout_cookbook/Pagination <p>{{EmbedGHLiveSample("css-examples/css-cookbook/pagination.html", '100%', 720)}}</p> <div class="note"> -<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/pagination--download.html">Télécharger cet exemple</a>.</p> +<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/pagination--download.html">Télécharger cet exemple</a>.</p> </div> <h2 id="Choix_effectués">Choix effectués</h2> @@ -67,7 +67,7 @@ translation_of: Web/CSS/Layout_cookbook/Pagination <p>{{Compat("css.properties.column-gap.flex_context")}}</p> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> <li>{{Cssxref("justify-content")}}</li> @@ -75,5 +75,5 @@ translation_of: Web/CSS/Layout_cookbook/Pagination <li><em><a href="https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html">Know your ARIA: 'Hidden' vs 'None'</a></em><a href="https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html"> (en anglais)</a></li> <li><a href="https://webaim.org/techniques/css/invisiblecontent/#techniques">Utiliser le contenu invisible pour les lecteurs d'écran (en anglais)</a></li> <li><a href="https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939">Écrire du CSS sans oublier l'accessibilité (en anglais)</a></li> - <li><a href="http://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-pagination">Guide stylistique d'accessibilité : la pagination</a></li> + <li><a href="https://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-pagination">Guide stylistique d'accessibilité : la pagination</a></li> </ul> diff --git a/files/fr/web/css/layout_cookbook/split_navigation/index.html b/files/fr/web/css/layout_cookbook/split_navigation/index.html index dda4a698fd..aec75bcde2 100644 --- a/files/fr/web/css/layout_cookbook/split_navigation/index.html +++ b/files/fr/web/css/layout_cookbook/split_navigation/index.html @@ -10,9 +10,9 @@ original_slug: Web/CSS/Layout_cookbook/Navigation_segmentée --- <div>{{CSSRef}}</div> -<p class="summary">Une barre de navigation divisée consiste en un ou plusieurs éléments de navigation séparés des autres éléments de navigation.</p> +<p>Une barre de navigation divisée consiste en un ou plusieurs éléments de navigation séparés des autres éléments de navigation.</p> -<p><img alt="Items separated into two groups." src="https://mdn.mozillademos.org/files/16227/split-navigation.png" style="height: 145px; width: 1272px;"></p> +<p><img alt="Items separated into two groups." src="split-navigation.png"></p> <h2 id="Spécifications_sommaires">Spécifications sommaires</h2> @@ -40,7 +40,7 @@ original_slug: Web/CSS/Layout_cookbook/Navigation_segmentée <p>{{Compat("css.properties.flex")}}</p> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Le module de spécification <em>CSS Flexible Box Layout</em></a></li> diff --git a/files/fr/web/css/layout_cookbook/sticky_footers/index.html b/files/fr/web/css/layout_cookbook/sticky_footers/index.html index 683a1039a7..096d514add 100644 --- a/files/fr/web/css/layout_cookbook/sticky_footers/index.html +++ b/files/fr/web/css/layout_cookbook/sticky_footers/index.html @@ -10,9 +10,9 @@ original_slug: Web/CSS/Layout_cookbook/Bas_de_page_adhérant --- <div>{{CSSRef}}</div> -<p class="summary">Un bas de page adhérant est un motif où le bas de page reste en bas de la zone d'affichage (<em>viewport</em>) lorsque le contenu est moins haut que la zone d'affichage. Dans cet article, nous verrons quelques techniques pour parvenir à ce résultat.</p> +<p>Un bas de page adhérant est un motif où le bas de page reste en bas de la zone d'affichage (<em>viewport</em>) lorsque le contenu est moins haut que la zone d'affichage. Dans cet article, nous verrons quelques techniques pour parvenir à ce résultat.</p> -<p><img alt="A sticky footer pushed to the bottom of a box" src="https://mdn.mozillademos.org/files/16184/cookbook-footer.png" style="height: 807px; width: 1213px;"></p> +<p><img alt="A sticky footer pushed to the bottom of a box" src="cookbook-footer.png"></p> <h2 id="Spécifications_sommaires">Spécifications sommaires</h2> @@ -70,5 +70,5 @@ original_slug: Web/CSS/Layout_cookbook/Bas_de_page_adhérant <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base">Les concepts de base des grilles CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Les concepts de base des grilles CSS</a></li> </ul> diff --git a/files/fr/web/css/left/index.html b/files/fr/web/css/left/index.html index 51bffd0e2e..f7a4ed2eb0 100644 --- a/files/fr/web/css/left/index.html +++ b/files/fr/web/css/left/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/left <div>{{EmbedInteractiveExample("pages/css/left.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Pour les éléments positionnés de façon absolue (ceux pour lesquels {{cssxref("position")}}<code>: absolute</code> ou <code>position: fixed</code>), elle définit la distance entre le bord gauche de la marge de l'élément et le bord gauche de son bloc englobant (le bloc englobant étant l'ancêtre par rapport auquel l'élément est positionné de façon relative).</p> <p>Pour les éléments positionnés grâce à {{cssxref("position")}}<code>: relative</code>, c'est le décalage ajouté à gauche de l'élément (qui est donc déplacé vers la droite de sa position normale).</p> diff --git a/files/fr/web/css/length-percentage/index.html b/files/fr/web/css/length-percentage/index.html index 6e0d8a9824..149f8bd787 100644 --- a/files/fr/web/css/length-percentage/index.html +++ b/files/fr/web/css/length-percentage/index.html @@ -17,9 +17,9 @@ translation_of: Web/CSS/length-percentage <h2 id="Utilisation_avec_calc()">Utilisation avec <code>calc()</code></h2> -<p>Lorsqu'une valeur de type <code><length-percentage></code> peut être utilisée dans une déclaration, cela signifie que le pourcentage sera résolu comme une longueur et qu'il peut alors être utilisé au sein d'une expression {{cssxref("calc", "calc()")}}. Ainsi, toutes les valeurs qui suivent sont acceptables pour la propriété {{Cssxref("width")}} :</p> +<p>Lorsqu'une valeur de type <code><length-percentage></code> peut être utilisée dans une déclaration, cela signifie que le pourcentage sera résolu comme une longueur et qu'il peut alors être utilisé au sein d'une expression {{cssxref("calc()", "calc()")}}. Ainsi, toutes les valeurs qui suivent sont acceptables pour la propriété {{Cssxref("width")}} :</p> -<pre class="syntaxbox example-good">width: 200px; +<pre class="brush:css example-good">width: 200px; width: 20%; width: calc(100% - 200px); </pre> diff --git a/files/fr/web/css/length/index.html b/files/fr/web/css/length/index.html index 1927712da9..8cf016dcb5 100644 --- a/files/fr/web/css/length/index.html +++ b/files/fr/web/css/length/index.html @@ -39,28 +39,28 @@ translation_of: Web/CSS/length <dl> <dt><code>cap</code></dt> <dd>Cette unité représente la taille nominale d'une lettre capitale pour la police ({{cssxref("font")}}) de l'élément.</dd> - <dt><a name="ch"><code>ch</code></a></dt> + <dt><code>ch</code></dt> <dd>Cette unité représente la largeur du caractère « 0 » (zéro, le caractère Unicode U+0030) dans la police actuelle. Dans les cas où il est impossible ou trop complexe de déterminer la taille du glyphe pour « 0 », on prend l'hypothèse que celui-ci mesure 0.5em de large sur 1em de haut.</dd> - <dt><a name="em"><code>em</code></a></dt> + <dt><code>em</code></dt> <dd> <p>Cette unité représente la {{cssxref("font-size")}} calculée de l'élément. Si utilisée avec la propriété {{cssxref("font-size")}}, elle représente la taille de police <em>héritée</em> de l'élément.</p> <div class="note"> - <p>Cette unité est souvent utilisée pour créer des mises en page s'adaptant à la taille des contenus, qui gardent le <a href="http://24ways.org/2006/compose-to-a-vertical-rhythm/">rythme vertical de la page</a>, même lorsque l'utilisateur change la taille des polices. Les propriétés CSS {{cssxref("line-height")}}, {{cssxref("font-size")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-top")}} ont souvent des dimensions exprimées en <strong>em</strong>.</p> + <p><strong>Note :</strong> Cette unité est souvent utilisée pour créer des mises en page s'adaptant à la taille des contenus, qui gardent le <a href="http://24ways.org/2006/compose-to-a-vertical-rhythm/">rythme vertical de la page</a>, même lorsque l'utilisateur change la taille des polices. Les propriétés CSS {{cssxref("line-height")}}, {{cssxref("font-size")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-top")}} ont souvent des dimensions exprimées en <strong>em</strong>.</p> </div> </dd> - <dt><a name="ex"><code>ex</code></a></dt> + <dt><code>ex</code></dt> <dd>Cette unité représente la <a href="https://fr.wikipedia.org/wiki/Hauteur_d%27x">hauteur d'x</a> de la {{cssxref("font")}} de l'élément. Il peut s'agir généralement de la hauteur des lettres bas de casse de la police. <code>1ex ≈ 0.5em</code> dans de nombreuses polices.</dd> <dt><code>ic</code></dt> <dd>Cette unité représente la largeur entre le début du caractère “水” (U+6C34) et le début du caractère suivant selon la police utilisée et après que les transformations qui modifient la taille des caractères aient été appliquées.</dd> <dt><code>lh</code></dt> <dd>Cette unité représente la valeur calculée de la propriété {{cssxref("line-height")}}, convertie en longueur absolue, de l'élément sur lequel elle est utilisée.</dd> - <dt><a name="rem"><code>rem</code></a></dt> + <dt><code>rem</code></dt> <dd> <p>Cette unité représente la {{cssxref("font-size")}} de l'élément racine (par exemple la taille de la police de l'élément {{HTMLElement("html")}}). Quand utilisée avec {{cssxref("font-size")}} sur l'élément racine, elle représente sa valeur initiale.</p> <div class="note"> - <p>Cette unité est utile pour la création de mises en page s'adaptant à la taille des contenus. Si elle n'est pas supportée par les navigateurs ciblés, ces mises en pages peuvent être réalisées en utilisant l'unité <strong>em</strong>, mais la réalisation est un petit peu plus complexe.</p> + <p><strong>Note :</strong> Cette unité est utile pour la création de mises en page s'adaptant à la taille des contenus. Si elle n'est pas supportée par les navigateurs ciblés, ces mises en pages peuvent être réalisées en utilisant l'unité <strong>em</strong>, mais la réalisation est un petit peu plus complexe.</p> </div> </dd> <dt><code>rlh</code></dt> @@ -76,15 +76,15 @@ translation_of: Web/CSS/length <dl> <dt><code>vb</code></dt> <dd>1 % de la taille du bloc englobant initial selon la direction de bloc (la direction orthogonale au sens d'écriture) de l'élément racine.</dd> - <dt><a name="vh"><code>vh</code></a></dt> + <dt><code>vh</code></dt> <dd>1/100<sup>e</sup> de la hauteur du <em>viewport</em>.</dd> <dt><code>vi</code></dt> <dd>1 % de la taille du bloc englobant initial selon la direction en ligne (la direction du sens d'écriture) de l'élément racine.</dd> - <dt><a name="vw"><code>vw</code></a></dt> + <dt><code>vw</code></dt> <dd>1/100<sup>e</sup> de la largeur du <em>viewport</em>.</dd> - <dt><a name="vmin"><code>vmin</code></a></dt> + <dt><code>vmin</code></dt> <dd>1/100<sup>e</sup> du côté le plus petit du <em>viewport</em>.</dd> - <dt><a name="vmax"><code>vmax</code></a></dt> + <dt><code>vmax</code></dt> <dd>1/100<sup>e</sup> du côté le plus grand du <em>viewport</em>.</dd> </dl> @@ -101,27 +101,29 @@ translation_of: Web/CSS/length </div> <dl> - <dt><a name="px"><code>px</code></a></dt> + <dt><code>px</code></dt> <dd>Pour l'affichage sur écran, correspond typiquement à un pixel de l'affichage. Pour les écrans en haute résolution et les imprimantes, un pixel CSS correspond à plusieurs pixels du périphérique, de sorte que le nombre de pixels par pouce (ppi) reste aux alentours de 96.</dd> - <dt><a name="mm"><code>mm</code></a></dt> + <dt><code>mm</code></dt> <dd>Un millimètre. Pour l'affichage sur écran, le nombre de pixels par millimètre est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.</dd> <dt><code>Q</code>{{experimental_inline}}</dt> <dd>Un quart de millimètre (1/40<sup>e</sup> de centimètre).</dd> - <dt><a name="cm"><code>cm</code></a></dt> + <dt><code>cm</code></dt> <dd>Un centimètre (ou 10 millimètres). Pour l'affichage sur écran, le nombre de pixels par centimètre est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.</dd> - <dt><a name="in"><code>in</code></a></dt> + <dt><code>in</code></dt> <dd>Un pouce (soit 2,54 centimètres). Pour l'affichage sur écran, le nombre de pixels par pouce est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.</dd> - <dt><a name="pt"><code>pt</code></a></dt> + <dt><code>pt</code></dt> <dd>Un point pica (soit 1/72<sup>e</sup> de pouce). Pour l'affichage sur écran, le nombre de pixels par point est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.</dd> - <dt><a name="pc"><code>pc</code></a></dt> + <dt><code>pc</code></dt> <dd>Un pica (soit 12 points, soit 1/6<sup>e</sup> de pouce). Pour l'affichage sur écran, le nombre de pixels par pica est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.</dd> - <dt><code><a name="mozmm">mozmm</a></code> {{non-standard_inline}}, retiré avec Firefox 59</dt> + <dt><code>mozmm</code> {{non-standard_inline}}, retiré avec Firefox 59</dt> <dd>Une unité expérimentale qui tente de représenter exactement un millimètre, quelque soit la taille ou la résolution de l’affichage. C’est rarement ce que nous voulons, mais peut être utile en particulier pour les terminaux mobiles.</dd> </dl> <h2 id="Unités_CSS_et_points_par_pouce">Unités CSS et points par pouce</h2> -<p class="note">L’unité <code>in</code> ne représente pas un pouce physique de l’écran, mais <code>96px</code>. Celà signifie que quelque soit la densité de pixel réelle de l’écran, elle est supposée correspondre à <code>96dpi</code>. Sur les périphériques dotés d’une plus grande densité de pixel, <code>1in</code> fera moins d’1 pouce physique. De la même manière, <code>mm</code>, <code>cm</code>, et <code>pt</code> ne sont pas des longueurs absolues.</p> +<div class="note"> + <p><strong>Note :</strong> L’unité <code>in</code> ne représente pas un pouce physique de l’écran, mais <code>96px</code>. Celà signifie que quelque soit la densité de pixel réelle de l’écran, elle est supposée correspondre à <code>96dpi</code>. Sur les périphériques dotés d’une plus grande densité de pixel, <code>1in</code> fera moins d’1 pouce physique. De la même manière, <code>mm</code>, <code>cm</code>, et <code>pt</code> ne sont pas des longueurs absolues.</p> +</div> <p>Quelques exemples particuliers :</p> @@ -133,7 +135,7 @@ translation_of: Web/CSS/length <h2 id="Interpolation">Interpolation</h2> -<p>Les valeurs du type <code><length></code> peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par des nombres réels à virgule flottante. L'interpolation se fait sur les valeurs calculées. La rapidité de l'interpolation est déterminée par la {{cssxref("timing-function","fonction de temporisation","",1)}} associée à l'animation.</p> +<p>Les valeurs du type <code><length></code> peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par des nombres réels à virgule flottante. L'interpolation se fait sur les valeurs calculées. La rapidité de l'interpolation est déterminée par la {{cssxref("easing-function","fonction de temporisation","",1)}} associée à l'animation.</p> <h2 id="Spécifications">Spécifications</h2> @@ -174,7 +176,7 @@ translation_of: Web/CSS/length <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Tutoriel sur les unités et valeurs CSS</a></li> - <li><a href="/fr/docs/Web/CSS/Valeurs_et_unités_CSS">Référence des unités et valeurs en CSS</a></li> - <li><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS">Modèle de boîtes CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Tutoriel sur les unités et valeurs CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Values_and_Units">Référence des unités et valeurs en CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Box_Model">Modèle de boîtes CSS</a></li> </ul> diff --git a/files/fr/web/css/letter-spacing/index.html b/files/fr/web/css/letter-spacing/index.html index 7dadd4852a..dfd70ca730 100644 --- a/files/fr/web/css/letter-spacing/index.html +++ b/files/fr/web/css/letter-spacing/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/letter-spacing <div>{{EmbedInteractiveExample("pages/css/letter-spacing.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs de longueur */ diff --git a/files/fr/web/css/line-height-step/index.html b/files/fr/web/css/line-height-step/index.html index 2266a177ca..c13c19867d 100644 --- a/files/fr/web/css/line-height-step/index.html +++ b/files/fr/web/css/line-height-step/index.html @@ -23,7 +23,7 @@ line-height-step: 18pt; <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><code><a id="<length>" name="<length>"><length></a></code></dt> + <dt><code><length></code></dt> <dd>La longueur indiquée est utilisée pour calculer le « pas » pour la hauteur de la boîte de chaque ligne. Voir {{cssxref("<length>")}} pour plus d'informations sur ce type de valeur.</dd> </dl> @@ -33,7 +33,7 @@ line-height-step: 18pt; <h2 id="Exemples">Exemples</h2> -<p id="sect1">Dans l'exemple suivant, la hauteur de la boîte des lignes pour chaque paragraphe est arrondie à l'unité supérieure. La boîte de la ligne pour l'élément <code><h1></code> ne tient pas sur une unité et en occupe donc deux (mais est toujours centrée sur ces deux unités).</p> +<p>Dans l'exemple suivant, la hauteur de la boîte des lignes pour chaque paragraphe est arrondie à l'unité supérieure. La boîte de la ligne pour l'élément <code><h1></code> ne tient pas sur une unité et en occupe donc deux (mais est toujours centrée sur ces deux unités).</p> <pre class="brush: css">:root { font-size: 12pt; @@ -47,7 +47,7 @@ h1 { <p>Voici le résultat obtenu avec une capture d'écran :</p> -<p><img alt="How the line-height-step property affects the appearance of text." src="https://mdn.mozillademos.org/files/15257/line-grid-center.png" style="height: 340px; width: 144px;"></p> +<p><img alt="How the line-height-step property affects the appearance of text." src="line-grid-center.png"></p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/line-height/index.html b/files/fr/web/css/line-height/index.html index d9ba456e10..3c6f8fcb2d 100644 --- a/files/fr/web/css/line-height/index.html +++ b/files/fr/web/css/line-height/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/line-height <div>{{EmbedInteractiveExample("pages/css/line-height.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css">/* Valeur avec un mot-clé */ @@ -55,13 +53,13 @@ line-height: unset; <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><a id="normal" name="normal"><code>normal</code></a></dt> + <dt><code>normal</code></dt> <dd>Le comportement dépend de l'agent utilisateur. Pour les navigateurs de bureau, l'agent utilisateur prend généralement une valeur environ égale à 1.2 selon la valeur de <code>font-family</code>.</dd> - <dt><a id="number" name="number"><code><number></code></a></dt> + <dt><code><number></code></dt> <dd>La valeur utilisée est <strong>sans unité</strong> (type {{cssxref("<number>")}}) et correspond à un facteur multiplicateur de la taille de fonte utilisée. La valeur calculée est la même que celle définie avec <code><number></code>. Dans la plupart des cas, c'est la méthode qu'on privilégiera pour définir <code>line-height</code> et éviter les effets de l'héritage.</dd> - <dt><a id="length" name="length"><code><length></code></a></dt> + <dt><code><length></code></dt> <dd>La valeur de longueur (type {{cssxref("<length>")}}) est utilisée pour calculer la hauteur de la boîte de la ligne. Les différentes unités qui peuvent être utilisées sont décrites avec la page {{cssxref("<length>")}}. Les valeurs exprimées en <code>em</code> peuvent produire des résultats inattendus.</dd> - <dt><a id="percentage" name="percentage"><code><percentage></code></a></dt> + <dt><code><percentage></code></dt> <dd>La valeur exprimée est relative à la taille de fonte utilisée pour l'élément. La valeur calculée sera le pourcentage (type {{cssxref("<percentage>")}}) indiqué, multiplié par la taille calculée de la police de l'élément. Voir la section Notes pour plus de précisions sur le comportement de ce type et des valeurs exprimées en <code>em</code>.</dd> <dt><code>-moz-block-height</code> {{non-standard_inline}}</dt> <dd>La hauteur de la ligne correspond à la hauteur du contenu pour le bloc courant.</dd> diff --git a/files/fr/web/css/list-style-position/index.html b/files/fr/web/css/list-style-position/index.html index ba14939fd8..7b25c5bcc1 100644 --- a/files/fr/web/css/list-style-position/index.html +++ b/files/fr/web/css/list-style-position/index.html @@ -13,17 +13,16 @@ translation_of: Web/CSS/list-style-position <div>{{EmbedInteractiveExample("pages/css/list-style-position.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Pour définir cette propriété, on pourra aussi utiliser la propriété raccourcie {{cssxref("list-style")}}.</p> <div class="note"> -<p><strong>Notes :</strong></p> +<p><strong>Note :</strong> <ul> <li>Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels {{cssxref("display")}}<code>: list-item</code><code>;</code>). <a href="https://www.w3.org/TR/html5/rendering.html#lists">Par défaut</a>, cela inclut les éléments {{HTMLElement("li")}}. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à {{HTMLElement("ol")}} ou à {{HTMLElement("ul")}}).</li> <li>Une différence de comportement existe entre les navigateurs lorsqu'un élément de bloc est placé en premier au sein d'un élément de liste avec <code>list-style-position: inside</code>. Chrome et Safari placent l'élément sur la même ligne que la boîte du marqueur. En revanche, Firefox, Internet Explorer et Opera placent l'élément sur la ligne suivante. Voir {{bug("36854")}} pour plus d'informations.</li> </ul> +</p> </div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/list-style-type/index.html b/files/fr/web/css/list-style-type/index.html index 98d23f3195..0e684cba37 100644 --- a/files/fr/web/css/list-style-type/index.html +++ b/files/fr/web/css/list-style-type/index.html @@ -11,9 +11,7 @@ translation_of: Web/CSS/list-style-type <p>La propriété<strong> <code>list-style-type</code></strong> permet de définir l'apparence de la puce d'un élément de liste (un cercle, un caractère, un compteur spécifique, etc.).</p> -<div>{{EmbedInteractiveExample("pages/css/list-style-type.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<div>{{EmbedInteractiveExample("pages/css/list-style-type.html")}}</div <p>La <a href="/fr/docs/Web/CSS/color_value">couleur</a> de la puce utilisée sera la même que la couleur calculée de l'élément sur lequel elle s'applique.</p> @@ -59,442 +57,118 @@ list-style-type: unset; <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><a id="symbol">{{cssxref("symbols()")}}</a></dt> + <dt>{{cssxref("custom-ident", "<custom-ident>")}}</dt> + <dd>Un identifiant correspondant à la valeur d'un {{cssxref("@counter-style")}} ou à un style prédéfini :</dd> + <dt>{{cssxref("symbols()")}}</dt> <dd>Définit un style de puce utilisé.</dd> - <dt><a id="none*"><code>none</code></a></dt> + <dt><code>none</code></dt> <dd>Aucun marqueur n'est affiché.</dd> - <dt><a id="str">{{cssxref("<string>")}}</a></dt> + <dt>{{cssxref("<string>")}}</dt> <dd>La chaîne de caractères indiquée sera utilisée comme puce</dd> - <dt><a id="custom-ident">{{cssxref("custom-ident", "<custom-ident>")}}</a></dt> - <dd>Un identifiant correspondant à la valeur d'un {{cssxref("@counter-style")}} ou à un style prédéfini :</dd> -</dl> - -<dl style="background: rgb(238, 238, 238); padding: 0.5em 0px 0.5em 0.5em; border: 1px solid powderblue; font-size: 90%; -moz-column-width: 20em; -webkit-columns: 20em; -moz-column-rule: 1px solid powderblue; -webkit-column-rule: 1px solid powderblue;"> <dt><code>disc</code></dt> - <dd> - <ul style="list-style-type: disc;"> - <li>Un disque plein (la valeur par défaut)</li> - </ul> - </dd> + <dd>Un disque plein (la valeur par défaut)</dd> <dt><code>circle</code></dt> - <dd> - <ul style="list-style-type: circle;"> - <li>Un cercle vide</li> - </ul> - </dd> + <dd>Un cercle vide</dd> <dt><code>square</code></dt> - <dd> - <ul style="list-style-type: square;"> - <li>Un carré plein</li> - </ul> - </dd> + <dd>Un carré plein</dd> <dt><code>decimal</code></dt> - <dd> - <ul style="list-style-type: decimal;"> - <li>Des nombres en base 10</li> - <li>Commençant par 1</li> - </ul> - </dd> + <dd>Des nombres décimaux, commençant par 1.</dd> <dt><code>cjk-decimal</code> {{experimental_inline}}</dt> - <dd> - <ul> - <li>Nombres décimaux Han</li> - <li>E.g. 一, 二, 三, ..., 九八, 九九, 一〇〇</li> - </ul> - </dd> + <dd>Des nombres décimaux Han.</dd> <dt><code>decimal-leading-zero</code></dt> - <dd> - <ul style="list-style-type: decimal-leading-zero;"> - <li>Nombres en base 10</li> - <li>Avec des 0 devant</li> - <li>E.g. 01, 02, 03, … 98, 99</li> - </ul> - </dd> + <dd>Des nombres décimaux complétés par des 0.</dd> <dt><code>lower-roman</code></dt> - <dd> - <ul style="list-style-type: lower-roman;"> - <li>Nombres romains minuscules</li> - <li>Par exemple i, ii, iii, iv, v…</li> - </ul> - </dd> + <dd>Des chiffres romains en minuscules.</dd> <dt><code>upper-roman</code></dt> - <dd> - <ul style="list-style-type: upper-roman;"> - <li>Nombres romains en majuscules</li> - <li>Par exemple I, II, III, IV, V…</li> - </ul> - </dd> + <dd>Des chiffres romains en majuscules.</dd> <dt><code>lower-greek</code></dt> - <dd> - <ul style="list-style-type: lower-greek;"> - <li>Lettres grecques minuscules</li> - <li>alpha, beta, gamma…</li> - <li>Par exemple α, β, γ…</li> - </ul> - </dd> - <dt><code>lower-alpha</code></dt> - <dt><code>lower-latin</code></dt> - <dd> - <ul style="list-style-type: lower-alpha;"> - <li>Lettres ASCII en minuscules</li> - <li>Par exemple a, b, c, … z</li> - <li><code>lower-latin</code> n'est pas pris en charge par les versions avant IE7</li> - <li>Voir le tableau de compatibilité</li> - </ul> - </dd> - <dt><code>upper-alpha</code></dt> - <dt><code>upper-latin</code></dt> - <dd> - <ul style="list-style-type: upper-alpha;"> - <li>Lettres ASCII en majuscules</li> - <li>Par exemple A, B, C, … Z</li> - <li><code>upper-latin</code> n'est pas pris en charge par les versions avant IE7</li> - </ul> - </dd> - <dt><code>arabic-indic</code></dt> - <dt><code>-moz-arabic-indic</code></dt> - <dd> - <ul style="list-style-type: -moz-arabic-indic; list-style-type: arabic-indic;"> - <li>Exemple</li> - </ul> - </dd> + <dd>Des lettres grecques en minuscules.</dd> + <dt><code>lower-alpha</code>, <code>lower-latin</code></dt> + <dd>Des lettres ASCII en minuscules.</dd> + <dt><code>upper-alpha</code>, <code>upper-latin</code></dt> + <dd>Des lettres ASCII en majuscules.</dd> + <dt><code>arabic-indic</code>, <code>-moz-arabic-indic</code></dt> + <dd>Des nombres arabo-indiens.</dd> <dt><code>armenian</code></dt> - <dd> - <ul style="list-style-type: armenian;"> - <li>Système de numérotation arménien</li> - <li>(ayb/ayp, ben/pen, gim/keem…</li> - </ul> - </dd> - <dt><code>bengali</code></dt> - <dt><code>-moz-bengali</code></dt> - <dd> - <ul style="list-style-type: -moz-bengali; list-style-type: bengali;"> - <li>Exemple</li> - </ul> - </dd> - <dt><code>cambodian</code> {{experimental_inline}}*</dt> - <dd> - <ul style="list-style-type: cambodian;"> - <li>Exemple</li> - <li>est un synonyme pour <code>khmer</code></li> - </ul> - </dd> - <dt><code>cjk-earthly-branch</code></dt> - <dt><code>-moz-cjk-earthly-branch</code></dt> - <dd> - <ul style="list-style-type: -moz-cjk-earthly-branch; list-style-type: cjk-earthly-branch;"> - <li>Exemple</li> - </ul> - </dd> - <dt><code>cjk-heavenly-stem</code></dt> - <dt><code>-moz-cjk-heavenly-stem</code></dt> - <dd> - <ul style="list-style-type: -moz-cjk-heavenly-stem; list-style-type: cjk-heavenly-stem;"> - <li>Exemple</li> - </ul> - </dd> + <dd>La numérotation arménienne traditionnelle.</dd> + <dt><code>bengali</code>, <code>-moz-bengali</code></dt> + <dd>La numérotation bengali.</dd> + <dt><code>cambodian</code>/<code>khmer</code></dt> + <dd>La numérotation cambodgienne/khmer.</dd> + <dt><code>cjk-earthly-branch</code>, <code>-moz-cjk-earthly-branch</code></dt> + <dd>Des nombres ordinaux Han de la « branche terrestre ».</dd> + <dt><code>cjk-heavenly-stem</code>, <code>-moz-cjk-heavenly-stem</code></dt> + <dd>Des nombres ordinaux Han de la « souche céleste ».</dd> <dt><code>cjk-ideographic</code>{{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: cjk-ideographic;"> - <li>Identique à <code>trad-chinese-informal</code></li> - <li>E.g. 一萬一千一百一十一</li> - </ul> - </dd> - <dt><code>devanagari</code></dt> - <dt><code>-moz-devanagari</code></dt> - <dd> - <ul style="list-style-type: -moz-devanagari; list-style-type: devanagari;"> - <li>Exemple</li> - </ul> - </dd> + <dd>Identique à <code>trad-chinese-informal</code>.</dd> + <dt><code>devanagari</code>, <code>-moz-devanagari</code></dt> + <dd>La numérotation devanagari.</dd> <dt><code>ethiopic-numeric</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: ethiopic-numeric;"> - <li>Exemple</li> - </ul> - </dd> + <dd>La numérotation éthiopienne.</dd> <dt><code>georgian</code></dt> - <dd> - <ul style="list-style-type: georgian;"> - <li>Système de numérotation géorgien</li> - <li>Par exemple an, ban, gan, … he, tan, in…</li> - </ul> - </dd> - <dt><code>gujarati</code></dt> - <dt><code>-moz-gujarati</code></dt> - <dd> - <ul style="list-style-type: -moz-gujarati; list-style-type: gujarati;"> - <li>Exemple</li> - </ul> - </dd> - <dt><code>gurmukhi</code></dt> - <dt><code>-moz-gurmukhi</code></dt> - <dd> - <ul style="list-style-type: -moz-gurmukhi; list-style-type: gurmukhi;"> - <li>Exemple</li> - </ul> - </dd> + <dd>La numérotation géorgienne traditionnelle.</dd> + <dt><code>gujarati</code>, <code>-moz-gujarati</code></dt> + <dd>La numérotation gujarati.</dd> + <dt><code>gurmukhi</code>, <code>-moz-gurmukhi</code></dt> + <dd>La numérotation gurmukhi.</dd> <dt><code>hebrew</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: hebrew;"> - <li>Système de numérotation hébreux</li> - </ul> - </dd> + <dd>La numérotation hébraïque traditionnelle</dd> <dt><code>hiragana</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: hiragana;"> - <li>あ, い, う, え, お, か, き , …</li> - <li>(Japonais)</li> - </ul> - </dd> + <dd>Le lettrage lexicographique hiragana.</dd> <dt><code>hiragana-iroha</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: hiragana-iroha;"> - <li>い, ろ, は, に, ほ, へ, と …</li> - <li>{{interwiki('wikipedia', 'Iroha')}} est l'ancien ordre japonais pour les syllabes.</li> - </ul> - </dd> + <dd>Le lettrage {{interwiki('wikipedia', 'Iroha', 'Iroha-order')}} hiragana.</dd> <dt><code>japanese-formal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: japanese-formal;"> - <li>Système de numérotation japonais formel utilisé pour les documents légaux ou financiers.</li> - <li>E.g., 壱萬壱阡壱百壱拾壱</li> - <li>Ces kanjis ont été conçus afin de ne pas pouvoir être confondus avec d'autres</li> - </ul> - </dd> + <dd>La numérotation japonaise formelle utilisée pour les documents financiers ou légaux. Les kanjis sont conçus afin de ne pas pouvoir être modifié pour ressembler à un autre.</dd> <dt><code>japanese-informal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: japanese-informal;"> - <li>Système de numérotation japonais informel</li> - </ul> - </dd> - <dt><code>kannada</code></dt> - <dt><code>-moz-kannada</code></dt> - <dd> - <ul style="list-style-type: -moz-kannada; list-style-type: kannada;"> - <li>Exemple</li> - </ul> - </dd> - <dt style="list-style-type: katakana;"><code>katakana</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: katakana;"> - <li>ア, イ, ウ, エ, オ, カ, キ, …</li> - <li>(Japonais)</li> - </ul> - </dd> + <dd>La numérotation japonaise informelle.</dd> + <dt><code>kannada</code>, <code>-moz-kannada</code></dt> + <dd>La numérotation kannada.</dd> + <dt><code>katakana</code> {{experimental_inline}}</dt> + <dd>Le lettrage lexicographique katakana.</dd> <dt><code>katakana-iroha</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: katakana-iroha;"> - <li>イ, ロ, ハ, ニ, ホ, ヘ, ト, …</li> - <li>{{interwiki('wikipedia', 'Iroha')}} correspond à l'ancien ordre japonais pour les syllabes.</li> - </ul> - </dd> - <dt><code>khmer</code></dt> - <dt><code>-moz-khmer</code></dt> - <dd> - <ul style="list-style-type: -moz-khmer; list-style-type: khmer;"> - <li>Exemple</li> - </ul> - </dd> + <dd>Le lettrage {{interwiki('wikipedia', 'Iroha', 'Iroha-order')}} katakana.</dd> <dt><code>korean-hangul-formal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: korean-hangul-formal;"> - <li>Système de numérotation coréen hangul .</li> - <li>E.g., 일만 일천일백일십일</li> - </ul> - </dd> + <dd>La numérotation coréenne hangul.</dd> <dt><code>korean-hanja-formal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: korean-hanja-formal;"> - <li>Système de numérotation formel coréen Han.</li> - <li>E.g. 壹萬 壹仟壹百壹拾壹</li> - </ul> - </dd> + <dd>La numérotation formelle coréenne Han.</dd> <dt><code>korean-hanja-informal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: korean-hanja-informal;"> - <li>Système de numérotation coréen hanja numbering.</li> - <li>E.g., 萬 一千百十一</li> - </ul> - </dd> - <dt><code>lao</code></dt> - <dt><code>-moz-lao</code></dt> - <dd> - <ul style="list-style-type: -moz-lao; list-style-type: lao;"> - <li>Exemple</li> - </ul> - </dd> + <dd>La numérotation coréenne hanja.</dd> + <dt><code>lao</code>, <code>-moz-lao</code></dt> + <dd>La numérotation laotienne.</dd> <dt><code>lower-armenian</code> {{experimental_inline}}*</dt> - <dd> - <ul style="list-style-type: lower-armenian;"> - <li>Exemple</li> - </ul> - </dd> - <dt><code>malayalam</code></dt> - <dt><code>-moz-malayalam</code></dt> - <dd> - <ul style="list-style-type: -moz-malayalam; list-style-type: malayalam;"> - <li>Exemple</li> - </ul> - </dd> + <dd>La numérotation arménienne en minuscules.</dd> + <dt><code>malayalam</code>, <code>-moz-malayalam</code></dt> + <dd>La numérotation Malayalam.</dd> <dt><code>mongolian</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: mongolian;"> - <li>Exemple</li> - </ul> - </dd> - <dt><code>myanmar</code></dt> - <dt><code>-moz-myanmar</code></dt> - <dd> - <ul style="list-style-type: -moz-myanmar; list-style-type: myanmar;"> - <li>Exemple</li> - </ul> - </dd> - <dt><code>oriya</code></dt> - <dt><code>-moz-oriya</code></dt> - <dd> - <ul style="list-style-type: -moz-oriya; list-style-type: oriya;"> - <li>Exemple</li> - </ul> - </dd> - <dt><code>persian</code> {{experimental_inline}}</dt> - <dt><code>-moz-persian</code></dt> - <dd> - <ul style="list-style-type: -moz-persian; list-style-type: persian;"> - <li>Exemple</li> - </ul> - </dd> + <dd>La numérotation mongolienne.</dd> + <dt><code>myanmar</code>, <code>-moz-myanmar</code></dt> + <dd>La numérotation birmane.</dd> + <dt><code>oriya</code>, <code>-moz-oriya</code></dt> + <dd>La numérotation Oriya.</dd> + <dt><code>persian</code> {{experimental_inline}}, <code>-moz-persian</code></dt> + <dd>La numérotation perse.</dd> <dt><code>simp-chinese-formal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: simp-chinese-formal;"> - <li>Système de numérotation formel chinois simplifié.</li> - <li>E.g. 壹万壹仟壹佰壹拾壹</li> - </ul> - </dd> + <dd>La numérotation formelle en chinois simplifié.</dd> <dt><code>simp-chinese-informal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: simp-chinese-informal;"> - <li>Système de numérotation informel chinois simplifié.</li> - <li>E.g. 一万一千一百一十一</li> - </ul> - </dd> - <dt><code>tamil</code> {{experimental_inline}}</dt> - <dt><code>-moz-tamil</code></dt> - <dd> - <ul style="list-style-type: -moz-tamil; list-style-type: tamil;"> - <li>Exemple</li> - </ul> - </dd> - <dt><code>telugu</code></dt> - <dt><code>-moz-telugu</code></dt> - <dd> - <ul style="list-style-type: -moz-telugu; list-style-type: telugu;"> - <li>Exemple</li> - </ul> - </dd> - <dt><code>thai</code></dt> - <dt><code>-moz-thai</code></dt> - <dd> - <ul style="list-style-type: -moz-thai; list-style-type: thai;"> - <li>Exemple</li> - </ul> - </dd> + <dd>La numérotation informelle en chinois simplifié.</dd> + <dt><code>tamil</code> {{experimental_inline}}, <code>-moz-tamil</code></dt> + <dd>La numérotation tamoule.</dd> + <dt><code>telugu</code>, <code>-moz-telugu</code></dt> + <dd>La numérotation Telugu.</dd> + <dt><code>thai</code>, <code>-moz-thai</code></dt> + <dd>La numérotation thaïlandaise.</dd> <dt><code>tibetan</code> {{experimental_inline}}*</dt> - <dd> - <ul style="list-style-type: tibetan;"> - <li>Exemple</li> - </ul> - </dd> + <dd>La numérotation tibétaine.</dd> <dt><code>trad-chinese-formal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: trad-chinese-formal;"> - <li>Système de numérotation formel chinois traditionnel.</li> - <li>E.g. 壹萬壹仟壹佰壹拾壹</li> - </ul> - </dd> + <dd>La numérotation formelle en chinois traditionnel.</dd> <dt><code>trad-chinese-informal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: trad-chinese-informal;"> - <li>Système de numérotation informel chinois traditionnel.</li> - <li>E.g. 一萬一千一百一十一</li> - </ul> - </dd> + <dd>La numérotation informelle en chinois traditionnel.</dd> <dt><code>upper-armenian</code> {{experimental_inline}}*</dt> - <dd> - <ul style="list-style-type: upper-armenian;"> - <li>Exemple</li> - </ul> - </dd> + <dd>La numérotation arménienne traditionnelle en majuscules.</dd> <dt><code>disclosure-open</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: disclosure-open;"> - <li>Symbole indiquant qu'un <em>widget</em> (comme {{HTMLElement("details")}}) est ouvert.</li> - </ul> - </dd> + <dd>Un symbole indiquant qu'un contrôle de révélation (tel qu'un élément {{HTMLElement("details")}}) est déplié/révélé.</dd> <dt><code>disclosure-closed</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: disclosure-closed;"> - <li>Symbole indiquant qu'un <em>widget</em> (comme {{HTMLElement("details")}}) est fermé.</li> - </ul> - </dd> -</dl> - -<h3 id="Extensions_non-standards">Extensions non-standards</h3> - -<p>D'autres types sont fournis par Gecko (Firefox), Blink (Chrome and Opera) and WebKit (Safari) mais ne sont pas standards. Pour voir les différents navigateurs les supportant, se référer au tableau de compatibilité en bas de page.</p> - -<dl style="background: rgb(238, 238, 238); padding: 0.5em 0px 0.5em 0.5em; border: 1px solid powderblue; font-size: 90%; -moz-column-width: 16em; -webkit-columns: 16em; -moz-column-rule: 1px solid powderblue; -webkit-column-rule: 1px solid powderblue;"> - <dt><code>-moz-ethiopic-halehame</code></dt> - <dd> - <ul style="list-style-type: -moz-ethiopic-halehame;"> - <li>Exemple</li> - </ul> - </dd> - <dt><code>-moz-ethiopic-halehame-am</code></dt> - <dd> - <ul style="list-style-type: -moz-ethiopic-halehame-am;"> - <li>Exemple</li> - </ul> - </dd> - <dt><code>ethiopic-halehame-ti-er</code></dt> - <dt><code>-moz-ethiopic-halehame-ti-er</code></dt> - <dd> - <ul style="list-style-type: -moz-ethiopic-halehame-ti-er;"> - <li>Exemple</li> - </ul> - </dd> - <dt><code>ethiopic-halehame-ti-et</code></dt> - <dt><code>-moz-ethiopic-halehame-ti-et</code></dt> - <dd> - <ul style="list-style-type: -moz-ethiopic-halehame-ti-et;"> - <li>Exemple</li> - </ul> - </dd> - <dt><code>hangul</code></dt> - <dt><code>-moz-hangul</code></dt> - <dd> - <ul style="list-style-type: -moz-hangul;"> - <li>Exemple</li> - <li>Exemple</li> - <li>Exemple</li> - </ul> - </dd> - <dt><code>hangul-consonant</code></dt> - <dt><code>-moz-hangul-consonant</code></dt> - <dd> - <ul style="list-style-type: -moz-hangul-consonant;"> - <li>Exemple</li> - <li>Exemple</li> - <li>Exemple</li> - </ul> - </dd> - <dt><code>urdu</code></dt> - <dt><code>-moz-urdu</code></dt> - <dd> - <ul style="list-style-type: -moz-urdu;"> - <li>Exemple</li> - </ul> - </dd> + <dd>Un symbole indiquant qu'un contrôle de révélation (tel qu'un élément {{HTMLElement("details")}}) est replié/masqué.</dd> </dl> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> diff --git a/files/fr/web/css/list-style/index.html b/files/fr/web/css/list-style/index.html index 1bec8385a9..8022402371 100644 --- a/files/fr/web/css/list-style/index.html +++ b/files/fr/web/css/list-style/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/list-style <div>{{EmbedInteractiveExample("pages/css/list-style.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels {{cssxref("display")}}<code>: list-item</code><code>;</code>}}). Par défaut, cela inclut les éléments {{HTMLElement("li")}}. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à {{HTMLElement("ol")}} ou à {{HTMLElement("ul")}}).</p> </div> diff --git a/files/fr/web/css/list_of_proprietary_css_features/index.html b/files/fr/web/css/list_of_proprietary_css_features/index.html index ecc4f646e7..68f7371faa 100644 --- a/files/fr/web/css/list_of_proprietary_css_features/index.html +++ b/files/fr/web/css/list_of_proprietary_css_features/index.html @@ -11,25 +11,20 @@ original_slug: Web/CSS/Liste_de_Fonctionnalités_CSS_Propriétaires <p>{{CSSRef}}{{Draft}}</p> <div class="note"> -<p><strong>Note : Cette page est un brouillon et son contenu est incomplet voire obsolète. À lire avec un œil critique.</strong></p> +<p><strong>Note :</strong> Cette page est un brouillon et son contenu est incomplet voire obsolète. À lire avec un œil critique.</strong></p> </div> <div class="warning"> -<p><strong>Attention !</strong> Cette page est incomplète et n'est pas à jour. Se référer aux pages suivantes pour plus d'informations :</p> +<p><strong>Attention :</strong> Cette page est incomplète et n'est pas à jour. Se référer aux pages suivantes pour plus d'informations :</p> <ul> - <li><a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">Les extensions Microsoft à CSS</a></li> - <li><a href="/fr/docs/Web/CSS/Extensions_Mozilla">Les extensions Mozilla à CSS</a></li> - <li><a href="/fr/docs/Web/CSS/Reference/Extensions_WebKit">Les extensions WebKit à CSS</a></li> + <li><a href="/fr/docs/Web/CSS/Microsoft_Extensions">Les extensions Microsoft à CSS</a></li> + <li><a href="/fr/docs/Web/CSS/Mozilla_Extensions">Les extensions Mozilla à CSS</a></li> + <li><a href="/fr/docs/Web/CSS/WebKit_Extensions">Les extensions WebKit à CSS</a></li> </ul> </div> -<div style="margin: 1em 0px; padding: 1em; background-color: rgb(255, 255, 204); text-align: center;"><strong>BROUILLON</strong> - -<div style="font-size: x-small;">Cette page est incomplète.</div> -</div> - -<p>Cette liste contient les extensions propriétaires des CSS en fonction des moteurs des différents navigateurs ; il ne s'agit pas des implémentations expérimentales des fonctionnalités en cours de standardisation (voir <a href="/fr/docs/Web/CSS/Implémentation_des_Brouillons_CSS" title="en/CSS/Draft_Implementations_of_CSS_Features">Implémentation des fonctionnalités CSS à l'état de brouillon</a> pour une liste de ces dernières).</p> +<p>Cette liste contient les extensions propriétaires des CSS en fonction des moteurs des différents navigateurs ; il ne s'agit pas des implémentations expérimentales des fonctionnalités en cours de standardisation (voir <a href="/fr/docs/conflicting/Web/CSS/Mozilla_Extensions" title="en/CSS/Draft_Implementations_of_CSS_Features">Implémentation des fonctionnalités CSS à l'état de brouillon</a> pour une liste de ces dernières).</p> <h2 id="Gecko">Gecko</h2> @@ -38,11 +33,11 @@ original_slug: Web/CSS/Liste_de_Fonctionnalités_CSS_Propriétaires <ul> <li>{{ Cssxref("-moz-force-broken-image-icon") }}</li> <li>{{ Cssxref("-moz-image-region") }}</li> - <li>{{ Cssxref("-moz-margin-end") }}</li> - <li>{{ Cssxref("-moz-margin-start") }}</li> + <li>{{ Cssxref("margin-inline-end") }}</li> + <li>{{ Cssxref("margin-inline-start") }}</li> <li>{{ Cssxref("-moz-orient") }}</li> - <li>{{ Cssxref("-moz-padding-end") }}</li> - <li>{{ Cssxref("-moz-padding-start") }}</li> + <li>{{ Cssxref("padding-inline-end") }}</li> + <li>{{ Cssxref("padding-inline-start") }}</li> <li>{{ Cssxref("-moz-stack-sizing") }}</li> <li>{{ Cssxref("-moz-window-shadow") }}</li> </ul> diff --git a/files/fr/web/css/margin-block-end/index.html b/files/fr/web/css/margin-block-end/index.html index f73899d6f9..92547fd248 100644 --- a/files/fr/web/css/margin-block-end/index.html +++ b/files/fr/web/css/margin-block-end/index.html @@ -12,9 +12,7 @@ translation_of: Web/CSS/margin-block-end <p>La propriété <strong><code>margin-block-end</code></strong> définit la marge logique appliquée à la fin des éléments de bloc, selon le mode d'écriture, la directionnalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}.</p> -<div>{{EmbedInteractiveExample("pages/css/margin-block-end.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<div>{{EmbedInteractiveExample("pages/css/margin-block-end.html")}}</div <p>Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssxref("margin-inline-end")}} et de {{cssxref("margin-inline-start")}} qui définissent les autres marges appliquées à l'élément.</p> diff --git a/files/fr/web/css/margin-block-start/index.html b/files/fr/web/css/margin-block-start/index.html index 571538de48..a78bcd1869 100644 --- a/files/fr/web/css/margin-block-start/index.html +++ b/files/fr/web/css/margin-block-start/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/margin-block-start <div>{{EmbedInteractiveExample("pages/css/margin-block-start.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété est à rapprocher de {{cssxref("margin-inline-start")}}, {{cssxref("margin-block-end")}} et de {{cssxref("margin-inline-end")}} qui définissent les autres marges appliquées à l'élément.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/margin-bottom/index.html b/files/fr/web/css/margin-bottom/index.html index 2602f07e18..a984e60431 100644 --- a/files/fr/web/css/margin-bottom/index.html +++ b/files/fr/web/css/margin-bottom/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/margin-bottom <div>{{EmbedInteractiveExample("pages/css/margin-bottom.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété n'a aucun effet sur les éléments en ligne (<em>inline</em>) qui ne sont pas remplacés comme {{HTMLElement("tt")}} ou {{HTMLElement("span")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/margin-inline-end/index.html b/files/fr/web/css/margin-inline-end/index.html index 6b51b1c17e..d5f5efa20b 100644 --- a/files/fr/web/css/margin-inline-end/index.html +++ b/files/fr/web/css/margin-inline-end/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/margin-inline-end <div>{{EmbedInteractiveExample("pages/css/margin-inline-end.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}} et de {{cssxref("margin-inline-start")}} qui définissent les autres marges appliquées à l'élément.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/margin-inline-start/index.html b/files/fr/web/css/margin-inline-start/index.html index 0a5e71337a..4a72562316 100644 --- a/files/fr/web/css/margin-inline-start/index.html +++ b/files/fr/web/css/margin-inline-start/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/margin-inline-start <div>{{EmbedInteractiveExample("pages/css/margin-inline-start.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}} et de {{cssxref("margin-inline-end")}} qui définissent les autres marges appliquées à l'élément.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/margin-left/index.html b/files/fr/web/css/margin-left/index.html index ace267defb..b0791c0906 100644 --- a/files/fr/web/css/margin-left/index.html +++ b/files/fr/web/css/margin-left/index.html @@ -13,9 +13,7 @@ translation_of: Web/CSS/margin-left <div>{{EmbedInteractiveExample("pages/css/margin-left.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p>Les marges des côtés droit et gauche de deux boîtes adjacentes peuvent fusionner entre elles. C'est ce qu'on appelle <a href="/fr/docs/Web/CSS/Fusion_des_marges"><em>la fusion de marges</em></a>.</p> +<p>Les marges des côtés droit et gauche de deux boîtes adjacentes peuvent fusionner entre elles. C'est ce qu'on appelle <a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing"><em>la fusion de marges</em></a>.</p> <p>Dans certains cas où les dimensions sont sur-contraintes (autrement dit quand <code>width</code>, <code>margin-left</code>, <code>border</code>, <code>padding</code>, la taille de la zone de contenu et <code>margin-right</code> sont toutes définies), <code>margin-left</code> est ignorée. La valeur calculée sera la même que si <code>auto</code> avait été utilisée.</p> diff --git a/files/fr/web/css/margin-right/index.html b/files/fr/web/css/margin-right/index.html index b3ca53336d..cf82405f56 100644 --- a/files/fr/web/css/margin-right/index.html +++ b/files/fr/web/css/margin-right/index.html @@ -13,9 +13,7 @@ translation_of: Web/CSS/margin-right <div>{{EmbedInteractiveExample("pages/css/margin-right.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p>Les marges des côtés droit et gauche de deux boîtes adjacentes peuvent fusionner entre elles. C'est ce qu'on appelle <a href="/fr/docs/Web/CSS/Fusion_des_marges"><em>la fusion de marges</em></a>.</p> +<p>Les marges des côtés droit et gauche de deux boîtes adjacentes peuvent fusionner entre elles. C'est ce qu'on appelle <a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing"><em>la fusion de marges</em></a>.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/margin-top/index.html b/files/fr/web/css/margin-top/index.html index ba16eebe07..c122bc0e39 100644 --- a/files/fr/web/css/margin-top/index.html +++ b/files/fr/web/css/margin-top/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/margin-top <div>{{EmbedInteractiveExample("pages/css/margin-top.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété n'a aucun effet sur les éléments non-remplacés en ligne (<em>inline</em>) tels que {{HTMLElement("tt")}} ou {{HTMLElement("span")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/margin/index.html b/files/fr/web/css/margin/index.html index 628251e76f..16beec5c1d 100644 --- a/files/fr/web/css/margin/index.html +++ b/files/fr/web/css/margin/index.html @@ -16,12 +16,10 @@ translation_of_original: Web/CSS/margin-new <div>{{EmbedInteractiveExample("pages/css/margin.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les marges haute et basse n'ont aucun effet sur les élements en ligne (<em>inline</em>) qui ne sont pas <a href="/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9">remplacés</a> (par exemple les {{HTMLElement("span")}} ou {{HTMLElement("code")}}).</p> <div class="note"> -<p><strong>Note : </strong>Les marges créent un espace supplémentaire à l'extérieur de l'élément. Le <em>« remplissage »</em> ({{cssxref("padding")}}) permet quant à lui de créer un espace supplémentaire à l'intérieur de l'élément.</p> +<p><strong>Note :</strong> Les marges créent un espace supplémentaire à l'extérieur de l'élément. Le <em>« remplissage »</em> ({{cssxref("padding")}}) permet quant à lui de créer un espace supplémentaire à l'intérieur de l'élément.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -58,11 +56,11 @@ margin: unset; <p>Cette propriété peut accepter une, deux, trois ou quatre valeurs avec les types suivants :</p> <dl> - <dt><a id="length" name="length"><code><length></code></a></dt> + <dt><code><length></code></dt> <dd>La marge est définie avec une valeur absolue. On peut utiliser des valeurs négatives. Pour les différentes unités possibles, voir la page {{cssxref("<length>")}}.</dd> - <dt><a id="percentage" name="percentage"><code><percentage></code></a></dt> + <dt><code><percentage></code></dt> <dd>Une valeur relative, exprimée en pourcentage (type {{cssxref("<percentage>")}}, à la <strong>largeur</strong> du bloc englobant. On peut utiliser des valeurs négatives.</dd> - <dt><a id="auto" name="auto"><code>auto</code></a></dt> + <dt><code>auto</code></dt> <dd><code>auto </code>est remplacé par une valeur adaptée (il peut être utilisé pour centrer les blocs, par exemple, <code>div { width:50%; margin:0 auto; }</code> permet de centrer un conteneur <code>div</code> horizontalement).</dd> </dl> @@ -135,7 +133,7 @@ margin: auto; /* boîte centrée horizontalement */ <h3 id="Fusion_des_marges">Fusion des marges</h3> -<p>Les marges haute et basse des éléments sont parfois fusionnées en une seule marge qui est égale à la plus grande des deux marges. Pour plus d'informations, lire <a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges">l'article sur la fusion des marges</a>.</p> +<p>Les marges haute et basse des éléments sont parfois fusionnées en une seule marge qui est égale à la plus grande des deux marges. Pour plus d'informations, lire <a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">l'article sur la fusion des marges</a>.</p> <h2 id="Spécifications">Spécifications</h2> @@ -180,7 +178,7 @@ margin: auto; /* boîte centrée horizontalement */ <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="internal" href="/fr/docs/Web/CSS/Fusion_des_marges">Fusion des marges</a></li> - <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">Le modèle de boîte CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Fusion des marges</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîte CSS</a></li> <li>{{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}}</li> </ul> diff --git a/files/fr/web/css/mask-border-outset/index.html b/files/fr/web/css/mask-border-outset/index.html index 2f4946c56e..3174b76051 100644 --- a/files/fr/web/css/mask-border-outset/index.html +++ b/files/fr/web/css/mask-border-outset/index.html @@ -59,7 +59,7 @@ mask-border-outset: unset; {{csssyntax}} -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/css/mask-border-repeat/index.html b/files/fr/web/css/mask-border-repeat/index.html index eb7c528638..dce62d1c3e 100644 --- a/files/fr/web/css/mask-border-repeat/index.html +++ b/files/fr/web/css/mask-border-repeat/index.html @@ -53,7 +53,7 @@ mask-border-repeat: unset; {{csssyntax}} -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/css/mask-border-slice/index.html b/files/fr/web/css/mask-border-slice/index.html index 2a76433cc7..c0b1482f6d 100644 --- a/files/fr/web/css/mask-border-slice/index.html +++ b/files/fr/web/css/mask-border-slice/index.html @@ -14,14 +14,14 @@ translation_of: Web/CSS/mask-border-slice <p>Cette découpe permet d'obtenir neuf régions au total : quatre pour les coins, quatre pour les côtés et une région pour le centre. Cette découpe est effectuée selon 4 lignes qui sont écartées d'une certaine distance des bords de l'image.</p> -<p><a href="/files/3814/border-image-slice.png"><img alt="The nine regions defined by the border-image or border-image-slice properties" src="/files/3814/border-image-slice.png" style="margin: 1px; padding: 1em; width: 460px;"></a></p> +<p><a href="border-image-slice.png"><img alt="The nine regions defined by the border-image or border-image-slice properties" src="border-image-slice.png"></a></p> <p>Le diagramme ci-avant illustre l'emplacement de chaque région.</p> <ul> - <li>Les zones de 1 à 4 sont <a id="corner-regions" name="corner-regions">les zones aux coins</a>. Chacune sera utilisée une seule fois pour construire les coins de l'image du masque.</li> - <li>Les zones 5 à 8 sont <a id="edge-regions" name="edge-regions">les zones de côtés</a>. Ces zones peuvent être <a href="/fr/docs/Web/CSS/mask-border-repeat">répétées, redimensionnées, ou modifiées</a> afin que le masque de bordule final aient les mêmes dimensions que l'élément.</li> - <li>La zone 9 est <a id="middle-region" name="middle-region">la zone centrale</a>. Par défaut, elle n'est pas utilisée mais elle pourra être utilisée comme image d'arrière-plan si le mot-clé <code>fill</code> est utilisé.</li> + <li>Les zones de 1 à 4 sont les zones aux coins. Chacune sera utilisée une seule fois pour construire les coins de l'image du masque.</li> + <li>Les zones 5 à 8 sont les zones de côtés. Ces zones peuvent être <a href="/fr/docs/Web/CSS/mask-border-repeat">répétées, redimensionnées, ou modifiées</a> afin que le masque de bordule final aient les mêmes dimensions que l'élément.</li> + <li>La zone 9 est la zone centrale. Par défaut, elle n'est pas utilisée mais elle pourra être utilisée comme image d'arrière-plan si le mot-clé <code>fill</code> est utilisé.</li> </ul> <p>Les propriétés {{cssxref("mask-border-repeat")}}, {{cssxref("mask-border-width")}} et {{cssxref("mask-border-outset")}} déterminent la façon dont ces régions sont utilisées pour construire le masque final.</p> @@ -103,5 +103,5 @@ mask-border-slice: unset; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Propriétés_raccourcies#Quelques_cas_aux_limites_épineux">Description illustrée de la syntaxe pouvant couvrir de 1 à 4 valeurs</a></li> + <li><a href="/fr/docs/Web/CSS/Shorthand_properties#quelques_cas_aux_limites_%c3%a9pineux">Description illustrée de la syntaxe pouvant couvrir de 1 à 4 valeurs</a></li> </ul> diff --git a/files/fr/web/css/mask-border-source/index.html b/files/fr/web/css/mask-border-source/index.html index f03f82be19..68cd550c2b 100644 --- a/files/fr/web/css/mask-border-source/index.html +++ b/files/fr/web/css/mask-border-source/index.html @@ -46,7 +46,7 @@ mask-border-source: unset; <p>Voir la page {{cssxref("mask-border")}}.</p> -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/css/mask-border-width/index.html b/files/fr/web/css/mask-border-width/index.html index ddeb57ee97..9cd78bde87 100644 --- a/files/fr/web/css/mask-border-width/index.html +++ b/files/fr/web/css/mask-border-width/index.html @@ -68,7 +68,7 @@ mask-border-width: unset; {{csssyntax}} -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/css/mask-border/index.html b/files/fr/web/css/mask-border/index.html index 062f768532..f2faaaf334 100644 --- a/files/fr/web/css/mask-border/index.html +++ b/files/fr/web/css/mask-border/index.html @@ -1,19 +1,14 @@ --- title: mask-border slug: Web/CSS/mask-border -tags: - - CSS - - Experimental - - Propriété - - Propriété raccourcie - - Reference translation_of: Web/CSS/mask-border +browser-compat: css.properties.mask-border --- <div>{{cssref}}{{SeeCompatTable}}</div> <p>La propriété CSS <strong><code>mask-border</code></strong> permet de créer un masque le long de la bordure d'un élément.</p> -<p>Cette propriété est une propriété <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">raccourcie</a> pour les propriétés {{cssxref("mask-border-source")}}, {{cssxref("mask-border-slice")}}, {{cssxref("mask-border-width")}}, {{cssxref("mask-border-outset")}}, {{cssxref("mask-border-repeat")}} et {{cssxref("mask-border-mode")}}. Comme pour l'ensemble des propriétés raccourcies, toutes les propriétés qui ne sont pas explicitement utilisées dans la règle utilisent leur <a href="/fr/docs/Web/CSS/Valeur_initiale">valeur initiale</a>.</p> +<p>Cette propriété est une propriété <a href="/fr/docs/Web/CSS/Shorthand_properties">raccourcie</a> pour les propriétés {{cssxref("mask-border-source")}}, {{cssxref("mask-border-slice")}}, {{cssxref("mask-border-width")}}, {{cssxref("mask-border-outset")}}, {{cssxref("mask-border-repeat")}} et {{cssxref("mask-border-mode")}}. Comme pour l'ensemble des propriétés raccourcies, toutes les propriétés qui ne sont pas explicitement utilisées dans la règle utilisent leur <a href="/fr/docs/Web/CSS/initial_value">valeur initiale</a>.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -57,7 +52,7 @@ mask-border: url('border-mask.png') 25 / 35px / 12px space alpha; <p>Dans cet exemple, on utilise un masque en losange. L'image source utilisée est un fichier PNG de 90 pixels de long et de large :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15836/mask-border-diamonds.png" style="height: 90px; width: 90px;"></p> +<p><img alt="" src="mask-border-diamonds.png"></p> <h4 id="HTML">HTML</h4> @@ -88,27 +83,10 @@ mask-border: url('border-mask.png') 25 / 35px / 12px space alpha; <p>{{EmbedLiveSample("Image_matricielle_(bitmap)")}}</p> -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentairezs</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Masks", "#propdef-mask-border", "mask-border")}}</td> - <td>{{Spec2("CSS Masks")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateursEdit">Compatibilité des navigateurs<a class="button section-edit only-icon" href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-image$edit#Browser_compatibility" rel="nofollow, noindex"><span>Edit</span></a></h2> - -<p><span>TBD</span></p> +<h2 id="spécifications">Spécifications</h2> + +<p>{{Specifications}}</p> + +<h2 id="compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat}}</p>
\ No newline at end of file diff --git a/files/fr/web/css/mask-clip/index.html b/files/fr/web/css/mask-clip/index.html index 0b10fad9fb..9dad26fc80 100644 --- a/files/fr/web/css/mask-clip/index.html +++ b/files/fr/web/css/mask-clip/index.html @@ -77,7 +77,7 @@ mask-clip: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[10]">#masked { +<pre class="brush: css">#masked { width: 100px; height: 100px; background-color: #8cffa0; diff --git a/files/fr/web/css/mask-composite/index.html b/files/fr/web/css/mask-composite/index.html index 19bb9fcd47..33b5bc3f26 100644 --- a/files/fr/web/css/mask-composite/index.html +++ b/files/fr/web/css/mask-composite/index.html @@ -51,7 +51,7 @@ mask-composite: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[7]">#masked { +<pre class="brush: css">#masked { width: 100px; height: 100px; background-color: #8cffa0; @@ -65,10 +65,7 @@ mask-composite: unset; } </pre> -<div class="hidden"> -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div id="masked"> +<pre class="brush: html hidden"><div id="masked"> </div> <select id="compositeMode"> <option value="add">add</option> @@ -78,14 +75,11 @@ mask-composite: unset; </select> </pre> -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var clipBox = document.getElementById("compositeMode"); +<pre class="brush: js hidden">var clipBox = document.getElementById("compositeMode"); clipBox.addEventListener("change", function (evt) { document.getElementById("masked").style.maskClip = evt.target.value; }); </pre> -</div> <p>{{EmbedLiveSample("Exemples", "200px", "200px")}}</p> diff --git a/files/fr/web/css/mask-mode/index.html b/files/fr/web/css/mask-mode/index.html index dad074e561..f189643576 100644 --- a/files/fr/web/css/mask-mode/index.html +++ b/files/fr/web/css/mask-mode/index.html @@ -55,7 +55,7 @@ mask-mode: unset; <h4 id="CSS">CSS</h4> -<pre class="brush: css; highlight[7]">#masked { +<pre class="brush: css">#masked { width: 100px; height: 100px; background: blue linear-gradient(red, blue); @@ -81,7 +81,7 @@ mask-mode: unset; <h4 id="CSS_2">CSS</h4> -<pre class="brush: css; highlight[7]">#masked { +<pre class="brush: css">#masked { width: 100px; height: 100px; background-color: #8cffa0; diff --git a/files/fr/web/css/mask-origin/index.html b/files/fr/web/css/mask-origin/index.html index be91e88ee3..85bf81428e 100644 --- a/files/fr/web/css/mask-origin/index.html +++ b/files/fr/web/css/mask-origin/index.html @@ -75,7 +75,7 @@ mask-origin: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[9]">#masked { +<pre class="brush: css">#masked { width: 100px; height: 100px; margin: 10px; diff --git a/files/fr/web/css/mask-position/index.html b/files/fr/web/css/mask-position/index.html index afbcb38828..43d8db0a4a 100644 --- a/files/fr/web/css/mask-position/index.html +++ b/files/fr/web/css/mask-position/index.html @@ -55,7 +55,7 @@ mask-position: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[13]">#wrapper { +<pre class="brush: css">#wrapper { border: 1px solid black; width: 250px; height: 250px; @@ -72,10 +72,7 @@ mask-position: unset; } </pre> -<div class="hidden"> -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div id="wrapper"> +<pre class="brush: html hidden"><div id="wrapper"> <div id="masked"> </div> </div> @@ -91,14 +88,11 @@ mask-position: unset; </select> </pre> -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var maskPosition = document.getElementById("maskPosition"); +<pre class="brush: js hidden">var maskPosition = document.getElementById("maskPosition"); maskPosition.addEventListener("change", function (evt) { document.getElementById("masked").style.maskPosition = evt.target.value; }); </pre> -</div> <h3 id="Résultat">Résultat</h3> diff --git a/files/fr/web/css/mask-repeat/index.html b/files/fr/web/css/mask-repeat/index.html index 54e6e8e75a..76dd23f6a1 100644 --- a/files/fr/web/css/mask-repeat/index.html +++ b/files/fr/web/css/mask-repeat/index.html @@ -44,8 +44,7 @@ mask-repeat: unset; <dl> <dt><code><repeat-style></code></dt> - <dd>La notation utilisant une seule valeur est une notation raccourcie qui possède un équivalent avec deux valeurs :</dd> - <dd> + <dd>La notation utilisant une seule valeur est une notation raccourcie qui possède un équivalent avec deux valeurs : <table class="standard-table"> <tbody> <tr> @@ -78,8 +77,7 @@ mask-repeat: unset; </tr> </tbody> </table> - Lorsqu'on utilise deux valeurs, la première indique le motif de répétition sur l'axe horizontal et la deuxième sur l'axe vertical. Voici une définition de chacun des mots-clés :</dd> - <dd> + Lorsqu'on utilise deux valeurs, la première indique le motif de répétition sur l'axe horizontal et la deuxième sur l'axe vertical. Voici une définition de chacun des mots-clés : <table class="standard-table"> <tbody> <tr> diff --git a/files/fr/web/css/mask-size/index.html b/files/fr/web/css/mask-size/index.html index 5af74bf8ab..bad865b3cb 100644 --- a/files/fr/web/css/mask-size/index.html +++ b/files/fr/web/css/mask-size/index.html @@ -45,7 +45,9 @@ mask-size: initial; mask-size: unset; </pre> -<div class="note"><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie avec la propriété raccourcie {{cssxref("mask")}} et que celle-ci est appliquée après <code>mask-size</code>, la valeur sera réinitialisée avec sa valeur initiale à cause de la propriété raccourcie.</div> +<div class="note"> + <p><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie avec la propriété raccourcie {{cssxref("mask")}} et que celle-ci est appliquée après <code>mask-size</code>, la valeur sera réinitialisée avec sa valeur initiale à cause de la propriété raccourcie.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -75,9 +77,9 @@ mask-size: unset; <dd>Une valeur de pourcentage ({{cssxref("<percentage>")}} qui indique le redimensionnement à appliquer dans l'axe correspondant à partir de l'origine définie par {{cssxref("mask-origin")}} par rapport à la taille de la zone du masque. Par défaut, cette zone contient la boîte de contenu et la boîte de remplissage (<em>padding</em>) (on peut modifier cette zone pour choisir les boîtes concernées). Les valeurs négatives ne sont pas autorisées.</dd> <dt><code>auto</code></dt> <dd>Un mot-clé qui permet de redimensionner l'image du masque dans l'axe correspondant tout en conservant ses proportions.</dd> - <dt><a><code>contain</code></a></dt> + <dt><code>contain</code></dt> <dd>Un mot-clé qui redimensionne l'image afin qu'elle soit aussi grande que possible et conserve ses proportions tout en étant contenue dans le contenur. Par défaut, l'image est centrée sauf si {{cssxref("mask-position")}} indique un autre paramètre.</dd> - <dt><a id="cover"><code>cover</code></a></dt> + <dt><code>cover</code></dt> <dd>Un mot-clé qui se comporte à l'inverse de <code>contain</code>. L'image est agrandie autant que possible et ses proportions sont conservées et elle couvre toute la surface du conteneur, si les dimensions du conteneur sont différentes, l'image est rognée sur les côtés (haut et bas ou droite et gauche).</dd> </dl> diff --git a/files/fr/web/css/mask-type/index.html b/files/fr/web/css/mask-type/index.html index db81ba603e..d589c35f37 100644 --- a/files/fr/web/css/mask-type/index.html +++ b/files/fr/web/css/mask-type/index.html @@ -41,111 +41,65 @@ mask-type: unset; <h2 id="Exemples">Exemples</h2> -<p>Prenons comme masque le rectangle suivant :</p> +<h3 id="setting_an_alpha_mask">Définir un masque alpha</h3> -<pre class="brush: html"><rect x="10" y="10" width="80" height="80" - fill="red" fill-opacity="0.7" /></pre> - -<div class="hidden"> -<h3 id="mask">mask</h3> - -<pre class="brush: html"><svg width="100" height="100"> - <rect x="10" y="10" width="80" height="80" - fill="red" fill-opacity="0.7"/> -</svg></pre> -</div> - -<div>Le voici : {{EmbedLiveSample('mask', '100%', '100')}}</div> - -<p>Appliquons le à cette boîte :</p> - -<div class="hidden"> -<h3 id="box">box</h3> - -<pre class="brush: css">.redsquare { - height: 100px; - width: 100px; - background-color: rgb(128, 128, 128); - border: solid 1px black; -} -</pre> +<h4 id="HTML">HTML</h4> <pre class="brush: html"><div class="redsquare"></div> -</pre> -</div> - -<div>{{EmbedLiveSample('box', '100%', '120')}}</div> - -<p>Voici le résultat, si votre navigateur prend en charge cette propriété, avec les deux valeurs de <code>mask-type</code> appliquée à l'élément {{SVGElement("mask")}}, on aura deux carrés différents :</p> - -<table class="standard-table"> - <tbody> - <tr> - <td><code>mask-type: alpha;</code></td> - <td><code>mask-type: luminance;</code></td> - </tr> - <tr> - <td> - <div class="hidden" id="maskalpha"> - <pre class="brush: html"> -<div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskContentUnits="objectBoundingBox" - style="mask-type:alpha"> + style="mask-type:alpha"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> -</svg> -</pre> +</svg></pre> - <pre class="brush: css"> -.redsquare { +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); -} -</pre> - </div> - - <div>{{EmbedLiveSample('maskalpha', '100%', '102')}}</div> - </td> - <td> - <div class="hidden" id="maskluminance"> - <pre class="brush: html"> -<div class="redsquare"></div> +}</pre> + +<h4 id="result">Résultat</h4> + +<p>{{EmbedLiveSample('setting_an_alpha_mask', '100%', '102')}}</p> + +<h3 id="setting_a_luminance_mask">Définir un masque de luminance</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskContentUnits="objectBoundingBox" - style="mask-type:luminance"> + style="mask-type:luminance"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> -</svg> -</pre> +</svg></pre> - <pre class="brush: css"> -.redsquare { +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">.redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); -} -</pre> - </div> +}</pre> - <div>{{EmbedLiveSample('maskluminance', '100%', '102')}}</div> - </td> - </tr> - </tbody> -</table> +<h4 id="result_2">Result</h4> + +<p>{{EmbedLiveSample('setting_a_luminance_mask', '100%', '102')}}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/mask/index.html b/files/fr/web/css/mask/index.html index 0eae965f70..39988a8dc4 100644 --- a/files/fr/web/css/mask/index.html +++ b/files/fr/web/css/mask/index.html @@ -18,7 +18,7 @@ translation_of: Web/CSS/mask <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush:css no-line-number">/* Valeurs avec un mot-clé */ +<pre class="brush:css">/* Valeurs avec un mot-clé */ mask: none; /* Valeurs d'image */ @@ -59,12 +59,10 @@ mask: unset; <dd>Cette valeur définit la zone qui est impactée par l'image du masque. Voir {{cssxref("mask-clip")}}.</dd> <dt><code><compositing-operator></code></dt> <dd>Cette valeur définit l'opération de composition qui est utilisée par rapport à la couche de masque actuelle. Voir {{cssxref("mask-composite")}}.</dd> - <dt> - <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - </dt> </dl> -{{csssyntax}} +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> +<p>{{csssyntax}}</p> <h2 id="Exemples">Exemples</h2> diff --git a/files/fr/web/css/max()/index.html b/files/fr/web/css/max()/index.html index 3ca7ea988c..a660acc748 100644 --- a/files/fr/web/css/max()/index.html +++ b/files/fr/web/css/max()/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/max() <p>La fonction CSS <code><strong>max</strong></code><strong><code>()</code></strong> permet d'obtenir la plus grande valeurs parmi une liste d'expressions, séparées par des virgules afin d'utiliser ce maximum comme valeur d'une propriété CSS. La fonction <code>max()</code> peut être utilisée à tout endroit où une valeur de type {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}} ou {{cssxref("<integer>")}} est autorisée.</p> -<pre class="brush: css no-line-numbers notranslate">/* property: max(expression<code class="css plain"> [, expression]</code>) */ +<pre class="brush: css no-line-numbers">/* property: max(expression<code class="css plain"> [, expression]</code>) */ width: max(10vw, 4em, 80px); </pre> @@ -44,14 +44,14 @@ width: max(10vw, 4em, 80px); <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">.logo { +<pre class="brush: css">.logo { width: max(50vw, 300px); } </pre> <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo"></pre> +<pre class="brush: html"><img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo"></pre> <h4 id="Résultat">Résultat</h4> @@ -65,7 +65,7 @@ width: max(10vw, 4em, 80px); <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { font-size: 2rem; } h1.responsive { @@ -77,7 +77,7 @@ h1.responsive { <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><h1>Ce texte est toujours lisible mais sa taille ne change pas.</h1> +<pre class="brush: html"><h1>Ce texte est toujours lisible mais sa taille ne change pas.</h1> <h1 class="responsive">Ce texte est toujours lisible et s'adapte dans une certaine mesure.</h1> </pre> diff --git a/files/fr/web/css/max-block-size/index.html b/files/fr/web/css/max-block-size/index.html index 7ef2682502..099822388a 100644 --- a/files/fr/web/css/max-block-size/index.html +++ b/files/fr/web/css/max-block-size/index.html @@ -18,8 +18,6 @@ translation_of: Web/CSS/max-block-size <div>{{EmbedInteractiveExample("pages/css/max-block-size.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs de longueur */ diff --git a/files/fr/web/css/max-height/index.html b/files/fr/web/css/max-height/index.html index 0aae0a9399..1cbdfaca41 100644 --- a/files/fr/web/css/max-height/index.html +++ b/files/fr/web/css/max-height/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/max-height <div>{{EmbedInteractiveExample("pages/css/max-height.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La valeur de <code>max-height</code> surcharge la valeur de {{cssxref("height")}} mais elle est surchargée par {{cssxref("min-height")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/max-inline-size/index.html b/files/fr/web/css/max-inline-size/index.html index a1d6952c1b..9d99076ece 100644 --- a/files/fr/web/css/max-inline-size/index.html +++ b/files/fr/web/css/max-inline-size/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/max-inline-size <div>{{EmbedInteractiveExample("pages/css/max-inline-size.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs de longueur */ diff --git a/files/fr/web/css/max-width/index.html b/files/fr/web/css/max-width/index.html index cf06efaae9..b8ca12a219 100644 --- a/files/fr/web/css/max-width/index.html +++ b/files/fr/web/css/max-width/index.html @@ -11,9 +11,7 @@ translation_of: Web/CSS/max-width <p>La propriété <strong><code>max-width</code></strong> est utilisée pour définir la largeur maximale d'un élément donné. Elle empêche la valeur de la propriété {{cssxref("width")}} de devenir supérieure à la valeur spécifiée par <code>max-width</code> (autrement dit, <code>max-width</code> est une borne supérieur pour <code>width</code>).</p> -<div>{{EmbedInteractiveExample("pages/css/max-width.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<div>{{EmbedInteractiveExample("pages/css/max-width.html")}}</div <p>La valeur de <code>max-width</code> surcharge la valeur de {{cssxref("width")}} mais elle est surchargée par {{cssxref("min-width")}}.</p> diff --git a/files/fr/web/css/media_queries/index.html b/files/fr/web/css/media_queries/index.html index ad2a10fb01..1acb40d913 100644 --- a/files/fr/web/css/media_queries/index.html +++ b/files/fr/web/css/media_queries/index.html @@ -23,12 +23,10 @@ original_slug: Web/CSS/Requêtes_média <h3 id="Règles">Règles @</h3> -<div class="index"> <ul> <li>{{cssxref("@import")}}</li> <li>{{cssxref("@media")}}</li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/media_queries/using_media_queries/index.html b/files/fr/web/css/media_queries/using_media_queries/index.html index 21228d0eaf..b87d5cba87 100644 --- a/files/fr/web/css/media_queries/using_media_queries/index.html +++ b/files/fr/web/css/media_queries/using_media_queries/index.html @@ -35,17 +35,19 @@ original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries <p>Un type de média définit une catégorie générale d'appareil. Le type de média est optionnel dans une requête média, sauf si celle-ci utilise les opérateurs logiques <code>not</code> ou <code>only</code>. Par défaut, le type de média utilisé est <code>all</code>.</p> <dl> - <dt><code id="all">all</code></dt> + <dt><code>all</code></dt> <dd>Correspond pour tous les appareils.</dd> - <dt><code id="print">print</code></dt> + <dt><code>print</code></dt> <dd>Correspond aux matériaux paginés et aux documents consultés en aperçu avant impression. Pour plus d'informations, voir l'article sur <a href="/fr/docs/Web/CSS/Paged_Media">les médias paginés</a>.</dd> - <dt><code id="screen">screen</code></dt> + <dt><code>screen</code></dt> <dd>Correspond aux appareils dotés d'un écran.</dd> - <dt><code id="speech">speech</code></dt> + <dt><code>speech</code></dt> <dd>Correspond aux outils de synthèse vocale.</dd> </dl> -<div class="note"><strong>Note : Les types de média dépréciés</strong> CSS2.1 et <a href="https://drafts.csswg.org/mediaqueries-3/#background">Media Queries 3</a> ont défini plusieurs types additionnels (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, and <code>aural</code>) qui ont ensuite été dépréciés avec <a href="https://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a>. Ces types ne doivent donc plus être utilisés. Le type <code>aural</code> a été remplacé par le type <code>speech</code>.</div> +<div class="note"> + <p><strong>Note :</strong> Les types de média dépréciés CSS2.1 et <a href="https://drafts.csswg.org/mediaqueries-3/#background">Media Queries 3</a> ont défini plusieurs types additionnels (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, and <code>aural</code>) qui ont ensuite été dépréciés avec <a href="https://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a>. Ces types ne doivent donc plus être utilisés. Le type <code>aural</code> a été remplacé par le type <code>speech</code>.</p> +</div> <h3 id="media_features">Caractéristiques média (<i lang="en">media features</i>)</h3> @@ -247,7 +249,7 @@ original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries <pre class="brush: css">@media screen, print { ... }</pre> -<p>Pour une liste complète des types de média, voir <a class="internal" href="#types">ci-avant</a>. Ces types étant très génériques, peu de valeurs sont disponibles. Afin d'avoir un ciblage plus fin, on pourra utiliser les caractéristiques média.</p> +<p>Pour une liste complète des types de média, voir <a href="#types">ci-avant</a>. Ces types étant très génériques, peu de valeurs sont disponibles. Afin d'avoir un ciblage plus fin, on pourra utiliser les caractéristiques média.</p> <h2 id="targeting_media_features">Cibler des caractéristiques média</h2> @@ -260,7 +262,7 @@ original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries <pre class="brush: css">@media (max-width: 1250px) { ... }</pre> <div class="note"> -<p>Selon la spécification du W3C, les barres de défilement font partie des dimensions de la page. Ainsi la barre de défilement vertical s'ajoute à la largeur du document tandis que la barre de défilement horizontal s'ajoute à la hauteur du document. Cependant tous les navigateurs n'ont pas adopté cette recommandation (Chrome par exemple) et tous n'ont pas opté pour la même taille de barre de défilement, ce qui mène à un développement plus difficile pour assurer une comptabilité sur tous les navigateurs.</p> +<p><strong>Note :</strong> Selon la spécification du W3C, les barres de défilement font partie des dimensions de la page. Ainsi la barre de défilement vertical s'ajoute à la largeur du document tandis que la barre de défilement horizontal s'ajoute à la hauteur du document. Cependant tous les navigateurs n'ont pas adopté cette recommandation (Chrome par exemple) et tous n'ont pas opté pour la même taille de barre de défilement, ce qui mène à un développement plus difficile pour assurer une comptabilité sur tous les navigateurs.</p> </div> <p>Si on utilise une caractéristique média sans indiquer de valeur, la requête sera vérifiée tant que la valeur de cette caractéristique n'est pas nulle (ou <code>none</code> pour la spécification de niveau 4). Ainsi, la requête suivante permettra d'appliquer les styles qu'elle contient si l'appareil peut afficher des couleurs :</p> diff --git a/files/fr/web/css/microsoft_extensions/index.html b/files/fr/web/css/microsoft_extensions/index.html index b9982e6bc0..e48424afce 100644 --- a/files/fr/web/css/microsoft_extensions/index.html +++ b/files/fr/web/css/microsoft_extensions/index.html @@ -18,7 +18,6 @@ original_slug: Web/CSS/Extensions_CSS_Microsoft <p><strong>Note :</strong> Ces propriétés et pseudo-classes ne fonctionneront que pour les applications Microsoft et ne sont pas en voie de standardisation.</p> </div> -<div class="index"> <ul> <li>{{CSSxRef("-ms-accelerator")}}</li> <li>{{CSSxRef("-ms-block-progression")}}</li> @@ -66,11 +65,9 @@ original_slug: Web/CSS/Extensions_CSS_Microsoft <li>{{CSSxRef("-ms-wrap-through")}}</li> <li>{{CSSxRef("zoom")}}</li> </ul> -</div> <h2 id="Pseudo-éléments">Pseudo-éléments</h2> -<div class="index"> <ul> <li>{{CSSxRef("::-ms-browse")}}</li> <li>{{CSSxRef("::-ms-check")}}</li> @@ -87,19 +84,15 @@ original_slug: Web/CSS/Extensions_CSS_Microsoft <li>{{CSSxRef("::-ms-track")}}</li> <li>{{CSSxRef("::-ms-value")}}</li> </ul> -</div> <h2 id="Caractéristiques_média">Caractéristiques média</h2> -<div class="index"> <ul> <li>{{CSSxRef("@media/-ms-high-contrast","-ms-high-contrast")}}</li> </ul> -</div> <h2 id="API_DOM_relatives_à_CSS">API DOM relatives à CSS</h2> -<div class="index"> <ul> <li>{{DOMxRef("msContentZoomFactor")}}</li> <li>{{DOMxRef("msGetPropertyEnabled")}}</li> @@ -107,7 +100,6 @@ original_slug: Web/CSS/Extensions_CSS_Microsoft <li>{{DOMxRef("MSRangeCollection")}}</li> <li>{{DOMxRef("msRegionOverflow")}}</li> </ul> -</div> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/min()/index.html b/files/fr/web/css/min()/index.html index f7a8c561c9..ddcab65cd2 100644 --- a/files/fr/web/css/min()/index.html +++ b/files/fr/web/css/min()/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/min() <p>La fonction CSS <code><strong>min()</strong></code> permet d'obtenir la plus petite valeurs parmi une liste d'expressions, séparées par des virgules afin d'utiliser ce minimum comme valeur d'une propriété CSS. La fonction <code>min()</code> peut être utilisée à tout endroit où une valeur de type {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}} ou {{cssxref("<integer>")}} est autorisée.</p> -<pre class="brush: css no-line-numbers notranslate">/* property: min(expression<code class="css plain"> [, expression]</code>) */ +<pre class="brush: css no-line-numbers">/* property: min(expression<code class="css plain"> [, expression]</code>) */ width: min(10vw, 4em, 80px); </pre> @@ -44,14 +44,14 @@ width: min(10vw, 4em, 80px); <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">.logo { +<pre class="brush: css">.logo { width: min(50vw, 300px); } </pre> <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo"></pre> +<pre class="brush: html"><img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo"></pre> <h4 id="Résultat">Résultat</h4> @@ -63,7 +63,7 @@ width: min(10vw, 4em, 80px); <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">input, label { +<pre class="brush: css">input, label { padding: 2px; box-sizing: border-box; display: inline-block; @@ -82,7 +82,7 @@ form { <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <label>Saisir quelque chose :</label> <input type="text"> </form> @@ -94,7 +94,7 @@ form { <p>Lorsqu'on utilise <code>min()</code> afin de contrôler la taille du texte, il faut s'assurer que le texte puisse toujours être suffisamment grand pour être lisible. Pour cela, on peut imbriquer l'appel à <code>min()</code> dans <code><a href="/fr/docs/Web/CSS/max">max()</a></code> utilisant <a href="/fr/docs/Web/CSS/length#Unités_de_longueur_relatives">une unité de longueur relative</a> en deuxième argument afin de garantir une lisibilité minimale :</p> -<pre class="brush: css notranslate">small { +<pre class="brush: css">small { font-size: max(min(0.5vw, 0.5em), 1rem); }</pre> diff --git a/files/fr/web/css/min-block-size/index.html b/files/fr/web/css/min-block-size/index.html index d251282f2f..81260b6760 100644 --- a/files/fr/web/css/min-block-size/index.html +++ b/files/fr/web/css/min-block-size/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/min-block-size <div>{{EmbedInteractiveExample("pages/css/min-block-size.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Si le mode d'écriture est orienté verticalement, <code>min-block-size</code> fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément. to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriété {{cssxref("min-inline-size")}} peut être utilisée pour les éléments en ligne.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/min-height/index.html b/files/fr/web/css/min-height/index.html index d7aa9e1dbf..8e1229db64 100644 --- a/files/fr/web/css/min-height/index.html +++ b/files/fr/web/css/min-height/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/min-height <div>{{EmbedInteractiveExample("pages/css/min-height.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La valeur de la propriété <code>min-height</code> surcharge celles de {{cssxref("max-height")}} et {{cssxref("height")}} lorsque <code>min-height</code> est supérieure.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -132,7 +130,7 @@ min-height: unset; <li>{{cssxref("width")}}</li> <li>{{cssxref("height")}}</li> <li>{{cssxref("max-height")}}</li> - <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Le modèle de boîtes</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîtes</a></li> <li>{{cssxref("min-width")}}</li> <li>{{cssxref("box-sizing")}}</li> <li>{{cssxref("height")}}</li> diff --git a/files/fr/web/css/min-inline-size/index.html b/files/fr/web/css/min-inline-size/index.html index c4e5c5d6f7..45112c237f 100644 --- a/files/fr/web/css/min-inline-size/index.html +++ b/files/fr/web/css/min-inline-size/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/min-inline-size <div>{{EmbedInteractiveExample("pages/css/min-inline-size.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Si le mode d'écriture est orienté verticalement, <code>min-inline-size</code> fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément. to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriété {{cssxref("min-block-size")}} peut être utilisée pour les blocs.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/min-width/index.html b/files/fr/web/css/min-width/index.html index 3eee767ee7..8421821e5e 100644 --- a/files/fr/web/css/min-width/index.html +++ b/files/fr/web/css/min-width/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/min-width <div>{{EmbedInteractiveExample("pages/css/min-width.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La valeur de <code>min-width</code> surcharge les valeurs de {{cssxref("max-width")}} et de {{cssxref("width")}} si elle est supérieure à l'une de ces propriétés.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/minmax()/index.html b/files/fr/web/css/minmax()/index.html index 90a84ac5d6..5ca7fb623d 100644 --- a/files/fr/web/css/minmax()/index.html +++ b/files/fr/web/css/minmax()/index.html @@ -17,8 +17,6 @@ translation_of: Web/CSS/minmax() <div>{{EmbedInteractiveExample("pages/css/function-minmax.html")}}</div> -<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> - <h2 id="Syntax">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeurs de type <inflexible-breadth>, <track-breadth>*/ @@ -89,7 +87,7 @@ minmax(auto, 300px) <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[3]">#container { +<pre class="brush: css">#container { display: grid; grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px; grid-gap: 5px; diff --git a/files/fr/web/css/mix-blend-mode/index.html b/files/fr/web/css/mix-blend-mode/index.html index 792a30d1eb..33029b3111 100644 --- a/files/fr/web/css/mix-blend-mode/index.html +++ b/files/fr/web/css/mix-blend-mode/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/mix-blend-mode <div>{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs de type <blend-mode> */ @@ -52,12 +50,11 @@ mix-blend-mode: unset; {{csssyntax}} -<h2 id="Exemples">Exemples</h2> +<h2 id="exemples">Exemples</h2> -<div class="hidden" id="mix-blend-mode"> -<pre class="brush: html"><div class="grid"> +<pre class="brush: html hidden"><div class="grid"> <div class="col"> - <div class="note">Blending isolé (pas de blending avec l'arrière-plan)</div> + <div class="note">Blending in isolation (no blending with the background)</div> <div class="row isolate"> <div class="cell"> normal <div class="container normal"> @@ -267,7 +264,7 @@ mix-blend-mode: unset; </div> </div> - <div class="note">Blending étendu (avec l'arrière-plan)</div> + <div class="note">Blending globally (blend with the background)</div> <div class="row"> <div class="cell"> normal <div class="container normal"> @@ -465,7 +462,7 @@ mix-blend-mode: unset; </div> </div></pre> -<pre class="brush: css">html,body { +<pre class="brush: css hidden">html,body { height: 100%; box-sizing: border-box; background: #EEE; @@ -558,9 +555,8 @@ mix-blend-mode: unset; .saturation .item { mix-blend-mode: saturation; } .color .item { mix-blend-mode: color; } .luminosity .item { mix-blend-mode: luminosity; }</pre> -</div> -<div>{{EmbedLiveSample("mix-blend-mode", "100%", 500, "", "", "example-outcome-frame")}}</div> +<div>{{EmbedLiveSample("exemples", "100%", 1600, "", "", "example-outcome-frame")}}</div> <h3 id="Exemple_avec_SVG">Exemple avec SVG</h3> diff --git a/files/fr/web/css/mozilla_extensions/index.html b/files/fr/web/css/mozilla_extensions/index.html index 355b715a7d..e4552cad87 100644 --- a/files/fr/web/css/mozilla_extensions/index.html +++ b/files/fr/web/css/mozilla_extensions/index.html @@ -19,7 +19,6 @@ original_slug: Web/CSS/Extensions_Mozilla <p><strong>Note :</strong> Ces propriétés et pseudo-classes ne fonctionneront que pour les applications Mozilla (Firefox par exemple) et ne sont pas en voie de standardisation. Certaines ne s'applique qu'aux éléments <a href="/fr/docs/Mozilla/Tech/XUL">XUL</a>.</p> </div> -<div class="index"> <h3 id="B">B</h3> <ul> @@ -28,12 +27,12 @@ original_slug: Web/CSS/Extensions_Mozilla <li>{{CSSxRef("-moz-border-left-colors")}} {{Obsolete_Inline}}</li> <li>{{CSSxRef("-moz-border-right-colors")}} {{Obsolete_Inline}}</li> <li>{{CSSxRef("-moz-border-top-colors")}} {{Obsolete_Inline}}</li> - <li>{{CSSxRef("-moz-box-align")}}</li> - <li>{{CSSxRef("-moz-box-direction")}}</li> - <li>{{CSSxRef("-moz-box-flex")}}</li> + <li>{{CSSxRef("box-align")}}</li> + <li>{{CSSxRef("box-direction")}}</li> + <li>{{CSSxRef("box-flex")}}</li> <li>{{CSSxRef("-moz-box-ordinal-group")}}</li> - <li>{{CSSxRef("-moz-box-orient")}}</li> - <li>{{CSSxRef("-moz-box-pack")}}</li> + <li>{{CSSxRef("box-orient")}}</li> + <li>{{CSSxRef("box-pack")}}</li> </ul> <h3 id="C_–_I">C – I</h3> @@ -64,22 +63,21 @@ original_slug: Web/CSS/Extensions_Mozilla <ul> <li>{{CSSxRef("-moz-stack-sizing")}}</li> - <li>{{CSSxRef(":-moz-system-metric(images-in-menus)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li> - <li>{{CSSxRef(":-moz-system-metric(mac-graphite-theme)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9.1")}}</li> - <li>{{CSSxRef(":-moz-system-metric(scrollbar-end-backward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li> - <li>{{CSSxRef(":-moz-system-metric(scrollbar-end-forward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li> - <li>{{CSSxRef(":-moz-system-metric(scrollbar-start-backward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li> + <li>{{CSSxRef(":-moz-system-metric(images-in-menus)")}} {{Obsolete_Inline}}</li> + <li>{{CSSxRef(":-moz-system-metric(mac-graphite-theme)")}} {{Obsolete_Inline}}</li> + <li>{{CSSxRef(":-moz-system-metric(scrollbar-end-backward)")}} {{Obsolete_Inline}}</li> + <li>{{CSSxRef(":-moz-system-metric(scrollbar-end-forward)")}} {{Obsolete_Inline}}</li> + <li>{{CSSxRef(":-moz-system-metric(scrollbar-start-backward)")}} {{Obsolete_Inline}}</li> <li>{{CSSxRef(":-moz-system-metric(scrollbar-start-forward)")}} {{Obsolete_Inline}}</li> - <li>{{CSSxRef(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li> - <li>{{CSSxRef(":-moz-system-metric(touch-enabled)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9.2")}}</li> + <li>{{CSSxRef(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{Obsolete_Inline}}</li> + <li>{{CSSxRef(":-moz-system-metric(touch-enabled)")}} {{Obsolete_Inline}}</li> <li>{{CSSxRef(":-moz-system-metric(windows-default-theme)")}} {{Obsolete_Inline}}</li> <li>{{CSSxRef("-moz-user-focus")}}</li> <li>{{CSSxRef("-moz-user-input")}}</li> - <li>{{CSSxRef("-moz-user-modify")}}</li> + <li>{{CSSxRef("user-modify")}}</li> <li>{{CSSxRef("-moz-window-dragging")}}</li> <li>{{CSSxRef("-moz-window-shadow")}}</li> </ul> -</div> <h2 id="Anciennes_propriétés_spécifiques_désormais_standardisées"><span class="highlight-span">Anciennes propriétés spécifiques, désormais standardisées</span></h2> @@ -87,7 +85,6 @@ original_slug: Web/CSS/Extensions_Mozilla <p><strong>Note :</strong> Afin d'obtenir la meilleure compatibilité possible, vous devriez utiliser les versions standards, non-préfixées, de ces propriétés plutôt que les versions spécifiques. Généralement, lorsqu'une propriété est standardisée et implémentée, la version préfixée est généralement abandonnée ensuite.</p> </div> -<div class="index"> <ul> <li> <h3 id="A">A</h3> @@ -108,7 +105,7 @@ original_slug: Web/CSS/Extensions_Mozilla <li>{{CSSxRef("backface-visibility", "-moz-backface-visibility")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li> <li>{{CSSxRef("background-clip", "-moz-background-clip")}}{{Obsolete_Inline(2)}}</li> <li>{{CSSxRef("background-origin", "-moz-background-origin")}}{{Obsolete_Inline(2)}}</li> - <li>{{CSSxRef("-moz-background-inline-policy")}}{{Obsolete_Inline(32)}} [Remplacée par la version standard {{CSSxRef("box-decoration-break")}}]</li> + <li>{{CSSxRef("box-decoration-break")}}{{Obsolete_Inline(32)}} [Remplacée par la version standard {{CSSxRef("box-decoration-break")}}]</li> <li>{{CSSxRef("background-size", "-moz-background-size")}}{{Obsolete_Inline(2)}}</li> <li>{{CSSxRef("border-inline-end","-moz-border-end")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end")}}]</li> <li>{{CSSxRef("border-inline-color","-moz-border-end-color")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end-color")}}]</li> @@ -179,21 +176,17 @@ original_slug: Web/CSS/Extensions_Mozilla <li>{{CSSxRef("transition-timing-function", "-moz-transition-timing-function")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li> <li>{{CSSxRef("user-select","-moz-user-select")}} {{Experimental_Inline}}</li> </ul> -</div> <h2 id="Valeurs">Valeurs</h2> <h3 id="Valeurs_globales">Valeurs globales</h3> -<div class="index"> <ul> <li>{{cssxref("initial","-moz-initial")}}</li> </ul> -</div> -<h3 id="Cssxref(-moz-appearance)">{{Cssxref("-moz-appearance")}}</h3> +<h3 id="Cssxref(-moz-appearance)">{{Cssxref("appearance")}}</h3> -<div class="index"> <ul> <li><code>button</code></li> <li><code>button-arrow-down</code></li> @@ -280,14 +273,12 @@ original_slug: Web/CSS/Extensions_Mozilla <li><code>treeview</code></li> <li><code>window</code></li> </ul> -</div> <h3 id="cssxref(background-image)">{{cssxref("background-image")}}</h3> -<div class="index"> <ul> <li> - <h4 id="Dégradés_Gecko_minversion_inline(1.9.2)">Dégradés {{Gecko_minversion_inline("1.9.2")}}</h4> + <h4 id="Dégradés_Gecko_minversion_inline(1.9.2)">Dégradés </h4> <ul> <li>{{CSSxRef("linear-gradient","-moz-linear-gradient")}} {{Deprecated_Inline}}</li> @@ -295,43 +286,37 @@ original_slug: Web/CSS/Extensions_Mozilla </ul> </li> <li> - <h4 id="Éléments_gecko_minversion_inline(2.0)">Éléments {{gecko_minversion_inline("2.0")}}</h4> + <h4 id="Éléments_gecko_minversion_inline(2.0)">Éléments </h4> <ul> <li>{{cssxref("-moz-element")}}</li> </ul> </li> <li> - <h4 id="Sub-images_gecko_minversion_inline(2.0)">Sub-images {{gecko_minversion_inline("2.0")}}</h4> + <h4 id="Sub-images_gecko_minversion_inline(2.0)">Sub-images </h4> <ul> <li>{{cssxref("-moz-image-rect")}}</li> </ul> </li> </ul> -</div> <h3 id="Cssxref(border-color)">{{Cssxref("border-color")}}</h3> -<div class="index"> <ul> - <li><code>-moz-use-text-color</code> {{obsolete_inline}} retiré de Gecko (cf. {{bug(1306214)}}) ; <a href="/fr/docs/Web/CSS/color_value#currentColor_keyword">currentcolor</a> doit être utilisée à la place.</li> + <li><code>-moz-use-text-color</code> {{obsolete_inline}} retiré de Gecko (cf. {{bug(1306214)}}) ; <a href="/fr/docs/Web/CSS/color_value#currentcolor_keyword">currentcolor</a> doit être utilisée à la place.</li> </ul> -</div> <h3 id="Cssxref(border-style)_et_Cssxref(outline-style)">{{Cssxref("border-style")}} et {{Cssxref("outline-style")}}</h3> -<div class="index"> <ul> <li><code>-moz-bg-inset</code>{{Obsolete_Inline(1.9)}}</li> <li><code>-moz-bg-outset</code>{{Obsolete_Inline(1.9)}}</li> <li><code>-moz-bg-solid</code>{{Obsolete_Inline(1.9)}}</li> </ul> -</div> <h3 id="Mots-clés_pour_cssxref(<color>)">Mots-clés pour {{cssxref("<color>")}}</h3> -<div class="index"> <ul> <li><code>-moz-activehyperlinktext</code></li> <li><code>-moz-hyperlinktext</code></li> @@ -339,8 +324,8 @@ original_slug: Web/CSS/Extensions_Mozilla <li><code>-moz-buttondefault</code></li> <li><code>-moz-buttonhoverface</code></li> <li><code>-moz-buttonhovertext</code></li> - <li><code>-moz-default-background-color</code>{{Gecko_minversion_inline("5.0")}}</li> - <li><code>-moz-default-color</code>{{Gecko_minversion_inline("5.0")}}</li> + <li><code>-moz-default-background-color</code></li> + <li><code>-moz-default-color</code></li> <li><code>-moz-cellhighlight</code></li> <li><code>-moz-cellhighlighttext</code></li> <li><code>-moz-field</code></li> @@ -355,8 +340,8 @@ original_slug: Web/CSS/Extensions_Mozilla <li><code>-moz-mac-accentlightshadow</code></li> <li><code>-moz-mac-accentregularhighlight</code></li> <li><code>-moz-mac-accentregularshadow</code></li> - <li><code>-moz-mac-chrome-active</code>{{Gecko_minversion_inline("1.9.1")}}</li> - <li><code>-moz-mac-chrome-inactive</code>{{Gecko_minversion_inline("1.9.1")}}</li> + <li><code>-moz-mac-chrome-active</code></li> + <li><code>-moz-mac-chrome-inactive</code></li> <li><code>-moz-mac-focusring</code></li> <li><code>-moz-mac-menuselect</code></li> <li><code>-moz-mac-menushadow</code></li> @@ -364,14 +349,12 @@ original_slug: Web/CSS/Extensions_Mozilla <li><code>-moz-menuhover</code></li> <li><code>-moz-menuhovertext</code></li> <li><code>-moz-win-communicationstext</code></li> - <li><code>-moz-win-mediatext</code>{{gecko_minversion_inline(1.9)}}</li> - <li><code>-moz-nativehyperlinktext</code>{{Gecko_minversion_inline("1.9.1")}}</li> + <li><code>-moz-win-mediatext</code></li> + <li><code>-moz-nativehyperlinktext</code></li> </ul> -</div> <h3 id="Cssxref(display)">{{Cssxref("display")}}</h3> -<div class="index"> <ul> <li><code>-moz-box</code> {{Deprecated_Inline}}</li> <li><code>-moz-inline-block</code> {{Obsolete_Inline}}</li> @@ -388,19 +371,15 @@ original_slug: Web/CSS/Extensions_Mozilla <li><code>-moz-stack</code>{{Obsolete_Inline(62)}}</li> <li><code>-moz-marker</code>{{Obsolete_Inline(62)}}</li> </ul> -</div> <h3 id="cssxref(empty-cells)">{{cssxref("empty-cells")}}</h3> -<div class="index"> <ul> <li><code>-moz-show-background</code> (valeur par défaut en <em>quirks mode</em>)</li> </ul> -</div> <h3 id="Cssxref(font)">{{Cssxref("font")}}</h3> -<div class="index"> <ul> <li><code>-moz-button</code></li> <li><code>-moz-info</code></li> @@ -413,35 +392,27 @@ original_slug: Web/CSS/Extensions_Mozilla <li><code>-moz-pull-down-menu</code></li> <li><code>-moz-field</code> (également une couleur)</li> </ul> -</div> <h3 id="Cssxref(font-family)">{{Cssxref("font-family")}}</h3> -<div class="index"> <ul> <li><code>-moz-fixed</code></li> </ul> -</div> <h3 id="Cssxref(image-rendering)">{{Cssxref("image-rendering")}}</h3> -<div class="index"> <ul> - <li>{{Cssxref("image-rendering","-moz-crisp-edges")}} {{Gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref("image-rendering","-moz-crisp-edges")}} </li> </ul> -</div> <h3 id="cssxref(<length>)">{{cssxref("<length>")}}</h3> -<div class="index"> <ul> - <li>{{cssxref("-moz-calc")}} {{gecko_minversion_inline("2.0")}}</li> + <li>{{cssxref("-moz-calc")}} </li> </ul> -</div> <h3 id="Cssxref(list-style-type)">{{Cssxref("list-style-type")}}</h3> -<div class="index"> <ul> <li><code>-moz-arabic-indic</code></li> <li><code>-moz-bengali</code></li> @@ -475,69 +446,57 @@ original_slug: Web/CSS/Extensions_Mozilla <li><code>-moz-trad-chinese-informal</code></li> <li><code>-moz-urdu</code></li> </ul> -</div> <h3 id="Cssxref(overflow)">{{Cssxref("overflow")}}</h3> -<div class="index"> <ul> <li>{{Cssxref("-moz-scrollbars-none")}} {{obsolete_inline}}</li> <li>{{Cssxref("-moz-scrollbars-horizontal")}} {{Deprecated_inline}}</li> <li>{{Cssxref("-moz-scrollbars-vertical")}} {{Deprecated_inline}}</li> <li>{{Cssxref("-moz-hidden-unscrollable")}}</li> </ul> -</div> <h3 id="Cssxref(text-align)">{{Cssxref("text-align")}}</h3> -<div class="index"> <ul> <li><code>-moz-center</code></li> <li><code>-moz-left</code></li> <li><code>-moz-right</code></li> </ul> -</div> <h3 id="Cssxref(text-decoration)">{{Cssxref("text-decoration")}}</h3> -<div class="index"> <ul> <li><code>-moz-anchor-decoration</code></li> </ul> -</div> <h3 id="Cssxref(-moz-user-select)">{{Cssxref("-moz-user-select")}}</h3> -<div class="index"> <ul> <li><code>-moz-all</code></li> <li><code>-moz-none</code></li> </ul> -</div> <h3 id="Cssxref(width)_Cssxref(min-width)_and_Cssxref(max-width)">{{Cssxref("width")}}, {{Cssxref("min-width")}}, and {{Cssxref("max-width")}}</h3> -<div class="index"> <ul> <li><code>-moz-min-content</code></li> <li><code>-moz-fit-content</code></li> <li><code>-moz-max-content</code></li> <li><code>-moz-available</code></li> </ul> -</div> <h2 id="Pseudo-éléments_et_pseudo-classes">Pseudo-éléments et pseudo-classes</h2> -<div class="index"> <ul> <li> <h3 id="A_–_D">A – D</h3> </li> - <li>{{CSSxRef("::-moz-anonymous-block")}} <span class="comment">eg@:- bug 331432</span></li> + <li>{{CSSxRef("::-moz-anonymous-block")}} eg@:- bug 331432</li> <li>{{CSSxRef("::-moz-anonymous-positioned-block")}}</li> - <li>{{CSSxRef(":-moz-any")}}{{gecko_minversion_inline("2.0")}}</li> + <li>{{CSSxRef(":-moz-any")}}</li> <li>{{CSSxRef(":-moz-any-link")}} [Matches <code>:link</code> and <code>:visited</code>]</li> - <li>{{CSSxRef(":-moz-broken")}}{{gecko_minversion_inline("1.9")}}</li> + <li>{{CSSxRef(":-moz-broken")}}</li> <li>{{CSSxRef("::-moz-canvas")}}</li> <li>{{CSSxRef("::-moz-color-swatch")}}</li> <li>{{CSSxRef("::-moz-cell-content")}}</li> @@ -548,12 +507,12 @@ original_slug: Web/CSS/Extensions_Mozilla <li>{{CSSxRef(":-moz-first-node")}}</li> <li>{{CSSxRef("::-moz-focus-inner")}}</li> <li>{{CSSxRef("::-moz-focus-outer")}}</li> - <li>{{CSSxRef(":-moz-focusring")}}{{gecko_minversion_inline("2.0")}}</li> - <li>{{CSSxRef(":-moz-full-screen")}}{{gecko_minversion_inline("9.0")}}</li> - <li>{{CSSxRef(":-moz-full-screen-ancestor")}}{{gecko_minversion_inline("10.0")}}</li> - <li>{{CSSxRef(":-moz-handler-blocked")}}{{gecko_minversion_inline("1.9.1")}}</li> - <li>{{CSSxRef(":-moz-handler-crashed")}}{{gecko_minversion_inline("2.0")}}</li> - <li>{{CSSxRef(":-moz-handler-disabled")}}{{gecko_minversion_inline("1.9.1")}}</li> + <li>{{CSSxRef(":-moz-focusring")}}</li> + <li>{{CSSxRef(":-moz-full-screen")}}</li> + <li>{{CSSxRef(":-moz-full-screen-ancestor")}}</li> + <li>{{CSSxRef(":-moz-handler-blocked")}}</li> + <li>{{CSSxRef(":-moz-handler-crashed")}}</li> + <li>{{CSSxRef(":-moz-handler-disabled")}}</li> <li>{{CSSxRef("::-moz-inline-table")}}</li> <li> <h3 id="L">L</h3> @@ -561,23 +520,23 @@ original_slug: Web/CSS/Extensions_Mozilla <li>{{CSSxRef(":-moz-last-node")}}</li> <li>{{CSSxRef(":-moz-list-bullet")}}</li> <li>{{CSSxRef(":-moz-list-number")}}</li> - <li>{{CSSxRef(":-moz-loading")}}{{gecko_minversion_inline("1.9")}}</li> - <li>{{CSSxRef(":-moz-locale-dir(ltr)")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef(":-moz-locale-dir(rtl)")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef(":-moz-lwtheme")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef(":-moz-lwtheme-brighttext")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef(":-moz-lwtheme-darktext")}}{{gecko_minversion_inline("1.9.2")}}</li> + <li>{{CSSxRef(":-moz-loading")}}</li> + <li>{{CSSxRef(":-moz-locale-dir(ltr)")}}</li> + <li>{{CSSxRef(":-moz-locale-dir(rtl)")}}</li> + <li>{{CSSxRef(":-moz-lwtheme")}}</li> + <li>{{CSSxRef(":-moz-lwtheme-brighttext")}}</li> + <li>{{CSSxRef(":-moz-lwtheme-darktext")}}</li> <li> <h3 id="N_–_R">N – R</h3> </li> - <li>{{CSSxRef(":-moz-native-anonymous")}}{{gecko_minversion_inline("36")}}</li> + <li>{{CSSxRef(":-moz-native-anonymous")}}</li> <li>{{CSSxRef(":-moz-only-whitespace")}}</li> <li>{{CSSxRef("::-moz-page")}}</li> <li>{{CSSxRef("::-moz-page-sequence")}}</li> <li>{{CSSxRef("::-moz-pagebreak")}}</li> <li>{{CSSxRef("::-moz-pagecontent")}}</li> - <li>{{CSSxRef(":-moz-placeholder")}}{{gecko_minversion_inline("1.9")}}{{Obsolete_Inline("51")}}</li> - <li>{{CSSxRef("::-moz-placeholder")}}{{gecko_minversion_inline("19")}}{{Deprecated_Inline("51")}}</li> + <li>{{CSSxRef(":placeholder-shown")}}{{Obsolete_Inline("51")}}</li> + <li>{{CSSxRef("::placeholder")}}{{Deprecated_Inline("51")}}</li> <li>{{CSSxRef("::-moz-progress-bar")}}</li> <li>{{CSSxRef("::-moz-range-progress")}}</li> <li>{{CSSxRef("::-moz-range-thumb")}}</li> @@ -591,8 +550,8 @@ original_slug: Web/CSS/Extensions_Mozilla <li>{{CSSxRef("::-moz-scrolled-content")}}</li> <li>{{CSSxRef("::-moz-scrolled-page-sequence")}}</li> <li>{{CSSxRef("::selection","::-moz-selection")}}{{Deprecated_Inline(62)}}</li> - <li>{{CSSxRef(":-moz-submit-invalid")}}{{gecko_minversion_inline("2.0")}}</li> - <li>{{CSSxRef(":-moz-suppressed")}}{{gecko_minversion_inline("1.9")}}</li> + <li>{{CSSxRef(":-moz-submit-invalid")}}</li> + <li>{{CSSxRef(":-moz-suppressed")}}</li> <li>{{CSSxRef("::-moz-svg-foreign-content")}}</li> <li> <h3 id="T">T</h3> @@ -606,7 +565,7 @@ original_slug: Web/CSS/Extensions_Mozilla <li>{{CSSxRef("::-moz-table-row-group")}}</li> <li>{{CSSxRef(":-moz-tree-cell")}}</li> <li>{{CSSxRef(":-moz-tree-cell-text")}}</li> - <li>{{CSSxRef(":-moz-tree-cell-text(hover)")}}{{gecko_minversion_inline("1.9")}}</li> + <li>{{CSSxRef(":-moz-tree-cell-text(hover)")}}</li> <li>{{CSSxRef(":-moz-tree-checkbox")}}</li> <li>{{CSSxRef(":-moz-tree-column")}}</li> <li>{{CSSxRef(":-moz-tree-drop-feedback")}}</li> @@ -615,65 +574,58 @@ original_slug: Web/CSS/Extensions_Mozilla <li>{{CSSxRef(":-moz-tree-line")}}</li> <li>{{CSSxRef(":-moz-tree-progressmeter")}}</li> <li>{{CSSxRef(":-moz-tree-row")}}</li> - <li>{{CSSxRef(":-moz-tree-row(hover)")}}{{gecko_minversion_inline("1.9")}}</li> + <li>{{CSSxRef(":-moz-tree-row(hover)")}}</li> <li>{{CSSxRef(":-moz-tree-separator")}}</li> <li>{{CSSxRef(":-moz-tree-twisty")}}</li> <li> <h3 id="U_–_X">U – X</h3> </li> - <li>{{CSSxRef(":-moz-ui-invalid")}}{{gecko_minversion_inline("2.0")}}</li> - <li>{{CSSxRef(":-moz-ui-valid")}}{{gecko_minversion_inline("2.0")}}</li> - <li>{{CSSxRef(":-moz-user-disabled")}}{{gecko_minversion_inline("1.9")}}</li> + <li>{{CSSxRef(":user-invalid")}}</li> + <li>{{CSSxRef(":-moz-ui-valid")}}</li> + <li>{{CSSxRef(":-moz-user-disabled")}}</li> <li>{{CSSxRef("::-moz-viewport")}}</li> <li>{{CSSxRef("::-moz-viewport-scroll")}}</li> - <li>{{CSSxRef(":-moz-window-inactive")}}{{gecko_minversion_inline("2.0")}}</li> + <li>{{CSSxRef(":-moz-window-inactive")}}</li> <li>{{CSSxRef("::-moz-xul-anonymous-block")}}</li> </ul> -</div> <h2 id="Règles">Règles @</h2> -<div class="index"> <ul> <li>{{Cssxref("@-moz-document")}}</li> </ul> -</div> <h2 id="Caractéristiques">Caractéristiques</h2> -<div class="index"> <ul> - <li>{{CSSxRef("@media/-moz-mac-graphite-theme", "-moz-mac-graphite-theme")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef("@media/-moz-maemo-classic", "-moz-maemo-classic")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef("@media/-moz-device-pixel-ratio", "-moz-device-pixel-ratio")}}{{gecko_minversion_inline("2.0")}}</li> + <li>{{CSSxRef("@media/-moz-mac-graphite-theme", "-moz-mac-graphite-theme")}}</li> + <li>{{CSSxRef("@media/-moz-maemo-classic", "-moz-maemo-classic")}}</li> + <li>{{CSSxRef("@media/-moz-device-pixel-ratio", "-moz-device-pixel-ratio")}}</li> <li>{{CSSxRef("@media/-moz-os-version", "-moz-os-version")}}</li> - <li>{{CSSxRef("@media/-moz-scrollbar-end-backward", "-moz-scrollbar-end-backward")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef("@media/-moz-scrollbar-end-forward", "-moz-scrollbar-end-forward")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef("@media/-moz-scrollbar-start-backward", "-moz-scrollbar-start-backward")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef("@media/-moz-scrollbar-start-forward", "-moz-scrollbar-start-forward")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef("@media/-moz-scrollbar-thumb-proportional", "-moz-scrollbar-thumb-proportional")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef("@media/-moz-touch-enabled", "-moz-touch-enabled")}}{{gecko_minversion_inline("1.9.2")}}</li> + <li>{{CSSxRef("@media/-moz-scrollbar-end-backward", "-moz-scrollbar-end-backward")}}</li> + <li>{{CSSxRef("@media/-moz-scrollbar-end-forward", "-moz-scrollbar-end-forward")}}</li> + <li>{{CSSxRef("@media/-moz-scrollbar-start-backward", "-moz-scrollbar-start-backward")}}</li> + <li>{{CSSxRef("@media/-moz-scrollbar-start-forward", "-moz-scrollbar-start-forward")}}</li> + <li>{{CSSxRef("@media/-moz-scrollbar-thumb-proportional", "-moz-scrollbar-thumb-proportional")}}</li> + <li>{{CSSxRef("@media/-moz-touch-enabled", "-moz-touch-enabled")}}</li> <li>{{CSSxRef("@media/-moz-windows-accent-color-in-titlebar", "-moz-windows-accent-color-in-titlebar")}}</li> - <li>{{CSSxRef("@media/-moz-windows-classic", "-moz-windows-classic")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef("@media/-moz-windows-compositor", "-moz-windows-compositor")}}{{gecko_minversion_inline("1.9.2")}}</li> - <li>{{CSSxRef("@media/-moz-windows-default-theme", "-moz-windows-default-theme")}}{{gecko_minversion_inline("1.9.2")}}</li> + <li>{{CSSxRef("@media/-moz-windows-classic", "-moz-windows-classic")}}</li> + <li>{{CSSxRef("@media/-moz-windows-compositor", "-moz-windows-compositor")}}</li> + <li>{{CSSxRef("@media/-moz-windows-default-theme", "-moz-windows-default-theme")}}</li> <li>{{CSSxRef("@media/-moz-windows-glass", "-moz-windows-glass")}}</li> - <li>{{CSSxRef("@media/-moz-windows-theme", "-moz-windows-theme")}}{{gecko_minversion_inline("2.0")}}</li> + <li>{{CSSxRef("@media/-moz-windows-theme", "-moz-windows-theme")}}</li> </ul> -</div> <h2 id="Autres">Autres</h2> -<div class="index"> <ul> <li>{{Cssxref("-moz-alt-content")}} {{Bug("11011")}}</li> </ul> -</div> <h2 id="Voir_aussi">Voir aussi</h2> <ul> <li><a href="/fr/docs/Mozilla/Gecko/Chrome/CSS">CSS Mozilla uniquement destiné au chrome (l'interface du navigateur)</a></li> - <li><a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">Extensions CSS spécifiques à Microsoft</a></li> - <li><a href="/fr/docs/Web/CSS/Reference/Extensions_WebKit">Extensions CSS spécifiques à WebKit</a></li> + <li><a href="/fr/docs/Web/CSS/Microsoft_Extensions">Extensions CSS spécifiques à Microsoft</a></li> + <li><a href="/fr/docs/Web/CSS/WebKit_Extensions">Extensions CSS spécifiques à WebKit</a></li> </ul> diff --git a/files/fr/web/css/number/index.html b/files/fr/web/css/number/index.html index c69bd7c8f5..0c055f3739 100644 --- a/files/fr/web/css/number/index.html +++ b/files/fr/web/css/number/index.html @@ -17,13 +17,13 @@ translation_of: Web/CSS/number <h2 id="Interpolation">Interpolation</h2> -<p>Les valeurs de type <code><number></code> peuvent être interpolées afin d'être utilisées dans les animations. Les valeurs de ce type seront interpolées comme des nombres réels à virgule flottante. La vitesse de l'interpolation sera définie grâce <a href="/fr/docs/Web/CSS/timing-function">à la fonction de temporisation</a> associée à l'animation.</p> +<p>Les valeurs de type <code><number></code> peuvent être interpolées afin d'être utilisées dans les animations. Les valeurs de ce type seront interpolées comme des nombres réels à virgule flottante. La vitesse de l'interpolation sera définie grâce <a href="/fr/docs/Web/CSS/easing-function">à la fonction de temporisation</a> associée à l'animation.</p> <h2 id="Exemples">Exemples</h2> <p>Voici des exemples de valeurs <code><number></code> valides :</p> -<pre class="eval example-good">12 Un entier (<a href="/fr/docs/Web/CSS/integer"><integer></a>) est également un <number> +<pre class="brush: css example-good">12 Un entier (<a href="/fr/docs/Web/CSS/integer"><integer></a>) est également un <number> 4.01 Un nombre (décimal) positif -456.8 Un nombre décimal négatif 0.0 Zéro @@ -36,7 +36,7 @@ translation_of: Web/CSS/number <p>Voici des exemples de valeurs invalides :</p> -<pre class="eval example-bad">12. Le point doit être suivi par des chiffres +<pre class="brush: css example-bad">12. Le point doit être suivi par des chiffres +-12.2 Seul un +/- est autorisé. 12.1.1 Seul un point est autorisé. </pre> diff --git a/files/fr/web/css/object-fit/index.html b/files/fr/web/css/object-fit/index.html index 55089a4cbc..4345f75418 100644 --- a/files/fr/web/css/object-fit/index.html +++ b/files/fr/web/css/object-fit/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/object-fit <div>{{EmbedInteractiveExample("pages/css/object-fit.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Selon la valeur utilisée pour <code>object-fit</code>, l'élément peut être rogné, mis à l'échelle ou étiré, afin de remplir la boîte qui le contient.</p> <div class="note"> diff --git a/files/fr/web/css/object-position/index.html b/files/fr/web/css/object-position/index.html index 698403990c..8ef2e87a95 100644 --- a/files/fr/web/css/object-position/index.html +++ b/files/fr/web/css/object-position/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/object-position <div>{{EmbedInteractiveExample("pages/css/object-position.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> Il est possible d'ajuster la taille de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété {{cssxref("object-fit")}}.</p> </div> diff --git a/files/fr/web/css/offset-anchor/index.html b/files/fr/web/css/offset-anchor/index.html index 799506efed..8d0243dfcc 100644 --- a/files/fr/web/css/offset-anchor/index.html +++ b/files/fr/web/css/offset-anchor/index.html @@ -63,14 +63,14 @@ offset-anchor: unset;</pre> <h3 id="HTML">HTML</h3> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><section> - <</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"offset-anchor1</span><span class="punctuation token">"</span></span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">> +<pre class="brush: html"><section> + <div class="offset-anchor1"></div> </section> <section> -</span><span class="tag token"><span class="punctuation token"> <</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"offset-anchor2</span><span class="punctuation token">"</span></span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">> + <div class="offset-anchor2"></div> </section> <section> -</span><span class="tag token"><span class="punctuation token"> <</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"offset-anchor3</span><span class="punctuation token">"</span></span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code> + <div class="offset-anchor3"></div> </section> </pre> @@ -146,5 +146,5 @@ section { <li>{{cssxref("offset")}}</li> <li>{{cssxref("offset-distance")}}</li> <li>{{cssxref("offset-rotation")}}</li> - <li><a href="/fr/docs/Web/SVG/Tutoriel/Paths">L'élément SVG <code><path></code></a></li> + <li><a href="/fr/docs/Web/SVG/Tutorial/Paths">L'élément SVG <code><path></code></a></li> </ul> diff --git a/files/fr/web/css/offset-distance/index.html b/files/fr/web/css/offset-distance/index.html index b4e23dcb22..5189bfdf52 100644 --- a/files/fr/web/css/offset-distance/index.html +++ b/files/fr/web/css/offset-distance/index.html @@ -26,8 +26,7 @@ offset-distance: 40px;</pre> <dl> <dt><code>{{cssxref('<length-percentage>')}}</code></dt> - <dd>Une longueur qui définit l'emplacement de l'élément le long du chemin (défini par {{cssxref('offset-path')}}).</dd> - <dd>La valeur 100% représente la longueur totale du chemin (lorsque <code>offset-path</code> est défini par une forme simple ou grâce à la fonction <code>path()</code>).</dd> + <dd>Une longueur qui définit l'emplacement de l'élément le long du chemin (défini par {{cssxref('offset-path')}}). La valeur 100% représente la longueur totale du chemin (lorsque <code>offset-path</code> est défini par une forme simple ou grâce à la fonction <code>path()</code>).</dd> </dl> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -89,7 +88,7 @@ offset-distance: 40px;</pre> <p>{{CSSInfo}}</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Dans les versions antérieures de la spécification, cette propriété était intitulée <code>motion-offset</code>.</p> </div> diff --git a/files/fr/web/css/offset-path/index.html b/files/fr/web/css/offset-path/index.html index d23be3eb8b..3a3b342f15 100644 --- a/files/fr/web/css/offset-path/index.html +++ b/files/fr/web/css/offset-path/index.html @@ -13,13 +13,11 @@ translation_of: Web/CSS/offset-path <div>{{EmbedInteractiveExample("pages/css/offset-path.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété sert à définir un chemin qu'un élément va suivre lors d'une animation.</p> <p>La position exacte de l'élément sur ce tracé est déterminée grâce à la propriété {{cssxref("offset-distance")}}. Le tracé d'un mouvement peut être défini grâce à un chemin ou à plusieurs chemins successifs ou encore grâce à la géométrie d'une forme. Chaque forme ou chemin doit définir une position initiale pour la valeur calculée <code>0</code> de {{cssxref("offset-distance")}} ainsi qu'une direction initiale qui définit la rotation de l'objet dans sa position initiale.</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Dans des versions antérieures des spécifications, cette propriété était intitulée <code>motion-path</code>. Le nom a été modifié en <code>offset-path</code> afin de décrire un chemin statique plutôt qu'un chemin en mouvement.</p> </div> @@ -52,7 +50,9 @@ offset-path: unset; <h3 id="Valeurs">Valeurs</h3> -<div class="warning"><strong>Attention !</strong> À l'heure actuelle, seule la notation <code>path()</code> est prise en charge par les navigateurs.</div> +<div class="warning"> + <p><strong>Attention :</strong> À l'heure actuelle, seule la notation <code>path()</code> est prise en charge par les navigateurs.</p> +</div> <dl> <dt><code>ray()</code></dt> @@ -60,8 +60,7 @@ offset-path: unset; <dt><code>url()</code></dt> <dd>Cette notation fonctionnelle permet de faire référence à l'identifiant d'une forme SVG : <code>circle</code>, <code>ellipse</code>, <code>line</code>, <code>path</code>, <code>polygon</code>, <code>polyline</code> ou <code>rect</code> et d'utiliser la géométrie de la forme visée pour construire le chemin.</dd> <dt><code><basic-shape></code></dt> - <dd>Cette valeur indique une <a href="/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes">forme CSS</a> en utilisant les notations fonctionnelles <code>circle()</code>, <code>ellipse()</code>, <code>inset()</code>, <code>polygon()</code> ou <code>path()</code>.</dd> - <dd> + <dd>Cette valeur indique une <a href="/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes">forme CSS</a> en utilisant les notations fonctionnelles <code>circle()</code>, <code>ellipse()</code>, <code>inset()</code>, <code>polygon()</code> ou <code>path()</code>. <dl> <dt><code>path()</code></dt> <dd>Une chaîne de caractères qui définit un chemin avec la syntaxe des coordonnées SVG. À l'heure actuelle (16 novembre 2018), c'est la seule valeur qui est prise en charge.</dd> @@ -77,7 +76,7 @@ offset-path: unset; <h2 id="Exemples">Exemples</h2> -<p>L'exemple qui suit est tiré de <a href="http://codepen.io/ericwilligers/pen/bwVkNa">cette démo présente sur CodePen</a>. Le code SVG dessine la forme d'une maison avec une cheminée. Les propriétés <code>offset-path</code> utilisées permettent de déplacer l'icône (des ciseaux) autour de la maison. On notera que la pseudo-classe <code>:path()</code> est utilisée avec <code>offset-path</code> et que le document SVG contient <code><path></code>. Si on compare ces deux données, on verra qu'elles sont identiques.</p> +<p>L'exemple qui suit est tiré de <a href="https://codepen.io/ericwilligers/pen/bwVkNa">cette démo présente sur CodePen</a>. Le code SVG dessine la forme d'une maison avec une cheminée. Les propriétés <code>offset-path</code> utilisées permettent de déplacer l'icône (des ciseaux) autour de la maison. On notera que la pseudo-classe <code>:path()</code> est utilisée avec <code>offset-path</code> et que le document SVG contient <code><path></code>. Si on compare ces deux données, on verra qu'elles sont identiques.</p> <h3 id="CSS">CSS</h3> diff --git a/files/fr/web/css/offset-position/index.html b/files/fr/web/css/offset-position/index.html index 3aa89b7ab7..a73e9d4b41 100644 --- a/files/fr/web/css/offset-position/index.html +++ b/files/fr/web/css/offset-position/index.html @@ -7,9 +7,9 @@ translation_of: Web/CSS/offset-position <p>La propriété <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>offset-position</code></strong> définit la <a href="https://www.w3.org/TR/motion-1/#valdef-offsetpath-initial-position">position initiale</a> de {{cssxref("offset-path")}}.</p> -<h2 id="Syntax" name="Syntax">Syntax</h2> +<h2 id="Syntax">Syntax</h2> -<pre class="brush: css no-line-numbers notranslate">/* Valeurs de mots clefs */ +<pre class="brush: css no-line-numbers">/* Valeurs de mots clefs */ offset-position: auto; offset-position: top; offset-position: bottom; @@ -37,12 +37,12 @@ offset-position: initial; offset-position: unset; </pre> -<h3 id="Values" name="Values">Values</h3> +<h3 id="Values">Values</h3> <dl> <dt><code>auto</code></dt> <dd>La position initiale est la position de la boîte spécifiée par la propriété {{cssxref("position")}}.</dd> - <dt id="<position>"><code><position></code></dt> + <dt><code><position></code></dt> <dd>Une {{cssxref("<position>")}}. Une position définit des coordonnées x/y pour positionner un élément de façon relative aux bords de la boîte de cet élément. Elles peuvent être définies en utilisant une à quatre valeurs. Si deux valeurs qui ne sont pas des mots clefs sont utilisées, la première valeur représente la position horizontale et la seconde représente la position verticale. Si seulement une valeur est définie, la seconde est considérée comme <code>center</code>. Si trois ou quatre valeurs sont utilisées, les valeurs en pourcentage sont des écarts du mot clef qui les précéde. Pour plus d'explications sur ces types de valeur, consultez {{cssxref("background-position")}}.</dd> </dl> @@ -58,10 +58,10 @@ offset-position: unset; <h3 id="Définir_la_valeur_initiale_de_offset-position">Définir la valeur initiale de offset-position</h3> -<pre class="brush: html notranslate"><div id="motion-demo"></div> +<pre class="brush: html"><div id="motion-demo"></div> </pre> -<pre class="brush: css notranslate">#motion-demo { +<pre class="brush: css">#motion-demo { offset-path: path('M20,20 C20,100 200,0 200,100'); offset-position: left top; animation: move 3000ms infinite alternate ease-in-out; diff --git a/files/fr/web/css/opacity/index.html b/files/fr/web/css/opacity/index.html index 7051c95abd..4f33f117e4 100644 --- a/files/fr/web/css/opacity/index.html +++ b/files/fr/web/css/opacity/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/opacity <div>{{EmbedInteractiveExample("pages/css/opacity.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La valeur s'applique à l'ensemble de l'élément et à ce qu'il contient même si la valeur n'est pas héritée par les éléments fils. Ainsi, un élément et les fils qu'il contient auront tous la même opacité relative à l'arrière-plan, même si l'élément et ses descendants ont des opacités différentes. Si on souhaite utiliser différentes opacités pour les différents éléments enfants, plutôt que d'utiliser <code>opacity</code>, on pourra utiliser la propriété {{cssxref("background")}} avec une composante alpha différente de 1 (par exemple : <code>background: rgba(0, 0, 0, 0.4);</code>).</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/order/index.html b/files/fr/web/css/order/index.html index ed0854e8b5..e41e565c0f 100644 --- a/files/fr/web/css/order/index.html +++ b/files/fr/web/css/order/index.html @@ -13,10 +13,8 @@ translation_of: Web/CSS/order <div>{{EmbedInteractiveExample("pages/css/order.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> -<p><strong>Note </strong>: <code>order</code> est uniquement conçue pour affecter <strong>l'ordre visuel</strong>. Elle ne doit pas être utilisée pour modifier l'ordre logique ou l'ordre de tabulation. <code><strong>order</strong></code> ne doit pas être utilisée avec les média non visuels comme les informations vocales.</p> +<p><strong>Note :</strong> <code>order</code> est uniquement conçue pour affecter <strong>l'ordre visuel</strong>. Elle ne doit pas être utilisée pour modifier l'ordre logique ou l'ordre de tabulation. <code><strong>order</strong></code> ne doit pas être utilisée avec les média non visuels comme les informations vocales.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -89,7 +87,7 @@ order: unset; <ul> <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/"><em>Flexbox & the keyboard navigation disconnect — Tink</em> (en anglais)</a></li> - <li><a href="http://adrianroselli.com/2015/09/source-order-matters.html"><em>Source Order Matters, Adrian Roselli</em> (en anglais)</a></li> + <li><a href="https://adrianroselli.com/2015/09/source-order-matters.html"><em>Source Order Matters, Adrian Roselli</em> (en anglais)</a></li> <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">Comprendre les règles du WCAG 1.3</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html"><em>Understanding Success Criterion 1.3.2, W3C Understanding WCAG 2.0</em> (en anglais)</a></li> </ul> @@ -122,7 +120,7 @@ order: unset; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li>Le guide CSS sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de base</a></em></li> - <li>Le guide CSS sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ordering_Flex_Items">Ordonner les éléments flexibles</a></em></li> - <li>Le guide sur la grille CSS : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité">La disposition en grille et l'accessibilité</a></em></li> + <li>Le guide CSS sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Les concepts de base</a></em></li> + <li>Le guide CSS sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordonner les éléments flexibles</a></em></li> + <li>Le guide sur la grille CSS : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">La disposition en grille et l'accessibilité</a></em></li> </ul> diff --git a/files/fr/web/css/outline-color/index.html b/files/fr/web/css/outline-color/index.html index 243233ec9e..daf0293821 100644 --- a/files/fr/web/css/outline-color/index.html +++ b/files/fr/web/css/outline-color/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/outline-color <div>{{EmbedInteractiveExample("pages/css/outline-color.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>À la différence de la bordure, le contour est tracé en dehors du cadre de l'élément et peut donc chevaucher d'autres contenus. La bordure, en revanche, modifiera la disposition de la page afin de s'assurer qu'aucun chevauchement involontaire ne se produit.La propriété <code>outline-color</code> est également synthétisée avec la propriété raccourcie {{cssxref("outline")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/outline-offset/index.html b/files/fr/web/css/outline-offset/index.html index f83b472e4a..98bcb9014e 100644 --- a/files/fr/web/css/outline-offset/index.html +++ b/files/fr/web/css/outline-offset/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/outline-offset <div>{{EmbedInteractiveExample("pages/css/outline-offset.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs de longueur */ diff --git a/files/fr/web/css/outline-style/index.html b/files/fr/web/css/outline-style/index.html index 41758c4d5e..5a98aa4cf7 100644 --- a/files/fr/web/css/outline-style/index.html +++ b/files/fr/web/css/outline-style/index.html @@ -9,17 +9,15 @@ translation_of: Web/CSS/outline-style --- <div>{{CSSRef}}</div> -<p>La propriété <strong><code>outline-style</code></strong> permet de définir la mise en forme utilisée pour dessiner la bordure d'un élément. Cette bordure est dessinée autour de <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de bordure</a> et peut être utilisée afin de faire ressortir l'élément.</p> +<p>La propriété <strong><code>outline-style</code></strong> permet de définir la mise en forme utilisée pour dessiner la bordure d'un élément. Cette bordure est dessinée autour de <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">la boîte de bordure</a> et peut être utilisée afin de faire ressortir l'élément.</p> <div>{{EmbedInteractiveExample("pages/css/outline-style.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette propriété est synthétisée grâce à la propriété {{cssxref("outline")}} qui regroupe outline-style, {{cssxref("outline-width")}} et {{cssxref("outline-color")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush:css no-line-numbers notranslate">/* Valeurs avec un mot-clé */ +<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ outline-style: auto; outline-style: none; outline-style: dotted; @@ -72,7 +70,7 @@ outline-style: unset; <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">.exemple-groove { +<pre class="brush: css">.exemple-groove { outline-style: groove; outline-color: red; outline-width: 2px; @@ -86,7 +84,7 @@ outline-style: unset; <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p class="exemple-groove">Ça c'est le groove</p> +<pre class="brush: html"><p class="exemple-groove">Ça c'est le groove</p> <p class="exemple-outset">Et ça c'est outset</p> </pre> @@ -94,13 +92,13 @@ outline-style: unset; <p>{{EmbedLiveSample("Exemple_simple","100%","100%")}}</p> -<h3 id="Example_0_-_auto" name="Example_0_-_auto">Utilisation de la valeur <code>auto</code></h3> +<h3 id="utilisation_de_la_valeur_auto">Utilisation de la valeur auto</h3> <p>La valeur <code>auto</code> indique une bordure sur mesure selon l'interface du système d'exploitation ou de l'agent utilisateur.</p> <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">.auto { +<pre class="brush: css">.auto { outline-style: auto; /* same result as "outline: auto" */ } @@ -109,7 +107,7 @@ outline-style: unset; <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><div> +<pre class="brush: html"><div> <p class="auto">Outline Demo</p> </div> </pre> diff --git a/files/fr/web/css/outline-width/index.html b/files/fr/web/css/outline-width/index.html index 0a46eda6aa..b0a97a057c 100644 --- a/files/fr/web/css/outline-width/index.html +++ b/files/fr/web/css/outline-width/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/outline-width <div>{{EmbedInteractiveExample("pages/css/outline-width.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs avec un mot clé */ diff --git a/files/fr/web/css/outline/index.html b/files/fr/web/css/outline/index.html index 235e8239cd..7b505019a2 100644 --- a/files/fr/web/css/outline/index.html +++ b/files/fr/web/css/outline/index.html @@ -11,9 +11,7 @@ translation_of: Web/CSS/outline <p>La propriété <strong><code>outline</code></strong> est <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">une propriété raccourcie</a> qui permet de définir, dans une seule déclaration, une ou plusieurs des propriétés parmi {{cssxref("outline-style")}}, {{cssxref("outline-width")}} et {{cssxref("outline-color")}}.</p> -<div>{{EmbedInteractiveExample("pages/css/outline.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<div>{{EmbedInteractiveExample("pages/css/outline.html")}}</div <p>À l'instar des autres propriétés raccourcies, toutes les valeurs qui ne sont pas explicitement utilisées dans la déclaration sont réinitialisées avec <a href="/fr/docs/Web/CSS/Valeur_initiale">leur valeur initiale</a>.</p> @@ -46,7 +44,7 @@ outline: initial; outline: unset; </pre> -<p id="Values">La propriété <code>outline</code> peut être définie avec une, deux ou trois valeurs parmi celles listées ci-après. L'ordre de ces valeurs n'a pas d'importance.</p> +<p>La propriété <code>outline</code> peut être définie avec une, deux ou trois valeurs parmi celles listées ci-après. L'ordre de ces valeurs n'a pas d'importance.</p> <div class="note"> <p><strong>Note :</strong> Si aucun style n'est défini, le contour sera invisible (car le style par défaut vaut <code>none</code>).</p> diff --git a/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html b/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html index eacd32baed..cecf8f743f 100644 --- a/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html +++ b/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html @@ -45,8 +45,8 @@ original_slug: Web/CSS/overflow-anchor/Guide_ancrage_défilement overflow-anchor: none; } </pre> -<div class="blockIndicator note"> -<p><strong>Note</strong> : Dans la spécification, il est indiqué qu'il n'est pas possible de « revenir » avec l'ancrage dans un élément fils si l'ancrage a été désactivé sur un élément parent. Ainsi, si on désactive l'ancrage pour l'ensemble du document, on ne pourra pas appliquer (avec succès) <code>overflow-anchor: auto</code> à un autre endroit du document.</p> +<div class="note"> +<p><strong>Note :</strong> Dans la spécification, il est indiqué qu'il n'est pas possible de « revenir » avec l'ancrage dans un élément fils si l'ancrage a été désactivé sur un élément parent. Ainsi, si on désactive l'ancrage pour l'ensemble du document, on ne pourra pas appliquer (avec succès) <code>overflow-anchor: auto</code> à un autre endroit du document.</p> </div> <h3 id="Supression_triggers">Supression triggers</h3> diff --git a/files/fr/web/css/overflow-block/index.html b/files/fr/web/css/overflow-block/index.html index 9a8d35a650..ee9da652bc 100644 --- a/files/fr/web/css/overflow-block/index.html +++ b/files/fr/web/css/overflow-block/index.html @@ -100,9 +100,7 @@ overflow-block: unset; <h3 id="Résultat">Résultat</h3> -<figure> <p>{{EmbedLiveSample("Exemples", "100%", "780")}}</p> -</figure> <h2 id="Spécifications">Spécifications</h2> @@ -129,7 +127,7 @@ overflow-block: unset; <p>{{Compat("css.properties.overflow-block")}}</p> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> <li>Propriétés CSS associées : {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{cssxref("overflow")}}, {{cssxref("overflow-inline")}}, {{cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{cssxref("clip")}}, {{cssxref("display")}}</li> diff --git a/files/fr/web/css/overflow-inline/index.html b/files/fr/web/css/overflow-inline/index.html index c3a616fa8f..845fe83f15 100644 --- a/files/fr/web/css/overflow-inline/index.html +++ b/files/fr/web/css/overflow-inline/index.html @@ -100,9 +100,7 @@ overflow-inline: unset; <h3 id="Résultat">Résultat</h3> -<figure> <p>{{EmbedLiveSample("Exemples", "100%", "270")}}</p> -</figure> <h2 id="Spécifications">Spécifications</h2> @@ -129,7 +127,7 @@ overflow-inline: unset; <p>{{Compat("css.properties.overflow-inline")}}</p> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> <li>Propriétés CSS associées : {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{cssxref("overflow")}}, {{cssxref("overflow-block")}}, {{cssxref("overflow-x")}}, {{cssxref("overflow-y")}}, {{cssxref("clip")}}, {{cssxref("display")}}</li> diff --git a/files/fr/web/css/overflow-wrap/index.html b/files/fr/web/css/overflow-wrap/index.html index 0cc851c2f4..af17d340b6 100644 --- a/files/fr/web/css/overflow-wrap/index.html +++ b/files/fr/web/css/overflow-wrap/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/overflow-wrap <div>{{EmbedInteractiveExample("pages/css/overflow-wrap.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> À la différence de {{cssxref("word-break")}}, <code>overflow-wrap</code> créera uniquement un saut de ligne si un mot entier ne peut pas être placé sur sa propre ligne sans dépasser.</p> </div> @@ -45,13 +43,12 @@ overflow-wrap: unset; <dd>Indique que la césure pourra avoir lieu afin d'éviter le dépassement, y compris s'il n'y a pas de point de césure acceptable sur la ligne. Cela est notamment utile pour éviter le dépassement et qu'on a une longue ligne (un long mot ou une URL). Aucun caractère ne sera ajouté au point de césure. Les possibilités de rupture douces ajoutées par la césure sont prises en compte lors du calcul des tailles <code>min-content</code> intrinsèques.</dd> <dt><code>break-word</code></dt> <dd>Indique que les mots qui ne subissent habituellement pas de césure peuvent être scindés à n'importe quelle position s'il n'y a pas d'autres positions envisageables pour la césure de la ligne. Les possibilités de rupture douces ajoutées par la césure <strong>ne sont pas</strong> prises en compte lors du calcul des tailles <code>min-content</code> intrinsèques.</dd> - <dt> - <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - - {{csssyntax}} - </dt> </dl> +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<p>{{csssyntax}}</p> + <h2 id="Exemples">Exemples</h2> <h3 id="CSS">CSS</h3> diff --git a/files/fr/web/css/overflow-x/index.html b/files/fr/web/css/overflow-x/index.html index 598b2b8916..daef74255a 100644 --- a/files/fr/web/css/overflow-x/index.html +++ b/files/fr/web/css/overflow-x/index.html @@ -17,8 +17,6 @@ translation_of: Web/CSS/overflow-x <div>{{EmbedInteractiveExample("pages/css/overflow-x.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ @@ -110,9 +108,7 @@ overflow-x: unset; <h3 id="Résultat">Résultat</h3> -<figure> <p>{{EmbedLiveSample("Exemples", "100%", "270")}}</p> -</figure> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/overflow-y/index.html b/files/fr/web/css/overflow-y/index.html index 0ed664de32..c91f18849d 100644 --- a/files/fr/web/css/overflow-y/index.html +++ b/files/fr/web/css/overflow-y/index.html @@ -17,8 +17,6 @@ translation_of: Web/CSS/overflow-y <div>{{EmbedInteractiveExample("pages/css/overflow-y.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ @@ -115,9 +113,7 @@ overflow-y: unset; <h3 id="Résultat">Résultat</h3> -<figure> <p>{{EmbedLiveSample("Exemples", "100%", "780")}}</p> -</figure> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/overflow/index.html b/files/fr/web/css/overflow/index.html index 54a4d86f53..58dcae523b 100644 --- a/files/fr/web/css/overflow/index.html +++ b/files/fr/web/css/overflow/index.html @@ -14,9 +14,7 @@ translation_of: Web/CSS/overflow <div>{{EmbedInteractiveExample("pages/css/overflow.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p>Lorsqu'on utilise la propriété <code>overflow</code> avec une autre valeur que <code>visible</code> (la valeur par défaut), cela entraîne la création <a href="/fr/docs/Web/CSS/Block_formatting_context">d'un nouveau contexte de formatage de bloc</a>. Cette création est nécessaire d'un point de vue technique. Ceci est nécessaire techniquement puisque si un élément flottant traverse l'élément avec barres de défilement, cela forcera l'encapsulation du contenu de ce dernier autour de l'élément flottant. L'encapsulation devrait alors se produire après chaque défilement de la barre et mènerait à une expérience utilisateur dégradée</p> +<p>Lorsqu'on utilise la propriété <code>overflow</code> avec une autre valeur que <code>visible</code> (la valeur par défaut), cela entraîne la création <a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">d'un nouveau contexte de formatage de bloc</a>. Cette création est nécessaire d'un point de vue technique. Ceci est nécessaire techniquement puisque si un élément flottant traverse l'élément avec barres de défilement, cela forcera l'encapsulation du contenu de ce dernier autour de l'élément flottant. L'encapsulation devrait alors se produire après chaque défilement de la barre et mènerait à une expérience utilisateur dégradée</p> <p>Afin que la propriété <code>overflow</code> puisse avoir un effet, le conteneur de niveau de bloc doit avoir une hauteur limite (définie grâce à {{cssxref("height")}} ou {{cssxref("max-height")}}) ou avoir <code>white-space</code> avec la valeur <code>nowrap.</code></p> @@ -25,7 +23,7 @@ translation_of: Web/CSS/overflow </div> <div class="note"> -<p><strong>Note </strong>: Lorsqu'on définit, via un script, la propriété <code>scrollTop</code> sur les éléments HTML pertinents, même lorsque <code>overflow</code> vaut <code>hidden</code>, il faut parfois faire défiler l'élément.</p> +<p><strong>Note :</strong> Lorsqu'on définit, via un script, la propriété <code>scrollTop</code> sur les éléments HTML pertinents, même lorsque <code>overflow</code> vaut <code>hidden</code>, il faut parfois faire défiler l'élément.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -68,16 +66,13 @@ overflow: unset; <dl> <dt><code>-moz-scrollbars-none </code>{{obsolete_inline}}</dt> - <dd><code>overflow:hidden</code> doit être utilisé à la place. - <p class="note"><strong>Note :</strong> À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans <code>about:config</code>, il faut passer <code>layout.css.overflow.moz-scrollbars.enabled</code> à <code>true</code>.</p> + <dd><code>overflow:hidden</code> doit être utilisé à la place. À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans <code>about:config</code>, il faut passer <code>layout.css.overflow.moz-scrollbars.enabled</code> à <code>true</code>. </dd> <dt><code>-moz-scrollbars-horizontal </code>{{Deprecated_inline}}</dt> - <dd>Utilisez {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}} à la place. - <p class="note"><strong>Note :</strong> À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans <code>about:config</code>, il faut passer <code>layout.css.overflow.moz-scrollbars.enabled</code> à <code>true</code>.</p> + <dd>Utilisez {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}} à la place. À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans <code>about:config</code>, il faut passer <code>layout.css.overflow.moz-scrollbars.enabled</code> à <code>true</code>. </dd> <dt><code>-moz-scrollbars-vertical </code>{{Deprecated_inline}}</dt> - <dd>Utilisez {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}} à la place. - <p class="note"><strong>Note :</strong> À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans <code>about:config</code>, il faut passer <code>layout.css.overflow.moz-scrollbars.enabled</code> à <code>true</code>.</p> + <dd>Utilisez {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}} à la place. À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans <code>about:config</code>, il faut passer <code>layout.css.overflow.moz-scrollbars.enabled</code> à <code>true</code>. </dd> <dt><code>-moz-hidden-unscrollable</code> {{non-standard_inline}}</dt> <dd>Principalement utilisé en interne et par les thèmes. Cela désactive le défilement pour les éléments XML racines <code><html></code>, <code> <body></code> (avec les flèches du clavier et la roue de la souris).</dd> @@ -89,45 +84,79 @@ overflow: unset; <h2 id="Exemples">Exemples</h2> -<pre class="brush: css">p { - width: 12em; - height: 6em; +<h3 id="définir_différentes_valeurs_d_overflow_pour_le_texte">Définir différentes valeurs d'overflow pour le texte</h3> + +<h4>HTML</h4> + +<pre class="brush: html"> + <div> + <code>visible</code> + <p class="visible"> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. + </p> + </div> + + <div> + <code>hidden</code> + <p class="hidden"> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. + </p> + </div> + + <div> + <code>scroll</code> + <p class="scroll"> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. + </p> + </div> + + <div> + <code>auto</code> + <p class="auto"> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. + </p> + </div> +</pre> + +<h4>CSS</h4> + +<pre class="brush: css"> +body { + display: flex; + justify-content: space-around; +} + +div { + margin: 1em; + font-size: 1.2em; +} + +p { + width: 8em; + height: 5em; border: dotted; +} - /* le contenu n'est pas rogné */ +p.visible { overflow: visible; } -</pre> -<p style="overflow: visible; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>visible</code> (default)<br> - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> - -<pre class="brush: css">p { - /* pas d'ascenseur fourni */ +p.hidden { overflow: hidden; } -</pre> -<p style="overflow: hidden; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: hidden</code><br> - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> - -<pre class="brush: css">p { - /* les ascenseurs sont toujours affichés */ +p.scroll { overflow: scroll; } -</pre> -<p style="overflow: scroll; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: scroll</code><br> - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> - -<pre class="brush: css">p { - /* les ascenseurs sont affichés si nécessaires */ +p.auto { overflow: auto; } </pre> -<p style="overflow: auto; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: auto</code><br> - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> +<h4>Résultat</h4> + +<p>{{EmbedLiveSample("définir_différentes_valeurs_d_overflow_pour_le_texte", "600", "250")}}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/overscroll-behavior-x/index.html b/files/fr/web/css/overscroll-behavior-x/index.html index 7369eb8152..6863618b75 100644 --- a/files/fr/web/css/overscroll-behavior-x/index.html +++ b/files/fr/web/css/overscroll-behavior-x/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/overscroll-behavior-x <p>La propriété CSS <strong><code>overscroll-behavior-x</code></strong> définit le comportement de l'agent utilisateur lorsqu'on atteint la limite de la zone de défilement sur l'axe horizontal.</p> <div class="note"> -<p><strong>Note</strong> : Voir {{cssxref("overscroll-behavior")}} pour plus de détails.</p> +<p><strong>Note :</strong> Voir {{cssxref("overscroll-behavior")}} pour plus de détails.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/overscroll-behavior-y/index.html b/files/fr/web/css/overscroll-behavior-y/index.html index 75c5d85354..2b9e86b5ad 100644 --- a/files/fr/web/css/overscroll-behavior-y/index.html +++ b/files/fr/web/css/overscroll-behavior-y/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/overscroll-behavior-y <p>La propriété CSS <strong><code>overscroll-behavior-y</code></strong> permet de contrôler le comportement de l'agent utilisateur lorsqu'on atteint la limite de la zone de défilement sur l'axe vertical.</p> <div class="note"> -<p><strong>Note</strong> : Voir {{cssxref("overscroll-behavior")}} pour plus de détails.</p> +<p><strong>Note :</strong> Voir {{cssxref("overscroll-behavior")}} pour plus de détails.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/overscroll-behavior/index.html b/files/fr/web/css/overscroll-behavior/index.html index 12689d8d21..7145aa1b6e 100644 --- a/files/fr/web/css/overscroll-behavior/index.html +++ b/files/fr/web/css/overscroll-behavior/index.html @@ -55,7 +55,7 @@ overflow: unset; <p>Dans notre exemple sur <code><a href="https://mdn.github.io/css-examples/overscroll-behavior/">overscroll-behavior</a></code> (cf. <a href="https://github.com/mdn/css-examples/tree/master/overscroll-behavior">le code source</a> associé), on affiche une page entière de contacts et une boîte de dialogue avec une fenêtre de discussion. </p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15778/example.png" style="border-style: solid; border-width: 1px; display: block; height: 622px; margin: 0px auto; width: 350px;"></p> +<p><img alt="" src="example.png"></p> <p>Ces deux zones possèdent du contenu qui entraîne leur défilement. Normalement, si on défile la fenêtre de discussion jusqu'à une limite de défilement, ce serait au tour de la liste de contacts de défiler en dessous. Cependant, cet effet n'est pas souhaitable ici. On utilise donc <code>overscroll-behavior-y</code> (<code>overscroll-behavior</code> fonctionnerait également) sur la fenêtre de discussion :</p> diff --git a/files/fr/web/css/padding-block-end/index.html b/files/fr/web/css/padding-block-end/index.html index 77365bdb63..91344ee297 100644 --- a/files/fr/web/css/padding-block-end/index.html +++ b/files/fr/web/css/padding-block-end/index.html @@ -16,8 +16,6 @@ translation_of: Web/CSS/padding-block-end <div>{{EmbedInteractiveExample("pages/css/padding-block-end.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs de longueur */ diff --git a/files/fr/web/css/padding-block-start/index.html b/files/fr/web/css/padding-block-start/index.html index b75dee980f..8a70d9e330 100644 --- a/files/fr/web/css/padding-block-start/index.html +++ b/files/fr/web/css/padding-block-start/index.html @@ -16,8 +16,6 @@ translation_of: Web/CSS/padding-block-start <div>{{EmbedInteractiveExample("pages/css/padding-block-start.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs de longueur */ diff --git a/files/fr/web/css/padding-bottom/index.html b/files/fr/web/css/padding-bottom/index.html index 1b84a4d296..4e2f06874c 100644 --- a/files/fr/web/css/padding-bottom/index.html +++ b/files/fr/web/css/padding-bottom/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/padding-bottom <div>{{EmbedInteractiveExample("pages/css/padding-bottom.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris <code>padding-bottom</code> donc).</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/padding-inline-end/index.html b/files/fr/web/css/padding-inline-end/index.html index eae949899b..5ba370f4da 100644 --- a/files/fr/web/css/padding-inline-end/index.html +++ b/files/fr/web/css/padding-inline-end/index.html @@ -16,8 +16,6 @@ translation_of: Web/CSS/padding-inline-end <div>{{EmbedInteractiveExample("pages/css/padding-inline-end.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs de longueur */ diff --git a/files/fr/web/css/padding-inline-start/index.html b/files/fr/web/css/padding-inline-start/index.html index cffa148b81..0c58a3d67e 100644 --- a/files/fr/web/css/padding-inline-start/index.html +++ b/files/fr/web/css/padding-inline-start/index.html @@ -16,8 +16,6 @@ translation_of: Web/CSS/padding-inline-start <p>{{EmbedInteractiveExample("pages/css/padding-inline-start.html")}}</p> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs de longueur */ diff --git a/files/fr/web/css/padding-inline/index.html b/files/fr/web/css/padding-inline/index.html index 7af32a6705..b4fd3ffbf3 100644 --- a/files/fr/web/css/padding-inline/index.html +++ b/files/fr/web/css/padding-inline/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/padding-inline <p>La propriété <strong><code>padding-inline</code></strong> définit l'espace de remplissage (<em>padding</em>) pour le début et la fin de l'axe en ligne de l'élément. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("padding-top")}} et {{cssxref("padding-bottom")}} ou à {{cssxref("padding-right")}} et {{cssxref("padding-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p> -<pre class="brush:css no-line-numbers notranslate">/* Valeurs de longueur */ +<pre class="brush:css no-line-numbers">/* Valeurs de longueur */ /* Type <length> */ padding-inline: 10px 20px; /* Des longueurs absolues */ padding-inline: 1em 2em; /* Des longueurs relatives à la taille du texte */ @@ -45,7 +45,7 @@ padding-inline: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { background-color: yellow; width: 120px; height: 120px; @@ -59,7 +59,7 @@ padding-inline: unset; <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div> +<pre class="brush: html"><div> <p class="texteExemple">Texte d'exemple</p> </div> </pre> diff --git a/files/fr/web/css/padding-left/index.html b/files/fr/web/css/padding-left/index.html index cbcb040f4d..616f871991 100644 --- a/files/fr/web/css/padding-left/index.html +++ b/files/fr/web/css/padding-left/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/padding-left <div>{{EmbedInteractiveExample("pages/css/padding-left.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris <code>padding-left</code> donc).</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/padding-right/index.html b/files/fr/web/css/padding-right/index.html index 3571c821c7..245c6797fd 100644 --- a/files/fr/web/css/padding-right/index.html +++ b/files/fr/web/css/padding-right/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/padding-right <div>{{EmbedInteractiveExample("pages/css/padding-right.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris <code>padding-right</code> donc).</p> </div> diff --git a/files/fr/web/css/padding-top/index.html b/files/fr/web/css/padding-top/index.html index 6dd515752c..97b9a7760d 100644 --- a/files/fr/web/css/padding-top/index.html +++ b/files/fr/web/css/padding-top/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/padding-top <div>{{EmbedInteractiveExample("pages/css/padding-top.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris <code>padding-top</code> donc).</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/padding/index.html b/files/fr/web/css/padding/index.html index 35002900d1..3b643b258d 100644 --- a/files/fr/web/css/padding/index.html +++ b/files/fr/web/css/padding/index.html @@ -10,13 +10,11 @@ translation_of: Web/CSS/padding --- <div>{{CSSRef}}</div> -<p>La propriété <strong><code>padding</code></strong> est <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">une propriété raccourcie</a> qui permet de définir les différents écarts de remplissage sur les quatre côtés d'un élément (cf. <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte#Les_propriétés_des_boîtes">les boîtes CSS</a>). Elle synthétise {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}.</p> +<p>La propriété <strong><code>padding</code></strong> est <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">une propriété raccourcie</a> qui permet de définir les différents écarts de remplissage sur les quatre côtés d'un élément (cf. <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model#les_propri%c3%a9t%c3%a9s_des_bo%c3%aetes">les boîtes CSS</a>). Elle synthétise {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}.</p> <div>{{EmbedInteractiveExample("pages/css/padding.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p>La <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte" title="http://developer.mozilla.org/en/CSS/Box_model#padding">zone de remplissage</a> correspond à l'espace entre le contenu de l'élément et sa bordure. Les valeurs négatives ne sont pas autorisées.</p> +<p>La <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model" title="http://developer.mozilla.org/en/CSS/Box_model#padding">zone de remplissage</a> correspond à l'espace entre le contenu de l'élément et sa bordure. Les valeurs négatives ne sont pas autorisées.</p> <div class="note"> <p><strong>Note :</strong> Le <em>padding</em> permet de créer un espace supplémentaire à l'intérieur d'un élément. La marge ({{cssxref("margin")}}) permet quant à elle de créer un espace supplémentaire à l'extérieur de l'élément.</p> @@ -134,7 +132,7 @@ h3 { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="internal" href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte" title="en/CSS/box model">CSS : Le modèle de boîtes</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">CSS : Le modèle de boîtes</a></li> <li>Les quatres propriétés détaillées synthétisées par <code>padding</code> : <ul> <li>{{cssxref("padding-top")}}</li> diff --git a/files/fr/web/css/page-break-after/index.html b/files/fr/web/css/page-break-after/index.html index b01e767e9c..6c40401c7f 100644 --- a/files/fr/web/css/page-break-after/index.html +++ b/files/fr/web/css/page-break-after/index.html @@ -9,8 +9,8 @@ translation_of: Web/CSS/page-break-after --- <div>{{CSSRef}}</div> -<div class="blockIndicator warning"> -<p><strong>Attention !</strong> Cette propriété a été remplacée par la propriété {{cssxref("break-after")}}.</p> +<div class="warning"> +<p><strong>Attention :</strong> Cette propriété a été remplacée par la propriété {{cssxref("break-after")}}.</p> </div> <p>La propriété CSS <strong><code>page-break-after</code></strong> permet d'ajuster les sauts de page placés <em>après</em> l'élément courant.</p> diff --git a/files/fr/web/css/page-break-before/index.html b/files/fr/web/css/page-break-before/index.html index 67fdbe48f5..ebbbfaa167 100644 --- a/files/fr/web/css/page-break-before/index.html +++ b/files/fr/web/css/page-break-before/index.html @@ -9,8 +9,8 @@ translation_of: Web/CSS/page-break-before --- <div>{{CSSRef}}</div> -<div class="blockIndicator warning"> -<p><strong>Attention !</strong> Cette propriété a été remplacée par la propriété {{cssxref("break-before")}}.</p> +<div class="warning"> +<p><strong>Attention :</strong> Cette propriété a été remplacée par la propriété {{cssxref("break-before")}}.</p> </div> <p>La propriété CSS <strong><code>page-break-before</code></strong> permet d'ajuster les sauts de page placés <em>avant</em> l'élément courant.Cette propriété s'applique aux éléments de blocs qui génèrent une boîte. Elle ne s'appliquera pas à un {{HTMLElement("div")}} qui ne génère pas de boîte.</p> diff --git a/files/fr/web/css/page-break-inside/index.html b/files/fr/web/css/page-break-inside/index.html index 5fa07bd2f5..3dc045c5ee 100644 --- a/files/fr/web/css/page-break-inside/index.html +++ b/files/fr/web/css/page-break-inside/index.html @@ -9,8 +9,8 @@ translation_of: Web/CSS/page-break-inside --- <div>{{CSSRef}}</div> -<div class="blockIndicator warning"> -<p><strong>Attention !</strong> Cette propriété a été remplacée par la propriété {{cssxref("break-inside")}}.</p> +<div class="warning"> +<p><strong>Attention :</strong> Cette propriété a été remplacée par la propriété {{cssxref("break-inside")}}.</p> </div> <p>La propriété <strong><code>page-break-inside</code></strong> ajuste la façon dont sont appliqués les sauts de page au sein de l'élément courant.</p> diff --git a/files/fr/web/css/paint-order/index.html b/files/fr/web/css/paint-order/index.html index 77c5356938..ffbc99c063 100644 --- a/files/fr/web/css/paint-order/index.html +++ b/files/fr/web/css/paint-order/index.html @@ -41,7 +41,7 @@ paint-order: markers stroke fill; <p>Lorsqu'une seule valeur est indiquée, c'est celle-ci qui est appliquée par défaut suivi des deux autres selon l'ordre par défaut. Lorsque deux valeurs sont indiquées, elles sont appliquées dans cet ordre puis suivi de la troisième.</p> <div class="note"> -<p><strong>Note </strong>: Pour cette propriété, les marqueurs sont uniquement utilisés dans le cas de formes SVG qui utilisent les propriétés <code>marker-*</code> (e.g. <code><a href="/fr/docs/Web/SVG/Attribute/marker-start">marker-start</a></code>) ou l'élément <code><a href="/fr/docs/Web/SVG/Element/marker"><marker></a></code>. Les marqueurs ne sont pas appliqués sur le texte HTML, dans ce cas, seul l'ordre entre <code>stroke</code> et <code>fill</code> importe.</p> +<p><strong>Note :</strong> Pour cette propriété, les marqueurs sont uniquement utilisés dans le cas de formes SVG qui utilisent les propriétés <code>marker-*</code> (e.g. <code><a href="/fr/docs/Web/SVG/Attribute/marker-start">marker-start</a></code>) ou l'élément <code><a href="/fr/docs/Web/SVG/Element/marker"><marker></a></code>. Les marqueurs ne sont pas appliqués sur le texte HTML, dans ce cas, seul l'ordre entre <code>stroke</code> et <code>fill</code> importe.</p> </div> <h3 id="Valeurs">Valeurs</h3> diff --git a/files/fr/web/css/path()/index.html b/files/fr/web/css/path()/index.html index 2f6d56f241..7be4d1a072 100644 --- a/files/fr/web/css/path()/index.html +++ b/files/fr/web/css/path()/index.html @@ -57,5 +57,5 @@ path(evenodd,"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"); <li>{{cssxref("<shape-outside>")}}</li> <li><a href="/fr/docs/Web/CSS/CSS_Shapes">Formes CSS</a></li> <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">Vue d'ensemble des formes CSS</a></li> - <li><a href="https://css-tricks.com/svg-path-syntax-illustrated-guide/"><i lang="en-US">SVG Path Syntax Illustrated Guide</i> (en anglais)</a></li> + <li><a href="https://css-tricks.com/svg-path-syntax-illustrated-guide/"><i lang="en">SVG Path Syntax Illustrated Guide</i> (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/perspective-origin/index.html b/files/fr/web/css/perspective-origin/index.html index 86f51bfa86..8a8768ebf1 100644 --- a/files/fr/web/css/perspective-origin/index.html +++ b/files/fr/web/css/perspective-origin/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/perspective-origin <div>{{EmbedInteractiveExample("pages/css/perspective-origin.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les propriétés <code>perspective-origin</code> et {{cssxref("perspective")}} sont à rattacher à l'élément parent de l'élément qu'on veut placer dans un espace 3D. En revanche, la fonction <code><a href="/fr/docs/Web/CSS/transform-function/perspective">perspective()</a></code> s'applique à même l'élément qu'on veut placer en 3D.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/perspective/index.html b/files/fr/web/css/perspective/index.html index 306bcb7936..e29b24aa7a 100644 --- a/files/fr/web/css/perspective/index.html +++ b/files/fr/web/css/perspective/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/perspective <div>{{EmbedInteractiveExample("pages/css/perspective.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les parties des éléments 3D qui se situent derrière l'utilisateur (c'est-à-dire ceux pour lesquels leur coordonnée en z est plus grande que la valeur de la propriété <code>perspective</code>) ne sont pas dessiné.</p> <p>Par défaut, le point de fuite est placé au centre de l'élément mais il peut être déplacé grâce à la propriété {{cssxref("perspective-origin")}}.</p> diff --git a/files/fr/web/css/place-content/index.html b/files/fr/web/css/place-content/index.html index 4dc5d23259..58064fcb1f 100644 --- a/files/fr/web/css/place-content/index.html +++ b/files/fr/web/css/place-content/index.html @@ -12,9 +12,7 @@ translation_of: Web/CSS/place-content <p>La propriété raccourcie <code><strong>place</strong></code><strong><code>-content</code></strong> permet de définir les valeurs des propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}. Elle peut être utilisée pour n'importe quelle méthode de disposition (boîtes flexibles, grilles, etc;) qui prend en charge ces deux propriétés d'alignement.</p> -<div>{{EmbedInteractiveExample("pages/css/place-content.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<div>{{EmbedInteractiveExample("pages/css/place-content.html")}}</div <h2 id="Syntaxe">Syntaxe</h2> @@ -46,7 +44,7 @@ place-content: unset;</pre> <p>La première valeur utilisée sera celle qui correspond à {{cssxref("align-content")}} et la seconde valeur correspondra à {{cssxref("justify-content")}}. Si la deuxième valeur n'est pas présente, la première valeur indiquée sera également utilisée pour <code>justify-content</code>.</p> <div class="warning"> -<p><strong>Attention !</strong> Si une seule valeur est fournie et que celle-ci est invalide pour l'une ou l'autre des propriétés détaillées, c'est la déclaration entière qui sera invalide.</p> +<p><strong>Attention :</strong> Si une seule valeur est fournie et que celle-ci est invalide pour l'une ou l'autre des propriétés détaillées, c'est la déclaration entière qui sera invalide.</p> </div> <h3 id="Valeurs">Valeurs</h3> @@ -89,7 +87,7 @@ place-content: unset;</pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[7]">#container { +<pre class="brush: css">#container { display: flex; height:240px; width: 240px; @@ -171,10 +169,7 @@ div > div { </select><code>;</code> </pre> -<div class="hidden"> -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var update = function () { +<pre class="brush: js hidden">var update = function () { document.getElementById("container").style.placeContent = document.getElementById("alignContentAlignment").value + " " + document.getElementById("justifyContentAlignment").value; } @@ -193,7 +188,6 @@ direction.addEventListener("change", function (evt) { document.getElementById("container").style.direction = evt.target.value; }); </pre> -</div> <h3 id="Résultat">Résultat</h3> @@ -235,10 +229,10 @@ direction.addEventListener("change", function (evt) { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles en CSS</a></li> - <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner des objets dans une grille</a></em></li> - <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li> - <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></em></li> + <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Utiliser les boîtes flexibles en CSS</a></li> + <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Aligner des objets dans une grille</a></em></li> + <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Les concepts de bases</a></em></li> + <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligner des objets dans un conteneur flexible</a></em></li> <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li> <li>La propriété {{cssxref("align-content")}}</li> <li>La propriété {{cssxref("justify-content")}}</li> diff --git a/files/fr/web/css/place-items/index.html b/files/fr/web/css/place-items/index.html index edcda65124..c5b670ba70 100644 --- a/files/fr/web/css/place-items/index.html +++ b/files/fr/web/css/place-items/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/place-items <div>{{EmbedInteractiveExample("pages/css/place-items.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css">/* Valeurs avec un mot-clé */ @@ -97,7 +95,7 @@ place-items: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[4]">#container { +<pre class="brush: css">#container { height:200px; width: 240px; place-items: center; /* Cette valeur peut être modifiée dans l'exemple */ @@ -115,8 +113,7 @@ place-items: unset; } </pre> -<div class="hidden"> -<pre class="brush: css;">div > div { +<pre class="brush: css hidden">div > div { box-sizing: border-box; border: 2px solid #8c8c8c; width: 50px; @@ -164,9 +161,7 @@ select { margin-top: 10px; }</pre> -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div id="container" class="flex"> +<pre class="brush: html hidden"><div id="container" class="flex"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> @@ -210,9 +205,7 @@ select { </div> </pre> -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var values = document.getElementById('values'); +<pre class="brush: js hidden">var values = document.getElementById('values'); var display = document.getElementById('display'); var container = document.getElementById('container'); @@ -224,7 +217,6 @@ display.addEventListener('change', function (evt) { container.className = evt.target.value; }); </pre> -</div> <h3 id="Résultat">Résultat</h3> diff --git a/files/fr/web/css/place-self/index.html b/files/fr/web/css/place-self/index.html index 15cec4eb4f..e996026df7 100644 --- a/files/fr/web/css/place-self/index.html +++ b/files/fr/web/css/place-self/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/place-self <div>{{EmbedInteractiveExample("pages/css/place-self.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/pointer-events/index.html b/files/fr/web/css/pointer-events/index.html index 69583602c8..84f450cbbe 100644 --- a/files/fr/web/css/pointer-events/index.html +++ b/files/fr/web/css/pointer-events/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/pointer-events <div>{{EmbedInteractiveExample("pages/css/pointer-events.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Lorsque cette propriété n'est pas définie, pour le contenu SVG, on aura le même effet qu'avec la valeur <code>visiblePainted</code>. Lorsqu'on utilise la valeur <code>none</code>, cela indique que l'élément ne peut pas recevoir d'événement de pointeur mais cela indique également qu'on peut passer « au travers » de l'élément pour atteindre des contrôles qui pourraient être en-dessous/derrière.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -125,7 +123,7 @@ pointer-events: unset; </tbody> </table> -<p>L'extension de cette propriété aux éléments HTML, bien qu'elle fut présente dans les premiers brouillons de la spécification <em>CSS Basic User Interface Module Level 3</em>, a été remise à la spécification de <a class="external" href="https://wiki.csswg.org/spec/css4-ui#pointer-events"> niveau 4</a>.</p> +<p>L'extension de cette propriété aux éléments HTML, bien qu'elle fut présente dans les premiers brouillons de la spécification <em>CSS Basic User Interface Module Level 3</em>, a été remise à la spécification de <a href="https://wiki.csswg.org/spec/css4-ui#pointer-events"> niveau 4</a>.</p> <p>{{cssinfo}}</p> @@ -139,6 +137,6 @@ pointer-events: unset; <li>L'attribut SVG {{SVGAttr("pointer-events")}}</li> <li>L'attribut SVG {{SVGAttr("visibility")}}</li> <li>La propriété {{cssxref("user-select")}} qui contrôle lorsque l'utilisateur peut sélectionner du texte</li> - <li><a class="external" href="https://webkit.org/specs/PointerEventsProperty.html">« Spécification » WebKit pour étendre la propriété pointer-events</a> au contenu (X)HTML</li> + <li><a href="https://webkit.org/specs/PointerEventsProperty.html">« Spécification » WebKit pour étendre la propriété pointer-events</a> au contenu (X)HTML</li> <li><a href="http://www.thecssninja.com/javascript/pointer-events-60fps">Un défilement à 60fps en utilisant <code>pointer-events: none</code> (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/position/index.html b/files/fr/web/css/position/index.html index 848e6053cb..cb8cffc082 100644 --- a/files/fr/web/css/position/index.html +++ b/files/fr/web/css/position/index.html @@ -13,12 +13,10 @@ translation_of: Web/CSS/position <div>{{EmbedInteractiveExample("pages/css/position.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h3 id="Types_de_positionnement">Types de positionnement</h3> <ul> - <li>Un <strong>élément positionné</strong> est un élément dont la propriété de position <a href="/fr/docs/Web/CSS/Valeur_calculée">calculée</a> est <code>relative</code>, <code>absolute</code>, <code>fixed</code> ou <code>sticky</code>.</li> + <li>Un <strong>élément positionné</strong> est un élément dont la propriété de position <a href="/fr/docs/Web/CSS/computed_value">calculée</a> est <code>relative</code>, <code>absolute</code>, <code>fixed</code> ou <code>sticky</code>.</li> <li>Un <strong>élément positionné de façon relative</strong> est un élément dont la propriété de position calculée est <code>relative</code>. Dans ce cas, les propriétés {{cssxref("top")}} ou {{cssxref("bottom")}} indiquent le décalage vertical à appliquer et {{cssxref("left")}} ou {{cssxref("right")}} indiquent le décalage horizontal.</li> <li>Un <strong>élément positionné de façon absolue</strong> est un élément dont la propriété de position calculée est <code>absolute</code> ou <code>fixed</code>. Dans ce cas, les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("right")}} et {{cssxref("left")}} indiquent les distances entre les bords de l'élément et les bords du bloc englobant (c'est-à-dire l'ancêtre par rapport auquel l'élément est positionné). Si l'élément possède des marges, elles sont ajoutées aux décalages.</li> <li>Un <strong>élément positionné en adhérence</strong> est un élément dont la propriété de position calculée vaut <code>sticky</code>. Un tel élément se comporte comme un élément positionné de façon relative jusqu'à ce que son bloc englobant dépasse un seuil donné (par exemple fourni par la valeur de {{cssxref("top")}}) au sein du conteneur puis il se comporte ensuite comme un élément fixe jusqu'à atteindre le bord opposé du bloc englobant.</li> @@ -56,17 +54,13 @@ position: unset; <dt><code>static</code></dt> <dd>Comportement normal (par défaut). L'élément est alors positionné dans le flux avec sa position. Les propriétés {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("z-index")}} ne s'appliquent pas.</dd> <dt><code>relative</code></dt> - <dd>L'élément est positionné dans le flux normal du document puis décalé, par rapport à lui-même, selon les valeurs fournies par <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>. Le décalage n'a pas d'impact sur la position des éléments. Aussi, l'espace fourni à l'élément sur la page est le même que celui fourni avec <code>static</code>.</dd> - <dd>Cette valeur crée un nouveau <a href="/fr/docs/Glossaire/Contexte_d_empilement">contexte d'empilement</a> lorsque <code>z-index</code> ne vaut pas <code>auto</code>. L'effet de cette valeur n'est pas défini pour les éléments <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code> et <code>table-caption</code>.</dd> + <dd>L'élément est positionné dans le flux normal du document puis décalé, par rapport à lui-même, selon les valeurs fournies par <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>. Le décalage n'a pas d'impact sur la position des éléments. Aussi, l'espace fourni à l'élément sur la page est le même que celui fourni avec <code>static</code>. Cette valeur crée un nouveau <a href="/fr/docs/Glossary/Stacking_context">contexte d'empilement</a> lorsque <code>z-index</code> ne vaut pas <code>auto</code>. L'effet de cette valeur n'est pas défini pour les éléments <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code> et <code>table-caption</code>.</dd> <dt><code>absolute</code></dt> - <dd>L'élément est retiré du flux normal et aucun espace n'est créé pour l'élément sur la page. Il est ensuite positionné par rapport à son ancêtre le plus proche qui est positionné s'il y en a un ou par rapport au bloc englobant initial sinon. La position finale de l'élément est déterminée par les valeurs de <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>.</dd> - <dd>Cette valeur crée un nouveau <a href="/fr/docs/Glossaire/Contexte_d_empilement">contexte d'empilement</a> lorsque <code>z-index</code> ne vaut pas <code>auto</code>. Les éléments positionnés de façon absolue peuvent avoir des marges, ces marges ne fusionnent pas avec les autres marges.</dd> + <dd>L'élément est retiré du flux normal et aucun espace n'est créé pour l'élément sur la page. Il est ensuite positionné par rapport à son ancêtre le plus proche qui est positionné s'il y en a un ou par rapport au bloc englobant initial sinon. La position finale de l'élément est déterminée par les valeurs de <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>. Cette valeur crée un nouveau <a href="/fr/docs/Glossary/Stacking_context">contexte d'empilement</a> lorsque <code>z-index</code> ne vaut pas <code>auto</code>. Les éléments positionnés de façon absolue peuvent avoir des marges, ces marges ne fusionnent pas avec les autres marges.</dd> <dt><code>fixed</code></dt> - <dd>L'élément est retiré du flux normal et aucun espace n'est laissé pour l'élément. L'élément est positionné relativement au bloc englobant initial formé par la zone d'affichage (<em>viewport</em>), sauf si un des ancêtres a une propriété {{cssxref("transform")}}, {{cssxref("perspective")}} ou {{cssxref("filter")}} qui est différente de <code>none</code> (voir <a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">la spécification sur les transformations CSS</a>) ; dans ce cas, c'est l'élément ancêtre qui joue le rôle de bloc englobant. Cela empêche le défilement lorsque la page est parcourue (ou lors de l'impression, le positionne à cette position fixe pour <em>chaque page</em>). Cette valeur crée toujours un nouveau contexte d'empilement. Certains incohérences existent entre les navigateurs quant au rôle de <code>perspective</code> et <code>filter</code> pour la définition du bloc englobant. La valeur finale de l'élément est déterminée par les valeurs de <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>.</dd> - <dd>Cette valeur crée toujours un nouveau <a href="/fr/docs/Glossaire/Contexte_d_empilement">contexte d'empilement</a>. Pour les documents imprimés, cela se traduit par le placement de l'élément au même endroit pour <em>chacune des pages</em>.</dd> + <dd>L'élément est retiré du flux normal et aucun espace n'est laissé pour l'élément. L'élément est positionné relativement au bloc englobant initial formé par la zone d'affichage (<em>viewport</em>), sauf si un des ancêtres a une propriété {{cssxref("transform")}}, {{cssxref("perspective")}} ou {{cssxref("filter")}} qui est différente de <code>none</code> (voir <a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">la spécification sur les transformations CSS</a>) ; dans ce cas, c'est l'élément ancêtre qui joue le rôle de bloc englobant. Cela empêche le défilement lorsque la page est parcourue (ou lors de l'impression, le positionne à cette position fixe pour <em>chaque page</em>). Cette valeur crée toujours un nouveau contexte d'empilement. Certains incohérences existent entre les navigateurs quant au rôle de <code>perspective</code> et <code>filter</code> pour la définition du bloc englobant. La valeur finale de l'élément est déterminée par les valeurs de <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>. Cette valeur crée toujours un nouveau <a href="/fr/docs/Glossary/Stacking_context">contexte d'empilement</a>. Pour les documents imprimés, cela se traduit par le placement de l'élément au même endroit pour <em>chacune des pages</em>.</dd> <dt><code>sticky</code></dt> - <dd>La position de la boîte est calculée en fonction du flux normal du document. Ensuite, la boîte est décalée par rapport à son ancêtre de défilement le plus proche et par rapport à <a href="/fr/docs/Web/CSS/A_Propos_Du_Bloc_Conteneur">son bloc englobant</a> selon les valeurs de <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>. Dans tous les cas, y compris avec les éléments <code>table</code>, cela n'affecte pas la position des autres éléments.</dd> - <dd>Cette valeur entraîne toujours la création d'un nouveau <a href="/fr/docs/Glossaire/Contexte_d_empilement">contexte d'empilement</a>. On notera qu'un tel élément « adhèrera » à l'ancêtre le plus proche qui dispose d'un mécanisme de défilement (c'est-à-dire quand <code>overflow</code> vaut <code>hidden</code>, <code>scroll</code>, <code>auto</code> ou <code>overlay</code>) même si cet ancêtre n'est pas nécessairement l'ancêtre de défilement le plus proche : cette valeur ne fonctionnera pas dans un élément pour lequel la propriété vaut <code>overflow: hidden</code> ou <code>auto</code> (<a href="https://github.com/w3c/csswg-drafts/issues/865">cf.: cette <em>issue</em> GitHub</a>).</dd> + <dd>La position de la boîte est calculée en fonction du flux normal du document. Ensuite, la boîte est décalée par rapport à son ancêtre de défilement le plus proche et par rapport à <a href="/fr/docs/Web/CSS/Containing_block">son bloc englobant</a> selon les valeurs de <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>. Dans tous les cas, y compris avec les éléments <code>table</code>, cela n'affecte pas la position des autres éléments. Cette valeur entraîne toujours la création d'un nouveau <a href="/fr/docs/Glossary/Stacking_context">contexte d'empilement</a>. On notera qu'un tel élément « adhèrera » à l'ancêtre le plus proche qui dispose d'un mécanisme de défilement (c'est-à-dire quand <code>overflow</code> vaut <code>hidden</code>, <code>scroll</code>, <code>auto</code> ou <code>overlay</code>) même si cet ancêtre n'est pas nécessairement l'ancêtre de défilement le plus proche : cette valeur ne fonctionnera pas dans un élément pour lequel la propriété vaut <code>overflow: hidden</code> ou <code>auto</code> (<a href="https://github.com/w3c/csswg-drafts/issues/865">cf.: cette <em>issue</em> GitHub</a>).</dd> </dl> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -303,7 +297,7 @@ dd + dd { <p>Il faut s'assurer que les éléments positionnés avec <code>absolute</code> ou <code>fixed</code> ne masquent pas d'autre contenu sur la page lorsqu'on zoome sur la page afin d'augmenter la taille du texte.</p> <ul> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener"><em>Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0</em> (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/position_value/index.html b/files/fr/web/css/position_value/index.html index 8cd69cf9ff..5b6dd45473 100644 --- a/files/fr/web/css/position_value/index.html +++ b/files/fr/web/css/position_value/index.html @@ -14,7 +14,7 @@ original_slug: Web/CSS/Type_position <h2 id="Syntaxe">Syntaxe</h2> -<p>On peut définir un emplacement grâce à deux mots-clés avec chacun un décalage par rapport au côté correspondant à ce mot-clé. Un mot-clé représente un côté de la boîte ou la ligne du centre située entre les deux bords. Ce mot-clé sera <img alt="" src="https://mdn.mozillademos.org/files/12215/position_type.png" style="float: left; height: 230px; width: 362px;"><code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> ou <code>center</code> (ce dernier représente le milieu entre les côtés droit et gauche ou le milieu entre les côtés haut et bas selon le contexte).</p> +<p><img alt="" src="position_type.png">On peut définir un emplacement grâce à deux mots-clés avec chacun un décalage par rapport au côté correspondant à ce mot-clé. Un mot-clé représente un côté de la boîte ou la ligne du centre située entre les deux bords. Ce mot-clé sera <code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> ou <code>center</code> (ce dernier représente le milieu entre les côtés droit et gauche ou le milieu entre les côtés haut et bas selon le contexte).</p> <p>Le décalage peut être une valeur relative, exprimée en pourcentages (valeur de type {{cssxref("<percentage>")}} ou une valeur absolue. Les valeurs positives décalent vers la droite ou vers le bas. Les valeurs négatives décalent dans l'autre sens (vers la gauche ou vers le haut).</p> @@ -51,7 +51,7 @@ original_slug: Web/CSS/Type_position <h2 id="Interpolation">Interpolation</h2> -<p>Les valeurs des coordonnées en abscisses et en ordonnées sont interpolées indépendamment. La vitesse de l'interpolation est définie par la même fonction de temporisation ({{cssxref("<timing-function>")}}) et le point se déplacera donc sur une ligne.</p> +<p>Les valeurs des coordonnées en abscisses et en ordonnées sont interpolées indépendamment. La vitesse de l'interpolation est définie par la même fonction de temporisation ({{cssxref("easing-function")}}) et le point se déplacera donc sur une ligne.</p> <h2 id="Exemples">Exemples</h2> @@ -120,8 +120,8 @@ original_slug: Web/CSS/Type_position <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Valeurs_et_unités_CSS">Valeurs et unités en CSS</a></li> - <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Tutoriel - Introduction aux valeurs et unités CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Values_and_Units">Valeurs et unités en CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Tutoriel - Introduction aux valeurs et unités CSS</a></li> <li>{{cssxref("background-position")}}</li> <li>{{cssxref("radial-gradient","radial-gradient()")}}</li> <li>{{cssxref("conic-gradient","conic-gradient()")}}</li> diff --git a/files/fr/web/css/pseudo-classes/index.html b/files/fr/web/css/pseudo-classes/index.html index 8c7425003c..22ba65100c 100644 --- a/files/fr/web/css/pseudo-classes/index.html +++ b/files/fr/web/css/pseudo-classes/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/Pseudo-classes --- <div>{{CSSRef}}</div> -<p class="summary">Une <strong>pseudo-classe</strong> est un mot-clé qui peut être ajouté à un sélecteur afin d'indiquer l'état spécifique dans lequel l'élément doit être pour être ciblé par la déclaration. La pseudo-classe {{cssxref(":hover")}}, par exemple, permettra d'appliquer une mise en forme spécifique lorsque l'utilisateur survole l'élément ciblé par le sélecteur (changer la couleur d'un bouton par exemple).</p> +<p>Une <strong>pseudo-classe</strong> est un mot-clé qui peut être ajouté à un sélecteur afin d'indiquer l'état spécifique dans lequel l'élément doit être pour être ciblé par la déclaration. La pseudo-classe {{cssxref(":hover")}}, par exemple, permettra d'appliquer une mise en forme spécifique lorsque l'utilisateur survole l'élément ciblé par le sélecteur (changer la couleur d'un bouton par exemple).</p> <pre class="brush: css no-line-numbers">div:hover { background-color: #F89B4D; @@ -19,8 +19,8 @@ translation_of: Web/CSS/Pseudo-classes <p>Les pseudo-classes permettent d'appliquer un style à un élément non seulement en fonction de son contenu dans l'arbre du document mais aussi en fonction de facteurs externes (l'historique de navigation par exemple avec {{cssxref(":visited")}} ; le statut du contenu avec {{cssxref(":checked")}} ; la position de la souris {{cssxref(":hover")}}).</p> -<div class="blockIndicator note"> -<p><strong>Note:</strong> À la différence des pseudo-classes, <a href="/fr/docs/Web/CSS/Pseudo-%C3%A9l%C3%A9ments">les pseudo-éléments</a> peuvent être utilisés afin d'appliquer un style sur une certaine partie d'un élément.</p> +<div class="note"> +<p><strong>Note :</strong> À la différence des pseudo-classes, <a href="/fr/docs/Web/CSS/Pseudo-%C3%A9l%C3%A9ments">les pseudo-éléments</a> peuvent être utilisés afin d'appliquer un style sur une certaine partie d'un élément.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -34,7 +34,6 @@ translation_of: Web/CSS/Pseudo-classes <h2 id="Liste_des_pseudo-classes_standards">Liste des pseudo-classes standards</h2> -<div class="index" id="index"> <ul> <li>{{CSSxRef(":active")}}</li> <li>{{CSSxRef(":any-link")}} {{Experimental_Inline}}</li> @@ -97,7 +96,6 @@ translation_of: Web/CSS/Pseudo-classes <li>{{CSSxRef(":visited")}}</li> <li>{{CSSxRef(":where", ":where()")}} {{Experimental_Inline}}</li> </ul> -</div> <h2 id="Exemples">Exemples</h2> diff --git a/files/fr/web/css/pseudo-elements/index.html b/files/fr/web/css/pseudo-elements/index.html index eec809e01b..e25886b602 100644 --- a/files/fr/web/css/pseudo-elements/index.html +++ b/files/fr/web/css/pseudo-elements/index.html @@ -22,8 +22,8 @@ p::first-line { -<div class="blockIndicator note"> -<p><strong>Note:</strong> À la différence des pseudo-éléments, <a href="/fr/docs/Web/CSS/Pseudo-classes">les pseudo-classes</a> peuvent être utilisées afin de mettre en forme un élément en fonction de son état.</p> +<div class="note"> +<p><strong>Note :</strong> À la différence des pseudo-éléments, <a href="/fr/docs/Web/CSS/Pseudo-classes">les pseudo-classes</a> peuvent être utilisées afin de mettre en forme un élément en fonction de son état.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -38,7 +38,6 @@ p::first-line { <h2 id="Liste_des_pseudo-éléments">Liste des pseudo-éléments</h2> -<div class="index" id="index"> <ul> <li>{{CSSxRef("::after", "::after (:after)")}}</li> <li>{{CSSxRef("::backdrop")}} {{Experimental_Inline}}</li> @@ -54,7 +53,6 @@ p::first-line { <li>{{CSSxRef("::slotted", "::slotted()")}}</li> <li>{{CSSxRef("::spelling-error")}} {{Experimental_Inline}}</li> </ul> -</div> <h2 id="Exemples">Exemples</h2> diff --git a/files/fr/web/css/quotes/index.html b/files/fr/web/css/quotes/index.html index 968b934472..ca406df88d 100644 --- a/files/fr/web/css/quotes/index.html +++ b/files/fr/web/css/quotes/index.html @@ -12,9 +12,7 @@ translation_of: Web/CSS/quotes <p>La propriété <strong><code>quotes</code></strong> indique la façon dont les marques de citation sont affichées.</p> -<div>{{EmbedInteractiveExample("pages/css/quotes.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<div>{{EmbedInteractiveExample("pages/css/quotes.html")}}</div <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/ratio/index.html b/files/fr/web/css/ratio/index.html index 361f14cb36..cd2fc22936 100644 --- a/files/fr/web/css/ratio/index.html +++ b/files/fr/web/css/ratio/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/ratio --- <div>{{CSSRef}}</div> -<p>Le type de donnée CSS <strong><code><ratio></code></strong> permet de décrire les proportions <a href="/fr/docs/Web/CSS/Media_queries">dans les <em>media queries</em></a> (N.D.T. pour « requête média » qui est moins usité). entre deux valeurs sans unité.</p> +<p>Le type de donnée CSS <strong><code><ratio></code></strong> permet de décrire les proportions <a href="/fr/docs/Web/CSS/Media_Queries">dans les <em>media queries</em></a> (N.D.T. pour « requête média » qui est moins usité). entre deux valeurs sans unité.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -33,23 +33,23 @@ translation_of: Web/CSS/ratio </thead> <tbody> <tr> - <td><img alt="Ratio4_3.png" class="default internal" src="/@api/deki/files/5714/=Ratio4_3.png"></td> + <td><img src="ratio4_3.png"></td> <td><code>4/3</code></td> <td>Format traditionnel utilisé par les télévisions au XX<sup>e</sup> siècle.</td> </tr> <tr> - <td><img alt="Ratio16_9.png" src="/@api/deki/files/5711/=Ratio16_9.png"></td> + <td><img src="ratio16_9.png"></td> <td><code>16/9</code></td> <td>Format « moderne » des télévisions.</td> </tr> <tr> - <td><img alt="Ratio1_1.85.png" src="/@api/deki/files/5712/=Ratio1_1.85.png"></td> + <td><img src="ratio1_1.85.png"></td> <td><code>185/100</code> = <code>91/50</code><br> <em>(les numérateurs et dénominateurs décimaux ne sont pas autorisés)</em></td> <td>Le format le plus utilisé pour la projection de films depuis les années 1960.</td> </tr> <tr> - <td><img alt="Ratio1_2.39.png" src="/@api/deki/files/5713/=Ratio1_2.39.png"></td> + <td><img src="ratio1_2.39.png"></td> <td><code>239/100</code><br> <em>(les numérateurs et dénominateurs décimaux ne sont pas autorisés)</em></td> <td>Le format « large » utilisé pour projeter certains films (on parle de format anamorphique).</td> @@ -103,6 +103,6 @@ translation_of: Web/CSS/ratio <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="internal" href="/fr/docs/Web/CSS/Media_queries">Les <em>media queries</em> CSS</a></li> + <li><a href="/fr/docs/Web/CSS/Media_Queries">Les <em>media queries</em> CSS</a></li> <li><a href="/fr/docs/Web/CSS/@media/aspect-ratio">La caractéristique média aspect-ratio</a></li> </ul> diff --git a/files/fr/web/css/reference/index.html b/files/fr/web/css/reference/index.html index 8aa4af3b7a..8b41901dc5 100644 --- a/files/fr/web/css/reference/index.html +++ b/files/fr/web/css/reference/index.html @@ -4,7 +4,7 @@ slug: Web/CSS/Reference tags: - CSS - CSS Data Types - - 'I10n:priority' + - I10n:priority - Overview - Reference - Types CSS @@ -12,7 +12,7 @@ translation_of: Web/CSS/Reference --- <div>{{CSSRef}}</div> -<p>Cette <strong>référence CSS</strong> fournit un <strong><a href="#Index_des_mots-clés">index alphabétique</a></strong> de toutes les propriétés <a href="/fr/docs/Web/CSS">CSS</a> standards, des <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classes</a>, des <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-éléments</a>, des <a href="/fr/docs/Web/CSS/Types_CSS">types de données</a> et des <a href="/fr/docs/Web/CSS/Règles_@">règles @</a>. Vous pouvez également trouver une liste alphabétique de tous les <strong><a href="#Sélecteurs">sélecteurs CSS par type</a></strong> et une liste des <strong><a href="#Concepts">concepts clés de CSS</a></strong>. Enfin est inclus un bref sommaire de <strong><a href="#DOM-CSS_CSSOM">référence sur DOM-CSS / CSSOM</a></strong>.</p> +<p>Cette <strong>référence CSS</strong> fournit un <strong><a href="#index_des_mots-clés">index alphabétique</a></strong> de toutes les propriétés <a href="/fr/docs/Web/CSS">CSS</a> standards, des <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classes</a>, des <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-éléments</a>, des <a href="/fr/docs/Web/CSS/CSS_Types">types de données</a> et des <a href="/fr/docs/Web/CSS/At-rule">règles @</a>. Vous pouvez également trouver une liste alphabétique de tous les <strong><a href="#sélecteurs">sélecteurs CSS par type</a></strong> et une liste des <strong><a href="#concepts">concepts clés de CSS</a></strong>. Enfin est inclus un bref sommaire de <strong><a href="#dom-css_cssom">référence sur DOM-CSS / CSSOM</a></strong>.</p> <h2 id="Syntaxe_de_règle_basique">Syntaxe de règle basique</h2> @@ -34,7 +34,7 @@ translation_of: Web/CSS/Reference <var> [propriété </var><strong>:</strong> <var>valeur] [</var><strong>; </strong><var>liste-de-propriétés]</var> </pre> -<p>Voir aussi les <a href="#Sélecteurs"><em>sélecteurs</em></a>, <a href="#Pseudo-classes"><em>pseudo-classes</em></a>, et <em><a href="#Pseudo-éléments">pseudo-éléments</a></em> listés ci-dessous. La syntaxe des <em>valeurs</em> dépend du type de données attendu pour chaque <em>propriété</em> indiquée.</p> +<p>Voir aussi les <a href="#sélecteurs"><em>sélecteurs</em></a>, <a href="#pseudo-classes"><em>pseudo-classes</em></a>, et <em><a href="#pseudo-éléments">pseudo-éléments</a></em> listés ci-dessous. La syntaxe des <em>valeurs</em> dépend du type de données attendu pour chaque <em>propriété</em> indiquée.</p> <h4 id="Exemples_de_règle_de_style">Exemples de règle de style</h4> @@ -51,11 +51,11 @@ div.menu-bar li:hover > ul { <h3 id="Syntaxe_des_règles"><strong>Syntaxe des règles @</strong></h3> -<p>Comme la structure des règles @ varie grandement, veuillez consulter <a href="/fr/docs/Web/CSS/Règles_@">règle @</a> pour trouver la syntaxe que vous souhaitez.</p> +<p>Comme la structure des règles @ varie grandement, veuillez consulter <a href="/fr/docs/Web/CSS/At-rule">règle @</a> pour trouver la syntaxe que vous souhaitez.</p> <h2 id="Index_des_mots-clés"><strong>Index des mots-clés</strong></h2> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Les noms de propriétés de cet index n’incluent <strong>pas</strong> les <a href="/fr/docs/Web/CSS/CSS_Properties_Reference">noms de l’API DOM JavaScript</a> lorsqu’ils sont différents des noms standards CSS.</p> </div> @@ -63,18 +63,18 @@ div.menu-bar li:hover > ul { <h2 id="Sélecteurs">Sélecteurs</h2> -<p>Sont indiqués dans ce qui suit les divers <a href="/fr/docs/Web/CSS/Sélecteurs_CSS">sélecteurs</a>, qui permettent aux styles d'être appliqués de façon conditionnelle selon diverses caractéristiques des éléments présents dans le DOM.</p> +<p>Sont indiqués dans ce qui suit les divers <a href="/fr/docs/Web/CSS/CSS_Selectors">sélecteurs</a>, qui permettent aux styles d'être appliqués de façon conditionnelle selon diverses caractéristiques des éléments présents dans le DOM.</p> -<h3 id="Sélecteurs_simples"><a href="/fr/docs/Web/CSS/Sélecteurs_CSS#Les_sélecteurs_simples/fr/docs/Web/CSS/Sélecteurs_CSS">Sélecteurs simples</a></h3> +<h3 id="Sélecteurs_simples"><a href="/fr/docs/Web/CSS/CSS_Selectors#les_s%c3%a9lecteurs_simples/fr/docs/web/css/s%c3%a9lecteurs_css">Sélecteurs simples</a></h3> <p>Les sélecteurs simples sont des sélecteurs fondamentaux. Ce sont les sélecteurs les plus élémentaires qui sont fréquemment combinés pour créer d'autres sélecteurs plus complexes.</p> <ul> - <li><a href="/fr/docs/Web/CSS/Sélecteurs_de_type">Sélecteur de type</a> <code><var>nomElement</var></code></li> - <li><a href="/fr/docs/Web/CSS/Sélecteurs_de_classe">Sélecteur de classe</a> <code><strong>.</strong><var>nomClasse</var></code></li> - <li><a href="/fr/docs/Web/CSS/Sélecteurs_d_ID">Sélecteur d’identifiant</a> <code><strong>#</strong><var>nomID</var></code></li> - <li><a href="/fr/docs/Web/CSS/Sélecteurs_universels">Sélecteur universel</a> <code><strong>*</strong></code>, <code><var>ns</var><strong>|*</strong></code>, <code><strong>*|*</strong></code>, <code><strong>|*</strong></code></li> - <li><a href="/fr/docs/Web/CSS/Sélecteurs_d_attribut">Sélecteur d’attribut</a> <code><strong>[</strong><var>attr</var><strong>=</strong><var>valeur</var><strong>]</strong></code></li> + <li><a href="/fr/docs/Web/CSS/Type_selectors">Sélecteur de type</a> <code><var>nomElement</var></code></li> + <li><a href="/fr/docs/Web/CSS/Class_selectors">Sélecteur de classe</a> <code><strong>.</strong><var>nomClasse</var></code></li> + <li><a href="/fr/docs/Web/CSS/ID_selectors">Sélecteur d’identifiant</a> <code><strong>#</strong><var>nomID</var></code></li> + <li><a href="/fr/docs/Web/CSS/Universal_selectors">Sélecteur universel</a> <code><strong>*</strong></code>, <code><var>ns</var><strong>|*</strong></code>, <code><strong>*|*</strong></code>, <code><strong>|*</strong></code></li> + <li><a href="/fr/docs/Web/CSS/Attribute_selectors">Sélecteur d’attribut</a> <code><strong>[</strong><var>attr</var><strong>=</strong><var>valeur</var><strong>]</strong></code></li> </ul> <h3 id="Sélecteur_de_groupe">Sélecteur de groupe</h3> @@ -84,41 +84,34 @@ div.menu-bar li:hover > ul { <dd>Indique que les éléments des sélecteurs <code>A</code> et <code>B</code> doivent être sélectionnés. Il s'agit d'une méthode de groupement pour sélectionner des éléments selon plusieurs critères.</dd> </dl> -<h3 id="Combinateurs"><a href="/fr/docs/Web/CSS/Sélecteurs_CSS#Les_combinateurs">Combinateurs</a></h3> +<h3 id="Combinateurs"><a href="/fr/docs/Web/CSS/CSS_Selectors#les_combinateurs">Combinateurs</a></h3> <p>Les combinateurs sont des sélecteurs qui établissent une relation entre deux sélecteurs ou plus, tel que "A est un enfant de B" ou "A est adjacent à B".</p> <dl> - <dt><a href="/fr/docs/Web/CSS/Sélecteur_de_voisin_direct">Combinateur de voisin direct</a> <code><var>A</var> <strong>+</strong> <var>B</var></code></dt> + <dt><a href="/fr/docs/Web/CSS/Adjacent_sibling_combinator">Combinateur de voisin direct</a> <code><var>A</var> <strong>+</strong> <var>B</var></code></dt> <dd>Indique que les éléments sélectionnés par <code>A</code> et par <code>B</code> ont le même parent et que celui sélectionné par <code>B</code> suit immédiatement celui sélectionné par <code>A</code>.</dd> - <dt><a href="/fr/docs/Web/CSS/Sélecteurs_de_voisins_généraux">Combinateur de voisin général</a> <code><var>A</var> <strong>~</strong> <var>B</var></code></dt> + <dt><a href="/fr/docs/Web/CSS/General_sibling_combinator">Combinateur de voisin général</a> <code><var>A</var> <strong>~</strong> <var>B</var></code></dt> <dd>Indique que les éléments sélectionnés par <code>A</code> et par <code>B</code> ont le même parent et que celui sélectionné par <code>B</code> suit celui sélectionné par <code>A</code>, mais pas nécessairement immédiatement après lui.</dd> - <dt><a href="/fr/docs/Web/CSS/Sélecteurs_enfant">Combinateur d’enfant</a> <code><var>A</var> <strong>></strong> <var>B</var></code></dt> + <dt><a href="/fr/docs/Web/CSS/Child_combinator">Combinateur d’enfant</a> <code><var>A</var> <strong>></strong> <var>B</var></code></dt> <dd>Indique que l’élément sélectionné par <code>B</code> est un enfant direct de l’élément sélectionné par <code>A</code>.</dd> - <dt><a href="/fr/docs/Web/CSS/Sélecteurs_descendant">Combinateur de descendant</a> <code><var>A</var> <var>B</var></code></dt> + <dt><a href="/fr/docs/Web/CSS/Descendant_combinator">Combinateur de descendant</a> <code><var>A</var> <var>B</var></code></dt> <dd>Indique que l’élément sélectionné par <code>B</code> est un descendant de l’élément sélectionné par <code>A</code>, mais n’en est pas nécessairement un enfant direct.</dd> <dt><a href="/fr/docs/Web/CSS/Column_combinator">Combinateur de colonne</a> <code><var>A</var> <strong>||</strong> <var>B</var></code> {{Experimental_Inline}}</dt> <dd>Indique que l’élément sélectionné par <code>B</code> est situé dans la colonne de table indiquée par <code>A</code>. Les éléments qui s’étendent sur des colonnes multiples sont considérés comme étant membres de chacune de ces colonnes.</dd> </dl> -<h3 id="Pseudo-classes"><a href="/fr/docs/Web/CSS/Sélecteurs_CSS#Les_pseudo-classes">Pseudo-classes</a></h3> +<h3 id="Pseudo">Pseudo</h3> -<div class="index"> -<ul> - <li class="hidden">{{Page("/fr/docs/Web/CSS/Pseudo-classes", "index")}}</li> -</ul> -</div> - -<h3 id="Pseudo-éléments"><a href="/fr/docs/Web/CSS/Sélecteurs_CSS#Les_pseudo-éléments">Pseudo-éléments</a></h3> - -<div class="index"> -<ul> - <li class="hidden">{{Page("/fr/docs/Web/CSS/Pseudo-elements", "index")}}</li> -</ul> -</div> +<dl> + <dt><a href="/fr/docs/Web/CSS/Pseudo-classes">Pseudo-classes</a> <code>:</code></dt> + <dd>Définit un état spécial pour le ou les éléments ciblés.</dd> + <dt><a href="/fr/docs/Web/CSS/Pseudo-elements">Pseudo-éléments</a> <code>::</code></dt> + <dd>Représente des entités qui ne sont pas incluses en HTML.</dd> +</dl> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Une <a href="https://www.w3.org/TR/selectors/#overview">liste complète des sélecteurs</a> existe dans le module de spécification Selectors de niveau 4.</p> +<div class="callout"> +<p>See also <a href="https://www.w3.org/TR/selectors/#overview">Selectors in the Selectors Level 4 specification</a>.</p> </div> <h2 id="Concepts">Concepts</h2> @@ -126,40 +119,40 @@ div.menu-bar li:hover > ul { <h3 id="Syntaxe_et_sémantique">Syntaxe et sémantique</h3> <ul> - <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/La_syntaxe">Syntaxe CSS</a></li> - <li><a href="/fr/docs/Web/CSS/Règles_@">Règles @ (<em>at-rules</em>)</a></li> - <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage">Cascade</a></li> + <li><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured">Syntaxe CSS</a></li> + <li><a href="/fr/docs/Web/CSS/At-rule">Règles @ (<em>at-rules</em>)</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade</a></li> <li><a href="/fr/docs/Web/CSS/Comments">Commentaires</a></li> - <li><a href="/fr/docs/Glossaire/Descripteur_(CSS)">Descripteurs</a></li> - <li><a href="/fr/docs/Web/CSS/Héritage">Héritage</a></li> - <li><a href="/fr/docs/Web/CSS/Propriétés_raccourcies">Propriétés raccourcies</a></li> - <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage#Spécificité">Spécificité</a></li> - <li><a href="/fr/docs/Web/CSS/Syntaxe_de_définition_des_valeurs">Syntaxe de définition des valeurs</a></li> - <li><a href="/fr/docs/Web/CSS/Valeurs_et_unités_CSS">Unités et valeurs CSS</a></li> + <li><a href="/fr/docs/Glossary/Descriptor_(CSS)">Descripteurs</a></li> + <li><a href="/fr/docs/Web/CSS/inheritance">Héritage</a></li> + <li><a href="/fr/docs/Web/CSS/Shorthand_properties">Propriétés raccourcies</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#sp%c3%a9cificit%c3%a9">Spécificité</a></li> + <li><a href="/fr/docs/Web/CSS/Value_definition_syntax">Syntaxe de définition des valeurs</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Values_and_Units">Unités et valeurs CSS</a></li> </ul> <h3 id="Valeurs">Valeurs</h3> <ul> - <li><a href="/fr/docs/Web/CSS/valeur_reelle">Valeur réelle</a></li> - <li><a href="/fr/docs/Web/CSS/Valeur_calculée">Valeur calculée</a></li> - <li><a href="/fr/docs/Web/CSS/Valeur_initiale">Valeur initiale</a></li> - <li><a href="/fr/docs/Web/CSS/valeur_résolue">Valeur résolue</a></li> - <li><a href="/fr/docs/Web/CSS/Valeur_spécifiée">Valeur spécifiée</a></li> - <li><a href="/fr/docs/Web/CSS/Valeur_utilisée">Valeur utilisée</a></li> + <li><a href="/fr/docs/Web/CSS/actual_value">Valeur réelle</a></li> + <li><a href="/fr/docs/Web/CSS/computed_value">Valeur calculée</a></li> + <li><a href="/fr/docs/Web/CSS/initial_value">Valeur initiale</a></li> + <li><a href="/fr/docs/Web/CSS/resolved_value">Valeur résolue</a></li> + <li><a href="/fr/docs/Web/CSS/specified_value">Valeur spécifiée</a></li> + <li><a href="/fr/docs/Web/CSS/used_value">Valeur utilisée</a></li> </ul> <h3 id="Disposition">Disposition</h3> <ul> - <li><a href="/fr/docs/Web/CSS/Block_formatting_context">Contexte de formatage de bloc</a></li> - <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">Modèle de boîte</a></li> - <li><a href="/fr/docs/Web/CSS/A_Propos_Du_Bloc_Conteneur">Bloc englobant</a></li> - <li><a href="/fr/docs/Web/CSS/Mode_de_mise_en_page">Modes de disposition</a></li> - <li><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges">Fusion des marges</a></li> - <li><a href="/fr/docs/Web/CSS/Élément_remplacé">Éléments remplacés</a></li> - <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches">Contexte d'empilement</a></li> - <li><a href="/fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle">Modèle de mise en forme visuelle</a></li> + <li><a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">Contexte de formatage de bloc</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">Modèle de boîte</a></li> + <li><a href="/fr/docs/Web/CSS/Containing_block">Bloc englobant</a></li> + <li><a href="/fr/docs/Web/CSS/Layout_mode">Modes de disposition</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Fusion des marges</a></li> + <li><a href="/fr/docs/Web/CSS/Replaced_element">Éléments remplacés</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Contexte d'empilement</a></li> + <li><a href="/fr/docs/Web/CSS/Visual_formatting_model">Modèle de mise en forme visuelle</a></li> </ul> <h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2> @@ -167,7 +160,7 @@ div.menu-bar li:hover > ul { <h3 id="Principaux_types_dobjets">Principaux types d'objets</h3> <ul> - <li>{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}</li> + <li>{{DOMxRef("Document.styleSheets")}}</li> <li><code>{{DOMxRef("StyleSheetList", "styleSheets", "", 1)}}[i].{{DOMxRef("CSSRuleList", "cssRules", "", 1)}}</code></li> <li><code>cssRules[i].{{DOMxRef("CSSRule.cssText", "cssText", "", 1)}}</code> (sélecteur et style)</li> <li><code>cssRules[i].{{DOMxRef("CSSStyleRule.selectorText", "selectorText", "", 1)}}</code></li> @@ -187,7 +180,7 @@ div.menu-bar li:hover > ul { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Extensions_Mozilla">Extensions spécifiques de Mozilla à CSS</a> (préfixées avec <code>-moz-</code>)</li> - <li><a href="/fr/docs/Web/CSS/Reference/Extensions_WebKit">Extensions spécifiques de WebKit à CSS</a> (préfixées pour la plupart avec <code>-webkit-</code>)</li> - <li><a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">Extensions spécifiques de Microsoft à CSS</a> (préfixées pour la plupart avec <code>-ms-</code>)</li> + <li><a href="/fr/docs/Web/CSS/Mozilla_Extensions">Extensions spécifiques de Mozilla à CSS</a> (préfixées avec <code>-moz-</code>)</li> + <li><a href="/fr/docs/Web/CSS/WebKit_Extensions">Extensions spécifiques de WebKit à CSS</a> (préfixées pour la plupart avec <code>-webkit-</code>)</li> + <li><a href="/fr/docs/Web/CSS/Microsoft_Extensions">Extensions spécifiques de Microsoft à CSS</a> (préfixées pour la plupart avec <code>-ms-</code>)</li> </ul> diff --git a/files/fr/web/css/repeat()/index.html b/files/fr/web/css/repeat()/index.html index cea02f4230..e5657510f3 100644 --- a/files/fr/web/css/repeat()/index.html +++ b/files/fr/web/css/repeat()/index.html @@ -15,7 +15,7 @@ translation_of: Web/CSS/repeat() <p>Cette fonction peut être utilisée par les propriétés CSS {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}} relatives aux grilles.</p> -<pre class="brush: css no-line-numbers notranslate">/* Valeurs de type <track-repeat> */ +<pre class="brush: css no-line-numbers">/* Valeurs de type <track-repeat> */ repeat(4, 1fr) repeat(4, [col-start] 250px [col-end]) repeat(4, [col-start] 60% [col-end]) @@ -82,7 +82,7 @@ repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end]) <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[3] notranslate">#container { +<pre class="brush: css">#container { display: grid; grid-template-columns: repeat(2, 50px 1fr) 100px; grid-gap: 5px; @@ -101,7 +101,7 @@ repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end]) <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div id="container"> +<pre class="brush: html"><div id="container"> <div> Un élément qui mesure 50 pixels de large. </div> diff --git a/files/fr/web/css/resize/index.html b/files/fr/web/css/resize/index.html index e0054df978..e2cde42faa 100644 --- a/files/fr/web/css/resize/index.html +++ b/files/fr/web/css/resize/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/resize <div>{{EmbedInteractiveExample("pages/css/resize.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */ @@ -50,7 +48,9 @@ resize: unset; <dd>Selon les valeurs de {{cssxref("writing-mode")}} et {{cssxref("direction")}}, l'élément affiche un mécanisme pour que l'utilisateur puisse le redimensionner, horizontalement ou verticalement, dans la direction du flux en ligne.</dd> </dl> -<div class="note"><strong>Note :</strong> <code>resize</code> ne s'applique pas aux blocs dont la propriété {{cssxref("overflow")}} vaut <code>visible</code>.</div> +<div class="note"> + <p><strong>Note :</strong> <code>resize</code> ne s'applique pas aux blocs dont la propriété {{cssxref("overflow")}} vaut <code>visible</code>.</p> +</div> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> diff --git a/files/fr/web/css/resolution/index.html b/files/fr/web/css/resolution/index.html index 404a790051..46e7ea706a 100644 --- a/files/fr/web/css/resolution/index.html +++ b/files/fr/web/css/resolution/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/resolution --- <div>{{CSSRef}}</div> -<p>Le type de donnée CSS <strong><code><resolution></code></strong>, utilisé dans les <em><a href="/fr/docs/Web/CSS/Media_queries">media queries</a></em>, décrit la densité de pixels d'un appareil d'affichage, c'est-à-dire sa résolution.</p> +<p>Le type de donnée CSS <strong><code><resolution></code></strong>, utilisé dans les <em><a href="/fr/docs/Web/CSS/Media_Queries">media queries</a></em>, décrit la densité de pixels d'un appareil d'affichage, c'est-à-dire sa résolution.</p> <p>Les dimensions font référence aux unités CSS (un pixel CSS, un centimètre CSS, etc.) et non aux dimensions physiques.</p> @@ -22,13 +22,13 @@ translation_of: Web/CSS/resolution <h3 id="Unités">Unités</h3> <dl> - <dt><code><a name="dpi">dpi</a></code></dt> + <dt><code>dpi</code></dt> <dd>Cette unité représente le nombre de <a href="https://fr.wikipedia.org/wiki/Point_par_pouce">points par pouce</a>. Un écran compte habituellement 72 ou 96 ppi (dpi), tandis qu'un document imprimé en compte généralement un nombre beaucoup plus élevé. Puisque 1 pouce équivaut à 2,54 cm, <code>1 dpi ≈ 0,39 dpcm</code>.</dd> - <dt><code><a name="dpcm">dpcm</a></code></dt> + <dt><code>dpcm</code></dt> <dd>Cette unité représente le nombre de <a href="https://fr.wikipedia.org/wiki/Point_par_pouce#Tableau_de_conversion">points par centimètre</a>. Puisque 1 pouce équivaut à 2.54 cm, <code>1dpcm ≈ 2,54 dpi</code>.</dd> - <dt><code><a name="dppx">dppx</a></code></dt> - <dd>Cette unité représente le nombre de points par unité CSS <code>px</code>. Puisque le ratio entre les unités CSS <code class="css">in</code> et CSS <code class="css">px</code> vaut 1:96, <code class="css">1 dppx</code> est équivalent à <code class="css">96 dpi</code>, ce qui correspond à la résolution par défaut des images affichées en CSS tel que défini par {{cssxref("image-resolution")}}.</dd> - <dt><a id="x" name="x"><code>x</code></a></dt> + <dt><code>dppx</code></dt> + <dd>Cette unité représente le nombre de points par unité CSS <code>px</code>. Puisque le ratio entre les unités CSS <code>in</code> et CSS <code>px</code> vaut 1:96, <code>1 dppx</code> est équivalent à <code>96 dpi</code>, ce qui correspond à la résolution par défaut des images affichées en CSS tel que défini par {{cssxref("image-resolution")}}.</dd> + <dt><code>x</code></dt> <dd>Un alias pour <code>dppx</code>.</dd> </dl> @@ -43,7 +43,7 @@ translation_of: Web/CSS/resolution <p>Voici quelques exemples d'utilisation correcte de données de type <code><resolution></code> :</p> <pre class="brush: css">96dpi Usage correct : un {{cssxref("<number>")}} (ici un {{cssxref("<integer>")}}) suivi d'une unité. -@media print and (min-resolution: 300dpi) { ... } Usage correct dans le contexte d'une <a href="/fr/docs/CSS/Media_queries">media query</a>. +@media print and (min-resolution: 300dpi) { ... } Usage correct dans le contexte d'une <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries">media query</a>. </pre> <h3 id="Usages_incorrects">Usages incorrects</h3> @@ -120,6 +120,6 @@ ten dpi Incorrect : seules des expressions numériques sont acceptées. <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Media_queries">Les <em>media queries</em> CSS</a></li> + <li><a href="/fr/docs/Web/CSS/Media_Queries">Les <em>media queries</em> CSS</a></li> <li><a href="/fr/docs/Web/CSS/@media/resolution">La caractéristique média <code>resolution</code></a></li> </ul> diff --git a/files/fr/web/css/revert/index.html b/files/fr/web/css/revert/index.html index 7794fbac93..def309ccef 100644 --- a/files/fr/web/css/revert/index.html +++ b/files/fr/web/css/revert/index.html @@ -26,11 +26,11 @@ translation_of: Web/CSS/revert <p><code>revert</code> n'aura pas d'effet sur les éléments fils de l'élément ciblé (mais supprimera l'effet d'une règle du parent qui s'appliquerait indirectement aux enfants).</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> <code>revert</code> est une simple valeur, il est toujours possible de la surcharger par une autre avec une règle d'une <a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage#Spécificité">spécificité</a> supérieure.</p> </div> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Le mot-clé <code>revert</code> est différent de {{cssxref("initial")}} et ne doit pas être confondu avec ce dernier. {{cssxref("initial")}} utilise <a href="/fr/docs/Web/CSS/Valeur_initiale">la valeur initiale</a>, définie pour chaque propriété par les spécifications CSS. En revanche, les feuilles de style des agents utilisateurs définissent des valeurs par défaut selon les sélecteurs CSS. Par exemple, <a href="/fr/docs/Web/CSS/Valeur_initiale">la valeur initiale</a> de {{cssxref("display")}} est <code>inline</code> mais un agent utilisateur pourra définir les valeurs par défaut suivante dans sa feuille de style : <code>block</code> pour {{HTMLElement("div")}}, <code>table</code> pour {{HTMLElement("table")}} etc.</p> </div> diff --git a/files/fr/web/css/right/index.html b/files/fr/web/css/right/index.html index 8ac85f97e1..2d1f94619b 100644 --- a/files/fr/web/css/right/index.html +++ b/files/fr/web/css/right/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/right <div>{{EmbedInteractiveExample("pages/css/right.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>L'effet de la propriété <code>right</code> dépend de la façon dont l'élément est positionné (c'est-à-dire de la valeur de la propriété {{cssxref("position")}}) :</p> <ul> diff --git a/files/fr/web/css/rotate/index.html b/files/fr/web/css/rotate/index.html index 0ad8b2277d..591a0fd5a3 100644 --- a/files/fr/web/css/rotate/index.html +++ b/files/fr/web/css/rotate/index.html @@ -38,7 +38,7 @@ rotate: 1 1 1 90deg;</pre> <dd>Le nom de l'axe par rapport auquel on souhaite effectuer la rotation (<code>"x"</code>, "<code>y</code>" ou "<code>z"</code>), puis une valeur {{cssxref("<angle>")}} qui indique l'angle à appliquer pour la rotation. Cela est équivalent à l'une des fonctions <code>rotateX()</code>/<code>rotateY()</code>/<code>rotateZ()</code>.</dd> <dt>Un vecteur et l'angle associé</dt> <dd>Trois nombres (valeurs {{cssxref("<number>")}}) qui représentent une vecteur centré sur l'origine qui définit la ligne autour de laquelle on souhaite faire tourner l'élément puis une valeur {{cssxref("<angle>")}} qui indique l'angle de rotation. Cela est équivalent à la fonction <code>rotate3d()</code>.</dd> - <dt id="none"><code>none</code></dt> + <dt><code>none</code></dt> <dd>Cette valeur indique qu'aucune rotation ne devrait être appliquée.</dd> </dl> diff --git a/files/fr/web/css/row-gap/index.html b/files/fr/web/css/row-gap/index.html index dc90a53689..7133eec821 100644 --- a/files/fr/web/css/row-gap/index.html +++ b/files/fr/web/css/row-gap/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/row-gap <div>{{EmbedInteractiveExample("pages/css/grid-row-gap.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> La propriété {{cssxref("grid-row-gap")}} a d'abord été définie avec le module de spécification <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>. Cette propriété préfixée a ensuite été remplacée par <code>row-gap</code> dans le module <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">CSS Alignment</a> afin d'être généralisée à d'autres modes de disposition. Toutefois, à des fins de compatibilité envers les navigateurs qui n'implémentent pas encore la version non-préfixée, mieux vaut utiliser les deux versions.</p> </div> @@ -57,7 +55,7 @@ row-gap: unset; <h4 id="CSS">CSS</h4> -<pre class="brush: css; highlight[4]">#flexbox { +<pre class="brush: css">#flexbox { display: flex; flex-wrap: wrap; width: 300px; @@ -91,14 +89,12 @@ row-gap: unset; <h4 id="CSS_2">CSS</h4> -<div class="hidden"> -<pre class="brush: css">#grid { +<pre class="brush: css hidden">#grid { grid-row-gap: 20px; } </pre> -</div> -<pre class="brush: css; highlight[6]">#grid { +<pre class="brush: css">#grid { display: grid; height: 200px; grid-template-columns: 200px; diff --git a/files/fr/web/css/ruby-align/index.html b/files/fr/web/css/ruby-align/index.html index ac0f175cb5..51d72cbbe4 100644 --- a/files/fr/web/css/ruby-align/index.html +++ b/files/fr/web/css/ruby-align/index.html @@ -55,7 +55,7 @@ ruby-align: unset; <h3 id="Alignement_par_rapport_au_début_du_texte_de_base">Alignement par rapport au début du texte de base</h3> -<pre class="brush: html" style="display: none;"><ruby> +<pre class="brush: html hidden"><ruby> <rb>This is a long text to check</rb> <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby> @@ -71,7 +71,7 @@ ruby-align: unset; <h3 id="Alignement_par_rapport_au_centre">Alignement par rapport au centre</h3> -<pre class="brush: html" style="display: none;"><ruby> +<pre class="brush: html hidden"><ruby> <rb>This is a long text to check</rb> <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby> @@ -87,7 +87,7 @@ ruby-align: unset; <h3 id="Un_espace_supplémentaire_entre_les_éléments_ruby">Un espace supplémentaire entre les éléments ruby</h3> -<pre class="brush: html" style="display: none;"><ruby> +<pre class="brush: html hidden"><ruby> <rb>This is a long text to check</rb> <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby> diff --git a/files/fr/web/css/ruby-position/index.html b/files/fr/web/css/ruby-position/index.html index bd7ca3a8cb..a0b683a0e5 100644 --- a/files/fr/web/css/ruby-position/index.html +++ b/files/fr/web/css/ruby-position/index.html @@ -52,7 +52,7 @@ ruby-position: unset; <h3 id="Au-dessus_du_texte">Au-dessus du texte</h3> -<pre class="brush: html" style="display: none;"><ruby> +<pre class="brush: html hidden"><ruby> <rb>超電磁砲</rb> <rp>（</rp><rt>レールガン</rt><rp>）</rp> </ruby> @@ -68,7 +68,7 @@ ruby-position: unset; <h3 id="En-dessous_du_texte">En-dessous du texte</h3> -<pre class="brush: html" style="display: none;"><ruby> +<pre class="brush: html hidden"><ruby> <rb>超電磁砲</rb> <rp>（</rp><rt>レールガン</rt><rp>）</rp> </ruby> diff --git a/files/fr/web/css/scale/index.html b/files/fr/web/css/scale/index.html index 5b0f0ea731..87f30418cd 100644 --- a/files/fr/web/css/scale/index.html +++ b/files/fr/web/css/scale/index.html @@ -37,7 +37,7 @@ scale: 2 0.5 2;</pre> <dd>Deux longueurs ou pourcentages qui définissent respectivement les composantes horizontale et verticale de l'agrandissement/rétrécissement en deux dimensions. Cela est équivalent à la fonction <code>scale()</code> appelée avec ces deux arguments.</dd> <dt>Trois valeurs de longueur/pourcentage</dt> <dd>Trois longueurs ou pourcentages qui définissent respectivement les composantes horizontale, verticale et en profondeur de la mise à l'échelle sur trois dimensions. Cela est équivalent à la fonction <code>scale3d()</code> appelée avec ces trois arguments.</dd> - <dt id="none"><code>none</code></dt> + <dt><code>none</code></dt> <dd>Cette valeur indique qu'aucune mise à l'échelle ne devrait être appliquée.</dd> </dl> diff --git a/files/fr/web/css/scaling_of_svg_backgrounds/index.html b/files/fr/web/css/scaling_of_svg_backgrounds/index.html index 8e48618b9b..8abfc2fcc4 100644 --- a/files/fr/web/css/scaling_of_svg_backgrounds/index.html +++ b/files/fr/web/css/scaling_of_svg_backgrounds/index.html @@ -33,17 +33,16 @@ original_slug: Web/CSS/Redimensionnement_arrière-plans_SVG <p>Cette image ne possède ni dimension ni proportion. Quelle que soit sa taille, il n'y aura pas de ratio largeur/hauteur particulier. On a ici une image qui forme un dégradé, quelles que soient les dimensions et la proportion de l'écran.</p> -<p><img alt="no-dimensions-or-ratio.png" class="default internal" src="/@api/deki/files/5860/=no-dimensions-or-ratio.png"></p> - -<p><a href="/@api/deki/files/5864/=no-dimensions-or-ratio.svg">Fichier source SVG</a></p> +<p><img src="no-dimensions-or-ratio.png"></p> +<p><a href="https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3469/6587a382ffb2c944462a6b110b079496/no-dimensions-or-ratio.svg" title="no-dimensions-or-ratio.svg">Fichier SVG source</a></p> <h3 id="Image_sans_proportion_avec_une_dimension_fixée">Image sans proportion avec une dimension fixée</h3> <p>Cette image mesure 100 pixels de large mais n'a pas de hauteur ni de proportion intrinsèque. On a ainsi une bande d'arrière-plan qui peut être étirée sur toute la hauteur d'un bloc.</p> -<p><img alt="100px-wide-no-height-or-ratio.png" class="default internal" src="/@api/deki/files/5858/=100px-wide-no-height-or-ratio.png"></p> +<p><img src="100px-wide-no-height-or-ratio.png"></p> -<p><a href="/@api/deki/files/5863/=100px-wide-no-height-or-ratio.svg">Fichier source SVG</a></p> +<p><a href="https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3468/af73bea307a10ffe2559df42fad199e3/100px-wide-no-height-or-ratio.svg" title="100px-wide-no-height-or-ratio.svg">Fichier SVG source</a></p> <h3 id="Image_avec_une_dimension_fixée_et_des_proportions_intrinsèques">Image avec une dimension fixée et des proportions intrinsèques</h3> @@ -51,23 +50,25 @@ original_slug: Web/CSS/Redimensionnement_arrière-plans_SVG <p>On a ici un cas très proche de l'image pour laquelle on définit une largeur et une hauteur car, une fois qu'on a une dimension et une proportion, la deuxième dimension est implicite. Cela n'en reste pas moins un exemple utile.</p> -<p><img alt="100px-height-3x4-ratio.png" class="default internal" src="/@api/deki/files/5857/=100px-height-3x4-ratio.png"></p> +<p><img src="100px-height-3x4-ratio.png"></p> -<p><a href="/@api/deki/files/5862/=100px-height-3x4-ratio.svg">Fichier source SVG</a></p> +<p><a href="https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3467/fd0c534c506be06d52f0a954a59863a6/100px-height-3x4-ratio.svg" title="100px-height-3x4-ratio.svg">Fichier SVG source</a></p> <h3 id="Image_sans_largeur_ni_hauteur_mais_avec_des_proportions_intrinsèques">Image sans largeur ni hauteur mais avec des proportions intrinsèques</h3> <p>Cette image n'indique pas de hauteur ou de largeur mais un ratio intrinsèque de 1:1. On obtiendra toujours un carré (qui pourra être utilisé comme une icône) pour n'importe quelle taille : 32x32, 128x128, or 512x512.</p> -<p><img alt="no-dimensions-1x1-ratio.png" class="default internal" src="/@api/deki/files/5859/=no-dimensions-1x1-ratio.png"></p> +<p><img src="no-dimensions-1x1-ratio.png"></p> -<p><a href="/@api/deki/files/5861/=no-dimensions-1x1-ratio.svg">Fichier source SVG</a></p> +<p><a href="https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3466/a3398e03c058d99fb2b7837167cdbc26/no-dimensions-1x1-ratio.svg" title="no-dimensions-1x1-ratio.svg">Fichier SVG source</a></p> <h2 id="Exemples_de_redimensionnement">Exemples de redimensionnement</h2> <p>Appliquons maintenant différents redimensionnements sur ces images. Pour chacun des exemples qui suivent, les rectangles dessinés font 300 pixels de large et 200 pixels de haut. De plus, on utilise {{cssxref("background-repeat")}} avec <code>no-repeat</code> pour plus de clarté..</p> -<div class="note"><strong>Note :</strong> Les images montrées ci-après illustrent le rendu <strong>attendu</strong>. Les navigateurs peuvent ne pas produire le bon résultat.</div> +<div class="note"> + <p><strong>Note :</strong> Les images montrées ci-après illustrent le rendu <strong>attendu</strong>. Les navigateurs peuvent ne pas produire le bon résultat.</p> +</div> <h3 id="Indiquer_des_dimensions_fixées_sur_les_deux_axes">Indiquer des dimensions fixées sur les deux axes</h3> @@ -77,49 +78,49 @@ original_slug: Web/CSS/Redimensionnement_arrière-plans_SVG <p>Avec ces déclarations CSS :</p> -<pre class="brush: css notranslate">background: url(no-dimensions-or-ratio.svg); +<pre class="brush: css">background: url(no-dimensions-or-ratio.svg); background-size: 125px 175px; </pre> <p>On doit obtenir un résultat semblable à :</p> -<p><img alt="fixed-no-dimensions-or-ratio.png" class="default internal" src="/@api/deki/files/5868/=fixed-no-dimensions-or-ratio.png"></p> +<p><img src="fixed-no-dimensions-or-ratio.png"></p> <h4 id="SVG_source_Une_dimension_définie_et_aucune_proportion">SVG source : Une dimension définie et aucune proportion</h4> <p>Avec ces déclarations CSS :</p> -<pre class="brush: css notranslate">background: url(100px-wide-no-height-or-ratio.svg); +<pre class="brush: css">background: url(100px-wide-no-height-or-ratio.svg); background-size: 250px 150px; </pre> <p>On doit obtenir un résultat semblable à :</p> -<p><img alt="fixed-100px-wide-no-height-or-ratio.png" class="default internal" src="/@api/deki/files/5866/=fixed-100px-wide-no-height-or-ratio.png"></p> +<p><img src="fixed-100px-wide-no-height-or-ratio.png"></p> <h4 id="SVG_source_Une_dimension_définie_et_des_proportions_intrinsèques">SVG source : Une dimension définie et des proportions intrinsèques</h4> <p>Avec ces déclarations CSS :</p> -<pre class="brush: css notranslate">background: url(100px-height-3x4-ratio.svg); +<pre class="brush: css">background: url(100px-height-3x4-ratio.svg); background-size: 275px 125px; </pre> <p>On doit obtenir un résultat semblable à :</p> -<p><img alt="fixed-100px-height-3x4-ratio.png" class="default internal" src="/@api/deki/files/5865/=fixed-100px-height-3x4-ratio.png"></p> +<p><img src="fixed-100px-height-3x4-ratio.png"></p> <h4 id="SVG_source_Aucune_largeur_ni_hauteur_définie_mais_des_proportions_intrinsèques">SVG source : Aucune largeur ni hauteur définie mais des proportions intrinsèques</h4> <p>Avec ces déclarations CSS :</p> -<pre class="brush: css notranslate">background: url(no-dimensions-1x1-ratio.svg); +<pre class="brush: css">background: url(no-dimensions-1x1-ratio.svg); background-size: 250px 100px; </pre> <p>On doit obtenir un résultat semblable à :</p> -<p><img alt="fixed-no-dimensions-1x1-ratio.png" class="default internal" src="/@api/deki/files/5867/=fixed-no-dimensions-1x1-ratio.png"></p> +<p><img src="fixed-no-dimensions-1x1-ratio.png"></p> <h3 id="Utiliser_contain_ou_cover">Utiliser <code>contain</code> ou <code>cover</code></h3> @@ -131,25 +132,25 @@ background-size: 250px 100px; <p>Si une image n'a ni dimensions définie, ni proportions définies, les règles 2 ou 3 ne pourront pas s'appliquer. La règle 4 est donc utilisée et l'image couvre toute la zone (ce qui satisfait d'ailleurs les différentes contraintes).</p> -<pre class="brush: css notranslate">background: url(no-dimensions-or-ratio.svg); +<pre class="brush: css">background: url(no-dimensions-or-ratio.svg); background-size: contain; </pre> <p>Le résultat obtenu sera :</p> -<p><img alt="no-dimensions-or-ratio-contain.png" class="default internal" src="/@api/deki/files/5874/=no-dimensions-or-ratio-contain.png"></p> +<p><img src="no-dimensions-or-ratio-contain.png"></p> <h4 id="SVG_source_Une_dimension_définie_et_aucune_proportion_2">SVG source : Une dimension définie et aucune proportion</h4> <p>De même si l'image possède une dimension mais aucune proportion, la règle 4 sera appliquée : l'image est ainsi redimensionnée pour couvrir toute la zone.</p> -<pre class="brush: css notranslate">background: url(100px-wide-no-height-or-ratio.svg); +<pre class="brush: css">background: url(100px-wide-no-height-or-ratio.svg); background-size: contain; </pre> <p>Le résultat obtenu sera :</p> -<p><img alt="100px-wide-no-height-or-ratio-contain.png" class="default internal" src="/@api/deki/files/5871/=100px-wide-no-height-or-ratio-contain.png"></p> +<p><img src="100px-wide-no-height-or-ratio-contain.png"></p> <h4 id="SVG_source_Une_dimension_définie_et_des_proportions_intrinsèques_2">SVG source : Une dimension définie et des proportions intrinsèques</h4> @@ -157,25 +158,25 @@ background-size: contain; <h5 id="contain"><code>contain</code></h5> -<pre class="brush: css notranslate">background: url(100px-height-3x4-ratio.svg); +<pre class="brush: css">background: url(100px-height-3x4-ratio.svg); background-size: contain; </pre> <p>Le résultat obtenu sera :</p> -<p><img alt="100px-height-3x4-ratio-contain.png" class="default internal" src="/@api/deki/files/5869/=100px-height-3x4-ratio-contain.png"></p> +<p><img src="100px-height-3x4-ratio-contain.png"></p> <p>On voit ici que toute l'image est affichée et est contenue dans la boîte sans être rognée.</p> <h5 id="cover"><code>cover</code></h5> -<pre class="brush: css notranslate">background: url(100px-height-3x4-ratio.svg); +<pre class="brush: css">background: url(100px-height-3x4-ratio.svg); background-size: cover; </pre> <p>Le résultat obtenu sera :</p> -<p><img alt="100px-height-3x4-ratio-cover.png" class="default internal" src="/@api/deki/files/5870/=100px-height-3x4-ratio-cover.png"></p> +<p><img src="100px-height-3x4-ratio-cover.png"></p> <p>Dans ce cas, le ratio 3:4 est conservé et l'image est étirée Here, the 3:4 ratio is preserved while still stretching the image to fill the entire box. That causes the bottom of the image to be clipped away.</p> @@ -185,25 +186,25 @@ background-size: cover; <h5 id="contain_2"><code>contain</code></h5> -<pre class="brush: css notranslate">background: url(no-dimensions-1x1-ratio.svg); +<pre class="brush: css">background: url(no-dimensions-1x1-ratio.svg); background-size: contain; </pre> <p>Le résultat ressemblera à :</p> -<p><img alt="no-dimensions-1x1-ratio-contain.png" class="default internal" src="/@api/deki/files/5872/=no-dimensions-1x1-ratio-contain.png"></p> +<p><img src="no-dimensions-1x1-ratio-contain.png"></p> <p>On voit ici que l'image est redimensionnée à la plus petite taille tout en conservant le ratio 1:1.</p> <h5 id="cover_2"><code>cover</code></h5> -<pre class="brush: css notranslate">background: url(no-dimensions-1x1-ratio.svg); +<pre class="brush: css">background: url(no-dimensions-1x1-ratio.svg); background-size: cover; </pre> <p>Le résultat ressemblera à :</p> -<p><img alt="no-dimensions-1x1-ratio-cover.png" class="default internal" src="/@api/deki/files/5873/=no-dimensions-1x1-ratio-cover.png"></p> +<p><img src="no-dimensions-1x1-ratio-cover.png"></p> <p>Ici, l'image est dimensionnée afin de couvrir la plus grande surface avec le ratio 1:1.</p> @@ -215,25 +216,25 @@ background-size: cover; <p>Lorsque l'image n'a aucune proportion ni dimension, ce sera la dernière règle qui s'appliquera : l'image couvrira toute la surface de la zone.</p> -<pre class="brush: css notranslate">background: url(no-dimensions-or-ratio.svg); +<pre class="brush: css">background: url(no-dimensions-or-ratio.svg); background-size: auto auto; </pre> <p>Voici le résultat obtenu :</p> -<p><img alt="auto-no-dimensions-or-ratio.png" class="default internal" src="/@api/deki/files/5878/=auto-no-dimensions-or-ratio.png"></p> +<p><img src="auto-no-dimensions-or-ratio.png"></p> <h4 id="SVG_source_une_dimension_mais_aucune_proportion_intrinsèque">SVG source : une dimension mais aucune proportion intrinsèque</h4> <p>S'il n'y a aucune proportion définie mais qu'une dimension est fournie, la règle n°3 s'appliquera et l'image sera affichée avec ces dimensions.</p> -<pre class="brush: css notranslate">background: url(100px-wide-no-height-or-ratio.svg); +<pre class="brush: css">background: url(100px-wide-no-height-or-ratio.svg); background-size: auto auto; </pre> <p>Voici le résultat obtenu :</p> -<p><img alt="auto-100px-wide-no-height-or-ratio.png" class="default internal" src="/@api/deki/files/5876/=auto-100px-wide-no-height-or-ratio.png"></p> +<p><img src="auto-100px-wide-no-height-or-ratio.png"></p> <p>Ici, on voit que la largeur définie par le fichier SVG (100 pixels) est respectée. L'image s'étend sur toute la hauteur de la zone de l'arrière-plan car elle n'est pas définie (explicitement dans les déclarations ou intrinsèquement via l'image).</p> @@ -241,13 +242,13 @@ background-size: auto auto; <p>Si on dispose de proportions intrinsèques et d'une dimension fixée, les deux dimensions sont alors définies.</p> -<pre class="brush: css notranslate">background: url(100px-height-3x4-ratio.svg); +<pre class="brush: css">background: url(100px-height-3x4-ratio.svg); background-size: auto auto; </pre> <p>Le résultat sera le suivant :</p> -<p><img alt="auto-100px-height-3x4-ratio.png" class="default internal" src="/@api/deki/files/5875/=auto-100px-height-3x4-ratio.png"></p> +<p><img src="auto-100px-height-3x4-ratio.png"></p> <p>Cette image mesure 100 pixels de haut et possède des proportions intrinsèques avec un ratio de 3:4. La largeur vaut donc 75 pixels et c'est ainsi qu'elle est affichée avec <code>auto</code>.</p> @@ -255,13 +256,13 @@ background-size: auto auto; <p>Lorsqu'un ratio s'applique sans dimension, c'est la règle n°2 qui s'applique. L'image est affichée comme pour <code>contain</code>.</p> -<pre class="brush: css notranslate">background: url(no-dimensions-1x1-ratio.svg); +<pre class="brush: css">background: url(no-dimensions-1x1-ratio.svg); background-size: auto auto; </pre> <p>Le résultat ressemblera à :</p> -<p><img alt="auto-no-dimensions-1x1-ratio.png" class="default internal" src="/@api/deki/files/5877/=auto-no-dimensions-1x1-ratio.png"></p> +<p><img src="auto-no-dimensions-1x1-ratio.png"></p> <h3 id="Utiliser_auto_et_une_dimension_fixée">Utiliser <code>auto</code> et une dimension fixée</h3> @@ -271,11 +272,11 @@ background-size: auto auto; <p>Si l'image ne possède ni dimension ni proportion intrinsèque, c'est la règle 4 qui s'applique et les dimensions de la zone pour l'arrière-plan seront utilisées pour <code>auto</code>.</p> -<pre class="brush: css notranslate">background: url(no-dimensions-or-ratio.svg); +<pre class="brush: css">background: url(no-dimensions-or-ratio.svg); background-size: auto 140px; </pre> -<p><img alt="1auto-no-dimensions-or-ratio.png" class="default internal" src="/@api/deki/files/5881/=1auto-no-dimensions-or-ratio.png"></p> +<p><img src="1auto-no-dimensions-or-ratio.png"></p> <p>Ici, la largeur est déterminée grâce à la zone dédiée à l'arrière-plan (règle n°4) et la hauteur est indiquée via la feuille de style (140px).</p> @@ -283,19 +284,19 @@ background-size: auto 140px; <p>Si l'image possède une dimension implicite mais pas de ratio, la dimension définie sera utilisée selon la règle n°3 si elle vaut <code>auto</code> dans le code CSS.</p> -<pre class="brush: css notranslate">background: url(100px-wide-no-height-or-ratio.svg); +<pre class="brush: css">background: url(100px-wide-no-height-or-ratio.svg); background-size: 200px auto; </pre> -<p><img alt="100px-wide-no-height-or-ratio-length-auto.png" class="default internal" src="/@api/deki/files/5883/=100px-wide-no-height-or-ratio-length-auto.png"></p> +<p><img src="100px-wide-no-height-or-ratio-length-auto.png"></p> <p>Ici, la valeur de 200px fournie dans la feuille de style surcharge la valeur de 100px définie dans le fichier SVG. Puisqu'il n'y a aucune proportion intrinsèque ni hauteur de définie et qu'on utilise la valeur <code>auto</code>, l'image fera la même hauteur que la zone pour l'arrière-plan.</p> -<pre class="brush: css notranslate">background: url(100px-wide-no-height-or-ratio.svg); +<pre class="brush: css">background: url(100px-wide-no-height-or-ratio.svg); background-size: auto 125px; </pre> -<p><img alt="100px-wide-no-height-or-ratio-auto-length.png" class="default internal" src="/@api/deki/files/5882/=100px-wide-no-height-or-ratio-auto-length.png"></p> +<p><img src="100px-wide-no-height-or-ratio-auto-length.png"></p> <p>Ici, c'est la largeur qui vaut <code>auto</code> et ce sera donc la valeur définie dans l'image SVG (100px) qui sera utilisée. La hauteur est fixée à 125 pixels via la feuille de style.</p> @@ -303,11 +304,11 @@ background-size: auto 125px; <p>Lorsqu'une dimension est indiquée, la première règle s'applique et la dimension du fichier SVG est utilisée sauf si le CSS la redéfinit. Lorsqu'un ratio est indiqué, celui-ci est utilisé pour déterminer la deuxième dimension.</p> -<pre class="brush: css notranslate">background: url(100px-height-3x4-ratio.svg); +<pre class="brush: css">background: url(100px-height-3x4-ratio.svg); background-size: 150px auto; </pre> -<p><img alt="1auto-100px-height-3x4-ratio.png" class="default internal" src="/@api/deki/files/5879/=1auto-100px-height-3x4-ratio.png"></p> +<p><img src="1auto-100px-height-3x4-ratio.png"></p> <p>Ici, la hauteur de l'image a été surchargée pour valoir 150px. Les proportions intrinsèques permettent ensuite de définir la largeur (<code>auto</code> dans la feuille de style).</p> @@ -315,11 +316,11 @@ background-size: 150px auto; <p>Si aucune dimension n'est définie dans l'image SVG, ce sera celle du CSS qui sera appliquée. Les proportions intrinsèques sont ensuite utilisées pour déterminer l'autre dimension (selon la rgèle n°2).</p> -<pre class="brush: css notranslate">background: url(no-dimensions-1x1-ratio.svg); +<pre class="brush: css">background: url(no-dimensions-1x1-ratio.svg); background-size: 150px auto; </pre> -<p><img alt="1auto-no-dimensions-1x1-ratio.png" class="default internal" src="/@api/deki/files/5880/=1auto-no-dimensions-1x1-ratio.png"></p> +<p><img src="1auto-no-dimensions-1x1-ratio.png"></p> <p>La largeur est définie à 150 pixels via la feuille de style et la hauteur est calculée à partir de cette largeur en utilisant le ratio 1:1, elle vaudra donc 150px ce qui donnera le résultat ci-dessus.</p> diff --git a/files/fr/web/css/scroll-behavior/index.html b/files/fr/web/css/scroll-behavior/index.html index 0d144f612a..b36cc1c52b 100644 --- a/files/fr/web/css/scroll-behavior/index.html +++ b/files/fr/web/css/scroll-behavior/index.html @@ -16,8 +16,6 @@ translation_of: Web/CSS/scroll-behavior <div>{{EmbedInteractiveExample("pages/css/scroll-behavior.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les agents utilisateur peuvent choisir d'ignorer cette propriété. Lorsque cette propriété est indiquée sur l'élément <code>body</code>, elle ne se propage pas à la zone d'affichage (<em>viewport</em>).</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/scroll-margin-block-end/index.html b/files/fr/web/css/scroll-margin-block-end/index.html index 1ace40f8df..a74b5f68b8 100644 --- a/files/fr/web/css/scroll-margin-block-end/index.html +++ b/files/fr/web/css/scroll-margin-block-end/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/scroll-margin-block-end <div>{{EmbedInteractiveExample("pages/css/scroll-margin-block-end.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs de longueur */ diff --git a/files/fr/web/css/scroll-margin-block-start/index.html b/files/fr/web/css/scroll-margin-block-start/index.html index c41b7d29c2..7b3be15a1c 100644 --- a/files/fr/web/css/scroll-margin-block-start/index.html +++ b/files/fr/web/css/scroll-margin-block-start/index.html @@ -14,9 +14,6 @@ translation_of: Web/CSS/scroll-margin-block-start <div>{{EmbedInteractiveExample("pages/css/scroll-margin-block-start.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs de longueur */ diff --git a/files/fr/web/css/scroll-margin-block/index.html b/files/fr/web/css/scroll-margin-block/index.html index 354b01a2e3..b6dc166495 100644 --- a/files/fr/web/css/scroll-margin-block/index.html +++ b/files/fr/web/css/scroll-margin-block/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/scroll-margin-block <div>{{EmbedInteractiveExample("pages/css/scroll-margin-block.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les valeurs des marges de défilement correspondent aux décalages entre la zone qui est utilisée pour définir les limites du défilement de la boîtes et la zone de défilement normale (<em>snapport</em>). La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/scroll-margin-bottom/index.html b/files/fr/web/css/scroll-margin-bottom/index.html index a85df0779b..0986de2acb 100644 --- a/files/fr/web/css/scroll-margin-bottom/index.html +++ b/files/fr/web/css/scroll-margin-bottom/index.html @@ -13,10 +13,6 @@ translation_of: Web/CSS/scroll-margin-bottom <div>{{EmbedInteractiveExample("pages/css/scroll-margin-bottom.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs de longueur */ diff --git a/files/fr/web/css/scroll-margin-inline-end/index.html b/files/fr/web/css/scroll-margin-inline-end/index.html index 6dc94a9c6a..18711e98e7 100644 --- a/files/fr/web/css/scroll-margin-inline-end/index.html +++ b/files/fr/web/css/scroll-margin-inline-end/index.html @@ -14,9 +14,6 @@ translation_of: Web/CSS/scroll-margin-inline-end <div>{{EmbedInteractiveExample("pages/css/scroll-margin-inline-end.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs de longueur */ diff --git a/files/fr/web/css/scroll-margin-inline-start/index.html b/files/fr/web/css/scroll-margin-inline-start/index.html index a560718073..4df15ab81d 100644 --- a/files/fr/web/css/scroll-margin-inline-start/index.html +++ b/files/fr/web/css/scroll-margin-inline-start/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/scroll-margin-inline-start <div>{{EmbedInteractiveExample("pages/css/scroll-margin-inline-start.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs de longueur */ diff --git a/files/fr/web/css/scroll-margin-left/index.html b/files/fr/web/css/scroll-margin-left/index.html index 0cfcdbb86b..0dfa5d2da7 100644 --- a/files/fr/web/css/scroll-margin-left/index.html +++ b/files/fr/web/css/scroll-margin-left/index.html @@ -13,9 +13,6 @@ translation_of: Web/CSS/scroll-margin-left <div>{{EmbedInteractiveExample("pages/css/scroll-margin-left.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs de longueur */ diff --git a/files/fr/web/css/scroll-margin-right/index.html b/files/fr/web/css/scroll-margin-right/index.html index 88e47ad18c..40c8d6a091 100644 --- a/files/fr/web/css/scroll-margin-right/index.html +++ b/files/fr/web/css/scroll-margin-right/index.html @@ -13,9 +13,6 @@ translation_of: Web/CSS/scroll-margin-right <div>{{EmbedInteractiveExample("pages/css/scroll-margin-right.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs de longueur */ diff --git a/files/fr/web/css/scroll-margin-top/index.html b/files/fr/web/css/scroll-margin-top/index.html index c97d727a70..4224a5fa9d 100644 --- a/files/fr/web/css/scroll-margin-top/index.html +++ b/files/fr/web/css/scroll-margin-top/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/scroll-margin-top <div>{{EmbedInteractiveExample("pages/css/scroll-margin-top.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs de longueur */ diff --git a/files/fr/web/css/scroll-margin/index.html b/files/fr/web/css/scroll-margin/index.html index 726be65991..e26d030e58 100644 --- a/files/fr/web/css/scroll-margin/index.html +++ b/files/fr/web/css/scroll-margin/index.html @@ -13,9 +13,6 @@ translation_of: Web/CSS/scroll-margin <p>La propriété <code>scroll-margin</code> est une propriété raccourcie qui permet de définir l'ensemble des propriétés <code>scroll-margin-top</code>, <code>scroll-margin-left</code>, <code>scroll-margin-bottom</code> et <code>scroll-margin-right</code> (de la même façon que la propriété <code>margin</code> définit les différents côtés des marges).</p> <div>{{EmbedInteractiveExample("pages/css/scroll-margin.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les valeurs de <code>scroll-margin</code> correspondent aux décalages entre la zone qui est utilisée pour définir les limites du défilement de la boîtes et la zone de défilement normale (<em>snapport</em>). La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/scroll-padding-block-end/index.html b/files/fr/web/css/scroll-padding-block-end/index.html index 72378e2c4f..611ab1bdd8 100644 --- a/files/fr/web/css/scroll-padding-block-end/index.html +++ b/files/fr/web/css/scroll-padding-block-end/index.html @@ -16,10 +16,6 @@ translation_of: Web/CSS/scroll-padding-block-end <div>{{EmbedInteractiveExample("pages/css/scroll-padding-block-end.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/scroll-padding-block-start/index.html b/files/fr/web/css/scroll-padding-block-start/index.html index f8687498fe..5d844f73ef 100644 --- a/files/fr/web/css/scroll-padding-block-start/index.html +++ b/files/fr/web/css/scroll-padding-block-start/index.html @@ -16,10 +16,6 @@ translation_of: Web/CSS/scroll-padding-block-start <div>{{EmbedInteractiveExample("pages/css/scroll-padding-block-start.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/scroll-padding-block/index.html b/files/fr/web/css/scroll-padding-block/index.html index 448fc5ae5b..4e7e1f9fed 100644 --- a/files/fr/web/css/scroll-padding-block/index.html +++ b/files/fr/web/css/scroll-padding-block/index.html @@ -14,9 +14,6 @@ translation_of: Web/CSS/scroll-padding-block <p>La propriété <code><strong>scroll-padding-block</strong></code> est une propriété raccourcie qui permet de définir le remplissage, sur l'axe de bloc, entre l'élément et la zone de défilement. Autrement dit, elle permet de définir <code>scroll-padding-block-end</code> et <code>scroll-padding-block-start</code>.</p> <div>{{EmbedInteractiveExample("pages/css/scroll-padding-block.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/scroll-padding-bottom/index.html b/files/fr/web/css/scroll-padding-bottom/index.html index 2fab84e198..d592b7a908 100644 --- a/files/fr/web/css/scroll-padding-bottom/index.html +++ b/files/fr/web/css/scroll-padding-bottom/index.html @@ -15,10 +15,6 @@ translation_of: Web/CSS/scroll-padding-bottom <div>{{EmbedInteractiveExample("pages/css/scroll-padding-bottom.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/scroll-padding-inline-end/index.html b/files/fr/web/css/scroll-padding-inline-end/index.html index 7c840c2e1f..f85b1011ab 100644 --- a/files/fr/web/css/scroll-padding-inline-end/index.html +++ b/files/fr/web/css/scroll-padding-inline-end/index.html @@ -16,9 +16,6 @@ translation_of: Web/CSS/scroll-padding-inline-end <div>{{EmbedInteractiveExample("pages/css/scroll-padding-inline-end.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/scroll-padding-inline-start/index.html b/files/fr/web/css/scroll-padding-inline-start/index.html index ddf0641a80..554c8f1ae2 100644 --- a/files/fr/web/css/scroll-padding-inline-start/index.html +++ b/files/fr/web/css/scroll-padding-inline-start/index.html @@ -16,10 +16,6 @@ translation_of: Web/CSS/scroll-padding-inline-start <div>{{EmbedInteractiveExample("pages/css/scroll-padding-inline-start.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/scroll-padding-inline/index.html b/files/fr/web/css/scroll-padding-inline/index.html index fe625af647..3aadefb3d9 100644 --- a/files/fr/web/css/scroll-padding-inline/index.html +++ b/files/fr/web/css/scroll-padding-inline/index.html @@ -15,9 +15,6 @@ translation_of: Web/CSS/scroll-padding-inline <div>{{EmbedInteractiveExample("pages/css/scroll-padding-inline.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/scroll-padding-left/index.html b/files/fr/web/css/scroll-padding-left/index.html index 31c4412dbc..92133375ec 100644 --- a/files/fr/web/css/scroll-padding-left/index.html +++ b/files/fr/web/css/scroll-padding-left/index.html @@ -15,10 +15,6 @@ translation_of: Web/CSS/scroll-padding-left <div>{{EmbedInteractiveExample("pages/css/scroll-padding-left.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/scroll-padding-right/index.html b/files/fr/web/css/scroll-padding-right/index.html index c2fa824567..5640c3bcd9 100644 --- a/files/fr/web/css/scroll-padding-right/index.html +++ b/files/fr/web/css/scroll-padding-right/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/scroll-padding-right <div>{{EmbedInteractiveExample("pages/css/scroll-padding-right.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/scroll-padding-top/index.html b/files/fr/web/css/scroll-padding-top/index.html index 9a14746299..0239142642 100644 --- a/files/fr/web/css/scroll-padding-top/index.html +++ b/files/fr/web/css/scroll-padding-top/index.html @@ -15,9 +15,6 @@ translation_of: Web/CSS/scroll-padding-top <div>{{EmbedInteractiveExample("pages/css/scroll-padding-top.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/scroll-padding/index.html b/files/fr/web/css/scroll-padding/index.html index 199bc9cea5..4cc7897009 100644 --- a/files/fr/web/css/scroll-padding/index.html +++ b/files/fr/web/css/scroll-padding/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/scroll-padding <div>{{EmbedInteractiveExample("pages/css/scroll-padding.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les propriétés <code>scroll-padding-*</code> permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/scroll-snap-align/index.html b/files/fr/web/css/scroll-snap-align/index.html index a19eb9da69..713109b208 100644 --- a/files/fr/web/css/scroll-snap-align/index.html +++ b/files/fr/web/css/scroll-snap-align/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/scroll-snap-align <p>La propriété <strong><code>scroll-snap-align</code></strong> définit la position de la boîte d'accroche (<em>snap positions</em>) comme un alignement entre la zone d'accroche et le conteneur (la boîte de défilement de l'élément). Les deux valeurs fournies à cette propriété s'appliquent respectivement à l'axe de bloc et à l'axe en ligne. Lorsqu'une seule valeur est fournie, la seconde prendra par défaut la valeur de la première.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="brush: css">/* Valeurs avec un mot-clé */ scroll-snap-align: none; @@ -24,7 +24,7 @@ scroll-snap-align: initial; scroll-snap-align: unset; </pre> -<h3 id="Values" name="Values">Valeurs</h3> +<h3 id="Values">Valeurs</h3> <dl> <dt><code>none</code></dt> @@ -66,6 +66,6 @@ scroll-snap-align: unset; <p>{{Compat("css.properties.scroll-snap-align")}}</p> -<div class="blockIndicator warning"> -<p><strong>Attention !</strong> Pour Safari, la syntaxe utilisant les deux valeurs intervertit les deux valeurs (la première cible l'alignement en ligne et la seconde l'alignement en bloc). Voir <a href="https://bugs.webkit.org/show_bug.cgi?id=191865">le bug n°191865</a>.</p> +<div class="warning"> +<p><strong>Attention :</strong> Pour Safari, la syntaxe utilisant les deux valeurs intervertit les deux valeurs (la première cible l'alignement en ligne et la seconde l'alignement en bloc). Voir <a href="https://bugs.webkit.org/show_bug.cgi?id=191865">le bug n°191865</a>.</p> </div> diff --git a/files/fr/web/css/scroll-snap-type/index.html b/files/fr/web/css/scroll-snap-type/index.html index a6e4473b78..7e2c8520c4 100644 --- a/files/fr/web/css/scroll-snap-type/index.html +++ b/files/fr/web/css/scroll-snap-type/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/scroll-snap-type <div>{{EmbedInteractiveExample("pages/css/scroll-snap-type.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La gestion précise des animations et de la physique pour respecter ces points d'accroche n'est pas décrite par cette propriété et est laissée à la discrétion de l'agent utilisateur.</p> <pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */ diff --git a/files/fr/web/css/scrollbar-color/index.html b/files/fr/web/css/scrollbar-color/index.html index b150656878..a15e992993 100644 --- a/files/fr/web/css/scrollbar-color/index.html +++ b/files/fr/web/css/scrollbar-color/index.html @@ -13,7 +13,6 @@ translation_of: Web/CSS/scrollbar-color <p>{{EmbedInteractiveExample("pages/css/scrollbar-color.html")}}</p> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/scrollbar-width/index.html b/files/fr/web/css/scrollbar-width/index.html index f0ac30fe71..c39f16f385 100644 --- a/files/fr/web/css/scrollbar-width/index.html +++ b/files/fr/web/css/scrollbar-width/index.html @@ -13,9 +13,6 @@ translation_of: Web/CSS/scrollbar-width <p>{{EmbedInteractiveExample("pages/css/scrollbar-width.html")}}</p> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css">/* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/shape-image-threshold/index.html b/files/fr/web/css/shape-image-threshold/index.html index 5efb59cee7..61b0f75207 100644 --- a/files/fr/web/css/shape-image-threshold/index.html +++ b/files/fr/web/css/shape-image-threshold/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/shape-image-threshold <div>{{EmbedInteractiveExample("pages/css/shape-image-threshold.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Touts les pixels dont la composante alpha est supérieure à ce seuil seront retenus pour délimiter les contours de la formes. Une valeur de 0.5 indiquera par exemple qu'on prend la forme qui englobe tous les pixels dont l'opacité est supérieure à 50%.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -47,7 +45,7 @@ shape-image-threshold: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; hightlight[9]">#gradient-shape { +<pre class="brush: css">#gradient-shape { width: 150px; height: 150px; float: left; @@ -108,7 +106,7 @@ shape-image-threshold: unset; <ul> <li><a href="/fr/docs/Web/CSS/CSS_Shapes">Les formes CSS</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Aperçu_formes_CSS">Un aperçu des formes CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">Un aperçu des formes CSS</a></li> <li>{{cssxref("<basic-shape>")}}</li> <li>{{cssxref("shape-outside")}}</li> <li>{{cssxref("shape-margin")}}</li> diff --git a/files/fr/web/css/shape-margin/index.html b/files/fr/web/css/shape-margin/index.html index bb1c36fd2d..7c382292a1 100644 --- a/files/fr/web/css/shape-margin/index.html +++ b/files/fr/web/css/shape-margin/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/shape-margin <div>{{EmbedInteractiveExample("pages/css/shape-margin.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La marge permet d'ajuster la distance entre le contour de la forme (l'élément flottant) et le contenu autour.</p> <pre class="brush:css no-line-numbers">/* Valeur de longueur */ diff --git a/files/fr/web/css/shape-outside/index.html b/files/fr/web/css/shape-outside/index.html index 529b4c5e07..477ed8e018 100644 --- a/files/fr/web/css/shape-outside/index.html +++ b/files/fr/web/css/shape-outside/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/shape-outside <div>{{EmbedInteractiveExample("pages/css/shape-outside.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ @@ -54,8 +52,7 @@ shape-outside: unset; <dt><code><basic-shape></code></dt> <dd>Une valeur de type {{cssxref("<basic-shape>")}}. La forme est calculée selon une valeur parmi <code><a href="/fr/docs/Web/CSS/basic-shape#inset()">inset()</a></code>, <code><a href="/fr/docs/Web/CSS/basic-shape#circle()">circle()</a></code>, <code><a href="/fr/docs/Web/CSS/basic-shape#ellipse()">ellipse()</a></code>, ou <code><a href="/fr/docs/Web/CSS/basic-shape#polygon()">polygon()</a></code>. Si une valeur <code><shape-box></code> est fournie, cela définira la boîte de référence dans laquelle appliquée la forme définie avec la fonction <code><basic-shape></code>. Si <code><shape-box></code> n'est pas fournie, la valeur par défaut sera '<code>margin-box</code>'.</dd> <dt><code><image></code></dt> - <dd>La forme est extraite et calculée à partir du canal alpha de l'image {{cssxref("image")}} en utilisant l propriété {{cssxref("shape-image-threshold")}}.</dd> - <dd>Les agents utilisateurs doivent utiliser la méthode <code>fetch</code>, éventuellement avec CORS pour les URL utilisées dans <code>shape-outside</code>. Lors de l'accès à la ressource, les agents utilisateurs doivent utiliser le mode Anonymous et définir la source du <em>referrer</em> comme l'URL de la feuille de style, l'origine de l'URL doit être celle du document. S'il y a des erreurs réseau empêchant de récupérer l'image, l'effet sera le même que celui obtenu avec la valeur <code><strong>none</strong></code>.</dd> + <dd>La forme est extraite et calculée à partir du canal alpha de l'image {{cssxref("image")}} en utilisant l propriété {{cssxref("shape-image-threshold")}}. Les agents utilisateurs doivent utiliser la méthode <code>fetch</code>, éventuellement avec CORS pour les URL utilisées dans <code>shape-outside</code>. Lors de l'accès à la ressource, les agents utilisateurs doivent utiliser le mode Anonymous et définir la source du <em>referrer</em> comme l'URL de la feuille de style, l'origine de l'URL doit être celle du document. S'il y a des erreurs réseau empêchant de récupérer l'image, l'effet sera le même que celui obtenu avec la valeur <code><strong>none</strong></code>.</dd> </dl> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -91,7 +88,7 @@ shape-outside: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[13,14,21,22]">.main { +<pre class="brush: css">.main { width: 530px; } @@ -155,10 +152,10 @@ p { <ul> <li><a href="/fr/docs/Web/CSS/CSS_Shapes">Les formes CSS : le module de spécification <em>CSS Shapes</em></a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Aperçu_formes_CSS">Un aperçu des formes CSS</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Créer_formes_boîtes">Créer des formes à partir des boîtes</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Formes_simples">Les formes simples : le type de donnée <code><basic-shape></code></a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Générer_formes_images">Créer des formes à partir d'images</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">Un aperçu des formes CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Shapes/From_box_values">Créer des formes à partir des boîtes</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Basic_Shapes">Les formes simples : le type de donnée <code><basic-shape></code></a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">Créer des formes à partir d'images</a></li> <li>{{cssxref("<basic-shape>")}}</li> <li>{{cssxref("shape-margin")}}</li> <li>{{cssxref("shape-image-threshold")}}</li> diff --git a/files/fr/web/css/shape/index.html b/files/fr/web/css/shape/index.html index 844883ab78..ced200af32 100644 --- a/files/fr/web/css/shape/index.html +++ b/files/fr/web/css/shape/index.html @@ -25,7 +25,7 @@ translation_of: Web/CSS/shape <h4 id="Valeurs">Valeurs</h4> -<p><img alt="rect.png" class="internal rwrap" src="/@api/deki/files/5730/=rect.png" style="float: right;"></p> +<p><img alt="rect.png" src="rect.png"></p> <dl> <dt><code><em>haut</em></code></dt> @@ -49,30 +49,18 @@ translation_of: Web/CSS/shape <h2 id="Interpolation">Interpolation</h2> -<p>Les valeurs de type <code><shape></code> sont des rectangles qui peuvent être interpolées lors des animations. Pour ces valeurs, l'interpolation s'effectue en interpolant chacune des valeurs <code>haut</code>, <code>droite</code>, <code>bas</code> et <code>gauche</code> comme des nombres réels (à virgule flottante). La vitesse de l'interpolation est définie grâce à <a href="/fr/docs/Web/CSS/timing-function">la fonction de temporisation</a> associée à l'animation.</p> +<p>Les valeurs de type <code><shape></code> sont des rectangles qui peuvent être interpolées lors des animations. Pour ces valeurs, l'interpolation s'effectue en interpolant chacune des valeurs <code>haut</code>, <code>droite</code>, <code>bas</code> et <code>gauche</code> comme des nombres réels (à virgule flottante). La vitesse de l'interpolation est définie grâce à <a href="/fr/docs/Web/CSS/easing-function">la fonction de temporisation</a> associée à l'animation.</p> <h2 id="Exemples">Exemples</h2> -<h3 id="CSS">CSS</h3> +<h3 id="exemple_illustrant_un_usage_correct_de_la_fonction_rect">Exemple illustrant un usage correct de la fonction rect()</h3> -<pre class="brush:css">.exemple { - position: absolute; - top: 0px; - left: 360px; - clip: rect(0px, 175px, 113px, 0px); +<pre class="brush: css"> +img.clip04 { + clip: rect(10px, 20px, 20px, 10px); } </pre> -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p> - <img class="exemple" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Rogné en haut à gauche"> -</p></pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples","120","120")}}</p> - <h2 id="Spécifications">Spécifications</h2> <table class="standard-table"> diff --git a/files/fr/web/css/shorthand_properties/index.html b/files/fr/web/css/shorthand_properties/index.html index 9bfeea32ff..fa605b0d38 100644 --- a/files/fr/web/css/shorthand_properties/index.html +++ b/files/fr/web/css/shorthand_properties/index.html @@ -21,7 +21,7 @@ original_slug: Web/CSS/Propriétés_raccourcies <ol> <li>Une valeur qui n'est pas définie pour la propriété raccourcie <strong>sera réinitialisée avec sa valeur initiale</strong>. Cela peut sembler anecdotique mais attention aux valeurs qui seront surchargées et à l'ordre des déclarations. Ainsi : - <pre class="brush:css notranslate">background-color: red; + <pre class="brush:css">background-color: red; background: url(images/bg.gif) no-repeat top right; </pre> ne définira pas la couleur d'arrière-plan en rouge mais avec la valeur par défaut de {{cssxref("background-color")}} <code>transparent</code> car la deuxième déclaration prend le pas sur la première.</li> @@ -32,19 +32,19 @@ background: url(images/bg.gif) no-repeat top right; <table> <tbody> <tr> - <td style="width: 79px;"><img alt="border1.png" src="/files/3646/border1.png"></td> + <td style="width: 79px;"><img alt="border1.png" src="border1.png"></td> <td><em>1 valeur </em>: <code>border-width: 1em</code> — La valeur unique s'adresse à tous les côtés.</td> </tr> <tr> - <td><img alt="border2.png" src="/files/3647/border2.png"></td> + <td><img alt="border2.png" src="border2.png"></td> <td><em>2 valeurs </em>: <code>border-width: 1em 2em</code> — La première valeur représente les côtés horizontaux en haut et en bas. La seconde valeur représente les côtés verticaux, à gauche et à droite.</td> </tr> <tr> - <td><img alt="border3.png" src="/files/3648/border3.png"></td> + <td><img alt="border3.png" src="border3.png"></td> <td><em>3 valeurs </em>: <code>border-width: 1em 2em 3em</code> — La première valeur représente le côté haut, la deuxième les côtés gauche et droit et la troisième représente le côté bas.</td> </tr> <tr> - <td><img alt="border4.png" src="/files/3649/border4.png"></td> + <td><img alt="border4.png" src="border4.png"></td> <td> <p><em>4 valeurs </em>: <code>border-width: 1em 2em 3em 4em</code> — Les quatre valeurs représentent respectivement le côté haut, le côté droit, le côté bas et le côté haut, toujours dans cet ordre (le sens horaire).</p> </td> @@ -56,19 +56,19 @@ background: url(images/bg.gif) no-repeat top right; <table> <tbody> <tr> - <td style="width: 69px;"><img alt="corner1.png" src="/files/3650/corner1.png"></td> + <td style="width: 69px;"><img alt="corner1.png" src="corner1.png"></td> <td><em>1 valeur </em>: <code>border-radius: 1em</code> — La valeur s'applique à tous les coins.</td> </tr> <tr> - <td><img alt="corner2.png" src="/files/3651/corner2.png"></td> + <td><img alt="corner2.png" src="corner2.png"></td> <td><em>2 valeurs </em>: <code>border-radius: 1em 2em</code> — La première valeur s'applique aux coins en haut à gauche et en bas à droite et la deuxième s'applique aux coins en haut à droite et en bas à gauche.</td> </tr> <tr> - <td><img alt="corner3.png" src="/files/3652/corner3.png"></td> + <td><img alt="corner3.png" src="corner3.png"></td> <td><em>3 valeurs </em>: <code>border-radius: 1em 2em 3em</code> — La première valeur représente le coin en haut à gauche, la deuxième représente les coins en haut à droite et en bas à gauche et la troisième valeur représente le coin en bas à droite.</td> </tr> <tr> - <td><img alt="corner4.png" src="/files/3653/corner4.png"></td> + <td><img alt="corner4.png" src="corner4.png"></td> <td> <p><em>4 valeurs </em>: <code>border-radius: 1em 2em 3em 4em</code> — Les quatre valeurs s'appliquent respectivement au coin en haut à gauche, en haut à droite, en bas à droite et en bas à gauche, toujours dans cet ordre (le sens horaire).</p> </td> @@ -84,14 +84,14 @@ background: url(images/bg.gif) no-repeat top right; <p>Lorsqu'on décrit un arrière-plan avec les propriétés suivantes :</p> -<pre class="brush:css notranslate">background-color: #000; +<pre class="brush:css">background-color: #000; background-image: url(images/bg.gif); background-repeat: no-repeat; background-position: top right;</pre> <p>On peut le faire de façon plus concise grâce à la propriété raccourcie. Voici la déclaration équivalent :</p> -<pre class="brush:css notranslate">background: #000 url(images/bg.gif) no-repeat top right;</pre> +<pre class="brush:css">background: #000 url(images/bg.gif) no-repeat top right;</pre> <div class="note"> <p><strong>Note :</strong> Pour être tout à fait précis, la forme raccourcie présentée juste avant est équivalente aux propriétés détaillées qui précèdent auxquelles on ajoute <code>background-attachment: scroll</code> et d'autres propriétés avec CSS3).</p> @@ -103,7 +103,7 @@ background-position: top right;</pre> <p>Les déclarations suivantes :</p> -<pre class="brush:css notranslate">font-style: italic; +<pre class="brush:css">font-style: italic; font-weight: bold; font-size: .8em; line-height: 1.2; @@ -111,7 +111,7 @@ font-family: Arial, sans-serif;</pre> <p>Peuvent être synthétisées en une seule déclaration avec la propriété raccourcie :</p> -<pre class="brush:css notranslate">font: italic bold .8em/1.2 Arial, sans-serif;</pre> +<pre class="brush:css">font: italic bold .8em/1.2 Arial, sans-serif;</pre> <div class="note"> <p><strong>Note :</strong> Pour être tout à fait précis, la déclaration raccourcie précédente est équivalente aux déclarations détaillées ci-avant auxquelles on ajoutera <code>font-variant: normal</code> et <code>font-size-adjust: none</code> (CSS2.0 / CSS3), <code>font-stretch: normal</code> (CSS3).</p> @@ -121,32 +121,32 @@ font-family: Arial, sans-serif;</pre> <p>Avec les bordures, la largeur, la couleur et le style peuvent être regroupés en une seule déclaration. Par exemple,</p> -<pre class="brush:css notranslate">border-width: 1px; +<pre class="brush:css">border-width: 1px; border-style: solid; border-color: #000;</pre> <p>peut être écrit ainsi :</p> -<pre class="brush:css notranslate">border: 1px solid #000;</pre> +<pre class="brush:css">border: 1px solid #000;</pre> <h2 id="Les_propriétés_liées_à_la_marge_et_au_remplissage_padding">Les propriétés liées à la marge et au remplissage (<em>padding</em>)</h2> <p>Les propriétés raccourcies agissant sur la boîte de marge ou sur la boîte de remplissage (<em>padding</em>) fonctionnent de la même façon. Ainsi, les déclarations CSS suivantes :</p> -<pre class="brush:css notranslate">margin-top: 10px; +<pre class="brush:css">margin-top: 10px; margin-right: 5px; margin-bottom: 10px; margin-left: 5px;</pre> <p>sont équivalentes à la déclaration qui suit (on notera que les valeurs sont ordonnés dans le sens horaire : haut, droit, bas, gauche ; un moyen mnémotechnique est d'utiliser l'acronyme anglais TRBL qui ressemble à <em>trouble</em>) :</p> -<pre class="brush:css notranslate">margin: 10px 5px 10px 5px;</pre> +<pre class="brush:css">margin: 10px 5px 10px 5px;</pre> <h2 id="La_propriété_raccourcie_universelle">La propriété raccourcie universelle</h2> <p>CSS fournit une propriété raccourcie qui permet d'appliquer une même valeur à l'ensemble des propriétés du document : {{cssxref("all")}}.</p> -<p>Voir l'article sur <a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage">la cascade et l'héritage</a> pour plus d'informations sur le fonctionnement de l'héritage.</p> +<p>Voir l'article sur <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">la cascade et l'héritage</a> pour plus d'informations sur le fonctionnement de l'héritage.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/string/index.html b/files/fr/web/css/string/index.html index b58feeb115..e9f88f93dd 100644 --- a/files/fr/web/css/string/index.html +++ b/files/fr/web/css/string/index.html @@ -22,7 +22,7 @@ translation_of: Web/CSS/string <p>Les caractères peuvent être décrits en utilisant leur <a href="https://fr.wikipedia.org/wiki/Unicode#Partitionnement">point de code Unicode</a> hexadécimal, qui doit alors être échappé à l'aide du caractère <code>\</code>. <code>\27</code> représente par exemple le guillemet droit simple (<code>'</code>) et <code>\A9</code> le symbole du <em>copyright</em> ©.</p> <div class="note"> -<p><strong>Note :</strong> Les <a href="/fr/docs/Glossaire/Entity">entités</a> telles que <code>&nbsp;</code> ou <code>&#8212;</code> ne peuvent pas être utilisées pour les chaînes de caractères CSS.</p> +<p><strong>Note :</strong> Les <a href="/fr/docs/Glossary/Entity">entités</a> telles que <code>&nbsp;</code> ou <code>&#8212;</code> ne peuvent pas être utilisées pour les chaînes de caractères CSS.</p> </div> <h2 id="Exemples">Exemples</h2> @@ -39,7 +39,9 @@ de caractères" "Une grande chaîne de caractères" </pre> -<div class="note"><strong>Note</strong> : on peut également échapper des doubles quotes avec <code>\22</code> et les simples quotes avec <code>\27</code>.</div> +<div class="note"> + <p><strong>Note :</strong> on peut également échapper des doubles quotes avec <code>\22</code> et les simples quotes avec <code>\27</code>.</p> +</div> <h2 id="Spécifications">Spécifications</h2> @@ -77,7 +79,7 @@ de caractères" <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Valeurs_et_unités_CSS">Valeurs et unités en CSS</a></li> - <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Tutoriel - Introduction aux valeurs et unités CSS</a></li> - <li><a href="/fr/docs/Web/CSS/Types_CSS">Types de donnée en CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Values_and_Units">Valeurs et unités en CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Tutoriel - Introduction aux valeurs et unités CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Types">Types de donnée en CSS</a></li> </ul> diff --git a/files/fr/web/css/tab-size/index.html b/files/fr/web/css/tab-size/index.html index 1cef8374e1..bb78bd950c 100644 --- a/files/fr/web/css/tab-size/index.html +++ b/files/fr/web/css/tab-size/index.html @@ -92,5 +92,5 @@ tab-size: unset; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="external" href="http://lists.w3.org/Archives/Public/www-style/2008Dec/0009.html"><cite>Contrôler la taille du caractère de tabulation (U+0009)</cite></a>, un e-mail d'Anne van Kesteren pour le CSSWG afin de proposer la standardisation de cette propriété (en anglais).</li> + <li><a href="http://lists.w3.org/Archives/Public/www-style/2008Dec/0009.html">Contrôler la taille du caractère de tabulation (U+0009)</a>, un e-mail d'Anne van Kesteren pour le CSSWG afin de proposer la standardisation de cette propriété (en anglais).</li> </ul> diff --git a/files/fr/web/css/table-layout/index.html b/files/fr/web/css/table-layout/index.html index fd1c7ced52..c61d102988 100644 --- a/files/fr/web/css/table-layout/index.html +++ b/files/fr/web/css/table-layout/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/table-layout <div>{{EmbedInteractiveExample("pages/css/table-layout.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeur utilisant un mot-clé */ diff --git a/files/fr/web/css/text-align-last/index.html b/files/fr/web/css/text-align-last/index.html index d984006b5e..8b798074b4 100644 --- a/files/fr/web/css/text-align-last/index.html +++ b/files/fr/web/css/text-align-last/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/text-align-last <div>{{EmbedInteractiveExample("pages/css/text-align-last.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Valeurs utilisant un mot-clé */ diff --git a/files/fr/web/css/text-align/index.html b/files/fr/web/css/text-align/index.html index 5d5b257d8d..77b812babb 100644 --- a/files/fr/web/css/text-align/index.html +++ b/files/fr/web/css/text-align/index.html @@ -11,9 +11,7 @@ translation_of: Web/CSS/text-align <p>La propriété <strong><code>text-align</code></strong> définit l'alignement horizontal d'un élément de bloc ou de la boîte d'une cellule de tableau. Cette propriété fonctionne donc de façon analogue à {{cssxref("vertical-align")}} mais dans le sens horizontal.</p> -<div>{{EmbedInteractiveExample("pages/css/text-align.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<div>{{EmbedInteractiveExample("pages/css/text-align.html")}}</div <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/text-combine-upright/index.html b/files/fr/web/css/text-combine-upright/index.html index 5f7afccdc4..3d47144c98 100644 --- a/files/fr/web/css/text-combine-upright/index.html +++ b/files/fr/web/css/text-combine-upright/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/text-combine-upright <p>La propriété <strong><code>text-combine-upright</code></strong> définit comment intégrer une combinaison de plusieurs caractères dans l'espace normalement alloué à un seul caractère. Si la combinaison obtenue est plus large qu'<code>1em</code>, l'agent utilisateur devra compresser le contenu afin qu'il tienne sur <code>1em</code>. La combinaison est ensuite manipulée comme un seul glyphe pour la disposition et pour la décoration. Enfin, cette propriété n'a d'effet que sur les modes d'écriture verticaux.</p> -<p>Cela permet d'obtenir un effet appelé tate-chū-yoko (<span lang="ja">縦中横</span>) en japonais ou <span lang="zh-Hant">直書橫向</span> en chinois.</p> +<p>Cela permet d'obtenir un effet appelé tate-chū-yoko (縦中横) en japonais ou 直書橫向 en chinois.</p> <pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ text-combine-upright: none; diff --git a/files/fr/web/css/text-decoration-color/index.html b/files/fr/web/css/text-decoration-color/index.html index b1013af9b9..8cd3cb905e 100644 --- a/files/fr/web/css/text-decoration-color/index.html +++ b/files/fr/web/css/text-decoration-color/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/text-decoration-color <div>{{EmbedInteractiveExample("pages/css/text-decoration-color.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> Lorsqu'on définit plusieurs décorations à la fois, il peut être plus pratique d'utiliser la propriété raccourcie {{cssxref("text-decoration")}}.</p> </div> diff --git a/files/fr/web/css/text-decoration-line/index.html b/files/fr/web/css/text-decoration-line/index.html index 2787525f9d..0e9fdff6ac 100644 --- a/files/fr/web/css/text-decoration-line/index.html +++ b/files/fr/web/css/text-decoration-line/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/text-decoration-line <div>{{EmbedInteractiveExample("pages/css/text-decoration-line.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La propriété raccourcie {{cssxref("text-decoration")}} permet de paramétrer cette propriété et d'autres propriétés associées aux décorations.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/text-decoration-skip-ink/index.html b/files/fr/web/css/text-decoration-skip-ink/index.html index 4608c2ed51..1e998a6778 100644 --- a/files/fr/web/css/text-decoration-skip-ink/index.html +++ b/files/fr/web/css/text-decoration-skip-ink/index.html @@ -31,8 +31,7 @@ text-decoration-skip: unset; <dt><code>none</code></dt> <dd>La ligne décorative traverse l'ensemble des glyphes, qu'ils aient un jambage ou une hampe.</dd> <dt><code>auto</code></dt> - <dd>La valeur par défaut : la ligne (au dessus ou en dessous du texte) est uniquement dessinée de façon à ne pas être proche des jambages ou hampes des glyphes. Autrement dit, la ligne est interrompue à chaque fois qu'elle croise un glyphe.</dd> - <dd><img alt='An example of "text-decoration-skip: ink;".' src="https://mdn.mozillademos.org/files/13464/decoration-skip-ink.png"></dd> + <dd>La valeur par défaut : la ligne (au dessus ou en dessous du texte) est uniquement dessinée de façon à ne pas être proche des jambages ou hampes des glyphes. Autrement dit, la ligne est interrompue à chaque fois qu'elle croise un glyphe. <img alt='An example of "text-decoration-skip: ink;".' src="decoration-skip-ink.png"></dd> </dl> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -47,7 +46,7 @@ text-decoration-skip: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[4]">p { +<pre class="brush: css">p { margin: 0; font-size: 2em; text-decoration: underline blue; diff --git a/files/fr/web/css/text-decoration-skip/index.html b/files/fr/web/css/text-decoration-skip/index.html index 6122d360b6..54d576be1c 100644 --- a/files/fr/web/css/text-decoration-skip/index.html +++ b/files/fr/web/css/text-decoration-skip/index.html @@ -50,8 +50,7 @@ text-decoration-skip: unset; <dt><code>trailing-spaces</code></dt> <dd>Comportement analogue à <code>spaces</code> mais seuls les espaces après les mots sont ignorés.</dd> <dt><code>edges</code></dt> - <dd>La décoration de <code>text-decoration</code> est rognée vers l'intérieur de la moitié de la largueur de la ligne, vers la droite et la gauche..</dd> - <dd><img alt='An example of "text-decoration-skip: edges;".' src="https://mdn.mozillademos.org/files/13466/decoration-skip-edges.png" style="height: 77px; margin: 0px auto; width: 223px;"></dd> + <dd>La décoration de <code>text-decoration</code> est rognée vers l'intérieur de la moitié de la largueur de la ligne, vers la droite et la gauche. <img alt='An example of "text-decoration-skip: edges;".' src="decoration-skip-edges.png"></dd> <dt><code>box-decoration</code></dt> <dd>La propriété <code>text-decoration</code> n'est pas appliquée pour les marges, bordures et zones de remplissage (<em>padding</em>) des éléments fils.</dd> </dl> @@ -64,7 +63,7 @@ text-decoration-skip: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[4]">p { +<pre class="brush: css">p { margin: 0; font-size: 3em; text-decoration: underline; diff --git a/files/fr/web/css/text-decoration-style/index.html b/files/fr/web/css/text-decoration-style/index.html index f91fccbaaa..5b355fadf1 100644 --- a/files/fr/web/css/text-decoration-style/index.html +++ b/files/fr/web/css/text-decoration-style/index.html @@ -17,8 +17,6 @@ translation_of: Web/CSS/text-decoration-style <div>{{EmbedInteractiveExample("pages/css/text-decoration-style.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Si la mise en forme appliquée possède une sémantique forte (par exemple barrer le texte pour indiquer qu'il a été supprimé), on recommande aux auteurs d'utiliser les balises HTML associées si elles existent (par exemple {{HTMLElement("del")}} ou {{HTMLElement("s")}}). Les navigateurs peuvent parfois désactiver la mise en forme et ces éléments permettent de conserver la sémantique du contenu quoi qu'il arrive.</p> <p>La propriété raccourcie {{cssxref("text-decoration")}} permet de paramétrer cette propriété et d'autres propriétés associées aux décorations.</p> diff --git a/files/fr/web/css/text-decoration-thickness/index.html b/files/fr/web/css/text-decoration-thickness/index.html index cfa80256ed..2053caab1f 100644 --- a/files/fr/web/css/text-decoration-thickness/index.html +++ b/files/fr/web/css/text-decoration-thickness/index.html @@ -93,7 +93,7 @@ text-decoration-thickness: unset; </tbody> </table> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Cette propriété était initialement intitulée <code>text-decoration-width</code> mais fut renommée en 2019 en <code>text-decoration-thickness</code>.</p> </div> diff --git a/files/fr/web/css/text-decoration/index.html b/files/fr/web/css/text-decoration/index.html index 49f244c559..0cee3a8764 100644 --- a/files/fr/web/css/text-decoration/index.html +++ b/files/fr/web/css/text-decoration/index.html @@ -12,19 +12,17 @@ translation_of: Web/CSS/text-decoration <p>La propriété <strong><code>text-decoration</code></strong> est utilisée pour « décorer » le texte en ajoutant une ligne pouvant être positionnée sous, sur ou à travers le texte. C'est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de paramétrer simultanément les propriétés « détaillées » : {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}} et {{cssxref("text-decoration-style")}}.</p> -<div>{{EmbedInteractiveExample("pages/css/text-decoration.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<div>{{EmbedInteractiveExample("pages/css/text-decoration.html")}}</div <p>Ces décorations se propagent sur les différents éléments enfants. Cela signifie qu'il n'est pas possible de désactiver la décoration d'un élément descendant pour lequel un ancêtre est décoré. Par exemple, avec ce fragment de HTML <code><p>Ce texte a <em> des mots mis en avant</em> dedans.</p></code>, et cette règle CSS <code>p { text-decoration: underline; }</code>, on aura tout le paragraphe souligné, même si on applique la règle <code>em { text-decoration: none; }</code>, cela n'aurait aucun impact. En revanche, ajouter la règle <code>em { text-decoration: overline; }</code> entraînerait un cumul des décorations pour « des mots mis en avant ».</p> -<div class="note style-wrap"> -<p><strong>Note : </strong>La spécification CSS Text Decoration de niveau 3 indique que cette propriété est une propriété raccourcie pour les trois propriétés {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}} et {{cssxref("text-decoration-style")}}. Comme pour les autres propriétés raccourcies, cela signifie que la valeur de chaque « sous-propriété » est réinitialisée avec sa valeur par défaut si elle n'est pas explicitement définie dans la propriété raccourcie.</p> +<div class="note"> +<p><strong>Note :</strong> La spécification CSS Text Decoration de niveau 3 indique que cette propriété est une propriété raccourcie pour les trois propriétés {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}} et {{cssxref("text-decoration-style")}}. Comme pour les autres propriétés raccourcies, cela signifie que la valeur de chaque « sous-propriété » est réinitialisée avec sa valeur par défaut si elle n'est pas explicitement définie dans la propriété raccourcie.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush: css no-line-numbers notranslate">/* Valeurs avec mots-clés */ +<pre class="brush: css no-line-numbers">/* Valeurs avec mots-clés */ text-decoration: none; /* Aucune décoration */ text-decoration: underline red; /* On souligne en rouge */ text-decoration: underline wavy red; /* On souligne en rouge avec */ @@ -55,7 +53,7 @@ text-decoration: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">.under { +<pre class="brush: css">.under { text-decoration: underline red; } @@ -82,7 +80,7 @@ text-decoration: unset; <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p class="under">Ce texte a une ligne en dessous.</p> +<pre class="brush: html"><p class="under">Ce texte a une ligne en dessous.</p> <p class="over">Ce texte a une ligne au dessus.</p> <p class="line">Ce texte est barré d'une ligne.</p> <p>Ce <a class="plain" href="#">lien ne sera pas souligné</a>, diff --git a/files/fr/web/css/text-emphasis-position/index.html b/files/fr/web/css/text-emphasis-position/index.html index 66c4d9f540..f818083fef 100644 --- a/files/fr/web/css/text-emphasis-position/index.html +++ b/files/fr/web/css/text-emphasis-position/index.html @@ -52,8 +52,8 @@ text-emphasis-position: unset; <td>Japanese</td> <td rowspan="2">au dessus</td> <td rowspan="2">à droite</td> - <td rowspan="2"><img alt="Emphasis marks appear over each emphasized character in horizontal Japanese text." src="https://drafts.csswg.org/css-text-decor-3/images/text-emphasis-ja.png" style="height: 28px; width: 225px;" title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text"></td> - <td rowspan="3"><img alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text." src="https://drafts.csswg.org/css-text-decor-3/images/text-emphasis-v.gif" style="height: 89px; width: 34px;" title="Emphasis applied on the right of a fragment of Japanese text"></td> + <td rowspan="2"><img alt="Emphasis marks appear over each emphasized character in horizontal Japanese text." src="text-emphasis-ja.png" title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text"></td> + <td rowspan="3"><img alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text." src="text-emphasis-v.gif" title="Emphasis applied on the right of a fragment of Japanese text"></td> </tr> <tr> <td>Mongolian</td> @@ -62,7 +62,7 @@ text-emphasis-position: unset; <td>Chinese</td> <td>en dessous</td> <td>à droite</td> - <td><img alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text." src="https://drafts.csswg.org/css-text-decor-3/images/text-emphasis-zh.gif" style="height: 28px; width: 133px;" title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text"></td> + <td><img alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text." src="text-emphasis-zh.gif" title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text"></td> </tr> </tbody> </table> diff --git a/files/fr/web/css/text-emphasis/index.html b/files/fr/web/css/text-emphasis/index.html index d9e5f18d41..b092b6b058 100644 --- a/files/fr/web/css/text-emphasis/index.html +++ b/files/fr/web/css/text-emphasis/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/text-emphasis <div>{{EmbedInteractiveExample("pages/css/text-emphasis.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La propriété <code>text-emphasis</code> est différente de {{cssxref("text-decoration")}}. La propriété <code>text-decoration</code> n'a pas d'héritage et la décoration est appliquée sur tout l'élément. Cependant, <code>text-emphasis</code> a un héritage et il est donc possible de changer la marque selon les « descendants » d'un élément.</p> <p>La taille du symbole d'emphase, comme celle des symboles Ruby, représente environ 50% de la taille de la police du texte. <code>text-emphasis</code> peut modifier la hauteur de la ligne lorsque l'interlignage n'est pas suffisant pour placer les marques.</p> diff --git a/files/fr/web/css/text-indent/index.html b/files/fr/web/css/text-indent/index.html index 6fe05a6106..e2db574dea 100644 --- a/files/fr/web/css/text-indent/index.html +++ b/files/fr/web/css/text-indent/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/text-indent <div>{{EmbedInteractiveExample("pages/css/text-indent.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: css no-line-numbers">/* Valeurs de longueur */ diff --git a/files/fr/web/css/text-orientation/index.html b/files/fr/web/css/text-orientation/index.html index 93fa5237de..21d80a577d 100644 --- a/files/fr/web/css/text-orientation/index.html +++ b/files/fr/web/css/text-orientation/index.html @@ -12,9 +12,7 @@ translation_of: Web/CSS/text-orientation <p>La propriété <strong><code>text-orientation</code></strong> définit l'orientation du texte sur une ligne. Cette propriété n'a d'effet qu'en mode vertical (autrement dit, quand {{cssxref("writing-mode")}} n'est pas <code>horizontal-tb</code>). Elle est utile pour contrôler l'affichage de l'écriture pour les langues dont le script est vertical. Elle permet aussi de gérer les en-têtes de tableaux verticaux.</p> -<div>{{EmbedInteractiveExample("pages/css/text-orientation.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<div>{{EmbedInteractiveExample("pages/css/text-orientation.html")}}</div <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/text-overflow/index.html b/files/fr/web/css/text-overflow/index.html index e9d59099d9..7e1716ebd2 100644 --- a/files/fr/web/css/text-overflow/index.html +++ b/files/fr/web/css/text-overflow/index.html @@ -9,15 +9,13 @@ translation_of: Web/CSS/text-overflow --- <div>{{CSSRef}}</div> -<p>La propriété <strong><code>text-overflow</code></strong> définit la façon dont le contenu textuel qui dépasse d'une boîte est signalé pour les utilisateurs. Le texte peut être rogné (<em>clipping</em>), afficher une ellipse ('<code>…</code>', <code style="text-transform: uppercase;">U+2026 Horizontal Ellipsis</code>) ou afficher une chaîne de caractères choisie.</p> +<p>La propriété <strong><code>text-overflow</code></strong> définit la façon dont le contenu textuel qui dépasse d'une boîte est signalé pour les utilisateurs. Le texte peut être rogné (<em>clipping</em>), afficher une ellipse ('<code>…</code>', <code>U+2026 Horizontal Ellipsis</code>) ou afficher une chaîne de caractères choisie.</p> <div>{{EmbedInteractiveExample("pages/css/text-overflow.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Le rognage se fera à la bordure de la boîte. Afin que le rognage se fasse plus tôt, à la limite des caractères, on peut utiliser la chaîne vide (<code>''</code>).</p> -<p>Cette propriété n'affecte que le contenu qui dépasse de la boîte englobante dans le sens de la progression en ligne. Par exemple, on ne parle pas ici du texte qui dépasserait vers le bas d'une boîte. Le texte peut dépasser lorsqu'on empêche le retour automatique à la ligne (par exemple avec <code class="css">white-space: nowrap</code>) ou lorsqu'un seul mot est trop long pour tenir dans le conteneur.</p> +<p>Cette propriété n'affecte que le contenu qui dépasse de la boîte englobante dans le sens de la progression en ligne. Par exemple, on ne parle pas ici du texte qui dépasserait vers le bas d'une boîte. Le texte peut dépasser lorsqu'on empêche le retour automatique à la ligne (par exemple avec <code>white-space: nowrap</code>) ou lorsqu'un seul mot est trop long pour tenir dans le conteneur.</p> <p>Cette propriété CSS ne force pas le dépassement. Pour ce faire et afin que <code>text-overflow</code> soit appliqué, l'auteur devra ajouter des propriétés supplémentaires sur l'élément, notamment : {{cssxref("overflow")}} avec <code>hidden</code> et {{cssxref("white-space")}} avec <code>nowrap</code>.</p> @@ -63,17 +61,17 @@ text-overflow: unset; <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><a id="clip" name="clip"><code>clip</code></a></dt> - <dd>La valeur par défaut de cette propriété. Ce mot-clé indique qu'on tronque le texte à la limite de <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de contenu</a>. La troncature peut donc arriver sur le milieu d'un caractère. Pour que celle-ci soit appliquée entre deux caractères, on devra utiliser la chaîne vide (<code>''</code>) comme valeur pour cette propriété.</dd> - <dt><a id="ellipsis" name="ellipsis"><code>ellipsis</code></a></dt> - <dd>Ce mot-clé indique qu'on affiche une ellipse (<code>'…'</code>, <code style="text-transform: uppercase;">U+2026 Horizontal Ellipsis</code>) pour représenter le texte rogné. L'ellipse est affichée à l'intérieur de <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de contenu</a> et réduit donc la quantité de texte affichée. S'il n'y a pas assez de place pour afficher l'ellipse, celle-ci est rognée.</dd> - <dt><a id="fade" name="fade"><code>fade</code></a> {{experimental_inline}}</dt> + <dt><code>clip</code></dt> + <dd>La valeur par défaut de cette propriété. Ce mot-clé indique qu'on tronque le texte à la limite de <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">la boîte de contenu</a>. La troncature peut donc arriver sur le milieu d'un caractère. Pour que celle-ci soit appliquée entre deux caractères, on devra utiliser la chaîne vide (<code>''</code>) comme valeur pour cette propriété.</dd> + <dt><code>ellipsis</code></dt> + <dd>Ce mot-clé indique qu'on affiche une ellipse (<code>'…'</code>, <code>U+2026 Horizontal Ellipsis</code>) pour représenter le texte rogné. L'ellipse est affichée à l'intérieur de <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">la boîte de contenu</a> et réduit donc la quantité de texte affichée. S'il n'y a pas assez de place pour afficher l'ellipse, celle-ci est rognée.</dd> + <dt><code>fade</code> {{experimental_inline}}</dt> <dd>Ce mot-clé indique que le contenu qui dépasse est rogné avec un effet de dégradé en transparence. Au bout de la boîte, le contenu est totalement transparent.</dd> - <dt><a id="fade_fun" name="fade_fun"><code>fade( <length> | <percentage> )</code></a> {{experimental_inline}}</dt> + <dt><code>fade( <length> | <percentage> )</code> {{experimental_inline}}</dt> <dd>Cette fonction permet de rogner le contenu qui dépasse et d'appliquer un effet de dégradé en transparence. Au bout de la boîte, on a une transparence totale.<br> L'argument passé à la fonction détermine la distance sur laquelle cet effet est appliqué. La valeur en pourcentage est relative à la largeur de la boîte. Les valeurs inférieures à <code>0</code> sont ramenées à <code>0</code>. Les valeurs supérieures à la largeur de la boîte sont écrétées à la largeur de la boîte.</dd> - <dt><a id="string" name="string"><code><string></code></a> {{experimental_inline}}</dt> - <dd>Une chaîne de caractères (type {{cssxref("<string>")}}) utilisée pour représentée le texte rogné. La chaîne est affichée à l'intérieur de <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de contenu</a> et réduit donc la quantité de texte affichée. S'il n'y a pas assez de place pour afficher la chaîne choisie, celle-ci est rognée.</dd> + <dt><code><string></code> {{experimental_inline}}</dt> + <dd>Une chaîne de caractères (type {{cssxref("<string>")}}) utilisée pour représentée le texte rogné. La chaîne est affichée à l'intérieur de <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">la boîte de contenu</a> et réduit donc la quantité de texte affichée. S'il n'y a pas assez de place pour afficher la chaîne choisie, celle-ci est rognée.</dd> </dl> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -82,22 +80,49 @@ text-overflow: unset; <h2 id="Exemples">Exemples</h2> -<h3 id="CSS">CSS</h3> +<h2 id="Examples">Examples</h2> + +<h3 id="one-value_syntax">Syntaxe avec une valeur</h3> + +<p>Cet exemple illustre différentes valeurs pour <code>text-overflow</code>, appliquée à un paragraphe, pour des textes écrits de gauche à droite et de droite à gauche.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"> + +<div class="ltr"> + <h2>Left to right text</h2> + <pre>clip</pre> + <p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + <pre>ellipsis</pre> + <p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + <pre>" [..]"</pre> + <p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +</div> + +<div class="rtl"> + <h2>Right to left text</h2> + <pre>clip</pre> + <p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + <pre>ellipsis</pre> + <p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + <pre>" [..]"</pre> + <p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +</div> +</pre> + +<h4 id="CSS">CSS</h4> <pre class="brush: css">p { width: 200px; border: 1px solid; padding: 2px 5px; - /* Nécessaires pour text-overflow */ + /* Les deux règles suivantes sont nécessaires pour text-overflow */ white-space: nowrap; overflow: hidden; } -.overflow-visible { - white-space: initial; -} - .overflow-clip { text-overflow: clip; } @@ -107,199 +132,87 @@ text-overflow: unset; } .overflow-string { - /* Cette forme n'est pas prise en charge - par la plupart des navigateurs. cf. la - section Compatibilité ci-après */ text-overflow: " [..]"; } + +body { + display: flex; + justify-content: space-around; +} + +.ltr > p { + direction: ltr; +} + +.rtl > p { + direction: rtl; +} </pre> -<h3 id="HTML">HTML</h3> +<h4 id="result">Résultat</h4> + +<p>{{EmbedLiveSample('one-value_syntax', 600, 320)}}</p> -<pre class="brush: html"><p class="overflow-visible">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +<h3 id="two-value_syntax">Syntaxe avec deux valeurs</h3> -<p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +<p>Cette exemple illustre la syntaxe à deux valeurs pour <code>text-overflow</code>, où on peut définir un comportement de débordement différent pour le début et la fin du texte. Pour illustrer l'effet, on doit faire défiler la ligne et le début de la ligne est donc caché.</p> -<p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +<h4 id="HTML">HTML</h4> -<p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +<pre class="brush: html"> +<pre>clip clip</pre> +<p class="overflow-clip-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +<pre>clip ellipsis</pre> +<p class="overflow-clip-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +<pre>ellipsis ellipsis</pre> +<p class="overflow-ellipsis-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +<pre>ellipsis " [..]"</pre> +<p class="overflow-ellipsis-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </pre> -<h3 id="Résultat">Résultat</h3> +<h4 id="CSS">CSS</h4> -<p>{{EmbedLiveSample('Exemples', 300, 220, '', 'Web/CSS/text-overflow')}}</p> +<pre class="brush: css">p { + width: 200px; + border: 1px solid; + padding: 2px 5px; -<table class="standard-table"> - <thead> - <tr> - <th colspan="1" rowspan="2" scope="col">Valeur CSS</th> - <th colspan="2" rowspan="1" scope="col" style="text-align: center;"><code>direction: ltr</code></th> - <th colspan="2" rowspan="1" scope="col" style="text-align: center;"><code>direction: rtl</code></th> - </tr> - <tr> - <th scope="col">Résultat attendu</th> - <th scope="col">Résultat du navigateur</th> - <th scope="col">Résultat attendu</th> - <th scope="col">Résultat du navigateur</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>overflow:visible</code></td> - <td style="font-family: monospace;">1234567890</td> - <td style="direction: ltr;"> - <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: visible;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">0987654321</td> - <td> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: visible;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: clip</code></td> - <td style="padding: 1px; font-family: monospace;"><img alt="t-o_clip.png" class="default internal" src="/@api/deki/files/6056/=t-o_clip.png"></td> - <td style="direction: ltr;"> - <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip;">123456</div> - </td> - <td style="padding: 1px; font-family: monospace;"><img alt="t-o_clip_rtl.png" class="default internal" src="/@api/deki/files/6057/=t-o_clip_rtl.png"></td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: ''</code></td> - <td style="font-family: monospace;">12345</td> - <td style="direction: ltr;"> - <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '';">123456</div> - </td> - <td style="font-family: monospace;">54321</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: ellipsis</code></td> - <td style="font-family: monospace;">1234…</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">…4321</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: '.'</code></td> - <td style="font-family: monospace;">1234.</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">.4321</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: clip clip</code></td> - <td style="font-family: monospace;">123456</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip clip;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">654321</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: clip ellipsis</code></td> - <td style="font-family: monospace;">1234…</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">6543…</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: clip '.'</code></td> - <td style="font-family: monospace;">1234.</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">6543.</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: ellipsis clip</code></td> - <td style="font-family: monospace;">…3456</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis clip;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">…4321</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: ellipsis ellipsis</code></td> - <td style="font-family: monospace;">…34…</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">…43…</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: ellipsis '.'</code></td> - <td style="font-family: monospace;">…34.</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">…43.</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: ',' clip</code></td> - <td style="font-family: monospace;">,3456</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' clip;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">,4321</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: ',' ellipsis</code></td> - <td style="font-family: monospace;">,34…</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ','ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">,43…</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ','ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - <tr> - <td><code>text-overflow: ',' '.'</code></td> - <td style="font-family: monospace;">,34.</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - <td style="font-family: monospace;">,43.</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div> - </td> - </tr> - </tbody> -</table> + /* Les deux règles suivantes sont nécessaires pour text-overflow */ + white-space: nowrap; + overflow: scroll; +} + +.overflow-clip-clip { + text-overflow: clip clip; +} + +.overflow-clip-ellipsis { + text-overflow: clip ellipsis; +} + +.overflow-ellipsis-ellipsis { + text-overflow: ellipsis ellipsis; +} + +.overflow-ellipsis-string { + text-overflow: ellipsis " [..]"; +} +</pre> + + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">// On fait défiler chaque paragraphe afin que le début soit également caché +const paras = document.querySelectorAll("p"); + +for (let para of paras) { + para.scroll(100, 0); +} +</pre> + +<h4 id="result">Résultat</h4> + +<p>{{EmbedLiveSample('two-value_syntax', 600, 360)}}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/text-shadow/index.html b/files/fr/web/css/text-shadow/index.html index 3fdc6055b4..359a0acb0e 100644 --- a/files/fr/web/css/text-shadow/index.html +++ b/files/fr/web/css/text-shadow/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/text-shadow <div>{{EmbedInteractiveExample("pages/css/text-shadow.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* offset-x | offset-y | blur-radius | color */ @@ -64,9 +62,9 @@ text-shadow: unset; <h2 id="Exemples">Exemples</h2> -<h3 id="Ombre_simple">Ombre simple</h3> +<h3 id="ombre_simple">Ombre simple</h3> + -<div id="Example1"> <pre class="brush: css">.red-text-shadow { text-shadow: red 0 -2px; }</pre> @@ -74,13 +72,11 @@ text-shadow: unset; <pre class="brush: html"><p class="red-text-shadow">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p></pre> -</div> -<p>{{EmbedLiveSample('Simple_shadow', '660px', '90px')}}</p> +<p>{{EmbedLiveSample('ombre_simple', '660px', '90px')}}</p> -<h3 id="Ombres_multiples">Ombres multiples</h3> +<h3 id="ombres_multiples">Ombres multiples</h3> -<div id="Example2"> <pre class="brush:css">.white-text-with-blue-shadow { text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue; color: white; @@ -90,9 +86,8 @@ text-shadow: unset; <pre class="brush: html"><p class="white-text-with-blue-shadow">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsaquae ab illo inventore.</p></pre> -</div> -<p>{{EmbedLiveSample('Multiple_shadows', '660px', '170px')}}</p> +<p>{{EmbedLiveSample('ombres_multiples', '660px', '170px')}}</p> <h2 id="Spécifications">Spécifications</h2> @@ -113,7 +108,7 @@ text-shadow: unset; <tr> <td>{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}}</td> <td>{{Spec2('CSS3 Text Decoration')}}</td> - <td>La propriété CSS <code>text-shadow</code> était <a class="external" href="https://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">incorrectement définie dans CSS2</a> et fut abandonnée dans CSS2 (Level 1). La spéc CSS Text Module Level 3 a raffiné la syntaxe. Ensuite, elle a été déplacée dans <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a>.</td> + <td>La propriété CSS <code>text-shadow</code> était <a href="https://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">incorrectement définie dans CSS2</a> et fut abandonnée dans CSS2 (Level 1). La spéc CSS Text Module Level 3 a raffiné la syntaxe. Ensuite, elle a été déplacée dans <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a>.</td> </tr> </tbody> </table> diff --git a/files/fr/web/css/text-size-adjust/index.html b/files/fr/web/css/text-size-adjust/index.html index 9cce3d4b8d..3cfaa33d46 100644 --- a/files/fr/web/css/text-size-adjust/index.html +++ b/files/fr/web/css/text-size-adjust/index.html @@ -81,6 +81,6 @@ text-size-adjust: unset; <ul> <li><a class="link-https" href="https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html">La documentation d'Apple</a></li> - <li><a class="external" href="http://dbaron.org/log/20111126-font-inflation">Le comportement de Gecko décrit par L. David Baron</a></li> - <li><a class="external" href="http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff462082(v=vs.105).aspx">La documentation de Microsoft</a></li> + <li><a href="http://dbaron.org/log/20111126-font-inflation">Le comportement de Gecko décrit par L. David Baron</a></li> + <li><a href="http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff462082(v=vs.105).aspx">La documentation de Microsoft</a></li> </ul> diff --git a/files/fr/web/css/text-transform/index.html b/files/fr/web/css/text-transform/index.html index 403a879fa4..b7d87fe8e2 100644 --- a/files/fr/web/css/text-transform/index.html +++ b/files/fr/web/css/text-transform/index.html @@ -9,12 +9,10 @@ translation_of: Web/CSS/text-transform --- <div>{{CSSRef}}</div> -<p>La propriété <strong><code>text-transform</code></strong> définit la façon d'utiliser les lettres capitales pour le texte d'un élément. Cela permet que le texte soit écrit uniquement en majuscules, minuscules ou que chaque mot commence par une capitale. Cela permet également d'améliorer la lisibilité pour les textes avec des annotations <a href="/fr/docs/HTML/Element/ruby">Ruby</a>.</p> +<p>La propriété <strong><code>text-transform</code></strong> définit la façon d'utiliser les lettres capitales pour le texte d'un élément. Cela permet que le texte soit écrit uniquement en majuscules, minuscules ou que chaque mot commence par une capitale. Cela permet également d'améliorer la lisibilité pour les textes avec des annotations <a href="/fr/docs/Web/HTML/Element/ruby">Ruby</a>.</p> <div>{{EmbedInteractiveExample("pages/css/text-transform.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La propriété <code>text-transform</code> gère les différences liées aux langues, par exemple :</p> <ul> @@ -33,7 +31,7 @@ translation_of: Web/CSS/text-transform <li>En gaëlique (ga), une lettre qui préfixe un mot doit rester en minuscule lorsqu'on capitalise toutes les lettres. Ainsi, en appliquant <code>text-transform: uppercase</code> à <code>ar aon tslí</code>, on obtiendra <code>AR AON tSLÍ</code> et non <code>AR AON TSLÍ</code>. Dans certains cas, un trait d'union peut être retiré lors du passage en majuscules : <code>an t-uisce</code> deviendra <code>AN tUISCE </code>(le trait-d'union sera bien réinséré avec <code>text-transform: lowercase</code>)</li> </ul> -<p>La langue d'un document HTML est définie par l'attribut XML <code>xml:lang</code>, qui a la priorité sur l'attribut global <code><a href="/fr/docs/Web/HTML/Attributs_globaux/lang">lang</a></code>.</p> +<p>La langue d'un document HTML est définie par l'attribut XML <code>xml:lang</code>, qui a la priorité sur l'attribut global <code><a href="/fr/docs/Web/HTML/Global_attributes/lang">lang</a></code>.</p> <p>Le support de ces différents cas peut varier d'un navigateur à un autre. Pour plus de détails, <a href="#compat">voir le tableau de compatibilité des navigateurs</a>.</p> @@ -60,7 +58,7 @@ text-transform: unset; <dd> <p>En utilisant ce mot-clé, la première lettre de chaque mot sera affichée en capitale. Les autres caractères ne seront pas modifiés et conserveront ainsi la forme originale, contenue dans le texte de l'élément. Ici, une lettre peut être n'importe quel caractère Unicode qui fait partie des catégories génériques Lettre. Cela exclue donc les symboles de ponctuations qui peuvent être utilisés en début de mot.</p> - <p class="note">Le mot-clé capitalize n'était pas complètement spécifié avec CSS 1 et CSS 2.1. Il y avait certaines différences entre les navigateurs : Firefox considèrait que - et _ étaient des lettres ; Webkit et Gecko considéraient que les symboles lettrés comme ⓐ étaient de vraies lettres ; Internet Explorer 9 était le plus proche de la définition donnée par CSS2 mais il y avait certains cas étranges. Grâce à CSS Text Level 3, ces ambiguités sont levées. Dans le tableau, la ligne capitalize traduit le support de cette spécification.</p> + <div class="note"><p><strong>Note :</strong> Le mot-clé capitalize n'était pas complètement spécifié avec CSS 1 et CSS 2.1. Il y avait certaines différences entre les navigateurs : Firefox considèrait que - et _ étaient des lettres ; Webkit et Gecko considéraient que les symboles lettrés comme ⓐ étaient de vraies lettres ; Internet Explorer 9 était le plus proche de la définition donnée par CSS2 mais il y avait certains cas étranges. Grâce à CSS Text Level 3, ces ambiguités sont levées. Dans le tableau, la ligne capitalize traduit le support de cette spécification.</p></div> </dd> <dt><code>uppercase</code></dt> <dd>En utilisant ce mot-clé, tous les caractères seront écrits en capitales.</dd> @@ -143,7 +141,7 @@ p.full-size-kana { <p>De grandes portions de texte utilisant <code>text-transform</code> avec la valeur <code>uppercase</code> peuvent être difficilement lisibles par les personnes dyslexiques ou souffrant de problèmes cognitifs.</p> <ul> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener"><em>Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li> </ul> @@ -178,7 +176,7 @@ p.full-size-kana { <p>{{cssinfo}}</p> -<h2 id="Compatibilité_des_navigateurs"><a id="compat" name="compat">Compatibilité des navigateurs</a></h2> +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> <p>{{Compat("css.properties.text-transform")}}</p> diff --git a/files/fr/web/css/text-underline-offset/index.html b/files/fr/web/css/text-underline-offset/index.html index 29f82ce231..332cc62d99 100644 --- a/files/fr/web/css/text-underline-offset/index.html +++ b/files/fr/web/css/text-underline-offset/index.html @@ -13,9 +13,7 @@ translation_of: Web/CSS/text-underline-offset <div>{{EmbedInteractiveExample("pages/css/text-underline-offset.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> <code>text-underline-offset</code> n'est pas une propriété détaillée de {{cssxref('text-decoration')}}. Bien qu'un élément puisse avoir plusieurs lignes décoratives, <code>text-underline-offset</code> n'aura qu'un impact sur le soulignage (et pas sur les autres lignes telles que celles fournies par {{cssxref('text-decoration-line')}} avec <code>overline</code> ou <code>line-through</code>).</p> </div> diff --git a/files/fr/web/css/time/index.html b/files/fr/web/css/time/index.html index f83edacff3..79b98d327e 100644 --- a/files/fr/web/css/time/index.html +++ b/files/fr/web/css/time/index.html @@ -20,9 +20,9 @@ translation_of: Web/CSS/time <h3 id="Unités">Unités</h3> <dl> - <dt><code><a id="s">s</a></code></dt> + <dt><code>s</code></dt> <dd>Cette unité permet d'exprimer le temps en secondes. Par exemple : <code>0s</code>, <code>1.5s</code>, <code>-60s</code>.</dd> - <dt><code><a id="ms">ms</a></code></dt> + <dt><code>ms</code></dt> <dd>Cette unité permet d'exprimer le temps en millisecondes. Par exemple : <code>0ms</code>, <code>1500ms</code>, <code>-6000ms</code>.</dd> </dl> diff --git a/files/fr/web/css/tools/linear-gradient_generator/index.html b/files/fr/web/css/tools/linear-gradient_generator/index.html index 4a3dc87e32..e8206cae93 100644 --- a/files/fr/web/css/tools/linear-gradient_generator/index.html +++ b/files/fr/web/css/tools/linear-gradient_generator/index.html @@ -10,5 +10,5 @@ original_slug: Web/CSS/Outils/Générateur_de_dégradés_linéaires <p>{{Draft}}</p> <div class="note"> -<p><strong>Note</strong><strong> :</strong> Cette page n'est pas complète, l'outil doit être finalisé sur la version anglaise.</p> +<p><strong>Note :</strong> Cette page n'est pas complète, l'outil doit être finalisé sur la version anglaise.</p> </div> diff --git a/files/fr/web/css/top/index.html b/files/fr/web/css/top/index.html index 679efee57d..c07040d0aa 100644 --- a/files/fr/web/css/top/index.html +++ b/files/fr/web/css/top/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/top <div>{{EmbedInteractiveExample("pages/css/top.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>L'effet de la propriété <code>top</code> dépend de la façon dont l'élément est positionné (autrement dit, il dépend de la valeur de la propriété {{cssxref("position")}}) :</p> <ul> diff --git a/files/fr/web/css/touch-action/index.html b/files/fr/web/css/touch-action/index.html index 02ac50d507..bd126a4d85 100644 --- a/files/fr/web/css/touch-action/index.html +++ b/files/fr/web/css/touch-action/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/touch-action <p>La propriété <strong><code>touch-action</code></strong> définit si une région donnée peut être manipulée par l'utilisateur grâce à des interactions tactiles (en déplaçant ou en zoomant) et comment cette interaction fonctionnera.</p> -<pre class="brush:css no-line-numbers notranslate">/* Avec un mot-clé */ +<pre class="brush:css no-line-numbers">/* Avec un mot-clé */ touch-action: auto; touch-action: none; touch-action: pan-x; @@ -35,7 +35,7 @@ touch-action: unset; <p>Lorsqu'une interaction tactile a lieu, le navigateur inspecte les valeurs de <code>touch-action</code> pour l'élément et ses ancêtres jusqu'à atteindre l'élément qui implémente le geste (c'est-à-dire celui qui peut défiler/zoomer). En pratique, <code>touch-action</code> est généralement uniquement appliquée aux éléments de plus haut niveau ayant besoin d'un comportement spécifique. Il n'est pas nécessaire de redéfinir <code>touch-action</code> sur les descendants.</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Lorsqu'un geste est déjà initié, tout changement sur <code>touch-action</code> n'aura aucun impact sur le geste en cours.</p> </div> @@ -77,7 +77,7 @@ touch-action: unset; <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><ul>Ma list +<pre class="brush: html"><ul>Ma list <li>UnLongTexteQuiDevraitTenirSurUneLigneHeureusementQuOnAOverflowScroll</li> <li>UnAutreLongTexteQuiDevraitTenirSurUneLigneHeureusementQuOnAOverflowScroll</li> </ul> @@ -85,7 +85,7 @@ touch-action: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">ul { +<pre class="brush: css">ul { width: 200px; height: 50px; overflow-x: scroll; @@ -100,7 +100,7 @@ ul > li { <p>{{EmbedLiveSample('Exemples')}}</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> La propriété <code>touch-action</code> est également utilisée afin de supprimer le délai donné à l'évènement {{event("click")}} pour prendre en charge le zoom via la double-touche.</p> </div> diff --git a/files/fr/web/css/transform-function/index.html b/files/fr/web/css/transform-function/index.html index 152a9424d1..edcbd6edd3 100644 --- a/files/fr/web/css/transform-function/index.html +++ b/files/fr/web/css/transform-function/index.html @@ -17,27 +17,25 @@ translation_of: Web/CSS/transform-function <h3 id="Le_système_de_coordonnées_cartésiennes">Le système de coordonnées cartésiennes</h3> -<p><a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="/files/3438/coord_in_R2.png" style="float: right; width: 171px;"></a></p> +<p><img src="coord_in_r2.png"></p> -<p>Pour <a class="external" href="https://fr.wikipedia.org/wiki/Coordonn%C3%A9es_cart%C3%A9siennes">le système cartésien</a>, chaque point de l'espace est décrit avec deux valeurs, l'abscisse et l'ordonnée. L'origine du repère <code>(0, 0)</code> correspond au coin supérieur gauche de l'élément. À la différence des conventions usuelles, l'axe verticale (<em>y</em>) se dirige vers le bas. Chaque point est décrit avec la notation <code>(x,y)</code>.</p> +<p>Pour <a href="https://fr.wikipedia.org/wiki/Coordonn%C3%A9es_cart%C3%A9siennes">le système cartésien</a>, chaque point de l'espace est décrit avec deux valeurs, l'abscisse et l'ordonnée. L'origine du repère <code>(0, 0)</code> correspond au coin supérieur gauche de l'élément. À la différence des conventions usuelles, l'axe verticale (<em>y</em>) se dirige vers le bas. Chaque point est décrit avec la notation <code>(x,y)</code>.</p> <p>Chaque fonction linéaire est décrite avec une matrice 2 x 2 :</p> -<div style="text-align: center;"> <p><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></p> -</div> <p>L'application d'une transformation consiste à multiplier la matrice de transformation au vecteur de coordonnées <code>(x,y)</code> :</p> -<p style="text-align: center;"><math> <mfenced> <mtable> <mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd></mtr> <mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd></mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr><mtd><mi>x</mi></mtd></mtr><mtr><mtd><mi>y</mi></mtd></mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd><mi>a</mi><mi>x</mi><mo>+</mo><mi>c</mi><mi>y</mi></mtd> </mtr> <mtr> <mtd><mi>b</mi><mi>x</mi><mo>+</mo><mi>d</mi><mi>y</mi></mtd> </mtr> </mtable> </mfenced> </math></p> +<p><math> <mfenced> <mtable> <mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd></mtr> <mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd></mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr><mtd><mi>x</mi></mtd></mtr><mtr><mtd><mi>y</mi></mtd></mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd><mi>a</mi><mi>x</mi><mo>+</mo><mi>c</mi><mi>y</mi></mtd> </mtr> <mtr> <mtd><mi>b</mi><mi>x</mi><mo>+</mo><mi>d</mi><mi>y</mi></mtd> </mtr> </mtable> </mfenced> </math></p> <p>On peut appliquer plusieurs transformations les unes à la suite des autres :</p> -<p style="text-align: center;"><math> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>1</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>1</mn></msub></mtd> </mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>2</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>2</mn></msub></mtd> </mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> <mtr> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> </mtable> </mfenced> </math></p> +<p><math> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>1</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>1</mn></msub></mtd> </mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>2</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>2</mn></msub></mtd> </mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> <mtr> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> </mtable> </mfenced> </math></p> <p>En utilisant cette notation, on peut décrire et enchaîner (ou composer) la plupart des transformations : des rotations, des homothéties et des distorsions. Les transformations qui sont composées entre elles sont appliquées dans l'ordre, de droite à gauche. Une transformation qui n'est pas linéaire ne pourra pas être représentée par cet outil. Ainsi, l'opération de translation ne pourra pas être représentée par une matrice et devra être gérée à part.</p> -<p><a class="external" href="https://fr.wikipedia.org/wiki/August_Ferdinand_M%C3%B6bius">Les coordonnées homogènes de Möbius</a> utilisées en <a class="external" href="https://fr.wikipedia.org/wiki/G%C3%A9om%C3%A9trie_projective">géométrie projective</a> permettent d'obtenir des matrices de transformations 3x3. Bien que plus complexe et moins usitées, celles-ci permettent de représenter les translations car ces dernières correspondent à des fonctions linéaires pour cette algèbre.</p> +<p><a href="https://fr.wikipedia.org/wiki/August_Ferdinand_M%C3%B6bius">Les coordonnées homogènes de Möbius</a> utilisées en <a href="https://fr.wikipedia.org/wiki/G%C3%A9om%C3%A9trie_projective">géométrie projective</a> permettent d'obtenir des matrices de transformations 3x3. Bien que plus complexe et moins usitées, celles-ci permettent de représenter les translations car ces dernières correspondent à des fonctions linéaires pour cette algèbre.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -46,83 +44,73 @@ translation_of: Web/CSS/transform-function <h3 id="Matrices_de_transformation">Matrices de transformation</h3> <dl> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/matrix">matrix()</a></code></dt> - <dd>La fonction <code>matrix()</code> permet de définir une matrice de transformation homogène en deux dimensions. Cette matrice contient six coefficients. Les valeurs constantes de ces matrices sont implicites et ne font donc pas partie des paramètres. Les autres paramètres sont décrits dans l'ordre des colonnes.</dd> - <dd><code>matrix(a, b, c, d, tx, ty)</code> est une notation raccourcie pour <code>matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code>.</dd> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/matrix3d">matrix3d()</a></code></dt> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/matrix()">matrix()</a></code></dt> + <dd>La fonction <code>matrix()</code> permet de définir une matrice de transformation homogène en deux dimensions. Cette matrice contient six coefficients. Les valeurs constantes de ces matrices sont implicites et ne font donc pas partie des paramètres. Les autres paramètres sont décrits dans l'ordre des colonnes. <code>matrix(a, b, c, d, tx, ty)</code> est une notation raccourcie pour <code>matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code>.</dd> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/matrix3d()">matrix3d()</a></code></dt> <dd>La fonction <code>matrix3d()</code> permet de définir une transformation en trois dimensions grâce à une matrice homogène 4x4. Les 16 paramètres sont décrits dans l'ordre des colonnes.</dd> </dl> <h3 id="Perspective">Perspective</h3> <dl> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/perspective">perspective()</a></code></dt> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/perspective()">perspective()</a></code></dt> <dd>La fonction <code>perspective()</code> définit la distance entre le plan de coordonnées z=0 et l'œil de l'utilisateur. Cela permet de placer une perspective en trois dimensions sur l'élément. Chaque élément 3D pour lequel z est supérieur à 0 devient plus grand et chaque élément pour lequel z est négatif devient plus petit.</dd> </dl> <h3 id="Rotation">Rotation</h3> <dl> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotate">rotate()</a></code></dt> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotate()">rotate()</a></code></dt> <dd>La fonction <code>rotate()</code> définit une transformation qui déplace l'élément autour d'un point fixe (défini par la propriété {{cssxref("transform-origin")}}) sans le déformer. La quantité de mouvement est définie par l'angle passé en argument. Si la valeur fournie est positive, le mouvement se fait dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et sinon dans le sens inverse (sens <em>anti-horaire</em>).</dd> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code></dt> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotate3d()">rotate3d()</a></code></dt> <dd>La fonction <code>rotate3d()</code> définit une transformation qui déplace l'élément autour d'un axe donné, sans déformer l'élément. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et s'il est négatif, il se fera dans le sens anti-horaire. Contrairement aux rotations en deux dimensions (rotations <em>planes</em>), la composition des rotations en trois dimensions n'est pas commutative (autrement dit, l'ordre dans lequel elles sont appliquées a toute son importance).</dd> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotateX">rotateX()</a></code></dt> - <dd>La fonction <code>rotateX()</code> définit une transformation qui déplace un élément autour de l'axe des abscisses sans le déformer. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et s'il est négatif, il se fera dans le sens anti-horaire. L'origine de cette rotation est définie par la propriété {{cssxref("transform-origin")}}.</dd> - <dd><code>rotateX(a)</code> est une notation raccourcie pour <code>rotate3D(1, 0, 0, a)</code>.</dd> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotateY">rotateY()</a></code></dt> - <dd>La fonction <code>rotateY()</code> définit une transformation qui déplace un élément autour de l'axe des ordonnées sans le déformer. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et s'il est négatif, il se fera dans le sens anti-horaire. L'origine de cette rotation est définie par la propriété {{cssxref("transform-origin")}}.</dd> - <dd><code>rotateY(a)</code> est une notation raccourcie pour <code>rotate3D(0, 1, 0, a)</code>.</dd> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotateZ">rotateZ()</a></code></dt> - <dd>La fonction <code>rotateZ()</code> définit une transformation qui déplace un élément autour de l'axe Z sans le déformer. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et s'il est négatif, il se fera dans le sens anti-horaire. L'origine de cette rotation est définie par la propriété {{cssxref("transform-origin")}}.</dd> - <dd><code>rotateZ(a)</code> est une notation raccourcie pour <code>rotate3D(0, 0, 1, a)</code>.</dd> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotateX()">rotateX()</a></code></dt> + <dd>La fonction <code>rotateX()</code> définit une transformation qui déplace un élément autour de l'axe des abscisses sans le déformer. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et s'il est négatif, il se fera dans le sens anti-horaire. L'origine de cette rotation est définie par la propriété {{cssxref("transform-origin")}}. <code>rotateX(a)</code> est une notation raccourcie pour <code>rotate3D(1, 0, 0, a)</code>.</dd> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotateY()">rotateY()</a></code></dt> + <dd>La fonction <code>rotateY()</code> définit une transformation qui déplace un élément autour de l'axe des ordonnées sans le déformer. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et s'il est négatif, il se fera dans le sens anti-horaire. L'origine de cette rotation est définie par la propriété {{cssxref("transform-origin")}}. <code>rotateY(a)</code> est une notation raccourcie pour <code>rotate3D(0, 1, 0, a)</code>.</dd> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotateZ()">rotateZ()</a></code></dt> + <dd>La fonction <code>rotateZ()</code> définit une transformation qui déplace un élément autour de l'axe Z sans le déformer. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et s'il est négatif, il se fera dans le sens anti-horaire. L'origine de cette rotation est définie par la propriété {{cssxref("transform-origin")}}. <code>rotateZ(a)</code> est une notation raccourcie pour <code>rotate3D(0, 0, 1, a)</code>.</dd> </dl> <h3 id="Changement_d'échelle">Changement d'échelle</h3> <dl> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/scale">scale()</a></code></dt> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/scale()">scale()</a></code></dt> <dd>La fonction <code>scale()</code> modifie la taille d'un élément. Elle permet d'appliquer une homothétie définie par un vecteur. Ce vecteur décrit l'amplification ou la réduction de l'élément selon chacun des deux axes plans. Si les deux coordonnées sont égales, l'homothétie sera uniforme et la forme de l'élément sera conservée.</dd> - <dt><a href="/fr/docs/Web/CSS/transform-function/scale3d">scale3d()</a></dt> + <dt><a href="/fr/docs/Web/CSS/transform-function/scale3d()">scale3d()</a></dt> <dd>La fonction <code>scale3d()</code> modifie la taille d'un élément. Elle permet d'appliquer une homothétie définie par un vecteur. Ce vecteur décrit l'amplification ou la réduction de l'élément selon les trois axes. Si les trois coordonnées sont égales, l'homothétie sera uniforme et la forme de l'élément sera conservée.</dd> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/scaleX">scaleX()</a></code></dt> - <dd>La fonction <code>scaleX()</code> modifie l'abscisse de chaque point de l'élément en la multipliant par un facteur. Si ce facteur vaut 1, la fonction de transformation correspondra à l'identité. Cette transformation n'est pas isotropique et les angles de l'élément ne sont pas conservés. <code>scaleX(-1)</code> permet de définir une symétrie axiale qui passe par l'axe vertical de l'origine (définie par la propriété {{cssxref("transform-origin")}}).</dd> - <dd><code>scaleX(sx)</code> est une notation raccourcie pour <code>scale(sx, 1)</code> ou pour <code>scale3d(sx, 1, 1)</code>.</dd> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/scaleY">scaleY()</a></code></dt> - <dd>La fonction <code>scaleY()</code> modifie l'ordonnée de chaque point de l'élément en la multipliant par un facteur. Si ce facteur vaut 1, la fonction de transformation correspondra à l'identité. Cette transformation n'est pas isotropique et les angles de l'élément ne sont pas conservés. <code>scaleY(-1)</code> permet de définir une symétrie axiale qui passe par l'axe horizontal de l'origine (définie par la propriété {{cssxref("transform-origin")}}).</dd> - <dd><code>scaleY(sy)</code> est une notation raccourcie pour <code>scale(1, sy)</code> ou pour <code>scale3d(1, sy, 1)</code>.</dd> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></dt> - <dd>La fonction <code>scaleZ()</code> modifie la côte de chaque point de l'élément en la multipliant par un facteur. Si ce facteur vaut 1, la fonction de transformation correspondra à l'identité. Cette transformation n'est pas isotropique et les angles de l'élément ne sont pas conservés. <code>scaleZ(-1)</code> permet de définir une symétrie axiale qui passe par l'axe Z de l'origine (définie par la propriété {{cssxref("transform-origin")}}).</dd> - <dd><code>scaleZ(sz)</code> est une notation raccourcie pour <code>scale3d(1, 1, sz)</code>.</dd> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/scaleX()">scaleX()</a></code></dt> + <dd>La fonction <code>scaleX()</code> modifie l'abscisse de chaque point de l'élément en la multipliant par un facteur. Si ce facteur vaut 1, la fonction de transformation correspondra à l'identité. Cette transformation n'est pas isotropique et les angles de l'élément ne sont pas conservés. <code>scaleX(-1)</code> permet de définir une symétrie axiale qui passe par l'axe vertical de l'origine (définie par la propriété {{cssxref("transform-origin")}}). <code>scaleX(sx)</code> est une notation raccourcie pour <code>scale(sx, 1)</code> ou pour <code>scale3d(sx, 1, 1)</code>.</dd> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/scaleY()">scaleY()</a></code></dt> + <dd>La fonction <code>scaleY()</code> modifie l'ordonnée de chaque point de l'élément en la multipliant par un facteur. Si ce facteur vaut 1, la fonction de transformation correspondra à l'identité. Cette transformation n'est pas isotropique et les angles de l'élément ne sont pas conservés. <code>scaleY(-1)</code> permet de définir une symétrie axiale qui passe par l'axe horizontal de l'origine (définie par la propriété {{cssxref("transform-origin")}}). <code>scaleY(sy)</code> est une notation raccourcie pour <code>scale(1, sy)</code> ou pour <code>scale3d(1, sy, 1)</code>.</dd> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ()">scaleZ()</a></code></dt> + <dd>La fonction <code>scaleZ()</code> modifie la côte de chaque point de l'élément en la multipliant par un facteur. Si ce facteur vaut 1, la fonction de transformation correspondra à l'identité. Cette transformation n'est pas isotropique et les angles de l'élément ne sont pas conservés. <code>scaleZ(-1)</code> permet de définir une symétrie axiale qui passe par l'axe Z de l'origine (définie par la propriété {{cssxref("transform-origin")}}). <code>scaleZ(sz)</code> est une notation raccourcie pour <code>scale3d(1, 1, sz)</code>.</dd> </dl> <h3 id="Distorsions">Distorsions</h3> <dl> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/skew">skew()</a></code></dt> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/skew()">skew()</a></code></dt> <dd>La fonction <code>skew()</code> permet de décrire une distorsion de l'élément où chaque point est tourné d'un angle dans chaque direction. Plus le point est éloigné de l'origine, plus grande sera la transformation appliquée.</dd> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/skewX">skewX()</a></code></dt> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/skewX()">skewX()</a></code></dt> <dd>La fonction <code>skewX()</code> permet de distordre un élément dans la direction horizontale. Le résultat est obtenu en augmentant l'abscisse par une valeur proportionnelle à l'angle et à la distance par rapport à l'origine. Plus le point est éloigné de l'origine, plus grande sera la transformation appliquée.</dd> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/skewY">skewY()</a></code></dt> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/skewY()">skewY()</a></code></dt> <dd>La fonction <code>skewY()</code> permet de distordre un élément dans la direction verticale. Le résultat est obtenu en augmentant l'ordonnée par une valeur proportionnelle à l'angle et à la distance par rapport à l'origine. Plus le point est éloigné de l'origine, plus grande sera la transformation appliquée.</dd> </dl> <h3 id="Translations">Translations</h3> <dl> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/translate">translate()</a></code></dt> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/translate()">translate()</a></code></dt> <dd>La fonction <code>translate()</code> permet de déplacer un élément sur le plan formé par le document. Cette transformation est caractérisée par un vecteur contenant deux coordonnées dont chacune définit la quantité de déplacement horizontale et verticale.</dd> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/translate3d">translate3d()</a></code></dt> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/translate3d()">translate3d()</a></code></dt> <dd>La fonction <code>translate3d()</code> permet de déplacer un élément dans l'espace en 3D. Cette transformation est caractérisée par un vecteur en 3 dimensions dont les coordonnées définissent les quantités de déplacement respectives aux trois axes.</dd> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/translateX">translateX()</a></code></dt> - <dd>La fonction <code>translateX()</code> permet de déplacer un élément horizontalement dans le plan. Cette transformation est caractérisée par une valeur de type {{cssxref("<length>")}} qui définit la quantité de déplacement horizontal.</dd> - <dd><code>translateX(tx)</code>est une notation raccourcie pour <code>translate(tx, 0)</code>.</dd> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/translateY">translateY()</a></code></dt> - <dd>La fonction <code>translateY()</code> permet de déplacer un élément verticalement dans le plan. Cette transformation est caractérisée par une valeur de type {{cssxref("<length>")}} qui définit la quantité de déplacement vertical.</dd> - <dd><code>translateY(ty)</code> est une notation raccourcie pour <code>translate(0, ty)</code>.</dd> - <dt><code><a href="/fr/docs/Web/CSS/transform-function/translateZ">translateZ()</a></code></dt> - <dd>La fonction <code>translateZ()</code> permet de déplacer un élément sur l'axe z de l'espace en 3D. Cette transformation est caractérisée par une valeur de type {{cssxref("<length>")}} qui définit la quantité de déplacement.</dd> - <dd><code>translateZ(tz)</code> est une notation raccourcie pour <code>translate3d(0, 0, tz)</code>.</dd> + <dt><code><a href="/fr/docs/orphaned/Web/CSS/transform-function/translateX">translateX()</a></code></dt> + <dd>La fonction <code>translateX()</code> permet de déplacer un élément horizontalement dans le plan. Cette transformation est caractérisée par une valeur de type {{cssxref("<length>")}} qui définit la quantité de déplacement horizontal. <code>translateX(tx)</code>est une notation raccourcie pour <code>translate(tx, 0)</code>.</dd> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/translateY()">translateY()</a></code></dt> + <dd>La fonction <code>translateY()</code> permet de déplacer un élément verticalement dans le plan. Cette transformation est caractérisée par une valeur de type {{cssxref("<length>")}} qui définit la quantité de déplacement vertical. <code>translateY(ty)</code> est une notation raccourcie pour <code>translate(0, ty)</code>.</dd> + <dt><code><a href="/fr/docs/Web/CSS/transform-function/translateZ()">translateZ()</a></code></dt> + <dd>La fonction <code>translateZ()</code> permet de déplacer un élément sur l'axe z de l'espace en 3D. Cette transformation est caractérisée par une valeur de type {{cssxref("<length>")}} qui définit la quantité de déplacement. <code>translateZ(tz)</code> est une notation raccourcie pour <code>translate3d(0, 0, tz)</code>.</dd> </dl> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/transform-function/matrix()/index.html b/files/fr/web/css/transform-function/matrix()/index.html index 9e1068a7e0..1de0a89c3c 100644 --- a/files/fr/web/css/transform-function/matrix()/index.html +++ b/files/fr/web/css/transform-function/matrix()/index.html @@ -16,7 +16,7 @@ translation_of: Web/CSS/transform-function/matrix() <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">matrix(<var>a</var>, <var>b</var>, <var>c</var>, <var>d</var>, <var>tx</var>, <var>ty</var>) +<pre class="syntaxbox">matrix(<var>a</var>, <var>b</var>, <var>c</var>, <var>d</var>, <var>tx</var>, <var>ty</var>) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -58,12 +58,12 @@ translation_of: Web/CSS/transform-function/matrix() <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -100,13 +100,13 @@ translation_of: Web/CSS/transform-function/matrix() <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> <li>{{cssxref("transform")}}</li> <li>{{cssxref("<transform-function>")}}</li> - <li><code><a href="/fr/docs/Web/CSS/transform-function/matrix3d">matrix3d()</a></code></li> + <li><code><a href="/fr/docs/Web/CSS/transform-function/matrix3d()">matrix3d()</a></code></li> <li><a href="https://dev.opera.com/articles/understanding-the-css-transforms-matrix/">Comprendre les matrices de transformations CSS (en anglais)</a></li> </ul> diff --git a/files/fr/web/css/transform-function/matrix3d()/index.html b/files/fr/web/css/transform-function/matrix3d()/index.html index 0f638286b7..3090f30633 100644 --- a/files/fr/web/css/transform-function/matrix3d()/index.html +++ b/files/fr/web/css/transform-function/matrix3d()/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/transform-function/matrix3d() <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">matrix3d(<var>a1</var>, <var>b1</var>, <var>c1</var>, <var>d1</var>, <var>a2</var>, <var>b2</var>, <var>c2</var>, <var>d2</var>, <var>a3</var>, <var>b3</var>, <var>c3</var>, <var>d3</var>, <var>a4</var>, <var>b4</var>, <var>c4</var>, <var>d4</var>)</pre> +<pre class="syntaxbox">matrix3d(<var>a1</var>, <var>b1</var>, <var>c1</var>, <var>d1</var>, <var>a2</var>, <var>b2</var>, <var>c2</var>, <var>d2</var>, <var>a3</var>, <var>b3</var>, <var>c3</var>, <var>d3</var>, <var>a4</var>, <var>b4</var>, <var>c4</var>, <var>d4</var>)</pre> <h3 id="Valeurs">Valeurs</h3> @@ -24,7 +24,9 @@ translation_of: Web/CSS/transform-function/matrix3d() <dd>Les coefficients de type {{cssxref("<number>")}} qui définissent la translation à appliquer.</dd> </dl> -<div class="note"><strong>Note :</strong> Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs {{cssxref("<length>")}} pour les coefficients <code>a4</code>, <code>b4</code> et <code>c4</code>.</div> +<div class="note"> + <p><strong>Note :</strong> Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs {{cssxref("<length>")}} pour les coefficients <code>a4</code>, <code>b4</code> et <code>c4</code>.</p> +</div> <table class="standard-table"> <thead> @@ -50,12 +52,12 @@ translation_of: Web/CSS/transform-function/matrix3d() <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -75,7 +77,7 @@ translation_of: Web/CSS/transform-function/matrix3d() <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><div class="foo"> +<pre class="brush: html"><div class="foo"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quaerat sit soluta, quisquam exercitationem delectus qui unde in facere necessitatibus aut quia porro dolorem nesciunt enim, at consequuntur aliquam esse? @@ -84,7 +86,7 @@ translation_of: Web/CSS/transform-function/matrix3d() <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { width: 100%; } body { @@ -171,7 +173,7 @@ body { <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/perspective()/index.html b/files/fr/web/css/transform-function/perspective()/index.html index 0fb86405b6..bc9eb31839 100644 --- a/files/fr/web/css/transform-function/perspective()/index.html +++ b/files/fr/web/css/transform-function/perspective()/index.html @@ -15,13 +15,11 @@ translation_of: Web/CSS/transform-function/perspective() <div>{{EmbedInteractiveExample("pages/css/function-perspective.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La fonction de transformation <code>perspective()</code>s'applique à l'élément qu'on veut transformer. En revanche, les propriétés {{cssxref('perspective')}} et {{cssxref('perspective-origin')}} s'appliquent sur l'élément parent de l'enfant qu'on veut placer dans un espace 3D.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">perspective(<var>l</var>) +<pre class="syntaxbox">perspective(<var>l</var>) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -57,7 +55,7 @@ translation_of: Web/CSS/transform-function/perspective() <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">.face { +<pre class="brush: css">.face { position: absolute; width: 100px; height: 100px; @@ -102,7 +100,7 @@ p + div { <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p>Sans perspective :</p> +<pre class="brush: html"><p>Sans perspective :</p> <div class="no-perspective-box"> <div class="face front">A</div> <div class="face top">B</div> @@ -149,7 +147,7 @@ p + div { <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/rotate()/index.html b/files/fr/web/css/transform-function/rotate()/index.html index eedbb8b131..4754dd3bbc 100644 --- a/files/fr/web/css/transform-function/rotate()/index.html +++ b/files/fr/web/css/transform-function/rotate()/index.html @@ -18,7 +18,7 @@ translation_of: Web/CSS/transform-function/rotate() <p>L'angle de la rotation créée grâce à <code>rotate()</code> est fourni comme argument à cette fonction via une valeur de type {{cssxref("<angle>")}}. Si l'angle est positif, la rotation sera dans le sens des aiguilles d'une montre et s'il est négatif, elle sera dans le sens inverse des aiguilles d'une montre.</p> -<pre class="syntaxbox notranslate">rotate(<var>a</var>) +<pre class="syntaxbox">rotate(<var>a</var>) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -56,7 +56,7 @@ translation_of: Web/CSS/transform-function/rotate() <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { width: 80px; height: 80px; background-color: skyblue; @@ -70,7 +70,7 @@ translation_of: Web/CSS/transform-function/rotate() <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><div>Normal</div> +<pre class="brush: html"><div>Normal</div> <div class="tourne">Tourné</div></pre> <h4 id="Résultat">Résultat</h4> @@ -83,7 +83,7 @@ translation_of: Web/CSS/transform-function/rotate() <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { position: absolute; left: 40px; top: 40px; @@ -111,7 +111,7 @@ translation_of: Web/CSS/transform-function/rotate() <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><div>Normal</div> +<pre class="brush: html"><div>Normal</div> <div class="rotate">Tourné</div> <div class="rotate-translate">Tourné puis translaté</div> <div class="translate-rotate">Translaté puis tourné</div> @@ -142,12 +142,12 @@ translation_of: Web/CSS/transform-function/rotate() <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> <li>{{cssxref("transform")}}</li> <li>{{cssxref("<transform-function>")}}</li> - <li><code><a href="/fr/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code></li> + <li><code><a href="/fr/docs/Web/CSS/transform-function/rotate3d()">rotate3d()</a></code></li> </ul> diff --git a/files/fr/web/css/transform-function/rotate3d()/index.html b/files/fr/web/css/transform-function/rotate3d()/index.html index 29c8b92462..5086694692 100644 --- a/files/fr/web/css/transform-function/rotate3d()/index.html +++ b/files/fr/web/css/transform-function/rotate3d()/index.html @@ -14,15 +14,15 @@ translation_of: Web/CSS/transform-function/rotate3d() <div>{{EmbedInteractiveExample("pages/css/rotate3d.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Dans l'espace (en trois dimensions), les rotations ont trois degrés de liberté qui définissent l'axe de rotation. Cet axe est défini par un vecteur <code>[x, y, z]</code> et passe par l'origine du repère (définie grâce à la propriété {{cssxref("transform-origin")}}). Si le vecteur n'est pas normalisé (autrement dit, si la somme des carrés de ses trois composantes ne vaut pas 1), il sera normalisé par le moteur. Un vecteur qui ne peut être normalisé (par exemple le vecteur nul <code>[0, 0, 0]</code>) empêchera la rotation d'être appliquée mais la propriété CSS restera valide.</p> -<div class="note"><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</div> +<div class="note"> + <p><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>) +<pre class="syntaxbox">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -51,7 +51,8 @@ translation_of: Web/CSS/transform-function/rotate3d() <tr> <td colspan="2">Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions.</td> <td colspan="1"><math><mfenced><mtable><mtr><mtd>1<mo>+</mo>(1<mo>-</mo>cos(<mi>a</mi>))(<msup><mi>x</mi><mn>2</mn></msup><mo>-</mo>1)</mtd><mtd><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)+<mi>x</mi><mi>y</mi>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd><mo>-</mo><mi>y</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd></mtr><mtr><mtd><mo>-</mo><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>y</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd>1+(1-cos(a))(y2-1)</mtd><mtd><mi>x</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>y</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtr><mtd>ysin(a) + xz(1-cos(a))</mtd><mtd>-xsin(a)+yz(1-cos(a))</mtd><mtd>1+(1-cos(a))(z2-1)</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr> </mtr></mtable></mfenced></math></td> - <td colspan="1"><a href="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png"><img src="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png?size=webview" style="height: 61px; width: 522px;"></a></td> + <td><a href="/fr/docs/Web/CSS/transform-function/rotate3d()/transform-functions-rotate3d_hom4.png"><img + src="transform-functions-rotate3d_hom4.png"></a></td> </tr> </tbody> </table> @@ -62,12 +63,12 @@ translation_of: Web/CSS/transform-function/rotate3d() <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { perspective: 800px; } @@ -92,12 +93,12 @@ p { <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -134,7 +135,7 @@ p { <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/rotatex()/index.html b/files/fr/web/css/transform-function/rotatex()/index.html index 01fc488e05..63b2dd46fa 100644 --- a/files/fr/web/css/transform-function/rotatex()/index.html +++ b/files/fr/web/css/transform-function/rotatex()/index.html @@ -14,17 +14,17 @@ translation_of: Web/CSS/transform-function/rotateX() <div>{{EmbedInteractiveExample("pages/css/function-rotateX.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>L'axe de la rotation passe par l'origine du repère, définie par la propriété {{cssxref("transform-origin")}}.</p> <p><code>rotateX(a)</code> est une notation raccourcie, équivalente à <code>rotate3D(1, 0, 0, a)</code>.</p> -<div class="note"><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</div> +<div class="note"> + <p><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">rotateX(<em>a</em>) +<pre class="syntaxbox">rotateX(<em>a</em>) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -56,12 +56,12 @@ translation_of: Web/CSS/transform-function/rotateX() <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -98,7 +98,7 @@ translation_of: Web/CSS/transform-function/rotateX() <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/rotatey()/index.html b/files/fr/web/css/transform-function/rotatey()/index.html index 86d43fd733..9af6c84d3a 100644 --- a/files/fr/web/css/transform-function/rotatey()/index.html +++ b/files/fr/web/css/transform-function/rotatey()/index.html @@ -14,17 +14,17 @@ translation_of: Web/CSS/transform-function/rotateY() <div>{{EmbedInteractiveExample("pages/css/function-rotateY.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>L'axe de la rotation passe par l'origine du repère, définie par la propriété {{cssxref("transform-origin")}}.</p> <p><code>rotateY(a)</code> est une notation raccourcie, équivalente à <code>rotate3D(0, 1, 0, a)</code>.</p> -<div class="note"><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</div> +<div class="note"> + <p><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">rotateY(<em>a</em>) +<pre class="syntaxbox">rotateY(<em>a</em>) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -56,12 +56,12 @@ translation_of: Web/CSS/transform-function/rotateY() <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -98,7 +98,7 @@ translation_of: Web/CSS/transform-function/rotateY() <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/rotatez()/index.html b/files/fr/web/css/transform-function/rotatez()/index.html index 823e0355bc..25d3fbe461 100644 --- a/files/fr/web/css/transform-function/rotatez()/index.html +++ b/files/fr/web/css/transform-function/rotatez()/index.html @@ -14,17 +14,17 @@ translation_of: Web/CSS/transform-function/rotateZ() <div>{{EmbedInteractiveExample("pages/css/function-rotateZ.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>L'axe de la rotation passe par l'origine du repère, définie par la propriété {{cssxref("transform-origin")}}.</p> <p><code>rotateZ(a)</code> est une notation raccourcie équivalente à <code>rotate3D(0, 0, 1, a)</code>.</p> -<div class="note"><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</div> +<div class="note"> + <p><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">rotateZ(<em>a</em>) +<pre class="syntaxbox">rotateZ(<em>a</em>) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -56,12 +56,12 @@ translation_of: Web/CSS/transform-function/rotateZ() <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -98,7 +98,7 @@ translation_of: Web/CSS/transform-function/rotateZ() <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/scale()/index.html b/files/fr/web/css/transform-function/scale()/index.html index 055515f169..8931d28027 100644 --- a/files/fr/web/css/transform-function/scale()/index.html +++ b/files/fr/web/css/transform-function/scale()/index.html @@ -20,7 +20,9 @@ translation_of: Web/CSS/transform-function/scale() <p>Lorsque les coordonnées du vecteur sont en dehors de l'intervalle [<code>-1, 1]</code>, la transformation agrandit la taille de l'élément. Dans cet intervalle, l'élément est réduit.</p> -<div class="notecard note">La fonction <code>scale()</code> applique une transformation dans le plan (2D). S'il faut que la transformation soit appliquée dans l'espace (3D), on pourra utiliser la fonction <code>scale3D()</code>.</div> +<div class="note"> + <p><strong>Note :</strong> La fonction <code>scale()</code> applique une transformation dans le plan (2D). S'il faut que la transformation soit appliquée dans l'espace (3D), on pourra utiliser la fonction <code>scale3D()</code>.</p> +</div> <h2 id="syntax">Syntaxe</h2> diff --git a/files/fr/web/css/transform-function/scale3d()/index.html b/files/fr/web/css/transform-function/scale3d()/index.html index cddec8bdc7..3b4d05dde4 100644 --- a/files/fr/web/css/transform-function/scale3d()/index.html +++ b/files/fr/web/css/transform-function/scale3d()/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/transform-function/scale3d() <div>{{EmbedInteractiveExample("pages/css/function-scale3d.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La transformation appliquée est définie par un vecteur dont les coordonnées définissent l'amplitude de l'homothétie dans chaque direction. Si les trois coordonnées du vecteur sont égales, la transformation est isotropique et la forme de l'élément est conservée.</p> <p>Lorsque les composantes du vecteurs sont en dehors de l'intervalle <code>[-1, 1]</code>, la transformation agrandit l'élément dans le sens des coordonnées. Lorsque les composantes sont dans cet intervalle, cela réduit l'élément.</p> @@ -128,14 +126,14 @@ translation_of: Web/CSS/transform-function/scale3d() <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> <li>{{cssxref("transform")}}</li> <li>{{cssxref("<transform-function>")}}</li> - <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></li> - <li><code><a href="/fr/docs/Web/CSS/transform-function/translate3d">translate3d()</a></code></li> - <li><code><a href="/fr/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code></li> + <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ()">scaleZ()</a></code></li> + <li><code><a href="/fr/docs/Web/CSS/transform-function/translate3d()">translate3d()</a></code></li> + <li><code><a href="/fr/docs/Web/CSS/transform-function/rotate3d()">rotate3d()</a></code></li> </ul> diff --git a/files/fr/web/css/transform-function/scalex()/index.html b/files/fr/web/css/transform-function/scalex()/index.html index 231bc73da3..6ad769f97c 100644 --- a/files/fr/web/css/transform-function/scalex()/index.html +++ b/files/fr/web/css/transform-function/scalex()/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/transform-function/scaleX() <p>La fonction <strong><code>scaleX()</code></strong> permet de modifier l'abscisse de chaque sommet de l'élément par un facteur multiplicateur. L'homothétie obtenue n'est pas isotropique et les angles de l'élément ne sont pas conservés.</p> -<p><img src="https://mdn.mozillademos.org/files/12117/scaleX.png" style="height: 315px; width: 372px;"></p> +<p><img src="scalex.png"></p> <p><code>scaleX(sx)</code> est une notation raccourcie équivalente à <code>scale(sx, 1)</code> ou à <code>scale3d(sx, 1, 1)</code>.</p> @@ -126,13 +126,13 @@ translation_of: Web/CSS/transform-function/scaleX() <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleY">scaleY()</a></code></li> - <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></li> + <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleY()">scaleY()</a></code></li> + <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ()">scaleZ()</a></code></li> <li>{{cssxref("transform")}}</li> <li>{{cssxref("<transform-function>")}}</li> <li>{{cssxref("transform-origin")}}</li> diff --git a/files/fr/web/css/transform-function/scaley()/index.html b/files/fr/web/css/transform-function/scaley()/index.html index f8b82479b3..87bfff06db 100644 --- a/files/fr/web/css/transform-function/scaley()/index.html +++ b/files/fr/web/css/transform-function/scaley()/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/transform-function/scaleY() <p>La fonction <strong><code>scaleY()</code></strong> modifie l'ordonnée de chaque sommet de l'élément avec un facteur multiplicateur. L'homothétie n'est pas isotropique et les angles de l'élément ne sont pas conservés. La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}.</p> -<p><img src="https://mdn.mozillademos.org/files/12119/scaleY.png" style="height: 381px; width: 365px;"></p> +<p><img src="scaley.png"></p> <p><code>scaleY(sy)</code> est une notation raccourcie équivalente à <code>scale(1, sy)</code> ou à <code>scale3d(1, sy, 1)</code>.</p> @@ -20,7 +20,7 @@ translation_of: Web/CSS/transform-function/scaleY() <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">scaleY(s) +<pre class="syntaxbox">scaleY(s) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -56,12 +56,12 @@ translation_of: Web/CSS/transform-function/scaleY() <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -98,13 +98,13 @@ translation_of: Web/CSS/transform-function/scaleY() <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleX">scaleX()</a></code></li> - <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></li> + <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleX()">scaleX()</a></code></li> + <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ()">scaleZ()</a></code></li> <li>{{cssxref("transform")}}</li> <li>{{cssxref("<transform-function>")}}</li> <li>{{cssxref("transform-origin")}}</li> diff --git a/files/fr/web/css/transform-function/scalez()/index.html b/files/fr/web/css/transform-function/scalez()/index.html index 11324f1efb..ee98a35e12 100644 --- a/files/fr/web/css/transform-function/scalez()/index.html +++ b/files/fr/web/css/transform-function/scalez()/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/transform-function/scaleZ() <div>{{EmbedInteractiveExample("pages/css/function-scaleZ.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p><code>scaleZ(sz)</code> est une notation raccourcie équivalente à <code>scale3d(1, 1, sz)</code>.</p> <p><code>scaleZ(-1)</code> définit une symétrie axiale selon l'axe Z qui passe par l'origine (définie grâce à la propriété {{cssxref("transform-origin")}}).</p> @@ -104,13 +102,13 @@ translation_of: Web/CSS/transform-function/scaleZ() <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleX">scaleX()</a></code></li> - <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleY">scaleY()</a></code></li> + <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleX()">scaleX()</a></code></li> + <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleY()">scaleY()</a></code></li> <li>{{cssxref("transform")}}</li> <li>{{cssxref("<transform-function>")}}</li> <li>{{cssxref("transform-origin")}}</li> diff --git a/files/fr/web/css/transform-function/skew()/index.html b/files/fr/web/css/transform-function/skew()/index.html index 96a2973536..12d228ec71 100644 --- a/files/fr/web/css/transform-function/skew()/index.html +++ b/files/fr/web/css/transform-function/skew()/index.html @@ -14,13 +14,11 @@ translation_of: Web/CSS/transform-function/skew() <div>{{EmbedInteractiveExample("pages/css/function-skew.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">skew(<em>ax</em>) +<pre class="syntaxbox">skew(<em>ax</em>) skew(<em>ax</em>, <em>ay</em>) </pre> @@ -61,12 +59,12 @@ skew(<em>ax</em>, <em>ay</em>) <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -87,12 +85,12 @@ skew(<em>ax</em>, <em>ay</em>) <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -129,7 +127,7 @@ skew(<em>ax</em>, <em>ay</em>) <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/skewx()/index.html b/files/fr/web/css/transform-function/skewx()/index.html index 2dde08e015..5fefac8327 100644 --- a/files/fr/web/css/transform-function/skewx()/index.html +++ b/files/fr/web/css/transform-function/skewx()/index.html @@ -14,15 +14,13 @@ translation_of: Web/CSS/transform-function/skewX() <div>{{EmbedInteractiveExample("pages/css/function-skewX.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}.</p> -<p><code>skewX(a)</code> est équivalent à <code><a href="/fr/docs/Web/CSS/transform-function/skew">skew(a)</a></code>.</p> +<p><code>skewX(a)</code> est équivalent à <code><a href="/fr/docs/Web/CSS/transform-function/skew()">skew(a)</a></code>.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">skewX(a) +<pre class="syntaxbox">skewX(a) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -58,12 +56,12 @@ translation_of: Web/CSS/transform-function/skewX() <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -100,7 +98,7 @@ translation_of: Web/CSS/transform-function/skewX() <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/skewy()/index.html b/files/fr/web/css/transform-function/skewy()/index.html index bff12a7055..06b1e83c24 100644 --- a/files/fr/web/css/transform-function/skewy()/index.html +++ b/files/fr/web/css/transform-function/skewy()/index.html @@ -14,13 +14,11 @@ translation_of: Web/CSS/transform-function/skewY() <div>{{EmbedInteractiveExample("pages/css/function-skewY.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">skewY(a) +<pre class="syntaxbox">skewY(a) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -56,12 +54,12 @@ translation_of: Web/CSS/transform-function/skewY() <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -98,7 +96,7 @@ translation_of: Web/CSS/transform-function/skewY() <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/translate()/index.html b/files/fr/web/css/transform-function/translate()/index.html index 4e1eb7e81a..15604a6a3e 100644 --- a/files/fr/web/css/transform-function/translate()/index.html +++ b/files/fr/web/css/transform-function/translate()/index.html @@ -12,13 +12,13 @@ translation_of: Web/CSS/transform-function/translate() <p>La fonction <strong><code>translate()</code></strong> permet de déplacer un élément sur le plan représenté par le document. Cette transformation est définie à l'aide d'un vecteur dont les coordonnées définissent la quantité de déplacement sur chaque axe (horizontal et vertical).</p> -<p><img src="https://mdn.mozillademos.org/files/12121/translate.png" style="height: 195px; width: 249px;"></p> +<p><img src="translate.png"></p> <p>La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">translate(tx) +<pre class="syntaxbox">translate(tx) translate(tx, ty) </pre> @@ -61,13 +61,13 @@ translate(tx, ty) <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p> <p>toto</p></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -88,13 +88,13 @@ translate(tx, ty) <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p> <p>toto</p></pre> <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -131,7 +131,7 @@ translate(tx, ty) <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/translate3d()/index.html b/files/fr/web/css/transform-function/translate3d()/index.html index 650c9b714f..81d6f690e5 100644 --- a/files/fr/web/css/transform-function/translate3d()/index.html +++ b/files/fr/web/css/transform-function/translate3d()/index.html @@ -14,13 +14,11 @@ translation_of: Web/CSS/transform-function/translate3d() <div>{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">translate3d(tx, ty, tz) +<pre class="syntaxbox">translate3d(tx, ty, tz) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -60,13 +58,13 @@ translation_of: Web/CSS/transform-function/translate3d() <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p>Statique</p> +<pre class="brush: html"><p>Statique</p> <p class="transformation">Bougé</p> <p>Statique</p></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 60px; height: 60px; background-color: skyblue; @@ -87,13 +85,13 @@ translation_of: Web/CSS/transform-function/translate3d() <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><p>Statique</p> +<pre class="brush: html"><p>Statique</p> <p class="transformation">Bougé</p> <p>Statique</p></pre> <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 60px; height: 60px; background-color: skyblue; @@ -130,7 +128,7 @@ translation_of: Web/CSS/transform-function/translate3d() <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/translatey()/index.html b/files/fr/web/css/transform-function/translatey()/index.html index 80ae24352c..a6e0d052c0 100644 --- a/files/fr/web/css/transform-function/translatey()/index.html +++ b/files/fr/web/css/transform-function/translatey()/index.html @@ -12,13 +12,13 @@ translation_of: Web/CSS/transform-function/translateY() <p>La fonction <code><strong>translateY()</strong></code> permet de déplacer un élement verticalement sur le plan. Cette transformation est caractérisée par une longueur (type {{cssxref("<length>")}}) qui définit l'amplitude du déplacement. La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}.</p> -<p><img src="https://mdn.mozillademos.org/files/12125/translateY.png" style="height: 195px; width: 243px;"></p> +<p><img src="translatey.png"></p> <p><code>translateY(ty)</code> est une notation raccourcie équivalente à <code>translate(0, ty)</code>.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">translateY(t) +<pre class="syntaxbox">translateY(t) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -56,13 +56,13 @@ translation_of: Web/CSS/transform-function/translateY() <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p> <p>toto</p></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -99,7 +99,7 @@ translation_of: Web/CSS/transform-function/translateY() <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/translatez()/index.html b/files/fr/web/css/transform-function/translatez()/index.html index d55e4a1279..3d2e30c77b 100644 --- a/files/fr/web/css/transform-function/translatez()/index.html +++ b/files/fr/web/css/transform-function/translatez()/index.html @@ -14,15 +14,13 @@ translation_of: Web/CSS/transform-function/translateZ() <div>{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p><code>translateZ(tz)</code> est un raccourci équivalent à <code>translate3d(0, 0, tz)</code>.</p> <p>Dans les exemples interactifs ci-avant, <code>perspective: 500px;</code> a été utilisée afin de créer un espace en trois dimensions et <code>transform-style: preserve-3d</code> permet de positionner les éléments enfants (les 6 faces du cube) dans cet espace 3D.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">translateZ(t) +<pre class="syntaxbox">translateZ(t) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -54,12 +52,12 @@ translation_of: Web/CSS/transform-function/translateZ() <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -101,13 +99,13 @@ translation_of: Web/CSS/transform-function/translateZ() <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> <li>{{cssxref("<transform-function>")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Les transformations CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Les transformations CSS</a></li> <li>{{cssxref("transform")}}</li> - <li>{{cssxref("transform-function/translateX", "translateX()")}} et {{cssxref("transform-function/translateY", "translateY()")}}</li> + <li>{{cssxref("transform-function/translateX", "translateX()")}} et {{cssxref("transform-function/translateY()", "translateY()")}}</li> </ul> diff --git a/files/fr/web/css/transform-origin/index.html b/files/fr/web/css/transform-origin/index.html index 55f9b309f7..d5c8888145 100644 --- a/files/fr/web/css/transform-origin/index.html +++ b/files/fr/web/css/transform-origin/index.html @@ -16,8 +16,6 @@ translation_of: Web/CSS/transform-origin <div>{{EmbedInteractiveExample("pages/css/transform-origin.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Par exemple, l'origine par défaut pour la fonction <code>rotate()</code> est le centre de la rotation. Cette propriété est utilisée en :</p> <ol> @@ -152,280 +150,191 @@ transform-origin: unset; <h2 id="Exemples">Exemples</h2> -<p>Voir la page sur <a class="internal" href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">l'utilisation des transformations CSS</a> pour des exemples supplémentaires.</p> +<p>Voir la page sur <a href="/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">l'utilisation des transformations CSS</a> pour des exemples supplémentaires.</p> -<table class="standard-table"> - <tbody> - <tr> - <th>Code</th> - <th>Exemple</th> - </tr> - <tr> - <td> - <p><code>transform: none;</code></p> - </td> - <td> - <div class="hidden" id="transform_none"> - <pre class="brush: html"> -<div class="box1">&nbsp;</div> -</pre> +<h3 id="a_demonstration_of_various_transform_values">Illustrations des différentes valeurs de transform</h3> - <pre class="brush: css"> -.box1 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; +<p>Cet exemple illustre ce que donnent les différentes valeurs de <code>transform-origin</code> pour différentes fonctions de transformation.</p> + +<pre class="brush: html hidden"> +<div class="container"> + +<div class="example"> + <div class="box box1">&nbsp;</div> + <div class="box original">&nbsp;</div> +</div> + +<pre> transform: none; -} -</pre> - </div> +</pre> - <p>{{EmbedLiveSample('transform_none', '', '120', '', '', 'no-button') }}</p> - </td> - </tr> - <tr> - <td> - <p><code>transform: rotate(30deg);</code></p> - </td> - <td> - <div class="hidden" id="transform_rotate_only"> - <pre class="brush: html"> -<div class="box2">&nbsp;</div> -</pre> +<div class="example"> + <div class="box box2">&nbsp;</div> + <div class="box original">&nbsp;</div> +</div> - <pre class="brush: css"> -.box2 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; +<pre> transform: rotate(30deg); -} -</pre> - </div> +</pre> - <p>{{EmbedLiveSample('transform_rotate_only', '', '120', '', '', 'no-button') }}</p> - </td> - </tr> - <tr> - <td> - <p><code>transform: rotate(30deg);<br> - transform-origin: 0 0;</code></p> - </td> - <td> - <div class="hidden" id="transform_rotate"> - <pre class="brush: html"> -<div class="box3">&nbsp;</div> -</pre> +<div class="example"> + <div class="box box3">&nbsp;</div> + <div class="box original">&nbsp;</div> +</div> - <pre class="brush: css"> -.box3 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; -transform-origin: 0 0; +<pre> transform: rotate(30deg); -} -</pre> - </div> +transform-origin: 0 0; +</pre> - <p>{{EmbedLiveSample('transform_rotate', '', '120', '', '', 'no-button') }}</p> - </td> - </tr> - <tr> - <td> - <p><code>transform: rotate(30deg);<br> - transform-origin: 100% 100%;</code></p> - </td> - <td> - <div class="hidden" id="transform_rotate_with_percentage"> - <pre class="brush: html"> -<div class="box4">&nbsp;</div> -</pre> +<div class="example"> + <div class="box box4">&nbsp;</div> + <div class="box original">&nbsp;</div> +</div> - <pre class="brush: css"> -.box4 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; +<pre> +transform: rotate(30deg); transform-origin: 100% 100%; +</pre> + +<div class="example"> + <div class="box box5">&nbsp;</div> + <div class="box original">&nbsp;</div> +</div> + +<pre> transform: rotate(30deg); -} -</pre> - </div> +transform-origin: -1em -3em; +</pre> - <p>{{EmbedLiveSample('transform_rotate_with_percentage', '', '120', '', '', 'no-button') }}</p> - </td> - </tr> - <tr> - <td> - <p><code>transform: rotate(30deg);<br> - transform-origin: -10em -30em;</code></p> - </td> - <td> - <div class="hidden" id="transform_rotate_with_em"> - <pre class="brush: html"> -<div class="box5">&nbsp;</div> +<div class="example"> + <div class="box box6">&nbsp;</div> + <div class="box original">&nbsp;</div> +</div> + +<pre> +transform: scale(1.7); +</pre> + +<div class="example"> + <div class="box box7">&nbsp;</div> + <div class="box original">&nbsp;</div> +</div> + +<pre> +transform: scale(1.7); +transform-origin: 0 0; +</pre> + +<div class="example"> + <div class="box box8">&nbsp;</div> + <div class="box original">&nbsp;</div> +</div> + +<pre> +transform: scale(1.7); +transform-origin: 100% -30%; +</pre> + +<div class="example"> + <div class="box box9">&nbsp;</div> + <div class="box original">&nbsp;</div> +</div> + +<pre> +transform: skewX(50deg); +transform-origin: 100% -30%; +</pre> + +<div class="example"> + <div class="box box10">&nbsp;</div> + <div class="box original">&nbsp;</div> +</div> + +<pre> +transform: skewY(50deg); +transform-origin: 100% -30%; +</pre> + +</div> </pre> - <pre class="brush: css"> -.box5 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; -transform-origin: -10em -30em; -transform: rotate(30deg); +<pre class="brush: css hidden"> +.container { + display: grid; + grid-template-columns: 200px 100px; + gap: 20px; } -</pre> - </div> - <p>{{EmbedLiveSample('transform_rotate_with_em', '', '120', '', '', 'no-button') }}</p> - </td> - </tr> - <tr> - <td> - <p><code>transform: scale(1.9);</code></p> - </td> - <td> - <div class="hidden" id="transform_scale_only"> - <pre class="brush: html"> -<div class="box6">&nbsp;</div> -</pre> +.example { + position: relative; + margin: 0 2em 4em 5em; +} - <pre class="brush: css"> -.box6 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; -transform: scale(1.9); +.box { + display: inline-block; + width: 3em; + height: 3em; + border: solid 1px; + background-color: palegreen; } -</pre> - </div> - <p>{{EmbedLiveSample('transform_scale_only', '', '120', '', '', 'no-button') }}</p> - </td> - </tr> - <tr> - <td> - <p><code>transform: scale(1.9);<br> - transform-origin: 0 0;</code></p> - </td> - <td> - <div class="hidden" id="transform_scale_without_origin"> - <pre class="brush: html"> -<div class="box7">&nbsp;</div> -</pre> +.original { + position: absolute; + left: 0; + opacity: 20%; +} - <pre class="brush: css"> -.box7 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; -transform: scale(1.9); -transform-origin: 0 0; +.box1 { + transform: none; } -</pre> - </div> - <p>{{EmbedLiveSample('transform_scale_without_origin', '', '120', '', '', 'no-button') }}</p> - </td> - </tr> - <tr> - <td> - <p><code>transform: scale(1.9);<br> - transform-origin: 100% -30%;</code></p> - </td> - <td> - <div class="hidden" id="transform_scale"> - <pre class="brush: html"> -<div class="box8">&nbsp;</div> -</pre> +.box2 { + transform: rotate(30deg); +} - <pre class="brush: css"> -.box8 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; -transform: scale(1.9); -transform-origin: 100% -30%; +.box3 { + transform: rotate(30deg); + transform-origin: 0 0; } -</pre> - </div> - <p>{{EmbedLiveSample('transform_scale', '', '120', '', '', 'no-button') }}</p> - </td> - </tr> - <tr> - <td> - <p><code>transform: skewX(50deg);<br> - transform-origin: 100% -30%;</code></p> - </td> - <td> - <div class="hidden" id="transform_skew_x"> - <pre class="brush: html"> -<div class="box9">&nbsp;</div> -</pre> +.box4 { + transform: rotate(30deg); + transform-origin: 100% 100%; +} - <pre class="brush: css"> -.box9 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; -transform: skewX(50deg); -transform-origin: 100% -30%; +.box5 { + transform: rotate(30deg); + transform-origin: -1em -3em; } -</pre> - </div> - <p>{{EmbedLiveSample('transform_skew_x', '', '120', '', '', 'no-button') }}</p> - </td> - </tr> - <tr> - <td> - <p><code>transform: skewY(50deg);<br> - transform-origin: 100% -30%;</code></p> - </td> - <td> - <div class="hidden" id="transform_skew_y"> - <pre class="brush: html"> -<div class="box10">&nbsp;</div> -</pre> +.box6 { + transform: scale(1.7); +} + +.box7 { + transform: scale(1.7); + transform-origin: 0 0; +} + +.box8 { + transform: scale(1.7); + transform-origin: 100% -30%; +} + +.box9 { + transform: skewX(50deg); + transform-origin: 100% -30%; +} - <pre class="brush: css"> .box10 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; -transform: skewY(50deg); -transform-origin: 100% -30%; + transform: skewY(50deg); + transform-origin: 100% -30%; } + </pre> - </div> - <p>{{EmbedLiveSample('transform_skew_y', '', '120', '', '', 'no-button') }}</p> - </td> - </tr> - </tbody> -</table> +<p>{{EmbedLiveSample('a_demonstration_of_various_transform_values', '', 1350) }}</p> <h2 id="Spécifications">Spécifications</h2> @@ -455,6 +364,6 @@ transform-origin: 100% -30%; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Utiliser les transformations CSS</a></li> <li><a href="https://css-tricks.com/almanac/properties/t/transform-origin/">https://css-tricks.com/almanac/properties/t/transform-origin/</a></li> </ul> diff --git a/files/fr/web/css/transform-style/index.html b/files/fr/web/css/transform-style/index.html index 7d61b02a8a..28415333d1 100644 --- a/files/fr/web/css/transform-style/index.html +++ b/files/fr/web/css/transform-style/index.html @@ -15,8 +15,6 @@ translation_of: Web/CSS/transform-style <div>{{EmbedInteractiveExample("pages/css/transform-style.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>S'ils sont aplanis, les éléments-fils n'auront pas d'espace tridimensionnel propre.</p> <p>Cette propriété n'est pas héritée et doit donc être définie sur tous les descendants de l'éléments qui ne sont pas des feuilles (autrement dit des descendants qui n'ont aucun fils).</p> diff --git a/files/fr/web/css/transform/index.html b/files/fr/web/css/transform/index.html index 3743527c47..f8340bbc01 100644 --- a/files/fr/web/css/transform/index.html +++ b/files/fr/web/css/transform/index.html @@ -14,12 +14,10 @@ translation_of: Web/CSS/transform <div>{{EmbedInteractiveExample("pages/css/transform.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Si la propriété est différente de <code>none</code>, un <a href="/fr/docs/Web/CSS/Comprendre_z-index/L'empilement_de_couches">contexte d'empilement</a> sera créé. Dans ce cas, l'élément agira comme le bloc englobant pour les éléments qu'il contient et qui ont <code>position</code><code>: fixed;</code> ou <code>position: absolute;</code>.</p> <div class="warning"> -<p><strong>Attention !</strong> Seuls certains éléments peuvent être transformés. Les éléments dont la disposition est gérée avec des <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Mod%C3%A8le_de_mise_en_forme_visuelle#Les_%C3%A9l%C3%A9ments_en_ligne_et_les_bo%C3%AEtes_en_ligne">boîtes en ligne non-remplacées</a>, des <a href="/fr/docs/Web/HTML/Element/col">colonnes de tableau</a> ou des <a href="/fr/docs/Web/HTML/Element/colgroup">groupes de colonnes de tableau</a> ne peuvent pas être transformés.</p> +<p><strong>Attention :</strong> Seuls certains éléments peuvent être transformés. Les éléments dont la disposition est gérée avec des <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Mod%C3%A8le_de_mise_en_forme_visuelle#Les_%C3%A9l%C3%A9ments_en_ligne_et_les_bo%C3%AEtes_en_ligne">boîtes en ligne non-remplacées</a>, des <a href="/fr/docs/Web/HTML/Element/col">colonnes de tableau</a> ou des <a href="/fr/docs/Web/HTML/Element/colgroup">groupes de colonnes de tableau</a> ne peuvent pas être transformés.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -80,13 +78,13 @@ transform: unset; {{csssyntax}} -<div class="blockIndicator note"> -<p><strong>Note :</strong> Si on utilise plusieurs fonctions dont <code><a href="/fr/docs/Web/CSS/transform-function/perspective">perspective()</a></code>, celle-ci devra apparaître en premier.</p> +<div class="note"> +<p><strong>Note :</strong> Si on utilise plusieurs fonctions dont <code><a href="/fr/docs/Web/CSS/transform-function/perspective()">perspective()</a></code>, celle-ci devra apparaître en premier.</p> </div> <h2 id="Exemples">Exemples</h2> -<p>Voir la page sur <a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">l'utilisation des transformations CSS</a>, {(cssxref("<transform-function>")}} ou l'exemple suivant.</p> +<p>Voir la page sur <a href="/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">l'utilisation des transformations CSS</a>, {(cssxref("<transform-function>")}} ou l'exemple suivant.</p> <h3 id="HTML">HTML</h3> @@ -152,7 +150,7 @@ transform: unset; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Utiliser les transformations CSS</a></li> <li>Le type de donnée {{cssxref("<transform-function>")}}</li> <li><a href="https://paulirish.com/2010/introducing-css3please/#comment-36380">Plus d'informations sur les rotations CSS3 et les filtres matriciels sur le blog de Paul Irish</a></li> </ul> diff --git a/files/fr/web/css/transition-delay/index.html b/files/fr/web/css/transition-delay/index.html index bb68973171..6282a0a5cc 100644 --- a/files/fr/web/css/transition-delay/index.html +++ b/files/fr/web/css/transition-delay/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/transition-delay <div>{{EmbedInteractiveExample("pages/css/transition-delay.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette durée peut être nulle, positive ou négative :</p> <ul> @@ -52,275 +50,75 @@ transition-delay: unset; <h2 id="Exemples">Exemples</h2> -<div> -<div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> -<p><code>transition-delay: 0.5s</code></p> +<h3 id="exemple_illustrant_differentes_temporisations">Exemple illustrant différentes temporisations</h3> -<div class="hidden"> -<pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> +<h4>HTML</h4> -<pre class="brush:css;">.parent { width: 250px; height:125px;} -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration:2s; - -webkit-transition-delay:0.5s; - -webkit-transition-timing-function: linear; - transition-property: width height background-color font-size left top color; - transition-duration:2s; - transition-delay:0.5s; - transition-timing-function: linear; -} -.box1{ - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top:25px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration:2s; - -webkit-transition-delay:0.5s; - -webkit-transition-timing-function: linear; - transition-property: width height background-color font-size left top color; - transition-duration:2s; - transition-delay:0.5s; - transition-timing-function: linear; -} -</pre> +<pre class="brush:html"> + <div class="box delay-1">0,5 secondes</div> -<pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); + <div class="box delay-2">2 secondes</div> - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; -} + <div class="box delay-3">4 secondes</div> -var intervalID = window.setInterval(updateTransition, 7000); + <button id="change">Changer</button> </pre> -</div> - -<div>{{EmbedLiveSample("delay_0_5s",275,150)}}</div> -</div> -<div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> -<p><code>transition-delay: 1s</code></p> +<h4>CSS</h4> -<div class="hidden"> -<pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - -<pre class="brush:css;">.parent { width: 250px; height:125px;} +<pre class="brush:css;"> .box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration:2s; - -webkit-transition-delay:1s; - -webkit-transition-timing-function: linear; - transition-property: width height background-color font-size left top color; - transition-duration:2s; - transition-delay:1s; - transition-timing-function: linear; -} -.box1{ - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top:25px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration:2s; - -webkit-transition-delay:1s; - -webkit-transition-timing-function: linear; - transition-property: width height background-color font-size left top color; - transition-duration:2s; - transition-delay:1s; - transition-timing-function: linear; + margin: 20px; + padding: 10px; + display: inline-block; + width: 100px; + height: 100px; + background-color: red; + font-size: 18px; + transition-property: background-color font-size transform color; + transition-timing-function: ease-in-out; + transition-duration: 3s; } -</pre> -<pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; +.transformed-state { + transform: rotate(270deg); + background-color: blue; + color: yellow; + font-size: 12px; + transition-property: background-color font-size transform color; + transition-timing-function: ease-in-out; + transition-duration: 3s; } -var intervalID = window.setInterval(updateTransition, 7000); -</pre> -</div> - -<div>{{EmbedLiveSample("delay_1s",275,150)}}</div> -</div> - -<div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> -<p><code>transition-delay: 2s</code></p> - -<div class="hidden"> -<pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - -<pre class="brush:css;">.parent { width: 250px; height:125px;} -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration:2s; - -webkit-transition-delay:2s; - -webkit-transition-timing-function: linear; - transition-property: width height background-color font-size left top color; - transition-duration:2s; - transition-delay:2s; - transition-timing-function: linear; +.delay-1 { + transition-delay: 0.5s; } -.box1{ - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top:25px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration:2s; - -webkit-transition-delay:2s; - -webkit-transition-timing-function: linear; - transition-property: width height background-color font-size left top color; - transition-duration:2s; - transition-delay:2s; - transition-timing-function: linear; -} -</pre> -<pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; +.delay-2 { + transition-delay: 2s; } -var intervalID = window.setInterval(updateTransition, 7000); -</pre> -</div> - -<div>{{EmbedLiveSample("delay_2s",275,150)}}</div> -</div> - -<div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> -<p><code>transition-delay: 4s</code></p> - -<div class="hidden"> -<pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - -<pre class="brush:css;">.parent { width: 250px; height:125px;} -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration:2s; - -webkit-transition-delay:4s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top color; - transition-duration:2s; - transition-delay:4s; - transition-timing-function: ease-in-out; -} -.box1{ - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top:25px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top color; - -webkit-transition-duration:2s; - -webkit-transition-delay:4s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top color; - transition-duration:2s; - transition-delay:4s; - transition-timing-function: ease-in-out; +.delay-3 { + transition-delay: 4s; } </pre> -<pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); +<h4>JavaScript</h4> - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; +<pre class="brush:js">function change() { + const elements = document.querySelectorAll("div.box"); + for (let element of elements) { + element.classList.toggle("transformed-state"); } - - return el; } -var intervalID = window.setInterval(updateTransition, 7000); +const changeButton = document.querySelector("#change"); +changeButton.addEventListener("click", change); </pre> -</div> -<div>{{EmbedLiveSample("delay_4s",275,150)}}</div> -</div> -</div> +<h4>Résultat</h4> + +<div>{{EmbedLiveSample("exemple_illustrant_differentes_temporisations",275,200)}}</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/transition-duration/index.html b/files/fr/web/css/transition-duration/index.html index 6cce9a7304..d24b28832a 100644 --- a/files/fr/web/css/transition-duration/index.html +++ b/files/fr/web/css/transition-duration/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/transition-duration <div>{{EmbedInteractiveExample("pages/css/transition-duration.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Il est possible de définir plusieurs durées, chacune sera appliquée à la propriété correspondante listée par {{cssxref("transition-property")}} (qui agit comme un index des propriétés impactées par les animations). S'il y a moins de durées que d'éléments dans cette liste, l'agent utilisateur dupliquera les durées. S'il y a trop de durées, la liste sera tronquée. Dans les deux cas, la déclaration CSS sera considérée comme valide.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -46,267 +44,74 @@ transition-duration: unset; <h2 id="Exemples">Exemples</h2> -<div> -<div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> -<p><code>transition-duration: 0.5s</code></p> +<h3 id="exemple_illustrant_differentes_durees">Exemple illustrant différentes durées</h3> -<div class="hidden"> -<pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> +<h4>HTML</h4> -<pre class="brush:css;">.parent { width: 250px; height:125px;} -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; - -webkit-transition-duration:0.5s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform -webkit-transform color; - transition-duration:0.5s; - transition-timing-function: ease-in-out; -} -.box1{ - transform: rotate(270deg); - -webkit-transform: rotate(270deg); - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top:25px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; - -webkit-transition-duration:0.5s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform -webkit-transformv color; - transition-duration:0.5s; - transition-timing-function: ease-in-out; -} -</pre> +<pre class="brush:html"> + <div class="box duration-1">0,5 secondes</div> -<pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); + <div class="box duration-2">2 secondes</div> - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; -} + <div class="box duration-3">4 secondes</div> -var intervalID = window.setInterval(updateTransition, 7000); + <button id="change">Changer</button> </pre> -</div> - -<div>{{EmbedLiveSample("duration_0_5s",275,150)}}</div> -</div> -<div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> -<p><code>transition-duration: 1s</code></p> +<h4>CSS</h4> -<div class="hidden"> -<pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - -<pre class="brush:css;">.parent { width: 250px; height:125px;} +<pre class="brush:css;"> .box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top -webkit-transform color; - -webkit-transition-duration:1s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform color; - transition-duration:1s; - transition-timing-function: ease-in-out; -} -.box1{ - transform: rotate(270deg); - -webkit-transform: rotate(270deg); - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top:25px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color; - -webkit-transition-duration:1s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform -webkit-transform color; - transition-duration:1s; - transition-timing-function: ease-in-out; + margin: 20px; + padding: 10px; + display: inline-block; + width: 100px; + height: 100px; + background-color: red; + font-size: 18px; + transition-property: background-color font-size transform color; + transition-timing-function: ease-in-out; } -</pre> -<pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; +.transformed-state { + transform: rotate(270deg); + background-color: blue; + color: yellow; + font-size: 12px; + transition-property: background-color font-size transform color; + transition-timing-function: ease-in-out; } -var intervalID = window.setInterval(updateTransition, 7000); -</pre> -</div> - -<div>{{EmbedLiveSample("duration_1s",275,150)}}</div> -</div> - -<div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> -<p><code>transition-duration: 2s</code></p> - -<div class="hidden"> -<pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - -<pre class="brush:css;">.parent { width: 250px; height:125px;} -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; - -webkit-transition-duration:2s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform -webkit-transform color; - transition-duration:2s; - transition-timing-function: ease-in-out; +.duration-1 { + transition-duration: 0.5s; } -.box1{ - transform: rotate(270deg); - -webkit-transform: rotate(270deg); - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top:25px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; - -webkit-transition-duration:2s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform -webkit-transform color; - transition-duration:2s; - transition-timing-function: ease-in-out; -} -</pre> -<pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); - - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; - } - - return el; +.duration-2 { + transition-duration: 2s; } -var intervalID = window.setInterval(updateTransition, 7000); -</pre> -</div> - -<div>{{EmbedLiveSample("duration_2s",275,150)}}</div> -</div> - -<div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> -<p><code>transition-duration: 4s</code></p> - -<div class="hidden"> -<pre class="brush:html"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </pre> - -<pre class="brush:css;">.parent { width: 250px; height:125px;} -.box { - width: 100px; - height: 100px; - background-color: red; - font-size: 20px; - left: 0px; - top: 0px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; - -webkit-transition-duration:4s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform -webkit-transform color; - transition-duration:4s; - transition-timing-function: ease-in-out; -} -.box1{ - transform: rotate(270deg); - -webkit-transform: rotate(270deg); - width: 50px; - height: 50px; - background-color: blue; - color: yellow; - font-size: 18px; - left: 150px; - top:25px; - position:absolute; - -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; - -webkit-transition-duration:4s; - -webkit-transition-timing-function: ease-in-out; - transition-property: width height background-color font-size left top transform -webkit-transform color; - transition-duration:4s; - transition-timing-function: ease-in-out; +.duration-3 { + transition-duration: 4s; } </pre> -<pre class="brush:js">function updateTransition() { - var el = document.querySelector("div.box"); +<h4>JavaScript</h4> - if (el) { - el.className = "box1"; - } else { - el = document.querySelector("div.box1"); - el.className = "box"; +<pre class="brush:js">function change() { + const elements = document.querySelectorAll("div.box"); + for (let element of elements) { + element.classList.toggle("transformed-state"); } - - return el; } -var intervalID = window.setInterval(updateTransition, 7000); +const changeButton = document.querySelector("#change"); +changeButton.addEventListener("click", change); </pre> -</div> -<div>{{EmbedLiveSample("duration_4s",275,150)}}</div> -</div> -</div> +<h4>Résultat</h4> + +<div>{{EmbedLiveSample("exemple_illustrant_differentes_durees",275,200)}}</div> + <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/transition-property/index.html b/files/fr/web/css/transition-property/index.html index 00c908f33c..cae24ac372 100644 --- a/files/fr/web/css/transition-property/index.html +++ b/files/fr/web/css/transition-property/index.html @@ -9,13 +9,13 @@ translation_of: Web/CSS/transition-property --- <div>{{CSSRef}}</div> -<p>La propriété <strong><code>transition-property</code></strong> désigne les noms des propriétés CSS sur lesquelles <a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">un effet de transition</a> devrait être appliqué.</p> +<p>La propriété <strong><code>transition-property</code></strong> désigne les noms des propriétés CSS sur lesquelles <a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">un effet de transition</a> devrait être appliqué.</p> <div>{{EmbedInteractiveExample("pages/css/transition-property.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<div class="note"><strong>Note :</strong> <a href="/fr/docs/Web/CSS/Liste_propriétés_CSS_animées">L'ensemble des propriétés CSS qui peuvent être animées</a> évolue. Vous devriez donc éviter de lister ici des propriétés qui, actuellement, ne sont pas animées car elles pourraient l'être demain et cela pourrait affecter votre document.</div> +<div class="note"> + <p><strong>Note :</strong> <a href="/fr/docs/Web/CSS/CSS_animated_properties">L'ensemble des propriétés CSS qui peuvent être animées</a> évolue. Vous devriez donc éviter de lister ici des propriétés qui, actuellement, ne sont pas animées car elles pourraient l'être demain et cela pourrait affecter votre document.</p> +</div> <p>Si vous définissez une propriété raccourcie (par exemple {{cssxref("background")}}), toutes les propriétés détaillées correspondantes seront animées de la même façon.</p> @@ -90,6 +90,6 @@ transition-property: unset; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">Utiliser les transitions CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">Utiliser les transitions CSS</a></li> <li>{{domxref("TransitionEvent")}}</li> </ul> diff --git a/files/fr/web/css/transition-timing-function/index.html b/files/fr/web/css/transition-timing-function/index.html index 6e456d5893..6581f0d272 100644 --- a/files/fr/web/css/transition-timing-function/index.html +++ b/files/fr/web/css/transition-timing-function/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/transition-timing-function <div>{{EmbedInteractiveExample("pages/css/transition-timing-function.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cette courbe d'accelération est définie en utilisant une {{cssxref("<timing-function>")}} pour chacune des propriétés à animer.</p> <p>Il est possible de définir plusieurs fonctions de temporisation dans une même déclaration ; chacune sera appliquée à la propriété correspondante listée avec la propriété {{cssxref("transition-property")}}, qui agit comme liste maîtresse :</p> @@ -112,8 +110,7 @@ transition-timing-function: unset; <div> <h3 id="Courbes_de_Bézier_cubiques">Courbes de Bézier cubiques</h3> -<div class="hidden"> -<pre class="brush:html"><div class="parent"> +<pre class="brush:html hidden"><div class="parent"> <div class="ease">ease</div> <div class="easein">ease-in</div> <div class="easeout">ease-out</div> @@ -122,7 +119,7 @@ transition-timing-function: unset; <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div> </div></pre> -<pre class="brush:css;">.parent {} +<pre class="brush:css hidden">.parent {} .parent > div[class] { width: 12em; min-width: 12em; @@ -144,7 +141,7 @@ transition-timing-function: unset; } </pre> -<pre class="brush:js">function updateTransition() { +<pre class="brush:js hidden">function updateTransition() { var els = document.querySelectorAll(".parent > div[class]"); for(var c = els.length, i = 0; i < c; i++) { els[i].classList.toggle("box1"); @@ -153,7 +150,6 @@ transition-timing-function: unset; var intervalID = window.setInterval(updateTransition, 10000); </pre> -</div> <pre class="brush: css">.ease { transition-timing-function: ease; @@ -180,8 +176,7 @@ var intervalID = window.setInterval(updateTransition, 10000); <div> <h3 id="Fonctions_en_créneaux">Fonctions en créneaux</h3> -<div class="hidden"> -<pre class="brush:html"><div class="parent"> +<pre class="brush:html hidden"><div class="parent"> <div class="jump-start">jump-start</div> <div class="jump-end">jump-end</div> <div class="jump-both">jump-both</div> @@ -190,7 +185,7 @@ var intervalID = window.setInterval(updateTransition, 10000); <div class="step-end">step-end</div> </div></pre> -<pre class="brush:css;">.parent {} +<pre class="brush:css hidden">.parent {} .parent > div[class] { width: 12em; min-width: 12em; @@ -212,7 +207,7 @@ var intervalID = window.setInterval(updateTransition, 10000); } </pre> -<pre class="brush:js">function updateTransition() { +<pre class="brush:js hidden">function updateTransition() { var els = document.querySelectorAll(".parent > div[class]"); for(var c = els.length, i = 0; i < c; i++) { els[i].classList.toggle("box1"); @@ -221,7 +216,6 @@ var intervalID = window.setInterval(updateTransition, 10000); var intervalID = window.setInterval(updateTransition, 10000); </pre> -</div> <pre class="brush: css">.jump-start { transition-timing-function: steps(5, jump-start); diff --git a/files/fr/web/css/transition/index.html b/files/fr/web/css/transition/index.html index f76a4e0332..878ab25a78 100644 --- a/files/fr/web/css/transition/index.html +++ b/files/fr/web/css/transition/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/transition <div>{{EmbedInteractiveExample("pages/css/transition.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Elle permet de définir la transition entre deux états d'un élément. Les différents états peuvent être définis à l'aide <a href="/fr/docs/Web/CSS/Pseudo-classes">de pseudo-classes</a> telles que {{cssxref(":hover")}} ou {{cssxref(":active")}} ou être définis dynamiquement avec JavaScript.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/css/translate/index.html b/files/fr/web/css/translate/index.html index 32b553ce6b..fe27ca5f8b 100644 --- a/files/fr/web/css/translate/index.html +++ b/files/fr/web/css/translate/index.html @@ -38,7 +38,7 @@ translate: 50% 105px 5rem; <dd>Deux longueurs ({{cssxref("<length>")}}) ou pourcentages ({{cssxref("<percentage>")}}) qui définissent respectivement les composantes horizontale et verticale d'une translation en deux dimensions. Cela est équivalent à la fonction <code>translate()</code> appelée avec ces deux arguments.</dd> <dt>Trois valeurs</dt> <dd>Deux valeurs de longueur/pourcentage ({{cssxref("<length-percentage>")}}) et une longueur ({{cssxref("<length>")}}) qui définissent respectivement les composantes horizontale, verticale et en profondeur de la translation en trois dimensions. Cela est équivalent à la fonction <code>translate3d()</code> appelée avec ces trois arguments.</dd> - <dt id="none"><code>none</code></dt> + <dt><code>none</code></dt> <dd>Cette valeur indique qu'aucune translation ne devrait être appliquée.</dd> </dl> diff --git a/files/fr/web/css/unicode-bidi/index.html b/files/fr/web/css/unicode-bidi/index.html index b496a61a25..409716c23c 100644 --- a/files/fr/web/css/unicode-bidi/index.html +++ b/files/fr/web/css/unicode-bidi/index.html @@ -13,7 +13,9 @@ translation_of: Web/CSS/unicode-bidi <p>Les propriétés <code>unicode-bidi</code> et {{cssxref("direction")}} sont les deux seules propriétés qui ne sont pas impactées par {{cssxref("all")}}.</p> -<div class="note"><strong>Note :</strong> Cette propriété est d'abord destinée aux concepteurs de DTD, les auteurs Web ne devraient pas surcharger sa valeur.</div> +<div class="note"> + <p><strong>Note :</strong> Cette propriété est d'abord destinée aux concepteurs de DTD, les auteurs Web ne devraient pas surcharger sa valeur.</p> +</div> <pre class="brush:css no-line-numbers">/* Avec un mot-clé */ unicode-bidi: normal; diff --git a/files/fr/web/css/url()/index.html b/files/fr/web/css/url()/index.html index 732b22298c..9574edd651 100644 --- a/files/fr/web/css/url()/index.html +++ b/files/fr/web/css/url()/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/url() <p>La fonction CSS <code><strong>url</strong></code><strong><code>()</code></strong> est utilisée afin d'inclure un fichier. Le paramètre est une URL absolue, une URL relative ou un URI de donnée. La fonction <code><strong>url</strong></code><strong><code>()</code></strong> peut être utilisée comme paramètre d'une autre fonction comme {{cssxref('attr()')}}. Selon la propriété pour laquelle elle est utilisée, la ressource utilisée peut être une image, une police ou une feuille de stye.</p> -<p>La notation fonctionelle <code>url()</code> correspond au type de donnée CSS <code><a href="/fr/docs/Web/CSS/url"><url></a></code>.</p> +<p>La notation fonctionelle <code>url()</code> correspond au type de donnée CSS <code><a href="/fr/docs/conflicting/Web/CSS/url()_168028c4e5edd9e19c061adb4b604d4f"><url></a></code>.</p> <pre class="brush: css no-line-numbers">/* Utilisation simple */ url(https://example.com/images/myImg.jpg); @@ -53,7 +53,7 @@ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); <p>Lorsque des URL relatives sont utilisées, elles sont relatives à l'URL de la feuille de style et pas à celle de la page web courante).</p> -<p class="task-list-item">La fonction <code><strong>url</strong></code><strong><code>()</code></strong> peut être incluse comme valeur pour les propriétés {{cssxref('background-image')}}, {{cssxref('border-image')}}, {{cssxref('list-style-image')}}, {{cssxref('content' )}}, {{cssxref('cursor')}}, {{cssxref('border-image')}}, {{cssxref('border-image-source')}}, comme descripteur <code><a href="/fr/docs/Web/CSS/@font-face/src">src</a></code> pour une règle <code><a href="/fr/docs/Web/CSS/@font-face">@font-face</a></code> ou <code><a href="/fr/docs/Web/CSS/@counter-style/symbols">@counter-style/symbol</a></code></p> +<p>La fonction <code><strong>url</strong></code><strong><code>()</code></strong> peut être incluse comme valeur pour les propriétés {{cssxref('background-image')}}, {{cssxref('border-image')}}, {{cssxref('list-style-image')}}, {{cssxref('content' )}}, {{cssxref('cursor')}}, {{cssxref('border-image')}}, {{cssxref('border-image-source')}}, comme descripteur <code><a href="/fr/docs/Web/CSS/@font-face/src">src</a></code> pour une règle <code><a href="/fr/docs/Web/CSS/@font-face">@font-face</a></code> ou <code><a href="/fr/docs/Web/CSS/@counter-style/symbols">@counter-style/symbol</a></code></p> <p>Dans la spécification CSS de niveau 1, la notation fonctionnelle <code>url()</code> ne permettait que de décrire des URL. Avec la spécification de niveau 2, la définition d'<code>url()</code> a été étendue afin de décrire n'importe quel URI, y compris des URI de données. Le module de spécification <em>CSS Values and Units</em> de niveau 3 est revenu à la définition initiale plus stricte. Aussi, à l'heure actuelle et formellement <code>url()</code> ne permet que de décrire des valeurs <code><url></code>.</p> @@ -64,27 +64,26 @@ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); <dl> <dt><code>string</code></dt> <dd> + <p>Une chaîne de caractères indiquant une URL ou l'identifiant d'une forme SVG.</p> <dl> <dt><code><url></code></dt> <dd>Une URL, relative ou absolue, qui pointe vers une ressource web à inclure ou un URI de donnée éventuellement encadrée entre quotes ou doubles quotes. Les quotes sont obligatoires si l'URL inclut des parenthèses, espaces, doubles quotes, etc. (sauf si ces caractères sont échappés) ou si l'adresse inclut des caractères de contrôle supérieurs à <code>0x7e</code>. Il n'est pas possible d'utiliser des doubles quotes dans une URL encadrée par des doubles quotes à moins de les échapper. De même, on ne peut pas utiliser une simple quote dans une URL délimitée par des simples quotes. Les déclarations suivantes seront équivalentes : <pre class="syntaxbox"><propriété_css>: url("https://example.com/image.png") <propriété_css>: url('https://example.com/image.png') <propriété_css>: url(https://example.com/image.png)</pre> + <p>Si vous choisissez d'écrire l'URL sans guillemets, il faudra utiliser une barre oblique inverse (<code>\</code>) avant toute parenthèse, espace ou apostrophe (<code>'</code>) ou guillemets(<code>"</code>) faisant partie de l'URL.</p> </dd> </dl> </dd> <dt><em>chemin</em></dt> <dd>La référence à un identifiant d'une <a href="/en-US/docs/Web/SVG/Tutorial/Basic_Shapes">forme SVG</a> -- <code>circle</code>, <code>ellipse</code>, <code>line</code>, <code>path</code>, <code>polygon</code>, <code>polyline</code>, or <code>rect</code>. Ce sera alors la géométrie de la forme qui sera utilisée pour le chemin.</dd> -</dl> - -<dl> <dt><code>url-modifier</code> {{Experimental_Inline}}</dt> <dd>À l'avenir, la fonction <code>url()</code> pourrait prendre en charge un modificateur tel qu'un identifiant ou une notation fonctionnelle qui modifierait le sens de l'URL. Cette valeur n'est pas complètement définie par la spécification et n'est pas prise en charge.</dd> </dl> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> -<pre class="syntaxbox">url( <a href="/fr/docs/Web/CSS/string"><string></a> <a href="/en-US/docs/"><url-modifier></a>* )</pre> +<pre class="syntaxbox">url( <a href="/fr/docs/Web/CSS/string"><string></a> <a href="/en-US/docs/Web"><url-modifier></a>* )</pre> <h2 id="Exemples">Exemples</h2> @@ -110,30 +109,26 @@ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); <h3 id="URI_de_données">URI de données</h3> -<div id="color-value"> <h4 id="HTML_2">HTML</h4> <pre class="brush: html"><div class="background"></div></pre> <h4 id="CSS_2">CSS</h4> -<div class="hidden"> -<pre class="brush: css">.background { +<pre class="brush: css hidden">.background { height: 100vh; }</pre> -</div> <pre class="brush: css highlight[6]">.background { background: yellow; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E"); }</pre> -</div> <h4 id="Résultat_2">Résultat</h4> <p>{{EmbedLiveSample("URI_de_données", "100%", 50)}}</p> -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> <thead> @@ -178,5 +173,5 @@ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); <li>{{cssxref("element()")}}</li> <li>{{cssxref("_image","image()")}}</li> <li>{{cssxref("image-set","image-set()")}}</li> - <li>{{cssxref("cross-fade")}}</li> + <li>{{cssxref("cross-fade()")}}</li> </ul> diff --git a/files/fr/web/css/used_value/index.html b/files/fr/web/css/used_value/index.html index 87c8cb6590..e27fe89bc7 100644 --- a/files/fr/web/css/used_value/index.html +++ b/files/fr/web/css/used_value/index.html @@ -30,7 +30,7 @@ original_slug: Web/CSS/Valeur_utilisée <h2 id="Différence_avec_les_valeurs_calculées">Différence avec les valeurs calculées</h2> -<p>CSS 2.0 définissait la <a href="/fr/docs/CSS/Valeur_calculée">valeur calculée</a> comme la dernière étape du calcul de la valeur. CSS 2.1 a introduit une définition distincte de la valeur utilisée afin qu'un élément puisse hériter d'une largeur ou d'une hauteur d'un parent de manière explicite si la valeur calculée du parent est un pourcentage. Pour les propriétés CSS qui ne dépendent pas de la mise en page (comme <code>display</code>, <code>font-size</code> ou <code>line-height</code>), les valeurs calculées et les valeurs utilisées sont identiques. Voici les propriétés qui dépendent de la mise en page et dont les valeurs calculées sont différentes des valeurs utilisées (extrait de <em><a class="external" href="https://www.w3.org/TR/CSS2/changes.html#q36">CSS 2.1 Changes: Specified, computed, and actual values</a></em>) :</p> +<p>CSS 2.0 définissait la <a href="/fr/docs/CSS/Valeur_calculée">valeur calculée</a> comme la dernière étape du calcul de la valeur. CSS 2.1 a introduit une définition distincte de la valeur utilisée afin qu'un élément puisse hériter d'une largeur ou d'une hauteur d'un parent de manière explicite si la valeur calculée du parent est un pourcentage. Pour les propriétés CSS qui ne dépendent pas de la mise en page (comme <code>display</code>, <code>font-size</code> ou <code>line-height</code>), les valeurs calculées et les valeurs utilisées sont identiques. Voici les propriétés qui dépendent de la mise en page et dont les valeurs calculées sont différentes des valeurs utilisées (extrait de <em><a href="https://www.w3.org/TR/CSS2/changes.html#q36">CSS 2.1 Changes: Specified, computed, and actual values</a></em>) :</p> <ul> <li><code>background-position</code></li> diff --git a/files/fr/web/css/user-modify/index.html b/files/fr/web/css/user-modify/index.html index ef32a0e9b1..400f9a8d37 100644 --- a/files/fr/web/css/user-modify/index.html +++ b/files/fr/web/css/user-modify/index.html @@ -24,10 +24,10 @@ user-modify: unset; </pre> <div class="warning"> -<p><strong>Attention !</strong> Cette propriété a été remplacée par l'attribut {{HTMLAttrxref("contenteditable")}}.</p> +<p><strong>Attention :</strong> Cette propriété a été remplacée par l'attribut {{HTMLAttrxref("contenteditable")}}.</p> </div> -<p>Cette propriété est similaire à l'attribut HTML {{htmlattrxref("contenteditable")}}. Une propriété similaire : <code>user-focus</code> a été proposée <a class="external" href="https://www.w3.org/TR/2000/WD-css3-userint-20000216">pour des brouillons de la spécification CSS3 pour les interfaces utilisateur</a> mais fut rejetée par le groupe de travail. <strong>Elle a été désactivée de Firefox et n'a donc pas d'effet.</strong></p> +<p>Cette propriété est similaire à l'attribut HTML {{htmlattrxref("contenteditable")}}. Une propriété similaire : <code>user-focus</code> a été proposée <a href="https://www.w3.org/TR/2000/WD-css3-userint-20000216">pour des brouillons de la spécification CSS3 pour les interfaces utilisateur</a> mais fut rejetée par le groupe de travail. <strong>Elle a été désactivée de Firefox et n'a donc pas d'effet.</strong></p> <h2 id="Syntaxe">Syntaxe</h2> @@ -71,7 +71,7 @@ user-modify: unset; <h2 id="Spécifications">Spécifications</h2> -<p><code>user-modify</code> a <a class="external" href="https://www.w3.org/TR/2000/WD-css3-userint-20000216#user-modify" lang="en">été proposée pour la spécification CSS 3 sur les interfaces utilisateurs</a> (le brouillon de travail de février 2000 qui est désormais remplacé par le module <em>Basic User Interface</em> de <em>CSS 3</em>).</p> +<p><code>user-modify</code> a <a href="https://www.w3.org/TR/2000/WD-css3-userint-20000216#user-modify">été proposée pour la spécification CSS 3 sur les interfaces utilisateurs</a> (le brouillon de travail de février 2000 qui est désormais remplacé par le module <em>Basic User Interface</em> de <em>CSS 3</em>).</p> <p>{{cssinfo}}</p> diff --git a/files/fr/web/css/user-select/index.html b/files/fr/web/css/user-select/index.html index 9129e7054d..6415ba1753 100644 --- a/files/fr/web/css/user-select/index.html +++ b/files/fr/web/css/user-select/index.html @@ -66,7 +66,7 @@ user-select: unset; </dl> <div class="note"> -<p id="Formal_syntax"><strong>Note :</strong> CSS UI 4 <a href="https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05">a renommé <code>user-select: element</code> en <code>contain</code></a>.</p> +<p><strong>Note :</strong> CSS UI 4 <a href="https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05">a renommé <code>user-select: element</code> en <code>contain</code></a>.</p> </div> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> diff --git a/files/fr/web/css/using_css_custom_properties/index.html b/files/fr/web/css/using_css_custom_properties/index.html index 718ed14de4..c9d8e4bce7 100644 --- a/files/fr/web/css/using_css_custom_properties/index.html +++ b/files/fr/web/css/using_css_custom_properties/index.html @@ -18,14 +18,14 @@ translation_of: Web/CSS/Using_CSS_custom_properties <p>Voici comment on déclare une variable :</p> -<pre class="brush:css; highlight:[2]">element { +<pre class="brush:css">element { --main-bg-color: brown; } </pre> <p>Et voici comment on l'utilise</p> -<pre class="brush:css; highlight:[2]">element { +<pre class="brush:css">element { background-color: var(--main-bg-color); } </pre> @@ -47,7 +47,9 @@ translation_of: Web/CSS/Using_CSS_custom_properties <li>les propriétés personnalisées, qui sont des propriétés spéciales notées <code>--*</code> où <code>*</code> représente le nom de la variable. Elles sont utilisées pour définir la valeur d'une variable donnée : <code>--example-variable: 20px;</code> est une déclaration en CSS, utilisant la propriété personnalisée <code>--*</code> pour initialiser la valeur de la variable CSS <code>--example-variable</code> à <code>20px</code>.</li> </ul> -<div class="note"><strong>Note :</strong> Le préfixe de propriété personnalisée était noté <code>var-</code> dans les précédentes spécifications, mais a ensuite été changé pour <code>--</code>. Firefox 31 et supérieurs respectent cette nouvelle notation. ({{bug(985838)}})</div> +<div class="note"> + <p><strong>Note :</strong> Le préfixe de propriété personnalisée était noté <code>var-</code> dans les précédentes spécifications, mais a ensuite été changé pour <code>--</code>. Firefox 31 et supérieurs respectent cette nouvelle notation. ({{bug(985838)}})</p> +</div> <p>Les propriétés personnalisées sont similaires aux propriétés ordinaires. Elles sont sujettes à la cascade et héritent leur valeur de leur parent si elles ne sont pas redéfinies.</p> @@ -55,8 +57,9 @@ translation_of: Web/CSS/Using_CSS_custom_properties <p>Commençons avec cette feuille CSS simple colorant les éléments de différentes classes avec la même couleur :</p> -<div id="sample1"> -<pre class="brush:css; highlight:[3,20,26,32]">.un { +<h3>Exemple 1</h3> + +<pre class="brush:css">.un { color: white; background-color: brown; margin: 10px; @@ -104,13 +107,14 @@ translation_of: Web/CSS/Using_CSS_custom_properties <p>ce qui donne ceci :</p> -<p>{{EmbedLiveSample("sample1",600,180)}}</p> +<p>{{EmbedLiveSample("exemple_1",600,180)}}</p> <p>Remarquez la répétition dans le CSS. La couleur d'arrière-plan est définie à <code>brown</code> à plusieurs endroits. Certaines déclarations peuvent être faites plus haut dans la cascade et le problème se résoudra grâce à l'héritage. Mais pour des projets non-triviaux, cela n'est pas toujours possible. En déclarant une variable dans la pseudo-classe {{cssxref(":root")}}, un développeur CSS peut éviter certaines répétitions en utilisant cette variable.</p> </div> -<div id="sample2"> -<pre class="brush:css; highlight:[2, 7, 24,30,36]">:root { +<h3>Exemple 2</h3> + +<pre class="brush:css">:root { --main-bg-color: brown; } @@ -200,7 +204,7 @@ translation_of: Web/CSS/Using_CSS_custom_properties <p>Le premier argument passé à la fonction est le nom de la <a href="https://www.w3.org/TR/css-variables/#custom-property" title="CSS Custom Properties for Cascading Variables Module Level 1">propriété personnalisée</a> qui doit être substituée. Le deuxième argument, s'il est fourni, indique la valeur par défaut qui est utilisée lorsque la <a href="https://www.w3.org/TR/css-variables/#custom-property" title="CSS Custom Properties for Cascading Variables Module Level 1">propriété personnalisée</a> en question est invalide.</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Attention, la valeur fournie comme valeur par défaut ne pourra pas être utilisée si le navigateur ne prend pas en charge les propriétés personnalisées CSS. Elle sera uniquement utilisée si la valeur précédente n'a pu être calculée ou si elle est invalide.</p> </div> @@ -221,13 +225,13 @@ translation_of: Web/CSS/Using_CSS_custom_properties </pre> <div class="note"> -<p><strong>Note : </strong>La syntaxe pour la valeur de recours, comme celle des <a dir="ltr" href="https://www.w3.org/TR/css-variables/#custom-property" title="CSS Custom Properties for Cascading Variables Module Level 1">propriétés personnalisées</a>, permet d'utiliser une virgule. Ainsi, <code>var(--toto, red, blue)</code> définit une valeur de recours égale à <code>red, blue</code>, c'est-à-dire tout ce qui est écrit après la première virgule. Si la deuxième valeur est incorrecte, elle ne pourra pas être utilisée et la règle sera invalide.</p> +<p><strong>Note :</strong> La syntaxe pour la valeur de recours, comme celle des <a href="https://www.w3.org/TR/css-variables/#custom-property">propriétés personnalisées</a>, permet d'utiliser une virgule. Ainsi, <code>var(--toto, red, blue)</code> définit une valeur de recours égale à <code>red, blue</code>, c'est-à-dire tout ce qui est écrit après la première virgule. Si la deuxième valeur est incorrecte, elle ne pourra pas être utilisée et la règle sera invalide.</p> <p>La syntaxe de la deuxième règle (sur <code>.trois</code>) permet d'utiliser une autre variable comme variable de secours et une autre valeur (<code>pink</code>) dans le cas où cette deuxième variable ne fonctionne pas.</p> </div> <div class="note"> -<p><strong>Note :</strong> Des problèmes de performances ont pu être observés<sup>[source ?] </sup> causant un rendu plus lent des pages car le navigateur doit analyser l'ensemble des variables pour voir si elles sont disponibles.</p> +<p><strong>Note :</strong> Des problèmes de performances ont pu être observés causant un rendu plus lent des pages car le navigateur doit analyser l'ensemble des variables pour voir si elles sont disponibles.</p> </div> <h2 id="Validité_et_valeurs">Validité et valeurs</h2> diff --git a/files/fr/web/css/value_definition_syntax/index.html b/files/fr/web/css/value_definition_syntax/index.html index 30586cd5d9..0628edd3d9 100644 --- a/files/fr/web/css/value_definition_syntax/index.html +++ b/files/fr/web/css/value_definition_syntax/index.html @@ -118,7 +118,9 @@ original_slug: Web/CSS/Syntaxe_de_définition_des_valeurs <li><code>bold 1em bold</code> car les deux composants doivent apparaître exactement une fois.</li> </ul> -<div class="note"><strong>Note :</strong> La juxtaposition est prioritaire par rapport à la double esperluette. <code>bold thin && <length></code> est donc équivalent à <code>[ </code><code>bold thin ] && <length></code>. Il décrit <code>bold thin <length></code> ou <code><length></code><code> bold thin</code> mais pas <code>bold <length></code><code> thin</code>.</div> +<div class="note"> + <p><strong>Note :</strong> La juxtaposition est prioritaire par rapport à la double esperluette. <code>bold thin && <length></code> est donc équivalent à <code>[ </code><code>bold thin ] && <length></code>. Il décrit <code>bold thin <length></code> ou <code><length></code><code> bold thin</code> mais pas <code>bold <length></code><code> thin</code>.</p> +</div> <h3 id="Double_barre">Double barre</h3> @@ -142,7 +144,9 @@ original_slug: Web/CSS/Syntaxe_de_définition_des_valeurs <li><code>bold</code> car le mot-clé n'est pas permis pour aucune valeur de l'entité.</li> </ul> -<div class="note"><strong>Note :</strong> La double esperluette est prioritaire par rapport à la double barre. <code>bold || thin && <length></code> est équivalent à <code>bold || [ thin && <length> ]</code> qui décrit <code>bold</code>, <code>thin</code> <code><length></code>, <code>bold thin</code> <code><length></code>, ou <code>thin <length> bold</code> mais pas <code><length></code><code> bold thin</code> car bold, s'il est présent doit apparaître avant <code>thin && <length></code>.</div> +<div class="note"> + <p><strong>Note :</strong> La double esperluette est prioritaire par rapport à la double barre. <code>bold || thin && <length></code> est équivalent à <code>bold || [ thin && <length> ]</code> qui décrit <code>bold</code>, <code>thin</code> <code><length></code>, <code>bold thin</code> <code><length></code>, ou <code>thin <length> bold</code> mais pas <code><length></code><code> bold thin</code> car bold, s'il est présent doit apparaître avant <code>thin && <length></code>.</p> +</div> <h3 id="La_barre_verticale">La barre verticale</h3> diff --git a/files/fr/web/css/vertical-align/index.html b/files/fr/web/css/vertical-align/index.html index fb25e35bf9..e477b68fba 100644 --- a/files/fr/web/css/vertical-align/index.html +++ b/files/fr/web/css/vertical-align/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/vertical-align <div>{{EmbedInteractiveExample("pages/css/vertical-align.html")}}</div> -<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> - <p>La propriété <code>vertical-align</code> peut être utilisée dans deux contextes :</p> <ul> diff --git a/files/fr/web/css/viewport_concepts/index.html b/files/fr/web/css/viewport_concepts/index.html index 51937f9f12..81899a483a 100644 --- a/files/fr/web/css/viewport_concepts/index.html +++ b/files/fr/web/css/viewport_concepts/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/Concepts_viewport --- <p>{{CSSRef}}</p> -<p class="summary">Dans cet article, nous définirons le concept de <em>viewport</em> ou de zone d'affichage, les différences entre la zone d'affichage visuelle et la zone d'affichage pour la disposition. Nous verrons également ce que signifie la zone d'affichage pour CSS, SVG et pour les appareils mobiles.</p> +<p>Dans cet article, nous définirons le concept de <em>viewport</em> ou de zone d'affichage, les différences entre la zone d'affichage visuelle et la zone d'affichage pour la disposition. Nous verrons également ce que signifie la zone d'affichage pour CSS, SVG et pour les appareils mobiles.</p> <h2 id="Qu'est-ce_qu'une_zone_d'affichage_(viewport)">Qu'est-ce qu'une zone d'affichage (<em>viewport</em>) ?</h2> @@ -143,7 +143,9 @@ body > footer { <p>Il existe une grande variété de tailles et de proportions pour les appareils mobiles. La zone d'affichage d'un navigateur mobile est la zone de la fenêtre sur laquelle le contenu web peut être consulté et cette zone n'a pas nécessairement la même taille que la page affichée. Les navigateurs mobiles affichent les pages sur une zone d'affichage virtuelle (mesurant généralement 960px) plus large que l'écran puis réduisent le résultat afin que l'utilisateur puisse voir l'ensemle du document. L'utilisateur peut alors se déplacer ou zoomer au doigt pour accéder aux différentes zones de la page. Ainsi, si un appareil mobile a un écran large de 320px, un site web pourra être affiché selon une zone d'affichage virtuelle sur 960px puis réduit afin de pouvoir s'inscrire dans l'espace large de 320px. Le résultat ainsi obtenu risque peu d'être lisible. Pour indiquer à un navigateur mobile d'utiliser la largeur de la zone d'affichage réelle plutôt que la largeur virtuelle de 960px, on pourra placer la balise <code><meta></code> suivante :</p> -<pre class="brush: html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>viewport<span class="punctuation token">"</span></span> <span class="attr-name token">content</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>width<span class="punctuation token">=</span>device-width<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"> +<meta name="viewport" content="width=device-width"> +</pre> <p>La propriété <code>width</code> contrôle la taille de la zone d'affichage et on l'utilisera généralement avec <code>device-width</code> qui correspond à la largeur de l'écran, exprimée en pixels CSS, avec un zoom de 100%. Il est possible d'utiliser d'autres propriétés comme <code>maximum-scale</code>, <code>minimum-scale</code> et <code>user-scalable</code> afin de contrôler si l'utilisateur peut zoomer/dézoomer sur la page mais les valeurs par défaut restent les meilleures en termes d'accessibilité et d'ergonomie et ne seront pas plus abordées ici par souci de concision.</p> diff --git a/files/fr/web/css/visibility/index.html b/files/fr/web/css/visibility/index.html index 540a64c3b1..319decacb7 100644 --- a/files/fr/web/css/visibility/index.html +++ b/files/fr/web/css/visibility/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/visibility <div>{{EmbedInteractiveExample("pages/css/visibility.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> Afin de cacher un élément et de le retirer de la disposition du document, on utilisera plutôt la propriété {{cssxref("display")}} avec la valeur <code>none</code>.</p> </div> @@ -40,9 +38,10 @@ visibility: unset; <dt><code>visible</code></dt> <dd>La valeur par défaut, la boîte est visible.</dd> <dt><code>hidden</code></dt> - <dd>La boîte est invisible (totalement transparente, rien n'est dessiné) mais continue d'avoir un impact sur la disposition. Les fils de l'élément seront visibles s'ils ont <code>visibility:visible</code>. L'élément ne pourra plus recevoir le focus (cf. <a href="/fr/docs/Web/HTML/Attributs_universels/tabindex">la navigation au clavier avec les tabulations</a>).</dd> + <dd>La boîte est invisible (totalement transparente, rien n'est dessiné) mais continue d'avoir un impact sur la disposition. Les fils de l'élément seront visibles s'ils ont <code>visibility:visible</code>. L'élément ne pourra plus recevoir le focus (cf. <a href="/fr/docs/Web/HTML/Global_attributes/tabindex">la navigation au clavier avec les tabulations</a>).</dd> <dt><code>collapse</code></dt> <dd> + <p>Le mot-clé <code>collapse</code> a différents effets selon les éléments :</p> <ul> <li>Pour les lignes, les colonnes, les groupes de lignes et les groupes de colonnes d'un tableau, les éléments sont masqués et l'espace occupé est retiré (comme si on avait appliqué <code>{{cssxref("display")}}: none</code> aux colonnes/lignes du tableau). La taille des autres lignes et colonnes continue d'être calculée comme si les lignes et colonnes masquées étaient présentes. Cela a été conçu afin de pouvoir retirer rapidement des lignes et/ou des colonnes sans avoir à recalculer les dimensions pour l'ensemble du tableau.</li> <li>Les éléments flexibles sont masqués et l'espace qu'ils auraient occupé est retiré.</li> @@ -131,7 +130,7 @@ p.coucou { <h2 id="Accessibilité">Accessibilité</h2> -<p>Utiliser la propriété <code>visibility</code> avec la valeur <code>hidden</code> retirera l'objet de <a href="/fr/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">l'arbre d'accessibilité</a>. Les éléments ciblés, ainsi que leurs éléments descendants ne seront plus annoncés par les lecteurs d'écran.</p> +<p>Utiliser la propriété <code>visibility</code> avec la valeur <code>hidden</code> retirera l'objet de <a href="/fr/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis">l'arbre d'accessibilité</a>. Les éléments ciblés, ainsi que leurs éléments descendants ne seront plus annoncés par les lecteurs d'écran.</p> <h2 id="Notes">Notes</h2> diff --git a/files/fr/web/css/visual_formatting_model/index.html b/files/fr/web/css/visual_formatting_model/index.html index 69a641a3f7..2d49388aa8 100644 --- a/files/fr/web/css/visual_formatting_model/index.html +++ b/files/fr/web/css/visual_formatting_model/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/Modèle_de_mise_en_forme_visuelle --- <div>{{CSSRef}}</div> -<p>En CSS, le modèle de mise en forme visuelle est un algorithme qui traite un document afin de l'afficher sur un support visuel. Chaque élément du document est ainsi transformé en zéro, une ou plusieurs boîtes qui s'inscrivent dans <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">le modèle de boîtes CSS</a>. La disposition de chaque boîte est dictée par :</p> +<p>En CSS, le modèle de mise en forme visuelle est un algorithme qui traite un document afin de l'afficher sur un support visuel. Chaque élément du document est ainsi transformé en zéro, une ou plusieurs boîtes qui s'inscrivent dans <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">le modèle de boîtes CSS</a>. La disposition de chaque boîte est dictée par :</p> <ul> <li>Les dimensions de la boîte qui peuvent être définies explicitement, contraintes ou non</li> @@ -30,13 +30,13 @@ original_slug: Web/CSS/Modèle_de_mise_en_forme_visuelle <h3 id="Les_éléments_de_bloc_et_les_boîtes_de_bloc">Les éléments de bloc et les boîtes de bloc</h3> -<p>Un élément est dit « de bloc » lorsque <a href="/fr/docs/Web/CSS/Valeur_calculée">la valeur calculée</a> de la propriété {{cssxref("display")}} qui lui est appliquée vaut : <code>block</code>, <code>list-item</code> ou <code>table</code>. Un élément de bloc est représenté sous la forme d'un bloc (comme un paragraphe par exemple) et les blocs sont empilés verticalement les uns sur les autres.</p> +<p>Un élément est dit « de bloc » lorsque <a href="/fr/docs/Web/CSS/computed_value">la valeur calculée</a> de la propriété {{cssxref("display")}} qui lui est appliquée vaut : <code>block</code>, <code>list-item</code> ou <code>table</code>. Un élément de bloc est représenté sous la forme d'un bloc (comme un paragraphe par exemple) et les blocs sont empilés verticalement les uns sur les autres.</p> -<p>Chaque boîte de bloc contribue au <a href="/fr/docs/Web/CSS/Block_formatting_context">contexte de mise en forme des blocs</a>. Chaque élément de bloc génère au moins une boîte de niveau bloc, qu'on appelle la boîte de bloc principale. Certains éléments (comme les éléments d'une liste par exemple) génèrent d'autres boîtes afin de gérer les puces ou d'autres éléments typographiques.</p> +<p>Chaque boîte de bloc contribue au <a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">contexte de mise en forme des blocs</a>. Chaque élément de bloc génère au moins une boîte de niveau bloc, qu'on appelle la boîte de bloc principale. Certains éléments (comme les éléments d'une liste par exemple) génèrent d'autres boîtes afin de gérer les puces ou d'autres éléments typographiques.</p> <p>La boîte de bloc principale contient les boîtes générées par les descendants ete le contenu généré. Cette boîte participe au schéma de positionnement.</p> -<p><img alt="venn_blocks.png" class="internal lwrap" src="/@api/deki/files/5995/=venn_blocks.png"></p> +<p><img alt="venn_blocks.png" src="venn_blocks.png"></p> <p>Une boîte de bloc peut également un conteneur de blocs. Un conteneur de blocs est une boîte qui ne contient que d'autres boîtes de bloc ou qui crée un contexte de formatage en ligne et qui ne contient alors que des boîtes en ligne. Attention, les notions de boîtes de bloc et de conteneurs de blocs ne sont pas identiques. La première décrit la façon dont la boîte se comporte avec ses parents et ses voisins et le seconde définit la façon dont elle interagit avec ses descendants. Certaines boîtes de blocs, telles que les tableaux, ne sont pas des conteneurs de blocs. Réciproquement, certains conteneurs de blocs (tels que les cellules de tableau non remplacées) ne sont pas des boîtes de bloc.</p> @@ -52,7 +52,7 @@ original_slug: Web/CSS/Modèle_de_mise_en_forme_visuelle <p>Si on prend le code HTML suivant, mis en forme avec les règles par défaut (<code>display:block</code>) :</p> -<pre class="brush: html notranslate"><div> +<pre class="brush: html"><div> Some inline text <p>followed by a paragraph</p> followed by more inline text. @@ -60,7 +60,7 @@ original_slug: Web/CSS/Modèle_de_mise_en_forme_visuelle </pre> <p>On aura deux boîtes de bloc anonymes qui seront créées : une pour le texte avant le paragraphe et une pour le texte après. On aura alors la structure suivante :<br> - <img alt="anonymous_block-level_boxes.png" src="/@api/deki/files/5996/=anonymous_block-level_boxes.png"></p> + <img alt="anonymous_block-level_boxes.png" src="anonymous_block-level_boxes.png"></p> <p>À la différence de la boîte des éléments {{HTMLElement("p")}}, les développeurs ne peuvent pas contrôler la mise en forme des boîtes anonymes. Les propriétés qui héritent des éléments parents récupèreront la valeur obtenue pour l'élément {{HTMLElement("div")}} et les autres propriétés auront la valeur <code>initial</code>.</p> @@ -70,7 +70,7 @@ original_slug: Web/CSS/Modèle_de_mise_en_forme_visuelle <p>Si on prend le code HTML suivant, pour lequel {{HTMLElement("p")}} aura <code>display:inline</code> et {{HTMLElement("span")}} aura <code>display:block</code> :</p> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> Some <em>inline</em> text <span>followed by a paragraph</span> followed by more inline text. @@ -78,7 +78,7 @@ original_slug: Web/CSS/Modèle_de_mise_en_forme_visuelle <p>Deux boîtes de bloc anonymes sont créées : une pour le texte avant l'élément <code><span></code> et une pour le texte qui suit cet élément. On a alors la structure suivante :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13625/anonymous_block_box_break.png" style="height: 137px; width: 597px;"></p> +<p><img alt="" src="anonymous_block_box_break.png"></p> <h3 id="Les_éléments_en_ligne_et_les_boîtes_en_ligne">Les éléments en ligne et les boîtes en ligne</h3> @@ -88,7 +88,7 @@ original_slug: Web/CSS/Modèle_de_mise_en_forme_visuelle <p>Les boîtes en lignes atomiques ne peuvent pas être divisées en plusieurs lignes au sein d'un contexte de mise en forme.</p> -<pre class="brush: html notranslate"><style> +<pre class="brush: html"><style> span { /* La valeur par défaut */ display:inline; @@ -101,7 +101,7 @@ original_slug: Web/CSS/Modèle_de_mise_en_forme_visuelle </div> </pre> -<pre class="brush: html notranslate"><style> +<pre class="brush: html"><style> span { display:inline-block; } diff --git a/files/fr/web/css/webkit_extensions/index.html b/files/fr/web/css/webkit_extensions/index.html index c3d2bab9c9..46babfeea4 100644 --- a/files/fr/web/css/webkit_extensions/index.html +++ b/files/fr/web/css/webkit_extensions/index.html @@ -19,7 +19,6 @@ translation_of: Web/CSS/WebKit_Extensions <p><strong>Note :</strong> Ces propriétés ne fonctionneront que pour les applications WebKit et ne sont pas en voie de standardisation.</p> </div> -<div class="index"> <h3 id="A">A</h3> <ul> @@ -191,11 +190,9 @@ translation_of: Web/CSS/WebKit_Extensions <li>{{CSSxRef("-webkit-text-stroke-width")}}</li> <li>{{CSSxRef("-webkit-touch-callout")}}</li> </ul> -</div> <h2 id="Propriétés_WebKit_en_voie_de_standardisation">Propriétés WebKit en voie de standardisation</h2> -<div class="index"> <ul> <li>{{CSSxRef("appearance", "-webkit-appearance")}}</li> <li>{{CSSxRef("-webkit-font-size-delta")}}</li> @@ -205,15 +202,13 @@ translation_of: Web/CSS/WebKit_Extensions <li>{{CSSxRef("-webkit-mask-repeat-x")}}</li> <li>{{CSSxRef("-webkit-mask-repeat-y")}}</li> </ul> -</div> -<h2 id="Anciennes_propriétés_spécifiques_désormais_standardisées"><a id="spe_std" name="spe_std">Anciennes propriétés spécifiques désormais standardisées</a></h2> +<h2 id="Anciennes_propriétés_spécifiques_désormais_standardisées">Anciennes propriétés spécifiques désormais standardisées</h2> <div class="note"> <p><strong>Note :</strong> Afin d'obtenir la meilleure compatibilité possible, vous devriez utiliser les versions standards, non-préfixées, de ces propriétés plutôt que les versions spécifiques. Généralement, lorsqu'une propriété est standardisée et implémentée, la version préfixée est généralement abandonnée ensuite.</p> </div> -<div class="index"> <h3 id="A_2">A</h3> <ul> @@ -336,17 +331,15 @@ translation_of: Web/CSS/WebKit_Extensions <li>{{CSSxRef("word-break", "-epub-word-break")}}</li> <li>{{CSSxRef("writing-mode", "-epub-writing-mode")}}</li> </ul> -</div> <h2 id="Spécificités_prises_en_charge_par_Firefox">Spécificités prises en charge par Firefox</h2> <p>Les propriétés suivantes peuvent être utilisées avec le préfixe <code>-webkit-</code> sous Firefox. La plupart de ces propriétés peuvent également s'utiliser sans préfixes (voir la section sur les <a href="#spe_std">propriétés anciennement spécifiques et désormais standard </a>ci-avant).</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> En raison du code historique utilisé dans de nombreux sites web et contenant des propriétés préfixées avec <code>-webkit-</code>, Edge et Firefox redirigent de nombreuses propriétés préfixées avec <code>-webkit-</code> vers les équivalents sans préfixe ou avec <code>-moz-</code> ou <code>-ms-</code>.</p> </div> -<div class="index"> <h3 id="A_3">A</h3> <ul> @@ -451,7 +444,6 @@ translation_of: Web/CSS/WebKit_Extensions <ul> <li>{{CSSxRef("-webkit-user-select")}}</li> </ul> -</div> <p>* Prise en charge avec les préfixes <code>-moz-</code> et <code>-webkit-</code> dans Firefox mais pas pris en charge sans préfixe. Microsoft Edge et IE Mobile prennent en charge cette propriété avec le préfixe <code>-webkit-</code> plutôt qu'avec <code>-ms-</code> à des fins d'interopérabilité.<br> ** Ces valeurs sont prises en charges bien qu'elles ne soient pas standard et qu'elles ne soient pas en cours de standardisation.<br> @@ -459,7 +451,6 @@ translation_of: Web/CSS/WebKit_Extensions <h2 id="Pseudo-classes">Pseudo-classes</h2> -<div class="index"> <ul> <li>{{CSSxRef(":animating-full-screen-transition", ":-webkit-animating-full-screen-transition")}}</li> <li>{{CSSxRef(":any()", ":-webkit-any()")}}</li> @@ -473,13 +464,11 @@ translation_of: Web/CSS/WebKit_Extensions <li>{{CSSxRef(":full-screen-document",":-webkit-full-screen-document")}}</li> <li>{{CSSxRef(":full-screen-controls-hidden",":-webkit-full-screen-controls-hidden")}}</li> </ul> -</div> <h2 id="Pseudo-éléments">Pseudo-éléments</h2> <p>Pour des raisons de compatibilité web, Blink, WebKit et Gecko considèrent les pseudo-éléments commençant par <code>::-webkit-</code> comme valides.</p> -<div class="index"> <ul> <li>{{CSSxRef("::-webkit-file-upload-button")}}</li> <li>{{CSSxRef("::-webkit-inner-spin-button")}}</li> @@ -498,11 +487,9 @@ translation_of: Web/CSS/WebKit_Extensions <li>{{CSSxRef("::-webkit-slider-runnable-track")}}</li> <li>{{CSSxRef("::-webkit-slider-thumb")}}</li> </ul> -</div> <h2 id="Caractéristiques_média">Caractéristiques média</h2> -<div class="index"> <ul> <li>{{CSSxRef("@media/-webkit-animation", "-webkit-animation")}}</li> <li>{{CSSxRef("@media/-webkit-device-pixel-ratio", "-webkit-device-pixel-ratio")}}</li> @@ -510,7 +497,6 @@ translation_of: Web/CSS/WebKit_Extensions <li>{{CSSxRef("@media/-webkit-transform-3d", "-webkit-transform-3d")}}</li> <li>{{CSSxRef("@media/-webkit-transition", "-webkit-transition")}}</li> </ul> -</div> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/white-space/index.html b/files/fr/web/css/white-space/index.html index ab8f9da20b..7e6dd7ac48 100644 --- a/files/fr/web/css/white-space/index.html +++ b/files/fr/web/css/white-space/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/white-space <div>{{EmbedInteractiveExample("pages/css/white-space.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> Afin d'obtenir une césure au sein des mots, il faudra utiliser {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}} ou bien {{cssxref("hyphens")}}.</p> </div> diff --git a/files/fr/web/css/widows/index.html b/files/fr/web/css/widows/index.html index 8e765b0acf..29932c7497 100644 --- a/files/fr/web/css/widows/index.html +++ b/files/fr/web/css/widows/index.html @@ -43,7 +43,7 @@ widows: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[4]">div { +<pre class="brush: css">div { background-color: #8cffa0; columns: 3; widows: 2; diff --git a/files/fr/web/css/width/index.html b/files/fr/web/css/width/index.html index 4ef4f53eeb..b61bd7e63d 100644 --- a/files/fr/web/css/width/index.html +++ b/files/fr/web/css/width/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/width <div>{{EmbedInteractiveExample("pages/css/width.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> <p><strong>Note :</strong> Les propriétés {{cssxref("min-width")}} et {{cssxref("max-width")}} permettent de surcharger {{cssxref("width")}}.</p> </div> @@ -55,25 +53,25 @@ width: unset; <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><a id="length" name="length"><code><length></code></a></dt> + <dt><code><length></code></dt> <dd>Voir {{cssxref("<length>")}} pour les unités qui peuvent être utilisées.</dd> - <dt><a id="percentage" name="percentage"><code><percentage></code></a></dt> + <dt><code><percentage></code></dt> <dd>Permet de définir la largeur en pourcentages ({{cssxref("<percentage>")}}) par rapport à la largeur du bloc contenant le bloc courant. Si la largeur du bloc englobant dépend de la largeur de l'élément, la disposition est indéfinie.</dd> - <dt><code><a id="border-box" name="border-box">border-box</a> </code>{{experimental_inline}}</dt> + <dt><code>border-box</code>{{experimental_inline}}</dt> <dd>Si cette valeur est présente, la longueur ({{cssxref("<length>")}}) ou le pourcentage ({{cssxref("<percentage>")}}) est appliqué à la boîte de bordure (<em>border</em>) de l'élément.</dd> - <dt><a id="content-box" name="content-box"><code>content-box</code></a> {{experimental_inline}}</dt> + <dt><code>content-box</code> {{experimental_inline}}</dt> <dd>Si cette valeur est présente, la longueur ({{cssxref("<length>")}}) ou le pourcentage ({{cssxref("<percentage>")}}) est appliqué à la boîte de contenu de l'élément.</dd> - <dt><a id="auto" name="auto"><code>auto</code></a></dt> + <dt><code>auto</code></dt> <dd>Le navigateur calculera et sélectionnera une largeur pour l'élément.</dd> - <dt><a id="fill" name="fill"><code>fill</code></a> {{experimental_inline}}</dt> + <dt><code>fill</code> {{experimental_inline}}</dt> <dd>Utilise la taille <code>fill-available</code> dans l'axe du sens de lecture ou la taille <code>fill-available</code> dans l'axe perpendiculaire au sens de lecture selon le mode d'écriture.</dd> - <dt><a id="max-content" name="max-content"><code>max-content</code></a> {{experimental_inline}}</dt> + <dt><code>max-content</code> {{experimental_inline}}</dt> <dd>La largeur intrinsèque préférée.</dd> - <dt><a id="min-content" name="min-content"><code>min-content</code></a> {{experimental_inline}}</dt> + <dt><code>min-content</code> {{experimental_inline}}</dt> <dd>La largeur intrinsèque minimum.</dd> - <dt><a id="available" name="available"><code>available</code></a> {{experimental_inline}}</dt> + <dt><code>available</code> {{experimental_inline}}</dt> <dd>La largeur du bloc contenant le bloc courant, moins la marge horizontale, la bordure et le remplissage (<em>padding</em>).</dd> - <dt id="fit-content"><a id="fit-content" name="fit-content"><code>fit-content</code></a> {{experimental_inline}}</dt> + <dt><code>fit-content</code> {{experimental_inline}}</dt> <dd>La quantité la plus grande entre : <ul> <li>La largeur intrinsèque minimum</li> diff --git a/files/fr/web/css/will-change/index.html b/files/fr/web/css/will-change/index.html index 0fcad00b3c..fd846b0880 100644 --- a/files/fr/web/css/will-change/index.html +++ b/files/fr/web/css/will-change/index.html @@ -12,10 +12,10 @@ translation_of: Web/CSS/will-change <p>La propriété <strong><code>will-change</code></strong> fournit une indication au navigateur sur la propension d'un élément à changer (afin que le navigateur puisse mettre en place les optimisations nécessaires avant que l'élément change vraiment). Ce type d'optimisation permet d'augmenter la réactivité de la page en effectuant des calculs (éventuellement coûteux) en prévision du changement.</p> <div class="warning"> -<p><strong>Attention !</strong> <code>will-change</code> est conçu pour être utilisé en dernier recours afin d'aider à la résolutions de problèmes de performance existants. Il ne doit pas être utilisé partout de façon purement préventive.</p> +<p><strong>Attention :</strong> <code>will-change</code> est conçu pour être utilisé en dernier recours afin d'aider à la résolutions de problèmes de performance existants. Il ne doit pas être utilisé partout de façon purement préventive.</p> </div> -<pre class="brush:css no-line-numbers notranslate">/* Avec un mot-clé */ +<pre class="brush:css no-line-numbers">/* Avec un mot-clé */ will-change: auto; will-change: scroll-position; will-change: contents; @@ -33,7 +33,7 @@ will-change: unset; <ul> <li> - <p id="Don't_apply_will-change_to_too_many_elements"><em>Il ne faut pas appliquer <code>will-change</code> à de trop nombreux éléments.</em> Le navigateur essaie déjà d'optimiser de nombreuses choses. Certaines de ces optimisations sont fortement couplées avec <code>will-change</code> pour utiliser les ressources de l'ordinateur. Aussi, si <code>will-change</code> est « trop » utilisé, cela peut ralentir la page et consommer intensivement les ressources.</p> + <p><em>Il ne faut pas appliquer <code>will-change</code> à de trop nombreux éléments.</em> Le navigateur essaie déjà d'optimiser de nombreuses choses. Certaines de ces optimisations sont fortement couplées avec <code>will-change</code> pour utiliser les ressources de l'ordinateur. Aussi, si <code>will-change</code> est « trop » utilisé, cela peut ralentir la page et consommer intensivement les ressources.</p> </li> <li> <p><em>À utiliser avec parcimonie.</em> Normalement, le navigateur essaie d'appliquer les optimisations dès que possible afin de revenir au plus vite dans un état normal. En revanche, en utilisant <code>will-change</code> dans la feuille de style, on indique que les éléments ciblés vont bientôt changer et le navigateur conservera les optimisations en cours beaucoup plus longtemps si la propriété est maintenue. Il est donc conseillé d'activer et de désactiver <code>will-change</code> de façon pertinente grâce à du script avant et après le changement concerné.</p> @@ -42,10 +42,10 @@ will-change: unset; <p><em>Ne pas « sur-optimiser » avec <code>will-change</code></em>. Si votre page fonctionne correctement, n'ajoutez pas la propriété <code>will-change</code> sur certains éléments uniquement pour gagner un peu de vitesse. <code>will-change</code> est conçu pour être utilisé en dernier ressort afin de régler les problèmes de performances existants. En utilisant <code>will-change</code> trop souvent, cela consommera plus de mémoire, complexifiera le rendu de la page pour le navigateur (qui se préparera au changement). En bref, cela réduira les performances de la page.</p> </li> <li> - <p id="Give_it_sufficient_time_to_work"><em>Laisser le temps à <code>will-change</code> pour qu'il fonctionne.</em> Cette propriété est conçue pour permettre aux auteurs d'indiquer à l'agent-utilisateur les propriétés qui vont probablement changer afin que le navigateur puisse optimiser en avance de phase. Il est donc important de laisser le temps au navigateur d'appliquer ces opérations pour que l'effet obtenu soit bénéfique. Pour cela, mieux vaut donc prévoir légèrement avant le changement que celui-ci aura lieu et alors modifier <code>will-change</code> en prévision.</p> + <p><em>Laisser le temps à <code>will-change</code> pour qu'il fonctionne.</em> Cette propriété est conçue pour permettre aux auteurs d'indiquer à l'agent-utilisateur les propriétés qui vont probablement changer afin que le navigateur puisse optimiser en avance de phase. Il est donc important de laisser le temps au navigateur d'appliquer ces opérations pour que l'effet obtenu soit bénéfique. Pour cela, mieux vaut donc prévoir légèrement avant le changement que celui-ci aura lieu et alors modifier <code>will-change</code> en prévision.</p> </li> <li> - <p><em>Sachez que <code>will-change</code></em><em> peut modifier l'apparence des éléments</em> lorsqu'il est utilisé avec des propriétés qui créent <a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches">des contextes d'empilement</a> (par exemple <code>will-change: opacity</code>) car le contexte d'empilement est créé au préalable.</p> + <p><em>Sachez que <code>will-change</code></em><em> peut modifier l'apparence des éléments</em> lorsqu'il est utilisé avec des propriétés qui créent <a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">des contextes d'empilement</a> (par exemple <code>will-change: opacity</code>) car le contexte d'empilement est créé au préalable.</p> </li> </ul> @@ -75,14 +75,14 @@ will-change: unset; <h2 id="Exemples">Exemples</h2> -<pre class="brush: css notranslate">.sidebar { +<pre class="brush: css">.sidebar { will-change: transform; } </pre> <p>Dans l'exemple précédent, on applique la propriété <code>will-change</code> à même la feuille de style. Dans ce cas, le navigateur conservera l'optimisation en mémoire beaucoup plus longtemps que nécessaire. Nous avons vu précédemment que cela devait être évité et voici donc un deuxième exemple qui illustre comment appliquer la propriété <code>will-change</code> grâce à JavaScript (et qui correspond donc à la méthode qui devrait être utilisée la plupart du temps) :</p> -<pre class="brush: js notranslate">var el = document.getElementById('element'); +<pre class="brush: js">var el = document.getElementById('element'); // On applique will-change quand la souris/curseur // pointeur/stylet passe au-dessus de l'élément @@ -101,7 +101,7 @@ function removeHint() { <p>Cela peut toutefois être pertinent d'inclure <code>will-change</code> dans la feuille de style d'une application qui gère des changements de pages ou des diapositives parmi lesquelles on navigue lorsque les pages sont complexes. Cela permettra au navigateur de préparer la transition en avance de phase et de mieux réagir au changement de page (ou de diapositive) lorsque le bouton associé sera utilisé.</p> -<pre class="brush: css notranslate">.slide { +<pre class="brush: css">.slide { will-change: transform; }</pre> diff --git a/files/fr/web/css/word-break/index.html b/files/fr/web/css/word-break/index.html index 8150babe95..3276f00594 100644 --- a/files/fr/web/css/word-break/index.html +++ b/files/fr/web/css/word-break/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/word-break <div>{{EmbedInteractiveExample("pages/css/word-break.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Avec un mot-clé */ diff --git a/files/fr/web/css/word-spacing/index.html b/files/fr/web/css/word-spacing/index.html index e1902d222c..a65e58038f 100644 --- a/files/fr/web/css/word-spacing/index.html +++ b/files/fr/web/css/word-spacing/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/word-spacing <div>{{EmbedInteractiveExample("pages/css/word-spacing.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush:css no-line-numbers">/* Avec un mot-clé */ diff --git a/files/fr/web/css/writing-mode/index.html b/files/fr/web/css/writing-mode/index.html index 1895627610..440964aabf 100644 --- a/files/fr/web/css/writing-mode/index.html +++ b/files/fr/web/css/writing-mode/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/writing-mode <div>{{EmbedInteractiveExample("pages/css/writing-mode.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La propriété définit la direction du flux du bloc. C'est dans cette direction que les conteneurs de bloc seront empilés et c'est dans cette direction que le contenu en flux « coule » dans un bloc contenur. Ainsi, la propriété <code>writing-mode</code> détermine également l'ordre du contenu de niveau bloc.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -162,7 +160,7 @@ th { <p>Voici un aperçu du résultat avec un navigateur qui prend en charge <code>writing-mode</code> :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/12201/writing-mode-actual-result.png" style="height: 430px; width: 351px;"></p> +<p><img alt="" src="writing-mode-actual-result.png"></p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/z-index/index.html b/files/fr/web/css/z-index/index.html index eab41d5fc4..b8ece328df 100644 --- a/files/fr/web/css/z-index/index.html +++ b/files/fr/web/css/z-index/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/z-index <div>{{EmbedInteractiveExample("pages/css/z-index.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Pour les boîtes positionnées (celles pour lesquelles <code>position</code> est différent de <code>static</code>), la propriété <code>z-index</code> définit :</p> <ol> @@ -50,9 +48,9 @@ z-index: unset; <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><a id="auto" name="auto"><code>auto</code></a></dt> + <dt><code>auto</code></dt> <dd>La boîte ne crée pas de nouveau contexte d'empilement. Le niveau d'empilement de la boîte dans le contexte d'empilement courant est le même que celui de la boîte parente.</dd> - <dt><a id="integer" name="integer"><code><integer></code></a></dt> + <dt><code><integer></code></dt> <dd>L'entier fourni (type {{cssxref("<integer>")}}) sera le niveau de la boîte dans la pile d'empilement pour le contexte d'empilement courant. La boîte crée un nouveau contexte d'empilement pour lequel son niveau est <code>0</code>. Cela signifie que les index z des descendants ne sont pas comparés à ceux des éléments en dehors de l'élément.</dd> </dl> diff --git a/files/fr/web/css/zoom/index.html b/files/fr/web/css/zoom/index.html index 5f175efda7..2d251aa1be 100644 --- a/files/fr/web/css/zoom/index.html +++ b/files/fr/web/css/zoom/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/zoom --- <div>{{CSSRef}}{{Non-standard_header}}</div> -<p>La propriété non-standard <strong><code>zoom</code></strong> permet de manipuler l'effet d'agrandissement d'un élément. Plutôt que cette propriété non-standard, mieux vaudra utiliser <a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">les transformations CSS</a>, si possible. Cependant, contrairement aux transformations CSS, <strong><code>zoom</code></strong> affecte la taille de l'élément.</p> +<p>La propriété non-standard <strong><code>zoom</code></strong> permet de manipuler l'effet d'agrandissement d'un élément. Plutôt que cette propriété non-standard, mieux vaudra utiliser <a href="/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">les transformations CSS</a>, si possible. Cependant, contrairement aux transformations CSS, <strong><code>zoom</code></strong> affecte la taille de l'élément.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -94,6 +94,6 @@ p:hover { <ul> <li><a href="https://css-tricks.com/almanac/properties/z/zoom/">L'article de CSS-Tricks sur <code>zoom</code></a></li> - <li>Le descripteur <code><a href="/fr/docs/Web/CSS/@viewport/zoom">zoom</a></code> pour la règle @ <code><a href="/fr/docs/Web/CSS/@viewport">@viewport</a></code></li> + <li>Le descripteur <code><a href="/fr/docs/conflicting/Web/CSS/@viewport_e065ce90bde08c9679692adbe64f6518">zoom</a></code> pour la règle @ <code><a href="/fr/docs/Web/CSS/@viewport">@viewport</a></code></li> <li>{{bug("390936")}} à propos de l'implémentation de la propriété dans Firefox</li> </ul> diff --git a/files/fr/web/http/authentication/index.html b/files/fr/web/http/authentication/index.html index d7349947e0..005ef8ed1a 100644 --- a/files/fr/web/http/authentication/index.html +++ b/files/fr/web/http/authentication/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTTP/Authentication --- <div>{{HTTPSidebar}}</div> -<p class="summary">HTTP fournit la structure permettant le contrôle d'accès ainsi que l'authentification. Le schéma d'authentification HTTP le plus courant est « l'<em>authentification basique</em> » (« <em>Basic authentication</em> » en anglais). Cette page a pour but de présenter ce schéma d'authentification, et montre comment l'utiliser pour restreindre l'accès à votre serveur.</p> +<p>HTTP fournit la structure permettant le contrôle d'accès ainsi que l'authentification. Le schéma d'authentification HTTP le plus courant est « l'<em>authentification basique</em> » (« <em>Basic authentication</em> » en anglais). Cette page a pour but de présenter ce schéma d'authentification, et montre comment l'utiliser pour restreindre l'accès à votre serveur.</p> <h2 id="the_general_http_authentication_framework">La structure d'authentification HTTP</h2> diff --git a/files/fr/web/http/basics_of_http/choosing_between_www_and_non-www_urls/index.html b/files/fr/web/http/basics_of_http/choosing_between_www_and_non-www_urls/index.html index e7282738fa..0775a812bb 100644 --- a/files/fr/web/http/basics_of_http/choosing_between_www_and_non-www_urls/index.html +++ b/files/fr/web/http/basics_of_http/choosing_between_www_and_non-www_urls/index.html @@ -10,7 +10,7 @@ original_slug: Web/HTTP/Basics_of_HTTP/Choisir_entre_les_URLs_www_sans_www --- <div>{{HTTPSidebar}}</div> -<p class="summary">Une question récurrente chez les propriétaires de sites web est de choisir entre utiliser des URLs qui débutent ou non par www. Cette page fournit quelques conseils sur la meilleure approche à envisager.</p> +<p>Une question récurrente chez les propriétaires de sites web est de choisir entre utiliser des URLs qui débutent ou non par www. Cette page fournit quelques conseils sur la meilleure approche à envisager.</p> <h2 id="Que_sont_les_noms_de_domaines">Que sont les noms de domaines ?</h2> @@ -21,8 +21,8 @@ original_slug: Web/HTTP/Basics_of_HTTP/Choisir_entre_les_URLs_www_sans_www <h2 id="Donc_je_dois_choisir_l'un_ou_l'autre_pour_mon_site_web">Donc je dois choisir l'un ou l'autre pour mon site web ?</h2> <ul> - <li><u>Oui</u>, car vous avez besoin de faire une sélection et de vous y tenir. Vous être libre de choisir l'un ou l'autre pour déterminer votre domaine canonique mais une fois que vous avez effectué votre choix, vous devez le respecter. Votre site web gardera ainsi une structure consistante pour vos utilisateurs ainsi que les moteurs de recherche. Cela inclut la manière dont vous exposez des liens vers votre site, que ce soit au sein du site (auquel cas l'utilisation d'adresses relatives devrait simplifier le problème), ou bien lorsque vous partagez l'information à l'extérieur (courriel, réseaux sociaux, ...).</li> - <li><u>Non</u>, vous pouvez utiliser les deux à la fois. La seule chose importante est de rester cohérent au niveau du nom de domaine que vous utilisez de manière officielle. <strong>Ce domaine est appelé le nom de domaine <em>canonique</em>.</strong> L'ensemble de vos liens absolus doivent y référer. Vous pouvez, dans le même temps, bénéficier du second domaine. HTTP et HTML supportent deux techniques qui permettent à vos utilisateurs et aux moteurs de recherche de savoir simplement lequel des deux domaines constitue le domaine canonique, bien que l'autre domaine soit actif et serve des pages web.</li> + <li>Oui, car vous avez besoin de faire une sélection et de vous y tenir. Vous être libre de choisir l'un ou l'autre pour déterminer votre domaine canonique mais une fois que vous avez effectué votre choix, vous devez le respecter. Votre site web gardera ainsi une structure consistante pour vos utilisateurs ainsi que les moteurs de recherche. Cela inclut la manière dont vous exposez des liens vers votre site, que ce soit au sein du site (auquel cas l'utilisation d'adresses relatives devrait simplifier le problème), ou bien lorsque vous partagez l'information à l'extérieur (courriel, réseaux sociaux, ...).</li> + <li>Non, vous pouvez utiliser les deux à la fois. La seule chose importante est de rester cohérent au niveau du nom de domaine que vous utilisez de manière officielle. <strong>Ce domaine est appelé le nom de domaine <em>canonique</em>.</strong> L'ensemble de vos liens absolus doivent y référer. Vous pouvez, dans le même temps, bénéficier du second domaine. HTTP et HTML supportent deux techniques qui permettent à vos utilisateurs et aux moteurs de recherche de savoir simplement lequel des deux domaines constitue le domaine canonique, bien que l'autre domaine soit actif et serve des pages web.</li> </ul> <p>Ainsi, choisissez un de vos domaines comme domaine canonique. Les deux techniques ci-dessous permettent de maintenir le domaine non-canonique en état de marche.</p> @@ -61,7 +61,7 @@ original_slug: Web/HTTP/Basics_of_HTTP/Choisir_entre_les_URLs_www_sans_www <h2 id="Choisir_www_ou_non">Choisir www ou non</h2> -<p class="entry-title">Il s'agit d'un sujet subjectif âprement débattu. S vous souhaitez approfondir, vous pouvez lire <a href="http://www.themezilla.com/should-you-use-www-in-your-url-or-not/">de nombreux</a> <a href="http://www.wpbeginner.com/beginners-guide/www-vs-non-www-which-is-better-for-wordpress-seo/">articles</a> sur ce sujet.</p> +<p>Il s'agit d'un sujet subjectif âprement débattu. S vous souhaitez approfondir, vous pouvez lire <a href="http://www.themezilla.com/should-you-use-www-in-your-url-or-not/">de nombreux</a> <a href="http://www.wpbeginner.com/beginners-guide/www-vs-non-www-which-is-better-for-wordpress-seo/">articles</a> sur ce sujet.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/http/basics_of_http/data_uris/index.html b/files/fr/web/http/basics_of_http/data_uris/index.html index 418099cb90..5922ae68e0 100644 --- a/files/fr/web/http/basics_of_http/data_uris/index.html +++ b/files/fr/web/http/basics_of_http/data_uris/index.html @@ -14,7 +14,7 @@ translation_of: Web/HTTP/Basics_of_HTTP/Data_URIs <p><strong>Les URLs de données</strong>, les URLs préfixées par le schéma <code>data:</code>, permettent aux créateurs de contenu d'intégrer de petits fichiers dans des documents.</p> <div class="note"> -<p><strong>Remarque </strong>: Les URLs de données sont traitées comme des origines opaques uniques par les navigateurs modernes, ainsi, contrairement aux autres objets classiques, ces URLs n'héritent pas des propriétés de l'objet ayant mené à cette URL.</p> +<p><strong>Note :</strong> Les URLs de données sont traitées comme des origines opaques uniques par les navigateurs modernes, ainsi, contrairement aux autres objets classiques, ces URLs n'héritent pas des propriétés de l'objet ayant mené à cette URL.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/http/basics_of_http/evolution_of_http/index.html b/files/fr/web/http/basics_of_http/evolution_of_http/index.html index 30f3797c38..759eb3679a 100644 --- a/files/fr/web/http/basics_of_http/evolution_of_http/index.html +++ b/files/fr/web/http/basics_of_http/evolution_of_http/index.html @@ -183,7 +183,7 @@ Server: Apache <li>Il permet au serveur de remplir le cache du client avant qu'il ne soit demandé par ce dernier, on parle alors d'évènements générés par le serveur.</li> </ul> -<p>Devenu un standard officiel en mai 2015, HTTP/2 a rencontré un large succès. En janvier 2018, 23.9% des sites web utilisent HTTP/2 (8.7% en 2016)<sup><a href="https://w3techs.com/technologies/details/ce-http2/all/all">[1]</a></sup>. Ce qui représentait en 2015 plus de 68% des requêtes<sup><a href="https://www.keycdn.com/blog/http2-statistics/">[2]</a></sup>. Les sites web générant beaucoup de trafic montre un taux d'adoption très rapide, ce qui s'explique par le gain de bande passante et les économies ainsi générées.</p> +<p>Devenu un standard officiel en mai 2015, HTTP/2 a rencontré un large succès. En janvier 2018, 23.9% des sites web utilisent HTTP/2 (8.7% en 2016) (<a href="https://w3techs.com/technologies/details/ce-http2/all/all">source</a>). Ce qui représentait en 2015 plus de 68% des requêtes (<a href="https://www.keycdn.com/blog/http2-statistics/">source</a>). Les sites web générant beaucoup de trafic montre un taux d'adoption très rapide, ce qui s'explique par le gain de bande passante et les économies ainsi générées.</p> <p>Cette adoption fulgurante de HTTP/2 s'explique probablement par le fait que cette nouvelle version ne nécessite pas de mise à jour des sites web et des applications, l'utilisation de HTTP/1.x ou HTTP/2 étant transparente. Il suffit qu'un serveur à jour et un navigateur moderne communiquent pour que cela fonctionne. La traction générée par les premiers utilisateurs ainsi que le renouvellement des serveurs devenant obsolètes entraînent la croissance de HTTP/2 sans que cela requiert des efforts supplémentaires.</p> diff --git a/files/fr/web/http/basics_of_http/identifying_resources_on_the_web/index.html b/files/fr/web/http/basics_of_http/identifying_resources_on_the_web/index.html index f03b6a1f47..113f4f10b2 100644 --- a/files/fr/web/http/basics_of_http/identifying_resources_on_the_web/index.html +++ b/files/fr/web/http/basics_of_http/identifying_resources_on_the_web/index.html @@ -8,7 +8,7 @@ original_slug: Web/HTTP/Basics_of_HTTP/Identifier_des_ressources_sur_le_Web --- <div>{{HTTPSidebar}}</div> -<p class="summary">La cible d'une requête HTTP est appelée une "ressource", elle ne possède pas de type particulier. Il peut s'agir d'un document, d'une photo ou de n'importe quoi d'autre. Chaque ressource est identifiée à l'aide d'une <em>Uniform Resource Identifier</em> ({{Glossary("URI")}}) utilisé au sein de HTTP pour identifier les ressources.</p> +<p>La cible d'une requête HTTP est appelée une "ressource", elle ne possède pas de type particulier. Il peut s'agir d'un document, d'une photo ou de n'importe quoi d'autre. Chaque ressource est identifiée à l'aide d'une <em>Uniform Resource Identifier</em> ({{Glossary("URI")}}) utilisé au sein de HTTP pour identifier les ressources.</p> <p>L'identité et l'emplacement d'une ressource sur le Web sont souvent déterminées via une URL (<em>Uniform Resource Locator</em>° un type d'URI. Il existe des cas valides où l'identité et l'emplacement d'une ressource ne sont pas obtenus par la même URI comme lorsque l'en-tête {{HTTPHeader("Alt-Svc")}} est utilisé. La ressource requise par le client doit alors être récupérée à partir d'un emplacement différent.</p> @@ -48,7 +48,7 @@ urn:ietf:rfc:7230 <h3 id="Schéma_ou_protocole">Schéma ou protocole</h3> <dl> - <dt><img alt="Protocole" src="https://mdn.mozillademos.org/files/8013/mdn-url-protocol@x2.png" style="height: 70px; width: 440px;"></dt> + <dt><img alt="Protocole" src="mdn-url-protocol@x2.png"></dt> <dd><code>http://</code> constitue le protocole, il indique le protocole qui doit être utilisé par le navigateur. Il s'agit généralement de HTTP ou de sa variante sécurisée HTTPS. Le Web nécessite l'un ou l'autre de ces protocoles néanmoins, les navigateurs sont capables de gérer d'autres protocoles tels que <code>mailto:</code> (pour ouvrir un client mail) or <code>ftp:</code> pour gérer un transfert de fichier. Essayez, lorsque vous naviguez, d'identifier les protocoles utilisés. Les schémas usuels sont :</dd> </dl> @@ -106,35 +106,35 @@ urn:ietf:rfc:7230 <h3 id="Autorité">Autorité</h3> <dl> - <dt><img alt="Nom de domaine" src="https://mdn.mozillademos.org/files/8015/mdn-url-domain@x2.png" style="height: 70px; width: 440px;"></dt> + <dt><img alt="Nom de domaine" src="mdn-url-domain@x2.png"></dt> <dd><code>www.exemple.com</code> est le nom de domaine ou l'autorité qui gère cet espace de noms. Il indique quel serveur Web est appelé. Il est aussi possible d'utiliser directement une adresse IP ({{Glossary("IP address")}}), néanmoins elles sont moins pratiques à manipuler pour des humains et sont donc moins fréquemment utilisées pour accéder à une ressource sur le Web.</dd> </dl> <h3 id="Port">Port</h3> <dl> - <dt><img alt="Port" src="https://mdn.mozillademos.org/files/8017/mdn-url-port@x2.png" style="height: 70px; width: 440px;"></dt> + <dt><img alt="Port" src="mdn-url-port@x2.png"></dt> <dd><code>:80</code> constitue le port. Il indique la "porte" technique à utiliser pour accéder à une ressource sur un serveur web. Il est généralement omis puisque le serveur web utilisera par défaut les ports standards pour HTTP (port 80 pour HTTP et 443 pour HTTPS) pour permettre l'accès aux ressources qu'il héberge. Dans le cas où le port par défaut n'est pas celui utilisé, il est obligatoire de le spécifier.</dd> </dl> <h3 id="Chemin">Chemin</h3> <dl> - <dt><img alt="Chemin d'accès au fichier" src="https://mdn.mozillademos.org/files/8019/mdn-url-path@x2.png" style="height: 70px; width: 440px;"></dt> + <dt><img alt="Chemin du fichier" src="mdn-url-path@x2.png"></dt> <dd><code>/chemin/du/fichier.html</code> constitue le chemin d'accès à la ressource sur le serveur web. Au début du Web, le chemin représentait un emplacement physique où le fichier était stocké, à l'heure actuelle il s'agit d'une abstraction gérée par le serveur web sans réelle existence physique..</dd> </dl> <h3 id="Requête">Requête</h3> <dl> - <dt><img alt="Paramètre" src="https://mdn.mozillademos.org/files/8021/mdn-url-parameters@x2.png" style="height: 70px; width: 440px;"></dt> + <dt><img alt="Paramètres" src="mdn-url-parameters@x2.png"></dt> <dd><code>?key1=value1&key2=value2</code> sont des paramètres additionnels fournis au serveur web. Ces paramètres sont un ensemble de clés/valeurs séparé par le symbole <code>&</code>. Le serveur web peut utiliser ces paramètres pour effectuer des tâches avant de retourner une ressource au client. Chaque serveur web possède ses propres règles en ce qui concerne la gestion des paramètres.</dd> </dl> <h3 id="Fragment">Fragment</h3> <dl> - <dt><img alt="Ancre" src="https://mdn.mozillademos.org/files/8023/mdn-url-anchor@x2.png" style="height: 70px; width: 440px;"></dt> + <dt><img alt="Ancre" src="mdn-url-anchor@x2.png"></dt> <dd><code>#QuelquePartDansLeDocument</code> est une ancre vers un morceau de la ressource en particulier, elle constitue une sorte de marque-page à l'intérieur de la ressource. Cela permet au navigateur de savoir où aller pour afficher le contenu à l'emplacement de l'ancre. Au sein d'une page HTML par exemple, le navigateur défilera jusqu'à ce point. Pour un document vidéo ou audio, le navigateur essaiera d'accéder au temps indiqué par l'ancre. On notera que la partie située après le caractère #, aussi appelé le fragment, n'est jamais envoyé au serveur avec la requête.</dd> </dl> diff --git a/files/fr/web/http/basics_of_http/mime_types/index.html b/files/fr/web/http/basics_of_http/mime_types/index.html index e114c7584f..7669f3e3c9 100644 --- a/files/fr/web/http/basics_of_http/mime_types/index.html +++ b/files/fr/web/http/basics_of_http/mime_types/index.html @@ -83,7 +83,7 @@ application/octet-stream <pre class="syntaxbox">multipart/form-data multipart/byteranges</pre> -<p id="sect1">Les types composés, aussi appelés types <em>multipart</em> indiquent une catégorie de document qui sont constitués de différents éléments. A l'exception de <code>multipart/form-data</code>, utilisé en association avec des <a href="/fr/docs/Web/Guide/HTML/Forms">formulaires HTML</a> et la méthode {{HTTPMethod("POST")}} et de <code>multipart/byteranges</code>, utilisé avec le statut HTTP {{HTTPStatus("206")}} <code>Partial Content</code> renvoyant uniquement une sous-partie du document ce qui entraînera vraisemblablement l'apparition d'une fenêtre "Enregistrer sous" étant donné que HTTP ne gère pas ces documents de manière différente et que le navigateur ne saura pas commment afficher ce document incomplet.</p> +<p>Les types composés, aussi appelés types <em>multipart</em> indiquent une catégorie de document qui sont constitués de différents éléments. A l'exception de <code>multipart/form-data</code>, utilisé en association avec des <a href="/fr/docs/Web/Guide/HTML/Forms">formulaires HTML</a> et la méthode {{HTTPMethod("POST")}} et de <code>multipart/byteranges</code>, utilisé avec le statut HTTP {{HTTPStatus("206")}} <code>Partial Content</code> renvoyant uniquement une sous-partie du document ce qui entraînera vraisemblablement l'apparition d'une fenêtre "Enregistrer sous" étant donné que HTTP ne gère pas ces documents de manière différente et que le navigateur ne saura pas commment afficher ce document incomplet.</p> <h2 id="Types_MIME_utiles_pour_les_développeurs_web">Types MIME utiles pour les développeurs web</h2> @@ -96,7 +96,7 @@ multipart/byteranges</pre> <p>Il s'agit de la valeur par défaut pour les fichiers texte. Bien qu'il signifie fichier texte de format inconnu, les navigateurs prendront pour hypothèse qu'ils peuvent l'afficher.</p> <div class="note"> -<p>Il est important de noter que <code>text/plain</code> ne signifie pas <em>tous les formats de fichiers textuels</em>. Si le client s'attend à recevoir un format particulier de données textuelles, il est vraisemblable que le type <code>text/plain</code> ne soit pas considéré comme valide à la réception. Par exemple, si le client télécharge un fichier <code>text/plain</code> à partir d'un {{HTMLElement("link")}} déclarant des fichiers CSS, ce dernier ne sera pas considéré comme un CSS, le type MIME à utiliser étant <code>text/css</code>.</p> +<p><strong>Note :</strong> Il est important de noter que <code>text/plain</code> ne signifie pas <em>tous les formats de fichiers textuels</em>. Si le client s'attend à recevoir un format particulier de données textuelles, il est vraisemblable que le type <code>text/plain</code> ne soit pas considéré comme valide à la réception. Par exemple, si le client télécharge un fichier <code>text/plain</code> à partir d'un {{HTMLElement("link")}} déclarant des fichiers CSS, ce dernier ne sera pas considéré comme un CSS, le type MIME à utiliser étant <code>text/css</code>.</p> </div> <h3 id="textcss"><code>text/css</code></h3> diff --git a/files/fr/web/http/basics_of_http/resource_urls/index.html b/files/fr/web/http/basics_of_http/resource_urls/index.html index 30207ff2e8..62e578b91a 100644 --- a/files/fr/web/http/basics_of_http/resource_urls/index.html +++ b/files/fr/web/http/basics_of_http/resource_urls/index.html @@ -48,7 +48,7 @@ original_slug: Web/HTTP/Basics_of_HTTP/URLs_de_type_ressource <p>Firefox nécessite néanmoins le chargement des ressources au sein d'un contenu web dans certains cas. Ainsi lorsque l'on souhaite accéder au code source d'une page à l'aide de "Code source de la page", un appel à <code>viewsource.css</code> via une URI <code>resource:</code> est nécessaire. Les ressources auxquelles le contenu web a besoin d'accéder ont été déplacées sous <code>resource://content-accessible/</code>, une partie isolée et ne contenant que des ressources n'étant pas confidentielles. De cette manière, il est possible d'exposer des ressources tout en réduisant la plupart des menaces.</p> <div class="note"> -<p><strong>Note</strong> : Il est recommandé de ne plus utiliser les URLs de type ressource lors du développement web ou de celui d'un module. Leur utilisation était peu fiable et la plupart ne fonctionnent plus.</p> +<p><strong>Note :</strong> Il est recommandé de ne plus utiliser les URLs de type ressource lors du développement web ou de celui d'un module. Leur utilisation était peu fiable et la plupart ne fonctionnent plus.</p> </div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/http/browser_detection_using_the_user_agent/index.html b/files/fr/web/http/browser_detection_using_the_user_agent/index.html index 59a3c01395..072103ebd8 100644 --- a/files/fr/web/http/browser_detection_using_the_user_agent/index.html +++ b/files/fr/web/http/browser_detection_using_the_user_agent/index.html @@ -14,7 +14,7 @@ original_slug: Web/HTTP/Detection_du_navigateur_en_utilisant_le_user_agent <p>Les navigateurs et les standards ne sont cependant pas parfaits, il reste certains cas limites pour lesquels connaître le navigateur utilisé peut s'avérer utile. Utiliser le User-Agent dans ce but paraît simple mais le faire de manière fiable est en réalité très difficile. Ce document va vous guider pour lire le User-Agent aussi précisément que possible.</p> <div class="note"> -<p>Il est important de rappeler que contrôler le contenu du User-Agent est rarement une bonne idée. Il est presque toujours possible de trouver une solution plus générique et compatible avec un plus grand nombre de navigateurs et d'appareils !</p> +<p><strong>Note :</strong> Il est important de rappeler que contrôler le contenu du User-Agent est rarement une bonne idée. Il est presque toujours possible de trouver une solution plus générique et compatible avec un plus grand nombre de navigateurs et d'appareils !</p> </div> <h2 id="A_prendre_en_compte_avant_d'identifier_le_navigateur">A prendre en compte avant d'identifier le navigateur</h2> @@ -58,13 +58,13 @@ original_slug: Web/HTTP/Detection_du_navigateur_en_utilisant_le_user_agent <p>Faites aussi attention à ne pas utiliser une expression régulière trop simple sur le nom du navigateur car le User-Agent contient d'autres chaînes de caractères ne respectant pas le format clé/valeur. Par exemple, le User-Agent de Safari et Chrome contient une chaîne "like Gecko".</p> -<table style="height: 585px; width: 852px;"> +<table> <thead> <tr> - <th scope="col"> </th> + <th scope="col">Moteur</th> <th scope="col">Doit contenir</th> <th scope="col">Ne doit pas contenir</th> - <th scope="col"> </th> + <th scope="col">Notes</th> </tr> </thead> <tbody> @@ -101,15 +101,15 @@ original_slug: Web/HTTP/Detection_du_navigateur_en_utilisant_le_user_agent <tr> <td>Opera</td> <td> - <p>OPR/xyz <sup>[1]</sup></p> + <p>OPR/xyz></p> - <p>Opera/xyz <sup>[2]</sup></p> + <p>Opera/xyz</p> </td> <td> </td> <td> - <p><sup>[1]</sup> Opera 15+ (moteur de rendu Blink) </p> + <p>Opera 15+ (moteur de rendu Blink)</p> - <p><sup>[2]</sup><span style="line-height: 1.5;"> Opera 12- (moteur de rendu Presto)</span></p> + <p>Opera 12- (moteur de rendu Presto)</p> </td> </tr> <tr> @@ -135,12 +135,12 @@ original_slug: Web/HTTP/Detection_du_navigateur_en_utilisant_le_user_agent <p>Il y a cinq principaux moteurs de rendu : Trident, Gecko, Presto, Blink et Webkit. Puisque détecter le nom du moteur de rendu est courant, d'autres noms sont ajoutés dans beaucoup d'autres User-Agents. Il est donc important de faire attention aux faux positifs lorsqu'on cherche à détecter le moteur de rendu.</p> -<table style="width: 100%;"> +<table> <thead> <tr> - <th scope="col"> </th> + <th scope="col">Moteur</th> <th scope="col">Doit contenir</th> - <th scope="col"> </th> + <th scope="col">Ne doit pas contenir</th> </tr> </thead> <tbody> @@ -206,7 +206,7 @@ original_slug: Web/HTTP/Detection_du_navigateur_en_utilisant_le_user_agent <tr> <td>Mozilla (Gecko, Firefox)</td> <td><a href="/en-US/docs/Gecko_user_agent_string_reference">Chaîne <strong>Mobile</strong> ou <strong>Tablet</strong></a> dans le commentaire</td> - <td>Mozilla/5.0 (Android; Mobile; rv:13.0) Gecko/13.0<span class="Object" id="OBJ_PREFIX_DWT935_com_zimbra_ymaps"><span class="Object" id="OBJ_PREFIX_DWT936_com_zimbra_ymaps"> Firefox/13.0</span></span></td> + <td>Mozilla/5.0 (Android; Mobile; rv:13.0) Gecko/13.0 Firefox/13.0</td> </tr> <tr> <td>Basé sur WebKit (Android, Safari)</td> @@ -221,10 +221,10 @@ original_slug: Web/HTTP/Detection_du_navigateur_en_utilisant_le_user_agent <tr> <td>Basé sur Presto (Opera 12-)</td> <td> - <p><a href="http://my.opera.com/community/openweb/idopera/" style="line-height: 1.5;">Chaîne <strong>Opera Mobi/xyz</strong></a><span style="line-height: 1.5;"> dans le commentaire (Opera 12-)</span></p> + <p><a href="http://my.opera.com/community/openweb/idopera/">Chaîne <strong>Opera Mobi/xyz</strong></a> dans le commentaire (Opera 12-)</p> </td> <td> - <p><span style="line-height: 1.5;">Opera/9.80 (Android 2.3.3; Linux; Opera Mobi/ADR-1111101157; U; es-ES) Presto/2.9.201 Version/11.50</span></p> + <p>Opera/9.80 (Android 2.3.3; Linux; Opera Mobi/ADR-1111101157; U; es-ES) Presto/2.9.201 Version/11.50</p> </td> </tr> <tr> diff --git a/files/fr/web/http/caching/index.html b/files/fr/web/http/caching/index.html index f398127120..adcab8ef8d 100644 --- a/files/fr/web/http/caching/index.html +++ b/files/fr/web/http/caching/index.html @@ -10,7 +10,7 @@ original_slug: Web/HTTP/Cache --- <div>{{HTTPSidebar}}</div> -<p class="summary">Les performances des sites et applications web peuvent être significativement améliorées en réutilisant les ressources déjà collectées précédemment. Les caches web réduisent la latence et le trafic du réseau, et ainsi diminuent le temps nécessaire à l'affichage de la représentation d'une ressource. En utilisant la mise en cache HTTP, les sites web deviennent plus réactifs.</p> +<p>Les performances des sites et applications web peuvent être significativement améliorées en réutilisant les ressources déjà collectées précédemment. Les caches web réduisent la latence et le trafic du réseau, et ainsi diminuent le temps nécessaire à l'affichage de la représentation d'une ressource. En utilisant la mise en cache HTTP, les sites web deviennent plus réactifs.</p> <h2 id="Différents_types_de_caches">Différents types de caches</h2> @@ -18,7 +18,7 @@ original_slug: Web/HTTP/Cache <p>Il y a différents types de caches, qui peuvent être groupés en deux principales catégories : les caches privés et les caches partagés. Un <em>cache partagé</em> est un cache qui stocke les réponses pour qu’elles soient réutilisées par plus d’un utilisateur. Un <em>cache privé</em> est dédié à un seul utilisateur. Cette page aborde principalement les caches de navigateur et de proxy, mais il existe aussi des caches de passerelle, de CDN, les caches de proxy inversés et les répartiteurs de charge qui sont déployés sur les serveurs web pour une meilleure fiabilité, une meilleure performance et une meilleure évolutivité des sites et applications web.</p> -<p><img alt="Ce que permet un cache, avantages et inconvénients des caches privés ou partagés." lang="fr-FR" src="https://mdn.mozillademos.org/files/16128/HTTPCacheType-fr.png" style="height: 573px; width: 910px;"></p> +<p><img alt="Ce que permet un cache, avantages et inconvénients des caches privés ou partagés." src="http_cache_type.png"></p> <h3 id="Caches_de_navigateur_privés">Caches de navigateur privés</h3> @@ -42,29 +42,29 @@ original_slug: Web/HTTP/Cache <p>Une entrée de cache peut aussi consister en de multiples réponses stockées différenciées par une clé secondaire, si la requête fait l’objet de négociation de contenu. Pour plus de détails, voir les informations à propos de l’en-tête {{HTTPHeader("Vary")}} <a href="#Varying_responses">ci-dessous</a>.</p> -<h2 id="Contrôle_de_la_mise_en_cache"><span class="tlid-translation translation"><span title="">Contrôle de la mise en cache</span></span></h2> +<h2 id="Contrôle_de_la_mise_en_cache">Contrôle de la mise en cache</h2> -<h3 id="L'en-tête_Cache-control"><span class="tlid-translation translation"><span title="">L'en-tête Cache-control</span></span></h3> +<h3 id="L'en-tête_Cache-control">L'en-tête Cache-control</h3> -<p><span class="tlid-translation translation">Le</span> {{HTTPHeader("Cache-Control")}} HTTP/1.1 <span class="tlid-translation translation"><span title="">Le champ d'en-tête général est utilisé pour spécifier les directives pour les mécanismes de cache dans les requêtes et les réponses.</span> <span title="">Utilisez cet en-tête pour définir vos stratégies de mise en cache avec la variété de directives fournie</span></span>s.</p> +<p>Le {{HTTPHeader("Cache-Control")}} HTTP/1.1 Le champ d'en-tête général est utilisé pour spécifier les directives pour les mécanismes de cache dans les requêtes et les réponses. Utilisez cet en-tête pour définir vos stratégies de mise en cache avec la variété de directives fournies.</p> <h4 id="Pas_du_tout_de_cache_mémoire">Pas du tout de cache mémoire</h4> -<p><span class="tlid-translation translation"><span title="">Le cache ne doit rien stocker concernant la demande du client ou la réponse du serveur.</span> <span title="">Une demande est envoyée au serveur et une réponse complète est téléchargée à chaque fois.</span></span></p> +<p>Le cache ne doit rien stocker concernant la demande du client ou la réponse du serveur. Une demande est envoyée au serveur et une réponse complète est téléchargée à chaque fois.</p> <pre>Cache-Control: no-store Cache-Control: no-cache, no-store, must-revalidate </pre> -<h4 id="Pas_de_cache"><span class="tlid-translation translation"><span title="">Pas de cache</span></span></h4> +<h4 id="Pas_de_cache">Pas de cache</h4> -<p><span class="tlid-translation translation"><span title="">Un cache enverra la demande au serveur d'origine pour validation avant de publier une copie en cache</span></span>.</p> +<p>Un cache enverra la demande au serveur d'origine pour validation avant de publier une copie en cache.</p> <pre>Cache-Control: no-cache</pre> -<h4 id="Caches_privées_et_publiques"><span class="tlid-translation translation"><span title="">Caches privées et publiques</span></span></h4> +<h4 id="Caches_privées_et_publiques">Caches privées et publiques</h4> -<p><span class="tlid-translation translation"><span title="">La directive "public" indique que la réponse peut être mise en cache par n'importe quel cache.</span> <span title="">Cela peut être utile si les pages avec une authentification HTTP ou des codes d’état de réponse qui ne sont pas normalement mis en cache doivent maintenant être mis en cache.</span> <span title="">En revanche, "privé" indique que la réponse est destinée à un seul utilisateur et ne doit pas être stockée par un cache partagé.</span> <span title="">Un cache de navigateur privé peut stocker la réponse dans ce cas.</span></span></p> +<p>La directive "public" indique que la réponse peut être mise en cache par n'importe quel cache. Cela peut être utile si les pages avec une authentification HTTP ou des codes d’état de réponse qui ne sont pas normalement mis en cache doivent maintenant être mis en cache. En revanche, "privé" indique que la réponse est destinée à un seul utilisateur et ne doit pas être stockée par un cache partagé. Un cache de navigateur privé peut stocker la réponse dans ce cas.</p> <pre>Cache-Control: private Cache-Control: public @@ -72,21 +72,21 @@ Cache-Control: public <h4 id="Expiration">Expiration</h4> -<p><span class="tlid-translation translation"><span title="">La directive la plus importante ici est "max-age = <secondes>", qui correspond au temps maximum pendant lequel une ressource est considérée comme nouvelle.</span> <span title="">Contrairement à {{HTTPHeader ("Expires")}}, cette directive est relative à l'heure de la demande.</span> <span title="">Pour les fichiers de l'application qui ne changeront pas, vous pouvez généralement ajouter une mise en cache agressive.</span> <span title="">Cela inclut les fichiers statiques tels que les images, les fichiers CSS et les fichiers JavaScript, par exemple.</span></span></p> +<p>La directive la plus importante ici est "max-age = <secondes>", qui correspond au temps maximum pendant lequel une ressource est considérée comme nouvelle. Contrairement à {{HTTPHeader ("Expires")}}, cette directive est relative à l'heure de la demande. Pour les fichiers de l'application qui ne changeront pas, vous pouvez généralement ajouter une mise en cache agressive. Cela inclut les fichiers statiques tels que les images, les fichiers CSS et les fichiers JavaScript, par exemple.</p> -<p><span class="tlid-translation translation"><span title="">Pour plus de détails, voir aussi la section</span></span> <a href="#Freshness">Freshness</a> <span class="tlid-translation translation"><span title="">ci-dessous.</span></span>.</p> +<p>Pour plus de détails, voir aussi la section <a href="#Freshness">Freshness</a> ci-dessous..</p> <pre>Cache-Control: max-age=31536000</pre> <h4 id="Validation">Validation</h4> -<p><span class="tlid-translation translation"><span title="">Lors de l'utilisation de la directive "must-revalidate", le cache doit vérifier l'état des ressources obsolètes avant de l'utiliser, et celles qui ont expiré ne doivent pas être utilisées.</span> <span title="">Pour plus de détails, voir la section</span></span> <a href="#Cache_validation">Validation</a> <span class="tlid-translation translation"><span title="">ci-dessous</span></span>.</p> +<p>Lors de l'utilisation de la directive "must-revalidate", le cache doit vérifier l'état des ressources obsolètes avant de l'utiliser, et celles qui ont expiré ne doivent pas être utilisées. Pour plus de détails, voir la section <a href="#Cache_validation">Validation</a> ci-dessous.</p> <pre>Cache-Control: must-revalidate</pre> -<h3 id="L'en-têtePragma"><span class="tlid-translation translation"><span title="">L'en-tête</span></span><code>Pragma</code></h3> +<h3 id="L'en-têtePragma">L'en-tête<code>Pragma</code></h3> -<p><span class="tlid-translation translation"><span title="">{{HTTPHeader ("Pragma")}} est un en-tête HTTP / 1.0. Il n'est pas spécifié pour les réponses HTTP et ne constitue donc pas un remplacement fiable pour l'en-tête général HTTP / 1.1 Cache-Control, bien qu'il se comporte de la même manière que Cache</span><span title="">-Control: no-cache, si le champ d'en-tête Cache-Control est omis dans une requête.</span> <span title="">Utilisez Pragma uniquement pour une compatibilité ascendante avec les clients HTTP / 1.0</span></span>.</p> +<p>{{HTTPHeader ("Pragma")}} est un en-tête HTTP / 1.0. Il n'est pas spécifié pour les réponses HTTP et ne constitue donc pas un remplacement fiable pour l'en-tête général HTTP / 1.1 Cache-Control, bien qu'il se comporte de la même manière que Cache-Control: no-cache, si le champ d'en-tête Cache-Control est omis dans une requête. Utilisez Pragma uniquement pour une compatibilité ascendante avec les clients HTTP / 1.0.</p> <h2 id="Fraîcheur_(Freshness)">Fraîcheur (Freshness)</h2> @@ -94,7 +94,7 @@ Cache-Control: public <p>Ici un exemple de ce processus avec un cache de proxy partagé :</p> -<p><img alt="Show how a proxy cache acts when a doc is not cache, in the cache and fresh, in the cache and stale." src="https://mdn.mozillademos.org/files/13771/HTTPStaleness.png" style="height: 910px; width: 822px;"></p> +<p><img alt="Show how a proxy cache acts when a doc is not cache, in the cache and fresh, in the cache and stale." src="http_staleness.png"></p> <p>Le calcul de la durée de vie de la fraîcheur est basé sur plusieurs en-têtes. Si une en-tête "<code>Cache-control: max-age=N</code>" est spécifiée, alors la durée de vie est égale à N. Si cette en-tête est absente (ce qui est souvent le cas), on vérifie si une en-tête {{HTTPHeader("Expires")}} est présente. Si ce <code>Expires</code> existe, alors sa valeur moins la valeur de l'en-tête {{HTTPHeader("Date")}} détermine la durée de vie de la fraîcheur. Finalement, si aucune en-tête n'est présente, on en cherche une {{HTTPHeader("Last-Modified")}} et si elle est présente, alors la durée de vie de la fraîcheur du cache est égale à la valeur de l'en-tête <code>Date</code> moins la valeur de l'en-tête <code>Last-modified</code> divisée par 10.</p> @@ -109,11 +109,11 @@ Cache-Control: public <p>Plus nous utilisons les ressources en cache, mieux se porteront la "responsivité" et les performances d'un site Web. Pour optimiser ceci, les bonnes pratiques recommandent de fixer les temps d'expiration aussi loin que possible dans le futur. C'est possible avec des ressources mises à jour régulièrement ou trés souvent mais ça devient problématique pour les ressources mises à jour trés rarement. Ce sont les ressources qui bénéficieraient au mieux de la mise en cache mais cela les rend difficiles à mettre à jour. C'est typique des ressources techniques incluses ou liées depuis chaque page web : les fichiers JavaScript et CSS ne changent pas fréquemment mais quand ils changent, vous voulez qu'ils soient mis à jour au plus vite.</p> -<p>Les développeurs Web ont inventé une technique que Steve Sounders a appelée <em>revving</em><sup><a href="https://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/">[1]</a></sup>. Les fichiers rarement mis à jour sont nommés d'une maniére spécifique : dans leur URL, habituellement dans le nom de fichier, est ajouté un numéro de révision (ou version). Comme ceci, chaque nouvelle révision / version de la ressource est considérée comme une ressource elle-même, qui ne change jamais et qui peut avoir un temps d'expiration trés éloigné dans le futur. En général un an ou plus. Dans le but d'avoir les nouvelles versions, tous les liens doivent être changés. C'est l'inconvénient de cette méthode : une complexité additionnelle habituellement prise en charge par la chaîne d'outils de développeurs Web. Quand les ressources qui ne sont pas mises à jour fréquemment changent, elles induisent un changement supplémentaire aux ressources régulièrement rafraîchies. Quand elles sont lues, les nouvelles versions des autres sont lues aussi.</p> +<p>Les développeurs Web ont inventé une technique que Steve Sounders a appelée <em>revving</em> (<a href="https://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/">source</a>). Les fichiers rarement mis à jour sont nommés d'une maniére spécifique : dans leur URL, habituellement dans le nom de fichier, est ajouté un numéro de révision (ou version). Comme ceci, chaque nouvelle révision / version de la ressource est considérée comme une ressource elle-même, qui ne change jamais et qui peut avoir un temps d'expiration trés éloigné dans le futur. En général un an ou plus. Dans le but d'avoir les nouvelles versions, tous les liens doivent être changés. C'est l'inconvénient de cette méthode : une complexité additionnelle habituellement prise en charge par la chaîne d'outils de développeurs Web. Quand les ressources qui ne sont pas mises à jour fréquemment changent, elles induisent un changement supplémentaire aux ressources régulièrement rafraîchies. Quand elles sont lues, les nouvelles versions des autres sont lues aussi.</p> <p>Cette technique a un avantage de plus : mettre à jour deux ressources en cache en même temps ne fera pas qu'une version périmée d'une des ressources sera utilisée avec la nouvelle version de l'autre. C'est trés important quand les sites ont des feuilles de style CSS ou des scripts JS qui ont des dépendances mutuelles c'est-à-dire qui dépendent l'un de l'autre parce qu'ils se réfèrent aux mêmes éléments HTML.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13779/HTTPRevved.png"></p> +<p><img alt="How the revved cache mechanism works." src="http_revved_fix_typo.png"></p> <p>La version de révision ajoutée à la ressource révisée n'a pas à être sous une forme classique de chaîne de version comme 1.1.3, ou une suite monotone de chiffres. Cela peut être n'importe quoi qui prévienne une collision : un hash ou une date.</p> @@ -137,7 +137,7 @@ Cache-Control: public <p>Quand un cache reçoit une requête qui peut être satisfaite par une réponse en cache qui a un champ d'en-tête <code>Vary</code> il ne devra pas utiliser cette réponse à moins que tous les champs d'en-tête cités dans l'en-tête <code>Vary</code> ne soient communs aux deux : la requête originale (en cache) et la nouvelle requête.</p> -<p><img alt="The Vary header leads cache to use more HTTP headers as key for the cache." src="https://mdn.mozillademos.org/files/13769/HTTPVary.png" style="height: 817px; width: 752px;"></p> +<p><img alt="The Vary header leads cache to use more HTTP headers as key for the cache." src="http_vary.png"></p> <p>Cela peut être trés utile pour servir du contenu dynamique par exemple. Quand on se sert de l'en-tête <code>Vary: User-Agent</code>, les serveurs de cache devront considérer l'agent utilisateur pour décider de servir la page du cache. Si vous servez du contenu varié aux utilisateurs de mobiles, cela vous aidera à éviter qu'un cache puisse servir, par erreur, une version "Desktop" de votre site. En plus, cela aidera Google et d'autres moteurs de recherche à découvrir la version mobile d'une page et peut aussi les avertir qu'aucun "masquage" (<a href="https://en.wikipedia.org/wiki/Cloaking">Cloaking</a>) n'est à craindre.</p> diff --git a/files/fr/web/http/compression/index.html b/files/fr/web/http/compression/index.html index ec4fa26888..49b4794212 100644 --- a/files/fr/web/http/compression/index.html +++ b/files/fr/web/http/compression/index.html @@ -35,20 +35,20 @@ translation_of: Web/HTTP/Compression <p>Les algorithmes de compression avec pertes sont généralement plus performants que les algorithmes de compression sans perte.</p> <div class="note"> -<p>Puisque certains types de fichiers gèrent nativement la compression, il est souvent inutile de les compresser une seconde fois. En réalité, cela s'avère souvent contre-productif de par la taille induite par les données additionnelles nécessaires (lors de la compression, un dictionnaire de données est généré) le fichier en sortie est alors plus gros que celui avant compression. Veillez à ne pas utiliser les techniques suivantes pour les fichiers au format compressé.</p> +<p><strong>Note :</strong> Puisque certains types de fichiers gèrent nativement la compression, il est souvent inutile de les compresser une seconde fois. En réalité, cela s'avère souvent contre-productif de par la taille induite par les données additionnelles nécessaires (lors de la compression, un dictionnaire de données est généré) le fichier en sortie est alors plus gros que celui avant compression. Veillez à ne pas utiliser les techniques suivantes pour les fichiers au format compressé.</p> </div> <h2 id="Compression_de_bout_en_bout">Compression de bout en bout</h2> <p>La compression de bout en bout constitue la compression permettant le plus de gain de performances pour le Web. La compression de bout en bout est définie par la compression du corps du message qui est effectuée par le serveur et ne sera modifié qu'une fois arrivé à destination par le client. Les étapes lors du transport laissent la charge utile inchangée.</p> -<p><img alt="Séquence du serveur au client mettant en œuvre la compression de bout en bout" src="https://mdn.mozillademos.org/files/13801/HTTPEnco1.png" style="height: 307px; width: 955px;"></p> +<p><img alt="Séquence du serveur au client mettant en œuvre la compression de bout en bout" src="httpenco1.png"></p> <p>L'ensemble des navigateurs récents supportent la compression de bout en bout et le seul élément à échanger entre le serveur et le client est l'algorithme de compression à utiliser. Ces algorithmes sont optimisés pour le transport du texte. Dans les années 90, les technologies de compression ont évoluées rapidement, il existe donc de nombreuses possibilités en termes d'algorithmes. Les algorithmes qu'il convient de considérer à l'heure actuelle sont : <code>gzip</code>, le plus utilisé et <code>br</code> le nouveau venu.</p> <p>Pour sélectionner l'algorithme à utiliser, le navigateur et le serveur s'appuient sur <a href="/fr/docs/Web/HTTP/Content_negotiation"> la négociation du contenu</a>. Le navigateur envoie un en-tête {{HTTPHeader("Accept-Encoding")}} contenant les algorithmes qu'il prend en charge par ordre de préférence, le serveur en sélectionne un pour compresser le corps de la réponse et inclut l'algorithme utilisé dans l'en-tête {{HTTPHeader("Content-Encoding")}} pour informer le navigateur de l’algorithme sélectionné. La négociation de contenu s'appuyant sur l'encodage des données le serveur doit envoyer un en-tête {{HTTPHeader("Vary")}} contenant au moins {{HTTPHeader("Accept-Encoding")}} en plus de l'en-tête de la réponse. Les caches seront ainsi en mesure de gérer les différentes représentations de la ressource.</p> -<p><img alt="Séquence de négociation de contenu échangeant les algorithmes de compression et les en-têtes associés" src="https://mdn.mozillademos.org/files/13811/HTTPCompression1.png" style="height: 307px; width: 771px;"></p> +<p><img alt="Séquence de négociation de contenu échangeant les algorithmes de compression et les en-têtes associés" src="httpcompression1.png"></p> <p>La compression permettant un gain de performance significatif, il est conseillé de l'activer pour l'ensemble des fichiers à l'exception des fichiers audios et vidéos au format compressé.</p> @@ -58,11 +58,11 @@ translation_of: Web/HTTP/Compression <p>La compression saut par saut, bien que similaire à la compression de bout en bout se distingue fondamentalement par son fonctionnement : la compression n'a pas lieu au niveau du serveur mais entre des éléments du réseau situés entre le serveur et le navigateur, chaque bond pouvant utiliser un mécanisme de compression <em>différent</em>.</p> -<p><img alt="Compression saut par saut entre le serveur et le client" src="https://mdn.mozillademos.org/files/13807/HTTPTE1.png"></p> +<p><img alt="Compression saut par saut entre le serveur et le client" src="httpte1.png"></p> <p>HTTP permet de mettre en œuvre cette technique à l'aide d'un élément de négociation de contenu. Le nœud transmettant la donnée diffuse son utilisation de l'en-tête {{HTTPHeader("TE")}}, le noeud suivant choisit la méthode de compression appropriée et transmet son choix via {{HTTPHeader("Transfer-Encoding")}}.</p> -<p><img alt="Diagramme de séquence détaillant les échanges d'en-têtes en compression saut par saut" src="https://mdn.mozillademos.org/files/13809/HTTPComp2.png"></p> +<p><img alt="Diagramme de séquence détaillant les échanges d'en-têtes en compression saut par saut" src="httpcomp2.png"></p> <p>En pratique la compression saut par saut est transparente pour le serveur et le client et elle demeure rarement utilisée. Les en-têtes {HTTPHeader("TE")}} and {{HTTPHeader("Transfer-Encoding")}} sont le plus souvent utilisé pour transmettre des réponses par morceaux ce qui permet la transmission de ressource avant d'en avoir déterminé la taille.</p> diff --git a/files/fr/web/http/conditional_requests/index.html b/files/fr/web/http/conditional_requests/index.html index 5cd04d8440..4590846e91 100644 --- a/files/fr/web/http/conditional_requests/index.html +++ b/files/fr/web/http/conditional_requests/index.html @@ -10,7 +10,7 @@ original_slug: Web/HTTP/Requêtes_conditionnelles --- <p>{{HTTPSidebar}}</p> -<p class="summary">Il existe en HTTP un concept de <em>requête conditionnelle</em> où le résultat, et même le succès d'une requête, peut être changé en comparant les ressources affectées avec la valeur d'un <em>validateur</em>. De telles requêtes peuvent être utiles pour valider le contenu d'un cache et éviter un contrôle inutile, pour vérifier l'intégrité d'un document, par exemple pour la reprise d'un téléchargement ou pour éviter de perdre des mises à jour quand on uploade ou modifie un document sur le serveur.</p> +<p>Il existe en HTTP un concept de <em>requête conditionnelle</em> où le résultat, et même le succès d'une requête, peut être changé en comparant les ressources affectées avec la valeur d'un <em>validateur</em>. De telles requêtes peuvent être utiles pour valider le contenu d'un cache et éviter un contrôle inutile, pour vérifier l'intégrité d'un document, par exemple pour la reprise d'un téléchargement ou pour éviter de perdre des mises à jour quand on uploade ou modifie un document sur le serveur.</p> <h2 id="principles">Principes</h2> @@ -62,7 +62,6 @@ original_slug: Web/HTTP/Requêtes_conditionnelles <dd>Réussit si la <a href="/fr/docs/Web/HTTP/Headers/ETag"><code>ETag</code></a> de la ressource distante est différent de tout ceux listés dans l'en-tête. Par défaut, à moins que l'ETag soit préfixé par <code>'W/'</code>, c'est une validation forte.</dd> <dt><a href="/fr/docs/Web/HTTP/Headers/If-Modified-Since"><code>If-Modified-Since</code></a></dt> <dd>Réussit si la date <a href="/fr/docs/Web/HTTP/Headers/Last-Modified"><code>Last-Modified</code></a> de la ressource distante est plus récente que celle donnée dans l'en-tête.</dd> - <dd></dd> <dt><a href="/fr/docs/Web/HTTP/Headers/If-Unmodified-Since"><code>If-Unmodified-Since</code></a></dt> <dd>Réussit si la date <a href="/fr/docs/Web/HTTP/Headers/Last-Modified"><code>Last-Modified</code></a> de la ressource distante est plus ancienne ou égale à celle donnée dans l'en-tête.</dd> <dt><a href="/fr/docs/Web/HTTP/Headers/If-Range"><code>If-Range</code></a></dt> diff --git a/files/fr/web/http/content_negotiation/index.html b/files/fr/web/http/content_negotiation/index.html index 0a3b3d4427..a1fe95c477 100644 --- a/files/fr/web/http/content_negotiation/index.html +++ b/files/fr/web/http/content_negotiation/index.html @@ -5,13 +5,13 @@ translation_of: Web/HTTP/Content_negotiation --- <div>{{HTTPSidebar}}</div> -<p class="summary">En <a href="/en-US/docs/Glossary/HTTP">HTTP</a>, la <em><strong>négociation de contenu</strong></em> est le mécanisme utilisé pour fournir différentes représentations d'une ressource à la même URI, afin que l'agent utilisateur puisse spécifier celle qui convient le mieux à l'utilisateur (par exemple, la langue d'un document, le format d'image, ou l'encodage du contenu).</p> +<p>En <a href="/en-US/docs/Glossary/HTTP">HTTP</a>, la <em><strong>négociation de contenu</strong></em> est le mécanisme utilisé pour fournir différentes représentations d'une ressource à la même URI, afin que l'agent utilisateur puisse spécifier celle qui convient le mieux à l'utilisateur (par exemple, la langue d'un document, le format d'image, ou l'encodage du contenu).</p> <h2 id="Principes_de_la_négociation_de_contenu">Principes de la négociation de contenu</h2> <p>Un document spécifique s'appelle une <em>ressource</em>. Lorsqu'un client veut y accéder, il le demande en utilisant son URL. Le serveur utilise cette URL pour choisir une des différentes versions qu'il peut fournir - chaque version étant appelée une représentation - et renvoie cette représentation spécifique au client. La ressource globale, ainsi que chacune de ses représentations, ont une URL spécifique. La façon dont une représentation spécifique est choisie est déterminée par la <em>négociation de contenu</em> et il existe plusieurs façons de négocier entre le client et le serveur.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13789/HTTPNego.png" style="height: 311px; width: 767px;"></p> +<p><img alt="" src="httpnego.png"></p> <p>La sélection de la représentation la mieux adaptée se fait par l'un des deux mécanismes suivants:</p> @@ -28,7 +28,7 @@ translation_of: Web/HTTP/Content_negotiation <p>Dans la <em>négociation de contenu gérée par le serveur</em>, ou négociation proactive de contenu, le navigateur (ou tout autre type de client) envoie plusieurs en-têtes HTTP avec l'URL décrivant les choix préférés de l'utilisateur. Le serveur les utilise comme indications et un algorithme interne choisit le meilleur contenu à servir au client. L'algorithme est spécifique au serveur et n'est pas défini dans la norme. Voir, par exemple, l'<a href="http://httpd.apache.org/docs/2.2/en/content-negotiation.html#algorithm">algorithme de négociation d'Apache 2.2</a>.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13791/HTTPNegoServer.png" style="height: 380px; width: 767px;"></p> +<p><img alt="" src="httpnegoserver.png"></p> <p>La norme HTTP/1.1 définit la liste des en-têtes standard qui initient la négociation pilotée par le serveur ({{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Language")}}). Bien qu'à proprement parler {{HTTPHeader("User-Agent")}} ne figure pas dans la liste, il est aussi parfois utilisé pour envoyer une représentation spécifique de la ressource demandée, bien que cela ne soit pas considéré comme une bonne pratique. Le serveur utilise l'en-tête {{HTTPHeader("Vary")}} pour indiquer quels en-têtes il a effectivement utilisés pour la négociation de contenu (ou plus précisément les en-têtes de réponse associés), pour que les <a href="/en-US/docs/Web/HTTP/Caching">caches</a> puissent fonctionner de manière optimale.</p> @@ -51,7 +51,7 @@ translation_of: Web/HTTP/Content_negotiation <h3 id="The_Accept-CH_header_experimental_inline">The <code>Accept-CH</code> header {{experimental_inline}}</h3> <div class="note"> -<p>This is part of an <strong>experimental</strong> technology called <em>Client Hints</em>. Initial support is in Chrome 46 or later. The Device-Memory value is in Chrome 61 or later.</p> +<p><strong>Note :</strong> This is part of an <strong>experimental</strong> technology called <em>Client Hints</em>. Initial support is in Chrome 46 or later. The Device-Memory value is in Chrome 61 or later.</p> </div> <p>The experimental {{HTTPHeader("Accept-CH")}} lists configuration data that can be used by the server to select an appropriate response. Valid values are:</p> @@ -92,7 +92,7 @@ translation_of: Web/HTTP/Content_negotiation <h3 id="The_Accept-CH-Lifetime_header">The <code>Accept-CH-Lifetime</code> header</h3> <div class="note"> -<p>This is part of an <strong>experimental</strong> technology called <em>Client Hints </em> and is only available in Chrome 61 or later.</p> +<p><strong>Note :</strong> This is part of an <strong>experimental</strong> technology called <em>Client Hints </em> and is only available in Chrome 61 or later.</p> </div> <p>The {{HTTPHeader("Accept-CH-Lifetime")}} header is used with the <code>Device-Memory</code> value of the <code>Accept-CH</code> header and indicates the amount of time the device should opt-in to sharing the amount of device memory with the server. The value is given in miliseconds and it's use is optional.</p> @@ -117,7 +117,7 @@ translation_of: Web/HTTP/Content_negotiation <h3 id="The_User-Agent_header">The <code>User-Agent</code> header</h3> <div class="note"> -<p>Though there are legitimate uses of this header for selecting content, <a href="/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent">it is considered bad practice</a> to rely on it to define what features are supported by the user agent.</p> +<p><strong>Note :</strong> Though there are legitimate uses of this header for selecting content, <a href="/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent">it is considered bad practice</a> to rely on it to define what features are supported by the user agent.</p> </div> <p>The {{HTTPHeader("User-Agent")}} header identifies the browser sending the request. This string may contain a space-separated list of <em>product tokens</em> and <em>comments</em>.</p> @@ -138,6 +138,6 @@ translation_of: Web/HTTP/Content_negotiation <p>From the beginnings of HTTP, the protocol allowed another negotiation type: <em>agent-driven negotiation</em> or <em>reactive negotiation</em>. In this negotiation, when facing an ambiguous request, the server sends back a page containing links to the available alternative resources. The user is presented the resources and choose the one to use.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13795/HTTPNego3.png"></p> +<p><img alt="" src="httpnego3.png"></p> <p>Unfortunately, the HTTP standard does not specify the format of the page allowing to choose between the available resource, which prevents to easily automatize the process. Besides falling back to the <em>server-driven negotiation</em>, this method is almost always used in conjunction with scripting, especially with JavaScript redirection: after having checked for the negotiation criteria, the script performs the redirection. A second problem is that one more request is needed in order to fetch the real resource, slowing the availability of the resource to the user.</p> diff --git a/files/fr/web/http/cookies/index.html b/files/fr/web/http/cookies/index.html index 334217f6db..1568fcf41d 100644 --- a/files/fr/web/http/cookies/index.html +++ b/files/fr/web/http/cookies/index.html @@ -9,7 +9,8 @@ translation_of: Web/HTTP/Cookies --- <div>{{HTTPSidebar}}</div> -<p class="summary"><span class="seoSummary">Un cookie HTTP (cookie web, cookie de navigateur) est un petit ensemble de données qu'un serveur envoie au navigateur web de l'utilisateur. Le navigateur peut alors le stocker localement, puis le renvoyer à la prochaine requête vers le même serveur. Typiquement, cette méthode est utilisée par le serveur pour déterminer si deux requêtes proviennent du même navigateur </span>— pour exemple pour garder un utilisateur connecté. Les cookies permettent de conserver de l'information en passant par le procotole HTTP qui est lui "sans état".</p> +<p>Un cookie HTTP (cookie web, cookie de navigateur) est un petit ensemble de données qu'un serveur envoie au navigateur web de l'utilisateur. Le navigateur peut alors le stocker localement, puis le renvoyer à la prochaine requête vers le même serveur. Typiquement, cette méthode est utilisée par le serveur pour déterminer si deux requêtes proviennent du même navigateur.</p> +<p>Cela permet, par exemple, de garder un utilisateur connecté. Les cookies permettent de conserver de l'information en passant par le procotole HTTP qui est lui "sans état".</p> <p>Les cookies sont utilisés pour 3 raisons principales :</p> @@ -25,7 +26,7 @@ translation_of: Web/HTTP/Cookies <p>Les cookies étaient auparavant utilisés pour le stockage côté client. C'était légitime lorsque les cookies étaient la seule manière de stocker des données côté client, mais il est aujourd'hui recommandé de préférer les APIs modernes de stockage. Les cookies sont envoyés avec chaque requête, ils peuvent donc avoir un impact négatif sur les performances (particulièrement pour des connexions mobiles). Les APIs modernes de stockage côté client sont l'<a href="/fr/docs/Web/API/Web_Storage_API" title="DOM Storage">API Web storage</a> (<code>localStorage</code> et <code>sessionStorage</code>) et <a href="/fr/docs/Web/API/API_IndexedDB">IndexedDB</a>.</p> <div class="note"> -<p>Pour voir les cookies stockés (et d'autres stockages que le navigateur peut conserver), vous ouvrez l'<a href="/fr/docs/Outils/Inspecteur_de_stockage">Inspecteur de stockage</a> des Outils Développeur et sélectionnez Cookies dans l'onglet stockage (pour Firefox).</p> +<p><strong>Note :</strong> Pour voir les cookies stockés (et d'autres stockages que le navigateur peut conserver), vous ouvrez l'<a href="/fr/docs/Outils/Inspecteur_de_stockage">Inspecteur de stockage</a> des Outils Développeur et sélectionnez Cookies dans l'onglet stockage (pour Firefox).</p> </div> <h2 id="Création_de_cookies">Création de cookies</h2> @@ -38,14 +39,15 @@ translation_of: Web/HTTP/Cookies <pre class="syntaxbox">Set-Cookie: <nom-du-cookie>=<valeur-du-cookie></pre> -<div class="note"><strong>Note :</strong> Voici comme utiliser l'en-tête <code>Set-Cookie</code> dans divers langages de programmation côté serveur : - -<ul> - <li><a href="https://secure.php.net/manual/en/function.setcookie.php">PHP</a></li> - <li><a href="https://nodejs.org/dist/latest-v8.x/docs/api/http.html#http_response_setheader_name_value">Node.JS</a></li> - <li><a href="https://docs.python.org/3/library/http.cookies.html">Python</a></li> - <li><a href="http://api.rubyonrails.org/classes/ActionDispatch/Cookies.html">Ruby on Rails</a></li> -</ul> +<div class="note"> + <p><strong>Note :</strong> Voici comme utiliser l'en-tête <code>Set-Cookie</code> dans divers langages de programmation côté serveur : + <ul> + <li><a href="https://secure.php.net/manual/en/function.setcookie.php">PHP</a></li> + <li><a href="https://nodejs.org/dist/latest-v8.x/docs/api/http.html#http_response_setheader_name_value">Node.JS</a></li> + <li><a href="https://docs.python.org/3/library/http.cookies.html">Python</a></li> + <li><a href="http://api.rubyonrails.org/classes/ActionDispatch/Cookies.html">Ruby on Rails</a></li> + </ul> + </p> </div> <p>Exemple de réponse HTTP complète:</p> @@ -57,7 +59,7 @@ Set-Cookie: tasty_cookie=strawberry [contenu de la page]</pre> -<p id="The_client_sends_back_to_the_server_its_cookies_previously_stored">Maintenant, à chaque requête vers le serveur, le navigateur va renvoyer au serveur tous les cookies stockés, avec l'entête {{HTTPHeader("Cookie")}}:</p> +<p>Maintenant, à chaque requête vers le serveur, le navigateur va renvoyer au serveur tous les cookies stockés, avec l'entête {{HTTPHeader("Cookie")}}:</p> <pre>GET /sample_page.html HTTP/1.1 Host: www.example.org @@ -74,7 +76,7 @@ Cookie: yummy_cookie=choco; tasty_cookie=strawberry</pre> <pre>Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;</pre> <div class="note"> -<p><strong>Note</strong>: Quand une date d'expiration est définie, le temps et l'heure définis sont relatifs au client auquel le cookie est envoyé, et non au serveur.</p> +<p><strong>Note :</strong> Quand une date d'expiration est définie, le temps et l'heure définis sont relatifs au client auquel le cookie est envoyé, et non au serveur.</p> </div> <h3 id="Cookies_Secure_et_HttpOnly">Cookies <code>Secure</code> et <code>HttpOnly</code></h3> @@ -117,7 +119,7 @@ console.log(document.cookie); <h2 id="Sécurité">Sécurité</h2> <div class="note"> -<p>Les informations confidentielles ou sensibles ne devraient jamais être stockée ou transmises avec les Cookies HTTP, car le mécanisme entier est intrinsèquement insécurisé.</p> +<p><strong>Note :</strong> Les informations confidentielles ou sensibles ne devraient jamais être stockée ou transmises avec les Cookies HTTP, car le mécanisme entier est intrinsèquement insécurisé.</p> </div> <h3 id="Piratage_de_session_et_XSS">Piratage de session et XSS</h3> diff --git a/files/fr/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html b/files/fr/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html index 0f178e49eb..e113a3438b 100644 --- a/files/fr/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html +++ b/files/fr/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html @@ -16,7 +16,7 @@ original_slug: Web/HTTP/CORS/Errors/CORSAllowOriginNeCorrespondPas <h2 id="Symptomes">Symptomes</h2> -<pre class="syntaxbox notranslate"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">Raison : l’en-tête CORS « Access-Control-Allow-Origin » ne correspond pas à « xyz »</span></span></span></span></pre> +<pre class="syntaxbox">Raison : l’en-tête CORS « Access-Control-Allow-Origin » ne correspond pas à « xyz »</pre> <h2 id="Quel_est_le_problème">Quel est le problème ?</h2> @@ -28,11 +28,11 @@ original_slug: Web/HTTP/CORS/Errors/CORSAllowOriginNeCorrespondPas <p>Par exemple, dans Apache, ajoutez une ligne comme celle qui suit à la configuration du serveur (dans la section appropriée <code><Directory></code>, <code><Location></code>, <code><Files></code>, ou <code><VirtualHost></code>). La configuration se trouve généralement dans un fichier <code>.conf</code> (<code>httpd.conf</code> et <code>apache.conf</code> sont des noms couramment attribués à ces fichiers), ou dans un fichier <code>.htaccess</code>.</p> -<pre class="notranslate">Header set Access-Control-Allow-Origin '<em>origin-list</em>'</pre> +<pre>Header set Access-Control-Allow-Origin '<em>origin-list</em>'</pre> <p>Pour Nginx, la commande pour mettre en place cet entête est :</p> -<pre class="notranslate">add_header 'Access-Control-Allow-Origin' '<em>origin-list</em>'</pre> +<pre>add_header 'Access-Control-Allow-Origin' '<em>origin-list</em>'</pre> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/http/cors/errors/corsdidnotsucceed/index.html b/files/fr/web/http/cors/errors/corsdidnotsucceed/index.html index 42b23087d6..1745ec854f 100644 --- a/files/fr/web/http/cors/errors/corsdidnotsucceed/index.html +++ b/files/fr/web/http/cors/errors/corsdidnotsucceed/index.html @@ -22,7 +22,7 @@ original_slug: Web/HTTP/CORS/Errors/CORSNAPasRéussi <pre class="syntaxbox">Raison: la requête CORS a échoué</pre> -<h2 dir="ltr" id="Qu'est_ce_qui_ne_s'est_pas_bien_passé">Qu'est ce qui ne s'est pas bien passé ?</h2> +<h2 id="Qu'est_ce_qui_ne_s'est_pas_bien_passé">Qu'est ce qui ne s'est pas bien passé ?</h2> <p>La requête {{Glossary("HTTP")}} qui utilise le CORS a échoué à cause de la connection HTTP qui n'a pas aboutie soit au niveau du réseau, soit du protocole. L'erreur n'est pas directement lié au CORS, mais est une quelconque erreur réseau de base.</p> diff --git a/files/fr/web/http/cors/errors/corsmissingalloworigin/index.html b/files/fr/web/http/cors/errors/corsmissingalloworigin/index.html index 9eda6df7ea..e49b01ae2a 100644 --- a/files/fr/web/http/cors/errors/corsmissingalloworigin/index.html +++ b/files/fr/web/http/cors/errors/corsmissingalloworigin/index.html @@ -8,7 +8,7 @@ original_slug: Web/HTTP/CORS/Errors/CORSAllowOriginManquant <h2 id="Symptomes">Symptomes</h2> -<pre class="syntaxbox notranslate"> <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant.</span></span></span> </pre> +<pre class="syntaxbox"> Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant. </pre> <h2 id="Quel_est_le_problème">Quel est le problème ?</h2> @@ -18,25 +18,25 @@ original_slug: Web/HTTP/CORS/Errors/CORSAllowOriginManquant <p>Par exemple, pour autoriser le site https://amazing.site à accéder aux resources avec CORS, le header doit être comme suit :</p> -<pre class="notranslate">Access-Control-Allow-Origin: https://amazing.site</pre> +<pre>Access-Control-Allow-Origin: https://amazing.site</pre> <p>Vous pouvez aussi configurer le serveur pour autoriser tous les domaines à accéder aux ressources avec le caractère générique <code>*</code>. Ceci ne devrait être utilisé que pour des APIs publiques. Les APIs privées ne devraient jamais utiliser <code>*</code>, et devraient à la place utiliser un domaine ou un ensemble de domaines. De plus, l'astérisque ne fonctionne que pour les requêtes avec l'attribut {{htmlattrxref("crossorigin")}} ayant comme valeur <code>anonymous</code>.</p> -<pre class="notranslate">Access-Control-Allow-Origin: *</pre> +<pre>Access-Control-Allow-Origin: *</pre> <div class="warning"> -<p><strong>Attention:</strong> Autoriser n'importe quel site à accéder à une API privée est une mauvaise idée.</p> +<p><strong>Attention :</strong> Autoriser n'importe quel site à accéder à une API privée est une mauvaise idée.</p> </div> <p>Pour autoriser n'importe quel site à faire des requêtes CORS <em>sans</em> utiliser le caractère générique <code>*</code> (par exemple, pour fournir des authentifiants), votre serveur doit lire la valeur de l'entête <code>Origin</code> de la requête et l'utiliser dans <code>Access-Control-Allow-Origin</code>, tout en ajoutant une entête <code>Vary: Origin</code> pour indiquer que certaines entêtes sont définies dynamiquement selon leur origine.</p> <p>L'instruction exacte pour définir les entêtes dépend de votre serveur Web. Par exemple, avec Apache, ajouter (dans la section <code><Directory></code>, <code><Location></code>, <code><Files></code>, ou <code><VirtualHost></code> appropriée) la ligne ci-dessous au fichier de configuration. Le fichier de configuration est en général un <code>.conf</code> (<code>httpd.conf</code> et <code>apache.conf</code> sont les noms les plus communs) ou un fichier nommé <code>.htaccess</code>.</p> -<pre class="notranslate">Header set Access-Control-Allow-Origin '<em>origin-list</em>'</pre> +<pre>Header set Access-Control-Allow-Origin '<em>origin-list</em>'</pre> <p>Avec Nginx, la commande pour créer l'en-tête est :</p> -<pre class="notranslate">add_header 'Access-Control-Allow-Origin' '<em>origin-list</em>'</pre> +<pre>add_header 'Access-Control-Allow-Origin' '<em>origin-list</em>'</pre> diff --git a/files/fr/web/http/cors/errors/index.html b/files/fr/web/http/cors/errors/index.html index 30bb82d87f..17fa5f8e9b 100644 --- a/files/fr/web/http/cors/errors/index.html +++ b/files/fr/web/http/cors/errors/index.html @@ -16,7 +16,7 @@ translation_of: Web/HTTP/CORS/Errors --- <div>{{HTTPSidebar}}</div> -<p><span class="seoSummary"><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing</a> ({{Glossary("CORS")}}) </span>est une norme qui permet à un serveur d'assouplir la <a href="/en-US/docs/Web/Security/Same-origin_policy">politique de même origine</a>.<span class="seoSummary"> </span></p> +<p><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing</a> ({{Glossary("CORS")}}) </span>est une norme qui permet à un serveur d'assouplir la <a href="/en-US/docs/Web/Security/Same-origin_policy">politique de même origine</a>.</p> <p>Celle-ci est utilisée pour autoriser explicitement certaines requêtes provenant d'autres sources tout en en rejetant d'autres. Par exemple, si un site offre un service intégrable, il peut être nécessaire d'assouplir certaines restrictions. La configuration d'une telle configuration CORS n'est pas nécessairement facile et peut présenter certains défis. Dans ces pages, nous examinerons quelques messages d'erreur CORS courants et comment les résoudre.</p> @@ -33,16 +33,16 @@ translation_of: Web/HTTP/CORS/Errors <li>Essayez de reproduir la requête qui échoue et vérifiez la <a href="/en-US/docs/Tools/Web_Console">console</a> pour trouver les messages de violation CORS, ce qui tournerait autours de:</li> </ol> -<p><img alt="Firefox console showing CORS error" src="https://mdn.mozillademos.org/files/16050/cors-error2.png"></p> +<p><img alt="Firefox console showing CORS error" src="cors-error2.png"></p> <p>Le text de l'erreur sera probablement similaire à:</p> -<pre class="notranslate">Cross<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">-Origin Request Blocked: The Same Origin Policy disallows +<pre>Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <em>https://some-url-here</em>. (<em>Reason: -additional information here</em>).</span></span></span></pre> +additional information here</em>).</pre> <div class="note"> -<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><strong>Note:</strong> Pour des raisons de sécurité, il <em>est impossible</em> d'analyser les causes de l'erreur CORS via JavaScript. Seule une indication de l'échec de la requête sera fournie. Il faut donc absolument regarder manuellement les messages d'erreur de la console pour débugger.</span></span></span></p> +<p><strong>Note :</strong> Pour des raisons de sécurité, il <em>est impossible</em> d'analyser les causes de l'erreur CORS via JavaScript. Seule une indication de l'échec de la requête sera fournie. Il faut donc absolument regarder manuellement les messages d'erreur de la console pour débugger.</p> </div> <h2 id="Messages_derreur_CORS">Messages d'erreur CORS</h2> diff --git a/files/fr/web/http/cors/index.html b/files/fr/web/http/cors/index.html index 6be35f1aaf..24d38600ac 100644 --- a/files/fr/web/http/cors/index.html +++ b/files/fr/web/http/cors/index.html @@ -18,7 +18,7 @@ translation_of: Web/HTTP/CORS <p>Pour des raisons de sécurité, les requêtes HTTP multi-origine émises depuis les scripts sont restreintes. Ainsi, {{domxref("XMLHttpRequest")}} et l'<a href="/en-US/docs/Web/API/Fetch_API">API Fetch</a> respectent la règle <a href="/en-US/docs/Web/Security/Same-origin_policy">d'origine unique</a>. Cela signifie qu'une application web qui utilise ces API peut uniquement émettre des requêtes vers la même origine que celle à partir de laquelle l'application a été chargée, sauf si des en-têtes CORS sont utilisés.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14295/CORS_principle.png"></p> +<p><img alt="" src="cors_principle.png"></p> <p>Le CORS permet de prendre en charge des requêtes multi-origines sécurisées et des transferts de données entre des navigateurs et des serveurs web. Les navigateurs récents utilisent le CORS dans une API contenante comme {{domxref("XMLHttpRequest")}} ou <code><a href="/fr/docs/Web/API/Fetch_API">Fetch</a></code> pour aider à réduire les risques de requêtes HTTP multi-origines.</p> @@ -55,9 +55,9 @@ translation_of: Web/HTTP/CORS <p>Les fragments de code JavaScript (ainsi que les instances serveurs qui gèrent ces requêtes) se trouvent sur <a class="external" href="http://arunranga.com/examples/access-control/">http://arunranga.com/examples/access-control/</a> et fonctionnent pour les navigateurs qui prennent en charge {{domxref("XMLHttpRequest")}} dans un contexte multi-site.</p> -<p>Un aperçu « côté serveur » des fonctionnalités CORS se trouve dans l'article <a class="internal" href="/fr/docs/Web/HTTP/Server-Side_Access_Control">Contrôle d'accès côté serveur</a>.</p> +<p>Un aperçu « côté serveur » des fonctionnalités CORS se trouve dans l'article <a href="/fr/docs/Web/HTTP/Server-Side_Access_Control">Contrôle d'accès côté serveur</a>.</p> -<h3 id="Requêtes_simples"><a id="simples" name="simples">Requêtes simples</a></h3> +<h3 id="Requêtes_simples">Requêtes simples</h3> <p>Certaines requêtes ne nécessitent pas de <a href="#preflight">requête CORS préliminaire</a>. Dans le reste de cet article, ce sont ce que nous appellerons des requêtes « simples » (bien que la spécification {{SpecName('Fetch')}} (qui définit le CORS) n'utilise pas ce terme). Une requête simple est une requête qui respecte les conditions suivantes :</p> @@ -88,13 +88,17 @@ translation_of: Web/HTTP/CORS <li>Aucun objet {{domxref("ReadableStream")}} n'est utilisé dans la requête.</li> </ul> -<div class="note"><strong>Note :</strong> Cela correspond aux classes de requêtes généralement produites par du contenu web. Aucune donnée de réponse n'est envoyée au client qui a lancé la requête sauf si le serveur envoie un en-tête approprié. Aussi, les sites qui empêchent les requêtes étrangères falsifiées ne craignent rien de nouveau.</div> +<div class="note"> + <p><strong>Note :</strong> Cela correspond aux classes de requêtes généralement produites par du contenu web. Aucune donnée de réponse n'est envoyée au client qui a lancé la requête sauf si le serveur envoie un en-tête approprié. Aussi, les sites qui empêchent les requêtes étrangères falsifiées ne craignent rien de nouveau.</p> +</div> -<div class="note"><strong>Note :</strong> WebKit Nightly et Safari Technology Preview ajoutent des restrictions supplémentaires pour les valeurs autorisées des en-têtes {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}} et {{HTTPHeader("Content-Language")}}. Si l'un de ces en-têtes a une valeur non-standard, WebKit/Safari considère que la requête ne correspond pas à une requête simple. Les valeurs considérées comme non-standard par WebKit/Safari ne sont pas documentées en dehors de ces bugs WebKit : <em><a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a></em>, <em><a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a></em> et <em><a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a></em>. Aucun autre navigateur n'implémente ces restrictions supplémentaires, car elles ne font pas partie de la spécification.</div> +<div class="note"> + <p><strong>Note :</strong> WebKit Nightly et Safari Technology Preview ajoutent des restrictions supplémentaires pour les valeurs autorisées des en-têtes {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}} et {{HTTPHeader("Content-Language")}}. Si l'un de ces en-têtes a une valeur non-standard, WebKit/Safari considère que la requête ne correspond pas à une requête simple. Les valeurs considérées comme non-standard par WebKit/Safari ne sont pas documentées en dehors de ces bugs WebKit : <em><a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a></em>, <em><a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a></em> et <em><a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a></em>. Aucun autre navigateur n'implémente ces restrictions supplémentaires, car elles ne font pas partie de la spécification.</p> +</div> -<p>Si, par exemple, on a un contenu web situé sous le domaine <code class="plain">http://toto.example</code> qui souhaite invoquer du contenu situé sous le domaine <code class="plain">http://truc.autre</code>, on pourrait utiliser du code JavaScript semblable à ce qui suit sur <code>toto.example</code> :</p> +<p>Si, par exemple, on a un contenu web situé sous le domaine <code>http://toto.example</code> qui souhaite invoquer du contenu situé sous le domaine <code>http://truc.autre</code>, on pourrait utiliser du code JavaScript semblable à ce qui suit sur <code>toto.example</code> :</p> -<pre class="brush: js" id="line1">var invocation = new XMLHttpRequest(); +<pre class="brush: js">var invocation = new XMLHttpRequest(); var url = 'http://truc.autre/resources/public-data/'; function callOtherDomain() { @@ -108,11 +112,11 @@ function callOtherDomain() { <p>Cela entraînera un échange simple entre le client et le serveur laissant aux en-têtes CORS le soin de gérer les privilèges d'accès :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14293/simple_req.png" style="height: 224px; width: 521px;"></p> +<p><img alt="" src="simple-req-updated.png"></p> <p>Voyons dans le détail ce que le navigateur envoie au serveur et quelle sera sa réponse :</p> -<pre class="brush: shell;highlight:[10,16]">GET /resources/public-data/ HTTP/1.1 +<pre>GET /resources/public-data/ HTTP/1.1 Host: truc.autre User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 @@ -136,15 +140,15 @@ Content-Type: application/xml [XML Data] </pre> -<p>Les lignes 1 à 10 correspondent aux en-têtes envoyés. L'en-tête qui nous intéresse particulièrement ici est {{HTTPHeader("Origin")}}, situé à la ligne 10 : on y voit que l'invocation provient du domaine <code class="plain">http://toto.example</code>.</p> +<p>Les lignes 1 à 10 correspondent aux en-têtes envoyés. L'en-tête qui nous intéresse particulièrement ici est {{HTTPHeader("Origin")}}, situé à la ligne 10 : on y voit que l'invocation provient du domaine <code>http://toto.example</code>.</p> -<p>Les lignes 13 à 22 détaillent la réponse HTTP du serveur situé sous le domaine <code class="plain">http://truc.autre</code>. Dans la réponse, le serveur renvoie un en-tête {{HTTPHeader("Access-Control-Allow-Origin")}} (visible à la ligne 16). On voit ici les en-têtes {{HTTPHeader("Origin")}} et {{HTTPHeader("Access-Control-Allow-Origin")}} pour un contrôle d'accès dans sa forme la plus simple. Ici, le serveur répond avec <code>Access-Control-Allow-Origin: *</code> ce qui signifie que la ressource peut être demandée par n'importe quel domaine. Si les propriétés de la ressource située sous <code class="plain">http://truc.autre</code> souhaitaient restreindre l'accès à la ressource à l'origine <code class="plain">http://toto.example</code>, ils auraient renvoyé :</p> +<p>Les lignes 13 à 22 détaillent la réponse HTTP du serveur situé sous le domaine <code>http://truc.autre</code>. Dans la réponse, le serveur renvoie un en-tête {{HTTPHeader("Access-Control-Allow-Origin")}} (visible à la ligne 16). On voit ici les en-têtes {{HTTPHeader("Origin")}} et {{HTTPHeader("Access-Control-Allow-Origin")}} pour un contrôle d'accès dans sa forme la plus simple. Ici, le serveur répond avec <code>Access-Control-Allow-Origin: *</code> ce qui signifie que la ressource peut être demandée par n'importe quel domaine. Si les propriétés de la ressource située sous <code>http://truc.autre</code> souhaitaient restreindre l'accès à la ressource à l'origine <code>http://toto.example</code>, ils auraient renvoyé :</p> -<p><code class="plain">Access-Control-Allow-Origin: http://toto.example</code></p> +<p><code>Access-Control-Allow-Origin: http://toto.example</code></p> -<p>On notera que, dans ce cas, aucun autre domaine que <code class="plain">http://toto.example</code> (tel qu'identifié par l'en-tête <code>Origin</code>) ne pourra accéder à la ressource. L'en-tête <code>Access-Control-Allow-Origin</code> devrait contenir la valeur qui a été envoyée dans l'en-tête <code>Origin</code> de la requête.</p> +<p>On notera que, dans ce cas, aucun autre domaine que <code>http://toto.example</code> (tel qu'identifié par l'en-tête <code>Origin</code>) ne pourra accéder à la ressource. L'en-tête <code>Access-Control-Allow-Origin</code> devrait contenir la valeur qui a été envoyée dans l'en-tête <code>Origin</code> de la requête.</p> -<h3 id="Requêtes_nécessitant_une_requête_préliminaire"><a id="preflight" name="preflight">Requêtes nécessitant une requête préliminaire</a></h3> +<h3 id="Requêtes_nécessitant_une_requête_préliminaire">Requêtes nécessitant une requête préliminaire</h3> <p>À la différence des <a href="#simples">requêtes simples</a>, les requêtes préliminaires envoient d'abord une requête HTTP avec la méthode {{HTTPMethod("OPTIONS")}} vers la ressource de l'autre domaine afin de déterminer quelle requête peut être envoyée de façon sécurisée. Les requêtes entre différents sites peuvent notamment utiliser ce mécanisme de vérification préliminaire lorsque des données utilisateurs sont impliquées.</p> @@ -185,11 +189,13 @@ Content-Type: application/xml <li><strong>Ou si</strong> un objet {{domxref("ReadableStream")}} est utilisé dans la requête.</li> </ul> -<div class="note"><strong>Note :</strong> WebKit Nightly et Safari Technology Preview ajoutent des restrictions supplémentaires pour les valeurs autorisées des en-têtes {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}} et {{HTTPHeader("Content-Language")}}. Si l'un de ces en-têtes a une valeur non-standard, WebKit/Safari considère que la requête ne correspond pas à une requête simple. Les valeurs considérées comme non-standard par WebKit/Safari ne sont pas documentées en dehors de ces bugs WebKit : <em><a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a></em>, <em><a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a></em> et <em><a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a></em>. Aucun autre navigateur n'implémente ces restrictions supplémentaires, car elles ne font pas partie de la spécification.</div> +<div class="note"> + <p><strong>Note :</strong> WebKit Nightly et Safari Technology Preview ajoutent des restrictions supplémentaires pour les valeurs autorisées des en-têtes {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}} et {{HTTPHeader("Content-Language")}}. Si l'un de ces en-têtes a une valeur non-standard, WebKit/Safari considère que la requête ne correspond pas à une requête simple. Les valeurs considérées comme non-standard par WebKit/Safari ne sont pas documentées en dehors de ces bugs WebKit : <em><a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a></em>, <em><a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a></em> et <em><a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a></em>. Aucun autre navigateur n'implémente ces restrictions supplémentaires, car elles ne font pas partie de la spécification.</p> +</div> <p>Voici un exemple d'une requête qui devra être précédée d'une requête préliminaire :</p> -<pre class="brush: js" id="line1">var invocation = new XMLHttpRequest(); +<pre class="brush: js">var invocation = new XMLHttpRequest(); var url = 'http://truc.autre/resources/post-here/'; var body = '<?xml version="1.0"?><personne><nom>Toto</nom></personne>'; @@ -209,7 +215,7 @@ function callOtherDomain(){ <p>Dans le fragment de code ci-avant, à la ligne 3, on crée un corps XML envoyé avec la requête <code>POST</code> ligne 8. Sur la ligne 9, on voit également un en-tête de requête HTTP non standard : <code>X-PINGOTHER: pingpong</code>. De tels en-têtes ne sont pas décrits par le protocole HTTP/1.1 mais peuvent être utilisés par les applications web. La requête utilisant un en-tête <code>Content-Type</code> qui vaut <code>application/xml</code> et un en-tête spécifique, il est nécessaire d'envoyer au préalable une requête préliminaire.</p> -<p><img alt="pre-flight CORS french" src="https://mdn.mozillademos.org/files/17065/preflight_correct.png" style="height: 553px; width: 521px;"></p> +<p><img alt="" src="preflight_correct.png"></p> <div class="note"> <p><strong>Note :</strong> Comme décrit après, la vraie requête POST n'inclut pas les en-têtes <code>Access-Control-Request-*</code> qui sont uniquement nécessaires pour la requête OPTIONS.</p> @@ -217,7 +223,7 @@ function callOtherDomain(){ <p>Voyons ce qui se passe entre le client et le serveur. Le premier échange est la requête/réponse préliminaire :</p> -<pre class="brush: none;highlight:[1,10,11,17-20]">OPTIONS /resources/post-here/ HTTP/1.1 +<pre>OPTIONS /resources/post-here/ HTTP/1.1 Host: truc.autre User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 @@ -247,7 +253,7 @@ Content-Type: text/plain <p>Une fois que la requête préliminaire est effectuée, la requête principale est envoyée :</p> -<pre class="brush: none;">POST /resources/post-here/ HTTP/1.1 +<pre>POST /resources/post-here/ HTTP/1.1 Host: truc.autre User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 @@ -282,7 +288,7 @@ Content-Type: text/plain <p>Entre les lignes 1 à 12 qui précèdent, on voit la requête préliminaire avec la méthode {{HTTPMethod("OPTIONS")}}. Le navigateur détermine qu'il est nécessaire d'envoyer cela à cause des paramètres de la requête fournie par le code JavaScript. De cette façon le serveur peut répondre si la requête principale est acceptable et avec quels paramètres. OPTIONS est une méthode HTTP/1.1 qui est utilisée afin de déterminer de plus amples informations à propos du serveur. La méthode OPTIONS est une méthode « sûre » (<em>safe</em>) et ne change aucune ressource. On notera, qu'avec la requête OPTIONS, deux autres en-têtes sont envoyés (cf. lignes 10 et 11) :</p> -<pre class="brush: none">Access-Control-Request-Method: POST +<pre>Access-Control-Request-Method: POST Access-Control-Request-Headers: X-PINGOTHER, Content-Type </pre> @@ -290,7 +296,7 @@ Access-Control-Request-Headers: X-PINGOTHER, Content-Type <p>Dans les lignes 14 à 26 qui suivent, on voit la réponse renvoyée par le serveur qui indique que la méthode de la requête (<code>POST</code>) ainsi que ses en-têtes (<code>X-PINGOTHER</code>) sont acceptables. Voici ce qu'on peut notamment lire entre les lignes 17 et 20 :</p> -<pre class="brush: none">Access-Control-Allow-Origin: http://toto.example +<pre>Access-Control-Allow-Origin: http://toto.example Access-Control-Allow-Methods: POST, GET Access-Control-Allow-Headers: X-PINGOTHER, Content-Type Access-Control-Max-Age: 86400</pre> @@ -331,13 +337,13 @@ Access-Control-Max-Age: 86400</pre> <p>Toutefois, si la requête déclenche une requête préliminaire suite à l'absence de l'en-tête {{HTTPHeader("Authorization")}}, on ne pourra pas utiliser cette méthode de contournement et il sera nécessaire d'avoir accès au serveur pour contourner le problème.</p> -<h3 id="Requêtes_avec_informations_dauthentification"><a id="credentials" name="credentials">Requêtes avec informations d'authentification</a></h3> +<h3 id="Requêtes_avec_informations_dauthentification">Requêtes avec informations d'authentification</h3> <p>Une des fonctionnalités intéressante mise en avant par le CORS (via {{domxref("XMLHttpRequest")}} ou <a href="/fr/docs/Web/API/Fetch_API">Fetch</a>) est la possibilité d'effectuer des requêtes authentifiées reconnaissant les <a href="/fr/docs/Web/HTTP/Cookies">cookies HTTP</a> et les informations d'authentification HTTP. Par défaut, lorsqu'on réalise des appels {{domxref("XMLHttpRequest")}} ou <a href="/fr/docs/Web/API/Fetch_API">Fetch</a> entre différents sites, les navigateurs n'enverront pas les informations d'authentification. Pour cela, il est nécessaire d'utiliser une option spécifique avec le constructeur {{domxref("XMLHttpRequest")}} ou {{domxref("Request")}} lorsqu'on l'appelle.</p> -<p>Dans cet exemple, le contenu chargé depuis <code class="plain">http://toto.example</code> effectue une requête GET simple vers une ressource située sous <code class="plain">http://truc.autre</code> qui définit des <em>cookies</em>. Voici un exemple de code JavaScript qui pourrait se trouver sur <code>toto.example</code> :</p> +<p>Dans cet exemple, le contenu chargé depuis <code>http://toto.example</code> effectue une requête GET simple vers une ressource située sous <code>http://truc.autre</code> qui définit des <em>cookies</em>. Voici un exemple de code JavaScript qui pourrait se trouver sur <code>toto.example</code> :</p> -<pre class="brush: js" id="line1">var invocation = new XMLHttpRequest(); +<pre class="brush: js">var invocation = new XMLHttpRequest(); var url = 'http://truc.autre/resources/credentialed-content/'; function callOtherDomain(){ @@ -351,11 +357,11 @@ function callOtherDomain(){ <p>À la ligne 7, on voit que l'option <code>withCredentials</code>, du constructeur {{domxref("XMLHttpRequest")}}, doit être activée pour que l'appel utilise les <em>cookies</em>. Par défaut, l'appel sera réalisé sans les <em>cookies</em>. Cette requête étant une simple requête <code>GET</code>, il n'est pas nécessaire d'avoir une requête préliminaire. Cependant, le navigateur rejettera tout réponse qui ne possède pas l'en-tête {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> et la réponse correspondante ne sera pas disponible pour le contenu web qui l'a demandée.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14291/cred-req.png" style="height: 223px; width: 521px;"></p> +<p><img alt="" src="cred-req-updated.png"></p> <p>Voici un exemple d'échange entre le client et le serveur :</p> -<pre class="brush: none">GET /resources/access-control-with-credentials/ HTTP/1.1 +<pre>GET /resources/access-control-with-credentials/ HTTP/1.1 Host: truc.autre User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 @@ -388,13 +394,13 @@ Content-Type: text/plain [text/plain payload] </pre> -<p>Bien que la ligne 11 contienne le <em>cookie</em> pour le contenu sous <code class="plain">http://truc.autre</code>, si <code>truc.autre</code> n'avait pas répondu avec {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> (cf. ligne 19), la réponse aurait été ignorée et n'aurait pas pu être consommée par le contenu web.</p> +<p>Bien que la ligne 11 contienne le <em>cookie</em> pour le contenu sous <code>http://truc.autre</code>, si <code>truc.autre</code> n'avait pas répondu avec {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> (cf. ligne 19), la réponse aurait été ignorée et n'aurait pas pu être consommée par le contenu web.</p> <h4 id="Requêtes_authentifiées_et_jokers_wildcards">Requêtes authentifiées et jokers (<em>wildcards</em>)</h4> <p>Lorsqu'il répond à une requête authentifiée, le serveur <strong>doit</strong> indiquer une origine via la valeur de l'en-tête <code>Access-Control-Allow-Origin</code>, il ne doit pas utiliser le joker "<code>*</code>".</p> -<p>Avec la requête précédente, on voit la présence d'un en-tête <code>Cookie</code> mais la requête échouerait si la valeur de l'en-tête de réponse <code>Access-Control-Allow-Origin</code> était "<code>*</code>". Ici, ce n'est pas le cas : <code>Access-Control-Allow-Origin</code> vaut "<code class="plain">http://toto.example</code>" et le contenu récupéré par la requête est alors envoyé au contenu web.</p> +<p>Avec la requête précédente, on voit la présence d'un en-tête <code>Cookie</code> mais la requête échouerait si la valeur de l'en-tête de réponse <code>Access-Control-Allow-Origin</code> était "<code>*</code>". Ici, ce n'est pas le cas : <code>Access-Control-Allow-Origin</code> vaut "<code>http://toto.example</code>" et le contenu récupéré par la requête est alors envoyé au contenu web.</p> <p>Dans cet exemple, on notera également que l'en-tête de réponse <code>Set-Cookie</code> définit un autre <em>cookie</em>. En cas d'échec, une exception (dépendant de l'API utilisée) sera levée.</p> @@ -410,14 +416,14 @@ Content-Type: text/plain <p>Une ressource de réponse peut avoir un en-tête {{HTTPHeader("Access-Control-Allow-Origin")}} avec la syntaxe suivante :</p> -<pre class="brush: none">Access-Control-Allow-Origin: <origin> | * +<pre>Access-Control-Allow-Origin: <origin> | * </pre> <p>Le paramètre <code>origin</code> définit un URI qui peut accéder à la ressource. Le navigateur doit respecter cette contrainte. Pour les requêtes qui n'impliquent pas d'informations d'authentification, le serveur pourra indiquer un joker ("<code>*</code>") qui permet à n'importe quelle origine d'accéder à la ressource.</p> <p>Si on souhaite, par exemple, autoriser <code>http://mozilla.org</code> à accéder à la ressource, on pourra répondre avec :</p> -<pre class="brush: none">Access-Control-Allow-Origin: http://mozilla.org</pre> +<pre>Access-Control-Allow-Origin: http://mozilla.org</pre> <p>Si le serveur indique une origine spécifique plutôt que "<code>*</code>", il pourra également inclure la valeur <code>Origin</code> dans l'en-tête de réponse {{HTTPHeader("Vary")}} pour indiquer au client que la réponse du serveur variera selon la valeur de l'en-tête de requête {{HTTPHeader("Origin")}}.</p> @@ -425,7 +431,7 @@ Content-Type: text/plain <p>L'en-tête {{HTTPHeader("Access-Control-Expose-Headers")}} fournit une liste blanche des en-têtes auxquels les navigateurs peuvent accéder. Ainsi :</p> -<pre class="brush: none">Access-Control-Expose-Headers: X-Mon-En-tete-Specifique, X-Un-Autre-En-tete +<pre>Access-Control-Expose-Headers: X-Mon-En-tete-Specifique, X-Un-Autre-En-tete </pre> <p>Cela permettra que les en-têtes <code>X-Mon-En-tete-Specifique</code> et <code>X-Un-Autre-En-tete</code> soient utilisés par le navigateur.</p> @@ -434,7 +440,7 @@ Content-Type: text/plain <p>L'en-tête {{HTTPHeader("Access-Control-Max-Age")}} indique la durée pendant laquelle le résultat de la requête préliminaire peut être mis en cache (voir les exemples ci-avant pour des requêtes impliquant des requêtes préliminaires).</p> -<pre class="brush: none">Access-Control-Max-Age: <delta-en-secondes> +<pre>Access-Control-Max-Age: <delta-en-secondes> </pre> <p>Le paramètre <code>delta-en-seconds</code> indique le nombre de secondes pendant lesquelles les résultats peuvent être mis en cache.</p> @@ -443,16 +449,16 @@ Content-Type: text/plain <p>L'en-tête {{HTTPHeader("Access-Control-Allow-Credentials")}} indique si la réponse à la requête doit être exposée lorsque l'option <code>credentials</code> vaut <code>true</code>. Lorsque cet en-tête est utilisé dans une réponse préliminaire, cela indique si la requête principale peut ou non être effectuée avec des informations d'authentification. On notera que les requêtes <code>GET</code> sont des requêtes simples et si une requête est effectuée, avec des informations d'authentification pour une ressource, et que cet en-tête n'est pas renvoyé, la réponse sera ignorée par le navigateur et sa charge ne pourra pas être consommée par le contenu web.</p> -<pre class="brush: none">Access-Control-Allow-Credentials: true +<pre>Access-Control-Allow-Credentials: true </pre> -<p><a class="internal" href="#credentials">Voir les scénarios ci-avant pour des exemples</a>.</p> +<p><a href="#credentials">Voir les scénarios ci-avant pour des exemples</a>.</p> <h3 id="Access-Control-Allow-Methods"><code>Access-Control-Allow-Methods</code></h3> <p>L'en-tête {{HTTPHeader("Access-Control-Allow-Methods")}} indique la ou les méthodes qui sont autorisées pour accéder à la ressoure. Cet en-tête est utilisé dans la réponse à la requête préliminaire (voir ci-avant <a href="#preflight">les conditions dans lesquelles une requête préliminaire est nécessaire</a>).</p> -<pre class="brush: none">Access-Control-Allow-Methods: <methode>[, <methode>]* +<pre>Access-Control-Allow-Methods: <methode>[, <methode>]* </pre> <p><a href="#preflight">Voir un exemple ci-avant pour l'utilisation de cet en-tête</a>.</p> @@ -461,7 +467,7 @@ Content-Type: text/plain <p>L'en-tête {{HTTPHeader("Access-Control-Allow-Headers")}} est utilisé dans une réponse à une requête préliminaire afin d'indiquer les en-têtes HTTP qui peuvent être utilisés lorsque la requête principale est envoyée.</p> -<pre class="brush: none">Access-Control-Allow-Headers: <nom-champ>[, <nom-champ>]* +<pre>Access-Control-Allow-Headers: <nom-champ>[, <nom-champ>]* </pre> <h2 id="En-têtes_de_requête_HTTP">En-têtes de requête HTTP</h2> @@ -472,12 +478,14 @@ Content-Type: text/plain <p>L'en-tête {{HTTPHeader("Origin")}} indique l'origine de la requête (principale ou préliminaire) pour l'accès multi-origine.</p> -<pre class="brush: none">Origin: <origine> +<pre>Origin: <origine> </pre> <p>L'origine est un URI qui indique le serveur à partir duquel la requête a été initiée. Elle n'inclut aucune information relative au chemin mais contient uniquement le nom du serveur.</p> -<div class="note"><strong>Note :</strong> <code>origine</code> peut être une chaîne vide (ce qui s'avère notamment utile lorsque la source est une URL de donnée).</div> +<div class="note"> + <p><strong>Note :</strong> <code>origine</code> peut être une chaîne vide (ce qui s'avère notamment utile lorsque la source est une URL de donnée).</p> +</div> <p>Pour chaque requête avec contrôle d'accès, l'en-tête {{HTTPHeader("Origin")}} sera <strong>toujours</strong> envoyé.</p> @@ -485,7 +493,7 @@ Content-Type: text/plain <p>L'en-tête {{HTTPHeader("Access-Control-Request-Method")}} est utilisé lorsqu'on émet une requête préliminaire afin de savoir quelle méthode HTTP pourra être utilisée avec la requête principale.</p> -<pre class="brush: none">Access-Control-Request-Method: <methode> +<pre>Access-Control-Request-Method: <methode> </pre> <p>Voir <a href="#preflight">ci-avant pour des exemples d'utilisation de cet en-tête</a>.</p> @@ -494,7 +502,7 @@ Content-Type: text/plain <p>L'en-tête {{HTTPHeader("Access-Control-Request-Headers")}} est utilisé lorsqu'on émet une requête préliminaire afin de communiquer au serveur les en-têtes HTTP qui seront utilisés avec la requête principale.</p> -<pre class="brush: none">Access-Control-Request-Headers: <nom-champ>[, <nom-champ>]* +<pre>Access-Control-Request-Headers: <nom-champ>[, <nom-champ>]* </pre> <p>Voir <a href="#preflight">ci-avant pour des exemples d'utilisation de cet en-tête</a>.</p> @@ -532,7 +540,7 @@ Content-Type: text/plain <ul> <li><a class="external" href="https://arunranga.com/examples/access-control/">Exemples de codes utilisant <code>XMLHttpRequest</code> et le CORS (en anglais)</a></li> <li><a href="https://github.com/jackblackevo/cors-jsonp-sample">Exemples de code côté client et côté serveur utilisant le CORS (en anglais)</a></li> - <li><a class="internal" href="/fr/docs/Web/HTTP/Server-Side_Access_Control">Le CORS vu côté serveur (PHP, etc.)</a></li> + <li><a href="/fr/docs/Web/HTTP/Server-Side_Access_Control">Le CORS vu côté serveur (PHP, etc.)</a></li> <li>{{domxref("XMLHttpRequest")}}</li> <li><a href="/fr/docs/Web/API/Fetch_API">L'API Fetch</a></li> <li><a href="https://www.html5rocks.com/en/tutorials/cors/">Utiliser le CORS - HTML5 Rocks (en anglais)</a></li> @@ -543,12 +551,4 @@ Content-Type: text/plain <li>Comment corriger <em>Access-Control-Allow-Origin header must not be the wildcard</em></li> </ul> </li> -</ul> - -<div id="mouseposition-extension-element-full-container" style="position: fixed; top: 0px; left: 0px; right: 0px; font-weight: 400;"> -<div id="mouseposition-extension-element-rect-display" style='display: none; position: absolute; background: rgba(255, 255, 255, 0.7); outline: black solid 1px; font-size: 12px; cursor: default; color: rgb(0, 0, 0); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; width: 0px; height: 0px;'> -<pre style="text-align: center; background-color: rgba(255, 255, 255, 0.7); color: rgb(0, 0, 0); min-height: 12px; transition: all 1s ease 0s;"></pre> -</div> - -<pre id="mouseposition-extension-element-coordinate-display" style='position: absolute; display: none; background: rgb(255, 255, 255); font-size: 12px; line-height: 14px; border-radius: 3px; border-width: 1px; border-color: rgb(34, 34, 34) black rgb(51, 51, 51); border-style: solid; padding: 3px; color: rgb(34, 34, 34); cursor: default; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;'></pre> -</div> +</ul>
\ No newline at end of file diff --git a/files/fr/web/http/csp/index.html b/files/fr/web/http/csp/index.html index 6a5c7dedd4..fa2f565dd8 100644 --- a/files/fr/web/http/csp/index.html +++ b/files/fr/web/http/csp/index.html @@ -10,7 +10,7 @@ translation_of: Web/HTTP/CSP --- <div>{{HTTPSidebar}}</div> -<p class="summary"><strong>Une <em>Content Security Policy ({{Glossary("CSP")}})</em> ou stratégie de sécurité du contenu</strong> permet d'améliorer la sécurité des sites web en permettant de détecter et réduire certains types d'attaques, dont les attaques {{Glossary("XSS")}} (<em>Cross Site Scripting</em>) et les injections de contenu. Ces attaques peuvent être utilisées dans divers buts, comme le vol de données, le défacement de site ou la diffusion de <em>malware</em>.</p> +<p><strong>Une <em>Content Security Policy ({{Glossary("CSP")}})</em> ou stratégie de sécurité du contenu</strong> permet d'améliorer la sécurité des sites web en permettant de détecter et réduire certains types d'attaques, dont les attaques {{Glossary("XSS")}} (<em>Cross Site Scripting</em>) et les injections de contenu. Ces attaques peuvent être utilisées dans divers buts, comme le vol de données, le défacement de site ou la diffusion de <em>malware</em>.</p> <p>CSP a été conçu pour être complètement rétro-compatible (à l'exception de la version 2 dans laquelle existent des incompatibilités décrites explicitement comme telles ; pour plus d'informations, se référer à <a href="https://www.w3.org/TR/CSP2">la documentation du w3c (en anglais)</a>). D'une part : les navigateurs qui ne prennent pas en charge le CSP fonctionnent parfaitement avec les serveurs qui l'implémentent et inversement. D'autre part, lorsque les sites ne fournissent pas les en-têtes correspondant, les navigateurs utilisent la règle de même origine (<em>same-origin policy</em>) pour les contenus.</p> diff --git a/files/fr/web/http/feature_policy/index.html b/files/fr/web/http/feature_policy/index.html index 7629bf0d21..1061068d8c 100644 --- a/files/fr/web/http/feature_policy/index.html +++ b/files/fr/web/http/feature_policy/index.html @@ -19,10 +19,10 @@ translation_of: Web/HTTP/Feature_Policy --- <div>{{HTTPSidebar}}</div> -<p class="summary"><span class="seoSummary">Feature Policy ("réglementation des fonctionnalités" en français) permet aux développeurs web d'activer, de modifier ou de désactiver spécifiquement le comportement de certaines fonctionnalités et API dans le navigateur. Elle est similaire à {{Glossary("CSP", "Content Security Policy")}} mais contrôle les fonctionnalités plus que la sécurité.</span></p> +<p>Feature Policy ("réglementation des fonctionnalités" en français) permet aux développeurs web d'activer, de modifier ou de désactiver spécifiquement le comportement de certaines fonctionnalités et API dans le navigateur. Elle est similaire à {{Glossary("CSP", "Content Security Policy")}} mais contrôle les fonctionnalités plus que la sécurité.</p> <div class="note"> -<p>L'en-tête <code>Feature-Policy</code> a maintenant été renommé <code>Permissions-Policy</code> dans la spécification, et cet article va possiblement être modifié en conséquence.</p> +<p><strong>Note :</strong> L'en-tête <code>Feature-Policy</code> a maintenant été renommé <code>Permissions-Policy</code> dans la spécification, et cet article va possiblement être modifié en conséquence.</p> </div> <h2 id="En_résumé">En résumé</h2> diff --git a/files/fr/web/http/headers/accept-charset/index.html b/files/fr/web/http/headers/accept-charset/index.html index b3dba30be4..e832f5b513 100644 --- a/files/fr/web/http/headers/accept-charset/index.html +++ b/files/fr/web/http/headers/accept-charset/index.html @@ -5,12 +5,12 @@ translation_of: Web/HTTP/Headers/Accept-Charset --- <div>{{HTTPSidebar}}</div> -<p><span class="tlid-translation translation"><span title="">L'en-tête HTTP de la requête</span></span><strong><code>Accept-Charset</code></strong> <span class="tlid-translation translation"><span title="">indique le jeu de caractères que le client est capable de comprendre</span></span>. <span class="tlid-translation translation"><span title="">À l'aide de la </span></span> <a href="/en-US/docs/Web/HTTP/Content_negotiation">content negotiation</a>, <span class="tlid-translation translation"><span title="">le serveur sélectionne l'une des propositions, l'utilise et informe le client de son choix dans l'en-tête de réponse {{HTTPHeader ("Content-Type")}}.</span> <span title="">Les navigateurs ne définissent généralement pas cet en-tête car la valeur par défaut de chaque type de contenu est généralement correcte et sa transmission permettrait une empreinte digitale plus facile.</span></span></p> +<p>L'en-tête HTTP de la requête<strong><code>Accept-Charset</code></strong> indique le jeu de caractères que le client est capable de comprendre. À l'aide de la <a href="/en-US/docs/Web/HTTP/Content_negotiation">content negotiation</a>, le serveur sélectionne l'une des propositions, l'utilise et informe le client de son choix dans l'en-tête de réponse {{HTTPHeader ("Content-Type")}}. Les navigateurs ne définissent généralement pas cet en-tête car la valeur par défaut de chaque type de contenu est généralement correcte et sa transmission permettrait une empreinte digitale plus facile.</p> -<p><span class="tlid-translation translation"><span title="">Si le serveur ne peut servir aucun jeu de caractères correspondant, il peut théoriquement renvoyer un code d'erreur {{HTTPStatus ("406")}} (non acceptable).</span> <span title="">Cependant, pour une meilleure expérience utilisateur, cela est rarement fait et le moyen le plus courant consiste à ignorer l'en-tête</span></span> <code>Accept-Charset</code> <span class="tlid-translation translation"><span title="">dans ce cas.</span></span></p> +<p>Si le serveur ne peut servir aucun jeu de caractères correspondant, il peut théoriquement renvoyer un code d'erreur {{HTTPStatus ("406")}} (non acceptable). Cependant, pour une meilleure expérience utilisateur, cela est rarement fait et le moyen le plus courant consiste à ignorer l'en-tête <code>Accept-Charset</code> dans ce cas.</p> <div class="note"> -<p><span class="tlid-translation translation"><span title="">Dans les premières versions de HTTP / 1.1, un jeu de caractères par défaut (ISO-8859-1) était défini.</span> <span title="">Ce n'est plus le cas et maintenant chaque type de contenu peut avoir sa propre valeur par défaut.</span></span></p> +<p><strong>Note :</strong> Dans les premières versions de HTTP / 1.1, un jeu de caractères par défaut (ISO-8859-1) était défini. Ce n'est plus le cas et maintenant chaque type de contenu peut avoir sa propre valeur par défaut.</p> </div> <table class="properties"> @@ -33,15 +33,15 @@ translation_of: Web/HTTP/Headers/Accept-Charset // Multiple types, weighted with the {{glossary("quality values", "quality value")}} syntax: Accept-Charset: utf-8, iso-8859-1;q=0.5</pre> -<h2 id="Les_directives"><span class="tlid-translation translation"><span title="">Les directives</span></span></h2> +<h2 id="Les_directives">Les directives</h2> <dl> <dt><code><charset></code></dt> - <dd><span class="tlid-translation translation"><span title="">Un jeu de caractères comme utf-8 ou iso-8859-15.</span></span></dd> + <dd>Un jeu de caractères comme utf-8 ou iso-8859-15.</dd> <dt><code>*</code></dt> - <dd><span class="tlid-translation translation"><span title="">Tout jeu de caractères non mentionné ailleurs dans l'en-tête;</span> <span title="">'*' utilisé comme un joker.</span></span></dd> + <dd>Tout jeu de caractères non mentionné ailleurs dans l'en-tête; '*' utilisé comme un joker.</dd> <dt><code>;q=</code> (q-factor weighting)</dt> - <dt><span class="tlid-translation translation"><span title="">Toute valeur est placée dans un ordre de préférence exprimé à l'aide d'une valeur de qualité relative appelée</span></span> <em>weight</em>.</dt> + <dd>Toute valeur est placée dans un ordre de préférence exprimé à l'aide d'une valeur de qualité relative appelée <em>weight</em>.</dd> </dl> <h2 id="Examples">Examples</h2> @@ -59,7 +59,7 @@ Accept-Charset: utf-8, iso-8859-1;q=0.5, *;q=0.1 <tbody> <tr> <th scope="col">Specification</th> - <th scope="col"><span class="tlid-translation translation"><span title="">Titre</span></span></th> + <th scope="col">Titre</th> </tr> <tr> <td>{{RFC("7231", "Accept-Charset", "5.3.3")}}</td> @@ -72,10 +72,10 @@ Accept-Charset: utf-8, iso-8859-1;q=0.5, *;q=0.1 <p>{{Compat("http.headers.Accept-Charset")}}</p> -<h2 id="Voir_également"><span class="tlid-translation translation"><span title="">Voir également</span></span></h2> +<h2 id="Voir_également">Voir également</h2> <ul> <li>HTTP <a href="/en-US/docs/Web/HTTP/Content_negotiation">content negotiation</a></li> - <li>Header <span class="tlid-translation translation"><span title="">avec le résultat de la négociation de contenu</span></span> : {{HTTPHeader("Content-Type")}}</li> - <li><span class="tlid-translation translation"><span title="">Autres </span></span>Header<span class="tlid-translation translation"><span title=""> similaires</span></span> : {{HTTPHeader("TE")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Language")}}, {{HTTPHeader("Accept")}}</li> + <li>Header avec le résultat de la négociation de contenu : {{HTTPHeader("Content-Type")}}</li> + <li>Autres Header similaires : {{HTTPHeader("TE")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Language")}}, {{HTTPHeader("Accept")}}</li> </ul> diff --git a/files/fr/web/http/headers/accept-encoding/index.html b/files/fr/web/http/headers/accept-encoding/index.html index f19e6316d0..42d6228260 100644 --- a/files/fr/web/http/headers/accept-encoding/index.html +++ b/files/fr/web/http/headers/accept-encoding/index.html @@ -18,14 +18,14 @@ translation_of: Web/HTTP/Headers/Accept-Encoding <p>Dès lors que l'usage d'<code>identity</code>, signifiant l'absence de compression, n'est pas explicitement interdite, que ce soit par <code>identity;q=0</code> ou <code>*;q=0</code> (sans l'usage d'une autre valeur pour <code>identity</code>), le serveur ne doit jamais renvoyer une erreur <a href="/fr/docs/Web/HTTP/Status/406"><code>406</code></a> <code>Not Acceptable.</code></p> -<div class="note"><strong>Notes :</strong> - -<ul> - <li> - <p>Un dépôt IANA garde à jour <a href="https://www.iana.org/assignments/http-parameters/http-parameters.xml#http-parameters-1">une liste complète des encodages de contenu</a>.</p> - </li> - <li>Deux autres encodages, <code>bzip</code> et <code>bzip2</code>, sont parfois utilisés, bien que non-standards. Ils implémentent l'algorithme utilisé par les deux programmes UNIX respectifs. À noter que le premier n'est plus maintenu suite à des problèmes de licence.</li> -</ul> +<div class="note"> + <p><strong>Note :</strong> + <ul> + <li>Un dépôt IANA garde à jour <a href="https://www.iana.org/assignments/http-parameters/http-parameters.xml#http-parameters-1">une liste complète des encodages de contenu</a>. + </li> + <li>Deux autres encodages, <code>bzip</code> et <code>bzip2</code>, sont parfois utilisés, bien que non-standards. Ils implémentent l'algorithme utilisé par les deux programmes UNIX respectifs. À noter que le premier n'est plus maintenu suite à des problèmes de licence.</li> + </ul> + </p> </div> <table class="properties"> diff --git a/files/fr/web/http/headers/accept/index.html b/files/fr/web/http/headers/accept/index.html index 438652ed62..2f27ede072 100644 --- a/files/fr/web/http/headers/accept/index.html +++ b/files/fr/web/http/headers/accept/index.html @@ -10,7 +10,7 @@ translation_of: Web/HTTP/Headers/Accept --- <div>{{HTTPSidebar}}</div> -<p><font face="Open Sans, arial, x-locale-body, sans-serif">Le paramètre d'entête de requête HTTP </font><code><strong>Accept</strong></code> indique quels sont les types de contenu, exprimés sous la forme de types MIME, que le client sera capable d'interpréter. Par le biais de la résolution de contenu -(<a href="/en-US/docs/Web/HTTP/Content_negotiation">content negotiation</a>), le serveur sélectionne ensuite une proposition parmi toutes, l'utilise et informe le client de son choix avec l'entête de réponse {{HTTPHeader("Content-Type")}}. Les navigateurs fixent des valeurs adéquates pour cet entête selon le contexte où la requête a été exécutée : selon que l'utilisateur souhaite récupérer une feuille de style css, ou qu'il souhaite récupérer une image, une vidéo ou un script, la valeur fixée pour la requête ne sera pas la même.</p> +<p>Le paramètre d'entête de requête HTTP <code><strong>Accept</strong></code> indique quels sont les types de contenu, exprimés sous la forme de types MIME, que le client sera capable d'interpréter. Par le biais de la résolution de contenu -(<a href="/en-US/docs/Web/HTTP/Content_negotiation">content negotiation</a>), le serveur sélectionne ensuite une proposition parmi toutes, l'utilise et informe le client de son choix avec l'entête de réponse {{HTTPHeader("Content-Type")}}. Les navigateurs fixent des valeurs adéquates pour cet entête selon le contexte où la requête a été exécutée : selon que l'utilisateur souhaite récupérer une feuille de style css, ou qu'il souhaite récupérer une image, une vidéo ou un script, la valeur fixée pour la requête ne sera pas la même.</p> <table class="properties"> <tbody> diff --git a/files/fr/web/http/headers/access-control-allow-origin/index.html b/files/fr/web/http/headers/access-control-allow-origin/index.html index d235454ac7..359319cc18 100644 --- a/files/fr/web/http/headers/access-control-allow-origin/index.html +++ b/files/fr/web/http/headers/access-control-allow-origin/index.html @@ -22,7 +22,7 @@ translation_of: Web/HTTP/Headers/Access-Control-Allow-Origin <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">Access-Control-Allow-Origin: * +<pre class="syntaxbox">Access-Control-Allow-Origin: * Access-Control-Allow-Origin: <origin> Access-Control-Allow-Origin: null </pre> @@ -40,17 +40,17 @@ Access-Control-Allow-Origin: null <p>Pour permettre à n'importe quelle ressource d'accéder à vos ressources, vous pouvez indiquer :</p> -<pre class="notranslate">Access-Control-Allow-Origin: *</pre> +<pre>Access-Control-Allow-Origin: *</pre> <p>Pour permettre <code>https://developer.mozilla.org</code> d'accéder à vos ressources, vous pouvez indiquer :</p> -<pre class="notranslate">Access-Control-Allow-Origin: https://developer.mozilla.org</pre> +<pre>Access-Control-Allow-Origin: https://developer.mozilla.org</pre> <h3 id="CORS_et_le_cache">CORS et le cache</h3> <p>Si le serveur spécifie un hôte d'origine plutôt que "*", il doit également inclure "<em>Origin</em>" dans l'en-tête de réponse "<em><a href="/fr/docs/Web/HTTP/Headers/Vary">Vary</a></em>" pour indiquer aux clients que les réponses du serveur seront différentes en fonction de la valeur de la demande d'origine entête.</p> -<pre class="notranslate">Access-Control-Allow-Origin: https://developer.mozilla.org +<pre>Access-Control-Allow-Origin: https://developer.mozilla.org Vary: Origin</pre> <h2 id="Caractéristiques">Caractéristiques</h2> diff --git a/files/fr/web/http/headers/authorization/index.html b/files/fr/web/http/headers/authorization/index.html index 7e597dc96e..065c4fc78a 100644 --- a/files/fr/web/http/headers/authorization/index.html +++ b/files/fr/web/http/headers/authorization/index.html @@ -33,20 +33,19 @@ translation_of: Web/HTTP/Headers/Authorization <dl> <dt><em><type></em></dt> - <dd><a href="/fr/docs/Web/HTTP/Authentication#Schéma_d'authentification">Le type d'authentification</a>. Le type <code><a href="/en-US/docs/Web/HTTP/Authentication#Basic_authentication_scheme">"Basic"</a></code> est souvent utilisé. Pour connaître les autres types : + <dd><p><a href="/fr/docs/Web/HTTP/Authentication#Schéma_d'authentification">Le type d'authentification</a>. Le type <code><a href="/en-US/docs/Web/HTTP/Authentication#Basic_authentication_scheme">"Basic"</a></code> est souvent utilisé. Pour connaître les autres types :</p> <ul> <li><a href="http://www.iana.org/assignments/http-authschemes/http-authschemes.xhtml">IANA registry of Authentication schemes</a></li> </ul> </dd> <dt><em><credentials></em></dt> - <dd>Si c'est le type d'authentification <code>"Basic"</code> qui est utilisé, les identifiants sont construits de la manière suivante : + <dd><p>Si c'est le type d'authentification <code>"Basic"</code> qui est utilisé, les identifiants sont construits de la manière suivante :</p> <ul> <li>L'identifiant de l'utilisateur et le mot de passe sont combinés avec deux-points : (<code>aladdin:sesameOuvreToi</code>).</li> <li>Cette chaîne de caractères est ensuite encodée en <a href="/fr/docs/Web/API/WindowBase64/Décoder_encoder_en_base64">base64</a> (<code>YWxhZGRpbjpzZXNhbWVPdXZyZVRvaQ==</code>).</li> </ul> - <div class="note"> - <p><strong>Note</strong>: L'encodage en Base64 n'est pas un chiffrement ou un hachage ! Cette méthode est aussi peu sûre que d'envoyer les identifiants en clair (l'encodage base64 est un encodage réversible). Il faudra privilégier HTTPS lorsqu'on emploie une authentification "basique".</p> + <p><strong>Note :</strong> L'encodage en Base64 n'est pas un chiffrement ou un hachage ! Cette méthode est aussi peu sûre que d'envoyer les identifiants en clair (l'encodage base64 est un encodage réversible). Il faudra privilégier HTTPS lorsqu'on emploie une authentification "basique".</p> </div> </dd> </dl> diff --git a/files/fr/web/http/headers/cache-control/index.html b/files/fr/web/http/headers/cache-control/index.html index 254df474ee..de82079b83 100644 --- a/files/fr/web/http/headers/cache-control/index.html +++ b/files/fr/web/http/headers/cache-control/index.html @@ -11,7 +11,7 @@ translation_of: Web/HTTP/Headers/Cache-Control --- <p>{{HTTPSidebar}}</p> -<p><span class="seoSummary">L'en-tête HTTP <strong><code>Cache-Control</code></strong> contient des directives (ou instructions) pour la <a href="/fr/docs/Web/HTTP/Cache">mise en cache</a> tant dans les requêtes que dans les réponses. Une directive donnée dans une requête ne signifie pas que la même directive doit se trouver dans la réponse.</span></p> +<p>L'en-tête HTTP <strong><code>Cache-Control</code></strong> contient des directives (ou instructions) pour la <a href="/fr/docs/Web/HTTP/Cache">mise en cache</a> tant dans les requêtes que dans les réponses. Une directive donnée dans une requête ne signifie pas que la même directive doit se trouver dans la réponse.</p> <table class="properties"> <tbody> @@ -104,15 +104,7 @@ Cache-Control: stale-if-error=<seconds> <dt><code>no-cache</code></dt> <dd>Indique de renvoyer systématiquement la requête au serveur et ne servir une éventuelle version en cache que dans le cas où le serveur le demande.</dd> <dt><code>no-store</code></dt> - <dd>La réponse <strong>ne</strong> peut être stockée dans<em> aucune</em> mémoire cache. Bien que d'autres directives puissent être définies, C'est la seule directive dont vous avez besoin pour empêcher le réponses en cache sur les navigateurs modernes. <code>max-age=0</code> <strong>est déjà implicite</strong>. <strong>La définition de la directive</strong> <code>must-revalidate</code> <strong>n'a pas de sens</strong> car pour passer la revalidation, vous devez stocker la réponse dans un cache, ce que n'empêche <code>no-store</code>.</dd> - <dd><strong>Ne pas copier-coller les spécifications Internet-Explorer</strong> <code>pre-check=0,post-check=0</code> Si vous le voyez en ligne car il est entièrement ignoré, ce que confirme le <a href="https://twitter.com/ericlaw/status/685201170260819968">tweet du développeur Edge</a>.</dd> - <dt>Désactive le cache par Cache-Control</dt> - <dd> - <pre class="example-good">no-store</pre> - </dd> - <dd> - <pre class="example-bad">no-cache,no-store,must-revalidate,pre-check=0,post-check=0</pre> - </dd> + <dd><p>La réponse <strong>ne</strong> peut être stockée dans<em> aucune</em> mémoire cache. Bien que d'autres directives puissent être définies, C'est la seule directive dont vous avez besoin pour empêcher le réponses en cache sur les navigateurs modernes. <code>max-age=0</code> <strong>est déjà implicite</strong>. <strong>La définition de la directive</strong> <code>must-revalidate</code> <strong>n'a pas de sens</strong> car pour passer la revalidation, vous devez stocker la réponse dans un cache, ce que n'empêche <code>no-store</code>.<strong>Ne pas copier-coller les spécifications Internet-Explorer</strong> <code>pre-check=0,post-check=0</code> Si vous le voyez en ligne car il est entièrement ignoré, ce que confirme le <a href="https://twitter.com/ericlaw/status/685201170260819968">tweet du développeur Edge</a>.</p></dd> </dl> <h3 id="Expiration">Expiration</h3> @@ -158,42 +150,27 @@ Cache-Control: stale-if-error=<seconds> <p>Pour désactiver la mise en cache, vous pouvez envoyer l'en-tête de réponse suivant. En outre, voir aussi les en-têtes <code>Expires</code> et <code>Pragma</code>.</p> -<dl> - <dd> - <pre class="example-good brush: http no-line-numbers">Cache-Control: no-store +<pre class="example-good">Cache-Control: no-store </pre> - </dd> - <dd> - <pre class="example-bad brush: http no-line-numbers">Cache-Control: private,no-cache,no-store,max-age=0,must-revalidate,pre-check=0,post-check=0 + +<pre class="example-bad">Cache-Control: private,no-cache,no-store,max-age=0,must-revalidate,pre-check=0,post-check=0 </pre> - </dd> -</dl> <h3 id="Mise_en_cache_dactifs_statiques">Mise en cache d'actifs statiques</h3> <p>Pour les fichiers de l'application qui ne seront pas modifiés, vous pouvez généralement ajouter une mise en cache agressive en envoyant l'en-tête de réponse ci-dessous. Cela inclut les fichiers statiques qui sont servis par l'application comme les images, les fichiers CSS et les fichiers JavaScript, par exemple. En outre, voir l'en-tête <code>Expires</code>.</p> -<dl> - <dd> - <pre class="brush: http no-line-numbers">Cache-Control: public, max-age=604800, immutable +<pre>Cache-Control: public, max-age=604800, immutable </pre> - </dd> -</dl> <h3 id="Nécessitant_une_revalidation">Nécessitant une revalidation</h3> -<p>Le fait de spécifier <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">no-cache</span></font> ou <code>max-age=0</code> indique que les clients peuvent mettre une ressource en cache et doivent la revalider à chaque fois avant de l'utiliser. Cela signifie que la requête HTTP se produit à chaque fois, mais qu'elle peut sauter le téléchargement du corps HTTP si le contenu est valide.</p> +<p>Le fait de spécifier no-cache ou <code>max-age=0</code> indique que les clients peuvent mettre une ressource en cache et doivent la revalider à chaque fois avant de l'utiliser. Cela signifie que la requête HTTP se produit à chaque fois, mais qu'elle peut sauter le téléchargement du corps HTTP si le contenu est valide.</p> -<dl> - <dd> - <pre class="brush: http no-line-numbers">Cache-Control: no-cache +<pre>Cache-Control: no-cache Cache-Control: no-cache, max-age=0 Cache-Control: no-cache, max-age=0, stale-while-revalidate=300 </pre> - </dd> -</dl> - - <h2 id="Spécifications">Spécifications</h2> @@ -208,17 +185,17 @@ Cache-Control: no-cache, max-age=0, stale-while-revalidate=300 <tbody> <tr> <td>{{RFC(8246, "HTTP Immutable Responses")}}</td> - <td><span class="spec-RFC">IETF RFC</span></td> + <td>IETF RFC</td> <td></td> </tr> <tr> <td>{{RFC(7234, "Hypertext Transfer Protocol (HTTP/1.1): Caching")}}</td> - <td><span class="spec-RFC">IETF RFC</span></td> + <td>IETF RFC</td> <td></td> </tr> <tr> <td>{{RFC(5861, "HTTP Cache-Control Extensions for Stale Content")}}</td> - <td><span class="spec-RFC">IETF RFC</span></td> + <td>IETF RFC</td> <td>Initial definition</td> </tr> </tbody> diff --git a/files/fr/web/http/headers/connection/index.html b/files/fr/web/http/headers/connection/index.html index 83183257bb..3ea2071137 100644 --- a/files/fr/web/http/headers/connection/index.html +++ b/files/fr/web/http/headers/connection/index.html @@ -12,7 +12,9 @@ translation_of: Web/HTTP/Headers/Connection <p>L'en-tête général <strong><code>Connection</code></strong> contrôle la façon dont la connexion reste ouverte ou non après que la transaction courante soit terminée. Si la valeur envoyée est <code>keep-alive</code>, la connexion est persistente et n'est pas fermée, permettant aux requêtes qui suivent et s'adressent au même serveur d'être envoyées.</p> -<div class="note"><strong>Note : </strong><a href="https://tools.ietf.org/html/rfc7540#section-8.1.2.2">Les champs d'en-tête spécifiques à la connexion (tels que <code>Connection</code>) ne doivent pas être utilisés avec HTTP/2.</a></div> +<div class="note"> + <p><strong>Note :</strong><a href="https://tools.ietf.org/html/rfc7540#section-8.1.2.2">Les champs d'en-tête spécifiques à la connexion (tels que <code>Connection</code>) ne doivent pas être utilisés avec HTTP/2.</a></p> +</div> <p>Except for the standard hop-by-hop headers ({{HTTPHeader("Keep-Alive")}}, {{HTTPHeader("Transfer-Encoding")}}, {{HTTPHeader("TE")}}, {{HTTPHeader("Connection")}}, {{HTTPHeader("Trailer")}}, {{HTTPHeader("Upgrade")}}, {{HTTPHeader("Proxy-Authorization")}} and {{HTTPHeader("Proxy-Authenticate")}}), any hop-by-hop headers used by the message must be listed in the <code>Connection</code> header, so that the first proxy knows it has to consume them and not forward them further. Standard hop-by-hop headers can be listed too (it is often the case of {{HTTPHeader("Keep-Alive")}}, but this is not mandatory).</p> diff --git a/files/fr/web/http/headers/content-disposition/index.html b/files/fr/web/http/headers/content-disposition/index.html index f0d79129f3..1dffadd807 100644 --- a/files/fr/web/http/headers/content-disposition/index.html +++ b/files/fr/web/http/headers/content-disposition/index.html @@ -13,7 +13,7 @@ translation_of: Web/HTTP/Headers/Content-Disposition <p>Dans un corps <code>multipart / form-data</code>, l'en-tête général HTTP Content-Disposition est un en-tête qui peut être utilisé sur la sous-partie d'un corps multipart pour donner des informations sur le champ auquel il s'applique. La sous-partie est délimitée par la limite <code>boundary</code> définie dans l'en-tête {{HTTPHeader ("Content-Type")}}. Utilisé sur le corps même, <code>Content-Disposition </code>n'a aucun effet.</p> -<p dir="ltr" id="tw-target-text">L'en-tête <code>Content-Disposition</code> est défini dans le contexte plus large des messages MIME pour le courrier électronique, mais seul un sous-ensemble des paramètres possibles s'applique aux formulaires HTTP et {{HTTPMethod ("POST")}}. Seules les données de forme de valeur, ainsi que le nom de la directive optionnelle et le nom de fichier, peuvent être utilisés dans le contexte HTTP.</p> +<p>L'en-tête <code>Content-Disposition</code> est défini dans le contexte plus large des messages MIME pour le courrier électronique, mais seul un sous-ensemble des paramètres possibles s'applique aux formulaires HTTP et {{HTTPMethod ("POST")}}. Seules les données de forme de valeur, ainsi que le nom de la directive optionnelle et le nom de fichier, peuvent être utilisés dans le contexte HTTP.</p> <table class="properties"> <tbody> @@ -41,40 +41,40 @@ translation_of: Web/HTTP/Headers/Content-Disposition <h3 id="En_tant_quentête_de_réponse_pour_le_corps_principal">En tant qu'entête de réponse pour le corps principal </h3> -<p dir="ltr" id="tw-target-text">Le premier paramètre dans le contexte HTTP est en ligne (valeur par défaut, indiquant qu'il peut être affiché à l'intérieur de la page Web ou en tant que page Web) ou pièce jointe (en indiquant qu'il devrait être téléchargé), la plupart des navigateurs présentant une boîte de dialogue "Enregistrer sous" Avec la valeur des paramètres du nom de<br> +<p>Le premier paramètre dans le contexte HTTP est en ligne (valeur par défaut, indiquant qu'il peut être affiché à l'intérieur de la page Web ou en tant que page Web) ou pièce jointe (en indiquant qu'il devrait être téléchargé), la plupart des navigateurs présentant une boîte de dialogue "Enregistrer sous" Avec la valeur des paramètres du nom de<br> fichier si présent.</p> -<pre class="syntaxbox notranslate">Content-Disposition: inline +<pre class="syntaxbox">Content-Disposition: inline Content-Disposition: attachment Content-Disposition: attachment; filename="filename.jpg"</pre> <h3 id="En_tant_quen-tête_pour_un_corps_à_plusieurs_parties">En tant qu'en-tête pour un corps à plusieurs parties </h3> -<p dir="ltr" id="tw-target-text">Le premier paramètre dans le contexte HTTP est toujours une donnée de forme. Les paramètres supplémentaires sont insensibles à la casse et ont des arguments, qui utilisent la syntaxe de chaîne cité après le signe '='. Les paramètres multiples sont<br> +<p>Le premier paramètre dans le contexte HTTP est toujours une donnée de forme. Les paramètres supplémentaires sont insensibles à la casse et ont des arguments, qui utilisent la syntaxe de chaîne cité après le signe '='. Les paramètres multiples sont<br> séparés par un point-virgule (';').</p> -<pre class="notranslate">Content-Disposition: form-data Content-Disposition: form-data; +<pre>Content-Disposition: form-data Content-Disposition: form-data; name="fieldName" Content-Disposition: form-data; name="fieldName"; filename="filename.jpg"</pre> -<h2 dir="ltr" id="Directives">Directives</h2> +<h2 id="Directives">Directives</h2> -<p dir="ltr"><code><name></code><br> +<p><code><name></code><br> Est suivie d'une chaîne contenant le nom du champ HTML dans la forme dont le contenu de cette sous-partie se réfère. Lorsqu'il s'agit de plusieurs fichiers dans le même champ (par exemple, l'attribut {{htmlattrxref("multiple", "input")}} d'un {{HTMLElement("input","<input type=file>")}} element), il peut y avoir plusieurs sous-parties portant le même nom.</p> -<p dir="ltr">Un <code>name</code> avec une valeur de <code>'_charset_'</code> indique que la partie n'est pas un champ HTML, mais le jeu de caractères par défaut à utiliser pour les pièces sans informations de charset explicites.</p> +<p>Un <code>name</code> avec une valeur de <code>'_charset_'</code> indique que la partie n'est pas un champ HTML, mais le jeu de caractères par défaut à utiliser pour les pièces sans informations de charset explicites.</p> -<p dir="ltr"><code><filename></code><br> +<p><code><filename></code><br> Est suivi d'une chaîne contenant le nom d'origine du fichier transmis. Le nom de fichier est toujours facultatif et ne doit pas être utilisé aveuglément par l'application: l'information du chemin doit être rayée et la conversion aux règles du système de fichiers du serveur doit être effectuée. Ce paramètre fournit principalement des informations indicatives. Lorsqu'il est utilisé en combinaison avec <code>Content-Disposition: attachement</code>, il est utilisé comme nom de fichier par défaut pour une éventuelle boîte de dialogue "Enregistrer sous" présentée à l'utilisateur.</p> -<p dir="ltr"><code><filename*></code><br> +<p><code><filename*></code><br> Les paramètres <code>filename</code> et <code>filename*</code> diffèrent uniquement en ce que <code>filename*</code> utilise l'encodage défini dans la RFC 5987. Lorsque <code>filename</code> et <code>filename*</code> sont présents dans une seule valeur de champ d'en-tête, <code>filename*</code> est préféré à <code>filename</code> lorsque les deux sont présents et compris.</p> <h2 id="Exemples">Exemples</h2> <p>Une réponse déclanchant le dialogue "Enregistrer sous":</p> -<pre class="brush: html notranslate">200 OK +<pre class="brush: html">200 OK Content-Type: text/html; charset=utf-8 Content-Disposition: attachment; filename="cool.html" Content-Length: 22 @@ -86,7 +86,7 @@ Content-Length: 22 <p>Un exemple de formulaire HTML, publié à l'aide du format <code>multipart / form-data</code> qui utilise l'en-tête <code>Content-Disposition</code>:</p> -<pre class="notranslate">POST /test.html HTTP/1.1 +<pre>POST /test.html HTTP/1.1 Host: example.org Content-Type: multipart/form-data;boundary="boundary" diff --git a/files/fr/web/http/headers/content-encoding/index.html b/files/fr/web/http/headers/content-encoding/index.html index 710f2b96d4..3d52ddfac5 100644 --- a/files/fr/web/http/headers/content-encoding/index.html +++ b/files/fr/web/http/headers/content-encoding/index.html @@ -28,7 +28,7 @@ translation_of: Web/HTTP/Headers/Content-Encoding <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">Content-Encoding: gzip +<pre class="syntaxbox">Content-Encoding: gzip Content-Encoding: compress Content-Encoding: deflate Content-Encoding: identity @@ -60,11 +60,11 @@ Content-Encoding: deflate, gzip <p>Côté client, on peut fournir la liste des mécanismes de compression pris en charge en envoyant l'en-tête {{HTTPHeader("Accept-Encoding")}} lors de la négociation de l'encodage.</p> -<pre class="notranslate">Accept-Encoding: gzip, deflate</pre> +<pre>Accept-Encoding: gzip, deflate</pre> <p>Le serveur répondra avec le schéma utilisé avec l'en-tête de réponse <code>Content-Encoding</code>.</p> -<pre class="notranslate">Content-Encoding: gzip</pre> +<pre>Content-Encoding: gzip</pre> <p>À noter que le serveur n'est pas obligé d'utiliser de méthode de compression. La compression dépend fortement des paramètres du serveur et des modules de serveur utilisés.</p> diff --git a/files/fr/web/http/headers/content-language/index.html b/files/fr/web/http/headers/content-language/index.html index a31053cc56..002c307908 100644 --- a/files/fr/web/http/headers/content-language/index.html +++ b/files/fr/web/http/headers/content-language/index.html @@ -40,7 +40,7 @@ translation_of: Web/HTTP/Headers/Content-Language <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">Content-Language: de-DE +<pre class="syntaxbox">Content-Language: de-DE Content-Language: en-US Content-Language: de-DE, en-CA </pre> @@ -53,7 +53,7 @@ Content-Language: de-DE, en-CA </dl> <div class="note"> -<p><strong>Note:</strong> Les tags de langues sont formellement définis dans la RFC 5646, qui repose sur la norme ISO 639 (très souvent la liste de codes ISO 639-1) pour les codes de langue à utiliser.</p> +<p><strong>Note :</strong> Les tags de langues sont formellement définis dans la RFC 5646, qui repose sur la norme ISO 639 (très souvent la liste de codes ISO 639-1) pour les codes de langue à utiliser.</p> </div> <h2 id="Exemples">Exemples</h2> @@ -62,18 +62,18 @@ Content-Language: de-DE, en-CA <p>L'attribut global <code><a href="/fr/docs/Web/HTML/Global_attributes/lang">lang</a></code> est utilisé sur des éléments HTML pour indiquer la langue d'une page HTML entière ou une partie de celle-ci.</p> -<pre class="brush: html notranslate"><html lang="de"></pre> +<pre class="brush: html"><html lang="de"></pre> <p><strong>N'utilisez pas</strong> le meta tag comme ceci pour déclarer la langue d'un document:</p> -<pre class="brush: html example-bad notranslate"><!-- /!\ C'est une mauvaise pratique --> +<pre class="brush: html example-bad"><!-- /!\ C'est une mauvaise pratique --> <meta http-equiv="content-language" content="de"></pre> <h3 id="Indiquer_un_public_cible_pour_une_ressource">Indiquer un public cible pour une ressource</h3> <p>L'en-tête <code>Content-Language</code> est utilisé pour spécifier le public destiné à la page, et peut indiquer si cela est plus qu'une seule langue.</p> -<pre class="notranslate">Content-Language: de, en</pre> +<pre>Content-Language: de, en</pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/http/headers/content-security-policy-report-only/index.html b/files/fr/web/http/headers/content-security-policy-report-only/index.html index 63116cb71a..7524dab5f1 100644 --- a/files/fr/web/http/headers/content-security-policy-report-only/index.html +++ b/files/fr/web/http/headers/content-security-policy-report-only/index.html @@ -36,7 +36,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy-Report-Only <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">Content-Security-Policy-Report-Only: <policy-directive>; <policy-directive> +<pre class="syntaxbox">Content-Security-Policy-Report-Only: <policy-directive>; <policy-directive> </pre> <h2 id="Directives">Directives</h2> @@ -49,11 +49,11 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy-Report-Only <p>Cet en-tête rapporte les violations qui seront constatées. Vous pouvez l'utiliser pour améliorer vos CSP. Vous pouvez observer comment votre site fonctionne en consultant les rapports ou <a href="https://secure.wphackedhelp.com/blog/wordpress-malware-redirect-hack-cleanup/">redirections malicieuses</a>, puis choisir les règles voulues pour bloquer le contenu avec l'en-tête {{HTTPHeader("Content-Security-Policy")}}.</p> -<pre class="notranslate">Content-Security-Policy-Report-Only: default-src https:; report-uri /csp-violation-report-endpoint/</pre> +<pre>Content-Security-Policy-Report-Only: default-src https:; report-uri /csp-violation-report-endpoint/</pre> <p>Si vous voulez toujours recevoir des rapports, mais aussi imposer des règles, utilisez l'en-tête {{HTTPHeader("Content-Security-Policy")}} avec la directive {{CSP("report-uri")}}.</p> -<pre class="notranslate">Content-Security-Policy: default-src https:; report-uri /csp-violation-report-endpoint/</pre> +<pre>Content-Security-Policy: default-src https:; report-uri /csp-violation-report-endpoint/</pre> <h2 id="Syntaxe_dun_rapport_de_violation">Syntaxe d'un rapport de violation</h2> @@ -85,12 +85,12 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy-Report-Only <div>Considérons une page à l'adresse <code>http://example.com/signup.html</code>. Elle utilise la règle CSP suivante, interdisant tout excepté les feuilles de styles chargées depuis <code>cdn.example.com</code>.</div> <div> -<pre class="notranslate">Content-Security-Policy-Report-Only: default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports</pre> +<pre>Content-Security-Policy-Report-Only: default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports</pre> </div> <div>La page HTML correspondant à l'adresse <code>signup.html</code> ressemble à :</div> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <title>Sign Up</title> @@ -105,7 +105,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy-Report-Only <div>Les feuilles de styles ne sont acceptées que si elles sont chargées depuis <code>cdn.example.com</code>, et pourtant le site tente d'en charger une depuis sa propre origine (<code>http://example.com</code>). Un navigateur capable d'imposer des règles CSP enverra le rapport de violation suivant sous la forme d'une requête POST à l'adresse <code>http://example.com/_/csp-reports</code> quand la page sera visitée :</div> -<pre class="brush: js notranslate">{ +<pre class="brush: js">{ "csp-report": { "document-uri": "http://example.com/signup.html", "referrer": "", diff --git a/files/fr/web/http/headers/content-security-policy/base-uri/index.html b/files/fr/web/http/headers/content-security-policy/base-uri/index.html index 018167226e..714cfb2f7b 100644 --- a/files/fr/web/http/headers/content-security-policy/base-uri/index.html +++ b/files/fr/web/http/headers/content-security-policy/base-uri/index.html @@ -37,7 +37,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/base-uri <p>Une ou plusieurs <em>sources</em> peuvent être autorisées pour cette directive :</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: base-uri <source>; +<pre class="syntaxbox">Content-Security-Policy: base-uri <source>; Content-Security-Policy: base-uri <source> <source>; </pre> @@ -51,23 +51,23 @@ Content-Security-Policy: base-uri <source> <source>; <h3 id="Configuration_par_balise_<meta>">Configuration par balise <meta></h3> -<pre class="brush: html notranslate"><meta http-equiv="Content-Security-Policy" content="base-uri 'self'"></pre> +<pre class="brush: html"><meta http-equiv="Content-Security-Policy" content="base-uri 'self'"></pre> <h3 id="Configuration_par_Apache">Configuration par Apache</h3> -<pre class="brush: bash notranslate"><IfModule mod_headers.c> +<pre class="brush: bash"><IfModule mod_headers.c> Header set Content-Security-Policy "base-uri 'self'"; </IfModule></pre> <h3 id="Configuration_par_Nginx">Configuration par Nginx</h3> -<pre class="brush: bash notranslate">add_header Content-Security-Policy "base-uri 'self';"</pre> +<pre class="brush: bash">add_header Content-Security-Policy "base-uri 'self';"</pre> <h3 id="Cas_de_violation">Cas de violation</h3> <p>À partir du moment où votre domaine n'est pas <code>example.com</code>, un élément {{HTMLElement("base")}} avec son attribut <code>href</code> défini à <code>https://example.com</code> résultera en une violation de CSP.</p> -<pre class="brush: html; example-bad notranslate"><meta http-equiv="Content-Security-Policy" content="base-uri 'self'"> +<pre class="brush: html; example-bad"><meta http-equiv="Content-Security-Policy" content="base-uri 'self'"> <base href="https://example.com/"> // Error: Refused to set the document's base URI to 'https://example.com/' diff --git a/files/fr/web/http/headers/content-security-policy/block-all-mixed-content/index.html b/files/fr/web/http/headers/content-security-policy/block-all-mixed-content/index.html index 1d5670728a..92897ebaf9 100644 --- a/files/fr/web/http/headers/content-security-policy/block-all-mixed-content/index.html +++ b/files/fr/web/http/headers/content-security-policy/block-all-mixed-content/index.html @@ -15,28 +15,28 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/block-all-mixed-content --- <div>{{HTTPSidebar}}</div> -<p><span class="seoSummary">La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>block-all-mixed-content</strong></code> bloque le chargement de ressources via HTTP lorsque la page utilise HTTPS.</span></p> +<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>block-all-mixed-content</strong></code> bloque le chargement de ressources via HTTP lorsque la page utilise HTTPS.</p> <p>Toutes les requêtes vers des <a href="/fr/docs/Sécurité/MixedContent">contenus mixtes</a> sont alors bloquées, y compris les ressources actives et passives. Cela s'applique aussi aux documents {{HTMLElement("iframe")}}, assurant que la page est complètement protégée contre les contenus mixtes.</p> -<div class="blockIndicator note"> -<p>Note : La directive {{CSP("upgrade-insecure-requests")}} est évaluée avant <code>block-all-mixed-content</code>. Si elle est définie, alors <code>block-all-mixed-content</code> n'est pas nécessaire, à moins que vous souhaitiez forcer HTTPS sur les anciens navigateurs qui ne le font pas après une redirection vers HTTP.</p> +<div class="note"> +<p><strong>Note :</strong> La directive {{CSP("upgrade-insecure-requests")}} est évaluée avant <code>block-all-mixed-content</code>. Si elle est définie, alors <code>block-all-mixed-content</code> n'est pas nécessaire, à moins que vous souhaitiez forcer HTTPS sur les anciens navigateurs qui ne le font pas après une redirection vers HTTP.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">Content-Security-Policy: block-all-mixed-content;</pre> +<pre class="syntaxbox">Content-Security-Policy: block-all-mixed-content;</pre> <h2 id="Exemples">Exemples</h2> -<pre class="notranslate">Content-Security-Policy: block-all-mixed-content; +<pre>Content-Security-Policy: block-all-mixed-content; <meta http-equiv="Content-Security-Policy" content="block-all-mixed-content"> </pre> <p>Pour interdire l'usage de HTTP de manière plus fine, vous pouvez aussi configurer individuellement chaque directive sur <code>https:</code>. Par exemple, pour interdire les images HTTP non sécurisées :</p> -<pre class="notranslate">Content-Security-Policy: img-src https:</pre> +<pre>Content-Security-Policy: img-src https:</pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/http/headers/content-security-policy/child-src/index.html b/files/fr/web/http/headers/content-security-policy/child-src/index.html index 09f25eb420..8cf2d1ab7a 100644 --- a/files/fr/web/http/headers/content-security-policy/child-src/index.html +++ b/files/fr/web/http/headers/content-security-policy/child-src/index.html @@ -39,7 +39,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/child-src <p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: child-src <source>; +<pre class="syntaxbox">Content-Security-Policy: child-src <source>; Content-Security-Policy: child-src <source> <source>; </pre> @@ -53,11 +53,11 @@ Content-Security-Policy: child-src <source> <source>; <p>Soit cet en-tête CSP :</p> -<pre class="brush: bash notranslate">Content-Security-Policy: child-src https://example.com/</pre> +<pre class="brush: bash">Content-Security-Policy: child-src https://example.com/</pre> <p>Cet {{HTMLElement("iframe")}} et ce worker seront bloqués et ne se chargeront pas :</p> -<pre class="brush: html notranslate"><iframe src="https://not-example.com"></iframe> +<pre class="brush: html"><iframe src="https://not-example.com"></iframe> <script> var blockedWorker = new Worker("data:application/javascript,..."); diff --git a/files/fr/web/http/headers/content-security-policy/connect-src/index.html b/files/fr/web/http/headers/content-security-policy/connect-src/index.html index 9914f70cf4..845f46f7b0 100644 --- a/files/fr/web/http/headers/content-security-policy/connect-src/index.html +++ b/files/fr/web/http/headers/content-security-policy/connect-src/index.html @@ -27,7 +27,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/connect-src </ul> <div class="note"> -<p><strong>Note:</strong> <code>connect-src 'self'</code> ne s'applique pas aux schémas de websocket pour tous les navigateurs. Pour plus d'informations, consulter : <a href="https://github.com/w3c/webappsec-csp/issues/7">https://github.com/w3c/webappsec-csp/issues/7</a>.</p> +<p><strong>Note :</strong> <code>connect-src 'self'</code> ne s'applique pas aux schémas de websocket pour tous les navigateurs. Pour plus d'informations, consulter : <a href="https://github.com/w3c/webappsec-csp/issues/7">https://github.com/w3c/webappsec-csp/issues/7</a>.</p> </div> <table class="properties"> @@ -51,7 +51,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/connect-src <p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: connect-src <source>; +<pre class="syntaxbox">Content-Security-Policy: connect-src <source>; Content-Security-Policy: connect-src <source> <source>; </pre> @@ -65,11 +65,11 @@ Content-Security-Policy: connect-src <source> <source>; <p>Soit cet en-tête CSP :</p> -<pre class="brush: bash notranslate">Content-Security-Policy: connect-src https://example.com/</pre> +<pre class="brush: bash">Content-Security-Policy: connect-src https://example.com/</pre> <p>Les connexions suivantes seront bloquées et ne se chargeront pas :</p> -<pre class="brush: html notranslate"><a ping="https://not-example.com"> +<pre class="brush: html"><a ping="https://not-example.com"> <script> var xhr = new XMLHttpRequest(); diff --git a/files/fr/web/http/headers/content-security-policy/default-src/index.html b/files/fr/web/http/headers/content-security-policy/default-src/index.html index 4111dc6de1..9f2d9d6cb8 100644 --- a/files/fr/web/http/headers/content-security-policy/default-src/index.html +++ b/files/fr/web/http/headers/content-security-policy/default-src/index.html @@ -16,7 +16,9 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/default-src --- <div>{{HTTPSidebar}}</div> -<p><span class="seoSummary">La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <strong><code>default-src</code></strong> sert de valeur par défaut pour les autres directives CSP {{Glossary("fetch directive", "fetch directives")}}.</span> Pour chacune des directives suivantes, l'agent utilisateur consultera la directive <code>default-src</code> et utilisera sa valeur pour la directive demandée si celle-ci est absente :</p> +<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <strong><code>default-src</code></strong> sert de valeur par défaut pour les autres directives CSP {{Glossary("fetch directive", "fetch directives")}}.</p> + +<p>Pour chacune des directives suivantes, l'agent utilisateur consultera la directive <code>default-src</code> et utilisera sa valeur pour la directive demandée si celle-ci est absente :</p> <ul> <li>{{CSP("child-src")}}</li> @@ -54,13 +56,12 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/default-src <p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: default-src <source>; +<pre class="syntaxbox">Content-Security-Policy: default-src <source>; Content-Security-Policy: default-src <source> <source>; </pre> <h3 id="Sources">Sources</h3> -<div id="common_sources"> <p>La <source> peut être une des suivantes :</p> <dl> @@ -87,7 +88,7 @@ Content-Security-Policy: default-src <source> <source>; <dd>Cette valeur fait référence au domaine dont est originaire le document protégé, y compris le protocole et le numéro de port. Vous devez mettre cette valeur entre guillemets. Certains navigateurs excluent spécifiquement les valeurs <code>blob</code> et <code>filesystem</code> des directives de source. Les sites nécessitant une permission pour ces types de contenu peuvent les spécifier en utilisant l'attribut Data.</dd> <dt><code>'unsafe-eval'</code></dt> <dd>Permet l'usage de la fonction <code>eval()</code> et de méthodes similaires pour créer du code à partir de chaines de caractères. Vous devez mettre cette valeur entre guillemets.</dd> - <dt id="unsafe-hashes"><code>'unsafe-hashes'</code></dt> + <dt><code>'unsafe-hashes'</code></dt> <dd>Permet l'usage de certains <a href="/en-US/docs/Web/Guide/Events/Event_handlers">écouteurs d'évènements</a> par attributs. Si vous n'avez besoin que d'écouteurs d'évènements par attributs et non d'éléments {{HTMLElement("script")}} embarqués ou d'URL <code>javascript:</code>, cette valeur est plus sécurisée que <code>unsafe-inline</code>.</dd> <dt><code>'unsafe-inline'</code></dt> <dd>Permet l'usage de ressources embarquées, tels que des éléments {{HTMLElement("script")}} (sans <code>src</code>), d'URL <code>javascript:</code>, de gestionnaire d'évènement par attributs (<code>on<eventName></code>), et d'éléments {{HTMLElement("style")}}. Vous devez mettre cette valeur entre guillemets.</dd> @@ -97,22 +98,12 @@ Content-Security-Policy: default-src <source> <source>; <dd>Une liste de permissions pour des scripts embarqués spécifiques en utilisant un nonce (<em>number used once</em>, nombre à usage unique) cryptographique. Le serveur doit générer un nonce à chaque fois qu'il transmet une réponse. Il est extrèmement important de fournir des nonces non prédictibles, puisque le contraire permettrait aisément de contourner la stratégie de sécurité. Voir <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#Unsafe_inline_script">inline script non fiables</a> pour avoir un exemple. Spécifier un nonce implique que les navigateurs modernes ignoreront la valeur <code>'unsafe-inline'</code>, qui peut toutefois être laissée pour les anciens navigateurs ne supportant pas les nonces.</dd> <dt>'<hash-algorithm>-<base64-value>'</dt> <dd>Un hash sha256, sha384 ou sha512 d'un <code><script></code> ou d'un <code><style></code>. Cette source est composée de deux parties séparées par un tiret : le nom de l'algorithme de chiffrage utilisé pour générer le hash à gauche et le hash encodé en base 64 à droite. Lors de la génération du hash, il ne faut pas inclure les balises <code><script></code> or <code><style></code> et tenir compte de la casse et des caractères blancs (espaces, retours à la ligne, etc.). Voir <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#Unsafe_inline_script">inline script non fiables</a> pour en avoir un exemple. En CSP 2.0, cette valeur ne s'applique qu'aux scripts embarqués. CSP 3.0 le permet aussi dans le cas de scripts externes.</dd> -</dl> -</div> - -<div id="strict-dynamic"> -<dl> <dt>'strict-dynamic'</dt> <dd>La valeur <code>strict-dynamic</code> spécifie que la confiance explicitement donnée à un script de la page, par le biais d'un nonce ou d'un hash, doit être propagée à tous les scripts chargés par celui-ci. En conséquence, toute les valeurs telles que <code>'self'</code> ou <code>'unsafe-inline'</code> et listes de permissions sont ignorées. Voir <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#strict-dynamic">script-src</a> pour en avoir un exemple.</dd> -</dl> -</div> - -<div id="report-sample"> -<dl> <dt>'report-sample'</dt> <dd>Requiert qu'un échantillon du code violant la directive soit inclus dans le rapport envoyé.</dd> </dl> -</div> + <h2 id="Exemples">Exemples</h2> @@ -120,11 +111,11 @@ Content-Security-Policy: default-src <source> <source>; <p>S'il y a d'autres directives spécifiées, <code>default-src</code> ne les affecte pas. Soit l'en-tête suivant :</p> -<pre class="brush: bash notranslate">Content-Security-Policy: default-src 'self'; script-src https://example.com</pre> +<pre class="brush: bash">Content-Security-Policy: default-src 'self'; script-src https://example.com</pre> <p>Est identique à :</p> -<pre class="brush: bash notranslate">Content-Security-Policy: connect-src 'self'; +<pre class="brush: bash">Content-Security-Policy: connect-src 'self'; font-src 'self'; frame-src 'self'; img-src 'self'; diff --git a/files/fr/web/http/headers/content-security-policy/font-src/index.html b/files/fr/web/http/headers/content-security-policy/font-src/index.html index 9e50fb7307..d5f2317624 100644 --- a/files/fr/web/http/headers/content-security-policy/font-src/index.html +++ b/files/fr/web/http/headers/content-security-policy/font-src/index.html @@ -38,7 +38,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/font-src <p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: font-src <source>; +<pre class="syntaxbox">Content-Security-Policy: font-src <source>; Content-Security-Policy: font-src <source> <source>; </pre> @@ -52,11 +52,11 @@ Content-Security-Policy: font-src <source> <source>; <p>Soit cet en-tête CSP :</p> -<pre class="brush: bash notranslate">Content-Security-Policy: font-src https://example.com/</pre> +<pre class="brush: bash">Content-Security-Policy: font-src https://example.com/</pre> <p>Cette définition de police sera bloquée et ne se chargera pas :</p> -<pre class="brush: html notranslate"><style> +<pre class="brush: html"><style> @font-face { font-family: "MyFont"; src: url("https://not-example.com/font"); diff --git a/files/fr/web/http/headers/content-security-policy/form-action/index.html b/files/fr/web/http/headers/content-security-policy/form-action/index.html index cd09bd3cbc..fee4d1839f 100644 --- a/files/fr/web/http/headers/content-security-policy/form-action/index.html +++ b/files/fr/web/http/headers/content-security-policy/form-action/index.html @@ -17,7 +17,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/form-action <p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>form</strong></code><strong><code>-action</code></strong> restreint les URL pouvant être utilisées comme cibles de soumissions de formulaires depuis un contexte donné.</p> <div class="warning"> -<p>La question de savoir si <code>form-action</code> doit bloquer les redirections après une soumission de formulaire est encore <a href="https://github.com/w3c/webappsec-csp/issues/8">débattue</a> et les implantations des navigateurs sur cet aspect sont incohérentes (par exemple Firefox 57 ne les bloque pas, contrairement à Chrome 63).</p> +<p><strong>Attention :</strong> La question de savoir si <code>form-action</code> doit bloquer les redirections après une soumission de formulaire est encore <a href="https://github.com/w3c/webappsec-csp/issues/8">débattue</a> et les implantations des navigateurs sur cet aspect sont incohérentes (par exemple Firefox 57 ne les bloque pas, contrairement à Chrome 63).</p> </div> <table class="properties"> @@ -41,7 +41,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/form-action <p>Une ou plusieurs sources peuvent être utilisées pour cette directive :</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: form-action <source>; +<pre class="syntaxbox">Content-Security-Policy: form-action <source>; Content-Security-Policy: form-action <source> <source>; </pre> @@ -53,23 +53,23 @@ Content-Security-Policy: form-action <source> <source>; <h3 id="Configuration_par_balise_<meta>">Configuration par balise <meta></h3> -<pre class="brush: html notranslate"><meta http-equiv="Content-Security-Policy" content="form-action 'none'"></pre> +<pre class="brush: html"><meta http-equiv="Content-Security-Policy" content="form-action 'none'"></pre> <h3 id="Configuration_par_Apache">Configuration par Apache</h3> -<pre class="brush: bash notranslate"><IfModule mod_headers.c> +<pre class="brush: bash"><IfModule mod_headers.c> Header set Content-Security-Policy "form-action 'none';" </IfModule></pre> <h3 id="Configuration_par_Nginx">Configuration par Nginx</h3> -<pre class="brush: bash notranslate">add_header Content-Security-Policy "form-action 'none';"</pre> +<pre class="brush: bash">add_header Content-Security-Policy "form-action 'none';"</pre> <h3 id="Cas_de_violation">Cas de violation</h3> <p>Utiliser un élément {{HTMLElement("form")}} avec un attribut <code>action</code> défini à un script embarqué JavaScript résultera en une violation de CSP :</p> -<pre class="brush: html; example-bad notranslate"><meta http-equiv="Content-Security-Policy" content="form-action 'none'"> +<pre class="brush: html; example-bad"><meta http-equiv="Content-Security-Policy" content="form-action 'none'"> <form action="javascript:alert('Foo')" id="form1" method="post"> <input type="text" name="fieldName" value="fieldValue"> diff --git a/files/fr/web/http/headers/content-security-policy/frame-ancestors/index.html b/files/fr/web/http/headers/content-security-policy/frame-ancestors/index.html index c512933db4..756e247616 100644 --- a/files/fr/web/http/headers/content-security-policy/frame-ancestors/index.html +++ b/files/fr/web/http/headers/content-security-policy/frame-ancestors/index.html @@ -43,7 +43,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/frame-ancestors <p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: frame-ancestors <source>; +<pre class="syntaxbox">Content-Security-Policy: frame-ancestors <source>; Content-Security-Policy: frame-ancestors <source> <source>; </pre> @@ -52,7 +52,7 @@ Content-Security-Policy: frame-ancestors <source> <source>; <p>La <source> peut être une des suivantes :</p> <div class="note"> -<p>The <code>frame-ancestors</code> directive’s syntax is similar to a source list of other directives (e.g. {{CSP("default-src")}}), but doesn't allow <code>'unsafe-eval'</code> or <code>'unsafe-inline'</code> for example. It will also not fall back to a <code>default-src</code> setting. Only the sources listed below are allowed:</p> +<p><strong>Note :</strong> The <code>frame-ancestors</code> directive’s syntax is similar to a source list of other directives (e.g. {{CSP("default-src")}}), but doesn't allow <code>'unsafe-eval'</code> or <code>'unsafe-inline'</code> for example. It will also not fall back to a <code>default-src</code> setting. Only the sources listed below are allowed:</p> </div> <dl> @@ -65,8 +65,8 @@ Content-Security-Policy: frame-ancestors <source> <source>; <li><code>https://store.example.com</code>: correspondra à toutes les tentatives d'accès à store.example.com via le protocole <code>https:</code>.</li> </ul> - <div class="blockIndicator warning"> - <p>Si aucun schéma d'URL n'est spécifié comme <code>host-source</code> et que l'{{HTMLElement("iframe")}} est chargée via une URL <code>https:</code>, la page chargeant l'iframe doit aussi être chargée en <code>https:</code>, selon la spécification du W3C sur <a href="https://w3c.github.io/webappsec-csp/2/#match-source-expression">les correspondances de valeurs de sources</a>.</p> + <div class="warning"> + <p><strong>Attention :</strong> Si aucun schéma d'URL n'est spécifié comme <code>host-source</code> et que l'{{HTMLElement("iframe")}} est chargée via une URL <code>https:</code>, la page chargeant l'iframe doit aussi être chargée en <code>https:</code>, selon la spécification du W3C sur <a href="https://w3c.github.io/webappsec-csp/2/#match-source-expression">les correspondances de valeurs de sources</a>.</p> </div> </dd> <dt><scheme-source></dt> @@ -86,7 +86,7 @@ Content-Security-Policy: frame-ancestors <source> <source>; <h2 id="Exemples">Exemples</h2> -<pre class="brush: bash notranslate">Content-Security-Policy: frame-ancestors 'none'; +<pre class="brush: bash">Content-Security-Policy: frame-ancestors 'none'; Content-Security-Policy: frame-ancestors 'self' https://www.example.org;</pre> diff --git a/files/fr/web/http/headers/content-security-policy/frame-src/index.html b/files/fr/web/http/headers/content-security-policy/frame-src/index.html index 34aa799481..e5d7566d81 100644 --- a/files/fr/web/http/headers/content-security-policy/frame-src/index.html +++ b/files/fr/web/http/headers/content-security-policy/frame-src/index.html @@ -39,7 +39,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/frame-src <p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: frame-src <source>; +<pre class="syntaxbox">Content-Security-Policy: frame-src <source>; Content-Security-Policy: frame-src <source> <source>; </pre> @@ -53,11 +53,11 @@ Content-Security-Policy: frame-src <source> <source>; <p>Soit cet en-tête CSP :</p> -<pre class="brush: bash notranslate">Content-Security-Policy: frame-src https://example.com/</pre> +<pre class="brush: bash">Content-Security-Policy: frame-src https://example.com/</pre> <p>Cet élément {{HTMLElement("iframe")}} est bloqué et ne se chargera pas :</p> -<pre class="brush: html notranslate"><iframe src="https://not-example.com/"></iframe></pre> +<pre class="brush: html"><iframe src="https://not-example.com/"></iframe></pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/http/headers/content-security-policy/img-src/index.html b/files/fr/web/http/headers/content-security-policy/img-src/index.html index d398bf7930..cbaf0a5798 100644 --- a/files/fr/web/http/headers/content-security-policy/img-src/index.html +++ b/files/fr/web/http/headers/content-security-policy/img-src/index.html @@ -16,7 +16,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/img-src --- <div>{{HTTPSidebar}}</div> -<p><span class="seoSummary">La directive HTTP {{HTTPHeader("Content-Security-Policy")}} <code><strong>img-src</strong></code> sépcifie les sources valides d'images et de favicons.</span></p> +<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} <code><strong>img-src</strong></code> sépcifie les sources valides d'images et de favicons.</p> <table class="properties"> <tbody> @@ -39,7 +39,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/img-src <p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: img-src <source>; +<pre class="syntaxbox">Content-Security-Policy: img-src <source>; Content-Security-Policy: img-src <source> <source>; </pre> @@ -53,11 +53,11 @@ Content-Security-Policy: img-src <source> <source>; <p>Soit cet en-tête CSP :</p> -<pre class="brush: bash notranslate">Content-Security-Policy: img-src https://example.com/</pre> +<pre class="brush: bash">Content-Security-Policy: img-src https://example.com/</pre> <p>Cet élément {{HTMLElement("img")}} est bloqué et ne se chargera pas :</p> -<pre class="brush: html notranslate"><img src="https://not-example.com/foo.jpg" alt="example picture"></pre> +<pre class="brush: html"><img src="https://not-example.com/foo.jpg" alt="example picture"></pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/http/headers/content-security-policy/index.html b/files/fr/web/http/headers/content-security-policy/index.html index 4ffcff7b78..2cd4912372 100644 --- a/files/fr/web/http/headers/content-security-policy/index.html +++ b/files/fr/web/http/headers/content-security-policy/index.html @@ -30,7 +30,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">Content-Security-Policy: <policy-directive>; <policy-directive> +<pre class="syntaxbox">Content-Security-Policy: <policy-directive>; <policy-directive> </pre> <h2 id="Directives">Directives</h2> @@ -44,7 +44,9 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy <dd>Définit les sources valides pour les <a href="/fr/docs/Web/API/Web_Workers_API">web workers</a> et les éléments qui représentent des contextes de navigation imbriqués tels que {{HTMLElement("frame")}} et {{HTMLElement("iframe")}}.</dd> </dl> -<div class="blockIndicator warning">Plutôt que la directive <strong><code>child-src</code></strong>, si vous souhaitez réguler les contextes de navigation imbriqués et les workers séparément, vous pouvez utiliser respectivement les directives {{CSP("frame-src")}} et {{CSP("worker-src")}}.</div> +<div class="warning"> + <p><strong>Attention :</strong>Plutôt que la directive <strong><code>child-src</code></strong>, si vous souhaitez réguler les contextes de navigation imbriqués et les workers séparément, vous pouvez utiliser respectivement les directives {{CSP("frame-src")}} et {{CSP("worker-src")}}.</p> +</div> <dl> <dt>{{CSP("connect-src")}}</dt> @@ -65,8 +67,8 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy <dd>Définit les sources valides pour les ressources des éléments {{HTMLElement("object")}}, {{HTMLElement("embed")}} et {{HTMLElement("applet")}}.</dd> </dl> -<div class="blockIndicator note"> -<p>Les éléments contrôlés pa ar <code>object-src</code> sont considérés peut-être par coïcidence comme des éléments HTML du passé et ne recevront de nouvelles fonctionnalités normalisées (comme les attributs de sécurité <code>sandbox</code> et <code>allow</code> pour <code><iframe></code>). De ce fait, il est <strong>recommandé</strong> de restreindre cette directive, c'est-à-dire la définir explicitement à <code>object-src 'none'</code> dans la mesure du possible.</p> +<div class="note"> +<p><strong>Note :</strong> Les éléments contrôlés pa ar <code>object-src</code> sont considérés peut-être par coïcidence comme des éléments HTML du passé et ne recevront de nouvelles fonctionnalités normalisées (comme les attributs de sécurité <code>sandbox</code> et <code>allow</code> pour <code><iframe></code>). De ce fait, il est <strong>recommandé</strong> de restreindre cette directive, c'est-à-dire la définir explicitement à <code>object-src 'none'</code> dans la mesure du possible.</p> </div> <dl> @@ -124,9 +126,9 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy </dl> <div class="warning"> -<p>Bien que la directive <a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy/report-to" title="La directive HTTP Content-Security-Policy (CSP) report-to demande à l'agent utilisateur de rapporter les violations de règles CSP à l'adresse fournie dans un groupe de l'en-tête HTTP Report-To."><code>report-to</code></a> est prévue remplacer la directive <code><strong>report-uri</strong></code> maintenant dépréciée, <a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy/report-to" title="La directive HTTP Content-Security-Policy (CSP) report-to demande à l'agent utilisateur de rapporter les violations de règles CSP à l'adresse fournie dans un groupe de l'en-tête HTTP Report-To."><code>report-to</code></a> n'est pas encore supportée par la plupart des navigateurs modernes. Par rétrocompatibilité avec les navigateurs courants et tout en prévoyant une compatibilité future quand les navigateurs supporteront <a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy/report-to" title="La directive HTTP Content-Security-Policy (CSP) report-to demande à l'agent utilisateur de rapporter les violations de règles CSP à l'adresse fournie dans un groupe de l'en-tête HTTP Report-To."><code>report-to</code></a>, vous pouvez spécifier les deux directives <code><strong>report-uri</strong></code> et <a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy/report-to" title="La directive HTTP Content-Security-Policy (CSP) report-to demande à l'agent utilisateur de rapporter les violations de règles CSP à l'adresse fournie dans un groupe de l'en-tête HTTP Report-To."><code>report-to</code></a>:</p> +<p><strong>Attention :</strong> Bien que la directive <a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy/report-to" title="La directive HTTP Content-Security-Policy (CSP) report-to demande à l'agent utilisateur de rapporter les violations de règles CSP à l'adresse fournie dans un groupe de l'en-tête HTTP Report-To."><code>report-to</code></a> est prévue remplacer la directive <code><strong>report-uri</strong></code> maintenant dépréciée, <a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy/report-to" title="La directive HTTP Content-Security-Policy (CSP) report-to demande à l'agent utilisateur de rapporter les violations de règles CSP à l'adresse fournie dans un groupe de l'en-tête HTTP Report-To."><code>report-to</code></a> n'est pas encore supportée par la plupart des navigateurs modernes. Par rétrocompatibilité avec les navigateurs courants et tout en prévoyant une compatibilité future quand les navigateurs supporteront <a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy/report-to" title="La directive HTTP Content-Security-Policy (CSP) report-to demande à l'agent utilisateur de rapporter les violations de règles CSP à l'adresse fournie dans un groupe de l'en-tête HTTP Report-To."><code>report-to</code></a>, vous pouvez spécifier les deux directives <code><strong>report-uri</strong></code> et <a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy/report-to" title="La directive HTTP Content-Security-Policy (CSP) report-to demande à l'agent utilisateur de rapporter les violations de règles CSP à l'adresse fournie dans un groupe de l'en-tête HTTP Report-To."><code>report-to</code></a>:</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: ...; report-uri https://endpoint.com; report-to groupname</pre> +<pre class="syntaxbox">Content-Security-Policy: ...; report-uri https://endpoint.com; report-to groupname</pre> <p>Dans les navigateurs qui supportent <a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy/report-to" title="La directive HTTP Content-Security-Policy (CSP) report-to demande à l'agent utilisateur de rapporter les violations de règles CSP à l'adresse fournie dans un groupe de l'en-tête HTTP Report-To."><code>report-to</code></a>, la directive <code><strong>report-uri</strong></code> sera ignorée.</p> </div> @@ -163,7 +165,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy <p>L'en-tête <code>Content-Security-Policy</code> peut être utilisé plus d'une fois comme illustré ci-après. On notera la directive {{CSP("connect-src")}} utilisée ici. Bien que la deuxième règle autorise la connexion, la première contient <code>connect-src 'none'</code>. L'ajout de règles supplémentaires permet uniquement d'augmenter les protections. Les niveaux les plus stricts pour chaque règle sont alors utilisés. Dans l'exemple qui suit, cela signifie que la directive <code>connect-src 'none'</code> sera respectée.</p> -<pre class="notranslate">Content-Security-Policy: default-src 'self' http://example.com; +<pre>Content-Security-Policy: default-src 'self' http://example.com; connect-src 'none'; Content-Security-Policy: connect-src http://example.com/; script-src http://example.com/</pre> @@ -174,7 +176,7 @@ Content-Security-Policy: connect-src http://example.com/; <p>Dans cet exemple, on désactive les scripts écrits à même le document (<em>inline</em>), les opérations <code>eval()</code> et les ressources (images, polices, scripts, etc.) peuvent uniquement être chargées via HTTPS :</p> -<pre class="notranslate">// en-tête HTTP +<pre>// en-tête HTTP Content-Security-Policy: default-src https: // version avec la balise HTML meta @@ -185,13 +187,13 @@ Content-Security-Policy: default-src https: <p>Cet exemple est plutôt adapté pour un site historique qui utilise de nombreux scripts écrits dans les documents mais pour lequel on veut s'assurer que les ressources sont chargées via HTTPS et pour lequel on veut désactiver les plugins :</p> -<pre class="notranslate">Content-Security-Policy: default-src https: 'unsafe-eval' 'unsafe-inline'; object-src 'none'</pre> +<pre>Content-Security-Policy: default-src https: 'unsafe-eval' 'unsafe-inline'; object-src 'none'</pre> <h3 id="Exemple_3">Exemple 3</h3> <p>On ne met pas en place la règle de sécurité mais on récolte les enfreintes qui se seraient produites pour cette règle :</p> -<pre class="notranslate">Content-Security-Policy-Report-Only: default-src https:; report-uri /csp-violation-report-endpoint/</pre> +<pre>Content-Security-Policy-Report-Only: default-src https:; report-uri /csp-violation-report-endpoint/</pre> <p>Pour plus d'exemples, consulter <a href="https://wiki.mozilla.org/Security/Guidelines/Web_Security#Examples_5">les recommandations de Mozilla pour la sécurité web</a>.</p> diff --git a/files/fr/web/http/headers/content-security-policy/manifest-src/index.html b/files/fr/web/http/headers/content-security-policy/manifest-src/index.html index 227cbbd03a..a99cf41e12 100644 --- a/files/fr/web/http/headers/content-security-policy/manifest-src/index.html +++ b/files/fr/web/http/headers/content-security-policy/manifest-src/index.html @@ -39,7 +39,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/manifest-src <p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: manifest-src <source>; +<pre class="syntaxbox">Content-Security-Policy: manifest-src <source>; Content-Security-Policy: manifest-src <source> <source>; </pre> @@ -53,11 +53,11 @@ Content-Security-Policy: manifest-src <source> <source>; <p>Soit cet en-tête CSP :</p> -<pre class="brush: bash notranslate">Content-Security-Policy: manifest-src https://example.com/</pre> +<pre class="brush: bash">Content-Security-Policy: manifest-src https://example.com/</pre> <p>Cet élément {{HTMLElement("link")}} sera bloqué et ne se chargera pas :</p> -<pre class="brush: html notranslate"><link rel="manifest" href="https://not-example.com/manifest"></pre> +<pre class="brush: html"><link rel="manifest" href="https://not-example.com/manifest"></pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/http/headers/content-security-policy/media-src/index.html b/files/fr/web/http/headers/content-security-policy/media-src/index.html index ed0bd0f4ab..9efb6aef2d 100644 --- a/files/fr/web/http/headers/content-security-policy/media-src/index.html +++ b/files/fr/web/http/headers/content-security-policy/media-src/index.html @@ -39,7 +39,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/media-src <p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: media-src <source>; +<pre class="syntaxbox">Content-Security-Policy: media-src <source>; Content-Security-Policy: media-src <source> <source>; </pre> @@ -53,11 +53,11 @@ Content-Security-Policy: media-src <source> <source>; <p>Soit cet en-tête CSP :</p> -<pre class="brush: bash notranslate">Content-Security-Policy: media-src https://example.com/</pre> +<pre class="brush: bash">Content-Security-Policy: media-src https://example.com/</pre> <p>Ces éléments {{HTMLElement("audio")}}, {{HTMLElement("video")}} et {{HTMLElement("track")}} seront bloqués et ne se chargeront pas :</p> -<pre class="brush: html notranslate"><audio src="https://not-example.com/audio"></audio> +<pre class="brush: html"><audio src="https://not-example.com/audio"></audio> <video src="https://not-example.com/video"> <track kind="subtitles" src="https://not-example.com/subtitles"> diff --git a/files/fr/web/http/headers/content-security-policy/navigate-to/index.html b/files/fr/web/http/headers/content-security-policy/navigate-to/index.html index 79478e5691..2a715438a3 100644 --- a/files/fr/web/http/headers/content-security-policy/navigate-to/index.html +++ b/files/fr/web/http/headers/content-security-policy/navigate-to/index.html @@ -17,7 +17,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/navigate-to <p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>navigate</strong></code><strong><code>-to</code></strong> restreint les URL vers lesquelles un document peut initier une navigation de quelque manière que ce soit, dont {{HTMLElement("form")}} (si {{CSP("form-action")}} n'est pas spécifié), {{HTMLElement("a")}}, {{DOMxRef("window.location")}}, {{DOMxRef("window.open")}}, etc. Elle permet de renforcer les navigations que le document peut initier et <strong>non</strong> les adresses vers lesquelles ce document peut naviguer.</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Si la directive {{CSP("form-action")}} est présente, la directive <code>navigate-to</code> ne sera pas appliquée sur la navigation par la soumission de formulaire.</p> </div> @@ -42,7 +42,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/navigate-to <p>Une ou plusieurs sources peuvent être utilisées pour cette directive :</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: navigate-to <source>; +<pre class="syntaxbox">Content-Security-Policy: navigate-to <source>; Content-Security-Policy: navigate-to <source> <source>; </pre> @@ -54,14 +54,14 @@ Content-Security-Policy: navigate-to <source> <source>; <h3 id="Configuration_par_balise_<meta>">Configuration par balise <meta></h3> -<pre class="brush: html notranslate"><meta http-equiv="Content-Security-Policy" content="navigate-to 'none'"> +<pre class="brush: html"><meta http-equiv="Content-Security-Policy" content="navigate-to 'none'"> </pre> <h3 id="Cas_de_violation">Cas de violation</h3> <p>Utiliser l'élément {{HTMLElement("form")}} avec un attribut <code>action</code> défini à un script embarqué en JavaScript résultera en une violation de CSP :</p> -<pre class="brush: html; example-bad notranslate"><meta http-equiv="Content-Security-Policy" content="navigate-to 'none'"> +<pre class="brush: html; example-bad"><meta http-equiv="Content-Security-Policy" content="navigate-to 'none'"> <form action="javascript:alert('Foo')" id="form1" method="post"> <input type="text" name="fieldName" value="fieldValue"> diff --git a/files/fr/web/http/headers/content-security-policy/object-src/index.html b/files/fr/web/http/headers/content-security-policy/object-src/index.html index 0111f1cf61..46cca9c2ee 100644 --- a/files/fr/web/http/headers/content-security-policy/object-src/index.html +++ b/files/fr/web/http/headers/content-security-policy/object-src/index.html @@ -20,7 +20,9 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/object-src <p>Pour définir des types autorisés pour les éléments {{HTMLElement("object")}}, {{HTMLElement("embed")}} et {{HTMLElement("applet")}}, voir la directive {{CSP("plugin-types")}}.</p> -<p class="note">Les éléments contrôlés par <code>object-src</code> sont considérés peut-être par coïcidence comme des éléments HTML du passé et ne recevront de nouvelles fonctionnalités normalisées (comme les attributs de sécurité <code>sandbox</code> et <code>allow</code> pour <code><iframe></code>). De ce fait, il est <a href="https://csp.withgoogle.com/docs/strict-csp.html">recommandé</a> de restreindre cette directive, c'est-à-dire la définir explicitement à <code>object-src 'none'</code> dans la mesure du possible.</p> +<div class="notecard note"> + <p><strong>Note :</strong> Les éléments contrôlés par <code>object-src</code> sont considérés peut-être par coïcidence comme des éléments HTML du passé et ne recevront de nouvelles fonctionnalités normalisées (comme les attributs de sécurité <code>sandbox</code> et <code>allow</code> pour <code><iframe></code>). De ce fait, il est <a href="https://csp.withgoogle.com/docs/strict-csp.html">recommandé</a> de restreindre cette directive, c'est-à-dire la définir explicitement à <code>object-src 'none'</code> dans la mesure du possible.</p> +</div> <table class="properties"> <tbody> @@ -43,7 +45,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/object-src <p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: object-src <source>; +<pre class="syntaxbox">Content-Security-Policy: object-src <source>; Content-Security-Policy: object-src <source> <source>; </pre> @@ -57,11 +59,11 @@ Content-Security-Policy: object-src <source> <source>; <p>Soit cet en-tête CSP :</p> -<pre class="brush: bash notranslate">Content-Security-Policy: object-src https://example.com/</pre> +<pre class="brush: bash">Content-Security-Policy: object-src https://example.com/</pre> <p>Ces éléments {{HTMLElement("object")}}, {{HTMLElement("embed")}} et {{HTMLElement("applet")}} seront bloqués et ne se chargeront pas :</p> -<pre class="brush: html notranslate"><embed src="https://not-example.com/flash"></embed> +<pre class="brush: html"><embed src="https://not-example.com/flash"></embed> <object data="https://not-example.com/plugin"></object> <applet archive="https://not-example.com/java"></applet></pre> diff --git a/files/fr/web/http/headers/content-security-policy/plugin-types/index.html b/files/fr/web/http/headers/content-security-policy/plugin-types/index.html index 76e7cf1e38..188eccaf9e 100644 --- a/files/fr/web/http/headers/content-security-policy/plugin-types/index.html +++ b/files/fr/web/http/headers/content-security-policy/plugin-types/index.html @@ -47,7 +47,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/plugin-types <p>Un ou plusieurs <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">types MIME</a> peuvent être autorisées pour cette directive :</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: plugin-types <type>/<subtype>; +<pre class="syntaxbox">Content-Security-Policy: plugin-types <type>/<subtype>; Content-Security-Policy: plugin-types <type>/<subtype> <type>/<subtype>; </pre> @@ -62,23 +62,23 @@ Content-Security-Policy: plugin-types <type>/<subtype> <type>/ <p>Pour intedire tous les greffons, la directive {{CSP("object-src")}} doit être définie à <code>'none'</code>. La directive <code>plugin-types</code> n'est utilisée que si vous autorisez au préalable les greffons avec <code>object-src</code>.</p> -<pre class="brush: html notranslate"><meta http-equiv="Content-Security-Policy" content="object-src 'none'"></pre> +<pre class="brush: html"><meta http-equiv="Content-Security-Policy" content="object-src 'none'"></pre> <h3 id="Autoriser_le_contenu_Flash">Autoriser le contenu Flash</h3> <p>Soit cet en-tête CSP :</p> -<pre class="brush: bash notranslate">Content-Security-Policy: plugin-types application/x-shockwave-flash</pre> +<pre class="brush: bash">Content-Security-Policy: plugin-types application/x-shockwave-flash</pre> <p>Cet objet Flash sera autorisé et se chargera (dans la mesure où le navigateur gère Flash) :</p> -<pre class="brush: html notranslate"><object data="https://example.com/flash" type="application/x-shockwave-flash"></object></pre> +<pre class="brush: html"><object data="https://example.com/flash" type="application/x-shockwave-flash"></object></pre> <h3 id="Autoriser_les_applets_Java">Autoriser les applets Java</h3> <p>Pour charger une {{HTMLElement("applet")}}, vous devez spécifier la valeur <code>application/x-java-applet</code> :</p> -<pre class="brush: bash notranslate">Content-Security-Policy: plugin-types application/x-java-applet</pre> +<pre class="brush: bash">Content-Security-Policy: plugin-types application/x-java-applet</pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/http/headers/content-security-policy/prefetch-src/index.html b/files/fr/web/http/headers/content-security-policy/prefetch-src/index.html index 81d2f5f0fa..62abcf4068 100644 --- a/files/fr/web/http/headers/content-security-policy/prefetch-src/index.html +++ b/files/fr/web/http/headers/content-security-policy/prefetch-src/index.html @@ -36,7 +36,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/prefetch-src <p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: prefetch-src <source>; +<pre class="syntaxbox">Content-Security-Policy: prefetch-src <source>; Content-Security-Policy: prefetch-src <source> <source>; </pre> @@ -50,12 +50,12 @@ Content-Security-Policy: prefetch-src <source> <source>; <p>Soit cet en-tête CSP :</p> -<pre class="notranslate">Content-Security-Policy: prefetch-src https://example.com/ +<pre>Content-Security-Policy: prefetch-src https://example.com/ </pre> <p>Les requêtes émises par ce code généreront des erreurs de réseau puisque les URL demandées ne correspondant pas à la liste de permissions de la directive <code>prefetch-src</code> :</p> -<pre class="notranslate"><link rel="prefetch" src="https://example.org/"></link> +<pre><link rel="prefetch" src="https://example.org/"></link> <link rel="prerender" src="https://example.org/"></link></pre> <h2 id="Spécification">Spécification</h2> diff --git a/files/fr/web/http/headers/content-security-policy/referrer/index.html b/files/fr/web/http/headers/content-security-policy/referrer/index.html index dc3b894b7c..ee12abb78d 100644 --- a/files/fr/web/http/headers/content-security-policy/referrer/index.html +++ b/files/fr/web/http/headers/content-security-policy/referrer/index.html @@ -18,14 +18,14 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/referrer <p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>referrer</strong></code> spécifie des informations dans l'en-tête HTTP {{HTTPHeader("Referer")}} (avec un seul r) pour les liens externes d'une page. Cette API est dépréciée et supprimée des navigateurs.</p> <div class="note"> -<p>Utilisez plutôt l'en-tête HTTP {{HTTPHeader("Referrer-Policy")}}.</p> +<p><strong>Note :</strong> Utilisez plutôt l'en-tête HTTP {{HTTPHeader("Referrer-Policy")}}.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> <p>Soit cet en-tête CSP :</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: referrer <referrer-policy>;</pre> +<pre class="syntaxbox">Content-Security-Policy: referrer <referrer-policy>;</pre> <p>Où <code><referrer-policy></code> peut être une valeur parmi :</p> @@ -45,7 +45,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/referrer <h2 id="Exemples">Exemples</h2> -<pre class="notranslate">Content-Security-Policy: referrer "none";</pre> +<pre>Content-Security-Policy: referrer "none";</pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/http/headers/content-security-policy/report-to/index.html b/files/fr/web/http/headers/content-security-policy/report-to/index.html index fe1286dbe1..3011486ccb 100644 --- a/files/fr/web/http/headers/content-security-policy/report-to/index.html +++ b/files/fr/web/http/headers/content-security-policy/report-to/index.html @@ -14,9 +14,9 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/report-to --- <div>{{HTTPSidebar}}</div> -<p><span class="seoSummary">La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <strong><code>report-to</code></strong> demande à l'agent utilisateur de rapporter les violations de règles CSP à l'adresse fournie dans un groupe de l'en-tête HTTP <code>Report-To</code>.</span></p> +<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <strong><code>report-to</code></strong> demande à l'agent utilisateur de rapporter les violations de règles CSP à l'adresse fournie dans un groupe de l'en-tête HTTP <code>Report-To</code>.</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: ...; report-to groupname +<pre class="syntaxbox">Content-Security-Policy: ...; report-to groupname </pre> <p>Cette directive n'a aucun effet en elle-même, mais prend tout son sens en étant combinée à d'autres directives.</p> @@ -39,38 +39,36 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/report-to <h2 id="Syntaxe">Syntaxe</h2> -<pre class="notranslate">Content-Security-Policy: report-to <json-field-value>;</pre> +<pre>Content-Security-Policy: report-to <json-field-value>;</pre> <h2 id="Exemples">Exemples</h2> <p>Voir {{HTTPHeader("Content-Security-Policy-Report-Only")}} pour plus d'informations et d'exemples.</p> -<pre class="notranslate"><a href="http://wicg.github.io/reporting/#report-to" id="ref-for-report-to①">Report-To</a>: { "<a href="http://wicg.github.io/reporting/#group" id="ref-for-group①">group</a>": "csp-endpoint", - "<a href="http://wicg.github.io/reporting/#max-age" id="ref-for-max-age①">max_age</a>": 10886400, - "<a href="http://wicg.github.io/reporting/#endpoints" id="ref-for-endpoints②">endpoints</a>": [ - { "<a href="http://wicg.github.io/reporting/#url" id="ref-for-url②">url</a>": "https://example.com/csp-reports" } +<pre><a href="http://wicg.github.io/reporting/#report-to">Report-To</a>: { "<a href="http://wicg.github.io/reporting/#group">group</a>": "csp-endpoint", + "<a href="http://wicg.github.io/reporting/#max-age">max_age</a>": 10886400, + "<a href="http://wicg.github.io/reporting/#endpoints">endpoints</a>": [ + { "<a href="http://wicg.github.io/reporting/#url">url</a>": "https://example.com/csp-reports" } ] }, - { "<a href="http://wicg.github.io/reporting/#group" id="ref-for-group②">group</a>": "hpkp-endpoint", - "<a href="http://wicg.github.io/reporting/#max-age" id="ref-for-max-age②">max_age</a>": 10886400, - "<a href="http://wicg.github.io/reporting/#endpoints" id="ref-for-endpoints③">endpoints</a>": [ - { "<a href="http://wicg.github.io/reporting/#url" id="ref-for-url③">url</a>": "https://example.com/hpkp-reports" } + { "<a href="http://wicg.github.io/reporting/#group">group</a>": "hpkp-endpoint", + "<a href="http://wicg.github.io/reporting/#max-age">max_age</a>": 10886400, + "<a href="http://wicg.github.io/reporting/#endpoints">endpoints</a>": [ + { "<a href="http://wicg.github.io/reporting/#url">url</a>": "https://example.com/hpkp-reports" } ] } -<a href="https://w3c.github.io/webappsec-csp/#content-security-policy" id="ref-for-content-security-policy①">Content-Security-Policy</a>: ...; <a href="https://w3c.github.io/webappsec-csp/#directives-reporting" id="ref-for-directives-reporting①">report-to</a> csp-endpoint +<a href="https://w3c.github.io/webappsec-csp/#content-security-policy">Content-Security-Policy</a>: ...; <a href="https://w3c.github.io/webappsec-csp/#directives-reporting">report-to</a> csp-endpoint </pre> -<pre class="notranslate"><a href="http://wicg.github.io/reporting/#report-to" id="ref-for-report-to">Report-To</a>: { "<a href="http://wicg.github.io/reporting/#group" id="ref-for-group">group</a>": "endpoint-1", - "<a href="http://wicg.github.io/reporting/#max-age" id="ref-for-max-age">max_age</a>": 10886400, - "<a href="http://wicg.github.io/reporting/#endpoints" id="ref-for-endpoints①">endpoints</a>": [ - { "<a href="http://wicg.github.io/reporting/#url" id="ref-for-url">url</a>": "https://example.com/reports" }, - { "<a href="http://wicg.github.io/reporting/#url" id="ref-for-url①">url</a>": "https://backup.com/reports" } +<pre><a href="http://wicg.github.io/reporting/#report-to">Report-To</a>: { "<a href="http://wicg.github.io/reporting/#group">group</a>": "endpoint-1", + "<a href="http://wicg.github.io/reporting/#max-age">max_age</a>": 10886400, + "<a href="http://wicg.github.io/reporting/#endpoints">endpoints</a>": [ + { "<a href="http://wicg.github.io/reporting/#url">url</a>": "https://example.com/reports" }, + { "<a href="http://wicg.github.io/reporting/#url">url</a>": "https://backup.com/reports" } ] } -<a href="https://w3c.github.io/webappsec-csp/#content-security-policy" id="ref-for-content-security-policy">Content-Security-Policy</a>: ...; <a href="https://w3c.github.io/webappsec-csp/#directives-reporting" id="ref-for-directives-reporting">report-to</a> endpoint-1</pre> +<a href="https://w3c.github.io/webappsec-csp/#content-security-policy">Content-Security-Policy</a>: ...; <a href="https://w3c.github.io/webappsec-csp/#directives-reporting">report-to</a> endpoint-1</pre> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<div class="hidden"> - <p>{{Compat("http.headers.csp.Content-Security-Policy.report-to")}}</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/http/headers/content-security-policy/report-uri/index.html b/files/fr/web/http/headers/content-security-policy/report-uri/index.html index 40bb91bddd..18ea9daf71 100644 --- a/files/fr/web/http/headers/content-security-policy/report-uri/index.html +++ b/files/fr/web/http/headers/content-security-policy/report-uri/index.html @@ -16,9 +16,9 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/report-uri <p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>report-uri</strong></code> demande à l'agent utilisateur de rapporter les violations de règles CSP. Ces rapports de violation sont constituées d'un document JSON envoyé via une requête HTTP POST à l'URI fournie.</p> <div class="warning"> -<p>Bien que la directive {{CSP("report-to")}} est prévue remplacer la directive <code><strong>report-uri</strong></code> maintenant dépréciée, {{CSP("report-to")}} n'est pas encore supportée par la plupart des navigateurs modernes. Par rétrocompatibilité avec les navigateurs courants et tout en prévoyant une compatibilité future quand les navigateurs supporteront {{CSP("report-to")}}, vous pouvez spécifier les deux directives <code><strong>report-uri</strong></code> et {{CSP("report-to")}}:</p> +<p><strong>Attention :</strong> Bien que la directive {{CSP("report-to")}} est prévue remplacer la directive <code><strong>report-uri</strong></code> maintenant dépréciée, {{CSP("report-to")}} n'est pas encore supportée par la plupart des navigateurs modernes. Par rétrocompatibilité avec les navigateurs courants et tout en prévoyant une compatibilité future quand les navigateurs supporteront {{CSP("report-to")}}, vous pouvez spécifier les deux directives <code><strong>report-uri</strong></code> et {{CSP("report-to")}}:</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: ...; report-uri https://endpoint.com; report-to groupname</pre> +<pre class="syntaxbox">Content-Security-Policy: ...; report-uri https://endpoint.com; report-to groupname</pre> <p>Dans les navigateurs qui supportent {{CSP("report-to")}}, la directive <code><strong>report-uri</strong></code> sera ignorée.</p> </div> @@ -43,7 +43,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/report-uri <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">Content-Security-Policy: report-uri <uri>; +<pre class="syntaxbox">Content-Security-Policy: report-uri <uri>; Content-Security-Policy: report-uri <uri> <uri>;</pre> <dl> @@ -55,11 +55,11 @@ Content-Security-Policy: report-uri <uri> <uri>;</pre> <p>Voir {{HTTPHeader("Content-Security-Policy-Report-Only")}} pour plus d'informations et d'exemples.</p> -<pre class="notranslate">Content-Security-Policy: default-src https:; report-uri /csp-violation-report-endpoint/</pre> +<pre>Content-Security-Policy: default-src https:; report-uri /csp-violation-report-endpoint/</pre> <p><code>/csp-violation-report-endpoint/</code> pourrait par exemple exécuter un script PHP similaire au suivant qui journaliserait le JSON détaillant la violation et, si elle est la première ajoutée au journal, enverrait un courril à l'administrateur :</p> -<pre class="brush: php notranslate"><?php +<pre class="brush: php"><?php // Start configure $log_file = dirname(__FILE__) . '/csp-violations.log'; diff --git a/files/fr/web/http/headers/content-security-policy/require-sri-for/index.html b/files/fr/web/http/headers/content-security-policy/require-sri-for/index.html index 2650a7f3c7..f78c78e47f 100644 --- a/files/fr/web/http/headers/content-security-policy/require-sri-for/index.html +++ b/files/fr/web/http/headers/content-security-policy/require-sri-for/index.html @@ -19,7 +19,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/require-sri-for <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">Content-Security-Policy: require-sri-for script; +<pre class="syntaxbox">Content-Security-Policy: require-sri-for script; Content-Security-Policy: require-sri-for style; Content-Security-Policy: require-sri-for script style; </pre> @@ -37,17 +37,17 @@ Content-Security-Policy: require-sri-for script style; <p>Soit cet en-tête CSP :</p> -<pre class="notranslate">Content-Security-Policy: require-sri-for script style</pre> +<pre>Content-Security-Policy: require-sri-for script style</pre> <p>Cet élément {{HTMLElement("script")}} sera chargé et exécuté puisqu'il utilise un attribut <code>integrity</code> valide.</p> -<pre class="brush: html; example-good notranslate"><script src="https://code.jquery.com/jquery-3.1.1.slim.js" +<pre class="brush: html; example-good"><script src="https://code.jquery.com/jquery-3.1.1.slim.js" integrity="sha256-5i/mQ300M779N2OVDrl16lbohwXNUdzL/R2aVUXyXWA=" crossorigin="anonymous"></script></pre> <p>Toutefois, ce script sera bloqué car il n'utilise pas cet attribut :</p> -<pre class="brush: html; example-bad notranslate"><script src="https://code.jquery.com/jquery-3.1.1.slim.js"></script></pre> +<pre class="brush: html; example-bad"><script src="https://code.jquery.com/jquery-3.1.1.slim.js"></script></pre> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> diff --git a/files/fr/web/http/headers/content-security-policy/require-trusted-types-for/index.html b/files/fr/web/http/headers/content-security-policy/require-trusted-types-for/index.html index f4102e3593..fea32fdcd9 100644 --- a/files/fr/web/http/headers/content-security-policy/require-trusted-types-for/index.html +++ b/files/fr/web/http/headers/content-security-policy/require-trusted-types-for/index.html @@ -17,11 +17,11 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/require-trusted-types-f <p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>require-trusted-types-for</strong></code> {{experimental_inline}} directive informe l'agent utilisateur de contrôler les données passées au puits de fonctions XSS du DOM, tel que le mutateur <a href="/en-US/docs/Web/API/Element/innerHTML">Element.innerHTML</a>.</p> -<p>Lors de leur usage, ces fonctions n'acceptent que des valeurs typées et non falsifiables créées par des règles de Trusted Type et rejettent les chaines de caractère.<span> Conjointement à la directive <strong><code><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types">trusted-types</a></code></strong>, qui empêche la création de règles de Trusted Type, cette directive permet aux auteurs de définir des règles empêchant d'écrire des données dans le DOM et donc de réduire </span> <span>la fenêtre de tir pour les attaques XSS sur le DOM à quelques pans isolés de la base de code d'une application, facilitant donc son contrôle et sa relecture</span><span>.</span></p> +<p>Lors de leur usage, ces fonctions n'acceptent que des valeurs typées et non falsifiables créées par des règles de Trusted Type et rejettent les chaines de caractère. Conjointement à la directive <strong><code><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types">trusted-types</a></code></strong>, qui empêche la création de règles de Trusted Type, cette directive permet aux auteurs de définir des règles empêchant d'écrire des données dans le DOM et donc de réduire la fenêtre de tir pour les attaques XSS sur le DOM à quelques pans isolés de la base de code d'une application, facilitant donc son contrôle et sa relecture.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="notranslate">Content-Security-Policy: require-trusted-types-for 'script'; +<pre>Content-Security-Policy: require-trusted-types-for 'script'; </pre> <dl> @@ -31,7 +31,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/require-trusted-types-f <h2 id="Exemples">Exemples</h2> -<pre class="brush: js notranslate">// Content-Security-Policy: require-trusted-types-for 'script'; trusted-types foo; +<pre class="brush: js">// Content-Security-Policy: require-trusted-types-for 'script'; trusted-types foo; const attackerInput = '<svg onload="alert(/cross-site-scripting/)" />'; const el = document.createElement('div'); diff --git a/files/fr/web/http/headers/content-security-policy/sandbox/index.html b/files/fr/web/http/headers/content-security-policy/sandbox/index.html index 94c45d6167..626398f914 100644 --- a/files/fr/web/http/headers/content-security-policy/sandbox/index.html +++ b/files/fr/web/http/headers/content-security-policy/sandbox/index.html @@ -33,7 +33,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/sandbox <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">Content-Security-Policy: sandbox; +<pre class="syntaxbox">Content-Security-Policy: sandbox; Content-Security-Policy: sandbox <valeur>; </pre> @@ -73,7 +73,7 @@ Content-Security-Policy: sandbox <valeur>; <h2 id="Exemples">Exemples</h2> -<pre class="brush: bash notranslate">Content-Security-Policy: sandbox allow-scripts;</pre> +<pre class="brush: bash">Content-Security-Policy: sandbox allow-scripts;</pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/http/headers/content-security-policy/script-src-attr/index.html b/files/fr/web/http/headers/content-security-policy/script-src-attr/index.html index 0701824fd5..d08a6f4e57 100644 --- a/files/fr/web/http/headers/content-security-policy/script-src-attr/index.html +++ b/files/fr/web/http/headers/content-security-policy/script-src-attr/index.html @@ -41,13 +41,13 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/script-src-attr <p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: script-src-attr <source>; +<pre class="syntaxbox">Content-Security-Policy: script-src-attr <source>; Content-Security-Policy: script-src-attr <source> <source>; </pre> <p><code>script-src-attr</code> peut être utilisée conjointement à {{CSP("script-src")}} :</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: script-src <source>; +<pre class="syntaxbox">Content-Security-Policy: script-src <source>; Content-Security-Policy: script-src-attr <source>; </pre> @@ -61,10 +61,6 @@ Content-Security-Policy: script-src-attr <source>; <p>Si la directive <code>script-src-attr</code> est absente, l'agent utilisateur se rabat sur la valeur de la directive {{CSP("script-src")}}, qui elle-même a pour valeur par défaut celle de la directive {{CSP("default-src")}}.</p> -<div class="hidden"> -<p>TODO: Add comprehensive examples.</p> -</div> - <h2 id="Spécifications">Spécifications</h2> <table class="standard-table"> diff --git a/files/fr/web/http/headers/content-security-policy/script-src-elem/index.html b/files/fr/web/http/headers/content-security-policy/script-src-elem/index.html index 5bebc3b3a7..7d29bbef41 100644 --- a/files/fr/web/http/headers/content-security-policy/script-src-elem/index.html +++ b/files/fr/web/http/headers/content-security-policy/script-src-elem/index.html @@ -41,13 +41,13 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/script-src-elem <p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: script-src-elem <source>; +<pre class="syntaxbox">Content-Security-Policy: script-src-elem <source>; Content-Security-Policy: script-src-elem <source> <source>; </pre> <p><code>script-src-elem</code> peut être utilisée conjointement à {{CSP("script-src")}} :</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: script-src <source>; +<pre class="syntaxbox">Content-Security-Policy: script-src <source>; Content-Security-Policy: script-src-elem <source>; </pre> @@ -61,10 +61,6 @@ Content-Security-Policy: script-src-elem <source>; <p>Si la directive <code>script-src-elem</code> est absente, l'agent utilisateur se rabat sur la valeur de la directive {{CSP("script-src")}}, qui elle-même a pour valeur par défaut celle de la directive {{CSP("default-src")}}.</p> -<div class="hidden"> -<p>TODO: Add comprehensive examples.</p> -</div> - <h2 id="Spécifications">Spécifications</h2> <table class="standard-table"> diff --git a/files/fr/web/http/headers/content-security-policy/script-src/index.html b/files/fr/web/http/headers/content-security-policy/script-src/index.html index d050eefcaa..a6b2659ae9 100644 --- a/files/fr/web/http/headers/content-security-policy/script-src/index.html +++ b/files/fr/web/http/headers/content-security-policy/script-src/index.html @@ -40,7 +40,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/script-src <p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: script-src <source>; +<pre class="syntaxbox">Content-Security-Policy: script-src <source>; Content-Security-Policy: script-src <source> <source>; </pre> @@ -54,19 +54,19 @@ Content-Security-Policy: script-src <source> <source>; <p>Soit cet en-tête CSP :</p> -<pre class="brush: bash notranslate">Content-Security-Policy: script-src https://example.com/</pre> +<pre class="brush: bash">Content-Security-Policy: script-src https://example.com/</pre> <p>Ces scripts seront bloqués et ne seront pas chargés ou exécutés :</p> -<pre class="brush: html notranslate"><script src="https://not-example.com/js/library.js"></script></pre> +<pre class="brush: html"><script src="https://not-example.com/js/library.js"></script></pre> <p>Notez que les gestionnaires d'évènements par attributs sont aussi bloqués :</p> -<pre class="brush: html notranslate"><button id="btn" onclick="doSomething()"></pre> +<pre class="brush: html"><button id="btn" onclick="doSomething()"></pre> <p>Vous devez les remplacer par des appels à la méthode {{domxref("EventTarget.addEventListener", "addEventListener")}} :</p> -<pre class="brush: js notranslate">document.getElementById("btn").addEventListener('click', doSomething);</pre> +<pre class="brush: js">document.getElementById("btn").addEventListener('click', doSomething);</pre> <h3 id="Scripts_embarqués_non_fiables">Scripts embarqués non fiables</h3> @@ -76,32 +76,32 @@ Content-Security-Policy: script-src <source> <source>; <p>Vous pouvez autoriser les scripts embarqués et les gestionnaires d'évènements par attributs en spécifiant la valeur <code>'unsafe-inline'</code>, des nonces ou des hashs correspondant au script.</p> -<pre class="brush: bash notranslate">Content-Security-Policy: script-src 'unsafe-inline'; +<pre class="brush: bash">Content-Security-Policy: script-src 'unsafe-inline'; </pre> <p>Cette directive CSP autorisera tous les scripts {{HTMLElement("script")}} embarqués :</p> -<pre class="brush: html notranslate"><script> +<pre class="brush: html"><script> var inline = 1; </script></pre> <p>Vous pouvez aussi utiliser un nonce pour autoriser spécifiquement certains éléments {{HTMLElement("script")}} embarqués :</p> -<pre class="brush: bash notranslate">Content-Security-Policy: script-src 'nonce-2726c7f26c'</pre> +<pre class="brush: bash">Content-Security-Policy: script-src 'nonce-2726c7f26c'</pre> <p>Vous devrez alors définir ce nonce sur l'élément {{HTMLElement("script")}} :</p> -<pre class="brush: html notranslate"><script nonce="2726c7f26c"> +<pre class="brush: html"><script nonce="2726c7f26c"> var inline = 1; </script></pre> <p>Autrement, vous pouvez créer des hashs à partir de vos scripts. CSP accepte les algorithmes sha256, sha384 et sha512.</p> -<pre class="brush: bash notranslate">Content-Security-Policy: script-src 'sha256-B2yPHKaXnvFWtRChIbabYmUBFZdVfKKXHbWtWidDVF8='</pre> +<pre class="brush: bash">Content-Security-Policy: script-src 'sha256-B2yPHKaXnvFWtRChIbabYmUBFZdVfKKXHbWtWidDVF8='</pre> <p>Lors de la génération du hash, vous ne devez pas inclure les balises et tenir compte de la casse et des caractères blancs (espaces, retours à la ligne, etc.).</p> -<pre class="brush: html notranslate"><script>var inline = 1;</script></pre> +<pre class="brush: html"><script>var inline = 1;</script></pre> <h3 id="Expressions_dévaluation_non_fiables">Expressions d'évaluation non fiables</h3> @@ -124,15 +124,15 @@ Content-Security-Policy: script-src <source> <source>; <p>La valeur <code>'strict-dynamic'</code> spécifie que la confiance explicitement donnée à un script de la page, par le biais d'un nonce ou d'un hash, doit être propagée à tous les scripts chargés par celui-ci. En conséquence, toute liste de permissions ou expressions de sources telles que <code>'self'</code> ou <code>'unsafe-inline'</code> sont ignorées. Par exemple, une règle telle que <code>script-src 'strict-dynamic' 'nonce-R4nd0m' https://whitelisted.com/</code> autoriserait le chargement de scripts comme <code><script nonce="R4nd0m" src="https://example.com/loader.js"></code> et s'appliquerait ensuite à tous les scripts chargés par <code>loader.js</code>, mais interdirait les scripts chargés depuis <code>https://whitelisted.com/</code> à moins qu'ils soient accompagnés d'un nonce ou chargés depuis un script dont la source est de confiance.</p> -<pre class="brush: bash notranslate">script-src 'strict-dynamic' 'nonce-<em>someNonce</em>'</pre> +<pre class="brush: bash">script-src 'strict-dynamic' 'nonce-<em>someNonce</em>'</pre> <p><em>Ou</em></p> -<pre class="brush: bash notranslate">script-src 'strict-dynamic' 'sha256-<em>base64EncodedHash</em>'</pre> +<pre class="brush: bash">script-src 'strict-dynamic' 'sha256-<em>base64EncodedHash</em>'</pre> <p>Il est possible de déployer <code>strict-dynamic</code> de manière rétrocompatible, sans chercher à connaitre l'agent utilisateur. Cette directive :</p> -<pre class="brush: bash notranslate">script-src 'unsafe-inline' https: 'nonce-abcdefg' 'strict-dynamic'</pre> +<pre class="brush: bash">script-src 'unsafe-inline' https: 'nonce-abcdefg' 'strict-dynamic'</pre> <p>fonctionnera comme <code>'unsafe-inline' https:</code> pour les navigateurs supportant CSP1, <code>https: 'nonce-abcdefg'</code> pour ceux supportant CSP2 et comme <code>'nonce-abcdefg' 'strict-dynamic'</code> pour ceux supportant CSP3.</p> diff --git a/files/fr/web/http/headers/content-security-policy/style-src-attr/index.html b/files/fr/web/http/headers/content-security-policy/style-src-attr/index.html index 55ef02df71..efe3b11c9a 100644 --- a/files/fr/web/http/headers/content-security-policy/style-src-attr/index.html +++ b/files/fr/web/http/headers/content-security-policy/style-src-attr/index.html @@ -43,13 +43,13 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/style-src-attr <p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: style-src-attr <source>; +<pre class="syntaxbox">Content-Security-Policy: style-src-attr <source>; Content-Security-Policy: style-src-attr <source> <source>; </pre> <p><code>style-src-attr</code> peut être utilisée conjointement à {{CSP("style-src")}} :</p> -<pre class="notranslate">Content-Security-Policy: <code>style</code>-src <source>; +<pre>Content-Security-Policy: <code>style</code>-src <source>; Content-Security-Policy: <code>style</code>-src-attr <source>;</pre> <h3 id="Sources">Sources</h3> @@ -61,12 +61,6 @@ Content-Security-Policy: <code>style</code>-src-attr <source>;</pre> <dd>Requiert qu'un échantillon du code violant la directive soit inclus dans le rapport envoyé.</dd> </dl> -<h2 id="Exemples">Exemples</h2> - -<div class="hidden"> -<p>TODO: add examples</p> -</div> - <h2 id="Spécifications">Spécifications</h2> <table class="standard-table"> diff --git a/files/fr/web/http/headers/content-security-policy/style-src-elem/index.html b/files/fr/web/http/headers/content-security-policy/style-src-elem/index.html index 49f0a0c7d4..ae88af89c0 100644 --- a/files/fr/web/http/headers/content-security-policy/style-src-elem/index.html +++ b/files/fr/web/http/headers/content-security-policy/style-src-elem/index.html @@ -43,13 +43,13 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/style-src-elem <p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: style-src-elem <source>; +<pre class="syntaxbox">Content-Security-Policy: style-src-elem <source>; Content-Security-Policy: style-src-elem <source> <source>; </pre> <p><code>style-src-elem</code> peut être utilisée conjointement à {{CSP("style-src")}} :</p> -<pre class="notranslate">Content-Security-Policy: <code>style</code>-src <source>; +<pre>Content-Security-Policy: <code>style</code>-src <source>; Content-Security-Policy: <code>style</code>-src-elem <source>;</pre> <h3 id="Sources">Sources</h3> @@ -61,12 +61,6 @@ Content-Security-Policy: <code>style</code>-src-elem <source>;</pre> <dd>Requiert qu'un échantillon du code violant la directive soit inclus dans le rapport envoyé.</dd> </dl> -<h2 id="Exemples">Exemples</h2> - -<div class="hidden"> -<p>TODO: add examples</p> -</div> - <h2 id="Spécifications">Spécifications</h2> <table class="standard-table"> diff --git a/files/fr/web/http/headers/content-security-policy/style-src/index.html b/files/fr/web/http/headers/content-security-policy/style-src/index.html index d373fa8477..a8fa19ef1c 100644 --- a/files/fr/web/http/headers/content-security-policy/style-src/index.html +++ b/files/fr/web/http/headers/content-security-policy/style-src/index.html @@ -40,7 +40,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/style-src <p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: style-src <source>; +<pre class="syntaxbox">Content-Security-Policy: style-src <source>; Content-Security-Policy: style-src <source> <source>; </pre> @@ -54,11 +54,11 @@ Content-Security-Policy: style-src <source> <source>; <p>Soit cet en-tête CSP :</p> -<pre class="brush: bash notranslate">Content-Security-Policy: style-src https://example.com/</pre> +<pre class="brush: bash">Content-Security-Policy: style-src https://example.com/</pre> <p>Ces feuilles de style seront bloquées et ne se chargeront pas :</p> -<pre class="brush: html notranslate"><link href="https://not-example.com/styles/main.css" rel="stylesheet" type="text/css" /> +<pre class="brush: html"><link href="https://not-example.com/styles/main.css" rel="stylesheet" type="text/css" /> <style> #inline-style { background: red; } @@ -70,21 +70,21 @@ Content-Security-Policy: style-src <source> <source>; <p>De même que les styles chargés avec l'en-tête {{HTTPHeader("Link")}} :</p> -<pre class="brush: bash notranslate">Link: <https://not-example.com/styles/stylesheet.css>;rel=stylesheet +<pre class="brush: bash">Link: <https://not-example.com/styles/stylesheet.css>;rel=stylesheet </pre> <p>Les attributes de style seront aussi bloqués :</p> -<pre class="brush: html notranslate"><div style="display:none">Foo</div></pre> +<pre class="brush: html"><div style="display:none">Foo</div></pre> <p>De même que les styles ajoutés par JavaScript en définissant l'attribut <code>style</code> directement, ou en définissant la propriété {{domxref("CSSStyleDeclaration.cssText", "cssText")}} :</p> -<pre class="brush: js notranslate">document.querySelector('div').setAttribute('style', 'display:none;'); +<pre class="brush: js">document.querySelector('div').setAttribute('style', 'display:none;'); document.querySelector('div').style.cssText = 'display:none;';</pre> <p>Toutefois, les propriétés de styles qui sont définies directement dans l'attribut {{domxref("HTMLElement.style", "style")}} ne seront pas bloquées, permettant aux utilisateurs de manipuler sainement les styles avec JavaScript :</p> -<pre class="brush: js notranslate">document.querySelector('div').style.display = 'none';</pre> +<pre class="brush: js">document.querySelector('div').style.display = 'none';</pre> <p>Ce genre de manipulations peut être bloqué en désactivant JavaScript au moyen de la directive CSP {{CSP("script-src")}}.</p> @@ -96,12 +96,12 @@ document.querySelector('div').style.cssText = 'display:none;';</pre> <p>Vous pouvez autoriser les styles embarqués en spécifiant la valeur <code>'unsafe-inline'</code>, des nonces ou des hashs correspondant à la feuille de style.</p> -<pre class="brush: bash notranslate">Content-Security-Policy: style-src 'unsafe-inline'; +<pre class="brush: bash">Content-Security-Policy: style-src 'unsafe-inline'; </pre> <p>Cette directive CSP autorisera toutes les feuilles de styles embarquées telles que l'élément {{HTMLElement("style")}} et l'attribut <code>style</code> sur tous les éléments :</p> -<pre class="brush: html notranslate"><style> +<pre class="brush: html"><style> #inline-style { background: red; } </style> @@ -110,21 +110,21 @@ document.querySelector('div').style.cssText = 'display:none;';</pre> <p>Vous pouvez aussi utiliser un nonce pour autoriser spécifiquement certains éléments {{HTMLElement("style")}} :</p> -<pre class="brush: bash notranslate">Content-Security-Policy: style-src 'nonce-2726c7f26c'</pre> +<pre class="brush: bash">Content-Security-Policy: style-src 'nonce-2726c7f26c'</pre> <p>Vous devrez alors définir ce nonce sur l'élément {{HTMLElement("style")}} :</p> -<pre class="brush: html notranslate"><style nonce="2726c7f26c"> +<pre class="brush: html"><style nonce="2726c7f26c"> #inline-style { background: red; } </style></pre> <p>Autrement, vous pourrez créer des hashs à partir de vos feuilles de styles. CSP accepte les algorithmes sha256, sha384 et sha512.</p> -<pre class="brush: bash notranslate">Content-Security-Policy: style-src 'sha256-a330698cbe9dc4ef1fb12e2ee9fc06d5d14300262fa4dc5878103ab7347e158f'</pre> +<pre class="brush: bash">Content-Security-Policy: style-src 'sha256-a330698cbe9dc4ef1fb12e2ee9fc06d5d14300262fa4dc5878103ab7347e158f'</pre> <p>Lors de la génération du hash, vous ne devez pas inclure les balises et tenir compte de la casse et des caractères blancs (espaces, retours à la ligne, etc.).</p> -<pre class="brush: html notranslate"><style>#inline-style { background: red; }</style></pre> +<pre class="brush: html"><style>#inline-style { background: red; }</style></pre> <h3 id="Style_non_fiables">Style non fiables</h3> diff --git a/files/fr/web/http/headers/content-security-policy/trusted-types/index.html b/files/fr/web/http/headers/content-security-policy/trusted-types/index.html index 447823ede5..f1c5d12b6d 100644 --- a/files/fr/web/http/headers/content-security-policy/trusted-types/index.html +++ b/files/fr/web/http/headers/content-security-policy/trusted-types/index.html @@ -14,13 +14,13 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/trusted-types --- <div>{{HTTPSidebar}}</div> -<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>trusted-types</strong></code> {{experimental_inline}} informe l'agent utilisateur qu'il faut restreindre la création de règles Trusted Types (fonctions qui créent des valeurs typées non <span>falsifiables, dans le but de les passer au puits XSS du DOM au lieu de chaines de caractères).</span></p> +<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>trusted-types</strong></code> {{experimental_inline}} informe l'agent utilisateur qu'il faut restreindre la création de règles Trusted Types (fonctions qui créent des valeurs typées non falsifiables, dans le but de les passer au puits XSS du DOM au lieu de chaines de caractères).</p> -<p><span>Conjointement à la directive <code><strong><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/require-trusted-types-for">require-trusted-types-for</a></strong></code>, cette directive permet aux auteurs de définir des règles empêchant d'injecter des données dans le</span><span> DOM et donc de réduire la fenêtre de tir pour les attaques XSS sur le DOM à quelques pans isolés de la base de code d'une application, facilitant donc son contrôle et sa relecture.</span> Cette directive déclare une liste de permissions de noms de règles de Trusted Types créée avec <code>TrustedTypes.createPolicy</code> à partir de l'API Trusted Types.</p> +<p>Conjointement à la directive <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/require-trusted-types-for"><code>require-trusted-types-for</code></a>, cette directive permet aux auteurs de définir des règles empêchant d'injecter des données dans le DOM et donc de réduire la fenêtre de tir pour les attaques XSS sur le DOM à quelques pans isolés de la base de code d'une application, facilitant donc son contrôle et sa relecture. Cette directive déclare une liste de permissions de noms de règles de Trusted Types créée avec <code>TrustedTypes.createPolicy</code> à partir de l'API Trusted Types.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="notranslate">Content-Security-Policy: trusted-types; +<pre>Content-Security-Policy: trusted-types; Content-Security-Policy: trusted-types 'none'; Content-Security-Policy: trusted-types <policyName>; Content-Security-Policy: trusted-types <policyName> <policyName> 'allow-duplicates'; @@ -39,11 +39,11 @@ Content-Security-Policy: trusted-types <policyName> <policyName> 'al <p>Soit l'en-tête CSP :</p> -<pre class="notranslate">Content-Security-Policy: trusted-types foo bar 'allow-duplicates';</pre> +<pre>Content-Security-Policy: trusted-types foo bar 'allow-duplicates';</pre> <p>Ce code génèrera une erreur car une des règles créées a un nom non autorisé :</p> -<pre class="brush: js notranslate">if (typeof trustedTypes !== 'undefined') { +<pre class="brush: js">if (typeof trustedTypes !== 'undefined') { const policyFoo = trustedTypes.createPolicy('foo', {}); const policyFoo2 = trustedTypes.createPolicy('foo', {}); const policyBaz = trustedTypes.createPolicy('baz', {}); // Throws and dispatches a SecurityPolicyViolationEvent. diff --git a/files/fr/web/http/headers/content-security-policy/upgrade-insecure-requests/index.html b/files/fr/web/http/headers/content-security-policy/upgrade-insecure-requests/index.html index fd0c579403..3b0defb999 100644 --- a/files/fr/web/http/headers/content-security-policy/upgrade-insecure-requests/index.html +++ b/files/fr/web/http/headers/content-security-policy/upgrade-insecure-requests/index.html @@ -19,45 +19,47 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-reques <p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>upgrade-insecure-requests</strong></code> informe l'agent utilisateur de traiter toutes les URL non sécurisées d'un site (servies avec HTTP) comme si elles avaient été remplacées par des URL sécurisées (servies avec HTTPS). Cette directive est prévue pour les sites web ayant un grand nombre d'URL non sécurisées héritées du passé et qui ont besoin d'être récrites.</p> -<p class="note">La directive <code>upgrade-insecure-requests</code> est évaluée avant la directive {{CSP("block-all-mixed-content")}} et si cette elle est définie, cette dernière est effectivement ignorée. Il est recommendé de ne définir que l'une des deux directives mais non les deux, à moins que vous souhaitiez forcer HTTPS sur les anciens navigateurs qui ne le font pas après une redirection vers HTTP.</p> +<div class="notecard note"> + <p><strong>Note :</strong> La directive <code>upgrade-insecure-requests</code> est évaluée avant la directive {{CSP("block-all-mixed-content")}} et si cette elle est définie, cette dernière est effectivement ignorée. Il est recommendé de ne définir que l'une des deux directives mais non les deux, à moins que vous souhaitiez forcer HTTPS sur les anciens navigateurs qui ne le font pas après une redirection vers HTTP.</p> +</div> <p>The <code>upgrade-insecure-requests</code> directive will not ensure that users visiting your site via links on third-party sites will be upgraded to HTTPS for the top-level navigation and thus does not replace the {{HTTPHeader("Strict-Transport-Security")}} ({{Glossary("HSTS")}}) header, which should still be set with an appropriate <code>max-age</code> to ensure that users are not subject to SSL stripping attacks.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">Content-Security-Policy: upgrade-insecure-requests;</pre> +<pre class="syntaxbox">Content-Security-Policy: upgrade-insecure-requests;</pre> <h2 id="Exemples">Exemples</h2> <p>Soit cet en-tête CSP :</p> -<pre class="notranslate">Content-Security-Policy: upgrade-insecure-requests; +<pre>Content-Security-Policy: upgrade-insecure-requests; </pre> <p>Et cette balise meta :</p> -<pre class="brush: html notranslate"><meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"></pre> +<pre class="brush: html"><meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"></pre> <p>Avec cet en-tête défini sur le domaine example.com voulant migrer d'HTTP à HTTPS, les requêtes pour des ressources non sécurisées et non navigationnelles sont automatiquement converties (qu'elles soient internes ou externes).</p> -<pre class="brush: html notranslate"><img src="http://example.com/image.png"> +<pre class="brush: html"><img src="http://example.com/image.png"> <img src="http://not-example.com/image.png"></pre> <p>Ces URL seront récrites avant que la requête soit envoyée, signifiant qu'aucune requête non sécurisée ne sera envoyée. Notez que si la ressource demandée n'est pas actuellement disponible via HTTPS, la requête échouera sans se rabattre sur HTTP.</p> -<pre class="brush: html notranslate"><img src="https://example.com/image.png"> +<pre class="brush: html"><img src="https://example.com/image.png"> <img src="https://not-example.com/image.png"></pre> <p>Les conversions navigationnelles vers des ressources externes amènent un risque significatif de dysfonctionnement étant donné que des requêtes peuvent n'être pas converties, par exemple celles-ci :</p> -<pre class="brush: html notranslate"><a href="https://example.com/">Home</a> +<pre class="brush: html"><a href="https://example.com/">Home</a> <a href="http://not-example.com/">Home</a></pre> <h3 id="Identifier_des_requêtes_non_sécurisées">Identifier des requêtes non sécurisées</h3> <p>À l'aide de l'en-tête {{HTTPHeader("Content-Security-Policy-Report-Only")}} et de la directive {{CSP("report-uri")}}, vous pouvez mettre en place une stratégie de rapportage de violations sans bloquage conjointement à une stratégie de conversion comme :</p> -<pre class="notranslate">Content-Security-Policy: upgrade-insecure-requests; default-src https: +<pre>Content-Security-Policy: upgrade-insecure-requests; default-src https: Content-Security-Policy-Report-Only: default-src https:; report-uri /endpoint</pre> <p>De cette manière, vous convertirez toujours les requêtes non sécurisées sur votre site sécurisé mais la stratégie de rapportage identifiera les requêtes non sécurisées et les rapportera à l'adresse fournie.</p> diff --git a/files/fr/web/http/headers/content-security-policy/worker-src/index.html b/files/fr/web/http/headers/content-security-policy/worker-src/index.html index 5854d16fc7..fd9ee4f21f 100644 --- a/files/fr/web/http/headers/content-security-policy/worker-src/index.html +++ b/files/fr/web/http/headers/content-security-policy/worker-src/index.html @@ -42,7 +42,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/worker-src <p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: worker-src <source>; +<pre class="syntaxbox">Content-Security-Policy: worker-src <source>; Content-Security-Policy: worker-src <source> <source>; </pre> @@ -56,11 +56,11 @@ Content-Security-Policy: worker-src <source> <source>; <p>Soit cet en-tête CSP :</p> -<pre class="brush: bash notranslate">Content-Security-Policy: worker-src https://example.com/</pre> +<pre class="brush: bash">Content-Security-Policy: worker-src https://example.com/</pre> <p>{{domxref("Worker")}}, {{domxref("SharedWorker")}} et {{domxref("ServiceWorker")}} seront bloqués et ne se chargeront pas :</p> -<pre class="brush: html notranslate"><script> +<pre class="brush: html"><script> var blockedWorker = new Worker("data:application/javascript,..."); blockedWorker = new SharedWorker("https://not-example.com/"); navigator.serviceWorker.register('https://not-example.com/sw.js'); diff --git a/files/fr/web/http/headers/feature-policy/accelerometer/index.html b/files/fr/web/http/headers/feature-policy/accelerometer/index.html index 370adce84c..20d123a97b 100644 --- a/files/fr/web/http/headers/feature-policy/accelerometer/index.html +++ b/files/fr/web/http/headers/feature-policy/accelerometer/index.html @@ -16,7 +16,7 @@ translation_of: Web/HTTP/Headers/Feature-Policy/accelerometer <h2 id="Syntaxe">Syntaxe</h2> -<pre class="notranslate">Feature-Policy: accelerometer <listePermissions>;</pre> +<pre>Feature-Policy: accelerometer <listePermissions>;</pre> <dl> <dt><listePermissions></dt> diff --git a/files/fr/web/http/headers/feature-policy/index.html b/files/fr/web/http/headers/feature-policy/index.html index 597355cd84..355056996d 100644 --- a/files/fr/web/http/headers/feature-policy/index.html +++ b/files/fr/web/http/headers/feature-policy/index.html @@ -16,10 +16,10 @@ translation_of: Web/HTTP/Headers/Feature-Policy --- <div>{{HTTPSidebar}}</div> -<p><span class="seoSummary">L'en-tête HTTP <strong><code>Feature-Policy</code></strong> est un mécanisme permettant de permettre ou d'interdire l'utilisation de fonctionnalités du navigateur dans son propre cadre et dans ceux de tous les éléments {{HTMLElement("iframe")}} que le document contient.</span></p> +<p>L'en-tête HTTP <strong><code>Feature-Policy</code></strong> est un mécanisme permettant de permettre ou d'interdire l'utilisation de fonctionnalités du navigateur dans son propre cadre et dans ceux de tous les éléments {{HTMLElement("iframe")}} que le document contient.</p> <div class="note"> -<p>Cet en-tête est toujours au stade expérimental, et est sujet à être modifié à tout moment. Méfiez-vous en si vous souhaitez l'implanter sur vos sites. Il a maintenant été renommé <code>Permissions-Policy</code> dans la spécification, et cet article sera mis à jour pour refléter ce changement.</p> +<p><strong>Note :</strong> Cet en-tête est toujours au stade expérimental, et est sujet à être modifié à tout moment. Méfiez-vous en si vous souhaitez l'implanter sur vos sites. Il a maintenant été renommé <code>Permissions-Policy</code> dans la spécification, et cet article sera mis à jour pour refléter ce changement.</p> </div> <p>Pour plus d'informations, vour l'article principal sur <a href="/docs/Web/HTTP/Feature_Policy">Feature Policy</a>.</p> @@ -39,7 +39,7 @@ translation_of: Web/HTTP/Headers/Feature-Policy <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">Feature-Policy: <directive> <allowlist></pre> +<pre class="syntaxbox">Feature-Policy: <directive> <allowlist></pre> <dl> <dt><code><directive></code></dt> @@ -126,7 +126,7 @@ translation_of: Web/HTTP/Headers/Feature-Policy <p>SecureCorp Inc. souhaite désactiver les API du microphone et de géolocalisation dans son application. Elle peut le faire en délivrant l'en-tête de réponse HTTP suivant pour définir une réglementation des fonctionnalités :</p> -<pre class="notranslate">Feature-Policy: microphone 'none'; geolocation 'none'</pre> +<pre>Feature-Policy: microphone 'none'; geolocation 'none'</pre> <p>En spécifiant la valeur <code>'none'</code> pour liste des origines, les fonctionnalités auquel la valeur est appliquée seront désactivées pour tous les contextes de navigation (incluant tout les cadres <code><iframe></code>), quelle que soit leur origine.</p> diff --git a/files/fr/web/http/headers/index.html b/files/fr/web/http/headers/index.html index 95bcc91ab5..3233fecdb2 100644 --- a/files/fr/web/http/headers/index.html +++ b/files/fr/web/http/headers/index.html @@ -83,13 +83,13 @@ translation_of: Web/HTTP/Headers <dl> <dt>{{HTTPHeader("Accept-CH")}} {{experimental_inline}}</dt> - <dd>les serveurs peuvent informer de leur niveau de support pour les Client Hints en utilisant l'en-tête <code>Accept-CH</code> ou en HTML avec l'élément <code><meta></code> ayant l'attribut <code>http-equiv</code> (<a href="https://httpwg.org/http-extensions/client-hints.html#HTML5"><cite>[HTML5]</cite></a>).</dd> + <dd>les serveurs peuvent informer de leur niveau de support pour les Client Hints en utilisant l'en-tête <code>Accept-CH</code> ou en HTML avec l'élément <code><meta></code> ayant l'attribut <code>http-equiv</code> (<a href="https://httpwg.org/http-extensions/client-hints.html#HTML5">[HTML5]</a>).</dd> <dt>{{HTTPHeader("Accept-CH-Lifetime")}} {{experimental_inline}}</dt> - <dd>les serveurs peuvent demander au client de mémoriser l'ensemble des Client Hints que le serveur supporte pour une période de temps donnée, afin de permettre la livraison de Client Hints sur les requêtes suivantes vers l'origine du serveur (<a href="https://httpwg.org/http-extensions/client-hints.html#RFC6454"><cite>[RFC6454]</cite></a>).</dd> + <dd>les serveurs peuvent demander au client de mémoriser l'ensemble des Client Hints que le serveur supporte pour une période de temps donnée, afin de permettre la livraison de Client Hints sur les requêtes suivantes vers l'origine du serveur (<a href="https://httpwg.org/http-extensions/client-hints.html#RFC6454">[RFC6454]</a>).</dd> <dt>{{HTTPHeader("Content-DPR")}} {{experimental_inline}}</dt> <dd>un nombre indiquant le rapport entre le nombre de pixels physiques et le nombre de pixels CSS de l'image réponse sélectionnée.</dd> <dt>{{HTTPHeader("DPR")}} {{experimental_inline}}</dt> - <dd>un nombre indiquant le Device Pixel Ratio (DPR) actuel du client, qui est le rapport du nombre de pixels physiques sur le nombre de pixels CSS (Section 5.2 of <a href="https://httpwg.org/http-extensions/client-hints.html#CSSVAL"><cite>[CSSVAL]</cite></a>) de la zone d'affichage (Section 9.1.1 of <a href="https://httpwg.org/http-extensions/client-hints.html#CSS2"><cite>[CSS2]</cite></a>) sur l'appareil.</dd> + <dd>un nombre indiquant le Device Pixel Ratio (DPR) actuel du client, qui est le rapport du nombre de pixels physiques sur le nombre de pixels CSS (Section 5.2 of <a href="https://httpwg.org/http-extensions/client-hints.html#CSSVAL">[CSSVAL]</a>) de la zone d'affichage (Section 9.1.1 of <a href="https://httpwg.org/http-extensions/client-hints.html#CSS2">[CSS2]</a>) sur l'appareil.</dd> <dt>{{HTTPHeader("Device-Memory")}} {{experimental_inline}}</dt> <dd>faisant techniquement partie de l'API Device Memory, cet en-tête représente la quantité approximative de mémoire vive dont le client dispose.</dd> <dt>{{HTTPHeader("Early-Data")}} {{experimental_inline}}</dt> @@ -97,11 +97,9 @@ translation_of: Web/HTTP/Headers <dt>{{HTTPHeader("Save-Data")}} {{experimental_inline}}</dt> <dd>booléen indiquant les préférences de l'agent utilisateur pour réduire la quantité de données transmises.</dd> <dt>{{HTTPHeader("Viewport-Width")}} {{experimental_inline}}</dt> - <dd>la largeur de la zone d'affichage, soit le nombre de pixels CSS. La valeur fournise est arrondie au plus grand proche supérieur.</dd> - <dd>Si <code>Viewport-Width</code> apparait dans un message plus d'une fois, la dernière valeur écrase toutes les valeurs précédentes.</dd> + <dd>la largeur de la zone d'affichage, soit le nombre de pixels CSS. La valeur fournise est arrondie au plus grand proche supérieur. Si <code>Viewport-Width</code> apparait dans un message plus d'une fois, la dernière valeur écrase toutes les valeurs précédentes.</dd> <dt>{{HTTPHeader("Width")}} {{experimental_inline}}</dt> - <dd>l'en-tête de requête <code>Width</code> représente la largeur de la ressource voulue en nombre de pixels physiques. La valeur fournise est arrondie au plus proche entier supérieur.</dd> - <dd>Si la largeur de la ressource voulue est inconnue quand la requête ou la ressource n'a pas de largeur d'affichage, l'en-tête <code>Width</code> peut être omise. Si <code>Width</code> apparait dans un message plus d'une fois, la dernière valeur écrase toutes les valeurs précédentes.</dd> + <dd>l'en-tête de requête <code>Width</code> représente la largeur de la ressource voulue en nombre de pixels physiques. La valeur fournise est arrondie au plus proche entier supérieur. Si la largeur de la ressource voulue est inconnue quand la requête ou la ressource n'a pas de largeur d'affichage, l'en-tête <code>Width</code> peut être omise. Si <code>Width</code> apparait dans un message plus d'une fois, la dernière valeur écrase toutes les valeurs précédentes.</dd> </dl> <h2 id="Conditionnels">Conditionnels</h2> diff --git a/files/fr/web/http/headers/location/index.html b/files/fr/web/http/headers/location/index.html index ce0c29f00f..2a6447e69e 100644 --- a/files/fr/web/http/headers/location/index.html +++ b/files/fr/web/http/headers/location/index.html @@ -35,7 +35,7 @@ translation_of: Web/HTTP/Headers/Location <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">Location: <url> +<pre class="syntaxbox">Location: <url> </pre> <h2 id="Directives">Directives</h2> @@ -47,7 +47,7 @@ translation_of: Web/HTTP/Headers/Location <h2 id="Exemples">Exemples</h2> -<pre class="notranslate">Location: /index.html</pre> +<pre>Location: /index.html</pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/http/headers/referer/index.html b/files/fr/web/http/headers/referer/index.html index 085e7602c5..17a4b3cbd9 100644 --- a/files/fr/web/http/headers/referer/index.html +++ b/files/fr/web/http/headers/referer/index.html @@ -14,7 +14,7 @@ translation_of: Web/HTTP/Headers/Referer <p>L'en-tête de requête <code><strong>Referer</strong></code> contient l'adresse de la page web précédente à partir de laquelle un lien a été suivi pour demander la page courante. L'en-tête <code>Referer</code> permet aux serveurs d'identifier la provenance des visiteurs d'une page et cette information peut être utilisée à des fins d'analyse, de journalisation ou pour améliorer la politique de cache par exemple.</p> <div class="warning"> -<p><strong>Important </strong>: Bien que cet en-tête puisse être utilisé à de nombreuses fins légitimes, il peut avoir des effets indésirables sur la sécurité et la vie privée. Voir la page <a href="fr/docs/Web/Security/Referer_header:_privacy_and_security_concerns">Questions de sécurité et de vie privée : quid de l'en-tête <code>referer</code></a> pour plus d'informations et des méthodes d'atténuation.</p> +<p><strong>Attention :</strong> Bien que cet en-tête puisse être utilisé à de nombreuses fins légitimes, il peut avoir des effets indésirables sur la sécurité et la vie privée. Voir la page <a href="fr/docs/Web/Security/Referer_header:_privacy_and_security_concerns">Questions de sécurité et de vie privée : quid de l'en-tête <code>referer</code></a> pour plus d'informations et des méthodes d'atténuation.</p> </div> <p>Note : le terme <code>referer</code> est orthographié ainsi bien qu'il s'agisse d'une erreur à partir du mot anglais "<em>referrer</em>". Voir {{interwiki("wikipedia", "HTTP_referer", "L'en-tête <code>referer</code> HTTP sur Wikipédia")}} pour plus de détails.</p> diff --git a/files/fr/web/http/headers/referrer-policy/index.html b/files/fr/web/http/headers/referrer-policy/index.html index b439879863..0020ea23fb 100644 --- a/files/fr/web/http/headers/referrer-policy/index.html +++ b/files/fr/web/http/headers/referrer-policy/index.html @@ -16,7 +16,7 @@ translation_of: Web/HTTP/Headers/Referrer-Policy --- <div>{{HTTPSidebar}}</div> -<p><span class="seoSummary">L'en-tête {{glossary("HTTP header")}} <strong><code>Referrer-Policy</code></strong> contrôle la quantité d'<a href="/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns">informations sur le référent (referrer)</a> (envoyées par l'en-tête {{HTTPHeader("Referer")}}) incluses dans la requête.</span></p> +<p>L'en-tête {{glossary("HTTP header")}} <strong><code>Referrer-Policy</code></strong> contrôle la quantité d'<a href="/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns">informations sur le référent (referrer)</a> (envoyées par l'en-tête {{HTTPHeader("Referer")}}) incluses dans la requête.</p> <table class="properties"> <tbody> @@ -33,11 +33,11 @@ translation_of: Web/HTTP/Headers/Referrer-Policy <h2 id="Syntaxe">Syntaxe</h2> -<div class="blockIndicator note"> -<p>Le nom originel de l'en-tête, {{HTTPHeader("Referer")}}, est une faute de frappe du mot anglais "referrer". L'en-tête <code>Referrer-Policy</code> ne comporte pas cette erreur.</p> +<div class="note"> +<p><strong>Note :</strong> Le nom originel de l'en-tête, {{HTTPHeader("Referer")}}, est une faute de frappe du mot anglais "referrer". L'en-tête <code>Referrer-Policy</code> ne comporte pas cette erreur.</p> </div> -<pre class="syntaxbox notranslate">Referrer-Policy: no-referrer +<pre class="syntaxbox">Referrer-Policy: no-referrer Referrer-Policy: no-referrer-when-downgrade Referrer-Policy: origin Referrer-Policy: origin-when-cross-origin @@ -54,7 +54,9 @@ Referrer-Policy: unsafe-url <dd>L'en-tête {{HTTPHeader("Referer")}} sera entièrement omis. Aucune information sur le référent ne sera envoyée avec les requêtes.</dd> <dt><code>no-referrer-when-downgrade</code> (default)</dt> <dd>C'est le comportement par défaut si aucune valeur n'est spécifiée ou quelle celle donnée est invalide. L'{{glossary("origin")}}, le {{glossary("path")}}, et la {{glossary("querystring")}} de l'URL sont envoyés comme référent quand le niveau de sécurité du protocole reste le même (HTTP vers HTTP, HTTPS vers HTTPS) ou s'améliore (HTTP vers HTTPS) mais ne sont pas envoyés quand si la destination est moins sécurisée (HTTPS vers HTTP). - <div class="note">Les navigateurs tentent d'adopter une valeur par défaut plus stricte, précisément <code>strict-origin-when-cross-origin</code> (voir <a href="https://github.com/whatwg/fetch/pull/952">https://github.com/whatwg/fetch/pull/952</a>), envisagez d'utiliser cette valeur (ou une autre encore plus stricte) si possible si vous définissez la valeur de Referrer-Policy.</div> + <div class="note"> + <p><strong>Note :</strong> Les navigateurs tentent d'adopter une valeur par défaut plus stricte, précisément <code>strict-origin-when-cross-origin</code> (voir <a href="https://github.com/whatwg/fetch/pull/952">https://github.com/whatwg/fetch/pull/952</a>), envisagez d'utiliser cette valeur (ou une autre encore plus stricte) si possible si vous définissez la valeur de Referrer-Policy.</p> + </div> </dd> <dt><code>origin</code></dt> <dd>N'envoie que l'{{glossary("origin")}} du document comme référent.<br> @@ -69,8 +71,8 @@ Referrer-Policy: unsafe-url <dd>Envoie l'origine, le chemin et les paramètres de requête pour les requêtes de même origine, n'envoie que l'origine quand le niveau de sécurité du protocole reste le même pour les requêtes vers des adresses externes (HTTPS vers HTTPS) et n'envoie rien si la destination est moins sécurisée (HTTPS vers HTTP).</dd> <dt><code>unsafe-url</code></dt> <dd>Envoie l'origine, le chemin et les paramètres de requête pour toutes les requêtes sans tenir compte du niveau de sécurité. - <div class="blockIndicator warning"> - <p>Cette valeur divulgera des informations potentiellement confidentielles de la part des URL de ressources HTTPS vers des origines non sécurisées. Considérez les conséquences de ce paramétrage avant de vous en servir.</p> + <div class="warning"> + <p><strong>Attention :</strong> Cette valeur divulgera des informations potentiellement confidentielles de la part des URL de ressources HTTPS vers des origines non sécurisées. Considérez les conséquences de ce paramétrage avant de vous en servir.</p> </div> </dd> </dl> @@ -79,18 +81,18 @@ Referrer-Policy: unsafe-url <p>Vous pouvez aussi définir des règles de référent au sein d'HTML. Par exemple, vous pouvez définir la règle de référent pour le document entier avec un élément {{HTMLElement("meta")}} dont le <a href="/en-US/docs/Web/HTML/Element/meta#attr-name">name</a> est <code>referrer</code> :</p> -<pre class="brush: html notranslate"><meta name="referrer" content="origin"></pre> +<pre class="brush: html"><meta name="referrer" content="origin"></pre> <p>Ou le définit pour des requêtes spécifiques avec l'attribut <code>referrerpolicy</code> sur les éléments {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("img")}}, {{HTMLElement("iframe")}}, {{HTMLElement("script")}}, ou {{HTMLElement("link")}} :</p> -<pre class="brush: html notranslate"><a href="http://example.com" referrerpolicy="origin"></pre> +<pre class="brush: html"><a href="http://example.com" referrerpolicy="origin"></pre> <p>Autrement, une <a href="/en-US/docs/Web/HTML/Link_types">relation de lien</a> définie à <code>noreferrer</code> sur un élément <code>a</code>, <code>area</code>, ou <code>link</code> peut être défini :</p> -<pre class="brush: html notranslate"><a href="http://example.com" rel="noreferrer"></pre> +<pre class="brush: html"><a href="http://example.com" rel="noreferrer"></pre> -<div class="blockIndicator warning"> -<p>Comme vu précédemment, la relation de lien <code>noreferrer</code> s'écrit sans trait d'union. Toutefois, quand la règle de référent est spécifiée pour le document entier avec un élément {{HTMLElement("meta")}}, il faut mettre le trait d'union : <code><meta name="referrer" content="no-referrer"></code>.</p> +<div class="warning"> +<p><strong>Attention :</strong> Comme vu précédemment, la relation de lien <code>noreferrer</code> s'écrit sans trait d'union. Toutefois, quand la règle de référent est spécifiée pour le document entier avec un élément {{HTMLElement("meta")}}, il faut mettre le trait d'union : <code><meta name="referrer" content="no-referrer"></code>.</p> </div> <h2 id="Intégration_avec_CSS">Intégration avec CSS</h2> @@ -206,11 +208,13 @@ Referrer-Policy: unsafe-url <p>Si vous voulez spécifier une règle à appliquer par défaut dans les où la règle voulue n'est pas supportée par les navigateurs, utilisez un liste de valeurs séparées par des virgules avec la règle voulue fournie en dernière position :</p> -<pre class="notranslate">Referrer-Policy: no-referrer, strict-origin-when-cross-origin</pre> +<pre>Referrer-Policy: no-referrer, strict-origin-when-cross-origin</pre> <p>Ici, <code>no-referrer</code> ne sera utilisée que si <code>strict-origin-when-cross-origin</code> n'est pas supportée par le navigateur.</p> -<p class="note">Spécifier plusieurs valeurs n'est supporté que dans l'en-tête HTTP <code>Referrer-Policy</code> et non dans l'attribut <code>referrerpolicy</code>.</p> +<div class="notecard note"> + <p><strong>Note :</strong> Spécifier plusieurs valeurs n'est supporté que dans l'en-tête HTTP <code>Referrer-Policy</code> et non dans l'attribut <code>referrerpolicy</code>.</p> +</div> <h2 id="Spécifications">Spécifications</h2> @@ -234,8 +238,9 @@ Referrer-Policy: unsafe-url <p>{{Compat("http.headers.Referrer-Policy")}}</p> <div class="note"> + <p><strong>Note :</strong></p> <ul> - <li>Version 53 et plus, Gecko offre la possibilité aux utilisateurs de définir leur valeur par défaut de <code>Referrer-Policy</code> dans <code>about:config</code>, l'option s'appelant <span class="quote"> <code>network.http.referer.userControlPolicy</code>.</span></li> + <li>Version 53 et plus, Gecko offre la possibilité aux utilisateurs de définir leur valeur par défaut de <code>Referrer-Policy</code> dans <code>about:config</code>, l'option s'appelant <code>network.http.referer.userControlPolicy</code>.</li> <li>Version 59 et plus (Voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=587523">#587523</a>), il a été remplacé par <code>network.http.referer.defaultPolicy</code> et <code>network.http.referer.defaultPolicy.pbmode</code>.</li> </ul> @@ -254,7 +259,7 @@ Referrer-Policy: unsafe-url <ul> <li>{{interwiki("wikipedia", "HTTP_referer", "HTTP referer on Wikipedia")}}</li> <li>En utilisant <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> : {{domxref("Request.referrerPolicy")}}</li> - <li>La directive obsolète {{HTTPHeader("Content-Security-Policy/referrer", "referrer")}} {{Obsolete_Inline}} de l'en-tête <span style="white-space: nowrap;">{{HTTPHeader("Content-Security-Policy")}}</span>.</li> + <li>La directive obsolète {{HTTPHeader("Content-Security-Policy/referrer", "referrer")}} {{Obsolete_Inline}} de l'en-tête {{HTTPHeader("Content-Security-Policy")}}.</li> <li><a href="/en-US/docs/Web/Security/Same-origin_policy">Same-origin policy</a></li> <li> <p><a href="https://blog.mozilla.org/security/2015/01/21/meta-referrer/">Tighter Control Over Your Referrers – Mozilla Security Blog</a></p> diff --git a/files/fr/web/http/headers/server/index.html b/files/fr/web/http/headers/server/index.html index d29601ba61..5aa0a27da7 100644 --- a/files/fr/web/http/headers/server/index.html +++ b/files/fr/web/http/headers/server/index.html @@ -14,7 +14,7 @@ original_slug: Web/HTTP/Headers/Serveur <p>Le paramètre d'entête <code><strong>Server</strong></code> contient des informations à propos du système (ou sous-système) en place sur le serveur qui s'occupe de la requête.</p> -<p><span id="result_box" lang="fr"><span>Il est préférable d'éviter les valeurs</span></span><span lang="fr"><span> excessivement longues et/ou détaillées : elles peuvent révéler des détails internes qui pourraient rendre (un peu) plus facile une attaque et l'exploitation d'une éventuelle faille de sécurité.</span></span></p> +<p>Il est préférable d'éviter les valeurs excessivement longues et/ou détaillées : elles peuvent révéler des détails internes qui pourraient rendre (un peu) plus facile une attaque et l'exploitation d'une éventuelle faille de sécurité.</p> <table class="properties"> <tbody> @@ -38,7 +38,7 @@ original_slug: Web/HTTP/Headers/Serveur <dl> <dt><valeur></dt> - <dd><span id="result_box" lang="fr"><span>Le nom du système (ou sous-système) qui gère les requêtes.</span></span></dd> + <dd>Le nom du système (ou sous-système) qui gère les requêtes.</dd> </dl> <h2 id="Exemples">Exemples</h2> @@ -64,7 +64,7 @@ original_slug: Web/HTTP/Headers/Serveur <p>{{Compat("http.headers.Server")}}</p> -<h2 id="Voir_également"><span class="short_text" id="result_box" lang="fr"><span>Voir également</span></span></h2> +<h2 id="Voir_également">Voir également</h2> <ul> <li>{{HTTPHeader("Allow")}}</li> diff --git a/files/fr/web/http/headers/set-cookie/index.html b/files/fr/web/http/headers/set-cookie/index.html index 5326802c98..5208808eb7 100644 --- a/files/fr/web/http/headers/set-cookie/index.html +++ b/files/fr/web/http/headers/set-cookie/index.html @@ -12,11 +12,10 @@ translation_of: Web/HTTP/Headers/Set-Cookie --- <div>{{HTTPSidebar}}</div> -<p><span class="seoSummary">L'en-tête de réponse HTTP <strong><code>Set-Cookie</code></strong> est utilisé pour envoyer un cookie depuis le serveur à l'agent utilisateur afin qu'il puisse le renvoyer dans l'avenir.</span> Pour envoyer plusieurs cookies, on enverra plusieurs en-têtes <code>Set-Cookie</code> dans la même réponse.</p> +<p>L'en-tête de réponse HTTP <strong><code>Set-Cookie</code></strong> est utilisé pour envoyer un cookie depuis le serveur à l'agent utilisateur afin qu'il puisse le renvoyer dans l'avenir.</span> Pour envoyer plusieurs cookies, on enverra plusieurs en-têtes <code>Set-Cookie</code> dans la même réponse.</p> -<div class="notecard warning"> - <p><b>Avertissement :</b></p> - <p>Les navigateurs empêchent le code JavaScript <i>front-end</i> d'accéder à l'en-tête <code>Set-Cookie</code>, comme l'exige la spécification Fetch, qui définit <code>Set-Cookie</code> comme un <a href="https://fetch.spec.whatwg.org/#forbidden-response-header-name">nom d'en-tête de réponse interdit</a> qui <a href="https://fetch.spec.whatwg.org/#ref-for-forbidden-response-header-name%E2%91%A0">doit être filtré</a> de toute réponse exposée au code <i>front-end</i>.</p> +<div class="warning"> + <p><strong>Attention :</strong> Les navigateurs empêchent le code JavaScript <i>front-end</i> d'accéder à l'en-tête <code>Set-Cookie</code>, comme l'exige la spécification Fetch, qui définit <code>Set-Cookie</code> comme un <a href="https://fetch.spec.whatwg.org/#forbidden-response-header-name">nom d'en-tête de réponse interdit</a> qui <a href="https://fetch.spec.whatwg.org/#ref-for-forbidden-response-header-name%E2%91%A0">doit être filtré</a> de toute réponse exposée au code <i>front-end</i>.</p> </div> <p>Pour plus d'information, voir le <a href="/fr/docs/Web/HTTP/Cookies">guide sur les cookies HTTP</a>.</p> @@ -59,7 +58,7 @@ Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value> <dl> <dt><code><cookie-name>=<cookie-value></code></dt> - <dd>Un cookie commence par une paire nom-valeur: + <dd><p>Un cookie commence par une paire nom-valeur:</p> <ul> <li>Le nom porté par <code><cookie-name></code> peut-être composé de n'importe quels caractères ASCII, à l'exception des caractères de contrôle, d'espace, de tabulation et des caractères de séparation suivants : <code>( ) < > @ , ; : \ " / [ ] ? = { }</code>.</li> <li>La valeur, <code><cookie-value></code>, peut éventuellement être entourée de guillemets doubles et peut être composée de n'importe quel caractère ASCII à l'exception des caractères de contrôle, des blancs, des guillemets doubles, d'une virgule, d'un point-virgule ou d'une barre oblique inversée (<i>backslash</i>). <strong>Encodage</strong> : de nombreuses implémentations encodent les caractères d'URL (<i>URL-encoding</i>) bien que ce ne soit pas nécessaire selon la RFC. Une telle transformation facilite tout de même l'utilisation de caractères autorisés.</li> @@ -73,9 +72,8 @@ Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value> <p>Si non spécifié, le cookie devient un <strong>cookie de session</strong>. Une session finit quand le client s'arrête, les cookies de sessions sont alors supprimés à ce moment.</p> - <div class="notecard warning"> - <p><b>Attention :</b></p> - <p>Plusieurs navigateurs ont un système de récupération de session qui enregistre les onglets et les restaure quand le navigateur redémarre. Les cookies de session seront aussi restaurés comme si le navigateur ne s'était jamais arrêté.</p> + <div class="warning"> + <p><strong>Attention :</strong> Plusieurs navigateurs ont un système de récupération de session qui enregistre les onglets et les restaure quand le navigateur redémarre. Les cookies de session seront aussi restaurés comme si le navigateur ne s'était jamais arrêté.</p> </div> <p>Quand une telle date de péremption est indiquée, elle est relative au <em>client</em> et pas au serveur.</p> @@ -83,7 +81,7 @@ Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value> <dt><code>Max-Age=<number> </code>{{optional_inline}}</dt> <dd>Le nombre de secondes avant son expiration. Une valeur nulle ou négative fera expirer immédiatement le cookie. Si <code>Expires</code> et <code>Max-Age</code> sont configurés, <code>Max-Age</code> sera prioritaire.</dd> <dt><code>Domain=<domain-value></code> {{optional_inline}}</dt> - <dd>Le domaine où le cookie sera envoyé. + <dd><p>Le domaine où le cookie sera envoyé.</p> <ul> <li>Si omis, la valeur par défaut sera l'hôte de l'URL du document courant. Les sous-domaines ne seront pas inclus.</li> <li>Contrairement aux anciennes spécifications, le point au début dans les noms de domaines (<code>.example.com</code>) est ignoré.</li> @@ -91,18 +89,19 @@ Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value> </ul> </dd> <dt><code>Path=<path-value></code> {{optional_inline}}</dt> - <dd>Un chemin qui doit exister dans l'URL de la requête ou le navigateur n'enverra pas d'en-tête <code>Cookie</code> correspondante par la suite.</dd> - <dd>La barre oblique (<code>/</code>) est interprétée comme un séparateur de répertoire. Les sous-répertoires sont inclus, par exemple: pour <code>Path=/docs</code> les répertoires <code>/docs</code>, <code>/docs/Web/</code> et <code>/docs/Web/HTTP</code> sont concernés.</dd> - <dt id="secure"><code>Secure</code> {{optional_inline}}</dt> - <dd>Un cookie sécurisé est envoyé uniquement si la requête est faite en <code>https:</code> (sauf pour <i>localhost</i>). Cependant des informations confidentielles ne devraient jamais être enregistrées dans un cookie classique, en effet le mécanique est non sécurisé et ne chiffre aucune information. - <p class="notecard note"><b>Note:</b> Les sites non sécurisés (<code>http:</code>) ne peuvent plus définir des cookies <code></code>Secure</code> désormais (depuis Chrome 52+ et Firefox 52+). Depuis Firefox 75, cette restriction ne s'applique pas pour <i>localhost</i>.</p> + <dd>Un chemin qui doit exister dans l'URL de la requête ou le navigateur n'enverra pas d'en-tête <code>Cookie</code> correspondante par la suite. La barre oblique (<code>/</code>) est interprétée comme un séparateur de répertoire. Les sous-répertoires sont inclus, par exemple: pour <code>Path=/docs</code> les répertoires <code>/docs</code>, <code>/docs/Web/</code> et <code>/docs/Web/HTTP</code> sont concernés.</dd> + <dt><code>Secure</code> {{optional_inline}}</dt> + <dd><p>Un cookie sécurisé est envoyé uniquement si la requête est faite en <code>https:</code> (sauf pour <i>localhost</i>). Cependant des informations confidentielles ne devraient jamais être enregistrées dans un cookie classique, en effet le mécanique est non sécurisé et ne chiffre aucune information.</p> + <div class="notecard note"> + <p><strong>Note :</strong> Les sites non sécurisés (<code>http:</code>) ne peuvent plus définir des cookies <code></code>Secure</code> désormais (depuis Chrome 52+ et Firefox 52+). Depuis Firefox 75, cette restriction ne s'applique pas pour <i>localhost</i>.</p> + </div> </dd> - <dt id="httponly"><code>HttpOnly</code> {{optional_inline}}</dt> + <dt><code>HttpOnly</code> {{optional_inline}}</dt> <dd>Empêche JavaScript d'accéder au cookie; par exemple, au travers de la propriété <a href="/fr/docs/Web/API/Document/cookie"><code>Document.cookie</code></a>, de l'API <a href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> ou de l'API <a href="/fr/docs/Web/API/Request"><code>Request</code></a>. Cela protège des attaques <em>cross-site scripting</em> (<a href="/fr/docs/Glossary/XSS">XSS</a>).</dd> - <dt id="samesite"><code>SameSite=<samesite-value></code> {{optional_inline}}</dt> - <dd>Contrôle si un cookie est envoyé avec les requêtes d'origine croisée, offrant ainsi une certaine protection contre les attaques de falsification de requêtes inter-sites (<a href="/fr/docs/Glossary/CSRF">CSRF</a>). + <dt><code>SameSite=<samesite-value></code> {{optional_inline}}</dt> + <dd><p>Contrôle si un cookie est envoyé avec les requêtes d'origine croisée, offrant ainsi une certaine protection contre les attaques de falsification de requêtes inter-sites (<a href="/fr/docs/Glossary/CSRF">CSRF</a>).</p> <div class="notecard note"> - <p>Les normes relatives aux <a href="/fr/docs/Web/HTTP/Headers/Set-Cookie/SameSite">Cookies SameSite</a> ont récemment changé de telle sorte que :</p> + <p><strong>Note :</strong> Les normes relatives aux <a href="/fr/docs/Web/HTTP/Headers/Set-Cookie/SameSite">Cookies SameSite</a> ont récemment changé de telle sorte que :</p> <ol> <li>Le comportement d'envoi des cookies si <code>SameSite</code> n'est pas spécifié est <code>SameSite=Lax</code>. Auparavant, le comportement par défaut était que les cookies étaient envoyés pour toutes les requêtes.</li> @@ -111,8 +110,7 @@ Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value> <p>Les options ci-dessous couvrent le nouveau comportement. Voir le tableau <a href="/fr/docs/Web/HTTP/Headers/Set-Cookie/SameSite#browser_compatibility">Compatibilité des navigateurs</a> pour des informations sur la mise en œuvre spécifique des navigateurs (lignes : « <code>SameSite</code> : Defaults to <code>Lax</code> » et « <code>SameSite</code> : Secure context required »).</p> </div> - Les options sont : - + <p>Les options sont :</p> <ul> <li><code>Strict</code> : le navigateur envoie le cookie uniquement pour les demandes provenant du même site (c'est-à-dire les demandes provenant du même site qui a défini le cookie). Si la demande provient d'une URL différente de l'URL actuelle, aucun cookie avec l'attribut <code>SameSite=Strict</code> n'est envoyé.</li> <li><code>Lax</code> : Le cookie n'est pas envoyé sur les requêtes inter-sites, telles que les appels pour charger des images ou des <i>iframes</i>, mais il est envoyé lorsqu'un utilisateur navigue vers le site d'origine à partir d'un site externe (par exemple, s'il suit un lien). C'est le comportement par défaut si l'attribut <code>SameSite</code> n'est pas spécifié.</li> @@ -157,9 +155,8 @@ Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value> <p>De plus, les cookies avec le préfixe <code>__Host-</code> doivent avoir un <code>path</code> qui vaut <code>/</code> (donc tous les chemins de l'hôte) et ne doivent pas avoir d'attribut <code>Domain</code>.</p> -<div class="notecard warning"> - <p><b>Attention :</b></p> - <p>Pour les clients qui n'implémentent pas les préfixes de cookies, vous ne pouvez pas compter sur ces contraintes, les cookies avec un préfixe seront toujours acceptés.</p> +<div class="warning"> + <p><strong>Attention :</strong> Pour les clients qui n'implémentent pas les préfixes de cookies, vous ne pouvez pas compter sur ces contraintes, les cookies avec un préfixe seront toujours acceptés.</p> </div> <pre>// Les deux sont acceptés s'ils viennent d'une origine sécurisée (HTTPS) diff --git a/files/fr/web/http/headers/set-cookie/samesite/index.html b/files/fr/web/http/headers/set-cookie/samesite/index.html index d2afa73ff4..1daba82b19 100644 --- a/files/fr/web/http/headers/set-cookie/samesite/index.html +++ b/files/fr/web/http/headers/set-cookie/samesite/index.html @@ -10,7 +10,7 @@ translation_of: Web/HTTP/Headers/Set-Cookie/SameSite --- <div>{{HTTPSidebar}}</div> -<p><span class="seoSummary">L'attribut <strong><code>SameSite</code></strong> de l'en-tête de réponse HTTP {{HTTPHeader("Set-Cookie")}} vous permet de déclarer si vos cookies doivent être restreints au site visité, à des tiers, ou à des sous-domaines du site actuel. </span></p> +<p>L'attribut <strong><code>SameSite</code></strong> de l'en-tête de réponse HTTP {{HTTPHeader("Set-Cookie")}} vous permet de déclarer si vos cookies doivent être restreints au site visité, à des tiers, ou à des sous-domaines du site actuel.</p> <h2 id="Valeurs">Valeurs</h2> @@ -45,11 +45,11 @@ translation_of: Web/HTTP/Headers/Set-Cookie/SameSite <p>Cet alerte apparaît dans les cas où des cookies requièrent l'attribut <code>SameSite=None</code> et ne sont pas marqués <code>Secure</code>, étant donc refusés par le navigateur.</p> -<pre class="example-bad notranslate">Set-Cookie: flavor=choco; SameSite=None</pre> +<pre class="example-bad">Set-Cookie: flavor=choco; SameSite=None</pre> <p>Pour corriger cette erreur, vous devez ajouter l'attribut <code>Secure</code> à vos cookies marqués avec l'attribut <code>SameSite=None</code>.</p> -<pre class="example-good notranslate">Set-Cookie: flavor=choco; SameSite=None; <strong>Secure</strong></pre> +<pre class="example-good">Set-Cookie: flavor=choco; SameSite=None; <strong>Secure</strong></pre> <p>Un cookie <code>Secure</code> ne sera envoyé au serveur que par le biais de requêtes utilisant le protocole HTTPS. Il est à noter que les sites non sécurisés (<code>http:</code>) ne peuvent pas être marqués <code>Secure</code>.</p> @@ -64,15 +64,15 @@ translation_of: Web/HTTP/Headers/Set-Cookie/SameSite <p>Cette alerte apparait car la stratégie de <code>SameSite</code> pour le cookie n'a pas été spécifiée explicitement :</p> -<pre class="example-bad notranslate">Set-Cookie: flavor=choco</pre> +<pre class="example-bad">Set-Cookie: flavor=choco</pre> <p>Même si vous pouvez compter sur la valeur par défaut <code>SameSite=Lax</code> des navigateurs récents, vous devriez tout de même spécifier la stratégie à appliquer pour ce cookie afin de communiquer clairement votre intention. Cela améliorera également l'expérience sur les autres navigateurs si ceux-ci n'utilisent pas encore la valeur par défaut <code>Lax</code>.</p> -<pre class="example-good notranslate">Set-Cookie: flavor=choco; <strong>SameSite=Lax</strong></pre> +<pre class="example-good">Set-Cookie: flavor=choco; <strong>SameSite=Lax</strong></pre> <h2 id="Exemples"><strong>Exemples</strong></h2> -<pre class="notranslate">RewriteEngine on +<pre>RewriteEngine on RewriteBase "/" RewriteCond "%{HTTP_HOST}" "^example\.org$" [NC] RewriteRule "^(.*)" "https://www.example.org/index.html" [R=301,L,QSA] diff --git a/files/fr/web/http/headers/tk/index.html b/files/fr/web/http/headers/tk/index.html index 6005638705..677741b57c 100644 --- a/files/fr/web/http/headers/tk/index.html +++ b/files/fr/web/http/headers/tk/index.html @@ -22,7 +22,7 @@ translation_of: Web/HTTP/Headers/Tk <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">Tk: ! (en construction) +<pre class="syntaxbox">Tk: ! (en construction) Tk: ? (dynamique) Tk: G (passerelle ou multiples parties) Tk: N (pas de suivi) @@ -60,7 +60,7 @@ Tk: U (mis à jour) <p>Un entête <code>Tk</code> pour une ressource qui prétend ne pas être suivie :</p> -<pre class="notranslate">Tk: N</pre> +<pre>Tk: N</pre> <h2 id="Specifications">Specifications</h2> diff --git a/files/fr/web/http/headers/trailer/index.html b/files/fr/web/http/headers/trailer/index.html index d1f23aebe0..d72dd82230 100644 --- a/files/fr/web/http/headers/trailer/index.html +++ b/files/fr/web/http/headers/trailer/index.html @@ -8,7 +8,7 @@ translation_of: Web/HTTP/Headers/Trailer <p>L'en-tête <strong>Trailer</strong> permet à l'expéditeur d'inclure des champs supplémentaires à la fin des blocs de messages pour fournir des métadonnées supplémentaires qui peuvent être générées de manière dynamique pendant que le corps du message sera envoyé, il peut s'agir de la vérification de l'intégrité du message, une signature numérique, ou encore un statut après le traitement.</p> <div class="note"> -<p>L'en-tête {{HTTPHeader("TE")}} de la requête devra être définie en tant que "trailers" pour autoriser les champs de type "trailer".</p> +<p><strong>Note :</strong> L'en-tête {{HTTPHeader("TE")}} de la requête devra être définie en tant que "trailers" pour autoriser les champs de type "trailer".</p> </div> <table class="properties"> @@ -83,7 +83,7 @@ Expires: Wed, 21 Oct 2015 07:28:00 GMT</pre> </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilités</h2> +<h2 id="Browser_compatibility">Compatibilités</h2> <p>{{Compat("http/headers/trailer")}}</p> diff --git a/files/fr/web/http/headers/vary/index.html b/files/fr/web/http/headers/vary/index.html index 9cacf3ee12..9686318de5 100644 --- a/files/fr/web/http/headers/vary/index.html +++ b/files/fr/web/http/headers/vary/index.html @@ -30,7 +30,7 @@ translation_of: Web/HTTP/Headers/Vary <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">Vary: * +<pre class="syntaxbox">Vary: * Vary: <header-name>, <header-name>, ... </pre> @@ -49,7 +49,7 @@ Vary: <header-name>, <header-name>, ... <p>Lorsque l'en-tête <code>Vary: User-Agent</code> est utilisée, les serveurs de cache doivent prendre en compte l'agent de l'utilisateur pour décider de servir la page depuis le cache ou non. Par exemple, si vous servez du contenu différent pour les utilisateurs sur mobile, il aide à éviter qu'une version ordinateur de votre site ne soit distribuée à un utilisateur sur mobile. Il peut aider google et d'autres moteurs de recherche à prendre en compte la version pour mobile d'un site, ainsi que de signaler que le <a href="https://en.wikipedia.org/wiki/Cloaking">Cloaking</a> n'est pas intentionel.</p> -<pre class="notranslate">Vary: User-Agent</pre> +<pre>Vary: User-Agent</pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/http/headers/x-content-type-options/index.html b/files/fr/web/http/headers/x-content-type-options/index.html index 3ece5740a7..cadeb86472 100644 --- a/files/fr/web/http/headers/x-content-type-options/index.html +++ b/files/fr/web/http/headers/x-content-type-options/index.html @@ -16,7 +16,9 @@ translation_of: Web/HTTP/Headers/X-Content-Type-Options <p>Les testeurs de sécurité du site s'attendent généralement à ce que cet en-tête soit défini.</p> -<p class="blockIndicator note">Note: <code>X-Content-Type-Options</code> ne s'appliquent qu'au <a href="https://fetch.spec.whatwg.org/#should-response-to-request-be-blocked-due-to-nosniff?">blocage des demandes par <code>nosniff</code></a> pour les <a href="https://fetch.spec.whatwg.org/#concept-request-destination">destinations de demandes</a> de "<code>script</code>" et "<code>style</code>". Il permet également le <a href="https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md#what-types-of-content-are-protected-by-corb">blocage en lecture croisé (CORB)</a> pour les fichiers HTML, TXT, JSON, et XML (à l'exception des images SVG <code>image/svg+xml</code>).</p> +<div class="note"> + <p><strong>Note :</strong> <code>X-Content-Type-Options</code> ne s'appliquent qu'au <a href="https://fetch.spec.whatwg.org/#should-response-to-request-be-blocked-due-to-nosniff?">blocage des demandes par <code>nosniff</code></a> pour les <a href="https://fetch.spec.whatwg.org/#concept-request-destination">destinations de demandes</a> de "<code>script</code>" et "<code>style</code>". Il permet également le <a href="https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md#what-types-of-content-are-protected-by-corb">blocage en lecture croisé (CORB)</a> pour les fichiers HTML, TXT, JSON, et XML (à l'exception des images SVG <code>image/svg+xml</code>).</p> +</div> <table class="properties"> <tbody> @@ -40,14 +42,12 @@ translation_of: Web/HTTP/Headers/X-Content-Type-Options <dl> <dt><code>nosniff</code></dt> - <br> - <dd>Bloque une requête si la destination de la requête est de type + <dd><p>Bloque une requête si la destination de la requête est de type</p> <ul> <li>"<code>style</code>" et le MIME n'est pas de type <code>text/css</code>, ou</li> <li>"<code>script</code>" et le MIME n'est pas de type <a href="https://html.spec.whatwg.org/multipage/scripting.html#javascript-mime-type">JavaScript MIME type</a></li> </ul> - </dd> - <dd>Permet le blocage de la lecture croisée pour les types MIME + <p>Permet le blocage de la lecture croisée pour les types MIME</p> <ul> <li><code>text/html</code></li> <li><code>text/plain</code></li> diff --git a/files/fr/web/http/headers/x-frame-options/index.html b/files/fr/web/http/headers/x-frame-options/index.html index 6569babd24..b47e3918b5 100644 --- a/files/fr/web/http/headers/x-frame-options/index.html +++ b/files/fr/web/http/headers/x-frame-options/index.html @@ -15,7 +15,7 @@ translation_of: Web/HTTP/Headers/X-Frame-Options <p>Ce complément de sécurité est uniquement valable lorsque l'utilisateur final visite le document avec un navigateur prenant en charge <code>X-Frame-Options</code>.</p> <div class="note"> -<p><strong>Note : </strong>L'en-tête {{HTTPHeader("Content-Security-Policy")}} possède une directive <code><a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors">frame-ancestors</a></code> qui <a href="https://www.w3.org/TR/CSP2/#frame-ancestors-and-frame-options">supplante</a> cet en-tête pour les navigateurs compatibles.</p> +<p><strong>Note :</strong> L'en-tête {{HTTPHeader("Content-Security-Policy")}} possède une directive <code><a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors">frame-ancestors</a></code> qui <a href="https://www.w3.org/TR/CSP2/#frame-ancestors-and-frame-options">supplante</a> cet en-tête pour les navigateurs compatibles.</p> </div> <table class="properties"> diff --git a/files/fr/web/http/link_prefetching_faq/index.html b/files/fr/web/http/link_prefetching_faq/index.html index a6f603701d..a2e02a0876 100644 --- a/files/fr/web/http/link_prefetching_faq/index.html +++ b/files/fr/web/http/link_prefetching_faq/index.html @@ -9,7 +9,7 @@ tags: translation_of: Web/HTTP/Link_prefetching_FAQ original_slug: Web/HTTP/FAQ_sur_le_préchargement_des_liens --- -<h3 id="Qu.E2.80.99est_ce_que_le_pr.C3.A9chargement_de_liens_.3F" name="Qu.E2.80.99est_ce_que_le_pr.C3.A9chargement_de_liens_.3F">Qu’est ce que le préchargement de liens ?</h3> +<h3 id="Qu.E2.80.99est_ce_que_le_pr.C3.A9chargement_de_liens_.3F">Qu’est ce que le préchargement de liens ?</h3> <p>Le préchargement de liens est un mécanisme du navigateur qui utilise le temps disponible du navigateur pour télécharger ou<em> précharger</em> les documents que les utilisateurs pourraient visiter juste après. Une page web fournit un ensemble de cibles à précharger au navigateur. Une fois que le navigateur a fini de charger la page, il commence, de façon transparente, à précharger les documents spécifiés et les emmagasine dans son cache. Quand l’utilisateur visite un de ces documents préchargés, il peut être ressorti rapidement du cache du navigateur.</p> @@ -17,7 +17,7 @@ original_slug: Web/HTTP/FAQ_sur_le_préchargement_des_liens <p>À partir de Gecko 1.9.1 (Firefox 3.5), le contenu HTTPS peut être préchargé.</p> -<h3 id="Quelles_sont_les_cibles_.C3.A0__pr.C3.A9charger_.3F" name="Quelles_sont_les_cibles_.C3.A0__pr.C3.A9charger_.3F">Quelles sont les cibles à précharger ?</h3> +<h3 id="Quelles_sont_les_cibles_.C3.A0__pr.C3.A9charger_.3F">Quelles sont les cibles à précharger ?</h3> <p>Le navigateur cherche soit une balise HTML <code>link</code>, soit un en-tête HTTP <code>Link:</code> avec un type de relation <code>next</code> ou <code>prefetch</code>. Ci-dessous, un exemple d’utilisation de la balise <code>link</code> :</p> @@ -36,7 +36,9 @@ original_slug: Web/HTTP/FAQ_sur_le_préchargement_des_liens <p>Le format pour l’en-tête <code>Link:</code>est décrit dans le <a class="external" href="http://tools.ietf.org/html/rfc2068">RFC 2068</a> section 19.6.2.4.</p> -<div class="note">Note : Nous avons intentionnellement pris pour référence une version dépassée de la spécification HTTP/1.1 car la plus récente <a class="external" href="http://tools.ietf.org/html/rfc2616">RFC 2616</a> ne décrit pas l’en-tête <code>Link:</code>. Bien que les en-têtes <code>Link:</code> ne fassent pas partie du standard révisé, ils sont toujours utilisés en pratique par les serveurs, pour renseigner les feuilles de styles CSS. Donc nous faisons usage de la même fonction ici.</div> +<div class="note"> + <p><strong>Note :</strong> Nous avons intentionnellement pris pour référence une version dépassée de la spécification HTTP/1.1 car la plus récente <a class="external" href="http://tools.ietf.org/html/rfc2616">RFC 2616</a> ne décrit pas l’en-tête <code>Link:</code>. Bien que les en-têtes <code>Link:</code> ne fassent pas partie du standard révisé, ils sont toujours utilisés en pratique par les serveurs, pour renseigner les feuilles de styles CSS. Donc nous faisons usage de la même fonction ici.</p> +</div> <p>Le navigateur surveille toutes ces cibles et met en attente chaque requête unique qui doit ensuite être préchargée quand le navigateur est disponible. Il peut y avoir de multiples cibles par page, ainsi on peut comprendre l'utilité de précharger de multiples documents. Par exemple, le document suivant peut contenir plusieurs images lourdes.</p> @@ -46,41 +48,41 @@ original_slug: Web/HTTP/FAQ_sur_le_préchargement_des_liens <link rel="next" href="2.html"> </pre> -<h3 id="Les_balises_ancres_.28.3Ca.3E.29_sont-elles_pr.C3.A9charg.C3.A9es_.3F" name="Les_balises_ancres_.28.3Ca.3E.29_sont-elles_pr.C3.A9charg.C3.A9es_.3F">Les balises ancres (<a>) sont-elles préchargées ?</h3> +<h3 id="Les_balises_ancres_.28.3Ca.3E.29_sont-elles_pr.C3.A9charg.C3.A9es_.3F">Les balises ancres (<a>) sont-elles préchargées ?</h3> <p>Non, seulement les balises <code><link></code> avec une relation de type <code>next</code> ou <code>prefetch</code> sont préchargées. Toutefois, si l'intérêt en est suffisant, on peut étendre le support du préchargement de liens pour inclure le préchargement des balises <a>, lesquelles devront inclure un type de relation <code>next</code> ou <code>prefetch</code>. Cela aiderait probablement les fournisseurs de contenus à éviter le problème du préchargement de liens morts.</p> -<h3 id="Le_pr.C3.A9chargement_de_liens_est-il_respectueux_des_standards_.3F" name="Le_pr.C3.A9chargement_de_liens_est-il_respectueux_des_standards_.3F">Le préchargement de liens est-il respectueux des standards ?</h3> +<h3 id="Le_pr.C3.A9chargement_de_liens_est-il_respectueux_des_standards_.3F">Le préchargement de liens est-il respectueux des standards ?</h3> <p>Oui, le préchargement de liens, comme exposé dans ce document, ne viole aucun standard Web existant. En fait, la spécification HTML 4.01 prend explicitement en compte la définition de nouveaux types de relation pour les liens (<a class="external" href="http://www.la-grange.net/w3c/html4.01/types.html#h-6.12">Section 6.12: types de liens (fr)</a>). Toutefois, le mécanisme exact employé par Mozilla n’est pas encore standardisé. Une ébauche de spécification est en cours.</p> -<h3 id="Comment_le_temps_disponible_du_navigateur_est-il_d.C3.A9termin.C3.A9_.3F" name="Comment_le_temps_disponible_du_navigateur_est-il_d.C3.A9termin.C3.A9_.3F">Comment le temps disponible du navigateur est-il déterminé ?</h3> +<h3 id="Comment_le_temps_disponible_du_navigateur_est-il_d.C3.A9termin.C3.A9_.3F">Comment le temps disponible du navigateur est-il déterminé ?</h3> <p>Dans l’implémentation actuelle (Mozilla 1.2), le temps disponible est déterminé par l’utilisation de l’API <code>nsIWebProgressListener</code>. On attache un écouteur à l’objet de haut-niveau <code>nsIWebProgress</code> ("@mozilla.org/docloaderservice;1"). De celui-ci, on reçoit les notifications de lancement et d’arrêt du document et nous estimons le temps disponible comme étant la période entre l’arrêt du dernier document et le lancement du document suivant. La dernière notification d’arrêt apparaît à peu près lorsque le gestionnaire <code>onLoad</code> se lance pour le document parent. C’est à ce moment que démarrent les requêtes de préchargement. Si une sous-frame contient des cibles à précharger, le préchargement ne commencera que lorsque la frame la plus haute et toutes ses frames filles auront fini de charger.</p> -<h3 id="Que_se_passe-t-il_si_je_clique_sur_un_lien_pendant_un_pr.C3.A9chargement_.3F" name="Que_se_passe-t-il_si_je_clique_sur_un_lien_pendant_un_pr.C3.A9chargement_.3F">Que se passe-t-il si je clique sur un lien pendant un préchargement ?</h3> +<h3 id="Que_se_passe-t-il_si_je_clique_sur_un_lien_pendant_un_pr.C3.A9chargement_.3F">Que se passe-t-il si je clique sur un lien pendant un préchargement ?</h3> <p>Quand un utilisateur clique sur un lien ou initie toutes sortes de chargements de page, le préchargement des liens s’arrête et les préchargements de cibles sont abandonnés. Si un document préchargé est partiellement stocké, alors il est emmagasiné dans le cache à condition que le serveur envoie un en-tête de réponse de type <code>Accept-Ranges: bytes</code>. Cet en-tête est typiquement généré par les serveurs web quand ils gèrent du contenu statique. Quand l’utilisateur visite réellement un document préchargé, la portion restante est chargée en utilisant une requête HTTP byte-range.</p> -<h3 id="Si_je_t.C3.A9l.C3.A9charge_quelque-chose_en_t.C3.A2che_de_fond_.3F_Le_pr.C3.A9chargement_de_liens_viendra-t-il_en_concurrence_pour_la_bande_passante_.3F" name="Si_je_t.C3.A9l.C3.A9charge_quelque-chose_en_t.C3.A2che_de_fond_.3F_Le_pr.C3.A9chargement_de_liens_viendra-t-il_en_concurrence_pour_la_bande_passante_.3F">Et si je télécharge quelque chose en tâche de fond ? Le préchargement de liens viendra-t-il en concurrence pour la bande passante ?</h3> +<h3 id="Si_je_t.C3.A9l.C3.A9charge_quelque-chose_en_t.C3.A2che_de_fond_.3F_Le_pr.C3.A9chargement_de_liens_viendra-t-il_en_concurrence_pour_la_bande_passante_.3F">Et si je télécharge quelque chose en tâche de fond ? Le préchargement de liens viendra-t-il en concurrence pour la bande passante ?</h3> <p>Oui et non. Si vous téléchargez quelque chose en utilisant Mozilla, le préchargement de liens sera retardé jusqu'à ce que les téléchargements en arrière-plan soit complets. Par exemple, si vous chargez un groupe de marque-pages (qui ouvre plusieurs onglets), toutes les requêtes de préchargement initiées par une de ces marque-pages ne se lanceront que lorsque tous les onglets auront fini de se charger. Si vous avez lancé une autre application qui utilise le réseau, le préchargement de liens dans Mozilla sera en compétition pour la bande passante, avec l’autre application. C’est un problème que nous espérons régler dans le futur en s’appuyant sur les services du système d’exploitation pour contrôler le temps disponible sur le réseau.</p> -<h3 id="Existe-t-il_des_restrictions_sur_ce_qui_peut_.C3.AAtre_pr.C3.A9charg.C3.A9_.3F" name="Existe-t-il_des_restrictions_sur_ce_qui_peut_.C3.AAtre_pr.C3.A9charg.C3.A9_.3F">Existe-t-il des restrictions sur ce qui peut être préchargé ?</h3> +<h3 id="Existe-t-il_des_restrictions_sur_ce_qui_peut_.C3.AAtre_pr.C3.A9charg.C3.A9_.3F">Existe-t-il des restrictions sur ce qui peut être préchargé ?</h3> <p>Oui, uniquement les URL http:// (et, à partir de {{ Gecko("1.9.1") }}, https://) peuvent être préchargées. Les autres protocoles (comme FTP) ne fournissent pas de support suffisamment riche pour la gestion du cache côté client. En plus de cette restriction, les URL ayant une chaîne de paramètres ne sont pas préchargées. Ceci parce que de telles URL sont souvent dans des documents qui ne peuvent pas être réutilisés en dehors du cache du navigateur. Donc précharger de telles URL n’apporterait pas grand chose. Nous avons constaté que des sites existants utilisent la balise <link rel="next"> avec des URL contenant des chaînes de paramètres pour référencer le document suivant dans une série de documents. Bugzilla est un de ces sites et il s'avère que les rapports de bug dans Bugzilla ne peuvent être mis en cache, aussi précharger ces URL reviendrait à peu près à doubler la charge de ce pauvre Bugzilla ! On peut se douter que d’autres sites ont été conçus comme Bugzilla donc on ne fait explicitement pas de préchargement d’URL contenant des chaînes de paramètres. (Il pourrait être sensé d’autoriser le préchargement de ces documents avec une relation de type <code>rel=prefetch</code>, puisque cela n'apparait pas dans aucun contenu existant). Il n’y a pas d’autres restrictions en ce qui concerne les URL préchargées.</p> -<h3 id="Mozilla_peut-il_pr.C3.A9charger_un_document_d.E2.80.99un_h.C3.B4te_diff.C3.A9rent_.3F" name="Mozilla_peut-il_pr.C3.A9charger_un_document_d.E2.80.99un_h.C3.B4te_diff.C3.A9rent_.3F">Mozilla peut-il précharger un document d’un hôte différent ?</h3> +<h3 id="Mozilla_peut-il_pr.C3.A9charger_un_document_d.E2.80.99un_h.C3.B4te_diff.C3.A9rent_.3F">Mozilla peut-il précharger un document d’un hôte différent ?</h3> <p>Oui. Il n’est pas nécessaire que les documents aient la même origine pour le préchargement de liens. Limiter le préchargement uniquement à des URL du même serveur n’augmenterait pas la sécurité du navigateur.</p> -<h3 id="Les_requ.C3.AAtes_pr.C3.A9charg.C3.A9es_contiennent-elles_un_en-t.C3.AAte_Referer:_.3F" name="Les_requ.C3.AAtes_pr.C3.A9charg.C3.A9es_contiennent-elles_un_en-t.C3.AAte_Referer:_.3F">Les requêtes préchargées contiennent-elles un en-tête <code>Referer:</code> ?</h3> +<h3 id="Les_requ.C3.AAtes_pr.C3.A9charg.C3.A9es_contiennent-elles_un_en-t.C3.AAte_Referer:_.3F">Les requêtes préchargées contiennent-elles un en-tête <code>Referer:</code> ?</h3> <p>Oui, les requêtes préchargées incluent une entête HTTP <code>Referer:</code> qui indique le document duquel la cible de préchargement a été extraite.</p> <p>Cela peut impacter l'analyse de l'affluence qui est communément utilisée sur de nombreux sites. Pour cette raison, le préchargement de liens peut ne pas être approprié pour toutes sortes de contenus. Toutefois, il est possible de contraindre Mozilla à valider un document préchargé quand l'utilisateur suit un <code>href</code> vers le document préchargé en spécifiant un en-tête de réponse HTTP <code>Cache-control: must-revalidate</code>. Cet en-tête permet la mise en cache mais requiert une requête de validation <code>If-Modified-Since</code> ou <code>If-None-Match</code> pour que le document soit servi à partir du cache du navigateur.</p> -<h3 id="En_tant_qu.27administrateur_serveur.2C_puis-je_distinguer_les_requ.C3.AAtes_pr.C3.A9charg.C3.A9es.2C_des_requ.C3.AAtes_normales_.3F" name="En_tant_qu.27administrateur_serveur.2C_puis-je_distinguer_les_requ.C3.AAtes_pr.C3.A9charg.C3.A9es.2C_des_requ.C3.AAtes_normales_.3F">En tant qu'administrateur serveur, puis-je distinguer les requêtes préchargées, des requêtes normales ?</h3> +<h3 id="En_tant_qu.27administrateur_serveur.2C_puis-je_distinguer_les_requ.C3.AAtes_pr.C3.A9charg.C3.A9es.2C_des_requ.C3.AAtes_normales_.3F">En tant qu'administrateur serveur, puis-je distinguer les requêtes préchargées, des requêtes normales ?</h3> <p>Oui, l'en-tête suivant est envoyé avec chaque requête préchargée :</p> @@ -89,7 +91,7 @@ original_slug: Web/HTTP/FAQ_sur_le_préchargement_des_liens <p>Bien sûr, cet en-tête de requête n'est absolument pas standardisé et il peut changer dans les futures versions de Mozilla.</p> -<h3 id="Existe-t-il_une_pr.C3.A9f.C3.A9rence_pour_d.C3.A9sactiver_le_pr.C3.A9chargement_de_liens_.3F" name="Existe-t-il_une_pr.C3.A9f.C3.A9rence_pour_d.C3.A9sactiver_le_pr.C3.A9chargement_de_liens_.3F">Existe-t-il une préférence pour désactiver le préchargement de liens ?</h3> +<h3 id="Existe-t-il_une_pr.C3.A9f.C3.A9rence_pour_d.C3.A9sactiver_le_pr.C3.A9chargement_de_liens_.3F">Existe-t-il une préférence pour désactiver le préchargement de liens ?</h3> <p>Oui, il existe une préférence cachée pour désactiver le préchargement de liens. Ajoutez cette ligne dans votre fichier prefs.js qui se trouve dans votre répertoire de profil (ou faite le changement approprié via <code>about:config</code>) :</p> @@ -98,7 +100,7 @@ original_slug: Web/HTTP/FAQ_sur_le_préchargement_des_liens <p>Toutefois, la théorie est que si le préchargement de liens a besoin d'être désactivé c'est qu'il doit y avoir un problème dans l'implémentation. On doit améliorer l'implémentation si ça ne marche pas correctement plutôt que d'attendre que l'utilisateur trouve et modifie une obscure préférence.</p> -<h3 id="Et_pour_les_gens_qui_payent_.C3.A0_la_bande_passante_utilis.C3.A9e_.3F" name="Et_pour_les_gens_qui_payent_.C3.A0_la_bande_passante_utilis.C3.A9e_.3F">Et pour les gens qui payent à la bande passante utilisée ?</h3> +<h3 id="Et_pour_les_gens_qui_payent_.C3.A0_la_bande_passante_utilis.C3.A9e_.3F">Et pour les gens qui payent à la bande passante utilisée ?</h3> <p>En fait, il y a deux façons d'aborder ce problème :</p> @@ -109,27 +111,23 @@ original_slug: Web/HTTP/FAQ_sur_le_préchargement_des_liens <p>Il est important que les sites web adoptent la balise <code><link></code> pour le préchargement, plutôt que d'essayer d'initier le chargement en tâche de fond avec des hacks JS/DOM. La balise <code><link></code> donne au navigateur la capacité de savoir quels sites sont à charger et on peut utiliser cette information pour améliorer le système de priorité du préchargement des liens. La préférence utilisateur pour désactiver le préchargement par la balise <code><link></code> encourage simplement les sites Web à s'abstenir d'utiliser des hacks JS/DOM. Cela n'apporterait rien de positif aux utilisateurs. C'est une des raisons pour lesquelles le préchargement est activé par défaut.</p> -<h3 id="Quels_navigateurs_supportent_le_pr.C3.A9chargement_de_liens_.3F" name="Quels_navigateurs_supportent_le_pr.C3.A9chargement_de_liens_.3F">Quels navigateurs supportent le préchargement de liens ?</h3> +<h3 id="Quels_navigateurs_supportent_le_pr.C3.A9chargement_de_liens_.3F">Quels navigateurs supportent le préchargement de liens ?</h3> <p>Les navigateurs basés sur Mozilla 1.2 (ou +) aussi bien que ceux basés sur Mozilla 1.0.2 (ou +) supportent le préchargement. Cela inclut Firefox et Netscape 7.02+. Les compilations Camino, en Mars 2003, sont basées sur Mozilla 1.0.1 et donc ne supportent pas le préchargement. <a class="external" href="http://gemal.dk/browserspy/prefetch.php">Testez</a> votre navigateur pour vérifier s'il supporte le préchargement de liens.</p> -<h3 id="D.27autres_questions_.3F" name="D.27autres_questions_.3F">D'autres questions ?</h3> +<h3 id="D.27autres_questions_.3F">D'autres questions ?</h3> <p>Si vous avez des questions ou des commentaires sur le préchargement de liens, n'hésitez pas à me les envoyer :-)</p> -<h4 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement">Voir également</h4> +<h4 id="Voir_.C3.A9galement">Voir également</h4> <ul> <li><a class="external" href="http://www.edochan.com/programming/pf.htm">Prefetching Hints (en)</a></li> </ul> -<div class="originaldocinfo"> -<h3 id="Informations_sur_le_document_original" name="Informations_sur_le_document_original">Informations sur le document original</h3> +<h3 id="Informations_sur_le_document_original">Informations sur le document original</h3> <ul> - <li>Auteur(s) : Darin Fisher <a class="link-mailto" href="mailto:(darin@meer.net)" rel="freelink">(darin@meer.net)</a></li> + <li>Auteur(s) :Darin Fisher (darin at meer dot net)</a></li> <li>Date de dernière mise à jour : 3 mars 2003</li> </ul> -</div> - -<p>{{ languages( { "en": "en/Link_prefetching_FAQ", "it": "it/Link_prefetching_FAQ", "ja": "ja/Link_prefetching_FAQ" } ) }}</p> diff --git a/files/fr/web/http/methods/connect/index.html b/files/fr/web/http/methods/connect/index.html index db70367783..08e8ec6a12 100644 --- a/files/fr/web/http/methods/connect/index.html +++ b/files/fr/web/http/methods/connect/index.html @@ -54,7 +54,7 @@ original_slug: Web/HTTP/Méthode/CONNECT <p>Certains serveurs proxy pourraient avoir besoin d'une autorisation pour créer un tunnel. Voir aussi l'en-tête {{HTTPHeader("Proxy-Authorization")}}.</p> -<pre class="line-numbers language-html">CONNECT server.example.com:80 HTTP/1.1 +<pre>CONNECT server.example.com:80 HTTP/1.1 Host: server.example.com:80 Proxy-Authorization: basic aGVsbG86d29ybGQ=</pre> diff --git a/files/fr/web/http/methods/patch/index.html b/files/fr/web/http/methods/patch/index.html index 0f6c6bf8e6..79eb5d483d 100644 --- a/files/fr/web/http/methods/patch/index.html +++ b/files/fr/web/http/methods/patch/index.html @@ -50,7 +50,7 @@ original_slug: Web/HTTP/Méthode/PATCH <h3 id="Requête">Requête</h3> -<pre class="line-numbers language-html">PATCH /file.txt HTTP/1.1 +<pre>PATCH /file.txt HTTP/1.1 Host: www.example.com Content-Type: application/example If-Match: "e0023aa4e" @@ -62,7 +62,7 @@ Content-Length: 100 <p>Une requête traitée avec succès retourne une réponse accompagnée d'un code de réponse {{HTTPStatus("204")}}. Dans ce cas-ci, la réponse ne contient un corps de message.</p> -<pre class="newpage">HTTP/1.1 204 No Content +<pre>HTTP/1.1 204 No Content Content-Location: /file.txt ETag: "e0023aa4f"</pre> diff --git a/files/fr/web/http/methods/post/index.html b/files/fr/web/http/methods/post/index.html index 82bd30d64f..a40217492e 100644 --- a/files/fr/web/http/methods/post/index.html +++ b/files/fr/web/http/methods/post/index.html @@ -69,7 +69,7 @@ original_slug: Web/HTTP/Méthode/POST <p>Un formulaire simple utilisant le type de contenu par défaut <code>application/x-www-form-urlencoded</code> :</p> -<pre class="line-numbers language-html">POST / HTTP/1.1 +<pre>POST / HTTP/1.1 Host: foo.com Content-Type: application/x-www-form-urlencoded Content-Length: 13 diff --git a/files/fr/web/http/methods/trace/index.html b/files/fr/web/http/methods/trace/index.html index 50422020f7..d095495f3c 100644 --- a/files/fr/web/http/methods/trace/index.html +++ b/files/fr/web/http/methods/trace/index.html @@ -45,7 +45,7 @@ original_slug: Web/HTTP/Méthode/TRACE <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">TRACE /index.html +<pre class="syntaxbox">TRACE /index.html </pre> <h2 id="Specifications">Specifications</h2> diff --git a/files/fr/web/http/overview/index.html b/files/fr/web/http/overview/index.html index b1d9916b04..ff6c0c8b68 100644 --- a/files/fr/web/http/overview/index.html +++ b/files/fr/web/http/overview/index.html @@ -11,13 +11,13 @@ original_slug: Web/HTTP/Aperçu --- <div>{{HTTPSidebar}}</div> -<p class="summary"><strong>HTTP</strong> est un {{glossary("protocole")}} qui permet de récupérer des ressources telles que des documents HTML. Il est à la base de tout échange de données sur le Web. C'est un protocole de type client-serveur, ce qui signifie que les requêtes sont initiées par le destinataire (qui est généralement un navigateur web). Un document complet est construit à partir de différents sous-documents qui sont récupérés, par exemple du texte, des descriptions de mise en page, des images, des vidéos, des scripts et bien plus.</p> +<p><strong>HTTP</strong> est un {{glossary("protocole")}} qui permet de récupérer des ressources telles que des documents HTML. Il est à la base de tout échange de données sur le Web. C'est un protocole de type client-serveur, ce qui signifie que les requêtes sont initiées par le destinataire (qui est généralement un navigateur web). Un document complet est construit à partir de différents sous-documents qui sont récupérés, par exemple du texte, des descriptions de mise en page, des images, des vidéos, des scripts et bien plus.</p> -<p><img alt="Un document web se compose de différentes ressources" src="https://mdn.mozillademos.org/files/13677/Fetching_a_page.png" style="height: 319px; width: 545px;"></p> +<p><img alt="Un document web se compose de différentes ressources" src="fetching_a_page.png"></p> <p>Les clients et serveurs communiquent par l'échange de messages individuels (en opposition à un flux de données). Les messages envoyés par le client, généralement un navigateur web, sont appelés des <em>requêtes</em> et les messages renvoyés par le serveur sont appelés <em>réponses</em>.</p> -<p><img alt="HTTP est un protocole de la couche d'application fonctionnant au-dessus de TCP (pour la couche de transport) et IP (pour la couche réseau). HTTP est en dessous de la couche de présentation." src="https://mdn.mozillademos.org/files/13673/HTTP%20&%20layers.png" style="float: left; height: 299px; padding-bottom: 15px; padding-right: 20px; width: 418px;"> Conçu au début des années 1990, HTTP est un protocole extensible qui a évolué au cours du temps. C'est un protocole de <a href="https://fr.wikipedia.org/wiki/Couche_application">la couche application</a> dont les données transitent via {{glossary("TCP")}} ou à travers une connexion TCP chiffrée avec {{glossary("TLS")}}. En théorie, tout protocole de transport fiable pourrait être utilisé. En raison de son extensibilité, il n'est pas seulement utilisé pour récupérer des documents, mais aussi pour des images, des vidéos ou bien pour renvoyer des contenus vers des serveurs, comme des résultats de formulaires HTML. HTTP peut aussi être utilisé pour récupérer des parties de documents pour mettre à jour à la demande des pages web.</p> +<p><img alt="HTTP est un protocole de la couche d'application fonctionnant au-dessus de TCP (pour la couche de transport) et IP (pour la couche réseau). HTTP est en dessous de la couche de présentation." src="http-layers.png"> Conçu au début des années 1990, HTTP est un protocole extensible qui a évolué au cours du temps. C'est un protocole de <a href="https://fr.wikipedia.org/wiki/Couche_application">la couche application</a> dont les données transitent via {{glossary("TCP")}} ou à travers une connexion TCP chiffrée avec {{glossary("TLS")}}. En théorie, tout protocole de transport fiable pourrait être utilisé. En raison de son extensibilité, il n'est pas seulement utilisé pour récupérer des documents, mais aussi pour des images, des vidéos ou bien pour renvoyer des contenus vers des serveurs, comme des résultats de formulaires HTML. HTTP peut aussi être utilisé pour récupérer des parties de documents pour mettre à jour à la demande des pages web.</p> <h2 id="Composants_des_systèmes_basés_sur_HTTP">Composants des systèmes basés sur HTTP</h2> @@ -25,7 +25,7 @@ original_slug: Web/HTTP/Aperçu <p>Chaque requête individuelle est envoyée au serveur, qui la traite et fournit une <em>réponse</em>. Entre cette requête et la réponse se trouve de nombreuses entités qu'on désignera de façon générique sous le terme {{glossary("Proxy", "proxies")}}. Celles-ci exécutent différentes opérations et agissent comme passerelles ou comme {{glossary("Cache", "caches")}} par exemple.</p> -<p><img alt="chaîne client serveur" src="https://mdn.mozillademos.org/files/13679/Client-server-chain.png"></p> +<p><img alt="chaîne client serveur" src="client-server-chain.png"></p> <p>En réalité, il y a plus d'un ordinateur entre un navigateur et le serveur qui traite la requête : il y a les routeurs, les modems et bien plus. Grâce à la construction en couche du Web, ces intermédiaires sont cachés dans les couches réseau et transport. HTTP est bâti sur la couche applicative. Bien qu'elles puissent s'avérer importantes lorsqu'il s'agit de diagnostiquer des problèmes réseau, les couches inférieures ne sont pas pertinentes ici pour décrire HTTP.</p> @@ -107,12 +107,12 @@ original_slug: Web/HTTP/Aperçu <ol> <li>Il ouvre une connexion TCP : la connexion TCP va être utilisée pour envoyer une ou plusieurs requêtes et pour recevoir une réponse. Le client peut ouvrir une nouvelle connexion, réutiliser une connexion existante ou ouvrir plusieurs connexions TCP vers le serveur.</li> <li>Il envoie un message HTTP : les messages HTTP (avant HTTP/2) sont lisibles par les humains. Avec HTTP/2, ces simples messages sont en-capsulés dans des trames, rendant la lecture directe impossible, mais le principe reste le même. - <pre class="line-numbers language-html notranslate">GET / HTTP/1.1 + <pre>GET / HTTP/1.1 Host: developer.mozilla.org Accept-Language: fr</pre> </li> <li>Il lit la réponse envoyée par le serveur : - <pre class="line-numbers language-html notranslate">HTTP/1.1 200 OK + <pre>HTTP/1.1 200 OK Date: Sat, 09 Oct 2010 14:28:02 GMT Server: Apache Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT @@ -138,7 +138,7 @@ Content-Type: text/html <p>Un exemple de requête HTTP :</p> -<p><img alt="Une requête HTTP basique" src="https://mdn.mozillademos.org/files/13687/HTTP_Request.png" style="height: 336px; width: 693px;"></p> +<p><img alt="Une requête HTTP basique" src="http_request.png"></p> <p>Une requête comprend les éléments suivants :</p> @@ -154,7 +154,7 @@ Content-Type: text/html <p>Un exemple de réponse :</p> -<p><img alt="une réponse HTTP" src="https://mdn.mozillademos.org/files/13691/HTTP_Response.png" style="height: 494px; width: 758px;"></p> +<p><img alt="une réponse HTTP" src="http_response.png"></p> <p>Une réponse comprend les éléments suivants:</p> diff --git a/files/fr/web/http/public_key_pinning/index.html b/files/fr/web/http/public_key_pinning/index.html index 165ea5f0ca..b378e93471 100644 --- a/files/fr/web/http/public_key_pinning/index.html +++ b/files/fr/web/http/public_key_pinning/index.html @@ -8,7 +8,7 @@ tags: translation_of: Web/HTTP/Public_Key_Pinning original_slug: Web/Security/Public_Key_Pinning --- -<p class="summary"><span class="seoSummary">L'extention <strong>Public Key Pinning pour HTTP</strong> (HPKP) est une fonctionnalité de sécurité qui dit au client web d'associer une clé publique cryptographique avec un certain serveur web pour éviter les attaques <a href="https://fr.wikipedia.org/wiki/Attaque_de_l%27homme_du_milieu">MITM</a> avec des certificats contrefaits.</span></p> +<p>L'extention <strong>Public Key Pinning pour HTTP</strong> (HPKP) est une fonctionnalité de sécurité qui dit au client web d'associer une clé publique cryptographique avec un certain serveur web pour éviter les attaques <a href="https://fr.wikipedia.org/wiki/Attaque_de_l%27homme_du_milieu">MITM</a> avec des certificats contrefaits.</p> <div class="note"> <p><strong>Note :</strong> La Public Key Pinning décrite ici est différente du limité <a href="http://monica-at-mozilla.blogspot.de/2014/08/firefox-32-supports-public-key-pinning.html">preload list based key pinning</a> introduit dans Firefox 32.</p> @@ -18,7 +18,9 @@ original_slug: Web/Security/Public_Key_Pinning <p>HPKP est une technique qui s'appuie sur la confiance au premier accès (TOFU, <em>Trust on First Use</em>). La première fois un serveur web dit au client en utilisant l'en-tête HTTP HPKP quelles clés publiques lui appartiennent, le client sauvegarde cette information pour une période de temps donnée. Quand le client visite le serveur à nouveau, il s'attend à un certificat contenant une clé publique dont l'empreinte est sauvegardée. Si le serveur présente une clé publique inconnue, le client doit présenter un avertissement à l'utilisateur.</p> -<p class="note">Firefox (and Chrome) <strong>désactivent la vérification de l'épinglage</strong> lorsqu'un site épinglé présentent une chaine de certificats qui se termine par <strong>un certificat racine installé par l'utilisateur</strong> (et non un certificat racine de base).</p> +<div class="notecard note"> + <p><strong>Note :</strong> Firefox (et Chrome) <strong>désactivent la vérification de l'épinglage</strong> lorsqu'un site épinglé présentent une chaine de certificats qui se termine par <strong>un certificat racine installé par l'utilisateur</strong> (et non un certificat racine de base).</p> +</div> <h2 id="Activer_HPKP">Activer HPKP</h2> @@ -51,8 +53,6 @@ original_slug: Web/Security/Public_Key_Pinning </ul> </div> -<p id="sect1"> </p> - <h3 id="Extraire_la_clé_publique_encodé_en_Base64">Extraire la clé publique encodé en Base64</h3> <p>En premier, vous devez extraire la clé publique depuis votre fichier de certificats ou de clés puis l'encoder en base 64.</p> @@ -80,7 +80,7 @@ original_slug: Web/Security/Public_Key_Pinning <p>Les étapes concrètes nécessaires pour délivrer l'en-tête HPKP dépendent du serveur web que vous utilisez.</p> <div class="note"> -<p><strong>Note:</strong> Ces exemples utilisent un a max-age de deux mois et incluent aussi tous les sous-domaines. Il est conseillé de vérifier que cela convient à votre serveur.</p> +<p><strong>Note :</strong> Ces exemples utilisent un a max-age de deux mois et incluent aussi tous les sous-domaines. Il est conseillé de vérifier que cela convient à votre serveur.</p> </div> <p>Inclure une ligne similaire à votre configuration activera HPKP, en remplaçant les valeurs en pointillé des lignes <code>pin-sha256="..." </code>:</p> diff --git a/files/fr/web/http/redirections/index.html b/files/fr/web/http/redirections/index.html index d3a809e3c3..88118a2292 100644 --- a/files/fr/web/http/redirections/index.html +++ b/files/fr/web/http/redirections/index.html @@ -15,7 +15,7 @@ translation_of: Web/HTTP/Redirections <p>En HTTP, une redirection est déclenchée par le serveur en envoyant des réponses spéciales à une requête : <em>les redirections</em>. Les redirections HTTP sont des réponses avec un code d'état de <code>3xx</code>. Un navigateur, lorsqu'il reçoit une réponse de redirection, utilise la nouvelle URL fournie et la charge immédiatement : la plupart du temps, la redirection est transparente pour l'utilisateur, si ce n'est un petit impact de performance.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13785/HTTPRedirect.png"></p> +<p><img alt="" src="httpredirect.png"></p> <p>Il existe plusieurs types de redirections et elles se répartissent en trois catégories : les redirections permanentes, les temporaires et les spéciales.</p> @@ -37,7 +37,7 @@ translation_of: Web/HTTP/Redirections <td><code>301</code></td> <td><code>Moved Permanently</code></td> <td>Requêtes {{HTTPMethod("GET")}} inchangées.<br> - Les autres peuvent être changés ou non en {{HTTPMethod("GET")}}.<sup><a href="#attr1">[1]</a></sup></td> + Les autres peuvent être changés ou non en {{HTTPMethod("GET")}}.</td> <td>Réorganisation d'un site Web.</td> </tr> <tr> @@ -49,7 +49,7 @@ translation_of: Web/HTTP/Redirections </tbody> </table> -<p><a id="attr1" name="attr1"></a>[1] La spécification n'avait pas l'intention de permettre des changements de méthode, mais il y a en pratique des agents utilisateurs qui le font. <code>308</code> a été créé pour supprimer l'ambiguïté du comportement lors de l'utilisation de méthodes autres que <code>GET</code>.</p> +<p>La spécification n'avait pas l'intention de permettre des changements de méthode, mais il y a en pratique des agents utilisateurs qui le font. <code>308</code> a été créé pour supprimer l'ambiguïté du comportement lors de l'utilisation de méthodes autres que <code>GET</code>.</p> <h3 id="Redirections_temporaires">Redirections temporaires</h3> @@ -69,7 +69,7 @@ translation_of: Web/HTTP/Redirections <td><code>302</code></td> <td><code>Found</code></td> <td>Requêtes {{HTTPMethod("GET")}} inchangées.<br> - Les autres peuvent être changés ou non en {{HTTPMethod("GET")}}.<sup><a href="#attr2">[2]</a></sup></td> + Les autres peuvent être changés ou non en {{HTTPMethod("GET")}}.</td> <td>La page Web n'est temporairement pas disponible pour des raisons qui n'ont pas été imprévues. De cette façon, les moteurs de recherche ne mettent pas à jour leurs liens.</td> </tr> <tr> @@ -88,7 +88,7 @@ translation_of: Web/HTTP/Redirections </tbody> </table> -<p><a id="attr2" name="attr2"></a>[2] La spécification n'avait pas l'intention de permettre des changements de méthode, mais il y a en pratique des agents utilisateurs qui le font. <code>307</code> a été créé pour supprimer l'ambiguïté du comportement lors de l'utilisation de méthodes autres que <code>GET</code></p> +<p>La spécification n'avait pas l'intention de permettre des changements de méthode, mais il y a en pratique des agents utilisateurs qui le font. <code>307</code> a été créé pour supprimer l'ambiguïté du comportement lors de l'utilisation de méthodes autres que <code>GET</code></p> <h3 id="Redirections_spéciales">Redirections spéciales</h3> @@ -134,7 +134,7 @@ translation_of: Web/HTTP/Redirections <p>Bien entendu, cette méthode ne fonctionne qu'avec des pages HTML (ou similaires) et ne peut être utilisée pour des images ou tout autre type de contenu.</p> <div class="note"> -<p>Notez que ces redirections cassent le bouton de retour dans un navigateur : vous pouvez revenir à une page avec cet en-tête mais mais vous serez de nouveau instantanément rediriger.</p> +<p><strong>Note :</strong> Ces redirections cassent le bouton de retour dans un navigateur : vous pouvez revenir à une page avec cet en-tête mais mais vous serez de nouveau instantanément rediriger.</p> </div> <h3 id="Redirections_JavaScript">Redirections JavaScript</h3> @@ -178,7 +178,7 @@ translation_of: Web/HTTP/Redirections <p>Lorsque vous restructurez des sites Web, les URL des ressources changent. Même si vous pouvez mettre à jour les liens internes de votre site Web pour qu'ils correspondent au nouveau schéma de nommage, vous n'avez aucun contrôle sur les URL utilisées par les ressources externes. Vous ne voulez pas briser ces liens, car ils vous apportent des utilisateurs précieux (et aident votre référencement), donc vous configurez des redirections depuis les anciennes URL vers les nouvelles.</p> <div class="note"> -<p>Même si cette technique fonctionne également pour les liens internes, vous devriez éviter d'avoir des redirections internes. Une redirection a un coût significatif sur les performances (car une requête HTTP supplémentaire est faite) et si vous pouvez l'éviter en corrigeant les liens internes, vous devez corriger ces liens.</p> +<p><strong>Note :</strong> Même si cette technique fonctionne également pour les liens internes, vous devriez éviter d'avoir des redirections internes. Une redirection a un coût significatif sur les performances (car une requête HTTP supplémentaire est faite) et si vous pouvez l'éviter en corrigeant les liens internes, vous devez corriger ces liens.</p> </div> <h3 id="Réponses_temporaires_aux_requêtes_non_sécurisées">Réponses temporaires aux requêtes non sécurisées</h3> @@ -249,7 +249,7 @@ rewrite ^/images/(.*)$ http://images.example.com/$1 permanent; <p>Parfois, le serveur ne le détecte pas : une boucle de redirection peut s'étendre sur plusieurs serveurs qui n'ont pas une vue globale de ce qui se passe. Dans ce cas, les navigateurs le détecteront et afficheront un message d'erreur. Firefox affichera:</p> -<pre class="bz_comment_text" id="comment_text_0">Firefox a détecté que le serveur redirige la demande pour cette adresse d'une manière qui n'aboutira pas. +<pre>Firefox a détecté que le serveur redirige la demande pour cette adresse d'une manière qui n'aboutira pas. </pre> <p>tandis que Chrome affichera:</p> diff --git a/files/fr/web/http/session/index.html b/files/fr/web/http/session/index.html index d0a0d231de..28fd60d637 100644 --- a/files/fr/web/http/session/index.html +++ b/files/fr/web/http/session/index.html @@ -12,40 +12,43 @@ translation_of: Web/HTTP/Session <p>Dans les protocoles client-serveur, comme HTTP, les sessions se composent de trois phases :</p> <ol> - <li><span id="result_box" lang="fr"><span>Le client établit une connexion TCP (ou la connexion appropriée si la couche de transport n'est pas TCP).</span></span></li> - <li><span class="short_text" id="result_box" lang="fr"><span>Le client envoie sa requête et attend la réponse.</span></span></li> - <li><span id="result_box" lang="fr"><span>Le serveur traite la requête, renvoyant sa réponse, fournissant un code d'état et des données appropriées.</span></span></li> + <li>Le client établit une connexion TCP (ou la connexion appropriée si la couche de transport n'est pas TCP).</li> + <li>Le client envoie sa requête et attend la réponse.</li> + <li>Le serveur traite la requête, renvoyant sa réponse, fournissant un code d'état et des données appropriées.</li> </ol> -<p><span id="result_box" lang="fr"><span>À partir de HTTP / 1.1, la connexion n'est plus fermée après avoir terminé la troisième phase, et le client peut à nouveau effectuer une requête : cela signifie que la deuxième et la troisième phases peuvent maintenant être effectuées à tout moment.</span></span></p> +<p>À partir de HTTP / 1.1, la connexion n'est plus fermée après avoir terminé la troisième phase, et le client peut à nouveau effectuer une requête : cela signifie que la deuxième et la troisième phases peuvent maintenant être effectuées à tout moment.</p> -<h2 id="Établir_une_connexion"><span class="short_text" id="result_box" lang="fr"><span>Établir une connexion</span></span></h2> +<h2 id="Établir_une_connexion">Établir une connexion</h2> -<p><span id="result_box" lang="fr"><span>Dans les protocoles client-serveur, c'est le client qui établit la connexion.</span> <span>L'ouverture d'une connexion en HTTP signifie l'initiation d'une connexion dans la couche de transport sous-jacente, généralement TCP.</span></span></p> +<p>Dans les protocoles client-serveur, c'est le client qui établit la connexion. L'ouverture d'une connexion en HTTP signifie l'initiation d'une connexion dans la couche de transport sous-jacente, généralement TCP.</p> -<p><span id="result_box" lang="fr"><span>Avec TCP, le port par défaut, pour un serveur HTTP sur un ordinateur, est le port 80. D'autres ports peuvent également être utilisés, comme 8000 ou 8080. L'URL d'une page à récupérer contient à la fois le nom de domaine et le numéro de port,</span> <span>Ce dernier peut être omis s'il en est à 80. Voir </span></span><a href="/fr/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">Identifying resources on the Web</a> pour plus de details.</p> +<p>Avec TCP, le port par défaut, pour un serveur HTTP sur un ordinateur, est le port 80. D'autres ports peuvent également être utilisés, comme 8000 ou 8080. L'URL d'une page à récupérer contient à la fois le nom de domaine et le numéro de port, Ce dernier peut être omis s'il en est à 80. Voir <a href="/fr/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">Identifying resources on the Web</a> pour plus de details.</p> -<div class="note"><strong>Note:</strong> <span id="result_box" lang="fr"><span>Le modèle client-serveur n'autorise pas le serveur à envoyer des données au client sans une demande explicite.</span> <span>Pour contourner ce problème, les développeurs Web utilisent plusieurs techniques: effectuer un ping sur le serveur périodiquement via le</span></span> {{domxref("XMLHTTPRequest")}}, {{domxref("Fetch")}} <span class="short_text" id="result_box" lang="fr"><span>API, en utilisant le HTML</span></span> <a href="/fr/WebSockets" title="en/WebSockets">WebSockets API</a>, <span class="short_text" id="result_box" lang="fr"><span>ou des protocoles similaires.</span></span></div> +<div class="note"> + <p><strong>Note :</strong> Le modèle client-serveur n'autorise pas le serveur à envoyer des données au client sans une demande explicite. Pour contourner ce problème, les développeurs Web utilisent plusieurs techniques: effectuer un ping sur le serveur périodiquement via le {{domxref("XMLHTTPRequest")}}, {{domxref("Fetch")}} API, en utilisant le HTML <a href="/fr/WebSockets" title="en/WebSockets">WebSockets API</a>, ou des protocoles similaires. + </p> +</div> -<h2 id="Envoi_d'une_demande_client"><span class="short_text" id="result_box" lang="fr"><span>Envoi d'une demande client</span></span></h2> +<h2 id="Envoi_d'une_demande_client">Envoi d'une demande client</h2> -<p><span id="result_box" lang="fr"><span>Une fois la connexion établie, l'agent utilisateur peut envoyer la demande (un agent utilisateur est généralement un navigateur Web, mais peut être autre chose, un robot d'exploration, par exemple).</span> <span>Une demande de client consiste en des directives de texte, séparées par CRLF (retour de chariot, suivi d'une alimentation en ligne), divisé en trois blocs :</span></span></p> +<p>Une fois la connexion établie, l'agent utilisateur peut envoyer la demande (un agent utilisateur est généralement un navigateur Web, mais peut être autre chose, un robot d'exploration, par exemple). Une demande de client consiste en des directives de texte, séparées par CRLF (retour de chariot, suivi d'une alimentation en ligne), divisé en trois blocs :</p> <ol> - <li><span id="result_box" lang="fr"><span>La première ligne contient une méthode de demande suivie de ses paramètres:</span></span> + <li>La première ligne contient une méthode de demande suivie de ses paramètres: <ul> - <li><span id="result_box" lang="fr"><span>le chemin d'accès du document, c'est-à-dire une URL absolue sans le protocole ou le nom de domaine</span></span></li> - <li><span class="short_text" id="result_box" lang="fr"><span>la version du protocole HTTP</span></span></li> + <li>le chemin d'accès du document, c'est-à-dire une URL absolue sans le protocole ou le nom de domaine</li> + <li>la version du protocole HTTP</li> </ul> </li> - <li><span id="result_box" lang="fr"><span>Les lignes subséquentes représentent un en-tête HTTP, ce qui donne aux informations du serveur quel type de données est approprié (par exemple, quelle langue, quels types MIME) ou d'autres données modifient son comportement (par exemple, ne pas envoyer de réponse s'il est déjà mis en cache).</span> <span>Ces en-têtes HTTP forment un bloc qui se termine par une ligne vide.</span></span></li> - <li><span id="result_box" lang="fr"><span>Le bloc final est un bloc de données facultatif, qui peut contenir d'autres données principalement utilisées par la méthode POST.</span></span></li> + <li>Les lignes subséquentes représentent un en-tête HTTP, ce qui donne aux informations du serveur quel type de données est approprié (par exemple, quelle langue, quels types MIME) ou d'autres données modifient son comportement (par exemple, ne pas envoyer de réponse s'il est déjà mis en cache). Ces en-têtes HTTP forment un bloc qui se termine par une ligne vide.</li> + <li>Le bloc final est un bloc de données facultatif, qui peut contenir d'autres données principalement utilisées par la méthode POST.</li> </ol> -<h3 id="Demandes_d'exemple"><span class="short_text" id="result_box" lang="fr"><span>Demandes d'exemple</span></span></h3> +<h3 id="Demandes_d'exemple">Demandes d'exemple</h3> -<p><span id="result_box" lang="fr"><span>Obtenir la page racine de developer.mozilla.org, c'est-à-dire <a href="https://developer.mozilla.org">http://developer.mozilla.org/</a>, et dire au serveur que l'utilisateur-agent préférerait la page en français si possible :</span></span></p> +<p>Obtenir la page racine de developer.mozilla.org, c'est-à-dire <a href="https://developer.mozilla.org">http://developer.mozilla.org/</a>, et dire au serveur que l'utilisateur-agent préférerait la page en français si possible :</p> <pre>GET / HTTP/1.1 Host: developer.mozilla.org @@ -53,9 +56,9 @@ Accept-Language: fr </pre> -<p><span id="result_box" lang="fr"><span>Observez cette dernière ligne vide, ceci sépare le bloc de données du bloc d'en-tête.</span> <span>Comme il n'y a pas de</span></span> <code>Content-Length</code> <span id="result_box" lang="fr"><span>fourni dans un en-tête HTTP, ce bloc de données est présenté vide, marquant la fin des en-têtes, permettant au serveur de traiter la demande le moment où elle reçoit cette ligne vide.</span></span></p> +<p>Observez cette dernière ligne vide, ceci sépare le bloc de données du bloc d'en-tête. Comme il n'y a pas de <code>Content-Length</code> fourni dans un en-tête HTTP, ce bloc de données est présenté vide, marquant la fin des en-têtes, permettant au serveur de traiter la demande le moment où elle reçoit cette ligne vide.</p> -<p><span id="result_box" lang="fr"><span>Par exemple, en envoyant le résultat d'un formulaire :</span></span></p> +<p>Par exemple, en envoyant le résultat d'un formulaire :</p> <pre>POST /contact_form.php HTTP/1.1 Host: developer.mozilla.org @@ -65,13 +68,13 @@ Content-Type: application/x-www-form-urlencoded name=Joe%20User&request=Send%20me%20one%20of%20your%20catalogue </pre> -<h3 id="Méthodes_de_demande"><span class="short_text" id="result_box" lang="fr"><span>Méthodes de demande</span></span></h3> +<h3 id="Méthodes_de_demande">Méthodes de demande</h3> <p>HTTP définit un ensemble de <a href="/fr/docs/HTTP/Méthode">méthodes de requête</a> indiquant l'action souhaitée à effectuer sur une ressource. Bien qu'ils puissent également être des noms, ces méthodes de requêtes sont parfois appelées verbes HTTP. Les requêtes les plus courantes sont <code>GET</code> et <code>POST</code> :</p> <ul> - <li><span id="result_box" lang="fr"><span>La méthode {{HTTPMethod ("GET")}} demande une représentation de données de la ressource spécifiée.</span> <span>Les requêtes utilisant <code>GET</code> ne doivent que récupérer les données.</span></span></li> - <li><span id="result_box" lang="fr"><span>La méthode {{HTTPMethod ("POST")}} envoie des données à un serveur afin qu'il puisse changer son état.</span> <span>C'est la méthode souvent utilisée pour les <a href="/fr/docs/Web/Guide/HTML/Formulaires">formulaires HTML</a>.</span></span></li> + <li>La méthode {{HTTPMethod ("GET")}} demande une représentation de données de la ressource spécifiée. Les requêtes utilisant <code>GET</code> ne doivent que récupérer les données.</li> + <li>La méthode {{HTTPMethod ("POST")}} envoie des données à un serveur afin qu'il puisse changer son état. C'est la méthode souvent utilisée pour les <a href="/fr/docs/Web/Guide/HTML/Formulaires">formulaires HTML</a>.</li> </ul> <h2 id="Structure_d'une_réponse_du_serveur">Structure d'une réponse du serveur</h2> @@ -80,17 +83,15 @@ name=Joe%20User&request=Send%20me%20one%20of%20your%20catalogue <ol> <li> - <div id="gt-res-content"> - <div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="fr"><span>La première ligne, <em>la ligne d'état</em>, consiste en une reconnaissance de la version HTTP utilisée, suivie d'une demande d'état (et sa brève signification dans un texte lisible par l'homme).</span></span></div> - </div> + La première ligne, <em>la ligne d'état</em>, consiste en une reconnaissance de la version HTTP utilisée, suivie d'une demande d'état (et sa brève signification dans un texte lisible par l'homme). </li> - <li><span id="result_box" lang="fr"><span>Les lignes suivantes représentent des en-têtes HTTP spécifiques, en donnant aux clients des informations sur les données envoyées (par exemple, type, taille de données, algorithme de compression utilisé, conseils sur la mise en cache).</span> <span>De la même manière que le bloc d'en-têtes HTTP pour une demande de client, ces en-têtes HTTP forment un bloc se terminant par une ligne vide.</span></span></li> - <li><span id="result_box" lang="fr"><span>Le dernier bloc est un bloc de données, qui contient les données facultatives.</span></span></li> + <li>Les lignes suivantes représentent des en-têtes HTTP spécifiques, en donnant aux clients des informations sur les données envoyées (par exemple, type, taille de données, algorithme de compression utilisé, conseils sur la mise en cache). De la même manière que le bloc d'en-têtes HTTP pour une demande de client, ces en-têtes HTTP forment un bloc se terminant par une ligne vide.</li> + <li>Le dernier bloc est un bloc de données, qui contient les données facultatives.</li> </ol> <h3 id="Examples_de_réponses">Examples de réponses</h3> -<p><span class="short_text" id="result_box" lang="fr"><span>Réponse réussie de la page Web :</span></span></p> +<p>Réponse réussie de la page Web :</p> <pre>HTTP/1.1 <strong>200 OK</strong> Date: Sat, 09 Oct 2010 14:28:02 GMT @@ -105,7 +106,7 @@ Content-Type: text/html </pre> -<p><span id="result_box" lang="fr"><span>Notification selon laquelle la ressource demandée a été définitivement déplacé ( en permanence ) :</span></span></p> +<p>Notification selon laquelle la ressource demandée a été définitivement déplacé ( en permanence ) :</p> <pre>HTTP/1.1 <strong>301 Moved Permanently</strong> Server: Apache/2.2.3 (Red Hat) @@ -132,7 +133,7 @@ Content-Length: 325 <em>(<strong>the content contains a default page to display </pre> -<p><span id="result_box" lang="fr"><span>Notification selon laquelle la ressource demandée n'existe pas :</span></span></p> +<p>Notification selon laquelle la ressource demandée n'existe pas :</p> <pre>HTTP/1.1 <strong>404 Not Found</strong> Date: Sat, 09 Oct 2010 14:33:02 GMT @@ -147,14 +148,14 @@ Content-Type: text/html </pre> -<h3 id="Codes_d'état_de_réponse"><span class="short_text" id="result_box" lang="fr"><span>Codes d'état de réponse</span></span></h3> +<h3 id="Codes_d'état_de_réponse">Codes d'état de réponse</h3> -<p><span id="result_box" lang="fr"><span><a href="/fr/docs/Web/HTTP/Status">Les codes d'état de réponse HTTP</a> indiquent si une requête HTTP spécifique a été effectuée avec succès.</span> <span>Les réponses sont regroupées en cinq classes: réponses d'information, réponses réussies, redirections, erreurs de client et erreurs de serveurs.</span></span></p> +<p><a href="/fr/docs/Web/HTTP/Status">Les codes d'état de réponse HTTP</a> indiquent si une requête HTTP spécifique a été effectuée avec succès. Les réponses sont regroupées en cinq classes: réponses d'information, réponses réussies, redirections, erreurs de client et erreurs de serveurs.</p> <ul> - <li>{{HTTPStatus(200)}}: OK. <span class="short_text" id="result_box" lang="fr"><span>La demande a réussi.</span></span></li> - <li>{{HTTPStatus(301)}}: Moved Permanently. <span id="result_box" lang="fr"><span>Ce code de réponse signifie que l'URL de la ressource demandée a été modifiée.</span></span></li> - <li>{{HTTPStatus(404)}}: Not Found. <span id="result_box" lang="fr"><span>Le serveur ne peut pas trouver la ressource demandée.</span></span></li> + <li>{{HTTPStatus(200)}}: OK. La demande a réussi.</li> + <li>{{HTTPStatus(301)}}: Moved Permanently. Ce code de réponse signifie que l'URL de la ressource demandée a été modifiée.</li> + <li>{{HTTPStatus(404)}}: Not Found. Le serveur ne peut pas trouver la ressource demandée.</li> </ul> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/http/status/103/index.html b/files/fr/web/http/status/103/index.html index cc3acded03..a3ae54084a 100644 --- a/files/fr/web/http/status/103/index.html +++ b/files/fr/web/http/status/103/index.html @@ -17,7 +17,7 @@ translation_of: Web/HTTP/Status/103 <h2 id="Spécifications">Spécifications</h2> -<table class="standard-table" style="height: 82px; width: 852px;"> +<table class="standard-table"> <thead> <tr> <th scope="col">Spécification</th> @@ -28,7 +28,7 @@ translation_of: Web/HTTP/Status/103 <tbody> <tr> <td>{{RFC(8297, "103 Early Hints")}}</td> - <td><span class="spec-RFC">IETF RFC</span></td> + <td>IETF RFC</td> <td>Première version</td> </tr> </tbody> diff --git a/files/fr/web/http/status/206/index.html b/files/fr/web/http/status/206/index.html index 41a72c6fda..1d975a9ed9 100644 --- a/files/fr/web/http/status/206/index.html +++ b/files/fr/web/http/status/206/index.html @@ -22,7 +22,7 @@ translation_of: Web/HTTP/Status/206 <p>Une réponse qui contient une seule plage :</p> -<pre class="newpage">HTTP/1.1 206 Partial Content +<pre>HTTP/1.1 206 Partial Content Date: Wed, 15 Nov 2015 06:25:24 GMT Last-Modified: Wed, 15 Nov 2015 04:58:08 GMT Content-Range: bytes 21010-47021/47022 @@ -33,7 +33,7 @@ Content-Type: image/gif <p>Une réponse qui contient plusieurs plages :</p> -<pre class="newpage">HTTP/1.1 206 Partial Content +<pre>HTTP/1.1 206 Partial Content Date: Wed, 15 Nov 2015 06:25:24 GMT Last-Modified: Wed, 15 Nov 2015 04:58:08 GMT Content-Length: 1741 diff --git a/files/fr/web/http/status/303/index.html b/files/fr/web/http/status/303/index.html index 1cb095f2ce..5e6def829e 100644 --- a/files/fr/web/http/status/303/index.html +++ b/files/fr/web/http/status/303/index.html @@ -13,7 +13,7 @@ translation_of: Web/HTTP/Status/303 <h2 id="Statut">Statut</h2> -<pre class="syntaxbox notranslate">303 See Other</pre> +<pre class="syntaxbox">303 See Other</pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/http/status/308/index.html b/files/fr/web/http/status/308/index.html index 3328ec709a..b6986ad4f7 100644 --- a/files/fr/web/http/status/308/index.html +++ b/files/fr/web/http/status/308/index.html @@ -14,7 +14,7 @@ translation_of: Web/HTTP/Status/308 <p>La méthode de requête et son corps ne sont pas modifiés, toutefois {{HTTPStatus("301")}} peut parfois changer la méthode vers {{HTTPHeader("GET")}}.</p> <div class="note"> -<p><strong>Note :</strong> Certaines applications Web peuvent utiliser <code>308 Permanent Redirect</code> de façon non standard et pour d'autres usages. Par exemple, Google Drive utilise la réponse <code>308 Resume Incomplete</code> pour indiquer au client un chargement incomplet qui est bloqué.<sup><a href="https://developers.google.com/drive/v3/web/manage-uploads#resumable">[1]</a></sup></p> +<p><strong>Note :</strong> Certaines applications Web peuvent utiliser <code>308 Permanent Redirect</code> de façon non standard et pour d'autres usages. Par exemple, Google Drive utilise la réponse <code>308 Resume Incomplete</code> pour indiquer au client un chargement incomplet qui est bloqué (<a href="https://developers.google.com/drive/v3/web/manage-uploads#resumable">source</a>).</p> </div> <h2 id="Statut">Statut</h2> diff --git a/files/fr/web/http/status/402/index.html b/files/fr/web/http/status/402/index.html index 257b479eca..8120dd443d 100644 --- a/files/fr/web/http/status/402/index.html +++ b/files/fr/web/http/status/402/index.html @@ -5,9 +5,9 @@ translation_of: Web/HTTP/Status/402 --- <p>{{SeeCompatTable}}</p> -<p>Le code de statut de réponse HTTP <strong style=""><code>402 Payment Required</code></strong> est une erreur non standard <span style="">réservée pour un usage futur.</span></p> +<p>Le code de statut de réponse HTTP <strong><code>402 Payment Required</code></strong> est une erreur non standard réservée pour un usage futur.</p> -<p><span style="">En général ce code indique que la requete ne peut pas etre traitée avant que le client fasse un paiement. Initialement il a été créé afin de permettre des (micro) paiements numériques et indiquerait que le contenu demandé n'est pas disponible avant que le client ne fasse un paiement. Cependant, aucune convention d'usage commune n'existe et différentes entités l'utilisent dans différents contextes.</span></p> +<p>En général ce code indique que la requete ne peut pas etre traitée avant que le client fasse un paiement. Initialement il a été créé afin de permettre des (micro) paiements numériques et indiquerait que le contenu demandé n'est pas disponible avant que le client ne fasse un paiement. Cependant, aucune convention d'usage commune n'existe et différentes entités l'utilisent dans différents contextes.</p> <h2 id="Statut">Statut</h2> diff --git a/files/fr/web/http/status/403/index.html b/files/fr/web/http/status/403/index.html index 9bf9f04287..060427d7a6 100644 --- a/files/fr/web/http/status/403/index.html +++ b/files/fr/web/http/status/403/index.html @@ -16,11 +16,11 @@ translation_of: Web/HTTP/Status/403 <h2 id="Statut">Statut</h2> -<pre class="syntaxbox notranslate">403 Forbidden</pre> +<pre class="syntaxbox">403 Forbidden</pre> <h2 id="Exemple_de_réponse">Exemple de réponse</h2> -<pre class="notranslate">HTTP/1.1 403 Forbidden +<pre>HTTP/1.1 403 Forbidden Date: Wed, 21 Oct 2015 07:28:00 GMT </pre> diff --git a/files/fr/web/http/status/405/index.html b/files/fr/web/http/status/405/index.html index 819656237b..bccc745b4e 100644 --- a/files/fr/web/http/status/405/index.html +++ b/files/fr/web/http/status/405/index.html @@ -12,7 +12,7 @@ translation_of: Web/HTTP/Status/405 <p>Le code de statut de réponse HTTP <code><strong>405</strong></code><strong><code> Method Not Allowed</code></strong> indique que la méthode utilisée pour la requête est connue du serveur mais qu'elle n'est pas supportée par la ressource ciblée. </p> -<p class="newpage">Le serveur doit générer un champ <strong><code>Allow</code></strong> dans le header en cas de réponse 405, contenant la liste des méthodes supportées par la ressource ciblée.</p> +<p>Le serveur doit générer un champ <strong><code>Allow</code></strong> dans le header en cas de réponse 405, contenant la liste des méthodes supportées par la ressource ciblée.</p> <h2 id="Statut">Statut</h2> diff --git a/files/fr/web/http/status/422/index.html b/files/fr/web/http/status/422/index.html index 5aabeae4e4..c79b1e9f78 100644 --- a/files/fr/web/http/status/422/index.html +++ b/files/fr/web/http/status/422/index.html @@ -15,7 +15,7 @@ translation_of: Web/HTTP/Status/422 <p>Le code de statut de réponse HTTP <code><strong>422 Unprocessable Entity</strong></code> indique que le serveur a compris le type de contenu de la requête et que la syntaxe de la requête est correcte mais que le serveur n'a pas été en mesure de réaliser les instructions demandées.</p> <div class="warning"> -<p><strong>Important </strong>: Le client ne doit pas renvoyer cette requête sans modification.</p> +<p><strong>Attention :</strong> Le client ne doit pas renvoyer cette requête sans modification.</p> </div> <h2 id="Statut">Statut</h2> diff --git a/files/fr/web/http/status/502/index.html b/files/fr/web/http/status/502/index.html index 3a125a68c5..931b6c20d5 100644 --- a/files/fr/web/http/status/502/index.html +++ b/files/fr/web/http/status/502/index.html @@ -15,7 +15,7 @@ translation_of: Web/HTTP/Status/502 <h2 id="Statut">Statut</h2> -<pre class="syntaxbox notranslate">502 Bad Gateway</pre> +<pre class="syntaxbox">502 Bad Gateway</pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/http/status/503/index.html b/files/fr/web/http/status/503/index.html index 4436a30059..11535dcc5e 100644 --- a/files/fr/web/http/status/503/index.html +++ b/files/fr/web/http/status/503/index.html @@ -17,7 +17,7 @@ translation_of: Web/HTTP/Status/503 <h2 id="Statut">Statut</h2> -<pre class="syntaxbox notranslate">503 Service Unavailable</pre> +<pre class="syntaxbox">503 Service Unavailable</pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/http/status/506/index.html b/files/fr/web/http/status/506/index.html index 010112acf8..431d3dae17 100644 --- a/files/fr/web/http/status/506/index.html +++ b/files/fr/web/http/status/506/index.html @@ -15,7 +15,7 @@ translation_of: Web/HTTP/Status/506 <h2 id="Status">Status</h2> -<pre class="syntaxbox notranslate">506 Variant Also Negotiates</pre> +<pre class="syntaxbox">506 Variant Also Negotiates</pre> <h2 id="Specifications">Specifications</h2> diff --git a/files/fr/web/http/status/507/index.html b/files/fr/web/http/status/507/index.html index 51d3061a4a..35f2b1ebda 100644 --- a/files/fr/web/http/status/507/index.html +++ b/files/fr/web/http/status/507/index.html @@ -15,7 +15,7 @@ translation_of: Web/HTTP/Status/507 <h2 id="Status">Status</h2> -<pre class="syntaxbox notranslate">507 Insufficient Storage</pre> +<pre class="syntaxbox">507 Insufficient Storage</pre> <h2 id="Specifications">Specifications</h2> diff --git a/files/fr/web/http/status/508/index.html b/files/fr/web/http/status/508/index.html index 7e97a0ac05..181ba09d36 100644 --- a/files/fr/web/http/status/508/index.html +++ b/files/fr/web/http/status/508/index.html @@ -16,7 +16,7 @@ translation_of: Web/HTTP/Status/508 <h2 id="Statut">Statut</h2> -<pre class="syntaxbox notranslate">508 Loop Detected</pre> +<pre class="syntaxbox">508 Loop Detected</pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/http/status/index.html b/files/fr/web/http/status/index.html index 3d30883fd2..4d7ec75019 100644 --- a/files/fr/web/http/status/index.html +++ b/files/fr/web/http/status/index.html @@ -34,11 +34,7 @@ translation_of: Web/HTTP/Status <dl> <dt>{{HTTPStatus(200, "200 OK")}}</dt> - <dd>La requête a réussi. Le signification du succès peut varier selon la méthode HTTP :</dd> - <dd>GET : La ressource a été récupérée et est retransmise dans le corps du message.<br> - HEAD : Les en-têtes d'entité sont dans le corps du message.<br> - POST : La ressource décrivant le résultat de l'action est transmise dans le corps du message.<br> - TRACE : Le corps du message contient le message de requête tel que reçu par le serveur</dd> + <dd>La requête a réussi. Le signification du succès peut varier selon la méthode HTTP : GET : La ressource a été récupérée et est retransmise dans le corps du message. HEAD : Les en-têtes d'entité sont dans le corps du message. POST : La ressource décrivant le résultat de l'action est transmise dans le corps du message. TRACE : Le corps du message contient le message de requête tel que reçu par le serveur</dd> <dt>{{HTTPStatus(201, "201 Created")}}</dt> <dd>La requête a réussi et une nouvelle ressource a été créée en guise de résultat. Il s'agit typiquement de la réponse envoyée après une requête PUT.</dd> <dt>{{HTTPStatus(202, "202 Accepted")}}</dt> @@ -170,19 +166,18 @@ translation_of: Web/HTTP/Status <dt>{{HTTPStatus(506, "506 Variant Also Negotiates")}}</dt> <dd>Le serveur a une erreur de configuration interne : la négociation de contenu transparente pour la requête aboutit à une dépendance circulaire.</dd> <dt>{{HTTPStatus(507, "507 Insufficient Storage")}}</dt> - <dd>Le serveur a une erreur de configuration interne : la ressource sélectionnée est configurée pour participer elle-même à une négociation de contenu transparente, et n'est par conséquent pas un n<span class="st">œ</span>ud terminal valable dans le processus de négociation.</dd> + <dd>Le serveur a une erreur de configuration interne : la ressource sélectionnée est configurée pour participer elle-même à une négociation de contenu transparente, et n'est par conséquent pas un nœud terminal valable dans le processus de négociation.</dd> <dt>{{HTTPStatus(508, "508 Loop Detected")}} ({{Glossary("WebDAV")}})</dt> <dd>Le serveur a détecté une boucle infinie en traitant la requête.</dd> <dt>{{HTTPStatus(510, "510 Not Extended")}}</dt> <dd>Des extensions supplémentaires sont requises afin que le serveur puisse satisfaire la requête.</dd> <dt>{{HTTPStatus(511, "511 Network Authentication Required")}}</dt> <dd>Le code de statut 511 indique que le client doit s'authentifier afin de pouvoir accéder au réseau.</dd> - <dt> - <h2 id="Voir_aussi">Voir aussi</h2> +</dl> + +<h2 id="Voir_aussi">Voir aussi</h2> - <ul> +<ul> <li><a href="https://fr.wikipedia.org/wiki/Liste_des_codes_HTTP">Liste des codes de statut HTTP sur Wikipedia</a></li> - <li><a href="http://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml">Registre officiel des codes de statut HTTP par l'IANA</a><span class="hidden"> </span></li> - </ul> - </dt> -</dl> + <li><a href="http://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml">Registre officiel des codes de statut HTTP par l'IANA</a></li> +</ul>
\ No newline at end of file diff --git a/files/fr/web/javascript/reference/global_objects/array/index.md b/files/fr/web/javascript/reference/global_objects/array/index.md index ad6c63e298..3f87bf5b74 100644 --- a/files/fr/web/javascript/reference/global_objects/array/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/index.md @@ -1,21 +1,25 @@ --- title: Array slug: Web/JavaScript/Reference/Global_Objects/Array -tags: - - Array - - JavaScript - - Reference translation_of: Web/JavaScript/Reference/Global_Objects/Array original_slug: Web/JavaScript/Reference/Objets_globaux/Array --- {{JSRef}} -L'objet global **`Array`** est utilisé pour créer des tableaux. Les tableaux sont des objets de haut-niveau (en termes de complexité homme-machine) semblables à des listes. +L'objet global **`Array`** est utilisé pour créer des tableaux. Les tableaux sont des objets de haut-niveau (en termes de complexité homme-machine) semblables à des listes. + +## Description + +Les tableaux sont des objets semblables à des listes dont le prototype possède des méthodes qui permettent de parcourir et de modifier le tableau. Ni la longueur ni le type des éléments d'un tableau JavaScript sont fixés. Comme la longueur d'un tableau peut varier à tout moment et que les données peuvent être stockées à des emplacements qui ne sont pas nécessairement contigus, les tableaux JavaScript ne sont pas forcément « pleins » / denses. Généralement, ces particularités sont appréciables mais si elles ne correspondent pas à votre usage, vous pourriez vouloir utiliser les tableaux typés. + +Les tableaux ne peuvent pas utiliser de chaînes de caractères comme indices pour les éléments (à la façon des [tableaux associatifs](https://fr.wikipedia.org/wiki/Tableau_associatif)) mais doivent utiliser des entiers. Définir une valeur ou tenter d'y accéder avec un indice non-entier via [la notation entre crochet](/fr/docs/Web/JavaScript/Guide/Working_with_Objects#objects_and_properties) (ou [la notation avec le point](/fr/docs/Web/JavaScript/Reference/Operators/Property_Accessors)) ne définira ou ne récupèrera pas la valeur mais définira ou récupèrera une variable associée [aux propriétés de l'objet](/fr/docs/Web/JavaScript/Data_structures#properties) formé par le tableau. Les propriétés et les éléments d'un tableau sont distincts et [les opérations de parcours et de modification du tableau](/fr/docs/Web/JavaScript/Guide/Indexed_collections#array_methods) ne peuvent pas être appliquées à ces propriétés. + +### Opérations fréquentes **Créer un tableau** ```js -var fruits = ['Apple', 'Banana']; +let fruits = ['Apple', 'Banana']; console.log(fruits.length); // 2 @@ -24,10 +28,10 @@ console.log(fruits.length); **Accéder (via son index) à un élément du tableau** ```js -var first = fruits[0]; +let first = fruits[0]; // Apple -var last = fruits[fruits.length - 1]; +let last = fruits[fruits.length - 1]; // Banana ``` @@ -44,28 +48,28 @@ fruits.forEach(function(item, index, array) { **Ajouter à la fin du tableau** ```js -var newLength = fruits.push('Orange'); +let newLength = fruits.push('Orange'); // ["Apple", "Banana", "Orange"] ``` **Supprimer le dernier élément du tableau** ```js -var last = fruits.pop(); // supprime Orange (à la fin) +let last = fruits.pop(); // supprime Orange (à la fin) // ["Apple", "Banana"]; ``` **Supprimer le premier élément du tableau** ```js -var first = fruits.shift(); // supprime Apple (au début) +let first = fruits.shift(); // supprime Apple (au début) // ["Banana"]; ``` **Ajouter au début du tableau** ```js -var newLength = fruits.unshift('Strawberry') // ajoute au début +let newLength = fruits.unshift('Strawberry') // ajoute au début // ["Strawberry", "Banana"]; ``` @@ -75,14 +79,14 @@ var newLength = fruits.unshift('Strawberry') // ajoute au début fruits.push('Mango'); // ["Strawberry", "Banana", "Mango"] -var pos = fruits.indexOf('Banana'); +let pos = fruits.indexOf('Banana'); // 1 ``` **Supprimer un élément par son index** ```js -var removedItem = fruits.splice(pos, 1); // supprime 1 élément à la position pos +let removedItem = fruits.splice(pos, 1); // supprime 1 élément à la position pos // ["Strawberry", "Mango"] ``` @@ -90,13 +94,13 @@ var removedItem = fruits.splice(pos, 1); // supprime 1 élément à la position **Supprimer des éléments à partir d'un index** ```js -var vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot']; +let vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot']; console.log(vegetables); // ["Cabbage", "Turnip", "Radish", "Carrot"] -var pos = 1, n = 2; +let pos = 1, n = 2; -var removedItems = vegetables.splice(pos, n); +let removedItems = vegetables.splice(pos, n); // n définit le nombre d'éléments à supprimer, // à partir de la position pos @@ -110,43 +114,22 @@ console.log(removedItems); **Copier un tableau** ```js -var shallowCopy = fruits.slice(); // crée un nouveau tableau qui contient les éléments de fruits +let shallowCopy = fruits.slice(); // crée un nouveau tableau qui contient les éléments de fruits // ["Strawberry", "Mango"] ``` -## Syntaxe - - [element0, element1, ..., elementN] - new Array(element0, element1[, ...[, elementN]]) - new Array(arrayLength) - -### Paramètres - -- `element0, element1, ..., elementN` - - : Un tableau est initialisé avec les éléments donnés, sauf dans le cas où un seul argument est passé au constructeur `Array` et que cet argument est un nombre. (Voir ci-après.) Notez que ce cas spécial s'applique aux tableaux créés avec le constructeur `Array`, et non aux tableaux créés avec la syntaxe crochets. -- `arrayLength` - - : Si le seul argument passé au constructeur `Array` est un entier entre 0 et 2^32-1 (inclus), un nouveau tableau sera créé avec ce nombre d'éléments (note : le tableau sera créé avec `arrayLength` emplacements vides, et non avec de véritables valeurs `undefined`). Si l'argument est un nombre en dehors de la plage autorisée, une exception {{jsxref("RangeError")}} est levée. - -## Description - -Les tableaux sont des objets qui servent de liste et possèdent plusieurs méthodes incorporées pour exécuter des opérations de parcours et de modification. - -Ni la taille d'un tableau ni le types de ses éléments n'est fixé. Puisque la dimension d'un tableau peut augmenter ou diminuer à tout moment, et que les éléments du tableau peuvent être stockés à des emplacements non contigus, les tableaux ne sont pas garantis d'être compacts. En général, ce sont des caractéristiques pratiques, mais si ces fonctionnalités ne sont pas souhaitables pour votre cas d'utilisation, vous pouvez envisager d'utiliser des tableaux typés. - -Les tableaux ne peuvent pas utiliser de chaîne de caractères comme indice (comme dans un [tableau associatif](https://fr.wikipedia.org/wiki/Tableau_associatif)) mais des entiers. Utiliser ou accéder à des index non entiers, en utilisant la [notation avec crochets](https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#Les_objets_et_les_propri%C3%A9t%C3%A9s) (ou [avec point](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_membres)) ne va pas définir ou récupérer un élément sur le tableau lui-même, mais une variable associée à la [collection de propriétés d'objet](https://developer.mozilla.org/fr/docs/Web/JavaScript/Structures_de_donn%C3%A9es#Propri%C3%A9t%C3%A9s) de ce tableau. Les propriétés du tableau et la liste de ses éléments sont séparées, et les [opérations de parcours et de modification](https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Collections_index%C3%A9es#M%C3%A9thodes_des_tableaux) ne s'appliquent pas à ces propriétés. - ### Accéder aux éléments d'un tableau -Les tableaux sont indexés à partir de zéro: le premier élément d'un tableau a pour indice `0`, et la position du dernier élément est donnée par {{jsxref("Array.length", "length")}} moins 1. Si on utilise un indice en dehors de cet intervalle, le résultat sera {{jsxref("undefined")}} (sous réserve qu'aucune propriété n'ait été ajoutée au préalable avec cet indice). +Les tableaux sont indexés à partir de zéro: le premier élément d'un tableau a pour indice `0`, et la position du dernier élément est donnée par [`length`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/length) moins 1. Si on utilise un indice en dehors de cet intervalle, le résultat sera [`undefined`](/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined) (sous réserve qu'aucune propriété n'ait été ajoutée au préalable avec cet indice). ```js -var arr = ["le premier élément", "le deuxième élément", "le dernier élément"]; +let arr = ["le premier élément", "le deuxième élément", "le dernier élément"]; console.log(arr[0]); // affiche "le premier élément" console.log(arr[1]); // affiche "le deuxième élément" console.log(arr[arr.length - 1]);// affiche "le dernier élément" ``` -Les éléments d'un tableau sont des propriétés d'objets de la même manière que `toString` est une propriété. Cependant, essayer d'accéder à un élément du tableau comme suit renverra une erreur car le nom de la propriété utilisé est invalide : +Les éléments d'un tableau sont des propriétés d'objets de la même manière que `toString` est une propriété. Cependant, essayer d'accéder à un élément du tableau comme suit renverra une erreur, car le nom de la propriété utilisé est invalide : ```js console.log(arr.0); // erreur de syntaxe @@ -155,7 +138,7 @@ console.log(arr.0); // erreur de syntaxe Ce comportement est tout à fait normal. En effet, il n'est pas possible d'accéder aux propriétés dont le nom commence par un chiffre avec cette notation (le point). Il est nécessaire d'utiliser la syntaxe avec les crochets pour accéder à ces propriétés. Ainsi, si pour un objet quelconque, on avait une propriété nommée '`3d`', on ne pourra y faire référence qu'en utilisant les crochets. Exemple : ```js -var années = [1950, 1960, 1970, 1980, 1990, 2000, 2010]; +let années = [1950, 1960, 1970, 1980, 1990, 2000, 2010]; console.log(années.0); // erreur de syntaxe console.log(années[0]); // fonctionne correctement @@ -175,7 +158,7 @@ console.log(années["2"] != années["02"]); De manière similaire, les propriétés nommées avec des mots-clés réservés ne peuvent être consultées qu'en utilisant la syntaxe avec crochets : ```js -var promise = { +let promise = { 'var' : 'text', 'array': [1, 2, 3, 4] }; @@ -183,20 +166,18 @@ var promise = { console.log(promise['var']); ``` -> **Note :** Depuis Firefox 40.0a2, il est possible d'utiliser la notation avec le point pour accéder aux propriétés dont les noms ne sont pas des identifiants valides. - ### Relation entre `length` et les propriétés numériques -La propriété {{jsxref("Array.length", "length")}} d'un tableau est liée aux propriétés numériques du tableau. Plusieurs méthodes natives utilisent cette propriété : {{jsxref("Array.join", "join()")}}, {{jsxref("Array.slice", "slice()")}}, {{jsxref("Array.indexOf", "indexOf()")}}, etc. D'autres méthodes comme {{jsxref("Array.push", "push()")}} et {{jsxref("Array.splice", "splice()")}} modifient le tableau et la propriété {{jsxref("Array.length", "length")}}. +La propriété [`length`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/length) d'un tableau est liée aux propriétés numériques du tableau. Plusieurs méthodes natives utilisent cette propriété : [`join()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/join), [`slice()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/slice), [`indexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf), etc. D'autres méthodes comme [`push()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/push) et [`splice()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) modifient le tableau et la propriété [`length`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/length). ```js -var fruits = []; +let fruits = []; fruits.push("banane", "pomme", "pêche"); console.log(fruits.length); // 3 ``` -Lorsqu'on définit une nouvelle propriété numérique pour un tableau, que l'index utilisé est valide et que celui-ci est dehors des limites actuelles du tableau, le moteur JavaScript mettra à jour la propriété {{jsxref("Array.length", "length")}} : +Lorsqu'on définit une nouvelle propriété numérique pour un tableau, que l'index utilisé est valide et que celui-ci est dehors des limites actuelles du tableau, le moteur JavaScript mettra à jour la propriété [`length`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/length) : ```js fruits[5] = "mangue"; @@ -213,7 +194,7 @@ console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] console.log(fruits.length); // 10 ``` -En revanche, si on diminue la valeur de {{jsxref("Array.length", "length")}}, cela supprimera des éléments : +En revanche, si on diminue la valeur de [`length`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/length), cela supprimera des éléments : ```js fruits.length = 2; @@ -221,19 +202,19 @@ console.log(Object.keys(fruits)); // ['0', '1'] console.log(fruits.length); // 2 ``` -Pour plus d'informations sur le comportement de cette propriété, voir la page {{jsxref("Array.length")}}. +Pour plus d'informations sur le comportement de cette propriété, voir la page [`Array.length`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/length). ### Création d'un tableau utilisant le résultat d'une correspondance -Le résultat d'une correspondance entre une expression rationnelle et une chaîne peut créer un tableau. Ce tableau possède des propriétés et des éléments qui fournissent des informations sur cette correspondance. Il est possible d'obtenir un tableau grâce aux méthodes {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, and {{jsxref("String.replace")}}. Pour mieux comprendre le fonctionnement de ces propriétés et de ces éléments, on pourra utiliser l'exemple et le tableau qui suivent : +Le résultat d'une correspondance entre une expression rationnelle et une chaîne peut créer un tableau. Ce tableau possède des propriétés et des éléments qui fournissent des informations sur cette correspondance. Il est possible d'obtenir un tableau grâce aux méthodes [`RegExp.exec()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec), [`String.match()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/match), et [`String.replace()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace). Pour mieux comprendre le fonctionnement de ces propriétés et de ces éléments, on pourra utiliser l'exemple et le tableau qui suivent : ```js // Matche un "d" suivit par un ou plusieurs "b" et suivit d'un "d" // Capture les "b" et le "d" qui suit // Ignore la casse -var maRegexp = /d(b+)(d)/i; -var monTableau = maRegexp.exec("cdbBdbsbz"); +let maRegexp = /d(b+)(d)/i; +let monTableau = maRegexp.exec("cdbBdbsbz"); console.log(monTableau); // [ 0:"dbBd", 1:"bB", 2:"d", index:1, input:"cdbBdbsbz", length:3 ] @@ -241,13 +222,15 @@ console.log(monTableau); Les propriétés et les éléments retournés depuis cette correspondance sont les suivants : -<table class="fullwidth-table"> - <tbody> +<table class="fullwidth-table standard-table"> + <thead> <tr> - <td class="header">Propriété/Élément</td> - <td class="header">Description</td> - <td class="header">Exemple</td> + <th class="header" scope="col">Propriété/Élément</th> + <th class="header" scope="col">Description</th> + <th class="header" scope="col">Exemple</th> </tr> + </thead> + <tbody> <tr> <td><code>input</code></td> <td> @@ -284,80 +267,99 @@ Les propriétés et les éléments retournés depuis cette correspondance sont l </tbody> </table> -## Propriétés +## Constructeur -- {{jsxref("Array.prototype.length")}} - - : La propriété de longueur pour le constructeur `Array`, elle vaut 1. -- {{jsxref("Array.@@species", "get Array[@@species]")}} +- [`Array()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/Array) + - : Crée un nouvel objet `Array`. +## Propriétés statiques + +- [`get Array[@@species]`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/@@species) - : La fonction de construction utilisée pour créer les objets dérivés. -- {{jsxref("Array.prototype")}} - - : Cette propriété permet d'ajouter des propriétés à tous les tableaux. -## Méthodes +## Méthodes statiques -- {{jsxref("Array.from()")}} +- [`Array.from()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/from) - : Cette méthode permet de créer une nouvelle instance d'`Array` à partir d'un objet semblable à un tableau ou d'un itérable. -- {{jsxref("Array.isArray()")}} +- [`Array.isArray()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray) - : Cette méthode renvoie `true` si la variable est un tableau, `false` sinon. -- {{jsxref("Array.of()")}} +- [`Array.of()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/of) - : Cette méthode permet de créer une nouvelle instance d'`Array` à partir d'un nombre variable d'arguments (peu importe la quantité ou le type des arguments utilisés). -## Instances d'`Array` - -Toutes les instances d'`Array` héritent de {{jsxref("Array.prototype")}}. Le prototype du constructeur `Array` peut être modifié afin d'affecter l'ensemble des instances grâce à l'héritage. - -### Les propriétés - -{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Propriétés')}} - -### Les méthodes - -#### Les mutateurs - -{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Mutateurs')}} - -#### Les accesseurs - -{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Accesseurs')}} - -#### Les méthodes d'itération - -{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Méthodes_itératives')}} - -## Les méthodes génériques de manipulation de tableaux - -> **Attention :** Ces méthodes génériques ne sont pas standard. Elles sont dépréciées et seront retirées dans un avenir proche. Celles-ci ne peuvent être utilisées sur tous les navigateurs. Toutefois, il existe [un _shim_ disponible sur GitHub](https://github.com/plusdude/array-generics). - -Parfois, on peut vouloir appliquer des méthodes pour les tableaux sur des chaînes ou d'autres objets semblables aux tableaux (ex. : l'objet {{jsxref("Fonctions/arguments", "arguments", "", 1)}}). Une chaîne sera donc traitée comme un tableau de caractères. Ainsi, si on souhaite vérifier que chaque caractère d'une chaîne `str` est bien une lettre comprise entre 'a' et 'z', on pourra utiliser : - -```js -function estUneLettre(caractère) { - return caractère >= 'a' && caractère <= 'z'; -} - -if (Array.prototype.every.call(str, estUneLettre)) { - console.log("La chaîne '" + str + "' ne contient que des lettres entre a et z!"); -} -``` - -Cette notation étant plutôt verbeuse, une notation raccourcie a été introduite avec JavaScript 1.6 : - -```js -if (Array.every(str,estUneLettre)) { - console.log("La chaîne '" + str + "' ne contient que des lettres entre a et z !"); -} -``` - -Des {{jsxref("Objets_globaux/String", "méthodes génériques", "#Méthodes_génériques_de_String", 1)}} sont également disponibles pour les {{jsxref("Objets_globaux/String", "String")}}. - -Cette fonctionnalité ne fait pas partie du standard ECMAScript et n'est pas prise en charge par les navigateurs qui ne sont pas basés sur Gecko. Comme alternative standard, vous pouvez convertir votre objet en véritable tableau grâce à la méthode {{jsxref("Array.from()")}} (attention, cette méthode n'est pas supportée dans les anciens navigateurs) : - -```js -if (Array.from(str).every(estUneLettre)) { - console.log("La chaîne '" + str + "' contient uniquement des lettres !"); -} -``` +## Propriétés des instances +- [`Array.prototype.length`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/length) + - : La propriété de longueur pour le constructeur `Array`, elle vaut 1. +- [`Array.prototype[@@unscopables]`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/@@unscopables) + - : Un symbole contenant les noms des propriétés à exclure d'une portée de liaison avec [`with`](/fr/docs/Web/JavaScript/Reference/Statements/with). + +## Méthodes des instances + +- [`Array.prototype.at()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/at){{Experimental_Inline}} + - : REnvoie l'élément du tableau à l'indice indiqué. Les entiers négatifs sont acceptés en argument et, dans ce cas, la recherche de l'élément se fait depuis la fin du tableau. +- [`Array.prototype.concat()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) + - : Renvoie un nouveau tableau qui est le tableau courant, joint avec d'autres tableaux ou valeurs. +- [`Array.prototype.copyWithin()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin) + - : Copie une séquence d'élément d'un tableau au sein du tableau courant. +- [`Array.prototype.entries()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/entries) + - : Renvoie un nouvel _itérateur de tableau_ qui contient les paires de clés/valeurs pour chaque indice dans le tableau. +- [`Array.prototype.every()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/every) + - : Renvoie `true` si chaque élément du tableau vérifie la condition fixée par la fonction passée en argument. +- [`Array.prototype.fill()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/fill) + - : Remplit tous les éléments d'un tableau à partir d'un indice de début jusqu'à un indice de fin avec une valeur statique. +- [`Array.prototype.filter()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) + - : Renvoie un nouveau tableau qui contient tous les éléments du tableau courant pour lesquels la fonction de filtre passée en argument a renvoyé `true`. +- [`Array.prototype.find()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/find) + - : Renvoie l'élément trouvé dans le tableau si un des éléments satisfait la condition fixée par la fonction passée en paramètre. Renvoie `undefined` si aucun élément correspondant n'est trouvé. +- [`Array.prototype.findIndex()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex) + - : Renvoie l'indice de l'élément trouvé dans le tableau si un élément du tableau satisfait la condition fixée par la fonction passée en argument ou `-1` si aucun élément n'est trouvé. +- [`Array.prototype.flat()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/flat) + - : Renvoie un nouveau tableau avec l'ensemble des sous-éléments concaténés récursivement dans le tableau jusqu'à une profondeur indiquée. +- [`Array.prototype.flatMap()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap) + - : Renvoie un nouveau tableau formé en appliquant une fonction de rappel donnée à chaque élément du tableau puis en « aplatissant » le tableau d'un niveau. +- [`Array.prototype.forEach()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) + - : Appelle une fonction pour chaque élément du tableau. +- [`Array.prototype.includes()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) + - : Détermine si le tableau contient une valeur et renvoie `true` ou `false` selon le cas de figure. +- [`Array.prototype.indexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf) + - : Renvoie l'indice le plus petit d'un élément du tableau égal à la valeur passée en argument ou `-1` si aucun élément n'est trouvé. +- [`Array.prototype.join()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/join) + - : Fusionne tous les éléments du tableau en une chaîne de caractères. +- [`Array.prototype.keys()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/keys) + - : Renvoie un nouvel _itérateur de tableau_ qui contient les clés de chaque indice du tableau. +- [`Array.prototype.lastIndexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf) + - : Renvoie le plus grand indice d'un élément du tableau égal à la valeur passée en argument ou `-1` si aucun élément n'est trouvé. +- [`Array.prototype.map()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/map) + - : Renvoie un nouveau tableau contenant les résultats de l'appel de la fonction passée en argument sur chaque élément du tableau. +- [`Array.prototype.pop()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/pop) + - : Retire le dernier élément du tableau et renvoie cet élément. +- [`Array.prototype.push()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/push) + - : Ajoute un ou plusieurs éléments à la fin du tableau et renvoie la nouvelle longueur (`length`) du tableau. +- [`Array.prototype.reduce()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) + - : Applique une fonction sur un accumulateur et chaque valeur du tableau (de gauche à droite) afin de réduire le tableau à une seule valeur. +- [`Array.prototype.reduceRight()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/ReduceRight) + - : Applique une fonction sur un accumulateur et chaque valeur du tableau (de droite à gauche) afin de réduire le tableau à une seule valeur. +- [`Array.prototype.reverse()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) + - : Inverse l'ordre des éléments du tableau _à même le tableau_ (le premier élément devient le dernier, le dernier devient le premier, etc.). +- [`Array.prototype.shift()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/shift) + - : Retire le premier élément du tableau et renvoie cet élément. +- [`Array.prototype.slice()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) + - : Extrait une section du tableau courant et renvoie un nouveau tableau. +- [`Array.prototype.some()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/some) + - : Renvoie `true` si au moins un des éléments du tableau satisfait la condition fournie par la fonction passée en paramètre. +- [`Array.prototype.sort()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) + - : Trie les éléments du tableau à même le tableau et renvoie le tableau. +- [`Array.prototype.splice()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) + - : Ajoute et/ou retire des éléments du tableau. +- [`Array.prototype.toLocaleString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString) + - : Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Cette méthode surcharge la méthode [`Object.prototype.toLocaleString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/toLocaleString). +- [`Array.prototype.toString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/toString) + - : Renvoie une chaîne de caractères qui représente le tableau et ses éléments. Cette méthode surcharge la méthode [`Object.prototype.toString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/toString). +- [`Array.prototype.unshift()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift) + - : Ajoute un ou plusieurs éléments à l'avant du tableau et renvoie la nouvelle longueur du tableau. +- [`Array.prototype.values()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/values) + - : Renvoie un nouvel _itérateur de tableau_ qui contient les valeurs pour chaque indice du tableau. +- <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator()"><code>Array.prototype[@@iterator]()</code></a> + - : Renvoie un nouvel _itérateur de tableau_ qui contient les valeurs pour chaque indice du tableau. ## Exemples ### Créer un tableau @@ -365,7 +367,7 @@ if (Array.from(str).every(estUneLettre)) { Dans l'exemple suivant, on crée un tableau `tableauMsg`, d'une longueur nulle. Ensuite, on lui affecte des valeurs pour `tableauMsg[0]` et `tableauMsg[99]`, ce qui aura pour effet de modifier la propriété `length` (qui vaudra alors 100). ```js -var tableauMsg = []; +let tableauMsg = []; tableauMsg[0] = 'Coucou'; tableauMsg[99] = 'monde'; @@ -379,7 +381,7 @@ if (tableauMsg.length === 100) { Dans l'exemple qui suit, on crée un plateau d'échec grâce à un tableau en deux dimensions qui contient des caractères. Le premier mouvement est effectué en copiant 'p' de (6,4) vers (4,4). La position anciennement occupée par le pion (6,4) devient vide. ```js -var plateau = [ +let plateau = [ ['T','C','F','R','K','F','C','T'], ['P','P','P','P','P','P','P','P'], [' ',' ',' ',' ',' ',' ',' ',' '], @@ -421,7 +423,7 @@ Voici le résultat affiché : ```js values = []; -for (var x = 0; x < 10; x++){ +for (let x = 0; x < 10; x++){ values.push([ 2 ** x, 2 * x ** 2 @@ -449,22 +451,15 @@ Résulte en ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale | -| {{SpecName('ES5.1', '#sec-15.4', 'Array')}} | {{Spec2('ES5.1')}} | Ajout de nouvelles méthodes : {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}} | -| {{SpecName('ES6', '#sec-array-objects', 'Array')}} | {{Spec2('ES6')}} | Ajout de nouvelles méthodes : {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}} | -| {{SpecName('ES7', '#sec-array-objects', 'Array')}} | {{Spec2('ES7')}} | Ajout de la méthode {{jsxref("Array.prototype.includes()")}}. | -| {{SpecName('ESDraft', '#sec-array-objects', 'Array')}} | {{Spec2('ESDraft')}} | | - +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("javascript.builtins.Array")}} +{{Compat}} ## Voir aussi -- [Guide JavaScript : indexer les propriétés d'un objet](/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#Indexer_les_propri.C3.A9t.C3.A9s_d'un_objet) -- [Guide JavaScript : Les objets natifs : l'objet `Array`](/fr/docs/Web/JavaScript/Guide/Objets_élémentaires_JavaScript#Les_tableaux_.3A_objet_Array) -- [Les compréhensions de tableau](/fr/docs/Web/JavaScript/Reference/Opérateurs/Compréhensions_de_tableau) -- [Émulation pour les méthodes génériques et autres fonctionnalités ECMAScript 5 pour les tableaux](https://github.com/plusdude/array-generics) (en anglais) -- [Les tableaux typés](/fr/docs/Web/JavaScript/Tableaux_typés) +- Chapitres du guide JavaScript + - [Guide JavaScript : indexer les propriétés d'un objet](/fr/docs/Web/JavaScript/Guide/Working_with_Objects#indexing_object_properties) + - [Guide JavaScript : Les objets natifs : l'objet `Array`](/fr/docs/Web/JavaScript/Guide/Indexed_collections#array_object) +- [Les tableaux typés](/fr/docs/Web/JavaScript/Typed_arrays) +- [RangeError: invalid array length](/fr/docs/Web/JavaScript/Reference/Errors/Invalid_array_length) diff --git a/files/fr/web/javascript/reference/global_objects/date/tolocaletimestring/index.md b/files/fr/web/javascript/reference/global_objects/date/tolocaletimestring/index.md index b6e4af66c9..4b7179dfdd 100644 --- a/files/fr/web/javascript/reference/global_objects/date/tolocaletimestring/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/tolocaletimestring/index.md @@ -1,39 +1,45 @@ --- title: Date.prototype.toLocaleTimeString() slug: Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString -tags: - - Date - - Internationalisation - - JavaScript - - Méthode - - Prototype - - Reference - - i18n translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString original_slug: Web/JavaScript/Reference/Objets_globaux/Date/toLocaleTimeString +browser-compat: javascript.builtins.Date.toLocaleTimeString --- {{JSRef}} -La méthode **`toLocaleTimeString()`** renvoie une chaine de caractères correspondant à l'heure dans la date, exprimée selon une locale. Les arguments `locales` et `options` permettent aux applications de définir le langage utilisé pour les conventions de format et permettent de personnaliser le comportement de la fonction. Les anciennes implémentations ignorent ces arguments, la locale utilisée et le format de la chaine dépendent uniquement de l'implémentation. +La méthode **`toLocaleTimeString()`** renvoie une chaine de caractères correspondant à l'heure dans la date, exprimée selon une localisation. Les arguments `locales` (définissant la localisation) et `options` permettent aux applications de définir le langage utilisé pour les conventions de format et permettent de personnaliser le comportement de la fonction. + +Les anciennes implémentations ignorent ces arguments, la locale utilisée et le format de la chaine dépendent uniquement de l'implémentation. {{EmbedInteractiveExample("pages/js/date-tolocaletimestring.html")}} ## Syntaxe - dateObj.toLocaleTimeString([locales [, options]]) +```js +toLocaleTimeString() +toLocaleTimeString(locales) +toLocaleTimeString(locales, options) +``` ### Paramètres -Voir le tableau de [compatibilité des navigateurs](#compat "#Compatibilit.C3.A9_des_navigateurs") afin de déterminer quels navigateurs respectent les arguments `locales` et `options` ainsi que l'exemple [Vérifier le support des arguments `locales` et `options`](#check) qui permet de détecter cette fonctionnalité. +Les arguments `locales` et `options` adaptent le comportement de la fonction et permettent aux applications de définir quelles conventions de formatage linguistiques devraient être utilisées. Pour les anciennes implémentations qui ignoraient les arguments `locales` et +`options`, les `locales` et le format de la chaîne renvoyée dépendent uniquement de l'implémentation. -{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat','Param.C3.A8tres')}} +Voir la page du constructeur [`Intl.DateTimeFormat()`](/fr/docs/Web/JavaScript/Reference/Intl/DateTimeFormat/DateTimeFormat) pour plus de détails sur ces paramètres et comment les utiliser. -La valeur par défaut de chacun des composants de la date vaut {{jsxref("undefined")}}, si les propriétés `hour`, `minute`, `second` sont toutes `undefined`, on suppose alors que `hour`, `minute`, et `second` sont "numeric". +La valeur par défaut de chacun des composants de date/heure vaut [`undefined`](/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined), si les propriétés `hour`, `minute`, `second` sont toutes `undefined`, on suppose alors que `hour`, `minute`, et `second` sont "numeric". ### Valeur de retour Une chaîne de caractères qui représente l'heure de la date indiquée selon des conventions de locales spécifiques. +## Performances + +Lorsqu'on formate un grand nombre de dates, mieux vaudra créer un objet +[`Intl.DateTimeFormat`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) et utiliser la fonction fournie par sa propriété [`format`](/fr/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/format) +property. + ## Exemples ### Utiliser `toLocaleTimeString()` @@ -50,21 +56,6 @@ console.log(date.toLocaleTimeString()); // → "04:00:00" si exécuté dans une locale fr et le fuseau horaire CEST ``` -### Vérifier le support des arguments `locales` et `options` - -Les arguments `locales` et `options` ne sont pas encore supportés par tous les navigateurs. Afin de vérifier si l'implementation utilisée les supporte, vous pouvez utiliser le pré-requis suivant : les locales incorrectes sont rejetées avec une exception` RangeError` : - -```js -function toLocaleTimeStringSupportsLocales() { - try { - new Date().toLocaleTimeString("i"); - } catch (e) { - return e.name === "RangeError"; - } - return false; -} -``` - ### Utiliser `locales` Cet exemple montre quelques variations dues aux formats de dates localisés. Afin d'obtenir le langage utilisé au sein de l'interface utilisateur de votre application, vérifiez de bien fournir ce langage (et éventuellement des locales de recours) en utilisant l'argument `locales` : @@ -114,30 +105,18 @@ console.log(date.toLocaleTimeString("en-US", {hour12: false})); // → "19:00:00" ``` -## Performance - -Pour formater de nombreuses dates, il est préférable de créer un objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} et d'utiliser la fonction fournie par sa propriété {{jsxref("DateTimeFormat.prototype.format", "format")}}. - ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------------- | -| {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.7', 'Date.prototype.toLocaleTimeString')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleTimeString')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleTimeString')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES Int 1.0', '#sec-13.3.3', 'Date.prototype.toLocaleTimeString')}} | {{Spec2('ES Int 1.0')}} | Définition des arguments `locales` et `options`. | -| {{SpecName('ES Int 2.0', '#sec-13.3.3', 'Date.prototype.toLocaleTimeString')}} | {{Spec2('ES Int 2.0')}} | | -| {{SpecName('ES Int Draft', '#sec-Date.prototype.toLocaleTimeString', 'Date.prototype.toLocaleTimeString')}} | {{Spec2('ES Int Draft')}} | | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("javascript.builtins.Date.toLocaleTimeString")}} +{{Compat}} ## Voir aussi -- {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} -- {{jsxref("Date.prototype.toLocaleDateString()")}} -- {{jsxref("Date.prototype.toLocaleString()")}} -- {{jsxref("Date.prototype.toTimeString()")}} -- {{jsxref("Date.prototype.toString()")}} +- [`Intl.DateTimeFormat`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) +- [`Date.prototype.toLocaleDateString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString) +- [`Date.prototype.toLocaleString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) +- [`Date.prototype.toTimeString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/toTimeString) +- [`Date.prototype.toString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/toString) diff --git a/files/fr/web/api/bytestring/index.html b/files/fr/web/javascript/reference/global_objects/string/index.html index 48cb5b812d..808d99008b 100644 --- a/files/fr/web/api/bytestring/index.html +++ b/files/fr/web/javascript/reference/global_objects/string/index.html @@ -1,12 +1,13 @@ --- title: ByteString -slug: Web/API/ByteString +slug: Web/JavaScript/Reference/Global_Objects/String tags: - API - DOM - Reference - WebIDL translation_of: Web/API/ByteString +original_slug: Web/API/ByteString --- <div>{{APIRef("DOM")}}</div> diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 8014f04141..8e84bae6f8 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -132,7 +132,7 @@ /ja/docs/Addons /ja/docs/Mozilla/Add-ons /ja/docs/Advanced_styling_for_HTML_forms /ja/docs/Learn/Forms/Advanced_form_styling /ja/docs/Alternative_style_sheets /ja/docs/Web/CSS/Alternative_style_sheets -/ja/docs/AppLinks/WebConsoleHelp /en-US/docs/Tools/Web_Console/Helpers +/ja/docs/AppLinks/WebConsoleHelp /ja/docs/Tools/Web_Console/Helpers /ja/docs/Applying_SVG_effects_to_HTML_content /ja/docs/Web/SVG/Applying_SVG_effects_to_HTML_content /ja/docs/Array.prototype.reduceRight /ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduceRight /ja/docs/Bugzilla_(external) https://bugzilla.mozilla.org/enter_bug.cgi?format=guided @@ -256,20 +256,20 @@ /ja/docs/CSS/General_sibling_selectors /ja/docs/Web/CSS/General_sibling_combinator /ja/docs/CSS/Getting_Started /ja/docs/Learn/CSS /ja/docs/CSS/Getting_Started/Boxes /ja/docs/Learn/CSS/Building_blocks/The_box_model -/ja/docs/CSS/Getting_Started/Cascading_and_inheritance /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance +/ja/docs/CSS/Getting_Started/Cascading_and_inheritance /ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance /ja/docs/CSS/Getting_Started/Challenge_solutions /ja/docs/Web/Guide/CSS/Getting_started/Challenge_solutions /ja/docs/CSS/Getting_Started/Color /ja/docs/Learn/CSS/Building_blocks/Values_and_units#color /ja/docs/CSS/Getting_Started/Content /ja/docs/Learn/CSS/Howto/Generated_content -/ja/docs/CSS/Getting_Started/How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works +/ja/docs/CSS/Getting_Started/How_CSS_works /ja/docs/Learn/CSS/First_steps/How_CSS_works /ja/docs/CSS/Getting_Started/JavaScript /ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents /ja/docs/CSS/Getting_Started/Layout /ja/docs/Learn/CSS/CSS_layout /ja/docs/CSS/Getting_Started/Lists /ja/docs/Learn/CSS/Styling_text/Styling_lists /ja/docs/CSS/Getting_Started/Media /ja/docs/Web/Progressive_web_apps/Responsive/Media_types -/ja/docs/CSS/Getting_Started/Selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors +/ja/docs/CSS/Getting_Started/Selectors /ja/docs/Learn/CSS/Building_blocks/Selectors /ja/docs/CSS/Getting_Started/Tables /ja/docs/Learn/CSS/Building_blocks/Styling_tables /ja/docs/CSS/Getting_Started/Text_styles /ja/docs/Learn/CSS/Styling_text/Fundamentals -/ja/docs/CSS/Getting_Started/What_is_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works -/ja/docs/CSS/Getting_Started/Why_use_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works +/ja/docs/CSS/Getting_Started/What_is_CSS /ja/docs/Learn/CSS/First_steps/How_CSS_works +/ja/docs/CSS/Getting_Started/Why_use_CSS /ja/docs/Learn/CSS/First_steps/How_CSS_works /ja/docs/CSS/ID_selectors /ja/docs/Web/CSS/ID_selectors /ja/docs/CSS/ID_selectors-redirect-1 /ja/docs/Web/CSS/ID_selectors /ja/docs/CSS/Layout_mode /ja/docs/Web/CSS/Layout_mode @@ -538,14 +538,14 @@ /ja/docs/CSS::default /ja/docs/Web/CSS/:default /ja/docs/CSS:@-moz-document /ja/docs/Web/CSS/@document /ja/docs/CSS:Getting_Started /ja/docs/Learn/CSS -/ja/docs/CSS:Getting_Started:Cascading_and_inheritance /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance +/ja/docs/CSS:Getting_Started:Cascading_and_inheritance /ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance /ja/docs/CSS:Getting_Started:Color /ja/docs/Learn/CSS/Building_blocks/Values_and_units#color /ja/docs/CSS:Getting_Started:Content /ja/docs/Learn/CSS/Howto/Generated_content -/ja/docs/CSS:Getting_Started:How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works -/ja/docs/CSS:Getting_Started:Selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors +/ja/docs/CSS:Getting_Started:How_CSS_works /ja/docs/Learn/CSS/First_steps/How_CSS_works +/ja/docs/CSS:Getting_Started:Selectors /ja/docs/Learn/CSS/Building_blocks/Selectors /ja/docs/CSS:Getting_Started:Text_styles /ja/docs/Learn/CSS/Styling_text/Fundamentals -/ja/docs/CSS:Getting_Started:What_is_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works -/ja/docs/CSS:Getting_Started:Why_use_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works +/ja/docs/CSS:Getting_Started:What_is_CSS /ja/docs/Learn/CSS/First_steps/How_CSS_works +/ja/docs/CSS:Getting_Started:Why_use_CSS /ja/docs/Learn/CSS/First_steps/How_CSS_works /ja/docs/CSS:Media:Visual /ja/docs/Web/CSS/@media /ja/docs/CSS:Other_Resources /ja/docs/Web/CSS /ja/docs/CSS:color /ja/docs/Web/CSS/color @@ -1138,8 +1138,8 @@ /ja/docs/DOM/EventTarget.addEventListener /ja/docs/Web/API/EventTarget/addEventListener /ja/docs/DOM/EventTarget.dispatchEvent /ja/docs/Web/API/EventTarget/dispatchEvent /ja/docs/DOM/EventTarget.removeEventListener /ja/docs/Web/API/EventTarget/removeEventListener -/ja/docs/DOM/File.fileName /ja/docs/Web/API/File/fileName -/ja/docs/DOM/File.fileSize /ja/docs/Web/API/File/fileSize +/ja/docs/DOM/File.fileName /ja/docs/conflicting/Web/API/File/name +/ja/docs/DOM/File.fileSize /ja/docs/conflicting/Web/API/Blob/size /ja/docs/DOM/File.getAsBinary /ja/docs/Web/API/File/getAsBinary /ja/docs/DOM/File.getAsText /ja/docs/Web/API/File/getAsText /ja/docs/DOM/File.lastModifiedDate /ja/docs/Web/API/File/lastModifiedDate @@ -1232,7 +1232,7 @@ /ja/docs/DOM/TouchList /ja/docs/Web/API/TouchList /ja/docs/DOM/Touch_events /ja/docs/Web/API/Touch_events /ja/docs/DOM/UserProximityEvent /ja/docs/Web/API/UserProximityEvent -/ja/docs/DOM/UserProximityEvent.near /ja/docs/orphaned/Web/API/UserProximityEvent/near +/ja/docs/DOM/UserProximityEvent.near /ja/docs/Web/API/UserProximityEvent /ja/docs/DOM/Using_full-screen_mode /ja/docs/Web/API/Fullscreen_API /ja/docs/DOM/Using_media_queries_from_code /ja/docs/Web/CSS/Media_Queries/Testing_media_queries /ja/docs/DOM/Using_media_queries_from_code-redirect-1 /ja/docs/Web/CSS/Media_Queries/Testing_media_queries @@ -1351,7 +1351,7 @@ /ja/docs/DOM/element.lastChild /ja/docs/Web/API/Node/lastChild /ja/docs/DOM/element.length /ja/docs/Web/API/NodeList/length /ja/docs/DOM/element.localName /ja/docs/Web/API/Element/localName -/ja/docs/DOM/element.name /ja/docs/conflicting/Web/API +/ja/docs/DOM/element.name /ja/docs/Web/API /ja/docs/DOM/element.namespaceURI /ja/docs/Web/API/Element/namespaceURI /ja/docs/DOM/element.nextSibling /ja/docs/Web/API/Node/nextSibling /ja/docs/DOM/element.nodeName /ja/docs/Web/API/Node/nodeName @@ -1514,7 +1514,6 @@ /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/Web/API/Navigator/userAgent /ja/docs/DOM/window.navigator.vendor /ja/docs/Web/API/Navigator/vendor @@ -1736,7 +1735,6 @@ /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/Web/API/Navigator/userAgent /ja/docs/DOM:window.navigator.vendor /ja/docs/Web/API/Navigator/vendor @@ -2634,25 +2632,25 @@ /ja/docs/JavaScript_技術概説 /ja/docs/Web/JavaScript/JavaScript_technologies_overview /ja/docs/Key-navigable_custom_DHTML_widgets /ja/docs/orphaned/Key-navigable_custom_DHTML_widgets /ja/docs/Learn/CSS/Building_blocks/セレクタ /ja/docs/Learn/CSS/Building_blocks/Selectors -/ja/docs/Learn/CSS/Introduction_to_CSS /en-US/docs/Learn/CSS/First_steps -/ja/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors -/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model /en-US/docs/Learn/CSS/Building_blocks/The_box_model -/ja/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance -/ja/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators -/ja/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS /en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS +/ja/docs/Learn/CSS/Introduction_to_CSS /ja/docs/Learn/CSS/First_steps +/ja/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors /ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors +/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model /ja/docs/Learn/CSS/Building_blocks/The_box_model +/ja/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance /ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance +/ja/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors /ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators +/ja/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS /ja/docs/Learn/CSS/Building_blocks/Debugging_CSS /ja/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension /ja/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension -/ja/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works -/ja/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements /en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements -/ja/docs/Learn/CSS/Introduction_to_CSS/Selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors -/ja/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors -/ja/docs/Learn/CSS/Introduction_to_CSS/Syntax /en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured -/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units /en-US/docs/Learn/CSS/Building_blocks/Values_and_units -/ja/docs/Learn/CSS/Styling_boxes /en-US/docs/Learn/CSS/Building_blocks +/ja/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works /ja/docs/Learn/CSS/First_steps/How_CSS_works +/ja/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements /ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements +/ja/docs/Learn/CSS/Introduction_to_CSS/Selectors /ja/docs/Learn/CSS/Building_blocks/Selectors +/ja/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors /ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors +/ja/docs/Learn/CSS/Introduction_to_CSS/Syntax /ja/docs/Learn/CSS/First_steps/How_CSS_is_structured +/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units /ja/docs/Learn/CSS/Building_blocks/Values_and_units +/ja/docs/Learn/CSS/Styling_boxes /ja/docs/Learn/CSS/Building_blocks /ja/docs/Learn/CSS/Styling_boxes/A_cool_looking_box /ja/docs/Learn/CSS/Building_blocks/A_cool_looking_box /ja/docs/Learn/CSS/Styling_boxes/Advanced_box_effects /ja/docs/Learn/CSS/Building_blocks/Advanced_styling_effects -/ja/docs/Learn/CSS/Styling_boxes/Backgrounds /en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders -/ja/docs/Learn/CSS/Styling_boxes/Borders /en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders -/ja/docs/Learn/CSS/Styling_boxes/Box_model_recap /en-US/docs/Learn/CSS/Building_blocks/The_box_model +/ja/docs/Learn/CSS/Styling_boxes/Backgrounds /ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders +/ja/docs/Learn/CSS/Styling_boxes/Borders /ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders +/ja/docs/Learn/CSS/Styling_boxes/Box_model_recap /ja/docs/Learn/CSS/Building_blocks/The_box_model /ja/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper /ja/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper /ja/docs/Learn/CSS/Styling_boxes/Styling_tables /ja/docs/Learn/CSS/Building_blocks/Styling_tables /ja/docs/Learn/CSS/Styling_text/ウェブフォント /ja/docs/Learn/CSS/Styling_text/Web_fonts @@ -2772,7 +2770,7 @@ /ja/docs/MDN_at_ten /ja/docs/MDN/At_ten /ja/docs/MDN_at_ten/Contributing_to_MDN /ja/docs/MDN/Contribute /ja/docs/MDN_at_ten/History_of_MDN /ja/docs/MDN/At_ten/History_of_MDN -/ja/docs/Map /ja/docs/orphaned/Map +/ja/docs/Map /ja/docs/Web/JavaScript/Reference/Global_Objects/Map /ja/docs/MathML /ja/docs/Web/MathML /ja/docs/MathML/Element /ja/docs/Web/MathML/Element /ja/docs/MathML/Element/math /ja/docs/Web/MathML/Element/math @@ -2956,7 +2954,7 @@ /ja/docs/Tools/Responsive_Design_View /ja/docs/Tools/Responsive_Design_Mode /ja/docs/Tools/Web_Console-redirect-1 /ja/docs/Tools/Web_Console /ja/docs/Tools/Web_Console/Opening_the_Web_Console /ja/docs/Tools/Web_Console/UI_Tour -/ja/docs/Tools/Web_Console/WebConsoleHelp /en-US/docs/Tools/Web_Console/Helpers +/ja/docs/Tools/Web_Console/WebConsoleHelp /ja/docs/Tools/Web_Console/Helpers /ja/docs/Transforming_XML_with_XSLT /ja/docs/Web/XSLT/Transforming_XML_with_XSLT /ja/docs/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference /ja/docs/Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference /ja/docs/Transforming_XML_with_XSLT:The_Netscape_XSLT_XPath_Reference /ja/docs/Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference @@ -2985,27 +2983,27 @@ /ja/docs/Using_the_W3C_DOM_Level_1_Core /ja/docs/Web/API/Document_Object_Model/Using_the_W3C_DOM_Level_1_Core /ja/docs/Using_the_Web_Console /ja/docs/Tools/Web_Console /ja/docs/Using_the_Web_Console/Helpers /ja/docs/Tools/Web_Console/Helpers -/ja/docs/Using_the_Web_Console/WebConsoleHelp /en-US/docs/Tools/Web_Console/Helpers +/ja/docs/Using_the_Web_Console/WebConsoleHelp /ja/docs/Tools/Web_Console/Helpers /ja/docs/Using_web_workers /ja/docs/Web/API/Web_Workers_API/Using_web_workers /ja/docs/View_source /ja/docs/Tools/View_source /ja/docs/WOFF /ja/docs/Web/Guide/WOFF /ja/docs/Web-based_protocol_handlers /ja/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers /ja/docs/Web-d/Guide/CSS/Getting_started /ja/docs/Learn/CSS /ja/docs/Web-d/Guide/CSS/Getting_started/Boxes /ja/docs/Learn/CSS/Building_blocks/The_box_model -/ja/docs/Web-d/Guide/CSS/Getting_started/Cascading_and_inheritance /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance +/ja/docs/Web-d/Guide/CSS/Getting_started/Cascading_and_inheritance /ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance /ja/docs/Web-d/Guide/CSS/Getting_started/Challenge_solutions /ja/docs/Web/Guide/CSS/Getting_started/Challenge_solutions /ja/docs/Web-d/Guide/CSS/Getting_started/Color /ja/docs/Learn/CSS/Building_blocks/Values_and_units#color /ja/docs/Web-d/Guide/CSS/Getting_started/Content /ja/docs/Learn/CSS/Howto/Generated_content -/ja/docs/Web-d/Guide/CSS/Getting_started/How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works +/ja/docs/Web-d/Guide/CSS/Getting_started/How_CSS_works /ja/docs/Learn/CSS/First_steps/How_CSS_works /ja/docs/Web-d/Guide/CSS/Getting_started/JavaScript /ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents /ja/docs/Web-d/Guide/CSS/Getting_started/Layout /ja/docs/Learn/CSS/CSS_layout /ja/docs/Web-d/Guide/CSS/Getting_started/Lists /ja/docs/Learn/CSS/Styling_text/Styling_lists /ja/docs/Web-d/Guide/CSS/Getting_started/Media /ja/docs/Web/Progressive_web_apps/Responsive/Media_types -/ja/docs/Web-d/Guide/CSS/Getting_started/Selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors +/ja/docs/Web-d/Guide/CSS/Getting_started/Selectors /ja/docs/Learn/CSS/Building_blocks/Selectors /ja/docs/Web-d/Guide/CSS/Getting_started/Tables /ja/docs/Learn/CSS/Building_blocks/Styling_tables /ja/docs/Web-d/Guide/CSS/Getting_started/Text_styles /ja/docs/Learn/CSS/Styling_text/Fundamentals -/ja/docs/Web-d/Guide/CSS/Getting_started/What_is_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works -/ja/docs/Web-dd/Guide/CSS/Getting_started/Cascading_and_inheritance /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance +/ja/docs/Web-d/Guide/CSS/Getting_started/What_is_CSS /ja/docs/Learn/CSS/First_steps/How_CSS_works +/ja/docs/Web-dd/Guide/CSS/Getting_started/Cascading_and_inheritance /ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance /ja/docs/Web-e/Guide/CSS/Understanding_z_index /ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index /ja/docs/Web-e/Guide/CSS/Understanding_z_index/Adding_z-index /ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index /ja/docs/Web-e/Guide/CSS/Understanding_z_index/Stacking_and_float /ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float @@ -3045,6 +3043,7 @@ /ja/docs/Web/API/AudioContext/sampleRate /ja/docs/Web/API/BaseAudioContext/sampleRate /ja/docs/Web/API/AudioContext/state /ja/docs/Web/API/BaseAudioContext/state /ja/docs/Web/API/Boolean /ja/docs/Web/JavaScript/Reference/Global_Objects/Boolean +/ja/docs/Web/API/ByteString /ja/docs/conflicting/Web/JavaScript/Reference/Global_Objects/String /ja/docs/Web/API/CSSMatrix /ja/docs/Web/API/DOMMatrix /ja/docs/Web/API/CSSStyleSheet.insertRule /ja/docs/Web/API/CSSStyleSheet/insertRule /ja/docs/Web/API/CSS_Painting_API/ガイド /ja/docs/Web/API/CSS_Painting_API/Guide @@ -3079,7 +3078,7 @@ /ja/docs/Web/API/Element.querySelectorAll /ja/docs/Web/API/Element/querySelectorAll /ja/docs/Web/API/Element/Activate_event /ja/docs/Web/API/Element/DOMActivate_event /ja/docs/Web/API/Element/accessKey /ja/docs/Web/API/HTMLElement/accessKey -/ja/docs/Web/API/Element/name /ja/docs/conflicting/Web/API +/ja/docs/Web/API/Element/name /ja/docs/Web/API /ja/docs/Web/API/Event/button /ja/docs/Web/API/MouseEvent/button /ja/docs/Web/API/Event/createEvent /ja/docs/Web/API/Document/createEvent /ja/docs/Web/API/EventHandler /ja/docs/orphaned/Web/Guide/Events/Event_handlers @@ -3088,19 +3087,21 @@ /ja/docs/Web/API/EventTarget.removeEventListener /ja/docs/Web/API/EventTarget/removeEventListener /ja/docs/Web/API/EventTarget/attachEvent /ja/docs/Web/API/EventTarget/addEventListener /ja/docs/Web/API/FetchEvent_clone /ja/docs/Web/API/FetchEvent -/ja/docs/Web/API/File.fileName /ja/docs/Web/API/File/fileName -/ja/docs/Web/API/File.fileSize /ja/docs/Web/API/File/fileSize +/ja/docs/Web/API/File.fileName /ja/docs/conflicting/Web/API/File/name +/ja/docs/Web/API/File.fileSize /ja/docs/conflicting/Web/API/Blob/size /ja/docs/Web/API/File.getAsBinary /ja/docs/Web/API/File/getAsBinary /ja/docs/Web/API/File.getAsText /ja/docs/Web/API/File/getAsText /ja/docs/Web/API/File.name /ja/docs/Web/API/File/name /ja/docs/Web/API/File.size /ja/docs/Web/API/Blob/size /ja/docs/Web/API/File.type /ja/docs/Web/API/Blob/type +/ja/docs/Web/API/File/fileName /ja/docs/conflicting/Web/API/File/name +/ja/docs/Web/API/File/fileSize /ja/docs/conflicting/Web/API/Blob/size /ja/docs/Web/API/File/size /ja/docs/Web/API/Blob/size /ja/docs/Web/API/Geolocation.clearWatch /ja/docs/Web/API/Geolocation/clearWatch /ja/docs/Web/API/Geolocation.getCurrentPosition /ja/docs/Web/API/Geolocation/getCurrentPosition /ja/docs/Web/API/Geolocation.watchPosition /ja/docs/Web/API/Geolocation/watchPosition /ja/docs/Web/API/Geolocation/Using_geolocation /ja/docs/Web/API/Geolocation_API -/ja/docs/Web/API/GlobalFetch /en-US/docs/Web/API/WindowOrWorkerGlobalScope +/ja/docs/Web/API/GlobalFetch /ja/docs/Web/API/WindowOrWorkerGlobalScope /ja/docs/Web/API/GlobalFetch/fetch /ja/docs/Web/API/fetch /ja/docs/Web/API/HTMLFormElement.acceptCharset /ja/docs/Web/API/HTMLFormElement/acceptCharset /ja/docs/Web/API/HTMLFormElement.action /ja/docs/Web/API/HTMLFormElement/action @@ -3158,11 +3159,11 @@ /ja/docs/Web/API/IDBFactory.cmp /ja/docs/Web/API/IDBFactory/cmp /ja/docs/Web/API/IDBFactory.deleteDatabase /ja/docs/Web/API/IDBFactory/deleteDatabase /ja/docs/Web/API/IDBFactory.open /ja/docs/Web/API/IDBFactory/open -/ja/docs/Web/API/Index /ja/docs/conflicting/Web/API_49b9a84475f11fffb8fc271a7df3c49a +/ja/docs/Web/API/Index /ja/docs/Web/API /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/MouseEvent/which /ja/docs/Web/API/UIEvent/which /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/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 @@ -3246,9 +3247,8 @@ /ja/docs/Web/API/Slotable /ja/docs/Web/API/Element /ja/docs/Web/API/SourceBufferList/SourceBuffer /ja/docs/orphaned/Web/API/SourceBufferList/SourceBuffer /ja/docs/Web/API/TouchList.length /ja/docs/Web/API/TouchList/length -/ja/docs/Web/API/TypeInfo /ja/docs/orphaned/Web/API/TypeInfo -/ja/docs/Web/API/UserProximityEvent.near /ja/docs/orphaned/Web/API/UserProximityEvent/near -/ja/docs/Web/API/UserProximityEvent/near /ja/docs/orphaned/Web/API/UserProximityEvent/near +/ja/docs/Web/API/UserProximityEvent.near /ja/docs/Web/API/UserProximityEvent +/ja/docs/Web/API/UserProximityEvent/near /ja/docs/Web/API/UserProximityEvent /ja/docs/Web/API/VRDevice /ja/docs/Web/API/VRDisplay /ja/docs/Web/API/VRDevice/cancelAnimationFrame /ja/docs/Web/API/VRDisplay/cancelAnimationFrame /ja/docs/Web/API/VRDevice/capabilities /ja/docs/Web/API/VRDisplay/capabilities @@ -3329,13 +3329,13 @@ /ja/docs/Web/API/WindowTimers/setTimeout /ja/docs/Web/API/setTimeout /ja/docs/Web/API/WorkerGlobalScope/caches /ja/docs/Web/API/caches /ja/docs/Web/API/XMLHttpRequest/openRequest /ja/docs/orphaned/Web/API/XMLHttpRequest/openRequest -/ja/docs/Web/API/XRHandedness /ja/docs/Web/API/XRInputSource/handedness +/ja/docs/Web/API/XRHandedness /ja/docs/conflicting/Web/API/XRInputSource/handedness /ja/docs/Web/API/XRReferenceSpaceEventInit /ja/docs/Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent /ja/docs/Web/API/XRReferenceSpaceEventInit/referenceSpace /ja/docs/Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent /ja/docs/Web/API/XRReferenceSpaceEventInit/transform /ja/docs/Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent /ja/docs/Web/API/XRReferenceSpaceType /ja/docs/Web/API/XRSession/requestReferenceSpace /ja/docs/Web/API/XRSessionMode /ja/docs/orphaned/Web/API/XRSessionMode -/ja/docs/Web/API/XRTargetRayMode /ja/docs/Web/API/XRInputSource/targetRayMode +/ja/docs/Web/API/XRTargetRayMode /ja/docs/conflicting/Web/API/XRInputSource/targetRayMode /ja/docs/Web/API/console.dir /ja/docs/Web/API/Console/dir /ja/docs/Web/API/console.log /ja/docs/Web/API/Console/log /ja/docs/Web/API/console.time /ja/docs/Web/API/Console/time @@ -3496,7 +3496,6 @@ /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/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 @@ -3613,7 +3612,6 @@ /ja/docs/Web/CSS/::-webkit-input-placeholder /ja/docs/Web/CSS/::placeholder /ja/docs/Web/CSS/:any /ja/docs/Web/CSS/:is /ja/docs/Web/CSS/:matches /ja/docs/Web/CSS/:is -/ja/docs/Web/CSS/@media/Index /ja/docs/orphaned/Web/CSS/@media/Index /ja/docs/Web/CSS/@media/scan /ja/docs/orphaned/Web/CSS/@media/scan /ja/docs/Web/CSS/@page/bleed /ja/docs/orphaned/Web/CSS/@page/bleed /ja/docs/Web/CSS/@page/marks /ja/docs/orphaned/Web/CSS/@page/marks @@ -3621,7 +3619,7 @@ /ja/docs/Web/CSS/@viewport/max-height /ja/docs/Web/CSS/@viewport /ja/docs/Web/CSS/@viewport/max-zoom /ja/docs/Web/CSS/@viewport /ja/docs/Web/CSS/@viewport/min-zoom /ja/docs/Web/CSS/@viewport -/ja/docs/Web/CSS/@viewport/orientation /en-US/docs/Web/CSS/@viewport +/ja/docs/Web/CSS/@viewport/orientation /ja/docs/Web/CSS/@viewport /ja/docs/Web/CSS/@viewport/user-zoom /ja/docs/Web/CSS/@viewport /ja/docs/Web/CSS/@viewport/viewport-fit /ja/docs/Web/CSS/@viewport /ja/docs/Web/CSS/@viewport/zoom /ja/docs/Web/CSS/@viewport @@ -3633,7 +3631,7 @@ /ja/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator /ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator /ja/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds /ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds /ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images /ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images -/ja/docs/Web/CSS/CSS_Colors /en-US/docs/Web/CSS/CSS_Color +/ja/docs/Web/CSS/CSS_Colors /ja/docs/Web/CSS/CSS_Color /ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Advanced_layouts_with_flexbox /ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox /ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins /ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox /ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes /ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox @@ -3657,20 +3655,19 @@ /ja/docs/Web/CSS/General_sibling_selectors /ja/docs/Web/CSS/General_sibling_combinator /ja/docs/Web/CSS/Getting_started /ja/docs/Learn/CSS /ja/docs/Web/CSS/Getting_started/Boxes /ja/docs/Learn/CSS/Building_blocks/The_box_model -/ja/docs/Web/CSS/Getting_started/Cascading_and_inheritance /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance +/ja/docs/Web/CSS/Getting_started/Cascading_and_inheritance /ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance /ja/docs/Web/CSS/Getting_started/Challenge_solutions /ja/docs/Web/Guide/CSS/Getting_started/Challenge_solutions /ja/docs/Web/CSS/Getting_started/Color /ja/docs/Learn/CSS/Building_blocks/Values_and_units#color /ja/docs/Web/CSS/Getting_started/Content /ja/docs/Learn/CSS/Howto/Generated_content -/ja/docs/Web/CSS/Getting_started/How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works +/ja/docs/Web/CSS/Getting_started/How_CSS_works /ja/docs/Learn/CSS/First_steps/How_CSS_works /ja/docs/Web/CSS/Getting_started/JavaScript /ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents /ja/docs/Web/CSS/Getting_started/Layout /ja/docs/Learn/CSS/CSS_layout /ja/docs/Web/CSS/Getting_started/Lists /ja/docs/Learn/CSS/Styling_text/Styling_lists /ja/docs/Web/CSS/Getting_started/Media /ja/docs/Web/Progressive_web_apps/Responsive/Media_types -/ja/docs/Web/CSS/Getting_started/Selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors +/ja/docs/Web/CSS/Getting_started/Selectors /ja/docs/Learn/CSS/Building_blocks/Selectors /ja/docs/Web/CSS/Getting_started/Tables /ja/docs/Learn/CSS/Building_blocks/Styling_tables /ja/docs/Web/CSS/Getting_started/Text_styles /ja/docs/Learn/CSS/Styling_text/Fundamentals -/ja/docs/Web/CSS/Getting_started/What_is_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works -/ja/docs/Web/CSS/Index /ja/docs/orphaned/Web/CSS/Index +/ja/docs/Web/CSS/Getting_started/What_is_CSS /ja/docs/Learn/CSS/First_steps/How_CSS_works /ja/docs/Web/CSS/Media /ja/docs/Web/CSS/@media /ja/docs/Web/CSS/Media/Visual /ja/docs/Web/CSS/@media /ja/docs/Web/CSS/Motion_Path /ja/docs/Web/CSS/CSS_Motion_Path @@ -3678,7 +3675,7 @@ /ja/docs/Web/CSS/Reference/@viewport /ja/docs/Web/CSS/@viewport /ja/docs/Web/CSS/Reference/@viewport/max-zoom /ja/docs/Web/CSS/@viewport /ja/docs/Web/CSS/Reference/@viewport/min-zoom /ja/docs/Web/CSS/@viewport -/ja/docs/Web/CSS/Reference/@viewport/orientation /en-US/docs/Web/CSS/@viewport +/ja/docs/Web/CSS/Reference/@viewport/orientation /ja/docs/Web/CSS/@viewport /ja/docs/Web/CSS/Reference/@viewport/user-zoom /ja/docs/Web/CSS/@viewport /ja/docs/Web/CSS/Reference/@viewport/zoom /ja/docs/Web/CSS/@viewport /ja/docs/Web/CSS/Reference/Mozilla_Extensions /ja/docs/Web/CSS/Mozilla_Extensions @@ -3857,20 +3854,20 @@ /ja/docs/Web/Guide/CSS/Flexible_boxes /ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox /ja/docs/Web/Guide/CSS/Getting_started /ja/docs/Learn/CSS /ja/docs/Web/Guide/CSS/Getting_started/Boxes /ja/docs/Learn/CSS/Building_blocks/The_box_model -/ja/docs/Web/Guide/CSS/Getting_started/Cascading_and_inheritance /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance +/ja/docs/Web/Guide/CSS/Getting_started/Cascading_and_inheritance /ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance /ja/docs/Web/Guide/CSS/Getting_started/Color /ja/docs/Learn/CSS/Building_blocks/Values_and_units#color /ja/docs/Web/Guide/CSS/Getting_started/Content /ja/docs/Learn/CSS/Howto/Generated_content -/ja/docs/Web/Guide/CSS/Getting_started/How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works +/ja/docs/Web/Guide/CSS/Getting_started/How_CSS_works /ja/docs/Learn/CSS/First_steps/How_CSS_works /ja/docs/Web/Guide/CSS/Getting_started/JavaScript /ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents /ja/docs/Web/Guide/CSS/Getting_started/Layout /ja/docs/Learn/CSS/CSS_layout /ja/docs/Web/Guide/CSS/Getting_started/Lists /ja/docs/Learn/CSS/Styling_text/Styling_lists /ja/docs/Web/Guide/CSS/Getting_started/Media /ja/docs/Web/Progressive_web_apps/Responsive/Media_types -/ja/docs/Web/Guide/CSS/Getting_started/Selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors +/ja/docs/Web/Guide/CSS/Getting_started/Selectors /ja/docs/Learn/CSS/Building_blocks/Selectors /ja/docs/Web/Guide/CSS/Getting_started/Tables /ja/docs/Learn/CSS/Building_blocks/Styling_tables /ja/docs/Web/Guide/CSS/Getting_started/Text_styles /ja/docs/Learn/CSS/Styling_text/Fundamentals -/ja/docs/Web/Guide/CSS/Getting_started/What_is_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works -/ja/docs/Web/Guide/CSS/Getting_started/Why_use_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works -/ja/docs/Web/Guide/CSS/Getting_started/Why_use_CSS? /en-US/docs/Learn/CSS/First_steps/How_CSS_works +/ja/docs/Web/Guide/CSS/Getting_started/What_is_CSS /ja/docs/Learn/CSS/First_steps/How_CSS_works +/ja/docs/Web/Guide/CSS/Getting_started/Why_use_CSS /ja/docs/Learn/CSS/First_steps/How_CSS_works +/ja/docs/Web/Guide/CSS/Getting_started/Why_use_CSS? /ja/docs/Learn/CSS/First_steps/How_CSS_works /ja/docs/Web/Guide/CSS/Media_queries /ja/docs/Web/CSS/Media_Queries/Using_media_queries /ja/docs/Web/Guide/CSS/Scaling_background_images /ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images /ja/docs/Web/Guide/CSS/Testing_media_queries /ja/docs/Web/CSS/Media_Queries/Testing_media_queries @@ -4067,7 +4064,6 @@ /ja/docs/Web/HTTP/HTTP_access_control/Errors/CORSPreflightDidNotSucceed /ja/docs/Web/HTTP/CORS/Errors/CORSPreflightDidNotSucceed /ja/docs/Web/HTTP/HTTP_access_control/Errors/CORSRequestNotHttp /ja/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp /ja/docs/Web/HTTP/HTTP_response_codes /ja/docs/Web/HTTP/Status -/ja/docs/Web/HTTP/Headers/Index /ja/docs/orphaned/Web/HTTP/Headers/Index /ja/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file /ja/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_PAC_file /ja/docs/Web/HTTP/Response_codes /ja/docs/Web/HTTP/Status /ja/docs/Web/HTTP/Response_codes/204 /ja/docs/Web/HTTP/Status/204 @@ -4439,7 +4435,7 @@ /ja/docs/Web2/Reference/Events/compositionend /ja/docs/Web/API/Element/compositionend_event /ja/docs/Web2/Reference/Events/compositionstart /ja/docs/Web/API/Element/compositionstart_event /ja/docs/Web2/Reference/Events/input /ja/docs/Web/API/HTMLElement/input_event -/ja/docs/WebAPI /ja/docs/conflicting/Web/API_dd04ca1265cb79b990b8120e5f5070d3 +/ja/docs/WebAPI /ja/docs/Web/API /ja/docs/WebAPI/Battery_Status /ja/docs/Web/API/Battery_Status_API /ja/docs/WebAPI/Managing_screen_orientation /ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation /ja/docs/WebAPI/Network_Information /ja/docs/Web/API/Network_Information_API diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index db3e031f5d..8751777912 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -10699,12 +10699,6 @@ "Wind1808" ] }, - "Web/API/ByteString": { - "modified": "2020-03-11T12:49:49.193Z", - "contributors": [ - "mfuji09" - ] - }, "Web/API/CDATASection": { "modified": "2019-09-16T12:26:56.983Z", "contributors": [ @@ -14808,24 +14802,6 @@ "souta" ] }, - "Web/API/File/fileName": { - "modified": "2020-09-25T16:45:23.436Z", - "contributors": [ - "silverskyvicto", - "mfuji09", - "fscholz", - "ethertank" - ] - }, - "Web/API/File/fileSize": { - "modified": "2020-09-25T16:46:05.461Z", - "contributors": [ - "silverskyvicto", - "mfuji09", - "fscholz", - "ethertank" - ] - }, "Web/API/File/getAsBinary": { "modified": "2019-11-18T15:13:21.722Z", "contributors": [ @@ -18756,12 +18732,6 @@ "naturallucky" ] }, - "Web/API/MouseEvent/which": { - "modified": "2020-10-15T22:18:18.557Z", - "contributors": [ - "isdh" - ] - }, "Web/API/MutationObserver": { "modified": "2020-10-15T21:21:02.785Z", "contributors": [ @@ -22682,6 +22652,12 @@ "yyss" ] }, + "Web/API/UIEvent/which": { + "modified": "2020-10-15T22:18:18.557Z", + "contributors": [ + "isdh" + ] + }, "Web/API/URL": { "modified": "2020-10-15T21:33:06.267Z", "contributors": [ @@ -31207,6 +31183,71 @@ "sosleepy" ] }, + "Web/CSS/gradient/conic-gradient()": { + "modified": "2020-11-05T10:00:21.729Z", + "contributors": [ + "chrisdavidmills", + "mfuji09" + ] + }, + "Web/CSS/gradient/linear-gradient()": { + "modified": "2020-11-16T08:57:22.063Z", + "contributors": [ + "chrisdavidmills", + "mfuji09", + "SphinxKnight", + "Sebastianz", + "Simplexible", + "wizAmit", + "slayslot", + "prayash", + "ethertank", + "sosleepy", + "Level", + "FredB" + ] + }, + "Web/CSS/gradient/radial-gradient()": { + "modified": "2020-11-18T14:42:27.892Z", + "contributors": [ + "chrisdavidmills", + "mfuji09", + "Sebastianz", + "wizAmit", + "slayslot", + "dskmori", + "ethertank", + "sosleepy", + "Level", + "FredB" + ] + }, + "Web/CSS/gradient/repeating-linear-gradient()": { + "modified": "2020-11-18T14:46:06.699Z", + "contributors": [ + "chrisdavidmills", + "mfuji09", + "Sebastianz", + "Prinz_Rana", + "wizAmit", + "prayash", + "ethertank", + "sosleepy" + ] + }, + "Web/CSS/gradient/repeating-radial-gradient()": { + "modified": "2020-11-18T14:47:38.855Z", + "contributors": [ + "chrisdavidmills", + "mfuji09", + "Sebastianz", + "Simplexible", + "Prinz_Rana", + "mrstork", + "ethertank", + "sosleepy" + ] + }, "Web/CSS/grid": { "modified": "2020-10-15T22:12:58.386Z", "contributors": [ @@ -48565,48 +48606,34 @@ "silverskyvicto" ] }, - "conflicting/MDN/Yari": { - "modified": "2020-08-13T21:26:07.304Z", - "contributors": [ - "eltociear", - "wbamberg", - "Marsf", - "mantaroh" - ] - }, - "conflicting/Web/API": { - "modified": "2019-09-25T00:26:30.367Z", + "conflicting/Web/API/Blob/size": { + "modified": "2020-09-25T16:46:05.461Z", "contributors": [ + "silverskyvicto", + "mfuji09", "fscholz", - "Hasilt", - "dextra" + "ethertank" ] }, - "conflicting/Web/API/URL": { - "modified": "2019-03-23T23:31:44.426Z", + "conflicting/Web/API/File/name": { + "modified": "2020-09-25T16:45:23.436Z", "contributors": [ - "YuichiNukiyama", + "silverskyvicto", + "mfuji09", "fscholz", - "khalid32", "ethertank" ] }, - "conflicting/Web/API_dd04ca1265cb79b990b8120e5f5070d3": { - "modified": "2019-03-23T23:32:13.721Z", + "conflicting/Web/API/XRInputSource/handedness": { + "modified": "2020-12-06T13:23:10.937Z", "contributors": [ - "wbamberg", - "fscholz", - "yyss", - "stingray", - "ethertank", - "Jeremie" + "Wind1808" ] }, - "conflicting/Web/CSS": { - "modified": "2020-07-21T12:48:32.485Z", + "conflicting/Web/API/XRInputSource/targetRayMode": { + "modified": "2020-12-08T09:23:22.538Z", "contributors": [ - "mfuji09", - "sii" + "Wind1808" ] }, "orphaned/Building_a_Mozilla_Distribution": { @@ -48665,13 +48692,6 @@ "Potappo" ] }, - "orphaned/Map": { - "modified": "2019-03-23T23:22:54.998Z", - "contributors": [ - "wbamberg", - "ledsun" - ] - }, "orphaned/Microsummary_XML_grammar_reference": { "modified": "2019-03-23T23:42:58.294Z", "contributors": [ @@ -48968,16 +48988,6 @@ "mikamikuh" ] }, - "orphaned/Web/API/Navigator/registerContentHandler": { - "modified": "2020-10-15T21:15:53.115Z", - "contributors": [ - "mfuji09", - "fscholz", - "jsx", - "ethertank", - "Potappo" - ] - }, "orphaned/Web/API/NavigatorConcurrentHardware": { "modified": "2020-10-15T22:16:01.086Z", "contributors": [ @@ -49077,21 +49087,6 @@ "Wind1808" ] }, - "orphaned/Web/API/TypeInfo": { - "modified": "2020-08-15T13:22:42.886Z", - "contributors": [ - "eltociear" - ] - }, - "orphaned/Web/API/UserProximityEvent/near": { - "modified": "2020-10-15T21:22:30.707Z", - "contributors": [ - "YujiSoftware", - "fscholz", - "AshfaqHossain", - "ethertank" - ] - }, "orphaned/Web/API/Window/getAttention": { "modified": "2019-03-23T23:51:10.969Z", "contributors": [ @@ -49119,12 +49114,6 @@ "Wind1808" ] }, - "orphaned/Web/CSS/@media/Index": { - "modified": "2019-03-18T21:22:31.321Z", - "contributors": [ - "mfuji09" - ] - }, "orphaned/Web/CSS/@media/scan": { "modified": "2020-10-15T22:06:00.879Z", "contributors": [ @@ -49143,78 +49132,6 @@ "mfuji09" ] }, - "orphaned/Web/CSS/Index": { - "modified": "2019-01-16T21:57:06.536Z", - "contributors": [ - "mfuji09", - "Marsf" - ] - }, - "orphaned/Web/CSS/conic-gradient()": { - "modified": "2020-11-05T10:00:21.729Z", - "contributors": [ - "chrisdavidmills", - "mfuji09" - ] - }, - "orphaned/Web/CSS/linear-gradient()": { - "modified": "2020-11-16T08:57:22.063Z", - "contributors": [ - "chrisdavidmills", - "mfuji09", - "SphinxKnight", - "Sebastianz", - "Simplexible", - "wizAmit", - "slayslot", - "prayash", - "ethertank", - "sosleepy", - "Level", - "FredB" - ] - }, - "orphaned/Web/CSS/radial-gradient()": { - "modified": "2020-11-18T14:42:27.892Z", - "contributors": [ - "chrisdavidmills", - "mfuji09", - "Sebastianz", - "wizAmit", - "slayslot", - "dskmori", - "ethertank", - "sosleepy", - "Level", - "FredB" - ] - }, - "orphaned/Web/CSS/repeating-linear-gradient()": { - "modified": "2020-11-18T14:46:06.699Z", - "contributors": [ - "chrisdavidmills", - "mfuji09", - "Sebastianz", - "Prinz_Rana", - "wizAmit", - "prayash", - "ethertank", - "sosleepy" - ] - }, - "orphaned/Web/CSS/repeating-radial-gradient()": { - "modified": "2020-11-18T14:47:38.855Z", - "contributors": [ - "chrisdavidmills", - "mfuji09", - "Sebastianz", - "Simplexible", - "Prinz_Rana", - "mrstork", - "ethertank", - "sosleepy" - ] - }, "orphaned/Web/CSS/transform-function/translateX": { "modified": "2020-11-11T04:53:52.662Z", "contributors": [ @@ -49443,12 +49360,6 @@ "silverskyvicto" ] }, - "orphaned/Web/HTTP/Headers/Index": { - "modified": "2019-03-18T21:26:05.914Z", - "contributors": [ - "mfuji09" - ] - }, "orphaned/Web/JavaScript/Guide/Core_Language_Features": { "modified": "2019-03-23T23:42:43.617Z", "contributors": [ diff --git a/files/ja/web/api/file/filesize/index.html b/files/ja/conflicting/web/api/blob/size/index.html index 21ee3a0562..fc843a8033 100644 --- a/files/ja/web/api/file/filesize/index.html +++ b/files/ja/conflicting/web/api/blob/size/index.html @@ -1,6 +1,6 @@ --- title: File.fileSize -slug: Web/API/File/fileSize +slug: conflicting/Web/API/Blob/size tags: - DOM - File API @@ -12,6 +12,7 @@ tags: - ファイル - プロパティ translation_of: Web/API/File/fileSize +original_slug: Web/API/File/fileSize --- <p>{{APIRef("File API") }}{{non-standard_header}}{{obsolete_header(7.0)}}</p> diff --git a/files/ja/web/api/file/filename/index.html b/files/ja/conflicting/web/api/file/name/index.html index 8096f58d4e..424b4b7685 100644 --- a/files/ja/web/api/file/filename/index.html +++ b/files/ja/conflicting/web/api/file/name/index.html @@ -1,6 +1,6 @@ --- title: File.fileName -slug: Web/API/File/fileName +slug: conflicting/Web/API/File/name tags: - API - DOM @@ -11,6 +11,7 @@ tags: - Property - Reference translation_of: Web/API/File/fileName +original_slug: Web/API/File/fileName --- <p>{{APIRef("File API")}}{{non-standard_header}}{{obsolete_header(7.0)}}</p> diff --git a/files/ja/conflicting/web/api/index.html b/files/ja/conflicting/web/api/index.html deleted file mode 100644 index d944a08a4d..0000000000 --- a/files/ja/conflicting/web/api/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: element.name -slug: conflicting/Web/API -translation_of: Web/API -translation_of_original: Web/API/Element/name -original_slug: Web/API/Element/name ---- -<p>{{ ApiRef() }}</p> -<h3 class="editable" id="概要" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.8em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 1.142em; font-family: Georgia, Times, 'Times New Roman', serif; border-bottom-width: 1px; border-bottom-style: solid; color: rgb(51, 51, 51); font-style: normal; font-variant: normal; letter-spacing: normal; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><span>概要</span></h3> -<p><strong>name</strong> はDOM オブジェクトの<code>name</code> 属性を取得または設定します。</p> -<p>ただし、この属性が適用されるのは次の要素に限られます。</p> -<p>{{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("option") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }}, {{ HTMLelement("textarea") }}.</p> -<p>name は、 {{ domxref("document.getElementsByName()") }} メソッドか、 <a href="/en/DOM/HTMLFormElement" title="en/DOM/form">form</a> と <a href="/en/DOM/form.elements" title="en/DOM/form.elements">form.elements</a> のコレクションで使用することができます。 form や form.elements のコレクションで使われた場合、一つの要素かコレクションを返します。</p> -<h3 class="editable" id="構文" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.8em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 1.142em; font-family: Georgia, Times, 'Times New Roman', serif; border-bottom-width: 1px; border-bottom-style: solid; color: rgb(51, 51, 51); font-style: normal; font-variant: normal; letter-spacing: normal; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><span>構文</span></h3> -<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>; -var elName = <em>HTMLElement</em>.name; - -var fControl = <em>HTMLFormElement</em>.<em>elementName</em>; -var controlCollection = <em>HTMLFormElement</em>.elements.<em>elementName</em>; -</pre> -<h3 class="editable" id="例" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.8em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 1.142em; font-family: Georgia, Times, 'Times New Roman', serif; border-bottom-width: 1px; border-bottom-style: solid; color: rgb(51, 51, 51); font-style: normal; font-variant: normal; letter-spacing: normal; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><span>例</span></h3> -<pre class="eval"><form action="" name="formA"> - <input type="text" value="foo"> -</form> - -<script type="text/javascript"> - - // form の最初の要素の参照を取得します。 - var formElement = document.forms['formA'].elements[0]; - - // name 属性を設定します。 - formElement.name = 'inputA'; - - // input の value を表示します。 - alert(document.forms['formA'].elements['inputA'].value); - -</script> -</pre> -<h3 class="editable" id="注記" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.8em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 1.142em; font-family: Georgia, Times, 'Times New Roman', serif; border-bottom-width: 1px; border-bottom-style: solid; color: rgb(51, 51, 51); font-style: normal; font-variant: normal; letter-spacing: normal; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><span>注記</span></h3> -<p>Internet Explorer (IE)では、 {{ domxref("document.createElement()") }}を使って作成されたDOM オブジェクトの name 属性 は、設定および変更をすることができません。</p> -<h3 class="editable" id="仕様" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.8em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 1.142em; font-family: Georgia, Times, 'Times New Roman', serif; border-bottom-width: 1px; border-bottom-style: solid; color: rgb(51, 51, 51); font-style: normal; font-variant: normal; letter-spacing: normal; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><span>仕様</span></h3> -<p>W3C DOM 2 HTML Specification:</p> -<ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Option</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a></li> -</ul> -<p>{{ languages( { "en" :"en/DOM/element.name", "fr": "fr/DOM/element.name", "pl": "pl/DOM/element.name" } ) }}</p> diff --git a/files/ja/conflicting/web/api/xrinputsource/handedness/index.html b/files/ja/conflicting/web/api/xrinputsource/handedness/index.html new file mode 100644 index 0000000000..ea3db01eec --- /dev/null +++ b/files/ja/conflicting/web/api/xrinputsource/handedness/index.html @@ -0,0 +1,86 @@ +--- +title: XRHandedness +slug: conflicting/Web/API/XRInputSource/handedness +tags: + - API + - AR + - Enum + - Enumerated Type + - Handedness + - Reference + - Type + - VR + - WebXR + - WebXR Device API + - XRHandedness + - hand + - left + - right +translation_of: Web/API/XRHandedness +original_slug: Web/API/XRHandedness +--- +<p>{{APIRef("WebXR")}}</p> + +<p>WebXR の <strong><code>XRHandedness</code></strong> 列挙型は、使用している XR 入力デバイスに接続された特定の入力コントローラーを操作するために使用しているユーザーの手を識別する値を提供します。 <code>XRHandedness</code> は、{{domxref("XRInputSource")}} の {{domxref("XRInputSource.handedness", "handedness")}} プロパティの値として使用されます。</p> + +<h2 id="Values" name="Values">値</h2> + +<dl> + <dt><code>none</code></dt> + <dd>入力コントローラーは、ユーザーのいずれの手にも関連付けられていません。</dd> + <dt><code>left</code></dt> + <dd>入力コントローラーは、ユーザーの左手に握られているか、着用されているか、取り付けられています。</dd> + <dt><code>right</code></dt> + <dd>入力コントローラーは、ユーザーの右手に握られているか、着用されているか、取り付けられています。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code>handedness</code> の重要な使用方法の1つは、コントローラーがどちらの手にあるかを判別して、仮想空間でその手（またはその手が制御しているデバイス）の表現を描画できるようにすることです。</p> + +<pre class="brush: js notranslate">function updateInputSources(session, frame, refSpace) { + for (let source of session.inputSources) { + if (source.gripSpace) { + let gripPose = frame.getPose(source.gripSpace, refSpace); + + if (gripPose) { + myRenderHandObject(gripPose, inputSource.handedness); + } + } + } +} +</pre> + +<p>この関数は、すべてのアニメーションフレーム（または必要な滑らかさの程度とパフォーマンスの制約に応じて定期的に）で呼ばれ、入力ソースのリストをスキャンして、<code>null</code> ではない {{domxref("XRInputSource.gripSpace", "gripSpace")}} を持つものを探します。 <code>gripSpace</code> が存在する場合、それは入力ソースが何らかのハンドヘルドデバイスであることを意味するため、可能であれば視覚的にレンダリングする必要があります。</p> + +<p><code>gripSpace</code> が <code>null</code> 以外の場合、この関数は、現在の参照空間に変換された <code>gripSpace</code> のポーズを取得します。 それが有効であると仮定すると、<code>myRenderHandObject()</code> と呼ばれる関数が、グリップのポーズと <code>handedness</code> の値を使用して呼び出されます。 これらの値が手元にあれば（しゃれは意図していません）、<code>myRenderHandObject()</code> は、正しい手のために配置および形成された適切なモデルを描画できます。</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('WebXR','#enumdef-xrhandedness','XRHandedness')}}</td> + <td>{{Spec2('WebXR')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat("api.XRHandedness")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/WebXR_Device_API">WebXR Device API</a></li> + <li><a href="/ja/docs/Web/API/WebXR_Device_API/Inputs">入力と入力ソース</a></li> + <li><a href="/ja/docs/Web/WebXR%20Device%20API/Gamepads">WebXR アプリケーションでのゲームパッドの使用</a></li> + <li>{{domxref("XREye")}}: ビューを表示する対象の目を示します</li> +</ul> diff --git a/files/ja/conflicting/web/api/xrinputsource/targetraymode/index.html b/files/ja/conflicting/web/api/xrinputsource/targetraymode/index.html new file mode 100644 index 0000000000..e787a3e7be --- /dev/null +++ b/files/ja/conflicting/web/api/xrinputsource/targetraymode/index.html @@ -0,0 +1,103 @@ +--- +title: XRTargetRayMode +slug: conflicting/Web/API/XRInputSource/targetRayMode +tags: + - 3D + - API + - AR + - Enum + - Enumerated Type + - Input + - Reality + - Reference + - Type + - VR + - Virtual + - WebXR + - WebXR API + - WebXR Device API + - XR + - XRTargetRayMode + - augmented + - source + - target +translation_of: Web/API/XRTargetRayMode +original_slug: Web/API/XRTargetRayMode +--- +<p>{{APIRef("WebXR")}}</p> + +<p><span class="seoSummary"><a href="/ja/docs/Web/API/WebXR_Device_API">WebXR Device API</a> の <strong><code>XRTargetRayMode</code></strong> 列挙型は、入力コントローラーのターゲティング光線を生成する方法を記述します。</span> ターゲティングは、視線追跡システムを使用してターゲットを見るか、ハンドコントローラー、グローブ、またはモーショントラッキングシステムを使用してターゲットを指すか、画面上で指やマウスを使用してターゲットをタップまたはクリックすることによって行うことができます。</p> + +<p>通常、<strong>ターゲット光線</strong>は、ターゲティングシステムのソースから、ユーザーが見ている方向または指している方向にターゲット光線に沿って描画されます。 光線の終点を示す方法と同様に、光線のスタイルは一般的にあなた次第です。 ターゲットとなる点またはオブジェクトは、図形を描画するか、ターゲットとなる表面またはオブジェクトを強調表示することによって示される場合があります。</p> + +<div style="width: 42em;"> +<figure style="background: #eee; padding: 0.5em; border: 1px solid #aaa; border-radius: 1em; max-width: 504px; padding: 1em; margin: 1em auto;"> +<figcaption><strong>ハンドコントローラーから放出されるターゲット光線。</strong></figcaption> +<img alt="ハンドコントローラーから放出されるターゲット光線を示すスクリーンショット" src="https://mdn.mozillademos.org/files/17089/example-target-ray.gif" style="width: 100%;"></figure> +</div> + +<p>ターゲット光線は、単純な線（理想的には距離とともにフェードする）から、上のスクリーンショットに示されているサイエンスフィクションの「フェイザー」スタイルなどのアニメーション効果まで、何でもかまいません。</p> + +<h2 id="Values" name="Values">値</h2> + +<dl> + <dt><code>gaze</code>（視線）</dt> + <dd>ユーザーは、ユーザーが見ている方向を検出する視線追跡システム（または<strong>視線入力</strong>）を使用しています。 ターゲット光線は、ビューアーの目を起点として描画され、ビューアーが見ている方向に追従します。</dd> + <dt><code>screen</code>（画面）</dt> + <dd>ターゲット光線の方向は、タッチスクリーン、マウス、またはその他の触覚入力デバイスをタップして示します。</dd> + <dt><code>tracked-pointer</code>（追跡ポインター）</dt> + <dd>ターゲティングは、ユーザーがターゲットの方向に向けるハンドヘルドデバイスまたはハンドトラッキングシステムを使用して行われます。 ターゲット光線は、手（または手の中のオブジェクト）からターゲット方向に伸びます。 方向はプラットフォーム固有のルールを使用して決定されますが、そのようなルールが存在しない場合は、ユーザーが人差し指を手からまっすぐに向けていると仮定して方向が選択されます。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<p>このコードの断片は、フレームごとに1回呼び出される関数の一部を示しています。 <code>null</code> 以外の {{domxref("XRInputSource.targetRaySpace", "targetRaySpace")}} を持つ入力を探します。 このプロパティの値を持つ入力は、ターゲット光線をユーザーから外側に投影する入力を表します。</p> + +<p>このような入力ごとに、この例では、{{domxref("XRInputSource.targetRayMode", "targetRayMode")}} が <code>tracked-pointer</code> である入力を探します。 これは、入力が実際には、視線入力デバイス、画面タップ、またはマウスクリックではなく、ターゲティングデバイスを表すことを目的としていることを示しています。 追跡ポインターの場合、関数 <code>myRenderTargetRayAsBeam()</code> が呼び出され、入力コントローラーの仮想位置から、それが指している方向に外側にビームをレンダリングします。</p> + +<p>コードは、仮想空間でのユーザーの手の位置を表すコントローラーや任意のオブジェクトの描画、その他の入力関連のタスクなどを引き続き実行する必要があります。</p> + +<pre class="brush: js notranslate">function updateInputSources(session, frame, refSpace) { + for (let source of session.getInputSources()) { + let targetRayPose = frame.getPose(inputSource.targetRaySpace, refSpace); + + if (targetRayPose) { + if (source.targetRayMode == "tracked-pointer") { + myRenderTargetRayAsBeam(targetRayPose); + } + } + + /* ... */ + } +} +</pre> + +<p>詳細とより完全な例については、<a href="/ja/docs/Web/API/WebXR_Device_API/Inputs">入力と入力ソース</a>の記事を参照してください。</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('WebXR','#enumdef-xrtargetraymode','XRTargetRayMode')}}</td> + <td>{{Spec2('WebXR')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat("api.XRTargetRayMode")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/WebXR_Device_API">WebXR Device API</a></li> + <li><a href="/ja/docs/Web/API/WebXR_Device_API/Inputs">入力と入力ソース</a></li> +</ul> diff --git a/files/ja/conflicting/web/api_49b9a84475f11fffb8fc271a7df3c49a/index.html b/files/ja/conflicting/web/api_49b9a84475f11fffb8fc271a7df3c49a/index.html deleted file mode 100644 index cdd2b4c27d..0000000000 --- a/files/ja/conflicting/web/api_49b9a84475f11fffb8fc271a7df3c49a/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: 索引 -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/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html b/files/ja/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html deleted file mode 100644 index 25be1a0e2e..0000000000 --- a/files/ja/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: WebAPI -slug: conflicting/Web/API_dd04ca1265cb79b990b8120e5f5070d3 -tags: - - Apps - - DOM - - Firefox OS - - Mobile -translation_of: Web/API -translation_of_original: WebAPI -original_slug: WebAPI ---- -<p><strong>WebAPI</strong> はデバイス間の互換性を提供する機能一式であり、Web アプリやコンテンツがデバイスに保存されているデータ (カレンダーや連絡先など) やデバイスハードウェア (バッテリーの状態やデバイスのバイブレーションハードウェアなど) へアクセスできるようにする API を指す用語です。これらの API を追加することにより今日の Web ができることを増やすとともに、従来はプロプライエタリなプラットフォームでしかできなかったことに広がることを望んでいます。</p> - -<div class="note"> -<p><strong>注記:</strong> 各バッジの簡単な説明については、<a href="/ja/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps" title="Web/Apps/Packaged_apps#Types_of_packaged_apps">パッケージ型アプリ</a>のドキュメントをご覧ください。</p> -</div> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="Communication_APIs" name="Communication_APIs">コミュニケーション API</h2> - -<dl> - <dt><a href="/ja/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">Network Information API</a></dt> - <dd>接続速度など、現在のネットワーク接続に関する基本的な情報を提供します。</dd> - <dt><a href="/ja/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth">Bluetooth</a> {{NonStandardBadge}}</dt> - <dd>WebBluetooth API は、デバイスのBluetooth ハードウェアに対する低水準のアクセス手段を提供します。</dd> - <dt><a href="/ja/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">Mobile Connection API</a> {{NonStandardBadge}}</dt> - <dd>信号強度やオペレーター情報など、デバイスのセルラー接続に関する情報を公開します。</dd> - <dt><a href="/ja/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">Network Stats API</a> {{NonStandardBadge}}</dt> - <dd>データの使用状況をモニタリングして、そのデータを特権アプリケーションに公開します。</dd> - <dt><a href="/ja/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony">Telephony</a> {{NonStandardBadge}}</dt> - <dd>アプリが電話を発着信したり、内蔵の電話機能のユーザインターフェイスを使用したりすることが可能です。</dd> - <dt><a href="/ja/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS </a>{{NonStandardBadge}}</dt> - <dd>アプリに対して、デバイスに保存しているメッセージのアクセスや管理だけでなく、SMS テキストメッセージの送受信を可能にします。</dd> - <dt><a href="/ja/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">WiFi Information API</a> {{NonStandardBadge}}</dt> - <dd>信号強度、現在接続しているネットワークの名称、利用可能な WiFi ネットワークなどの情報を提供する特権 API です。</dd> -</dl> - -<h2 class="Documentation" id="Hardware_access_APIs" name="Hardware_access_APIs">ハードウェアアクセス API</h2> - -<dl> - <dt><a href="/ja/docs/WebAPI/Using_Light_Events">Ambient Light Sensor API</a></dt> - <dd>環境光センサーへのアクセス手段を提供します。これにより、アプリがデバイス付近の環境光のレベルを検出できます。</dd> - <dt><a href="/ja/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">Battery Status API</a></dt> - <dd>バッテリーの残量や、デバイスが電源に接続されて充電中であるかといった情報を提供します。</dd> - <dt><a href="/ja/docs/Using_geolocation" title="Using_geolocation">Geolocation API</a></dt> - <dd>デバイスの物理的な位置に関する情報を提供します。</dd> - <dt><a href="/ja/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> - <dd>アプリがマウスへのアクセスをロックして、絶対座標ではなく移動量の差分にアクセスできます。これはゲームに対して重要です。</dd> - <dt><a href="/ja/docs/WebAPI/Proximity" title="WebAPI/Proximity">Proximity API</a></dt> - <dd>ユーザの顔など、近くにある物体とデバイスとの近接度を検出できます。</dd> - <dt><a href="/ja/docs/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">Device Orientation API</a></dt> - <dd>デバイスの向きが変化したときに通知します。</dd> - <dt><a href="/ja/docs/WebAPI/Managing_screen_orientation" title="WebAPI/Managing_screen_orientation">Screen Orientation API</a></dt> - <dd>スクリーンの向きが変化したときに通知します。この API は、アプリにとってどの向きが望ましいかを示すことにも使用できます。</dd> - <dt><a href="/ja/docs/Web/Guide/API/Vibration" title="WebAPI/Vibration">Vibration API</a></dt> - <dd>ゲームでの触覚フィードバックなどのために、アプリがデバイスのバイブレーションハードウェアを制御できます。これは通知のためのバイブレーションといった用途向けでは<strong>ありません</strong>。通知については <a href="/ja/docs/WebAPI/Alarm" title="WebAPI/Alarm">Alarm API</a> をご覧ください。</dd> - <dt><a href="/ja/docs/Web/API/Camera_API" title="Web/API/Camera_API">Camera API</a> {{NonStandardBadge}}</dt> - <dd>デバイス内蔵のカメラを使用して、アプリが写真や動画を撮影できます。</dd> - <dt><a href="/ja/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">Power Management API </a>{{NonStandardBadge}}</dt> - <dd>アプリがスクリーン、CPU、デバイスの電源などをオン・オフできるようにします。また、リソースロックイベントのリスニングや調査もサポートします。</dd> -</dl> - -<p><span class="alllinks"><a href="/ja/docs/tag/WebAPI" title="tag/CSS">すべて見る...</a></span></p> -</div> - -<div class="section"> -<h2 class="Documentation" id="Data_management_APIs" name="Data_management_APIs">データ管理 API</h2> - -<dl> - <dt><a href="/ja/docs/Web/API/File_Handle_API" title="Web/API/File_Handle_API">FileHandle API</a> {{NonStandardBadge}}</dt> - <dd>ロック機能とともに、書き込み可能なファイルをサポートします。</dd> - <dt><a href="/ja/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> - <dd>パフォーマンスが高い検索機能をサポートする、クライアントサイドの構造化データ用ストレージです。</dd> - <dt><a href="/ja/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API</a> {{NonStandardBadge}}</dt> - <dd>デバイスへ永続的に保存されるシステム全体の設定オプションを、アプリが調査したり変更したりすることが可能です。</dd> -</dl> - -<h2 class="Documentation" id="Other_APIs" name="Other_APIs">その他の API</h2> - -<dl> - <dt><a href="/ja/docs/Web/API/Alarm_API" title="Web/API/Alarm_API">Alarm API</a></dt> - <dd>アプリが通知を予定することが可能です。特定の時刻にアプリを自動起動する機能もサポートします。</dd> - <dt><a href="/ja/docs/Web/API/Simple_Push_API" title="Web/API/Simple_Push_API">Simple Push API</a></dt> - <dd>プラットフォームが特定のアプリケーションに通知メッセージを送信できます。</dd> - <dt><a href="/ja/docs/WebAPI/Using_Web_Notifications" title="WebAPI/Using_Web_Notifications">Web Notifications</a></dt> - <dd>アプリケーションが、システムレベルで表示される通知を送信できます。</dd> - <dt><a href="/ja/docs/Web/API/DOMApplicationsRegistry" title="Web/API/DOMApplicationsRegistry">Apps API</a> {{NonStandardBadge}}</dt> - <dd>Open WebApps API は、Web アプリのインストールや管理をサポートします。また、アプリが課金情報を調べることを可能にします。</dd> - <dt><a href="/ja/docs/Web/API/Web_Activities" title="Web/API/Web_Activities">Web Activities</a> {{NonStandardBadge}}</dt> - <dd>あるアプリが別のアプリにアクティビティを渡すことができます。例えばあるアプリが別のアプリに対して、写真を選択 (または作成) して返すように依頼するでしょう。一般的に、ユーザはどのアクティビティにどのアプリを使用するかを設定できます。</dd> - <dt><a href="/ja/docs/Web/Apps/Publishing/In-app_payments" title="Apps/Publishing/In-app_payments">WebPayment API</a> {{NonStandardBadge}}</dt> - <dd>Web コンテンツが、仮想的な物品に対する支払いや払い戻しの処理を開始できます。</dd> - <dt><a href="/ja/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API"><strong>Browser API</strong></a> {{NonStandardBadge}}</dt> - <dd>Web 技術を完全に使用する Web ブラウザの構築をサポートします (要するに、ブラウザの中にあるブラウザです)。</dd> - <dt><a href="/ja/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">Idle API</a></dt> - <dd>ユーザが能動的にデバイスを使用していないときに、アプリが通知を受け取れます。</dd> - <dt><a href="/ja/docs/WebAPI/Permissions" title="WebAPI/Permissions">Permissions API</a> {{NonStandardBadge}}</dt> - <dd>集中化された場所で、アプリの許可設定を管理します。設定アプリで使用されます。</dd> - <dt><a href="/ja/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">Time/Clock API</a> {{NonStandardBadge}}</dt> - <dd>現在時刻の設定をサポートします。タイムゾーンは <a href="/ja/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API</a> で設定します。</dd> -</dl> - -<h2 class="Community" id="Community" name="Community">WebAPI コミュニティ</h2> - -<p>これらの API について支援が必要になったとしても、それらの使用方法について他の開発者と語る手段がいくつかあります。</p> - -<ul> - <li>WebAPI フォーラムで相談する: {{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}</li> - <li>WebAPI IRC チャンネルを訪問する: <a href="irc://irc.mozilla.org/webapi" title="irc://irc.mozilla.org/webapi">#webapi</a></li> -</ul> - -<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html"><em>ネチケット</em>を忘れないでください...</a></span></p> - -<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">関連トピック</h2> - -<ul> - <li><a href="/ja/docs/DOM" title="Document Object Model (DOM)">Document Object Model (DOM)</a> は、HTML ドキュメントをツリーとして表現するものです。</li> - <li><a href="/ja/docs/JavaScript" title="JavaScript">JavaScript</a> - Web 向けのスクリプト言語です。</li> - <li><a href="/ja/docs/MDN/Doc_status/API" title="MDN/Doc_status/API">Doc status</a>: WebAPI のトピック一覧と、それらのドキュメント化の状況です。</li> -</ul> -</div> -</div> - -<p> </p> diff --git a/files/ja/web/api/bytestring/index.html b/files/ja/conflicting/web/javascript/reference/global_objects/string/index.html index b92bb846e3..904fd7d989 100644 --- a/files/ja/web/api/bytestring/index.html +++ b/files/ja/conflicting/web/javascript/reference/global_objects/string/index.html @@ -1,6 +1,6 @@ --- title: ByteString -slug: Web/API/ByteString +slug: conflicting/Web/JavaScript/Reference/Global_Objects/String tags: - API - ByteString @@ -11,6 +11,7 @@ tags: - WebIDL - インターフェイス translation_of: Web/API/ByteString +original_slug: Web/API/ByteString --- <div>{{APIRef("DOM")}}</div> diff --git a/files/ja/games/index.html b/files/ja/games/index.html index 8a0aa54e82..362240ccf0 100644 --- a/files/ja/games/index.html +++ b/files/ja/games/index.html @@ -33,7 +33,7 @@ translation_of: Games <div class="section"> <h2 id="Port_native_games_to_the_Web" name="Port_native_games_to_the_Web">ネイティブゲームをウェブに移植する</h2> -<p>あなたがネイティブ開発者 (例えば、C++ でゲームを書くような) で、あなたのゲームをウェブに移植する方法に興味がある場合、<a href="http://kripken.github.io/emscripten-site/index.html">Emscripten</a> ツール — これは LLVM から JavaScript へのコンパイラーで、LLVM バイトコード(例えば Clang を使って C/C++ から、あるいは他の言語から生成したもの) を受け取り、それを <a href="https://developer.mozilla.org/ja/docs/Games/Tools/asm.js">asm.js</a> というウェブで実行できるものにコンパイルします。</p> +<p>あなたがネイティブ開発者 (例えば、C++ でゲームを書くような) で、あなたのゲームをウェブに移植する方法に興味がある場合、<a href="http://kripken.github.io/emscripten-site/index.html">Emscripten</a> ツール — これは LLVM から JavaScript へのコンパイラーで、LLVM バイトコード(例えば Clang を使って C/C++ から、あるいは他の言語から生成したもの) を受け取り、それを <a href="/ja/docs/Games/Tools/asm.js">asm.js</a> というウェブで実行できるものにコンパイルします。</p> <p>開始するには、次のものを見てください:</p> diff --git a/files/ja/games/techniques/3d_on_the_web/basic_theory/index.html b/files/ja/games/techniques/3d_on_the_web/basic_theory/index.html index 079a49bed5..b2e15e7f94 100644 --- a/files/ja/games/techniques/3d_on_the_web/basic_theory/index.html +++ b/files/ja/games/techniques/3d_on_the_web/basic_theory/index.html @@ -58,7 +58,7 @@ translation_of: Games/Techniques/3D_on_the_web/Basic_theory <li><strong>ピクセル(Pixel)</strong>: スクリーン上の二次元のグリッドに配置された点、それぞれ RGBA の色を持つ。</li> </ul> -<p>頂点とフラグメントの処理はプログラミング可能です - あなたは <a href="https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders">自分自身でシェーダを書いて</a> 出力を操作することができます。</p> +<p>頂点とフラグメントの処理はプログラミング可能です - あなたは <a href="/ja/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders">自分自身でシェーダを書いて</a> 出力を操作することができます。</p> <h2 id="Vertex_processing" name="Vertex_processing">頂点の処理</h2> @@ -123,10 +123,10 @@ translation_of: Games/Techniques/3D_on_the_web/Basic_theory <p>これで 3D の処理の基本的な背景を知ることができました。もし練習に進んだり、動作するデモを見たいのでえあれば、下のチュートリアルを引き続き調べてください:</p> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Three.js でデモを作る</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Building up a basic demo with Babylon.js </a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Building up a basic demo with PlayCanvas </a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">A-Frame を使った基本的なデモの作成 </a></li> + <li><a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Three.js でデモを作る</a></li> + <li><a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Building up a basic demo with Babylon.js </a></li> + <li><a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Building up a basic demo with PlayCanvas </a></li> + <li><a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">A-Frame を使った基本的なデモの作成 </a></li> </ul> <p>さらに進んで、クールな最先端な 3D の試みをあなた自身で作ってください！</p> diff --git a/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.html b/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.html index 8dac345c69..182f22c5ed 100644 --- a/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.html +++ b/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.html @@ -5,7 +5,7 @@ translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-F --- <div>{{GamesSidebar}}</div> -<p class="summary"><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/WebVR">WebVR</a> APIと <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> API によって、ウェブブラウザ内でバーチャルリアリティ (VR) 体験を作成し始めることが可能になっていますが、コミュニティはもっと簡単に作れるツールやライブラリが現れるのを待っています。Mozilla の <a href="https://aframe.io/">A-Frame</a> フレームワークは、ウェブ開発者が慣れ親しんでいるシステムを用いて 3D VR 空間を構築するマークアップ言語を提供しています。このシステムはゲーム開発のコーディング原則に従っています; これはプロトタイプやデモを、大量の JavaScript や GLSL を書かずに、迅速にうまく構築するのに役立ちます。この記事では A-Frame をどうやって起動するか、そしてそれをつかって簡単なデモを構築する方法を説明します。</p> +<p class="summary"><a href="/ja/docs/Games/Techniques/3D_on_the_web/WebVR">WebVR</a> APIと <a href="/ja/docs/Web/API/WebGL_API">WebGL</a> API によって、ウェブブラウザ内でバーチャルリアリティ (VR) 体験を作成し始めることが可能になっていますが、コミュニティはもっと簡単に作れるツールやライブラリが現れるのを待っています。Mozilla の <a href="https://aframe.io/">A-Frame</a> フレームワークは、ウェブ開発者が慣れ親しんでいるシステムを用いて 3D VR 空間を構築するマークアップ言語を提供しています。このシステムはゲーム開発のコーディング原則に従っています; これはプロトタイプやデモを、大量の JavaScript や GLSL を書かずに、迅速にうまく構築するのに役立ちます。この記事では A-Frame をどうやって起動するか、そしてそれをつかって簡単なデモを構築する方法を説明します。</p> <h2 id="大まかな概要">大まかな概要</h2> diff --git a/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html b/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html index 91d1b9ee9f..aa14278879 100644 --- a/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html +++ b/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html @@ -269,6 +269,6 @@ torus.scale.y = Math.abs(Math.sin(t)); <p>{{JSFiddleEmbed("https://jsfiddle.net/rybr720u/","","350")}}</p> -<p>あなたは今までのコードを<a href="https://github.com/end3r/MDN-Games-3D/blob/gh-pages/Three.js/shapes.html">GitHubで見る</a>こともできるし、ローカル環境で遊びたいと思ったら<a href="https://github.com/end3r/MDN-Games-3D/">リポジトリをフォークする</a>こともできます。今あなたは Three.js の基本を理解しているでしょう。このページの親ページである <a href="https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web">Web上の3Dに関するドキュメント</a>に行くこともできます。</p> +<p>あなたは今までのコードを<a href="https://github.com/end3r/MDN-Games-3D/blob/gh-pages/Three.js/shapes.html">GitHubで見る</a>こともできるし、ローカル環境で遊びたいと思ったら<a href="https://github.com/end3r/MDN-Games-3D/">リポジトリをフォークする</a>こともできます。今あなたは Three.js の基本を理解しているでしょう。このページの親ページである <a href="/ja/docs/Games/Techniques/3D_on_the_web">Web上の3Dに関するドキュメント</a>に行くこともできます。</p> <p>WebGLを実際に触ることで、内部で何が起こっているのかをより理解することもできます。私たちの<a href="/ja/docs/Web/API/WebGL_API">WebGLドキュメンテーション</a>を参考にしてみてください。</p> diff --git a/files/ja/games/techniques/3d_on_the_web/webvr/index.html b/files/ja/games/techniques/3d_on_the_web/webvr/index.html index 82c41790e6..6c0755a7f2 100644 --- a/files/ja/games/techniques/3d_on_the_web/webvr/index.html +++ b/files/ja/games/techniques/3d_on_the_web/webvr/index.html @@ -106,7 +106,7 @@ translation_of: Games/Techniques/3D_on_the_web/WebVR <p>Boris Smus は、<a href="http://smus.com/responsive-vr/">レスポンシブ WebVR</a> の概念について書いています。 このコンセプトでは、VR ハードウェアのないラップトップ、Oculus Rift を搭載した PC、Google Cardboard に内蔵したスマートフォンなど、さまざまなデバイスで単一の Web ゲームをプレイしながら、それらすべてにユニークで価値のある体験を提供できます。 レスポンシブデザインに似ていますが、VR の世界に適用されます — 一度書けば VR ヘッドセットで実行できます ... またはそれなしで。 <a href="http://github.com/borismus/webvr-boilerplate">WebVR ボイラープレート</a>のソースを確認できます。 これは、WebVR の学習を開始する良い例であり、Web ベースの VR 体験の出発点です。</p> -<p>WebVR のシンプルなビルディングブロックを提供する <a href="https://aframe.io/">A-Frame</a> と呼ばれるマークアップフレームワークもあるため、VR Web サイトやゲームをすばやく構築して実験できます。 詳細については、<a href="https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">A-Frame を使った基本的なデモの作成</a>というチュートリアルを参照してください。</p> +<p>WebVR のシンプルなビルディングブロックを提供する <a href="https://aframe.io/">A-Frame</a> と呼ばれるマークアップフレームワークもあるため、VR Web サイトやゲームをすばやく構築して実験できます。 詳細については、<a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">A-Frame を使った基本的なデモの作成</a>というチュートリアルを参照してください。</p> <p>没入感は、ゲームプレイやグラフィックスよりも重要です — 体験の "内側にいる" と感じる必要があります。 実現するのは簡単ではありませんが、リアルな画像は必要ありません。 それどころか、基本的な形状を高フレームレートで飛び交うだけで、かなりの効果が得られます。 実験が重要なことを覚えておいてください — 特にあなたのゲームに何が有効かを確認してください。</p> diff --git a/files/ja/games/techniques/async_scripts/index.html b/files/ja/games/techniques/async_scripts/index.html index 0e5279f64d..ed95e3a3c8 100644 --- a/files/ja/games/techniques/async_scripts/index.html +++ b/files/ja/games/techniques/async_scripts/index.html @@ -11,7 +11,7 @@ translation_of: Games/Techniques/Async_scripts <div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/ja/docs/Games")}}</div> <div class="summary"> -<p><span class="seoSummary">全ての中~大規模ゲームでは、コンパイル処理を最適化してブラウザを最大限柔軟にする、非同期スクリプトとして <a href="/en-US/docs/Games/Tools/asm.js">asm.js</a> コードをコンパイルします。Gecko では、非同期コンパイルによって、ゲームのロード時に JavaScript エンジンがメインスレッド外で asm.js をコンパイルし、生成した機械語コードをキャッシュしてそれ以降のロード時にコンパイル不要となります(Firefox 28から)。違いを見るには、<code>about:config</code> で <code>javascript.options.parallel_parsing</code> を反転させてください。</span></p> +<p><span class="seoSummary">全ての中~大規模ゲームでは、コンパイル処理を最適化してブラウザを最大限柔軟にする、非同期スクリプトとして <a href="/ja/docs/Games/Tools/asm.js">asm.js</a> コードをコンパイルします。Gecko では、非同期コンパイルによって、ゲームのロード時に JavaScript エンジンがメインスレッド外で asm.js をコンパイルし、生成した機械語コードをキャッシュしてそれ以降のロード時にコンパイル不要となります(Firefox 28から)。違いを見るには、<code>about:config</code> で <code>javascript.options.parallel_parsing</code> を反転させてください。</span></p> </div> <h2 id="非同期を動作させる">非同期を動作させる</h2> diff --git a/files/ja/games/techniques/audio_for_web_games/index.html b/files/ja/games/techniques/audio_for_web_games/index.html index 4bb44a5b8f..f0481c7596 100644 --- a/files/ja/games/techniques/audio_for_web_games/index.html +++ b/files/ja/games/techniques/audio_for_web_games/index.html @@ -44,7 +44,7 @@ translation_of: Games/Techniques/Audio_for_Web_Games <p>急騰するモバイルネットワークのデータ使用を軽減するための試みとして、再生開始前のバッファリングができなくなることが恐らくあります。バッファリングとは、ブラウザが前もってメディアのダウンロードをする処理であり、円滑な再生を確実なものにするために度々必要になります。</p> -<p>{{domxref("HTMLMediaElement")}} インターフェイスが備える <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#Properties">多くのプロパティ</a> はトラックが再生可能な状態にあるかどうかを決定する助けになります。</p> +<p>{{domxref("HTMLMediaElement")}} インターフェイスが備える <a href="/ja/docs/Web/API/HTMLMediaElement#Properties">多くのプロパティ</a> はトラックが再生可能な状態にあるかどうかを決定する助けになります。</p> <div class="note"> <p><strong>注</strong>: 色々な意味でバッファリングの概念は時代遅れです。バイトレンジリクエストが許容される限り（これが既定の振る舞いです）、先行する内容のダウンロードの必要なしにオーディオの任意の点に飛ぶことができるべきです。しかしながら、先読みは依然として便利です。それなしでは、再生が始められるようになる前に、常にいくらかのクライアント・サーバー間通信が必要になるでしょう。</p> @@ -52,7 +52,7 @@ translation_of: Games/Techniques/Audio_for_Web_Games <h3 id="並行したオーディオ再生">並行したオーディオ再生</h3> -<p>多くのゲームでは、複数のオーディオを同時に再生することが求められます。例えば、ゲーム内で様々なことが起こるために、バックグラウンドミュージックと効果音を一緒に再生することがあります。この状況は近々、<a href="/docs/Web/API/Web_Audio_API">Web Audio API</a>の採用でもっと上手くいくようになる予定ですが、現状最も広くサポートされている方法 ― 平凡な{{htmlelement("audio")}}要素を使用すること ― は、モバイルデバイス上では不安定な結果になります。</p> +<p>多くのゲームでは、複数のオーディオを同時に再生することが求められます。例えば、ゲーム内で様々なことが起こるために、バックグラウンドミュージックと効果音を一緒に再生することがあります。この状況は近々、<a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a>の採用でもっと上手くいくようになる予定ですが、現状最も広くサポートされている方法 ― 平凡な{{htmlelement("audio")}}要素を使用すること ― は、モバイルデバイス上では不安定な結果になります。</p> <h3 id="テストとサポート">テストとサポート</h3> @@ -152,7 +152,7 @@ translation_of: Games/Techniques/Audio_for_Web_Games <h3 id="オーディオスプライト">オーディオスプライト</h3> -<p>オーディオスプライトは<a href="/docs/Web/Guide/CSS/CSS_Image_Sprites">CSSスプライト</a>から名前をとったもので、CSSスプライトとは単一グラフィックリソースを連続したスプライトに分解して使うCSSのための視覚的なテクニックです。同じ原理をオーディオに適用することで、読み込みと再生に時間のかかる小さなオーディオファイルの束ではなく、必要とするオーディオすべてを含む大きなオーディオファイル一つを用いることができます。そのファイルから特定の音を再生するには、各オーディオスプライトの既知の開始・停止時間を指定するだけです。</p> +<p>オーディオスプライトは<a href="/ja/docs/Web/Guide/CSS/CSS_Image_Sprites">CSSスプライト</a>から名前をとったもので、CSSスプライトとは単一グラフィックリソースを連続したスプライトに分解して使うCSSのための視覚的なテクニックです。同じ原理をオーディオに適用することで、読み込みと再生に時間のかかる小さなオーディオファイルの束ではなく、必要とするオーディオすべてを含む大きなオーディオファイル一つを用いることができます。そのファイルから特定の音を再生するには、各オーディオスプライトの既知の開始・停止時間を指定するだけです。</p> <p>利点は、一つのオーディオを前もって提供しておき、スプライトをすぐ使える状態にできることです。こうすることで、大きな一つのオーディオの再生と即時停止をするだけですみます。また、サーバーリクエスト数を減らすことと、帯域幅を節約することもできます。</p> @@ -215,11 +215,11 @@ myAudio.addEventListener('timeupdate', function() { <p>ゲーム内の音楽は感情に訴える強力な効果があります。あなたは様々な楽曲サンプルを組み合わせることができ、さらに、オーディオ要素のボリュームをコントロールすることができることを想定すれば、異なる楽曲をクロスフェードさせることができます。<code><a href="/Apps/Build/Audio_and_video_delivery/HTML5_playbackRate_explained">playbackRate()</a></code>を使うことで、動きにより良く同期させるために、ピッチに影響なく音楽のスピードの調節もできます。</p> -<p>これは標準の{{HTMLElement("audio")}}要素を使って{{domxref("HTMLMediaElement")}}と連携しさえすれば可能となりますが、より発展した<a href="/docs/Web/API/Web_Audio_API">Web Audio API</a>を使えばもっと簡単で柔軟になります。次にこれについて見ていきましょう。</p> +<p>これは標準の{{HTMLElement("audio")}}要素を使って{{domxref("HTMLMediaElement")}}と連携しさえすれば可能となりますが、より発展した<a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a>を使えばもっと簡単で柔軟になります。次にこれについて見ていきましょう。</p> <h2 id="ゲーム用の_Web_オーディオ_API">ゲーム用の Web オーディオ API</h2> -<p>Now that it's supported in all modern browsers except for Opera Mini and Internet Explorer (<a href="https://status.modern.ie/webaudioapi">although Microsoft is now working on it</a>), an acceptable approach for many situations is to use the <a href="/docs/Web/API/Web_Audio_API">Web Audio API</a> (see the <a href="http://caniuse.com/#search=web%20audio%20api">Can I use Web Audio API page</a> for more on browser compatibility). The Web Audio API is an advanced audio JavaScript API that is ideal for game audio. Developers can generate audio and manipulate audio samples as well as positioning sound in 3D game space.</p> +<p>Now that it's supported in all modern browsers except for Opera Mini and Internet Explorer (<a href="https://status.modern.ie/webaudioapi">although Microsoft is now working on it</a>), an acceptable approach for many situations is to use the <a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a> (see the <a href="http://caniuse.com/#search=web%20audio%20api">Can I use Web Audio API page</a> for more on browser compatibility). The Web Audio API is an advanced audio JavaScript API that is ideal for game audio. Developers can generate audio and manipulate audio samples as well as positioning sound in 3D game space.</p> <p>A feasible cross-browser strategy would be to provide basic audio using the standard {{HTMLElement("audio")}} element and, where supported, enhance the experience using the Web Audio API.</p> @@ -241,7 +241,7 @@ myAudio.addEventListener('timeupdate', function() { <h3 id="トラックを読み込む">トラックを読み込む</h3> -<p>With the Web Audio API you can load separate tracks and loops individually using <a href="/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a>, which means you can load them synchronously or in parallel. Loading synchronously might mean parts of your music are ready earlier and you can start playing them while others load.</p> +<p>With the Web Audio API you can load separate tracks and loops individually using <a href="/ja/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a>, which means you can load them synchronously or in parallel. Loading synchronously might mean parts of your music are ready earlier and you can start playing them while others load.</p> <p>Either way you may want to synchronize tracks or loops. The Web Audio API contains the notion of an internal clock that starts ticking the moment you create an audio context. You'll need to take account of the time between creating an audio context and when the first audio track starts playing. Recording this offset and querying the playing track's current time gives you enough information to synchronize separate pieces of audio.</p> @@ -370,10 +370,10 @@ for (var i = 0, len = tracks.length; i < len; i++) { <li>The environment (cavernous, underwater, etc.)</li> </ul> -<p>This is especially useful in a three-dimensional environment rendered using <a href="/docs/Web/WebGL">WebGL</a>, where the Web Audio API makes it possible to tie audio to the objects and viewpoints.</p> +<p>This is especially useful in a three-dimensional environment rendered using <a href="/ja/docs/Web/WebGL">WebGL</a>, where the Web Audio API makes it possible to tie audio to the objects and viewpoints.</p> <div class="note"> -<p><strong>注</strong>: See <a href="https://developer.mozilla.org/ja/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web Audio API Spatialization Basics</a> for more details.</p> +<p><strong>注</strong>: See <a href="/ja/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web Audio API Spatialization Basics</a> for more details.</p> </div> <h2 id="こちらも確認">こちらも確認</h2> diff --git a/files/ja/games/techniques/controls_gamepad_api/index.html b/files/ja/games/techniques/controls_gamepad_api/index.html index 1eb8e559d3..adb633b4cd 100644 --- a/files/ja/games/techniques/controls_gamepad_api/index.html +++ b/files/ja/games/techniques/controls_gamepad_api/index.html @@ -7,7 +7,7 @@ translation_of: Games/Techniques/Controls_Gamepad_API <h2 id="Web_ゲームのコントロール">Web ゲームのコントロール</h2> -<p><span id="result_box" lang="ja"><span>歴史的には、テレビに接続されたコンソールでゲームをすること、PC 上でのゲームとはまったく異なる体験でした。</span></span><span id="result_box" lang="ja"><span>最終的にはドライバとプラグインにより、コンソールゲームパッドをデスクトップゲームーネイティブかブラウザで実行されるゲームー</span></span><span lang="ja"><span>で使用できるようになりました。</span> <span>HTML5 の時代になり、</span></span><a href="https://developer.mozilla.org/docs/Web/API/Gamepad_API">Gamepad API</a><span lang="ja"><span> が完成し、プラグインなしでゲームパッドコントローラを使用してブラウザベースのゲームをプレイできるようになりました。</span> <span>Gamepad API は、入力を処理するために JavaScript コード内で使用できるボタンの押下と軸の変更を公開するインターフェイスを提供することで、これを実現します。</span> <span>これらは、ブラウザゲームにとって良いことです。</span></span></p> +<p><span id="result_box" lang="ja"><span>歴史的には、テレビに接続されたコンソールでゲームをすること、PC 上でのゲームとはまったく異なる体験でした。</span></span><span id="result_box" lang="ja"><span>最終的にはドライバとプラグインにより、コンソールゲームパッドをデスクトップゲームーネイティブかブラウザで実行されるゲームー</span></span><span lang="ja"><span>で使用できるようになりました。</span> <span>HTML5 の時代になり、</span></span><a href="/ja/docs/Web/API/Gamepad_API">Gamepad API</a><span lang="ja"><span> が完成し、プラグインなしでゲームパッドコントローラを使用してブラウザベースのゲームをプレイできるようになりました。</span> <span>Gamepad API は、入力を処理するために JavaScript コード内で使用できるボタンの押下と軸の変更を公開するインターフェイスを提供することで、これを実現します。</span> <span>これらは、ブラウザゲームにとって良いことです。</span></span></p> <p><img alt="gamepad-controls" src="http://end3r.com/tmp/gamepad/gamepadapi-hungryfridge-img01.png" style="display: block; height: 400px; margin: 0px auto; width: 600px;"></p> diff --git a/files/ja/games/techniques/index.html b/files/ja/games/techniques/index.html index f3dee722b0..2f1c134d9f 100644 --- a/files/ja/games/techniques/index.html +++ b/files/ja/games/techniques/index.html @@ -16,18 +16,18 @@ translation_of: Games/Techniques </div> <dl> - <dt><a href="/docs/Games/Techniques/Async_scripts">asm.js用の非同期スクリプトを使用する</a></dt> + <dt><a href="/ja/docs/Games/Techniques/Async_scripts">asm.js用の非同期スクリプトを使用する</a></dt> <dd>中~大規模ゲームの作成に必要となる、非同期スクリプトは活用すべき重要テクニックであり、その結果あなたのゲームのJavaScriptはメインスレッド外でコンパイルされて、将来のゲーム実行のためにキャッシュされ、その結果ユーザにとっては目覚ましいパフォーマンス改良となります。この記事では方法を説明します。</dd> - <dt><a href="/docs/Apps/Developing/Optimizing_startup_performance" title="/en-US/docs/Apps/Developing/Optimizing_startup_performance">起動パフォーマンスを最適化する</a></dt> + <dt><a href="/ja/docs/Apps/Developing/Optimizing_startup_performance" title="/en-US/docs/Apps/Developing/Optimizing_startup_performance">起動パフォーマンスを最適化する</a></dt> <dd>作成したゲームが素早く、スムーズに、ユーザのブラウザや端末が固まったように見えなくする方法。</dd> - <dt><a href="/docs/Games/WebRTC_data_channels" title="/en-US/docs/Games/WebRTC_data_channels">WebRTC のp2pデータチャネルを使う</a></dt> + <dt><a href="/ja/docs/Games/WebRTC_data_channels" title="/en-US/docs/Games/WebRTC_data_channels">WebRTC のp2pデータチャネルを使う</a></dt> <dd>オーディオとビデオ通信のサポートに加えて、WebRTCはプレイヤー同士のテキスト・バイナリデータ交換を可能にする、ピア・ツー・ピアのデータチャネルもあります。この記事ではこれでできる事を説明し、簡単に実現するライブラリの使用方法を示します。</dd> - <dt><a href="/docs/Games/Techniques/Efficient_animation_for_web_games">webゲーム用の効率的アニメーション</a></dt> + <dt><a href="/ja/docs/Games/Techniques/Efficient_animation_for_web_games">webゲーム用の効率的アニメーション</a></dt> <dd>この記事ではwebゲーム用の効果的なアニメーション作成のテクニックとアドバイスをモバイルフォンといった下位側の端末サポートに偏って網羅します。CSS トランジションや CSS アニメーション、{{ domxref("window.requestAnimationFrame") }} を含むJavaScriptループについて触れます。</dd> - <dt><a href="/docs/Games/Techniques/Audio_for_Web_Games">Webゲーム用のオーディオ</a></dt> + <dt><a href="/ja/docs/Games/Techniques/Audio_for_Web_Games">Webゲーム用のオーディオ</a></dt> <dd>ゲームにとってオーディオは重要部分です — フィードバックと雰囲気を付け加えます。Webベースのオーディオは早くから成熟していましたが、まだ多くのブラウザに案内するべき違いがあります。この記事ではwebゲーム用のオーディオを実装するための詳細なガイドを提供し、現在なるべく広い範囲のプラットフォームで動作するものを観察します。</dd> - <dt><a href="/docs/Games/Techniques/2D_collision_detection">2D 衝突検出</a></dt> + <dt><a href="/ja/docs/Games/Techniques/2D_collision_detection">2D 衝突検出</a></dt> <dd>2D ゲームの衝突検出についての正確な紹介</dd> - <dt><a href="/docs/Games/Techniques/Tilemaps">タイルマップ</a></dt> + <dt><a href="/ja/docs/Games/Techniques/Tilemaps">タイルマップ</a></dt> <dd>タイルは2Dゲームの世界を作るのに、とてもよくあるテクニックです。この記事ではタイルマップと、Canvas API でそれを実装する方法を紹介します。</dd> </dl> diff --git a/files/ja/games/techniques/webrtc_data_channels/index.html b/files/ja/games/techniques/webrtc_data_channels/index.html index 512aa787e0..b11e1ca2ab 100644 --- a/files/ja/games/techniques/webrtc_data_channels/index.html +++ b/files/ja/games/techniques/webrtc_data_channels/index.html @@ -15,7 +15,7 @@ translation_of: Games/Techniques/WebRTC_data_channels <div>{{IncludeSubnav("/ja/docs/Games")}}</div> -<p><a href="/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> (Web Real-Time Communications; Webリアルタイム通信の略語) API は、第一にオーディオとビデオ通信のサポートによって知られています。しかしながら、ピア・ツー・ピアのデータチャネルもあります。この記事ではこれの詳細を説明し、ゲーム内にデータチャネルを実装するライブラリの使用方法を示します。</p> +<p><a href="/ja/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> (Web Real-Time Communications; Webリアルタイム通信の略語) API は、第一にオーディオとビデオ通信のサポートによって知られています。しかしながら、ピア・ツー・ピアのデータチャネルもあります。この記事ではこれの詳細を説明し、ゲーム内にデータチャネルを実装するライブラリの使用方法を示します。</p> <h2 id="データチャネルとは">データチャネルとは?</h2> diff --git a/files/ja/games/tools/index.html b/files/ja/games/tools/index.html index 0d2495ad03..613a40dead 100644 --- a/files/ja/games/tools/index.html +++ b/files/ja/games/tools/index.html @@ -17,23 +17,23 @@ translation_of: Games/Tools </div> <dl> - <dt><a href="/docs/Games/Tools/asm.js">asm.js</a></dt> + <dt><a href="/ja/docs/Games/Tools/asm.js">asm.js</a></dt> <dd>asm.js は極めて限定された JavaScript のサブセットで、ahead-of-time (AOT) コンパイラで最適化されて、通常の JavaScript コードよりも極めて高速に動作します。これはもちろん、ゲーム用に優れています。</dd> <dt><a href="https://github.com/kripken/emscripten/wiki">Emscripten</a></dt> <dd> - <p>LLVM から JavaScript へのコンパイラです。これを利用することで、C++ や LLVM バイトコードを出力する言語のコードを、高速に動作する JavaScript へコンパイル可能です。これはアプリをWebに移植する優秀なツールです! <a href="https://github.com/kripken/emscripten/wiki/Tutorial">有用な Emscripten のチュートリアルはこちらです。</a> なお <a href="/docs/Mozilla/Projects/Emscripten">MDN にも Emscripten の記事を執筆中</a>です。</p> + <p>LLVM から JavaScript へのコンパイラです。これを利用することで、C++ や LLVM バイトコードを出力する言語のコードを、高速に動作する JavaScript へコンパイル可能です。これはアプリをWebに移植する優秀なツールです! <a href="https://github.com/kripken/emscripten/wiki/Tutorial">有用な Emscripten のチュートリアルはこちらです。</a> なお <a href="/ja/docs/Mozilla/Projects/Emscripten">MDN にも Emscripten の記事を執筆中</a>です。</p> </dd> - <dt><a href="/docs/Mozilla/Performance/Profiling_with_the_Built-in_Profiler" title="https://addons.mozilla.org/en-us/firefox/addon/gecko-profiler/">Gecko プロファイラ</a></dt> + <dt><a href="/ja/docs/Mozilla/Performance/Profiling_with_the_Built-in_Profiler" title="https://addons.mozilla.org/en-us/firefox/addon/gecko-profiler/">Gecko プロファイラ</a></dt> <dd>Gecko プロファイラを利用すると、パフォーマンス上の問題を引き起こしている箇所の特定が容易になります。その結果あなたのゲームは最高速で動作できます。</dd> - <dt><a href="/docs/Games/Tools/Engines_and_tools">ゲームエンジンとツール</a></dt> + <dt><a href="/ja/docs/Games/Tools/Engines_and_tools">ゲームエンジンとツール</a></dt> <dd>ゲーム開発者にとって有用な、ゲームエンジンとテンプレートのまとめです。</dd> - <dt><a href="/docs/Mozilla/Projects/Shumway">Shumway</a></dt> + <dt><a href="/ja/docs/Mozilla/Projects/Shumway">Shumway</a></dt> <dd>Shumway は Adobe Flash で作成されたものを JavaScript や WebGL などを用いてレンダリングします。これを利用することで Flash とオープンな Web 標準との間の溝を埋められます。この文書では Shumway の利用方法と、バグ修正にコントリビュートする方法について解説します。</dd> <dt>ゲーム開発とデバッグのためのツールチェーン</dt> - <dd>通常の Web アプリのデバッグとの違いや、ツールについて解説します。多くは<a href="/docs/Tools">開発ツール</a>でカバーされますが、特に有用なツールチェーンのチュートリアルはこちらです： + <dd>通常の Web アプリのデバッグとの違いや、ツールについて解説します。多くは<a href="/ja/docs/Tools">開発ツール</a>でカバーされますが、特に有用なツールチェーンのチュートリアルはこちらです： <ul> <li>基本的なツールの概要</li> - <li><a href="/docs/Tools/Shader_Editor">シェーダエディタ</a></li> + <li><a href="/ja/docs/Tools/Shader_Editor">シェーダエディタ</a></li> <li>パフォーマンスツール</li> </ul> </dd> diff --git a/files/ja/games/tutorials/2d_breakout_game_phaser/physics/index.html b/files/ja/games/tutorials/2d_breakout_game_phaser/physics/index.html index 283cabbffd..0556233fa2 100644 --- a/files/ja/games/tutorials/2d_breakout_game_phaser/physics/index.html +++ b/files/ja/games/tutorials/2d_breakout_game_phaser/physics/index.html @@ -9,7 +9,7 @@ original_slug: Games/Workflows/2D_breakout_game_Phaser/Physics <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Move_the_ball", "Games/Workflows/2D_Breakout_game_Phaser/Bounce_off_the_walls")}}</p> <div class="summary"> -<p>全 16回の<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">ゲーム開発チュートリアル</a> の 5 回目です。 今回終了後のソースコードは <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson05.html">Gamedev-Phaser-Content-Kit/demos/lesson05.html</a> でご覧になれます。</p> +<p>全 16回の<a href="/ja/docs/Games/Workflows/2D_Breakout_game_Phaser">ゲーム開発チュートリアル</a> の 5 回目です。 今回終了後のソースコードは <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson05.html">Gamedev-Phaser-Content-Kit/demos/lesson05.html</a> でご覧になれます。</p> </div> <p><span class="seoSummary">モノ同士の衝突を正しく処理するためには、物理演算が必要になります。この文書では、Phaser での実装と、典型的な例を紹介します。</span></p> @@ -86,6 +86,6 @@ function update() { <h2 id="次のステップ">次のステップ</h2> -<p>次のステップでは、<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Bounce_off_the_walls">ボールの跳ね返り</a> を実装します。</p> +<p>次のステップでは、<a href="/ja/docs/Games/Workflows/2D_Breakout_game_Phaser/Bounce_off_the_walls">ボールの跳ね返り</a> を実装します。</p> <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Move_the_ball", "Games/Workflows/2D_Breakout_game_Phaser/Bounce_off_the_walls")}}</p> diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html index 9a1833d45e..c7cab2f4e9 100644 --- a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html +++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html @@ -11,10 +11,10 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_w <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls")}}</p> <div class="summary"> -<p>これは<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">ゲーム開発Canvasチュートリアル</a>の10ステップのうち<strong>3番目</strong>のステップです。このレッスンを終えたあとの完成予想のソースコードは<a class="external external-icon" href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson03.html" rel="noopener">Gamedev-Canvas-workshop/lesson3.html</a>で入手できます。</p> +<p>これは<a href="/ja/docs/Games/Workflows/Breakout_game_from_scratch">ゲーム開発Canvasチュートリアル</a>の10ステップのうち<strong>3番目</strong>のステップです。このレッスンを終えたあとの完成予想のソースコードは<a class="external external-icon" href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson03.html" rel="noopener">Gamedev-Canvas-workshop/lesson3.html</a>で入手できます。</p> </div> -<p><span class="seoSummary">ボールが動くのを見られたのは良いことですが、画面からすぐ消えてしまっては面白くないじゃありませんか! これを解決するためにとても簡単な衝突検知 (<a href="https://developer.mozilla.org/ja/docs/Games/Workflows/Breakout_game_from_scratch/Collision_detection">後ほど</a>詳しく説明します) を導入し、Canvasの四辺でボールを弾ませます。</span></p> +<p><span class="seoSummary">ボールが動くのを見られたのは良いことですが、画面からすぐ消えてしまっては面白くないじゃありませんか! これを解決するためにとても簡単な衝突検知 (<a href="/ja/docs/Games/Workflows/Breakout_game_from_scratch/Collision_detection">後ほど</a>詳しく説明します) を導入し、Canvasの四辺でボールを弾ませます。</span></p> <h2 id="簡単な衝突検知">簡単な衝突検知</h2> @@ -101,6 +101,6 @@ if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) { <h2 id="次のステップ">次のステップ</h2> -<p>ボールが動き、かつゲームボードに留まるようになることまでこぎつけました。第4章では操作できるパドルを実装してみます。 <a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls">パドルとキーボード操作</a>を見てみましょう。</p> +<p>ボールが動き、かつゲームボードに留まるようになることまでこぎつけました。第4章では操作できるパドルを実装してみます。 <a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls">パドルとキーボード操作</a>を見てみましょう。</p> <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls")}}</p> diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html index 154b273e25..7220f84470 100644 --- a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html +++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html @@ -11,7 +11,7 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_ <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection")}}</p> <div class="summary"> -<p>これは<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">ゲーム開発Canvasチュートリアル</a>の10ステップのうち<strong>6番目</strong>のステップです。このレッスンを終えたあとの完成予想のソースコードは<a class="external external-icon" href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson06.html" rel="noopener">Gamedev-Canvas-workshop/lesson6.html</a>で入手できます。</p> +<p>これは<a href="/ja/docs/Games/Workflows/Breakout_game_from_scratch">ゲーム開発Canvasチュートリアル</a>の10ステップのうち<strong>6番目</strong>のステップです。このレッスンを終えたあとの完成予想のソースコードは<a class="external external-icon" href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson06.html" rel="noopener">Gamedev-Canvas-workshop/lesson6.html</a>で入手できます。</p> </div> <p><span class="seoSummary">ゲームプレイ制御を修正することにより負けることができるようになります。この大きな変更により、ついにゲームらしさを感じられるようになりました。ですが、壁とパドルでボールが弾むだけではすぐに空きてしまいます。ブロック崩しで本当に必要な要素、それはボールで崩すことができるブロックです。これが今回作り込んでいく部分になります。</span></p> @@ -108,6 +108,6 @@ var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;</pre> <h2 id="次のステップ">次のステップ</h2> -<p>というわけでついにブロックができました。でもボールはブロックに全く反応しません。第7章、<a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection">衝突検知</a>ではこれを変えます。</p> +<p>というわけでついにブロックができました。でもボールはブロックに全く反応しません。第7章、<a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection">衝突検知</a>ではこれを変えます。</p> <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection")}}</p> diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html index db29a8dec4..0f4dc41587 100644 --- a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html +++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html @@ -11,7 +11,7 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detect <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}</p> <div class="summary"> -<p>これは<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">ゲーム開発Canvasチュートリアル</a>の10ステップのうち<strong>7番目</strong>のステップです。このレッスンを終えたあとの完成予想のソースコードは<a class="external external-icon" href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson07.html" rel="noopener">Gamedev-Canvas-workshop/lesson7.html</a>で入手できます。</p> +<p>これは<a href="/ja/docs/Games/Workflows/Breakout_game_from_scratch">ゲーム開発Canvasチュートリアル</a>の10ステップのうち<strong>7番目</strong>のステップです。このレッスンを終えたあとの完成予想のソースコードは<a class="external external-icon" href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson07.html" rel="noopener">Gamedev-Canvas-workshop/lesson7.html</a>で入手できます。</p> </div> <p><span class="seoSummary">ブロックは既に画面上に現れていますが、ボールが素通りしてしまうのでは面白くありません。ボールがブロックで弾み、ブロックが壊れるように衝突検出を追加することを考えなくてはなりません。</span></p> @@ -128,6 +128,6 @@ for(var c=0; c<brickColumnCount; c++) { <h2 id="次のステップ">次のステップ</h2> -<p>着実にゴールに近づいています。では、先に進みましょう。第8章ではどのように<a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win">スコアと勝ち負けを記録するか</a>見てみます。</p> +<p>着実にゴールに近づいています。では、先に進みましょう。第8章ではどのように<a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win">スコアと勝ち負けを記録するか</a>見てみます。</p> <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}</p> diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html index edbd9e1d3f..046b910bd8 100644 --- a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html +++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html @@ -12,7 +12,7 @@ original_slug: >- <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}</p> <div class="summary"> -<p>これは<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">ゲーム開発Canvasチュートリアル</a>の10ステップのうち<strong>1番最初</strong>のステップです。このレッスンを終えたあとの完成予想のソースコードは<a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson01.html">Gamedev-Canvas-workshop/lesson1.html</a>で入手できます。</p> +<p>これは<a href="/ja/docs/Games/Workflows/Breakout_game_from_scratch">ゲーム開発Canvasチュートリアル</a>の10ステップのうち<strong>1番最初</strong>のステップです。このレッスンを終えたあとの完成予想のソースコードは<a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson01.html">Gamedev-Canvas-workshop/lesson1.html</a>で入手できます。</p> </div> <p><span class="seoSummary">ゲームの機能を書き始める前に、ゲーム内部を記述する基本的な構造を作る必要があります。これにはHTMLと{{htmlelement("canvas")}}要素を用います。</span></p> @@ -109,6 +109,6 @@ ctx.closePath();</pre> <h2 id="次のステップ">次のステップ</h2> -<p>ここまでで基本的なHTMLを組み上げcanvasに少し学習しました。それでは、第2章に進み<a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball">どうやってゲーム内のボールを動かすか</a>学びましょう。</p> +<p>ここまでで基本的なHTMLを組み上げcanvasに少し学習しました。それでは、第2章に進み<a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball">どうやってゲーム内のボールを動かすか</a>学びましょう。</p> <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}</p> diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html index b277e0f86d..5d6c9d30ba 100644 --- a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html +++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html @@ -11,7 +11,7 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up <p>{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}</p> <div class="summary"> -<p>これは<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">ゲーム開発Canvasチュートリアル</a>の10ステップのうち<strong>10番目、最後</strong>のステップです。このレッスンを終えたあとの完成予想のソースコードは<a class="external external-icon" href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson10.html" rel="noopener">Gamedev-Canvas-workshop/lesson10.html</a>で入手できます。</p> +<p>これは<a href="/ja/docs/Games/Workflows/Breakout_game_from_scratch">ゲーム開発Canvasチュートリアル</a>の10ステップのうち<strong>10番目、最後</strong>のステップです。このレッスンを終えたあとの完成予想のソースコードは<a class="external external-icon" href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson10.html" rel="noopener">Gamedev-Canvas-workshop/lesson10.html</a>で入手できます。</p> </div> <p><span class="seoSummary">書いたゲームのどれも常に改善の余地があります。例えば、プレイヤーに1つ以上のライフを与えることができます。1回や2回間違えてもゲームを終わらせられるようにするのです。また、描画も改善できます。</span></p> @@ -91,8 +91,8 @@ else { <h2 id="ゲームクリア_-_今のところは。">ゲームクリア - 今のところは。</h2> -<p>おめでとうございます。これで全てのレッスンを終えました。ここまでで、キャンバス操作の基本をと簡単な2Dゲームの裏にあるロジックを学んだはずです。フレームワークを学びゲーム開発を続ける良い時期です。このシリーズに対応する<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_breakout_game_Phaser">Phaserを使ったブロックくずしゲーム</a>や<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation">デバイス回転方向を使った2D 迷路ゲーム</a>チュートリアルを見てみると良いでしょう。<a href="https://developer.mozilla.org/ja/docs/Games">MDNのゲームセクション</a>で発想やより多くの知識を探してみても良いでしょう。</p> +<p>おめでとうございます。これで全てのレッスンを終えました。ここまでで、キャンバス操作の基本をと簡単な2Dゲームの裏にあるロジックを学んだはずです。フレームワークを学びゲーム開発を続ける良い時期です。このシリーズに対応する<a href="/ja/docs/Games/Workflows/2D_breakout_game_Phaser">Phaserを使ったブロックくずしゲーム</a>や<a href="/ja/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation">デバイス回転方向を使った2D 迷路ゲーム</a>チュートリアルを見てみると良いでしょう。<a href="/ja/docs/Games">MDNのゲームセクション</a>で発想やより多くの知識を探してみても良いでしょう。</p> -<p>また、<a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">このチュートリアルシリーズの目次</a>を見返せます。コーディングを楽しみましょう。</p> +<p>また、<a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">このチュートリアルシリーズの目次</a>を見返せます。コーディングを楽しみましょう。</p> <p>{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}</p> diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html index 771de0d6e5..0ce491e613 100644 --- a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html +++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html @@ -10,7 +10,7 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field")}}</p> -<div class="summary">これは<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">ゲーム開発Canvasチュートリアル</a>の10ステップのうち<strong>5番目</strong>のステップです。このレッスンを終えたあとの完成予想のソースコードは<a class="external external-icon" href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson05.html" rel="noopener">Gamedev-Canvas-workshop/lesson5.html</a>で入手できます。</div> +<div class="summary">これは<a href="/ja/docs/Games/Workflows/Breakout_game_from_scratch">ゲーム開発Canvasチュートリアル</a>の10ステップのうち<strong>5番目</strong>のステップです。このレッスンを終えたあとの完成予想のソースコードは<a class="external external-icon" href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson05.html" rel="noopener">Gamedev-Canvas-workshop/lesson5.html</a>で入手できます。</div> <p><span class="seoSummary">ボールが壁で弾むのを見たりパドルを左右雨に動かしたりできるのは楽しいですが、そのことを除くとこのゲームは何もせず、進捗や最終目標といったものが全くありません。ゲームプレイの観点からすると、まず負けることができるようにするのが良いでしょう。ブロック崩しで負けるということの裏にある論理は簡潔です。もしパドルでボールを逃してボールが画面の下端についてしまったらゲームオーバーになるのです。</span></p> @@ -82,6 +82,6 @@ if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) { <h2 id="次のステップ">次のステップ</h2> -<p>今のところかなり順調に進歩してきていて、ゲームも負けるようになったことでもっと遊ぶ価値が感じられるようになってきました。第六章<a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field">『ブロックのかたまりを作る』</a>に進み、ボールが壊せるブロックを作りましょう。</p> +<p>今のところかなり順調に進歩してきていて、ゲームも負けるようになったことでもっと遊ぶ価値が感じられるようになってきました。第六章<a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field">『ブロックのかたまりを作る』</a>に進み、ボールが壊せるブロックを作りましょう。</p> <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field")}}</p> diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/index.html index 2332bd2bf9..06051cec72 100644 --- a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/index.html +++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/index.html @@ -21,22 +21,22 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript <p>全てのレッスン、そしてこれから一緒に作る<a href="http://breakout.enclavegames.com/lesson10.html">MDNブロック崩しゲーム</a>の各バージョンは<a href="https://github.com/end3r/Canvas-gamedev-workshop">GitHub上で入手可能</a>です:</p> <ol> - <li><a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it">Canvasを作ってその上に描画する</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball">ボールを動かす</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls">ボールを壁で弾ませる</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls">パドルとキーボード操作</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over">ゲームオーバー</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field">ブロックのかたまりを作る</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection">衝突検出</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win">スコアと勝ち負けを記録する</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls">マウス操作</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up">仕上げ</a></li> + <li><a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it">Canvasを作ってその上に描画する</a></li> + <li><a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball">ボールを動かす</a></li> + <li><a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls">ボールを壁で弾ませる</a></li> + <li><a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls">パドルとキーボード操作</a></li> + <li><a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over">ゲームオーバー</a></li> + <li><a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field">ブロックのかたまりを作る</a></li> + <li><a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection">衝突検出</a></li> + <li><a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win">スコアと勝ち負けを記録する</a></li> + <li><a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls">マウス操作</a></li> + <li><a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up">仕上げ</a></li> </ol> <p>まずはJavaScriptだけで始めるのがWebゲーム開発の確実な知識を手に入れる一番良い方法です。そのあと、自分のプロジェクトで使うフレームワークを選びましょう。フレームワークはJavaScript言語で書かれた単なるツールです。ですから、たとえフレームワークを用いて開発しようとしていてもまずはその言語を学び、手元で実際に何が起こっているか理解すると良いでしょう。フレームワークは開発速度を上げ、ゲームのとるに足らない部分を処理してくれますが、もし何かが思ったように動かないなんてことがあったらいつでもデバッグしたり、あるいは単にJavaScriptで自分なりの解を出すということもできるのです。</p> <div class="note"> -<p><strong>ノート</strong>: ゲームライブラリを用いた2D Webゲーム開発に興味があるのであれば、このシリーズに対応する<a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_breakout_game_Phaser">Phaserを使ったブロックくずしゲーム</a>も参照してください。</p> +<p><strong>ノート</strong>: ゲームライブラリを用いた2D Webゲーム開発に興味があるのであれば、このシリーズに対応する<a href="/ja/docs/Games/Workflows/2D_breakout_game_Phaser">Phaserを使ったブロックくずしゲーム</a>も参照してください。</p> </div> <div class="note"> @@ -45,6 +45,6 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript <h2 id="次のステップ">次のステップ</h2> -<p>それでは始めましょう! 最初の章、<a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it">『Canvasを作ってその上に描画する』</a>に進みます。</p> +<p>それでは始めましょう! 最初の章、<a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it">『Canvasを作ってその上に描画する』</a>に進みます。</p> <p>{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it")}} </p> diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html index 676302d3f2..31d2ac0e1f 100644 --- a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html +++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html @@ -11,7 +11,7 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up")}}</p> <div class="summary"> -<p>これは<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">ゲーム開発Canvasチュートリアル</a>の10ステップのうち<strong>9番目</strong>のステップです。このレッスンを終えたあとの完成予想のソースコードは<a class="external external-icon" href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson09.html" rel="noopener">Gamedev-Canvas-workshop/lesson9.html</a>で入手できます。</p> +<p>これは<a href="/ja/docs/Games/Workflows/Breakout_game_from_scratch">ゲーム開発Canvasチュートリアル</a>の10ステップのうち<strong>9番目</strong>のステップです。このレッスンを終えたあとの完成予想のソースコードは<a class="external external-icon" href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson09.html" rel="noopener">Gamedev-Canvas-workshop/lesson9.html</a>で入手できます。</p> </div> <p><span class="seoSummary">ゲーム自体は実際に完成したので、磨き上げにかかりましょう。既にキーボード操作を追加していますが、マウス操作も簡単に追加できます。</span></p> @@ -53,6 +53,6 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls <h2 id="次のステップ">次のステップ</h2> -<p>最後に微調整する準備が整った、完全なゲームが完成しました。では、<a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up">仕上げ</a>に入りましょう。</p> +<p>最後に微調整する準備が整った、完全なゲームが完成しました。では、<a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up">仕上げ</a>に入りましょう。</p> <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up")}}</p> diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html index 6d50976800..b87aceacb0 100644 --- a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html +++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html @@ -9,7 +9,7 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls")}}</p> <div class="summary"> -<p>これは<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">ゲーム開発Canvasチュートリアル</a>の10ステップのうち<strong>2番目</strong>のステップです。このレッスンを終えたあとの完成予想のソースコードは<a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson02.html">Gamedev-Canvas-workshop/lesson2.html</a>で入手できます。</p> +<p>これは<a href="/ja/docs/Games/Workflows/Breakout_game_from_scratch">ゲーム開発Canvasチュートリアル</a>の10ステップのうち<strong>2番目</strong>のステップです。このレッスンを終えたあとの完成予想のソースコードは<a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson02.html">Gamedev-Canvas-workshop/lesson2.html</a>で入手できます。</p> </div> <p><span class="seoSummary">前回のレッスンを一通りこなしてみてボールの描き方が分かりました。では今回はそれを動かしましょう。技術的には、ボールを描画し、またそれを消してからほんの少し違う位置に描画し直すという処理を毎フレームずつ行うことで動いているような印象を生み出します。ちょうど映画がどのように動くのかと同じです。</span></p> @@ -136,6 +136,6 @@ function draw() { <h2 id="次のステップ">次のステップ</h2> -<p>ボールを描画して動くようにしましたが、そのままCanvasの縁から消えていってしまいます。第3章ではどのように<a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls">ボールを壁で弾ませる</a>か探っていきます。</p> +<p>ボールを描画して動くようにしましたが、そのままCanvasの縁から消えていってしまいます。第3章ではどのように<a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls">ボールを壁で弾ませる</a>か探っていきます。</p> <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls")}}</p> diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html index 15b18e0bb5..9728bef6c5 100644 --- a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html +++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html @@ -11,7 +11,7 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keybo <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over")}}</p> <div class="summary"> -<p>これは<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">ゲーム開発Canvasチュートリアル</a>の10ステップのうち<strong>4番目</strong>のステップです。このレッスンを終えたあとの完成予想のソースコードは<a class="external external-icon" href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson04.html" rel="noopener">Gamedev-Canvas-workshop/lesson4.html</a>で入手できます。</p> +<p>これは<a href="/ja/docs/Games/Workflows/Breakout_game_from_scratch">ゲーム開発Canvasチュートリアル</a>の10ステップのうち<strong>4番目</strong>のステップです。このレッスンを終えたあとの完成予想のソースコードは<a class="external external-icon" href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson04.html" rel="noopener">Gamedev-Canvas-workshop/lesson4.html</a>で入手できます。</p> </div> <p><span class="seoSummary">ボールは壁で自由に弾み、あなたはずっとそれを見ていることができますが、今の所何の対話要素もありません。操作できないものなんてゲームじゃありません! ですからユーザーとの対話要素、操作できるパドルを追加しましょう。</span></p> @@ -124,6 +124,6 @@ else if(leftPressed && paddleX > 0) { <h2 id="次のステップ">次のステップ</h2> -<p>ゲームっぽい要素を追加しましょう。今問題なのはただパドルでボールを永遠に打ち続けることしか出来ないという点です。これは第5章、<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Game_over">ゲームオーバー</a>でゲームの終了状態を追加することで完全に変わることになります。</p> +<p>ゲームっぽい要素を追加しましょう。今問題なのはただパドルでボールを永遠に打ち続けることしか出来ないという点です。これは第5章、<a href="/ja/docs/Games/Workflows/Breakout_game_from_scratch/Game_over">ゲームオーバー</a>でゲームの終了状態を追加することで完全に変わることになります。</p> <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over")}}</p> diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html index 6e9b796c0b..dc5119dd85 100644 --- a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html +++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html @@ -11,7 +11,7 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_ <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}</p> <div class="summary"> -<p>これは<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">ゲーム開発Canvasチュートリアル</a>の10ステップのうち<strong>8番目</strong>のステップです。このレッスンを終えたあとの完成予想のソースコードは<a class="external external-icon" href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson08.html" rel="noopener">Gamedev-Canvas-workshop/lesson8.html</a>で入手できます。</p> +<p>これは<a href="/ja/docs/Games/Workflows/Breakout_game_from_scratch">ゲーム開発Canvasチュートリアル</a>の10ステップのうち<strong>8番目</strong>のステップです。このレッスンを終えたあとの完成予想のソースコードは<a class="external external-icon" href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson08.html" rel="noopener">Gamedev-Canvas-workshop/lesson8.html</a>で入手できます。</p> </div> <p><span class="seoSummary">ブロックを崩せるのは最高ですが、より素晴らしいものにするためにユーザーが壊した全てのブロックに対してポイントを与え、合計スコアのカウントを更新し続けましょう。</span></p> @@ -90,6 +90,6 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_ <h2 id="次のステップ">次のステップ</h2> -<p>この時点でもこのゲームはかなりよく見えます。次のレッスンでは<a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls">マウス操作</a>を追加することでゲームの魅力を広げます。</p> +<p>この時点でもこのゲームはかなりよく見えます。次のレッスンでは<a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls">マウス操作</a>を追加することでゲームの魅力を広げます。</p> <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}</p> diff --git a/files/ja/games/tutorials/index.html b/files/ja/games/tutorials/index.html index 5ece03f6be..7d02c40371 100644 --- a/files/ja/games/tutorials/index.html +++ b/files/ja/games/tutorials/index.html @@ -17,10 +17,10 @@ original_slug: Games/Workflows <p>This page contains articles that highlight different workflows for effectively creating different types of web games, whether you want to create a 2D or 3D game from scratch, or port a C++ or Flash game over to open web technologies.</p> <dl> - <dt><a href="/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">2D breakout game using pure JavaScript</a></dt> + <dt><a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">2D breakout game using pure JavaScript</a></dt> <dd>In this step-by-step tutorial you'll implement a simple breakout clone using pure JavaScript. Along the way you will learn the basics of using the {{htmlelement("canvas")}} element to implement fundamental game mechanics like rendering and moving images, collision detection, control machanisms, and winning and losing states.</dd> - <dt><a href="/en-US/docs/Games/Workflows/2D_breakout_game_Phaser">2D breakout game using Phaser</a></dt> + <dt><a href="/ja/docs/Games/Workflows/2D_breakout_game_Phaser">2D breakout game using Phaser</a></dt> <dd>In this step-by-step tutorial you'll implement the same breakout clone as the previous tutorial series, except that this time you'll do it using the<a class="external external-icon" href="http://phaser.io/">Phaser</a> HTML5 game framework. This idea here is to teach some of the fundamentals (and advantages) of working with frameworks, along with fundamental game mechanics.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation">2D maze game with device orientation</a></dt> - <dd>This tutorial shows how to create a 2D maze game using HTML5, incorporating fundamentals such as collision detection and sprite placement on a {{htmlelement("canvas")}}. This is a mobile game that uses the <a href="/en-US/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes">Device Orientation</a> and <a href="/en-US/docs/Web/Guide/API/Vibration">Vibration</a><strong> APIs</strong> to enhance the gameplay and is built using the <a href="http://phaser.io/">Phaser</a> framework.</dd> + <dt><a href="/ja/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation">2D maze game with device orientation</a></dt> + <dd>This tutorial shows how to create a 2D maze game using HTML5, incorporating fundamentals such as collision detection and sprite placement on a {{htmlelement("canvas")}}. This is a mobile game that uses the <a href="/ja/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes">Device Orientation</a> and <a href="/ja/docs/Web/Guide/API/Vibration">Vibration</a><strong> APIs</strong> to enhance the gameplay and is built using the <a href="http://phaser.io/">Phaser</a> framework.</dd> </dl> diff --git a/files/ja/glossary/502/index.html b/files/ja/glossary/502/index.html index 5233c657bf..a792098794 100644 --- a/files/ja/glossary/502/index.html +++ b/files/ja/glossary/502/index.html @@ -18,5 +18,5 @@ translation_of: Glossary/502 <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Response_codes">HTTP レスポンスコードの一覧</a></li> + <li><a href="/ja/docs/Web/HTTP/Response_codes">HTTP レスポンスコードの一覧</a></li> </ul> diff --git a/files/ja/glossary/alignment_container/index.html b/files/ja/glossary/alignment_container/index.html index f483d08075..8751607926 100644 --- a/files/ja/glossary/alignment_container/index.html +++ b/files/ja/glossary/alignment_container/index.html @@ -13,5 +13,5 @@ translation_of: Glossary/Alignment_Container <h2 id="Learn_more" name="Learn_more">関連項目</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Box_Alignment">CSS Box Alignment</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment">CSS Box Alignment</a></li> </ul> diff --git a/files/ja/glossary/api/index.html b/files/ja/glossary/api/index.html index 1688c932bf..0aae200301 100644 --- a/files/ja/glossary/api/index.html +++ b/files/ja/glossary/api/index.html @@ -31,5 +31,5 @@ translation_of: Glossary/API <h3 id="Technical_reference" name="Technical_reference">技術リファレンス</h3> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/API">Web API リファレンス</a></li> + <li><a href="/ja/docs/Web/API">Web API リファレンス</a></li> </ul> diff --git a/files/ja/glossary/block_cipher_mode_of_operation/index.html b/files/ja/glossary/block_cipher_mode_of_operation/index.html index c1463282ac..3286ca37f7 100644 --- a/files/ja/glossary/block_cipher_mode_of_operation/index.html +++ b/files/ja/glossary/block_cipher_mode_of_operation/index.html @@ -10,4 +10,4 @@ translation_of: Glossary/Block_cipher_mode_of_operation --- <p>暗号利用モード (通常は単に「モード」と呼ばれます) は、ブロックサイズよりも長いメッセージを暗号化または復号化するためにブロック暗号を使用する方法を指定します。</p> -<p>現在使用されているほとんどの対称鍵アルゴリズムはブロック暗号です。これは、一度に 1 ブロックずつデータを暗号化することを意味します。各ブロックのサイズは固定されており、アルゴリズムによって決定されます。たとえば、<a class="glossaryLink new" href="https://developer.mozilla.org/ja/docs/Glossary/AES" rel="nofollow" title="The definition of that term (AES) has not been written yet; please consider contributing it!">AES</a> は 16 バイトのブロックを使用します。ブロック暗号は常に <em>モード</em> と共に使用されます。モードは、ブロックサイズより長いメッセージを安全に暗号化する方法を指定します。たとえば、AES は暗号ですが、CTR、CBC、および GCM はすべてモードです。不適切なモードを使用したり、モードを誤って使用したりすると、使用する暗号アルゴリズムによって本来提供されるセキュリティを損なってしまう可能性があります。</p> +<p>現在使用されているほとんどの対称鍵アルゴリズムはブロック暗号です。これは、一度に 1 ブロックずつデータを暗号化することを意味します。各ブロックのサイズは固定されており、アルゴリズムによって決定されます。たとえば、<a class="glossaryLink new" href="/ja/docs/Glossary/AES" rel="nofollow" title="The definition of that term (AES) has not been written yet; please consider contributing it!">AES</a> は 16 バイトのブロックを使用します。ブロック暗号は常に <em>モード</em> と共に使用されます。モードは、ブロックサイズより長いメッセージを安全に暗号化する方法を指定します。たとえば、AES は暗号ですが、CTR、CBC、および GCM はすべてモードです。不適切なモードを使用したり、モードを誤って使用したりすると、使用する暗号アルゴリズムによって本来提供されるセキュリティを損なってしまう可能性があります。</p> diff --git a/files/ja/glossary/boolean/index.html b/files/ja/glossary/boolean/index.html index d2a8f0d1e3..ec7e027904 100644 --- a/files/ja/glossary/boolean/index.html +++ b/files/ja/glossary/boolean/index.html @@ -9,7 +9,7 @@ tags: - プログラミング言語 translation_of: Glossary/Boolean --- -<p><span class="seoSummary">コンピューター科学において、<strong>boolean</strong>（論理型、真偽値型）は <code>true</code>（真）か <code>false</code>（偽）の値のみを取れる論理データ型です。たとえば、 JavaScript では boolean による条件がコードの部分を実行するか（<a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if 文</a>の中など）や繰り返し（<a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for ループ</a>など）を決定します。</span></p> +<p><span class="seoSummary">コンピューター科学において、<strong>boolean</strong>（論理型、真偽値型）は <code>true</code>（真）か <code>false</code>（偽）の値のみを取れる論理データ型です。たとえば、 JavaScript では boolean による条件がコードの部分を実行するか（<a href="/ja/docs/Web/JavaScript/Reference/Statements/if...else">if 文</a>の中など）や繰り返し（<a href="/ja/docs/Web/JavaScript/Reference/Statements/for">for ループ</a>など）を決定します。</span></p> <pre class="brush: js">/* JavaScript if 文 */ if (boolean 条件) { diff --git a/files/ja/glossary/brotli_compression/index.html b/files/ja/glossary/brotli_compression/index.html index ba7bf74147..cb490c8e38 100644 --- a/files/ja/glossary/brotli_compression/index.html +++ b/files/ja/glossary/brotli_compression/index.html @@ -9,7 +9,7 @@ tags: - compression translation_of: Glossary/brotli_compression --- -<p><span class="seoSummary"><strong>Brotli</strong> は、汎用の可逆圧縮アルゴリズムです。</span> LZ77 アルゴリズムのモダンバリアント、ハフマン符号、2次コンテキストモデリングの組み合わせを使用してデータを圧縮し、現在利用可能な最良の汎用圧縮方法に匹敵する圧縮率を提供します。Brotli は <a href="/en-US/docs/Glossary/GZip_compression">gzip</a> よりも優れた圧縮率を提供し、収縮速度は同等ですが、 brotli 圧縮は Gzip 圧縮よりも処理が遅いため、<a href="/ja/docs/Glossary/Cache">キャッシュ</a> できないコンテンツの圧縮には gzip の方が適している場合があります。</p> +<p><span class="seoSummary"><strong>Brotli</strong> は、汎用の可逆圧縮アルゴリズムです。</span> LZ77 アルゴリズムのモダンバリアント、ハフマン符号、2次コンテキストモデリングの組み合わせを使用してデータを圧縮し、現在利用可能な最良の汎用圧縮方法に匹敵する圧縮率を提供します。Brotli は <a href="/ja/docs/Glossary/GZip_compression">gzip</a> よりも優れた圧縮率を提供し、収縮速度は同等ですが、 brotli 圧縮は Gzip 圧縮よりも処理が遅いため、<a href="/ja/docs/Glossary/Cache">キャッシュ</a> できないコンテンツの圧縮には gzip の方が適している場合があります。</p> <p>Brotli は最新のほとんどのブラウザーと互換性がありますが、フォールバックを検討することをお勧めします。</p> diff --git a/files/ja/glossary/canvas/index.html b/files/ja/glossary/canvas/index.html index 671743ab13..061abc15e6 100644 --- a/files/ja/glossary/canvas/index.html +++ b/files/ja/glossary/canvas/index.html @@ -22,14 +22,14 @@ translation_of: Glossary/Canvas <h3 id="Learning_resources" name="Learning_resources">Canvas について詳しく学ぶ</h3> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial">MDN 上の Canvas チュートリアル</a></li> + <li><a href="/ja/docs/Web/Guide/HTML/Canvas_tutorial">MDN 上の Canvas チュートリアル</a></li> </ul> <h3 id="Technical_information" name="Technical_information">技術情報</h3> <ul> <li>MDN 上の HTML {{HTMLElement("canvas")}} 要素のページ</li> - <li><a href="https://developer.mozilla.org/ja/docs/HTML/Canvas">MDN 上の Canvas の一般的なドキュメント</a></li> + <li><a href="/ja/docs/HTML/Canvas">MDN 上の Canvas の一般的なドキュメント</a></li> <li>{{domxref("CanvasRenderingContext2D")}}: canvas 2D の描画 API</li> <li>w3c 上のページ: <a href="http://www.w3.org/TR/2dcontext/" rel="external">The Canvas 2D API specification</a></li> </ul> diff --git a/files/ja/glossary/certified/index.html b/files/ja/glossary/certified/index.html index 754bdce461..e625782bdd 100644 --- a/files/ja/glossary/certified/index.html +++ b/files/ja/glossary/certified/index.html @@ -18,7 +18,7 @@ translation_of: Glossary/Certified <h3 id="General_knowledge" name="General_knowledge">一般知識</h3> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/Security/Information_Security_Basics">情報セキュリティのチュートリアル</a></li> + <li><a href="/ja/docs/Web/Security/Information_Security_Basics">情報セキュリティのチュートリアル</a></li> <li>Wikipedia の {{Interwiki("wikipedia", "Professional_certification_(computer_technology)#Information_systems_security", "Certification")}}(英語)</li> </ul> diff --git a/files/ja/glossary/class/index.html b/files/ja/glossary/class/index.html index 01cc188b22..9ec6e3968f 100644 --- a/files/ja/glossary/class/index.html +++ b/files/ja/glossary/class/index.html @@ -14,8 +14,8 @@ translation_of: Glossary/Class <h3 id="General_knowledge" name="General_knowledge">一般知識</h3> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">クラスベース言語とプロトタイプベース言語</a>（JavaScript など）</li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#The_Class">JavaScript におけるクラスとしての関数の利用</a></li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">クラスベース言語とプロトタイプベース言語</a>（JavaScript など）</li> + <li><a href="/ja/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#The_Class">JavaScript におけるクラスとしての関数の利用</a></li> <li>ウィキペディアの<a href="https://ja.wikipedia.org/wiki/%E3%82%AF%E3%83%A9%E3%82%B9%E3%83%99%E3%83%BC%E3%82%B9">クラスベース</a>の記事</li> <li>ウィキペディアの <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%E6%8C%87%E5%90%91%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0">Object-oriented programming</a> の記事</li> </ul> diff --git a/files/ja/glossary/code_splitting/index.html b/files/ja/glossary/code_splitting/index.html index 747c79a6c2..be32954dd7 100644 --- a/files/ja/glossary/code_splitting/index.html +++ b/files/ja/glossary/code_splitting/index.html @@ -13,7 +13,7 @@ translation_of: Glossary/Code_splitting <ul> <li>Bundling</li> - <li><a href="/en-US/docs/Learn/Performance/Lazy_loading">Lazy loading</a></li> - <li><a href="/en-US/docs/Glossary/HTTP_2">HTTP/2</a></li> - <li><a href="/en-US/docs/Glossary/Tree_shaking">Tree shaking</a></li> + <li><a href="/ja/docs/Learn/Performance/Lazy_loading">Lazy loading</a></li> + <li><a href="/ja/docs/Glossary/HTTP_2">HTTP/2</a></li> + <li><a href="/ja/docs/Glossary/Tree_shaking">Tree shaking</a></li> </ul> diff --git a/files/ja/glossary/compile/index.html b/files/ja/glossary/compile/index.html index c40b5545ca..11a7bec86f 100644 --- a/files/ja/glossary/compile/index.html +++ b/files/ja/glossary/compile/index.html @@ -11,7 +11,7 @@ translation_of: Glossary/Compile <p>通常、コンパイラーは C や{{Glossary("Java")}} のように人間が理解しやすい高級言語をアセンブリのような CPU が理解できる機械語に変換します。TypeScript を {{Glossary("JavaScript")}} にコンパイルするような、同レベル間の言語を翻訳するコンパイラーはトランスパイラやクロスコンパイラーと呼ばれます。これらはプロダクティビティツールと考えられています。</p> <p>ほとんどのコンパイラーは、ahead-of-time (AOT) か just-in-time (JIT) で動きます。プログラマーは、たいていコマンドラインか使用している {{Glossary("IDE")}} から AOT コンパイラーを起動します。最も有名なコンパイラーである "gcc" はその一例です。<br> - JIT コンパイラーはたいてい透過的であり、性能のために使用されます。例えばブラウザーの場合、Firefox の <a href="https://developer.mozilla.org/ja/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> JavaScript エンジンは組み込み JIT コンパイラーを持っています。これは、ウェブサイトを閲覧中にウェブサイトの JavaScript がより速く実行できるように機械語のコードにコンパイルします。<a href="https://developer.mozilla.org/ja/docs/WebAssembly">WebAssembly</a> のようなプロジェクトはこれをより良く行えるようにします。</p> + JIT コンパイラーはたいてい透過的であり、性能のために使用されます。例えばブラウザーの場合、Firefox の <a href="/ja/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> JavaScript エンジンは組み込み JIT コンパイラーを持っています。これは、ウェブサイトを閲覧中にウェブサイトの JavaScript がより速く実行できるように機械語のコードにコンパイルします。<a href="/ja/docs/WebAssembly">WebAssembly</a> のようなプロジェクトはこれをより良く行えるようにします。</p> <h2 id="Learn_more" name="Learn_more">さらに学ぶ</h2> diff --git a/files/ja/glossary/conditional/index.html b/files/ja/glossary/conditional/index.html index a30af320d9..351f392128 100644 --- a/files/ja/glossary/conditional/index.html +++ b/files/ja/glossary/conditional/index.html @@ -7,28 +7,21 @@ tags: - Glossary translation_of: Glossary/Conditional --- -<p><span class="seoSummary"><strong>条件</strong> とは、条件式が満たされるか否かによって、通常のコード実行を強制停止したり、変更したりする、一連のルールです。</span></p> +<p><strong>条件</strong> とは、条件式が満たされるか否かによって、通常のコード実行を強制停止したり、変更したりする、一連のルールです。</p> -<p><span id="result_box" lang="en"><span class="hps">特定の条件が満たされる場合、1 つの命令または一連の命令が実行されます。それ以外では、他の命令が実行されます。1 つの命令または一連の命令の実行を、条件がまだ満たされない間に繰り返すこともできます。</span></span></p> +<p>特定の条件が満たされる場合、1 つの命令または一連の命令が実行されます。それ以外では、他の命令が実行されます。1 つの命令または一連の命令の実行を、条件がまだ満たされない間に繰り返すこともできます。</p> -<h2 id="Learn_more" name="Learn_more"><strong>もっと学習する</strong></h2> +<h2 id="Learn_more">詳細情報</h2> -<h3 id="General_knowledge" name="General_knowledge"><strong>一般知識</strong></h3> +<h3 id="General_knowledge">一般知識</h3> <ul> - <li>Wikipedia での {{interwiki("wikipedia", "Exception_handling#Condition_systems", "Condition")}}</li> + <li>{{interwiki("wikipedia", "Exception_handling#Condition_systems", "Condition")}} (Wikipedia)</li> + <li><a href="/ja/docs/Glossary/Control_flow">制御フロー</a> (MDN)</li> </ul> -<h3 id="Technical_reference" name="Technical_reference">技術リファレンス</h3> - -<ul> - <li>MDN での <a href="/ja/docs/Glossary/Control_flow">制御フロー</a></li> -</ul> - -<h3 id="Learn_about_it" name="Learn_about_it">これについて学習する</h3> +<h3 id="Learn_about_it">学習教材</h3> <ul> <li>MDN での <a href="/ja/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">制御フローとエラー処理</a></li> </ul> - -<div id="divLookup" style="background-color: transparent; color: #000000; position: absolute; top: 543px; left: 277px; padding: 0px; border-radius: 2px;"></div> diff --git a/files/ja/glossary/crlf/index.html b/files/ja/glossary/crlf/index.html index 1b59e0e247..2471a417c2 100644 --- a/files/ja/glossary/crlf/index.html +++ b/files/ja/glossary/crlf/index.html @@ -19,7 +19,7 @@ translation_of: Glossary/CRLF <p>CR に直接 LF が続くと (CRLF, <code>\r\n</code>, or <code>0x0D0A</code>)、カーソルを下へ移動してから行の先頭へ移動します。</p> -<h2 id="詳細情報Edit">詳細情報<a class="button section-edit only-icon" href="https://developer.mozilla.org/en-US/docs/Glossary/Smoke_Test$edit#Learn_more"><span>Edit</span></a></h2> +<h2 id="詳細情報Edit">詳細情報<a class="button section-edit only-icon" href="/ja/docs/Glossary/Smoke_Test$edit#Learn_more"><span>Edit</span></a></h2> <h3 id="基礎知識">基礎知識</h3> diff --git a/files/ja/glossary/csrf/index.html b/files/ja/glossary/csrf/index.html index 4df2db8778..228f072e27 100644 --- a/files/ja/glossary/csrf/index.html +++ b/files/ja/glossary/csrf/index.html @@ -22,5 +22,5 @@ translation_of: Glossary/CSRF <ul> <li>Wikipedia 上の記事: {{Interwiki("wikipedia", "クロスサイトリクエストフォージェリ")}}</li> <li><a href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)_Prevention_Cheat_Sheet">Prevention measures</a></li> - <li><a href="ja/docs/Web/Security/Information_Security_Basics">MDN セキュリティチュートリアル</a></li> + <li><a href="/ja/docs/Web/Security/Information_Security_Basics">MDN セキュリティチュートリアル</a></li> </ul> diff --git a/files/ja/glossary/css/index.html b/files/ja/glossary/css/index.html index 9ef669dcca..caed70801c 100644 --- a/files/ja/glossary/css/index.html +++ b/files/ja/glossary/css/index.html @@ -32,7 +32,7 @@ p { <h3 id="General_knowledge" name="General_knowledge">一般知識</h3> <ul> - <li><a href="https://developer.mozilla.org/ja/Learn/CSS">CSS を学ぶ</a></li> + <li><a href="/ja/Learn/CSS">CSS を学ぶ</a></li> <li>Wikipedia の {{interwiki("wikipedia", "CSS")}} 記事</li> </ul> diff --git a/files/ja/glossary/domain_sharding/index.html b/files/ja/glossary/domain_sharding/index.html index b7caa9a430..458df617ec 100644 --- a/files/ja/glossary/domain_sharding/index.html +++ b/files/ja/glossary/domain_sharding/index.html @@ -22,7 +22,7 @@ translation_of: Glossary/Domain_sharding <h2 id="詳細情報">詳細情報</h2> <ul> - <li><a href="/en-US/docs/Archive/Security/SSL_and_TLS">Transport Layer Security (TLS)</a></li> - <li><a href="/en-US/docs/Glossary/DNS">DNS</a></li> - <li><a href="/en-US/docs/Glossary/HTTP_2">HTTP/2</a></li> + <li><a href="/ja/docs/Archive/Security/SSL_and_TLS">Transport Layer Security (TLS)</a></li> + <li><a href="/ja/docs/Glossary/DNS">DNS</a></li> + <li><a href="/ja/docs/Glossary/HTTP_2">HTTP/2</a></li> </ul> diff --git a/files/ja/glossary/event/index.html b/files/ja/glossary/event/index.html index b3ccfedc5d..edd29086b4 100644 --- a/files/ja/glossary/event/index.html +++ b/files/ja/glossary/event/index.html @@ -6,14 +6,14 @@ tags: - Glossary translation_of: Glossary/event --- -<p>Events は <a href="https://developer.mozilla.org/ja/docs/Glossary/DOM">DOM</a> 要素によって生成される資産であり、Javascript コードから操作できます。</p> +<p>Events は <a href="/ja/docs/Glossary/DOM">DOM</a> 要素によって生成される資産であり、Javascript コードから操作できます。</p> <h2 id="Learn_more" name="Learn_more">関連項目</h2> <h3 id="Technical_reference" name="Technical_reference">技術リファレンス</h3> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/API/Event">MDN の Event 文書</a></li> + <li><a href="/ja/docs/Web/API/Event">MDN の Event 文書</a></li> </ul> <h3 id="General_knowledge" name="General_knowledge">一般知識</h3> diff --git a/files/ja/glossary/first_cpu_idle/index.html b/files/ja/glossary/first_cpu_idle/index.html index 2c81cf8f04..fe930005a4 100644 --- a/files/ja/glossary/first_cpu_idle/index.html +++ b/files/ja/glossary/first_cpu_idle/index.html @@ -3,4 +3,4 @@ title: First CPU idle slug: Glossary/First_CPU_idle translation_of: Glossary/First_CPU_idle --- -<p class="seoSummary"><strong>First CPU Idle</strong> は、ページが最小限のインタラクティブであるとき、またはウィンドウがユーザ入力を処理するのに十分に静かな時を測定します。これは非標準の Google Web パフォーマンスメトリックです。一般に、全ての表示されているUI要素がインタラクティブであるとは限らない場合に発生します。UIは平均して50ms以内にほとんどのユーザ入力に応答します。また、これは <a href="https://developer.mozilla.org/en-US/docs/Glossary/First_interactive">First interactive</a> とも呼ばれます。</p> +<p class="seoSummary"><strong>First CPU Idle</strong> は、ページが最小限のインタラクティブであるとき、またはウィンドウがユーザ入力を処理するのに十分に静かな時を測定します。これは非標準の Google Web パフォーマンスメトリックです。一般に、全ての表示されているUI要素がインタラクティブであるとは限らない場合に発生します。UIは平均して50ms以内にほとんどのユーザ入力に応答します。また、これは <a href="/ja/docs/Glossary/First_interactive">First interactive</a> とも呼ばれます。</p> diff --git a/files/ja/glossary/first_interactive/index.html b/files/ja/glossary/first_interactive/index.html index 77ff1e353e..44b59ef098 100644 --- a/files/ja/glossary/first_interactive/index.html +++ b/files/ja/glossary/first_interactive/index.html @@ -10,12 +10,12 @@ translation_of: Glossary/First_interactive --- <p>{{draft}}</p> -<p class="seoSummary"><strong>First Interactive</strong> は <a href="/en-US/docs/Glossary/First_CPU_idle">first CPU idle</a> とも呼ばれ、ユーザのウィンドウがユーザ入力を処理するのに十分に静かであるか、または最小限のインタラクティブを測定する非標準のWebパフォーマンスメトリックです。</p> +<p class="seoSummary"><strong>First Interactive</strong> は <a href="/ja/docs/Glossary/First_CPU_idle">first CPU idle</a> とも呼ばれ、ユーザのウィンドウがユーザ入力を処理するのに十分に静かであるか、または最小限のインタラクティブを測定する非標準のWebパフォーマンスメトリックです。</p> <p>最小限のインタラクティブとは、ページ上の全てではなく一部のUI要素が読み込まれ、インタラクティブであり、平均して妥当な時間内にユーザ入力に応答する場合と定義されます。</p> <h2 id="追加情報">追加情報</h2> -<p>First interactive は <a href="/en-US/docs/Glossary/Time_to_interactive">Time to Interactive</a> のバリエーションで、 <em>First Interactive</em> と <em>Consistently Interactive</em> に分かれています。これらのメトリックは Web Incubator Community Group によって提案されており、既に様々なツールで使用されています。このメトリックは <a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse 3.0</a> 以降、 <em>First CPU Idle</em> と呼ばれています。</p> +<p>First interactive は <a href="/ja/docs/Glossary/Time_to_interactive">Time to Interactive</a> のバリエーションで、 <em>First Interactive</em> と <em>Consistently Interactive</em> に分かれています。これらのメトリックは Web Incubator Community Group によって提案されており、既に様々なツールで使用されています。このメトリックは <a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse 3.0</a> 以降、 <em>First CPU Idle</em> と呼ばれています。</p> <h2 id="関連項目">関連項目</h2> diff --git a/files/ja/glossary/first_meaningful_paint/index.html b/files/ja/glossary/first_meaningful_paint/index.html index d4542414bf..bfd557afe6 100644 --- a/files/ja/glossary/first_meaningful_paint/index.html +++ b/files/ja/glossary/first_meaningful_paint/index.html @@ -12,5 +12,5 @@ translation_of: Glossary/first_meaningful_paint <h2 id="関連項目">関連項目:</h2> <ul> - <li><a href="/en-US/docs/Glossary/First_contentful_paint">First contentful paint</a></li> + <li><a href="/ja/docs/Glossary/First_contentful_paint">First contentful paint</a></li> </ul> diff --git a/files/ja/glossary/first_paint/index.html b/files/ja/glossary/first_paint/index.html index f63bec8fc1..7e83eccdd7 100644 --- a/files/ja/glossary/first_paint/index.html +++ b/files/ja/glossary/first_paint/index.html @@ -8,13 +8,13 @@ tags: - Web Performance translation_of: Glossary/First_paint --- -<p>FirstPaint は <a href="/en-US/docs/">Paint Timing API</a> の一部です。ナビゲーションからブラウザーが読み込んだ最初のピクセルを画面にレンダリングします。<br> +<p>FirstPaint は <a href="/ja/docs/">Paint Timing API</a> の一部です。ナビゲーションからブラウザーが読み込んだ最初のピクセルを画面にレンダリングします。<br> ナビゲーション前の画面と視覚的に異なるものをレンダリングすることで「それが起きているのか？」という質問に答えます。</p> <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Glossary/first_meaningful_paint">First meaningful paint</a></li> - <li><a href="/en-US/docs/Glossary/First_contentful_paint">First contentful paint</a></li> - <li><a href="/en-US/docs/">Paint Timing API</a></li> + <li><a href="/ja/docs/Glossary/first_meaningful_paint">First meaningful paint</a></li> + <li><a href="/ja/docs/Glossary/First_contentful_paint">First contentful paint</a></li> + <li><a href="/ja/docs/">Paint Timing API</a></li> </ul> diff --git a/files/ja/glossary/flex/index.html b/files/ja/glossary/flex/index.html index 43dc77f29b..2cc4824a55 100644 --- a/files/ja/glossary/flex/index.html +++ b/files/ja/glossary/flex/index.html @@ -13,7 +13,7 @@ translation_of: Glossary/Flex <p><code>flex</code> プロパティは flexbox プロパティを縮めて表したプロパティです。<code>flex-grow</code> や <code>flex-shrink</code>、<code>flex-basis</code> 等があります。</p> -<p><code><flex></code> については、CSS Grid Layout内の <a href="https://developer.mozilla.org/ja/docs/Web/CSS/flex_value">flexible length</a> にて確認できます。</p> +<p><code><flex></code> については、CSS Grid Layout内の <a href="/ja/docs/Web/CSS/flex_value">flexible length</a> にて確認できます。</p> <h2 id="Learn_more" name="Learn_more">関連項目</h2> diff --git a/files/ja/glossary/flex_container/index.html b/files/ja/glossary/flex_container/index.html index 5d7fd93623..1d3abebed0 100644 --- a/files/ja/glossary/flex_container/index.html +++ b/files/ja/glossary/flex_container/index.html @@ -31,7 +31,7 @@ translation_of: Glossary/Flex_Container <h3 id="参考文献">参考文献</h3> <ul> - <li>CSS Flexbox Guide: <em><a href="/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> - <li>CSS Flexbox Guide: <em><a href="/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></em></li> - <li>CSS Flexbox Guide: <em><a href="/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a></em></li> + <li>CSS Flexbox Guide: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> + <li>CSS Flexbox Guide: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></em></li> + <li>CSS Flexbox Guide: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a></em></li> </ul> diff --git a/files/ja/glossary/flex_item/index.html b/files/ja/glossary/flex_item/index.html index 7f2bd9dccd..934e7c6875 100644 --- a/files/ja/glossary/flex_item/index.html +++ b/files/ja/glossary/flex_item/index.html @@ -29,7 +29,7 @@ translation_of: Glossary/Flex_Item <h3 id="参考文献">参考文献</h3> <ul> - <li>CSS Flexbox Guide: <em><a href="/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> - <li>CSS Flexbox Guide: <em><a href="/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></em></li> - <li>CSS Flexbox Guide: <em><a href="/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li> + <li>CSS Flexbox Guide: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> + <li>CSS Flexbox Guide: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></em></li> + <li>CSS Flexbox Guide: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li> </ul> diff --git a/files/ja/glossary/gij/index.html b/files/ja/glossary/gij/index.html index b18f32f37b..6e6a87a06c 100644 --- a/files/ja/glossary/gij/index.html +++ b/files/ja/glossary/gij/index.html @@ -9,4 +9,4 @@ tags: - tests translation_of: Glossary/GIJ --- -<p>Gaia 結合テスト (<em>G</em>aia <em>I</em>ntegration <em>T</em>esting)。Marionette と JavaScript に基づいています。詳しくは、<a href="/docs/Mozilla/QA/Automated_testing">GIJ</a> の記事をご覧ください。</p> +<p>Gaia 結合テスト (<em>G</em>aia <em>I</em>ntegration <em>T</em>esting)。Marionette と JavaScript に基づいています。詳しくは、<a href="/ja/docs/Mozilla/QA/Automated_testing">GIJ</a> の記事をご覧ください。</p> diff --git a/files/ja/glossary/global_scope/index.html b/files/ja/glossary/global_scope/index.html index 11507e5080..4cab70a724 100644 --- a/files/ja/glossary/global_scope/index.html +++ b/files/ja/glossary/global_scope/index.html @@ -16,7 +16,7 @@ translation_of: Glossary/Global_scope <h3 id="Learn_about_it" name="Learn_about_it">これについて学習する</h3> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope">JavaScript の変数スコープ入門</a></li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope">JavaScript の変数スコープ入門</a></li> <li>Wikipedia の {{interwiki("wikipedia", "スコープ")}}</li> </ul> diff --git a/files/ja/glossary/grid_areas/index.html b/files/ja/glossary/grid_areas/index.html index 90913c78a8..f8407cd0ab 100644 --- a/files/ja/glossary/grid_areas/index.html +++ b/files/ja/glossary/grid_areas/index.html @@ -5,7 +5,7 @@ tags: - CSS Grids translation_of: Glossary/Grid_Areas --- -<p><strong>グリッドエリア</strong>はグリッド上で一つ以上の {{glossary("grid cell", "グリッドセル")}} からなる長方形の領域です。グリッドエリアは <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">ライン指定による配置</a> や <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">名前付きグリッドエリア</a>でエリアを定義すると作成されます。</p> +<p><strong>グリッドエリア</strong>はグリッド上で一つ以上の {{glossary("grid cell", "グリッドセル")}} からなる長方形の領域です。グリッドエリアは <a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">ライン指定による配置</a> や <a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">名前付きグリッドエリア</a>でエリアを定義すると作成されます。</p> <p><img alt="Image showing a highlighted grid area" src="https://mdn.mozillademos.org/files/14771/1_Grid_Area.png" style="height: 253px; width: 380px;"></p> @@ -74,7 +74,7 @@ translation_of: Glossary/Grid_Areas <h3 id="さらに詳しい説明">さらに詳しい説明</h3> <ul> - <li>CSS グリッドレイアウトガイド: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本コンセプト</a></em></li> - <li>CSS グリッドレイアウトガイド: <em><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">グリッドテンプレートエリア</a></em></li> + <li>CSS グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本コンセプト</a></em></li> + <li>CSS グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">グリッドテンプレートエリア</a></em></li> <li><a href="https://drafts.csswg.org/css-grid/#grid-area-concept">CSS グリッドレイアウト仕様に於けるグリッドエリアの定義</a></li> </ul> diff --git a/files/ja/glossary/grid_axis/index.html b/files/ja/glossary/grid_axis/index.html index ba28a9d041..c7ef53753b 100644 --- a/files/ja/glossary/grid_axis/index.html +++ b/files/ja/glossary/grid_axis/index.html @@ -8,7 +8,7 @@ translation_of: Glossary/Grid_Axis --- <p>CSS グリッドレイアウトはコンテンツを<strong>行</strong>と<strong>列</strong>でレイアウトできるようにする 2 次元レイアウトです。従って全てのグリッドには、<strong>ブロックもしくは列の軸</strong>と、<strong>インラインもしくは行の列</strong>という、二つの軸があります。</p> -<p>各アイテムはこれら 2 つの軸に沿って、<a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box Alignment 仕様</a>で定義されるプロパティを使って配置されます。</p> +<p>各アイテムはこれら 2 つの軸に沿って、<a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box Alignment 仕様</a>で定義されるプロパティを使って配置されます。</p> <p>CSS ではブロックもしくは行の軸がテキストのブロックをレイアウトするのに使用する軸となります。右から左、上から下に書く言語で 2 つの段落があるばあい、ブロック軸に沿って一方が他方の下にレイアウトされます。</p> @@ -18,14 +18,14 @@ translation_of: Glossary/Grid_Axis <p><img alt="Diagram showing the inline axis in CSS Grid Layout." src="https://mdn.mozillademos.org/files/14773/7_Inline_Axis.png" style="height: 306px; width: 940px;"></p> -<p>これらの軸の物理的な方向は文書の<a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">ライティングモード</a>によって変更可能です。</p> +<p>これらの軸の物理的な方向は文書の<a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">ライティングモード</a>によって変更可能です。</p> <h2 id="より詳しく">より詳しく</h2> <h3 id="より詳しい説明">より詳しい説明</h3> <ul> - <li>CSS グリッドレイアウトガイド: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本コンセプト</a></em></li> - <li>CSS グリッドレイアウトガイド: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">グリッドレイアウトに於けるボックス配置</a></em></li> - <li>CSS グリッドレイアウトガイド: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">グリッドや論理値とライティングモード</a></em></li> + <li>CSS グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本コンセプト</a></em></li> + <li>CSS グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">グリッドレイアウトに於けるボックス配置</a></em></li> + <li>CSS グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">グリッドや論理値とライティングモード</a></em></li> </ul> diff --git a/files/ja/glossary/grid_cell/index.html b/files/ja/glossary/grid_cell/index.html index f3745bf748..4e417f9dc9 100644 --- a/files/ja/glossary/grid_cell/index.html +++ b/files/ja/glossary/grid_cell/index.html @@ -5,7 +5,7 @@ tags: - CSS Grids translation_of: Glossary/Grid_Cell --- -<p><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>に於ける CSS グリッドの最小単位が<strong>グリッドセル</strong>です。四つの交差する {{glossary("grid lines", "グリッドライン")}} に囲まれた領域のことで、表に於けるセルと考え方はほぼ同じです。</p> +<p><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>に於ける CSS グリッドの最小単位が<strong>グリッドセル</strong>です。四つの交差する {{glossary("grid lines", "グリッドライン")}} に囲まれた領域のことで、表に於けるセルと考え方はほぼ同じです。</p> <p><img alt="Diagram showing an individual cell on the grid." src="https://mdn.mozillademos.org/files/14767/1_Grid_Cell.png" style="height: 221px; width: 332px;"></p> @@ -66,6 +66,6 @@ translation_of: Glossary/Grid_Cell <h3 id="さらに詳しい説明">さらに詳しい説明</h3> <ul> - <li>CSS グリッドレイアウトガイド: <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本コンセプト</a></li> + <li>CSS グリッドレイアウトガイド: <a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本コンセプト</a></li> <li><a href="https://drafts.csswg.org/css-grid/#grid-track-concept">CSS グリッドレイアウト仕様に於けるグリッドセルの定義</a></li> </ul> diff --git a/files/ja/glossary/grid_lines/index.html b/files/ja/glossary/grid_lines/index.html index 988690f084..0db6e8dea0 100644 --- a/files/ja/glossary/grid_lines/index.html +++ b/files/ja/glossary/grid_lines/index.html @@ -5,7 +5,7 @@ tags: - CSS Grids translation_of: Glossary/Grid_Lines --- -<p><strong>Grid ライン</strong>は <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>を用いて明示的グリッドとして {{glossary("Grid tracks", "トラック")}} を定義すると作成されます。次の例は 3 列のトラックと 2 行のトラックを含むグリッドとなります。この例では 4 つの列ラインと 3 つの行ラインが作られます。</p> +<p><strong>Grid ライン</strong>は <a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>を用いて明示的グリッドとして {{glossary("Grid tracks", "トラック")}} を定義すると作成されます。次の例は 3 列のトラックと 2 行のトラックを含むグリッドとなります。この例では 4 つの列ラインと 3 つの行ラインが作られます。</p> <div id="example_1"> <div class="hidden"> @@ -48,7 +48,7 @@ translation_of: Glossary/Grid_Lines <p>{{ EmbedLiveSample('example_1', '500', '250') }}</p> -<p>ラインはライン番号で指定できます。英語や日本語のように左から右方向に、列ライン 1 がグリッドの左端、行ライン 1 が上端となります。ライン番号はドキュメントの <a href="/en-US/docs/Web/CSS/CSS_Writing_Modes">ライティングモード</a> を考慮するため、右から左へと記述する言語に於いては例えば列ライン 1 はグリッドの右端となります。下の画像では左から右の言語でのグリッドにおけるライン番号を図示しています。</p> +<p>ラインはライン番号で指定できます。英語や日本語のように左から右方向に、列ライン 1 がグリッドの左端、行ライン 1 が上端となります。ライン番号はドキュメントの <a href="/ja/docs/Web/CSS/CSS_Writing_Modes">ライティングモード</a> を考慮するため、右から左へと記述する言語に於いては例えば列ライン 1 はグリッドの右端となります。下の画像では左から右の言語でのグリッドにおけるライン番号を図示しています。</p> <p><img alt="Diagram showing the grid with lines numbered." src="https://mdn.mozillademos.org/files/14763/1_diagram_numbered_grid_lines.png" style="height: 456px; width: 764px;"></p> </div> @@ -169,9 +169,9 @@ translation_of: Glossary/Grid_Lines <h3 id="より詳しい説明">より詳しい説明</h3> <ul> - <li>CSS グリッドレイアウトガイド: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本コンセプト</a></em></li> - <li>CSS グリッドレイアウトガイド: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">ライン指定による CSS グリッド位置指定</a></em></li> - <li>CSS グリッドレイアウトガイド: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">名前付きグリッドラインによるレイアウト</a></em></li> - <li>CSS グリッドレイアウトガイド: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS グリッド、論理値とライティングモード</a></em></li> + <li>CSS グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本コンセプト</a></em></li> + <li>CSS グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">ライン指定による CSS グリッド位置指定</a></em></li> + <li>CSS グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">名前付きグリッドラインによるレイアウト</a></em></li> + <li>CSS グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS グリッド、論理値とライティングモード</a></em></li> <li><a href="https://drafts.csswg.org/css-grid/#grid-line-concept">CSS グリッドレイアウト仕様におけるグリッドラインの定義</a></li> </ul> diff --git a/files/ja/glossary/grid_rows/index.html b/files/ja/glossary/grid_rows/index.html index eaa112d31a..e7234ff136 100644 --- a/files/ja/glossary/grid_rows/index.html +++ b/files/ja/glossary/grid_rows/index.html @@ -5,11 +5,11 @@ tags: - CSS Grids translation_of: Glossary/Grid_Rows --- -<p><strong>グリッド行</strong>とは <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>における水平トラックであり、二つの水平方向のグリッドラインに挟まれた領域のことです。グリッド行は {{cssxref("grid-template-rows")}} プロパティまたは短縮記法の {{cssxref("grid")}} や {{cssxref("grid-template")}} プロパティで定義されます。</p> +<p><strong>グリッド行</strong>とは <a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>における水平トラックであり、二つの水平方向のグリッドラインに挟まれた領域のことです。グリッド行は {{cssxref("grid-template-rows")}} プロパティまたは短縮記法の {{cssxref("grid")}} や {{cssxref("grid-template")}} プロパティで定義されます。</p> <p>加えて、明示的グリッド <em>(explicit grid)</em> で作られる行の外にアイテムが配置される場合は、暗黙的グリッド <em>(implicit grid) </em>にもグリッド行が作られます。これらの行はデフォルトでは自動的に大きさが決定されますが、{{cssxref("grid-auto-rows")}} プロパティでサイズ指定することもできます。</p> -<p><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>の中で位置調整 (alignment) をする場合、行が並ぶ軸をインライン軸もしくは行軸と呼びます。</p> +<p><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>の中で位置調整 (alignment) をする場合、行が並ぶ軸をインライン軸もしくは行軸と呼びます。</p> <h2 id="より詳しく">より詳しく</h2> @@ -25,5 +25,5 @@ translation_of: Glossary/Grid_Rows <h3 id="より詳しい説明">より詳しい説明</h3> <ul> - <li>CSS グリッドレイアウトガイド: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本コンセプト</a></em></li> + <li>CSS グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本コンセプト</a></em></li> </ul> diff --git a/files/ja/glossary/gutters/index.html b/files/ja/glossary/gutters/index.html index 538bcd8347..b68b0b4ad8 100644 --- a/files/ja/glossary/gutters/index.html +++ b/files/ja/glossary/gutters/index.html @@ -6,7 +6,7 @@ tags: - CSS グリッドレイアウト translation_of: Glossary/Gutters --- -<p><strong>ガター</strong> もしくはアレーはコンテンツトラック間のスペースです。<a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>で {{cssxref("grid-column-gap")}}、{{cssxref("grid-row-gap")}} あるいは {{cssxref("grid-gap")}} プロパティを使うとガターが作成されます。</p> +<p><strong>ガター</strong> もしくはアレーはコンテンツトラック間のスペースです。<a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>で {{cssxref("grid-column-gap")}}、{{cssxref("grid-row-gap")}} あるいは {{cssxref("grid-gap")}} プロパティを使うとガターが作成されます。</p> <p>下の例では 3 列 2 行のトラックを持つグリッドを、列トラックの間には 20 ピクセルの、列トラックの間には 20 ピクセルの隙間を空けています。</p> @@ -53,7 +53,7 @@ translation_of: Glossary/Gutters <p>グリッドのサイズ決定においては、ガターによる隙間は通常のグリッドトラックのように扱われますが、隙間の中には何も配置できません。隙間の分だけその場所のグリッドラインのサイズが増えるように振る舞うため、そのラインの後のグリッドアイテムは隙間の後から始まるように配置されます。</p> -<p>トラックに余白を作るのは grid-gap プロパティだけではありません。マージン、パディング、 <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box Alignment</a> のスペース分配プロパティなどいずれも視覚上の隙間を作ります。したがって、これらの方法で追加の余白は一切作らないデザインをしていない限り、grid-gap プロパティと「ガターサイズ」が一致するようには見えません。</p> +<p>トラックに余白を作るのは grid-gap プロパティだけではありません。マージン、パディング、 <a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box Alignment</a> のスペース分配プロパティなどいずれも視覚上の隙間を作ります。したがって、これらの方法で追加の余白は一切作らないデザインをしていない限り、grid-gap プロパティと「ガターサイズ」が一致するようには見えません。</p> <h2 id="より詳しく">より詳しく</h2> @@ -68,6 +68,6 @@ translation_of: Glossary/Gutters <h3 id="より詳しい説明">より詳しい説明</h3> <ul> - <li>CSS グリッドレイアウトガイド: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本コンセプト</a></em></li> + <li>CSS グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本コンセプト</a></em></li> <li><a href="https://drafts.csswg.org/css-grid/#gutters">CSS グリッドレイアウト仕様におけるガターの定義</a></li> </ul> diff --git a/files/ja/glossary/isp/index.html b/files/ja/glossary/isp/index.html index 50aa47d83c..88fa20a331 100644 --- a/files/ja/glossary/isp/index.html +++ b/files/ja/glossary/isp/index.html @@ -16,6 +16,6 @@ translation_of: Glossary/ISP <h3 id="一般的な知識">一般的な知識</h3> <ul> - <li><a href="https://developer.mozilla.org/Learn/How_the_Internet_works">どのようにしてインターネットが動いているのか</a> (初心者のための説明)</li> + <li><a href="/ja/Learn/How_the_Internet_works">どのようにしてインターネットが動いているのか</a> (初心者のための説明)</li> <li>Wikipedia の {{interwiki("wikipedia", "Internet_Service_Provider", "Internet service provider")}}</li> </ul> diff --git a/files/ja/glossary/long_task/index.html b/files/ja/glossary/long_task/index.html index 249524229c..a74e26ba72 100644 --- a/files/ja/glossary/long_task/index.html +++ b/files/ja/glossary/long_task/index.html @@ -8,10 +8,10 @@ tags: - Web Performance translation_of: Glossary/Long_task --- -<p><span class="seoSummary"><strong>long task</strong> とは、完了するまでに50ミリ秒以上かかるタスクです。</span> <a href="/en-US/docs/Glossary/Main_thread">main UI thread</a> が50ミリ秒以上ビジーである中断のない期間です。一般的な例では、長時間実行されるイベントハンドラ、高価な<a href="/en-US/docs/Glossary/Reflow">リフロー</a>、その他の再レンダリングが含まれ、50ミリ秒を超えるイベントループの異なるターン間でブラウザーが実行する作業が含まれます。</p> +<p><span class="seoSummary"><strong>long task</strong> とは、完了するまでに50ミリ秒以上かかるタスクです。</span> <a href="/ja/docs/Glossary/Main_thread">main UI thread</a> が50ミリ秒以上ビジーである中断のない期間です。一般的な例では、長時間実行されるイベントハンドラ、高価な<a href="/ja/docs/Glossary/Reflow">リフロー</a>、その他の再レンダリングが含まれ、50ミリ秒を超えるイベントループの異なるターン間でブラウザーが実行する作業が含まれます。</p> <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/Long_Tasks_API">Long task API</a></li> + <li><a href="/ja/docs/Web/API/Long_Tasks_API">Long task API</a></li> </ul> diff --git a/files/ja/glossary/main_axis/index.html b/files/ja/glossary/main_axis/index.html index ae507ad691..e948fcbfe7 100644 --- a/files/ja/glossary/main_axis/index.html +++ b/files/ja/glossary/main_axis/index.html @@ -46,7 +46,7 @@ translation_of: Glossary/Main_Axis <h3 id="Further_reading" name="Further_reading">参考文献</h3> <ul> - <li>CSS Flexbox Guide: <em><a href="/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> - <li>CSS Flexbox Guide: <em><a href="/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></em></li> - <li>CSS Flexbox Guide: <em><a href="/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li> + <li>CSS Flexbox Guide: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> + <li>CSS Flexbox Guide: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></em></li> + <li>CSS Flexbox Guide: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li> </ul> diff --git a/files/ja/glossary/media/css/index.html b/files/ja/glossary/media/css/index.html index 9e7900f23c..499283e9c0 100644 --- a/files/ja/glossary/media/css/index.html +++ b/files/ja/glossary/media/css/index.html @@ -26,7 +26,7 @@ translation_of: Glossary/Media/CSS <dt><a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリー</a></dt> <dd>メディアクエリの中括弧内で指定された CSS スタイルを適用する条件となる特性または引数のセットを定義します。例えば、768ピクセル以下の端末のみに特定の CSS スタイルを適用する、などです。</dd> <dt>{{cssxref("@media")}} <a href="/ja/docs/Web/CSS/At-rule">アット規則</a></dt> - <dd>メディアクエリの結果に基づいて、<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">スタイルシート</a>の一部を条件付きで適用します。</dd> + <dd>メディアクエリの結果に基づいて、<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">スタイルシート</a>の一部を条件付きで適用します。</dd> <dt>{{domxref("Window.matchMedia()")}}</dt> <dd>表示装置に対するメディアクエリをテストします。</dd> </dl> diff --git a/files/ja/glossary/navigation_directive/index.html b/files/ja/glossary/navigation_directive/index.html index 12f4755214..bc2886202b 100644 --- a/files/ja/glossary/navigation_directive/index.html +++ b/files/ja/glossary/navigation_directive/index.html @@ -25,10 +25,10 @@ translation_of: Glossary/Navigation_directive <li>{{Glossary("Fetch directive","フェッチディレクティブ")}}</li> <li>{{Glossary("Document directive","文書ディレクティブ")}}</li> <li>{{Glossary("Reporting directive", "報告ディレクティブ")}}</li> - <li><code><a href="/docs/Web/HTTP/Headers/Content-Security-Policy/block-all-mixed-content">block-all-mixed-content</a></code></li> - <li><code><a href="/docs/Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests">upgrade-insecure-requests</a></code></li> - <li><code><a href="/docs/Web/HTTP/Headers/Content-Security-Policy/require-sri-for">require-sri-for</a></code></li> - <li><code><a href="/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types">trusted-types</a></code></li> + <li><code><a href="/ja/docs/Web/HTTP/Headers/Content-Security-Policy/block-all-mixed-content">block-all-mixed-content</a></code></li> + <li><code><a href="/ja/docs/Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests">upgrade-insecure-requests</a></code></li> + <li><code><a href="/ja/docs/Web/HTTP/Headers/Content-Security-Policy/require-sri-for">require-sri-for</a></code></li> + <li><code><a href="/ja/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types">trusted-types</a></code></li> </ul> </li> <li>{{HTTPHeader("Content-Security-Policy")}}</li> diff --git a/files/ja/glossary/oop/index.html b/files/ja/glossary/oop/index.html index a105c93312..9a019b8f5c 100644 --- a/files/ja/glossary/oop/index.html +++ b/files/ja/glossary/oop/index.html @@ -9,7 +9,7 @@ translation_of: Glossary/OOP --- <p><strong>OOP </strong>(Object-Oriented Programming、オブジェクト指向プログラミングの略) はデータを <strong>{{glossary("object","オブジェクト")}}</strong> 内にカプセル化して、その構成部品ではなくてオブジェクト自体が操作される、プログラミングアプローチです。</p> -<p>{{glossary("JavaScript")}} はとてもオブジェクト指向です。これは <strong>プロトタイプ</strong>ベースのモデル (<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">クラスベースの反対</a>) に従っています。</p> +<p>{{glossary("JavaScript")}} はとてもオブジェクト指向です。これは <strong>プロトタイプ</strong>ベースのモデル (<a href="/ja/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">クラスベースの反対</a>) に従っています。</p> <h2 id="Learn_more" name="Learn_more">詳細情報</h2> @@ -17,5 +17,5 @@ translation_of: Glossary/OOP <ul> <li>Wikipedia の {{Interwiki("wikipedia", "オブジェクト指向プログラミング")}}</li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">JavaScript によるオブジェクト指向入門</a></li> + <li><a href="/ja/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">JavaScript によるオブジェクト指向入門</a></li> </ul> diff --git a/files/ja/glossary/operator/index.html b/files/ja/glossary/operator/index.html index 2961f57766..9f65ba6615 100644 --- a/files/ja/glossary/operator/index.html +++ b/files/ja/glossary/operator/index.html @@ -20,5 +20,5 @@ translation_of: Glossary/Operator <h3 id="Technical_reference" name="Technical_reference">技術リファレンス</h3> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators">JavaScript の演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators">JavaScript の演算子</a></li> </ul> diff --git a/files/ja/glossary/ota/index.html b/files/ja/glossary/ota/index.html index 49c502e42f..04dbb6f034 100644 --- a/files/ja/glossary/ota/index.html +++ b/files/ja/glossary/ota/index.html @@ -18,5 +18,5 @@ translation_of: Glossary/OTA <ul> <li>Wikipedia 上の {{Interwiki("wikipedia", "Over-the-air programming")}}</li> - <li><a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS/Firefox_OS_update_packages">Creating and applying Firefox OS update packages</a></li> + <li><a href="/ja/Firefox_OS/Building_and_installing_Firefox_OS/Firefox_OS_update_packages">Creating and applying Firefox OS update packages</a></li> </ul> diff --git a/files/ja/glossary/page_load_time/index.html b/files/ja/glossary/page_load_time/index.html index 8b472aef19..d2befb60bc 100644 --- a/files/ja/glossary/page_load_time/index.html +++ b/files/ja/glossary/page_load_time/index.html @@ -9,18 +9,18 @@ tags: - page load time translation_of: Glossary/Page_load_time --- -<p><span class="seoSummary"><strong>ページ読み込み時間</strong>とはページの読み込みにかかる時間のことであり、<a href="/en-US/docs/Web/API/PerformanceTiming/navigationStart">ナビゲーション開始時</a>から<a href="/en-US/docs/Web/API/PerformanceTiming/loadEventStart">ロードイベント開始時</a>までをもって測定されます。</span></p> +<p><span class="seoSummary"><strong>ページ読み込み時間</strong>とはページの読み込みにかかる時間のことであり、<a href="/ja/docs/Web/API/PerformanceTiming/navigationStart">ナビゲーション開始時</a>から<a href="/ja/docs/Web/API/PerformanceTiming/loadEventStart">ロードイベント開始時</a>までをもって測定されます。</span></p> <pre class="brush: js notranslate">let time = performance.timing; let pageloadtime = time.loadEventStart - time.navigationStart;</pre> -<p>ページ読み込み時間は完璧なウェブパフォーマンス測定基準に聞こえますが、そうではありません。読み込み時間はユーザーのデバイス性能やネットワーク状態、そして程度は低いもののサーバーからの距離によって大きく変化します。ページ読み込み時間が測定される開発環境は最適化された環境である場合が多くユーザーの実態体験を反映しません。さらにウェブパフォーマンスはロードイベント発生時間だけではありません。それは<a href="/docs/Glossary/Perceived_performance">体感速度</a>、応答性、<a href="/en-US/docs/Glossary/Jank">ジャンク（Jank)</a>、そしてジッター(Jitter)でもあります。</p> +<p>ページ読み込み時間は完璧なウェブパフォーマンス測定基準に聞こえますが、そうではありません。読み込み時間はユーザーのデバイス性能やネットワーク状態、そして程度は低いもののサーバーからの距離によって大きく変化します。ページ読み込み時間が測定される開発環境は最適化された環境である場合が多くユーザーの実態体験を反映しません。さらにウェブパフォーマンスはロードイベント発生時間だけではありません。それは<a href="/ja/docs/Glossary/Perceived_performance">体感速度</a>、応答性、<a href="/ja/docs/Glossary/Jank">ジャンク（Jank)</a>、そしてジッター(Jitter)でもあります。</p> <h2 id="See_also">See also</h2> <ul> - <li><a href="/en-US/docs/Web/Performance/Navigation_and_resource_timings">Navigation and resource timing</a></li> + <li><a href="/ja/docs/Web/Performance/Navigation_and_resource_timings">Navigation and resource timing</a></li> <li>{{domxref("PerformanceNavigationTiming")}}</li> <li>{{domxref("PerformanceResourceTiming")}},</li> </ul> diff --git a/files/ja/glossary/privileged/index.html b/files/ja/glossary/privileged/index.html index 44b72d97ea..1a52496f5e 100644 --- a/files/ja/glossary/privileged/index.html +++ b/files/ja/glossary/privileged/index.html @@ -19,5 +19,5 @@ translation_of: Glossary/Privileged <h3 id="これについて学ぶ">これについて学ぶ</h3> <ul> - <li><a href="/en-US/Learn/tutorial/Information_Security_Basics">Information Security Tutorial</a></li> + <li><a href="/ja/Learn/tutorial/Information_Security_Basics">Information Security Tutorial</a></li> </ul> diff --git a/files/ja/glossary/property/css/index.html b/files/ja/glossary/property/css/index.html index 11b53f5265..5997d76428 100644 --- a/files/ja/glossary/property/css/index.html +++ b/files/ja/glossary/property/css/index.html @@ -27,12 +27,12 @@ div { <h3 id="General_knowledge" name="General_knowledge">一般知識</h3> <ul> - <li><a href="https://developer.mozilla.org/ja/Learn/CSS">Learn CSS</a></li> + <li><a href="/ja/Learn/CSS">Learn CSS</a></li> </ul> <h3 id="Technical_reference" name="Technical_reference">技術リファレンス</h3> <ul> - <li><a href="/docs/Web/CSS/Reference">MDN 上の CSS リファレンス</a></li> + <li><a href="/ja/docs/Web/CSS/Reference">MDN 上の CSS リファレンス</a></li> <li><a href="http://www.w3.org/Style/CSS/current-work" rel="external">CSS ワーキンググループの現在の成果</a></li> </ul> diff --git a/files/ja/glossary/property/javascript/index.html b/files/ja/glossary/property/javascript/index.html index 20d306e1ee..f9a5d50585 100644 --- a/files/ja/glossary/property/javascript/index.html +++ b/files/ja/glossary/property/javascript/index.html @@ -23,5 +23,5 @@ translation_of: Glossary/property/JavaScript <ul> <li>Wikipedia 上の記事「{{InterWiki('wikipedia','プロパティ')}}」</li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">オブジェクト志向 JavaScript 入門</a></li> + <li><a href="/ja/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">オブジェクト志向 JavaScript 入門</a></li> </ul> diff --git a/files/ja/glossary/quality_values/index.html b/files/ja/glossary/quality_values/index.html index 7ae570dc07..0f0fe86149 100644 --- a/files/ja/glossary/quality_values/index.html +++ b/files/ja/glossary/quality_values/index.html @@ -76,5 +76,5 @@ translation_of: Glossary/Quality_values <h2 id="詳細情報">詳細情報</h2> <ul> - <li><a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a> using q-values in their syntax: {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept-Language")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("TE")}}.</li> + <li><a href="/ja/docs/Web/HTTP/Headers">HTTP headers</a> using q-values in their syntax: {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept-Language")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("TE")}}.</li> </ul> diff --git a/files/ja/glossary/regular_expression/index.html b/files/ja/glossary/regular_expression/index.html index 36b2481953..95a78c7d10 100644 --- a/files/ja/glossary/regular_expression/index.html +++ b/files/ja/glossary/regular_expression/index.html @@ -24,5 +24,5 @@ translation_of: Glossary/Regular_expression <h3 id="Technical_reference" name="Technical_reference">技術リファレンス</h3> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions">JavaScript で正規表現を書く</a></li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">JavaScript で正規表現を書く</a></li> </ul> diff --git a/files/ja/glossary/responsive_web_design/index.html b/files/ja/glossary/responsive_web_design/index.html index 9ba683cbb1..b64b6a6c3f 100644 --- a/files/ja/glossary/responsive_web_design/index.html +++ b/files/ja/glossary/responsive_web_design/index.html @@ -15,7 +15,7 @@ translation_of: Glossary/Responsive_web_design <h3 id="General_knowledge" name="General_knowledge">一般知識</h3> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web_Development/Responsive_Web_design">要約とリソース</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web_Development/Mobile/Responsive_design">レスポンシブにするメリットとデメリット</a></li> + <li><a href="/ja/docs/Web_Development/Responsive_Web_design">要約とリソース</a></li> + <li><a href="/ja/docs/Web_Development/Mobile/Responsive_design">レスポンシブにするメリットとデメリット</a></li> <li><a href="http://msdn.microsoft.com/en-us/magazine/hh653584.aspx">レスポンシブウェブデザイン(英MSDN)</a></li> </ul> diff --git a/files/ja/glossary/rgb/index.html b/files/ja/glossary/rgb/index.html index 4105324e20..0d0a0d8bbb 100644 --- a/files/ja/glossary/rgb/index.html +++ b/files/ja/glossary/rgb/index.html @@ -18,5 +18,5 @@ translation_of: Glossary/RGB <h3 id="Learn_about_it">Learn about it</h3> <ul> - <li><a href="/en-US/docs/Web/CSS/color_value">CSS data type: <color></a></li> + <li><a href="/ja/docs/Web/CSS/color_value">CSS data type: <color></a></li> </ul> diff --git a/files/ja/glossary/slug/index.html b/files/ja/glossary/slug/index.html index 9c90678163..0ba88df14d 100644 --- a/files/ja/glossary/slug/index.html +++ b/files/ja/glossary/slug/index.html @@ -20,5 +20,5 @@ original_slug: Glossary/スラグ <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/docs/MDN/Contribute/Guidelines/Writing_style_guide#タイトルとスラグの決め方">タイトルとスラグの決め方</a></li> + <li><a href="/ja/docs/MDN/Contribute/Guidelines/Writing_style_guide#タイトルとスラグの決め方">タイトルとスラグの決め方</a></li> </ul> diff --git a/files/ja/glossary/specification/index.html b/files/ja/glossary/specification/index.html index bf621c5a2f..e45728c490 100644 --- a/files/ja/glossary/specification/index.html +++ b/files/ja/glossary/specification/index.html @@ -20,5 +20,5 @@ translation_of: Glossary/Specification <h3 id="技術リファレンス">技術リファレンス</h3> <ul> - <li><a href="/en-US/docs/Web/Specification_list">Open Web platform specifications</a></li> + <li><a href="/ja/docs/Web/Specification_list">Open Web platform specifications</a></li> </ul> diff --git a/files/ja/glossary/sri/index.html b/files/ja/glossary/sri/index.html index 5614abfa6e..67eff43124 100644 --- a/files/ja/glossary/sri/index.html +++ b/files/ja/glossary/sri/index.html @@ -12,7 +12,7 @@ translation_of: Glossary/SRI <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a></li> + <li><a href="/ja/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a></li> <li>{{HTTPHeader("Content-Security-Policy")}}: {{CSP("require-sri-for")}}</li> </ul> </div> diff --git a/files/ja/glossary/statement/index.html b/files/ja/glossary/statement/index.html index 248dcb73f3..2cd2c1003e 100644 --- a/files/ja/glossary/statement/index.html +++ b/files/ja/glossary/statement/index.html @@ -20,7 +20,7 @@ translation_of: Glossary/Statement <h3 id="Technical_reference" name="Technical_reference">技術リファレンス</h3> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements">JavaScript の文と宣言</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Statements">JavaScript の文と宣言</a></li> </ul> <ul> diff --git a/files/ja/glossary/svn/index.html b/files/ja/glossary/svn/index.html index c4bcc64bc3..7b870123a6 100644 --- a/files/ja/glossary/svn/index.html +++ b/files/ja/glossary/svn/index.html @@ -17,5 +17,5 @@ translation_of: Glossary/SVN <h3 id="技術リファレンス">技術リファレンス</h3> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Mozilla/Localization/SVN_guide_for_localizers">MDN翻訳者向けSVNガイド</a></li> + <li><a href="/ja/docs/Mozilla/Localization/SVN_guide_for_localizers">MDN翻訳者向けSVNガイド</a></li> </ul> diff --git a/files/ja/glossary/tcp_handshake/index.html b/files/ja/glossary/tcp_handshake/index.html index 0997d2e1de..cf4615e523 100644 --- a/files/ja/glossary/tcp_handshake/index.html +++ b/files/ja/glossary/tcp_handshake/index.html @@ -16,7 +16,7 @@ translation_of: Glossary/TCP_handshake <p>ホスト（一般的にはブラウザー）は、TCP SYNchronize パケットをサーバーに送信します。サーバーは SYN を受信し、SYNchronize-ACKnowledgement を返送します。ホストはサーバーの SYN-ACK を受信し、ACKnowledge を送信します。サーバーは ACK を受信し、TCP ソケット接続が確立されます。</p> -<p>このハンドシェイクステップは、安全な接続を作成する際に、{{glossary('DNS', 'DNS ルックアップ')}}の後、および{{glossary('TLS')}}<a href="https://developer.mozilla.org/ja/docs/Glossary/TLS"> </a>ハンドシェイクの前に実行されます。接続は 4度目のハンドシェイクを通じて、接続の各終端で独立して終了させることができます。</p> +<p>このハンドシェイクステップは、安全な接続を作成する際に、{{glossary('DNS', 'DNS ルックアップ')}}の後、および{{glossary('TLS')}}<a href="/ja/docs/Glossary/TLS"> </a>ハンドシェイクの前に実行されます。接続は 4度目のハンドシェイクを通じて、接続の各終端で独立して終了させることができます。</p> <h2 id="See_also" name="See_also">関連情報</h2> diff --git a/files/ja/glossary/tree_shaking/index.html b/files/ja/glossary/tree_shaking/index.html index faa0dd5af4..d03f721c53 100644 --- a/files/ja/glossary/tree_shaking/index.html +++ b/files/ja/glossary/tree_shaking/index.html @@ -5,7 +5,7 @@ translation_of: Glossary/Tree_shaking --- <p><strong>Tree shaking</strong> とは実行されないコードを削除することで、JavaScriptの文脈で利用される用語です。</p> -<p>Tree shaking は ES2015 の <a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a> 文と <a href="/en-US/docs/Web/JavaScript/Reference/Statements/export">export</a> 文を利用して、エキスポートされたコードが他の JavaScript ファイルで利用されているかどうかを判定します。</p> +<p>Tree shaking は ES2015 の <a href="/ja/docs/Web/JavaScript/Reference/Statements/import">import</a> 文と <a href="/ja/docs/Web/JavaScript/Reference/Statements/export">export</a> 文を利用して、エキスポートされたコードが他の JavaScript ファイルで利用されているかどうかを判定します。</p> <p>モダンな JavaScript アプリケーションの開発では、<a href="https://webpack.js.org/">webpack</a> や <a href="https://github.com/rollup/rollup">Rollup</a> のようなモジュールバンドラーが複数の JavaScript ファイルを 1 つにまとめられます。この際に tree shaking が行われます。Tree shaking は、コードの構造を整理してファイルサイズを小さくできる、といった点で製品としてリリースする前の重要な処理となっています。</p> diff --git a/files/ja/glossary/validator/index.html b/files/ja/glossary/validator/index.html index ff09ffada6..7256de9e01 100644 --- a/files/ja/glossary/validator/index.html +++ b/files/ja/glossary/validator/index.html @@ -15,5 +15,5 @@ translation_of: Glossary/Validator <ul> <li>Wikipedia の {{interwiki("wikipedia", "en:Validator", "Validator")}} (英語)</li> - <li><a href="https://developer.mozilla.org/ja/docs/Tools/Validators">バリデーターの例</a></li> + <li><a href="/ja/docs/Tools/Validators">バリデーターの例</a></li> </ul> diff --git a/files/ja/glossary/variable/index.html b/files/ja/glossary/variable/index.html index ae06c3c4c6..9ca5e73b1d 100644 --- a/files/ja/glossary/variable/index.html +++ b/files/ja/glossary/variable/index.html @@ -19,6 +19,6 @@ translation_of: Glossary/Variable <h3 id="Technical_reference" name="Technical_reference">技術リファレンス</h3> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">JavaScript の変数宣言</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/var">JavaScript の <code>var</code> 文</a></li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">JavaScript の変数宣言</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Statements/var">JavaScript の <code>var</code> 文</a></li> </ul> diff --git a/files/ja/glossary/webassembly/index.html b/files/ja/glossary/webassembly/index.html index f53eb382ea..d3e0b91c1e 100644 --- a/files/ja/glossary/webassembly/index.html +++ b/files/ja/glossary/webassembly/index.html @@ -14,7 +14,7 @@ translation_of: Glossary/WebAssembly <ol> <li>{{interwiki('wikipedia','WebAssembly')}} on Wikipedia</li> <li><a href="https://webassembly.org/">Official website</a></li> - <li><a href="/en-US/docs/WebAssembly">WebAssembly</a> on MDN</li> + <li><a href="/ja/docs/WebAssembly">WebAssembly</a> on MDN</li> </ol> </li> </ol> diff --git a/files/ja/glossary/webgl/index.html b/files/ja/glossary/webgl/index.html index 2f6901631f..f360995abc 100644 --- a/files/ja/glossary/webgl/index.html +++ b/files/ja/glossary/webgl/index.html @@ -29,6 +29,6 @@ translation_of: Glossary/WebGL <h3 id="技術記事" style="line-height: 24px;">技術記事</h3> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/WebGL">MDN の WebGL</a></li> + <li><a href="/ja/docs/Web/WebGL">MDN の WebGL</a></li> <li><a href="http://caniuse.com/#feat=webgl">WebGL のサポート表</a></li> </ul> diff --git a/files/ja/glossary/webidl/index.html b/files/ja/glossary/webidl/index.html index f5a9a1da69..1fdbb28f78 100644 --- a/files/ja/glossary/webidl/index.html +++ b/files/ja/glossary/webidl/index.html @@ -17,7 +17,7 @@ translation_of: Glossary/WebIDL <ul> <li><a href="http://www.w3.org/TR/WebIDL/">Specification</a></li> - <li><a href="/docs/MDN/Contribute/Howto/Write_an_API_reference/Information_contained_in_a_WebIDL_file">Information contained in a WebIDL file</a></li> - <li><a href="/docs/Mozilla/WebIDL_bindings">WebIDL bindings</a></li> + <li><a href="/ja/docs/MDN/Contribute/Howto/Write_an_API_reference/Information_contained_in_a_WebIDL_file">Information contained in a WebIDL file</a></li> + <li><a href="/ja/docs/Mozilla/WebIDL_bindings">WebIDL bindings</a></li> <li>{{interwiki("wikipedia", "WebIDL")}}</li> </ul> diff --git a/files/ja/glossary/webkit/index.html b/files/ja/glossary/webkit/index.html index 48c90a9a6a..1636632c0c 100644 --- a/files/ja/glossary/webkit/index.html +++ b/files/ja/glossary/webkit/index.html @@ -27,5 +27,5 @@ translation_of: Glossary/WebKit <h3 id="Technical_reference" name="Technical_reference">技術リファレンス</h3> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Webkit_Extensions">WebKit CSS 拡張</a></li> + <li><a href="/ja/docs/Web/CSS/Reference/Webkit_Extensions">WebKit CSS 拡張</a></li> </ul> diff --git a/files/ja/glossary/world_wide_web/index.html b/files/ja/glossary/world_wide_web/index.html index 1b46bfb2cd..80a533e88a 100644 --- a/files/ja/glossary/world_wide_web/index.html +++ b/files/ja/glossary/world_wide_web/index.html @@ -29,7 +29,7 @@ translation_of: Glossary/World_Wide_Web <h3 id="ウェブについて学ぶ">ウェブについて学ぶ</h3> <ul> - <li><a href="https://developer.mozilla.org/Learn">Learn the Web</a></li> + <li><a href="/ja/docs/Learn">Learn the Web</a></li> <li><a href="https://learning.mozilla.org/web-literacy">Web literacy map</a> (ウェブ開発に必要なスキル項目)</li> </ul> diff --git a/files/ja/glossary/xpath/index.html b/files/ja/glossary/xpath/index.html index 6242d1ab0b..47c2199f3d 100644 --- a/files/ja/glossary/xpath/index.html +++ b/files/ja/glossary/xpath/index.html @@ -15,7 +15,7 @@ translation_of: Glossary/XPath <h3 id="Technical_reference" name="Technical_reference">技術リファレンス</h3> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/XPath">MDN の XPath 文書</a></li> + <li><a href="/ja/docs/Web/XPath">MDN の XPath 文書</a></li> <li><a href="http://www.w3.org/TR/xpath-30/">XPath specification</a></li> </ul> diff --git a/files/ja/glossary/xslt/index.html b/files/ja/glossary/xslt/index.html index cf1d126c5a..2cea03ffab 100644 --- a/files/ja/glossary/xslt/index.html +++ b/files/ja/glossary/xslt/index.html @@ -18,5 +18,5 @@ translation_of: Glossary/XSLT <ul> <li>{{Interwiki("wikipedia", "XSLT")}} on Wikipedia</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/XSLT">XSLT documentation on MDN</a></li> + <li><a href="/ja/docs/Web/XSLT">XSLT documentation on MDN</a></li> </ul> diff --git a/files/ja/learn/accessibility/accessibility_troubleshooting/index.html b/files/ja/learn/accessibility/accessibility_troubleshooting/index.html index a43b4a509b..853d204cc1 100644 --- a/files/ja/learn/accessibility/accessibility_troubleshooting/index.html +++ b/files/ja/learn/accessibility/accessibility_troubleshooting/index.html @@ -120,10 +120,10 @@ translation_of: Learn/Accessibility/Accessibility_troubleshooting <ul> <li><a href="/ja/docs/Learn/Accessibility/What_is_accessibility">アクセシビリティとは？</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Accessibility/HTML">HTML: アクセシビリティの基礎</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Accessibility/CSS_and_JavaScript">CSS と JavaScript のアクセシビリティ成功事例</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Accessibility/WAI-ARIA_basics" rel="nofollow">WAI-ARIA の基本</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Accessibility/Multimedia" rel="nofollow">アクセシブルなマルチメディア</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Accessibility/Mobile" rel="nofollow">モバイルアクセシビリティ</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Accessibility/Accessibility_troubleshooting" rel="nofollow">アクセシビリティのトラブルシューティング</a></li> + <li><a href="/ja/docs/Learn/Accessibility/HTML">HTML: アクセシビリティの基礎</a></li> + <li><a href="/ja/docs/Learn/Accessibility/CSS_and_JavaScript">CSS と JavaScript のアクセシビリティ成功事例</a></li> + <li><a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics" rel="nofollow">WAI-ARIA の基本</a></li> + <li><a href="/ja/docs/Learn/Accessibility/Multimedia" rel="nofollow">アクセシブルなマルチメディア</a></li> + <li><a href="/ja/docs/Learn/Accessibility/Mobile" rel="nofollow">モバイルアクセシビリティ</a></li> + <li><a href="/ja/docs/Learn/Accessibility/Accessibility_troubleshooting" rel="nofollow">アクセシビリティのトラブルシューティング</a></li> </ul> diff --git a/files/ja/learn/accessibility/html/index.html b/files/ja/learn/accessibility/html/index.html index efcb7b9c1d..e0d08c0fc0 100644 --- a/files/ja/learn/accessibility/html/index.html +++ b/files/ja/learn/accessibility/html/index.html @@ -357,7 +357,7 @@ translation_of: Learn/Accessibility/HTML <span class="punctuation token">}</span> <span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> -<p>ここでは、キーボード上でいつボタンが押されたのかを検出するために、<code>document</code> オブジェクトにリスナーを追加しています。どのボタンが押されたのかを、イベント・オブジェクトの <code><a href="https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent/keyCode">keyCode</a></code> プロパティを介して調べています。 [訳注: 以上の二つの文の「ボタン」はキーボード上のキーのことのようです。また、<code>keyCode</code> プロパティは非推奨になっています。]もしエンターキー / リターンキーに合致するキーコードだったら、<code>document.activeElement.onclick()</code> を用い、ボタンの <code>onclick</code> ハンドラーに記憶されている関数を実行します [訳注: この文の「ボタン」は <code><div></code> ボタンのことのようです]。<code><a href="https://developer.mozilla.org/ja/docs/Web/API/Document/activeElement">activeElement</a></code> は、ページ上で現在フォーカスの当たっている要素を教えてくれます。</p> +<p>ここでは、キーボード上でいつボタンが押されたのかを検出するために、<code>document</code> オブジェクトにリスナーを追加しています。どのボタンが押されたのかを、イベント・オブジェクトの <code><a href="/ja/docs/Web/API/KeyboardEvent/keyCode">keyCode</a></code> プロパティを介して調べています。 [訳注: 以上の二つの文の「ボタン」はキーボード上のキーのことのようです。また、<code>keyCode</code> プロパティは非推奨になっています。]もしエンターキー / リターンキーに合致するキーコードだったら、<code>document.activeElement.onclick()</code> を用い、ボタンの <code>onclick</code> ハンドラーに記憶されている関数を実行します [訳注: この文の「ボタン」は <code><div></code> ボタンのことのようです]。<code><a href="/ja/docs/Web/API/Document/activeElement">activeElement</a></code> は、ページ上で現在フォーカスの当たっている要素を教えてくれます。</p> <div class="note"> <p><strong>注</strong>: 自分の独自のイベントハンドラーを、イベントハンドラー・プロパティ (たとえば <code>onclick</code>) を介して設定した場合にのみ、この技法がうまくいくだろうということに留意すべきです。<code>addEventListener</code> だと、うまくいきません。</p> diff --git a/files/ja/learn/accessibility/what_is_accessibility/index.html b/files/ja/learn/accessibility/what_is_accessibility/index.html index e1edbafaee..4812e98bcf 100644 --- a/files/ja/learn/accessibility/what_is_accessibility/index.html +++ b/files/ja/learn/accessibility/what_is_accessibility/index.html @@ -122,8 +122,8 @@ translation_of: Learn/Accessibility/What_is_accessibility <h3 id="注記">注記</h3> <ul> - <li><a href="/en-US/docs/Web/Accessibility/Cognitive_accessibility">認知的なアクセシビリティ</a>をもってデザインするのは良い習慣になります。どんな人にも利益になるでしょう。</li> - <li>知的障碍者の多くは身体的な障碍も持っています。ウェブサイトは W3Cの<a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web コンテンツアクセシビリティガイドライン</a>と、その中の<a href="/en-US/docs/Web/Accessibility/Cognitive_accessibility#Guidelines">認知的アクセシビリティガイドライン</a>に従う必要があります。</li> + <li><a href="/ja/docs/Web/Accessibility/Cognitive_accessibility">認知的なアクセシビリティ</a>をもってデザインするのは良い習慣になります。どんな人にも利益になるでしょう。</li> + <li>知的障碍者の多くは身体的な障碍も持っています。ウェブサイトは W3Cの<a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web コンテンツアクセシビリティガイドライン</a>と、その中の<a href="/ja/docs/Web/Accessibility/Cognitive_accessibility#Guidelines">認知的アクセシビリティガイドライン</a>に従う必要があります。</li> <li>W3Cの <a href="https://www.w3.org/WAI/GL/task-forces/coga/">認知と学習障碍者のアクセシビリティタスクフォース</a>では認知障碍者のためのウェブアクセシビリティガイドラインを制作しています。</li> <li>WebAIM の<a href="https://webaim.org/articles/cognitive/">認知のページ</a>には関連する情報やリソースがあります<a name="_GoBack"></a>.</li> <li>アメリカ疾病予防管理センターの見積もりでは、2018年以降、4人に1人の米国市民には障碍があり、その中で、<a href="https://www.cdc.gov/media/releases/2018/p0816-disability.html">若い人には認知障碍が最もよく見られます。</a></li> diff --git a/files/ja/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html b/files/ja/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html index 57245cc7a3..0927434fad 100644 --- a/files/ja/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html +++ b/files/ja/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html @@ -33,7 +33,7 @@ translation_of: Learn/Common_questions/Checking_that_your_web_site_is_working_pr <h2 id="アクティブラーニング">アクティブラーニング</h2> -<p><em>アクティブラーニングはまだありません。 <a href="/en-US/docs/MDN/Getting_started">貢献をご検討ください</a>。</em></p> +<p><em>アクティブラーニングはまだありません。 <a href="/ja/docs/MDN/Getting_started">貢献をご検討ください</a>。</em></p> <h2 id="より深く掘り下げる">より深く掘り下げる</h2> diff --git a/files/ja/learn/common_questions/common_web_layouts/index.html b/files/ja/learn/common_questions/common_web_layouts/index.html index 88fc618791..2aef5e786e 100644 --- a/files/ja/learn/common_questions/common_web_layouts/index.html +++ b/files/ja/learn/common_questions/common_web_layouts/index.html @@ -13,7 +13,7 @@ translation_of: Learn/Common_questions/Common_web_layouts <tbody> <tr> <th scope="row">Prerequisites:</th> - <td>Make sure you've already thought about <a href="/en-US/Learn/Thinking_before_coding">what you want to accomplish</a> with your web project.</td> + <td>Make sure you've already thought about <a href="/ja/Learn/Thinking_before_coding">what you want to accomplish</a> with your web project.</td> </tr> <tr> <th scope="row">Objective:</th> @@ -63,7 +63,7 @@ translation_of: Learn/Common_questions/Common_web_layouts <h2 id="Active_learning">Active learning</h2> -<p><em>There is no active learning available yet. <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> +<p><em>There is no active learning available yet. <a href="/ja/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> <h2 id="Deeper_dive">Deeper dive</h2> diff --git a/files/ja/learn/common_questions/design_for_all_types_of_users/index.html b/files/ja/learn/common_questions/design_for_all_types_of_users/index.html index 7c3da5fc1e..b6b6407e3d 100644 --- a/files/ja/learn/common_questions/design_for_all_types_of_users/index.html +++ b/files/ja/learn/common_questions/design_for_all_types_of_users/index.html @@ -13,7 +13,7 @@ translation_of: Learn/Common_questions/Design_for_all_types_of_users <tbody> <tr> <th scope="row">前提条件</th> - <td>あなたはすでに<a href="/en-US/Learn/What_is_accessibility">アクセシビリティとは何か？</a>を読んでいますか？,ここではアクセシビリティについて詳細にカバーしていませんので</td> + <td>あなたはすでに<a href="/ja/Learn/What_is_accessibility">アクセシビリティとは何か？</a>を読んでいますか？,ここではアクセシビリティについて詳細にカバーしていませんので</td> </tr> <tr> <th scope="row">目的</th> @@ -28,7 +28,7 @@ translation_of: Learn/Common_questions/Design_for_all_types_of_users <h2 id="アクティブラーニング">アクティブラーニング</h2> -<p><em>まだ、アクティブラーニングがありません。 <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> +<p><em>まだ、アクティブラーニングがありません。 <a href="/ja/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> <h2 id="深く掘っていく">深く掘っていく</h2> diff --git a/files/ja/learn/common_questions/how_does_the_internet_work/index.html b/files/ja/learn/common_questions/how_does_the_internet_work/index.html index 73899c4026..7a55f7fe86 100644 --- a/files/ja/learn/common_questions/how_does_the_internet_work/index.html +++ b/files/ja/learn/common_questions/how_does_the_internet_work/index.html @@ -17,7 +17,7 @@ translation_of: Learn/Common_questions/How_does_the_Internet_work <tbody> <tr> <th scope="row">前提条件:</th> - <td>ありませんが、最初に<a href="/docs/Learn/Thinking_before_coding">プロジェクトの目標を設定すること</a>の記事を先に読むことをおすすめします。</td> + <td>ありませんが、最初に<a href="/ja/docs/Learn/Thinking_before_coding">プロジェクトの目標を設定すること</a>の記事を先に読むことをおすすめします。</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/common_questions/how_much_does_it_cost/index.html b/files/ja/learn/common_questions/how_much_does_it_cost/index.html index d931cb0900..7ab38a1d62 100644 --- a/files/ja/learn/common_questions/how_much_does_it_cost/index.html +++ b/files/ja/learn/common_questions/how_much_does_it_cost/index.html @@ -52,7 +52,7 @@ translation_of: Learn/Common_questions/How_much_does_it_cost <h3 id="パブリッシングツール">パブリッシングツール</h3> -<p>You also need a way to upload files: from your hard drive to a distant web server. To do that you should use a publishing tool such as an (S)<a href="/en-US/docs/Glossary/FTP">FTP client</a>, <a href="https://en.wikipedia.org/wiki/Rsync">RSync</a>, or <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages/">Git/GitHub</a>.</p> +<p>You also need a way to upload files: from your hard drive to a distant web server. To do that you should use a publishing tool such as an (S)<a href="/ja/docs/Glossary/FTP">FTP client</a>, <a href="https://en.wikipedia.org/wiki/Rsync">RSync</a>, or <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages/">Git/GitHub</a>.</p> <p>Each operating system includes an (S)FTP client, as part of its file manager. Windows Explorer, Nautilus (a common Linux file manager), and the Mac Finder all include this functionality. However, people often choose dedicated (S)FTP clients to display local or remote directories side-by-side and store server passwords.</p> @@ -147,9 +147,9 @@ translation_of: Learn/Common_questions/How_much_does_it_cost <h2 id="Next_steps">Next steps</h2> -<p>Now that you understand what kind of money your website may cost you, it's time to start designing that website and <a href="/en-US/docs/Learn/Set_up_a_basic_working_environment">setting up your work environment</a>.</p> +<p>Now that you understand what kind of money your website may cost you, it's time to start designing that website and <a href="/ja/docs/Learn/Set_up_a_basic_working_environment">setting up your work environment</a>.</p> <ul> - <li>Read on about <a href="/en-US/docs/Learn/Choose,_Install_and_set_up_a_text_editor">how to choose and install a text editor</a>.</li> - <li>If you're more focused on design, take a look at the <a href="/en-US/Learn/Anatomy_of_a_web_page">anatomy of a web page</a>.</li> + <li>Read on about <a href="/ja/docs/Learn/Choose,_Install_and_set_up_a_text_editor">how to choose and install a text editor</a>.</li> + <li>If you're more focused on design, take a look at the <a href="/ja/Learn/Anatomy_of_a_web_page">anatomy of a web page</a>.</li> </ul> diff --git a/files/ja/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/ja/learn/common_questions/pages_sites_servers_and_search_engines/index.html index 34646a106f..b633c513b9 100644 --- a/files/ja/learn/common_questions/pages_sites_servers_and_search_engines/index.html +++ b/files/ja/learn/common_questions/pages_sites_servers_and_search_engines/index.html @@ -115,6 +115,6 @@ translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines <h2 id="Next_steps" name="Next_steps">次の段階</h2> <ul> - <li>より深く掘り下げる: <a href="/docs/Learn/What_is_a_web_server">ウェブサーバーって何？</a></li> + <li>より深く掘り下げる: <a href="/ja/docs/Learn/What_is_a_web_server">ウェブサーバーって何？</a></li> <li>ウェブページがどのようにウェブサイトにリンクされているかを見る: <a href="/ja/docs/Learn/Common_questions/What_are_hyperlinks">ウェブのリンクを理解する</a></li> </ul> diff --git a/files/ja/learn/common_questions/thinking_before_coding/index.html b/files/ja/learn/common_questions/thinking_before_coding/index.html index ec555fe4c4..8d9629600b 100644 --- a/files/ja/learn/common_questions/thinking_before_coding/index.html +++ b/files/ja/learn/common_questions/thinking_before_coding/index.html @@ -40,7 +40,7 @@ translation_of: Learn/Common_questions/Thinking_before_coding <h2 id="アクティブラーニング">アクティブラーニング</h2> -<p><em>アクティブラーニングはまだありません。<a href="https://developer.mozilla.org/ja/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> +<p><em>アクティブラーニングはまだありません。<a href="/ja/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> <h2 id="より深いダイビング">より深いダイビング</h2> diff --git a/files/ja/learn/common_questions/what_are_browser_developer_tools/index.html b/files/ja/learn/common_questions/what_are_browser_developer_tools/index.html index 4e3fe1667b..98fe5326a8 100644 --- a/files/ja/learn/common_questions/what_are_browser_developer_tools/index.html +++ b/files/ja/learn/common_questions/what_are_browser_developer_tools/index.html @@ -19,7 +19,7 @@ translation_of: Learn/Common_questions/What_are_browser_developer_tools </div> <div class="note"> -<p><strong>注</strong>: 下のサンプルを実行していく前に、<a href="/en-US/Learn/Getting_started_with_the_web">Web入門</a>の記事の中で作りあげる、<a href="http://mdn.github.io/beginner-html-site-scripted/">初心者向けウェブサイトの例</a>を開いてください。後ほどこれを使って説明します。</p> +<p><strong>注</strong>: 下のサンプルを実行していく前に、<a href="/ja/Learn/Getting_started_with_the_web">Web入門</a>の記事の中で作りあげる、<a href="http://mdn.github.io/beginner-html-site-scripted/">初心者向けウェブサイトの例</a>を開いてください。後ほどこれを使って説明します。</p> </div> <h2 id="How_to_open_the_devtools_in_your_browser" name="How_to_open_the_devtools_in_your_browser">ブラウザ開発者ツールの開き方</h2> @@ -168,7 +168,7 @@ document.querySelector('h1').appendChild(myImage);</pre> <p>Find more out about the JavaScript console in different browsers:</p> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Firefox Web Console</a></li> + <li><a href="/ja/docs/Tools/Web_Console">Firefox Web Console</a></li> <li><a href="http://msdn.microsoft.com/en-us/library/ie/dn255006%28v=vs.85%29.aspx">IE JavaScript console</a></li> <li><a href="https://developer.chrome.com/devtools/docs/console">Chrome JavaScript Console</a> (Opera's inspector works the same as this)</li> <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1">Safari Console</a></li> @@ -177,6 +177,6 @@ document.querySelector('h1').appendChild(myImage);</pre> <h2 id="あわせて参照">あわせて参照</h2> <ul> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Debugging CSS</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Debugging CSS</a></li> </ul> diff --git a/files/ja/learn/common_questions/what_is_a_web_server/index.html b/files/ja/learn/common_questions/what_is_a_web_server/index.html index 1278ee5d38..bd7ba00222 100644 --- a/files/ja/learn/common_questions/what_is_a_web_server/index.html +++ b/files/ja/learn/common_questions/what_is_a_web_server/index.html @@ -82,7 +82,7 @@ translation_of: Learn/Common_questions/What_is_a_web_server <dd>サーバもクライアントも以前の通信を覚えていません。例えば、 HTTP 単独では、サーバは入力したパスワードや、処理中のどのステップにいるかを覚えていることはできません。このような仕事をするには、アプリケーションサーバが必要になります。 (以降の記事で様々な技術を説明します。)</dd> </dl> -<p>HTTP はクライアントとサーバがどのように通信するかについての明確なルールを提供しています。 HTTP 自体については、後で<a href="https://developer.mozilla.org/ja/docs/Web/HTTP">技術記事</a>で説明します。これからは、以下のようなことに気を付けてください。</p> +<p>HTTP はクライアントとサーバがどのように通信するかについての明確なルールを提供しています。 HTTP 自体については、後で<a href="/ja/docs/Web/HTTP">技術記事</a>で説明します。これからは、以下のようなことに気を付けてください。</p> <ul> <li><em>クライアント</em>だけが HTTP リクエストを作成することができ、<em>サーバ</em>だけに送ることができます。サーバは<em>クライアント</em>の HTTP リクエストに<em>返答</em>することだけができます。</li> diff --git a/files/ja/learn/common_questions/what_is_accessibility/index.html b/files/ja/learn/common_questions/what_is_accessibility/index.html index 2790e3bcd2..d4ed71e2ce 100644 --- a/files/ja/learn/common_questions/what_is_accessibility/index.html +++ b/files/ja/learn/common_questions/what_is_accessibility/index.html @@ -26,7 +26,7 @@ translation_of: Learn/Common_questions/What_is_accessibility <h2 id="能動的学習">能動的学習</h2> -<p><em>まだ可能な能動的学習がありません。 <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> +<p><em>まだ可能な能動的学習がありません。 <a href="/ja/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> <h2 id="深く掘っていく">深く掘っていく</h2> @@ -85,6 +85,6 @@ translation_of: Learn/Common_questions/What_is_accessibility <p>アクセスビリティはウェブデザインや技術構造の両方にインパクトを与えることができます。</p> <ul> - <li>私たちはデザインの観点から, <a href="/en-US/docs/Learn/Design_for_all_types_of_users_101">すべてのタイプのユーザーのためのデザイン</a>の勉強を提案する。</li> - <li>もし、技術的な側面の興味を持ったら、 <a href="/en-US/docs/Learn/Using_images">ウェブページにおける埋め込みイメージ</a>の方法を勉強することができる。</li> + <li>私たちはデザインの観点から, <a href="/ja/docs/Learn/Design_for_all_types_of_users_101">すべてのタイプのユーザーのためのデザイン</a>の勉強を提案する。</li> + <li>もし、技術的な側面の興味を持ったら、 <a href="/ja/docs/Learn/Using_images">ウェブページにおける埋め込みイメージ</a>の方法を勉強することができる。</li> </ul> diff --git a/files/ja/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/ja/learn/css/building_blocks/backgrounds_and_borders/index.html index f0883a265c..485c7b0d6a 100644 --- a/files/ja/learn/css/building_blocks/backgrounds_and_borders/index.html +++ b/files/ja/learn/css/building_blocks/backgrounds_and_borders/index.html @@ -22,7 +22,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> </tr> <tr> <th scope="row">目的:</th> @@ -45,7 +45,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <h3 id="Background_colors" name="Background_colors">背景色</h3> -<p> {{cssxref("background-color")}} プロパティは、要素の背景色を定義します。このプロパティは、有効な<a href="/en-US/docs/Web/CSS/color_value"><color></a>値を受け入れます。<code>background-color</code>は、要素の <a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model#Parts_of_a_box"><strong>Content box</strong>, <strong>Padding box</strong></a> の範囲でコンテンツの下に広がります。</p> +<p> {{cssxref("background-color")}} プロパティは、要素の背景色を定義します。このプロパティは、有効な<a href="/ja/docs/Web/CSS/color_value"><color></a>値を受け入れます。<code>background-color</code>は、要素の <a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model#Parts_of_a_box"><strong>Content box</strong>, <strong>Padding box</strong></a> の範囲でコンテンツの下に広がります。</p> <p>次の例では、さまざまな色の値値を使用して、ボックス(<code>.box</code>)、見出し(<code>h2</code>)、および {{htmlelement("span")}} 要素に背景色を指定しています。</p> diff --git a/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.html index 324308ee1f..a8285aa680 100644 --- a/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.html +++ b/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -22,7 +22,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> </tr> <tr> <th scope="row">目的:</th> @@ -302,7 +302,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance <h2 id="スキルをテストしよう!">スキルをテストしよう!</h2> -<p>この記事で多くを網羅しましたが、最も重要な情報を覚えていますか？次に移る前に、この情報を保持しているかを検証するテストがあります — <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_tasks">Test your skills: the Cascade</a>を見てください。</p> +<p>この記事で多くを網羅しましたが、最も重要な情報を覚えていますか？次に移る前に、この情報を保持しているかを検証するテストがあります — <a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_tasks">Test your skills: the Cascade</a>を見てください。</p> <h2 id="Whats_next" name="Whats_next">次のステップ</h2> diff --git a/files/ja/learn/css/building_blocks/debugging_css/index.html b/files/ja/learn/css/building_blocks/debugging_css/index.html index a66917e645..7df0fa407d 100644 --- a/files/ja/learn/css/building_blocks/debugging_css/index.html +++ b/files/ja/learn/css/building_blocks/debugging_css/index.html @@ -19,7 +19,7 @@ translation_of: Learn/CSS/Building_blocks/Debugging_CSS <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/css/building_blocks/handling_different_text_directions/index.html b/files/ja/learn/css/building_blocks/handling_different_text_directions/index.html index e0d2961d20..af0f9f0823 100644 --- a/files/ja/learn/css/building_blocks/handling_different_text_directions/index.html +++ b/files/ja/learn/css/building_blocks/handling_different_text_directions/index.html @@ -19,7 +19,7 @@ translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/css/building_blocks/images_media_form_elements/index.html b/files/ja/learn/css/building_blocks/images_media_form_elements/index.html index f21577f7d5..bd3fa8d358 100644 --- a/files/ja/learn/css/building_blocks/images_media_form_elements/index.html +++ b/files/ja/learn/css/building_blocks/images_media_form_elements/index.html @@ -19,7 +19,7 @@ translation_of: Learn/CSS/Building_blocks/Images_media_form_elements <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/css/building_blocks/organizing/index.html b/files/ja/learn/css/building_blocks/organizing/index.html index f1508b0edb..c199105dd3 100644 --- a/files/ja/learn/css/building_blocks/organizing/index.html +++ b/files/ja/learn/css/building_blocks/organizing/index.html @@ -23,7 +23,7 @@ translation_of: Learn/CSS/Building_blocks/Organizing <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/css/building_blocks/overflowing_content/index.html b/files/ja/learn/css/building_blocks/overflowing_content/index.html index 06bc30293c..52a6a71046 100644 --- a/files/ja/learn/css/building_blocks/overflowing_content/index.html +++ b/files/ja/learn/css/building_blocks/overflowing_content/index.html @@ -18,7 +18,7 @@ translation_of: Learn/CSS/Building_blocks/Overflowing_content <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> </tr> <tr> <th scope="row">目的:</th> @@ -99,7 +99,7 @@ translation_of: Learn/CSS/Building_blocks/Overflowing_content <h2 id="あなたのスキルをテストしてみてください!">あなたのスキルをテストしてみてください!</h2> -<p>このレッスンで吸収すべきことはたくさんあります！ あなたは最も重要な情報を覚えていますか？ あなたの理解度を確認するには、<a href="/en-US/docs/Learn/CSS/Building_blocks/Overflow_Tasks">Test your skills: overflow</a> を参照してください。</p> +<p>このレッスンで吸収すべきことはたくさんあります！ あなたは最も重要な情報を覚えていますか？ あなたの理解度を確認するには、<a href="/ja/docs/Learn/CSS/Building_blocks/Overflow_Tasks">Test your skills: overflow</a> を参照してください。</p> <h2 id="Summary" name="Summary">まとめ</h2> diff --git a/files/ja/learn/css/building_blocks/selectors/combinators/index.html b/files/ja/learn/css/building_blocks/selectors/combinators/index.html index 309d54b4cc..1daad128ee 100644 --- a/files/ja/learn/css/building_blocks/selectors/combinators/index.html +++ b/files/ja/learn/css/building_blocks/selectors/combinators/index.html @@ -17,7 +17,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Combinators <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> </tr> <tr> <th scope="row">目的:</th> @@ -85,7 +85,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Combinators <h2 id="あなたのスキルをテストしてみてください!">あなたのスキルをテストしてみてください!</h2> -<p>この記事では多くのことを取り上げましたが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するためのテストがいくつかあります - あなたのスキルをテストするを参照してください。<a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks">Test your skills: Selectors</a> を参照してください。</p> +<p>この記事では多くのことを取り上げましたが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するためのテストがいくつかあります - あなたのスキルをテストするを参照してください。<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks">Test your skills: Selectors</a> を参照してください。</p> <h2 id="Moving_on" name="Moving_on">先へ</h2> diff --git a/files/ja/learn/css/building_blocks/selectors/index.html b/files/ja/learn/css/building_blocks/selectors/index.html index 4ca0ff88db..2d861d36fa 100644 --- a/files/ja/learn/css/building_blocks/selectors/index.html +++ b/files/ja/learn/css/building_blocks/selectors/index.html @@ -20,7 +20,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>) および CSS に関するアイデア (<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>) に関する基本的な知識を得ている。</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>) および CSS に関するアイデア (<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>) に関する基本的な知識を得ている。</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html index ea84d45c2b..18f1be6cc0 100644 --- a/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html +++ b/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html @@ -11,7 +11,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-el <tbody> <tr> <th scope="row">前提条件：</th> - <td>基本的なコンピュータリテラシー、<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">インストールされている基本的なソフトウェア</a><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">、ファイルの操作</a>に関する基本的な知識、HTMLの基本（<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTMLの概要を</a>学ぶ）、CSSのしくみ（<a href="/en-US/docs/Learn/CSS/First_steps">CSSの最初のステップを</a>学ぶ）。</td> + <td>基本的なコンピュータリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">インストールされている基本的なソフトウェア</a><a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">、ファイルの操作</a>に関する基本的な知識、HTMLの基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTMLの概要を</a>学ぶ）、CSSのしくみ（<a href="/ja/docs/Learn/CSS/First_steps">CSSの最初のステップを</a>学ぶ）。</td> </tr> <tr> <th scope="row">目的：</th> @@ -41,9 +41,9 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-el <p>すべての疑似クラスは、この同じ方法で動作します。特定の状態にあるドキュメントの一部をターゲットにして、HTMLにクラスを追加したかのように動作します。MDNの他の例をいくつか見てみましょう。</p> <ul> - <li><code><a href="/en-US/docs/Web/CSS/:last-child">:last-child</a></code></li> - <li><code><a href="/en-US/docs/Web/CSS/:only-child">:only-child</a></code></li> - <li><code><a href="/en-US/docs/Web/CSS/:invalid">:invalid</a></code></li> + <li><code><a href="/ja/docs/Web/CSS/:last-child">:last-child</a></code></li> + <li><code><a href="/ja/docs/Web/CSS/:only-child">:only-child</a></code></li> + <li><code><a href="/ja/docs/Web/CSS/:invalid">:invalid</a></code></li> </ul> <h3 id="ユーザーアクション疑似クラス">ユーザーアクション疑似クラス</h3> @@ -51,8 +51,8 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-el <p>一部の疑似クラスは、ユーザーが何らかの方法でドキュメントを操作したときにのみ適用されます。これらの<strong>ユーザーアクションの</strong>疑似クラスは、<strong>動的疑似クラス</strong>と呼ばれることもあり、ユーザーが要素を操作したときに、要素にクラスが追加されたかのように動作します。例は次のとおりです。</p> <ul> - <li><code><a href="/en-US/docs/Web/CSS/:hover">:hover</a></code> — 上記の通り; これは、ユーザーが要素（通常はリンク）の上にポインターを移動した場合にのみ適用されます。</li> - <li><code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code> — ユーザーがキーボードコントロールを使用して要素にフォーカスした場合にのみ適用されます。</li> + <li><code><a href="/ja/docs/Web/CSS/:hover">:hover</a></code> — 上記の通り; これは、ユーザーが要素（通常はリンク）の上にポインターを移動した場合にのみ適用されます。</li> + <li><code><a href="/ja/docs/Web/CSS/:focus">:focus</a></code> — ユーザーがキーボードコントロールを使用して要素にフォーカスした場合にのみ適用されます。</li> </ul> <p>{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}</p> @@ -88,7 +88,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-el <h2 id="beforeおよび_afterを使用したコンテンツの生成">:: beforeおよび:: afterを使用したコンテンツの生成</h2> -<p>CSSを使用してコンテンツをドキュメントに挿入するための <code><a href="/en-US/docs/Web/CSS/content">content</a></code> プロパティと共に使用される特別な疑似要素がいくつかあります。</p> +<p>CSSを使用してコンテンツをドキュメントに挿入するための <code><a href="/ja/docs/Web/CSS/content">content</a></code> プロパティと共に使用される特別な疑似要素がいくつかあります。</p> <p>以下のライブ例のように、これらを使用してテキストの文字列を挿入できます。{{cssxref("content")}} プロパティのテキスト値を変更してみて、出力でそれを確認してください。 <code>::before</code> 疑似要素を <code>::after</code> に変更して、要素の最初ではなく最後に挿入されたテキストを表示することもできます。</p> @@ -132,7 +132,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-el </tr> <tr> <td>{{cssxref(":blank")}}</td> - <td>入力値が空の<a href="/en-US/docs/Web/HTML/Element/input"><code><input></code> 要素に</a>一致します。</td> + <td>入力値が空の<a href="/ja/docs/Web/HTML/Element/input"><code><input></code> 要素に</a>一致します。</td> </tr> <tr> <td>{{cssxref(":checked")}}</td> @@ -148,7 +148,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-el </tr> <tr> <td>{{cssxref(":dir")}}</td> - <td>方向性（HTML <code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code> 属性またはCSS <code><a href="/en-US/docs/Web/CSS/direction">direction</a></code> プロパティの値）に基づいて要素を選択します。</td> + <td>方向性（HTML <code><a href="/ja/docs/Web/HTML/Global_attributes/dir">dir</a></code> 属性またはCSS <code><a href="/ja/docs/Web/CSS/direction">direction</a></code> プロパティの値）に基づいて要素を選択します。</td> </tr> <tr> <td>{{cssxref(":disabled")}}</td> @@ -164,7 +164,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-el </tr> <tr> <td>{{cssxref(":first")}}</td> - <td><a href="/en-US/docs/Web/CSS/Paged_Media">ページ媒体</a>では、最初のページと一致します。</td> + <td><a href="/ja/docs/Web/CSS/Paged_Media">ページ媒体</a>では、最初のページと一致します。</td> </tr> <tr> <td>{{cssxref(":first-child")}}</td> @@ -196,7 +196,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-el </tr> <tr> <td>{{cssxref(":indeterminate")}}</td> - <td>値が不確定な状態のUI要素、通常は<a href="/en-US/docs/Web/HTML/Element/input/checkbox">チェックボックスに</a>一致し<a href="/en-US/docs/Web/HTML/Element/input/checkbox">ます</a>。</td> + <td>値が不確定な状態のUI要素、通常は<a href="/ja/docs/Web/HTML/Element/input/checkbox">チェックボックスに</a>一致し<a href="/ja/docs/Web/HTML/Element/input/checkbox">ます</a>。</td> </tr> <tr> <td>{{cssxref(":in-range")}}</td> @@ -208,7 +208,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-el </tr> <tr> <td>{{cssxref(":lang")}}</td> - <td>言語（HTML <a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a>属性の値）に基づいて要素を<a href="/en-US/docs/Web/HTML/Global_attributes/lang">照合し</a>ます。</td> + <td>言語（HTML <a href="/ja/docs/Web/HTML/Global_attributes/lang">lang</a>属性の値）に基づいて要素を<a href="/ja/docs/Web/HTML/Global_attributes/lang">照合し</a>ます。</td> </tr> <tr> <td>{{cssxref(":last-child")}}</td> @@ -220,7 +220,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-el </tr> <tr> <td>{{cssxref(":left")}}</td> - <td><a href="/en-US/docs/Web/CSS/CSS_Pages">ページ媒体</a>では、左側のページと一致します。</td> + <td><a href="/ja/docs/Web/CSS/CSS_Pages">ページ媒体</a>では、左側のページと一致します。</td> </tr> <tr> <td>{{cssxref(":link")}}</td> @@ -300,7 +300,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-el </tr> <tr> <td>{{cssxref(":right")}}</td> - <td><a href="/en-US/docs/Web/CSS/CSS_Pages">ページ媒体</a>では、右側のページに一致します。</td> + <td><a href="/ja/docs/Web/CSS/CSS_Pages">ページ媒体</a>では、右側のページに一致します。</td> </tr> <tr> <td>{{cssxref(":root")}}</td> @@ -375,23 +375,23 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-el <h2 id="このモジュールでは">このモジュールでは</h2> <ol> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSSセレクター</a> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSSセレクター</a> <ul> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">タイプ、クラス、IDセレクター</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性セレクター</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">疑似クラスと疑似要素</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">コンビネーター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">タイプ、クラス、IDセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性セレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">疑似クラスと疑似要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">コンビネーター</a></li> </ul> </li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">異なるテキスト方向の処理</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">あふれるコンテンツ</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">値と単位</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSSでのアイテムのサイズ変更</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像、メディア、フォーム要素</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">スタイリングテーブル</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSSのデバッグ</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">CSSの整理</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">異なるテキスト方向の処理</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">あふれるコンテンツ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSSでのアイテムのサイズ変更</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像、メディア、フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">スタイリングテーブル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSSのデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSSの整理</a></li> </ol> diff --git a/files/ja/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/ja/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html index 8f1bbbfaad..1d5f42f94b 100644 --- a/files/ja/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html +++ b/files/ja/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html @@ -20,7 +20,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/css/building_blocks/sizing_items_in_css/index.html b/files/ja/learn/css/building_blocks/sizing_items_in_css/index.html index 80909093b3..37e1e4912e 100644 --- a/files/ja/learn/css/building_blocks/sizing_items_in_css/index.html +++ b/files/ja/learn/css/building_blocks/sizing_items_in_css/index.html @@ -21,7 +21,7 @@ translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/css/building_blocks/values_and_units/index.html b/files/ja/learn/css/building_blocks/values_and_units/index.html index 52afc03922..0e398e2d64 100644 --- a/files/ja/learn/css/building_blocks/values_and_units/index.html +++ b/files/ja/learn/css/building_blocks/values_and_units/index.html @@ -24,7 +24,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS の動作概念（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS の動作概念（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/css/css_layout/media_queries/index.html b/files/ja/learn/css/css_layout/media_queries/index.html index 6cfb1366b1..f1e90c3f90 100644 --- a/files/ja/learn/css/css_layout/media_queries/index.html +++ b/files/ja/learn/css/css_layout/media_queries/index.html @@ -358,13 +358,13 @@ article { <pre class="brush: html notranslate"><meta name="viewport" content="width=device-width,initial-scale=1"></pre> -<p>This is the <a href="/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport meta tag</a> — it exists as a way control how mobile browsers render content. This is needed because by default, most mobile browsers lie about their viewport width. Non-responsive sites commonly look really bad when rendered in a narrow viewport, so mobile browsers usually render the site with a viewport width wider than the real device width by default (usually 960 pixels), and then shrink the rendered result so that it fits in the display.</p> +<p>This is the <a href="/ja/docs/Mozilla/Mobile/Viewport_meta_tag">viewport meta tag</a> — it exists as a way control how mobile browsers render content. This is needed because by default, most mobile browsers lie about their viewport width. Non-responsive sites commonly look really bad when rendered in a narrow viewport, so mobile browsers usually render the site with a viewport width wider than the real device width by default (usually 960 pixels), and then shrink the rendered result so that it fits in the display.</p> <p>This is all well and good, but it means that responsive sites are not going to work as expected. If the viewport width is reported as 960 pixels, then mobile layouts (for example created using a media query of <code>@media screen and (max-width: 600px) { ... }</code>) are not going to render as expected.</p> <p>To remedy this, including a viewport meta tag like the one above on your page tells the browser "don't render the content with a 960 pixel viewport — render it using the real device width instead, and set a default initial scale level for better consistency." The media queries will then kick in as expected.</p> -<p>There are a number of other options you can put inside the <code>content</code> attribute of the viewport meta tag — see <a href="/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">Using the viewport meta tag to control layout on mobile browsers</a> for more details.</p> +<p>There are a number of other options you can put inside the <code>content</code> attribute of the viewport meta tag — see <a href="/ja/docs/Mozilla/Mobile/Viewport_meta_tag">Using the viewport meta tag to control layout on mobile browsers</a> for more details.</p> <h2 id="Do_you_really_need_a_media_query" name="Do_you_really_need_a_media_query">メディアクエリーが本当に必要ですか？</h2> @@ -415,7 +415,7 @@ article { <h2 id="Test_your_skills!">Test your skills!</h2> -<p>You've reached the end of this article, but can you remember the most important information? You can find a test to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/CSS/CSS_layout/rwd_skills">Test your skills: Responsive Web Design</a>.</p> +<p>You've reached the end of this article, but can you remember the most important information? You can find a test to verify that you've retained this information before you move on — see <a href="/ja/docs/Learn/CSS/CSS_layout/rwd_skills">Test your skills: Responsive Web Design</a>.</p> <h2 id="Summary" name="Summary">まとめ</h2> diff --git a/files/ja/learn/css/css_layout/supporting_older_browsers/index.html b/files/ja/learn/css/css_layout/supporting_older_browsers/index.html index 93feda2cf0..ffb678ca38 100644 --- a/files/ja/learn/css/css_layout/supporting_older_browsers/index.html +++ b/files/ja/learn/css/css_layout/supporting_older_browsers/index.html @@ -207,7 +207,7 @@ translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers <h2 id="Testing_older_browsers" name="Testing_older_browsers">古いブラウザーをテストする</h2> -<p>フレックスボックスとグリッドをサポートしているブラウザーの大多数では、古いブラウザーをテストするのはかなり難しいかもしれません。 1つの方法は、<a href="https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Cross_browser_testing">クロスブラウザーテスト</a>のモジュールに詳述されているように、Sauce Labs のようなオンラインテストツールを使うことです。</p> +<p>フレックスボックスとグリッドをサポートしているブラウザーの大多数では、古いブラウザーをテストするのはかなり難しいかもしれません。 1つの方法は、<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing">クロスブラウザーテスト</a>のモジュールに詳述されているように、Sauce Labs のようなオンラインテストツールを使うことです。</p> <p>また、仮想マシンをダウンロードしてインストールし、自分のコンピュータ上の封じ込められた環境で古いバージョンのブラウザーを実行することもできます。 古いバージョンの Internet Explorer にアクセスできることは特に便利で、そのために、マイクロソフトは<a href="https://developer.microsoft.com/ja/microsoft-edge/tools/vms/">さまざまな仮想マシンを無料でダウンロード</a>（英語）できるようにしました。 これらは、Mac、Windows、Linux の各オペレーティングシステムで利用可能で、Windows コンピュータを使用していなくても、古い Windows ブラウザーや最新の Windows ブラウザーでテストするのに最適な方法です。</p> diff --git a/files/ja/learn/css/first_steps/getting_started/index.html b/files/ja/learn/css/first_steps/getting_started/index.html index e11d48443c..54cd8436cf 100644 --- a/files/ja/learn/css/first_steps/getting_started/index.html +++ b/files/ja/learn/css/first_steps/getting_started/index.html @@ -22,7 +22,7 @@ translation_of: Learn/CSS/First_steps/Getting_started <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">ソフトウェアのインストール</a>、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの働き方</a>についての基本的な知識、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML序論</a>を学んでいること。)</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">ソフトウェアのインストール</a>、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの働き方</a>についての基本的な知識、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML序論</a>を学んでいること。)</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/css/first_steps/how_css_is_structured/index.html b/files/ja/learn/css/first_steps/how_css_is_structured/index.html index a9e2ae7130..a842228e13 100644 --- a/files/ja/learn/css/first_steps/how_css_is_structured/index.html +++ b/files/ja/learn/css/first_steps/how_css_is_structured/index.html @@ -324,7 +324,7 @@ p { <h2 id="rules" name="rules">アット規則</h2> -<p>CSS の<a href="/en-US/docs/Web/CSS/At-rule">アット規則</a> は、 CSS が実行すること、またはそれがどのように動作するべきかの指示を提供します。いくつかのアット規則は、キーワードと値だけのシンプルなものです。例えば、 <code>@import</code> はスタイルシートを別の CSS スタイルシートにインポートします。</p> +<p>CSS の<a href="/ja/docs/Web/CSS/At-rule">アット規則</a> は、 CSS が実行すること、またはそれがどのように動作するべきかの指示を提供します。いくつかのアット規則は、キーワードと値だけのシンプルなものです。例えば、 <code>@import</code> はスタイルシートを別の CSS スタイルシートにインポートします。</p> <pre class="brush: css notranslate">@import 'styles2.css';</pre> diff --git a/files/ja/learn/css/first_steps/how_css_works/index.html b/files/ja/learn/css/first_steps/how_css_works/index.html index 6044a3c29a..25179efb6b 100644 --- a/files/ja/learn/css/first_steps/how_css_works/index.html +++ b/files/ja/learn/css/first_steps/how_css_works/index.html @@ -17,7 +17,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシー、 <a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされていること</a>、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの操作方法</a>についての基本的な知識、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a>を学習のこと)。</td> + <td>基本的なコンピューターリテラシー、 <a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされていること</a>、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの操作方法</a>についての基本的な知識、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a>を学習のこと)。</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/css/first_steps/index.html b/files/ja/learn/css/first_steps/index.html index c0042ea515..b22dc4d0dd 100644 --- a/files/ja/learn/css/first_steps/index.html +++ b/files/ja/learn/css/first_steps/index.html @@ -19,7 +19,7 @@ translation_of: Learn/CSS/First_steps <p>ゴールに向かって頑張るために必要な情報をまとめたコースをご用意しました。</p> -<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">始める</a></p> +<p><a class="cta primary" href="/ja/docs/Learn/Front-end_web_developer">始める</a></p> </div> <h2 id="Prerequisites" name="Prerequisites">前提条件</h2> @@ -28,7 +28,7 @@ translation_of: Learn/CSS/First_steps <ol> <li>コンピューターの使い方と (ウェブを見たりコンテンツを消費したりといった)ウェブの受動的な使い方に関する基本的な知識に慣れ親しんでいること。</li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>で説明されている基本的な作業環境と、<a href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い方</a>で説明されているファイルの作り方や管理の仕方について理解していること。</li> + <li><a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>で説明されている基本的な作業環境と、<a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い方</a>で説明されているファイルの作り方や管理の仕方について理解していること。</li> <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>で説明されている HTML についての基礎知識に慣れ親しんでいること。</li> </ol> @@ -41,7 +41,7 @@ translation_of: Learn/CSS/First_steps <p>このモジュールには、CSS についてすべての基本的なことがらと、いくつかのスキルをテストできる次の記事が含まれています。</p> <dl> - <dt><a href="https://developer.mozilla.org/ja/docs/Learn/CSS/First_steps/What_is_CSS">CSS とは何か？</a></dt> + <dt><a href="/ja/docs/Learn/CSS/First_steps/What_is_CSS">CSS とは何か？</a></dt> <dd><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets; カスケーティングスタイルシート) は見栄えのよいウェブページを作ることができますが、背後ではどのように動いているのでしょうか？この記事では CSS について、簡単なコードの例とこの言語の主要な項目を説明します。</dd> <dt><a href="/ja/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a></dt> <dd>この記事では、簡単な HTML コードに CSS を適用させ、その過程でこの言語についての実用的なことを学びます。</dd> diff --git a/files/ja/learn/css/first_steps/using_your_new_knowledge/index.html b/files/ja/learn/css/first_steps/using_your_new_knowledge/index.html index 05d56a0fb1..c1b3a1c889 100644 --- a/files/ja/learn/css/first_steps/using_your_new_knowledge/index.html +++ b/files/ja/learn/css/first_steps/using_your_new_knowledge/index.html @@ -16,7 +16,7 @@ translation_of: Learn/CSS/First_steps/Using_your_new_knowledge <tbody> <tr> <th scope="row">前提条件:</th> - <td>基礎コンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイル操作</a>の基礎知識 HTML の基礎 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の入門</a>で学ぶ)、CSS の基礎(このモジュールの残り)</td> + <td>基礎コンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイル操作</a>の基礎知識 HTML の基礎 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の入門</a>で学ぶ)、CSS の基礎(このモジュールの残り)</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/css/first_steps/what_is_css/index.html b/files/ja/learn/css/first_steps/what_is_css/index.html index 0d7d6f3cd3..0a2665c9c3 100644 --- a/files/ja/learn/css/first_steps/what_is_css/index.html +++ b/files/ja/learn/css/first_steps/what_is_css/index.html @@ -22,7 +22,7 @@ translation_of: Learn/CSS/First_steps/What_is_CSS <tr> <th scope="row">前提条件:</th> <td> - <p>基本的なコンピューターリテラシー、 <a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされていること</a>、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの操作方法</a>についての基本的な知識、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML概論</a>を学習のこと)。</p> + <p>基本的なコンピューターリテラシー、 <a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされていること</a>、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの操作方法</a>についての基本的な知識、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML概論</a>を学習のこと)。</p> </td> </tr> <tr> diff --git a/files/ja/learn/css/howto/css_faq/index.html b/files/ja/learn/css/howto/css_faq/index.html index fd76929d99..b7be110d8c 100644 --- a/files/ja/learn/css/howto/css_faq/index.html +++ b/files/ja/learn/css/howto/css_faq/index.html @@ -73,7 +73,7 @@ original_slug: Web/CSS/Common_CSS_Questions </ul> <div class="note"> -<p><strong>注</strong>: 詳しくは <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">Selectors</a> もご覧ください。</p> +<p><strong>注</strong>: 詳しくは <a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Selectors">Selectors</a> もご覧ください。</p> </div> <h2 id="Restoring_the_default_property_value" name="Restoring_the_default_property_value">プロパティの既定値に戻すにはどうすればよいのか?</h2> diff --git a/files/ja/learn/css/index.html b/files/ja/learn/css/index.html index 9c04c66285..100165c81f 100644 --- a/files/ja/learn/css/index.html +++ b/files/ja/learn/css/index.html @@ -27,19 +27,19 @@ translation_of: Learn/CSS <h2 id="Learning_pathway" name="Learning_pathway">学習の道のり</h2> -<p>CSS に挑戦する前に HTML の基礎を学習しておくべきです。まず、<a href="/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a> に取り組むことを推奨します — その後に、以下のことについて学んでください:</p> +<p>CSS に挑戦する前に HTML の基礎を学習しておくべきです。まず、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a> に取り組むことを推奨します — その後に、以下のことについて学んでください:</p> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/CSS/First_steps">CSS 入門</a> から始まる CSS モジュール</li> - <li>より高度な <a href="/Learn/HTML#Modules">HTML モジュール</a></li> - <li><a href="/docs/Learn/JavaScript">JavaScript</a> と、動的な機能をウェブページに追加する方法</li> + <li><a href="/ja/docs/Learn/CSS/First_steps">CSS 入門</a> から始まる CSS モジュール</li> + <li>より高度な <a href="/ja/docs/Learn/HTML#Modules">HTML モジュール</a></li> + <li><a href="/ja/docs/Learn/JavaScript">JavaScript</a> と、動的な機能をウェブページに追加する方法</li> </ul> <p>HTML の基本のキが理解できたら、HTML と CSS の 2 つのトピックスを行き来しながらふたつを同時に学習することを推奨します。なぜなら、CSS を理解すると HTML を勉強するのが更に興味深くまたもっと楽しくなり、また HTML を知ることなくして CSS を学習することはできないからです。</p> -<p>またこのトピックを開始する前に、コンピューターの基本的な使い方と、ウェブを受動的に使用すること (つまり、ウェブコンテンツを消費すること) に慣れている必要があります。 <a href="/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアをインストールする</a> に詳しく書かれているような基本的な環境を持っており、 <a href="/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a> に詳しく書かれているようなファイルの作成・管理方法を理解している必要があります — なおこれらについては初心者向けの記事集である<a href="/docs/Learn/Getting_started_with_the_web">ウェブ入門</a>のなかに入っています。</p> +<p>またこのトピックを開始する前に、コンピューターの基本的な使い方と、ウェブを受動的に使用すること (つまり、ウェブコンテンツを消費すること) に慣れている必要があります。 <a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアをインストールする</a> に詳しく書かれているような基本的な環境を持っており、 <a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a> に詳しく書かれているようなファイルの作成・管理方法を理解している必要があります — なおこれらについては初心者向けの記事集である<a href="/ja/docs/Learn/Getting_started_with_the_web">ウェブ入門</a>のなかに入っています。</p> -<p>このトピックに取り組む前に <a href="/docs/Learn/Getting_started_with_the_web">ウェブ入門</a> を読むと良いでしょう。ただ、このウェブ入門のなかの<a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a>の記事で紹介されていることの多くは、<a href="https://developer.mozilla.org/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a> でもカバーされているのでこれは必須ではありません。</p> +<p>このトピックに取り組む前に <a href="/ja/docs/Learn/Getting_started_with_the_web">ウェブ入門</a> を読むと良いでしょう。ただ、このウェブ入門のなかの<a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a>の記事で紹介されていることの多くは、<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a> でもカバーされているのでこれは必須ではありません。</p> <h2 id="Modules" name="Modules">モジュール</h2> diff --git a/files/ja/learn/css/styling_text/index.html b/files/ja/learn/css/styling_text/index.html index 6bcfb0a722..91e37dca31 100644 --- a/files/ja/learn/css/styling_text/index.html +++ b/files/ja/learn/css/styling_text/index.html @@ -35,13 +35,13 @@ translation_of: Learn/CSS/Styling_text <p>このモジュールには以下の記事が含まれていて、HTML のテキストコンテンツの装飾の背後にあるすべての重要事項を説明しています。</p> <dl> - <dt><a href="/docs/Learn/CSS/Styling_text/Fundamentals">基本的なテキストとフォントの装飾</a></dt> + <dt><a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">基本的なテキストとフォントの装飾</a></dt> <dd>この記事では、フォントの太さ、ファミリーとスタイル、フォントの一括指定、テキストの配置とその他のエフェクト、ラインと文字の間隔の設定など、テキストとフォントの装飾のすべての基本について詳しく説明します。</dd> - <dt><a href="/docs/Learn/CSS/Styling_text/Styling_lists">リストの装飾</a></dt> + <dt><a href="/ja/docs/Learn/CSS/Styling_text/Styling_lists">リストの装飾</a></dt> <dd>リストは他のテキストとほとんど同じようにふるまいますが、知っておくべきリスト固有の CSS プロパティと、考慮すべきベストプラクティスがいくつかあります。この記事はすべてを説明しています。</dd> - <dt><a href="/docs/Learn/CSS/Styling_text/Styling_links">リンクの装飾</a></dt> + <dt><a href="/ja/docs/Learn/CSS/Styling_text/Styling_links">リンクの装飾</a></dt> <dd>リンクを装飾するときは、擬似クラスを使用してリンク状態を効果的に装飾する方法と、ナビゲーションメニューやタブなどの一般的なさまざまなインターフェイス機能で使用するためのリンクの装飾方法を理解することが重要です。この記事では、これらすべてのトピックを見ていきます。</dd> - <dt><a href="/docs/Learn/CSS/Styling_text/Web_fonts">ウェブフォント</a></dt> + <dt><a href="/ja/docs/Learn/CSS/Styling_text/Web_fonts">ウェブフォント</a></dt> <dd>ここでは、ウェブフォントを詳しく探ります — これらを使用すると、ウェブページと一緒にカスタムフォントをダウンロードすることを可能にして、より多様でカスタムなテキストの装飾を可能にします。</dd> </dl> @@ -50,6 +50,6 @@ translation_of: Learn/CSS/Styling_text <p>以下の評価では、上記のガイドで説明されているテキストの装飾のテクニックについての理解をテストします。</p> <dl> - <dt><a href="/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a></dt> + <dt><a href="/ja/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a></dt> <dd>この評価では、コミュニティスクールのホームページのテキストを装飾してもらい、テキストの装飾についての理解をテストします。</dd> </dl> diff --git a/files/ja/learn/css/styling_text/styling_lists/index.html b/files/ja/learn/css/styling_text/styling_lists/index.html index 3a0ea57b6f..3df18d08fd 100644 --- a/files/ja/learn/css/styling_text/styling_lists/index.html +++ b/files/ja/learn/css/styling_text/styling_lists/index.html @@ -175,7 +175,7 @@ dt { list-style-image: url(star.svg); }</pre> -<p>ただし、このプロパティは、行頭記号の位置、サイズなどを制御するという点では少し制限があります。 {{cssxref("background")}} プロパティファミリーを使用するほうが得策です。 これについては、<a href="/en-US/docs/Learn/CSS/Building_blocks">ボックスの装飾</a>モジュールで詳しく説明します。とりあえず、その例をご紹介しましょう。</p> +<p>ただし、このプロパティは、行頭記号の位置、サイズなどを制御するという点では少し制限があります。 {{cssxref("background")}} プロパティファミリーを使用するほうが得策です。 これについては、<a href="/ja/docs/Learn/CSS/Building_blocks">ボックスの装飾</a>モジュールで詳しく説明します。とりあえず、その例をご紹介しましょう。</p> <p>完成した例では、 (既に上で見たものの上に) 次のように順序なしリストを装飾しました。</p> diff --git a/files/ja/learn/forms/form_validation/index.html b/files/ja/learn/forms/form_validation/index.html index c167a03576..ff82bde83d 100644 --- a/files/ja/learn/forms/form_validation/index.html +++ b/files/ja/learn/forms/form_validation/index.html @@ -824,16 +824,16 @@ addEvent(form, "submit", function () { <h2 id="In_this_module" name="In_this_module">このモジュール</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> <li><a class="external" href="/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> <li><a class="external" href="/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> <li><a class="external" href="/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> </ul> <h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> diff --git a/files/ja/learn/forms/how_to_structure_a_web_form/index.html b/files/ja/learn/forms/how_to_structure_a_web_form/index.html index 3bdc3b5f28..54b9b83285 100644 --- a/files/ja/learn/forms/how_to_structure_a_web_form/index.html +++ b/files/ja/learn/forms/how_to_structure_a_web_form/index.html @@ -24,7 +24,7 @@ original_slug: Learn/Forms/How_to_structure_an_HTML_form <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシーと、<a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の基本的な理解</a>。</td> + <td>基本的なコンピューターリテラシーと、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の基本的な理解</a>。</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/forms/html5_input_types/index.html b/files/ja/learn/forms/html5_input_types/index.html index d56da894aa..a55e406e87 100644 --- a/files/ja/learn/forms/html5_input_types/index.html +++ b/files/ja/learn/forms/html5_input_types/index.html @@ -32,7 +32,7 @@ translation_of: Learn/Forms/HTML5_input_types </table> <div class="blockIndicator note"> -<p><strong>注</strong>: この記事のたいていの昨日はブラウザーを超えて広くサポートされています。例外は注記しておきます。ブラウザーサポートについての詳細は、<a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element#Forms">HTML フォーム要素のリファレンス</a>、特に <a href="/ja/docs/Web/HTML/Element/input"><input> タイプ</a>リファレンスを見てください。</p> +<p><strong>注</strong>: この記事のたいていの昨日はブラウザーを超えて広くサポートされています。例外は注記しておきます。ブラウザーサポートについての詳細は、<a href="/ja/docs/Web/HTML/Element#Forms">HTML フォーム要素のリファレンス</a>、特に <a href="/ja/docs/Web/HTML/Element/input"><input> タイプ</a>リファレンスを見てください。</p> </div> <p>HTML フォームコントロールの見た目はデザイナーの仕様により全く異なるため、ウェブ開発者はときどき独自のフォームコントロールを作成します。これは上級のチュートリアル — <a href="/ja/docs/Learn/Forms/How_to_build_custom_form_widgets">カスタムフォームウィジェットの作成方法</a> — で扱います。</p> @@ -268,16 +268,16 @@ price.addEventListener('input', function() { <h2 id="In_this_module" name="In_this_module">このモジュール</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> <li><a class="external" href="/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> <li><a class="external" href="/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> <li><a class="external" href="/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> </ul> <h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> diff --git a/files/ja/learn/forms/html_forms_in_legacy_browsers/index.html b/files/ja/learn/forms/html_forms_in_legacy_browsers/index.html index 70a487b2d2..a8be702f94 100644 --- a/files/ja/learn/forms/html_forms_in_legacy_browsers/index.html +++ b/files/ja/learn/forms/html_forms_in_legacy_browsers/index.html @@ -128,7 +128,7 @@ input[type="button"] { <p>一般に、フォームコントロールの既定の外観は変更しない方が良いと考えられています。というのも、 1 つの CSS プロパティの値を変更すると、一部の入力型は変更されますが、他の入力型は変更されないからです。例えば、 <code>input { font-size: 2rem; }</code> と宣言した場合、 <code>number</code>、<code>date</code>、<code>text</code> には影響がありますが、 <code>color</code> や <code>range</code> には影響しません。プロパティを変更すると、予期せぬ形でウィジェットの外観に影響を与えることがあります。例えば、 <code>[value] { background-color: #ccc; }</code> は、 <code>value</code> 属性を持つすべての {{HTMLElement("input")}} を対象としていますが、 {{HTMLElement("meter")}} の背景色や境界線の角の丸めを変更すると、ブラウザーによって異なる予期せぬ結果になる可能性があります。 {{cssxref('appearance', 'appearance: none;')}} と宣言してブラウザーのスタイルを削除することもできますが、一般的には目的を達成できません。すべてのスタイルが失われ、訪問者が慣れ親しんだ既定のルック＆フィールが削除されるからです。</p> -<p>まとめるとすると、フォームコントロールのウィジェットに CSS でスタイル付けすることで、予測できない副作用が発生することがあります。だからやめましょう。 <a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">フォームウィジェット向けプロパティ実装状況一覧</a>の記事の複雑さからもわかるように、非常に難しいのです。テキスト要素に多少の調整 (サイズやフォントの色など) を行うことはまだ可能でも、必ず副作用が発生します。最良の方法は、 HTML フォームウィジェットにスタイルをまったく適用しないことです。しかし、周囲のアイテムになら、どれでも適用することはできます。また、どうしてもフォームウィジェットの既定のスタイルを変更しなければならない場合は、スタイルガイドを定義して、すべてのフォームコントロールの一貫性を確保し、ユーザーの使い勝手を損なわないようにしてください。また、 <a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">JavaScript でのウィジェットの再構築</a>など、難しいテクニックを検討することもできます。しかし、その場合は、<a href="https://www.smashingmagazine.com/2011/11/03/but-the-client-wants-ie-6-support/" rel="external">そのような愚かな要求をするクライアントに請求すること</a>をためらってはいけません。</p> +<p>まとめるとすると、フォームコントロールのウィジェットに CSS でスタイル付けすることで、予測できない副作用が発生することがあります。だからやめましょう。 <a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">フォームウィジェット向けプロパティ実装状況一覧</a>の記事の複雑さからもわかるように、非常に難しいのです。テキスト要素に多少の調整 (サイズやフォントの色など) を行うことはまだ可能でも、必ず副作用が発生します。最良の方法は、 HTML フォームウィジェットにスタイルをまったく適用しないことです。しかし、周囲のアイテムになら、どれでも適用することはできます。また、どうしてもフォームウィジェットの既定のスタイルを変更しなければならない場合は、スタイルガイドを定義して、すべてのフォームコントロールの一貫性を確保し、ユーザーの使い勝手を損なわないようにしてください。また、 <a href="/ja/docs/Learn/Forms/How_to_build_custom_form_controls">JavaScript でのウィジェットの再構築</a>など、難しいテクニックを検討することもできます。しかし、その場合は、<a href="https://www.smashingmagazine.com/2011/11/03/but-the-client-wants-ie-6-support/" rel="external">そのような愚かな要求をするクライアントに請求すること</a>をためらってはいけません。</p> <h2 id="Feature_detection_and_polyfills"">機能検出とポリフィル</h2> diff --git a/files/ja/learn/forms/index.html b/files/ja/learn/forms/index.html index 40e686438a..0149ed2e1b 100644 --- a/files/ja/learn/forms/index.html +++ b/files/ja/learn/forms/index.html @@ -75,7 +75,7 @@ translation_of: Learn/Forms <dl> <dt><a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームコントロールの作成方法</a></dt> <dd>場合によってはネイティブのフォームウィジェットが必要となるものを提供していないことがあるでしょう。例えばスタイリングや機能で。この場合、生の HTML から自分自身のフォームウィジェットを作る必要があります。この記事ではその方法と考慮すべき点を、実際のケーススタディと一緒に説明します。</dd> - <dt><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">JavaScript によるフォームの送信</a></dt> + <dt><a href="/ja/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">JavaScript によるフォームの送信</a></dt> <dd>この記事では、標準フォームの送信ではなく、カスタム JavaScript 内で HTTP リクエストを組み立てて送る方法を見ます。またそうしたい理由と、そうする意味も見ていきます(<a href="/ja/docs/Web/API/FormData/Using_FormData_Objects">FormData オブジェクトの使用</a>もご覧ください)。</dd> </dl> diff --git a/files/ja/learn/forms/other_form_controls/index.html b/files/ja/learn/forms/other_form_controls/index.html index 28be191eb4..78677f21c7 100644 --- a/files/ja/learn/forms/other_form_controls/index.html +++ b/files/ja/learn/forms/other_form_controls/index.html @@ -312,16 +312,16 @@ translation_of: Learn/Forms/Other_form_controls <h2 id="In_this_module" name="In_this_module">このモジュール</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> <li><a class="external" href="/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> <li><a class="external" href="/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> <li><a class="external" href="/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> </ul> <h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> diff --git a/files/ja/learn/forms/property_compatibility_table_for_form_controls/index.html b/files/ja/learn/forms/property_compatibility_table_for_form_controls/index.html index ed70a2587b..410d21a252 100644 --- a/files/ja/learn/forms/property_compatibility_table_for_form_controls/index.html +++ b/files/ja/learn/forms/property_compatibility_table_for_form_controls/index.html @@ -1010,7 +1010,7 @@ translation_of: Learn/Forms/Property_compatibility_table_for_form_controls <h3 id="Datalist" name="Datalist">Datalist</h3> -<p> <code>{{htmlelement("datalist")}}</code> and <code>{{htmlelement("input")}}</code> 要素と <a href="/en-US/docs/Web/HTML/Attributes/list"><code>list</code> 属性</a>を見てください。</p> +<p> <code>{{htmlelement("datalist")}}</code> and <code>{{htmlelement("input")}}</code> 要素と <a href="/ja/docs/Web/HTML/Attributes/list"><code>list</code> 属性</a>を見てください。</p> <table> <thead> @@ -2009,9 +2009,9 @@ translation_of: Learn/Forms/Property_compatibility_table_for_form_controls <h3 id="上級トピック">上級トピック</h3> <ul> - <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> </ul> diff --git a/files/ja/learn/forms/sending_and_retrieving_form_data/index.html b/files/ja/learn/forms/sending_and_retrieving_form_data/index.html index deee070329..5ce2709ade 100644 --- a/files/ja/learn/forms/sending_and_retrieving_form_data/index.html +++ b/files/ja/learn/forms/sending_and_retrieving_form_data/index.html @@ -320,16 +320,16 @@ if __name__ == "__main__": <h2 id="In_this_module" name="In_this_module">このモジュール</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> <li><a class="external" href="/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> <li><a class="external" href="/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> <li><a class="external" href="/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> </ul> <h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> diff --git a/files/ja/learn/forms/styling_web_forms/index.html b/files/ja/learn/forms/styling_web_forms/index.html index a549329e48..1403848da7 100644 --- a/files/ja/learn/forms/styling_web_forms/index.html +++ b/files/ja/learn/forms/styling_web_forms/index.html @@ -205,7 +205,7 @@ legend { <p>ここからがおもしろいところです! コードを書き始める前に、ここでは 3 つの追加要素が必要です:</p> <ol> - <li>はがきの<a href="https://developer.mozilla.org/files/4151/background.jpg" title="The postcard background">背景</a> — この画像をダウンロードして作業している HTML ファイルと同じディレクトリーに保存します。</li> + <li>はがきの<a href="/files/4151/background.jpg" title="The postcard background">背景</a> — この画像をダウンロードして作業している HTML ファイルと同じディレクトリーに保存します。</li> <li>タイプライター風フォント: <a href="http://www.fontsquirrel.com/fonts/Secret-Typewriter" rel="external">fontsquirrel.com の "Secret Typewriter" </a> — TTF ファイルを上記と同じディレクトリーにダウンロードします。</li> <li>手書き風フォント: <a href="http://www.fontsquirrel.com/fonts/Journal" rel="external">fontsquirrel.com の "Journal" </a> — TTF ファイルを上記と同じディレクトリーにダウンロードします。</li> </ol> @@ -216,7 +216,7 @@ legend { <li>fontsquirrel <a href="https://www.fontsquirrel.com/tools/webfont-generator">Webfont Generator</a> に移動します。</li> <li>フォームを使って、両方のフォントファイルをアップロードして webfont キットを生成します。キットをコンピューターにダウンロードします。</li> <li>zip ファイルを展開します。</li> - <li>展開した中身には 2 つの <code>.woff</code> ファイルと 2 つの <code>.woff2</code> ファイルがあります。このファイルを、前と同じ fonts というディレクトリーにコピーします。各フォントの 2 つのファイルはブラウザー互換性を最大化するのに使います; より詳しい情報は <a href="https://developer.mozilla.org/ja/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a> の記事を見てください。</li> + <li>展開した中身には 2 つの <code>.woff</code> ファイルと 2 つの <code>.woff2</code> ファイルがあります。このファイルを、前と同じ fonts というディレクトリーにコピーします。各フォントの 2 つのファイルはブラウザー互換性を最大化するのに使います; より詳しい情報は <a href="/ja/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a> の記事を見てください。</li> </ol> <h3 id="The_CSS" name="The_CSS">CSS</h3> @@ -364,7 +364,7 @@ button:focus { <h2 id="スキルを試しましょう！"><strong>スキルを試しましょう！</strong></h2> -<p>この記事の終わりまで到達しました。しかし、肝要な点を思い起こせるでしょうか？次に進む前に、テストによって知識の定着を試すことができます——<a href="/en-US/docs/Learn/Forms/Test_your_skills:_Styling_basics">スキルテスト：スタイリングの基本</a>をご覧ください。</p> +<p>この記事の終わりまで到達しました。しかし、肝要な点を思い起こせるでしょうか？次に進む前に、テストによって知識の定着を試すことができます——<a href="/ja/docs/Learn/Forms/Test_your_skills:_Styling_basics">スキルテスト：スタイリングの基本</a>をご覧ください。</p> <h2 id="Conclusion" name="Conclusion">まとめ</h2> @@ -386,7 +386,7 @@ button:focus { <li><a href="/ja/docs/Learn/Forms/Advanced_form_styling">フォームへの高度なスタイル設定</a></li> <li><a href="/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> <li><a href="/ja/docs/Learn/Forms/Form_validation">フォームデータの検証</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> </ul> <h3 class="highlight-spanned" id="Advanced_Topics" name="Advanced_Topics"><span class="highlight-span">上級トピック</span></h3> diff --git a/files/ja/learn/forms/ui_pseudo-classes/index.html b/files/ja/learn/forms/ui_pseudo-classes/index.html index 5c1bbda5cf..41426b5074 100644 --- a/files/ja/learn/forms/ui_pseudo-classes/index.html +++ b/files/ja/learn/forms/ui_pseudo-classes/index.html @@ -589,7 +589,7 @@ input:default ~ span::after { <h2 id="Test_your_skills!">Test your skills!</h2> -<p>You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/Forms/Test_your_skills:_Advanced_styling">Test your skills: Advanced styling</a>.</p> +<p>You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/ja/docs/Learn/Forms/Test_your_skills:_Advanced_styling">Test your skills: Advanced styling</a>.</p> <h2 id="Summary" name="Summary">まとめ</h2> @@ -600,16 +600,16 @@ input:default ~ span::after { <h2 id="In_this_module" name="In_this_module">このモジュール</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> <li><a class="external" href="/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> <li><a class="external" href="/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> <li><a class="external" href="/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> </ul> <h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> diff --git a/files/ja/learn/forms/your_first_form/index.html b/files/ja/learn/forms/your_first_form/index.html index 24e638b9e1..a5878e3ce8 100644 --- a/files/ja/learn/forms/your_first_form/index.html +++ b/files/ja/learn/forms/your_first_form/index.html @@ -275,7 +275,7 @@ button { ... </pre> -<p>この例では、フォームはそれぞれ "<code>user_name</code>"、"<code>user_email</code>"、"<code>user_message</code>" と名付けられた 3 つのデータを送信します。これらのデータは URL "<code>/my-handling-form-page</code>" へ、<a href="https://developer.mozilla.org/ja/docs/Web/HTTP/Methods/POST">HTTP <code>POST</code></a> メソッドで送信します。</p> +<p>この例では、フォームはそれぞれ "<code>user_name</code>"、"<code>user_email</code>"、"<code>user_message</code>" と名付けられた 3 つのデータを送信します。これらのデータは URL "<code>/my-handling-form-page</code>" へ、<a href="/ja/docs/Web/HTTP/Methods/POST">HTTP <code>POST</code></a> メソッドで送信します。</p> <p>サーバー側では URL "<code>/my-handling-form-page</code>" のスクリプトが、HTTP リクエストに埋め込まれた 3 つのキーおよび値のアイテムリストとしてデータを受け取ります。スクリプトがデータを処理する方法は、あなた次第です。各サーバーサイド言語 (PHP、Python、Ruby、Java、C# など) は、これらのデータを扱う仕組みを持っています。これは本ガイドで踏み込んでいく範囲を超えますが、詳しく知りたい場合は<a href="/ja/docs/HTML/Forms/Sending_and_retrieving_form_data" title="HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信と取得</a>の記事にサンプルを載せていますのでご覧ください。</p> diff --git a/files/ja/learn/front-end_web_developer/index.html b/files/ja/learn/front-end_web_developer/index.html index 4889d72df8..60f4eb1d61 100644 --- a/files/ja/learn/front-end_web_developer/index.html +++ b/files/ja/learn/front-end_web_developer/index.html @@ -28,13 +28,13 @@ translation_of: Learn/Front-end_web_developer <p>このコースを始めるにあたり前提知識は必要ありません。必要なのはモダンなブラウザが動作するコンピュータ、インターネット接続、学びたいという意欲だけです。</p> -<p>フロントエンドウェブ開発が自分に適しているかわからなく､易しい説明が必要な場合はこの時間がかかる完全なコースを始める前に､<a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">ウェブサイト学習の最初のステップ</a>を読んでください｡</p> +<p>フロントエンドウェブ開発が自分に適しているかわからなく､易しい説明が必要な場合はこの時間がかかる完全なコースを始める前に､<a href="/ja/docs/Learn/Getting_started_with_the_web">ウェブサイト学習の最初のステップ</a>を読んでください｡</p> <h2 id="学習につまずいたら">学習につまずいたら</h2> <p>私たちは、フロントエンドウェブ開発の学習が少しでもやさしくなるよう努力してきました。それでも、何か理解できないことあったり、コードが動かなかったりして、学習につまずくことがあるでしょう。</p> -<p>落ち着いて下さい。プロの開発者でも初心者でも、誰にだって学習でつまづくことはあります。<a href="/en-US/docs/Learn/Learning_and_getting_help">学習とヘルプ（English）</a> では情報を検索する際のヒントなど一連の有益な情報を提供しています。依然として学習につまずいているなら <a href="https://discourse.mozilla.org/c/mdn/learn/">Discourse forum</a> で気軽に質問して見て下さい。</p> +<p>落ち着いて下さい。プロの開発者でも初心者でも、誰にだって学習でつまづくことはあります。<a href="/ja/docs/Learn/Learning_and_getting_help">学習とヘルプ（English）</a> では情報を検索する際のヒントなど一連の有益な情報を提供しています。依然として学習につまずいているなら <a href="https://discourse.mozilla.org/c/mdn/learn/">Discourse forum</a> で気軽に質問して見て下さい。</p> <p>さあ、始めましょう。幸運を！</p> @@ -55,9 +55,9 @@ translation_of: Learn/Front-end_web_developer <p>中心となるモジュール</p> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a><a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software"> </a>— 基本的なツールのステップアップ (15 分で読めます)</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">標準的なウェブとウェブのバックグラウンド</a> (45 分で読めます)</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Learning_and_getting_help">学習とヘルプ（English）</a> (45 分で読めます)</li> + <li><a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a><a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software"> </a>— 基本的なツールのステップアップ (15 分で読めます)</li> + <li><a href="/ja/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">標準的なウェブとウェブのバックグラウンド</a> (45 分で読めます)</li> + <li><a href="/ja/docs/Learn/Learning_and_getting_help">学習とヘルプ（English）</a> (45 分で読めます)</li> </ul> <h3 id="HTML（意味付けと構造）">HTML（意味付けと構造）</h3> @@ -75,9 +75,9 @@ translation_of: Learn/Front-end_web_developer <h4 id="中心となるモジュール">中心となるモジュール</h4> <ul> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML の紹介</a> (15–20 時間の学習)</li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">動的コンテンツ（映像や音楽）の埋め込み</a> (15–20 時間の学習)</li> - <li><a href="/en-US/docs/Learn/HTML/Tables">HTML の表</a> (5–10 時間の学習)</li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の紹介</a> (15–20 時間の学習)</li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding">動的コンテンツ（映像や音楽）の埋め込み</a> (15–20 時間の学習)</li> + <li><a href="/ja/docs/Learn/HTML/Tables">HTML の表</a> (5–10 時間の学習)</li> </ul> <h3 id="CSS（スタイルとレイアウト）">CSS（スタイルとレイアウト）</h3> @@ -86,7 +86,7 @@ translation_of: Learn/Front-end_web_developer <h4 id="前提知識_4">前提知識</h4> -<p>CSS の学習を始める前に HTML の基本的な知識を身につけておくことを推奨します｡少なくとも <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML の紹介</a> は読んでおきましょう｡</p> +<p>CSS の学習を始める前に HTML の基本的な知識を身につけておくことを推奨します｡少なくとも <a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の紹介</a> は読んでおきましょう｡</p> <h4 id="学習を進めるための条件_3">学習を進めるための条件</h4> @@ -162,8 +162,8 @@ translation_of: Learn/Front-end_web_developer <h4 id="中心となるモジュール_5">中心となるモジュール</h4> <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross-browser testing</a> (25–30 時間の学習)</li> - <li><a href="/en-US/docs/Learn/Accessibility">Accessibility</a> (20–25 時間の学習)</li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross-browser testing</a> (25–30 時間の学習)</li> + <li><a href="/ja/docs/Learn/Accessibility">Accessibility</a> (20–25 時間の学習)</li> </ul> <h3 id="モダンなツール">モダンなツール</h3> @@ -181,10 +181,10 @@ translation_of: Learn/Front-end_web_developer <h4 id="中心となるモジュール_6">中心となるモジュール</h4> <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/GitHub">Git and GitHub</a> (5 時間の記事)</li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">Understanding client-side web development tools</a> (20–25 時間の記事)</li> + <li><a href="/ja/docs/Learn/Tools_and_testing/GitHub">Git and GitHub</a> (5 時間の記事)</li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools">Understanding client-side web development tools</a> (20–25 時間の記事)</li> <li> - <p><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">Understanding client-side JavaScript frameworks</a> (30-60 時間の学習)</p> + <p><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">Understanding client-side JavaScript frameworks</a> (30-60 時間の学習)</p> </li> </ul> diff --git a/files/ja/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/ja/learn/getting_started_with_the_web/dealing_with_files/index.html index cdc3e3a336..9a209a83c4 100644 --- a/files/ja/learn/getting_started_with_the_web/dealing_with_files/index.html +++ b/files/ja/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -17,7 +17,7 @@ translation_of: Learn/Getting_started_with_the_web/Dealing_with_files <div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div> <div class="summary"> -<p>Web サイトは、テキストコンテンツ、コード、スタイルシート、メディアコンテンツなど、多くのファイルで構成されています。Web サイトを構築するときは、これらのファイルをローカルコンピュータ上の合理的な構造に組み立て、互いに呼び出すことができるようにして、最終的に<a href="/Learn/Getting_started_with_the_web/Publishing_your_website">サーバにアップロード</a>する前に、すべてのコンテンツを正しいものにする必要があります。<em>ファイルの扱い</em>では、Web サイトに合理的なファイル構造を設定できるように、注意すべきいくつかの問題について説明します。</p> +<p>Web サイトは、テキストコンテンツ、コード、スタイルシート、メディアコンテンツなど、多くのファイルで構成されています。Web サイトを構築するときは、これらのファイルをローカルコンピュータ上の合理的な構造に組み立て、互いに呼び出すことができるようにして、最終的に<a href="/ja/docs/Learn/Getting_started_with_the_web/Publishing_your_website">サーバにアップロード</a>する前に、すべてのコンテンツを正しいものにする必要があります。<em>ファイルの扱い</em>では、Web サイトに合理的なファイル構造を設定できるように、注意すべきいくつかの問題について説明します。</p> </div> <h2 id="Where_should_your_website_live_on_your_computer" name="Where_should_your_website_live_on_your_computer">コンピュータ上で Web サイトがあるべき場所</h2> diff --git a/files/ja/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/ja/learn/getting_started_with_the_web/installing_basic_software/index.html index f8432d7d97..ae288951e3 100644 --- a/files/ja/learn/getting_started_with_the_web/installing_basic_software/index.html +++ b/files/ja/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -62,7 +62,7 @@ translation_of: Learn/Getting_started_with_the_web/Installing_basic_software <h3 id="Installing_a_local_web_server" name="Installing_a_local_web_server">ローカルの Web サーバーのインストール</h3> -<p>いくつかの例では、動作を成功させるのに Web サーバーでの実行が必要です。<a href="https://developer.mozilla.org/ja/docs/Learn/Common_questions/set_up_a_local_testing_server">ローカルテストサーバーのインストール方法</a>にて、その方法が見つかります。</p> +<p>いくつかの例では、動作を成功させるのに Web サーバーでの実行が必要です。<a href="/ja/docs/Learn/Common_questions/set_up_a_local_testing_server">ローカルテストサーバーのインストール方法</a>にて、その方法が見つかります。</p> <p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/ja/learn/html/index.html b/files/ja/learn/html/index.html index fa11f9e2b9..9b06c50ce2 100644 --- a/files/ja/learn/html/index.html +++ b/files/ja/learn/html/index.html @@ -21,35 +21,35 @@ translation_of: Learn/HTML <h2 id="Learning_pathway" name="Learning_pathway">学習経路</h2> -<p>HTML 学習を学びの旅の起点にすることが理想的です。<a href="/docs/Web/Guide/HTML/Introduction">HTML 概論</a>を読んでみましょう。さらに学びたいと思ったなら、次は以下のような内容に移ることになるでしょう。</p> +<p>HTML 学習を学びの旅の起点にすることが理想的です。<a href="/ja/docs/Web/Guide/HTML/Introduction">HTML 概論</a>を読んでみましょう。さらに学びたいと思ったなら、次は以下のような内容に移ることになるでしょう。</p> <ul> - <li><a href="/docs/Learn/CSS">CSS</a>、またそれを用いて、どうやって HTML の様式を整えるか。(例えば、文字の様式やサイズを適用したり、線で囲んだり、影をつけたり、ページをカラムでレイアウトしたり、アニメをつけたりすることができます。）</li> - <li><a href="/docs/Learn/JavaScript">JavaScript</a>、またそれを用いて、ウェブページをいかにして動的な機能を付け加えるか。(例えば、地図上にあなたの位置をプロットしたり、UI エレメントをボタン操作で、現れるようにしたり、隠すようにしたり、コンピュータ上にユーザーのデータを保存したり、その他いろいろなことができます。）</li> + <li><a href="/ja/docs/Learn/CSS">CSS</a>、またそれを用いて、どうやって HTML の様式を整えるか。(例えば、文字の様式やサイズを適用したり、線で囲んだり、影をつけたり、ページをカラムでレイアウトしたり、アニメをつけたりすることができます。）</li> + <li><a href="/ja/docs/Learn/JavaScript">JavaScript</a>、またそれを用いて、ウェブページをいかにして動的な機能を付け加えるか。(例えば、地図上にあなたの位置をプロットしたり、UI エレメントをボタン操作で、現れるようにしたり、隠すようにしたり、コンピュータ上にユーザーのデータを保存したり、その他いろいろなことができます。）</li> </ul> -<p>このトピックを開始する前に、最低限コンピュータを利用することに慣れておくべきでしょう。また、ウェブを受け手の側から、利用すること（つまり、ただ見たり、コンテンツを消費したりすること）にも慣れておくべきでしょう。また基本的な作業環境のセットアップもしておくべきでしょう。細かい話は、 <a href="/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアをインストールする</a>や、 <a href="/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルを扱う</a>に書かれています。今あげた二つの内容は、<a href="/docs/Learn/Getting_started_with_the_web">Web 入門</a>という初心者向けの章に含まれています。</p> +<p>このトピックを開始する前に、最低限コンピュータを利用することに慣れておくべきでしょう。また、ウェブを受け手の側から、利用すること（つまり、ただ見たり、コンテンツを消費したりすること）にも慣れておくべきでしょう。また基本的な作業環境のセットアップもしておくべきでしょう。細かい話は、 <a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアをインストールする</a>や、 <a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルを扱う</a>に書かれています。今あげた二つの内容は、<a href="/ja/docs/Learn/Getting_started_with_the_web">Web 入門</a>という初心者向けの章に含まれています。</p> -<p>今回のトピックに入る前に、 <a href="/docs/Learn/Getting_started_with_the_web">ウェブ入門</a>を一読しておくことをお薦めします。けれども、絶対にそうしておく必要があるというわけではありません。 <a href="/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基礎</a>の記事でカバーされている大体の内容は、 <a href="/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a>の記事でもカバーされています。ただこちらのほうが、より詳細な記事になっています。</p> +<p>今回のトピックに入る前に、 <a href="/ja/docs/Learn/Getting_started_with_the_web">ウェブ入門</a>を一読しておくことをお薦めします。けれども、絶対にそうしておく必要があるというわけではありません。 <a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基礎</a>の記事でカバーされている大体の内容は、 <a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a>の記事でもカバーされています。ただこちらのほうが、より詳細な記事になっています。</p> <h2 id="Modules" name="Modules">モジュール</h2> <p>このトピックは、以下の内容を含んでいます。そして、それらは、学んでいくのに好ましい順番で並んでいます。上から順番に学んでいくのが望ましいでしょう。</p> <dl> - <dt><a href="/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a></dt> + <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a></dt> <dd>この章では、土台作りをします。ここで、あなたはHTMLの重要な概念や構文に慣れたり、HTML を文章に適用していくのを見たり、どうやってハイパーリンクができるのか、HTML がウェブページを作るためにどのように利用されるのかを学ぶことになります。</dd> - <dt><a href="/docs/Learn/HTML/Multimedia_and_embedding">マルチメディアと埋め込み</a></dt> + <dt><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding">マルチメディアと埋め込み</a></dt> <dd>この章では、 HTML を使ってどうやったら、あなたのウェブページにマルチメディアを導入できるかを学びます。画像を取り込むためのいくつかのやり方、ビデオや音声、さらに、ウェブページそのものを埋め込む方法もここで学びます。</dd> - <dt><a href="/docs/Learn/HTML/Tables">HTML 表</a></dt> + <dt><a href="/ja/docs/Learn/HTML/Tables">HTML 表</a></dt> <dd>ウェブページ上の表形式のデータを理解しやすく{{glossary("Accessibility", "アクセスしやすい")}}方法で表現することは難しいことです。このモジュールでは、基本的な表のマークアップと、キャプションやサマリーの実装などのより複雑な機能をカバーしています。</dd> - <dt><a href="/docs/Learn/HTML/Forms">HTML フォーム</a></dt> + <dt><a href="/ja/docs/Learn/HTML/Forms">HTML フォーム</a></dt> <dd>フォームはウェブのとても重要な部分です。これらはウェブサイトとのやりとりに必要な多くの機能を提供します。登録とログイン、フィードバックの送信、商品の購入などが含まれます。このモジュールでは、フォームのクライアント側部分の作成を始めます。</dd> </dl> <h2 id="Solving_common_HTML_problems" name="Solving_common_HTML_problems">よくある HTML の問題の解決</h2> -<p><a href="/docs/Learn/HTML/Howto">共通の問題解決に HTML を使う</a> 「基本的な問題を解決するために HTML を使う」では、ウェブページを作った時に出てくる一般的な問題をどうやって解決するかを説明するためのコンテンツのセクションへのリンクを提示します。タイトルの扱い方や、画像やビデオを加えたり、コンテンツを強調したり、基本的なフォームを作ったりします。</p> +<p><a href="/ja/docs/Learn/HTML/Howto">共通の問題解決に HTML を使う</a> 「基本的な問題を解決するために HTML を使う」では、ウェブページを作った時に出てくる一般的な問題をどうやって解決するかを説明するためのコンテンツのセクションへのリンクを提示します。タイトルの扱い方や、画像やビデオを加えたり、コンテンツを強調したり、基本的なフォームを作ったりします。</p> <h2 id="See_also" name="See_also">関連情報</h2> diff --git a/files/ja/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/ja/learn/html/introduction_to_html/advanced_text_formatting/index.html index 0ceb370e9e..88b84975b4 100644 --- a/files/ja/learn/html/introduction_to_html/advanced_text_formatting/index.html +++ b/files/ja/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -18,7 +18,7 @@ translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting <div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</div> -<p class="summary">テキストの書式設定のための HTML には他にも多くの要素がありますが、これは <a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a> には書かれていません。この記事で説明されている要素はあまり知られていませんが、知っていると役に立ちます。（これはまだいかなる意味でも完全なリストではありません）。ここでは、注釈、説明リスト、コンピューターコードとその他の関連テキスト、下付き文字と上付き文字、連絡先情報などのマーキングについて学習します。</p> +<p class="summary">テキストの書式設定のための HTML には他にも多くの要素がありますが、これは <a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a> には書かれていません。この記事で説明されている要素はあまり知られていませんが、知っていると役に立ちます。（これはまだいかなる意味でも完全なリストではありません）。ここでは、注釈、説明リスト、コンピューターコードとその他の関連テキスト、下付き文字と上付き文字、連絡先情報などのマーキングについて学習します。</p> <table class="learn-box standard-table"> <tbody> diff --git a/files/ja/learn/html/introduction_to_html/debugging_html/index.html b/files/ja/learn/html/introduction_to_html/debugging_html/index.html index 24c4e6c4d3..d69d476ed3 100644 --- a/files/ja/learn/html/introduction_to_html/debugging_html/index.html +++ b/files/ja/learn/html/introduction_to_html/debugging_html/index.html @@ -173,13 +173,13 @@ translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML <h2 id="このモジュール">このモジュール</h2> <ul> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> </ul> diff --git a/files/ja/learn/html/introduction_to_html/getting_started/index.html b/files/ja/learn/html/introduction_to_html/getting_started/index.html index 6cfcea234e..606d87f393 100644 --- a/files/ja/learn/html/introduction_to_html/getting_started/index.html +++ b/files/ja/learn/html/introduction_to_html/getting_started/index.html @@ -23,7 +23,7 @@ translation_of: Learn/HTML/Introduction_to_HTML/Getting_started <tbody> <tr> <th scope="row">前提条件:</th> - <td>基礎的なコンピュータリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイル取扱い</a>の基礎理解。</td> + <td>基礎的なコンピュータリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイル取扱い</a>の基礎理解。</td> </tr> <tr> <th scope="row">目的:</th> @@ -217,7 +217,7 @@ textarea<span class="punctuation token">.</span>onkeyup <span class="operator to <p>fourth</p><p>fifth</p><p>sixth</p> </pre> -<p>{{htmlelement("em")}} 要素はインライン要素なので、以下で確認できるように、最初の 3 つの要素は同じ行で他の要素と互いにスペースを空けずにたたずんでいます。一方で、{{htmlelement("p")}} 要素はブロックレベル要素なので、各要素はその上下にスペースを伴った新たな行で表示されます (この間隔はブラウザーが段落に対して適用するデフォルトの <a href="/docs/Learn/CSS/Introduction_to_CSS">CSS のスタイル</a>によるものです)。</p> +<p>{{htmlelement("em")}} 要素はインライン要素なので、以下で確認できるように、最初の 3 つの要素は同じ行で他の要素と互いにスペースを空けずにたたずんでいます。一方で、{{htmlelement("p")}} 要素はブロックレベル要素なので、各要素はその上下にスペースを伴った新たな行で表示されます (この間隔はブラウザーが段落に対して適用するデフォルトの <a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS のスタイル</a>によるものです)。</p> <p>{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "") }}</p> @@ -226,11 +226,11 @@ textarea<span class="punctuation token">.</span>onkeyup <span class="operator to </div> <div class="note"> -<p><strong>注意</strong>: このトピックで使っている “ブロック” と “インライン” の用語は <a href="https://developer.mozilla.org/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">CSS ボックスのタイプ</a>と同じ名前で混同するでしょう。既定ではこれらは関係ありますが、CSS の表示タイプの変更は要素のカテゴリーを変更しませんし、どの要素が入っているべきでどの要素に入れられるべきかにも影響しません。HTML5 でこの用語が落とされた理由は、このとてもよくある混同を防ぐためです。</p> +<p><strong>注意</strong>: このトピックで使っている “ブロック” と “インライン” の用語は <a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">CSS ボックスのタイプ</a>と同じ名前で混同するでしょう。既定ではこれらは関係ありますが、CSS の表示タイプの変更は要素のカテゴリーを変更しませんし、どの要素が入っているべきでどの要素に入れられるべきかにも影響しません。HTML5 でこの用語が落とされた理由は、このとてもよくある混同を防ぐためです。</p> </div> <div class="note"> -<p><strong>注意</strong>: ブロックレベル要素とインライン要素のリストを含む有用なリファレンスページがあります — <a href="/docs/Web/HTML/Block-level_elements">ブロックレベル要素</a>と<a href="/docs/Web/HTML/Inline_elements">インライン要素</a>をご覧ください。</p> +<p><strong>注意</strong>: ブロックレベル要素とインライン要素のリストを含む有用なリファレンスページがあります — <a href="/ja/docs/Web/HTML/Block-level_elements">ブロックレベル要素</a>と<a href="/ja/docs/Web/HTML/Inline_elements">インライン要素</a>をご覧ください。</p> </div> <h3 id="Empty_elements" name="Empty_elements">空要素</h3> @@ -526,8 +526,8 @@ textarea<span class="punctuation token">.</span>onkeyup <span class="operator to <li>{{htmlelement("body")}} 要素の開始タグ以降にページのメインタイトルを書きます。このメインタイトルは <code><h1></code> 開始タグと <code></h1></code> 終了タグで囲みます。ちなみにこれは <code>head</code> 要素の中に記述する <code>title</code> 要素とは異なります。実際にやってみると理解できると思います。フォームで編集する場合はすでに <code>body</code> 要素の中なので、コードの先頭にメインタイトルを記述する形になります。</li> <li>すでに<code><p></code>要素が記述されていますので、その段落を好きな内容にしてみましょう。また、新しい段落を好きなように追加してみましょう。</li> <li>段落 (<code><p></code>要素) 内で重要な言葉は <code><strong></code> 開始タグと <code></strong></code> 終了タグで囲んで太字で強調しましょう。 </li> - <li><a href="https://developer.mozilla.org/ja/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">この記事の前半あたり</a>で説明したリンクを段落のどれかに張ってみましょう。</li> - <li><a href="https://developer.mozilla.org/ja/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">この記事の前半あたり</a>で説明した方法を使って、段落の下に画像を挿入しましょう。説明では Firefox のロゴ画像を使用しましたが、他の画像を持ってくることにチャレンジしてもいいと思います。自分のコンピューターの中のファイルやウェブ上のどこか他の場所にある画像リンクといったものです。</li> + <li><a href="/ja/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">この記事の前半あたり</a>で説明したリンクを段落のどれかに張ってみましょう。</li> + <li><a href="/ja/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">この記事の前半あたり</a>で説明した方法を使って、段落の下に画像を挿入しましょう。説明では Firefox のロゴ画像を使用しましたが、他の画像を持ってくることにチャレンジしてもいいと思います。自分のコンピューターの中のファイルやウェブ上のどこか他の場所にある画像リンクといったものです。</li> </ul> <p>間違えた場合は <em>Reset</em> ボタンを押すことで元に戻すことができます。分からない場合は Show solution ボタンを押して答えを見てみましょう。</p> @@ -774,13 +774,13 @@ textarea<span class="punctuation token">.</span>onkeyup <span class="operator to <h2 id="In_this_module" name="In_this_module">このモジュール内</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 入門</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Head とは？HTML のメタデータ</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクを作成する</a></li> - <li><a class="new" href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting" rel="nofollow">上級のテキスト整形</a></li> - <li><a class="new" href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure" rel="nofollow">ドキュメントとウェブサイトの構造</a></li> - <li><a class="new" href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML" rel="nofollow">HTML をデバッグする</a></li> - <li><a class="new" href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter" rel="nofollow">手紙をマークアップする</a></li> - <li><a class="new" href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content" rel="nofollow">コンテンツページを構造化する</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 入門</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Head とは？HTML のメタデータ</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクを作成する</a></li> + <li><a class="new" href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting" rel="nofollow">上級のテキスト整形</a></li> + <li><a class="new" href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure" rel="nofollow">ドキュメントとウェブサイトの構造</a></li> + <li><a class="new" href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML" rel="nofollow">HTML をデバッグする</a></li> + <li><a class="new" href="/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter" rel="nofollow">手紙をマークアップする</a></li> + <li><a class="new" href="/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content" rel="nofollow">コンテンツページを構造化する</a></li> </ul> diff --git a/files/ja/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/ja/learn/html/introduction_to_html/marking_up_a_letter/index.html index 055a2afb5d..18dac36362 100644 --- a/files/ja/learn/html/introduction_to_html/marking_up_a_letter/index.html +++ b/files/ja/learn/html/introduction_to_html/marking_up_a_letter/index.html @@ -93,13 +93,13 @@ translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter <h2 id="このモジュール">このモジュール</h2> <ul> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> </ul> diff --git a/files/ja/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/ja/learn/html/introduction_to_html/structuring_a_page_of_content/index.html index b434a3fea4..cda4e6dce0 100644 --- a/files/ja/learn/html/introduction_to_html/structuring_a_page_of_content/index.html +++ b/files/ja/learn/html/introduction_to_html/structuring_a_page_of_content/index.html @@ -95,13 +95,13 @@ translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content <h2 id="このモジュール">このモジュール</h2> <ul> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> </ul> diff --git a/files/ja/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/ja/learn/html/introduction_to_html/the_head_metadata_in_html/index.html index 7fb1f1101f..cc6c302386 100644 --- a/files/ja/learn/html/introduction_to_html/the_head_metadata_in_html/index.html +++ b/files/ja/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -138,7 +138,7 @@ started with developing web sites and applications."></pre> <p>description は検索エンジンの結果ページにも使われます。練習でこれを見ていきましょう。</p> <ol> - <li><a href="https://developer.mozilla.org/ja/">Mozilla Developer Network のフロントページ</a>に移動します。</li> + <li><a href="/ja/">Mozilla Developer Network のフロントページ</a>に移動します。</li> <li>ページのソースを見ます (ページ上で右クリックまたは <kbd>Ctrl</kbd> を押しながらクリックして、コンテキストメニューからページのソースを表示を選びます)。</li> <li>description の meta タグを見てみます。それはこのようなものです。 <pre class="brush: html notranslate"><meta name="description" content="The MDN Web Docs site diff --git a/files/ja/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/ja/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html index 3431a47258..a9da4a7f7b 100644 --- a/files/ja/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html +++ b/files/ja/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html @@ -158,7 +158,7 @@ background-size: contain;</code></pre> <h3 id="How_to_include_SVG_code_inside_your_HTML" name="How_to_include_SVG_code_inside_your_HTML">HTML の中に SVG コードを組み込む方法</h3> -<p>テキストエディターで SVG ファイルを開き、 SVG コードをコピーして HTML 文書に貼り付けることもできます。 これは、<strong>SVG をインラインにする</strong>、または <strong>SVG をインライン化する</strong>とも呼ばれます。 SVG コードスニペットは、{{svgelement("svg")}} タグで始まり、 <code><a href="/en-US/docs/Web/SVG/Element/svg"><svg></svg></a></code> タグで終わることを確認してください (これら以外のものは含めないでください)。文書に貼り付けることのできる簡単な例を次に示します。</p> +<p>テキストエディターで SVG ファイルを開き、 SVG コードをコピーして HTML 文書に貼り付けることもできます。 これは、<strong>SVG をインラインにする</strong>、または <strong>SVG をインライン化する</strong>とも呼ばれます。 SVG コードスニペットは、{{svgelement("svg")}} タグで始まり、 <code><a href="/ja/docs/Web/SVG/Element/svg"><svg></svg></a></code> タグで終わることを確認してください (これら以外のものは含めないでください)。文書に貼り付けることのできる簡単な例を次に示します。</p> <pre class="brush: html notranslate"><svg width="300" height="200"> <rect width="100%" height="100%" fill="green" /> diff --git a/files/ja/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/ja/learn/html/multimedia_and_embedding/video_and_audio_content/index.html index 205d7b7027..68119aa7c0 100644 --- a/files/ja/learn/html/multimedia_and_embedding/video_and_audio_content/index.html +++ b/files/ja/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -246,7 +246,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p><img alt='再生、停止、音量、キャプションのオン/オフなどのスタンドコントロールを備えたビデオプレーヤー。 動画の再生には、槍のような武器を持つ男のシーンが表示され、キャプションには "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>詳しくは、<a href="https://developer.mozilla.org/ja/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">HTML5 動画にキャプションと字幕を追加する</a>をご覧ください。Github には Ian Devlin によって書かれた<a href="http://iandevlin.github.io/mdn/video-player-with-captions/">この記事の例</a>があります (<a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">ソースコード</a>も参照してください)。この例では、JavaScript を使用してさまざまな字幕を選択できるようにしています。字幕をオンにするには、[CC] ボタンを押して、英語、ドイツ語、スペイン語のオプションを選択する必要があります。</p> +<p>詳しくは、<a href="/ja/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">HTML5 動画にキャプションと字幕を追加する</a>をご覧ください。Github には Ian Devlin によって書かれた<a href="http://iandevlin.github.io/mdn/video-player-with-captions/">この記事の例</a>があります (<a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">ソースコード</a>も参照してください)。この例では、JavaScript を使用してさまざまな字幕を選択できるようにしています。字幕をオンにするには、[CC] ボタンを押して、英語、ドイツ語、スペイン語のオプションを選択する必要があります。</p> <div class="note"> <p><strong>メモ</strong>: テキストトラックは検索エンジンが特にテキスト上で成功するため、{{glossary("SEO")}} にも役立ちます。テキストトラックを使用すると、検索エンジンは動画の途中地点に直接リンクすることもできます。</p> @@ -281,7 +281,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <li>{{htmlelement("video")}}</li> <li>{{htmlelement("source")}}</li> <li>{{htmlelement("track")}}</li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">HTML5 の動画へのキャプションと字幕の追加</a></li> + <li><a href="/ja/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">HTML5 の動画へのキャプションと字幕の追加</a></li> <li><a href="/ja/docs/Web/Guide/Audio_and_video_delivery">音声と動画の配信</a>: HTML と JavaScript を使用して音声と動画をWebページに配置することに関する詳細。</li> <li><a href="/ja/docs/Web/Guide/Audio_and_video_manipulation">音声と動画の加工</a>: JavaScript を使用して音声や動画を操作する方法について詳しく説明します (たとえばフィルタを追加するなど)。</li> <li><a href="http://www.inwhatlanguage.com/blog/translate-video-audio/">マルチメディアを翻訳する</a>ための自動オプション。(英語)</li> diff --git a/files/ja/learn/html/tables/basics/index.html b/files/ja/learn/html/tables/basics/index.html index ec37b6ad39..e08aeb43da 100644 --- a/files/ja/learn/html/tables/basics/index.html +++ b/files/ja/learn/html/tables/basics/index.html @@ -361,7 +361,7 @@ translation_of: Learn/HTML/Tables/Basics <ol> <li>まず、あなたのローカルマシンの新しいディレクトリに <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html">dogs-table.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> ファイルのローカルコピーを作ります。HTML には、上で見たのと同じ Dogs の例が含まれています。</li> - <li>テーブルのヘッダを視覚的にも意味的にもヘッダとして認識させるには、<strong><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th"><th></a></code></strong> 要素を使用します ('th' は 'table header' を表します)。これは <code><td></code> とまったく同じように機能しますが、通常のセルではなくヘッダーを表す点が異なります。HTML を開き、テーブルのヘッダを囲む全ての <code><td></code> 要素を <code><th></code> 要素に変更してください。</li> + <li>テーブルのヘッダを視覚的にも意味的にもヘッダとして認識させるには、<strong><code><a href="/ja/docs/Web/HTML/Element/th"><th></a></code></strong> 要素を使用します ('th' は 'table header' を表します)。これは <code><td></code> とまったく同じように機能しますが、通常のセルではなくヘッダーを表す点が異なります。HTML を開き、テーブルのヘッダを囲む全ての <code><td></code> 要素を <code><th></code> 要素に変更してください。</li> <li>HTML を保存してブラウザにロードすると、ヘッダーがヘッダーらしく見えます。</li> </ol> @@ -459,7 +459,7 @@ translation_of: Learn/HTML/Tables/Basics <h2 id="Providing_common_styling_to_columns" name="Providing_common_styling_to_columns">列への共通のスタイル付け</h2> <p><span class="tlid-translation translation" lang="ja"><span title="">先に進む前に、この記事で最後に紹介する機能があります。</span><br> - <span title="">HTML では、データの列全体のスタイル情報を1か所にまとめて定義することができます</span></span> — <strong><code><a href="/ja/docs/Web/HTML/Element/col"><col></a></code></strong> <span class="tlid-translation translation" lang="ja"><span title="">要素と</span></span> <strong><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup"><colgroup></a></code></strong> <span class="tlid-translation translation" lang="ja"><span title="">要素です。</span><span title="">列にスタイルを指定するのは少々面倒で非効率的な場合があるためです。列内の</span></span> <code><td></code> <span class="tlid-translation translation" lang="ja"><span title="">や</span></span> <code><th></code> <span class="tlid-translation translation" lang="ja"><span title="">ごとにスタイル情報を指定するか、</span></span>{{cssxref(":nth-child()")}}<span class="tlid-translation translation" lang="ja"><span title=""> などの複雑なセレクタを使用する必要があります。</span></span></p> + <span title="">HTML では、データの列全体のスタイル情報を1か所にまとめて定義することができます</span></span> — <strong><code><a href="/ja/docs/Web/HTML/Element/col"><col></a></code></strong> <span class="tlid-translation translation" lang="ja"><span title="">要素と</span></span> <strong><code><a href="/ja/docs/Web/HTML/Element/colgroup"><colgroup></a></code></strong> <span class="tlid-translation translation" lang="ja"><span title="">要素です。</span><span title="">列にスタイルを指定するのは少々面倒で非効率的な場合があるためです。列内の</span></span> <code><td></code> <span class="tlid-translation translation" lang="ja"><span title="">や</span></span> <code><th></code> <span class="tlid-translation translation" lang="ja"><span title="">ごとにスタイル情報を指定するか、</span></span>{{cssxref(":nth-child()")}}<span class="tlid-translation translation" lang="ja"><span title=""> などの複雑なセレクタを使用する必要があります。</span></span></p> <p>次の簡単な例を見てください。</p> diff --git a/files/ja/learn/javascript/asynchronous/index.html b/files/ja/learn/javascript/asynchronous/index.html index f3b1c62242..adac4c607a 100644 --- a/files/ja/learn/javascript/asynchronous/index.html +++ b/files/ja/learn/javascript/asynchronous/index.html @@ -19,7 +19,7 @@ translation_of: Learn/JavaScript/Asynchronous <p>非同期 JavaScript はとても高度なトピックなので、事前に <a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>と <a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a>のモジュールに取り組んでおくことをおすすめします。</p> -<p>非同期プログラミングの概念に慣れていない場合は、間違いなくこのモジュールの <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a> から始めるべきです。慣れている場合は、<a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a> まで飛ばしていただいてもかまいません。</p> +<p>非同期プログラミングの概念に慣れていない場合は、間違いなくこのモジュールの <a href="/ja/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a> から始めるべきです。慣れている場合は、<a href="/ja/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a> まで飛ばしていただいてもかまいません。</p> <div class="note"> <p><strong>注記</strong>： ファイルを作成する手段のないコンピュータ・タブレット・その他のデバイスをお使いの場合、（ほとんどの）コード例は<a href="http://jsbin.com/"> JSBin</a> や<a href="https://thimble.mozilla.org/">Thimble</a> などのオンラインエディタでも試すことができます。</p> @@ -28,19 +28,19 @@ translation_of: Learn/JavaScript/Asynchronous <h2 id="ガイド">ガイド</h2> <dl> - <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></dt> + <dt><a href="/ja/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></dt> <dd> <p>この記事では、非同期プログラミングに関するいくつかの重要な概念を一通り確認し、それらがウェブブラウザや JavaScript でどう見えるかを確認します。このモジュールの他の記事に進む前に、それらの概念を理解しておいてください。</p> </dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></dt> + <dt><a href="/ja/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></dt> <dd>この記事では、同期 JavaScript にまつわる問題をざっと振り返り、これから遭遇するであろう、今までとは異なる非同期 JavaScript のテクニックをいくつか見てみます。そして、それらのテクニックがいかにして同期 JavaScript の問題を解決するかを確認します。</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Loops_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></dt> + <dt><a href="/ja/docs/Learn/JavaScript/Asynchronous/Loops_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></dt> <dd>ここでは、JavaScriptでコードを非同期〔一定時間が経過した時、もしくは、一定間隔（例えば1秒あたり何回）〕に実行する時に使う伝統的な手法を見てみます。そして、どんな場合に便利なのかを説明し、内在する問題を考察します。</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Handling async operations gracefully with Promises</a></dt> + <dt><a href="/ja/docs/Learn/JavaScript/Asynchronous/Promises">Handling async operations gracefully with Promises</a></dt> <dd>Promise は JavaScript の比較的新しい機能で、前の処理が完了するまでそれ以上の処理を先延ばしにしたり、その失敗に対処したりすることを可能にするものです。これは、一連の作業を正しく動作させるのに非常に便利です。この記事では、promise がどのように動作するか、WebAPIのどこで使われているか、そして、どうやって使うかを解説します。</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></dt> + <dt><a href="/ja/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></dt> <dd>Promise は構成したり理解したりするのにやや複雑であるため、モダンブラウザは <code>async</code> 関数と <code>await</code> 演算子を実装しています。前者は通常の関数が promise によって暗黙に非同期的に振る舞うことを可能にし、後者は <code>async</code> 関数内で処理が進む前に promise を待つことで、promise の連鎖を簡単にします。この記事では <code>async</code>/<code>await</code> を解説します。</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></dt> + <dt><a href="/ja/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></dt> <dd>このモジュールの最後に、別のコーディングテクニックとこれまで議論してきた機能を考察します。そして、推奨事項とよくある落とし穴への注意とともに、どれを・いつ・どこで使うのが適切なのかを検討します。</dd> </dl> diff --git a/files/ja/learn/javascript/building_blocks/events/index.html b/files/ja/learn/javascript/building_blocks/events/index.html index 6f2d31df5f..58aba9ea1c 100644 --- a/files/ja/learn/javascript/building_blocks/events/index.html +++ b/files/ja/learn/javascript/building_blocks/events/index.html @@ -137,7 +137,7 @@ btn.onclick = bgChange;</pre> <li><code><a href="/ja/docs/Web/API/GlobalEventHandlers/onmouseover">btn.onmouseover</a></code> と <code><a href="/ja/docs/Web/API/GlobalEventHandlers/onmouseout">btn.onmouseout</a></code> — マウスポインタがボタンの上に来たときとボタンの上から外れた時に色が変わります。</li> </ul> -<p>いくつかのイベントはとても汎用的なのでほとんどどこでも使えます(例えば onlick ハンドラはほぼ全ての要素に登録できます)が、いくつかはもっと限定的で、特定の状況でしか使えません(例えば <a href="https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay">onplay </a> は{{htmlelement("video")}}のような特定の要素でのみ意味を持ちます)。</p> +<p>いくつかのイベントはとても汎用的なのでほとんどどこでも使えます(例えば onlick ハンドラはほぼ全ての要素に登録できます)が、いくつかはもっと限定的で、特定の状況でしか使えません(例えば <a href="/ja/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay">onplay </a> は{{htmlelement("video")}}のような特定の要素でのみ意味を持ちます)。</p> <h3 id="インラインイベントハンドラー_—_使っちゃだめ">インラインイベントハンドラー — 使っちゃだめ</h3> diff --git a/files/ja/learn/javascript/building_blocks/functions/index.html b/files/ja/learn/javascript/building_blocks/functions/index.html index a6901fcec8..6abfcb5ddb 100644 --- a/files/ja/learn/javascript/building_blocks/functions/index.html +++ b/files/ja/learn/javascript/building_blocks/functions/index.html @@ -29,7 +29,7 @@ translation_of: Learn/JavaScript/Building_blocks/Functions <tbody> <tr> <th scope="row">前提知識:</th> - <td>基本的なコンピューターの知識、HTML と CSS への理解、<a href="/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>。</td> + <td>基本的なコンピューターの知識、HTML と CSS への理解、<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>。</td> </tr> <tr> <th scope="row">目的:</th> @@ -79,15 +79,15 @@ console.log(madeAString); <p>JavaScript言語にはたくさんの組込み関数があるので、いろいろあるあなたのやりたい事を、全部をあなた自身で書かなくてもすみます。実は、あなたが呼び出して起動(走らせたり実行する事の別の言い方)するコードのいくつかは、JavaScript では書けない、ブラウザー組込み関数です — こういった関数の多くは背後のブラウザーのコードを呼び出していて、これらは JavaScript のようなウェブ言語ではなく、大半が C++のような低レベルのシステム言語で書かれています。</p> -<p>ブラウザー関数のいくつかは JavaScript言語の核に含まれない事を心に留めておいてください — いくつかはブラウザー API の一部として定義されていて、もっと多くの機能を提供すべくデフォルトの言語の上で構築されています(詳しくは<a href="/Learn/JavaScript/First_steps/What_is_JavaScript#So_what_can_it_really_do">私たちのコースのこの以前のセクション</a>を見てください)。ブラウザー API のもっと詳しい使い方については、後の方のモジュールで見ていく事になるでしょう。</p> +<p>ブラウザー関数のいくつかは JavaScript言語の核に含まれない事を心に留めておいてください — いくつかはブラウザー API の一部として定義されていて、もっと多くの機能を提供すべくデフォルトの言語の上で構築されています(詳しくは<a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript#So_what_can_it_really_do">私たちのコースのこの以前のセクション</a>を見てください)。ブラウザー API のもっと詳しい使い方については、後の方のモジュールで見ていく事になるでしょう。</p> <h2 id="Functions_versus_methods" name="Functions_versus_methods">関数とメソッド</h2> <p>オブジェクトの<strong>メソッド</strong>の一部を、プログラマーは<strong>関数</strong>として呼び出します。構成された JavaScript オブジェクト内部の働きについては、まだ知る必要はありません — この後のモジュールで、オブジェクト内部の働きや自分でオブジェクトを作る方法について教える段階になってから覚えれば大丈夫です。今のところは、ウェブのあちこちにある関連したリソースを見ていると、メソッドと関数が混在している事があるとわかってもらいたいだけです。</p> -<p>これまで利用してきた組込み関数は両方です: 関数でありメソッドでもあります。組み込みオブジェクトとそのメソッドと同様に、組み込み関数の一覧を<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects">こちらで</a>確認できます。</p> +<p>これまで利用してきた組込み関数は両方です: 関数でありメソッドでもあります。組み込みオブジェクトとそのメソッドと同様に、組み込み関数の一覧を<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects">こちらで</a>確認できます。</p> -<p>このコースのここまででもたくさんのカスタム関数を見てきました — ブラウザーの内部でではなくあなたのコードの中で定義された関数です。独自の名前の直後にカッコがついてるものを見かけたら、それはカスタム関数を使っているという事です。<a href="/docs/Learn/JavaScript/Building_blocks/Looping_code">繰返しの記事</a>で出てきた <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a> の例(<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">ソースコード</a>はこちら)では、独自に作った <code>draw()</code> 関数が含まれていました。こんなやつです:</p> +<p>このコースのここまででもたくさんのカスタム関数を見てきました — ブラウザーの内部でではなくあなたのコードの中で定義された関数です。独自の名前の直後にカッコがついてるものを見かけたら、それはカスタム関数を使っているという事です。<a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">繰返しの記事</a>で出てきた <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a> の例(<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">ソースコード</a>はこちら)では、独自に作った <code>draw()</code> 関数が含まれていました。こんなやつです:</p> <pre class="brush: js notranslate">function draw() { ctx.clearRect(0,0,WIDTH,HEIGHT); @@ -267,7 +267,7 @@ function greeting() { <li>コンソールに次のように入力してみてください <pre class="brush: js notranslate">output(y); output(z);</pre> - どちらも、"<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: y is not defined</a>"の一行のエラーが返されるはずです。なぜでしょうか？ 関数スコープのため、つまり <code>y</code> と <code>z</code> は <code>a()</code> と <code>b()</code> 関数の中でロックされているので、global スコープから呼び出されたときには <code>output()</code> はそれらにアクセスできません。</li> + どちらも、"<a href="/ja/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: y is not defined</a>"の一行のエラーが返されるはずです。なぜでしょうか？ 関数スコープのため、つまり <code>y</code> と <code>z</code> は <code>a()</code> と <code>b()</code> 関数の中でロックされているので、global スコープから呼び出されたときには <code>output()</code> はそれらにアクセスできません。</li> <li>しかし、別の関数の中から呼び出されたときはどうでしょうか？ <code>a()</code> と <code>b()</code> を次のように編集してみてください： <pre class="brush: js notranslate">function a() { let y = 2; @@ -320,7 +320,7 @@ b();</pre> </div> <div class="note"> -<p><strong>注</strong>: <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a> というエラーは、あなたが遭遇する最も一般的なエラーの 1 つです。このエラーが発生し、問題の変数が定義されていると確信できる場合は、変数のスコープを確認してください。</p> +<p><strong>注</strong>: <a href="/ja/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a> というエラーは、あなたが遭遇する最も一般的なエラーの 1 つです。このエラーが発生し、問題の変数が定義されていると確信できる場合は、変数のスコープを確認してください。</p> </div> <ul> diff --git a/files/ja/learn/javascript/building_blocks/index.html b/files/ja/learn/javascript/building_blocks/index.html index 74ec4ff45f..35f4123acc 100644 --- a/files/ja/learn/javascript/building_blocks/index.html +++ b/files/ja/learn/javascript/building_blocks/index.html @@ -23,7 +23,7 @@ translation_of: Learn/JavaScript/Building_blocks <h2 id="Prerequisites" name="Prerequisites">前提条件</h2> -<p>このモジュールを始める前に、<a href="/docs/Learn/HTML/Introduction_to_HTML">HTML</a> や <a href="/docs/Learn/CSS/Introduction_to_CSS">CSS </a>の基本に慣れておくべきです。また前のモジュールの <a href="/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a> も終了させておくべきです。</p> +<p>このモジュールを始める前に、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML</a> や <a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS </a>の基本に慣れておくべきです。また前のモジュールの <a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a> も終了させておくべきです。</p> <div class="note"> <p><strong>注記 </strong>: もしあなたが作業しているコンピュータ・タブレットやその他のデバイスで自分でファイルを作れない場合は、<a href="http://jsbin.com/">JSBin</a> や <a href="https://glitch.com/">Glitch</a> といったようなオンラインコーディングプログラムで (ほとんどの場合) 試すことができます。</p> diff --git a/files/ja/learn/javascript/building_blocks/looping_code/index.html b/files/ja/learn/javascript/building_blocks/looping_code/index.html index f9ee6f813d..cbab38e2f9 100644 --- a/files/ja/learn/javascript/building_blocks/looping_code/index.html +++ b/files/ja/learn/javascript/building_blocks/looping_code/index.html @@ -27,7 +27,7 @@ translation_of: Learn/JavaScript/Building_blocks/Looping_code <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターの知識および HTML と CSS への理解、<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>。</td> + <td>基本的なコンピューターの知識および HTML と CSS への理解、<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>。</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/javascript/building_blocks/return_values/index.html b/files/ja/learn/javascript/building_blocks/return_values/index.html index b8d15d4144..ccc22498de 100644 --- a/files/ja/learn/javascript/building_blocks/return_values/index.html +++ b/files/ja/learn/javascript/building_blocks/return_values/index.html @@ -182,7 +182,7 @@ function factorial(num) { <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions">関数</a> — より高度な関数に関連した情報を網羅した詳細なガイド。</li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Functions">関数</a> — より高度な関数に関連した情報を網羅した詳細なガイド。</li> <li><a href="https://www.impressivewebs.com/callback-functions-javascript/">Callback functions in JavaScript</a> — 一般的なJavaScriptのパターンは、ある関数を別の関数に<em>引数として</em>渡すことです。それは受け取った関数の中で呼び出されます。これについては、このコースの範疇を少し超えていますが、すぐにでも勉強する価値はあります。</li> </ul> diff --git a/files/ja/learn/javascript/client-side_web_apis/fetching_data/index.html b/files/ja/learn/javascript/client-side_web_apis/fetching_data/index.html index 44f7c8b035..7a47966ea1 100644 --- a/files/ja/learn/javascript/client-side_web_apis/fetching_data/index.html +++ b/files/ja/learn/javascript/client-side_web_apis/fetching_data/index.html @@ -48,9 +48,9 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Fetching_data <h3 id="Ajax_の登場">Ajax の登場</h3> -<p>上述の問題を解決すべく、Web ページから細かいデータ (<a href="/docs/Web/HTML">HTML</a>、{{glossary("XML")}}、<a href="/docs/Learn/JavaScript/Objects/JSON">JSON</a> やプレーンテキストのような) をリクエストし、それを必要な時だけ表示するという技術の誕生へと繋がりました。</p> +<p>上述の問題を解決すべく、Web ページから細かいデータ (<a href="/ja/docs/Web/HTML">HTML</a>、{{glossary("XML")}}、<a href="/ja/docs/Learn/JavaScript/Objects/JSON">JSON</a> やプレーンテキストのような) をリクエストし、それを必要な時だけ表示するという技術の誕生へと繋がりました。</p> -<p>これは {{domxref("XMLHttpRequest")}} や、最近では <a href="/docs/Web/API/Fetch_API">Fetch API</a> の利用によって実現されます。これらの技術は、Web ページがサーバにある特定のリソースを直接 <a href="/docs/Web/HTTP">HTTP</a> リクエストし、必要があれば結果のデータを表示する前に整形する事を可能にしました。</p> +<p>これは {{domxref("XMLHttpRequest")}} や、最近では <a href="/ja/docs/Web/API/Fetch_API">Fetch API</a> の利用によって実現されます。これらの技術は、Web ページがサーバにある特定のリソースを直接 <a href="/ja/docs/Web/HTTP">HTTP</a> リクエストし、必要があれば結果のデータを表示する前に整形する事を可能にしました。</p> <div class="note"> <p><strong>注記</strong>: これらのテクニック一般はかつて Ajax (Asynchronous JavaScript and XML)と呼ばれていましたが、これは {{domxref("XMLHttpRequest")}} を使って XML データを要求するものが多かったためです。今日ではそういうものばかりではありませんが (<code>XMLHttpRequest</code> や Fetch を使って JSON を要求する場合の方が多いでしょう)、結果としては同じであり、"Ajax" という用語はしばしば今でもこのテクニックを説明するのに使われます。</p> @@ -78,7 +78,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Fetching_data <h2 id="基本的な_Ajax_リクエスト">基本的な Ajax リクエスト</h2> -<p>{{domxref("XMLHttpRequest")}} と <a href="/docs/Web/API/Fetch_API">Fetch</a> それぞれを使って、そのようなリクエストをどうやるのか見ていきましょう。それらの例では、いくつかの異なるテキストファイルから取り出したデータをリクエストし、コンテンツ領域に埋め込みます。</p> +<p>{{domxref("XMLHttpRequest")}} と <a href="/ja/docs/Web/API/Fetch_API">Fetch</a> それぞれを使って、そのようなリクエストをどうやるのか見ていきましょう。それらの例では、いくつかの異なるテキストファイルから取り出したデータをリクエストし、コンテンツ領域に埋め込みます。</p> <p>この一連のファイルは疑似データベースとして働きます。実際のアプリケーションでは、PHP や Python、Node のようなサーバサイド言語を使ってデータベースから取り出したデータをリクエストする場合が多いでしょう。ですがここでは簡単にしておき、クライアント側のパートに集中します。</p> @@ -156,9 +156,9 @@ verseChoose.value = 'Verse 1';</pre> <h3 id="サーバからあなたの例題を送らせる">サーバからあなたの例題を送らせる</h3> -<p>今時のブラウザ (Chrome も含まれます) は、ローカルファイルとして例題を実行しても XHR リクエストを行ないません。これはセキュリティの制限によるものです (Web のセキュリティにより詳しくは <a href="/docs/Learn/Server-side/First_steps/Website_security">Webサイトのセキュリティ</a>を読んで下さい)。</p> +<p>今時のブラウザ (Chrome も含まれます) は、ローカルファイルとして例題を実行しても XHR リクエストを行ないません。これはセキュリティの制限によるものです (Web のセキュリティにより詳しくは <a href="/ja/docs/Learn/Server-side/First_steps/Website_security">Webサイトのセキュリティ</a>を読んで下さい)。</p> -<p>これをどうにかするため、例題をローカルの Web サーバを使って実行しなければなりません。どうやるのかは、 <a href="/docs/Learn/Common_questions/set_up_a_local_testing_server">テスト用のローカルサーバを設定するにはどうすればいい?</a> を読んで下さい。</p> +<p>これをどうにかするため、例題をローカルの Web サーバを使って実行しなければなりません。どうやるのかは、 <a href="/ja/docs/Learn/Common_questions/set_up_a_local_testing_server">テスト用のローカルサーバを設定するにはどうすればいい?</a> を読んで下さい。</p> <h3 id="Fetch">Fetch</h3> @@ -251,7 +251,7 @@ myFetch.then(function(response) { }); }</pre> -<p>レスポンスオブジェクトには {{domxref("Body.text","text()")}} メソッドがあって、これはレスポンスボディにある生データを受けて、プレインテキスト(これが私たちの必要とする形式です)、に変換します。このメソッドもプロミス(これは結果となるテキスト文字列で解決します)を返すので、ここでまた別の {{jsxref("Promise.then",".then()")}} を使い、この内部で、テキスト文字列を使って私たちがやりたい事を行うための別の関数を定義します。私たちがやるのは、ただ詩用の {{htmlelement("pre")}} 要素の <code><a href="/docs/Web/API/Node/textContent">textContent</a></code> プロパティをテキスト文字列と同じに設定だけなので、これはとても単純です。</p> +<p>レスポンスオブジェクトには {{domxref("Body.text","text()")}} メソッドがあって、これはレスポンスボディにある生データを受けて、プレインテキスト(これが私たちの必要とする形式です)、に変換します。このメソッドもプロミス(これは結果となるテキスト文字列で解決します)を返すので、ここでまた別の {{jsxref("Promise.then",".then()")}} を使い、この内部で、テキスト文字列を使って私たちがやりたい事を行うための別の関数を定義します。私たちがやるのは、ただ詩用の {{htmlelement("pre")}} 要素の <code><a href="/ja/docs/Web/API/Node/textContent">textContent</a></code> プロパティをテキスト文字列と同じに設定だけなので、これはとても単純です。</p> <p>これも覚えておく価値があります、それぞれのブロックの結果を次のブロックに渡していくように、直接複数のプロミスブロック(<code>.then()</code>ブロック以外の種類もあります)を次から次へと連鎖する事ができます、あたかも鎖を下にたどっていくように。このおかげで、プロミスはとても強力なのです。</p> @@ -263,7 +263,7 @@ myFetch.then(function(response) { poemDisplay.textContent = text; });</pre> -<p>多くの開発者はこの書き方の方が好きです、なぜなら平らで、間違いなく長大なプロミス連鎖も読みやすいからです — それぞれのプロミスが、前のやつの内側に来る(これは扱いづらくなる場合があります)のではなく、前のやつから順々に続いています。違うのは <code><a href="/docs/Learn/JavaScript/Building_blocks/Return_values">return</a></code> 文を response.text() の前に書いて、それが出した結果を次の鎖に渡すようにしなければならないところだけです。</p> +<p>多くの開発者はこの書き方の方が好きです、なぜなら平らで、間違いなく長大なプロミス連鎖も読みやすいからです — それぞれのプロミスが、前のやつの内側に来る(これは扱いづらくなる場合があります)のではなく、前のやつから順々に続いています。違うのは <code><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">return</a></code> 文を response.text() の前に書いて、それが出した結果を次の鎖に渡すようにしなければならないところだけです。</p> <h3 id="どっちの機構を使うべき">どっちの機構を使うべき?</h3> diff --git a/files/ja/learn/javascript/client-side_web_apis/index.html b/files/ja/learn/javascript/client-side_web_apis/index.html index 0675ea4da0..2335c02956 100644 --- a/files/ja/learn/javascript/client-side_web_apis/index.html +++ b/files/ja/learn/javascript/client-side_web_apis/index.html @@ -23,9 +23,9 @@ translation_of: Learn/JavaScript/Client-side_web_APIs <h2 id="前提条件">前提条件</h2> -<p>このモジュールをよく理解するためには、ここまでの一連のJavaScriptに関するモジュール (<a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a> と <a href="/en-US/docs/Learn/JavaScript/Objects">JavaScript objects</a>) の学習をすませているべきです。これらのモジュールでは大抵簡単な API を使っていますが、その助けなしにクライアント側の JavaScript を書き上げるのは難しいからです。このチュートリアルの中では、JavaScript 言語のコア部分については十分理解しているものとして、よく使われる Web API についてもう少し詳しく探っていきます。</p> +<p>このモジュールをよく理解するためには、ここまでの一連のJavaScriptに関するモジュール (<a href="/ja/docs/Learn/JavaScript/First_steps">First steps</a>, <a href="/ja/docs/Learn/JavaScript/Building_blocks">Building blocks</a> と <a href="/ja/docs/Learn/JavaScript/Objects">JavaScript objects</a>) の学習をすませているべきです。これらのモジュールでは大抵簡単な API を使っていますが、その助けなしにクライアント側の JavaScript を書き上げるのは難しいからです。このチュートリアルの中では、JavaScript 言語のコア部分については十分理解しているものとして、よく使われる Web API についてもう少し詳しく探っていきます。</p> -<p><a href="/en-US/docs/Learn/HTML">HTML</a> と <a href="/en-US/docs/Learn/CSS">CSS</a> に関する基礎知識も役に立つでしょう。</p> +<p><a href="/ja/docs/Learn/HTML">HTML</a> と <a href="/ja/docs/Learn/CSS">CSS</a> に関する基礎知識も役に立つでしょう。</p> <div class="note"> <p><strong>注記</strong>: もし自分のファイルを作成できないようなデバイス上で作業しているなら、大半のコード例を <a href="http://jsbin.com/">JSBin</a> や <a href="https://thimble.mozilla.org/">Thimble</a> のようなオンラインプログラム作成・実行環境で試してみることもできます。</p> @@ -43,7 +43,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">サードパーティ API</a></dt> <dd>これまでに説明したAPIはブラウザに組込まれていますが、全てのAPIが組込まれているのではありません。グーグルマップやTwitter、Facebook、ペイパルなど、多くの巨大なWebサイトやサービスが、開発者に対して彼らのデータを利用したり(例:あなたのブログにtwitterのタイムラインを表示させる)、サービスを利用したり(例:あなたのサイトに独自のグーグルマップを表示したり、あなたのサービス利用者にFacebookでログインできたり)するためのAPIを提供しています。この記事ではブラウザAPIとサードパーティAPIの違いを見ていき、典型的な後者の使い方をお見せします。</dd> <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">絵を描く</a></dt> - <dd>ブラウザにはグラフィックを描くためのとても強力なツールがいくつか組込まれています。<a href="/docs/Web/SVG">SVG</a>(Scalable Vector Graphics)言語から、HTMLの{{htmlelement("canvas")}}キャンバス要素に描画するためのAPIまで (<a href="/docs/Web/API/Canvas_API">キャンバスAPI</a> や <a href="/docs/Web/API/WebGL_API">WebGL</a>を参照)。 この記事ではキャンバスAPIへの導入を説明し、もっと深く学習していくためのリソースをご紹介します。</dd> + <dd>ブラウザにはグラフィックを描くためのとても強力なツールがいくつか組込まれています。<a href="/ja/docs/Web/SVG">SVG</a>(Scalable Vector Graphics)言語から、HTMLの{{htmlelement("canvas")}}キャンバス要素に描画するためのAPIまで (<a href="/ja/docs/Web/API/Canvas_API">キャンバスAPI</a> や <a href="/ja/docs/Web/API/WebGL_API">WebGL</a>を参照)。 この記事ではキャンバスAPIへの導入を説明し、もっと深く学習していくためのリソースをご紹介します。</dd> <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">動画と音声の API</a></dt> <dd>HTML5には文書にリッチなメディアを埋め込むための要素が備わっています — {{htmlelement("video")}} と {{htmlelement("audio")}} — それぞれに再生やシークなどの操作するための独自APIを備えています。この記事では独自の再生操作パネルを作成するような、よくある仕事をどうやればいいのかお見せします。</dd> <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">クライアント側でのデータ保存</a></dt> diff --git a/files/ja/learn/javascript/client-side_web_apis/introduction/index.html b/files/ja/learn/javascript/client-side_web_apis/introduction/index.html index f685066a4d..51db397a58 100644 --- a/files/ja/learn/javascript/client-side_web_apis/introduction/index.html +++ b/files/ja/learn/javascript/client-side_web_apis/introduction/index.html @@ -24,7 +24,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターの知識および利用能力、<a href="/en-US/docs/Learn/HTML">HTML</a> と <a href="/en-US/docs/Learn/CSS">CSS</a> の基本的な理解、JavaScript の基本 (<a href="/ja/docs/Learn/JavaScript/First_steps">第一歩</a>、<a href="/ja/docs/Learn/JavaScript/Building_blocks">構成要素</a>, <a href="/ja/docs/Learn/JavaScript/Objects">JavaScriptオブジェクト</a>).</td> + <td>基本的なコンピューターの知識および利用能力、<a href="/ja/docs/Learn/HTML">HTML</a> と <a href="/ja/docs/Learn/CSS">CSS</a> の基本的な理解、JavaScript の基本 (<a href="/ja/docs/Learn/JavaScript/First_steps">第一歩</a>、<a href="/ja/docs/Learn/JavaScript/Building_blocks">構成要素</a>, <a href="/ja/docs/Learn/JavaScript/Objects">JavaScriptオブジェクト</a>).</td> </tr> <tr> <th scope="row">目的:</th> @@ -54,7 +54,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction <p>クライアントサイド API では、実際非常にたくさんのAPIが使えます — それらは JavaScript 言語本体の一部ではなく、あなたにスーパーパワーを与えるべく JavaScript 言語のコアの上に築かれた代物です。それらはおおよそ二つのカテゴリに分けられます:</p> <ul> - <li><strong>ブラウザー API</strong> は Web ブラウザーに組込まれていて、ブラウザーやコンピューターの環境の情報を取得し、これを使って役に立つややこしい事を行えるようにするものです。 例えば <a href="/en-US/docs/Web/API/Geolocation_API">Geolocation API</a> は位置情報を取得するための簡単な JavaScript 構造を提供するので、例えばグーグルマップにあなたの居場所を表示するような事ができます。裏で実際にはブラウザーは低レベル (例えば C++) の複雑なコードをいくつか使ってデバイスの GPS 機器 (あるいは位置情報を得られる他のなんだか) と通信し、位置情報を取得し、コードから利用できるようにブラウザー環境に情報を戻しています。ですがここでもこの複雑な事柄は API で抽象化され隠蔽されます。</li> + <li><strong>ブラウザー API</strong> は Web ブラウザーに組込まれていて、ブラウザーやコンピューターの環境の情報を取得し、これを使って役に立つややこしい事を行えるようにするものです。 例えば <a href="/ja/docs/Web/API/Geolocation_API">Geolocation API</a> は位置情報を取得するための簡単な JavaScript 構造を提供するので、例えばグーグルマップにあなたの居場所を表示するような事ができます。裏で実際にはブラウザーは低レベル (例えば C++) の複雑なコードをいくつか使ってデバイスの GPS 機器 (あるいは位置情報を得られる他のなんだか) と通信し、位置情報を取得し、コードから利用できるようにブラウザー環境に情報を戻しています。ですがここでもこの複雑な事柄は API で抽象化され隠蔽されます。</li> <li><strong>サードパーティ API</strong> はデフォルトではブラウザーに組込まれておらず、普通はコードと情報を Web のどこから読み込まねばなりません。例えば <a href="https://dev.twitter.com/overview/documentation">Twitter API</a> を使えばあなたの Web サイトにあなたの最新のツイートを表示するような事が可能になります。Twitter API は、Twitter サービスに特定の情報を要求したりするのに使える特別な構造のかたまりを提供します。</li> </ul> @@ -71,10 +71,10 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction <p>ここまででクライアントサイド API とは何か、JavaScript 言語とどう関係しているのかお話しました。もっとはっきりさせるために一度おさらいして、ついでに他の JavaScript ツールがどう関係してくるのかもお話しましょう:</p> <ul> - <li>JavaScript — ブラウザーに組込まれた高レベルスクリプト言語で、Web ページやアプリに機能を実装するのに使えます。<a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Node</a> のようなブラウザー以外の他のプログラミング環境でも使えるのは覚えておいて下さい。</li> + <li>JavaScript — ブラウザーに組込まれた高レベルスクリプト言語で、Web ページやアプリに機能を実装するのに使えます。<a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Node</a> のようなブラウザー以外の他のプログラミング環境でも使えるのは覚えておいて下さい。</li> <li>ブラウザー API — ブラウザーに組込みの JavaScript 言語の上にある構造で、何かの機能をもっと簡単に実装できるようにします。</li> <li>サードパーティ API — サードパーティのプラットフォーム (Twitter や Facebook) 上に作られた構造で、それらのプラットフォームの機能を Web ページで利用できるようにします (例えばあなたの最新のツイートをあなたの Web ページに表示する)。</li> - <li>JavaScript ライブラリ — 多くは、<a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#custom_functions">独自の関数</a> を含んだ一つか複数の JavaScript ファイルで、Web ページにくっつけることでスピードアップしたり共通の機能を書いたりできるものです。例えば、jQuery、Mootools や React がなどが含まれます。</li> + <li>JavaScript ライブラリ — 多くは、<a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions#custom_functions">独自の関数</a> を含んだ一つか複数の JavaScript ファイルで、Web ページにくっつけることでスピードアップしたり共通の機能を書いたりできるものです。例えば、jQuery、Mootools や React がなどが含まれます。</li> <li>JavaScript フレームワーク — ライブラリの一階層上にあたり、JavaScript フレームワーク (例えば Angular や Ember) は HTML や CSS に JavaScript、インストールして一から Web アプリケーションを作成するのに使えるその他もろもろの技術がパッケージ化されている場合が多いです。ライブラリとフレームワークの大きな相違点は、「制御の逆転 (Inversion of Control)」にあります。ライブラリのメソッドを呼ぶ時には、開発者がコントロールしています。フレームワークでは、コントロールが逆転します: フレームワークから開発者のコードが呼ばれるのです。</li> </ul> @@ -88,9 +88,9 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction <ul> <li>ブラウザーで読み込んだ<strong>文書を操作するための API</strong>。一番目にする例は <a href="/ja/docs/Web/API/Document_Object_Model">DOM (Document Object Model) API</a> で、 HTML と CSS を操作できます — HTML を作成したり削除したり書き換えたり、動的に新しいスタイルをページに適用したり、などなど。例えばページにポップアップウィンドウが表われたり、何か新しい中身が表示されたりする時、DOM が使われています。この種の API については<a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#the_document_object_model">ドキュメントの操作</a>でもっといろいろ見られます。</li> - <li><strong>サーバからデータ取得をする API</strong> で Web ページの一部を書き換える事はとてもよく行なわれます。この一見ちょっとした事が、サイトのパフォーマンスや振舞いに巨大なインパクトを与えました — 在庫一覧や新しいお話一覧を書き換えたい時に、サーバからページ全体をリロードする事なしにさくっとできたら、サイトやアプリはずっと反応よく素早く感じられます。これを可能にした API には <a href="/en-US/docs/Web/API/XMLHttpRequest" title="XMLHttpRequest is an API that provides client functionality for transferring data between a client and a server. It provides an easy way to retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just a part of the page without disrupting what the user is doing."><code>XMLHttpRequest</code></a> と <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> が含まれています。<strong>Ajax</strong> という言葉を聞いた事があるかもしれませんが、これがこのテクニックの呼び名です。これらの API について <a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバからのデータ取得</a>でもっといろいろ見られます。</li> + <li><strong>サーバからデータ取得をする API</strong> で Web ページの一部を書き換える事はとてもよく行なわれます。この一見ちょっとした事が、サイトのパフォーマンスや振舞いに巨大なインパクトを与えました — 在庫一覧や新しいお話一覧を書き換えたい時に、サーバからページ全体をリロードする事なしにさくっとできたら、サイトやアプリはずっと反応よく素早く感じられます。これを可能にした API には <a href="/ja/docs/Web/API/XMLHttpRequest" title="XMLHttpRequest is an API that provides client functionality for transferring data between a client and a server. It provides an easy way to retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just a part of the page without disrupting what the user is doing."><code>XMLHttpRequest</code></a> と <a href="/ja/docs/Web/API/Fetch_API">Fetch API</a> が含まれています。<strong>Ajax</strong> という言葉を聞いた事があるかもしれませんが、これがこのテクニックの呼び名です。これらの API について <a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバからのデータ取得</a>でもっといろいろ見られます。</li> <li><strong>グラフィックスを描画したり操作する API</strong> は多くのブラウザーがサポートしています — 最も知られているものには<a href="/ja/docs/Web/API/Canvas_API"> Canvas</a> と <a href="/ja/docs/Web/API/WebGL_API">WebGL</a> があり、HTML の{{htmlelement("canvas")}} 要素上にあるピクセルデータを書き換えて2次元や3次元のシーンを作成するのに使えます。例えばキャンバスAPIを使って長方形や円のような形を描いたり、キャンバスに画像を読み込んだり、セピアやグレイスケールといったフィルターを適用したり、あるいは WebGL を使ってライティングやテクスチャを使った3Dシーンを作成したりできます。これらの API はよくアニメーションループを作成するAPI({{domxref("window.requestAnimationFrame()")}} など)や他のものと組み合わせて使われ、アニメやゲームのようなものの表示を定期的に書き換えるようにします。</li> - <li><strong><a href="/en-US/docs/Web/Guide/Audio_and_video_delivery">動画と音声の API</a></strong> {{domxref("HTMLMediaElement")}}や <a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a> や <a href="/ja/docs/Web/API/WebRTC_API">WebRTC</a> のような API を使うと、 マルチメディアを使ってとても面白い事ができます。音声や動画再生のための独自のコントロールUIの作成、字幕やサブタイトルのような音声トラックをビデオと一緒に表示したり、Web カメラの画像を取り込んで操作し、上述のキャンバスに表示したり Web カンファレンスに参加している他の誰かのコンピューター上に表示したり、音声トラックにイフェクト(ゲイン、ディストーション、音場効果など)をかけたりできます。</li> + <li><strong><a href="/ja/docs/Web/Guide/Audio_and_video_delivery">動画と音声の API</a></strong> {{domxref("HTMLMediaElement")}}や <a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a> や <a href="/ja/docs/Web/API/WebRTC_API">WebRTC</a> のような API を使うと、 マルチメディアを使ってとても面白い事ができます。音声や動画再生のための独自のコントロールUIの作成、字幕やサブタイトルのような音声トラックをビデオと一緒に表示したり、Web カメラの画像を取り込んで操作し、上述のキャンバスに表示したり Web カンファレンスに参加している他の誰かのコンピューター上に表示したり、音声トラックにイフェクト(ゲイン、ディストーション、音場効果など)をかけたりできます。</li> <li><strong>デバイス API</strong> は基本的に Web アプリで使えるような形で、今時のハードウェアデバイスのデータを操作したり取得する API です。デバイスの位置データにアクセスして地図上にあなたの居場所を書くような位置情報 API についてはすでにお話しました。他の例にはシステム通知を使って Web アプリに役に立つアップデートがあるのを知らせたり(<a href="/ja/docs/Web/API/Notifications_API">Notifications API</a> を参照)、ハードウェアを振動させたり(<a href="/ja/docs/Web/API/Vibration_API">Vibration API</a> を参照)などがあります。</li> <li><strong>クライアント側でのデータ保持 API </strong>は今多くのブラウザーに普及しつつあります。— クライアント側にデータを保存できると、ページを移動しても状態を保存したり、たとえデバイスがオフラインでも動作するようなアプリを作成したいような場合、とても役に立ちます。いくつもの選択肢があり、例えば <a href="/ja/docs/Web/API/Web_Storage_API">Web Storage API</a> を使ったキーバリューストアや、 <a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB API</a> を使ったもっと複雑なテーブル型データ保存などです。</li> </ul> @@ -242,7 +242,7 @@ const ctx = canvas.getContext('2d');</pre> <p class="simple-translate-result" style="color: rgb(0, 0, 0);">上記の Web Audio API の例では、すでにいくつかのイベントハンドラーが使用されています。</p> -<p>別の例として、<code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> オブジェクトのインスタンス (一つ一つがサーバから何らかの新しいリソースを取得しようとするHTTPリクエストを表わします) にはとてもたくさんのイベントが付随しており、たとえば <code>load</code> イベントは発火したリソースに対する正常なレスポンスが返ってきて、それが使えるようになった時点で発火します。</p> +<p>別の例として、<code><a href="/ja/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> オブジェクトのインスタンス (一つ一つがサーバから何らかの新しいリソースを取得しようとするHTTPリクエストを表わします) にはとてもたくさんのイベントが付随しており、たとえば <code>load</code> イベントは発火したリソースに対する正常なレスポンスが返ってきて、それが使えるようになった時点で発火します。</p> <p>次のコードはこれをどう使うのか示す簡単な例です:</p> @@ -274,7 +274,7 @@ request.onload = function() { <p><img alt="" src="notification-permission.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> -<p>Web Audio および {{domxref("HTMLMediaElement")}} API には、<a href="/en-US/docs/Web/API/Web_Audio_API/Best_practices#autoplay_policy">自動再生 (autoplay) ポリシー</a> と呼ばれるセキュリティ機構が適用されます。これは、基本的に、ページの読み込み時に音声を自動的に再生できないことを意味します。ユーザーに次のことを許可する必要があります。ボタンのようなコントロールを介して音声再生を開始します。これは、音声の自動再生は通常非常に煩わしいものであり、ユーザーにそれを課すべきではないためです。</p> +<p>Web Audio および {{domxref("HTMLMediaElement")}} API には、<a href="/ja/docs/Web/API/Web_Audio_API/Best_practices#autoplay_policy">自動再生 (autoplay) ポリシー</a> と呼ばれるセキュリティ機構が適用されます。これは、基本的に、ページの読み込み時に音声を自動的に再生できないことを意味します。ユーザーに次のことを許可する必要があります。ボタンのようなコントロールを介して音声再生を開始します。これは、音声の自動再生は通常非常に煩わしいものであり、ユーザーにそれを課すべきではないためです。</p> <div class="blockIndicator note"> <p><strong>注記</strong>: ブラウザーの厳格さによっては、このようなセキュリティ機構により、例がローカルで機能しなくなる場合があります。つまり、ローカルの例のファイルをウェブサーバーから実行するのではなく、ブラウザーに読み込んだ場合です。執筆時点では、Web Audio API の例はローカルでは Google Chrome で動作しません。動作する前に、GitHub にアップロードする必要がありました。</p> @@ -289,7 +289,7 @@ request.onload = function() { <h2 id="このモジュール">このモジュール</h2> <ul> - <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Web API の紹介</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Web API の紹介</a></li> <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">ドキュメントの操作</a></li> <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバからのデータ取得</a></li> <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">サードパーティ API</a></li> diff --git a/files/ja/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/ja/learn/javascript/client-side_web_apis/manipulating_documents/index.html index b0c69f9d62..cc24830ba5 100644 --- a/files/ja/learn/javascript/client-side_web_apis/manipulating_documents/index.html +++ b/files/ja/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -44,7 +44,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents <p><img alt="" src="https://mdn.mozillademos.org/files/14557/document-window-navigator.png" style="display: block; margin: 0 auto;"></p> <ul> - <li>ウィンドウはウェブページが読み込まれる部分の回りのブラウザーの枠です。これは JavaScript では {{domxref("Window")}} オブジェクトで表わされます。このオブジェクトに備わるメソッドを使って、ウィンドウの大きさを調べたり ({{domxref("Window.innerWidth")}} と {{domxref("Window.innerHeight")}} を参照)、ウィンドウに読み込まれる文書を操作したり、その文書に関係するデータをクライアント側(例えばローカルデータベースや他のデータ保存機構)で保存したり、現在のウィンドウに対して<a href="/docs/Learn/JavaScript/Building_blocks/Events#A_series_of_fortunate_events">イベントハンドラー</a> を追加したり、などできます。</li> + <li>ウィンドウはウェブページが読み込まれる部分の回りのブラウザーの枠です。これは JavaScript では {{domxref("Window")}} オブジェクトで表わされます。このオブジェクトに備わるメソッドを使って、ウィンドウの大きさを調べたり ({{domxref("Window.innerWidth")}} と {{domxref("Window.innerHeight")}} を参照)、ウィンドウに読み込まれる文書を操作したり、その文書に関係するデータをクライアント側(例えばローカルデータベースや他のデータ保存機構)で保存したり、現在のウィンドウに対して<a href="/ja/docs/Learn/JavaScript/Building_blocks/Events#A_series_of_fortunate_events">イベントハンドラー</a> を追加したり、などできます。</li> <li>ナビゲータはブラウザーの状態やウェブで使われているようなブラウザーの身元(つまりユーザーエージェント)を表わします。JavaScript では {{domxref("Navigator")}} オブジェクトで表わされます。このオブジェクトを使って、位置情報、ユーザが好む言語、ユーザのウェブカムからの録画データ、などを取得できます。</li> <li>ドキュメント(ブラウザーでは DOM として表現されます)はウィンドウに実際に読み込まれているページのことで、JavaScript では {{domxref("Document")}} オブジェクトで表わされます。このオブジェクトを使って文書を構成する HTML と CSS 上の情報を調べたり操作したりできて、例えば DOM の中のある要素に対する参照を得たり、その中身のテキストを変更したり、新しいスタイルを適用したり、新しい要素を作成して現在の要素の子に追加したり、一緒くたに削除したりできます。</li> </ul> @@ -112,7 +112,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents </ol> <div> -<p>JavaScript あるあるですが、要素を選んで変数に保存する方法にはいろんなやり方があることを頭に入れておいて下さい。{{domxref("Document.querySelector()")}} を使うのが推奨される今風のやり方ですが、これは CSS セレクタと同じ方法で要素を選別できるからです。上記の <code>querySelector()</code> 呼び出しでは文書に現われる最初の {{htmlelement("a")}} がマッチします。もし複数の要素を選択し処理したいのであれば {{domxref("Document.querySelectorAll()")}} を使うことができて、これはセレクタとマッチする全ての要素にマッチし、それらへの参照を {{domxref("NodeList")}} と呼ばれる<a href="/docs/Learn/JavaScript/First_steps/Arrays">配列</a>のようなオブジェクトに保存します。</p> +<p>JavaScript あるあるですが、要素を選んで変数に保存する方法にはいろんなやり方があることを頭に入れておいて下さい。{{domxref("Document.querySelector()")}} を使うのが推奨される今風のやり方ですが、これは CSS セレクタと同じ方法で要素を選別できるからです。上記の <code>querySelector()</code> 呼び出しでは文書に現われる最初の {{htmlelement("a")}} がマッチします。もし複数の要素を選択し処理したいのであれば {{domxref("Document.querySelectorAll()")}} を使うことができて、これはセレクタとマッチする全ての要素にマッチし、それらへの参照を {{domxref("NodeList")}} と呼ばれる<a href="/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a>のようなオブジェクトに保存します。</p> <p>要素への参照を得るための、次のような古いやり方もあります:</p> @@ -190,7 +190,7 @@ para.style.padding = '10px'; para.style.width = '250px'; para.style.textAlign = 'center';</pre> </li> - <li>ページをリロードすると指定のパラグラフにスタイルが適用されているはずです。ブラウザーの <a href="/docs/Tools/Page_Inspector">Page Inspector や DOM inspector</a> からパラグラフを見ると、言うまでもなく上の行がドキュメントのインラインスタイルに追加されているはずです: + <li>ページをリロードすると指定のパラグラフにスタイルが適用されているはずです。ブラウザーの <a href="/ja/docs/Tools/Page_Inspector">Page Inspector や DOM inspector</a> からパラグラフを見ると、言うまでもなく上の行がドキュメントのインラインスタイルに追加されているはずです: <pre class="brush: html notranslate"><p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;">We hope you enjoyed the ride.</p></pre> </li> </ol> @@ -282,15 +282,15 @@ div.style.height = winHeight + 'px';</pre> <ol> <li>まず私たちが用意した <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list.html">shopping-list.html</a> 初期ファイルをダウンロードしてローカルコピーをどこかに作成します。最小限の CSS、ラベルのついたリスト、inputとボタン、空のリストと {{htmlelement("script")}} 要素が書いてあるはずです。この先書き足していくものは全部 script の中に書きます。</li> <li>({{htmlelement("ul")}}) と {{htmlelement("input")}} と {{htmlelement("button")}} 要素への参照を保持する3つの変数を作成します。</li> - <li>ボタンがクリックされた時の応答として走らせる <a href="/docs/Learn/JavaScript/Building_blocks/Functions">関数</a> を作成します。</li> - <li>関数本体は、input 要素の現在の <a href="/docs/Web/API/HTMLInputElement#Properties">値</a>を変数に保存するところから始めます。</li> + <li>ボタンがクリックされた時の応答として走らせる <a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数</a> を作成します。</li> + <li>関数本体は、input 要素の現在の <a href="/ja/docs/Web/API/HTMLInputElement#Properties">値</a>を変数に保存するところから始めます。</li> <li>次に、input 要素の値に空文字列(<code>''</code>)を代入して、input 要素を空にします。</li> <li>3つの要素を作成します — リスト項目({{htmlelement('li')}}) と {{htmlelement('span')}} と {{htmlelement('button')}} で、これらを変数に保存します。</li> <li>span と button をリスト項目 li の子に追加します。</li> <li>spanのテキストコンテントに、先程保存した input 要素の値を代入し、ボタンのテキストコンテントを「削除」にします。</li> <li>できたリスト項目をリストの子に追加します。</li> <li>削除ボタンにイベントハンドラーを追加して、クリックされたらボタンが含まれているリスト項目全体を削除するようにします。</li> - <li>最後に、<code><a href="/docs/Web/API/HTMLElement/focus">focus()</a></code>メソッドを使って input 要素にフォーカスし、次の買い物リスト商品をすぐに入力できるようにします。</li> + <li>最後に、<code><a href="/ja/docs/Web/API/HTMLElement/focus">focus()</a></code>メソッドを使って input 要素にフォーカスし、次の買い物リスト商品をすぐに入力できるようにします。</li> </ol> <div class="note"> @@ -312,7 +312,7 @@ div.style.height = winHeight + 'px';</pre> <li>{{domxref("HTMLElement")}}, {{domxref("HTMLInputElement")}}, {{domxref("HTMLImageElement")}}, etc.</li> </ul> -<p>(私共の <a href="https://developer.mozilla.org/docs/Web/API">Web API index</a> から、MDNにあるウェブAPIに関する全ドキュメント一覧も見て下さい!)</p> +<p>(私共の <a href="/ja/docs/Web/API">Web API index</a> から、MDNにあるウェブAPIに関する全ドキュメント一覧も見て下さい!)</p> <div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}</div> @@ -320,13 +320,13 @@ div.style.height = winHeight + 'px';</pre> <h2 id="このモジュール内の文書">このモジュール内の文書</h2> <ul> - <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">ウェブAPIの紹介</a></li> - <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">ドキュメントの操作</a></li> - <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバからのデータ取得</a></li> - <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">サードパーティAPI</a></li> - <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">絵を描く</a></li> - <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">動画と音声のAPI</a></li> - <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">クライアント側でのデータ保持</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">ウェブAPIの紹介</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">ドキュメントの操作</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバからのデータ取得</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">サードパーティAPI</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">絵を描く</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">動画と音声のAPI</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">クライアント側でのデータ保持</a></li> </ul> </div> diff --git a/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.html b/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.html index f1573f8af8..c5451b0186 100644 --- a/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.html +++ b/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.html @@ -262,7 +262,7 @@ function fetchResults(e) { </div> <div class="note"> -<p><strong>Note</strong>: この例では初歩的なフォームデータの検証を行っています — 検索語フィールドは、フォームを送信する前に入力しなければなりません (<code>required</code> 属性を使用して達成されます)。日付フィールドには <code>pattern</code> 属性が指定されており、値が 8 個の数字 (<code>pattern="[0-9]{8}"</code>) で構成されていないと送信されません。これらがどのように機能するかについての詳細は <a href="/ja/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a> を参照してください。</p> +<p><strong>Note</strong>: この例では初歩的なフォームデータの検証を行っています — 検索語フィールドは、フォームを送信する前に入力しなければなりません (<code>required</code> 属性を使用して達成されます)。日付フィールドには <code>pattern</code> 属性が指定されており、値が 8 個の数字 (<code>pattern="[0-9]{8}"</code>) で構成されていないと送信されません。これらがどのように機能するかについての詳細は <a href="/ja/docs/Learn/HTML/Forms/Form_validation">Form data validation</a> を参照してください。</p> </div> <h3 id="API_からデータを要求する">API からデータを要求する</h3> diff --git a/files/ja/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html b/files/ja/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html index 09e6e27ca7..bcc0c856c3 100644 --- a/files/ja/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html +++ b/files/ja/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html @@ -23,7 +23,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs <tbody> <tr> <th scope="row">前提条件:</th> - <td>JavaScript basics (see <a href="/en-US/docs/Learn/JavaScript/First_steps">first steps</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks">building blocks</a>, <a href="/en-US/docs/Learn/JavaScript/Objects">JavaScript objects</a>), the <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">basics of Client-side APIs</a></td> + <td>JavaScript basics (see <a href="/ja/docs/Learn/JavaScript/First_steps">first steps</a>, <a href="/ja/docs/Learn/JavaScript/Building_blocks">building blocks</a>, <a href="/ja/docs/Learn/JavaScript/Objects">JavaScript objects</a>), the <a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">basics of Client-side APIs</a></td> </tr> <tr> <th scope="row">目的:</th> @@ -34,7 +34,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs <h2 id="HTML5_video_と_audio">HTML5 video と audio</h2> -<p>The {{htmlelement("video")}} and {{htmlelement("audio")}} elements allow us to embed video and audio into web pages. As we showed in <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a>, a typical implementation looks like this:</p> +<p>The {{htmlelement("video")}} and {{htmlelement("audio")}} elements allow us to embed video and audio into web pages. As we showed in <a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a>, a typical implementation looks like this:</p> <pre class="brush: html notranslate"><video controls> <source src="rabbit320.mp4" type="video/mp4"> @@ -160,7 +160,7 @@ button:before { <ul> <li>We use the {{cssxref("::before")}} selector to display the content before each {{htmlelement("button")}} element.</li> - <li>We use the {{cssxref("content")}} property to set the content to be displayed in each case to be equal to the contents of the <code><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">data-icon</a></code> attribute. In the case of our play button, <code>data-icon</code> contains a capital "P".</li> + <li>We use the {{cssxref("content")}} property to set the content to be displayed in each case to be equal to the contents of the <code><a href="/ja/docs/Learn/HTML/Howto/Use_data_attributes">data-icon</a></code> attribute. In the case of our play button, <code>data-icon</code> contains a capital "P".</li> <li>We apply the custom web font to our buttons using {{cssxref("font-family")}}. In this font, "P" is actually a "play" icon, so therefore the play button has a "play" icon displayed on it.</li> </ul> @@ -267,7 +267,7 @@ controls.style.visibility = 'visible';</pre> } }</pre> - <p>Here we use an <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if</a></code> statement to check whether the video is paused. The {{domxref("HTMLMediaElement.paused")}} property returns true if the media is paused, which is any time the video is not playing, including when it is set at 0 duration after it first loads. If it is paused, we set the <code>data-icon</code> attribute value on the play button to "u", which is a "paused" icon, and invoke the {{domxref("HTMLMediaElement.play()")}} method to play the media.</p> + <p>Here we use an <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/if...else">if</a></code> statement to check whether the video is paused. The {{domxref("HTMLMediaElement.paused")}} property returns true if the media is paused, which is any time the video is not playing, including when it is set at 0 duration after it first loads. If it is paused, we set the <code>data-icon</code> attribute value on the play button to "u", which is a "paused" icon, and invoke the {{domxref("HTMLMediaElement.play()")}} method to play the media.</p> <p>On the second click, the button will be toggled back again — the "play" icon will be shown again, and the video will be paused with {{domxref("HTMLMediaElement.pause()")}}.</p> </li> @@ -277,7 +277,7 @@ controls.style.visibility = 'visible';</pre> <ol> <li> - <p>Next, let's add functionality to handle stopping the video. Add the following <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> lines below the previous one you added:</p> + <p>Next, let's add functionality to handle stopping the video. Add the following <code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> lines below the previous one you added:</p> <pre class="brush: js notranslate">stop.addEventListener('click', stopMedia); media.addEventListener('ended', stopMedia); @@ -307,7 +307,7 @@ media.addEventListener('ended', stopMedia); <ol> <li> - <p>First of all, add the following two <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> lines below the previous ones:</p> + <p>First of all, add the following two <code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> lines below the previous ones:</p> <pre class="brush: js notranslate">rwd.addEventListener('click', mediaBackward); fwd.addEventListener('click', mediaForward); @@ -473,7 +473,7 @@ clearInterval(intervalFwd); <p>Because <code><audio></code> elements have the same {{domxref("HTMLMediaElement")}} functionality available to them, you could easily get this player to work for an <code><audio></code> element too. Try doing so.</p> </li> <li> - <p>Can you work out a way to turn the timer inner <code><div></code> element into a true seek bar/scrobbler — i.e., when you click somewhere on the bar, it jumps to that relative position in the video playback? As a hint, you can find out the X and Y values of the element's left/right and top/bottom sides via the <code><a href="/en-US/docs/Web/API/Element/getBoundingClientRect">getBoundingClientRect()</a></code> method, and you can find the coordinates of a mouse click via the event object of the click event, called on the {{domxref("Document")}} object. For example:</p> + <p>Can you work out a way to turn the timer inner <code><div></code> element into a true seek bar/scrobbler — i.e., when you click somewhere on the bar, it jumps to that relative position in the video playback? As a hint, you can find out the X and Y values of the element's left/right and top/bottom sides via the <code><a href="/ja/docs/Web/API/Element/getBoundingClientRect">getBoundingClientRect()</a></code> method, and you can find the coordinates of a mouse click via the event object of the click event, called on the {{domxref("Document")}} object. For example:</p> <pre class="brush: js notranslate">document.onclick = function(e) { console.log(e.x) + ',' + console.log(e.y) @@ -485,11 +485,11 @@ clearInterval(intervalFwd); <ul> <li>{{domxref("HTMLMediaElement")}}</li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a> — simple guide to <code><video></code> and <code><audio></code> HTML.</li> - <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Audio and video delivery</a> — detailed guide to delivering media inside the browser, with many tips, tricks, and links to further more advanced tutorials.</li> - <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Audio and video manipulation</a> — detailed guide to manipulating audio and video, e.g. with <a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a>, <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>, and more.</li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a> — simple guide to <code><video></code> and <code><audio></code> HTML.</li> + <li><a href="/ja/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Audio and video delivery</a> — detailed guide to delivering media inside the browser, with many tips, tricks, and links to further more advanced tutorials.</li> + <li><a href="/ja/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Audio and video manipulation</a> — detailed guide to manipulating audio and video, e.g. with <a href="/ja/docs/Web/API/Canvas_API">Canvas API</a>, <a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a>, and more.</li> <li>{{htmlelement("video")}} and {{htmlelement("audio")}} reference pages.</li> - <li><a href="/en-US/docs/Web/Media/Formats">Guide to media types and formats on the web</a></li> + <li><a href="/ja/docs/Web/Media/Formats">Guide to media types and formats on the web</a></li> </ul> <p>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs/Client-side_storage", "Learn/JavaScript/Client-side_web_APIs")}}</p> @@ -497,11 +497,11 @@ clearInterval(intervalFwd); <h2 id="このモジュール">このモジュール</h2> <ul> - <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Web API の紹介</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Web API の紹介</a></li> <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">ドキュメントの操作</a></li> <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバからのデータ取得</a></li> <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">サードパーティ API</a></li> - <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">グラフィックの描画</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">グラフィックの描画</a></li> <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">動画と音声の API</a></li> <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">クライアント側ストレージ</a></li> </ul> diff --git a/files/ja/learn/javascript/first_steps/a_first_splash/index.html b/files/ja/learn/javascript/first_steps/a_first_splash/index.html index 3a76770630..b4b0064a9b 100644 --- a/files/ja/learn/javascript/first_steps/a_first_splash/index.html +++ b/files/ja/learn/javascript/first_steps/a_first_splash/index.html @@ -237,7 +237,7 @@ translation_of: Learn/JavaScript/First_steps/A_first_splash <span class="keyword token">let</span> guessCount <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span> <span class="keyword token">let</span> resetButton<span class="punctuation token">;</span></code></pre> -<p>上記のコードはプログラムが使用するデータを保持する変数と定数をセットアップしています。変数とは基本的には値 (数字や文字など) の入れ物です。 <code>let</code> (か <code>var</code>) キーワードに続いて変数の名前を書くことで、変数を作成します (これらのキーワードの違いは<a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let">以降の記事</a>で見ます) 。定数は変更しない値を保持するのに、 <code>const</code> キーワードといっしょに使います。この場合では、定数をユーザーインターフェイスのパーツへの参照を保存するのに使っていて、一部の内部のテキストは変わるかも知れませんが、参照されるHTML要素は同じままです。</p> +<p>上記のコードはプログラムが使用するデータを保持する変数と定数をセットアップしています。変数とは基本的には値 (数字や文字など) の入れ物です。 <code>let</code> (か <code>var</code>) キーワードに続いて変数の名前を書くことで、変数を作成します (これらのキーワードの違いは<a href="/ja/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let">以降の記事</a>で見ます) 。定数は変更しない値を保持するのに、 <code>const</code> キーワードといっしょに使います。この場合では、定数をユーザーインターフェイスのパーツへの参照を保存するのに使っていて、一部の内部のテキストは変わるかも知れませんが、参照されるHTML要素は同じままです。</p> <p>等号記号 ( <code>=</code> ) に続いて、与えたい値を書いて、変数や定数に値を代入できます。</p> @@ -260,7 +260,7 @@ translation_of: Learn/JavaScript/First_steps/A_first_splash </ul> <div class="note"> -<p><strong>注記</strong>: 変数や定数についてはこのコースの間に、<a href="https://developer.mozilla.org/ja/docs/user:chrisdavidmills/variables">次の記事</a>を始めとして何度も出てきます。</p> +<p><strong>注記</strong>: 変数や定数についてはこのコースの間に、<a href="/ja/docs/user:chrisdavidmills/variables">次の記事</a>を始めとして何度も出てきます。</p> </div> <h3 id="Functions" name="Functions">関数</h3> @@ -282,7 +282,7 @@ translation_of: Learn/JavaScript/First_steps/A_first_splash <p><kbd>Return</kbd>/<kbd>Enter</kbd> を押した後で、"ここはプレースホルダです"という警告が表示されましたね。呼び出すと、いつでも警告が表示される関数を定義することができました。</p> <div class="note"> -<p><strong>注記</strong>: 関数についても<a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">このコースの後の方で</a>詳しく学びます。</p> +<p><strong>注記</strong>: 関数についても<a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">このコースの後の方で</a>詳しく学びます。</p> </div> <h3 id="Operators" name="Operators">演算子</h3> @@ -334,7 +334,7 @@ hello; let greeting = name + hello; greeting;</pre> -<p>累算<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">代入演算子</a>と呼ばれるもっと短い書き方もあります。すでにある文字列に、さらに文字を追加した結果を返したい場合などに使います。例えば、</p> +<p>累算<a href="/ja/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">代入演算子</a>と呼ばれるもっと短い書き方もあります。すでにある文字列に、さらに文字を追加した結果を返したい場合などに使います。例えば、</p> <pre class="brush: js notranslate">name += 'が、こんにちは！と言っています。';</pre> @@ -598,13 +598,13 @@ guesses.style.boxShadow = '3px 3px 6px black';</pre> <h2 id="In_this_module" name="In_this_module">このモジュール</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何?</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での数学入門 — 数値と演算子について</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何?</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での数学入門 — 数値と演算子について</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li> </ul> diff --git a/files/ja/learn/javascript/first_steps/index.html b/files/ja/learn/javascript/first_steps/index.html index 26c69c3475..bd83655354 100644 --- a/files/ja/learn/javascript/first_steps/index.html +++ b/files/ja/learn/javascript/first_steps/index.html @@ -28,7 +28,7 @@ translation_of: Learn/JavaScript/First_steps <p>私たちはあなたがあなたの目標に向かって取り組むために必要なすべての重要な情報を含むコースをまとめました。</p> -<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">始めましょう</a></p> +<p><a class="cta primary" href="/ja/docs/Learn/Front-end_web_developer">始めましょう</a></p> </div> <h2 id="Prerequisites" name="Prerequisites">前提条件</h2> @@ -36,7 +36,7 @@ translation_of: Learn/JavaScript/First_steps <p>このモジュールを始めるには JavaScript の知識は必要ありませんが、HTML や CSS に少し慣れている必要があります。JavaScript の学習を開始する前に以下のモジュールを学習することをお勧めします :</p> <ul> - <li><a href="/ja/docs/Learn/Getting_started_with_the_web">Web 入門</a> (<a href="/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の入門</a> を含む)</li> + <li><a href="/ja/docs/Learn/Getting_started_with_the_web">Web 入門</a> (<a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の入門</a> を含む)</li> <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a></li> <li><a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a></li> </ul> diff --git a/files/ja/learn/javascript/first_steps/math/index.html b/files/ja/learn/javascript/first_steps/math/index.html index df0a2af55f..867eca58ef 100644 --- a/files/ja/learn/javascript/first_steps/math/index.html +++ b/files/ja/learn/javascript/first_steps/math/index.html @@ -88,7 +88,7 @@ typeof myFloat;</pre> <h3 id="便利な_Number_メソッド">便利な Number メソッド</h3> -<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></code> オブジェクトは、あなたが JavaScript を使う時すべての基本的な数値を表現するインスタンスですが、その中には、数値を操作するための沢山の便利なメソッドがあります。この記事では、簡単な紹介と基本的な要点だけまとめたいので、詳しくは割愛しますが、この段落を何回か読んだら、オブジェクト参照ページに行って、どんなメソッドが使えるのかを勉強するのが良いと思います。</p> +<p><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></code> オブジェクトは、あなたが JavaScript を使う時すべての基本的な数値を表現するインスタンスですが、その中には、数値を操作するための沢山の便利なメソッドがあります。この記事では、簡単な紹介と基本的な要点だけまとめたいので、詳しくは割愛しますが、この段落を何回か読んだら、オブジェクト参照ページに行って、どんなメソッドが使えるのかを勉強するのが良いと思います。</p> <p>例えば、数値を固定の桁数に丸めるには <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed">toFixed()</a></code> メソッドを使用します。ブラウザの<a href="/ja/docs/Tools/Web_Console">コンソール</a>に次の行を入力します。</p> @@ -457,13 +457,13 @@ function updateBtn() { <h2 id="In_this_module" name="In_this_module">このモジュール内</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何?</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での数学入門 — 数値と演算子について</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何?</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での数学入門 — 数値と演算子について</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li> </ul> diff --git a/files/ja/learn/javascript/first_steps/strings/index.html b/files/ja/learn/javascript/first_steps/strings/index.html index d4b850bd6d..ab9a0e1a2a 100644 --- a/files/ja/learn/javascript/first_steps/strings/index.html +++ b/files/ja/learn/javascript/first_steps/strings/index.html @@ -217,7 +217,7 @@ I gave it a score of ${ score/highestScore * 100 }%.`;</pre> <h2 id="あなたのスキルをテストしてください！">あなたのスキルをテストしてください！</h2> -<p>この記事の最後に到達しましたが、最も重要な情報を覚えていますか？ 先に進む前に、この情報を記憶していることを確認するためのいくつかの<a href="/en-US/docs/Learn/JavaScript/First_steps/Test_your_skills:_Strings">テスト</a>を見つけることができます。これには次の記事の知識も必要なので、最初にそれを読むことをお勧めします。</p> +<p>この記事の最後に到達しましたが、最も重要な情報を覚えていますか？ 先に進む前に、この情報を記憶していることを確認するためのいくつかの<a href="/ja/docs/Learn/JavaScript/First_steps/Test_your_skills:_Strings">テスト</a>を見つけることができます。これには次の記事の知識も必要なので、最初にそれを読むことをお勧めします。</p> <h2 id="Conclusion" name="Conclusion">結論</h2> @@ -228,13 +228,13 @@ I gave it a score of ${ score/highestScore * 100 }%.`;</pre> <h2 id="In_this_module" name="In_this_module">このモジュール内</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何?</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での数学入門 — 数値と演算子について</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何?</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での数学入門 — 数値と演算子について</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li> </ul> diff --git a/files/ja/learn/javascript/first_steps/useful_string_methods/index.html b/files/ja/learn/javascript/first_steps/useful_string_methods/index.html index c18f846d20..bfd2cea2c1 100644 --- a/files/ja/learn/javascript/first_steps/useful_string_methods/index.html +++ b/files/ja/learn/javascript/first_steps/useful_string_methods/index.html @@ -668,13 +668,13 @@ textarea.onkeyup = function(){ <h2 id="In_this_module" name="In_this_module">このモジュール内</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何?</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での数学入門 — 数値と演算子について</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何?</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での数学入門 — 数値と演算子について</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li> </ul> diff --git a/files/ja/learn/javascript/first_steps/variables/index.html b/files/ja/learn/javascript/first_steps/variables/index.html index 1ed288aa84..a8424263a1 100644 --- a/files/ja/learn/javascript/first_steps/variables/index.html +++ b/files/ja/learn/javascript/first_steps/variables/index.html @@ -330,13 +330,13 @@ daysInWeek <span class="operator token">=</span> </code><span class="message-bod <h2 id="In_this_module" name="In_this_module">このモジュール</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何?</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での数学入門 — 数値と演算子について</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何?</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での数学入門 — 数値と演算子について</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li> </ul> diff --git a/files/ja/learn/javascript/howto/index.html b/files/ja/learn/javascript/howto/index.html index 528ce80fe4..9609cff261 100644 --- a/files/ja/learn/javascript/howto/index.html +++ b/files/ja/learn/javascript/howto/index.html @@ -149,8 +149,8 @@ translation_of: Learn/JavaScript/Howto <ul> <li><a href="/ja/docs/Learn/JavaScript/First_steps/Variables#Declaring_a_variable">変数を宣言するには</a></li> <li><a href="/ja/docs/Learn/JavaScript/First_steps/Variables#Initializing_a_variable">変数を値で初期化するには</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables#Updating_a_variable">変数の値を変更するには</a>(<a href="/ja/docs/Learn/JavaScript/First_steps/Math#Assignment_operators">代入演算子</a>についても参照してください)</li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables#Variable_types">JavaScript のデータ型とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Variables#Updating_a_variable">変数の値を変更するには</a>(<a href="/ja/docs/Learn/JavaScript/First_steps/Math#Assignment_operators">代入演算子</a>についても参照してください)</li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Variables#Variable_types">JavaScript のデータ型とは</a></li> <li><a href="/ja/docs/Learn/JavaScript/First_steps/Variables#Loose_typing">「弱い型付け」とは</a></li> </ul> @@ -161,7 +161,7 @@ translation_of: Learn/JavaScript/Howto <li><a href="/ja/docs/Learn/JavaScript/First_steps/Math#Arithmetic_operators">JavaScript での基本的な算術演算の方法とは</a></li> <li><a href="/ja/docs/Learn/JavaScript/First_steps/Math#Operator_precedence">JavaScript での演算子の優先順位とは</a></li> <li><a href="/ja/docs/Learn/JavaScript/First_steps/Math#Increment_and_decrement_operators">JavaScript で値をインクリメント、デクリメントするには</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Math#Comparison_operators">JavaScript で値を比較するには</a>(どちらが大きいか、ある値が別の値と等しいか、など)</li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Math#Comparison_operators">JavaScript で値を比較するには</a>(どちらが大きいか、ある値が別の値と等しいか、など)</li> </ul> <h3 id="Strings" name="Strings">文字列</h3> @@ -210,14 +210,14 @@ translation_of: Learn/JavaScript/Howto <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals#Nesting_if_..._else">条件判定のブロックを別のブロックに入れ子にするには</a></li> <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals#Logical_operators_AND_OR_and_NOT">AND や OR、NOT を JavaScript で使用するには</a></li> <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals#switch_statements">多くの選択肢を一つの条件として手軽に扱うには</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/conditionals#Ternary_operator">true/false の判定によって 2 つの選択肢から 1 つを手早く選択するのに、三項演算子を使用するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals#Ternary_operator">true/false の判定によって 2 つの選択肢から 1 つを手早く選択するのに、三項演算子を使用するには</a></li> </ul> <h3 id="Loopingiteration" name="Loopingiteration">ループ/イテレーション</h3> <ul> <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">同一のコード片を繰り返し実行するには</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Looping_code#Exiting_loops_with_break">終了条件にマッチする前に、ループを終了させるには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code#Exiting_loops_with_break">終了条件にマッチする前に、ループを終了させるには</a></li> <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code#Skipping_iterations_with_continue">次の繰り返し処理にスキップするには</a></li> <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while">while ループ、do ... while ループを使用するには</a></li> <li>配列内の要素を反復処理する方法</li> @@ -253,7 +253,7 @@ translation_of: Learn/JavaScript/Howto <li><a href="/ja/docs/Learn/JavaScript/Objects/Basics#Bracket_notation">角括弧を用いた記法とは</a></li> <li><a href="/ja/docs/Learn/JavaScript/Objects/Basics#Setting_object_members">オブジェクトのメソッドやプロパティを取得、設定するには</a></li> <li><a href="/ja/docs/Learn/JavaScript/Objects/Basics#What_is_this">オブジェクトのコンテキストにおける <code>this</code> とは何か</a></li> - <li><a href="/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters">オブジェクト指向プログラミングとは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters">オブジェクト指向プログラミングとは</a></li> <li><a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS#Constructors_and_object_instances">コンストラクターやインスタンスとは何か、それらをどのように作成するか</a></li> <li><a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS#Other_ways_to_create_object_instances">JavaScript でオブジェクトを作成する方法にはどのようなものがあるか</a></li> </ul> diff --git a/files/ja/learn/javascript/index.html b/files/ja/learn/javascript/index.html index 2094a48052..540199941e 100644 --- a/files/ja/learn/javascript/index.html +++ b/files/ja/learn/javascript/index.html @@ -21,12 +21,12 @@ translation_of: Learn/JavaScript <p>目標に向かって頑張るために必要な情報をまとめたコースをご用意しました。</p> -<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p> +<p><a class="cta primary" href="/ja/docs/Learn/Front-end_web_developer">Get started</a></p> </div> <h2 id="Learning_pathway" name="Learning_pathway">学習の道筋</h2> -<p><span id="result_box" lang="ja"><span>JavaScript は </span></span><a href="/docs/Learn/HTML">HTML </a><span lang="ja"><span>や </span></span><a href="/docs/Learn/CSS">CSS</a><span lang="ja"><span> などの関連技術よりも</span></span><span id="result_box" lang="ja"><span>きっと</span></span><span lang="ja"><span>学ぶのが難しいでしょう。</span><span>JavaScript を習得する前に、まずこれらの 2 つの技術、そしておそらく他の技術を熟知しておくことを強くおすすめします。先ず次のモジュールを実施してください :</span></span></p> +<p><span id="result_box" lang="ja"><span>JavaScript は </span></span><a href="/ja/docs/Learn/HTML">HTML </a><span lang="ja"><span>や </span></span><a href="/ja/docs/Learn/CSS">CSS</a><span lang="ja"><span> などの関連技術よりも</span></span><span id="result_box" lang="ja"><span>きっと</span></span><span lang="ja"><span>学ぶのが難しいでしょう。</span><span>JavaScript を習得する前に、まずこれらの 2 つの技術、そしておそらく他の技術を熟知しておくことを強くおすすめします。先ず次のモジュールを実施してください :</span></span></p> <ul> <li><a href="/ja/docs/Learn/Getting_started_with_the_web">ウェブ入門</a></li> diff --git a/files/ja/learn/javascript/objects/index.html b/files/ja/learn/javascript/objects/index.html index 3985137adb..4c93a83608 100644 --- a/files/ja/learn/javascript/objects/index.html +++ b/files/ja/learn/javascript/objects/index.html @@ -20,7 +20,7 @@ translation_of: Learn/JavaScript/Objects <h2 id="Prerequisites" name="Prerequisites">前提条件</h2> -<p>このモジュールを始める前に、 HTML と CSS にいくらか精通している必要があります。JavaScript を始める前に <a href="https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Introduction">HTML 入門</a>と <a href="https://developer.mozilla.org/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>をひととおり学習することをオススメします。</p> +<p>このモジュールを始める前に、 HTML と CSS にいくらか精通している必要があります。JavaScript を始める前に <a href="/ja/docs/Web/Guide/HTML/Introduction">HTML 入門</a>と <a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>をひととおり学習することをオススメします。</p> <p>また、JavaScript オブジェクトを詳細に調べる前に、JavaScript の基本についていくらか精通している必要があります。このモジュールを試す前に、<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a> と <a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a>を通して学習してください。</p> diff --git a/files/ja/learn/javascript/objects/inheritance/index.html b/files/ja/learn/javascript/objects/inheritance/index.html index c408100d19..2964fbe786 100644 --- a/files/ja/learn/javascript/objects/inheritance/index.html +++ b/files/ja/learn/javascript/objects/inheritance/index.html @@ -25,7 +25,7 @@ translation_of: Learn/JavaScript/Objects/Inheritance <tbody> <tr> <th scope="row">前提知識</th> - <td>基本的なコンピュータの知識および利用能力、HTML と CSS への基本的な理解、JavaScript の基本 (<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps">第一歩</a>と<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks">構成要素</a>を参照) と OOJS の基本 (<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Basics">オブジェクト入門</a>) に慣れている。</td> + <td>基本的なコンピュータの知識および利用能力、HTML と CSS への基本的な理解、JavaScript の基本 (<a href="/ja/docs/Learn/JavaScript/First_steps">第一歩</a>と<a href="/ja/docs/Learn/JavaScript/Building_blocks">構成要素</a>を参照) と OOJS の基本 (<a href="/ja/docs/Learn/JavaScript/Objects/Basics">オブジェクト入門</a>) に慣れている。</td> </tr> <tr> <th scope="row">目的:</th> @@ -278,7 +278,7 @@ leia<span class="punctuation token">.</span><span class="function token">farewel this.interests = interests; } </pre> -<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super"><code>super()</code></a> 演算子を <code>constructor()</code> 内の最初の項目として定義することで、コードをより読みやすくすることができます。これは親クラスのコンストラクタを呼び出し、そこに定義されている限り、指定したメンバーを<code>super()</code> のパラメータとして継承します。</p> +<p><a href="/ja/docs/Web/JavaScript/Reference/Operators/super"><code>super()</code></a> 演算子を <code>constructor()</code> 内の最初の項目として定義することで、コードをより読みやすくすることができます。これは親クラスのコンストラクタを呼び出し、そこに定義されている限り、指定したメンバーを<code>super()</code> のパラメータとして継承します。</p> <pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">class</span> <span class="class-name token">Teacher</span> <span class="keyword token">extends</span> <span class="class-name token">Person</span> <span class="punctuation token">{</span> <span class="function token">constructor</span><span class="punctuation token">(</span>first<span class="punctuation token">,</span> last<span class="punctuation token">,</span> age<span class="punctuation token">,</span> gender<span class="punctuation token">,</span> interests<span class="punctuation token">,</span> subject<span class="punctuation token">,</span> grade<span class="punctuation token">)</span> <span class="punctuation token">{</span> @@ -381,7 +381,7 @@ console<span class="punctuation token">.</span><span class="function token">log< <h2 id="Test_your_skills!" name="Test_your_skills!">あなたのスキルをテストしてみましょう!</h2> -<p>この記事はここまでですが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するためのテストがいくつかあります - <a href="/en-US/docs/Learn/JavaScript/Objects/Test_your_skills:_Object-oriented_JavaScript">あなたのスキルをテストする: オブジェクト指向 JavaScript</a> を参照してください。</p> +<p>この記事はここまでですが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するためのテストがいくつかあります - <a href="/ja/docs/Learn/JavaScript/Objects/Test_your_skills:_Object-oriented_JavaScript">あなたのスキルをテストする: オブジェクト指向 JavaScript</a> を参照してください。</p> <h2 id="Summary" name="Summary">まとめ</h2> diff --git a/files/ja/learn/javascript/objects/json/index.html b/files/ja/learn/javascript/objects/json/index.html index c72a38744b..f6287d46d6 100644 --- a/files/ja/learn/javascript/objects/json/index.html +++ b/files/ja/learn/javascript/objects/json/index.html @@ -24,7 +24,7 @@ translation_of: Learn/JavaScript/Objects/JSON <tbody> <tr> <th scope="row">前提条件:</th> - <td>基礎的なコンピュータの知識、HTML と CSS への基本的な理解、基礎的な JavaScript の理解 (<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>と <a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a>を参照) とオブジェクト指向JavaScript の基本 (<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks">JavaScript オブジェクトの基本</a>を参照)。</td> + <td>基礎的なコンピュータの知識、HTML と CSS への基本的な理解、基礎的な JavaScript の理解 (<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>と <a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a>を参照) とオブジェクト指向JavaScript の基本 (<a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript オブジェクトの基本</a>を参照)。</td> </tr> <tr> <th scope="row">目的:</th> @@ -37,7 +37,7 @@ translation_of: Learn/JavaScript/Objects/JSON <p>{{glossary("JSON")}} は JavaScript オブジェクトの構文に従ったテキストベースのフォーマットで、<a href="https://en.wikipedia.org/wiki/Douglas_Crockford">Douglas Crockford</a> によって普及されました。JSON は JavaScript オブジェクトの構文に似ていますが、JavaScript とは独立して扱われることがあり、多くのプログラミング言語環境には JSON を読み込む(パースする)したり生成したりする機能があります。</p> -<p>JSON は文字列です。ですので、ネットワークを通してデータを転送したい場合に便利です。JSON データへアクセスしたい場合は、JavaScript オブジェクトへ変換する必要があります。JavaScript には JSON と JavaScript オブジェクトを相互に変換できるメソッドを持った <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> というグローバルなオブジェクトがあるので、その変換は大きな問題ではありません。</p> +<p>JSON は文字列です。ですので、ネットワークを通してデータを転送したい場合に便利です。JSON データへアクセスしたい場合は、JavaScript オブジェクトへ変換する必要があります。JavaScript には JSON と JavaScript オブジェクトを相互に変換できるメソッドを持った <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> というグローバルなオブジェクトがあるので、その変換は大きな問題ではありません。</p> <div class="note"> <p><strong>注記</strong>: 文字列をネイティブオブジェクトへ変換することは<em>デシリアライゼーション (deserialization)</em> と呼ばれており、ネイティブオブジェクトをネットワークを通して転送できように文字列へ変換することは<em>シリアライゼーション (serialization) </em>と呼ばれています。</p> @@ -91,7 +91,7 @@ translation_of: Learn/JavaScript/Objects/JSON ] }'</pre> -<p>もし、この文字列を JavaScript プログラムへ読み込んだ場合(例えば、例えば変数<code>superHeroes</code> へ代入する)、<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a>の節で見たのと同様に ドットや角括弧を使ってデータへアクセスすることができます。例としては以下のようになります。</p> +<p>もし、この文字列を JavaScript プログラムへ読み込んだ場合(例えば、例えば変数<code>superHeroes</code> へ代入する)、<a href="/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a>の節で見たのと同様に ドットや角括弧を使ってデータへアクセスすることができます。例としては以下のようになります。</p> <pre class="brush: js notranslate">superHeroes.homeTown superHeroes['active']</pre> @@ -335,10 +335,10 @@ myString</pre> <h2 id="See_also" name="See_also">あわせて参照</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON リファレンス</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest">XMLHttpRequest オブジェクトリファレンス</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest の利用</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/HTTP/Methods">HTTP リクエストメソッド</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON リファレンス</a></li> + <li><a href="/ja/docs/Web/API/XMLHttpRequest">XMLHttpRequest オブジェクトリファレンス</a></li> + <li><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest の利用</a></li> + <li><a href="/ja/docs/Web/HTTP/Methods">HTTP リクエストメソッド</a></li> <li><a href="http://json.org/">ECMA のオフィシャル JSON Web サイト</a></li> </ul> diff --git a/files/ja/learn/javascript/objects/object_building_practice/index.html b/files/ja/learn/javascript/objects/object_building_practice/index.html index af94a8eede..baa6d98964 100644 --- a/files/ja/learn/javascript/objects/object_building_practice/index.html +++ b/files/ja/learn/javascript/objects/object_building_practice/index.html @@ -24,7 +24,7 @@ translation_of: Learn/JavaScript/Objects/Object_building_practice <tbody> <tr> <th scope="row">前提条件:</th> - <td>基礎的なコンピューターの知識、HTML と CSS への基本的な理解、基礎的な JavaScript の理解 (<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>と <a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a>を参照) とオブジェクト指向JavaScript の基本 (<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks">JavaScript オブジェクトの基本</a>を参照)。</td> + <td>基礎的なコンピューターの知識、HTML と CSS への基本的な理解、基礎的な JavaScript の理解 (<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>と <a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a>を参照) とオブジェクト指向JavaScript の基本 (<a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript オブジェクトの基本</a>を参照)。</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/javascript/objects/object_prototypes/index.html b/files/ja/learn/javascript/objects/object_prototypes/index.html index af08b53692..f955783416 100644 --- a/files/ja/learn/javascript/objects/object_prototypes/index.html +++ b/files/ja/learn/javascript/objects/object_prototypes/index.html @@ -143,7 +143,7 @@ translation_of: Learn/JavaScript/Objects/Object_prototypes <pre class="brush: js notranslate">let myString = 'This is my string.';</pre> -<p><code>myString</code>が最初から、<code><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split">split()</a></code>、<code><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf">indexOf()</a></code>、<code><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a></code>などの便利なメソッドを多数持っている理由です。</p> +<p><code>myString</code>が最初から、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split">split()</a></code>、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf">indexOf()</a></code>、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a></code>などの便利なメソッドを多数持っている理由です。</p> <div class="note"> <p><strong>Note</strong>: このセクションを理解して、もっと知りたいと思ったら、<a href="/ja/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#Using_prototypes_in_JavaScript">JavaScript でのプロトタイプの使用</a> についてのより詳細なガイドを読む価値があります。このセクションは、これらの概念に初めて出会ったときに少しでも理解しやすくするために、意図的に簡略化しています。</p> diff --git a/files/ja/learn/javascript/objects/test_your_skills_colon__object_basics/index.html b/files/ja/learn/javascript/objects/test_your_skills_colon__object_basics/index.html index d284729df3..e869504561 100644 --- a/files/ja/learn/javascript/objects/test_your_skills_colon__object_basics/index.html +++ b/files/ja/learn/javascript/objects/test_your_skills_colon__object_basics/index.html @@ -5,7 +5,7 @@ translation_of: 'Learn/JavaScript/Objects/Test_your_skills:_Object_basics' --- <div>{{learnsidebar}}</div> -<p>このスキルテストの目的は、<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a>の理解度をテストすることです。</p> +<p>このスキルテストの目的は、<a href="/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a>の理解度をテストすることです。</p> <div class="blockIndicator note"> <p><strong>注意</strong>: 以下のインタラクティブなエディターでソリューションを試すこともできますが、コードをダウンロードし、<a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>や<a href="https://glitch.com/">Glitch</a>のようなオンラインツールを使用してタスクを実行すると役立つ場合があります。<br> diff --git a/files/ja/learn/performance/business_case_for_performance/index.html b/files/ja/learn/performance/business_case_for_performance/index.html index 106a517a8f..6b4fef087c 100644 --- a/files/ja/learn/performance/business_case_for_performance/index.html +++ b/files/ja/learn/performance/business_case_for_performance/index.html @@ -72,12 +72,12 @@ translation_of: Learn/Performance/business_case_for_performance <li><a href="/ja/docs/Learn/Performance/What_is_web_performance">ウェブパフォーマンスとは何ですか？</a></li> <li><a href="/ja/docs/Learn/Performance/Perceived_performance">ユーザーはパフォーマンスをどのように知覚しますか？</a></li> <li><a href="/ja/docs/Learn/Performance/Measuring_performance">パフォーマンスの測定</a></li> - <li><a href="/en-US/docs/Learn/Performance/Multimedia">Multimedia: images</a></li> - <li><a href="/en-US/docs/Learn/Performance/video">Multimedia: video</a></li> - <li><a href="/en-US/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a>.</li> - <li><a href="/en-US/docs/Learn/Performance/HTML">HTML performance features</a></li> - <li><a href="/en-US/docs/Learn/Performance/CSS">CSS performance features</a></li> - <li><a href="/en-US/docs/Learn/Performance/Fonts">Fonts and performance</a></li> - <li><a href="/en-US/docs/Learn/Performance/Mobile">Mobile performance</a></li> + <li><a href="/ja/docs/Learn/Performance/Multimedia">Multimedia: images</a></li> + <li><a href="/ja/docs/Learn/Performance/video">Multimedia: video</a></li> + <li><a href="/ja/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a>.</li> + <li><a href="/ja/docs/Learn/Performance/HTML">HTML performance features</a></li> + <li><a href="/ja/docs/Learn/Performance/CSS">CSS performance features</a></li> + <li><a href="/ja/docs/Learn/Performance/Fonts">Fonts and performance</a></li> + <li><a href="/ja/docs/Learn/Performance/Mobile">Mobile performance</a></li> <li><a href="/ja/docs/Learn/Performance/business_case_for_performance">パフォーマンスに光をあてる</a></li> </ul> diff --git a/files/ja/learn/performance/measuring_performance/index.html b/files/ja/learn/performance/measuring_performance/index.html index f70a9cfa20..3f4985423c 100644 --- a/files/ja/learn/performance/measuring_performance/index.html +++ b/files/ja/learn/performance/measuring_performance/index.html @@ -21,7 +21,7 @@ translation_of: Learn/Performance/Measuring_performance <tbody> <tr> <th scope="row">前提:</th> - <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、<a href="/en-US/docs/Learn/Getting_started_with_the_web">クライアントサイドのウェブ技術</a>の基本的な知識</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、<a href="/ja/docs/Learn/Getting_started_with_the_web">クライアントサイドのウェブ技術</a>の基本的な知識</td> </tr> <tr> <th scope="row">目的:</th> @@ -94,12 +94,12 @@ translation_of: Learn/Performance/Measuring_performance <li><a href="/ja/docs/Learn/Performance/What_is_web_performance">ウェブパフォーマンスとは何か</a></li> <li><a href="/ja/docs/Learn/Performance/Perceived_performance">ユーザーはパフォーマンスをどのように知覚するか</a></li> <li><a href="/ja/docs/Learn/Performance/Measuring_performance">パフォーマンスの測定</a></li> - <li><a href="/en-US/docs/Learn/Performance/Multimedia">Multimedia: images</a></li> - <li><a href="/en-US/docs/Learn/Performance/video">Multimedia: video</a></li> - <li><a href="/en-US/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a>.</li> - <li><a href="/en-US/docs/Learn/Performance/HTML">HTML performance features</a></li> - <li><a href="/en-US/docs/Learn/Performance/CSS">CSS performance features</a></li> - <li><a href="/en-US/docs/Learn/Performance/Fonts">Fonts and performance</a></li> - <li><a href="/en-US/docs/Learn/Performance/Mobile">Mobile performance</a></li> + <li><a href="/ja/docs/Learn/Performance/Multimedia">Multimedia: images</a></li> + <li><a href="/ja/docs/Learn/Performance/video">Multimedia: video</a></li> + <li><a href="/ja/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a>.</li> + <li><a href="/ja/docs/Learn/Performance/HTML">HTML performance features</a></li> + <li><a href="/ja/docs/Learn/Performance/CSS">CSS performance features</a></li> + <li><a href="/ja/docs/Learn/Performance/Fonts">Fonts and performance</a></li> + <li><a href="/ja/docs/Learn/Performance/Mobile">Mobile performance</a></li> <li><a href="/ja/docs/Learn/Performance/business_case_for_performance">パフォーマスに光をあてる</a></li> </ul> diff --git a/files/ja/learn/performance/perceived_performance/index.html b/files/ja/learn/performance/perceived_performance/index.html index 8af223ce2e..fceb427902 100644 --- a/files/ja/learn/performance/perceived_performance/index.html +++ b/files/ja/learn/performance/perceived_performance/index.html @@ -18,7 +18,7 @@ translation_of: Learn/Performance/perceived_performance <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、<a href="/ja/docs/Learn/Getting_started_with_the_web">クライアントサイドのウェブ技術</a>の基本的な知識</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、<a href="/ja/docs/Learn/Getting_started_with_the_web">クライアントサイドのウェブ技術</a>の基本的な知識</td> </tr> <tr> <th scope="row">目的:</th> diff --git a/files/ja/learn/performance/web_performance_basics/index.html b/files/ja/learn/performance/web_performance_basics/index.html index 276e2f2e04..02ea575063 100644 --- a/files/ja/learn/performance/web_performance_basics/index.html +++ b/files/ja/learn/performance/web_performance_basics/index.html @@ -12,23 +12,23 @@ translation_of: Learn/Performance/Web_Performance_Basics <h2 id="Best_practices">Best practices</h2> <ul> - <li>Start with learning the <a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path">critical rendering path</a> of the browser. Knowing this will help you understand how to improve the performance of the site.</li> - <li>Using <a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Controlling_resource_delivery_with_resource_hints">resource hints</a> such as <code>rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload</code></li> + <li>Start with learning the <a href="/ja/docs/Web/Performance/Critical_rendering_path">critical rendering path</a> of the browser. Knowing this will help you understand how to improve the performance of the site.</li> + <li>Using <a href="/ja/docs/Web/Performance/Controlling_resource_delivery_with_resource_hints">resource hints</a> such as <code>rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload</code></li> <li>Keep the size of Javascript to a <a href="https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4">minimum</a>. Only use as much Javascript as needed for the current page.</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Performance/CSS_performance">CSS</a> performance factors</li> - <li>Use <a href="https://developer.mozilla.org/en-US/docs/Learn/Performance/HTTP2">HTTP/2</a> on your server (or CDN).</li> + <li><a href="/ja/docs/Learn/Performance/CSS_performance">CSS</a> performance factors</li> + <li>Use <a href="/ja/docs/Learn/Performance/HTTP2">HTTP/2</a> on your server (or CDN).</li> <li>Use a CDN for resources which can reduce load times significantly.</li> <li>Compress your resources using <a href="https://www.gnu.org/software/gzip/" rel="nofollow noopener">gzip</a>, <a href="https://github.com/google/brotli" rel="nofollow noopener">Brotli</a>, and <a href="https://github.com/google/zopfli" rel="nofollow noopener">Zopfli</a>.</li> <li>Image optimization (use CSS animation, or SVG if possible).</li> <li>Lazy loading parts of your application outside the viewport. If you do, have a backup plan for SEO (e.g render full page for bot traffic); for example, by using the {{htmlattrxref("loading", "img")}} attribute on the {{HTMLElement("img")}} element</li> - <li>It is also crucial to realize what is really important to your users. It might not be absolute timing, but <a href="https://developer.mozilla.org/en-US/docs/Learn/Performance/perceived_performance">user perception</a>.</li> + <li>It is also crucial to realize what is really important to your users. It might not be absolute timing, but <a href="/ja/docs/Learn/Performance/perceived_performance">user perception</a>.</li> </ul> <h2 id="Quick_Wins">Quick Wins</h2> <h3 id="CSS">CSS</h3> -<p>Web performance is all about user experience and perceived performance. As we learned in the <a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path">critical rendering path</a> document, linking CSS with a tradional link tag with rel="stylesheet" is synchronous and blocks rendering. Optimize the rendering of your page by removing blocking CSS.</p> +<p>Web performance is all about user experience and perceived performance. As we learned in the <a href="/ja/docs/Web/Performance/Critical_rendering_path">critical rendering path</a> document, linking CSS with a tradional link tag with rel="stylesheet" is synchronous and blocks rendering. Optimize the rendering of your page by removing blocking CSS.</p> <p>To load CSS asynchronously one can simpy set the media type to print and then change to all once loaded. The following snippet includes an onload attribute, requiring Javascript, so it is important to include a noscript tag with a traditional fallback.</p> @@ -45,13 +45,13 @@ translation_of: Learn/Performance/Web_Performance_Basics <h3 id="Javascript">Javascript</h3> -<p>Avoid Javascript blocking by using the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script">async</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script">defer</a> attributes, or link javascript assets after the page's DOM elements. Javascript only block rendering for elements that appear after the script tag in the DOM tree.</p> +<p>Avoid Javascript blocking by using the <a href="/ja/docs/Web/HTML/Element/script">async</a> or <a href="/ja/docs/Web/HTML/Element/script">defer</a> attributes, or link javascript assets after the page's DOM elements. Javascript only block rendering for elements that appear after the script tag in the DOM tree.</p> <h3 id="Web_Fonts">Web Fonts</h3> <p>EOT and TTF formats are not compressed by default. Apply compression such as GZIP or Brotli for these file types. Use WOFF and WOFF2. These formats have compression built in.</p> -<p>Within @font-face use font-display: swap. By using font display swap the browser will not block rendering and will use the backup system fonts that are defined. Optimiize <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight">font weight</a> to match the web font as closely as possible.</p> +<p>Within @font-face use font-display: swap. By using font display swap the browser will not block rendering and will use the backup system fonts that are defined. Optimiize <a href="/ja/docs/Web/CSS/font-weight">font weight</a> to match the web font as closely as possible.</p> <h4 id="Icon_web_fonts">Icon web fonts</h4> @@ -60,19 +60,19 @@ translation_of: Learn/Performance/Web_Performance_Basics <h2 id="Tools">Tools</h2> <ul> - <li>Learn to use the <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance">Firefox Dev Tools</a> to profile your site.</li> + <li>Learn to use the <a href="/ja/docs/Tools/Performance">Firefox Dev Tools</a> to profile your site.</li> <li><a href="https://developers.google.com/speed/docs/insights/v5/about">Pagespeed Insights</a> can analyze your page and give some general hints to improve performance.</li> <li><a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a> can give you a detailed breakdown of many aspects of your site including performance, SEO and accessibility.</li> <li>Test your page's speed using <a href="http://webpagetest.org/">Webpagetest.org</a>, where you can use different real device types and locations.</li> <li>Try the <a href="https://developers.google.com/web/tools/chrome-user-experience-report">Chrome User Experience Report</a> which quantifies real user metrics.</li> - <li>Define a<a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Performance_budget"> performance budget.</a></li> + <li>Define a<a href="/ja/docs/Web/Performance/Performance_budget"> performance budget.</a></li> </ul> <h3 id="APIs">APIs</h3> <ul> <li>Gather user metrics using <a href="https://github.com/akamai/boomerang">https://github.com/akamai/boomerang</a></li> - <li>Or directly gather with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/performance">window.performance.timing</a></li> + <li>Or directly gather with <a href="/ja/docs/Web/API/Window/performance">window.performance.timing</a></li> </ul> <h3 id="Things_not_to_do_bad_practices">Things not to do (bad practices)</h3> diff --git a/files/ja/learn/performance/what_is_web_performance/index.html b/files/ja/learn/performance/what_is_web_performance/index.html index 27dc13b688..a130006b2a 100644 --- a/files/ja/learn/performance/what_is_web_performance/index.html +++ b/files/ja/learn/performance/what_is_web_performance/index.html @@ -31,7 +31,7 @@ translation_of: Learn/Performance/What_is_web_performance </tbody> </table> -<p><em>* 次の記事で扱う主観的な<a href="/en-US/docs/Learn/Performance/Perceived_performance">知覚パフォーマンス</a>の対義語</em></p> +<p><em>* 次の記事で扱う主観的な<a href="/ja/docs/Learn/Performance/Perceived_performance">知覚パフォーマンス</a>の対義語</em></p> <h2 id="What_is_web_performance">ウェブパフォーマンスとは何か</h2> diff --git a/files/ja/learn/server-side/django/development_environment/index.html b/files/ja/learn/server-side/django/development_environment/index.html index ac824323ea..a7b594cf09 100644 --- a/files/ja/learn/server-side/django/development_environment/index.html +++ b/files/ja/learn/server-side/django/development_environment/index.html @@ -190,7 +190,7 @@ translation_of: Learn/Server-side/Django/development_environment <h2 id="Python仮想環境内でのDjangoの使用">Python仮想環境内でのDjangoの使用</h2> -<p>仮想環境を作成するために使用するライブラリは、 <a href="https://virtualenvwrapper.readthedocs.io/en/latest/index.html">virtualenvwrapper</a> （LinuxとmacOS X）と<a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a>（Windows）です。これらはどちらも<a href="https://developer.mozilla.org/en-US/docs/Python/Virtualenv">virtualenv</a>ツールを使用します。ラッパーツールは、すべてのプラットフォーム上のインターフェイスを管理するための一貫したインターフェイスを作成します。</p> +<p>仮想環境を作成するために使用するライブラリは、 <a href="https://virtualenvwrapper.readthedocs.io/en/latest/index.html">virtualenvwrapper</a> （LinuxとmacOS X）と<a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a>（Windows）です。これらはどちらも<a href="/ja/docs/Python/Virtualenv">virtualenv</a>ツールを使用します。ラッパーツールは、すべてのプラットフォーム上のインターフェイスを管理するための一貫したインターフェイスを作成します。</p> <h3 id="仮想環境ソフトウェアのインストール">仮想環境ソフトウェアのインストール</h3> diff --git a/files/ja/learn/server-side/django/introduction/index.html b/files/ja/learn/server-side/django/introduction/index.html index 882c54bb56..8f22a74408 100644 --- a/files/ja/learn/server-side/django/introduction/index.html +++ b/files/ja/learn/server-side/django/introduction/index.html @@ -18,7 +18,7 @@ translation_of: Learn/Server-side/Django/Introduction <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシーを持っていること。<a href="/ja/docs/Learn/Server-side/First_steps">サーバーサイドウェブプログラミング</a> の一般的な理解、特に<a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">ウェブサイトにおけるクライントとサーバーのやりとりの仕組み</a>を理解していること。</td> + <td>基本的なコンピューターリテラシーを持っていること。<a href="/ja/docs/Learn/Server-side/First_steps">サーバーサイドウェブプログラミング</a> の一般的な理解、特に<a href="/ja/docs/Learn/Server-side/First_steps/Client-Server_overview">ウェブサイトにおけるクライントとサーバーのやりとりの仕組み</a>を理解していること。</td> </tr> <tr> <th scope="row">目的:</th> @@ -45,7 +45,7 @@ translation_of: Learn/Server-side/Django/Introduction <br> <em>パスワードハッシュは、送信されたパスワードから <a href="https://ja.wikipedia.org/wiki/%E6%9A%97%E5%8F%B7%E5%AD%A6%E7%9A%84%E3%83%8F%E3%83%83%E3%82%B7%E3%83%A5%E9%96%A2%E6%95%B0">暗号化ハッシュ関数</a>を介して生成された固定長の値です。 Djangoは入力されたパスワードが正しいかどうかを、ハッシュ関数を介した値と保存されたハッシュ値を比較することでチェックできます。これは "一方向性" の機能であり、もし保存されているハッシュ値が侵害されても、攻撃者が元のパスワードを解読するのは困難です。</em><br> <br> - Djangoは、SQLインジェクション、クロスサイトスクリプティング(XSS)、クロスサイトリクエストフォージェリ(CSRF)、クリックジャッキングなどの多くの脆弱性に対する保護が有効です（これらの攻撃についての詳細は、 <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">ウェブサイトのセキュリティ</a> を参照してください）。</dd> + Djangoは、SQLインジェクション、クロスサイトスクリプティング(XSS)、クロスサイトリクエストフォージェリ(CSRF)、クリックジャッキングなどの多くの脆弱性に対する保護が有効です（これらの攻撃についての詳細は、 <a href="/ja/docs/Learn/Server-side/First_steps/Website_security">ウェブサイトのセキュリティ</a> を参照してください）。</dd> <dt>スケーラブル</dt> <dd>Djangoはコンポーネントベースの “<a href="https://ja.wikipedia.org/wiki/%E3%82%B7%E3%82%A7%E3%82%A2%E3%83%BC%E3%83%89%E3%83%BB%E3%83%8A%E3%83%83%E3%82%B7%E3%83%B3%E3%82%B0%E3%83%BB%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3">シェアードナッシング</a>” アーキテクチャを採用しています（アーキテクチャの各部分は他と独立しており、必要に応じて置き換え、変更できます）。異なる部分を明確に分離しているため、キャッシュサーバー、データベースサーバー、アプリケーションサーバーの各ハードウェアをそれぞれ追加することによって、トラフィックの増加に合わせてスケールできるようになっています。いくつかの最も忙しいサイトは、ニーズを満たすためにDjangoを適切にスケールさせています（InstagramやDisqusなど）</dd> <dt>メンテナンス可能</dt> @@ -100,7 +100,7 @@ translation_of: Learn/Server-side/Django/Introduction </ul> <div class="note"> -<p><strong>ノート</strong>: Djangoはこの構成を "モデルビューテンプレート（Model View Template, MVT）" アーキテクチャと呼んでいます。これは <a href="/en-US/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture">Model View Controller</a> アーキテクチャとよく似ています。 </p> +<p><strong>ノート</strong>: Djangoはこの構成を "モデルビューテンプレート（Model View Template, MVT）" アーキテクチャと呼んでいます。これは <a href="/ja/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture">Model View Controller</a> アーキテクチャとよく似ています。 </p> </div> <ul> diff --git a/files/ja/learn/server-side/django/models/index.html b/files/ja/learn/server-side/django/models/index.html index fb3952f6b9..33db071e52 100644 --- a/files/ja/learn/server-side/django/models/index.html +++ b/files/ja/learn/server-side/django/models/index.html @@ -13,7 +13,7 @@ translation_of: Learn/Server-side/Django/Models <tbody> <tr> <th scope="row">前提条件:</th> - <td><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django チュートリアル Part 2: Web サイトの骨組み作成</a>.</td> + <td><a href="/ja/docs/Learn/Server-side/Django/skeleton_website">Django チュートリアル Part 2: Web サイトの骨組み作成</a>.</td> </tr> <tr> <th scope="row">目標:</th> @@ -26,7 +26,7 @@ translation_of: Learn/Server-side/Django/Models <p>Django web applications access and manage data through Python objects referred to as models. Models define the <em>structure</em> of stored data, including the field <em>types</em> and possibly also their maximum size, default values, selection list options, help text for documentation, label text for forms, etc. The definition of the model is independent of the underlying database — you can choose one of several as part of your project settings. Once you've chosen what database you want to use, you don't need to talk to it directly at all — you just write your model structure and other code, and Django handles all the dirty work of communicating with the database for you.</p> -<p>This tutorial shows how to define and access the models for the <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary website</a> example.</p> +<p>This tutorial shows how to define and access the models for the <a href="/ja/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary website</a> example.</p> <h2 id="Designing_the_LocalLibrary_models">Designing the LocalLibrary models</h2> @@ -443,19 +443,19 @@ python3 manage.py migrate</code></pre> <h2 id="In_this_module">In this module</h2> <ul> - <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> </ul> diff --git a/files/ja/learn/server-side/django/skeleton_website/index.html b/files/ja/learn/server-side/django/skeleton_website/index.html index 0d76ae46eb..f56181d038 100644 --- a/files/ja/learn/server-side/django/skeleton_website/index.html +++ b/files/ja/learn/server-side/django/skeleton_website/index.html @@ -21,7 +21,7 @@ translation_of: Learn/Server-side/Django/skeleton_website <tbody> <tr> <th scope="row">前提条件:</th> - <td><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Django 開発環境の設定</a>。<a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Djangoチュートリアル</a>を確認してください。</td> + <td><a href="/ja/docs/Learn/Server-side/Django/development_environment">Django 開発環境の設定</a>。<a href="/ja/docs/Learn/Server-side/Django/Tutorial_local_library_website">Djangoチュートリアル</a>を確認してください。</td> </tr> <tr> <th scope="row">目的:</th> @@ -47,7 +47,7 @@ translation_of: Learn/Server-side/Django/skeleton_website <li><span style="line-height: 1.5;">url/path マッパーはそれらのアプリケーションを</span>結びつけます。</li> </ol> -<p><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Local Library website</a> のために、ウェブサイトフォルダとプロジェクトフォルダは<em>locallibrary</em> という名前をつけます。また、１つのアプリケーションは<em>catalog</em>という名前をつけます。 したがって、最上位のフォルダ構成は以下のようになります。:</p> +<p><a href="/ja/docs/Learn/Server-side/Django/Tutorial_local_library_website">Local Library website</a> のために、ウェブサイトフォルダとプロジェクトフォルダは<em>locallibrary</em> という名前をつけます。また、１つのアプリケーションは<em>catalog</em>という名前をつけます。 したがって、最上位のフォルダ構成は以下のようになります。:</p> <pre class="brush: bash"><em>locallibrary/ # Website folder</em> <strong>manage.py </strong># Script to run Django tools for this project (created using django-admin) @@ -59,7 +59,7 @@ translation_of: Learn/Server-side/Django/skeleton_website <h2 id="プロジェクトの作成">プロジェクトの作成</h2> -<p>始めにコマンドプロンプトまたはターミナルを開いて、（先に自分が仮想環境(<a href="/en-US/docs/Learn/Server-side/Django/development_environment#Using_a_virtual_environment">virtual environment</a>)にいることを確認して下さい）、Djangoアプリを格納したい場所へ移動します（ドキュメントフォルダの中など探しやすい場所にしましょう）。そして、新しいウェブサイトのフォルダ（この場合は<em> locallibrary</em>）<span style="line-height: 1.5;">を作りましょう。そして、cdコマンドでそのフォルダへ移動しましょう。</span></p> +<p>始めにコマンドプロンプトまたはターミナルを開いて、（先に自分が仮想環境(<a href="/ja/docs/Learn/Server-side/Django/development_environment#Using_a_virtual_environment">virtual environment</a>)にいることを確認して下さい）、Djangoアプリを格納したい場所へ移動します（ドキュメントフォルダの中など探しやすい場所にしましょう）。そして、新しいウェブサイトのフォルダ（この場合は<em> locallibrary</em>）<span style="line-height: 1.5;">を作りましょう。そして、cdコマンドでそのフォルダへ移動しましょう。</span></p> <pre class="brush: bash">mkdir locallibrary cd locallibrary</pre> @@ -154,7 +154,7 @@ cd locallibrary</pre> <p>追加した新しい行はアプリケーションの構成オブジェクト(<code>CatalogConfig</code>) を指定しており、それはアプリケーション作成時に<strong>/locallibrary/catalog/apps.py</strong> によって生成されています。</p> <div class="note"> -<p><strong>メモ</strong>: すでにたくさんの他の<code>INSTALLED_APPS</code> (<code>MIDDLEWARE</code>も同様。設定ファイルのさらに下の方にあります)が存在していることに気づいたでしょう。これらは、<a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django administration site</a> をサポートすること可能にし、その結果、Djangoが使用するたくさんの機能(セッション、認証など)をサポートします。</p> +<p><strong>メモ</strong>: すでにたくさんの他の<code>INSTALLED_APPS</code> (<code>MIDDLEWARE</code>も同様。設定ファイルのさらに下の方にあります)が存在していることに気づいたでしょう。これらは、<a href="/ja/docs/Learn/Server-side/Django/Admin_site">Django administration site</a> をサポートすること可能にし、その結果、Djangoが使用するたくさんの機能(セッション、認証など)をサポートします。</p> </div> <h2 id="データベースの指定">データベースの指定</h2> @@ -366,7 +366,7 @@ python3 manage.py migrate <p>You have now created a complete skeleton website project, which you can go on to populate with urls, models, views, and templates.</p> -<p>Now the skeleton for the <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Local Library website</a> is complete and running, it's time to start writing the code that makes this website do what it is supposed to do. </p> +<p>Now the skeleton for the <a href="/ja/docs/Learn/Server-side/Django/Tutorial_local_library_website">Local Library website</a> is complete and running, it's time to start writing the code that makes this website do what it is supposed to do. </p> <h2 id="参考文献">参考文献</h2> @@ -380,19 +380,19 @@ python3 manage.py migrate <h2 id="このモジュール内">このモジュール内</h2> <ul> - <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> </ul> diff --git a/files/ja/learn/server-side/django/web_application_security/index.html b/files/ja/learn/server-side/django/web_application_security/index.html index 496fac0fbd..238f39f416 100644 --- a/files/ja/learn/server-side/django/web_application_security/index.html +++ b/files/ja/learn/server-side/django/web_application_security/index.html @@ -7,13 +7,13 @@ translation_of: Learn/Server-side/Django/web_application_security <div>{{PreviousMenuNext("Learn/Server-side/Django/Deployment", "Learn/Server-side/Django/django_assessment_blog", "Learn/Server-side/Django")}}</div> -<div>ユーザーのデータを守ることはWebデザインにおいて重要です。 以前、より一般的なセキュリティの脅威の一部を <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Webセキュリティ</a> の記事で説明しました— 本記事ではDjangoにビルトインされている保護機能がそのような脅威にどう対応しているか、より実践的な動きを見ながら説明していきます。</div> +<div>ユーザーのデータを守ることはWebデザインにおいて重要です。 以前、より一般的なセキュリティの脅威の一部を <a href="/ja/docs/Web/Security">Webセキュリティ</a> の記事で説明しました— 本記事ではDjangoにビルトインされている保護機能がそのような脅威にどう対応しているか、より実践的な動きを見ながら説明していきます。</div> <table class="learn-box standard-table"> <tbody> <tr> <th scope="row">前提条件:</th> - <td>Read the サーバーサイドプログラミングの "<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Website_security">Webサイトセキュリティ</a>" の記事を読んでいること。Djangoチュートリアルを少なくとも <a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a> まで完了していること。</td> + <td>Read the サーバーサイドプログラミングの "<a href="/ja/docs/Learn/Server-side/First_steps/Website_security">Webサイトセキュリティ</a>" の記事を読んでいること。Djangoチュートリアルを少なくとも <a href="/ja/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a> まで完了していること。</td> </tr> <tr> <th scope="row">目標:</th> @@ -24,7 +24,7 @@ translation_of: Learn/Server-side/Django/web_application_security <h2 id="概要">概要</h2> -<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Website security</a> topic provides an overview of what website security means for server-side design, and some of the more common threats that you may need to protect against. One of the key messages in that article is that almost all attacks are successful when the web application trusts data from the browser.</p> +<p>The <a href="/ja/docs/Web/Security">Website security</a> topic provides an overview of what website security means for server-side design, and some of the more common threats that you may need to protect against. One of the key messages in that article is that almost all attacks are successful when the web application trusts data from the browser.</p> <div class="warning"> <p><strong>Important:</strong> The single most important lesson you can learn about website security is to <strong>never trust data from the browser</strong>. This includes <code>GET</code> request data in URL parameters, <code>POST</code> data, HTTP headers and cookies, user-uploaded files, etc. Always check and sanitize all incoming data. Always assume the worst.</p> @@ -34,13 +34,13 @@ translation_of: Learn/Server-side/Django/web_application_security <h2 id="Common_threatsprotections">Common threats/protections</h2> -<p>Rather than duplicate the Django documentation here, in this article we'll demonstrate just a few of the security features in the context of our Django <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> tutorial.</p> +<p>Rather than duplicate the Django documentation here, in this article we'll demonstrate just a few of the security features in the context of our Django <a href="/ja/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> tutorial.</p> <h3 id="Cross_site_scripting_(XSS)">Cross site scripting (XSS)</h3> <p>XSS is a term used to describe a class of attacks that allow an attacker to inject client-side scripts <em>through</em> the website into the browsers of other users. This is usually achieved by storing malicious scripts in the database where they can be retrieved and displayed to other users, or by getting users to click a link that will cause the attacker’s JavaScript to be executed by the user’s browser.</p> -<p>Django's template system protects you against the majority of XSS attacks by <a href="https://docs.djangoproject.com/en/2.0/ref/templates/language/#automatic-html-escaping">escaping specific characters</a> that are "dangerous" in HTML. We can demonstrate this by attempting to inject some JavaScript into our LocalLibrary website using the Create-author form we set up in <a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a>.</p> +<p>Django's template system protects you against the majority of XSS attacks by <a href="https://docs.djangoproject.com/en/2.0/ref/templates/language/#automatic-html-escaping">escaping specific characters</a> that are "dangerous" in HTML. We can demonstrate this by attempting to inject some JavaScript into our LocalLibrary website using the Create-author form we set up in <a href="/ja/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a>.</p> <ol> <li>Start the website using the development server (<code>python3 manage.py runserver</code>).</li> @@ -114,7 +114,7 @@ translation_of: Learn/Server-side/Django/web_application_security <dt>SQL injection protection</dt> <dd>SQL injection vulnerabilities enable malicious users to execute arbitrary SQL code on a database, allowing data to be accessed, modified, or deleted irrespective of the user's permissions. In almost every case you'll be accessing the database using Django’s querysets/models, so the resulting SQL will be properly escaped by the underlying database driver. If you do need to write raw queries or custom SQL then you'll need to explicitly think about preventing SQL injection.</dd> <dt>Clickjacking protection</dt> - <dd>In this attack a malicious user hijacks clicks meant for a visible top level site and routes them to a hidden page beneath. This technique might be used, for example, to display a legitimate bank site but capture the login credentials in an invisible <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" title="The HTML Inline Frame Element (<iframe>) represents a nested browsing context, effectively embedding another HTML page into the current page. In HTML 4.01, a document may contain a head and a body or a head and a frameset, but not both a body and a frameset. However, an <iframe> can be used within a normal document body. Each browsing context has its own session history and active document. The browsing context that contains the embedded content is called the parent browsing context. The top-level browsing context (which has no parent) is typically the browser window."><code><iframe></code></a> controlled by the attacker. Django contains <a href="https://docs.djangoproject.com/en/2.0/ref/clickjacking/#clickjacking-prevention">clickjacking protection</a> in the form of the <a href="https://docs.djangoproject.com/en/2.0/ref/middleware/#django.middleware.clickjacking.XFrameOptionsMiddleware" title="django.middleware.clickjacking.XFrameOptionsMiddleware"><code>X-Frame-Options middleware</code></a> which, in a supporting browser, can prevent a site from being rendered inside a frame.</dd> + <dd>In this attack a malicious user hijacks clicks meant for a visible top level site and routes them to a hidden page beneath. This technique might be used, for example, to display a legitimate bank site but capture the login credentials in an invisible <a href="/ja/docs/Web/HTML/Element/iframe" title="The HTML Inline Frame Element (<iframe>) represents a nested browsing context, effectively embedding another HTML page into the current page. In HTML 4.01, a document may contain a head and a body or a head and a frameset, but not both a body and a frameset. However, an <iframe> can be used within a normal document body. Each browsing context has its own session history and active document. The browsing context that contains the embedded content is called the parent browsing context. The top-level browsing context (which has no parent) is typically the browser window."><code><iframe></code></a> controlled by the attacker. Django contains <a href="https://docs.djangoproject.com/en/2.0/ref/clickjacking/#clickjacking-prevention">clickjacking protection</a> in the form of the <a href="https://docs.djangoproject.com/en/2.0/ref/middleware/#django.middleware.clickjacking.XFrameOptionsMiddleware" title="django.middleware.clickjacking.XFrameOptionsMiddleware"><code>X-Frame-Options middleware</code></a> which, in a supporting browser, can prevent a site from being rendered inside a frame.</dd> <dt>Enforcing SSL/HTTPS</dt> <dd>SSL/HTTPS can be enabled on the web server in order to encrypt all traffic between the site and browser, including authentication credentials that would otherwise be sent in plain text (enabling HTTPS is highly recommended). If HTTPS is enabled then Django provides a number of other protections you can use:</dd> </dl> @@ -142,15 +142,15 @@ translation_of: Learn/Server-side/Django/web_application_security <p>This has been a very brief foray into web security. We strongly recommend that you read <a href="https://docs.djangoproject.com/en/2.0/topics/security/">Security in Django</a> to gain a deeper understanding.</p> -<p>The next and final step in this module about Django is to complete the <a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">assessment task</a>.</p> +<p>The next and final step in this module about Django is to complete the <a href="/ja/docs/Learn/Server-side/Django/django_assessment_blog">assessment task</a>.</p> <h2 id="See_also">See also</h2> <ul> <li><a href="https://docs.djangoproject.com/en/2.0/topics/security/">Security in Django</a> (Django docs)</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/Security">Server side website security</a> (MDN)</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/Security">Web security</a> (MDN)</li> - <li><a href="/en-US/docs/Web/Security/Securing_your_site">Securing your site</a> (MDN)</li> + <li><a href="/ja/docs/Web/Security">Server side website security</a> (MDN)</li> + <li><a href="/ja/docs/Web/Security">Web security</a> (MDN)</li> + <li><a href="/ja/docs/Web/Security/Securing_your_site">Securing your site</a> (MDN)</li> </ul> <p>{{PreviousMenuNext("Learn/Server-side/Django/Deployment", "Learn/Server-side/Django/django_assessment_blog", "Learn/Server-side/Django")}}</p> @@ -160,21 +160,21 @@ translation_of: Learn/Server-side/Django/web_application_security <h2 id="In_this_module">In this module</h2> <ul> - <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> </ul> <p> </p> diff --git a/files/ja/learn/server-side/express_nodejs/deployment/index.html b/files/ja/learn/server-side/express_nodejs/deployment/index.html index 6f8b60f094..768095355b 100644 --- a/files/ja/learn/server-side/express_nodejs/deployment/index.html +++ b/files/ja/learn/server-side/express_nodejs/deployment/index.html @@ -35,7 +35,7 @@ translation_of: Learn/Server-side/Express_Nodejs/deployment <p>Once your site is finished (or finished "enough" to start public testing) you're going to need to host it somewhere more public and accessible than your personal development computer.</p> -<p>Up to now, you've been working in a <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">development environment</a>, using Express/Node as a web server to share your site to the local browser/network, and running your website with (insecure) development settings that expose debugging and other private information. Before you can host a website externally you're first going to have to:</p> +<p>Up to now, you've been working in a <a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">development environment</a>, using Express/Node as a web server to share your site to the local browser/network, and running your website with (insecure) development settings that expose debugging and other private information. Before you can host a website externally you're first going to have to:</p> <ul> <li>Choose an environment for hosting the Express app.</li> @@ -45,7 +45,7 @@ translation_of: Learn/Server-side/Express_Nodejs/deployment <p>This tutorial provides some guidance on your options for choosing a hosting site, a brief overview of what you need to do in order to get your Express app ready for production, and a worked example of how to install the LocalLibrary website onto the <a href="https://www.heroku.com/">Heroku</a> cloud hosting service.</p> -<p>Bear in mind that you don't have to use Heroku — there are other hosting services available. We've also provided a separate tutorial to show how to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">Install LocalLibrary on PWS/Cloud Foundry</a>.</p> +<p>Bear in mind that you don't have to use Heroku — there are other hosting services available. We've also provided a separate tutorial to show how to <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">Install LocalLibrary on PWS/Cloud Foundry</a>.</p> <h2 id="What_is_a_production_environment">What is a production environment?</h2> @@ -97,7 +97,7 @@ translation_of: Learn/Server-side/Express_Nodejs/deployment <li>Whether the "free" tier you're relying on expires over time, and whether the cost of migrating to a more expensive tier means you would have been better off using some other service in the first place!</li> </ul> -<p>The good news when you're starting out is that there are quite a few sites that provide computing environments for "free", albeit with some conditions. For example, <a href="https://www.heroku.com/">Heroku</a> provides a free but resource-limited <em>PaaS</em> environment "forever", while <a href="http://docs.aws.amazon.com/awsaccountbilling/latest/aboutv2/billing-free-tier.html">Amazon Web Services</a>, <a href="https://azure.microsoft.com/en-us/pricing/details/app-service/">Microsoft Azure</a>, and the open source option <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">PWS/Cloud Foundry</a> provide free credit when you first join.</p> +<p>The good news when you're starting out is that there are quite a few sites that provide computing environments for "free", albeit with some conditions. For example, <a href="https://www.heroku.com/">Heroku</a> provides a free but resource-limited <em>PaaS</em> environment "forever", while <a href="http://docs.aws.amazon.com/awsaccountbilling/latest/aboutv2/billing-free-tier.html">Amazon Web Services</a>, <a href="https://azure.microsoft.com/en-us/pricing/details/app-service/">Microsoft Azure</a>, and the open source option <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">PWS/Cloud Foundry</a> provide free credit when you first join.</p> <p>Many providers also have a "basic" tier that provides more useful levels of computing power and fewer limitations. <a href="https://www.digitalocean.com/">Digital Ocean</a> is an example of a popular hosting provider that offers a relatively inexpensive basic computing tier (in the $5 per month lower range at time of writing).</p> @@ -382,7 +382,7 @@ v8.9.1</pre> <pre class="brush: bash">npm install </pre> -<p>Now run the site (see <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes#Testing_the_routes">Testing the routes</a> for the relevant commands) and check that the site still behaves as you expect.</p> +<p>Now run the site (see <a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes#Testing_the_routes">Testing the routes</a> for the relevant commands) and check that the site still behaves as you expect.</p> <h4 id="Save_changes_to_Github">Save changes to Github</h4> @@ -446,7 +446,7 @@ Setting NODE_ENV and restarting limitless-tor-18923... done, v13 NODE_ENV: production </pre> -<p>We should also use a separate database for production, setting its URI in the <strong>MONGODB_URI</strong> environment variable. You can set up a new database and database-user exactly <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose#Setting_up_the_MongoDB_database">as we did originally</a>, and get its URI. You can set the URI as shown (obviously, using your own URI!)</p> +<p>We should also use a separate database for production, setting its URI in the <strong>MONGODB_URI</strong> environment variable. You can set up a new database and database-user exactly <a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose#Setting_up_the_MongoDB_database">as we did originally</a>, and get its URI. You can set the URI as shown (obviously, using your own URI!)</p> <pre class="brush: bash">>heroku config:set <strong>MONGODB_URI</strong>='mongodb://your_user:your_password@ds139278.mlab.com:39278/local_library_production' Setting MONGODB_URI and restarting limitless-tor-18923... done, v13 @@ -513,13 +513,13 @@ heroku ps #Display dyno status <h2 id="このモジュール">このモジュール</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/development_environment/index.html b/files/ja/learn/server-side/express_nodejs/development_environment/index.html index 7bfa26bb88..47c9aa76ce 100644 --- a/files/ja/learn/server-side/express_nodejs/development_environment/index.html +++ b/files/ja/learn/server-side/express_nodejs/development_environment/index.html @@ -46,7 +46,7 @@ translation_of: Learn/Server-side/Express_Nodejs/development_environment <p><em>Node</em> と <em>NPM</em> パッケージマネージャーは、準備されたバイナリパッケージ、インストーラー、オペレーティングシステムのパッケージマネージャー、またはソースから一緒にインストールされます (次のセクションを参照)。 <em>Express</em> は、<em>NPM</em> によって、個々の <em>Express</em> ウェブアプリケーションの依存関係として (テンプレートエンジン、データベースドライバー、認証ミドルウェア、静的ファイルを提供するためのミドルウェアなどの他のライブラリと共に) インストールされます。</p> -<p><em>NPM</em> は <a href="https://developer.mozilla.org/ja/docs/Glossary/MVC">MVC パターン</a>に従ったスケルトンの <em>Express</em> ウェブアプリケーションを作成するための便利なツールである <em>Express Application Generator</em>を (グローバルに) インストールするためにも使用できます。Express を使用するアプリを作成したり、同じアーキテクチャ上のレイアウトや依存関係を持つ Express アプリを構築したりするためにこのツールを使用する必要はないため、アプリケーションジェネレーターはオプションです。ただし、使い始めるのがはるかに簡単になり、モジュール式のアプリケーション構造が促進されるため、これを使用します。</p> +<p><em>NPM</em> は <a href="/ja/docs/Glossary/MVC">MVC パターン</a>に従ったスケルトンの <em>Express</em> ウェブアプリケーションを作成するための便利なツールである <em>Express Application Generator</em>を (グローバルに) インストールするためにも使用できます。Express を使用するアプリを作成したり、同じアーキテクチャ上のレイアウトや依存関係を持つ Express アプリを構築したりするためにこのツールを使用する必要はないため、アプリケーションジェネレーターはオプションです。ただし、使い始めるのがはるかに簡単になり、モジュール式のアプリケーション構造が促進されるため、これを使用します。</p> <div class="note"> <p><strong>メモ:</strong> 他のウェブフレームワークとは異なり、開発環境には独立した開発用の ウェブサーバーは含まれていません。<em>Node/Express</em> では、ウェブアプリケーションが独自のウェブサーバーを作成して実行します。</p> @@ -398,13 +398,13 @@ DEBUG=helloworld:* npm start <h2 id="このモジュールの中">このモジュールの中</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館のウェブサイト</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトンウェブサイトの作成</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラー</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館のウェブサイト</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトンウェブサイトの作成</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラー</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.html index 5c4acc7193..6598ed7e3d 100644 --- a/files/ja/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.html +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.html @@ -84,6 +84,6 @@ block content <h2 id="Next_steps">Next steps</h2> <ul> - <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> - <li>Proceed to final subarticle of part 5 : <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_detail_page_and_challenge">BookInstance detail page and challenge</a>.</li> + <li>Return to <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Proceed to final subarticle of part 5 : <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_detail_page_and_challenge">BookInstance detail page and challenge</a>.</li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html index f738902bfb..363c25ea64 100644 --- a/files/ja/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html @@ -53,12 +53,12 @@ block content <p><img alt="Author List Page - Express Local Library site" src="https://mdn.mozillademos.org/files/14468/LocalLibary_Express_Author_List.png" style="display: block; height: 453px; margin: 0px auto; width: 1200px;"></p> <div class="note"> -<p><strong>Note:</strong> The appearance of the author <em>lifespan </em>dates is ugly! You can improve this using the <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data#date_formatting">same approach</a> as we used for the <code>BookInstance</code> list (adding the virtual property for the lifespan to the <code>Author</code> model). This time, however, there are missing dates, and references to nonexistent properties are ignored unless strict mode is in effect. <code>moment()</code> returns the current time, and you don't want missing dates to be formatted as if they were today. One way to deal with this is to define the body of the function that returns a formatted date so it returns a blank string unless the date actually exists. For example:</p> +<p><strong>Note:</strong> The appearance of the author <em>lifespan </em>dates is ugly! You can improve this using the <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data#date_formatting">same approach</a> as we used for the <code>BookInstance</code> list (adding the virtual property for the lifespan to the <code>Author</code> model). This time, however, there are missing dates, and references to nonexistent properties are ignored unless strict mode is in effect. <code>moment()</code> returns the current time, and you don't want missing dates to be formatted as if they were today. One way to deal with this is to define the body of the function that returns a formatted date so it returns a blank string unless the date actually exists. For example:</p> <p><code>return this.date_of_birth ? moment(this.date_of_birth).format('YYYY-MM-DD') : '';</code></p> </div> -<h2 id="Genre_list_page—challenge!Edit">Genre list page—challenge!<a class="button section-edit only-icon" href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data$edit#Genre_list_page—challenge!" rel="nofollow, noindex"><span>Edit</span></a></h2> +<h2 id="Genre_list_page—challenge!Edit">Genre list page—challenge!<a class="button section-edit only-icon" href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data$edit#Genre_list_page—challenge!" rel="nofollow, noindex"><span>Edit</span></a></h2> <p>In this section you should implement your own genre list page. The page should display a list of all genres in the database, with each genre linked to its associated detail page. A screenshot of the expected result is shown below.</p> @@ -80,6 +80,6 @@ block content <h2 id="Next_steps">Next steps</h2> -<p>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</p> +<p>Return to <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</p> -<p>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page">Genre detail page</a>.</p> +<p>Proceed to the next subarticle of part 5: <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page">Genre detail page</a>.</p> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.html index f2080e6109..0655111870 100644 --- a/files/ja/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.html +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.html @@ -107,6 +107,6 @@ block content <h2 id="Next_steps">Next steps</h2> <ul> - <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> - <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_detail_page">Author detail page</a>.</li> + <li>Return to <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Proceed to the next subarticle of part 5: <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_detail_page">Author detail page</a>.</li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html index 4dfc9c5a5e..ec3737a832 100644 --- a/files/ja/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html @@ -56,13 +56,13 @@ block content <h2 class="highlight-spanned" id="What_does_it_look_like"><span class="highlight-span">What does it look like?</span></h2> -<p>Run the application (see <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes#Testing_the_routes">Testing the routes</a> for the relevant commands) and open your browser to <a class="external external-icon" href="http://localhost:3000/" rel="noopener">http://localhost:3000/</a>. Then select the <em>All books </em>link. If everything is set up correctly, your site should look something like the following screenshot.</p> +<p>Run the application (see <a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes#Testing_the_routes">Testing the routes</a> for the relevant commands) and open your browser to <a class="external external-icon" href="http://localhost:3000/" rel="noopener">http://localhost:3000/</a>. Then select the <em>All books </em>link. If everything is set up correctly, your site should look something like the following screenshot.</p> <p><img alt="Book List Page - Express Local Library site" src="https://mdn.mozillademos.org/files/14464/LocalLibary_Express_Book_List.png" style="border-style: solid; border-width: 1px; display: block; height: 387px; margin: 0px auto; width: 918px;"></p> <h2 id="Next_steps">Next steps</h2> <ul> - <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> - <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_list_page">BookInstance list page</a>.</li> + <li>Return to <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Proceed to the next subarticle of part 5: <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_list_page">BookInstance list page</a>.</li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.html index 3c6cace6a5..6ec61cb4ea 100644 --- a/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.html +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.html @@ -87,5 +87,5 @@ block content <h2 id="Next_steps">Next steps</h2> <ul> - <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Return to <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html index 9bc7ee305f..f196628b07 100644 --- a/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html @@ -64,6 +64,6 @@ block content <h2 id="Next_steps">Next steps</h2> <ul> - <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> - <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting_using_moment">Date formatting using moment</a>.</li> + <li>Return to <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Proceed to the next subarticle of part 5: <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting_using_moment">Date formatting using moment</a>.</li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html index 58851991b5..be96007add 100644 --- a/files/ja/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html @@ -53,8 +53,8 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting <h2 id="Next_steps">Next steps</h2> <ul> - <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> - <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_list_page">Author list page and Genre list page challenge</a>.</li> + <li>Return to <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Proceed to the next subarticle of part 5: <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_list_page">Author list page and Genre list page challenge</a>.</li> </ul> <p> </p> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html index 0639f79bc3..807f896ed5 100644 --- a/files/ja/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html @@ -132,6 +132,6 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_us <h2 id="Next_steps">Next steps</h2> <ul> - <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> - <li>Proceed to the next subarticle of Part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Template_primer">Template primer</a>.</li> + <li>Return to <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Proceed to the next subarticle of Part 5: <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Template_primer">Template primer</a>.</li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.html index 40770c5ef2..2edc3229bc 100644 --- a/files/ja/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.html +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.html @@ -57,7 +57,7 @@ exports.genre_detail = function(req, res, next) { }</strong> </pre> -<p>The message will then propagate through to our error handling code (this was set up when we <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website#error_handling">generated the app skeleton</a> - for more information see <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction#Handling_errors">Handling Errors</a>).</p> +<p>The message will then propagate through to our error handling code (this was set up when we <a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website#error_handling">generated the app skeleton</a> - for more information see <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction#Handling_errors">Handling Errors</a>).</p> </div> <p>The rendered view is <strong>genre_detail</strong> and it is passed variables for the <code>title</code>, <code>genre</code> and the list of books in this genre (<code>genre_books</code>).</p> @@ -116,6 +116,6 @@ block content <h2 id="Next_steps">Next steps</h2> <ul> - <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> - <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Book_detail_page">Book detail page</a>.</li> + <li>Return to <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Proceed to the next subarticle of part 5: <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Book_detail_page">Book detail page</a>.</li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/home_page/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/home_page/index.html index 3e2f337370..74a74b3109 100644 --- a/files/ja/learn/server-side/express_nodejs/displaying_data/home_page/index.html +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/home_page/index.html @@ -9,7 +9,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Home_page <h2 id="Route">Route</h2> -<p>We created our index page routes in a <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes">previous tutorial.</a> As a reminder, all the route functions are defined in <strong>/routes/catalog.js</strong>:</p> +<p>We created our index page routes in a <a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes">previous tutorial.</a> As a reminder, all the route functions are defined in <strong>/routes/catalog.js</strong>:</p> <pre class="brush: js ">// GET catalog home page. router.get('/', book_controller.index); //This actually maps to /catalog/ because we import the route with a /catalog prefix</pre> @@ -27,7 +27,7 @@ router.get('/', book_controller.index); //This actually maps to /catalog/ becau <p>The index controller function needs to fetch information about how many <code>Book</code>, <code>BookInstance</code>, available <code>BookInstance</code>, <code>Author</code>, and <code>Genre</code> records we have in the database, render this data in a template to create an HTML page, and then return it in an HTTP response.</p> <div class="note"> -<p><strong>Note:</strong> We use the <code><a class="external external-icon" href="http://mongoosejs.com/docs/api.html#model_Model.countDocuments" rel="noopener">countDocuments()</a></code> method to get the number of instances of each model. This is called on a model with an optional set of conditions to match against in the first argument and a callback in the second argument (as discussed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Using a Database (with Mongoose)</a>, and you can also return a <code>Query</code> and then execute it with a callback later. The callback will be returned when the database returns the count, with an error value (or <code>null</code>) as the first parameter and the count of records (or null if there was an error) as the second parameter.</p> +<p><strong>Note:</strong> We use the <code><a class="external external-icon" href="http://mongoosejs.com/docs/api.html#model_Model.countDocuments" rel="noopener">countDocuments()</a></code> method to get the number of instances of each model. This is called on a model with an optional set of conditions to match against in the first argument and a callback in the second argument (as discussed in <a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Using a Database (with Mongoose)</a>, and you can also return a <code>Query</code> and then execute it with a callback later. The callback will be returned when the database returns the count, with an error value (or <code>null</code>) as the first parameter and the count of records (or null if there was an error) as the second parameter.</p> <pre class="brush: js ">SomeModel.countDocuments({ a_model_field: 'match_value' }, function (err, count) { // ... do something if there is an err @@ -128,6 +128,6 @@ block content <h2 id="Next_steps">Next steps</h2> <ul> - <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> - <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Book_list_page">Book list page</a>.</li> + <li>Return to <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Proceed to the next subarticle of part 5: <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Book_list_page">Book list page</a>.</li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/index.html index 5726b6c0e1..3877cc76f3 100644 --- a/files/ja/learn/server-side/express_nodejs/displaying_data/index.html +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/index.html @@ -80,13 +80,13 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data <h2 id="このモジュール">このモジュール</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html index a97c536eb2..91d52ad66f 100644 --- a/files/ja/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html @@ -49,7 +49,7 @@ html(lang='en') <p>The template uses (and includes) JavaScript and CSS from <a class="external external-icon" href="http://getbootstrap.com/" rel="noopener">Bootstrap</a> to improve the layout and presentation of the HTML page. Using Bootstrap or another client-side web framework is a quick way to create an attractive page that can scale well on different browser sizes, and it also allows us to deal with the page presentation without having to get into any of the details—we just want to focus on the server-side code here!</p> -<p>The layout should be fairly obvious if you've read our above <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data#Template_primer">Template primer</a>. Note the use of <code>block content</code> as a placeholder for where the content for our individual pages will be placed.</p> +<p>The layout should be fairly obvious if you've read our above <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data#Template_primer">Template primer</a>. Note the use of <code>block content</code> as a placeholder for where the content for our individual pages will be placed.</p> <p>The base template also references a local css file (<strong>style.css</strong>) that provides a little additional styling. Open <strong>/public/stylesheets/style.css</strong> and replace its content with the following CSS code:</p> @@ -64,6 +64,6 @@ html(lang='en') <h2 id="Next_steps">Next steps</h2> <ul> - <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> - <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Home_page">Home page</a>.</li> + <li>Return to <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Proceed to the next subarticle of part 5: <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Home_page">Home page</a>.</li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/template_primer/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/template_primer/index.html index a68921a6a7..f8029cb236 100644 --- a/files/ja/learn/server-side/express_nodejs/displaying_data/template_primer/index.html +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/template_primer/index.html @@ -17,7 +17,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Template_primer <h2 class="highlight-spanned" id="Template_configuration"><span class="highlight-span">Template configuration</span></h2> -<p>The <em>LocalLibrary</em> was configured to use <a class="external external-icon" href="https://pugjs.org/api/getting-started.html" rel="noopener">Pug</a> when we <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">created the skeleton website</a>. You should see the pug module included as a dependency in the website's <strong>package.json</strong> file, and the following configuration settings in the <strong>app.js</strong> file. The settings tell us that we're using pug as the view engine, and that <em>Express</em> should search for templates in the <strong>/views</strong> subdirectory.</p> +<p>The <em>LocalLibrary</em> was configured to use <a class="external external-icon" href="https://pugjs.org/api/getting-started.html" rel="noopener">Pug</a> when we <a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">created the skeleton website</a>. You should see the pug module included as a dependency in the website's <strong>package.json</strong> file, and the following configuration settings in the <strong>app.js</strong> file. The settings tell us that we're using pug as the view engine, and that <em>Express</em> should search for templates in the <strong>/views</strong> subdirectory.</p> <pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// View engine setup.</span> app<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span><span class="string token">'views'</span><span class="punctuation token">,</span> path<span class="punctuation token">.</span><span class="function token">join</span><span class="punctuation token">(</span>__dirname<span class="punctuation token">,</span> <span class="string token">'views'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> @@ -121,7 +121,7 @@ else <p>Across a site, it is usual for all pages to have a common structure, including standard HTML markup for the head, footer, navigation, etc. Rather than forcing developers to duplicate this "boilerplate" in every page, <em>Pug</em> allows you to declare a base template and then extend it, replacing just the bits that are different for each specific page.</p> -<p>For example, the base template <strong>layout.pug</strong> created in our <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">skeleton project</a> looks like this:</p> +<p>For example, the base template <strong>layout.pug</strong> created in our <a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">skeleton project</a> looks like this:</p> <pre class="brush: html line-numbers language-html"><code class="language-html">doctype html html @@ -144,6 +144,6 @@ block content <h2 id="Next_steps">Next steps</h2> <ul> - <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> - <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_base_template">The LocalLibrary base template</a>.</li> + <li>Return to <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Proceed to the next subarticle of part 5: <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_base_template">The LocalLibrary base template</a>.</li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/forms/index.html b/files/ja/learn/server-side/express_nodejs/forms/index.html index ea3d378895..bf47160aaf 100644 --- a/files/ja/learn/server-side/express_nodejs/forms/index.html +++ b/files/ja/learn/server-side/express_nodejs/forms/index.html @@ -185,7 +185,7 @@ sanitizeBody('date').toDate(),</pre> <p>In order to implement our form handling code, we will need two routes that have the same URL pattern. The first (<code>GET</code>) route is used to display a new empty form for creating the object. The second route (<code>POST</code>) is used for validating data entered by the user, and then saving the information and redirecting to the detail page (if the data is valid) or redisplaying the form with errors (if the data is invalid).</p> -<p>We have already created the routes for all our model's create pages in <strong>/routes/catalog.js</strong> (in a <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes">previous tutorial</a>). For example, the genre routes are shown below:</p> +<p>We have already created the routes for all our model's create pages in <strong>/routes/catalog.js</strong> (in a <a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes">previous tutorial</a>). For example, the genre routes are shown below:</p> <pre class="brush: js notranslate">// GET request for creating a Genre. NOTE This must come before route that displays Genre (uses id). router.get('/genre/create', genre_controller.genre_create_get); @@ -199,12 +199,12 @@ router.post('/genre/create', genre_controller.genre_create_post); <p>The following sub articles will take us through the process of adding the required forms to our example application. You need to read and work through each one in turn, before moving on to the next one.</p> <ol> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Create_genre_form">Create Genre form</a> — Defining a page to create <code>Genre</code> objects.</li> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Create_author_form">Create Author form</a> — Defining a page to create <code>Author</code> objects.</li> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Create_book_form">Create Book form</a> — Defining a page/form to create <code>Book</code> objects.</li> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Create_BookInstance_form">Create BookInstance form</a> — Defining a page/form to create <code>BookInstance</code> objects.</li> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Delete_author_form">Delete Author form</a> — Defining a page to delete <code>Author</code> objects.</li> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Update_Book_form">Update Book form</a> — Defining page to update <code>Book</code> objects.</li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms/Create_genre_form">Create Genre form</a> — Defining a page to create <code>Genre</code> objects.</li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms/Create_author_form">Create Author form</a> — Defining a page to create <code>Author</code> objects.</li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms/Create_book_form">Create Book form</a> — Defining a page/form to create <code>Book</code> objects.</li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms/Create_BookInstance_form">Create BookInstance form</a> — Defining a page/form to create <code>BookInstance</code> objects.</li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms/Delete_author_form">Delete Author form</a> — Defining a page to delete <code>Author</code> objects.</li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms/Update_Book_form">Update Book form</a> — Defining page to update <code>Book</code> objects.</li> </ol> <h2 id="Challenge_yourself">Challenge yourself</h2> @@ -251,13 +251,13 @@ router.post('/genre/create', genre_controller.genre_create_post); <h2 id="このモジュール">このモジュール</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/index.html b/files/ja/learn/server-side/express_nodejs/index.html index a7ddf93fe5..a858409c44 100644 --- a/files/ja/learn/server-side/express_nodejs/index.html +++ b/files/ja/learn/server-side/express_nodejs/index.html @@ -27,7 +27,7 @@ translation_of: Learn/Server-side/Express_Nodejs <p>このモジュールを始める前に、サーバーサイドのウェブプログラミングとウェブフレームワークが何かを理解する必要があります。理想的なのは<a href="/ja/docs/Learn/Server-side/First_steps">サーバーサイドのウェブサイトプログラミングの第一歩</a>モジュールのトピックを読むことです。プログラミングの概念と <a href="/ja/docs/Web/JavaScript">JavaScript</a> の一般的な知識があることを強くお勧めしますが、中核となる概念を理解するために不可欠ではありません。</p> <div class="note"> -<p><strong>メモ</strong>: このウェブサイトには、クライアントサイド開発のコンテキストで JavaScript を学習するための多くの有用なリソースがあります。<a href="/docs/Web/JavaScript">JavaScript</a>、<a href="/docs/Web/JavaScript/Guide">JavaScript ガイド</a>、<a href="/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a>、<a href="/docs/Learn/JavaScript">JavaScript </a>(学習)。JavaScript のコアとなる言語と概念は、Node.js でのサーバーサイド開発と同じであり、この資料は関連性があります。Node.js は、ブラウザーレス環境で役立つ機能をサポートするための<a href="https://nodejs.org/dist/latest-v10.x/docs/api/">追加の API</a> を提供します (たとえば、HTTP サーバーを作成してファイルシステムにアクセスするため。ただし、ブラウザーおよび DOM を操作するための JavaScript API はサポートしません)。</p> +<p><strong>メモ</strong>: このウェブサイトには、クライアントサイド開発のコンテキストで JavaScript を学習するための多くの有用なリソースがあります。<a href="/ja/docs/Web/JavaScript">JavaScript</a>、<a href="/ja/docs/Web/JavaScript/Guide">JavaScript ガイド</a>、<a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a>、<a href="/ja/docs/Learn/JavaScript">JavaScript </a>(学習)。JavaScript のコアとなる言語と概念は、Node.js でのサーバーサイド開発と同じであり、この資料は関連性があります。Node.js は、ブラウザーレス環境で役立つ機能をサポートするための<a href="https://nodejs.org/dist/latest-v10.x/docs/api/">追加の API</a> を提供します (たとえば、HTTP サーバーを作成してファイルシステムにアクセスするため。ただし、ブラウザーおよび DOM を操作するための JavaScript API はサポートしません)。</p> <p>このガイドは Node.js と Express を使った作業についての情報を提供します。インターネットや本には他にもたくさんの優れたリソースがあります。これらのうち一部は <a href="http://stackoverflow.com/a/5511507/894359">How do I get started with Node.js</a> (StackOverflow) と <a href="https://www.quora.com/What-are-the-best-resources-for-learning-Node-js?">What are the best resources for learning Node.js?</a> (Quora) からリンクされています。</p> </div> diff --git a/files/ja/learn/server-side/express_nodejs/introduction/index.html b/files/ja/learn/server-side/express_nodejs/introduction/index.html index c194cff772..3957d95df4 100644 --- a/files/ja/learn/server-side/express_nodejs/introduction/index.html +++ b/files/ja/learn/server-side/express_nodejs/introduction/index.html @@ -34,7 +34,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Introduction <h2 id="Node_の紹介"><span class="short_text" id="result_box" lang="ja"><span>Node の紹介</span></span></h2> -<p><a href="https://nodejs.org/">Node</a><span class="short_text" id="result_box" lang="ja"><span> (正式には Node.js) </span></span><span id="result_box" lang="ja"><span>はオープンソースのクロスプラットフォーム、実行環境で、開発者はあらゆるサーバーサイドのツールやアプリケーションを <a href="ja/docs/Glossary/JavaScript">JavaScript</a> で作成することができます。この実行環境はブラウザーコンテキスト外での使用 (すなわち、コンピューターまたはサーバー OS 上での直接実行) を目的としています。そのため、クライアントサイドではブラウザー固有の JavaScript API が省略され、HTTP やファイルシステムライブラリを含む従来の OS API がサポートされます</span></span><span lang="ja"><span>。</span></span></p> +<p><a href="https://nodejs.org/">Node</a><span class="short_text" id="result_box" lang="ja"><span> (正式には Node.js) </span></span><span id="result_box" lang="ja"><span>はオープンソースのクロスプラットフォーム、実行環境で、開発者はあらゆるサーバーサイドのツールやアプリケーションを <a href="/ja/docs/Glossary/JavaScript">JavaScript</a> で作成することができます。この実行環境はブラウザーコンテキスト外での使用 (すなわち、コンピューターまたはサーバー OS 上での直接実行) を目的としています。そのため、クライアントサイドではブラウザー固有の JavaScript API が省略され、HTTP やファイルシステムライブラリを含む従来の OS API がサポートされます</span></span><span lang="ja"><span>。</span></span></p> <p>ウェブサーバー開発の観点から Node には多くの利点があります。</p> diff --git a/files/ja/learn/server-side/express_nodejs/mongoose/index.html b/files/ja/learn/server-side/express_nodejs/mongoose/index.html index e6eecb4496..5d3b3dccc9 100644 --- a/files/ja/learn/server-side/express_nodejs/mongoose/index.html +++ b/files/ja/learn/server-side/express_nodejs/mongoose/index.html @@ -569,7 +569,7 @@ SomeModel.find(callback_function);</code></pre> <h2 id="Install_Mongoose">Install Mongoose</h2> -<p>Open a command prompt and navigate to the directory where you created your <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">skeleton Local Library website</a>. Enter the following command to install Mongoose (and its dependencies) and add it to your <strong>package.json</strong> file, unless you have already done so when reading the <a href="#Installing_Mongoose_and_MongoDB">Mongoose Primer</a> above.</p> +<p>Open a command prompt and navigate to the directory where you created your <a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">skeleton Local Library website</a>. Enter the following command to install Mongoose (and its dependencies) and add it to your <strong>package.json</strong> file, unless you have already done so when reading the <a href="#Installing_Mongoose_and_MongoDB">Mongoose Primer</a> above.</p> <pre class="brush: bash notranslate">npm install mongoose </pre> @@ -787,13 +787,13 @@ module.exports = mongoose.model('BookInstance', BookInstanceSchema);</pre> <h2 id="このモジュール">このモジュール</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/routes/index.html b/files/ja/learn/server-side/express_nodejs/routes/index.html index bb3e21898b..3ee8532a09 100644 --- a/files/ja/learn/server-side/express_nodejs/routes/index.html +++ b/files/ja/learn/server-side/express_nodejs/routes/index.html @@ -24,7 +24,7 @@ translation_of: Learn/Server-side/Express_Nodejs/routes <h2 id="Overview">Overview</h2> -<p>In the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">last tutorial article</a> we defined <em>Mongoose</em> models to interact with the database, and used a (standalone) script to create some initial library records. We can now write the code to present that information to users. The first thing we need to do is determine what information we want to be able to display in our pages, and then define appropriate URLs for returning those resources. Then we're going to need to create the routes (URL handlers) and views (templates) to display those pages.</p> +<p>In the <a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">last tutorial article</a> we defined <em>Mongoose</em> models to interact with the database, and used a (standalone) script to create some initial library records. We can now write the code to present that information to users. The first thing we need to do is determine what information we want to be able to display in our pages, and then define appropriate URLs for returning those resources. Then we're going to need to create the routes (URL handlers) and views (templates) to display those pages.</p> <p>The diagram below is provided as a reminder of the main flow of data and things that need to be implemented when handling an HTTP request/response. In addition to the views and routes the diagram shows "controllers" — functions that separate out the code to route requests from the code that actually processes requests.</p> @@ -49,7 +49,7 @@ translation_of: Learn/Server-side/Express_Nodejs/routes <p>There are several ways to create routes. For this tutorial we're going to use the <code><a href="http://expressjs.com/en/guide/routing.html#express-router">express.Router</a></code> middleware as it allows us to group the route handlers for a particular part of a site together and access them using a common route-prefix. We'll keep all our library-related routes in a "catalog" module, and, if we add routes for handling user accounts or other functions, we can keep them grouped separately.</p> <div class="note"> -<p><strong>Note:</strong> We discussed Express application routes briefly in our <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction#Creating_route_handlers">Express Introduction > Creating route handlers</a>. Other than providing better support for modularization (as discussed in the first subsection below), using <em>Router</em> is very similar to defining routes directly on the <em>Express application object</em>.</p> +<p><strong>Note:</strong> We discussed Express application routes briefly in our <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction#Creating_route_handlers">Express Introduction > Creating route handlers</a>. Other than providing better support for modularization (as discussed in the first subsection below), using <em>Router</em> is very similar to defining routes directly on the <em>Express application object</em>.</p> </div> <p>The rest of this section provides an overview of how the <code>Router</code> can be used to define the routes.</p> @@ -103,7 +103,7 @@ app.use('/wiki', wiki);</code></pre> <p>The callback takes three arguments (usually named as shown: <code>req</code>, <code>res</code>, <code>next</code>), that will contain the HTTP Request object, HTTP response, and the <em>next</em> function in the middleware chain.</p> <div class="note"> -<p><strong>Note:</strong> Router functions are <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction#Using_middleware">Express middleware</a>, which means that they must either complete (respond to) the request or call the <code>next</code> function in the chain. In the case above we complete the request using <code>send()</code>, so the <code>next</code> argument is not used (and we choose not to specify it).</p> +<p><strong>Note:</strong> Router functions are <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction#Using_middleware">Express middleware</a>, which means that they must either complete (respond to) the request or call the <code>next</code> function in the chain. In the case above we complete the request using <code>send()</code>, so the <code>next</code> argument is not used (and we choose not to specify it).</p> <p>The router function above takes a single callback, but you can specify as many callback arguments as you want, or an array of callback functions. Each function is part of the middleware chain, and will be called in the order it is added to the chain (unless a preceding function completes the request).</p> </div> @@ -135,7 +135,7 @@ app.use('/wiki', wiki);</code></pre> <li>() : Grouping match on a set of characters to perform another operation on. E.g. <code>'/ab(cd)?e'</code> will peform a ? match on (cd) —it will match <code>abe</code> and <code>abcde</code>.</li> </ul> -<p>The route paths can also be JavaScript <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expressions</a>. For example, the route path below will match <code>catfish </code>and <code>dogfish</code>, but not <code>catflap</code>, <code>catfishhead</code>, and so on. Note that the path for a regular expression uses regular expression syntax (it is not a quoted string as in the previous cases).</p> +<p>The route paths can also be JavaScript <a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">regular expressions</a>. For example, the route path below will match <code>catfish </code>and <code>dogfish</code>, but not <code>catflap</code>, <code>catfishhead</code>, and so on. Note that the path for a regular expression uses regular expression syntax (it is not a quoted string as in the previous cases).</p> <pre class="brush: js"><code>app.get(/.*fish$/, function (req, res) { ... @@ -587,7 +587,7 @@ SET DEBUG=express-locallibrary-tutorial:* & npm start DEBUG=express-locallibrary-tutorial:* npm start</code> </pre> </li> - <li>If you previously set up <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">nodemon</a>, you can instead use: + <li>If you previously set up <a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">nodemon</a>, you can instead use: <pre><code>// Windows SET DEBUG=express-locallibrary-tutorial:* & npm <strong>run devstart</strong> @@ -628,13 +628,13 @@ SET DEBUG=express-locallibrary-tutorial:* & npm <strong>run devstart</strong <h2 id="このモジュール">このモジュール</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/skeleton_website/index.html b/files/ja/learn/server-side/express_nodejs/skeleton_website/index.html index 5b0acfecd2..574ffd2076 100644 --- a/files/ja/learn/server-side/express_nodejs/skeleton_website/index.html +++ b/files/ja/learn/server-side/express_nodejs/skeleton_website/index.html @@ -500,13 +500,13 @@ block content <h2 id="このモジュール">このモジュール</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> </ul> diff --git a/files/ja/learn/server-side/express_nodejs/tutorial_local_library_website/index.html b/files/ja/learn/server-side/express_nodejs/tutorial_local_library_website/index.html index 9e4dc43e1e..b76f22d669 100644 --- a/files/ja/learn/server-side/express_nodejs/tutorial_local_library_website/index.html +++ b/files/ja/learn/server-side/express_nodejs/tutorial_local_library_website/index.html @@ -86,13 +86,13 @@ translation_of: Learn/Server-side/Express_Nodejs/Tutorial_local_library_website <h2 id="このモジュールの中">このモジュールの中</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館のウェブサイト</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトンウェブサイトの作成</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館のウェブサイト</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトンウェブサイトの作成</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> </ul> diff --git a/files/ja/learn/server-side/index.html b/files/ja/learn/server-side/index.html index 728f2c0fac..3439f2c209 100644 --- a/files/ja/learn/server-side/index.html +++ b/files/ja/learn/server-side/index.html @@ -54,6 +54,6 @@ translation_of: Learn/Server-side <h2 id="あわせて参照">あわせて参照</h2> <dl> - <dt><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Node_server_without_framework">フレームワークなしの Node サーバ</a></dt> + <dt><a href="/ja/docs/Learn/Server-side/Node_server_without_framework">フレームワークなしの Node サーバ</a></dt> <dd>この記事では、フレームワークを使用せずに、Node.jsだけで構築された単純な静的ファイルサーバを紹介します。</dd> </dl> diff --git a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/index.html index f49b505c56..a11d87f743 100644 --- a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/index.html +++ b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/index.html @@ -28,20 +28,20 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks <p class="summary">その後、異なるフレームワークの選択の要点をカバーするチュートリアルをいくつか提供し、あなたが自分自身でより深く学び始めるのに十分なコンテキストと親しみやすさを提供します。アクセシビリティなどのウェブプラットフォームの基本的なベストプラクティスを忘れずに、実用的な方法でフレームワークについて学んでいただきたいと思います。</p> -<p class="summary"><strong><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Get started now, with "Introduction to client-side frameworks"</a></strong></p> +<p class="summary"><strong><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Get started now, with "Introduction to client-side frameworks"</a></strong></p> <h2 id="Prerequisites">Prerequisites</h2> -<p>You should really learn the basics of the core web languages first before attempting to move on to learning client-side frameworks — <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and especially <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</p> +<p>You should really learn the basics of the core web languages first before attempting to move on to learning client-side frameworks — <a href="/ja/docs/Learn/HTML">HTML</a>, <a href="/ja/docs/Learn/CSS">CSS</a>, and especially <a href="/ja/docs/Learn/JavaScript">JavaScript</a>.</p> <p>Your code will be richer and more professional as a result, and you'll be able to troubleshoot problems with more confidence if you understand the fundamental web platform features that the frameworks are building on top of.</p> <h2 id="Introductory_guides">Introductory guides</h2> <dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">1. Introduction to client-side frameworks</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">1. Introduction to client-side frameworks</a></dt> <dd>We begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">2. Framework main features</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">2. Framework main features</a></dt> <dd>Each major JavaScript framework has a different approach to updating the DOM, handling browser events, and providing an enjoyable developer experience. This article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level and the differences between them.</dd> </dl> @@ -54,19 +54,19 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks </div> <dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">1. Getting started with React</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">1. Getting started with 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. Beginning our React todo list</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">2. Beginning our React todo list</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> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">3. Componentizing our React app</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">3. Componentizing our React app</a></dt> <dd>At this point, our app is a monolith. Before we can make it do things, we need to break it apart into manageable, descriptive components. React doesn’t have any hard rules for what is and isn’t a component – that’s up to you! In this article, we will show you a sensible way to break our app up into components.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">4. React interactivity: Events and state</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">4. React interactivity: Events and state</a></dt> <dd>With our component plan worked out, it's now time to start updating our app from a completely static UI to one that actually allows us to interact and change things. In this article we'll do this, digging into events and state along the way.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">5. React interactivity: Editing, filtering, conditional rendering</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">5. React interactivity: Editing, filtering, conditional rendering</a></dt> <dd>As we near the end of our React journey (for now at least), we'll add the finishing touches to the main areas of functionality in our Todo list app. This includes allowing you to edit existing tasks and filtering the list of tasks between all, completed, and incomplete tasks. We'll look at conditional UI rendering along the way.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">6. Accessibility in React</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">6. Accessibility in React</a></dt> <dd>In our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in React, which can improve usability and reduce confusion for both keyboard-only and screen reader users.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">7. React resources</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">7. React resources</a></dt> <dd>Our final article provides you with a list of React resources that you can use to go further in your learning.</dd> </dl> @@ -79,17 +79,17 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks </div> <dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">1. Getting started with Ember</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">1. Getting started with Ember</a></dt> <dd>In our first Ember article we will look at how Ember works and what it's useful for, install the Ember toolchain locally, create a sample app, and then do some initial setup to get it ready for development.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">2. Ember app structure and componentization</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">2. Ember app structure and componentization</a></dt> <dd>In this article we'll get right on with planning out the structure of our TodoMVC Ember app, adding in the HTML for it, and then breaking that HTML structure into components.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">3. Ember interactivity: Events, classes and state</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">3. Ember interactivity: Events, classes and state</a></dt> <dd>At this point we'll start adding some interactivity to our app, providing the ability to add and display new todo items. Along the way, we'll look at using events in Ember, creating component classes to contain JavaScript code to control interactive features, and setting up a service to keep track of the data state of our app.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">4. Ember Interactivity: Footer functionality, conditional rendering</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">4. Ember Interactivity: Footer functionality, conditional rendering</a></dt> <dd>Now it's time to start tackling the footer functionality in our app. Here we'll get the todo counter to update to show the correct number of todos still to complete, and correctly apply styling to completed todos (i.e. where the checkbox has been checked). We'll also wire up our "Clear completed" button. Along the way, we'll learn about using conditional rendering in our templates.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">5. Routing in Ember</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">5. Routing in Ember</a></dt> <dd>In this article we learn about routing or URL-based filtering as it is sometimes referred to. We'll use it to provide a unique URL for each of the three todo views — "All", "Active", and "Completed".</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">6. Ember resources and troubleshooting</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">6. Ember resources and troubleshooting</a></dt> <dd>Our final Ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information.</dd> </dl> @@ -102,23 +102,23 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks </div> <dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">1. Getting started with Vue</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">1. Getting started with Vue</a></dt> <dd>Now let's introduce Vue, the third of our frameworks. In this article, we'll look at a little bit of Vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">2. Creating our first Vue component</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">2. Creating our first Vue component</a></dt> <dd>Now it's time to dive deeper into Vue, and create our own custom component — we'll start by creating a component to represent each item in the todo list. Along the way, we'll learn about a few important concepts such as calling components inside other components, passing data to them via props and saving data state.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">3. Rendering a list of Vue components</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">3. Rendering a list of Vue components</a></dt> <dd><span class="author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxwoxz78zz83zz84zz69z2z80zgwxsgnz83zfkt5e5tz70zz68zmsnjz122zz71z">At this point we've got a fully working component; we're now ready to add multiple <code>ToDoItem</code> components to our App. In this article we'll look at adding a set of todo item data to our <code>App.vue</code> component, which we'll then loop through and display inside <code>ToDoItem</code> components using the <code>v-for</code> directive. </span></dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">4. Adding a new todo form: Vue events, methods, and models</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">4. Adding a new todo form: Vue events, methods, and models</a></dt> <dd>We now have sample data in place and a loop that takes each bit of data and renders it inside a <code>ToDoItem</code> in our app. What we really need next is the ability to allow our users to enter their own todo items into the app, and for that, we'll need a text <code><input></code>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data. This is what we'll cover in this article.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">5. Styling Vue components with CSS</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">5. Styling Vue components with CSS</a></dt> <dd>The time has finally come to make our app look a bit nicer. In this article, we'll explore the different ways of styling Vue components with CSS.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">6. Using Vue computed properties</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">6. Using Vue computed properties</a></dt> <dd>In this article we'll add a counter that displays the number of completed todo items, using a feature of Vue called computed properties. These work similarly to methods but only re-run when one of their dependencies changes.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">7. Vue conditional rendering: editing existing todos</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">7. Vue conditional rendering: editing existing todos</a></dt> <dd>Now it is time to add one of the major parts of functionality that we're still missing — the ability to edit existing todo items. To do this, we will take advantage of Vue's conditional rendering capabilities — namely <code>v-if</code> and <code>v-else</code> — to allow us to toggle between the existing todo item view and an edit view where you can update todo item labels. We'll also look at adding functionality to delete todo items.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">8. Focus management with Vue refs</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">8. Focus management with Vue refs</a></dt> <dd>We are nearly done with Vue. The last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility. We'll look at using Vue refs to handle this — an advanced feature that allows you to have direct access to the underlying DOM nodes below the virtual DOM, or direct access from one component to the internal DOM structure of a child component.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">9. Vue resources</a></dt> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">9. Vue resources</a></dt> <dd>Now we'll round off our study of Vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.</dd> </dl> diff --git a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html index 5114539cca..9aa91534c3 100644 --- a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html +++ b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html @@ -95,7 +95,7 @@ translation_of: >- <p>React を使用する方法はたくさんありますが、前述のように、コマンドラインインターフェイス (CLI) ツールの create-react-app を使用します。これにより、いくつかのパッケージをインストールしていくつかを作成することにより、React アプリケーションの開発プロセスをスムーズにします。</p> -<p><code><a href="/en-US/docs/Web/HTML/Element/script"><script></a></code> を HTML ファイルにコピーすることで <a href="https://reactjs.org/docs/add-react-to-a-website.html">create-react-app なしでウェブサイトに React を追加する</a>ことは可能ですが、create-react-app CLI は、React アプリケーションの一般的な始め方です。これを使うことで、アプリの作成に集中でき、セットアップに煩わされなくなります。</p> +<p><code><a href="/ja/docs/Web/HTML/Element/script"><script></a></code> を HTML ファイルにコピーすることで <a href="https://reactjs.org/docs/add-react-to-a-website.html">create-react-app なしでウェブサイトに React を追加する</a>ことは可能ですが、create-react-app CLI は、React アプリケーションの一般的な始め方です。これを使うことで、アプリの作成に集中でき、セットアップに煩わされなくなります。</p> <h3 id="Requirements" name="Requirements">必要条件</h3> diff --git a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.html b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.html index 7facbcb5ef..2fea62562a 100644 --- a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.html +++ b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.html @@ -22,7 +22,7 @@ translation_of: >- <tr> <th scope="row">前提条件：</th> <td> - <p><a href="/en-US/docs/Learn/HTML">HTML</a> 、<a href="/en-US/docs/Learn/CSS">CSS</a> 、<a href="/en-US/docs/Learn/JavaScript">JavaScript</a> の基本的な知識を持っていること。また <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">ターミナル/コマンドライン</a> に関する知識を持っていること。</p> + <p><a href="/ja/docs/Learn/HTML">HTML</a> 、<a href="/ja/docs/Learn/CSS">CSS</a> 、<a href="/ja/docs/Learn/JavaScript">JavaScript</a> の基本的な知識を持っていること。また <a href="/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">ターミナル/コマンドライン</a> に関する知識を持っていること。</p> </td> </tr> <tr> @@ -181,7 +181,7 @@ cd ..</pre> ); }</pre> -<p>次に <code>public/index.html</code> を開いて、<code><a href="/en-US/docs/Web/HTML/Element/title"><title></a></code>要素のテキストを <code>TodoMatic</code> に変更します。こうすることでアプリ上部の <code><a href="/en-US/docs/Web/HTML/Element/Heading_Elements"><h1></a></code> と一致します。</p> +<p>次に <code>public/index.html</code> を開いて、<code><a href="/ja/docs/Web/HTML/Element/title"><title></a></code>要素のテキストを <code>TodoMatic</code> に変更します。こうすることでアプリ上部の <code><a href="/ja/docs/Web/HTML/Element/Heading_Elements"><h1></a></code> と一致します。</p> <pre class="brush: html"><title>TodoMatic</title></pre> @@ -192,10 +192,10 @@ cd ..</pre> <p>まだ見た目が整っていなくて、機能もしていませんが、一旦問題はありません。すぐにスタイルを設定します。まず現在の JSX と、それがユーザーストーリーにどのように対応しているかを考えてみます。</p> <ul> - <li>新しいタスクを書き込むための <code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a></code> 要素と、フォームを送信するためのボタンを備えた <code><a href="/en-US/docs/Web/HTML/Element/form"><form></a></code> 要素があります。</li> + <li>新しいタスクを書き込むための <code><a href="/ja/docs/Web/HTML/Element/input/text"><input type="text"></a></code> 要素と、フォームを送信するためのボタンを備えた <code><a href="/ja/docs/Web/HTML/Element/form"><form></a></code> 要素があります。</li> <li>タスクのフィルタリングに使用するためのボタンが並んでいます。</li> <li>残っているタスクの数を示す見出しがあります。</li> - <li>3つのタスクがあり、順序付けられていないリストとして配置されています。それぞれのタスクはリストアイテム（<code><a href="/en-US/docs/Web/HTML/Element/li"><li></a></code>）であり、タスクを編集および削除するためのボタンと、完了したことをチェックするためのチェックボックスがあります。</li> + <li>3つのタスクがあり、順序付けられていないリストとして配置されています。それぞれのタスクはリストアイテム（<code><a href="/ja/docs/Web/HTML/Element/li"><li></a></code>）であり、タスクを編集および削除するためのボタンと、完了したことをチェックするためのチェックボックスがあります。</li> </ul> <p>フォームはタスクを作成するためのもので、ボタンはタスクをフィルタリングするためのもの、また見出しとリストはタスクを読むためのものです。今のところタスクを編集するための UI は分かりづらいですが、そちらについては後でコードを書き足していきます。</p> @@ -214,7 +214,7 @@ cd ..</pre> <p><code>visually-hidden</code> というクラスについては、CSS を記述していないので、まだ意味はありません。ただし、スタイルを設定すると、このクラスの要素はすべて目の見えるユーザーからは隠され、スクリーンリーダーのユーザーは引き続き使用できるようになります。これらの単語は、目の見えるユーザーには必要ありません。視覚的な文脈を持たないスクリーンリーダーのユーザーに、ボタンが何をするのかという情報を提供するためにあります。</p> -<p>さらに下には <code><a href="/en-US/docs/Web/HTML/Element/ul"><ul></a></code> 要素があります：</p> +<p>さらに下には <code><a href="/ja/docs/Web/HTML/Element/ul"><ul></a></code> 要素があります：</p> <pre class="brush: html"><ul role="list" @@ -552,40 +552,40 @@ body { <h2 id="In_this_module">In this module</h2> <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li> <li>React <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li> </ul> </li> <li>Ember <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li> </ul> </li> <li>Vue <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li> </ul> </li> </ul> diff --git a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html index 4277a7ba9d..7a6278b124 100644 --- a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html +++ b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html @@ -22,7 +22,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_ge <tr> <th scope="row">前提条件:</th> <td> - <p>Familiarity with the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages, knowledge of the <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">terminal/command line</a>.</p> + <p>Familiarity with the core <a href="/ja/docs/Learn/HTML">HTML</a>, <a href="/ja/docs/Learn/CSS">CSS</a>, and <a href="/ja/docs/Learn/JavaScript">JavaScript</a> languages, knowledge of the <a href="/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">terminal/command line</a>.</p> <p>Vue components are written as a combination of JavaScript objects that manage the app's data and an HTML-based template syntax that maps to the underlying DOM structure. For installation, and to use some of the more advanced features of Vue (like Single File Components or render functions), you'll need a terminal with node + npm installed.</p> </td> @@ -36,7 +36,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_ge <h2 id="より明確な_Vue">より明確な Vue</h2> -<p>Vue is a modern JavaScript framework that provides useful facilities for progressive enhancement — unlike many other frameworks, you can use Vue to enhance existing HTML. This lets you use Vue as a drop-in replacement for a library like <a href="/en-US/docs/Glossary/jQuery">JQuery</a>.</p> +<p>Vue is a modern JavaScript framework that provides useful facilities for progressive enhancement — unlike many other frameworks, you can use Vue to enhance existing HTML. This lets you use Vue as a drop-in replacement for a library like <a href="/ja/docs/Glossary/jQuery">JQuery</a>.</p> <p>That being said, you can also use Vue to write entire Single Page Applications (SPAs). This allows you to create markup managed entirely by Vue, which can improve developer experience and performance when dealing with complex applications. It also allows you to take advantage of libraries for client-side routing and state management when you need to. Additionally, Vue takes a "middle ground" approach to tooling like client-side routing and state management. While the Vue core team maintains suggested libraries for these functions, they are not directly bundled into Vue. This allows you to select a different routing/state management library if they better fit your application.</p> @@ -47,7 +47,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_ge <h2 id="取り付け">取り付け</h2> -<p>To use Vue in an existing site, you can drop one of the following <code><a href="/en-US/docs/Web/HTML/Element/script"><script></a></code> elements onto a page. This allows you to start using Vue on existing sites, which is why Vue prides itself on being a progressive framework. This is a great option when migrating an existing project using a library like JQuery to Vue. With this method, you can use a lot of the core features of Vue, such as the attributes, custom components, and data-management.</p> +<p>To use Vue in an existing site, you can drop one of the following <code><a href="/ja/docs/Web/HTML/Element/script"><script></a></code> elements onto a page. This allows you to start using Vue on existing sites, which is why Vue prides itself on being a progressive framework. This is a great option when migrating an existing project using a library like JQuery to Vue. With this method, you can use a lot of the core features of Vue, such as the attributes, custom components, and data-management.</p> <ul> <li> @@ -70,7 +70,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_ge </ol> <div class="blockIndicator note"> -<p><strong>Note</strong>: If you don't have the above installed, find out <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#Adding_powerups">more about installing npm and Node.js</a> here.</p> +<p><strong>Note</strong>: If you don't have the above installed, find out <a href="/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#Adding_powerups">more about installing npm and Node.js</a> here.</p> </div> <p>To install the CLI, run the following command in your terminal:</p> @@ -205,7 +205,7 @@ export default { <h2 id="いくつかの変更を加える">いくつかの変更を加える</h2> -<p>Let's make our first change to the app — we’ll delete the Vue logo. Open the <code>App.vue</code> file, and delete the <code><a href="/en-US/docs/Web/HTML/Element/img"><img></a></code> element from the template section:</p> +<p>Let's make our first change to the app — we’ll delete the Vue logo. Open the <code>App.vue</code> file, and delete the <code><a href="/ja/docs/Web/HTML/Element/img"><img></a></code> element from the template section:</p> <pre class="brush: html notranslate"><span class="author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90z8h7gz67ziz76zcz77zz80zz71zncfz69zz69ziaz82zz71zz72zhz77zz122zz90z14mcyd"><img alt="Vue logo" src="./assets/logo.png"></span></pre> @@ -250,52 +250,52 @@ export default { <h2 id="このモジュールでは">このモジュールでは</h2> <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li> <li>React <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li> </ul> </li> <li>Ember <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li> </ul> </li> <li>Vue <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li> </ul> </li> <li>Svelte <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting started with Svelte</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte Todo list app</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting started with Svelte</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte Todo list app</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li> </ul> </li> </ul> diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/automated_testing/index.html b/files/ja/learn/tools_and_testing/cross_browser_testing/automated_testing/index.html index 98bf8d9394..abbfe4fa7e 100644 --- a/files/ja/learn/tools_and_testing/cross_browser_testing/automated_testing/index.html +++ b/files/ja/learn/tools_and_testing/cross_browser_testing/automated_testing/index.html @@ -227,7 +227,7 @@ npm install --save-dev @babel/core <li>Add <code>'js'</code> as an item inside the array in the <code>default</code> task.</li> </ol> -<p>Here we grab our <code>main.js</code> file, run <code>jshint</code> on it and output the results to the terminal using <code>jshint.reporter</code>; we then pass the file to babel, which converts it to old style syntax and outputs the result into the <code>build</code> directory. Our original code included a <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">fat arrow function</a>, which babel has modified into an old style function.</p> +<p>Here we grab our <code>main.js</code> file, run <code>jshint</code> on it and output the results to the terminal using <code>jshint.reporter</code>; we then pass the file to babel, which converts it to old style syntax and outputs the result into the <code>build</code> directory. Our original code included a <a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">fat arrow function</a>, which babel has modified into an old style function.</p> <h4 id="Further_ideas">Further ideas</h4> @@ -607,14 +607,14 @@ function getSessionDetails(session){ <h2 id="In_this_module">In this module</h2> <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></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> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li> </ul> <p> </p> diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html b/files/ja/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html index 62e21f35a2..86ed9a69cb 100644 --- a/files/ja/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html +++ b/files/ja/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html @@ -85,7 +85,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS <p>Other popular editors have similar linting packages available. For example, see:</p> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/www.sublimelinter.com/">SublimeLinter</a> for Sublime Text</li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/www.sublimelinter.com/">SublimeLinter</a> for Sublime Text</li> <li><a href="https://sourceforge.net/projects/notepad-linter/">Notepad++ linter</a></li> </ul> @@ -109,7 +109,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS <h3 id="Older_browsers_not_supporting_modern_features">Older browsers not supporting modern features</h3> -<p>This is a common problem, especially when you need to support old browsers (such as old IE versions) or you are using features that are implemented using CSS prefixes. In general, most core HTML and CSS functionality (such as basic HTML elements, CSS basic colors and text styling) works across most browsers you'll want to support; more problems are uncovered when you start wanting to use newer features such as <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, or <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">HTML5 video/audio</a>, or even more nascent, <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids#Native_CSS_Grids_with_Grid_Layout">CSS Grids</a> or <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#-webkit-background-clip_text">-webkit-background-clip: text</a>.</p> +<p>This is a common problem, especially when you need to support old browsers (such as old IE versions) or you are using features that are implemented using CSS prefixes. In general, most core HTML and CSS functionality (such as basic HTML elements, CSS basic colors and text styling) works across most browsers you'll want to support; more problems are uncovered when you start wanting to use newer features such as <a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, or <a href="/ja/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">HTML5 video/audio</a>, or even more nascent, <a href="/ja/docs/Learn/CSS/CSS_layout/Grids#Native_CSS_Grids_with_Grid_Layout">CSS Grids</a> or <a href="/ja/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#-webkit-background-clip_text">-webkit-background-clip: text</a>.</p> <p>Once you've identified a list of potential problem technologies you will be using, it is a good idea to research what browsers they are supported in, and what related techniques are useful. See {{anch("Finding help")}} below.</p> @@ -123,7 +123,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS <p><strong>Note</strong>: See {{anch("IE conditional comments")}} for the best way to do this.</p> </div> -<p>More complex elements like HTML <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video"><video></a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio"><audio></a></code>, and <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas"><canvas></a></code> (and other features besides) have natural mechanisms for fallbacks to be added, which work on the same principle as described above. You can add fallback content in between the opening and closing tags, and non-supporting browsers will effectively ignore the outer element and run the nested content.</p> +<p>More complex elements like HTML <code><a href="/ja/docs/Web/HTML/Element/video"><video></a></code>, <code><a href="/ja/docs/Web/HTML/Element/audio"><audio></a></code>, and <code><a href="/ja/docs/Web/HTML/Element/canvas"><canvas></a></code> (and other features besides) have natural mechanisms for fallbacks to be added, which work on the same principle as described above. You can add fallback content in between the opening and closing tags, and non-supporting browsers will effectively ignore the outer element and run the nested content.</p> <p>For example:</p> @@ -143,13 +143,13 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video/tears-of-steel-battle-clip-medium.mp4<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Download MP4<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>video</span><span class="punctuation token">></span></span></code></pre> -<p>This example (taken from <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a>) includes not only a Flash video fallback for older IE versions, but also a simple link allowing you to download the video if even the Flash player doesn't work, so at least the user can still access the video.</p> +<p>This example (taken from <a href="/ja/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a>) includes not only a Flash video fallback for older IE versions, but also a simple link allowing you to download the video if even the Flash player doesn't work, so at least the user can still access the video.</p> <div class="note"> <p><strong>Note</strong>: 3rd party libraries like <a href="http://videojs.com/">Video.js</a> and <a href="https://www.jwplayer.com/">JW Player</a> use such fallback mechanisms to provide cross-browser support.</p> </div> -<p>HTML5 form elements also exhibit fallback qualities — HTML5 introduced some special <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input"><input></a></code> types for inputting specific information into forms, such as times, dates, colors, numbers, etc. These are very useful, particularly on mobile platforms, where providing a pain-free way of entering data is very important for the user experience. Supporting platforms provide special UI widgets when these input types are used, such as a calendar widget for entering dates.</p> +<p>HTML5 form elements also exhibit fallback qualities — HTML5 introduced some special <code><a href="/ja/docs/Web/HTML/Element/input"><input></a></code> types for inputting specific information into forms, such as times, dates, colors, numbers, etc. These are very useful, particularly on mobile platforms, where providing a pain-free way of entering data is very important for the user experience. Supporting platforms provide special UI widgets when these input types are used, such as a calendar widget for entering dates.</p> <p>The following example shows date and time inputs:</p> @@ -252,14 +252,14 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS inset <span class="number token">-1</span><span class="token unit">px</span> <span class="number token">-1</span><span class="token unit">px</span> <span class="number token">3</span><span class="token unit">px</span> <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">255</span><span class="punctuation token">,</span><span class="number token">255</span><span class="punctuation token">,</span><span class="number token">255</span><span class="punctuation token">,</span><span class="number token">0.4</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span></code></pre> -<p>Here we are providing an <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba()">RGBA</a> {{cssxref("background-color")}} that changes opacity on hover to give the user a hint that the button is interactive, and some semi-transparent inset {{cssxref("box-shadow")}} shades to give the button a bit of texture and depth. The trouble is that RGBA colors and box shadows don't work in IE versions older than 9 — in older versions the background just wouldn't show up at all so the text would be unreadable, no good at all!</p> +<p>Here we are providing an <a href="/ja/docs/Web/CSS/color_value#rgba()">RGBA</a> {{cssxref("background-color")}} that changes opacity on hover to give the user a hint that the button is interactive, and some semi-transparent inset {{cssxref("box-shadow")}} shades to give the button a bit of texture and depth. The trouble is that RGBA colors and box shadows don't work in IE versions older than 9 — in older versions the background just wouldn't show up at all so the text would be unreadable, no good at all!</p> <p><img alt="" src="https://mdn.mozillademos.org/files/14135/unreadable-button.png" style="display: block; margin: 0 auto;"></p> <p>To sort this out, we have added a second <code>background-color</code> declaration, which just specifies a hex color — this is supported way back in really old browsers, and acts as a fallback if the modern shiny features don't work. What happens is a browser visiting this page first applies the first <code>background-color</code> value; when it gets to the second <code>background-color</code> declaration, it will override the initial value with this value if it supports RGBA colors. If not, it will just ignore the entire declaration and move on.</p> <div class="note"> -<p><strong>Note</strong>: The same is true for other CSS features like <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face">@font-face</a></code> and <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@supports">@supports</a></code> blocks — if they are not supported, the browser just ignores them.</p> +<p><strong>Note</strong>: The same is true for other CSS features like <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a>, <code><a href="/ja/docs/Web/CSS/@font-face">@font-face</a></code> and <code><a href="/ja/docs/Web/CSS/@supports">@supports</a></code> blocks — if they are not supported, the browser just ignores them.</p> </div> <h4 id="IE_conditional_comments">IE conditional comments</h4> @@ -292,7 +292,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS <h4 id="Selector_support">Selector support</h4> -<p>Of course, no CSS features will apply at all if you don't use the right <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">selectors</a> to select the element you want to style! If you just write a selector incorrectly so the styling isn't as expected in any browser, you'll just need to troubleshoot and work out what is wrong with your selector. We find that it is helpful to inspect the element you are trying to style using your browser's dev tools, then look at the DOM tree breadcrumb trail that DOM inspectors tend to provide to see if your selector makes sense compared to it.</p> +<p>Of course, no CSS features will apply at all if you don't use the right <a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Selectors">selectors</a> to select the element you want to style! If you just write a selector incorrectly so the styling isn't as expected in any browser, you'll just need to troubleshoot and work out what is wrong with your selector. We find that it is helpful to inspect the element you are trying to style using your browser's dev tools, then look at the DOM tree breadcrumb trail that DOM inspectors tend to provide to see if your selector makes sense compared to it.</p> <p>For example, in the Firefox dev tools, you get this kind of output at the bottom of the DOM inspector:</p> @@ -304,7 +304,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS <p>(The <code>date</code> form input isn't directly inside the <code><form></code>; you'd be better off using a general descendant selector instead of a child selector).</p> -<p>However, another issue that appears in versions of IE older than 9 is that none of the newer selectors (mainly pseudo-classes and pseudo-elements like <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type">:nth-of-type</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not">:not</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::selection">::selection</a></code>, etc.) work. If you want to use these in your CSS and you need to support older IE versions, a good move is to use Keith Clark's <a href="http://selectivizr.com/">Selectivizr</a> library — this is a small JavaScript library that works on top of an existing JavaScript library like <a href="http://jquery.com/">jQuery</a> or <a href="http://mootools.net/">MooTools</a>.</p> +<p>However, another issue that appears in versions of IE older than 9 is that none of the newer selectors (mainly pseudo-classes and pseudo-elements like <code><a href="/ja/docs/Web/CSS/:nth-of-type">:nth-of-type</a></code>, <code><a href="/ja/docs/Web/CSS/:not">:not</a></code>, <code><a href="/ja/docs/Web/CSS/::selection">::selection</a></code>, etc.) work. If you want to use these in your CSS and you need to support older IE versions, a good move is to use Keith Clark's <a href="http://selectivizr.com/">Selectivizr</a> library — this is a small JavaScript library that works on top of an existing JavaScript library like <a href="http://jquery.com/">jQuery</a> or <a href="http://mootools.net/">MooTools</a>.</p> <ol> <li>To try this example, make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/html-css/selectivizr-example-start.html">selectivizr-example-start.html</a>. If you look at this running live, you'll see that it contains two paragraphs, one of which is styled. We've selected the paragraph with <code>p:first-child</code>, which won't work in old versions of IE.</li> @@ -345,7 +345,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS <p>The first line shows a {{cssxref("transform")}} property with a <code>-webkit-</code> prefix — this was needed to make transforms work in Chrome, etc. until the feature was finalized and such browsers added a prefix-free version of the property (at the time of writing, Chrome supported both versions).</p> -<p>The last three lines show three different versions of the <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient">linear-gradient()</a></code> function, which is used to generate a linear gradient in the background of an element:</p> +<p>The last three lines show three different versions of the <code><a href="/ja/docs/Web/CSS/linear-gradient">linear-gradient()</a></code> function, which is used to generate a linear gradient in the background of an element:</p> <ol> <li>The first one has a <code>-moz-</code> prefix, and shows a slightly older version of the syntax (Firefox)</li> @@ -370,7 +370,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS <ul> <li> </li> - <li>Now try to set a new value for the CSS property you are interested in on that element; you can do this using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style">style</a> property of the element, for example try typing these into the JavaScript console: + <li>Now try to set a new value for the CSS property you are interested in on that element; you can do this using the <a href="/ja/docs/Web/API/HTMLElement/style">style</a> property of the element, for example try typing these into the JavaScript console: <pre class="brush: js line-numbers language-js"><code class="language-js">test<span class="punctuation token">.</span>style<span class="punctuation token">.</span>transform <span class="operator token">=</span> <span class="string token">'rotate(90deg)'</span> test<span class="punctuation token">.</span>style<span class="punctuation token">.</span>webkitTransform <span class="operator token">=</span> <span class="string token">'rotate(90deg)'</span></code></pre> </li> @@ -443,13 +443,13 @@ test<span class="punctuation token">.</span>style<span class="punctuation token" <h4 id="Support_for_new_layout_features">Support for new layout features</h4> -<p>Much of the layout work on the web today is done using <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a> — this is because floats are well-supported (way back to IE4, albeit with a number of bugs that would also need to be investigated if you were to try to support IE that far back). However, they are not really meant for layout purposes — using floats the way we do is really a hack — and they do have some serious limitations (e.g. see <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox#Why_Flexbox">Why Flexbox?</a>)</p> +<p>Much of the layout work on the web today is done using <a href="/ja/docs/Learn/CSS/CSS_layout/Floats">floats</a> — this is because floats are well-supported (way back to IE4, albeit with a number of bugs that would also need to be investigated if you were to try to support IE that far back). However, they are not really meant for layout purposes — using floats the way we do is really a hack — and they do have some serious limitations (e.g. see <a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox#Why_Flexbox">Why Flexbox?</a>)</p> -<p>More recently, dedicated layout mechanisms have appeared, like <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> and <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids#Native_CSS_Grids_with_Grid_Layout">CSS Grids</a>, which make common layout tasks far easier and remove such shortcomings. These however are not as well-supported in browsers:</p> +<p>More recently, dedicated layout mechanisms have appeared, like <a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> and <a href="/ja/docs/Learn/CSS/CSS_layout/Grids#Native_CSS_Grids_with_Grid_Layout">CSS Grids</a>, which make common layout tasks far easier and remove such shortcomings. These however are not as well-supported in browsers:</p> <ul> <li>CSS grids are very new; at the time of writing, they were only <a href="http://gridbyexample.com/browsers/">supported</a> in the very newest versions of modern browsers.</li> - <li>Flexbox is <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox#Cross_browser_compatibility">well-supported</a> in modern browsers, but provides problems in older browsers. IE 9 doesn't support it at all, and IE 10 and old versions of iOS/desktop Safari respectively support incompatible old versions of the flexbox spec. This results in some interesting browser prefix juggling if you want to try to use flexbox across all these browsers (see <a href="https://dev.opera.com/articles/advanced-cross-browser-flexbox/">Advanced Cross-Browser Flexbox</a> to get an idea).</li> + <li>Flexbox is <a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox#Cross_browser_compatibility">well-supported</a> in modern browsers, but provides problems in older browsers. IE 9 doesn't support it at all, and IE 10 and old versions of iOS/desktop Safari respectively support incompatible old versions of the flexbox spec. This results in some interesting browser prefix juggling if you want to try to use flexbox across all these browsers (see <a href="https://dev.opera.com/articles/advanced-cross-browser-flexbox/">Advanced Cross-Browser Flexbox</a> to get an idea).</li> </ul> <p>Layout features aren't as easy to provide graceful fallbacks for than simple colors, shadows, or gradients. If layout properties are ignored, your entire design will likely fall to pieces. Because of this, you need to use feature detection to detect whether visiting browsers support those layout features, and selectively apply different layouts depending on the result (we will cover feature detection in detail in a later article).</p> @@ -457,14 +457,14 @@ test<span class="punctuation token">.</span>style<span class="punctuation token" <p>For example, you could apply a flexbox layout to modern browsers, then instead apply a floated layout to older browsers that don't support flexbox.</p> <div class="note"> -<p><strong>Note</strong>: There is a fairly new feature in CSS called <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@supports">@supports</a></code>, which allows you to implement native feature detection tests.</p> +<p><strong>Note</strong>: There is a fairly new feature in CSS called <code><a href="/ja/docs/Web/CSS/@supports">@supports</a></code>, which allows you to implement native feature detection tests.</p> </div> <h4 id="Responsive_design_problems">Responsive design problems</h4> -<p>Responsive design is the practice of creating web layouts that change to suit different device form factors — for example different screen widths, orientations (portrait or landscape), or resolutions. A desktop layout for example will look terrible when viewed on a mobile device, so you need to provide a suitable mobile layout using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries">media queries</a>, and make sure it is applied correctly using <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>. You can find a detailed account of such practices in <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">The building blocks of responsive design</a>.</p> +<p>Responsive design is the practice of creating web layouts that change to suit different device form factors — for example different screen widths, orientations (portrait or landscape), or resolutions. A desktop layout for example will look terrible when viewed on a mobile device, so you need to provide a suitable mobile layout using <a href="/ja/docs/Web/CSS/Media_Queries">media queries</a>, and make sure it is applied correctly using <a href="/ja/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>. You can find a detailed account of such practices in <a href="/ja/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">The building blocks of responsive design</a>.</p> -<p>Resolution is a big issue too — for example, mobile devices are less likely to need big heavy images than desktop computers, and are more likely to have slower internet connections and possibly even expensive data plans that make wasted bandwidth more of a problem. In addition, different devices can have a range of different resolutions, meaning that smaller images could appear pixellated. There are a number of techniques that allow you to work around such problems, from simple <a href="https://developer.mozilla.org/en-US/Apps/Progressive/Responsive/Mobile_first">mobile first media queries</a>, to more complex <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Resolution_switching_Different_sizes">responsive image techniques</a>.</p> +<p>Resolution is a big issue too — for example, mobile devices are less likely to need big heavy images than desktop computers, and are more likely to have slower internet connections and possibly even expensive data plans that make wasted bandwidth more of a problem. In addition, different devices can have a range of different resolutions, meaning that smaller images could appear pixellated. There are a number of techniques that allow you to work around such problems, from simple <a href="/ja/Apps/Progressive/Responsive/Mobile_first">mobile first media queries</a>, to more complex <a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Resolution_switching_Different_sizes">responsive image techniques</a>.</p> <p>Another difficulty that can present problems is browser support for the features that make the above techniques possible. media queries are not supported in IE 8 or less, so if you want to use a mobile first layout and have the desktop layout then apply to old IE versions, you'll have to apply a media query {{glossary("polyfill")}} to your page, like <a href="https://code.google.com/archive/p/css3-mediaqueries-js/">css3-mediaqueries-js</a>, or <a href="https://github.com/scottjehl/Respond">Respond.js</a>.</p> @@ -477,9 +477,9 @@ test<span class="punctuation token">.</span>style<span class="punctuation token" <p>To use the Mozilla Developer Network (MDN), most people do a search engine search of the technology they are trying to find information on, plus the term "mdn", for example "mdn HTML5 video". MDN contains several useful types of content:</p> <ul> - <li>Reference material with browser support information for client-side web technologies, e.g. the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video"><video> reference page</a>.</li> - <li>Other supporting reference material, e.g. <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats">Media formats supported by the HTML audio and video elements</a>.</li> - <li>Useful tutorials that solve specific problems, for example <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a>.</li> + <li>Reference material with browser support information for client-side web technologies, e.g. the <a href="/ja/docs/Web/HTML/Element/video"><video> reference page</a>.</li> + <li>Other supporting reference material, e.g. <a href="/ja/docs/Web/HTML/Supported_media_formats">Media formats supported by the HTML audio and video elements</a>.</li> + <li>Useful tutorials that solve specific problems, for example <a href="/ja/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a>.</li> </ul> <p><a href="http://caniuse.com/">caniuse.com</a> provides support information, along with a few useful external resource links. For example, see <a href="http://caniuse.com/#search=video">http://caniuse.com/#search=video</a> (you just have to enter the feature you are searching for into the text box).</p> @@ -497,12 +497,12 @@ test<span class="punctuation token">.</span>style<span class="punctuation token" <h2 id="このモジュール">このモジュール</h2> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li> </ul> diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/introduction/index.html b/files/ja/learn/tools_and_testing/cross_browser_testing/introduction/index.html index 3e0e2e7834..3111d63b0e 100644 --- a/files/ja/learn/tools_and_testing/cross_browser_testing/introduction/index.html +++ b/files/ja/learn/tools_and_testing/cross_browser_testing/introduction/index.html @@ -50,7 +50,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction <p>その一方で、サイトが視力のあるユーザーにとって動作していても、視覚障がいのあるユーザーにとって、スクリーンリーダーアプリケーションがそこにある情報を読み取れないため完全にアクセスできない場合は、OKではありません。</p> -<p>2つ目に、「受け入れられる数のウェブブラウザ間で」と言った時、世界中のブラウザの 100% の意味ではありません — これは不可能です。ユーザーが使うブラウザや端末の情報を呼び出すことができます (このシリーズの2つ目の記事で見ていきましょう — <a href="https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#Gotta_test_%27em_all">Gotta test 'em all?</a>を見てください)が、すべてを保証することはできません。ウェブ開発者としては、ある範囲のブラウザと端末にてコードが完全に動作することをサイトオーナーと同意しておく必要があります。しかしそれを超えて、その他のブラウザでコンテンツを使う機会をできるだけ与えられるよう防衛的なコードを書いておく必要があります。</p> +<p>2つ目に、「受け入れられる数のウェブブラウザ間で」と言った時、世界中のブラウザの 100% の意味ではありません — これは不可能です。ユーザーが使うブラウザや端末の情報を呼び出すことができます (このシリーズの2つ目の記事で見ていきましょう — <a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#Gotta_test_%27em_all">Gotta test 'em all?</a>を見てください)が、すべてを保証することはできません。ウェブ開発者としては、ある範囲のブラウザと端末にてコードが完全に動作することをサイトオーナーと同意しておく必要があります。しかしそれを超えて、その他のブラウザでコンテンツを使う機会をできるだけ与えられるよう防衛的なコードを書いておく必要があります。</p> <div class="note"> <p><strong>注</strong>: このモジュールの後の方でも、防衛的なコードをカバーします。</p> diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/javascript/index.html b/files/ja/learn/tools_and_testing/cross_browser_testing/javascript/index.html index 12c8f274d6..2ee7e93ba0 100644 --- a/files/ja/learn/tools_and_testing/cross_browser_testing/javascript/index.html +++ b/files/ja/learn/tools_and_testing/cross_browser_testing/javascript/index.html @@ -104,7 +104,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/JavaScript <p>You can then point these tools at JavaScript files you want to lint, for example:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14171/js-hint-commandline.png" style="display: block; height: 478px; margin: 0px auto; width: 697px;">You can also use these tools with a task runner/build tool such as <a href="http://gulpjs.com/">Gulp</a> or <a href="https://webpack.github.io/">Webpack</a> to automatically lint your JavaScript during development. (see <a href="https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing#Using_a_task_runner_to_automate_testing_tools">Using a task runner to automate testing tools</a> in a later article.) See <a href="http://eslint.org/docs/user-guide/integrations">ESLint integrations</a> for ESLint options; JSHint is supported out of the box by Grunt, and also has other integrations available, e.g. <a href="https://github.com/webpack/jshint-loader">JSHint loader for Webpack</a>.</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/14171/js-hint-commandline.png" style="display: block; height: 478px; margin: 0px auto; width: 697px;">You can also use these tools with a task runner/build tool such as <a href="http://gulpjs.com/">Gulp</a> or <a href="https://webpack.github.io/">Webpack</a> to automatically lint your JavaScript during development. (see <a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing#Using_a_task_runner_to_automate_testing_tools">Using a task runner to automate testing tools</a> in a later article.) See <a href="http://eslint.org/docs/user-guide/integrations">ESLint integrations</a> for ESLint options; JSHint is supported out of the box by Grunt, and also has other integrations available, e.g. <a href="https://github.com/webpack/jshint-loader">JSHint loader for Webpack</a>.</p> <div class="note"> <p><strong>注</strong>: ESLint takes a bit more setup and configuration than JSHint, but it is more powerful too.</p> @@ -210,7 +210,7 @@ showHeroes(superHeroes);</pre> </ol> <div class="note"> -<p><strong>注</strong>: We'd like you to try fixing this problem yourself. To give you a clue, you can either <a href="/ja/docs/Web/API/XMLHttpRequest/responseType">tell the XMLHttpRequest object explicitly to return JSON format</a>, or <a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/JSON#Converting_between_objects_and_text">convert the returned text to JSON</a> after the response arrives. If you get stuck, consult our <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fixed-ajax.html">fixed-ajax.html</a> example.</p> +<p><strong>注</strong>: We'd like you to try fixing this problem yourself. To give you a clue, you can either <a href="/ja/docs/Web/API/XMLHttpRequest/responseType">tell the XMLHttpRequest object explicitly to return JSON format</a>, or <a href="/ja/docs/Learn/JavaScript/Objects/JSON#Converting_between_objects_and_text">convert the returned text to JSON</a> after the response arrives. If you get stuck, consult our <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fixed-ajax.html">fixed-ajax.html</a> example.</p> </div> <div class="note"> @@ -252,7 +252,7 @@ showHeroes(superHeroes);</pre> <p>For example:</p> <ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> are a great new feature for performing asynchronous operations and making sure those operations are complete before code that relies on their results is used for something else. As an example, the <a href="https://developer.mozilla.org/ja/docs/Web/API/GlobalFetch/fetch">Fetch API</a> (a modern equivalent to <a href="/ja/docs/Web/API/XMLHttpRequest">XMLHTTPRequest</a>) uses promises to fetch resources across the network and make sure that the response has been returned before they are used (for example, displaying an image inside an {{htmlelement("img")}} element). They are not supported in IE at all but are supported across all modern browsers.</li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> are a great new feature for performing asynchronous operations and making sure those operations are complete before code that relies on their results is used for something else. As an example, the <a href="/ja/docs/Web/API/GlobalFetch/fetch">Fetch API</a> (a modern equivalent to <a href="/ja/docs/Web/API/XMLHttpRequest">XMLHTTPRequest</a>) uses promises to fetch resources across the network and make sure that the response has been returned before they are used (for example, displaying an image inside an {{htmlelement("img")}} element). They are not supported in IE at all but are supported across all modern browsers.</li> <li>Arrow functions provide a shorter, more convenient syntax for writing <a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions#Anonymous_functions">anonymous functions</a>, which also has other advantages (see <a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a>). For a quick example, see <a href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/arrow-function.html">arrow-function.html</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/arrow-function.html">source code</a> also). Arrow functions are supported across all modern browsers, except for IE and Safari.</li> <li>Declaring <a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> at the top of your JavaScript code causes it to be parsed with a stricter set of rules, meaning that more warnings and errors will be thrown, and some things will be disallowed that would otherwise be acceptable. It is arguably a good idea to use strict mode, as it makes for better, more efficient code, however it has limited/patchy support across browsers (see <a href="/ja/docs/Web/JavaScript/Reference/Strict_mode#Strict_mode_in_browsers">Strict mode in browsers</a>).</li> <li><a href="/ja/docs/Web/JavaScript/Typed_arrays">Typed arrays</a> allow JavaScript code to access and manipulate raw binary data, which is necessary as browser APIs for example start to manipulate streams of raw video and audio data. These are available in IE10 and above, and all modern browsers.</li> diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.html b/files/ja/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.html index 06f93804ce..8f36e7e65b 100644 --- a/files/ja/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.html +++ b/files/ja/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.html @@ -50,7 +50,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Your_own_automatio <h3 id="Setting_up_Selenium_in_Node" name="Setting_up_Selenium_in_Node">Node で Selenium のセットアップ</h3> <ol> - <li>まず、最後の章の <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing#Setting_up_Node_and_npm">Setting up Node and npm</a> で説明しているように、新しいnpmプロジェクトをセットアップします。<code>selenium-test</code>のように違うものを呼んでください。</li> + <li>まず、最後の章の <a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing#Setting_up_Node_and_npm">Setting up Node and npm</a> で説明しているように、新しいnpmプロジェクトをセットアップします。<code>selenium-test</code>のように違うものを呼んでください。</li> <li>次に私たちはNodeの内部からSeleniumが機能するようにフレームワークをインストールする必要があります。 更新頻度が高く、よく改善されるため、私たちは<a href="https://www.npmjs.com/package/selenium-webdriver">selenium-webdriver</a>を選択します。もしも他の選択をするならば<a href="http://webdriver.io/">webdriver.io</a> と <a href="http://nightwatchjs.org/">nightwatch.js</a> もいい選択です。selenium-webdriverをインストールするため, プロジェクトフォルダの下で以下のコマンドを走らせます:</li> <li> <pre class="brush: bash"><code>npm install selenium-webdriver</code></pre> diff --git a/files/ja/mdn/about/index.html b/files/ja/mdn/about/index.html index f65c83f6d7..2b570c5e98 100644 --- a/files/ja/mdn/about/index.html +++ b/files/ja/mdn/about/index.html @@ -30,7 +30,7 @@ translation_of: MDN/About <p>私たちはグローバルなコミュニティです。世界中にコンテンツを作成したり、バグを修正したり、コンテンツの変更をレビューしたり、サンプルコードを追加したりして手伝ってくださる、すばらしい協力者の皆さんがいます。</p> -<p>しかし、 MDN を手助けするのにプロのコーダーやライターである必要はありません。 <a href="/en-US/docs/MDN/Contribute">MDN への貢献</a>ページにアクセスしてみて、あなたの専門性や時間的な余裕に応じて手伝っていただけることを見つけてください。</p> +<p>しかし、 MDN を手助けするのにプロのコーダーやライターである必要はありません。 <a href="/ja/docs/MDN/Contribute">MDN への貢献</a>ページにアクセスしてみて、あなたの専門性や時間的な余裕に応じて手伝っていただけることを見つけてください。</p> <h2 id="Using_MDN_Web_Docs_content">MDN Web Docs のコンテンツの利用</h2> @@ -104,6 +104,6 @@ translation_of: MDN/About <p>2017 年 7 月に名前が MDN Web Docs に変更されました。この決定の背景となる理念については <a href="https://blog.mozilla.org/opendesign/future-mdn-focus-web-docs/">The Future of MDN: A Focus on Web Docs</a> をご覧ください。</p> -<p>MDN の歴史については、 <a href="/en-US/docs/MDN/At_ten">10 周年記念ページ</a>に、関係者による口述の歴史が掲載されています。また、ブログ記事 <a href="https://hacks.mozilla.org/2020/07/mdn-web-docs-15-years-young/">MDN Web Docs: 15 years young</a> では、 15 周年記念のレポートが掲載されています。</p> +<p>MDN の歴史については、 <a href="/ja/docs/MDN/At_ten">10 周年記念ページ</a>に、関係者による口述の歴史が掲載されています。また、ブログ記事 <a href="https://hacks.mozilla.org/2020/07/mdn-web-docs-15-years-young/">MDN Web Docs: 15 years young</a> では、 15 周年記念のレポートが掲載されています。</p> <p>2020 年 12 月 14 日には、新しいプラットフォーム Yari に移行し、すべてのコンテンツを <a href="https://github.com/mdn/content">GitHub のリポジトリー</a>に保存するという、さらなる進化を遂げました。詳しくは <a href="https://hacks.mozilla.org/2020/12/welcome-yari-mdn-web-docs-has-a-new-platform/">Welcome Yari: MDN Web Docs has a new platform</a> をお読みください。</p> diff --git a/files/ja/mdn/at_ten/history_of_mdn/index.html b/files/ja/mdn/at_ten/history_of_mdn/index.html index c35e20ddaa..218c57c1e7 100644 --- a/files/ja/mdn/at_ten/history_of_mdn/index.html +++ b/files/ja/mdn/at_ten/history_of_mdn/index.html @@ -95,7 +95,7 @@ Mozilla 開発者のための場所 <article class="chapter chapter-justtext" id="kuma"> <h2 id="Kuma_3_つ目の、そして現行の_Wiki_エンジン">Kuma <small>3 つ目の、そして現行の Wiki エンジン</small></h2> -<p>2011 年初期頃、<a href="https://github.com/mozilla/kitsune">Kitsune</a> から fork され、2012 年 8 月 3 日に立ち上がった <a href="https://github.com/mozilla/kuma">Kuma </a> は Django をベースに Mozilla が構築した Wiki プラットフォームで Node.js を使った <a href="/en-US/docs/MDN/Kuma/Introduction_to_KumaScript">KumaScript</a> マクロシステムも付随してます。</p> +<p>2011 年初期頃、<a href="https://github.com/mozilla/kitsune">Kitsune</a> から fork され、2012 年 8 月 3 日に立ち上がった <a href="https://github.com/mozilla/kuma">Kuma </a> は Django をベースに Mozilla が構築した Wiki プラットフォームで Node.js を使った <a href="/ja/docs/MDN/Kuma/Introduction_to_KumaScript">KumaScript</a> マクロシステムも付随してます。</p> <p>コードは GitHub 上にあるので、コミュニティーは、MDN の CMS にも貢献し始めました。今後、"MDN のハック" には文書を書くことと Kuma のコーディングの両方が含まれることになるでしょう。</p> @@ -160,7 +160,7 @@ Mozilla 開発者のための場所 <article class="chapter chapter-justtext" id="mdn-learning"> <h2 id="Learning_Area">Learning Area</h2> -<p>MDN の <a href="https://developer.mozilla.org/ja/Learn">Learning Area</a> はWeb の基礎スキルを教える新しい取り組みです。 これまでの 10 年を通して、MDN はたくさんの応用的な記事と貴重な情報をエキスパートの為に提供し続けてきました。このプロジェクトでは初心者に焦点を当てた記事を書き、知識ギャップを埋めることを目標としています。</p> +<p>MDN の <a href="/ja/Learn">Learning Area</a> はWeb の基礎スキルを教える新しい取り組みです。 これまでの 10 年を通して、MDN はたくさんの応用的な記事と貴重な情報をエキスパートの為に提供し続けてきました。このプロジェクトでは初心者に焦点を当てた記事を書き、知識ギャップを埋めることを目標としています。</p> </article> <article class="chapter chapter-portrait" id="jeremie"><a class="chapter-portrait-img" href="https://twitter.com/jeremiepat"><img alt="Jérémie Patonnier" src="https://pbs.twimg.com/profile_images/1731588715/jeremie-patonnier-150.jpg" style="height: 128px; width: 128px;"> </a> diff --git a/files/ja/mdn/at_ten/index.html b/files/ja/mdn/at_ten/index.html index a540cc7c94..32305aa409 100644 --- a/files/ja/mdn/at_ten/index.html +++ b/files/ja/mdn/at_ten/index.html @@ -12,13 +12,13 @@ original_slug: MDN_at_ten <p>フリーで、コミュニティが作るWeb 開発者のための新しいオンラインリソースをつくる、という理想に燃えた小さなチームが作業を開始したのが 2005 年でした。彼らの働きが現在の Mozilla Developer Network の礎となっています。それから 10 年後の現在 MDN のコミュニティは大きく成長し、 Web 技術に関するドキュメントやサンプルコード、学習用の教材を作成し続けています。CSS / HTML / JavaScript に代表されるあらゆるオープンな Web 技術をカバーし、オープンな Web の力を支えています。</p> -<p><a class="learnmore" href="/docs/MDN_at_ten/History_of_MDN">詳細はこちら <span class="offscreen">about the history</span></a></p> +<p><a class="learnmore" href="/ja/docs/MDN_at_ten/History_of_MDN">詳細はこちら <span class="offscreen">about the history</span></a></p> <h2 id="MDN_へ参加しよう">MDN へ参加しよう</h2> <p>10 年にわたり、MDN のコミュニティはオープン Web に関するドキュメントを作成し、更新し続けてきました。90,000 を超えるドキュメントが Mozillan によって作成され、翻訳されています。そんなコミュニティのメンバーに参加しませんか？何か大きなことをしなくても大丈夫。新しい Web API に関する記事を 1 から書くことも、単純なタイプミスの修正も、どちらも等しく重要な貢献です。</p> -<p><a class="learnmore" href="/docs/MDN_at_ten/Contributing_to_MDN">詳細はこちら <span class="offscreen">about contributing</span></a></p> +<p><a class="learnmore" href="/ja/docs/MDN_at_ten/Contributing_to_MDN">詳細はこちら <span class="offscreen">about contributing</span></a></p> </div> <div class="column-4"> diff --git a/files/ja/mdn/contribute/fixing_mdn_content_bugs/index.html b/files/ja/mdn/contribute/fixing_mdn_content_bugs/index.html index 158cc7a77d..94863f9fe1 100644 --- a/files/ja/mdn/contribute/fixing_mdn_content_bugs/index.html +++ b/files/ja/mdn/contribute/fixing_mdn_content_bugs/index.html @@ -75,7 +75,7 @@ tags: <tbody> <tr> <td><a href="https://github.com/mdn/sprints/projects/12">Learn docs MDN project board</a></td> - <td><a href="/en-US/docs/Learn">Learn Web Development</a> に関する課題。</td> + <td><a href="/ja/docs/Learn">Learn Web Development</a> に関する課題。</td> </tr> <tr> <td><a href="https://github.com/mdn/sprints/projects/11">Content architecture MDN </a><a href="https://github.com/mdn/sprints/projects/12">project</a><a href="https://github.com/mdn/sprints/projects/11"> board</a></td> @@ -83,27 +83,27 @@ tags: </tr> <tr> <td><a href="https://github.com/mdn/sprints/projects/10">HTTP docs MDN </a><a href="https://github.com/mdn/sprints/projects/12">project</a><a href="https://github.com/mdn/sprints/projects/10"> board</a></td> - <td><a href="/en-US/docs/Web/HTTP">HTTP</a> の文書に関する課題</td> + <td><a href="/ja/docs/Web/HTTP">HTTP</a> の文書に関する課題</td> </tr> <tr> <td><a href="https://github.com/mdn/sprints/projects/9">HTML docs MDN </a><a href="https://github.com/mdn/sprints/projects/12">project</a><a href="https://github.com/mdn/sprints/projects/9"> board</a></td> - <td><a href="/en-US/docs/Web/HTML">HTML</a> の文書に関する課題</td> + <td><a href="/ja/docs/Web/HTML">HTML</a> の文書に関する課題</td> </tr> <tr> <td><a href="https://github.com/mdn/sprints/projects/8">DevTools docs MDN </a><a href="https://github.com/mdn/sprints/projects/12">project</a><a href="https://github.com/mdn/sprints/projects/8"> board</a></td> - <td>Firefox <a href="/en-US/docs/Tools">DevTools</a> の文書に関する課題</td> + <td>Firefox <a href="/ja/docs/Tools">DevTools</a> の文書に関する課題</td> </tr> <tr> <td><a href="https://github.com/mdn/sprints/projects/7">WebExtensions docs MDN </a><a href="https://github.com/mdn/sprints/projects/12">project</a><a href="https://github.com/mdn/sprints/projects/7"> board</a></td> - <td><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> の文書に関する課題</td> + <td><a href="/ja/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> の文書に関する課題</td> </tr> <tr> <td><a href="https://github.com/mdn/sprints/projects/6">CSS docs MDN </a><a href="https://github.com/mdn/sprints/projects/12">project</a><a href="https://github.com/mdn/sprints/projects/6"> board</a></td> - <td><a href="/en-US/docs/Web/CSS/Reference">CSS</a> の文書に関する課題</td> + <td><a href="/ja/docs/Web/CSS/Reference">CSS</a> の文書に関する課題</td> </tr> <tr> <td><a href="https://github.com/mdn/sprints/projects/5">JavaScript docs MDN </a><a href="https://github.com/mdn/sprints/projects/12">project</a><a href="https://github.com/mdn/sprints/projects/5"> board</a></td> - <td><a href="/en-US/docs/Web/JavaScript">JavaScript</a> の文書に関する課題</td> + <td><a href="/ja/docs/Web/JavaScript">JavaScript</a> の文書に関する課題</td> </tr> </tbody> </table> diff --git a/files/ja/mdn/contribute/howto/convert_code_samples_to_be_live/index.html b/files/ja/mdn/contribute/howto/convert_code_samples_to_be_live/index.html index 3f8029ddac..882a3e8a69 100644 --- a/files/ja/mdn/contribute/howto/convert_code_samples_to_be_live/index.html +++ b/files/ja/mdn/contribute/howto/convert_code_samples_to_be_live/index.html @@ -1,5 +1,5 @@ --- -title: コードサンプルを "ライブ" に変換するには +title: コードサンプルを「ライブ」に変換するには slug: MDN/Contribute/Howto/Convert_code_samples_to_be_live tags: - Beginner @@ -9,28 +9,28 @@ translation_of: MDN/Contribute/Howto/Convert_code_samples_to_be_live --- <div>{{MDNSidebar}}</div> -<p class="summary">MDN には "<a href="/ja/docs/MDN/Contribute/Structures/Live_samples">ライブサンプル</a>" システムがあり、ここではコードサンプルが、そのサンプルの出力を直接表示するのに使われます。しかし、既存の記事にはこのシステムをまだ使っていないコードサンプルが多々あり、変換する必要があります。</p> +<p class="summary">MDN には「<a href="/ja/docs/MDN/Structures/Live_samples">ライブサンプル</a>」システムがあり、ここではコードサンプルが、そのサンプルの出力を直接表示するのに使われます。しかし、既存の記事にはこのシステムをまだ使っていないコードサンプルが多々あり、変換する必要があります。</p> -<p><span class="seoSummary">ライブサンプルは、サンプルの出力がどのようなものかを見ることができ、ドキュメントをよりダイナミックで教育的なものにできます。このガイドは既存サンプルを取り上げて、 "ライブ" 動作を追加する方法を掲載します。</span></p> +<p><span class="seoSummary">ライブサンプルは、サンプルの出力がどのようなものかを見ることができ、ドキュメントをよりダイナミックで教育的なものにできます。このガイドは既存サンプルを取り上げて、「ライブ」動作を追加する方法を掲載します。</span></p> <dl> - <dt><strong>どこのページに行う必要があるか?</strong></dt> - <dd><a href="/ja/docs/tag/NeedsLiveSample">NeedsLiveSample</a> とタグ付けられた記事。</dd> - <dt><strong>タスクを行うのにどんな知識が必要か?</strong></dt> + <dt><strong>行う必要のあるページ</strong></dt> + <dd>静的なコード例 (単なる HTML、CSS、JavaScript のブロック) を掲載している記事で、実際に動いているところを見せた方が良いと思われるもの。</dd> + <dt><strong>タスクを行うのに必要な知識</strong></dt> <dd> <ul> <li>コードサンプルに応じて、 HTML, CSS 及び/あるいは JavaScript を理解すること</li> - <li>MDN 記事内の <a href="/ja/docs/MDN/Contribute/Tools/KumaScript">KumaScript</a> マクロを使う能力</li> + <li>MDN 記事内の <a href="/ja/docs/MDN/Tools/KumaScript">KumaScript</a> マクロを使う能力</li> </ul> </dd> - <dt><strong>タスクを実行するステップは?</strong></dt> + <dt><strong>タスクを実行するステップ</strong></dt> <dd> <ol> - <li><a href="/ja/docs/tag/NeedsLiveSample">NeedsLiveSample</a> とタグ付けされていて、あなたが慣れていると感じる機能向けのコードサンプルがある記事の一覧から1つ選ぶ。</li> - <li>コードサンプルが "ライブ" となるよう変換する。</li> - <li>以前にサンプル出力を表示するために使われていた、あらゆるコードや画像を削除する。</li> + <li>「ライブ」に変換すべきだと思うコード例を見つけてください。</li> + <li>コードサンプルが「ライブ」となるよう変換してください。</li> + <li>以前にサンプル出力を表示するために使われていた、コードや画像を削除してください。</li> </ol> </dd> </dl> -<p>ライブサンプルの作成と編集についての詳細情報は、 <a href="/ja/docs/MDN/Contribute/Structures/Live_samples">ライブサンプルシステムの使用</a>を参照してください。</p> +<p>ライブサンプルの作成と編集についての詳細情報は、 <a href="/ja/docs/MDN/Structures/Live_samples">ライブサンプルシステムの使用</a>を参照してください。</p> diff --git a/files/ja/mdn/contribute/howto/create_an_interactive_exercise_to_help_learning_the_web/index.html b/files/ja/mdn/contribute/howto/create_an_interactive_exercise_to_help_learning_the_web/index.html index 00d20765d7..46b48385ba 100644 --- a/files/ja/mdn/contribute/howto/create_an_interactive_exercise_to_help_learning_the_web/index.html +++ b/files/ja/mdn/contribute/howto/create_an_interactive_exercise_to_help_learning_the_web/index.html @@ -15,7 +15,7 @@ translation_of: MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_lear <h2 id="MDN_ライブサンプル">MDN ライブサンプル</h2> -<p>MDN has a very cool feature called <strong>live samples</strong>. It's a mechanism that turns any HTML, CSS, and JavaScript code inside an MDN page into its executed equivalent. Before using it, you should read over <a href="/en-US/docs/MDN/Contribute/Editor/Live_samples">Using the live sample system</a>, which is our complete documentation for building them. While they're easy to do, there are quirks and tricks you'll learn along the way.</p> +<p>MDN has a very cool feature called <strong>live samples</strong>. It's a mechanism that turns any HTML, CSS, and JavaScript code inside an MDN page into its executed equivalent. Before using it, you should read over <a href="/ja/docs/MDN/Contribute/Editor/Live_samples">Using the live sample system</a>, which is our complete documentation for building them. While they're easy to do, there are quirks and tricks you'll learn along the way.</p> <p>What is interesting is that it's really easy to tweak that feature to use it in order to embed any kind of tool or utility you want into an MDN page.</p> @@ -164,7 +164,7 @@ document.addEventListener('keyup', function () { \{{EmbedLiveSample('hidden_code_example', 120, 120)}} </div></pre> -<p>You can see a more advance example of such a tweak on <a href="/en-US/docs/Web/API/Canvas_API#JavaScript">the Canvas API page</a>.</p> +<p>You can see a more advance example of such a tweak on <a href="/ja/docs/Web/API/Canvas_API#JavaScript">the Canvas API page</a>.</p> <h3 id="Code_from_outside_the_page">Code from outside the page</h3> @@ -178,6 +178,6 @@ document.addEventListener('keyup', function () { <p>Click on the following square to randomly change its color or just type a hexadecimal code color</p> {{EmbedLiveSample('The_example', 120, 120, '', 'MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web/distant_example')}}</div> -<p>This time, if you take a <a href="/en-US/docs/MDN/Contribute/Editor/Source_mode">look at that page's HTML using the MDN editor</a>, you'll see no hidden code. If you want to see the code, just go to <a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web/distant_example">the page that hosts it</a>.</p> +<p>This time, if you take a <a href="/ja/docs/MDN/Contribute/Editor/Source_mode">look at that page's HTML using the MDN editor</a>, you'll see no hidden code. If you want to see the code, just go to <a href="/ja/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web/distant_example">the page that hosts it</a>.</p> -<p>You can see a more advanced example of this usage in our <a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_build_custom_form_widgets">HTML Form tutorial</a>, which uses this technique to allow experimentation with forms.</p> +<p>You can see a more advanced example of this usage in our <a href="/ja/docs/Web/Guide/HTML/Forms/How_to_build_custom_form_widgets">HTML Form tutorial</a>, which uses this technique to allow experimentation with forms.</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 7a0cf12f4c..5bc83935d3 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 @@ -56,7 +56,7 @@ translation_of: MDN/Contribute/Howto/Create_and_edit_pages <h3 id="Attach_files" name="Attach_files">添付ファイル</h3> -<p>ファイルを添付するには、特殊なユーザー権限が必要です。詳細は <a href="/en-US/docs/MDN/Contribute/Editor/Basics/Attachments">Attachments in the MDN editor</a> をご覧ください。そこにアップロード権限のリクエスト方法も書かれています。</p> +<p>ファイルを添付するには、特殊なユーザー権限が必要です。詳細は <a href="/ja/docs/MDN/Contribute/Editor/Basics/Attachments">Attachments in the MDN editor</a> をご覧ください。そこにアップロード権限のリクエスト方法も書かれています。</p> <h3 id="Publish_Discard_or_Keep_editing" name="Publish_Discard_or_Keep_editing">公開、破棄、編集の続行</h3> @@ -159,18 +159,18 @@ translation_of: MDN/Contribute/Howto/Create_and_edit_pages <ol> <li>既存ページのテキスト内の (意味のある) どこかの場所に新しいページの名前を入力します。</li> - <li>その名前をハイライトしてエディターツールバーから<strong>リンクアイコン (<img alt="" src="https://developer.mozilla.org/files/3810/link-icon.png" style="height: 28px; width: 29px;">) をクリック</strong>します。<strong>'Update Link'</strong> のダイアログが開き、 <strong>'Link To'</strong> 欄が強調されています。</li> + <li>その名前をハイライトしてエディターツールバーから<strong>リンクアイコン (<img alt="" src="/files/3810/link-icon.png" style="height: 28px; width: 29px;">) をクリック</strong>します。<strong>'Update Link'</strong> のダイアログが開き、 <strong>'Link To'</strong> 欄が強調されています。</li> <li>既定では URL 欄の最初に <strong>"/ja/docs/"</strong> が挿入されます。 "/ja/docs/" の後にページ名を入力します。ページ名はリンクテキストと同じである必要はありません。</li> <li><strong>OK</strong> をクリックしてリンクを作成、挿入します。</li> </ol> -<p>ページがまだ存在しない場合、リンクは赤く表示されます。ページがすでに存在する場合、リンクは青く表示されます。新しいページを作成したいが、ページタイトルがすでに取られている場合、まずはすでにあるページの編集を助けたり改良したりするのがもっと意味があるのではないのかを確認してください。そうでない場合、新しいページに別の名前を考えてリンクを作成します。ガイドラインの <a href="https://developer.mozilla.org/Project:en/Page_Naming_Guide" title="Project:en/Page_Naming_Guide">page naming guide</a> を参照してください。</p> +<p>ページがまだ存在しない場合、リンクは赤く表示されます。ページがすでに存在する場合、リンクは青く表示されます。新しいページを作成したいが、ページタイトルがすでに取られている場合、まずはすでにあるページの編集を助けたり改良したりするのがもっと意味があるのではないのかを確認してください。そうでない場合、新しいページに別の名前を考えてリンクを作成します。ガイドラインの <a href="/Project:en/Page_Naming_Guide" title="Project:en/Page_Naming_Guide">page naming guide</a> を参照してください。</p> <p>新しいページに中身を追加するには、 (エディターを保存して閉じた後に) 作成したばかりの赤いリンクをクリックします。新しいページがエディターモードで開かれて、書き始められます。エディターモードの使用については、この記事の<a href="#Editing_an_existing_page">既存のページを編集する</a>節を参照してください。</p> <h2 id="Refreshing_page_content" name="Refreshing_page_content">ページ内容の更新</h2> -<p>KumaScript のマクロの MDN 対応や、他のページの内容の統合は、パフォーマンス上の理由でページをキャッシュする必要により妨げられることがあります。ページはソースから構築され、その出力は将来のリクエストのためにキャッシュされます。そのため、マクロ (テンプレート) や (<span class="templateLink"><code><a href="https://developer.mozilla.org/en-US/docs/Template:Page">Page</a></code></span> マクロを使用した) 統合はマクロやその出力、統合された素材の内容のその後の変更が反映されません。</p> +<p>KumaScript のマクロの MDN 対応や、他のページの内容の統合は、パフォーマンス上の理由でページをキャッシュする必要により妨げられることがあります。ページはソースから構築され、その出力は将来のリクエストのためにキャッシュされます。そのため、マクロ (テンプレート) や (<span class="templateLink"><code><a href="/en-US/docs/Template:Page">Page</a></code></span> マクロを使用した) 統合はマクロやその出力、統合された素材の内容のその後の変更が反映されません。</p> <ul> <li>ページを手動で更新するには、ウェブブラウザーで強制的に再読み込みしてください。 MDN はこれを検知してページの再構築を起動し、更新されたマクロの出力や統合されたページ内容を引き出します。</li> diff --git a/files/ja/mdn/contribute/howto/index.html b/files/ja/mdn/contribute/howto/index.html index 4c8d8f442e..376c851565 100644 --- a/files/ja/mdn/contribute/howto/index.html +++ b/files/ja/mdn/contribute/howto/index.html @@ -12,7 +12,7 @@ translation_of: MDN/Contribute/Howto --- <div>{{MDNSidebar}}</div> -<div class="note">このページでは、日本語訳されたサブページの一覧を表示しています。<a href="/en-US/docs/MDN/Contribute/Howto">英語版</a>に存在していても、日本語訳されていないページは表示されません。日本語訳にご協力ください。</div> +<div class="note">このページでは、日本語訳されたサブページの一覧を表示しています。<a href="/ja/docs/MDN/Contribute/Howto">英語版</a>に存在していても、日本語訳されていないページは表示されません。日本語訳にご協力ください。</div> <p class="summary">ここにある記事は、MDN に貢献する際に具体的な目標を達成するためのステップごとのガイドを提供するものです。</p> diff --git a/files/ja/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.html b/files/ja/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.html index 0927f045c1..4c2c633bb8 100644 --- a/files/ja/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.html +++ b/files/ja/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.html @@ -30,7 +30,7 @@ translation_of: MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary <p>新たなトピックについての考えがあるならば、新しいタブで以下のボタンを開き、ボタンよりも下にある手順通りにしてください。</p> -<div class="align-center"><a class="button ignore-external mega positive" href="/en-US/docs/new?parent=4391">用語集に新しい項目を書く</a></div> +<div class="align-center"><a class="button ignore-external mega positive" href="/ja/docs/new?parent=4391">用語集に新しい項目を書く</a></div> <h3 id="Step_1_Select_a_term_to_explain" name="Step_1_Select_a_term_to_explain">ステップ1: 説明する用語を選ぶ</h3> diff --git a/files/ja/mdn/contribute/howto/write_an_api_reference/sidebars/index.html b/files/ja/mdn/contribute/howto/write_an_api_reference/sidebars/index.html index eff5daddd8..b57d0918b3 100644 --- a/files/ja/mdn/contribute/howto/write_an_api_reference/sidebars/index.html +++ b/files/ja/mdn/contribute/howto/write_an_api_reference/sidebars/index.html @@ -75,7 +75,7 @@ original_slug: MDN/Structures/API_references/API_reference_sidebars <p>この節では、<code>GroupData</code> 項目に含めることができるすべてのサブメンバーを一覧表示します。</p> -<p>リストされたサブメンバーの中に含まれる値のほとんどは、リンクテキストと、表示されるリンクの最終的な URL を生成するためのメイン API インデックスページ — <code>https://developer.mozilla.org/<em><language-code></em>/docs/Web/API</code> — の最後に追加されたスラッグの両方に相当することに注意してください。そのため、例えば "Body" とすると、 <em>en-US</em> ロケールではこのようなリンクが生成されます。</p> +<p>リストされたサブメンバーの中に含まれる値のほとんどは、リンクテキストと、表示されるリンクの最終的な URL を生成するためのメイン API インデックスページ — <code>/<em><language-code></em>/docs/Web/API</code> — の最後に追加されたスラッグの両方に相当することに注意してください。そのため、例えば "Body" とすると、 <em>en-US</em> ロケールではこのようなリンクが生成されます。</p> <pre class="brush: html notranslate"><li><a href="https://developer.mozilla.org/en-US/docs/Web/API">Body</a></li></pre> diff --git a/files/ja/mdn/contribute/open_source_etiquette/index.html b/files/ja/mdn/contribute/open_source_etiquette/index.html index ccd7afc154..041a12e91e 100644 --- a/files/ja/mdn/contribute/open_source_etiquette/index.html +++ b/files/ja/mdn/contribute/open_source_etiquette/index.html @@ -105,7 +105,7 @@ translation_of: MDN/Contribute/Open_source_etiquette <h2 id="read_the_manual">マニュアルを読みましょう</h2> -<p>優れた OSP は、常に協力者のドキュメントが容易に入手できるようにしています。 GitHub のプロジェクトでは、通常はリポジトリの CONTRIBUTING.md ファイル、またはプロジェクトの README.md ファイルに記載されています。ドキュメントプロジェクトである MDN のコンテンツには <a href="https://github.com/mdn/content/blob/main/README.md">README</a> があり、サイト自体に協力者向けのドキュメントがきちんと用意されています (<a href="/en-US/docs/MDN/Contribute">MDN への貢献</a>を参照)。</p> +<p>優れた OSP は、常に協力者のドキュメントが容易に入手できるようにしています。 GitHub のプロジェクトでは、通常はリポジトリの CONTRIBUTING.md ファイル、またはプロジェクトの README.md ファイルに記載されています。ドキュメントプロジェクトである MDN のコンテンツには <a href="https://github.com/mdn/content/blob/main/README.md">README</a> があり、サイト自体に協力者向けのドキュメントがきちんと用意されています (<a href="/ja/docs/MDN/Contribute">MDN への貢献</a>を参照)。</p> <p>ここで1つお願いしたいのは、「助けを求めることを恐れないで、ただし、必ず質問する前に答えを見つけようとすること」です。そうすることで、プロジェクトに関する知識を深め、より自立した人間になることができ、他の協力者に不必要な負担をかけることもありません。</p> diff --git a/files/ja/mdn/contribute/processes/content_bug_triage/index.html b/files/ja/mdn/contribute/processes/content_bug_triage/index.html new file mode 100644 index 0000000000..f2c0f30482 --- /dev/null +++ b/files/ja/mdn/contribute/processes/content_bug_triage/index.html @@ -0,0 +1,164 @@ +--- +title: MDN コンテンツのバグのトリアージ手順 +slug: MDN/Contribute/Processes/Content_bug_triage +tags: + - MDN + - MDN Meta + - Meta + - Meta Docs + - Content bugs + - Process + - Triage +translation_of: MDN/Contribute/Processes/Content_bug_triage +--- +<p>{{MDNSidebar}}</p> + +<p>この文書では、コンテンツのバグをトリアージし、協力者が効果的に作業できるようにするための手順について説明します。</p> + +<h2 id="reporting_and_working_on_bugs">バグの報告と作業</h2> + +<p>誰でもコンテンツのバグを報告することができます。<a href="https://github.com/mdn/content/issues/new">https://github.com/mdn/content/issues/new</a> で "Content bug" の課題テンプレートを使って課題を書くか、MDN の各ページの下にある "Report a problem with this content on GitHub" リンクを使って報告してください。</p> + +<p>報告されたコンテンツバグは、<a href="https://github.com/mdn/content/issues">https://github.com/mdn/content/issues</a> にリストアップされ、最小限のプロセスで個人が作業できるように設計されています。<a href="/ja/docs/MDN/Contribute/Fixing_MDN_content_bugs">MDN のコンテンツバグの修正</a>で紹介されているプロセスを用いて、誰でもコンテンツのバグに取り組むことができます。</p> + +<h2 id="overall_triage_process">トリアージ手順の概要</h2> + +<p>トリアージの手順を簡単に説明すると、次のようになります。</p> + +<p>トリアージの準備</p> + +<ul> + <li>トリアージ担当者を決める — 誰が通常のトリアージを行うのか？</li> + <li>初期ラベルの設定 — 新しいバグが入ってきたらすぐに、トリアージが必要であることを示すために "needs-triage" ラベルをつけ (これは自動的に行われるはずです)、加えて "Content:" ラベルを付けて (たとえば "Content:HTML" など) どのトピック領域のものであるかを示してください。バグを発見したときに誰でもこれを行うことができますが、MDN コアチームはこれを積極的に監視しています。</li> + <li>トリアージの時間を確保する — 毎週、トリアージを行うための30分の定期的な時間を設定してください。</li> +</ul> + +<p>課題ごとのトリアージ</p> + +<ul> + <li>チェックリスト — トリアージの準備ができているかどうかをチェックリストで確認します。</li> + <li>優先順位を設定 — 優先順位のルールに従います。</li> + <li>他の協力者がより簡単にバグの処理を始められるように、さらなる情報を提供します。</li> + <li>他のラベルを設定 — 作業する課題を選択するのに役立つラベルを他にも設定できます。</li> +</ul> + +<p>古いバグをチェック — 既存のバグを見て、停滞しているバグやクローズが必要なバグなどがないか確認します。</p> + +<h2 id="triage_preparation">トリアージの準備</h2> + +<h3>トリアージ担当者の決定</h3> + +<p>MDN の各コンテンツ領域に寄せられたバグを定期的にトリアージするために、トリアージ担当者が必要です。現在、以下のようなトリアージ担当者が割り当てられています。</p> + +<ul> + <li>Accessibility — Eric Bailey?</li> + <li>CSS — Rachel Andrew</li> + <li>DevTools — Hamish Willee</li> + <li>HTML — Rachel Andrew</li> + <li>HTTP — Florian Scholz</li> + <li>JS — Florian Scholz</li> + <li>Learn — Chris Mills</li> + <li>Learn:CSS — Rachel Andrew</li> + <li>Learn:Express / Learn:Django — Hamish Willee</li> + <li>Media — Ruth John</li> + <li>Other — Ruth John</li> + <li>SVG — André Jaenisch</li> + <li>WebAPI — Ruth John</li> + <li>WebExt — Caitlin/WebExt team</li> +</ul> + +<h3 id="set_initial_labels">初期ラベルの設定</h3> + +<p>新しい課題が提出されるとすぐに、 MDN のコアチームおよび支援を希望する他の誰もが、その課題に以下のラベルを追加します。 + +<ul> + <li><code>needs-triage</code> — この課題が作業可能な状態にするために、適切なトリアージが必要であることを示します (これは自動的に行われます)。</li> + <li><code>Content:<em><area></em></code> — <code>Content:HTML</code> や <code>Content:CSS</code> など、この課題が関連するコンテンツのトピックを指定します。トリアージが特定の分野の課題を見つけられるようにするために必要です。</li> + <li><code>l10n-fr</code>, <code>l10n-zh</code>, <code>l10n-ja</code> — 提出された課題が、米国以外のアクティブなロケールに関係することを指定します。これらのロケールのチームがこれらの課題をピックアップし、トリアージを行います。</li> +</ul> + +<h3 id="set_aside_triage_time">トリアージの時間を確保する</h3> + +<p>トリアージ担当者は、常に積極的にバグをトリアージする必要はありません。その代わりに、毎週 30 分程度の時間を確保して、自分の担当領域のバグをトリアージすることにしましょう。</p> + +<p>これは、同期ミーティングの一環として行う必要はなく、他の人と同じ時間に行う必要もありません。しかし、未処理のバグのバックログが増えすぎないようにするために、週に一度など、定期的に行う必要があります。</p> + +<h2 id="triage_process_for_each_issue">課題ごとのトリアージ手順</h2> + +<h3 id="checklist_to_determine_if_we_have_enough_information">十分な情報があるかどうかのチェックリスト</h3> + +<p>それぞれのバグについて、以下のチェックリストを実行し、誰かがそのバグの作業を開始するのに十分な情報が課題に含まれているかどうかを確認します。</p> + +<p>課題には以下が含まれていますか？</p> + +<ul> + <li>問題が発見された MDN の URL。</li> + <li>適切であれば、そのバグに関連するサンプルページやリポジトリーの URL。</li> + <li>問題が発見された MDN ページの具体的な見出し (問題を見つけるために必要な場合)。</li> + <li>何が問題であるかの明確な説明。</li> +</ul> + +<p>これらの情報がない場合、トリアージ担当者は問題の提出者にこれらの詳細を提供するよう依頼し、これらの詳細が提供されるまで問題のトリアージを続けないようにしてください。</p> + +<h3 id="set_priority_measure">優先度指標の設定</h3> + +<p>各バグについて、(自分が興味を持っているトピックではなく) 最も重要な問題や領域に取り組みたい人のために、優先度の指標となるラベルを設定します。</p> + +<p>優先度のレベルは次の通りです。</p> + +<ul> + <li><code>P0</code> — あらゆる MDN doc の深刻な問題</li> + <li><code>P1</code> — 第一階層 MDN doc の主要な問題</li> + <li><code>P2</code> — 第一階層 MDN doc の主要でない問題</li> + <li><code>P3</code> — 第二階層 MDN doc の主要な問題</li> + <li><code>P4</code> — 第二階層 MDN doc の主要でない問題</li> +</ul> + +<p>定義:</p> + +<ul> + <li>深刻な問題 — MDN の評判をひどく傷つけたり、ユーザーに害を与えたりする可能性があるもので、サイトのどこに表示されるかにかかわらず、できるだけ早く修正する必要があるもの。例としては、本番で使用されると深刻なセキュリティ問題を引き起こす可能性のあるコード例、マルウェア、冒涜、ポルノ、ヘイトスピーチなどの望ましくないコンテンツ、またはそのようなコンテンツへのリンクなどが挙げられます。</li> + <li>主要な問題 — ページの有用性に重大な影響を与える可能性があるもの。例えば、かなりの量の古い情報、複雑で重要なコード例が動作しない、かなりの量の文が散らかっていて理解しにくい、大量のリンク切れ、などが挙げられます。</li> + <li>主要でない問題 — 見た目は悪いが学習に影響を与えないもの、または学習にわずかな影響しか与えないもの。例えば — 誤字、悪い文法、リンク切れ、少量の古い情報や悪意のある散文、動作しない小さなコードスニペットなど。</li> +</ul> + +<p>一般的に言えば、深刻な問題はすぐに修正されるべきであり、おそらく MDN のスタッフや人々によって処理されるでしょう。また、第一階層の問題は第二階層の問題よりも重要です。最優先の MDN 課題に取り組むことに興味がある人は、第一階層、第二階層の課題に移る前に、Tier 0 の課題があれば常にそれに取り組むべきです。</p> + +<div class="note notecard"> + <h4>メモ</h4> + <p>第一階層と第二階層の定義については、<a href="/ja/docs/MDN/Contribute/Documentation_priorities">MDN 文書化の優先順位リスト</a>を参照してください。</p> +</div> + +<h3 id="provide_further_information">さらなる情報の提供</h3> + +<p>他の協力者が問題を解決するのに役立つ更なる情報を提供することは、本当に有益です。私たちは、各バグのトリアージでは、最終的にバグを修正しようとする人を助けるために、トリアージ担当者がそのバグを修正するために取るべきいくつかのステップを素早く説明するために、最大 5 分の時間の余裕を持つことを推奨したいと思います。</p> + +<p>例:</p> + +<pre>この問題を修正する人は、以下のことが必要と思われます。 + +* 見出し X の下の最初の段落を更新して、 Y の問題を修正する。 +* X の説明を追加 +* リンク X の互換性データを更新</pre> + +<h3 id="set_other_labels">その他のラベルの設定</h3> + +<p>次に、必要に応じてその他のラベルを設定します。</p> + +<ul> + <li><code>10 minute task</code>, <code>30 minute task</code>, <code>1 hour task</code>, <code>multiple hour task</code> — 自分が協力できる時間を基準にしてバグを探したい人もいるので、大まかな目安をつけて選択できるようにしたいと思います。これを見積もるのは難しいですし、人によってバグを修正するスピードが違うことは理解していますが、これはあくまでも大まかな目安と考えています。この指標を設定する際には、その分野で中程度の知識を持つ人がバグを修正するのにどれくらいの時間がかかるかを考えてみてください。</li> + <li><code>good first issue</code> — 問題の修正が非常に簡単で、システムに慣れてきたばかりの新人の練習問題として適している場合、このラベルを付けてください。</li> + <li><code>help wanted</code> — これは、オープンソースプロジェクトで何をすべきかを検索する際に人々が使用する非常に人気のあるラベルのようで、これは、トリアージに成功したバグには当然のこととして設定されています。</li> + <li><code>broken-link-internal</code>, <code>broken-link-external</code> — 存在しない内部ページへのリンクや、壊れた外部リンクが問題となっている場合に使用します。</li> + <li>トリアージのプロセスが完了したら、<strong><code>needs-triage</code> のラベルを外すことを忘れないでください。</strong></li> +</ul> + +<h2 id="check_through_old_issues">古い課題のチェック</h2> + +<p>トリアージセッションの最後に、トピック領域でトリアージされた古い課題に目を通し、どの課題も不必要に停滞したり詰まったりしていないかどうかを確認します。</p> + +<ul> + <li>アサインされた課題がまだ残っている場合、アサインされた人が進捗しているかどうかを確認します。割り当てられてから 1 週間経っても何もしていない場合は、その課題にまだ取り組まなければならないのかどうか聞いてみましょう。さらに 1 週間経っても何もしていない場合は、割り当てを解除し、他の人が担当できるようにこの問題を再開することを伝えてください。</li> + <li>問題を修正するための PR が発行されているにもかかわらず、 1 週間もレビューされていない場合は、レビュー担当者に優しくピンを打って、作業ができるかどうか尋ねてください。</li> + <li>PR が 1 週間経ってもレビューのコメントに対応するのを待っている場合は、投稿者にレビューに対応できるかどうかを尋ねてください。さらに 1 週間が経過した場合は、時間があれば自分でレビューコメントを修正するか、時間がなければ PR を閉じてください。</li> +</ul> diff --git a/files/ja/mdn/contribute/processes/index.html b/files/ja/mdn/contribute/processes/index.html index 0927b9c486..f79632726b 100644 --- a/files/ja/mdn/contribute/processes/index.html +++ b/files/ja/mdn/contribute/processes/index.html @@ -5,10 +5,9 @@ tags: - Landing - MDN Meta - Processes - - TopicStub translation_of: MDN/Contribute/Processes --- -<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/ja/docs/MDN")}}</div> +<div>{{MDNSidebar}}</div> <p>MDN 文書作成プロジェクトは非常に大規模です。カバーするべき莫大な数の技術があり、数百人の貢献者が世界中に散らばっています。秩序をもたらすために、従うべき標準の手順を定め、特定の文書化関連の作業を行うときにはこれに従います。ここでは、これらの手順についてのガイドを紹介します。</p> diff --git a/files/ja/mdn/contribute/processes/short_surveys/index.html b/files/ja/mdn/contribute/processes/short_surveys/index.html new file mode 100644 index 0000000000..e41025a2df --- /dev/null +++ b/files/ja/mdn/contribute/processes/short_surveys/index.html @@ -0,0 +1,108 @@ +--- +title: 短いアンケートの実施プロセス +slug: MDN/Contribute/Processes/Short_surveys +tags: + - MDN + - MDN Meta + - Meta + - Meta Docs + - Process + - Surveys + - Short surveys +--- +<p>{{MDNSidebar}}</p> + +<p>この文書では、 MDN での短いアンケートの実施プロセスを定義しています。</p> + +<h2 id="rationale_for_short_surveys">短いアンケートの根拠</h2> + +<p>2019 年から 2020 年にかけて、 MDN チームは MDN Web Developer Needs Assessment (Web DNA) を実施し、その結果を <a href="https://insights.developer.mozilla.org/">MDN Insights site</a> サイトで公開しました。これにより、とても有益な結果が得られ、この間、ブラウザーベンダーや標準化に関わる他の組織の活動を積極的に形成してきました。</p> + +<p>しかし、 Web DNA の運営には、さまざまな企業の膨大な労力とリソースが必要です。そこで私たちは、より小規模で焦点を絞った調査を行い、より簡単に実用的なデータを得られるような仕組みを提供したいと考えました。これにより、特定の問題を解決するための方向性を見出すことができます。</p> + +<p>メリット:</p> + +<ul> + <li>開発者にとっては、短時間でアンケートが完了するため、アンケート疲れが少ない。</li> + <li>特定のトピックについて迅速な判断を得るのに適している。</li> + <li>ステークホルダーが結果を得るまでの時間が短い。</li> + <li>毎月など、定期的に実施することができる。</li> + <li>MDN への来訪者の任意の割合を対象とすることができる。例えば、重要なものは来訪者の 50% に、通常のものは来訪者の 5% に公開できる。</li> +</ul> + +<h2 id="survey_guidelines">調査ガイドライン</h2> + +<p>調査を提案したい人は、<a href="https://www.surveygizmo.com/s3/6306724/Short-survey-proposal-form">短いアンケート提案フォーム</a>にご記入ください。<a href="#survey_process">調査のプロセス</a>に沿って審査されます。</p> + +<p>調査の提案を適切にするためには、以下の点が必要です。</p> + +<ul> + <li>MDN の閲覧者が興味を持つもの。</li> + <li>ステークホルダーが喜んで取り組んだりフォローアップしたりするようなトピックであること。例えば、結果がウェブプラットフォームや MDN の改善に役立つか。</li> + <li>可能な限り具体的かつ詳細なものであり、実用化や対応が難しいハイレベルな質問は避ける。</li> + <li>質問数は3～5問以内で、回答にかかる時間は10分以内であること。</li> + <li>CSS、JavaScript、アクセシビリティ、ドキュメンテーションなど、明確なカテゴリーに属するもの。</li> + <li>調査対象者のプライバシーポリシーに記載されていない個人識別情報 (PII) を求めないこと (または提供される契約に不適切な PII を求めないこと)。</li> +</ul> + +<h2 id="survey_process">調査プロセス</h2> + +<ol> + <li>投稿者は投稿フォームから、概要を記した企画書を提出します。 + <ul> + <li>トピック。</li> + <li>カテゴリー。例えば CSS、JavaScript、アクセシビリティ、ドキュメンテーション...</li> + <li>調査の目的。</li> + <li>理想的なアンケートの実施日 (期間)。</li> + <li>調査結果に基づいて実行されるアクション。</li> + <li>質問と回答の選択肢。 + <div class="note notecard"> + <h4>メモ</h4> + <p>特定の種類のデータについては、そのデータが公表されることを意図しているのか、あるいは他の組織と共有されることを意図しているのかなどの意図とともに、法的な審査が必要となります。詳細は以下の<a href="#legal_requirements">法的要件</a>を参照してください。</p> + </div> + </li> + <li>MDNの中で調査に公開する割合の目安 (例: 3%)。既定の割合は 5% ですが、それ以上の割合を希望する場合は、明確な理由が必要です。例えば、現在多くの開発者に影響を与えている、文書化された重要なウェブプラットフォームのバグの解決策を知らせるためのデータを収集することを目的とした調査の場合、明確な証拠を提示できるのであれば、それは正当な理由になるでしょう。この正当化の根拠となる典型的な基準は、<a href="https://github.com/openwebdocs/project/blob/main/steering-committee/prioritization-criteria.md">OWD prioritization criteria</a> にあります。これらの基準は、MDN コンテンツの優先順位付けを知らせるために書かれたものですが、ここでも関連性があります。 + <li>MDN のどの部分に表示するかを提案します (例: CSS ページ)。</li> + </ul> + <li>レビューチームは、提出されたものを 1 週間以内にレビューます。 + <ul> + <li>必要であれば、さらなる情報提供を求めます。</li> + <li>提案の承認/否認を行います。どのアンケートをどのように実施するかについては、 MDN コンテンツチームが最終的な拒否権を持ちます。</li> + <li>P0、P1 のように、提案に優先度を適用します。これは、提案を積み重ねるための大まかな目安となります。</li> + <li>レビューチームは、ケースバイケースで選ばれた <a href="/ja/docs/MDN/MDN_Product_Advisory_Board">MDN 製品諮問委員会</a>のメンバー 3 名で構成されます。</li> + </ul> + </li> + <li>レビューチームは、提案者の最初の質問に基づいて、提案者と協力して最終的な調査票を作成し、合意します。</li> + <li>調査チームは、アンケートをデスクトップ、Android、iOS で徹底的にテストし、記入に不満を感じるようなレイアウトやレンダリングのエラーがないことを確認します。</li> + <li>レビューチームは、合意した日時に短いアンケートを実施します。</li> + <li>レビューチームは、調査を依頼した人やその他の関係者に調査結果とデータを提供します。</li> + <li>MDN は調査結果を <a href="https://insights.developer.mozilla.org/">insights.developer.mozilla.org</a> で公開します。</li> +</ol> + +<h2 id="legal_requirements">法的要件</h2> + +<p>Mozilla はユーザーのプライバシーに深く配慮しています。そのため、私たちが実施する調査は、どのようなデータを収集するか、どのくらいの期間保存するか、どのように共有・公開するかについて、とても慎重に検討する必要があります。Mozilla の法務担当者は、調査の提案が Mozilla の要件を満たしているかどうかを確認したいと考えることがよくあります。</p> + +<ul> + <li>一般的に、あなたが収集したいと思うほとんどの情報については、法務部のレビューは必要ありません。これには、ユーザーの個人的な好みや意見、ブラウザの選択、職種などの情報が含まれます。</li> + <li>しかし、何らかの個人識別情報 (PII) を収集したり、情報を共有したり、情報を公開したりする場合には、法的な審査が必要となります。これには、氏名、年齢、住所、電子メールアドレス、性的指向、宗教など、誰かを特定したりプロファイリングしたりするのに使われる可能性のあるものが含まれます。</li> +</ul> + +<p>良いガイドラインは、有用な結果を得るために最低限必要なデータ量を考え、必要以上のものを収集しないことです。</p> + +<p>また、以下の質問に対する答えも考えておきましょう。</p> + +<ul> + <li>そのデータにアクセスする必要があるのは誰ですか。データを第三者と共有する予定はありますか？その場合、誰とですか。</li> + <li>データを公開する予定はありますか？もしそうなら、どこで、どのような形で公開しますか。生データ、集約されたデータ、その両方ですか。</li> + <li>データをどのくらいの期間保存する予定ですか？それ以上の期間保存する必要があると明示されていない限り、データは 6 ヶ月後に削除されます。</li> + <li>データ収集のために、何らかの代替ツールを使用する予定はありますか。 Mozilla は、Survey Gizmo/Alchemer アカウントを使用してすべての作業を行う傾向にあります。</li> + <li>調査データにテレメトリーを付加する予定はありますか？</li> +</ul> + +<p>Mozilla の MDN チームは、調査プロセスを所有し、調査の公開に責任を持ち、どの調査をどのように実施するかについて最終的な拒否権を持っています。私たちは、各アンケートのヘッダーページに、適切な法的通知とプライバシーステートメントが含まれるようにします。</p> + +<div class="note notecard"> + <h4>メモ</h4> + <p>最初は、Mozilla 法務チームがすべてのアンケートを確認し、プロジェクトをよりよく理解し、順調に進んでいることを確認します。</p> +</div> diff --git a/files/ja/mdn/guidelines/code_guidelines/css/index.html b/files/ja/mdn/guidelines/code_guidelines/css/index.html index 4f4449ba5c..c237604255 100644 --- a/files/ja/mdn/guidelines/code_guidelines/css/index.html +++ b/files/ja/mdn/guidelines/code_guidelines/css/index.html @@ -139,7 +139,7 @@ font-family: sans-serif;</pre> direction | fill-mode | play-state | name */ animation: 3s ease-in 1s 2 reverse both paused slidein;</pre> -<p>As an example, the first value that can be parsed as a {{cssxref("time", "<time>")}} is assigned to the {{cssxref("animation-duration")}}, and the second one is assigned to {{cssxref("animation-delay")}}. For more details, read the full <a href="/en-US/docs/Web/CSS/animation#Syntax">animation syntax</a> details.</p> +<p>As an example, the first value that can be parsed as a {{cssxref("time", "<time>")}} is assigned to the {{cssxref("animation-duration")}}, and the second one is assigned to {{cssxref("animation-delay")}}. For more details, read the full <a href="/ja/docs/Web/CSS/animation#Syntax">animation syntax</a> details.</p> <h3 id="Use_double_quotes_around_values" name="Use_double_quotes_around_values">値の周りには二重引用符を使用する</h3> @@ -210,7 +210,7 @@ background-image: linear-gradient(to bottom, red, black);</pre> /*CSS for really wide screens*/ }</pre> -<p>This has many advantages, outlined in our <a href="/en-US/docs/Web/Apps/Progressive/Responsive/Mobile_first">Mobile First</a> article.</p> +<p>This has many advantages, outlined in our <a href="/ja/docs/Web/Apps/Progressive/Responsive/Mobile_first">Mobile First</a> article.</p> <h2 id="Selectors" name="Selectors">セレクター</h2> diff --git a/files/ja/mdn/guidelines/code_guidelines/html/index.html b/files/ja/mdn/guidelines/code_guidelines/html/index.html index 167160be4b..e674d8ca22 100644 --- a/files/ja/mdn/guidelines/code_guidelines/html/index.html +++ b/files/ja/mdn/guidelines/code_guidelines/html/index.html @@ -27,7 +27,7 @@ translation_of: MDN/Guidelines/Code_guidelines/HTML </li> <li><a href="/ja/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML#General_markup_coding_style">一般的なマークアップコーディングスタイル</a> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML#Use_lowercase">小文字を使う</a></li> + <li><a href="/ja/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML#Use_lowercase">小文字を使う</a></li> <li><a href="/ja/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML#Trailing_slashes">末尾のスラッシュ</a></li> <li><a href="/ja/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML#Quoting_attributes">属性の引用</a></li> <li><a href="/ja/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML#Use_double_quotes">ダブルクォートを使う</a></li> diff --git a/files/ja/mdn/guidelines/code_guidelines/index.html b/files/ja/mdn/guidelines/code_guidelines/index.html index 3ce931004f..ed2cb9de33 100644 --- a/files/ja/mdn/guidelines/code_guidelines/index.html +++ b/files/ja/mdn/guidelines/code_guidelines/index.html @@ -25,7 +25,7 @@ translation_of: MDN/Guidelines/Code_guidelines </div> <div class="note"> -<p><strong>Note</strong>: If you want advice on the styling of code as it appears on an MDN article, rather than the code content, see our <a href="/en-US/docs/MDN/Contribute/Guidelines/Writing_style_guide#Code_sample_style_and_formatting">Writing style guide</a>.</p> +<p><strong>Note</strong>: If you want advice on the styling of code as it appears on an MDN article, rather than the code content, see our <a href="/ja/docs/MDN/Contribute/Guidelines/Writing_style_guide#Code_sample_style_and_formatting">Writing style guide</a>.</p> </div> <h2 id="Article_structure">Article structure</h2> @@ -33,11 +33,11 @@ translation_of: MDN/Guidelines/Code_guidelines <p>This article contains general high-level best practices for writing MDN code examples. Its subarticles are as follows:</p> <ul> - <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/General">General guidelines for all code</a> — both syntactical and for styling/displaying examples</li> - <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML">HTML guidelines</a></li> - <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS">CSS guidelines</a></li> - <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/JavaScript">JavaScript guidelines</a></li> - <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/Shell">Shell prompt guidelines</a></li> + <li><a href="/ja/docs/MDN/Contribute/Guidelines/Code_guidelines/General">General guidelines for all code</a> — both syntactical and for styling/displaying examples</li> + <li><a href="/ja/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML">HTML guidelines</a></li> + <li><a href="/ja/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS">CSS guidelines</a></li> + <li><a href="/ja/docs/MDN/Contribute/Guidelines/Code_guidelines/JavaScript">JavaScript guidelines</a></li> + <li><a href="/ja/docs/MDN/Contribute/Guidelines/Code_guidelines/Shell">Shell prompt guidelines</a></li> </ul> <h2 id="General_best_practices">General best practices</h2> diff --git a/files/ja/mdn/guidelines/conventions_definitions/index.html b/files/ja/mdn/guidelines/conventions_definitions/index.html index 74b90bcc78..e5a5b9a12f 100644 --- a/files/ja/mdn/guidelines/conventions_definitions/index.html +++ b/files/ja/mdn/guidelines/conventions_definitions/index.html @@ -46,7 +46,7 @@ translation_of: MDN/Guidelines/Conventions_definitions <li>仕様の定義が安定していて、変化しそうにない。</li> </ul> -<p>ここでは<em>または</em>が重要です。 — 通常、ある技術に複数の主要なブラウザーが対応した場合、仕様は安定するでしょうが、これは常に言えるわけではありません。また、技術によっては安定した仕様書がありよく使用されてはいるものの、ブラウザーでのネイティブな対応がない場合もあります (<a href="/en-US/docs/Related/IMSC">IMSC</a> などがその例)。</p> +<p>ここでは<em>または</em>が重要です。 — 通常、ある技術に複数の主要なブラウザーが対応した場合、仕様は安定するでしょうが、これは常に言えるわけではありません。また、技術によっては安定した仕様書がありよく使用されてはいるものの、ブラウザーでのネイティブな対応がない場合もあります (<a href="/ja/docs/Related/IMSC">IMSC</a> などがその例)。</p> <h3 id="Archived_pages" name="Archived_pages">アーカイブページ</h3> diff --git a/files/ja/mdn/guidelines/css_style_guide/index.html b/files/ja/mdn/guidelines/css_style_guide/index.html index 7501925e4a..6aa8dff5e9 100644 --- a/files/ja/mdn/guidelines/css_style_guide/index.html +++ b/files/ja/mdn/guidelines/css_style_guide/index.html @@ -215,13 +215,13 @@ function works(){ <ul class="card-grid"> <li><span>CSS リファレンス</span> - <p>An <a href="/en-US/docs/Web/CSS/Reference" title="en-US/docs/CSS/CSS_Reference">exhaustive reference</a> for <u>seasoned Web developers</u> describing every property and concept of CSS.</p> + <p>An <a href="/ja/docs/Web/CSS/Reference" title="en-US/docs/CSS/CSS_Reference">exhaustive reference</a> for <u>seasoned Web developers</u> describing every property and concept of CSS.</p> </li> <li><span>CSS チュートリアル</span> - <p>A <a href="/en-US/docs/CSS/Getting_Started" title="en-US/docs/CSS/Getting_Started">step-by-step introduction</a> to help <u>complete beginners</u> get started. It presents all the needed fundamentals.</p> + <p>A <a href="/ja/docs/CSS/Getting_Started" title="en-US/docs/CSS/Getting_Started">step-by-step introduction</a> to help <u>complete beginners</u> get started. It presents all the needed fundamentals.</p> </li> <li><span>CSS3 デモ</span> - <p>A <a href="/en-US/demos/tag/tech:css3" title="https://developer.mozilla.org/en-US/demos/tag/tech:css3">collection of demos</a> showing the <u>latest CSS technologies</u> in action: a boost for the creativity.</p> + <p>A <a href="/ja/demos/tag/tech:css3" title="/en-US/demos/tag/tech:css3">collection of demos</a> showing the <u>latest CSS technologies</u> in action: a boost for the creativity.</p> </li> </ul> diff --git a/files/ja/mdn/guidelines/does_this_belong_on_mdn/index.html b/files/ja/mdn/guidelines/does_this_belong_on_mdn/index.html index 1b8f12161e..4ab2aeab2b 100644 --- a/files/ja/mdn/guidelines/does_this_belong_on_mdn/index.html +++ b/files/ja/mdn/guidelines/does_this_belong_on_mdn/index.html @@ -22,7 +22,7 @@ translation_of: MDN/Guidelines/Does_this_belong_on_MDN <li>文書の性質 (これはどんな種類の文書か)</li> </ul> -<p>MDN への寄稿は、すべて特定のオープンソースライセンスに該当することに注意してください。これは <a href="/en-US/docs/MDN/About">MDN について</a>ページに<a href="/ja/docs/MDN/About#copyrights_and_licenses">詳細に記されています</a>。</p> +<p>MDN への寄稿は、すべて特定のオープンソースライセンスに該当することに注意してください。これは <a href="/ja/docs/MDN/About">MDN について</a>ページに<a href="/ja/docs/MDN/About#copyrights_and_licenses">詳細に記されています</a>。</p> <div class="note"> <p><strong>注</strong>: MDN Web Docs を利用したり、投稿したりする際には、Mozilla の<a href="https://www.mozilla.org/en-US/about/legal/terms/mozilla/">ウェブサイトおよびコミュニケーション利用規約</a>が適用されることに注意してください。この文書を確認して、 Mozilla のサイトで投稿できること、できないことを確認してください。</p> diff --git a/files/ja/mdn/guidelines/video/index.html b/files/ja/mdn/guidelines/video/index.html index 4ce9b87b9f..dcd39e1d80 100644 --- a/files/ja/mdn/guidelines/video/index.html +++ b/files/ja/mdn/guidelines/video/index.html @@ -39,7 +39,7 @@ translation_of: MDN/Guidelines/Video <p>We tend to most commonly use video when describing some kind of instruction sequence or multi-step workflow that would be hard to describe concisely in words: <em>"do this, then do that, then this will happen"</em>. It is especially useful when trying to describe processes that cross over multiple applications or windows, and include GUI interactions that might not be simple to describe: <em>"now click on the button near the top-left that looks a bit like a duck"</em>.</p> -<p>In such cases it is often more effective to just <strong>show</strong> what you mean. We most commonly use videos when explaining features of the <a href="/en-US/docs/Tools">Firefox DevTools</a>.</p> +<p>In such cases it is often more effective to just <strong>show</strong> what you mean. We most commonly use videos when explaining features of the <a href="/ja/docs/Tools">Firefox DevTools</a>.</p> <h2 id="What_should_MDN_videos_look_like">What should MDN videos look like?</h2> @@ -57,7 +57,7 @@ translation_of: MDN/Guidelines/Video </li> </ul> -<p>To explain something more complex, you can use a blend of short videos and screenshots, interspersed with text. The text can help reinforce the points made in the video, and the user can rely on the text or the video as they choose. See <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animation_inspector">Working with the Animation Inspector</a> for a good example.</p> +<p>To explain something more complex, you can use a blend of short videos and screenshots, interspersed with text. The text can help reinforce the points made in the video, and the user can rely on the text or the video as they choose. See <a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animation_inspector">Working with the Animation Inspector</a> for a good example.</p> <p>In addition, you should consider the following tips:</p> @@ -193,7 +193,7 @@ translation_of: MDN/Guidelines/Video <p>Remember to pause for a second or two at the end, to show the result of the flow.</p> <div class="note"> -<p><strong>Note</strong>: If you are using a really simple tool like QuickTime Player and post production is not an option for some reason, you should get your windows set up in the right size to show the area you want to show. In the Firefox DevTools, you can use the <a href="/en-US/docs/Tools/Rulers">Rulers Tool</a> to make sure the viewport is at the right aspect ratio for the recording.</p> +<p><strong>Note</strong>: If you are using a really simple tool like QuickTime Player and post production is not an option for some reason, you should get your windows set up in the right size to show the area you want to show. In the Firefox DevTools, you can use the <a href="/ja/docs/Tools/Rulers">Rulers Tool</a> to make sure the viewport is at the right aspect ratio for the recording.</p> </div> <h3 id="Post-production">Post-production</h3> @@ -225,6 +225,6 @@ translation_of: MDN/Guidelines/Video <p>\{{EmbedYouTube("you-tube-url-slug")}}</p> -<p>The single property taken by the macro call is the string of characters at the end of the video URL, not the whole URL. For example, the video embedded in our <a href="/en-US/docs/Tools/Page_Inspector/3-pane_mode">Page inspector 3-pane mode</a> article is available at https://www.youtube.com/watch?v=ELS2OOUvxIw, so the required macro call looks like this:</p> +<p>The single property taken by the macro call is the string of characters at the end of the video URL, not the whole URL. For example, the video embedded in our <a href="/ja/docs/Tools/Page_Inspector/3-pane_mode">Page inspector 3-pane mode</a> article is available at https://www.youtube.com/watch?v=ELS2OOUvxIw, so the required macro call looks like this:</p> <p>\{{EmbedYouTube("ELS2OOUvxIw")}}</p> diff --git a/files/ja/mdn/guidelines/writing_style_guide/index.html b/files/ja/mdn/guidelines/writing_style_guide/index.html index 0e9d715f87..b4fcdc4a10 100644 --- a/files/ja/mdn/guidelines/writing_style_guide/index.html +++ b/files/ja/mdn/guidelines/writing_style_guide/index.html @@ -118,7 +118,7 @@ translation_of: MDN/Guidelines/Writing_style_guide <p>ここで、 <code>strokeText()</code> メソッドのより良い概要を見てみましょう。</p> <div class="example-good"> -<p>{{domxref("CanvasRenderingContext2D")}} の <code><strong>strokeText()</strong></code> メソッドは、 <a href="/en-US/docs/Web/API/Canvas_API">Canvas 2D API</a> の一部で、指定された文字列の文字の輪郭を、指定された X 座標と Y 座標で示された位置に描画します。テキストは、コンテキストの現在の {{domxref("CanvasRenderingContext2D.font", "font")}} を使用して描画され、 {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}} の各プロパティに従って揃えられます。</p> +<p>{{domxref("CanvasRenderingContext2D")}} の <code><strong>strokeText()</strong></code> メソッドは、 <a href="/ja/docs/Web/API/Canvas_API">Canvas 2D API</a> の一部で、指定された文字列の文字の輪郭を、指定された X 座標と Y 座標で示された位置に描画します。テキストは、コンテキストの現在の {{domxref("CanvasRenderingContext2D.font", "font")}} を使用して描画され、 {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}} の各プロパティに従って揃えられます。</p> <p>詳細とさらなる例については、学習エリアの<a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">図形の描画</a>の<a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics#text">テキスト</a>や、このテーマに関するメインの記事「<a href="/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_text">テキストの描画</a>」を参照してください。</p> </div> @@ -142,7 +142,7 @@ translation_of: MDN/Guidelines/Writing_style_guide <li>If the code is intricate, uses the API being documented, or is technically creative, you should provide a more detailed explanation.</li> </ul> -<p>When adding <a href="/en-US/docs/MDN/Structures/Live_samples">live samples</a>, it's helpful to be aware that all of the {{HTMLElement("pre")}} blocks in the area that contains the sample are concatenated together before running the example, which lets you break any or all of the HTML, CSS, and JavaScript into multiple segments, each optionally with its own descriptions, headings, and so forth. This makes documenting code incredibly powerful and flexible.</p> +<p>When adding <a href="/ja/docs/MDN/Structures/Live_samples">live samples</a>, it's helpful to be aware that all of the {{HTMLElement("pre")}} blocks in the area that contains the sample are concatenated together before running the example, which lets you break any or all of the HTML, CSS, and JavaScript into multiple segments, each optionally with its own descriptions, headings, and so forth. This makes documenting code incredibly powerful and flexible.</p> <h4 id="Overly-short_articles_are_hard_to_find">Overly-short articles are hard to find</h4> @@ -365,7 +365,7 @@ var toolkitProfileService = Components.classes["@mozilla.org/toolkit/profile-ser <h4 id="Expansion">略語の展開</h4> -<p>ある用語についてページ内で初めて言及がある場合は、ユーザにとって馴染みがないと思われる略語を展開しましょう。よく分からなければ、展開するかもしくは記事や、用語の説明をする <a href="/en-US/docs/Glossary">glossary</a> の項目へのリンクを貼りましょう。</p> +<p>ある用語についてページ内で初めて言及がある場合は、ユーザにとって馴染みがないと思われる略語を展開しましょう。よく分からなければ、展開するかもしくは記事や、用語の説明をする <a href="/ja/docs/Glossary">glossary</a> の項目へのリンクを貼りましょう。</p> <ul> <li><span class="correct"><strong>正しい</strong></span>: "XUL (XML User Interface Language) is Mozilla's XML-based language..."</li> diff --git a/files/ja/mdn/mdn_product_advisory_board/index.html b/files/ja/mdn/mdn_product_advisory_board/index.html index c83c16adf5..83b0aa8321 100644 --- a/files/ja/mdn/mdn_product_advisory_board/index.html +++ b/files/ja/mdn/mdn_product_advisory_board/index.html @@ -1,25 +1,25 @@ --- -title: MDN プロダクトアドバイザリーボード +title: MDN 製品諮問委員会 slug: MDN/MDN_Product_Advisory_Board tags: - MDN - PAB - - プロダクトアドバイザリーボード + - 製品諮問委員会 translation_of: MDN/MDN_Product_Advisory_Board --- <p>{{MDNSidebar}}</p> <p>MDN Web Docs は、Wiki 技術に基づいたオープンソースのウェブ開発ドキュメントプラットフォーム上に構築されたウェブ開発者向けの技術ドキュメントの信頼できるソースです。これにより、ほぼ誰でもコンテンツを作成および編集できます。</p> -<p>MDN プロダクトアドバイザリーボードのの使命は、 Mozilla、そのドキュメントチーム、そして MDN コミュニティが、最新のブラウザーやウェブ標準の最も重要な側面を網羅した最も包括的で完全な信頼できるリファレンスとして MDN を維持するための主要な協力組織との間の協力関係を構築することにあります。</p> +<p>MDN 製品諮問委員会 (MDN Product Advisory Board) の使命は、 Mozilla、そのドキュメントチーム、そして MDN コミュニティが、最新のブラウザーやウェブ標準の最も重要な側面を網羅した最も包括的で完全な信頼できるリファレンスとして MDN を維持するための主要な協力組織との間の協力関係を構築することにあります。</p> -<p>プロダクトアドバイザリーボードは外部リーダーからのアドバイスを提供し、MDN がその使命の中で HTML、CSS、JavaScript、および Web API の公平でブラウザーにとらわれないドキュメントを提供し、標準ベースのウェブ開発のトップリファレンスになるのを支援します。</p> +<p>製品諮問委員会は外部リーダーからのアドバイスを提供し、MDN がその使命の中で HTML、CSS、JavaScript、および Web API の公平でブラウザーにとらわれないドキュメントを提供し、標準ベースのウェブ開発のトップリファレンスになることを支援します。</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> <li><a href="https://github.com/mdn/pab">Product Advisory Board meeting minutes</a> (GitHub)</li> - <li><a href="/ja/docs/MDN/MDN_Product_Advisory_Board/Membership">Product Advisory Board Charter & Membership</a></li> - <li><a href="/ja/docs/MDN/MDN_Product_Advisory_Board/Members">Product Advisory Board members</a></li> + <li><a href="/ja/docs/MDN/MDN_Product_Advisory_Board/Membership">製品諮問委員会憲章および会員資格</a></li> + <li><a href="/ja/docs/MDN/MDN_Product_Advisory_Board/Members">製品諮問委員会メンバー</a></li> <li><a href="https://www.surveygizmo.com/s3/4024118/MDN-Advisory-Board-Application">Membership application</a></li> </ul> diff --git a/files/ja/mdn/mdn_product_advisory_board/members/index.html b/files/ja/mdn/mdn_product_advisory_board/members/index.html index 65d5ddbbf8..ae2ea52ff9 100644 --- a/files/ja/mdn/mdn_product_advisory_board/members/index.html +++ b/files/ja/mdn/mdn_product_advisory_board/members/index.html @@ -1,88 +1,71 @@ --- -title: プロダクトアドバイザリーボード +title: 製品諮問委員会 slug: MDN/MDN_Product_Advisory_Board/Members tags: - MDN - - PAB - - プロダクトアドバイザリーボード - メンバー + - PAB + - 製品諮問委員会 translation_of: MDN/MDN_Product_Advisory_Board/Members --- <div>{{MDNSidebar}}</div> -<p>MDN プロダクトアドバイザリーボードの現在のメンバーは以下のとおりです。</p> - -<p><strong>Daniel Appelquist</strong><br> - Samsung Internet の Developer Advocacy ディレクター、W3C の Technical Architecture Group の共同議長</p> - -<dl> - <dd>Daniel Appelquist は、Samsung のモバイルおよび VR Web ブラウザである Samsung Internet <<a href="https://samsunginter.net">https://samsunginter.net</a>> の Web Developer Advocacy チームを率いています。2013年から <a href="https://www.w3.org/2001/tag/">W3C の Technical Architecture Group</a> の共同議長も務めています。彼は20年以上にわたって Web に取り組んできました。最初は Web 出版の分野で新興企業を創設し、その後 (99年にニューヨークからロンドンに引っ越した後)、さまざまなプロジェクトとイニシアチブを通じて Web とモバイルの融合に取り組んできました。また彼は、英国政府のオープンスタンダード戦略を指揮し、<a href="https://www.gov.uk/government/groups/open-standards-board">英国政府オープンスタンダード委員会</a>のメンバーであり続けています。この間、彼は活発なコミュニティビルダーおよびイベントオーガナイザーを務めています。</dd> -</dl> - -<p><strong>Jory Burson</strong><br> - COO, Bocoup</p> - -<dl> - <dd>Jory は、いくつかの業界委員会および Bocoup の標準設定団体のメンバーとして、オープンソースおよびオープンスタンダードのコミュニティにおけるコラボレーションの向上に取り組んでいます。彼女は Ecma International の Executive Committee、JS Foundation Technical Architecture Committee、W3C Advisory Council、MDN Board のメンバーであり、Ecma TC39、Ecma TC53、および Web Platform Tests のプロジェクトに取り組んでいます。暇な時に、Jory は標準の歴史と Web プラットフォームの社会的構築について研究し、書いて、話します。</dd> -</dl> - -<p><strong>Dominique Hazael-Massieux</strong><br> - W3C ウェブ技術エキスパート、<a href="https://www.w3.org/Telco/">電気通信分野のバーティカルチャンピオン</a>、<a href="https://www.w3.org/2011/04/webrtc/">Web リアルタイムコミュニケーションワーキンググループ</a>、<a href="https://www.w3.org/das/">デバイスおよびセンサーワーキンググループ</a>。</p> +<p>現在の MDN 製品諮問委員会のメンバーは以下のとおりです。</p> <dl> + <dt><strong>Reeza Ali</strong><br> + シニアプログラムマネージャー、Microsoft Edge 開発経験者</dt> + <dd>Reeza Ali は、マイクロソフトのプログラムマネージャーで、 Edge 開発者リレーションチームのコンテンツ戦略を担当しています。 Microsoft でのキャリアを通じて、開発者の成功を強く支持してきました。過去 5 年間、マイクロソフトでいくつかのウェブコンテンツドキュメンテーションチームとプロジェクトを率いてきました。彼は、製品のコンテンツと学習体験が、開発者の成功に極めて重要な役割を果たすと信じています。彼は、コンテンツ戦略、テクノロジー、テクニカルコミュニケーションに情熱を注いでいます。</dd> + + <dt><strong>Daniel Appelquist</strong><br> + Samsung Internet の Developer Advocacy ディレクター、W3C の Technical Architecture Group の共同議長</dt> + <dd>Daniel Appelquist は、Samsung のモバイルおよび VR ウェブブラウザーである Samsung Internet <<a href="https://samsunginter.net">https://samsunginter.net</a>> の Web Developer Advocacy チームを率いています。 2013 年から <a href="https://www.w3.org/2001/tag/">W3C の Technical Architecture Group</a> の共同議長も務めています。彼は 20 年以上にわたってウェブに取り組んできました。最初はウェブ出版の分野で新興企業を創設し、その後 (99 年にニューヨークからロンドンに引っ越した後)、さまざまなプロジェクトとイニシアチブを通じてウェブとモバイルの融合に取り組んできました。また彼は、英国政府のオープンスタンダード戦略を指揮し、<a href="https://www.gov.uk/government/groups/open-standards-board">英国政府オープンスタンダード委員会</a>のメンバーであり続けています。この間、彼は活発なコミュニティビルダーおよびイベントオーガナイザーを務めています。</dd> + <dt><strong>Sukriti Chadha</strong><br> + <strong>Spotify の製品マネージャー</strong></dt> + <dd>Sukriti Chadha は、 Spotify のモバイル開発者からプロダクトマネージャーに転身し、モバイルにおけるクロスプラットフォームのアクセシビリティと開発者の体験をリードしています。また、<a href="https://www.w3.org/WAI/standards-guidelines/wcag/">W3C WCAG (Web Content Accessibility Guidelines) Working Group</a> および <a href="https://www.w3.org/WAI/standards-guidelines/mobile/">Mobile Accessibility Task Force (MATF)</a> の招待エキスパートとして、アクセシブルなウェブおよびモバイルアプリケーションのための業界ガイドラインに貢献しています。彼女は、先天的な障害を持つユーザーがデータの視覚化にアクセスできるようにする新しい方法を構築し、 <a href="https://developer.yahoo.com/blogs/612790529269366784/">2019 年に Android ソリューションをオープンソース化しました</a>。 Sukriti の製品に関する役割は、開発者体験のロードマップの管理、自動テスト、および製品ライフサイクルへのアクセシビリティの組み込みを含みます。</dd> + <dt><strong>Hermina Condei</strong><br> + <strong>Head of Product CE, Marketing Operations, Mozilla</strong></dt> + <dd>Hermina Condei は、Mozilla で MDN Web Docs のプロダクトマネジメントとエンジニアリング、SUMO のプラットフォームエンジニアリングを担当しています。過去数年間にわたり、従業員やコミュニティのためのアクセスおよびアイデンティティ管理に焦点を当てた全社的なプロジェクトを推進してきました。また、オープンイノベーショングループのプロダクトチームを率い、チームのプロジェクトポートフォリオに対する社内外のステークホルダーの管理に注力していました。</dd> + <dt><strong>Dominique Hazael-Massieux</strong><br> + W3C ウェブ技術エキスパート、<a href="https://www.w3.org/Telco/">電気通信分野のバーティカルチャンピオン</a>、<a href="https://www.w3.org/2011/04/webrtc/">Web リアルタイムコミュニケーションワーキンググループ</a>、<a href="https://www.w3.org/das/">デバイスおよびセンサーワーキンググループ</a>。</dt> <dd>Dominique Hazael-Massieux は W3C スタッフの一員で、開発者との関係における W3C の取り組みを率いています。Dom は2000年から W3C に取り組んでいて、devrel に加えて、現在 WebRTC、デバイス API、および WebVR の標準化に携わっています。</dd> -</dl> - -<p><strong>Joe Medley</strong><br> - Google のシニアテクニカルライター、 Web Developer Relations</p> - -<dl> + <dt><strong>Brian Kardell</strong><br> + Igalia の開発者アドボケート</dt> + <dd>Brian は、Igalia の Developer Advocate です。彼は W3C に参加しており、Igalia の諮問委員会の代表であり、様々なワーキンググループやコミュニティグループに参加しています。また、Open JS Foundation の代表も務めています。</dd> + <dt><strong>Joe Medley</strong><br> + Google のシニアテクニカルライター、 Web Developer Relations</dt> <dd>Joe は、過去5年間ウェブプラットフォームのリファレンス文書を作成する Google の取り組みを主導してきました。つまり、 MDN に多くを費やしています。ウェブ開発者を対象とした Chrome ベータリリースの発表の編集に加えて、彼は web.dev 向けの不定期の記事を執筆しています。 Joe は、中央ミズーリ大学でエンタープライズアプリケーションおよび教育学の学位を取得した開発者向けリファレンス文書を長年執筆してきた後、 Web Developer Relations に参加しました。</dd> -</dl> - -<p><strong>Chris Mills</strong><br> - Mozilla の MDN Web ドキュメントのコンテンツリーダーおよびライターチームマネージャ。</p> - -<dl> - <dd>Chris は、 MDN のコンテンツリーダーとして Mozilla に勤務しており、短期および長期の文書化が必要な場合の戦略をまとめるのに役立ちます。彼はまた、DOM API、HTML と CSS の機能、Web ゲーム、 WebAssembly などをカバーする多数の初心者向けチュートリアルと参考記事を寄稿しています。彼はまた MDN ライターチームを管理します。</dd> -</dl> - -<p><strong>Robert Nyman</strong><br> + <dt><strong>Eric Meyer</strong><br> + Igalia の開発者アドボケート</dt> + <dd><a href="http://meyerweb.com/">Eric</a> (<a href="http://twitter.com/meyerweb">@meyerweb</a>) は、<a href="http://meyerweb.com/eric/writing.html">作家</a>、講演者、ブロガー、時には教師やコンサルタント、<a href="http://igalia.com/">Igalia</a> の開発者アドボケート、 <a href="https://aneventapart.com/">An Event Apart</a> の共同設立者でもあります。1993年からウェブに携わっており、今でもウェブには深い魅力があると感じています。</dd> + <dt><strong>Robert Nyman</strong><br> Google のプログラムとイニシアチブ、Web Developer Relations のグローバルリード。</p> - -<dl> - <dd>Robert Nyman は、Google の Web Platform、開発者フィードバック＆コミュニティのグローバルリーダーです。彼の役割では、Web を開発者にとって最高のプラットフォームにするために働いています。Google に入社する前、Robert は Mozilla の技術的な伝道者でした。Open Web と同社のさまざまな製品や取り組みに焦点を当てていました。彼はストックホルムに住んでおり、旅行や人々との出会いに情熱を注いでいます。彼は42カ国で発表したLanyrdの「最もよく旅されたスピーカー」の称号を主張します。</dd> -</dl> - -<p><strong>Kyle Pflug</strong><br> - シニアプログラムマネージャー、 Microsoft Edge Developer Experiences</p> - -<dl> + <dd>Robert Nyman は、Google のウェブプラットフォーム、開発者フィードバック＆コミュニティのグローバルリーダーです。彼の役割では、ウェブを開発者にとって最高のプラットフォームにするために働いています。Google に入社する前、Robert は Mozilla の技術的な伝道者でした。Open Web と同社のさまざまな製品や取り組みに焦点を当てていました。彼はストックホルムに住んでおり、旅行や人々との出会いに情熱を注いでいます。彼は 42 カ国で発表した Lanyrd の「最もよく旅されたスピーカー」の称号を主張します。</dd> + <dt><strong>Kyle Pflug</strong><br> + シニアプログラムマネージャー、 Microsoft Edge Developer Experiences</dt> <dd>Kyle Pflug は、マイクロソフトのプログラムマネージャーであり、 Microsoft Edge の開発者の関係構築とコミュニティアウトリーチをリードしています。過去5年間、彼はマイクロソフト内でウェブ開発者とパートナーの視点を擁護するために働いてきました。プラットフォームやデバイスを問わず、開発者がウェブをより包括的でアクセスしやすくすることに情熱を傾けています。</dd> + <dt><strong>Ali Spivak</strong><br> + Okta 開発者リレーションズ担当シニアディレクター、製品諮問委員会の前委員長</dt> + <dd>Ali は Mozilla の開発者エコシステムの責任者で、以前は Mozilla の開発者マーケティングを担当していました。それ以前は、 Mozilla に9年間在籍し、 MDN と Developer Relations を担当していました。</dd> </dl> -<p><strong>Ali Spivak</strong><br> - Mozilla の開発者エコシステム責任者、ブロダクトアドバイザリーボードチェア。</p> - -<dl> - <dd>Ali は Mozilla の開発者エコシステムの責任者で、以前は Mozilla の開発者マーケティングを担当していました。彼女は5年以上 MDN を管理しており、相互運用可能なクロスプラットフォームの Web に取り組んでいます。Mozilla 以前は、Cisco、Edmunds.com、および多数のスタートアップで Web 制作を管理していました。</dd> -</dl> - -<p><strong>Kadir Topal</strong><br> - Mozilla の MDN Web Docs プロダクトマネージャ。</p> - -<p><strong>MDN Product Advisory Board Alumni:</strong></p> +<p><strong>MDN 製品諮問委員会の卒業生</strong></p> -<p>Meggin Kearney, Google<br> - Erika Doyle Navara, Microsoft<br> - Patrick Kettner, Microsoft<br> - Travis Leithead, Microsoft</p> +<ul> + <li>Jory Burson, Bocoup</li> + <li>Meggin Kearney, Google</li> + <li>Erika Doyle Navara, Microsoft</li> + <li>Patrick Kettner, Microsoft</li> + <li>Travis Leithead, Microsoft</li> + <li>Chris Mills, Mozilla</li> + <li>Kadir Topal, Mozilla</li> +</ul> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> - <li><a href="/ja/docs/MDN/MDN_Product_Advisory_Board">プロダクトアドバイザリボードホーム</a></li> + <li><a href="/ja/docs/MDN/MDN_Product_Advisory_Board">製品諮問委員会ホーム</a></li> <li><a href="https://github.com/mdn/pab">Product Advisory Board meeting minutes</a> (GitHub)</li> - <li><a href="/ja/docs/MDN/MDN_Product_Advisory_Board/Membership">Product Advisory Board Charter & Membership</a></li> + <li><a href="/ja/docs/MDN/MDN_Product_Advisory_Board/Membership">製品諮問委員会憲章および会員資格</a></li> <li><a href="https://www.surveygizmo.com/s3/4024118/MDN-Advisory-Board-Application">Membership application</a></li> </ul> diff --git a/files/ja/mdn/mdn_product_advisory_board/membership/index.html b/files/ja/mdn/mdn_product_advisory_board/membership/index.html new file mode 100644 index 0000000000..12f1a0fc79 --- /dev/null +++ b/files/ja/mdn/mdn_product_advisory_board/membership/index.html @@ -0,0 +1,129 @@ +--- +title: 製品諮問委員会憲章および会員資格 +slug: MDN/MDN_Product_Advisory_Board/Membership +tags: + - MDN + - Membership + - PAB + - Product advisory board + - Terms and conditions +translation_of: MDN/MDN_Product_Advisory_Board/Membership +--- +<div>{{MDNSidebar}}</div> + +<h2 id="1._Purpose_and_Objectives">1. 目的および目標</h2> + +<p>製品諮問委員会 (PAB) の主な目的は、コンテンツ戦略、コンテンツの優先順位付け、戦略的方向性、およびプラットフォーム／サイトの機能について、MDN のプロダクトマネージャーとコンテンツリーダーに助言、意見、およびフィードバックを提供することである。Mozilla は PAB からの意見やアドバイスを検討するが、 PAB からの意見や提案には拘束力がない。 PAB の主な目的は以下のとおりとする。</p> + +<ul> + <li>標準化文書のコンテンツ戦略と優先順位付けへのフィードバックを提供する</li> + <li>製品戦略、ロードマップ、および優先順位の決定を支援する + <ul> + <li>OKR (Objectives and Key Results) についての提案とコメント</li> + <li>年間および四半期ごとのコンテンツロードマップの提案とコメント</li> + </ul> + </li> + <li>定義された戦略、ロードマップ、優先順位に基づいて、 MDN に貢献するための組織的および個人的なコミットメントを行う</li> + <li>MDN が進化し続け、ユーザーのニーズや課題を満たすために、ユーザーの要求を代表して推進する</li> + <li>新しい機会を提案し、フィードバックする</li> + <li>協力者 (企業と個人の両方) の募集と維持に関するフィードバックの提供する</li> + <li>経験とベストプラクティスの共有</li> +</ul> + +<h2 id="2._Membership_Selection_and_Termination.">2. メンバーの選定と解任</h2> + +<p>a. PAB は、Mozilla が選出する 10 名から 12 名のメンバー (MDN 製品諮問委員会規約に定義されているとおり、メンバー組織を代表する個人を含む) で構成される。</p> + +<p>b. メンバーシップには、組織メンバーと個人メンバーの 2 種類がある。メンバーシップの基準を満たし、メンバー組織として認められた組織は、PAB の代表者 (「MDN 製品諮問委員会規約」に定義される「メンバー代表」) として、最大 2 名の個人を指名することができる。</p> + +<p>c. 委員会メンバーになることを希望する組織や個人は、MDN Product Advisory Board Interest Form を提出しなければなりません。メンバーになるには、 Mozilla による審査と承認が必要であり、申請から 30 日以内に申請者に通知が送られる。</p> + +<p>d. メンバーシップの開始日は、レビュー会議のスケジュールに基づいて決定され、新しいメンバーは、次に予定されているレビュー会議で委員会の任期を開始する。</p> + +<p>e. 委員会のメンバーは、 1 年の任期を務め、 (いずれかの当事者によって終了させられない限り) 最大3年まで自動的に更新される。</p> + +<p>f. メンバーは、書面により、委員会メーリングリストに電子メールで退会することができる。メンバー組織は、辞任したメンバーの後任を、次の検討会の開始前に指名することができる。</p> + +<p>g. Mozilla は、メンバーが MDN 製品諮問委員会規約に違反した場合、MDN 委員会の行動規範に違反した場合、 Antitrust Policy に違反した場合、あるいはメンバーが予告なしに 2 回連続してレビュー会議に参加しなかった場合には、メンバーを解任することができる。その際には、代表連絡先にメンバーから外れた旨の通知が送られる。</p> + +<h2 id="3._PAB_Membership_Qualifications.">3. PAB 会員の資格</h2> + +<p>a. PAB のメンバーは、深い業界知識と専門性を持っている。また、 MDN の全体的な戦略目標およびコンテンツ計画を、ウェブ標準の進化、業界の方向性、および MDN のドキュメントを使用する開発者のニーズに合わせる能力と経験を有している。</p> + +<p>b. PAB の会員資格は、 MDN および／またはウェブ標準の進歩、開発、および実装に多大な貢献をした組織および個人に限定される。</p> + +<p>c. メンバー組織は、ウェブ標準およびガイドラインの作成、実装、または採用において重要な役割を果たしていなければなりません。また、 PAB メンバー組織は、 W3C のような確立されたウェブ標準化グループのメンバーであることが好ましい。メンバー組織は、最大 2 名の個人代表を理事会に推薦することができる。</p> + +<p>d. PABの個人メンバーは、以下の資格のうち少なくとも 1 つを有していなければならない。</p> + +<ul> + <li>ウェブ標準の作成、実装、または採用において重要な役割を果たしている。</li> + <li>ウェブブラウザーに実装された機能や、ブラウザーに送信されるウェブコンテンツで使用される機能の仕様策定を目的としたウェブ標準化グループに参加していること。 W3C または同様の標準化グループへの参加が望ましいが、必須ではない。また、個人会員は、標準作業部会に参加した経験や、確立されたウェブ標準作業部会に招待された専門家として参加した経験があれば、この資格を満たすことができる。</li> + <li>ウェブに特化した Developer Relations チームのメンバーである。</li> + <li>ウェブ標準の技術文書を作成するグループの一員として活動している、または</li> + <li>ボランティアとして MDN のウェブ標準ドキュメントに重要かつ継続的な貢献をしている。</li> +</ul> + +<h2 id="4._Member_Responsibilities_and_Commitments.">4. メンバーの責任と義務</h2> + +<p>a. メンバーは、タイムリーにフィードバックや回答を提供し、最低数のレビューミーティングに出席することが求められる。全世界からの参加を歓迎する。メンバーに期待されることは以下の通り。</p> + +<p>年次および四半期ごとの会議のスケジュールについて、フィードバックを提供する。</p> + +<ul> + <li>年次総会に出席する</li> + <li>年に 2 回以上の四半期レビューに出席する</li> + <li>提案を検討し、フィードバックを提供する</li> + <li>PABのメーリングリストに参加する</li> + <li>特に MDN 上のコンテンツの作成または編集において、特定の企業または個人のアジェンダを推進しないことに同意すること</li> +</ul> + +<p>b. メンバーは、アナリスト、プレス、および／または業界の出版物やプレスリリースのために、個人情報や資料 (経歴など) の提供を求められることがありる。</p> + +<p>c. すべてのメンバーは、 MDN Product Advisory Board Agreement に署名し、 MDN PAB Code of Conduct および Antitrust Policy に同意する必要がある。</p> + +<h2 id="5._MDN_PAB_Member_Benefits.">5. MDN PAB メンバーの特典</h2> + +<p>PAB メンバーには以下のようなメリットがあると予想されます。</p> + +<ul> + <li>MDN のコンテンツ戦略および優先事項に影響を与える</li> + <li>MDN の戦略的方向性への影響を与えたり、MDN の計画や開発に関する事前知識が得られたりする</li> + <li>MDN の視聴者や貢献度を高めるための機能やプラットフォームの改善を提案する</li> + <li>コンテンツのフィードバックや技術的なレビューを行う</li> +</ul> + +<h2 id="6._Scheduled_and_Ad_Hoc_Meetings.">6. 定期会議と臨時会議</h2> + +<p>a. メンバーは以下の会議に招待される。</p> + +<ul> + <li>毎年10月から12月の間に開催される年次製品戦略検討会</li> + <li>四半期ごとに開催されるコンテンツ戦略および優先順位決定のためのレビューミーティング (以下、「四半期レビュー」)</li> + <li>必要に応じて Mozilla またはメンバーが開始できる、臨時の製品レビュー／チェックインミーティング (以下「臨時会議」という)</li> +</ul> + +<p>b. 年 1 回の製品戦略レビュー会議では、前年度の進捗状況を確認し、次年度の MDN の戦略および目標について提言を行う。</p> + +<p>c. 年次製品戦略レビュー会議は、PAB の投票により決定された、Mozilla 本社またはワールドワイドオフィス、メンバーのオフィス、または外部の場所で出席することができる。直接出席できないメンバーには、バーチャルでの出席にも対応する。</p> + +<p>d. 四半期レビューおよび臨時会議は、主にビデオ/会議電話で行われるが、メンバーの判断により、直接出席することもできる。</p> + +<p>e. 臨時委会議の日程は、開発中の作業に応じて決定される。例えば、製品の発売日や主要な機能に関連した調整や、広範にリリースされる新しい仕様や規格に関連して、四半期レビューを超えたより詳細な調整や計画が必要になるなど、特定の重点が置かれる。</p> + +<h2 id="7._Time_Commitment_and_Costs.">7. 時間的拘束とコスト</h2> + +<p>a. メンバーは、少なくとも 12 ヶ月間、PAB に参加することが求められる。</p> + +<p>b. メンバーは、定期的に開催される PAB 会議や臨時会議の準備、出席 (時には主催)、参加に時間を割くことが求められる。</p> + +<p>c. 参加者の旅費や生活費、その他の関与にかかる費用は、個々のメンバーまたはスポンサー組織が負担すること。</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/MDN/MDN_Product_Advisory_Board">製品諮問委員会ホーム</a></li> + <li><a href="https://github.com/mdn/pab">Product Advisory Board meeting minutes</a> (GitHub)</li> + <li><a href="/ja/docs/MDN/MDN_Product_Advisory_Board/Members">製品諮問委員会メンバー</a></li> + <li><a href="https://www.surveygizmo.com/s3/4024118/MDN-Advisory-Board-Application">Membership application</a></li> +</ul> diff --git a/files/ja/mdn/structures/banners_and_notices/index.html b/files/ja/mdn/structures/banners_and_notices/index.html index 54cce6a78f..e43794c9cd 100644 --- a/files/ja/mdn/structures/banners_and_notices/index.html +++ b/files/ja/mdn/structures/banners_and_notices/index.html @@ -17,12 +17,12 @@ translation_of: MDN/Structures/Banners_and_notices <p>In most cases, you apply these notices by adding a macro call to inject an appropriate banner into the page content, and by adding a tag to the page's list of tags. Also, if the page includes a compatibility table (most API reference pages do, for example), you should update that table to reflect any compatibility changes.</p> -<p>To do this, you open the editor, then insert the macro call at the top of the article, and change the browser <a href="/en-US/docs/Project:Compatibility_tables" title="/en-US/docs/Project:Compatibility_tables">compatibility table</a> (if any); the table should be near the end of the article. Once that's done, scroll to the bottom of the article to find the tag list, and add the new tag to the list. Once you've done that, click the Save Changes button near the top of the window to commit your updates. From then on, an appropriate banner will appear on the page, and any macros that reference page tags when looking for up-to-date articles will know that the page you've updated is obsolete.</p> +<p>To do this, you open the editor, then insert the macro call at the top of the article, and change the browser <a href="/ja/docs/Project:Compatibility_tables" title="/ja/docs/Project:Compatibility_tables">compatibility table</a> (if any); the table should be near the end of the article. Once that's done, scroll to the bottom of the article to find the tag list, and add the new tag to the list. Once you've done that, click the Save Changes button near the top of the window to commit your updates. From then on, an appropriate banner will appear on the page, and any macros that reference page tags when looking for up-to-date articles will know that the page you've updated is obsolete.</p> <ul> - <li>To learn more about editing, see the <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide" title="/en-US/docs/Project:MDN/Contributing/Editor_guide">MDN editor guide</a>.</li> - <li>For more information about tagging, see our <a href="/en-US/docs/Project:MDN/Contributing/Tagging_standards" title="/en-US/docs/Project:MDN/Contributing/Tagging_standards">Tagging standards</a> guide.</li> - <li>To discover more of our custom macros, see the article <a href="/en-US/docs/Project:MDN/Contributing/Custom_macros" title="/en-US/docs/Project:MDN/Contributing/Custom_macros">Custom macros for MDN</a>.</li> + <li>To learn more about editing, see the <a href="/ja/docs/Project:MDN/Contributing/Editor_guide" title="/ja/docs/Project:MDN/Contributing/Editor_guide">MDN editor guide</a>.</li> + <li>For more information about tagging, see our <a href="/ja/docs/Project:MDN/Contributing/Tagging_standards" title="/ja/docs/Project:MDN/Contributing/Tagging_standards">Tagging standards</a> guide.</li> + <li>To discover more of our custom macros, see the article <a href="/ja/docs/Project:MDN/Contributing/Custom_macros" title="/ja/docs/Project:MDN/Contributing/Custom_macros">Custom macros for MDN</a>.</li> </ul> <p>Sometimes, you might want to flag just a single item in a list of items, or in a table, as obsolete, deprecated, or the like. There are special versions of each of the following macros for that; simply change "_header" to "_inline" to the end of the macro's name.</p> @@ -40,10 +40,10 @@ translation_of: MDN/Structures/Banners_and_notices <pre class="notranslate">\{{obsolete_header(21)}}</pre> -<p>This will make the banner specificy that the technology became obsolete in Gecko 21, with a link to the article <a href="/en-US/docs/Mozilla/Firefox/Releases/21" title="/en-US/docs/Mozilla/Firefox/Releases/21">Firefox 21 for developers</a>.</p> +<p>This will make the banner specificy that the technology became obsolete in Gecko 21, with a link to the article <a href="/ja/docs/Mozilla/Firefox/Releases/21" title="/ja/docs/Mozilla/Firefox/Releases/21">Firefox 21 for developers</a>.</p> </div> -<p>Eventually, once something is very, very obsolete (that is, it's so obsolete that reading the material might actually cause serious problems), we can move content into our <a href="/en-US/docs/Archive">Archive</a> section. If you see material that you think should be archived, <a href="mailto:mdn-admins@mozilla.org?subject=Archival%20of%20content&body=%3C%3CPlease%20list%20the%20page%20to%20archive%20and%20why%20you%20think%20it%20should%20be%20archived%20here%3E%3E">contact an MDN administrator</a>.</p> +<p>Eventually, once something is very, very obsolete (that is, it's so obsolete that reading the material might actually cause serious problems), we can move content into our <a href="/ja/docs/Archive">Archive</a> section. If you see material that you think should be archived, <a href="mailto:mdn-admins@mozilla.org?subject=Archival%20of%20content&body=%3C%3CPlease%20list%20the%20page%20to%20archive%20and%20why%20you%20think%20it%20should%20be%20archived%20here%3E%3E">contact an MDN administrator</a>.</p> <h2 id="Deprecated_content">Deprecated content</h2> diff --git a/files/ja/mdn/structures/macros/commonly-used_macros/index.html b/files/ja/mdn/structures/macros/commonly-used_macros/index.html index f7cc685313..b4e0df23ad 100644 --- a/files/ja/mdn/structures/macros/commonly-used_macros/index.html +++ b/files/ja/mdn/structures/macros/commonly-used_macros/index.html @@ -10,7 +10,7 @@ translation_of: MDN/Structures/Macros/Commonly-used_macros --- <p>{{MDNSidebar}}</p> -<p><span class="seoSummary">このページには MDN で使うために作られた汎用のマクロがたくさん掲載されています。これらのマクロの使い方については、<a href="/ja/docs/MDN/Contribute/Structures/Macros"> マクロの使い方</a> と <a href="/ja/docs/MDN/Contribute/Editor/Links#Using_link_macros">リンクを生成するマクロ</a> を見てください。</span> <a href="/ja/docs/MDN/Contribute/Structures/Macros/Other">その他のマクロ</a> には、めったに使われないマクロ、特殊な文脈でのみ使われるマクロ、使用が推奨されないマクロについての情報が書かれています。また、<a href="/en-US/dashboards/macros">MDNで使用できるマクロの完全な一覧</a>もあります。</p> +<p><span class="seoSummary">このページには MDN で使うために作られた汎用のマクロがたくさん掲載されています。これらのマクロの使い方については、<a href="/ja/docs/MDN/Contribute/Structures/Macros"> マクロの使い方</a> と <a href="/ja/docs/MDN/Contribute/Editor/Links#Using_link_macros">リンクを生成するマクロ</a> を見てください。</span> <a href="/ja/docs/MDN/Contribute/Structures/Macros/Other">その他のマクロ</a> には、めったに使われないマクロ、特殊な文脈でのみ使われるマクロ、使用が推奨されないマクロについての情報が書かれています。また、<a href="/ja/dashboards/macros">MDNで使用できるマクロの完全な一覧</a>もあります。</p> <p><a href="/ja/docs/MDN/Contribute/Guidelines/CSS_style_guide">CSS スタイルガイド</a>も見てください。</p> diff --git a/files/ja/mdn/tools/kumascript/troubleshooting/index.html b/files/ja/mdn/tools/kumascript/troubleshooting/index.html index c7c6a3a8a3..15e47fde67 100644 --- a/files/ja/mdn/tools/kumascript/troubleshooting/index.html +++ b/files/ja/mdn/tools/kumascript/troubleshooting/index.html @@ -17,7 +17,7 @@ translation_of: MDN/Tools/KumaScript/Troubleshooting <h2 id="DocumentParsingError">DocumentParsingError</h2> -<p><code>DocumentParsingError</code> のエラーは KumaScript がドキュメント自体を理解できないときに表示されます。最もよくある原因は <a href="/en-US/docs/MDN/Contribute/Content/Macros">macro</a> 内の文法エラーです。</p> +<p><code>DocumentParsingError</code> のエラーは KumaScript がドキュメント自体を理解できないときに表示されます。最もよくある原因は <a href="/ja/docs/MDN/Contribute/Content/Macros">macro</a> 内の文法エラーです。</p> <p>以下をチェックします:</p> @@ -37,7 +37,7 @@ translation_of: MDN/Tools/KumaScript/Troubleshooting <h2 id="TemplateLoadingError">TemplateLoadingError</h2> -<p><code>TemplateLoadingError</code> のエラーは KumaScript がページにどの <a href="/en-US/docs/MDN/Contribute/Content/Macros">macro</a> を取り込むか探せないときに表示されます。</p> +<p><code>TemplateLoadingError</code> のエラーは KumaScript がページにどの <a href="/ja/docs/MDN/Contribute/Content/Macros">macro</a> を取り込むか探せないときに表示されます。</p> <p>以下をチェックします:</p> diff --git a/files/ja/mdn/tools/sample_server/index.html b/files/ja/mdn/tools/sample_server/index.html index 6673a50016..9ef3383028 100644 --- a/files/ja/mdn/tools/sample_server/index.html +++ b/files/ja/mdn/tools/sample_server/index.html @@ -12,7 +12,7 @@ translation_of: MDN/Tools/Sample_server --- <div>{{MDNSidebar}}</div> -<p><span class="seoSummary">MDN は内蔵の<a href="/en-US/docs/MDN/Structures/Live_samples">ライブサンプルシステム</a>を提供しており、単純な (時にはそう単純でない) コードのサンプルをその出力と共にページの中で表示する機能を提供していますが、サーバーへの通信を必要とするサンプルもあります。私たちは MDN サンプルサーバーを用意し、このような、またその他の問題も合わせて、解決することにしました。</span> この記事は、そのサンプルサーバーを利用するためのガイドです。</p> +<p><span class="seoSummary">MDN は内蔵の<a href="/ja/docs/MDN/Structures/Live_samples">ライブサンプルシステム</a>を提供しており、単純な (時にはそう単純でない) コードのサンプルをその出力と共にページの中で表示する機能を提供していますが、サーバーへの通信を必要とするサンプルもあります。私たちは MDN サンプルサーバーを用意し、このような、またその他の問題も合わせて、解決することにしました。</span> この記事は、そのサンプルサーバーを利用するためのガイドです。</p> <h2 id="Possible_use_cases">想定するユースケース</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html b/files/ja/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html index b70402a17d..93e076c698 100644 --- a/files/ja/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html +++ b/files/ja/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html @@ -85,7 +85,7 @@ browser.browserAction.onClicked.addListener(openPage);</pre> background.js manifest.json</code></pre> -<p>ここで<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">拡張機能をインストールして</a>ボタンをクリックします:</p> +<p>ここで<a href="/ja/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">拡張機能をインストールして</a>ボタンをクリックします:</p> <p>{{EmbedYouTube("kwwTowgT-Ys")}}</p> diff --git a/files/ja/mozilla/add-ons/webextensions/api/alarms/index.html b/files/ja/mozilla/add-ons/webextensions/api/alarms/index.html index 3f37d24473..a62c85b880 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/alarms/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/alarms/index.html @@ -5,7 +5,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/alarms --- <div>{{AddonSidebar}}</div> -<p>コードが動作するタイミングを予約します。この API は <code><a href="https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setTimeout">setTimeout()</a></code> や <code><a href="https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setInterval">setInterval()</a></code> と似ていますが、 alarms API はバックグラウンドで動作する点が異なります。</p> +<p>コードが動作するタイミングを予約します。この API は <code><a href="/ja/docs/Web/API/WindowTimers/setTimeout">setTimeout()</a></code> や <code><a href="/ja/docs/Web/API/WindowTimers/setInterval">setInterval()</a></code> と似ていますが、 alarms API はバックグラウンドで動作する点が異なります。</p> <p>この API を利用するには "alarms" <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">パーミッション</a> が必要です。</p> diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/index.html b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/index.html index c1c073c551..af7b56a722 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/index.html @@ -14,9 +14,9 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks --- <p>{{AddonSidebar}}</p> -<p><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> {{WebExtAPIRef("bookmarks")}} API を利用すると、拡張機能からブラウザーのブックマークシステムにアクセスしたり、操作することができます。ページをブックマークしたり、既存のブックマークを取得したり、ブックマークを編集・削除・整理することが可能です。</p> +<p><a href="/ja/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> {{WebExtAPIRef("bookmarks")}} API を利用すると、拡張機能からブラウザーのブックマークシステムにアクセスしたり、操作することができます。ページをブックマークしたり、既存のブックマークを取得したり、ブックマークを編集・削除・整理することが可能です。</p> -<p>この API を使用する際は、拡張機能の <code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a></code> ファイルで "bookmarks" <a href="/ja/Add-ons/WebExtensions/manifest.json/permissions">パーミッション</a> を指定する必要があります。</p> +<p>この API を使用する際は、拡張機能の <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a></code> ファイルで "bookmarks" <a href="/ja/Add-ons/WebExtensions/manifest.json/permissions">パーミッション</a> を指定する必要があります。</p> <p>拡張機能ではブックマークツリーのルートノードではブックマークを作成・編集・削除できません。それをしようとすると次のエラーになります: "<em>The bookmark root cannot be modified</em>"</p> diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/search/index.html b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/search/index.html index 4532e33fdd..673f7a3fa6 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/search/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/search/index.html @@ -17,7 +17,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks/search <p><strong><code>bookmarks.search()</code></strong> 関数は、指定したクエリにマッチするブックマークを検索するものです。マッチしたブックマークは、{{WebExtAPIRef('bookmarks.BookmarkTreeNode')}} オブジェクトの配列として、指定されたコールバック関数の引数に渡されます。</p> -<p>入力引数の値や型が不正だった場合、この関数は例外を送出します。エラーメッセージは<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/%E3%83%87%E3%83%90%E3%83%83%E3%82%B0">コンソール</a>で確認できます。送出された例外はエラー ID を含んでおらず、またメッセージを変更される可能性があるため、これらを解析するようなコードは書かないでください。</p> +<p>入力引数の値や型が不正だった場合、この関数は例外を送出します。エラーメッセージは<a href="/ja/Add-ons/WebExtensions/%E3%83%87%E3%83%90%E3%83%83%E3%82%B0">コンソール</a>で確認できます。送出された例外はエラー ID を含んでおらず、またメッセージを変更される可能性があるため、これらを解析するようなコードは書かないでください。</p> <h2 id="構文">構文</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/browseraction/index.html b/files/ja/mozilla/add-ons/webextensions/api/browseraction/index.html index f5291179ee..1404bbba10 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/browseraction/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/browseraction/index.html @@ -83,7 +83,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/browserAction <p>{{Compat("webextensions.api.browserAction")}}</p> <div class="hidden note"> -<p>The "Chrome incompatibilities" section is included from <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Chrome_incompatibilities"> https://developer.mozilla.org/ja/Add-ons/WebExtensions/Chrome_incompatibilities</a> using the <a href="/ja/docs/Template:WebExtChromeCompat">WebExtChromeCompat</a> macro.</p> +<p>The "Chrome incompatibilities" section is included from <a href="/ja/Add-ons/WebExtensions/Chrome_incompatibilities"> https://developer.mozilla.org/ja/Add-ons/WebExtensions/Chrome_incompatibilities</a> using the <a href="/ja/docs/Template:WebExtChromeCompat">WebExtChromeCompat</a> macro.</p> <p>If you need to update this content, edit <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Chrome_incompatibilities">https://developer.mozilla.org/ja/Add-ons/WebExtensions/Chrome_incompatibilities</a>, then shift-refresh this page to see your changes.</p> </div> diff --git a/files/ja/mozilla/add-ons/webextensions/api/browseraction/onclicked/index.html b/files/ja/mozilla/add-ons/webextensions/api/browseraction/onclicked/index.html index 9b632cf33c..5497f9aba2 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/browseraction/onclicked/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/browseraction/onclicked/index.html @@ -7,7 +7,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/browserAction/onClicked <p>ブラウザアクションアイコンがクリックされたときに発火します。このイベントはブラウザアクションがポップアップを持っているときは発火しません。</p> -<p>右クリックを定義するには、<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus" title="Add items to the browser's context menu, to be displayed in the contexts you specify. For example, you can show the item only when the user clicks on an image, or on an editable element, or when part of a page is selected."><code>contextMenus</code></a> API の"browser_action" <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus/ContextType" title="The different contexts a menu can appear in.">context type</a>を利用してください。</p> +<p>右クリックを定義するには、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus" title="Add items to the browser's context menu, to be displayed in the contexts you specify. For example, you can show the item only when the user clicks on an image, or on an editable element, or when part of a page is selected."><code>contextMenus</code></a> API の"browser_action" <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus/ContextType" title="The different contexts a menu can appear in.">context type</a>を利用してください。</p> <h2 id="書式">書式</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/browsersettings/index.html b/files/ja/mozilla/add-ons/webextensions/api/browsersettings/index.html index a9bbf45a6a..de27090435 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/browsersettings/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/browsersettings/index.html @@ -22,7 +22,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/browserSettings <div> </div> <div> -<p>この API を使うには "browserSettings" <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">パーミッション</a>が必要です。</p> +<p>この API を使うには "browserSettings" <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">パーミッション</a>が必要です。</p> </div> <h2 id="Properties" name="Properties">プロパティ</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.html b/files/ja/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.html index 28cd218da1..3e1e3237f8 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.html @@ -18,7 +18,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/browsingData/removeCache <p>この関数は{{WebExtAPIRef("browsingData.RemovalOptions")}} オブジェクトを引数に取りますが無視されます。そのためこの関数を使うとすべてのキャッシュが消去されるため注意してください。</p> -<p>この関数は <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返す非同期関数です。</p> +<p>この関数は <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返す非同期関数です。</p> <h2 id="構文">構文</h2> @@ -36,7 +36,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/browsingData/removeCache <h3 id="返り値">返り値</h3> -<p>消去が完了した後に実行される <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> が返されます。この Promise は引数を持ちません。エラーが発生した場合はエラーメッセージを引数にしてrejectを呼び出します。</p> +<p>消去が完了した後に実行される <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> が返されます。この Promise は引数を持ちません。エラーが発生した場合はエラーメッセージを引数にしてrejectを呼び出します。</p> <h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/clipboard/setimagedata/index.html b/files/ja/mozilla/add-ons/webextensions/api/clipboard/setimagedata/index.html index d79122fdae..9925f45900 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/clipboard/setimagedata/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/clipboard/setimagedata/index.html @@ -7,7 +7,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/clipboard/setImageData <p>イメージをクリップボードにコピーします。イメージはクリップボードに書き込まれる前に再エンコードされます。イメージが無効な場合、クリップボードは修正されません。</p> -<p>The image is provided as an <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a></code> containing the encoded image. JPEG and PNG formats are supported.</p> +<p>The image is provided as an <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a></code> containing the encoded image. JPEG and PNG formats are supported.</p> <p>Although this API is based on Chrome's <code><a href="https://developer.chrome.com/apps/clipboard">clipboard.setImageData()</a></code> API, there are some differences:</p> @@ -18,7 +18,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/clipboard/setImageData <li>This API does not support the <code>additionalItems</code> parameter.</li> </ul> -<p>これは<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>を返す非同期関数です。</p> +<p>これは<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>を返す非同期関数です。</p> <h2 id="書式">書式</h2> @@ -29,14 +29,14 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/clipboard/setImageData <dl> <dt><code>imageData</code></dt> - <dd>An <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a></code> containing the encoded image data to copy to the clipboard.</dd> + <dd>An <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a></code> containing the encoded image data to copy to the clipboard.</dd> <dt><code>imageType</code></dt> <dd>A {{domxref("DOMString")}} indicating the type of image contained in <code>imageData</code>: <code>"png"</code> or <code>"jpeg"</code>.</dd> </dl> <h3 id="返り値">返り値</h3> -<p>A <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> that will be resolved with no arguments if the operation succeeded, or rejected if there was an error (for example, because the data did not represent a valid image).</p> +<p>A <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> that will be resolved with no arguments if the operation succeeded, or rejected if there was an error (for example, because the data did not represent a valid image).</p> <h2 id="ブラウザ互換性">ブラウザ互換性</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/commands/index.html b/files/ja/mozilla/add-ons/webextensions/api/commands/index.html index 0e622b38d2..b1d10465d8 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/commands/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/commands/index.html @@ -12,13 +12,13 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/commands --- <div>{{AddonSidebar}}</div> -<p><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/commands"><code>commands</code> manifest.json キー</a>を使って、登録したコマンドをユーザーが実行するのをリッスンします。</p> +<p><a href="/ja/Add-ons/WebExtensions/manifest.json/commands"><code>commands</code> manifest.json キー</a>を使って、登録したコマンドをユーザーが実行するのをリッスンします。</p> <h2 id="Types" name="Types">型</h2> <dl> <dt>{{WebExtAPIRef("commands.Command")}}</dt> - <dd>コマンドを表す型。これは <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/commands">manifest.json の <code>commands</code> キー</a>のコマンドで指定された情報が入っています。</dd> + <dd>コマンドを表す型。これは <a href="/ja/Add-ons/WebExtensions/manifest.json/commands">manifest.json の <code>commands</code> キー</a>のコマンドで指定された情報が入っています。</dd> </dl> <h2 id="Functions" name="Functions">関数</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/contentscripts/index.html b/files/ja/mozilla/add-ons/webextensions/api/contentscripts/index.html index d72cf1de1d..5726499a9b 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/contentscripts/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/contentscripts/index.html @@ -18,11 +18,11 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/contentScripts <p>このAPIは<code>manifest.json</code>にある"content_scripts"キーと似ていますが、"content_scripts"ではコンテントスクリプトとURLのパターンは<strong>インストールタイム</strong>に固定されます。<span class="seoSummary">一方<code>content_scripts</code> APIは、<strong>ランタイム（実行時）</strong>でスクリプトを登録・登録解除することが可能です。</span></p> -<p>このAPIは、{{WebExtAPIRef("contentScripts.register()")}} メソッドを呼び出して使用していただけます。その際は、登録するコンテントスクリプト、URLのマッチングパターン、またその他のオプションを実引数(arguments)として渡してください。このメソッドは{{WebExtAPIRef("contentScripts.RegisteredContentScript")}} オブジェクトがresolveされた <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返します。</p> +<p>このAPIは、{{WebExtAPIRef("contentScripts.register()")}} メソッドを呼び出して使用していただけます。その際は、登録するコンテントスクリプト、URLのマッチングパターン、またその他のオプションを実引数(arguments)として渡してください。このメソッドは{{WebExtAPIRef("contentScripts.RegisteredContentScript")}} オブジェクトがresolveされた <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返します。</p> <p><code>RegisteredContentScript</code> オブジェクトは <code>register()</code> で登録されたスクリプトを保持し、<code>unregister()</code>でそのスクリプトを登録解除(unregister)できます。また、コンテントスクリプトはそれらを作ったページが消された際にも自動的に登録解除されます。例えば、backgroundページによって登録されたコンテントスクリプトは、backgroundページが消去された際に自動的に登録解除されます。</p> -<p><code>contentScripts</code> API にパーミッションは存在しませんが、拡張機能はregister()でマッチさせるURLにおいては適切な<a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">host permissions</a>を持っている必要があります。</p> +<p><code>contentScripts</code> API にパーミッションは存在しませんが、拡張機能はregister()でマッチさせるURLにおいては適切な<a href="/ja/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">host permissions</a>を持っている必要があります。</p> <h2 id="Types">Types</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/contentscripts/register/index.html b/files/ja/mozilla/add-ons/webextensions/api/contentscripts/register/index.html index 3f337606a8..e3613e2d4b 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/contentscripts/register/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/contentscripts/register/index.html @@ -16,7 +16,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/contentScripts/register <p>manifest.json内の <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> に似た一つのオブジェクトを引数に持ちます。<code>content_scripts</code> では配列ですが、この <code>register()</code> ではオブジェクトを引数に持ちます。</p> -<p>これは <code><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返す非同期関数です。</p> +<p>これは <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返す非同期関数です。</p> <h2 id="Syntax" name="Syntax">構文</h2> @@ -64,7 +64,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/contentScripts/register <h3 id="Examples" name="Examples">返り値</h3> -<p>登録したコンテントスクリプトを削除することができる {{WebExtAPIRef("contentScripts.RegisteredContentScript")}} オブジェクトを引数に持つ <code><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返します。</p> +<p>登録したコンテントスクリプトを削除することができる {{WebExtAPIRef("contentScripts.RegisteredContentScript")}} オブジェクトを引数に持つ <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返します。</p> <p><br> <span class="message"><span class="content">現在、登録したコンテントスクリプトは、これを登録した拡張機能ページをアンロードしたときに削除されます。</span></span>したがって、コンテントスクリプトを登録する際は、少なくとも登録されたままであってほしいだけ存在する拡張機能ページから登録すべきです。</p> diff --git a/files/ja/mozilla/add-ons/webextensions/api/contextualidentities/index.html b/files/ja/mozilla/add-ons/webextensions/api/contextualidentities/index.html index 46f956e09e..3b74a702f6 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/contextualidentities/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/contextualidentities/index.html @@ -23,7 +23,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/contextualIdentities <p>Contextual identities は現在その他のブラウザーではサポートされていません。</p> -<p>この API を使うには、 <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json </a>ファイル内で "contextualIdentities" <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">パーミッション</a>を入れます。</p> +<p>この API を使うには、 <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json </a>ファイル内で "contextualIdentities" <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">パーミッション</a>を入れます。</p> <h2 id="Types" name="Types">型</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/cookies/cookie/index.html b/files/ja/mozilla/add-ons/webextensions/api/cookies/cookie/index.html index 1282d09fa0..a6cf135e1b 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/cookies/cookie/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/cookies/cookie/index.html @@ -27,7 +27,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/cookies/Cookie <dt><code>expirationDate</code>{{optional_inline}}</dt> <dd>cookie の有効期限をUNIX時刻からの秒数で持つ <code>number</code> 型です。セッション cookie はこのプロパティを持っていません。</dd> <dt><code>firstPartyDomain</code></dt> - <dd>cookie に関連付けられたファーストパーティドメインを表す文字列を格納している <code>string</code> 型です。 cookie のFirst-party isolationが無効の間は空文字列になります。詳細は <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/cookies#First-party_isolation">First-party isolation</a> をご覧ください。</dd> + <dd>cookie に関連付けられたファーストパーティドメインを表す文字列を格納している <code>string</code> 型です。 cookie のFirst-party isolationが無効の間は空文字列になります。詳細は <a href="/ja/Add-ons/WebExtensions/API/cookies#First-party_isolation">First-party isolation</a> をご覧ください。</dd> <dt><code>hostOnly</code></dt> <dd><code>boolean</code> 型です。cookie がホストオンリークッキー (リクエストのホストが cookie の指定ドメインと完全一致している場合のみ送信) である場合に <code>true</code> 、でなければ <code>false</code> になります。</dd> <dt><code>httpOnly</code></dt> diff --git a/files/ja/mozilla/add-ons/webextensions/api/cookies/index.html b/files/ja/mozilla/add-ons/webextensions/api/cookies/index.html index 63788a4292..644c3ef6b2 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/cookies/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/cookies/index.html @@ -15,7 +15,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/cookies <p>拡張機能に cookie の取得と設定と、変更された時の通知を可能にします。</p> -<p>この API を使用するには、<a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> ファイルで "cookies" の <a href="/ja/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">API パーミッション</a> があることと、同様にアクセスする cookie を持つ <a href="/ja/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">host パーミッション</a> も必要になります。<a href="/ja/Add-ons/WebExtensions/API/cookies#Permissions">cookie パーミッション</a>を見てください。</p> +<p>この API を使用するには、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> ファイルで "cookies" の <a href="/ja/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">API パーミッション</a> があることと、同様にアクセスする cookie を持つ <a href="/ja/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">host パーミッション</a> も必要になります。<a href="/ja/Add-ons/WebExtensions/API/cookies#Permissions">cookie パーミッション</a>を見てください。</p> <h2 id="Types" name="Types">型</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.html b/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.html index 7d32c2801c..83318bdd30 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.html @@ -64,7 +64,7 @@ original_slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval <h3 id="Return_value">Return value</h3> -<p>A <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> that will be fulfilled with an <code>array</code> containing two elements.</p> +<p>A <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> that will be fulfilled with an <code>array</code> containing two elements.</p> <p>If no error occurred, element 0 will contain the result of evaluating the expression, and element 1 will be <code>undefined</code>.</p> diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.html b/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.html index 39d50588a4..8a5b774701 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.html @@ -14,7 +14,7 @@ original_slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow <div>{{AddonSidebar}}</div> <div class="note"> -<p>このページは Firefox 54 に存在する WebExtensions devtools APIs を記述しています。このAPI は <a class="external external-icon" href="https://developer.chrome.com/extensions/devtools" rel="noopener">Chrome devtools APIs</a> に基づいていますが、Firefoxでは実装されていない多くの機能があり、よってここに文書化されていません。現在欠けている機能を見るには、 <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs">Limitations of the devtools APIs</a> を見てください。</p> +<p>このページは Firefox 54 に存在する WebExtensions devtools APIs を記述しています。このAPI は <a class="external external-icon" href="https://developer.chrome.com/extensions/devtools" rel="noopener">Chrome devtools APIs</a> に基づいていますが、Firefoxでは実装されていない多くの機能があり、よってここに文書化されていません。現在欠けている機能を見るには、 <a href="/ja/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs">Limitations of the devtools APIs</a> を見てください。</p> </div> <p><code>devtools.inspectedWindow</code> API によって開発ツール拡張機能では開発ツールが割当てられたウィンドウと相互作用できます。</p> diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools/network/index.html b/files/ja/mozilla/add-ons/webextensions/api/devtools/network/index.html index 7bc171b612..52d78a9627 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/devtools/network/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/devtools/network/index.html @@ -14,12 +14,12 @@ original_slug: Mozilla/Add-ons/WebExtensions/API/devtools.network <div>{{AddonSidebar}}</div> <div class="note"> -<p>このページは Firefox 54 に存在する WebExtensions devtools APIs を記述しています。このAPI は <a class="external external-icon" href="https://developer.chrome.com/extensions/devtools" rel="noopener">Chrome devtools APIs</a> に基づいていますが、Firefoxでは実装されていない多くの機能があり、よってここに文書化されていません。現在欠けている機能を見るには、 <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs">Limitations of the devtools APIs</a> を見てください。</p> +<p>このページは Firefox 54 に存在する WebExtensions devtools APIs を記述しています。このAPI は <a class="external external-icon" href="https://developer.chrome.com/extensions/devtools" rel="noopener">Chrome devtools APIs</a> に基づいていますが、Firefoxでは実装されていない多くの機能があり、よってここに文書化されていません。現在欠けている機能を見るには、 <a href="/ja/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs">Limitations of the devtools APIs</a> を見てください。</p> </div> <p><code>devtools.network</code> API によって開発ツール拡張機能では開発ツールが付属しているウィンドウ(インスペクト対象ウィンドウ)に関連するネットワークリクエストの情報を取得できます。</p> -<p>すべての <code>devtools</code> API と同様に、この API はmanifest.json <a class="new" href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page" rel="nofollow">devtools_page</a> キー内に定義されたドキュメントや、拡張機能が作成するその他の開発ツールドキュメント(例えば拡張機能が作ったパネル自身のドキュメント)の中だけでコードを利用できます。これ以上は <a class="new" href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools" rel="nofollow">開発ツールを拡張する</a>を見てください。</p> +<p>すべての <code>devtools</code> API と同様に、この API はmanifest.json <a class="new" href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page" rel="nofollow">devtools_page</a> キー内に定義されたドキュメントや、拡張機能が作成するその他の開発ツールドキュメント(例えば拡張機能が作ったパネル自身のドキュメント)の中だけでコードを利用できます。これ以上は <a class="new" href="/ja/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools" rel="nofollow">開発ツールを拡張する</a>を見てください。</p> <h2 id="Events" name="Events">Events</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/downloads/download/index.html b/files/ja/mozilla/add-ons/webextensions/api/downloads/download/index.html index 8616ce3585..b9f5bdb3e2 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/downloads/download/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/downloads/download/index.html @@ -12,7 +12,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/downloads/download <li><code>filename</code> と <code>saveAs</code> が指定されている場合、指定された<code>filename</code>が設定された[名前をつけて保存]のダイアログが開きます。</li> </ul> -<p>この関数は非同期に実行され、<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>を返します。</p> +<p>この関数は非同期に実行され、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>を返します。</p> <h2 id="構文">構文</h2> @@ -35,7 +35,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/downloads/download <dt><code>filename</code>{{optional_inline}}</dt> <dd>A <code>string</code> representing a file path relative to the default downloads directory — this provides the location where you want the file to be saved, and what filename you want to use. Absolute paths, empty paths, and paths containing back-references (<code>../</code>) will cause an error. If omitted, this value will default to the filename already given to the download file, and a location immediately inside the downloads directory.</dd> <dt><code>headers</code>{{optional_inline}}</dt> - <dd>An <code>array</code> of <code>objects</code> representing extra HTTP headers to send with the request if the URL uses the HTTP[s] protocol. Each header is represented as a dictionary object containing the keys <code>name</code> and either <code>value</code> or <code>binaryValue</code>, restricted to those allowed by <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code>.</dd> + <dd>An <code>array</code> of <code>objects</code> representing extra HTTP headers to send with the request if the URL uses the HTTP[s] protocol. Each header is represented as a dictionary object containing the keys <code>name</code> and either <code>value</code> or <code>binaryValue</code>, restricted to those allowed by <code><a href="/ja/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code>.</dd> <dt><code>incognito</code>{{optional_inline}}</dt> <dd>A <code>boolean</code>: if present and set to true, then associate this download with a private browsing session. This means that it will only appear in the download manager for any private windows that are currently open.</dd> <dt><code>method</code>{{optional_inline}}</dt> @@ -54,7 +54,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/downloads/download <h3 id="戻り値">戻り値</h3> -<p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>が返却されます。ダウンロードが成功した場合、new {{WebExtAPIRef("downloads.DownloadItem")}}のidが格納されたpromiseを受け取ります。対して、promiseがrejectされた場合は、エラーメッセージを受け取ります。</p> +<p><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>が返却されます。ダウンロードが成功した場合、new {{WebExtAPIRef("downloads.DownloadItem")}}のidが格納されたpromiseを受け取ります。対して、promiseがrejectされた場合は、エラーメッセージを受け取ります。</p> <h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/downloads/index.html b/files/ja/mozilla/add-ons/webextensions/api/downloads/index.html index 98dcaef054..13947d80e5 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/downloads/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/downloads/index.html @@ -16,7 +16,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/downloads <p>拡張機能にブラウザーのダウンロードマネージャーとのやりとりを可能にします。このAPI モジュールを、ファイルマネージャーでのファイルのダウンロード、キャンセル、停止、ダウンロードの再開、ダウンロード済みのファイルの表示に使用できます。</p> -<p>このAPIを使うには <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> ファイルで指定する "downloads" <a href="/JA/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">API パーミッション</a>が必要です。</p> +<p>このAPIを使うには <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> ファイルで指定する "downloads" <a href="/JA/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">API パーミッション</a>が必要です。</p> <h2 id="Types" name="Types">型</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/extensiontypes/index.html b/files/ja/mozilla/add-ons/webextensions/api/extensiontypes/index.html index 3c6424f619..c4e2cac8ca 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/extensiontypes/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/extensiontypes/index.html @@ -26,7 +26,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/extensionTypes <dt>{{WebExtAPIRef("extensionTypes.RunAt")}}</dt> <dd>タブに JavaScript か CSS が挿入されてほんのすぐ</dd> <dt><code>extensionTypes.CSSOrigin</code></dt> - <dd><code><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/API/tabs/insertCSS">tabs.insertCSS</a></code> で挿入された CSS スタイルシートが "author" か "user" のスタイルシートのどちらであるかを示す</dd> + <dd><code><a href="/ja/Add-ons/WebExtensions/API/tabs/insertCSS">tabs.insertCSS</a></code> で挿入された CSS スタイルシートが "author" か "user" のスタイルシートのどちらであるかを示す</dd> </dl> <h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/find/find/index.html b/files/ja/mozilla/add-ons/webextensions/api/find/find/index.html index 61f777789e..a062774466 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/find/find/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/find/find/index.html @@ -29,7 +29,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/find/find <li>{{WebExtAPIRef("find.highlightResults()")}},</li> </ul> -<p>この関数は asynchronous/ 非同期 関数で <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返します。</p> +<p>この関数は asynchronous/ 非同期 関数で <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返します。</p> <h2 id="Syntax">Syntax</h2> @@ -65,7 +65,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/find/find <h3 id="Return_value">Return value</h3> -<p>A <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> that will be fulfilled with an object containing up to three properties:</p> +<p>A <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> that will be fulfilled with an object containing up to three properties:</p> <dl class="reference-values"> <dt><code>count</code></dt> @@ -141,7 +141,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/find/find browser.find.find("banana").then(found);</pre> -<p>Search for "banana" across all tabs (note that this requires the "tabs" <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions">permission</a>, because it accesses <code>tab.url</code>):</p> +<p>Search for "banana" across all tabs (note that this requires the "tabs" <a href="/ja/Add-ons/WebExtensions/manifest.json/permissions">permission</a>, because it accesses <code>tab.url</code>):</p> <pre class="brush: js">async function findInAllTabs(allTabs) { for (let tab of allTabs) { diff --git a/files/ja/mozilla/add-ons/webextensions/api/history/index.html b/files/ja/mozilla/add-ons/webextensions/api/history/index.html index d283cb7bcb..ae579d610b 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/history/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/history/index.html @@ -17,7 +17,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/history <p>ブラウザー履歴とやりとりする <code>history</code> API を使用します。</p> <div class="note"> -<p>downloads は <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/history/HistoryItem" title="A HistoryItem object provides information about a page in the browser history."><code>HistoryItem</code></a> オブジェクトとして扱われるのに注意します。このため、ダウンロードのために <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/history/onVisited" title="Fired each time the user visits a page. A history.HistoryItem object is passed to the listener. This event fires before the page has loaded."><code>history.onVisited</code></a> も発火します。</p> +<p>downloads は <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/history/HistoryItem" title="A HistoryItem object provides information about a page in the browser history."><code>HistoryItem</code></a> オブジェクトとして扱われるのに注意します。このため、ダウンロードのために <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/history/onVisited" title="Fired each time the user visits a page. A history.HistoryItem object is passed to the listener. This event fires before the page has loaded."><code>history.onVisited</code></a> も発火します。</p> </div> <p>ブラウザー履歴はユーザーが訪れたページの時間順の記録です。history API では次の事ができます:</p> @@ -36,7 +36,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/history <li><a href="/ja/Add-ons/WebExtensions/API/history/deleteRange">所定の期間に訪問したあらゆるページの訪問を削除する</a></li> </ul> -<p>このAPIを使うには <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> ファイルで指定する "history" <a href="https://developer.mozilla.org/JA/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">パーミッション</a>が必要です。</p> +<p>このAPIを使うには <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> ファイルで指定する "history" <a href="/JA/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">パーミッション</a>が必要です。</p> <h2 id="Types" name="Types">型</h2> @@ -57,7 +57,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/history <dl> <dt>{{WebExtAPIRef("history.search()")}}</dt> - <dd>ブラウザー履歴を検索して、所与の条件にマッチする <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/History/HistoryItem" title="A HistoryItem object provides information about one result from a history query."><code>history.HistoryItem</code></a> オブジェクトを得る</dd> + <dd>ブラウザー履歴を検索して、所与の条件にマッチする <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/History/HistoryItem" title="A HistoryItem object provides information about one result from a history query."><code>history.HistoryItem</code></a> オブジェクトを得る</dd> <dt>{{WebExtAPIRef("history.getVisits()")}}</dt> <dd>所定のページへの訪問についての情報を取得する</dd> <dt>{{WebExtAPIRef("history.addUrl()")}}</dt> diff --git a/files/ja/mozilla/add-ons/webextensions/api/i18n/detectlanguage/index.html b/files/ja/mozilla/add-ons/webextensions/api/i18n/detectlanguage/index.html index 8b28aeee9b..edbd807443 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/i18n/detectlanguage/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/i18n/detectlanguage/index.html @@ -17,7 +17,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/i18n/detectLanguage <p>提供されたテキストの言語を <a href="https://github.com/CLD2Owners/cld2">Compact Language Detector</a> (CLD) を利用して検出します。</p> -<p>これは、<code><a href="/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返す非同期関数です。</p> +<p>これは、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返す非同期関数です。</p> <h2 id="Syntax" name="Syntax">構文</h2> @@ -35,7 +35,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/i18n/detectLanguage <h3 id="Return_value" name="Return_value">戻り値</h3> -<p>結果オブジェクトで解決される <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>。結果オブジェクトは 2 個のプロパティを持ちます:</p> +<p>結果オブジェクトで解決される <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>。結果オブジェクトは 2 個のプロパティを持ちます:</p> <dl class="reference-values"> <dt><code>isReliable</code></dt> diff --git a/files/ja/mozilla/add-ons/webextensions/api/identity/getredirecturl/index.html b/files/ja/mozilla/add-ons/webextensions/api/identity/getredirecturl/index.html index 8d639e241b..83a6cabb70 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/identity/getredirecturl/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/identity/getredirecturl/index.html @@ -16,7 +16,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/identity/getRedirectURL <p>リダイレクト URL として利用可能な URL を生成します。</p> -<p>この URL は、アドオン ID から生成されるため、使用したい場合、<code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings">browser_specific_settings</a></code> キーを使用してアドオン ID を明示的に設定する必要があるでしょう (設定しない場合、アドオンを<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">一時的にインストール</a>するたびに、異なるリダイレクト URL を取得することになります)。</p> +<p>この URL は、アドオン ID から生成されるため、使用したい場合、<code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings">browser_specific_settings</a></code> キーを使用してアドオン ID を明示的に設定する必要があるでしょう (設定しない場合、アドオンを<a href="/ja/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">一時的にインストール</a>するたびに、異なるリダイレクト URL を取得することになります)。</p> <p>リダイレクトURL については、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/identity#Getting_the_redirect_URL">リダイレクトURL を取得する</a>を参照してください。</p> diff --git a/files/ja/mozilla/add-ons/webextensions/api/identity/index.html b/files/ja/mozilla/add-ons/webextensions/api/identity/index.html index 29d946d813..90200ebbc2 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/identity/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/identity/index.html @@ -25,7 +25,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/identity <p>そして、OAuth2 フローを実施して取得した検証済みアクセストークンを、HTTP リクエスト内で使用することで、拡張機能はユーザーから認可された範囲でデータにアクセスできるようになります。</p> -<p>この API を利用するためには、"identity" <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">API のパーミッション</a>が必要です。</p> +<p>この API を利用するためには、"identity" <a href="/ja/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">API のパーミッション</a>が必要です。</p> <h2 id="Setup" name="Setup">セットアップ</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/idle/index.html b/files/ja/mozilla/add-ons/webextensions/api/idle/index.html index e92112e732..7978e10527 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/idle/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/idle/index.html @@ -16,7 +16,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/idle <p>ユーザーのシステムがアイドル状態、ロックされた状態、アクティブな状態であるのを発見します。</p> -<p>この API を使うには "idle" <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">パーミッション</a>が必要です。</p> +<p>この API を使うには "idle" <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">パーミッション</a>が必要です。</p> <h2 id="Types" name="Types">型</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/index.html b/files/ja/mozilla/add-ons/webextensions/api/index.html index e7ffc434a7..b813ae50d9 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/index.html @@ -8,9 +8,9 @@ translation_of: Mozilla/Add-ons/WebExtensions/API <div>{{AddonSidebar}}</div> <div> -<p>WebExtension 用の JavaScript API は拡張機能の<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">バックグラウンドスクリプト</a>と、その他の拡張機能にバンドルした文書 (<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Browser_action">ブラウザーアクション</a>や<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Page_actions">ページアクション</a>ポップアップや<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Sidebars">サイドバー</a>や<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">オプションページ</a>や<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/chrome_url_overrides">新規タブページ</a>を含む) で使用できます。いくつかの API は拡張機能の<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts">コンテンツスクリプト</a>からもアクセスできます (<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs">コンテンツスクリプトガイドの表</a>を見てください)。</p> +<p>WebExtension 用の JavaScript API は拡張機能の<a href="/ja/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">バックグラウンドスクリプト</a>と、その他の拡張機能にバンドルした文書 (<a href="/ja/Add-ons/WebExtensions/Browser_action">ブラウザーアクション</a>や<a href="/ja/Add-ons/WebExtensions/Page_actions">ページアクション</a>ポップアップや<a href="/ja/Add-ons/WebExtensions/Sidebars">サイドバー</a>や<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">オプションページ</a>や<a href="/ja/Add-ons/WebExtensions/manifest.json/chrome_url_overrides">新規タブページ</a>を含む) で使用できます。いくつかの API は拡張機能の<a href="/ja/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts">コンテンツスクリプト</a>からもアクセスできます (<a href="/ja/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs">コンテンツスクリプトガイドの表</a>を見てください)。</p> -<p>もっと強力な API を使うには、拡張機能の <code>manifest.json</code> で<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/permissions">パーミッションをリクエストする</a>必要があります。</p> +<p>もっと強力な API を使うには、拡張機能の <code>manifest.json</code> で<a href="/ja/Add-ons/WebExtensions/manifest.json/permissions">パーミッションをリクエストする</a>必要があります。</p> <p><code>browser</code> 名前空間内で API にアクセスできます:</p> @@ -33,7 +33,7 @@ browser<span class="punctuation token">.</span>tabs<span class="punctuation toke <span class="punctuation token">}</span> <span class="keyword token">let</span> setCookie <span class="operator token">=</span> browser<span class="punctuation token">.</span>cookies<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span> - <span class="punctuation token">{</span>url<span class="punctuation token">:</span> <span class="string token">"https://developer.mozilla.org/"</span><span class="punctuation token">}</span> + <span class="punctuation token">{</span>url<span class="punctuation token">:</span> <span class="string token">"/"</span><span class="punctuation token">}</span> <span class="punctuation token">)</span><span class="punctuation token">;</span> setCookie<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>logCookie<span class="punctuation token">,</span> logError<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> </div> @@ -45,7 +45,7 @@ setCookie<span class="punctuation token">.</span><span class="function token">th <p>Microsoft Edge は <code>browser</code> 名前空間を使いますが、promise ベースの非同期 API はサポートされていません。Edge では当面、非同期 API はコールバックを使うのが必須です。</p> -<p>すべてのブラウザーがすべての API をサポートしているわけではありません: 詳しくは<a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs"> JavaScript API のブラウザーサポート</a>をご覧ください。</p> +<p>すべてのブラウザーがすべての API をサポートしているわけではありません: 詳しくは<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs"> JavaScript API のブラウザーサポート</a>をご覧ください。</p> <h2 id="JavaScript_API_listing" name="JavaScript_API_listing">JavaScript API 一覧</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/management/index.html b/files/ja/mozilla/add-ons/webextensions/api/management/index.html index 06042d1093..694c72d2c8 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/management/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/management/index.html @@ -24,7 +24,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/management <li>アドオンのインストール・有効・無効の状態に関する通知の取得</li> </ul> -<p>操作のほとんどは "management" <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/permissions">API パーミッション</a>を要求します。他のアドオンへのアクセスを提供しない操作はこのパーミッションを要求しません。</p> +<p>操作のほとんどは "management" <a href="/ja/Add-ons/WebExtensions/manifest.json/permissions">API パーミッション</a>を要求します。他のアドオンへのアクセスを提供しない操作はこのパーミッションを要求しません。</p> <h2 id="Types" name="Types">型</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/menus/index.html b/files/ja/mozilla/add-ons/webextensions/api/menus/index.html index 5cb7281ea6..49eafb4bfe 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/menus/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/menus/index.html @@ -21,9 +21,9 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/menus <p>Firefox 55 より前ではこの API は <code>contextMenus</code> という名前でした。その名称は一応エイリアスにしています。そのため <code>contextMenus</code> という名称を使ってFirefoxや他のブラウザでも動くコードを書くことできます。</p> -<p>このAPIを使用するためには <code>menus</code> <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a> 必要です。 <code>menus</code> の代わりにエイリアスの <code>contextMenus</code> を使用することができますが、もし使用するのであれば<code>browser.contextMenus</code> でAPIにアクセスしなければなりません。.</p> +<p>このAPIを使用するためには <code>menus</code> <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a> 必要です。 <code>menus</code> の代わりにエイリアスの <code>contextMenus</code> を使用することができますが、もし使用するのであれば<code>browser.contextMenus</code> でAPIにアクセスしなければなりません。.</p> -<p>この API は<code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/menus/getTargetElement">menus.getTargetElement()</a></code>以外はコンテンツスクリプトからは使用できません。バックグラウンドページからは使えます。</p> +<p>この API は<code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/menus/getTargetElement">menus.getTargetElement()</a></code>以外はコンテンツスクリプトからは使用できません。バックグラウンドページからは使えます。</p> <h2 id="Creating_menu_items" name="Creating_menu_items">メニューアイテムをつくる</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/notifications/create/index.html b/files/ja/mozilla/add-ons/webextensions/api/notifications/create/index.html index 9230ce54bf..6285222c2b 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/notifications/create/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/notifications/create/index.html @@ -11,7 +11,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/notifications/create <p>You can optionally provide an ID for the notification. If you omit the ID, an ID will be generated. You can use the ID to {{WebExtAPIRef("notifications.update()", "update")}} or {{WebExtAPIRef("notifications.clear()", "clear")}} the notification.</p> -<p>This is an asynchronous function that returns a <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>.</p> +<p>This is an asynchronous function that returns a <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>.</p> <div class="warning"> <p>If you call <code>notifications.create()</code> more than once in rapid succession, Firefox may end up not displaying any notification at all.</p> @@ -36,7 +36,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/notifications/create <h3 id="返り値">返り値</h3> -<p>A <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> that will be fulfilled when the notification is created and the display process has been started, which is before the notification is actually displayed to the user. It is fulfilled with a string representing the notification's ID.</p> +<p>A <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> that will be fulfilled when the notification is created and the display process has been started, which is before the notification is actually displayed to the user. It is fulfilled with a string representing the notification's ID.</p> <h2 id="ブラウザ互換性">ブラウザ互換性</h2> @@ -46,7 +46,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/notifications/create <p>Create and display a basic notification periodically, using an {{WebExtAPIRef("alarms", "alarm")}}. Clicking the browser action dismisses the notification.</p> -<p>Note that you'll need the "alarms" <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a> to create alarms (as well as the "notifications" permission to create notifications).</p> +<p>Note that you'll need the "alarms" <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a> to create alarms (as well as the "notifications" permission to create notifications).</p> <pre class="brush: js">var cakeNotification = "cake-notification" diff --git a/files/ja/mozilla/add-ons/webextensions/api/pageaction/index.html b/files/ja/mozilla/add-ons/webextensions/api/pageaction/index.html index 9aa608ef46..a6b46c9d88 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/pageaction/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/pageaction/index.html @@ -18,7 +18,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/pageAction <p><img alt="" src="https://mdn.mozillademos.org/files/12960/page-action.png" style="display: block; height: 262px; margin-left: auto; margin-right: auto; width: 850px;"></p> -<p>You can listen for clicks on the icon, or specify a <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Popups">popup</a> that will open when the icon is clicked.</p> +<p>You can listen for clicks on the icon, or specify a <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Popups">popup</a> that will open when the icon is clicked.</p> <p>If you specify a popup, you can define its contents and behavior using HTML, CSS, and JavaScript, just like a normal web page. JavaScript running in the popup gets access to all the same WebExtension APIs as your background scripts.</p> diff --git a/files/ja/mozilla/add-ons/webextensions/api/permissions/index.html b/files/ja/mozilla/add-ons/webextensions/api/permissions/index.html index 34e1e36ae1..468a561d0f 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/permissions/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/permissions/index.html @@ -75,7 +75,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/permissions <h2 id="その他">その他</h2> <ul> - <li><code>manifest.json</code> <code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code> property</li> + <li><code>manifest.json</code> <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code> property</li> <li><code>manifest.json</code> <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/optional_permissions">optional_permissions</a></code> property</li> </ul> diff --git a/files/ja/mozilla/add-ons/webextensions/api/proxy/index.html b/files/ja/mozilla/add-ons/webextensions/api/proxy/index.html index 8b76402361..e85eb9c6fb 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/proxy/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/proxy/index.html @@ -14,7 +14,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/proxy <p>Google Chrome では<a href="https://developer.chrome.com/extensions/proxy"> 同じく"proxy"という拡張機能API</a> が提供されていて、その機能はこの API と似ていて、拡張機能はプロキシポリシーを使うことができます。しかし、Chrome API の設計はこの API とまったく違います。Chrome の API では拡張機能は PAC ファイルを定義できて、明示的なプロキシルールも定義できます。このため拡張機能 PAC ファイルも使用できて、この API は PAC ファイルアプローチのみをサポートします。この API は Chrome <code>proxy</code> API と互換性がないため、この API は <code>browser</code> 名前空間のみで利用できます。</p> -<p>この API を使うには、"proxy" <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">パーミッション</a>が必要です。</p> +<p>この API を使うには、"proxy" <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">パーミッション</a>が必要です。</p> <h2 id="Communicating_with_PAC_files" name="Communicating_with_PAC_files">PAC ファイルと通信する</h2> @@ -53,7 +53,7 @@ browser.runtime.onMessage.addListener((message) => { <h3 id="FindProxyForURL()_return_value" name="FindProxyForURL()_return_value">FindProxyForURL() return value</h3> -<p>The standard <code>FindProxyForURL()</code> <a href="https://developer.mozilla.org/ja/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_%28PAC%29_file#Return_value_format">returns a string</a>. In Firefox 55 and 56, the PAC file used with the proxy API also returns a string. In Firefox 55 <em>only</em>, you must pass an argument to the "DIRECT" return value, even though it doesn't need an argument.</p> +<p>The standard <code>FindProxyForURL()</code> <a href="/ja/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_%28PAC%29_file#Return_value_format">returns a string</a>. In Firefox 55 and 56, the PAC file used with the proxy API also returns a string. In Firefox 55 <em>only</em>, you must pass an argument to the "DIRECT" return value, even though it doesn't need an argument.</p> <p>From Firefox 57 onwards, <code>FindProxyForURL()</code> may still return a string, but may alternatively (and preferably) return an array of objects. Each object has the following properties:</p> diff --git a/files/ja/mozilla/add-ons/webextensions/api/runtime/onmessage/index.html b/files/ja/mozilla/add-ons/webextensions/api/runtime/onmessage/index.html index 86eb8d325d..9bfc19370f 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/runtime/onmessage/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/runtime/onmessage/index.html @@ -39,13 +39,13 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/runtime/onMessage <li><code>sendResponse</code> 関数。送信側への返信を送るために使います。</li> </ul> -<p>メッセージに対して同期的に返信するには、<code>sendResponse</code> 関数をリスナーの中で実行します。<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/API/runtime/onMessage#Sending_a_synchronous_response">例を参照してください</a>。</p> +<p>メッセージに対して同期的に返信するには、<code>sendResponse</code> 関数をリスナーの中で実行します。<a href="/ja/Add-ons/WebExtensions/API/runtime/onMessage#Sending_a_synchronous_response">例を参照してください</a>。</p> <p>非同期的に返信するには、二つの方法があります。</p> <ul> - <li>イベントリスナーから <code>true</code> を返す。こうすることで、リスナーから復帰した後でも <code>sendResponse</code> 関数が有効なままになるため、後で実行することができます。<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/API/runtime/onMessage#Sending_an_asynchronous_response_using_sendResponse">例を参照してください</a>。</li> - <li>イベントリスナーから <code>Promise</code> を返して、返信が準備できた後にそれを解決する (またはエラーの場合は拒否する)。<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/API/runtime/onMessage#Sending_an_asynchronous_response_using_a_Promise">例を参照してください</a>。</li> + <li>イベントリスナーから <code>true</code> を返す。こうすることで、リスナーから復帰した後でも <code>sendResponse</code> 関数が有効なままになるため、後で実行することができます。<a href="/ja/Add-ons/WebExtensions/API/runtime/onMessage#Sending_an_asynchronous_response_using_sendResponse">例を参照してください</a>。</li> + <li>イベントリスナーから <code>Promise</code> を返して、返信が準備できた後にそれを解決する (またはエラーの場合は拒否する)。<a href="/ja/Add-ons/WebExtensions/API/runtime/onMessage#Sending_an_asynchronous_response_using_a_Promise">例を参照してください</a>。</li> </ul> <div class="warning"> @@ -153,7 +153,7 @@ window<span class="punctuation token">.</span><span class="function token">addEv }</span></code> </pre> -<p>バックグラウンドスクリプトはこのメッセージが送信されるまで待ち、<code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/notifications">notifications</a></code> API を使って通知を表示します。</p> +<p>バックグラウンドスクリプトはこのメッセージが送信されるまで待ち、<code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/notifications">notifications</a></code> API を使って通知を表示します。</p> <pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// background-script.js</span> diff --git a/files/ja/mozilla/add-ons/webextensions/api/runtime/openoptionspage/index.html b/files/ja/mozilla/add-ons/webextensions/api/runtime/openoptionspage/index.html index 44965c6f89..a1bab31eb9 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/runtime/openoptionspage/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/runtime/openoptionspage/index.html @@ -19,7 +19,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/runtime/openOptionsPage <div> </div> -<p>これは <code><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返す非同期関数です。</p> +<p>これは <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返す非同期関数です。</p> <h2 id="Syntax" name="Syntax">構文</h2> @@ -32,7 +32,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/runtime/openOptionsPage <h3 id="Return_value" name="Return_value">返り値</h3> -<p>オプションページの作成が成功した時は、引数のない <code><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> で、操作が失敗した場合はエラーメッセージつきの rejected が返ります。</p> +<p>オプションページの作成が成功した時は、引数のない <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> で、操作が失敗した場合はエラーメッセージつきの rejected が返ります。</p> <h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/runtime/sendmessage/index.html b/files/ja/mozilla/add-ons/webextensions/api/runtime/sendmessage/index.html index a358ef3c63..b7e2e90b17 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/runtime/sendmessage/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/runtime/sendmessage/index.html @@ -26,7 +26,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage <ul> </ul> -<p>これは、<code><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返す非同期関数です。</p> +<p>これは、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返す非同期関数です。</p> <div class="blockIndicator note"> <p><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#Connection-based_messaging">コネクションベースのメッセージ</a>を使うこともできます。</p> @@ -45,7 +45,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage <dl> <dt><code>extensionId</code>{{optional_inline}}</dt> - <dd><code>string</code> 型。 メッセージを送信する拡張機能の ID。別の拡張機能にメッセージを送信する場合は、この引数を含めてください。受信させることを意図している拡張機能が manifest.json の <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications">applications</a> キーを使って明示的に ID を設定されている場合は、その値を <code>extensionId</code> に指定する必要があります。そうでない場合、受信側の拡張機能のために生成された ID を指定する必要があります。</dd> + <dd><code>string</code> 型。 メッセージを送信する拡張機能の ID。別の拡張機能にメッセージを送信する場合は、この引数を含めてください。受信させることを意図している拡張機能が manifest.json の <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications">applications</a> キーを使って明示的に ID を設定されている場合は、その値を <code>extensionId</code> に指定する必要があります。そうでない場合、受信側の拡張機能のために生成された ID を指定する必要があります。</dd> <dd>もし <code>extensionId</code> が省略された場合、メッセージは自分自身の拡張機能に送信されます。</dd> <dt><code>message</code></dt> <dd><code>any</code> 型。シリアライズされたクローンに構造化できるオブジェクト。</dd> @@ -83,7 +83,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage <h3 id="戻り値">戻り値</h3> -<p><code><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> 型。受信側が応答を送信する場合、その応答を JSON オブジェクトとして使って fulfilled 状態にされます。それ以外の場合、値を持たない fulfilled 状態になります。拡張機能との接続中にエラーが発生した場合、Promise はエラーメッセージを持つ rejected 状態になります。</p> +<p><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> 型。受信側が応答を送信する場合、その応答を JSON オブジェクトとして使って fulfilled 状態にされます。それ以外の場合、値を持たない fulfilled 状態になります。拡張機能との接続中にエラーが発生した場合、Promise はエラーメッセージを持つ rejected 状態になります。</p> <h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/sessions/index.html b/files/ja/mozilla/add-ons/webextensions/api/sessions/index.html index 870cf96426..8847f8d505 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/sessions/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/sessions/index.html @@ -21,7 +21,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/sessions <p>この API は拡張機能にタブやウィンドウに関連する追加状態の保存させる関数グループも提供します。それで、タブやウィンドウが閉じられて順次復帰された場合、拡張機能は状態を取得できます。例えば、タブをグループ化する拡張機能は、これを使ってタブがどのグループにいるのかを記憶し、ユーザーがタブを復帰した時に正しいグループに復帰できるようになります。</p> -<p>セッション API を使うには "sessions" <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">API パーミッション</a>が必要です。</p> +<p>セッション API を使うには "sessions" <a href="/ja/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">API パーミッション</a>が必要です。</p> <h2 id="Types" name="Types">型</h2> @@ -38,7 +38,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/sessions <dl> <dt>{{WebExtAPIRef("sessions.MAX_SESSION_RESULTS")}}</dt> - <dd><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/sessions/getRecentlyClosed" title="Returns an array Session objects, representing windows and tabs that were closed in the current browsing session (that is: the time since the browser was started)."><code>sessions.getRecentlyClosed()</code></a>の呼び出しで返される最大のセッション数。</dd> + <dd><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/sessions/getRecentlyClosed" title="Returns an array Session objects, representing windows and tabs that were closed in the current browsing session (that is: the time since the browser was started)."><code>sessions.getRecentlyClosed()</code></a>の呼び出しで返される最大のセッション数。</dd> </dl> <h2 id="Functions" name="Functions">関数</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/storage/index.html b/files/ja/mozilla/add-ons/webextensions/api/storage/index.html index 6286012f61..efad165c20 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/storage/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/storage/index.html @@ -25,7 +25,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/storage <li>複数のキー/値ペアーが同じ API 呼び出しで設定、取得できます。</li> </ul> -<p>この API を利用するためには"storage" <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a> を <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> に含める必要があります。</p> +<p>この API を利用するためには"storage" <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a> を <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> に含める必要があります。</p> <p>各々の拡張機能は独自のストレージ領域を持っています。またそれらは異なる型のストレージに分割することができます。</p> diff --git a/files/ja/mozilla/add-ons/webextensions/api/storage/local/index.html b/files/ja/mozilla/add-ons/webextensions/api/storage/local/index.html index e69759effd..9a6b4e5296 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/storage/local/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/storage/local/index.html @@ -10,7 +10,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/storage/local <p>ブラウザーは拡張機能がローカルストレージエリアに保存できるデータ量を制限します。</p> <ul> - <li>Chromeでは、このAPIを使用して、<a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#Unlimited_storage">"unlimitedStorage"</a>パーミッションを許可しない場合は5MBまで保存できます。</li> + <li>Chromeでは、このAPIを使用して、<a href="/ja/Add-ons/WebExtensions/manifest.json/permissions#Unlimited_storage">"unlimitedStorage"</a>パーミッションを許可しない場合は5MBまで保存できます。</li> <li>Firefox ではバージョン56以降で"unlimitedStorage"パーミッションを利用できます。保存できるデータ量は現在では制限していませんが、将来的には制限するため、もし大きなデータ量を保存するのであれば"unlimitedStorage"パーミッションを今から使用するとよいでしょう。</li> </ul> diff --git a/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/clear/index.html b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/clear/index.html index b8dc2aec62..02c2c3f04c 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/clear/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/clear/index.html @@ -18,7 +18,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/clear <p>全てのアイテムをストレージ領域から削除します。</p> -<p>この関数は <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返す非同期関数です。</p> +<p>この関数は <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返す非同期関数です。</p> <h2 id="構文">構文</h2> @@ -33,7 +33,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/clear <h3 id="返り値">返り値</h3> -<p>成功時は引数の無い <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返します。 失敗した場合 promise はエラーメッセージと共にリジェクトされます。</p> +<p>成功時は引数の無い <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返します。 失敗した場合 promise はエラーメッセージと共にリジェクトされます。</p> <h2 id="ブラウザ互換性">ブラウザ互換性</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.html b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.html index d5ea70153c..c2f145525e 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.html @@ -18,7 +18,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/get <p>ストレージ領域から1つ以上のアイテムを取得します。</p> -<p>この関数は <code style="font-size: 16px !important; line-height: 24px !important;"><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise" style="font-size: 16px !important; line-height: 24px !important;">Promise</a></code> を返す非同期関数です。</p> +<p>この関数は <code style="font-size: 16px !important; line-height: 24px !important;"><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise" style="font-size: 16px !important; line-height: 24px !important;">Promise</a></code> を返す非同期関数です。</p> <h2 id="構文">構文</h2> @@ -27,7 +27,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/get ) </pre> -<p><code style="font-size: 16px !important; line-height: 24px !important;"><storageType></code> は <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/storage/sync" style="font-size: 16px !important; line-height: 24px !important;" title="sync ストレージ領域を指します。 sync ストレージ内のアイテムはブラウザーによって同期され、ログイン(Firefox sync や Google アカウントなど)しているブラウザー・デバイスの全てのインスタンスで利用できます。"><code style="font-size: 16px !important; line-height: 24px !important;">storage.sync</code></a> または <a class="new" href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/storage/local" rel="nofollow" style="font-size: 16px !important; line-height: 24px !important;" title="この項目についての文書はまだ書かれていません。書いてみませんか？"><code style="font-size: 16px !important; line-height: 24px !important;">storage.local</code></a> の書き込み可能なストレージタイプです。</p> +<p><code style="font-size: 16px !important; line-height: 24px !important;"><storageType></code> は <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/storage/sync" style="font-size: 16px !important; line-height: 24px !important;" title="sync ストレージ領域を指します。 sync ストレージ内のアイテムはブラウザーによって同期され、ログイン(Firefox sync や Google アカウントなど)しているブラウザー・デバイスの全てのインスタンスで利用できます。"><code style="font-size: 16px !important; line-height: 24px !important;">storage.sync</code></a> または <a class="new" href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/storage/local" rel="nofollow" style="font-size: 16px !important; line-height: 24px !important;" title="この項目についての文書はまだ書かれていません。書いてみませんか？"><code style="font-size: 16px !important; line-height: 24px !important;">storage.local</code></a> の書き込み可能なストレージタイプです。</p> <h3 id="引数">引数</h3> @@ -38,7 +38,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/get <h3 id="返り値">返り値</h3> -<p>成功時は <code style="font-size: 16px !important; line-height: 24px !important;">keys</code> で指定されたストレージ領域内のアイテム全てを含む <code style="font-size: 16px !important; line-height: 24px !important;">results</code> オブジェクトを引数に持つ <code style="font-size: 16px !important; line-height: 24px !important;"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" style="font-size: 16px !important; line-height: 24px !important;">Promise</a></code> を返します。 失敗した場合 promise はエラーメッセージと共にリジェクトされます。</p> +<p>成功時は <code style="font-size: 16px !important; line-height: 24px !important;">keys</code> で指定されたストレージ領域内のアイテム全てを含む <code style="font-size: 16px !important; line-height: 24px !important;">results</code> オブジェクトを引数に持つ <code style="font-size: 16px !important; line-height: 24px !important;"><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise" style="font-size: 16px !important; line-height: 24px !important;">Promise</a></code> を返します。 失敗した場合 promise はエラーメッセージと共にリジェクトされます。</p> <div class="warning"> <p>52 より前の Firefox バージョンのコンテンツスクリプトで使用する場合、 <code>browser.storage.local.get()</code> で返される Promise は1つのオブジェクトを持つ配列を引数に持ちます。配列内のオブジェクトは上記に記述したようにストレージ領域内の <code>keys</code> を持っています。 The Promise is correctly fulfilled with an Object when used in the background context (background scripts, popups, options pages, etc.). When this API is used as <code>chrome.storage.local.get()</code>, it correctly passes an Object to the callback function.</p> diff --git a/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/getbytesinuse/index.html b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/getbytesinuse/index.html index ae2de4bb9e..e413f19381 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/getbytesinuse/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/getbytesinuse/index.html @@ -17,7 +17,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/getBytesIn <p>1つ以上のストレージ領域内に格納されたアイテムが占めるストレージ空間をバイト単位で取得します。</p> -<p>この関数は <code><a href="/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返す非同期関数です。</p> +<p>この関数は <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返す非同期関数です。</p> <h2 id="構文">構文</h2> @@ -37,7 +37,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/getBytesIn <h3 id="返り値">返り値</h3> -<p>成功時は <code>keys</code> で指定されたオブジェクトが占めるストレージ空間を持つ整数 <code>bytesUsed</code> を引数に持つ <code><a href="/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返します。失敗した場合 Promise はエラーメッセージと共にリジェクトされます。</p> +<p>成功時は <code>keys</code> で指定されたオブジェクトが占めるストレージ空間を持つ整数 <code>bytesUsed</code> を引数に持つ <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返します。失敗した場合 Promise はエラーメッセージと共にリジェクトされます。</p> <h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/remove/index.html b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/remove/index.html index daba7224fb..2afc7c02c3 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/remove/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/remove/index.html @@ -38,7 +38,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/remove <h3 id="返り値">返り値</h3> -<p>成功時は引数の無い <code style="font-size: 16px !important; line-height: 24px !important;"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" style="font-size: 16px !important; line-height: 24px !important;">Promise</a></code> を返します。 失敗した場合 promise はエラーメッセージと共にリジェクトされます。</p> +<p>成功時は引数の無い <code style="font-size: 16px !important; line-height: 24px !important;"><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise" style="font-size: 16px !important; line-height: 24px !important;">Promise</a></code> を返します。 失敗した場合 promise はエラーメッセージと共にリジェクトされます。</p> <h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.html b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.html index 6860bc9c19..609fee944a 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.html @@ -20,7 +20,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/set <p>この API を使用して保存や上書きをする場合、{{WebExtAPIRef("storage.onChanged")}} イベントが発火します。</p> -<p>この関数は <code style="font-size: 16px !important; line-height: 24px !important;"><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise" style="font-size: 16px !important; line-height: 24px !important;">Promise</a></code> を返す非同期関数です。</p> +<p>この関数は <code style="font-size: 16px !important; line-height: 24px !important;"><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise" style="font-size: 16px !important; line-height: 24px !important;">Promise</a></code> を返す非同期関数です。</p> <h2 id="構文">構文</h2> @@ -29,7 +29,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/set ) </pre> -<p><code style="font-size: 16px !important; line-height: 24px !important;"><storageType></code> は <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/storage/sync" style="font-size: 16px !important; line-height: 24px !important;" title="sync ストレージ領域を指します。 sync ストレージ内のアイテムはブラウザーによって同期され、ログイン(Firefox sync や Google アカウントなど)しているブラウザー・デバイスの全てのインスタンスで利用できます。"><code style="font-size: 16px !important; line-height: 24px !important;">storage.sync</code></a> または <a class="new" href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/storage/local" rel="nofollow" style="font-size: 16px !important; line-height: 24px !important;" title="この項目についての文書はまだ書かれていません。書いてみませんか？"><code style="font-size: 16px !important; line-height: 24px !important;">storage.local</code></a> の書き込み可能なストレージタイプです。</p> +<p><code style="font-size: 16px !important; line-height: 24px !important;"><storageType></code> は <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/storage/sync" style="font-size: 16px !important; line-height: 24px !important;" title="sync ストレージ領域を指します。 sync ストレージ内のアイテムはブラウザーによって同期され、ログイン(Firefox sync や Google アカウントなど)しているブラウザー・デバイスの全てのインスタンスで利用できます。"><code style="font-size: 16px !important; line-height: 24px !important;">storage.sync</code></a> または <a class="new" href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/storage/local" rel="nofollow" style="font-size: 16px !important; line-height: 24px !important;" title="この項目についての文書はまだ書かれていません。書いてみませんか？"><code style="font-size: 16px !important; line-height: 24px !important;">storage.local</code></a> の書き込み可能なストレージタイプです。</p> <h3 id="Parameters">Parameters</h3> @@ -46,7 +46,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/set <h3 id="返り値">返り値</h3> -<p>成功時は引数の無い <code style="font-size: 16px !important; line-height: 24px !important;"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" style="font-size: 16px !important; line-height: 24px !important;">Promise</a></code> を返します。 失敗した場合 promise はエラーメッセージと共にリジェクトされます。</p> +<p>成功時は引数の無い <code style="font-size: 16px !important; line-height: 24px !important;"><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise" style="font-size: 16px !important; line-height: 24px !important;">Promise</a></code> を返します。 失敗した場合 promise はエラーメッセージと共にリジェクトされます。</p> <h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/storage/sync/index.html b/files/ja/mozilla/add-ons/webextensions/api/storage/sync/index.html index 132df88fae..11e5d90578 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/storage/sync/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/storage/sync/index.html @@ -19,7 +19,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/storage/sync <p>Firefox の場合、ユーザーは <code>"about:preferences"</code> の "Sync 設定" オプションの下にある "アドオン" ボックスにチェックを入れる必要があります。</p> -<p><code>storage.sync</code> の実装はアドオン ID に依存していることに注意してください。もし <code>storage.sync</code> を使うのであれば、 <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings">browser_specific_settings</a></code> manifest.json キーを使用して拡張機能に ID を設定する必要があります。</p> +<p><code>storage.sync</code> の実装はアドオン ID に依存していることに注意してください。もし <code>storage.sync</code> を使うのであれば、 <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings">browser_specific_settings</a></code> manifest.json キーを使用して拡張機能に ID を設定する必要があります。</p> <p>この API の主な利用例は拡張機能の設定を格納し、異なるプロファイル間で同期させることです。この API は最大100 KB までデータを格納できます。それ以上格納しようとするとエラーメッセージを返して失敗します。 この API は稼働時間やパフォーマンスを保証しません。</p> diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/capturevisibletab/index.html b/files/ja/mozilla/add-ons/webextensions/api/tabs/capturevisibletab/index.html index 65a036c403..2e527139da 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/tabs/capturevisibletab/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/capturevisibletab/index.html @@ -17,7 +17,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/captureVisibleTab <p>指定ウィンドウの選択タブの表示領域の画像をエンコードしたデータ URI を作成します。このメソッドを使うには <code><all_urls></code> <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">パーミッション</a> が必要です (Chrome の場合、<code>activeTab</code> <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">パーミッション</a> があり、ユーザーが許可の操作を行えば、このメソッドを使うことができます)。</p> -<p>これは、<code><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返す非同期関数です。</p> +<p>これは、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返す非同期関数です。</p> <h2 id="Syntax" name="Syntax">構文</h2> @@ -38,7 +38,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/captureVisibleTab <h3 id="Return_value" name="Return_value">戻り値</h3> -<p><code><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> であり、キャプチャーされたタブの表示領域の画像をエンコードしたデータ URL で fulfilled 状態にされる。このデータ URL は、HTML イメージ要素の 'src' 属性に設定することで、画像を表示できる。もし何らかのエラーが発生した場合、Promise はエラーメッセージによって rejected 状態にされる。</p> +<p><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> であり、キャプチャーされたタブの表示領域の画像をエンコードしたデータ URL で fulfilled 状態にされる。このデータ URL は、HTML イメージ要素の 'src' 属性に設定することで、画像を表示できる。もし何らかのエラーが発生した場合、Promise はエラーメッセージによって rejected 状態にされる。</p> <h2 id="Examples" name="Examples">使用例</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/create/index.html b/files/ja/mozilla/add-ons/webextensions/api/tabs/create/index.html index b3142538db..cf41c2b6dd 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/tabs/create/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/create/index.html @@ -7,7 +7,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/create <p>新しいタブを作ります。</p> -<p>これは<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>を返す非同期関数です.</p> +<p>これは<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>を返す非同期関数です.</p> <h2 id="構文">構文</h2> @@ -26,13 +26,13 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/create <dt><code>active</code>{{optional_inline}}</dt> <dd>タブをアクティブにするかどうかを<code>真理値</code>で指定します。ウィンドウがフォーカスされているかには影響されません({{WebExtAPIRef('windows.update')}}も参照)。デフォルト値は<code>true</code>.</dd> <dt><code>cookieStoreId</code> {{optional_inline}}</dt> - <dd><code>文字列</code> 。タブのcookie store IDが<code>cookieStoreId</code>のタブを作るときに使用します。このオプションは拡張機能が<code>"cookies"</code> <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a>を持つときのみ使用できます。</dd> + <dd><code>文字列</code> 。タブのcookie store IDが<code>cookieStoreId</code>のタブを作るときに使用します。このオプションは拡張機能が<code>"cookies"</code> <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a>を持つときのみ使用できます。</dd> <dt><code>index</code>{{optional_inline}}</dt> <dd><code>整数値</code>。ウィンドウ中のタブの位置を指定します。数値はゼロからウィンドウ内のタブの数までです。</dd> <dt><code>openerTabId</code>{{optional_inline}}</dt> <dd><code>整数値</code>。開くタブのIDを指定します。指定した場合、開く側のタブは新しいタブと同じウィンドウにある必要があります。</dd> <dt><code>openInReaderMode</code>{{optional_inline}}</dt> - <dd><code>真理値</code>。もし<code>true</code>であれば<a href="/en-US/Add-ons/WebExtensions/API/tabs/toggleReaderMode">リーダーモード</a>で開かれます。 デフォルトは<code>false</code>。</dd> + <dd><code>真理値</code>。もし<code>true</code>であれば<a href="/ja/Add-ons/WebExtensions/API/tabs/toggleReaderMode">リーダーモード</a>で開かれます。 デフォルトは<code>false</code>。</dd> <dt><code>pinned</code>{{optional_inline}}</dt> <dd><code>真理値</code>。タブをピン留めするかを指定します。デフォルトは<code>false</code>。</dd> <dt><code>selected</code>{{optional_inline}}</dt> @@ -63,7 +63,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/create <h3 id="返り値">返り値</h3> -<p>新しく作ったタブに関する{{WebExtAPIRef('tabs.Tab')}}オブジェクトを引数に持つ<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>が返されます。URLが特権URLであるなどして、タブが作られなかった場合はpromiseはエラーメッセージとともにrejectされます。</p> +<p>新しく作ったタブに関する{{WebExtAPIRef('tabs.Tab')}}オブジェクトを引数に持つ<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>が返されます。URLが特権URLであるなどして、タブが作られなかった場合はpromiseはエラーメッセージとともにrejectされます。</p> <h2 id="ブラウザー互換状況">ブラウザー互換状況</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/duplicate/index.html b/files/ja/mozilla/add-ons/webextensions/api/tabs/duplicate/index.html index c48c12ae03..a4ef65c343 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/tabs/duplicate/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/duplicate/index.html @@ -7,7 +7,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/duplicate <p>ID で指定されたタブを複製します。</p> -<p>この関数は <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返す非同期関数です。</p> +<p>この関数は <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返す非同期関数です。</p> <h2 id="構文">構文</h2> @@ -25,7 +25,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/duplicate <h3 id="戻り値">戻り値</h3> -<p>A <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> that will be fulfilled with a {{WebExtAPIRef('tabs.Tab')}} object containing details about the duplicated tab. The <code>Tab</code> object only contains <code>url</code>, <code>title</code> and <code>favIconUrl</code> if the extension has the <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions"><code>"tabs"</code> permission</a>. If any error occurs the promise will be rejected with an error message.</p> +<p>A <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> that will be fulfilled with a {{WebExtAPIRef('tabs.Tab')}} object containing details about the duplicated tab. The <code>Tab</code> object only contains <code>url</code>, <code>title</code> and <code>favIconUrl</code> if the extension has the <a href="/ja/Add-ons/WebExtensions/manifest.json/permissions"><code>"tabs"</code> permission</a>. If any error occurs the promise will be rejected with an error message.</p> <h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/executescript/index.html b/files/ja/mozilla/add-ons/webextensions/api/tabs/executescript/index.html index 82e1ee1686..124d7235a2 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/tabs/executescript/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/executescript/index.html @@ -17,7 +17,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/executeScript <p>JavaScript のコードをページに挿入します。</p> -<p>コードを挿入できるページの URL は、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">マッチパターン</a> により指定できます。 つまり、URL の scheme 部は、"http", "https", "file", "ftp" のいずれかでなければなりません。そして、その URL に対する明示的な <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">host パーミッション</a>、または <a href="/ja/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission">activeTab パーミッション</a>が必要です。</p> +<p>コードを挿入できるページの URL は、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">マッチパターン</a> により指定できます。 つまり、URL の scheme 部は、"http", "https", "file", "ftp" のいずれかでなければなりません。そして、その URL に対する明示的な <a href="/ja/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">host パーミッション</a>、または <a href="/ja/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission">activeTab パーミッション</a>が必要です。</p> <p>また、自らの拡張機能パッケージに含まれるページに対してであれば、次の方法でコードを挿入することも可能です。</p> @@ -33,7 +33,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/executeScript <p>挿入するスクリプトのことを、コンテンツスクリプトと呼びます。詳細は <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">コンテンツスクリプト</a> で学んでください。</p> -<p>これは、<code><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返す非同期関数です。</p> +<p>これは、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返す非同期関数です。</p> <h2 id="構文">構文</h2> @@ -70,13 +70,13 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/executeScript <h3 id="戻り値">戻り値</h3> -<p>オブジェクト配列を使って fulfilled 状態にされる <code><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> です。それぞれのオブジェクトは、フレームに挿入されたスクリプトの結果を表します。</p> +<p>オブジェクト配列を使って fulfilled 状態にされる <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> です。それぞれのオブジェクトは、フレームに挿入されたスクリプトの結果を表します。</p> <p>スクリプトの結果とは最後に評価された文のことです。これは、<a href="/ja/docs/Tools/Web_Console">Webコンソール</a>で実行されたスクリプトの出力 (結果であって、<code>console.log()</code> の出力のことではありません) に似ています。例えば、次のようなスクリプトを挿入したとします。</p> <pre class="brush: js">var foo='my result';foo;</pre> -<p>この場合、結果配列には、文字列 "<code>my result</code>" が含まれます。結果は、<a href="/ja/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">structured clone</a> が可能でなければなりません。最後の文を <code><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> にすることもできますが、<a href="https://github.com/mozilla/webextension-polyfill#tabsexecutescript">webextension-polyfill</a> ライブラリではサポートされていません。</p> +<p>この場合、結果配列には、文字列 "<code>my result</code>" が含まれます。結果は、<a href="/ja/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">structured clone</a> が可能でなければなりません。最後の文を <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> にすることもできますが、<a href="https://github.com/mozilla/webextension-polyfill#tabsexecutescript">webextension-polyfill</a> ライブラリではサポートされていません。</p> <p>エラーが発生した場合、Promise はエラーメッセージを使って rejected 状態にされます。</p> diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/get/index.html b/files/ja/mozilla/add-ons/webextensions/api/tabs/get/index.html index 767b11173d..06df254c61 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/tabs/get/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/get/index.html @@ -7,7 +7,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/get <p>タブのIDを指定し、{{WebExtAPIRef("tabs.Tab")}}オブジェクトとしてタブの詳細を取得します。</p> -<p>これは<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>を返す非同期関数です。</p> +<p>これは<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>を返す非同期関数です。</p> <h2 id="Syntax">Syntax</h2> @@ -25,7 +25,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/get <h3 id="Return_value">Return value</h3> -<p>A <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> that will be fulfilled with a {{WebExtAPIRef('tabs.Tab')}} object containing information about the tab. If the tab could not be found or some other error occurs, the promise will be rejected with an error message.</p> +<p>A <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> that will be fulfilled with a {{WebExtAPIRef('tabs.Tab')}} object containing information about the tab. If the tab could not be found or some other error occurs, the promise will be rejected with an error message.</p> <h2 id="Examples">Examples</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/index.html b/files/ja/mozilla/add-ons/webextensions/api/tabs/index.html index 40f6ced315..692fccb284 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/tabs/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/index.html @@ -22,7 +22,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs <p>この API の大半の使用に特別なパーミッションは要りませんが:</p> <ul> - <li><code>Tab.url</code> <code>Tab.title</code> <code>Tab.favIconUrl</code>, のアクセスには "tabs" <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">パーミッション</a>が必要です。また Firefox では URL による{{WebExtAPIRef("tabs.query", "問い合わせ")}}をするのにも "tabs" が必要です。</li> + <li><code>Tab.url</code> <code>Tab.title</code> <code>Tab.favIconUrl</code>, のアクセスには "tabs" <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">パーミッション</a>が必要です。また Firefox では URL による{{WebExtAPIRef("tabs.query", "問い合わせ")}}をするのにも "tabs" が必要です。</li> <li>{{WebExtAPIRef("tabs.executeScript()")}} や {{WebExtAPIRef("tabs.insertCSS()")}} を使うには、そのタブの <a href="/ja/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">host パーミッション</a>が必要です。</li> </ul> @@ -39,7 +39,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs <dd>タブがミュートされているかを示す真理値と、最後の変更の理由からなるオブジェクト。</dd> <dt>{{WebExtAPIRef("tabs.PageSettings")}}</dt> <dd> - <p><a href="https://developer.mozilla.org/ja/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>メソッドにおいて、どのように PDF を描画するかを制御する。</p> + <p><a href="/ja/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>メソッドにおいて、どのように PDF を描画するかを制御する。</p> </dd> <dt>{{WebExtAPIRef("tabs.Tab")}}</dt> <dd>タブについての情報を含む。</dd> @@ -70,7 +70,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs <dt>{{WebExtAPIRef("tabs.captureVisibleTab()")}}</dt> <dd>特定のウィンドウのアクティブなタブの可視エリアの画像をエンコードしたデータURI を作成します。</dd> <dt>{{WebExtAPIRef("tabs.connect()")}}</dt> - <dd>あるタブにおいて、バックグラウンドスクリプト（またはその他ポップアップやオプションページのスクリプトなど特権スクリプト）と <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> 間でのメッセージのやり取り用の経路を確保します。</dd> + <dd>あるタブにおいて、バックグラウンドスクリプト（またはその他ポップアップやオプションページのスクリプトなど特権スクリプト）と <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> 間でのメッセージのやり取り用の経路を確保します。</dd> <dt>{{WebExtAPIRef("tabs.create()")}}</dt> <dd>新しいタブを作る。</dd> <dt>{{WebExtAPIRef("tabs.detectLanguage()")}}</dt> @@ -86,7 +86,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs <dt>{{WebExtAPIRef("tabs.getAllInWindow()")}} {{deprecated_inline}}</dt> <dd>特定のウィンドウ内のすべてのタブについての情報を取り出す。</dd> <dt>{{WebExtAPIRef("tabs.getCurrent()")}}</dt> - <dd>スクリプトが実行されているタブについての情報を <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/Tabs/Tab" title="This type contains information about a tab."><code>tabs.Tab</code></a> オブジェクトとして取り出す。</dd> + <dd>スクリプトが実行されているタブについての情報を <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/Tabs/Tab" title="This type contains information about a tab."><code>tabs.Tab</code></a> オブジェクトとして取り出す。</dd> <dt>{{WebExtAPIRef("tabs.getSelected()")}} {{deprecated_inline}}</dt> <dd>あるウィンドウにおいてタブが選択されているかを得る。</dd> <dt>{{WebExtAPIRef("tabs.getZoom()")}}</dt> diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/remove/index.html b/files/ja/mozilla/add-ons/webextensions/api/tabs/remove/index.html index d7ee4d96b9..fdd18cf97a 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/tabs/remove/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/remove/index.html @@ -7,7 +7,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/remove <p>１つ以上のタブを閉じます。</p> -<p>この関数は <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返す非同期関数です。</p> +<p>この関数は <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返す非同期関数です。</p> <h2 id="構文">構文</h2> @@ -25,7 +25,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/remove <h3 id="戻り値">戻り値</h3> -<p>A <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> that will be fulfilled with no arguments when all the specified tabs have been removed or their <code>beforeunload</code> prompts have been handled. If any error occurs, the promise will be rejected with an error message.</p> +<p>A <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> that will be fulfilled with no arguments when all the specified tabs have been removed or their <code>beforeunload</code> prompts have been handled. If any error occurs, the promise will be rejected with an error message.</p> <h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/tab/index.html b/files/ja/mozilla/add-ons/webextensions/api/tabs/tab/index.html index 31ee57d609..3e291f4cb6 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/tabs/tab/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/tab/index.html @@ -25,11 +25,11 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/Tab <dt><code>autoDiscardable</code> {{optional_inline}}</dt> <dd><code>boolean</code>. Whether the tab can be discarded automatically by the browser when resources are low.</dd> <dt><code>cookieStoreId</code> {{optional_inline}}</dt> - <dd><code>string</code>. タブのクッキーストア。If different tabs can have different cookie stores (for example, to support <a href="https://wiki.mozilla.org/Security/Contextual_Identity_Project/Containers">contextual identity</a>), you can pass this as the <code>storeId</code> option into various methods of the {{WebExtAPIRef("cookies")}} API, to set and get cookies associated with this tab's cookie store. Only present if the extension has the <code>"cookies"</code> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a>.</dd> + <dd><code>string</code>. タブのクッキーストア。If different tabs can have different cookie stores (for example, to support <a href="https://wiki.mozilla.org/Security/Contextual_Identity_Project/Containers">contextual identity</a>), you can pass this as the <code>storeId</code> option into various methods of the {{WebExtAPIRef("cookies")}} API, to set and get cookies associated with this tab's cookie store. Only present if the extension has the <code>"cookies"</code> <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a>.</dd> <dt><code>discarded</code> {{optional_inline}}</dt> <dd><code>boolean</code>. タブが破棄されたか。 A discarded tab is one whose content has been unloaded from memory, but is still visible in the tab strip. Its content gets reloaded the next time it's activated.</dd> <dt><code>favIconUrl</code> {{optional_inline}}</dt> - <dd><code>string</code>. タブのfaviconのURL。Only present if the extension has the <code>"tabs"</code> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a>. It may also be an empty string if the tab is loading.</dd> + <dd><code>string</code>. タブのfaviconのURL。Only present if the extension has the <code>"tabs"</code> <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a>. It may also be an empty string if the tab is loading.</dd> <dt><code>height</code> {{optional_inline}}</dt> <dd><code>integer</code>. タブの高さのピクセル値。</dd> <dt><code>hidden</code></dt> @@ -47,9 +47,9 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/Tab <dt><code>index</code></dt> <dd><code>integer</code>. 0を底としたウィンドウの中のタブのインデックス。</dd> <dt><code>isArticle</code></dt> - <dd><code>boolean</code>. Trueなら<a href="/en-US/Add-ons/WebExtensions/API/tabs/toggleReaderMode">rendered in Reader Mode</a>で閲覧可能、falseならそれ以外。</dd> + <dd><code>boolean</code>. Trueなら<a href="/ja/Add-ons/WebExtensions/API/tabs/toggleReaderMode">rendered in Reader Mode</a>で閲覧可能、falseならそれ以外。</dd> <dt><code>isInReaderMode</code></dt> - <dd><code>boolean</code>. Trueなら<a href="/en-US/Add-ons/WebExtensions/API/tabs/toggleReaderMode">rendered in Reader Mode</a>で閲覧中、falseならそれ以外。</dd> + <dd><code>boolean</code>. Trueなら<a href="/ja/Add-ons/WebExtensions/API/tabs/toggleReaderMode">rendered in Reader Mode</a>で閲覧中、falseならそれ以外。</dd> <dt><code>lastAccessed</code></dt> <dd><code>double</code>. タブが最後にアクセスされた時刻(単位: <a class="external external-icon" href="https://en.wikipedia.org/wiki/Unix_time">milliseconds since the epoch</a>)。</dd> <dt><code>mutedInfo</code> {{optional_inline}}</dt> @@ -67,9 +67,9 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/Tab <dt><code>successorId</code> {{optional_inline}}</dt> <dd><code>integer</code> タブの後継者のID。</dd> <dt><code>title</code> {{optional_inline}}</dt> - <dd><code>string</code>. タブのタイトル。Only present if the extension has the <code>"tabs"</code> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a>.</dd> + <dd><code>string</code>. タブのタイトル。Only present if the extension has the <code>"tabs"</code> <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a>.</dd> <dt><code>url</code> {{optional_inline}}</dt> - <dd><code>string</code>. タブが表示しているドキュメントのURL。Only present if the extension has the <code>"tabs"</code> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a>.</dd> + <dd><code>string</code>. タブが表示しているドキュメントのURL。Only present if the extension has the <code>"tabs"</code> <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a>.</dd> <dt><code>width</code> {{optional_inline}}</dt> <dd><code>integer</code>. タブの横幅のピクセル値。</dd> <dt><code>windowId</code></dt> diff --git a/files/ja/mozilla/add-ons/webextensions/api/topsites/index.html b/files/ja/mozilla/add-ons/webextensions/api/topsites/index.html index 5ee5e4386f..8bcb06823c 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/topsites/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/topsites/index.html @@ -18,7 +18,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/topSites <p>ブラウザーはユーザーがこれらの場所に簡単に戻れるようにこれを維持します。Firefoxでは既定で「新しいタブ」ページには最もよく訪れるページのリストが提供されます。</p> -<p>topSites API を使うには "topSites" の <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">API パーミッション</a>必要です。</p> +<p>topSites API を使うには "topSites" の <a href="/ja/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">API パーミッション</a>必要です。</p> <h2 id="Types" name="Types">型</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/api/webnavigation/index.html b/files/ja/mozilla/add-ons/webextensions/api/webnavigation/index.html index 4edae83299..55b9900953 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/webnavigation/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/webnavigation/index.html @@ -47,7 +47,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/webNavigation <p><code>onCommitted</code> イベントリスナーには 2 つの追加プロパティが渡されます: ナビゲーションの原因 (例えばユーザーがリンクをクリックしたり、ユーザーがブックマークを選んだり) を示す{{WebExtAPIRef("webNavigation.TransitionType","TransitionType")}} と、ナビゲーションの詳細情報を提供する{{WebExtAPIRef("webNavigation.TransitionQualifier","TransitionQualifier")}} です。</p> -<p>この API を使うには"webNavigation" <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">パーミッション</a>が必要です。</p> +<p>この API を使うには"webNavigation" <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">パーミッション</a>が必要です。</p> <h2 id="Types" name="Types">型</h2> @@ -64,7 +64,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/webNavigation <dl> <dt>{{WebExtAPIRef("webNavigation.getFrame()")}}</dt> - <dd>特定フレームについての情報を取得します。フレームにはタブ内のトップレベルのフレームや、ネストされた <a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/iframe">iframe</a> であり、タブ ID とフレーム ID でユニークに識別されます。</dd> + <dd>特定フレームについての情報を取得します。フレームにはタブ内のトップレベルのフレームや、ネストされた <a href="/ja/docs/Web/HTML/Element/iframe">iframe</a> であり、タブ ID とフレーム ID でユニークに識別されます。</dd> <dt>{{WebExtAPIRef("webNavigation.getAllFrames()")}}</dt> <dd> <p>タブ ID を指定すると、そのタブに含まれているすべてのフレームの情報を取得します。</p> @@ -81,9 +81,9 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/webNavigation <dt>{{WebExtAPIRef("webNavigation.onCommitted")}}</dt> <dd>ナビゲーションがコミットされたときに発火します。少なくともサーバーから新しい document がいくらか取得されてブラウザーが新document に切り替えると決決めたとき。</dd> <dt>{{WebExtAPIRef("webNavigation.onDOMContentLoaded")}}</dt> - <dd>ページ内で <a href="https://developer.mozilla.org/ja/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a> イベントが発火したときに発火します。</dd> + <dd>ページ内で <a href="/ja/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a> イベントが発火したときに発火します。</dd> <dt>{{WebExtAPIRef("webNavigation.onCompleted")}}</dt> - <dd>document と、それが参照するリソースが完全にロードされて初期化されたときに発火します。これは DOM <code><a href="https://developer.mozilla.org/ja/docs/Web/Events/load">load</a></code> イベントと等価です。</dd> + <dd>document と、それが参照するリソースが完全にロードされて初期化されたときに発火します。これは DOM <code><a href="/ja/docs/Web/Events/load">load</a></code> イベントと等価です。</dd> <dt>{{WebExtAPIRef("webNavigation.onErrorOccurred")}}</dt> <dd>エラーが起こってナビゲーションが停止したときに発火します。これはネットワークエラーが起きたときや、ユーザーがナビゲーションを停止したときのいずれかで起こりえます。</dd> <dt>{{WebExtAPIRef("webNavigation.onCreatedNavigationTarget")}}</dt> diff --git a/files/ja/mozilla/add-ons/webextensions/api/webrequest/index.html b/files/ja/mozilla/add-ons/webextensions/api/webrequest/index.html index fba97e5f22..3cb7806512 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/webrequest/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/webrequest/index.html @@ -116,7 +116,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/webRequest <dl> <dt>{{WebExtAPIRef("webRequest.MAX_HANDLER_BEHAVIOR_CHANGED_CALLS_PER_10_MINUTES")}}</dt> - <dd>10分間に <code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/WebRequest/handlerBehaviorChanged" title="Suppose an add-on's job is to block web requests against a pattern, and the following scenario happens:"><code>handlerBehaviorChanged()</code></a></code> を最大限呼べる回数。</dd> + <dd>10分間に <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/WebRequest/handlerBehaviorChanged" title="Suppose an add-on's job is to block web requests against a pattern, and the following scenario happens:"><code>handlerBehaviorChanged()</code></a></code> を最大限呼べる回数。</dd> </dl> <h2 id="Methods" name="Methods">メソッド</h2> @@ -157,7 +157,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/webRequest <p>{{Compat("webextensions.api.webRequest")}}</p> -<p><a href="/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities#webRequest_incompatibilities">Extra notes on Chrome incompatibilities</a>.</p> +<p><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities#webRequest_incompatibilities">Extra notes on Chrome incompatibilities</a>.</p> <p>{{WebExtExamples("h2")}}</p> diff --git a/files/ja/mozilla/add-ons/webextensions/api/windows/windowstate/index.html b/files/ja/mozilla/add-ons/webextensions/api/windows/windowstate/index.html index a60ce41391..1710048cea 100644 --- a/files/ja/mozilla/add-ons/webextensions/api/windows/windowstate/index.html +++ b/files/ja/mozilla/add-ons/webextensions/api/windows/windowstate/index.html @@ -19,7 +19,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/windows/WindowState <dt><code>"maximized"</code></dt> <dd>ウィンドウはシステムエリアやOSによる予約なしに画面を満たしている(最大化)。</dd> <dt><code>"fullscreen"</code></dt> - <dd>ウィンドウはフルスクリーンアプリケーションとして稼働しているか、タブの内容が<a href="/en-US/docs/Web/API/Fullscreen_API">Fullscreen API</a>を利用している(全画面)。</dd> + <dd>ウィンドウはフルスクリーンアプリケーションとして稼働しているか、タブの内容が<a href="/ja/docs/Web/API/Fullscreen_API">Fullscreen API</a>を利用している(全画面)。</dd> <dt><code>"docked"</code></dt> <dd>A docked window occupies a fixed position relative to other windows owned by the same application.</dd> </dl> diff --git a/files/ja/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html b/files/ja/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html index 4cff21e91d..cb8ee5e3ab 100644 --- a/files/ja/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html +++ b/files/ja/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html @@ -39,7 +39,7 @@ chrome<span class="punctuation token">.</span>cookies<span class="punctuation to logCookie <span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> -<p>同様の WebExtensions API では<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise"> promises</a> を利用します:</p> +<p>同様の WebExtensions API では<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise"> promises</a> を利用します:</p> <pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logCookie</span><span class="punctuation token">(</span>c<span class="punctuation token">)</span> <span class="punctuation token">{</span> console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>c<span class="punctuation token">)</span><span class="punctuation token">;</span> @@ -62,27 +62,27 @@ setCookie<span class="punctuation token">.</span><span class="function token">th <h3 id="Partially_supported_APIs" name="Partially_supported_APIs"><span class="short_text" id="result_box" lang="ja"><span>部分的にサポートされている API</span></span></h3> -<p><span id="result_box" lang="ja"><span><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">ブラウザーの JavaScript API サポート</a>のページには、Firefox でサポートされているすべての API の互換性テーブルが含まれています。</span><span>特定の API アイテムのサポートに関する警告がある場合は、これらのテーブルにアスタリスク "*" が表示され、API アイテムのリファレンスページにその警告が説明されています。</span></span></p> +<p><span id="result_box" lang="ja"><span><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">ブラウザーの JavaScript API サポート</a>のページには、Firefox でサポートされているすべての API の互換性テーブルが含まれています。</span><span>特定の API アイテムのサポートに関する警告がある場合は、これらのテーブルにアスタリスク "*" が表示され、API アイテムのリファレンスページにその警告が説明されています。</span></span></p> <p><span class="short_text" id="result_box" lang="ja"><span>このテーブルは、<a href="https://github.com/mdn/browser-compat-data">GitHub で JSON ファイル</a>として保存された互換性データから生成されます。</span></span></p> <p><span class="short_text" id="result_box" lang="ja"><span>このセクションの残りの部分では、テーブルにまだ取り込まれていない互換性の問題について説明します。</span></span></p> -<h4 id="notifications" name="notifications"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/notifications">notifications</a></h4> +<h4 id="notifications" name="notifications"><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/notifications">notifications</a></h4> <ul> - <li><code>notifications.create()</code>の <code>"basic"</code> <code><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/API/notifications/TemplateType">type</a></code>を指定した場合の、 <code>iconUrl</code> は Firefox では任意です。Chrome では必須です。</li> + <li><code>notifications.create()</code>の <code>"basic"</code> <code><a href="/ja/Add-ons/WebExtensions/API/notifications/TemplateType">type</a></code>を指定した場合の、 <code>iconUrl</code> は Firefox では任意です。Chrome では必須です。</li> <li>通知<span class="short_text" id="result_box" lang="ja"><span>はユーザーがクリックするとすぐに消去されます。</span></span> <span class="short_text" id="result_box" lang="ja"><span>これは Chrome では当てはまりません。</span></span></li> <li><code>notifications.create()</code><span id="result_box" lang="ja"><span> を複数回連続して呼び出すと、Firefox が通知を一切表示しなくなることがあります。</span></span> <code>chrome.notifications.create() </code><span lang="ja"><span><code>のコールバック</code>関数内に入るまでの時間は、後続のスクリプトが実行されるまで待つほど十分な時間ではありません。</span></span></li> </ul> -<h4 id="proxy" name="proxy"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/proxy">proxy</a></h4> +<h4 id="proxy" name="proxy"><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/proxy">proxy</a></h4> <ul> <li><span class="short_text" id="result_box" lang="ja"><span>この API は Chrome API の設計とはまったく異なります。</span></span> <span id="result_box" lang="ja"><span>Chrome の API を使用すると、</span></span>拡張機能<span lang="ja"><span>で PAC ファイルを登録できますが、明示的なプロキシルールを定義することもできます。</span></span><span id="result_box" lang="ja"><span>これは拡張 PAC ファイルを使用しても可能であるため、この API は PAC ファイルのアプローチのみをサポートしています。</span></span> <span id="result_box" lang="ja"><span>この API は Chrome の <code>proxy</code> API と互換性がないため、この API は <code>browser</code> の名前空間でのみ使用できます。</span></span></li> </ul> -<h4 id="tabs" name="tabs"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/tabs">tabs</a></h4> +<h4 id="tabs" name="tabs"><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/tabs">tabs</a></h4> <ul> <li> @@ -97,15 +97,15 @@ setCookie<span class="punctuation token">.</span><span class="function token">th <li><span id="result_box" lang="ja"><span>Firefox では、</span></span><code>beforeunload</code><span lang="ja"><span> イベントの後に </span></span><code>tabs.remove()</code><span lang="ja"><span> の promise が実行されますが、Chrome では コールバック が </span></span><code>beforeunload</code><span lang="ja"><span> を待ちません。</span></span></li> </ul> -<h4 id="webRequest" name="webRequest"><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/API/webRequest">webRequest</a></h4> +<h4 id="webRequest" name="webRequest"><a href="/ja/Add-ons/WebExtensions/API/webRequest">webRequest</a></h4> <ul> <li><span id="result_box" lang="ja"><span>Firefox では、元の URL が<code>http:</code>または<code>https:</code>を使用する場合にのみ、リクエストを</span></span><span lang="ja"><span>リダイレクトできます。</span></span></li> <li><span id="result_box" lang="ja"><span>Firefox では、システム要求（</span></span>拡張機能<span lang="ja"><span>のアップグレードや検索バーの提案など）でイベントが発生しません。</span></span> <span id="result_box" lang="ja"><span>Firefox 57以降では、Firefox はプロキシ認証のために</span></span>{{WebExtAPIRef("webRequest.onAuthRequired")}}<span lang="ja"><span>を遮断する必要がある拡張機能の例外を生成します。</span></span>{{WebExtAPIRef("webRequest.onAuthRequired")}}のドキュメントをご覧ください。</li> - <li>Firefox では、拡張機能が外部URL (例 HTTPS) から<a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages">拡張機能ページ</a>にリダイレクトする場合、拡張機能の manifest.json ファイルは、その拡張機能ページの URL を一覧にした <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources">web_accessible_resources</a> キーを含むことが必須です。 その URL にあらゆるウェブサイトからリンクやリダイレクトされる可能性があり、拡張機能は、入力データ(例えば POST データ) を、ただ通常のウェブページがそうするように、アントラステッドなソースからとして取り扱うべきであるのに注意します。</li> + <li>Firefox では、拡張機能が外部URL (例 HTTPS) から<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages">拡張機能ページ</a>にリダイレクトする場合、拡張機能の manifest.json ファイルは、その拡張機能ページの URL を一覧にした <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources">web_accessible_resources</a> キーを含むことが必須です。 その URL にあらゆるウェブサイトからリンクやリダイレクトされる可能性があり、拡張機能は、入力データ(例えば POST データ) を、ただ通常のウェブページがそうするように、アントラステッドなソースからとして取り扱うべきであるのに注意します。</li> </ul> -<h4 id="windows" name="windows"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/windows">windows</a></h4> +<h4 id="windows" name="windows"><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/windows">windows</a></h4> <ul> <li><span id="result_box" lang="ja"><span>Firefox では、</span></span><code>onFocusChanged</code><span lang="ja"><span> はフォーカス変更に対して複数回トリガされます。</span></span></li> @@ -119,7 +119,7 @@ setCookie<span class="punctuation token">.</span><span class="function token">th <h4 id="Additional_incompatibilities" name="Additional_incompatibilities"><span class="short_text" id="result_box" lang="ja"><span>付加的な非互換性</span></span></h4> -<p>Firefox は、バックグラウンドページからの<code><a href="https://developer.mozilla.org/ja/docs/Web/API/Window/alert">alert()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/Web/API/Window/confirm">confirm()</a></code> または <code><a href="https://developer.mozilla.org/ja/docs/Web/API/Window/prompt">prompt()</a></code>の使用をサポートしていません。</p> +<p>Firefox は、バックグラウンドページからの<code><a href="/ja/docs/Web/API/Window/alert">alert()</a></code>, <code><a href="/ja/docs/Web/API/Window/confirm">confirm()</a></code> または <code><a href="/ja/docs/Web/API/Window/prompt">prompt()</a></code>の使用をサポートしていません。</p> <h4 id="web_accessible_resources" name="web_accessible_resources">web_accessible_resources</h4> @@ -133,11 +133,11 @@ setCookie<span class="punctuation token">.</span><span class="function token">th <h4 id="Content_script_requests_happen_in_the_context_of_extension_not_content_page" name="Content_script_requests_happen_in_the_context_of_extension_not_content_page"><span class="short_text" id="result_box" lang="ja"><span>コンテンツスクリプトのリクエストは、コンテンツページではなく、拡張機能のコンテキストで発生する</span></span></h4> -<p><span id="result_box" lang="ja"><span>chrome では、コンテンツスクリプトから<code>/api</code>のような相対URL にリクエストが呼び出されたとき（たとえば、</span></span><code><a href="https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch">fetch()</a></code><span lang="ja"><span>を使用して）、<code>https://example.com/api</code>に送信されます。</span></span><span id="result_box" lang="ja"><span>Firefox では、絶対URL を指定する必要があります。</span></span></p> +<p><span id="result_box" lang="ja"><span>chrome では、コンテンツスクリプトから<code>/api</code>のような相対URL にリクエストが呼び出されたとき（たとえば、</span></span><code><a href="/ja/docs/Web/API/Fetch_API/Using_Fetch">fetch()</a></code><span lang="ja"><span>を使用して）、<code>https://example.com/api</code>に送信されます。</span></span><span id="result_box" lang="ja"><span>Firefox では、絶対URL を指定する必要があります。</span></span></p> <h2 id="manifest.json_keys" name="manifest.json_keys">manifest.json のキー</h2> -<p><span id="result_box" lang="ja"><span>メインの</span></span><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json"> manifest.json</a><span lang="ja"><span> ページには、manifest.json のキーのブラウザーサポートを説明する表が含まれています。</span></span> <span id="result_box" lang="ja"><span>特定のキーのサポートに関する警告がある場合、表にアスタリスク "*"付きで示され、キーのリファレンスページには注意事項が説明されています。</span></span></p> +<p><span id="result_box" lang="ja"><span>メインの</span></span><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json"> manifest.json</a><span lang="ja"><span> ページには、manifest.json のキーのブラウザーサポートを説明する表が含まれています。</span></span> <span id="result_box" lang="ja"><span>特定のキーのサポートに関する警告がある場合、表にアスタリスク "*"付きで示され、キーのリファレンスページには注意事項が説明されています。</span></span></p> <p><span class="short_text" id="result_box" lang="ja"><span>これらの表は、</span></span> <a href="https://github.com/mdn/browser-compat-data">GitHub で JSON ファイル</a><span class="short_text" lang="ja"><span>として保存された互換性データから生成されます。</span></span></p> diff --git a/files/ja/mozilla/add-ons/webextensions/content_scripts/index.html b/files/ja/mozilla/add-ons/webextensions/content_scripts/index.html index ee385edde7..00c2bf1668 100644 --- a/files/ja/mozilla/add-ons/webextensions/content_scripts/index.html +++ b/files/ja/mozilla/add-ons/webextensions/content_scripts/index.html @@ -13,7 +13,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Content_scripts <p>通常のウェブページで読み込まれたスクリプトと同様に、コンテンツスクリプトは、標準の DOM API を使用してページのコンテンツを読み取り、変更することができます。</p> -<p>コンテンツスクリプトは、<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs">WebExtension API</a> の小さなサブセット にしかアクセスできませんが、メッセージングシステムを使用して <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Content_scripts#Communicating_with_background_scripts">バックグラウンドスクリプトと通信</a>し、WebExtension API に間接的にアクセスすることができます。</p> +<p>コンテンツスクリプトは、<a href="/ja/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs">WebExtension API</a> の小さなサブセット にしかアクセスできませんが、メッセージングシステムを使用して <a href="/ja/Add-ons/WebExtensions/Content_scripts#Communicating_with_background_scripts">バックグラウンドスクリプトと通信</a>し、WebExtension API に間接的にアクセスすることができます。</p> <div class="note"> <p>コンテンツスクリプトは次のドメインでブロックされるのに注意してください:</p> @@ -53,13 +53,13 @@ translation_of: Mozilla/Add-ons/WebExtensions/Content_scripts <li> <dl> <dt><strong>インストール時に、URL パターンにマッチするページ内へ</strong></dt> - <dd><code>manifest.json</code> の <code style="font-style: normal;"><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> キーを使用して、URL が<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Match_patterns">指定されたパターンにマッチする</a>ページをロードするたびにコンテンツスクリプトを読み込むようブラウザーに依頼できます。</dd> + <dd><code>manifest.json</code> の <code style="font-style: normal;"><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> キーを使用して、URL が<a href="/ja/Add-ons/WebExtensions/Match_patterns">指定されたパターンにマッチする</a>ページをロードするたびにコンテンツスクリプトを読み込むようブラウザーに依頼できます。</dd> </dl> </li> <li> <dl> <dt><strong>実行時に、URL パターンにマッチするページ内へ</strong></dt> - <dd>{{WebExtAPIRef("contentScripts")}} API を使って、URL が<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Match_patterns">指定されたパターンにマッチする</a>ページをロードするたびにコンテンツスクリプトを読み込むようブラウザーに依頼できます。これは method (1) のようなもので、違いは実行時にコンテンツスクリプトを追加/削除できることです。</dd> + <dd>{{WebExtAPIRef("contentScripts")}} API を使って、URL が<a href="/ja/Add-ons/WebExtensions/Match_patterns">指定されたパターンにマッチする</a>ページをロードするたびにコンテンツスクリプトを読み込むようブラウザーに依頼できます。これは method (1) のようなもので、違いは実行時にコンテンツスクリプトを追加/削除できることです。</dd> </dl> </li> <li> @@ -72,7 +72,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Content_scripts <p><em>フレームごと、拡張機能ごとの</em>グローバルスコープしかありません。これは 1 つのコンテンツスクリプトの変数は、読み込み方にかかわらず、他のコンテンツスクリプトからアクセスできることになります。</p> -<p>方法 (1) と (2) では<a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">マッチパターン</a>を使って表現された URL のスクリプトだけを読み込みできます。</p> +<p>方法 (1) と (2) では<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">マッチパターン</a>を使って表現された URL のスクリプトだけを読み込みできます。</p> <p>方法 (3) では、拡張機能と一緒にパッケージされたページのスクリプトも読み込みできますが、"about:debugging" や "about:addons"のような権限つきページにはスクリプトを読み込めません。</p> @@ -191,12 +191,12 @@ window.confirm("Are you sure?"); // calls the original window.confirm()</pre> <p>すべてから:</p> <ul> - <li><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/storage">storage</a></code></li> + <li><code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/storage">storage</a></code></li> </ul> <h3 id="XHR_and_Fetch" name="XHR_and_Fetch">XHR と Fetch</h3> -<p>コンテンツスクリプトは通常の <code><a href="https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest">window.XMLHttpRequest</a></code> と <code><a href="https://developer.mozilla.org/ja/docs/Web/API/Fetch_API">window.fetch()</a></code> API を使ってリクエストを作成できます。</p> +<p>コンテンツスクリプトは通常の <code><a href="/ja/docs/Web/API/XMLHttpRequest">window.XMLHttpRequest</a></code> と <code><a href="/ja/docs/Web/API/Fetch_API">window.fetch()</a></code> API を使ってリクエストを作成できます。</p> <div class="blockIndicator note"> <p>Firefox では、コンテンツスクリプトの (例えば、<code><a href="/ja/docs/Web/API/Fetch_API/Using_Fetch">fetch()</a></code> を使った) リクエストは、拡張機能のコンテキストで起こるので、ページコンテンツを参照する URL を絶対URL で提供せねばなりません。</p> @@ -204,9 +204,9 @@ window.confirm("Are you sure?"); // calls the original window.confirm()</pre> <p>Chrome では、リクエストはページのコンテ<span class="hidden"> </span>キストで起こるので、相対 URL で行われます。例えば、<code>/api</code> は <code>https://[現在のペー<span class="hidden"> </span>ジの URL]/api</code> に送られます。</p> </div> -<p>コンテンツスクリプトは拡張機能の他の部分と同一のクロスドメイン権限を取得します: よって拡張機能が <code>manifest.json</code> の <code><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code> キーを使ってあるドメインのクロスドメインアクセスを要求している場合、コンテンツスクリプトも同様にそのドメインのアクセスを取得します。</p> +<p>コンテンツスクリプトは拡張機能の他の部分と同一のクロスドメイン権限を取得します: よって拡張機能が <code>manifest.json</code> の <code><a href="/ja/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code> キーを使ってあるドメインのクロスドメインアクセスを要求している場合、コンテンツスクリプトも同様にそのドメインのアクセスを取得します。</p> -<p>これはより多く権限付けられた XHR に晒して、コンテンツスクリプトでインスタンスを取得することで達成し、その副作用としてページ自体からのリクエストがそうであるように <code><a href="https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Origin">Origin</a></code> と <code><a href="https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Referer">Referer</a></code> ヘッダーがセットされず、リクエストからクロスオリジンな性質を隠すことが好ましいことがよくあります。</p> +<p>これはより多く権限付けられた XHR に晒して、コンテンツスクリプトでインスタンスを取得することで達成し、その副作用としてページ自体からのリクエストがそうであるように <code><a href="/ja/docs/Web/HTTP/Headers/Origin">Origin</a></code> と <code><a href="/ja/docs/Web/HTTP/Headers/Referer">Referer</a></code> ヘッダーがセットされず、リクエストからクロスオリジンな性質を隠すことが好ましいことがよくあります。</p> <div class="blockIndicator note"> <p>バージョン 58 以降、コンテンツ自体から送られたかのようなリクエストを必要とする拡張機能は <code>content.XMLHttpRequest</code> と <code>content.fetch()</code> を代わりに使うことができます。</p> diff --git a/files/ja/mozilla/add-ons/webextensions/content_security_policy/index.html b/files/ja/mozilla/add-ons/webextensions/content_security_policy/index.html index 4bd247cf03..fff9baffd6 100644 --- a/files/ja/mozilla/add-ons/webextensions/content_security_policy/index.html +++ b/files/ja/mozilla/add-ons/webextensions/content_security_policy/index.html @@ -8,7 +8,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Content_Security_Policy <div>{{AddonSidebar}}</div> <div class="summary"> -<p>WebExtension APIs で開発される拡張機能には、既定で適用される CSP(Content Security Policy の略) があります。これは<strong><a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/script"> </a></strong><a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/script"><script></a> と <a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/object"><object></a> リソースから読み込まれるソースを制限し、危険な行動、例えば <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code> の使用を非許可にします。</p> +<p>WebExtension APIs で開発される拡張機能には、既定で適用される CSP(Content Security Policy の略) があります。これは<strong><a href="/ja/docs/Web/HTML/Element/script"> </a></strong><a href="/ja/docs/Web/HTML/Element/script"><script></a> と <a href="/ja/docs/Web/HTML/Element/object"><object></a> リソースから読み込まれるソースを制限し、危険な行動、例えば <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code> の使用を非許可にします。</p> <p>この記事では CSP とは何かと、デフォルトポリシーとは何で拡張機能にはどんな意味があるのかと、拡張機能が既定の CSP を変更する方法を簡単に説明します。</p> </div> @@ -61,13 +61,13 @@ translation_of: Mozilla/Add-ons/WebExtensions/Content_Security_Policy <ul> <li> - <p><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Content_Security_Policy#Location_of_script_and_object_resources"><script> と <object> リソースは拡張機能のローカルからのみ読み込みできる</a></p> + <p><a href="/ja/Add-ons/WebExtensions/Content_Security_Policy#Location_of_script_and_object_resources"><script> と <object> リソースは拡張機能のローカルからのみ読み込みできる</a></p> </li> <li> - <p><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Content_Security_Policy#eval()_and_friends">拡張機能は JavaScript で文字列を評価 (eval) できない</a></p> + <p><a href="/ja/Add-ons/WebExtensions/Content_Security_Policy#eval()_and_friends">拡張機能は JavaScript で文字列を評価 (eval) できない</a></p> </li> <li> - <p><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Content_Security_Policy#Inline_JavaScript">インライン JavaScript は実行されない</a></p> + <p><a href="/ja/Add-ons/WebExtensions/Content_Security_Policy#Inline_JavaScript">インライン JavaScript は実行されない</a></p> </li> </ul> diff --git a/files/ja/mozilla/add-ons/webextensions/developing_webextensions_for_thunderbird/index.html b/files/ja/mozilla/add-ons/webextensions/developing_webextensions_for_thunderbird/index.html index 319e8e61de..ec7fe9399e 100644 --- a/files/ja/mozilla/add-ons/webextensions/developing_webextensions_for_thunderbird/index.html +++ b/files/ja/mozilla/add-ons/webextensions/developing_webextensions_for_thunderbird/index.html @@ -12,11 +12,11 @@ original_slug: Mozilla/Add-ons/WebExtensions/ThunderbirdにおけるWebExtension <h2 id="APIの違い">APIの違い</h2> <p>両者ともGeckoベースであるため、いくつかの違いはあるものの、Thunderbirdでは、Firefoxで使えるAPIの多くをサポートしています。<br> - 詳細は、<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json">browser compatibility for manifest.json</a> と <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">browser support for JavaScript APIs</a>を参照してください。</p> + 詳細は、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json">browser compatibility for manifest.json</a> と <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">browser support for JavaScript APIs</a>を参照してください。</p> <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Browser support for JavaScript APIs</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json">Browser compatibility for manifest.json</a></li> + <li><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Browser support for JavaScript APIs</a></li> + <li><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json">Browser compatibility for manifest.json</a></li> </ul> diff --git a/files/ja/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html b/files/ja/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html index 75fdb38e28..29d054ae0b 100644 --- a/files/ja/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html +++ b/files/ja/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html @@ -13,7 +13,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools <div>{{AddonSidebar}}</div> <div class="note"> -<p>このページでは、Firefox 55に存在するdevtools APIについて説明しています。このAPIは<a href="https://developer.chrome.com/extensions/devtools">Chrome devtools APIs</a>に基づいていますが、まだFirefoxでは実装されていないため、ここでは説明していません。現在欠けている機能を確認するには、<a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs">devtools APIの制限</a>を参照してください。</p> +<p>このページでは、Firefox 55に存在するdevtools APIについて説明しています。このAPIは<a href="https://developer.chrome.com/extensions/devtools">Chrome devtools APIs</a>に基づいていますが、まだFirefoxでは実装されていないため、ここでは説明していません。現在欠けている機能を確認するには、<a href="/ja/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs">devtools APIの制限</a>を参照してください。</p> </div> <p><span class="seoSummary">WebExtensions API を使用して、ブラウザの組み込み開発者ツールを拡張できます。</span> devtools 拡張機能を作成するには、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> に "<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page">devtools_page</a>" キーを含めます:</p> diff --git a/files/ja/mozilla/add-ons/webextensions/implement_a_settings_page/index.html b/files/ja/mozilla/add-ons/webextensions/implement_a_settings_page/index.html index 3c1946e053..7748851616 100644 --- a/files/ja/mozilla/add-ons/webextensions/implement_a_settings_page/index.html +++ b/files/ja/mozilla/add-ons/webextensions/implement_a_settings_page/index.html @@ -50,7 +50,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Implement_a_settings_page <p>これは単にページに青い枠をつけます。</p> -<p><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">この拡張機能をインストール</a>してテストします — お好みのあらゆるウェブページを開きます:</p> +<p><a href="/ja/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">この拡張機能をインストール</a>してテストします — お好みのあらゆるウェブページを開きます:</p> <p>{{EmbedYouTube("E-WUhihF8fw")}}</p> @@ -161,7 +161,7 @@ document.querySelector("form").addEventListener("submit", saveOptions); <p>ローカルストレージがふさわしいと感じる場合、代わりにローカルストレージに設定値を保存できます。</p> <div class="note"> -<p>Firefox の <code>storage.sync</code> の実装はアドオン ID に依存しているのに注意します。<code>storage.sync</code> を使う場合、上記manifest にあるように、manifest.json の <code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications">applications</a></code> キーに拡張機能の ID をセットしておく必要があります。</p> +<p>Firefox の <code>storage.sync</code> の実装はアドオン ID に依存しているのに注意します。<code>storage.sync</code> を使う場合、上記manifest にあるように、manifest.json の <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications">applications</a></code> キーに拡張機能の ID をセットしておく必要があります。</p> </div> <p>最後に、ストレージから枠の色を読むのに "borderify.js" を更新します:</p> @@ -197,7 +197,7 @@ getting.then(onGot, onError); <p>いま、次を行ってみます:</p> <ul> - <li><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Temporary_Installation_in_Firefox#Reloading_a_temporary_add-on">拡張機能を再読み込み</a></li> + <li><a href="/ja/Add-ons/WebExtensions/Temporary_Installation_in_Firefox#Reloading_a_temporary_add-on">拡張機能を再読み込み</a></li> <li>ウェブページを読み込む</li> <li>設定ページを開いて枠の色を変える</li> <li>ウェブページを再読み込みして違いを見る</li> diff --git a/files/ja/mozilla/add-ons/webextensions/index.html b/files/ja/mozilla/add-ons/webextensions/index.html index 73ae6f80b2..b8f78cc74b 100644 --- a/files/ja/mozilla/add-ons/webextensions/index.html +++ b/files/ja/mozilla/add-ons/webextensions/index.html @@ -12,7 +12,7 @@ translation_of: Mozilla/Add-ons/WebExtensions <p><span class="seoSummary">拡張機能はブラウザーの能力を拡張・修正するものです。Firefox の拡張機能は WebExtensions API を使ってビルドされ、この API は拡張機能をクロスブラウザーで開発するシステムです。</span>このシステムの大半は Google Chrome と Opera と <a href="https://browserext.github.io/browserext/">W3C Draft Community Group</a> でサポートされている <a class="external-icon external" href="https://developer.chrome.com/extensions">extension API</a> と互換性があります。</p> -<p>これらのブラウザー用に書かれた拡張機能は大抵の場合、<a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome">ほんの少し変更を加えるだけで</a> Firefox や <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a> でも動かすことができます。この API は <a href="https://developer.mozilla.org/ja/Firefox/Multiprocess_Firefox">マルチプロセス Firefox</a> にも完全互換です。</p> +<p>これらのブラウザー用に書かれた拡張機能は大抵の場合、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome">ほんの少し変更を加えるだけで</a> Firefox や <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a> でも動かすことができます。この API は <a href="/ja/Firefox/Multiprocess_Firefox">マルチプロセス Firefox</a> にも完全互換です。</p> <p>お持ちのアイデアや質問があったり、レガシーアドオンを WebExtensions API を使うように移行するのに助けが要る場合、<a href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons のメーリングリスト</a> (英語) や <a href="https://chat.mozilla.org/#/room/#addons:mozilla.org">Add-ons room</a> (英語) や <a href="irc://irc.mozilla.org/webextensions">Matrix</a> (英語) にてご連絡ください。</p> @@ -23,7 +23,7 @@ translation_of: Mozilla/Add-ons/WebExtensions <h2 id="Getting_started" name="Getting_started">始めましょう</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions">拡張機能とは何か?</a></li> + <li><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions">拡張機能とは何か?</a></li> <li><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">初めての拡張機能</a></li> <li><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Walkthrough">2 つめの拡張機能</a></li> <li><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">拡張機能の中身</a></li> diff --git a/files/ja/mozilla/add-ons/webextensions/internationalization/index.html b/files/ja/mozilla/add-ons/webextensions/internationalization/index.html index 368cba4d29..c0c1694a5d 100644 --- a/files/ja/mozilla/add-ons/webextensions/internationalization/index.html +++ b/files/ja/mozilla/add-ons/webextensions/internationalization/index.html @@ -382,7 +382,7 @@ padding-left: 1.5em;</pre> <h2 id="Testing_out_your_extension" name="Testing_out_your_extension">あなたの拡張機能をテストする</h2> -<p>Firefox 45 からは、拡張機能を一時的にディスクからインストールできます — <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Packaging_and_installation#Loading_from_disk">ディスクから読み込む</a>を見てください。これを行ってから、<a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> 拡張機能をテストしてみます。お好きなウェブサイトに移動してクリックしたリンクの URL を報告した通知が出てくるか見てください。</p> +<p>Firefox 45 からは、拡張機能を一時的にディスクからインストールできます — <a href="/ja/Add-ons/WebExtensions/Packaging_and_installation#Loading_from_disk">ディスクから読み込む</a>を見てください。これを行ってから、<a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> 拡張機能をテストしてみます。お好きなウェブサイトに移動してクリックしたリンクの URL を報告した通知が出てくるか見てください。</p> <p>次に、Firefox のロケールをテストしたい拡張機能がサポートするものに変えます。</p> diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/author/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/author/index.html index 979997cce2..c0f3959b7c 100644 --- a/files/ja/mozilla/add-ons/webextensions/manifest.json/author/index.html +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/author/index.html @@ -29,7 +29,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/author </tbody> </table> -<p>拡張機能の作者で、ブラウザーの UI で表示されることを目的とするものです。<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/developer">developer</a> キーが与えられてそこに "name" プロパティが含まれる場合、それは author キーを上書きします。複数の作者を指定する方法はありません。</p> +<p>拡張機能の作者で、ブラウザーの UI で表示されることを目的とするものです。<a href="/ja/Add-ons/WebExtensions/manifest.json/developer">developer</a> キーが与えられてそこに "name" プロパティが含まれる場合、それは author キーを上書きします。複数の作者を指定する方法はありません。</p> <p>これは<a href="/ja/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json">ローカライズ可能なプロパティ</a>です。</p> diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/background/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/background/index.html index 5397e8d919..e6dabc8e88 100644 --- a/files/ja/mozilla/add-ons/webextensions/manifest.json/background/index.html +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/background/index.html @@ -87,7 +87,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/background <ul> <li><code>true</code> を指定すると、拡張機能が読み込まれるかブラウザーが起動した時から、拡張機能の削除、無効化、もしくはブラウザーが終了するまでの間、バックグラウンドページがメモリー上に保持され続けます（つまり、バックグラウンドページが永続化されます）。</li> - <li><code>false</code> を指定すると、バックグラウンドページはアイドル状態の時にメモリー上からアンロードされ、必要に応じて再生成されます。このようなバックグラウンドページは、リスナーを登録したイベントを処理するためだけにメモリー上に読み込まれるため、イベントページとも呼ばれます。バックグラウンドページがメモリ上からアンロードされていても、リスナーの登録状態は永続化されますが、他の値は永続化されません。イベントページにおいてデータを永続化したい場合は、<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage">storage API</a>を使う必要があります。</li> + <li><code>false</code> を指定すると、バックグラウンドページはアイドル状態の時にメモリー上からアンロードされ、必要に応じて再生成されます。このようなバックグラウンドページは、リスナーを登録したイベントを処理するためだけにメモリー上に読み込まれるため、イベントページとも呼ばれます。バックグラウンドページがメモリ上からアンロードされていても、リスナーの登録状態は永続化されますが、他の値は永続化されません。イベントページにおいてデータを永続化したい場合は、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/storage">storage API</a>を使う必要があります。</li> </ul> </td> </tr> diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/browser_action/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/browser_action/index.html index 3b0dba68a6..a5723c6d5b 100644 --- a/files/ja/mozilla/add-ons/webextensions/manifest.json/browser_action/index.html +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/browser_action/index.html @@ -48,7 +48,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/browser_action <p>browser actionはあなたのブラウザーのツールバーに拡張機能のボタンを追加します。ボタンはアイコンと、オプションでHTML、CSSとJavaScriptを使用した、ポップアップコンテンツを使用できます。</p> -<p>ポップアップを提供する場合は、ユーザーがボタンをクリックしたときポップアップが開かれ、ポップアップで実行されているJavaScriptは、ユーザーの実行を処理できます。ポップアップを提供しない場合、ユーザーがボタンをクリックすると、クリックイベントが拡張機能の<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">バックグラウンドスクリプト</a>に送信されます。</p> +<p>ポップアップを提供する場合は、ユーザーがボタンをクリックしたときポップアップが開かれ、ポップアップで実行されているJavaScriptは、ユーザーの実行を処理できます。ポップアップを提供しない場合、ユーザーがボタンをクリックすると、クリックイベントが拡張機能の<a href="/ja/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">バックグラウンドスクリプト</a>に送信されます。</p> <p>You can also create and manipulate browser actions programmatically using the <a href="/ja/Add-ons/WebExtensions/API/browserAction">browserAction API</a>.</p> diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/browser_specific_settings/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/browser_specific_settings/index.html index 577e491a54..fa16b0965e 100644 --- a/files/ja/mozilla/add-ons/webextensions/manifest.json/browser_specific_settings/index.html +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/browser_specific_settings/index.html @@ -19,7 +19,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_set <tr> <th scope="row">必須</th> <td> - <p>通常は不要です (<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID#When_do_you_need_an_Add-on_ID"> いつ Add-on ID が必要か？</a>を参考に) 。Firefox 48 より前と Android版Firefox では必須です。</p> + <p>通常は不要です (<a href="/ja/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID#When_do_you_need_an_Add-on_ID"> いつ Add-on ID が必要か？</a>を参考に) 。Firefox 48 より前と Android版Firefox では必須です。</p> </td> </tr> <tr> @@ -46,7 +46,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_set <p>現在、4 つの文字列属性を含む <code>gecko</code> キーのみが存在します。</p> <ul> - <li><code>id</code> は <a href="https://developer.mozilla.org/ja/Add-ons/Install_Manifests#id">拡張機能ID</a> です。Firefox 48 からオプションですが、Firefox 48 より前では必須です。いつ特定の add-on ID が必要になるかについては、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID">拡張機能と Add-on ID</a> を見てください。</li> + <li><code>id</code> は <a href="/ja/Add-ons/Install_Manifests#id">拡張機能ID</a> です。Firefox 48 からオプションですが、Firefox 48 より前では必須です。いつ特定の add-on ID が必要になるかについては、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID">拡張機能と Add-on ID</a> を見てください。</li> <li><code>strict_min_version</code>: サポートする Gecko の最小バージョンです。"*" を含むバージョンは、このフィールドでは無効です。既定は "42a1" です。</li> <li><code>strict_max_version</code>: サポートする Gecko の最大バージョンです。拡張機能がこのバージョンを超えた Firefox のバージョンにインストールや実行された場合、拡張機能は無効または、インストールが許可されません。既定は "*" で、最大バージョンのチェックは無効です。</li> <li><code>update_url</code> は <a href="/ja/Add-ons/Updates">add-on update manifest</a> へのリンクです。リンクは "https" で始まっている必要があることに注意してください。このキーは拡張機能が自分自身で更新を管理するためのものです(つまり AMO以外で)。</li> diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/chrome_url_overrides/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/chrome_url_overrides/index.html index e3d91ef552..209284f3b4 100644 --- a/files/ja/mozilla/add-ons/webextensions/manifest.json/chrome_url_overrides/index.html +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/chrome_url_overrides/index.html @@ -82,7 +82,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/chrome_url_overrides </tbody> </table> -<p>すべてのプロパティは<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json">ローカライズ可能です</a>。</p> +<p>すべてのプロパティは<a href="/ja/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json">ローカライズ可能です</a>。</p> <h2 id="Example" name="Example">例</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/description/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/description/index.html index 9f8374985c..3951be0947 100644 --- a/files/ja/mozilla/add-ons/webextensions/manifest.json/description/index.html +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/description/index.html @@ -31,7 +31,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/description <p>ブラウザーのユーザーインターフェースに表示するための、拡張機能の簡単な説明です。</p> -<p>これは<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json">ローカライズ可能なプロパティ</a>です。</p> +<p>これは<a href="/ja/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json">ローカライズ可能なプロパティ</a>です。</p> <h2 id="Example" name="Example">例</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.html index 64e36c0f53..018dd055f0 100644 --- a/files/ja/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.html +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.html @@ -31,7 +31,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url <p>拡張機能のホームページの URL です。</p> -<p><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/developer">developer</a> キーが提供されていて、そこに "url" プロパティが含まれている場合、homepage_url キーは上書きされます。</p> +<p><a href="/ja/Add-ons/WebExtensions/manifest.json/developer">developer</a> キーが提供されていて、そこに "url" プロパティが含まれている場合、homepage_url キーは上書きされます。</p> <p>これは<a href="/ja/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json">国際化できるプロパティ</a>です。</p> diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/index.html index 34274940de..610c9c222f 100644 --- a/files/ja/mozilla/add-ons/webextensions/manifest.json/index.html +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/index.html @@ -13,7 +13,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json <p>manifest.json を使うことで、拡張機能の名前やバージョンといった基本的なメタデータを指定したり、拡張機能の機能的な側面として、例えばバックグラウンドスクリプトやコンテンツスクリプト、ブラウザーアクションを指定することもできます。</p> -<p>これは <a href="https://developer.mozilla.org/ja/docs/Glossary/JSON">JSON</a>形式のファイルですが、１つ例外があります: "<code>//</code>"-形式のコメントが許可されています。</p> +<p>これは <a href="/ja/docs/Glossary/JSON">JSON</a>形式のファイルですが、１つ例外があります: "<code>//</code>"-形式のコメントが許可されています。</p> <p>manifest.json のキー一覧は次の通り:</p> @@ -41,7 +41,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json <p><strong>注:</strong> これはコピー・ペーストできるような使われ方のつもりではないのに注意してください: どのキーが必要かは開発している拡張機能に依存します。</p> </div> -<p>完全な例は <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Examples">Example extensions</a> を見てください。</p> +<p>完全な例は <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Examples">Example extensions</a> を見てください。</p> <pre class="brush: json">{ "applications": { @@ -116,7 +116,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json <h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの実装状況</h2> -<p>マニフェストキーとサブキーのすべてを見るには、<a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json">完全な manifest.json ブラウザー互換テーブルを見てください。</a></p> +<p>マニフェストキーとサブキーのすべてを見るには、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json">完全な manifest.json ブラウザー互換テーブルを見てください。</a></p> diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/options_ui/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/options_ui/index.html index 5d49d029eb..4ef2abbd14 100644 --- a/files/ja/mozilla/add-ons/webextensions/manifest.json/options_ui/index.html +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/options_ui/index.html @@ -35,9 +35,9 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/options_ui <p>オプションページは、拡張機能の設定を含みます。オプションページはブラウザーのアドオンマネージャー、または拡張機能内で {{WebExtAPIRef("runtime.openOptionsPage()")}} を使用することでアクセスできます。</p> -<p><code>options_ui</code> を拡張機能にパッケージされた HTML ファイルへのパスとして指定します。通常のウェブページのように、HTML、CSS、JavaScript ファイルを含めることができます。しかし、通常のページと異なり、拡張機能が<a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">権限</a>を持つすべての <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/API">WebExtension API</a> を使用できます。しかし、バックグラウンドスクリプトとは異なるスコープで実行されます。</p> +<p><code>options_ui</code> を拡張機能にパッケージされた HTML ファイルへのパスとして指定します。通常のウェブページのように、HTML、CSS、JavaScript ファイルを含めることができます。しかし、通常のページと異なり、拡張機能が<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">権限</a>を持つすべての <a href="/ja/Add-ons/WebExtensions/API">WebExtension API</a> を使用できます。しかし、バックグラウンドスクリプトとは異なるスコープで実行されます。</p> -<p><strong>オプションページ</strong>と<strong>バックグラウンドスクリプト</strong>の JavaScript 上で、データや関数を<strong>共有したい</strong>場合、{{WebExtAPIRef("extension.getBackgroundPage()")}} を使用してバックグラウンドスクリプトの <a href="/ja/docs/Web/API/Window">Window</a> への参照を直接取得するか、{{WebExtAPIRef("extension.getViews()")}} で拡張機能内で実行されているいずれかのページの {{domxref("Window")}} を取得します。あるいは、JavaScript で <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage">runtime.sendMessage()</a></code> や <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage">runtime.onMessage</a></code>、<code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/runtime/connect">runtime.connect()</a></code> を使用することで、オプションページとバックグラウンドスクリプト間で相互にコミュニケーションできます。後者の方法 (や同等の <code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/runtime/Port">runtime.Port</a></code> ) でも <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#background_scripts">バックグラウンドスクリプト</a>と<strong><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Content_scripts">コンテンツスクリプト</a></strong>とでオプションを共有できます。</p> +<p><strong>オプションページ</strong>と<strong>バックグラウンドスクリプト</strong>の JavaScript 上で、データや関数を<strong>共有したい</strong>場合、{{WebExtAPIRef("extension.getBackgroundPage()")}} を使用してバックグラウンドスクリプトの <a href="/ja/docs/Web/API/Window">Window</a> への参照を直接取得するか、{{WebExtAPIRef("extension.getViews()")}} で拡張機能内で実行されているいずれかのページの {{domxref("Window")}} を取得します。あるいは、JavaScript で <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage">runtime.sendMessage()</a></code> や <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage">runtime.onMessage</a></code>、<code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/runtime/connect">runtime.connect()</a></code> を使用することで、オプションページとバックグラウンドスクリプト間で相互にコミュニケーションできます。後者の方法 (や同等の <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/runtime/Port">runtime.Port</a></code> ) でも <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#background_scripts">バックグラウンドスクリプト</a>と<strong><a href="/ja/Add-ons/WebExtensions/Content_scripts">コンテンツスクリプト</a></strong>とでオプションを共有できます。</p> <p>一般的に、オプションページで変更されたオプションは、<a href="/ja/Add-ons/WebExtensions/API/storage">storage API</a> を使用して、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/storage/sync">storage.sync</a> (ユーザーがログインしているすべてのブラウザーインスタンス間で設定を同期する場合) か <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/storage/local">storage.local</a> (現在のマシン / プロファイルのローカル設定にする場合) のいずれかに保存します。バックグラウンドスクリプトに変更を通知する必要がある場合、バックグラウンドスクリプトで <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/storage/onChanged">storage.onChanged</a> にリスナーを追加します。</p> diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/permissions/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/permissions/index.html index a139d5c23a..2187d98bec 100644 --- a/files/ja/mozilla/add-ons/webextensions/manifest.json/permissions/index.html +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/permissions/index.html @@ -78,7 +78,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/permissions <h2 id="API_permissions">API 権限</h2> -<p>API 権限には、拡張機能から使用したい <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">WebExtension API</a> の名前をキーワードとして指定します。</p> +<p>API 権限には、拡張機能から使用したい <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API">WebExtension API</a> の名前をキーワードとして指定します。</p> <p>現時点で使用できるキーワードは以下の通りです。</p> <div class="threecolumns"> diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/protocol_handlers/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/protocol_handlers/index.html index f0b3e15f5a..5506ad6991 100644 --- a/files/ja/mozilla/add-ons/webextensions/manifest.json/protocol_handlers/index.html +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/protocol_handlers/index.html @@ -57,7 +57,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/protocol_handlers <dt><code>name</code></dt> <dd>プロトコルハンドラーを表す文字列。これはユーザーがハンドラーにリンクを開くかどうか問い合わせた時に、ユーザーに表示されます。</dd> <dt><code>uriTemplate</code></dt> - <dd>ハンドラーの URL を表す。この文字列はプレースホルダーとして "%s" を入れる必要があります: これは処理される文書の URL がエスケープされたもので置き換えられます。この URL は本当の URL や電話番号、電子メールアドレス、などです。これは<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json">ローカライズ可能なプロパティ</a>です。</dd> + <dd>ハンドラーの URL を表す。この文字列はプレースホルダーとして "%s" を入れる必要があります: これは処理される文書の URL がエスケープされたもので置き換えられます。この URL は本当の URL や電話番号、電子メールアドレス、などです。これは<a href="/ja/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json">ローカライズ可能なプロパティ</a>です。</dd> </dl> <h2 id="Example" name="Example">例</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/sidebar_action/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/sidebar_action/index.html index 7fe517832c..e815b8789a 100644 --- a/files/ja/mozilla/add-ons/webextensions/manifest.json/sidebar_action/index.html +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/sidebar_action/index.html @@ -98,7 +98,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action <p>このプロパティは必須です。</p> - <p>これは<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json">ローカライズ可能なプロパティです。</a></p> + <p>これは<a href="/ja/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json">ローカライズ可能なプロパティです。</a></p> </td> </tr> <tr> @@ -107,9 +107,9 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action <td> <p>サイドバーのタイトル。これはブラウザーのUIの中でサイドバーを一覧したり開くのに使われ、サイドバーが開いた時には上に表示されます。</p> - <p>This property is optional: if it is omitted, the sidebar's title is the extension's <code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/name">name</a></code>.</p> + <p>This property is optional: if it is omitted, the sidebar's title is the extension's <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/name">name</a></code>.</p> - <p>This is a <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json">localizable property</a>.</p> + <p>This is a <a href="/ja/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json">localizable property</a>.</p> </td> </tr> </tbody> diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/theme/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/theme/index.html index 9595d7d2b1..72a48a7615 100644 --- a/files/ja/mozilla/add-ons/webextensions/manifest.json/theme/index.html +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/theme/index.html @@ -9,7 +9,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/theme <div>{{AddonSidebar}}</div> <div class="note"> -<p id="Image_formats">Note that you can't yet submit static WebExtension-based themes to addons.mozilla.org. The work to support this is tracked in <a href="https://github.com/mozilla/addons/issues/501">https://github.com/mozilla/addons/issues/501</a>. If you want to share a theme with other users, you'll need to make it either a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Themes/Lightweight_themes">lightweight theme</a> or a <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/theme">dynamic theme</a>.</p> +<p id="Image_formats">Note that you can't yet submit static WebExtension-based themes to addons.mozilla.org. The work to support this is tracked in <a href="https://github.com/mozilla/addons/issues/501">https://github.com/mozilla/addons/issues/501</a>. If you want to share a theme with other users, you'll need to make it either a <a href="/ja/docs/Mozilla/Add-ons/Themes/Lightweight_themes">lightweight theme</a> or a <a href="/ja/Add-ons/WebExtensions/API/theme">dynamic theme</a>.</p> </div> <table class="fullwidth-table standard-table"> @@ -160,7 +160,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/theme <p>These properties define the colors used for different parts of the browser. They are all optional except <code>"accentcolor"</code> and <code>"textcolor"</code> where either those properties or their chrome counterparts have to be specified.</p> -<p>All these properties can be specified as either a string containing any valid <a href="/ja/docs/Web/CSS/color_value">CSS color string</a> (including hexadecimal), or an RGB array, such as <code>"tab_text": [ 107 , 99 , 23 ]</code>. But note that <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/theme#Chrome_compatibility">in Chrome, colors may only be specified as an RGB array</a>.</p> +<p>All these properties can be specified as either a string containing any valid <a href="/ja/docs/Web/CSS/color_value">CSS color string</a> (including hexadecimal), or an RGB array, such as <code>"tab_text": [ 107 , 99 , 23 ]</code>. But note that <a href="/ja/Add-ons/WebExtensions/manifest.json/theme#Chrome_compatibility">in Chrome, colors may only be specified as an RGB array</a>.</p> <p>See <a href="#example-screenshot">the example screenshot below</a> to understand the parts of the browser UI that are affected by these properties.</p> diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/version/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/version/index.html index 1509b55e71..9fddf82a7f 100644 --- a/files/ja/mozilla/add-ons/webextensions/manifest.json/version/index.html +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/version/index.html @@ -31,7 +31,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/version </tbody> </table> -<p>ドットで区切られた数字と ASCII 文字でフォーマットされた拡張機能のバージョンです。バージョンのフォーマットの詳細は <a href="https://developer.mozilla.org/ja/docs/Toolkit_version_format">Version format</a> ページを見てください。</p> +<p>ドットで区切られた数字と ASCII 文字でフォーマットされた拡張機能のバージョンです。バージョンのフォーマットの詳細は <a href="/ja/docs/Toolkit_version_format">Version format</a> ページを見てください。</p> <p><a href="https://developer.chrome.com/extensions/manifest/version">Chrome の <code>version</code> 定義の構文</a>は、Firefox のものよりも制限が厳しいことに注意してください。</p> @@ -40,7 +40,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/version <li>Firefox で有効な <code>version</code> の値は Chrome でも有効とは限りません。</li> </ul> -<p>AMOキュー内でバージョンを "beta" にマークする特別ルールについては <a href="https://developer.mozilla.org/ja/Add-ons/Distribution#Beta_versions">maintenance policy</a> を見てください。</p> +<p>AMOキュー内でバージョンを "beta" にマークする特別ルールについては <a href="/ja/Add-ons/Distribution#Beta_versions">maintenance policy</a> を見てください。</p> <h2 id="Example" name="Example">例</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/version_name/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/version_name/index.html index 1abd3a61f2..96ca61e667 100644 --- a/files/ja/mozilla/add-ons/webextensions/manifest.json/version_name/index.html +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/version_name/index.html @@ -29,7 +29,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/version_name </tbody> </table> -<p>アップデート目的で使われる <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/version">version</a> 項目に加えて、<a href="https://developer.chrome.com/extensions/manifest/version">version_name</a> はバージョン説明の文字列をセットできて、存在する場合は表示目的に使われます。</p> +<p>アップデート目的で使われる <a href="/ja/Add-ons/WebExtensions/manifest.json/version">version</a> 項目に加えて、<a href="https://developer.chrome.com/extensions/manifest/version">version_name</a> はバージョン説明の文字列をセットできて、存在する場合は表示目的に使われます。</p> <p><strong>version_name</strong> が存在しない場合、<strong>version</strong> 項目が同様な表示目的で使われます。</p> diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/web_accessible_resources/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/web_accessible_resources/index.html index 3adb36d237..8cf3b3e987 100644 --- a/files/ja/mozilla/add-ons/webextensions/manifest.json/web_accessible_resources/index.html +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/web_accessible_resources/index.html @@ -55,7 +55,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resou images/ my-image.png</code></pre> -<p>ウェブページに、この画像を指す <code>src</code> 属性のある <code><a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/img"><img></a></code> 要素を入れるには、 "web_accessible_resources" で次のように指定します:</p> +<p>ウェブページに、この画像を指す <code>src</code> 属性のある <code><a href="/ja/docs/Web/HTML/Element/img"><img></a></code> 要素を入れるには、 "web_accessible_resources" で次のように指定します:</p> <pre class="brush: json no-line-numbers language-json notranslate"><code class="language-json"><span class="key token">"web_accessible_resources":</span> <span class="punctuation token">[</span><span class="string token">"images/my-image.png"</span><span class="punctuation token">]</span></code></pre> diff --git a/files/ja/mozilla/add-ons/webextensions/modify_a_web_page/index.html b/files/ja/mozilla/add-ons/webextensions/modify_a_web_page/index.html index daad4f467b..9a2d92b0b8 100644 --- a/files/ja/mozilla/add-ons/webextensions/modify_a_web_page/index.html +++ b/files/ja/mozilla/add-ons/webextensions/modify_a_web_page/index.html @@ -45,7 +45,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Modify_a_web_page }</pre> -<p><code><a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> キーは URL パターンと一致するページにスクリプトを読み込む方法です。この場合、<code>content_scripts</code> は<a href="https://developer.mozilla.org/"> https://developer.mozilla.org/</a> 以下のすべてのページで "page-eater.js" というスクリプトをロードするようにブラウザーに指示します。</p> +<p><code><a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> キーは URL パターンと一致するページにスクリプトを読み込む方法です。この場合、<code>content_scripts</code> は<a href="/"> https://developer.mozilla.org/</a> 以下のすべてのページで "page-eater.js" というスクリプトをロードするようにブラウザーに指示します。</p> <div class="note"> <p><code>content_scripts</code> の <code>"js"</code> プロパティ は配列なので、マッチしているページに複数のスクリプトを挿入できます。<span id="result_box" lang="ja"><span>これを行うと、ページによってロードされるいくつかのスクリプトと同じように、ページは同じスコープを共有し、配列にリストされている順序でロードされます。</span></span></p> @@ -63,7 +63,7 @@ var header = document.createElement('h1'); header.textContent = "This page has been eaten"; document.body.appendChild(header);</pre> -<p><a href="/ja/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">拡張機能をインストール</a> して <a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a> を訪れてみましょう。</p> +<p><a href="/ja/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">拡張機能をインストール</a> して <a href="/">https://developer.mozilla.org/</a> を訪れてみましょう。</p> <p>{{EmbedYouTube("lxf2Tkg6U1M")}}</p> @@ -126,7 +126,7 @@ browser.contextMenus.onClicked.addListener(function(info, tab) { manifest.json page-eater.js</code></pre> -<p><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Temporary_Installation_in_Firefox#Reloading_a_temporary_add-on">拡張機能を再読み込み</a>して、ページを開きます (任意のページ) コンテキストメニューを有効化し、"Eat this page" を選択します。</p> +<p><a href="/ja/Add-ons/WebExtensions/Temporary_Installation_in_Firefox#Reloading_a_temporary_add-on">拡張機能を再読み込み</a>して、ページを開きます (任意のページ) コンテキストメニューを有効化し、"Eat this page" を選択します。</p> <p>{{EmbedYouTube("zX4Bcv8VctA")}}</p> diff --git a/files/ja/mozilla/add-ons/webextensions/native_manifests/index.html b/files/ja/mozilla/add-ons/webextensions/native_manifests/index.html index 079e34adc0..6edd032adf 100644 --- a/files/ja/mozilla/add-ons/webextensions/native_manifests/index.html +++ b/files/ja/mozilla/add-ons/webextensions/native_manifests/index.html @@ -92,9 +92,9 @@ translation_of: Mozilla/Add-ons/WebExtensions/Native_manifests <td><code>allowed_extensions</code></td> <td>Array of String</td> <td> - <p><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID">Add-on ID</a> の配列です。配列中のそれぞれの値はこのネイティブアプリケーションとの通信が許可されている拡張機能を表します。</p> + <p><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID">Add-on ID</a> の配列です。配列中のそれぞれの値はこのネイティブアプリケーションとの通信が許可されている拡張機能を表します。</p> - <p>つまり、作成する拡張機能の manifest.json ファイルに <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/applications">applications</a> キーを含めたくなるものと思われるため、開発中に明示的なIDを設定しておくと良いでしょう。</p> + <p>つまり、作成する拡張機能の manifest.json ファイルに <a href="/ja/Add-ons/WebExtensions/manifest.json/applications">applications</a> キーを含めたくなるものと思われるため、開発中に明示的なIDを設定しておくと良いでしょう。</p> </td> </tr> </tbody> @@ -129,7 +129,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Native_manifests <td><code>name</code></td> <td>String</td> <td> - <p>ストレージにアクセスできる拡張機能の ID で、拡張機能の <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications">applications</a> キーで指定したのと同じものです。</p> + <p>ストレージにアクセスできる拡張機能の ID で、拡張機能の <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications">applications</a> キーで指定したのと同じものです。</p> </td> </tr> <tr> diff --git a/files/ja/mozilla/add-ons/webextensions/native_messaging/index.html b/files/ja/mozilla/add-ons/webextensions/native_messaging/index.html index 4f8ec385e0..719e59a30a 100644 --- a/files/ja/mozilla/add-ons/webextensions/native_messaging/index.html +++ b/files/ja/mozilla/add-ons/webextensions/native_messaging/index.html @@ -74,7 +74,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Native_messaging <p>アプリマニフェストファイルはネイティブアプリケーションと一緒にインストールする必要があります。ブラウザーはアプリマニフェストファイルを読み込み、検証を行いますが、インストールや管理は行いません。したがって、app manifest ファイルがインストール・アップデートされた時期や方法についてのセキュリティモデルは、WebExtension を使う拡張機能に対してのものというよりはネイティブアプリケーションに対してのものです。</p> -<p>native アプリマニフェストの文法と場所については、<a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Native_manifests">Native manifests</a> を見てください。</p> +<p>native アプリマニフェストの文法と場所については、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Native_manifests">Native manifests</a> を見てください。</p> <p>例として、"ping_pong"ネイティブアプリケーションの manifest を以下に示します。</p> @@ -112,7 +112,7 @@ python -u "c:\\path\\to\\native-messaging\\app\\ping_pong.py"</code></pre> <h3 id="Extension_side" name="Extension_side">拡張機能側</h3> -<p>ネイティブメッセージはコンテンツスクリプトで直接使うことはできません; <a href="/en-US/Add-ons/WebExtensions/Content_scripts#Communicating_with_background_scripts">バックグラウンドスクリプトで間接的にやりとりする</a>必要があります。</p> +<p>ネイティブメッセージはコンテンツスクリプトで直接使うことはできません; <a href="/ja/Add-ons/WebExtensions/Content_scripts#Communicating_with_background_scripts">バックグラウンドスクリプトで間接的にやりとりする</a>必要があります。</p> <p>これを使うには2つのパターンがあります:ネクションベースのメッセージングとコネクションレスメッセージングです。</p> @@ -124,7 +124,7 @@ python -u "c:\\path\\to\\native-messaging\\app\\ping_pong.py"</code></pre> <ul> <li>アプリマニフェストの完全パス</li> - <li>(Firefox 55 以降で) 起動元のアドオンの ID (manifest.json の <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications">applications</a> キーにて指定)</li> + <li>(Firefox 55 以降で) 起動元のアドオンの ID (manifest.json の <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications">applications</a> キーにて指定)</li> </ul> <div class="note"> @@ -176,7 +176,7 @@ browser.browserAction.onClicked.addListener(() => { <ul> <li>アプリマニフェストの完全パス</li> - <li>(Firefox 55 以降で) 起動元のアドオンの ID (manifest.json の <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications">applications</a> キーにて指定)</li> + <li>(Firefox 55 以降で) 起動元のアドオンの ID (manifest.json の <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications">applications</a> キーにて指定)</li> </ul> <p>アプリからの最初のメッセージは <code>sendNativeMessage()</code> 呼び出しの応答として扱われ、コールバックに渡されます。</p> @@ -355,7 +355,7 @@ while True: <ul> <li> <code>runtime.connectNative()</code> に渡した名前がアプリマニフェスト中の名前と一致しているか確認してください</li> <li>OS X/Linux: アプリマニフェストのファイル名が <name>.json となっていることを確認してください</li> - <li>OS X/Linux: ネイティブアプリのマニフェストの場所が<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_manifests#Mac_OS_X">ここ</a>で述べているところにあるのを確認してください</li> + <li>OS X/Linux: ネイティブアプリのマニフェストの場所が<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Native_manifests#Mac_OS_X">ここ</a>で述べているところにあるのを確認してください</li> <li>Windows: レジストリキーが正しい場所にあり、その名前がアプリマニフェスト中の名前と一致していることを確認してください</li> <li>Windows: レジストリキーに指定されたパスがアプリマニフェストを指していることを確認してください</li> </ul> diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/browser_action/index.html b/files/ja/mozilla/add-ons/webextensions/user_interface/browser_action/index.html index 64b172591a..48e85bc287 100644 --- a/files/ja/mozilla/add-ons/webextensions/user_interface/browser_action/index.html +++ b/files/ja/mozilla/add-ons/webextensions/user_interface/browser_action/index.html @@ -9,11 +9,11 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action <p>よく<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">ブラウザーアクション</a>として参照され、 このユーザーインターフェイスオプションはブラウザーのツールバーに追加されるボタンです。 ユーザーはボタンをクリックして拡張機能とやりとりします。</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15751/browser-action.png" style="display: block; height: 182px; margin-left: auto; margin-right: auto; width: 350px;"> ツールバーボタン (ブラウザーアクション) はアドレスバーボタン (ページアクション)とよく似ています。違いといつ使うかについてのガイダンスは、<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/user_interface/Page_actions#Page_actions_and_browser_actions">ページアクションとブラウザーアクション</a>を見てください。</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/15751/browser-action.png" style="display: block; height: 182px; margin-left: auto; margin-right: auto; width: 350px;"> ツールバーボタン (ブラウザーアクション) はアドレスバーボタン (ページアクション)とよく似ています。違いといつ使うかについてのガイダンスは、<a href="/ja/Add-ons/WebExtensions/user_interface/Page_actions#Page_actions_and_browser_actions">ページアクションとブラウザーアクション</a>を見てください。</p> <h2 id="Specifying_the_browser_action" name="Specifying_the_browser_action">ブラウザーアクションを指定する</h2> -<p>ブラウザーアクションのプロパティは manifest.json の <code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> キーで定義します。</p> +<p>ブラウザーアクションのプロパティは manifest.json の <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> キーで定義します。</p> <pre class="brush: json line-numbers language-json"><code class="language-json"><span class="key token">"browser_action":</span> <span class="punctuation token">{</span> <span class="key token">"default_icon":</span> <span class="punctuation token">{</span> @@ -25,7 +25,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action <p>唯一不可欠なキーは <code>default_icon</code> です。</p> -<p>ブラウザーアクションの指定には 2 つの方法があります: <a href="/ja/Add-ons/WebExtensions/Popups">ポップアップ</a>がつくのとつかないのです。 ポップアップを指定しないと、ユーザーがボタンをクリックした時に、拡張機能にイベントがディスパッチされ、これを拡張機能が <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/BrowserAction/onClicked" title="Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup."><code>browserAction.onClicked</code></a> を使ってリッスンします:</p> +<p>ブラウザーアクションの指定には 2 つの方法があります: <a href="/ja/Add-ons/WebExtensions/Popups">ポップアップ</a>がつくのとつかないのです。 ポップアップを指定しないと、ユーザーがボタンをクリックした時に、拡張機能にイベントがディスパッチされ、これを拡張機能が <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/BrowserAction/onClicked" title="Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup."><code>browserAction.onClicked</code></a> を使ってリッスンします:</p> <pre class="brush: js line-numbers language-js"><code class="language-js">browser<span class="punctuation token">.</span>browserAction<span class="punctuation token">.</span>onClicked<span class="punctuation token">.</span><span class="function token">addListener</span><span class="punctuation token">(</span>handleClick<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> @@ -33,7 +33,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action <p>拡張機能は 1 つだけのブラウザーアクションを持つ必要があります。</p> -<p>なお、上に示されている任意のプロパティは <code><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/API/browserAction">browserAction</a></code> API を使ったコードからも変更できます。</p> +<p>なお、上に示されている任意のプロパティは <code><a href="/ja/Add-ons/WebExtensions/API/browserAction">browserAction</a></code> API を使ったコードからも変更できます。</p> <h2 id="Icons" name="Icons">アイコン</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html b/files/ja/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html index 2df3fb0641..365eff5d3d 100644 --- a/files/ja/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html +++ b/files/ja/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html @@ -20,9 +20,9 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels <h2 id="Specifying_a_developer_tools_panel" name="Specifying_a_developer_tools_panel">開発ツールパネルを指定する</h2> -<p>開発ツールパネルは <code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/devtools.panels">devtools.panels</a></code> API を使って追加され、特別な開発ツールページから順番に実行されます。</p> +<p>開発ツールパネルは <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/devtools.panels">devtools.panels</a></code> API を使って追加され、特別な開発ツールページから順番に実行されます。</p> -<p>開発ツールのページを追加するには、拡張機能の <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> に <code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page">devtools_page</a></code> キーを入れて、 拡張機能内のそのページの HTML ファイルの場所を与えます:</p> +<p>開発ツールのページを追加するには、拡張機能の <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> に <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page">devtools_page</a></code> キーを入れて、 拡張機能内のそのページの HTML ファイルの場所を与えます:</p> <pre class="brush: json line-numbers language-json"><code class="language-json"><span class="key token">"devtools_page":</span> <span class="string token">"devtools-page.html"</span></code></pre> @@ -51,7 +51,7 @@ browser.devtools.panels.create( newPanel.onHidden.addListener(handleHidden); });</pre> -<p>拡張機能はインスペクターウィンドウの中で <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval"><code>devtools</code>.inspectedWindow.eval()</a></code> を使うか、バックグラウンドスクリプトからメッセージを渡してコンテンツスクリプトに挿入することで、コードを実行できます。この方法のより詳しくは <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a> を見てください。</p> +<p>拡張機能はインスペクターウィンドウの中で <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval"><code>devtools</code>.inspectedWindow.eval()</a></code> を使うか、バックグラウンドスクリプトからメッセージを渡してコンテンツスクリプトに挿入することで、コードを実行できます。この方法のより詳しくは <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a> を見てください。</p> <h2 id="Examples" name="Examples">開発パネルのデザイン</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html b/files/ja/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html index 08210629f2..53bb66dfcb 100644 --- a/files/ja/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html +++ b/files/ja/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html @@ -59,7 +59,7 @@ var creating = browser.windows.create(createData);</pre> browser.history.onVisited.addListener(onVisited);</pre> -<p>History API を使には <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a></code> で "history" <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">パーミッション</a> をリクエストする必要があります。</p> +<p>History API を使には <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a></code> で "history" <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">パーミッション</a> をリクエストする必要があります。</p> <h2 id="ウェブページのデザイン">ウェブページのデザイン</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/index.html b/files/ja/mozilla/add-ons/webextensions/user_interface/index.html index 0b7cd819de..47979aecc1 100644 --- a/files/ja/mozilla/add-ons/webextensions/user_interface/index.html +++ b/files/ja/mozilla/add-ons/webextensions/user_interface/index.html @@ -26,56 +26,56 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface <tbody> <tr> <td> - <p><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action">ブラウザーツールバーボタン</a>(ブラウザーアクション)</p> + <p><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action">ブラウザーツールバーボタン</a>(ブラウザーアクション)</p> </td> <td>ブラウザーツールバーのボタンで、クリック時に機能拡張にイベントを送る。既定では全てのタブででこのボタンが表示されている。</td> <td><img alt="Example showing a toolbar button (browser action)." src="https://mdn.mozillademos.org/files/15751/browser-action.png" style="height: 364px; width: 700px;"></td> </tr> <tr> <td> - <p><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">ポップアップ</a>付きのツールバーボタン</p> + <p><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">ポップアップ</a>付きのツールバーボタン</p> </td> <td>ボタンがクリックされた時の、ブラウザーツールバーのボタン上のポップアップ。ポップアップは、ユーザーインタラクションを扱う HTML 文書内で定義される。</td> <td><img alt="Example of the pop-up on a toolbar button" src="https://mdn.mozillademos.org/files/15753/popup-shadow.png" style="height: 624px; width: 700px;"></td> </tr> <tr> <td> - <p><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions">アドレスバーボタン</a>(ページアクション)</p> + <p><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions">アドレスバーボタン</a>(ページアクション)</p> </td> <td>ブラウザーアドレスバー上のボタンで、クリック時に機能拡張にイベントを送る。既定では、全てのタブでこのボタンは非表示。</td> <td><img alt="Example showing an address bar button (page action) " src="https://mdn.mozillademos.org/files/15745/address_bar_button.png" style="height: 348px; width: 700px;"></td> </tr> <tr> - <td><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">ポップアップ</a>付きのアドレスバーボタン</td> + <td><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">ポップアップ</a>付きのアドレスバーボタン</td> <td> <p>ブラウザーアドレスバーのボタン上のポップアップで、クリック時に開く。ポップアップは、ユーザーインタラクションを扱う HTML 文書内で定義される。</p> </td> <td><img alt="Example of a popup on the address bar button" src="https://mdn.mozillademos.org/files/15747/page_action_popup.png" style="height: 524px; width: 700px;"></td> </tr> <tr> - <td><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items">コンテキストメニュー項目</a></td> + <td><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items">コンテキストメニュー項目</a></td> <td>ブラウザーのコンテキストメニュー上の、メニュー項目や、チェックボックスや、ラジオボタン。また、メニューはセパレーターを追加して構造化もできる。メニュー項目がクリックされたとき、機能拡張にイベントが送られる。</td> <td><img alt="Example of content menu items added by a WebExtension, from the context-menu-demo example" src="https://mdn.mozillademos.org/files/15756/context_menu_example.png" style="height: 942px; width: 864px;"></td> </tr> <tr> - <td><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">サイドバー</a></td> + <td><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">サイドバー</a></td> <td> <p dir="ltr">ウェブページの隣に表示される HTML 文書で、ページ毎に固有なコンテンツを持つ。サイドバーは機能拡張がインストールされた時に開かれて、ユーザーのサイドバー可視化の選択に従う。サイドバー内のユーザーインタラクションは HTML 文書によって扱われる。</p> </td> <td><img alt="Example of a sidebar" src="https://mdn.mozillademos.org/files/15755/bookmarks-sidebar.png" style="height: 846px; width: 700px;"></td> </tr> <tr> - <td><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">オプションページ</a></td> + <td><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">オプションページ</a></td> <td>機能拡張に対してユーザーが変更できる設定値を決めるページ。ユーザーはブラウザーのアドオンマネージャーからこのページにアクセスできる。</td> <td><img alt="Example showing the options page content added in the favorite colors example." src="https://mdn.mozillademos.org/files/15748/options_page.png"></td> </tr> <tr> - <td><a href="https://developer.mozilla.org/Add-ons/WebExtensions/user_interface/Extension_pages">Extension page</a></td> + <td><a href="/Add-ons/WebExtensions/user_interface/Extension_pages">Extension page</a></td> <td>ウィンドウやタブの中で、フォームやヘルプやその他必要となるあらゆるコンテンツを提供するには、機能拡張に含めたウェブページを使います。</td> <td><img alt="Example of a simple bundled page displayed as a detached panel." src="https://mdn.mozillademos.org/files/15752/bundled_page_as_panel_small.png" style="height: 432px; width: 700px;"></td> </tr> <tr> - <td><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications">通知</a></td> + <td><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications">通知</a></td> <td>OS の通知の仕組みを通じてユーザーに表示される一時的な通知。ユーザーが通知をクリックした時や、(自動的に、あるいはユーザーが要求した場合の両方に)通知が閉じた時、機能拡張にイベントを送る。</td> <td><img alt="Example of an extension triggered system notification" src="https://mdn.mozillademos.org/files/15754/notify-shadowed.png" style="height: 294px; width: 780px;"></td> </tr> @@ -85,7 +85,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface <td><img alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15749/omnibox_example_small.png" style="height: 464px; width: 700px;"></td> </tr> <tr> - <td><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels">開発ツールパネル</a></td> + <td><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels">開発ツールパネル</a></td> <td>ブラウザーの開発ツール内で表示される、タブと関連 HTML 文書。</td> <td><img alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15746/developer_panel_tab.png" style="height: 224px; width: 700px;"></td> </tr> @@ -96,8 +96,8 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface <ul> <li><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Accessibility_guidelines">アクセシビリティガイドライン</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">ツールバーにボタンを追加する</a></li> + <li><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">ツールバーにボタンを追加する</a></li> <li><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles">ブラウザースタイル</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">開発ツールを拡張する</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">設定ページの実装</a></li> + <li><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">開発ツールを拡張する</a></li> + <li><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">設定ページの実装</a></li> </ul> diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/options_pages/index.html b/files/ja/mozilla/add-ons/webextensions/user_interface/options_pages/index.html index 524223bc00..150ebb72f6 100644 --- a/files/ja/mozilla/add-ons/webextensions/user_interface/options_pages/index.html +++ b/files/ja/mozilla/add-ons/webextensions/user_interface/options_pages/index.html @@ -17,8 +17,8 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Options_pages <ul> </ul> -<p>このページは、プログラムから <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/Runtime/openOptionsPage" title="If your add-on does not have an options page, or the browser failed to create one for some other reason, runtime.lastError will be set."><code>runtime.openOptionsPage()</code></a> を呼び出して開くこともできます。</p> -オプションページにおけるリソースの読み込み元や、<code><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code> のように安全でない処理は Content Security Policy によって制限されます。詳細は <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security Policy</a> を参照してください。 +<p>このページは、プログラムから <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/Runtime/openOptionsPage" title="If your add-on does not have an options page, or the browser failed to create one for some other reason, runtime.lastError will be set."><code>runtime.openOptionsPage()</code></a> を呼び出して開くこともできます。</p> +オプションページにおけるリソースの読み込み元や、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code> のように安全でない処理は Content Security Policy によって制限されます。詳細は <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security Policy</a> を参照してください。 <h2 id="Specifying_the_options_page" name="Specifying_the_options_page">オプションページを指定する</h2> @@ -42,18 +42,18 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Options_pages </html></pre> -<p>ページ内で動く JavaScript はアドオンが<a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">権限</a>を持つすべての <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/API">WebExtension APIs</a> を使うことができます。特に、設定を保管する <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/Storage" title="Enables WebExtensions to store and retrieve data, and listen for changes to stored items."><code>storage</code></a> API を使えます。</p> +<p>ページ内で動く JavaScript はアドオンが<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">権限</a>を持つすべての <a href="/ja/Add-ons/WebExtensions/API">WebExtension APIs</a> を使うことができます。特に、設定を保管する <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/Storage" title="Enables WebExtensions to store and retrieve data, and listen for changes to stored items."><code>storage</code></a> API を使えます。</p> <p>ページファイルを拡張機能の中にパッケージします.</p> -<p>manifest.json 内に <code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui">options_ui</a></code> キーも必要です、ここではページの URL を与えます。</p> +<p>manifest.json 内に <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui">options_ui</a></code> キーも必要です、ここではページの URL を与えます。</p> <pre class="brush: json">"options_ui": { "page": "options.html", "browser_style": true },</pre> -<p><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui">options_ui</a></code> ページを見てオプションページとバックグラウンド/コンテンツスクリプトとの間で<strong>オプションを共有する</strong>ことができます。</p> +<p><code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui">options_ui</a></code> ページを見てオプションページとバックグラウンド/コンテンツスクリプトとの間で<strong>オプションを共有する</strong>ことができます。</p> <h2 id="Examples" name="Examples">オプションコンテンツのデザイン</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/page_actions/index.html b/files/ja/mozilla/add-ons/webextensions/user_interface/page_actions/index.html index c285ad2670..2867a7f679 100644 --- a/files/ja/mozilla/add-ons/webextensions/user_interface/page_actions/index.html +++ b/files/ja/mozilla/add-ons/webextensions/user_interface/page_actions/index.html @@ -12,13 +12,13 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions <p><img alt="" src="https://mdn.mozillademos.org/files/12960/page-action.png" style="display: block; height: 262px; margin-left: auto; margin-right: auto; width: 850px;"></p> -<p>ウェブページに関係する機能のある時だけにこのボタンを使ってください。既定ではアドレスバーのボタンはすべてのタブにて隠されていて、<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/PageAction/show" title="Shows the page action for a given tab. The page action is shown whenever the given tab is the active tab."><code>pageAction.show()</code></a> と <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/PageAction/hide" title="Hides the page action for a given tab."><code>pageAction.hide()</code></a> を呼び出すことで、特定のタブ上での表示・非表示を制御します。</p> +<p>ウェブページに関係する機能のある時だけにこのボタンを使ってください。既定ではアドレスバーのボタンはすべてのタブにて隠されていて、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/PageAction/show" title="Shows the page action for a given tab. The page action is shown whenever the given tab is the active tab."><code>pageAction.show()</code></a> と <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/PageAction/hide" title="Hides the page action for a given tab."><code>pageAction.hide()</code></a> を呼び出すことで、特定のタブ上での表示・非表示を制御します。</p> <p><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Browser_action">ツールバーボタン</a>と比較して、似た振る舞いをしますが、そちらは拡張機能の機能が大抵のウェブページに適用できる状況で使われます。</p> <h2 id="Specifying_the_page_action" name="Specifying_the_page_action">ページアクションを指定する</h2> -<p>ページアクションのプロパティは manifest.json の <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a></code> キーで定義します。</p> +<p>ページアクションのプロパティは manifest.json の <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a></code> キーで定義します。</p> <pre class="brush: json line-numbers language-json"><code class="language-json"><span class="key token">"page_action":</span> <span class="punctuation token">{</span> <span class="key token">"browser_style":</span> <span class="keyword token">true</span><span class="punctuation token">,</span> @@ -31,15 +31,15 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions <p>唯一不可欠なキーは <code>default_icon</code> です。</p> -<p>ページアクションの指定には2つの方法があります: <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Popups">ポップアップ</a>がつくのとつかないのです。 ポップアップを指定しないと、ユーザーがボタンをクリックした時に、拡張機能にイベントがディスパッチされ、これを拡張機能が <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction/onClicked" title="Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup."><code>pageAction.onClicked</code></a>を使ってリッスンします:</p> +<p>ページアクションの指定には2つの方法があります: <a href="/ja/Add-ons/WebExtensions/Popups">ポップアップ</a>がつくのとつかないのです。 ポップアップを指定しないと、ユーザーがボタンをクリックした時に、拡張機能にイベントがディスパッチされ、これを拡張機能が <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/pageAction/onClicked" title="Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup."><code>pageAction.onClicked</code></a>を使ってリッスンします:</p> <pre class="brush: js line-numbers language-js"><code class="language-js">browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span>onClicked<span class="punctuation token">.</span><span class="function token">addListener</span><span class="punctuation token">(</span>handleClick<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> -<p>ポップアップを指定すると、クリックイベントはディスパッチされません: その代わりに、ユーザーがボタンをクリックした時にポップアップが表示されます。ユーザーはポップアップとやりとりできて、ユーザーが範囲外をクリックした時に自動的にポップアップが閉じます。ポップアップを作成、管理することの詳細は<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Popups">ポップアップ</a>の記事を見てください。</p> +<p>ポップアップを指定すると、クリックイベントはディスパッチされません: その代わりに、ユーザーがボタンをクリックした時にポップアップが表示されます。ユーザーはポップアップとやりとりできて、ユーザーが範囲外をクリックした時に自動的にポップアップが閉じます。ポップアップを作成、管理することの詳細は<a href="/ja/Add-ons/WebExtensions/Popups">ポップアップ</a>の記事を見てください。</p> <p>拡張機能は1つだけのページアクションを持つ必要があります。</p> -<p>なお、上に示されている任意のプロパティは<code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction">pageAction</a></code> API を使ったコードからも変更できます。</p> +<p>なお、上に示されている任意のプロパティは<code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/pageAction">pageAction</a></code> API を使ったコードからも変更できます。</p> <h2 id="Examples" name="Examples">例</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/popups/index.html b/files/ja/mozilla/add-ons/webextensions/user_interface/popups/index.html index 39fb8332c3..879b2a5e84 100644 --- a/files/ja/mozilla/add-ons/webextensions/user_interface/popups/index.html +++ b/files/ja/mozilla/add-ons/webextensions/user_interface/popups/index.html @@ -15,17 +15,17 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Popups <p><img alt="" src="https://mdn.mozillademos.org/files/15747/page_action_popup.png" style="display: block; height: 282px; margin-left: auto; margin-right: auto; width: 350px;"></p> -<p>ユーザーがボタンをクリックした時、ポップアップが表示されます。ポップアップの外をクリックすると、ポップアップは閉じます。ポップアップは、そこで実行しているスクリプトから <code><a href="https://developer.mozilla.org/ja/docs/Web/API/Window/close">window.close()</a></code> を呼ぶとプログラム的に閉じられます。しかし、拡張機能の JavaScript からプログラム的に開くことはできません。つまりユーザー操作への反応としてだけ開きます。</p> +<p>ユーザーがボタンをクリックした時、ポップアップが表示されます。ポップアップの外をクリックすると、ポップアップは閉じます。ポップアップは、そこで実行しているスクリプトから <code><a href="/ja/docs/Web/API/Window/close">window.close()</a></code> を呼ぶとプログラム的に閉じられます。しかし、拡張機能の JavaScript からプログラム的に開くことはできません。つまりユーザー操作への反応としてだけ開きます。</p> <p><code>"_execute_browser_action"</code> と <code>"_execute_page_action"</code> ショートカットを使って、ポップアップを開くキーボードショートカットを定義できます。manifest.json の <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/commands">commands</a></code><span class="hidden"> </span> キーの文書を見てください。</p> <h2 id="Specifying_a_popup" name="Specifying_a_popup">ポップアップを指定する</h2> -<p>通常の Web ページと同じく、ポップアップは HTML ファイルで定義されます（ここに CSS や JavaScript も含めることが可能です）。 ただし、拡張機能が持つ<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/permissions">パーミッション</a>の範囲で JavaScript から <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/API">WebExtension API</a> にアクセスできる点で通常のものとは異なります。</p> +<p>通常の Web ページと同じく、ポップアップは HTML ファイルで定義されます（ここに CSS や JavaScript も含めることが可能です）。 ただし、拡張機能が持つ<a href="/ja/Add-ons/WebExtensions/manifest.json/permissions">パーミッション</a>の範囲で JavaScript から <a href="/ja/Add-ons/WebExtensions/API">WebExtension API</a> にアクセスできる点で通常のものとは異なります。</p> <p>ポップアップの文書はポップアップが表示されるたびに読み込まれて、ポップアップが閉じるたびに開放されます。</p> -<p>HTML ファイルを拡張機能に入れるには、manifest.json内の <code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> か <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a> キーの <code>"default_popup"</code> にて指定します:</p> +<p>HTML ファイルを拡張機能に入れるには、manifest.json内の <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> か <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a> キーの <code>"default_popup"</code> にて指定します:</p> <pre class="brush: json"> "browser_action": { "default_icon": "icons/beasts-32.png", @@ -33,13 +33,13 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Popups "default_popup": "popup/choose_beast.html" }</pre> -<p>ブラウザーの UI と統一感を持たせるスタイルシートをポップアップに組み込めるようになりました。これを利用するためには、<code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> か <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a> キーで <code>"browser_style": true</code> を指定してください。</p> +<p>ブラウザーの UI と統一感を持たせるスタイルシートをポップアップに組み込めるようになりました。これを利用するためには、<code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> か <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a> キーで <code>"browser_style": true</code> を指定してください。</p> -<p>ポップアップにおけるリソースの読み込み元や、<code><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code> のように安全でない処理は Content Security Policy によって制限されます。詳細は <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security Policy</a> を参照してください。</p> +<p>ポップアップにおけるリソースの読み込み元や、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code> のように安全でない処理は Content Security Policy によって制限されます。詳細は <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security Policy</a> を参照してください。</p> <h2 id="Debugging_popups" name="Debugging_popups">ポップアップのデバッグ</h2> -<p>ポップアップのマークアップと JavaScript をアドオンデバッガーを使ってデバッグできます。しかしポップアップの自動非表示を不可として、ポップアップの外をクリックした時に隠れてしまうのを防ぐ必要があります。<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Debugging#Debugging_popups">ポップアップのデバッグを読んでください</a>。</p> +<p>ポップアップのマークアップと JavaScript をアドオンデバッガーを使ってデバッグできます。しかしポップアップの自動非表示を不可として、ポップアップの外をクリックした時に隠れてしまうのを防ぐ必要があります。<a href="/ja/Add-ons/WebExtensions/Debugging#Debugging_popups">ポップアップのデバッグを読んでください</a>。</p> <h2 id="Popup_resizing" name="Popup_resizing">ポップアップのリサイズ</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/what_are_webextensions/index.html b/files/ja/mozilla/add-ons/webextensions/what_are_webextensions/index.html index 18f9ae7071..398dcf175a 100644 --- a/files/ja/mozilla/add-ons/webextensions/what_are_webextensions/index.html +++ b/files/ja/mozilla/add-ons/webextensions/what_are_webextensions/index.html @@ -16,7 +16,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions <p>例: <a href="https://addons.mozilla.org/en-US/firefox/addon/amazon-browser-bar/">Amazon Assistant for Firefox</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/onenote-clipper/">OneNote Web Clipper</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/grammarly-1/">Grammarly for Firefox</a></p> -<p><strong>ユーザーの個性を見せる</strong>: ブラウザー機能拡張はユーザーによってブラウズされるページコンテンツを操作できます。例えば、ユーザーのお気に入りのロゴや写真を、訪れるすべてのページの背景として追加できます。拡張機能は Firefox UI の見た目を更新する力を与えることもできます (スタンドアローンの <a href="https://developer.mozilla.org/ja/Add-ons/Themes/Theme_concepts">テーマアドオン</a>を使っても同様に Firefox UI を更新できます)。</p> +<p><strong>ユーザーの個性を見せる</strong>: ブラウザー機能拡張はユーザーによってブラウズされるページコンテンツを操作できます。例えば、ユーザーのお気に入りのロゴや写真を、訪れるすべてのページの背景として追加できます。拡張機能は Firefox UI の見た目を更新する力を与えることもできます (スタンドアローンの <a href="/ja/Add-ons/Themes/Theme_concepts">テーマアドオン</a>を使っても同様に Firefox UI を更新できます)。</p> <p><img alt="" src="https://mdn.mozillademos.org/files/15809/MyWeb_New_Tab_add_on.png" style="height: 398px; width: 540px;"></p> @@ -28,7 +28,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions <p>例: <a href="https://addons.mozilla.org/en-US/firefox/addon/ublock-origin/">uBlock Origin</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/reader/">Reader</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/toolbox-google-play-store/">Toolbox for Google Play Store™</a></p> -<p><strong>ツールや新しいブラウズ機能を追加</strong>: タスクボードに新しい機能を追加したり、URL やハイパーリンクやページのテキストから QR コード画像を生成したりします。<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions">WebExtensions APIs</a> の柔軟な UI オプションや力を得て、ブラウザーに新機能を簡単に追加できます。そしてほぼあらゆるウェブサイトの機能を改良できて、それはあなたのウェブサイトだけとは限りません。</p> +<p><strong>ツールや新しいブラウズ機能を追加</strong>: タスクボードに新しい機能を追加したり、URL やハイパーリンクやページのテキストから QR コード画像を生成したりします。<a href="/ja/Add-ons/WebExtensions">WebExtensions APIs</a> の柔軟な UI オプションや力を得て、ブラウザーに新機能を簡単に追加できます。そしてほぼあらゆるウェブサイトの機能を改良できて、それはあなたのウェブサイトだけとは限りません。</p> <p><img alt="" src="https://mdn.mozillademos.org/files/15806/QR_Code_Image_Generator_add_on.png"></p> @@ -44,7 +44,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions <p>例: <a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/react-devtools/">Web React Developer Tools</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/">aXe Developer Tools</a></p> -<p>Firefox 用の拡張機能は <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions">WebExtensions APIs</a> を使って作成され、この API はクロスブラウザーで動作可能な拡張機能を開発するための技術です。この API の大半は、Google Chrome や Opera でサポートされている <a class="external external-icon" href="https://developer.chrome.com/extensions">extension API</a> と互換性があります。これらのブラウザー向けに書かれた拡張機能のほとんどは、少し<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Porting_from_Google_Chrome">変更を加えるだけで</a> Firefox や Microsoft Edge でも動かせるようになります。この API は完全に<a href="https://developer.mozilla.org/ja/Firefox/Multiprocess_Firefox">マルチプロセス Firefox</a> にも対応しています。</p> +<p>Firefox 用の拡張機能は <a href="/ja/Add-ons/WebExtensions">WebExtensions APIs</a> を使って作成され、この API はクロスブラウザーで動作可能な拡張機能を開発するための技術です。この API の大半は、Google Chrome や Opera でサポートされている <a class="external external-icon" href="https://developer.chrome.com/extensions">extension API</a> と互換性があります。これらのブラウザー向けに書かれた拡張機能のほとんどは、少し<a href="/ja/Add-ons/WebExtensions/Porting_from_Google_Chrome">変更を加えるだけで</a> Firefox や Microsoft Edge でも動かせるようになります。この API は完全に<a href="/ja/Firefox/Multiprocess_Firefox">マルチプロセス Firefox</a> にも対応しています。</p> <p>何かアイデアがあったり、レガシーアドオンを WebExtensions API に移植する手助けが必要な場合、ご連絡は <a class="external external-icon" href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons メーリングリスト</a> や <a href="https://chat.mozilla.org/#/room/#addons:mozilla.org">Add-ons room</a> や <a href="https://wiki.mozilla.org/Matrix">Matrix</a> までお願いします。英語のサポートです。</p> @@ -53,5 +53,5 @@ translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions <ul> <li>シンプルな拡張機能を一通り作成するには、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">初めての拡張機能</a>を参照してください。</li> <li>拡張機能の構成については <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">拡張機能の中身</a>を参照してください。</li> - <li><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Examples">拡張機能サンプル</a>にある拡張機能のサンプルを動かしてみましょう。</li> + <li><a href="/ja/Add-ons/WebExtensions/Examples">拡張機能サンプル</a>にある拡張機能のサンプルを動かしてみましょう。</li> </ul> diff --git a/files/ja/mozilla/add-ons/webextensions/working_with_files/index.html b/files/ja/mozilla/add-ons/webextensions/working_with_files/index.html index 299643f95c..a3ebf3d90f 100644 --- a/files/ja/mozilla/add-ons/webextensions/working_with_files/index.html +++ b/files/ja/mozilla/add-ons/webextensions/working_with_files/index.html @@ -29,7 +29,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Working_with_files <p>ユーザーが <code>saveAs</code> パラメーターで指定した場所にダウンロードさせることもできます。</p> <div class="note"> -<p>Using <a href="https://developer.mozilla.org/ja/docs/Web/API/URL/createObjectURL">URL.createObjectURL()</a> you can also download files and blobs defined in your JavaScript, which can include local content retrieved from IndexedDB.</p> +<p>Using <a href="/ja/docs/Web/API/URL/createObjectURL">URL.createObjectURL()</a> you can also download files and blobs defined in your JavaScript, which can include local content retrieved from IndexedDB.</p> </div> <p>ダウンロード API はダウンロードをキャンセル、停止、再開、消去、削除することもできます; ダウンロードマネージャーでダウンロード済みのファイルを探します; コンピューターのファイルマネージャーでダウンロード済みのファイルを表示します; 関連付けられたアプリケーションでそのファイルを開きます。</p> @@ -137,7 +137,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Working_with_files API References: <a href="https://rpl.github.io/idb-file-storage/">idb-file-storage library</a></p> <div class="note"> -<p>Note: You can also use the full Web <a href="https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API">IndexedDB API</a> to store data from your extension. This can be useful where you need to store data that isn’t handled well by the simple key/value pairs offered by the DOM <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/API/Storage">Storage API</a>.</p> +<p>Note: You can also use the full Web <a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB API</a> to store data from your extension. This can be useful where you need to store data that isn’t handled well by the simple key/value pairs offered by the DOM <a href="/ja/Add-ons/WebExtensions/API/Storage">Storage API</a>.</p> </div> <h2 id="Process_files_in_a_local_app" name="Process_files_in_a_local_app">ローカルアプリでファイルを処理する</h2> @@ -147,14 +147,14 @@ translation_of: Mozilla/Add-ons/WebExtensions/Working_with_files <p>You have two options:</p> <ul> - <li>Connection-based messaging. Here you trigger the process with runtime.connectNative(), which returns a <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/runtime/Port">runtime.Port</a> object. You can then pass a JSON message to the native application using the postMessage() function of Port. Using the onMessage.addListener() function of Port you can listen for messages from the native application. The native application is opened if it is not running when runtime.connectNative() is called and the application remains running until the extension calls Port.disconnect() or the page that connected to it is closed.</li> + <li>Connection-based messaging. Here you trigger the process with runtime.connectNative(), which returns a <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/runtime/Port">runtime.Port</a> object. You can then pass a JSON message to the native application using the postMessage() function of Port. Using the onMessage.addListener() function of Port you can listen for messages from the native application. The native application is opened if it is not running when runtime.connectNative() is called and the application remains running until the extension calls Port.disconnect() or the page that connected to it is closed.</li> <li>Connectionless messaging. Here you use runtime.sendNativeMessage() to send a JSON message to a new, temporary instance of the native application. The browser closes the native application after receiving any message back from the native application.</li> </ul> -<p>To add the file or blob you want the native application to process use <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">JSON.stringify()</a>.</p> +<p>To add the file or blob you want the native application to process use <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">JSON.stringify()</a>.</p> -<p>To use this method the extension must request the "nativeMessaging"<a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions"> permission</a> in its manifest.json file. Reciprocally, the native application must grant permission for the extension by including its ID in the "allowed_extensions" field of the app manifest.</p> +<p>To use this method the extension must request the "nativeMessaging"<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions"> permission</a> in its manifest.json file. Reciprocally, the native application must grant permission for the extension by including its ID in the "allowed_extensions" field of the app manifest.</p> <p>Example: <a href="https://github.com/mdn/webextensions-examples/tree/master/native-messaging">Native Messaging</a> (illustrates simple messaging only)<br> - Guides: <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Native_messaging">Native messaging</a><br> - API references: <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/API/runtime">runtime API</a></p> + Guides: <a href="/ja/Add-ons/WebExtensions/Native_messaging">Native messaging</a><br> + API references: <a href="/ja/Add-ons/WebExtensions/API/runtime">runtime API</a></p> diff --git a/files/ja/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/ja/mozilla/add-ons/webextensions/your_first_webextension/index.html index 4159864473..55e22732ba 100644 --- a/files/ja/mozilla/add-ons/webextensions/your_first_webextension/index.html +++ b/files/ja/mozilla/add-ons/webextensions/your_first_webextension/index.html @@ -60,7 +60,7 @@ cd borderify</pre> </ul> <div class="warning"> -<p><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID#When_do_you_need_an_Add-on_ID">時折、あなたの拡張機能用に ID を指定する必要があります</a>。アドオンの ID が必要なとき、<code>manifest.json</code> 内に <code><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/applications">applications</a></code> キーを入れて <code>gecko.id</code> プロパティをセットします:</p> +<p><a href="/ja/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID#When_do_you_need_an_Add-on_ID">時折、あなたの拡張機能用に ID を指定する必要があります</a>。アドオンの ID が必要なとき、<code>manifest.json</code> 内に <code><a href="/ja/Add-ons/WebExtensions/manifest.json/applications">applications</a></code> キーを入れて <code>gecko.id</code> プロパティをセットします:</p> <pre class="brush: json line-numbers language-json"><code class="language-json"><span class="key token">"applications":</span> <span class="punctuation token">{</span> <span class="key token">"gecko":</span> <span class="punctuation token">{</span> @@ -118,7 +118,7 @@ cd borderify</pre> <p>ここでインストールされたアドオンは Firefox を再起動するまで有効です。</p> -<p>あるいは、<a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a> ツールを使ってコマンドラインから拡張機能を実行することもできます。</p> +<p>あるいは、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a> ツールを使ってコマンドラインから拡張機能を実行することもできます。</p> <h3 id="Testing" name="Testing">テスト</h3> @@ -140,7 +140,7 @@ cd borderify</pre> <h2 id="Packaging_and_publishing" name="Packaging_and_publishing">パッケージ化と公開</h2> -<p>自分が作ったアドオンを他の人にも使ってもらうには、アドオンをパッケージとしてまとめた後、署名するために Mozilla へ送信する必要があります。詳細は<a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">拡張機能の公開</a>を参照してください。</p> +<p>自分が作ったアドオンを他の人にも使ってもらうには、アドオンをパッケージとしてまとめた後、署名するために Mozilla へ送信する必要があります。詳細は<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">拡張機能の公開</a>を参照してください。</p> <h2 id="Whats_next" name="What's_next">次のステップ</h2> diff --git a/files/ja/mozilla/add-ons/webextensions/your_second_webextension/index.html b/files/ja/mozilla/add-ons/webextensions/your_second_webextension/index.html index 97bf97b2e7..08646b2221 100644 --- a/files/ja/mozilla/add-ons/webextensions/your_second_webextension/index.html +++ b/files/ja/mozilla/add-ons/webextensions/your_second_webextension/index.html @@ -7,14 +7,14 @@ translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension original_slug: Mozilla/Add-ons/WebExtensions/Walkthrough --- <div>{{AddonSidebar}} -<p><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Your_first_WebExtension">初めての拡張機能</a>を一通り読んでいる場合、既に拡張機能の書き方を知っていることと思います。<span class="seoSummary">この記事では、API の使い方をより詳しく説明するため、前回よりも少し複雑なアドオンを書いてみます。</span></p> +<p><a href="/ja/Add-ons/WebExtensions/Your_first_WebExtension">初めての拡張機能</a>を一通り読んでいる場合、既に拡張機能の書き方を知っていることと思います。<span class="seoSummary">この記事では、API の使い方をより詳しく説明するため、前回よりも少し複雑なアドオンを書いてみます。</span></p> <p>この拡張機能では Firefox のツールバーにボタンを新しく追加します。ユーザーがこのボタンをクリックすると、動物を選択できるポップアップが表示されます。ユーザーが動物を選択すると、ウェブページのコンテンツが選択した動物の画像に置き換わります。</p> <p>これらの機能を以下のように実装していきます。</p> <ul> - <li><strong><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Browser_action">ブラウザーアクション </a></strong><strong>（Firefox のツールバーに表示させるボタン）を定義</strong><br> + <li><strong><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Browser_action">ブラウザーアクション </a></strong><strong>（Firefox のツールバーに表示させるボタン）を定義</strong><br> このボタン用に次のものを用意します。 <ul> <li>"beasts-32.png" というアイコン</li> @@ -88,18 +88,18 @@ cd beastify</pre> <span class="punctuation token">}</span></code></pre> <ul> - <li>最初の 3 つのキー <code><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code>、<code><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/name">name</a></code>、<code><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/version">version</a></code> は必須であり、拡張機能の基本的なメタデータを指定します</li> - <li><code><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/description">description</a></code> と <code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url">homepage_url</a></code> は省略可能ですが、設定しておくことをお勧めします。これは拡張機能についての役立つ情報となります</li> - <li><code><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> は省略可能ですが、設定しておくことをお勧めします。この値は拡張機能のアイコンを指定するものであり、アイコンはアドオンマネージャーに表示されます</li> - <li><code><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code> は拡張機能に必要なパーミッションのリストです。ここでは <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission"><code>activeTab</code> パーミッション </a> を要請しています</li> - <li><code><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> はツールバーのボタンを指定するものです。ここでは 3 つの情報を指定しています + <li>最初の 3 つのキー <code><a href="/ja/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code>、<code><a href="/ja/Add-ons/WebExtensions/manifest.json/name">name</a></code>、<code><a href="/ja/Add-ons/WebExtensions/manifest.json/version">version</a></code> は必須であり、拡張機能の基本的なメタデータを指定します</li> + <li><code><a href="/ja/Add-ons/WebExtensions/manifest.json/description">description</a></code> と <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url">homepage_url</a></code> は省略可能ですが、設定しておくことをお勧めします。これは拡張機能についての役立つ情報となります</li> + <li><code><a href="/ja/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> は省略可能ですが、設定しておくことをお勧めします。この値は拡張機能のアイコンを指定するものであり、アイコンはアドオンマネージャーに表示されます</li> + <li><code><a href="/ja/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code> は拡張機能に必要なパーミッションのリストです。ここでは <a href="/ja/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission"><code>activeTab</code> パーミッション </a> を要請しています</li> + <li><code><a href="/ja/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> はツールバーのボタンを指定するものです。ここでは 3 つの情報を指定しています <ul> <li><code>default_icon</code> ではボタンのアイコンを指定します（必須項目）</li> <li><code>default_title</code> ではツールチップの文字列を指定します（省略可）</li> <li><code>default_popup</code> ではユーザーがボタンをクリックした際に表示されるポップアップを指定します。今回はポップアップを表示させたいので、拡張機能に含める HTML ファイルを <code>defualt_popup</code> キーで指定しています</li> </ul> </li> - <li><code><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/web_accessible_resources">web_accessible_resources</a></code> はウェブページからアクセスしたいファイルのリストです。この拡張機能では、拡張機能に同梱した画像でウェブページを置き換えるため、画像をウェブページからアクセス可能にする必要があります</li> + <li><code><a href="/ja/Add-ons/WebExtensions/manifest.json/web_accessible_resources">web_accessible_resources</a></code> はウェブページからアクセスしたいファイルのリストです。この拡張機能では、拡張機能に同梱した画像でウェブページを置き換えるため、画像をウェブページからアクセス可能にする必要があります</li> </ul> <p>パスはすべて manifest.json 自身からの相対パスで指定することに注意します。</p> @@ -168,7 +168,7 @@ touch choose_beast.html choose_beast.css choose_beast.js</code></pre> <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> -<p><code>"popup-content"</code> という ID の <code><a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/div"><div></a></code> 要素があって、動物の選択をする要素が入っています。<code>"error-content"</code> という ID の <code><div></code> 要素と <code>"hidden"</code> クラスもあります。それはポップアップの初期化に問題がある場合に使います。</p> +<p><code>"popup-content"</code> という ID の <code><a href="/ja/docs/Web/HTML/Element/div"><div></a></code> 要素があって、動物の選択をする要素が入っています。<code>"error-content"</code> という ID の <code><div></code> 要素と <code>"hidden"</code> クラスもあります。それはポップアップの初期化に問題がある場合に使います。</p> <p>通常のウェブページと同じように CSS と JS ファイルを読み込んでいることに注意してください。</p> @@ -312,9 +312,9 @@ browser<span class="punctuation token">.</span>tabs<span class="punctuation toke <span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>listenForClicks<span class="punctuation token">)</span> <span class="punctuation token">.</span><span class="keyword token">catch</span><span class="punctuation token">(</span>reportExecuteScriptError<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> -<p>開始するのは 96行です。ポップアップスクリプトはポップアップが読み込まれ次第、アクティブなタブのコンテンツスクリプトを実行し、その手段は <code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript">browser.tabs.executeScript()</a></code> API です。コンテンツスクリプトの実行が成功したら、タブが閉じられるかユーザーが別のページに移動するまで、コンテンツスクリプトがページにロードされたままになります。</p> +<p>開始するのは 96行です。ポップアップスクリプトはポップアップが読み込まれ次第、アクティブなタブのコンテンツスクリプトを実行し、その手段は <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript">browser.tabs.executeScript()</a></code> API です。コンテンツスクリプトの実行が成功したら、タブが閉じられるかユーザーが別のページに移動するまで、コンテンツスクリプトがページにロードされたままになります。</p> -<p><code>browser.tabs.executeScript()</code> の呼び出しがよく失敗する理由は、コンテンツスクリプトをすべてのページでは実行できないことです。例えば、about:debugging のような権限のあるブラウザーページでは実行できませんし、<a href="https://addons.mozilla.org/">addons.mozilla.org</a> ドメイン内のページでも実行できません。失敗した場合、<code>reportExecuteScriptError()</code> は <code>"popup-content"</code> <code><div></code> を隠して、<code>"error-content"</code> <code><div></code> を表示し、エラーを <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Debugging">console</a> にログ出力します。</p> +<p><code>browser.tabs.executeScript()</code> の呼び出しがよく失敗する理由は、コンテンツスクリプトをすべてのページでは実行できないことです。例えば、about:debugging のような権限のあるブラウザーページでは実行できませんし、<a href="https://addons.mozilla.org/">addons.mozilla.org</a> ドメイン内のページでも実行できません。失敗した場合、<code>reportExecuteScriptError()</code> は <code>"popup-content"</code> <code><div></code> を隠して、<code>"error-content"</code> <code><div></code> を表示し、エラーを <a href="/ja/Add-ons/WebExtensions/Debugging">console</a> にログ出力します。</p> <p>コンテンツスクリプトの実行が成功したら、<code>listenForClicks()</code> を呼び出します。これはポップアップのクリックをリッスンします。</p> @@ -327,14 +327,14 @@ browser<span class="punctuation token">.</span>tabs<span class="punctuation toke <ul> <li>特定の動物画像を指す URL をボタンクリックに割り当てる</li> - <li>CSS を挿入してページの全コンテンツを隠し、その手段は <code><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/API/tabs/insertCSS">browser.tabs.insertCSS()</a></code> API</li> - <li>コンテンツスクリプトに "beastify" 送り、その手段は <code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage">browser.tabs.sendMessage()</a></code> API。ページを動物化するか尋ねて、動物画像への URL を渡す</li> + <li>CSS を挿入してページの全コンテンツを隠し、その手段は <code><a href="/ja/Add-ons/WebExtensions/API/tabs/insertCSS">browser.tabs.insertCSS()</a></code> API</li> + <li>コンテンツスクリプトに "beastify" 送り、その手段は <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage">browser.tabs.sendMessage()</a></code> API。ページを動物化するか尋ねて、動物画像への URL を渡す</li> </ul> <p><code>reset()</code> 関数は動物化を取り消す:</p> <ul> - <li>追加した CSS を削除し、その手段は <code><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/API/tabs/removeCSS">browser.tabs.removeCSS()</a></code> API</li> + <li>追加した CSS を削除し、その手段は <code><a href="/ja/Add-ons/WebExtensions/API/tabs/removeCSS">browser.tabs.removeCSS()</a></code> API</li> <li>コンテンツスクリプトにページをリセットする "reset" メッセージを送る</li> </ul> @@ -393,10 +393,10 @@ browser<span class="punctuation token">.</span>tabs<span class="punctuation toke <p>このコンテンツスクリプトが最初にすることは、グローバル変数の <code>window.hasRun</code> のチェックです: セットされていればスクリプトは早くリターンし、そうでなければ <code>window.hasRun</code> をセットして処理し続けます。こうする理由は、ユーザーがポップアップを開くたびに、ポップアップはアクティブなタブのコンテンツスクリプトを実行して、そのために 1 つのタブに複数の実行スクリプトのインスタンスができてしまいます。これが起きると、最初のインスタンスだけが処理するのを確かめる必要があります。</p> -<p>その次に、始まる場所は 40行で、ここでコンテンツスクリプトはポップアップからのメッセージをリッスンし、その手段は <code><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/API/runtime/onMessage">browser.runtime.onMessage</a></code> API です。上で見たように、ポップアップスクリプトは 2種類の異なるメッセージを送ります: "beastify" と "reset"</p> +<p>その次に、始まる場所は 40行で、ここでコンテンツスクリプトはポップアップからのメッセージをリッスンし、その手段は <code><a href="/ja/Add-ons/WebExtensions/API/runtime/onMessage">browser.runtime.onMessage</a></code> API です。上で見たように、ポップアップスクリプトは 2種類の異なるメッセージを送ります: "beastify" と "reset"</p> <ul> - <li>メッセージが "beastify" なら、動物画像を指す URL が含まれるはずです。以前の "beastify" 呼び出しで追加された動物をすべて削除して、<code><a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/img"><img></a></code> 要素を作成、追加して、その <code>src</code> 属性に動物の URL をセットします。</li> + <li>メッセージが "beastify" なら、動物画像を指す URL が含まれるはずです。以前の "beastify" 呼び出しで追加された動物をすべて削除して、<code><a href="/ja/docs/Web/HTML/Element/img"><img></a></code> 要素を作成、追加して、その <code>src</code> 属性に動物の URL をセットします。</li> <li>メッセージが "reset" なら、ただ追加された動物をすべて削除します。</li> </ul> @@ -445,7 +445,7 @@ browser<span class="punctuation token">.</span>tabs<span class="punctuation toke <h2 id="Developing_from_the_command_line" name="Developing_from_the_command_line">コマンドラインから開発する</h2> -<p>仮インストールを <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a> ツールを用いて自動化できます。次を試してください:</p> +<p>仮インストールを <a href="/ja/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a> ツールを用いて自動化できます。次を試してください:</p> <pre class="brush: bash line-numbers language-bash"><code class="language-bash">cd beastify web-ext run</code></pre> diff --git a/files/ja/mozilla/firefox/index.html b/files/ja/mozilla/firefox/index.html index 4f8a1ebffa..9b3972f601 100644 --- a/files/ja/mozilla/firefox/index.html +++ b/files/ja/mozilla/firefox/index.html @@ -34,7 +34,7 @@ translation_of: Mozilla/Firefox <h3 id="Firefox_Nightly">Firefox Nightly</h3> -<p>毎晩、私たちは <a href="https://developer.mozilla.org/ja/docs/mozilla-central">mozilla-central</a> の最新コードから Firefox をビルドします。これらのビルドは、Firefox 開発者や、最新の最先端の機能をまだ積極的に開発している最中に試してみたい方向けです。</p> +<p>毎晩、私たちは <a href="/ja/docs/mozilla-central">mozilla-central</a> の最新コードから Firefox をビルドします。これらのビルドは、Firefox 開発者や、最新の最先端の機能をまだ積極的に開発している最中に試してみたい方向けです。</p> <p><a class="external external-icon" href="https://nightly.mozilla.org/" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Firefox Nightly のダウンロード</a></p> diff --git a/files/ja/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html b/files/ja/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html index d8bd9c829c..f500c316d7 100644 --- a/files/ja/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html +++ b/files/ja/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html @@ -10,17 +10,17 @@ original_slug: Adapting_XUL_Applications_for_Firefox_1.5 --- <p> </p> -<p>このページでは、<a href="ja/Firefox_1.5">Firefox 1.5</a> の変更点のうち、XUL アプリケーション開発者に影響するものについて、リストで示します。</p> +<p>このページでは、<a href="/ja/Firefox_1.5">Firefox 1.5</a> の変更点のうち、XUL アプリケーション開発者に影響するものについて、リストで示します。</p> <h3 id=".E4.BB.95.E6.A7.98.E3.81.AE.E5.A4.89.E6.9B.B4" name=".E4.BB.95.E6.A7.98.E3.81.AE.E5.A4.89.E6.9B.B4">仕様の変更</h3> <ul> - <li><a href="ja/Tree_Widget_Changes">ツリーウィジェット関連の変更点</a></li> - <li><a href="ja/International_characters_in_XUL_JavaScript">XUL JavaScript での国際文字サポート</a> (拡張 (Extension)で使用する JavaScript に、非 ASCII 文字を含む場合のみ関係します)</li> - <li><a href="ja/XMLHttpRequest_changes_for_Gecko1.8">XMLHttpRequest の変更点</a></li> - <li><a href="ja/XUL_Changes_for_Firefox_1.5">Firefox 1.5 における XUL の変更点</a></li> - <li><a href="ja/XPCNativeWrapper">XPCNativeWrapper</a> がデフォルトになりました。このため、1.0.x と比較して、いくつか挙動 (behavior)が変わっています。</li> - <li>より簡単な <a href="ja/Chrome_Registration">Chrome Registration</a> が採用されたことにより、contents.rdf は、非推奨 (deprecate)になりました。</li> + <li><a href="/ja/Tree_Widget_Changes">ツリーウィジェット関連の変更点</a></li> + <li><a href="/ja/International_characters_in_XUL_JavaScript">XUL JavaScript での国際文字サポート</a> (拡張 (Extension)で使用する JavaScript に、非 ASCII 文字を含む場合のみ関係します)</li> + <li><a href="/ja/XMLHttpRequest_changes_for_Gecko1.8">XMLHttpRequest の変更点</a></li> + <li><a href="/ja/XUL_Changes_for_Firefox_1.5">Firefox 1.5 における XUL の変更点</a></li> + <li><a href="/ja/XPCNativeWrapper">XPCNativeWrapper</a> がデフォルトになりました。このため、1.0.x と比較して、いくつか挙動 (behavior)が変わっています。</li> + <li>より簡単な <a href="/ja/Chrome_Registration">Chrome Registration</a> が採用されたことにより、contents.rdf は、非推奨 (deprecate)になりました。</li> <li>オーバーレイされたコンテキストメニュー関連:<br> 関数 gContextMenu.linkURL() は、gContextMenu.getLinkURL() に名称が変更され、linkURL は、プロパティに変更されました。後方互換性 (backwards-compatible)を確保するためには以下のようにしてください。<br> url = 'getLinkURL' in gContextMenu ? gContextMenu.getLinkURL() : gContextMenu.linkURL();</li> @@ -29,6 +29,6 @@ original_slug: Adapting_XUL_Applications_for_Firefox_1.5 <h3 id=".E3.81.9D.E3.81.AE.E4.BB.96.E3.81.AE.E6.83.85.E5.A0.B1" name=".E3.81.9D.E3.81.AE.E4.BB.96.E3.81.AE.E6.83.85.E5.A0.B1">その他の情報</h3> <ul> - <li><a href="ja/Using_nsIXULAppInfo">nsIXULAppInfo を使用してアプリケーションのバージョンをチェックする方法</a></li> + <li><a href="/ja/Using_nsIXULAppInfo">nsIXULAppInfo を使用してアプリケーションのバージョンをチェックする方法</a></li> <li><a class="external" href="http://kb.mozillazine.org/Dev_:_Extensions_:_Cross-Version_Compatibility_Techniques">MozillaZine</a></li> </ul> diff --git a/files/ja/mozilla/firefox/releases/1.5/changing_the_priority_of_http_requests/index.html b/files/ja/mozilla/firefox/releases/1.5/changing_the_priority_of_http_requests/index.html index 4d7772e52a..4303c2a7d4 100644 --- a/files/ja/mozilla/firefox/releases/1.5/changing_the_priority_of_http_requests/index.html +++ b/files/ja/mozilla/firefox/releases/1.5/changing_the_priority_of_http_requests/index.html @@ -9,11 +9,11 @@ translation_of: Mozilla/Firefox/Releases/1.5/Changing_the_priority_of_HTTP_reque <h3 id="イントロダクション">イントロダクション</h3> -<p>In <a href="/en/Firefox_1.5_for_developers" title="en/Firefox_1.5_for_developers">Firefox 1.5</a> (Gecko 1.8), an API was added to support changing the priority of <a href="/en/HTTP" title="en/HTTP">HTTP</a> requests. Prior to this, there was no way to directly indicate that a request was of a different priority. The API is defined in <a href="/en/nsISupportsPriority" title="en/nsISupportsPriority">nsISupportsPriority</a>, but is defined in very generic terms so that any object can implement this interface to enable the concept of priority. This article deals specifically with using that interface to change the priority of HTTP requests.</p> +<p>In <a href="/ja/Firefox_1.5_for_developers" title="en/Firefox_1.5_for_developers">Firefox 1.5</a> (Gecko 1.8), an API was added to support changing the priority of <a href="/ja/HTTP" title="en/HTTP">HTTP</a> requests. Prior to this, there was no way to directly indicate that a request was of a different priority. The API is defined in <a href="/ja/nsISupportsPriority" title="en/nsISupportsPriority">nsISupportsPriority</a>, but is defined in very generic terms so that any object can implement this interface to enable the concept of priority. This article deals specifically with using that interface to change the priority of HTTP requests.</p> <p>At the time of this writing, changing the priority of an HTTP request only affects the order in which connection attempts are made. This means that the priority only has an effect when there are more connections (to a server) than are allowed.</p> -<p>The examples in this document are all written in <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> using <a href="/en/XPCOM" title="en/XPCOM">XPCOM</a>.</p> +<p>The examples in this document are all written in <a href="/ja/JavaScript" title="en/JavaScript">JavaScript</a> using <a href="/ja/XPCOM" title="en/XPCOM">XPCOM</a>.</p> <h3 id="APIの使用">APIの使用</h3> @@ -21,7 +21,7 @@ translation_of: Mozilla/Firefox/Releases/1.5/Changing_the_priority_of_HTTP_reque <h4 id="Accessing_priority_from_an_nsIChannel">Accessing priority from an nsIChannel</h4> -<p>To change the priority of an HTTP request, you need access to the <a href="/en/XPCOM_Interface_Reference/nsIChannel" title="en/XPCOM_Interface_Reference/nsIChannel">nsIChannel</a> that the request is being made on. If you do not have an existing channel, then you can create one as follows:</p> +<p>To change the priority of an HTTP request, you need access to the <a href="/ja/XPCOM_Interface_Reference/nsIChannel" title="en/XPCOM_Interface_Reference/nsIChannel">nsIChannel</a> that the request is being made on. If you do not have an existing channel, then you can create one as follows:</p> <pre class="eval">var ios = Components.classes["@<a class="linkification-ext external" href="http://mozilla.org/network/io-service;1">mozilla.org/network/io-service;1</a>"] .getService(Components.interfaces.nsIIOService); @@ -29,7 +29,7 @@ var ch = ios.newChannel("<a class="linkification-ext external" href="http://www. </pre> <p><br> - Once you have an <a href="/en/XPCOM_Interface_Reference/nsIChannel" title="en/XPCOM_Interface_Reference/nsIChannel">nsIChannel</a>, you can access the priority as follows:</p> + Once you have an <a href="/ja/XPCOM_Interface_Reference/nsIChannel" title="en/XPCOM_Interface_Reference/nsIChannel">nsIChannel</a>, you can access the priority as follows:</p> <pre class="eval">if (ch instanceof Components.interfaces.nsISupportsPriority) { ch.priority = Components.interfaces.nsISupportsPriority.PRIORITY_LOWEST; @@ -40,7 +40,7 @@ var ch = ios.newChannel("<a class="linkification-ext external" href="http://www. <h4 id="Getting_an_nsIChannel_from_XMLHttpRequest">Getting an nsIChannel from XMLHttpRequest</h4> -<p>If you are programming in <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>, you will probably want to use <a href="/en/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a>, a much higher level abstraction of an HTTP request. You can access the <code>channel</code> member of an <a href="/en/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a> once you have called the <code>open</code> method on it, as follows:</p> +<p>If you are programming in <a href="/ja/JavaScript" title="en/JavaScript">JavaScript</a>, you will probably want to use <a href="/ja/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a>, a much higher level abstraction of an HTTP request. You can access the <code>channel</code> member of an <a href="/ja/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a> once you have called the <code>open</code> method on it, as follows:</p> <pre class="eval">var req = new XMLHttpRequest(); req.open("GET", "<a class="linkification-ext external" href="http://www.example.com">http://www.example.com</a>", false); @@ -51,11 +51,11 @@ req.send(null); </pre> <p><br> - Note that this example uses a synchronous <a href="/en/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a>, which you should not use in practice.</p> + Note that this example uses a synchronous <a href="/ja/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a>, which you should not use in practice.</p> <h4 id="優先順位の調整">優先順位の調整</h4> -<p><a href="/en/nsISupportsPriority#adjustPriority" title="en/nsISupportsPriority#adjustPriority">nsISupportsPriority</a> includes a convenience method named <code>adjustPriority</code>. You should use this if you want to alter the priority of a request by a certain amount. For example, if you would like to make a request have slightly higher priority than it currently has, you could do the following:</p> +<p><a href="/ja/nsISupportsPriority#adjustPriority" title="en/nsISupportsPriority#adjustPriority">nsISupportsPriority</a> includes a convenience method named <code>adjustPriority</code>. You should use this if you want to alter the priority of a request by a certain amount. For example, if you would like to make a request have slightly higher priority than it currently has, you could do the following:</p> <pre class="eval">// assuming we already have a nsIChannel from above if (ch instanceof Components.interfaces.nsISupportsPriority) { diff --git a/files/ja/mozilla/firefox/releases/13/index.html b/files/ja/mozilla/firefox/releases/13/index.html index 3b59a7e858..96c14c3448 100644 --- a/files/ja/mozilla/firefox/releases/13/index.html +++ b/files/ja/mozilla/firefox/releases/13/index.html @@ -28,8 +28,8 @@ translation_of: Mozilla/Firefox/Releases/13 <h3 id="JavaScript">JavaScript</h3> <ul> - <li>ECMAScript 6 の <a href="/en/JavaScript/Reference/Statements/for...of" title="for...of"><code>for..of</code></a> 構造をサポートしました。</li> - <li>ECMAScript 6 の <a href="/en/JavaScript/Reference/Global_Objects/Map" title="en/JavaScript/Reference/Global_Objects/Map"><code>Map</code></a> と <a href="/en/JavaScript/Reference/Global_Objects/Set" title="en/JavaScript/Reference/Global_Objects/Set"><code>Set</code></a> オブジェクトの実験的サポートを実装しました。</li> + <li>ECMAScript 6 の <a href="/ja/JavaScript/Reference/Statements/for...of" title="for...of"><code>for..of</code></a> 構造をサポートしました。</li> + <li>ECMAScript 6 の <a href="/ja/JavaScript/Reference/Global_Objects/Map" title="en/JavaScript/Reference/Global_Objects/Map"><code>Map</code></a> と <a href="/ja/JavaScript/Reference/Global_Objects/Set" title="en/JavaScript/Reference/Global_Objects/Set"><code>Set</code></a> オブジェクトの実験的サポートを実装しました。</li> </ul> <h3 id="DOM">DOM</h3> @@ -52,7 +52,7 @@ translation_of: Mozilla/Firefox/Releases/13 <h3 id="UA_文字列">UA 文字列</h3> <ul> - <li>Android 版 Firefox は、フォームファクタを示すため <a href="/en/Gecko_user_agent_string_reference#Mobile_and_Tablet_indicators" title="en/Gecko_user_agent_string_reference#Mobile_and_Tablet_indicators">UserAgent 文字列に Tablet または Mobile のトークンを含むようになり</a>、Fennec トークンは持たなくなりました。また "Gecko/" に続く数値は、フリーズした日付から Gecko のバージョン番号に変わります。</li> + <li>Android 版 Firefox は、フォームファクタを示すため <a href="/ja/Gecko_user_agent_string_reference#Mobile_and_Tablet_indicators" title="en/Gecko_user_agent_string_reference#Mobile_and_Tablet_indicators">UserAgent 文字列に Tablet または Mobile のトークンを含むようになり</a>、Fennec トークンは持たなくなりました。また "Gecko/" に続く数値は、フリーズした日付から Gecko のバージョン番号に変わります。</li> <li>UA 文字列では、Gecko のパッチ番号やリリース状況をバージョン番号で公開しないようになりました。バージョン番号は常に "X.Y" という形式になり、X はメジャーリリース番号、Y はマイナー番号を表します。例えば、"13.0" や "14.1" となります。"14.0.1b1" のようにはなりません。</li> </ul> @@ -72,7 +72,7 @@ translation_of: Mozilla/Firefox/Releases/13 <ul> <li>{{ MathMLElement("mtable") }} 要素で <code>width</code> 属性をサポートしました ({{ bug("722880") }})。</li> - <li>数学的なテキストで <a class="external" href="http://cdn.mathjax.org/mathjax/latest/fonts/HTML-CSS/TeX/otf/" rel="external">MathJax fonts</a> をデフォルトフォントとして使用するようになりました。詳しくは <a href="/en/Mozilla_MathML_Project/Fonts" title="Fonts for Mozilla's MathML engine">Fonts for Mozilla's MathML engine</a> をご覧ください。</li> + <li>数学的なテキストで <a class="external" href="http://cdn.mathjax.org/mathjax/latest/fonts/HTML-CSS/TeX/otf/" rel="external">MathJax fonts</a> をデフォルトフォントとして使用するようになりました。詳しくは <a href="/ja/Mozilla_MathML_Project/Fonts" title="Fonts for Mozilla's MathML engine">Fonts for Mozilla's MathML engine</a> をご覧ください。</li> </ul> <h3 id="Developer_tools">Developer tools</h3> @@ -111,7 +111,7 @@ translation_of: Mozilla/Firefox/Releases/13 <li>ソースエディタの API に、ダーティフラグのサポートを追加しました。</li> <li>ソースエディタは、Orion を利用せずに {{ HTMLElement("textarea") }} へフォールバックする動作をサポートしなくなりました。</li> <li>エディタが focus と blue のイベントを公開するようになりました。</li> - <li><a href="/en/JavaScript_code_modules/source-editor.jsm#getIndentationString%28%29" title="en/JavaScript_code_modules/source-editor.jsm#getIndentationString%28%29"><code>getIndentationString()</code></a> メソッドを追加しました。これは、エディタでテキストのインデントに使用する文字を返します。</li> + <li><a href="/ja/JavaScript_code_modules/source-editor.jsm#getIndentationString%28%29" title="en/JavaScript_code_modules/source-editor.jsm#getIndentationString%28%29"><code>getIndentationString()</code></a> メソッドを追加しました。これは、エディタでテキストのインデントに使用する文字を返します。</li> <li>ソースエディタで、ブレークポイントのリストの管理とブレークポイントのオン・オフを切り替えるユーザインタフェースの表示をサポートしました。ただし実際は、ブレークポイントを実装していません。そのためのデバッガのコードを記述するのはあなた次第です。</li> <li><code>highlightCurrentLine</code> 設定オプションを用いて、カレント行をハイライトする機能をサポートしました。</li> </ul> @@ -119,7 +119,7 @@ translation_of: Mozilla/Firefox/Releases/13 <h3 id="ARIA">ARIA</h3> <ul> - <li>CSS プロパティ {{ cssxref("margin-left") }}、{{ cssxref("margin-right") }}、{{ cssxref("margin-top") }}、および {{ cssxref("margin-bottom") }} はすべて、同じ名前で ARIA オブジェクトに反映されます。詳しくは <a href="/en/Accessibility/AT-APIs/Gecko/Attrs" title="Gecko Object Attributes">Gecko object attributes</a> をご覧ください。</li> + <li>CSS プロパティ {{ cssxref("margin-left") }}、{{ cssxref("margin-right") }}、{{ cssxref("margin-top") }}、および {{ cssxref("margin-bottom") }} はすべて、同じ名前で ARIA オブジェクトに反映されます。詳しくは <a href="/ja/Accessibility/AT-APIs/Gecko/Attrs" title="Gecko Object Attributes">Gecko object attributes</a> をご覧ください。</li> </ul> <h3 id="インタフェースの変更">インタフェースの変更</h3> diff --git a/files/ja/mozilla/firefox/releases/14/index.html b/files/ja/mozilla/firefox/releases/14/index.html index be3496df2a..a294950a5b 100644 --- a/files/ja/mozilla/firefox/releases/14/index.html +++ b/files/ja/mozilla/firefox/releases/14/index.html @@ -24,7 +24,7 @@ translation_of: Mozilla/Firefox/Releases/14 <h3 id="DOM">DOM</h3> <ul> - <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><a href="/ja/DOM/DOM_event_reference/input">input</a> イベントが <a href="/ja/DOM/Element.contentEditable" title="en/DOM/Element.contentEditable">contenteditable</a> エディタをホストしている要素および <a href="/ja/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> @@ -51,7 +51,7 @@ translation_of: Mozilla/Firefox/Releases/14 <h3 id="HTTP">HTTP</h3> -<p>Gecko で新しい <a href="/en/HTTP" title="HTTP">HTTP</a> <a href="/en/HTTP/HTTP_response_codes#308" title="https://developer.mozilla.org/en/HTTP/HTTP_response_codes#308"><code>308 Permanent Redirect</code></a> ステータスコードがサポートされます。Gecko は永続的リダイレクトと一時的リダイレクトを区別しないので、308 ステータスコードは <a href="/en/HTTP/HTTP_response_codes#307" title="https://developer.mozilla.org/en/HTTP/HTTP_response_codes#307"><code>307 Temporary Redirect</code></a> コードのように振る舞います。307 同様に、ユーザエージェントが 2 つのリクエスト間で HTTP メソッドを変更することは禁止されます (<code>POST</code> は <code>POST のままであり、</code><code>GET</code> は <code>GET のままです</code>)。</p> +<p>Gecko で新しい <a href="/ja/HTTP" title="HTTP">HTTP</a> <a href="/ja/HTTP/HTTP_response_codes#308" title="https://developer.mozilla.org/en/HTTP/HTTP_response_codes#308"><code>308 Permanent Redirect</code></a> ステータスコードがサポートされます。Gecko は永続的リダイレクトと一時的リダイレクトを区別しないので、308 ステータスコードは <a href="/ja/HTTP/HTTP_response_codes#307" title="https://developer.mozilla.org/en/HTTP/HTTP_response_codes#307"><code>307 Temporary Redirect</code></a> コードのように振る舞います。307 同様に、ユーザエージェントが 2 つのリクエスト間で HTTP メソッドを変更することは禁止されます (<code>POST</code> は <code>POST のままであり、</code><code>GET</code> は <code>GET のままです</code>)。</p> <h2 id="Mozilla_開発者とアドオン開発者向けの変更点">Mozilla 開発者とアドオン開発者向けの変更点</h2> @@ -62,7 +62,7 @@ translation_of: Mozilla/Firefox/Releases/14 <ul> <li>現在の選択範囲をコメントアウトする、もしくは、コメントアウトを解除するためのキーボードショートカットが追加されました（Ctrl-/ もしくは Mac OS X では Cmd-/）。</li> <li>現在のブロックの開始と終端にテキスト入力位置を移動するための Ctrl-[ および Ctrl-] キーボードショートカットが追加されました。</li> - <li>新しく <a href="/en/JavaScript_code_modules/source-editor.jsm#getLineStart%28%29" title="en/JavaScript_code_modules/source-editor.jsm#getLineStart%28%29"><code>getLineStart()</code></a> <code>および </code><a href="/en/JavaScript_code_modules/source-editor.jsm#getLineEnd%28%29" title="en/JavaScript_code_modules/source-editor.jsm#getLineEnd%28%29"><code>getLineEnd()</code></a> メソッドが追加されました。</li> + <li>新しく <a href="/ja/JavaScript_code_modules/source-editor.jsm#getLineStart%28%29" title="en/JavaScript_code_modules/source-editor.jsm#getLineStart%28%29"><code>getLineStart()</code></a> <code>および </code><a href="/ja/JavaScript_code_modules/source-editor.jsm#getLineEnd%28%29" title="en/JavaScript_code_modules/source-editor.jsm#getLineEnd%28%29"><code>getLineEnd()</code></a> メソッドが追加されました。</li> </ul> <h3 id="XUL">XUL</h3> @@ -75,7 +75,7 @@ translation_of: Mozilla/Firefox/Releases/14 <ul> <li>{{ interface("nsILocalFile") }} インタフェースは {{ interface("nsIFile") }} にマージされました。 (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=682360">bug 682360</a>).</li> - <li>ブックマークをインポートするための {{ interface("nsIPlacesImportExportService") }} におけるメソッドは <code><a href="/en/JavaScript_code_modules/BookmarkHTMLUtils.jsm" title="en/JavaScript_code_modules/BookmarkHTMLUtils.jsm">BookmarkHTMLUtils.jsm</a></code> JavaScript コードモジュールの利用を促すために削除されました。</li> + <li>ブックマークをインポートするための {{ interface("nsIPlacesImportExportService") }} におけるメソッドは <code><a href="/ja/JavaScript_code_modules/BookmarkHTMLUtils.jsm" title="en/JavaScript_code_modules/BookmarkHTMLUtils.jsm">BookmarkHTMLUtils.jsm</a></code> JavaScript コードモジュールの利用を促すために削除されました。</li> <li>{{ interface("nsIDOMGeoPositionAddress") }} インターフェースは削除されました。</li> </ul> diff --git a/files/ja/mozilla/firefox/releases/16/index.html b/files/ja/mozilla/firefox/releases/16/index.html index 2231d2c016..fb351b717b 100644 --- a/files/ja/mozilla/firefox/releases/16/index.html +++ b/files/ja/mozilla/firefox/releases/16/index.html @@ -89,7 +89,7 @@ translation_of: Mozilla/Firefox/Releases/16 <h2 id="Open_Web_App_開発者向けの変更点">Open Web App 開発者向けの変更点</h2> <ul> - <li>Initial <a href="https://developer.mozilla.org/en-US/docs/Apps/Getting_Started">Open Web App support</a> has been implemented in the desktop versions of Firefox (that is, on Windows, Mac OS X, and Linux).</li> + <li>Initial <a href="/ja/docs/Apps/Getting_Started">Open Web App support</a> has been implemented in the desktop versions of Firefox (that is, on Windows, Mac OS X, and Linux).</li> </ul> <h2 id="アドオンと_Mozilla_開発者向け">アドオンと Mozilla 開発者向け</h2> diff --git a/files/ja/mozilla/firefox/releases/2/security_changes/index.html b/files/ja/mozilla/firefox/releases/2/security_changes/index.html index 29205f5a8e..9815c0bad4 100644 --- a/files/ja/mozilla/firefox/releases/2/security_changes/index.html +++ b/files/ja/mozilla/firefox/releases/2/security_changes/index.html @@ -9,7 +9,7 @@ translation_of: Mozilla/Firefox/Releases/2/Security_changes <h2 id="Weak_ciphers_disabled_by_default" name="Weak_ciphers_disabled_by_default">Weak ciphers disabled by default</h2> -<p><a href="/en/Firefox_2_for_developers" title="en/Firefox_2_for_developers">Firefox 2</a> disables SSLv2 and the weak "export" cipher suites (those with key lengths less than 64 bits) by default, in favor of SSLv3. This provides improved security.</p> +<p><a href="/ja/Firefox_2_for_developers" title="en/Firefox_2_for_developers">Firefox 2</a> disables SSLv2 and the weak "export" cipher suites (those with key lengths less than 64 bits) by default, in favor of SSLv3. This provides improved security.</p> <p>The preferred encryption methods are <code>TLS_DHE_DSS_WITH_3DES_EDE_CBC_SHA</code> and <code>TLS_RSA_WITH_3DES_EDE_CBC_SHA</code>. Some servers refer to these as <code>SSL_DHE_DSS_WITH_3DES_EDE_CBC_SHA</code> and <code>SSL_RSA_WITH_3DES_EDE_CBC_SHA</code>.</p> @@ -29,4 +29,4 @@ translation_of: Mozilla/Firefox/Releases/2/Security_changes <h2 id="Security_improved_for_the_jar_protocol">Security improved for the jar: protocol</h2> -<p>In order to correct a potential security problem when using the <code>jar:</code> protocol, it's now necessary to serve JAR files with the MIME type <code>application/java-archive</code>. See <a href="/en/Security_and_the_jar_protocol" title="en/Security and the jar protocol">Security and the jar protocol</a> for further details.</p> +<p>In order to correct a potential security problem when using the <code>jar:</code> protocol, it's now necessary to serve JAR files with the MIME type <code>application/java-archive</code>. See <a href="/ja/Security_and_the_jar_protocol" title="en/Security and the jar protocol">Security and the jar protocol</a> for further details.</p> diff --git a/files/ja/mozilla/firefox/releases/2/updating_extensions/index.html b/files/ja/mozilla/firefox/releases/2/updating_extensions/index.html index 82943ffe55..d993e66fb1 100644 --- a/files/ja/mozilla/firefox/releases/2/updating_extensions/index.html +++ b/files/ja/mozilla/firefox/releases/2/updating_extensions/index.html @@ -11,7 +11,7 @@ original_slug: Updating_extensions_for_Firefox_2 <h2 id="Step_1:_Update_the_install_manifest">ステップ 1: インストール定義ファイルの更新</h2> -<p>最初のステップ -- ほとんどの拡張機能で唯一必要なこと -- は、<a href="ja/Install_Manifests">インストール定義</a>ファイル install.rdf を更新し、Firefox 2 との互換性を持たせることです。 +<p>最初のステップ -- ほとんどの拡張機能で唯一必要なこと -- は、<a href="/ja/Install_Manifests">インストール定義</a>ファイル install.rdf を更新し、Firefox 2 との互換性を持たせることです。 </p> <p>単純に、Firefox の最大互換バージョンを指示する行を探します (次のように Firefox 1.5 向けになっています)。</p> @@ -31,7 +31,7 @@ original_slug: Updating_extensions_for_Firefox_2 <p>Firefox 2 はデフォルトのテーマに変更を加えています。さらに、一部のユーザインタフェース要素が変更、または移動されているため、あなたの拡張機能の XUL オーバーレイに依存する部分が影響を受けます。 </p> -<p>拡張機能の XUL オーバーレイに影響する変更箇所について学ぶには、<a href="ja/Theme_changes_in_Firefox_2">Firefox 2 におけるテーマの変更点</a>の記事に目を通してください。 +<p>拡張機能の XUL オーバーレイに影響する変更箇所について学ぶには、<a href="/ja/Theme_changes_in_Firefox_2">Firefox 2 におけるテーマの変更点</a>の記事に目を通してください。 </p> <h2 id="Step_3:_Test">ステップ 3: テスト</h2> @@ -43,4 +43,4 @@ original_slug: Updating_extensions_for_Firefox_2 <p><a class=" external" href="https://addons.mozilla.org" rel="freelink">http://addons.mozilla.org</a> 上のあなたの拡張機能のエントリーを更新してください。ユーザが更新を見つけられるようになります。</p> -<p>さらに、あなたの拡張機能のインストール定義ファイルで <code><a href="ja/Install_Manifests#updateURL">updateURL</a></code> を提供している場合は、必ず update manifest を更新し、Firefox が自動的に拡張機能の新バージョンを見つけられるようにしてください。こうすることによって、ユーザが Firefox 2 にアップグレードした後で最初にあなたの拡張機能を実行した時、新バージョンを自動的にインストールさせることができます。</p> +<p>さらに、あなたの拡張機能のインストール定義ファイルで <code><a href="/ja/Install_Manifests#updateURL">updateURL</a></code> を提供している場合は、必ず update manifest を更新し、Firefox が自動的に拡張機能の新バージョンを見つけられるようにしてください。こうすることによって、ユーザが Firefox 2 にアップグレードした後で最初にあなたの拡張機能を実行した時、新バージョンを自動的にインストールさせることができます。</p> diff --git a/files/ja/mozilla/firefox/releases/21/index.html b/files/ja/mozilla/firefox/releases/21/index.html index 3be041c1ce..de9437bf6f 100644 --- a/files/ja/mozilla/firefox/releases/21/index.html +++ b/files/ja/mozilla/firefox/releases/21/index.html @@ -21,7 +21,7 @@ translation_of: Mozilla/Firefox/Releases/21 <ul> <li>旧式の JavaScript 拡張である <a href="/ja/docs/E4X" title="/ja/docs/E4X">E4X</a> を削除しました。Gecko しか実装せず、有意な牽引力は得られませんでした ({{bug("788293")}})。</li> - <li><a href="https://developer.mozilla.org/ja/docs/JavaScript/Reference/Global_Objects/parseInt" title="JavaScript/Reference/Global_Objects/parseInt">parseInt</a> は、先頭が "0" の文字列を 8 進数として扱わないようになりました ({{bug("786135")}})。</li> + <li><a href="/ja/docs/JavaScript/Reference/Global_Objects/parseInt" title="JavaScript/Reference/Global_Objects/parseInt">parseInt</a> は、先頭が "0" の文字列を 8 進数として扱わないようになりました ({{bug("786135")}})。</li> </ul> <h3 id="CSS">CSS</h3> diff --git a/files/ja/mozilla/firefox/releases/29/index.html b/files/ja/mozilla/firefox/releases/29/index.html index 1d72ac15d5..ebf97fc6b8 100644 --- a/files/ja/mozilla/firefox/releases/29/index.html +++ b/files/ja/mozilla/firefox/releases/29/index.html @@ -115,7 +115,7 @@ translation_of: Mozilla/Firefox/Releases/29 <h2 id="Changes_for_add-on_and_Mozilla_developers" name="Changes_for_add-on_and_Mozilla_developers">アドオン開発者と Mozilla 開発者向けの変更点</h2> <ul> - <li><a href="/en-US/Firefox/Australis_add-on_compat">Australis and add-on compatibility</a> - Firefox のユーザインターフェイスに関与する拡張機能のほとんどに影響する、Firefox テーマの主要な変更点です。</li> + <li><a href="/ja/Firefox/Australis_add-on_compat">Australis and add-on compatibility</a> - Firefox のユーザインターフェイスに関与する拡張機能のほとんどに影響する、Firefox テーマの主要な変更点です。</li> <li><code>nsISecurityCheckedComponent</code> を削除しました ({{bug(794943)}})。利用者のほとんどは、インターフェイスの定義から nsISecurityCheckedComponent を単純に削除してかまいません。これで動作し続けるでしょう。</li> </ul> diff --git a/files/ja/mozilla/firefox/releases/3.5/index.html b/files/ja/mozilla/firefox/releases/3.5/index.html index ccb733174c..2d05b82163 100644 --- a/files/ja/mozilla/firefox/releases/3.5/index.html +++ b/files/ja/mozilla/firefox/releases/3.5/index.html @@ -153,18 +153,18 @@ translation_of: Mozilla/Firefox/Releases/3.5 <h3 id="Other_improvements">その他の改善</h3> <ul> - <li>Text ノードの <code><a class="internal" href="/en-US/docs/Web/API/Text/wholeText" rel="internal">wholeText</a></code> プロパティ と <code><a class="internal" href="/en-US/docs/Web/API/Text/replaceWholeText" rel="internal">replaceWholeText()</a></code> メソッドが実装されました。</li> - <li><code><a class="internal" href="/en-US/docs/Web/API/Element/children" rel="internal">element.children</a></code> プロパティが追加されました。これは与えられた要素の子要素の<em>コレクション</em>を返します。</li> + <li>Text ノードの <code><a class="internal" href="/ja/docs/Web/API/Text/wholeText" rel="internal">wholeText</a></code> プロパティ と <code><a class="internal" href="/ja/docs/Web/API/Text/replaceWholeText" rel="internal">replaceWholeText()</a></code> メソッドが実装されました。</li> + <li><code><a class="internal" href="/ja/docs/Web/API/Element/children" rel="internal">element.children</a></code> プロパティが追加されました。これは与えられた要素の子要素の<em>コレクション</em>を返します。</li> <li>{{ domxref("element.contentEditable") }} プロパティに対応するようになり、編集可能な要素に対応するようになりました。</li> - <li>DOM <a class="internal" href="/en-US/docs/Web/API/Element" rel="internal">Element</a> オブジェクトで Element Traversal API がサポートされました。</li> - <li>HTML document ノードを <a class="internal" href="/en-US/docs/Web/API/Node/cloneNode"><code>cloneNode()</code></a> を用いて複製できるようになりました。</li> - <li>非標準であるDOM の <code>getBoxObjectFor()</code> メソッドが削除されました。代わりとして <a class="internal" href="/en-US/docs/Web/API/Element/getBoundingClientRect"><code>getBoundingClientRect()</code></a> を利用すべきです。</li> + <li>DOM <a class="internal" href="/ja/docs/Web/API/Element" rel="internal">Element</a> オブジェクトで Element Traversal API がサポートされました。</li> + <li>HTML document ノードを <a class="internal" href="/ja/docs/Web/API/Node/cloneNode"><code>cloneNode()</code></a> を用いて複製できるようになりました。</li> + <li>非標準であるDOM の <code>getBoxObjectFor()</code> メソッドが削除されました。代わりとして <a class="internal" href="/ja/docs/Web/API/Element/getBoundingClientRect"><code>getBoundingClientRect()</code></a> を利用すべきです。</li> <li>伝達された DOM イベントを再伝達できるようになりました。これにより Firefox 3.5 は Acid 3 test 30 をパスします。</li> <li>DOM 2 Range ハンドリングが改善されました。</li> - <li>非 Chrome スコープにおいて、例外でキャッチされるオブジェクトがスローされたオブジェクトを含む <a class="internal" href="/en-US/docs/XPConnect">XPConnect</a> ラッパーではなく実際にスローされたオブジェクトになりました。</li> + <li>非 Chrome スコープにおいて、例外でキャッチされるオブジェクトがスローされたオブジェクトを含む <a class="internal" href="/ja/docs/XPConnect">XPConnect</a> ラッパーではなく実際にスローされたオブジェクトになりました。</li> <li>SVG ID 参照が動的な変更に対応するようになりました。</li> <li>SVG フィルターが <code>foreignObject</code> でも動作するようになりました。</li> - <li>互換性のために <code>GetSVGDocument()</code> メソッドが <a class="internal" href="/en-US/docs/Web/HTML/Element/object"><code>object</code></a> および <a class="internal" href="/en-US/docs/Web/HTML/Element/iframe"><code>iframe</code></a> 要素に追加されました。</li> + <li>互換性のために <code>GetSVGDocument()</code> メソッドが <a class="internal" href="/ja/docs/Web/HTML/Element/object"><code>object</code></a> および <a class="internal" href="/ja/docs/Web/HTML/Element/iframe"><code>iframe</code></a> 要素に追加されました。</li> <li>JavaScript においてオブジェクトおよび配列の初期化子によるプロパティの暗黙的な設定ではセッターの定義を行わないようになりました。詳細は <a href="/web-tech/2009/04/29/object-and-array-initializers-should-not-invoke-setters-when-evaluated" title="web-tech/2009/04/29/object-and-array-initializers-should-not-invoke-setters-when-evaluated/">オブジェクトおよび配列の初期化子は評価時にセッターの定義を行うべきではない</a> というブログ投稿を参照してください。</li> <li><code>gDownloadLastDir.path</code> 変数は、パスではなく {{ interface("nsIFile") }} を参照しているので、 <code>gDownloadLastDir.file</code> に名称変更されました。</li> <li><code>gDownloadLastDirPath</code> 変数は、パスではなく {{ interface("nsIFile") }} を参照しているので、 <code>gDownloadLastDirFile</code> に名称変更されました。</li> @@ -178,31 +178,31 @@ translation_of: Mozilla/Firefox/Releases/3.5 <h4 id="New_components_and_functionality">新しいコンポーネントと機能</h4> <dl> - <dt><a class="internal" href="/en-US/Supporting_private_browsing_mode">プライベートブラウジングモードのサポート</a></dt> + <dt><a class="internal" href="/ja/Supporting_private_browsing_mode">プライベートブラウジングモードのサポート</a></dt> <dd>Firefox 3.5 ではプライベートブラウジングモードが提供されます。これはユーザの活動を記録しません。拡張はこの記事で挙げるガイドラインに従ってプライベートブラウジングをサポートすることができます。</dd> - <dt><a class="internal" href="/en-US/Security_changes_in_Firefox_3.5">Firefox 3.5 でのセキュリティの変更</a></dt> + <dt><a class="internal" href="/ja/Security_changes_in_Firefox_3.5">Firefox 3.5 でのセキュリティの変更</a></dt> <dd>この記事は Firefox 3.5 でのセキュリティ関連の変更をカバーしています。</dd> - <dt><a class="internal" href="/en-US/Theme_changes_in_Firefox_3.5">Firefox 3.5 でのテーマの変更</a></dt> + <dt><a class="internal" href="/ja/Theme_changes_in_Firefox_3.5">Firefox 3.5 でのテーマの変更</a></dt> <dd>この記事は Firefox 3.5 でのテーマ関連の変更をカバーしています。</dd> - <dt><a class="internal" href="/en-US/Monitoring_WiFi_access_points">WiFi アクセスポイントのモニタリング</a></dt> + <dt><a class="internal" href="/ja/Monitoring_WiFi_access_points">WiFi アクセスポイントのモニタリング</a></dt> <dd>UniversalXPConnect 特権を持つコードで有効なアクセスポイントの一覧がモニタリング可能になり、個々の SSIDs、MAC アドレス、シグナル強度の情報が取得できます。 これを Geolocation と連携して用いることで WiFi ベースのロケーションサービスを提供できます。</dd> </dl> <h4 id="Notable_changes_and_improvements">注目すべき変更と改善</h4> <ul> - <li>XUL <code><a class="internal" href="/en-US/docs/XUL/textbox" rel="internal">textbox</a></code> ウィジェットが検索フィールドとして利用するための <code><a class="internal" href="/en-US/docs/XUL/Attribute/textbox.type" rel="internal">search</a></code> type を提供するようになりました。</li> - <li>ウィンドウ間のタブのドラッグ＆ドロップのサポートのために、<a class="internal" href="/en-US/docs/XUL/browser"><code>browser</code></a> ウィジェットに <a class="internal" href="/en-US/XUL/Method/SwapDocShells"><code>swapDocShells()</code></a> メソッドが定義されました。</li> - <li><a class="internal" href="/en-US/docs/XUL/panel"><code>panel</code></a> 要素に <a class="internal" href="/en-US/docs/XUL/Attribute/panel.level"><code>level</code></a> 属性が追加されました。 これは panel を他のアプリケーションの手前に表示するか、単純に panel が含まれるウィンドウの手前に表示するかどうかを指定できます。</li> + <li>XUL <code><a class="internal" href="/ja/docs/XUL/textbox" rel="internal">textbox</a></code> ウィジェットが検索フィールドとして利用するための <code><a class="internal" href="/ja/docs/XUL/Attribute/textbox.type" rel="internal">search</a></code> type を提供するようになりました。</li> + <li>ウィンドウ間のタブのドラッグ＆ドロップのサポートのために、<a class="internal" href="/ja/docs/XUL/browser"><code>browser</code></a> ウィジェットに <a class="internal" href="/ja/XUL/Method/SwapDocShells"><code>swapDocShells()</code></a> メソッドが定義されました。</li> + <li><a class="internal" href="/ja/docs/XUL/panel"><code>panel</code></a> 要素に <a class="internal" href="/ja/docs/XUL/Attribute/panel.level"><code>level</code></a> 属性が追加されました。 これは panel を他のアプリケーションの手前に表示するか、単純に panel が含まれるウィンドウの手前に表示するかどうかを指定できます。</li> <li>XUL 要素が <code>clientHeight</code>、<code>clientWidth</code>、<code>scrollHeight</code>、<code>scrollWidth </code> プロパティをサポートするようになりました。</li> - <li><a class="internal" href="/en-US/docs/XUL/keyset"><code>keyset</code></a>s now include a <code>disabled</code> 要素に <code>disabled</code> 属性が追加されました。</li> - <li>加えて、 <code>keyset</code> 要素はノードの <a class="internal" href="/en-US/docs/Web/API/Node/removeChild"><code>removeChild()</code></a> メソッドを用いて削除可能になりました。</li> - <li><code><a href="/en-US/docs/mozIStorageStatement" rel="internal">mozIStorageStatement</a></code> には <code>initialize()</code> メソッドがありましたが、削除されました。利用者は新しいステートメントオブジェクトを得るための代替として <code><a href="/en-US/docs/mozIStorageConnection#createStatement()" rel="internal">createStatement()</a></code> メソッドを使うべきです。</li> - <li><a class="internal" href="/en-US/docs/Storage">Storage</a> API が非同期リクエストのサポートを提供するようになりました。</li> - <li><a class="internal" href="/en-US/docs/XPCOM_Interface_Reference/nsICookie2"><code>nsICookie2</code></a> インターフェースに新しく <code>creationTime</code> 属性が追加され、Cookie が作成された時間を取得できるようになりました。</li> - <li>プロトコルが登録することを許可されることを保証するために Chrome 登録の間にチェックされる <code><a class="internal" href="/en-US/docs/nsIProtocolHandler" rel="internal">nsIProtocolHandler</a></code> へのフラグが追加されました (<code>URI_IS_LOCAL_RESOURCE</code>)。</li> + <li><a class="internal" href="/ja/docs/XUL/keyset"><code>keyset</code></a>s now include a <code>disabled</code> 要素に <code>disabled</code> 属性が追加されました。</li> + <li>加えて、 <code>keyset</code> 要素はノードの <a class="internal" href="/ja/docs/Web/API/Node/removeChild"><code>removeChild()</code></a> メソッドを用いて削除可能になりました。</li> + <li><code><a href="/ja/docs/mozIStorageStatement" rel="internal">mozIStorageStatement</a></code> には <code>initialize()</code> メソッドがありましたが、削除されました。利用者は新しいステートメントオブジェクトを得るための代替として <code><a href="/ja/docs/mozIStorageConnection#createStatement()" rel="internal">createStatement()</a></code> メソッドを使うべきです。</li> + <li><a class="internal" href="/ja/docs/Storage">Storage</a> API が非同期リクエストのサポートを提供するようになりました。</li> + <li><a class="internal" href="/ja/docs/XPCOM_Interface_Reference/nsICookie2"><code>nsICookie2</code></a> インターフェースに新しく <code>creationTime</code> 属性が追加され、Cookie が作成された時間を取得できるようになりました。</li> + <li>プロトコルが登録することを許可されることを保証するために Chrome 登録の間にチェックされる <code><a class="internal" href="/ja/docs/nsIProtocolHandler" rel="internal">nsIProtocolHandler</a></code> へのフラグが追加されました (<code>URI_IS_LOCAL_RESOURCE</code>)。</li> <li>Linux で Firefox がプラグインを探すために <code>/usr/lib/mozilla/plugins</code> を見るようになりました。以前にサポートされていた場所も同様に検索対象です。</li> - <li>プラグイン API がプライベートブラウジングモードのサポートを含むために更新されました。これにより、<code>NPNprivateModeBool</code> を用いているプライベートブラウジングモードの状態を調べるために、 <a class="internal" href="/en-US/docs/NPN_GetValue"><code>NPN_GetValue()</code></a> を使用できるようになりました。</li> + <li>プラグイン API がプライベートブラウジングモードのサポートを含むために更新されました。これにより、<code>NPNprivateModeBool</code> を用いているプライベートブラウジングモードの状態を調べるために、 <a class="internal" href="/ja/docs/NPN_GetValue"><code>NPN_GetValue()</code></a> を使用できるようになりました。</li> </ul> <h2 id="New_features_for_end_users">エンドユーザ向け新機能</h2> diff --git a/files/ja/mozilla/firefox/releases/3.6/index.html b/files/ja/mozilla/firefox/releases/3.6/index.html index 5439c782c1..9ba4ef27ba 100644 --- a/files/ja/mozilla/firefox/releases/3.6/index.html +++ b/files/ja/mozilla/firefox/releases/3.6/index.html @@ -65,7 +65,7 @@ translation_of: Mozilla/Firefox/Releases/3.6 <h3 id="JavaScript">JavaScript</h3> -<p>Gecko 1.9.2 は JavaScript 1.8.2 を採用し、<a href="/En/JavaScript/ECMAScript_5_support_in_Mozilla" title="https://developer.mozilla.org/En/JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5 standard</a> から多くの言語機能が追加されました:</p> +<p>Gecko 1.9.2 は JavaScript 1.8.2 を採用し、<a href="/ja/JavaScript/ECMAScript_5_support_in_Mozilla" title="https://developer.mozilla.org/En/JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5 standard</a> から多くの言語機能が追加されました:</p> <ul> <li><a href="/ja/docs/JavaScript/Reference/Global_Objects/Date/parse" title="Core JavaScript 1.5 Reference/Global Objects/Date/parse"><code>Date.parse()</code></a> は YYYY-MM-DD のような ISO 8601 dates をデコードできるようになりました。</li> @@ -76,7 +76,7 @@ translation_of: Mozilla/Firefox/Releases/3.6 <dl> <dt>Web workers が自己終了可能に</dt> - <dd>Workers が <code><a href="https://developer.mozilla.org/ja/docs/XPCOM_Interface_Reference/nsIWorkerScope#close()">nsIWorkerScope.close()</a></code> メソッドをサポートし、自分自身で終了できるようになりました。</dd> + <dd>Workers が <code><a href="/ja/docs/XPCOM_Interface_Reference/nsIWorkerScope#close()">nsIWorkerScope.close()</a></code> メソッドをサポートし、自分自身で終了できるようになりました。</dd> <dt>ドラッグ＆ドロップがファイルをサポート</dt> <dd>ドラッグリスナーで提供される <a href="/ja/docs/DragDrop/DataTransfer" title="DragDrop/DataTransfer"><code>DataTransfer</code></a> オブジェクトがドラッグされたファイルを含むようになりました。</dd> <dt><a href="/ja/docs/Detecting_device_orientation" title="Detecting device orientation">デバイスの傾きの検出</a></dt> @@ -93,7 +93,7 @@ translation_of: Mozilla/Firefox/Releases/3.6 <li>chrome に対してのみアクセス可能な新しい <a class="internal" href="/ja/docs/DOM/window.mozScreenPixelsPerCSSPixel" title="DOM/window.mozScreenPixelsPerCSSPixel"><code>mozScreenPixelsPerCSSPixel</code></a> プロパティは CSS ピクセルとスクリーン・ピクセルの変換率を提供します。この値はコンテンツのズームレベルに応じて変化します。</li> <li>ページ URI の文書フラグメント識別子（"#" (ハッシュ) 文字の後の部分）が変更になったとき、新たな <code>hashchange</code> イベントがページに送られます。<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=385434" title="FIXED: Add support for HTML5 onhashchange (event for named anchor changes)">バグ 385434</a>、<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=504837" title="FIXED: hashchange event should not be restricted to firing only when the document's ready state is "complete"">バグ 504837</a>、および <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=504220" title="FIXED: document.body and window should contain onhashchange attribute">バグ 504220</a> を参照してください。</li> <li><code>document.readystate で</code> <code>complete </code>属性がサポートされました。<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=347174" title='FIXED: Implement document.readystate == "complete"'>バグ 347174</a>。</li> - <li>HTML5 の <code><a class="internal" href="/en/DOM/element.classList" title="element.classList">element.classList</a></code> がサポートされ、クラス属性の処理が容易になりました。<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=501257" title="FIXED: Implement HTML 5's HTMLElement.classList property">バグ 501257</a></li> + <li>HTML5 の <code><a class="internal" href="/ja/DOM/element.classList" title="element.classList">element.classList</a></code> がサポートされ、クラス属性の処理が容易になりました。<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=501257" title="FIXED: Implement HTML 5's HTMLElement.classList property">バグ 501257</a></li> <li>HTML 文書の <code>localName</code> と <code>namespaceURI</code> が XHTML 文書と同じように振舞うようになりました。<code>localName</code> は小文字で値を返し、HTML 要素の <code>namespaceURI</code> は <code>"<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>"</code> です。</li> <li><code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMGeoPositionAddress" title="">nsIDOMGeoPositionAddress</a></code> インタフェースによりジオロケーションの address がサポートされ、新しいフィールドが <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMGeoPosition" title="">nsIDOMGeoPosition</a></code> に追加されました。<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=503942" title="FIXED: Implement Geolocation Addresses">バグ 503942</a></li> <li><a href="/ja/docs/Web/API/Window/getComputedStyle" title="要素の算出スタイルを返します。算出スタイルは、要素に対して適用される全ての CSS プロパティにおいて最終的に算出された値です。"><code>window.getComputedStyle</code></a> 関数は <code>url()</code> 値の中をクォートして返すようになりました。</li> @@ -125,7 +125,7 @@ translation_of: Mozilla/Firefox/Releases/3.6 <ul> <li>Places のクエリーは結果にリダイレクトされたページが含んでいるかどうかを特定できるように <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsINavHistoryQueryOptions" title="">nsINavHistoryQueryOptions</a></code> インタフェースで <code>redirectsMode</code> を利用できるようになりました。</li> - <li>新しい <code><a href="https://developer.mozilla.org/ja/docs/XPCOM_Interface_Reference/nsIFaviconService#expireAllFavicons()">nsIFaviconService.expireAllFavicons()</a></code> メソッドが <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFaviconService" title="">nsIFaviconService</a></code> インターフェースに追加されました。</li> + <li>新しい <code><a href="/ja/docs/XPCOM_Interface_Reference/nsIFaviconService#expireAllFavicons()">nsIFaviconService.expireAllFavicons()</a></code> メソッドが <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFaviconService" title="">nsIFaviconService</a></code> インターフェースに追加されました。</li> </ul> <h3 id="Storage">Storage</h3> @@ -144,7 +144,7 @@ translation_of: Mozilla/Firefox/Releases/3.6 <h3 id="Preferences">Preferences</h3> <ul> - <li><code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIContentPrefService" title="">nsIContentPrefService</a></code> インタフェースが新しく二つのメソッドを持ちました: <code><a href="https://developer.mozilla.org/ja/docs/XPCOM_Interface_Reference/nsIContentPrefService#getPrefsByName()">nsIContentPrefService.getPrefsByName()</a></code> と <code><a href="https://developer.mozilla.org/ja/docs/XPCOM_Interface_Reference/nsIContentPrefService#removePrefsByName()">nsIContentPrefService.removePrefsByName()</a></code>。</li> + <li><code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIContentPrefService" title="">nsIContentPrefService</a></code> インタフェースが新しく二つのメソッドを持ちました: <code><a href="/ja/docs/XPCOM_Interface_Reference/nsIContentPrefService#getPrefsByName()">nsIContentPrefService.getPrefsByName()</a></code> と <code><a href="/ja/docs/XPCOM_Interface_Reference/nsIContentPrefService#removePrefsByName()">nsIContentPrefService.removePrefsByName()</a></code>。</li> </ul> <h3 id="テーマ">テーマ</h3> @@ -165,18 +165,18 @@ translation_of: Mozilla/Firefox/Releases/3.6 <li>オブジェクトに対して <code>container-live-role</code> 属性を持たせるためのサポートが追加されました。<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=391829" title="FIXED: Add support for container-live-role to object attributes">バグ 391829</a> を参照してください。</li> <li><code>tabs-closebutton</code> バインディングが削除されました。<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=500971" title="FIXED: Remove obsolete tabs-closebutton binding">バグ 500971</a> を参照してください。</li> <li>発生したイベントに基づいて音を鳴らすための <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISound" title="">nsISound</a></code> に対するサポートが追加されました。 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=502799" title="FIXED: add new nsISound method for the event sounds">バグ 502799</a> を参照してください。</li> - <li>Gecko 1.9 での新しいドラッグ＆ドロップ API をサポートするために <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsITreeView" title="">nsITreeView</a></code> のメソッドである <code><a href="https://developer.mozilla.org/ja/docs/XPCOM_Interface_Reference/nsITreeView#canDrop()">nsITreeView.canDrop()</a></code> および <code><a href="https://developer.mozilla.org/ja/docs/XPCOM_Interface_Reference/nsITreeView#drop()">nsITreeView.drop()</a></code> の構文が変更になりました。<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=455590" title="FIXED: Allow new dnd api with tree views">バグ 455590</a> を参照してください。</li> - <li>Windows のダイアログとウィザードのデフォルトボタンへのマウスカーソルの移動がサポートされました。<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=76053" title='FIXED: Windows mouse integration: "Snap to default button in dialog boxes"'>バグ 76053</a> を参照してください。これはダイアログとウィザード要素によって自動的に行われます。ただし、XUL アプリケーションが <code>window</code> 要素のウィンドウを生成し、それがデフォルトボタンを持つ場合は、ウィンドウの onload イベントで <code><a href="https://developer.mozilla.org/ja/docs/XPCOM_Interface_Reference/nsIDOMChromeWindow#notifyDefaultButtonLoaded()">nsIDOMChromeWindow.notifyDefaultButtonLoaded()</a></code> をコールする必要があります。</li> + <li>Gecko 1.9 での新しいドラッグ＆ドロップ API をサポートするために <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsITreeView" title="">nsITreeView</a></code> のメソッドである <code><a href="/ja/docs/XPCOM_Interface_Reference/nsITreeView#canDrop()">nsITreeView.canDrop()</a></code> および <code><a href="/ja/docs/XPCOM_Interface_Reference/nsITreeView#drop()">nsITreeView.drop()</a></code> の構文が変更になりました。<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=455590" title="FIXED: Allow new dnd api with tree views">バグ 455590</a> を参照してください。</li> + <li>Windows のダイアログとウィザードのデフォルトボタンへのマウスカーソルの移動がサポートされました。<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=76053" title='FIXED: Windows mouse integration: "Snap to default button in dialog boxes"'>バグ 76053</a> を参照してください。これはダイアログとウィザード要素によって自動的に行われます。ただし、XUL アプリケーションが <code>window</code> 要素のウィンドウを生成し、それがデフォルトボタンを持つ場合は、ウィンドウの onload イベントで <code><a href="/ja/docs/XPCOM_Interface_Reference/nsIDOMChromeWindow#notifyDefaultButtonLoaded()">nsIDOMChromeWindow.notifyDefaultButtonLoaded()</a></code> をコールする必要があります。</li> <li><code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILocalFileMac" title="">nsILocalFileMac</a></code> インタフェースが二つのメソッドを持ちました: <code>setFileTypeAndCreatorFromMIMEType()</code> と <code>setFileTypeAndCreatorFromExtension()</code>。</li> <li>新しい <a class="internal" href="/ja/docs/JavaScript_code_modules/NetUtil.jsm" title="JavaScript code modules/NetUtil.jsm"><code>NetUtils.jsm</code></a> コードモジュールは、入力ストリームから出力ストリームに非同期にデータをコピーする簡単に利用できるメソッドを提供します。</li> <li>新しい <a class="internal" href="/ja/docs/JavaScript_code_modules/openLocationLastURL.jsm" title="JavaScript code modules/openLocationLastURL.jsm"><code>openLocationLastURL.jsm</code></a> コードモジュールは、プライベートブラウジングモードであるかを正しく判断して、"Open Location" ダイアログボックスの記憶された URL データの読み込みと変更を容易にします。</li> <li>Windows では、<code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIScreen" title="">nsIScreen</a></code> インタフェースは、グラフィックスドライバーが32ビットをサポートしていても、ピクセルごとに 24 ビットカラーをレポートします。これは24ビットは実際に利用されているカラーピクセルの数をより正確に表現するためです。</li> - <li>Window では <code><a href="/ja/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code> XUL 要素の新しい <code id="a-autohide"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/autohide">autohide</a></code> アトリビュートを用いてメニューバーを隠すことができます。</li> - <li><span id="m-loadOneTab"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/loadOneTab">loadOneTab</a></code></span> と <span id="m-addTab"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/addTab">addTab</a></code></span> メソッドは新しい <code>relatedToCurrent</code> パラメータをサポートし、加えて、多くのパラメータが省略可能であるために名前によるパラメータの指定ができます。</li> + <li>Window では <code><a href="/ja/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code> XUL 要素の新しい <code id="a-autohide"><a href="/ja/docs/Mozilla/Tech/XUL/Attribute/autohide">autohide</a></code> アトリビュートを用いてメニューバーを隠すことができます。</li> + <li><span id="m-loadOneTab"><code><a href="/ja/docs/Mozilla/Tech/XUL/Method/loadOneTab">loadOneTab</a></code></span> と <span id="m-addTab"><code><a href="/ja/docs/Mozilla/Tech/XUL/Method/addTab">addTab</a></code></span> メソッドは新しい <code>relatedToCurrent</code> パラメータをサポートし、加えて、多くのパラメータが省略可能であるために名前によるパラメータの指定ができます。</li> <li>インストール manifests で "hidden" プロパティはサポートされなくなりました。アドオンマネージャウィンドウ上でユーザが見ることのできないアドオンは不可能になりました。</li> <li>@mozilla.org/webshell;1 コンポーネントはもう存在しません。代わりに @mozilla.org/docshell;1 を使う必要があります。</li> - <li>タイマーイベントをスケジュールするために、タイマーがコールするオブジェクトをインスタンシエイトすることなく update-timer カテゴリで登録できるようになりました。代わりに必要になったときにインスタンシエイトされます。詳細は <code><a href="https://developer.mozilla.org/ja/docs/XPCOM_Interface_Reference/nsIUpdateTimerManager#registerTimer()">nsIUpdateTimerManager.registerTimer()</a></code> を参照してください。</li> - <li>The <a href="/en/NPN_GetValue" title="en/NPN GetValue"><code>NPN_GetValue()</code></a> 関数はもはや変数値 <code>NPNVserviceManager</code>, <code>NPNVDOMelement</code>, <code>NPNVDOMWindow </code>を経由した XPCOM へのアクセスを提供しません。これは将来のバージョンの Gecko バージョンでプラグインを分離したプロセスで動作させるための作業の一部です。</li> + <li>タイマーイベントをスケジュールするために、タイマーがコールするオブジェクトをインスタンシエイトすることなく update-timer カテゴリで登録できるようになりました。代わりに必要になったときにインスタンシエイトされます。詳細は <code><a href="/ja/docs/XPCOM_Interface_Reference/nsIUpdateTimerManager#registerTimer()">nsIUpdateTimerManager.registerTimer()</a></code> を参照してください。</li> + <li>The <a href="/ja/NPN_GetValue" title="en/NPN GetValue"><code>NPN_GetValue()</code></a> 関数はもはや変数値 <code>NPNVserviceManager</code>, <code>NPNVDOMelement</code>, <code>NPNVDOMWindow </code>を経由した XPCOM へのアクセスを提供しません。これは将来のバージョンの Gecko バージョンでプラグインを分離したプロセスで動作させるための作業の一部です。</li> </ul> <h2 id="FirefoxGecko_開発者向け">Firefox/Gecko 開発者向け</h2> @@ -239,7 +239,7 @@ translation_of: Mozilla/Firefox/Releases/3.6 <ul> <li>メインドキュメントの子どもが変更された時と同様に、frame と iframe の子どもが変更されたときに <span style="font-family: monospace;">EVENT</span><code>_REORDER</code> <a href="/ja/docs/XPCOM_Interface_Reference/nsIAccessibleEvent" title="XPCOM Interface Reference/nsIAccessibleEvent">アクセシビリティイベント</a> が送信されます。<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=420845" title="FIXED: Fire event_reorder on any embedded frames/iframes whos document has just loaded.">バグ 420845</a> を参照してください。</li> - <li><code><a href="https://developer.mozilla.org/ja/docs/XPCOM_Interface_Reference/nsIAccessibleTable#selectRow()">nsIAccessibleTable.selectRow()</a></code> は指定された列が選択される前にどんなカレントの選択であっても正しく削除します。</li> + <li><code><a href="/ja/docs/XPCOM_Interface_Reference/nsIAccessibleTable#selectRow()">nsIAccessibleTable.selectRow()</a></code> は指定された列が選択される前にどんなカレントの選択であっても正しく削除します。</li> </ul> <h2 id="See_also" name="See_also">参照</h2> 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 8a7859aa32..793c4db0bc 100644 --- a/files/ja/mozilla/firefox/releases/3/updating_extensions/index.html +++ b/files/ja/mozilla/firefox/releases/3/updating_extensions/index.html @@ -75,7 +75,7 @@ original_slug: Updating_extensions_for_Firefox_3 <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">ポップアップの使用</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="/ja/docs/Mozilla/Tech/XUL/Method/showPopup">showPopup</a></code></span></code> が非推奨となり、新しい <code>popup.<span id="m-openPopup"><code><a href="/ja/docs/Mozilla/Tech/XUL/Method/openPopup">openPopup</a></code></span></code> と <code>popup.<span id="m-openPopupAtScreen"><code><a href="/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> diff --git a/files/ja/mozilla/firefox/releases/35/index.html b/files/ja/mozilla/firefox/releases/35/index.html index f3e9dbd340..c415aaef70 100644 --- a/files/ja/mozilla/firefox/releases/35/index.html +++ b/files/ja/mozilla/firefox/releases/35/index.html @@ -119,7 +119,7 @@ translation_of: Mozilla/Firefox/Releases/35 <h3 id="XUL_.26_Add-ons" name="XUL_.26_Add-ons">XUL およびアドオン</h3> <ul> - <li><code><a href="/ja/docs/Mozilla/Tech/XUL/tabbrowser" title="tabbrowser">tabbrowser</a></code> のプライベートなメソッドである <code>_getTabForBrowser()</code> が非推奨になりました。代わりに、パブリックなメソッドである <span id="m-getTabForBrowser"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/getTabForBrowser">getTabForBrowser</a></code></span> を新たに追加しました。予想されているとおり、このメソッドは指定した <code><a href="/ja/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code> を包含する <code><a href="/ja/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code> 要素を返します。</li> + <li><code><a href="/ja/docs/Mozilla/Tech/XUL/tabbrowser" title="tabbrowser">tabbrowser</a></code> のプライベートなメソッドである <code>_getTabForBrowser()</code> が非推奨になりました。代わりに、パブリックなメソッドである <span id="m-getTabForBrowser"><code><a href="/ja/docs/Mozilla/Tech/XUL/Method/getTabForBrowser">getTabForBrowser</a></code></span> を新たに追加しました。予想されているとおり、このメソッドは指定した <code><a href="/ja/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code> を包含する <code><a href="/ja/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code> 要素を返します。</li> <li><a href="/ja/docs/Web/API/Performance/now" title="performance.now() メソッドは、ミリ秒単位で計測された DOMHighResTimeStamp を返します。"><code>Performance.now()</code></a> と対等である <code>Components.utils.now()</code> を、window 以外の chrome コード向けに実装しました (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=969490" title="FIXED: Implement Components.utils.now() to match Performance.now() for non-window chrome code">バグ 969490</a>)。</li> </ul> diff --git a/files/ja/mozilla/firefox/releases/4/index.html b/files/ja/mozilla/firefox/releases/4/index.html index bad241c386..4c42259e9a 100644 --- a/files/ja/mozilla/firefox/releases/4/index.html +++ b/files/ja/mozilla/firefox/releases/4/index.html @@ -416,20 +416,20 @@ Gecko 2.0 note <ul> <li>TabClose/TabSelect/TabOpen イベントはもはや tabbrowser 要素 (gBrowser) にバブルアップしません。これらのイベントのためのイベントリスナーは gBrowser 直接ではなく gBrowser.tabContainer に追加すべきです。</li> <li>タブコンテキストメニューはもはや tabbrowser の無名の子要素ではありません。それゆえ <a href="/ja/docs/XUL_Overlays">XUL オーバーレイ</a>で直接オーバレイできるようになります。gBrowser.tabContextMenu 経由で JavaScript でより直接的にアクセスすることもできます。詳細は<a href="http://www.gavinsharp.com/blog/2010/03/31/accessingmodifying-the-firefox-tab-context-menu-from-extensions/">このブログ投稿</a>を参照してください。</li> - <li>新たに <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/visibleTabs">visibleTabs</a></span></code> プロパティが追加され、これを用いると、現在表示されているタブの配列を取得することができます。このことにより、現在のタブセットでどのタブが表示されているかを知ることができます。これは例えば、Firefox Panorama で利用されています。</li> - <li>新たに <span id="m-showOnlyTheseTabs"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/showOnlyTheseTabs">showOnlyTheseTabs</a></code></span> メソッドが追加されました。これは Firefox Panorama で用いられています。</li> - <li>新たに <span id="m-getIcon"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/getIcon">getIcon</a></code></span> メソッドが追加されました。これを用いると、<code><a href="/ja/docs/Mozilla/Tech/XUL/browser"><xul:browser></a></code> 要素から引っ張り出す必要無しに、 タブのファビコンを得ることができます。</li> - <li>新たに <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/tabbrowser.tabs">tabbrowser.tabs</a></span></code> プロパティが追加されました。これを用いると、簡単に <code><a href="/ja/docs/Mozilla/Tech/XUL/tabbrowser"><xul:tabbrowser></a></code> 要素内のタブの一覧を取得できます。</li> - <li>新たに <span id="m-pinTab"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/pinTab">pinTab</a></code></span> と <span id="m-unpinTab"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/unpinTab">unpinTab</a></code></span> メソッドが追加されました。これを用いると、タブのアイコン化およびタブのアイコン化の解除ができます（つまり、アイコンタブと通常タブを切り替えます）。</li> - <li><span id="m-getTabModalPromptBox"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/getTabModalPromptBox">getTabModalPromptBox</a></code></span> メソッドと <code><a href="/ja/docs/Mozilla/Tech/XUL/tabbrowser"><xul:tabbrowser></a></code> 要素の <code id="a-tabmodalPromptShowing"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/tabmodalPromptShowing">tabmodalPromptShowing</a></code> 属性がタブモーダルアラートのサポートのために追加されました。</li> + <li>新たに <code><span><a href="/ja/docs/XUL/Property/visibleTabs">visibleTabs</a></span></code> プロパティが追加され、これを用いると、現在表示されているタブの配列を取得することができます。このことにより、現在のタブセットでどのタブが表示されているかを知ることができます。これは例えば、Firefox Panorama で利用されています。</li> + <li>新たに <span id="m-showOnlyTheseTabs"><code><a href="/ja/docs/Mozilla/Tech/XUL/Method/showOnlyTheseTabs">showOnlyTheseTabs</a></code></span> メソッドが追加されました。これは Firefox Panorama で用いられています。</li> + <li>新たに <span id="m-getIcon"><code><a href="/ja/docs/Mozilla/Tech/XUL/Method/getIcon">getIcon</a></code></span> メソッドが追加されました。これを用いると、<code><a href="/ja/docs/Mozilla/Tech/XUL/browser"><xul:browser></a></code> 要素から引っ張り出す必要無しに、 タブのファビコンを得ることができます。</li> + <li>新たに <code><span><a href="/ja/docs/XUL/Property/tabbrowser.tabs">tabbrowser.tabs</a></span></code> プロパティが追加されました。これを用いると、簡単に <code><a href="/ja/docs/Mozilla/Tech/XUL/tabbrowser"><xul:tabbrowser></a></code> 要素内のタブの一覧を取得できます。</li> + <li>新たに <span id="m-pinTab"><code><a href="/ja/docs/Mozilla/Tech/XUL/Method/pinTab">pinTab</a></code></span> と <span id="m-unpinTab"><code><a href="/ja/docs/Mozilla/Tech/XUL/Method/unpinTab">unpinTab</a></code></span> メソッドが追加されました。これを用いると、タブのアイコン化およびタブのアイコン化の解除ができます（つまり、アイコンタブと通常タブを切り替えます）。</li> + <li><span id="m-getTabModalPromptBox"><code><a href="/ja/docs/Mozilla/Tech/XUL/Method/getTabModalPromptBox">getTabModalPromptBox</a></code></span> メソッドと <code><a href="/ja/docs/Mozilla/Tech/XUL/tabbrowser"><xul:tabbrowser></a></code> 要素の <code id="a-tabmodalPromptShowing"><a href="/ja/docs/Mozilla/Tech/XUL/Attribute/tabmodalPromptShowing">tabmodalPromptShowing</a></code> 属性がタブモーダルアラートのサポートのために追加されました。</li> </ul> <h4 id="Changes_to_popups" name="Changes_to_popups">ポップアップに対する変更点</h4> <ul> <li><code><a href="/ja/docs/Mozilla/Tech/XUL/popup"><xul:popup></a></code> 要素がサポートされなくなりました。代わりに <code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup"><xul:menupopup></a></code> 要素を使うべきです。(<code>popup</code> 要素を用い続けた場合、その要素にはもはや何の特別な意味もないため、不具合に遭遇するでしょう。例えば、<code><a href="/ja/docs/Mozilla/Tech/XUL/menuseparator"><xul:menuseparator></a></code> 要素は <code><a href="/ja/docs/Mozilla/Tech/XUL/popup"><xul:popup></a></code> 要素内で用いたときに透明で表示される可能性があります。)</li> - <li><code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup"><xul:menupopup></a></code> XUL 要素に <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/triggerNode">triggerNode</a></span></code> プロパティが追加されました。このプロパティはポップアップを開くイベントが起こったノードを示します。これは <span id="m-openPopup"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/openPopup">openPopup</a></code></span> メソッドに対するトリガーイベント引数の追加も必要とします。また、 <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/anchorNode">anchorNode</a></span></code> プロパティも追加されました。このプロパティはポップアップが作成されたときに指定されたアンカーを返します。</li> - <li><code><a href="/ja/docs/Mozilla/Tech/XUL/panel"><xul:panel></a></code> 要素に <code id="a-fade"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/fade">fade</a></code> および <code id="a-flip"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flip">flip</a></code> 属性が追加されました。これらの属性は新しい "arrow" スタイル通知パネルの挙動を設定するために用いられます。</li> + <li><code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup"><xul:menupopup></a></code> XUL 要素に <code><span><a href="/ja/docs/XUL/Property/triggerNode">triggerNode</a></span></code> プロパティが追加されました。このプロパティはポップアップを開くイベントが起こったノードを示します。これは <span id="m-openPopup"><code><a href="/ja/docs/Mozilla/Tech/XUL/Method/openPopup">openPopup</a></code></span> メソッドに対するトリガーイベント引数の追加も必要とします。また、 <code><span><a href="/ja/docs/XUL/Property/anchorNode">anchorNode</a></span></code> プロパティも追加されました。このプロパティはポップアップが作成されたときに指定されたアンカーを返します。</li> + <li><code><a href="/ja/docs/Mozilla/Tech/XUL/panel"><xul:panel></a></code> 要素に <code id="a-fade"><a href="/ja/docs/Mozilla/Tech/XUL/Attribute/fade">fade</a></code> および <code id="a-flip"><a href="/ja/docs/Mozilla/Tech/XUL/Attribute/flip">flip</a></code> 属性が追加されました。これらの属性は新しい "arrow" スタイル通知パネルの挙動を設定するために用いられます。</li> </ul> <h4 id="Remote_XUL_support_removed" name="Remote_XUL_support_removed">リモート XUL サポートの削除</h4> @@ -439,26 +439,26 @@ Gecko 2.0 note <h4 id="Miscellaneous_XUL_changes" name="Miscellaneous_XUL_changes">小さな XUL の変更</h4> <ul> - <li><code id="a-readonly"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/readonly">readonly</a></code> 属性がフィールドで正しく動作するようになりました。</li> - <li><code><a href="/ja/docs/Mozilla/Tech/XUL/resizer"><xul:resizer></a></code> 要素でウィンドウをリサイズする代わりにリサイズする要素を指定できる <code id="a-element"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/element">element</a></code> 属性を用いることができるようになりました。</li> - <li><code><a href="/ja/docs/Mozilla/Tech/XUL/resizer"><xul:resizer></a></code> 要素に <code id="a-resizer.type"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/resizer.type">type</a></code> 属性が追加され、これを用いることで、要素の変わりにウィンドウのリサイズグリップを指定し、ウィンドウのリサイズグリップが 2 度描画されることを防ぐことができます。</li> + <li><code id="a-readonly"><a href="/ja/docs/Mozilla/Tech/XUL/Attribute/readonly">readonly</a></code> 属性がフィールドで正しく動作するようになりました。</li> + <li><code><a href="/ja/docs/Mozilla/Tech/XUL/resizer"><xul:resizer></a></code> 要素でウィンドウをリサイズする代わりにリサイズする要素を指定できる <code id="a-element"><a href="/ja/docs/Mozilla/Tech/XUL/Attribute/element">element</a></code> 属性を用いることができるようになりました。</li> + <li><code><a href="/ja/docs/Mozilla/Tech/XUL/resizer"><xul:resizer></a></code> 要素に <code id="a-resizer.type"><a href="/ja/docs/Mozilla/Tech/XUL/Attribute/resizer.type">type</a></code> 属性が追加され、これを用いることで、要素の変わりにウィンドウのリサイズグリップを指定し、ウィンドウのリサイズグリップが 2 度描画されることを防ぐことができます。</li> <li>"active" 属性は XUL ウィンドウでは設定されません。背景ウィンドウに異なるスタイルを指定するための新しい <a href="/ja/docs/Web/CSS/:-moz-window-inactive" title="この項目についての文書はまだ書かれていません。書いてみませんか？"><code>:-moz-window-inactive</code></a> 擬似クラスを利用してください。</li> - <li><code id="a-emptytext"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/emptytext">emptytext</a></code> 属性は非推奨になりました。代わりに <code id="a-placeholder"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/placeholder">placeholder</a></code> を用いるべきです。</li> + <li><code id="a-emptytext"><a href="/ja/docs/Mozilla/Tech/XUL/Attribute/emptytext">emptytext</a></code> 属性は非推奨になりました。代わりに <code id="a-placeholder"><a href="/ja/docs/Mozilla/Tech/XUL/Attribute/placeholder">placeholder</a></code> を用いるべきです。</li> <li><code><a href="/ja/docs/Mozilla/Tech/XUL/popup"><xul:popup></a></code> 要素はサポートされません。代わりに <code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup"><xul:menupopup></a></code> を持ちいるべきです。</li> - <li><code><a href="/ja/docs/Mozilla/Tech/XUL/window"><xul:window></a></code> 要素が <code id="a-accelerated"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/accelerated">accelerated</a></code> 属性を提供するようになりました。true の場合、ハードウェアレイヤーマネージャがウィンドウをアクセラレーションすることが許可されます。</li> - <li><code><a href="/ja/docs/Mozilla/Tech/XUL/stack"><xul:stack></a></code> 要素が <code id="a-bottom"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/bottom">bottom</a></code> と <code id="a-right"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/right">right</a></code> 要素をサポートするようになりました。</li> - <li><code><a href="/ja/docs/Mozilla/Tech/XUL/tree"><xul:tree></a></code> 要素での <code id="a-alternatingbackground"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/alternatingbackground">alternatingbackground</a></code> 属性はサポートされません。代わりに <a href="/ja/docs/Web/CSS/:-moz-tree-row" title="この項目についての文書はまだ書かれていません。書いてみませんか？"><code>:-moz-tree-row</code></a> 擬似クラスを利用できます。</li> + <li><code><a href="/ja/docs/Mozilla/Tech/XUL/window"><xul:window></a></code> 要素が <code id="a-accelerated"><a href="/ja/docs/Mozilla/Tech/XUL/Attribute/accelerated">accelerated</a></code> 属性を提供するようになりました。true の場合、ハードウェアレイヤーマネージャがウィンドウをアクセラレーションすることが許可されます。</li> + <li><code><a href="/ja/docs/Mozilla/Tech/XUL/stack"><xul:stack></a></code> 要素が <code id="a-bottom"><a href="/ja/docs/Mozilla/Tech/XUL/Attribute/bottom">bottom</a></code> と <code id="a-right"><a href="/ja/docs/Mozilla/Tech/XUL/Attribute/right">right</a></code> 要素をサポートするようになりました。</li> + <li><code><a href="/ja/docs/Mozilla/Tech/XUL/tree"><xul:tree></a></code> 要素での <code id="a-alternatingbackground"><a href="/ja/docs/Mozilla/Tech/XUL/Attribute/alternatingbackground">alternatingbackground</a></code> 属性はサポートされません。代わりに <a href="/ja/docs/Web/CSS/:-moz-tree-row" title="この項目についての文書はまだ書かれていません。書いてみませんか？"><code>:-moz-tree-row</code></a> 擬似クラスを利用できます。</li> <li>anonid chevronPopup を持っていたブックマークツールバーのオーバーフローボタンは無名になりました。それは PlacesChevron の id を持っています。</li> - <li><code><a href="/ja/docs/Mozilla/Tech/XUL/tabs"><xul:tabs></a></code> 要素に <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/tabbox">tabbox</a></span></code> プロパティが追加されました。これは古い <code>_tabbox</code> プロパティを置き換えます。古い方のプロパティは非推奨です（そして決してドキュメント化されません）。</li> - <li>XUL <code><a href="/ja/docs/Mozilla/Tech/XUL/window"><xul:window></a></code> 要素に <code id="a-drawintitlebar"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/drawintitlebar">drawintitlebar</a></code> 属性が追加されました。この値が <code>true であれば、</code>ウィンドウのコンテント領域にはタイトルバーが含まれており、タイトルバー内に描画することを許可します。</li> + <li><code><a href="/ja/docs/Mozilla/Tech/XUL/tabs"><xul:tabs></a></code> 要素に <code><span><a href="/ja/docs/XUL/Property/tabbox">tabbox</a></span></code> プロパティが追加されました。これは古い <code>_tabbox</code> プロパティを置き換えます。古い方のプロパティは非推奨です（そして決してドキュメント化されません）。</li> + <li>XUL <code><a href="/ja/docs/Mozilla/Tech/XUL/window"><xul:window></a></code> 要素に <code id="a-drawintitlebar"><a href="/ja/docs/Mozilla/Tech/XUL/Attribute/drawintitlebar">drawintitlebar</a></code> 属性が追加されました。この値が <code>true であれば、</code>ウィンドウのコンテント領域にはタイトルバーが含まれており、タイトルバー内に描画することを許可します。</li> <li>新たに <code>TabPinned</code> および <code>TabUnpinned</code> イベントが追加され、これを用いることで、<a href="/ja/docs/Code_snippets/Tabbed_browser#Notification_when_a_tab_is_pinned_or_unpinned">タブがアイコン化したかアイコン化が解除されたかを検知できます</a>。</li> - <li>新しい <a href="/ja/docs/Code_snippets/Tabbed_browser#Notification_when_a_tab%27s_attributes_change"><code>TabAttrModified</code> イベント</a> はタブの <code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code>、<code id="a-crop"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code>、<code id="a-busy"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/busy">busy</a></code>、 <code id="a-image"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code>、あるいは、<code id="a-selected"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/selected">selected</a></code> 属性のいずれかが変化したときに送られます。</li> - <li><code><a href="/ja/docs/Mozilla/Tech/XUL/tab"><xul:tab></a></code> 要素に <code id="a-pinned"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/pinned">pinned</a></code> 属性が追加されました。これを用いることで、タブが現在アイコン化されているかどうか判定できます。</li> + <li>新しい <a href="/ja/docs/Code_snippets/Tabbed_browser#Notification_when_a_tab%27s_attributes_change"><code>TabAttrModified</code> イベント</a> はタブの <code id="a-label"><a href="/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code>、<code id="a-crop"><a href="/ja/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code>、<code id="a-busy"><a href="/ja/docs/Mozilla/Tech/XUL/Attribute/busy">busy</a></code>、 <code id="a-image"><a href="/ja/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code>、あるいは、<code id="a-selected"><a href="/ja/docs/Mozilla/Tech/XUL/Attribute/selected">selected</a></code> 属性のいずれかが変化したときに送られます。</li> + <li><code><a href="/ja/docs/Mozilla/Tech/XUL/tab"><xul:tab></a></code> 要素に <code id="a-pinned"><a href="/ja/docs/Mozilla/Tech/XUL/Attribute/pinned">pinned</a></code> 属性が追加されました。これを用いることで、タブが現在アイコン化されているかどうか判定できます。</li> <li><code><a href="/ja/docs/Mozilla/Tech/XUL/tree"><xul:tree></a></code> 要素上の <code>setDirectionIndicator</code> クラスは何もしないことがありましたが、一切利用されないようになりました。</li> - <li><code><a href="/ja/docs/Mozilla/Tech/XUL/window"><xul:window></a></code> 要素に <code id="a-chromemargin"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/chromemargin">chromemargin</a></code> 属性が追加され、これを用いることで、ウィンドウの両端のChrome とコンテントのマージンを設定できます。例えば、タイトルバーに描画するためにこれを用いることができます。</li> - <li><code><a href="/ja/docs/Mozilla/Tech/XUL/window"><xul:window></a></code> 要素に <code id="a-disablechrome"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/disablechrome">disablechrome</a></code> 属性が追加されました。これは <code>about:addons のように</code>ブラウザ内 UI に表示するために用いるときにウィンドウで Chrome のほどんどを隠すために用いることができます。</li> - <li><code><a href="/ja/docs/Mozilla/Tech/XUL/window"><xul:window></a></code> 要素に <code id="a-disablefastfind"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/disablefastfind">disablefastfind</a></code> 属性が追加されました。これを用いることで、ウィンドウ内のページ内検索バーを無効にできます。このときコンテント内でページ検索バーはサポートされません。例えば、これはアドオンパネルで使われています。</li> - <li>ツールバーをツールボックスの外部に置けるようになりました。<code><a href="/ja/docs/Mozilla/Tech/XUL/toolbar"><xul:toolbar></a></code> 要素の <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/toolboxid">toolboxid</a></span></code> プロパティを設定することで、以前のように <code><a href="/ja/docs/Mozilla/Tech/XUL/toolbox"><xul:toolbox></a></code> 要素のメンバーとして扱うことができます。また、<code><a href="/ja/docs/Mozilla/Tech/XUL/toolbox"><xul:toolbox></a></code> 要素に <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/externalToolbars">externalToolbars</a></span></code> プロパティが追加されました。このプロパティによって、そのツールボックスのメンバーとして扱われるツールバーのすべての一覧を取得できます。</li> + <li><code><a href="/ja/docs/Mozilla/Tech/XUL/window"><xul:window></a></code> 要素に <code id="a-chromemargin"><a href="/ja/docs/Mozilla/Tech/XUL/Attribute/chromemargin">chromemargin</a></code> 属性が追加され、これを用いることで、ウィンドウの両端のChrome とコンテントのマージンを設定できます。例えば、タイトルバーに描画するためにこれを用いることができます。</li> + <li><code><a href="/ja/docs/Mozilla/Tech/XUL/window"><xul:window></a></code> 要素に <code id="a-disablechrome"><a href="/ja/docs/Mozilla/Tech/XUL/Attribute/disablechrome">disablechrome</a></code> 属性が追加されました。これは <code>about:addons のように</code>ブラウザ内 UI に表示するために用いるときにウィンドウで Chrome のほどんどを隠すために用いることができます。</li> + <li><code><a href="/ja/docs/Mozilla/Tech/XUL/window"><xul:window></a></code> 要素に <code id="a-disablefastfind"><a href="/ja/docs/Mozilla/Tech/XUL/Attribute/disablefastfind">disablefastfind</a></code> 属性が追加されました。これを用いることで、ウィンドウ内のページ内検索バーを無効にできます。このときコンテント内でページ検索バーはサポートされません。例えば、これはアドオンパネルで使われています。</li> + <li>ツールバーをツールボックスの外部に置けるようになりました。<code><a href="/ja/docs/Mozilla/Tech/XUL/toolbar"><xul:toolbar></a></code> 要素の <code><span><a href="/ja/docs/XUL/Property/toolboxid">toolboxid</a></span></code> プロパティを設定することで、以前のように <code><a href="/ja/docs/Mozilla/Tech/XUL/toolbox"><xul:toolbox></a></code> 要素のメンバーとして扱うことができます。また、<code><a href="/ja/docs/Mozilla/Tech/XUL/toolbox"><xul:toolbox></a></code> 要素に <code><span><a href="/ja/docs/XUL/Property/externalToolbars">externalToolbars</a></span></code> プロパティが追加されました。このプロパティによって、そのツールボックスのメンバーとして扱われるツールバーのすべての一覧を取得できます。</li> <li>デバッグ目的向けに <a href="/ja/docs/XUL/Template_Guide/Template_Logging">logging XUL テンプレートのロギング</a> のサポートが追加されました。</li> </ul> @@ -478,9 +478,9 @@ Gecko 2.0 note <ul> <li><code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/mozIStorageBindingParamsArray" title="">mozIStorageBindingParamsArray</a></code> インタフェースが 配列である<code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/mozIStorageBindingParams" title="">mozIStorageBindingParams</a></code> オブジェクトの数を示す length 属性を持つようになりました。</li> <li><code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/mozIStorageStatement " title="">mozIStorageStatement </a></code> の メソッド <a href="/ja/docs/mozIStorageStatemt#bindPrameters">bindParameters</a> が 指定された <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/mozIStorageBindingParamsArray" title="">mozIStorageBindingParamsArray</a></code> が空のときにエラーを返すようになりました。</li> - <li><code><a href="https://developer.mozilla.org/ja/docs/XPCOM_Interface_Reference/mozIStorageConnection#clone()">mozIStorageConnection.clone()</a></code> メソッドが追加されました。これを用いると、存在するデータベース接続を複製できます。</li> - <li><code><a href="https://developer.mozilla.org/ja/docs/XPCOM_Interface_Reference/mozIStorageConnection#asyncClose()">mozIStorageConnection.asyncClose()</a></code> が追加されました。これを用いると、非同期にデータベース接続を閉じることができます。クローズ処理が完了したときに通知されるコールバックを指定します。</li> - <li><code><a href="https://developer.mozilla.org/ja/docs/XPCOM_Interface_Reference/mozIStorageConnection#setGrowthIncrement()">mozIStorageConnection.setGrowthIncrement()</a></code> メソッドが追加されました。これを用いると、SQLite のフラグメンテーションを減らすことを助けるために、データベースファイルでの一度の増加量を指定できます。</li> + <li><code><a href="/ja/docs/XPCOM_Interface_Reference/mozIStorageConnection#clone()">mozIStorageConnection.clone()</a></code> メソッドが追加されました。これを用いると、存在するデータベース接続を複製できます。</li> + <li><code><a href="/ja/docs/XPCOM_Interface_Reference/mozIStorageConnection#asyncClose()">mozIStorageConnection.asyncClose()</a></code> が追加されました。これを用いると、非同期にデータベース接続を閉じることができます。クローズ処理が完了したときに通知されるコールバックを指定します。</li> + <li><code><a href="/ja/docs/XPCOM_Interface_Reference/mozIStorageConnection#setGrowthIncrement()">mozIStorageConnection.setGrowthIncrement()</a></code> メソッドが追加されました。これを用いると、SQLite のフラグメンテーションを減らすことを助けるために、データベースファイルでの一度の増加量を指定できます。</li> <li><code>SQLITE_CONSTRAINT</code> エラーが <code>NS_ERROR_FAILURE</code> の代わりに <code>NS_ERROR_STORAGE_CONSTRAINT</code> を報告するようになりました。</li> </ul> @@ -527,13 +527,13 @@ Gecko 2.0 note <ul> <li><code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDocShell" title="">nsIDocShell</a></code> および <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebBrowser" title="">nsIWebBrowser</a></code> インタフェースに新しく <code>isActive</code> 属性が追加されました。これは現在表示されていないドキュメントのためにコードパスを最適化することを許可するために用いることができます。</li> <li><code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMemory" title="">nsIMemory</a></code> のメソッドである <a href="/ja/docs/XPCOM_Interface_Reference/nsIMemory/isLowMemory"><code>isLowMemory()</code></a> は非推奨になりました。低メモリ状況を監視するには <a href="/ja/docs/XPCOM_Interface_Reference/nsIMemory#Low_memory_notifications">"memory-pressure" 通知</a> を用いることが推奨されます。</li> - <li>HTTP チャンネル上でリダイレクトを扱う API が非同期で動作できるように変更されました。<code><a href="https://developer.mozilla.org/ja/docs/XPCOM_Interface_Reference/nsIChannelEventSink#onChannelRedirect()">nsIChannelEventSink.onChannelRedirect()</a></code> を用いてリダイレクトを扱う実装を行なっているコードは {ifmethod("nsIChannelEventSink", "asyncOnChannelRedirect")} } を代わりに用いて更新する必要があります。これはリダイレクトが正常に完了したときに呼び出されるコールバックハンドラを受け入れます。</li> - <li><code><a href="https://developer.mozilla.org/ja/docs/XPCOM_Interface_Reference/nsINavHistoryResultObserver#batching()">nsINavHistoryResultObserver.batching()</a></code> メソッドが追加されました。このメソッドは Places 操作をバッチにグループ化する方法を提供し、送られてくる更新通知の数を減少させ、その結果、オブザーバが（ビューをリフレッシュするような）相対的にタスクを追加するときのパフォーマンスを向上させます。</li> + <li>HTTP チャンネル上でリダイレクトを扱う API が非同期で動作できるように変更されました。<code><a href="/ja/docs/XPCOM_Interface_Reference/nsIChannelEventSink#onChannelRedirect()">nsIChannelEventSink.onChannelRedirect()</a></code> を用いてリダイレクトを扱う実装を行なっているコードは {ifmethod("nsIChannelEventSink", "asyncOnChannelRedirect")} } を代わりに用いて更新する必要があります。これはリダイレクトが正常に完了したときに呼び出されるコールバックハンドラを受け入れます。</li> + <li><code><a href="/ja/docs/XPCOM_Interface_Reference/nsINavHistoryResultObserver#batching()">nsINavHistoryResultObserver.batching()</a></code> メソッドが追加されました。このメソッドは Places 操作をバッチにグループ化する方法を提供し、送られてくる更新通知の数を減少させ、その結果、オブザーバが（ビューをリフレッシュするような）相対的にタスクを追加するときのパフォーマンスを向上させます。</li> <li>長い間廃止状態であった <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIPref" title="">nsIPref</a></code> インタフェースがついに削除されました。まだ <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIPrefService" title="">nsIPrefService</a></code> に移行していないなら、今がそのときです。</li> - <li><code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISessionStore" title="">nsISessionStore</a></code> および <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISessionStartup" title="">nsISessionStartup</a></code> インタフェースがユーザの要求に応じたセッションリストアのサポートへの変更を受けとるようになりました。<code><a href="https://developer.mozilla.org/ja/docs/XPCOM_Interface_Reference/nsISessionStore#restoreLastSession()">nsISessionStore.restoreLastSession()</a></code> メソッドを参照してください。</li> - <li><code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIPrincipal" title="">nsIPrincipal</a></code> のメソッドである <code><a href="https://developer.mozilla.org/ja/docs/XPCOM_Interface_Reference/nsIPrincipal#subsumes()">nsIPrincipal.subsumes()</a></code> および <code><a href="https://developer.mozilla.org/ja/docs/XPCOM_Interface_Reference/nsIPrincipal#checkMayLoad()">nsIPrincipal.checkMayLoad()</a></code> が <code>origin</code>、<code>csp、</code> および <code>URI</code> 属性同様に、スクリプトから利用可能になりました。以前はこれらはネイティブコードからのみ利用可能でした。</li> + <li><code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISessionStore" title="">nsISessionStore</a></code> および <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISessionStartup" title="">nsISessionStartup</a></code> インタフェースがユーザの要求に応じたセッションリストアのサポートへの変更を受けとるようになりました。<code><a href="/ja/docs/XPCOM_Interface_Reference/nsISessionStore#restoreLastSession()">nsISessionStore.restoreLastSession()</a></code> メソッドを参照してください。</li> + <li><code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIPrincipal" title="">nsIPrincipal</a></code> のメソッドである <code><a href="/ja/docs/XPCOM_Interface_Reference/nsIPrincipal#subsumes()">nsIPrincipal.subsumes()</a></code> および <code><a href="/ja/docs/XPCOM_Interface_Reference/nsIPrincipal#checkMayLoad()">nsIPrincipal.checkMayLoad()</a></code> が <code>origin</code>、<code>csp、</code> および <code>URI</code> 属性同様に、スクリプトから利用可能になりました。以前はこれらはネイティブコードからのみ利用可能でした。</li> <li><code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIPrompt" title="">nsIPrompt</a></code> インタフェースがタブモーダルアラートをサポートするようになりました。詳細は<a href="/ja/docs/Using_tab-modal_prompts">タブモーダルプロンプトの利用</a>を参照してください。</li> - <li><code><a href="https://developer.mozilla.org/ja/docs/XPCOM_Interface_Reference/nsIEffectiveTLDService#getPublicSuffixFromHost()">nsIEffectiveTLDService.getPublicSuffixFromHost()</a></code> メソッドがピリオド (".") で始まるホスト名を正しく拒否するようになりました。</li> + <li><code><a href="/ja/docs/XPCOM_Interface_Reference/nsIEffectiveTLDService#getPublicSuffixFromHost()">nsIEffectiveTLDService.getPublicSuffixFromHost()</a></code> メソッドがピリオド (".") で始まるホスト名を正しく拒否するようになりました。</li> </ul> <h3 id="Memory_management" name="Memory_management">メモリ管理</h3> diff --git a/files/ja/mozilla/firefox/releases/42/index.html b/files/ja/mozilla/firefox/releases/42/index.html index 661cac48f4..d2db592372 100644 --- a/files/ja/mozilla/firefox/releases/42/index.html +++ b/files/ja/mozilla/firefox/releases/42/index.html @@ -153,7 +153,7 @@ Firefox Developer Edition をインストールしてください</a> Firefox 42 <h2 id="Networking">ネットワーク</h2> <ul> - <li>CSP の <code><a href="/docs/docs/Web/HTTP/Headers/Content-Security-Policy#upgrade-insecure-requests">upgrade-insecure-requests</a></code> ディレクティブを実装しました ({{bug(1139297)}})。</li> + <li>CSP の <code><a href="/ja/docs/docs/Web/HTTP/Headers/Content-Security-Policy#upgrade-insecure-requests">upgrade-insecure-requests</a></code> ディレクティブを実装しました ({{bug(1139297)}})。</li> </ul> <h2 id="Security">セキュリティ</h2> diff --git a/files/ja/mozilla/firefox/releases/44/index.html b/files/ja/mozilla/firefox/releases/44/index.html index 72aedcc7f3..4ebf692dd0 100644 --- a/files/ja/mozilla/firefox/releases/44/index.html +++ b/files/ja/mozilla/firefox/releases/44/index.html @@ -84,7 +84,7 @@ translation_of: Mozilla/Firefox/Releases/44 <ul> <li>グローバルレベルにおける <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/let">let</a></code> および <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/const">const</a></code> のバインディングを、ES2015 に準拠させました。{{bug(589199)}} およびブログ記事 <a href="https://blog.mozilla.org/addons/2015/10/14/breaking-changes-let-const-firefox-nightly-44/">"Breaking changes in let and const in Firefox Nightly 44"</a> をご覧ください。また、<code>let</code> がデフォルトで Web JavaScript (strict モードおよび 非 strict モード) で使用できるようになり、バージョンのオプトインが不要になりました ({{bug(932517)}})。</li> <li><a href="/ja/docs/Web/JavaScript/Typed_arrays">型付き配列</a> ({{jsxref("Int8Array", "Int8Array")}} や {{jsxref("ArrayBuffer", "ArrayBuffer")}} など) のコンストラクタを {{jsxref("Operators/new", "new")}} 演算子をつけずに関数として呼び出した場合に、ES6 仕様に従って {{jsxref("TypeError")}} が発生するようになりました ({{bug(980945)}}、{{bug(1214936)}})。</li> - <li>{{jsxref("RegExp")}} のスティッキーフラグが、ES2015 標準の <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/sticky#Anchored_sticky_flag">anchored sticky regular expressions</a> に従うようになりました ({{bug(773687)}})。</li> + <li>{{jsxref("RegExp")}} のスティッキーフラグが、ES2015 標準の <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/sticky#Anchored_sticky_flag">anchored sticky regular expressions</a> に従うようになりました ({{bug(773687)}})。</li> <li><a href="/ja/docs/Mozilla/Projects/SpiderMonkey/Introduction_to_the_JavaScript_shell">JavaScript シェル</a> (SpiderMonkey の REPL) のデフォルト JS バージョンが、Web 互換の JS バージョンになりました (JS1.7 以降ではありません) ({{bug(1192329)}})。</li> </ul> diff --git a/files/ja/mozilla/firefox/releases/55/index.html b/files/ja/mozilla/firefox/releases/55/index.html index 46b19f469f..8c5f93628a 100644 --- a/files/ja/mozilla/firefox/releases/55/index.html +++ b/files/ja/mozilla/firefox/releases/55/index.html @@ -24,7 +24,7 @@ translation_of: Mozilla/Firefox/Releases/55 <h3 id="HTML" name="HTML">HTML</h3> <ul> - <li>{{htmlattrxref("contenteditable")}} を <code>true</code> に設定した要素で、テキストの別の行を分けるために {{htmlelement("div")}} 要素を使用するようになりました。これは、他の現行ブラウザーに Firefox を合わせるためです ({{bug(1297414)}})。詳しくは <a href="/en-US/docs/Web/Guide/HTML/Editable_content#Differences_in_markup_generation">Differences in markup generation</a> をご覧ください。</li> + <li>{{htmlattrxref("contenteditable")}} を <code>true</code> に設定した要素で、テキストの別の行を分けるために {{htmlelement("div")}} 要素を使用するようになりました。これは、他の現行ブラウザーに Firefox を合わせるためです ({{bug(1297414)}})。詳しくは <a href="/ja/docs/Web/Guide/HTML/Editable_content#Differences_in_markup_generation">Differences in markup generation</a> をご覧ください。</li> <li>Nightly で、<code>dom.forms.datetime</code> をデフォルトで有効にしました ({{bug(1366188)}})。</li> </ul> @@ -76,7 +76,7 @@ translation_of: Mozilla/Firefox/Releases/55 <ul> <li>{{domxref("Window")}} の {{domxref("Window.scrollX", "scrollX")}} および {{domxref("Window.scrollY", "scrollY")}} プロパティ (別名である {{domxref("Window.pageXOffset", "pageXOffset")}} および {{domxref("Window.pageYOffset", "pageYOffset")}} も同様) を、サブピクセル精度に更新しました。戻り値が整数ではなく、サブピクセル精度のディスプレイでスクロール位置をより正確に示す浮動小数点数値になります ({{bug(1151421)}})。必要に応じて、整数に変換する {{jsxref("Math.round()")}} を使用できます。</li> <li>{{domxref("MediaQueryList")}} (および他の関連機能) を、最新の仕様に合わせて更新しました。{{bug("1354441")}}、{{domxref("MediaQueryList")}}、{{domxref("MediaQueryListEvent")}} をご覧ください。</li> - <li>リストの値を変更する {{domxref("DOMTokenList")}} のメソッドが、自動的にホワイトスペースの切りつめと重複する値の削除を行うようになりました ({{bug("869788")}}、<a href="/en-us/docs/Web/API/DOMTokenList#Trimming_of_whitespace_and_removal_of_duplicates">Trimming of whitespace and removal of duplicates</a> をご覧ください)。</li> + <li>リストの値を変更する {{domxref("DOMTokenList")}} のメソッドが、自動的にホワイトスペースの切りつめと重複する値の削除を行うようになりました ({{bug("869788")}}、<a href="/ja/docs/Web/API/DOMTokenList#Trimming_of_whitespace_and_removal_of_duplicates">Trimming of whitespace and removal of duplicates</a> をご覧ください)。</li> <li>{{domxref("HTMLInputElement")}} の <code>maxLength</code> プロパティを、同等の HTML が生成された後に JavaScript で動的に変更することが可能になりました ({{bug(1352799)}})。</li> <li>{{domxref("URL.URL", "URL()")}} コンストラクターの base (第 2 引数) が {{domxref("DOMString")}} を受け入れないようになりました。{{domxref("USVString")}} のみ受け入れます。既存の {{domxref("URL")}} オブジェクトを base に使用することは可能であり、それ自体をオブジェクトの {{domxref("DOMString.href","href")}} 属性に文字列化します ({{bug(1368950)}})。</li> </ul> @@ -92,7 +92,7 @@ translation_of: Mozilla/Firefox/Releases/55 <h4 id="Selection_API" name="Selection_API">Selection API</h4> <ul> - <li>内部で選択範囲が動いたときに editing hosts がどのようにフォーカスを得るかについて、他のブラウザーへ合わせるために <a href="/ja/docs/Web/API/Selection_API">Selection API</a> を更新しました ({{bug("1318312")}})。詳しくは <a href="/en-US/docs/Web/API/Selection#Behavior_of_Selection_API_in_terms_of_editing_host_focus_changes">Behavior of Selection API in terms of editing host focus changes</a> をご覧ください。</li> + <li>内部で選択範囲が動いたときに editing hosts がどのようにフォーカスを得るかについて、他のブラウザーへ合わせるために <a href="/ja/docs/Web/API/Selection_API">Selection API</a> を更新しました ({{bug("1318312")}})。詳しくは <a href="/ja/docs/Web/API/Selection#Behavior_of_Selection_API_in_terms_of_editing_host_focus_changes">Behavior of Selection API in terms of editing host focus changes</a> をご覧ください。</li> <li>最近の仕様の変更に合致するよう、{{domxref("Selection")}} API を更新しました ({{bug(1359371)}}): <ul> <li>{{domxref("Selection.collapse", "collapse()")}} および {{domxref("Selection.extend", "extend()")}} メソッドの <code>offset</code> 引数を省略可能にしました。</li> @@ -109,7 +109,7 @@ translation_of: Mozilla/Firefox/Releases/55 <ul> <li>Worker および Shared Worker を、識別用の <code>name</code> プロパティをつけて作成できるようになりました。{{domxref("Worker.Worker", "Worker()")}} および {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} コンストラクター、{{domxref("DedicatedWorkerGlobalScope")}} および {{domxref("SharedWorkerGlobalScope")}} インターフェイスをご覧ください ({{bug(1364297)}})。</li> - <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout","setTimeout()")}} および {{domxref("WindowOrWorkerGlobalScope.setInterval","setInterval()")}} が、バックグラウンドのタブでトラッキングスクリプトに対して最小間隔の調整を課すようになりました。<a href="/en-us/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Throttling_of_tracking_timeout_scripts">Throttling of tracking timeout scripts</a> をご覧ください ({{bug(1355311)}})。</li> + <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout","setTimeout()")}} および {{domxref("WindowOrWorkerGlobalScope.setInterval","setInterval()")}} が、バックグラウンドのタブでトラッキングスクリプトに対して最小間隔の調整を課すようになりました。<a href="/ja/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Throttling_of_tracking_timeout_scripts">Throttling of tracking timeout scripts</a> をご覧ください ({{bug(1355311)}})。</li> </ul> <h4 id="Service_WorkersPush" name="Service_WorkersPush">Service Workers/Push</h4> @@ -216,7 +216,7 @@ translation_of: Mozilla/Firefox/Releases/55 <li><a href="/ja/Add-ons/WebExtensions/API/proxy">proxy API</a></li> <li><a href="/ja/Add-ons/WebExtensions/manifest.json/chrome_settings_overrides">chrome_settings_overrides キーで、ブラウザーのホームページをオーバーライドできます。</a></li> <li>browser_style プロパティで、<a href="/ja/Add-ons/WebExtensions/manifest.json/browser_action">ブラウザーアクションポップアップ</a>、<a href="/ja/Add-ons/WebExtensions/manifest.json/sidebar_action">サイドバー</a>、<a href="/ja/Add-ons/WebExtensions/manifest.json/options_ui">オプションページ</a> にブラウザーライクなスタイルを適用できます。</li> - <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/permissions">permissions API</a></li> + <li><a href="/ja/Add-ons/WebExtensions/API/permissions">permissions API</a></li> </ul> <h2 id="See_also" name="See_also">関連情報</h2> diff --git a/files/ja/mozilla/firefox/releases/59/index.html b/files/ja/mozilla/firefox/releases/59/index.html index 94e01db4af..d70765e586 100644 --- a/files/ja/mozilla/firefox/releases/59/index.html +++ b/files/ja/mozilla/firefox/releases/59/index.html @@ -180,10 +180,10 @@ translation_of: Mozilla/Firefox/Releases/59 </li> <li>新しい <a href="/ja/Add-ons/WebExtensions/API/browserSettings">ブラウザー設定</a>: <ul> - <li><a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/API/browserSettings/contextMenuShowEvent"><code>contextMenuShowEvent</code></a></li> - <li><a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/API/browserSettings/openBookmarksInNewTabs"><code>openBookmarksInNewTabs</code></a></li> - <li><a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/API/browserSettings/openSearchResultsInNewTabs"><code>openSearchResultsInNewTabs</code></a></li> - <li><a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/API/browserSettings/proxyConfig"><code>proxyConfig</code></a></li> + <li><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/browserSettings/contextMenuShowEvent"><code>contextMenuShowEvent</code></a></li> + <li><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/browserSettings/openBookmarksInNewTabs"><code>openBookmarksInNewTabs</code></a></li> + <li><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/browserSettings/openSearchResultsInNewTabs"><code>openSearchResultsInNewTabs</code></a></li> + <li><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/browserSettings/proxyConfig"><code>proxyConfig</code></a></li> </ul> </li> <li>新しい <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/tabs">tabs</a></code> の API: diff --git a/files/ja/mozilla/firefox/releases/6/index.html b/files/ja/mozilla/firefox/releases/6/index.html index 4ca52ffc09..baaafdc920 100644 --- a/files/ja/mozilla/firefox/releases/6/index.html +++ b/files/ja/mozilla/firefox/releases/6/index.html @@ -14,7 +14,7 @@ translation_of: Mozilla/Firefox/Releases/6 <li>プログレスバーを表す HTML5 の <a href="/ja/docs/Web/HTML/Element/progress" title="HTML の <progress> 要素は、タスクの進捗状況を表示します。プログレスバーとしてよく表示されます。"><code><progress></code></a> 要素がサポートされました。</li> <li>メディア要素にテキストトラックを追加する HTML5 の <a href="/ja/docs/Web/HTML/Element/track" title="HTML の <track> 要素はメディア要素 (<audio> および <video>) の子として使用します。この要素は自動的に処理される字幕など、時間指定されたテキストトラック（または時系列データ）を指定できます。トラックは WebVTT (Web Video Text Tracks) 形式 (.vtt ファイル) 又は Timed Text Markup Language (TTML) で整形します。"><code><track></code></a> 要素について、そのパース処理部分が実装されました。要素そのものは実装されていませんが、DOM に現れるようにはなります。</li> <li><a href="/ja/docs/Web/CSS/border-radius" title="CSS の border-radius プロパティは、要素の境界の外側の角を丸めます。1つの半径を設定すると円の角になり、2つの半径を設定すると楕円の角になります。"><code>border-radius</code></a> プロパティによって角が丸められたコンテナ内の <a href="/ja/docs/Web/HTML/Element/iframe" title="HTML のインラインフレーム要素 (<iframe>) は、入れ子になった閲覧コンテキストを表現し、現在の HTML ページに他のページを埋め込むことができます。"><code><iframe></code></a> についても、適切に角が丸められるようになりました。</li> - <li><a href="/ja/docs/Web/HTML/Element/form" title="HTML の <form> 要素は、ウェブサーバーに情報を送信するための対話型コントロールを含む文書の区間を表します。"><code><form></code></a> 要素の <a href="/ja/docs/Web/HTML/Element/input" title="HTML の <input> 要素は、ユーザーからデータを受け取るための、ウェブベースのフォーム用の対話的なコントロールを作成するために使用します。"><code><input></code></a> テキストフィールドが XUL の <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/maxwidth">maxwidth</a></span></code> プロパティをサポートしなくなりました。これは意図的なものではなく、また HTML 仕様違反でもあります。要素の最大幅を設定するには、<code><a href="/ja/docs/Web/HTML/Element/input#attr-size">size</a></code> 属性を利用します。</li> + <li><a href="/ja/docs/Web/HTML/Element/form" title="HTML の <form> 要素は、ウェブサーバーに情報を送信するための対話型コントロールを含む文書の区間を表します。"><code><form></code></a> 要素の <a href="/ja/docs/Web/HTML/Element/input" title="HTML の <input> 要素は、ユーザーからデータを受け取るための、ウェブベースのフォーム用の対話的なコントロールを作成するために使用します。"><code><input></code></a> テキストフィールドが XUL の <code><span><a href="/ja/docs/XUL/Property/maxwidth">maxwidth</a></span></code> プロパティをサポートしなくなりました。これは意図的なものではなく、また HTML 仕様違反でもあります。要素の最大幅を設定するには、<code><a href="/ja/docs/Web/HTML/Element/input#attr-size">size</a></code> 属性を利用します。</li> <li><a href="/ja/docs/Web/HTML/Element/canvas" title="HTML の <canvas> 要素 と Canvas スクリプティング API や WebGL API を使用して、グラフィックスやアニメーションを描画することができます。"><code><canvas></code></a> の <a href="/ja/docs/Web/API/CanvasRenderingContext2d" title='このインターフェイスのオブジェクトを取得するには、以下のようにのgetContext()の引数に"2d"を指定して呼び出します。'><code>CanvasRenderingContext2d</code></a> プロパティ <code>fillStyle</code> と <code>strokeStyle</code> はこれまで、妥当な色の指定の後に続く余計なものを無視する処理をしていましたが、適切にエラーとして処理されるように修正されました。たとえば、"red blue" を指定したとき、これまでは "red" と扱われていましたが、これからは指定そのものが無視されます。</li> <li><a href="/ja/docs/Web/HTML/Element/canvas" title="HTML の <canvas> 要素 と Canvas スクリプティング API や WebGL API を使用して、グラフィックスやアニメーションを描画することができます。"><code><canvas></code></a> 要素の width と height を適切に 0px と指定できるようになりました。これまではそう指定しても 300px にされていました。</li> <li>HTML <a href="/ja/docs/HTML/Global_attributes#attr-data-*" title="HTML/Global_attributes#attr-data-*">カスタムデータ属性</a> (data-*) がサポートされました。DOM プロパティ <a href="/ja/docs/Web/API/Element/dataset" title="この項目についての文書はまだ書かれていません。書いてみませんか？"><code>element.dataset</code></a> からデータにアクセスできます。</li> @@ -119,7 +119,7 @@ translation_of: Mozilla/Firefox/Releases/6 <ul> <li><code>Content-Disposition</code> ヘッダの構文解析が修正され、バックスラッシュでエスケープされた ASCII 文字が適切に文字そのものとして処理されるようになりました。これまではその文字をアンダースコア ("<code>_</code>")に置き換えるという誤った処理がなされていました。</li> <li><code>Set-Cookie</code> ヘッダのパスの値において、クォートが適切に処理されるようになりました。これまでクォートを使った場合はそれがデリミタではなく、パスの文字列として認識されていました。<strong>この変更により、いくつかのサイトで互換性の問題が発生する可能性があります。</strong>製作者はコードをチェックすることが望まれます。</li> - <li><a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.42"><code>Upgrade</code></a> リクエストヘッダがサポートされました。<code><a href="https://developer.mozilla.org/ja/docs/XPCOM_Interface_Reference/nsIHttpChannelInternal#HTTPUpgrade()">nsIHttpChannelInternal.HTTPUpgrade()</a></code> を呼ぶことで、HTTP チャネルから他のプロトコルへのアップグレードをリクエストできます。</li> + <li><a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.42"><code>Upgrade</code></a> リクエストヘッダがサポートされました。<code><a href="/ja/docs/XPCOM_Interface_Reference/nsIHttpChannelInternal#HTTPUpgrade()">nsIHttpChannelInternal.HTTPUpgrade()</a></code> を呼ぶことで、HTTP チャネルから他のプロトコルへのアップグレードをリクエストできます。</li> </ul> <h3 id="Other_changes" name="Other_changes">その他の変更</h3> <ul> diff --git a/files/ja/mozilla/firefox/releases/71/index.html b/files/ja/mozilla/firefox/releases/71/index.html index bc20d2c322..6a11bf5be6 100644 --- a/files/ja/mozilla/firefox/releases/71/index.html +++ b/files/ja/mozilla/firefox/releases/71/index.html @@ -40,7 +40,7 @@ translation_of: Mozilla/Firefox/Releases/71 <li><a href="/ja/docs/Tools/Network_Monitor/Inspecting_web_sockets">Web sockets インスペクター</a> をデフォルトで有効化しました ({{bug(1573805)}})。</li> <li>要求/応答のボディ、ヘッダー、Cookie の <a href="/ja/docs/Tools/Network_Monitor/request_list#Search_in_requests">全文検索</a> が可能になりました。</li> <li>読み込み時に <a href="/ja/docs/Tools/Network_Monitor/request_list#Blocking_specific_URLs">特定の URL をブロックする</a> パターンを入力できるようになりました。</li> - <li><a href="/docs/Tools/Network_Monitor/request_details#Timings">タイミングタブ</a> で、{{httpheader("Server-Timing")}} ヘッダーで送信したタイミングデータを表示するようになりました ({{bug(1403051)}})。</li> + <li><a href="/ja/docs/Tools/Network_Monitor/request_details#Timings">タイミングタブ</a> で、{{httpheader("Server-Timing")}} ヘッダーで送信したタイミングデータを表示するようになりました ({{bug(1403051)}})。</li> </ul> <p><a href="/ja/docs/Tools/Page_Inspector">インスペクター</a>:</p> diff --git a/files/ja/mozilla/firefox/releases/74/index.html b/files/ja/mozilla/firefox/releases/74/index.html index 4f6fa47dfb..9dd9d7bf41 100644 --- a/files/ja/mozilla/firefox/releases/74/index.html +++ b/files/ja/mozilla/firefox/releases/74/index.html @@ -49,7 +49,7 @@ translation_of: Mozilla/Firefox/Releases/74 <h3 id="JavaScript" name="JavaScript">JavaScript</h3> <ul> - <li><a href="/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Optional chaining operator</a> を実装しました ({{bug(1566143)}})。</li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Optional chaining operator</a> を実装しました ({{bug(1566143)}})。</li> <li>JavaScript URL (<code>javascript:</code>) を評価した結果が文字列であるとき、この文字列は HTML 文書を生成するように解析され、そして表示されます。以前は文書の URL (例えば <code><a href="/ja/docs/Web/API/Document/location">document.location</a></code> プロパティで報告されます) が元々の <code>javascript:</code> URL でした。これが <code>javascript:</code> URL を評価した結果の、文書の URL を正しく表すようになりました ({{bug(836567)}})。</li> </ul> diff --git a/files/ja/mozilla/firefox/releases/8/index.html b/files/ja/mozilla/firefox/releases/8/index.html index 0cc545fca1..bbb5b6e27b 100644 --- a/files/ja/mozilla/firefox/releases/8/index.html +++ b/files/ja/mozilla/firefox/releases/8/index.html @@ -130,7 +130,7 @@ translation_of: Mozilla/Firefox/Releases/8 <h3 id="XUL">XUL</h3> <ul> - <li>A bug in <a href="/ja/docs/Web/API/Document/execCommand" title="HTML 文書が designMode に切り替えられた時、 document オブジェクトは、フォーム入力欄や contenteditable を持った要素のように現在編集可能な領域を操作するためにコマンドを実行するために、 execCommand メソッドを公開します。"><code>document.execCommand()</code></a> that occurred when calling it on the value of <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/contentDocument">contentDocument</a></span></code> has been fixed. Since Firefox 3, this resulted in errors instead of working correctly.</li> + <li>A bug in <a href="/ja/docs/Web/API/Document/execCommand" title="HTML 文書が designMode に切り替えられた時、 document オブジェクトは、フォーム入力欄や contenteditable を持った要素のように現在編集可能な領域を操作するためにコマンドを実行するために、 execCommand メソッドを公開します。"><code>document.execCommand()</code></a> that occurred when calling it on the value of <code><span><a href="/ja/docs/XUL/Property/contentDocument">contentDocument</a></span></code> has been fixed. Since Firefox 3, this resulted in errors instead of working correctly.</li> <li><a href="/ja/docs/Extensions/Bootstrapped_extensions" title="Bootstrapped extensions">Bootstrapped add-ons</a> can now load chrome using a <a href="/ja/docs/Chrome_Registration" title="chrome.manifest"><code>chrome.manifest</code></a> file. See the section <a href="/ja/docs/Extensions/Bootstrapped_extensions#Adding_user_interface_with_a_chrome.manifest" title="Extensions/Bootstrapped_extensions#Adding_user_interface_with_a_chrome.manifest">Adding user interface with a chrome.manifest</a> for details.</li> </ul> diff --git a/files/ja/mozilla/firefox/releases/9/index.html b/files/ja/mozilla/firefox/releases/9/index.html index f8cc288282..f8319b32cd 100644 --- a/files/ja/mozilla/firefox/releases/9/index.html +++ b/files/ja/mozilla/firefox/releases/9/index.html @@ -93,10 +93,10 @@ translation_of: Mozilla/Firefox/Releases/9 <h3 id="XUL">XUL</h3> <ul> - <li>The <code><a href="/ja/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code> element now has a <code id="a-pending"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/pending">pending</a></code> attribute, whose value is <code>true</code>, when the tab is in the process of being restored by the session store service. This can be used for styling the tab in themes. The attribute isn't present on tabs that aren't pending.</li> - <li>The <code><a href="/ja/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code> element now has an <code id="a-unread"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/unread">unread</a></code> attribute, whose value is <code>true</code>, when the tab has changed since the last time it was the active tab or if it hasn't been selected since the current session began. The attribute isn't present on tabs that are not unread.</li> + <li>The <code><a href="/ja/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code> element now has a <code id="a-pending"><a href="/ja/docs/Mozilla/Tech/XUL/Attribute/pending">pending</a></code> attribute, whose value is <code>true</code>, when the tab is in the process of being restored by the session store service. This can be used for styling the tab in themes. The attribute isn't present on tabs that aren't pending.</li> + <li>The <code><a href="/ja/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code> element now has an <code id="a-unread"><a href="/ja/docs/Mozilla/Tech/XUL/Attribute/unread">unread</a></code> attribute, whose value is <code>true</code>, when the tab has changed since the last time it was the active tab or if it hasn't been selected since the current session began. The attribute isn't present on tabs that are not unread.</li> <li>You can now use a <code><a href="/ja/docs/Mozilla/Tech/XUL/panel" title="panel">panel</a></code> as a drag image for DOM drag and drop operations. This lets you use the standard drag & drop API for <a href="/ja/docs/DragDrop/Drag_Operations#Using_XUL_panels_as_drag_images" title="DragDrop/Drag_Operations#Using_XUL_panels_as_drag_images">drag and drop of XUL content</a>.</li> - <li>The <code><a href="/ja/docs/Mozilla/Tech/XUL/notificationbox" title="notificationbox">notificationbox</a></code> element's <span id="m-appendNotification"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/appendNotification">appendNotification</a></code></span> method now lets you specify a callback that gets called for interesting events related to the notification box. Currently, the only event is "removed", which tells you the box has been removed from its window.</li> + <li>The <code><a href="/ja/docs/Mozilla/Tech/XUL/notificationbox" title="notificationbox">notificationbox</a></code> element's <span id="m-appendNotification"><code><a href="/ja/docs/Mozilla/Tech/XUL/Method/appendNotification">appendNotification</a></code></span> method now lets you specify a callback that gets called for interesting events related to the notification box. Currently, the only event is "removed", which tells you the box has been removed from its window.</li> </ul> <h3 id="JavaScript_code_module_changes">JavaScript code module changes</h3> @@ -125,10 +125,10 @@ translation_of: Mozilla/Firefox/Releases/9 <li><a href="/ja/docs/XPCOM_Interface_Reference/nsISound" title="XPCOM_Interface_Reference/nsISound"><code>nsISound</code></a> インタフェースに新しい定数 <code>EVENT_EDITOR_MAX_LEN</code> が導入され、テキスト欄に入力された文字数が制限を超えた場合にシステム効果音を鳴らせるようになりました。今のところ、これは Windows のみで使用されています。</li> <li><a href="/ja/docs/XPCOM_Interface_Reference/nsIScriptError2" title="XPCOM_Interface_Reference/nsIScriptError2"><code>nsIScriptError2</code></a> インタフェースに新しいプロパティ <code>timeStamp</code> と <code>innerWindowID</code> が追加されました。また、<code>initWithWindowID()</code> メソッドが、外部ウィンドウ ID の代わりに内部ウィンドウ ID を受け取るようになりました。</li> <li><a href="/ja/docs/XPCOM_Interface_Reference/nsIBidiKeyboard" title="XPCOM_Interface_Reference/nsIBidiKeyboard"><code>nsIBidiKeyboard</code></a> インタフェースに <a href="/ja/docs/XPCOM_Interface_Reference/nsIBidiKeyboard#haveBidiKeyboards" title="XPCOM_Interface_Reference/nsIBidiKeyboard#haveBidiKeyboards"><code>haveBidiKeyboards</code></a> 属性が追加されました。これは、OS に少なくともひとつ各方向 (LTR もしくは RTL) のキーボードがインストールされているかどうかを判別できるものです。.</li> - <li>The new <code><a href="https://developer.mozilla.org/ja/docs/XPCOM_Interface_Reference/nsIEditor#isSelectionEditable">nsIEditor.isSelectionEditable</a></code> attribute lets you determine if the current selection anchor is editable. This helps to support cases where only parts of the document are editable, by letting you see if the current selection is in an editable section.</li> - <li>The <code><a href="https://developer.mozilla.org/ja/docs/XPCOM_Interface_Reference/nsIBrowserHistory#registerOpenPage()">nsIBrowserHistory.registerOpenPage()</a></code> and <code><a href="https://developer.mozilla.org/ja/docs/XPCOM_Interface_Reference/nsIBrowserHistory#unregisterOpenPage()">nsIBrowserHistory.unregisterOpenPage()</a></code> methods have been removed as part of a performance overhaul in the Places system. You can use the corresponding methods in <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/mozIPlacesAutoComplete" title="">mozIPlacesAutoComplete</a></code> instead.</li> - <li>The <code><a href="https://developer.mozilla.org/ja/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils#wrapDOMFile()">nsIDOMWindowUtils.wrapDOMFile()</a></code> method has been added; this returns a DOM <a href="/ja/docs/Web/API/File" title="File インターフェイスは、ファイルについての情報を提供したり、ウェブページ内の JavaScript でその内容にアクセスできるようにしたりします。"><code>File</code></a> object for a given <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFile" title="">nsIFile</a></code>.</li> - <li>The <code><a href="https://developer.mozilla.org/ja/docs/XPCOM_Interface_Reference/nsIChromeFrameMessageManager#removeDelayedFrameScript()">nsIChromeFrameMessageManager.removeDelayedFrameScript()</a></code> method was added to support removing delayed load scripts. Bootstrapped add-ons should use this, at shutdown, to remove any scripts it loaded using <code><a href="https://developer.mozilla.org/ja/docs/XPCOM_Interface_Reference/nsIChromeFrameMessageManager#loadFrameScript()">nsIChromeFrameMessageManager.loadFrameScript()</a></code> with the delayed load flag set. This is exposed to add-ons as <code>browser.messageManager.removeDelayedFrameScript()</code>.</li> + <li>The new <code><a href="/ja/docs/XPCOM_Interface_Reference/nsIEditor#isSelectionEditable">nsIEditor.isSelectionEditable</a></code> attribute lets you determine if the current selection anchor is editable. This helps to support cases where only parts of the document are editable, by letting you see if the current selection is in an editable section.</li> + <li>The <code><a href="/ja/docs/XPCOM_Interface_Reference/nsIBrowserHistory#registerOpenPage()">nsIBrowserHistory.registerOpenPage()</a></code> and <code><a href="/ja/docs/XPCOM_Interface_Reference/nsIBrowserHistory#unregisterOpenPage()">nsIBrowserHistory.unregisterOpenPage()</a></code> methods have been removed as part of a performance overhaul in the Places system. You can use the corresponding methods in <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/mozIPlacesAutoComplete" title="">mozIPlacesAutoComplete</a></code> instead.</li> + <li>The <code><a href="/ja/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils#wrapDOMFile()">nsIDOMWindowUtils.wrapDOMFile()</a></code> method has been added; this returns a DOM <a href="/ja/docs/Web/API/File" title="File インターフェイスは、ファイルについての情報を提供したり、ウェブページ内の JavaScript でその内容にアクセスできるようにしたりします。"><code>File</code></a> object for a given <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFile" title="">nsIFile</a></code>.</li> + <li>The <code><a href="/ja/docs/XPCOM_Interface_Reference/nsIChromeFrameMessageManager#removeDelayedFrameScript()">nsIChromeFrameMessageManager.removeDelayedFrameScript()</a></code> method was added to support removing delayed load scripts. Bootstrapped add-ons should use this, at shutdown, to remove any scripts it loaded using <code><a href="/ja/docs/XPCOM_Interface_Reference/nsIChromeFrameMessageManager#loadFrameScript()">nsIChromeFrameMessageManager.loadFrameScript()</a></code> with the delayed load flag set. This is exposed to add-ons as <code>browser.messageManager.removeDelayedFrameScript()</code>.</li> <li>The <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAppStartup" title="">nsIAppStartup</a></code> interface has a new <code>interrupted</code> attribute, which lets you know if the startup process was interrupted at any point by an interactive prompt. This can be helpful, for example, when timing startups during performance evaluation, to be able to drop numbers from sessions that were interrupted.</li> <li>The <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIEditorSpellCheck" title="">nsIEditorSpellCheck</a></code> interface has been revised to support per-site selection of spell checker dictionaries.</li> </ul> diff --git a/files/ja/mozilla/firefox/releases/91/index.html b/files/ja/mozilla/firefox/releases/91/index.html index 44e62cdb71..bd51ce7152 100644 --- a/files/ja/mozilla/firefox/releases/91/index.html +++ b/files/ja/mozilla/firefox/releases/91/index.html @@ -41,7 +41,7 @@ tags: <ul>
<li>{{jsxref("Intl/DateTimeFormat/formatRange", "Intl.DateTimeFormat.prototype.formatRange()")}} および {{jsxref("Intl/DateTimeFormat/formatRangeToParts", "Intl.DateTimeFormat.prototype.formatRangeToParts()")}} を、Release ビルドでサポートしました。<code>formatRange()</code> メソッドは、2 つの {{jsxref("Date")}} オブジェクトの間の期間をローカライズおよび整形した文字列で返します (例: "21/01/05 – 21/01/10")。<code>formatRangeToParts()</code> メソッドは、整形された期間のロケール固有の<em>部品</em>を持つ配列を返します ({{bug(1653024)}})。</li>
<li>{{jsxref("Intl/DateTimeFormat/DateTimeFormat", "Intl.DateTimeFormat() コンストラクター")}} が、タイムゾーンの表示方法を整形するための <code>timeZoneName</code> オプションを新たに 4 種類受け入れるようになりました。これにはローカライズされた GMT 形式の <code>shortOffset</code> および <code>longOffset</code> と、一般的な非ロケーション形式の <code>shortGeneric</code> および <code>longGeneric</code> が含まれます ({{bug(1653024)}})。</li>
- <li>{{jsxref("Global_Objects/Error/Error", "Error() コンストラクター")}} が、<code>option</code> 引数の値として <code>cause</code> をとれるようになりました。これはコードがエラーをキャッチして、元のエラーやスタックトレースを持つ新たなバージョン、または変更したバージョンのエラーを発生させることができます ({{bug(1653024)}})。</li>
+ <li>{{jsxref("Global_Objects/Error/Error", "Error() コンストラクター")}} が、<code>option</code> 引数の値として <code>cause</code> をとれるようになりました。これはコードがエラーをキャッチして、元のエラーやスタックトレースを持つ新たなバージョン、または変更したバージョンのエラーを発生させることができます ({{bug(1679653)}})。</li>
</ul>
diff --git a/files/ja/mozilla/firefox/releases/92/index.html b/files/ja/mozilla/firefox/releases/92/index.html new file mode 100644 index 0000000000..a9fe1a2ee0 --- /dev/null +++ b/files/ja/mozilla/firefox/releases/92/index.html @@ -0,0 +1,79 @@ +---
+title: Firefox 92 for developers
+slug: Mozilla/Firefox/Releases/92
+tags:
+ - '92'
+ - Firefox
+ - Mozilla
+ - Release
+---
+<p>{{FirefoxSidebar}}</p>
+
+<p class="summary">このページでは、開発者に影響する Firefox 92 の変更点をまとめています。Firefox 92 は 2021 年 9 月 7 日にリリースされました。</p>
+
+<div class="note notecard">
+ <h4>補足</h4>
+ <p>Mozilla Hacks の <a href="https://hacks.mozilla.org/2021/09/time-for-a-review-of-firefox-92/">Time for a review of Firefox 92</a> もご覧ください。</p>
+</div>
+
+<h2 id="Changes_for_web_developers">ウェブ開発者向けの変更点一覧</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<p>変更なし。</p>
+
+<h3 id="CSS">CSS</h3>
+
+<ul>
+ <li>{{cssxref("break-inside")}} プロパティの <code>avoid-page</code> および <code>avoid-column</code> キーワードをサポートしました ({{bug(1722945)}})。</li>
+ <li>{{cssxref("font-size-adjust")}} プロパティの二値構文をサポートしました ({{bug(1720131)}})。</li>
+ <li>{{cssxref("@font-face/size-adjust")}} ディスクリプターをサポートしました ({{bug(1720131)}})。</li>
+ <li>{{cssxref("accent-color")}} プロパティをサポートしました ({{bug(1722031)}})。</li>
+ <li>{{cssxref("font-family")}} プロパティの値 <code>system-ui</code> をサポートしました ({{bug(1226042)}})。</li>
+</ul>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<ul>
+ <li>{{jsxref("Object.hasOwn()")}} を、プロパティがオブジェクトで定義されたものか継承されたものかを確認するために使用できるようになりました ({{bug(1721149)}})。</li>
+</ul>
+
+
+<h3 id="APIs">API</h3>
+
+<ul>
+ <li>カスタム要素に <code>disabledFeatures</code> 静的プロパティを実装しました ({{bug(1723396)}})。</li>
+</ul>
+
+<h4 id="DOM">DOM</h4>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/HTMLSlotElement">Imperative Slotting API</a> (<a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">Shadow Dom API</a> の一部) を実装しました ({{bug(1705141)}})。</li>
+ <li>{{HTMLElement("input")}} および {{HTMLElement("textarea")}} でテキストの選択が変更されたことを、それぞれ {{domxref("HTMLInputElement.selectionchange_event", "HTMLInputElement")}} および {{domxref("HTMLTextAreaElement/selectionchange_event", "HTMLTextAreaElement")}} の <code>selectionchange</code> イベントをリッスンすることで監視できるようになりました ({{bug(1648944)}})。</li>
+</ul>
+
+<h4 id="Media_WebRTC_and_Web_Audio">Media、WebRTC、Web Audio</h4>
+
+<ul>
+ <li>スピーカーやヘッドホンのようなサウンド出力デバイスへのアクセスが、<a href="speaker-selection">speaker-selection</a> 機能ポリシーで保護されるようになりました ({{bug(1577199)}})。</li>
+</ul>
+
+
+<h3 id="webdriver_conformance_marionette">WebDriver conformance (Marionette)</h3>
+
+<ul>
+ <li><code>webSocketUrl</code> 特性のサポートが向上しました。<code>true</code> が渡されて、かつ BiDi がサポートされている場合に、WebDriver BiDi の websocket URL を返すようになりました ({{bug(1692984)}})。</li>
+</ul>
+
+
+<h2 id="Changes_for_add-on_developers">アドオン開発者向けの変更点</h2>
+
+<ul>
+ <li>{{WebExtAPIRef('downloads.download')}}、{{WebExtAPIRef('downloads.DownloadQuery')}}
+{{WebExtAPIRef('downloads.DownloadItem')}} で <code>cookieStoreId</code> をサポートしました。{{WebExtAPIRef('downloads.DownloadQuery')}} および {{WebExtAPIRef('downloads.DownloadItem')}} 型に加えて、{{WebExtAPIRef('downloads.search')}} および {{WebExtAPIRef('downloads.erase')}} でのサポートも提供します。ブラウザー拡張機能が、Container タブ (<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Work_with_contextual_identities">contextual identities</a>) のような特定の Cookie ストアとダウンロードを関連付けできるようになりました ({{bug(1669566)}})。</li>
+</ul>
+
+
+<h2 id="Older_versions">過去のバージョン</h2>
+
+<p>{{Firefox_for_developers(91)}}</p>
diff --git a/files/ja/orphaned/map/index.html b/files/ja/orphaned/map/index.html deleted file mode 100644 index 970083dc95..0000000000 --- a/files/ja/orphaned/map/index.html +++ /dev/null @@ -1,230 +0,0 @@ ---- -title: Map -slug: orphaned/Map -original_slug: Map ---- -<p><span style="line-height: 1.5;">{{ SeeCompatTable() }}</span></p> - -<p>{{ warning("The SpiderMonkey Map implementation is a prototype and the Map API and semantics specifications are unstable. The SpiderMonkey implementation may not reflect the latest specification draft. It is subject to change anytime. It is provided as an experimental feature. Do not rely on it for production code.") }}</p> - -<h2 id="Introduction">Introduction</h2> - -<p><code>Map</code> <span style="line-height: 1.5;">オブジェクトはシンプルなキーバリューマップです。 キーとバリューにあらゆる値（オブジェクトとプリミティブ値）が使用できます。</span></p> - -<p>Key equality is based on the "same-value" algorithm: <code>NaN</code> is considered the same as <code>NaN</code> (even though <code>NaN !== NaN</code>), <code>-0</code> and <code>+0</code> are considered distinct (even though <code>-0 === +0</code>), and all other values are considered equal according to the semantics of the === operator.</p> - -<h2 id="API">API</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Constructor</th> - <th>Description</th> - </tr> - <tr> - <td><code>new Map([iterable])</code></td> - <td>Returns a new Map object. If iterable is an Array or other iterable object whose elements are key-value pairs (2-element Arrays), then each of those key-value pairs will be added to the new Map.</td> - </tr> - <tr> - <th>Method</th> - <th>Description</th> - </tr> - <tr> - <td><code>myMap.get(key)</code></td> - <td>Returns the value associated to the <code>key</code>, or <code>undefined</code> if there is none.</td> - </tr> - <tr> - <td><code>myMap.set(key, value)</code></td> - <td>Sets the value for the <code>key</code> in <code>myMap</code>. Returns <code>undefined</code>.</td> - </tr> - <tr> - <td><code>myMap.has(key)</code></td> - <td>Returns a boolean asserting whether a value has been associated to the <code>key</code> in <code>myMap</code> or not</td> - </tr> - <tr> - <td><code>myMap.delete(key)</code></td> - <td>Removes any value associated to the <code>key</code>. After such a call, <code>myMap.has(key)</code> will return <code>false</code>.</td> - </tr> - <tr> - <td><code>myMap.clear()</code></td> - <td>Removes all key/value pairs from <code>myMap</code>.</td> - </tr> - <tr> - <th>Property</th> - <th>Description</th> - </tr> - <tr> - <td><code>myMap.size</code></td> - <td> - <p>Returns the number of key/value pairs in <code>myMap</code>.</p> - In Firefox 18 and earlier, <code>size</code> was a method. In Firefox 19 and later it is a property.</td> - </tr> - </tbody> -</table> - -<p>A Map object can iterate its elements in insertion order - a <code>for..of</code> loop will return an array of <code>[key, value]</code> for each iteration.</p> - -<h2 id="Examples">Examples</h2> - -<pre class="brush: js">var myMap = new Map(); - -var keyObj = {}, - keyFunc = function () {}, - keyString = "a string"; - -// setting the values -myMap.set(keyString, "value associated with 'a string'"); -myMap.set(keyObj, "value associated with keyObj"); -myMap.set(keyFunc, "value associated with keyFunc"); - -myMap.size; // 3 - -// getting the values -myMap.get(keyString); // "value associated with 'a string'" -myMap.get(keyObj); // "value associated with keyObj" -myMap.get(keyFunc); // "value associated with keyFunc" - -myMap.get("a string"); // "value associated with 'a string'" - // because keyString === 'a string' -myMap.get({}); // undefined, because keyObj !== {} -myMap.get(function() {}) // undefined, because keyFunc !== function () {} -</pre> - -<p><code>NaN</code> can also be used as a key. Even though every <code>NaN</code> is not equal to itself (<code>NaN !== NaN</code> is true), the following example works, because <code>NaN</code>s are indistinguishable from each other:</p> - -<pre class="brush: js">var myMap = new Map(); -myMap.set(NaN, "not a number"); - -myMap.get(NaN); // "not a number" - -var otherNaN = Number("foo"); -myMap.get(otherNaN); // "not a number" -</pre> - -<p>Also note that JavaScript has two zero values, +0 and -0. These two zero values are treated as different keys in <code>Map</code>s:</p> - -<pre class="brush: js">var myMap = new Map(); -myMap.set(0, "positive zero"); -myMap.set(-0, "negative zero"); - -0 === -0; // true - -myMap.get(-0); // "negative zero" -myMap.get(0); // "positive zero" -</pre> - -<p>Maps can be iterated using a <code>for..of</code> loop:</p> - -<pre>var myMap = new Map(); -myMap.set(0, "zero"); -myMap.set(1, "one"); -for (var [key, value] of myMap) { - alert(key + " = " + value); -} -// Will show 2 alerts; first with "0 = zero" and second with "1 = one" -</pre> - -<h2 id="Objects_and_maps_compared">Objects and maps compared</h2> - -<p><a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a>s are similar to <code>Map</code>s in that both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. Because of this, <code>Object</code>s have been used as <code>Map</code>s historically; however, there are important differences between <code>Object</code>s and <code>Map</code>s that make using a <code>Map</code> better.</p> - -<ul> - <li>An <code>Object</code> has a prototype, so there are default keys in the map. However, this can be bypassed using <code>map = Object.create(null)</code>.</li> - <li>The keys of an <code>Object</code> are <a href="/en/JavaScript/Reference/Global_Objects/String" title="en/JavaScript/Reference/Global_Objects/String">String</a>s, where they can be any value for a <code>Map</code>.</li> - <li>You can get the size of a <code>Map</code> easily while you have to manually keep track of size for an <code>Object</code>.</li> -</ul> - -<p>Use maps over objects when keys are unknown until run time, and when all keys are the same type and all values are the same type.</p> - -<p>Use objects when there is logic that operates on individual elements.</p> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>31 [1]</td> - <td>{{ CompatGeckoDesktop("13") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td>iterable</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatGeckoDesktop("17") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td>Map.clear()</td> - <td>31 [1]</td> - <td>{{CompatGeckoDesktop("19")}}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatGeckoMobile("13") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td>iterable</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatGeckoDesktop("17") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td>Map.clear()</td> - <td>{{ CompatNo() }}</td> - <td>{{CompatGeckoMobile("19")}}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] The feature is available behind a preference. In <code style="font-size: 14px;">chrome://flags</code>, activate the entry “Enable Experimental JavaScript”.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=697479">Map and Set bug at Mozilla</a></li> - <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets">ECMAScript Harmony proposal</a></li> -</ul> diff --git a/files/ja/orphaned/web/api/navigator/registercontenthandler/index.html b/files/ja/orphaned/web/api/navigator/registercontenthandler/index.html deleted file mode 100644 index d1e788d8cc..0000000000 --- a/files/ja/orphaned/web/api/navigator/registercontenthandler/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Navigator.registerContentHandler() -slug: orphaned/Web/API/Navigator/registerContentHandler -tags: - - API - - MIME - - Method - - Navigator - - registerContentHandler - - ウェブベースプロトコルハンドラー - - 廃止 -translation_of: Web/API/Navigator/registerContentHandler -original_slug: Web/API/Navigator/registerContentHandler ---- -<div>{{ ApiRef("HTML DOM") }}{{ Obsolete_header }}</div> - -<p><span class="seoSummary">ウェブサイトが自分自身を、特定の MIME タイプのコンテンツのハンドラーとして可能な限り登録します。</span></p> - -<p>{{Note("ウェブサイトは自分自身のコンテンツハンドラーのみを登録できます、。セキュリティ上の理由で、拡張機能やウェブサイトが他のサイトを対象とするコンテンツハンドラーを登録することはできません。")}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">navigator.registerContentHandler(<em>mimeType</em>, <em>uri</em>, <em>title</em>);</pre> - -<ul> - <li><code>mimeType</code> は、関連付けたい MIME タイプを表す文字列です。</li> - <li><code>uri</code> は、関連づける URI を表す文字列です。</li> - <li><code>title</code> は、ユーザ向けの関連付けの名称を表す文字列です。</li> -</ul> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush:js;auto-links:false;">navigator.registerContentHandler( - "application/vnd.mozilla.maybe.feed", - "http://www.example.tld/?foo=%s", - "My Feed Reader" -);</pre> - -<h2 id="Notes" name="Notes">メモ</h2> - -<p><a href="/ja/docs/Firefox_2_for_developers" title="Firefox_2_for_developers">Firefox 2</a> 以降では、 MIME タイプのうち <code>application/vnd.mozilla.maybe.feed</code>, <code>application/atom+xml</code>, <code>application/rss+xml</code> のみに対応しています。これらの値は全て、同じ効果を持っています。また、関連付けは、全てのバージョンの Atom と RSS におけるフィードに対して適用されます。</p> - -<p>Firefox はこの機能が実装された唯一のブラウザーであり、標準には一致していません。この機能は HTML 標準から削除されており、使用しないでください。</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('HTML5.2', 'webappapis.html#dom-navigator-registercontenthandler', 'registerContentHandler()')}}</td> - <td>{{Spec2('HTML5.2')}}</td> - <td>この機能は HTML 5.2 に存在するが、 WHATWG HTML Living Standard からは削除済み。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">ブラウザーの対応</h2> - -<p>{{Compat("api.Navigator.registerContentHandler")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">ウェブベースのプロトコルハンドラー</a></li> - <li>{{domxref("Navigator.registerProtocolHandler()")}}</li> - <li><a href="/ja/docs/WebAPI/Web_Activities" title="/ja/docs/WebAPI/Web_Activities">Web activities</a>、特に view 及び open</li> - <li><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebContentHandlerRegistrar#registerContentHandler">XPCOM Interface Reference > nsIWebContentHandlerRegistrar > registerContentHandler</a> - この機能を XPCOM のスコープから使用する方法を紹介</li> -</ul> diff --git a/files/ja/orphaned/web/api/typeinfo/index.html b/files/ja/orphaned/web/api/typeinfo/index.html deleted file mode 100644 index 2fed8f4a87..0000000000 --- a/files/ja/orphaned/web/api/typeinfo/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: TypeInfo -slug: orphaned/Web/API/TypeInfo -tags: - - API - - DOM - - DOM Reference - - Interface - - NeedsContent - - Obsolete - - Reference - - TypeInfo - - Web -translation_of: Web/API/TypeInfo -original_slug: Web/API/TypeInfo ---- -<div>{{APIRef("DOM")}}</div> - -<div>{{obsolete_header}}</div> - -<p><span class="seoSummary"><em>廃止された</em> <code>TypeInfo</code> インターフェイスは、ドキュメントのスキーマ内の名前空間に名前をキー入力することによって DOM データ型を記述するために使用することを目的としていました。</span></p> - -<h2 id="プロパティ">プロパティ</h2> - -<dl> - <dt>{{domxref("TypeInfo.typeName")}} {{Readonlyinline}}</dt> - <dd>型の名前を示す {{domxref("DOMString")}} を返します。</dd> - <dt>{{domxref("TypeInfo.typeNamespace")}} {{Readonlyinline}}</dt> - <dd>スキーマ内の型の名前空間を示す {{domxref("DOMString")}} を返します。</dd> -</dl> - -<h2 id="メソッド">メソッド</h2> - -<dl> - <dt>{{domxref("TypeInfo.isDerivedFrom()")}}</dt> - <dd>{{jsxref("Boolean")}}. を返します。</dd> -</dl> - -<h2 id="定数">定数</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">定数</th> - <th scope="col">値</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>DERIVATION_RESTRICTION</code></td> - <td>1</td> - </tr> - <tr> - <td><code>DERIVATION_EXTENSION</code></td> - <td>2</td> - </tr> - <tr> - <td><code>DERIVATION_UNION</code></td> - <td>4</td> - </tr> - <tr> - <td><code>DERIVATION_LIST</code></td> - <td>8</td> - </tr> - </tbody> -</table> - -<h2 id="仕様">仕様</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#TypeInfo", "TypeInfo")}}</td> - <td>{{Spec2("DOM3 Core")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> diff --git a/files/ja/orphaned/web/api/userproximityevent/near/index.html b/files/ja/orphaned/web/api/userproximityevent/near/index.html deleted file mode 100644 index 4350a1e377..0000000000 --- a/files/ja/orphaned/web/api/userproximityevent/near/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: UserProximityEvent.near -slug: orphaned/Web/API/UserProximityEvent/near -tags: - - B2G - - Firefox OS - - Proximity - - WebAPI -translation_of: Web/API/UserProximityEvent/near -original_slug: Web/API/UserProximityEvent/near ---- -<p>{{APIRef("Proximity Events")}}{{obsolete_header}}</p> - -<p><code>near</code> プロパティは、デバイスの近くにものがあるかどうか（※近接センサーによる）を示す真偽値を返します。ある場合は <code>true</code> が、無い場合は <code>false</code> が返ります。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">var <var>near</var> = instanceOfUserProximityEvent.near;</pre> - -<h2 id="Value" name="Value">値</h2> - -<p>真偽値</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('Proximity Events', '#user-proximity', 'Proximity Events')}}</td> - <td>{{Spec2('Proximity Events')}}</td> - <td>最初期の定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> - - - -<p>{{Compat("api.UserProximityEvent.near")}}</p> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li>{{domxref("UserProximityEvent")}}</li> -</ul> diff --git a/files/ja/orphaned/web/css/@media/index/index.html b/files/ja/orphaned/web/css/@media/index/index.html deleted file mode 100644 index c6e2bb0aaa..0000000000 --- a/files/ja/orphaned/web/css/@media/index/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: 索引 -slug: orphaned/Web/CSS/@media/Index -tags: - - '@media' - - CSS - - 索引 -translation_of: Web/CSS/@media/Index -original_slug: Web/CSS/@media/Index ---- -<p>{{CSSRef}}</p> - -<p>{{Index("/ja/docs/Web/CSS/@media")}}</p> diff --git a/files/ja/orphaned/web/css/index/index.html b/files/ja/orphaned/web/css/index/index.html deleted file mode 100644 index 59cabe2185..0000000000 --- a/files/ja/orphaned/web/css/index/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: CSS 関連ドキュメントの索引 -slug: orphaned/Web/CSS/Index -tags: - - CSS - - Index - - MDN Meta -translation_of: Web/CSS/Index -original_slug: Web/CSS/Index ---- -<p>{{Index("/ja/docs/Web/CSS")}}</p> diff --git a/files/ja/orphaned/web/http/headers/index/index.html b/files/ja/orphaned/web/http/headers/index/index.html deleted file mode 100644 index 3018bbf0eb..0000000000 --- a/files/ja/orphaned/web/http/headers/index/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: 索引 -slug: orphaned/Web/HTTP/Headers/Index -tags: - - HTTP - - HTTP ヘッダー - - ヘッダー - - 索引 -translation_of: Web/HTTP/Headers/Index -original_slug: Web/HTTP/Headers/Index ---- -<div>{{HTTPSidebar}}</div> - -<p>{{Index("/ja/docs/Web/HTTP/Headers")}}</p> diff --git a/files/ja/tools/browser_console/index.html b/files/ja/tools/browser_console/index.html index 12b87526ca..829bbd96bc 100644 --- a/files/ja/tools/browser_console/index.html +++ b/files/ja/tools/browser_console/index.html @@ -54,7 +54,7 @@ translation_of: Tools/Browser_Console <ul> <li><a href="/ja/docs/Tools/Web_Console#HTTP_requests" title="Tools/Web_Console#HTTP_requests">HTTP 要求</a></li> - <li><a href="/ja/docs/Tools/Web_Console#Warnings_and_errors" title="Tools/Web_Console#Warnings_and_errors">警告とエラー</a> (JavaScript、CSS、セキュリティの警告やエラー、および <a href="https://developer.mozilla.org/ja/docs/Web/API/console" title="Web/API/console">console</a> API を使用して JavaScript コードから明示的に記録されるメッセージを含みます)</li> + <li><a href="/ja/docs/Tools/Web_Console#Warnings_and_errors" title="Tools/Web_Console#Warnings_and_errors">警告とエラー</a> (JavaScript、CSS、セキュリティの警告やエラー、および <a href="/ja/docs/Web/API/console" title="Web/API/console">console</a> API を使用して JavaScript コードから明示的に記録されるメッセージを含みます)</li> <li><a href="/ja/docs/Tools/Web_Console#Input.2Foutput_messages" title="Tools/Web_Console#Input.2Foutput_messages">入力/出力メッセージ</a>: コマンドラインからブラウザーに送信したコマンドと、そのコマンドの実行結果</li> </ul> diff --git a/files/ja/tools/deprecated_tools/index.html b/files/ja/tools/deprecated_tools/index.html index 7364b8da89..b676c73020 100644 --- a/files/ja/tools/deprecated_tools/index.html +++ b/files/ja/tools/deprecated_tools/index.html @@ -92,7 +92,7 @@ translation_of: Tools/Deprecated_tools <p>The Web Audio Editor allowed you to examine an audio context constructed in the page and provided a visualization of its graph. This gave a high-level view of its operation, and enabled you to ensure that all the nodes are connected in the way you expect. It was possible to edit the AudioParam properties for each node in the graph. Some non-AudioParam properties, like an OscillatorNode's type property, were displayed and editable as well. It was deprecated due to lack of use.</p> -<p>More details about the <a href="/en-US/docs/Tools/Web_Audio_Editor">Web Audio Editor</a></p> +<p>More details about the <a href="/ja/docs/Tools/Web_Audio_Editor">Web Audio Editor</a></p> <p><img alt="" src="https://mdn.mozillademos.org/files/16548/webAudio_tool.png" style="border: 1px solid black; display: block; margin: 0 auto; width: 800px;"></p> @@ -110,7 +110,7 @@ translation_of: Tools/Deprecated_tools <p>The Shader Editor allowed users to examine and edit the source of the WebGL vertex and fragment shaders. It was deprecated due to low usage and maintenance costs.</p> -<p>More details about the <a href="/en-US/docs/Tools/Shader_Editor">Shader Editor</a></p> +<p>More details about the <a href="/ja/docs/Tools/Shader_Editor">Shader Editor</a></p> <p><img alt="" src="https://mdn.mozillademos.org/files/16547/shaderEditor_tool.png" style="border: 1px solid black; display: block; margin: 0 auto; width: 800px;"></p> diff --git a/files/ja/tools/firefox_os_simulator_clone/index.html b/files/ja/tools/firefox_os_simulator_clone/index.html index f75ba6fd3c..8d3cbdaaf2 100644 --- a/files/ja/tools/firefox_os_simulator_clone/index.html +++ b/files/ja/tools/firefox_os_simulator_clone/index.html @@ -17,7 +17,7 @@ translation_of: Tools/Firefox_OS_Simulator_clone <p><span style="line-height: 1.5;">シミュレータをインストールするには、<a href="/ja/docs/Tools/WebIDE#Adding_a_Simulator">WebIDE の Manage Simulators ペイン</a> (Firefox 33 以降で利用可能) を使用します。複数のバージョンが用意されており、それらをすべてインストールすることをお勧めします。</span></p> -<p>Simulator を起動するには、WebIDE のランタイムリストから選択します。詳細については、<a href="https://developer.mozilla.org/docs/Tools/WebIDE#Selecting_a_runtime">WebIDE のマニュアル</a>を参照してください。Simulator が実行されると、実際のデバイスと同様に WebIDE を使用して Simulator をデバッグすることで、デバッグができます。</p> +<p>Simulator を起動するには、WebIDE のランタイムリストから選択します。詳細については、<a href="/ja/docs/Tools/WebIDE#Selecting_a_runtime">WebIDE のマニュアル</a>を参照してください。Simulator が実行されると、実際のデバイスと同様に WebIDE を使用して Simulator をデバッグすることで、デバッグができます。</p> <p>アプリケーションマネージャ (WebIDE より前の古いツール) を使用している場合は、次のボタンを使用してシミュレータをインストールできます。</p> @@ -62,14 +62,14 @@ translation_of: Tools/Firefox_OS_Simulator_clone <p>サポートしているハードウェアがデスクトップ上で利用できないため、デバイス上で動作する特定の API はシミュレータ上では機能しません。ジオロケーションなどの一部の API のシミュレーションを実装し、今後のリリースでさらに追加する予定です。ただし、現時点では、次の API はサポートされていません。それらを使用すると、エラーがスローされたり、正しくない結果が返される可能性があります</p> <ul> - <li><a href="/en-US/WebAPI/WebTelephony" title="/en-US/WebAPI/WebTelephony">Telephony</a></li> - <li><a href="/en-US/docs/WebAPI/WebSMS" title="/en-US/docs/WebAPI/WebSMS">WebSMS</a></li> - <li><a href="/en-US/docs/WebAPI/WebBluetooth" title="/en-US/docs/WebAPI/WebBluetooth">WebBluetooth</a></li> - <li><a href="/en-US/docs/WebAPI/Using_Light_Events" title="/en-US/docs/WebAPI/Using_Light_Events">Ambient Light</a></li> - <li><a href="/en-US/docs/WebAPI/Proximity" title="/en-US/docs/WebAPI/Proximity">Proximity</a></li> - <li><a href="/en-US/docs/WebAPI/Network_Information" title="/en-US/docs/WebAPI/Network_Information">Network Information</a></li> - <li><a href="/en-US/docs/Online_and_offline_events" title="/en-US/docs/Online_and_offline_events">navigator.onLine and offline events</a></li> - <li><a href="/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration</a></li> + <li><a href="/ja/WebAPI/WebTelephony" title="/en-US/WebAPI/WebTelephony">Telephony</a></li> + <li><a href="/ja/docs/WebAPI/WebSMS" title="/en-US/docs/WebAPI/WebSMS">WebSMS</a></li> + <li><a href="/ja/docs/WebAPI/WebBluetooth" title="/en-US/docs/WebAPI/WebBluetooth">WebBluetooth</a></li> + <li><a href="/ja/docs/WebAPI/Using_Light_Events" title="/en-US/docs/WebAPI/Using_Light_Events">Ambient Light</a></li> + <li><a href="/ja/docs/WebAPI/Proximity" title="/en-US/docs/WebAPI/Proximity">Proximity</a></li> + <li><a href="/ja/docs/WebAPI/Network_Information" title="/en-US/docs/WebAPI/Network_Information">Network Information</a></li> + <li><a href="/ja/docs/Online_and_offline_events" title="/en-US/docs/Online_and_offline_events">navigator.onLine and offline events</a></li> + <li><a href="/ja/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration</a></li> </ul> <h2 id="ヘルプの利用"><a name="Simulator-help"></a>ヘルプの利用</h2> diff --git a/files/ja/tools/index.html b/files/ja/tools/index.html index ba248e01fc..959c7a2196 100644 --- a/files/ja/tools/index.html +++ b/files/ja/tools/index.html @@ -18,10 +18,10 @@ translation_of: Tools <div class="column-container"> <p>Firefox で利用できるウェブ開発ツールを使う上での情報を探すのに、あなたはうってつけの場所に来ています — このページは主要ツールと追加ツールすべての詳細な情報、Android 用 Firefox への接続やデバッグのやり方といったより詳しい情報、開発ツールの拡張のやり方、ブラウザー全体のデバッグのやり方へのリンクを提供します。</p> -サイドバーにあるリンクを探索して、ページまで読み進めてください。開発ツールに関してのフィードバックや質問があれば、我々のメーリングリストか IRC チャンネル (<a href="https://developer.mozilla.org/ja/docs/Tools#Join_the_Developer_tools_community">ページ最下部のコミュニティリンク</a>をご覧ください) にメッセージを送ってください。もし文書に関しての明確なフィードバックや質問があれば、<a href="https://discourse.mozilla.org/c/mdn">MDN discourse</a> が投書するのに良いサイトです。<br> +サイドバーにあるリンクを探索して、ページまで読み進めてください。開発ツールに関してのフィードバックや質問があれば、我々のメーリングリストか IRC チャンネル (<a href="/ja/docs/Tools#Join_the_Developer_tools_community">ページ最下部のコミュニティリンク</a>をご覧ください) にメッセージを送ってください。もし文書に関しての明確なフィードバックや質問があれば、<a href="https://discourse.mozilla.org/c/mdn">MDN discourse</a> が投書するのに良いサイトです。<br> <div class="note"> -<p><strong>注記</strong>: もしウェブ開発や開発ツールの使用について初心者ならば、<a href="https://developer.mozilla.org/ja/docs/Learn">ウェブ開発を学ぶ</a> が役に立つでしょう — 良いスタートラインとして <a href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web">ウェブ入門</a> と <a href="https://developer.mozilla.org/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザー開発者ツールとは？</a> をご覧ください。</p> +<p><strong>注記</strong>: もしウェブ開発や開発ツールの使用について初心者ならば、<a href="/ja/docs/Learn">ウェブ開発を学ぶ</a> が役に立つでしょう — 良いスタートラインとして <a href="/ja/docs/Learn/Getting_started_with_the_web">ウェブ入門</a> と <a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザー開発者ツールとは？</a> をご覧ください。</p> </div> </div> @@ -107,7 +107,7 @@ translation_of: Tools </div> <div class="note"> -<p><strong>注</strong>: 開発ツールの入っている UI の総称は<a href="https://developer.mozilla.org/ja/docs/Tools/Tools_Toolbox">ツールボックス</a>です。</p> +<p><strong>注</strong>: 開発ツールの入っている UI の総称は<a href="/ja/docs/Tools/Tools_Toolbox">ツールボックス</a>です。</p> </div> <div class="column-container"> @@ -142,7 +142,7 @@ translation_of: Tools <dd>ページの DOM 属性や関数などを調査します。</dd> <dt><a href="/ja/docs/Tools/GCLI">開発ツールバー</a></dt> <dd>開発ツール用のコマンドラインインターフェイスです。</dd> - <dt><a href="https://developer.mozilla.org/ja/docs/Tools/Accessibility_inspector">アクセシビリティインスペクター</a></dt> + <dt><a href="/ja/docs/Tools/Accessibility_inspector">アクセシビリティインスペクター</a></dt> <dd>ページのアクセシビリティツリーへのアクセス手段を提供し、何が足りないのかや注意が必要なのかを確認できるようにします。</dd> <dt><a href="/ja/docs/Tools/Eyedropper">スポイト</a></dt> <dd>ページ内の色を選択します。</dd> @@ -156,9 +156,9 @@ translation_of: Tools <dd>オーディオコンテキストでオーディオノードのグラフの調査や、それらのパラメーターの変更を行います。</dd> <dt><a href="/ja/docs/Tools/Taking_screenshots">スクリーンショットを撮影</a></dt> <dd>ページ全体またはひとつの要素のスクリーンショットを撮影します。</dd> - <dt><a href="https://developer.mozilla.org/ja/docs/Tools/Measure_a_portion_of_the_page">ページの一部分を計測する</a></dt> + <dt><a href="/ja/docs/Tools/Measure_a_portion_of_the_page">ページの一部分を計測する</a></dt> <dd>ウェブページの特定のエリアを計測します。</dd> - <dt><a href="https://developer.mozilla.org/ja/docs/Tools/Rulers">定規</a></dt> + <dt><a href="/ja/docs/Tools/Rulers">定規</a></dt> <dd>ウェブページ上に水平、垂直な定規を重ねます。</dd> </dl> </div> diff --git a/files/ja/tools/network_monitor/request_list/index.html b/files/ja/tools/network_monitor/request_list/index.html index ffc68317a5..085fb1e22b 100644 --- a/files/ja/tools/network_monitor/request_list/index.html +++ b/files/ja/tools/network_monitor/request_list/index.html @@ -280,7 +280,7 @@ translation_of: Tools/Network_Monitor/request_list <li>Save Image As (only for images)</li> <li>Edit and Resend</li> <li>Open in New Tab</li> - <li>Start <a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">Performance Analysis</a> for the page</li> + <li>Start <a href="/ja/docs/Tools/Network_Monitor#Performance_analysis">Performance Analysis</a> for the page</li> </ul> <h4 id="Edit_and_Resend">Edit and Resend</h4> diff --git a/files/ja/tools/page_inspector/3-pane_mode/index.html b/files/ja/tools/page_inspector/3-pane_mode/index.html index a7a9fd3966..a3f602c616 100644 --- a/files/ja/tools/page_inspector/3-pane_mode/index.html +++ b/files/ja/tools/page_inspector/3-pane_mode/index.html @@ -15,12 +15,12 @@ translation_of: Tools/Page_Inspector/3-pane_mode <h2 id="機能の概要">機能の概要</h2> -<p>Firefox 62以降では、<a href="/en-US/docs/Tools/Page_Inspector">ページインスペクター</a> に新しいモード (<strong>3ペインモード</strong>) が用意されています。これを有効にすると、同時に以下を見ることができます：</p> +<p>Firefox 62以降では、<a href="/ja/docs/Tools/Page_Inspector">ページインスペクター</a> に新しいモード (<strong>3ペインモード</strong>) が用意されています。これを有効にすると、同時に以下を見ることができます：</p> <ul> - <li>The <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">HTML pane</a> on the left hand side, as usual.</li> - <li>The <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">CSS Rules</a> in the middle in their own separate pane, rather than as a tab.</li> - <li>The other CSS related features — such as <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Computed styles view</a>, <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Animations view</a>, and <a href="/en-US/docs/Tools/Page_Inspector/How_to/View_fonts">Fonts view</a> — in tabs on the right hand side, as usual.</li> + <li>The <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">HTML pane</a> on the left hand side, as usual.</li> + <li>The <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">CSS Rules</a> in the middle in their own separate pane, rather than as a tab.</li> + <li>The other CSS related features — such as <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Computed styles view</a>, <a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations">Animations view</a>, and <a href="/ja/docs/Tools/Page_Inspector/How_to/View_fonts">Fonts view</a> — in tabs on the right hand side, as usual.</li> </ul> <p><img alt="The firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right" src="https://mdn.mozillademos.org/files/15935/3-pane-view-final.png" style="border-style: solid; border-width: 1px; display: block; height: 259px; margin: 0px auto; width: 1195px;"></p> diff --git a/files/ja/tools/performance/call_tree/index.html b/files/ja/tools/performance/call_tree/index.html index d0472584d4..814a035ee3 100644 --- a/files/ja/tools/performance/call_tree/index.html +++ b/files/ja/tools/performance/call_tree/index.html @@ -46,7 +46,7 @@ translation_of: Tools/Performance/Call_Tree <p>現在のバージョンのコールツリーでは、これらが最も重要な列です。<em>Self Cost </em>が比較的高い関数は、実行に時間がかかり、頻繁に呼び出されるため、最適化の候補となります。</p> <div class="note"> -<p><a href="https://developer.mozilla.org/ja/docs/Tools/Performance/Call_Tree$edit#Using_an_inverted_aka_Bottom-Up_Call_Tree">The inverted call tree</a> は、これらの <em>Self Cost </em>値に集中する良い方法です。</p> +<p><a href="/ja/docs/Tools/Performance/Call_Tree$edit#Using_an_inverted_aka_Bottom-Up_Call_Tree">The inverted call tree</a> は、これらの <em>Self Cost </em>値に集中する良い方法です。</p> </div> <p>このスクリーンショットは、私たちがすでに知っていると思われるものを示しています。バブルソートは非常に非効率的なアルゴリズムです。 バブルソートは選択ソートの約6倍、クイックソートの13倍です。</p> diff --git a/files/ja/tools/remote_debugging/firefox_for_android/index.html b/files/ja/tools/remote_debugging/firefox_for_android/index.html index b6b7b74621..ca81cfd27a 100644 --- a/files/ja/tools/remote_debugging/firefox_for_android/index.html +++ b/files/ja/tools/remote_debugging/firefox_for_android/index.html @@ -3,7 +3,7 @@ title: Android 版 Firefox のリモートデバッグ slug: Tools/Remote_Debugging/Firefox_for_Android translation_of: Tools/Remote_Debugging/Firefox_for_Android --- -<div>{{ToolsSidebar}}</div><p>このガイドでは、<a href="/ja/docs/Mozilla/Firefox_for_Android">Android 版 Firefox</a> で実行しているコードを USB 経由で調査あるいはデバッグするために、<a href="/docs/Tools/Remote_Debugging">リモートデバッグ</a>を使用する方法を説明します。</p> +<div>{{ToolsSidebar}}</div><p>このガイドでは、<a href="/ja/docs/Mozilla/Firefox_for_Android">Android 版 Firefox</a> で実行しているコードを USB 経由で調査あるいはデバッグするために、<a href="/ja/docs/Tools/Remote_Debugging">リモートデバッグ</a>を使用する方法を説明します。</p> <div class="note"> <p>最近、Android 版 Firefox に開発ツールを接続する方法を大幅にシンプル化しました。デスクトップ版 の Firefox 36 以降および Android 版の Firefox 35 以降を使用している場合は、本記事の代わりに<a href="/ja/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">新しい方法をご確認ください</a>。</p> diff --git a/files/ja/tools/remote_debugging/index.html b/files/ja/tools/remote_debugging/index.html index d922cf39b0..a74a176b92 100644 --- a/files/ja/tools/remote_debugging/index.html +++ b/files/ja/tools/remote_debugging/index.html @@ -16,6 +16,6 @@ translation_of: Tools/Remote_Debugging <ul> <li><a href="/ja/docs/Tools/Remote_Debugging/Debugging_Firefox_Desktop">デスクトップ版 Firefox</a></li> - <li>Android 版 Firefox を<a href="/docs/Tools/about:debugging">USB 経由</a>で</li> + <li>Android 版 Firefox を<a href="/ja/docs/Tools/about:debugging">USB 経由</a>で</li> <li><a href="/ja/docs/Tools/Remote_Debugging/Thunderbird">Thunderbird</a></li> </ul> diff --git a/files/ja/tools/tips/index.html b/files/ja/tools/tips/index.html index 6abb84f7fc..925f1e61cd 100644 --- a/files/ja/tools/tips/index.html +++ b/files/ja/tools/tips/index.html @@ -82,7 +82,7 @@ translation_of: Tools/Tips <br> <code>Screen Shot date at time.png</code><br> <br> - --fullpage パラメーターはオプションです。それを含めると、スクリーンショットはブラウザウィンドウに表示されるセクションだけでなくページ全体になります。ファイル名にも -fullpage が付加されます。<a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Helpers">Web コンソールヘルパー</a>の全てのパラメータを参照してください。</li> + --fullpage パラメーターはオプションです。それを含めると、スクリーンショットはブラウザウィンドウに表示されるセクションだけでなくページ全体になります。ファイル名にも -fullpage が付加されます。<a href="/ja/docs/Tools/Web_Console/Helpers">Web コンソールヘルパー</a>の全てのパラメータを参照してください。</li> </ul> <p>コンソールの出力:</p> diff --git a/files/ja/tools/web_audio_editor/index.html b/files/ja/tools/web_audio_editor/index.html index 0a56bfa7f6..48cf967cf9 100644 --- a/files/ja/tools/web_audio_editor/index.html +++ b/files/ja/tools/web_audio_editor/index.html @@ -10,7 +10,7 @@ translation_of: Tools/Web_Audio_Editor <div> </div> <div class="blockIndicator note"> -<p>注意：このツールは廃止予定であり、まもなくFirefoxから削除される予定です。 詳しくは、<a href="https://developer.mozilla.org/en-US/docs/Tools/Deprecated_tools">非推奨ツール</a>を参照してください。</p> +<p>注意：このツールは廃止予定であり、まもなくFirefoxから削除される予定です。 詳しくは、<a href="/ja/docs/Tools/Deprecated_tools">非推奨ツール</a>を参照してください。</p> </div> <p><a href="/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API</a> を使うとき、開発者は {{domxref ("AudioContext")}} を生成します。そのコンテキストでは、以下のようないくつもの {{domxref ("AudioNode")}} を構築します:</p> diff --git a/files/ja/tools/web_console/helpers/index.html b/files/ja/tools/web_console/helpers/index.html index a460b6915c..264fd2b032 100644 --- a/files/ja/tools/web_console/helpers/index.html +++ b/files/ja/tools/web_console/helpers/index.html @@ -27,7 +27,7 @@ translation_of: Tools/Web_Console/Helpers <dt id="$_"><code>$_</code></dt> <dd>コンソールのコマンドラインで最後に実行した式の結果を保持します。例えば "2+2 <enter>" と入力した後に "$_ <enter>" と入力すると、コンソールは 4 と出力します。</dd> <dt id="$x"><code>$x(xpath, element, resultType)</code></dt> - <dd><code>element</code> のコンテキストで <a href="/ja/docs/XPath">XPath</a> <code>xpath</code> 式を評価し、一致するノードの配列を返します。 未指定の場合、<code>element</code> のデフォルトは <code>document</code> です。<code>resultType</code>には戻り値の型を指定します。取りうる値は <a href="https://developer.mozilla.org/ja/docs/Web/API/XPathResult#Constants">XPathResult定数</a>か <code>"number"</code>、 <code>"string"</code>、 <code>"bool"</code>、 <code>"node"</code>、 <code>"nodes"</code> のいずれかです。指定されなかった場合、 <code>ANY_TYPE</code> になります。</dd> + <dd><code>element</code> のコンテキストで <a href="/ja/docs/XPath">XPath</a> <code>xpath</code> 式を評価し、一致するノードの配列を返します。 未指定の場合、<code>element</code> のデフォルトは <code>document</code> です。<code>resultType</code>には戻り値の型を指定します。取りうる値は <a href="/ja/docs/Web/API/XPathResult#Constants">XPathResult定数</a>か <code>"number"</code>、 <code>"string"</code>、 <code>"bool"</code>、 <code>"node"</code>、 <code>"nodes"</code> のいずれかです。指定されなかった場合、 <code>ANY_TYPE</code> になります。</dd> <dt id="keys"><code>keys()</code></dt> <dd>オブジェクトを与えると、そのオブジェクトのキー (またはプロパティ名) の一覧を返します。これは <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/keys"><code>Object.keys</code></a> のショートカットです。</dd> <dt id="values"><code>values()</code></dt> diff --git a/files/ja/tools/web_console/remoting/index.html b/files/ja/tools/web_console/remoting/index.html index d134c5b1f4..ea9a9354ad 100644 --- a/files/ja/tools/web_console/remoting/index.html +++ b/files/ja/tools/web_console/remoting/index.html @@ -262,7 +262,7 @@ debuggerClient.attachConsole(tab.consoleActor, listeners, onAttachConsole) <h2 id="ページエラー">ページエラー</h2> -<p>ページエラーは <a href="/ja/docs/XPCOM_Interface_Reference/nsIConsoleService" title="/en-US/docs/XPCOM_Interface_Reference/nsIConsoleService"><code>nsIConsoleService</code></a> から発生します。許可される各ページエラーは <a href="https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsIScriptError" title="/en-US/docs/XPCOM_Interface_Reference/nsIScriptError"><code>nsIScriptError</code></a> オブジェクトです。</p> +<p>ページエラーは <a href="/ja/docs/XPCOM_Interface_Reference/nsIConsoleService" title="/en-US/docs/XPCOM_Interface_Reference/nsIConsoleService"><code>nsIConsoleService</code></a> から発生します。許可される各ページエラーは <a href="/ja/docs/XPCOM_Interface_Reference/nsIScriptError" title="/en-US/docs/XPCOM_Interface_Reference/nsIScriptError"><code>nsIScriptError</code></a> オブジェクトです。</p> <p><code>pageError</code> パケットは次のとおりです。</p> @@ -302,7 +302,7 @@ debuggerClient.attachConsole(tab.consoleActor, listeners, onAttachConsole) <p>Firefox 23以前は、プロトコルを通じてJavaScriptオブジェクトを操作するために、別のアクタ<code>(WebConsoleObjectActor</code>)を使用しました。<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=783499">bug 783499</a>では、デバッガから<code>ObjectActor</code>を再利用するためにいくつかの変更を行いました。</p> </div> -<p>コンソール API メッセージは <a href="https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsIObserverService" title="/en-US/docs/XPCOM_Interface_Reference/nsIObserverService"><code>nsIObserverService</code></a> を経由します。コンソールオブジェクトの実装は <a href="http://mxr.mozilla.org/mozilla-central/source/dom/base/ConsoleAPI.js"><code>dom/base/ConsoleAPI.js</code></a> にあります。</p> +<p>コンソール API メッセージは <a href="/ja/docs/XPCOM_Interface_Reference/nsIObserverService" title="/en-US/docs/XPCOM_Interface_Reference/nsIObserverService"><code>nsIObserverService</code></a> を経由します。コンソールオブジェクトの実装は <a href="http://mxr.mozilla.org/mozilla-central/source/dom/base/ConsoleAPI.js"><code>dom/base/ConsoleAPI.js</code></a> にあります。</p> <p>サーバーで受信したコンソールメッセージごとに、次の <code>consoleAPICall</code> パケットをクライアントに送信します。</p> diff --git a/files/ja/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/ja/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html index 8e3ab5e104..b9a5e54406 100644 --- a/files/ja/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html +++ b/files/ja/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html @@ -91,23 +91,15 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and <p>開発者は UI ウィジェット要素の状態を示すために ARIA のステートを使用して、ステートの変化に基づく視覚的外見の変更に (スクリプトを使用して要素のクラス名を変更するのではなく) CSS の属性セレクタを使用しましょう。</p> -<p><em>注意: この例(</em><s><em><a class="external external-icon" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a></em></s><em>) はもう利用できません。状況が変わったので、W3C ARIA オーサリングプラクティスガイドの例</em> <em>(<a class="external external-icon" href="http://www.w3.org/TR/wai-aria-practices-1.1/examples/checkbox/checkbox-1/checkbox-1.html">www.w3.org/TR/wai-aria-practices-1.1/examples/checkbox/checkbox-1/checkbox-1.html</a>) を見てください。</em></p> - -<p><s>Open Ajax Alliance の Web サイトに、<a href="http://www.oaa-accessibility.org/example/25/">ARIA のステートに基づく CSS 属性セレクタの例</a>があります。この例では、動的なメニューシステムによる WYSIWYG エディタのインターフェイスを示しています。フォントフェイススなどのメニューで現在選択されている項目は、他のアイテムと視覚的に区別されます。例の中で関係する部分を、以下で説明します。</s></p> - -<p><s>この例でメニュー用の HTML は、例 1a で示す形式になっています。7 行目と 13 行目で、メニュー項目の選択状態を表すために <strong><code>aria-checked</code></strong> プロパティを使用していることに注意してください。</s></p> - -<p><s><em>例 1a: 選択可能なメニュー用の HTML (<a href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a> をもとに改作)。</em></s></p> - <h4 id="Visibility_changes" name="Visibility_changes">可視性の変化</h4> <p>コンテンツの可視性を変えるとき (例えば要素を隠したり表示したりする)、開発者は <strong><code>aria-hidden</code></strong> プロパティの値を変更するとよいでしょう。先に説明した手法を、<code>display:none</code> を使用して要素を視覚的に隠すという CSS を示すために使用しましょう。</p> -<p>Open Ajax Alliance の Web サイトに、<a href="http://www.oaa-accessibility.org/example/39/">可視性の制御に <strong><code>aria-hidden</code></strong> を使用するツールチップの例</a>があります。この例では、入力フィールドに関する指示を収めたツールチップを持つシンプルな Web フォームの例を示しています。例の中で関係する部分を、以下で説明します。</p> +<p>これは、可視性の制御に <strong><code>aria-hidden</code></strong> を使用するツールチップの例です。この例では、入力フィールドに関する指示を収めたツールチップを持つシンプルな Web フォームの例を示しています。例の中で関係する部分を、以下で説明します。</p> <p>この例でツールチップ用の HTML は、例 2a で示す形式になっています。9 行目で <strong><code>aria-hidden</code></strong> を <code>true</code> に設定しています。</p> -<p><em>例 2a: ツールチップ用の HTML (<a href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a> をもとに改作)。</em></p> +<p><em>例 2a: ツールチップ用の HTML</em></p> <pre class="brush: html"><div class="text"> <label id="tp1-label" for="first">First Name:</label> @@ -123,7 +115,7 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and <p>このマークアップ用の CSS を例 2b で示します。ここでは独自のクラス名を使用せず、1 行目で <strong><code>aria-hidden</code></strong> 属性の状態のみを使用していることに注意してください。</p> -<p><em>例 2b: 状態を示すための、属性セレクタ (<a href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a> より)。</em></p> +<p><em>例 2b: 状態を示すための、属性セレクタ</em></p> <pre class="brush: css">div.tooltip[aria-hidden="true"] { display: none; @@ -132,7 +124,7 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and <p><strong>><code>aria-hidden</code></strong> プロパティを更新するための JavaScript は、例 2c で示す形式になっています。このスクリプトは <strong>><code>aria-hidden</code></strong> 属性しか更新しないことに注意してください (2 行目)。独自のクラス名の追加や削除は不要です。</p> -<p><em>例 2c: aria-hidden 属性を更新する JavaScript (<a href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a> に基づく)。</em></p> +<p><em>例 2c: aria-hidden 属性を更新する JavaScript</em></p> <pre class="brush: js">var showTip = function(el) { el.setAttribute('aria-hidden', 'false'); diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html index 82207358d0..192b9a498b 100644 --- a/files/ja/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html @@ -104,13 +104,6 @@ document.getElementById("formInstruction").setAttribute("role", "alert");</pre> <pre class="brush: js">// removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert: document.getElementById("expirationWarning").className = ""; </pre> -<h4 id="実施例">実施例:</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/example/1/">Alert role example using an ARIA alert box</a></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/alertdialog1/">Alert example using a modal ARIA dialog box</a></li> -</ul> - <h3 id="注記">注記 </h3> <ul> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html index 95da78a286..1114fabe9a 100644 --- a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html @@ -7,27 +7,25 @@ tags: - Attribute translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute --- -<h3 id="Description" name="Description">説明</h3> +<h3 id="Description">説明</h3> -<p><span class="seoSummary"><code><a href="https://www.w3.org/TR/wai-aria/#aria-describedby">aria-describedby</a></code> 属性は、オブジェクトを説明する要素の ID を示すために使用されます。 これは、ウィジェットまたはグループとそれらを記述するテキストの間の関係を確立するために使用されます。 これは、<code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> と非常によく似ています。 ラベルはオブジェクトの本質を表し、説明はユーザーが必要とする可能性のある詳細を提供します。</span></p> +<p><span class="seoSummary"><a href="https://www.w3.org/TR/wai-aria/#aria-describedby" rel="external"><code>aria-describedby</code></a> 属性は、オブジェクトを説明する要素の ID を示すために使用されます。これは、ウィジェットまたはグループとそれらを記述するテキストの間の関係を確立するために使用されます。これは、<code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> と非常によく似ています。 ラベルはオブジェクトの本質を表し、説明はユーザーが必要とする可能性のある詳細を提供します。</span></p> <p><code>aria-describedby</code> 属性はフォーム要素にのみ使用されるものではありません。 静的テキストをウィジェット、要素のグループ、ペイン、見出しを持つ領域、定義等々に関連付けるためにも使用されます。 以下の{{ anch("Examples","例") }}のセクションでは、これらの場合に属性を使用する方法の詳細について説明します。</p> <p>この属性は、一般的な HTML フォーム要素で使用できます。 ARIA の <code>role</code> が割り当てられている要素に限定されるものではありません。</p> -<h3 id="Value" name="Value">値</h3> +<h3 id="Value">値</h3> <p>スペースで区切られた要素の ID のリスト</p> -<h3 id='Possible_effects_on_user_agents_and_assistive_technology""' name='Possible_effects_on_user_agents_and_assistive_technology""'>ユーザーエージェントと支援技術への影響</h3> +<h3 id="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h3> -<p> </p> +<div class="note"><strong>注:</strong> 支援技術がこの手法をどのように扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の 1 つで、したがって規範的ではありません。</div> -<div class="note"><strong>注:</strong> 支援技術がこの手法をどのように扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の1つで、したがって規範的ではありません。</div> +<h3 id="Examples">例</h3> -<h3 id="Examples" name="Examples">例</h3> - -<h4 id="Example_1_Application_Landmark_Descriptions" name="Example_1_Application_Landmark_Descriptions">例 1: アプリケーションのランドマークの説明</h4> +<h4 id="Example_1_Application_Landmark_Descriptions">例 1: アプリケーションのランドマークの説明</h4> <p>以下の例では、導入の段落でカレンダーアプリケーションについて説明します。 <code>aria-describedby</code> は、段落をアプリケーションのコンテナに関連付けるために使用されます。</p> @@ -42,7 +40,7 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedb </div> </pre> -<h4 id="Example_2_A_Close_Button" name="Example_2_A_Close_Button">例 2: 閉じるボタン</h4> +<h4 id="Example_2_A_Close_Button">例 2: 閉じるボタン</h4> <p>以下の例では、ダイアログの [閉じる] ボタンとして機能するリンクが、ドキュメントの別の場所で説明されています。 <code>aria-describedby</code> 属性は、説明をリンクに関連付けるために使用されます。</p> @@ -55,34 +53,27 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedb メインページに戻ります</div> </pre> -<h3 id="Working_Examples" name="Working_Examples">動作する例</h3> - -<ul> - <li><code>aria-describedby</code> を使用した<a href="http://www.oaa-accessibility.org/examplep/checkbox1/">チェックボックスの例</a></li> - <li><code>aria-describedby</code> を使用した<a href="http://www.oaa-accessibility.org/examplep/tooltip1/">ツールチップの例</a></li> -</ul> - -<h3 id="Notes" name="Notes">注</h3> +<h3 id="Notes">注</h3> <ul> <li><code>aria-describedby</code> 属性は、外部リソースの記述を参照するようには設計されていません。 ID であるため、同じ DOM ドキュメント内の要素を参照する必要があります。</li> </ul> -<h3 id="Used_by_ARIA_roles" name="Used_by_ARIA_roles">ARIA ロールによって使用される</h3> +<h3 id="Used_by_ARIA_roles">ARIA ロールによって使用される</h3> <p>ベースマークアップのすべての要素</p> -<h3 id="Related_ARIA_techniques" name="Related_ARIA_techniques">関連する ARIA 技術</h3> +<h3 id="Related_ARIA_techniques">関連する ARIA 技術</h3> <ul> <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby 属性の使用</a></li> </ul> -<h3 id="Compatibility" name="Compatibility">互換性</h3> +<h3 id="Compatibility">互換性</h3> <p class="comment">TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する</p> -<h3 id="Additional_resources" name="Additional_resources">その他のリソース</h3> +<h3 id="Additional_resources">その他のリソース</h3> <ul> <li><a href="https://www.w3.org/TR/wai-aria/#aria-describedby">aria-describedby の WAI-ARIA 仕様</a>（英語）</li> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html index 03c6496c1f..3730efb1f7 100644 --- a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html @@ -52,12 +52,6 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientatio </a> </pre> -<h4 id="Working_Examples" name="Working_Examples">動作する例</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/">スライダーの例</a></li> -</ul> - <h3 id="Notes" name="Notes">注</h3> <h3 id="Used_With_ARIA_Roles" name="Used_With_ARIA_Roles">ARIA ロールで使用</h3> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html index 1f69f16e2f..55b961e20d 100644 --- a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html @@ -42,10 +42,6 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_a </form> </pre> -<h4 id="Working_Examples" name="Working_Examples">動作する例</h4> - -<p><a class="external" href="http://www.oaa-accessibility.org/examplep/tooltip1/">ツールチップの例</a>（<code>aria-required</code> 属性の使用を含む）</p> - <h3 id="Notes" name="Notes">注</h3> <h3 id="Used_in_ARIA_roles" name="Used_in_ARIA_roles">ARIA ロールで使用</h3> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html index 131a8b50cd..18cff00666 100644 --- a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html @@ -33,14 +33,6 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_a <pre class="deki-transform"><span class="tag"><div role=<span class="str">"slider"</span> aria-valuenow=<span class="str">"4"</span> aria-valuemin=<span class="str">"1"</span> aria-valuemax=<span class="str">"10"</span>></span> </pre> -<h4 id="Working_Examples" name="Working_Examples">動作する例</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/progressbar1/">プログレスバーの例</a></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/">スライダーの例</a></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/spinbutton1/">スピンボタンの例</a></li> -</ul> - <h3 id="Notes" name="Notes">注 </h3> <h3 id="Used_With_ARIA_Roles" name="Used_With_ARIA_Roles">ARIA ロールで使用</h3> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html index 96a4857b74..b73802eb9c 100644 --- a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html @@ -29,14 +29,6 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_a <pre class="brush: html"><span class="tag"><div role=<span class="str">"slider"</span> aria-valuenow=<span class="str">"4"</span> aria-valuemin=<span class="str">"1"</span> aria-valuemax=<span class="str">"10"</span>></span> </pre> -<h4 id="Working_Examples.3A" name="Working_Examples.3A">動作する例</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/progressbar1/">プログレスバーの例</a></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/">スライダーの例</a></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/spinbutton1/">スピンボタンの例</a></li> -</ul> - <h3 id="Notes" name="Notes">注</h3> <h3 id="Used_With_ARIA_Roles" name="Used_With_ARIA_Roles">ARIA ロールで使用</h3> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html index 94ec9f7f50..e53607131c 100644 --- a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html @@ -33,14 +33,6 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_a <pre class="brush: html"><span class="tag"><div role=<span class="str">"slider"</span> aria-valuenow=<span class="str">"4"</span> aria-valuemin=<span class="str">"1"</span> aria-valuemax=<span class="str">"10"</span>></span> </pre> -<h4 id="Working_Examples.3A" name="Working_Examples.3A">動作する例</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/progressbar1/">プログレスバーの例</a></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/">スライダーの例</a></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/spinbutton1/">スピンボタンの例</a></li> -</ul> - <h3 id="Notes" name="Notes">注 </h3> <h3 id="Used_With_ARIA_Roles" name="Used_With_ARIA_Roles">ARIA ロールで使用</h3> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html index dbe13c701e..1ab569de6c 100644 --- a/files/ja/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html @@ -98,12 +98,6 @@ var updateSlider = function (newValue) { }; </pre> -<h3 id="Working_Examples" name="Working_Examples">動作する例</h3> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/">スライダーの例</a></li> -</ul> - <h2 id="Notes" name="Notes">注</h2> <p> </p> diff --git a/files/ja/web/accessibility/aria/forms/basic_form_hints/index.html b/files/ja/web/accessibility/aria/forms/basic_form_hints/index.html index f1a4dc9646..65ce604cd9 100644 --- a/files/ja/web/accessibility/aria/forms/basic_form_hints/index.html +++ b/files/ja/web/accessibility/aria/forms/basic_form_hints/index.html @@ -43,8 +43,6 @@ translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints <p>以下の例では、順不同リストを使用して実装したラジオボタングループを示しています。3 行目で {{HTMLElement("li")}} 要素の <strong>aria-labelledby</strong> 属性に、1 行目の {{HTMLElement("h3")}} 要素の <strong>id</strong> である "rg1_label" を設定しており、h3 要素がラジオボタングループのラベルです。</p> -<p><em>例 2. 順不同リストを使用して実装したラジオボタングループ (<a href="http://www.oaa-accessibility.org/examplep/radio1/">http://www.oaa-accessibility.org/examplep/radio1/</a> をもとに改作)</em></p> - <pre class="brush: html"><h3 id="rg1_label">Lunch Options</h3> <ul class="radiogroup" id="rg1" role="radiogroup" aria-labelledby="rg1_label"> diff --git a/files/ja/web/accessibility/keyboard-navigable_javascript_widgets/index.html b/files/ja/web/accessibility/keyboard-navigable_javascript_widgets/index.html index 72a23044f3..d6c3556643 100644 --- a/files/ja/web/accessibility/keyboard-navigable_javascript_widgets/index.html +++ b/files/ja/web/accessibility/keyboard-navigable_javascript_widgets/index.html @@ -136,7 +136,7 @@ translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets <p>このテクニックでは、単一のイベントハンドラをコンテナウィジェットにバインドし、<code>aria-activedescendant</code> を使用して「仮想」フォーカスを追跡します。 （ARIA に関する詳細は、<a href="/ja/docs/Web/Accessibility/An_Overview_of_Accessible_Web_Applications_and_Widgets">アクセス可能なウェブアプリケーションとウィジェットの概要</a>を参照してください。）</p> -<p><code>aria-activedescendant</code> プロパティは、現在仮想フォーカスを持っている子孫要素の ID を識別します。 コンテナのイベントハンドラーは、<code>aria-activedescendant</code> の値を更新し、（例えば、境界線や背景色で）現在の項目が適切にスタイル設定されていることを確実にすることで、キーイベントおよびマウスイベントに応答する必要があります。 これがどのように機能するかの直接的な説明については、この <a href="http://www.oaa-accessibility.org/example/28/">ARIA ラジオグループの例</a>のソースコードを参照してください。</p> +<p><code>aria-activedescendant</code> プロパティは、現在仮想フォーカスを持っている子孫要素の ID を識別します。 コンテナのイベントハンドラーは、<code>aria-activedescendant</code> の値を更新し、（例えば、境界線や背景色で）現在の項目が適切にスタイル設定されていることを確実にすることで、キーイベントおよびマウスイベントに応答する必要があります。</p> <h3 id="General_Guidelines" name="General_Guidelines">一般的なガイドライン</h3> diff --git a/files/ja/web/api/analysernode/index.html b/files/ja/web/api/analysernode/index.html index 01cf83481e..bd10222089 100644 --- a/files/ja/web/api/analysernode/index.html +++ b/files/ja/web/api/analysernode/index.html @@ -171,5 +171,5 @@ function draw() { <h2 id="See_also">See also</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/animation/animation/index.html b/files/ja/web/api/animation/animation/index.html index 21128281dc..14be29c34c 100644 --- a/files/ja/web/api/animation/animation/index.html +++ b/files/ja/web/api/animation/animation/index.html @@ -55,6 +55,6 @@ translation_of: Web/API/Animation/Animation <h2 id="See_also">See also</h2> <ul> - <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li> + <li><a href="/ja/docs/Web/API/Web_Animations_API">Web Animations API</a></li> <li>{{domxref("Animation")}}</li> </ul> diff --git a/files/ja/web/api/animation/index.html b/files/ja/web/api/animation/index.html index c4125a26e6..ef95a327a7 100644 --- a/files/ja/web/api/animation/index.html +++ b/files/ja/web/api/animation/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Animation --- <div>{{ APIRef("ウェブアニメーション") }}{{SeeCompatTable}}</div> -<p><a href="https://developer.mozilla.org/ja/docs/Web/API/Web_Animations_API">ウェブアニメーション API</a><strong> </strong>における<strong> <code>Animation</code></strong> インターフェースは単一のアニメーションプレーヤーを表し、アニメーションノードやソースに対する再生制御やタイムラインを提供します。</p> +<p><a href="/ja/docs/Web/API/Web_Animations_API">ウェブアニメーション API</a><strong> </strong>における<strong> <code>Animation</code></strong> インターフェースは単一のアニメーションプレーヤーを表し、アニメーションノードやソースに対する再生制御やタイムラインを提供します。</p> <h2 id="コンストラクタ">コンストラクタ</h2> diff --git a/files/ja/web/api/atob/index.html b/files/ja/web/api/atob/index.html index 96eb707a54..7dd4eaeb6f 100644 --- a/files/ja/web/api/atob/index.html +++ b/files/ja/web/api/atob/index.html @@ -86,7 +86,7 @@ const decodedData = window.atob(encodedData); // 文字列をデコード</pre> <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data</code> URIs</a></li> + <li><a href="/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data</code> URIs</a></li> <li>{{domxref("WindowOrWorkerGlobalScope.btoa","btoa()")}}</li> <li><a href="/ja/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li> </ul> diff --git a/files/ja/web/api/audiobuffer/copytochannel/index.html b/files/ja/web/api/audiobuffer/copytochannel/index.html index b539665363..106c72b7d8 100644 --- a/files/ja/web/api/audiobuffer/copytochannel/index.html +++ b/files/ja/web/api/audiobuffer/copytochannel/index.html @@ -58,5 +58,5 @@ myArrayBuffer.copyToChannel (anotherArray,0,0); <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/audiobuffer/duration/index.html b/files/ja/web/api/audiobuffer/duration/index.html index c8dfee85ac..fb925a49e4 100644 --- a/files/ja/web/api/audiobuffer/duration/index.html +++ b/files/ja/web/api/audiobuffer/duration/index.html @@ -68,5 +68,5 @@ button.onclick = function() { <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/audiobuffer/getchanneldata/index.html b/files/ja/web/api/audiobuffer/getchanneldata/index.html index db0c636b2e..70705e5584 100644 --- a/files/ja/web/api/audiobuffer/getchanneldata/index.html +++ b/files/ja/web/api/audiobuffer/getchanneldata/index.html @@ -91,5 +91,5 @@ button.onclick = function() { <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/audiobuffer/index.html b/files/ja/web/api/audiobuffer/index.html index 51f0f99230..77d1b20762 100644 --- a/files/ja/web/api/audiobuffer/index.html +++ b/files/ja/web/api/audiobuffer/index.html @@ -99,5 +99,5 @@ button.onclick = function() { <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/audiobuffer/length/index.html b/files/ja/web/api/audiobuffer/length/index.html index 433ab9a650..3ec8ddaab5 100644 --- a/files/ja/web/api/audiobuffer/length/index.html +++ b/files/ja/web/api/audiobuffer/length/index.html @@ -67,5 +67,5 @@ button.onclick = function() { <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/audiobuffer/numberofchannels/index.html b/files/ja/web/api/audiobuffer/numberofchannels/index.html index e15341204d..3dd2cdf490 100644 --- a/files/ja/web/api/audiobuffer/numberofchannels/index.html +++ b/files/ja/web/api/audiobuffer/numberofchannels/index.html @@ -67,5 +67,5 @@ button.onclick = function() { <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/audiobuffer/samplerate/index.html b/files/ja/web/api/audiobuffer/samplerate/index.html index 78e5e20f6d..4667c44428 100644 --- a/files/ja/web/api/audiobuffer/samplerate/index.html +++ b/files/ja/web/api/audiobuffer/samplerate/index.html @@ -67,5 +67,5 @@ button.onclick = function() { <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/audiobuffersourcenode/index.html b/files/ja/web/api/audiobuffersourcenode/index.html index 13c9144da1..aed5b723f0 100644 --- a/files/ja/web/api/audiobuffersourcenode/index.html +++ b/files/ja/web/api/audiobuffersourcenode/index.html @@ -83,7 +83,7 @@ translation_of: Web/API/AudioBufferSourceNode <h2 id="例">例</h2> -<p>次の例は、2秒間のバッファを生成し、ホワイトノイズを書き込み、<a href="https://developer.mozilla.org/ja/docs/Web/API/AudioBufferSourceNode" title="The AudioBufferSourceNode インタフェーエスはメモリ上にある音声データ (AudioBuffer) を扱うオーディオソースを表します。このオブジェクトはオーディオソースとなる AudioNode です。"><code>AudioBufferSourceNode</code></a>で再生します。コメントは何をしているかを簡単に説明しています。</p> +<p>次の例は、2秒間のバッファを生成し、ホワイトノイズを書き込み、<a href="/ja/docs/Web/API/AudioBufferSourceNode" title="The AudioBufferSourceNode インタフェーエスはメモリ上にある音声データ (AudioBuffer) を扱うオーディオソースを表します。このオブジェクトはオーディオソースとなる AudioNode です。"><code>AudioBufferSourceNode</code></a>で再生します。コメントは何をしているかを簡単に説明しています。</p> <div class="note"> <p><strong>注: </strong><a class="external external-icon" href="https://mdn.github.io/webaudio-examples/audio-buffer/">コードをすぐに実行する</a>ことや、<a class="external external-icon" href="https://github.com/mdn/webaudio-examples/blob/master/audio-buffer/index.html">ソースコードを閲覧する</a>こともできます。</p> @@ -162,5 +162,5 @@ button<span class="punctuation token">.</span>onclick <span class="operator toke <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/audiobuffersourcenode/start/index.html b/files/ja/web/api/audiobuffersourcenode/start/index.html index bda21903e6..965f8fc7ae 100644 --- a/files/ja/web/api/audiobuffersourcenode/start/index.html +++ b/files/ja/web/api/audiobuffersourcenode/start/index.html @@ -68,5 +68,5 @@ source.start(when, offset, duration); <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/audiocontext/close/index.html b/files/ja/web/api/audiocontext/close/index.html index 09ffb94e32..369302f9c3 100644 --- a/files/ja/web/api/audiocontext/close/index.html +++ b/files/ja/web/api/audiocontext/close/index.html @@ -60,6 +60,6 @@ audioCtx.close().then(function() { ... }); <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/audiocontext/createmediaelementsource/index.html b/files/ja/web/api/audiocontext/createmediaelementsource/index.html index 6b459c6dfe..bbf25e1b2a 100644 --- a/files/ja/web/api/audiocontext/createmediaelementsource/index.html +++ b/files/ja/web/api/audiocontext/createmediaelementsource/index.html @@ -99,5 +99,5 @@ gainNode.connect(audioCtx.destination);</pre> <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Web Audio APIの利用</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Web Audio APIの利用</a></li> </ul> diff --git a/files/ja/web/api/audiocontext/createmediastreamsource/index.html b/files/ja/web/api/audiocontext/createmediastreamsource/index.html index 99909f1b7f..8583891782 100644 --- a/files/ja/web/api/audiocontext/createmediastreamsource/index.html +++ b/files/ja/web/api/audiocontext/createmediastreamsource/index.html @@ -142,5 +142,5 @@ pre.innerHTML = myScript.innerHTML;</pre> <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/audiocontext/resume/index.html b/files/ja/web/api/audiocontext/resume/index.html index d6e8ac7e27..e3c1a6eb65 100644 --- a/files/ja/web/api/audiocontext/resume/index.html +++ b/files/ja/web/api/audiocontext/resume/index.html @@ -69,6 +69,6 @@ translation_of: Web/API/AudioContext/resume <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/audiocontext/suspend/index.html b/files/ja/web/api/audiocontext/suspend/index.html index fd69565f65..4e72c71700 100644 --- a/files/ja/web/api/audiocontext/suspend/index.html +++ b/files/ja/web/api/audiocontext/suspend/index.html @@ -64,6 +64,6 @@ audioCtx.suspend().then(function() { ... }); <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/audiodestinationnode/index.html b/files/ja/web/api/audiodestinationnode/index.html index ebf325f638..831169ca64 100644 --- a/files/ja/web/api/audiodestinationnode/index.html +++ b/files/ja/web/api/audiodestinationnode/index.html @@ -86,5 +86,5 @@ gainNode.connect(audioCtx.destination);</pre> <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/audiodestinationnode/maxchannelcount/index.html b/files/ja/web/api/audiodestinationnode/maxchannelcount/index.html index c2eae208a6..00ca7d6234 100644 --- a/files/ja/web/api/audiodestinationnode/maxchannelcount/index.html +++ b/files/ja/web/api/audiodestinationnode/maxchannelcount/index.html @@ -58,5 +58,5 @@ gainNode.connect(audioCtx.destination);</pre> <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/audiolistener/index.html b/files/ja/web/api/audiolistener/index.html index 807698366d..875e4a88cc 100644 --- a/files/ja/web/api/audiolistener/index.html +++ b/files/ja/web/api/audiolistener/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/AudioListener --- <p>{{ APIRef("Web Audio API") }}</p> -<p><code>AudioListener</code>インターフェースは特定の人物が聞いている音場の位置と方向を表します、そしてそれは<a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">audio spatialization</a>に使用されます。すべての{{domxref("PannerNode")}}は、{{domxref("BaseAudioContext.listener")}}属性に格納されている<code>AudioListener</code>に関連して空間化されます。</p> +<p><code>AudioListener</code>インターフェースは特定の人物が聞いている音場の位置と方向を表します、そしてそれは<a href="/ja/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">audio spatialization</a>に使用されます。すべての{{domxref("PannerNode")}}は、{{domxref("BaseAudioContext.listener")}}属性に格納されている<code>AudioListener</code>に関連して空間化されます。</p> <p>コンテキストごとにリスナーは1つだけであり、{{domxref("AudioNode")}}ではないことに注意することが重要です。</p> @@ -105,5 +105,5 @@ translation_of: Web/API/AudioListener <h2 id="See_also">See also</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/audionode/index.html b/files/ja/web/api/audionode/index.html index 4e85183593..811b7e39b6 100644 --- a/files/ja/web/api/audionode/index.html +++ b/files/ja/web/api/audionode/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/AudioNode <p>AudioNodeは複数の入力、出力を持ち、それぞれがチャンネルを持ちます。入力が無く、一つの出力を持つAudioNodeは、ソースノードと呼ばれます。厳密な処理はAudioNodeによって異なりますが, 基本的に、ノードは入力を読み込み、何らかの音声関連の処理を行ってから、出力のための新しい値を出力します。</p> -<p>Different nodes can be linked together to build a <em>processing graph</em>. Such a graph is contained in an {{domxref("AudioContext")}}. Each <code>AudioNode</code> participates in exactly one such context. In general, processing nodes inherit the properties and methods of <code>AudioNode</code>, but also define their own functionality on top. See the individual node pages for more details, as listed on the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> homepage.</p> +<p>Different nodes can be linked together to build a <em>processing graph</em>. Such a graph is contained in an {{domxref("AudioContext")}}. Each <code>AudioNode</code> participates in exactly one such context. In general, processing nodes inherit the properties and methods of <code>AudioNode</code>, but also define their own functionality on top. See the individual node pages for more details, as listed on the <a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a> homepage.</p> <p>ノードは音声処理のグラフを構築するため、互いに関連付けることができます。そのようなグラフは一つの{{domxref("AudioContext")}}に含まれます。それぞれのAudioNodeは必ず一つのcontextに含まれます。一般に、ノードはAudioNodeのプロパティやメソッドを継承し、独自の機能が定義されています。個々のノードについての詳細を知りたい場合は、「Web Audio API」ホームページを御覧ください。</p> @@ -47,14 +47,14 @@ translation_of: Web/API/AudioNode <dl> <dt>{{domxref("AudioNode.channelCount")}}</dt> - <dd>Represents an integer used to determine how many channels are used when <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Up-mixing_and_down-mixing">up-mixing and down-mixing</a> connections to any inputs to the node. Its usage and precise definition depend on the value of {{domxref("AudioNode.channelCountMode")}}.</dd> + <dd>Represents an integer used to determine how many channels are used when <a href="/ja/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Up-mixing_and_down-mixing">up-mixing and down-mixing</a> connections to any inputs to the node. Its usage and precise definition depend on the value of {{domxref("AudioNode.channelCountMode")}}.</dd> </dl> <dl> <dt>{{domxref("AudioNode.channelCountMode")}}</dt> <dd>Represents an enumerated value describing the way channels must be matched between the node's inputs and outputs.</dd> <dt>{{domxref("AudioNode.channelInterpretation")}}</dt> - <dd>Represents an enumerated value describing the meaning of the channels. This interpretation will define how audio <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Up-mixing_and_down-mixing">up-mixing and down-mixing</a> will happen.<br> + <dd>Represents an enumerated value describing the meaning of the channels. This interpretation will define how audio <a href="/ja/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Up-mixing_and_down-mixing">up-mixing and down-mixing</a> will happen.<br> The possible values are <code>"speakers"</code> or <code>"discrete"</code>.</dd> </dl> @@ -73,7 +73,7 @@ translation_of: Web/API/AudioNode <h2 id="例">例</h2> -<p>This simple snippet of code shows the creation of some audio nodes, and how the AudioNode properties and methods can be used. You can find examples of such usage on any of the examples linked to on the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> landing page (for example <a href="https://github.com/mdn/violent-theremin">Violent Theremin</a>.)<span class="p"> </span></p> +<p>This simple snippet of code shows the creation of some audio nodes, and how the AudioNode properties and methods can be used. You can find examples of such usage on any of the examples linked to on the <a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a> landing page (for example <a href="https://github.com/mdn/violent-theremin">Violent Theremin</a>.)<span class="p"> </span></p> <pre class="brush: js;highlight[8,9,11,12,13,14]">var AudioContext = window.AudioContext || window.webkitAudioContext; @@ -114,5 +114,5 @@ oscillator.channelCount;</pre> <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API の利用</a></li> + <li><a href="/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API の利用</a></li> </ul> diff --git a/files/ja/web/api/audioparam/index.html b/files/ja/web/api/audioparam/index.html index 7045f06922..d82a6991db 100644 --- a/files/ja/web/api/audioparam/index.html +++ b/files/ja/web/api/audioparam/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/AudioParam </div> <ul> - <li><em>a-rate</em> <code>AudioParam</code> は、オーディオ信号の各 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Audio_buffers.3A_frames.2C_samples_and_channels">sample frame</a> の現在のオーディオパラメータ値を取ります。</li> + <li><em>a-rate</em> <code>AudioParam</code> は、オーディオ信号の各 <a href="/ja/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Audio_buffers.3A_frames.2C_samples_and_channels">sample frame</a> の現在のオーディオパラメータ値を取ります。</li> <li><em>k-rate</em> <code>AudioParam</code> は、処理されるブロック全体に対して同じ初期オーディオパラメータ値、つまり128サンプルフレームを使用します。</li> </ul> @@ -22,7 +22,7 @@ translation_of: Web/API/AudioParam <h2 id="Properties">Properties</h2> -<p>親である<a href="https://developer.mozilla.org/ja/docs/Web/API/AudioNode" title="The AudioNode interface is a generic interface for representing an audio processing module like an audio source (e.g. an HTML <audio> or <video> element), audio destination, intermediate processing module (e.g. a filter like BiquadFilterNode or ConvolverNode), or volume control (like GainNode).AudioNodeインターフェースは、オーディオソース（例：、, OscillatorNode、音声出力、中間処理モジュール（BiquadFilterNodeやConvolverNodeのようなフィルター）、GainNodeのような音量コントロール）などの音声処理モジュールを表現するための、一般的なインターフェースです。"><code>AudioNode</code></a>の属性を継承します。</p> +<p>親である<a href="/ja/docs/Web/API/AudioNode" title="The AudioNode interface is a generic interface for representing an audio processing module like an audio source (e.g. an HTML <audio> or <video> element), audio destination, intermediate processing module (e.g. a filter like BiquadFilterNode or ConvolverNode), or volume control (like GainNode).AudioNodeインターフェースは、オーディオソース（例：、, OscillatorNode、音声出力、中間処理モジュール（BiquadFilterNodeやConvolverNodeのようなフィルター）、GainNodeのような音量コントロール）などの音声処理モジュールを表現するための、一般的なインターフェースです。"><code>AudioNode</code></a>の属性を継承します。</p> <dl> <dt>{{domxref("AudioParam.defaultValue")}} {{readonlyInline}}</dt> @@ -37,7 +37,7 @@ translation_of: Web/API/AudioParam <h2 id="Methods">Methods</h2> -<p>親である<a href="https://developer.mozilla.org/ja/docs/Web/API/AudioNode" title="The AudioNode interface is a generic interface for representing an audio processing module like an audio source (e.g. an HTML <audio> or <video> element), audio destination, intermediate processing module (e.g. a filter like BiquadFilterNode or ConvolverNode), or volume control (like GainNode).AudioNodeインターフェースは、オーディオソース（例：、, OscillatorNode、音声出力、中間処理モジュール（BiquadFilterNodeやConvolverNodeのようなフィルター）、GainNodeのような音量コントロール）などの音声処理モジュールを表現するための、一般的なインターフェースです。"><code>AudioNode</code></a>のメソッドを継承します。</p> +<p>親である<a href="/ja/docs/Web/API/AudioNode" title="The AudioNode interface is a generic interface for representing an audio processing module like an audio source (e.g. an HTML <audio> or <video> element), audio destination, intermediate processing module (e.g. a filter like BiquadFilterNode or ConvolverNode), or volume control (like GainNode).AudioNodeインターフェースは、オーディオソース（例：、, OscillatorNode、音声出力、中間処理モジュール（BiquadFilterNodeやConvolverNodeのようなフィルター）、GainNodeのような音量コントロール）などの音声処理モジュールを表現するための、一般的なインターフェースです。"><code>AudioNode</code></a>のメソッドを継承します。</p> <dl> <dt>{{domxref("AudioParam.setValueAtTime()")}}</dt> @@ -105,5 +105,5 @@ biquadFilter.gain.value = 25;</pre> <h2 id="See_also">See also</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/audioprocessingevent/index.html b/files/ja/web/api/audioprocessingevent/index.html index 206230bd51..257f9547c5 100644 --- a/files/ja/web/api/audioprocessingevent/index.html +++ b/files/ja/web/api/audioprocessingevent/index.html @@ -6,10 +6,10 @@ translation_of: Web/API/AudioProcessingEvent <p>{{APIRef("Web Audio API")}}</p> <div> -<p>The <a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a> <code>AudioProcessingEvent</code> represents events that occur when a {{domxref("ScriptProcessorNode")}} input buffer is ready to be processed.</p> +<p>The <a href="/ja/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a> <code>AudioProcessingEvent</code> represents events that occur when a {{domxref("ScriptProcessorNode")}} input buffer is ready to be processed.</p> <div class="note"> -<p><strong>Note</strong>: As of the August 29 2014 Web Audio API spec publication, this feature has been marked as deprecated, and is soon to be replaced by <a href="/en-US/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a>.</p> +<p><strong>Note</strong>: As of the August 29 2014 Web Audio API spec publication, this feature has been marked as deprecated, and is soon to be replaced by <a href="/ja/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a>.</p> </div> </div> @@ -92,5 +92,5 @@ translation_of: Web/API/AudioProcessingEvent <h2 id="See_also">See also</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/audioscheduledsourcenode/index.html b/files/ja/web/api/audioscheduledsourcenode/index.html index 7531a2b283..c68fe79b06 100644 --- a/files/ja/web/api/audioscheduledsourcenode/index.html +++ b/files/ja/web/api/audioscheduledsourcenode/index.html @@ -72,6 +72,6 @@ translation_of: Web/API/AudioScheduledSourceNode <h2 id="See_also">See also</h2> <ul> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> <li>{{domxref("AudioNode")}}</li> </ul> diff --git a/files/ja/web/api/audioscheduledsourcenode/onended/index.html b/files/ja/web/api/audioscheduledsourcenode/onended/index.html index 40ce8a7222..9584cc2f12 100644 --- a/files/ja/web/api/audioscheduledsourcenode/onended/index.html +++ b/files/ja/web/api/audioscheduledsourcenode/onended/index.html @@ -54,5 +54,5 @@ source.onended = function() { <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API</a>を使う</li> + <li><a href="/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API</a>を使う</li> </ul> diff --git a/files/ja/web/api/audioscheduledsourcenode/stop/index.html b/files/ja/web/api/audioscheduledsourcenode/stop/index.html index 0b07d5002b..a1fc66843e 100644 --- a/files/ja/web/api/audioscheduledsourcenode/stop/index.html +++ b/files/ja/web/api/audioscheduledsourcenode/stop/index.html @@ -28,7 +28,7 @@ source.stop(when); <pre class="brush: js">source.stop(3);</pre> <div class="note"> -<p><strong>注: </strong>stop()の使い方の完全な例は<a href="https://developer.mozilla.org/ja/docs/Web/API/AudioContext/decodeAudioData" title="これはオーディオトラックからWeb Audio APIで音源を生成するよい方法です。"><code>AudioContext.decodeAudioData</code></a>を参照してください。<a class="external-icon external" href="http://mdn.github.io/decode-audio-data/">コードをすぐに実行する</a>ことや、<a class="external-icon external" href="https://github.com/mdn/decode-audio-data">ソースコードを閲覧する</a>こともできます。</p> +<p><strong>注: </strong>stop()の使い方の完全な例は<a href="/ja/docs/Web/API/AudioContext/decodeAudioData" title="これはオーディオトラックからWeb Audio APIで音源を生成するよい方法です。"><code>AudioContext.decodeAudioData</code></a>を参照してください。<a class="external-icon external" href="http://mdn.github.io/decode-audio-data/">コードをすぐに実行する</a>ことや、<a class="external-icon external" href="https://github.com/mdn/decode-audio-data">ソースコードを閲覧する</a>こともできます。</p> </div> <h2 id="引数">引数</h2> @@ -66,5 +66,5 @@ source.stop(when); <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/baseaudiocontext/createanalyser/index.html b/files/ja/web/api/baseaudiocontext/createanalyser/index.html index ff178c4843..31665413b9 100644 --- a/files/ja/web/api/baseaudiocontext/createanalyser/index.html +++ b/files/ja/web/api/baseaudiocontext/createanalyser/index.html @@ -100,5 +100,5 @@ function draw() { <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/baseaudiocontext/createbiquadfilter/index.html b/files/ja/web/api/baseaudiocontext/createbiquadfilter/index.html index 78a1e6da02..c9e479ce16 100644 --- a/files/ja/web/api/baseaudiocontext/createbiquadfilter/index.html +++ b/files/ja/web/api/baseaudiocontext/createbiquadfilter/index.html @@ -72,5 +72,5 @@ biquadFilter.gain.value = 25;</pre> <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/baseaudiocontext/createbuffer/index.html b/files/ja/web/api/baseaudiocontext/createbuffer/index.html index 784f1cf2dc..eb02649fb8 100644 --- a/files/ja/web/api/baseaudiocontext/createbuffer/index.html +++ b/files/ja/web/api/baseaudiocontext/createbuffer/index.html @@ -22,7 +22,7 @@ var buffer = audioCtx.createBuffer(numOfChannels, length, sampleRate);</pre> <h3 id="引数">引数</h3> <div class="note"> -<p><strong>Note</strong>: For an in-depth explanation of how audio buffers work, and what these parameters mean, read <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Audio_buffers.3A_frames.2C_samples_and_channels">Audio buffers: frames, samples and channels</a> from our Basic concepts guide.</p> +<p><strong>Note</strong>: For an in-depth explanation of how audio buffers work, and what these parameters mean, read <a href="/ja/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Audio_buffers.3A_frames.2C_samples_and_channels">Audio buffers: frames, samples and channels</a> from our Basic concepts guide.</p> </div> <dl> @@ -120,5 +120,5 @@ button.onclick = function() { <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/baseaudiocontext/createbuffersource/index.html b/files/ja/web/api/baseaudiocontext/createbuffersource/index.html index c5dfe70ded..37db2586f9 100644 --- a/files/ja/web/api/baseaudiocontext/createbuffersource/index.html +++ b/files/ja/web/api/baseaudiocontext/createbuffersource/index.html @@ -89,5 +89,5 @@ button.onclick = function() { <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/baseaudiocontext/createchannelmerger/index.html b/files/ja/web/api/baseaudiocontext/createchannelmerger/index.html index 003d0a95b3..94dab7f8e1 100644 --- a/files/ja/web/api/baseaudiocontext/createchannelmerger/index.html +++ b/files/ja/web/api/baseaudiocontext/createchannelmerger/index.html @@ -79,5 +79,5 @@ ac.decodeAudioData(someStereoBuffer, function(data) { <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/baseaudiocontext/createchannelsplitter/index.html b/files/ja/web/api/baseaudiocontext/createchannelsplitter/index.html index b9745de167..bb4ee13ff1 100644 --- a/files/ja/web/api/baseaudiocontext/createchannelsplitter/index.html +++ b/files/ja/web/api/baseaudiocontext/createchannelsplitter/index.html @@ -79,5 +79,5 @@ ac.decodeAudioData(someStereoBuffer, function(data) { <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/baseaudiocontext/createconvolver/index.html b/files/ja/web/api/baseaudiocontext/createconvolver/index.html index a52837bdda..b74bc890c9 100644 --- a/files/ja/web/api/baseaudiocontext/createconvolver/index.html +++ b/files/ja/web/api/baseaudiocontext/createconvolver/index.html @@ -77,5 +77,5 @@ convolver.buffer = concertHallBuffer;</pre> <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/baseaudiocontext/createdelay/index.html b/files/ja/web/api/baseaudiocontext/createdelay/index.html index ef7853cc37..4aa09dc80e 100644 --- a/files/ja/web/api/baseaudiocontext/createdelay/index.html +++ b/files/ja/web/api/baseaudiocontext/createdelay/index.html @@ -89,5 +89,5 @@ synthDelay.delayTime.value = delay1; <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/baseaudiocontext/createdynamicscompressor/index.html b/files/ja/web/api/baseaudiocontext/createdynamicscompressor/index.html index 8b37e2e0f5..a4c6d033fe 100644 --- a/files/ja/web/api/baseaudiocontext/createdynamicscompressor/index.html +++ b/files/ja/web/api/baseaudiocontext/createdynamicscompressor/index.html @@ -84,5 +84,5 @@ button.onclick = function() { <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/baseaudiocontext/creategain/index.html b/files/ja/web/api/baseaudiocontext/creategain/index.html index 878a58ae32..bccbd975a4 100644 --- a/files/ja/web/api/baseaudiocontext/creategain/index.html +++ b/files/ja/web/api/baseaudiocontext/creategain/index.html @@ -74,5 +74,5 @@ function voiceMute() { <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/baseaudiocontext/createoscillator/index.html b/files/ja/web/api/baseaudiocontext/createoscillator/index.html index 2ee41f0a65..10ddcbc9f3 100644 --- a/files/ja/web/api/baseaudiocontext/createoscillator/index.html +++ b/files/ja/web/api/baseaudiocontext/createoscillator/index.html @@ -57,5 +57,5 @@ oscillator.start();</pre> <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/baseaudiocontext/createpanner/index.html b/files/ja/web/api/baseaudiocontext/createpanner/index.html index 260932dac3..6ee4752b5e 100644 --- a/files/ja/web/api/baseaudiocontext/createpanner/index.html +++ b/files/ja/web/api/baseaudiocontext/createpanner/index.html @@ -140,5 +140,5 @@ function positionPanner() { <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/baseaudiocontext/createperiodicwave/index.html b/files/ja/web/api/baseaudiocontext/createperiodicwave/index.html index 5bd9fb86ba..3516dc9c2f 100644 --- a/files/ja/web/api/baseaudiocontext/createperiodicwave/index.html +++ b/files/ja/web/api/baseaudiocontext/createperiodicwave/index.html @@ -83,5 +83,5 @@ osc.stop(2);</pre> <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/baseaudiocontext/createstereopanner/index.html b/files/ja/web/api/baseaudiocontext/createstereopanner/index.html index 8945d1f6ad..cf2a3166f1 100644 --- a/files/ja/web/api/baseaudiocontext/createstereopanner/index.html +++ b/files/ja/web/api/baseaudiocontext/createstereopanner/index.html @@ -75,5 +75,5 @@ panNode.connect(audioCtx.destination);</pre> <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/baseaudiocontext/currenttime/index.html b/files/ja/web/api/baseaudiocontext/currenttime/index.html index 8bc98a78ce..7efd053c29 100644 --- a/files/ja/web/api/baseaudiocontext/currenttime/index.html +++ b/files/ja/web/api/baseaudiocontext/currenttime/index.html @@ -58,5 +58,5 @@ console.log(audioCtx.currentTime); <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/baseaudiocontext/destination/index.html b/files/ja/web/api/baseaudiocontext/destination/index.html index b4ccabd0dc..2127b33274 100644 --- a/files/ja/web/api/baseaudiocontext/destination/index.html +++ b/files/ja/web/api/baseaudiocontext/destination/index.html @@ -60,5 +60,5 @@ gainNode.connect(audioCtx.destination); <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/baseaudiocontext/listener/index.html b/files/ja/web/api/baseaudiocontext/listener/index.html index fa17cf5a19..1a6d1e5f76 100644 --- a/files/ja/web/api/baseaudiocontext/listener/index.html +++ b/files/ja/web/api/baseaudiocontext/listener/index.html @@ -58,5 +58,5 @@ var myListener = audioCtx.listener; <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/baseaudiocontext/onstatechange/index.html b/files/ja/web/api/baseaudiocontext/onstatechange/index.html index c234680352..37a15457e9 100644 --- a/files/ja/web/api/baseaudiocontext/onstatechange/index.html +++ b/files/ja/web/api/baseaudiocontext/onstatechange/index.html @@ -48,5 +48,5 @@ audioCtx.onstatechange = function() { ... };</pre> <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/baseaudiocontext/samplerate/index.html b/files/ja/web/api/baseaudiocontext/samplerate/index.html index 6cd9ebad39..fd2b9cfb1f 100644 --- a/files/ja/web/api/baseaudiocontext/samplerate/index.html +++ b/files/ja/web/api/baseaudiocontext/samplerate/index.html @@ -58,5 +58,5 @@ console.log(audioCtx.sampleRate); <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/baseaudiocontext/state/index.html b/files/ja/web/api/baseaudiocontext/state/index.html index a0307dedf6..64e9a094ab 100644 --- a/files/ja/web/api/baseaudiocontext/state/index.html +++ b/files/ja/web/api/baseaudiocontext/state/index.html @@ -63,5 +63,5 @@ original_slug: Web/API/AudioContext/state <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/blob/arraybuffer/index.html b/files/ja/web/api/blob/arraybuffer/index.html index 498d41fd5f..85f4a4ef0e 100644 --- a/files/ja/web/api/blob/arraybuffer/index.html +++ b/files/ja/web/api/blob/arraybuffer/index.html @@ -68,6 +68,6 @@ var <em>buffer</em> = await <em>blob</em>.arrayBuffer();</pre> <ul> <li>{{domxref("Body.arrayBuffer()")}}</li> - <li><a href="/en-US/docs/Web/API/Streams_API">Streams API</a></li> + <li><a href="/ja/docs/Web/API/Streams_API">Streams API</a></li> <li>{{domxref("FileReader.readAsArrayBuffer()")}}</li> </ul> diff --git a/files/ja/web/api/blob/stream/index.html b/files/ja/web/api/blob/stream/index.html index b020eedb7b..083f2f2b96 100644 --- a/files/ja/web/api/blob/stream/index.html +++ b/files/ja/web/api/blob/stream/index.html @@ -65,5 +65,5 @@ translation_of: Web/API/Blob/stream <ul> <li>{{domxref("Body.body")}}</li> - <li><a href="/en-US/docs/Web/API/Streams_API">Streams API</a></li> + <li><a href="/ja/docs/Web/API/Streams_API">Streams API</a></li> </ul> diff --git a/files/ja/web/api/blobbuilder/index.html b/files/ja/web/api/blobbuilder/index.html index b00ee19f36..74910e2a98 100644 --- a/files/ja/web/api/blobbuilder/index.html +++ b/files/ja/web/api/blobbuilder/index.html @@ -14,19 +14,19 @@ translation_of: Web/API/BlobBuilder <table class="standard-table"> <tbody> <tr> - <td><code>void <a href="/en-US/docs/Web/API/BlobBuilder#append()">append</a>(in ArrayBuffer data);</code></td> + <td><code>void <a href="/ja/docs/Web/API/BlobBuilder#append()">append</a>(in ArrayBuffer data);</code></td> </tr> <tr> - <td><code>void <a href="/en-US/docs/Web/API/BlobBuilder#append()">append</a>(in Blob data);</code></td> + <td><code>void <a href="/ja/docs/Web/API/BlobBuilder#append()">append</a>(in Blob data);</code></td> </tr> <tr> - <td><code>void <a href="/en-US/docs/Web/API/BlobBuilder#append()">append</a>(in String data, [optional] in String endings);</code></td> + <td><code>void <a href="/ja/docs/Web/API/BlobBuilder#append()">append</a>(in String data, [optional] in String endings);</code></td> </tr> <tr> - <td><code>Blob <a href="/en-US/docs/Web/API/BlobBuilder#getBlob()">getBlob</a>([optional] in DOMString contentType);</code></td> + <td><code>Blob <a href="/ja/docs/Web/API/BlobBuilder#getBlob()">getBlob</a>([optional] in DOMString contentType);</code></td> </tr> <tr> - <td><code>File <a href="/en-US/docs/Web/API/BlobBuilder#getFile()">getFile</a>(in DOMString name, [optional] in DOMString contentType);</code></td> + <td><code>File <a href="/ja/docs/Web/API/BlobBuilder#getFile()">getFile</a>(in DOMString name, [optional] in DOMString contentType);</code></td> </tr> </tbody> </table> @@ -35,7 +35,7 @@ translation_of: Web/API/BlobBuilder <h3 id="append">append()</h3> -<p>生成中の {{domxref("Blob")}} に対して、指定されたJavaScriptオブジェクトの内容を付け足します。もし指定した値が {{domxref("Blob")}} 、<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a></code> または <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String"><code>String</code></a> のいずれでもなければ、強制的に文字列に変換されたのち、blobに付け足されます。</p> +<p>生成中の {{domxref("Blob")}} に対して、指定されたJavaScriptオブジェクトの内容を付け足します。もし指定した値が {{domxref("Blob")}} 、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a></code> または <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String"><code>String</code></a> のいずれでもなければ、強制的に文字列に変換されたのち、blobに付け足されます。</p> <pre class="syntaxbox notranslate">void append( in ArrayBuffer data diff --git a/files/ja/web/api/cache/add/index.html b/files/ja/web/api/cache/add/index.html index 56d7ee6e25..8ed218f4a4 100644 --- a/files/ja/web/api/cache/add/index.html +++ b/files/ja/web/api/cache/add/index.html @@ -108,7 +108,7 @@ translation_of: Web/API/Cache/add <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers">サービスワーカーの使用</a></li> + <li><a href="/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers">サービスワーカーの使用</a></li> <li>{{domxref("Cache")}}</li> <li>{{domxref("WorkerGlobalScope.caches")}}</li> </ul> diff --git a/files/ja/web/api/cache/matchall/index.html b/files/ja/web/api/cache/matchall/index.html index efeb1cdc96..275c1d22ba 100644 --- a/files/ja/web/api/cache/matchall/index.html +++ b/files/ja/web/api/cache/matchall/index.html @@ -83,7 +83,7 @@ translation_of: Web/API/Cache/matchAll <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service worker の使用</a></li> + <li><a href="/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service worker の使用</a></li> <li>{{domxref("Cache")}}</li> <li>{{domxref("WorkerGlobalScope.caches")}}</li> </ul> diff --git a/files/ja/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/ja/web/api/canvas_api/tutorial/advanced_animations/index.html index c30d28749b..00e6f95b4d 100644 --- a/files/ja/web/api/canvas_api/tutorial/advanced_animations/index.html +++ b/files/ja/web/api/canvas_api/tutorial/advanced_animations/index.html @@ -11,7 +11,7 @@ original_slug: Web/Guide/HTML/Canvas_tutorial/Advanced_animations <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</div> <div class="summary"> -<p>前の章では、いくつかの<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">基本的なアニメーション</a>を作成して、物の動かし方を学びました。このパートでは、 運動そのものをより詳細に見て、 アニメーションをより高度にするための物理を追加していきましょう。</p> +<p>前の章では、いくつかの<a href="/ja/docs/Web/API/Canvas_API/Tutorial/Basic_animations">基本的なアニメーション</a>を作成して、物の動かし方を学びました。このパートでは、 運動そのものをより詳細に見て、 アニメーションをより高度にするための物理を追加していきましょう。</p> </div> <h2 id="ボールを描く">ボールを描く</h2> @@ -46,7 +46,7 @@ ball.draw();</pre> <h2 id="速度の追加">速度の追加</h2> -<p>ボールが手に入りましたので、このチュートリアルの<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">前の章</a>で習ったように、基本的なアニメーションを加えていきましょう。また {{domxref("window.requestAnimationFrame()")}} がアニメーションの制御を手助けしてくれます。The ball gets moving by adding a velocity vector to the position. For each frame, we also {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} the canvas to remove old circles from prior frames.</p> +<p>ボールが手に入りましたので、このチュートリアルの<a href="/ja/docs/Web/API/Canvas_API/Tutorial/Basic_animations">前の章</a>で習ったように、基本的なアニメーションを加えていきましょう。また {{domxref("window.requestAnimationFrame()")}} がアニメーションの制御を手助けしてくれます。The ball gets moving by adding a velocity vector to the position. For each frame, we also {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} the canvas to remove old circles from prior frames.</p> <pre class="brush: js; highlight:[8,9,24,25] notranslate">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); @@ -291,7 +291,7 @@ ball.draw();</pre> <h2 id="マウスコントロールの追加">マウスコントロールの追加</h2> -<p>ボールに対するちょっとした制御をするために、たとえば <code><a href="/en-US/docs/Web/Reference/Events/mousemove">mousemove</a></code> イベントを使用してボールをマウスの動きに従わせる。といったことができます。<code><a href="/en-US/docs/Web/Events/click">click </a></code>イベントでボールを開放して、またバウンドさせる。といったことも可能です。</p> +<p>ボールに対するちょっとした制御をするために、たとえば <code><a href="/ja/docs/Web/Reference/Events/mousemove">mousemove</a></code> イベントを使用してボールをマウスの動きに従わせる。といったことができます。<code><a href="/ja/docs/Web/Events/click">click </a></code>イベントでボールを開放して、またバウンドさせる。といったことも可能です。</p> <div class="hidden"> <pre class="brush: html notranslate"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> @@ -369,13 +369,13 @@ ball.draw(); <h2 id="ブロック崩し">ブロック崩し</h2> -<p>This short chapter only explains some techniques to create more advanced animations. There are many more! How about adding a paddle, some bricks, and turn this demo into a <a href="http://en.wikipedia.org/wiki/Breakout_%28video_game%29">Breakout</a> game? Checkout our <a href="/en-US/docs/Games">Game development</a> area for more gaming related articles.</p> +<p>This short chapter only explains some techniques to create more advanced animations. There are many more! How about adding a paddle, some bricks, and turn this demo into a <a href="http://en.wikipedia.org/wiki/Breakout_%28video_game%29">Breakout</a> game? Checkout our <a href="/ja/docs/Games">Game development</a> area for more gaming related articles.</p> <h2 id="関連項目">関連項目</h2> <ul> <li>{{domxref("window.requestAnimationFrame()")}}</li> - <li><a href="/en-US/docs/Games/Techniques/Efficient_animation_for_web_games">Efficient animation for web games</a></li> + <li><a href="/ja/docs/Games/Techniques/Efficient_animation_for_web_games">Efficient animation for web games</a></li> </ul> <p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</p> diff --git a/files/ja/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html b/files/ja/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html index b712ab8f22..effa055a25 100644 --- a/files/ja/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html +++ b/files/ja/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html @@ -7,7 +7,7 @@ original_slug: Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</div> <div class="summary"> -<p>「<a href="https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes">canvas に図形を描く</a>」の章ではデフォルトの線と塗りのスタイルのみを使いました。ここではより魅力的に描くために使うことのできるcanvasのオプションについて見ていきます。具体的には、色、線のスタイル、グラデーション、パターンや影を追加する方法について学びます。</p> +<p>「<a href="/ja/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes">canvas に図形を描く</a>」の章ではデフォルトの線と塗りのスタイルのみを使いました。ここではより魅力的に描くために使うことのできるcanvasのオプションについて見ていきます。具体的には、色、線のスタイル、グラデーション、パターンや影を追加する方法について学びます。</p> </div> <h2 id="Colors" name="Colors">色</h2> @@ -424,7 +424,7 @@ draw();</pre> <p>The <code>setLineDash</code> method and the <code>lineDashOffset</code> property specify the dash pattern for lines. The <code>setLineDash</code> method accepts a list of numbers that specifies distances to alternately draw a line and a gap and the <code>lineDashOffset</code> property sets an offset where to start the pattern.</p> -<p>In this example we are creating a marching ants effect. It is an animation technique often found in <span class="new">selection</span> tools of computer graphics programs. It helps the user to distinguish the selection border from the image background by animating the border. In a later part of this tutorial, you can learn how to do this and other <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">basic animations</a>.</p> +<p>In this example we are creating a marching ants effect. It is an animation technique often found in <span class="new">selection</span> tools of computer graphics programs. It helps the user to distinguish the selection border from the image background by animating the border. In a later part of this tutorial, you can learn how to do this and other <a href="/ja/docs/Web/API/Canvas_API/Tutorial/Basic_animations">basic animations</a>.</p> <div class="hidden"> <pre class="brush: html notranslate"><canvas id="canvas" width="110" height="110"></canvas></pre> @@ -663,7 +663,7 @@ var ptrn = ctx.createPattern(img,'repeat'); <p>The <code>shadowColor</code> property is a standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.</p> <div class="note"> -<p><strong>Note:</strong> Shadows are only drawn for <code>source-over</code> <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Web/Guide/HTML/Canvas_tutorial/Compositing">compositing operations</a>.</p> +<p><strong>Note:</strong> Shadows are only drawn for <code>source-over</code> <a href="/ja/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Web/Guide/HTML/Canvas_tutorial/Compositing">compositing operations</a>.</p> </div> <h3 id="A_shadowed_text_example">A shadowed text example</h3> @@ -692,7 +692,7 @@ var ptrn = ctx.createPattern(img,'repeat'); <p>{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}</p> -<p>We will look at the <code>font</code> property and <code>fillText</code> method in the next chapter about <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">drawing text</a>.</p> +<p>We will look at the <code>font</code> property and <code>fillText</code> method in the next chapter about <a href="/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_text">drawing text</a>.</p> <h2 id="Canvas_fill_rules">Canvas fill rules</h2> diff --git a/files/ja/web/api/canvas_api/tutorial/basic_usage/index.html b/files/ja/web/api/canvas_api/tutorial/basic_usage/index.html index b258301bff..52335c8095 100644 --- a/files/ja/web/api/canvas_api/tutorial/basic_usage/index.html +++ b/files/ja/web/api/canvas_api/tutorial/basic_usage/index.html @@ -15,15 +15,15 @@ original_slug: Web/Guide/HTML/Canvas_tutorial/Basic_usage <pre class="brush: html"><canvas id="tutorial" width="150" height="150"></canvas> </pre> -<p>{{HTMLElement("canvas")}} は {{HTMLElement("img")}} と似ています。<code>src</code> 属性と <code>alt</code> 属性がない点が明確に異なりますが、{{htmlattrxref("width", "canvas")}} と {{htmlattrxref("height", "canvas")}} の属性がある点などは共通しています。 これらの属性は必ず指定しなければならないものではありません。このほかに様々な {{Glossary("DOM")}} <a href="/docs/Web/API/HTMLCanvasElement">属性</a>を利用できます。 <code>width</code> と <code>height</code> 属性が指定されなかった場合、canvas は幅 <strong>300 ピクセル</strong>、高さ <strong>150 ピクセル</strong>の要素として初期化されます。画面上の大きさは {{Glossary("CSS")}} によって変更できますが、その場合 canvas に描画される画像は CSS の指定に合わせて拡大 / 縮小されます。この際、元の画像のアスペクト比は考慮されないため、指定の仕方によっては画像が歪んで表示されます。</p> +<p>{{HTMLElement("canvas")}} は {{HTMLElement("img")}} と似ています。<code>src</code> 属性と <code>alt</code> 属性がない点が明確に異なりますが、{{htmlattrxref("width", "canvas")}} と {{htmlattrxref("height", "canvas")}} の属性がある点などは共通しています。 これらの属性は必ず指定しなければならないものではありません。このほかに様々な {{Glossary("DOM")}} <a href="/ja/docs/Web/API/HTMLCanvasElement">属性</a>を利用できます。 <code>width</code> と <code>height</code> 属性が指定されなかった場合、canvas は幅 <strong>300 ピクセル</strong>、高さ <strong>150 ピクセル</strong>の要素として初期化されます。画面上の大きさは {{Glossary("CSS")}} によって変更できますが、その場合 canvas に描画される画像は CSS の指定に合わせて拡大 / 縮小されます。この際、元の画像のアスペクト比は考慮されないため、指定の仕方によっては画像が歪んで表示されます。</p> <div class="note"> <p><strong>付記:</strong> 画像が歪んでいると感じた時は、<code><canvas> </code>の <code>width</code> と <code>height</code> 属性の値を設定して、CSS によるサイズの変更をしないようにしましょう。</p> </div> -<p><a href="/en-US/docs/Web/HTML/Global_attributes/id"><code>id</code></a> 属性は <a href="/docs/Web/HTML/Global_attributes">全ての要素が持つ属性</a> で <code><canvas></code> に固有なものではありません。これを利用することで、ユニークな ID を要素に持たせられます。ID を持たせることで、JavaScript の中から、その要素を探すのが簡単になります。</p> +<p><a href="/ja/docs/Web/HTML/Global_attributes/id"><code>id</code></a> 属性は <a href="/ja/docs/Web/HTML/Global_attributes">全ての要素が持つ属性</a> で <code><canvas></code> に固有なものではありません。これを利用することで、ユニークな ID を要素に持たせられます。ID を持たせることで、JavaScript の中から、その要素を探すのが簡単になります。</p> -<p><code><canvas></code> 要素は通常の画像と同じようにレイアウトされます。({{cssxref("margin")}} や {{cssxref("border")}}、 {{cssxref("background")}} といったルールも利用可能ですが、これらは実際に描画される画像には影響を与えません。スタイルが何も設定されていない場合、canvas は最初透明なものとして描画されます。スタイルとレイアウトに関しては<a href="/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">専用のページ</a>を設けています。詳細は、そちらをご覧ください。</p> +<p><code><canvas></code> 要素は通常の画像と同じようにレイアウトされます。({{cssxref("margin")}} や {{cssxref("border")}}、 {{cssxref("background")}} といったルールも利用可能ですが、これらは実際に描画される画像には影響を与えません。スタイルが何も設定されていない場合、canvas は最初透明なものとして描画されます。スタイルとレイアウトに関しては<a href="/ja/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">専用のページ</a>を設けています。詳細は、そちらをご覧ください。</p> <div id="section_2"> <h3 id="代替コンテンツ">代替コンテンツ</h3> @@ -43,7 +43,7 @@ original_slug: Web/Guide/HTML/Canvas_tutorial/Basic_usage </canvas> </pre> -<p>使用するブラウザを変更するよう利用者に伝えることは、利用者のために全くなりません。どのような代替テキスト / コンテンツを設定するのが適切かは <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">make the canvas more accessible</a> をご覧ください。</p> +<p>使用するブラウザを変更するよう利用者に伝えることは、利用者のために全くなりません。どのような代替テキスト / コンテンツを設定するのが適切かは <a href="/ja/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">make the canvas more accessible</a> をご覧ください。</p> <h3 id="<canvas>：閉じタグが必須です"><code></canvas>：</code>閉じタグが必須です</h3> diff --git a/files/ja/web/api/canvas_api/tutorial/compositing/example/index.html b/files/ja/web/api/canvas_api/tutorial/compositing/example/index.html index 65e56da8d4..8a152c0313 100644 --- a/files/ja/web/api/canvas_api/tutorial/compositing/example/index.html +++ b/files/ja/web/api/canvas_api/tutorial/compositing/example/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example --- <div>{{CanvasSidebar}}</div> -<p>This sample program demonstrates a number of <a href="/en-US/docs/Web/API/CanvasRenderingContext2D.globalCompositeOperation" title="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing">compositing operations</a>. The output looks like this:</p> +<p>This sample program demonstrates a number of <a href="/ja/docs/Web/API/CanvasRenderingContext2D.globalCompositeOperation" title="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing">compositing operations</a>. The output looks like this:</p> <p>{{EmbedLiveSample("Compositing_example", "100%", 7250)}}</p> diff --git a/files/ja/web/api/canvas_api/tutorial/finale/index.html b/files/ja/web/api/canvas_api/tutorial/finale/index.html index 735c71c693..9ced4ec521 100644 --- a/files/ja/web/api/canvas_api/tutorial/finale/index.html +++ b/files/ja/web/api/canvas_api/tutorial/finale/index.html @@ -11,7 +11,7 @@ original_slug: Web/Guide/HTML/Canvas_tutorial/Finale <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}</div> <div class="summary"> -<p>おめでとう! <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a>は終了です! ここでのナレッジはWebで2Dグラフィックスを作成する際に役立つでしょう。</p> +<p>おめでとう! <a href="/ja/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a>は終了です! ここでのナレッジはWebで2Dグラフィックスを作成する際に役立つでしょう。</p> </div> <h2 id="他の例とチュートリアル">他の例とチュートリアル</h2> @@ -23,7 +23,7 @@ original_slug: Web/Guide/HTML/Canvas_tutorial/Finale <dd>ブラウザ上のフロントエンドディベロッパー向けのプレイグラウンドとコードエディターです。</dd> <dt><a href="http://www.html5canvastutorials.com/">HTML5 Canvas Tutorials</a></dt> <dd>Canvas APIsの例です。</dd> - <dt><a href="/en-US/docs/Games">Game development</a></dt> + <dt><a href="/ja/docs/Games">Game development</a></dt> <dd>ゲームは最も人気な活動の一つです。標準に準拠したWebブラウザで実行できる、より良くより強力なゲームを開発するための新しい技術が定期的に登場しています。</dd> </dl> @@ -32,11 +32,11 @@ original_slug: Web/Guide/HTML/Canvas_tutorial/Finale <p>これらのAPIはcanvasとグラフィックスを更に動かす際におそらく使われます</p> <dl> - <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt> + <dt><a href="/ja/docs/Web/WebGL">WebGL</a></dt> <dd>複雑なグラフィックスや3Dを含んだレンダリングのためのアドバンスドなAPIです。</dd> - <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt> + <dt><a href="/ja/docs/Web/SVG">SVG</a></dt> <dd>スケーラブル・ベクター・グラフィックスを使用すると、スムーズなスケールを行うために描画されるサイズには関係なく、ベクター(ライン)とシェイプのセットとして画像を描画します。</dd> - <dt><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio</a></dt> + <dt><a href="/ja/docs/Web/API/Web_Audio_API">Web Audio</a></dt> <dd>WebAudioAPIは、Web上のオーディオを制御したり、ディベロッパーがオーディオのリソースを選択したり、エフェクトをオーディオに追加したり、オーディオ・ビジュアライザーを作成したり、空間的エフェクト(音響のような)を適用したり、他にも様々な処理を行うためのオーディオの多目的なシステムを提供します。</dd> </dl> @@ -45,7 +45,7 @@ original_slug: Web/Guide/HTML/Canvas_tutorial/Finale <dl> <dt><a href="http://stackoverflow.com/questions/tagged/canvas">Stackoverflow</a></dt> <dd>質問のタグは"canvas"となります。</dd> - <dt><a href="/en-US/docs/MDN">Comments about this tutorial – the MDN documentation community</a></dt> + <dt><a href="/ja/docs/MDN">Comments about this tutorial – the MDN documentation community</a></dt> <dd>このチュートリアルに対するコメントや感謝の言葉があるなら、是非我々に届けてほしいです。</dd> </dl> diff --git a/files/ja/web/api/canvas_api/tutorial/using_images/index.html b/files/ja/web/api/canvas_api/tutorial/using_images/index.html index bc2940554a..d3d7554a02 100644 --- a/files/ja/web/api/canvas_api/tutorial/using_images/index.html +++ b/files/ja/web/api/canvas_api/tutorial/using_images/index.html @@ -54,7 +54,7 @@ original_slug: Web/Guide/HTML/Canvas_tutorial/Using_images <h3 id="Using_images_from_other_domains" name="Using_images_from_other_domains">ほかのドメインにある画像を使用する</h3> -<p>{{HTMLElement("img")}} 要素の {{htmlattrxref("crossorigin", "img")}} 属性 ({{domxref("HTMLImageElement.crossOrigin")}} プロパティに反映されます) を使用して、<code>drawImage()</code> を呼び出してほかのドメインから画像を読み込む許可を求めることができます。ホスティングドメインが画像のクロスドメインアクセスを許可している場合は、canvas を汚染せずに画像を使用できます。そうでない場合は、画像を使用すると <a href="https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" rel="internal">canvas を汚染します</a>。</p> +<p>{{HTMLElement("img")}} 要素の {{htmlattrxref("crossorigin", "img")}} 属性 ({{domxref("HTMLImageElement.crossOrigin")}} プロパティに反映されます) を使用して、<code>drawImage()</code> を呼び出してほかのドメインから画像を読み込む許可を求めることができます。ホスティングドメインが画像のクロスドメインアクセスを許可している場合は、canvas を汚染せずに画像を使用できます。そうでない場合は、画像を使用すると <a href="/ja/docs/HTML/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" rel="internal">canvas を汚染します</a>。</p> <h3 id="Using_other_canvas_elements" name="Using_other_canvas_elements">ほかの canvas 要素を使用する</h3> diff --git a/files/ja/web/api/canvascapturemediastreamtrack/index.html b/files/ja/web/api/canvascapturemediastreamtrack/index.html index 26c00af3eb..1a09d91f51 100644 --- a/files/ja/web/api/canvascapturemediastreamtrack/index.html +++ b/files/ja/web/api/canvascapturemediastreamtrack/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/CanvasCaptureMediaStreamTrack <p><span class="seoSummary">The <strong><code>CanvasCaptureMediaStreamTrack</code></strong> interface represents the video track contained in a {{domxref("MediaStream")}} being generated from a {{HTMLElement("canvas")}} following a call to {{domxref("HTMLCanvasElement.captureStream()")}}.</span></p> -<p>Part of the <a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a>.</p> +<p>Part of the <a href="/ja/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a>.</p> <h2 id="Properties">Properties</h2> diff --git a/files/ja/web/api/canvasrenderingcontext2d/fillstyle/index.html b/files/ja/web/api/canvasrenderingcontext2d/fillstyle/index.html index e12cd42f3b..849b1d48d3 100644 --- a/files/ja/web/api/canvasrenderingcontext2d/fillstyle/index.html +++ b/files/ja/web/api/canvasrenderingcontext2d/fillstyle/index.html @@ -8,7 +8,7 @@ translation_of: Web/API/CanvasRenderingContext2D/fillStyle <p>Canvas 2D API の<code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillStyle</code></strong> プロパティは、図形の内側を塗りつぶすために使用する色、グラデーション、またはパターンを指定します。デフォルト値は <code>#000</code> (黒色)です。</p> <div class="note"> -<p>輪郭と塗りつぶしのスタイル例については、 <a href="https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial">canvas チュートリアル</a>の <a href="https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors" rel="nofollow">スタイルと色を適用する</a> をご覧ください。</p> +<p>輪郭と塗りつぶしのスタイル例については、 <a href="/ja/docs/Web/API/Canvas_API/Tutorial">canvas チュートリアル</a>の <a href="/ja/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors" rel="nofollow">スタイルと色を適用する</a> をご覧ください。</p> </div> <h2 id="構文">構文</h2> @@ -22,7 +22,7 @@ translation_of: Web/API/CanvasRenderingContext2D/fillStyle <dl> <dt><code>color</code></dt> - <dd><a href="/en-US/docs/Web/CSS">CSS</a> の {{cssxref("<color>")}} として解析される {{domxref("DOMString")}} 。</dd> + <dd><a href="/ja/docs/Web/CSS">CSS</a> の {{cssxref("<color>")}} として解析される {{domxref("DOMString")}} 。</dd> <dt><code>gradient</code></dt> <dd>{{domxref("CanvasGradient")}} オブジェクト (線形または放射状のグラデーション) 。</dd> <dt><code>pattern</code></dt> @@ -117,7 +117,7 @@ setFillColor(c, m, y, k, a); <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a></li> + <li><a href="/ja/docs/Web/API/Canvas_API">Canvas API</a></li> <li>このプロパティを定義しているインターフェース: {{domxref("CanvasRenderingContext2D")}}</li> <li>このプロパティで使われる値: <ul> diff --git a/files/ja/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html b/files/ja/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html index 146d2efc72..160b041be6 100644 --- a/files/ja/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html +++ b/files/ja/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/CanvasRenderingContext2D/globalCompositeOperation <p><code><strong>CanvasRenderingContext2D.globalCompositeOperation</strong></code>プロパティは、新たな図形を描くときに適用する合成処理の種類を定めます。種類は文字列で、合成やブレンドモードのいずれが用いられるのかを決めます。</p> -<p>なお、<a href="/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a>の<a href="/docs/Web/API/Canvas_API/Tutorial/Compositing">Compositing and clipping</a>の章をご参照ください。</p> +<p>なお、<a href="/ja/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a>の<a href="/ja/docs/Web/API/Canvas_API/Tutorial/Compositing">Compositing and clipping</a>の章をご参照ください。</p> <h2 id="構文">構文</h2> diff --git a/files/ja/web/api/canvasrenderingcontext2d/linecap/index.html b/files/ja/web/api/canvasrenderingcontext2d/linecap/index.html index 002363d26b..9e761f6ef3 100644 --- a/files/ja/web/api/canvasrenderingcontext2d/linecap/index.html +++ b/files/ja/web/api/canvasrenderingcontext2d/linecap/index.html @@ -127,5 +127,5 @@ for (let i = 0; i < lineCap.length; i++) { <li>The interface defining this property: {{domxref("CanvasRenderingContext2D")}}</li> <li>{{domxref("CanvasRenderingContext2D.lineWidth")}}</li> <li>{{domxref("CanvasRenderingContext2D.lineJoin")}}</li> - <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a></li> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a></li> </ul> diff --git a/files/ja/web/api/channelmergernode/index.html b/files/ja/web/api/channelmergernode/index.html index 784fde0bc0..338b8564bc 100644 --- a/files/ja/web/api/channelmergernode/index.html +++ b/files/ja/web/api/channelmergernode/index.html @@ -85,5 +85,5 @@ translation_of: Web/API/ChannelMergerNode <h2 id="See_also">See also</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/compositionevent/index.html b/files/ja/web/api/compositionevent/index.html index 4f3b40070a..9ef0441801 100644 --- a/files/ja/web/api/compositionevent/index.html +++ b/files/ja/web/api/compositionevent/index.html @@ -74,8 +74,8 @@ translation_of: Web/API/CompositionEvent <ul> <li><a href="/ja/docs/Web/API/Element/compositionstart_event">compositionstart</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/Reference/Events/compositionend">compositionend</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/API/Element/compositionupdate_event">compositionupdate</a></li> + <li><a href="/ja/docs/Web/Reference/Events/compositionend">compositionend</a></li> + <li><a href="/ja/docs/Web/API/Element/compositionupdate_event">compositionupdate</a></li> <li><a href="/ja/docs/DOM/Event/UIEvent" title="UIEvent">UIEvent</a></li> <li><a href="/ja/docs/DOM/event" title="Event">Event</a></li> </ul> diff --git a/files/ja/web/api/console/assert/index.html b/files/ja/web/api/console/assert/index.html index eb8b92bbf7..df96e31b21 100644 --- a/files/ja/web/api/console/assert/index.html +++ b/files/ja/web/api/console/assert/index.html @@ -45,7 +45,7 @@ console.assert(<em>assertion</em>, <em>msg</em> [, <em>subst1</em>, ..., <em>sub for (let number = 2; number <= 5; number += 1) { console.log('the # is ' + number); console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg}); - // <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015">ES2015 object property shorthand</a> を使った版 + // <a href="/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015">ES2015 object property shorthand</a> を使った版 // console.assert(number % 2 === 0, {number, errorMsg}); } // 出力: diff --git a/files/ja/web/api/console/error/index.html b/files/ja/web/api/console/error/index.html index 5655e1e99a..7b6c677eb9 100644 --- a/files/ja/web/api/console/error/index.html +++ b/files/ja/web/api/console/error/index.html @@ -39,7 +39,7 @@ console.exception(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); <dd><code>msg</code> 内の置換文字列を置換するJavaScript オブジェクト。これにより、出力の書式の詳細な制御が可能となります。</dd> </dl> -<p>詳細については、{{domxref("console")}} ドキュメント内の <a href="/docs/Web/API/console#Outputting_text_to_the_console">コンソールへのテキスト出力</a> を参照してください。</p> +<p>詳細については、{{domxref("console")}} ドキュメント内の <a href="/ja/docs/Web/API/console#Outputting_text_to_the_console">コンソールへのテキスト出力</a> を参照してください。</p> <h2 id="仕様">仕様</h2> diff --git a/files/ja/web/api/convolvernode/index.html b/files/ja/web/api/convolvernode/index.html index 66321d75d7..6409ec786d 100644 --- a/files/ja/web/api/convolvernode/index.html +++ b/files/ja/web/api/convolvernode/index.html @@ -78,5 +78,5 @@ translation_of: Web/API/ConvolverNode <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/css_object_model/using_dynamic_styling_information/index.html b/files/ja/web/api/css_object_model/using_dynamic_styling_information/index.html index 7a73cb4b15..c5b2d9a3b2 100644 --- a/files/ja/web/api/css_object_model/using_dynamic_styling_information/index.html +++ b/files/ja/web/api/css_object_model/using_dynamic_styling_information/index.html @@ -89,11 +89,11 @@ function resetStyle(elemId) { <p>{{ EmbedLiveSample('Modify_an_element_style') }}</p> -<p><code>document.defaultView</code> オブジェクトの {{domxref("window.getComputedStyle", "getComputedStyle()")}} メソッドは、その要素に対して計算された全てのスタイルを返します。このメソッドの使い方について詳しくはサンプルの <a href="/en/Gecko_DOM_Reference/Examples#Example_6:_getComputedStyle" title="en/Gecko_DOM_Reference/Examples#Example_6:_getComputedStyle">Example 6: getComputedStyle</a> を参照してください。</p> +<p><code>document.defaultView</code> オブジェクトの {{domxref("window.getComputedStyle", "getComputedStyle()")}} メソッドは、その要素に対して計算された全てのスタイルを返します。このメソッドの使い方について詳しくはサンプルの <a href="/ja/Gecko_DOM_Reference/Examples#Example_6:_getComputedStyle" title="en/Gecko_DOM_Reference/Examples#Example_6:_getComputedStyle">Example 6: getComputedStyle</a> を参照してください。</p> <h2 id="DOM_Style_Object" name="DOM_Style_Object">DOM Style オブジェクト</h2> -<p><code>style</code> オブジェクトは独立したスタイル指定です。 <code><a href="/en/DOM/document.styleSheets" title="en/DOM/document.styleSheets">document.styleSheets</a></code> から個別にルールを取得するのとは異なり、 style オブジェクトは <code>document</code> またはスタイルが適用される要素から取得されます。ある特定の要素の<em>インライン</em>スタイルを表します。</p> +<p><code>style</code> オブジェクトは独立したスタイル指定です。 <code><a href="/ja/DOM/document.styleSheets" title="en/DOM/document.styleSheets">document.styleSheets</a></code> から個別にルールを取得するのとは異なり、 style オブジェクトは <code>document</code> またはスタイルが適用される要素から取得されます。ある特定の要素の<em>インライン</em>スタイルを表します。</p> <p>この記事で例示した CSS プロパティに限らず、 <code>style</code> オブジェクトを通して要素のスタイルを個別に操作できるという点が重要です。</p> @@ -128,7 +128,7 @@ function resetStyle(elemId) { <h3 id="DOM_Style_Object_SetAttribue" name="DOM_Style_Object_SetAttribue">setAttribute メソッドの利用</h3> -<p>要素のスタイルの変更には、要素の <code><a href="/en/DOM/element.setAttribute" title="en/DOM/element.setAttribute">setAttribute</a></code> メソッドを使うこともできます。</p> +<p>要素のスタイルの変更には、要素の <code><a href="/ja/DOM/element.setAttribute" title="en/DOM/element.setAttribute">setAttribute</a></code> メソッドを使うこともできます。</p> <pre class="brush: js notranslate">var el = document.getElementById('some-element'); el.setAttribute('style', 'background-color:darkblue;'); diff --git a/files/ja/web/api/cssstyledeclaration/index.html b/files/ja/web/api/cssstyledeclaration/index.html index 43e40972cb..5699356552 100644 --- a/files/ja/web/api/cssstyledeclaration/index.html +++ b/files/ja/web/api/cssstyledeclaration/index.html @@ -83,5 +83,5 @@ console.log(styleObj.cssText);</pre> <h2 id="See_also">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Properties_Reference">CSS Properties Reference</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Properties_Reference">CSS Properties Reference</a></li> </ul> diff --git a/files/ja/web/api/cssstylerule/selectortext/index.html b/files/ja/web/api/cssstylerule/selectortext/index.html index 8c72385fd9..0854b6887d 100644 --- a/files/ja/web/api/cssstylerule/selectortext/index.html +++ b/files/ja/web/api/cssstylerule/selectortext/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/CSSStyleRule/selectorText --- <div>{{APIRef("CSSOM") }}</div> -<p><code><strong>CSSRule.selectorText</strong></code>プロパティは、この規則集合のセレクターのテキスト表現を取得します。これは、一部のブラウザーで読み取り専用で実装されています。スタイルシート規則をクロスブラウザーで動的に設定するには、 <a href="/docs/DOM/Using_dynamic_styling_information">動的なスタイル情報の利用</a> を参照してください。</p> +<p><code><strong>CSSRule.selectorText</strong></code>プロパティは、この規則集合のセレクターのテキスト表現を取得します。これは、一部のブラウザーで読み取り専用で実装されています。スタイルシート規則をクロスブラウザーで動的に設定するには、 <a href="/ja/docs/DOM/Using_dynamic_styling_information">動的なスタイル情報の利用</a> を参照してください。</p> <h2 id="Syntax" name="Syntax">構文</h2> diff --git a/files/ja/web/api/cssstylesheet/index.html b/files/ja/web/api/cssstylesheet/index.html index d34d904d14..d17ee62590 100644 --- a/files/ja/web/api/cssstylesheet/index.html +++ b/files/ja/web/api/cssstylesheet/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/CSSStyleSheet --- <div>{{APIRef("CSSOM")}}</div> -<p><strong><code>CSSStyleSheet</code></strong> インターフェイスは、1 枚の <a href="/docs/Web/CSS">CSS</a> スタイルシートを表します。これは、その親の {{domxref("StyleSheet")}} からプロパティとメソッドを継承します。</p> +<p><strong><code>CSSStyleSheet</code></strong> インターフェイスは、1 枚の <a href="/ja/docs/Web/CSS">CSS</a> スタイルシートを表します。これは、その親の {{domxref("StyleSheet")}} からプロパティとメソッドを継承します。</p> <p>スタイルシートは、<em>{{domxref("CSSStyleRule", "スタイル規則", "", 1)}}</em><em> </em>("<code>h1,h2 { font-size: 16pt }"</code>)、様々な <em>@-規則</em> (<code>@import</code>, <code>@media</code>, ...) 等の <em>{{domxref("CSSRule", "規則", "", 1)}}</em> から構成されます。このインターフェイスは、スタイルシート内の規則のリストを調査および変更できます。</p> @@ -132,5 +132,5 @@ translation_of: Web/API/CSSStyleSheet <h2 id="See also" name="See also">関連情報</h2> <ul> - <li><a href="/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information">動的なスタイル情報の利用</a></li> + <li><a href="/ja/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information">動的なスタイル情報の利用</a></li> </ul> diff --git a/files/ja/web/api/csssupportsrule/index.html b/files/ja/web/api/csssupportsrule/index.html index ef02d829cb..a64470f070 100644 --- a/files/ja/web/api/csssupportsrule/index.html +++ b/files/ja/web/api/csssupportsrule/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/CSSSupportsRule --- <p>{{APIRef("CSSOM")}}</p> -<p><strong><code>CSSSupportsRule</code></strong> インターフェイスは、1 個の CSS {{cssxref("@supports")}} <a href="/docs/Web/CSS/At-rule">@-規則</a> を表すオブジェクトを表します。これは、{{domxref("CSSConditionRule")}} インターフェイス、さらに型定数の値が <code>12</code> (<code>CSSRule.SUPPORTS_RULE</code>) の {{domxref("CSSRule")}} インターフェイスと {{domxref("CSSGroupingRule")}} インターフェイスを実装します。</p> +<p><strong><code>CSSSupportsRule</code></strong> インターフェイスは、1 個の CSS {{cssxref("@supports")}} <a href="/ja/docs/Web/CSS/At-rule">@-規則</a> を表すオブジェクトを表します。これは、{{domxref("CSSConditionRule")}} インターフェイス、さらに型定数の値が <code>12</code> (<code>CSSRule.SUPPORTS_RULE</code>) の {{domxref("CSSRule")}} インターフェイスと {{domxref("CSSGroupingRule")}} インターフェイスを実装します。</p> <h2 id="Syntax" name="Syntax">構文</h2> diff --git a/files/ja/web/api/customelementregistry/index.html b/files/ja/web/api/customelementregistry/index.html index 79c8a11eca..e127680a70 100644 --- a/files/ja/web/api/customelementregistry/index.html +++ b/files/ja/web/api/customelementregistry/index.html @@ -21,7 +21,7 @@ translation_of: Web/API/CustomElementRegistry <dl> <dt>{{domxref("CustomElementRegistry.define()")}}</dt> - <dd>新しい<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">カスタムエレメント</a>を定義。</dd> + <dd>新しい<a href="/ja/docs/Web/Web_Components/Using_custom_elements">カスタムエレメント</a>を定義。</dd> <dt>{{domxref("CustomElementRegistry.get()")}}</dt> <dd>指定されたカスタムエレメントへのコンストラクタか、またはカスタムエレメントが定義されていない場合は <code>undefined</code> を返す。</dd> <dt>{{domxref("CustomElementRegistry.whenDefined()")}}</dt> diff --git a/files/ja/web/api/dedicatedworkerglobalscope/index.html b/files/ja/web/api/dedicatedworkerglobalscope/index.html index 735a47c297..ebcf8abd58 100644 --- a/files/ja/web/api/dedicatedworkerglobalscope/index.html +++ b/files/ja/web/api/dedicatedworkerglobalscope/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/DedicatedWorkerGlobalScope --- <p>{{APIRef("Web Workers API")}}</p> -<p>The <strong><code>DedicatedWorkerGlobalScope</code></strong> object (the {{domxref("Worker")}} global scope) is accessible through the {{domxref("window.self","self")}} keyword. Some additional global functions, namespaces objects, and constructors, not typically associated with the worker global scope, but available on it, are listed in the <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript Reference</a>. See also: <a href="/en-US/docs/Web/Guide/Needs_categorization/Functions_available_to_workers">Functions available to workers</a>.</p> +<p>The <strong><code>DedicatedWorkerGlobalScope</code></strong> object (the {{domxref("Worker")}} global scope) is accessible through the {{domxref("window.self","self")}} keyword. Some additional global functions, namespaces objects, and constructors, not typically associated with the worker global scope, but available on it, are listed in the <a href="/ja/docs/Web/JavaScript/Reference">JavaScript Reference</a>. See also: <a href="/ja/docs/Web/Guide/Needs_categorization/Functions_available_to_workers">Functions available to workers</a>.</p> <h2 id="プロパティ">プロパティ</h2> @@ -103,6 +103,6 @@ translation_of: Web/API/DedicatedWorkerGlobalScope <ul> <li>{{domxref("Worker")}}</li> <li>{{domxref("WorkerGlobalScope")}}</li> - <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Web worker を使用する</a></li> - <li><a href="/en-US/docs/Web/Guide/Needs_categorization/Functions_available_to_workers">Web Worker が使用できる関数とクラス</a></li> + <li><a href="/ja/docs/Web/Guide/Performance/Using_web_workers">Web worker を使用する</a></li> + <li><a href="/ja/docs/Web/Guide/Needs_categorization/Functions_available_to_workers">Web Worker が使用できる関数とクラス</a></li> </ul> diff --git a/files/ja/web/api/delaynode/delaytime/index.html b/files/ja/web/api/delaynode/delaytime/index.html index 3d0259ad0b..9a64cc564f 100644 --- a/files/ja/web/api/delaynode/delaytime/index.html +++ b/files/ja/web/api/delaynode/delaytime/index.html @@ -54,5 +54,5 @@ myDelay.delayTime.value = 3.0; <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/delaynode/index.html b/files/ja/web/api/delaynode/index.html index dedae1c659..fe7a552956 100644 --- a/files/ja/web/api/delaynode/index.html +++ b/files/ja/web/api/delaynode/index.html @@ -79,5 +79,5 @@ translation_of: Web/API/DelayNode <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/devicemotionevent/index.html b/files/ja/web/api/devicemotionevent/index.html index c165e8e1c2..b3d7fc6eb4 100644 --- a/files/ja/web/api/devicemotionevent/index.html +++ b/files/ja/web/api/devicemotionevent/index.html @@ -78,5 +78,5 @@ translation_of: Web/API/DeviceMotionEvent <li>{{ domxref("DeviceMotionEvent") }}</li> <li>{{ event("devicemotion") }}</li> <li><a href="/ja/docs/WebAPI/Detecting_device_orientation" title="/ja/docs/WebAPI/Detecting_device_orientation">デバイスの方向検出</a></li> - <li><a href="https://developer.mozilla.org/ja/DOM/Orientation_and_motion_data_explained" title="向きと動作データの説明">向きと動作データの説明</a></li> + <li><a href="/ja/DOM/Orientation_and_motion_data_explained" title="向きと動作データの説明">向きと動作データの説明</a></li> </ul> diff --git a/files/ja/web/api/directoryentrysync/index.html b/files/ja/web/api/directoryentrysync/index.html index 3a5a4cdd03..bb267d6467 100644 --- a/files/ja/web/api/directoryentrysync/index.html +++ b/files/ja/web/api/directoryentrysync/index.html @@ -37,16 +37,16 @@ translation_of: Web/API/DirectoryEntrySync <table class="standard-table"> <tbody> <tr> - <td><code>DirectoryReaderSync <a href="#createReader" title="#createReader">createReader</a> () raises (<a href="/en/DOM/File_API/File_System_API/FileException" title="en/DOM/File_API/File_System_API/FileException">FileException</a>);</code></td> + <td><code>DirectoryReaderSync <a href="#createReader" title="#createReader">createReader</a> () raises (<a href="/ja/DOM/File_API/File_System_API/FileException" title="en/DOM/File_API/File_System_API/FileException">FileException</a>);</code></td> </tr> <tr> - <td><code><a href="/en/DOM/File_API/File_System_API/FileEntrySync" title="en/DOM/File_API/File_System_API/FileEntrySync">FileEntrySync</a> <a href="#getFile" title="#getFile">getFile</a> (in DOMString <em>path</em>, in optional Flags <em>options</em>) raises (<a href="/en/DOM/File_API/File_System_API/FileException" title="en/DOM/File_API/File_System_API/FileException">FileException</a>);</code></td> + <td><code><a href="/ja/DOM/File_API/File_System_API/FileEntrySync" title="en/DOM/File_API/File_System_API/FileEntrySync">FileEntrySync</a> <a href="#getFile" title="#getFile">getFile</a> (in DOMString <em>path</em>, in optional Flags <em>options</em>) raises (<a href="/ja/DOM/File_API/File_System_API/FileException" title="en/DOM/File_API/File_System_API/FileException">FileException</a>);</code></td> </tr> <tr> - <td><code>DirectoryEntrySync <a href="#getDirectory" title="#getDirectory">getDirectory</a> (in DOMString path, in optional Flags <em>options</em>) raises (<a href="/en/DOM/File_API/File_System_API/FileException" title="en/DOM/File_API/File_System_API/FileException">FileException</a>);</code></td> + <td><code>DirectoryEntrySync <a href="#getDirectory" title="#getDirectory">getDirectory</a> (in DOMString path, in optional Flags <em>options</em>) raises (<a href="/ja/DOM/File_API/File_System_API/FileException" title="en/DOM/File_API/File_System_API/FileException">FileException</a>);</code></td> </tr> <tr> - <td><code>void <a href="#removeRecursively" title="#removeRecursively">removeRecursively</a> () raises (<a href="/en/DOM/File_API/File_System_API/FileException" title="en/DOM/File_API/File_System_API/FileException">FileException</a>); </code></td> + <td><code>void <a href="#removeRecursively" title="#removeRecursively">removeRecursively</a> () raises (<a href="/ja/DOM/File_API/File_System_API/FileException" title="en/DOM/File_API/File_System_API/FileException">FileException</a>); </code></td> </tr> </tbody> </table> @@ -58,12 +58,12 @@ translation_of: Web/API/DirectoryEntrySync <p>このディレクトリからエントリを読み込むための新しい <code>DirectoryReaderSync</code> を作成します。</p> <pre class="notranslate">DirectoryReaderSync createReader ( -) raises (<a href="https://developer.mozilla.org/en/DOM/File_API/File_System_API/FileException">FileException</a>);</pre> +) raises (<a href="/ja/DOM/File_API/File_System_API/FileException">FileException</a>);</pre> <h5 id="戻り値">戻り値</h5> <dl> - <dt><code><a href="/en/DOM/File_API/File_System_API/DirectoryReaderSync" title="en/DOM/File_API/File_System_API/DirectoryReaderSync">DirectoryReaderSync</a></code></dt> + <dt><code><a href="/ja/DOM/File_API/File_System_API/DirectoryReaderSync" title="en/DOM/File_API/File_System_API/DirectoryReaderSync">DirectoryReaderSync</a></code></dt> <dd>ファイルシステム内のディレクトリを表します。</dd> </dl> @@ -100,7 +100,7 @@ translation_of: Web/API/DirectoryEntrySync <pre class="notranslate">void getFile ( in DOMString <em>path</em>, in optional Flags <em>options</em> -) raises (<a href="https://developer.mozilla.org/en/DOM/File_API/File_System_API/FileException">FileException</a>);</pre> +) raises (<a href="/ja/DOM/File_API/File_System_API/FileException">FileException</a>);</pre> <h5 id="パラメータ">パラメータ</h5> @@ -156,7 +156,7 @@ translation_of: Web/API/DirectoryEntrySync <h5 id="戻り値_2">戻り値</h5> <dl> - <dt><a href="/en/DOM/File_API/File_System_API/FileEntrySync" title="en/DOM/File_API/File_System_API/FileEntrySync"><code>FileEntrySync</code></a></dt> + <dt><a href="/ja/DOM/File_API/File_System_API/FileEntrySync" title="en/DOM/File_API/File_System_API/FileEntrySync"><code>FileEntrySync</code></a></dt> <dd>ファイルシステム内のファイルを表します。</dd> </dl> @@ -209,7 +209,7 @@ translation_of: Web/API/DirectoryEntrySync <pre class="notranslate">void getDirectory ( in DOMString <em>path</em>, in optional Flags <em>options</em> -) raises (<a href="https://developer.mozilla.org/en/DOM/File_API/File_System_API/FileException">FileException</a>);</pre> +) raises (<a href="/ja/DOM/File_API/File_System_API/FileException">FileException</a>);</pre> <h5 id="Parameter">Parameter</h5> @@ -265,7 +265,7 @@ translation_of: Web/API/DirectoryEntrySync <h5 id="Returns">Returns</h5> <dl> - <dt><a href="/en/DOM/File_API/File_System_API/DirectoryReaderSync" title="en/DOM/File_API/File_System_API/DirectoryReaderSync"><code>DirectoryEntrySync</code></a></dt> + <dt><a href="/ja/DOM/File_API/File_System_API/DirectoryReaderSync" title="en/DOM/File_API/File_System_API/DirectoryReaderSync"><code>DirectoryEntrySync</code></a></dt> <dd>ファイルシステム内のディレクトリを表します。</dd> </dl> @@ -319,7 +319,7 @@ translation_of: Web/API/DirectoryEntrySync <p>削除できないファイルを含むディレクトリを削除した場合や、削除中にエラーが発生した場合、内容の一部が削除されないことがあります。このような場合は、エラーコールバックでキャッチし、削除を再試行してください。</p> <pre class="notranslate">void removeRecursively ( -) raises (<a href="https://developer.mozilla.org/en/DOM/File_API/File_System_API/FileException">FileException</a>);</pre> +) raises (<a href="/ja/DOM/File_API/File_System_API/FileException">FileException</a>);</pre> <h5 id="引数_2">引数</h5> @@ -372,6 +372,6 @@ translation_of: Web/API/DirectoryEntrySync <p>仕様書: {{ spec("http://dev.w3.org/2009/dap/file-system/pub/FileSystem/", "File API: Directories and System Specification", "WD") }}</p> -<p>リファレンス: <a href="/en/DOM/File_API/File_System_API" title="en/DOM/File_API/File_System_API">File System API</a></p> +<p>リファレンス: <a href="/ja/DOM/File_API/File_System_API" title="en/DOM/File_API/File_System_API">File System API</a></p> -<p>イントロダクション: <a href="/en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API" title="en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API">Basic Concepts About the File System API</a></p> +<p>イントロダクション: <a href="/ja/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API" title="en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API">Basic Concepts About the File System API</a></p> diff --git a/files/ja/web/api/document/copy_event/index.html b/files/ja/web/api/document/copy_event/index.html index 83cde410c0..00c2a97df8 100644 --- a/files/ja/web/api/document/copy_event/index.html +++ b/files/ja/web/api/document/copy_event/index.html @@ -36,7 +36,7 @@ translation_of: Web/API/Document/copy_event </tbody> </table> -<p>このイベントの本来の対象は、コピー操作の意図の対象である {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントの局面について完全な詳細は、 <a href="/en-US/docs/Web/API/Element/copy_event">Element: copy イベント</a>を参照してください。</p> +<p>このイベントの本来の対象は、コピー操作の意図の対象である {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントの局面について完全な詳細は、 <a href="/ja/docs/Web/API/Element/copy_event">Element: copy イベント</a>を参照してください。</p> <h2 id="Examples" name="Examples">例</h2> diff --git a/files/ja/web/api/document/designmode/index.html b/files/ja/web/api/document/designmode/index.html index ce879d87d5..c0a2da4cde 100644 --- a/files/ja/web/api/document/designmode/index.html +++ b/files/ja/web/api/document/designmode/index.html @@ -59,6 +59,6 @@ document.designMode = <em>value</em>;</pre> <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/docs/Rich-Text_Editing_in_Mozilla">Mozilla におけるリッチテキスト編集</a></li> + <li><a href="/ja/docs/Rich-Text_Editing_in_Mozilla">Mozilla におけるリッチテキスト編集</a></li> <li>{{domxref("HTMLElement.contentEditable")}}</li> </ul> diff --git a/files/ja/web/api/document/evaluate/index.html b/files/ja/web/api/document/evaluate/index.html index 493d923a99..98eacb4ef8 100644 --- a/files/ja/web/api/document/evaluate/index.html +++ b/files/ja/web/api/document/evaluate/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Document/evaluate --- <div>{{ ApiRef("DOM") }}</div> -<div><a href="/en-US/docs/XPath" title="XPath">XPath</a> 式やその他与えられたパラメータに基づいて <code><a href="/en-US/docs/XPathResult" title="XPathResult">XPathResult</a></code> を返します。</div> +<div><a href="/ja/docs/XPath" title="XPath">XPath</a> 式やその他与えられたパラメータに基づいて <code><a href="/ja/docs/XPathResult" title="XPathResult">XPathResult</a></code> を返します。</div> <div> </div> @@ -50,7 +50,7 @@ alert(alertText); // Alerts the text of all h2 elements <p>Notice in the above <code>document.body</code> has been used as the context instead of <code>document</code> so the XPath starts from the body element. (In this example, the <code>"."</code> is important to indicate that the querying should start from the context node, document.body. If the "." was left out (leaving <code>//h2</code>) the query would start from the root node (<code>html</code>) which would be more wasteful.)</p> -<p>See <a href="/en-US/docs/Introduction_to_using_XPath_in_JavaScript" title="Introduction to using XPath in JavaScript">Introduction to using XPath in JavaScript</a> for more information.</p> +<p>See <a href="/ja/docs/Introduction_to_using_XPath_in_JavaScript" title="Introduction to using XPath in JavaScript">Introduction to using XPath in JavaScript</a> for more information.</p> <h2 id="Notes" name="Notes">注釈</h2> @@ -155,7 +155,7 @@ alert(alertText); // Alerts the text of all h2 elements <h2 id="See_also" name="See_also">関連項目</h2> <ul> - <li><a href="/en-US/docs/DOM/document.createExpression" title="DOM/document.createExpression">DOM:document.createExpression</a></li> - <li><a href="/en-US/docs/Code_snippets/XPath" title="Code_snippets/XPath">XPath Code Snippets</a></li> + <li><a href="/ja/docs/DOM/document.createExpression" title="DOM/document.createExpression">DOM:document.createExpression</a></li> + <li><a href="/ja/docs/Code_snippets/XPath" title="Code_snippets/XPath">XPath Code Snippets</a></li> <li><a href="http://codepen.io/johan/full/ckFgn">Check for browser support</a></li> </ul> diff --git a/files/ja/web/api/document/getelementsbyname/index.html b/files/ja/web/api/document/getelementsbyname/index.html index 61d75e85f5..d21b02a8ed 100644 --- a/files/ja/web/api/document/getelementsbyname/index.html +++ b/files/ja/web/api/document/getelementsbyname/index.html @@ -92,6 +92,6 @@ translation_of: Web/API/Document/getElementsByName <ul> <li>{{domxref("document.getElementById()")}} : 固有の <code>id</code> を持つ要素への参照を返す</li> - <li>{{domxref("document.getElementsByTagName()")}} : 同じ<a href="/en-US/docs/Web/API/Element/tagName">タグ名</a>の要素への参照を返す</li> + <li>{{domxref("document.getElementsByTagName()")}} : 同じ<a href="/ja/docs/Web/API/Element/tagName">タグ名</a>の要素への参照を返す</li> <li>{{domxref("document.querySelector()")}} : <code>'div.myclass'</code> のような CSS セレクターによって要素への参照をかえす</li> </ul> diff --git a/files/ja/web/api/document/hasfocus/index.html b/files/ja/web/api/document/hasfocus/index.html index 2cbc9b8524..d228acbe5a 100644 --- a/files/ja/web/api/document/hasfocus/index.html +++ b/files/ja/web/api/document/hasfocus/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/Document/hasFocus <p><code><strong>hasFocus()</strong></code> は {{domxref("Document")}} インターフェイスのメソッドで、 {{jsxref("Boolean")}} の値を返し、文書または文書内の何れかの要素がフォーカスを持っているかどうかを示します。このメソッドは、文書内のアクティブな要素がフォーカスを持っているかどうかを特定するために使用することができます。</p> <div class="note"> -<p>文書を見ている時、文書内でフォーカスを持つ要素は常に<a href="/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement">アクティブ要素</a>ですが、アクティブ要素がフォーカスを持っているとは限りません。例えば、フォアグラウンドになっていないポップアップウィンドウ内のアクティブ要素はフォーカスを持ちません。</p> +<p>文書を見ている時、文書内でフォーカスを持つ要素は常に<a href="/ja/docs/Web/API/DocumentOrShadowRoot/activeElement">アクティブ要素</a>ですが、アクティブ要素がフォーカスを持っているとは限りません。例えば、フォアグラウンドになっていないポップアップウィンドウ内のアクティブ要素はフォーカスを持ちません。</p> </div> <h2 id="Syntax" name="Syntax">構文</h2> diff --git a/files/ja/web/api/document/lastmodified/index.html b/files/ja/web/api/document/lastmodified/index.html index a2f24d0270..682e0341ff 100644 --- a/files/ja/web/api/document/lastmodified/index.html +++ b/files/ja/web/api/document/lastmodified/index.html @@ -45,7 +45,7 @@ translation_of: Web/API/Document/lastModified <h2 id="Notes" name="Notes">注</h2> -<p><code>lastModified</code> は文字列なので、文書の更新日の比較には<em>簡単には</em>使用できないことに注意してください。こちらはいつページが変更されたかをアラートメッセージで表示する方法の例です (<a href="/en-US/docs/DOM/document.cookie">JavaScript cookies API</a> も参照)。</p> +<p><code>lastModified</code> は文字列なので、文書の更新日の比較には<em>簡単には</em>使用できないことに注意してください。こちらはいつページが変更されたかをアラートメッセージで表示する方法の例です (<a href="/ja/docs/DOM/document.cookie">JavaScript cookies API</a> も参照)。</p> <pre class="brush: js notranslate">if (Date.parse(document.lastModified) > parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1") || "0")) { document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname; diff --git a/files/ja/web/api/document/open/index.html b/files/ja/web/api/document/open/index.html index 2c2d46aaf8..a6d2629093 100644 --- a/files/ja/web/api/document/open/index.html +++ b/files/ja/web/api/document/open/index.html @@ -56,7 +56,7 @@ document.close(); <p>Gecko 1.9 以降、このメソッドは他のプロパティと同一オリジンポリシーが同じになるようになり、文書のオリジンを変更しようとした場合に動作しません。</p> -<p>Gecko 1.9.2 以降、 <code>document.open()</code> は<a href="/docs/Security_check_basics">プリンシパル</a>をスタックからフェッチするのではなく、 URI を使用する文書のプリンシパルを使用します。その結果、 <a class="internal" href="/ja/wrappedJSObject"><code>wrappedJSObject</code></a> を使用しても、 {{domxref("document.write()")}} を{{Glossary("chrome", "クローム")}}からの信頼できない文書に呼び出すことはできません。考え方については<a href="/ja/Security_check_basics">セキュリティチェックの基本</a>を参照してください。</p> +<p>Gecko 1.9.2 以降、 <code>document.open()</code> は<a href="/ja/docs/Security_check_basics">プリンシパル</a>をスタックからフェッチするのではなく、 URI を使用する文書のプリンシパルを使用します。その結果、 <a class="internal" href="/ja/wrappedJSObject"><code>wrappedJSObject</code></a> を使用しても、 {{domxref("document.write()")}} を{{Glossary("chrome", "クローム")}}からの信頼できない文書に呼び出すことはできません。考え方については<a href="/ja/Security_check_basics">セキュリティチェックの基本</a>を参照してください。</p> <h2 id="Three-argument_document.open" name="Three-argument_document.open">引数3つの document.open()</h2> diff --git a/files/ja/web/api/document/selectstart_event/index.html b/files/ja/web/api/document/selectstart_event/index.html index 448225df42..70b7d59de9 100644 --- a/files/ja/web/api/document/selectstart_event/index.html +++ b/files/ja/web/api/document/selectstart_event/index.html @@ -6,7 +6,7 @@ translation_of: Web/API/Document/selectstart_event <div>{{APIRef}}</div> <div> -<p><a href="/en-US/docs/Web/API/Selection">Selection API</a> の <code><strong>selectstart</strong></code> イベントは新しい選択範囲をユーザが指定した際に発火します。</p> +<p><a href="/ja/docs/Web/API/Selection">Selection API</a> の <code><strong>selectstart</strong></code> イベントは新しい選択範囲をユーザが指定した際に発火します。</p> <p>イベントがキャンセルされた場合、選択範囲は変更されません。</p> </div> diff --git a/files/ja/web/api/domexception/name/index.html b/files/ja/web/api/domexception/name/index.html index d708e5d710..cae6d4027c 100644 --- a/files/ja/web/api/domexception/name/index.html +++ b/files/ja/web/api/domexception/name/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/DOMException/name --- <p>{{ APIRef("DOM") }}</p> -<p><strong><code>name</code></strong> は {{domxref("DOMException")}} インターフェイスの読取専用プロパティで、 <a href="/en-US/docs/Web/API/DOMException#Error_names">エラー名</a>に結びつけられた文字列のうちの一つを含む {{domxref("DOMString")}} を返します。</p> +<p><strong><code>name</code></strong> は {{domxref("DOMException")}} インターフェイスの読取専用プロパティで、 <a href="/ja/docs/Web/API/DOMException#Error_names">エラー名</a>に結びつけられた文字列のうちの一つを含む {{domxref("DOMString")}} を返します。</p> <h2 id="Syntax" name="Syntax">構文</h2> diff --git a/files/ja/web/api/effecttiming/index.html b/files/ja/web/api/effecttiming/index.html index 2488aa9749..ba4e93cb98 100644 --- a/files/ja/web/api/effecttiming/index.html +++ b/files/ja/web/api/effecttiming/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/EffectTiming --- <div>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</div> -<p>The <strong><code>EffectTiming</code></strong> dictionary, part of the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>, is used by {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, and {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} to describe timing properties for animation effects. These properties are all optional, although without setting a <code>duration</code> the animation will not play.</p> +<p>The <strong><code>EffectTiming</code></strong> dictionary, part of the <a href="/ja/docs/Web/API/Web_Animations_API">Web Animations API</a>, is used by {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, and {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} to describe timing properties for animation effects. These properties are all optional, although without setting a <code>duration</code> the animation will not play.</p> <p>Simply put, these properties describe how the {{Glossary("user agent")}} should go about making the transition from from keyframe to keyframe, and how to behave when the animation begins and ends.</p> @@ -56,8 +56,8 @@ translation_of: Web/API/EffectTiming <h2 id="See_also">See also</h2> <ul> - <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li> - <li><a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Using the Web Animations API</a></li> + <li><a href="/ja/docs/Web/API/Web_Animations_API">Web Animations API</a></li> + <li><a href="/ja/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Using the Web Animations API</a></li> <li>{{domxref("Element.animate()")}}</li> <li>{{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}}</li> <li>{{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}</li> diff --git a/files/ja/web/api/element/animate/index.html b/files/ja/web/api/element/animate/index.html index a0108d9f60..661f224477 100644 --- a/files/ja/web/api/element/animate/index.html +++ b/files/ja/web/api/element/animate/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/Element/animate </ol> <dl> - <dd>のどちらかを指定します。keyframes 形式の詳細については <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats">Keyframe Formats</a> で確認できます。</dd> + <dd>のどちらかを指定します。keyframes 形式の詳細については <a href="/ja/docs/Web/API/Web_Animations_API/Keyframe_Formats">Keyframe Formats</a> で確認できます。</dd> <dd> <ol> <li>変化させたい CSS プロパティをキーとし、そのプロパティ値を遷移の順番に並べた配列を値としたオブジェクト @@ -49,7 +49,7 @@ translation_of: Web/API/Element/animate </ol> </dd> <dt><code>options</code></dt> - <dd>アニメーションの再生時間を表す ms 単位の整数値、または <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options">animation timing options</a> を含むオブジェクトを渡す必要があります。後者の場合、<a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options">animation timing options</a> のプロパティに加え、以下のようなプロパティも追加して <code>animate()</code> に渡すことができます。</dd> + <dd>アニメーションの再生時間を表す ms 単位の整数値、または <a href="/ja/docs/Web/API/Web_Animations_API/Animation_timing_options">animation timing options</a> を含むオブジェクトを渡す必要があります。後者の場合、<a href="/ja/docs/Web/API/Web_Animations_API/Animation_timing_options">animation timing options</a> のプロパティに加え、以下のようなプロパティも追加して <code>animate()</code> に渡すことができます。</dd> </dl> <h4 id="keyframeOptions_に追加できるプロパティ">keyframeOptions に追加できるプロパティ</h4> diff --git a/files/ja/web/api/element/blur_event/index.html b/files/ja/web/api/element/blur_event/index.html index 374419a1e3..a91dd6fcc8 100644 --- a/files/ja/web/api/element/blur_event/index.html +++ b/files/ja/web/api/element/blur_event/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Element/blur_event --- <div>{{APIRef}}</div> -<p><strong><code>blur</code></strong> イベントは、要素がフォーカスを失ったときに発生します。このイベントと {{domxref("Element/focusout_event", "focusout")}} との違いは、 <code>focusout</code> が<a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">バブリング</a>を行うのに対し <code>blur</code> は行わないことです。</p> +<p><strong><code>blur</code></strong> イベントは、要素がフォーカスを失ったときに発生します。このイベントと {{domxref("Element/focusout_event", "focusout")}} との違いは、 <code>focusout</code> が<a href="/ja/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">バブリング</a>を行うのに対し <code>blur</code> は行わないことです。</p> <p><code>blur</code> の反対は {{domxref("Element/focus_event", "focus")}} です。</p> diff --git a/files/ja/web/api/element/getattribute/index.html b/files/ja/web/api/element/getattribute/index.html index ae9a08953c..4ee84122ba 100644 --- a/files/ja/web/api/element/getattribute/index.html +++ b/files/ja/web/api/element/getattribute/index.html @@ -51,7 +51,7 @@ alert(align); // id="div1" の要素の align の値を表示します。</pre> // 空文字列が返される </pre> -<p>コンテンツ属性のノンスをるには、代わりに <code><a href="/en-US/docs/Web/API/HTMLOrForeignElement/nonce">nonce</a></code> プロパティを使用してください。</p> +<p>コンテンツ属性のノンスをるには、代わりに <code><a href="/ja/docs/Web/API/HTMLOrForeignElement/nonce">nonce</a></code> プロパティを使用してください。</p> <pre class="brush: js">let nonce = script.nonce;</pre> diff --git a/files/ja/web/api/element/getattributens/index.html b/files/ja/web/api/element/getattributens/index.html index 974483920a..ee03de1cab 100644 --- a/files/ja/web/api/element/getattributens/index.html +++ b/files/ja/web/api/element/getattributens/index.html @@ -36,7 +36,7 @@ alert(a); // div の align 属性の値を表示します。 <h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3> -<p><code>getAttributeNS</code> は <a href="ja/DOM/element.getAttribute">getAttribute</a> と異なります。<code>getAttributeNS</code> は特定の名前空間に属している要求された属性をより深く特定することができます。上記の例では、属性は mozilla の架空の "specialspace" 名前空間に属しています。</p> +<p><code>getAttributeNS</code> は <a href="/ja/DOM/element.getAttribute">getAttribute</a> と異なります。<code>getAttributeNS</code> は特定の名前空間に属している要求された属性をより深く特定することができます。上記の例では、属性は mozilla の架空の "specialspace" 名前空間に属しています。</p> <p>DOM4 より前の仕様では、このメソッドは属性が存在しない場合に <code>null</code> ではなく空文字列を返すように指定されていました。しかし、ほとんどのウェブ・ブラウザは <code>null</code> を返していました。DOM4 以降は、仕様でも <code>null</code> を返すように指定されました。しかしながら、いくつかの古いウェブ・ブラウザは空文字列を返します。そのため、指定の要素に指定の属性が存在しない可能性があるなら <code>getAttributeNS</code> を呼ぶ前に <a href="/ja/docs/Web/API/Element/hasAttributeNS"><code>hasAttributeNS</code></a> を使用して属性の存在を確かめる必要があります。</p> diff --git a/files/ja/web/api/element/getelementsbytagname/index.html b/files/ja/web/api/element/getelementsbytagname/index.html index c8e6024316..248bf36639 100644 --- a/files/ja/web/api/element/getelementsbytagname/index.html +++ b/files/ja/web/api/element/getelementsbytagname/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/Element/getElementsByTagName <h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> -<p>指定された <a href="ja/DOM/element.tagName">タグ名</a> による要素のリストを返します。指定された要素以下のサブツリーが検索対象となり、その要素自体は除外されます。</p> +<p>指定された <a href="/ja/DOM/element.tagName">タグ名</a> による要素のリストを返します。指定された要素以下のサブツリーが検索対象となり、その要素自体は除外されます。</p> <h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> @@ -44,7 +44,7 @@ for (var i = 0; i < cells.length; i++) { <h3 id=".E6.B3.A8.E6.84.8F.E7.82.B9" name=".E6.B3.A8.E6.84.8F.E7.82.B9">注意点</h3> -<p><code>element.getElementsByTagName</code> は、検索対象が指定された要素の子孫要素に限られるという点を除けば、<a href="ja/DOM/document.getElementsByTagName">document.getElementsByTagName</a> と似ています。</p> +<p><code>element.getElementsByTagName</code> は、検索対象が指定された要素の子孫要素に限られるという点を除けば、<a href="/ja/DOM/document.getElementsByTagName">document.getElementsByTagName</a> と似ています。</p> <h3 id=".E4.BB.95.E6.A7.98.E6.9B.B8" name=".E4.BB.95.E6.A7.98.E6.9B.B8">仕様書</h3> diff --git a/files/ja/web/api/element/getelementsbytagnamens/index.html b/files/ja/web/api/element/getelementsbytagnamens/index.html index 8bfa3bec21..f0344fd357 100644 --- a/files/ja/web/api/element/getelementsbytagnamens/index.html +++ b/files/ja/web/api/element/getelementsbytagnamens/index.html @@ -20,8 +20,8 @@ translation_of: Web/API/Element/getElementsByTagNameNS <ul> <li><code>elements</code> は見付かった要素のツリーに出現した順に生きた <code>NodeList</code> です。</li> <li><code>element</code> は検索を始める要素です。この要素の子孫のみが検索対象になり、そのノード自身は対象になりません。</li> - <li><code>namespaceURI</code> は検索される要素の名前空間 URI です(<code><a href="ja/DOM/element.namespaceURI">element.namespaceURI</a></code> を参照)。例えば、XHTML 要素を検索する必要があるなら、XHTML の名前空間 URI <code><span class="nowiki">http://www.w3.org/1999/xhtml</span></code> を使ってください。</li> - <li><code>localName</code> は探す要素のローカル名か全ての要素にマッチする特別な値 <code>"*"</code> のどちらかです(<code><a href="ja/DOM/element.localName">element.localName</a></code> 参照)。</li> + <li><code>namespaceURI</code> は検索される要素の名前空間 URI です(<code><a href="/ja/DOM/element.namespaceURI">element.namespaceURI</a></code> を参照)。例えば、XHTML 要素を検索する必要があるなら、XHTML の名前空間 URI <code><span class="nowiki">http://www.w3.org/1999/xhtml</span></code> を使ってください。</li> + <li><code>localName</code> は探す要素のローカル名か全ての要素にマッチする特別な値 <code>"*"</code> のどちらかです(<code><a href="/ja/DOM/element.localName">element.localName</a></code> 参照)。</li> </ul> <h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3> diff --git a/files/ja/web/api/element/namespaceuri/index.html b/files/ja/web/api/element/namespaceuri/index.html index 476f51c8b1..ebf84fb77c 100644 --- a/files/ja/web/api/element/namespaceuri/index.html +++ b/files/ja/web/api/element/namespaceuri/index.html @@ -19,7 +19,7 @@ original_slug: Web/API/Node/namespaceURI <li><code>namespace</code> は指定されたノードの名前空間 URI を表す文字列です。</li> </ul> <h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3> -<p>この断片では、ノードの <a href="ja/DOM/element.localName">localName</a> と <code>namespaceURI</code> が試験されます。もし、<code>namespaceURI</code> が XUL の名前空間を返し、<code>localName</code> が "browser" を返せば、そのノードは XUL の <code><browser/></code> と理解されます。</p> +<p>この断片では、ノードの <a href="/ja/DOM/element.localName">localName</a> と <code>namespaceURI</code> が試験されます。もし、<code>namespaceURI</code> が XUL の名前空間を返し、<code>localName</code> が "browser" を返せば、そのノードは XUL の <code><browser/></code> と理解されます。</p> <pre>if (node.localName == "browser" && node.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { // これは XUL browser です。 @@ -27,8 +27,8 @@ original_slug: Web/API/Node/namespaceURI </pre> <h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3> <p>これは、スコープ中の名前空間宣言の調査を基づいた、名前空間検索の結果である、計算された値ではありません。単に作成時に与えられた名前空間 URI です。</p> -<p><code>ELEMENT_NODE</code> と <code>ATTRIBUTE_NODE</code> 以外の<a href="ja/DOM/element.nodeType">種類</a>全てに属すノードと, <code><a href="ja/DOM/document.createElement">document.createElement</a></code> のような DOM Level 1 のメソッドで作られたノードでは、常に <code>namespaceURI</code> は <code>null</code> です。</p> -<p>DOM Level 2 の <a href="ja/DOM/document.createElementNS">document.createElementNS</a> メソッドを使うことで、特定の <code>namespaceURI</code> を持った要素を作ることができます。</p> +<p><code>ELEMENT_NODE</code> と <code>ATTRIBUTE_NODE</code> 以外の<a href="/ja/DOM/element.nodeType">種類</a>全てに属すノードと, <code><a href="/ja/DOM/document.createElement">document.createElement</a></code> のような DOM Level 1 のメソッドで作られたノードでは、常に <code>namespaceURI</code> は <code>null</code> です。</p> +<p>DOM Level 2 の <a href="/ja/DOM/document.createElementNS">document.createElementNS</a> メソッドを使うことで、特定の <code>namespaceURI</code> を持った要素を作ることができます。</p> <p><a class="external" href="http://www.w3.org/TR/xml-names11/">Namespaces in XML</a> によれば、属性はその要素から名前空間を継承しません。もし属性が特定の名前空間を与えられていなければ、その属性は名前空間をもちません。</p> <h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3> <p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-NodeNSname">DOM Level 2 Core: namespaceURI</a></p> diff --git a/files/ja/web/api/element/queryselector/index.html b/files/ja/web/api/element/queryselector/index.html index 12c10525d5..1aec9dde2d 100644 --- a/files/ja/web/api/element/queryselector/index.html +++ b/files/ja/web/api/element/queryselector/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Element/querySelector <ul> <li><code>element</code>と<code>baseElement</code>は{{domxref("element")}}オブジェクトを表します。</li> - <li><code>selectors</code>はマッチさせたい1つ以上の<a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">セレクタ</a>を表します。</li> + <li><code>selectors</code>はマッチさせたい1つ以上の<a href="/ja/docs/Web/Guide/CSS/Getting_Started/Selectors">セレクタ</a>を表します。</li> </ul> <h2 id="Example" name="Example">例</h2> diff --git a/files/ja/web/api/element/setattributenode/index.html b/files/ja/web/api/element/setattributenode/index.html index d29967758d..130f233e17 100644 --- a/files/ja/web/api/element/setattributenode/index.html +++ b/files/ja/web/api/element/setattributenode/index.html @@ -39,7 +39,7 @@ alert(d2.attributes[1].value) <p>If the attribute named already exists on the element, that attribute is replaced with the new one and the replaced one is returned.</p> -<p>This method is seldom used, with <code><a href="ja/DOM/element.setAttribute">setAttribute()</a></code> usually being used to change element's attributes.</p> +<p>This method is seldom used, with <code><a href="/ja/DOM/element.setAttribute">setAttribute()</a></code> usually being used to change element's attributes.</p> <p>{{ DOMAttributeMethods() }}</p> diff --git a/files/ja/web/api/element/show_event/index.html b/files/ja/web/api/element/show_event/index.html index eedb67fb18..aefcfb4073 100644 --- a/files/ja/web/api/element/show_event/index.html +++ b/files/ja/web/api/element/show_event/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Element/show_event --- <div>{{APIRef}}{{deprecated_header}}</div> -<p><strong><code>show</code></strong> イベントは、 {{domxref("Element/contextmenu_event", "contextmenu")}} イベントが <a href="/en-US/docs/Web/HTML/Global_attributes/contextmenu"><code>contextmenu</code> 属性</a>を持つ要素に発生またはバブリングしたときに発生します。</p> +<p><strong><code>show</code></strong> イベントは、 {{domxref("Element/contextmenu_event", "contextmenu")}} イベントが <a href="/ja/docs/Web/HTML/Global_attributes/contextmenu"><code>contextmenu</code> 属性</a>を持つ要素に発生またはバブリングしたときに発生します。</p> <table class="properties"> <tbody> diff --git a/files/ja/web/api/element/touchcancel_event/index.html b/files/ja/web/api/element/touchcancel_event/index.html index c9c1558a44..45332083b9 100644 --- a/files/ja/web/api/element/touchcancel_event/index.html +++ b/files/ja/web/api/element/touchcancel_event/index.html @@ -67,5 +67,5 @@ translation_of: Web/API/Element/touchcancel_event <ul> <li>{{ domxref("GlobalEventHandlers.ontouchcancel","ontouchcancel")}}</li> - <li>This event on <code><a href="/en-US/docs/Web/API/Document">Document</a></code> targets: <code><a href="/en-US/docs/Web/API/Document/touchcancel_event">touchcancel</a> </code></li> + <li>This event on <code><a href="/ja/docs/Web/API/Document">Document</a></code> targets: <code><a href="/ja/docs/Web/API/Document/touchcancel_event">touchcancel</a> </code></li> </ul> diff --git a/files/ja/web/api/errorevent/index.html b/files/ja/web/api/errorevent/index.html index 08079763e1..d829192309 100644 --- a/files/ja/web/api/errorevent/index.html +++ b/files/ja/web/api/errorevent/index.html @@ -74,5 +74,5 @@ translation_of: Web/API/ErrorEvent <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers" title="/en-US/docs/Web/Guide/Performance/Using_web_workers">web worker を使用して</a>、 その様なイベントを発生させる可能性が最も高いオブジェクト</li> + <li><a href="/ja/docs/Web/Guide/Performance/Using_web_workers" title="/en-US/docs/Web/Guide/Performance/Using_web_workers">web worker を使用して</a>、 その様なイベントを発生させる可能性が最も高いオブジェクト</li> </ul> diff --git a/files/ja/web/api/event/initevent/index.html b/files/ja/web/api/event/initevent/index.html index 30c357e677..858bbe38be 100644 --- a/files/ja/web/api/event/initevent/index.html +++ b/files/ja/web/api/event/initevent/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/Event/initEvent <h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> -<p><code>initEvent</code> メソッドは <a href="ja/DOM/document.createEvent">document.createEvent</a> によって作成された <a href="ja/DOM/event">event</a> の値を初期化するために使われます。</p> +<p><code>initEvent</code> メソッドは <a href="/ja/DOM/document.createEvent">document.createEvent</a> によって作成された <a href="/ja/DOM/event">event</a> の値を初期化するために使われます。</p> <div class="note"> <p><strong>このメソッドは廃止されているため、使用しないでください。</strong></p> @@ -40,7 +40,7 @@ event.initEvent("click", true, false); <h3 id=".E6.B3.A8.E6.84.8F.E7.82.B9" name=".E6.B3.A8.E6.84.8F.E7.82.B9">注意点</h3> -<p>この方法で初期化されるイベントは、<a href="ja/DOM/document.createEvent">document.createEvent</a> メソッドで作成されたものでなければなりません。<code>initEvent</code> によるイベントの設定は、イベントを <a href="ja/DOM/element.dispatchEvent">割り当てる</a> 前に呼び出す必要があります。</p> +<p>この方法で初期化されるイベントは、<a href="/ja/DOM/document.createEvent">document.createEvent</a> メソッドで作成されたものでなければなりません。<code>initEvent</code> によるイベントの設定は、イベントを <a href="/ja/DOM/element.dispatchEvent">割り当てる</a> 前に呼び出す必要があります。</p> <h3 id=".E4.BB.95.E6.A7.98.E6.9B.B8" name=".E4.BB.95.E6.A7.98.E6.9B.B8">仕様書</h3> diff --git a/files/ja/web/api/eventlistener/index.html b/files/ja/web/api/eventlistener/index.html index dfe0c90aa0..24bce69f66 100644 --- a/files/ja/web/api/eventlistener/index.html +++ b/files/ja/web/api/eventlistener/index.html @@ -86,7 +86,7 @@ buttonElement.addEventListener('click', { <h3 id="See_Also">See Also:</h3> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></li> + <li><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener</a></li> </ul> <h2 id="See_also" name="See_also">関連情報</h2> diff --git a/files/ja/web/api/eventtarget/addeventlistener/index.html b/files/ja/web/api/eventtarget/addeventlistener/index.html index a9703668ae..30d9148491 100644 --- a/files/ja/web/api/eventtarget/addeventlistener/index.html +++ b/files/ja/web/api/eventtarget/addeventlistener/index.html @@ -36,7 +36,7 @@ translation_of: Web/API/EventTarget/addEventListener <dl> <dt><code><var>type</var></code></dt> - <dd>対象とする<a href="/en-US/docs/Web/Events">イベントの種類</a>を表す文字列</dd> + <dd>対象とする<a href="/ja/docs/Web/Events">イベントの種類</a>を表す文字列</dd> <dt><code><var>listener</var></code></dt> <dd>指定された型のイベントが発生するときに通知 ({{domxref("Event")}} インターフェースを実装しているオブジェクト) を受け取るオブジェクト。これは、 {{domxref("EventListener")}} インタフェースを実装するオブジェクト、あるいは、単純に、JavaScript の<a href="/ja/docs/Web/JavaScript/Guide/Functions">関数</a>でなければなりません。コールバックについて詳しくは、{{anch("The event listener callback", "イベントリスナーのコールバック")}}を参照してください。</dd> <dt><code><var>options</var></code> {{optional_inline}}</dt> @@ -237,7 +237,7 @@ el.addEventListener("click", () => { modifyText("four"); }, false); <a class="inner1" href="https://www.mozilla.org" target="_blank"> inner1, passive & preventDefault(which is not allowed) </a> - <a class="inner2" href="https://developer.mozilla.org/" target="_blank"> + <a class="inner2" href="/" target="_blank"> inner2, none-passive & preventDefault(not open new page) </a> </div> diff --git a/files/ja/web/api/fetch_api/using_fetch/index.html b/files/ja/web/api/fetch_api/using_fetch/index.html index 7f506b1018..6860b33e2e 100644 --- a/files/ja/web/api/fetch_api/using_fetch/index.html +++ b/files/ja/web/api/fetch_api/using_fetch/index.html @@ -44,7 +44,7 @@ translation_of: Web/API/Fetch_API/Using_Fetch <p><strong>メモ</strong>: Body ミックスインは本文の内容を他の mime タイプとして展開する似たようなメソッドを提供しています。詳細は {{anch("Body")}} の節をご覧ください。</p> </div> -<p>Fetch リクエストは、検索したリソースからの指示よりも <a href="https://developer.mozilla.org/ja/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a> の <code>connect-src</code> ディレクティブによって制御されます。</p> +<p>Fetch リクエストは、検索したリソースからの指示よりも <a href="/ja/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a> の <code>connect-src</code> ディレクティブによって制御されます。</p> <h3 id="Supplying_request_options" name="Supplying_request_options">リクエストにオプションを適用する</h3> diff --git a/files/ja/web/api/file/lastmodifieddate/index.html b/files/ja/web/api/file/lastmodifieddate/index.html index c58c72cc49..2bae6e492c 100644 --- a/files/ja/web/api/file/lastmodifieddate/index.html +++ b/files/ja/web/api/file/lastmodifieddate/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/File/lastModifiedDate <h3 id="値">値</h3> -<p>ファイルが最後に変更された日時を示す <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code> オブジェクトです。</p> +<p>ファイルが最後に変更された日時を示す <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code> オブジェクトです。</p> <h2 id="Example" name="Example">例</h2> diff --git a/files/ja/web/api/file/webkitrelativepath/index.html b/files/ja/web/api/file/webkitrelativepath/index.html index 9953f2311c..fffef9b4d3 100644 --- a/files/ja/web/api/file/webkitrelativepath/index.html +++ b/files/ja/web/api/file/webkitrelativepath/index.html @@ -82,7 +82,7 @@ translation_of: Web/API/File/webkitRelativePath <h2 id="あわせて参照">あわせて参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API">File and Directory Entries API</a></li> + <li><a href="/ja/docs/Web/API/File_and_Directory_Entries_API">File and Directory Entries API</a></li> <li>{{domxref("HTMLInputElement.webkitEntries")}}</li> <li>{{domxref("HTMLInputElement.webkitdirectory")}}</li> </ul> diff --git a/files/ja/web/api/file_and_directory_entries_api/index.html b/files/ja/web/api/file_and_directory_entries_api/index.html index 2fbd94322c..dc3d377e39 100644 --- a/files/ja/web/api/file_and_directory_entries_api/index.html +++ b/files/ja/web/api/file_and_directory_entries_api/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/File_and_Directory_Entries_API <p>Two very similar APIs exist depending on whether you desire asynchronous or synchronous behavior. The synchronous API is indended to be used inside a {{domxref("Worker")}} and will return the values you desire. The asynchronous API will not block and functions and the API will not return values; instead, you will need to supply a callback function to handle the response whenever it arrives.</p> <div class="warning"> -<p>The Firefox implementation of the File and Directory Entries API is very limited; there is no support for creating files. Only for accessing files which are selected by the user in a file {{HTMLElement("input")}} element (see {{domxref("HTMLInputElement")}} as well) or when a file or directory is provided to the Web site or app using <a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API">drag and drop</a>. Firefox also does not implement the synchronous API. Check the browser compatibility for any part of the API you use carefully, and see <a href="/en-US/docs/Web/API/File_and_Directory_Entries_API/Firefox_support">File and Directory Entries API support in Firefox</a> for more details.</p> +<p>The Firefox implementation of the File and Directory Entries API is very limited; there is no support for creating files. Only for accessing files which are selected by the user in a file {{HTMLElement("input")}} element (see {{domxref("HTMLInputElement")}} as well) or when a file or directory is provided to the Web site or app using <a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">drag and drop</a>. Firefox also does not implement the synchronous API. Check the browser compatibility for any part of the API you use carefully, and see <a href="/ja/docs/Web/API/File_and_Directory_Entries_API/Firefox_support">File and Directory Entries API support in Firefox</a> for more details.</p> </div> <h2 id="Getting_access_to_a_file_system">Getting access to a file system</h2> @@ -52,7 +52,7 @@ translation_of: Web/API/File_and_Directory_Entries_API <dt>{{domxref("FileSystemDirectoryReader")}}</dt> <dd>Created by calling {{domxref("FileSystemDirectoryEntry.createReader()")}}, this interface provides the functionality which lets you read the contents of a directory.</dd> <dt>{{domxref("FileSystemFlags")}}</dt> - <dd>Defines a set of values which are used when specifying option flags when calling certain methods in the <a href="https://developer.mozilla.org/en-US/docs/Web/API/File_and_Directory_Entries_API">File and Directory Entries API</a>.</dd> + <dd>Defines a set of values which are used when specifying option flags when calling certain methods in the <a href="/ja/docs/Web/API/File_and_Directory_Entries_API">File and Directory Entries API</a>.</dd> <dt>{{DOMxRef("FileError")}} {{Obsolete_Inline}}</dt> <dd>Represents an error which is generated by asynchronous file system calls.</dd> </dl> @@ -134,6 +134,6 @@ translation_of: Web/API/File_and_Directory_Entries_API <h2 id="See_also">See also</h2> <ul> - <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API/Introduction">Introduction to the File and Directory Entries API</a></li> - <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API/Firefox_support">File and Directory Entries API support in Firefox</a></li> + <li><a href="/ja/docs/Web/API/File_and_Directory_Entries_API/Introduction">Introduction to the File and Directory Entries API</a></li> + <li><a href="/ja/docs/Web/API/File_and_Directory_Entries_API/Firefox_support">File and Directory Entries API support in Firefox</a></li> </ul> diff --git a/files/ja/web/api/file_and_directory_entries_api/introduction/index.html b/files/ja/web/api/file_and_directory_entries_api/introduction/index.html index 393a110756..9e0cda7c4e 100644 --- a/files/ja/web/api/file_and_directory_entries_api/introduction/index.html +++ b/files/ja/web/api/file_and_directory_entries_api/introduction/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/File_and_Directory_Entries_API/Introduction --- <div>{{DefaultAPISidebar("File System API")}}{{Non-standard_header}}</div> -<p><span class="seoSummary"><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API">ファイルとディレクトリエントリ API</a> は、ウェブアプリケーションがナビゲートできるローカルファイルシステムをシミュレートします。サンドボックス化された仮想ファイルシステムでファイルやディレクトリの読み取り、書き込み、作成ができるアプリを開発できます。</span></p> +<p><span class="seoSummary"><a href="/ja/docs/Web/API/File_and_Directory_Entries_API">ファイルとディレクトリエントリ API</a> は、ウェブアプリケーションがナビゲートできるローカルファイルシステムをシミュレートします。サンドボックス化された仮想ファイルシステムでファイルやディレクトリの読み取り、書き込み、作成ができるアプリを開発できます。</span></p> <p>ファイルおよびディレクトリエントリ API は、他の関連 API と相互作用します。 これは File Writer API 上に構築され、 File API 上に構築されています。 各 API は異なる機能を追加します。 これらの API は、大量のデータをキャッシュして処理することができるウェブアプリケーションの巨大な進歩的な飛躍です。</p> @@ -242,6 +242,6 @@ translation_of: Web/API/File_and_Directory_Entries_API/Introduction <h2 id="See_also">See also</h2> <ul> - <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API">File and Directory Entries API</a></li> + <li><a href="/ja/docs/Web/API/File_and_Directory_Entries_API">File and Directory Entries API</a></li> <li><a class="external" href="http://www.html5rocks.com/en/tutorials/file/filesystem/">Exploring the FileSystem APIs</a> (HTML5 Rocks)</li> </ul> diff --git a/files/ja/web/api/file_handle_api/index.html b/files/ja/web/api/file_handle_api/index.html index 6dd05a2578..b1538e660a 100644 --- a/files/ja/web/api/file_handle_api/index.html +++ b/files/ja/web/api/file_handle_api/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/File_Handle_API --- <p>{{non-standard_header}}</p> -<p>FileHandle API は、ファイルの作成や内容の変更など、ファイルを操作するための API です (<a href="/docs/DOM/File" title="DOM/File">File API</a> とは異なります)。この API を通じたファイル操作は、デバイス上に物理的に格納でき、部分的な編集には、競合問題を避けるためにターンベースのロック機構が使用されています。</p> +<p>FileHandle API は、ファイルの作成や内容の変更など、ファイルを操作するための API です (<a href="/ja/docs/DOM/File" title="DOM/File">File API</a> とは異なります)。この API を通じたファイル操作は、デバイス上に物理的に格納でき、部分的な編集には、競合問題を避けるためにターンベースのロック機構が使用されています。</p> <h2 id="API_概観">API 概観</h2> @@ -30,7 +30,7 @@ translation_of: Web/API/File_Handle_API <h3 id="FileHandle_インスタンスの作成">FileHandle インスタンスの作成</h3> -<p>このインテントは IndexedDB を通じてファイルを保存しているため、{{domxref("FileHandle")}} インスタンスを作成するのに <a href="/docs/IndexedDB/IDBFactory#open" title="IndexedDB/IDBFactory#open">IndexedDB Database</a> が必要です。</p> +<p>このインテントは IndexedDB を通じてファイルを保存しているため、{{domxref("FileHandle")}} インスタンスを作成するのに <a href="/ja/docs/IndexedDB/IDBFactory#open" title="IndexedDB/IDBFactory#open">IndexedDB Database</a> が必要です。</p> <div style="overflow: hidden;"> <pre class="brush: js">var IDBReq = indexedDB.open("myFileStorageDataBase"); diff --git a/files/ja/web/api/fileerror/index.html b/files/ja/web/api/fileerror/index.html index a54d750c9a..07e4aa7651 100644 --- a/files/ja/web/api/fileerror/index.html +++ b/files/ja/web/api/fileerror/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/FileError <p><strong>メモ:</strong> このインターフェイスは、最新の仕様では廃止されています。代わりに新しい DOM4 {{domxref("DOMError")}} インターフェイスを使用してください。</p> </div> -<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/File_System_API/Introduction">File System API</a> では、<code>FileError</code> は非同期 API を使用してファイルシステムにアクセスする際に発生する可能性があるエラーの状態を表します。<a class="external external-icon" href="http://dev.w3.org/2009/dap/file-system/pub/FileSystem/#bib-FILE-WRITER">File Writer</a> で説明されている <code>FileError</code> インターフェイスを拡張し、いくつかの新しいエラーコードを追加します。</p> +<p><a href="/ja/docs/Web/API/File_System_API/Introduction">File System API</a> では、<code>FileError</code> は非同期 API を使用してファイルシステムにアクセスする際に発生する可能性があるエラーの状態を表します。<a class="external external-icon" href="http://dev.w3.org/2009/dap/file-system/pub/FileSystem/#bib-FILE-WRITER">File Writer</a> で説明されている <code>FileError</code> インターフェイスを拡張し、いくつかの新しいエラーコードを追加します。</p> <p><code>FileError</code> オブジェクトはエラーコールバックに渡されます。オブジェクトには、発生したエラーの種類を示すコードがあります。</p> @@ -133,7 +133,7 @@ translation_of: Web/API/FileError <h2 id="あわせて参照">あわせて参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/File_System_API/Introduction">Basic Concepts About the File System API</a></li> + <li><a href="/ja/docs/Web/API/File_System_API/Introduction">Basic Concepts About the File System API</a></li> <li>{{domxref("FileReader")}}</li> <li>{{domxref("File")}}</li> <li>{{domxref("Blob")}}</li> diff --git a/files/ja/web/api/fileexception/index.html b/files/ja/web/api/fileexception/index.html index 0b1486bf7e..187365d422 100644 --- a/files/ja/web/api/fileexception/index.html +++ b/files/ja/web/api/fileexception/index.html @@ -138,6 +138,6 @@ var fileEntry = fs.root.getFile('log.txt', {create: true, exclusive:true}0; <p>仕様: {{spec("http://dev.w3.org/2009/dap/file-system/pub/FileSystem/", "File API: Directories and System Specification", "WD")}}</p> -<p>リファレンス: <a href="/en-US/docs/DOM/File_API/File_System_API" title="DOM/File_API/File_System_API">File System API</a></p> +<p>リファレンス: <a href="/ja/docs/DOM/File_API/File_System_API" title="DOM/File_API/File_System_API">File System API</a></p> -<p>イントロダクション: <a href="/en-US/docs/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API" title="DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API">Basic Concepts About the File System API</a></p> +<p>イントロダクション: <a href="/ja/docs/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API" title="DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API">Basic Concepts About the File System API</a></p> diff --git a/files/ja/web/api/filereader/onabort/index.html b/files/ja/web/api/filereader/onabort/index.html index 7c2c2d0d0a..594a867ef5 100644 --- a/files/ja/web/api/filereader/onabort/index.html +++ b/files/ja/web/api/filereader/onabort/index.html @@ -9,7 +9,7 @@ tags: - Reference translation_of: Web/API/FileReader/onabort --- -<p><strong><code>FileReader.onabort</code></strong> プロパティには、<code><a href="/en-US/docs/Web/Events/abort">abort</a></code> イベントが発生したとき、つまりファイルの読み取り処理が中止されたときに実行されるイベント ハンドラが含まれています。</p> +<p><strong><code>FileReader.onabort</code></strong> プロパティには、<code><a href="/ja/docs/Web/Events/abort">abort</a></code> イベントが発生したとき、つまりファイルの読み取り処理が中止されたときに実行されるイベント ハンドラが含まれています。</p> <h2 id="シンタックス">シンタックス</h2> diff --git a/files/ja/web/api/filereader/onerror/index.html b/files/ja/web/api/filereader/onerror/index.html index 27b1cafbfa..77ee74e4c9 100644 --- a/files/ja/web/api/filereader/onerror/index.html +++ b/files/ja/web/api/filereader/onerror/index.html @@ -3,7 +3,7 @@ title: onerror slug: Web/API/FileReader/onerror translation_of: Web/API/FileReader/onerror --- -<p><a href="/en-US/docs/Web/API/FileReader">FileReader</a> の onerror ハンドラは、Error オブジェクトではなく Event オブジェクトをパラメータとして受け取りますが、エラーは FileReader オブジェクトから <code><a href="/en-US/docs/Web/API/FileReader/error">instanceOfFileReader.error</a></code> のようにアクセスすることができます。</p> +<p><a href="/ja/docs/Web/API/FileReader">FileReader</a> の onerror ハンドラは、Error オブジェクトではなく Event オブジェクトをパラメータとして受け取りますが、エラーは FileReader オブジェクトから <code><a href="/ja/docs/Web/API/FileReader/error">instanceOfFileReader.error</a></code> のようにアクセスすることができます。</p> <pre class="brush:js; line-numbers language-js notranslate"><code class="language-js"><span class="comment token">// </span></code><input type="file" onchange="onChange(event)"> からのコールバック<code class="language-js"> <span class="keyword token">function</span> <span class="function token">onChange</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> diff --git a/files/ja/web/api/filereader/readasdataurl/index.html b/files/ja/web/api/filereader/readasdataurl/index.html index 0c0bde9dfe..4c537dcafe 100644 --- a/files/ja/web/api/filereader/readasdataurl/index.html +++ b/files/ja/web/api/filereader/readasdataurl/index.html @@ -96,7 +96,7 @@ translation_of: Web/API/FileReader/readAsDataURL }</pre> -<div class="note"><strong>メモ:</strong> Internet Explorer 10 以前では <a href="/en-US/docs/Web/API/FileReader"><code>FileReader()</code></a> コンストラクターに対応していません。十分な互換性が必要とされるときは <a class="internal" href="https://mdn.mozillademos.org/files/3699/crossbrowser_image_preview.html" title="crossbrowser_image_preview.html">crossbrowser possible solution for image preview</a> または <a href="https://mdn.mozillademos.org/files/3698/image_upload_preview.html">this more powerful example</a> を参照してください。</div> +<div class="note"><strong>メモ:</strong> Internet Explorer 10 以前では <a href="/ja/docs/Web/API/FileReader"><code>FileReader()</code></a> コンストラクターに対応していません。十分な互換性が必要とされるときは <a class="internal" href="https://mdn.mozillademos.org/files/3699/crossbrowser_image_preview.html" title="crossbrowser_image_preview.html">crossbrowser possible solution for image preview</a> または <a href="https://mdn.mozillademos.org/files/3698/image_upload_preview.html">this more powerful example</a> を参照してください。</div> <h2 id="Specifications" name="Specifications">仕様</h2> diff --git a/files/ja/web/api/filesystementrysync/index.html b/files/ja/web/api/filesystementrysync/index.html index 2a77b88535..a673fac09d 100644 --- a/files/ja/web/api/filesystementrysync/index.html +++ b/files/ja/web/api/filesystementrysync/index.html @@ -25,7 +25,7 @@ translation_of: Web/API/FileSystemEntrySync <h2 id="basic" name="basic">基本のコンセプト</h2> -<p><code>FileSystemEntrySync</code> インターフェイスには、ファイルやディレクトリの操作に必要なメソッドが含まれていますが、<code><a href="https://developer.mozilla.org/en-US/docs/Web/API/FileSystemEntrySync$translate?tolocale=ja#toURL">toURL()</a></code>というエントリの URL を取得するための便利なメソッドもあります。 また新しい URL スキーム <code>filesystem:</code> を紹介します。</p> +<p><code>FileSystemEntrySync</code> インターフェイスには、ファイルやディレクトリの操作に必要なメソッドが含まれていますが、<code><a href="/ja/docs/Web/API/FileSystemEntrySync$translate?tolocale=ja#toURL">toURL()</a></code>というエントリの URL を取得するための便利なメソッドもあります。 また新しい URL スキーム <code>filesystem:</code> を紹介します。</p> <p>Google Chromeで <code>filesystem:</code> スキームを使用すると、アプリのルートに保存されているすべてのファイルとフォルダを表示できます。 アプリの起源のルートディレクトリに <code>filesystem:</code> スキームを使用するだけです。たとえば、アプリが <code><a class="external external-icon" href="http://ww.html5rocks.com" rel="freelink">http://ww.html5rocks.com</a></code> にある場合は、 <code>filesystem:<a class="external external-icon" href="http://www.html5rocks.com/temporary/" rel="freelink">http://www.html5rocks.com/temporary/</a></code> をタブで開きます。Chrome は、アプリのオリジンに保存されているすべてのファイルとフォルダの読み取り専用リストを表示します。</p> @@ -34,19 +34,19 @@ translation_of: Web/API/FileSystemEntrySync <table class="standard-table"> <tbody> <tr> - <td><code>Metadata <a href="#getMetada" title="#getMetada">getMetadata</a> () raises (<a href="/en/DOM/File_API/File_System_API/FileException" title="en/DOM/File_API/File_System_API/FileException">FileException</a>);</code></td> + <td><code>Metadata <a href="#getMetada" title="#getMetada">getMetadata</a> () raises (<a href="/ja/DOM/File_API/File_System_API/FileException" title="en/DOM/File_API/File_System_API/FileException">FileException</a>);</code></td> </tr> <tr> - <td><code>FileSystemEntrySync <a href="#moveTo" title="#moveTo">moveTo</a> (in <a href="/en/DOM/File_API/File_System_API/DirectoryEntrySync" title="en/DOM/File_API/File_System_API/DirectoryEntrySync">DirectoryEntrySync</a> <em>parent</em>, optional DOMString <em>newName</em>) raises (<a href="/en/DOM/File_API/File_System_API/FileException" title="en/DOM/File_API/File_System_API/FileException">FileException</a>);</code></td> + <td><code>FileSystemEntrySync <a href="#moveTo" title="#moveTo">moveTo</a> (in <a href="/ja/DOM/File_API/File_System_API/DirectoryEntrySync" title="en/DOM/File_API/File_System_API/DirectoryEntrySync">DirectoryEntrySync</a> <em>parent</em>, optional DOMString <em>newName</em>) raises (<a href="/ja/DOM/File_API/File_System_API/FileException" title="en/DOM/File_API/File_System_API/FileException">FileException</a>);</code></td> </tr> <tr> - <td><code>FileSystemEntrySync <a href="#copyTo" title="#copyTo">copyTo</a>(in <a href="/en/DOM/File_API/File_System_API/DirectoryEntrySync" title="en/DOM/File_API/File_System_API/DirectoryEntrySync">DirectoryEntrySync</a> <em>parent</em>, optional DOMString <em>newName</em>) raises (<a href="/en/DOM/File_API/File_System_API/FileException" title="en/DOM/File_API/File_System_API/FileException">FileException</a>);</code></td> + <td><code>FileSystemEntrySync <a href="#copyTo" title="#copyTo">copyTo</a>(in <a href="/ja/DOM/File_API/File_System_API/DirectoryEntrySync" title="en/DOM/File_API/File_System_API/DirectoryEntrySync">DirectoryEntrySync</a> <em>parent</em>, optional DOMString <em>newName</em>) raises (<a href="/ja/DOM/File_API/File_System_API/FileException" title="en/DOM/File_API/File_System_API/FileException">FileException</a>);</code></td> </tr> <tr> <td><code>DOMString <a href="#toURL" title="#toURL">toURL</a>();</code></td> </tr> <tr> - <td><code>void <a href="#remove" title="#remove">remove</a>() raises (<a href="/en/DOM/File_API/File_System_API/FileException" title="en/DOM/File_API/File_System_API/FileException">FileException</a>);</code></td> + <td><code>void <a href="#remove" title="#remove">remove</a>() raises (<a href="/ja/DOM/File_API/File_System_API/FileException" title="en/DOM/File_API/File_System_API/FileException">FileException</a>);</code></td> </tr> <tr> <td><code>DirectoryEntrySync <a href="#getParent" title="#getParent">getParent</a>();</code></td> @@ -104,7 +104,7 @@ translation_of: Web/API/FileSystemEntrySync <p>このエントリに関するメタデータを検索します。 [ todo: どのような種類のメタデータを指定するか]</p> <pre>Metadata getMetada () - raises <code>(<a href="https://developer.mozilla.org/en/DOM/File_API/File_System_API/FileException">FileException</a>)</code>;</pre> + raises <code>(<a href="/ja/DOM/File_API/File_System_API/FileException">FileException</a>)</code>;</pre> <h5 id="引数">引数</h5> @@ -158,7 +158,7 @@ translation_of: Web/API/FileSystemEntrySync <pre>FileSystemEntrySync moveTo ( in DirectoryEntrySync <em>parent</em>, optional DOMString <em>newName</em> -) raises (<a href="https://developer.mozilla.org/en/DOM/File_API/File_System_API/FileException">FileException</a>);</pre> +) raises (<a href="/ja/DOM/File_API/File_System_API/FileException">FileException</a>);</pre> <h5 id="引数_2">引数</h5> @@ -220,7 +220,7 @@ translation_of: Web/API/FileSystemEntrySync <pre>void copyTo ( in DirectoryEntrySync <em>parent</em>, optional DOMString <em>newName</em> -) raises (<a href="https://developer.mozilla.org/en/DOM/File_API/File_System_API/FileException">FileException</a>);</pre> +) raises (<a href="/ja/DOM/File_API/File_System_API/FileException">FileException</a>);</pre> <h5 id="引数_3">引数</h5> @@ -312,7 +312,7 @@ translation_of: Web/API/FileSystemEntrySync <p>ファイルまたはディレクトリを削除します。 空のディレクトリやファイルシステムのルートディレクトリは削除できません。 空のディレクトリを削除する場合は、代わりに <a href="/ja/docs/Web/API/DirectoryEntrySync#removeRecursively()" rel="internal" title="https://developer.mozilla.org/en/DOM/File_API/File_System_API/DirectoryEntrySync#removeRecursively()"><code>removeRecursively()</code></a> を使用してください。</p> <pre>void remove ( -) raises (<a href="https://developer.mozilla.org/en/DOM/File_API/File_System_API/FileException">FileException</a>);</pre> +) raises (<a href="/ja/DOM/File_API/File_System_API/FileException">FileException</a>);</pre> <h5 id="引数_5">引数</h5> @@ -382,6 +382,6 @@ translation_of: Web/API/FileSystemEntrySync <p>仕様:{{ spec("http://dev.w3.org/2009/dap/file-system/pub/FileSystem/", "File API: Directories and System Specification", "WD") }}</p> -<p>リファレンス: <a href="/en/DOM/File_API/File_System_API" title="en/DOM/File_API/File_System_API">File System API</a></p> +<p>リファレンス: <a href="/ja/DOM/File_API/File_System_API" title="en/DOM/File_API/File_System_API">File System API</a></p> -<p>イントロダクション: <a href="/en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API" title="en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API">Basic Concepts About the File System API</a></p> +<p>イントロダクション: <a href="/ja/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API" title="en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API">Basic Concepts About the File System API</a></p> diff --git a/files/ja/web/api/filesystemfileentry/index.html b/files/ja/web/api/filesystemfileentry/index.html index 09b6950748..7cb09ee42c 100644 --- a/files/ja/web/api/filesystemfileentry/index.html +++ b/files/ja/web/api/filesystemfileentry/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/FileSystemFileEntry --- <div>{{APIRef("File System API")}}{{SeeCompatTable}}</div> -<p><a href="https://developer.mozilla.org/en/DOM/File_API/File_System_API" title="en/DOM/File_API/File_System_API">File System API</a> の <strong><code>FileSystemFileEntry</code></strong> インターフェイスは、ファイルシステム内のファイルを表します。<br> +<p><a href="/ja/DOM/File_API/File_System_API" title="en/DOM/File_API/File_System_API">File System API</a> の <strong><code>FileSystemFileEntry</code></strong> インターフェイスは、ファイルシステム内のファイルを表します。<br> このファイルには、ファイルの属性と、ファイルを読むために使用可能な {{domxref("File")}} オブジェクトを作成する {{domxref("FileSystemFileEntry.file", "file()")}} メソッドも含まれます。</p> <h2 id="プロパティ" style="line-height: 30px; font-size: 2.14285714285714rem;">プロパティ</h2> @@ -96,6 +96,6 @@ window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler);</ <h2 id="あわせて参照">あわせて参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API">File and Directory Entries API</a></li> - <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API/Introduction">Introduction to the File System API</a></li> + <li><a href="/ja/docs/Web/API/File_and_Directory_Entries_API">File and Directory Entries API</a></li> + <li><a href="/ja/docs/Web/API/File_and_Directory_Entries_API/Introduction">Introduction to the File System API</a></li> </ul> diff --git a/files/ja/web/api/filesystemsync/index.html b/files/ja/web/api/filesystemsync/index.html index c995e3655b..2d12046dfe 100644 --- a/files/ja/web/api/filesystemsync/index.html +++ b/files/ja/web/api/filesystemsync/index.html @@ -58,6 +58,6 @@ translation_of: Web/API/FileSystemSync <p>仕様:{{ spec("http://dev.w3.org/2009/dap/file-system/pub/FileSystem/", "File API: Directories and System Specification", "WD") }}</p> -<p>リファレンス: <a href="/en/DOM/File_API/File_System_API" title="en/DOM/File_API/File_System_API">File System API</a></p> +<p>リファレンス: <a href="/ja/DOM/File_API/File_System_API" title="en/DOM/File_API/File_System_API">File System API</a></p> -<p>イントロダクション: <a href="/en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API" title="en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API">Basic Concepts About the File System API</a></p> +<p>イントロダクション: <a href="/ja/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API" title="en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API">Basic Concepts About the File System API</a></p> diff --git a/files/ja/web/api/formdata/append/index.html b/files/ja/web/api/formdata/append/index.html index 1eda622273..253ec34e4d 100644 --- a/files/ja/web/api/formdata/append/index.html +++ b/files/ja/web/api/formdata/append/index.html @@ -93,7 +93,7 @@ formData.getAll('name'); // ["true", "74", "John"] <ul> <li>{{domxref("XMLHTTPRequest")}}</li> - <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> - <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> + <li><a href="/ja/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/ja/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> <li>{{HTMLElement("Form")}}</li> </ul> diff --git a/files/ja/web/api/formdata/entries/index.html b/files/ja/web/api/formdata/entries/index.html index 9e9369f4a1..4b899ef581 100644 --- a/files/ja/web/api/formdata/entries/index.html +++ b/files/ja/web/api/formdata/entries/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/FormData/entries <p><code><strong>FormData.entries()</strong></code> メソッドは、 {{jsxref("Iteration_protocols",'iterator')}} を返し、このオブジェクトに含まれる全ての キー/バリュー ペアを通過できるようにします。 各ペアのキーは {{domxref("USVString")}} オブジェクトで、 {{domxref("USVString")}} 、または {{domxref("Blob")}} のいずれかの値。</p> <div class="note"> -<p><strong>Note</strong>: このメソッドは <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a> で使用できます。</p> +<p><strong>Note</strong>: このメソッドは <a href="/ja/docs/Web/API/Web_Workers_API">Web Workers</a> で使用できます。</p> </div> <h2 id="構文">構文</h2> @@ -71,7 +71,7 @@ key2, value2</pre> <ul> <li>{{domxref("XMLHTTPRequest")}}</li> - <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> - <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> + <li><a href="/ja/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/ja/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> <li>{{HTMLElement("Form")}}</li> </ul> diff --git a/files/ja/web/api/formdata/formdata/index.html b/files/ja/web/api/formdata/formdata/index.html index 04c74264b2..e2811babfc 100644 --- a/files/ja/web/api/formdata/formdata/index.html +++ b/files/ja/web/api/formdata/formdata/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/FormData/FormData <p><code><strong>FormData()</strong></code> コンストラクターは、新しい {{domxref("FormData")}} オブジェクトを生成します。</p> <div class="note"> -<p><strong>Note</strong>: このメソッドは <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a> で使用できます。</p> +<p><strong>Note</strong>: このメソッドは <a href="/ja/docs/Web/API/Web_Workers_API">Web Workers</a> で使用できます。</p> </div> <h2 id="構文">構文</h2> @@ -93,7 +93,7 @@ let formData = new FormData(myForm);</pre> <ul> <li>{{domxref("XMLHTTPRequest")}}</li> - <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> - <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> + <li><a href="/ja/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/ja/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> <li>{{HTMLElement("Form")}}</li> </ul> diff --git a/files/ja/web/api/formdata/keys/index.html b/files/ja/web/api/formdata/keys/index.html index 0e9fd69673..534af4333c 100644 --- a/files/ja/web/api/formdata/keys/index.html +++ b/files/ja/web/api/formdata/keys/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/FormData/keys <p><code><strong>FormData.keys()</strong></code> メソッドは、 {{jsxref("Iteration_protocols",'iterator')}} を返し、このオブジェクトに含まれる全てのキーを通過できるようにします。キーは {{domxref("USVString")}} オブジェクトです。</p> <div class="note"> -<p><strong>Note</strong>: このメソッドは <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a> で使用できます。</p> +<p><strong>Note</strong>: このメソッドは <a href="/ja/docs/Web/API/Web_Workers_API">Web Workers</a> で使用できます。</p> </div> <h2 id="構文">構文</h2> @@ -71,7 +71,7 @@ key2</pre> <ul> <li>{{domxref("XMLHTTPRequest")}}</li> - <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> - <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> + <li><a href="/ja/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/ja/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> <li>{{HTMLElement("Form")}}</li> </ul> diff --git a/files/ja/web/api/formdata/values/index.html b/files/ja/web/api/formdata/values/index.html index 6f2ffd1dce..57373586b4 100644 --- a/files/ja/web/api/formdata/values/index.html +++ b/files/ja/web/api/formdata/values/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/FormData/values <p><code><strong>FormData.values()</strong></code> メソッドは {{jsxref("Iteration_protocols",'iterator')}} を返し、このオブジェクトに含まれる全ての値を通過できるようにします。値は {{domxref("USVString")}} または {{domxref("Blob")}} オブジェクトです。</p> <div class="note"> -<p><strong>Note</strong>: このメソッドは <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a> で使用できます。</p> +<p><strong>Note</strong>: このメソッドは <a href="/ja/docs/Web/API/Web_Workers_API">Web Workers</a> で使用できます。</p> </div> <h2 id="構文">構文</h2> @@ -71,7 +71,7 @@ value2</pre> <ul> <li>{{domxref("XMLHTTPRequest")}}</li> - <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> - <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> + <li><a href="/ja/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/ja/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> <li>{{HTMLElement("Form")}}</li> </ul> diff --git a/files/ja/web/api/frame_timing_api/index.html b/files/ja/web/api/frame_timing_api/index.html index 7f2a31ec71..abf14b743d 100644 --- a/files/ja/web/api/frame_timing_api/index.html +++ b/files/ja/web/api/frame_timing_api/index.html @@ -51,6 +51,6 @@ translation_of: Web/API/Frame_Timing_API <h2 id="See_also">See also</h2> <ul> - <li><a href="/docs/Tools/Performance/Frame_rate">Frame Rate (Firefox Performance Tool)</a></li> + <li><a href="/ja/docs/Tools/Performance/Frame_rate">Frame Rate (Firefox Performance Tool)</a></li> <li><a href="/Web/API/Frame_Timing_API/Using_the_Frame_Timing_API">Using the Frame Timing API</a></li> </ul> diff --git a/files/ja/web/api/frame_timing_api/using_the_frame_timing_api/index.html b/files/ja/web/api/frame_timing_api/using_the_frame_timing_api/index.html index fa1be473f4..ae5be9ee24 100644 --- a/files/ja/web/api/frame_timing_api/using_the_frame_timing_api/index.html +++ b/files/ja/web/api/frame_timing_api/using_the_frame_timing_api/index.html @@ -119,11 +119,11 @@ observe_frame.observe({entryTypes: ['frame']}); <h3 id="Firefox_performance_tool">Firefox performance tool</h3> -<p>Firefox's performance tool allows the developer to <em>record</em> a piece of the user's interaction and the data obtained during the recording is used to create a <em>profile</em> of the browser's activity. The profile includes a <em><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Waterfall">waterfall</a></em> of the activity such as event handling, layout, painting, scripting, etc.</p> +<p>Firefox's performance tool allows the developer to <em>record</em> a piece of the user's interaction and the data obtained during the recording is used to create a <em>profile</em> of the browser's activity. The profile includes a <em><a href="/ja/docs/Tools/Performance/Waterfall">waterfall</a></em> of the activity such as event handling, layout, painting, scripting, etc.</p> -<p>Firefox's performance tool also includes a <em><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Frame_rate">frame rate graph</a></em> which provides timestamps for each frame including the average frame rate and the minimum and maximum rates (for a specific recording session). This data, along with the waterfall data, gives an indication of where a site might be having frame related performance problems (for example, by correlating the recording's minimum rates with their respective waterfall events).</p> +<p>Firefox's performance tool also includes a <em><a href="/ja/docs/Tools/Performance/Frame_rate">frame rate graph</a></em> which provides timestamps for each frame including the average frame rate and the minimum and maximum rates (for a specific recording session). This data, along with the waterfall data, gives an indication of where a site might be having frame related performance problems (for example, by correlating the recording's minimum rates with their respective waterfall events).</p> -<p>The performance tool's <em><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Flame_Chart">flame chart</a></em> and <em><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Call_Tree">call tree</a></em> tabs provide data to help analyze the site's JavaScript usage. The call tree shows where the application is spending most of its time, whereas the flame chart shows the state of the JavaScript stack for the code at every millisecond during the performance profile. This provides a way to know exactly which function was executing at any point during the recording, how long it ran, and where it was called from.</p> +<p>The performance tool's <em><a href="/ja/docs/Tools/Performance/Flame_Chart">flame chart</a></em> and <em><a href="/ja/docs/Tools/Performance/Call_Tree">call tree</a></em> tabs provide data to help analyze the site's JavaScript usage. The call tree shows where the application is spending most of its time, whereas the flame chart shows the state of the JavaScript stack for the code at every millisecond during the performance profile. This provides a way to know exactly which function was executing at any point during the recording, how long it ran, and where it was called from.</p> <h3 id="Chrome_performance_tool">Chrome performance tool</h3> @@ -132,6 +132,6 @@ observe_frame.observe({entryTypes: ['frame']}); <h2 id="あわせて参照">あわせて参照</h2> <ul> - <li><a href="/docs/Tools/Performance/Frame_rate">Frame Rate (Firefox Performance Tool)</a></li> + <li><a href="/ja/docs/Tools/Performance/Frame_rate">Frame Rate (Firefox Performance Tool)</a></li> <li><a href="https://w3c.github.io/frame-timing/">Frame Timing</a>; W3C Editor's Draft</li> </ul> diff --git a/files/ja/web/api/gamepad/axes/index.html b/files/ja/web/api/gamepad/axes/index.html index 12c5e43863..c1cb9827e4 100644 --- a/files/ja/web/api/gamepad/axes/index.html +++ b/files/ja/web/api/gamepad/axes/index.html @@ -76,4 +76,4 @@ translation_of: Web/API/Gamepad/axes <h2 id="参照">参照</h2> -<p><a href="/docs/Web/Guide/API/Gamepad">Gamepad API を利用する</a></p> +<p><a href="/ja/docs/Web/Guide/API/Gamepad">Gamepad API を利用する</a></p> diff --git a/files/ja/web/api/gamepad/buttons/index.html b/files/ja/web/api/gamepad/buttons/index.html index d9f847ba44..d335b132b6 100644 --- a/files/ja/web/api/gamepad/buttons/index.html +++ b/files/ja/web/api/gamepad/buttons/index.html @@ -95,4 +95,4 @@ translation_of: Web/API/Gamepad/buttons <h2 id="参照">参照</h2> -<p><a href="/docs/Web/Guide/API/Gamepad">Gamepad API を利用する</a></p> +<p><a href="/ja/docs/Web/Guide/API/Gamepad">Gamepad API を利用する</a></p> diff --git a/files/ja/web/api/gamepad/connected/index.html b/files/ja/web/api/gamepad/connected/index.html index df4ef22e8d..d614c6ebf4 100644 --- a/files/ja/web/api/gamepad/connected/index.html +++ b/files/ja/web/api/gamepad/connected/index.html @@ -54,4 +54,4 @@ console.log(gp.connected);</pre> <h2 id="参照">参照</h2> -<p><a href="/docs/Web/Guide/API/Gamepad">Gamepad API を利用する</a></p> +<p><a href="/ja/docs/Web/Guide/API/Gamepad">Gamepad API を利用する</a></p> diff --git a/files/ja/web/api/gamepad/displayid/index.html b/files/ja/web/api/gamepad/displayid/index.html index 05b4ef212a..c042964ee0 100644 --- a/files/ja/web/api/gamepad/displayid/index.html +++ b/files/ja/web/api/gamepad/displayid/index.html @@ -59,6 +59,6 @@ translation_of: Web/API/Gamepad/displayId <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/gamepad/hand/index.html b/files/ja/web/api/gamepad/hand/index.html index 605d0dbe66..195359d877 100644 --- a/files/ja/web/api/gamepad/hand/index.html +++ b/files/ja/web/api/gamepad/hand/index.html @@ -57,5 +57,5 @@ translation_of: Web/API/Gamepad/hand <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a></li> + <li><a href="/ja/docs/Web/API/Gamepad_API">Gamepad API</a></li> </ul> diff --git a/files/ja/web/api/gamepad/hapticactuators/index.html b/files/ja/web/api/gamepad/hapticactuators/index.html index f02b29bb70..e52accfb20 100644 --- a/files/ja/web/api/gamepad/hapticactuators/index.html +++ b/files/ja/web/api/gamepad/hapticactuators/index.html @@ -51,5 +51,5 @@ translation_of: Web/API/Gamepad/hapticActuators <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a></li> + <li><a href="/ja/docs/Web/API/Gamepad_API">Gamepad API</a></li> </ul> diff --git a/files/ja/web/api/gamepad/id/index.html b/files/ja/web/api/gamepad/id/index.html index 5a90c6a4fa..76332829f4 100644 --- a/files/ja/web/api/gamepad/id/index.html +++ b/files/ja/web/api/gamepad/id/index.html @@ -65,4 +65,4 @@ translation_of: Web/API/Gamepad/id <h2 id="参照">参照</h2> -<p><a href="/docs/Web/Guide/API/Gamepad">Gamepad API の利用</a></p> +<p><a href="/ja/docs/Web/Guide/API/Gamepad">Gamepad API の利用</a></p> diff --git a/files/ja/web/api/gamepad/index.html b/files/ja/web/api/gamepad/index.html index ba042a97fc..1621300235 100644 --- a/files/ja/web/api/gamepad/index.html +++ b/files/ja/web/api/gamepad/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Gamepad --- <div>{{APIRef("Gamepad API")}}</div> -<p><a href="/docs/Web/API/Gamepad_API">Gamepad API</a> の <strong><code>Gamepad</code></strong> インターフェースはそれぞれのゲームパッドやその他のコントローラーを定義し、ボタンのプッシュや軸位置やIDといった情報にアクセスできるようにします。</p> +<p><a href="/ja/docs/Web/API/Gamepad_API">Gamepad API</a> の <strong><code>Gamepad</code></strong> インターフェースはそれぞれのゲームパッドやその他のコントローラーを定義し、ボタンのプッシュや軸位置やIDといった情報にアクセスできるようにします。</p> <p>Gamepad オブジェクトは２つのうちのどちらかの方法で取得できます : <span class="tlid-translation translation"><span title="">Gamepadオブジェクトは、</span></span>{{event("gamepadconnected")}} <span class="tlid-translation translation"><span title="">イベントと </span></span>{{event("gamepaddisconnected")}} <span class="tlid-translation translation"><span title="">イベントの </span></span><code>gamepad</code><span class="tlid-translation translation"><span title=""> プロパティを使用する方法、</span></span>{{domxref("Navigator.getGamepads()")}} <span class="tlid-translation translation"><span title="">メソッドが返した配列内の任意の位置を取得する方法のいずれかで返すことができます。</span></span></p> @@ -97,6 +97,6 @@ translation_of: Web/API/Gamepad <h2 id="参照">参照</h2> <ul> - <li><a href="/docs/Web/Guide/API/Gamepad">Gamepad API の利用</a></li> - <li><a href="/docs/Web/API/Gamepad_API">Gamepad API</a></li> + <li><a href="/ja/docs/Web/Guide/API/Gamepad">Gamepad API の利用</a></li> + <li><a href="/ja/docs/Web/API/Gamepad_API">Gamepad API</a></li> </ul> diff --git a/files/ja/web/api/gamepad/mapping/index.html b/files/ja/web/api/gamepad/mapping/index.html index fdc4924aed..a9fadb2776 100644 --- a/files/ja/web/api/gamepad/mapping/index.html +++ b/files/ja/web/api/gamepad/mapping/index.html @@ -54,4 +54,4 @@ console.log(gp.mapping);</pre> <h2 id="関連項目">関連項目</h2> -<p><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></p> +<p><a href="/ja/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></p> diff --git a/files/ja/web/api/gamepad/pose/index.html b/files/ja/web/api/gamepad/pose/index.html index 267ae3d0ee..1aa481bb89 100644 --- a/files/ja/web/api/gamepad/pose/index.html +++ b/files/ja/web/api/gamepad/pose/index.html @@ -51,6 +51,6 @@ translation_of: Web/API/Gamepad/pose <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a></li> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a></li> + <li><a href="/ja/docs/Web/API/Gamepad_API">Gamepad API</a></li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API</a></li> </ul> diff --git a/files/ja/web/api/gamepad_api/index.html b/files/ja/web/api/gamepad_api/index.html index ca782b6de0..54e2095bad 100644 --- a/files/ja/web/api/gamepad_api/index.html +++ b/files/ja/web/api/gamepad_api/index.html @@ -17,28 +17,28 @@ translation_of: Web/API/Gamepad_API <h2 id="Interfaces" name="Interfaces">インターフェイス</h2> <dl> - <dt><a href="/docs/Web/API/Gamepad" title="The Gamepad interface of the Gamepad API defines an individual gamepad or other controller, allowing access to information such as button presses, axis positions, and id."><code>Gamepad</code></a></dt> + <dt><a href="/ja/docs/Web/API/Gamepad" title="The Gamepad interface of the Gamepad API defines an individual gamepad or other controller, allowing access to information such as button presses, axis positions, and id."><code>Gamepad</code></a></dt> <dd>コンピュータに接続しているゲームパッド・コントローラーを表します。</dd> - <dt><a href="/docs/Web/API/GamepadButton" title="The GamepadButton interface defines an individual button of a gamepad or other controller, allowing access to the current state of different types of buttons available on the control device."><code>GamepadButton</code></a></dt> + <dt><a href="/ja/docs/Web/API/GamepadButton" title="The GamepadButton interface defines an individual button of a gamepad or other controller, allowing access to the current state of different types of buttons available on the control device."><code>GamepadButton</code></a></dt> <dd><span class="tlid-translation translation"><span title="">接続されているコントローラーのいずれかのボタンを表します。</span></span></dd> - <dt><a href="/docs/Web/API/GamepadEvent" title="The GamepadEvent interface of the Gamepad API contains references to gamepads connected to the system, which is what the gamepad events Window.gamepadconnected and Window.gamepaddisconnected are fired in response to."><code>GamepadEvent</code></a></dt> + <dt><a href="/ja/docs/Web/API/GamepadEvent" title="The GamepadEvent interface of the Gamepad API contains references to gamepads connected to the system, which is what the gamepad events Window.gamepadconnected and Window.gamepaddisconnected are fired in response to."><code>GamepadEvent</code></a></dt> <dd><span class="tlid-translation translation"><span title="">ゲームパッドに関連するイベントを表すイベントオブジェクトです。</span></span></dd> </dl> <h3 id="Gamepad_の実験的な拡張機能">Gamepad の実験的な拡張機能</h3> <dl> - <dt><a href="/docs/Web/API/GamepadHapticActuator" title="The GamepadHapticActuator interface of the Gamepad API represents hardware in the controller designed to provide haptic feedback to the user (if available), most commonly vibration hardware."><code>GamepadHapticActuator</code></a></dt> + <dt><a href="/ja/docs/Web/API/GamepadHapticActuator" title="The GamepadHapticActuator interface of the Gamepad API represents hardware in the controller designed to provide haptic feedback to the user (if available), most commonly vibration hardware."><code>GamepadHapticActuator</code></a></dt> <dd><span class="tlid-translation translation"><span title="">ユーザに触覚フィードバックを提供するように設計されたコントローラー内のハードウェア (使用可能な場合)、最も一般的には振動ハードウェアを表します。</span></span></dd> - <dt><a href="/docs/Web/API/GamepadPose" title="The GamepadPose interface of the Gamepad API represents the pose of a WebVR controller at a given timestamp (which includes orientation, position, velocity, and acceleration information.)"><code>GamepadPose</code></a></dt> + <dt><a href="/ja/docs/Web/API/GamepadPose" title="The GamepadPose interface of the Gamepad API represents the pose of a WebVR controller at a given timestamp (which includes orientation, position, velocity, and acceleration information.)"><code>GamepadPose</code></a></dt> <dd> <div class="text-wrap tlid-copy-target"> - <div class="result-shield-container tlid-copy-target"><a href="/docs/Web/API/WebVR_API">WebVR </a><span class="tlid-translation translation"><span title="">コントローラーの場合のコントローラーの姿勢 (3D 空間内の位置と向きなど) を表します。これはより新しい <a href="/docs/Web/API/WebXR_Device_API">WebXR</a> 標準では使用<em>されません。</em></span></span></div> + <div class="result-shield-container tlid-copy-target"><a href="/ja/docs/Web/API/WebVR_API">WebVR </a><span class="tlid-translation translation"><span title="">コントローラーの場合のコントローラーの姿勢 (3D 空間内の位置と向きなど) を表します。これはより新しい <a href="/ja/docs/Web/API/WebXR_Device_API">WebXR</a> 標準では使用<em>されません。</em></span></span></div> </div> </dd> </dl> -<p><span class="tlid-translation translation"><span title="">上記の情報にアクセスできる機能については、</span></span><a href="/docs/Web/API/Gamepad#Experimental_extensions_to_Gamepad">Gamepad インターフェースの拡張機能</a>を参照してください。</p> +<p><span class="tlid-translation translation"><span title="">上記の情報にアクセスできる機能については、</span></span><a href="/ja/docs/Web/API/Gamepad#Experimental_extensions_to_Gamepad">Gamepad インターフェースの拡張機能</a>を参照してください。</p> <h3 id="他のインターフェースの拡張">他のインターフェースの拡張</h3> @@ -61,8 +61,8 @@ translation_of: Web/API/Gamepad_API <h2 id="Tutorials_and_guides" name="Tutorials_and_guides">チュートリアルとガイド</h2> <ul> - <li><a href="https://developer.mozilla.org/docs/Web/API/Gamepad_API/Using_the_Gamepad_API">Gamepad API の利用</a></li> - <li><a href="/docs/Games/Techniques/Controls_Gamepad_API">Gamepad API を利用したコントロールの実装</a></li> + <li><a href="/ja/docs/Web/API/Gamepad_API/Using_the_Gamepad_API">Gamepad API の利用</a></li> + <li><a href="/ja/docs/Games/Techniques/Controls_Gamepad_API">Gamepad API を利用したコントロールの実装</a></li> </ul> <h2 id="Specifications" name="Specifications">仕様</h2> diff --git a/files/ja/web/api/gamepadbutton/index.html b/files/ja/web/api/gamepadbutton/index.html index e3d77c59c3..4cf39c47bc 100644 --- a/files/ja/web/api/gamepadbutton/index.html +++ b/files/ja/web/api/gamepadbutton/index.html @@ -89,4 +89,4 @@ translation_of: Web/API/GamepadButton <h2 id="関連項目">関連項目</h2> -<p><a href="/docs/Web/Guide/API/Gamepad">Gamepad API の利用</a></p> +<p><a href="/ja/docs/Web/Guide/API/Gamepad">Gamepad API の利用</a></p> diff --git a/files/ja/web/api/gamepadevent/index.html b/files/ja/web/api/gamepadevent/index.html index 7b53c17c45..232f8cd561 100644 --- a/files/ja/web/api/gamepadevent/index.html +++ b/files/ja/web/api/gamepadevent/index.html @@ -67,4 +67,4 @@ translation_of: Web/API/GamepadEvent <h2 id="参照">参照</h2> -<p><a href="/docs/Web/Guide/API/Gamepad">Gamepad API の利用</a></p> +<p><a href="/ja/docs/Web/Guide/API/Gamepad">Gamepad API の利用</a></p> diff --git a/files/ja/web/api/gamepadhapticactuator/index.html b/files/ja/web/api/gamepadhapticactuator/index.html index 5aaf8b9865..ccf96299a3 100644 --- a/files/ja/web/api/gamepadhapticactuator/index.html +++ b/files/ja/web/api/gamepadhapticactuator/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/GamepadHapticActuator --- <div>{{APIRef("Gamepad API")}}{{SeeCompatTable}}</div> -<p><a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a> の <strong><code>GamepadHapticActuator</code></strong> インターフェイスは、ユーザーに触覚フィードバックを提供するように設計されたコントローラー内のハードウェア (可能な場合) を表し、最も一般的には振動ハードウェアです。</p> +<p><a href="/ja/docs/Web/API/Gamepad_API">Gamepad API</a> の <strong><code>GamepadHapticActuator</code></strong> インターフェイスは、ユーザーに触覚フィードバックを提供するように設計されたコントローラー内のハードウェア (可能な場合) を表し、最も一般的には振動ハードウェアです。</p> <p>このインターフェイスには、 {{domxref("Gamepad.hapticActuators")}} プロパティからアクセスできます。</p> @@ -61,5 +61,5 @@ translation_of: Web/API/GamepadHapticActuator <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a></li> + <li><a href="/ja/docs/Web/API/Gamepad_API">Gamepad API</a></li> </ul> diff --git a/files/ja/web/api/gamepadhapticactuator/type/index.html b/files/ja/web/api/gamepadhapticactuator/type/index.html index 4ffc3a23ef..6899a54ce8 100644 --- a/files/ja/web/api/gamepadhapticactuator/type/index.html +++ b/files/ja/web/api/gamepadhapticactuator/type/index.html @@ -56,5 +56,5 @@ translation_of: Web/API/GamepadHapticActuator/type <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a></li> + <li><a href="/ja/docs/Web/API/Gamepad_API">Gamepad API</a></li> </ul> diff --git a/files/ja/web/api/gamepadpose/hasorientation/index.html b/files/ja/web/api/gamepadpose/hasorientation/index.html index 3079ad7eab..9360ec241d 100644 --- a/files/ja/web/api/gamepadpose/hasorientation/index.html +++ b/files/ja/web/api/gamepadpose/hasorientation/index.html @@ -53,6 +53,6 @@ translation_of: Web/API/GamepadPose/hasOrientation <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a></li> - <li><a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a></li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API</a></li> + <li><a href="/ja/docs/Web/API/Gamepad_API">Gamepad API</a></li> </ul> diff --git a/files/ja/web/api/gamepadpose/index.html b/files/ja/web/api/gamepadpose/index.html index 05f7350392..d08cf32c67 100644 --- a/files/ja/web/api/gamepadpose/index.html +++ b/files/ja/web/api/gamepadpose/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/GamepadPose --- <div>{{APIRef("Gamepad API")}}{{SeeCompatTable}}</div> -<p>The <strong><code>GamepadPose</code></strong> interface of the <a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a> represents the pose of a <a href="/en-US/docs/Web/API/WebVR_API">WebVR</a> controller at a given timestamp (which includes orientation, position, velocity, and acceleration information.)</p> +<p>The <strong><code>GamepadPose</code></strong> interface of the <a href="/ja/docs/Web/API/Gamepad_API">Gamepad API</a> represents the pose of a <a href="/ja/docs/Web/API/WebVR_API">WebVR</a> controller at a given timestamp (which includes orientation, position, velocity, and acceleration information.)</p> <p>This interface is accessible through the {{domxref("Gamepad.pose")}} property.</p> @@ -70,6 +70,6 @@ translation_of: Web/API/GamepadPose <h2 id="See_also">See also</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a></li> - <li><a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a></li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API</a></li> + <li><a href="/ja/docs/Web/API/Gamepad_API">Gamepad API</a></li> </ul> diff --git a/files/ja/web/api/geolocation/watchposition/index.html b/files/ja/web/api/geolocation/watchposition/index.html index b3e383cf65..cb7f4b91a4 100644 --- a/files/ja/web/api/geolocation/watchposition/index.html +++ b/files/ja/web/api/geolocation/watchposition/index.html @@ -90,7 +90,7 @@ id = navigator.geolocation.watchPosition(success, error, options); <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/API/Geolocation_API/Using">Geolocation API の使用</a></li> + <li><a href="/ja/docs/Web/API/Geolocation_API/Using">Geolocation API の使用</a></li> <li>所属するインターフェイス {{domxref("Geolocation")}} と、アクセス方法である {{domxref("NavigatorGeolocation.geolocation")}}。</li> <li>逆の操作: {{domxref("Geolocation.clearWatch()")}}</li> <li>類似のメソッド: {{domxref("Geolocation.getCurrentPosition()")}}</li> diff --git a/files/ja/web/api/globaleventhandlers/onclose/index.html b/files/ja/web/api/globaleventhandlers/onclose/index.html index 8c0429e233..3d8a3e6a08 100644 --- a/files/ja/web/api/globaleventhandlers/onclose/index.html +++ b/files/ja/web/api/globaleventhandlers/onclose/index.html @@ -30,7 +30,7 @@ translation_of: Web/API/GlobalEventHandlers/onclose <h3 id="値">値</h3> -<p><code>functionRef</code> は、関数名または<a href="/docs/Web/JavaScript/Reference/Operators/function">関数式</a>です。この関数は、{{domxref("Event")}} オブジェクトを唯一の引数として受け取ります。</p> +<p><code>functionRef</code> は、関数名または<a href="/ja/docs/Web/JavaScript/Reference/Operators/function">関数式</a>です。この関数は、{{domxref("Event")}} オブジェクトを唯一の引数として受け取ります。</p> <p>一度に1つのオブジェクトに割り当てることができる <code>onclose</code> ハンドラーは1つだけです。代わりに、より柔軟性のある {{domxref("EventTarget.addEventListener()")}} メソッドを使用することをお勧めします。</p> diff --git a/files/ja/web/api/globaleventhandlers/onmousedown/index.html b/files/ja/web/api/globaleventhandlers/onmousedown/index.html index ec56405a60..bf143fc699 100644 --- a/files/ja/web/api/globaleventhandlers/onmousedown/index.html +++ b/files/ja/web/api/globaleventhandlers/onmousedown/index.html @@ -28,7 +28,7 @@ translation_of: Web/API/GlobalEventHandlers/onmousedown <h3 id="Value">値</h3> -<p><code>functionRef</code> は、関数名または<a href="/docs/Web/JavaScript/Reference/Operators/function">関数式</a>です。この関数は、唯一の引数として {{domxref("MouseEvent")}} オブジェクトを受け取ります。</p> +<p><code>functionRef</code> は、関数名または<a href="/ja/docs/Web/JavaScript/Reference/Operators/function">関数式</a>です。この関数は、唯一の引数として {{domxref("MouseEvent")}} オブジェクトを受け取ります。</p> <h2 id="Example">例</h2> diff --git a/files/ja/web/api/globaleventhandlers/onmouseenter/index.html b/files/ja/web/api/globaleventhandlers/onmouseenter/index.html index 5e78df7bfe..12014ca918 100644 --- a/files/ja/web/api/globaleventhandlers/onmouseenter/index.html +++ b/files/ja/web/api/globaleventhandlers/onmouseenter/index.html @@ -21,7 +21,7 @@ translation_of: Web/API/GlobalEventHandlers/onmouseenter var <em>handlerFunction</em> = <em><var>element</var></em>.onmouseenter; </pre> -<p><code>handlerFunction</code> は、イベントのハンドラを指定する <code>null</code> または <a href="/docs/Web/JavaScript/Reference/Functions">JavaScript 関数</a> です。</p> +<p><code>handlerFunction</code> は、イベントのハンドラを指定する <code>null</code> または <a href="/ja/docs/Web/JavaScript/Reference/Functions">JavaScript 関数</a> です。</p> <h2 id="仕様">仕様</h2> @@ -50,5 +50,5 @@ var <em>handlerFunction</em> = <em><var>element</var></em>.onmouseenter; <ul> <li>{{event("mouseenter")}}</li> - <li><a href="/docs/Web/Guide/Events/Event_handlers">DOM onevent ハンドラー</a></li> + <li><a href="/ja/docs/Web/Guide/Events/Event_handlers">DOM onevent ハンドラー</a></li> </ul> diff --git a/files/ja/web/api/globaleventhandlers/onmouseleave/index.html b/files/ja/web/api/globaleventhandlers/onmouseleave/index.html index b6065b7161..437744245b 100644 --- a/files/ja/web/api/globaleventhandlers/onmouseleave/index.html +++ b/files/ja/web/api/globaleventhandlers/onmouseleave/index.html @@ -21,7 +21,7 @@ translation_of: Web/API/GlobalEventHandlers/onmouseleave var <em>handlerFunction</em> = <em><var>element</var></em>.onmouseleave; </pre> -<p><code>handlerFunction</code> は、イベントのハンドラを指定する <code>null</code> または <a href="/docs/Web/JavaScript/Reference/Functions">JavaScript 関数 </a> です。</p> +<p><code>handlerFunction</code> は、イベントのハンドラを指定する <code>null</code> または <a href="/ja/docs/Web/JavaScript/Reference/Functions">JavaScript 関数 </a> です。</p> <h2 id="仕様">仕様</h2> @@ -50,5 +50,5 @@ var <em>handlerFunction</em> = <em><var>element</var></em>.onmouseleave; <ul> <li>{{event("mouseleave")}}</li> - <li><a href="/docs/Web/Guide/Events/Event_handlers">DOM onevent ハンドラー</a></li> + <li><a href="/ja/docs/Web/Guide/Events/Event_handlers">DOM onevent ハンドラー</a></li> </ul> diff --git a/files/ja/web/api/globaleventhandlers/onmousemove/index.html b/files/ja/web/api/globaleventhandlers/onmousemove/index.html index 7a3e4a8764..c0fb8001ce 100644 --- a/files/ja/web/api/globaleventhandlers/onmousemove/index.html +++ b/files/ja/web/api/globaleventhandlers/onmousemove/index.html @@ -23,7 +23,7 @@ translation_of: Web/API/GlobalEventHandlers/onmousemove <h3 id="値">値</h3> -<p><code>functionRef</code> は、関数名または<a href="/docs/Web/JavaScript/Reference/Operators/function">関数式</a>です。 この関数は、唯一の引数として {{domxref("MouseEvent")}} オブジェクトを受け取ります。</p> +<p><code>functionRef</code> は、関数名または<a href="/ja/docs/Web/JavaScript/Reference/Operators/function">関数式</a>です。 この関数は、唯一の引数として {{domxref("MouseEvent")}} オブジェクトを受け取ります。</p> <h2 id="例">例</h2> diff --git a/files/ja/web/api/headers/delete/index.html b/files/ja/web/api/headers/delete/index.html index 9f85c85af3..10ff2dc0f3 100644 --- a/files/ja/web/api/headers/delete/index.html +++ b/files/ja/web/api/headers/delete/index.html @@ -81,7 +81,7 @@ myHeaders.get('Content-Type'); // Returns null, as it has been deleted</pre> <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/docs/Web/HTTP">HTTP</a></li> + <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/ja/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> </ul> diff --git a/files/ja/web/api/headers/entries/index.html b/files/ja/web/api/headers/entries/index.html index 1899112dca..244cb3d1ab 100644 --- a/files/ja/web/api/headers/entries/index.html +++ b/files/ja/web/api/headers/entries/index.html @@ -8,7 +8,7 @@ translation_of: Web/API/Headers/entries <p><code><strong>Headers.entries()</strong></code> メソッドは {{jsxref("Iteration_protocols",'iterator')}} を返し、このオブジェクトに含まれるすべてのキーと値のペアを通過できるようにします。各ペアのキーと値は両方とも {{domxref("ByteString")}} オブジェクトです。</p> <div class="注"> -<p><strong>Note</strong>: このメソッドは <a href="/docs/Web/API/Web_Workers_API">Web Workers</a> で使用できます。</p> +<p><strong>Note</strong>: このメソッドは <a href="/ja/docs/Web/API/Web_Workers_API">Web Workers</a> で使用できます。</p> </div> <h2 id="構文">構文</h2> @@ -48,7 +48,7 @@ vary: Accept-Language</pre> <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/docs/Web/HTTP">HTTP</a></li> + <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/ja/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> </ul> diff --git a/files/ja/web/api/headers/get/index.html b/files/ja/web/api/headers/get/index.html index cbb371c5f1..2287e335d6 100644 --- a/files/ja/web/api/headers/get/index.html +++ b/files/ja/web/api/headers/get/index.html @@ -83,7 +83,7 @@ myHeaders.get('Accept-Encoding'); // "deflate,gzip" を返します <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/docs/Web/HTTP">HTTP</a></li> + <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/ja/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> </ul> diff --git a/files/ja/web/api/headers/headers/index.html b/files/ja/web/api/headers/headers/index.html index 4321d44a03..36cb2db4b9 100644 --- a/files/ja/web/api/headers/headers/index.html +++ b/files/ja/web/api/headers/headers/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Headers/Headers <dl> <dt><code>init</code> {{optional_inline}}</dt> - <dd><code>Headers</code> に前もって設定したい <a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a> を含むオブジェクト。これは {{domxref("ByteString")}} を持つ単純なオブジェクトリテラルか、既存の <code>Headers</code> オブジェクトのどちらかです。最後の例では、新しい <code>Headers</code> オブジェクトは既存の <code>Headers</code> オブジェクトからデータを継承します。</dd> + <dd><code>Headers</code> に前もって設定したい <a href="/ja/docs/Web/HTTP/Headers">HTTP headers</a> を含むオブジェクト。これは {{domxref("ByteString")}} を持つ単純なオブジェクトリテラルか、既存の <code>Headers</code> オブジェクトのどちらかです。最後の例では、新しい <code>Headers</code> オブジェクトは既存の <code>Headers</code> オブジェクトからデータを継承します。</dd> </dl> <h2 id="例">例</h2> @@ -65,7 +65,7 @@ secondHeadersObj.get('Content-Type'); // Would return 'image/jpeg' — it inheri <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/docs/Web/API/ServiceWorker_API">サービスワーカー API</a></li> - <li><a href="/docs/Web/HTTP/Access_control_CORS">HTTP アクセス制御 (CORS)</a></li> - <li><a href="/docs/Web/HTTP">HTTP</a></li> + <li><a href="/ja/docs/Web/API/ServiceWorker_API">サービスワーカー API</a></li> + <li><a href="/ja/docs/Web/HTTP/Access_control_CORS">HTTP アクセス制御 (CORS)</a></li> + <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> </ul> diff --git a/files/ja/web/api/history/replacestate/index.html b/files/ja/web/api/history/replacestate/index.html index 0cbcbcb37e..c06e22398e 100644 --- a/files/ja/web/api/history/replacestate/index.html +++ b/files/ja/web/api/history/replacestate/index.html @@ -36,7 +36,7 @@ translation_of: Web/API/History/replaceState <pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">const </span>stateObj <span class="operator token">=</span> <span class="punctuation token">{</span> foo<span class="punctuation token">:</span> '<span class="string token">bar'</span> <span class="punctuation token">}</span><span class="punctuation token">;</span> history<span class="punctuation token">.</span><span class="function token">pushState</span><span class="punctuation token">(</span>stateObj<span class="punctuation token">,</span> <span class="string token">''</span><span class="punctuation token">,</span> '<span class="string token">bar.html'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> -<p>上記の 2行の説明は、「<a href="https://developer.mozilla.org/ja/docs/Web/API/History_API/Working_with_the_History_API">History API を取り扱う</a>」の記事の「<a href="https://developer.mozilla.org/ja/docs/Web/API/History_API/Working_with_the_History_API#pushState_%E3%81%AE%E4%BE%8B"><code>pushState()</code> の例</a>」にあります。次に、https://www.mozilla.org/bar.html が以下の JavaScript を実行したとします:</p> +<p>上記の 2行の説明は、「<a href="/ja/docs/Web/API/History_API/Working_with_the_History_API">History API を取り扱う</a>」の記事の「<a href="/ja/docs/Web/API/History_API/Working_with_the_History_API#pushState_%E3%81%AE%E4%BE%8B"><code>pushState()</code> の例</a>」にあります。次に、https://www.mozilla.org/bar.html が以下の JavaScript を実行したとします:</p> <pre class="brush: js line-numbers language-js notranslate"><code class="language-js">history<span class="punctuation token">.</span><span class="function token">replaceState</span><span class="punctuation token">(</span>stateObj<span class="punctuation token">,</span> <span class="string token">''</span><span class="punctuation token">,</span> '<span class="string token">bar2.html'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> diff --git a/files/ja/web/api/history_api/index.html b/files/ja/web/api/history_api/index.html index e10f1e7498..f9a577390c 100644 --- a/files/ja/web/api/history_api/index.html +++ b/files/ja/web/api/history_api/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/History_API --- <div>{{DefaultAPISidebar("History API")}}</div> -<p>DOM の {{DOMxRef("Window")}} オブジェクトは、ブラウザーのセッション履歴 (<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/history">WebExtensions history</a> と混同しないように) へのアクセスを {{DOMxRef("Window.history","history")}} オブジェクトを介して提供しています。このオブジェクトは、ユーザーの履歴の中を前のページや後のページへ移動したり、履歴スタックの中を操作したりするのに便利なメソッドやプロパティが提供されています。</p> +<p>DOM の {{DOMxRef("Window")}} オブジェクトは、ブラウザーのセッション履歴 (<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/history">WebExtensions history</a> と混同しないように) へのアクセスを {{DOMxRef("Window.history","history")}} オブジェクトを介して提供しています。このオブジェクトは、ユーザーの履歴の中を前のページや後のページへ移動したり、履歴スタックの中を操作したりするのに便利なメソッドやプロパティが提供されています。</p> <h2 id="Concepts_and_usage" name="Concepts_and_usage">概念と使用方法</h2> 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 a2fb053d73..a031ada67c 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 @@ -67,7 +67,7 @@ history.pushState(stateObj, "page 2", "bar.html"); <p>新しい URLが、変更前のURLから hash のみを変更した URL である場合であっても、 <code>pushState()</code> は <code>hashchange</code> イベントを発火させることはないと注記しておきます。</p> -<p>In a <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a> document, it creates the specified XUL element.</p> +<p>In a <a href="/ja/docs/Mozilla/Tech/XUL">XUL</a> document, it creates the specified XUL element.</p> <p>In other documents, it creates an element with a <code>null</code> namespace URI.</p> @@ -86,7 +86,7 @@ history.pushState(stateObj, "page 2", "bar.html"); <pre class="brush: js">var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html");</pre> -<p>この2行のコードの説明は <a href="ja/docs/Web/API/History_API/Working_with_the_History_API$edit#Example_of_pushState_method">pushState()の例 </a><em>のセクションで見ることができます。次に、</em><code>http://mozilla.org/bar.html</code> が次の JavaScript を実行するものとします。</p> +<p>この2行のコードの説明は <a href="/ja/docs/Web/API/History_API/Working_with_the_History_API$edit#Example_of_pushState_method">pushState()の例 </a><em>のセクションで見ることができます。次に、</em><code>http://mozilla.org/bar.html</code> が次の JavaScript を実行するものとします。</p> <pre class="brush: js">history.replaceState(stateObj, "page 3", "bar2.html");</pre> diff --git a/files/ja/web/api/html_drag_and_drop_api/index.html b/files/ja/web/api/html_drag_and_drop_api/index.html index 6f38581411..df4bb50631 100644 --- a/files/ja/web/api/html_drag_and_drop_api/index.html +++ b/files/ja/web/api/html_drag_and_drop_api/index.html @@ -234,7 +234,7 @@ function drop_handler(ev) { <p>詳しくは、以下を参照してください。</p> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Drag_operations#droptargets">ドロップ先の指定</a></li> + <li><a href="/ja/docs/Web/Guide/HTML/Drag_operations#droptargets">ドロップ先の指定</a></li> </ul> <h3 id="ドロップ効果を扱う">ドロップ<em>効果</em>を扱う</h3> @@ -270,7 +270,7 @@ function drop_handler(ev) { <p>詳しくは、以下を参照してください。</p> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Drag_operations#drop">ドロップの実行</a></li> + <li><a href="/ja/docs/Web/Guide/HTML/Drag_operations#drop">ドロップの実行</a></li> </ul> <h3 id="Drag_end" name="Drag_end">ドラッグの終了</h3> diff --git a/files/ja/web/api/html_drag_and_drop_api/recommended_drag_types/index.html b/files/ja/web/api/html_drag_and_drop_api/recommended_drag_types/index.html index ba6fbd27e3..c1e1ea0794 100644 --- a/files/ja/web/api/html_drag_and_drop_api/recommended_drag_types/index.html +++ b/files/ja/web/api/html_drag_and_drop_api/recommended_drag_types/index.html @@ -87,7 +87,7 @@ dt.setData("text/plain", "こんにちは、見知らぬ人"); <h2 id="file" name="file">ファイルのドラッグ</h2> -<p>ローカルのファイルは <code>application/x-moz-file</code> 型で、 <a href="/en/XPCOM_Interface_Reference/nsIFile" title="nsIFile">nsIFile</a> のオブジェクトとしてドラッグされます。特権を持っていない Web ページでは、この型のデータを取得することも変更することもできません。</p> +<p>ローカルのファイルは <code>application/x-moz-file</code> 型で、 <a href="/ja/XPCOM_Interface_Reference/nsIFile" title="nsIFile">nsIFile</a> のオブジェクトとしてドラッグされます。特権を持っていない Web ページでは、この型のデータを取得することも変更することもできません。</p> <p>ファイルを文字列にはできないため、データを登録するには {{domxref("DataTransfer.mozSetDataAt","mozSetDataAt()")}} メソッドを使用する必要があります。同様に、データを取得するには {{domxref("DataTransfer.mozGetDataAt","mozGetDataAt()")}} メソッドを使わなくてはなりません。</p> @@ -124,7 +124,7 @@ function doDrop(event) { <p>最新の仕様では、{{domxref("DataTransfer.types")}} は {{domxref("DOMStringList")}} ではなく、{{domxref("DOMString")}} で固定した配列を返すようになっています（これは Firefox 52 以上でサポートされています）。</p> -<p>その結果、<a href="/docs/Web/API/Node/contains">contains</a> メソッドはもう機能しません。代わりに <a href="/docs/Web/JavaScript/Reference/Global_Objects/Array/includes">includes</a> メソッドを使用し、以下のようなコードで特定の形式のデータが提供されているかどうかを確認する必要があります。</p> +<p>その結果、<a href="/ja/docs/Web/API/Node/contains">contains</a> メソッドはもう機能しません。代わりに <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes">includes</a> メソッドを使用し、以下のようなコードで特定の形式のデータが提供されているかどうかを確認する必要があります。</p> <pre class="brush: js notranslate">if ([...event.dataTransfer.types].includes('text/html')) { // 実行するコード @@ -134,11 +134,11 @@ function doDrop(event) { <h2 id="image" name="image">画像のドラッグ</h2> -<p>画像の直接のドラッグは一般的ではありません。そのため、Mozilla は Mac と Linux での画像の直接のドラッグをサポートしていません。その代わり、画像は通常その URL としてドラッグされます。そのためには、他の URL と同様に <code>text/uri-list</code> 型を使用します。データは、画像の URL、または画像がWeb上やディスク上に無い場合は <a href="/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">データ URL</a> である必要があります。</p> +<p>画像の直接のドラッグは一般的ではありません。そのため、Mozilla は Mac と Linux での画像の直接のドラッグをサポートしていません。その代わり、画像は通常その URL としてドラッグされます。そのためには、他の URL と同様に <code>text/uri-list</code> 型を使用します。データは、画像の URL、または画像がWeb上やディスク上に無い場合は <a href="/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">データ URL</a> である必要があります。</p> -<p>リンクと同様に、<code>text/plain</code> 型のデータには URL も含まれている必要があります。しかし、<a href="/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">データ URL</a> は通常のテキストの内容には有用ではないので、このような状況では <code>text/plain</code> 型のデータを除外した方がよいでしょう。</p> +<p>リンクと同様に、<code>text/plain</code> 型のデータには URL も含まれている必要があります。しかし、<a href="/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">データ URL</a> は通常のテキストの内容には有用ではないので、このような状況では <code>text/plain</code> 型のデータを除外した方がよいでしょう。</p> -<p>Chrome などの特権的なコードでは、画像の種類に応じて、<code>image/jpeg</code>、<code>image/png</code>、<code>image/gif</code> のいずれかの形式を使用することもできます。データは、<a href="/en/XPCOM_Interface_Reference/nsIInputStream" title="nsIInputStream">nsIInputStream</a> インターフェースを実装したオブジェクトでなければなりません。このストリームが読み込まれる時には、そのファイル形式での画像のデータビットを提供しなければなりません。</p> +<p>Chrome などの特権的なコードでは、画像の種類に応じて、<code>image/jpeg</code>、<code>image/png</code>、<code>image/gif</code> のいずれかの形式を使用することもできます。データは、<a href="/ja/XPCOM_Interface_Reference/nsIInputStream" title="nsIInputStream">nsIInputStream</a> インターフェースを実装したオブジェクトでなければなりません。このストリームが読み込まれる時には、そのファイル形式での画像のデータビットを提供しなければなりません。</p> <p>画像がディスク上にある場合は、<code>application/x-moz-file</code> 型も含める必要があります。実際に、これは画像ファイルをドラッグする一般的なやり方です。</p> diff --git a/files/ja/web/api/htmlcanvaselement/todataurl/index.html b/files/ja/web/api/htmlcanvaselement/todataurl/index.html index f955a994a5..f04437dc82 100644 --- a/files/ja/web/api/htmlcanvaselement/todataurl/index.html +++ b/files/ja/web/api/htmlcanvaselement/todataurl/index.html @@ -5,10 +5,10 @@ translation_of: Web/API/HTMLCanvasElement/toDataURL --- <div>{{APIRef("Canvas API")}}</div> -<p><strong><code>HTMLCanvasElement.toDataURL()</code></strong> メソッドは、 <code>type</code> パラメータ（デフォルトは<a href="https://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a>形式）で指定される画像フォーマット形式の <a href="/en-US/docs/Web/HTTP/data_URIs">data URI</a> を返すメソッドです。返り値となる画像の解像度は96 dpiです。</p> +<p><strong><code>HTMLCanvasElement.toDataURL()</code></strong> メソッドは、 <code>type</code> パラメータ（デフォルトは<a href="https://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a>形式）で指定される画像フォーマット形式の <a href="/ja/docs/Web/HTTP/data_URIs">data URI</a> を返すメソッドです。返り値となる画像の解像度は96 dpiです。</p> <ul> - <li>キャンバスの幅か高さが、<code>0</code> もしくは <a href="/en-US/docs/Web/HTML/Element/canvas#Maximum_canvas_size">maximum canvas size</a> より大きい場合、文字列 <code>"data:,"</code>を返します。</li> + <li>キャンバスの幅か高さが、<code>0</code> もしくは <a href="/ja/docs/Web/HTML/Element/canvas#Maximum_canvas_size">maximum canvas size</a> より大きい場合、文字列 <code>"data:,"</code>を返します。</li> <li><code>image/png</code> 形式を指定したにもかかわらず返り値が <code>data:image/png</code> で始まる場合、要求された形式には対応していません。</li> <li>Chrome は <code>image/webp</code> 形式に対応します。</li> </ul> @@ -30,7 +30,7 @@ translation_of: Web/API/HTMLCanvasElement/toDataURL <h3 id="戻り値">戻り値</h3> -<p>要求された<a href="/en-US/docs/Web/HTTP/data_URIs">data URI</a>を含む {{domxref("DOMString")}} 。</p> +<p>要求された<a href="/ja/docs/Web/HTTP/data_URIs">data URI</a>を含む {{domxref("DOMString")}} 。</p> <h3 id="例外">例外</h3> @@ -151,5 +151,5 @@ function removeColors() { <ul> <li>The interface defining it, {{domxref("HTMLCanvasElement")}}.</li> - <li><a href="/en-US/docs/Web/HTTP/data_URIs">Data URIs</a> in the <a href="/en-US/docs/Web/HTTP">HTTP</a> reference.</li> + <li><a href="/ja/docs/Web/HTTP/data_URIs">Data URIs</a> in the <a href="/ja/docs/Web/HTTP">HTTP</a> reference.</li> </ul> diff --git a/files/ja/web/api/htmlcontentelement/index.html b/files/ja/web/api/htmlcontentelement/index.html index 8fd3d16824..dbbe6a69d7 100644 --- a/files/ja/web/api/htmlcontentelement/index.html +++ b/files/ja/web/api/htmlcontentelement/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/HTMLContentElement <p>{{Deprecated_header}}</p> -<p><code><strong>HTMLContentElement</strong></code> インターフェースは {{HTMLElement("content")}} HTML要素を表しており、<a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a> で使用されています。</p> +<p><code><strong>HTMLContentElement</strong></code> インターフェースは {{HTMLElement("content")}} HTML要素を表しており、<a href="/ja/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a> で使用されています。</p> <h2 id="Properties" name="Properties">プロパティ</h2> @@ -47,7 +47,7 @@ translation_of: Web/API/HTMLContentElement <ul> <li>このインターフェースを実装している {{HTMLElement("content")}} HTML 要素</li> - <li><a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a></li> + <li><a href="/ja/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a></li> </ul> <dl> diff --git a/files/ja/web/api/htmlelement/accesskey/index.html b/files/ja/web/api/htmlelement/accesskey/index.html index 17933c4dbe..0d9feb78dd 100644 --- a/files/ja/web/api/htmlelement/accesskey/index.html +++ b/files/ja/web/api/htmlelement/accesskey/index.html @@ -20,5 +20,5 @@ original_slug: Web/API/Element/accessKey <h4 id="See_also">See also </h4> <ul> - <li><a href="/en-US/docs/Web/HTML/Global_attributes/accesskey">HTML Global attributes, accesskey</a></li> + <li><a href="/ja/docs/Web/HTML/Global_attributes/accesskey">HTML Global attributes, accesskey</a></li> </ul> diff --git a/files/ja/web/api/htmlelement/transitionstart_event/index.html b/files/ja/web/api/htmlelement/transitionstart_event/index.html index 12eb281715..d31100a811 100644 --- a/files/ja/web/api/htmlelement/transitionstart_event/index.html +++ b/files/ja/web/api/htmlelement/transitionstart_event/index.html @@ -45,7 +45,7 @@ translation_of: Web/API/HTMLElement/transitionstart_event console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Started transitioning'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> -<p>似ていますが、 <code>addEventListener()</code>の代わりに <code><a href="https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/ontransitionrun">ontransitionstart</a></code> プロパティを使っています:</p> +<p>似ていますが、 <code>addEventListener()</code>の代わりに <code><a href="/ja/docs/Web/API/GlobalEventHandlers/ontransitionrun">ontransitionstart</a></code> プロパティを使っています:</p> <pre class="brush: js line-numbers language-js"><code class="language-js">element<span class="punctuation token">.</span><span class="function function-variable token">ontransitionrun</span> <span class="operator token">=</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">=></span> <span class="punctuation token">{</span> console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Started transitioning'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> diff --git a/files/ja/web/api/htmlformelement/elements/index.html b/files/ja/web/api/htmlformelement/elements/index.html index 9ed8ea236d..a52442f8f5 100644 --- a/files/ja/web/api/htmlformelement/elements/index.html +++ b/files/ja/web/api/htmlformelement/elements/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/HTMLFormElement/elements {{ApiRef()}}</div> <h2 id="Summary" name="Summary">概要</h2> <p><b>elements</b> は、form 要素に含まれるすべてのフォームコントロールを含む <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506"><code>HTMLCollection</code></a> を返します。</p> -<p>index 、または要素の <a href="/ja/docs/DOM/element.name">name</a> か <a href="ja/docs/DOM/element.id">id</a> の何れかを使って個々の要素にアクセスすることができます。</p> +<p>index 、または要素の <a href="/ja/docs/DOM/element.name">name</a> か <a href="/ja/docs/DOM/element.id">id</a> の何れかを使って個々の要素にアクセスすることができます。</p> <h2 id="Syntax" name="Syntax">構文</h2> <pre class="syntaxbox"><code><i>nodeList</i> =<i>HTMLFormElement</i>.elements</code></pre> <h2 id="Example" name="Example">例</h2> diff --git a/files/ja/web/api/htmliframeelement/contentwindow/index.html b/files/ja/web/api/htmliframeelement/contentwindow/index.html index 6385634edc..1b76baba2b 100644 --- a/files/ja/web/api/htmliframeelement/contentwindow/index.html +++ b/files/ja/web/api/htmliframeelement/contentwindow/index.html @@ -5,4 +5,4 @@ translation_of: Web/API/HTMLIFrameElement/contentWindow --- <div>{{APIRef("HTML DOM")}}</div> -<p><span class="seoSummary"><strong><code>contentWindow</code></strong> プロパティは、<a href="/en-US/docs/Web/HTML/Element/iframe"><iframe> 要素</a> の <a href="/en-US/docs/Web/API/Window">Window</a> オブジェクトを返します。この Window オブジェクトを使用して iframe のドキュメントとその内部 DOM にアクセスできます。この属性は読み取り専用ですが、そのプロパティはグローバルな Window オブジェクトのように操作できます。</span></p> +<p><span class="seoSummary"><strong><code>contentWindow</code></strong> プロパティは、<a href="/ja/docs/Web/HTML/Element/iframe"><iframe> 要素</a> の <a href="/ja/docs/Web/API/Window">Window</a> オブジェクトを返します。この Window オブジェクトを使用して iframe のドキュメントとその内部 DOM にアクセスできます。この属性は読み取り専用ですが、そのプロパティはグローバルな Window オブジェクトのように操作できます。</span></p> diff --git a/files/ja/web/api/htmliframeelement/index.html b/files/ja/web/api/htmliframeelement/index.html index ae547880c5..cc0f451541 100644 --- a/files/ja/web/api/htmliframeelement/index.html +++ b/files/ja/web/api/htmliframeelement/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/HTMLIFrameElement <dt>{{domxref("HTMLIFrameElement.align")}} {{obsolete_inline}}</dt> <dd>Is a {{domxref("DOMString")}} that specifies the alignment of the frame with respect to the surrounding context.</dd> <dt>{{domxref("HTMLIFrameElement.allowfullscreen")}} {{experimental_inline}}</dt> - <dd>Is a {{domxref("Boolean")}} that indicates whether or not the inline frame is willing to be placed into full screen mode. See <a href="/en-US/docs/DOM/Using_full-screen_mode" title="https://developer.mozilla.org/en/DOM/Using_full-screen_mode">Using full-screen mode</a> for details.</dd> + <dd>Is a {{domxref("Boolean")}} that indicates whether or not the inline frame is willing to be placed into full screen mode. See <a href="/ja/docs/DOM/Using_full-screen_mode" title="https://developer.mozilla.org/en/DOM/Using_full-screen_mode">Using full-screen mode</a> for details.</dd> <dt>{{domxref("HTMLIFrameElement.contentDocument")}} {{readonlyInline}}</dt> <dd>Returns a {{domxref("Document")}}, the active document in the inline frame's nested browsing context.</dd> <dt>{{domxref("HTMLIFrameElement.contentWindow")}} {{readonlyInline}}</dt> diff --git a/files/ja/web/api/htmlinputelement/multiple/index.html b/files/ja/web/api/htmlinputelement/multiple/index.html index ac49c3954f..8415f39c16 100644 --- a/files/ja/web/api/htmlinputelement/multiple/index.html +++ b/files/ja/web/api/htmlinputelement/multiple/index.html @@ -27,7 +27,7 @@ if (fileInput.multiple == true) { <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/en/DOM/FileList" title="en/DOM/FileList">FileList</a></li> + <li><a href="/ja/DOM/FileList" title="en/DOM/FileList">FileList</a></li> <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=523771">Bug 523771</a> - <span class="bz_default_hidden" id="summary_alias_container" style="display: inline;"> <span id="short_desc_nonedit_display">Support <input type=file multiple></span> </span></li> </ul> diff --git a/files/ja/web/api/htmlkeygenelement/index.html b/files/ja/web/api/htmlkeygenelement/index.html index ba197eb5cb..eb19804f84 100644 --- a/files/ja/web/api/htmlkeygenelement/index.html +++ b/files/ja/web/api/htmlkeygenelement/index.html @@ -32,32 +32,32 @@ translation_of: Web/API/HTMLKeygenElement <tbody> <tr> <td><code>autofocus</code></td> - <td><code><a href="/en/JavaScript/Reference/Global_Objects/Boolean" title="en/JavaScript/Reference/Global Objects/Boolean">Boolean</a></code></td> + <td><code><a href="/ja/JavaScript/Reference/Global_Objects/Boolean" title="en/JavaScript/Reference/Global Objects/Boolean">Boolean</a></code></td> <td>{{ htmlattrxref("autofocus", "keygen") }} HTML 属性の反映です。ページがロードされたとき、フォームコントローが input にフォーカスされているべきことを表します。</td> </tr> <tr> <td><code>challenge</code></td> - <td><code><a href="/En/DOM/DOMString" title="En/DOM/DOMString">DOMString</a></code></td> + <td><code><a href="/ja/DOM/DOMString" title="En/DOM/DOMString">DOMString</a></code></td> <td>{{ htmlattrxref("challenge", "keygen") }} HTML 属性の繁栄です。送信されたキーにパッケージされた challenge 文字列を含みます。</td> </tr> <tr> <td><code>disabled</code></td> - <td><code><a href="/en/JavaScript/Reference/Global_Objects/Boolean" title="en/JavaScript/Reference/Global Objects/Boolean">Boolean</a></code></td> + <td><code><a href="/ja/JavaScript/Reference/Global_Objects/Boolean" title="en/JavaScript/Reference/Global Objects/Boolean">Boolean</a></code></td> <td>{{ htmlattrxref("disabled", "keygen") }} HTML 属性の繁栄です。コントロールが操作できないことを示します。</td> </tr> <tr> <td><code>form</code></td> - <td><code>readonly <a href="/en/DOM/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a></code></td> + <td><code>readonly <a href="/ja/DOM/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a></code></td> <td>コントロールの form オーナーを表します。定義されていた場合、 {{ htmlattrxref("form", "keygen") }} HTML 属性を反映します。</td> </tr> <tr> <td><code>keytype</code></td> - <td><code><a href="/En/DOM/DOMString" title="En/DOM/DOMString">DOMString</a></code></td> + <td><code><a href="/ja/DOM/DOMString" title="En/DOM/DOMString">DOMString</a></code></td> <td>{{ htmlattrxref("keytype", "keygen") }} HTML 属性を反映します。使用されるキーの種類を含みます。</td> </tr> <tr> <td><code>labels </code>{{ unimplemented_inline(556743) }}</td> - <td><code>readonly <a href="/En/DOM/NodeList" title="En/DOM/NodeList">NodeList</a></code></td> + <td><code>readonly <a href="/ja/DOM/NodeList" title="En/DOM/NodeList">NodeList</a></code></td> <td>keygen 要素に関連する label 要素のリストです。</td> </tr> <tr> @@ -67,22 +67,22 @@ translation_of: Web/API/HTMLKeygenElement </tr> <tr> <td><code>type</code></td> - <td><code>readonly </code><code><a href="/En/DOM/DOMString" title="En/DOM/DOMString">DOMString</a></code></td> + <td><code>readonly </code><code><a href="/ja/DOM/DOMString" title="En/DOM/DOMString">DOMString</a></code></td> <td><code>keygen</code> の値です。</td> </tr> <tr> <td><code>validationMessage</code></td> - <td><code>readonly </code><code><a href="/En/DOM/DOMString" title="En/DOM/DOMString">DOMString</a></code></td> + <td><code>readonly </code><code><a href="/ja/DOM/DOMString" title="En/DOM/DOMString">DOMString</a></code></td> <td>（もしあれば） コントロールが満たさない制約検証を表示するためのローカライズされたメッセージです。コントロールが制約検証の対象ではない場合（<strong>willValidate</strong> が false）や制約を満たしている場合、空文字です。</td> </tr> <tr> <td><code>validity</code></td> - <td><code>readonly <a href="/en/DOM/ValidityState_Interface" title="en/DOM/ValidityState Interface">ValidityState</a></code></td> + <td><code>readonly <a href="/ja/DOM/ValidityState_Interface" title="en/DOM/ValidityState Interface">ValidityState</a></code></td> <td>この要素の有効性です。</td> </tr> <tr> <td><code>willValidate</code></td> - <td><code><a href="/en/JavaScript/Reference/Global_Objects/Boolean" title="en/JavaScript/Reference/Global Objects/Boolean">Boolean</a></code></td> + <td><code><a href="/ja/JavaScript/Reference/Global_Objects/Boolean" title="en/JavaScript/Reference/Global Objects/Boolean">Boolean</a></code></td> <td><code>keygen</code> オブジェクトは決して制約検証の候補にならないため、常に false を返します。</td> </tr> </tbody> @@ -101,7 +101,7 @@ translation_of: Web/API/HTMLKeygenElement <tbody> <tr> <td><code>checkValidity()</code></td> - <td><code><a href="/en/JavaScript/Reference/Global_Objects/Boolean" title="en/JavaScript/Reference/Global Objects/Boolean">Boolean</a></code></td> + <td><code><a href="/ja/JavaScript/Reference/Global_Objects/Boolean" title="en/JavaScript/Reference/Global Objects/Boolean">Boolean</a></code></td> <td><code>keygen</code> オブジェクトは決して制約検証の候補にならないため、常に true を返します。</td> </tr> <tr> diff --git a/files/ja/web/api/htmlmediaelement/index.html b/files/ja/web/api/htmlmediaelement/index.html index bfe66b59ff..2096213ce7 100644 --- a/files/ja/web/api/htmlmediaelement/index.html +++ b/files/ja/web/api/htmlmediaelement/index.html @@ -39,7 +39,7 @@ translation_of: Web/API/HTMLMediaElement <dt>{{domxref("HTMLMediaElement.controlsList")}} {{readonlyinline}}</dt> <dd>ユーザーエージェントが独自のコントロールセットを表示するたびに、メディア要素に表示するコントロールをユーザーエージェントが選択するのに役立つ{{domxref("DOMTokenList")}}を返します。 <code>DOMTokenList</code>は、<code>nodownload</code>、<code>nofullscreen</code>、<code>noremoteplayback</code>の3つの値のうち1つ以上を取ります。</dd> <dt>{{domxref("HTMLMediaElement.crossOrigin")}}</dt> - <dd>このメディア要素の <a href="/docs/Web/HTML/CORS_settings_attributes">CORS 設定</a> を {{domxref("DOMString")}} で参照できます。</dd> + <dd>このメディア要素の <a href="/ja/docs/Web/HTML/CORS_settings_attributes">CORS 設定</a> を {{domxref("DOMString")}} で参照できます。</dd> <dt>{{domxref("HTMLMediaElement.currentSrc")}}{{readonlyinline}}</dt> <dd>選択されたメディアリソースの絶対 URL を {{domxref("DOMString")}} で返します。</dd> <dt>{{domxref("HTMLMediaElement.currentTime")}}</dt> @@ -70,7 +70,7 @@ translation_of: Web/API/HTMLMediaElement <dd> <p>Is a <code>unsigned long</code> that indicates the number of samples that will be returned in the framebuffer of each <code>MozAudioAvailable</code> event. This number is a total for all channels, and by default is set to be the number of channels * 1024 (e.g., 2 channels * 1024 samples = 2048 total).</p> - <p>The <code>mozFrameBufferLength</code> property can be set to a new value for lower latency, larger amounts of data, etc. The size given <em>must</em> be a number between 512 and 16384. Using any other size results in an exception being thrown. The best time to set a new length is after the <a href="/en-US/docs/Web/Events/loadedmetadata">loadedmetadata</a> event fires, when the audio info is known, but before the audio has started or <code>MozAudioAvailable</code> events have begun firing.</p> + <p>The <code>mozFrameBufferLength</code> property can be set to a new value for lower latency, larger amounts of data, etc. The size given <em>must</em> be a number between 512 and 16384. Using any other size results in an exception being thrown. The best time to set a new length is after the <a href="/ja/docs/Web/Events/loadedmetadata">loadedmetadata</a> event fires, when the audio info is known, but before the audio has started or <code>MozAudioAvailable</code> events have begun firing.</p> </dd> <dt>{{domxref("HTMLMediaElement.mozSampleRate")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}</dt> <dd>Returns a <code>double</code> representing the number of samples per second that will be played. For example, 44100 samples per second is the sample rate used by CD audio.</dd> @@ -161,7 +161,7 @@ translation_of: Web/API/HTMLMediaElement <dt>{{domxref("HTMLMediaElement.mozCaptureStreamUntilEnded()")}} {{non-standard_inline}}</dt> <dd>[enter description]</dd> <dt>{{domxref("HTMLMediaElement.mozGetMetadata()")}} {{non-standard_inline}}</dt> - <dd>再生中のメディアデータに対するメタデータを {{jsxref('Object')}} として返します。呼び出すたびに、オブジェクトのコピーが新しく作られます。このメソッドを呼び出すには、<a href="/en-US/docs/Web/Events/loadedmetadata">loadedmetadata</a> イベント発火している必要があります。</dd> + <dd>再生中のメディアデータに対するメタデータを {{jsxref('Object')}} として返します。呼び出すたびに、オブジェクトのコピーが新しく作られます。このメソッドを呼び出すには、<a href="/ja/docs/Web/Events/loadedmetadata">loadedmetadata</a> イベント発火している必要があります。</dd> <dt>{{domxref("HTMLMediaElement.pause()")}}</dt> <dd>再生を一時停止します。</dd> <dt>{{domxref("HTMLMediaElement.play()")}}</dt> @@ -185,7 +185,7 @@ translation_of: Web/API/HTMLMediaElement <h2 id="Events" name="Events">イベント</h2> -<p><em>Inherits methods from its parent, {{domxref("HTMLElement")}} </em>, defined in the {{domxref('GlobalEventHandlers')}} mixin. Listen to these events using <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p> +<p><em>Inherits methods from its parent, {{domxref("HTMLElement")}} </em>, defined in the {{domxref('GlobalEventHandlers')}} mixin. Listen to these events using <code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p> <dl> <dt>{{domxref("HTMLMediaElement.abort_event", 'abort')}}</dt> @@ -283,7 +283,7 @@ translation_of: Web/API/HTMLMediaElement </li> <li>記事 <ul> - <li><a class="internal" href="/docs/Using_HTML5_audio_and_video">HTML5 での音声と動画の利用</a></li> + <li><a class="internal" href="/ja/docs/Using_HTML5_audio_and_video">HTML5 での音声と動画の利用</a></li> <li><a class="internal" href="/ja/docs/Media_formats_supported_by_the_audio_and_video_elements">audio 要素と video 要素が対応しているメディア形式</a></li> <li><a href="/ja/docs/Web_Audio_API">Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/htmlolistelement/index.html b/files/ja/web/api/htmlolistelement/index.html index c3e48c8502..d8f6f326e6 100644 --- a/files/ja/web/api/htmlolistelement/index.html +++ b/files/ja/web/api/htmlolistelement/index.html @@ -12,13 +12,13 @@ translation_of: Web/API/HTMLOListElement <div>{{ APIRef("HTML DOM") }}</div> </div> -<p><strong><code>HTMLOListElement</code></strong> インターフェイスは インターフェイスは、 (<a href="https://developer.mozilla.org/ja/docs/Web/API/HTMLElement"><code>HTMLElement</code></a> から継承したものより詳細に) <a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/ol" title="HTML の <button> 要素はクリックできるボタンを表し、フォームや、文書で単純なボタン機能が必要なあらゆる場所で使用することができます。"><code><ol></code></a> 要素を操作するためのプロパティやメソッドを提供します。</p> +<p><strong><code>HTMLOListElement</code></strong> インターフェイスは インターフェイスは、 (<a href="/ja/docs/Web/API/HTMLElement"><code>HTMLElement</code></a> から継承したものより詳細に) <a href="/ja/docs/Web/HTML/Element/ol" title="HTML の <button> 要素はクリックできるボタンを表し、フォームや、文書で単純なボタン機能が必要なあらゆる場所で使用することができます。"><code><ol></code></a> 要素を操作するためのプロパティやメソッドを提供します。</p> <p>{{InheritanceDiagram(600, 120)}}</p> <h2 id="Properties">Properties</h2> -<p><em>親である <a href="https://developer.mozilla.org/ja/docs/Web/API/HTMLElement"><code>HTMLElement</code></a> からプロパティを継承しています。</em></p> +<p><em>親である <a href="/ja/docs/Web/API/HTMLElement"><code>HTMLElement</code></a> からプロパティを継承しています。</em></p> <dl> <dt>{{domxref("HTMLOListElement.reversed")}}</dt> diff --git a/files/ja/web/api/htmlscriptelement/index.html b/files/ja/web/api/htmlscriptelement/index.html index 738703ba6d..f7ace89728 100644 --- a/files/ja/web/api/htmlscriptelement/index.html +++ b/files/ja/web/api/htmlscriptelement/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/HTMLScriptElement --- <p>{{ApiRef}}</p> -<p>DOMの <code>Script</code>オブジェクトは<a class="external" href="http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#the-script-element">HTMLScriptElement</a> (または {{ HTMLVersionInline(4) }} <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-81598695"><code>HTMLScriptElement</code></a>)インターフェイスに具現化されます．それは通常の<a href="/en-US/docs/DOM/element" rel="internal">element</a>オブジェクトインターフェイスに加えて(継承によって利用可能)，{{ HTMLElement("script") }} 要素のレイアウトおよび表現を扱う特別なプロパティとメソッドを提供します．</p> +<p>DOMの <code>Script</code>オブジェクトは<a class="external" href="http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#the-script-element">HTMLScriptElement</a> (または {{ HTMLVersionInline(4) }} <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-81598695"><code>HTMLScriptElement</code></a>)インターフェイスに具現化されます．それは通常の<a href="/ja/docs/DOM/element" rel="internal">element</a>オブジェクトインターフェイスに加えて(継承によって利用可能)，{{ HTMLElement("script") }} 要素のレイアウトおよび表現を扱う特別なプロパティとメソッドを提供します．</p> <h2 id="Properties" name="Properties">プロパティ</h2> @@ -49,11 +49,11 @@ translation_of: Web/API/HTMLScriptElement <td><code id="async_property">async</code></td> <td>{{domxref("Boolean")}}</td> <td rowspan="2"> - <p><code>async</code>と<code>defer</code>属性は<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">boolean</a>属性です．スクリプトがどのように実行されるべきかを示します． <strong><code>defer</code> および <code>async</code> 属性は</strong><strong><code>，src</code> </strong><strong>属性が無ければ指定してはならない．</strong></p> + <p><code>async</code>と<code>defer</code>属性は<a href="/ja/docs/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">boolean</a>属性です．スクリプトがどのように実行されるべきかを示します． <strong><code>defer</code> および <code>async</code> 属性は</strong><strong><code>，src</code> </strong><strong>属性が無ければ指定してはならない．</strong></p> <p>これら2つの属性値を用いて選択可能な3つのモードがあります．<code>async</code>属性があれば，スクリプトは可能な限り非同期的に実行されます．<code>async</code>属性が無く<code>defer</code>属性があれば. スクリプトはページのパースが完了した時点で実行されます．両方の属性があれば，スクリプトはユーザーエージェントによるページのパース完了を待つこと無く，フェッチ後，直ちに実行されます．</p> - <div class="note"><strong>注記:</strong> これらの属性の正確な処理の詳細は，大部分が歴史的な理由により，幾分複雑でHTMLの様々な局面に関連しています．従って，実装の要件は，仕様の至る所に散らばっている必要性によります．<a href="http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#prepare-a-script" title="http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#prepare-a-script">These algorithms</a> describe the core of this processing, but these algorithms reference and are referenced by the parsing rules for {{ HTMLElement("script") }} <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#scriptTag" title="http://www.w3.org/html/wg/drafts/html/master/syntax.html#scriptTag">start</a> and <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#scriptEndTag" title="http://www.w3.org/html/wg/drafts/html/master/syntax.html#scriptEndTag">end</a> tags in HTML, <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#scriptForeignEndTag">in foreign content</a>, and <a href="http://www.w3.org/html/wg/drafts/html/master/the-xhtml-syntax.html#scriptTagXML">in XML</a>, the rules for the <a href="/en-US/docs/DOM/document.write" title="/en-US/docs/DOM/document.write"><code>document.write()</code></a> method, the handling of <a href="http://www.w3.org/html/wg/drafts/html/master/webappapis.html#scripting">scripting</a>, etc.</div> + <div class="note"><strong>注記:</strong> これらの属性の正確な処理の詳細は，大部分が歴史的な理由により，幾分複雑でHTMLの様々な局面に関連しています．従って，実装の要件は，仕様の至る所に散らばっている必要性によります．<a href="http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#prepare-a-script" title="http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#prepare-a-script">These algorithms</a> describe the core of this processing, but these algorithms reference and are referenced by the parsing rules for {{ HTMLElement("script") }} <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#scriptTag" title="http://www.w3.org/html/wg/drafts/html/master/syntax.html#scriptTag">start</a> and <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#scriptEndTag" title="http://www.w3.org/html/wg/drafts/html/master/syntax.html#scriptEndTag">end</a> tags in HTML, <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#scriptForeignEndTag">in foreign content</a>, and <a href="http://www.w3.org/html/wg/drafts/html/master/the-xhtml-syntax.html#scriptTagXML">in XML</a>, the rules for the <a href="/ja/docs/DOM/document.write" title="/en-US/docs/DOM/document.write"><code>document.write()</code></a> method, the handling of <a href="http://www.w3.org/html/wg/drafts/html/master/webappapis.html#scripting">scripting</a>, etc.</div> <p>The <code>defer</code> attribute may be specified even if the <code>async</code> attribute is specified, to cause legacy Web browsers that only support <code>defer</code> (and not <code>async</code>) to fall back to the <code>defer</code> behavior instead of the synchronous blocking behavior that is the default.</p> </td> @@ -65,15 +65,15 @@ translation_of: Web/API/HTMLScriptElement <tr> <td><code id="crossOrigin_property">crossOrigin</code> {{experimental_inline}}</td> <td>{{domxref("DOMString")}}</td> - <td>Is a {{domxref("DOMString")}} that corresponds to the CORS setting for this script element. See <a href="/en-US/docs/HTML/CORS_settings_attributes" title="HTML/CORS settings attributes">CORS settings attributes</a> for details. It controls, for scripts that are obtained from other <a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#origin-0">origins</a>, whether error information will be exposed.</td> + <td>Is a {{domxref("DOMString")}} that corresponds to the CORS setting for this script element. See <a href="/ja/docs/HTML/CORS_settings_attributes" title="HTML/CORS settings attributes">CORS settings attributes</a> for details. It controls, for scripts that are obtained from other <a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#origin-0">origins</a>, whether error information will be exposed.</td> </tr> <tr> <td><code id="text_property">text</code></td> <td>{{domxref("DOMString")}}</td> <td> - <p>IDLの<code>text</code>属性は，すべてのテキストノード(<a href="/en-US/docs/DOM/Text" title="/en-US/docs/DOM/Text"><code>Text</code> nodes</a>)内容の連結を返さなければなりません．(コメントや要素のような他のノードを無視すれば)テキストノードは，木構造(tree)上の順序でscript要素の子要素です．設定上，これはIDLの<a href="/en-US/docs/DOM/Node.textContent" title="/en-US/docs/DOM/Node.textContent"><code>textContent</code></a>属性と同様に機能せねばなりません．</p> + <p>IDLの<code>text</code>属性は，すべてのテキストノード(<a href="/ja/docs/DOM/Text" title="/en-US/docs/DOM/Text"><code>Text</code> nodes</a>)内容の連結を返さなければなりません．(コメントや要素のような他のノードを無視すれば)テキストノードは，木構造(tree)上の順序でscript要素の子要素です．設定上，これはIDLの<a href="/ja/docs/DOM/Node.textContent" title="/en-US/docs/DOM/Node.textContent"><code>textContent</code></a>属性と同様に機能せねばなりません．</p> - <p><strong>注記:</strong> <a href="/en-US/docs/DOM/document.write" title="/en-US/docs/DOM/document.write"><code>document.write()</code></a> メソッドを用いて, {{HTMLElement("script") }} 要素を挿入した時，実行されます(典型的には同期的に)．しかし, <a href="/en-US/docs/DOM/element.innerHTML" title="/en-US/docs/DOM/element.innerHTML"><code>innerHTML</code></a> and <a href="/en-US/docs/DOM/element.outerHTML" title="/en-US/docs/DOM/element.outerHTML"><code>outerHTML</code></a> 属性を用いて挿入した場合,結局何も実行されません．</p> + <p><strong>注記:</strong> <a href="/ja/docs/DOM/document.write" title="/en-US/docs/DOM/document.write"><code>document.write()</code></a> メソッドを用いて, {{HTMLElement("script") }} 要素を挿入した時，実行されます(典型的には同期的に)．しかし, <a href="/ja/docs/DOM/element.innerHTML" title="/en-US/docs/DOM/element.innerHTML"><code>innerHTML</code></a> and <a href="/ja/docs/DOM/element.outerHTML" title="/en-US/docs/DOM/element.outerHTML"><code>outerHTML</code></a> 属性を用いて挿入した場合,結局何も実行されません．</p> </td> </tr> </tbody> @@ -170,6 +170,6 @@ alert("You read this alert because the script \"myScript2.js\" has been correctl <li>HTML {{ HTMLElement("script") }} element</li> <li>HTML {{ HTMLElement("noscript") }} element</li> <li>{{domxref("document.currentScript")}}</li> - <li><a href="/en-US/docs/DOM/Using_web_workers" title="/en-US/docs/DOM/Using_web_workers">Web Workers</a> (code snippets similar to scripts but executed in <a href="/en-US/docs/JavaScript/DedicatedWorkerGlobalScope" title="/en-US/docs/JavaScript/DedicatedWorkerGlobalScope">another global context</a>)</li> + <li><a href="/ja/docs/DOM/Using_web_workers" title="/en-US/docs/DOM/Using_web_workers">Web Workers</a> (code snippets similar to scripts but executed in <a href="/ja/docs/JavaScript/DedicatedWorkerGlobalScope" title="/en-US/docs/JavaScript/DedicatedWorkerGlobalScope">another global context</a>)</li> <li><a href="http://pieisgood.org/test/script-link-events/">Ryan Grove's <script> and <link> node event compatibility chart</a></li> </ul> diff --git a/files/ja/web/api/htmlslotelement/index.html b/files/ja/web/api/htmlslotelement/index.html index 99c3e82aae..9cd32b0ce9 100644 --- a/files/ja/web/api/htmlslotelement/index.html +++ b/files/ja/web/api/htmlslotelement/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/HTMLSlotElement --- <p>{{APIRef('Web Components')}}</p> -<p><strong><code>HTMLSlotElement</code></strong> は <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM API</a> のインターフェイスで、 {{HTMLElement("slot")}} 要素の名前とこの要素に割り当てられたノードにアクセスできます。</p> +<p><strong><code>HTMLSlotElement</code></strong> は <a href="/ja/docs/Web/Web_Components/Shadow_DOM">Shadow DOM API</a> のインターフェイスで、 {{HTMLElement("slot")}} 要素の名前とこの要素に割り当てられたノードにアクセスできます。</p> <h2 id="Properties" name="Properties">プロパティ</h2> diff --git a/files/ja/web/api/htmltablerowelement/index.html b/files/ja/web/api/htmltablerowelement/index.html index 9447db268f..5b5ad3d741 100644 --- a/files/ja/web/api/htmltablerowelement/index.html +++ b/files/ja/web/api/htmltablerowelement/index.html @@ -40,7 +40,7 @@ translation_of: Web/API/HTMLTableRowElement <dt>{{domxref("HTMLTableRowElement.deleteCell()")}}</dt> <dd>Removes the cell at the given position in the row. If the given position is greater (or equal as it starts at zero) than the amount of cells in the row, or is smaller than <code>0</code>, it raises a {{domxref("DOMException")}} with the <code>IndexSizeError</code> value.</dd> <dt>{{domxref("HTMLTableRowElement.insertCell()")}}</dt> - <dd>Inserts a new cell just before the given position in the row. If the given position is not given or is <code>-1</code>, it appends the cell to the row. If the given position is greater (or equal as it starts at zero) than the amount of cells in the row, or is smaller than <code>-1</code>, it raises a {{domxref("DOMException")}} with the <code>IndexSizeError</code> value. Returns a reference to a <a href="/en-US/docs/Web/API/HTMLTableCellElement">HTMLTableCellElement [en-US]</a>.</dd> + <dd>Inserts a new cell just before the given position in the row. If the given position is not given or is <code>-1</code>, it appends the cell to the row. If the given position is greater (or equal as it starts at zero) than the amount of cells in the row, or is smaller than <code>-1</code>, it raises a {{domxref("DOMException")}} with the <code>IndexSizeError</code> value. Returns a reference to a <a href="/ja/docs/Web/API/HTMLTableCellElement">HTMLTableCellElement [en-US]</a>.</dd> </dl> <h2 id="Specifications">Specifications</h2> diff --git a/files/ja/web/api/idbcursor/continue/index.html b/files/ja/web/api/idbcursor/continue/index.html index 3d4c370cfc..49ec443598 100644 --- a/files/ja/web/api/idbcursor/continue/index.html +++ b/files/ja/web/api/idbcursor/continue/index.html @@ -117,7 +117,7 @@ translation_of: Web/API/IDBCursor/continue <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li> + <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li> <li>トランザクションの開始: {{domxref("IDBDatabase")}}</li> <li>トランザクションを使う: {{domxref("IDBTransaction")}}</li> <li>キーの範囲設定: {{domxref("IDBKeyRange")}}</li> diff --git a/files/ja/web/api/idbcursor/index.html b/files/ja/web/api/idbcursor/index.html index 7b024be836..2c2ea95bcd 100644 --- a/files/ja/web/api/idbcursor/index.html +++ b/files/ja/web/api/idbcursor/index.html @@ -29,7 +29,7 @@ translation_of: Web/API/IDBCursor <dt>{{domxref("IDBCursor.source")}} {{readonlyInline}}</dt> <dd>カーソルが繰り返している{{domxref("IDBObjectStore")}} か {{domxref("IDBIndex")}} を返します。この関数は、カーソルが現在繰り返されていたり、繰り返しが終わりを過ぎたり、トランザクションがアクティブでなくても、null や例外を返しません。</dd> <dt>{{domxref("IDBCursor.direction")}} {{readonlyInline}}</dt> - <dd>カーソルの横断の向きを返します。取りうる値については <a href="https://developer.mozilla.org/ja/docs/Web/API/IDBCursor$edit#const_next">Constants</a> を見てください。</dd> + <dd>カーソルの横断の向きを返します。取りうる値については <a href="/ja/docs/Web/API/IDBCursor$edit#const_next">Constants</a> を見てください。</dd> <dt>{{domxref("IDBCursor.key")}} {{readonlyInline}}</dt> <dd>カーソル位置のレコードのキーを返します。カーソルが範囲外の場合、<code>undefined</code> にセットされます。カーソルキーはあらゆるデータ型となりえます。</dd> <dt>{{domxref("IDBCursor.value")}} {{readonlyInline}}</dt> diff --git a/files/ja/web/api/idbdatabase/close/index.html b/files/ja/web/api/idbdatabase/close/index.html index 48ee4b0b1d..41bf99de51 100644 --- a/files/ja/web/api/idbdatabase/close/index.html +++ b/files/ja/web/api/idbdatabase/close/index.html @@ -71,7 +71,7 @@ translation_of: Web/API/IDBDatabase/close <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li> + <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li> <li>Starting transactions: {{domxref("IDBDatabase")}}</li> <li>Using transactions: {{domxref("IDBTransaction")}}</li> <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li> diff --git a/files/ja/web/api/idbdatabase/createobjectstore/index.html b/files/ja/web/api/idbdatabase/createobjectstore/index.html index b925238a72..d70c03b9f6 100644 --- a/files/ja/web/api/idbdatabase/createobjectstore/index.html +++ b/files/ja/web/api/idbdatabase/createobjectstore/index.html @@ -112,11 +112,11 @@ translation_of: Web/API/IDBDatabase/createObjectStore <tbody> <tr> <td><code>keyPath</code></td> - <td>新しいオブジェクトストアで使用される<a href="/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_keypath">key path</a>。空や特定されていない場合、オブジェクトストアはKey Pathなしで生成されて、<a href="/en-US/docs/IndexedDB#gloss_out-of-line_key">out-of-line keys</a>が使用される。</td> + <td>新しいオブジェクトストアで使用される<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_keypath">key path</a>。空や特定されていない場合、オブジェクトストアはKey Pathなしで生成されて、<a href="/ja/docs/IndexedDB#gloss_out-of-line_key">out-of-line keys</a>が使用される。</td> </tr> <tr> <td><code>autoIncrement</code></td> - <td><code>trueだった場合、オブジェクトストアは</code><a href="/en-US/docs/IndexedDB#gloss_key_generator">key generator</a>を持つ。既定値は<code>false。</code></td> + <td><code>trueだった場合、オブジェクトストアは</code><a href="/ja/docs/IndexedDB#gloss_key_generator">key generator</a>を持つ。既定値は<code>false。</code></td> </tr> </tbody> </table> @@ -149,7 +149,7 @@ translation_of: Web/API/IDBDatabase/createObjectStore <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li> + <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li> <li>Starting transactions: {{domxref("IDBDatabase")}}</li> <li>Using transactions: {{domxref("IDBTransaction")}}</li> <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li> diff --git a/files/ja/web/api/idbdatabase/index.html b/files/ja/web/api/idbdatabase/index.html index 4b71231d6b..45333d5080 100644 --- a/files/ja/web/api/idbdatabase/index.html +++ b/files/ja/web/api/idbdatabase/index.html @@ -15,10 +15,10 @@ translation_of: Web/API/IDBDatabase <p>IndexedDB API<code>のIDBDatabase</code>インターフェイスは、<a href="/ja/docs/IndexedDB#database_connection">データベースへの接続</a>を提供します。 <code>IDBDatabase</code>オブジェクトで、データベースの<a href="/ja/docs/IndexedDB#gloss_transaction">transaction</a>を開き、データベースのオブジェクト（データ）を生成したり、操作したり、削除したりできます。このインターフェイスはデータベースのバージョンを取得したり、統合したりする唯一の方法を提供します。</p> </div> <div class="note"> - <p><strong>Note</strong>: Everything you do in IndexedDB always happens in the context of a <a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_transaction">transaction</a>, representing interactions with data in the database. All objects in IndexedDB — including object stores, indexes, and cursors — are tied to a particular transaction. Thus, you cannot execute commands, access data, or open anything outside of a transaction.</p> + <p><strong>Note</strong>: Everything you do in IndexedDB always happens in the context of a <a href="/ja/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_transaction">transaction</a>, representing interactions with data in the database. All objects in IndexedDB — including object stores, indexes, and cursors — are tied to a particular transaction. Thus, you cannot execute commands, access data, or open anything outside of a transaction.</p> </div> <h2 id="メソッド">メソッド</h2> -<p>Inherits from: <a href="/en-US/docs/DOM/EventTarget">EventTarget</a></p> +<p>Inherits from: <a href="/ja/docs/DOM/EventTarget">EventTarget</a></p> <dl> <dt> {{domxref("IDBDatabase.close")}}</dt> @@ -46,11 +46,11 @@ translation_of: Web/API/IDBDatabase <dt> {{domxref("IDBDatabase.version")}} {{readonlyInline}}</dt> <dd> - 接続しているデータベースのバージョンを含む<a href="/en-US/docs/NSPR_API_Reference/Long_Long_(64-bit)_Integers">64-bit integer</a>。データベースが初めて作られた場合、この属性は空文字である。</dd> + 接続しているデータベースのバージョンを含む<a href="/ja/docs/NSPR_API_Reference/Long_Long_(64-bit)_Integers">64-bit integer</a>。データベースが初めて作られた場合、この属性は空文字である。</dd> <dt> {{domxref("IDBDatabase.objectStoreNames")}} {{readonlyInline}}</dt> <dd> - 接続しているデータベースの<a href="/en-US/docs/IndexedDB#gloss_object_store">object stores</a>名のリストを含む{{ domxref("DOMStringList") }} 。</dd> + 接続しているデータベースの<a href="/ja/docs/IndexedDB#gloss_object_store">object stores</a>名のリストを含む{{ domxref("DOMStringList") }} 。</dd> </dl> <h3 id="イベントハンドラ">イベントハンドラ</h3> <dl> @@ -138,7 +138,7 @@ translation_of: Web/API/IDBDatabase <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li> + <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li> <li>Starting transactions: {{domxref("IDBDatabase")}}</li> <li>Using transactions: {{domxref("IDBTransaction")}}</li> <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li> diff --git a/files/ja/web/api/idbdatabase/name/index.html b/files/ja/web/api/idbdatabase/name/index.html index 6f336b0418..676a72d062 100644 --- a/files/ja/web/api/idbdatabase/name/index.html +++ b/files/ja/web/api/idbdatabase/name/index.html @@ -58,7 +58,7 @@ DBOpenRequest.onsuccess = function(event) { <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li> + <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li> <li>Starting transactions: {{domxref("IDBDatabase")}}</li> <li>Using transactions: {{domxref("IDBTransaction")}}</li> <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li> diff --git a/files/ja/web/api/idbdatabase/objectstorenames/index.html b/files/ja/web/api/idbdatabase/objectstorenames/index.html index 15dc43dddc..e0836a79b9 100644 --- a/files/ja/web/api/idbdatabase/objectstorenames/index.html +++ b/files/ja/web/api/idbdatabase/objectstorenames/index.html @@ -12,12 +12,12 @@ translation_of: Web/API/IDBDatabase/objectStoreNames --- <p>{{ APIRef("IDBDatabase") }}</p> <div> - <p>{{domxref("IDBDatabase")}}インターフェイスの<code>objectStoreNames</code>プロパティは、現在接続しているデータベースの<a href="https://developer.mozilla.org/en-US/docs/IndexedDB#gloss_object_store">object stores</a>名のリストを含む{{ domxref("DOMStringList") }}です。</p> + <p>{{domxref("IDBDatabase")}}インターフェイスの<code>objectStoreNames</code>プロパティは、現在接続しているデータベースの<a href="/ja/docs/IndexedDB#gloss_object_store">object stores</a>名のリストを含む{{ domxref("DOMStringList") }}です。</p> </div> <h2 id="構文">構文</h2> <pre class="brush: js">db.objectStoreNames</pre> <h3 id="値">値</h3> -<p>現在接続しているデータベースの<a href="https://developer.mozilla.org/en-US/docs/IndexedDB#gloss_object_store">object stores</a>名のリストを含む{{ domxref("DOMStringList") }}。</p> +<p>現在接続しているデータベースの<a href="/ja/docs/IndexedDB#gloss_object_store">object stores</a>名のリストを含む{{ domxref("DOMStringList") }}。</p> <h2 id="例"><span style="line-height: 1.5;">例</span></h2> <pre class="brush: js;highlight:[17]">// Let us open our database var DBOpenRequest = window.indexedDB.open("toDoList", 4); @@ -58,7 +58,7 @@ DBOpenRequest.onsuccess = function(event) { <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li> + <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li> <li>Starting transactions: {{domxref("IDBDatabase")}}</li> <li>Using transactions: {{domxref("IDBTransaction")}}</li> <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li> diff --git a/files/ja/web/api/idbdatabase/version/index.html b/files/ja/web/api/idbdatabase/version/index.html index f8ad9225b1..9f88859923 100644 --- a/files/ja/web/api/idbdatabase/version/index.html +++ b/files/ja/web/api/idbdatabase/version/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/IDBDatabase/version --- <p>{{ APIRef("IDBDatabase") }}</p> <div> - <p><code>{{domxref("IDBDatabase")}}インターフェイスのversion</code>プロパティ は、接続しているデータベースのバージョンを含む<a href="https://developer.mozilla.org/en-US/docs/NSPR_API_Reference/Long_Long_%2864-bit%29_Integers">64-bit integer</a>です。データベースを初めて生成した時、この属性は空文字です。</p> + <p><code>{{domxref("IDBDatabase")}}インターフェイスのversion</code>プロパティ は、接続しているデータベースのバージョンを含む<a href="/ja/docs/NSPR_API_Reference/Long_Long_%2864-bit%29_Integers">64-bit integer</a>です。データベースを初めて生成した時、この属性は空文字です。</p> </div> <h2 id="構文">構文</h2> <pre class="brush: js">db.version</pre> @@ -57,7 +57,7 @@ DBOpenRequest.onsuccess = function(event) { <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li> + <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li> <li>Starting transactions: {{domxref("IDBDatabase")}}</li> <li>Using transactions: {{domxref("IDBTransaction")}}</li> <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li> diff --git a/files/ja/web/api/idbenvironment/index.html b/files/ja/web/api/idbenvironment/index.html index 1368ffa401..4317d287c5 100644 --- a/files/ja/web/api/idbenvironment/index.html +++ b/files/ja/web/api/idbenvironment/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/IDBEnvironment <p><strong>Important</strong>: As of Firefox 52, the property defined in this mixin has been moved to the {{domxref("WindowOrWorkerGlobalScope")}} mixin, and other browsers will follow suit. Look to that page for up-to-date details.</p> </div> -<p><a href="https://developer.mozilla.org/en-US/docs/IndexedDB">IndexedDB API</a> の <strong><code>IDBEnvironment</code></strong> インタフェースには、IndexedDB の機能へアクセスするための <code>indexedDB</code> プロパティがあります。これは、{{domxref("window")}} と {{domxref("Worker")}}オブジェクトによって実装された、最上位の IndexedDB インタフェースです。</p> +<p><a href="/ja/docs/IndexedDB">IndexedDB API</a> の <strong><code>IDBEnvironment</code></strong> インタフェースには、IndexedDB の機能へアクセスするための <code>indexedDB</code> プロパティがあります。これは、{{domxref("window")}} と {{domxref("Worker")}}オブジェクトによって実装された、最上位の IndexedDB インタフェースです。</p> <p>{{AvailableInWorkers}}</p> @@ -64,7 +64,7 @@ function openDB() { <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">IndexedDBの使用</a></li> + <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">IndexedDBの使用</a></li> <li>トランザクションの開始: {{domxref("IDBDatabase")}}</li> <li>トランザクションの使用: {{domxref("IDBTransaction")}}</li> <li>キーの範囲の設定: {{domxref("IDBKeyRange")}}</li> diff --git a/files/ja/web/api/idbfactory/cmp/index.html b/files/ja/web/api/idbfactory/cmp/index.html index bfaafd5692..909d864605 100644 --- a/files/ja/web/api/idbfactory/cmp/index.html +++ b/files/ja/web/api/idbfactory/cmp/index.html @@ -50,7 +50,7 @@ translation_of: Web/API/IDBFactory/cmp <th scope="col">説明</th> </tr> <tr> - <td><a href="/en-US/docs/DOM/DOMError"><code>DataError</code></a></td> + <td><a href="/ja/docs/DOM/DOMError"><code>DataError</code></a></td> <td>渡されたキーが不正な値である。</td> </tr> </thead> @@ -92,7 +92,7 @@ console.log( "Comparison results: " + result );</pre> <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li> + <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li> <li>Starting transactions: {{domxref("IDBDatabase")}}</li> <li>Using transactions: {{domxref("IDBTransaction")}}</li> <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li> diff --git a/files/ja/web/api/idbfactory/deletedatabase/index.html b/files/ja/web/api/idbfactory/deletedatabase/index.html index 44e8049545..1d92d1476a 100644 --- a/files/ja/web/api/idbfactory/deletedatabase/index.html +++ b/files/ja/web/api/idbfactory/deletedatabase/index.html @@ -43,7 +43,7 @@ DBDeleteRequest.onsuccess = function(event) { <dt> options {{ NonStandardBadge() }}</dt> <dd> - Geckoの<a href="/en-US/Firefox/Releases/26">version 26</a>から、永続的な（既定値）IndexedDBまたは、一時的なストレージ（shared pool）を削除するための、標準化されていないオプションのストレージパラメーターを含めることができます。</dd> + Geckoの<a href="/ja/Firefox/Releases/26">version 26</a>から、永続的な（既定値）IndexedDBまたは、一時的なストレージ（shared pool）を削除するための、標準化されていないオプションのストレージパラメーターを含めることができます。</dd> </dl> <div class="note"> <p><strong>Note</strong>: Data in temporary storage persists until the global limit for the pool is reached. The global limit calculation is relatively complex, but we are considering changing it (see {{ Bug("968272") }}). When the global limit is reached, then data for the least recently used origin is deleted. There's also a group limit (eTLD+1 group/domain) which is currently 20% of the global limit. All requests that would exceed the group limit are just rejected.</p> @@ -69,7 +69,7 @@ DBDeleteRequest.onsuccess = function(event) { <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li> + <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li> <li>Starting transactions: {{domxref("IDBDatabase")}}</li> <li>Using transactions: {{domxref("IDBTransaction")}}</li> <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li> diff --git a/files/ja/web/api/idbfactory/index.html b/files/ja/web/api/idbfactory/index.html index 70948758b4..c04b6eea90 100644 --- a/files/ja/web/api/idbfactory/index.html +++ b/files/ja/web/api/idbfactory/index.html @@ -23,7 +23,7 @@ translation_of: Web/API/IDBFactory <dl> <dt>{{domxref("IDBFactory.open")}}</dt> - <dd><a href="/docs/IndexedDB#gloss_database_connection">データベースへの接続</a>を開く要求をする現在のメソッドです。</dd> + <dd><a href="/ja/docs/IndexedDB#gloss_database_connection">データベースへの接続</a>を開く要求をする現在のメソッドです。</dd> <dt>{{domxref("IDBFactory.deleteDatabase")}}</dt> <dd>データベースの削除を要求するメソッドです。</dd> <dt>{{domxref("IDBFactory.cmp")}}</dt> diff --git a/files/ja/web/api/idbrequest/index.html b/files/ja/web/api/idbrequest/index.html index f4cab5a01b..a2d5f1d5cd 100644 --- a/files/ja/web/api/idbrequest/index.html +++ b/files/ja/web/api/idbrequest/index.html @@ -59,12 +59,12 @@ translation_of: Web/API/IDBRequest <p>Listen to these events using <code>addEventListener()</code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p> <dl> - <dt><a href="/en-US/docs/Web/API/IDBRequest/error_event"><code>error</code></a></dt> + <dt><a href="/ja/docs/Web/API/IDBRequest/error_event"><code>error</code></a></dt> <dd>Fired when an error caused a request to fail.<br> - Also available via the <code><a href="/en-US/docs/Web/API/IDBRequest/onerror">onerror</a></code> property.</dd> - <dt><a href="/en-US/docs/Web/API/IDBRequest/success_event"><code>success</code></a></dt> + Also available via the <code><a href="/ja/docs/Web/API/IDBRequest/onerror">onerror</a></code> property.</dd> + <dt><a href="/ja/docs/Web/API/IDBRequest/success_event"><code>success</code></a></dt> <dd>Fired when an <code>IDBRequest</code> succeeds.<br> - Also available via the <code><a href="/en-US/docs/Web/API/IDBRequest/onsuccess">onsuccess</a></code> property.</dd> + Also available via the <code><a href="/ja/docs/Web/API/IDBRequest/onsuccess">onsuccess</a></code> property.</dd> </dl> <h2 id="Example">Example</h2> @@ -124,7 +124,7 @@ DBOpenRequest.onsuccess = function(event) { <h2 id="See_also">See also</h2> <ul> - <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li> + <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li> <li>Starting transactions: {{domxref("IDBDatabase")}}</li> <li>Using transactions: {{domxref("IDBTransaction")}}</li> <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li> diff --git a/files/ja/web/api/idbrequest/success_event/index.html b/files/ja/web/api/idbrequest/success_event/index.html index 21c49830e4..dcbd3a9712 100644 --- a/files/ja/web/api/idbrequest/success_event/index.html +++ b/files/ja/web/api/idbrequest/success_event/index.html @@ -23,7 +23,7 @@ translation_of: Web/API/IDBRequest/success_event </tr> <tr> <th scope="row">Event handler property</th> - <td><code><a href="/en-US/docs/Web/API/IDBRequest/onsuccess">onsuccess</a></code></td> + <td><code><a href="/ja/docs/Web/API/IDBRequest/onsuccess">onsuccess</a></code></td> </tr> </tbody> </table> diff --git a/files/ja/web/api/installtrigger/index.html b/files/ja/web/api/installtrigger/index.html index 3d7d296908..4eef532189 100644 --- a/files/ja/web/api/installtrigger/index.html +++ b/files/ja/web/api/installtrigger/index.html @@ -8,9 +8,9 @@ original_slug: XPInstall_API_Reference/InstallTrigger_Object <p>ソフトウェアのダウンロードとインストールをする引き金となる Web ページ上のスクリプトには、<code>InstallTrigger</code> オブジェクトを使用します。</p> <h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> <p>とても簡単なインストール方法は、インストールスクリプトに必要な InstallTrigger オブジェクトを使用するだけです。</p> -<p>複雑なインストール方法では、<a href="ja/XPInstall_API_Reference/Install_Object"> Install</a> オブジェクトや <a href="ja/XPInstall_API_Reference/File_Object"> File</a> オブジェクトを使用する必要があります。どちらの場合も Web ページスクリプトを作成してインストール処理の引き金にします。そのページ内の InstallTrigger メソッドが、指定した XPI ファイルをダウンロードし、その XPI ファイルのトップレベルに置かれた install.js スクリプトを起動する "引き金" になります。</p> -<p>InstallTrigger オブジェクト上の最初のメソッドは <a href="ja/XPInstall_API_Reference/InstallTrigger_Object/Methods/install"> install</a> です。これは、XPI ファイル形式にまとめられた一つまたはそれ以上のソフトウェアパッケージをダウンロードし、インストールします。以下は、Web ページ上からインストールする引き金の基本的な例です:</p> +<p>複雑なインストール方法では、<a href="/ja/XPInstall_API_Reference/Install_Object"> Install</a> オブジェクトや <a href="/ja/XPInstall_API_Reference/File_Object"> File</a> オブジェクトを使用する必要があります。どちらの場合も Web ページスクリプトを作成してインストール処理の引き金にします。そのページ内の InstallTrigger メソッドが、指定した XPI ファイルをダウンロードし、その XPI ファイルのトップレベルに置かれた install.js スクリプトを起動する "引き金" になります。</p> +<p>InstallTrigger オブジェクト上の最初のメソッドは <a href="/ja/XPInstall_API_Reference/InstallTrigger_Object/Methods/install"> install</a> です。これは、XPI ファイル形式にまとめられた一つまたはそれ以上のソフトウェアパッケージをダウンロードし、インストールします。以下は、Web ページ上からインストールする引き金の基本的な例です:</p> <pre>xpi={'XPInstall Dialog Display Name':'simple.xpi'}; InstallTrigger.install(xpi); </pre> -<p>また、InstallTrigger オブジェクトをソフトウェアのバージョンチェックに使用したり、Netscape 6 や Mozilla のテーマ、言語パックをインストールしたり、<a href="ja/XPInstall_API_Reference/InstallTrigger_Object/Methods/install"> install</a> オブジェクトを使用して複数のパッケージをインストールすることもできます。</p> +<p>また、InstallTrigger オブジェクトをソフトウェアのバージョンチェックに使用したり、Netscape 6 や Mozilla のテーマ、言語パックをインストールしたり、<a href="/ja/XPInstall_API_Reference/InstallTrigger_Object/Methods/install"> install</a> オブジェクトを使用して複数のパッケージをインストールすることもできます。</p> diff --git a/files/ja/web/api/intersection_observer_api/timing_element_visibility/index.html b/files/ja/web/api/intersection_observer_api/timing_element_visibility/index.html index 42f9db568a..b2da47c169 100644 --- a/files/ja/web/api/intersection_observer_api/timing_element_visibility/index.html +++ b/files/ja/web/api/intersection_observer_api/timing_element_visibility/index.html @@ -23,7 +23,7 @@ translation_of: Web/API/Intersection_Observer_API/Timing_element_visibility <div id="fullpage_example"> <h2 id="サイト構造：HTML">サイト構造：HTML</h2> -<p>The site's structure is not too complicated. We'll be using <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a> to style and lay out the site, so we can be pretty straightforward here:</p> +<p>The site's structure is not too complicated. We'll be using <a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a> to style and lay out the site, so we can be pretty straightforward here:</p> <pre class="brush: html"><div class="wrapper"> <header> @@ -249,7 +249,7 @@ function startup() { <h3 id="ドキュメントの可視性の変更の処理">ドキュメントの可視性の変更の処理</h3> -<p>Let's take a look at the handler for the {{event("visibilitychange")}} event. Our script receives this event when the document itself becomes visible or invisible. The most important scenario here is when the user switches tabs. Since Intersection Observer only cares about the intersection between the targeted elements and the intersection root, and not the tab's visibility (which is a different issue entirely), we need to use the <a href="/en-US/docs/Web/API/Page_Visibility_API">Page Visibility API</a> to detect these tab switches and disable our timers for the duration.</p> +<p>Let's take a look at the handler for the {{event("visibilitychange")}} event. Our script receives this event when the document itself becomes visible or invisible. The most important scenario here is when the user switches tabs. Since Intersection Observer only cares about the intersection between the targeted elements and the intersection root, and not the tab's visibility (which is a different issue entirely), we need to use the <a href="/ja/docs/Web/API/Page_Visibility_API">Page Visibility API</a> to detect these tab switches and disable our timers for the duration.</p> <pre class="brush: js">function handleVisibilityChange() { if (document.hidden) { diff --git a/files/ja/web/api/issecurecontext/index.html b/files/ja/web/api/issecurecontext/index.html index 877738b41b..267a421750 100644 --- a/files/ja/web/api/issecurecontext/index.html +++ b/files/ja/web/api/issecurecontext/index.html @@ -53,5 +53,5 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/isSecureContext <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/Security/Secure_Contexts">Secure contexts</a></li> + <li><a href="/ja/docs/Web/Security/Secure_Contexts">Secure contexts</a></li> </ul> diff --git a/files/ja/web/api/keyboardevent/code/index.html b/files/ja/web/api/keyboardevent/code/index.html index 07ac76cf5a..5801f2618d 100644 --- a/files/ja/web/api/keyboardevent/code/index.html +++ b/files/ja/web/api/keyboardevent/code/index.html @@ -139,7 +139,7 @@ let spaceship = document.getElementById("spaceship"); } </pre> -<p>The <code>refresh()</code> function handles applying the rotation and position by using an <a href="/en-US/docs/Web/SVG/Attribute/transform">SVG transform</a>.</p> +<p>The <code>refresh()</code> function handles applying the rotation and position by using an <a href="/ja/docs/Web/SVG/Attribute/transform">SVG transform</a>.</p> <pre class="brush: js notranslate">function refresh() { let x = position.x - (shipSize.width/2); diff --git a/files/ja/web/api/keyboardevent/index.html b/files/ja/web/api/keyboardevent/index.html index b1fbcb5830..11e8ceef87 100644 --- a/files/ja/web/api/keyboardevent/index.html +++ b/files/ja/web/api/keyboardevent/index.html @@ -329,7 +329,7 @@ document.addEventListener('keyup', (event) => { <h3 id="Compatibility_notes" name="Compatibility_notes">互換性のメモ</h3> <ul> - <li>Firefox 65 では、 <code>keypress</code> イベントは<a href="/en-US/docs/Web/API/KeyboardEvent/keyCode#Non-printable_keys_(function_keys)">印字可能キー以外</a>では発生しなくなりました ({{bug(968056)}})が、 <kbd>Enter</kbd> キー、 <kbd>Shift</kbd> + <kbd>Enter</kbd> キー、 <kbd>Ctrl</kbd> + <kbd>Enter</kbd> キーの組み合わせでは発生します (これらはブラウザー間の互換性の目的のために維持されています)。</li> + <li>Firefox 65 では、 <code>keypress</code> イベントは<a href="/ja/docs/Web/API/KeyboardEvent/keyCode#Non-printable_keys_(function_keys)">印字可能キー以外</a>では発生しなくなりました ({{bug(968056)}})が、 <kbd>Enter</kbd> キー、 <kbd>Shift</kbd> + <kbd>Enter</kbd> キー、 <kbd>Ctrl</kbd> + <kbd>Enter</kbd> キーの組み合わせでは発生します (これらはブラウザー間の互換性の目的のために維持されています)。</li> </ul> <h2 id="See_also" name="See_also">関連情報</h2> diff --git a/files/ja/web/api/keyboardevent/key/index.html b/files/ja/web/api/keyboardevent/key/index.html index ee4a4c0181..18660f91b4 100644 --- a/files/ja/web/api/keyboardevent/key/index.html +++ b/files/ja/web/api/keyboardevent/key/index.html @@ -19,12 +19,12 @@ translation_of: Web/API/KeyboardEvent/key <div class="moreinfo pull-aside"> <h4 id="Key_values" name="Key_values">キーの値</h4> -<p><a href="/docs/Web/API/KeyboardEvent/key/Key_Values">キーの値</a>の完全なリストを参照してください。</p> +<p><a href="/ja/docs/Web/API/KeyboardEvent/key/Key_Values">キーの値</a>の完全なリストを参照してください。</p> </div> <ul> <li>押されたキーが印刷表現を持っている場合は、返された値は空ではない Unicode 文字の文字列で、キーの印刷表現が入ります。</li> - <li>押されたキーが制御または特殊文字である場合は、返値は<a href="/docs/Web/API/KeyboardEvent/key/Key_Values">定義済みキー値</a>の内の一つになります。</li> + <li>押されたキーが制御または特殊文字である場合は、返値は<a href="/ja/docs/Web/API/KeyboardEvent/key/Key_Values">定義済みキー値</a>の内の一つになります。</li> <li><code>KeyboardEvent</code> が<a href="https://ja.wikipedia.org/wiki/%E3%83%87%E3%83%83%E3%83%89%E3%82%AD%E3%83%BC">デッドキー</a>が押されたことを表すのであれば、キーの値は "<code>Dead</code>" になります。</li> <li>キーボードの一部の特殊なキー (マルチメディアキーボードにおけるメディア制御のための拡張キーなど) は Windows のキーコードを生成しません。代わりに <code>WM_APPCOMMAND</code> イベントを起動します。これらのイベントは DOM キーボードイベントに対応付けられ、 Windows の「仮想キーコード」の中で、実際のキーコードではないものの紹介されます。</li> <li>キーが特定できなかった場合は、 <code>Unidentified</code> の値を返します。</li> diff --git a/files/ja/web/api/localfilesystem/index.html b/files/ja/web/api/localfilesystem/index.html index db45111daf..03f4cb281a 100644 --- a/files/ja/web/api/localfilesystem/index.html +++ b/files/ja/web/api/localfilesystem/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/LocalFileSystem --- <div>{{APIRef("File System API")}}{{non-standard_header()}}</div> -<p><a href="https://developer.mozilla.org/en/DOM/File_API/File_System_API" title="en/DOM/File_API/File_System_APIB">File System API</a> の <code>LocalFileSystem</code> インターフェイスを使用すると、サンドボックスファイルシステムにアクセスできます。 これらのメソッドは、<a href="ja/docs/Web/API/Window">window</a> オブジェクトと <a href="/ja/docs/Web/API/Worker">worker</a> オブジェクトによって実装されます。</p> +<p><a href="/ja/DOM/File_API/File_System_API" title="en/DOM/File_API/File_System_APIB">File System API</a> の <code>LocalFileSystem</code> インターフェイスを使用すると、サンドボックスファイルシステムにアクセスできます。 これらのメソッドは、<a href="/ja/docs/Web/API/Window">window</a> オブジェクトと <a href="/ja/docs/Web/API/Worker">worker</a> オブジェクトによって実装されます。</p> <h2 id="基本のコンセプト">基本のコンセプト</h2> @@ -213,6 +213,6 @@ window.requestFileSystem(window.PERSISTENT, 1024*1024,onInitFs,errorHandler); <p>仕様書:{{ spec("http://dev.w3.org/2009/dap/file-system/pub/FileSystem/", "File API: Directories and System Specification", "WD") }}</p> -<p>リファレンス: <a href="/en/DOM/File_API/File_System_API" title="en/DOM/File_API/File_System_API">File System API</a></p> +<p>リファレンス: <a href="/ja/DOM/File_API/File_System_API" title="en/DOM/File_API/File_System_API">File System API</a></p> -<p>イントロダクション: <a href="/en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API" title="en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API">Basic Concepts About the File System API</a></p> +<p>イントロダクション: <a href="/ja/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API" title="en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API">Basic Concepts About the File System API</a></p> diff --git a/files/ja/web/api/localfilesystemsync/index.html b/files/ja/web/api/localfilesystemsync/index.html index 77012edcb9..a099d3cde7 100644 --- a/files/ja/web/api/localfilesystemsync/index.html +++ b/files/ja/web/api/localfilesystemsync/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/LocalFileSystemSync --- <div>{{APIRef("File System API")}}{{non-standard_header()}}</div> -<p>The <code>LocalFileSystemSync</code> interface of the <a href="/en/DOM/File_API/File_System_API" title="en/DOM/File_API/File_System_APIB">File System API</a> gives you access to a sandboxed file system. It is intended to be used with <a href="/en/DOM/Worker" title="en/DOM/Worker"> WebWorkers</a>. The methods are implemented by <a href="/en/DOM/Worker" title="En/DOM/Worker">worker</a> objects.</p> +<p>The <code>LocalFileSystemSync</code> interface of the <a href="/ja/DOM/File_API/File_System_API" title="en/DOM/File_API/File_System_APIB">File System API</a> gives you access to a sandboxed file system. It is intended to be used with <a href="/ja/DOM/Worker" title="en/DOM/Worker"> WebWorkers</a>. The methods are implemented by <a href="/ja/DOM/Worker" title="En/DOM/Worker">worker</a> objects.</p> <h2 id="この文書について">この文書について</h2> @@ -46,10 +46,10 @@ var fs = requestFileSystemSync(TEMPORARY, 1024*1024 /*1MB*/);</pre> <table class="standard-table"> <tbody> <tr> - <td><code>FileSystemSync <a href="#requestFileSystemSync" title="#requestFileSystemSync">requestFileSystemSync</a> (in unsigned short <em>type</em>, in long long <em>size</em>) raises <a href="/en/DOM/File_API/File_System_API/FileException" title="en/DOM/File_API/File_System_API/FileException">FileException</a>; </code></td> + <td><code>FileSystemSync <a href="#requestFileSystemSync" title="#requestFileSystemSync">requestFileSystemSync</a> (in unsigned short <em>type</em>, in long long <em>size</em>) raises <a href="/ja/DOM/File_API/File_System_API/FileException" title="en/DOM/File_API/File_System_API/FileException">FileException</a>; </code></td> </tr> <tr> - <td><code>EntrySync <a href="#resolveLocalFileSystemSyncURL" title="resolveLocalFileSystemSyncURL">resolveLocalFileSystemSyncURL</a> (in DOMString <em>url</em>) raises <a href="/en/DOM/File_API/File_System_API/FileException" title="en/DOM/File_API/File_System_API/FileException">FileException</a>;</code></td> + <td><code>EntrySync <a href="#resolveLocalFileSystemSyncURL" title="resolveLocalFileSystemSyncURL">resolveLocalFileSystemSyncURL</a> (in DOMString <em>url</em>) raises <a href="/ja/DOM/File_API/File_System_API/FileException" title="en/DOM/File_API/File_System_API/FileException">FileException</a>;</code></td> </tr> </tbody> </table> @@ -103,7 +103,7 @@ var fs = requestFileSystemSync(TEMPORARY, 1024*1024 /*1MB*/);</pre> <h5 id="戻り値">戻り値</h5> <dl> - <dt><code><a href="/en/DOM/File_API/File_System_API/FileSystemSync" title="en/DOM/File_API/File_System_API/FileSystemSync">FileSystemSync</a></code></dt> + <dt><code><a href="/ja/DOM/File_API/File_System_API/FileSystemSync" title="en/DOM/File_API/File_System_API/FileSystemSync">FileSystemSync</a></code></dt> <dd>ファイルシステムを表すオブジェクト。</dd> </dl> @@ -142,7 +142,7 @@ var fs = requestFileSystemSync(TEMPORARY, 1024*1024 /*1MB*/);</pre> <h5 id="戻り値_2">戻り値</h5> <dl> - <dt><code><a href="/en/DOM/File_API/File_System_API/EntrySync" title="en/DOM/File_API/File_System_API/EntrySync">EntrySync</a></code></dt> + <dt><code><a href="/ja/DOM/File_API/File_System_API/EntrySync" title="en/DOM/File_API/File_System_API/EntrySync">EntrySync</a></code></dt> <dd>ファイルシステム内のエントリを表すオブジェクト。</dd> </dl> @@ -181,6 +181,6 @@ var fs = requestFileSystemSync(TEMPORARY, 1024*1024 /*1MB*/);</pre> <p>Specification:{{ spec("http://dev.w3.org/2009/dap/file-system/pub/FileSystem/", "File API: Directories and System Specification", "WD") }}</p> -<p>Reference: <a href="/en/DOM/File_API/File_System_API" title="en/DOM/File_API/File_System_API">File System API</a></p> +<p>Reference: <a href="/ja/DOM/File_API/File_System_API" title="en/DOM/File_API/File_System_API">File System API</a></p> -<p>Introduction: <a href="/en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API" title="en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API">Basic Concepts About the File System API</a></p> +<p>Introduction: <a href="/ja/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API" title="en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API">Basic Concepts About the File System API</a></p> diff --git a/files/ja/web/api/media_streams_api/index.html b/files/ja/web/api/media_streams_api/index.html index 7b89041666..8306c78d9d 100644 --- a/files/ja/web/api/media_streams_api/index.html +++ b/files/ja/web/api/media_streams_api/index.html @@ -16,15 +16,15 @@ translation_of: Web/API/Media_Streams_API --- <div>{{DefaultAPISidebar("Media Capture and Streams")}}</div> -<p><strong>Media Capture and Streams</strong> APIは一般的に<em>Media Stream API</em>や<em>Stream API</em>と呼ばれる<a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a>に関連したAPIです。このAPIでは、オーディオやビデオデータのストリーム、これらを操作するためのメソッド、データタイプに関連づけられた制約、データを非同期に利用する際の成功と失敗のコールバック、これらの処理を行なっている最中に発生するイベントなどをサポートします。</p> +<p><strong>Media Capture and Streams</strong> APIは一般的に<em>Media Stream API</em>や<em>Stream API</em>と呼ばれる<a href="/ja/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a>に関連したAPIです。このAPIでは、オーディオやビデオデータのストリーム、これらを操作するためのメソッド、データタイプに関連づけられた制約、データを非同期に利用する際の成功と失敗のコールバック、これらの処理を行なっている最中に発生するイベントなどをサポートします。</p> <h2 id="基本概念">基本概念</h2> -<p>このAPIは、オーディオまたはビデオに関連づけられたデータの流れを表現するための{{domxref("MediaStream")}}オブジェクトの操作を基本としています。例として<a href="/en-US/docs/WebRTC/taking_webcam_photos#Get_the_video" title="/en-US/docs/WebRTC/taking_webcam_photos#Get_the_video">Get the video</a>(英語)をご覧ください。</p> +<p>このAPIは、オーディオまたはビデオに関連づけられたデータの流れを表現するための{{domxref("MediaStream")}}オブジェクトの操作を基本としています。例として<a href="/ja/docs/WebRTC/taking_webcam_photos#Get_the_video" title="/en-US/docs/WebRTC/taking_webcam_photos#Get_the_video">Get the video</a>(英語)をご覧ください。</p> <p><code>MediaStream</code>は0個以上の{{domxref("MediaStreamTrack")}}によって構成されます。<code>MediaStreamTrack</code>は様々なオーディオやビデオの<strong>トラック</strong>を表現します。それぞれの<code>MediaStreamTrack</code>は、1つ以上の<strong>チャンネル</strong>を持ちます。このチャンネルはメディアストリームの最小の単位を表現します。例えば、ステレオのオーディオトラックの<em>left</em>と<em>right</em>のチャンネルのそれぞれのように、与えられたスピーカーに関連づけられたオーディオ信号です。</p> -<p><code>MediaStream</code>オブジェクトは、1つの<strong>入力</strong>と1つの<strong>出力</strong>を持ちます。<code>MediaStream</code>オブジェクトは、ローカルで呼び出される{{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}によって生成され、ユーザーのカメラやマイクの1つを入力ソースとして持ちます。ローカルでない<code>MediaStream</code>は、{{HTMLElement("video")}}や{{HTMLElement("audio")}}などのメディア要素や、WebRTC {{domxref("RTCPeerConnection")}} APIによって取得できるネットワーク越しに生成されたストリーム、<a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a> {{domxref("MediaStreamAudioSourceNode")}}によって作成されたストリームとして表現されます。<code>MediaStream</code>オブジェクトの出力は<strong>コンシューマ</strong>(consumer)に接続されます。出力として{{HTMLElement("audio")}}や{{HTMLElement("video")}}などのメディア要素、WebRTC {{domxref("RTCPeerConnection")}} API、<a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a> {{domxref("MediaStreamAudioDestinationNode")}}が使用できます。</p> +<p><code>MediaStream</code>オブジェクトは、1つの<strong>入力</strong>と1つの<strong>出力</strong>を持ちます。<code>MediaStream</code>オブジェクトは、ローカルで呼び出される{{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}によって生成され、ユーザーのカメラやマイクの1つを入力ソースとして持ちます。ローカルでない<code>MediaStream</code>は、{{HTMLElement("video")}}や{{HTMLElement("audio")}}などのメディア要素や、WebRTC {{domxref("RTCPeerConnection")}} APIによって取得できるネットワーク越しに生成されたストリーム、<a href="/ja/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a> {{domxref("MediaStreamAudioSourceNode")}}によって作成されたストリームとして表現されます。<code>MediaStream</code>オブジェクトの出力は<strong>コンシューマ</strong>(consumer)に接続されます。出力として{{HTMLElement("audio")}}や{{HTMLElement("video")}}などのメディア要素、WebRTC {{domxref("RTCPeerConnection")}} API、<a href="/ja/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a> {{domxref("MediaStreamAudioDestinationNode")}}が使用できます。</p> <p> </p> @@ -68,7 +68,7 @@ translation_of: Web/API/Media_Streams_API <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> - APIの入門ページ</li> + <li><a href="/ja/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> - APIの入門ページ</li> <li>{{domxref("mediaDevices.getUserMedia()")}}</li> - <li><a href="/en-US/docs/WebRTC/taking_webcam_photos">Taking webcam photos</a>: <code>getUserMedia()</code>を用いたデモとチュートリアル</li> + <li><a href="/ja/docs/WebRTC/taking_webcam_photos">Taking webcam photos</a>: <code>getUserMedia()</code>を用いたデモとチュートリアル</li> </ul> diff --git a/files/ja/web/api/mediadeviceinfo/index.html b/files/ja/web/api/mediadeviceinfo/index.html index 3385d734c4..347a3c186d 100644 --- a/files/ja/web/api/mediadeviceinfo/index.html +++ b/files/ja/web/api/mediadeviceinfo/index.html @@ -92,7 +92,7 @@ audioinput: Built-in Microphone id=r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0= <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li> + <li><a href="/ja/docs/Web/API/WebRTC_API">WebRTC API</a></li> <li>{{domxref("MediaDevices.enumerateDevices", "navigator.mediaDevices.enumerateDevices()")}}</li> <li>{{domxref("MediaDevices.getUserMedia", "navigator.mediaDevices.getUserMedia()")}}</li> </ul> diff --git a/files/ja/web/api/mediadevices/enumeratedevices/index.html b/files/ja/web/api/mediadevices/enumeratedevices/index.html index 285facc61f..6c87f570fc 100644 --- a/files/ja/web/api/mediadevices/enumeratedevices/index.html +++ b/files/ja/web/api/mediadevices/enumeratedevices/index.html @@ -109,8 +109,8 @@ navigator.mediaDevices.enumerateDevices() <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getUserMedia" title="mediaDevices.getUserMedia">navigator.mediaDevices.getUserMedia</a></li> - <li><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a> - APIの導入ページ</li> - <li><a href="/en-US/docs/WebRTC/MediaStream_API" title="WebRTC/MediaStream_API">MediaStream API</a> - media streamオブジェクトの導入ページ</li> - <li><a href="/en-US/docs/WebRTC/taking_webcam_photos" title="WebRTC/taking_webcam_photos">Taking webcam photos</a> - videoよりも写真を撮るために<code>getUserMedia()を使用するためのチュートリアル</code></li> + <li><a href="/ja/docs/Web/API/MediaDevices/getUserMedia" title="mediaDevices.getUserMedia">navigator.mediaDevices.getUserMedia</a></li> + <li><a href="/ja/docs/WebRTC" title="WebRTC">WebRTC</a> - APIの導入ページ</li> + <li><a href="/ja/docs/WebRTC/MediaStream_API" title="WebRTC/MediaStream_API">MediaStream API</a> - media streamオブジェクトの導入ページ</li> + <li><a href="/ja/docs/WebRTC/taking_webcam_photos" title="WebRTC/taking_webcam_photos">Taking webcam photos</a> - videoよりも写真を撮るために<code>getUserMedia()を使用するためのチュートリアル</code></li> </ul> diff --git a/files/ja/web/api/mediadevices/getusermedia/index.html b/files/ja/web/api/mediadevices/getusermedia/index.html index 53f62988fc..74ede6b142 100644 --- a/files/ja/web/api/mediadevices/getusermedia/index.html +++ b/files/ja/web/api/mediadevices/getusermedia/index.html @@ -148,7 +148,7 @@ translation_of: Web/API/MediaDevices/getUserMedia <dt><code>AbortError</code></dt> <dd>デバイスへのアクセスはユーザとOSから許可され、かつ<code>NotReadableError</code>が生じるような問題も起きなかったが、デバイスを利用できない何らかの問題が発生した。</dd> <dt><code>NotAllowedError</code></dt> - <dd>One or more of the requested source devices cannot be used at this time. This will happen if the browsing context is insecure (that is, the page was loaded using HTTP rather than HTTPS). It also happens if the user has specified that the current browsing instance is not permitted access to the device, the user has denied access for the current session, or the user has denied all access to user media devices globally. On browsers that support managing media permissions with <a href="/en-US/docs/Web/HTTP/Feature_Policy">Feature Policy</a>, this error is returned if Feature Policy is not configured to allow access to the input source(s). + <dd>One or more of the requested source devices cannot be used at this time. This will happen if the browsing context is insecure (that is, the page was loaded using HTTP rather than HTTPS). It also happens if the user has specified that the current browsing instance is not permitted access to the device, the user has denied access for the current session, or the user has denied all access to user media devices globally. On browsers that support managing media permissions with <a href="/ja/docs/Web/HTTP/Feature_Policy">Feature Policy</a>, this error is returned if Feature Policy is not configured to allow access to the input source(s). <div class="note">Older versions of the specification used <code>SecurityError</code> for this instead; <code>SecurityError</code> has taken on a new meaning.</div> </dd> <dt><code>NotFoundError</code></dt> @@ -169,9 +169,9 @@ translation_of: Web/API/MediaDevices/getUserMedia <p>As an API that may involve significant privacy concerns, <code>getUserMedia()</code>'s specification lays out a wide array of privacy and security requirements that browsers are obligated to meet.</p> -<p><code>getUserMedia()</code> is a powerful feature which can only be used in <a href="/en-US/docs/Web/Security/Secure_Contexts">secure contexts</a>; in insecure contexts, <code>navigator.mediaDevices</code> is <code>undefined</code>, preventing access to <code>getUserMedia()</code>. A secure context is, in short, a page loaded using HTTPS or the <code>file:///</code> URL scheme, or a page loaded from <code>localhost</code>.</p> +<p><code>getUserMedia()</code> is a powerful feature which can only be used in <a href="/ja/docs/Web/Security/Secure_Contexts">secure contexts</a>; in insecure contexts, <code>navigator.mediaDevices</code> is <code>undefined</code>, preventing access to <code>getUserMedia()</code>. A secure context is, in short, a page loaded using HTTPS or the <code>file:///</code> URL scheme, or a page loaded from <code>localhost</code>.</p> -<p>In addition, user permission is always required to access the user's audio and video inputs. Only a window's top-level document context for a valid origin can even request permission to use <code>getUserMedia()</code>, unless the top-level context expressly grants permission for a given {{HTMLElement("iframe")}} to do so using <a href="/en-US/docs/Web/HTTP/Feature_Policy">Feature Policy</a>. Otherwise, the user will never even be asked for permission to use the input devices.</p> +<p>In addition, user permission is always required to access the user's audio and video inputs. Only a window's top-level document context for a valid origin can even request permission to use <code>getUserMedia()</code>, unless the top-level context expressly grants permission for a given {{HTMLElement("iframe")}} to do so using <a href="/ja/docs/Web/HTTP/Feature_Policy">Feature Policy</a>. Otherwise, the user will never even be asked for permission to use the input devices.</p> <p>For additional details on these requirements and rules, how they are reflected in the context in which your code is running, and about how browsers manage user privacy and security issues, read on.</p> @@ -193,7 +193,7 @@ translation_of: Web/API/MediaDevices/getUserMedia <h4 id="Feature_Policy">Feature Policy</h4> -<p>The <a href="/en-US/docs/Web/HTTP/Feature_Policy">Feature Policy</a> security management feature of {{Glossary("HTTP")}} is in the process of being introduced into browsers, with support available to some extent in many browsers (though not always enabled by default, as in Firefox). <code>getUserMedia()</code> is one method which will require the use of Feature Policy, and your code needs to be prepared to deal with this. For example, you may need to use the {{htmlattrxref("allow", "iframe")}} attribute on any {{HTMLElement("iframe")}} that uses <code>getUserMedia()</code>, and pages that use <code>getUserMedia()</code> will eventually need to supply the {{HTTPHeader("Feature-Policy")}} header.</p> +<p>The <a href="/ja/docs/Web/HTTP/Feature_Policy">Feature Policy</a> security management feature of {{Glossary("HTTP")}} is in the process of being introduced into browsers, with support available to some extent in many browsers (though not always enabled by default, as in Firefox). <code>getUserMedia()</code> is one method which will require the use of Feature Policy, and your code needs to be prepared to deal with this. For example, you may need to use the {{htmlattrxref("allow", "iframe")}} attribute on any {{HTMLElement("iframe")}} that uses <code>getUserMedia()</code>, and pages that use <code>getUserMedia()</code> will eventually need to supply the {{HTTPHeader("Feature-Policy")}} header.</p> <p>The two permissions that apply to <code>getUserMedia()</code> are <code>camera</code> and <code>microphone</code>.</p> @@ -210,11 +210,11 @@ translation_of: Web/API/MediaDevices/getUserMedia <pre class="brush: html notranslate"><iframe src="https://mycode.example.net/etc" allow="camera;microphone"> </iframe></pre> -<p>Read our guide, <a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Using Feature Policy</a>, to learn more about how it works.</p> +<p>Read our guide, <a href="/ja/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Using Feature Policy</a>, to learn more about how it works.</p> <h4 id="Encryption_based_security">Encryption based security</h4> -<p>The <code>getUserMedia()</code> method is only available in <a href="/en-US/docs/Web/Security/Secure_Contexts">secure contexts</a>. A secure context is one the browser is reasonably confident contains a document which was loaded securely, using HTTPS/TLS, and has limited exposure to insecure contexts. If a document isn't loaded in a secure context, the {{domxref("navigator.mediaDevices")}} property is <code>undefined</code>, making access to <code>getUserMedia()</code> impossible.</p> +<p>The <code>getUserMedia()</code> method is only available in <a href="/ja/docs/Web/Security/Secure_Contexts">secure contexts</a>. A secure context is one the browser is reasonably confident contains a document which was loaded securely, using HTTPS/TLS, and has limited exposure to insecure contexts. If a document isn't loaded in a secure context, the {{domxref("navigator.mediaDevices")}} property is <code>undefined</code>, making access to <code>getUserMedia()</code> impossible.</p> <p>Attempting to access <code>getUserMedia()</code> in this situation will result in a <code>TypeError</code>.</p> diff --git a/files/ja/web/api/mediadevices/ondevicechange/index.html b/files/ja/web/api/mediadevices/ondevicechange/index.html index e53c03b5dd..6f63115726 100644 --- a/files/ja/web/api/mediadevices/ondevicechange/index.html +++ b/files/ja/web/api/mediadevices/ondevicechange/index.html @@ -152,7 +152,7 @@ let videoList = document.getElementById("videoList");</pre> <p>すべてのデバイスの情報を出力するために、{{jsxref("Array.forEach", "forEach()")}}ループを使用します。それぞれのデバイスで、ユーザへこのデバイス情報を見せるために新しい{{HTMLElement("li")}}オブジェクトを作成します。</p> -<p><code>let [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i);</code>の行について詳しく説明します。ここでは<a href="/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">分割代入</a> (<a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">ECMAScript 6</a>の新しい機能)を使用しており、{{jsxref("String.match()")}}によって返された配列の値を<code>kind</code>、<code>type</code>、<code>direction</code>の変数へ代入しています。なぜこのようなことをするのかというと、{{domxref("MediaDeviceInfo.kind")}}の文字列は、"audioinput"や"videooutput"のように、メディアタイプとメディアフローの向きの2つの情報を含んでいるためです。この行で、タイプ("audio"または"video")と方向("input"と"output")を取り出すことで、リストに表示する文字列を作成することができます。</p> +<p><code>let [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i);</code>の行について詳しく説明します。ここでは<a href="/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">分割代入</a> (<a href="/ja/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">ECMAScript 6</a>の新しい機能)を使用しており、{{jsxref("String.match()")}}によって返された配列の値を<code>kind</code>、<code>type</code>、<code>direction</code>の変数へ代入しています。なぜこのようなことをするのかというと、{{domxref("MediaDeviceInfo.kind")}}の文字列は、"audioinput"や"videooutput"のように、メディアタイプとメディアフローの向きの2つの情報を含んでいるためです。この行で、タイプ("audio"または"video")と方向("input"と"output")を取り出すことで、リストに表示する文字列を作成することができます。</p> <p>太字のデバイス名と括弧で囲まれた方向を含む文字列が作成されると、デバイスタイプに基づいて<code>audioList</code>または<code>videoList</code>対応する一覧へ{{domxref("Node.appendChild", "appendChild()")}}の呼び出しによって追加されます。</p> diff --git a/files/ja/web/api/mediasource/istypesupported/index.html b/files/ja/web/api/mediasource/istypesupported/index.html index 46c9e237ab..6355a32442 100644 --- a/files/ja/web/api/mediasource/istypesupported/index.html +++ b/files/ja/web/api/mediasource/istypesupported/index.html @@ -97,9 +97,9 @@ var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'; <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/API/Media_Source_Extensions_API">Media Source Extensions API</a></li> - <li><a href="/en-US/docs/Web/Media/Formats">ウェブ上のメディアタイプとフォーマットのガイド</a></li> - <li><a href="/en-US/docs/Web/Media/Formats/codecs_parameter">一般的なメディアタイプにおける "codecs" パラメーター</a></li> + <li><a href="/ja/docs/Web/API/Media_Source_Extensions_API">Media Source Extensions API</a></li> + <li><a href="/ja/docs/Web/Media/Formats">ウェブ上のメディアタイプとフォーマットのガイド</a></li> + <li><a href="/ja/docs/Web/Media/Formats/codecs_parameter">一般的なメディアタイプにおける "codecs" パラメーター</a></li> <li>{{domxref("SourceBuffer")}}</li> <li>{{domxref("SourceBufferList")}}</li> </ul> diff --git a/files/ja/web/api/mediastreamconstraints/index.html b/files/ja/web/api/mediastreamconstraints/index.html index 5a4dba4b40..7b57cf20ed 100644 --- a/files/ja/web/api/mediastreamconstraints/index.html +++ b/files/ja/web/api/mediastreamconstraints/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/MediaStreamConstraints <div> </div> -<div>制約がどのようにして動作するのかについての詳細は、<a href="/en-US/docs/Web/API/Media_Streams_API/Constraints">Capabilities, constraints, and settings</a> (英語)をお読みください。</div> +<div>制約がどのようにして動作するのかについての詳細は、<a href="/ja/docs/Web/API/Media_Streams_API/Constraints">Capabilities, constraints, and settings</a> (英語)をお読みください。</div> <h2 id="プロパティ">プロパティ</h2> diff --git a/files/ja/web/api/mediastreamtrack/enabled/index.html b/files/ja/web/api/mediastreamtrack/enabled/index.html index 1068b4c2e7..e0c0e721e6 100644 --- a/files/ja/web/api/mediastreamtrack/enabled/index.html +++ b/files/ja/web/api/mediastreamtrack/enabled/index.html @@ -40,8 +40,8 @@ translation_of: Web/API/MediaStreamTrack/enabled <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/Media_Streams_API">MediaStream API</a></li> + <li><a href="/ja/docs/Web/API/Media_Streams_API">MediaStream API</a></li> <li>{{domxref("MediaStream")}}</li> <li>{{domxref("MediaStreamTrack")}}</li> - <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li> + <li><a href="/ja/docs/Web/Guide/API/WebRTC">WebRTC</a></li> </ul> diff --git a/files/ja/web/api/mediastreamtrack/id/index.html b/files/ja/web/api/mediastreamtrack/id/index.html index 0fa701e6a7..611849c208 100644 --- a/files/ja/web/api/mediastreamtrack/id/index.html +++ b/files/ja/web/api/mediastreamtrack/id/index.html @@ -41,5 +41,5 @@ translation_of: Web/API/MediaStreamTrack/id <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li> + <li><a href="/ja/docs/Web/Guide/API/WebRTC">WebRTC</a></li> </ul> diff --git a/files/ja/web/api/mediastreamtrack/index.html b/files/ja/web/api/mediastreamtrack/index.html index 00f596531f..4f7cac8258 100644 --- a/files/ja/web/api/mediastreamtrack/index.html +++ b/files/ja/web/api/mediastreamtrack/index.html @@ -125,6 +125,6 @@ translation_of: Web/API/MediaStreamTrack <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> + <li><a href="/ja/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> <li>{{domxref("MediaStream")}}</li> </ul> diff --git a/files/ja/web/api/mediastreamtrack/kind/index.html b/files/ja/web/api/mediastreamtrack/kind/index.html index 6e3bce4d9e..13ee87a7d7 100644 --- a/files/ja/web/api/mediastreamtrack/kind/index.html +++ b/files/ja/web/api/mediastreamtrack/kind/index.html @@ -52,5 +52,5 @@ translation_of: Web/API/MediaStreamTrack/kind <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li> + <li><a href="/ja/docs/Web/Guide/API/WebRTC">WebRTC</a></li> </ul> diff --git a/files/ja/web/api/mediastreamtrack/label/index.html b/files/ja/web/api/mediastreamtrack/label/index.html index 6c7147977e..14bcb3b211 100644 --- a/files/ja/web/api/mediastreamtrack/label/index.html +++ b/files/ja/web/api/mediastreamtrack/label/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/MediaStreamTrack/label --- <p>{{APIRef("Media Capture and Streams")}}</p> -<p><code><strong>MediaStreamTrack.label</strong></code> は読み取り専用のプロパティであり、 <code>"internal microphone"</code>のようなトラックソースを識別するユーザエージェントによって割り当てられたラベルを含む<a href="https://developer.mozilla.org/ja/docs/Web/API/DOMString" title="DOMString は、UTF-16 文字列です。JavaScript では UTF-16 文字列を用いるため、DOMString は直接 String に対応します。"><code>DOMString</code></a>を返します。この文字列は空になることもあり、ソースが接続されていないと空になります。トラックのソースとの関連付けが解除されても、このラベルは変更されません。</p> +<p><code><strong>MediaStreamTrack.label</strong></code> は読み取り専用のプロパティであり、 <code>"internal microphone"</code>のようなトラックソースを識別するユーザエージェントによって割り当てられたラベルを含む<a href="/ja/docs/Web/API/DOMString" title="DOMString は、UTF-16 文字列です。JavaScript では UTF-16 文字列を用いるため、DOMString は直接 String に対応します。"><code>DOMString</code></a>を返します。この文字列は空になることもあり、ソースが接続されていないと空になります。トラックのソースとの関連付けが解除されても、このラベルは変更されません。</p> <h2 id="文法">文法</h2> @@ -39,5 +39,5 @@ translation_of: Web/API/MediaStreamTrack/label <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li> + <li><a href="/ja/docs/Web/Guide/API/WebRTC">WebRTC</a></li> </ul> diff --git a/files/ja/web/api/mediastreamtrack/onended/index.html b/files/ja/web/api/mediastreamtrack/onended/index.html index 8f317c76b7..b41beb67cb 100644 --- a/files/ja/web/api/mediastreamtrack/onended/index.html +++ b/files/ja/web/api/mediastreamtrack/onended/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/MediaStreamTrack/onended --- <p>{{ APIRef("Media Capture and Streams") }}</p> -<p><code><strong>MediaStreamTrack.onended</strong></code> イベントハンドラは<code><a href="https://developer.mozilla.org/ja/docs/Web/Reference/Events/ended_(MediaStream)" rel="nofollow" title="/ja/docs/Web/Reference/Events/ended_(MediaStream)">ended</a></code>イベントが発生した時に実行する<code><a href="https://developer.mozilla.org/ja/docs/Web/API/EventHandler" rel="nofollow" title="この項目についての文書はまだ書かれていません。書いてみませんか？">EventHandler</a></code>の関数です。このイベントは、<a href="https://developer.mozilla.org/ja/docs/Web/API/MediaStreamTrack" title="MediaStreamTrack インタフェースは、ストリームに含まれる一つのメディアトラックを表現します。 一般的に、オーディオやビデオのトラックですが、他の種類のトラックも存在することができます。"><code>MediaStreamTrack</code></a>オブジェクトのソースが、これ以上データを提供することがないか、ユーザーの操作によって許可が無効になったか、ソースデバイスが取り出されたか、リモートのピアがデータの送信を停止した時に発生します。</p> +<p><code><strong>MediaStreamTrack.onended</strong></code> イベントハンドラは<code><a href="/ja/docs/Web/Reference/Events/ended_(MediaStream)" rel="nofollow" title="/ja/docs/Web/Reference/Events/ended_(MediaStream)">ended</a></code>イベントが発生した時に実行する<code><a href="/ja/docs/Web/API/EventHandler" rel="nofollow" title="この項目についての文書はまだ書かれていません。書いてみませんか？">EventHandler</a></code>の関数です。このイベントは、<a href="/ja/docs/Web/API/MediaStreamTrack" title="MediaStreamTrack インタフェースは、ストリームに含まれる一つのメディアトラックを表現します。 一般的に、オーディオやビデオのトラックですが、他の種類のトラックも存在することができます。"><code>MediaStreamTrack</code></a>オブジェクトのソースが、これ以上データを提供することがないか、ユーザーの操作によって許可が無効になったか、ソースデバイスが取り出されたか、リモートのピアがデータの送信を停止した時に発生します。</p> <h2 id="文法">文法</h2> diff --git a/files/ja/web/api/mediastreamtrack/onmute/index.html b/files/ja/web/api/mediastreamtrack/onmute/index.html index c8154b28c0..0707c39193 100644 --- a/files/ja/web/api/mediastreamtrack/onmute/index.html +++ b/files/ja/web/api/mediastreamtrack/onmute/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/MediaStreamTrack/onmute <h3 id="値">値</h3> -<p>{{event("mute")}}イベントが発生した時の実行する処理の関数を<a href="https://developer.mozilla.org/ja/docs/Web/API/EventHandler" rel="nofollow" title="この項目についての文書はまだ書かれていません。書いてみませんか？"><code>EventHandler</code></a>として設定します。このイベントハンドラーの関数は1つのパラメータ持ちます。このパラメータはイベントオブジェクトであり、単純な<a href="https://developer.mozilla.org/ja/docs/Web/API/Event" title="Event インターフェイスは、DOM で発生するイベントを表します。ユーザーによって発生するイベント (マウスやキーボードのイベント) もありますし、API によって発生するイベント (アニメーションの実行が完了したことを示すイベントや、動画再生が一時停止したイベントなど) もあります。さまざまな型のイベントがあり、一部のイベントは基底の Event インターフェイスを基にした他のインターフェイスを使用します。Event 自体は、すべてのイベントで共通のプロパティやメソッドを持ちます。"><code>Event</code></a>のオブジェクトです。</p> +<p>{{event("mute")}}イベントが発生した時の実行する処理の関数を<a href="/ja/docs/Web/API/EventHandler" rel="nofollow" title="この項目についての文書はまだ書かれていません。書いてみませんか？"><code>EventHandler</code></a>として設定します。このイベントハンドラーの関数は1つのパラメータ持ちます。このパラメータはイベントオブジェクトであり、単純な<a href="/ja/docs/Web/API/Event" title="Event インターフェイスは、DOM で発生するイベントを表します。ユーザーによって発生するイベント (マウスやキーボードのイベント) もありますし、API によって発生するイベント (アニメーションの実行が完了したことを示すイベントや、動画再生が一時停止したイベントなど) もあります。さまざまな型のイベントがあり、一部のイベントは基底の Event インターフェイスを基にした他のインターフェイスを使用します。Event 自体は、すべてのイベントで共通のプロパティやメソッドを持ちます。"><code>Event</code></a>のオブジェクトです。</p> <h2 id="例">例</h2> diff --git a/files/ja/web/api/mediastreamtrack/readystate/index.html b/files/ja/web/api/mediastreamtrack/readystate/index.html index a5cfa1ffee..10c94f8cf4 100644 --- a/files/ja/web/api/mediastreamtrack/readystate/index.html +++ b/files/ja/web/api/mediastreamtrack/readystate/index.html @@ -48,7 +48,7 @@ translation_of: Web/API/MediaStreamTrack/readyState <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Stream API</a></li> - <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li> + <li><a href="/ja/docs/Web/API/Media_Streams_API">Media Stream API</a></li> + <li><a href="/ja/docs/Web/Guide/API/WebRTC">WebRTC</a></li> <li>{{domxref("MediaStreamTrack.onended")}}</li> </ul> diff --git a/files/ja/web/api/mediastreamtrack/remote/index.html b/files/ja/web/api/mediastreamtrack/remote/index.html index b4bf386cb1..a2c03106be 100644 --- a/files/ja/web/api/mediastreamtrack/remote/index.html +++ b/files/ja/web/api/mediastreamtrack/remote/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/MediaStreamTrack/remote --- <p>{{APIRef("Media Capture and Streams")}}{{obsolete_header()}}</p> -<p><code><strong>MediaStreamTrack.remote</strong></code>は読み取り専用のプロパティであり、このプロパティによってJavaScript上で、WebRTC MediaStreamTrackがリモートソースかローカルソースであるのかを知ることができます。値が<code>true</code>の場合は、トラックがリモートのソース(<a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection">RTCPeerConnection</a>)を用いられていること示します。値が<code>false</code>の場合はローカルのソースが用いられていることを示します。</p> +<p><code><strong>MediaStreamTrack.remote</strong></code>は読み取り専用のプロパティであり、このプロパティによってJavaScript上で、WebRTC MediaStreamTrackがリモートソースかローカルソースであるのかを知ることができます。値が<code>true</code>の場合は、トラックがリモートのソース(<a href="/ja/docs/Web/API/RTCPeerConnection">RTCPeerConnection</a>)を用いられていること示します。値が<code>false</code>の場合はローカルのソースが用いられていることを示します。</p> <h2 id="文法">文法</h2> @@ -37,7 +37,7 @@ translation_of: Web/API/MediaStreamTrack/remote <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li> + <li><a href="/ja/docs/Web/Guide/API/WebRTC">WebRTC</a></li> </ul> <p> </p> diff --git a/files/ja/web/api/mediatracksupportedconstraints/aspectratio/index.html b/files/ja/web/api/mediatracksupportedconstraints/aspectratio/index.html index 095af21b0f..a5d39d5c28 100644 --- a/files/ja/web/api/mediatracksupportedconstraints/aspectratio/index.html +++ b/files/ja/web/api/mediatracksupportedconstraints/aspectratio/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/MediaTrackSupportedConstraints/aspectRatio --- <p>{{APIRef("Media Capture and Streams")}}</p> -<p><a href="https://developer.mozilla.org/ja/docs/Web/API/MediaTrackSupportedConstraints" title="MediaTrackSupportedConstraintsディクショナリは、MediaStreamTrackオブジェクトを実装しているuser agentやブラウザによって理解できる制約可能なプロパティの一覧を表します。MediaDevices.getSupportedConstraints()によって、MediaTrackSupportedConstraintsに適合するオブジェクトが戻り値として返されます。"><code>MediaTrackSupportedConstraints</code></a>ディクショナリーの<strong><code>aspectRatio</code></strong>プロパティは読み取り専用のBooleanの値です。<a href="https://developer.mozilla.org/ja/docs/Glossary/user_agent" rel="nofollow" title="この用語 (user agent) の定義はまだ書かれていません。ぜひご寄稿ください！">user agent</a>が<strong><code>aspectRatio</code></strong>の制約をサポートしている場合、<a href="https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getSupportedConstraints" title="MediaDevices インタフェースのgetSupportedConstraints() メソッドは、MediaTrackSupportedConstraintsディクショナリをベースとするオブジェクトを戻り値として返します。このオブジェクトのメンバーフィールドは、user agentが扱えるメディア制約に関するプロパティを表しています。"><code>MediaDevices.getSupportedConstraints()</code></a>の戻り値のオブジェクトに含まれ<code>true</code>が設定されます。この制約がサポートされない場合は含まれないため、<code>false</code>になることはありません。</p> +<p><a href="/ja/docs/Web/API/MediaTrackSupportedConstraints" title="MediaTrackSupportedConstraintsディクショナリは、MediaStreamTrackオブジェクトを実装しているuser agentやブラウザによって理解できる制約可能なプロパティの一覧を表します。MediaDevices.getSupportedConstraints()によって、MediaTrackSupportedConstraintsに適合するオブジェクトが戻り値として返されます。"><code>MediaTrackSupportedConstraints</code></a>ディクショナリーの<strong><code>aspectRatio</code></strong>プロパティは読み取り専用のBooleanの値です。<a href="/ja/docs/Glossary/user_agent" rel="nofollow" title="この用語 (user agent) の定義はまだ書かれていません。ぜひご寄稿ください！">user agent</a>が<strong><code>aspectRatio</code></strong>の制約をサポートしている場合、<a href="/ja/docs/Web/API/MediaDevices/getSupportedConstraints" title="MediaDevices インタフェースのgetSupportedConstraints() メソッドは、MediaTrackSupportedConstraintsディクショナリをベースとするオブジェクトを戻り値として返します。このオブジェクトのメンバーフィールドは、user agentが扱えるメディア制約に関するプロパティを表しています。"><code>MediaDevices.getSupportedConstraints()</code></a>の戻り値のオブジェクトに含まれ<code>true</code>が設定されます。この制約がサポートされない場合は含まれないため、<code>false</code>になることはありません。</p> <p>サポートされている制約のディクショナリーは<code>navigator.mediaDevices.getSupportedConstraints()</code>を呼び出すことで取得できます。</p> @@ -72,7 +72,7 @@ if (navigator.mediaDevices.getSupportedConstraints()["aspectRatio"]) { <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> + <li><a href="/ja/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> <li>{{domxref("MediaDevices.getSupportedConstraints()")}}</li> <li>{{domxref("MediaTrackSupportedConstraints")}}</li> <li>{{domxref("MediaStreamTrack")}}</li> diff --git a/files/ja/web/api/mediatracksupportedconstraints/autogaincontrol/index.html b/files/ja/web/api/mediatracksupportedconstraints/autogaincontrol/index.html index ba690ccfb4..01d3b83b6d 100644 --- a/files/ja/web/api/mediatracksupportedconstraints/autogaincontrol/index.html +++ b/files/ja/web/api/mediatracksupportedconstraints/autogaincontrol/index.html @@ -74,7 +74,7 @@ if (navigator.mediaDevices.getSupportedConstraints()["autoGainControl"]) { <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> + <li><a href="/ja/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> <li>{{domxref("MediaDevices.getSupportedConstraints()")}}</li> <li>{{domxref("MediaTrackSupportedConstraints")}}</li> <li>{{domxref("MediaStreamTrack")}}</li> diff --git a/files/ja/web/api/mediatracksupportedconstraints/channelcount/index.html b/files/ja/web/api/mediatracksupportedconstraints/channelcount/index.html index c98531324f..0977937c92 100644 --- a/files/ja/web/api/mediatracksupportedconstraints/channelcount/index.html +++ b/files/ja/web/api/mediatracksupportedconstraints/channelcount/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/MediaTrackSupportedConstraints/channelCount --- <p>{{APIRef("Media Capture and Streams")}}</p> -<p><a href="https://developer.mozilla.org/ja/docs/Web/API/MediaTrackSupportedConstraints" title="MediaTrackSupportedConstraintsディクショナリは、MediaStreamTrackオブジェクトを実装しているuser agentやブラウザによって理解できる制約可能なプロパティの一覧を表します。MediaDevices.getSupportedConstraints()によって、MediaTrackSupportedConstraintsに適合するオブジェクトが戻り値として返されます。"><code>MediaTrackSupportedConstraints</code></a>ディクショナリーの<strong><code>channelCount</code></strong>プロパティは読み取り専用のBooleanの値です。<a href="https://developer.mozilla.org/ja/docs/Glossary/user_agent" rel="nofollow" title="この用語 (user agent) の定義はまだ書かれていません。ぜひご寄稿ください！">user agent</a>が<strong><code>channelCount</code></strong>の制約をサポートしている場合、<a href="https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getSupportedConstraints" title="MediaDevices インタフェースのgetSupportedConstraints() メソッドは、MediaTrackSupportedConstraintsディクショナリをベースとするオブジェクトを戻り値として返します。このオブジェクトのメンバーフィールドは、user agentが扱えるメディア制約に関するプロパティを表しています。"><code>MediaDevices.getSupportedConstraints()</code></a>の戻り値のオブジェクトに含まれ<code>true</code>が設定されます。この制約がサポートされない場合は含まれないため、<code>false</code>になることはありません。</p> +<p><a href="/ja/docs/Web/API/MediaTrackSupportedConstraints" title="MediaTrackSupportedConstraintsディクショナリは、MediaStreamTrackオブジェクトを実装しているuser agentやブラウザによって理解できる制約可能なプロパティの一覧を表します。MediaDevices.getSupportedConstraints()によって、MediaTrackSupportedConstraintsに適合するオブジェクトが戻り値として返されます。"><code>MediaTrackSupportedConstraints</code></a>ディクショナリーの<strong><code>channelCount</code></strong>プロパティは読み取り専用のBooleanの値です。<a href="/ja/docs/Glossary/user_agent" rel="nofollow" title="この用語 (user agent) の定義はまだ書かれていません。ぜひご寄稿ください！">user agent</a>が<strong><code>channelCount</code></strong>の制約をサポートしている場合、<a href="/ja/docs/Web/API/MediaDevices/getSupportedConstraints" title="MediaDevices インタフェースのgetSupportedConstraints() メソッドは、MediaTrackSupportedConstraintsディクショナリをベースとするオブジェクトを戻り値として返します。このオブジェクトのメンバーフィールドは、user agentが扱えるメディア制約に関するプロパティを表しています。"><code>MediaDevices.getSupportedConstraints()</code></a>の戻り値のオブジェクトに含まれ<code>true</code>が設定されます。この制約がサポートされない場合は含まれないため、<code>false</code>になることはありません。</p> <p>サポートされている制約のディクショナリーは<code>navigator.mediaDevices.getSupportedConstraints()</code>を呼び出すことで取得できます。</p> @@ -15,7 +15,7 @@ translation_of: Web/API/MediaTrackSupportedConstraints/channelCount <h3 id="値">値</h3> -<p>ユーザエージェント<code>channelCount</code>の制約をサポートしている場合、このプロパティはディクショナリーの中に含まれ、その値は常に<code>true</code>の値です。このプロパティが存在しない場合は、サポートされている制約ディクショナリーには存在しないため、<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="グローバルプロパティ undefined はプリミティブ値 undefined を表します。これは JavaScript におけるプリミティブ型の一つです。"><code>undefined</code></a>の値を取ることになります。</p> +<p>ユーザエージェント<code>channelCount</code>の制約をサポートしている場合、このプロパティはディクショナリーの中に含まれ、その値は常に<code>true</code>の値です。このプロパティが存在しない場合は、サポートされている制約ディクショナリーには存在しないため、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="グローバルプロパティ undefined はプリミティブ値 undefined を表します。これは JavaScript におけるプリミティブ型の一つです。"><code>undefined</code></a>の値を取ることになります。</p> <h2 id="Example" name="Example">例</h2> @@ -72,7 +72,7 @@ if (navigator.mediaDevices.getSupportedConstraints()["channelCount"]) { <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> + <li><a href="/ja/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> <li>{{domxref("MediaDevices.getSupportedConstraints()")}}</li> <li>{{domxref("MediaTrackSupportedConstraints")}}</li> <li>{{domxref("MediaStreamTrack")}}</li> diff --git a/files/ja/web/api/mediatracksupportedconstraints/deviceid/index.html b/files/ja/web/api/mediatracksupportedconstraints/deviceid/index.html index 460a913198..9ff12dd82f 100644 --- a/files/ja/web/api/mediatracksupportedconstraints/deviceid/index.html +++ b/files/ja/web/api/mediatracksupportedconstraints/deviceid/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/MediaTrackSupportedConstraints/deviceId --- <p>{{APIRef("Media Capture and Streams")}}</p> -<p><a href="https://developer.mozilla.org/ja/docs/Web/API/MediaTrackSupportedConstraints" title="MediaTrackSupportedConstraintsディクショナリは、MediaStreamTrackオブジェクトを実装しているuser agentやブラウザによって理解できる制約可能なプロパティの一覧を表します。MediaDevices.getSupportedConstraints()によって、MediaTrackSupportedConstraintsに適合するオブジェクトが戻り値として返されます。"><code>MediaTrackSupportedConstraints</code></a>ディクショナリーの<strong><code>deviceId</code></strong>プロパティは読み取り専用のBooleanの値です。<a href="https://developer.mozilla.org/ja/docs/Glossary/user_agent" rel="nofollow" title="この用語 (user agent) の定義はまだ書かれていません。ぜひご寄稿ください！">user agent</a>が<strong><code>deviceId</code></strong>の制約をサポートしている場合、<a href="https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getSupportedConstraints" title="MediaDevices インタフェースのgetSupportedConstraints() メソッドは、MediaTrackSupportedConstraintsディクショナリをベースとするオブジェクトを戻り値として返します。このオブジェクトのメンバーフィールドは、user agentが扱えるメディア制約に関するプロパティを表しています。"><code>MediaDevices.getSupportedConstraints()</code></a>の戻り値のオブジェクトに含まれ<code>true</code>が設定されます。この制約がサポートされない場合は含まれないため、<code>false</code>になることはありません。</p> +<p><a href="/ja/docs/Web/API/MediaTrackSupportedConstraints" title="MediaTrackSupportedConstraintsディクショナリは、MediaStreamTrackオブジェクトを実装しているuser agentやブラウザによって理解できる制約可能なプロパティの一覧を表します。MediaDevices.getSupportedConstraints()によって、MediaTrackSupportedConstraintsに適合するオブジェクトが戻り値として返されます。"><code>MediaTrackSupportedConstraints</code></a>ディクショナリーの<strong><code>deviceId</code></strong>プロパティは読み取り専用のBooleanの値です。<a href="/ja/docs/Glossary/user_agent" rel="nofollow" title="この用語 (user agent) の定義はまだ書かれていません。ぜひご寄稿ください！">user agent</a>が<strong><code>deviceId</code></strong>の制約をサポートしている場合、<a href="/ja/docs/Web/API/MediaDevices/getSupportedConstraints" title="MediaDevices インタフェースのgetSupportedConstraints() メソッドは、MediaTrackSupportedConstraintsディクショナリをベースとするオブジェクトを戻り値として返します。このオブジェクトのメンバーフィールドは、user agentが扱えるメディア制約に関するプロパティを表しています。"><code>MediaDevices.getSupportedConstraints()</code></a>の戻り値のオブジェクトに含まれ<code>true</code>が設定されます。この制約がサポートされない場合は含まれないため、<code>false</code>になることはありません。</p> <p>サポートされている制約のディクショナリーは<code>navigator.mediaDevices.getSupportedConstraints()</code>を呼び出すことで取得できます。</p> @@ -15,7 +15,7 @@ translation_of: Web/API/MediaTrackSupportedConstraints/deviceId <h3 id="値">値</h3> -<p>ユーザエージェント<code>deviceId</code>の制約をサポートしている場合、このプロパティはディクショナリーの中に含まれ、その値は常に<code>true</code>の値です。このプロパティが存在しない場合は、サポートされている制約ディクショナリーには存在しないため、<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="グローバルプロパティ undefined はプリミティブ値 undefined を表します。これは JavaScript におけるプリミティブ型の一つです。"><code>undefined</code></a>の値を取ることになります。</p> +<p>ユーザエージェント<code>deviceId</code>の制約をサポートしている場合、このプロパティはディクショナリーの中に含まれ、その値は常に<code>true</code>の値です。このプロパティが存在しない場合は、サポートされている制約ディクショナリーには存在しないため、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="グローバルプロパティ undefined はプリミティブ値 undefined を表します。これは JavaScript におけるプリミティブ型の一つです。"><code>undefined</code></a>の値を取ることになります。</p> <h2 id="Example" name="Example">例</h2> @@ -72,7 +72,7 @@ if (navigator.mediaDevices.getSupportedConstraints()["deviceId"]) { <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> + <li><a href="/ja/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> <li>{{domxref("MediaDevices.getSupportedConstraints()")}}</li> <li>{{domxref("MediaTrackSupportedConstraints")}}</li> <li>{{domxref("MediaStreamTrack")}}</li> diff --git a/files/ja/web/api/mediatracksupportedconstraints/echocancellation/index.html b/files/ja/web/api/mediatracksupportedconstraints/echocancellation/index.html index 0f4d42a3cc..3e65e32fc0 100644 --- a/files/ja/web/api/mediatracksupportedconstraints/echocancellation/index.html +++ b/files/ja/web/api/mediatracksupportedconstraints/echocancellation/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/MediaTrackSupportedConstraints/echoCancellation --- <p>{{APIRef("Media Capture and Streams")}}</p> -<p><a href="https://developer.mozilla.org/ja/docs/Web/API/MediaTrackSupportedConstraints" title="MediaTrackSupportedConstraintsディクショナリは、MediaStreamTrackオブジェクトを実装しているuser agentやブラウザによって理解できる制約可能なプロパティの一覧を表します。MediaDevices.getSupportedConstraints()によって、MediaTrackSupportedConstraintsに適合するオブジェクトが戻り値として返されます。"><code>MediaTrackSupportedConstraints</code></a>ディクショナリーの<strong><code>echoCancellation</code></strong>プロパティは読み取り専用のBooleanの値です。<a href="https://developer.mozilla.org/ja/docs/Glossary/user_agent" rel="nofollow" title="この用語 (user agent) の定義はまだ書かれていません。ぜひご寄稿ください！">user agent</a>が<strong><code>echoCancellation</code></strong>の制約をサポートしている場合、<a href="https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getSupportedConstraints" title="MediaDevices インタフェースのgetSupportedConstraints() メソッドは、MediaTrackSupportedConstraintsディクショナリをベースとするオブジェクトを戻り値として返します。このオブジェクトのメンバーフィールドは、user agentが扱えるメディア制約に関するプロパティを表しています。"><code>MediaDevices.getSupportedConstraints()</code></a>の戻り値のオブジェクトに含まれ<code>true</code>が設定されます。この制約がサポートされない場合は含まれないため、<code>false</code>になることはありません。</p> +<p><a href="/ja/docs/Web/API/MediaTrackSupportedConstraints" title="MediaTrackSupportedConstraintsディクショナリは、MediaStreamTrackオブジェクトを実装しているuser agentやブラウザによって理解できる制約可能なプロパティの一覧を表します。MediaDevices.getSupportedConstraints()によって、MediaTrackSupportedConstraintsに適合するオブジェクトが戻り値として返されます。"><code>MediaTrackSupportedConstraints</code></a>ディクショナリーの<strong><code>echoCancellation</code></strong>プロパティは読み取り専用のBooleanの値です。<a href="/ja/docs/Glossary/user_agent" rel="nofollow" title="この用語 (user agent) の定義はまだ書かれていません。ぜひご寄稿ください！">user agent</a>が<strong><code>echoCancellation</code></strong>の制約をサポートしている場合、<a href="/ja/docs/Web/API/MediaDevices/getSupportedConstraints" title="MediaDevices インタフェースのgetSupportedConstraints() メソッドは、MediaTrackSupportedConstraintsディクショナリをベースとするオブジェクトを戻り値として返します。このオブジェクトのメンバーフィールドは、user agentが扱えるメディア制約に関するプロパティを表しています。"><code>MediaDevices.getSupportedConstraints()</code></a>の戻り値のオブジェクトに含まれ<code>true</code>が設定されます。この制約がサポートされない場合は含まれないため、<code>false</code>になることはありません。</p> <p>サポートされている制約のディクショナリーは<code>navigator.mediaDevices.getSupportedConstraints()</code>を呼び出すことで取得できます。</p> @@ -15,7 +15,7 @@ translation_of: Web/API/MediaTrackSupportedConstraints/echoCancellation <h3 id="値">値</h3> -<p>ユーザエージェント<code>echoCancellation</code>の制約をサポートしている場合、このプロパティはディクショナリーの中に含まれ、その値は常に<code>true</code>の値です。このプロパティが存在しない場合は、サポートされている制約ディクショナリーには存在しないため、<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="グローバルプロパティ undefined はプリミティブ値 undefined を表します。これは JavaScript におけるプリミティブ型の一つです。"><code>undefined</code></a>の値を取ることになります。</p> +<p>ユーザエージェント<code>echoCancellation</code>の制約をサポートしている場合、このプロパティはディクショナリーの中に含まれ、その値は常に<code>true</code>の値です。このプロパティが存在しない場合は、サポートされている制約ディクショナリーには存在しないため、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="グローバルプロパティ undefined はプリミティブ値 undefined を表します。これは JavaScript におけるプリミティブ型の一つです。"><code>undefined</code></a>の値を取ることになります。</p> <h2 id="Example" name="Example">例</h2> @@ -72,7 +72,7 @@ if (navigator.mediaDevices.getSupportedConstraints()["echoCancellation"]) { <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> + <li><a href="/ja/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> <li>{{domxref("MediaDevices.getSupportedConstraints()")}}</li> <li>{{domxref("MediaTrackSupportedConstraints")}}</li> <li>{{domxref("MediaStreamTrack")}}</li> diff --git a/files/ja/web/api/mediatracksupportedconstraints/framerate/index.html b/files/ja/web/api/mediatracksupportedconstraints/framerate/index.html index 4efa18dfde..1b3a166197 100644 --- a/files/ja/web/api/mediatracksupportedconstraints/framerate/index.html +++ b/files/ja/web/api/mediatracksupportedconstraints/framerate/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/MediaTrackSupportedConstraints/frameRate <div> </div> -<p><a href="https://developer.mozilla.org/ja/docs/Web/API/MediaTrackSupportedConstraints" title="MediaTrackSupportedConstraintsディクショナリは、MediaStreamTrackオブジェクトを実装しているuser agentやブラウザによって理解できる制約可能なプロパティの一覧を表します。MediaDevices.getSupportedConstraints()によって、MediaTrackSupportedConstraintsに適合するオブジェクトが戻り値として返されます。"><code>MediaTrackSupportedConstraints</code></a>ディクショナリーの<strong><code>frameRate</code></strong>プロパティは読み取り専用のBooleanの値です。<a href="https://developer.mozilla.org/ja/docs/Glossary/user_agent" rel="nofollow" title="この用語 (user agent) の定義はまだ書かれていません。ぜひご寄稿ください！">user agent</a>が<strong><code>frameRate</code></strong>の制約をサポートしている場合、<a href="https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getSupportedConstraints" title="MediaDevices インタフェースのgetSupportedConstraints() メソッドは、MediaTrackSupportedConstraintsディクショナリをベースとするオブジェクトを戻り値として返します。このオブジェクトのメンバーフィールドは、user agentが扱えるメディア制約に関するプロパティを表しています。"><code>MediaDevices.getSupportedConstraints()</code></a>の戻り値のオブジェクトに含まれ<code>true</code>が設定されます。この制約がサポートされない場合は含まれないため、<code>false</code>になることはありません。</p> +<p><a href="/ja/docs/Web/API/MediaTrackSupportedConstraints" title="MediaTrackSupportedConstraintsディクショナリは、MediaStreamTrackオブジェクトを実装しているuser agentやブラウザによって理解できる制約可能なプロパティの一覧を表します。MediaDevices.getSupportedConstraints()によって、MediaTrackSupportedConstraintsに適合するオブジェクトが戻り値として返されます。"><code>MediaTrackSupportedConstraints</code></a>ディクショナリーの<strong><code>frameRate</code></strong>プロパティは読み取り専用のBooleanの値です。<a href="/ja/docs/Glossary/user_agent" rel="nofollow" title="この用語 (user agent) の定義はまだ書かれていません。ぜひご寄稿ください！">user agent</a>が<strong><code>frameRate</code></strong>の制約をサポートしている場合、<a href="/ja/docs/Web/API/MediaDevices/getSupportedConstraints" title="MediaDevices インタフェースのgetSupportedConstraints() メソッドは、MediaTrackSupportedConstraintsディクショナリをベースとするオブジェクトを戻り値として返します。このオブジェクトのメンバーフィールドは、user agentが扱えるメディア制約に関するプロパティを表しています。"><code>MediaDevices.getSupportedConstraints()</code></a>の戻り値のオブジェクトに含まれ<code>true</code>が設定されます。この制約がサポートされない場合は含まれないため、<code>false</code>になることはありません。</p> <p><code>frameRate</code>制約は、新しいビデオトラックのフレームレートの許容できる上限と下限、あるいは正確なフレームレートを表すのに用いられます。このプロパティの値を確認することで、フレームレートでのビデオトラック設定の制約をユーザーエージェントが対応しているかを特定することができます。どのように使われるかは{{anch("Example", "example")}}を見てください。</p> @@ -88,7 +88,7 @@ if (navigator.mediaDevices.getSupportedConstraints()["frameRate"]) { <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> + <li><a href="/ja/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> <li>{{domxref("MediaDevices.getSupportedConstraints()")}}</li> <li>{{domxref("MediaTrackSupportedConstraints")}}</li> <li>{{domxref("MediaStreamTrack")}}</li> diff --git a/files/ja/web/api/mediatracksupportedconstraints/groupid/index.html b/files/ja/web/api/mediatracksupportedconstraints/groupid/index.html index 6df97986fb..a0aa26eb6c 100644 --- a/files/ja/web/api/mediatracksupportedconstraints/groupid/index.html +++ b/files/ja/web/api/mediatracksupportedconstraints/groupid/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/MediaTrackSupportedConstraints/groupId --- <p>{{APIRef("Media Capture and Streams")}}</p> -<p><a href="https://developer.mozilla.org/ja/docs/Web/API/MediaTrackSupportedConstraints" title="MediaTrackSupportedConstraintsディクショナリは、MediaStreamTrackオブジェクトを実装しているuser agentやブラウザによって理解できる制約可能なプロパティの一覧を表します。MediaDevices.getSupportedConstraints()によって、MediaTrackSupportedConstraintsに適合するオブジェクトが戻り値として返されます。"><code>MediaTrackSupportedConstraints</code></a>ディクショナリーの<strong><code>groupId</code></strong>プロパティは読み取り専用のBooleanの値です。<a href="https://developer.mozilla.org/ja/docs/Glossary/user_agent" rel="nofollow" title="この用語 (user agent) の定義はまだ書かれていません。ぜひご寄稿ください！">user agent</a>が<strong><code>groupId</code></strong>の制約をサポートしている場合、<a href="https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getSupportedConstraints" title="MediaDevices インタフェースのgetSupportedConstraints() メソッドは、MediaTrackSupportedConstraintsディクショナリをベースとするオブジェクトを戻り値として返します。このオブジェクトのメンバーフィールドは、user agentが扱えるメディア制約に関するプロパティを表しています。"><code>MediaDevices.getSupportedConstraints()</code></a>の戻り値のオブジェクトに含まれ<code>true</code>が設定されます。この制約がサポートされない場合は含まれないため、<code>false</code>になることはありません。</p> +<p><a href="/ja/docs/Web/API/MediaTrackSupportedConstraints" title="MediaTrackSupportedConstraintsディクショナリは、MediaStreamTrackオブジェクトを実装しているuser agentやブラウザによって理解できる制約可能なプロパティの一覧を表します。MediaDevices.getSupportedConstraints()によって、MediaTrackSupportedConstraintsに適合するオブジェクトが戻り値として返されます。"><code>MediaTrackSupportedConstraints</code></a>ディクショナリーの<strong><code>groupId</code></strong>プロパティは読み取り専用のBooleanの値です。<a href="/ja/docs/Glossary/user_agent" rel="nofollow" title="この用語 (user agent) の定義はまだ書かれていません。ぜひご寄稿ください！">user agent</a>が<strong><code>groupId</code></strong>の制約をサポートしている場合、<a href="/ja/docs/Web/API/MediaDevices/getSupportedConstraints" title="MediaDevices インタフェースのgetSupportedConstraints() メソッドは、MediaTrackSupportedConstraintsディクショナリをベースとするオブジェクトを戻り値として返します。このオブジェクトのメンバーフィールドは、user agentが扱えるメディア制約に関するプロパティを表しています。"><code>MediaDevices.getSupportedConstraints()</code></a>の戻り値のオブジェクトに含まれ<code>true</code>が設定されます。この制約がサポートされない場合は含まれないため、<code>false</code>になることはありません。</p> <p>サポートされている制約のディクショナリーは<code>navigator.mediaDevices.getSupportedConstraints()</code>を呼び出すことで取得できます。</p> @@ -15,7 +15,7 @@ translation_of: Web/API/MediaTrackSupportedConstraints/groupId <h3 id="値">値</h3> -<p>ユーザエージェント<code>groupId</code>の制約をサポートしている場合、このプロパティはディクショナリーの中に含まれ、その値は常に<code>true</code>の値です。このプロパティが存在しない場合は、サポートされている制約ディクショナリーには存在しないため、<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="グローバルプロパティ undefined はプリミティブ値 undefined を表します。これは JavaScript におけるプリミティブ型の一つです。"><code>undefined</code></a>の値を取ることになります。</p> +<p>ユーザエージェント<code>groupId</code>の制約をサポートしている場合、このプロパティはディクショナリーの中に含まれ、その値は常に<code>true</code>の値です。このプロパティが存在しない場合は、サポートされている制約ディクショナリーには存在しないため、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="グローバルプロパティ undefined はプリミティブ値 undefined を表します。これは JavaScript におけるプリミティブ型の一つです。"><code>undefined</code></a>の値を取ることになります。</p> <h2 id="Example" name="Example">例</h2> @@ -72,7 +72,7 @@ if (navigator.mediaDevices.getSupportedConstraints()["groupId"]) { <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> + <li><a href="/ja/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> <li>{{domxref("MediaDevices.getSupportedConstraints()")}}</li> <li>{{domxref("MediaTrackSupportedConstraints")}}</li> <li>{{domxref("MediaStreamTrack")}}</li> diff --git a/files/ja/web/api/mediatracksupportedconstraints/height/index.html b/files/ja/web/api/mediatracksupportedconstraints/height/index.html index 0f2ab30968..cb3e20744d 100644 --- a/files/ja/web/api/mediatracksupportedconstraints/height/index.html +++ b/files/ja/web/api/mediatracksupportedconstraints/height/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/MediaTrackSupportedConstraints/height --- <p>{{APIRef("Media Capture and Streams")}}</p> -<p><a href="https://developer.mozilla.org/ja/docs/Web/API/MediaTrackSupportedConstraints" title="MediaTrackSupportedConstraintsディクショナリは、MediaStreamTrackオブジェクトを実装しているuser agentやブラウザによって理解できる制約可能なプロパティの一覧を表します。MediaDevices.getSupportedConstraints()によって、MediaTrackSupportedConstraintsに適合するオブジェクトが戻り値として返されます。"><code>MediaTrackSupportedConstraints</code></a>ディクショナリーの<strong><code>height</code></strong>プロパティは読み取り専用のBooleanの値です。<a href="https://developer.mozilla.org/ja/docs/Glossary/user_agent" rel="nofollow" title="この用語 (user agent) の定義はまだ書かれていません。ぜひご寄稿ください！">user agent</a>が<strong><code>height</code></strong>の制約をサポートしている場合、<a href="https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getSupportedConstraints" title="MediaDevices インタフェースのgetSupportedConstraints() メソッドは、MediaTrackSupportedConstraintsディクショナリをベースとするオブジェクトを戻り値として返します。このオブジェクトのメンバーフィールドは、user agentが扱えるメディア制約に関するプロパティを表しています。"><code>MediaDevices.getSupportedConstraints()</code></a>の戻り値のオブジェクトに含まれ<code>true</code>が設定されます。この制約がサポートされない場合は含まれないため、<code>false</code>になることはありません。</p> +<p><a href="/ja/docs/Web/API/MediaTrackSupportedConstraints" title="MediaTrackSupportedConstraintsディクショナリは、MediaStreamTrackオブジェクトを実装しているuser agentやブラウザによって理解できる制約可能なプロパティの一覧を表します。MediaDevices.getSupportedConstraints()によって、MediaTrackSupportedConstraintsに適合するオブジェクトが戻り値として返されます。"><code>MediaTrackSupportedConstraints</code></a>ディクショナリーの<strong><code>height</code></strong>プロパティは読み取り専用のBooleanの値です。<a href="/ja/docs/Glossary/user_agent" rel="nofollow" title="この用語 (user agent) の定義はまだ書かれていません。ぜひご寄稿ください！">user agent</a>が<strong><code>height</code></strong>の制約をサポートしている場合、<a href="/ja/docs/Web/API/MediaDevices/getSupportedConstraints" title="MediaDevices インタフェースのgetSupportedConstraints() メソッドは、MediaTrackSupportedConstraintsディクショナリをベースとするオブジェクトを戻り値として返します。このオブジェクトのメンバーフィールドは、user agentが扱えるメディア制約に関するプロパティを表しています。"><code>MediaDevices.getSupportedConstraints()</code></a>の戻り値のオブジェクトに含まれ<code>true</code>が設定されます。この制約がサポートされない場合は含まれないため、<code>false</code>になることはありません。</p> <p>サポートされている制約のディクショナリーは<code>navigator.mediaDevices.getSupportedConstraints()</code>を呼び出すことで取得できます。</p> @@ -15,7 +15,7 @@ translation_of: Web/API/MediaTrackSupportedConstraints/height <h3 id="値">値</h3> -<p>ユーザエージェント<code>height</code>の制約をサポートしている場合、このプロパティはディクショナリーの中に含まれ、その値は常に<code>true</code>の値です。このプロパティが存在しない場合は、サポートされている制約ディクショナリーには存在しないため、<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="グローバルプロパティ undefined はプリミティブ値 undefined を表します。これは JavaScript におけるプリミティブ型の一つです。"><code>undefined</code></a>の値を取ることになります。</p> +<p>ユーザエージェント<code>height</code>の制約をサポートしている場合、このプロパティはディクショナリーの中に含まれ、その値は常に<code>true</code>の値です。このプロパティが存在しない場合は、サポートされている制約ディクショナリーには存在しないため、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="グローバルプロパティ undefined はプリミティブ値 undefined を表します。これは JavaScript におけるプリミティブ型の一つです。"><code>undefined</code></a>の値を取ることになります。</p> <h2 id="Example" name="Example">例</h2> @@ -72,7 +72,7 @@ if (navigator.mediaDevices.getSupportedConstraints()["height"]) { <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> + <li><a href="/ja/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> <li>{{domxref("MediaDevices.getSupportedConstraints()")}}</li> <li>{{domxref("MediaTrackSupportedConstraints")}}</li> <li>{{domxref("MediaStreamTrack")}}</li> diff --git a/files/ja/web/api/mediatracksupportedconstraints/index.html b/files/ja/web/api/mediatracksupportedconstraints/index.html index aa232ebfd2..a47541054d 100644 --- a/files/ja/web/api/mediatracksupportedconstraints/index.html +++ b/files/ja/web/api/mediatracksupportedconstraints/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/MediaTrackSupportedConstraints <p>実際の制約セットは{{domxref("MediaTrackConstraints")}}ディクショナリをベースにしたオブジェクトで表現されます。</p> -<p>制約がどのように動作するかについての詳細を知りたい場合は、<a href="/en-US/docs/Web/API/Media_Streams_API/Constraints">Capabilities, constraints, and settings</a>を読んでください。</p> +<p>制約がどのように動作するかについての詳細を知りたい場合は、<a href="/ja/docs/Web/API/Media_Streams_API/Constraints">Capabilities, constraints, and settings</a>を読んでください。</p> <h2 id="プロパティ">プロパティ</h2> @@ -19,35 +19,35 @@ translation_of: Web/API/MediaTrackSupportedConstraints <dl> <dt>{{domxref("MediaTrackSupportedConstraints.autoGainControl", "autoGainControl")}}</dt> - <dd>実行環境で<code><a href="/en-US/docs/Web/API/MediaTrackConstraints#autoGainControl">autoGainControl</a></code>制約がサポートされている場合は、Boolean型の<code>true</code>の値になります。</dd> + <dd>実行環境で<code><a href="/ja/docs/Web/API/MediaTrackConstraints#autoGainControl">autoGainControl</a></code>制約がサポートされている場合は、Boolean型の<code>true</code>の値になります。</dd> <dt>{{domxref("MediaTrackSupportedConstraints.width", "width")}}</dt> - <dd>実行環境で<code><a href="/en-US/docs/Web/API/MediaTrackConstraints#width">width</a></code>制約がサポートされている場合は、Boolean型の<code>true</code>の値になります。</dd> + <dd>実行環境で<code><a href="/ja/docs/Web/API/MediaTrackConstraints#width">width</a></code>制約がサポートされている場合は、Boolean型の<code>true</code>の値になります。</dd> <dt>{{domxref("MediaTrackSupportedConstraints.height", "height")}}</dt> - <dd>実行環境で<code><a href="/en-US/docs/Web/API/MediaTrackConstraints#height">height</a></code>制約がサポートされている場合は、Boolean型の<code>true</code>の値になります。</dd> + <dd>実行環境で<code><a href="/ja/docs/Web/API/MediaTrackConstraints#height">height</a></code>制約がサポートされている場合は、Boolean型の<code>true</code>の値になります。</dd> <dt>{{domxref("MediaTrackSupportedConstraints.aspectRatio", "aspectRatio")}}</dt> - <dd>実行環境で<code><a href="/en-US/docs/Web/API/MediaTrackConstraints#aspectRatio">aspectRatio</a></code>制約がサポートされている場合は、Boolean型の<code>true</code>の値になります。</dd> + <dd>実行環境で<code><a href="/ja/docs/Web/API/MediaTrackConstraints#aspectRatio">aspectRatio</a></code>制約がサポートされている場合は、Boolean型の<code>true</code>の値になります。</dd> <dt>{{domxref("MediaTrackSupportedConstraints.frameRate", "frameRate")}}</dt> - <dd>実行環境で<code><a href="/en-US/docs/Web/API/MediaTrackConstraints#frameRate">frameRate</a></code>制約がサポートされている場合は、Boolean型の<code>true</code>の値になります。</dd> + <dd>実行環境で<code><a href="/ja/docs/Web/API/MediaTrackConstraints#frameRate">frameRate</a></code>制約がサポートされている場合は、Boolean型の<code>true</code>の値になります。</dd> <dt>{{domxref("MediaTrackSupportedConstraints.facingMode", "facingMode")}}</dt> - <dd>実行環境で<code><a href="/en-US/docs/Web/API/MediaTrackConstraints#facingMode">facingMode</a></code>制約がサポートされている場合は、Boolean型の<code>true</code>の値になります。</dd> + <dd>実行環境で<code><a href="/ja/docs/Web/API/MediaTrackConstraints#facingMode">facingMode</a></code>制約がサポートされている場合は、Boolean型の<code>true</code>の値になります。</dd> <dt>{{domxref("MediaTrackSupportedConstraints.volume", "volume")}}</dt> - <dd>実行環境で<code><a href="/en-US/docs/Web/API/MediaTrackConstraints#volume">volume</a></code>制約がサポートされている場合は、Boolean型の<code>true</code>の値になります。</dd> + <dd>実行環境で<code><a href="/ja/docs/Web/API/MediaTrackConstraints#volume">volume</a></code>制約がサポートされている場合は、Boolean型の<code>true</code>の値になります。</dd> <dt>{{domxref("MediaTrackSupportedConstraints.sampleRate", "sampleRate")}}</dt> - <dd>実行環境で<code><a href="/en-US/docs/Web/API/MediaTrackConstraints#sampleRate">sampleRate</a></code>制約がサポートされている場合は、Boolean型の<code>true</code>の値になります。</dd> + <dd>実行環境で<code><a href="/ja/docs/Web/API/MediaTrackConstraints#sampleRate">sampleRate</a></code>制約がサポートされている場合は、Boolean型の<code>true</code>の値になります。</dd> <dt>{{domxref("MediaTrackSupportedConstraints.sampleSize", "sampleSize")}}</dt> - <dd>実行環境で<code><a href="/en-US/docs/Web/API/MediaTrackConstraints#sampleSize">sampleSize</a></code>制約がサポートされている場合は、Boolean型の<code>true</code>の値になります。</dd> + <dd>実行環境で<code><a href="/ja/docs/Web/API/MediaTrackConstraints#sampleSize">sampleSize</a></code>制約がサポートされている場合は、Boolean型の<code>true</code>の値になります。</dd> <dt>{{domxref("MediaTrackSupportedConstraints.echoCancellation", "echoCancellation")}}</dt> - <dd>実行環境で<code><a href="/en-US/docs/Web/API/MediaTrackConstraints#echoCancellation">echoCancellation</a></code>制約がサポートされている場合は、Boolean型の<code>true</code>の値になります。</dd> + <dd>実行環境で<code><a href="/ja/docs/Web/API/MediaTrackConstraints#echoCancellation">echoCancellation</a></code>制約がサポートされている場合は、Boolean型の<code>true</code>の値になります。</dd> <dt>{{domxref("MediaTrackSupportedConstraints.latency", "latency")}}</dt> - <dd>実行環境で<code><a href="/en-US/docs/Web/API/MediaTrackConstraints#latency">latency</a></code> 制約がサポートされている場合は、Boolean型の<code>true</code>の値になります。</dd> + <dd>実行環境で<code><a href="/ja/docs/Web/API/MediaTrackConstraints#latency">latency</a></code> 制約がサポートされている場合は、Boolean型の<code>true</code>の値になります。</dd> <dt>{{domxref("MediaTrackSupportedConstraints.noiseSuppression", "noiseSuppression")}}</dt> - <dd>実行環境で<code><a href="/en-US/docs/Web/API/MediaTrackConstraints#noiseSuppression">noiseSuppression</a></code>制約がサポートされている場合は、Boolean型の<code>true</code>の値になります。</dd> + <dd>実行環境で<code><a href="/ja/docs/Web/API/MediaTrackConstraints#noiseSuppression">noiseSuppression</a></code>制約がサポートされている場合は、Boolean型の<code>true</code>の値になります。</dd> <dt>{{domxref("MediaTrackSupportedConstraints.channelCount", "channelCount")}}</dt> - <dd>実行環境で<code><a href="/en-US/docs/Web/API/MediaTrackConstraints#channelCount">channelCount</a></code>制約がサポートされている場合は、Boolean型の<code>true</code>の値になります。</dd> + <dd>実行環境で<code><a href="/ja/docs/Web/API/MediaTrackConstraints#channelCount">channelCount</a></code>制約がサポートされている場合は、Boolean型の<code>true</code>の値になります。</dd> <dt>{{domxref("MediaTrackSupportedConstraints.deviceId", "deviceId")}}</dt> - <dd>実行環境で<code><a href="/en-US/docs/Web/API/MediaTrackConstraints#deviceId">deviceId</a></code>制約がサポートされている場合は、Boolean型の<code>true</code>の値になります。</dd> + <dd>実行環境で<code><a href="/ja/docs/Web/API/MediaTrackConstraints#deviceId">deviceId</a></code>制約がサポートされている場合は、Boolean型の<code>true</code>の値になります。</dd> <dt>{{domxref("MediaTrackSupportedConstraints.groupId", "groupId")}}</dt> - <dd>実行環境で<code><a href="/en-US/docs/Web/API/MediaTrackConstraints#groupId">groupId</a></code>制約がサポートされている場合は、Boolean型の<code>true</code>の値になります。</dd> + <dd>実行環境で<code><a href="/ja/docs/Web/API/MediaTrackConstraints#groupId">groupId</a></code>制約がサポートされている場合は、Boolean型の<code>true</code>の値になります。</dd> </dl> <h2 id="関連項目">関連項目</h2> diff --git a/files/ja/web/api/mediatracksupportedconstraints/latency/index.html b/files/ja/web/api/mediatracksupportedconstraints/latency/index.html index 6ff89b5494..f5449f27b4 100644 --- a/files/ja/web/api/mediatracksupportedconstraints/latency/index.html +++ b/files/ja/web/api/mediatracksupportedconstraints/latency/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/MediaTrackSupportedConstraints/latency --- <p>{{APIRef("Media Capture and Streams")}}</p> -<p><a href="https://developer.mozilla.org/ja/docs/Web/API/MediaTrackSupportedConstraints" title="MediaTrackSupportedConstraintsディクショナリは、MediaStreamTrackオブジェクトを実装しているuser agentやブラウザによって理解できる制約可能なプロパティの一覧を表します。MediaDevices.getSupportedConstraints()によって、MediaTrackSupportedConstraintsに適合するオブジェクトが戻り値として返されます。"><code>MediaTrackSupportedConstraints</code></a>ディクショナリーの<strong><code>latency</code></strong>プロパティは読み取り専用のBooleanの値です。<a href="https://developer.mozilla.org/ja/docs/Glossary/user_agent" rel="nofollow" title="この用語 (user agent) の定義はまだ書かれていません。ぜひご寄稿ください！">user agent</a>が<code>latency</code>の制約をサポートしている場合、<a href="https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getSupportedConstraints" title="MediaDevices インタフェースのgetSupportedConstraints() メソッドは、MediaTrackSupportedConstraintsディクショナリをベースとするオブジェクトを戻り値として返します。このオブジェクトのメンバーフィールドは、user agentが扱えるメディア制約に関するプロパティを表しています。"><code>MediaDevices.getSupportedConstraints()</code></a>の戻り値のオブジェクトに含まれ<code>true</code>が設定されます。この制約がサポートされない場合は含まれないため、<code>false</code>になることはありません。</p> +<p><a href="/ja/docs/Web/API/MediaTrackSupportedConstraints" title="MediaTrackSupportedConstraintsディクショナリは、MediaStreamTrackオブジェクトを実装しているuser agentやブラウザによって理解できる制約可能なプロパティの一覧を表します。MediaDevices.getSupportedConstraints()によって、MediaTrackSupportedConstraintsに適合するオブジェクトが戻り値として返されます。"><code>MediaTrackSupportedConstraints</code></a>ディクショナリーの<strong><code>latency</code></strong>プロパティは読み取り専用のBooleanの値です。<a href="/ja/docs/Glossary/user_agent" rel="nofollow" title="この用語 (user agent) の定義はまだ書かれていません。ぜひご寄稿ください！">user agent</a>が<code>latency</code>の制約をサポートしている場合、<a href="/ja/docs/Web/API/MediaDevices/getSupportedConstraints" title="MediaDevices インタフェースのgetSupportedConstraints() メソッドは、MediaTrackSupportedConstraintsディクショナリをベースとするオブジェクトを戻り値として返します。このオブジェクトのメンバーフィールドは、user agentが扱えるメディア制約に関するプロパティを表しています。"><code>MediaDevices.getSupportedConstraints()</code></a>の戻り値のオブジェクトに含まれ<code>true</code>が設定されます。この制約がサポートされない場合は含まれないため、<code>false</code>になることはありません。</p> <p>サポートされている制約のディクショナリーは<code>navigator.mediaDevices.getSupportedConstraints()</code>を呼び出すことで取得できます。</p> @@ -15,7 +15,7 @@ translation_of: Web/API/MediaTrackSupportedConstraints/latency <h3 id="値">値</h3> -<p>ユーザエージェント<code>latency</code>の制約をサポートしている場合、このプロパティはディクショナリーの中に含まれ、その値は常に<code>true</code>の値です。このプロパティが存在しない場合は、サポートされている制約ディクショナリーには存在しないため、<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="グローバルプロパティ undefined はプリミティブ値 undefined を表します。これは JavaScript におけるプリミティブ型の一つです。"><code>undefined</code></a>の値を取ることになります。</p> +<p>ユーザエージェント<code>latency</code>の制約をサポートしている場合、このプロパティはディクショナリーの中に含まれ、その値は常に<code>true</code>の値です。このプロパティが存在しない場合は、サポートされている制約ディクショナリーには存在しないため、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="グローバルプロパティ undefined はプリミティブ値 undefined を表します。これは JavaScript におけるプリミティブ型の一つです。"><code>undefined</code></a>の値を取ることになります。</p> <h2 id="Example" name="Example">例</h2> @@ -72,7 +72,7 @@ if (navigator.mediaDevices.getSupportedConstraints()["latency"]) { <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> + <li><a href="/ja/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> <li>{{domxref("MediaDevices.getSupportedConstraints()")}}</li> <li>{{domxref("MediaTrackSupportedConstraints")}}</li> <li>{{domxref("MediaStreamTrack")}}</li> diff --git a/files/ja/web/api/mediatracksupportedconstraints/noisesuppression/index.html b/files/ja/web/api/mediatracksupportedconstraints/noisesuppression/index.html index a189139619..834cf66398 100644 --- a/files/ja/web/api/mediatracksupportedconstraints/noisesuppression/index.html +++ b/files/ja/web/api/mediatracksupportedconstraints/noisesuppression/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/MediaTrackSupportedConstraints/noiseSuppression --- <div>{{APIRef("Media Capture and Streams")}}</div> -<p><a href="https://developer.mozilla.org/ja/docs/Web/API/MediaTrackSupportedConstraints" title="MediaTrackSupportedConstraintsディクショナリは、MediaStreamTrackオブジェクトを実装しているuser agentやブラウザによって理解できる制約可能なプロパティの一覧を表します。MediaDevices.getSupportedConstraints()によって、MediaTrackSupportedConstraintsに適合するオブジェクトが戻り値として返されます。"><code>MediaTrackSupportedConstraints</code></a>ディクショナリーの<strong><code>noiseSuppression</code></strong>プロパティは読み取り専用のBooleanの値です。<a href="https://developer.mozilla.org/ja/docs/Glossary/user_agent" rel="nofollow" title="この用語 (user agent) の定義はまだ書かれていません。ぜひご寄稿ください！">user agent</a>が<strong><code>noiseSuppression</code></strong>の制約をサポートしている場合、<a href="https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getSupportedConstraints" title="MediaDevices インタフェースのgetSupportedConstraints() メソッドは、MediaTrackSupportedConstraintsディクショナリをベースとするオブジェクトを戻り値として返します。このオブジェクトのメンバーフィールドは、user agentが扱えるメディア制約に関するプロパティを表しています。"><code>MediaDevices.getSupportedConstraints()</code></a>の戻り値のオブジェクトに含まれ<code>true</code>が設定されます。この制約がサポートされない場合は含まれないため、<code>false</code>になることはありません。</p> +<p><a href="/ja/docs/Web/API/MediaTrackSupportedConstraints" title="MediaTrackSupportedConstraintsディクショナリは、MediaStreamTrackオブジェクトを実装しているuser agentやブラウザによって理解できる制約可能なプロパティの一覧を表します。MediaDevices.getSupportedConstraints()によって、MediaTrackSupportedConstraintsに適合するオブジェクトが戻り値として返されます。"><code>MediaTrackSupportedConstraints</code></a>ディクショナリーの<strong><code>noiseSuppression</code></strong>プロパティは読み取り専用のBooleanの値です。<a href="/ja/docs/Glossary/user_agent" rel="nofollow" title="この用語 (user agent) の定義はまだ書かれていません。ぜひご寄稿ください！">user agent</a>が<strong><code>noiseSuppression</code></strong>の制約をサポートしている場合、<a href="/ja/docs/Web/API/MediaDevices/getSupportedConstraints" title="MediaDevices インタフェースのgetSupportedConstraints() メソッドは、MediaTrackSupportedConstraintsディクショナリをベースとするオブジェクトを戻り値として返します。このオブジェクトのメンバーフィールドは、user agentが扱えるメディア制約に関するプロパティを表しています。"><code>MediaDevices.getSupportedConstraints()</code></a>の戻り値のオブジェクトに含まれ<code>true</code>が設定されます。この制約がサポートされない場合は含まれないため、<code>false</code>になることはありません。</p> <p>サポートされている制約のディクショナリーは<code>navigator.mediaDevices.getSupportedConstraints()</code>を呼び出すことで取得できます。</p> @@ -17,7 +17,7 @@ translation_of: Web/API/MediaTrackSupportedConstraints/noiseSuppression <h3 id="値">値</h3> -<p>ユーザエージェント<code>noiseSuppression</code>の制約をサポートしている場合、このプロパティはディクショナリーの中に含まれ、その値は常に<code>true</code>の値です。このプロパティが存在しない場合は、サポートされている制約ディクショナリーには存在しないため、<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="グローバルプロパティ undefined はプリミティブ値 undefined を表します。これは JavaScript におけるプリミティブ型の一つです。"><code>undefined</code></a>の値を取ることになります。</p> +<p>ユーザエージェント<code>noiseSuppression</code>の制約をサポートしている場合、このプロパティはディクショナリーの中に含まれ、その値は常に<code>true</code>の値です。このプロパティが存在しない場合は、サポートされている制約ディクショナリーには存在しないため、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="グローバルプロパティ undefined はプリミティブ値 undefined を表します。これは JavaScript におけるプリミティブ型の一つです。"><code>undefined</code></a>の値を取ることになります。</p> <h2 id="例">例</h2> @@ -76,7 +76,7 @@ if (navigator.mediaDevices.getSupportedConstraints()["noiseSuppression"]) { <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> + <li><a href="/ja/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> <li>{{domxref("MediaDevices.getSupportedConstraints()")}}</li> <li>{{domxref("MediaTrackSupportedConstraints")}}</li> <li>{{domxref("MediaStreamTrack")}}</li> diff --git a/files/ja/web/api/mediatracksupportedconstraints/samplerate/index.html b/files/ja/web/api/mediatracksupportedconstraints/samplerate/index.html index f2d049a034..2b9711e3a6 100644 --- a/files/ja/web/api/mediatracksupportedconstraints/samplerate/index.html +++ b/files/ja/web/api/mediatracksupportedconstraints/samplerate/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/MediaTrackSupportedConstraints/sampleRate --- <p>{{APIRef("Media Capture and Streams")}}</p> -<p><a href="https://developer.mozilla.org/ja/docs/Web/API/MediaTrackSupportedConstraints" title="MediaTrackSupportedConstraintsディクショナリは、MediaStreamTrackオブジェクトを実装しているuser agentやブラウザによって理解できる制約可能なプロパティの一覧を表します。MediaDevices.getSupportedConstraints()によって、MediaTrackSupportedConstraintsに適合するオブジェクトが戻り値として返されます。"><code>MediaTrackSupportedConstraints</code></a>ディクショナリーの<strong><code>sampleRate</code></strong>プロパティは読み取り専用のBooleanの値です。<a href="https://developer.mozilla.org/ja/docs/Glossary/user_agent" rel="nofollow" title="この用語 (user agent) の定義はまだ書かれていません。ぜひご寄稿ください！">user agent</a>が<code>sampleRate</code>の制約をサポートしている場合、<a href="https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getSupportedConstraints" title="MediaDevices インタフェースのgetSupportedConstraints() メソッドは、MediaTrackSupportedConstraintsディクショナリをベースとするオブジェクトを戻り値として返します。このオブジェクトのメンバーフィールドは、user agentが扱えるメディア制約に関するプロパティを表しています。"><code>MediaDevices.getSupportedConstraints()</code></a>の戻り値のオブジェクトに含まれ<code>true</code>が設定されます。この制約がサポートされない場合は含まれないため、<code>false</code>になることはありません。</p> +<p><a href="/ja/docs/Web/API/MediaTrackSupportedConstraints" title="MediaTrackSupportedConstraintsディクショナリは、MediaStreamTrackオブジェクトを実装しているuser agentやブラウザによって理解できる制約可能なプロパティの一覧を表します。MediaDevices.getSupportedConstraints()によって、MediaTrackSupportedConstraintsに適合するオブジェクトが戻り値として返されます。"><code>MediaTrackSupportedConstraints</code></a>ディクショナリーの<strong><code>sampleRate</code></strong>プロパティは読み取り専用のBooleanの値です。<a href="/ja/docs/Glossary/user_agent" rel="nofollow" title="この用語 (user agent) の定義はまだ書かれていません。ぜひご寄稿ください！">user agent</a>が<code>sampleRate</code>の制約をサポートしている場合、<a href="/ja/docs/Web/API/MediaDevices/getSupportedConstraints" title="MediaDevices インタフェースのgetSupportedConstraints() メソッドは、MediaTrackSupportedConstraintsディクショナリをベースとするオブジェクトを戻り値として返します。このオブジェクトのメンバーフィールドは、user agentが扱えるメディア制約に関するプロパティを表しています。"><code>MediaDevices.getSupportedConstraints()</code></a>の戻り値のオブジェクトに含まれ<code>true</code>が設定されます。この制約がサポートされない場合は含まれないため、<code>false</code>になることはありません。</p> <p>サポートされている制約のディクショナリーは<code>navigator.mediaDevices.getSupportedConstraints()</code>を呼び出すことで取得できます。</p> @@ -15,7 +15,7 @@ translation_of: Web/API/MediaTrackSupportedConstraints/sampleRate <h3 id="値">値</h3> -<p>ユーザエージェント<code>sampleRate</code>の制約をサポートしている場合、このプロパティはディクショナリーの中に含まれ、その値は常に<code>true</code>の値です。このプロパティが存在しない場合は、サポートされている制約ディクショナリーには存在しないため、<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="グローバルプロパティ undefined はプリミティブ値 undefined を表します。これは JavaScript におけるプリミティブ型の一つです。"><code>undefined</code></a>の値を取ることになります。</p> +<p>ユーザエージェント<code>sampleRate</code>の制約をサポートしている場合、このプロパティはディクショナリーの中に含まれ、その値は常に<code>true</code>の値です。このプロパティが存在しない場合は、サポートされている制約ディクショナリーには存在しないため、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="グローバルプロパティ undefined はプリミティブ値 undefined を表します。これは JavaScript におけるプリミティブ型の一つです。"><code>undefined</code></a>の値を取ることになります。</p> <h2 id="Example" name="Example">例</h2> @@ -72,7 +72,7 @@ if (navigator.mediaDevices.getSupportedConstraints()["sampleRate"]) { <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> + <li><a href="/ja/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> <li>{{domxref("MediaDevices.getSupportedConstraints()")}}</li> <li>{{domxref("MediaTrackSupportedConstraints")}}</li> <li>{{domxref("MediaStreamTrack")}}</li> diff --git a/files/ja/web/api/mediatracksupportedconstraints/samplesize/index.html b/files/ja/web/api/mediatracksupportedconstraints/samplesize/index.html index c384407c6f..cad0e3b6f6 100644 --- a/files/ja/web/api/mediatracksupportedconstraints/samplesize/index.html +++ b/files/ja/web/api/mediatracksupportedconstraints/samplesize/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/MediaTrackSupportedConstraints/sampleSize --- <p>{{APIRef("Media Capture and Streams")}}</p> -<p><a href="https://developer.mozilla.org/ja/docs/Web/API/MediaTrackSupportedConstraints" title="MediaTrackSupportedConstraintsディクショナリは、MediaStreamTrackオブジェクトを実装しているuser agentやブラウザによって理解できる制約可能なプロパティの一覧を表します。MediaDevices.getSupportedConstraints()によって、MediaTrackSupportedConstraintsに適合するオブジェクトが戻り値として返されます。"><code>MediaTrackSupportedConstraints</code></a>ディクショナリーの<strong><code>sampleSize</code></strong>プロパティは読み取り専用のBooleanの値です。<a href="https://developer.mozilla.org/ja/docs/Glossary/user_agent" rel="nofollow" title="この用語 (user agent) の定義はまだ書かれていません。ぜひご寄稿ください！">user agent</a>が<code>sampleSize</code>の制約をサポートしている場合、<a href="https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getSupportedConstraints" title="MediaDevices インタフェースのgetSupportedConstraints() メソッドは、MediaTrackSupportedConstraintsディクショナリをベースとするオブジェクトを戻り値として返します。このオブジェクトのメンバーフィールドは、user agentが扱えるメディア制約に関するプロパティを表しています。"><code>MediaDevices.getSupportedConstraints()</code></a>の戻り値のオブジェクトに含まれ<code>true</code>が設定されます。この制約がサポートされない場合は含まれないため、<code>false</code>になることはありません。</p> +<p><a href="/ja/docs/Web/API/MediaTrackSupportedConstraints" title="MediaTrackSupportedConstraintsディクショナリは、MediaStreamTrackオブジェクトを実装しているuser agentやブラウザによって理解できる制約可能なプロパティの一覧を表します。MediaDevices.getSupportedConstraints()によって、MediaTrackSupportedConstraintsに適合するオブジェクトが戻り値として返されます。"><code>MediaTrackSupportedConstraints</code></a>ディクショナリーの<strong><code>sampleSize</code></strong>プロパティは読み取り専用のBooleanの値です。<a href="/ja/docs/Glossary/user_agent" rel="nofollow" title="この用語 (user agent) の定義はまだ書かれていません。ぜひご寄稿ください！">user agent</a>が<code>sampleSize</code>の制約をサポートしている場合、<a href="/ja/docs/Web/API/MediaDevices/getSupportedConstraints" title="MediaDevices インタフェースのgetSupportedConstraints() メソッドは、MediaTrackSupportedConstraintsディクショナリをベースとするオブジェクトを戻り値として返します。このオブジェクトのメンバーフィールドは、user agentが扱えるメディア制約に関するプロパティを表しています。"><code>MediaDevices.getSupportedConstraints()</code></a>の戻り値のオブジェクトに含まれ<code>true</code>が設定されます。この制約がサポートされない場合は含まれないため、<code>false</code>になることはありません。</p> <p>サポートされている制約のディクショナリーは<code>navigator.mediaDevices.getSupportedConstraints()</code>を呼び出すことで取得できます。</p> @@ -15,7 +15,7 @@ translation_of: Web/API/MediaTrackSupportedConstraints/sampleSize <h3 id="値">値</h3> -<p>ユーザエージェント<code>sampleSize</code>の制約をサポートしている場合、このプロパティはディクショナリーの中に含まれ、その値は常に<code>true</code>の値です。このプロパティが存在しない場合は、サポートされている制約ディクショナリーには存在しないため、<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="グローバルプロパティ undefined はプリミティブ値 undefined を表します。これは JavaScript におけるプリミティブ型の一つです。"><code>undefined</code></a>の値を取ることになります。</p> +<p>ユーザエージェント<code>sampleSize</code>の制約をサポートしている場合、このプロパティはディクショナリーの中に含まれ、その値は常に<code>true</code>の値です。このプロパティが存在しない場合は、サポートされている制約ディクショナリーには存在しないため、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="グローバルプロパティ undefined はプリミティブ値 undefined を表します。これは JavaScript におけるプリミティブ型の一つです。"><code>undefined</code></a>の値を取ることになります。</p> <h2 id="Example" name="Example">例</h2> @@ -72,7 +72,7 @@ if (navigator.mediaDevices.getSupportedConstraints()["sampleSize"]) { <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> + <li><a href="/ja/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> <li>{{domxref("MediaDevices.getSupportedConstraints()")}}</li> <li>{{domxref("MediaTrackSupportedConstraints")}}</li> <li>{{domxref("MediaStreamTrack")}}</li> diff --git a/files/ja/web/api/mediatracksupportedconstraints/volume/index.html b/files/ja/web/api/mediatracksupportedconstraints/volume/index.html index cd55c8751c..5f293daa49 100644 --- a/files/ja/web/api/mediatracksupportedconstraints/volume/index.html +++ b/files/ja/web/api/mediatracksupportedconstraints/volume/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/MediaTrackSupportedConstraints/volume --- <p>{{APIRef("Media Capture and Streams")}}</p> -<p><a href="https://developer.mozilla.org/ja/docs/Web/API/MediaTrackSupportedConstraints" title="MediaTrackSupportedConstraintsディクショナリは、MediaStreamTrackオブジェクトを実装しているuser agentやブラウザによって理解できる制約可能なプロパティの一覧を表します。MediaDevices.getSupportedConstraints()によって、MediaTrackSupportedConstraintsに適合するオブジェクトが戻り値として返されます。"><code>MediaTrackSupportedConstraints</code></a>ディクショナリーの<strong><code>volume</code></strong>プロパティは読み取り専用のBooleanの値です。<a href="https://developer.mozilla.org/ja/docs/Glossary/user_agent" rel="nofollow" title="この用語 (user agent) の定義はまだ書かれていません。ぜひご寄稿ください！">user agent</a>が<code>volume</code>の制約をサポートしている場合、<a href="https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getSupportedConstraints" title="MediaDevices インタフェースのgetSupportedConstraints() メソッドは、MediaTrackSupportedConstraintsディクショナリをベースとするオブジェクトを戻り値として返します。このオブジェクトのメンバーフィールドは、user agentが扱えるメディア制約に関するプロパティを表しています。"><code>MediaDevices.getSupportedConstraints()</code></a>の戻り値のオブジェクトに含まれ<code>true</code>が設定されます。この制約がサポートされない場合は含まれないため、<code>false</code>になることはありません。</p> +<p><a href="/ja/docs/Web/API/MediaTrackSupportedConstraints" title="MediaTrackSupportedConstraintsディクショナリは、MediaStreamTrackオブジェクトを実装しているuser agentやブラウザによって理解できる制約可能なプロパティの一覧を表します。MediaDevices.getSupportedConstraints()によって、MediaTrackSupportedConstraintsに適合するオブジェクトが戻り値として返されます。"><code>MediaTrackSupportedConstraints</code></a>ディクショナリーの<strong><code>volume</code></strong>プロパティは読み取り専用のBooleanの値です。<a href="/ja/docs/Glossary/user_agent" rel="nofollow" title="この用語 (user agent) の定義はまだ書かれていません。ぜひご寄稿ください！">user agent</a>が<code>volume</code>の制約をサポートしている場合、<a href="/ja/docs/Web/API/MediaDevices/getSupportedConstraints" title="MediaDevices インタフェースのgetSupportedConstraints() メソッドは、MediaTrackSupportedConstraintsディクショナリをベースとするオブジェクトを戻り値として返します。このオブジェクトのメンバーフィールドは、user agentが扱えるメディア制約に関するプロパティを表しています。"><code>MediaDevices.getSupportedConstraints()</code></a>の戻り値のオブジェクトに含まれ<code>true</code>が設定されます。この制約がサポートされない場合は含まれないため、<code>false</code>になることはありません。</p> <p>サポートされている制約のディクショナリーは<code>navigator.mediaDevices.getSupportedConstraints()</code>を呼び出すことで取得できます。</p> @@ -15,7 +15,7 @@ translation_of: Web/API/MediaTrackSupportedConstraints/volume <h3 id="値">値</h3> -<p>ユーザエージェント<code>volume</code>の制約をサポートしている場合、このプロパティはディクショナリーの中に含まれ、その値は常に<code>true</code>の値です。このプロパティが存在しない場合は、サポートされている制約ディクショナリーには存在しないため、<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="グローバルプロパティ undefined はプリミティブ値 undefined を表します。これは JavaScript におけるプリミティブ型の一つです。"><code>undefined</code></a>の値を取ることになります。</p> +<p>ユーザエージェント<code>volume</code>の制約をサポートしている場合、このプロパティはディクショナリーの中に含まれ、その値は常に<code>true</code>の値です。このプロパティが存在しない場合は、サポートされている制約ディクショナリーには存在しないため、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="グローバルプロパティ undefined はプリミティブ値 undefined を表します。これは JavaScript におけるプリミティブ型の一つです。"><code>undefined</code></a>の値を取ることになります。</p> <h2 id="Example" name="Example">例</h2> @@ -72,7 +72,7 @@ if (navigator.mediaDevices.getSupportedConstraints()["volume"]) { <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> + <li><a href="/ja/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> <li>{{domxref("MediaDevices.getSupportedConstraints()")}}</li> <li>{{domxref("MediaTrackSupportedConstraints")}}</li> <li>{{domxref("MediaStreamTrack")}}</li> diff --git a/files/ja/web/api/messagechannel/index.html b/files/ja/web/api/messagechannel/index.html index c940e402da..0c827ea280 100644 --- a/files/ja/web/api/messagechannel/index.html +++ b/files/ja/web/api/messagechannel/index.html @@ -82,5 +82,5 @@ function handleMessage(e) { <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li> + <li><a href="/ja/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li> </ul> diff --git a/files/ja/web/api/messagechannel/messagechannel/index.html b/files/ja/web/api/messagechannel/messagechannel/index.html index e20856a988..953b7302d7 100644 --- a/files/ja/web/api/messagechannel/messagechannel/index.html +++ b/files/ja/web/api/messagechannel/messagechannel/index.html @@ -76,5 +76,5 @@ function handleMessage(e) { <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li> + <li><a href="/ja/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li> </ul> diff --git a/files/ja/web/api/messagechannel/port2/index.html b/files/ja/web/api/messagechannel/port2/index.html index 57acd731e1..fe53a70681 100644 --- a/files/ja/web/api/messagechannel/port2/index.html +++ b/files/ja/web/api/messagechannel/port2/index.html @@ -77,5 +77,5 @@ function handleMessage(e) { <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li> + <li><a href="/ja/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li> </ul> diff --git a/files/ja/web/api/messageevent/index.html b/files/ja/web/api/messageevent/index.html index 54f1215ad5..f136352189 100644 --- a/files/ja/web/api/messageevent/index.html +++ b/files/ja/web/api/messageevent/index.html @@ -15,11 +15,11 @@ translation_of: Web/API/MessageEvent <ul> <li><a href="/ja/docs/Server-sent_events">Server-sent events</a> ({{domxref("EventSource.onmessage")}} を参照).</li> - <li><a href="/ja/docs/Web/API/WebSockets_API">Web sockets</a> (<a href="/en-US/docs/Web/API/WebSocket">WebSocket</a> インターフェースの <code>onmessage</code> プロパティを参照).</li> + <li><a href="/ja/docs/Web/API/WebSockets_API">Web sockets</a> (<a href="/ja/docs/Web/API/WebSocket">WebSocket</a> インターフェースの <code>onmessage</code> プロパティを参照).</li> <li>Cross-document messaging ({{domxref("Window.postMessage()")}} および {{domxref("Window.onmessage")}} を参照).</li> - <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel messaging</a> ({{domxref("MessagePort.postMessage()")}} および {{domxref("MessagePort.onmessage")}} を参照).</li> + <li><a href="/ja/docs/Web/API/Channel_Messaging_API">Channel messaging</a> ({{domxref("MessagePort.postMessage()")}} および {{domxref("MessagePort.onmessage")}} を参照).</li> <li>Cross-worker/document messaging (上記 2エントリほか、{{domxref("Worker.postMessage()")}}, {{domxref("Worker.onmessage")}}, {{domxref("ServiceWorkerGlobalScope.onmessage")}} なども参照)</li> - <li><a href="/en-US/docs/Web/API/Broadcast_Channel_API">Broadcast channels</a> ({{domxref("Broadcastchannel.postMessage()")}}) および {{domxref("BroadcastChannel.onmessage")}} を参照).</li> + <li><a href="/ja/docs/Web/API/Broadcast_Channel_API">Broadcast channels</a> ({{domxref("Broadcastchannel.postMessage()")}}) および {{domxref("BroadcastChannel.onmessage")}} を参照).</li> <li>WebRTC データチャネル ({{domxref("RTCDataChannel.onmessage")}} を参照).</li> </ul> diff --git a/files/ja/web/api/messageport/close/index.html b/files/ja/web/api/messageport/close/index.html index a49f6d8a57..c11d2eea0f 100644 --- a/files/ja/web/api/messageport/close/index.html +++ b/files/ja/web/api/messageport/close/index.html @@ -73,5 +73,5 @@ channel.port1.start(); <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li> + <li><a href="/ja/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li> </ul> diff --git a/files/ja/web/api/messageport/index.html b/files/ja/web/api/messageport/index.html index c586aef559..90629a6c06 100644 --- a/files/ja/web/api/messageport/index.html +++ b/files/ja/web/api/messageport/index.html @@ -100,5 +100,5 @@ function onMessage(e) { <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li> + <li><a href="/ja/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li> </ul> diff --git a/files/ja/web/api/messageport/onmessage/index.html b/files/ja/web/api/messageport/onmessage/index.html index cca9e6bce7..efed7d1db6 100644 --- a/files/ja/web/api/messageport/onmessage/index.html +++ b/files/ja/web/api/messageport/onmessage/index.html @@ -72,5 +72,5 @@ function handleMessage(e) { <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li> + <li><a href="/ja/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li> </ul> diff --git a/files/ja/web/api/messageport/postmessage/index.html b/files/ja/web/api/messageport/postmessage/index.html index 90174fbf87..6ffc0dc518 100644 --- a/files/ja/web/api/messageport/postmessage/index.html +++ b/files/ja/web/api/messageport/postmessage/index.html @@ -84,5 +84,5 @@ function handleMessage(e) { <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li> + <li><a href="/ja/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li> </ul> diff --git a/files/ja/web/api/messageport/start/index.html b/files/ja/web/api/messageport/start/index.html index 0117300fc0..d6e235efaa 100644 --- a/files/ja/web/api/messageport/start/index.html +++ b/files/ja/web/api/messageport/start/index.html @@ -74,5 +74,5 @@ channel.port1.start();</pre> <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li> + <li><a href="/ja/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li> </ul> diff --git a/files/ja/web/api/microsoft_extensions/index.html b/files/ja/web/api/microsoft_extensions/index.html index 8e607038af..009790f663 100644 --- a/files/ja/web/api/microsoft_extensions/index.html +++ b/files/ja/web/api/microsoft_extensions/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Microsoft_Extensions --- <div>{{DefaultAPISidebar("Microsoft Extensions")}}</div> -<p>Microsoft ブラウザー (Internet Explorer および、場合によっては Microsoft Edge) は、標準の <a href="/en-US/docs/Web/API">DOM API</a> に対するいくつかの特別な Microsoft 拡張機能をサポートしています。これらの拡張機能には <code>MS</code> または <code>ms</code>.のプレフィックスが付きます。</p> +<p>Microsoft ブラウザー (Internet Explorer および、場合によっては Microsoft Edge) は、標準の <a href="/ja/docs/Web/API">DOM API</a> に対するいくつかの特別な Microsoft 拡張機能をサポートしています。これらの拡張機能には <code>MS</code> または <code>ms</code>.のプレフィックスが付きます。</p> <div class="note"> <p><strong>Note:</strong> これらの API は Microsoft アプリケーションでのみ機能し、標準化されていません。</p> @@ -78,9 +78,9 @@ translation_of: Web/API/Microsoft_Extensions <div class="index"> <ul> - <li><code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/x-ms-aria-flowfrom">x-ms-aria-flowfrom</a></code></li> - <li><code><a href="/en-US/docs/Web/HTML/Global_attributes/x-ms-acceleratorkey">x-ms-acceleratorkey</a></code></li> - <li><code><a href="/en-US/docs/Web/HTML/Global_attributes/x-ms-format-detection">x-ms-format-detection</a></code></li> + <li><code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/x-ms-aria-flowfrom">x-ms-aria-flowfrom</a></code></li> + <li><code><a href="/ja/docs/Web/HTML/Global_attributes/x-ms-acceleratorkey">x-ms-acceleratorkey</a></code></li> + <li><code><a href="/ja/docs/Web/HTML/Global_attributes/x-ms-format-detection">x-ms-format-detection</a></code></li> <li>{{DOMxRef("msCaching")}}</li> <li>{{DOMxRef("msCachingEnabled")}}</li> <li>{{DOMxRef("msCapsLockWarningOff")}}</li> @@ -100,6 +100,6 @@ translation_of: Web/API/Microsoft_Extensions <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/CSS/Microsoft_Extensions">Microsoft CSS extensions</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Microsoft_JavaScript_extensions">Microsoft JavaScript extensions</a></li> + <li><a href="/ja/docs/Web/CSS/Microsoft_Extensions">Microsoft CSS extensions</a></li> + <li><a href="/ja/docs/Web/JavaScript/Microsoft_JavaScript_extensions">Microsoft JavaScript extensions</a></li> </ul> diff --git a/files/ja/web/api/navigator/getgamepads/index.html b/files/ja/web/api/navigator/getgamepads/index.html index ababd187bf..d6f78ae5ae 100644 --- a/files/ja/web/api/navigator/getgamepads/index.html +++ b/files/ja/web/api/navigator/getgamepads/index.html @@ -54,6 +54,6 @@ translation_of: Web/API/Navigator/getGamepads <h2 id="参照">参照</h2> <ul> - <li><a href="/docs/Web/Guide/API/Gamepad">Gamepad API の利用</a></li> - <li><a href="/docs/Web/API/Gamepad_API">Gamepad API</a></li> + <li><a href="/ja/docs/Web/Guide/API/Gamepad">Gamepad API の利用</a></li> + <li><a href="/ja/docs/Web/API/Gamepad_API">Gamepad API</a></li> </ul> diff --git a/files/ja/web/api/navigator/online_and_offline_events/index.html b/files/ja/web/api/navigator/online_and_offline_events/index.html index c0a18179d4..15fc35b7c8 100644 --- a/files/ja/web/api/navigator/online_and_offline_events/index.html +++ b/files/ja/web/api/navigator/online_and_offline_events/index.html @@ -38,7 +38,7 @@ original_slug: Web/API/NavigatorOnLine/Online_and_offline_events <blockquote cite="https://www.whatwg.org/specs/web-apps/current-work/#offline"> <code>navigator.onLine</code> 属性はユーザーがリンクを辿ったり、スクリプトが外部のページをリクエストしたりしたときにユーザーエージェントがネットワークで通信できない場合 (またはそのような試みが失敗した場合) は、必ず false を返す必要があります。</blockquote> -<p>Firefox 2 はこのプロパティをブラウザーのオフラインモードが切り替わる度に更新します。 <a href="/en-US/docs/Mozilla/Firefox/Releases/41#miscellaneous">Firefox 41</a> は、 Windows、 Linux、 OS X においてネットワークの接続状態が変化したときにも更新します。</p> +<p>Firefox 2 はこのプロパティをブラウザーのオフラインモードが切り替わる度に更新します。 <a href="/ja/docs/Mozilla/Firefox/Releases/41#miscellaneous">Firefox 41</a> は、 Windows、 Linux、 OS X においてネットワークの接続状態が変化したときにも更新します。</p> <p>このプロパティは Firefox と Internet Explorer の古いバージョンにも存在しました。 (この仕様はこれらの先行的な実装に基づいています)。従って、今すぐこのプロパティを使い始めることができます。ネットワーク状態の自動判断は Firefox 2 にて実装されました。</p> diff --git a/files/ja/web/api/node/isdefaultnamespace/index.html b/files/ja/web/api/node/isdefaultnamespace/index.html index fff65ffae3..018e6562cc 100644 --- a/files/ja/web/api/node/isdefaultnamespace/index.html +++ b/files/ja/web/api/node/isdefaultnamespace/index.html @@ -27,7 +27,7 @@ alert(el.isDefaultNamespace(XULNS)); // true</pre> <h2 id="Specification" name="Specification">仕様書</h2> <ul> <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isDefaultNamespace">DOM Level 3 Core: isDefaultNamespace</a></li> - <li><a href="/en-US/docs/Code_snippets/IsDefaultNamespace" title="Code_snippets/IsDefaultNamespace">Code snippets: isDefaultNamespace</a></li> + <li><a href="/ja/docs/Code_snippets/IsDefaultNamespace" title="Code_snippets/IsDefaultNamespace">Code snippets: isDefaultNamespace</a></li> </ul> <h2 id="See_also" name="See_also">関連情報</h2> <ul> diff --git a/files/ja/web/api/notification/permission/index.html b/files/ja/web/api/notification/permission/index.html index 999d8903d9..f8007387d3 100644 --- a/files/ja/web/api/notification/permission/index.html +++ b/files/ja/web/api/notification/permission/index.html @@ -85,7 +85,7 @@ translation_of: Web/API/Notification/permission <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/docs/Web/API/Notifications_API">通知 API</a></li> + <li><a href="/ja/docs/Web/API/Notifications_API">通知 API</a></li> <li><a href="/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API">通知 API の使用</a></li> <li><a href="/ja/docs/Web/API/Permissions_API">許可 API</a></li> <li><a href="/ja/docs/Web/API/Permissions_API/Using_the_Permissions_API">許可 API の使用</a></li> diff --git a/files/ja/web/api/offlineaudiocontext/index.html b/files/ja/web/api/offlineaudiocontext/index.html index 72ec2c6b95..b6957b528b 100644 --- a/files/ja/web/api/offlineaudiocontext/index.html +++ b/files/ja/web/api/offlineaudiocontext/index.html @@ -140,5 +140,5 @@ getData();</pre> <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/offscreencanvas/getcontext/index.html b/files/ja/web/api/offscreencanvas/getcontext/index.html index ce60c9f633..baff96595f 100644 --- a/files/ja/web/api/offscreencanvas/getcontext/index.html +++ b/files/ja/web/api/offscreencanvas/getcontext/index.html @@ -8,7 +8,7 @@ translation_of: Web/API/OffscreenCanvas/getContext <p>The <strong><code>OffscreenCanvas.getContext()</code></strong> method returns a drawing context for an offscreen canvas, or {{jsxref("null")}} if the context identifier is not supported.</p> <div class="note"> -<p><strong>Note</strong>: This API is currently implemented for <a href="/en-US/docs/Web/API/WebGLRenderingContext">WebGL1</a> and <a href="/en-US/docs/Web/API/WebGL2RenderingContext">WebGL2</a> contexts only. See {{bug(801176)}} for <a href="/en-US/docs/Web/API/Canvas_API">Canvas 2D API</a> support from workers.</p> +<p><strong>Note</strong>: This API is currently implemented for <a href="/ja/docs/Web/API/WebGLRenderingContext">WebGL1</a> and <a href="/ja/docs/Web/API/WebGL2RenderingContext">WebGL2</a> contexts only. See {{bug(801176)}} for <a href="/ja/docs/Web/API/Canvas_API">Canvas 2D API</a> support from workers.</p> </div> <p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.33327865600586px;"><strong>構文</strong></span></font></p> @@ -25,8 +25,8 @@ translation_of: Web/API/OffscreenCanvas/getContext <dd>Is a {{domxref("DOMString")}} containing the context identifier defining the drawing context associated to the canvas. Possible values are: <ul> <li><strong><code>"2d"</code></strong> creates a {{domxref("CanvasRenderingContext2D")}} object representing a two-dimensional rendering context.</li> - <li><strong><code>"webgl"</code></strong> creates a {{domxref("WebGLRenderingContext")}} object representing a three-dimensional rendering context. This context is only available on browsers that implement <a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a> version 1 (OpenGL ES 2.0).</li> - <li><strong><code>"webgl2"</code></strong> creates a {{domxref("WebGL2RenderingContext")}} object representing a three-dimensional rendering context. This context is only available on browsers that implement <a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a> version 2 (OpenGL ES 3.0). {{experimental_inline}}</li> + <li><strong><code>"webgl"</code></strong> creates a {{domxref("WebGLRenderingContext")}} object representing a three-dimensional rendering context. This context is only available on browsers that implement <a href="/ja/docs/Web/WebGL">WebGL</a> version 1 (OpenGL ES 2.0).</li> + <li><strong><code>"webgl2"</code></strong> creates a {{domxref("WebGL2RenderingContext")}} object representing a three-dimensional rendering context. This context is only available on browsers that implement <a href="/ja/docs/Web/WebGL">WebGL</a> version 2 (OpenGL ES 3.0). {{experimental_inline}}</li> <li> <p><strong><code>"bitmaprenderer"</code></strong> creates a {{domxref("ImageBitmapRenderingContext")}} which only provides functionality to replace the content of the canvas with a given {{domxref("ImageBitmap")}}.</p> </li> diff --git a/files/ja/web/api/offscreencanvas/index.html b/files/ja/web/api/offscreencanvas/index.html index 38919748b7..b2627fded7 100644 --- a/files/ja/web/api/offscreencanvas/index.html +++ b/files/ja/web/api/offscreencanvas/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/OffscreenCanvas --- <div>{{APIRef("Canvas API")}} {{SeeCompatTable}}</div> -<p>The <strong><code>OffscreenCanvas</code></strong> interface provides a canvas that can be rendered off screen. It is available in both the window and <a href="/en-US/docs/Web/API/Web_Workers_API">worker</a> contexts.</p> +<p>The <strong><code>OffscreenCanvas</code></strong> interface provides a canvas that can be rendered off screen. It is available in both the window and <a href="/ja/docs/Web/API/Web_Workers_API">worker</a> contexts.</p> <h2 id="Constructors">Constructors</h2> @@ -84,7 +84,7 @@ two.transferFromImageBitmap(bitmapTwo); <h3 id="Asynchronous_display_of_frames_produced_by_an_OffscreenCanvas">Asynchronous display of frames produced by an <code>OffscreenCanvas</code></h3> -<p>Another way to use the <code>OffscreenCanvas</code> API, is to call {{domxref("HTMLCanvasElement.transferControlToOffscreen", "transferControlToOffscreen()")}} on a {{HTMLElement("canvas")}} element, either on a <a href="/en-US/docs/Web/API/Web_Workers_API">worker</a> or the main thread, which will return an <code>OffscreenCanvas</code> object from an {{domxref("HTMLCanvasElement")}} object from the main thread. Calling {{domxref("OffscreenCanvas.getContext", "getContext()")}} will then obtain a <code>RenderingContext</code> from that <code>OffscreenCanvas</code>.</p> +<p>Another way to use the <code>OffscreenCanvas</code> API, is to call {{domxref("HTMLCanvasElement.transferControlToOffscreen", "transferControlToOffscreen()")}} on a {{HTMLElement("canvas")}} element, either on a <a href="/ja/docs/Web/API/Web_Workers_API">worker</a> or the main thread, which will return an <code>OffscreenCanvas</code> object from an {{domxref("HTMLCanvasElement")}} object from the main thread. Calling {{domxref("OffscreenCanvas.getContext", "getContext()")}} will then obtain a <code>RenderingContext</code> from that <code>OffscreenCanvas</code>.</p> <p>main.js (main thread code):</p> diff --git a/files/ja/web/api/oscillatornode/index.html b/files/ja/web/api/oscillatornode/index.html index 33765e919c..0a89417212 100644 --- a/files/ja/web/api/oscillatornode/index.html +++ b/files/ja/web/api/oscillatornode/index.html @@ -109,5 +109,5 @@ oscillator.start();</pre> <h2 id="See_also">See also</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/page_visibility_api/index.html b/files/ja/web/api/page_visibility_api/index.html index ca03415e4d..d290675ee3 100644 --- a/files/ja/web/api/page_visibility_api/index.html +++ b/files/ja/web/api/page_visibility_api/index.html @@ -43,11 +43,11 @@ original_slug: Web/Guide/User_experience/Using_the_Page_Visibility_API <ul> <li>Most browsers stop sending {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} callbacks to background tabs or hidden {{ HTMLElement("iframe") }}s in order to improve performance and battery life.</li> - <li>Timers such as {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} are throttled in background/inactive tabs to help improve performance. See <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Reasons for delays longer than specified</a> for more details.</li> + <li>Timers such as {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} are throttled in background/inactive tabs to help improve performance. See <a href="/ja/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Reasons for delays longer than specified</a> for more details.</li> <li>Budget-based background timeout throttling is now available in modern browsers (Firefox 58+, Chrome 57+), placing an additional limit on background timer CPU usage. This operates in a similar way across modern browsers, with the details being as follows: <ul> <li>In Firefox, windows in background tabs each have their own time budget in milliseconds — a max and a min value of +50 ms and -150 ms, respectively. Chrome is very similar except that the budget is specified in seconds.</li> - <li>Windows are subjected to throttling after 30 seconds, with the same throttling delay rules as specified for window timers (again, see <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Reasons for delays longer than specified</a>). In Chrome, this value is 10 seconds.</li> + <li>Windows are subjected to throttling after 30 seconds, with the same throttling delay rules as specified for window timers (again, see <a href="/ja/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Reasons for delays longer than specified</a>). In Chrome, this value is 10 seconds.</li> <li>Timer tasks are only permitted when the budget is non-negative.</li> <li>Once a timer's code has finished running, the duration of time it took to execute is subtracted from its window's timeout budget.</li> <li>The budget regenerates at a rate of 10 ms per second, in both Firefox and Chrome.</li> @@ -59,8 +59,8 @@ original_slug: Web/Guide/User_experience/Using_the_Page_Visibility_API <ul> <li>Tabs which are playing audio are considered foreground and aren’t throttled.</li> - <li>Tabs running code that's using real-time network connections (<a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a> and <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a>) go unthrottled in order to avoid closing these connections timing out and getting unexpectedly closed.</li> - <li><a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> processes are also left unthrottled in order to avoid timeouts.</li> + <li>Tabs running code that's using real-time network connections (<a href="/ja/docs/Web/API/WebSockets_API">WebSockets</a> and <a href="/ja/docs/Web/API/WebRTC_API">WebRTC</a>) go unthrottled in order to avoid closing these connections timing out and getting unexpectedly closed.</li> + <li><a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB</a> processes are also left unthrottled in order to avoid timeouts.</li> </ul> <h2 id="Example" name="Example">例</h2> diff --git a/files/ja/web/api/pannernode/coneinnerangle/index.html b/files/ja/web/api/pannernode/coneinnerangle/index.html index f5b4f3216d..37484036bf 100644 --- a/files/ja/web/api/pannernode/coneinnerangle/index.html +++ b/files/ja/web/api/pannernode/coneinnerangle/index.html @@ -61,5 +61,5 @@ panner.coneInnerAngle = 360;</pre> <ul> <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web Audio spatialisation basics</a></li> + <li><a href="/ja/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web Audio spatialisation basics</a></li> </ul> diff --git a/files/ja/web/api/pannernode/coneouterangle/index.html b/files/ja/web/api/pannernode/coneouterangle/index.html index 80997c1dcd..52200134fe 100644 --- a/files/ja/web/api/pannernode/coneouterangle/index.html +++ b/files/ja/web/api/pannernode/coneouterangle/index.html @@ -62,5 +62,5 @@ panner.coneOuterAngle = 0;</pre> <ul> <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web Audio spatialisation basics</a></li> + <li><a href="/ja/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web Audio spatialisation basics</a></li> </ul> diff --git a/files/ja/web/api/path2d/index.html b/files/ja/web/api/path2d/index.html index 97e05ee64a..3cbc91891c 100644 --- a/files/ja/web/api/path2d/index.html +++ b/files/ja/web/api/path2d/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Path2D --- <div>{{APIRef("Canvas API")}} {{SeeCompatTable}}</div> -<p>The <strong><code>Path2D</code></strong> interface of the Canvas 2D API is used to declare paths that are then later used on {{domxref("CanvasRenderingContext2D")}} objects. The<a href="/en-US/docs/Web/API/CanvasRenderingContext2D#Paths"> path methods</a> of the <code>CanvasRenderingContext2D</code> interface are present on this interface as well and are allowing you to create paths that you can retain and replay as required on a canvas.</p> +<p>The <strong><code>Path2D</code></strong> interface of the Canvas 2D API is used to declare paths that are then later used on {{domxref("CanvasRenderingContext2D")}} objects. The<a href="/ja/docs/Web/API/CanvasRenderingContext2D#Paths"> path methods</a> of the <code>CanvasRenderingContext2D</code> interface are present on this interface as well and are allowing you to create paths that you can retain and replay as required on a canvas.</p> <h2 id="Constructors">Constructors</h2> diff --git a/files/ja/web/api/path2d/path2d/index.html b/files/ja/web/api/path2d/path2d/index.html index 2a4fbfa4da..62dfba9d18 100644 --- a/files/ja/web/api/path2d/path2d/index.html +++ b/files/ja/web/api/path2d/path2d/index.html @@ -62,7 +62,7 @@ ctx.stroke(path2); <h3 id="Using_SVG_paths" name="Using_SVG_paths">SVG パスを使用する</h3> -<p>これは、<a href="/docs/Web/SVG/Tutorial/Paths">SVG パスデータ</a> を使用して <code>Path2D</code> のパスを作成する簡単なコードスニペットです。パスは点 (<code>M10 10</code>) に移ってから、水平に 80 ポイント右に移動し (<code>h 80</code>)、80 ポイント下がり (<code>v 80</code>)、80ポイント左に移動し (<code>h -80</code>)、開始点に戻ります (<code>z</code>)。</p> +<p>これは、<a href="/ja/docs/Web/SVG/Tutorial/Paths">SVG パスデータ</a> を使用して <code>Path2D</code> のパスを作成する簡単なコードスニペットです。パスは点 (<code>M10 10</code>) に移ってから、水平に 80 ポイント右に移動し (<code>h 80</code>)、80 ポイント下がり (<code>v 80</code>)、80ポイント左に移動し (<code>h -80</code>)、開始点に戻ります (<code>z</code>)。</p> <div class="hidden"> <pre class="brush: html"><canvas id="canvas"></canvas></pre> diff --git a/files/ja/web/api/performance_api/index.html b/files/ja/web/api/performance_api/index.html index 5a38309969..42af26b0b0 100644 --- a/files/ja/web/api/performance_api/index.html +++ b/files/ja/web/api/performance_api/index.html @@ -43,13 +43,13 @@ translation_of: Web/API/Performance_API <dt>{{domxref('PerformanceFrameTiming')}}</dt> <dd>Provides methods and properties containing frame timing data about the browser's event loop.</dd> <dt>{{domxref('PerformanceMark')}}</dt> - <dd>An abstract interface for <a href="https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry" title="The PerformanceEntry object encapsulates a single performance metric that is part of the performance timeline. A performance entry can be directly created by making a performance mark or measure (for example by calling the mark() method) at an explicit point in an application. Performance entries are also created in indirect ways such as loading a resource (such as an image)."><code>performance entries</code></a> with an <a href="https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry/entryType" title="The entryType property returns the performance entry's type. The valid entryType values are:"><code>entry type</code></a> of "<code>mark</code>". Entries of this type are created by calling <a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark" title="The mark() method creates a timestamp in the browser's performance entry buffer with the given name. The application defined timestamp can be retrieved by one of the Performance interface's getEntries*() methods (getEntries(), getEntriesByName() or getEntriesByType())."><code>performance.mark()</code></a> to add a named <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp" title="The DOMHighResTimeStamp type is a double and is used to store a time value. The value could be a discrete point in time or the difference in time between two discrete points in time. The unit is milliseconds and should be accurate to 5 µs (microseconds). However, if the browser is unable to provide a time value accurate to 5 microseconds (due, for example, to hardware or software constraints), the browser can represent the value as a time in milliseconds accurate to a millisecond."><code>DOMHighResTimeStamp</code></a> (the mark) to the browser's performance timeline.</dd> + <dd>An abstract interface for <a href="/ja/docs/Web/API/PerformanceEntry" title="The PerformanceEntry object encapsulates a single performance metric that is part of the performance timeline. A performance entry can be directly created by making a performance mark or measure (for example by calling the mark() method) at an explicit point in an application. Performance entries are also created in indirect ways such as loading a resource (such as an image)."><code>performance entries</code></a> with an <a href="/ja/docs/Web/API/PerformanceEntry/entryType" title="The entryType property returns the performance entry's type. The valid entryType values are:"><code>entry type</code></a> of "<code>mark</code>". Entries of this type are created by calling <a href="/ja/docs/Web/API/Performance/mark" title="The mark() method creates a timestamp in the browser's performance entry buffer with the given name. The application defined timestamp can be retrieved by one of the Performance interface's getEntries*() methods (getEntries(), getEntriesByName() or getEntriesByType())."><code>performance.mark()</code></a> to add a named <a href="/ja/docs/Web/API/DOMHighResTimeStamp" title="The DOMHighResTimeStamp type is a double and is used to store a time value. The value could be a discrete point in time or the difference in time between two discrete points in time. The unit is milliseconds and should be accurate to 5 µs (microseconds). However, if the browser is unable to provide a time value accurate to 5 microseconds (due, for example, to hardware or software constraints), the browser can represent the value as a time in milliseconds accurate to a millisecond."><code>DOMHighResTimeStamp</code></a> (the mark) to the browser's performance timeline.</dd> <dt>{{domxref('PerformanceMeasure')}}</dt> - <dd>An abstract interface for <a href="https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry" title="The PerformanceEntry object encapsulates a single performance metric that is part of the performance timeline. A performance entry can be directly created by making a performance mark or measure (for example by calling the mark() method) at an explicit point in an application. Performance entries are also created in indirect ways such as loading a resource (such as an image)."><code>performance entries</code></a> with an <a href="https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry/entryType" title="The entryType property returns the performance entry's type. The valid entryType values are:"><code>entry type</code></a> of "<code>measure</code>". Entries of this type are created by calling <a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance/measure" title="The measure() method creates a named timestamp in the browser's performance entry buffer between two specified marks (known as the start mark and end mark, respectively). The named timestamp is referred to as a measure."><code>performance.measure()</code></a> to add a named<a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp" title="The DOMHighResTimeStamp type is a double and is used to store a time value. The value could be a discrete point in time or the difference in time between two discrete points in time. The unit is milliseconds and should be accurate to 5 µs (microseconds). However, if the browser is unable to provide a time value accurate to 5 microseconds (due, for example, to hardware or software constraints), the browser can represent the value as a time in milliseconds accurate to a millisecond."><code>DOMHighResTimeStamp</code></a> (the measure) between two marks to the browser's performance timeline.</dd> + <dd>An abstract interface for <a href="/ja/docs/Web/API/PerformanceEntry" title="The PerformanceEntry object encapsulates a single performance metric that is part of the performance timeline. A performance entry can be directly created by making a performance mark or measure (for example by calling the mark() method) at an explicit point in an application. Performance entries are also created in indirect ways such as loading a resource (such as an image)."><code>performance entries</code></a> with an <a href="/ja/docs/Web/API/PerformanceEntry/entryType" title="The entryType property returns the performance entry's type. The valid entryType values are:"><code>entry type</code></a> of "<code>measure</code>". Entries of this type are created by calling <a href="/ja/docs/Web/API/Performance/measure" title="The measure() method creates a named timestamp in the browser's performance entry buffer between two specified marks (known as the start mark and end mark, respectively). The named timestamp is referred to as a measure."><code>performance.measure()</code></a> to add a named<a href="/ja/docs/Web/API/DOMHighResTimeStamp" title="The DOMHighResTimeStamp type is a double and is used to store a time value. The value could be a discrete point in time or the difference in time between two discrete points in time. The unit is milliseconds and should be accurate to 5 µs (microseconds). However, if the browser is unable to provide a time value accurate to 5 microseconds (due, for example, to hardware or software constraints), the browser can represent the value as a time in milliseconds accurate to a millisecond."><code>DOMHighResTimeStamp</code></a> (the measure) between two marks to the browser's performance timeline.</dd> <dt>{{domxref('PerformanceNavigationTiming')}}</dt> - <dd>Provides methods and properties to store and retrieve <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp" title="The DOMHighResTimeStamp type is a double and is used to store a time value. The value could be a discrete point in time or the difference in time between two discrete points in time. The unit is milliseconds and should be accurate to 5 µs (microseconds). However, if the browser is unable to provide a time value accurate to 5 microseconds (due, for example, to hardware or software constraints), the browser can represent the value as a time in milliseconds accurate to a millisecond."><code>high resolution timestamps</code></a> or metrics regarding the browser's document navigation events. </dd> + <dd>Provides methods and properties to store and retrieve <a href="/ja/docs/Web/API/DOMHighResTimeStamp" title="The DOMHighResTimeStamp type is a double and is used to store a time value. The value could be a discrete point in time or the difference in time between two discrete points in time. The unit is milliseconds and should be accurate to 5 µs (microseconds). However, if the browser is unable to provide a time value accurate to 5 microseconds (due, for example, to hardware or software constraints), the browser can represent the value as a time in milliseconds accurate to a millisecond."><code>high resolution timestamps</code></a> or metrics regarding the browser's document navigation events. </dd> <dt>{{domxref('PerformanceObserver')}}</dt> - <dd>Provides methods and properties used to observe performance measurement events and be notified of new <a href="https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry" title="The PerformanceEntry object encapsulates a single performance metric that is part of the performance timeline. A performance entry can be directly created by making a performance mark or measure (for example by calling the mark() method) at an explicit point in an application. Performance entries are also created in indirect ways such as loading a resource (such as an image).">performance entries</a> as they are recorded in the browser's performance timeline.</dd> + <dd>Provides methods and properties used to observe performance measurement events and be notified of new <a href="/ja/docs/Web/API/PerformanceEntry" title="The PerformanceEntry object encapsulates a single performance metric that is part of the performance timeline. A performance entry can be directly created by making a performance mark or measure (for example by calling the mark() method) at an explicit point in an application. Performance entries are also created in indirect ways such as loading a resource (such as an image).">performance entries</a> as they are recorded in the browser's performance timeline.</dd> <dt>{{domxref('PerformanceResourceTiming')}}</dt> <dd>Provides methods and properties for retrieving and analyzing detailed network timing data regarding the loading of an application's resources.</dd> </dl> diff --git a/files/ja/web/api/performancemeasure/index.html b/files/ja/web/api/performancemeasure/index.html index e625d7d29d..9c1a25ea53 100644 --- a/files/ja/web/api/performancemeasure/index.html +++ b/files/ja/web/api/performancemeasure/index.html @@ -36,7 +36,7 @@ translation_of: Web/API/PerformanceMeasure <h2 id="例">例</h2> -<p><a href="https://developer.mozilla.org/Web/API/User_Timing_API/Using_the_User_Timing_API">ユーザータイミング API の使用</a>の例を参照してください。</p> +<p><a href="/Web/API/User_Timing_API/Using_the_User_Timing_API">ユーザータイミング API の使用</a>の例を参照してください。</p> <h2 id="仕様">仕様</h2> diff --git a/files/ja/web/api/performancepainttiming/index.html b/files/ja/web/api/performancepainttiming/index.html index a1e58e4b17..70eabc7572 100644 --- a/files/ja/web/api/performancepainttiming/index.html +++ b/files/ja/web/api/performancepainttiming/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformancePaintTiming --- <p>{{SeeCompatTable}}{{APIRef("Performance Timeline API")}}</p> -<p><a href="/en-US/docs/Web/API/Paint Timing">Paint Timing</a> の <strong><code>PerformancePaintTiming</code></strong> インタフェースは、Web ページ構築中の "paint" ("render" とも呼ばれる) 操作に関するタイミング情報を提供します。「ペイント」とは、レンダリングツリーを画面上のピクセルに変換することです。</p> +<p><a href="/ja/docs/Web/API/Paint Timing">Paint Timing</a> の <strong><code>PerformancePaintTiming</code></strong> インタフェースは、Web ページ構築中の "paint" ("render" とも呼ばれる) 操作に関するタイミング情報を提供します。「ペイント」とは、レンダリングツリーを画面上のピクセルに変換することです。</p> <p>アプリケーションは、"<code>paint</code>" {{domxref("PerformanceEntry","パフォーマンスエントリタイプ")}} に対して {{domxref("PerformanceObserver")}} を登録することができ、オブザーバーはペイントイベントが発生した時間を取得することができます。この情報を使用して、優れたユーザーエクスペリエンスを提供するのに時間がかかりすぎる領域を特定するのに役立ちます。</p> diff --git a/files/ja/web/api/performancetiming/index.html b/files/ja/web/api/performancetiming/index.html index d6ab292be4..4de2dace22 100644 --- a/files/ja/web/api/performancetiming/index.html +++ b/files/ja/web/api/performancetiming/index.html @@ -72,7 +72,7 @@ translation_of: Web/API/PerformanceTiming <dl> <dt>{{deprecated_inline}} {{domxref("PerformanceTiming.toJSON()")}} {{non-Standard_Inline}}</dt> - <dd>Returns a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON object</a> representing this <code>PerformanceTiming</code> object.</dd> + <dd>Returns a <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON object</a> representing this <code>PerformanceTiming</code> object.</dd> </dl> <h2 id="仕様">仕様</h2> diff --git a/files/ja/web/api/permissions_api/using_the_permissions_api/index.html b/files/ja/web/api/permissions_api/using_the_permissions_api/index.html index f7d7005428..1c3e895c6a 100644 --- a/files/ja/web/api/permissions_api/using_the_permissions_api/index.html +++ b/files/ja/web/api/permissions_api/using_the_permissions_api/index.html @@ -83,7 +83,7 @@ handlePermission();</pre> <h3 id="Permission_descriptors" name="Permission_descriptors">パーミッション記述子</h3> -<p>{{domxref("Permissions.query()")}} メソッドはパラメータとして <code>PermissionDescriptor</code> ディクショナリを取ります — これはあなたが興味を持っている API の名前を含みます。 いくつかの API は、デフォルトの <code>PermissionDescriptor</code> から継承した、追加情報を含んだ、より複雑な <code>PermissionDescriptor</code> を持っています。 例えば、<code>PushPermissionDescriptor</code> には、<code><a href="https://developer.mozilla.org/ja/docs/Web/API/PushManager/subscribe#Parameters">userVisibleOnly</a></code> が <code>true</code> か <code>false</code> かを指定する Boolean も含める必要があります。</p> +<p>{{domxref("Permissions.query()")}} メソッドはパラメータとして <code>PermissionDescriptor</code> ディクショナリを取ります — これはあなたが興味を持っている API の名前を含みます。 いくつかの API は、デフォルトの <code>PermissionDescriptor</code> から継承した、追加情報を含んだ、より複雑な <code>PermissionDescriptor</code> を持っています。 例えば、<code>PushPermissionDescriptor</code> には、<code><a href="/ja/docs/Web/API/PushManager/subscribe#Parameters">userVisibleOnly</a></code> が <code>true</code> か <code>false</code> かを指定する Boolean も含める必要があります。</p> <h3 id="Revoking_permissions" name="Revoking_permissions">パーミッションの取り消し</h3> diff --git a/files/ja/web/api/pushmessagedata/arraybuffer/index.html b/files/ja/web/api/pushmessagedata/arraybuffer/index.html index 50935bb9dc..9c77c88bb8 100644 --- a/files/ja/web/api/pushmessagedata/arraybuffer/index.html +++ b/files/ja/web/api/pushmessagedata/arraybuffer/index.html @@ -60,5 +60,5 @@ translation_of: Web/API/PushMessageData/arrayBuffer <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API">Using the Push API</a></li> + <li><a href="/ja/docs/Web/API/Push_API/Using_the_Push_API">Using the Push API</a></li> </ul> diff --git a/files/ja/web/api/pushmessagedata/text/index.html b/files/ja/web/api/pushmessagedata/text/index.html index 814ea3f1e5..a6e22cbe11 100644 --- a/files/ja/web/api/pushmessagedata/text/index.html +++ b/files/ja/web/api/pushmessagedata/text/index.html @@ -61,5 +61,5 @@ translation_of: Web/API/PushMessageData/text <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API">Using the Push API</a></li> + <li><a href="/ja/docs/Web/API/Push_API/Using_the_Push_API">Using the Push API</a></li> </ul> diff --git a/files/ja/web/api/range/clonecontents/index.html b/files/ja/web/api/range/clonecontents/index.html index 27b7da2a93..af40562e79 100644 --- a/files/ja/web/api/range/clonecontents/index.html +++ b/files/ja/web/api/range/clonecontents/index.html @@ -55,5 +55,5 @@ document.body.appendChild(documentFragment); <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> + <li><a href="/ja/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> </ul> diff --git a/files/ja/web/api/range/collapsed/index.html b/files/ja/web/api/range/collapsed/index.html index 4d7f3ffe3c..772aab50f5 100644 --- a/files/ja/web/api/range/collapsed/index.html +++ b/files/ja/web/api/range/collapsed/index.html @@ -21,7 +21,7 @@ isCollapsed = range.collapsed; </pre> <h3 id="Notes" name="Notes">Notes</h3> <p>range の始点と終点が DOM において同じ点にあるとき、true を返し、そうでないとき false を返します。</p> -<p>折り畳まれた range は空で、内容を含まず、DOM tree 内の1点を示しています。collapsed プロパティは読取専用です。range の折り畳みについては、<a href="ja/DOM/range.collapse"> collapse</a> メソッドを参照してください。</p> +<p>折り畳まれた range は空で、内容を含まず、DOM tree 内の1点を示しています。collapsed プロパティは読取専用です。range の折り畳みについては、<a href="/ja/DOM/range.collapse"> collapse</a> メソッドを参照してください。</p> <h3 id="Specification" name="Specification">Specification</h3> <p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-attr-collapsed">collapsed</a></p> <p>{{ languages( { "en": "en/DOM/range.collapsed", "es": "es/DOM/range.collapsed" } ) }}</p> diff --git a/files/ja/web/api/range/commonancestorcontainer/index.html b/files/ja/web/api/range/commonancestorcontainer/index.html index 114ebdc5d6..333e0cfebb 100644 --- a/files/ja/web/api/range/commonancestorcontainer/index.html +++ b/files/ja/web/api/range/commonancestorcontainer/index.html @@ -123,5 +123,5 @@ function playAnimation(el) { <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> + <li><a href="/ja/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> </ul> diff --git a/files/ja/web/api/range/endcontainer/index.html b/files/ja/web/api/range/endcontainer/index.html index 0c64e17548..c85f8583e0 100644 --- a/files/ja/web/api/range/endcontainer/index.html +++ b/files/ja/web/api/range/endcontainer/index.html @@ -53,5 +53,5 @@ endRangeNode = range.endContainer; <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> + <li><a href="/ja/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> </ul> diff --git a/files/ja/web/api/range/endoffset/index.html b/files/ja/web/api/range/endoffset/index.html index b4583e85bb..59ede31dae 100644 --- a/files/ja/web/api/range/endoffset/index.html +++ b/files/ja/web/api/range/endoffset/index.html @@ -57,5 +57,5 @@ endRangeOffset = range.endOffset;</pre> <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> + <li><a href="/ja/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> </ul> diff --git a/files/ja/web/api/range/intersectsnode/index.html b/files/ja/web/api/range/intersectsnode/index.html index 3efd79b0a4..702e5c1126 100644 --- a/files/ja/web/api/range/intersectsnode/index.html +++ b/files/ja/web/api/range/intersectsnode/index.html @@ -29,7 +29,7 @@ var bool = range.intersectsNode(document.getElementsByTagName("p").item(0));</pr <h2 id="Notes" name="Notes">注記</h2> <p>このメソッドは廃止されました。代わりに W3C DOM Range メソッドを用います（※参照: <code><a href="/ja/docs/DOM/range.compareBoundaryPoints">compareBoundaryPoints()</a></code> ）</p> <div class="warning"> - <b>注意:</b> このメソッドは <a href="/en-US/docs/Gecko">Gecko</a> 1.9 より<a href="/ja/docs/Gecko_1.9_Changes_affecting_websites">削除されています</a>。もし既にこのメソッドを用いている場合、出来るだけ早く、 <code>compareBoundaryPoints()</code> に切り替えて下さい。</div> + <b>注意:</b> このメソッドは <a href="/ja/docs/Gecko">Gecko</a> 1.9 より<a href="/ja/docs/Gecko_1.9_Changes_affecting_websites">削除されています</a>。もし既にこのメソッドを用いている場合、出来るだけ早く、 <code>compareBoundaryPoints()</code> に切り替えて下さい。</div> <p>次の関数を代替として用いる事が出来ます。</p> <pre class="brush:js notranslate">function rangeIntersectsNode(range, node) { var nodeRange = node.ownerDocument.createRange(); diff --git a/files/ja/web/api/range/setstart/index.html b/files/ja/web/api/range/setstart/index.html index 3701318799..9722f56444 100644 --- a/files/ja/web/api/range/setstart/index.html +++ b/files/ja/web/api/range/setstart/index.html @@ -62,5 +62,5 @@ range.setStart(startNode,startOffset); <h2 id="See_also">See also</h2> <ul> - <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> + <li><a href="/ja/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> </ul> diff --git a/files/ja/web/api/range/startcontainer/index.html b/files/ja/web/api/range/startcontainer/index.html index 9f9ca075e5..f7a7971017 100644 --- a/files/ja/web/api/range/startcontainer/index.html +++ b/files/ja/web/api/range/startcontainer/index.html @@ -51,5 +51,5 @@ startRangeNode = range.startContainer; <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> + <li><a href="/ja/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> </ul> diff --git a/files/ja/web/api/range/startoffset/index.html b/files/ja/web/api/range/startoffset/index.html index 76bf050c65..de4a0485b7 100644 --- a/files/ja/web/api/range/startoffset/index.html +++ b/files/ja/web/api/range/startoffset/index.html @@ -59,5 +59,5 @@ var startRangeOffset = range.startOffset; <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> + <li><a href="/ja/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> </ul> diff --git a/files/ja/web/api/request/cache/index.html b/files/ja/web/api/request/cache/index.html index be3a255989..2446db1b77 100644 --- a/files/ja/web/api/request/cache/index.html +++ b/files/ja/web/api/request/cache/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Request/cache --- <div>{{APIRef("Fetch")}}</div> -<p>{{domxref("Request")}} インターフェースの <strong><code>cache</code></strong> 読み取り専用プロパティには、リクエストのキャッシュモードが含まれています。リクエストがブラウザの <a href="/docs/Web/HTTP/Caching">HTTP キャッシュ</a> とどのように相互作用するかを制御します。</p> +<p>{{domxref("Request")}} インターフェースの <strong><code>cache</code></strong> 読み取り専用プロパティには、リクエストのキャッシュモードが含まれています。リクエストがブラウザの <a href="/ja/docs/Web/HTTP/Caching">HTTP キャッシュ</a> とどのように相互作用するかを制御します。</p> <h2 id="構文">構文</h2> @@ -27,8 +27,8 @@ translation_of: Web/API/Request/cache <li><code>default</code> — ブラウザは、HTTP キャッシュで一致するリクエストを探します。 <ul> - <li>一致するものが<a href="/docs/Web/HTTP/Caching#Freshness">新しい</a>場合、キャッシュから返されます。</li> - <li>一致するものが古い場合、ブラウザはリモートサーバーに<a href="/docs/Web/HTTP/Conditional_requests">条件付きリクエスト</a>を送信します。リソースが変更されていないことをサーバーが示した場合、そのリソースはキャッシュから返されます。それ以外の場合、リソースはサーバーからダウンロードされ、キャッシュが更新されます。</li> + <li>一致するものが<a href="/ja/docs/Web/HTTP/Caching#Freshness">新しい</a>場合、キャッシュから返されます。</li> + <li>一致するものが古い場合、ブラウザはリモートサーバーに<a href="/ja/docs/Web/HTTP/Conditional_requests">条件付きリクエスト</a>を送信します。リソースが変更されていないことをサーバーが示した場合、そのリソースはキャッシュから返されます。それ以外の場合、リソースはサーバーからダウンロードされ、キャッシュが更新されます。</li> <li>一致するものがない場合、ブラウザは通常のリクエストを行い、ダウンロードしたリソースでキャッシュを更新します。</li> </ul> </li> @@ -36,7 +36,7 @@ translation_of: Web/API/Request/cache <li><code>reload</code> — ブラウザは、最初にキャッシュを調べずにリモートサーバーからリソースをフェッチし、ダウンロードしたリソースでキャッシュを<em>更新します</em>。</li> <li><code>no-cache</code> — ブラウザは、HTTPキャッシュで一致するリクエストを探します。 <ul> - <li>一致するものが<em>新しいか古いかを問わず</em>、ブラウザはリモートサーバーに<a href="/docs/Web/HTTP/Conditional_requests">条件付きリクエスト</a>を送信します。リソースが変更されていないことをサーバーが示した場合、そのリソースはキャッシュから返されます。それ以外の場合、リソースはサーバーからダウンロードされ、キャッシュが更新されます。</li> + <li>一致するものが<em>新しいか古いかを問わず</em>、ブラウザはリモートサーバーに<a href="/ja/docs/Web/HTTP/Conditional_requests">条件付きリクエスト</a>を送信します。リソースが変更されていないことをサーバーが示した場合、そのリソースはキャッシュから返されます。それ以外の場合、リソースはサーバーからダウンロードされ、キャッシュが更新されます。</li> <li>一致するものがない場合、ブラウザは通常のリクエストを行い、ダウンロードしたリソースでキャッシュを更新します。</li> </ul> </li> @@ -49,9 +49,9 @@ translation_of: Web/API/Request/cache <li><code>only-if-cached</code> — ブラウザは、HTTPキャッシュで一致するリクエストを探します。 <ul> <li>一致するものが<em>新しいか古いかを問わず</em>、キャッシュから返されます。</li> - <li>一致するものがない場合、ブラウザは <a href="/docs/Web/HTTP/Status/504">504 ゲートウェイタイムアウト</a>ステータスで応答します。</li> + <li>一致するものがない場合、ブラウザは <a href="/ja/docs/Web/HTTP/Status/504">504 ゲートウェイタイムアウト</a>ステータスで応答します。</li> </ul> - <code>"only-if-cached"</code> モードは、リクエストの<code><a href="/docs/Web/API/Request/mode">モード</a></code>が <code>"same-origin"</code> の場合にのみ使用できます。リクエストの<code>リダイレクト</code>プロパティが <code>"follow"</code> であり、リダイレクトが <code>"same-origin"</code> モードに違反していない場合、キャッシュされたリダイレクトがフォローされます。</li> + <code>"only-if-cached"</code> モードは、リクエストの<code><a href="/ja/docs/Web/API/Request/mode">モード</a></code>が <code>"same-origin"</code> の場合にのみ使用できます。リクエストの<code>リダイレクト</code>プロパティが <code>"follow"</code> であり、リダイレクトが <code>"same-origin"</code> モードに違反していない場合、キャッシュされたリダイレクトがフォローされます。</li> </ul> <h2 id="例">例</h2> @@ -137,7 +137,7 @@ fetch("some.json", {cache: "only-if-cached", mode: "same-origin", signal: contro <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/docs/Web/HTTP">HTTP</a></li> + <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/ja/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> </ul> diff --git a/files/ja/web/api/request/integrity/index.html b/files/ja/web/api/request/integrity/index.html index 61d5bfe118..6b64a10d8b 100644 --- a/files/ja/web/api/request/integrity/index.html +++ b/files/ja/web/api/request/integrity/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Request/integrity --- <div>{{APIRef("Fetch")}}</div> -<p>{{domxref("Request")}} インターフェイスの <strong><code>integrity</code></strong> 読み取り専用プロパティには、リクエストの <a href="/en-US/docs/Web/Security/Subresource_Integrity">サブリソース完全性</a> 値が含まれています。</p> +<p>{{domxref("Request")}} インターフェイスの <strong><code>integrity</code></strong> 読み取り専用プロパティには、リクエストの <a href="/ja/docs/Web/Security/Subresource_Integrity">サブリソース完全性</a> 値が含まれています。</p> <h2 id="構文">構文</h2> @@ -21,7 +21,7 @@ translation_of: Web/API/Request/integrity <h3 id="値">値</h3> -<p>リクエストの <a href="/en-US/docs/Web/Security/Subresource_Integrity">サブリソース完全性</a> 値 (例, <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>)。</p> +<p>リクエストの <a href="/ja/docs/Web/Security/Subresource_Integrity">サブリソース完全性</a> 値 (例, <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>)。</p> <p>完全性が指定されていない場合、 <code>''</code> を返します。</p> @@ -58,7 +58,7 @@ var myIntegrity = myRequest.integrity;</pre> <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> + <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/ja/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> </ul> diff --git a/files/ja/web/api/request/mode/index.html b/files/ja/web/api/request/mode/index.html index f2c589b804..6b13d712f6 100644 --- a/files/ja/web/api/request/mode/index.html +++ b/files/ja/web/api/request/mode/index.html @@ -26,7 +26,7 @@ translation_of: Web/API/Request/mode <ul> <li><code>same-origin</code> — このモードを設定してほかのオリジンにリクエストをした場合、結果は単純にエラーになります。リクエストが常に同一オリジンに行われることを保証するために使用できます。</li> <li><code>no-cors</code> — <code>HEAD か</code> <code>GET、</code><code>POST </code>以外のメソッドを防ぎます。任意の ServiceWorkers がこれらをインターセプトする場合、<a href="https://fetch.spec.whatwg.org/#simple-header">シンプルヘッダー</a>を除いてヘッダーを追加したりオーバーライドしたりできなくなります。加えて、JavaScript は解決された {{domxref("Response")}} のプロパティにはアクセスできません。これはServiceWorkers が Web のセマンティクスに影響を与えないことを保証し、ドメインを跨いでデータが流出することでセキュリティやプライバシーの問題が生じるのを防ぎます。</li> - <li><code>cors</code> — クロスオリジンリクエストを許可します。たとえば、サードパーティベンダーが提供する様々な API にアクセスできます。これらは、<a href="https://developer.mozilla.org/ja/docs/Web/HTTP/Access_control_CORS">CORS プロトコル</a>に則ることが期待されています。<a href="https://fetch.spec.whatwg.org/#concept-filtered-response-cors">制限された</a>ヘッダーだけが {{domxref("Response")}} で使用できますが、body は読み取り可能です。</li> + <li><code>cors</code> — クロスオリジンリクエストを許可します。たとえば、サードパーティベンダーが提供する様々な API にアクセスできます。これらは、<a href="/ja/docs/Web/HTTP/Access_control_CORS">CORS プロトコル</a>に則ることが期待されています。<a href="https://fetch.spec.whatwg.org/#concept-filtered-response-cors">制限された</a>ヘッダーだけが {{domxref("Response")}} で使用できますが、body は読み取り可能です。</li> <li><code>navigate</code> — ナビゲーションを許可します。<code>navigate</code> はHTMLナビゲーションによってのみ利用されることを意図しています。ナビゲーションリクエストはドキュメント間のナビゲーションの場合にだけ生成されます。</li> </ul> @@ -36,7 +36,7 @@ translation_of: Web/API/Request/mode <p>たとえば、<code>Request</code>オブジェクトが{{domxref("Request.Request")}}コンストラクタで生成された場合、<code>mode</code>の値は<code>cors</code>にセットされます。</p> -<p>しかし、リクエストが{{domxref("Request.Request")}}コンストラクタ以外で生成された場合は<code>mode</code>として通常<code>no-cors</code>がセットされます。たとえばマークアップから生成された埋め込みリソースのようなリクエストは、<code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code>アトリビュートが設定されていない限り、<code>no-cors</code>を利用します。そのようなものの例として、{{HTMLElement("link")}} や {{HTMLElement("script")}} エレメント（ただしモジュールを除く）、{{HTMLElement("img")}}、{{HTMLElement("audio")}}、{{HTMLElement("video")}}、{{HTMLElement("object")}}、{{HTMLElement("embed")}}、{{HTMLElement("iframe")}} エレメントなどが存在します。</p> +<p>しかし、リクエストが{{domxref("Request.Request")}}コンストラクタ以外で生成された場合は<code>mode</code>として通常<code>no-cors</code>がセットされます。たとえばマークアップから生成された埋め込みリソースのようなリクエストは、<code><a href="/ja/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code>アトリビュートが設定されていない限り、<code>no-cors</code>を利用します。そのようなものの例として、{{HTMLElement("link")}} や {{HTMLElement("script")}} エレメント（ただしモジュールを除く）、{{HTMLElement("img")}}、{{HTMLElement("audio")}}、{{HTMLElement("video")}}、{{HTMLElement("object")}}、{{HTMLElement("embed")}}、{{HTMLElement("iframe")}} エレメントなどが存在します。</p> <h2 id="例">例</h2> diff --git a/files/ja/web/api/request/redirect/index.html b/files/ja/web/api/request/redirect/index.html index 0ee4d69901..087a3f0107 100644 --- a/files/ja/web/api/request/redirect/index.html +++ b/files/ja/web/api/request/redirect/index.html @@ -64,7 +64,7 @@ var myCred = myRequest.redirect;</pre> <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> + <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/ja/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> </ul> diff --git a/files/ja/web/api/request/request/index.html b/files/ja/web/api/request/request/index.html index 00f3746d0e..4038d22bc0 100644 --- a/files/ja/web/api/request/request/index.html +++ b/files/ja/web/api/request/request/index.html @@ -41,10 +41,10 @@ translation_of: Web/API/Request/Request <li><code>body</code>: リクエストに追加する本文で、 {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}}, {{domxref("ReadableStream")}} オブジェクトが使用できます。なお、リクエストが <code>GET</code> 又は <code>HEAD</code> メソッドを使用している場合、本文を持てません。</li> <li><code>mode</code>: リクエストで使用するモード。例えば、 <code>cors</code>, <code>no-cors</code>, <code>same-origin</code>, <code>navigate</code> です。既定値は <code>cors</code> です。 Chrome では、既定値は 47 以前は <code>no-cors</code> でしたが、 47 から <code>same-origin</code> になりました。</li> <li><code>credentials</code>: リクエストで使用するリクエストの資格情報です。 <code>omit</code>, <code>same-origin</code>, <code>include</code> の何れかです。既定値は <code>omit</code> です。 Chrome では、既定値は 47 以前は <code>same-origin</code> でしたが、 47 から <code>include</code> になりました。</li> - <li><code>cache</code>: リクエストで使用する <a href="/docs/Web/API/Request/cache">cache モード</a>です。</li> + <li><code>cache</code>: リクエストで使用する <a href="/ja/docs/Web/API/Request/cache">cache モード</a>です。</li> <li><code>redirect</code>: 使用するリダイレクトモードです。 <code>follow</code>, <code>error</code>, <code>manual</code> の何れかです。 Chrome では、既定値は 47 以前は <code>follow</code> でしたが、 47 から <code>manual</code> になりました。</li> <li><code>referrer</code>: <code>no-referrer</code>, <code>client</code> 又は URL を示す {{domxref("USVString")}} です。既定値は <code>client</code> です。</li> - <li><code>integrity</code>: リクエストの <a href="/docs/Web/Security/Subresource_Integrity">subresource integrity</a> の値です (例えば、 <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>)。</li> + <li><code>integrity</code>: リクエストの <a href="/ja/docs/Web/Security/Subresource_Integrity">subresource integrity</a> の値です (例えば、 <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>)。</li> </ul> </dd> </dl> @@ -154,7 +154,7 @@ var myRequest = new Request('flowers.jpg', myInit); <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/docs/Web/API/ServiceWorker_API">サービスワーカー API</a></li> - <li><a href="/docs/Web/HTTP/Access_control_CORS">HTTP アクセス制御 (CORS)</a></li> - <li><a href="/docs/Web/HTTP">HTTP</a></li> + <li><a href="/ja/docs/Web/API/ServiceWorker_API">サービスワーカー API</a></li> + <li><a href="/ja/docs/Web/HTTP/Access_control_CORS">HTTP アクセス制御 (CORS)</a></li> + <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> </ul> diff --git a/files/ja/web/api/resource_timing_api/using_the_resource_timing_api/index.html b/files/ja/web/api/resource_timing_api/using_the_resource_timing_api/index.html index 6a28850107..0a88bb0ddf 100644 --- a/files/ja/web/api/resource_timing_api/using_the_resource_timing_api/index.html +++ b/files/ja/web/api/resource_timing_api/using_the_resource_timing_api/index.html @@ -207,7 +207,7 @@ function init() { <h2 id="あわせて参照">あわせて参照</h2> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance">Firefox Performance Tool</a></li> + <li><a href="/ja/docs/Tools/Performance">Firefox Performance Tool</a></li> <li><a href="https://w3c.github.io/resource-timing/">Resource Timing Standard</a>; W3C Editor's Draft</li> <li><a href="http://www.stevesouders.com/blog/2014/08/21/resource-timing-practical-tips/">Resource Timing practical tips</a>; Steve Souders; 2014 August 21</li> <li><a href="http://googledevelopers.blogspot.ca/2013/12/measuring-network-performance-with.html">Measuring network performance with Resource Timing API</a>; Ilya Grigorik; 2013 December 11</li> diff --git a/files/ja/web/api/response/error/index.html b/files/ja/web/api/response/error/index.html index 28ad1c1995..84934f2c0e 100644 --- a/files/ja/web/api/response/error/index.html +++ b/files/ja/web/api/response/error/index.html @@ -8,7 +8,7 @@ translation_of: Web/API/Response/error <p>{{domxref("Response")}} インターフェイスの <strong><code>error()</code></strong> メソッドはネットワークエラーに関連付けられた新規の <code>Response</code> オブジェクトを返します。</p> <div class="note"> -<p><strong>Note</strong>: これは主に <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a> に関連しています。エラーメソッドは、必要に応じてエラーを返す為に使用されます。 エラーレスポンスの {{domxref("Response.type","type")}} は <code>error</code> に設定されています。</p> +<p><strong>Note</strong>: これは主に <a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorkers</a> に関連しています。エラーメソッドは、必要に応じてエラーを返す為に使用されます。 エラーレスポンスの {{domxref("Response.type","type")}} は <code>error</code> に設定されています。</p> </div> <div class="note"> @@ -57,7 +57,7 @@ translation_of: Web/API/Response/error <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> + <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/ja/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> </ul> diff --git a/files/ja/web/api/response/headers/index.html b/files/ja/web/api/response/headers/index.html index 96dd993ea7..b2ae311083 100644 --- a/files/ja/web/api/response/headers/index.html +++ b/files/ja/web/api/response/headers/index.html @@ -67,7 +67,7 @@ fetch(myRequest).then(function(response) { <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> + <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/ja/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> </ul> diff --git a/files/ja/web/api/response/redirect/index.html b/files/ja/web/api/response/redirect/index.html index 3fe304bfc4..d940a603bf 100644 --- a/files/ja/web/api/response/redirect/index.html +++ b/files/ja/web/api/response/redirect/index.html @@ -8,7 +8,7 @@ translation_of: Web/API/Response/redirect <p>{{domxref("Response")}} インターフェイスの <strong><code>redirect()</code></strong> メソッドは、指定されたURLへのレダイレクトをもたらす <code>Response</code> を返します。</p> <div class="note"> -<p><strong>Note</strong>: これは主に <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> に関連しています。制御service worker は、ページのリクエストを中断し、必要に応じてリダイレクトできます。もし Service worker が上流に送信を行うと、実際に本当のリダイレクトが発生します。</p> +<p><strong>Note</strong>: これは主に <a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> に関連しています。制御service worker は、ページのリクエストを中断し、必要に応じてリダイレクトできます。もし Service worker が上流に送信を行うと、実際に本当のリダイレクトが発生します。</p> </div> <h2 id="構文">構文</h2> @@ -79,7 +79,7 @@ translation_of: Web/API/Response/redirect <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> + <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/ja/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> </ul> diff --git a/files/ja/web/api/response/response/index.html b/files/ja/web/api/response/response/index.html index d61b3de4f3..e457605825 100644 --- a/files/ja/web/api/response/response/index.html +++ b/files/ja/web/api/response/response/index.html @@ -30,7 +30,7 @@ translation_of: Web/API/Response/Response <ul> <li><code>status</code>: レスポンス[応答]のステータスコードです。（例： <code>200</code>）</li> <li><code>statusText</code>: ステータスメッセージは次のようなものです。（例：<code>OK</code>など)</li> - <li><code>headers</code>: レスポンス[応答]に追加するヘッダーは、{{domxref("ByteString")}} のキーと値のペアか、もしくは{{domxref("Headers")}} 、または文字どおりの状態で含まれます。（詳細は、<a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a>を参照）</li> + <li><code>headers</code>: レスポンス[応答]に追加するヘッダーは、{{domxref("ByteString")}} のキーと値のペアか、もしくは{{domxref("Headers")}} 、または文字どおりの状態で含まれます。（詳細は、<a href="/ja/docs/Web/HTTP/Headers">HTTP headers</a>を参照）</li> </ul> </dd> </dl> @@ -69,7 +69,7 @@ var myResponse = new Response(myBlob,init);</pre> <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> + <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/ja/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> </ul> diff --git a/files/ja/web/api/rtcdatachannel/index.html b/files/ja/web/api/rtcdatachannel/index.html index 43122cd6d5..68a3db927e 100644 --- a/files/ja/web/api/rtcdatachannel/index.html +++ b/files/ja/web/api/rtcdatachannel/index.html @@ -124,5 +124,5 @@ dc.onclose = function () { <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/docs/Web/Guide/API/WebRTC">WebRTC</a></li> + <li><a href="/ja/docs/Web/Guide/API/WebRTC">WebRTC</a></li> </ul> diff --git a/files/ja/web/api/rtcdatachannelevent/index.html b/files/ja/web/api/rtcdatachannelevent/index.html index 5d0adc1f04..3c2a76e792 100644 --- a/files/ja/web/api/rtcdatachannelevent/index.html +++ b/files/ja/web/api/rtcdatachannelevent/index.html @@ -60,6 +60,6 @@ translation_of: Web/API/RTCDataChannelEvent <h2 id="See_also">See also</h2> <ul> - <li><a href="/en-US/docs/Web/Guide/API/WebRTC" title="/en-US/docs/CSS/Using_CSS_animations">WebRTC</a></li> + <li><a href="/ja/docs/Web/Guide/API/WebRTC" title="/en-US/docs/CSS/Using_CSS_animations">WebRTC</a></li> <li>このイベントの通常ターゲット: {{domxref("RTCPeerConnection")}}.</li> </ul> diff --git a/files/ja/web/api/rtcpeerconnection/cantrickleicecandidates/index.html b/files/ja/web/api/rtcpeerconnection/cantrickleicecandidates/index.html index 290a1a95eb..158c0b9c02 100644 --- a/files/ja/web/api/rtcpeerconnection/cantrickleicecandidates/index.html +++ b/files/ja/web/api/rtcpeerconnection/cantrickleicecandidates/index.html @@ -93,7 +93,7 @@ pc.addEventListener('icecandidate', e => { <h2 id="See_also">See also</h2> <ul> - <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li> + <li><a href="/ja/docs/Web/Guide/API/WebRTC">WebRTC</a></li> <li>{{domxref("RTCPeerConnection.addIceCandidate()")}}</li> - <li><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Lifetime of a WebRTC session</a></li> + <li><a href="/ja/docs/Web/API/WebRTC_API/Session_lifetime">Lifetime of a WebRTC session</a></li> </ul> diff --git a/files/ja/web/api/rtcpeerconnectioniceevent/index.html b/files/ja/web/api/rtcpeerconnectioniceevent/index.html index b1e1dab04a..e60658504e 100644 --- a/files/ja/web/api/rtcpeerconnectioniceevent/index.html +++ b/files/ja/web/api/rtcpeerconnectioniceevent/index.html @@ -60,6 +60,6 @@ translation_of: Web/API/RTCPeerConnectionIceEvent <h2 id="その他の記事">その他の記事</h2> <ul> - <li><a href="/en-US/docs/Web/Guide/API/WebRTC" title="/en-US/docs/CSS/Using_CSS_animations">WebRTC</a></li> + <li><a href="/ja/docs/Web/Guide/API/WebRTC" title="/en-US/docs/CSS/Using_CSS_animations">WebRTC</a></li> <li>このイベントの通常ターゲット: {{domxref("RTCPeerConnection")}}.</li> </ul> diff --git a/files/ja/web/api/scriptprocessornode/index.html b/files/ja/web/api/scriptprocessornode/index.html index cf4f2b64c9..391ab716d9 100644 --- a/files/ja/web/api/scriptprocessornode/index.html +++ b/files/ja/web/api/scriptprocessornode/index.html @@ -6,7 +6,7 @@ translation_of: Web/API/ScriptProcessorNode <p>{{APIRef("Web Audio API")}}</p> <div class="note"> -<p><strong>Note</strong>: 2014/8/29のWeb Audio API仕様公開にて、本機能は廃止対象となり<a href="/en-US/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a>の機能によって置き換えられる予定です.</p> +<p><strong>Note</strong>: 2014/8/29のWeb Audio API仕様公開にて、本機能は廃止対象となり<a href="/ja/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a>の機能によって置き換えられる予定です.</p> </div> <div> @@ -92,5 +92,5 @@ translation_of: Web/API/ScriptProcessorNode <h2 id="See_also">See also</h2> <ul> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/selection/index.html b/files/ja/web/api/selection/index.html index 8e40c138ed..223666ac59 100644 --- a/files/ja/web/api/selection/index.html +++ b/files/ja/web/api/selection/index.html @@ -120,7 +120,7 @@ window.alert(selObj);</pre> </dl> <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li>{{domxref("window.getSelection")}} 、 {{domxref("document.getSelection")}} 、 <a href="/en-US/docs/DOM/range">Range</a></li> + <li>{{domxref("window.getSelection")}} 、 {{domxref("document.getSelection")}} 、 <a href="/ja/docs/DOM/range">Range</a></li> <li>HTML5 DOM Range <a class="external" href="http://html5.org/specs/dom-range.html#selection">Interface Selection</a></li> <li><a class="external" href="http://lxr.mozilla.org/mozilla/source/content/base/public/nsISelection.idl">IDL definition in Mozilla cross-reference</a></li> </ul> diff --git a/files/ja/web/api/service_worker_api/index.html b/files/ja/web/api/service_worker_api/index.html index 35e01fcb79..828edee89d 100644 --- a/files/ja/web/api/service_worker_api/index.html +++ b/files/ja/web/api/service_worker_api/index.html @@ -16,9 +16,9 @@ translation_of: Web/API/Service_Worker_API <h2 id="Service_worker_concepts_and_usage" name="Service_worker_concepts_and_usage">Service Worker の概念と使い方</h2> -<p>Service Worker は、あるオリジンとパスに対して登録されたイベント駆動型の <a href="/docs/Web/API/Worker">worker</a> です。JavaScript ファイルの形を取り、ナビゲーションやリソースへのリクエストを横取りや改変したり細かい粒度でリソースをキャッシュすることで関連付けられたウェブページやサイトを制御し、それぞれの状況（もっとも顕著な例は、ネットワークが利用できないとき）にアプリがどのように振舞うかを完全に制御することができます。</p> +<p>Service Worker は、あるオリジンとパスに対して登録されたイベント駆動型の <a href="/ja/docs/Web/API/Worker">worker</a> です。JavaScript ファイルの形を取り、ナビゲーションやリソースへのリクエストを横取りや改変したり細かい粒度でリソースをキャッシュすることで関連付けられたウェブページやサイトを制御し、それぞれの状況（もっとも顕著な例は、ネットワークが利用できないとき）にアプリがどのように振舞うかを完全に制御することができます。</p> -<p>Service Worker は worker のコンテキストで実行されます。従って、DOM へアクセスすることができず、アプリを実行する主要な JavaScript とは異なるスレッドで実行されるため、他のタスクをブロックすることはありません。完全に非同期で設計されています。そのため、同期型の <a href="/docs/Web/API/XMLHttpRequest">XHR</a> や <a href="/docs/Web/Guide/API/DOM/Storage">localStorage</a> のような API を Service Worker で利用することはできません。</p> +<p>Service Worker は worker のコンテキストで実行されます。従って、DOM へアクセスすることができず、アプリを実行する主要な JavaScript とは異なるスレッドで実行されるため、他のタスクをブロックすることはありません。完全に非同期で設計されています。そのため、同期型の <a href="/ja/docs/Web/API/XMLHttpRequest">XHR</a> や <a href="/ja/docs/Web/Guide/API/DOM/Storage">localStorage</a> のような API を Service Worker で利用することはできません。</p> <p>Service worker はセキュリティ上の理由から、HTTPS 通信でのみ動作します。ネットワークリクエストが改変されると、中間者攻撃を受けるので、人間に広く開かれているのは本当にまずいことです。Firefox では<a href="https://support.mozilla.org/ja/kb/private-browsing-use-firefox-without-history">プライベートブラウジングモード</a>で Service Worker API を利用することはできません。</p> @@ -69,7 +69,7 @@ translation_of: Web/API/Service_Worker_API <p><strong>メモ</strong>: <code>oninstall</code>/<code>onactivate</code> は完了するまでに時間がかかる可能性があるため、Service Worker の仕様書では <code>waitUntil</code> メソッドを提供しており、これが <code>oninstall</code> 又は <code>onactivate</code> を呼び出すと、promise を渡します。promise が正常に解決されるまで、関数イベントは Service Worker に配信されません。</p> </div> -<p>最初の基本的な例をどのように構築するかについての完全なチュートリアルは、<a href="/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Service Worker の使用</a>を読んでください。</p> +<p>最初の基本的な例をどのように構築するかについての完全なチュートリアルは、<a href="/ja/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Service Worker の使用</a>を読んでください。</p> <h2 id="Other_use_case_ideas" name="Other_use_case_ideas">その他の使用例</h2> @@ -89,7 +89,7 @@ translation_of: Web/API/Service_Worker_API <ul> <li><a href="https://github.com/slightlyoff/BackgroundSync">バックグラウンド同期</a>: ユーザーがサイトにいないときにも Service Worker を起動し、キャッシュを更新したりすることができます。</li> - <li><a href="/docs/Web/API/Push_API">プッシュメッセージへの応答</a>: 新しいコンテンツが利用可能になった旨を伝えるためにユーザーにメッセージを送るために Service Worker を起動します。</li> + <li><a href="/ja/docs/Web/API/Push_API">プッシュメッセージへの応答</a>: 新しいコンテンツが利用可能になった旨を伝えるためにユーザーにメッセージを送るために Service Worker を起動します。</li> <li>特定の日付・時刻に対する反応</li> <li>特定の地理的範囲へ入った事を検知する</li> </ul> @@ -130,7 +130,7 @@ translation_of: Web/API/Service_Worker_API <dt>{{DOMxRef("ServiceWorkerRegistration")}} {{Experimental_Inline}}</dt> <dd>Service Worker の登録を表します。</dd> <dt>{{DOMxRef("ServiceWorkerState")}} {{Experimental_Inline}}</dt> - <dd><a href="https://developer.mozilla.org/ja/docs/Web/API/ServiceWorker" title="ServiceWorker インターフェイス of the ServiceWorker API provides a reference to a service worker. Multiple browsing contexts (e.g. pages, workers, etc.) can be associated with the same service worker, each through a unique ServiceWorker object."><code>ServiceWorker</code></a> の状態に関連付けられています。</dd> + <dd><a href="/ja/docs/Web/API/ServiceWorker" title="ServiceWorker インターフェイス of the ServiceWorker API provides a reference to a service worker. Multiple browsing contexts (e.g. pages, workers, etc.) can be associated with the same service worker, each through a unique ServiceWorker object."><code>ServiceWorker</code></a> の状態に関連付けられています。</dd> <dt>{{DOMxRef("SyncEvent")}} {{Non-standard_Inline}}</dt> <dd> <p>SyncEventインターフェイスはService Workerの{{DOMxRef("ServiceWorkerGlobalScope")}}でディスパッチされた同期アクションを表します。</p> diff --git a/files/ja/web/api/serviceworkerglobalscope/clients/index.html b/files/ja/web/api/serviceworkerglobalscope/clients/index.html index d7de403604..1e9ebc67d2 100644 --- a/files/ja/web/api/serviceworkerglobalscope/clients/index.html +++ b/files/ja/web/api/serviceworkerglobalscope/clients/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/ServiceWorkerGlobalScope/clients --- <p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p> -<p>{{domxref("ServiceWorkerGlobalScope")}} インターフェースの <strong><code>clients</code></strong> 読み取り専用プロパティは、service worker に関連する <a href="https://developer.mozilla.org/ja/docs/Web/API/Clients" title="The ServiceWorkerClients interface of the ServiceWorker API represents a container for a list of ServiceWorkerClient objects."><code>Clients</code></a> オブジェクトを返します。</p> +<p>{{domxref("ServiceWorkerGlobalScope")}} インターフェースの <strong><code>clients</code></strong> 読み取り専用プロパティは、service worker に関連する <a href="/ja/docs/Web/API/Clients" title="The ServiceWorkerClients interface of the ServiceWorker API represents a container for a list of ServiceWorkerClient objects."><code>Clients</code></a> オブジェクトを返します。</p> <h2 id="Syntax" name="Syntax" style="line-height: 30px; font-size: 2.14285714285714rem;">構文</h2> diff --git a/files/ja/web/api/serviceworkerglobalscope/onactivate/index.html b/files/ja/web/api/serviceworkerglobalscope/onactivate/index.html index 5458d5376d..61c3865524 100644 --- a/files/ja/web/api/serviceworkerglobalscope/onactivate/index.html +++ b/files/ja/web/api/serviceworkerglobalscope/onactivate/index.html @@ -61,9 +61,9 @@ ServiceWorkerGlobalScope.addEventListener('activate', function(event) { ... });< <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li> + <li><a href="/ja/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li> <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Service workers basic code example</a></li> <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li> <li>{{jsxref("Promise")}}</li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li> + <li><a href="/ja/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li> </ul> diff --git a/files/ja/web/api/serviceworkerglobalscope/oninstall/index.html b/files/ja/web/api/serviceworkerglobalscope/oninstall/index.html index 2a74e0ae96..9d44254314 100644 --- a/files/ja/web/api/serviceworkerglobalscope/oninstall/index.html +++ b/files/ja/web/api/serviceworkerglobalscope/oninstall/index.html @@ -67,9 +67,9 @@ ServiceWorkerGlobalScope.addEventListener('install', function(event) { ... });</ <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li> + <li><a href="/ja/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li> <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Service workers basic code example</a></li> <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li> <li>{{jsxref("Promise")}}</li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li> + <li><a href="/ja/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li> </ul> diff --git a/files/ja/web/api/sharedworker/index.html b/files/ja/web/api/sharedworker/index.html index 9e504bc155..ed65c339b4 100644 --- a/files/ja/web/api/sharedworker/index.html +++ b/files/ja/web/api/sharedworker/index.html @@ -103,5 +103,5 @@ translation_of: Web/API/SharedWorker <ul> <li>{{domxref("Worker")}}</li> - <li><a class="internal" href="/docs/Web/Guide/Performance/Using_web_workers">Web workers の利用</a></li> + <li><a class="internal" href="/ja/docs/Web/Guide/Performance/Using_web_workers">Web workers の利用</a></li> </ul> diff --git a/files/ja/web/api/sourcebuffer/appendbufferasync/index.html b/files/ja/web/api/sourcebuffer/appendbufferasync/index.html index a1032f53b0..645e840ea0 100644 --- a/files/ja/web/api/sourcebuffer/appendbufferasync/index.html +++ b/files/ja/web/api/sourcebuffer/appendbufferasync/index.html @@ -80,7 +80,7 @@ translation_of: Web/API/SourceBuffer/appendBufferAsync <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/API/Media_Source_Extensions_API">Media Source Extensions API</a></li> + <li><a href="/ja/docs/Web/API/Media_Source_Extensions_API">Media Source Extensions API</a></li> <li>{{domxref("SourceBuffer.appendBuffer()")}}</li> <li>{{domxref("MediaSource")}}</li> <li>{{domxref("SourceBufferList")}}</li> diff --git a/files/ja/web/api/sourcebuffer/removeasync/index.html b/files/ja/web/api/sourcebuffer/removeasync/index.html index 01fe9a4d40..504f659903 100644 --- a/files/ja/web/api/sourcebuffer/removeasync/index.html +++ b/files/ja/web/api/sourcebuffer/removeasync/index.html @@ -79,7 +79,7 @@ translation_of: Web/API/SourceBuffer/removeAsync <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/API/Media_Source_Extensions_API">Media Source Extensions API</a></li> + <li><a href="/ja/docs/Web/API/Media_Source_Extensions_API">Media Source Extensions API</a></li> <li>{{domxref("SourceBuffer.remove()")}}</li> <li>{{domxref("MediaSource")}}</li> <li>{{domxref("SourceBufferList")}}</li> diff --git a/files/ja/web/api/sourcebufferlist/index.html b/files/ja/web/api/sourcebufferlist/index.html index 588a496ad3..9e36495e65 100644 --- a/files/ja/web/api/sourcebufferlist/index.html +++ b/files/ja/web/api/sourcebufferlist/index.html @@ -42,7 +42,7 @@ translation_of: Web/API/SourceBufferList <p><em>親インターフェイスである {{domxref("EventTarget")}} からメソッドを継承します。</em></p> <dl> - <dt><a href="/en-US/docs/Web/API/SourceBufferList/SourceBuffer"><code>SourceBufferList</code>: indexed property getter</a></dt> + <dt><a href="/ja/docs/Web/API/SourceBufferList/SourceBuffer"><code>SourceBufferList</code>: indexed property getter</a></dt> <dd>このゲッターにより、リスト内の <code>SourceBuffer</code> オブジェクトに配列演算子（つまり <code>[]</code>）でアクセスできます。</dd> </dl> diff --git a/files/ja/web/api/speechrecognition/index.html b/files/ja/web/api/speechrecognition/index.html index eb362d03f0..83419b26c1 100644 --- a/files/ja/web/api/speechrecognition/index.html +++ b/files/ja/web/api/speechrecognition/index.html @@ -141,7 +141,7 @@ recognition.onresult = function(event) { <h3 id="Firefox_OS_permissions" name="Firefox_OS_permissions">Firefox OS の許可設定</h3> -<p>アプリ内で音声認識を使用するには、以下の許可設定を <a href="/docs/Web/Apps/Build/Manifest">manifest</a> で指定する必要があります:</p> +<p>アプリ内で音声認識を使用するには、以下の許可設定を <a href="/ja/docs/Web/Apps/Build/Manifest">manifest</a> で指定する必要があります:</p> <pre class="brush: json">"permissions": { "audio-capture" : { diff --git a/files/ja/web/api/speechrecognition/onerror/index.html b/files/ja/web/api/speechrecognition/onerror/index.html index 24a3783215..132275ba77 100644 --- a/files/ja/web/api/speechrecognition/onerror/index.html +++ b/files/ja/web/api/speechrecognition/onerror/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/SpeechRecognition/onerror --- <div>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</div> -<p>{{domxref("SpeechRecognition")}}インターフェイスの <strong><code>onerror</code></strong> プロパティは、音声の認識でエラーが発生した場合(<a href="https://developer.mozilla.org/ja/docs/Web/Events/error_%28SpeechRecognitionError%29">error</a> イベントが発生した時) に、実行するイベントハンドラーになります。</p> +<p>{{domxref("SpeechRecognition")}}インターフェイスの <strong><code>onerror</code></strong> プロパティは、音声の認識でエラーが発生した場合(<a href="/ja/docs/Web/Events/error_%28SpeechRecognitionError%29">error</a> イベントが発生した時) に、実行するイベントハンドラーになります。</p> <h2 id="Syntax" name="Syntax">構文</h2> diff --git a/files/ja/web/api/speechrecognition/speechrecognition/index.html b/files/ja/web/api/speechrecognition/speechrecognition/index.html index 0e9aa25fe3..e7b526dcac 100644 --- a/files/ja/web/api/speechrecognition/speechrecognition/index.html +++ b/files/ja/web/api/speechrecognition/speechrecognition/index.html @@ -69,7 +69,7 @@ recognition.maxAlternatives = 1; <h3 id="Firefox_OS_permissions">Firefox OS permissions</h3> -<p>speech recognition を使用するには、<a href="/docs/Web/Apps/Build/Manifest">manifest</a> に下記の permissions 設定が必要です:</p> +<p>speech recognition を使用するには、<a href="/ja/docs/Web/Apps/Build/Manifest">manifest</a> に下記の permissions 設定が必要です:</p> <pre class="brush: json notranslate">"permissions": { "audio-capture" : { @@ -87,5 +87,5 @@ recognition.maxAlternatives = 1; <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/docs/Web/API/Web_Speech_API">Web Speech API</a></li> + <li><a href="/ja/docs/Web/API/Web_Speech_API">Web Speech API</a></li> </ul> diff --git a/files/ja/web/api/speechrecognitionalternative/index.html b/files/ja/web/api/speechrecognitionalternative/index.html index 14421c1010..37081e0812 100644 --- a/files/ja/web/api/speechrecognitionalternative/index.html +++ b/files/ja/web/api/speechrecognitionalternative/index.html @@ -71,7 +71,7 @@ translation_of: Web/API/SpeechRecognitionAlternative <h3 id="Firefox_OS_permissions" name="Firefox_OS_permissions">Firefox OS の許可設定</h3> -<p>アプリ内で音声認識を使用するには、<a href="/docs/Web/Apps/Build/Manifest">manifest</a> ファイルに次の許可設定を指定する必要があります:</p> +<p>アプリ内で音声認識を使用するには、<a href="/ja/docs/Web/Apps/Build/Manifest">manifest</a> ファイルに次の許可設定を指定する必要があります:</p> <pre class="brush: json">"permissions": { "audio-capture" : { @@ -89,5 +89,5 @@ translation_of: Web/API/SpeechRecognitionAlternative <h2 id="See_also" name="See_also">関連項目</h2> <ul> - <li><a href="/docs/Web/API/Web_Speech_API">Web Speech API</a></li> + <li><a href="/ja/docs/Web/API/Web_Speech_API">Web Speech API</a></li> </ul> diff --git a/files/ja/web/api/speechrecognitionerror/index.html b/files/ja/web/api/speechrecognitionerror/index.html index 946b92cf92..e31d3c0ae9 100644 --- a/files/ja/web/api/speechrecognitionerror/index.html +++ b/files/ja/web/api/speechrecognitionerror/index.html @@ -63,7 +63,7 @@ recognition.onerror = function(event) { <h3 id="Firefox_OS_permissions" name="Firefox_OS_permissions">Firefox OS の許可設定</h3> -<p>アプリ内で音声認識を使用するには、以下の許可設定を <a href="/docs/Web/Apps/Build/Manifest">manifest</a> で指定する必要があります:</p> +<p>アプリ内で音声認識を使用するには、以下の許可設定を <a href="/ja/docs/Web/Apps/Build/Manifest">manifest</a> で指定する必要があります:</p> <pre class="brush: json">"permissions": { "audio-capture" : { diff --git a/files/ja/web/api/speechrecognitionresult/index.html b/files/ja/web/api/speechrecognitionresult/index.html index a4af82efaa..197a184cbd 100644 --- a/files/ja/web/api/speechrecognitionresult/index.html +++ b/files/ja/web/api/speechrecognitionresult/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/SpeechRecognitionResult --- <p>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</p> -<p>The <strong><code>SpeechRecognitionResult</code></strong> interface of the <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> represents a single recognition match, which may contain multiple {{domxref("SpeechRecognitionAlternative")}} objects.</p> +<p>The <strong><code>SpeechRecognitionResult</code></strong> interface of the <a href="/ja/docs/Web/API/Web_Speech_API">Web Speech API</a> represents a single recognition match, which may contain multiple {{domxref("SpeechRecognitionAlternative")}} objects.</p> <h2 id="Properties">Properties</h2> @@ -79,7 +79,7 @@ translation_of: Web/API/SpeechRecognitionResult <h3 id="Firefox_OS_permissions">Firefox OS permissions</h3> -<p>To use speech recognition in an app, you need to specify the following permissions in your <a href="/en-US/docs/Web/Apps/Build/Manifest">manifest</a>:</p> +<p>To use speech recognition in an app, you need to specify the following permissions in your <a href="/ja/docs/Web/Apps/Build/Manifest">manifest</a>:</p> <pre class="brush: json">"permissions": { "audio-capture" : { @@ -97,5 +97,5 @@ translation_of: Web/API/SpeechRecognitionResult <h2 id="See_also">See also</h2> <ul> - <li><a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a></li> + <li><a href="/ja/docs/Web/API/Web_Speech_API">Web Speech API</a></li> </ul> diff --git a/files/ja/web/api/speechsynthesisutterance/lang/index.html b/files/ja/web/api/speechsynthesisutterance/lang/index.html index a292391c7d..c3ccac577d 100644 --- a/files/ja/web/api/speechsynthesisutterance/lang/index.html +++ b/files/ja/web/api/speechsynthesisutterance/lang/index.html @@ -73,5 +73,5 @@ inputForm.onsubmit = function(event) { <h2 id="See_also">See also</h2> <ul> - <li><a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a></li> + <li><a href="/ja/docs/Web/API/Web_Speech_API">Web Speech API</a></li> </ul> diff --git a/files/ja/web/api/stereopannernode/index.html b/files/ja/web/api/stereopannernode/index.html index 029a7a7151..a914f2620f 100644 --- a/files/ja/web/api/stereopannernode/index.html +++ b/files/ja/web/api/stereopannernode/index.html @@ -6,7 +6,7 @@ translation_of: Web/API/StereoPannerNode <p>{{APIRef("Web Audio API")}}</p> <div> -<p><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> の<code> StereoPannerNode</code> は、シンプルなステレオのパンニングを行うノードです。これを利用することで、オーディオストリームを左右にパンできます。{{domxref("AudioNode")}} の一種で、コストが低くパワーの変わらない <a href="http://webaudio.github.io/web-audio-api/#panning-algorithm">アルゴリズム</a>を用います。</p> +<p><a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a> の<code> StereoPannerNode</code> は、シンプルなステレオのパンニングを行うノードです。これを利用することで、オーディオストリームを左右にパンできます。{{domxref("AudioNode")}} の一種で、コストが低くパワーの変わらない <a href="http://webaudio.github.io/web-audio-api/#panning-algorithm">アルゴリズム</a>を用います。</p> </div> <p>{{domxref("StereoPannerNode.pan", "pan")}} 属性には -1 （完全に左へパンニング）から 1（完全に右へパンニング）までの実数値を単位をつけずに指定します。このインタフェースにより、{{domxref("PannerNode")}} よりシンプルにパンを指定できます。</p> @@ -79,5 +79,5 @@ translation_of: Web/API/StereoPannerNode <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> </ul> diff --git a/files/ja/web/api/subtlecrypto/digest/index.html b/files/ja/web/api/subtlecrypto/digest/index.html index e2e80d0477..87a91bf346 100644 --- a/files/ja/web/api/subtlecrypto/digest/index.html +++ b/files/ja/web/api/subtlecrypto/digest/index.html @@ -45,7 +45,7 @@ translation_of: Web/API/SubtleCrypto/digest <h2 id="Supported_algorithms" name="Supported_algorithms">対応しているアルゴリズム</h2> -<p>ダイジェストアルゴリズムは <a href="/en-US/docs/Glossary/Cryptographic_hash_function">暗号ハッシュ関数</a> とも呼ばれ、任意の大きなデータブロックを固定サイズの出力 (通常は入力よりもはるかに短い出力) に変換します。暗号化にはさまざまな用途があります。</p> +<p>ダイジェストアルゴリズムは <a href="/ja/docs/Glossary/Cryptographic_hash_function">暗号ハッシュ関数</a> とも呼ばれ、任意の大きなデータブロックを固定サイズの出力 (通常は入力よりもはるかに短い出力) に変換します。暗号化にはさまざまな用途があります。</p> <h3 id="SHA-1">SHA-1</h3> diff --git a/files/ja/web/api/svgelement/index.html b/files/ja/web/api/svgelement/index.html index 0e5f9336ea..960ed88276 100644 --- a/files/ja/web/api/svgelement/index.html +++ b/files/ja/web/api/svgelement/index.html @@ -39,27 +39,27 @@ translation_of: Web/API/SVGElement <h2 id="Events">Events</h2> -<p>Listen to these events using <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> or by assigning an event listener to the equivalent <code>on...</code> handler property defined on {{DOMxRef("GlobalEventHandlers")}} or {{DOMxRef("WindowEventHandlers")}}.</p> +<p>Listen to these events using <code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> or by assigning an event listener to the equivalent <code>on...</code> handler property defined on {{DOMxRef("GlobalEventHandlers")}} or {{DOMxRef("WindowEventHandlers")}}.</p> <dl> - <dt><code><a href="/en-US/docs/Web/API/SVGElement/abort_event">abort</a></code></dt> + <dt><code><a href="/ja/docs/Web/API/SVGElement/abort_event">abort</a></code></dt> <dd>Fired when page loading is stopped before an SVG element has been allowed to load completely.<br> - Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onabort">onabort</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/SVGElement/error_event">error</a></code></dt> + Also available via the <code><a href="/ja/docs/Web/API/GlobalEventHandlers/onabort">onabort</a></code> property.</dd> + <dt><code><a href="/ja/docs/Web/API/SVGElement/error_event">error</a></code></dt> <dd>Fired when an SVG element does not load properly or when an error occurs during script execution.<br> - Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onerror">onerror</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/SVGElement/load_event">load</a></code></dt> + Also available via the <code><a href="/ja/docs/Web/API/GlobalEventHandlers/onerror">onerror</a></code> property.</dd> + <dt><code><a href="/ja/docs/Web/API/SVGElement/load_event">load</a></code></dt> <dd>Fires on an <code>SVGElement</code> when it is loaded in the browser.<br> - Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onload">onload</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/SVGElement/resize_event">resize</a></code></dt> + Also available via the <code><a href="/ja/docs/Web/API/GlobalEventHandlers/onload">onload</a></code> property.</dd> + <dt><code><a href="/ja/docs/Web/API/SVGElement/resize_event">resize</a></code></dt> <dd>Fired when an SVG document is being resized.<br> - Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onresize">onresize</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/SVGElement/scroll_event">scroll</a></code></dt> + Also available via the <code><a href="/ja/docs/Web/API/GlobalEventHandlers/onresize">onresize</a></code> property.</dd> + <dt><code><a href="/ja/docs/Web/API/SVGElement/scroll_event">scroll</a></code></dt> <dd>Fired when an SVG document view is being shifted along the X and/or Y axes.<br> - Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onscroll">onscroll</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/SVGElement/unload_event">unload</a></code></dt> + Also available via the <code><a href="/ja/docs/Web/API/GlobalEventHandlers/onscroll">onscroll</a></code> property.</dd> + <dt><code><a href="/ja/docs/Web/API/SVGElement/unload_event">unload</a></code></dt> <dd>Fired when the DOM implementation removes an SVG document from a window or frame.<br> - Also available via the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onunload">onunload</a></code> property.</dd> + Also available via the <code><a href="/ja/docs/Web/API/WindowEventHandlers/onunload">onunload</a></code> property.</dd> </dl> <h2 id="仕様">仕様</h2> @@ -95,5 +95,5 @@ translation_of: Web/API/SVGElement <ul> <li>HTML {{htmlattrxref("data-*")}} attribute</li> <li>SVG {{SVGAttr("data-*")}} attribute</li> - <li><a href="/en-US/docs/Web/Guide/HTML/Using_data_attributes">Using custom data attributes in HTML</a></li> + <li><a href="/ja/docs/Web/Guide/HTML/Using_data_attributes">Using custom data attributes in HTML</a></li> </ul> diff --git a/files/ja/web/api/syncmanager/index.html b/files/ja/web/api/syncmanager/index.html index 795349e334..3b37d09e36 100644 --- a/files/ja/web/api/syncmanager/index.html +++ b/files/ja/web/api/syncmanager/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/SyncManager --- <p>{{APIRef("Service Workers API")}}{{Non-standard_header}}</p> -<p><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> の <strong><code>SyncManager</code></strong> インターフェイスは同期登録を登録、及び一覧表示のインターフェイスを提供します。</p> +<p><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> の <strong><code>SyncManager</code></strong> インターフェイスは同期登録を登録、及び一覧表示のインターフェイスを提供します。</p> <h2 id="プロパティ">プロパティ</h2> diff --git a/files/ja/web/api/touch/screeny/index.html b/files/ja/web/api/touch/screeny/index.html index e521136ad8..6f5660ae70 100644 --- a/files/ja/web/api/touch/screeny/index.html +++ b/files/ja/web/api/touch/screeny/index.html @@ -29,7 +29,7 @@ translation_of: Web/API/Touch/screenY <h2 id="例">例</h2> -<p><a href="/en-US/docs/Web/API/Touch/screenX#Example">Touch.screenX の例</a>には、このプロパティの使用例が含まれています。</p> +<p><a href="/ja/docs/Web/API/Touch/screenX#Example">Touch.screenX の例</a>には、このプロパティの使用例が含まれています。</p> <h2 id="仕様">仕様</h2> diff --git a/files/ja/web/api/transitionevent/pseudoelement/index.html b/files/ja/web/api/transitionevent/pseudoelement/index.html index 3355dc07e8..e9ffe5db5c 100644 --- a/files/ja/web/api/transitionevent/pseudoelement/index.html +++ b/files/ja/web/api/transitionevent/pseudoelement/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/TransitionEvent/pseudoElement --- <p>{{ apiref("CSSOM") }} {{SeeCompatTable}}</p> -<p><code><strong>TransitionEvent.pseudoElement</strong></code> 読み取り専用プロパティは、 {{domxref("DOMString")}} であり、 <code>'::'</code> で始まり、アニメーションが実行される<a href="/en-US/docs/Web/CSS/Pseudo-elements" title="/en-US/docs/Web/CSS/Pseudo-elements">疑似要素</a>の名前が含まれています。トランジションが擬似要素で実行されない場合は、要素は空文字です: <code>''</code> 。</p> +<p><code><strong>TransitionEvent.pseudoElement</strong></code> 読み取り専用プロパティは、 {{domxref("DOMString")}} であり、 <code>'::'</code> で始まり、アニメーションが実行される<a href="/ja/docs/Web/CSS/Pseudo-elements" title="/en-US/docs/Web/CSS/Pseudo-elements">疑似要素</a>の名前が含まれています。トランジションが擬似要素で実行されない場合は、要素は空文字です: <code>''</code> 。</p> <h2 id="構文">構文</h2> @@ -48,6 +48,6 @@ translation_of: Web/API/TransitionEvent/pseudoElement <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">CSS トランジションの使用</a></li> + <li><a href="/ja/docs/Web/Guide/CSS/Using_CSS_transitions">CSS トランジションの使用</a></li> <li>{{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}.</li> </ul> diff --git a/files/ja/web/api/mouseevent/which/index.html b/files/ja/web/api/uievent/which/index.html index 8334684b1e..8b9612bd82 100644 --- a/files/ja/web/api/mouseevent/which/index.html +++ b/files/ja/web/api/uievent/which/index.html @@ -1,6 +1,6 @@ --- title: MouseEvent.which -slug: Web/API/MouseEvent/which +slug: Web/API/UIEvent/which tags: - API - DOM Events @@ -10,6 +10,7 @@ tags: - Read-only - Reference translation_of: Web/API/MouseEvent/which +original_slug: Web/API/MouseEvent/which --- <p>{{APIRef("DOM Events")}}</p> diff --git a/files/ja/web/api/urlsearchparams/tostring/index.html b/files/ja/web/api/urlsearchparams/tostring/index.html index 3c82f6c04c..288a3f5af8 100644 --- a/files/ja/web/api/urlsearchparams/tostring/index.html +++ b/files/ja/web/api/urlsearchparams/tostring/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/URLSearchParams/toString <p><span class="seoSummary">{{domxref("URLSearchParams")}} インターフェイスの <strong><code>toString()</code></strong> メソッドは、URL での使用に適したクエリー文字列を返します。</span></p> <div class="blockIndicator note"> -<p><strong>注</strong>: このメソッドは、疑問符のないクエリー文字列を返します。 これは、それを含む <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/search">window.location.search</a></code> とは異なります。</p> +<p><strong>注</strong>: このメソッドは、疑問符のないクエリー文字列を返します。 これは、それを含む <code><a href="/ja/docs/Web/API/HTMLHyperlinkElementUtils/search">window.location.search</a></code> とは異なります。</p> </div> <p>{{availableinworkers}}</p> diff --git a/files/ja/web/api/validitystate/patternmismatch/index.html b/files/ja/web/api/validitystate/patternmismatch/index.html index b8938276e8..5db71d2c49 100644 --- a/files/ja/web/api/validitystate/patternmismatch/index.html +++ b/files/ja/web/api/validitystate/patternmismatch/index.html @@ -9,9 +9,9 @@ tags: - Reference translation_of: Web/API/ValidityState --- -<p>{{draft}}<strong><code>patternMismatch</code></strong> は <strong><code><a href="/en-US/docs/Web/API/ValidityState">ValidityState</a></code></strong> オブジェクトの読み取り専用プロパティで、 {{HTMLElement("input")}} 要素の値がユーザーによって編集された後で、その要素の <code><a href="/en-US/docs/Web/HTML/Attributes/pattern">pattern</a></code> 属性で設定された制約に適合するかどうかを示します。</p> +<p>{{draft}}<strong><code>patternMismatch</code></strong> は <strong><code><a href="/ja/docs/Web/API/ValidityState">ValidityState</a></code></strong> オブジェクトの読み取り専用プロパティで、 {{HTMLElement("input")}} 要素の値がユーザーによって編集された後で、その要素の <code><a href="/ja/docs/Web/HTML/Attributes/pattern">pattern</a></code> 属性で設定された制約に適合するかどうかを示します。</p> -<p>そのフィールドが <code><a href="/en-US/docs/Web/HTML/Attributes/pattern">pattern</a></code> 属性に対応している場合 -- つまり、 {{HTMLElement("input")}} の <code>type</code> が {{HTMLElement("input/text", "text")}}, {{HTMLElement("input/tel", "tel")}}, {{HTMLElement("input/email", "email")}}, {{HTMLElement("input/url", "url")}}, {{HTMLElement("input/password", "password")}}, {{HTMLElement("input/search", "search")}} のいずれかであった場合 -- かつ、 pattern の値が有効な正規表現に設定されていた場合、値が <code><a href="/en-US/docs/Web/HTML/Attributes/pattern">pattern</a></code> の値で設定された制約に適合していない場合、 <code>patternMismatch</code> プロパティが true になります。</p> +<p>そのフィールドが <code><a href="/ja/docs/Web/HTML/Attributes/pattern">pattern</a></code> 属性に対応している場合 -- つまり、 {{HTMLElement("input")}} の <code>type</code> が {{HTMLElement("input/text", "text")}}, {{HTMLElement("input/tel", "tel")}}, {{HTMLElement("input/email", "email")}}, {{HTMLElement("input/url", "url")}}, {{HTMLElement("input/password", "password")}}, {{HTMLElement("input/search", "search")}} のいずれかであった場合 -- かつ、 pattern の値が有効な正規表現に設定されていた場合、値が <code><a href="/ja/docs/Web/HTML/Attributes/pattern">pattern</a></code> の値で設定された制約に適合していない場合、 <code>patternMismatch</code> プロパティが true になります。</p> <h2 id="Examples">例</h2> @@ -25,7 +25,7 @@ translation_of: Web/API/ValidityState </label> </p></pre> -<p>ここでは、北米の電話番号のための 3 つの部分があり、電話番号の 3 つの構成要素すべてを包含する暗黙のラベルが、それぞれ 3 桁、3 桁、4 桁を期待しています。それぞれが <code><a href="/en-US/docs/Web/HTML/Attributes/pattern">pattern</a></code> 属性によってそのように定義されています。</p> +<p>ここでは、北米の電話番号のための 3 つの部分があり、電話番号の 3 つの構成要素すべてを包含する暗黙のラベルが、それぞれ 3 桁、3 桁、4 桁を期待しています。それぞれが <code><a href="/ja/docs/Web/HTML/Attributes/pattern">pattern</a></code> 属性によってそのように定義されています。</p> <p>値が長すぎたり短すぎたり、数字ではない文字が含まれていたりすると、 <code>patternMismatch</code> が true になります。 <code>true</code> の場合、要素は CSS の {{cssxref(":invalid")}} 擬似クラスに一致します。</p> @@ -35,7 +35,7 @@ translation_of: Web/API/ValidityState <p>{{EmbedLiveSample("Examples", 300, 40)}}</p> -<p>この場合、値の長さを決定するのはパターンであるため、値が長すぎたり短すぎたりした場合に発生するのは <code>patternMismatch</code> であり、 {{domxref('validityState.tooLong')}} や {{domxref('validityState.tooShort')}} ではないことに注意してください。代わりに <code><a href="/en-US/docs/Web/HTML/Attributes/minlength">minlength</a></code> と <code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code> 属性を使用していたら、 {{domxref('validityState.tooLong')}} または {{domxref('validityState.tooShort')}} が true になるかもしれません。</p> +<p>この場合、値の長さを決定するのはパターンであるため、値が長すぎたり短すぎたりした場合に発生するのは <code>patternMismatch</code> であり、 {{domxref('validityState.tooLong')}} や {{domxref('validityState.tooShort')}} ではないことに注意してください。代わりに <code><a href="/ja/docs/Web/HTML/Attributes/minlength">minlength</a></code> と <code><a href="/ja/docs/Web/HTML/Attributes/maxlength">maxlength</a></code> 属性を使用していたら、 {{domxref('validityState.tooLong')}} または {{domxref('validityState.tooShort')}} が true になるかもしれません。</p> <div class="notecard note"> <p>注: pattern 属性がない場合、 <code>{{HTMLElement("input/email", "email")}}</code> 入力型は、少なくとも <code>x@y</code> に一致する必要があり、 <code>{{HTMLElement("input/url", "url")}}</code> 型は、少なくとも x: に一致する必要があります。無効な場合、 pattern 属性がない場合 (またはその入力型で pattern 属性が無効な場合) は {{domxref('validityState.typeMismatch')}} が true になります。</p> @@ -75,7 +75,7 @@ translation_of: Web/API/ValidityState <h2 id="See_also">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a></li> - <li><a href="/en-US/docs/Learn/Forms/Form_validation">フォーム: データフォームの検証</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現</a></li> + <li><a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a></li> + <li><a href="/ja/docs/Learn/Forms/Form_validation">フォーム: データフォームの検証</a></li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現</a></li> </ul> diff --git a/files/ja/web/api/vrdisplay/cancelanimationframe/index.html b/files/ja/web/api/vrdisplay/cancelanimationframe/index.html index e7a5bf91f8..779d52d486 100644 --- a/files/ja/web/api/vrdisplay/cancelanimationframe/index.html +++ b/files/ja/web/api/vrdisplay/cancelanimationframe/index.html @@ -52,6 +52,6 @@ original_slug: Web/API/VRDevice/cancelAnimationFrame <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vrdisplay/capabilities/index.html b/files/ja/web/api/vrdisplay/capabilities/index.html index 7560a834b4..7e127d3358 100644 --- a/files/ja/web/api/vrdisplay/capabilities/index.html +++ b/files/ja/web/api/vrdisplay/capabilities/index.html @@ -58,6 +58,6 @@ original_slug: Web/API/VRDevice/capabilities <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vrdisplay/depthfar/index.html b/files/ja/web/api/vrdisplay/depthfar/index.html index 5ece54efa8..93e24fe61a 100644 --- a/files/ja/web/api/vrdisplay/depthfar/index.html +++ b/files/ja/web/api/vrdisplay/depthfar/index.html @@ -47,6 +47,6 @@ vrDisplayInstance.depthFar = 7500.0; <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vrdisplay/depthnear/index.html b/files/ja/web/api/vrdisplay/depthnear/index.html index 52bdc13d4d..439d82e3f9 100644 --- a/files/ja/web/api/vrdisplay/depthnear/index.html +++ b/files/ja/web/api/vrdisplay/depthnear/index.html @@ -47,6 +47,6 @@ vrDisplayInstance.depthNear = 1.0; <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vrdisplay/displayid/index.html b/files/ja/web/api/vrdisplay/displayid/index.html index 01f67295bd..ec4d3ce04e 100644 --- a/files/ja/web/api/vrdisplay/displayid/index.html +++ b/files/ja/web/api/vrdisplay/displayid/index.html @@ -16,7 +16,7 @@ original_slug: Web/API/VRDevice/displayId --- <div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div> -<p>{{domxref("VRDisplay")}} インターフェイスの <strong><code>displayId</code></strong> 読み取り専用プロパティは、この特定の <code>VRDisplay</code> の識別子を返します。これは、 <a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a> の関連付けポイントとしても使用されます( {{domxref("Gamepad.displayId")}} を参照)。</p> +<p>{{domxref("VRDisplay")}} インターフェイスの <strong><code>displayId</code></strong> 読み取り専用プロパティは、この特定の <code>VRDisplay</code> の識別子を返します。これは、 <a href="/ja/docs/Web/API/Gamepad_API">Gamepad API</a> の関連付けポイントとしても使用されます( {{domxref("Gamepad.displayId")}} を参照)。</p> <h2 id="構文">構文</h2> @@ -54,6 +54,6 @@ original_slug: Web/API/VRDevice/displayId <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a></li> <li><a href="http://mozvr.com/">MozVr.com</a> — demos, downloads, and other resources from the Mozilla VR team.</li> </ul> diff --git a/files/ja/web/api/vrdisplay/geteyeparameters/index.html b/files/ja/web/api/vrdisplay/geteyeparameters/index.html index a7abf158bb..30b549ef0a 100644 --- a/files/ja/web/api/vrdisplay/geteyeparameters/index.html +++ b/files/ja/web/api/vrdisplay/geteyeparameters/index.html @@ -52,6 +52,6 @@ original_slug: Web/API/VRDevice/getEyeParameters <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vrdisplay/getimmediatepose/index.html b/files/ja/web/api/vrdisplay/getimmediatepose/index.html index 731d5d63e4..8493805842 100644 --- a/files/ja/web/api/vrdisplay/getimmediatepose/index.html +++ b/files/ja/web/api/vrdisplay/getimmediatepose/index.html @@ -49,6 +49,6 @@ original_slug: Web/API/VRDevice/getImmediatePose <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vrdisplay/getlayers/index.html b/files/ja/web/api/vrdisplay/getlayers/index.html index 53781e7821..fe58bffb65 100644 --- a/files/ja/web/api/vrdisplay/getlayers/index.html +++ b/files/ja/web/api/vrdisplay/getlayers/index.html @@ -49,6 +49,6 @@ original_slug: Web/API/VRDevice/getLayers <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vrdisplay/getpose/index.html b/files/ja/web/api/vrdisplay/getpose/index.html index 1ade69ec06..9e96fa3447 100644 --- a/files/ja/web/api/vrdisplay/getpose/index.html +++ b/files/ja/web/api/vrdisplay/getpose/index.html @@ -49,6 +49,6 @@ original_slug: Web/API/VRDevice/getPose <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vrdisplay/index.html b/files/ja/web/api/vrdisplay/index.html index 22b9f888ac..8416a29330 100644 --- a/files/ja/web/api/vrdisplay/index.html +++ b/files/ja/web/api/vrdisplay/index.html @@ -17,7 +17,7 @@ original_slug: Web/API/VRDevice --- <div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div> -<p><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> の <strong><code>VRDisplay</code></strong> インターフェイスは，このAPIがサポートしているVRデバイスを現します．VRDisplayにはデバイスIDやデスクリプションのような汎用的な情報が含まれていて，VRシーンの表示を開始するためのメソッドや，目のパラメータやディスプレイの備える機能の取得，その他の重要な機能を含んでいます。</p> +<p><a href="/ja/docs/Web/API/WebVR_API">WebVR API</a> の <strong><code>VRDisplay</code></strong> インターフェイスは，このAPIがサポートしているVRデバイスを現します．VRDisplayにはデバイスIDやデスクリプションのような汎用的な情報が含まれていて，VRシーンの表示を開始するためのメソッドや，目のパラメータやディスプレイの備える機能の取得，その他の重要な機能を含んでいます。</p> <p>{{domxref("Navigator.getVRDisplays()")}} を呼び出すことで，すべての接続されているVRのデバイスの配列が返されます。</p> @@ -31,7 +31,7 @@ original_slug: Web/API/VRDevice <dt>{{domxref("VRDisplay.depthNear")}}</dt> <dd><a href="https://en.wikipedia.org/wiki/Viewing_frustum">eye view frustum</a>(ビューフラスタム；つまりシーンの可視領域の境界) のnear平面を定義しているz-depthの取得と設定を行います．</dd> <dt>{{domxref("VRDisplay.displayId")}} {{readonlyInline}}</dt> - <dd>このVRDisplay固有のIDを返します．このIDは<a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a> (参照 {{domxref("Gamepad.displayId")}}) の関連付けのために使用されます．</dd> + <dd>このVRDisplay固有のIDを返します．このIDは<a href="/ja/docs/Web/API/Gamepad_API">Gamepad API</a> (参照 {{domxref("Gamepad.displayId")}}) の関連付けのために使用されます．</dd> <dt>{{domxref("VRDisplay.displayName")}} {{readonlyInline}}</dt> <dd><code>VRDisplay</code>を識別するための人間が読める形式の名前を返します．</dd> <dt>{{domxref("VRDisplay.isConnected")}} {{readonlyInline}}</dt> @@ -125,6 +125,6 @@ original_slug: Web/API/VRDevice <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vrdisplay/isconnected/index.html b/files/ja/web/api/vrdisplay/isconnected/index.html index f1ca3c7e0d..11c722b1ee 100644 --- a/files/ja/web/api/vrdisplay/isconnected/index.html +++ b/files/ja/web/api/vrdisplay/isconnected/index.html @@ -45,6 +45,6 @@ original_slug: Web/API/VRDevice/isConnected <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vrdisplay/ispresenting/index.html b/files/ja/web/api/vrdisplay/ispresenting/index.html index 9341de26fb..edb5af87b8 100644 --- a/files/ja/web/api/vrdisplay/ispresenting/index.html +++ b/files/ja/web/api/vrdisplay/ispresenting/index.html @@ -45,6 +45,6 @@ original_slug: Web/API/VRDevice/isPresenting <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vrdisplay/requestanimationframe/index.html b/files/ja/web/api/vrdisplay/requestanimationframe/index.html index 1dd9cc9f46..378f77c746 100644 --- a/files/ja/web/api/vrdisplay/requestanimationframe/index.html +++ b/files/ja/web/api/vrdisplay/requestanimationframe/index.html @@ -57,6 +57,6 @@ original_slug: Web/API/VRDevice/requestAnimationFrame <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vrdisplay/requestpresent/index.html b/files/ja/web/api/vrdisplay/requestpresent/index.html index 091162b885..357cfc3fc6 100644 --- a/files/ja/web/api/vrdisplay/requestpresent/index.html +++ b/files/ja/web/api/vrdisplay/requestpresent/index.html @@ -110,6 +110,6 @@ original_slug: Web/API/VRDevice/requestPresent <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vrdisplay/resetpose/index.html b/files/ja/web/api/vrdisplay/resetpose/index.html index 10bdf1d437..014d030b63 100644 --- a/files/ja/web/api/vrdisplay/resetpose/index.html +++ b/files/ja/web/api/vrdisplay/resetpose/index.html @@ -53,6 +53,6 @@ original_slug: Web/API/VRDevice/resetPose <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vrdisplay/stageparameters/index.html b/files/ja/web/api/vrdisplay/stageparameters/index.html index 7f9327ccc2..60777779fd 100644 --- a/files/ja/web/api/vrdisplay/stageparameters/index.html +++ b/files/ja/web/api/vrdisplay/stageparameters/index.html @@ -45,6 +45,6 @@ original_slug: Web/API/VRDevice/stageParameters <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vrdisplay/submitframe/index.html b/files/ja/web/api/vrdisplay/submitframe/index.html index 1e525c27eb..f41059ec72 100644 --- a/files/ja/web/api/vrdisplay/submitframe/index.html +++ b/files/ja/web/api/vrdisplay/submitframe/index.html @@ -54,6 +54,6 @@ original_slug: Web/API/VRDevice/submitFrame <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vrdisplaycapabilities/canpresent/index.html b/files/ja/web/api/vrdisplaycapabilities/canpresent/index.html index 7d3f3bdf65..d4d9760dce 100644 --- a/files/ja/web/api/vrdisplaycapabilities/canpresent/index.html +++ b/files/ja/web/api/vrdisplaycapabilities/canpresent/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/VRDisplayCapabilities/canPresent --- <div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div> -<p>{{domxref("VRDisplayCapabilities")}} インターフェイスの <strong><code>canPresent</code></strong> 読取専用プロパティは，VRディスプレイが（HMDを通じて）コンテンツを表示(present)可能かどうかの状態を <a href="https://developer.mozilla.org/ja/docs/Web/API/Boolean" title="The documentation about this has not yet been written; please consider contributing!"><code>Boolean</code></a> で返します． </p> +<p>{{domxref("VRDisplayCapabilities")}} インターフェイスの <strong><code>canPresent</code></strong> 読取専用プロパティは，VRディスプレイが（HMDを通じて）コンテンツを表示(present)可能かどうかの状態を <a href="/ja/docs/Web/API/Boolean" title="The documentation about this has not yet been written; please consider contributing!"><code>Boolean</code></a> で返します． </p> <p>これは，6自由度追跡が可能だけれど {{domxref("VRDisplay.requestPresent()")}} は意味を成さない"マジックウィンドウ(magic window)"デバイスを識別するのに利用できます．<code>canPresent</code> が <code>false の場合</code>, {{domxref("VRDisplay.requestPresent()")}} の呼出しは失敗し， {{domxref("VRDisplay.getEyeParameters()")}} は <code>null を返すでしょう．</code></p> @@ -45,6 +45,6 @@ translation_of: Web/API/VRDisplayCapabilities/canPresent <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vrdisplaycapabilities/hasexternaldisplay/index.html b/files/ja/web/api/vrdisplaycapabilities/hasexternaldisplay/index.html index feea375b36..fd0444ee6f 100644 --- a/files/ja/web/api/vrdisplaycapabilities/hasexternaldisplay/index.html +++ b/files/ja/web/api/vrdisplaycapabilities/hasexternaldisplay/index.html @@ -49,6 +49,6 @@ translation_of: Web/API/VRDisplayCapabilities/hasExternalDisplay <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vrdisplaycapabilities/hasorientation/index.html b/files/ja/web/api/vrdisplaycapabilities/hasorientation/index.html index a699d97f4a..4cb019eb9f 100644 --- a/files/ja/web/api/vrdisplaycapabilities/hasorientation/index.html +++ b/files/ja/web/api/vrdisplaycapabilities/hasorientation/index.html @@ -43,6 +43,6 @@ translation_of: Web/API/VRDisplayCapabilities/hasOrientation <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vrdisplaycapabilities/hasposition/index.html b/files/ja/web/api/vrdisplaycapabilities/hasposition/index.html index 040552dc20..1847230bf2 100644 --- a/files/ja/web/api/vrdisplaycapabilities/hasposition/index.html +++ b/files/ja/web/api/vrdisplaycapabilities/hasposition/index.html @@ -43,6 +43,6 @@ translation_of: Web/API/VRDisplayCapabilities/hasPosition <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vrdisplaycapabilities/index.html b/files/ja/web/api/vrdisplaycapabilities/index.html index 53076c9ce9..63ea39fb72 100644 --- a/files/ja/web/api/vrdisplaycapabilities/index.html +++ b/files/ja/web/api/vrdisplaycapabilities/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/VRDisplayCapabilities --- <div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div> -<p><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> の <strong><code>VRDisplayCapabilities</code></strong> インターフェイスは {{domxref("VRDisplay")}} の利用可能な機能を示しています — この機能は，例えば位置情報を返すことが可能か，といったVRデバイスの動作可能テストに使うことができます．</p> +<p><a href="/ja/docs/Web/API/WebVR_API">WebVR API</a> の <strong><code>VRDisplayCapabilities</code></strong> インターフェイスは {{domxref("VRDisplay")}} の利用可能な機能を示しています — この機能は，例えば位置情報を返すことが可能か，といったVRデバイスの動作可能テストに使うことができます．</p> <p>このインターフェイスには {{domxref("VRDisplay.capabilities")}} プロパティを通じてアクセスできます．</p> @@ -69,6 +69,6 @@ translation_of: Web/API/VRDisplayCapabilities <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vrdisplaycapabilities/maxlayers/index.html b/files/ja/web/api/vrdisplaycapabilities/maxlayers/index.html index 72629c3b9a..a63d2e3a57 100644 --- a/files/ja/web/api/vrdisplaycapabilities/maxlayers/index.html +++ b/files/ja/web/api/vrdisplaycapabilities/maxlayers/index.html @@ -43,6 +43,6 @@ translation_of: Web/API/VRDisplayCapabilities/maxLayers <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vrdisplayevent/index.html b/files/ja/web/api/vrdisplayevent/index.html index 44a84c1513..d80eb5b142 100644 --- a/files/ja/web/api/vrdisplayevent/index.html +++ b/files/ja/web/api/vrdisplayevent/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/VRDisplayEvent --- <div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div> -<p><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> の <strong><code>VRDisplayEvent</code></strong> インターフェイスは、 WebVR 関連イベントのイベントオブジェクトを表します (<a href="/en-US/docs/Web/API/WebVR_API#Window">WebVR ウインドウ拡張機能のリスト</a>を参照)。</p> +<p><a href="/ja/docs/Web/API/WebVR_API">WebVR API</a> の <strong><code>VRDisplayEvent</code></strong> インターフェイスは、 WebVR 関連イベントのイベントオブジェクトを表します (<a href="/ja/docs/Web/API/WebVR_API#Window">WebVR ウインドウ拡張機能のリスト</a>を参照)。</p> <h2 id="コンストラクタ">コンストラクタ</h2> @@ -65,6 +65,6 @@ translation_of: Web/API/VRDisplayEvent <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a></li> <li><a href="http://mozvr.com/">MozVr.com</a> — demos, downloads, and other resources from the Mozilla VR team.</li> </ul> diff --git a/files/ja/web/api/vreyeparameters/fieldofview/index.html b/files/ja/web/api/vreyeparameters/fieldofview/index.html index 05fd751c8d..968ab6ad08 100644 --- a/files/ja/web/api/vreyeparameters/fieldofview/index.html +++ b/files/ja/web/api/vreyeparameters/fieldofview/index.html @@ -43,6 +43,6 @@ translation_of: Web/API/VREyeParameters/fieldOfView <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vreyeparameters/index.html b/files/ja/web/api/vreyeparameters/index.html index 1489f04d82..467f5dd010 100644 --- a/files/ja/web/api/vreyeparameters/index.html +++ b/files/ja/web/api/vreyeparameters/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/VREyeParameters --- <div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div> -<p><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> の <strong><code>VREyeParameters</code></strong> インターフェイスは，指定した眼のためにシーンを正しくレンダリングするためのすべての情報（視界(field of view)の情報を含む）を表現します．</p> +<p><a href="/ja/docs/Web/API/WebVR_API">WebVR API</a> の <strong><code>VREyeParameters</code></strong> インターフェイスは，指定した眼のためにシーンを正しくレンダリングするためのすべての情報（視界(field of view)の情報を含む）を表現します．</p> <p>このインターフェイスは {{domxref("VRDisplay.getEyeParameters()")}} メソッドを通じてアクセスできます．</p> @@ -50,6 +50,6 @@ translation_of: Web/API/VREyeParameters <h2 id="See_also">See also</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vreyeparameters/offset/index.html b/files/ja/web/api/vreyeparameters/offset/index.html index 3f8f786db3..0c148b0191 100644 --- a/files/ja/web/api/vreyeparameters/offset/index.html +++ b/files/ja/web/api/vreyeparameters/offset/index.html @@ -49,6 +49,6 @@ translation_of: Web/API/VREyeParameters/offset <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vreyeparameters/renderheight/index.html b/files/ja/web/api/vreyeparameters/renderheight/index.html index 8b66167ec2..1ab993f474 100644 --- a/files/ja/web/api/vreyeparameters/renderheight/index.html +++ b/files/ja/web/api/vreyeparameters/renderheight/index.html @@ -43,6 +43,6 @@ translation_of: Web/API/VREyeParameters/renderHeight <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vreyeparameters/renderwidth/index.html b/files/ja/web/api/vreyeparameters/renderwidth/index.html index ad6bfb1580..84573e2057 100644 --- a/files/ja/web/api/vreyeparameters/renderwidth/index.html +++ b/files/ja/web/api/vreyeparameters/renderwidth/index.html @@ -43,6 +43,6 @@ translation_of: Web/API/VREyeParameters/renderWidth <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vrfieldofview/index.html b/files/ja/web/api/vrfieldofview/index.html index 88965be757..79db62bbab 100644 --- a/files/ja/web/api/vrfieldofview/index.html +++ b/files/ja/web/api/vrfieldofview/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/VRFieldOfView --- <p>{{draft}}{{APIRef("WebVR API")}}{{SeeCompatTable}}</p> -<p><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> の <strong><code>VRFieldOfView</code></strong> インターフェイスは，中心点からの視野を示す4つの角度で定義される視界を表現します．</p> +<p><a href="/ja/docs/Web/API/WebVR_API">WebVR API</a> の <strong><code>VRFieldOfView</code></strong> インターフェイスは，中心点からの視野を示す4つの角度で定義される視界を表現します．</p> <h2 id="プロパティ">プロパティ</h2> @@ -48,6 +48,6 @@ translation_of: Web/API/VRFieldOfView <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vrframedata/index.html b/files/ja/web/api/vrframedata/index.html index 91d8d2c3c9..918d8c095a 100644 --- a/files/ja/web/api/vrframedata/index.html +++ b/files/ja/web/api/vrframedata/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/VRFrameData --- <p>{{APIRef("WebVR API")}}{{SeeCompatTable}}</p> -<p><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a>の<strong><code>VRFrameData</code></strong>インタフェースは、VRシーンの1つのフレームを描画するのに必要となる全ての情報を表現します。</p> +<p><a href="/ja/docs/Web/API/WebVR_API">WebVR API</a>の<strong><code>VRFrameData</code></strong>インタフェースは、VRシーンの1つのフレームを描画するのに必要となる全ての情報を表現します。</p> <h2 id="コンストラクタ">コンストラクタ</h2> @@ -59,6 +59,6 @@ translation_of: Web/API/VRFrameData <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage (英語)</a></li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage (英語)</a></li> <li><a href="http://mozvr.com/">MozVr.com (英語)</a> — デモ、ダウンロード、Mozilla VRチームからのその他のリソース</li> </ul> diff --git a/files/ja/web/api/vrframedata/leftprojectionmatrix/index.html b/files/ja/web/api/vrframedata/leftprojectionmatrix/index.html index 8a7295ff1a..a129f78c9d 100644 --- a/files/ja/web/api/vrframedata/leftprojectionmatrix/index.html +++ b/files/ja/web/api/vrframedata/leftprojectionmatrix/index.html @@ -49,6 +49,6 @@ translation_of: Web/API/VRFrameData/leftProjectionMatrix <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage (英語)</a></li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage (英語)</a></li> <li><a href="http://mozvr.com/">MozVr.com (英語)</a> — デモ、ダウンロード、Mozilla VRチームからのその他のリソース</li> </ul> diff --git a/files/ja/web/api/vrframedata/leftviewmatrix/index.html b/files/ja/web/api/vrframedata/leftviewmatrix/index.html index b8ee4433c1..c88985fbda 100644 --- a/files/ja/web/api/vrframedata/leftviewmatrix/index.html +++ b/files/ja/web/api/vrframedata/leftviewmatrix/index.html @@ -49,6 +49,6 @@ translation_of: Web/API/VRFrameData/leftViewMatrix <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage (英語)</a></li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage (英語)</a></li> <li><a href="http://mozvr.com/">MozVr.com (英語)</a> — デモ、ダウンロード、Mozilla VRチームからのその他のリソース</li> </ul> diff --git a/files/ja/web/api/vrframedata/vrframedata/index.html b/files/ja/web/api/vrframedata/vrframedata/index.html index c2d6ebb6dc..b8ac008ba8 100644 --- a/files/ja/web/api/vrframedata/vrframedata/index.html +++ b/files/ja/web/api/vrframedata/vrframedata/index.html @@ -43,6 +43,6 @@ translation_of: Web/API/VRFrameData/VRFrameData <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage (英語)</a></li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage (英語)</a></li> <li><a href="http://mozvr.com/">MozVr.com (英語)</a> — デモ、ダウンロード、Mozilla VRチームからのその他のリソース</li> </ul> diff --git a/files/ja/web/api/vrlayerinit/index.html b/files/ja/web/api/vrlayerinit/index.html index 31c567d459..4d2d9449c4 100644 --- a/files/ja/web/api/vrlayerinit/index.html +++ b/files/ja/web/api/vrlayerinit/index.html @@ -6,7 +6,7 @@ original_slug: Web/API/VRLayer --- <div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div> -<p><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> の <strong><code>VRLayer</code></strong> インターフェイス (ディクショナリ)は，VRHMDへ表示したいコンテンツレイヤー( {{domxref("HTMLCanvasElement")}} または {{domxref("OffscreenCanvas")}})を表します。</p> +<p><a href="/ja/docs/Web/API/WebVR_API">WebVR API</a> の <strong><code>VRLayer</code></strong> インターフェイス (ディクショナリ)は，VRHMDへ表示したいコンテンツレイヤー( {{domxref("HTMLCanvasElement")}} または {{domxref("OffscreenCanvas")}})を表します。</p> <p>{{domxref("VRDisplay.requestPresent()")}} メソッドを使うことでレイヤーを表示することができます。</p> @@ -87,6 +87,6 @@ if(navigator.getVRDisplays) { <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vrlayerinit/rightbounds/index.html b/files/ja/web/api/vrlayerinit/rightbounds/index.html index 681861967f..cee39018e6 100644 --- a/files/ja/web/api/vrlayerinit/rightbounds/index.html +++ b/files/ja/web/api/vrlayerinit/rightbounds/index.html @@ -64,6 +64,6 @@ myVRLayerInit.rightBounds = <code>[0.5, 0.0, 0.5, 1.0]</code>;</pre> <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a></li> <li><a href="http://mozvr.com/">MozVr.com</a> — demos, downloads, and other resources from the Mozilla VR team.</li> </ul> diff --git a/files/ja/web/api/vrlayerinit/source/index.html b/files/ja/web/api/vrlayerinit/source/index.html index df33e3c9fd..e6a3c3644d 100644 --- a/files/ja/web/api/vrlayerinit/source/index.html +++ b/files/ja/web/api/vrlayerinit/source/index.html @@ -55,6 +55,6 @@ myVRLayerInit.source = myCanvas;</pre> <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a></li> <li><a href="http://mozvr.com/">MozVr.com</a> — demos, downloads, and other resources from the Mozilla VR team.</li> </ul> diff --git a/files/ja/web/api/vrpose/index.html b/files/ja/web/api/vrpose/index.html index c6a669e5fc..ee58976d17 100644 --- a/files/ja/web/api/vrpose/index.html +++ b/files/ja/web/api/vrpose/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/VRPose --- <div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div> -<p><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> の <strong><code>VRPose</code></strong> インターフェイスは，特定のタイムスタンプにおけるVRセンサーの状態（向き，位置，速度，加速度の情報を含みます）を示します．</p> +<p><a href="/ja/docs/Web/API/WebVR_API">WebVR API</a> の <strong><code>VRPose</code></strong> インターフェイスは，特定のタイムスタンプにおけるVRセンサーの状態（向き，位置，速度，加速度の情報を含みます）を示します．</p> <p>このインターフェイスには，{{domxref("VRDisplay.getPose()")}} と {{domxref("VRDisplay.getImmediatePose()")}} メソッドを通じてアクセスします．</p> @@ -56,6 +56,6 @@ translation_of: Web/API/VRPose <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vrstageparameters/index.html b/files/ja/web/api/vrstageparameters/index.html index 1ff80b514f..0dcc2e250e 100644 --- a/files/ja/web/api/vrstageparameters/index.html +++ b/files/ja/web/api/vrstageparameters/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/VRStageParameters --- <div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div> -<p><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> の <strong><code>VRStageParameters</code></strong> インターフェイスは，ルームスケール体験に対応しているデバイス用にステージエリアを記述する値を表現しています．</p> +<p><a href="/ja/docs/Web/API/WebVR_API">WebVR API</a> の <strong><code>VRStageParameters</code></strong> インターフェイスは，ルームスケール体験に対応しているデバイス用にステージエリアを記述する値を表現しています．</p> <p>このインターフェイスには {{domxref("VRDisplay.stageParameters")}} プロパティを通じてアクセスできます．</p> @@ -48,6 +48,6 @@ translation_of: Web/API/VRStageParameters <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vrstageparameters/sittingtostandingtransform/index.html b/files/ja/web/api/vrstageparameters/sittingtostandingtransform/index.html index 78b7d5745e..135ee2c7b5 100644 --- a/files/ja/web/api/vrstageparameters/sittingtostandingtransform/index.html +++ b/files/ja/web/api/vrstageparameters/sittingtostandingtransform/index.html @@ -43,6 +43,6 @@ translation_of: Web/API/VRStageParameters/sittingToStandingTransform <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vrstageparameters/sizex/index.html b/files/ja/web/api/vrstageparameters/sizex/index.html index 2ca7656e59..41cf7ac026 100644 --- a/files/ja/web/api/vrstageparameters/sizex/index.html +++ b/files/ja/web/api/vrstageparameters/sizex/index.html @@ -45,6 +45,6 @@ translation_of: Web/API/VRStageParameters/sizeX <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/vrstageparameters/sizey/index.html b/files/ja/web/api/vrstageparameters/sizey/index.html index d64832858d..9b9e529422 100644 --- a/files/ja/web/api/vrstageparameters/sizey/index.html +++ b/files/ja/web/api/vrstageparameters/sizey/index.html @@ -45,6 +45,6 @@ translation_of: Web/API/VRStageParameters/sizeY <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/web_animations_api/using_the_web_animations_api/index.html b/files/ja/web/api/web_animations_api/using_the_web_animations_api/index.html index 05bf4a6312..ab7d1c2c48 100644 --- a/files/ja/web/api/web_animations_api/using_the_web_animations_api/index.html +++ b/files/ja/web/api/web_animations_api/using_the_web_animations_api/index.html @@ -337,7 +337,7 @@ aliceChange.onfinish = endGame; </pre> -<p>さらに良いことに、Web Animations APIではアニメーション終了時に解決されるか、またはキャンセル時に拒否される <code><a href="/docs/Web/API/Animation/finished">finished</a></code> プロミスを提供しています。</p> +<p>さらに良いことに、Web Animations APIではアニメーション終了時に解決されるか、またはキャンセル時に拒否される <code><a href="/ja/docs/Web/API/Animation/finished">finished</a></code> プロミスを提供しています。</p> <h2 id="まとめ">まとめ</h2> diff --git a/files/ja/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html b/files/ja/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html index ed20553589..818b883586 100644 --- a/files/ja/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html +++ b/files/ja/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html @@ -49,7 +49,7 @@ translation_of: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API <li>JavaScript内部で(オシレーターのような)オディオノードにより、直接音声を生成。</li> <li>未加工の PCM データから生成(この場合、該当オーディオコンテキストは、対応している音声フォーマット形式へのデコード手段を有しています)。</li> <li>({{HTMLElement("video")}} や {{HTMLElement("audio")}} のような)HTML media elements より取得。</li> - <li>(webcam やマイクロフォンのような)<a href="https://developer.mozilla.org/ja/docs/Web/API/WebRTC_API">Web RTC</a> {{domxref("MediaStream")}} により直接取得。</li> + <li>(webcam やマイクロフォンのような)<a href="/ja/docs/Web/API/WebRTC_API">Web RTC</a> {{domxref("MediaStream")}} により直接取得。</li> </ul> <h2 id="Audio_data_whats_in_a_sample" name="Audio_data_whats_in_a_sample">オーディオデータ: サンプルとは？</h2> diff --git a/files/ja/web/api/web_authentication_api/index.html b/files/ja/web/api/web_authentication_api/index.html index 9ca6c16e84..4cb304a81a 100644 --- a/files/ja/web/api/web_authentication_api/index.html +++ b/files/ja/web/api/web_authentication_api/index.html @@ -86,7 +86,7 @@ translation_of: Web/API/Web_Authentication_API <ol start="0"> <li><strong>アプリケーションが認証要求を行う</strong> - アプリケーションが最初の認証要求を行います。この要求のプロトコルとフォーマットはWebAuthnによる規定の対象範囲外です。</li> - <li><strong>サーバからのチャレンジ送信</strong> - サーバがJavaScriptプログラムに対してチャレンジを送ります。サーバとのコミュニケーションに用いられるプロトコルに指定はなく、WebAuthnによる規定の対象範囲外です。通常、サーバーは HTTPS 通信を使って {{Glossary("REST")}} で接続します(恐らく{{domxref("XMLHttpRequest")}} や {{domxref("Fetch_API", "Fetch")}}を用いるでしょう)が、安全なプロトコルでありさえすれば {{Glossary("SOAP")}} や <a href="https://tools.ietf.org/html/rfc2549">RFC 2549</a> 、その他ほぼどのようなプロトコルを使用しても構いません。サーバから受信したパラメータはほとんどの場合少しもしくは全く改変されずに <a href="/en-US/docs/Web/API/CredentialsContainer/get">get()</a> の呼び出しに渡されます。<br> + <li><strong>サーバからのチャレンジ送信</strong> - サーバがJavaScriptプログラムに対してチャレンジを送ります。サーバとのコミュニケーションに用いられるプロトコルに指定はなく、WebAuthnによる規定の対象範囲外です。通常、サーバーは HTTPS 通信を使って {{Glossary("REST")}} で接続します(恐らく{{domxref("XMLHttpRequest")}} や {{domxref("Fetch_API", "Fetch")}}を用いるでしょう)が、安全なプロトコルでありさえすれば {{Glossary("SOAP")}} や <a href="https://tools.ietf.org/html/rfc2549">RFC 2549</a> 、その他ほぼどのようなプロトコルを使用しても構いません。サーバから受信したパラメータはほとんどの場合少しもしくは全く改変されずに <a href="/ja/docs/Web/API/CredentialsContainer/get">get()</a> の呼び出しに渡されます。<br> <strong>次の事項は極めて重要です。</strong><br> <strong>・challenge はランダム情報のバッファー(少なくとも16バイト以上)であること</strong><br> <strong>・challenge は登録過程のセキュリティを確保するために必ずサーバー上で生成すること</strong></li> diff --git a/files/ja/web/api/web_periodic_background_synchronization_api/index.html b/files/ja/web/api/web_periodic_background_synchronization_api/index.html index 352325e234..89730ecf64 100644 --- a/files/ja/web/api/web_periodic_background_synchronization_api/index.html +++ b/files/ja/web/api/web_periodic_background_synchronization_api/index.html @@ -20,7 +20,7 @@ translation_of: Web/API/Web_Periodic_Background_Synchronization_API <p>このAPIはサービスワーカーに依存しているため、このAPIも安全なコンテクスト (secure context) でしか利用できません。</p> <div class="note"> -<p>At the time of writing, the Web Periodic Background Synchronization API is only available through an installed <a href="https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps">Progressive Web App</a></p> +<p>At the time of writing, the Web Periodic Background Synchronization API is only available through an installed <a href="/ja/docs/Web/Progressive_web_apps">Progressive Web App</a></p> </div> <h2 id="Web_Periodic_Background_Synchronization_Interfaces">Web Periodic Background Synchronization Interfaces</h2> diff --git a/files/ja/web/api/web_speech_api/index.html b/files/ja/web/api/web_speech_api/index.html index ae5f461b82..ab17eadc21 100644 --- a/files/ja/web/api/web_speech_api/index.html +++ b/files/ja/web/api/web_speech_api/index.html @@ -27,7 +27,7 @@ translation_of: Web/API/Web_Speech_API <li>音声合成は、{{domxref("SpeechSynthesis")}} インターフェイス経由でアクセスされます。これは、プログラムに、そのテキストコンテンツを読み上げる機能を提供します (通常はデバイスのデフォルトの音声合成を経由)。異なる音声の種類は、{{domxref("SpeechSynthesisVoice")}} オブジェクトで表され、発話してほしいテキストの異なる部分は、{{domxref("SpeechSynthesisUtterance")}} オブジェクトで表されます。これらを {{domxref("SpeechSynthesis.speak()")}} メソッドに渡すことによって発話されます。</li> </ul> -<p>これらの機能の使い方についての詳細は、<a href="/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API">Using the Web Speech API</a> を参照してください。</p> +<p>これらの機能の使い方についての詳細は、<a href="/ja/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API">Using the Web Speech API</a> を参照してください。</p> <h2 id="Web_Speech_API_Interfaces" name="Web_Speech_API_Interfaces">Web Speech API インターフェイス</h2> @@ -109,7 +109,7 @@ translation_of: Web/API/Web_Speech_API <h2 id="See_also" name="See_also">関連項目</h2> <ul> - <li><a href="/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API">Using the Web Speech API</a></li> + <li><a href="/ja/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API">Using the Web Speech API</a></li> <li><a href="http://www.sitepoint.com/talking-web-pages-and-the-speech-synthesis-api/">SitePoint の記事</a></li> <li><a href="http://updates.html5rocks.com/2014/01/Web-apps-that-talk---Introduction-to-the-Speech-Synthesis-API">HTML5Rocks の記事</a></li> <li><a href="http://aurelio.audero.it/demo/speech-synthesis-api-demo.html">デモ</a> [aurelio.audero.it]</li> diff --git a/files/ja/web/api/web_speech_api/using_the_web_speech_api/index.html b/files/ja/web/api/web_speech_api/using_the_web_speech_api/index.html index 3937d15679..84fd68ff73 100644 --- a/files/ja/web/api/web_speech_api/using_the_web_speech_api/index.html +++ b/files/ja/web/api/web_speech_api/using_the_web_speech_api/index.html @@ -115,7 +115,7 @@ document.body.onclick = function() { <h4 id="結果の受け取りとハンドリング">結果の受け取りとハンドリング</h4> -<p>音声認識が開始されると、結果やその他の周辺情報を取得するために使用できる多くのイベントハンドラがあります（<a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition#Event_handlers"><code>SpeechRecognition</code> のイベントハンドラのリスト</a> を参照してください）。最も一般的なものは {{domxref("SpeechRecognition.onresult")}} で、成功した結果を受信したときに発火されます。</p> +<p>音声認識が開始されると、結果やその他の周辺情報を取得するために使用できる多くのイベントハンドラがあります（<a href="/ja/docs/Web/API/SpeechRecognition#Event_handlers"><code>SpeechRecognition</code> のイベントハンドラのリスト</a> を参照してください）。最も一般的なものは {{domxref("SpeechRecognition.onresult")}} で、成功した結果を受信したときに発火されます。</p> <pre class="brush: js notranslate">recognition.onresult = function(event) { var color = event.results[0][0].transcript; @@ -255,7 +255,7 @@ if (speechSynthesis.onvoiceschanged !== undefined) { <h4 id="Speaking_the_entered_text">Speaking the entered text</h4> -<p>Next, we create an event handler to start speaking the text entered into the text field. We are using an <a href="/en-US/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a> handler on the form so that the action happens when <kbd>Enter</kbd>/<kbd>Return</kbd> is pressed. We first create a new {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "SpeechSynthesisUtterance()")}} instance using its constructor — this is passed the text input's value as a parameter.</p> +<p>Next, we create an event handler to start speaking the text entered into the text field. We are using an <a href="/ja/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a> handler on the form so that the action happens when <kbd>Enter</kbd>/<kbd>Return</kbd> is pressed. We first create a new {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "SpeechSynthesisUtterance()")}} instance using its constructor — this is passed the text input's value as a parameter.</p> <p>Next, we need to figure out which voice to use. We use the {{domxref("HTMLSelectElement")}} <code>selectedOptions</code> property to return the currently selected {{htmlelement("option")}} element. We then use this element's <code>data-name</code> attribute, finding the {{domxref("SpeechSynthesisVoice")}} object whose name matches this attribute's value. We set the matching voice object to be the value of the {{domxref("SpeechSynthesisUtterance.voice")}} property.</p> @@ -283,7 +283,7 @@ if (speechSynthesis.onvoiceschanged !== undefined) { event.utterance.text + '", which is "' + char + '".'); }</pre> -<p>Finally, we call <a href="/en-US/docs/Web/API/HTMLElement/blur">blur()</a> on the text input. This is mainly to hide the keyboard on Firefox OS.</p> +<p>Finally, we call <a href="/ja/docs/Web/API/HTMLElement/blur">blur()</a> on the text input. This is mainly to hide the keyboard on Firefox OS.</p> <pre class="brush: js notranslate"> inputTxt.blur(); }</pre> diff --git a/files/ja/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html b/files/ja/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html index 01bcec240f..e41f787f87 100644 --- a/files/ja/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html +++ b/files/ja/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html @@ -227,7 +227,7 @@ translation_of: Web/API/Web_Workers_API/Functions_and_classes_available_to_worke <td>{{CompatNo}}</td> </tr> <tr> - <td><a href="https://developer.mozilla.org/ja/docs/Web/API/Network_Information_API">Network Information API</a></td> + <td><a href="/ja/docs/Web/API/Network_Information_API">Network Information API</a></td> <td>システムの接続についての情報を汎用的な接続タイプ(例えば 'wifi', 'cellular' など)の用語で提供する。</td> <td>{{CompatGeckoMobile(53)}} モバイルのみ</td> <td>{{CompatVersionUnknown}} モバイルのみ</td> @@ -267,7 +267,7 @@ translation_of: Web/API/Web_Workers_API/Functions_and_classes_available_to_worke <td>{{CompatVersionUnknown}}</td> </tr> <tr> - <td><a href="https://developer.mozilla.org/ja/docs/Web/API/Server-sent_events">Server-sent events</a></td> + <td><a href="/ja/docs/Web/API/Server-sent_events">Server-sent events</a></td> <td>サーバーから、接続が開いた後に、あらゆる箇所のウェブページにデータをプッシュさせる。</td> <td>{{CompatGeckoDesktop(53)}} (今のところ専用 worker と共有 worker でのみ有効; service worker では無効)</td> <td>{{CompatUnknown}}</td> diff --git a/files/ja/web/api/web_workers_api/structured_clone_algorithm/index.html b/files/ja/web/api/web_workers_api/structured_clone_algorithm/index.html index a232db3e67..0997ca5254 100644 --- a/files/ja/web/api/web_workers_api/structured_clone_algorithm/index.html +++ b/files/ja/web/api/web_workers_api/structured_clone_algorithm/index.html @@ -3,24 +3,24 @@ title: 構造化複製アルゴリズム slug: Web/API/Web_Workers_API/Structured_clone_algorithm translation_of: Web/API/Web_Workers_API/Structured_clone_algorithm --- -<p><strong>構造化複製アルゴリズム </strong>は複雑な JavaScript オブジェクトをコピーするためのアルゴリズムです。これは {{domxref("Worker.postMessage()", "postMessage()")}} を介して <a href="/en-US/docs/Web/API/Worker">Worker</a> と送受信するとき、<a href="/en-US/docs/Glossary/IndexedDB">IndexedDB</a> にオブジェクトを格納するとき、<a href="/ja/docs/Web/API/Web_Workers_API/Structured_clone_algorithm$edit#See_Also">他の API</a> のためにオブジェクトをコピーするときなど、データ転送時に内部で用いられています。無限ループを避けるため、以前にアクセスした参照のマップを保持しながら、入力オブジェクトを再帰処理することで複製していきます。</p> +<p><strong>構造化複製アルゴリズム </strong>は複雑な JavaScript オブジェクトをコピーするためのアルゴリズムです。これは {{domxref("Worker.postMessage()", "postMessage()")}} を介して <a href="/ja/docs/Web/API/Worker">Worker</a> と送受信するとき、<a href="/ja/docs/Glossary/IndexedDB">IndexedDB</a> にオブジェクトを格納するとき、<a href="/ja/docs/Web/API/Web_Workers_API/Structured_clone_algorithm$edit#See_Also">他の API</a> のためにオブジェクトをコピーするときなど、データ転送時に内部で用いられています。無限ループを避けるため、以前にアクセスした参照のマップを保持しながら、入力オブジェクトを再帰処理することで複製していきます。</p> <h2 id="構造化複製で動作しないもの">構造化複製で動作しないもの</h2> <ul> - <li><a href="/en/JavaScript/Reference/Global_Objects/Function" title="en/JavaScript/Reference/Global Objects/Function"><code>Function</code></a> オブジェクトは構造化複製アルゴリズムでは複製されません。複製しようとすると <code>DATA_CLONE_ERR</code> 例外が送出されます。</li> + <li><a href="/ja/JavaScript/Reference/Global_Objects/Function" title="en/JavaScript/Reference/Global Objects/Function"><code>Function</code></a> オブジェクトは構造化複製アルゴリズムでは複製されません。複製しようとすると <code>DATA_CLONE_ERR</code> 例外が送出されます。</li> <li>DOM ノードを複製するときも同様に <code>DATA_CLONE_ERR</code> 例外が送出されます。</li> <li>以下に挙げるオブジェクトのパラメーターは保持されません。 <ul> - <li><a href="/en/JavaScript/Reference/Global_Objects/RegExp" title="en/JavaScript/Reference/Global Objects/regexp"><code>RegExp</code></a> オブジェクトの <code>lastIndex</code> フィールドは保持されません。</li> - <li>プロパティ記述子、セッター、ゲッター (もしくは同様のメタデータ系機能) は複製されません。たとえば、オブジェクトに <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor">プロパティ記述子</a> を使用して読み取り専用にしている場合でも、複製したものではデフォルトの条件である読み取り/書き込みに変わります。</li> + <li><a href="/ja/JavaScript/Reference/Global_Objects/RegExp" title="en/JavaScript/Reference/Global Objects/regexp"><code>RegExp</code></a> オブジェクトの <code>lastIndex</code> フィールドは保持されません。</li> + <li>プロパティ記述子、セッター、ゲッター (もしくは同様のメタデータ系機能) は複製されません。たとえば、オブジェクトに <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor">プロパティ記述子</a> を使用して読み取り専用にしている場合でも、複製したものではデフォルトの条件である読み取り/書き込みに変わります。</li> <li>プロトタイプチェーンは探索、複製されません。</li> </ul> </li> </ul> <div class="blockIndicator note"> -<p><strong>メモ</strong>: ネイティブの <a href="/en/JavaScript/Reference/Global_Objects/Error" title="en/JavaScript/Reference/Global Objects/Error"><code>Error</code></a> 型は Chrome では複製できます。Firefox は <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1556604">対応中</a> です。</p> +<p><strong>メモ</strong>: ネイティブの <a href="/ja/JavaScript/Reference/Global_Objects/Error" title="en/JavaScript/Reference/Global Objects/Error"><code>Error</code></a> 型は Chrome では複製できます。Firefox は <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1556604">対応中</a> です。</p> </div> <h2 id="サポート済みの型">サポート済みの型</h2> @@ -34,23 +34,23 @@ translation_of: Web/API/Web_Workers_API/Structured_clone_algorithm </thead> <tbody> <tr> - <td><a href="/en-US/docs/Web/JavaScript/Data_structures#Primitive_values">すべてのプリミティブ型</a></td> + <td><a href="/ja/docs/Web/JavaScript/Data_structures#Primitive_values">すべてのプリミティブ型</a></td> <td>symbol を除く</td> </tr> <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a> オブジェクト</td> + <td><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a> オブジェクト</td> <td></td> </tr> <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/String">String</a> オブジェクト</td> + <td><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String/String">String</a> オブジェクト</td> <td></td> </tr> <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></td> + <td><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></td> <td></td> </tr> <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp">RegExp</a></td> + <td><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp">RegExp</a></td> <td><code>lastIndex</code> フィールドは保持されません。</td> </tr> <tr> @@ -66,12 +66,12 @@ translation_of: Web/API/Web_Workers_API/Structured_clone_algorithm <td></td> </tr> <tr> - <td><a href="/en-US/docs/Web/API/ArrayBuffer">ArrayBuffer</a></td> + <td><a href="/ja/docs/Web/API/ArrayBuffer">ArrayBuffer</a></td> <td></td> </tr> <tr> - <td><a href="/en-US/docs/Web/API/ArrayBufferView">ArrayBufferView</a></td> - <td>他の <a href="/en-US/docs/Web/JavaScript/Typed_arrays">型付き配列</a> を含む</td> + <td><a href="/ja/docs/Web/API/ArrayBufferView">ArrayBufferView</a></td> + <td>他の <a href="/ja/docs/Web/JavaScript/Typed_arrays">型付き配列</a> を含む</td> </tr> <tr> <td>{{ domxref("ImageBitmap") }}</td> @@ -82,19 +82,19 @@ translation_of: Web/API/Web_Workers_API/Structured_clone_algorithm <td></td> </tr> <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></td> + <td><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></td> <td></td> </tr> <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></td> + <td><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></td> <td>これはプレーンオブジェクト (オブジェクトリテラルなど) <strong>のみ </strong>を含みます</td> </tr> <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map">Map</a></td> + <td><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Map">Map</a></td> <td></td> </tr> <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a></td> + <td><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a></td> <td></td> </tr> </tbody> @@ -106,7 +106,7 @@ translation_of: Web/API/Web_Workers_API/Structured_clone_algorithm <li><a href="http://www.w3.org/TR/html5/infrastructure.html#safe-passing-of-structured-data">HTML Specification: Safe passing of structured data</a></li> <li>{{ domxref("window.history") }}</li> <li>{{ domxref("window.postMessage()") }}</li> - <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li> - <li><a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a></li> - <li><a href="/en-US/docs/Components.utils.cloneInto">Components.utils.cloneInto</a></li> + <li><a href="/ja/docs/Web/API/Web_Workers_API">Web Workers</a></li> + <li><a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB</a></li> + <li><a href="/ja/docs/Components.utils.cloneInto">Components.utils.cloneInto</a></li> </ul> diff --git a/files/ja/web/api/web_workers_api/using_web_workers/index.html b/files/ja/web/api/web_workers_api/using_web_workers/index.html index 3da6e5ee2a..557561f689 100644 --- a/files/ja/web/api/web_workers_api/using_web_workers/index.html +++ b/files/ja/web/api/web_workers_api/using_web_workers/index.html @@ -213,7 +213,7 @@ importScripts('//example.com/hello.js'); /* 他のオリジンのスクリプト <pre class="brush: plain">Content-Security-Policy: script-src 'self'</pre> -<p>特に、これは <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code> を使用したスクリプトを防ぎます。しかし、スクリプトがワーカーを構築した場合、ワーカーのコンテキストで実行中のコードは <code>eval()</code> を使用することができます。</p> +<p>特に、これは <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code> を使用したスクリプトを防ぎます。しかし、スクリプトがワーカーを構築した場合、ワーカーのコンテキストで実行中のコードは <code>eval()</code> を使用することができます。</p> <p>ワーカーのコンテンツセキュリティポリシーを指定するには、ワーカースクリプト自身が配信されたリクエストの <a href="/ja/docs/Web/HTTP/Headers/Content-Security-Policy">Content-Security-Policy</a> レスポンスヘッダーで設定してください。</p> diff --git a/files/ja/web/api/webgl_api/basic_2d_animation_example/index.html b/files/ja/web/api/webgl_api/basic_2d_animation_example/index.html index 5330c36d31..bad0c8dd0e 100644 --- a/files/ja/web/api/webgl_api/basic_2d_animation_example/index.html +++ b/files/ja/web/api/webgl_api/basic_2d_animation_example/index.html @@ -233,7 +233,7 @@ function startup() { <p>ソースコードは {{domxref("WebGLRenderingContext.shaderSource", "gl.shaderSource()")}} を通して新しいシェーダーに送信され、そのときシェーダーは {{domxref("WebGLRenderingContext.compileShader", "gl.compileShader()")}} を使用してコンパイルされます。</p> -<p>コンパイルエラーはコンソールに記録されます。生成されるメッセージに正しいシェーダータイプの文字列を挿入するための<a href="/docs/Web/JavaScript/Reference/Template_literals">テンプレートリテラル</a>文字列の使用に注意してください。実際のエラーの詳細は、{{domxref("WebGLRenderingContext.getShaderInfoLog", "gl.getShaderInfoLog()")}}を呼び出すことによって取得されます。</p> +<p>コンパイルエラーはコンソールに記録されます。生成されるメッセージに正しいシェーダータイプの文字列を挿入するための<a href="/ja/docs/Web/JavaScript/Reference/Template_literals">テンプレートリテラル</a>文字列の使用に注意してください。実際のエラーの詳細は、{{domxref("WebGLRenderingContext.getShaderInfoLog", "gl.getShaderInfoLog()")}}を呼び出すことによって取得されます。</p> <p>最後に、コンパイルされたシェーダーが呼び出し元 (<code>buildShaderProgram()</code> 関数) へ返します。</p> diff --git a/files/ja/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html b/files/ja/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html index c96c77043d..934f52c3ea 100644 --- a/files/ja/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html +++ b/files/ja/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html @@ -129,7 +129,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context <pre class="brush: js line-numbers language-js"><code class="language-js"> <span class="keyword token">const</span> shaderProgram <span class="operator token">=</span> <span class="function token">initShaderProgram</span><span class="punctuation token">(</span>gl<span class="punctuation token">,</span> vsSource<span class="punctuation token">,</span> fsSource<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> -<p>After we've created a shader program we need to look up the locations that WebGL assigned to our inputs. In this case we have one attribute and two uniforms. Attributes receive values from buffers. Each iteration of the vertex shader receives the next value from the buffer assigned to that attribute. <a href="/en-US/docs/Web/API/WebGL_API/Data#Uniforms">Uniforms</a> are similar to JavaScript global variables. They stay the same value for all iterations of a shader. Since the attribute and uniform locations are specific to a single shader program we'll store them together to make them easy to pass around</p> +<p>After we've created a shader program we need to look up the locations that WebGL assigned to our inputs. In this case we have one attribute and two uniforms. Attributes receive values from buffers. Each iteration of the vertex shader receives the next value from the buffer assigned to that attribute. <a href="/ja/docs/Web/API/WebGL_API/Data#Uniforms">Uniforms</a> are similar to JavaScript global variables. They stay the same value for all iterations of a shader. Since the attribute and uniform locations are specific to a single shader program we'll store them together to make them easy to pass around</p> <pre class="brush: js line-numbers language-js"><code class="language-js"> <span class="keyword token">const</span> programInfo <span class="operator token">=</span> <span class="punctuation token">{</span> program<span class="punctuation token">:</span> shaderProgram<span class="punctuation token">,</span> diff --git a/files/ja/web/api/webgl_api/webgl_model_view_projection/index.html b/files/ja/web/api/webgl_api/webgl_model_view_projection/index.html index d686e310bd..304d1604e4 100644 --- a/files/ja/web/api/webgl_api/webgl_model_view_projection/index.html +++ b/files/ja/web/api/webgl_api/webgl_model_view_projection/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/WebGL_API/WebGL_model_view_projection --- <p>{{WebGLSidebar}}</p> -<p class="summary">この記事では、<a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> プロジェクト内でデータを取得し、それを適切な空間に投影して画面に表示する方法について説明します。並進、拡縮、回転行列を使用した基本的な行列計算の知識があることを前提としています。3Dシーンを構成するときに通常使用される中心的な3つの行列である、モデル、ビュー、射影行列について説明します。</p> +<p class="summary">この記事では、<a href="/ja/docs/Web/API/WebGL_API">WebGL</a> プロジェクト内でデータを取得し、それを適切な空間に投影して画面に表示する方法について説明します。並進、拡縮、回転行列を使用した基本的な行列計算の知識があることを前提としています。3Dシーンを構成するときに通常使用される中心的な3つの行列である、モデル、ビュー、射影行列について説明します。</p> <div class="note"> <p><strong>Note</strong>: This article is also available as an <a href="https://github.com/TatumCreative/mdn-model-view-projection">MDN content kit</a>. It also uses a collection of <a href="https://github.com/TatumCreative/mdn-webgl">utility functions</a> available under the <code>MDN</code> global object.</p> @@ -687,6 +687,6 @@ gl_Position = projection * model * vec4(position, 1.0); <h2 id="See_also">See also</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebGL_API">WebGL</a></li> + <li><a href="/ja/docs/Web/API/WebGL_API">WebGL</a></li> <li>{{interwiki("wikipedia", "3D projection")}}</li> </ul> diff --git a/files/ja/web/api/webglrenderingcontext/attachshader/index.html b/files/ja/web/api/webglrenderingcontext/attachshader/index.html index 3390fd85c8..d6deb487d5 100644 --- a/files/ja/web/api/webglrenderingcontext/attachshader/index.html +++ b/files/ja/web/api/webglrenderingcontext/attachshader/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/WebGLRenderingContext/attachShader --- <div>{{APIRef("WebGL")}}</div> -<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong>WebGLRenderingContext.attachShader()</strong> メソッドは、フラグメントか頂点のどちらかの {{domxref("WebGLShader")}} を {{domxref("WebGLProgram")}} にアタッチします。</p> +<p><a href="/ja/docs/Web/API/WebGL_API">WebGL API</a> の <strong>WebGLRenderingContext.attachShader()</strong> メソッドは、フラグメントか頂点のどちらかの {{domxref("WebGLShader")}} を {{domxref("WebGLProgram")}} にアタッチします。</p> <h2 id="構文">構文</h2> diff --git a/files/ja/web/api/webglrenderingcontext/bindbuffer/index.html b/files/ja/web/api/webglrenderingcontext/bindbuffer/index.html index e2133d9477..d27fde5aed 100644 --- a/files/ja/web/api/webglrenderingcontext/bindbuffer/index.html +++ b/files/ja/web/api/webglrenderingcontext/bindbuffer/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/WebGLRenderingContext/bindBuffer --- <div>{{APIRef("WebGL")}}</div> -<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.bindBuffer()</code></strong> メソッドは、与えられた {{domxref("WebGLBuffer")}} をターゲットに結合します。</p> +<p><a href="/ja/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.bindBuffer()</code></strong> メソッドは、与えられた {{domxref("WebGLBuffer")}} をターゲットに結合します。</p> <h2 id="構文">構文</h2> diff --git a/files/ja/web/api/webglrenderingcontext/bufferdata/index.html b/files/ja/web/api/webglrenderingcontext/bufferdata/index.html index d00b532c52..76ab8f6a99 100644 --- a/files/ja/web/api/webglrenderingcontext/bufferdata/index.html +++ b/files/ja/web/api/webglrenderingcontext/bufferdata/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/WebGLRenderingContext/bufferData --- <div>{{APIRef("WebGL")}}</div> -<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> <strong><code>WebGLRenderingContext.bufferData()</code></strong> メソッドは、バッファーオブジェクトのデータストアを初期化、作成します。</p> +<p><a href="/ja/docs/Web/API/WebGL_API">WebGL API</a> <strong><code>WebGLRenderingContext.bufferData()</code></strong> メソッドは、バッファーオブジェクトのデータストアを初期化、作成します。</p> <h2 id="構文">構文</h2> diff --git a/files/ja/web/api/webglrenderingcontext/clear/index.html b/files/ja/web/api/webglrenderingcontext/clear/index.html index 63742665a0..e0a636ff35 100644 --- a/files/ja/web/api/webglrenderingcontext/clear/index.html +++ b/files/ja/web/api/webglrenderingcontext/clear/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/WebGLRenderingContext/clear --- <div>{{APIRef("WebGL")}}</div> -<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.clear()</code></strong> メソッドは、バッファーをプリセット値で消去します。</p> +<p><a href="/ja/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.clear()</code></strong> メソッドは、バッファーをプリセット値で消去します。</p> <p>プリセット値は、{{domxref("WebGLRenderingContext.clearColor", "clearColor()")}}, {{domxref("WebGLRenderingContext.clearDepth", "clearDepth()")}} や {{domxref("WebGLRenderingContext.clearStencil", "clearStencil()")}} で設定可能です。</p> diff --git a/files/ja/web/api/webglrenderingcontext/clearcolor/index.html b/files/ja/web/api/webglrenderingcontext/clearcolor/index.html index 684e45cc5d..379d7e00fb 100644 --- a/files/ja/web/api/webglrenderingcontext/clearcolor/index.html +++ b/files/ja/web/api/webglrenderingcontext/clearcolor/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/WebGLRenderingContext/clearColor --- <div>{{APIRef("WebGL")}}</div> -<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.clearColor()</code></strong> メソッドは、カラーバッファーの消去に使われる色の値を指定します。</p> +<p><a href="/ja/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.clearColor()</code></strong> メソッドは、カラーバッファーの消去に使われる色の値を指定します。</p> <p>この指定は {{domxref("WebGLRenderingContext.clear", "clear()")}} メソッドを呼んだときに使用される色です。値は 0 から 1 に丸められます。</p> diff --git a/files/ja/web/api/webglrenderingcontext/cleardepth/index.html b/files/ja/web/api/webglrenderingcontext/cleardepth/index.html index 0dc37e2b19..7e9c54ce84 100644 --- a/files/ja/web/api/webglrenderingcontext/cleardepth/index.html +++ b/files/ja/web/api/webglrenderingcontext/cleardepth/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/WebGLRenderingContext/clearDepth --- <div>{{APIRef("WebGL")}}</div> -<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.clearDepth()</code></strong> メソッドは、深度バッファーを消去する値を指定します。</p> +<p><a href="/ja/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.clearDepth()</code></strong> メソッドは、深度バッファーを消去する値を指定します。</p> <p>この指定は、{{domxref("WebGLRenderingContext.clear", "clear()")}} メソッドを呼ぶときに使用される深度の数値です。値は 0 から 1 に丸められます。</p> diff --git a/files/ja/web/api/webglrenderingcontext/clearstencil/index.html b/files/ja/web/api/webglrenderingcontext/clearstencil/index.html index 86f8b110dd..3e08e2256e 100644 --- a/files/ja/web/api/webglrenderingcontext/clearstencil/index.html +++ b/files/ja/web/api/webglrenderingcontext/clearstencil/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/WebGLRenderingContext/clearStencil --- <div>{{APIRef("WebGL")}}</div> -<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.clearStencil()</code></strong> メソッドは、ステンシルバッファーを消去する値を指定します。</p> +<p><a href="/ja/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.clearStencil()</code></strong> メソッドは、ステンシルバッファーを消去する値を指定します。</p> <p>この指定は、{{domxref("WebGLRenderingContext.clear", "clear()")}} メソッドを呼ぶときに使用されるステンシルの値です。</p> diff --git a/files/ja/web/api/webglrenderingcontext/compileshader/index.html b/files/ja/web/api/webglrenderingcontext/compileshader/index.html index 42101779c0..b021fb7cfe 100644 --- a/files/ja/web/api/webglrenderingcontext/compileshader/index.html +++ b/files/ja/web/api/webglrenderingcontext/compileshader/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/WebGLRenderingContext/compileShader --- <div>{{APIRef("WebGL")}}</div> -<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong>WebGLRenderingContext.compileShader()</strong> メソッドは、GLSL シェーダーをバイナリへコンパイルします。これは {{domxref("WebGLProgram")}} に使用することができます。</p> +<p><a href="/ja/docs/Web/API/WebGL_API">WebGL API</a> の <strong>WebGLRenderingContext.compileShader()</strong> メソッドは、GLSL シェーダーをバイナリへコンパイルします。これは {{domxref("WebGLProgram")}} に使用することができます。</p> <h2 id="構文">構文</h2> diff --git a/files/ja/web/api/webglrenderingcontext/createbuffer/index.html b/files/ja/web/api/webglrenderingcontext/createbuffer/index.html index 09b9f21685..f7583fc77f 100644 --- a/files/ja/web/api/webglrenderingcontext/createbuffer/index.html +++ b/files/ja/web/api/webglrenderingcontext/createbuffer/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/WebGLRenderingContext/createBuffer --- <div>{{APIRef("WebGL")}}</div> -<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.createBuffer()</code></strong> メソッドは、頂点や色といったデータを格納する {{domxref("WebGLBuffer")}} を作成、初期化します。</p> +<p><a href="/ja/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.createBuffer()</code></strong> メソッドは、頂点や色といったデータを格納する {{domxref("WebGLBuffer")}} を作成、初期化します。</p> <h2 id="構文">構文</h2> diff --git a/files/ja/web/api/webglrenderingcontext/createprogram/index.html b/files/ja/web/api/webglrenderingcontext/createprogram/index.html index 2fa7d7def3..7c247390af 100644 --- a/files/ja/web/api/webglrenderingcontext/createprogram/index.html +++ b/files/ja/web/api/webglrenderingcontext/createprogram/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/WebGLRenderingContext/createProgram --- <div>{{APIRef("WebGL")}}</div> -<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.createProgram()</code></strong> メソッドは、{{domxref("WebGLProgram")}} オブジェクトを作成、初期化します。</p> +<p><a href="/ja/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.createProgram()</code></strong> メソッドは、{{domxref("WebGLProgram")}} オブジェクトを作成、初期化します。</p> <h2 id="構文">構文</h2> diff --git a/files/ja/web/api/webglrenderingcontext/createshader/index.html b/files/ja/web/api/webglrenderingcontext/createshader/index.html index 69fbb6a7eb..4ce52ce0f3 100644 --- a/files/ja/web/api/webglrenderingcontext/createshader/index.html +++ b/files/ja/web/api/webglrenderingcontext/createshader/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/WebGLRenderingContext/createShader --- <div>{{APIRef("WebGL")}}</div> -<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong>WebGLRenderingContext.createShader()</strong> メソッドは、{{domxref("WebGLShader")}} を作成します。それからさらに、 {{domxref("WebGLRenderingContext.shaderSource()")}} と {{domxref("WebGLRenderingContext.compileShader()")}} を用いて設定できます。</p> +<p><a href="/ja/docs/Web/API/WebGL_API">WebGL API</a> の <strong>WebGLRenderingContext.createShader()</strong> メソッドは、{{domxref("WebGLShader")}} を作成します。それからさらに、 {{domxref("WebGLRenderingContext.shaderSource()")}} と {{domxref("WebGLRenderingContext.compileShader()")}} を用いて設定できます。</p> <h2 id="構文">構文</h2> diff --git a/files/ja/web/api/webglrenderingcontext/drawarrays/index.html b/files/ja/web/api/webglrenderingcontext/drawarrays/index.html index 1f551089c9..3b02fa5648 100644 --- a/files/ja/web/api/webglrenderingcontext/drawarrays/index.html +++ b/files/ja/web/api/webglrenderingcontext/drawarrays/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/WebGLRenderingContext/drawArrays --- <div>{{APIRef("WebGL")}}</div> -<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.drawArrays()</code></strong> メソッドは、配列データからプリミティブを描画します。</p> +<p><a href="/ja/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.drawArrays()</code></strong> メソッドは、配列データからプリミティブを描画します。</p> <h2 id="構文">構文</h2> diff --git a/files/ja/web/api/webglrenderingcontext/getattriblocation/index.html b/files/ja/web/api/webglrenderingcontext/getattriblocation/index.html index f521fbf58a..a820732176 100644 --- a/files/ja/web/api/webglrenderingcontext/getattriblocation/index.html +++ b/files/ja/web/api/webglrenderingcontext/getattriblocation/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/WebGLRenderingContext/getAttribLocation --- <div>{{APIRef("WebGL")}}</div> -<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.getAttribLocation()</code></strong>メソッドは指定された{{domxref("WebGLProgram")}}内の属性の場所を返します。</p> +<p><a href="/ja/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.getAttribLocation()</code></strong>メソッドは指定された{{domxref("WebGLProgram")}}内の属性の場所を返します。</p> <h2 id="構文">構文</h2> diff --git a/files/ja/web/api/webglrenderingcontext/linkprogram/index.html b/files/ja/web/api/webglrenderingcontext/linkprogram/index.html index b9d989545d..55c3063d6e 100644 --- a/files/ja/web/api/webglrenderingcontext/linkprogram/index.html +++ b/files/ja/web/api/webglrenderingcontext/linkprogram/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/WebGLRenderingContext/linkProgram --- <div>{{APIRef("WebGL")}}</div> -<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.linkProgram()</code></strong> メソッドは、与えられた {{domxref("WebGLProgram")}} に接続された頂点とフラグメントのシェーダーをリンクします。</p> +<p><a href="/ja/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.linkProgram()</code></strong> メソッドは、与えられた {{domxref("WebGLProgram")}} に接続された頂点とフラグメントのシェーダーをリンクします。</p> <h2 id="構文">構文</h2> diff --git a/files/ja/web/api/webglrenderingcontext/shadersource/index.html b/files/ja/web/api/webglrenderingcontext/shadersource/index.html index c8b3eb97b6..91cac9946d 100644 --- a/files/ja/web/api/webglrenderingcontext/shadersource/index.html +++ b/files/ja/web/api/webglrenderingcontext/shadersource/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/WebGLRenderingContext/shaderSource --- <div>{{APIRef("WebGL")}}</div> -<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.shaderSource()</code></strong> メソッドは、{{domxref("WebGLShader")}} のソースコードを設定します。</p> +<p><a href="/ja/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.shaderSource()</code></strong> メソッドは、{{domxref("WebGLShader")}} のソースコードを設定します。</p> <h2 id="構文">構文</h2> diff --git a/files/ja/web/api/webglrenderingcontext/uniformmatrix/index.html b/files/ja/web/api/webglrenderingcontext/uniformmatrix/index.html index dea9487204..828da2d7cd 100644 --- a/files/ja/web/api/webglrenderingcontext/uniformmatrix/index.html +++ b/files/ja/web/api/webglrenderingcontext/uniformmatrix/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/WebGLRenderingContext/uniformMatrix --- <div>{{APIRef("WebGL")}}</div> -<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.uniformMatrix[234]fv()</code></strong> メソッドは、行列の値をユニフォームの値に指定します。</p> +<p><a href="/ja/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.uniformMatrix[234]fv()</code></strong> メソッドは、行列の値をユニフォームの値に指定します。</p> <p>このメソッドの 3 つのバージョン (<code>uniformMatrix2fv()</code>, <code>uniformMatrix3fv()</code>, と <code>uniformMatrix4fv()</code>) は、入力値として 2 要素, 3 要素, 4 要素のベクトルをそれぞれ取ります。</p> diff --git a/files/ja/web/api/webglrenderingcontext/useprogram/index.html b/files/ja/web/api/webglrenderingcontext/useprogram/index.html index 940a8cda72..7f86a49824 100644 --- a/files/ja/web/api/webglrenderingcontext/useprogram/index.html +++ b/files/ja/web/api/webglrenderingcontext/useprogram/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/WebGLRenderingContext/useProgram --- <div>{{APIRef("WebGL")}}</div> -<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.useProgram()</code></strong> メソッドは、指定した {{domxref("WebGLProgram")}} を現在の描画ステートの一部として設定します。</p> +<p><a href="/ja/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.useProgram()</code></strong> メソッドは、指定した {{domxref("WebGLProgram")}} を現在の描画ステートの一部として設定します。</p> <h2 id="構文">構文</h2> diff --git a/files/ja/web/api/webglrenderingcontext/vertexattribpointer/index.html b/files/ja/web/api/webglrenderingcontext/vertexattribpointer/index.html index c5bdf737c9..bf0e2f05f9 100644 --- a/files/ja/web/api/webglrenderingcontext/vertexattribpointer/index.html +++ b/files/ja/web/api/webglrenderingcontext/vertexattribpointer/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/WebGLRenderingContext/vertexAttribPointer --- <div>{{APIRef("WebGL")}}</div> -<p class="summary"><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.vertexAttribPointer()</code></strong> メソッドは、現在 <code>gl.ARRAY_BUFFER</code> に結合されたバッファーを、現在の頂点バッファーオブジェクトの一般的な頂点属性に結合して、そのレイアウトを指定します。</p> +<p class="summary"><a href="/ja/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.vertexAttribPointer()</code></strong> メソッドは、現在 <code>gl.ARRAY_BUFFER</code> に結合されたバッファーを、現在の頂点バッファーオブジェクトの一般的な頂点属性に結合して、そのレイアウトを指定します。</p> <h2 id="構文">構文</h2> diff --git a/files/ja/web/api/webrtc_api/connectivity/index.html b/files/ja/web/api/webrtc_api/connectivity/index.html index 20b60fd87d..167ddcff9a 100644 --- a/files/ja/web/api/webrtc_api/connectivity/index.html +++ b/files/ja/web/api/webrtc_api/connectivity/index.html @@ -61,7 +61,7 @@ translation_of: Web/API/WebRTC_API/Connectivity <p>The <code>pendingLocalDescription</code> contains not just the offer or answer under consideration, but any local ICE candidates which have already been gathered since the offer or answer was created. Similarly, <code>pendingRemoteDescription</code> includes any remote ICE candidates which have been provided by calls to {{domxref("RTCPeerConnection.addIceCandidate()")}}.</p> </div> -<p>See the individual articles on these properties and methods for more specifics, and <a href="/en-US/docs/Web/Media/Formats/WebRTC_codecs">Codecs used by WebRTC</a> for information about codecs supported by WebRTC and which are compatible with which browsers. The codecs guide also offers guidance to help you choose the best codecs for your needs.</p> +<p>See the individual articles on these properties and methods for more specifics, and <a href="/ja/docs/Web/Media/Formats/WebRTC_codecs">Codecs used by WebRTC</a> for information about codecs supported by WebRTC and which are compatible with which browsers. The codecs guide also offers guidance to help you choose the best codecs for your needs.</p> <h2 id="ICE_candidates">ICE candidates</h2> diff --git a/files/ja/web/api/webrtc_api/index.html b/files/ja/web/api/webrtc_api/index.html index 306818224b..bc2a2fada0 100644 --- a/files/ja/web/api/webrtc_api/index.html +++ b/files/ja/web/api/webrtc_api/index.html @@ -24,11 +24,11 @@ translation_of: Web/API/WebRTC_API <h2 id="Interoperability" name="Interoperability">相互運用性</h2> -<p>WebRTC の実装はまだ進化しており、ブラウザごとに<a href="/en-US/docs/Web/Media/Formats/WebRTC_codecs">コーデック</a>や WebRTC 機能のサポートレベルが異なるため、コードを書き始める前に Google が提供する <a href="https://github.com/webrtcHacks/adapter">Adapter.js</a> ライブラリを利用することを強く検討する必要があります。</p> +<p>WebRTC の実装はまだ進化しており、ブラウザごとに<a href="/ja/docs/Web/Media/Formats/WebRTC_codecs">コーデック</a>や WebRTC 機能のサポートレベルが異なるため、コードを書き始める前に Google が提供する <a href="https://github.com/webrtcHacks/adapter">Adapter.js</a> ライブラリを利用することを強く検討する必要があります。</p> <p>Adapter.js はシム ({{Glossary("Shim")}}) やポリフィル ({{Glossary("polyfill")}}) を使用して、サポートしている環境によって異なる WebRTC 実装の違いを滑らかにします。また、接頭辞やその他の名前の違いも Adapter.js が処理することで、WebRTC の開発プロセス全体がより簡単になり、より広範な互換性のある結果が得られるようになります。このライブラリは <a href="https://www.npmjs.com/package/webrtc-adapter">NPM パッケージ</a>としても提供されています。</p> -<p>Adapter.js の詳細については、<a href="/en-US/docs/Web/API/WebRTC_API/adapter.js">WebRTC adapter.js を使用した互換性の向上</a>を参照してください。</p> +<p>Adapter.js の詳細については、<a href="/ja/docs/Web/API/WebRTC_API/adapter.js">WebRTC adapter.js を使用した互換性の向上</a>を参照してください。</p> <h2 id="WebRTC_concepts_and_usage" name="WebRTC_concepts_and_usage">WebRTC の概念と使い方</h2> @@ -76,12 +76,12 @@ translation_of: Web/API/WebRTC_API <dt>{{DOMxRef("RTCTrackEvent")}}</dt> <dd>このインターフェイスは {{domxref("RTCPeerConnection.track_event", "track")}} イベントを表すもので、 {{DOMxRef("RTCRtpReceiver")}} オブジェクトが {{DOMxRef("RTCPeerConnection")}} オブジェクトに追加されたことを示すトラックイベントを表現するために使用されるインターフェースで、新しい着信 (incoming) {{DOMxRef("MediaStreamTrack")}} が生成され、<code>RTCPeerConnection</code> に追加されたことを示します。</dd> <dt>{{DOMxRef("RTCSctpTransport")}}</dt> - <dd>Stream Control Transmission Protocol (<strong>{{Glossary("SCTP")}}</strong>) トランスポートを説明する情報を提供し、 {{DOMxRef("RTCPeerConnection")}} のすべての<a href="/en-US/docs/Web/API/RTCPeerConnection" title="The RTCPeerConnection interface represents a WebRTC connection between the local computer and a remote peer. It provides methods to connect to a remote peer, maintain and monitor the connection, and close the connection once it's no longer needed."><code>RTCPeerConnection</code></a> のデータチャネルの SCTP パケットが送受信される Datagram Transport Layer Security (<strong>{{Glossary("DTLS")}}</strong>) トランスポートにアクセスする方法も提供します。</dd> + <dd>Stream Control Transmission Protocol (<strong>{{Glossary("SCTP")}}</strong>) トランスポートを説明する情報を提供し、 {{DOMxRef("RTCPeerConnection")}} のすべての<a href="/ja/docs/Web/API/RTCPeerConnection" title="The RTCPeerConnection interface represents a WebRTC connection between the local computer and a remote peer. It provides methods to connect to a remote peer, maintain and monitor the connection, and close the connection once it's no longer needed."><code>RTCPeerConnection</code></a> のデータチャネルの SCTP パケットが送受信される Datagram Transport Layer Security (<strong>{{Glossary("DTLS")}}</strong>) トランスポートにアクセスする方法も提供します。</dd> <dt> <h4 id="Dictionaries" name="Dictionaries">辞書</h4> </dt> <dt>{{DOMxRef("RTCConfiguration")}}</dt> - <dd><a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection" title="The RTCPeerConnection interface represents a WebRTC connection between the local computer and a remote peer. It provides methods to connect to a remote peer, maintain and monitor the connection, and close the connection once it's no longer needed."><code>RTCPeerConnection</code></a> の {{DOMxRef("RTCPeerConnection")}} の構成オプションを提供するために使用します。</dd> + <dd><a href="/ja/docs/Web/API/RTCPeerConnection" title="The RTCPeerConnection interface represents a WebRTC connection between the local computer and a remote peer. It provides methods to connect to a remote peer, maintain and monitor the connection, and close the connection once it's no longer needed."><code>RTCPeerConnection</code></a> の {{DOMxRef("RTCPeerConnection")}} の構成オプションを提供するために使用します。</dd> <dt>{{DOMxRef("RTCIceServer")}}</dt> <dd>({{Glossary("STUN")}} や {{Glossary("TURN")}} サーバのような) 単一の {{Glossary("ICE")}} サーバーを定義します。</dd> <dt>{{DOMxRef("RTCRtpContributingSource")}}</dt> diff --git a/files/ja/web/api/websocket/protocol/index.html b/files/ja/web/api/websocket/protocol/index.html index 542e7247a0..1bceb52b81 100644 --- a/files/ja/web/api/websocket/protocol/index.html +++ b/files/ja/web/api/websocket/protocol/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/WebSocket/protocol <h2 id="値">値</h2> -<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></p> +<p><a href="/ja/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></p> <h2 id="仕様書">仕様書</h2> diff --git a/files/ja/web/api/websocket/url/index.html b/files/ja/web/api/websocket/url/index.html index 4fec72f012..f6ba98ae8b 100644 --- a/files/ja/web/api/websocket/url/index.html +++ b/files/ja/web/api/websocket/url/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/WebSocket/url <h2 id="値">値</h2> -<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></p> +<p><a href="/ja/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></p> <h2 id="仕様書">仕様書</h2> diff --git a/files/ja/web/api/websockets_api/writing_websocket_server/index.html b/files/ja/web/api/websockets_api/writing_websocket_server/index.html index 6db150fbc0..b82473f0a1 100644 --- a/files/ja/web/api/websockets_api/writing_websocket_server/index.html +++ b/files/ja/web/api/websockets_api/writing_websocket_server/index.html @@ -133,7 +133,7 @@ if (Regex.IsMatch(data, "^GET")) { }</pre> -<p>リクエストは簡単に作成できますが、理解するのは少し難しいかもしれません。サーバーのハンドシェイクの完全な説明は <a href="https://developer.mozilla.org/ja/docs/Web/API/WebSockets_API/RFC%206455,%20section%204.2.2">RFC 6455、セクション4.2.2</a> にあります。私たちの目的のために、簡単なレスポンスを作成します。</p> +<p>リクエストは簡単に作成できますが、理解するのは少し難しいかもしれません。サーバーのハンドシェイクの完全な説明は <a href="/ja/docs/Web/API/WebSockets_API/RFC%206455,%20section%204.2.2">RFC 6455、セクション4.2.2</a> にあります。私たちの目的のために、簡単なレスポンスを作成します。</p> <p>やらなければならないのは:</p> diff --git a/files/ja/web/api/websockets_api/writing_websocket_servers/index.html b/files/ja/web/api/websockets_api/writing_websocket_servers/index.html index 2dbf4fe7da..2ee26b96af 100644 --- a/files/ja/web/api/websockets_api/writing_websocket_servers/index.html +++ b/files/ja/web/api/websockets_api/writing_websocket_servers/index.html @@ -54,7 +54,7 @@ Sec-WebSocket-Version: 13</code></pre> <p><strong>Tip:</strong> すべての<strong>ブラウザ</strong>は <a href="/ja/docs/Web/HTTP/HTTP_access_control#Origin"><code>Origin</code> ヘッダー</a>を送信します。 このヘッダをセキュリティ (同じ起点のチェック、ホワイトリスト/ブラックリストなど) に使用し、あなたが見ているものが気に入らなければ <a href="/ja/docs/Web/HTTP/Status#403">403 Forbidden</a> を送ることができます。ただし、ブラウザ以外のエージェントは、偽の <code>Origin</code> を送信するだけであることに注意してください。ほとんどのアプリケーションは、このヘッダーのない要求を拒否します。</p> </div> -<p>ヘッダーが解釈されていないか値が正しくない場合、サーバーは "<a href="https://developer.mozilla.org/en-US/docs/HTTP/Response_codes#400">400 Bad Request</a>" を送信し、すぐにソケットを閉じる必要があります。通常は、HTTP レスポンス本体でハンドシェークが失敗した理由を示すかもしれませんが、メッセージは表示されないかもしれません (ブラウザはそれを表示しません)。 サーバーが WebSocket のバージョンを認識しない場合、サーバーは解釈可能なバージョンを含む <code>Sec-WebSocket-Version</code> ヘッダーを返す必要があります。(このガイドでは最新のv13について説明しています)。 ここで、最も興味深いヘッダーである <code>Sec-WebSocket-Key</code> に移動しましょう。</p> +<p>ヘッダーが解釈されていないか値が正しくない場合、サーバーは "<a href="/ja/docs/HTTP/Response_codes#400">400 Bad Request</a>" を送信し、すぐにソケットを閉じる必要があります。通常は、HTTP レスポンス本体でハンドシェークが失敗した理由を示すかもしれませんが、メッセージは表示されないかもしれません (ブラウザはそれを表示しません)。 サーバーが WebSocket のバージョンを認識しない場合、サーバーは解釈可能なバージョンを含む <code>Sec-WebSocket-Version</code> ヘッダーを返す必要があります。(このガイドでは最新のv13について説明しています)。 ここで、最も興味深いヘッダーである <code>Sec-WebSocket-Key</code> に移動しましょう。</p> <div class="note"> <p><strong>Note:</strong> <a href="/ja/docs/Web/HTTP/Status">通常の HTTP ステータスコード</a>は、ハンドシェイクの前にのみ使用できます。ハンドシェイクが成功したら、別のコードセット (仕様の 7.4 節で定義されている) を使用する必要があります。</p> @@ -236,7 +236,7 @@ Sec-WebSocket-Protocol: wamp</code></pre> <ul> <li><a href="https://github.com/alexhultman/libwshandshake">WebSocket handshake library in C++</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/WebSockets/Writing_WebSocket_server" title="/en-US/docs/WebSockets/Writing_WebSocket_server">Tutorial: Websocket server in C#</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/WebSockets/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/WebSockets/WebSocket_Server_Vb.NET">Tutorial: Websocket server in VB.NET</a></li> + <li><a href="/ja/docs/WebSockets/Writing_WebSocket_server" title="/en-US/docs/WebSockets/Writing_WebSocket_server">Tutorial: Websocket server in C#</a></li> + <li><a href="/ja/docs/WebSockets/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></li> + <li><a href="/ja/docs/WebSockets/WebSocket_Server_Vb.NET">Tutorial: Websocket server in VB.NET</a></li> </ul> diff --git a/files/ja/web/api/webvr_api/concepts/index.html b/files/ja/web/api/webvr_api/concepts/index.html index a868ca06fd..9327dacaca 100644 --- a/files/ja/web/api/webvr_api/concepts/index.html +++ b/files/ja/web/api/webvr_api/concepts/index.html @@ -198,4 +198,4 @@ translation_of: Web/API/WebVR_API/Concepts <p>立体音響は，3次元空間内でどのように音が聞こえるかをシミュレーションするための音響操作エフェクトです．</p> -<p>これは <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> と直接関係していて，キャンバス内にあるオブジェクト上にサウンドを配置したり，ユーザの移動方向や見ているシーンの部分に応じてオーティオを再生することが可能です．</p> +<p>これは <a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a> と直接関係していて，キャンバス内にあるオブジェクト上にサウンドを配置したり，ユーザの移動方向や見ているシーンの部分に応じてオーティオを再生することが可能です．</p> diff --git a/files/ja/web/api/webvr_api/index.html b/files/ja/web/api/webvr_api/index.html index bbce00b96f..c0997f6058 100644 --- a/files/ja/web/api/webvr_api/index.html +++ b/files/ja/web/api/webvr_api/index.html @@ -63,7 +63,7 @@ translation_of: Web/API/WebVR_API <h3 id="Using_controllers_Combining_WebVR_with_the_Gamepad_API" name="Using_controllers_Combining_WebVR_with_the_Gamepad_API">コントローラーの使用: WebVR と Gamepad API の組み合わせ</h3> -<p>多くの WebVR ハードウェアは、ヘッドセットと一緒に使用するコントローラーをセットアップします。これらは <a href="/ja/docs/Web/API/Gamepad_API">Gamepad API</a> を介して WebVR アプリで使用することができ、特に <a href="/ja/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">Gamepad Extensions API</a> は、コントローラーの<a href="/en-US/docs/Web/API/GamepadPose">コントローラーのポーズ</a>や<a href="/en-US/docs/Web/API/GamepadHapticActuator">触覚アクチュエーター</a>などにアクセスするための API 機能を追加します。</p> +<p>多くの WebVR ハードウェアは、ヘッドセットと一緒に使用するコントローラーをセットアップします。これらは <a href="/ja/docs/Web/API/Gamepad_API">Gamepad API</a> を介して WebVR アプリで使用することができ、特に <a href="/ja/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">Gamepad Extensions API</a> は、コントローラーの<a href="/ja/docs/Web/API/GamepadPose">コントローラーのポーズ</a>や<a href="/ja/docs/Web/API/GamepadHapticActuator">触覚アクチュエーター</a>などにアクセスするための API 機能を追加します。</p> <div class="note"> <p><strong>Note</strong>: <a href="/ja/docs/Web/API/WebVR_API/Using_the_WebVR_API">WebVR API の使用</a>の記事では、 WebVR アプリでの VR コントローラーの使い方の基本を解説しています。</p> diff --git a/files/ja/web/api/webvr_api/using_the_webvr_api/index.html b/files/ja/web/api/webvr_api/using_the_webvr_api/index.html index 240940fe73..ce40676124 100644 --- a/files/ja/web/api/webvr_api/using_the_webvr_api/index.html +++ b/files/ja/web/api/webvr_api/using_the_webvr_api/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/WebVR_API/Using_the_WebVR_API --- <p>{{draft("この WebVR API ドキュメントは現在v1.0の仕様への対応作業の途中です．従って、ここにある情報のいくつかは最新ではありません。この作業について質問がある場合は ~~chrisdavidmills へ連絡をとってください．")}}</p> -<p class="summary"><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> はウェブ開発者のツールキットへのすばらしい追加機能で、<a href="https://developer.oculus.com/">Oculus Rift</a> のようなバーチャルリアリティハードウェアへのアクセスが可能となります。そして出力された動きや向きはウェブアプリの描画更新に変換されます。しかし VR アプリを開発はどのようにやればいいのでしょうか？ この記事では、それに関する基礎的な解説を行います。</p> +<p class="summary"><a href="/ja/docs/Web/API/WebVR_API">WebVR API</a> はウェブ開発者のツールキットへのすばらしい追加機能で、<a href="https://developer.oculus.com/">Oculus Rift</a> のようなバーチャルリアリティハードウェアへのアクセスが可能となります。そして出力された動きや向きはウェブアプリの描画更新に変換されます。しかし VR アプリを開発はどのようにやればいいのでしょうか？ この記事では、それに関する基礎的な解説を行います。</p> <div class="note"> <p><span style="font-size: 14px; line-height: 21px;"><strong>注記</strong></span>: WebVR は現在実験的な段階にあります（<a href="http://mozvr.github.io/webvr-spec/webvr.html">最新の仕様はこちら</a>にあります); 今の段階でもっとも正常に動作するのは Firefox Nightly/Developer Edition で、一部の機能は Google Chrome でも動作します。詳細は Brandon Jonesの <a class="external external-icon" href="http://blog.tojicode.com/2014/07/bringing-vr-to-chrome.html">Bringing VR to Chrome</a> を参照してください。</p> @@ -13,18 +13,18 @@ translation_of: Web/API/WebVR_API/Using_the_WebVR_API <h2 id="始めるには">始めるには</h2> -<p>WebVRを始めるには，VRハードウェアのマニュアルに従ったセットアップと、<a href="/en-US/docs/Web/API/WebVR_API/WebVR_environment_setup">WebVR environment setup</a> に示されているコンピュータへの設定が必要になります、スムースな動作には専用GPUが推奨されます。</p> +<p>WebVRを始めるには，VRハードウェアのマニュアルに従ったセットアップと、<a href="/ja/docs/Web/API/WebVR_API/WebVR_environment_setup">WebVR environment setup</a> に示されているコンピュータへの設定が必要になります、スムースな動作には専用GPUが推奨されます。</p> <p><a href="https://nightly.mozilla.org/">Firefox Nightly</a> (または <a href="https://www.mozilla.org/en-US/firefox/developer/">Developer Edition</a>) のインストールと合わせて <a href="http://www.mozvr.com/downloads/webvr-addon-0.1.0.xpi">WebVR Enabler Add-on</a> も必要となります。</p> <p>いちど環境が設定できたら、テストのために私たちの <a href="http://mozvr.com/projects/">MozVR projects</a> を開いて、[Enter VR<strong>]</strong> ボタンをクリックすることを試してください。</p> <div class="note"> -<p><strong>注記</strong>: より深い情報のために，<a href="/en-US/docs/Web/API/WebVR_API/WebVR_environment_setup">WebVR environment setup</a> をチェックしてください。</p> +<p><strong>注記</strong>: より深い情報のために，<a href="/ja/docs/Web/API/WebVR_API/WebVR_environment_setup">WebVR environment setup</a> をチェックしてください。</p> </div> <div class="note"> -<p><strong>注記</strong>: モバイルデバイスを HMD として用いるような安価な選択肢もあります。この場合，位置センサは利用できませんので、代わりに <a href="/en-US/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes">deviceorientation API</a> を用いて擬似的な向きデータを使う必要があるかもしれません。</p> +<p><strong>注記</strong>: モバイルデバイスを HMD として用いるような安価な選択肢もあります。この場合，位置センサは利用できませんので、代わりに <a href="/ja/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes">deviceorientation API</a> を用いて擬似的な向きデータを使う必要があるかもしれません。</p> </div> <h2 id="簡単なデモ">簡単なデモ</h2> @@ -33,7 +33,7 @@ translation_of: Web/API/WebVR_API/Using_the_WebVR_API <p><img alt="" src="https://mdn.mozillademos.org/files/10797/vrpositionsensor-demo.png" style="display: block; height: 396px; margin: 0px auto; width: 800px;"></p> -<p>これは簡単な 2.5D のデモで，<a href="/en-US/docs/Web/HTML/Element/canvas">HTML5 Canvas</a> にレンダリングされた Firefox ロゴが右目と左目のビューに表示されるものです．VR HMDでデモを見ているときにキャンバスをクリックすると、デモはフルスクリーンになり、Firefox ロゴに近づけるようになります。あなたが動くと頭の動きに合わせて上下左右や回転してリアルに動きます。</p> +<p>これは簡単な 2.5D のデモで，<a href="/ja/docs/Web/HTML/Element/canvas">HTML5 Canvas</a> にレンダリングされた Firefox ロゴが右目と左目のビューに表示されるものです．VR HMDでデモを見ているときにキャンバスをクリックすると、デモはフルスクリーンになり、Firefox ロゴに近づけるようになります。あなたが動くと頭の動きに合わせて上下左右や回転してリアルに動きます。</p> <p>あなたが WebVR のコードがどう動いているかを簡単に確認できるように、デモは意図的にシンプルになるよう保持されています。API は十分シンプルであるため，単純な DOM ベースインターフェイスでも複雑な WebGL シーンでも、好きなアプリに WebVR 制御の移動を簡単に適用できます。</p> @@ -87,7 +87,7 @@ var ctx = myCanvas.getContext('2d'); var body = document.querySelector('body'); body.appendChild(myCanvas);</pre> -<p>次に、新しい <a href="/en-US/docs/Web/API/HTMLImageElement">image</a> を作成し、アプリの <a href="/en-US/docs/Games/Anatomy#Building_a_main_loop_in_JavaScript">main loop</a> である<code>draw()を実行する前に </code>image が <code>ロードされているかをチェックするために</code> {{event("load")}} イベントを使います:</p> +<p>次に、新しい <a href="/ja/docs/Web/API/HTMLImageElement">image</a> を作成し、アプリの <a href="/ja/docs/Games/Anatomy#Building_a_main_loop_in_JavaScript">main loop</a> である<code>draw()を実行する前に </code>image が <code>ロードされているかをチェックするために</code> {{event("load")}} イベントを使います:</p> <pre class="brush: js">var image = new Image(); image.src = 'firefox.png'; @@ -113,11 +113,11 @@ image.onload = draw;</pre> requestAnimationFrame(draw); }</pre> -<p><a href="/en-US/docs/Web/API/Window">window</a> の <code>WIDTH</code> と <code>HEIGHT</code> は各フレームでリサンプリングされ，次の設定に使われます:</p> +<p><a href="/ja/docs/Web/API/Window">window</a> の <code>WIDTH</code> と <code>HEIGHT</code> は各フレームでリサンプリングされ，次の設定に使われます:</p> <ul> <li>左右の目のビュー中心からの相対的に描画される画像を維持するのに使われる左右のオフセット値です。半分の幅のシーンのコピーを描画するので、各コピーの中心はそれぞれ、エッジの端から端までのキャンバス全体幅のちょうど1/4の幅になります。</li> - <li>キャンバスの <a href="/en-US/docs/Web/API/HTMLCanvasElement/width">width</a> と <a href="/en-US/docs/Web/API/HTMLCanvasElement/height">height</a>。</li> + <li>キャンバスの <a href="/ja/docs/Web/API/HTMLCanvasElement/width">width</a> と <a href="/ja/docs/Web/API/HTMLCanvasElement/height">height</a>。</li> </ul> <p>これによってブラウザウィンドウがリサイズされたとしても、シーンが正しくリサイズされます。</p> @@ -132,7 +132,7 @@ image.onload = draw;</pre> <p>これらの詳細は、後ほど解説します。</p> -<p>ループの最後に <a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame(draw)</a> を実行し<code>、draw()</code> ループが連続して呼び出されるようにします。</p> +<p>ループの最後に <a href="/ja/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame(draw)</a> を実行し<code>、draw()</code> ループが連続して呼び出されるようにします。</p> <h3 id="位置と向き情報の受取り">位置と向き情報の受取り</h3> @@ -244,7 +244,7 @@ image.onload = draw;</pre> <h3 id="フルスクリーン表示">フルスクリーン表示</h3> -<p>VRエフェクトはアプリを <a href="/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode">フルスクリーンモード</a> で実行すると非常に効果的です。ディスプレイのダブルクリックやボタンの押下のような、特定のイベントが発生した時に {{htmlelement("canvas")}} 要素をフルスクリーンにするための一般的な設定を説明します。</p> +<p>VRエフェクトはアプリを <a href="/ja/docs/Web/Guide/API/DOM/Using_full_screen_mode">フルスクリーンモード</a> で実行すると非常に効果的です。ディスプレイのダブルクリックやボタンの押下のような、特定のイベントが発生した時に {{htmlelement("canvas")}} 要素をフルスクリーンにするための一般的な設定を説明します。</p> <p>シンプルさを保つために、ここではキャンバスのクリック時に <code>fullScreen()</code> 関数を実行します:</p> diff --git a/files/ja/web/api/webvr_api/using_vr_controllers_with_webvr/index.html b/files/ja/web/api/webvr_api/using_vr_controllers_with_webvr/index.html index d2f568e849..ec74f3b17e 100644 --- a/files/ja/web/api/webvr_api/using_vr_controllers_with_webvr/index.html +++ b/files/ja/web/api/webvr_api/using_vr_controllers_with_webvr/index.html @@ -14,19 +14,19 @@ translation_of: Web/API/WebVR_API/Using_VR_controllers_with_WebVR --- <div>{{APIRef("WebVR API")}}</div> -<p class="summary">多くのWebVRハードウェアは、ヘッドセットとコントローラーがセットになっています。WebVRアプリにおいては、ヘッドセットとコントローラーは<a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API">Gamepad API</a>を通じて接続されます。中でも、<a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">Gamepad Extensions API</a>は、コントローラーの状態(<a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadPose">controller pose</a>)、触覚アクチュエータ(<a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadHapticActuator">haptic actuators</a>)などの情報を取得します。この記事では、その基礎となる部分を解説いたします。</p> +<p class="summary">多くのWebVRハードウェアは、ヘッドセットとコントローラーがセットになっています。WebVRアプリにおいては、ヘッドセットとコントローラーは<a href="/ja/docs/Web/API/Gamepad_API">Gamepad API</a>を通じて接続されます。中でも、<a href="/ja/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">Gamepad Extensions API</a>は、コントローラーの状態(<a href="/ja/docs/Web/API/GamepadPose">controller pose</a>)、触覚アクチュエータ(<a href="/ja/docs/Web/API/GamepadHapticActuator">haptic actuators</a>)などの情報を取得します。この記事では、その基礎となる部分を解説いたします。</p> <h2 id="The_WebVR_API">The WebVR API</h2> -<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API">WebVR API</a> は初期段階ではあるが、開発者がウェブベースのバーチャルリアリティー経験を生み出すことのできるとても興味深いウェブの新しい機能です。コンピュータとつながっているVRヘッドセット（VRディスプレイ）へのアクセスを与えることで，ディスプレイをスタートしたり、ストップする操作ができます．動きのデータ（例：方向や位置）へアクセスして得られたデータは，各アニメーションループのフレームごとにディスプレイをアップデートするためなどに使用されます。</p> +<p><a href="/ja/docs/Web/API/WebVR_API">WebVR API</a> は初期段階ではあるが、開発者がウェブベースのバーチャルリアリティー経験を生み出すことのできるとても興味深いウェブの新しい機能です。コンピュータとつながっているVRヘッドセット（VRディスプレイ）へのアクセスを与えることで，ディスプレイをスタートしたり、ストップする操作ができます．動きのデータ（例：方向や位置）へアクセスして得られたデータは，各アニメーションループのフレームごとにディスプレイをアップデートするためなどに使用されます。</p> -<p>この記事を読む前提として、Web VR API の基礎についてすでに知っていることを想定しています。 — もしまだ<a href="/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API">Using the WebVR API</a>にを読んでいない場合には、まずはそちらを読んでみましょう．その記事の中では，ブラウザ側がハードウェアの設定をサポートしたり，設定を要求したりすることについて詳しく説明しています。</p> +<p>この記事を読む前提として、Web VR API の基礎についてすでに知っていることを想定しています。 — もしまだ<a href="/ja/docs/Web/API/WebVR_API/Using_the_WebVR_API">Using the WebVR API</a>にを読んでいない場合には、まずはそちらを読んでみましょう．その記事の中では，ブラウザ側がハードウェアの設定をサポートしたり，設定を要求したりすることについて詳しく説明しています。</p> <h2 id="The_Gamepad_API">The Gamepad API</h2> -<p><a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a> はよくサポートされたAPIであり， これを使用することでPCにつながっているゲームパッドやコントローラーに開発者がアクセスすることができるようになります。また、ウェブアプリケーションをゲームパッドやコントローラーを通じて操作することもできるようになります。基本としてGamepad APIは、ゲームパッドオブジェクトとしてつながっているコントローラーに対してアクセスの許可を与えます。そしてどのボタンが押されているか、軸がどの方向に向いているかなどの情報を取得するよう要求します。</p> +<p><a href="/ja/docs/Web/API/Gamepad_API">Gamepad API</a> はよくサポートされたAPIであり， これを使用することでPCにつながっているゲームパッドやコントローラーに開発者がアクセスすることができるようになります。また、ウェブアプリケーションをゲームパッドやコントローラーを通じて操作することもできるようになります。基本としてGamepad APIは、ゲームパッドオブジェクトとしてつながっているコントローラーに対してアクセスの許可を与えます。そしてどのボタンが押されているか、軸がどの方向に向いているかなどの情報を取得するよう要求します。</p> -<p>Gamepad APIの基本的な使い方については、<a href="/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API">Using the Gamepad API</a>や<a href="/en-US/docs/Games/Techniques/Controls_Gamepad_API">Implementing controls using the Gamepad API</a>の中で詳しく知ることができます。</p> +<p>Gamepad APIの基本的な使い方については、<a href="/ja/docs/Web/API/Gamepad_API/Using_the_Gamepad_API">Using the Gamepad API</a>や<a href="/ja/docs/Games/Techniques/Controls_Gamepad_API">Implementing controls using the Gamepad API</a>の中で詳しく知ることができます。</p> <p>しかしながら，この記事では主に、位置、方向、触覚アクチュエーター（バイブレーション）などの高度なコントローラー情報へのアクセスのような、Gamepad Extensions APIで与えられたいくつかの新しい特徴に注目します。このAPIはとても新しく，Firefox 55+ BetaやFirefox Nightly のブラウザでのみデフォルトでWebVR APIがサポートされています。</p> @@ -162,7 +162,7 @@ window.addEventListener('gamepaddisconnected', function(e) { <p>実際のWebVRのデモで使用されたGamepad APIを見てみましょう。このデモは<a href="https://github.com/mdn/webvr-tests/tree/master/raw-webgl-controller-example">raw-webgl-controller-example</a> (<a href="https://mdn.github.io/webvr-tests/raw-webgl-controller-example/">see it live here also</a>).で見ることができます。</p> -<p>私達の<a href="https://github.com/mdn/webvr-tests/tree/master/raw-webgl-example">raw-webgl-example</a> (詳しくは <a href="/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API">Using the WebVR API</a> を御覧ください。)と同じ方法で、このデモにおいても回転する3D立方体をレンダリングしています。また、これをVRディスプレイへ投影することもできます。</p> +<p>私達の<a href="https://github.com/mdn/webvr-tests/tree/master/raw-webgl-example">raw-webgl-example</a> (詳しくは <a href="/ja/docs/Web/API/WebVR_API/Using_the_WebVR_API">Using the WebVR API</a> を御覧ください。)と同じ方法で、このデモにおいても回転する3D立方体をレンダリングしています。また、これをVRディスプレイへ投影することもできます。</p> <p>唯一の違いとしては、VRディスプレイへ投影モードでは、VRコントローラーを使って立方体を動かすことができます。（オリジナルのデモ動画では、VRヘッドセットを動かすことで、立方体を動かすことができる。）</p> @@ -261,8 +261,8 @@ if(gp) { <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a></li> - <li><a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a></li> - <li><a href="/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API">Using the WebVR API</a></li> - <li><a href="/en-US/docs/Games/Techniques/Controls_Gamepad_API">Implementing controls using the Gamepad API</a></li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API</a></li> + <li><a href="/ja/docs/Web/API/Gamepad_API">Gamepad API</a></li> + <li><a href="/ja/docs/Web/API/WebVR_API/Using_the_WebVR_API">Using the WebVR API</a></li> + <li><a href="/ja/docs/Games/Techniques/Controls_Gamepad_API">Implementing controls using the Gamepad API</a></li> </ul> diff --git a/files/ja/web/api/window/captureevents/index.html b/files/ja/web/api/window/captureevents/index.html index 72c4cc67d4..df242de4b1 100644 --- a/files/ja/web/api/window/captureevents/index.html +++ b/files/ja/web/api/window/captureevents/index.html @@ -48,7 +48,7 @@ function page_click() { <p>ユーザーの操作によって DOM 内で発生したイベント (ボタンのクリックや現在の文書からのフォーカス移動など) は、通常、イベントを開始したオブジェクトに到達する前に、まず高レベルの <a href="/ja/docs/Web/API/Window"><code>window</code></a> や <a href="/ja/docs/Web/API/Document"><code>document</code></a> オブジェクトを通過します。</p> -<p><a href="/en-US/docs/Web/API/Window"><code>window</code></a> の <code>captureEvents()</code> メソッドを呼び出すと、指定した種類のイベント (例えば <code>Event.CLICK</code>) は、階層内の「下位」オブジェクトに通過しなくなります。イベントを通常のように「バブルアップ」させるためには、 <a href="/en-US/docs/Web/API/Window/releaseEvents"><code>window.releaseEvents()</code></a> ({{deprecated_inline}}) を window 上で呼び出し、イベントをトラップしないようにしなければなりません。</p> +<p><a href="/ja/docs/Web/API/Window"><code>window</code></a> の <code>captureEvents()</code> メソッドを呼び出すと、指定した種類のイベント (例えば <code>Event.CLICK</code>) は、階層内の「下位」オブジェクトに通過しなくなります。イベントを通常のように「バブルアップ」させるためには、 <a href="/ja/docs/Web/API/Window/releaseEvents"><code>window.releaseEvents()</code></a> ({{deprecated_inline}}) を window 上で呼び出し、イベントをトラップしないようにしなければなりません。</p> <p>なお、次の構文を使用することでこのメソッドにイベントのリストを渡すことができます。 <code>window.captureEvents(Event.KEYPRESS | Event.KEYDOWN | Event.KEYUP)</code>.</p> diff --git a/files/ja/web/api/window/copy_event/index.html b/files/ja/web/api/window/copy_event/index.html index 07ac7b76c6..2c00d61d45 100644 --- a/files/ja/web/api/window/copy_event/index.html +++ b/files/ja/web/api/window/copy_event/index.html @@ -37,7 +37,7 @@ translation_of: Web/API/Window/copy_event </tbody> </table> -<p>このイベントの本来の対象は、コピー操作の意図の対象である {{domxref("Element")}} です。このイベントを {{domxref("Window")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントの局面について完全な詳細は、 <a href="/en-US/docs/Web/API/Element/copy_event">Element: copy イベント</a>を参照してください。</p> +<p>このイベントの本来の対象は、コピー操作の意図の対象である {{domxref("Element")}} です。このイベントを {{domxref("Window")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントの局面について完全な詳細は、 <a href="/ja/docs/Web/API/Element/copy_event">Element: copy イベント</a>を参照してください。</p> <h2 id="Examples" name="Examples">例</h2> diff --git a/files/ja/web/api/window/customelements/index.html b/files/ja/web/api/window/customelements/index.html index 68440b9170..3477445e1e 100644 --- a/files/ja/web/api/window/customelements/index.html +++ b/files/ja/web/api/window/customelements/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Window/customElements --- <div>{{APIRef}}</div> -<p><span class="seoSummary">{{domxref("Window")}} インターフェイスの読み取り専用 <code>customElements</code> プロパティは、 新しい<a href="/en-US/docs/Web/Web_Components/Using_custom_elements">カスタムエレメント</a>を登録し、かつ以前に登録したカスタムエレメントに関する情報を取得する事ができる {{domxref("CustomElementRegistry")}} オブジェクトへのリファレンスを返します。</span></p> +<p><span class="seoSummary">{{domxref("Window")}} インターフェイスの読み取り専用 <code>customElements</code> プロパティは、 新しい<a href="/ja/docs/Web/Web_Components/Using_custom_elements">カスタムエレメント</a>を登録し、かつ以前に登録したカスタムエレメントに関する情報を取得する事ができる {{domxref("CustomElementRegistry")}} オブジェクトへのリファレンスを返します。</span></p> <h2 id="Syntax" name="Syntax">構文</h2> diff --git a/files/ja/web/api/window/dump/index.html b/files/ja/web/api/window/dump/index.html index 44c2365fb0..ea040f91ea 100644 --- a/files/ja/web/api/window/dump/index.html +++ b/files/ja/web/api/window/dump/index.html @@ -32,11 +32,11 @@ dump(<em>message</em>); <h2 id="Notes" name="Notes">注記</h2> -<p><code>dump</code>() の一般的な使い方は、JavaScript のデバッグです。Firefox のプロセスが <code>-console</code> オプション付きで開始された場合、<code>dump</code>() に渡されたメッセージは、システムコンソール (ネイティブのコンソール) に送信されます。<code>-console</code> オプションが指定されていない場合、stderr に出力されます。dump() からの出力は <a href="/docs/Tools/Browser_Console">ブラウザコンソール</a> に送信されません。<a href="/docs/Tools/Browser_Console">ブラウザコンソール</a> への出力は、<a href="/docs/Web/API/Console.log">console.log()</a> を使用してください。特権コードは、<code><a href="/docs/Components.utils.reportError" title="Components.utils.reportError">Components.utils.reportError</a></code> と <code><a href="/docs/XPCOM_Interface_Reference/nsIConsoleService" title="nsIConsoleService">nsIConsoleService</a></code> を使用してメッセージを <a href="/docs/Error_Console" title="Error_Console">エラーコンソール</a> / <a href="/docs/Tools/Browser_Console">ブラウザコンソール</a> にログ出力することもできます。</p> +<p><code>dump</code>() の一般的な使い方は、JavaScript のデバッグです。Firefox のプロセスが <code>-console</code> オプション付きで開始された場合、<code>dump</code>() に渡されたメッセージは、システムコンソール (ネイティブのコンソール) に送信されます。<code>-console</code> オプションが指定されていない場合、stderr に出力されます。dump() からの出力は <a href="/ja/docs/Tools/Browser_Console">ブラウザコンソール</a> に送信されません。<a href="/ja/docs/Tools/Browser_Console">ブラウザコンソール</a> への出力は、<a href="/ja/docs/Web/API/Console.log">console.log()</a> を使用してください。特権コードは、<code><a href="/ja/docs/Components.utils.reportError" title="Components.utils.reportError">Components.utils.reportError</a></code> と <code><a href="/ja/docs/XPCOM_Interface_Reference/nsIConsoleService" title="nsIConsoleService">nsIConsoleService</a></code> を使用してメッセージを <a href="/ja/docs/Error_Console" title="Error_Console">エラーコンソール</a> / <a href="/ja/docs/Tools/Browser_Console">ブラウザコンソール</a> にログ出力することもできます。</p> -<p><code>dump</code>() は、JavaScript で実装された XPCOM コンポーネントでも使用できます。これは、{{domxref("window")}} がコンポーネント内のグローバルオブジェクトでなくても使えます。また、<a href="/docs/Components.utils.Sandbox#Methods_available_on_the_Sandbox_object" title="Methods available on the Sandbox object">sandboxes</a> 内で明示的に使用可能にすることもできます。しかし、この <code>dump</code> の使用は、後述の設定に影響せず、常に表示されます。この設定を自分で確認するか、独自のデバッグ設定で、多くのデバッグコンテンツを、これらに興味のないユーザのコンソールに送信されないようにすることをおすすめします。ただし、XPCOM コンポーネントからの <code>dump</code> 出力は <code>stderr</code> へ送られますが、別の場所から呼び出された <code>dump</code> は <code>stdout</code> へ出力されるので注意してください。</p> +<p><code>dump</code>() は、JavaScript で実装された XPCOM コンポーネントでも使用できます。これは、{{domxref("window")}} がコンポーネント内のグローバルオブジェクトでなくても使えます。また、<a href="/ja/docs/Components.utils.Sandbox#Methods_available_on_the_Sandbox_object" title="Methods available on the Sandbox object">sandboxes</a> 内で明示的に使用可能にすることもできます。しかし、この <code>dump</code> の使用は、後述の設定に影響せず、常に表示されます。この設定を自分で確認するか、独自のデバッグ設定で、多くのデバッグコンテンツを、これらに興味のないユーザのコンソールに送信されないようにすることをおすすめします。ただし、XPCOM コンポーネントからの <code>dump</code> 出力は <code>stderr</code> へ送られますが、別の場所から呼び出された <code>dump</code> は <code>stdout</code> へ出力されるので注意してください。</p> -<p><a href="/docs/Gecko" title="Gecko">Gecko</a> の <code>dump()</code> は <strong>既定で無効</strong> です。実行しても何も起こらず、エラーも発生しません。<code>dump</code> 出力を見るには、<a href="http://kb.mozillazine.org/About:config">about:config</a> ページか <a href="http://kb.mozillazine.org/User.js_file">user.js ファイル</a> で、<code>browser.dom.window.dump.enabled</code> 設定の値を <code>true</code> にしなければなりません。注記: この設定は既定では <code>about:config</code> のリストに表示されないので、新たに作成してください (about:config ページのコンテンツ領域を右クリックし、"新規作成" から "真偽値" を選択します)。</p> +<p><a href="/ja/docs/Gecko" title="Gecko">Gecko</a> の <code>dump()</code> は <strong>既定で無効</strong> です。実行しても何も起こらず、エラーも発生しません。<code>dump</code> 出力を見るには、<a href="http://kb.mozillazine.org/About:config">about:config</a> ページか <a href="http://kb.mozillazine.org/User.js_file">user.js ファイル</a> で、<code>browser.dom.window.dump.enabled</code> 設定の値を <code>true</code> にしなければなりません。注記: この設定は既定では <code>about:config</code> のリストに表示されないので、新たに作成してください (about:config ページのコンテンツ領域を右クリックし、"新規作成" から "真偽値" を選択します)。</p> <p>Windows では、dump の出力を見るにはコンソールを開く必要があります。まだコンソールを開いていなければ、一旦アプリケーションを閉じ、コマンドライン引数に <code>-console</code> を追加して再度開いてください。アプリケーションと同時にコンソールが開きます。または、<code>-attach-console</code> を追加すると既存のコンソールを使用します。他のオペレーティングシステムでは、ターミナルからプリケーションを開くだけです。</p> diff --git a/files/ja/web/api/window/frameelement/index.html b/files/ja/web/api/window/frameelement/index.html index 77db39f5a3..b4bb242223 100644 --- a/files/ja/web/api/window/frameelement/index.html +++ b/files/ja/web/api/window/frameelement/index.html @@ -23,7 +23,7 @@ translation_of: Web/API/Window/frameElement </ul> <div class="note"> -<p>このプロパティの名前にもかかわらず、これは{{HTMLElement("object")}}、{{HTMLElement("iframe")}}、または <a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/embed"><embed></a>を含むすべての埋め込みポイント内に埋め込まれた文書の役に立ちます。</p> +<p>このプロパティの名前にもかかわらず、これは{{HTMLElement("object")}}、{{HTMLElement("iframe")}}、または <a href="/ja/docs/Web/HTML/Element/embed"><embed></a>を含むすべての埋め込みポイント内に埋め込まれた文書の役に立ちます。</p> </div> <h2 id="例">例</h2> diff --git a/files/ja/web/api/window/gamepadconnected_event/index.html b/files/ja/web/api/window/gamepadconnected_event/index.html index 0aeeaa4b2a..933543f666 100644 --- a/files/ja/web/api/window/gamepadconnected_event/index.html +++ b/files/ja/web/api/window/gamepadconnected_event/index.html @@ -75,7 +75,7 @@ window.addEventListener("gamepadconnected", function( event ) { <h2 id="関連するイベント">関連するイベント</h2> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/Reference/Events/gamepaddisconnected">gamepaddisconnected</a></li> + <li><a href="/ja/docs/Web/Reference/Events/gamepaddisconnected">gamepaddisconnected</a></li> </ul> <h2 id="参照">参照</h2> diff --git a/files/ja/web/api/window/gamepaddisconnected_event/index.html b/files/ja/web/api/window/gamepaddisconnected_event/index.html index e6c138a353..028f0c684a 100644 --- a/files/ja/web/api/window/gamepaddisconnected_event/index.html +++ b/files/ja/web/api/window/gamepaddisconnected_event/index.html @@ -64,7 +64,7 @@ translation_of: Web/API/Window/gamepaddisconnected_event <h2 id="関連するイベント">関連するイベント</h2> <ul> - <li><a href="https://developer.mozilla.org/docs/Web/Reference/Events/gamepadconnected">gamepadconnected</a></li> + <li><a href="/ja/docs/Web/Reference/Events/gamepadconnected">gamepadconnected</a></li> </ul> <h2 id="参照">参照</h2> diff --git a/files/ja/web/api/window/localstorage/index.html b/files/ja/web/api/window/localstorage/index.html index e7d66703c1..a223d60efe 100644 --- a/files/ja/web/api/window/localstorage/index.html +++ b/files/ja/web/api/window/localstorage/index.html @@ -31,7 +31,7 @@ translation_of: Web/API/Window/localStorage <dl> <dt><code>SecurityError</code></dt> - <dd>リクエストがポリシーの決定に反している、またはオリジンが<a href="https://developer.mozilla.org/ja/docs/Web/Security/Same-origin_policy#Definition_of_an_origin">妥当な scheme/host/port tuple</a>でない (これは例えば、オリジンが <code>file:</code> や <code>data:</code> スキームを使うときに起こります)。例えば、ユーザーがブラウザー設定で特定オリジンへのデータ永続化のパーミッションを拒否していることもあります。</dd> + <dd>リクエストがポリシーの決定に反している、またはオリジンが<a href="/ja/docs/Web/Security/Same-origin_policy#Definition_of_an_origin">妥当な scheme/host/port tuple</a>でない (これは例えば、オリジンが <code>file:</code> や <code>data:</code> スキームを使うときに起こります)。例えば、ユーザーがブラウザー設定で特定オリジンへのデータ永続化のパーミッションを拒否していることもあります。</dd> </dl> <h2 id="Example" name="Example">例</h2> diff --git a/files/ja/web/api/window/location/index.html b/files/ja/web/api/window/location/index.html index 6eaee97b69..d7df9a6061 100644 --- a/files/ja/web/api/window/location/index.html +++ b/files/ja/web/api/window/location/index.html @@ -43,7 +43,7 @@ location = "http://www.mozilla.org"; <h3 id="Example_3" name="Example_3">例 #3</h3> -<p>次の例を見てみましょう。これは、 <code>location.pathname</code> の値をハッシュに挿入するため、 <a href="/docs/Web/API/Location.replace"><code>replace()</code></a> メソッドを使用してページを再読み込みします。</p> +<p>次の例を見てみましょう。これは、 <code>location.pathname</code> の値をハッシュに挿入するため、 <a href="/ja/docs/Web/API/Location.replace"><code>replace()</code></a> メソッドを使用してページを再読み込みします。</p> <pre class="brush: js">function reloadPageWithHash() { var initialPage = location.pathname; @@ -205,6 +205,6 @@ span.intLink { <ul> <li>返値のインターフェイス: {{domxref("Location")}}</li> <li>類似の情報、ただし document に付属: {{domxref("Document.location")}}</li> - <li><a href="/en-US/docs/Web/API/History_API">ブラウザーの履歴の操作</a></li> + <li><a href="/ja/docs/Web/API/History_API">ブラウザーの履歴の操作</a></li> <li>{{event("hashchange")}}</li> </ul> diff --git a/files/ja/web/api/window/postmessage/index.html b/files/ja/web/api/window/postmessage/index.html index fa23fda6d6..3d63f30ee0 100644 --- a/files/ja/web/api/window/postmessage/index.html +++ b/files/ja/web/api/window/postmessage/index.html @@ -37,7 +37,7 @@ translation_of: Web/API/Window/postMessage </ul> </dd> <dt><code>message</code></dt> - <dd>他のウィンドウに送られるデータ。データは <a href="https://developer.mozilla.org/ja/docs/DOM/The_structured_clone_algorithm">the structured clone algorithm</a> に従ってシリアル化されます。つまり、手動でシリアル化することなく様々なデータオブジェクトを渡すことができます。</dd> + <dd>他のウィンドウに送られるデータ。データは <a href="/ja/docs/DOM/The_structured_clone_algorithm">the structured clone algorithm</a> に従ってシリアル化されます。つまり、手動でシリアル化することなく様々なデータオブジェクトを渡すことができます。</dd> <dt><code>targetOrigin</code></dt> <dd>イベントを配信する <code>otherWindow</code> のオリジンを <code>"*"</code> というリテラル文字列（制限しないことを示します）か URI のいずれかで指定します。もしイベントの配信が予約される時点で、<code>targetWindow</code> のドキュメントのスキーマ、ホスト名、あるいはポートが <code>targetOrigin</code> で指定されたものにマッチしない場合、そのイベントは配信されません。3 つすべてがマッチした場合にだけイベントが配信されます。この仕組みはメッセージがどこに送られるかを制御できるようにしています。例えば <code>postMessage</code> をパスワードを送るために利用する場合、悪意のある第三者によるパスワードの傍受を防ぐため、そのメッセージを受け取るべき受信者のオリジンと一致する URI をこの引数に指定しておくことが非常に重要になります。 <strong>送信先ウィンドウのドキュメントがどこに配置されるのかを知っている場合、<code>*</code> ではなく具体的な <code>targetOrigin</code> を指定してください。具体的なターゲットを指定しない場合、相手が悪意を持ったサイトであっても、送信したデータが公開されることを意味します。</strong></dd> <dt><code><em><strong>transfer</strong></em></code> {{optional_Inline}}</dt> diff --git a/files/ja/web/api/window/vrdisplayconnect_event/index.html b/files/ja/web/api/window/vrdisplayconnect_event/index.html index 2330451d67..f403f1eb10 100644 --- a/files/ja/web/api/window/vrdisplayconnect_event/index.html +++ b/files/ja/web/api/window/vrdisplayconnect_event/index.html @@ -6,7 +6,7 @@ translation_of: Web/API/Window/vrdisplayconnect_event <div>{{APIRef}}{{SeeCompatTable}}</div> <div> -<p><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> の <strong><code>vrdisplayconnected</code></strong> イベントは，コンピュータに互換性のあるVRデバイスが接続された時に発火します．</p> +<p><a href="/ja/docs/Web/API/WebVR_API">WebVR API</a> の <strong><code>vrdisplayconnected</code></strong> イベントは，コンピュータに互換性のあるVRデバイスが接続された時に発火します．</p> </div> <table class="properties"> @@ -64,6 +64,6 @@ translation_of: Web/API/Window/vrdisplayconnect_event <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> —Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/window/vrdisplaydisconnect_event/index.html b/files/ja/web/api/window/vrdisplaydisconnect_event/index.html index ca8cf7304a..ff891d2e77 100644 --- a/files/ja/web/api/window/vrdisplaydisconnect_event/index.html +++ b/files/ja/web/api/window/vrdisplaydisconnect_event/index.html @@ -6,7 +6,7 @@ translation_of: Web/API/Window/vrdisplaydisconnect_event <div>{{APIRef}}{{SeeCompatTable}}</div> <div> -<p><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> の <strong><code>vrdisplaydisconnected</code></strong> イベントは，互換性のあるVRデバイスがコンピュータから接続解除された時に発火します．</p> +<p><a href="/ja/docs/Web/API/WebVR_API">WebVR API</a> の <strong><code>vrdisplaydisconnected</code></strong> イベントは，互換性のあるVRデバイスがコンピュータから接続解除された時に発火します．</p> </div> <table class="properties"> @@ -32,14 +32,14 @@ translation_of: Web/API/Window/vrdisplaydisconnect_event <h2 id="例">例</h2> -<p>You can use the <code>vrdisplaydisconnect</code> event in an <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> method:</p> +<p>You can use the <code>vrdisplaydisconnect</code> event in an <code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> method:</p> <pre class="brush: js">window.addEventListener('vrdisplaydisconnect', function() { info.textContent = 'Display disconnected.'; reportDisplays(); });</pre> -<p>Or use the <code><a href="/en-US/docs/Web/API/Window/onvrdisplaydisconnect">onvrdisplaydisconnect</a></code> event handler property:</p> +<p>Or use the <code><a href="/ja/docs/Web/API/Window/onvrdisplaydisconnect">onvrdisplaydisconnect</a></code> event handler property:</p> <pre class="brush: js">window.onvrdisplaydisconnect = function() { info.textContent = 'Display disconnected.'; @@ -72,6 +72,6 @@ translation_of: Web/API/Window/vrdisplaydisconnect_event <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/window/vrdisplayfocus_event/index.html b/files/ja/web/api/window/vrdisplayfocus_event/index.html index 61ab54e59a..02ec7da713 100644 --- a/files/ja/web/api/window/vrdisplayfocus_event/index.html +++ b/files/ja/web/api/window/vrdisplayfocus_event/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Window/vrdisplayfocus_event <div>{{APIRef("Window")}}</div> <div> -<p><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> の <strong><code>vrdisplayfocus</code></strong> イベントは VR ディスプレイへのプレゼンテーションがぼやけた後に再開されたときに発生します。</p> +<p><a href="/ja/docs/Web/API/WebVR_API">WebVR API</a> の <strong><code>vrdisplayfocus</code></strong> イベントは VR ディスプレイへのプレゼンテーションがぼやけた後に再開されたときに発生します。</p> </div> <table class="properties"> @@ -31,21 +31,21 @@ translation_of: Web/API/Window/vrdisplayfocus_event </tr> <tr> <th scope="row">Event handler property</th> - <td><code><a href="/en-US/docs/Web/API/Window/onvrdisplayfocus">onvrdisplayfocus</a></code></td> + <td><code><a href="/ja/docs/Web/API/Window/onvrdisplayfocus">onvrdisplayfocus</a></code></td> </tr> </tbody> </table> <h2 id="例">例</h2> -<p><code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> メソッドで <code>vrdisplayfocus</code> イベントを使用できます:</p> +<p><code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> メソッドで <code>vrdisplayfocus</code> イベントを使用できます:</p> <pre class="brush: js notranslate">window.addEventListener('vrdisplayfocus', function() { info.textContent = 'Display focused.'; reportDisplays(); });</pre> -<p>または、 <code><a href="/en-US/docs/Web/API/Window/onvrdisplayfocus">onvrdisplayfocus</a></code> イベントハンドラープロパティを使用します:</p> +<p>または、 <code><a href="/ja/docs/Web/API/Window/onvrdisplayfocus">onvrdisplayfocus</a></code> イベントハンドラープロパティを使用します:</p> <pre class="brush: js notranslate">window.onvrdisplayfocus = function() { info.textContent = 'Display focused.'; @@ -78,6 +78,6 @@ translation_of: Web/API/Window/vrdisplayfocus_event <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a></li> <li><a href="http://mozvr.com/">MozVr.com</a> — demos, downloads, and other resources from the Mozilla VR team.</li> </ul> diff --git a/files/ja/web/api/window/vrdisplaypresentchange_event/index.html b/files/ja/web/api/window/vrdisplaypresentchange_event/index.html index 4b70220959..e8381c3db4 100644 --- a/files/ja/web/api/window/vrdisplaypresentchange_event/index.html +++ b/files/ja/web/api/window/vrdisplaypresentchange_event/index.html @@ -6,7 +6,7 @@ translation_of: Web/API/Window/vrdisplaypresentchange_event <div>{{APIRef}}{{SeeCompatTable}}</div> <div> -<p><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> の <strong><code>vrdisplaypresentchange</code></strong> イベントは，VRデバイスの表示状態が変化したときに発火します — つまり，表示状態から非表示になったとき，あるいはその逆のケースです．</p> +<p><a href="/ja/docs/Web/API/WebVR_API">WebVR API</a> の <strong><code>vrdisplaypresentchange</code></strong> イベントは，VRデバイスの表示状態が変化したときに発火します — つまり，表示状態から非表示になったとき，あるいはその逆のケースです．</p> </div> <table class="properties"> @@ -64,6 +64,6 @@ translation_of: Web/API/Window/vrdisplaypresentchange_event <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> </ul> diff --git a/files/ja/web/api/worker/onmessageerror/index.html b/files/ja/web/api/worker/onmessageerror/index.html index 6c94a56b93..d008eb9503 100644 --- a/files/ja/web/api/worker/onmessageerror/index.html +++ b/files/ja/web/api/worker/onmessageerror/index.html @@ -46,5 +46,5 @@ translation_of: Web/API/Worker/onmessageerror <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li> + <li><a href="/ja/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li> </ul> diff --git a/files/ja/web/api/workerglobalscope/index.html b/files/ja/web/api/workerglobalscope/index.html index 448de05578..51a242870c 100644 --- a/files/ja/web/api/workerglobalscope/index.html +++ b/files/ja/web/api/workerglobalscope/index.html @@ -61,9 +61,9 @@ translation_of: Web/API/WorkerGlobalScope <dt>{{domxref("WorkerGlobalScope.onclose")}} {{non-standard_inline}}</dt> <dd>{{event("close")}} イベントが発生したときに呼び出されるコードを表す {{event("Event_handlers", "event handler")}}。</dd> <dt>{{domxref("WorkerGlobalScope.onrejectionhandled")}} {{non-standard_inline}}</dt> - <dd><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object is used for deferred and asynchronous computations. A Promise represents an operation that hasn't completed yet, but is expected in the future."><code>Promise</code></a> の rejection イベントを制御するためのイベントハンドラ。</dd> + <dd><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object is used for deferred and asynchronous computations. A Promise represents an operation that hasn't completed yet, but is expected in the future."><code>Promise</code></a> の rejection イベントを制御するためのイベントハンドラ。</dd> <dt>{{domxref("WorkerGlobalScope.onunhandledrejection")}} {{non-standard_inline}}</dt> - <dd>制御されていない <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object is used for deferred and asynchronous computations. A Promise represents an operation that hasn't completed yet, but is expected in the future."><code>Promise</code></a> の rejection イベントのためのイベントハンドラ。</dd> + <dd>制御されていない <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object is used for deferred and asynchronous computations. A Promise represents an operation that hasn't completed yet, but is expected in the future."><code>Promise</code></a> の rejection イベントのためのイベントハンドラ。</dd> </dl> <h2 id="メソッド">メソッド</h2> diff --git a/files/ja/web/api/workerlocation/index.html b/files/ja/web/api/workerlocation/index.html index ad6635135a..2a28a7cc35 100644 --- a/files/ja/web/api/workerlocation/index.html +++ b/files/ja/web/api/workerlocation/index.html @@ -72,5 +72,5 @@ translation_of: Web/API/WorkerLocation <ul> <li>Other Worker-related interfaces: {{domxref("Worker")}}, {{domxref("WorkerNavigator")}}, and {{domxref("WorkerGlobalScope")}}.</li> - <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li> + <li><a href="/ja/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li> </ul> diff --git a/files/ja/web/api/worklet/index.html b/files/ja/web/api/worklet/index.html index 547d5f9396..17d8d2b383 100644 --- a/files/ja/web/api/worklet/index.html +++ b/files/ja/web/api/worklet/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Worklet --- <div>{{APIRef("Worklets")}}{{SeeCompatTable}}</div> -<p class="summary"><span class="seoSummary">The <strong><code>Worklet</code></strong> インタフェースは軽量な {{domxref("Worker", "Web Workers")}} を提供し、開発者がレンダリングパイプラインの低水準な部分をコントロールできるようになります。Worklet では</span>グラフィックや音声処理といった、性能を必要とする処理を <span class="seoSummary">JavaScript や </span><a href="/en-US/docs/WebAssembly">WebAssembly</a> を使って記述できます。</p> +<p class="summary"><span class="seoSummary">The <strong><code>Worklet</code></strong> インタフェースは軽量な {{domxref("Worker", "Web Workers")}} を提供し、開発者がレンダリングパイプラインの低水準な部分をコントロールできるようになります。Worklet では</span>グラフィックや音声処理といった、性能を必要とする処理を <span class="seoSummary">JavaScript や </span><a href="/ja/docs/WebAssembly">WebAssembly</a> を使って記述できます。</p> <h2 id="Worklet_の種類">Worklet の種類</h2> @@ -51,7 +51,7 @@ translation_of: Web/API/Worklet </tbody> </table> -<p class="note"> <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> を用いた 3D グラフィックスには Worklet を使用できません。その代わりにGLSLで記述した頂点シェーダとフラグメントシェーダを 使用します。これらのシェーダコードはグラフィックスカードの上で動作します。</p> +<p class="note"> <a href="/ja/docs/Web/API/WebGL_API">WebGL</a> を用いた 3D グラフィックスには Worklet を使用できません。その代わりにGLSLで記述した頂点シェーダとフラグメントシェーダを 使用します。これらのシェーダコードはグラフィックスカードの上で動作します。</p> <h2 id="属性">属性</h2> diff --git a/files/ja/web/api/xmldocument/index.html b/files/ja/web/api/xmldocument/index.html index 97ba537bbd..8bb7c71de1 100644 --- a/files/ja/web/api/xmldocument/index.html +++ b/files/ja/web/api/xmldocument/index.html @@ -64,5 +64,5 @@ translation_of: Web/API/XMLDocument <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index.</a></li> + <li><a href="/ja/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index.</a></li> </ul> diff --git a/files/ja/web/api/xmlhttprequest/channel/index.html b/files/ja/web/api/xmlhttprequest/channel/index.html index bd71478736..432e55c33a 100644 --- a/files/ja/web/api/xmlhttprequest/channel/index.html +++ b/files/ja/web/api/xmlhttprequest/channel/index.html @@ -16,4 +16,4 @@ translation_of: Web/API/XMLHttpRequest/channel --- <p>{{draft}}{{APIRef('XMLHttpRequest')}}</p> -<p>XMLHttpRequest.channel は リクエストを送信するときにオブジェクトによって使用される<code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIChannel" title="">nsIChannel</a></code> です。channelがまだ作られていない場合、これは <code>null</code> です。マルチパートリクエストのときは、これは最初のchannelであり、マルチパートリクエストの異なるパートのことではありません。<strong>アクセスするには、権限昇格が必要です。</strong></p> +<p>XMLHttpRequest.channel は リクエストを送信するときにオブジェクトによって使用される<code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIChannel" title="">nsIChannel</a></code> です。channelがまだ作られていない場合、これは <code>null</code> です。マルチパートリクエストのときは、これは最初のchannelであり、マルチパートリクエストの異なるパートのことではありません。<strong>アクセスするには、権限昇格が必要です。</strong></p> diff --git a/files/ja/web/api/xmlhttprequest/mozresponsearraybuffer/index.html b/files/ja/web/api/xmlhttprequest/mozresponsearraybuffer/index.html index 2193377076..82f8d021aa 100644 --- a/files/ja/web/api/xmlhttprequest/mozresponsearraybuffer/index.html +++ b/files/ja/web/api/xmlhttprequest/mozresponsearraybuffer/index.html @@ -17,4 +17,4 @@ translation_of: Web/API/XMLHttpRequest/mozResponseArrayBuffer <p>Gecko 6 で廃止</p> </div> -<p><span class="seoSummary">リクエストに対する <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer"><code>ArrayBuffer</code></a> 応答であり、 JavaScript タイプの配列として記述されます。</span> リクエストが成功しなかった場合、またはリクエストがまだ送信されてない場合、これは <code>NULL</code> です。</p> +<p><span class="seoSummary">リクエストに対する <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer"><code>ArrayBuffer</code></a> 応答であり、 JavaScript タイプの配列として記述されます。</span> リクエストが成功しなかった場合、またはリクエストがまだ送信されてない場合、これは <code>NULL</code> です。</p> diff --git a/files/ja/web/api/xmlhttprequest/open/index.html b/files/ja/web/api/xmlhttprequest/open/index.html index 29b34672b3..56f4408c98 100644 --- a/files/ja/web/api/xmlhttprequest/open/index.html +++ b/files/ja/web/api/xmlhttprequest/open/index.html @@ -27,7 +27,7 @@ translation_of: Web/API/XMLHttpRequest/open <dl> <dt><code>method</code></dt> - <dd>使用する <a href="/docs/Web/HTTP/Methods">HTTP リクエストメソッド</a>です。 <code>"GET"</code>, <code>"POST"</code>, <code>"PUT"</code>, <code>"DELETE"</code>, など。 HTTP(S) 以外の URL では無視されます。</dd> + <dd>使用する <a href="/ja/docs/Web/HTTP/Methods">HTTP リクエストメソッド</a>です。 <code>"GET"</code>, <code>"POST"</code>, <code>"PUT"</code>, <code>"DELETE"</code>, など。 HTTP(S) 以外の URL では無視されます。</dd> <dt><code>url</code></dt> <dd>リクエストを送信する URL を表す {{domxref("DOMString")}}。</dd> <dt><code>async</code> {{optional_inline}}</dt> @@ -66,6 +66,6 @@ translation_of: Web/API/XMLHttpRequest/open <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest の使用</a></li> + <li><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest の使用</a></li> <li>関連する {{domxref("XMLHttpRequest")}} のメソッド: {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}},{{domxref("XMLHttpRequest.send", "send()")}}, {{domxref("XMLHttpRequest.abort", "abort()")}}</li> </ul> diff --git a/files/ja/web/api/xmlhttprequest/response/index.html b/files/ja/web/api/xmlhttprequest/response/index.html index 7175b77685..76e5e90fa3 100644 --- a/files/ja/web/api/xmlhttprequest/response/index.html +++ b/files/ja/web/api/xmlhttprequest/response/index.html @@ -88,6 +88,6 @@ function load(url, callback) { <h2 id="関連">関連</h2> <ul> - <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li> <li>Getting text and HTML/XML data: {{domxref("XMLHttpRequest.responseText")}} and {{domxref("XMLHttpRequest.responseXML")}}</li> </ul> diff --git a/files/ja/web/api/xmlhttprequest/status/index.html b/files/ja/web/api/xmlhttprequest/status/index.html index d2a63fd2a0..6b42a3ceb2 100644 --- a/files/ja/web/api/xmlhttprequest/status/index.html +++ b/files/ja/web/api/xmlhttprequest/status/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/XMLHttpRequest/status --- <div>{{APIRef('XMLHttpRequest')}}</div> -<p><code><strong>XMLHttpRequest.status</strong></code> プロパティは読み取り専用で、 <code>XMLHttpRequest</code> のレスポンスにおける数値の HTTP <a href="/en-US/docs/Web/HTTP/Status">ステータスコード</a>を返します。</p> +<p><code><strong>XMLHttpRequest.status</strong></code> プロパティは読み取り専用で、 <code>XMLHttpRequest</code> のレスポンスにおける数値の HTTP <a href="/ja/docs/Web/HTTP/Status">ステータスコード</a>を返します。</p> diff --git a/files/ja/web/api/xmlhttprequest/using_xmlhttprequest_in_ie6/index.html b/files/ja/web/api/xmlhttprequest/using_xmlhttprequest_in_ie6/index.html index 8d5a05c885..97b27d7c4f 100644 --- a/files/ja/web/api/xmlhttprequest/using_xmlhttprequest_in_ie6/index.html +++ b/files/ja/web/api/xmlhttprequest/using_xmlhttprequest_in_ie6/index.html @@ -6,7 +6,7 @@ tags: - Web Standards translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest_in_IE6 --- -<p><a href="/en/DOM/XMLHttpRequest" title="en/DOM/XMLHttpRequest">XMLHttpRequest</a> は、 Microsoft によって Internet Explorer 5.0 で ActiveX control として最初に導入されました。ただし、 IE7 およびその他のブラウザーでは XMLHttpRequest はネイティブ JavaScript オブジェクトです。</p> +<p><a href="/ja/DOM/XMLHttpRequest" title="en/DOM/XMLHttpRequest">XMLHttpRequest</a> は、 Microsoft によって Internet Explorer 5.0 で ActiveX control として最初に導入されました。ただし、 IE7 およびその他のブラウザーでは XMLHttpRequest はネイティブ JavaScript オブジェクトです。</p> <p>最近のすべてのブラウザーでは、次のコードを使用して新規の XMLHttpRequest オブジェクトを作成できます:</p> @@ -27,5 +27,5 @@ translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest_in_IE6 <h3 id="関連項目">関連項目</h3> <ul> - <li><a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/ja/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> </ul> diff --git a/files/ja/web/css/@font-face/font-weight/index.html b/files/ja/web/css/@font-face/font-weight/index.html index c077cc8d9c..16eba4cfbd 100644 --- a/files/ja/web/css/@font-face/font-weight/index.html +++ b/files/ja/web/css/@font-face/font-weight/index.html @@ -106,7 +106,7 @@ font-weight: 300 500; <h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> -<p>弱視の人は、 <code>font-weight</code> の値が <code>100</code> (Thin/Hairline) または <code>200</code> (Extra Light) の場合、特にフォントの<a href="/en-US/docs/Web/CSS/color#Accessibility_concerns">コントラスト比が低い場合</a>は、テキストを読むのが難しくなることがあります。</p> +<p>弱視の人は、 <code>font-weight</code> の値が <code>100</code> (Thin/Hairline) または <code>200</code> (Extra Light) の場合、特にフォントの<a href="/ja/docs/Web/CSS/color#Accessibility_concerns">コントラスト比が低い場合</a>は、テキストを読むのが難しくなることがあります。</p> <ul> <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> diff --git a/files/ja/web/css/@media/prefers-contrast/index.html b/files/ja/web/css/@media/prefers-contrast/index.html index d99b0b1779..fb3d42ecf9 100644 --- a/files/ja/web/css/@media/prefers-contrast/index.html +++ b/files/ja/web/css/@media/prefers-contrast/index.html @@ -14,7 +14,7 @@ translation_of: Web/CSS/@media/prefers-contrast <p><strong>注:</strong>この機能はどのユーザーエージェントも対応しておらず、仕様が変更されることがあります。</p> </div> -<p><strong><code>prefers-contrast</code></strong> は <a href="/en-US/docs/Web/CSS">CSS</a> の<a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>で、ユーザーがウェブコンテンツをより高い (またはより低い) コントラストで表示するように要求したかどうかを検出するために使用します。</p> +<p><strong><code>prefers-contrast</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>で、ユーザーがウェブコンテンツをより高い (またはより低い) コントラストで表示するように要求したかどうかを検出するために使用します。</p> <h2 id="Syntax" name="Syntax">構文</h2> diff --git a/files/ja/web/css/_colon_-moz-drag-over/index.html b/files/ja/web/css/_colon_-moz-drag-over/index.html index 44f582413f..3549db6248 100644 --- a/files/ja/web/css/_colon_-moz-drag-over/index.html +++ b/files/ja/web/css/_colon_-moz-drag-over/index.html @@ -15,7 +15,7 @@ translation_of: 'Web/CSS/:-moz-drag-over' --- <div>{{CSSRef}}{{Non-standard_header}}</div> -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:-moz-drag-over</code></strong> <a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>は <a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Mozilla 拡張</a>で、 {{event("dragover")}} イベントが呼び出される時に要素に一致します。</p> +<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:-moz-drag-over</code></strong> <a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>は <a href="/ja/docs/Web/CSS/Mozilla_Extensions">Mozilla 拡張</a>で、 {{event("dragover")}} イベントが呼び出される時に要素に一致します。</p> <h2 id="Syntax" name="Syntax">構文</h2> diff --git a/files/ja/web/css/_colon_-moz-locale-dir(rtl)/index.html b/files/ja/web/css/_colon_-moz-locale-dir(rtl)/index.html index e5c25e95ba..44f602cd30 100644 --- a/files/ja/web/css/_colon_-moz-locale-dir(rtl)/index.html +++ b/files/ja/web/css/_colon_-moz-locale-dir(rtl)/index.html @@ -14,7 +14,7 @@ translation_of: 'Web/CSS/:-moz-locale-dir(rtl)' --- <div>{{CSSRef}}{{Non-standard_header}}{{gecko_minversion_header("1.9.2")}}</div> -<p><a href="/en-US/docs/Web/CSS">CSS</a> の <strong><code>:-moz-locale-dir(ltr)</code></strong> <a href="/en-US/docs/Web/CSS/pseudo-classes">疑似クラス</a>は <a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Mozilla 拡張</a>であり、ユーザーインターフェイスが右から左へ向けて表示される要素に一致します。これは設定の <code>intl.uidirection.<em>locale</em></code> (<code><em>locale</em></code> は現在のロケール) が "rtl" に設定されていることで特定されます。</p> +<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:-moz-locale-dir(ltr)</code></strong> <a href="/ja/docs/Web/CSS/pseudo-classes">疑似クラス</a>は <a href="/ja/docs/Web/CSS/Mozilla_Extensions">Mozilla 拡張</a>であり、ユーザーインターフェイスが右から左へ向けて表示される要素に一致します。これは設定の <code>intl.uidirection.<em>locale</em></code> (<code><em>locale</em></code> は現在のロケール) が "rtl" に設定されていることで特定されます。</p> <div class="note"> <p><strong>メモ:</strong> 擬似クラスは、主に拡張機能及びテーマをユーザーのロケールに基づいて適合させるために使用されます。 (これは、ウィンドウとウィンドウ、またタブとタブの間でも変えることができます。) また、拡張機能がユーザーの既定のロケールに対応しなくても動作させることができるため、ロケールの仕様を気にしなくても、左から右方向、右から左方向の両方のレイアウトに対応できます。</p> diff --git a/files/ja/web/css/_colon_autofill/index.html b/files/ja/web/css/_colon_autofill/index.html index 80bf6c54b4..733b9665b2 100644 --- a/files/ja/web/css/_colon_autofill/index.html +++ b/files/ja/web/css/_colon_autofill/index.html @@ -11,7 +11,7 @@ original_slug: Web/CSS/:-webkit-autofill --- <div>{{CSSRef}}{{Non-standard_header}}</div> -<p>CSS の <strong><code>:-webkit-autofill</code></strong> <a href="/en-US/docs/Web/CSS/Pseudo-classes">疑似クラス</a>は、 {{HTMLElement("input")}} 要素の値がブラウザーによって自動補完されている時に一致します。</p> +<p>CSS の <strong><code>:-webkit-autofill</code></strong> <a href="/ja/docs/Web/CSS/Pseudo-classes">疑似クラス</a>は、 {{HTMLElement("input")}} 要素の値がブラウザーによって自動補完されている時に一致します。</p> <p class="note"><strong>メモ:</strong> 多くのブラウザーのユーザーエージェントスタイルシートでは、 <code>:-webkit-autofill</code> スタイル定義に <code>!important</code> を使用しており、 JavaScript によるハックで解決しない限り、ウェブページから上書きすることができません。</p> diff --git a/files/ja/web/css/_colon_host-context()/index.html b/files/ja/web/css/_colon_host-context()/index.html index 95dd31f58e..cd6c5f9b94 100644 --- a/files/ja/web/css/_colon_host-context()/index.html +++ b/files/ja/web/css/_colon_host-context()/index.html @@ -14,7 +14,7 @@ translation_of: 'Web/CSS/:host-context()' --- <div>{{CSSRef}}</div> -<p><span class="seoSummary"><strong><code>:host-context()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/en-US/docs/Web/CSS/Pseudo-classes">擬似クラス</a>関数で、内部で使用される CSS を含む<a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">シャドウ DOM</a> のシャドウホストを選択します (そのため、シャドウ DOM の中のカスタム要素を選択することができます)。 — しかし、関数の引数として与えられたセレクターがシャドウホストの祖先に一致した場合のみです。</span></p> +<p><span class="seoSummary"><strong><code>:host-context()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>関数で、内部で使用される CSS を含む<a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">シャドウ DOM</a> のシャドウホストを選択します (そのため、シャドウ DOM の中のカスタム要素を選択することができます)。 — しかし、関数の引数として与えられたセレクターがシャドウホストの祖先に一致した場合のみです。</span></p> <p><span class="seoSummary">言い換えれば、これによってカスタム要素やそのカスタム要素のシャドウ DOM 内のものは、外部 DOM 内の位置や、祖先要素に適用されたクラスや属性に基づいて、異なるスタイルを適用することができます。</span></p> diff --git a/files/ja/web/css/_colon_in-range/index.html b/files/ja/web/css/_colon_in-range/index.html index 6c80a57e43..c2be314e50 100644 --- a/files/ja/web/css/_colon_in-range/index.html +++ b/files/ja/web/css/_colon_in-range/index.html @@ -110,5 +110,5 @@ input:out-of-range + label::after { <ul> <li>{{cssxref(":out-of-range")}}</li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li> </ul> diff --git a/files/ja/web/css/_doublecolon_-moz-range-track/index.html b/files/ja/web/css/_doublecolon_-moz-range-track/index.html index f5225e7e87..3675cfc890 100644 --- a/files/ja/web/css/_doublecolon_-moz-range-track/index.html +++ b/files/ja/web/css/_doublecolon_-moz-range-track/index.html @@ -12,7 +12,7 @@ translation_of: 'Web/CSS/::-moz-range-track' --- <div>{{CSSRef}}{{Non-standard_header}}</div> -<p><strong><code>::-moz-range-track</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements" title="en/CSS/Pseudo-elements">疑似要素</a>は、 <code>type="range"</code> の {{HTMLElement("input")}} でインジケーターがスライドする <em>track</em> (例, 溝) を表す <a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Mozilla 拡張機能</a> です。</p> +<p><strong><code>::-moz-range-track</code></strong> <a href="/ja/docs/Web/CSS">CSS</a> <a href="/ja/docs/Web/CSS/Pseudo-elements" title="en/CSS/Pseudo-elements">疑似要素</a>は、 <code>type="range"</code> の {{HTMLElement("input")}} でインジケーターがスライドする <em>track</em> (例, 溝) を表す <a href="/ja/docs/Web/CSS/Mozilla_Extensions">Mozilla 拡張機能</a> です。</p> <div class="note"> <p><strong>Note:</strong> <code>::-moz-range-track</code> を <code><input type="range"></code> 以外で使用すると、何にも一致せず、効果がありません。</p> diff --git a/files/ja/web/css/_doublecolon_-webkit-progress-value/index.html b/files/ja/web/css/_doublecolon_-webkit-progress-value/index.html index b74c075dd6..01545f5204 100644 --- a/files/ja/web/css/_doublecolon_-webkit-progress-value/index.html +++ b/files/ja/web/css/_doublecolon_-webkit-progress-value/index.html @@ -11,7 +11,7 @@ translation_of: 'Web/CSS/::-webkit-progress-value' --- <div>{{CSSRef}}{{Non-standard_header}}</div> -<p><strong><code>::-webkit-progress-value</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">疑似要素</a> は、 {{HTMLElement("progress")}} 要素のバーの塗りつぶされた部分を表します。これは、 {{cssxref("::-webkit-progress-bar")}} 疑似要素の子要素です。</p> +<p><strong><code>::-webkit-progress-value</code></strong> <a href="/ja/docs/Web/CSS">CSS</a> <a href="/ja/docs/Web/CSS/Pseudo-elements">疑似要素</a> は、 {{HTMLElement("progress")}} 要素のバーの塗りつぶされた部分を表します。これは、 {{cssxref("::-webkit-progress-bar")}} 疑似要素の子要素です。</p> <div class="note"> <p><strong>Note:</strong> <code>::-webkit-progress-value</code> を有効にするには {{cssxref("-webkit-appearance")}} を <code><progress></code> 要素で <code>none</code> に設定する必要があります。</p> diff --git a/files/ja/web/css/_doublecolon_after/index.html b/files/ja/web/css/_doublecolon_after/index.html index 9d4adae746..74e3639749 100644 --- a/files/ja/web/css/_doublecolon_after/index.html +++ b/files/ja/web/css/_doublecolon_after/index.html @@ -27,7 +27,7 @@ translation_of: 'Web/CSS/::after' {{csssyntax}} <div class="note"> -<p><strong>メモ:</strong> CSS3 では<a href="/en-US/docs/Web/CSS/Pseudo-classes">疑似クラス</a>と<a href="/en-US/docs/Web/CSS/Pseudo-elements">疑似要素</a>を見分けやすくするために、 <code>::after</code> の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された <code>:after</code> も使用できます。</p> +<p><strong>メモ:</strong> CSS3 では<a href="/ja/docs/Web/CSS/Pseudo-classes">疑似クラス</a>と<a href="/ja/docs/Web/CSS/Pseudo-elements">疑似要素</a>を見分けやすくするために、 <code>::after</code> の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された <code>:after</code> も使用できます。</p> </div> <h2 id="Examples" name="Examples">例</h2> diff --git a/files/ja/web/css/_doublecolon_placeholder/index.html b/files/ja/web/css/_doublecolon_placeholder/index.html index 9b94ae2639..fd01d7c703 100644 --- a/files/ja/web/css/_doublecolon_placeholder/index.html +++ b/files/ja/web/css/_doublecolon_placeholder/index.html @@ -87,7 +87,7 @@ translation_of: 'Web/CSS/::placeholder' <p>プレイスホルダー文字列のコントラストが十分に高いと、入力された値と誤解される可能性があります。プレイスホルダー文字列は人間が {{htmlelement("input")}} 要素の中にコンテンツを入力すると、消滅するものでもあります。どちらも、特に認知症の人にはフォームの入力を完了させのに困難を伴う可能性があります。</p> -<p>プレイスホルダー情報を提供するには、他にも入力欄の外側で視覚的に近いところに表示し、 <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> を使用して {{HTMLElement("input")}} とヒントをプログラム的に関連付ける方法もあります。</p> +<p>プレイスホルダー情報を提供するには、他にも入力欄の外側で視覚的に近いところに表示し、 <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> を使用して {{HTMLElement("input")}} とヒントをプログラム的に関連付ける方法もあります。</p> <p>この実装方法では、上方が入力欄に入力されてもヒントを見ることができ、ページが読み込まれたときに既に入力されているように見えることがありません。多くの読み上げ技術は <code>aria-describedby</code> を使用して、入力欄のラベルのテキストを読み上げた後でヒントを読み上げ、読み上げソフトを使用している人は、追加情報が必要なければ読み上げを抑止することができます。</p> @@ -113,7 +113,7 @@ translation_of: 'Web/CSS/::placeholder' <p>プレイスホルダーは {{htmlelement("label")}} 要素の置き換えではありません。 {{htmlattrxref("for", "label")}} 及び {{htmlattrxref("id")}} 属性の組み合わせを使用して入力欄とプログラム的に関連付けが行われていないラベルがないと、読み上げソフトのような支援技術が {{htmlelement("input")}} 要素を解釈できなくなります。</p> <ul> - <li><a href="/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints">MDN Basic form hints</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/forms/Basic_form_hints">MDN Basic form hints</a></li> <li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Placeholders in Form Fields Are Harmful — Nielsen Norman Group</a></li> </ul> diff --git a/files/ja/web/css/_doublecolon_selection/index.html b/files/ja/web/css/_doublecolon_selection/index.html index b7cec8afc3..08e101b907 100644 --- a/files/ja/web/css/_doublecolon_selection/index.html +++ b/files/ja/web/css/_doublecolon_selection/index.html @@ -87,7 +87,7 @@ p::selection { <p>上書きする場合は、選択部分のテキストと背景の色の<strong>コントラスト比</strong>が、弱視の人でも読める程度に高いことを確認することが重要です。</p> -<p>色のコントラスト比は、プレイスホルダーの文字列と入力欄の背景色の値とを比較することで決定されます。現在の<a href="https://www.w3.org/WAI/intro/wcag">ウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG)</a> によれば、文字列コンテンツで <strong>4.5:1</strong> 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。 (WCAG は、大きめの文字列とは、<a href="/en-US/docs/Web/CSS/font-weight">太字</a>ならば <code>18.66px</code> 以上、または <code>24px</code> 以上と定義しています。)</p> +<p>色のコントラスト比は、プレイスホルダーの文字列と入力欄の背景色の値とを比較することで決定されます。現在の<a href="https://www.w3.org/WAI/intro/wcag">ウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG)</a> によれば、文字列コンテンツで <strong>4.5:1</strong> 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。 (WCAG は、大きめの文字列とは、<a href="/ja/docs/Web/CSS/font-weight">太字</a>ならば <code>18.66px</code> 以上、または <code>24px</code> 以上と定義しています。)</p> <ul> <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> diff --git a/files/ja/web/css/adjacent_sibling_combinator/index.html b/files/ja/web/css/adjacent_sibling_combinator/index.html index 312654c160..003333d6df 100644 --- a/files/ja/web/css/adjacent_sibling_combinator/index.html +++ b/files/ja/web/css/adjacent_sibling_combinator/index.html @@ -79,5 +79,5 @@ img + p { <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/CSS/General_sibling_combinator">一般兄弟結合子</a></li> + <li><a href="/ja/docs/Web/CSS/General_sibling_combinator">一般兄弟結合子</a></li> </ul> diff --git a/files/ja/web/css/animation-fill-mode/index.html b/files/ja/web/css/animation-fill-mode/index.html index ad11a24b28..a5fc4e219d 100644 --- a/files/ja/web/css/animation-fill-mode/index.html +++ b/files/ja/web/css/animation-fill-mode/index.html @@ -37,7 +37,7 @@ animation-fill-mode: both, forwards, none; <dt><code>none</code></dt> <dd>アニメーションが実行されていない時は、対象にスタイルを適用しません。要素は適用されているその他の CSS 規則を使用して表示されます。これが既定値です。</dd> <dt><code>forwards</code></dt> - <dd>対象は実行の最後の<a href="/en-US/docs/Web/CSS/@keyframes">キーフレーム</a>で設定された計算値を保持します。最後のキーフレームは {{cssxref("animation-direction")}} と {{cssxref("animation-iteration-count")}} の値によって変わります。 + <dd>対象は実行の最後の<a href="/ja/docs/Web/CSS/@keyframes">キーフレーム</a>で設定された計算値を保持します。最後のキーフレームは {{cssxref("animation-direction")}} と {{cssxref("animation-iteration-count")}} の値によって変わります。 <table class="standard-table"> <thead> <tr> @@ -81,7 +81,7 @@ animation-fill-mode: both, forwards, none; </table> </dd> <dt><code>backwards</code></dt> - <dd>アニメーションは最初の適切な<a href="/en-US/docs/Web/CSS/@keyframes">キーフレーム</a>で定義された値を対象に適用されると同時に適用し、 {{cssxref("animation-delay")}} の期間これを保持します。最初の適切なキーフレームは、 {{cssxref("animation-direction")}} の値によって変わります。 + <dd>アニメーションは最初の適切な<a href="/ja/docs/Web/CSS/@keyframes">キーフレーム</a>で定義された値を対象に適用されると同時に適用し、 {{cssxref("animation-delay")}} の期間これを保持します。最初の適切なキーフレームは、 {{cssxref("animation-direction")}} の値によって変わります。 <table class="standard-table"> <thead> <tr> diff --git a/files/ja/web/css/background-color/index.html b/files/ja/web/css/background-color/index.html index 50dde1024a..5126230136 100644 --- a/files/ja/web/css/background-color/index.html +++ b/files/ja/web/css/background-color/index.html @@ -105,7 +105,7 @@ background-color: unset;</pre> <ul> <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> - <li><a href="https://developer.mozilla.org/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="/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> diff --git a/files/ja/web/css/background-position-y/index.html b/files/ja/web/css/background-position-y/index.html index 4cb5b80072..440effe3b7 100644 --- a/files/ja/web/css/background-position-y/index.html +++ b/files/ja/web/css/background-position-y/index.html @@ -101,5 +101,5 @@ background-position-y: unset; <li>{{cssxref("background-position-x")}}</li> <li>{{cssxref("background-position-inline")}}</li> <li>{{cssxref("background-position-block")}}</li> - <li><a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">複数の背景の使用</a></li> + <li><a href="/ja/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">複数の背景の使用</a></li> </ul> diff --git a/files/ja/web/css/bottom/index.html b/files/ja/web/css/bottom/index.html index e88d42b260..92349fd4eb 100644 --- a/files/ja/web/css/bottom/index.html +++ b/files/ja/web/css/bottom/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/bottom --- <div>{{CSSRef}}</div> -<p><strong><code>bottom</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、<a href="/en-US/docs/Web/CSS/position"><ruby>位置指定要素<rp> (</rp><rt>positioned elements</rt><rp>) </rp></ruby></a>の垂直位置の設定に関与します。位置指定されていない要素には効果はありません。</p> +<p><strong><code>bottom</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、<a href="/ja/docs/Web/CSS/position"><ruby>位置指定要素<rp> (</rp><rt>positioned elements</rt><rp>) </rp></ruby></a>の垂直位置の設定に関与します。位置指定されていない要素には効果はありません。</p> <div>{{EmbedInteractiveExample("pages/css/bottom.html")}}</div> diff --git a/files/ja/web/css/box-orient/index.html b/files/ja/web/css/box-orient/index.html index 34e64ad19f..95889a906c 100644 --- a/files/ja/web/css/box-orient/index.html +++ b/files/ja/web/css/box-orient/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/box-orient <p class="blockIndicator warning">これはもともと CSS Flexible Box Layout Module の草稿でしたが、より新しい標準に置き換えられました。現在の標準についての情報は<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">フレックスボックス</a>を参照してください。</p> </div> -<p><a href="/en-US/docs/Web/CSS">CSS</a> の <strong><code>box-orient</code></strong> プロパティは、要素がその中身をレイアウトする方向が、水平か垂直かを指定します。</p> +<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>box-orient</code></strong> プロパティは、要素がその中身をレイアウトする方向が、水平か垂直かを指定します。</p> <pre class="brush:css">/* キーワード値 */ box-orient: horizontal; diff --git a/files/ja/web/css/box-shadow/index.html b/files/ja/web/css/box-shadow/index.html index d28db18a1e..c33f487fb6 100644 --- a/files/ja/web/css/box-shadow/index.html +++ b/files/ja/web/css/box-shadow/index.html @@ -21,7 +21,7 @@ translation_of: Web/CSS/box-shadow --- <div>{{CSSRef}}</div> -<p><span class="seoSummary"><strong><code>box-shadow</code></strong> は <a href="/en-US/docs/Web/CSS">CSS</a> のプロパティで、要素のフレームの周囲にシャドウ効果を追加します。カンマで区切ることで、複数の効果を設定することができます。</span>ボックスの影は要素からの相対的な X および Y のオフセット、ぼかしと拡散の半径、色で記述します。</p> +<p><span class="seoSummary"><strong><code>box-shadow</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素のフレームの周囲にシャドウ効果を追加します。カンマで区切ることで、複数の効果を設定することができます。</span>ボックスの影は要素からの相対的な X および Y のオフセット、ぼかしと拡散の半径、色で記述します。</p> <div>{{EmbedInteractiveExample("pages/css/box-shadow.html")}}</div> diff --git a/files/ja/web/css/color/index.html b/files/ja/web/css/color/index.html index b6bb694d66..a97a3e0f78 100644 --- a/files/ja/web/css/color/index.html +++ b/files/ja/web/css/color/index.html @@ -15,7 +15,7 @@ translation_of: Web/CSS/color --- <div>{{CSSRef}}</div> -<p><span class="seoSummary">CSS の <strong><code>color</code></strong> プロパティは、要素のテキストや<a href="/ja/docs/Web/CSS/text-decoration">テキスト装飾</a>における前景色の<a href="/en-US/docs/Web/CSS/color_value">色の値</a>を設定し、 {{cssxref("currentcolor")}} の値を設定します。</span> <code>currentcolor</code> は<em>他の</em>プロパティの間接的な値として使用される可能性があり、 {{cssxref("border-color")}} のような他の色に関するプロパティの既定値にもなったりします。</p> +<p><span class="seoSummary">CSS の <strong><code>color</code></strong> プロパティは、要素のテキストや<a href="/ja/docs/Web/CSS/text-decoration">テキスト装飾</a>における前景色の<a href="/ja/docs/Web/CSS/color_value">色の値</a>を設定し、 {{cssxref("currentcolor")}} の値を設定します。</span> <code>currentcolor</code> は<em>他の</em>プロパティの間接的な値として使用される可能性があり、 {{cssxref("border-color")}} のような他の色に関するプロパティの既定値にもなったりします。</p> <div>{{EmbedInteractiveExample("pages/css/color.html")}}</div> diff --git a/files/ja/web/css/contain-intrinsic-size/index.html b/files/ja/web/css/contain-intrinsic-size/index.html index 9b91b2f9dc..603f038987 100644 --- a/files/ja/web/css/contain-intrinsic-size/index.html +++ b/files/ja/web/css/contain-intrinsic-size/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/contain-intrinsic-size --- <p>{{CSSRef}}</p> -<p><code>contains-intrinsic-size</code> CSSプロパティは、<a href="/en-US/docs/Web/CSS/content-visibility"><code>content-visibility</code></a>で指定された要素の自然なサイズを制御します。</p> +<p><code>contains-intrinsic-size</code> CSSプロパティは、<a href="/ja/docs/Web/CSS/content-visibility"><code>content-visibility</code></a>で指定された要素の自然なサイズを制御します。</p> <h2 id="Syntax" name="Syntax">Syntax</h2> diff --git a/files/ja/web/css/cross-fade()/index.html b/files/ja/web/css/cross-fade()/index.html index f29ec46d8b..5cf8359073 100644 --- a/files/ja/web/css/cross-fade()/index.html +++ b/files/ja/web/css/cross-fade()/index.html @@ -62,7 +62,7 @@ cross-fade( url(red.png) 33.33%, url(yellow.png) 33.33%, url(blue.png) 33.33%);< <pre class="syntaxbox notranslate">cross-fade( <image, <image>, <percentage> )</pre> -<p>The specification for the <code>cross-fade()</code> function allows for multiple images and for each image to have transparency values independent of the other values. This was not always the case. The <a href="/en-US/docs/">original syntax</a>, which has been implemented in some browsers, only allowed for two images, with the sum of the transparency of those two images being exactly 100%. The original syntax is supported in Safari and supported with the <code>-webkit-</code> prefix in Chrome, Opera, and other blink-based browsers.</p> +<p>The specification for the <code>cross-fade()</code> function allows for multiple images and for each image to have transparency values independent of the other values. This was not always the case. The <a href="/ja/docs/">original syntax</a>, which has been implemented in some browsers, only allowed for two images, with the sum of the transparency of those two images being exactly 100%. The original syntax is supported in Safari and supported with the <code>-webkit-</code> prefix in Chrome, Opera, and other blink-based browsers.</p> <pre class="brush: css notranslate">cross-fade(url(white.png), url(black.png), 0%); /* fully black */ cross-fade(url(white.png), url(black.png), 25%); /* 25% white, 75% black */ diff --git a/files/ja/web/css/css_colors/color_picker_tool/index.html b/files/ja/web/css/css_colors/color_picker_tool/index.html index 958178331b..5fb090a903 100644 --- a/files/ja/web/css/css_colors/color_picker_tool/index.html +++ b/files/ja/web/css/css_colors/color_picker_tool/index.html @@ -3218,11 +3218,11 @@ var ColorPickerTool = (function ColorPickerTool() { <p>{{CSSRef}}</p> -<p><span class="seoSummary">このツールは、ウェブの独自の色を簡単に作成、調整、実験することができます。</span> HEXA 色, RGB (Red/Green/Blue), HSL (Hue/Saturation/Lightness) RGB など、 <a href="/en-US/docs/Web/CSS">CSS</a> で対応している様々な<a href="/en-US/docs/Web/CSS/color_value">色形式</a>に変換することもできます。アルファチャネルの制御も、 RGB (rgba) 及び HSL (hsla) 形式で対応しています。</p> +<p><span class="seoSummary">このツールは、ウェブの独自の色を簡単に作成、調整、実験することができます。</span> HEXA 色, RGB (Red/Green/Blue), HSL (Hue/Saturation/Lightness) RGB など、 <a href="/ja/docs/Web/CSS">CSS</a> で対応している様々な<a href="/ja/docs/Web/CSS/color_value">色形式</a>に変換することもできます。アルファチャネルの制御も、 RGB (rgba) 及び HSL (hsla) 形式で対応しています。</p> <p>色を定義するパラメーターを調整すると、３つの標準ウェブ CSS 形式すべてが表示されます。さらに、現在選択されている色に基づいて、 HSL および HSV のパレット、およびアルファが生成されます。「スポイト」スタイルのカラーピッカーボックスは、 HSL または HSV 形式の間で切り替えることができます。また、ツールの下部にあるボックスに色をドラッグし、色を重ね合わせることで、色とその重なり具合をテストすることもできます。 相対 Z インデックス値を調整して、前後に移動させることができます。</p> -<p>このツールは <a href="/en-US/docs/Web/HTML">HTML</a> に適用する完全な CSS 色を識別するのに役立ちます。</p> +<p>このツールは <a href="/ja/docs/Web/HTML">HTML</a> に適用する完全な CSS 色を識別するのに役立ちます。</p> <div>{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}</div> diff --git a/files/ja/web/css/css_containment/index.html b/files/ja/web/css/css_containment/index.html index f06dce4200..38ea507e3e 100644 --- a/files/ja/web/css/css_containment/index.html +++ b/files/ja/web/css/css_containment/index.html @@ -83,7 +83,7 @@ translation_of: Web/CSS/CSS_Containment contain: style; }</pre> -<p>Despite the name, style containment does not provide scoped styles such as you would get with the <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a>. The main use case is to prevent situations where a <a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS Counter</a> could be changed in an element, which could then affect the rest of the tree. </p> +<p>Despite the name, style containment does not provide scoped styles such as you would get with the <a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a>. The main use case is to prevent situations where a <a href="/ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS Counter</a> could be changed in an element, which could then affect the rest of the tree. </p> <p>Using <code>contain: style</code> would ensure that the {{cssxref("counter-increment")}} and {{cssxref("counter-set")}} properties created new counters scoped to that subtree only.</p> diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html index 7e8574e143..725f3b0e12 100644 --- a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html +++ b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html @@ -126,7 +126,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Contain <p><strong>注</strong>: <code>space-evenly</code> はフレックスボックス仕様書では定義されておらず、あとからボックス配置仕様書に追加されたものです。この値に対するブラウザーの互換性は、フレックスボックス仕様書に定義されている他の値より遅れています。</p> </div> -<p>上述の値についての詳細とブラウザー対応状況については <a href="/docs/Web/CSS/justify-content">MDN の <code>justify-content</code> のページ</a>を参照してください。</p> +<p>上述の値についての詳細とブラウザー対応状況については <a href="/ja/docs/Web/CSS/justify-content">MDN の <code>justify-content</code> のページ</a>を参照してください。</p> <h2 id="Aligning_content_on_the_main_axis" name="Aligning_content_on_the_main_axis">主軸上での位置合わせ</h2> @@ -210,9 +210,9 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Contain <p>この記事のはじめに、配置プロパティは flexbox Level 1 仕様と、将来的にプロパティや設定値を拡張する可能性のある Box Alignment Level 3 仕様のいずれにも含まれていることを述べました。その一例として、 <code>align-content</code> と <code>justify-content</code> プロパティに <code>space-evenly</code> が導入されていることも紹介しました。</p> -<p>ボックス配置モジュールは、他にも <code>column-gap</code> や <code>row-gap</code> といった、アイテムの間にスペースを作るための方法を含んでいます (<a href="/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> にて説明しています)。これらのプロパティがボックス配置に含まれているということは、将来的に <code>column-gap</code> や <code>row-gap</code> がフレックスレイアウトでも使用できるようになることを示しており、 Firefox 63 はフレックスレイアウトに gap のプロパティを初めて実装したブラウザーになるでしょう。</p> +<p>ボックス配置モジュールは、他にも <code>column-gap</code> や <code>row-gap</code> といった、アイテムの間にスペースを作るための方法を含んでいます (<a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> にて説明しています)。これらのプロパティがボックス配置に含まれているということは、将来的に <code>column-gap</code> や <code>row-gap</code> がフレックスレイアウトでも使用できるようになることを示しており、 Firefox 63 はフレックスレイアウトに gap のプロパティを初めて実装したブラウザーになるでしょう。</p> -<p>フレックスボックスでの配置について深く学ぼうとする際には、グリッドレイアウトと並べて見ることをおすすめします。いずれの仕様もボックス配置仕様書で詳細化されている配置プロパティを使っています。これらのプロパティがグリッドの場合にどのようにはたらくかについては、 MDN の記事 <a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">グリッドレイアウトでのボックス配置</a>を参照してください。また、筆者 (訳注: 英語版の作成者 <a href="https://developer.mozilla.org/profiles/rachelandrew">rachelandrew</a>) は各仕様における位置合わせの動作について <a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a> で比較しています。</p> +<p>フレックスボックスでの配置について深く学ぼうとする際には、グリッドレイアウトと並べて見ることをおすすめします。いずれの仕様もボックス配置仕様書で詳細化されている配置プロパティを使っています。これらのプロパティがグリッドの場合にどのようにはたらくかについては、 MDN の記事 <a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">グリッドレイアウトでのボックス配置</a>を参照してください。また、筆者 (訳注: 英語版の作成者 <a href="/profiles/rachelandrew">rachelandrew</a>) は各仕様における位置合わせの動作について <a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a> で比較しています。</p> <h2 id="See_Also" name="See_Also">関連情報</h2> diff --git a/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html b/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html index ef3f6ed3d9..6841280981 100644 --- a/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html +++ b/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html @@ -3,7 +3,7 @@ title: フレックスアイテムの折り返しのマスター slug: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items --- -<p class="summary">フレックスボックスは一次元のレイアウトとして設計されており、つまりアイテムを行または列として扱います。 — しかし、同時ではありません。しかし、フレックスアイテムを新しい行に折り返し、 {{cssxref("flex-direction")}} が <code>row</code> の場合は新しい行を、 <code>flex-direction</code> が <code>column</code> の場合は新しい列を生成します。このガイドでは、これがどのように動作するのか、何のために設計されているのか、どのような場合にフレックスボックスより <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>が必要になるかを説明します。</p> +<p class="summary">フレックスボックスは一次元のレイアウトとして設計されており、つまりアイテムを行または列として扱います。 — しかし、同時ではありません。しかし、フレックスアイテムを新しい行に折り返し、 {{cssxref("flex-direction")}} が <code>row</code> の場合は新しい行を、 <code>flex-direction</code> が <code>column</code> の場合は新しい列を生成します。このガイドでは、これがどのように動作するのか、何のために設計されているのか、どのような場合にフレックスボックスより <a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>が必要になるかを説明します。</p> <h2 id="Making_things_wrap" name="Making_things_wrap">折り返しを行う</h2> diff --git a/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html b/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html index 1eeaa99bbb..7ec4dbc572 100644 --- a/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html +++ b/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html @@ -66,7 +66,7 @@ translation_of: >- <p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} </p> -<p><code>sideways-rl</code> と <code>sideways-lr</code> の対応は現時点では Firefox のみということに注意してください。また <code>writing-mode</code> とフレックスボックスに関しての既知の問題がいくつかあります。ブラウザーの対応状況については <a href="/docs/Web/CSS/writing-mode">MDN の書字方向のドキュメント</a>に情報があります。しかし、もしレイアウトのために書字方向を設定する予定であれば、それがどのような結果になるか注意深くテストすることが推奨されます。比較的簡単に、文字が読みにくくなってしまうからです。</p> +<p><code>sideways-rl</code> と <code>sideways-lr</code> の対応は現時点では Firefox のみということに注意してください。また <code>writing-mode</code> とフレックスボックスに関しての既知の問題がいくつかあります。ブラウザーの対応状況については <a href="/ja/docs/Web/CSS/writing-mode">MDN の書字方向のドキュメント</a>に情報があります。しかし、もしレイアウトのために書字方向を設定する予定であれば、それがどのような結果になるか注意深くテストすることが推奨されます。比較的簡単に、文字が読みにくくなってしまうからです。</p> <p>CSS の <code>writing-mode</code> プロパティを文書全体の書字方向を変更するために使うことはあまりないでしょう。通常は HTML 上で <code>html</code> 要素に <code>dir</code> 属性と <code>lang</code> 属性を指定することで、文書の言語とテキスト方向を指定します。それによって CSS がロードされなかったとしても文書を正しく表示することができます。</p> @@ -84,7 +84,7 @@ translation_of: >- <h2 id="Flexbox_and_Grid_Layout" name="Flexbox_and_Grid_Layout">フレックスボックとグリッドレイアウト</h2> -<p><a href="/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>とフレックスボックスは、ほかのレイアウト方法を上書きするという観点ではおおむね同じように振る舞います。しかし、フレックスボックスの方が古いブラウザーでも比較的サポートされているため、フレックスボックスをグリッドレイアウトのフォールバックとして使いたいときがあるかもしれません。このやり方はうまく動きます。フレックスアイテムがグリッドアイテムになるとき、そのアイテムに設定されている <code>flex</code> プロパティは無視されるようになります。</p> +<p><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>とフレックスボックスは、ほかのレイアウト方法を上書きするという観点ではおおむね同じように振る舞います。しかし、フレックスボックスの方が古いブラウザーでも比較的サポートされているため、フレックスボックスをグリッドレイアウトのフォールバックとして使いたいときがあるかもしれません。このやり方はうまく動きます。フレックスアイテムがグリッドアイテムになるとき、そのアイテムに設定されている <code>flex</code> プロパティは無視されるようになります。</p> <p>ボックス配置プロパティは、両レイアウト方法をまたいで使用することができ、グリッドレイアウトのフォールバックとしてフレックスボックスを使う場合にもうまくいきます。</p> @@ -106,7 +106,7 @@ translation_of: >- <p>経験則として、折り返しされたフレックスコンテナーの一行の中のアイテムを、上の行のアイテムの位置と揃えるためにフレックスアイテムに幅を設定しようとするときには、二次元レイアウトがどうしても欲しくなることがあります。そのような場合には CSS グリッドレイアウトを使ったほうがよいでしょう。小さなコンポーネントにはフレックスボックスを使い、大きいコンポーネントにはグリッドレイアウトを使うべきというのは事実ではありません。とても小さいコンポーネントであっても二次元になることもあれば、大きなレイアウトを一次元のレイアウトで表現することが適している場合もあります。今はレイアウト方法を選べるようになったので、その利点を生かすためにいろいろと試してみてください。</p> -<p>グリッドとフレックスボックスのさらに詳しい比較については<a href="/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">「グリッドレイアウトと他レイアウト方法との関係」</a>の記事を参照してください。この記事ではグリッドレイアウトがフレックスレイアウトと異なっている多くの点について詳述し、またグリッドレイアウトの持つグリッド上のアイテムのレイヤー機能などの追加機能について実例を示しています。また、どちらのレイアウト方法を選ぶべきかを決める手助けにもなるでしょう。</p> +<p>グリッドとフレックスボックスのさらに詳しい比較については<a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">「グリッドレイアウトと他レイアウト方法との関係」</a>の記事を参照してください。この記事ではグリッドレイアウトがフレックスレイアウトと異なっている多くの点について詳述し、またグリッドレイアウトの持つグリッド上のアイテムのレイヤー機能などの追加機能について実例を示しています。また、どちらのレイアウト方法を選ぶべきかを決める手助けにもなるでしょう。</p> <h2 id="Flexbox_and_display_contents" name="Flexbox_and_display_contents">フレックスボックスと display: contents</h2> diff --git a/files/ja/web/css/css_fonts/opentype_fonts_guide/index.html b/files/ja/web/css/css_fonts/opentype_fonts_guide/index.html index bdc63c3739..27d674de65 100644 --- a/files/ja/web/css/css_fonts/opentype_fonts_guide/index.html +++ b/files/ja/web/css/css_fonts/opentype_fonts_guide/index.html @@ -154,7 +154,7 @@ translation_of: Web/CSS/CSS_Fonts/OpenType_fonts_guide <h2 id="フォント機能の設定">フォント機能の設定</h2> -<p>{{cssxref("font-feature-settings")}} is the 'low level syntax' that allows explicit access to every named available OpenType feature. This gives a lot of control, but has some disadvantages in how it impacts inheritance and — as mentioned above — if you wish to change one setting, you have to redeclare the entire string (unless you're using <a href="/en-US/docs/Web/CSS/Using_CSS_variables">CSS custom properties</a> to set the values). Because of this, it's best to use the standard properties shown above wherever possible.</p> +<p>{{cssxref("font-feature-settings")}} is the 'low level syntax' that allows explicit access to every named available OpenType feature. This gives a lot of control, but has some disadvantages in how it impacts inheritance and — as mentioned above — if you wish to change one setting, you have to redeclare the entire string (unless you're using <a href="/ja/docs/Web/CSS/Using_CSS_variables">CSS custom properties</a> to set the values). Because of this, it's best to use the standard properties shown above wherever possible.</p> <p>There a huge number of possible features. You can see examples of a number of them above, and there are several resources available for finding more of them.</p> 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 3f83a21dbd..003be5dc4e 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 @@ -96,7 +96,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <p>{{ EmbedLiveSample('alignment_1', '500', '450') }}</p> </div> -<p><code>align-self: start</code> を設定すると、それぞれの子 <code><div></code> の高さはコンテンツの <code><div></code> によって決定されることを覚えておいてください。また、<code><a href="https://developer.mozilla.org/ja/docs/Web/CSS/align-self">align-self</a></code> を完全に省略すると、それぞれの子 <code><div></code> の高さはグリッドエリアを満たすように広がります。</p> +<p><code>align-self: start</code> を設定すると、それぞれの子 <code><div></code> の高さはコンテンツの <code><div></code> によって決定されることを覚えておいてください。また、<code><a href="/ja/docs/Web/CSS/align-self">align-self</a></code> を完全に省略すると、それぞれの子 <code><div></code> の高さはグリッドエリアを満たすように広がります。</p> <p>{{cssxref("align-items")}} プロパティはすべての子グリッドアイテムに {{cssxref("align-self")}} プロパティを設定します。これは、グリッドアイテム上で <code>align-self</code> を使えばプロパティを個別に設定できるということです。</p> diff --git a/files/ja/web/css/css_images/using_css_gradients/index.html b/files/ja/web/css/css_images/using_css_gradients/index.html index 1136b5077b..bb810f605e 100644 --- a/files/ja/web/css/css_images/using_css_gradients/index.html +++ b/files/ja/web/css/css_images/using_css_gradients/index.html @@ -602,7 +602,7 @@ translation_of: Web/CSS/CSS_Images/Using_CSS_gradients <div> <h3 id="Multiple_repeating_linear_gradients" name="Multiple_repeating_linear_gradients">複数の反復線形グラデーション</h3> -<p>Similar to regular linear and radial gradients, you can include multiple gradients, one on top of the other. This only makes sense if the gradients are partially transparent allowing subsequent gradients to show through the transparent areas, or if you include different <a href="/en-US/docs/Web/CSS/background-size">background-sizes</a>, optionally with different <a href="/en-US/docs/Web/CSS/background-position">background-position</a> property values, for each gradient image. We are using transparency.</p> +<p>Similar to regular linear and radial gradients, you can include multiple gradients, one on top of the other. This only makes sense if the gradients are partially transparent allowing subsequent gradients to show through the transparent areas, or if you include different <a href="/ja/docs/Web/CSS/background-size">background-sizes</a>, optionally with different <a href="/ja/docs/Web/CSS/background-position">background-position</a> property values, for each gradient image. We are using transparency.</p> <p>In this case the gradient lines are 300px, 230px, and 300px long.</p> diff --git a/files/ja/web/css/css_logical_properties/basic_concepts/index.html b/files/ja/web/css/css_logical_properties/basic_concepts/index.html deleted file mode 100644 index e190281ba3..0000000000 --- a/files/ja/web/css/css_logical_properties/basic_concepts/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: 論理的プロパティと値の基本概念 -slug: Web/CSS/CSS_Logical_Properties/Basic_concepts -tags: - - CSS - - CSS 論理的プロパティ - - Guide - - 書字方向 - - 概念 -translation_of: Web/CSS/CSS_Logical_Properties/Basic_concepts ---- -<div>{{CSSRef}}</div> - -<p class="summary">「論理的プロパティと値」仕様書では、 CSS のたくさんのプロパティや値のフローに関する対応付けを紹介しています。この記事はこの仕様書を紹介し、フローに関するプロパティと値を説明します。</p> - -<h2 id="Why_do_we_need_logical_properties" name="Why_do_we_need_logical_properties">なぜ論理的プロパティが必要なのか</h2> - -<p>CSS は従来、画面の物理的な方向に沿って寸法を取っていました。従って、ボックスを {{CSSxRef("width")}} および {{CSSxRef("height")}} を用いて記述したり、アイテムを <code>top</code> および <code>left</code> で配置したり、 left で浮動させたり、境界、マージン、パディングを <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> で割り当てたりします。<a href="https://drafts.csswg.org/css-logical/">論理的プロパティと値仕様書</a>はこれらの物理的な値を論理的、またはフローやその反対に関連したものへの対応付けを定義します。 — 例えば <code>start</code> と <code>end</code> は <code>left</code> と <code>right</code>/<code>top</code> と <code>bottom</code> に対応します。</p> - -<p>なぜこれらの対応付けが必要なのかは以下の通りです。 CSS グリッドを使用したレイアウトがあり、グリッドコンテナーに幅が設定されていて、アイテムを配置するために {{CSSxRef("align-self")}} および {{CSSxRef("justify-self")}} を使用していたとします。これらのプロパティはフローに相対的です。 — <code>justify-self: start</code> はインライン方向の始点にアイテムを配置し、 <code>align-self: start</code> はブロック方向の始点にアイテムを配置します。</p> - -<p><img alt="横書きモードでのグリッド" src="https://mdn.mozillademos.org/files/16338/grid-horizontal-width-sm.png" style="display: block; margin: 0 auto; width: 350px;"></p> - -<p>このコンポーネントの書字方向を、 <code>vertical-rl</code> を {{CSSxRef("writing-mode")}} プロパティに設定することで変更すると、配置は同様の方向で動作し続けます。インライン方向は垂直になり、ブロック方向は水平になります。しかし、幅がコンテナーの水平の寸法で割り当てられており、寸法が論理的またはテキストの流れではなく物理的な方向に結び付けられているため、グリッドは同じようには見えません。</p> - -<p><img alt="縦書きモードでのグリッド" src="https://mdn.mozillademos.org/files/16339/grid-vertical-width-sm.png" style="display: block; margin: 0 auto; width: 350px;"></p> - -<p><code>width</code> プロパティの代わりに論理的プロパティである {{CSSxRef("inline-size")}} を使用すれば、コンポーネントは表示される書字方向が何であっても同じように動作するようになります。</p> - -<p><img alt="縦書きモードでのグリッドレイアウト" src="https://mdn.mozillademos.org/files/16337/grid-vertical-inline-size-small.png" style="display: block; height: 382px; margin: 0 auto; width: 200px;"></p> - -<p>以下のライブデモを試してみることができます。 <code>.box</code> の <code>writing-mode</code> を <code>vertical-rl</code> から <code>horizontal-tb</code> へ変更して、プロパティが変わるとどのようにレイアウトが変わるかを確認することができます。</p> - -<p>{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}</p> - -<p>When working with a site in a writing mode other than a horizontal, top to bottom one, or when using writing modes for creative reasons, being able to relate to the flow of the content makes a lot of sense.</p> - -<h2 id="Block_and_inline_dimensions" name="Block_and_inline_dimensions">ブロック方向とインライン方向</h2> - -<p>A key concept of working with flow relative properties and values is the two dimensions of block and inline. As we saw above, newer CSS layout methods such as Flexbox and Grid Layout use the concepts of <code>block</code> and <code>inline</code> rather than <code>right</code> and <code>left</code>/<code>top</code> and <code>bottom</code> when aligning items.</p> - -<p>The <code>inline</code> dimension is the dimension along which a line of text runs in the writing mode in use. Therefore, in an English document with the text running horizontally left to right, or an Arabic document with the text running horizontally right to left, the inline dimension is <em>horizontal</em>. Switch to a vertical writing mode (e.g. a Japanese document) and the inline dimension is now <em>vertical</em>, as lines in that writing mode run vertically.</p> - -<p>The block dimension is the other dimension, and the direction in which blocks — such as paragraphs — display one after the other. In English and Arabic these run vertically, whereas in any vertical writing mode these run horizontally.</p> - -<p>The below diagram shows the inline and block directions in a horizontal writing mode:</p> - -<p><img alt="diagram showing the inline axis running horizontally, block axis vertically." src="https://mdn.mozillademos.org/files/16340/mdn-horizontal.png" style="display: block; height: 382px; margin: 0 auto; width: 521px;"></p> - -<p>This diagram shows block and inline in a vertical writing mode:</p> - -<p><img alt="Diagram showing the block axis running horizontally the inline axis vertically." src="https://mdn.mozillademos.org/files/16341/mdn-vertical.png" style="display: block; height: 382px; margin: 0 auto; width: 418px;"></p> - -<h2 id="Browser_support" name="Browser_support">ブラウザーの互換性</h2> - -<p>Logical Properties and Values can be thought of as a couple of groups in terms of current browser support. Some of the properties are essentially mappings from the physical versions, for example {{CSSxRef("inline-size")}} for {{CSSxRef("width")}} or {{CSSxRef("margin-inline-start")}} rather than {{CSSxRef("margin-left")}}. These mapped properties are starting to see good browser support, and if you look at the individual pages for the properties in the <a href="/ja/docs/Web/CSS/CSS_Logical_Properties#Reference">reference here on MDN</a> you will see that Edge is the only modern browser currently missing these.</p> - -<p>There are then a group of properties which do not have a direct mapping in terms of existing physical properties. These are shorthands made possible by the fact that we can refer to both edges of the block or inline dimension at once. An example would be {{CSSxRef("margin-block")}}, which is a shorthand setting for {{CSSxRef("margin-block-start")}} and {{CSSxRef("margin-block-end")}}. These currently have no browser support.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: The CSS Working Group are currently trying to decide what to do about the four-value shorthands for logical properties, for example the equivalents to setting four physical properties at once, like margins with the {{CSSxRef("margin")}} property. We would need some kind of modifier if we were to reuse <code>margin</code> for flow-relative properties. If you would like to read the suggestions or comment on them the relevant GitHub issue is <a href="https://github.com/w3c/csswg-drafts/issues/1282">#1282</a>.</p> -</div> - -<h3 id="Testing_for_browser_support" name="Testing_for_browser_support">ブラウザーの互換性のテスト</h3> - -<p>You can test for support of logical properties and values using feature queries. For example you could set a {{CSSxRef("width")}}, test for {{CSSxRef("inline-size")}} and, if it is supported, set the <code>width</code> to <code>auto</code> and the <code>inline-size</code> to the original <code>width</code> value.</p> - -<p>{{EmbedGHLiveSample("css-examples/logical/intro-feature-queries.html", "100%", 700)}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">グリッドレイアウトのボックス配置</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">フレックスレイアウトのボックス配置</a></li> - <li><a href="https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/">Understanding Logical Properties and Values</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">書字方向</a></li> -</ul> diff --git a/files/ja/web/css/css_logical_properties/basic_concepts/index.md b/files/ja/web/css/css_logical_properties/basic_concepts/index.md new file mode 100644 index 0000000000..221091a5e5 --- /dev/null +++ b/files/ja/web/css/css_logical_properties/basic_concepts/index.md @@ -0,0 +1,73 @@ +--- +title: 論理的プロパティと値の基本概念 +slug: Web/CSS/CSS_Logical_Properties/Basic_concepts +tags: + - CSS + - CSS 論理的プロパティ + - ガイド + - 概念 + - 書字方向 +translation_of: Web/CSS/CSS_Logical_Properties/Basic_concepts +--- +{{CSSRef}} + +Logical Properties and Values (論理的プロパティと値) 仕様書では、 CSS のたくさんのプロパティや値のフローに関する対応付けを紹介しています。この記事はこの仕様書を紹介し、フローに関するプロパティと値を説明します。 + +## なぜ論理的プロパティが必要なのか + +CSS は従来、画面の物理的な軸に沿って寸法を取っていました。したがって、ボックスを {{CSSxRef("width")}} および {{CSSxRef("height")}} を用いて記述したり、アイテムを `top` および `left` で配置したり、 left に浮動させたり、境界、マージン、パディングを `top`, `right`, `bottom`, `left` で割り当てたりします。 [Logical Properties and Values 仕様書](https://drafts.csswg.org/css-logical/)はこれらの物理的な値を論理的、またはフローやその反対に関連したものへの対応付けを定義します。例えば `start` と `end` は `left` と `right` または `top` と `bottom` に対応します。 + +なぜこれらの対応付けが必要なのでしょうか。 CSS グリッドを使用したレイアウトがあり、グリッドコンテナーに幅が設定されていて、アイテムを配置するために {{CSSxRef("align-self")}} および {{CSSxRef("justify-self")}} を使用していたとします。これらのプロパティはフローに相対的です。 `justify-self: start` はインライン軸の先頭にアイテムを配置し、 `align-self: start` はブロック軸の先頭にアイテムを配置します。 + + + +この部分の書字方向として `vertical-rl` を {{CSSxRef("writing-mode")}} プロパティに設定すると、配置は同様の方向で動作し続けます。インライン軸は垂直になり、ブロック軸は水平になります。しかし、幅がコンテナーの水平の寸法で割り当てられており、寸法が論理的またはテキストの流れではなく物理的な方向に結び付けられているため、グリッドは同じようには見えません。 + + + +`width` プロパティの代わりに論理的プロパティである {{CSSxRef("inline-size")}} を使用すれば、コンポーネントは表示される書字方向が何であっても同じように動作するようになります。 + + + +次の実行例を試してみましょう。 `.box` の `writing-mode` を `vertical-rl` から `horizontal-tb` へ変更して、プロパティが変わるとどのようにレイアウトが変わるかを確認することができます。 + +{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}} + +水平方向、下方向以外の書字方向でサイトを操作する場合や、クリエイティブな理由で書字方向を使用する場合、コンテンツの流れに関連づけることができるのはとても意味のあることです。 + +## ブロック軸とインライン軸 + +フローに対して相対的なプロパティや値を扱う上で重要な概念は、ブロックとインラインという 2 つの軸です。前述したように、フレックスボックスやグリッドレイアウトなどの新しい CSS レイアウト手法では、アイテムを配置する際に、 `right` と `left` や `top` と `bottom` ではなく、 `block` と `inline` の概念を使用します。 + +`inline` 軸は、使用されている書字方向でテキストの行が流れる方向の軸です。したがって、テキストが水平方向に左から右へ流れる英語の文書や、テキストが水平方向に右から左へ流れるアラビア語の文書では、インライン軸は*水平*になります。縦書きの文書 (日本語の文書など) に切り替えると、行が垂直方向に流れるので、縦書きの文書では行が縦に流れるので、インライン軸は*垂直*になります。 + +ブロック軸はもう一つの軸で、段落などのブロックが次々と表示される方向を示します。英語やアラビア語では垂直方向に表示されますが、縦書きの場合は水平方向に表示されます。 + +下の図は、横書きモードの場合のインラインとブロックの方向を示しています。 + + + +この図は、縦書きモードでのブロックとインラインの方向を示しています。 + + + +## ブラウザーの互換性 + +論理的プロパティと値は、現在のブラウザーの対応状況の観点から、 2 つのグループに分けて考えることができます。一部のプロパティは基本的に物理的プロパティから対応付けられたものです。例えば {{CSSxRef("inline-size")}} は {{CSSxRef("width")}} から、 {{CSSxRef("margin-inline-start")}} は {{CSSxRef("margin-left")}} を代替するものです。これらの対応付けられたプロパティは、ブラウザーの対応が充実し始めており、 [MDN のリファレンス](/ja/docs/Web/CSS/CSS_Logical_Properties#reference)でプロパティの個別ページを見てみると、今では最近のブラウザーでこれらのプロパティがないのは Edge だけであることが分かります。 + +それから、既存の物理的プロパティに直接対応付けされていないグループのプロパティもあります。これらのプロパティは、ブロック軸またはインライン軸の両端を一度に参照できることによって可能となった一括指定です。例えば、 {{CSSxRef("margin-block")}} は、 {{CSSxRef("margin-block-start")}} と {{CSSxRef("margin-block-end")}} の一括指定であると言えます。 + +> **Note:** CSS 作業部会では、論理的プロパティにおいて 4 つの値の一括指定をどうするかを決めようとしています。例えば、 {{CSSxRef("margin")}} プロパティでマージンを指定する場合のように、 4 つの物理的なプロパティを一度に設定することに相当します。もし、 `margin` をフロー関連のプロパティに再利用するのであれば、何らかの修飾子が必要になるでしょう。この提案を読んだりコメントしたりしたい人は、 GitHub の [#1282](https://github.com/w3c/csswg-drafts/issues/1282) を参照してください。 + +### ブラウザーの対応のテスト + +機能クエリーを使用すると、論理的プロパティや値の対応状況をテストすることができます。たとえば、 {{CSSxRef("width")}} を設定し、 {{CSSxRef("inline-size")}} をテストし、対応していれば、`width` を `auto` に、`inline-size` を元の `width` の値に設定するようにすることができます。 + +{{EmbedGHLiveSample("css-examples/logical/intro-feature-queries.html", "100%", 700)}} + +## 関連情報 + +- [グリッドレイアウトのボックス配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout) +- [フレックスレイアウトのボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox) +- [Understanding Logical Properties and Values](https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/) +- [書字方向](/ja/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes) diff --git a/files/ja/web/css/css_logical_properties/basic_concepts/mdn-horizontal.png b/files/ja/web/css/css_logical_properties/basic_concepts/mdn-horizontal.png Binary files differnew file mode 100644 index 0000000000..dca6006c71 --- /dev/null +++ b/files/ja/web/css/css_logical_properties/basic_concepts/mdn-horizontal.png diff --git a/files/ja/web/css/css_logical_properties/basic_concepts/mdn-vertical.png b/files/ja/web/css/css_logical_properties/basic_concepts/mdn-vertical.png Binary files differnew file mode 100644 index 0000000000..b44a4a4d33 --- /dev/null +++ b/files/ja/web/css/css_logical_properties/basic_concepts/mdn-vertical.png diff --git a/files/ja/web/css/css_ruby/index.html b/files/ja/web/css/css_ruby/index.html index f206b619af..4e0f0119c1 100644 --- a/files/ja/web/css/css_ruby/index.html +++ b/files/ja/web/css/css_ruby/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/CSS_Ruby --- <div>{{CSSRef}}</div> -<p><ruby><strong>CSS ルビレイアウト</strong><rp> (</rp><rt>CSS Ruby Layout</rt><rp>) </rp></ruby>は <a href="/en-US/docs/Web/CSS">CSS</a> のモジュールの一つで、ルビ表記の表示に関するレンダリングモデルや整形の制御を提供します。ルビ表記は行間の表記の一種で、ベーステキストに沿った短いテキストで構成されます。これらはふつう東アジアの文書で、発音を示したり、短い説明を提供したりするために使用されます。</p> +<p><ruby><strong>CSS ルビレイアウト</strong><rp> (</rp><rt>CSS Ruby Layout</rt><rp>) </rp></ruby>は <a href="/ja/docs/Web/CSS">CSS</a> のモジュールの一つで、ルビ表記の表示に関するレンダリングモデルや整形の制御を提供します。ルビ表記は行間の表記の一種で、ベーステキストに沿った短いテキストで構成されます。これらはふつう東アジアの文書で、発音を示したり、短い説明を提供したりするために使用されます。</p> <h2 id="Reference" name="Reference">リファレンス</h2> diff --git a/files/ja/web/css/css_transitions/using_css_transitions/index.html b/files/ja/web/css/css_transitions/using_css_transitions/index.html index e1fcbc6e7e..aaeebd27ee 100644 --- a/files/ja/web/css/css_transitions/using_css_transitions/index.html +++ b/files/ja/web/css/css_transitions/using_css_transitions/index.html @@ -33,7 +33,7 @@ translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions <p>それぞれのトランジションコンポーネントに対しては以下のサブプロパティを用いてコントロールできます。</p> -<p><strong>(なお、以下のトランジションは、サンプルをお見せするために無限ループさせています。 CSS のトランジションは、プロパティの変更を始点から終点まで視覚化するだけです。ループさせる必要がある場合は、 CSS の <code><a href="/en-US/docs/CSS/animation">animation</a></code> プロパティを参照してください。)</strong></p> +<p><strong>(なお、以下のトランジションは、サンプルをお見せするために無限ループさせています。 CSS のトランジションは、プロパティの変更を始点から終点まで視覚化するだけです。ループさせる必要がある場合は、 CSS の <code><a href="/ja/docs/CSS/animation">animation</a></code> プロパティを参照してください。)</strong></p> <dl> <dt>{{cssxref("transition-property")}}</dt> diff --git a/files/ja/web/css/cssom_view/index.html b/files/ja/web/css/cssom_view/index.html index 4fca46e3e7..e3739fefa8 100644 --- a/files/ja/web/css/cssom_view/index.html +++ b/files/ja/web/css/cssom_view/index.html @@ -27,7 +27,7 @@ translation_of: Web/CSS/CSSOM_View <h2 id="Guides" name="Guides">ガイド</h2> <dl> - <dt><a href="/en-US/docs/Web/CSS/CSSOM_View/Coordinate_systems">座標系</a></dt> + <dt><a href="/ja/docs/Web/CSS/CSSOM_View/Coordinate_systems">座標系</a></dt> <dd>モニター上のウィンドウ、モバイル機器のビューポート、印刷時の紙上の位置などのディスプレイコンテキストにおける位置を特定するために使われる座標系についてのガイドです。</dd> </dl> diff --git a/files/ja/web/css/filter-function/saturate()/index.html b/files/ja/web/css/filter-function/saturate()/index.html index 47e0226594..e3261f1d8f 100644 --- a/files/ja/web/css/filter-function/saturate()/index.html +++ b/files/ja/web/css/filter-function/saturate()/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/filter-function/saturate() --- <div>{{cssref}}</div> -<p><strong><code>saturate()</code></strong> は <a href="/en-US/docs/Web/CSS">CSS</a> の関数で、入力画像の彩度を上げたり下げたりします。結果は {{cssxref("<filter-function>")}} です。</p> +<p><strong><code>saturate()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、入力画像の彩度を上げたり下げたりします。結果は {{cssxref("<filter-function>")}} です。</p> <div>{{EmbedInteractiveExample("pages/css/function-saturate.html")}}</div> diff --git a/files/ja/web/css/font-weight/index.html b/files/ja/web/css/font-weight/index.html index 9954ffbd9b..66b685f51b 100644 --- a/files/ja/web/css/font-weight/index.html +++ b/files/ja/web/css/font-weight/index.html @@ -298,7 +298,7 @@ update(); <h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> -<p>弱視の人は、 <code>font-weight</code> の値が <code>100</code> (Thin/Hairline) または <code>200</code> (Extra Light) の場合、特にフォントの<a href="/en-US/docs/Web/CSS/color#Accessibility_concerns">コントラスト比が低い場合</a>は、テキストを読むのが難しくなることがあります。</p> +<p>弱視の人は、 <code>font-weight</code> の値が <code>100</code> (Thin/Hairline) または <code>200</code> (Extra Light) の場合、特にフォントの<a href="/ja/docs/Web/CSS/color#Accessibility_concerns">コントラスト比が低い場合</a>は、テキストを読むのが難しくなることがあります。</p> <ul> <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> diff --git a/files/ja/web/css/ident/index.html b/files/ja/web/css/ident/index.html index 805dbe3e25..49117a5758 100644 --- a/files/ja/web/css/ident/index.html +++ b/files/ja/web/css/ident/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/ident --- <p>{{CSSRef}}{{Draft}}</p> -<p><span class="seoSummary"><strong><code><ident></code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">データ型</a> は、 {{glossary("identifier")}} として使用される任意の文字列を意味します。</span></p> +<p><span class="seoSummary"><strong><code><ident></code></strong> <a href="/ja/docs/Web/CSS">CSS</a> <a href="/ja/docs/Web/CSS/CSS_Types">データ型</a> は、 {{glossary("identifier")}} として使用される任意の文字列を意味します。</span></p> <h2 id="構文">構文</h2> diff --git a/files/ja/web/css/image-rendering/index.html b/files/ja/web/css/image-rendering/index.html index d83dd914e3..c158a3d034 100644 --- a/files/ja/web/css/image-rendering/index.html +++ b/files/ja/web/css/image-rendering/index.html @@ -86,7 +86,7 @@ image-rendering: unset;</pre> <p>{{EmbedLiveSample('Examples')}}</p> <div class="blockIndicator note"> -<p><strong>メモ:</strong> 実際の仕様では、 <code>pixelated</code> と <code>crisp-edges</code> の規則を組み合わせることで、お互いにある程度のフォールバックを提供することができます。 (実際の規則にフォールバックを追加するだけです) <a href="/ja/docs/Web/API/Canvas_API">Canvas API</a> は手動の画像データ操作または <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled">imageSmoothingEnabled</a></code> によって <a href="http://phrogz.net/tmp/canvas_image_zoom.html"><code>pixelated</code> の代替ソリューション</a> を提供することができます。</p> +<p><strong>メモ:</strong> 実際の仕様では、 <code>pixelated</code> と <code>crisp-edges</code> の規則を組み合わせることで、お互いにある程度のフォールバックを提供することができます。 (実際の規則にフォールバックを追加するだけです) <a href="/ja/docs/Web/API/Canvas_API">Canvas API</a> は手動の画像データ操作または <code><a href="/ja/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled">imageSmoothingEnabled</a></code> によって <a href="http://phrogz.net/tmp/canvas_image_zoom.html"><code>pixelated</code> の代替ソリューション</a> を提供することができます。</p> </div> <h2 id="Specifications" name="Specifications">仕様書</h2> diff --git a/files/ja/web/css/list-style/index.html b/files/ja/web/css/list-style/index.html index eed88a0dda..72fbb70159 100644 --- a/files/ja/web/css/list-style/index.html +++ b/files/ja/web/css/list-style/index.html @@ -104,7 +104,7 @@ List 2 <h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> -<p>Safari は順序なしリストで <code>list-style</code> の値に <code>none</code> が適用されると、アクセシビリティツリー上でリストとして認識されないという問題があります。これを解決するためには、それぞれのリスト項目の前に<a href="https://ja.wikipedia.org/wiki/%E3%82%BC%E3%83%AD%E5%B9%85%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9">ゼロ幅スペース</a>を<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content">擬似コンテンツ</a>として追加してください。これでデザインがこのバグの影響を受けず、リスト項目が正しくない記述にはなりません。</p> +<p>Safari は順序なしリストで <code>list-style</code> の値に <code>none</code> が適用されると、アクセシビリティツリー上でリストとして認識されないという問題があります。これを解決するためには、それぞれのリスト項目の前に<a href="https://ja.wikipedia.org/wiki/%E3%82%BC%E3%83%AD%E5%B9%85%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9">ゼロ幅スペース</a>を<a href="/ja/docs/Web/CSS/content">擬似コンテンツ</a>として追加してください。これでデザインがこのバグの影響を受けず、リスト項目が正しくない記述にはなりません。</p> <pre class="brush: css">ul { list-style: none; diff --git a/files/ja/web/css/mask-border-repeat/index.html b/files/ja/web/css/mask-border-repeat/index.html index 8fe78e0f1d..80d6fefd38 100644 --- a/files/ja/web/css/mask-border-repeat/index.html +++ b/files/ja/web/css/mask-border-repeat/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/mask-border-repeat --- <div>{{CSSRef}}{{SeeCompatTable}}</div> -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>mask-border-repeat</code></strong> プロパティは、どのように元の画像の<a href="/ja/docs/Web/CSS/border-image-slice#edge-regions">辺の領域</a>を要素の<a href="/en-US/docs/Web/CSS/mask-border">マスク境界</a>の寸法に合うように調整するかを設定します。</p> +<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>mask-border-repeat</code></strong> プロパティは、どのように元の画像の<a href="/ja/docs/Web/CSS/border-image-slice#edge-regions">辺の領域</a>を要素の<a href="/ja/docs/Web/CSS/mask-border">マスク境界</a>の寸法に合うように調整するかを設定します。</p> <h2 id="Syntax" name="Syntax">構文</h2> diff --git a/files/ja/web/css/max-inline-size/index.html b/files/ja/web/css/max-inline-size/index.html index 78aaacf99d..05189f14c3 100644 --- a/files/ja/web/css/max-inline-size/index.html +++ b/files/ja/web/css/max-inline-size/index.html @@ -17,7 +17,7 @@ translation_of: Web/CSS/max-inline-size --- <div>{{CSSRef}}</div> -<p><span class="seoSummary"><strong><code>max-inline-size</code></strong> は <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、書字方向に応じて要素ブロックの水平または垂直方向の最大の寸法を定義します。これは {{cssxref("max-width")}} または {{cssxref("max-height")}} のどちらかのプロパティと、 {{cssxref("writing-mode")}} の値に応じて対応します。</span></p> +<p><span class="seoSummary"><strong><code>max-inline-size</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、書字方向に応じて要素ブロックの水平または垂直方向の最大の寸法を定義します。これは {{cssxref("max-width")}} または {{cssxref("max-height")}} のどちらかのプロパティと、 {{cssxref("writing-mode")}} の値に応じて対応します。</span></p> <p>書字方向が垂直方向であった場合、 <code>max-inline-size</code> の値は要素の最大の高さに対応します。そうでなければ、要素の最大幅に対応します。関連プロパティとして、 {{cssxref("max-block-size")}} が要素のもう一方の寸法を定義します。</p> diff --git a/files/ja/web/css/max-width/index.html b/files/ja/web/css/max-width/index.html index a36a420c39..89feb27342 100644 --- a/files/ja/web/css/max-width/index.html +++ b/files/ja/web/css/max-width/index.html @@ -135,6 +135,6 @@ max-width: unset; <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="en/CSS/box_model">The box model</a>, {{cssxref("box-sizing")}}</li> + <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="en/CSS/box_model">The box model</a>, {{cssxref("box-sizing")}}</li> <li>{{cssxref("width")}}, {{cssxref("min-width")}}</li> </ul> diff --git a/files/ja/web/css/media_queries/using_media_queries/index.html b/files/ja/web/css/media_queries/using_media_queries/index.html index a24ffa4734..779ab8f669 100644 --- a/files/ja/web/css/media_queries/using_media_queries/index.html +++ b/files/ja/web/css/media_queries/using_media_queries/index.html @@ -342,7 +342,7 @@ translation_of: Web/CSS/Media_Queries/Using_media_queries <p>Media Queries Level 4 仕様書では、例えば幅や高さについて、よりすっきりとした "range" 型を持つ特性を使ってメディアクエリを作れるよう構文が拡張されました。 Level 4 はこのようなクエリを書くために<em>範囲コンテキスト</em>を追加しています。例えば、幅について <code>max-</code> の特性を使用する場合は、以下のように書くことができます。</p> <div class="note"> -<p><strong>注:</strong> Media Queries Level 4 仕様は、最新のブラウザーはそれなりに対応していますが、一部のメディア機能には十分に対応していません。詳細は <a href="/en-US/docs/Web/CSS/@media#Browser_compatibility"><code>@media</code> ブラウザー互換性一覧表</a>を参照してください。</p> +<p><strong>注:</strong> Media Queries Level 4 仕様は、最新のブラウザーはそれなりに対応していますが、一部のメディア機能には十分に対応していません。詳細は <a href="/ja/docs/Web/CSS/@media#Browser_compatibility"><code>@media</code> ブラウザー互換性一覧表</a>を参照してください。</p> </div> <pre class="brush: css">@media (max-width: 30em) { ... }</pre> diff --git a/files/ja/web/css/microsoft_extensions/index.html b/files/ja/web/css/microsoft_extensions/index.html index 31be6de5ef..57fb8e09fa 100644 --- a/files/ja/web/css/microsoft_extensions/index.html +++ b/files/ja/web/css/microsoft_extensions/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/Microsoft_Extensions --- <div>{{CSSRef}}</div> -<p>Edge や Internet Explorer のような Microsoft のアプリケーションは、いくつもの特殊な <strong> <a href="/en-US/docs/Web/CSS">CSS</a> の Microsoft 拡張</strong>に対応しています。これらの拡張には接頭辞に <code>-ms-</code> が付きます。</p> +<p>Edge や Internet Explorer のような Microsoft のアプリケーションは、いくつもの特殊な <strong> <a href="/ja/docs/Web/CSS">CSS</a> の Microsoft 拡張</strong>に対応しています。これらの拡張には接頭辞に <code>-ms-</code> が付きます。</p> <h2 id="Microsoft-only_properties_(avoid_using_on_websites)" name="Microsoft-only_properties_(avoid_using_on_websites)">Microsoft 独自プロパティ (ウェブサイトでの使用は避けてください)</h2> diff --git a/files/ja/web/css/min()/index.html b/files/ja/web/css/min()/index.html index 92631860d9..c696ddf104 100644 --- a/files/ja/web/css/min()/index.html +++ b/files/ja/web/css/min()/index.html @@ -15,7 +15,7 @@ translation_of: Web/CSS/min() --- <div>{{CSSRef}}</div> -<p><strong><code>min()</code></strong> は <a href="/en-US/docs/Web/CSS">CSS</a> 関数で、 CSS プロパティの値としてカンマで区切られた式のリストから最小の (最も負である) 値を設定できます。 <code>min()</code> 関数は {{CSSxRef("<length>")}}、{{CSSxRef("<frequency>")}},、{{CSSxRef("<angle>")}}、{{CSSxRef("<time>")}}、{{CSSxRef("<percentage>")}}、{{CSSxRef("<number>")}}、{{CSSxRef("<integer>")}} が利用できるところならばどこでも使用することができます。</p> +<p><strong><code>min()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> 関数で、 CSS プロパティの値としてカンマで区切られた式のリストから最小の (最も負である) 値を設定できます。 <code>min()</code> 関数は {{CSSxRef("<length>")}}、{{CSSxRef("<frequency>")}},、{{CSSxRef("<angle>")}}、{{CSSxRef("<time>")}}、{{CSSxRef("<percentage>")}}、{{CSSxRef("<number>")}}、{{CSSxRef("<integer>")}} が利用できるところならばどこでも使用することができます。</p> <pre class="brush: css; no-line-numbers">/* プロパティ: min(式 [, 式]) */ width: min(10vw, 4em, 80px); diff --git a/files/ja/web/css/min-block-size/index.html b/files/ja/web/css/min-block-size/index.html index 764f47a68b..5e27a77b8b 100644 --- a/files/ja/web/css/min-block-size/index.html +++ b/files/ja/web/css/min-block-size/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/min-block-size --- <div>{{CSSRef}}</div> -<p><span class="seoSummary"><code>min-block-size</code> は <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、書字方向に応じて要素ブロックの水平または垂直方向の最小の寸法を定義します。これは {{cssxref("min-width")}} または {{cssxref("min-height")}} のどちらかのプロパティと、 {{cssxref("writing-mode")}} の値に応じて対応します。</span></p> +<p><span class="seoSummary"><code>min-block-size</code> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、書字方向に応じて要素ブロックの水平または垂直方向の最小の寸法を定義します。これは {{cssxref("min-width")}} または {{cssxref("min-height")}} のどちらかのプロパティと、 {{cssxref("writing-mode")}} の値に応じて対応します。</span></p> <p>書字方向が垂直方向であった場合、 <code>min-block-size</code> の値は要素の最小幅に対応します。そうでなければ、要素の最小の高さに対応します。関連プロパティの {{cssxref("min-inline-size")}} が要素のもう一方の寸法を定義します。</p> diff --git a/files/ja/web/css/min-inline-size/index.html b/files/ja/web/css/min-inline-size/index.html index ebe1bb72db..d14c3fef6d 100644 --- a/files/ja/web/css/min-inline-size/index.html +++ b/files/ja/web/css/min-inline-size/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/min-inline-size --- <div>{{CSSRef}}</div> -<p><span class="seoSummary"><strong><code>min-inline-size</code></strong> は <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、書字方向に応じて要素ブロックの水平または垂直方向の最小の寸法を定義します。これは {{cssxref("min-width")}} または {{cssxref("min-height")}} のどちらかのプロパティと、 {{cssxref("writing-mode")}} の値に応じて対応します。</span></p> +<p><span class="seoSummary"><strong><code>min-inline-size</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、書字方向に応じて要素ブロックの水平または垂直方向の最小の寸法を定義します。これは {{cssxref("min-width")}} または {{cssxref("min-height")}} のどちらかのプロパティと、 {{cssxref("writing-mode")}} の値に応じて対応します。</span></p> <p>書字方向が垂直方向であった場合、 <code>min-inline-size</code> の値は要素の最小の高さに対応します。そうでなければ、要素の最小幅に対応します。関連プロパティの {{cssxref("min-block-size")}} が要素のもう一方の寸法を定義します。</p> diff --git a/files/ja/web/css/opacity/index.html b/files/ja/web/css/opacity/index.html index c084127fe7..48781e619b 100644 --- a/files/ja/web/css/opacity/index.html +++ b/files/ja/web/css/opacity/index.html @@ -96,7 +96,7 @@ img.opacity:hover { zoom: 1; }</pre> -<pre class="brush: html notranslate"><img src="<a href="https://developer.mozilla.org/static/img/opengraph-logo.png">//developer.mozilla.org/static/img/opengraph-logo.png</a>" +<pre class="brush: html notranslate"><img src="<a href="/static/img/opengraph-logo.png">//developer.mozilla.org/static/img/opengraph-logo.png</a>" alt="MDN ロゴ" width="128" height="146" class="opacity"> </pre> diff --git a/files/ja/web/css/outline-offset/index.html b/files/ja/web/css/outline-offset/index.html index 083fff585d..5995f59e76 100644 --- a/files/ja/web/css/outline-offset/index.html +++ b/files/ja/web/css/outline-offset/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/outline-offset --- <div>{{CSSRef}}</div> -<p>CSS の <strong><code>outline-offset</code></strong> プロパティは、要素の辺や境界線と<a href="/docs/Web/CSS/outline">輪郭線</a>との空間の量を設定します。</p> +<p>CSS の <strong><code>outline-offset</code></strong> プロパティは、要素の辺や境界線と<a href="/ja/docs/Web/CSS/outline">輪郭線</a>との空間の量を設定します。</p> <div>{{EmbedInteractiveExample("pages/css/outline-offset.html")}}</div> diff --git a/files/ja/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html b/files/ja/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html index 58c2e91cee..2a71ff016a 100644 --- a/files/ja/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html +++ b/files/ja/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html @@ -89,6 +89,6 @@ translation_of: Web/CSS/overflow-anchor/Guide_to_scroll_anchoring <h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> -<p>ブラウザーでスクロールアンカリングが利用できるかどうかを検査する必要がある場合は、<a href="/en-US/docs/Web/CSS/@supports">特性クエリ</a>を使用して <code>overflow-anchor</code> プロパティに対応しているかどうかを検査してください。</p> +<p>ブラウザーでスクロールアンカリングが利用できるかどうかを検査する必要がある場合は、<a href="/ja/docs/Web/CSS/@supports">特性クエリ</a>を使用して <code>overflow-anchor</code> プロパティに対応しているかどうかを検査してください。</p> <p>{{Compat("css.properties.overflow-anchor")}}</p> diff --git a/files/ja/web/css/ratio/index.html b/files/ja/web/css/ratio/index.html index f89fd4acdf..63446d71b4 100644 --- a/files/ja/web/css/ratio/index.html +++ b/files/ja/web/css/ratio/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/ratio --- <p>{{CSSRef}}</p> -<p><strong><code><ratio></code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、<a href="/en-US/docs/Web/CSS/@media/aspect-ratio">アスペクト比</a>を<a href="/en-US/docs/Web/CSS/Media_Queries">メディアクエリ</a>内で記述するために使用し、2つの単位のない値で比率を記述します。</p> +<p><strong><code><ratio></code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、<a href="/ja/docs/Web/CSS/@media/aspect-ratio">アスペクト比</a>を<a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリ</a>内で記述するために使用し、2つの単位のない値で比率を記述します。</p> <h2 id="Syntax" name="Syntax">構文</h2> diff --git a/files/ja/web/css/scroll-snap-coordinate/index.html b/files/ja/web/css/scroll-snap-coordinate/index.html index 1a8c9a49d8..1a9e185a3b 100644 --- a/files/ja/web/css/scroll-snap-coordinate/index.html +++ b/files/ja/web/css/scroll-snap-coordinate/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/scroll-snap-coordinate --- <div>{{CSSRef}}{{deprecated_header}}</div> -<p><a href="/en-US/docs/Web/CSS">CSS</a> の <strong><code>scroll-snap-coordinate</code></strong> プロパティは、このプロパティは、最も近い祖先のスクロールコンテナーの {{cssxref("scroll-snap-destination")}} に配置される要素内の X 座標と Y 座標の位置をそれぞれの軸で定義します。</p> +<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>scroll-snap-coordinate</code></strong> プロパティは、このプロパティは、最も近い祖先のスクロールコンテナーの {{cssxref("scroll-snap-destination")}} に配置される要素内の X 座標と Y 座標の位置をそれぞれの軸で定義します。</p> <pre class="brush:css no-line-numbers">/* キーワード値 */ scroll-snap-coordinate: none; diff --git a/files/ja/web/css/shape/index.html b/files/ja/web/css/shape/index.html index 5691317b29..c4cc8fcae2 100644 --- a/files/ja/web/css/shape/index.html +++ b/files/ja/web/css/shape/index.html @@ -77,5 +77,5 @@ translation_of: Web/CSS/shape <ul> <li>関連 CSS プロパティ: {{Cssxref("clip")}}</li> - <li><a href="/en-US/CSS/-moz-image-rect" title="CSS/-moz-image-rect"><code>-moz-image-rect()</code></a> 関数は <code>rect()</code>と似た座標を使います</li> + <li><a href="/ja/CSS/-moz-image-rect" title="CSS/-moz-image-rect"><code>-moz-image-rect()</code></a> 関数は <code>rect()</code>と似た座標を使います</li> </ul> diff --git a/files/ja/web/css/specificity/index.html b/files/ja/web/css/specificity/index.html index 0432121930..88b4080d96 100644 --- a/files/ja/web/css/specificity/index.html +++ b/files/ja/web/css/specificity/index.html @@ -29,7 +29,7 @@ translation_of: Web/CSS/Specificity <ol> <li><a href="/ja/docs/Web/CSS/Type_selectors">要素型セレクター</a> (例えば <code>h1</code>) と 擬似要素 (例えば <code>::before</code>)</li> <li><a href="/ja/docs/Web/CSS/Class_selectors">クラスセレクター</a> (例えば <code>.example</code>)、属性セレクター (例えば <code>[type="radio"]</code>)、擬似クラス (例えば <code>:hover</code>)</li> - <li><a href="/en-US/docs/Web/CSS/ID_selectors">ID セレクター</a> (例えば <code>#example</code>)</li> + <li><a href="/ja/docs/Web/CSS/ID_selectors">ID セレクター</a> (例えば <code>#example</code>)</li> </ol> <p>全称セレクター ({{CSSxRef("Universal_selectors", "*")}}), 結合子 ({{CSSxRef("Adjacent_sibling_combinator", "+")}}, {{CSSxRef("Child_combinator", ">")}}, {{CSSxRef("General_sibling_combinator", "~")}}, <a href="/ja/docs/Web/CSS/Descendant_combinator" style="white-space: nowrap;">'<code> </code>'</a>, {{CSSxRef("Column_combinator", "||")}}), 否定擬似クラス ({{CSSxRef(":not", ":not()")}}) は詳細度に影響を与えません。 (但し、 <code>:not()</code> の<em>中で</em>宣言されたセレクターは影響を与えます。)</p> @@ -40,7 +40,7 @@ translation_of: Web/CSS/Specificity <h3 id="The_!important_exception" name="The_!important_exception">!important の例外</h3> -<p><code>!important</code> 規則がスタイル宣言で使われたとき、それが宣言リストのどこであっても、この宣言は CSS 内で作られたその他の宣言を上書きします。技術的には <code>!important</code> は詳細度とは無関係ですが、直接作用します。しかし、スタイルの自然の<a href="/en-US/docs/Web/CSS/Cascade">カスケード</a>を破壊するためデバッグが難しくなるので、 <code>!important</code> を使用することは<strong>悪い習慣</strong>であり、使用を避けるべきです。同じ要素に二つの競合する宣言が <code>!important</code> 規則付きで適用された場合、より高い詳細度の宣言が適用されます。</p> +<p><code>!important</code> 規則がスタイル宣言で使われたとき、それが宣言リストのどこであっても、この宣言は CSS 内で作られたその他の宣言を上書きします。技術的には <code>!important</code> は詳細度とは無関係ですが、直接作用します。しかし、スタイルの自然の<a href="/ja/docs/Web/CSS/Cascade">カスケード</a>を破壊するためデバッグが難しくなるので、 <code>!important</code> を使用することは<strong>悪い習慣</strong>であり、使用を避けるべきです。同じ要素に二つの競合する宣言が <code>!important</code> 規則付きで適用された場合、より高い詳細度の宣言が適用されます。</p> <p><strong>いくつかの経験則</strong></p> diff --git a/files/ja/web/css/syntax/index.html b/files/ja/web/css/syntax/index.html index 12a2ce4efd..30b41c6dda 100644 --- a/files/ja/web/css/syntax/index.html +++ b/files/ja/web/css/syntax/index.html @@ -68,7 +68,7 @@ translation_of: Web/CSS/Syntax <p>文には二種類があります。</p> <ul> - <li><strong>規則セット</strong> (または<em>規則</em>)。ここまで見てきたように、 CSS の宣言の集合を、<a href="/en-US/docs/Web/CSS/CSS_Selectors">セレクター</a>によって表現された状態に関連付けています。</li> + <li><strong>規則セット</strong> (または<em>規則</em>)。ここまで見てきたように、 CSS の宣言の集合を、<a href="/ja/docs/Web/CSS/CSS_Selectors">セレクター</a>によって表現された状態に関連付けています。</li> <li><strong>アット規則</strong>。アットマーク '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>) で始まり、識別子が後続し、ブロックの外のセミコロンまたは次のブロックの終わりに至るまで続きます。それぞれの種類の <a href="/ja/docs/Web/CSS/At-rule">アット規則</a>は、識別子によって定義され、当然ながら独自の内部構文や意味を持つことがあります。アット規則はメタデータ情報 ({{ cssxref("@charset") }} や {{ cssxref("@import") }} など) を伝えたり、条件情報 ({{ cssxref("@media") }} や {{ cssxref("@document") }}) など) を伝えたり、記述的情報 ({{ cssxref("@font-face") }} など) を伝えたりするために使用します。</li> </ul> diff --git a/files/ja/web/css/text-align/index.html b/files/ja/web/css/text-align/index.html index 524c430472..40f11c6cfa 100644 --- a/files/ja/web/css/text-align/index.html +++ b/files/ja/web/css/text-align/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/text-align --- <div>{{CSSRef}}</div> -<p><strong><code>text-align</code></strong> は <a href="/en-US/docs/Web/CSS">CSS</a> のプロパティで、ブロック要素または表セルボックスの水平方向の配置を設定します。つまり、 {{cssxref("vertical-align")}} のように、ただし水平方向に動作します。</p> +<p><strong><code>text-align</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、ブロック要素または表セルボックスの水平方向の配置を設定します。つまり、 {{cssxref("vertical-align")}} のように、ただし水平方向に動作します。</p> <div>{{EmbedInteractiveExample("pages/css/text-align.html")}}</div> diff --git a/files/ja/web/css/text-orientation/index.html b/files/ja/web/css/text-orientation/index.html index 67a799f713..268ca05408 100644 --- a/files/ja/web/css/text-orientation/index.html +++ b/files/ja/web/css/text-orientation/index.html @@ -99,7 +99,7 @@ text-orientation: unset; <ul> <li>他の縦書きに関連する CSS プロパティ: {{cssxref("writing-mode")}}, {{cssxref("text-combine-upright")}}, {{cssxref("unicode-bidi")}}</li> - <li><a href="/docs/Web/CSS/CSS_Logical_Properties">CSS 論理的プロパティ</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Logical_Properties">CSS 論理的プロパティ</a></li> <li><a href="https://www.w3.org/International/articles/vertical-text/">縦書きテキストのスタイル付け (中国語、日本語、韓国語、モンゴル語)</a></li> <li>広範なブラウザーの対応状況テキスト結果: <a href="https://w3c.github.io/i18n-tests/results/horizontal-in-vertical.html#text_orientation">https://w3c.github.io/i18n-tests/results/horizontal-in-vertical.html#text_orientation</a></li> </ul> diff --git a/files/ja/web/css/transform-function/rotatez()/index.html b/files/ja/web/css/transform-function/rotatez()/index.html index aec4b6a9ce..5c0618adf5 100644 --- a/files/ja/web/css/transform-function/rotatez()/index.html +++ b/files/ja/web/css/transform-function/rotatez()/index.html @@ -21,7 +21,7 @@ translation_of: Web/CSS/transform-function/rotateZ() <p>回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。</p> <div class="note"> -<p><strong>メモ:</strong> <code>rotateZ(a)</code> は <code><a href="/en-US/docs/Web/CSS/transform-function/rotate">rotate</a>(a)</code> または <code><a href="/ja/docs/Web/CSS/transform-function/rotate3d">rotate3d</a>(0, 0, 1, a)</code> と等価です。</p> +<p><strong>メモ:</strong> <code>rotateZ(a)</code> は <code><a href="/ja/docs/Web/CSS/transform-function/rotate">rotate</a>(a)</code> または <code><a href="/ja/docs/Web/CSS/transform-function/rotate3d">rotate3d</a>(0, 0, 1, a)</code> と等価です。</p> </div> <div class="note"><strong>メモ:</strong> 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。</div> diff --git a/files/ja/web/css/transform-function/scale()/index.html b/files/ja/web/css/transform-function/scale()/index.html index 585964f29b..e4b78176ec 100644 --- a/files/ja/web/css/transform-function/scale()/index.html +++ b/files/ja/web/css/transform-function/scale()/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/transform-function/scale() --- <div>{{CSSRef}}</div> -<p><strong><code>scale()</code></strong> は <a href="/docs/Web/CSS">CSS</a> 関数で、二次元平面上における拡縮する変形を定義します変倍の量がベクトルで定義されるため、水平方向と垂直方向に対して異なる変倍で大きさを変えることができます。結果は {{cssxref("<transform-function>")}} データ型になります。</p> +<p><strong><code>scale()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> 関数で、二次元平面上における拡縮する変形を定義します変倍の量がベクトルで定義されるため、水平方向と垂直方向に対して異なる変倍で大きさを変えることができます。結果は {{cssxref("<transform-function>")}} データ型になります。</p> <p><img src="https://mdn.mozillademos.org/files/12115/scale.png" style="height: 325px; width: 392px;"></p> @@ -18,7 +18,7 @@ translation_of: Web/CSS/transform-function/scale() <p>座標の値が [-1, 1] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は <a href="https://ja.wikipedia.org/wiki/点対称">点対称化</a> と大きさの変更を行います。1 と等しい場合、変倍は何もしません。</p> -<div class="note"><strong>メモ:</strong> <code>scale()</code> 関数は、二次元の変換のみに適用されます。三次元空間内での変倍を行うには、 <code><a href="/docs/Web/CSS/transform-function/scale3d">scale3d()</a></code> 関数を使用してください。</div> +<div class="note"><strong>メモ:</strong> <code>scale()</code> 関数は、二次元の変換のみに適用されます。三次元空間内での変倍を行うには、 <code><a href="/ja/docs/Web/CSS/transform-function/scale3d">scale3d()</a></code> 関数を使用してください。</div> <h2 id="Syntax" name="Syntax">構文</h2> diff --git a/files/ja/web/css/transform-function/scalex()/index.html b/files/ja/web/css/transform-function/scalex()/index.html index 72dbcfc046..8548b169c4 100644 --- a/files/ja/web/css/transform-function/scalex()/index.html +++ b/files/ja/web/css/transform-function/scalex()/index.html @@ -5,9 +5,9 @@ translation_of: Web/CSS/transform-function/scaleX() --- <div>{{CSSRef}}</div> -<div><a href="https://developer.mozilla.org/ja/docs/Web/CSS">CSS</a>の<strong><code>scaleX()</code></strong> 関数は、要素をX軸に沿って（水平に）拡縮する変形を定義します。</div> +<div><a href="/ja/docs/Web/CSS">CSS</a>の<strong><code>scaleX()</code></strong> 関数は、要素をX軸に沿って（水平に）拡縮する変形を定義します。</div> -<div>結果は <a href="https://developer.mozilla.org/ja/docs/Web/CSS/transform-function" title="CSS の <transform-function> データ型は、要素の外見の変形を表します。変形関数は二次元または三次元空間で要素を回転、拡大縮小、歪曲、移動させることができます。これは transform プロパティの中で使用されます。"><code><transform-function></code></a> データ型になります。</div> +<div>結果は <a href="/ja/docs/Web/CSS/transform-function" title="CSS の <transform-function> データ型は、要素の外見の変形を表します。変形関数は二次元または三次元空間で要素を回転、拡大縮小、歪曲、移動させることができます。これは transform プロパティの中で使用されます。"><code><transform-function></code></a> データ型になります。</div> <div></div> @@ -15,10 +15,10 @@ translation_of: Web/CSS/transform-function/scaleX() <p><img src="https://mdn.mozillademos.org/files/12117/scaleX.png" style="height: 315px; width: 372px;"></p> -<p>係数が 1 である場合を除いて、各要素点の横座標を一定の係数で修正し、この場合、関数は恒等変換です。拡大縮小は等方性ではなく、要素の角度は保存されません。 <code>scaleX(-1)</code> は<a href="http://en.wikipedia.org/wiki/Axial_symmetry" rel="noopener">軸の線対称</a>を定義し、垂直軸は原点を通過します (<a href="https://developer.mozilla.org/ja/docs/Web/CSS/transform-origin" title="CSS の transform-origin プロパティは、要素の変形 (transform) における原点を設定します。"><code>transform-origin</code></a> プロパティで指定)。</p> +<p>係数が 1 である場合を除いて、各要素点の横座標を一定の係数で修正し、この場合、関数は恒等変換です。拡大縮小は等方性ではなく、要素の角度は保存されません。 <code>scaleX(-1)</code> は<a href="http://en.wikipedia.org/wiki/Axial_symmetry" rel="noopener">軸の線対称</a>を定義し、垂直軸は原点を通過します (<a href="/ja/docs/Web/CSS/transform-origin" title="CSS の transform-origin プロパティは、要素の変形 (transform) における原点を設定します。"><code>transform-origin</code></a> プロパティで指定)。</p> <div class="note"> -<p><strong>メモ:</strong> <code>scaleX(sx)</code>は<code><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="background-color: #fff3d4;"> </span></font></code><code><a href="/en-US/docs/Web/CSS/transform-function/scale">scale</a>(sx, 1)</code>または<code><a href="/en-US/docs/Web/CSS/transform-function/scale3d">scale3d</a>(sx, 1, 1)</code>と等価です。</p> +<p><strong>メモ:</strong> <code>scaleX(sx)</code>は<code><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="background-color: #fff3d4;"> </span></font></code><code><a href="/ja/docs/Web/CSS/transform-function/scale">scale</a>(sx, 1)</code>または<code><a href="/ja/docs/Web/CSS/transform-function/scale3d">scale3d</a>(sx, 1, 1)</code>と等価です。</p> </div> <h2 id="Syntax">Syntax</h2> @@ -108,8 +108,8 @@ translation_of: Web/CSS/transform-function/scaleX() <h2 id="See_also">See also</h2> <ul> - <li><code><a href="/en-US/docs/Web/CSS/transform-function/scaleY">scaleY()</a></code></li> - <li><code><a href="/en-US/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></li> + <li><code><a href="/ja/docs/Web/CSS/transform-function/scaleY">scaleY()</a></code></li> + <li><code><a href="/ja/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></li> <li>{{cssxref("transform")}}</li> <li>{{cssxref("<transform-function>")}}</li> <li>{{cssxref("transform-origin")}}</li> diff --git a/files/ja/web/css/transform-function/translate()/index.html b/files/ja/web/css/transform-function/translate()/index.html index a2c8c98f51..01b7d7e801 100644 --- a/files/ja/web/css/transform-function/translate()/index.html +++ b/files/ja/web/css/transform-function/translate()/index.html @@ -65,7 +65,7 @@ transform: translate(30%, 50%); <h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> -<pre class="syntaxbox notranslate">translate({{cssxref("<length-percentage>")}} , {{cssxref("<length-percentage>")}}<a href="/en-US/docs/Web/CSS/Value_definition_syntax#Question_mark_()">?</a>) +<pre class="syntaxbox notranslate">translate({{cssxref("<length-percentage>")}} , {{cssxref("<length-percentage>")}}<a href="/ja/docs/Web/CSS/Value_definition_syntax#Question_mark_()">?</a>) </pre> <h2 id="Examples" name="Examples">例</h2> diff --git a/files/ja/web/css/transform-function/translatey()/index.html b/files/ja/web/css/transform-function/translatey()/index.html index e0fd47a7bb..ea004906f7 100644 --- a/files/ja/web/css/transform-function/translatey()/index.html +++ b/files/ja/web/css/transform-function/translatey()/index.html @@ -11,12 +11,12 @@ translation_of: Web/CSS/transform-function/translateY() --- <div>{{CSSRef}}</div> -<p><strong><code>translateX()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/en-US/docs/Web/CSS/CSS_Functions">function</a>で、要素を二次元平面上の水平方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。</p> +<p><strong><code>translateX()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/s/Web/CSS/CSS_Functions">function</a>で、要素を二次元平面上の水平方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。</p> <p><img alt="" src="https://mdn.mozillademos.org/files/3544/transform-functions-translateX_2.png" style="height: 146px; width: 243px;"></p> <div class="note"> -<p><strong>注:</strong> <code>translateX(tx)</code> は <code><a href="/en-US/docs/Web/CSS/transform-function/translate">translate</a>(tx, 0)</code> または <code><a href="/en-US/docs/Web/CSS/transform-function/translate3d">translate3d</a>(tx, 0, 0)</code> と等価です。</p> +<p><strong>注:</strong> <code>translateX(tx)</code> は <code><a href="/ja/s/Web/CSS/transform-function/translate">translate</a>(tx, 0)</code> または <code><a hrehref="/ja/eb/CSS/transform-function/translate3d">translate3d</a>(tx, 0, 0)</code> と等価です。</p> </div> <h2 id="Syntax" name="Syntax">構文</h2> diff --git a/files/ja/web/css/transform/index.html b/files/ja/web/css/transform/index.html index 78f00715d3..360b12a5a4 100644 --- a/files/ja/web/css/transform/index.html +++ b/files/ja/web/css/transform/index.html @@ -16,10 +16,10 @@ translation_of: Web/CSS/transform <p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> -<p>このプロパティに <code>none</code> 以外の値が設定されていると、<a href="/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a> が作成されます。この場合、その要素はその中に含まれる <code>position: fixed;</code> または <code>position: absolute;</code> である要素すべての<a href="/ja/docs/Web/CSS/Containing_block">包含ブロック</a>として扱われます。</p> +<p>このプロパティに <code>none</code> 以外の値が設定されていると、<a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a> が作成されます。この場合、その要素はその中に含まれる <code>position: fixed;</code> または <code>position: absolute;</code> である要素すべての<a href="/ja/docs/Web/CSS/Containing_block">包含ブロック</a>として扱われます。</p> <div class="warning"> -<p>変形可能な要素のみが <code>transform</code> の対象になります。つまり、レイアウトが CSS ボックスモデルによって管理される、<a href="/ja/docs/Web/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes">非置換インラインボックス</a>、<a href="/ja/docs/Web/HTML/Element/col">表の列ボックス</a>、<a href="/en-US/docs/Web/HTML/Element/colgroup">表の列グループボックス</a>を除くすべての要素です。</p> +<p>変形可能な要素のみが <code>transform</code> の対象になります。つまり、レイアウトが CSS ボックスモデルによって管理される、<a href="/ja/docs/Web/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes">非置換インラインボックス</a>、<a href="/ja/docs/Web/HTML/Element/col">表の列ボックス</a>、<a href="/ja/docs/Web/HTML/Element/colgroup">表の列グループボックス</a>を除くすべての要素です。</p> </div> <h2 id="Syntax" name="Syntax">構文</h2> diff --git a/files/ja/web/css/transition-delay/index.html b/files/ja/web/css/transition-delay/index.html index ef4969ab8b..cea8b9b669 100644 --- a/files/ja/web/css/transition-delay/index.html +++ b/files/ja/web/css/transition-delay/index.html @@ -350,6 +350,6 @@ var intervalID = window.setInterval(updateTransition, 7000); <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジションの利用</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジションの利用</a></li> <li>{{domxref("TransitionEvent")}}</li> </ul> diff --git a/files/ja/web/css/transition-timing-function/index.html b/files/ja/web/css/transition-timing-function/index.html index b7f542f49d..bce50156f2 100644 --- a/files/ja/web/css/transition-timing-function/index.html +++ b/files/ja/web/css/transition-timing-function/index.html @@ -245,7 +245,7 @@ var intervalID = window.setInterval(updateTransition, 10000); <p>Some animations can be helpful such as to guide users to understand what actions are expected, to show relationships within the user interface, and to inform users as to what actions have occurred. Animations can help reduce cognitive load, prevent change blindness, and establish better recall in spatial relationships. However, some animations can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD) and certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.</p> -<p>Consider providing a mechanism for pausing or disabling animation, as well as using the <a href="/en-US/docs/Web/CSS/@media/prefers-reduced-motion">Reduced Motion Media Query</a> to create a complimentary experience for users who have expressed a preference for no animated experiences.</p> +<p>Consider providing a mechanism for pausing or disabling animation, as well as using the <a href="/ja/docs/Web/CSS/@media/prefers-reduced-motion">Reduced Motion Media Query</a> to create a complimentary experience for users who have expressed a preference for no animated experiences.</p> <h2 id="Specifications" name="Specifications">仕様書</h2> diff --git a/files/ja/web/css/writing-mode/index.html b/files/ja/web/css/writing-mode/index.html index 8b0ff5b9e1..a93f090c81 100644 --- a/files/ja/web/css/writing-mode/index.html +++ b/files/ja/web/css/writing-mode/index.html @@ -212,12 +212,12 @@ th { <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li>SVG <code><a href="/docs/Web/SVG/Attribute/writing-mode">writing-mode</a></code> 属性</li> + <li>SVG <code><a href="/ja/docs/Web/SVG/Attribute/writing-mode">writing-mode</a></code> 属性</li> <li>{{Cssxref("direction")}}</li> <li>{{Cssxref("unicode-bidi")}}</li> <li>{{Cssxref("text-orientation")}}</li> <li>{{Cssxref("text-combine-upright")}}</li> - <li><a href="/docs/Web/CSS/CSS_Logical_Properties">CSS 論理的プロパティ</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Logical_Properties">CSS 論理的プロパティ</a></li> <li><a href="https://www.w3.org/International/articles/vertical-text/">Styling vertical text (Chinse, Japanese, Korean and Mongolian)</a></li> <li>広範なブラウザーの対応試験結果: <a href="https://w3c.github.io/i18n-tests/results/writing-mode-vertical">https://w3c.github.io/i18n-tests/results/writing-mode-vertical</a></li> </ul> diff --git a/files/ja/web/css/zoom/index.html b/files/ja/web/css/zoom/index.html index 05a0b31803..f1b5d43695 100644 --- a/files/ja/web/css/zoom/index.html +++ b/files/ja/web/css/zoom/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/zoom --- <div>{{CSSRef}}{{Non-standard_header}}</div> -<p><span class="seoSummary"> <a href="/en-US/docs/Web/CSS">CSS</a> の標準外の <strong><dfn><code>zoom</code></dfn></strong> プロパティは、要素の拡大率を制御するために使用することができます。</span>できれば、このプロパティの代わりに {{cssxref("transform-function/scale", "transform: scale()")}} を使用してください。ただし、 CSS 変換とは異なり、 <code>zoom</code> は要素のレイアウト時の大きさに影響します。</p> +<p><span class="seoSummary"> <a href="/ja/docs/Web/CSS">CSS</a> の標準外の <strong><dfn><code>zoom</code></dfn></strong> プロパティは、要素の拡大率を制御するために使用することができます。</span>できれば、このプロパティの代わりに {{cssxref("transform-function/scale", "transform: scale()")}} を使用してください。ただし、 CSS 変換とは異なり、 <code>zoom</code> は要素のレイアウト時の大きさに影響します。</p> <pre class="brush: css no-line-numbers">/* キーワード値 */ zoom: normal; diff --git a/files/ja/web/javascript/closures/index.html b/files/ja/web/javascript/closures/index.html index 8a4e6c0684..2190a861c0 100644 --- a/files/ja/web/javascript/closures/index.html +++ b/files/ja/web/javascript/closures/index.html @@ -367,7 +367,7 @@ function setupHelp() { setupHelp();</pre> -<p>これ以上クロージャを使いたくない場合、ES2015 で導入された <code><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/let">let</a></code> キーワードも使用できます:</p> +<p>これ以上クロージャを使いたくない場合、ES2015 で導入された <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/let">let</a></code> キーワードも使用できます:</p> <pre class="brush: js notranslate">function showHelp(help) { document.getElementById('help').innerHTML = help; diff --git a/files/ja/web/javascript/eventloop/index.html b/files/ja/web/javascript/eventloop/index.html index a4b43d4e8a..712eddebfb 100644 --- a/files/ja/web/javascript/eventloop/index.html +++ b/files/ja/web/javascript/eventloop/index.html @@ -65,14 +65,14 @@ console.log(bar(7)); // returns 42 <p>Webブラウザでは、メッセージは、イベントが発生し、それに接続されているイベントリスナーがある任意の時間に追加されます。イベントリスナーがない場合、イベントは失われます。だから、他のイベントと同様に、クリックイベントハンドラを持つ要素をクリックすると、メッセージが追加されます。</p> -<p><code><a href="/docs/Web/API/WindowTimers.setTimeout" title="/docs/window.setTimeout">setTimeout</a></code>を呼び出すと、2番目の引数として渡された時間が経過した後、メッセージがキューに追加されます。キューに他のメッセージがない場合、メッセージはすぐに処理されます。しかしながら、メッセージがある場合、<code>setTimeout</code>メッセージは他のメッセージを処理するために待機する必要があります。そのため第二引数は、保証時間ではなく、最小の時間を示しています。</p> +<p><code><a href="/ja/docs/Web/API/WindowTimers.setTimeout" title="/docs/window.setTimeout">setTimeout</a></code>を呼び出すと、2番目の引数として渡された時間が経過した後、メッセージがキューに追加されます。キューに他のメッセージがない場合、メッセージはすぐに処理されます。しかしながら、メッセージがある場合、<code>setTimeout</code>メッセージは他のメッセージを処理するために待機する必要があります。そのため第二引数は、保証時間ではなく、最小の時間を示しています。</p> <h3 id="一緒に通信するいくつかのランタイム">一緒に通信するいくつかのランタイム</h3> -<p>ウェブワーカーやクロスオリジンのiframeは、独自のスタック、ヒープ、およびメッセージキューがあります。二つの異なるランタイムのみ<a href="/docs/DOM/window.postMessage" title="/docs/DOM/window.postMessage"><code>postMessage</code></a>メソッドによって送信メッセージを介して通信することができます。他のランタイムが<code>message</code>イベントをリッスンする場合、このメソッドは他のランタイムにメッセージを追加します。</p> +<p>ウェブワーカーやクロスオリジンのiframeは、独自のスタック、ヒープ、およびメッセージキューがあります。二つの異なるランタイムのみ<a href="/ja/docs/DOM/window.postMessage" title="/docs/DOM/window.postMessage"><code>postMessage</code></a>メソッドによって送信メッセージを介して通信することができます。他のランタイムが<code>message</code>イベントをリッスンする場合、このメソッドは他のランタイムにメッセージを追加します。</p> <h2 id="ブロッキング不可">ブロッキング不可</h2> -<p>イベントループモデルの非常に興味深い特性は、他の多くの言語とは異なり、JavaScriptは決してブロックしないことです。I/Oの取り扱いは、通常、イベントとコールバックを介して行われます。そのため、アプリケーションは<a href="/docs/Web/API/IndexedDB_API" title="/docs/IndexedDB">IndexedDB</a>のクエリや<a href="/docs/Web/API/XMLHttpRequest" title="/docs/DOM/XMLHttpRequest">XHR</a>リクエストが返るのを待っている時も、ユーザ入力のような他のことを処理することができます。</p> +<p>イベントループモデルの非常に興味深い特性は、他の多くの言語とは異なり、JavaScriptは決してブロックしないことです。I/Oの取り扱いは、通常、イベントとコールバックを介して行われます。そのため、アプリケーションは<a href="/ja/docs/Web/API/IndexedDB_API" title="/docs/IndexedDB">IndexedDB</a>のクエリや<a href="/ja/docs/Web/API/XMLHttpRequest" title="/docs/DOM/XMLHttpRequest">XHR</a>リクエストが返るのを待っている時も、ユーザ入力のような他のことを処理することができます。</p> <p><code>alert</code>か同期XHRのようにレガシーな例外が存在しますが、それらを避けることは良い慣習とされています。<a href="http://stackoverflow.com/questions/2734025/is-javascript-guaranteed-to-be-single-threaded/2734311#2734311">例外に対する例外は存在する</a>ことに気をつけてください(と言っても、たいていは他の何かというよりはむしろ実装のバグですが)。</p> diff --git a/files/ja/web/javascript/guide/functions/index.html b/files/ja/web/javascript/guide/functions/index.html index c63d481d0c..ffc6ad9752 100644 --- a/files/ja/web/javascript/guide/functions/index.html +++ b/files/ja/web/javascript/guide/functions/index.html @@ -59,7 +59,7 @@ y = mycar.make; // y は "Toyota" という値になる <h3 id="Function_expressions">関数式</h3> -<p>ここまでの関数宣言はすべて構文的な文でしたが、関数は<a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">関数式</a>によって作成することもできます。</p> +<p>ここまでの関数宣言はすべて構文的な文でしたが、関数は<a href="/ja/docs/Web/JavaScript/Reference/Operators/function">関数式</a>によって作成することもできます。</p> <p>このような関数は<strong>無名</strong> (anonymous) にすることができます。名前をつけなくてもよいのです。例えば、関数 <code>square</code> は次のように定義することができます。</p> diff --git a/files/ja/web/javascript/guide/grammar_and_types/index.html b/files/ja/web/javascript/guide/grammar_and_types/index.html index b32688e6d7..0b6112789b 100644 --- a/files/ja/web/javascript/guide/grammar_and_types/index.html +++ b/files/ja/web/javascript/guide/grammar_and_types/index.html @@ -88,7 +88,7 @@ translation_of: Web/JavaScript/Guide/Grammar_and_types <li>{{jsxref("Statements/const", "const")}} または {{jsxref("Statements/let", "let")}} キーワードを使う。例えば、<code>let y = 13</code>。この構文はブロックスコープのローカル変数を宣言することができます。(以下にある<a href="#Variable_scope">変数のスコープ</a>をご覧ください。)</li> </ul> -<p><a href="/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">分割代入</a>構文を使用して、<a href="ja/docs/Web/JavaScript/Guide/Grammar_and_types#Object_literals">オブジェクトリテラル</a>から値を展開する変数を宣言することができます。例えば、<code>let { bar } = foo</code> とします。これは <code>bar</code> という名前の変数を作成し、オブジェクト <code>foo</code> の同名キーから対応する値を代入します。</p> +<p><a href="/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">分割代入</a>構文を使用して、<a href="/ja/docs/Web/JavaScript/Guide/Grammar_and_types#Object_literals">オブジェクトリテラル</a>から値を展開する変数を宣言することができます。例えば、<code>let { bar } = foo</code> とします。これは <code>bar</code> という名前の変数を作成し、オブジェクト <code>foo</code> の同名キーから対応する値を代入します。</p> <p>また、<code>x = 42</code> のように、単純に値を変数に代入することもできます。この形は、<strong><a href="/ja/docs/Web/JavaScript/Reference/Statements/var#Description">未宣言のグローバル</a></strong>変数を生成します。strict モードの JavaScript では警告が発生します。未宣言のグローバル変数は、よく予期しない動作を引き起こします。したがって、宣言されていないグローバル変数を使用することはお勧めしません。</p> diff --git a/files/ja/web/javascript/guide/iterators_and_generators/index.html b/files/ja/web/javascript/guide/iterators_and_generators/index.html index 685898d31f..ef25e5bfa8 100644 --- a/files/ja/web/javascript/guide/iterators_and_generators/index.html +++ b/files/ja/web/javascript/guide/iterators_and_generators/index.html @@ -19,7 +19,7 @@ translation_of: Web/JavaScript/Guide/Iterators_and_Generators <p>詳細についてはこちらもご覧ください:</p> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li> <li>{{jsxref("Statements/for...of","for...of")}}</li> <li>{{jsxref("Statements/function*","function*")}} と {{jsxref("Generator","ジェネレーター","","true")}}</li> <li>{{jsxref("Operators/yield","yield")}} と {{jsxref("Operators/yield*","yield*")}}</li> diff --git a/files/ja/web/javascript/guide/keyed_collections/index.html b/files/ja/web/javascript/guide/keyed_collections/index.html index fbc979ab2b..2888204bca 100644 --- a/files/ja/web/javascript/guide/keyed_collections/index.html +++ b/files/ja/web/javascript/guide/keyed_collections/index.html @@ -112,7 +112,7 @@ for (let item of mySet) console.log(item); <h3 id="Converting_between_Array_and_Set" name="Converting_between_Array_and_Set"><code>Array</code> と <code>Set</code> 間の変換</h3> -<p>{{jsxref("Array.from")}} または <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_operator">スプレッド構文</a> を使用して <code>Set</code> から {{jsxref("Array")}} を生成できます。また、<code>Set</code> コンストラクタを使って <code>Array</code> から <code>Set</code> へと逆変換することができます。</p> +<p>{{jsxref("Array.from")}} または <a href="/ja/docs/Web/JavaScript/Reference/Operators/Spread_operator">スプレッド構文</a> を使用して <code>Set</code> から {{jsxref("Array")}} を生成できます。また、<code>Set</code> コンストラクタを使って <code>Array</code> から <code>Set</code> へと逆変換することができます。</p> <div class="blockIndicator note"> <p><strong>注:</strong> <code>Set</code> オブジェクトは<em>一意の値</em>を格納することにくれぐれも注意してください、重複した要素は <code>Array</code> から変換するときに削除されます。</p> diff --git a/files/ja/web/javascript/guide/loops_and_iteration/index.html b/files/ja/web/javascript/guide/loops_and_iteration/index.html index 13d3d5046c..5ad8dd081b 100644 --- a/files/ja/web/javascript/guide/loops_and_iteration/index.html +++ b/files/ja/web/javascript/guide/loops_and_iteration/index.html @@ -342,7 +342,7 @@ car.model = Mustang <h2 id="for...of_statement" name="for...of_statement"><code>for...of</code> 文</h2> -<p>{{jsxref("Statements/for...of","for...of")}} 文は、<a href="/docs/Web/JavaScript/Guide/iterable">反復可能オブジェクト</a>（{{jsxref("Array")}}、{{jsxref("Map")}}、{{jsxref("Set")}}、{{jsxref("functions/arguments","arguments")}} オブジェクトなどを含む）を反復処理するループを生成し、それぞれのプロパティの値に対して実行したい文をともなって作られた反復処理フックを呼び出します。</p> +<p>{{jsxref("Statements/for...of","for...of")}} 文は、<a href="/ja/docs/Web/JavaScript/Guide/iterable">反復可能オブジェクト</a>（{{jsxref("Array")}}、{{jsxref("Map")}}、{{jsxref("Set")}}、{{jsxref("functions/arguments","arguments")}} オブジェクトなどを含む）を反復処理するループを生成し、それぞれのプロパティの値に対して実行したい文をともなって作られた反復処理フックを呼び出します。</p> <pre class="syntaxbox notranslate">for (<em>変数</em> of <em>オブジェクト</em>) <em>文</em> diff --git a/files/ja/web/javascript/guide/modules/index.html b/files/ja/web/javascript/guide/modules/index.html index 42370aa17b..076afbd1d1 100644 --- a/files/ja/web/javascript/guide/modules/index.html +++ b/files/ja/web/javascript/guide/modules/index.html @@ -23,7 +23,7 @@ translation_of: Web/JavaScript/Guide/Modules <h2 id="Browser_support" name="Browser_support">ブラウザーのサポート状況</h2> -<p>ネイティブの JavaScript モジュール機能は、<code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code> と <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/export">export</a></code> 文を利用します。これらに対するブラウザーの互換性は次のとおりです。</p> +<p>ネイティブの JavaScript モジュール機能は、<code><a href="/ja/docs/Web/JavaScript/Reference/Statements/import">import</a></code> と <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/export">export</a></code> 文を利用します。これらに対するブラウザーの互換性は次のとおりです。</p> <h3 id="import" name="import">import</h3> @@ -133,7 +133,7 @@ export function draw(ctx, length, x, y, color) { <pre class="brush: js; notranslate">import { name, draw, reportArea, reportPerimeter } from './modules/square.js';</pre> -<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code> 文の後ろに、中かっこで囲まれたインポートしたい機能のカンマ区切りリストを続け、その後ろに from キーワードと、モジュールファイルへのパスを続けます。このパスは、サイトのルートからの相対パスであり、<code>basic-modules</code> の場合は <code>/js-examples/modules/basic-modules</code> です。</p> +<p><code><a href="/ja/docs/Web/JavaScript/Reference/Statements/import">import</a></code> 文の後ろに、中かっこで囲まれたインポートしたい機能のカンマ区切りリストを続け、その後ろに from キーワードと、モジュールファイルへのパスを続けます。このパスは、サイトのルートからの相対パスであり、<code>basic-modules</code> の場合は <code>/js-examples/modules/basic-modules</code> です。</p> <p>しかし、この例ではパスの書き方が少し異なっています。「現在の位置」を意味するドット (<code>.</code>) 記法を使っており、その後ろに見つけようとするファイルへのパスを続けています。これは、完全な相対パスを毎回記述するよりも短くてすむためとてもよい方法であり、URL の可搬性もあるため、サイト階層構造の異なる場所に移動させた場合でも動作するでしょう。</p> diff --git a/files/ja/web/javascript/javascript_technologies_overview/index.html b/files/ja/web/javascript/javascript_technologies_overview/index.html index 61aff4884f..58bd61b5b2 100644 --- a/files/ja/web/javascript/javascript_technologies_overview/index.html +++ b/files/ja/web/javascript/javascript_technologies_overview/index.html @@ -32,7 +32,7 @@ translation_of: Web/JavaScript/JavaScript_technologies_overview <li>グローバルオブジェクト。ブラウザー環境では、このグローバルオブジェクトは <code>window</code> オブジェクトですが、ECMAScript ではブラウザーとは直接関係のない API のみが定義されています。例えば <code>parseInt</code>、<code>parseFloat</code>、<code>decodeURI</code>、<code>encodeURI</code>……</li> <li>プロトタイプベースの継承メカニズム。その対象は次のもの:</li> <li>ビルトインオブジェクトと関数（<code>JSON</code>、<code>Math</code>、<code>Array.prototype</code> メソッド、オブジェクト内部確認メソッド……）</li> - <li>Strict モード (<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Strict_mode">ここ</a>を見てください)</li> + <li>Strict モード (<a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">ここ</a>を見てください)</li> </ul> <h3 id="Browser_support" name="Browser_support">ブラウザーサポート</h3> diff --git a/files/ja/web/javascript/memory_management/index.html b/files/ja/web/javascript/memory_management/index.html index f5544285c1..4a655b8c26 100644 --- a/files/ja/web/javascript/memory_management/index.html +++ b/files/ja/web/javascript/memory_management/index.html @@ -90,7 +90,7 @@ var a3 = a.concat(a2); <h3 id="References" name="References">リファレンス</h3> -<p>ガベージコレクションアルゴリズムが依存している主な概念は、リファレンス (reference)の概念です。メモリー管理の文脈では、あるオブジェクトが別のオブジェクトに (明示的にであれ、暗黙的にであれ) アクセスできるとき、前者が後者を"参照している"と言います。例えば、JavaScript オブジェクトは自身の <a href="/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype</a> (暗黙的な参照) とプロパティ値 (明示的な参照) への参照を持ちます。</p> +<p>ガベージコレクションアルゴリズムが依存している主な概念は、リファレンス (reference)の概念です。メモリー管理の文脈では、あるオブジェクトが別のオブジェクトに (明示的にであれ、暗黙的にであれ) アクセスできるとき、前者が後者を"参照している"と言います。例えば、JavaScript オブジェクトは自身の <a href="/ja/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype</a> (暗黙的な参照) とプロパティ値 (明示的な参照) への参照を持ちます。</p> <p>ここでは、"オブジェクト"の概念は通常の JavaScript オブジェクトよりも広い概念として用いられており、また、関数のスコープ (もしくは、グローバルレキシカルスコープ) を含みます。</p> @@ -183,5 +183,5 @@ window.onload = function(){ <ul> <li><a class="external" href="http://www.ibm.com/developerworks/web/library/wa-memleak/">IBM article on "Memory leak patterns in JavaScript" (2007)</a></li> <li><a class="external" href="http://msdn.microsoft.com/en-us/magazine/ff728624.aspx">Kangax article on how to register event handler and avoid memory leaks (2010)</a></li> - <li><a href="/docs/Mozilla/Performance" title="/docs/Mozilla/Performance">Performance</a></li> + <li><a href="/ja/docs/Mozilla/Performance" title="/docs/Mozilla/Performance">Performance</a></li> </ul> diff --git a/files/ja/web/javascript/reference/classes/index.html b/files/ja/web/javascript/reference/classes/index.html index 3f711b47ed..2a2377bbdd 100644 --- a/files/ja/web/javascript/reference/classes/index.html +++ b/files/ja/web/javascript/reference/classes/index.html @@ -74,7 +74,7 @@ console.log(Rectangle.name); <h3 id="Strict_mode" name="Strict_mode">Strict モード</h3> -<p>クラス本体は <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Strict_mode">Strict モード</a> で実行されます。つまり、ここで書かれたコードは、パフォーマンスを向上させるために、より厳密な構文に従います。そうでない場合はサイレントエラーが投げられます。なお、特定のキーワードは将来のバージョンの ECMAScript 用に予約されています。</p> +<p>クラス本体は <a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">Strict モード</a> で実行されます。つまり、ここで書かれたコードは、パフォーマンスを向上させるために、より厳密な構文に従います。そうでない場合はサイレントエラーが投げられます。なお、特定のキーワードは将来のバージョンの ECMAScript 用に予約されています。</p> <h3 id="Constructor" name="Constructor">コンストラクター</h3> diff --git a/files/ja/web/javascript/reference/classes/public_class_fields/index.html b/files/ja/web/javascript/reference/classes/public_class_fields/index.html index 18614027ce..b4dcd87d5c 100644 --- a/files/ja/web/javascript/reference/classes/public_class_fields/index.html +++ b/files/ja/web/javascript/reference/classes/public_class_fields/index.html @@ -217,7 +217,7 @@ console.log(instance.subPublicMethod()) // expected output: "hello world" </pre> -<p>ゲッターとセッターは、クラスのプロパティにバインドする特別なメソッドで、そのプロパティがアクセスされたり設定されたりしたときに呼び出されます。<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/get">get</a> および <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/set">set</a> 構文を使用して、パブリックインスタンスのゲッターまたはセッターを宣言します。</p> +<p>ゲッターとセッターは、クラスのプロパティにバインドする特別なメソッドで、そのプロパティがアクセスされたり設定されたりしたときに呼び出されます。<a href="/ja/docs/Web/JavaScript/Reference/Functions/get">get</a> および <a href="/ja/docs/Web/JavaScript/Reference/Functions/set">set</a> 構文を使用して、パブリックインスタンスのゲッターまたはセッターを宣言します。</p> <pre class="brush: js notranslate">class ClassWithGetSet { #msg = 'hello world' diff --git a/files/ja/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html b/files/ja/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html index c037d915f8..b4148651b5 100644 --- a/files/ja/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html +++ b/files/ja/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html @@ -16,7 +16,7 @@ translation_of: >- <h2 id="The_deprecated_Firefox-only_iterator_protocol">非推奨の Firefox 専用イテレータープロトコル</h2> -<p>Firefox version 26 以前は、標準の <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">ES2015 のイテレータープロトコル</a>に似た別のイテレータープロトコルを実装していました。</p> +<p>Firefox version 26 以前は、標準の <a href="/ja/docs/Web/JavaScript/Reference/Iteration_protocols">ES2015 のイテレータープロトコル</a>に似た別のイテレータープロトコルを実装していました。</p> <p>オブジェクトが次のセマンティックスをもつ <code>next()</code> メソッドを実装している場合、そのオブジェクトは古いイテレーターで、反復処理の最後に {{jsxref("Global_Objects/StopIteration", "StopIteration")}} をスローします。</p> diff --git a/files/ja/web/javascript/reference/errors/cant_assign_to_property/index.html b/files/ja/web/javascript/reference/errors/cant_assign_to_property/index.html index 97f63535f9..62988bcd18 100644 --- a/files/ja/web/javascript/reference/errors/cant_assign_to_property/index.html +++ b/files/ja/web/javascript/reference/errors/cant_assign_to_property/index.html @@ -24,7 +24,7 @@ TypeError: Cannot create property 'x' on {y} (Chrome) <h2 id="What_went_wrong">エラーの原因</h2> -<p>{{jsxref("Strict_mode", "Strict モード", "", 1)}}では、 {{jsxref("TypeError")}} は<a href="/en-US/docs/Glossary/Primitive">プリミティブ</a>値、例えば<a href="/ja/docs/Glossary/Symbol">シンボル</a>、<a href="/ja/docs/Glossary/String">文字列</a>、<a href="/ja/docs/Glossary/Number">数値</a>、<a href="/ja/docs/Glossary/Boolean">論理値</a>などにプロパティを作成しようとしたときに発生します。<a href="/ja/docs/Glossary/Primitive">プリミティブ</a>値はいかなる<a href="/ja/docs/Glossary/property/JavaScript">プロパティ</a>を持つこともできません。</p> +<p>{{jsxref("Strict_mode", "Strict モード", "", 1)}}では、 {{jsxref("TypeError")}} は<a href="/ja/docs/Glossary/Primitive">プリミティブ</a>値、例えば<a href="/ja/docs/Glossary/Symbol">シンボル</a>、<a href="/ja/docs/Glossary/String">文字列</a>、<a href="/ja/docs/Glossary/Number">数値</a>、<a href="/ja/docs/Glossary/Boolean">論理値</a>などにプロパティを作成しようとしたときに発生します。<a href="/ja/docs/Glossary/Primitive">プリミティブ</a>値はいかなる<a href="/ja/docs/Glossary/property/JavaScript">プロパティ</a>を持つこともできません。</p> <p>想定外の場所に想定外の値が流れてきたり、 {{jsxref("String")}} や {{jsxref("Number")}} のオブジェクトバリアントが想定されていたりすることが問題となることがあります。</p> diff --git a/files/ja/web/javascript/reference/errors/delete_in_strict_mode/index.html b/files/ja/web/javascript/reference/errors/delete_in_strict_mode/index.html index 9158818092..040d3282b7 100644 --- a/files/ja/web/javascript/reference/errors/delete_in_strict_mode/index.html +++ b/files/ja/web/javascript/reference/errors/delete_in_strict_mode/index.html @@ -12,7 +12,7 @@ translation_of: Web/JavaScript/Reference/Errors/Delete_in_strict_mode --- <div>{{jsSidebar("Errors")}}</div> -<p>JavaScript の <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict モード</a>専用の例外 "applying the 'delete' operator to an unqualified name is deprecated" は、 <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> 演算子を用いて変数を削除しようとしたときに発生します。</p> +<p>JavaScript の <a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">strict モード</a>専用の例外 "applying the 'delete' operator to an unqualified name is deprecated" は、 <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> 演算子を用いて変数を削除しようとしたときに発生します。</p> <h2 id="Message">エラーメッセージ</h2> diff --git a/files/ja/web/javascript/reference/errors/deprecated_octal/index.html b/files/ja/web/javascript/reference/errors/deprecated_octal/index.html index e4e6034b5b..4c172b15b1 100644 --- a/files/ja/web/javascript/reference/errors/deprecated_octal/index.html +++ b/files/ja/web/javascript/reference/errors/deprecated_octal/index.html @@ -61,6 +61,6 @@ for octal literals use the \"0o\" prefix instead <ul> <li><a href="/ja/docs/Web/JavaScript/Reference/Lexical_grammar#Octal">字句文法</a></li> <li> - <p><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Bad_octal">Warning: 08/09 is not a legal ECMA-262 octal constant</a></p> + <p><a href="/ja/docs/Web/JavaScript/Reference/Errors/Bad_octal">Warning: 08/09 is not a legal ECMA-262 octal constant</a></p> </li> </ul> diff --git a/files/ja/web/javascript/reference/errors/invalid_for-in_initializer/index.html b/files/ja/web/javascript/reference/errors/invalid_for-in_initializer/index.html index 5b153dfc43..ef189fee46 100644 --- a/files/ja/web/javascript/reference/errors/invalid_for-in_initializer/index.html +++ b/files/ja/web/javascript/reference/errors/invalid_for-in_initializer/index.html @@ -10,7 +10,7 @@ translation_of: Web/JavaScript/Reference/Errors/Invalid_for-in_initializer --- <div>{{jsSidebar("Errors")}}</div> -<p>JavaScript の <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict モード</a>専用の例外である "for-in loop head declarations may not have initializers" は、 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> の先頭に初期化構文が含まれていた場合、例えば |<code>for (var i = 0 in obj)</code>| のような場合に発生します。これは strict モードの for-in ループでは許可されていません。</p> +<p>JavaScript の <a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">strict モード</a>専用の例外である "for-in loop head declarations may not have initializers" は、 <a href="/ja/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> の先頭に初期化構文が含まれていた場合、例えば |<code>for (var i = 0 in obj)</code>| のような場合に発生します。これは strict モードの for-in ループでは許可されていません。</p> <h2 id="Message">エラーメッセージ</h2> diff --git a/files/ja/web/javascript/reference/errors/malformed_formal_parameter/index.html b/files/ja/web/javascript/reference/errors/malformed_formal_parameter/index.html index b29a03f032..a54b08bd6e 100644 --- a/files/ja/web/javascript/reference/errors/malformed_formal_parameter/index.html +++ b/files/ja/web/javascript/reference/errors/malformed_formal_parameter/index.html @@ -60,6 +60,6 @@ var f = function(x) { return x; }; <ul> <li><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code></li> - <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions">関数について</a></li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Functions">関数について</a></li> <li><a href="https://www.gutenberg.org/ebooks/84"><em>フランケンシュタイン</em> (メアリー・シェリー)</a> より ("Cursed (although I curse myself) be the hands that formed you! You have made me wretched beyond expression. You have left me no power to consider whether I am just to you or not. Begone! Relieve me from the sight of your detested form.")</li> </ul> diff --git a/files/ja/web/javascript/reference/errors/missing_colon_after_property_id/index.html b/files/ja/web/javascript/reference/errors/missing_colon_after_property_id/index.html index f7a31b218c..8e1a480ed1 100644 --- a/files/ja/web/javascript/reference/errors/missing_colon_after_property_id/index.html +++ b/files/ja/web/javascript/reference/errors/missing_colon_after_property_id/index.html @@ -76,5 +76,5 @@ obj['propertyKey'] = 'value'; <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">オブジェクト初期化子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer">オブジェクト初期化子</a></li> </ul> diff --git a/files/ja/web/javascript/reference/errors/missing_formal_parameter/index.html b/files/ja/web/javascript/reference/errors/missing_formal_parameter/index.html index 55c7509b2b..b2d26855c4 100644 --- a/files/ja/web/javascript/reference/errors/missing_formal_parameter/index.html +++ b/files/ja/web/javascript/reference/errors/missing_formal_parameter/index.html @@ -21,7 +21,7 @@ translation_of: Web/JavaScript/Reference/Errors/Missing_formal_parameter <p>"Formal parameter" とは「関数の引数」のことです。関数宣言で、有効な引数を忘れています。関数定義において、引数は<a href="/ja/docs/Glossary/Identifier">識別子</a>でなければならず、数字や文字列、オブジェクトのような値であってはいけません。関数の宣言と関数の呼び出しは、異なる 2 つのステップです。宣言時には引数として識別子が求められ、関数を呼び出すときだけ、関数が使用する値を提供します。</p> -<p><a href="/en-US/docs/Glossary/JavaScript">JavaScript</a> では、識別子はアルファベット文字 (または "$" か "_") だけを含めることができ、数値から始められません。文字列はデータですが、識別子はコードの一部です。そのため、識別子と<strong>文字列</strong>は異なるものです。</p> +<p><a href="/ja/docs/Glossary/JavaScript">JavaScript</a> では、識別子はアルファベット文字 (または "$" か "_") だけを含めることができ、数値から始められません。文字列はデータですが、識別子はコードの一部です。そのため、識別子と<strong>文字列</strong>は異なるものです。</p> <h2 id="例">例</h2> diff --git a/files/ja/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html b/files/ja/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html index 193970f65b..b49f810eb5 100644 --- a/files/ja/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html +++ b/files/ja/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html @@ -10,7 +10,7 @@ translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condit --- <div>{{jsSidebar("Errors")}}</div> -<p>JavaScript の例外 "missing ) after condition" は、 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if</a></code> 文の条件の書き方にエラーがあった場合に発生します。 <code>if</code> キーワードの後には括弧が必要です。 +<p>JavaScript の例外 "missing ) after condition" は、 <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/if...else">if</a></code> 文の条件の書き方にエラーがあった場合に発生します。 <code>if</code> キーワードの後には括弧が必要です。 </p> <h2 id="Message">エラーメッセージ</h2> diff --git a/files/ja/web/javascript/reference/errors/non_configurable_array_element/index.html b/files/ja/web/javascript/reference/errors/non_configurable_array_element/index.html index 2542f87d24..ec6d83f837 100644 --- a/files/ja/web/javascript/reference/errors/non_configurable_array_element/index.html +++ b/files/ja/web/javascript/reference/errors/non_configurable_array_element/index.html @@ -10,7 +10,7 @@ translation_of: Web/JavaScript/Reference/Errors/Non_configurable_array_element --- <div>{{jsSidebar("Errors")}}</div> -<p>JavaScript の例外 "can't delete non-configurable array element" は、配列を<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/length#shortening_an_array">短縮</a>しようとしたときに配列の要素の 1 つが<a href="/en-US/docs/Web/JavaScript/Data_structures#properties">設定不可</a>であった場合に発生します。</p> +<p>JavaScript の例外 "can't delete non-configurable array element" は、配列を<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/length#shortening_an_array">短縮</a>しようとしたときに配列の要素の 1 つが<a href="/ja/docs/Web/JavaScript/Data_structures#properties">設定不可</a>であった場合に発生します。</p> <h2 id="Message">エラーメッセージ</h2> diff --git a/files/ja/web/javascript/reference/functions/arguments/index.html b/files/ja/web/javascript/reference/functions/arguments/index.html index 2c58c8c7f0..963b675c01 100644 --- a/files/ja/web/javascript/reference/functions/arguments/index.html +++ b/files/ja/web/javascript/reference/functions/arguments/index.html @@ -51,13 +51,13 @@ arguments[2] // 3 番目の引数 var args = [].slice.call(arguments); </pre> -<p><code>arguments</code> に限らず、配列様オブジェクトは ES2015 の {{jsxref("Array.from()")}} メソッドや<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_operator">スプレッド構文</a>によって、本当の配列に変換することができます。</p> +<p><code>arguments</code> に限らず、配列様オブジェクトは ES2015 の {{jsxref("Array.from()")}} メソッドや<a href="/ja/docs/Web/JavaScript/Reference/Operators/Spread_operator">スプレッド構文</a>によって、本当の配列に変換することができます。</p> <pre class="brush: js notranslate">var args = Array.from(arguments); var args = [...arguments]; </pre> -<p><code>arguments</code> オブジェクトは、あらかじめ定義された引数の数よりも多くの引数で呼び出される関数に便利です。このテクニックは <code><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/min">Math.min()</a></code> などの 可変数の引数を受け入れる関数に便利です。この例の関数は、任意の数の文字列が引数で、引数の中で一番長い文字列を返します。</p> +<p><code>arguments</code> オブジェクトは、あらかじめ定義された引数の数よりも多くの引数で呼び出される関数に便利です。このテクニックは <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/min">Math.min()</a></code> などの 可変数の引数を受け入れる関数に便利です。この例の関数は、任意の数の文字列が引数で、引数の中で一番長い文字列を返します。</p> <pre class="brush: js notranslate">function longestString() { var longest = ''; @@ -152,7 +152,7 @@ foo(1, 2, 3); // [1, 2, 3] <p>厳格モードでは、 <code>arguments</code> オブジェクトは関数に残余引数、デフォルト引数、分割引数が渡されたかどうかにかかわらず同じ動作をします。すなわち、関数の本体で変数に新しい値を代入しても、 <code>arguments</code> オブジェクトには影響しません。また、 <code>arguments</code> オブジェクトに新しい変数を代入しても、変数の値には影響ありません。</p> <div class="blockIndicator note"> -<p><strong>注:</strong> <code>"use strict";</code> ディレクティブを、残余引数、デフォルト引数、分割引数を受け付ける関数の本体に書くことはできません。そうすると、<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params">構文エラー</a>が発生します。</p> +<p><strong>注:</strong> <code>"use strict";</code> ディレクティブを、残余引数、デフォルト引数、分割引数を受け付ける関数の本体に書くことはできません。そうすると、<a href="/ja/docs/Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params">構文エラー</a>が発生します。</p> </div> <p>厳格モードでない関数で、単純な引数のみを渡した場合 (すなわち、残余引数、デフォルト引数、分割引数ではない場合)、関数の本体で変数の値を新しい値にすると、 <code>arguments</code> オブジェクトと同期します。</p> diff --git a/files/ja/web/javascript/reference/functions/method_definitions/index.html b/files/ja/web/javascript/reference/functions/method_definitions/index.html index 8bb880d1fe..04b66d802a 100644 --- a/files/ja/web/javascript/reference/functions/method_definitions/index.html +++ b/files/ja/web/javascript/reference/functions/method_definitions/index.html @@ -40,7 +40,7 @@ translation_of: Web/JavaScript/Reference/Functions/Method_definitions <h2 id="Description" name="Description">説明</h2> -<p>簡略構文は、ECMAScript 第 5 版で導入された <a href="/docs/Web/JavaScript/Reference/Functions/get">getter</a> や <a href="/docs/Web/JavaScript/Reference/Functions/set">setter</a> 構文に似ています。</p> +<p>簡略構文は、ECMAScript 第 5 版で導入された <a href="/ja/docs/Web/JavaScript/Reference/Functions/get">getter</a> や <a href="/ja/docs/Web/JavaScript/Reference/Functions/set">setter</a> 構文に似ています。</p> <p>次のコードを例にすると:</p> @@ -212,7 +212,7 @@ console.log(window[name]()) // 1</pre> <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><code><a href="/docs/Web/JavaScript/Reference/Functions/get">get</a></code></li> - <li><code><a href="/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li> - <li><a href="/docs/Web/JavaScript/Reference/Lexical_grammar">字句文法</a></li> + <li><code><a href="/ja/docs/Web/JavaScript/Reference/Functions/get">get</a></code></li> + <li><code><a href="/ja/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Lexical_grammar">字句文法</a></li> </ul> diff --git a/files/ja/web/javascript/reference/global_objects/array/@@iterator/index.html b/files/ja/web/javascript/reference/global_objects/array/@@iterator/index.html index 8107c4826e..e092619e93 100644 --- a/files/ja/web/javascript/reference/global_objects/array/@@iterator/index.html +++ b/files/ja/web/javascript/reference/global_objects/array/@@iterator/index.html @@ -67,7 +67,7 @@ console.log(eArr.next().value); // e <h3 id="Use_Case_for_brace_notation" name="Use_Case_for_brace_notation">括弧表記の使用法</h3> -<p>この構文をドット記法 (<code>Array.prototype.values()</code>) よりも優先して使用する場合は、事前にどのようなオブジェクトになるのかが分からない場合です。イテレータを受け取り、その値を反復処理する関数があるが、そのオブジェクトが [Iterable].prototype.values メソッドを持っているかどうかわからない場合です。これはStringオブジェクトのような組み込みオブジェクトでも、カスタムオブジェクトでもよいでしょう。これは <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/@@iterator">String</a> オブジェクトのような組込みオブジェクトや、独自オブジェクトである可能性があります。</p> +<p>この構文をドット記法 (<code>Array.prototype.values()</code>) よりも優先して使用する場合は、事前にどのようなオブジェクトになるのかが分からない場合です。イテレータを受け取り、その値を反復処理する関数があるが、そのオブジェクトが [Iterable].prototype.values メソッドを持っているかどうかわからない場合です。これはStringオブジェクトのような組み込みオブジェクトでも、カスタムオブジェクトでもよいでしょう。これは <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String/@@iterator">String</a> オブジェクトのような組込みオブジェクトや、独自オブジェクトである可能性があります。</p> <pre class="brush: js notranslate">function logIterable(it) { var iterator = it[Symbol.iterator](); diff --git a/files/ja/web/javascript/reference/global_objects/array/array/index.html b/files/ja/web/javascript/reference/global_objects/array/array/index.html index 5baaf20dd0..6f42544dfd 100644 --- a/files/ja/web/javascript/reference/global_objects/array/array/index.html +++ b/files/ja/web/javascript/reference/global_objects/array/array/index.html @@ -32,7 +32,7 @@ new Array(<var>arrayLength</var>)</pre> <h3 id="Array_literal_notation" name="Array_literal_notation">配列リテラル記法</h3> -<p>配列は<a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Array_literals">リテラル</a>記法を使用して生成することができます。</p> +<p>配列は<a href="/ja/docs/Web/JavaScript/Reference/Lexical_grammar#Array_literals">リテラル</a>記法を使用して生成することができます。</p> <pre class="brush: js notranslate">let fruits = ['りんご', 'バナナ']; diff --git a/files/ja/web/javascript/reference/global_objects/array/from/index.html b/files/ja/web/javascript/reference/global_objects/array/from/index.html index aab6b03cf7..90a9359ed4 100644 --- a/files/ja/web/javascript/reference/global_objects/array/from/index.html +++ b/files/ja/web/javascript/reference/global_objects/array/from/index.html @@ -49,7 +49,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/from <p><code>Array.from()</code> は任意の引数 <code>mapFn</code> を持ちます。これは、作成した配列 (もしくは、サブクラスオブジェクト) のすべての要素に対して {{jsxref("Array.prototype.map", "map")}} 関数を実行できます。</p> -<p>より明確に言うと、中間配列を生成しないことを除いて、<code>Array.from(obj, mapFn, thisArg)</code> は <code>Array.from(obj).map(mapFn, thisArg)</code> と同じ結果です。中間配列は、適切な型に合うように丸められた値を持つ必要があるため、<a href="/docs/Web/JavaScript/Typed_arrays">typed arrays</a> のような配列サブクラスにとっては特に重要です。</p> +<p>より明確に言うと、中間配列を生成しないことを除いて、<code>Array.from(obj, mapFn, thisArg)</code> は <code>Array.from(obj).map(mapFn, thisArg)</code> と同じ結果です。中間配列は、適切な型に合うように丸められた値を持つ必要があるため、<a href="/ja/docs/Web/JavaScript/Typed_arrays">typed arrays</a> のような配列サブクラスにとっては特に重要です。</p> <div class="note">これは、<a href="/ja/docs/Web/JavaScript/Typed_arrays">型付き配列</a>のような特定の配列のサブクラスでは特に重要です。なぜなら、中間配列の値は適切な型に収まるように切り捨てられている必要があるからです。</div> diff --git a/files/ja/web/javascript/reference/global_objects/arraybuffer/index.html b/files/ja/web/javascript/reference/global_objects/arraybuffer/index.html index 378bd53d13..790ccb2694 100644 --- a/files/ja/web/javascript/reference/global_objects/arraybuffer/index.html +++ b/files/ja/web/javascript/reference/global_objects/arraybuffer/index.html @@ -14,7 +14,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer <p><code>ArrayBuffer</code> はバイトの配列で、他の言語では「バイト配列」と呼ばれることが多いです。ArrayBuffer の内容を直接操作することはできません。代わりに、型付きの配列オブジェクトか {{jsxref("DataView")}} オブジェクトのいずれかを作成して、バッファを特定の形式で表現し、バッファの内容を読み書きするためにそれを使用します。</p> -<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/ArrayBuffer">ArrayBuffer()</a></code> コンストラクタは、指定した長さの <code>ArrayBuffer</code> をバイト単位で作成します。<a href="/ja/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#Appendix_to_Solution_1_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">Base64 文字列</a>や<a href="/ja/docs/Web/API/FileReader/readAsArrayBuffer">ローカルファイル</a>などの既存のデータから配列バッファを取得することもできます。</p> +<p><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/ArrayBuffer">ArrayBuffer()</a></code> コンストラクタは、指定した長さの <code>ArrayBuffer</code> をバイト単位で作成します。<a href="/ja/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#Appendix_to_Solution_1_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">Base64 文字列</a>や<a href="/ja/docs/Web/API/FileReader/readAsArrayBuffer">ローカルファイル</a>などの既存のデータから配列バッファを取得することもできます。</p> <h2 id="コンストラクタ">コンストラクタ</h2> diff --git a/files/ja/web/javascript/reference/global_objects/atomics/islockfree/index.md b/files/ja/web/javascript/reference/global_objects/atomics/islockfree/index.md new file mode 100644 index 0000000000..d5957daf01 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/atomics/islockfree/index.md @@ -0,0 +1,60 @@ +--- +title: Atomics.isLockFree() +slug: Web/JavaScript/Reference/Global_Objects/Atomics/isLockFree +tags: + - Atomics + - JavaScript + - Method + - Shared Memory +browser-compat: javascript.builtins.Atomics.isLockFree +translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/isLockFree +--- +{{JSRef}} + +静的な +**`Atomics.isLockFree()`** +メソッドは、 `Atomics` のメソッドが、要素のバイト数が指定された大きさである型付き配列に適用された場合、ロックまたは不可分のハードウェア操作を使用するかどうかを見極めるために使用されます。指定された大きさが整数型の TypedArray 型の [BYTES_PER_ELEMENT](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT) プロパティのいずれでもない場合は、 `false` を返します。 + +{{EmbedInteractiveExample("pages/js/atomics-islockfree.html")}} + +## 構文 + +```js +Atomics.isLockFree(size) +``` + +### 引数 + +- `size` + - : チェックするバイト単位の大きさです。 + +### 返値 + +`true` または `false` で、操作がロック不要であるかどうかを示します。 + +## 例 + +### isLockFree の使用 + +```js +Atomics.isLockFree(1); // true +Atomics.isLockFree(2); // true +Atomics.isLockFree(3); // false +Atomics.isLockFree(4); // true +Atomics.isLockFree(5); // false +Atomics.isLockFree(6); // false +Atomics.isLockFree(7); // false +Atomics.isLockFree(8); // true +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Atomics")}} diff --git a/files/ja/web/javascript/reference/global_objects/bigint/index.html b/files/ja/web/javascript/reference/global_objects/bigint/index.html deleted file mode 100644 index c40ca5cf90..0000000000 --- a/files/ja/web/javascript/reference/global_objects/bigint/index.html +++ /dev/null @@ -1,288 +0,0 @@ ---- -title: BigInt -slug: Web/JavaScript/Reference/Global_Objects/BigInt -tags: - - BigInt - - JavaScript -translation_of: Web/JavaScript/Reference/Global_Objects/BigInt ---- -<div>{{JSRef}}</div> - -<p><strong><code>BigInt</code></strong> は組み込みオブジェクトで、 {{JSxRef("Number")}} プリミティブで表現できる最大の数、 {{JSxRef("Number.MAX_SAFE_INTEGER")}} よりも大きな数値を信頼できるものとして表現する方法を提供します。 <strong><code>BigInt</code></strong> は任意に巨大な整数に使用することができます。</p> - -<h2 id="Syntax" name="Syntax">詳細</h2> - -<p><code>BigInt</code> は10進数の整数リテラルの末尾に <code>n</code> をつけて <code>10n</code> とするか、 <code>BigInt()</code> 関数を呼び出すことで作成することができます。</p> - -<pre class="brush: js notranslate">const theBiggestInt = 9007199254740991n; - -const alsoHuge = BigInt(9007199254740991); -// ↪ 9007199254740991n - -const hugeString = BigInt("9007199254740991"); -// ↪ 9007199254740991n - -const hugeHex = BigInt("0x1fffffffffffff"); -// ↪ 9007199254740991n - -const hugeBin = BigInt("0b11111111111111111111111111111111111111111111111111111"); -// ↪ 9007199254740991n -</pre> - -<p><code>BigInt</code> はいくつかの点で {{JSxRef("Number")}} と似ていますが、重要ないくつかの点が異なります。 — 組込みの {{JSxRef("Math")}} オブジェクト内のメソッドでは利用できず、演算で <code>Number</code> のインスタンスと混ぜることができません。同じ型に統一する必要があります。ただし、<code>BigInt</code> を <code>Number</code> へ変換する際には精度が落ちることがあるので、相互に変化する場合には注意が必要です。</p> - -<h3 id="Type_information" name="Type_information">型情報</h3> - -<p><code>typeof</code> の <code>BigInt</code> に対する評価値は、"bigint" となります。</p> - -<pre class="brush: js notranslate">typeof 1n === 'bigint'; // true -typeof BigInt('1') === 'bigint'; // true -</pre> - -<p><code>Object</code> でラップされている場合は、 <code>BigInt</code> は通常の "object" として扱われます。</p> - -<pre class="brush: js notranslate">typeof Object(1n) === 'object'; // true -</pre> - -<h3 id="Operators" name="Operators">演算子</h3> - -<p><code>BigInt</code> (または Object でラップした <code>BigInt</code>) を利用することができる演算子は、 <code>+</code>, <code>*</code>, <code>-</code>, <code>**</code>, <code>%</code> です。<a href="/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">ビット操作演算子</a>は、同様に利用できますが、 <code>>>></code> (論理的右シフト) は BigInt が常に符号付きなので除きます。同様に、単項演算子 (<code>+</code>) は <a href="https://github.com/tc39/proposal-bigint/blob/master/ADVANCED.md#dont-break-asmjs">asm.js を破らないように</a>対応していません。</p> - -<pre class="brush: js notranslate">const previousMaxSafe = BigInt(Number.MAX_SAFE_INTEGER); -// ↪ 9007199254740991 - -const maxPlusOne = previousMaxSafe + 1n; -// ↪ 9007199254740992n - -const theFuture = previousMaxSafe + 2n; -// ↪ 9007199254740993n, this works now! - -const multi = previousMaxSafe * 2n; -// ↪ 18014398509481982n - -const subtr = multi – 10n; -// ↪ 18014398509481972n - -const mod = multi % 10n; -// ↪ 2n - -const bigN = 2n ** 54n; -// ↪ 18014398509481984n - -bigN * -1n -// ↪ –18014398509481984n -</pre> - -<p><code>/</code> 演算子もすべての数値に対して、期待される通りに動作します。ただ <code>BigInt</code> は<code>BigDecimal</code> ではないため、演算結果は 0 の方向に丸められます。別の言い方をすれば、小数を返すことはありません。</p> - -<div class="blockIndicator warning"> -<p><code>BigInt</code> を使用した場合、結果が小数となるような演算は切り捨てられます。</p> -</div> - -<pre class="brush: js notranslate">const expected = 4n / 2n; -// ↪ 2n - -const rounded = 5n / 2n; -// ↪ 2n, not 2.5n - -</pre> - -<h3 id="Comparisons" name="Comparisons">比較演算</h3> - -<p><code>BigInt</code> は {{JSxRef("Number")}} と厳密等価ではありませんが、等価にはなります。</p> - -<pre class="brush: js notranslate">0n === 0 -// ↪ false - -0n == 0 -// ↪ true</pre> - -<p>{{JSxRef("Global_Objects/Number", "Number")}} と <code>BigInt</code> は通常通り比較できます。</p> - -<pre class="brush: js notranslate">1n < 2 -// ↪ true - -2n > 1 -// ↪ true - -2 > 2 -// ↪ false - -2n > 2 -// ↪ false - -2n >= 2 -// ↪ true</pre> - -<p>配列の要素に混在させることでき、並べ替えも可能です。</p> - -<pre class="brush: js notranslate">const mixed = [4n, 6, -12n, 10, 4, 0, 0n]; -// ↪ [4n, 6, -12n, 10, 4, 0, 0n] - -mixed.sort(); -// ↪ [-12n, 0, 0n, 4n, 4, 6, 10] - -mixed.sort((a, b) => a - b) -// won't work since subtraction will not work with mixed types -// TypeError: can't convert BigInt to number - -// sort with an appropriate numeric comparator -mixed.sort((a, b) => (a < b) ? -1 : ((a > b) ? 1 : 0) -// ↪ [ -12n, 0, 0n, 4n, 4, 6, 10 ]</pre> - -<p>なお、 <code>Object</code> にラップされた <code>BigInt</code> は他のオブジェクトと同様の振る舞いをします。同じインスタンス同士が比較された場合にのみ、等価となります:</p> - -<pre class="brush: js notranslate">0n === Object(0n); // false -Object(0n) === Object(0n); // false - -const o = Object(0n); -o === o // true -</pre> - -<h3 id="Conditionals" name="Conditionals">条件式</h3> - -<p><code>BigInt</code> が {{JSxRef("Global_Objects/Boolean", "Boolean")}} へ変換される次のような場合は、 {{JSxRef("Global_Objects/Number", "Number")}} と同様の変換が行われます。 </p> - -<ul> - <li>{{JSxRef("Global_Objects/Boolean", "Boolean")}} 関数を利用した場合</li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Logical_Operators">論理演算子</a> <code>||</code>、`<code>&&</code>`、<code>!</code> で使用される場合</li> - <li> {{JSxRef("Statements/if...else", "if")}} 文などの条件式に使用される場合</li> -</ul> - -<pre class="brush: js notranslate">if (0n) { - console.log('Hello from the if!'); -} else { - console.log('Hello from the else!'); -} - -// ↪ "Hello from the else!" - -0n || 12n -// ↪ 12n - -0n && 12n -// ↪ 0n - -Boolean(0n) -// ↪ false - -Boolean(12n) -// ↪ true - -!12n -// ↪ false - -!0n -// ↪ true -</pre> - -<h2 id="Methods" name="Methods">コンストラクタ</h2> - -<dl> - <dt> - <p>{{JSxRef("BigInt()")}}</p> - </dt> - <dd> - <p><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">新しい</span></font><code>bigint</code> 値を作ります。</p> - </dd> -</dl> - -<h2 id="Methods" name="Methods">静的メソッド</h2> - -<dl> - <dt>{{JSxRef("BigInt.asIntN()")}}</dt> - <dd>BigInt の値を -2<sup>width-1</sup> ～ 2<sup>width-1</sup>-1 の間に丸めます。</dd> - <dt>{{JSxRef("BigInt.asUintN()")}}</dt> - <dd>BigInt の値を 0 ～ 2<sup>width</sup>-1 の間に丸めます。</dd> -</dl> - -<h2 id="Properties" name="Properties">プロパティ</h2> - -<dl> - <dt>{{JSxRef("BigInt.prototype")}}</dt> - <dd><code>BigInt</code> オブジェクトへの属性追加が可能です。</dd> -</dl> - -<h2 id="BigInt_instances" name="BigInt_instances"><code>BigInt</code> インスタンス</h2> - -<p>全ての <code>BigInt</code> インスタンスは <code>BigInt.prototype</code> を継承します。このプロトタイプオブジェクトへの変更は、全ての <code>BigInt</code> インスタンスに影響します。</p> - -<h3 id="Methods_2" name="Methods_2">メソッド</h3> - -<p>{{page("/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt/prototype", "Methods")}}</p> - -<h2 id="Usage_recommendations" name="Usage_recommendations">使用方法の推奨事項</h2> - -<h3 id="Coercion" name="Coercion">型変換</h3> - -<p>{{JSxRef("Number")}} と <code>BigInt</code> との間の型変換は精度が落ちる可能性があるため、 <code>BigInt</code> は値が論理的に2<sup>53</sup>以上になる場合にのみ使用し、この2つの型の間で型変換を行わないこと推奨します。</p> - -<h3 id="Cryptography" name="Cryptography">暗号処理</h3> - -<p><code>BigInt</code> で対応している演算は、実行時間が一定ではありません。従って、 <code>BigInt</code> は<a href="https://www.chosenplaintext.ca/articles/beginners-guide-constant-time-cryptography.html">暗号処理での使用には向きません</a>。</p> - -<h3 id="Use_within_JSON" name="Use_within_JSON">JSON での使用</h3> - -<p><code>BigInt</code> の値は既定で JSON のシリアライズに対応していないため、{{JSxRef("JSON.stringify()")}} を <code>BigInt</code> 値に対して使用すると <code>TypeError</code> が発生します。ただし、必要であれば独自の <code>toJSON</code> メソッドを実装することができます。</p> - -<pre class="brush: js notranslate">BigInt.prototype.toJSON = function() { return this.toString(); }</pre> - -<p><code>JSON.stringify</code> により、例外が発生する代わりに次のように文字列を生成するようになります。</p> - -<pre class="brush: js notranslate">JSON.stringify(BigInt(1)); -// '"1"'</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Calculating_Primes" name="Calculating_Primes">素数の計算</h3> - -<pre class="brush: js notranslate">function isPrime(p) { - for (let i = 2n; i * i <= p; i++) { - if (p % i === 0n) return false; - } - return true; -} - -// Takes a BigInt as an argument and returns a BigInt -function nthPrime(nth) { - let maybePrime = 2n; - let prime = 0n; - - while (nth >= 0n) { - if (isPrime(maybePrime)) { - nth -= 1n; - prime = maybePrime; - } - maybePrime += 1n; - } - - return prime; -} - -nthPrime(20n) -// ↪ 73n</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("ESDraft", "#sec-bigint-objects", "<code>BigInt</code> objects")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.BigInt")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{JSxRef("Number")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/bigint/index.md b/files/ja/web/javascript/reference/global_objects/bigint/index.md new file mode 100644 index 0000000000..f42782a3ea --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/bigint/index.md @@ -0,0 +1,289 @@ +--- +title: BigInt +slug: Web/JavaScript/Reference/Global_Objects/BigInt +tags: + - BigInt + - クラス + - JavaScript + - リファレンス +browser-compat: javascript.builtins.BigInt +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt +--- +{{JSRef}} + +**`BigInt`** は組み込みオブジェクトで、そのコンストラクターは `bigint` {{Glossary("Primitive", "プリミティブ")}} — または **BigInt 値** や単に **BigInt** と呼ばれることもありますが — を返します。これは 2^53 - 1 ([`Number.MAX_SAFE_INTEGER`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER)、 `number` {{Glossary("Primitive", "プリミティブ")}} または *Number 値*で表すことができる最大の数) よりも大きな数を表すことができます。 BigInt 値は任意に巨大な整数に使用することができます。 + +## 解説 + +**BigInt 値**は、単に **BigInt** と呼ばれることもありますが、 `bigint` {{Glossary("Primitive", "プリミティブ")}}です。整数リテラルの末尾に `n` を追加するか、 {{jsxref("Global_Objects/BigInt/BigInt", "BigInt()")}} コンストラクターを呼び出し、整数値または文字列値を与えることで生成することができます (ただし `new` 演算子なしで)。 + +```js +const previouslyMaxSafeInteger = 9007199254740991n + +const alsoHuge = BigInt(9007199254740991) +// ↪ 9007199254740991n + +const hugeString = BigInt("9007199254740991") +// ↪ 9007199254740991n + +const hugeHex = BigInt("0x1fffffffffffff") +// ↪ 9007199254740991n + +const hugeOctal = BigInt("0o377777777777777777") +// ↪ 9007199254740991n + +const hugeBin = BigInt("0b11111111111111111111111111111111111111111111111111111") +// ↪ 9007199254740991n +``` + +BigInt はいくつかの点で Number と似ていますが、重要ないくつかの点が異なります。組み込みの [`Math`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Math) オブジェクト内のメソッドでは利用できず、演算で Number の値と混ぜることができません。同じ型に統一する必要があります。ただし、BigInt を Number へ変換する際には精度が落ちることがあるので、相互に変化する場合には注意が必要です。 + +### 型情報 + +`typeof` の `BigInt` 値 (`bigint` プリミティブ) に対する評価値は、"`bigint`" となります。 + +```js +typeof 1n === 'bigint' // true +typeof BigInt('1') === 'bigint' // true +``` + +BitInt の値は `Object` でラップすることができます。 + +```js +typeof Object(1n) === 'object' // true +``` + +### 演算子 + +以下の演算子は BigInt 値またはオブジェクトでラップした BigInt 値で使用することができます。 + + + * - % ** + +[ビット操作演算子](/ja/docs/Web/JavaScript/Reference/Operators)は、同様に利用できますが、 `>>>` (論理的右シフト) は BigInt が常に符号付きなので除外されます。 + +同様に、単項演算子 (`+`) は [asm.js を壊さないように](https://github.com/tc39/proposal-bigint/blob/master/ADVANCED.md#dont-break-asmjs)対応していません。 + +```js +const previousMaxSafe = BigInt(Number.MAX_SAFE_INTEGER) +// ↪ 9007199254740991n + +const maxPlusOne = previousMaxSafe + 1n +// ↪ 9007199254740992n + +const theFuture = previousMaxSafe + 2n +// ↪ 9007199254740993n, this works now! + +const multi = previousMaxSafe * 2n +// ↪ 18014398509481982n + +const subtr = multi - 10n +// ↪ 18014398509481972n + +const mod = multi % 10n +// ↪ 2n + +const bigN = 2n ** 54n +// ↪ 18014398509481984n + +bigN * -1n +// ↪ -18014398509481984n +``` + +`/` 演算子もすべての数値に対して、期待される通りに動作します。ただし、実数との演算では BigInt 値と演算すhる際に小数が切り捨てられます。実数を返すことはありません。 + +```js +const expected = 4n / 2n +// ↪ 2n + +const truncated = 5n / 2n +// ↪ 2n, not 2.5n +``` + +### 比較演算 + +BigInt 値は Number 値と厳密等価ではありませんが、等価にはなります。 + +```js +0n === 0 +// ↪ false + +0n == 0 +// ↪ true +``` + +Number と BigInt は通常通り比較できます。 + +```js +1n < 2 +// ↪ true + +2n > 1 +// ↪ true + +2 > 2 +// ↪ false + +2n > 2 +// ↪ false + +2n >= 2 +// ↪ true +``` + +BigInt 値と Number 値は配列の要素に混在させたり並べ替えたりすることも可能です。 + +```js +const mixed = [4n, 6, -12n, 10, 4, 0, 0n] +// ↪ [4n, 6, -12n, 10, 4, 0, 0n] + +mixed.sort() // 既定の並べ替えの動作 +// ↪ [ -12n, 0, 0n, 10, 4n, 4, 6 ] + +mixed.sort((a, b) => a - b) +// 型が混在した減算はできないので動作しない +// TypeError: can't convert BigInt value to Number value + +// 適切な数値比較関数を使用した並べ替え +mixed.sort((a, b) => (a < b) ? -1 : ((a > b) ? 1 : 0)) +// ↪ [ -12n, 0, 0n, 4n, 4, 6, 10 ] +``` + +なお、 `Object` にラップされた BigInt は他のオブジェクトと同様の振る舞いをします。同じインスタンス同士が比較された場合にのみ等価となります。 + +```js +0n === Object(0n) // false +Object(0n) === Object(0n) // false + +const o = Object(0n) +o === o // true +``` + +### 条件式 + +BigInt 値は次のような場合は Number 値のように動作します。 + +- [`Boolean`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Boolean) へ変換される場合 ( [`Boolean`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Boolean) 関数を使用して) +- [論理演算子](/ja/docs/Web/JavaScript/Reference/Operators)の `||`、`&&`、`!`、または [`if`](/ja/docs/Web/JavaScript/Reference/Statements/if...else) 文のような条件式の中で使用された場合 + +```js +if (0n) { + console.log('Hello from the if!') +} else { + console.log('Hello from the else!') +} + +// ↪ "Hello from the else!" + +0n || 12n +// ↪ 12n + +0n && 12n +// ↪ 0n + +Boolean(0n) +// ↪ false + +Boolean(12n) +// ↪ true + +!12n +// ↪ false + +!0n +// ↪ true +``` + +## コンストラクター + +- [`BigInt()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt/BigInt) + - : 新しい BigInt 値を生成します。 + +<h2 id="Methods" name="Methods">静的メソッド</h2> + +- [`BigInt.asIntN()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt/asIntN) + - : BigInt 値を符号付き整数値に丸め、その値を返します。 +- [`BigInt.asUintN()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt/asUintN) + - : BigInt 値を符号なし整数値に丸め、その値を返します。 + +## インスタンスメソッド + +- [`BigInt.prototype.toLocaleString()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt/toLocaleString) + - : この BigInt 値の言語に合わせた表現の文字列を返します。 [`Object.prototype.toLocaleString()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/toLocaleString) メソッドを上書きします。 +- [`BigInt.prototype.toString()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt/toString) + - : この BigInt 値を指定された基数で表現した文字列を返します。 [`Object.prototype.toString()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/toString) メソッドを上書きします。 +- [`BigInt.prototype.valueOf()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt/valueOf) + - : この BigInt 値を返します。 [`Object.prototype.valueOf()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf) メソッドを上書きします。 + +## 使用方法の推奨事項 + +## 型変換 + +Number 値と BigInt 値との間の型変換は精度が落ちる可能性があるため、次のことを推奨します。 + +- BigInt 値は、値が 2^53 を超えることが合理的に予想される場合にのみ使用する。 +- BigInt 値と Number 値の間で型変換を行わない。 + +<h3 id="Cryptography" name="Cryptography">暗号処理</h3> + +BigInt で対応している演算は、実行時間が一定ではないので、[タイミング攻撃](https://en.wikipedia.org/wiki/Timing_attack)を受ける可能性があります。したがって、 JavaScript の BigInt は暗号処理での使用には向きません。 + +### JSON での使用 + +[`JSON.stringify()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) を BigInt 値に対して使用すると `TypeError` が発生します。 BigInt 値は既定で JSON のシリアライズに対応していないため、ただし、必要であれば独自の `toJSON` メソッドを実装することができます。 + +```js +BigInt.prototype.toJSON = function() { return this.toString() } +``` + +`JSON.stringify` により、例外が発生する代わりに次のように文字列を生成するようになります。 + +```js +JSON.stringify(BigInt(1)) +// '"1"' +``` + +## 例 + +### 素数の計算 + +```js +// 渡された BigInt が素数であった場合は true を返します +function isPrime(p) { + for (let i = 2n; i * i <= p; i++) { + if (p % i === 0n) return false; + } + return true +} + +// 引数として BigInt 値を取り、 nth 番目の素数を BigInt 値として返します。 +function nthPrime(nth) { + let maybePrime = 2n + let prime = 0n + + while (nth >= 0n) { + if (isPrime(maybePrime)) { + nth-- + prime = maybePrime + } + maybePrime++ + } + + return prime +} + +nthPrime(20n) +// ↪ 73n +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`Number`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number) +- [`Number.MAX_SAFE_INTEGER`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) diff --git a/files/ja/web/javascript/reference/global_objects/bigint/tolocalestring/index.md b/files/ja/web/javascript/reference/global_objects/bigint/tolocalestring/index.md new file mode 100644 index 0000000000..696c778e56 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/bigint/tolocalestring/index.md @@ -0,0 +1,114 @@ +--- +title: BigInt.prototype.toLocaleString() +slug: Web/JavaScript/Reference/Global_Objects/BigInt/toLocaleString +tags: + - BigInt + - 国際化 + - Intl + - JavaScript + - メソッド + - プロトタイプ +browser-compat: javascript.builtins.BigInt.toLocaleString +--- +{{JSRef}} + +**`toLocaleString()`** メソッドは、この BigInt 値の言語に合わせた表現の文字列を返します。 + +{{EmbedInteractiveExample("pages/js/bigint-tolocalestring.html")}} + +## 構文 + +```js +toLocaleString() +toLocaleString(locales) +toLocaleString(locales, options) +``` + +### 引数 + +`locales` および `options` の引数は、この関数の動作をカスタマイズするためのもので、アプリケーションは整形の慣例を使用する言語を指定することができます。 `locales` や `options` の引数を無視する実装では、使用するロケールや返す文字列の形式はすべて実装に依存します。 + +これらの引数や使用方法について、詳しくは [`Intl.NumberFormat()` +コンストラクター](/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat) を参照してください。 + +### 返値 + +指定された BigInt の言語に合わせた表現の文字列です。 + +## 性能 + +大量の数値を整形する場合は、 {{jsxref("Intl.NumberFormat")}} オブジェクトを生成して {{jsxref("Intl/NumberFormat/format", "NumberFormat.format")}} プロパティで提供される関数を使用したほうが有利です。 + +## 例 + +### `toLocaleString` の使用 + +ロケールを使用しない基本的な使用では、既定のロケールと既定のオプションで成形された文字列が返されます。 + +```js +var bigint = 3500n; + +bigint.toLocaleString(); +// "3,500" と表示 (U.S. English ロケールの場合) +``` + +### `locales` の使用 + +この例ではローカライズされた数値書式の変化形の一部を示しています。アプリケーションのユーザーインターフェイスで使用されている言語の書式を取得するには、必ず `locale` 引きお数でその言語を (場合によっては予備の言語も) 指定してください。 + +```js +var bigint = 123456789123456789n; + +// ドイツ語では千の位の区切りにピリオドを使用 +console.log(bigint.toLocaleString('de-DE')); +// → 123.456.789.123.456.789 + +// 多くのアラビア語を話す国ではアラビア語で東アラビア数字を使用 +console.log(bigint.toLocaleString('ar-EG')); +// → ١٢٣٬٤٥٦٬٧٨٩٬١٢٣٬٤٥٦٬٧٨٩ + +// インドでは千/十万/千万の区切りを使用 +console.log(bigint.toLocaleString('en-IN')); +// → 1,23,45,67,89,12,34,56,789 + +// nu 拡張キーは数値体系を要求。例えば中国語の数字の場合 +console.log(bigint.toLocaleString('zh-Hans-CN-u-nu-hanidec')); +// → 一二三,四五六,七八九,一二三,四五六,七八九 + +// 要求した言語に対応していない場合、例えばバリ語の場合、 +// 予備の言語、この場合はインドネシア語を使用 +console.log(bigint.toLocaleString(['ban', 'id'])); +// → 123.456.789.123.456.789 +``` + +### `options` の使用 + +`toLocaleString` で提供される結果は `options` 引数でカスタマイズできます。 + +```js +var bigint = 123456789123456789n; + +// 通貨書式を要求 +console.log(bigint.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })); +// → 123.456.789.123.456.789,00 € + +// 日本円には下位の単位がない +console.log(bigint.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' })) +// → ￥123,456,789,123,456,789 + +// 有効数字を 3 桁に限定 +console.log(bigint.toLocaleString('en-IN', { maximumSignificantDigits: 3 })); +// → 1,23,00,00,00,00,00,00,000 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("BigInt.toString()")}} diff --git a/files/ja/web/javascript/reference/global_objects/bigint/valueof/index.md b/files/ja/web/javascript/reference/global_objects/bigint/valueof/index.md new file mode 100644 index 0000000000..c0f82adbb5 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/bigint/valueof/index.md @@ -0,0 +1,48 @@ +--- +title: BigInt.prototype.valueOf() +slug: Web/JavaScript/Reference/Global_Objects/BigInt/valueOf +tags: + - BigInt + - JavaScript + - メソッド + - プロトタイプ + - valueOf() +browser-compat: javascript.builtins.BigInt.valueOf +translate_of: Web/JavaScript/Reference/Global_Objects/BigInt/valueOf +--- +{{JSRef}} + +**`valueOf()`** メソッドは、 {{jsxref("BigInt")}} オブジェクトにラップされたプリミティブ値を返します。 + +{{EmbedInteractiveExample("pages/js/bigint-valueof.html","shorter")}} + +## 構文 + +```js +bigIntObj.valueOf() +``` + +### 返値 + +指定された {{jsxref("BigInt")}} オブジェクトのプリミティブ値を表す BigInt です。 + +## 例 + +### `valueOf` の使用 + +```js +typeof Object(1n); // object +typeof Object(1n).valueOf(); // bigint +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("BigInt.prototype.toString()")}} diff --git a/files/ja/web/javascript/reference/global_objects/bigint64array/bigint64array/index.html b/files/ja/web/javascript/reference/global_objects/bigint64array/bigint64array/index.html index b69f3362dd..b22101ce7f 100644 --- a/files/ja/web/javascript/reference/global_objects/bigint64array/bigint64array/index.html +++ b/files/ja/web/javascript/reference/global_objects/bigint64array/bigint64array/index.html @@ -86,7 +86,7 @@ var bigint64 = new BigInt64Array(iterable); <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript typed arrays</a></li> + <li><a href="/ja/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript typed arrays</a></li> <li>{{jsxref("BigUint64Array")}}</li> <li>{{jsxref("DataView")}}</li> </ul> diff --git a/files/ja/web/javascript/reference/global_objects/bigint64array/index.html b/files/ja/web/javascript/reference/global_objects/bigint64array/index.html deleted file mode 100644 index db7a3ac87f..0000000000 --- a/files/ja/web/javascript/reference/global_objects/bigint64array/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: BigInt64Array -slug: Web/JavaScript/Reference/Global_Objects/BigInt64Array -tags: - - BigInt - - BigInt64Array - - Class - - JavaScript - - Reference - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/BigInt64Array ---- -<div>{{JSRef}}</div> - -<p><strong><code>BigInt64Array</code></strong> 型の配列は、プラットフォームのバイト順で 64 ビット符号付き整数の配列を表します。バイト順を制御する必要がある場合は、代わりに {{jsxref("DataView")}} を使用してください。内容は <code>0n</code> に初期化されます。一度確立されると、オブジェクトのメソッドを使って配列内の要素を参照するか、標準の配列インデックス構文を使って（つまり、角括弧記法を使って）配列を参照することができます。</p> - -<h2 id="Constructor" name="Constructor">コンストラクター</h2> - -<dl> - <dt><a href="/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array/BigInt64Array"><code>BigInt64Array()</code></a></dt> - <dd>新しい <code>BigInt64Array</code> オブジェクトを作成します</dd> -</dl> - -<h2 id="Static_properties" name="Static_properties">静的プロパティ</h2> - -<dl> - <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "BigInt64Array.BYTES_PER_ELEMENT")}}</dt> - <dd>要素サイズの数値を返します。<code>BigInt64Array</code> は <code>8</code> です。</dd> - <dt>{{jsxref("TypedArray.name", "BigInt64Array.name")}}</dt> - <dd>コンストラクター名の文字列を返します。<code>BigInt64Array</code> は "BigInt64Array" です。</dd> -</dl> - -<h2 id="Static_methods" name="Static_methods">静的メソッド</h2> - -<dl> - <dt>{{jsxref("TypedArray.from", "BigInt64Array.from()")}}</dt> - <dd>array-like、あるいは iterable オブジェクトから新しい <code>BigInt64Array</code> を作成します。{{jsxref("Array.from()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.of", "BigInt64Array.of()")}}</dt> - <dd>可変数の引数から新しい <code>BigInt64Array</code> を作成します。{{jsxref("Array.of()")}} も参照してください。</dd> -</dl> - -<h2 id="Instance_properties" name="Instance_properties">インスタンスプロパティ</h2> - -<dl> - <dt>{{jsxref("TypedArray.prototype.buffer", "BigInt64Array.prototype.buffer")}}</dt> - <dd><code>BigInt64Array</code> が参照する {{jsxref("ArrayBuffer")}} を返します。これは構築時に固定されているため、<strong>読み取り専用</strong>です。</dd> - <dt>{{jsxref("TypedArray.prototype.byteLength", "BigInt64Array.prototype.byteLength")}}</dt> - <dd><code>BigInt64Array</code> の {{jsxref("ArrayBuffer")}} の先頭からの長さをバイト数で返します。これは構築時に固定されているため、<strong>読み取り専用</strong>です。</dd> - <dt>{{jsxref("TypedArray.prototype.byteOffset", "BigInt64Array.prototype.byteOffset")}}</dt> - <dd><code>BigInt64Array</code> の {{jsxref("ArrayBuffer")}} の先頭からのオフセットをバイト単位で返します。これは構築時に固定されているため、<strong>読み取り専用</strong>です。</dd> - <dt>{{jsxref("TypedArray.prototype.length", "BigInt64Array.prototype.length")}}</dt> - <dd><code>BigInt64Array</code> に保持されている要素数を返します。これは構築時に固定されているため、<strong>読み取り専用</strong>です。</dd> -</dl> - -<h2 id="Instance_methods" name="Instance_methods">インスタンスメソッド</h2> - -<dl> - <dt>{{jsxref("TypedArray.copyWithin", "BigInt64Array.prototype.copyWithin()")}}</dt> - <dd>配列内の配列要素のシーケンスをコピーします。{{jsxref("Array.prototype.copyWithin()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.entries", "BigInt64Array.prototype.entries()")}}</dt> - <dd>配列の各インデックスのキーと値のペアを含む、新しい <code>Array Iterator</code> オブジェクトを返します。{{jsxref("Array.prototype.entries()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.every", "BigInt64Array.prototype.every()")}}</dt> - <dd>配列のすべての要素が、関数で指定されたテストに合格するかどうかをテストします。{{jsxref("Array.prototype.every()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.fill", "BigInt64Array.prototype.fill()")}}</dt> - <dd>開始インデックスから終了インデックスまでの、配列のすべての要素を静的な値で埋めます。{{jsxref("Array.prototype.fill()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.filter", "BigInt64Array.prototype.filter()")}}</dt> - <dd>指定したフィルターリング関数が <code>true</code> を返す要素をすべて含む、新しい配列を作成します。{{jsxref("Array.prototype.filter()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.find", "BigInt64Array.prototype.find()")}}</dt> - <dd>配列内の要素が指定したテスト関数を満たしている場合は、配列内で見つかった値を返し、見つからなかった場合は <code>undefined</code> を返します。{{jsxref("Array.prototype.find()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.findIndex", "BigInt64Array.prototype.findIndex()")}}</dt> - <dd>配列内の要素が指定したテスト関数を満たす場合は、配列内で見つかったインデックスを返し、見つからなかった場合は -1 を返します。{{jsxref("Array.prototype.findIndex()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.forEach", "BigInt64Array.prototype.forEach()")}}</dt> - <dd>配列の各要素に対して関数を呼び出します。{{jsxref("Array.prototype.forEach()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.includes", "BigInt64Array.prototype.includes()")}}</dt> - <dd>型付き配列が特定の要素を含むかどうかを判断し、適切な場合は <code>true</code> または <code>false</code> を返します。{{jsxref("Array.prototype.includes()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.indexOf", "BigInt64Array.prototype.indexOf()")}}</dt> - <dd>指定した値と等しい配列内の要素の最初の（最小の）インデックスを返します。何も見つからない場合は -1 を返します。{{jsxref("Array.prototype.indexOf()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.join", "BigInt64Array.prototype.join()")}}</dt> - <dd>配列のすべての要素を文字列に結合します。{{jsxref("Array.prototype.join()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.keys", "BigInt64Array.prototype.keys()")}}</dt> - <dd>配列の各インデックスのキーを含む新しい <code>Array Iterator</code> を返します。{{jsxref("Array.prototype.keys()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.lastIndexOf", "BigInt64Array.prototype.lastIndexOf()")}}</dt> - <dd>指定した値と等しい配列内の要素の最後の（最大の）インデックスを返します。何も見つからない場合は -1 を返します。{{jsxref("Array.prototype.lastIndexOf()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.map", "BigInt64Array.prototype.map()")}}</dt> - <dd>この配列の各要素に対して指定した関数を呼び出した結果を持つ、新しい配列を作成します。{{jsxref("Array.prototype.map()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.reduce", "BigInt64Array.prototype.reduce()")}}</dt> - <dd>アキュムレータと配列の各値（左から右へ）を一つの値に減らすための関数を適用します。{{jsxref("Array.prototype.reduce()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.reduceRight", "BigInt64Array.prototype.reduceRight()")}}</dt> - <dd>アキュムレータと配列の各値（右から左へ）を一つの値に減らすための関数を適用します。{{jsxref("Array.prototype.reduceRight()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.reverse", "BigInt64Array.prototype.reverse()")}}</dt> - <dd>配列の要素の順序を反転させます — 最初が最後になり、最後が最初になります。{{jsxref("Array.prototype.reverse()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.set", "BigInt64Array.prototype.set()")}}</dt> - <dd>型付けされた配列に複数の値を格納し、指定した配列から入力値を読み込みます。</dd> - <dt>{{jsxref("TypedArray.slice", "BigInt64Array.prototype.slice()")}}</dt> - <dd>配列の一部を抽出し、新しい配列を返します。{{jsxref("Array.prototype.slice()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.some", "BigInt64Array.prototype.some()")}}</dt> - <dd>配列の少なくとも一つの要素が、指定したテスト関数を満たしている場合に <code>true</code> を返します。{{jsxref("Array.prototype.some()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.sort", "BigInt64Array.prototype.sort()")}}</dt> - <dd>配列の要素を所定の位置に並べ替えて、その配列を返します。{{jsxref("Array.prototype.sort()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.subarray", "BigInt64Array.prototype.subarray()")}}</dt> - <dd>指定した開始要素と終了要素のインデックスから、新しい <code>BigUint64Array</code> を返します。</dd> - <dt>{{jsxref("TypedArray.values", "BigInt64Array.prototype.values()")}}</dt> - <dd>配列の各インデックスの値を含む、新しい <code>Array Iterator</code> オブジェクトを返します。{{jsxref("Array.prototype.values()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.toLocaleString", "BigInt64Array.prototype.toLocaleString()")}}</dt> - <dd>配列とその要素を表すローカライズされた文字列を返します。{{jsxref("Array.prototype.toLocaleString()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.toString", "BigInt64Array.prototype.toString()")}}</dt> - <dd>配列とその要素を表す文字列を返します。{{jsxref("Array.prototype.toString()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.@@iterator", "BigInt64Array.prototype[@@iterator]()")}}</dt> - <dd>配列の各インデックスの値を含む、新しい <code>Array Iterator</code> オブジェクトを返します。</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Different_ways_to_create_a_BigInt64Array" name="Different_ways_to_create_a_BigInt64Array"><code>BigInt64Array</code> の作成方法の違い</h3> - -<pre class="brush: js notranslate">// length から -var bigint64 = new BigInt64Array(2); -bigint64[0] = 42n; -console.log(bigint64[0]); // 42n -console.log(bigint64.length); // 2 -console.log(bigint64.BYTES_PER_ELEMENT); // 8 - -// 配列から -var arr = new BigInt64Array([21n,31n]); -console.log(arr[1]); // 31n - -// 別の TypedArray から -var x = new BigInt64Array([21n, 31n]); -var y = new BigInt64Array(x); -console.log(y[0]); // 21n - -// ArrayBuffer から -var buffer = new ArrayBuffer(32); -var z = new BigInt64Array(buffer, 0, 4); - -// iterable なものから -var iterable = function*(){ yield* [1n, 2n, 3n]; }(); -var bigint64 = new BigInt64Array(iterable); -// BigInt64Array[1n, 2n, 3n] -</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("ESDraft", "#sec-typedarray-objects", "BigInt64Array")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.builtins.BigInt64Array")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript typed arrays</a></li> - <li>{{jsxref("BigUint64Array")}}</li> - <li>{{jsxref("DataView")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/bigint64array/index.md b/files/ja/web/javascript/reference/global_objects/bigint64array/index.md new file mode 100644 index 0000000000..b874e53d62 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/bigint64array/index.md @@ -0,0 +1,147 @@ +--- +title: BigInt64Array +slug: Web/JavaScript/Reference/Global_Objects/BigInt64Array +tags: + - BigInt + - BigInt64Array + - クラス + - JavaScript + - Reference + - TypedArray + - 型付き配列 +browser-compat: javascript.builtins.BigInt64Array +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt64Array +--- +{{JSRef}} + +**`BigInt64Array`** は型付き配列で、プラットフォームのバイト順による 16 ビット符号付き整数値の配列を表します。バイト順の制御が必要な場合は、代わりに {{jsxref("DataView")}} を使用してください。中身は `0n` で初期化されます。生成されると、配列内の要素はそのオブジェクトのメソッドを使用するか、配列の標準的な添字の構文 (すなわち、ブラケット記法) を使用するかして参照することができます。 + +## コンストラクター + +- [`BigInt64Array()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array/BigInt64Array) + - : 新しい `BigInt64Array` オブジェクトを生成します。 + +## 静的プロパティ + +- {{jsxref("TypedArray.BYTES_PER_ELEMENT", "BigInt64Array.BYTES_PER_ELEMENT")}} + - : 要素の大きさを数値で返します。`BigInt64Array` の場合は `8` です。 +- {{jsxref("TypedArray.name", "BigInt64Array.name")}} + - : コンストラクター名を文字列値で返します。`BigInt64Array` の場合、 "`BigInt64Array`" です。 + +## 静的メソッド + +- {{jsxref("TypedArray.from", "BigInt64Array.from()")}} + - : 配列風オブジェクトまたは反復可能オブジェクトから新しい `BigInt64Array` オブジェクトを生成します。 {{jsxref("Array.from()")}} も参照してください。 +- {{jsxref("TypedArray.of", "BigInt64Array.of()")}} + - : 可変長引数で新しい `BigInt64Array` オブジェクトを生成します。{{jsxref("Array.of()")}} も参照してください。 + +## インスタンスプロパティ + +- {{jsxref("TypedArray.prototype.buffer", "BigInt64Array.prototype.buffer")}} + - : `BigInt64Array` オブジェクトによって参照される {{jsxref("ArrayBuffer")}} を返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.byteLength", "BigInt64Array.prototype.byteLength")}} + - : {{jsxref("ArrayBuffer")}} の先頭からの `BigInt64Array` の長さを (バイト単位で) 返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.byteOffset", "BigInt64Array.prototype.byteOffset")}} + - : {{jsxref("ArrayBuffer")}} の先頭からの `BigInt64Array` のオフセットを (バイト単位で) 返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.length", "BigInt64Array.prototype.length")}} + - : `BigInt64Array` オブジェクト内に保持されている要素の数を返します。構築時に固定され、**読み取り専用**です。 + +## インスタンスメソッド + +- {{jsxref("TypedArray.copyWithin", "BigInt64Array.prototype.copyWithin()")}} + - : 配列内で一連の配列要素をコピーします。{{jsxref("Array.prototype.copyWithin()")}} も参照してください。 +- {{jsxref("TypedArray.entries", "BigInt64Array.prototype.entries()")}} + - : 配列内ですべての位置におけるキーと値の組を提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.entries()")}} も参照してください。 +- {{jsxref("TypedArray.every", "BigInt64Array.prototype.every()")}} + - : 配列内のすべての要素が関数によって提供されたテストに合格するかどうかテストを実行します。{{jsxref("Array.prototype.every()")}} も参照してください。 +- {{jsxref("TypedArray.fill", "BigInt64Array.prototype.fill()")}} + - : 配列の先頭位置から末尾位置までのすべての要素を固定値に設定します。{{jsxref("Array.prototype.fill()")}} も参照してください。 +- {{jsxref("TypedArray.filter", "BigInt64Array.prototype.filter()")}} + - : この配列のすべての要素のうち、与えられたフィルタリング関数が `true` を返すものをもつ新しい配列を生成します。{{jsxref("Array.prototype.filter()")}} も参照してください。 +- {{jsxref("TypedArray.find", "BigInt64Array.prototype.find()")}} + - : 配列内の要素に与えられたテスト関数を満足するものがあったら、見つかった値を返します。見つからなければ `undefined` を返します。{{jsxref("Array.prototype.find()")}} も参照してください。 +- {{jsxref("TypedArray.findIndex", "BigInt64Array.prototype.findIndex()")}} + - : 配列内の要素に与えられたテスト関数を満足するものがあったら、見つかった位置を返します。見つからなければ `-1` を返します。{{jsxref("Array.prototype.findIndex()")}} も参照してください。 +- {{jsxref("TypedArray.forEach", "BigInt64Array.prototype.forEach()")}} + - : 配列内のそれぞれの要素について関数を呼び出します。{{jsxref("Array.prototype.forEach()")}} も参照してください。 +- {{jsxref("TypedArray.includes", "BigInt64Array.prototype.includes()")}} + - : 型付き配列に特定の要素があるかどうかを判断し、それに応じて `true` か `false`を返します。 {{jsxref("Array.prototype.includes()")}} も参照してください。 +- {{jsxref("TypedArray.indexOf", "BigInt64Array.prototype.indexOf()")}} + - : 指定された値に等しい配列内の要素の最初の (最小の) 位置を返します。見つからなかった場合、 `-1` を返します。{{jsxref("Array.prototype.indexOf()")}} も参照してください。 +- {{jsxref("TypedArray.join", "BigInt64Array.prototype.join()")}} + - : 配列のすべての要素を 1 つの文字列に結合します。{{jsxref("Array.prototype.join()")}} も参照してください。 +- {{jsxref("TypedArray.keys", "BigInt64Array.prototype.keys()")}} + - : 配列内ですべての位置におけるキーを提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.keys()")}} も参照してください。 +- {{jsxref("TypedArray.lastIndexOf", "BigInt64Array.prototype.lastIndexOf()")}} + - : 指定された値に等しい配列内の要素の最後の (最大の) 位置を返します。見つからなかった場合、 `-1` を返します。{{jsxref("Array.prototype.lastIndexOf()")}} も参照してください。 +- {{jsxref("TypedArray.map", "BigInt64Array.prototype.map()")}} + - : この配列のすべての要素で与えられた関数を呼び出した結果をもつ新しい配列を生成します。{{jsxref("Array.prototype.map()")}} も参照してください。 +- {{jsxref("TypedArray.reduce", "BigInt64Array.prototype.reduce()")}} + - : アキュムレーターとこの配列のそれぞれの値に対して (左から右へ) 関数を適用し、単一の値に還元します。{{jsxref("Array.prototype.reduce()")}} も参照してください。 +- {{jsxref("TypedArray.reduceRight", "BigInt64Array.prototype.reduceRight()")}} + - : アキュムレーターとこの配列のそれぞれの値に対して (右から左へ) 関数を適用し、単一の値に還元します。{{jsxref("Array.prototype.reduceRight()")}} も参照してください。 +- {{jsxref("TypedArray.reverse", "BigInt64Array.prototype.reverse()")}} + - : 配列の要素の順番を反転させます。最初の要素は最後になり、最後の要素は最初になります。{{jsxref("Array.prototype.reverse()")}} も参照してください。 +- {{jsxref("TypedArray.set", "BigInt64Array.prototype.set()")}} + - : 入力値を指定した配列から読み込み、この型付き配列内に複数の値を格納します。 +- {{jsxref("TypedArray.slice", "BigInt64Array.prototype.slice()")}} + - : 配列の一部を取り出して新しい配列を返します。{{jsxref("Array.prototype.slice()")}} も参照してください。 +- {{jsxref("TypedArray.some", "BigInt64Array.prototype.some()")}} + - : この配列の 1 つ以上の要素が与えられたテスト関数を満たした場合に `true` を返します。{{jsxref("Array.prototype.some()")}} も参照してください。 +- {{jsxref("TypedArray.sort", "BigInt64Array.prototype.sort()")}} + - : 配列の要素をその場で並べ替え、その配列を返します。{{jsxref("Array.prototype.sort()")}} も参照してください。 +- {{jsxref("TypedArray.subarray", "BigInt64Array.prototype.subarray()")}} + - : 指定された先頭と末尾の要素位置から新しい `BigInt64Array` を返します。 +- {{jsxref("TypedArray.values", "BigInt64Array.prototype.values()")}} + - : 配列内ですべての位置における値を提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.values()")}} も参照してください。 +- {{jsxref("TypedArray.toLocaleString", "BigInt64Array.prototype.toLocaleString()")}} + - : 配列とその要素を表すローカライズされた文字列を返します。{{jsxref("Array.prototype.toLocaleString()")}} も参照してください。 +- {{jsxref("TypedArray.toString", "BigInt64Array.prototype.toString()")}} + - : 配列とその要素を表す文字列を返します。{{jsxref("Array.prototype.toString()")}} も参照してください。 +- {{jsxref("TypedArray.@@iterator", "BigInt64Array.prototype[@@iterator]()")}} + - : 配列内ですべての位置における値を提供する新しい*配列イテレーター*を返します。 + +## 例 + +### 様々な方法で `BigInt64Array` を作成 + +```js +// 長さから +var bigint64 = new BigInt64Array(2); +bigint64[0] = 42n; +console.log(bigint64[0]); // 42n +console.log(bigint64.length); // 2 +console.log(bigint64.BYTES_PER_ELEMENT); // 8 + +// 配列から +var arr = new BigInt64Array([21n,31n]); +console.log(arr[1]); // 31n + +// From another TypedArray +var x = new BigInt64Array([21n, 31n]); +var y = new BigInt64Array(x); +console.log(y[0]); // 21n + +// ArrayBuffer から +var buffer = new ArrayBuffer(32); +var z = new BigInt64Array(buffer, 0, 4); + +// 反復可能オブジェクトから +var iterable = function*(){ yield* [1n, 2n, 3n]; }(); +var bigint64 = new BigInt64Array(iterable); +// BigInt64Array[1n, 2n, 3n] +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- {{jsxref("BigUint64Array")}} +- {{jsxref("DataView")}} diff --git a/files/ja/web/javascript/reference/global_objects/biguint64array/biguint64array/index.html b/files/ja/web/javascript/reference/global_objects/biguint64array/biguint64array/index.html index e381709aba..65b2c38a64 100644 --- a/files/ja/web/javascript/reference/global_objects/biguint64array/biguint64array/index.html +++ b/files/ja/web/javascript/reference/global_objects/biguint64array/biguint64array/index.html @@ -88,7 +88,7 @@ var biguint64 = new BigUint64Array(iterable); <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript typed arrays</a></li> + <li><a href="/ja/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript typed arrays</a></li> <li>{{jsxref("BigInt64Array")}}</li> <li>{{jsxref("DataView")}}</li> </ul> diff --git a/files/ja/web/javascript/reference/global_objects/biguint64array/index.html b/files/ja/web/javascript/reference/global_objects/biguint64array/index.html deleted file mode 100644 index 0976191b2c..0000000000 --- a/files/ja/web/javascript/reference/global_objects/biguint64array/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: BigUint64Array -slug: Web/JavaScript/Reference/Global_Objects/BigUint64Array -tags: - - BigInt - - BigUInt64Array - - Class - - JavaScript - - Reference - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/BigUint64Array ---- -<div>{{JSRef}}</div> - -<p><strong><code>BigUint64Array</code></strong> 型の配列は、プラットフォームのバイト順で 64 ビット符号付き整数の配列を表します。バイト順を制御する必要がある場合は、代わりに {{jsxref("DataView")}} を使用してください。内容は <code>0n</code> に初期化されます。一度確立されると、オブジェクトのメソッドを使って配列内の要素を参照するか、標準の配列インデックス構文を使って（つまり、角括弧記法を使って）配列を参照することができます。</p> - -<h2 id="Constructor" name="Constructor">コンストラクター</h2> - -<dl> - <dt><a href="/docs/Web/JavaScript/Reference/Global_Objects/BigUint64Array/BigUint64Array"><code>BigUint64Array()</code></a></dt> - <dd>新しい <code>BigUint64Array</code> オブジェクトを作成します</dd> -</dl> - -<h2 id="Static_properties" name="Static_properties">静的プロパティ</h2> - -<dl> - <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "BigUint64Array.BYTES_PER_ELEMENT")}}</dt> - <dd>要素サイズの数値を返します。<code>BigUint64Array</code> は <code>8</code> です。</dd> - <dt>{{jsxref("TypedArray.name", "BigUint64Array.name")}}</dt> - <dd>コンストラクター名の文字列を返します。<code>BigUint64Array</code> は "BigUint64Array" です。</dd> -</dl> - -<h2 id="Static_methods" name="Static_methods">静的メソッド</h2> - -<dl> - <dt>{{jsxref("TypedArray.from", "BigUint64Array.from()")}}</dt> - <dd>array-like、あるいは iterable オブジェクトから新しい <code>BigUint64Array</code> を作成します。{{jsxref("Array.from()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.of", "BigUint64Array.of()")}}</dt> - <dd>可変数の引数から新しい <code>BigUint64Array</code> を作成します。{{jsxref("Array.of()")}} も参照してください。</dd> -</dl> - -<h2 id="Instance_properties" name="Instance_properties">インスタンスプロパティ</h2> - -<dl> - <dt>{{jsxref("TypedArray.prototype.buffer", "BigUint64Array.prototype.buffer")}}</dt> - <dd><code>BigUint64Array</code> が参照する {{jsxref("ArrayBuffer")}} を返します。これは構築時に固定されているため、<strong>読み取り専用</strong>です。</dd> - <dt>{{jsxref("TypedArray.prototype.byteLength", "BigUint64Array.prototype.byteLength")}}</dt> - <dd><code>BigUint64Array</code> の {{jsxref("ArrayBuffer")}} の先頭からの長さをバイト数で返します。これは構築時に固定されているため、<strong>読み取り専用</strong>です。</dd> - <dt>{{jsxref("TypedArray.prototype.byteOffset", "BigUint64Array.prototype.byteOffset")}}</dt> - <dd><code>BigUint64Array</code> の {{jsxref("ArrayBuffer")}} の先頭からのオフセットをバイト単位で返します。これは構築時に固定されているため、<strong>読み取り専用</strong>です。</dd> - <dt>{{jsxref("TypedArray.prototype.length", "BigUint64Array.prototype.length")}}</dt> - <dd><code>BigUint64Array</code> に保持されている要素数を返します。これは構築時に固定されているため、<strong>読み取り専用</strong>です。</dd> -</dl> - -<h2 id="Instance_methods" name="Instance_methods">インスタンスメソッド</h2> - -<dl> - <dt>{{jsxref("TypedArray.copyWithin", "BigUint64Array.prototype.copyWithin()")}}</dt> - <dd>配列内の配列要素のシーケンスをコピーします。{{jsxref("Array.prototype.copyWithin()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.entries", "BigUint64Array.prototype.entries()")}}</dt> - <dd>配列の各インデックスのキーと値のペアを含む、新しい <code>Array Iterator</code> オブジェクトを返します。{{jsxref("Array.prototype.entry()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.every", "BigUint64Array.prototype.every()")}}</dt> - <dd>配列のすべての要素が、関数で指定されたテストに合格するかどうかをテストします。{{jsxref("Array.prototype.every()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.fill", "BigUint64Array.prototype.fill()")}}</dt> - <dd>開始インデックスから終了インデックスまでの、配列のすべての要素を静的な値で埋めます。{{jsxref("Array.prototype.fill()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.filter", "BigUint64Array.prototype.filter()")}}</dt> - <dd>指定したフィルターリング関数が <code>true</code> を返す要素をすべて含む、新しい配列を作成します。{{jsxref("Array.prototype.filter()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.find", "BigUint64Array.prototype.find()")}}</dt> - <dd>配列内の要素が指定したテスト関数を満たしている場合は、配列内で見つかった値を返し、見つからなかった場合は <code>undefined</code> を返します。{{jsxref("Array.prototype.find()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.findIndex", "BigUint64Array.prototype.findIndex()")}}</dt> - <dd>配列内の要素が指定したテスト関数を満たす場合は、配列内で見つかったインデックスを返し、見つからなかった場合は -1 を返します。{{jsxref("Array.prototype.findIndex()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.forEach", "BigUint64Array.prototype.forEach()")}}</dt> - <dd>配列の各要素に対して関数を呼び出します。{{jsxref("Array.prototype.forEach()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.includes", "BigUint64Array.prototype.includes()")}}</dt> - <dd>型付き配列が特定の要素を含むかどうかを判断し、適切な場合は <code>true</code> または <code>false</code> を返します。{{jsxref("Array.prototype.includes()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.indexOf", "BigUint64Array.prototype.indexOf()")}}</dt> - <dd>指定した値と等しい配列内の要素の最初の（最小の）インデックスを返します。何も見つからない場合は -1 を返します。{{jsxref("Array.prototype.indexOf()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.join", "BigUint64Array.prototype.join()")}}</dt> - <dd>配列のすべての要素を文字列に結合します。{{jsxref("Array.prototype.join()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.keys", "BigUint64Array.prototype.keys()")}}</dt> - <dd>配列の各インデックスのキーを含む新しい <code>Array Iterator</code> を返します。{{jsxref("Array.prototype.keys()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.lastIndexOf", "BigUint64Array.prototype.lastIndexOf()")}}</dt> - <dd>指定した値と等しい配列内の要素の最後の（最大の）インデックスを返します。何も見つからない場合は -1 を返します。{{jsxref("Array.prototype.lastIndexOf()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.map", "BigUint64Array.prototype.map()")}}</dt> - <dd>この配列の各要素に対して指定した関数を呼び出した結果を持つ、新しい配列を作成します。{{jsxref("Array.prototype.map()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.reduce", "BigUint64Array.prototype.reduce()")}}</dt> - <dd>アキュムレータと配列の各値（左から右へ）を一つの値に減らすための関数を適用します。{{jsxref("Array.prototype.reduce()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.reduceRight", "BigUint64Array.prototype.reduceRight()")}}</dt> - <dd>アキュムレータと配列の各値（右から左へ）を一つの値に減らすための関数を適用します。{{jsxref("Array.prototype.reduceRight()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.reverse", "BigUint64Array.prototype.reverse()")}}</dt> - <dd>配列の要素の順序を反転させます — 最初が最後になり、最後が最初になります。{{jsxref("Array.prototype.reverse()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.set", "BigUint64Array.prototype.set()")}}</dt> - <dd>型付けされた配列に複数の値を格納し、指定した配列から入力値を読み込みます。</dd> - <dt>{{jsxref("TypedArray.slice", "BigUint64Array.prototype.slice()")}}</dt> - <dd>配列の一部を抽出し、新しい配列を返します。{{jsxref("Array.prototype.slice()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.some", "BigUint64Array.prototype.some()")}}</dt> - <dd>配列の少なくとも一つの要素が、指定したテスト関数を満たしている場合に <code>true</code> を返します。{{jsxref("Array.prototype.some()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.sort", "BigUint64Array.prototype.sort()")}}</dt> - <dd>配列の要素を所定の位置に並べ替えて、その配列を返します。{{jsxref("Array.prototype.sort()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.subarray", "BigUint64Array.prototype.subarray()")}}</dt> - <dd>指定した開始要素と終了要素のインデックスから、新しい <code>BigUint64Array</code> を返します。</dd> - <dt>{{jsxref("TypedArray.values", "BigUint64Array.prototype.values()")}}</dt> - <dd>配列の各インデックスの値を含む、新しい <code>Array Iterator</code> オブジェクトを返します。{{jsxref("Array.prototype.values()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.toLocaleString", "BigUint64Array.prototype.toLocaleString()")}}</dt> - <dd>配列とその要素を表すローカライズされた文字列を返します。{{jsxref("Array.prototype.toLocaleString()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.toString", "BigUint64Array.prototype.toString()")}}</dt> - <dd>配列とその要素を表す文字列を返します。{{jsxref("Array.prototype.toString()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.@@iterator", "BigUint64Array.prototype[@@iterator]()")}}</dt> - <dd>配列の各インデックスの値を含む、新しい <code>Array Iterator</code> オブジェクトを返します。</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Different_ways_to_create_a_BigUint64Array" name="Different_ways_to_create_a_BigUint64Array"><code>BigUint64Array</code> の作成方法の違い</h3> - -<pre class="brush: js notranslate">// length から -var biguint64 = new BigUint64Array(2); -biguint64[0] = 42n; -console.log(biguint64[0]); // 42n -console.log(biguint64.length); // 2 -console.log(biguint64.BYTES_PER_ELEMENT); // 8 - -// 配列から -var arr = new BigUint64Array([21n,31n]); -console.log(arr[1]); // 31n - -// 別の TypedArray から -var x = new BigUint64Array([21n, 31n]); -var y = new BigUint64Array(x); -console.log(y[0]); // 21n - -// ArrayBuffer から -var buffer = new ArrayBuffer(32); -var z = new BigUint64Array(buffer, 0, 4); - -// iterable なものから -var iterable = function*(){ yield* [1n, 2n, 3n]; }(); -var biguint64 = new BigUint64Array(iterable); -// BigUint64Array[1n, 2n, 3n] -</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("ESDraft", "#sec-typedarray-objects", "BigUint64Array")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.builtins.BigUint64Array")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript typed arrays</a></li> - <li>{{jsxref("BigInt64Array")}}</li> - <li>{{jsxref("DataView")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/biguint64array/index.md b/files/ja/web/javascript/reference/global_objects/biguint64array/index.md new file mode 100644 index 0000000000..9b8fd47ba8 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/biguint64array/index.md @@ -0,0 +1,147 @@ +--- +title: BigUint64Array +slug: Web/JavaScript/Reference/Global_Objects/BigUint64Array +tags: + - BigInt + - BigUInt64Array + - クラス + - JavaScript + - Reference + - TypedArray + - 型付き配列 +browser-compat: javascript.builtins.BigUint64Array +translation_of: Web/JavaScript/Reference/Global_Objects/BigUint64Array +--- +{{JSRef}} + +**`BigUint64Array`** は型付き配列で、プラットフォームのバイト順による 16 ビット符号なし整数値の配列を表します。バイト順の制御が必要な場合は、代わりに {{jsxref("DataView")}} を使用してください。中身は `0n` で初期化されます。生成されると、配列内の要素はそのオブジェクトのメソッドを使用するか、配列の標準的な添字の構文 (すなわち、ブラケット記法) を使用するかして参照することができます。 + +## コンストラクター + +- [`BigUint64Array()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigUint64Array/BigUint64Array) + - : 新しい `BigUint64Array` オブジェクトを生成します。 + +## 静的プロパティ + +- {{jsxref("TypedArray.BYTES_PER_ELEMENT", "BigUint64Array.BYTES_PER_ELEMENT")}} + - : 要素の大きさを数値で返します。`BigUint64Array` の場合は `8` です。 +- {{jsxref("TypedArray.name", "BigUint64Array.name")}} + - : コンストラクター名を文字列値で返します。`BigUint64Array` の場合、 "`BigUint64Array`" です。 + +## 静的メソッド + +- {{jsxref("TypedArray.from", "BigUint64Array.from()")}} + - : 配列風オブジェクトまたは反復可能オブジェクトから新しい `BigUint64Array` オブジェクトを生成します。 {{jsxref("Array.from()")}} も参照してください。 +- {{jsxref("TypedArray.of", "BigUint64Array.of()")}} + - : 可変長引数で新しい `BigUint64Array` オブジェクトを生成します。{{jsxref("Array.of()")}} も参照してください。 + +## インスタンスプロパティ + +- {{jsxref("TypedArray.prototype.buffer", "BigUint64Array.prototype.buffer")}} + - : `BigUint64Array` オブジェクトによって参照される {{jsxref("ArrayBuffer")}} を返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.byteLength", "BigUint64Array.prototype.byteLength")}} + - : {{jsxref("ArrayBuffer")}} の先頭からの `BigUint64Array` の長さを (バイト単位で) 返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.byteOffset", "BigUint64Array.prototype.byteOffset")}} + - : {{jsxref("ArrayBuffer")}} の先頭からの `BigUint64Array` のオフセットを (バイト単位で) 返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.length", "BigUint64Array.prototype.length")}} + - : `BigUint64Array` オブジェクト内に保持されている要素の数を返します。構築時に固定され、**読み取り専用**です。 + +## インスタンスメソッド + +- {{jsxref("TypedArray.copyWithin", "BigUint64Array.prototype.copyWithin()")}} + - : 配列内で一連の配列要素をコピーします。{{jsxref("Array.prototype.copyWithin()")}} も参照してください。 +- {{jsxref("TypedArray.entries", "BigUint64Array.prototype.entries()")}} + - : 配列内ですべての位置におけるキーと値の組を提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.entries()")}} も参照してください。 +- {{jsxref("TypedArray.every", "BigUint64Array.prototype.every()")}} + - : 配列内のすべての要素が関数によって提供されたテストに合格するかどうかテストを実行します。{{jsxref("Array.prototype.every()")}} も参照してください。 +- {{jsxref("TypedArray.fill", "BigUint64Array.prototype.fill()")}} + - : 配列の先頭位置から末尾位置までのすべての要素を固定値に設定します。{{jsxref("Array.prototype.fill()")}} も参照してください。 +- {{jsxref("TypedArray.filter", "BigUint64Array.prototype.filter()")}} + - : この配列のすべての要素のうち、与えられたフィルタリング関数が `true` を返すものをもつ新しい配列を生成します。{{jsxref("Array.prototype.filter()")}} も参照してください。 +- {{jsxref("TypedArray.find", "BigUint64Array.prototype.find()")}} + - : 配列内の要素に与えられたテスト関数を満足するものがあったら、見つかった値を返します。見つからなければ `undefined` を返します。{{jsxref("Array.prototype.find()")}} も参照してください。 +- {{jsxref("TypedArray.findIndex", "BigUint64Array.prototype.findIndex()")}} + - : 配列内の要素に与えられたテスト関数を満足するものがあったら、見つかった位置を返します。見つからなければ `-1` を返します。{{jsxref("Array.prototype.findIndex()")}} も参照してください。 +- {{jsxref("TypedArray.forEach", "BigUint64Array.prototype.forEach()")}} + - : 配列内のそれぞれの要素について関数を呼び出します。{{jsxref("Array.prototype.forEach()")}} も参照してください。 +- {{jsxref("TypedArray.includes", "BigUint64Array.prototype.includes()")}} + - : 型付き配列に特定の要素があるかどうかを判断し、それに応じて `true` か `false`を返します。 {{jsxref("Array.prototype.includes()")}} も参照してください。 +- {{jsxref("TypedArray.indexOf", "BigUint64Array.prototype.indexOf()")}} + - : 指定された値に等しい配列内の要素の最初の (最小の) 位置を返します。見つからなかった場合、 `-1` を返します。{{jsxref("Array.prototype.indexOf()")}} も参照してください。 +- {{jsxref("TypedArray.join", "BigUint64Array.prototype.join()")}} + - : 配列のすべての要素を 1 つの文字列に結合します。{{jsxref("Array.prototype.join()")}} も参照してください。 +- {{jsxref("TypedArray.keys", "BigUint64Array.prototype.keys()")}} + - : 配列内ですべての位置におけるキーを提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.keys()")}} も参照してください。 +- {{jsxref("TypedArray.lastIndexOf", "BigUint64Array.prototype.lastIndexOf()")}} + - : 指定された値に等しい配列内の要素の最後の (最大の) 位置を返します。見つからなかった場合、 `-1` を返します。{{jsxref("Array.prototype.lastIndexOf()")}} も参照してください。 +- {{jsxref("TypedArray.map", "BigUint64Array.prototype.map()")}} + - : この配列のすべての要素で与えられた関数を呼び出した結果をもつ新しい配列を生成します。{{jsxref("Array.prototype.map()")}} も参照してください。 +- {{jsxref("TypedArray.reduce", "BigUint64Array.prototype.reduce()")}} + - : アキュムレーターとこの配列のそれぞれの値に対して (左から右へ) 関数を適用し、単一の値に還元します。{{jsxref("Array.prototype.reduce()")}} も参照してください。 +- {{jsxref("TypedArray.reduceRight", "BigUint64Array.prototype.reduceRight()")}} + - : アキュムレーターとこの配列のそれぞれの値に対して (右から左へ) 関数を適用し、単一の値に還元します。{{jsxref("Array.prototype.reduceRight()")}} も参照してください。 +- {{jsxref("TypedArray.reverse", "BigUint64Array.prototype.reverse()")}} + - : 配列の要素の順番を反転させます。最初の要素は最後になり、最後の要素は最初になります。{{jsxref("Array.prototype.reverse()")}} も参照してください。 +- {{jsxref("TypedArray.set", "BigUint64Array.prototype.set()")}} + - : 入力値を指定した配列から読み込み、この型付き配列内に複数の値を格納します。 +- {{jsxref("TypedArray.slice", "BigUint64Array.prototype.slice()")}} + - : 配列の一部を取り出して新しい配列を返します。{{jsxref("Array.prototype.slice()")}} も参照してください。 +- {{jsxref("TypedArray.some", "BigUint64Array.prototype.some()")}} + - : この配列の 1 つ以上の要素が与えられたテスト関数を満たした場合に `true` を返します。{{jsxref("Array.prototype.some()")}} も参照してください。 +- {{jsxref("TypedArray.sort", "BigUint64Array.prototype.sort()")}} + - : 配列の要素をその場で並べ替え、その配列を返します。{{jsxref("Array.prototype.sort()")}} も参照してください。 +- {{jsxref("TypedArray.subarray", "BigUint64Array.prototype.subarray()")}} + - : 指定された先頭と末尾の要素位置から新しい `BigUint64Array` を返します。 +- {{jsxref("TypedArray.values", "BigUint64Array.prototype.values()")}} + - : 配列内ですべての位置における値を提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.values()")}} も参照してください。 +- {{jsxref("TypedArray.toLocaleString", "BigUint64Array.prototype.toLocaleString()")}} + - : 配列とその要素を表すローカライズされた文字列を返します。{{jsxref("Array.prototype.toLocaleString()")}} も参照してください。 +- {{jsxref("TypedArray.toString", "BigUint64Array.prototype.toString()")}} + - : 配列とその要素を表す文字列を返します。{{jsxref("Array.prototype.toString()")}} も参照してください。 +- {{jsxref("TypedArray.@@iterator", "BigUint64Array.prototype[@@iterator]()")}} + - : 配列内ですべての位置における値を提供する新しい*配列イテレーター*を返します。 + +## 例 + +### 様々な方法で `BigUint64Array` を作成 + +```js +// 長さから +var biguint64 = new BigUint64Array(2); +biguint64[0] = 42n; +console.log(biguint64[0]); // 42n +console.log(biguint64.length); // 2 +console.log(biguint64.BYTES_PER_ELEMENT); // 8 + +// 配列から +var arr = new BigUint64Array([21n,31n]); +console.log(arr[1]); // 31n + +// From another TypedArray +var x = new BigUint64Array([21n, 31n]); +var y = new BigUint64Array(x); +console.log(y[0]); // 21n + +// ArrayBuffer から +var buffer = new ArrayBuffer(32); +var z = new BigUint64Array(buffer, 0, 4); + +// 反復可能オブジェクトから +var iterable = function*(){ yield* [1n, 2n, 3n]; }(); +var biguint64 = new BigUint64Array(iterable); +// BigUint64Array[1n, 2n, 3n] +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- {{jsxref("BigInt64Array")}} +- {{jsxref("DataView")}} diff --git a/files/ja/web/javascript/reference/global_objects/dataview/getbigint64/index.md b/files/ja/web/javascript/reference/global_objects/dataview/getbigint64/index.md new file mode 100644 index 0000000000..9570e8227f --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/dataview/getbigint64/index.md @@ -0,0 +1,71 @@ +--- +title: DataView.prototype.getBigInt64() +slug: Web/JavaScript/Reference/Global_Objects/DataView/getBigInt64 +tags: + - BigInt + - DataView + - JavaScript + - Method + - Prototype + - Reference + - TypedArrays + - getBigInt64() +translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getBigInt64 +browser-compat: javascript.builtins.DataView.getBigInt64 +--- +{{JSRef}} + +**`getBigInt64()`** メソッドは、符号つき 64 ビット整数 (long long) を {{jsxref("DataView")}} の先頭からのバイト単位のオフセット位置から取得します。 + +{{EmbedInteractiveExample("pages/js/dataview-getbigint64.html")}} + +## 構文 + +```js +getBigInt64(byteOffset) +getBigInt64(byteOffset, littleEndian) +``` + +### 引数 + +- byteOffset + - : データを読み取るビューの先頭からのバイト単位のオフセットです。 +- littleEndian + - : {{optional_inline}} 64 ビット整数を[リトルエンディアンまたはビッグエンディアン](/ja/docs/Glossary/Endianness)のどちらの形式で格納されているかを示します。 `false` または `undefined` の場合、ビッグエンディアンの値が読み取られます。 + +### 返値 + +{{jsxref("BigInt")}} です。 + +### 発生するエラー + +- {{jsxref("RangeError")}} + - : `byteOffset` がビューの末尾を超えて読み取るような値に設定されたときに発生します。 + +## 解説 + +アライメントの制約はありません。複数バイトの値はどのオフセットからでも読み取ることができます。 + +## 例 + +### `getBigInt64` メソッドの使用 + +```js +var buffer = new ArrayBuffer(8); +var dataview = new DataView(buffer); +dataview.getBigInt64(0); // 0n +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("DataView")}} +- {{jsxref("ArrayBuffer")}} +- {{jsxref("BigInt")}} diff --git a/files/ja/web/javascript/reference/global_objects/dataview/getbiguint64/index.md b/files/ja/web/javascript/reference/global_objects/dataview/getbiguint64/index.md new file mode 100644 index 0000000000..8547f34125 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/dataview/getbiguint64/index.md @@ -0,0 +1,71 @@ +--- +title: DataView.prototype.getBigUint64() +slug: Web/JavaScript/Reference/Global_Objects/DataView/getBigUint64 +tags: + - BigInt + - DataView + - JavaScript + - Method + - Prototype + - Reference + - TypedArrays + - getBigUint64 +translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getBigUint64 +browser-compat: javascript.builtins.DataView.getBigUint64 +--- +{{JSRef}} + +**`getBigInt64()`** メソッドは、符号なし 64 ビット整数 (unsigned long long) を {{jsxref("DataView")}} の先頭からのバイト単位のオフセット位置から取得します。 + +{{EmbedInteractiveExample("pages/js/dataview-getbiguint64.html")}} + +## 構文 + +```js +getBigUint64(byteOffset) +getBigUint64(byteOffset, littleEndian) +``` + +### 引数 + +- byteOffset + - : データを読み取るビューの先頭からのバイト単位のオフセットです。 +- littleEndian + - : {{optional_inline}} 64 ビット整数を[リトルエンディアンまたはビッグエンディアン](/ja/docs/Glossary/Endianness)のどちらの形式で格納されているかを示します。 `false` または `undefined` の場合、ビッグエンディアンの値が読み取られます。 + +### 返値 + +{{jsxref("BigInt")}} です。 + +### 発生するエラー + +- {{jsxref("RangeError")}} + - : `byteOffset` がビューの末尾を超えて読み取るような値に設定されたときに発生します。 + +## 解説 + +アライメントの制約はありません。複数バイトの値はどのオフセットからでも読み取ることができます。 + +## 例 + +### `getBigUint64` メソッドの使用 + +```js +var buffer = new ArrayBuffer(8); +var dataview = new DataView(buffer); +dataview.getBigUint64(0); // 0n +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("DataView")}} +- {{jsxref("ArrayBuffer")}} +- {{jsxref("BigInt")}} diff --git a/files/ja/web/javascript/reference/global_objects/dataview/index.html b/files/ja/web/javascript/reference/global_objects/dataview/index.html deleted file mode 100644 index c53ce5dfdd..0000000000 --- a/files/ja/web/javascript/reference/global_objects/dataview/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: DataView -slug: Web/JavaScript/Reference/Global_Objects/DataView -tags: - - Class - - DataView - - JavaScript - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/DataView ---- -<div>{{JSRef}}</div> - -<p><span class="seoSummary"><strong><code>DataView</code></strong> ビューは {{jsxref("ArrayBuffer")}} の多様な数値型を、プラットフォームの{{glossary("Endianness", "エンディアン")}}に関係なく読み書きするための低水準インターフェイスを提供します。</span></p> - -<h2 id="Description" name="Description">説明</h2> - -<h3 id="Endianness" name="Endianness">エンディアン</h3> - -<p>多バイトの数値形式は、マシンアーキテクチャによってメモリー内での表現が異なります。これは {{Glossary("Endianness", "エンディアン")}}で説明しています。DataView のアクセサーは、プラットフォームアーキテクチャのエンディアンに関係なくデータにアクセスする方法を明確に制御する手段を提供します。</p> - -<pre class="brush: js notranslate">var littleEndian = (function() { - var buffer = new ArrayBuffer(2); - new DataView(buffer).setInt16(0, 256, true /* リトルエンディアン */); - // Int16Array はプラットフォームのエンディアンを使用する - return new Int16Array(buffer)[0] === 256; -})(); -console.log(littleEndian); // true または false -</pre> - -<h3 id="64-bit_Integer_Values" name="64-bit_Integer_Values">64 ビット整数値</h3> - -<p>JavaScript は現在のところ、64 ビット整数値に標準で対応していないので、<code>DataView</code> はネイティブの 64 ビット操作を提供していません。回避策として、独自で <code>getUint64()</code> 関数を実装して {{jsxref("Number.MAX_SAFE_INTEGER")}} までの制度の値を受け取れるようにします。</p> - -<pre class="brush: js notranslate">function getUint64(dataview, byteOffset, littleEndian) { - // 64 ビット数を 2 つの 32 ビット (4 バイト) の部分に分割する - const left = dataview.getUint32(byteOffset, littleEndian); - const right = dataview.getUint32(byteOffset+4, littleEndian); - - // 2 つの 32 ビットの値を結合する - const combined = littleEndian? left + 2**32*right : 2**32*left + right; - - if (!Number.isSafeInteger(combined)) - console.warn(combined, 'exceeds MAX_SAFE_INTEGER. Precision may be lost'); - - return combined; -} -</pre> - -<p>他にも、完全な 64 ビットの幅が必要な場合、{{jsxref("BigInt")}} を作成することもできます。さらに言えば、ネイティブの BigInt がユーザーランドライブラリの同等品よりもはるかに速いのですが、JavaScript では BigInt は可変長であるという性質上、常に 32 ビット整数よりもはるかに遅くなります。</p> - -<pre class="brush: js notranslate">const BigInt = window.BigInt, bigThirtyTwo = BigInt(32), bigZero = BigInt(0); -function getUint64BigInt(dataview, byteOffset, littleEndian) { - // 64 ビット数を 2 つの 32 ビット (4 バイト) の部分に分割する - const left = BigInt(dataview.getUint32(byteOffset|0, !!littleEndian)>>>0); - const right = BigInt(dataview.getUint32((byteOffset|0) + 4|0, !!littleEndian)>>>0); - - // 2 つの 32 ビットの値を結合して返す - return littleEndian ? (right<<bigThirtyTwo)|left : (left<<bigThirtyTwo)|right; -}</pre> - -<h2 id="Constructor" name="Constructor">コンストラクタ</h2> - -<dl> - <dt><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/DataView/DataView"><code>DataView()</code></a></dt> - <dd>新しい <code>DataView</code> オブジェクトを作成します。</dd> -</dl> - -<h2 id="Instance_properties" name="Instance_properties">インスタンスプロパティ</h2> - -<dl> - <dt>{{jsxref("DataView.prototype.buffer")}}</dt> - <dd>このビューによって参照される {{jsxref("ArrayBuffer")}} 。構築時に設定されるため、<strong>読取専用</strong>です。</dd> - <dt>{{jsxref("DataView.prototype.byteLength")}}</dt> - <dd>{{jsxref("ArrayBuffer")}} の開始位置からこのビューの(バイト単位の)長さ。構築時に設定されるため、<strong>読取専用</strong>です。</dd> - <dt>{{jsxref("DataView.prototype.byteOffset")}}</dt> - <dd>{{jsxref("ArrayBuffer")}} の開始位置からこのビューの(バイト単位の)オフセット。構築時に設定されるため、<strong>読取専用</strong>です。</dd> -</dl> - -<h2 id="Instance_methods" name="Instance_methods">インスタンスメソッド</h2> - -<dl> - <dt>{{jsxref("DataView.prototype.getInt8()")}}</dt> - <dd>ビューの開始位置から指定されたバイト単位のオフセットで符号付き 8 ビット整数値(byte)を取得します。</dd> - <dt>{{jsxref("DataView.prototype.getUint8()")}}</dt> - <dd>ビューの開始位置から指定されたバイト単位のオフセットで符号無し 8 ビット整数値(unsigned byte) を取得します。</dd> - <dt>{{jsxref("DataView.prototype.getInt16()")}}</dt> - <dd>ビューの開始位置から指定されたバイト単位のオフセットで符号付き 16 ビット整数値(short)を取得します。</dd> - <dt>{{jsxref("DataView.prototype.getUint16()")}}</dt> - <dd>ビューの開始位置からの指定されたバイト単位のオフセットで符号無し 16 ビット整数値(unsigned short)を取得します。</dd> - <dt>{{jsxref("DataView.prototype.getInt32()")}}</dt> - <dd>ビューの開始位置からの指定されたバイト単位のオフセットで符号あり 32 ビット整数値(long)を取得します。</dd> - <dt>{{jsxref("DataView.prototype.getUint32()")}}</dt> - <dd>ビューの開始位置からの指定されたバイト単位のオフセットで符号無し 32 ビット整数値(unsigned long)を取得します。</dd> - <dt>{{jsxref("DataView.prototype.getFloat32()")}}</dt> - <dd>ビューの開始位置からの指定されたバイト単位のオフセットで符号あり 32 ビット浮動小数点数(float)を取得します。</dd> - <dt>{{jsxref("DataView.prototype.getFloat64()")}}</dt> - <dd>ビューの開始位置からの指定されたバイト単位のオフセットで符号あり 64 ビット浮動小数点数(double)を取得します。</dd> - <dt>{{jsxref("DataView.prototype.getBigInt64()")}}</dt> - <dd>ビューの開始位置からの指定されたバイト単位のオフセットで符号あり 64 ビット整数値(long long)を取得します。</dd> - <dt>{{jsxref("DataView.prototype.getBigUint64()")}}</dt> - <dd>ビューの開始位置からの指定されたバイト単位のオフセットで符号なし 64 ビット整数値(unsigned long long)を取得します。</dd> - <dt>{{jsxref("DataView.prototype.setInt8()")}}</dt> - <dd>ビューの開始位置からの指定されたバイト単位のオフセットで符号あり 8 ビット整数値(byte)を格納します。</dd> - <dt>{{jsxref("DataView.prototype.setUint8()")}}</dt> - <dd>ビューの開始位置からの指定されたバイト単位のオフセットで符号なし 8 ビット整数値(unsigned byte)を格納します。</dd> - <dt>{{jsxref("DataView.prototype.setInt16()")}}</dt> - <dd>ビューの開始位置からの指定されたバイト単位のオフセットで符号あり 16 ビット整数値(short)を格納します。</dd> - <dt>{{jsxref("DataView.prototype.setUint16()")}}</dt> - <dd>ビューの開始位置からの指定されたバイト単位のオフセットで符号無し 16 ビット整数値(unsigned short)を格納します。</dd> - <dt>{{jsxref("DataView.prototype.setInt32()")}}</dt> - <dd>ビューの開始位置からの指定されたバイト単位のオフセットで符号あり 32 ビット整数値(long)を格納します。</dd> - <dt>{{jsxref("DataView.prototype.setUint32()")}}</dt> - <dd>ビューの開始位置からの指定されたバイト単位のオフセットで符号無し 32 ビット整数値(unsigned long)を格納します。</dd> - <dt>{{jsxref("DataView.prototype.setFloat32()")}}</dt> - <dd>ビューの開始位置からの指定されたバイト単位のオフセットで符号あり 32 ビット浮動小数点数(float)を格納します。</dd> - <dt>{{jsxref("DataView.prototype.setFloat64()")}}</dt> - <dd>ビューの開始位置からの指定されたバイト単位のオフセットで符号あり 64 ビット浮動小数点数(double)を格納します。</dd> - <dt>{{jsxref("DataView.prototype.setBigInt64()")}}</dt> - <dd>ビューの開始位置からの指定されたバイト単位のオフセットで符号あり 64 ビット整数値(long long)を格納します。</dd> - <dt>{{jsxref("DataView.prototype.setBigUint64()")}}</dt> - <dd>ビューの開始位置からの指定されたバイト単位のオフセットで符号なし 64 ビット整数値(unsigned long long)を格納します。</dd> -</dl> - -<h2 id="Example" name="Example">例</h2> - -<h3 id="Using_DataView" name="Using_DataView">DataView を使用する</h3> - -<pre class="brush: js notranslate">var buffer = new ArrayBuffer(16); -var view = new DataView(buffer, 0); - -view.setInt16(1, 42); -view.getInt16(1); // 42 -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-dataview-objects', 'DataView')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.DataView")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a class="link-https" href="https://github.com/jDataView/jDataView">jDataView</a>: <code>DataView</code> API をすべてのブラウザーや Node.js に展開するポリフィルの JavaScript ライブラリー</li> - <li>{{jsxref("ArrayBuffer")}}</li> - <li>{{jsxref("SharedArrayBuffer")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/dataview/index.md b/files/ja/web/javascript/reference/global_objects/dataview/index.md new file mode 100644 index 0000000000..3656042991 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/dataview/index.md @@ -0,0 +1,149 @@ +--- +title: DataView +slug: Web/JavaScript/Reference/Global_Objects/DataView +tags: + - Class + - DataView + - JavaScript + - TypedArrays + - Polyfill +browser-compat: javascript.builtins.DataView +translation_of: Web/JavaScript/Reference/Global_Objects/DataView +--- +{{JSRef}} + +**`DataView`** ビューは {{jsxref("ArrayBuffer")}} の多様な数値型を、プラットフォームの[エンディアン](/ja/docs/Glossary/Endianness)に関係なく読み書きするための低水準インターフェイスを提供します。 + +## 解説 + +### エンディアン + +多バイトの数値形式は、マシンアーキテクチャによってメモリー内での表現が異なります。説明は[エンディアン](/ja/docs/Glossary/Endianness)を参照してください。 `DataView` のアクセサーは、プラットフォームアーキテクチャのエンディアンに関係なくデータにアクセスする方法を明確に制御する手段を提供します。 + +```js +var littleEndian = (function() { + var buffer = new ArrayBuffer(2); + new DataView(buffer).setInt16(0, 256, true /* リトルエンディアン */); + // Int16Array はプラットフォームのエンディアンを使用する + return new Int16Array(buffer)[0] === 256; +})(); +console.log(littleEndian); // true または false +``` + +### 64 ビット整数値 + +一部のブラウザーは {{jsxref("DataView.prototype.setBigInt64()")}} および {{jsxref("DataView.prototype.setBigUint64()")}} に対応していません。そのため、各ブラウザーで動作するコードで 64 ビット操作ができるようにするには、独自の `getUint64()` 関数を実装し、 {{jsxref("Number.MAX_SAFE_INTEGER")}} までの制度の値を受け取れるようにします。これで十分な場合もあるでしょう。 + +```js +function getUint64(dataview, byteOffset, littleEndian) { + // 64 ビット数を 2 つの 32 ビット (4 バイト) の部分に分割する + const left = dataview.getUint32(byteOffset, littleEndian); + const right = dataview.getUint32(byteOffset+4, littleEndian); + + // 2 つの 32 ビットの値を結合する + const combined = littleEndian? left + 2**32*right : 2**32*left + right; + + if (!Number.isSafeInteger(combined)) + console.warn(combined, 'exceeds MAX_SAFE_INTEGER. Precision may be lost'); + + return combined; +} +``` + +他にも、完全な 64 ビットの幅が必要な場合、{{jsxref("BigInt")}} を作成することもできます。さらに言えば、ネイティブの BigInt はユーザーランドライブラリーの同等品よりもはるかに速いのですが、JavaScript では BigInt は可変長であるという性質上、常に 32 ビット整数よりもはるかに遅くなります。 + +```js +const BigInt = window.BigInt, bigThirtyTwo = BigInt(32), bigZero = BigInt(0); +function getUint64BigInt(dataview, byteOffset, littleEndian) { + // 64 ビット数を 2 つの 32 ビット (4 バイト) の部分に分割する + const left = BigInt(dataview.getUint32(byteOffset|0, !!littleEndian)>>>0); + const right = BigInt(dataview.getUint32((byteOffset|0) + 4|0, !!littleEndian)>>>0); + + // 2 つの 32 ビットの値を結合して返す + return littleEndian ? (right<<bigThirtyTwo)|left : (left<<bigThirtyTwo)|right; +} +``` + +## コンストラクター + +- [`DataView()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/DataView) + - : 新しい `DataView` オブジェクトを作成します。 + +## インスタンスプロパティ + +- {{jsxref("DataView.prototype.buffer")}} + - : このビューによって参照される {{jsxref("ArrayBuffer")}}。構築時に設定されるため、**読み取り専用**です。 +- {{jsxref("DataView.prototype.byteLength")}} + - : {{jsxref("ArrayBuffer")}} の開始位置からこのビューの (バイト単位の) 長さ。構築時に設定されるため、**読み取り専用**です。 +- {{jsxref("DataView.prototype.byteOffset")}} + - : {{jsxref("ArrayBuffer")}} の開始位置からこのビューの (バイト単位の) オフセット。構築時に設定されるため、**読み取り専用**です。 + +## インスタンスメソッド + +- {{jsxref("DataView.prototype.getInt8()")}} + - : ビューの開始位置から指定されたバイト単位のオフセット位置にある符号付き 8 ビット整数値 (byte) を取得します。 +- {{jsxref("DataView.prototype.getUint8()")}} + - : ビューの開始位置から指定されたバイト単位のオフセット位置にある符号無し 8 ビット整数値 (unsigned byte) を取得します。 +- {{jsxref("DataView.prototype.getInt16()")}} + - : ビューの開始位置から指定されたバイト単位のオフセット位置にある符号付き 16 ビット整数値 (short) を取得します。 +- {{jsxref("DataView.prototype.getUint16()")}} + - : ビューの開始位置からの指定されたバイト単位のオフセット位置にある符号無し 16 ビット整数値 (unsigned short) を取得します。 +- {{jsxref("DataView.prototype.getInt32()")}} + - : ビューの開始位置からの指定されたバイト単位のオフセット位置にある符号あり 32 ビット整数値 (long) を取得します。 +- {{jsxref("DataView.prototype.getUint32()")}} + - : ビューの開始位置からの指定されたバイト単位のオフセット位置にある符号無し 32 ビット整数値 (unsigned long) を取得します。 +- {{jsxref("DataView.prototype.getFloat32()")}} + - : ビューの開始位置からの指定されたバイト単位のオフセット位置にある符号あり 32 ビット浮動小数点数 (float) を取得します。 +- {{jsxref("DataView.prototype.getFloat64()")}} + - : ビューの開始位置からの指定されたバイト単位のオフセット位置にある符号あり 64 ビット浮動小数点数 (double) を取得します。 +- {{jsxref("DataView.prototype.getBigInt64()")}} + - : ビューの開始位置からの指定されたバイト単位のオフセット位置にある符号あり 64 ビット整数値(long long) を取得します。 +- {{jsxref("DataView.prototype.getBigUint64()")}} + - : ビューの開始位置からの指定されたバイト単位のオフセット位置にある符号なし 64 ビット整数値 (unsigned long long) を取得します。 +- {{jsxref("DataView.prototype.setInt8()")}} + - : ビューの開始位置からの指定されたバイト単位のオフセット位置にある符号あり 8 ビット整数値 (byte) を格納します。 +- {{jsxref("DataView.prototype.setUint8()")}} + - : ビューの開始位置からの指定されたバイト単位のオフセット位置にある符号なし 8 ビット整数値 (unsigned byte) を格納します。 +- {{jsxref("DataView.prototype.setInt16()")}} + - : ビューの開始位置からの指定されたバイト単位のオフセット位置にある符号あり 16 ビット整数値 (short) を格納します。 +- {{jsxref("DataView.prototype.setUint16()")}} + - : ビューの開始位置からの指定されたバイト単位のオフセット位置にある符号無し 16 ビット整数値 (unsigned short) を格納します。 +- {{jsxref("DataView.prototype.setInt32()")}} + - : ビューの開始位置からの指定されたバイト単位のオフセット位置にある符号あり 32 ビット整数値 (long) を格納します。 +- {{jsxref("DataView.prototype.setUint32()")}} + - : ビューの開始位置からの指定されたバイト単位のオフセット位置にある符号無し 32 ビット整数値 (unsigned long) を格納します。 +- {{jsxref("DataView.prototype.setFloat32()")}} + - : ビューの開始位置からの指定されたバイト単位のオフセット位置にある符号あり 32 ビット浮動小数点数 (float) を格納します。 +- {{jsxref("DataView.prototype.setFloat64()")}} + - : ビューの開始位置からの指定されたバイト単位のオフセット位置にある符号あり 64 ビット浮動小数点数 (double) を格納します。 +- {{jsxref("DataView.prototype.setBigInt64()")}} + - : ビューの開始位置からの指定されたバイト単位のオフセット位置にある符号あり 64 ビット整数値 (long long) を格納します。 +- {{jsxref("DataView.prototype.setBigUint64()")}} + - : ビューの開始位置からの指定されたバイト単位のオフセット位置にある符号なし 64 ビット整数値 (unsigned long long) を格納します。 + +## 例 + +### DataView を使用する + +```js +var buffer = new ArrayBuffer(16); +var view = new DataView(buffer, 0); + +view.setInt16(1, 42); +view.getInt16(1); // 42 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- `DataView` のポリフィルは [`core-js`](https://github.com/zloirock/core-js#ecmascript-typed-arrays) で利用できます +- [jDataView](https://github.com/jDataView/jDataView): `DataView` API をすべてのブラウザーや Node.js に展開するポリフィルの JavaScript ライブラリー +- {{jsxref("ArrayBuffer")}} +- {{jsxref("SharedArrayBuffer")}} diff --git a/files/ja/web/javascript/reference/global_objects/dataview/setbigint64/index.md b/files/ja/web/javascript/reference/global_objects/dataview/setbigint64/index.md new file mode 100644 index 0000000000..41c0c3ee9e --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/dataview/setbigint64/index.md @@ -0,0 +1,70 @@ +--- +title: DataView.prototype.setBigInt64() +slug: Web/JavaScript/Reference/Global_Objects/DataView/setBigInt64 +tags: + - BigInt + - DataView + - JavaScript + - Method + - Prototype + - Reference + - TypedArrays + - setBigInt64 +translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setBigInt64 +browser-compat: javascript.builtins.DataView.setBigInt64 +--- +{{JSRef}} + +**`setBigInt64()`** メソッドは、符号つき 64 ビット整数 (long long) を {{jsxref("DataView")}} の先頭からのバイト単位の指定されたオフセット位置に格納します。 + +{{EmbedInteractiveExample("pages/js/dataview-setbigint64.html")}} + +## 構文 + +```js +setBigInt64(byteOffset, value) +setBigInt64(byteOffset, value, littleEndian) +``` + +### 引数 + +- byteOffset + - : データを格納するビューの先頭からのバイト単位のオフセットです。 +- value + - : {{jsxref("BigInt")}} として設定する値です。符号つき 64 ビット整数に符合する最も大きな値は、 `2n ** (64n -1n) - 1n` (`9223372036854775807n`) です。これを上回ると、負の数 (`-9223372036854775808n`) になります。 +- littleEndian + - : {{optional_inline}} 64 ビット整数を[リトルエンディアンまたはビッグエンディアン](/ja/docs/Glossary/Endianness)のどちらの形式で格納するかを示します。 `false` または `undefined` の場合、ビッグエンディアンの値が書き込まれます。 + +### 返値 + +{{jsxref("undefined")}} です。 + +### 発生するエラー + +- {{jsxref("RangeError")}} + - : `byteOffset` がビューの末尾を超えて格納するような値に設定されたときに発生します。 + +## 例 + +### `setBigInt64` メソッドの使用 + +```js +var buffer = new ArrayBuffer(8); +var dataview = new DataView(buffer); +dataview.setBigInt64(0, 3n); +dataview.getBigInt64(0); // 3n +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("DataView")}} +- {{jsxref("ArrayBuffer")}} +- {{jsxref("BigInt")}} diff --git a/files/ja/web/javascript/reference/global_objects/dataview/setbiguint64/index.md b/files/ja/web/javascript/reference/global_objects/dataview/setbiguint64/index.md new file mode 100644 index 0000000000..af54cbe905 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/dataview/setbiguint64/index.md @@ -0,0 +1,70 @@ +--- +title: DataView.prototype.setBigUint64() +slug: Web/JavaScript/Reference/Global_Objects/DataView/setBigUint64 +tags: + - BigInt + - DataView + - JavaScript + - Method + - Prototype + - Reference + - TypedArrays + - setBigUint64 +translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setBigUint64 +browser-compat: javascript.builtins.DataView.setBigUint64 +--- +{{JSRef}} + +**`setBigUint64()`** メソッドは、符号なし 64 ビット整数 (unsigned long long) を {{jsxref("DataView")}} の先頭からのバイト単位の指定されたオフセット位置に格納します。 + +{{EmbedInteractiveExample("pages/js/dataview-setbiguint64.html")}} + +## 構文 + +```js +setBigUint64(byteOffset, value) +setBigUint64(byteOffset, value, littleEndian) +``` + +### 引数 + +- byteOffset + - : データを格納するビューの先頭からのバイト単位のオフセットです。 +- value + - : {{jsxref("BigInt")}} として設定する値です。符号なし 64 ビット整数に符合する最も大きな値は、 `2n ** 64n - 1n` (`18446744073709551615n`) です。これを上回ると、ゼロ (`0n`) になります。 +- littleEndian + - : {{optional_inline}} 64 ビット整数を[リトルエンディアンまたはビッグエンディアン](/ja/docs/Glossary/Endianness)のどちらの形式で格納するかを示します。 `false` または `undefined` の場合、ビッグエンディアンの値が書き込まれます。 + +### 返値 + +{{jsxref("undefined")}} です。 + +### 発生するエラー + +- {{jsxref("RangeError")}} + - : `byteOffset` がビューの末尾を超えて格納するような値に設定されたときに発生します。 + +## 例 + +### `setBigUint64` メソッドの使用 + +```js +var buffer = new ArrayBuffer(8); +var dataview = new DataView(buffer); +dataview.setBigUint64(0, 3n); +dataview.getBigUint64(0); // 3n +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("DataView")}} +- {{jsxref("ArrayBuffer")}} +- {{jsxref("BigInt")}} diff --git a/files/ja/web/javascript/reference/global_objects/date/tolocaledatestring/index.html b/files/ja/web/javascript/reference/global_objects/date/tolocaledatestring/index.html index 9ade139ff1..8c5470ef50 100644 --- a/files/ja/web/javascript/reference/global_objects/date/tolocaledatestring/index.html +++ b/files/ja/web/javascript/reference/global_objects/date/tolocaledatestring/index.html @@ -27,7 +27,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString <p><code>locales</code> 引数と <code>options</code> 引数をサポートしているブラウザーは、{{anch("Browser compatibility", "ブラウザーの実装状況")}} セクションを確認してください。機能が使用できるかどうかは、{{anch("Checking_for_support_for_locales_and_options_arguments", "locales 引数と options 引数がサポートされているか確認する")}}で確認してください。</p> -<p>See the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/DateTimeFormat"><code>Intl.DateTimeFormat()</code> constructor</a> for details on these parameters and how to use them.</p> +<p>See the <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/DateTimeFormat"><code>Intl.DateTimeFormat()</code> constructor</a> for details on these parameters and how to use them.</p> <p>日時のそれぞれの部分ののプロパティにおける既定値は、{{jsxref("undefined")}}です。ただし、<code>weekday</code>、 <code>year</code>、<code>month</code>、<code>day</code> プロパティがすべて {{jsxref("undefined")}} のときは、<code>year</code>、<code>month</code>、<code>day</code> は <code>"numeric"</code> とみなされます。</p> diff --git a/files/ja/web/javascript/reference/global_objects/error/message/index.html b/files/ja/web/javascript/reference/global_objects/error/message/index.html index 0479f2c85a..c9ae29819b 100644 --- a/files/ja/web/javascript/reference/global_objects/error/message/index.html +++ b/files/ja/web/javascript/reference/global_objects/error/message/index.html @@ -14,7 +14,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Error/message <h2 id="Description" name="Description">解説</h2> -<p>このプロパティは、利用可能または設定されている場合、エラーの簡潔な説明を含みます。<a href="/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> は、例外の <code>message</code> プロパティを広範囲に渡って使用します。{{jsxref("Error.prototype.name", "name")}} プロパティは <code>message</code> プロパティとの組み合わせで、Error の文字列表現を生成するために {{jsxref("Error.prototype.toString()")}} メソッドにより使用されます。</p> +<p>このプロパティは、利用可能または設定されている場合、エラーの簡潔な説明を含みます。<a href="/ja/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> は、例外の <code>message</code> プロパティを広範囲に渡って使用します。{{jsxref("Error.prototype.name", "name")}} プロパティは <code>message</code> プロパティとの組み合わせで、Error の文字列表現を生成するために {{jsxref("Error.prototype.toString()")}} メソッドにより使用されます。</p> <p>既定で <code>message</code> プロパティは空文字列ですが、この振る舞いは、 {{jsxref("Error/Error", "Error")}} コンストラクターの第一引数としてメッセージを指定することにより、インスタンスを上書きできます。</p> diff --git a/files/ja/web/javascript/reference/global_objects/error/stack/index.html b/files/ja/web/javascript/reference/global_objects/error/stack/index.html index 3d7e4c0fcb..193e7bbde0 100644 --- a/files/ja/web/javascript/reference/global_objects/error/stack/index.html +++ b/files/ja/web/javascript/reference/global_objects/error/stack/index.html @@ -101,7 +101,7 @@ try { // @file:///C:/example.html:7:6 </pre> -<p><code>//# sourceURL</code> ディレクティブを使用して eval ソースに名前を付けることもできます。 <a href="/docs/Tools/Debugger">Debugger</a> ドキュメント内の <a href="/docs/Tools/Debugger/How_to/Debug_eval_sources">eval ソースのデバッグ</a> と <a href="http://fitzgeraldnick.com/weblog/59/" title="Naming `eval` Scripts with the `//# sourceURL` Directive">ブログ記事</a> も参照してください。</p> +<p><code>//# sourceURL</code> ディレクティブを使用して eval ソースに名前を付けることもできます。 <a href="/ja/docs/Tools/Debugger">Debugger</a> ドキュメント内の <a href="/ja/docs/Tools/Debugger/How_to/Debug_eval_sources">eval ソースのデバッグ</a> と <a href="http://fitzgeraldnick.com/weblog/59/" title="Naming `eval` Scripts with the `//# sourceURL` Directive">ブログ記事</a> も参照してください。</p> <h2 id="Specifications" name="Specifications">仕様書</h2> diff --git a/files/ja/web/javascript/reference/global_objects/error/tosource/index.html b/files/ja/web/javascript/reference/global_objects/error/tosource/index.html index d556359110..7c29c650fa 100644 --- a/files/ja/web/javascript/reference/global_objects/error/tosource/index.html +++ b/files/ja/web/javascript/reference/global_objects/error/tosource/index.html @@ -24,7 +24,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Error/toSource <h3 id="Using_toSource">Using toSource</h3> -<p>{{jsxref("Error")}} インスタンス (<em><a href="/docs/Web/JavaScript/Reference/Global_Objects/Error#Error_types">NativeErrors</a></em> を含む) の <code>toSource</code> メソッドを呼び出すと、エラーのソースコードを含む文字列を返します。この文字列を評価して (ほぼ) 等しいオブジェクトを生成できます。通常、この文字列には、{{jsxref("Error")}} コンストラクターの構造に続けて下記のようにソースが含まれます。</p> +<p>{{jsxref("Error")}} インスタンス (<em><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Error#Error_types">NativeErrors</a></em> を含む) の <code>toSource</code> メソッドを呼び出すと、エラーのソースコードを含む文字列を返します。この文字列を評価して (ほぼ) 等しいオブジェクトを生成できます。通常、この文字列には、{{jsxref("Error")}} コンストラクターの構造に続けて下記のようにソースが含まれます。</p> <pre class="brush: js notranslate">(new<em>name</em>(<em>message</em> ,<em>fileName</em>,<em>lineNumber</em>)) </pre> diff --git a/files/ja/web/javascript/reference/global_objects/eval/index.html b/files/ja/web/javascript/reference/global_objects/eval/index.html deleted file mode 100644 index af181f8c6f..0000000000 --- a/files/ja/web/javascript/reference/global_objects/eval/index.html +++ /dev/null @@ -1,305 +0,0 @@ ---- -title: eval() -slug: Web/JavaScript/Reference/Global_Objects/eval -tags: - - Evaluating JavaScript - - JavaScript - - Method - - Reference - - Warning - - eval - - メソッド - - 警告 -translation_of: Web/JavaScript/Reference/Global_Objects/eval ---- -<div>{{jsSidebar("Objects")}}</div> - -<p><code><strong>eval()</strong></code> 関数は、文字列として表現された JavaScript コードを評価します。</p> - -<div class="blockIndicator warning"> -<p><strong>警告:</strong> 文字列から JavaScript を実行することは、非常に大きなセキュリティリスクを伴います。<code>eval()</code> を使用すると、悪意のある者が任意のコードを実行するのはあまりにも簡単です。下記の <a href="#Never_use_eval!">eval() を使わないでください!</a>を参照してください。</p> -</div> - -<div>{{EmbedInteractiveExample("pages/js/globalprops-eval.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><code>eval(<em>string</em>)</code></pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code>string</code></dt> - <dd>JavaScript の式、文、または一連の文を表す文字列です。式には、既存オブジェクトの変数およびプロパティを含められます。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>与えられたコードの評価結果値を返します。評価結果が空の場合は、{{jsxref("undefined")}} を返します。</p> - -<h2 id="Description" name="Description">解説</h2> - -<p><code>eval()</code> はグローバルオブジェクトの関数プロパティです。</p> - -<p><code>eval()</code> 関数の引数は文字列です。その文字列が式に相当する場合、<code>eval()</code> は引数を式として評価します。引数が 1 つ以上の JavaScript 文に相当する場合、<code>eval()</code> は引数を文として評価します。算術式を評価する目的で <code>eval()</code> を呼び出してはいけません。JavaScript は算術式を自動的に評価します。</p> - -<p>算術式を文字列として構築した場合、後で <code>eval()</code> を使ってそれを評価することができます。例えば <code>x</code> という変数があるとします。ある変数に "<code>3 * x + 2</code>" といった式の文字列値を代入し、そしてスクリプトの後方で <code>eval()</code> を呼び出すことで、<code>x</code> が関わる式の評価を後回しにできます。</p> - -<p><code>eval()</code> の引数が文字列でない場合、<code>eval()</code> は引数を変更せずに返します。次の例では <code>String</code> コンストラクターが指定されているため、<code>eval()</code> は文字列を評価したものではなく <code>String</code> オブジェクトを返します。</p> - -<pre class="brush:js notranslate">eval(new String('2 + 2')); // "2 + 2" を含む String オブジェクトを返します -eval('2 + 2'); // 4 を返します -</pre> - -<p>この制約は、<code>toString</code> を使用する一般的な方法で回避できます。</p> - -<pre class="brush:js notranslate">var expression = new String('2 + 2'); -eval(expression.toString()); // 4 を返します -</pre> - -<p><code>eval</code> 関数を <code>eval</code> 以外の名前を参照して呼び出すことで<em>間接的に</em>使用した場合、<a href="http://www.ecma-international.org/ecma-262/5.1/#sec-10.4.2">ECMAScript 5</a> 以降ではローカルスコープではなくグローバルスコープで機能します。これは例えると、関数定義によりグローバル関数が作成されるため、評価されたコードはその呼び出されたスコープ内のローカル変数にアクセスできなくなる、ということです。</p> - -<pre class="brush:js notranslate">function test() { - var x = 2, y = 4; - console.log(eval('x + y')); // 直接呼び出し、ローカルスコープを使用し、結果は 6 となる - var geval = eval; // グローバルスコープでの eval呼び出しと同等 - console.log(geval('x + y')); // 間接呼び出し、グローバルスコープを使用し、x は未定義となるため ReferenceError が発生する - (0, eval)('x + y'); // 間接的な呼び出しのもう一つの例 -} -</pre> - -<h2 id="Never_use_eval!" name="Never_use_eval!">eval() を使わないでください!</h2> - -<p><code>eval()</code> は呼び出し元の権限で渡されたコードを実行する危険な関数です。悪意のある第三者に影響を受ける可能性のある文字列で <code>eval()</code> を実行すると、あなたのウェブページ / 拡張機能の権限でユーザーのマシン上で悪意のあるコードを実行してしまう可能性があります。さらに重要なことに、サードパーティのコードは <code>eval()</code> が呼び出されたスコープを見ることができるので、類似の {{jsxref("Global_Objects/Function", "Function")}} では影響を受けない方法でも攻撃を受ける可能性があります。</p> - -<p>また、ここ最近の JavaScript では多くの構造が JS エンジンによって最適化されているため、<code>eval()</code> は他の方法よりも低速でもあります。</p> - -<p>さらに、現代の JavaScript インタープリターは JavaScript を機械語に変換します。これは、変数の名前の概念がすべて消滅することを意味します。したがって、<code>eval()</code> を使用すると、ブラウザーは長い高価な変数名検索を実行して、変数が機械語のどこに存在しているかを把握し、その値を設定します。さらに、<code>eval()</code> が変数の型の変更など、その変数に新しい変数をもたらす可能性もあり、生成されたすべての機械語を再評価して補正させられる可能性があります。</p> - -<p>幸い、<code>eval()</code> にはとても良い代替策があります。{{jsxref("Function", "window.Function()")}} を使用することです。危険な <code>eval()</code> を使用したコードから <code>Function()</code> を使用したコードに変換する方法の例として、以下を参照してください。</p> - -<p><code>eval()</code> を使用した悪いコード:</p> - -<pre class="brush:js notranslate">function looseJsonParse(obj){ - return eval("(" + obj + ")"); -} -console.log(looseJsonParse( - "{a:(4-1), b:function(){}, c:new Date()}" -)) -</pre> - -<p><code>eval()</code> を使用しないより良いコード:</p> - -<pre class="brush:js notranslate">function looseJsonParse(obj){ - return Function('"use strict";return (' + obj + ')')(); -} -console.log(looseJsonParse( - "{a:(4-1), b:function(){}, c:new Date()}" -)) -</pre> - -<p>上記の 2 つのコードスニペットを比較すると、2 つのコードスニペットが同じように動作するように見えるかもしれませんが、よく考えてみてください。<code>eval()</code> の方は非常に遅いのです。評価されたオブジェクトの中の <code>c: new Date()</code> に注目してください。<code>eval()</code> を使用しない関数では、オブジェクトはグローバルスコープで評価されているので、ブラウザーは <code>Date</code> が <code>window.Date</code> を参照しており、<code>Date</code> というローカル変数ではないと考えて安全です。しかし、コードが次のようになっている場合 <code>eval()</code> を使ったコードでは、ブラウザーがこれを仮定することができません。</p> - -<pre class="brush:js notranslate">function Date(n){ - return ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"][n%7 || 0]; -} -function looseJsonParse(obj){ - return eval("(" + obj + ")"); -} -console.log(looseJsonParse( - "{a:(4-1), b:function(){}, c:new Date()}" -)) -</pre> - -<p>したがって、コードの <code>eval()</code> バージョンでは、ブラウザーは高価なルックアップ呼び出しを行い、<code>Date()</code> というローカル変数があるかどうかを確認します。これは <code>Function()</code> と比較して非常に非効率的です。</p> - -<p>関連する状況で、実際に <code>Date()</code> 関数を <code>Function()</code> 内のコードから呼び出すことができるようにしたいとしたらどうでしょうか。簡単な方法を取って、<code>eval()</code> に戻るべきでしょうか。いいえ、決してそうではありません。代わりに、以下の方法を試してみてください。</p> - -<pre class="brush:js notranslate">function Date(n){ - return ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"][n%7 || 0]; -} -function runCodeWithDateFunction(obj){ - return Function('"use strict";return (' + obj + ')')()( - Date - ); -} -console.log(runCodeWithDateFunction( - "function(Date){ return Date(5) }" -)) -</pre> - -<p>上記のコードは、三重に入れ子になった関数があるために非効率的で遅いと思えるかもしれませんが、上記の効率的なメソッドの利点を分析してみましょう。</p> - -<ul> - <li>これにより、<code>runCodeWithDateFunction()</code> に渡される文字列のコードを短縮することができます。</li> - <li>関数呼び出しのオーバーヘッドが最小になり、コードサイズがはるかに小さくなるという利点には十分な価値があります。</li> - <li><code>Function()</code> を使用することで、コードのパフォーマンスを向上させる <code>"use strict";</code> をより簡単に利用できるようになります。</li> - <li>このコードでは <code>eval()</code> を使用しないので、そうでない場合に比べて桁違いに高速になります。</li> -</ul> - -<p>最後に、短縮を検討してみましょう。上記のように <code>Function()</code> を使用すると、<code>runCodeWithDateFunction</code> に渡されたコード文字列をはるかに効率的に縮小することができます。関数の引数名は、下の縮小されたコードで見られるように縮小することができるからです。</p> - -<pre class="brush:js notranslate">console.log(Function('"use strict";return(function(a){return a(5)})')()(function(a){ -return"Monday Tuesday Wednesday Thursday Friday Saturday Sunday".split(" ")[a%7||0]}));</pre> - -<p>一般的な用途においては、さらに安全 (そして高速) な <code>eval()</code> または <code>Function()</code> の代替手段があります。</p> - -<h3 id="Accessing_member_properties" name="Accessing_member_properties">メンバーのプロパティへのアクセス</h3> - -<p>プロパティ名からプロパティ自体への変換を行うのに <code>eval()</code> を使用しないでください。アクセスされるオブジェクトのプロパティがコードが実行されるまでわからない場合の例を考えてみましょう。これは <code>eval()</code> で行うことができます。</p> - -<pre class="brush:js notranslate">var obj = { a: 20, b: 30 }; -var propName = getPropName(); // "a" または "b" が返される - -eval( 'var result = obj.' + propName ); -</pre> - -<p>ただし、ここで <code>eval()</code> は必要ありません。実際、この使い方はお勧めできません。代わりに<a href="/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors">プロパティアクセサー</a>を使用したほうが、より速くて安全です。</p> - -<pre class="brush:js notranslate">var obj = { a: 20, b: 30 }; -var propName = getPropName(); // "a" または "b" が返される -var result = obj[ propName ]; // obj[ "a" ] は obj.a と同じ</pre> - -<p>このメソッドを使用して子孫プロパティにアクセスすることもできます。<code>eval()</code> を使うと以下のようになります。</p> - -<pre class="brush:js notranslate">var obj = {a: {b: {c: 0}}}; -var propPath = getPropPath(); // returns e.g. "a.b.c" - -eval( 'var result = obj.' + propPath ); -</pre> - -<p>ここで <code>eval()</code> を回避するには、プロパティのパスを分割し、様々なプロパティをループすることで行うことができます。</p> - -<pre class="brush:js notranslate">function getDescendantProp(obj, desc) { - var arr = desc.split('.'); - while (arr.length) { - obj = obj[arr.shift()]; - } - return obj; -} - -var obj = {a: {b: {c: 0}}}; -var propPath = getPropPath(); // "a.b.c" などを返す -var result = getDescendantProp(obj, propPath);</pre> - -<p>プロパティの設定も同様に行うことができます。</p> - -<pre class="brush:js notranslate">function setDescendantProp(obj, desc, value) { - var arr = desc.split('.'); - while (arr.length > 1) { - obj = obj[arr.shift()]; - } - return obj[arr[0]] = value; -} - -var obj = {a: {b: {c: 0}}}; -var propPath = getPropPath(); // "a.b.c" などを返す -var result = setDescendantProp(obj, propPath, 1); // obj.a.b.c will now be 1</pre> - -<h3 id="Use_functions_instead_of_evaluating_snippets_of_code" name="Use_functions_instead_of_evaluating_snippets_of_code">コードの断片を評価する場合、代わりに関数を使う</h3> - -<p>JavaScript {{interwiki("wikipedia","第一級関数")}}を備えており、関数を他の API の引数としたり、変数やオブジェクトのプロパティに保存したりすることができます。多くの DOM API はこれを考慮して作られているので、次のように書くことができます (また、書くべきです)。</p> - -<pre class="brush: js notranslate">// setTimeout(" ... ", 1000) を使う代わりに -setTimeout(function() { ... }, 1000); - -// elt.setAttribute("onclick", " ... ") を使う代わりに -elt.addEventListener('click', function() { ... } , false); </pre> - -<p>文字列を連結せずにパラメーター化した関数を作成する方法としては、<a href="/ja/docs/Web/JavaScript/Closures">クロージャ</a>を使う方法も便利です。</p> - -<h3 id="Parsing_JSON_converting_strings_to_JavaScript_objects" name="Parsing_JSON_converting_strings_to_JavaScript_objects">JSON の解析 (文字列を JavaScript オブジェクトに変換)</h3> - -<p><code>eval()</code> の呼び出しに使おうとしている文字列がコードではなくデータ (例えば <code>"[1, 2, 3]"</code> で配列を表す) を含むものであれば、{{Glossary("JSON")}} に切り替えることを検討してください。これは JavaScript のサブセットを使用することで、文字列でデータを表現することができます。<a href="/ja/docs/Downloading_JSON_and_JavaScript_in_extensions">Downloading JSON and JavaScript in extensions</a> の記事も参照してください。</p> - -<p>JSON の構文は JavaScript の構文に比べて制限があり、多くの有効な JavaScript リテラルが JSON としては解釈されないことに注意してください。例えば、最後にカンマを付けることは JSON では許されておらず、オブジェクトリテラル内のプロパティ名 (キー) は引用符で囲む必要があります。後で JSON として解析される文字列を生成するには、JSON シリアライザーを使うようにしてください。</p> - -<h3 id="Pass_data_instead_of_code" name="Pass_data_instead_of_code">コードの代わりにデータを渡す</h3> - -<p>例えば、ウェブページの内容を取得できるよう設計された拡張であれば、JavaScript コードの代わりに <a href="/ja/docs/Web/XPath">XPath</a> を使って取得ルールを定義できます。</p> - -<h3 id="Run_code_with_limited_privileges" name="Run_code_with_limited_privileges">制限された権限でコードを実行する</h3> - -<p>どうしてもコードを実行したければ、制限された権限下での実行を検討しましょう。このアドバイスは、拡張機能や XUL アプリケーション上であれば <a href="/ja/docs/Components.utils.evalInSandbox">Components.utils.evalInSandbox</a> を使用すれば適用できます。</p> - -<h2 id="Examples" name="Examples">使用例</h2> - -<h3 id="Using_eval" name="Using_eval"><code>eval</code> を使用する</h3> - -<p>次のコードでは、<code>eval</code> を含むどちらの文も 42 を返します。最初のコードは文字列 "<code>x + y + 1</code>" を評価します。2 番目のコードは文字列 "<code>42</code>" を評価します。</p> - -<pre class="brush:js notranslate">var x = 2; -var y = 39; -var z = '42'; -eval('x + y + 1'); // 42 が返される -eval(z); // 42 が返される -</pre> - -<h3 id="Using_eval_to_evaluate_a_string_of_JavaScript_statements" name="Using_eval_to_evaluate_a_string_of_JavaScript_statements"><code>eval</code> を使用して JavaScript 文の文字列を評価する</h3> - -<p>次の例は、<code>eval()</code> を使用して文字列 <code>str</code> を評価しています。この文字列は <code>x</code> が 5 の場合に <code>z</code> に 42 の値を代入し、それ以外の場合は <code>z</code> に 0 を代入する JavaScript 文で構成されています。2 番目の文が実行される時、<code>eval</code> によってこれらの文が実行され、そして一連の文を評価して <code>z</code> に代入される値を返します。</p> - -<pre class="brush:js notranslate">var x = 5; -var str = "if (x == 5) {console.log('z is 42'); z = 42;} else z = 0;"; - -console.log('z is ', eval(str));</pre> - -<p>複数の値を定義した場合、最後の値が返されます。</p> - -<pre class="brush:js notranslate">var x = 5; -var str = "if (x == 5) {console.log('z is 42'); z = 42; x = 420; } else z = 0;"; - -console.log('x is ', eval(str)); // z is 42 x is 420 -</pre> - -<h3 id="Last_expression_is_evaluated" name="Last_expression_is_evaluated">評価される最後の式について</h3> - -<p><code>eval()</code> は最後に評価された式の値を返します。</p> - -<pre class="brush:js notranslate">var str = 'if ( a ) { 1 + 1; } else { 1 + 2; }'; -var a = true; -var b = eval(str); // 2 が返される - -console.log('b is : ' + b); - -a = false; -b = eval(str); // 3 が返される - -console.log('b is : ' + b);</pre> - -<h3 id="関数定義の文字列の_eval_には先頭と末尾に_と_が必要">関数定義の文字列の <code>eval</code> には先頭と末尾に "(" と ")" が必要</h3> - -<pre class="brush:js notranslate">var fctStr1 = 'function a() {}' -var fctStr2 = '(function a() {})' -var fct1 = eval(fctStr1) // undefined が返される -var fct2 = eval(fctStr2) // 関数が返される -</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-eval-x', 'eval')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.eval")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Global_Objects/uneval", "uneval()")}}</li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors">プロパティアクセサー</a></li> - <li><a href="/ja/Add-ons/WebExtensions/Content_scripts#Using_eval()_in_content_scripts">WebExtensions: コンテンツスクリプト内で eval() を使う</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/eval/index.md b/files/ja/web/javascript/reference/global_objects/eval/index.md new file mode 100644 index 0000000000..f1022f6841 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/eval/index.md @@ -0,0 +1,311 @@ +--- +title: eval() +slug: Web/JavaScript/Reference/Global_Objects/eval +tags: + - Evaluating JavaScript + - JavaScript + - メソッド + - リファレンス + - 警告 + - eval +browser-compat: javascript.builtins.eval +translation_of: Web/JavaScript/Reference/Global_Objects/eval +--- +{{jsSidebar("Objects")}} + +> **Warning:** 文字列から JavaScript を実行することは、非常に大きなセキュリティリスクを伴います。`eval()` を使用すると、悪意のある者が任意のコードを実行することがあまりにも簡単になります。下記の [eval() を使わないでください!](#eval_を使わないでください!)を参照してください。 + +**`eval()`** 関数は、文字列として表現された JavaScript コードを評価します。 + +{{EmbedInteractiveExample("pages/js/globalprops-eval.html")}} + +## 構文 + +```js +eval(string) +``` + +### 引数 + +- `string` + - : JavaScript の式、文、または一連の文を表す文字列です。式には、既存オブジェクトの変数およびプロパティを含められます。 + +### 返値 + +与えられたコードの評価結果の値を返します。評価結果が空の場合は、{{jsxref("undefined")}} を返します。 + +## 解説 + +`eval()` はグローバルオブジェクトの関数プロパティです。 + +`eval()` 関数の引数は文字列です。その文字列が式に相当する場合、`eval()` は引数を式として評価します。引数が 1 つ以上の JavaScript 文に相当する場合、`eval()` は引数を文として評価します。算術式を評価する目的で `eval()` を呼び出してはいけません。JavaScript は算術式を自動的に評価します。 + +算術式を文字列として構築した場合、後で `eval()` を使ってそれを評価することができます。例えば `x` という変数があるとします。ある変数に "`3 * x + 2`" といった式の文字列値を代入し、そしてスクリプトの後方で `eval()` を呼び出すことで、`x` が関わる式の評価を後回しにすることができます。 + +`eval()` の引数が文字列でない場合、`eval()` は引数を変更せずに返します。次の例では `String` コンストラクターが指定されているため、`eval()` は文字列を評価したものではなく `String` オブジェクトを返します。 + +```js +eval(new String('2 + 2')); // "2 + 2" を含む String オブジェクトを返します +eval('2 + 2'); // 4 を返します +``` + +この制約は、`toString` を使用する一般的な方法で回避できます。 + +```js +var expression = new String('2 + 2'); +eval(expression.toString()); // 4 を返します +``` + +`eval` 関数を `eval` 以外の名前を参照して呼び出すことで*間接的に*使用した場合、[ECMAScript +5](https://www.ecma-international.org/ecma-262/5.1/#sec-10.4.2) 以降ではローカルスコープではなくグローバルスコープで機能します。これは例えると、関数定義によりグローバル関数が作成されるため、評価されたコードはその呼び出されたスコープ内のローカル変数にアクセスできなくなる、ということです。 + +```ja +function test() { + var x = 2, y = 4; + // 直接呼び出し、ローカルスコープを使用 + console.log(eval('x + y')); // 結果は 6 + // eval を返すカンマ演算子を使用した間接呼び出し + console.log((0, eval)('x + y')); // グローバルスコープを使用、x は未定義のため例外が発生 + // eval を変数に保存して返したものを使用した間接呼び出し + var geval = eval; + console.log(geval('x + y')); // グローバルスコープを使用、x は未定義のため例外が発生 +} +``` + +## eval() を使わないでください! + +`eval()` は呼び出し元の権限で渡されたコードを実行する危険な関数です。悪意のある第三者に影響を受ける可能性のある文字列で `eval()` を実行すると、そのウェブページや拡張機能の権限において、ユーザーのマシン上で悪意のあるコードを実行してしまう可能性があります。さらに重要なことに、サードパーティのコードは `eval()` が呼び出されたスコープを見ることができるので、類似の {{jsxref("Global_Objects/Function", "Function")}} では影響を受けない方法でも攻撃を受ける可能性があります。 + +また、ここ最近の JavaScript では多くの構造が JS エンジンによって最適化されているため、`eval()` は他の方法よりも低速でもあります。 + +さらに、現代の JavaScript インタープリターは JavaScript を機械語に変換します。これは、変数の名前の概念がすべて消滅することを意味します。したがって、`eval()` を使用すると、ブラウザーは長い高価な変数名検索を実行して、変数が機械語のどこに存在しているかを把握し、その値を設定します。さらに、`eval()` が変数の型の変更など、その変数に新しい変数をもたらす可能性もあり、生成されたすべての機械語を再評価して補正させられる可能性があります。 + +幸い、`eval()` にはとても良い代替策があります。{{jsxref("Function", "window.Function()")}} を使用することです。危険な `eval()` を使用したコードから `Function()` を使用したコードに変換する方法の例として、以下を参照してください。 + +`eval()` を使用した悪いコード: + +```js +function looseJsonParse(obj){ + return eval("(" + obj + ")"); +} +console.log(looseJsonParse( + "{a:(4-1), b:function(){}, c:new Date()}" +)) +``` + +`eval()` を使用しないより良いコード: + +```js +function looseJsonParse(obj){ + return Function('"use strict";return (' + obj + ')')(); +} +console.log(looseJsonParse( + "{a:(4-1), b:function(){}, c:new Date()}" +)) +``` + +上記の 2 つのコードスニペットを比較すると、2 つのコードスニペットが同じように動作するように見えるかもしれませんが、よく考えてみてください。`eval()` の方は非常に遅いのです。評価されたオブジェクトの中の `c: new Date()` に注目してください。`eval()` を使用しない関数では、オブジェクトはグローバルスコープで評価されているので、ブラウザーは `Date` が `window.Date` を参照しており、`Date` というローカル変数ではないと考えて安全です。しかし、コードが次のようになっている場合 `eval()` を使ったコードでは、ブラウザーがこれを仮定することができません。 + +```js +function Date(n){ + return ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"][n%7 || 0]; +} +function looseJsonParse(obj){ + return eval("(" + obj + ")"); +} +console.log(looseJsonParse( + "{a:(4-1), b:function(){}, c:new Date()}" +)) +``` + +したがって、コードの `eval()` バージョンでは、ブラウザーは高価なルックアップ呼び出しを行い、`Date()` というローカル変数があるかどうかを確認します。これは `Function()` と比較して非常に効率が悪くなります。 + +関連する状況で、実際に `Date()` 関数を `Function()` 内のコードから呼び出すことができるようにしたいとしたらどうでしょうか。簡単な方法を取って、`eval()` に戻るべきでしょうか。いいえ、決してそうではありません。代わりに、以下の方法を試してみてください。 + +```js +function Date(n){ + return ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"][n%7 || 0]; +} +function runCodeWithDateFunction(obj){ + return Function('"use strict";return (' + obj + ')')()( + Date + ); +} +console.log(runCodeWithDateFunction( + "function(Date){ return Date(5) }" +)) +``` + +上記のコードは、三重に入れ子になった関数があるために効率が悪く遅いと思えるかもしれませんが、上記の効率的なメソッドの利点を分析してみましょう。 + +- これにより、`runCodeWithDateFunction()` に渡される文字列のコードを短縮することができます。 +- 関数呼び出しのオーバーヘッドが最小になり、コードサイズがはるかに小さくなるという利点には十分な価値があります。 +- `Function()` を使用することで、コードのパフォーマンスを向上させる `"use strict";` をより簡単に利用できるようになります。 +- このコードでは `eval()` を使用しないので、そうでない場合に比べて桁違いに高速になります。 + +最後に、最小化を検討してみましょう。上記のように `Function()` を使用すると、`runCodeWithDateFunction` に渡されたコード文字列をはるかに効率的に最小化することができます。関数の引数名は、下の最小化されたコードで見られるように最小化することができるからです。 + +```js +console.log(Function('"use strict";return(function(a){return a(5)})')()(function(a){ +return"Monday Tuesday Wednesday Thursday Friday Saturday Sunday".split(" ")[a%7||0]})); +``` + +一般的な用途においては、さらに安全 (そして高速) な `eval()` または `Function()` の代替手段があります。 + +### メンバーのプロパティへのアクセス + +プロパティ名からプロパティ自体への変換を行うために `eval()` を使用しないでください。アクセスされるオブジェクトのプロパティがコードが実行されるまでわからない場合の例を考えてみましょう。これは `eval()` で行うことができます。 + +```js +var obj = { a: 20, b: 30 }; +var propName = getPropName(); // "a" または "b" が返される + +eval( 'var result = obj.' + propName ); +``` + +ただし、ここで `eval()` は必要ありません。実際、この使い方はお勧めできません。代わりに[プロパティアクセサー](/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors)を使用したほうが、より速くて安全です。 + +```js +var obj = { a: 20, b: 30 }; +var propName = getPropName(); // "a" または "b" が返される +var result = obj[ propName ]; // obj[ "a" ] は obj.a と同じ +``` + +このメソッドを使用して子孫プロパティにアクセスすることもできます。`eval()` を使うと以下のようになります。 + +```js +var obj = {a: {b: {c: 0}}}; +var propPath = getPropPath(); // "a.b.c" などを返す + +eval( 'var result = obj.' + propPath ); +``` + +ここで `eval()` を回避するには、プロパティのパスを分割し、様々なプロパティをループすることで行うことができます。 + +```js +function getDescendantProp(obj, desc) { + var arr = desc.split('.'); + while (arr.length) { + obj = obj[arr.shift()]; + } + return obj; +} + +var obj = {a: {b: {c: 0}}}; +var propPath = getPropPath(); // "a.b.c" などを返す +var result = getDescendantProp(obj, propPath); +``` + +プロパティの設定も同様に行うことができます。 + +```js +function setDescendantProp(obj, desc, value) { + var arr = desc.split('.'); + while (arr.length > 1) { + obj = obj[arr.shift()]; + } + return obj[arr[0]] = value; +} + +var obj = {a: {b: {c: 0}}}; +var propPath = getPropPath(); // "a.b.c" などを返す +var result = setDescendantProp(obj, propPath, 1); // obj.a.b.c は 1 になる +``` + +### コードの断片を評価する場合、代わりに関数を使う + +JavaScript {{interwiki("wikipedia","第一級関数")}}を備えており、関数を他の API の引数としたり、変数やオブジェクトのプロパティに保存したりすることができます。多くの DOM API はこれを考慮して作られているので、次のように書くことができます (また、書くべきです)。 + +```js +// setTimeout(" ... ", 1000) を使う代わりに +setTimeout(function() { ... }, 1000); + +// elt.setAttribute("onclick", " ... ") を使う代わりに +elt.addEventListener('click', function() { ... } , false); +``` + +文字列を連結せずにパラメーター化した関数を作成する方法としては、[クロージャ](/ja/docs/Web/JavaScript/Closures)を使う方法も便利です。 + +### JSON の解析 (文字列を JavaScript オブジェクトに変換) + +`eval()` の呼び出しに使おうとしている文字列がコードではなくデータ (例えば `"[1, 2, 3]"` で配列を表す) を含むものであれば、{{Glossary("JSON")}} に切り替えることを検討してください。これは JavaScript のサブセットを使用することで、文字列でデータを表現することができます。<a href="/ja/docs/Downloading_JSON_and_JavaScript_in_extensions">Downloading JSON and JavaScript in extensions</a> の記事も参照してください。 + +JSON の構文は JavaScript の構文に比べて制限があり、多くの有効な JavaScript リテラルが JSON としては解釈されないことに注意してください。例えば、最後にカンマを付けることは JSON では許されておらず、オブジェクトリテラル内のプロパティ名 (キー) は引用符で囲む必要があります。後で JSON として解析される文字列を生成するには、JSON シリアライザーを使うようにしてください。 + +<h3 id="Pass_data_instead_of_code" name="Pass_data_instead_of_code">コードの代わりにデータを渡す</h3> + +例えば、ウェブページの内容を取得できるよう設計された拡張であれば、JavaScript コードの代わりに <a href="/ja/docs/Web/XPath">XPath</a> を使って取得ルールを定義できます。 + +<h2 id="Examples" name="Examples">使用例</h2> + +<h3 id="Using_eval" name="Using_eval">`eval` を使用する</h3> + +次のコードでは、`eval` を含むどちらの文も 42 を返します。最初のコードは文字列 "`x + y + 1`" を評価します。2 番目のコードは文字列 "`42`" を評価します。 + +```js +var x = 2; +var y = 39; +var z = '42'; +eval('x + y + 1'); // 42 が返される +eval(z); // 42 が返される +``` + +### `eval` を使用して JavaScript 文の文字列を評価する + +次の例は、`eval()` を使用して文字列 `str` を評価しています。この文字列は `x` が 5 の場合に `z` に 42 の値を代入し、それ以外の場合は `z` に 0 を代入する JavaScript 文で構成されています。2 番目の文が実行される時、`eval` によってこれらの文が実行され、そして一連の文を評価して `z` に代入される値を返します。 + +```js +var x = 5; +var str = "if (x == 5) {console.log('z is 42'); z = 42;} else z = 0;"; + +console.log('z is ', eval(str)); +``` + +複数の値を定義した場合、最後の値が返されます。 + +```js +var x = 5; +var str = "if (x == 5) {console.log('z is 42'); z = 42; x = 420; } else z = 0;"; + +console.log('x is ', eval(str)); // z is 42 x is 420 +``` + +### 評価される最後の式について + +`eval()` は最後に評価された式の値を返します。 + +```js +var str = 'if ( a ) { 1 + 1; } else { 1 + 2; }'; +var a = true; +var b = eval(str); // 2 が返される + +console.log('b is : ' + b); + +a = false; +b = eval(str); // 3 が返される + +console.log('b is : ' + b); +``` + +### 関数定義の文字列の `eval` には先頭と末尾に "(" と ")" が必要 + +```js +var fctStr1 = 'function a() {}' +var fctStr2 = '(function a() {})' +var fct1 = eval(fctStr1) // undefined が返される +var fct2 = eval(fctStr2) // 関数が返される +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Global_Objects/uneval", "uneval()")}} +- [プロパティアクセサー](/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors) +- [WebExtensions: コンテンツスクリプトでの eval() の使用](/ja/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#using_eval_in_content_scripts) diff --git a/files/ja/web/javascript/reference/global_objects/float32array/float32array/index.html b/files/ja/web/javascript/reference/global_objects/float32array/float32array/index.html index d67e85f9ab..2050b28b53 100644 --- a/files/ja/web/javascript/reference/global_objects/float32array/float32array/index.html +++ b/files/ja/web/javascript/reference/global_objects/float32array/float32array/index.html @@ -97,7 +97,7 @@ var float32 = new Float32Array(iterable); <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript typed arrays</a></li> + <li><a href="/ja/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript typed arrays</a></li> <li>{{jsxref("ArrayBuffer")}}</li> <li>{{jsxref("DataView")}}</li> </ul> diff --git a/files/ja/web/javascript/reference/global_objects/float32array/index.html b/files/ja/web/javascript/reference/global_objects/float32array/index.html deleted file mode 100644 index 16256ccb1e..0000000000 --- a/files/ja/web/javascript/reference/global_objects/float32array/index.html +++ /dev/null @@ -1,197 +0,0 @@ ---- -title: Float32Array -slug: Web/JavaScript/Reference/Global_Objects/Float32Array -tags: - - Constructor - - JavaScript - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/Float32Array ---- -<div>{{JSRef}}</div> - -<p><code>Float32Array タイプは、32 ビット浮動小数点数 (C 言語の float データタイプに相当します) の配列を表します。</code>各要素のバイトオーダーはプラットフォームに依存します。もしコントロールしたい場合は代わりに{{jsxref("DataView")}}を使って下さい。各要素は0で初期化されます。生成された <code>Float32Array</code> オブジェクトのメソッドあるいは配列のような表記法 ("<code>[]</code>") を用いて、要素を参照することができます。</p> - -<h2 id="Constructors" name="Constructors">構文</h2> - -<pre class="syntaxbox">new Float32Array(); // new in ES2017 -new Float32Array(length); -new Float32Array(typedArray); -new Float32Array(object); -new Float32Array(buffer [, byteOffset [, length]]);</pre> - -<p>コンストラクタの構文とパラメータについての詳しい情報は{{jsxref("TypedArray")}}を参照して下さい。</p> - -<h2 id="プロパティ">プロパティ</h2> - -<dl> - <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Float32Array.BYTES_PER_ELEMENT")}}</dt> - <dd>要素一個あたりのバイト数を返します。<code>Float32Array</code> の場合は<font face="Consolas, Liberation Mono, Courier, monospace">4</font>です。</dd> - <dt>Float32Array.length</dt> - <dd><code>値は3になります</code>。実際の長さ(要素数)については{{jsxref("TypedArray.prototype.length", "Float32Array.prototype.length")}}を参照して下さい。</dd> - <dt>{{jsxref("TypedArray.name", "Float32Array.name")}}</dt> - <dd>コンストラクタ名を文字列値で返します。<code>Float32Array</code> の場合、"Float32Array"<code>です</code>。</dd> - <dt>{{jsxref("TypedArray.prototype", "Float32Array.prototype")}}</dt> - <dd><em>TypedArray</em> オブジェクトのプロトタイプです。</dd> -</dl> - -<h2 id="メソッド">メソッド</h2> - -<dl> - <dt>{{jsxref("TypedArray.from", "Float32Array.from()")}}</dt> - <dd>配列状のオブジェクトやイテレート可能なオブジェクトから、新たな <code>Float32Array</code> オブジェクトを生成します。{{jsxref("Array.from()")}}も確かめて下さい。</dd> - <dt>{{jsxref("TypedArray.of", "Float32Array.of()")}}</dt> - <dd>可変長引数で新しい <code>Float32Array</code> オブジェクトを生成します。{{jsxref("Array.of()")}}も確かめて下さい。</dd> -</dl> - -<h2 id="Float32Array_プロトタイプ"><code>Float32Array</code> プロトタイプ</h2> - -<p>全ての <code>Float32Array</code> オブジェクトは {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}} を継承しています。</p> - -<h3 id="プロパティ_2">プロパティ</h3> - -<dl> - <dt><code>Float32Array.prototype.constructor</code></dt> - <dd>インスタンスのプロトタイプを作る関数を返します。これは、デフォルトで対応する <code>Float32Array</code> コンストラクタです。</dd> - <dt>{{jsxref("TypedArray.prototype.buffer", "Float32Array.prototype.buffer")}} {{readonlyInline}}</dt> - <dd><code>Float32Array</code> オブジェクトによって参照される{{jsxref("ArrayBuffer")}}を返します。構築時に設定され、<strong>読取専用</strong>となります。</dd> - <dt>{{jsxref("TypedArray.prototype.byteLength", "Float32Array.prototype.byteLength")}} {{readonlyInline}}</dt> - <dd>{{jsxref("ArrayBuffer")}}の開始位置からの<code>Float32Array</code> オブジェクトの(バイト単位の)長さを返します。構築時に設定され、<strong>読取専用</strong>となります。</dd> - <dt>{{jsxref("TypedArray.prototype.byteOffset", "Float32Array.prototype.byteOffset")}} {{readonlyInline}}</dt> - <dd>{{jsxref("ArrayBuffer")}}の開始位置からの<code>Float32Array</code> オブジェクトの(バイト単位の)オフセットを返します。構築時に設定され、<strong>読取専用</strong>となります。</dd> - <dt>{{jsxref("TypedArray.prototype.length", "Float32Array.prototype.length")}} {{readonlyInline}}</dt> - <dd><code>Float32Array</code> オブジェクト内に保持された要素の数を返します。構築時に設定され、<strong>読取専用</strong>となります。</dd> - <dt> - <h3 id="メソッド_2">メソッド</h3> - </dt> - <dt>{{jsxref("TypedArray.prototype.copyWithin()", "Float32Array.prototype.copyWithin()")}}</dt> - <dd>配列内で一連の配列要素をコピーします。{{jsxref("Array.prototype.copyWithin()")}}も確かめて下さい。</dd> - <dt>{{jsxref("TypedArray.entries", "Float32Array.prototype.entries()")}}</dt> - <dd>配列内で各インデックスに対して、キー／バリュー ペアを含む新しい<code>Array Iterator</code>を返します。{{jsxref("Array.prototype.entries()")}}も確かめて下さい。</dd> - <dt>{{jsxref("TypedArray.every", "Float32Array.prototype.every()")}}</dt> - <dd>配列内のすべての要素が関数によって提供されたテストに合格するかどうかテストを実行します。{{jsxref("Array.prototype.every()")}}も確かめて下さい。</dd> - <dt>{{jsxref("TypedArray.fill", "Float32Array.prototype.fill()")}}</dt> - <dd>開始位置から終了位置までの配列のすべての要素を固定値で設定します。{{jsxref("Array.prototype.fill()")}}も確かめて下さい。</dd> - <dt>{{jsxref("TypedArray.filter", "Float32Array.prototype.filter()")}}</dt> - <dd>与えられたフィルタリング関数がtrueを返す配列のすべての要素をもつ新しい配列を生成します。{{jsxref("Array.prototype.filter()")}}も確かめて下さい。</dd> - <dt>{{jsxref("TypedArray.find", "Float32Array.prototype.find()")}}</dt> - <dd>配列要素が与えられたテスト関数を満足したら、配列の値を返します。満足しなかった場合、<code>undefined</code>を返します。 {{jsxref("Array.prototype.find()")}}を確かめて下さい。</dd> - <dt>{{jsxref("TypedArray.findIndex", "Float32Array.prototype.findIndex()")}}</dt> - <dd>配列要素が与えられたテスト関数を満足したら、配列のインデックスを返します。満足しなかった場合、-1を返します。{{jsxref("Array.prototype.findIndex()")}}も確かめて下さい。</dd> - <dt>{{jsxref("TypedArray.forEach", "Float32Array.prototype.forEach()")}}</dt> - <dd>配列内の各要素に対する関数を呼び出します。{{jsxref("Array.prototype.forEach()")}}も確かめて下さい。</dd> - <dt>{{jsxref("TypedArray.includes", "Float32Array.prototype.includes()")}} {{experimental_inline}}</dt> - <dd>typed arrayがある要素を含むかどうか判断し、それに応じて、<code>true</code> か <code>false</code>を返します。 {{jsxref("Array.prototype.includes()")}}も確かめて下さい。</dd> - <dt>{{jsxref("TypedArray.indexOf", "Float32Array.prototype.indexOf()")}}</dt> - <dd>指定された値に等しい配列内の要素の最初のインデックスを返します。見つからない場合、-1を返します。{{jsxref("Array.prototype.indexOf()")}}も確かめて下さい。</dd> - <dt>{{jsxref("TypedArray.join", "Float32Array.prototype.join()")}}</dt> - <dd>すべての配列要素を文字列に結合します。{{jsxref("Array.prototype.join()")}}も確かめて下さい。</dd> - <dt>{{jsxref("TypedArray.keys", "Float32Array.prototype.keys()")}}</dt> - <dd>配列内の各インデックスに対するキーを含む新しい<code>Array Iterator</code>を返します。{{jsxref("Array.prototype.keys()")}}も確かめて下さい。</dd> - <dt>{{jsxref("TypedArray.lastIndexOf", "Float32Array.prototype.lastIndexOf()")}}</dt> - <dd>指定された値と等しい配列の要素の最後のインデックスを返します。見つからない場合、-1を返します。{{jsxref("Array.prototype.lastIndexOf()")}}を確かめて下さい。</dd> - <dt>{{jsxref("TypedArray.map", "Float32Array.prototype.map()")}}</dt> - <dd>この配列のすべての要素で与えられた関数を呼び出した結果をもつ新しい配列を生成します。{{jsxref("Array.prototype.map()")}}も確かめて下さい。</dd> - <dt>{{jsxref("TypedArray.reduce", "Float32Array.prototype.reduce()")}}</dt> - <dd>アキュムレータに対して関数を適用し、隣り合う二つのtyped arrayの要素(左から右へ)は単一の値になります。{{jsxref("Array.prototype.reduce()")}}も確かめて下さい。</dd> - <dt>{{jsxref("TypedArray.reduceRight", "Float32Array.prototype.reduceRight()")}}</dt> - <dd>アキュムレータに対して関数を適用し、隣り合う二つのtyped arrayの要素(右から左へ)は単一の値になります。{{jsxref("Array.prototype.reduceRight()")}}を確かめて下さい。</dd> - <dt>{{jsxref("TypedArray.reverse", "Float32Array.prototype.reverse()")}}</dt> - <dd>配列要素の順番を反転させます。— 最初の要素は最後になり、最後の要素は最初になります。{{jsxref("Array.prototype.reverse()")}}も確かめて下さい。</dd> - <dt>{{jsxref("TypedArray.set", "Float32Array.prototype.set()")}}</dt> - <dd>入力値を指定した配列から読み込み、typed array内に複数の値を格納します。</dd> - <dt>{{jsxref("TypedArray.slice", "Float32Array.prototype.slice()")}}</dt> - <dd>配列の一部を取り出して新しい配列を返します。{{jsxref("Array.prototype.slice()")}}も確かめて下さい。</dd> - <dt>{{jsxref("TypedArray.some", "Float32Array.prototype.some()")}}</dt> - <dd>ある配列の少なくとも 1 つの要素が与えられたテスト関数を満たした場合にtrueを返します。{{jsxref("Array.prototype.some()")}}も確かめて下さい。</dd> - <dt>{{jsxref("TypedArray.sort", "Float32Array.prototype.sort()")}}</dt> - <dd>配列の要素をソートし、その結果を返します。{{jsxref("Array.prototype.sort()")}}も確かめて下さい。</dd> - <dt>{{jsxref("TypedArray.subarray", "Float32Array.prototype.subarray()")}}</dt> - <dd>与えられた開始位置と終了位置の要素インデックスの新しい<code>Float32Array</code> オブジェクトを返します。</dd> - <dt>{{jsxref("TypedArray.values", "Float32Array.prototype.values()")}}</dt> - <dd>配列内で各インデックスに対する値を含む新しい<code>Array Iterator</code>オブジェクトを返します。{{jsxref("Array.prototype.values()")}}を確かめて下さい。</dd> - <dt>{{jsxref("TypedArray.toLocaleString", "Float32Array.prototype.toLocaleString()")}}</dt> - <dd>配列と要素を表すローカライズされた文字列を返します。{{jsxref("Array.prototype.toLocaleString()")}}も確かめて下さい。</dd> - <dt>{{jsxref("TypedArray.toString", "Float32Array.prototype.toString()")}}</dt> - <dd>配列と要素を表す文字列を返します。{{jsxref("Array.prototype.toString()")}}も確かめて下さい。</dd> - <dt>{{jsxref("TypedArray.@@iterator", "Float32Array.prototype[@@iterator]()")}}</dt> - <dd>配列内で各インデックスに対する値を含む新しい<code>Array Iterator</code>オブジェクトを返します。</dd> -</dl> - -<h2 id="例">例</h2> - -<pre class="brush: js">// From a length -var float32 = new Float32Array(2); -float32[0] = 42; -console.log(float32[0]); // 42 -console.log(float32.length); // 2 -console.log(float32.BYTES_PER_ELEMENT); // 4 - -// From an array -var arr = new Float32Array([21,31]); -console.log(arr[1]); // 31 - -// From another TypedArray -var x = new Float32Array([21, 31]); -var y = new Float32Array(x); -console.log(y[0]); // 21 - -// From an ArrayBuffer -var buffer = new ArrayBuffer(16); -var z = new Float32Array(buffer, 0, 4); - -// From an iterable -var iterable = function*(){ yield* [1,2,3]; }(); -var float32 = new Float32Array(iterable); -// Float32Array[1, 2, 3]</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table" style="line-height: 1.5;"> - <tbody> - <tr> - <th scope="col">仕様書</th> - <th scope="col">策定状況</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('Typed Array')}}</td> - <td>{{Spec2('Typed Array')}}</td> - <td>ECMAScript 6 で置き換えられました。</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#table-49', 'TypedArray constructors')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>ECMA 標準では最初の定義。<code>new</code> 演算子が必要なことが仕様書に含まれました。</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> - - - -<p>{{Compat("javascript.builtins.Float32Array")}}</p> - -<h2 id="互換性について">互換性について</h2> - -<p>ECMAScript 2015 (ES6)から、<code>Float32Array</code> コンストラクタでインスタンスを生成する場合、 {{jsxref("Operators/new", "new")}} 演算子が必要となります。 <code>Float32Array</code> を <code>new 演算子を使用せずに関数呼び出しした場合、</code>{{jsxref("TypeError")}} 例外が投げられるでしょう。</p> - -<pre class="brush: js example-bad">var dv = Float32Array([1, 2, 3]); -// TypeError: calling a builtin Float32Array constructor -// without new is forbidden</pre> - -<pre class="brush: js example-good">var dv = new Float32Array([1, 2, 3]);</pre> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></li> - <li>{{jsxref("ArrayBuffer")}}</li> - <li>{{jsxref("DataView")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/float32array/index.md b/files/ja/web/javascript/reference/global_objects/float32array/index.md new file mode 100644 index 0000000000..85532ba343 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/float32array/index.md @@ -0,0 +1,146 @@ +--- +title: Float32Array +slug: Web/JavaScript/Reference/Global_Objects/Float32Array +tags: + - クラス + - JavaScript + - TypedArray + - 型付き配列 + - ポリフィル +browser-compat: javascript.builtins.Float32Array +translation_of: Web/JavaScript/Reference/Global_Objects/Float32Array +--- +{{JSRef}} + +**`Float32Array`** は型付き配列で、プラットフォームのバイト順による 32 ビット浮動小数点数 (C 言語の `float` データ型に相当) の配列を表します。バイト順の制御が必要な場合は、代わりに {{jsxref("DataView")}} を使用してください。中身は `0` で初期化されます。生成されると、配列内の要素はそのオブジェクトのメソッドを使用するか、配列の標準的な添字の構文 (すなわち、ブラケット記法) を使用するかして参照することができます。 + +## コンストラクター + +- [`Float32Array()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Float32Array/Float32Array) + - : 新しい `Float32Array` オブジェクトを生成します。 + +## 静的プロパティ + +- {{jsxref("TypedArray.BYTES_PER_ELEMENT", "Float32Array.BYTES_PER_ELEMENT")}} + - : 要素の大きさを数値で返します。`Float32Array` の場合は `4` です。 +- {{jsxref("TypedArray.name", "Float32Array.name")}} + - : コンストラクター名を文字列値で返します。`Float32Array` の場合、 "`Float32Array`" です。 + +## 静的メソッド + +- {{jsxref("TypedArray.from", "Float32Array.from()")}} + - : 配列風オブジェクトまたは反復可能オブジェクトから新しい `Float32Array` オブジェクトを生成します。 {{jsxref("Array.from()")}} も参照してください。 +- {{jsxref("TypedArray.of", "Float32Array.of()")}} + - : 可変長引数で新しい `Float32Array` オブジェクトを生成します。{{jsxref("Array.of()")}} も参照してください。 + +## インスタンスプロパティ + +- {{jsxref("TypedArray.prototype.buffer", "Float32Array.prototype.buffer")}} + - : `Float32Array` オブジェクトによって参照される {{jsxref("ArrayBuffer")}} を返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.byteLength", "Float32Array.prototype.byteLength")}} + - : `Float32Array` の長さを (バイト単位で) 返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.byteOffset", "Float32Array.prototype.byteOffset")}} + - : {{jsxref("ArrayBuffer")}} の先頭からの `Float32Array` のオフセットを (バイト単位で) 返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.length", "Float32Array.prototype.length")}} + - : `Float32Array` オブジェクト内に保持されている要素の数を返します。構築時に固定され、**読み取り専用**です。 + +## インスタンスメソッド + +- {{jsxref("TypedArray.copyWithin", "Float32Array.prototype.copyWithin()")}} + - : 配列内で一連の配列要素をコピーします。{{jsxref("Array.prototype.copyWithin()")}} も参照してください。 +- {{jsxref("TypedArray.entries", "Float32Array.prototype.entries()")}} + - : 配列内ですべての位置におけるキーと値の組を提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.entries()")}} も参照してください。 +- {{jsxref("TypedArray.every", "Float32Array.prototype.every()")}} + - : 配列内のすべての要素が関数によって提供されたテストに合格するかどうかテストを実行します。{{jsxref("Array.prototype.every()")}} も参照してください。 +- {{jsxref("TypedArray.fill", "Float32Array.prototype.fill()")}} + - : 配列の先頭位置から末尾位置までのすべての要素を固定値に設定します。{{jsxref("Array.prototype.fill()")}} も参照してください。 +- {{jsxref("TypedArray.filter", "Float32Array.prototype.filter()")}} + - : この配列のすべての要素のうち、与えられたフィルタリング関数が `true` を返すものをもつ新しい配列を生成します。{{jsxref("Array.prototype.filter()")}} も参照してください。 +- {{jsxref("TypedArray.find", "Float32Array.prototype.find()")}} + - : 配列内の要素に与えられたテスト関数を満足するものがあったら、見つかった値を返します。見つからなければ `undefined` を返します。{{jsxref("Array.prototype.find()")}} も参照してください。 +- {{jsxref("TypedArray.findIndex", "Float32Array.prototype.findIndex()")}} + - : 配列内の要素に与えられたテスト関数を満足するものがあったら、見つかった位置を返します。見つからなければ `-1` を返します。{{jsxref("Array.prototype.findIndex()")}} も参照してください。 +- {{jsxref("TypedArray.forEach", "Float32Array.prototype.forEach()")}} + - : 配列内のそれぞれの要素について関数を呼び出します。{{jsxref("Array.prototype.forEach()")}} も参照してください。 +- {{jsxref("TypedArray.includes", "Float32Array.prototype.includes()")}} + - : 型付き配列に特定の要素があるかどうかを判断し、それに応じて `true` か `false`を返します。 {{jsxref("Array.prototype.includes()")}} も参照してください。 +- {{jsxref("TypedArray.indexOf", "Float32Array.prototype.indexOf()")}} + - : 指定された値に等しい配列内の要素の最初の (最小の) 位置を返します。見つからなかった場合、 `-1` を返します。{{jsxref("Array.prototype.indexOf()")}} も参照してください。 +- {{jsxref("TypedArray.join", "Float32Array.prototype.join()")}} + - : 配列のすべての要素を 1 つの文字列に結合します。{{jsxref("Array.prototype.join()")}} も参照してください。 +- {{jsxref("TypedArray.keys", "Float32Array.prototype.keys()")}} + - : 配列内ですべての位置におけるキーを提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.keys()")}} も参照してください。 +- {{jsxref("TypedArray.lastIndexOf", "Float32Array.prototype.lastIndexOf()")}} + - : 指定された値に等しい配列内の要素の最後の (最大の) 位置を返します。見つからなかった場合、 `-1` を返します。{{jsxref("Array.prototype.lastIndexOf()")}} も参照してください。 +- {{jsxref("TypedArray.map", "Float32Array.prototype.map()")}} + - : この配列のすべての要素で与えられた関数を呼び出した結果をもつ新しい配列を生成します。{{jsxref("Array.prototype.map()")}} も参照してください。 +- {{jsxref("TypedArray.reduce", "Float32Array.prototype.reduce()")}} + - : アキュムレーターとこの配列のそれぞれの値に対して (左から右へ) 関数を適用し、単一の値に還元します。{{jsxref("Array.prototype.reduce()")}} も参照してください。 +- {{jsxref("TypedArray.reduceRight", "Float32Array.prototype.reduceRight()")}} + - : アキュムレーターとこの配列のそれぞれの値に対して (右から左へ) 関数を適用し、単一の値に還元します。{{jsxref("Array.prototype.reduceRight()")}} も参照してください。 +- {{jsxref("TypedArray.reverse", "Float32Array.prototype.reverse()")}} + - : 配列の要素の順番を反転させます。最初の要素は最後になり、最後の要素は最初になります。{{jsxref("Array.prototype.reverse()")}} も参照してください。 +- {{jsxref("TypedArray.set", "Float32Array.prototype.set()")}} + - : 入力値を指定した配列から読み込み、この型付き配列内に複数の値を格納します。 +- {{jsxref("TypedArray.slice", "Float32Array.prototype.slice()")}} + - : 配列の一部を取り出して新しい配列を返します。{{jsxref("Array.prototype.slice()")}} も参照してください。 +- {{jsxref("TypedArray.some", "Float32Array.prototype.some()")}} + - : この配列の 1 つ以上の要素が与えられたテスト関数を満たした場合に `true` を返します。{{jsxref("Array.prototype.some()")}} も参照してください。 +- {{jsxref("TypedArray.sort", "Float32Array.prototype.sort()")}} + - : 配列の要素をその場で並べ替え、その配列を返します。{{jsxref("Array.prototype.sort()")}} も参照してください。 +- {{jsxref("TypedArray.subarray", "Float32Array.prototype.subarray()")}} + - : 指定された先頭と末尾の要素位置から新しい `Float32Array` を返します。 +- {{jsxref("TypedArray.values", "Float32Array.prototype.values()")}} + - : 配列内ですべての位置における値を提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.values()")}} も参照してください。 +- {{jsxref("TypedArray.toLocaleString", "Float32Array.prototype.toLocaleString()")}} + - : 配列とその要素を表すローカライズされた文字列を返します。{{jsxref("Array.prototype.toLocaleString()")}} も参照してください。 +- {{jsxref("TypedArray.toString", "Float32Array.prototype.toString()")}} + - : 配列とその要素を表す文字列を返します。{{jsxref("Array.prototype.toString()")}} も参照してください。 +- {{jsxref("TypedArray.@@iterator", "Float32Array.prototype[@@iterator]()")}} + - : 配列内ですべての位置における値を提供する新しい*配列イテレーター*を返します。 + +## 例 + +### 様々な方法で `Float32Array` を作成 + +```js +// 長さから +var float32 = new Float32Array(2); +float32[0] = 42; +console.log(float32[0]); // 42 +console.log(float32.length); // 2 +console.log(float32.BYTES_PER_ELEMENT); // 4 + +// 配列から +var arr = new Float32Array([21,31]); +console.log(arr[1]); // 31 + +// From another TypedArray +var x = new Float32Array([21, 31]); +var y = new Float32Array(x); +console.log(y[0]); // 21 + +// ArrayBuffer から +var buffer = new ArrayBuffer(16); +var z = new Float32Array(buffer, 0, 4); + +// 反復可能オブジェクトから +var iterable = function*(){ yield* [1,2,3]; }(); +var float32 = new Float32Array(iterable); +// Float32Array[1, 2, 3] +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- `Float32Array` のポリフィルが [`core-js`](https://github.com/zloirock/core-js#ecmascript-typed-arrays) で利用できます +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- {{jsxref("ArrayBuffer")}} +- {{jsxref("DataView")}} diff --git a/files/ja/web/javascript/reference/global_objects/float64array/float64array/index.html b/files/ja/web/javascript/reference/global_objects/float64array/float64array/index.html index 00f5c14f45..d0a6cd647e 100644 --- a/files/ja/web/javascript/reference/global_objects/float64array/float64array/index.html +++ b/files/ja/web/javascript/reference/global_objects/float64array/float64array/index.html @@ -97,7 +97,7 @@ var float64 = new Float64Array(iterable); <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript typed arrays</a></li> + <li><a href="/ja/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript typed arrays</a></li> <li>{{jsxref("ArrayBuffer")}}</li> <li>{{jsxref("DataView")}}</li> </ul> diff --git a/files/ja/web/javascript/reference/global_objects/float64array/index.html b/files/ja/web/javascript/reference/global_objects/float64array/index.html index 5f93139628..969d2eb1d0 100644 --- a/files/ja/web/javascript/reference/global_objects/float64array/index.html +++ b/files/ja/web/javascript/reference/global_objects/float64array/index.html @@ -191,7 +191,7 @@ var float64 = new Float64Array(iterable); <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></li> + <li><a href="/ja/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></li> <li>{{jsxref("ArrayBuffer")}}</li> <li>{{jsxref("DataView")}}</li> </ul> diff --git a/files/ja/web/javascript/reference/global_objects/float64array/index.md b/files/ja/web/javascript/reference/global_objects/float64array/index.md new file mode 100644 index 0000000000..2ddc27abb8 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/float64array/index.md @@ -0,0 +1,146 @@ +--- +title: Float64Array +slug: Web/JavaScript/Reference/Global_Objects/Float64Array +tags: + - クラス + - JavaScript + - TypedArray + - 型付き配列 + - ポリフィル +browser-compat: javascript.builtins.Float64Array +translation_of: Web/JavaScript/Reference/Global_Objects/Float64Array +--- +{{JSRef}} + +**`Float64Array`** は型付き配列で、プラットフォームのバイト順による 64 ビット浮動小数点数 (C 言語の `double` データ型に相当) の配列を表します。バイト順の制御が必要な場合は、代わりに {{jsxref("DataView")}} を使用してください。中身は `0` で初期化されます。生成されると、配列内の要素はそのオブジェクトのメソッドを使用するか、配列の標準的な添字の構文 (すなわち、ブラケット記法) を使用するかして参照することができます。 + +## コンストラクター + +- [`Float64Array()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Float64Array/Float64Array) + - : 新しい `Float64Array` オブジェクトを生成します。 + +## 静的プロパティ + +- {{jsxref("TypedArray.BYTES_PER_ELEMENT", "Float64Array.BYTES_PER_ELEMENT")}} + - : 要素の大きさを数値で返します。`Float64Array` の場合は `8` です。 +- {{jsxref("TypedArray.name", "Float64Array.name")}} + - : コンストラクター名を文字列値で返します。`Float64Array` の場合、 "`Float64Array`" です。 + +## 静的メソッド + +- {{jsxref("TypedArray.from", "Float64Array.from()")}} + - : 配列風オブジェクトまたは反復可能オブジェクトから新しい `Float64Array` オブジェクトを生成します。 {{jsxref("Array.from()")}} も参照してください。 +- {{jsxref("TypedArray.of", "Float64Array.of()")}} + - : 可変長引数で新しい `Float64Array` オブジェクトを生成します。{{jsxref("Array.of()")}} も参照してください。 + +## インスタンスプロパティ + +- {{jsxref("TypedArray.prototype.buffer", "Float64Array.prototype.buffer")}} + - : `Float64Array` オブジェクトによって参照される {{jsxref("ArrayBuffer")}} を返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.byteLength", "Float64Array.prototype.byteLength")}} + - : {{jsxref("ArrayBuffer")}} の先頭からの `Float64Array` の長さを (バイト単位で) 返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.byteOffset", "Float64Array.prototype.byteOffset")}} + - : {{jsxref("ArrayBuffer")}} の先頭からの `Float64Array` のオフセットを (バイト単位で) 返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.length", "Float64Array.prototype.length")}} + - : `Float64Array` オブジェクト内に保持されている要素の数を返します。構築時に固定され、**読み取り専用**です。 + +## インスタンスメソッド + +- {{jsxref("TypedArray.copyWithin", "Float64Array.prototype.copyWithin()")}} + - : 配列内で一連の配列要素をコピーします。{{jsxref("Array.prototype.copyWithin()")}} も参照してください。 +- {{jsxref("TypedArray.entries", "Float64Array.prototype.entries()")}} + - : 配列内ですべての位置におけるキーと値の組を提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.entries()")}} も参照してください。 +- {{jsxref("TypedArray.every", "Float64Array.prototype.every()")}} + - : 配列内のすべての要素が関数によって提供されたテストに合格するかどうかテストを実行します。{{jsxref("Array.prototype.every()")}} も参照してください。 +- {{jsxref("TypedArray.fill", "Float64Array.prototype.fill()")}} + - : 配列の先頭位置から末尾位置までのすべての要素を固定値に設定します。{{jsxref("Array.prototype.fill()")}} も参照してください。 +- {{jsxref("TypedArray.filter", "Float64Array.prototype.filter()")}} + - : この配列のすべての要素のうち、与えられたフィルタリング関数が `true` を返すものをもつ新しい配列を生成します。{{jsxref("Array.prototype.filter()")}} も参照してください。 +- {{jsxref("TypedArray.find", "Float64Array.prototype.find()")}} + - : 配列内の要素に与えられたテスト関数を満足するものがあったら、見つかった値を返します。見つからなければ `undefined` を返します。{{jsxref("Array.prototype.find()")}} も参照してください。 +- {{jsxref("TypedArray.findIndex", "Float64Array.prototype.findIndex()")}} + - : 配列内の要素に与えられたテスト関数を満足するものがあったら、見つかった位置を返します。見つからなければ `-1` を返します。{{jsxref("Array.prototype.findIndex()")}} も参照してください。 +- {{jsxref("TypedArray.forEach", "Float64Array.prototype.forEach()")}} + - : 配列内のそれぞれの要素について関数を呼び出します。{{jsxref("Array.prototype.forEach()")}} も参照してください。 +- {{jsxref("TypedArray.includes", "Float64Array.prototype.includes()")}} + - : 型付き配列に特定の要素があるかどうかを判断し、それに応じて `true` か `false`を返します。 {{jsxref("Array.prototype.includes()")}} も参照してください。 +- {{jsxref("TypedArray.indexOf", "Float64Array.prototype.indexOf()")}} + - : 指定された値に等しい配列内の要素の最初の (最小の) 位置を返します。見つからなかった場合、 `-1` を返します。{{jsxref("Array.prototype.indexOf()")}} も参照してください。 +- {{jsxref("TypedArray.join", "Float64Array.prototype.join()")}} + - : 配列のすべての要素を 1 つの文字列に結合します。{{jsxref("Array.prototype.join()")}} も参照してください。 +- {{jsxref("TypedArray.keys", "Float64Array.prototype.keys()")}} + - : 配列内ですべての位置におけるキーを提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.keys()")}} も参照してください。 +- {{jsxref("TypedArray.lastIndexOf", "Float64Array.prototype.lastIndexOf()")}} + - : 指定された値に等しい配列内の要素の最後の (最大の) 位置を返します。見つからなかった場合、 `-1` を返します。{{jsxref("Array.prototype.lastIndexOf()")}} も参照してください。 +- {{jsxref("TypedArray.map", "Float64Array.prototype.map()")}} + - : この配列のすべての要素で与えられた関数を呼び出した結果をもつ新しい配列を生成します。{{jsxref("Array.prototype.map()")}} も参照してください。 +- {{jsxref("TypedArray.reduce", "Float64Array.prototype.reduce()")}} + - : アキュムレーターとこの配列のそれぞれの値に対して (左から右へ) 関数を適用し、単一の値に還元します。{{jsxref("Array.prototype.reduce()")}} も参照してください。 +- {{jsxref("TypedArray.reduceRight", "Float64Array.prototype.reduceRight()")}} + - : アキュムレーターとこの配列のそれぞれの値に対して (右から左へ) 関数を適用し、単一の値に還元します。{{jsxref("Array.prototype.reduceRight()")}} も参照してください。 +- {{jsxref("TypedArray.reverse", "Float64Array.prototype.reverse()")}} + - : 配列の要素の順番を反転させます。最初の要素は最後になり、最後の要素は最初になります。{{jsxref("Array.prototype.reverse()")}} も参照してください。 +- {{jsxref("TypedArray.set", "Float64Array.prototype.set()")}} + - : 入力値を指定した配列から読み込み、この型付き配列内に複数の値を格納します。 +- {{jsxref("TypedArray.slice", "Float64Array.prototype.slice()")}} + - : 配列の一部を取り出して新しい配列を返します。{{jsxref("Array.prototype.slice()")}} も参照してください。 +- {{jsxref("TypedArray.some", "Float64Array.prototype.some()")}} + - : この配列の 1 つ以上の要素が与えられたテスト関数を満たした場合に `true` を返します。{{jsxref("Array.prototype.some()")}} も参照してください。 +- {{jsxref("TypedArray.sort", "Float64Array.prototype.sort()")}} + - : 配列の要素をその場で並べ替え、その配列を返します。{{jsxref("Array.prototype.sort()")}} も参照してください。 +- {{jsxref("TypedArray.subarray", "Float64Array.prototype.subarray()")}} + - : 指定された先頭と末尾の要素位置から新しい `Float64Array` を返します。 +- {{jsxref("TypedArray.values", "Float64Array.prototype.values()")}} + - : 配列内ですべての位置における値を提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.values()")}} も参照してください。 +- {{jsxref("TypedArray.toLocaleString", "Float64Array.prototype.toLocaleString()")}} + - : 配列とその要素を表すローカライズされた文字列を返します。{{jsxref("Array.prototype.toLocaleString()")}} も参照してください。 +- {{jsxref("TypedArray.toString", "Float64Array.prototype.toString()")}} + - : 配列とその要素を表す文字列を返します。{{jsxref("Array.prototype.toString()")}} も参照してください。 +- {{jsxref("TypedArray.@@iterator", "Float64Array.prototype[@@iterator]()")}} + - : 配列内ですべての位置における値を提供する新しい*配列イテレーター*を返します。 + +## 例 + +### 様々な方法で `Float64Array` を作成 + +```js +// 長さから +var float64 = new Float64Array(2); +float64[0] = 42; +console.log(float64[0]); // 42 +console.log(float64.length); // 2 +console.log(float64.BYTES_PER_ELEMENT); // 4 + +// 配列から +var arr = new Float64Array([21,31]); +console.log(arr[1]); // 31 + +// From another TypedArray +var x = new Float64Array([21, 31]); +var y = new Float64Array(x); +console.log(y[0]); // 21 + +// ArrayBuffer から +var buffer = new ArrayBuffer(32); +var z = new Float64Array(buffer, 0, 4); + +// 反復可能オブジェクトから +var iterable = function*(){ yield* [1,2,3]; }(); +var float64 = new Float64Array(iterable); +// Float64Array[1, 2, 3] +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- `Float64Array` のポリフィルが [`core-js`](https://github.com/zloirock/core-js#ecmascript-typed-arrays) で利用できます +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- {{jsxref("ArrayBuffer")}} +- {{jsxref("DataView")}} diff --git a/files/ja/web/javascript/reference/global_objects/function/apply/index.html b/files/ja/web/javascript/reference/global_objects/function/apply/index.html index 2b4053f002..0528272d91 100644 --- a/files/ja/web/javascript/reference/global_objects/function/apply/index.html +++ b/files/ja/web/javascript/reference/global_objects/function/apply/index.html @@ -48,7 +48,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply </div> <div class="note"> -<p><strong>注:</strong> 最初の引数が undefined または null の場合、配列の<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">スプレッド構文</a>を使用して同様の結果を得ることができます。</p> +<p><strong>注:</strong> 最初の引数が undefined または null の場合、配列の<a href="/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax">スプレッド構文</a>を使用して同様の結果を得ることができます。</p> </div> <p>存在する関数を呼び出す時は通常と異なる <code>this</code> オブジェクトを渡すことができます。<code>this</code> はカレントオブジェクト、呼び出したオブジェクトを参照します。<code>apply</code> を用いることで、新たなオブジェクトのためにそのメソッドを書き直すことなく継承させることができます。</p> diff --git a/files/ja/web/javascript/reference/global_objects/globalthis/index.html b/files/ja/web/javascript/reference/global_objects/globalthis/index.html index 5d5eb8fab4..fa1017e013 100644 --- a/files/ja/web/javascript/reference/global_objects/globalthis/index.html +++ b/files/ja/web/javascript/reference/global_objects/globalthis/index.html @@ -39,7 +39,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/globalThis <h3 id="Search_for_the_global_across_environments" name="Search_for_the_global_across_environments">異なる環境間でグローバルの検索</h3> -<p><code>globalThis</code> 以前は、その環境のグローバルオブジェクトを取得する信頼性の高い方法は <code>Function('return this')()</code> だけでした。ただし、これは設定によっては <a href="/en-US/docs/Web/HTTP/CSP">CSP</a> 違反が発生するため、<a href="https://github.com/paulmillr/es6-shim">es6-shim</a> では次のようなチェックを使用します。</p> +<p><code>globalThis</code> 以前は、その環境のグローバルオブジェクトを取得する信頼性の高い方法は <code>Function('return this')()</code> だけでした。ただし、これは設定によっては <a href="/ja/docs/Web/HTTP/CSP">CSP</a> 違反が発生するため、<a href="https://github.com/paulmillr/es6-shim">es6-shim</a> では次のようなチェックを使用します。</p> <pre class="brush: js notranslate">var getGlobal = function () { if (typeof self !== 'undefined') { return self; } diff --git a/files/ja/web/javascript/reference/global_objects/int16array/index.html b/files/ja/web/javascript/reference/global_objects/int16array/index.html deleted file mode 100644 index 4f57724315..0000000000 --- a/files/ja/web/javascript/reference/global_objects/int16array/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: Int16Array -slug: Web/JavaScript/Reference/Global_Objects/Int16Array -tags: - - Class - - JavaScript - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/Int16Array ---- -<div>{{JSRef}}</div> - -<p><strong><code>Int16Array</code></strong> は型付き配列であり、プラットフォームのバイト順による 2 の補数形式の 16 ビット符号付き整数値の配列を表します。バイト順の制御が必要な場合は、代わりに {{jsxref("DataView")}} を使用してください。中身は <code>0</code> で初期化されます。生成されると、配列の中の要素はオブジェクトのメソッドを使用するか、配列の標準的な添字の構文を使用するか (すなわち、ブラケット構文を使用するか) して参照することができます。</p> - -<h2 id="Constructor" name="Constructor">コンストラクター</h2> - -<dl> - <dt>{{jsxref("Global_Objects/Int16Array/Int16Array", "Int16Array()")}}</dt> - <dd>新しい <code>Int16Array</code> オブジェクトを生成します。</dd> -</dl> - -<h2 id="Static_properties" name="Static_properties">静的プロパティ</h2> - -<dl> - <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int16Array.BYTES_PER_ELEMENT")}}</dt> - <dd>要素の大きさの数値を返します。 <code>Int16Array</code> の場合は <code>2</code> になります。</dd> - <dt>{{jsxref("TypedArray.name", "Int16Array.name")}}</dt> - <dd>コンストラクターの名前を文字列値で返します。 <code>Int16Array</code> 型の場合は "<code>Int16Array</code>" です。</dd> -</dl> - -<h2 id="Static_methods" name="Static_methods">静的メソッド</h2> - -<dl> - <dt>{{jsxref("TypedArray.from", "Int16Array.from()")}}</dt> - <dd>新しい <code>Int16Array</code> を、配列風オブジェクトや反復可能オブジェクトから生成します。 {{jsxref("Array.from()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.of", "Int16Array.of()")}}</dt> - <dd>新しい <code>Int16Array</code> を、可変長引数で生成します。 {{jsxref("Array.of()")}} も参照してください。</dd> -</dl> - -<h2 id="Instance_properties" name="Instance_properties">インスタンスプロパティ</h2> - -<dl> - <dt>{{jsxref("TypedArray.prototype.buffer", "Int16Array.prototype.buffer")}}</dt> - <dd><code>Int16Array</code> オブジェクトによって参照される {{jsxref("ArrayBuffer")}} を返します。構築時に設定され、<strong>読取専用</strong>です。</dd> - <dt>{{jsxref("TypedArray.prototype.byteLength", "Int16Array.prototype.byteLength")}}</dt> - <dd><code>Int16Array</code> の長さを、 {{jsxref("ArrayBuffer")}} の先頭からのバイト単位で返します。構築時に設定され、<strong>読取専用</strong>です。</dd> - <dt>{{jsxref("TypedArray.prototype.byteOffset", "Int16Array.prototype.byteOffset")}}</dt> - <dd><code>Int16Array</code> のオフセットを、 {{jsxref("ArrayBuffer")}} の先頭からのバイト単位で返します。構築時に設定され、<strong>読取専用</strong>です。</dd> - <dt>{{jsxref("TypedArray.prototype.length", "Int16Array.prototype.length")}}</dt> - <dd><code>Int16Array</code> オブジェクト内に保持されている要素の数を返します。構築時に設定され、<strong>読取専用</strong>です。</dd> -</dl> - -<h2 id="Instance_methods" name="Instance_methods">インスタンスメソッド</h2> - -<dl> - <dt>{{jsxref("TypedArray.copyWithin", "Int16Array.prototype.copyWithin()")}}</dt> - <dd>配列内で一連の配列要素をコピーします。 {{jsxref("Array.prototype.copyWithin()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.entries", "Int16Array.prototype.entries()")}}</dt> - <dd>配列内の各添字に対するキーと値の組を含む、新しい<em>配列イテレーター</em>を返します。 {{jsxref("Array.prototype.entries()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.every", "Int16Array.prototype.every()")}}</dt> - <dd>配列内のすべての要素に対して、指定された関数によるテストに合格するかどうかをテストします。 {{jsxref("Array.prototype.every()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.fill", "Int16Array.prototype.fill()")}}</dt> - <dd>配列の先頭から末尾までのすべての要素を固定値で設定します。 {{jsxref("Array.prototype.fill()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.filter", "Int16Array.prototype.filter()")}}</dt> - <dd>この配列のすべての要素のうち、指定されたフィルタリング関数が与えられたフィルタリング関数が <code>true</code> を返すすべての要素で、新しい配列を生成します。 {{jsxref("Array.prototype.filter()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.find", "Int16Array.prototype.find()")}}</dt> - <dd>指定されたテスト関数を満足する要素が見つかった場合、その値を返します。見つからなかった場合は <code>undefined</code> を返します。 {{jsxref("Array.prototype.find()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.findIndex", "Int16Array.prototype.findIndex()")}}</dt> - <dd>指定されたテスト関数を満足する要素が見つかった場合、その添字を返します。見つからなかった場合は <code>-1</code> を返します。 {{jsxref("Array.prototype.findIndex()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.forEach", "Int16Array.prototype.forEach()")}}</dt> - <dd>配列内の各要素に対してある関数を呼び出します。 {{jsxref("Array.prototype.forEach()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.includes", "Int16Array.prototype.includes()")}}</dt> - <dd>型付き配列にある要素が含まれているかどうかを判断し、それに応じて <code>true</code> または <code>false</code> を返します。 {{jsxref("Array.prototype.includes()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.indexOf", "Int16Array.prototype.indexOf()")}}</dt> - <dd>配列内の要素のうち、指定された値と等しい最初の要素の添字を返します。見つからない場合は <code>-1</code> を返します。 {{jsxref("Array.prototype.indexOf()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.join", "Int16Array.prototype.join()")}}</dt> - <dd>すべての配列要素を1つの文字列に結合します。 {{jsxref("Array.prototype.join()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.keys", "Int16Array.prototype.keys()")}}</dt> - <dd>配列内のすべての添字に対するキーを含む新しい<em>配列イテレーター</em>を返します。 {{jsxref("Array.prototype.keys()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.lastIndexOf", "Int16Array.prototype.lastIndexOf()")}}</dt> - <dd>配列内の要素のうち、指定された値と等しい最後の要素の添字を返します。見つからない場合は <code>-1</code> を返します。 {{jsxref("Array.prototype.lastIndexOf()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.map", "Int16Array.prototype.map()")}}</dt> - <dd>この配列のすべての要素を引数として指定された関数を呼び出し、その結果で新しい配列を生成します。 {{jsxref("Array.prototype.map()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.reduce", "Int16Array.prototype.reduce()")}}</dt> - <dd>アキュームレーターと配列の各要素に対して (左から右へ) 関数を適用し、単一の値に縮小します。 {{jsxref("Array.prototype.reduce()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.reduceRight", "Int16Array.prototype.reduceRight()")}}</dt> - <dd>アキュームレーターと配列の各要素に対して (右から左へ) 関数を適用し、単一の値に縮小します。 {{jsxref("Array.prototype.reduceRight()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.reverse", "Int16Array.prototype.reverse()")}}</dt> - <dd>配列要素の順番を反転させます。 — 最初の要素は最後になり、最後の要素は最初になります。 {{jsxref("Array.prototype.reverse()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.set", "Int16Array.prototype.set()")}}</dt> - <dd>指定された配列から複数の入力値を読み込み、型付き配列に格納します。</dd> - <dt>{{jsxref("TypedArray.slice", "Int16Array.prototype.slice()")}}</dt> - <dd>配列の一区間を取り出して新しい配列を返します。 {{jsxref("Array.prototype.slice()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.some", "Int16Array.prototype.some()")}}</dt> - <dd>この配列内で、指定されたテスト関数を満たす要素が1つでもあった場合に <code>true</code> を返します。 {{jsxref("Array.prototype.some()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.sort", "Int16Array.prototype.sort()")}}</dt> - <dd>配列の要素をその場でソートし、その配列を返します。 {{jsxref("Array.prototype.sort()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.subarray", "Int16Array.prototype.subarray()")}}</dt> - <dd>指定された開始位置と終了位置の間にある要素から新しい <code>Int16Array</code> を返します。</dd> - <dt>{{jsxref("TypedArray.values", "Int16Array.prototype.values()")}}</dt> - <dd>配列内の各添字に対する値を含む新しい<em>配列イテレーター</em>を返します。 {{jsxref("Array.prototype.values()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.toLocaleString", "Int16Array.prototype.toLocaleString()")}}</dt> - <dd>配列と要素を表すローカライズされた文字列を返します。 {{jsxref("Array.prototype.toLocaleString()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.toString", "Int16Array.prototype.toString()")}}</dt> - <dd>配列と要素を表す文字列を返します。 {{jsxref("Array.prototype.toString()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.@@iterator", "Int16Array.prototype[@@iterator]()")}}</dt> - <dd>配列内のそれぞれの添字の値を含む新しい<em>配列イテレーター</em>オブジェクトを返します。</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Different_ways_to_create_an_Int16Array" name="Different_ways_to_create_an_Int16Array">Int16Array を生成する様々な方法</h3> - -<pre class="brush: js notranslate">// 長さを指定 -var int16 = new Int16Array(2); -int16[0] = 42; -console.log(int16[0]); // 42 -console.log(int16.length); // 2 -console.log(int16.BYTES_PER_ELEMENT); // 2 - -// 配列から -var arr = new Int16Array([21,31]); -console.log(arr[1]); // 31 - -// 他の型付き配列から -var x = new Int16Array([21, 31]); -var y = new Int16Array(x); -console.log(y[0]); // 21 - -// ArrayBuffer から -var buffer = new ArrayBuffer(8); -var z = new Int16Array(buffer, 0, 4); - -// 反復可能オブジェクトから -var iterable = function*(){ yield* [1,2,3]; }(); -var int16 = new Int16Array(iterable); -// Int16Array[1, 2, 3] -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.Int16Array")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Typed_arrays">JavaScript 型付き配列</a></li> - <li>{{jsxref("ArrayBuffer")}}</li> - <li>{{jsxref("DataView")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/int16array/index.md b/files/ja/web/javascript/reference/global_objects/int16array/index.md new file mode 100644 index 0000000000..aef0e1d4a4 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/int16array/index.md @@ -0,0 +1,146 @@ +--- +title: Int16Array +slug: Web/JavaScript/Reference/Global_Objects/Int16Array +tags: + - クラス + - JavaScript + - TypedArray + - 型付き配列 + - ポリフィル +browser-compat: javascript.builtins.Int16Array +translation_of: Web/JavaScript/Reference/Global_Objects/Int16Array +--- +{{JSRef}} + +**`Int16Array`** は型付き配列で、プラットフォームのバイト順による 2 の補数形式の 16 ビット符号付き整数値の配列を表します。バイト順の制御が必要な場合は、代わりに {{jsxref("DataView")}} を使用してください。中身は `0` で初期化されます。生成されると、配列内の要素はそのオブジェクトのメソッドを使用するか、配列の標準的な添字の構文 (すなわち、ブラケット記法) を使用するかして参照することができます。 + +## コンストラクター + +- {{jsxref("Global_Objects/Int16Array/Int16Array", "Int16Array()")}} + - : 新しい `Int16Array` オブジェクトを生成します。 + +## 静的プロパティ + +- {{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int16Array.BYTES_PER_ELEMENT")}} + - : 要素の大きさを数値で返します。`Int16Array` の場合は `2` です。 +- {{jsxref("TypedArray.name", "Int16Array.name")}} + - : コンストラクター名を文字列値で返します。`Int16Array` の場合、 "Int16Array" です。 + +## 静的メソッド + +- {{jsxref("TypedArray.from", "Int16Array.from()")}} + - : 配列風オブジェクトまたは反復可能オブジェクトから新しい `Int16Array` オブジェクトを生成します。 {{jsxref("Array.from()")}} も参照してください。 +- {{jsxref("TypedArray.of", "Int16Array.of()")}} + - : 可変長引数で新しい `Int16Array` オブジェクトを生成します。{{jsxref("Array.of()")}} も参照してください。 + +## インスタンスプロパティ + +- {{jsxref("TypedArray.prototype.buffer", "Int16Array.prototype.buffer")}} + - : `Int16Array` オブジェクトによって参照される {{jsxref("ArrayBuffer")}} を返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.byteLength", "Int16Array.prototype.byteLength")}} + - : {{jsxref("ArrayBuffer")}} の先頭からの `Int16Array` の長さを (バイト単位で) 返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.byteOffset", "Int16Array.prototype.byteOffset")}} + - : {{jsxref("ArrayBuffer")}} の先頭からの `Int16Array` のオフセットを (バイト単位で) 返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.length", "Int16Array.prototype.length")}} + - : `Int16Array` オブジェクト内に保持されている要素の数を返します。構築時に固定され、**読み取り専用**です。 + +## インスタンスメソッド + +- {{jsxref("TypedArray.copyWithin", "Int16Array.prototype.copyWithin()")}} + - : 配列内で一連の配列要素をコピーします。{{jsxref("Array.prototype.copyWithin()")}} も参照してください。 +- {{jsxref("TypedArray.entries", "Int16Array.prototype.entries()")}} + - : 配列内ですべての位置におけるキーと値の組を提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.entries()")}} も参照してください。 +- {{jsxref("TypedArray.every", "Int16Array.prototype.every()")}} + - : 配列内のすべての要素が関数によって提供されたテストに合格するかどうかテストを実行します。{{jsxref("Array.prototype.every()")}} も参照してください。 +- {{jsxref("TypedArray.fill", "Int16Array.prototype.fill()")}} + - : 配列の先頭位置から末尾位置までのすべての要素を固定値に設定します。{{jsxref("Array.prototype.fill()")}} も参照してください。 +- {{jsxref("TypedArray.filter", "Int16Array.prototype.filter()")}} + - : この配列のすべての要素のうち、与えられたフィルタリング関数が `true` を返すものをもつ新しい配列を生成します。{{jsxref("Array.prototype.filter()")}} も参照してください。 +- {{jsxref("TypedArray.find", "Int16Array.prototype.find()")}} + - : 配列内の要素に与えられたテスト関数を満足するものがあったら、見つかった値を返します。見つからなければ `undefined` を返します。{{jsxref("Array.prototype.find()")}} も参照してください。 +- {{jsxref("TypedArray.findIndex", "Int16Array.prototype.findIndex()")}} + - : 配列内の要素に与えられたテスト関数を満足するものがあったら、見つかった位置を返します。見つからなければ `-1` を返します。{{jsxref("Array.prototype.findIndex()")}} も参照してください。 +- {{jsxref("TypedArray.forEach", "Int16Array.prototype.forEach()")}} + - : 配列内のそれぞれの要素について関数を呼び出します。{{jsxref("Array.prototype.forEach()")}} も参照してください。 +- {{jsxref("TypedArray.includes", "Int16Array.prototype.includes()")}} + - : 型付き配列に特定の要素があるかどうかを判断し、それに応じて `true` か `false`を返します。 {{jsxref("Array.prototype.includes()")}} も参照してください。 +- {{jsxref("TypedArray.indexOf", "Int16Array.prototype.indexOf()")}} + - : 指定された値に等しい配列内の要素の最初の (最小の) 位置を返します。見つからなかった場合、 `-1` を返します。{{jsxref("Array.prototype.indexOf()")}} も参照してください。 +- {{jsxref("TypedArray.join", "Int16Array.prototype.join()")}} + - : 配列のすべての要素を 1 つの文字列に結合します。{{jsxref("Array.prototype.join()")}} も参照してください。 +- {{jsxref("TypedArray.keys", "Int16Array.prototype.keys()")}} + - : 配列内ですべての位置におけるキーを提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.keys()")}} も参照してください。 +- {{jsxref("TypedArray.lastIndexOf", "Int16Array.prototype.lastIndexOf()")}} + - : 指定された値に等しい配列内の要素の最後の (最大の) 位置を返します。見つからなかった場合、 `-1` を返します。{{jsxref("Array.prototype.lastIndexOf()")}} も参照してください。 +- {{jsxref("TypedArray.map", "Int16Array.prototype.map()")}} + - : この配列のすべての要素で与えられた関数を呼び出した結果をもつ新しい配列を生成します。{{jsxref("Array.prototype.map()")}} も参照してください。 +- {{jsxref("TypedArray.reduce", "Int16Array.prototype.reduce()")}} + - : アキュムレーターとこの配列のそれぞれの値に対して (左から右へ) 関数を適用し、単一の値に還元します。{{jsxref("Array.prototype.reduce()")}} も参照してください。 +- {{jsxref("TypedArray.reduceRight", "Int16Array.prototype.reduceRight()")}} + - : アキュムレーターとこの配列のそれぞれの値に対して (右から左へ) 関数を適用し、単一の値に還元します。{{jsxref("Array.prototype.reduceRight()")}} も参照してください。 +- {{jsxref("TypedArray.reverse", "Int16Array.prototype.reverse()")}} + - : 配列の要素の順番を反転させます。最初の要素は最後になり、最後の要素は最初になります。{{jsxref("Array.prototype.reverse()")}} も参照してください。 +- {{jsxref("TypedArray.set", "Int16Array.prototype.set()")}} + - : 入力値を指定した配列から読み込み、この型付き配列内に複数の値を格納します。 +- {{jsxref("TypedArray.slice", "Int16Array.prototype.slice()")}} + - : 配列の一部を取り出して新しい配列を返します。{{jsxref("Array.prototype.slice()")}} も参照してください。 +- {{jsxref("TypedArray.some", "Int16Array.prototype.some()")}} + - : この配列の 1 つ以上の要素が与えられたテスト関数を満たした場合に `true` を返します。{{jsxref("Array.prototype.some()")}} も参照してください。 +- {{jsxref("TypedArray.sort", "Int16Array.prototype.sort()")}} + - : 配列の要素をその場で並べ替え、その配列を返します。{{jsxref("Array.prototype.sort()")}} も参照してください。 +- {{jsxref("TypedArray.subarray", "Int16Array.prototype.subarray()")}} + - : 指定された先頭と末尾の要素位置から新しい `Int16Array` を返します。 +- {{jsxref("TypedArray.values", "Int16Array.prototype.values()")}} + - : 配列内ですべての位置における値を提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.values()")}} も参照してください。 +- {{jsxref("TypedArray.toLocaleString", "Int16Array.prototype.toLocaleString()")}} + - : 配列とその要素を表すローカライズされた文字列を返します。{{jsxref("Array.prototype.toLocaleString()")}} も参照してください。 +- {{jsxref("TypedArray.toString", "Int16Array.prototype.toString()")}} + - : 配列とその要素を表す文字列を返します。{{jsxref("Array.prototype.toString()")}} も参照してください。 +- {{jsxref("TypedArray.@@iterator", "Int16Array.prototype[@@iterator]()")}} + - : 配列内ですべての位置における値を提供する新しい*配列イテレーター*を返します。 + +## 例 + +### 様々な方法で `Int16Array` を作成 + +```js +// 長さから +var int16 = new Int16Array(2); +int16[0] = 42; +console.log(int16[0]); // 42 +console.log(int16.length); // 2 +console.log(int16.BYTES_PER_ELEMENT); // 2 + +// 配列から +var arr = new Int16Array([21,31]); +console.log(arr[1]); // 31 + +// From another TypedArray +var x = new Int16Array([21, 31]); +var y = new Int16Array(x); +console.log(y[0]); // 21 + +// ArrayBuffer から +var buffer = new ArrayBuffer(8); +var z = new Int16Array(buffer, 0, 4); + +// 反復可能オブジェクトから +var iterable = function*(){ yield* [1,2,3]; }(); +var int16 = new Int16Array(iterable); +// Int16Array[1, 2, 3] +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- `Int16Array` のポリフィルが [`core-js`](https://github.com/zloirock/core-js#ecmascript-typed-arrays) で利用できます +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- {{jsxref("ArrayBuffer")}} +- {{jsxref("DataView")}} diff --git a/files/ja/web/javascript/reference/global_objects/int32array/index.html b/files/ja/web/javascript/reference/global_objects/int32array/index.html deleted file mode 100644 index 9067b433dc..0000000000 --- a/files/ja/web/javascript/reference/global_objects/int32array/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: Int32Array -slug: Web/JavaScript/Reference/Global_Objects/Int32Array -tags: - - Class - - JavaScript - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/Int32Array ---- -<div>{{JSRef}}</div> - -<p><strong><code>Int32Array</code></strong> は型付き配列であり、プラットフォームのバイト順による 2 の補数形式の 32 ビット符号付き整数値の配列を表します。バイト順の制御が必要な場合は、代わりに {{jsxref("DataView")}} を使用してください。中身は <code>0</code> で初期化されます。生成されると、配列の中の要素はオブジェクトのメソッドを使用するか、配列の標準的な添字の構文を使用するか (すなわち、ブラケット構文を使用するか) して参照することができます。</p> - -<h2 id="Constructor" name="Constructor">コンストラクター</h2> - -<dl> - <dt>{{jsxref("Global_Objects/Int32Array/Int32Array", "Int32Array()")}}</dt> - <dd>新しい <code>Int32Array</code> オブジェクトを生成します。</dd> -</dl> - -<h2 id="Static_properties" name="Static_properties">静的プロパティ</h2> - -<dl> - <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int32Array.BYTES_PER_ELEMENT")}}</dt> - <dd>要素の大きさの数値を返します。 <code>Int32Array</code> の場合は <code>4</code> になります。</dd> - <dt>{{jsxref("TypedArray.name", "Int32Array.name")}}</dt> - <dd>コンストラクターの名前を文字列値で返します。 <code>Int32Array</code> 型の場合は "<code>Int32Array</code>" です。</dd> -</dl> - -<h2 id="Static_methods" name="Static_methods">静的メソッド</h2> - -<dl> - <dt>{{jsxref("TypedArray.from", "Int32Array.from()")}}</dt> - <dd>新しい <code>Int32Array</code> を、配列風オブジェクトや反復可能オブジェクトから生成します。 {{jsxref("Array.from()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.of", "Int32Array.of()")}}</dt> - <dd>新しい <code>Int32Array</code> を、可変長引数で生成します。 {{jsxref("Array.of()")}} も参照してください。</dd> -</dl> - -<h2 id="Instance_properties" name="Instance_properties">インスタンスプロパティ</h2> - -<dl> - <dt>{{jsxref("TypedArray.prototype.buffer", "Int32Array.prototype.buffer")}}</dt> - <dd><code>Int32Array</code> オブジェクトによって参照される {{jsxref("ArrayBuffer")}} を返します。構築時に設定され、<strong>読取専用</strong>です。</dd> - <dt>{{jsxref("TypedArray.prototype.byteLength", "Int32Array.prototype.byteLength")}}</dt> - <dd><code>Int32Array</code> の長さを、 {{jsxref("ArrayBuffer")}} の先頭からのバイト単位で返します。構築時に設定され、<strong>読取専用</strong>です。</dd> - <dt>{{jsxref("TypedArray.prototype.byteOffset", "Int32Array.prototype.byteOffset")}}</dt> - <dd><code>Int32Array</code> のオフセットを、 {{jsxref("ArrayBuffer")}} の先頭からのバイト単位で返します。構築時に設定され、<strong>読取専用</strong>です。</dd> - <dt>{{jsxref("TypedArray.prototype.length", "Int32Array.prototype.length")}}</dt> - <dd><code>Int32Array</code> オブジェクト内に保持されている要素の数を返します。構築時に設定され、<strong>読取専用</strong>です。</dd> -</dl> - -<h2 id="Instance_methods" name="Instance_methods">インスタンスメソッド</h2> - -<dl> - <dt>{{jsxref("TypedArray.copyWithin", "Int32Array.prototype.copyWithin()")}}</dt> - <dd>配列内で一連の配列要素をコピーします。 {{jsxref("Array.prototype.copyWithin()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.entries", "Int32Array.prototype.entries()")}}</dt> - <dd>配列内の各添字に対するキーと値の組を含む、新しい<em>配列イテレーター</em>を返します。 {{jsxref("Array.prototype.entries()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.every", "Int32Array.prototype.every()")}}</dt> - <dd>配列内のすべての要素に対して、指定された関数によるテストに合格するかどうかをテストします。 {{jsxref("Array.prototype.every()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.fill", "Int32Array.prototype.fill()")}}</dt> - <dd>配列の先頭から末尾までのすべての要素を固定値で設定します。 {{jsxref("Array.prototype.fill()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.filter", "Int32Array.prototype.filter()")}}</dt> - <dd>この配列のすべての要素のうち、指定されたフィルタリング関数が与えられたフィルタリング関数が <code>true</code> を返すすべての要素で、新しい配列を生成します。 {{jsxref("Array.prototype.filter()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.find", "Int32Array.prototype.find()")}}</dt> - <dd>指定されたテスト関数を満足する要素が見つかった場合、その値を返します。見つからなかった場合は <code>undefined</code> を返します。 {{jsxref("Array.prototype.find()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.findIndex", "Int32Array.prototype.findIndex()")}}</dt> - <dd>指定されたテスト関数を満足する要素が見つかった場合、その添字を返します。見つからなかった場合は <code>-1</code> を返します。 {{jsxref("Array.prototype.findIndex()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.forEach", "Int32Array.prototype.forEach()")}}</dt> - <dd>配列内の各要素に対してある関数を呼び出します。 {{jsxref("Array.prototype.forEach()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.includes", "Int32Array.prototype.includes()")}}</dt> - <dd>型付き配列にある要素が含まれているかどうかを判断し、それに応じて <code>true</code> または <code>false</code> を返します。 {{jsxref("Array.prototype.includes()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.indexOf", "Int32Array.prototype.indexOf()")}}</dt> - <dd>配列内の要素のうち、指定された値と等しい最初の要素の添字を返します。見つからない場合は <code>-1</code> を返します。 {{jsxref("Array.prototype.indexOf()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.join", "Int32Array.prototype.join()")}}</dt> - <dd>すべての配列要素を1つの文字列に結合します。 {{jsxref("Array.prototype.join()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.keys", "Int32Array.prototype.keys()")}}</dt> - <dd>配列内のすべての添字に対するキーを含む新しい<em>配列イテレーター</em>を返します。 {{jsxref("Array.prototype.keys()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.lastIndexOf", "Int32Array.prototype.lastIndexOf()")}}</dt> - <dd>配列内の要素のうち、指定された値と等しい最後の要素の添字を返します。見つからない場合は <code>-1</code> を返します。 {{jsxref("Array.prototype.lastIndexOf()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.map", "Int32Array.prototype.map()")}}</dt> - <dd>この配列のすべての要素を引数として指定された関数を呼び出し、その結果で新しい配列を生成します。 {{jsxref("Array.prototype.map()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.reduce", "Int32Array.prototype.reduce()")}}</dt> - <dd>アキュームレーターと配列の各要素に対して (左から右へ) 関数を適用し、単一の値に縮小します。 {{jsxref("Array.prototype.reduce()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.reduceRight", "Int32Array.prototype.reduceRight()")}}</dt> - <dd>アキュームレーターと配列の各要素に対して (右から左へ) 関数を適用し、単一の値に縮小します。 {{jsxref("Array.prototype.reduceRight()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.reverse", "Int32Array.prototype.reverse()")}}</dt> - <dd>配列要素の順番を反転させます。 — 最初の要素は最後になり、最後の要素は最初になります。 {{jsxref("Array.prototype.reverse()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.set", "Int32Array.prototype.set()")}}</dt> - <dd>指定された配列から複数の入力値を読み込み、型付き配列に格納します。</dd> - <dt>{{jsxref("TypedArray.slice", "Int32Array.prototype.slice()")}}</dt> - <dd>配列の一区間を取り出して新しい配列を返します。 {{jsxref("Array.prototype.slice()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.some", "Int32Array.prototype.some()")}}</dt> - <dd>この配列内で、指定されたテスト関数を満たす要素が1つでもあった場合に <code>true</code> を返します。 {{jsxref("Array.prototype.some()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.sort", "Int32Array.prototype.sort()")}}</dt> - <dd>配列の要素をその場でソートし、その配列を返します。 {{jsxref("Array.prototype.sort()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.subarray", "Int32Array.prototype.subarray()")}}</dt> - <dd>指定された開始位置と終了位置の間にある要素から新しい <code>Int32Array</code> を返します。</dd> - <dt>{{jsxref("TypedArray.values", "Int32Array.prototype.values()")}}</dt> - <dd>配列内の各添字に対する値を含む新しい<em>配列イテレーター</em>を返します。 {{jsxref("Array.prototype.values()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.toLocaleString", "Int32Array.prototype.toLocaleString()")}}</dt> - <dd>配列と要素を表すローカライズされた文字列を返します。 {{jsxref("Array.prototype.toLocaleString()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.toString", "Int32Array.prototype.toString()")}}</dt> - <dd>配列と要素を表す文字列を返します。 {{jsxref("Array.prototype.toString()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.@@iterator", "Int32Array.prototype[@@iterator]()")}}</dt> - <dd>配列内のそれぞれの添字の値を含む新しい<em>配列イテレーター</em>オブジェクトを返します。</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Different_ways_to_create_an_Int32Array" name="Different_ways_to_create_an_Int32Array">Int32Array を生成する様々な方法</h3> - -<pre class="brush: js notranslate">// 長さを指定 -var int16 = new Int32Array(2); -int16[0] = 42; -console.log(int16[0]); // 42 -console.log(int16.length); // 2 -console.log(int16.BYTES_PER_ELEMENT); // 2 - -// 配列から -var arr = new Int32Array([21,31]); -console.log(arr[1]); // 31 - -// 他の型付き配列から -var x = new Int32Array([21, 31]); -var y = new Int32Array(x); -console.log(y[0]); // 21 - -// ArrayBuffer から -var buffer = new ArrayBuffer(16); -var z = new Int32Array(buffer, 0, 4); - -// 反復可能オブジェクトから -var iterable = function*(){ yield* [1,2,3]; }(); -var int32 = new Int32Array(iterable); -// Int32Array[1, 2, 3] -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.Int32Array")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Typed_arrays">JavaScript 型付き配列</a></li> - <li>{{jsxref("ArrayBuffer")}}</li> - <li>{{jsxref("DataView")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/int32array/index.md b/files/ja/web/javascript/reference/global_objects/int32array/index.md new file mode 100644 index 0000000000..2bbcb90905 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/int32array/index.md @@ -0,0 +1,146 @@ +--- +title: Int32Array +slug: Web/JavaScript/Reference/Global_Objects/Int32Array +tags: + - クラス + - JavaScript + - TypedArray + - 型付き配列 + - ポリフィル +browser-compat: javascript.builtins.Int32Array +translation_of: Web/JavaScript/Reference/Global_Objects/Int32Array +--- +{{JSRef}} + +**`Int32Array`** は型付き配列で、プラットフォームのバイト順による 2 の補数形式の 16 ビット符号付き整数値の配列を表します。バイト順の制御が必要な場合は、代わりに {{jsxref("DataView")}} を使用してください。中身は `0` で初期化されます。生成されると、配列内の要素はそのオブジェクトのメソッドを使用するか、配列の標準的な添字の構文 (すなわち、ブラケット記法) を使用するかして参照することができます。 + +## コンストラクター + +- {{jsxref("Global_Objects/Int32Array/Int32Array", "Int32Array()")}} + - : 新しい `Int32Array` オブジェクトを生成します。 + +## 静的プロパティ + +- {{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int32Array.BYTES_PER_ELEMENT")}} + - : 要素の大きさを数値で返します。`Int32Array` の場合は `4` です。 +- {{jsxref("TypedArray.name", "Int32Array.name")}} + - : コンストラクター名を文字列値で返します。`Int32Array` の場合、 "`Int32Array`" です。 + +## 静的メソッド + +- {{jsxref("TypedArray.from", "Int32Array.from()")}} + - : 配列風オブジェクトまたは反復可能オブジェクトから新しい `Int32Array` オブジェクトを生成します。 {{jsxref("Array.from()")}} も参照してください。 +- {{jsxref("TypedArray.of", "Int32Array.of()")}} + - : 可変長引数で新しい `Int32Array` オブジェクトを生成します。{{jsxref("Array.of()")}} も参照してください。 + +## インスタンスプロパティ + +- {{jsxref("TypedArray.prototype.buffer", "Int32Array.prototype.buffer")}} + - : `Int32Array` オブジェクトによって参照される {{jsxref("ArrayBuffer")}} を返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.byteLength", "Int32Array.prototype.byteLength")}} + - : {{jsxref("ArrayBuffer")}} の先頭からの `Int32Array` の長さを (バイト単位で) 返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.byteOffset", "Int32Array.prototype.byteOffset")}} + - : {{jsxref("ArrayBuffer")}} の先頭からの `Int32Array` のオフセットを (バイト単位で) 返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.length", "Int32Array.prototype.length")}} + - : `Int32Array` オブジェクト内に保持されている要素の数を返します。構築時に固定され、**読み取り専用**です。 + +## インスタンスメソッド + +- {{jsxref("TypedArray.copyWithin", "Int32Array.prototype.copyWithin()")}} + - : 配列内で一連の配列要素をコピーします。{{jsxref("Array.prototype.copyWithin()")}} も参照してください。 +- {{jsxref("TypedArray.entries", "Int32Array.prototype.entries()")}} + - : 配列内ですべての位置におけるキーと値の組を提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.entries()")}} も参照してください。 +- {{jsxref("TypedArray.every", "Int32Array.prototype.every()")}} + - : 配列内のすべての要素が関数によって提供されたテストに合格するかどうかテストを実行します。{{jsxref("Array.prototype.every()")}} も参照してください。 +- {{jsxref("TypedArray.fill", "Int32Array.prototype.fill()")}} + - : 配列の先頭位置から末尾位置までのすべての要素を固定値に設定します。{{jsxref("Array.prototype.fill()")}} も参照してください。 +- {{jsxref("TypedArray.filter", "Int32Array.prototype.filter()")}} + - : この配列のすべての要素のうち、与えられたフィルタリング関数が `true` を返すものをもつ新しい配列を生成します。{{jsxref("Array.prototype.filter()")}} も参照してください。 +- {{jsxref("TypedArray.find", "Int32Array.prototype.find()")}} + - : 配列内の要素に与えられたテスト関数を満足するものがあったら、見つかった値を返します。見つからなければ `undefined` を返します。{{jsxref("Array.prototype.find()")}} も参照してください。 +- {{jsxref("TypedArray.findIndex", "Int32Array.prototype.findIndex()")}} + - : 配列内の要素に与えられたテスト関数を満足するものがあったら、見つかった位置を返します。見つからなければ `-1` を返します。{{jsxref("Array.prototype.findIndex()")}} も参照してください。 +- {{jsxref("TypedArray.forEach", "Int32Array.prototype.forEach()")}} + - : 配列内のそれぞれの要素について関数を呼び出します。{{jsxref("Array.prototype.forEach()")}} も参照してください。 +- {{jsxref("TypedArray.includes", "Int32Array.prototype.includes()")}} + - : 型付き配列に特定の要素があるかどうかを判断し、それに応じて `true` か `false`を返します。 {{jsxref("Array.prototype.includes()")}} も参照してください。 +- {{jsxref("TypedArray.indexOf", "Int32Array.prototype.indexOf()")}} + - : 指定された値に等しい配列内の要素の最初の (最小の) 位置を返します。見つからなかった場合、 `-1` を返します。{{jsxref("Array.prototype.indexOf()")}} も参照してください。 +- {{jsxref("TypedArray.join", "Int32Array.prototype.join()")}} + - : 配列のすべての要素を 1 つの文字列に結合します。{{jsxref("Array.prototype.join()")}} も参照してください。 +- {{jsxref("TypedArray.keys", "Int32Array.prototype.keys()")}} + - : 配列内ですべての位置におけるキーを提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.keys()")}} も参照してください。 +- {{jsxref("TypedArray.lastIndexOf", "Int32Array.prototype.lastIndexOf()")}} + - : 指定された値に等しい配列内の要素の最後の (最大の) 位置を返します。見つからなかった場合、 `-1` を返します。{{jsxref("Array.prototype.lastIndexOf()")}} も参照してください。 +- {{jsxref("TypedArray.map", "Int32Array.prototype.map()")}} + - : この配列のすべての要素で与えられた関数を呼び出した結果をもつ新しい配列を生成します。{{jsxref("Array.prototype.map()")}} も参照してください。 +- {{jsxref("TypedArray.reduce", "Int32Array.prototype.reduce()")}} + - : アキュムレーターとこの配列のそれぞれの値に対して (左から右へ) 関数を適用し、単一の値に還元します。{{jsxref("Array.prototype.reduce()")}} も参照してください。 +- {{jsxref("TypedArray.reduceRight", "Int32Array.prototype.reduceRight()")}} + - : アキュムレーターとこの配列のそれぞれの値に対して (右から左へ) 関数を適用し、単一の値に還元します。{{jsxref("Array.prototype.reduceRight()")}} も参照してください。 +- {{jsxref("TypedArray.reverse", "Int32Array.prototype.reverse()")}} + - : 配列の要素の順番を反転させます。最初の要素は最後になり、最後の要素は最初になります。{{jsxref("Array.prototype.reverse()")}} も参照してください。 +- {{jsxref("TypedArray.set", "Int32Array.prototype.set()")}} + - : 入力値を指定した配列から読み込み、この型付き配列内に複数の値を格納します。 +- {{jsxref("TypedArray.slice", "Int32Array.prototype.slice()")}} + - : 配列の一部を取り出して新しい配列を返します。{{jsxref("Array.prototype.slice()")}} も参照してください。 +- {{jsxref("TypedArray.some", "Int32Array.prototype.some()")}} + - : この配列の 1 つ以上の要素が与えられたテスト関数を満たした場合に `true` を返します。{{jsxref("Array.prototype.some()")}} も参照してください。 +- {{jsxref("TypedArray.sort", "Int32Array.prototype.sort()")}} + - : 配列の要素をその場で並べ替え、その配列を返します。{{jsxref("Array.prototype.sort()")}} も参照してください。 +- {{jsxref("TypedArray.subarray", "Int32Array.prototype.subarray()")}} + - : 指定された先頭と末尾の要素位置から新しい `Int32Array` を返します。 +- {{jsxref("TypedArray.values", "Int32Array.prototype.values()")}} + - : 配列内ですべての位置における値を提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.values()")}} も参照してください。 +- {{jsxref("TypedArray.toLocaleString", "Int32Array.prototype.toLocaleString()")}} + - : 配列とその要素を表すローカライズされた文字列を返します。{{jsxref("Array.prototype.toLocaleString()")}} も参照してください。 +- {{jsxref("TypedArray.toString", "Int32Array.prototype.toString()")}} + - : 配列とその要素を表す文字列を返します。{{jsxref("Array.prototype.toString()")}} も参照してください。 +- {{jsxref("TypedArray.@@iterator", "Int32Array.prototype[@@iterator]()")}} + - : 配列内ですべての位置における値を提供する新しい*配列イテレーター*を返します。 + +## 例 + +### 様々な方法で `Int32Array` を作成 + +```js +// 長さから +var int16 = new Int32Array(2); +int16[0] = 42; +console.log(int16[0]); // 42 +console.log(int16.length); // 2 +console.log(int16.BYTES_PER_ELEMENT); // 4 + +// 配列から +var arr = new Int32Array([21,31]); +console.log(arr[1]); // 31 + +// From another TypedArray +var x = new Int32Array([21, 31]); +var y = new Int32Array(x); +console.log(y[0]); // 21 + +// ArrayBuffer から +var buffer = new ArrayBuffer(16); +var z = new Int32Array(buffer, 0, 4); + +// 反復可能オブジェクトから +var iterable = function*(){ yield* [1,2,3]; }(); +var int16 = new Int32Array(iterable); +// Int32Array[1, 2, 3] +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- `Int32Array` のポリフィルが [`core-js`](https://github.com/zloirock/core-js#ecmascript-typed-arrays) で利用できます +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- {{jsxref("ArrayBuffer")}} +- {{jsxref("DataView")}} diff --git a/files/ja/web/javascript/reference/global_objects/int8array/index.html b/files/ja/web/javascript/reference/global_objects/int8array/index.html deleted file mode 100644 index 2f44432587..0000000000 --- a/files/ja/web/javascript/reference/global_objects/int8array/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: Int8Array -slug: Web/JavaScript/Reference/Global_Objects/Int8Array -tags: - - Class - - Int8Array - - JavaScript - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/Int8Array ---- -<div>{{JSRef}}</div> - -<p><strong><code>Int8Array</code></strong> は型付き配列であり、 2 の補数形式の 8 ビット符号付き整数値の配列を表します。中身は <code>0</code> で初期化されます。生成されると、配列の中の要素はオブジェクトのメソッドを使用するか、配列の標準的な添字の構文を使用するか (すなわち、ブラケット構文を使用するか) して参照することができます。</p> - -<h2 id="Constructor" name="Constructor">コンストラクター</h2> - -<dl> - <dt>{{jsxref("Global_Objects/Int8Array/Int8Array", "Int8Array()")}}</dt> - <dd>新しい <code>Int8Array</code> オブジェクトを生成します。</dd> -</dl> - -<h2 id="Static_properties" name="Static_properties">静的プロパティ</h2> - -<dl> - <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int8Array.BYTES_PER_ELEMENT")}}</dt> - <dd>要素の大きさの数値を返します。 <code>Int8Array</code> の場合は <code>1</code> になります。</dd> - <dt>{{jsxref("TypedArray.name", "Int8Array.name")}}</dt> - <dd>コンストラクターの名前を文字列値で返します。 <code>Int8Array</code> 型の場合は "<code>Int8Array</code>" です。</dd> -</dl> - -<h2 id="Static_methods" name="Static_methods">静的メソッド</h2> - -<dl> - <dt>{{jsxref("TypedArray.from", "Int8Array.from()")}}</dt> - <dd>新しい <code>Int8Array</code> を、配列風オブジェクトや反復可能オブジェクトから生成します。 {{jsxref("Array.from()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.of", "Int8Array.of()")}}</dt> - <dd>新しい <code>Int8Array</code> を、可変長引数で生成します。 {{jsxref("Array.of()")}} も参照してください。</dd> -</dl> - -<h2 id="Instance_properties" name="Instance_properties">インスタンスプロパティ</h2> - -<dl> - <dt>{{jsxref("TypedArray.prototype.buffer", "Int8Array.prototype.buffer")}}</dt> - <dd><code>Int8Array</code> オブジェクトによって参照される {{jsxref("ArrayBuffer")}} を返します。構築時に設定され、<strong>読取専用</strong>です。</dd> - <dt>{{jsxref("TypedArray.prototype.byteLength", "Int8Array.prototype.byteLength")}}</dt> - <dd><code>Int8Array</code> の長さを、 {{jsxref("ArrayBuffer")}} の先頭からのバイト単位で返します。構築時に設定され、<strong>読取専用</strong>です。</dd> - <dt>{{jsxref("TypedArray.prototype.byteOffset", "Int8Array.prototype.byteOffset")}}</dt> - <dd><code>Int8Array</code> のオフセットを、 {{jsxref("ArrayBuffer")}} の先頭からのバイト単位で返します。構築時に設定され、<strong>読取専用</strong>です。</dd> - <dt>{{jsxref("TypedArray.prototype.length", "Int8Array.prototype.length")}}</dt> - <dd><code>Int8Array</code> オブジェクト内に保持されている要素の数を返します。構築時に設定され、<strong>読取専用</strong>です。</dd> -</dl> - -<h2 id="Instance_methods" name="Instance_methods">インスタンスメソッド</h2> - -<dl> - <dt>{{jsxref("TypedArray.copyWithin", "Int8Array.prototype.copyWithin()")}}</dt> - <dd>配列内で一連の配列要素をコピーします。 {{jsxref("Array.prototype.copyWithin()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.entries", "Int8Array.prototype.entries()")}}</dt> - <dd>配列内の各添字に対するキーと値の組を含む、新しい<em>配列イテレーター</em>を返します。 {{jsxref("Array.prototype.entries()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.every", "Int8Array.prototype.every()")}}</dt> - <dd>配列内のすべての要素に対して、指定された関数によるテストに合格するかどうかをテストします。 {{jsxref("Array.prototype.every()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.fill", "Int8Array.prototype.fill()")}}</dt> - <dd>配列の先頭から末尾までのすべての要素を固定値で設定します。 {{jsxref("Array.prototype.fill()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.filter", "Int8Array.prototype.filter()")}}</dt> - <dd>この配列のすべての要素のうち、指定されたフィルタリング関数が与えられたフィルタリング関数が <code>true</code> を返すすべての要素で、新しい配列を生成します。 {{jsxref("Array.prototype.filter()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.find", "Int8Array.prototype.find()")}}</dt> - <dd>指定されたテスト関数を満足する要素が見つかった場合、その値を返します。見つからなかった場合は <code>undefined</code> を返します。 {{jsxref("Array.prototype.find()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.findIndex", "Int8Array.prototype.findIndex()")}}</dt> - <dd>指定されたテスト関数を満足する要素が見つかった場合、その添字を返します。見つからなかった場合は <code>-1</code> を返します。 {{jsxref("Array.prototype.findIndex()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.forEach", "Int8Array.prototype.forEach()")}}</dt> - <dd>配列内の各要素に対してある関数を呼び出します。 {{jsxref("Array.prototype.forEach()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.includes", "Int8Array.prototype.includes()")}}</dt> - <dd>型付き配列にある要素が含まれているかどうかを判断し、それに応じて <code>true</code> または <code>false</code> を返します。 {{jsxref("Array.prototype.includes()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.indexOf", "Int8Array.prototype.indexOf()")}}</dt> - <dd>配列内の要素のうち、指定された値と等しい最初の要素の添字を返します。見つからない場合は <code>-1</code> を返します。 {{jsxref("Array.prototype.indexOf()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.join", "Int8Array.prototype.join()")}}</dt> - <dd>すべての配列要素を1つの文字列に結合します。 {{jsxref("Array.prototype.join()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.keys", "Int8Array.prototype.keys()")}}</dt> - <dd>配列内のすべての添字に対するキーを含む新しい<em>配列イテレーター</em>を返します。 {{jsxref("Array.prototype.keys()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.lastIndexOf", "Int8Array.prototype.lastIndexOf()")}}</dt> - <dd>配列内の要素のうち、指定された値と等しい最後の要素の添字を返します。見つからない場合は <code>-1</code> を返します。 {{jsxref("Array.prototype.lastIndexOf()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.map", "Int8Array.prototype.map()")}}</dt> - <dd>この配列のすべての要素を引数として指定された関数を呼び出し、その結果で新しい配列を生成します。 {{jsxref("Array.prototype.map()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.reduce", "Int8Array.prototype.reduce()")}}</dt> - <dd>アキュームレーターと配列の各要素に対して (左から右へ) 関数を適用し、単一の値に縮小します。 {{jsxref("Array.prototype.reduce()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.reduceRight", "Int8Array.prototype.reduceRight()")}}</dt> - <dd>アキュームレーターと配列の各要素に対して (右から左へ) 関数を適用し、単一の値に縮小します。 {{jsxref("Array.prototype.reduceRight()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.reverse", "Int8Array.prototype.reverse()")}}</dt> - <dd>配列要素の順番を反転させます。 — 最初の要素は最後になり、最後の要素は最初になります。 {{jsxref("Array.prototype.reverse()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.set", "Int8Array.prototype.set()")}}</dt> - <dd>指定された配列から複数の入力値を読み込み、型付き配列に格納します。</dd> - <dt>{{jsxref("TypedArray.slice", "Int8Array.prototype.slice()")}}</dt> - <dd>配列の一区間を取り出して新しい配列を返します。 {{jsxref("Array.prototype.slice()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.some", "Int8Array.prototype.some()")}}</dt> - <dd>この配列内で、指定されたテスト関数を満たす要素が1つでもあった場合に <code>true</code> を返します。 {{jsxref("Array.prototype.some()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.sort", "Int8Array.prototype.sort()")}}</dt> - <dd>配列の要素をその場でソートし、その配列を返します。 {{jsxref("Array.prototype.sort()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.subarray", "Int8Array.prototype.subarray()")}}</dt> - <dd>指定された開始位置と終了位置の間にある要素から新しい <code>Int8Array</code> を返します。</dd> - <dt>{{jsxref("TypedArray.values", "Int8Array.prototype.values()")}}</dt> - <dd>配列内の各添字に対する値を含む新しい<em>配列イテレーター</em>を返します。 {{jsxref("Array.prototype.values()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.toLocaleString", "Int8Array.prototype.toLocaleString()")}}</dt> - <dd>配列と要素を表すローカライズされた文字列を返します。 {{jsxref("Array.prototype.toLocaleString()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.toString", "Int8Array.prototype.toString()")}}</dt> - <dd>配列と要素を表す文字列を返します。 {{jsxref("Array.prototype.toString()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.@@iterator", "Int8Array.prototype[@@iterator]()")}}</dt> - <dd>配列内のそれぞれの添字の値を含む新しい<em>配列イテレーター</em>オブジェクトを返します。</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Different_ways_to_create_an_Int8Array" name="Different_ways_to_create_an_Int8Array">Int8Array を生成する様々な方法</h3> - -<pre class="brush: js notranslate">// 長さを指定 -var int8 = new Int8Array(2); -int8[0] = 42; -console.log(int8[0]); // 42 -console.log(int8.length); // 2 -console.log(int8.BYTES_PER_ELEMENT); // 1 - -// 配列から -var arr = new Int8Array([21,31]); -console.log(arr[1]); // 31 - -// 他の型付き配列から -var x = new Int8Array([21, 31]); -var y = new Int8Array(x); -console.log(y[0]); // 21 - -// ArrayBuffer から -var buffer = new ArrayBuffer(8); -var z = new Int8Array(buffer, 1, 4); - -// 反復可能オブジェクトから -var iterable = function*(){ yield* [1,2,3]; }(); -var int8 = new Int8Array(iterable); -// Int8Array[1, 2, 3] -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.Int8Array")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Typed_arrays">JavaScript 型付き配列</a></li> - <li>{{jsxref("ArrayBuffer")}}</li> - <li>{{jsxref("DataView")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/int8array/index.md b/files/ja/web/javascript/reference/global_objects/int8array/index.md new file mode 100644 index 0000000000..d02659a9d8 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/int8array/index.md @@ -0,0 +1,147 @@ +--- +title: Int8Array +slug: Web/JavaScript/Reference/Global_Objects/Int8Array +tags: + - クラス + - Int8Array + - JavaScript + - TypedArray + - 型付き配列 + - ポリフィル +browser-compat: javascript.builtins.Int8Array +translation_of: Web/JavaScript/Reference/Global_Objects/Int8Array +--- +{{JSRef}} + +**`Int8Array`** は型付き配列で、 2 の補数形式の 8 ビット符号付き整数値の配列を表します。中身は `0` で初期化されます。生成されると、配列内の要素はそのオブジェクトのメソッドを使用するか、配列の標準的な添字の構文 (すなわち、ブラケット記法) を使用するかして参照することができます。 + +## コンストラクター + +- {{jsxref("Global_Objects/Int8Array/Int8Array", "Int8Array()")}} + - : 新しい `Int8Array` オブジェクトを生成します。 + +## 静的プロパティ + +- {{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int8Array.BYTES_PER_ELEMENT")}} + - : 要素の大きさを数値で返します。`Int8Array` の場合は `1` です。 +- {{jsxref("TypedArray.name", "Int8Array.name")}} + - : コンストラクター名を文字列値で返します。`Int8Array` の場合、 "Int8Array" です。 + +## 静的メソッド + +- {{jsxref("TypedArray.from", "Int8Array.from()")}} + - : 配列風オブジェクトまたは反復可能オブジェクトから新しい `Int8Array` オブジェクトを生成します。 {{jsxref("Array.from()")}} も参照してください。 +- {{jsxref("TypedArray.of", "Int8Array.of()")}} + - : 可変長引数で新しい `Int8Array` オブジェクトを生成します。{{jsxref("Array.of()")}} も参照してください。 + +## インスタンスプロパティ + +- {{jsxref("TypedArray.prototype.buffer", "Int8Array.prototype.buffer")}} + - : `Int8Array` オブジェクトによって参照される {{jsxref("ArrayBuffer")}} を返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.byteLength", "Int8Array.prototype.byteLength")}} + - : {{jsxref("ArrayBuffer")}} の先頭からの `Int8Array` の長さを (バイト単位で) 返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.byteOffset", "Int8Array.prototype.byteOffset")}} + - : {{jsxref("ArrayBuffer")}} の先頭からの `Int8Array` のオフセットを (バイト単位で) 返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.length", "Int8Array.prototype.length")}} + - : `Int8Array` オブジェクト内に保持されている要素の数を返します。構築時に固定され、**読み取り専用**です。 + +## インスタンスメソッド + +- {{jsxref("TypedArray.copyWithin", "Int8Array.prototype.copyWithin()")}} + - : 配列内で一連の配列要素をコピーします。{{jsxref("Array.prototype.copyWithin()")}} も参照してください。 +- {{jsxref("TypedArray.entries", "Int8Array.prototype.entries()")}} + - : 配列内ですべての位置におけるキーと値の組を提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.entries()")}} も参照してください。 +- {{jsxref("TypedArray.every", "Int8Array.prototype.every()")}} + - : 配列内のすべての要素が関数によって提供されたテストに合格するかどうかテストを実行します。{{jsxref("Array.prototype.every()")}} も参照してください。 +- {{jsxref("TypedArray.fill", "Int8Array.prototype.fill()")}} + - : 配列の先頭位置から末尾位置までのすべての要素を固定値に設定します。{{jsxref("Array.prototype.fill()")}} も参照してください。 +- {{jsxref("TypedArray.filter", "Int8Array.prototype.filter()")}} + - : この配列のすべての要素のうち、与えられたフィルタリング関数が `true` を返すものをもつ新しい配列を生成します。{{jsxref("Array.prototype.filter()")}} も参照してください。 +- {{jsxref("TypedArray.find", "Int8Array.prototype.find()")}} + - : 配列内の要素に与えられたテスト関数を満足するものがあったら、見つかった値を返します。見つからなければ `undefined` を返します。{{jsxref("Array.prototype.find()")}} も参照してください。 +- {{jsxref("TypedArray.findIndex", "Int8Array.prototype.findIndex()")}} + - : 配列内の要素に与えられたテスト関数を満足するものがあったら、見つかった位置を返します。見つからなければ `-1` を返します。{{jsxref("Array.prototype.findIndex()")}} も参照してください。 +- {{jsxref("TypedArray.forEach", "Int8Array.prototype.forEach()")}} + - : 配列内のそれぞれの要素について関数を呼び出します。{{jsxref("Array.prototype.forEach()")}} も参照してください。 +- {{jsxref("TypedArray.includes", "Int8Array.prototype.includes()")}} + - : 型付き配列に特定の要素があるかどうかを判断し、それに応じて `true` か `false`を返します。 {{jsxref("Array.prototype.includes()")}} も参照してください。 +- {{jsxref("TypedArray.indexOf", "Int8Array.prototype.indexOf()")}} + - : 指定された値に等しい配列内の要素の最初の (最小の) 位置を返します。見つからなかった場合、 `-1` を返します。{{jsxref("Array.prototype.indexOf()")}} も参照してください。 +- {{jsxref("TypedArray.join", "Int8Array.prototype.join()")}} + - : 配列のすべての要素を 1 つの文字列に結合します。{{jsxref("Array.prototype.join()")}} も参照してください。 +- {{jsxref("TypedArray.keys", "Int8Array.prototype.keys()")}} + - : 配列内ですべての位置におけるキーを提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.keys()")}} も参照してください。 +- {{jsxref("TypedArray.lastIndexOf", "Int8Array.prototype.lastIndexOf()")}} + - : 指定された値に等しい配列内の要素の最後の (最大の) 位置を返します。見つからなかった場合、 `-1` を返します。{{jsxref("Array.prototype.lastIndexOf()")}} も参照してください。 +- {{jsxref("TypedArray.map", "Int8Array.prototype.map()")}} + - : この配列のすべての要素で与えられた関数を呼び出した結果をもつ新しい配列を生成します。{{jsxref("Array.prototype.map()")}} も参照してください。 +- {{jsxref("TypedArray.reduce", "Int8Array.prototype.reduce()")}} + - : アキュムレーターとこの配列のそれぞれの値に対して (左から右へ) 関数を適用し、単一の値に還元します。{{jsxref("Array.prototype.reduce()")}} も参照してください。 +- {{jsxref("TypedArray.reduceRight", "Int8Array.prototype.reduceRight()")}} + - : アキュムレーターとこの配列のそれぞれの値に対して (右から左へ) 関数を適用し、単一の値に還元します。{{jsxref("Array.prototype.reduceRight()")}} も参照してください。 +- {{jsxref("TypedArray.reverse", "Int8Array.prototype.reverse()")}} + - : 配列の要素の順番を反転させます。最初の要素は最後になり、最後の要素は最初になります。{{jsxref("Array.prototype.reverse()")}} も参照してください。 +- {{jsxref("TypedArray.set", "Int8Array.prototype.set()")}} + - : 入力値を指定した配列から読み込み、この型付き配列内に複数の値を格納します。 +- {{jsxref("TypedArray.slice", "Int8Array.prototype.slice()")}} + - : 配列の一部を取り出して新しい配列を返します。{{jsxref("Array.prototype.slice()")}} も参照してください。 +- {{jsxref("TypedArray.some", "Int8Array.prototype.some()")}} + - : この配列の 1 つ以上の要素が与えられたテスト関数を満たした場合に `true` を返します。{{jsxref("Array.prototype.some()")}} も参照してください。 +- {{jsxref("TypedArray.sort", "Int8Array.prototype.sort()")}} + - : 配列の要素をその場で並べ替え、その配列を返します。{{jsxref("Array.prototype.sort()")}} も参照してください。 +- {{jsxref("TypedArray.subarray", "Int8Array.prototype.subarray()")}} + - : 指定された先頭と末尾の要素位置から新しい `Int8Array` を返します。 +- {{jsxref("TypedArray.values", "Int8Array.prototype.values()")}} + - : 配列内ですべての位置における値を提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.values()")}} も参照してください。 +- {{jsxref("TypedArray.toLocaleString", "Int8Array.prototype.toLocaleString()")}} + - : 配列とその要素を表すローカライズされた文字列を返します。{{jsxref("Array.prototype.toLocaleString()")}} も参照してください。 +- {{jsxref("TypedArray.toString", "Int8Array.prototype.toString()")}} + - : 配列とその要素を表す文字列を返します。{{jsxref("Array.prototype.toString()")}} も参照してください。 +- {{jsxref("TypedArray.@@iterator", "Int8Array.prototype[@@iterator]()")}} + - : 配列内ですべての位置における値を提供する新しい*配列イテレーター*を返します。 + +## 例 + +### 様々な方法で `Int8Array` を作成 + +```js +// 長さから +var int8 = new Int8Array(2); +int8[0] = 42; +console.log(int8[0]); // 42 +console.log(int8.length); // 2 +console.log(int8.BYTES_PER_ELEMENT); // 1 + +// 配列から +var arr = new Int8Array([21,31]); +console.log(arr[1]); // 31 + +// From another TypedArray +var x = new Int8Array([21, 31]); +var y = new Int8Array(x); +console.log(y[0]); // 21 + +// ArrayBuffer から +var buffer = new ArrayBuffer(8); +var z = new Int8Array(buffer, 1, 4); + +// 反復可能オブジェクトから +var iterable = function*(){ yield* [1,2,3]; }(); +var int8 = new Int8Array(iterable); +// Int8Array[1, 2, 3] +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- `Int8Array` のポリフィルが [`core-js`](https://github.com/zloirock/core-js#ecmascript-typed-arrays) で利用できます +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- {{jsxref("ArrayBuffer")}} +- {{jsxref("DataView")}} diff --git a/files/ja/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.html b/files/ja/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.html index 31cd982d0b..e3bbaa033f 100644 --- a/files/ja/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.html +++ b/files/ja/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.html @@ -43,7 +43,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator/supportedL <h2 id="Description" name="Description">解説</h2> -<p><code>locales</code> で指定されている言語タグのサブセットを含む配列を返します。返される言語タグは、ランタイムがロケールの照合に対応しているもので、使用しているロケール一致アルゴリズムが、既定のロケールで代替することなく一致するとみなすものです。</p> +<p><code>locales</code> で指定されている言語タグのサブセットを含む配列を返します。返される言語タグは、ランタイムがロケールの照合に対応しているもので、使用しているロケール照合アルゴリズムが、既定のロケールで代替することなく一致するとみなすものです。</p> <h2 id="Examples">Examples</h2> diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.md index 9dd69a4d94..e45b807a48 100644 --- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.md +++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.md @@ -77,7 +77,7 @@ new Intl.DateTimeFormat(locales, options) - `numberingSystem` - : 命数法です。有効な値は、 "`arab`", "`arabext`", " `bali`", "`beng`", "`deva`", "`fullwide`", " `gujr`", "`guru`", "`hanidec`", "`khmr`", " `knda`", "`laoo`", "`latn`", "`limb`", "`mlym`", " `mong`", "`mymr`", "`orya`", "`tamldec`", " `telu`", "`thai`", "`tibt`" です。 - `localeMatcher` - - : 使用するロケール一致アルゴリズム。利用可能な値は "`lookup`" と "`best fit`" です。既定値は "`best fit`" です。このオプションについての詳細は、 {{jsxref("Global_Objects/Intl", "Intl", "#Locale_negotiation", 1)}} のページをご覧ください。 + - : 使用するロケール照合アルゴリズム。利用可能な値は "`lookup`" と "`best fit`" です。既定値は "`best fit`" です。このオプションについての詳細は、 {{jsxref("Global_Objects/Intl", "Intl", "#Locale_negotiation", 1)}} のページをご覧ください。 - `timeZone` - : 使用するタイムゾーン。実装が認識しなければならない唯一の値は "`UTC`" です。既定値は、実行時の既定のタイムゾーンです。実装は、 [IANA タイムゾーンデータベース](https://www.iana.org/time-zones)のタイムゾーン名、例えば "`Asia/Shanghai`", "`Asia/Kolkata`", "`America/New_York`" なども認識できる場合があります。 - `hour12` diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.md index 4c5e19d610..615196ab39 100644 --- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.md +++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.md @@ -43,7 +43,7 @@ Intl.DateTimeFormat.supportedLocalesOf(locales, options) ## 解説 -`locales` で提供されている言語タグのサブセットを含む配列を返します。返される言語タグは、ランタイムが日時のロケールに対応しているもので、使用しているロケール一致アルゴリズムで一致しているとみなされているものです。 +`locales` で提供されている言語タグのサブセットを含む配列を返します。返される言語タグは、ランタイムが日時のロケールに対応しているもので、使用しているロケール照合アルゴリズムで一致しているとみなされているものです。 ## 例 diff --git a/files/ja/web/javascript/reference/global_objects/intl/displaynames/displaynames/index.md b/files/ja/web/javascript/reference/global_objects/intl/displaynames/displaynames/index.md new file mode 100644 index 0000000000..219d5331ee --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/displaynames/displaynames/index.md @@ -0,0 +1,103 @@ +--- +title: Intl.DisplayNames() コンストラクター +slug: Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/DisplayNames +tags: + - Constructor + - DisplayNames + - Internationalization + - Intl + - JavaScript + - Localization + - Reference +browser-compat: javascript.builtins.Intl.DisplayNames.DisplayNames +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/DisplayNames +--- +{{JSRef}} + +**`Intl.DisplayNames()`** コンストラクターは、言語、地域、文字体系の表示名の一貫した翻訳を可能にする {{jsxref("Intl/DisplayNames", "Intl.DisplayNames")}} オブジェクトを生成します。 + +{{EmbedInteractiveExample("pages/js/intl-displaynames.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. --> + +## 構文 + +```js +new Intl.DisplayNames() +new Intl.DisplayNames(locales) +new Intl.DisplayNames(locales, options) +``` + +### 引数 + +- `locales` {{optional_inline}} + + - : BCP 47 言語タグの文字列、または、そのような文字列の配列です。 `locales` 引数の一般的な形式と解釈は、 {{jsxref("Global_Objects/Intl", "Intl", "#Locale_identification_and_negotiation", 1)}} のページをご覧ください。次の Unicode 拡張キーが利用できます。 + + - `nu` + - : 使用する数値書式です。 + "`arab`", "`arabext`", "`bali`", + "`beng`", "`deva`", "`fullwide`", + "`gujr`", "`guru`", "`hanidec`", + "`khmr`", "`knda`", "`laoo`", + "`latn`", "`limb`", "`mlym`", + "`mong`", "`mymr`", "`orya`", + "`tamldec`", "`telu`", "`thai`", + "`tibt`" です。 + +- `options` {{optional_inline}} + + - : 以下のプロパティの一部またはすべてを持つオブジェクトです。 + + - `localeMatcher` + - : 使用するロケール照合アルゴリズムです。利用可能な値は、 + "`lookup`" と "`best fit`" です。既定値は + "`best fit`" です。このオプションについての情報は、 + {{jsxref("Global_Objects/Intl", "Intl", "#Locale_negotiation", 1)}} ページを参照してください。 + - `style` + + - : 使用する書式化スタイルです。既定値は "`long`" です。 + + - "`narrow`" + - "`short`" + - "`long`" + + - `type` + + - : 使用する種類です。 + + - "`language`" + - "`region`" + - "`script`" + - "`currency`" + + - `fallback` + + - : 使用する代替法です。既定値は "`code`" です。 + + - "`code`" + - "`none`" + +## 例 + +### 基本的な使用法 + +ロケールを指定しない基本的な使用法では、既定のロケールと既定のオプションで書式化された文字列が返されます。 + +```js +console.log((new Intl.DisplayNames([], {type: 'language'})).of('US')); +// 期待される出力: 'us' +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.DisplayNames")}} +- {{jsxref("Global_Objects/Intl", "Intl")}} diff --git a/files/ja/web/javascript/reference/global_objects/intl/displaynames/index.html b/files/ja/web/javascript/reference/global_objects/intl/displaynames/index.html deleted file mode 100644 index f27a416cf6..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/displaynames/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: Intl.DisplayNames -slug: Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames -tags: - - Class - - DisplayNames - - Internationalization - - Intl - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames ---- -<div>{{JSRef}}</div> - -<p><strong><code>Intl.DisplayNames</code></strong> オブジェクトは、言語、地域、文字体系の表示名の一貫した翻訳を可能にするオブジェクトのコンストラクターです。</p> - -<div>{{EmbedInteractiveExample("pages/js/intl-displaynames.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Constructor" name="Constructor">コンストラクター</h2> - -<dl> - <dt>{{jsxref("Intl/DisplayNames/DisplayNames", "Intl.DisplayNames()")}}</dt> - <dd><code>Intl.DisplayNames</code> オブジェクトを作成します。</dd> -</dl> - -<h2 id="Static_methods" name="Static_methods">静的メソッド</h2> - -<dl> - <dt>{{jsxref("Intl/DisplayNames/supportedLocalesOf", "Intl.DisplayNames.supportedLocalesOf()")}}</dt> - <dd>提供されたロケールのうち、ランタイムのデフォルトロケールにフォールバックすることなくサポートされているロケールを含む配列を返します。</dd> -</dl> - -<h2 id="Instance_methods" name="Instance_methods">インスタンスメソッド</h2> - -<dl> - <dt>{{jsxref("Intl/DisplayNames/of", "Intl.DisplayNames.prototype.of()")}}</dt> - <dd>このメソッドは <code>code</code> を受け取り、<a href="#"><code>Intl.DisplayNames</code></a> をインスタンス化したときに指定したロケールとオプションに基づく文字列を返します。</dd> - <dt>{{jsxref("Intl/DisplayNames/resolvedOptions", "Intl.DisplayNames.prototype.resolvedOptions()")}}</dt> - <dd>オブジェクトの初期化時に計算されたロケールや書式設定のオプションを反映したプロパティを持つ新しいオブジェクトを返します。</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Region_Code_Display_Names" name="Region_Code_Display_Names">国 (地域) の表示名</h3> - -<p>ロケールを指定した <code>Intl.DisplayNames</code> を作成し、国 (地域) コードの表示名を取得する方法です。</p> - -<pre class="brush: js notranslate">// 英語の地域名を表示 -let regionNames = new Intl.DisplayNames(['en'], {type: 'region'}); -regionNames.of('419'); // "Latin America" -regionNames.of('BZ'); // "Belize" -regionNames.of('US'); // "United States" -regionNames.of('BA'); // "Bosnia & Herzegovina" -regionNames.of('MM'); // "Myanmar (Burma)" - -// 繁体字中国語での地域名を表示 -regionNames = new Intl.DisplayNames(['zh-Hant'], {type: 'region'}); -regionNames.of('419'; // "拉丁美洲" -regionNames.of('BZ'); // "貝里斯" -regionNames.of('US'); // "美國" -regionNames.of('BA'); // "波士尼亞與赫塞哥維納" -regionNames.of('MM'); // "緬甸"</pre> - -<h3 id="Language_Display_Names" name="Language_Display_Names">言語の表示名</h3> - -<p>ロケールを指定した <code>Intl.DisplayNames</code> を作成し、言語-文字体系-国 (地域) の一連の表示名を取得する方法です。</p> - -<pre class="brush: js notranslate">// 英語の言語名を表示 -let languageNames = new Intl.DisplayNames(['en'], {type: 'language'}); -languageNames.of('fr'); // "French" -languageNames.of('de'); // "German" -languageNames.of('fr-CA'); // "Canadian French" -languageNames.of('zh-Hant'); // "Traditional Chinese" -languageNames.of('en-US'); // "American English" -languageNames.of('zh-TW'); // "Chinese (Taiwan)"] - -// 繁体字中国語での言語名を表示 -languageNames = new Intl.DisplayNames(['zh-Hant'], {type: 'language'}); -languageNames.of('fr'); // "法文" -languageNames.of('zh'); // "中文" -languageNames.of('de'); // "德文"</pre> - -<h3 id="Script_Code_Display_Names" name="Script_Code_Display_Names">文字体系コードの表示名称</h3> - -<p>ロケールを指定した <code>Intl.DisplayNames</code> を作成し、文字体系の表示名を取得する方法です。</p> - -<pre class="brush: js notranslate">// 英語の文字体系名を表示 -let scriptNames = new Intl.DisplayNames(['en'], {type: 'script'}); -// Get script names -scriptNames.of('Latn'); // "Latin" -scriptNames.of('Arab'); // "Arabic" -scriptNames.of('Kana'); // "Katakana" - -// 繁体字中国語での文字体系名を表示 -scriptNames = new Intl.DisplayNames(['zh-Hant'], {type: 'script'}); -scriptNames.of('Latn'); // "拉丁文" -scriptNames.of('Arab'); // "阿拉伯文" -scriptNames.of('Kana'); // "片假名"</pre> - -<h3 id="Currency_Code_Display_Names" name="Currency_Code_Display_Names">通貨コードの表示名称</h3> - -<p>ロケールを指定した <code>Intl.DisplayNames</code> を作成し、通貨の表示名を取得する方法です。</p> - -<pre class="brush: js notranslate">// 英語の通貨名を表示 -let currencyNames = new Intl.DisplayNames(['en'], {type: 'currency'}); -// Get currency names -currencyNames.of('USD'); // "US Dollar" -currencyNames.of('EUR'); // "Euro" -currencyNames.of('TWD'); // "New Taiwan Dollar" -currencyNames.of('CNY'); // "Chinese Yuan" - -// 繁体字中国語の通貨名を表示 -currencyNames = new Intl.DisplayNames(['zh-Hant'], {type: 'currency'}); -currencyNames.of('USD'); // "美元" -currencyNames.of('EUR'); // "歐元" -currencyNames.of('TWD'); // "新台幣" -currencyNames.of('CNY'); // "人民幣"</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Intl.DisplayNames', '#intl-displaynames-objects', 'DisplayNames')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.Intl.DisplayNames")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Intl")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/intl/displaynames/index.md b/files/ja/web/javascript/reference/global_objects/intl/displaynames/index.md new file mode 100644 index 0000000000..897db00357 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/displaynames/index.md @@ -0,0 +1,134 @@ +--- +title: Intl.DisplayNames +slug: Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames +tags: + - Class + - DisplayNames + - Internationalization + - Intl + - JavaScript + - Localization + - Reference +browser-compat: javascript.builtins.Intl.DisplayNames +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames +--- +{{JSRef}} + +**`Intl.DisplayNames`** オブジェクトは、言語、地域、文字体系の表示名の一貫した翻訳を可能にします。 + +{{EmbedInteractiveExample("pages/js/intl-displaynames.html")}} + + +## コンストラクター + +- {{jsxref("Intl/DisplayNames/DisplayNames", "Intl.DisplayNames()")}} + - : `Intl.DisplayNames` オブジェクトを作成します。 + +## 静的メソッド + +- {{jsxref("Intl/DisplayNames/supportedLocalesOf", "Intl.DisplayNames.supportedLocalesOf()")}} + - : 提供されたロケールのうち、ランタイムの既定のロケールに代替されることなく対応しているロケールを含む配列を返します。 + +## インスタンスメソッド + +- {{jsxref("Intl/DisplayNames/of", "Intl.DisplayNames.prototype.of()")}} + - : このメソッドは `code` を受け取り、`Intl.DisplayNames` をインスタンス化したときに指定したロケールとオプションに基づく文字列を返します。 +- {{jsxref("Intl/DisplayNames/resolvedOptions", "Intl.DisplayNames.prototype.resolvedOptions()")}} + - : オブジェクトの初期化時に計算されたロケールや書式設定のオプションを反映したプロパティを持つ新しいオブジェクトを返します。 + +## 例 + +### 国 (地域) の表示名 + +ロケールを指定して `Intl.DisplayNames` を作成し、国 (地域) コードの表示名を取得する方法です。 + +```js +// 英語の地域名を表示 +let regionNames = new Intl.DisplayNames(['en'], {type: 'region'}); +regionNames.of('419'); // "Latin America" +regionNames.of('BZ'); // "Belize" +regionNames.of('US'); // "United States" +regionNames.of('BA'); // "Bosnia & Herzegovina" +regionNames.of('MM'); // "Myanmar (Burma)" + +// 繁体字中国語での地域名を表示 +regionNames = new Intl.DisplayNames(['zh-Hant'], {type: 'region'}); +regionNames.of('419'; // "拉丁美洲" +regionNames.of('BZ'); // "貝里斯" +regionNames.of('US'); // "美國" +regionNames.of('BA'); // "波士尼亞與赫塞哥維納" +regionNames.of('MM'); // "緬甸" +``` + +### 言語の表示名 + +ロケールを指定して `Intl.DisplayNames` を作成し、言語-文字体系-国 (地域) の一連の表示名を取得する方法です。 + +```js +// 英語の言語名を表示 +let languageNames = new Intl.DisplayNames(['en'], {type: 'language'}); +languageNames.of('fr'); // "French" +languageNames.of('de'); // "German" +languageNames.of('fr-CA'); // "Canadian French" +languageNames.of('zh-Hant'); // "Traditional Chinese" +languageNames.of('en-US'); // "American English" +languageNames.of('zh-TW'); // "Chinese (Taiwan)"] + +// 繁体字中国語での言語名を表示 +languageNames = new Intl.DisplayNames(['zh-Hant'], {type: 'language'}); +languageNames.of('fr'); // "法文" +languageNames.of('zh'); // "中文" +languageNames.of('de'); // "德文" +``` + +### 文字体系コードの表示名 + +ロケールを指定して `Intl.DisplayNames` を作成し、文字体系の表示名を取得する方法です。 + +```js +// 英語の文字体系名を表示 +let scriptNames = new Intl.DisplayNames(['en'], {type: 'script'}); +// Get script names +scriptNames.of('Latn'); // "Latin" +scriptNames.of('Arab'); // "Arabic" +scriptNames.of('Kana'); // "Katakana" + +// 繁体字中国語での文字体系名を表示 +scriptNames = new Intl.DisplayNames(['zh-Hant'], {type: 'script'}); +scriptNames.of('Latn'); // "拉丁文" +scriptNames.of('Arab'); // "阿拉伯文" +scriptNames.of('Kana'); // "片假名" +``` + +### 通貨コードの表示名 + +ロケールを指定して `Intl.DisplayNames` を作成し、通貨の表示名を取得する方法です。 + +```js +// 英語の通貨名を表示 +let currencyNames = new Intl.DisplayNames(['en'], {type: 'currency'}); +// Get currency names +currencyNames.of('USD'); // "US Dollar" +currencyNames.of('EUR'); // "Euro" +currencyNames.of('TWD'); // "New Taiwan Dollar" +currencyNames.of('CNY'); // "Chinese Yuan" + +// 繁体字中国語の通貨名を表示 +currencyNames = new Intl.DisplayNames(['zh-Hant'], {type: 'currency'}); +currencyNames.of('USD'); // "美元" +currencyNames.of('EUR'); // "歐元" +currencyNames.of('TWD'); // "新台幣" +currencyNames.of('CNY'); // "人民幣" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl")}} diff --git a/files/ja/web/javascript/reference/global_objects/intl/displaynames/of/index.md b/files/ja/web/javascript/reference/global_objects/intl/displaynames/of/index.md new file mode 100644 index 0000000000..c0598c51be --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/displaynames/of/index.md @@ -0,0 +1,70 @@ +--- +title: Intl.DisplayNames.prototype.of() +slug: Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/of +tags: + - DisplayNames + - Internationalization + - Intl + - JavaScript + - Localization + - Method + - Prototype + - Reference +browser-compat: javascript.builtins.Intl.DisplayNames.of +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/of +--- +{{JSRef}} + +**`Intl.DisplayNames.prototype.of()`** メソッドは、コードを受け取り、Intl.DisplayNames をインスタンス化するときに指定されたロケールとオプションに基づいて文字列を返します。 + +{{EmbedInteractiveExample("pages/js/intl-displaynames.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. --> + +## 構文 + +```js +of(code) +``` + +### 引数 + +- `code` + + - : 与える `code` は、 `type` によって変わります。 + + - type が "region" である場合、コードは [ISO-3166 地域の 2 文字コード](https://www.iso.org/iso-3166-country-codes.html)または [three digits UN M49 Geographic Regions](https://unstats.un.org/unsd/methodology/m49/) である必要があります。 + - type が "script" である場合、コードは [ISO-15924 文字体系の 4 文字コード](https://unicode.org/iso15924/iso15924-codes.html)である必要があります。 + - type が "language" である場合、コードは _languageCode_ \["-" _scriptCode_] \["-" _regionCode_ ] \*("-" _variant_ ) の形である必要があり、これは [UTS 35's Unicode Language and Locale Identifiers grammar](https://unicode.org/reports/tr35/#Unicode_language_identifier) の unicode_language_id の構文です。 _languageCode_ は 2 文字の ISO 639-1 言語コードまたは 3 文字の ISO 639-2 言語コードです。 + - type が "currency" である場合、コードは [3 文字の ISO 4217 通貨コード](https://www.iso.org/iso-4217-currency-codes.html)である必要があります。 + +### 返値 + +その言語における書式化された文字列です。 + +## 例 + +### of メソッドの使用 + +```js +let regionNames = new Intl.DisplayNames(['en'], {type: 'region'}); +regionNames.of('419'); // "Latin America" + +let languageNames = new Intl.DisplayNames(['en'], {type: 'language'}); +languageNames.of('fr'); // "French" + +let currencyNames = new Intl.DisplayNames(['en'], {type: 'currency'}); +currencyNames.of('EUR'); // "Euro" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.DisplayNames")}} diff --git a/files/ja/web/javascript/reference/global_objects/intl/displaynames/resolvedoptions/index.md b/files/ja/web/javascript/reference/global_objects/intl/displaynames/resolvedoptions/index.md new file mode 100644 index 0000000000..8f7593317a --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/displaynames/resolvedoptions/index.md @@ -0,0 +1,67 @@ +--- +title: Intl.DisplayNames.prototype.resolvedOptions() +slug: Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/resolvedOptions +tags: + - DisplayNames + - Internationalization + - Intl + - JavaScript + - Localization + - Method + - Prototype + - Reference +browser-compat: javascript.builtins.Intl.DisplayNames.resolvedOptions +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/resolvedOptions +--- +{{JSRef}} + +**`Intl.DisplayNames.prototype.resolvedOptions()`** メソッドは、現在の {{jsxref("Intl.DisplayNames")}} オブジェクトの初期化時に計算されたロケールとスタイルの書式オプションを反映したプロパティを持つ新しいオブジェクトを返します。 + +## 構文 + +```js +resolvedOptions() +``` + +### 返値 + +この {{jsxref("Intl.DisplayNames")}} オブジェクトの初期化時に計算されたロケールと書式オプションを反映したプロパティを持つ新しいオブジェクトです。 + +## 解説 + +`resolvedOptions()` で返されるオブジェクトには、以下のプロパティがあります。 + +- `locale` + - : このロケールで実際に使用する BCP 47 言語タグです。入力されこのロケールに導いた BCP 47 言語タグで Unicode 拡張値が要求されていた場合、要求されたキーと値の組のうち、このロケールで対応しているものが `locale` に含まれます。 +- `style` + - : コンストラクターの `options` 引数でこのプロパティに与えられた値、または既定値 ("`long`") です。値は "`long`"、"`short`"、"`narrow`" のいずれかです。 +- `type` + - : コンストラクターの `options` 引数でこのプロパティに与えられた値、または既定値 ("`language`") です。値は "`language`"、"`region`"、"`script`"、"`currency`" のいずれかです。 +- `fallback` + - : コンストラクターの `options` 引数でこのプロパティに与えられた値、または既定値 ("`code`") です。値は "`code`" または "`none`" のどちらかです。 + +## 例 + +### resolvedOptions の使用 + +```js +const displayNames = new Intl.DisplayNames(['de-DE'], {type: 'region'}); + +const usedOptions = displayNames.resolvedOptions(); +console.log(usedOptions.locale); // "de-DE" +console.log(usedOptions.style); // "long" +console.log(usedOptions.type); // "region" +console.log(usedOptions.fallback); // "code" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.DisplayNames")}} diff --git a/files/ja/web/javascript/reference/global_objects/intl/displaynames/supportedlocalesof/index.md b/files/ja/web/javascript/reference/global_objects/intl/displaynames/supportedlocalesof/index.md new file mode 100644 index 0000000000..5732a9f737 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/displaynames/supportedlocalesof/index.md @@ -0,0 +1,68 @@ +--- +title: Intl.DisplayNames.supportedLocalesOf() +slug: Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/supportedLocalesOf +tags: + - DisplayNames + - Internationalization + - Intl + - JavaScript + - Localization + - Method + - Reference +browser-compat: javascript.builtins.Intl.DisplayNames.supportedLocalesOf +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/supportedLocalesOf +--- +{{JSRef}} + +**`Intl.DisplayNames.supportedLocalesOf()`** メソッドは、指定されたロケールのうち、ランタイムの既定のロケールで代替せずに表示名に対応しているものの配列を返します。 + +## 構文 + +```js +Intl.DisplayNames.supportedLocalesOf(locales) +Intl.DisplayNames.supportedLocalesOf(locales, options) +``` + +### 引数 + +- `locales` + - : BCP 47 言語タグを持つ文字列、またはそのような文字列の配列です。 `locales` 引数の一般的な形式については、 {{jsxref("Intl", "Intl", "#Locale_identification_and_negotiation", 1)}} のページを参照してください。 +- `options` {{optional_inline}} + + - : 以下のプロパティを持つオブジェクトです。 + + - `localeMatcher` + - : 使用するロケール照合アルゴリズムです。指定可能な値は "`lookup`" および "`best fit`" で、既定値は "`best fit`" です。このオプションの詳細は、 {{jsxref("Intl", "Intl", "#Locale_negotiation", 1)}} のページを参照してください。 + +### 返値 + +指定したロケールタグうち、ランタイムの既定のロケールで代替せずに表示名に対応しているものを表す文字列の配列です。 + +## 解説 + +`locales` で指定された言語タグのサブセットが入った配列を返します。返される言語タグは、表示名について、使用するロケール照合アルゴリズムで一致しているとみなされ、ランタイムが既定のロケールで代替することなく対応しているものです。 + +## 例 + +### supportedLocalesOf() の使用 + +表示名についてインドネシア語とドイツ語に対応しているが、バリ語に対応していないランタイムを想定した場合、 `supportedLocalesOf` はインドネシア語とドイツ語の言語タグを変更せずに返しますが、 `pinyin` の照合は表示名には関係なく、インドネシア語では使用されません。これは "`lookup`" アルゴリズムの仕様であることに注意してください。 "`best fit`" で照合すると、バリ語の話者のほとんどはインドネシア語も理解しているので、インドネシア語がバリ語に適切に一致すると判断し、バリ語の言語タグも返すかもしれません。 + +```js +const locales = ['ban', 'id-u-co-pinyin', 'de-ID']; +const options = { localeMatcher: 'lookup' }; +console.log(Intl.DisplayNames.supportedLocalesOf(locales, options).join(', ')); +// → "id-u-co-pinyin, de-ID" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.DisplayNames")}} diff --git a/files/ja/web/javascript/reference/global_objects/intl/index.html b/files/ja/web/javascript/reference/global_objects/intl/index.html deleted file mode 100644 index f315874d17..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: Intl -slug: Web/JavaScript/Reference/Global_Objects/Intl -tags: - - Internationalization - - Intl - - JavaScript - - Namespace - - 名前空間 - - 国際化 -translation_of: Web/JavaScript/Reference/Global_Objects/Intl ---- -<div>{{JSRef}}</div> - -<p><strong><code>Intl</code></strong> オブジェクトは、 ECMAScript の国際化 API の名前空間で、言語に依存した文字列の比較、数値フォーマット、日付フォーマットを提供します。 <strong><code>Intl</code></strong> オブジェクトは、いくつかのコンストラクターに加え、国際化コンストラクターや他の言語に関する関数に共通する機能へのアクセスを提供します。</p> - -<h2 id="Properties" name="Properties">プロパティ</h2> - -<dl> - <dt>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</dt> - <dd>言語に依存した文字列の比較を可能にするオブジェクトである collator のためのコンストラクター。</dd> - <dt>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</dt> - <dd>言語に依存した日時の書式化を可能にするオブジェクトのためのコンストラクター。</dd> - <dt>{{jsxref("Global_Objects/ListFormat", "Intl.ListFormat")}}</dt> - <dd>言語に依存したリストの書式化を可能にするオブジェクトのためのコンストラクター。</dd> - <dt>{{jsxref("Global_Objects/Locale", "Intl.Locale")}}</dt> - <dd>Unicode ロケール識別子を表すオブジェクトのためのコンストラクター。</dd> - <dt>{{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</dt> - <dd>言語に依存した数値フォーマットを可能にするオブジェクトのためのコンストラクター。</dd> - <dt>{{jsxref("Global_Objects/PluralRules", "Intl.PluralRules")}}</dt> - <dd>複数形を意識した書式化や複数形の言語規則を可能にするオブジェクトのためのコンストラクター。</dd> - <dt>{{jsxref("Global_Objects/RelativeTimeFormat", "Intl.RelativeTimeFormat")}}</dt> - <dd>言語を意識した相対時刻の書式化を可能にするオブジェクトのためのコンストラクター。</dd> -</dl> - -<h2 id="Methods" name="Methods">メソッド</h2> - -<dl> - <dt>{{jsxref("Intl.getCanonicalLocales()")}}</dt> - <dd>正規のロケール名を返すメソッド。</dd> -</dl> - -<h2 id="Locale_identification_and_negotiation" name="Locale_identification_and_negotiation">ロケールの識別とネゴシエーション</h2> - -<p>国際化コンストラクターや他のコンストラクターの言語を意識したメソッド (<a href="#See_also">関連情報</a>に記載) は、ロケールを識別して実際に使用するものを決定するために共通のパターンを使用しています。これらはすべて、 <code>locales</code> と <code>options</code> の引数を受け取り、 <code>options.localeMatcher</code> プロパティで指定したアルゴリズムを使用して 要求されたロケールと対応しているロケールとのネゴシエーションを行います。</p> - -<h3 id="locales_argument" name="locales_argument">locales 引数</h3> - -<p><code>locales</code> 引数は、 <a href="http://tools.ietf.org/html/rfc5646">BCP 47 言語タグ</a>を保持している文字列か、そのような言語タグの配列でなければなりません。 <code>locales</code> 引数が与えられていなかったり、 undefined であったりした場合は、実行時の既定のロケールが使用されます。</p> - -<p>BCP 47 言語タグは、言語と、少なくとも主たる言語コードを含んでいます。ほとんどのよくある形式では、すべてハイフンで区切られたサブタグを、言語コード、文字体系コード、国または地域コードの順で含んでいます。タグは大文字小文字を区別しませんが、文字体系コードでは先頭が大文字で残りは小文字、国または地域コードでは大文字、その他はすべて小文字が推奨されています。</p> - -<p>例:</p> - -<ul> - <li><code>"hi"</code>: ヒンディー語 (主たる言語)。</li> - <li><code>"de-AT"</code>: オーストリアで使用されているドイツ語 (主たる言語と国コード)。</li> - <li><code>"zh-Hans-CN"</code>: 中国で使用されている簡体字で書かれる中国語 (主たる言語と文字体系と国コード)。</li> -</ul> - -<p>言語、文字体系、国 (地域)、 (まれに使用される) 変化形を識別する BCP 47 言語タグのサブタグは <a href="http://www.iana.org/assignments/language-subtag-registry">IANA Language Subtag Registry</a> で調べられます。</p> - -<p>BCP 47 はまた、拡張を認めており、そのうちの一つ <code>"u"</code> (Unicode) 拡張は、 JavaScript の国際化機能にとって重要です。それは、{{jsxref("Collator")}}, {{jsxref("NumberFormat")}}, {{jsxref("DateTimeFormat")}} オブジェクトのロケール固有の動作のカスタマイズを要求するために使用することができます。</p> - -<ul> - <li><code>"de-DE-u-co-phonebk"</code>: ドイツ語のソート順の電話帳変化形を使用します。このソート順では、ウムラウト付きの母音を、 ä → ae, ö → oe, ü → ue のように、ウムラウトの付かない母音二文字に展開したものと見なした順で並べ替えします。</li> - <li><code>"th-TH-u-nu-thai"</code>: 数値書式で、タイの数字 (๐, ๑, ๒, ๓, ๔, ๕, ๖, ๗, ๘, ๙) を使用します。</li> - <li><code>"ja-JP-u-ca-japanese"</code>: 日時書式で和暦を使用します。すなわち、2013年は平成25年として表現されます。</li> - <li><code>"en-GB-u-ca-islamic"</code>: イギリス英語でイスラム暦 (Hijri) を使用します。グレゴリオ暦で2017年10月14日は、 Hijri 暦で 24 Muharram, 1439 です。</li> -</ul> - -<p>BCP 47 拡張タグは <a href="https://unicode.org/repos/cldr/trunk/common/bcp47/">Unicode CLDR Project</a> にあります。</p> - -<h3 id="Locale_negotiation" name="Locale_negotiation">ロケールネゴシエーション</h3> - -<p><code>locales</code> 引数は、すべての Unicode 拡張を除去した後、アプリケーションからの優先順位付き要求として解釈されます。ランタイムは、利用可能なロケールと比較し、利用可能なロケールのうち最適なものを選びます。マッチングアルゴリズムは二種類あります。 "<code>lookup</code>" マッチャーは、<a href="http://tools.ietf.org/html/rfc4647#section-3.4">BCP 47</a> で指定された Lookup アルゴリズムに従います。 "<code>best fit</code>" マッチャーでは、ランタイムが少なくとも、あるいは場合によっては、 Lookup アルゴリズムの結果よりもリクエストに適合したロケールを提供します。アプリケーションが <code>locales</code> 引数を提供しなかった場合や、リクエストに一致するロケールをランタイムが持っていなかった場合は、ランタイムの既定のロケールが使用されます。マッチャーは、 <code>options</code> 引数のプロパティを使って選択することができます (後述)。</p> - -<p>ネゴシエーションにより選択された言語タグが Unicode 拡張の部分文字列を持っているとき、その拡張はここで、構築されたオブジェクトや関数の振る舞いをカスタマイズするために使われます。それぞれのコンストラクターや関数は、 Unicode 拡張用のキーのごく一部分のみ対応しており、また、対応する値は、多くの場合言語タグに依存します。例えば、 "<code>co</code>" キー (コレクション)は、 {{jsxref("Collator")}} だけが対応しており、そのキーに対する "<code>phonebk</code>" の値はドイツ語だけが対応しています。</p> - -<h3 id="options_argument" name="options_argument">options 引数</h3> - -<p><code>options</code> 引数は、コンストラクターや関数ごとに異なるプロパティをもつオブジェクトである必要があります。 <code>options</code> 引数が与えられなかった場合、または、未定義の場合、すべてのプロパティに対して既定値が使用されます。</p> - -<p>言語を意識するすべてのコンストラクターや関数が対応しているプロパティが一つあります。 <code>localeMatcher</code> プロパティで、この値は "<code>lookup</code>" または "<code>best fit</code>" の文字列である必要があり、上記のロケールマッチングアルゴリズムのうちから一つを選択します。</p> - -<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', '#intl-object', 'Intl')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.Intl")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>導入: <a href="https://norbertlindenberg.com/2012/12/ecmascript-internationalization-api/index.html">The ECMAScript Internationalization API</a></li> - <li>コンストラクター - <ul> - <li>{{jsxref("Collator", "Intl.Collator")}}</li> - <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li> - <li>{{jsxref("ListFormat", "Intl.ListFormat")}}</li> - <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li> - <li>{{jsxref("PluralRules", "Intl.PluralRules")}}</li> - <li>{{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}</li> - <li>{{jsxref("Locale", "Intl.Locale")}}</li> - </ul> - </li> - <li>メソッド - <ul> - <li>{{jsxref("String.prototype.localeCompare()")}}</li> - <li>{{jsxref("Number.prototype.toLocaleString()")}}</li> - <li>{{jsxref("Date.prototype.toLocaleString()")}}</li> - <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li> - <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li> - </ul> - </li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/intl/index.md b/files/ja/web/javascript/reference/global_objects/intl/index.md new file mode 100644 index 0000000000..770ef53b18 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/index.md @@ -0,0 +1,151 @@ +--- +title: Intl +slug: Web/JavaScript/Reference/Global_Objects/Intl +tags: + - Internationalization + - Intl + - JavaScript + - Namespace + - 名前空間 + - 国際化 +browser-compat: javascript.builtins.Intl +translation_of: Web/JavaScript/Reference/Global_Objects/Intl +--- +{{JSRef}} + +**`Intl`** オブジェクトは、 ECMAScript の国際化 API の名前空間で、言語に依存した文字列の比較、数値の書式化ト、日付の書式化を提供します。 **`Intl`** オブジェクトは、いくつかのコンストラクターに加え、国際化コンストラクターや他の言語に関する関数に共通する機能へのアクセスを提供します。 + +## コンストラクタープロパティ + +- {{jsxref("Global_Objects/Intl/Collator/Collator", "Intl.Collator()")}} + - : 言語に依存した文字列の比較を可能にするオブジェクトである collator のためのコンストラクターです。 +- {{jsxref("Global_Objects/Intl/DateTimeFormat/DateTimeFormat", "Intl.DateTimeFormat()")}} + - : 言語に依存した日時の書式化を可能にするオブジェクトのためのコンストラクターです。 +- {{jsxref("Global_Objects/Intl/DisplayNames/DisplayNames", "Intl.DisplayNames()")}} + - : 言語、地域、文字体系の表示名の一貫した翻訳を可能にするオブジェクトのコンストラクターです。 +- {{jsxref("Global_Objects/Intl/ListFormat/ListFormat", "Intl.ListFormat()")}} + - : 言語に依存したリストの書式化を可能にするオブジェクトのためのコンストラクターです。 +- {{jsxref("Global_Objects/Intl/Locale/Locale", "Intl.Locale()")}} + - : Unicode ロケール識別子を表すオブジェクトのためのコンストラクターです。 +- {{jsxref("Global_Objects/Intl/NumberFormat/NumberFormat", "Intl.NumberFormat()")}} + - : 言語に依存した数値フォーマットを可能にするオブジェクトのためのコンストラクターです。 +- {{jsxref("Global_Objects/Intl/PluralRules/PluralRules", "Intl.PluralRules()")}} + - : 複数形を意識した書式化や複数形の言語規則を可能にするオブジェクトのためのコンストラクターです。 +- {{jsxref("Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat", "Intl.RelativeTimeFormat()")}} + - : 言語を意識した相対時刻の書式化を可能にするオブジェクトのためのコンストラクターです。 + +## メソッド + +- {{jsxref("Intl.getCanonicalLocales()")}} + - : 正規のロケール名を返すメソッド。 + +<h2 id="Locale_identification_and_negotiation">ロケールの識別とネゴシエーション</h2> + +国際化コンストラクターや他のコンストラクターの言語を意識したメソッド ([関連情報](#関連情報)に記載) は、ロケールを識別して実際に使用するものを決定するために共通のパターンを使用しています。これらはすべて、 `locales` と `options` の引数を受け取り、 `options.localeMatcher` プロパティで指定したアルゴリズムを使用して 要求されたロケールと対応しているロケールとのネゴシエーションを行います。 + +### locales 引数 + +`locales` 引数は、指定された操作に使用するロケールを特定するために使用されます。 JavaScript の実装では `locales` を調べて、表現された指定を満たすものに最も近い、理解可能なロケールを計算します。 `locales` は次のものを取ることができます。 + +- `undefined` (または省略): その実装の既定のロケールが使用されます。 +- ロケール: ロケール識別子またはロケール識別子を持つ [`Intl.Locale`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) オブジェクトです。 +- ロケールのリスト: 何らかの他の値で、オブジェクトに変換され、ロケールの配列として扱われます。 + +後 2 者では、実際に使用されるロケールは、[ロケールネゴシエーション](#locale_negotiation)によって決定された、最も良く対応しているロケールになります。 + +ロケール識別子は以下のものから成る文字列です。 + +1. 原語サブタグ +2. (任意で) 文字体系サブタグ +3. (任意で) 地域 (または国) サブタグ +4. (任意で) 1 つ以上の変化形サブタグ (すべて固有でなければならない) +5. (任意で) 1 つ以上の BCP 47 拡張シーケンス +6. (任意で) 私的に使用する拡張シーケンス + +...存在するサブタグやシーケンスはすべて、ハイフンで区切ります。ロケール識別子は大文字小文字の区別のない ASCII です。しかし、文字体系サブタグではタイトルケース (最初の文字が大文字で、以降の文字は小文字) を、地域サブタグは大文字、それ以外はすべて小文字を使う習慣があります。 + +- "`hi`": ヒンディー語 (主たる言語) +- "`de-AT`": オーストリア (地域) で使用されているドイツ語 (言語) +- "`zh-Hans-CN`": 中国 (地域) で使用されている簡体字 (文字体系) で書かれている中国語 (言語)。 +- "`en-emodeng`": 英語 (言語) の "Early modern English" 方言 (変化形) + +言語、文字体系、地域 (国を含む)、 (稀に使用される) 変化形を識別するサブタグは、 [IANA 言語サブタグレジストリー](https://www.iana.org/assignments/language-subtag-registry)に登録されています。このレジストリーは長期にわたって定期的に更新されており、実装は常に最新であるとは限らないため、サブタグが広く対応されていることを頼りすぎないようにしてください。 + +BCP 47 拡張シーケンスは、単一の数字または文字 (`"x"` 以外) と、ハイフンで区切られた 1 つ以上の 2 から 8 文字の文字または数字によるサブタグで構成されています。それぞれの数字または文字に対して 1 つのシーケンスのみが許可されていますので、 "`de-a-foo-a-foo`" は無効です。 BCP 47 拡張サブタグは [Unicode CLDR Project](https://github.com/unicode-org/cldr/tree/master/common/bcp47) で定義されています。現在は 2 つの拡張機能の意味のみが定義されています。 + +- `"u"` (Unicode) 拡張は {{jsxref("Intl.Collator")}}, {{jsxref("Intl.NumberFormat")}}, {{jsxref("Intl.DateTimeFormat")}} の各オブジェクトにおいて、ロケール固有の動作のカスタマイズを要求するために使用することができます。 + + - "`de-DE-u-co-phonebk`": ドイツ語のソート順の電話帳変化形を使用します。このソート順では、ウムラウト付きの母音を、 ä → ae, ö → oe, ü → ue のように、ウムラウトの付かない母音二文字に展開したものと見なした順で並べ替えします。 + - "`th-TH-u-nu-thai`": 数値書式で、タイの数字 (๐, ๑, ๒, ๓, ๔, ๕, ๖, ๗, ๘, ๙) を使用します。 + - "`ja-JP-u-ca-japanese`": 日時書式で和暦を使用します。すなわち、 2013 年は平成 25 年として表現されます。 + - "`en-GB-u-ca-islamic`": イギリス英語でイスラム暦 (Hijri) を使用します。グレゴリオ暦で2017年10月14日は、 Hijri 暦で 24 Muharram, 1439 です。 + +- `"t"` (transformed) 拡張は、他のロケールから翻訳されたテキストなど、変換されたコンテンツを示します。現在のところ、 `Intl` の機能で `"t"` 拡張を考慮するものはありません。しかし、この拡張はネストされたロケールを含むことがあります。たとえば、 "`de-t-en`" には英語のロケール識別子が含まれています。入れ子のロケールが存在する場合、それは有効なロケール識別子でなければなりません。例えば、 "`en-emodeng-emodeng`" は (`emodeng` の変化形サブタグが重複しているため) 無効なので、"`de-t-en-emodeng-emodeng`"も無効です。 + +最後に、"x "という文字を使った私的使用の拡張シーケンスがあり、その後にハイフンで区切られた 1 ～ 8 文字または数字のサブタグが 1 つ以上続きます。これにより、アプリケーションが独自に使用する情報をエンコードすることができますが、すべての `Intl` の操作では無視されます。 + +<h3 id="Locale_negotiation" name="Locale_negotiation">ロケールネゴシエーション</h3> + +`locales` 引数は、すべての Unicode 拡張を除去した後、アプリケーションからの優先順位付き要求として解釈されます。ランタイムは、利用可能なロケールと比較し、利用可能なロケールのうち最適なものを選びます。マッチングアルゴリズムは二種類あります。 "`lookup`" マッチャーは、[BCP 47](https://datatracker.ietf.org/doc/html/rfc4647#section-3.4) で指定された Lookup アルゴリズムに従います。 "`best fit`" マッチャーでは、ランタイムが少なくとも、あるいは場合によっては、 Lookup アルゴリズムの結果よりもリクエストに適合したロケールを提供します。アプリケーションが `locales` 引数を提供しなかった場合や、リクエストに一致するロケールをランタイムが持っていなかった場合は、ランタイムの既定のロケールが使用されます。マッチャーは、 `options` 引数のプロパティを使って選択することができます (下記参照)。 + +ネゴシエーションにより選択された言語タグが Unicode 拡張の部分文字列を持っているとき、その拡張はここで、構築されたオブジェクトや関数の振る舞いをカスタマイズするために使われます。それぞれのコンストラクターや関数は、 Unicode 拡張用のキーのごく一部分のみ対応しており、また、対応する値は、多くの場合言語タグに依存します。例えば、 "`co`" キー (コレクション)は、 {{jsxref("Intl.Collator")}} だけが対応しており、そのキーに対する "`phonebk`" の値はドイツ語だけが対応しています。 + +### options 引数 + +`options` 引数は、コンストラクターや関数ごとに異なるプロパティをもつオブジェクトである必要があります。 `options` 引数が与えられなかった場合、または、未定義の場合、すべてのプロパティに対して既定値が使用されます。 + +言語を意識するすべてのコンストラクターや関数が対応しているプロパティが一つあります。 `localeMatcher` プロパティで、この値は "`lookup`" または "`best fit`" の文字列である必要があり、上記のロケールマッチングアルゴリズムのうちから一つを選択します。 + +## 例 + +### 日付と数値の書式化 + +`Intl` を使用して、特定の言語や地域で一般的な形で日付や数値を書式化することができます。 + +```js +const count = 26254.39; +const date = new Date("2012-05-24"); + +function log(locale) { + console.log( + `${new Intl.DateTimeFormat(locale).format(date)} ${new Intl.NumberFormat(locale).format(count)}` + ); +} + +log("en-US"); +// 期待される出力: 5/24/2012 26,254.39 + +log("de-DE"); +// 期待される出力: 24.5.2012 26.254,39 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + + +## 関連情報 + +- 導入: [The ECMAScript Internationalization API](https://norbertlindenberg.com/2012/12/ecmascript-internationalization-api/index.html) +- コンストラクター + + - {{jsxref("Intl/Collator", "Intl.Collator")}} + - {{jsxref("Intl/DateTimeFormat", "Intl.DateTimeFormat")}} + - {{jsxref("Intl/ListFormat", "Intl.ListFormat")}} + - {{jsxref("Intl/NumberFormat", "Intl.NumberFormat")}} + - {{jsxref("Intl/PluralRules", "Intl.PluralRules")}} + - {{jsxref("Intl/RelativeTimeFormat", "Intl.RelativeTimeFormat")}} + - {{jsxref("Intl/Locale", "Intl.Locale")}} + +- メソッド + + - {{jsxref("String.prototype.localeCompare()")}} + - {{jsxref("Number.prototype.toLocaleString()")}} + - {{jsxref("Date.prototype.toLocaleString()")}} + - {{jsxref("Date.prototype.toLocaleDateString()")}} + - {{jsxref("Date.prototype.toLocaleTimeString()")}} + diff --git a/files/ja/web/javascript/reference/global_objects/intl/listformat/listformat/index.html b/files/ja/web/javascript/reference/global_objects/intl/listformat/listformat/index.html index c2963df3ef..1a3cf7346e 100644 --- a/files/ja/web/javascript/reference/global_objects/intl/listformat/listformat/index.html +++ b/files/ja/web/javascript/reference/global_objects/intl/listformat/listformat/index.html @@ -34,7 +34,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListForm <dl> <dt><code>localeMatcher</code></dt> - <dd>使用するロケール一致アルゴリズム。利用可能な値は <code>lookup</code> と <code>best fit</code> です。既定値は <code>best fit</code> です。このオプションについての詳細は、 {{jsxref("Global_Objects/Intl", "Intl のページ", "#Locale_negotiation", 1)}}をご覧ください。</dd> + <dd>使用するロケール照合アルゴリズム。利用可能な値は <code>lookup</code> と <code>best fit</code> です。既定値は <code>best fit</code> です。このオプションについての詳細は、 {{jsxref("Global_Objects/Intl", "Intl のページ", "#Locale_negotiation", 1)}}をご覧ください。</dd> <dt><code>type</code></dt> <dd>出力メッセージの書式です。可能な値は "and" ベースのリストを表す <code>conjunction</code> (既定値、例えば <code>A, B, and C</code>)、または "or" ベースのリストを表す <code>disjunction</code> (例えば <code>A, B, or C</code>)、単位付きの値のリストを表す <code>unit</code> (例えば <code>5 pounds, 12 ounces</code>) です。</dd> <dt><code>style</code></dt> diff --git a/files/ja/web/javascript/reference/global_objects/intl/listformat/supportedlocalesof/index.html b/files/ja/web/javascript/reference/global_objects/intl/listformat/supportedlocalesof/index.html index d0514291bc..f234e310b9 100644 --- a/files/ja/web/javascript/reference/global_objects/intl/listformat/supportedlocalesof/index.html +++ b/files/ja/web/javascript/reference/global_objects/intl/listformat/supportedlocalesof/index.html @@ -40,7 +40,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/supporte <h2 id="Description" name="Description">解説</h2> -<p><code>locales</code> で提供されている言語タグのサブセットを含む配列を返します。返される言語タグは、ランタイムが日時のロケールに対応しているもので、使用しているロケール一致アルゴリズムで一致しているとみなされているものです。</p> +<p><code>locales</code> で提供されている言語タグのサブセットを含む配列を返します。返される言語タグは、ランタイムが日時のロケールに対応しているもので、使用しているロケール照合アルゴリズムで一致しているとみなされているものです。</p> <h2 id="Examples" name="Examples">例</h2> 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 index 2889af2f7c..a5de754d70 100644 --- a/files/ja/web/javascript/reference/global_objects/intl/locale/index.md +++ b/files/ja/web/javascript/reference/global_objects/intl/locale/index.md @@ -58,7 +58,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale ## インスタンスメソッド - {{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()")}} diff --git a/files/ja/web/javascript/reference/global_objects/intl/locale/maximize/index.md b/files/ja/web/javascript/reference/global_objects/intl/locale/maximize/index.md index aae9be3eca..be24d7a3c5 100644 --- a/files/ja/web/javascript/reference/global_objects/intl/locale/maximize/index.md +++ b/files/ja/web/javascript/reference/global_objects/intl/locale/maximize/index.md @@ -14,7 +14,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/maximize --- {{JSRef}} -**`Intl.Locale.prototype.maximize()`** メソッドは、既存の値に基づいてロケールの言語、表記法、地域の最も可能性の近い値を取得します。 +**`Intl.Locale.prototype.maximize()`** メソッドは、既存の値に基づいてロケールの言語、文字体系、地域の最も可能性の近い値を取得します。 {{EmbedInteractiveExample("pages/js/intl-locale-prototype-maximize.html")}} @@ -31,7 +31,7 @@ maximize() ## 解説 -不完全な言語識別子をもとに、最も可能性の高いロケール言語識別子サブタグを識別できると便利な場合があります。 Add Likely Subtags アルゴリズムはこの機能を提供してくれます。例えば、言語識別子 "en" が与えられた場合、アルゴリズムは "en-Latn-US" を返すことになります。英語はラテン文字でしか書けませんし、世界最大の英語圏の国であるアメリカで使われている可能性が高いからです。この機能は、 `maximize()` メソッドを介して JavaScript プログラマーに提供されています。 `maximize()` は、[言語識別子](https://www.unicode.org/reports/tr35/#Language_Locale_Field_Definitions)を構成する主要なサブタグのうち言語サブ、表記法、地域の各サブタグにのみ影響を与えます。ロケール識別子の "-u" の後にあるその他のサブタグは拡張サブタグと呼ばれ、 `maximize()` メソッドの影響を受けません。これらのサブタグの例としては、{{jsxref("Intl/Locale/hourCycle", "Locale.hourCycle")}}、{{jsxref("Intl/Locale/calendar", "Locale.calendar")}}、{{jsxref("Intl/Locale/numeric", "Locale.numeric")}} などがあります。</p> +不完全な言語識別子をもとに、最も可能性の高いロケール言語識別子サブタグを識別できると便利な場合があります。 Add Likely Subtags アルゴリズムはこの機能を提供してくれます。例えば、言語識別子 "en" が与えられた場合、アルゴリズムは "en-Latn-US" を返すことになります。英語はラテン文字でしか書けませんし、世界最大の英語圏の国であるアメリカで使われている可能性が高いからです。この機能は、 `maximize()` メソッドを介して JavaScript プログラマーに提供されています。 `maximize()` は、[言語識別子](https://www.unicode.org/reports/tr35/#Language_Locale_Field_Definitions)を構成する主要なサブタグのうち言語サブ、文字体系、地域の各サブタグにのみ影響を与えます。ロケール識別子の "-u" の後にあるその他のサブタグは拡張サブタグと呼ばれ、 `maximize()` メソッドの影響を受けません。これらのサブタグの例としては、{{jsxref("Intl/Locale/hourCycle", "Locale.hourCycle")}}、{{jsxref("Intl/Locale/calendar", "Locale.calendar")}}、{{jsxref("Intl/Locale/numeric", "Locale.numeric")}} などがあります。</p> ## 例 diff --git a/files/ja/web/javascript/reference/global_objects/intl/locale/minimize/index.md b/files/ja/web/javascript/reference/global_objects/intl/locale/minimize/index.md index db7cd28fd1..380688ab83 100644 --- a/files/ja/web/javascript/reference/global_objects/intl/locale/minimize/index.md +++ b/files/ja/web/javascript/reference/global_objects/intl/locale/minimize/index.md @@ -30,7 +30,7 @@ minimize() ## 解説 -このメソッドは {{jsxref("Intl/Locale/maximize", "maximize()")}} の逆の処理を行い、ロケールの言語識別子 (基本的には `baseName` の内容) から言語、表記法、地域のサブタグをすべて削除します。これは、言語識別子の中に余分なサブタグがある場合に便利です。例えば "en-Latn" は "en" に簡略化できます。英語では "Latn" が書き言葉に使われる唯一の表記法だからです。 `minimize()` が影響を与えるのは、[言語識別子](https://www.unicode.org/reports/tr35/#Language_Locale_Field_Definitions)を構成する主要なサブタグである言語、表記法、地域の各サブタグのみです。ロケール識別子の "-u" の後にあるその他のサブタグは拡張サブタグと呼ばれ、 `minimize()` メソッドの影響を受けません。これらのサブタグの例としては、{{jsxref("Intl/Locale/hourCycle", "Locale.hourCycle")}}、{{jsxref("Intl/Locale/calendar", "Locale.calendar")}}、{{jsxref("Intl/Locale/numeric", "Locale.numeric")}} などがあります。 +このメソッドは {{jsxref("Intl/Locale/maximize", "maximize()")}} の逆の処理を行い、ロケールの言語識別子 (基本的には `baseName` の内容) から言語、文字体系、地域のサブタグをすべて削除します。これは、言語識別子の中に余分なサブタグがある場合に便利です。例えば "en-Latn" は "en" に簡略化できます。英語では "Latn" が書き言葉に使われる唯一の文字体系だからです。 `minimize()` が影響を与えるのは、[言語識別子](https://www.unicode.org/reports/tr35/#Language_Locale_Field_Definitions)を構成する主要なサブタグである言語、文字体系、地域の各サブタグのみです。ロケール識別子の "-u" の後にあるその他のサブタグは拡張サブタグと呼ばれ、 `minimize()` メソッドの影響を受けません。これらのサブタグの例としては、{{jsxref("Intl/Locale/hourCycle", "Locale.hourCycle")}}、{{jsxref("Intl/Locale/calendar", "Locale.calendar")}}、{{jsxref("Intl/Locale/numeric", "Locale.numeric")}} などがあります。 ## 例 diff --git a/files/ja/web/javascript/reference/global_objects/intl/locale/tostring/index.md b/files/ja/web/javascript/reference/global_objects/intl/locale/tostring/index.md index f62794a64c..78c66ad2e2 100644 --- a/files/ja/web/javascript/reference/global_objects/intl/locale/tostring/index.md +++ b/files/ja/web/javascript/reference/global_objects/intl/locale/tostring/index.md @@ -32,7 +32,7 @@ toString() ## 解説 -`Locale` オブジェクトは、概念的な Unicode ロケール識別子を JavaScript で表現したものです。特定のロケールに関する情報 (言語、表記法、カレンダーの種類など) を、ロケール識別子文字列で符号化することができます。これらのロケール識別子をより簡単に扱えるようにするために、 `Locale` オブジェクトが JavaScript に導入されました。 Locale オブジェクトの `toString` メソッドをコールすると、そのロケールの識別子文字列を返します。 `toString` メソッドを使用すると、 `Locale` のインスタンスが既存の `Intl` のコンストラクターへの引数ととして JSON におけるシリアライズにおいて、またはその他のコンテキストで正確な文字列表現が有用な場合に提供することができます。 +`Locale` オブジェクトは、概念的な Unicode ロケール識別子を JavaScript で表現したものです。特定のロケールに関する情報 (言語、文字体系、カレンダーの種類など) を、ロケール識別子文字列で符号化することができます。これらのロケール識別子をより簡単に扱えるようにするために、 `Locale` オブジェクトが JavaScript に導入されました。 Locale オブジェクトの `toString` メソッドをコールすると、そのロケールの識別子文字列を返します。 `toString` メソッドを使用すると、 `Locale` のインスタンスが既存の `Intl` のコンストラクターへの引数ととして JSON におけるシリアライズにおいて、またはその他のコンテキストで正確な文字列表現が有用な場合に提供することができます。 ## 例 diff --git a/files/ja/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.html b/files/ja/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.html index e79043aaf0..4bdeb2f79f 100644 --- a/files/ja/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.html +++ b/files/ja/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.html @@ -42,7 +42,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/suppor <h2 id="Description" name="Description">解説</h2> -<p><code>locales</code> で提供されている言語タグのサブセットを含む配列を返します。返される言語タグは、ランタイムが数値のロケールに対応しているもので、使用しているロケール一致アルゴリズムで一致しているとみなされているものです。</p> +<p><code>locales</code> で提供されている言語タグのサブセットを含む配列を返します。返される言語タグは、ランタイムが数値のロケールに対応しているもので、使用しているロケール照合アルゴリズムで一致しているとみなされているものです。</p> <h2 id="Examples" name="Examples">例</h2> diff --git a/files/ja/web/javascript/reference/global_objects/intl/pluralrules/supportedlocalesof/index.html b/files/ja/web/javascript/reference/global_objects/intl/pluralrules/supportedlocalesof/index.html index 4148418e66..b45d5b10b6 100644 --- a/files/ja/web/javascript/reference/global_objects/intl/pluralrules/supportedlocalesof/index.html +++ b/files/ja/web/javascript/reference/global_objects/intl/pluralrules/supportedlocalesof/index.html @@ -41,7 +41,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/support <h2 id="Description" name="Description">解説</h2> -<p><code>locales</code> で提供されている言語タグのサブセットを含む配列を返します。返される言語タグは、ランタイムが複数形のロケールに対応しているもので、使用しているロケール一致アルゴリズムで一致しているとみなされているものです。</p> +<p><code>locales</code> で提供されている言語タグのサブセットを含む配列を返します。返される言語タグは、ランタイムが複数形のロケールに対応しているもので、使用しているロケール照合アルゴリズムで一致しているとみなされているものです。</p> <h2 id="Examples" name="Examples">例</h2> diff --git a/files/ja/web/javascript/reference/global_objects/number/number/index.html b/files/ja/web/javascript/reference/global_objects/number/number/index.html deleted file mode 100644 index 5bf0908d9f..0000000000 --- a/files/ja/web/javascript/reference/global_objects/number/number/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Number() コンストラクター -slug: Web/JavaScript/Reference/Global_Objects/Number/Number -tags: - - Constructor - - JavaScript - - Number - - Reference - - コンストラクター -translation_of: Web/JavaScript/Reference/Global_Objects/Number/Number ---- -<div>{{JSRef}}</div> - -<p><strong><code>Number()</code> コンストラクター</strong>は、 {{jsxref("Number")}} オブジェクトを生成します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: js">new Number(<var>value</var>) -</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code><var>value</var></code></dt> - <dd>作成されるオブジェクトの数値による値です。</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<pre class="brush: js">const a = new Number('123'); // a === 123 is false -const b = Number('123'); // b === 123 is true -a instanceof Number; // is true -b instanceof Number; // is false</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-number-constructor', 'Number constructor')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.Number.Number")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("NaN")}}</li> - <li>{{jsxref("Math")}} グローバルオブジェクト</li> - <li>可変精度の整数: {{jsxref("BigInt")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/number/number/index.md b/files/ja/web/javascript/reference/global_objects/number/number/index.md new file mode 100644 index 0000000000..c494b27622 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/number/number/index.md @@ -0,0 +1,52 @@ +--- +title: Number() コンストラクター +slug: Web/JavaScript/Reference/Global_Objects/Number/Number +tags: + - コンストラクター + - JavaScript + - Number + - Reference + - Polyfill +browser-compat: javascript.builtins.Number.Number +translation_of: Web/JavaScript/Reference/Global_Objects/Number/Number +--- +{{JSRef}} + +**`Number()` コンストラクター**は、 {{jsxref("Number")}} オブジェクトを生成します。 + +## 構文 + +```js +new Number(value) +``` + +## 引数 + +- `value` + - : 作成するオブジェクトの数値です。 + +## 例 + +### Number オブジェクトの生成 + +```js +const a = new Number('123'); // a === 123 は false +const b = Number('123'); // b === 123 は true +a instanceof Number; // は true +b instanceof Number; // は false +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 現在の `Number` の動作のポリフィル (2 進数と 8 進数のリテラルの対応あり) は [`core-js`](https://github.com/zloirock/core-js#ecmascript-number) で利用できます +- {{jsxref("NaN")}} +- {{jsxref("Math")}} グローバルオブジェクト +- 可変精度の整数: {{jsxref("BigInt")}} diff --git a/files/ja/web/javascript/reference/global_objects/number/tosource/index.html b/files/ja/web/javascript/reference/global_objects/number/tosource/index.html index 58d6fbbda5..20ae3cb4bf 100644 --- a/files/ja/web/javascript/reference/global_objects/number/tosource/index.html +++ b/files/ja/web/javascript/reference/global_objects/number/tosource/index.html @@ -36,4 +36,4 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/toSource <h2 id=".E5.8F.82.E7.85.A7" name=".E5.8F.82.E7.85.A7">参照</h2> -<p><a href="ja/Core_JavaScript_1.5_Reference/Global_Objects/Object/toSource">Object.prototype.toSource</a></p> +<p><a href="/ja/Core_JavaScript_1.5_Reference/Global_Objects/Object/toSource">Object.prototype.toSource</a></p> diff --git a/files/ja/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html b/files/ja/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html deleted file mode 100644 index 0d8e99edee..0000000000 --- a/files/ja/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Object.getOwnPropertyDescriptor() -slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor -tags: - - ECMAScript 5 - - JavaScript - - Method - - Object -translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor ---- -<div>{{JSRef}}</div> - -<p><strong><code>Object.getOwnPropertyDescriptor()</code></strong> メソッドは、与えられたオブジェクトの特定のプロパティ (すなわち、あるオブジェクトの直接の表現であり、オブジェクトのプロトタイプチェーン内のものではない) の構成を記述するオブジェクトを返します。返されるオブジェクトは変更可能ですが、変更しても元のプロパティの構成には影響を与えません。</p> - -<div>{{EmbedInteractiveExample("pages/js/object-getownpropertydescriptor.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate">Object.getOwnPropertyDescriptor(<var>obj</var>, <var>prop</var>)</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code><var>obj</var></code></dt> - <dd>プロパティの確認を行うオブジェクトです。</dd> - <dt><code><var>prop</var></code></dt> - <dd>記述子を受け取るプロパティの名前または {{jsxref("Symbol")}} です。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>指定されたプロパティがオブジェクトにある場合は、プロパティ記述子で、それ以外の場合は {{jsxref("undefined")}} です。</p> - -<h2 id="Description" name="Description">解説</h2> - -<p>このメソッドで、プロパティの正確な定義を確認することができます。 JavaScript の<dfn>プロパティ</dfn>は、文字列値の名前または {{jsxref("Symbol")}} とプロパティ記述子から成ります。プロパティ記述子およびその属性についての詳細情報は、 {{jsxref("Object.defineProperty()")}} にあります。</p> - -<p><dfn>プロパティ記述子</dfn>は、以下の属性のいくつかを記録したものです。</p> - - - -<dl> - <dt><code>value</code></dt> - <dd>プロパティに関連づけられた値です (データ記述子のみ)。</dd> - <dt><code>writable</code></dt> - <dd><code>true</code> である場合、プロパティに関連づけられた値は変更することができます (データ記述子のみ)。</dd> - <dt><code>get</code></dt> - <dd>プロパティのゲッターとして提供する関数、あるいはゲッターがない場合は <code>undefined</code> です (アクセサ記述子のみ)。</dd> - <dt><code>set</code></dt> - <dd>プロパティのセッターとして提供する関数、あるいはセッターがない場合は <code>undefined</code> です (アクセサ記述子のみ)。</dd> - <dt><code>configurable</code></dt> - <dd><code>true</code> である場合、この種の記述子を変更することや、対応するオブジェクトからプロパティを削除することができます。</dd> - <dt><code>enumerable</code></dt> - <dd><code>true</code> である場合、このプロパティは対応するオブジェクトでのプロパティ列挙に現れます。</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_Object.getOwnPropertyDescriptor" name="Using_Object.getOwnPropertyDescriptor">Object.getOwnPropertyDescriptor の使用</h3> - -<pre class="brush: js notranslate">var o, d; - -o = { get foo() { return 17; } }; -d = Object.getOwnPropertyDescriptor(o, 'foo'); -// d is { -// configurable: true, -// enumerable: true, -// get: /*the getter function*/, -// set: undefined -// } - -o = { bar: 42 }; -d = Object.getOwnPropertyDescriptor(o, 'bar'); -// d is { -// configurable: true, -// enumerable: true, -// value: 42, -// writable: true -// } - -o = { [Symbol.for('baz')]: 73 } -d = Object.getOwnPropertyDescriptor(o, Symbol.for('baz')); -// d is { -// configurable: true, -// enumerable: true, -// value: 73, -// writable: true -// } - -o = {}; -Object.defineProperty(o, 'qux', { - value: 8675309, - writable: false, - enumerable: false -}); -d = Object.getOwnPropertyDescriptor(o, 'qux'); -// d is { -// value: 8675309, -// writable: false, -// enumerable: false, -// configurable: false -// } -</pre> - -<h3 id="Non-object_coercion" name="Non-object_coercion">オブジェクト以外の型変換</h3> - -<p>ECMAScript 5 では、このメソッドへの最初の引数がオブジェクトでない (プリミティブである) 場合は、 {{jsxref("TypeError")}} が発生します。 ECMAScript 2015 では、最初の引数がオブジェクトでなくても、最初に強制的にオブジェクトに変換します。</p> - -<pre class="brush: js notranslate">Object.getOwnPropertyDescriptor('foo', 0); -// TypeError: "foo" is not an object // ES5 code - -Object.getOwnPropertyDescriptor('foo', 0); -// Object returned by ES2015 code: { -// configurable: false, -// enumerable: true, -// value: "f", -// writable: false -// } -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.Object.getOwnPropertyDescriptor")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Object.defineProperty()")}}</li> - <li>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.md b/files/ja/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.md new file mode 100644 index 0000000000..ec06355d9a --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.md @@ -0,0 +1,131 @@ +--- +title: Object.getOwnPropertyDescriptor() +slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor +tags: + - ECMAScript 5 + - JavaScript + - Method + - Object +browser-compat: javascript.builtins.Object.getOwnPropertyDescriptor +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor +--- +{{JSRef}} + +**`Object.getOwnPropertyDescriptor()`** メソッドは、与えられたオブジェクトの特定のプロパティ (すなわち、あるオブジェクトの直接の表現であり、オブジェクトのプロトタイプチェーン内のものではない) の構成を記述したオブジェクトを返します。返されるオブジェクトは変更可能ですが、変更しても元のプロパティの構成には影響を与えません。 + +{{EmbedInteractiveExample("pages/js/object-getownpropertydescriptor.html")}} + +## 構文 + +```js +Object.getOwnPropertyDescriptor(obj, prop) +``` + +### 引数 + +- `obj` + - : プロパティの確認を行うオブジェクトです。 +- `prop` + - : 記述を受け取るプロパティの名前または {{jsxref("Symbol")}} です。 + +### 返値 + +指定したプロパティがオブジェクトにある場合は、プロパティ記述子で、それ以外の場合は {{jsxref("undefined")}} です。 + +## 解説 + +このメソッドで、プロパティの正確な定義を確認することができます。 JavaScript の*プロパティ*は、文字列値の名前または {{jsxref("Symbol")}} とプロパティ記述子から成ります。プロパティ記述子およびその属性についての詳細情報は、 {{jsxref("Object.defineProperty()")}} にあります。 + +*プロパティ記述子*は、以下の属性のいくつかを記録したものです。 + +- `value` + - : プロパティに関連づけられた値です (データ記述子のみ)。 +- `writable` + - : `true` である場合、プロパティに関連づけられた値は変更することができます (データ記述子のみ)。 +- `get` + - : プロパティのゲッターとして提供する関数、あるいはゲッターがない場合は `undefined` です (アクセサー記述子のみ)。 +- `set` + - : プロパティのセッターとして提供する関数、あるいはセッターがない場合は `undefined` です (アクセサー記述子のみ)。 +- `configurable` + - : `true` である場合、この種の記述子を変更することや、対応するオブジェクトからプロパティを削除することができます。 +- `enumerable` + - : `true` である場合、このプロパティは対応するオブジェクトでのプロパティ列挙に現れます。 + +## 例 + +### Object.getOwnPropertyDescriptor の使用 + +```js +var o, d; + +o = { get foo() { return 17; } }; +d = Object.getOwnPropertyDescriptor(o, 'foo'); +// d is { +// configurable: true, +// enumerable: true, +// get: /*the getter function*/, +// set: undefined +// } + +o = { bar: 42 }; +d = Object.getOwnPropertyDescriptor(o, 'bar'); +// d is { +// configurable: true, +// enumerable: true, +// value: 42, +// writable: true +// } + +o = { [Symbol.for('baz')]: 73 } +d = Object.getOwnPropertyDescriptor(o, Symbol.for('baz')); +// d is { +// configurable: true, +// enumerable: true, +// value: 73, +// writable: true +// } + +o = {}; +Object.defineProperty(o, 'qux', { + value: 8675309, + writable: false, + enumerable: false +}); +d = Object.getOwnPropertyDescriptor(o, 'qux'); +// d is { +// value: 8675309, +// writable: false, +// enumerable: false, +// configurable: false +// } +``` + +<h3 id="Non-object_coercion" name="Non-object_coercion">オブジェクト以外の型変換</h3> + +ECMAScript 5 では、このメソッドへの最初の引数がオブジェクトでない (プリミティブである) 場合は、 {{jsxref("TypeError")}} が発生します。 ECMAScript 2015 では、最初の引数がオブジェクトでなくても、最初に強制的にオブジェクトに変換します。 + +```js +Object.getOwnPropertyDescriptor('foo', 0); +// TypeError: "foo" is not an object // ES5 code + +Object.getOwnPropertyDescriptor('foo', 0); +// Object returned by ES2015 code: { +// configurable: false, +// enumerable: true, +// value: "f", +// writable: false +// } +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Object.defineProperty()")}} +- {{jsxref("Reflect.getOwnPropertyDescriptor()")}} diff --git a/files/ja/web/javascript/reference/global_objects/object/values/index.html b/files/ja/web/javascript/reference/global_objects/object/values/index.html deleted file mode 100644 index 456a22468e..0000000000 --- a/files/ja/web/javascript/reference/global_objects/object/values/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Object.values() -slug: Web/JavaScript/Reference/Global_Objects/Object/values -tags: - - JavaScript - - Method - - Object - - Reference - - メソッド -translation_of: Web/JavaScript/Reference/Global_Objects/Object/values ---- -<div>{{JSRef}}</div> - -<p><span class="seoSummary"><code><strong>Object.values()</strong></code> メソッドは、指定されたオブジェクトが持つ列挙可能なプロパティの値を、 {{jsxref("Statements/for...in", "for...in")}} ループで提供される場合と同じ順序で配列にして返します。 (違いは、 <code>for...in</code> ループではプロパティチェーン上のプロパティも同様に列挙するという点だけです。)</span></p> - -<div>{{EmbedInteractiveExample("pages/js/object-values.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">Object.values(<var>obj</var>)</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code><var>obj</var></code></dt> - <dd> 返されることになる列挙可能な自身のプロパティの値を持つオブジェクト。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>与えられたオブジェクトが所有する列挙可能なプロパティの値が入った配列。</p> - -<h2 id="Description" name="Description">解説</h2> - -<p><code>Object.values()</code> は、<code>object</code> に直接存在する列挙可能な値が配列要素の文字列に対応した配列を返します。プロパティの順序はマニュアル操作でオブジェクト内のプロパティに対してループさせた時の順序と同じになります。</p> - -<h2 id="Examples" name="Examples">使用例</h2> - -<pre class="brush: js">const obj = { foo: 'bar', baz: 42 }; -console.log(Object.values(obj)); // ['bar', 42] - -// 配列風オブジェクト -const arrayLikeObj1 = { 0: 'a', 1: 'b', 2: 'c' }; -console.log(Object.values(arrayLikeObj1 )); // ['a', 'b', 'c'] - -// ランダムなキー順序を持つ配列風オブジェクト -// 数値のキーを使用すると、値はキーの番号順に返される -const arrayLikeObj2 = { 100: 'a', 2: 'b', 7: 'c' }; -console.log(Object.values(arrayLikeObj2 )); // ['b', 'c', 'a'] - -// 列挙可能でないプロパティ getFoo がある -const my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } }); -my_obj.foo = 'bar'; -console.log(Object.values(my_obj)); // ['bar'] - -// オブジェクトでない引数はオブジェクトへと型強制される -console.log(Object.values('foo')); // ['f', 'o', 'o'] -</pre> - -<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> - -<p><code>Object.values</code> に対応していない古い環境と互換性を持たせる場合は、 <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> や <a href="https://github.com/es-shims/Object.values">es-shims/Object.values</a> 内にポリフィルがあります。</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-object.values', 'Object.values')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.Object.values")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">プロパティの列挙可能性と所有権</a></li> - <li>{{jsxref("Object.keys()")}}</li> - <li>{{jsxref("Object.entries()")}}</li> - <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li> - <li>{{jsxref("Object.create()")}}</li> - <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/values/index.md b/files/ja/web/javascript/reference/global_objects/object/values/index.md new file mode 100644 index 0000000000..6f96d859e1 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/values/index.md @@ -0,0 +1,84 @@ +--- +title: Object.values() +slug: Web/JavaScript/Reference/Global_Objects/Object/values +tags: + - JavaScript + - メソッド + - Object + - リファレンス + - Polyfill +browser-compat: javascript.builtins.Object.values +translation_of: Web/JavaScript/Reference/Global_Objects/Object/values +--- +{{JSRef}} + +**`Object.values()`** メソッドは、指定されたオブジェクトが持つ列挙可能なプロパティの値を、 {{jsxref("Statements/for...in", "for...in")}} ループで提供される場合と同じ順序で配列にして返します。 (違いは、 `for...in` ループではプロパティチェーン上のプロパティも同様に列挙するという点だけです。) + +{{EmbedInteractiveExample("pages/js/object-values.html")}} + +## 構文 + +```js +Object.values(obj) +``` + +### 引数 + +- `obj` + - : 返値となる列挙可能な自身のプロパティの値を持つオブジェクト。 + +### 返値 + +与えられたオブジェクトが所有する列挙可能なプロパティの値が入った配列。 + +## 解説 + +`Object.values()` は、`object` に直接存在する列挙可能な値が配列要素の文字列に対応した配列を返します。プロパティの順序はマニュアル操作でオブジェクト内のプロパティに対してループさせた時の順序と同じになります。 + +## ポリフィル + +`Object.values` をネイティブで対応していない古い環境に対応するために、 [tc39/proposal-object-values-entries](https://github.com/tc39/proposal-object-values-entries) や [es-shims/Object.values](https://github.com/es-shims/Object.values) などのリポジトリーにポリフィルがあります。 + +## 例 + +### Object.values の使用 + +```js +const obj = { foo: 'bar', baz: 42 }; +console.log(Object.values(obj)); // ['bar', 42] + +// 配列風オブジェクト +const arrayLikeObj1 = { 0: 'a', 1: 'b', 2: 'c' }; +console.log(Object.values(arrayLikeObj1 )); // ['a', 'b', 'c'] + +// ランダムなキー順序を持つ配列風オブジェクト +// 数値のキーを使用すると、値はキーの番号順に返される +const arrayLikeObj2 = { 100: 'a', 2: 'b', 7: 'c' }; +console.log(Object.values(arrayLikeObj2 )); // ['b', 'c', 'a'] + +// 列挙可能でないプロパティ getFoo がある +const my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } }); +my_obj.foo = 'bar'; +console.log(Object.values(my_obj)); // ['bar'] + +// オブジェクトでない引数はオブジェクトへと型強制される +console.log(Object.values('foo')); // ['f', 'o', 'o'] +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- `Object.values` のポリフィルが [`core-js`](https://github.com/zloirock/core-js#ecmascript-object) にあります +- [プロパティの列挙可能性と所有権](/ja/docs/Web/JavaScript/Enumerability_and_ownership_of_properties) +- {{jsxref("Object.keys()")}} +- {{jsxref("Object.entries()")}} +- {{jsxref("Object.prototype.propertyIsEnumerable()")}} +- {{jsxref("Object.create()")}} +- {{jsxref("Object.getOwnPropertyNames()")}} diff --git a/files/ja/web/javascript/reference/global_objects/promise/all/index.html b/files/ja/web/javascript/reference/global_objects/promise/all/index.html deleted file mode 100644 index 2c0ab3e22d..0000000000 --- a/files/ja/web/javascript/reference/global_objects/promise/all/index.html +++ /dev/null @@ -1,234 +0,0 @@ ---- -title: Promise.all() -slug: Web/JavaScript/Reference/Global_Objects/Promise/all -tags: - - ECMAScript 2015 - - JavaScript - - Method - - Promise - - all - - メソッド -translation_of: Web/JavaScript/Reference/Global_Objects/Promise/all ---- -<div>{{JSRef}}</div> - -<p><strong><code>Promise.all(<var>iterable</var>)</code></strong> メソッドは単一の {{jsxref("Promise")}} を返し、これは引数 <var>iterable</var> の中のすべての Promise が解決されるか、引数 <var>iterable</var> の中に Promise がない場合に解決されます。最初に拒否された Promise の拒否理由をもって拒否されます。</p> - -<div>{{EmbedInteractiveExample("pages/js/promise-all.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">Promise.all(<var>iterable</var>);</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><var>iterable</var></dt> - <dd>{{jsxref("Array")}} や {{jsxref("String")}} のような<ruby><a href="/ja/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol">反復処理可能</a><rp> (</rp><rt>iterable</rt><rp>) </rp></ruby>なオブジェクト。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<ul> - <li>渡した <var>iterable</var> が空の場合、<strong>解決済み</strong>の {{jsxref("Promise")}}。</li> - <li>渡した <var>iterable</var> に Promise がない場合、<strong>非同期に解決した</strong> {{jsxref("Promise")}}。ただし、 Google Chrome 58 ではこの場合。<strong>すでに解決した</strong> Promise を返す。</li> - <li>その他の場合は<strong>待ち状態</strong>の {{jsxref("Promise")}} 。この返却される promise は次に、 <var>iterable</var> として与えられたすべての Promise が解決するか、すべての Promise が拒否されると<strong>非同期に</strong> (スタックが空になるとすぐに) 解決/拒否されます。以下の「Promise.all の非同期性・同期性」の例を見てください。返値は、実行完了の順とは関係なく、 Promise が渡された順に並びます。</li> -</ul> - -<h2 id="Description" name="Description">解説</h2> - -<p>このメソッドは複数の Promise の結果を集約するのに便利です。</p> - -<p>完成:<br> - 空の <var>iterable</var> が渡された場合、このメソッドはすでに解決した Promise を (同期的に) 返します。<br> - 渡された Promise のすべてが満たされるか、 Promise が渡されていない場合、 <code>Promise.all</code> によって返される Promise が非同期的に完成されます。<br> - すべての場合で、返された Promise は、引数として渡された <var>iterable</var> の<strong>すべての</strong>値 (Promise ではない値も) を含んだ配列で完成されます。</p> - -<p>拒否:<br> - 渡された Promise のいずれかが拒否されたら、 <code>Promise.all</code> は非同期的に、その他の Promise が完了しているかどうかに関係なく、その拒否した Promise の値で拒否されます。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_Promise.all" name="Using_Promise.all"><code>Promise.all</code> の使用</h3> - -<p><code>Promise.all</code>はすべての完成 (または最初の拒否) を待ちます。</p> - -<pre class="brush: js">var p1 = Promise.resolve(3); -var p2 = 1337; -var p3 = new Promise((resolve, reject) => { - setTimeout(() => { - resolve("foo"); - }, 100); -}); - -Promise.all([p1, p2, p3]).then(values => { - console.log(values); // [3, 1337, "foo"] -});</pre> - -<p><var>iterable</var> に Promise ではない値が含まれる場合は無視されますが、 (Promise が成功する場合) 返される Promise 配列の値にはカウントされます。</p> - -<pre class="brush: js">// this will be counted as if the iterable passed is empty, so it gets fulfilled -var p = Promise.all([1,2,3]); -// this will be counted as if the iterable passed contains only the resolved promise with value "444", so it gets fulfilled -var p2 = Promise.all([1,2,3, Promise.resolve(444)]); -// this will be counted as if the iterable passed contains only the rejected promise with value "555", so it gets rejected -var p3 = Promise.all([1,2,3, Promise.reject(555)]); - -// using setTimeout we can execute code after the stack is empty -setTimeout(function() { - console.log(p); - console.log(p2); - console.log(p3); -}); - -// logs -// Promise { <state>: "fulfilled", <value>: Array[3] } -// Promise { <state>: "fulfilled", <value>: Array[4] } -// Promise { <state>: "rejected", <reason>: 555 }</pre> - -<h3 id="Promise.all_の非同期性・同期性"><code>Promise.all</code> の非同期性・同期性</h3> - -<p>以下の例では <code>Promise.all</code> の非同期性 (または渡されたiterable が空の場合、同期性) を実演します。</p> - -<pre class="brush: js">// we are passing as argument an array of promises that are already resolved, -// to trigger Promise.all as soon as possible -var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)]; - -var p = Promise.all(resolvedPromisesArray); -// immediately logging the value of p -console.log(p); - -// using setTimeout we can execute code after the stack is empty -setTimeout(function() { - console.log('the stack is now empty'); - console.log(p); -}); - -// logs, in order: -// Promise { <state>: "pending" } -// the stack is now empty -// Promise { <state>: "fulfilled", <value>: Array[2] } -</pre> - -<p><code>Promise.all</code> が拒否されたときも同じことが起きます.。</p> - -<pre class="brush: js">var mixedPromisesArray = [Promise.resolve(33), Promise.reject(44)]; -var p = Promise.all(mixedPromisesArray); -console.log(p); -setTimeout(function() { - console.log('the stack is now empty'); - console.log(p); -}); - -// logs -// Promise { <state>: "pending" } -// the stack is now empty -// Promise { <state>: "rejected", <reason>: 44 } -</pre> - -<p>しかし、<code>Promise.all</code> は渡された <var>iterable</var> が空の<strong>場合だけ</strong>同期的に解決します。</p> - -<pre class="brush: js">var p = Promise.all([]); // will be immediately resolved -var p2 = Promise.all([1337, "hi"]); // non-promise values will be ignored, but the evaluation will be done asynchronously -console.log(p); -console.log(p2) -setTimeout(function() { - console.log('the stack is now empty'); - console.log(p2); -}); - -// logs -// Promise { <state>: "fulfilled", <value>: Array[0] } -// Promise { <state>: "pending" } -// the stack is now empty -// Promise { <state>: "fulfilled", <value>: Array[2] } -</pre> - -<h3 id="Promise.all_fail-fast_behaviour" name="Promise.all_fail-fast_behaviour"><code>Promise.all</code>のフェイルファストの挙動</h3> - -<p><code>Promise.all</code> は要素のひとつでも拒否されると拒否します。例えば、タイムアウト後に4つの Promise が解決しても、1つの Promise が直ちに拒否された場合、 <code>Promise.all</code> は直ちに拒否します。</p> - -<pre class="brush: js">var p1 = new Promise((resolve, reject) => { - setTimeout(() => resolve('one'), 1000); -}); -var p2 = new Promise((resolve, reject) => { - setTimeout(() => resolve('two'), 2000); -}); -var p3 = new Promise((resolve, reject) => { - setTimeout(() => resolve('three'), 3000); -}); -var p4 = new Promise((resolve, reject) => { - setTimeout(() => resolve('four'), 4000); -}); -var p5 = new Promise((resolve, reject) => { - reject(new Error('reject')); -}); - - -// Using .catch: -Promise.all([p1, p2, p3, p4, p5]) -.then(values => { - console.log(values); -}) -.catch(error => { - console.log(error.message) -}); - -//From console: -//"reject" - -</pre> - -<p>この動作は失敗する可能性を制御することで変更することができます。</p> - -<pre class="brush: js">var p1 = new Promise((resolve, reject) => { - setTimeout(() => resolve('p1_delayed_resolvement'), 1000); -}); - -var p2 = new Promise((resolve, reject) => { - reject(new Error('p2_immediate_rejection')); -}); - -Promise.all([ - p1.catch(error => { return error }), - p2.catch(error => { return error }), -]).then(values => { - console.log(values[0]) // "p1_delayed_resolvement" - console.log(values[1]) // "Error: p2_immediate_rejection" -}) -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-promise.all', 'Promise.all')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>ECMA 標準としての初回定義</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-promise.all', 'Promise.all')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("javascript.builtins.Promise.all")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Promise")}}</li> - <li>{{jsxref("Promise.race()")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/promise/all/index.md b/files/ja/web/javascript/reference/global_objects/promise/all/index.md new file mode 100644 index 0000000000..d2711e74a5 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/promise/all/index.md @@ -0,0 +1,221 @@ +--- +title: Promise.all() +slug: Web/JavaScript/Reference/Global_Objects/Promise/all +tags: + - ECMAScript 2015 + - JavaScript + - メソッド + - Promise +browser-compat: javascript.builtins.Promise.all +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/all +--- +{{JSRef}} + +**`Promise.all()`** メソッドは入力としてプロミスの集合の反復可能オブジェクトを取り、入力したプロミスの集合の結果の配列に解決される単一の {{jsxref("Promise")}} を返します。この返却されたプロミスは、入力したプロミスがすべて解決されるか、入力した反復可能オブジェクトにプロミスが含まれていない場合に解決されます。入力したプロミスのいずれかが拒否されるか、プロミス以外のものがエラーを発生させると直ちに拒否され、最初に拒否されたメッセージまたはエラーをもって拒否されます。 + +{{EmbedInteractiveExample("pages/js/promise-all.html")}} + +## 構文 + +```js +Promise.all(iterable); +``` + +### 引数 + +- `iterable` + - : [反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol)オブジェクト、例えば {{jsxref("Array")}} など。 + +### 返値 + +- 渡された*反復可能*オブジェクトが空であった場合は、**解決済み**の {{jsxref("Promise")}} です。 +- 渡された*反復可能*オブジェクトにプロミスがなかった場合、**非同期に解決した** {{jsxref("Promise")}} です。ただし、 Google Chrome 58 ではこの場合。**解決済み**のプロミスを返します。 +- その他の場合は**待機状態**の {{jsxref("Promise")}} 。この返却されるプロミスはそれから、*反復可能*オブジェクトで与えられたすべてのプロミスが解決したとき、**非同期に** (スタックが空になるとすぐに) 解決/拒否されます。下記の「Promise.all の非同期性・同期性」の例を見てください。返値は、実行完了順とは関係なく、 Promise が渡された順に並びます。 + +## 解説 + +このメソッドは複数のプロミスの結果を集約するのに便利です。このメソッドは、コード全体が正常に動作するために依存している複数の関連する非同期タスクがあり、コードの実行を続ける前にそれらすべてを履行させたい場合によく使われます。 + +`Promise.all()` は、入力されたプロミスの**いずれか**が拒否されると直ちに拒否されます。それに対して、{{jsxref("Promise.allSettled()")}} が返すプロミスは、入力されたプロミスが拒否されたかどうかに関わらず、すべての入力されたプロミスが完了するのを待ちます。その結果、入力された反復可能オブジェクトのすべてのプロミスと関数の最終結果を常に返します。 + +### 履行の場合 + +返されたプロミスは、引数として渡された*反復可能*オブジェクトに含まれる**すべて**の解決済みの値 (プロミス以外の値を含む) を含む配列で履行されます。 + +- 空の*反復可能*オブジェクトが渡された場合は、このメソッドが返すプロミスは同期的に履行されます。解決される値は空の配列です。 +- 空ではない*反復可能*オブジェクトが渡され、**すべて**のプロミスが履行されるか、またはプロミスではなかった場合、このメソッドが返すプロミスは非同期に履行されます。 + +### 拒否の場合 + +渡されたプロミスのいずれかが拒否された場合、`Promise.all` は、他のプロミスが解決したかどうかに関わらず、拒否されたプロミスの値で非同期的に拒否されます。 + +## 例 + +### `Promise.all` の使用 + +`Promise.all` はすべての履行 (または最初の拒否) を待ちます。 + +```js +var p1 = Promise.resolve(3); +var p2 = 1337; +var p3 = new Promise((resolve, reject) => { + setTimeout(() => { + resolve("foo"); + }, 100); +}); + +Promise.all([p1, p2, p3]).then(values => { + console.log(values); // [3, 1337, "foo"] +}); +``` + +*反復可能*オブジェクトにプロミスではない値が含まれる場合は無視されますが、 (プロミスが履行された場合) 返されるプロミスの配列の値にはカウントされます。 + +```js +// これは、渡された反復可能オブジェクトが空であるかのようにカウントされるので、履行される +var p = Promise.all([1,2,3]); +// これは、渡された反復可能オブジェクトに、 "444" の値で解決されたプロミスだけが含まれているようにカウントされるので、履行される +var p2 = Promise.all([1,2,3, Promise.resolve(444)]); +// これは、渡された反復可能オブジェクトに、 "555" の値で拒否されたプロミスだけが含まれているようにカウントされるので、拒否される +var p3 = Promise.all([1,2,3, Promise.reject(555)]); + +// setTimeout を使うことで、スタックが空になってからコードを実行することができる +setTimeout(function() { + console.log(p); + console.log(p2); + console.log(p3); +}); + +// ログ +// Promise { <state>: "fulfilled", <value>: Array[3] } +// Promise { <state>: "fulfilled", <value>: Array[4] } +// Promise { <state>: "rejected", <reason>: 555 } +``` + +### `Promise.all` の非同期性・同期性 + +以下の例では `Promise.all` の非同期性 (または渡された*反復可能*オブジェクトが空の場合、同期性) を実演します。 + +```js +// Promise.all をできるだけ早く起動するために、すでに解決されたプロミスの +// 配列を引数として渡している +var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)]; + +var p = Promise.all(resolvedPromisesArray); +// p の値を直接ログ出力 +console.log(p); + +// setTimeout を使用してスタックが空になった後にコードを実行することができる +setTimeout(function() { + console.log('the stack is now empty'); + console.log(p); +}); + +// logs, in order: +// Promise { <state>: "pending" } +// the stack is now empty +// Promise { <state>: "fulfilled", <value>: Array[2] } +``` + +`Promise.all` が拒否されたときも同じことが起きます.。 + +```js +var mixedPromisesArray = [Promise.resolve(33), Promise.reject(44)]; +var p = Promise.all(mixedPromisesArray); +console.log(p); +setTimeout(function() { + console.log('the stack is now empty'); + console.log(p); +}); + +// logs +// Promise { <state>: "pending" } +// the stack is now empty +// Promise { <state>: "rejected", <reason>: 44 } +``` + +しかし、`Promise.all` は渡された*反復可能*オブジェクトが空の**場合だけ**同期的に解決します。 + +```js +var p = Promise.all([]); // 直ちに解決される +var p2 = Promise.all([1337, "hi"]); // プロミスではない値は無視されるが、評価は非同期に行われる +console.log(p); +console.log(p2) +setTimeout(function() { + console.log('the stack is now empty'); + console.log(p2); +}); + +// logs +// Promise { <state>: "fulfilled", <value>: Array[0] } +// Promise { <state>: "pending" } +// the stack is now empty +// Promise { <state>: "fulfilled", <value>: Array[2] } +``` + +### `Promise.all`のフェイルファストの挙動 + +`Promise.all` は要素のひとつでも拒否されると拒否します。例えば、タイムアウト後に 4 つのプロミスが解決しても、 1 つのプロミスが直ちに拒否された場合、 `Promise.all` は直ちに拒否されます。 + +```js +var p1 = new Promise((resolve, reject) => { + setTimeout(() => resolve('one'), 1000); +}); +var p2 = new Promise((resolve, reject) => { + setTimeout(() => resolve('two'), 2000); +}); +var p3 = new Promise((resolve, reject) => { + setTimeout(() => resolve('three'), 3000); +}); +var p4 = new Promise((resolve, reject) => { + setTimeout(() => resolve('four'), 4000); +}); +var p5 = new Promise((resolve, reject) => { + reject(new Error('reject')); +}); + +// Using .catch: +Promise.all([p1, p2, p3, p4, p5]) +.then(values => { + console.log(values); +}) +.catch(error => { + console.error(error.message) +}); + +//From console: +//"reject" +``` + +この動作は失敗する可能性を制御することで変更することができます。 + +```js +var p1 = new Promise((resolve, reject) => { + setTimeout(() => resolve('p1_delayed_resolution'), 1000); +}); + +var p2 = new Promise((resolve, reject) => { + reject(new Error('p2_immediate_rejection')); +}); + +Promise.all([ + p1.catch(error => { return error }), + p2.catch(error => { return error }), +]).then(values => { + console.log(values[0]) // "p1_delayed_resolution" + console.error(values[1]) // "Error: p2_immediate_rejection" +}) +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Promise")}} +- {{jsxref("Promise.race()")}} diff --git a/files/ja/web/javascript/reference/global_objects/promise/catch/index.html b/files/ja/web/javascript/reference/global_objects/promise/catch/index.html index 277bda3b8a..de96865a6e 100644 --- a/files/ja/web/javascript/reference/global_objects/promise/catch/index.html +++ b/files/ja/web/javascript/reference/global_objects/promise/catch/index.html @@ -76,7 +76,7 @@ Promise.resolve().catch(function XXX(){}); <h2 id="Description" name="Description">解説</h2> -<p><code>catch</code> メソッドは複合したプロミスの複合のエラー処理に使用されます。これは {{jsxref("Promise")}} を返しますので、姉妹メソッドである {{jsxref("Promise.then", "then()")}} と同様の方法で<a href="/en-US/docs/Web/JavaScript/Guide/Using_promises#Chaining_after_a_catch">チェーン可能</a>です。</p> +<p><code>catch</code> メソッドは複合したプロミスの複合のエラー処理に使用されます。これは {{jsxref("Promise")}} を返しますので、姉妹メソッドである {{jsxref("Promise.then", "then()")}} と同様の方法で<a href="/ja/docs/Web/JavaScript/Guide/Using_promises#Chaining_after_a_catch">チェーン可能</a>です。</p> <h2 id="Examples" name="Examples">例</h2> diff --git a/files/ja/web/javascript/reference/global_objects/promise/then/index.html b/files/ja/web/javascript/reference/global_objects/promise/then/index.html index f0ad7223d5..8fef7186d4 100644 --- a/files/ja/web/javascript/reference/global_objects/promise/then/index.html +++ b/files/ja/web/javascript/reference/global_objects/promise/then/index.html @@ -197,7 +197,7 @@ p2.then(function(value) { <p>Promise ベースの API を持った関数同士であれば、別の関数上に他の関数を実装することでチェーンを使うこともできます。</p> <pre class="brush: js notranslate">function fetch_current_data() { - // The <a href="/en-US/docs/Web/API/GlobalFetch/fetch">fetch</a>() API returns a Promise. This function + // The <a href="/ja/docs/Web/API/GlobalFetch/fetch">fetch</a>() API returns a Promise. This function // exposes a similar API, except the fulfillment // value of this function's Promise has had more // work done on it. diff --git a/files/ja/web/javascript/reference/global_objects/proxy/revocable/index.html b/files/ja/web/javascript/reference/global_objects/proxy/revocable/index.html deleted file mode 100644 index b1f9e54ea8..0000000000 --- a/files/ja/web/javascript/reference/global_objects/proxy/revocable/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Proxy.revocable() -slug: Web/JavaScript/Reference/Global_Objects/Proxy/revocable -tags: - - ECMAScript 2015 - - JavaScript - - Method - - Proxy -translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/revocable ---- -<div>{{JSRef}}</div> - -<p><code><strong>Proxy.revocable()</strong></code> メソッドは、取り消し可能な {{jsxref("Proxy")}} オブジェクトを作成できます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">Proxy.revocable(<var>target</var>, <var>handler</var>); -</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<div> -<dl> - <dt><code><var>target</var></code></dt> - <dd><code>Proxy</code> でラップする対象のオブジェクトです。これは一連のオブジェクト、例えばネイティブの配列、関数、他の. Proxy などを取ることもできます。</dd> - <dt><code><var>handler</var></code></dt> - <dd>オブジェクトで、プロパティが操作が実行されたときのプロキシ <code><var>p</var></code> の動作を定義する関数であるものです。</dd> -</dl> -</div> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>新しく作成された取り消し可能な <code>Proxy</code> オブジェクト。</p> - -<h2 id="Description" name="Description">解説</h2> - -<p>取り消し可能な <code>Proxy</code> は次の２つのプロパティ <code>{proxy: proxy, revoke: revoke}</code> を持ったオブジェクトです。</p> - -<dl> - <dt><code>proxy</code></dt> - <dd><code>new Proxy(target, handler)</code> 呼び出しで生成したプロキシオブジェクトです。</dd> - <dt><code>revoke</code></dt> - <dd><code>proxy</code> を無効にするための引数を持たない関数です。</dd> -</dl> - -<p><code>revoke()</code> 関数を呼ぶと、プロキシオブジェクトは使用できなくなり、ハンドラーへのどんなトラップも {{jsxref("TypeError")}} をスローします。プロキシが取り消されると、取り消されたままになり、ガベージコレクションの対象となります。再度 <code>revoke()</code> が呼ばれても影響はありません。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<pre class="brush: js">var revocable = Proxy.revocable({}, { - get: function(target, name) { - return "[[" + name + "]]"; - } -}); -var proxy = revocable.proxy; -console.log(proxy.foo); // "[[foo]]" - -revocable.revoke(); - -console.log(proxy.foo); // TypeError is thrown -proxy.foo = 1 // TypeError again -delete proxy.foo; // still TypeError -typeof proxy // "object", typeof doesn't trigger any trap -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-proxy.revocable', 'Proxy Revocation Functions')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.Proxy.revocable")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Proxy")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/proxy/revocable/index.md b/files/ja/web/javascript/reference/global_objects/proxy/revocable/index.md new file mode 100644 index 0000000000..25045bea38 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/proxy/revocable/index.md @@ -0,0 +1,75 @@ +--- +title: Proxy.revocable() +slug: Web/JavaScript/Reference/Global_Objects/Proxy/revocable +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Proxy +browser-compat: javascript.builtins.Proxy.revocable +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/revocable +--- +{{JSRef}} + +**`Proxy.revocable()`** メソッドは、取り消し可能な {{jsxref("Proxy")}} オブジェクトを作成するために使用します。 + +## 構文 + +```js +Proxy.revocable(target, handler); +``` + +### 引数 + +- `target` + - : `Proxy` でラップする対象のオブジェクトです。これは一連のオブジェクト、例えばネイティブの配列、関数、他のプロキシーなどを取ることもできます。 +- `handler` + - : プロキシー `p` に対して操作が行われたときの動作を定義する関数をプロパティとするオブジェクトです。 + +### 返値 + +新しく作成された取り消し可能な `Proxy` オブジェクト。 + +## 解説 + +取り消し可能な `Proxy` は `{proxy: proxy, revoke: revoke}` の 2 つのプロパティを持ったオブジェクトです。 + +- `proxy` + - : `new Proxy(target, handler)` 呼び出しで生成したプロキシーオブジェクトです。 +- `revoke` + - : `proxy` を無効にするための引数を持たない関数です。 + +`revoke()` 関数を呼び出すと、プロキシーオブジェクトは使用できなくなります。ハンドラーへのトラップが発生すると、どれでも {{jsxref("TypeError")}} が発生します。プロキシーが取り消されると、取り消されたままになり、ガベージコレクションの対象となります。再度 `revoke()` が呼ばれても影響はありません。 + +## 例 + +### Proxy.revocable の使用 + +```js +var revocable = Proxy.revocable({}, { + get: function(target, name) { + return "[[" + name + "]]"; + } +}); +var proxy = revocable.proxy; +console.log(proxy.foo); // "[[foo]]" + +revocable.revoke(); + +console.log(proxy.foo); // TypeError が発生 +proxy.foo = 1 // TypeError が発生 +delete proxy.foo; // これも TypeError +typeof proxy // "object" と表示。 typeof でトラップは発生しない +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Proxy")}} diff --git a/files/ja/web/javascript/reference/global_objects/reflect/has/index.html b/files/ja/web/javascript/reference/global_objects/reflect/has/index.html index 8a466f61df..e692b9c9b6 100644 --- a/files/ja/web/javascript/reference/global_objects/reflect/has/index.html +++ b/files/ja/web/javascript/reference/global_objects/reflect/has/index.html @@ -61,7 +61,7 @@ Reflect.has(obj, 'doorbell') // true Reflect.has(obj, 'dormitory') // false </pre> -<p><code>Reflect.has</code> は継承されたプロパティについて <code>true</code> を返し、これは <a href="/en-US/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> 演算子</a>と同様です。</p> +<p><code>Reflect.has</code> は継承されたプロパティについて <code>true</code> を返し、これは <a href="/ja/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> 演算子</a>と同様です。</p> <pre class="brush: js notranslate">const a = {foo: 123} const b = {__proto__: a} diff --git a/files/ja/web/javascript/reference/global_objects/regexp/index.html b/files/ja/web/javascript/reference/global_objects/regexp/index.html index 8fc458ebfa..bb99de9a76 100644 --- a/files/ja/web/javascript/reference/global_objects/regexp/index.html +++ b/files/ja/web/javascript/reference/global_objects/regexp/index.html @@ -53,7 +53,7 @@ let re = new RegExp('\\w+') <h3 id="Perl-like_RegExp_properties" name="Perl-like_RegExp_properties">Perl 風の RegExp プロパティ</h3> -<p>{{JSxRef("RegExp")}} のプロパティのいくつかは、長い名前と短い (Perl 風の) 名前があります。 Both names always refer to the same value. (Perl is the programming language from which JavaScript modeled its regular expressions.). See also <a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#RegExp_Properties">deprecated <code>RegExp</code> properties.</a></p> +<p>{{JSxRef("RegExp")}} のプロパティのいくつかは、長い名前と短い (Perl 風の) 名前があります。 Both names always refer to the same value. (Perl is the programming language from which JavaScript modeled its regular expressions.). See also <a href="/ja/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#RegExp_Properties">deprecated <code>RegExp</code> properties.</a></p> <h2 id="Constructor" name="Constructor">コンストラクター</h2> diff --git a/files/ja/web/javascript/reference/global_objects/regexp/lastmatch/index.html b/files/ja/web/javascript/reference/global_objects/regexp/lastmatch/index.html index 73dc55ee32..53b82c35d6 100644 --- a/files/ja/web/javascript/reference/global_objects/regexp/lastmatch/index.html +++ b/files/ja/web/javascript/reference/global_objects/regexp/lastmatch/index.html @@ -21,7 +21,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/lastMatch <p><code>lastMatch</code> プロパティの値は、読み取り専用で、一致に成功するたびに変更されます。</p> -<p>ドットプロパティアクセサー (<code>RegExp.$&</code>) で短縮エイリアスを使用することはできません。その場合、パーサーは "&" という表現を期待して {{jsxref("SyntaxError")}} が発生します。<a href="/docs/Web/JavaScript/Reference/Operators/Property_Accessors">プロパティへのアクセスにはブラケット表記法</a>を使用してください。</p> +<p>ドットプロパティアクセサー (<code>RegExp.$&</code>) で短縮エイリアスを使用することはできません。その場合、パーサーは "&" という表現を期待して {{jsxref("SyntaxError")}} が発生します。<a href="/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors">プロパティへのアクセスにはブラケット表記法</a>を使用してください。</p> <h2 id="Examples" name="Examples">例</h2> diff --git a/files/ja/web/javascript/reference/global_objects/regexp/lastparen/index.html b/files/ja/web/javascript/reference/global_objects/regexp/lastparen/index.html index 678915a5a0..1eee172d9b 100644 --- a/files/ja/web/javascript/reference/global_objects/regexp/lastparen/index.html +++ b/files/ja/web/javascript/reference/global_objects/regexp/lastparen/index.html @@ -21,7 +21,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/lastParen <p><code>lastParen</code> プロパティの値は読み取り専用で、一致に成功するたびに変更されます。</p> -<p>ドットプロパティアクセサー (<code>RegExp.$+</code>) で短縮エイリアスを使用することはできません。その場合、パーサーは "+" という表現を期待して {{jsxref("SyntaxError")}} が発生します。<a href="/docs/Web/JavaScript/Reference/Operators/Property_Accessors">プロパティへのアクセスにはブラケット表記法</a>を使用してください。</p> +<p>ドットプロパティアクセサー (<code>RegExp.$+</code>) で短縮エイリアスを使用することはできません。その場合、パーサーは "+" という表現を期待して {{jsxref("SyntaxError")}} が発生します。<a href="/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors">プロパティへのアクセスにはブラケット表記法</a>を使用してください。</p> <h2 id="Examples" name="Examples">例</h2> diff --git a/files/ja/web/javascript/reference/global_objects/regexp/leftcontext/index.html b/files/ja/web/javascript/reference/global_objects/regexp/leftcontext/index.html index 3d86bdc8c5..26770b94bb 100644 --- a/files/ja/web/javascript/reference/global_objects/regexp/leftcontext/index.html +++ b/files/ja/web/javascript/reference/global_objects/regexp/leftcontext/index.html @@ -21,7 +21,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/leftContext <p><code>leftContext</code> プロパティの値は読み取り専用で、一致に成功するたびに変更されます。</p> -<p>ドットプロパティアクセサー (<code>RegExp.$`</code>) で短縮エイリアスを使用することはできません。その場合、パーサーはテンプレート文字列の開始をを期待して {{jsxref("SyntaxError")}} が発生します。<a href="/docs/Web/JavaScript/Reference/Operators/Property_Accessors">プロパティへのアクセスにはブラケット表記法</a>を使用してください。</p> +<p>ドットプロパティアクセサー (<code>RegExp.$`</code>) で短縮エイリアスを使用することはできません。その場合、パーサーはテンプレート文字列の開始をを期待して {{jsxref("SyntaxError")}} が発生します。<a href="/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors">プロパティへのアクセスにはブラケット表記法</a>を使用してください。</p> <h2 id="Examples" name="Examples">例</h2> diff --git a/files/ja/web/javascript/reference/global_objects/regexp/regexp/index.html b/files/ja/web/javascript/reference/global_objects/regexp/regexp/index.html index 9f0901f62a..b6c708ea31 100644 --- a/files/ja/web/javascript/reference/global_objects/regexp/regexp/index.html +++ b/files/ja/web/javascript/reference/global_objects/regexp/regexp/index.html @@ -32,7 +32,7 @@ RegExp(<var>pattern</var>[, <var>flags</var>]) <dl> <dt><code><var>pattern</var></code></dt> <dd>正規表現のテキストです。</dd> - <dd>ES5 以降では、別な <code>RegExp</code> オブジェクトまたはリテラルにすることができます (後者は 2 つの RegExp コンストラクター記法のみ)。パターンには<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions#Using_special_characters">特殊文字</a>を含めることができるため、文字列リテラルよりも広い範囲の値に一致させることができます。</dd> + <dd>ES5 以降では、別な <code>RegExp</code> オブジェクトまたはリテラルにすることができます (後者は 2 つの RegExp コンストラクター記法のみ)。パターンには<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions#Using_special_characters">特殊文字</a>を含めることができるため、文字列リテラルよりも広い範囲の値に一致させることができます。</dd> <dt><code><var>flags</var></code></dt> <dd> <p>指定された場合、 <code><var>flags</var></code> は追加するフラグを含む文字列です。</p> diff --git a/files/ja/web/javascript/reference/global_objects/regexp/test/index.html b/files/ja/web/javascript/reference/global_objects/regexp/test/index.html index 00fb7cad86..60324a1aff 100644 --- a/files/ja/web/javascript/reference/global_objects/regexp/test/index.html +++ b/files/ja/web/javascript/reference/global_objects/regexp/test/index.html @@ -70,7 +70,7 @@ console.log(result); // true <h3 id="Using_test_on_a_regex_with_the_global_flag" name="Using_test_on_a_regex_with_the_global_flag">グローバルフラグを持つ正規表現の test() の使用</h3> -<p>正規表現に<a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Advanced_searching_with_flags_2">グローバルフラグ</a>が設定されている場合、 <code>test()</code> は正規表現が所有する {{jsxref("RegExp.lastIndex", "lastIndex")}} の値を加算します。 ({{jsxref("RegExp.prototype.exec()", "exec()")}} も同様に <code>lastIndex</code> プロパティの値を加算します。)</p> +<p>正規表現に<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions#Advanced_searching_with_flags_2">グローバルフラグ</a>が設定されている場合、 <code>test()</code> は正規表現が所有する {{jsxref("RegExp.lastIndex", "lastIndex")}} の値を加算します。 ({{jsxref("RegExp.prototype.exec()", "exec()")}} も同様に <code>lastIndex</code> プロパティの値を加算します。)</p> <p>その後にさらに <code>test(<var>str</var>)</code> を呼び出すと、 <code><var>str</var></code> を <code>lastIndex</code> から検索します。 <code>lastIndex</code> プロパティは <code>test()</code> が <code>true</code> を返すたびに増え続けます。</p> diff --git a/files/ja/web/javascript/reference/global_objects/string/localecompare/index.html b/files/ja/web/javascript/reference/global_objects/string/localecompare/index.html index 591b71b94f..e88234381b 100644 --- a/files/ja/web/javascript/reference/global_objects/string/localecompare/index.html +++ b/files/ja/web/javascript/reference/global_objects/string/localecompare/index.html @@ -35,7 +35,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/localeCompare <dd> <p>これらの引数は関数の振る舞いをカスタマイズし、使用されるべきフォーマット規約の言語をアプリケーションに決めさせます。引数 <code><var>locales</var></code> 、 <code><var>options</var></code> を無視する実装においては、使用されるロケールと返却される文字列の書式は完全に実装依存となります。</p> - <p>これらのパラメーターの詳細及び使用方法については <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator/Collator"><code>Intl.Collator()</code> コンストラクター</a> を見てください。</p> + <p>これらのパラメーターの詳細及び使用方法については <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Collator/Collator"><code>Intl.Collator()</code> コンストラクター</a> を見てください。</p> </dd> </dl> diff --git a/files/ja/web/javascript/reference/global_objects/symbol/index.html b/files/ja/web/javascript/reference/global_objects/symbol/index.html index 98e81bcdf7..54ccbf84aa 100644 --- a/files/ja/web/javascript/reference/global_objects/symbol/index.html +++ b/files/ja/web/javascript/reference/global_objects/symbol/index.html @@ -12,7 +12,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Symbol <p>データ型 <strong>symbol</strong> は、<a href="/ja/docs/Glossary/Primitive">プリミティブデータ型</a>です。<code>Symbol()</code> 関数は、<strong>symbol</strong> 型の値を返します。これは組み込みオブジェクトを公開するための静的プロパティを持ち、グローバルシンボルレジストリを公開するための静的メソッドを持つので、組み込みオブジェクトクラスのようにも見えますが、コンストラクターとしての機能を持たず、"<code>new Symbol()</code>" はサポートされていません。</p> -<p><code>Symbol()</code> から返されるすべてのシンボル値は一意です。シンボル値は、オブジェクトプロパティの識別子として使用できます。これがデータ型の主な利用目的ですが、不透明なデータ型の有効化や、実装サポートされている一意の識別子として機能するなど、他の利用目的も存在します。目的や使用方法に関する詳細を知りたい場合、<a href="https://developer.mozilla.org/ja/docs/Glossary/Symbol">MDN用語集：Symbol</a> を見てください。</p> +<p><code>Symbol()</code> から返されるすべてのシンボル値は一意です。シンボル値は、オブジェクトプロパティの識別子として使用できます。これがデータ型の主な利用目的ですが、不透明なデータ型の有効化や、実装サポートされている一意の識別子として機能するなど、他の利用目的も存在します。目的や使用方法に関する詳細を知りたい場合、<a href="/ja/docs/Glossary/Symbol">MDN用語集：Symbol</a> を見てください。</p> <h2 id="Description" name="Description">説明</h2> diff --git a/files/ja/web/javascript/reference/global_objects/symbol/unscopables/index.html b/files/ja/web/javascript/reference/global_objects/symbol/unscopables/index.html index a6fea2799b..e1d545e0d3 100644 --- a/files/ja/web/javascript/reference/global_objects/symbol/unscopables/index.html +++ b/files/ja/web/javascript/reference/global_objects/symbol/unscopables/index.html @@ -10,7 +10,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/unscopables --- <div>{{JSRef}}</div> -<p><strong><code>Symbol.unscopables</code></strong> ウェルノウンシンボルは、自身のプロパティ名と継承されたプロパティ名が、関連付けられたオブジェクトの <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code> 環境バインディングから除外されているオブジェクトの値を指定するために使用されます。</p> +<p><strong><code>Symbol.unscopables</code></strong> ウェルノウンシンボルは、自身のプロパティ名と継承されたプロパティ名が、関連付けられたオブジェクトの <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/with">with</a></code> 環境バインディングから除外されているオブジェクトの値を指定するために使用されます。</p> <div>{{EmbedInteractiveExample("pages/js/symbol-unscopables.html")}}</div> diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/@@species/index.html b/files/ja/web/javascript/reference/global_objects/typedarray/@@species/index.html index a42596a4e7..fdeff8482d 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/@@species/index.html +++ b/files/ja/web/javascript/reference/global_objects/typedarray/@@species/index.html @@ -11,17 +11,17 @@ translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/@@species --- <div>{{JSRef}}</div> -<p><code><strong>TypedArray[@@species]</strong></code> アクセッサプロパティは、<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">typed array</a> のコンストラクタを返します。</p> +<p><code><strong>TypedArray[@@species]</strong></code> アクセッサプロパティは、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">typed array</a> のコンストラクタを返します。</p> <h2 id="説明">説明</h2> -<p><code>species</code> アクセッサプロパティは、<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">typed array</a> オブジェクトの既定のコンストラクタを返します。サブクラスのコンストラクタは、コンストラクタの割り当てを変更するために、これをオーバーライドできます。</p> +<p><code>species</code> アクセッサプロパティは、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">typed array</a> オブジェクトの既定のコンストラクタを返します。サブクラスのコンストラクタは、コンストラクタの割り当てを変更するために、これをオーバーライドできます。</p> <h2 id="例">例</h2> <h3 id="普通のオブジェクト">普通のオブジェクト</h3> -<p><code>species</code> プロパティは、指定した <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">typed array</a> オブジェクトの typed array コンストラクタを既定のコンストラクタ関数として返します。</p> +<p><code>species</code> プロパティは、指定した <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">typed array</a> オブジェクトの typed array コンストラクタを既定のコンストラクタ関数として返します。</p> <pre class="brush: js notranslate">Int8Array[Symbol.species]; // function Int8Array() Uint8Array[Symbol.species]; // function Uint8Array() @@ -30,7 +30,7 @@ Float32Array[Symbol.species]; // function Float32Array() <h3 id="派生オブジェクト">派生オブジェクト</h3> -<p>派生コレクションオブジェクト（たとえば、カスタム typed array の <code>MyTypedArray</code>）では、<code>MyTypedArray</code> の species は <code>MyTypedArray</code> コンストラクタです。しかし、派生クラスのメソッドで、親である <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">typed array</a> オブジェクトを返すためにこれをオーバーライドしたいかもしれません。</p> +<p>派生コレクションオブジェクト（たとえば、カスタム typed array の <code>MyTypedArray</code>）では、<code>MyTypedArray</code> の species は <code>MyTypedArray</code> コンストラクタです。しかし、派生クラスのメソッドで、親である <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">typed array</a> オブジェクトを返すためにこれをオーバーライドしたいかもしれません。</p> <pre class="brush: js notranslate">class MyTypedArray extends Uint8Array { // MyTypedArray の species を親である Uint8Array コンストラクタにオーバーライド diff --git a/files/ja/web/javascript/reference/global_objects/uint16array/index.html b/files/ja/web/javascript/reference/global_objects/uint16array/index.html deleted file mode 100644 index e85d6a886b..0000000000 --- a/files/ja/web/javascript/reference/global_objects/uint16array/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: Uint16Array -slug: Web/JavaScript/Reference/Global_Objects/Uint16Array -tags: - - Class - - JavaScript - - TypedArray - - TypedArrays - - Uint16Array -translation_of: Web/JavaScript/Reference/Global_Objects/Uint16Array ---- -<div>{{JSRef}}</div> - -<p><strong><code>Uint16Array</code></strong> は型付き配列であり、プラットフォームのバイト順による 16 ビット符号なし整数値の配列を表します。バイト順の制御が必要な場合は、代わりに {{jsxref("DataView")}} を使用してください。中身は <code>0</code> で初期化されます。生成されると、配列の中の要素はオブジェクトのメソッドを使用するか、配列の標準的な添字の構文を使用するか (すなわち、ブラケット構文を使用するか) して参照することができます。</p> - -<h2 id="Constructor" name="Constructor">コンストラクター</h2> - -<dl> - <dt>{{jsxref("Global_Objects/Uint16Array/Uint16Array", "Uint16Array()")}}</dt> - <dd>新しい <code>Uint16Array</code> オブジェクトを生成します。</dd> -</dl> - -<h2 id="Static_properties" name="Static_properties">静的プロパティ</h2> - -<dl> - <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint16Array.BYTES_PER_ELEMENT")}}</dt> - <dd>要素の大きさの数値を返します。 <code>Uint16Array</code> の場合は <code>2</code> になります。</dd> - <dt>{{jsxref("TypedArray.name", "Uint16Array.name")}}</dt> - <dd>コンストラクターの名前を文字列値で返します。 <code>Uint16Array</code> 型の場合は "<code>Uint16Array</code>" です。</dd> -</dl> - -<h2 id="Static_methods" name="Static_methods">静的メソッド</h2> - -<dl> - <dt>{{jsxref("TypedArray.from", "Uint16Array.from()")}}</dt> - <dd>新しい <code>Uint16Array</code> を、配列風オブジェクトや反復可能オブジェクトから生成します。 {{jsxref("Array.from()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.of", "Uint16Array.of()")}}</dt> - <dd>新しい <code>Uint16Array</code> を、可変長引数で生成します。 {{jsxref("Array.of()")}} も参照してください。</dd> -</dl> - -<h2 id="Instance_properties" name="Instance_properties">インスタンスプロパティ</h2> - -<dl> - <dt>{{jsxref("TypedArray.prototype.buffer", "Uint16Array.prototype.buffer")}}</dt> - <dd><code>Uint16Array</code> オブジェクトによって参照される {{jsxref("ArrayBuffer")}} を返します。構築時に設定され、<strong>読取専用</strong>です。</dd> - <dt>{{jsxref("TypedArray.prototype.byteLength", "Uint16Array.prototype.byteLength")}}</dt> - <dd><code>Uint16Array</code> の長さを、 {{jsxref("ArrayBuffer")}} の先頭からのバイト単位で返します。構築時に設定され、<strong>読取専用</strong>です。</dd> - <dt>{{jsxref("TypedArray.prototype.byteOffset", "Uint16Array.prototype.byteOffset")}}</dt> - <dd><code>Uint16Array</code> のオフセットを、 {{jsxref("ArrayBuffer")}} の先頭からのバイト単位で返します。構築時に設定され、<strong>読取専用</strong>です。</dd> - <dt>{{jsxref("TypedArray.prototype.length", "Uint16Array.prototype.length")}}</dt> - <dd><code>Uint16Array</code> オブジェクト内に保持されている要素の数を返します。構築時に設定され、<strong>読取専用</strong>です。</dd> -</dl> - -<h2 id="Instance_methods" name="Instance_methods">インスタンスメソッド</h2> - -<dl> - <dt>{{jsxref("TypedArray.copyWithin", "Uint16Array.prototype.copyWithin()")}}</dt> - <dd>配列内で一連の配列要素をコピーします。 {{jsxref("Array.prototype.copyWithin()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.entries", "Uint16Array.prototype.entries()")}}</dt> - <dd>配列内の各添字に対するキーと値の組を含む、新しい<em>配列イテレーター</em>を返します。 {{jsxref("Array.prototype.entries()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.every", "Uint16Array.prototype.every()")}}</dt> - <dd>配列内のすべての要素に対して、指定された関数によるテストに合格するかどうかをテストします。 {{jsxref("Array.prototype.every()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.fill", "Uint16Array.prototype.fill()")}}</dt> - <dd>配列の先頭から末尾までのすべての要素を固定値で設定します。 {{jsxref("Array.prototype.fill()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.filter", "Uint16Array.prototype.filter()")}}</dt> - <dd>この配列のすべての要素のうち、指定されたフィルタリング関数が与えられたフィルタリング関数が <code>true</code> を返すすべての要素で、新しい配列を生成します。 {{jsxref("Array.prototype.filter()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.find", "Uint16Array.prototype.find()")}}</dt> - <dd>指定されたテスト関数を満足する要素が見つかった場合、その値を返します。見つからなかった場合は <code>undefined</code> を返します。 {{jsxref("Array.prototype.find()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.findIndex", "Uint16Array.prototype.findIndex()")}}</dt> - <dd>指定されたテスト関数を満足する要素が見つかった場合、その添字を返します。見つからなかった場合は <code>-1</code> を返します。 {{jsxref("Array.prototype.findIndex()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.forEach", "Uint16Array.prototype.forEach()")}}</dt> - <dd>配列内の各要素に対してある関数を呼び出します。 {{jsxref("Array.prototype.forEach()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.includes", "Uint16Array.prototype.includes()")}}</dt> - <dd>型付き配列にある要素が含まれているかどうかを判断し、それに応じて <code>true</code> または <code>false</code> を返します。 {{jsxref("Array.prototype.includes()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.indexOf", "Uint16Array.prototype.indexOf()")}}</dt> - <dd>配列内の要素のうち、指定された値と等しい最初の要素の添字を返します。見つからない場合は <code>-1</code> を返します。 {{jsxref("Array.prototype.indexOf()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.join", "Uint16Array.prototype.join()")}}</dt> - <dd>すべての配列要素を1つの文字列に結合します。 {{jsxref("Array.prototype.join()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.keys", "Uint16Array.prototype.keys()")}}</dt> - <dd>配列内のすべての添字に対するキーを含む新しい<em>配列イテレーター</em>を返します。 {{jsxref("Array.prototype.keys()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.lastIndexOf", "Uint16Array.prototype.lastIndexOf()")}}</dt> - <dd>配列内の要素のうち、指定された値と等しい最後の要素の添字を返します。見つからない場合は <code>-1</code> を返します。 {{jsxref("Array.prototype.lastIndexOf()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.map", "Uint16Array.prototype.map()")}}</dt> - <dd>この配列のすべての要素を引数として指定された関数を呼び出し、その結果で新しい配列を生成します。 {{jsxref("Array.prototype.map()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.reduce", "Uint16Array.prototype.reduce()")}}</dt> - <dd>アキュームレーターと配列の各要素に対して (左から右へ) 関数を適用し、単一の値に縮小します。 {{jsxref("Array.prototype.reduce()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.reduceRight", "Uint16Array.prototype.reduceRight()")}}</dt> - <dd>アキュームレーターと配列の各要素に対して (右から左へ) 関数を適用し、単一の値に縮小します。 {{jsxref("Array.prototype.reduceRight()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.reverse", "Uint16Array.prototype.reverse()")}}</dt> - <dd>配列要素の順番を反転させます。 — 最初の要素は最後になり、最後の要素は最初になります。 {{jsxref("Array.prototype.reverse()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.set", "Uint16Array.prototype.set()")}}</dt> - <dd>指定された配列から複数の入力値を読み込み、型付き配列に格納します。</dd> - <dt>{{jsxref("TypedArray.slice", "Uint16Array.prototype.slice()")}}</dt> - <dd>配列の一区間を取り出して新しい配列を返します。 {{jsxref("Array.prototype.slice()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.some", "Uint16Array.prototype.some()")}}</dt> - <dd>この配列内で、指定されたテスト関数を満たす要素が1つでもあった場合に <code>true</code> を返します。 {{jsxref("Array.prototype.some()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.sort", "Uint16Array.prototype.sort()")}}</dt> - <dd>配列の要素をその場でソートし、その配列を返します。 {{jsxref("Array.prototype.sort()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.subarray", "Uint16Array.prototype.subarray()")}}</dt> - <dd>指定された開始位置と終了位置の間にある要素から新しい <code>Uint16Array</code> を返します。</dd> - <dt>{{jsxref("TypedArray.values", "Uint16Array.prototype.values()")}}</dt> - <dd>配列内の各添字に対する値を含む新しい<em>配列イテレーター</em>を返します。 {{jsxref("Array.prototype.values()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.toLocaleString", "Uint16Array.prototype.toLocaleString()")}}</dt> - <dd>配列と要素を表すローカライズされた文字列を返します。 {{jsxref("Array.prototype.toLocaleString()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.toString", "Uint16Array.prototype.toString()")}}</dt> - <dd>配列と要素を表す文字列を返します。 {{jsxref("Array.prototype.toString()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.@@iterator", "Uint16Array.prototype[@@iterator]()")}}</dt> - <dd>配列内のそれぞれの添字の値を含む新しい<em>配列イテレーター</em>オブジェクトを返します。</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Different_ways_to_create_a_Uint16Array" name="Different_ways_to_create_a_Uint16Array">Uint16Array を生成する様々な方法</h3> - -<pre class="brush: js notranslate">// 長さを指定 -var uint16 = new Uint16Array(2); -uint16[0] = 42; -console.log(uint16[0]); // 42 -console.log(uint16.length); // 2 -console.log(uint16.BYTES_PER_ELEMENT); // 2 - -// 配列から -var arr = new Uint16Array([21,31]); -console.log(arr[1]); // 31 - -// 他の型付き配列から -var x = new Uint16Array([21, 31]); -var y = new Uint16Array(x); -console.log(y[0]); // 21 - -// ArrayBuffer から -var buffer = new ArrayBuffer(8); -var z = new Uint16Array(buffer, 0, 4); - -// 反復可能オブジェクトから -var iterable = function*(){ yield* [1,2,3]; }(); -var uint16 = new Uint16Array(iterable); -// Uint16Array[1, 2, 3] -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.Uint16Array")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Typed_arrays">JavaScript 型付き配列</a></li> - <li>{{jsxref("ArrayBuffer")}}</li> - <li>{{jsxref("DataView")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/uint16array/index.md b/files/ja/web/javascript/reference/global_objects/uint16array/index.md new file mode 100644 index 0000000000..8a9f0c6850 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/uint16array/index.md @@ -0,0 +1,147 @@ +--- +title: Uint16Array +slug: Web/JavaScript/Reference/Global_Objects/Uint16Array +tags: + - クラス + - JavaScript + - TypedArray + - 型付き配列 + - Uint16Array + - ポリフィル +browser-compat: javascript.builtins.Uint16Array +translation_of: Web/JavaScript/Reference/Global_Objects/Uint16Array +--- +{{JSRef}} + +**`Uint16Array`** は型付き配列で、プラットフォームのバイト順による 16 ビット符号なし整数値の配列を表します。バイト順の制御が必要な場合は、代わりに {{jsxref("DataView")}} を使用してください。中身は `0` で初期化されます。生成されると、配列内の要素はそのオブジェクトのメソッドを使用するか、配列の標準的な添字の構文 (すなわち、ブラケット記法) を使用するかして参照することができます。 + +## コンストラクター + +- {{jsxref("Global_Objects/Uint16Array/Uint16Array", "Uint16Array()")}} + - : 新しい `Uint16Array` オブジェクトを生成します。 + +## 静的プロパティ + +- {{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint16Array.BYTES_PER_ELEMENT")}} + - : 要素の大きさを数値で返します。`Uint16Array` の場合は `2` です。 +- {{jsxref("TypedArray.name", "Uint16Array.name")}} + - : コンストラクター名を文字列値で返します。`Uint16Array` の場合、 "`Uint16Array`" です。 + +## 静的メソッド + +- {{jsxref("TypedArray.from", "Uint16Array.from()")}} + - : 配列風オブジェクトまたは反復可能オブジェクトから新しい `Uint16Array` オブジェクトを生成します。 {{jsxref("Array.from()")}} も参照してください。 +- {{jsxref("TypedArray.of", "Uint16Array.of()")}} + - : 可変長引数で新しい `Uint16Array` オブジェクトを生成します。{{jsxref("Array.of()")}} も参照してください。 + +## インスタンスプロパティ + +- {{jsxref("TypedArray.prototype.buffer", "Uint16Array.prototype.buffer")}} + - : `Uint16Array` オブジェクトによって参照される {{jsxref("ArrayBuffer")}} を返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.byteLength", "Uint16Array.prototype.byteLength")}} + - : {{jsxref("ArrayBuffer")}} の先頭からの `Uint16Array` の長さを (バイト単位で) 返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.byteOffset", "Uint16Array.prototype.byteOffset")}} + - : {{jsxref("ArrayBuffer")}} の先頭からの `Uint16Array` のオフセットを (バイト単位で) 返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.length", "Uint16Array.prototype.length")}} + - : `Uint16Array` オブジェクト内に保持されている要素の数を返します。構築時に固定され、**読み取り専用**です。 + +## インスタンスメソッド + +- {{jsxref("TypedArray.copyWithin", "Uint16Array.prototype.copyWithin()")}} + - : 配列内で一連の配列要素をコピーします。{{jsxref("Array.prototype.copyWithin()")}} も参照してください。 +- {{jsxref("TypedArray.entries", "Uint16Array.prototype.entries()")}} + - : 配列内ですべての位置におけるキーと値の組を提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.entries()")}} も参照してください。 +- {{jsxref("TypedArray.every", "Uint16Array.prototype.every()")}} + - : 配列内のすべての要素が関数によって提供されたテストに合格するかどうかテストを実行します。{{jsxref("Array.prototype.every()")}} も参照してください。 +- {{jsxref("TypedArray.fill", "Uint16Array.prototype.fill()")}} + - : 配列の先頭位置から末尾位置までのすべての要素を固定値に設定します。{{jsxref("Array.prototype.fill()")}} も参照してください。 +- {{jsxref("TypedArray.filter", "Uint16Array.prototype.filter()")}} + - : この配列のすべての要素のうち、与えられたフィルタリング関数が `true` を返すものをもつ新しい配列を生成します。{{jsxref("Array.prototype.filter()")}} も参照してください。 +- {{jsxref("TypedArray.find", "Uint16Array.prototype.find()")}} + - : 配列内の要素に与えられたテスト関数を満足するものがあったら、見つかった値を返します。見つからなければ `undefined` を返します。{{jsxref("Array.prototype.find()")}} も参照してください。 +- {{jsxref("TypedArray.findIndex", "Uint16Array.prototype.findIndex()")}} + - : 配列内の要素に与えられたテスト関数を満足するものがあったら、見つかった位置を返します。見つからなければ `-1` を返します。{{jsxref("Array.prototype.findIndex()")}} も参照してください。 +- {{jsxref("TypedArray.forEach", "Uint16Array.prototype.forEach()")}} + - : 配列内のそれぞれの要素について関数を呼び出します。{{jsxref("Array.prototype.forEach()")}} も参照してください。 +- {{jsxref("TypedArray.includes", "Uint16Array.prototype.includes()")}} + - : 型付き配列に特定の要素があるかどうかを判断し、それに応じて `true` か `false`を返します。 {{jsxref("Array.prototype.includes()")}} も参照してください。 +- {{jsxref("TypedArray.indexOf", "Uint16Array.prototype.indexOf()")}} + - : 指定された値に等しい配列内の要素の最初の (最小の) 位置を返します。見つからなかった場合、 `-1` を返します。{{jsxref("Array.prototype.indexOf()")}} も参照してください。 +- {{jsxref("TypedArray.join", "Uint16Array.prototype.join()")}} + - : 配列のすべての要素を 1 つの文字列に結合します。{{jsxref("Array.prototype.join()")}} も参照してください。 +- {{jsxref("TypedArray.keys", "Uint16Array.prototype.keys()")}} + - : 配列内ですべての位置におけるキーを提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.keys()")}} も参照してください。 +- {{jsxref("TypedArray.lastIndexOf", "Uint16Array.prototype.lastIndexOf()")}} + - : 指定された値に等しい配列内の要素の最後の (最大の) 位置を返します。見つからなかった場合、 `-1` を返します。{{jsxref("Array.prototype.lastIndexOf()")}} も参照してください。 +- {{jsxref("TypedArray.map", "Uint16Array.prototype.map()")}} + - : この配列のすべての要素で与えられた関数を呼び出した結果をもつ新しい配列を生成します。{{jsxref("Array.prototype.map()")}} も参照してください。 +- {{jsxref("TypedArray.reduce", "Uint16Array.prototype.reduce()")}} + - : アキュムレーターとこの配列のそれぞれの値に対して (左から右へ) 関数を適用し、単一の値に還元します。{{jsxref("Array.prototype.reduce()")}} も参照してください。 +- {{jsxref("TypedArray.reduceRight", "Uint16Array.prototype.reduceRight()")}} + - : アキュムレーターとこの配列のそれぞれの値に対して (右から左へ) 関数を適用し、単一の値に還元します。{{jsxref("Array.prototype.reduceRight()")}} も参照してください。 +- {{jsxref("TypedArray.reverse", "Uint16Array.prototype.reverse()")}} + - : 配列の要素の順番を反転させます。最初の要素は最後になり、最後の要素は最初になります。{{jsxref("Array.prototype.reverse()")}} も参照してください。 +- {{jsxref("TypedArray.set", "Uint16Array.prototype.set()")}} + - : 入力値を指定した配列から読み込み、この型付き配列内に複数の値を格納します。 +- {{jsxref("TypedArray.slice", "Uint16Array.prototype.slice()")}} + - : 配列の一部を取り出して新しい配列を返します。{{jsxref("Array.prototype.slice()")}} も参照してください。 +- {{jsxref("TypedArray.some", "Uint16Array.prototype.some()")}} + - : この配列の 1 つ以上の要素が与えられたテスト関数を満たした場合に `true` を返します。{{jsxref("Array.prototype.some()")}} も参照してください。 +- {{jsxref("TypedArray.sort", "Uint16Array.prototype.sort()")}} + - : 配列の要素をその場で並べ替え、その配列を返します。{{jsxref("Array.prototype.sort()")}} も参照してください。 +- {{jsxref("TypedArray.subarray", "Uint16Array.prototype.subarray()")}} + - : 指定された先頭と末尾の要素位置から新しい `Uint16Array` を返します。 +- {{jsxref("TypedArray.values", "Uint16Array.prototype.values()")}} + - : 配列内ですべての位置における値を提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.values()")}} も参照してください。 +- {{jsxref("TypedArray.toLocaleString", "Uint16Array.prototype.toLocaleString()")}} + - : 配列とその要素を表すローカライズされた文字列を返します。{{jsxref("Array.prototype.toLocaleString()")}} も参照してください。 +- {{jsxref("TypedArray.toString", "Uint16Array.prototype.toString()")}} + - : 配列とその要素を表す文字列を返します。{{jsxref("Array.prototype.toString()")}} も参照してください。 +- {{jsxref("TypedArray.@@iterator", "Uint16Array.prototype[@@iterator]()")}} + - : 配列内ですべての位置における値を提供する新しい*配列イテレーター*を返します。 + +## 例 + +### 様々な方法で `Uint16Array` を作成 + +```js +// 長さから +var uint16 = new Uint16Array(2); +uint16[0] = 42; +console.log(uint16[0]); // 42 +console.log(uint16.length); // 2 +console.log(uint16.BYTES_PER_ELEMENT); // 2 + +// 配列から +var arr = new Uint16Array([21,31]); +console.log(arr[1]); // 31 + +// From another TypedArray +var x = new Uint16Array([21, 31]); +var y = new Uint16Array(x); +console.log(y[0]); // 21 + +// ArrayBuffer から +var buffer = new ArrayBuffer(8); +var z = new Uint16Array(buffer, 0, 4); + +// 反復可能オブジェクトから +var iterable = function*(){ yield* [1,2,3]; }(); +var uint16 = new Uint16Array(iterable); +// Uint16Array[1, 2, 3] +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- `Uint16Array` のポリフィルが [`core-js`](https://github.com/zloirock/core-js#ecmascript-typed-arrays) で利用できます +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- {{jsxref("ArrayBuffer")}} +- {{jsxref("DataView")}} diff --git a/files/ja/web/javascript/reference/global_objects/uint32array/index.html b/files/ja/web/javascript/reference/global_objects/uint32array/index.html deleted file mode 100644 index a303b757d1..0000000000 --- a/files/ja/web/javascript/reference/global_objects/uint32array/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: Uint32Array -slug: Web/JavaScript/Reference/Global_Objects/Uint32Array -tags: - - Constructor - - JavaScript - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/Uint32Array ---- -<div>{{JSRef}}</div> - -<p><strong><code>Uint32Array</code></strong> は型付き配列であり、プラットフォームのバイト順による 32 ビット符号なし整数値の配列を表します。バイト順の制御が必要な場合は、代わりに {{jsxref("DataView")}} を使用してください。中身は <code>0</code> で初期化されます。生成されると、配列の中の要素はオブジェクトのメソッドを使用するか、配列の標準的な添字の構文を使用するか (すなわち、ブラケット構文を使用するか) して参照することができます。</p> - -<h2 id="Constructor" name="Constructor">コンストラクター</h2> - -<dl> - <dt>{{jsxref("Global_Objects/Uint32Array/Uint32Array", "Uint32Array()")}}</dt> - <dd>新しい <code>Uint32Array</code> オブジェクトを生成します。</dd> -</dl> - -<h2 id="Static_properties" name="Static_properties">静的プロパティ</h2> - -<dl> - <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint32Array.BYTES_PER_ELEMENT")}}</dt> - <dd>要素の大きさの数値を返します。 <code>Uint32Array</code> の場合は <code>4</code> になります。</dd> - <dt>{{jsxref("TypedArray.name", "Uint32Array.name")}}</dt> - <dd>コンストラクターの名前を文字列値で返します。 <code>Uint32Array</code> 型の場合は "<code>Uint32Array</code>" です。</dd> -</dl> - -<h2 id="Static_methods" name="Static_methods">静的メソッド</h2> - -<dl> - <dt>{{jsxref("TypedArray.from", "Uint32Array.from()")}}</dt> - <dd>新しい <code>Uint32Array</code> を、配列風オブジェクトや反復可能オブジェクトから生成します。 {{jsxref("Array.from()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.of", "Uint32Array.of()")}}</dt> - <dd>新しい <code>Uint32Array</code> を、可変長引数で生成します。 {{jsxref("Array.of()")}} も参照してください。</dd> -</dl> - -<h2 id="Instance_properties" name="Instance_properties">インスタンスプロパティ</h2> - -<dl> - <dt>{{jsxref("TypedArray.prototype.buffer", "Uint32Array.prototype.buffer")}}</dt> - <dd><code>Uint32Array</code> オブジェクトによって参照される {{jsxref("ArrayBuffer")}} を返します。構築時に設定され、<strong>読取専用</strong>です。</dd> - <dt>{{jsxref("TypedArray.prototype.byteLength", "Uint32Array.prototype.byteLength")}}</dt> - <dd><code>Uint32Array</code> の長さを、 {{jsxref("ArrayBuffer")}} の先頭からのバイト単位で返します。構築時に設定され、<strong>読取専用</strong>です。</dd> - <dt>{{jsxref("TypedArray.prototype.byteOffset", "Uint32Array.prototype.byteOffset")}}</dt> - <dd><code>Uint32Array</code> のオフセットを、 {{jsxref("ArrayBuffer")}} の先頭からのバイト単位で返します。構築時に設定され、<strong>読取専用</strong>です。</dd> - <dt>{{jsxref("TypedArray.prototype.length", "Uint32Array.prototype.length")}}</dt> - <dd><code>Uint32Array</code> オブジェクト内に保持されている要素の数を返します。構築時に設定され、<strong>読取専用</strong>です。</dd> -</dl> - -<h2 id="Instance_methods" name="Instance_methods">インスタンスメソッド</h2> - -<dl> - <dt>{{jsxref("TypedArray.copyWithin", "Uint32Array.prototype.copyWithin()")}}</dt> - <dd>配列内で一連の配列要素をコピーします。 {{jsxref("Array.prototype.copyWithin()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.entries", "Uint32Array.prototype.entries()")}}</dt> - <dd>配列内の各添字に対するキーと値の組を含む、新しい<em>配列イテレーター</em>を返します。 {{jsxref("Array.prototype.entries()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.every", "Uint32Array.prototype.every()")}}</dt> - <dd>配列内のすべての要素に対して、指定された関数によるテストに合格するかどうかをテストします。 {{jsxref("Array.prototype.every()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.fill", "Uint32Array.prototype.fill()")}}</dt> - <dd>配列の先頭から末尾までのすべての要素を固定値で設定します。 {{jsxref("Array.prototype.fill()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.filter", "Uint32Array.prototype.filter()")}}</dt> - <dd>この配列のすべての要素のうち、指定されたフィルタリング関数が与えられたフィルタリング関数が <code>true</code> を返すすべての要素で、新しい配列を生成します。 {{jsxref("Array.prototype.filter()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.find", "Uint32Array.prototype.find()")}}</dt> - <dd>指定されたテスト関数を満足する要素が見つかった場合、その値を返します。見つからなかった場合は <code>undefined</code> を返します。 {{jsxref("Array.prototype.find()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.findIndex", "Uint32Array.prototype.findIndex()")}}</dt> - <dd>指定されたテスト関数を満足する要素が見つかった場合、その添字を返します。見つからなかった場合は <code>-1</code> を返します。 {{jsxref("Array.prototype.findIndex()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.forEach", "Uint32Array.prototype.forEach()")}}</dt> - <dd>配列内の各要素に対してある関数を呼び出します。 {{jsxref("Array.prototype.forEach()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.includes", "Uint32Array.prototype.includes()")}}</dt> - <dd>型付き配列にある要素が含まれているかどうかを判断し、それに応じて <code>true</code> または <code>false</code> を返します。 {{jsxref("Array.prototype.includes()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.indexOf", "Uint32Array.prototype.indexOf()")}}</dt> - <dd>配列内の要素のうち、指定された値と等しい最初の要素の添字を返します。見つからない場合は <code>-1</code> を返します。 {{jsxref("Array.prototype.indexOf()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.join", "Uint32Array.prototype.join()")}}</dt> - <dd>すべての配列要素を1つの文字列に結合します。 {{jsxref("Array.prototype.join()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.keys", "Uint32Array.prototype.keys()")}}</dt> - <dd>配列内のすべての添字に対するキーを含む新しい<em>配列イテレーター</em>を返します。 {{jsxref("Array.prototype.keys()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.lastIndexOf", "Uint32Array.prototype.lastIndexOf()")}}</dt> - <dd>配列内の要素のうち、指定された値と等しい最後の要素の添字を返します。見つからない場合は <code>-1</code> を返します。 {{jsxref("Array.prototype.lastIndexOf()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.map", "Uint32Array.prototype.map()")}}</dt> - <dd>この配列のすべての要素を引数として指定された関数を呼び出し、その結果で新しい配列を生成します。 {{jsxref("Array.prototype.map()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.reduce", "Uint32Array.prototype.reduce()")}}</dt> - <dd>アキュームレーターと配列の各要素に対して (左から右へ) 関数を適用し、単一の値に縮小します。 {{jsxref("Array.prototype.reduce()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.reduceRight", "Uint32Array.prototype.reduceRight()")}}</dt> - <dd>アキュームレーターと配列の各要素に対して (右から左へ) 関数を適用し、単一の値に縮小します。 {{jsxref("Array.prototype.reduceRight()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.reverse", "Uint32Array.prototype.reverse()")}}</dt> - <dd>配列要素の順番を反転させます。 — 最初の要素は最後になり、最後の要素は最初になります。 {{jsxref("Array.prototype.reverse()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.set", "Uint32Array.prototype.set()")}}</dt> - <dd>指定された配列から複数の入力値を読み込み、型付き配列に格納します。</dd> - <dt>{{jsxref("TypedArray.slice", "Uint32Array.prototype.slice()")}}</dt> - <dd>配列の一区間を取り出して新しい配列を返します。 {{jsxref("Array.prototype.slice()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.some", "Uint32Array.prototype.some()")}}</dt> - <dd>この配列内で、指定されたテスト関数を満たす要素が1つでもあった場合に <code>true</code> を返します。 {{jsxref("Array.prototype.some()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.sort", "Uint32Array.prototype.sort()")}}</dt> - <dd>配列の要素をその場でソートし、その配列を返します。 {{jsxref("Array.prototype.sort()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.subarray", "Uint32Array.prototype.subarray()")}}</dt> - <dd>指定された開始位置と終了位置の間にある要素から新しい <code>Uint32Array</code> を返します。</dd> - <dt>{{jsxref("TypedArray.values", "Uint32Array.prototype.values()")}}</dt> - <dd>配列内の各添字に対する値を含む新しい<em>配列イテレーター</em>を返します。 {{jsxref("Array.prototype.values()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.toLocaleString", "Uint32Array.prototype.toLocaleString()")}}</dt> - <dd>配列と要素を表すローカライズされた文字列を返します。 {{jsxref("Array.prototype.toLocaleString()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.toString", "Uint32Array.prototype.toString()")}}</dt> - <dd>配列と要素を表す文字列を返します。 {{jsxref("Array.prototype.toString()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.@@iterator", "Uint32Array.prototype[@@iterator]()")}}</dt> - <dd>配列内のそれぞれの添字の値を含む新しい<em>配列イテレーター</em>オブジェクトを返します。</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Different_ways_to_create_a_Uint32Array" name="Different_ways_to_create_a_Uint32Array">Uint32Array を生成する様々な方法</h3> - -<pre class="brush: js notranslate">// 長さを指定 -var int16 = new Uint32Array(2); -int16[0] = 42; -console.log(int16[0]); // 42 -console.log(int16.length); // 2 -console.log(int16.BYTES_PER_ELEMENT); // 2 - -// 配列から -var arr = new Uint32Array([21,31]); -console.log(arr[1]); // 31 - -// 他の型付き配列から -var x = new Uint32Array([21, 31]); -var y = new Uint32Array(x); -console.log(y[0]); // 21 - -// ArrayBuffer から -var buffer = new ArrayBuffer(16); -var z = new Uint32Array(buffer, 0, 4); - -// 反復可能オブジェクトから -var iterable = function*(){ yield* [1,2,3]; }(); -var int32 = new Uint32Array(iterable); -// Uint32Array[1, 2, 3] -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.Uint32Array")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Typed_arrays">JavaScript 型付き配列</a></li> - <li>{{jsxref("ArrayBuffer")}}</li> - <li>{{jsxref("DataView")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/uint32array/index.md b/files/ja/web/javascript/reference/global_objects/uint32array/index.md new file mode 100644 index 0000000000..df67853f2f --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/uint32array/index.md @@ -0,0 +1,147 @@ +--- +title: Uint32Array +slug: Web/JavaScript/Reference/Global_Objects/Uint32Array +tags: + - クラス + - JavaScript + - TypedArray + - 型付き配列 + - Uint32Array + - ポリフィル +browser-compat: javascript.builtins.Uint32Array +translation_of: Web/JavaScript/Reference/Global_Objects/Uint32Array +--- +{{JSRef}} + +**`Uint32Array`** は型付き配列で、プラットフォームのバイト順による 32 ビット符号なし整数値の配列を表します。バイト順の制御が必要な場合は、代わりに {{jsxref("DataView")}} を使用してください。中身は `0` で初期化されます。生成されると、配列内の要素はそのオブジェクトのメソッドを使用するか、配列の標準的な添字の構文 (すなわち、ブラケット記法) を使用するかして参照することができます。 + +## コンストラクター + +- {{jsxref("Global_Objects/Uint32Array/Uint32Array", "Uint32Array()")}} + - : 新しい `Uint32Array` オブジェクトを生成します。 + +## 静的プロパティ + +- {{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint32Array.BYTES_PER_ELEMENT")}} + - : 要素の大きさを数値で返します。`Uint32Array` の場合は `4` です。 +- {{jsxref("TypedArray.name", "Uint32Array.name")}} + - : コンストラクター名を文字列値で返します。`Uint32Array` の場合、 "`Uint32Array`" です。 + +## 静的メソッド + +- {{jsxref("TypedArray.from", "Uint32Array.from()")}} + - : 配列風オブジェクトまたは反復可能オブジェクトから新しい `Uint32Array` オブジェクトを生成します。 {{jsxref("Array.from()")}} も参照してください。 +- {{jsxref("TypedArray.of", "Uint32Array.of()")}} + - : 可変長引数で新しい `Uint32Array` オブジェクトを生成します。{{jsxref("Array.of()")}} も参照してください。 + +## インスタンスプロパティ + +- {{jsxref("TypedArray.prototype.buffer", "Uint32Array.prototype.buffer")}} + - : `Uint32Array` オブジェクトによって参照される {{jsxref("ArrayBuffer")}} を返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.byteLength", "Uint32Array.prototype.byteLength")}} + - : {{jsxref("ArrayBuffer")}} の先頭からの `Uint32Array` の長さを (バイト単位で) 返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.byteOffset", "Uint32Array.prototype.byteOffset")}} + - : {{jsxref("ArrayBuffer")}} の先頭からの `Uint32Array` のオフセットを (バイト単位で) 返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.length", "Uint32Array.prototype.length")}} + - : `Uint32Array` オブジェクト内に保持されている要素の数を返します。構築時に固定され、**読み取り専用**です。 + +## インスタンスメソッド + +- {{jsxref("TypedArray.copyWithin", "Uint32Array.prototype.copyWithin()")}} + - : 配列内で一連の配列要素をコピーします。{{jsxref("Array.prototype.copyWithin()")}} も参照してください。 +- {{jsxref("TypedArray.entries", "Uint32Array.prototype.entries()")}} + - : 配列内ですべての位置におけるキーと値の組を提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.entries()")}} も参照してください。 +- {{jsxref("TypedArray.every", "Uint32Array.prototype.every()")}} + - : 配列内のすべての要素が関数によって提供されたテストに合格するかどうかテストを実行します。{{jsxref("Array.prototype.every()")}} も参照してください。 +- {{jsxref("TypedArray.fill", "Uint32Array.prototype.fill()")}} + - : 配列の先頭位置から末尾位置までのすべての要素を固定値に設定します。{{jsxref("Array.prototype.fill()")}} も参照してください。 +- {{jsxref("TypedArray.filter", "Uint32Array.prototype.filter()")}} + - : この配列のすべての要素のうち、与えられたフィルタリング関数が `true` を返すものをもつ新しい配列を生成します。{{jsxref("Array.prototype.filter()")}} も参照してください。 +- {{jsxref("TypedArray.find", "Uint32Array.prototype.find()")}} + - : 配列内の要素に与えられたテスト関数を満足するものがあったら、見つかった値を返します。見つからなければ `undefined` を返します。{{jsxref("Array.prototype.find()")}} も参照してください。 +- {{jsxref("TypedArray.findIndex", "Uint32Array.prototype.findIndex()")}} + - : 配列内の要素に与えられたテスト関数を満足するものがあったら、見つかった位置を返します。見つからなければ `-1` を返します。{{jsxref("Array.prototype.findIndex()")}} も参照してください。 +- {{jsxref("TypedArray.forEach", "Uint32Array.prototype.forEach()")}} + - : 配列内のそれぞれの要素について関数を呼び出します。{{jsxref("Array.prototype.forEach()")}} も参照してください。 +- {{jsxref("TypedArray.includes", "Uint32Array.prototype.includes()")}} + - : 型付き配列に特定の要素があるかどうかを判断し、それに応じて `true` か `false`を返します。 {{jsxref("Array.prototype.includes()")}} も参照してください。 +- {{jsxref("TypedArray.indexOf", "Uint32Array.prototype.indexOf()")}} + - : 指定された値に等しい配列内の要素の最初の (最小の) 位置を返します。見つからなかった場合、 `-1` を返します。{{jsxref("Array.prototype.indexOf()")}} も参照してください。 +- {{jsxref("TypedArray.join", "Uint32Array.prototype.join()")}} + - : 配列のすべての要素を 1 つの文字列に結合します。{{jsxref("Array.prototype.join()")}} も参照してください。 +- {{jsxref("TypedArray.keys", "Uint32Array.prototype.keys()")}} + - : 配列内ですべての位置におけるキーを提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.keys()")}} も参照してください。 +- {{jsxref("TypedArray.lastIndexOf", "Uint32Array.prototype.lastIndexOf()")}} + - : 指定された値に等しい配列内の要素の最後の (最大の) 位置を返します。見つからなかった場合、 `-1` を返します。{{jsxref("Array.prototype.lastIndexOf()")}} も参照してください。 +- {{jsxref("TypedArray.map", "Uint32Array.prototype.map()")}} + - : この配列のすべての要素で与えられた関数を呼び出した結果をもつ新しい配列を生成します。{{jsxref("Array.prototype.map()")}} も参照してください。 +- {{jsxref("TypedArray.reduce", "Uint32Array.prototype.reduce()")}} + - : アキュムレーターとこの配列のそれぞれの値に対して (左から右へ) 関数を適用し、単一の値に還元します。{{jsxref("Array.prototype.reduce()")}} も参照してください。 +- {{jsxref("TypedArray.reduceRight", "Uint32Array.prototype.reduceRight()")}} + - : アキュムレーターとこの配列のそれぞれの値に対して (右から左へ) 関数を適用し、単一の値に還元します。{{jsxref("Array.prototype.reduceRight()")}} も参照してください。 +- {{jsxref("TypedArray.reverse", "Uint32Array.prototype.reverse()")}} + - : 配列の要素の順番を反転させます。最初の要素は最後になり、最後の要素は最初になります。{{jsxref("Array.prototype.reverse()")}} も参照してください。 +- {{jsxref("TypedArray.set", "Uint32Array.prototype.set()")}} + - : 入力値を指定した配列から読み込み、この型付き配列内に複数の値を格納します。 +- {{jsxref("TypedArray.slice", "Uint32Array.prototype.slice()")}} + - : 配列の一部を取り出して新しい配列を返します。{{jsxref("Array.prototype.slice()")}} も参照してください。 +- {{jsxref("TypedArray.some", "Uint32Array.prototype.some()")}} + - : この配列の 1 つ以上の要素が与えられたテスト関数を満たした場合に `true` を返します。{{jsxref("Array.prototype.some()")}} も参照してください。 +- {{jsxref("TypedArray.sort", "Uint32Array.prototype.sort()")}} + - : 配列の要素をその場で並べ替え、その配列を返します。{{jsxref("Array.prototype.sort()")}} も参照してください。 +- {{jsxref("TypedArray.subarray", "Uint32Array.prototype.subarray()")}} + - : 指定された先頭と末尾の要素位置から新しい `Uint32Array` を返します。 +- {{jsxref("TypedArray.values", "Uint32Array.prototype.values()")}} + - : 配列内ですべての位置における値を提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.values()")}} も参照してください。 +- {{jsxref("TypedArray.toLocaleString", "Uint32Array.prototype.toLocaleString()")}} + - : 配列とその要素を表すローカライズされた文字列を返します。{{jsxref("Array.prototype.toLocaleString()")}} も参照してください。 +- {{jsxref("TypedArray.toString", "Uint32Array.prototype.toString()")}} + - : 配列とその要素を表す文字列を返します。{{jsxref("Array.prototype.toString()")}} も参照してください。 +- {{jsxref("TypedArray.@@iterator", "Uint32Array.prototype[@@iterator]()")}} + - : 配列内ですべての位置における値を提供する新しい*配列イテレーター*を返します。 + +## 例 + +### 様々な方法で `Uint32Array` を作成 + +```js +// 長さから +var uint32 = new Uint32Array(2); +uint32[0] = 42; +console.log(uint32[0]); // 42 +console.log(uint32.length); // 2 +console.log(uint32.BYTES_PER_ELEMENT); // 4 + +// 配列から +var arr = new Uint32Array([21,31]); +console.log(arr[1]); // 31 + +// From another TypedArray +var x = new Uint32Array([21, 31]); +var y = new Uint32Array(x); +console.log(y[0]); // 21 + +// ArrayBuffer から +var buffer = new ArrayBuffer(16); +var z = new Uint32Array(buffer, 0, 4); + +// 反復可能オブジェクトから +var iterable = function*(){ yield* [1,2,3]; }(); +var uint32 = new Uint32Array(iterable); +// Uint32Array[1, 2, 3] +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- `Uint32Array` のポリフィルが [`core-js`](https://github.com/zloirock/core-js#ecmascript-typed-arrays) で利用できます +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- {{jsxref("ArrayBuffer")}} +- {{jsxref("DataView")}} diff --git a/files/ja/web/javascript/reference/global_objects/uint8array/index.html b/files/ja/web/javascript/reference/global_objects/uint8array/index.html deleted file mode 100644 index 3155f7501a..0000000000 --- a/files/ja/web/javascript/reference/global_objects/uint8array/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: Uint8Array -slug: Web/JavaScript/Reference/Global_Objects/Uint8Array -tags: - - Class - - JavaScript - - TypedArray - - TypedArrays - - Uint8Array -translation_of: Web/JavaScript/Reference/Global_Objects/Uint8Array ---- -<div>{{JSRef}}</div> - -<p><strong><code>Uint8Array</code></strong> は型付き配列であり、 8 ビット符号なし整数値の配列を表します。中身は <code>0</code> で初期化されます。生成されると、配列の中の要素はオブジェクトのメソッドを使用するか、配列の標準的な添字の構文を使用するか (すなわち、ブラケット構文を使用するか) して参照することができます。</p> - -<h2 id="Constructor" name="Constructor">コンストラクター</h2> - -<dl> - <dt>{{jsxref("Global_Objects/Uint8Array/Uint8Array", "Uint8Array()")}}</dt> - <dd>新しい <code>Uint8Array</code> オブジェクトを生成します。</dd> -</dl> - -<h2 id="Static_properties" name="Static_properties">静的プロパティ</h2> - -<dl> - <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint8Array.BYTES_PER_ELEMENT")}}</dt> - <dd>要素の大きさの数値を返します。 <code>Uint8Array</code> の場合は <code>1</code> になります。</dd> - <dt>{{jsxref("TypedArray.name", "Uint8Array.name")}}</dt> - <dd>コンストラクターの名前を文字列値で返します。 <code>Uint8Array</code> 型の場合は "<code>Uint8Array</code>" です。</dd> -</dl> - -<h2 id="Static_methods" name="Static_methods">静的メソッド</h2> - -<dl> - <dt>{{jsxref("TypedArray.from", "Uint8Array.from()")}}</dt> - <dd>新しい <code>Uint8Array</code> を、配列風オブジェクトや反復可能オブジェクトから生成します。 {{jsxref("Array.from()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.of", "Uint8Array.of()")}}</dt> - <dd>新しい <code>Uint8Array</code> を、可変長引数で生成します。 {{jsxref("Array.of()")}} も参照してください。</dd> -</dl> - -<h2 id="Instance_properties" name="Instance_properties">インスタンスプロパティ</h2> - -<dl> - <dt>{{jsxref("TypedArray.prototype.buffer", "Uint8Array.prototype.buffer")}}</dt> - <dd><code>Uint8Array</code> オブジェクトによって参照される {{jsxref("ArrayBuffer")}} を返します。構築時に設定され、<strong>読取専用</strong>です。</dd> - <dt>{{jsxref("TypedArray.prototype.byteLength", "Uint8Array.prototype.byteLength")}}</dt> - <dd><code>Uint8Array</code> の長さをバイト単位で返します。構築時に設定され、<strong>読取専用</strong>です。</dd> - <dt>{{jsxref("TypedArray.prototype.byteOffset", "Uint8Array.prototype.byteOffset")}}</dt> - <dd><code>Uint8Array</code> のオフセットを、 {{jsxref("ArrayBuffer")}} の先頭からのバイト単位で返します。構築時に設定され、<strong>読取専用</strong>です。</dd> - <dt>{{jsxref("TypedArray.prototype.length", "Uint8Array.prototype.length")}}</dt> - <dd><code>Uint8Array</code> オブジェクト内に保持されている要素の数を返します。構築時に設定され、<strong>読取専用</strong>です。</dd> -</dl> - -<h2 id="Instance_methods" name="Instance_methods">インスタンスメソッド</h2> - -<dl> - <dt>{{jsxref("TypedArray.copyWithin", "Uint8Array.prototype.copyWithin()")}}</dt> - <dd>配列内で一連の配列要素をコピーします。 {{jsxref("Array.prototype.copyWithin()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.entries", "Uint8Array.prototype.entries()")}}</dt> - <dd>配列内の各添字に対するキーと値の組を含む、新しい<em>配列イテレーター</em>を返します。 {{jsxref("Array.prototype.entries()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.every", "Uint8Array.prototype.every()")}}</dt> - <dd>配列内のすべての要素に対して、指定された関数によるテストに合格するかどうかをテストします。 {{jsxref("Array.prototype.every()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.fill", "Uint8Array.prototype.fill()")}}</dt> - <dd>配列の先頭から末尾までのすべての要素を固定値で設定します。 {{jsxref("Array.prototype.fill()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.filter", "Uint8Array.prototype.filter()")}}</dt> - <dd>この配列のすべての要素のうち、指定されたフィルタリング関数が与えられたフィルタリング関数が <code>true</code> を返すすべての要素で、新しい配列を生成します。 {{jsxref("Array.prototype.filter()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.find", "Uint8Array.prototype.find()")}}</dt> - <dd>指定されたテスト関数を満足する要素が見つかった場合、その値を返します。見つからなかった場合は <code>undefined</code> を返します。 {{jsxref("Array.prototype.find()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.findIndex", "Uint8Array.prototype.findIndex()")}}</dt> - <dd>指定されたテスト関数を満足する要素が見つかった場合、その添字を返します。見つからなかった場合は <code>-1</code> を返します。 {{jsxref("Array.prototype.findIndex()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.forEach", "Uint8Array.prototype.forEach()")}}</dt> - <dd>配列内の各要素に対してある関数を呼び出します。 {{jsxref("Array.prototype.forEach()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.includes", "Uint8Array.prototype.includes()")}}</dt> - <dd>型付き配列にある要素が含まれているかどうかを判断し、それに応じて <code>true</code> または <code>false</code> を返します。 {{jsxref("Array.prototype.includes()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.indexOf", "Uint8Array.prototype.indexOf()")}}</dt> - <dd>配列内の要素のうち、指定された値と等しい最初の要素の添字を返します。見つからない場合は <code>-1</code> を返します。 {{jsxref("Array.prototype.indexOf()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.join", "Uint8Array.prototype.join()")}}</dt> - <dd>すべての配列要素を1つの文字列に結合します。 {{jsxref("Array.prototype.join()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.keys", "Uint8Array.prototype.keys()")}}</dt> - <dd>配列内のすべての添字に対するキーを含む新しい<em>配列イテレーター</em>を返します。 {{jsxref("Array.prototype.keys()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.lastIndexOf", "Uint8Array.prototype.lastIndexOf()")}}</dt> - <dd>配列内の要素のうち、指定された値と等しい最後の要素の添字を返します。見つからない場合は <code>-1</code> を返します。 {{jsxref("Array.prototype.lastIndexOf()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.map", "Uint8Array.prototype.map()")}}</dt> - <dd>この配列のすべての要素を引数として指定された関数を呼び出し、その結果で新しい配列を生成します。 {{jsxref("Array.prototype.map()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.reduce", "Uint8Array.prototype.reduce()")}}</dt> - <dd>アキュームレーターと配列の各要素に対して (左から右へ) 関数を適用し、単一の値に縮小します。 {{jsxref("Array.prototype.reduce()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.reduceRight", "Uint8Array.prototype.reduceRight()")}}</dt> - <dd>アキュームレーターと配列の各要素に対して (右から左へ) 関数を適用し、単一の値に縮小します。 {{jsxref("Array.prototype.reduceRight()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.reverse", "Uint8Array.prototype.reverse()")}}</dt> - <dd>配列要素の順番を反転させます。 — 最初の要素は最後になり、最後の要素は最初になります。 {{jsxref("Array.prototype.reverse()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.set", "Uint8Array.prototype.set()")}}</dt> - <dd>指定された配列から複数の入力値を読み込み、型付き配列に格納します。</dd> - <dt>{{jsxref("TypedArray.slice", "Uint8Array.prototype.slice()")}}</dt> - <dd>配列の一区間を取り出して新しい配列を返します。 {{jsxref("Array.prototype.slice()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.some", "Uint8Array.prototype.some()")}}</dt> - <dd>この配列内で、指定されたテスト関数を満たす要素が1つでもあった場合に <code>true</code> を返します。 {{jsxref("Array.prototype.some()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.sort", "Uint8Array.prototype.sort()")}}</dt> - <dd>配列の要素をその場でソートし、その配列を返します。 {{jsxref("Array.prototype.sort()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.subarray", "Uint8Array.prototype.subarray()")}}</dt> - <dd>指定された開始位置と終了位置の間にある要素から新しい <code>Uint8Array</code> を返します。</dd> - <dt>{{jsxref("TypedArray.values", "Uint8Array.prototype.values()")}}</dt> - <dd>配列内の各添字に対する値を含む新しい<em>配列イテレーター</em>を返します。 {{jsxref("Array.prototype.values()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.toLocaleString", "Uint8Array.prototype.toLocaleString()")}}</dt> - <dd>配列と要素を表すローカライズされた文字列を返します。 {{jsxref("Array.prototype.toLocaleString()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.toString", "Uint8Array.prototype.toString()")}}</dt> - <dd>配列と要素を表す文字列を返します。 {{jsxref("Array.prototype.toString()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.@@iterator", "Uint8Array.prototype[@@iterator]()")}}</dt> - <dd>配列内のそれぞれの添字の値を含む新しい<em>配列イテレーター</em>オブジェクトを返します。</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Different_ways_to_create_a_Uint8Array" name="Different_ways_to_create_a_Uint8Array">Uint8Array を生成する様々な方法</h3> - -<pre class="brush: js notranslate">// 長さを指定 -var int8 = new Uint8Array(2); -int8[0] = 42; -console.log(int8[0]); // 42 -console.log(int8.length); // 2 -console.log(int8.BYTES_PER_ELEMENT); // 1 - -// 配列から -var arr = new Uint8Array([21,31]); -console.log(arr[1]); // 31 - -// 他の型付き配列から -var x = new Uint8Array([21, 31]); -var y = new Uint8Array(x); -console.log(y[0]); // 21 - -// ArrayBuffer から -var buffer = new ArrayBuffer(8); -var z = new Uint8Array(buffer, 1, 4); - -// 反復可能オブジェクトから -var iterable = function*(){ yield* [1,2,3]; }(); -var uint8 = new Uint8Array(iterable); -// Uint8Array[1, 2, 3] -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.Uint8Array")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Typed_arrays">JavaScript 型付き配列</a></li> - <li>{{jsxref("ArrayBuffer")}}</li> - <li>{{jsxref("DataView")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/uint8array/index.md b/files/ja/web/javascript/reference/global_objects/uint8array/index.md new file mode 100644 index 0000000000..469a19bdc9 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/uint8array/index.md @@ -0,0 +1,146 @@ +--- +title: Uint8Array +slug: Web/JavaScript/Reference/Global_Objects/Uint8Array +tags: + - クラス + - JavaScript + - TypedArray + - 型付き配列 + - ポリフィル +browser-compat: javascript.builtins.Uint8Array +translation_of: Web/JavaScript/Reference/Global_Objects/Uint8Array +--- +{{JSRef}} + +**`Uint8Array`** は型付き配列で、 8 ビット符号なし整数値の配列を表します。中身は `0` で初期化されます。生成されると、配列内の要素はそのオブジェクトのメソッドを使用するか、配列の標準的な添字の構文 (すなわち、ブラケット記法) を使用するかして参照することができます。 + +## コンストラクター + +- {{jsxref("Global_Objects/Uint8Array/Uint8Array", "Uint8Array()")}} + - : 新しい `Uint8Array` オブジェクトを生成します。 + +## 静的プロパティ + +- {{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint8Array.BYTES_PER_ELEMENT")}} + - : 要素の大きさを数値で返します。`Uint8Array` の場合は `1` です。 +- {{jsxref("TypedArray.name", "Uint8Array.name")}} + - : コンストラクター名を文字列値で返します。`Uint8Array` の場合、 "`Uint8Array`" です。 + +## 静的メソッド + +- {{jsxref("TypedArray.from", "Uint8Array.from()")}} + - : 配列風オブジェクトまたは反復可能オブジェクトから新しい `Uint8Array` オブジェクトを生成します。 {{jsxref("Array.from()")}} も参照してください。 +- {{jsxref("TypedArray.of", "Uint8Array.of()")}} + - : 可変長引数で新しい `Uint8Array` オブジェクトを生成します。{{jsxref("Array.of()")}} も参照してください。 + +## インスタンスプロパティ + +- {{jsxref("TypedArray.prototype.buffer", "Uint8Array.prototype.buffer")}} + - : `Uint8Array` オブジェクトによって参照される {{jsxref("ArrayBuffer")}} を返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.byteLength", "Uint8Array.prototype.byteLength")}} + - : `Uint8Array` の長さを (バイト単位で) 返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.byteOffset", "Uint8Array.prototype.byteOffset")}} + - : {{jsxref("ArrayBuffer")}} の先頭からの `Uint8Array` のオフセットを (バイト単位で) 返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.length", "Uint8Array.prototype.length")}} + - : `Uint8Array` オブジェクト内に保持されている要素の数を返します。構築時に固定され、**読み取り専用**です。 + +## インスタンスメソッド + +- {{jsxref("TypedArray.copyWithin", "Uint8Array.prototype.copyWithin()")}} + - : 配列内で一連の配列要素をコピーします。{{jsxref("Array.prototype.copyWithin()")}} も参照してください。 +- {{jsxref("TypedArray.entries", "Uint8Array.prototype.entries()")}} + - : 配列内ですべての位置におけるキーと値の組を提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.entries()")}} も参照してください。 +- {{jsxref("TypedArray.every", "Uint8Array.prototype.every()")}} + - : 配列内のすべての要素が関数によって提供されたテストに合格するかどうかテストを実行します。{{jsxref("Array.prototype.every()")}} も参照してください。 +- {{jsxref("TypedArray.fill", "Uint8Array.prototype.fill()")}} + - : 配列の先頭位置から末尾位置までのすべての要素を固定値に設定します。{{jsxref("Array.prototype.fill()")}} も参照してください。 +- {{jsxref("TypedArray.filter", "Uint8Array.prototype.filter()")}} + - : この配列のすべての要素のうち、与えられたフィルタリング関数が `true` を返すものをもつ新しい配列を生成します。{{jsxref("Array.prototype.filter()")}} も参照してください。 +- {{jsxref("TypedArray.find", "Uint8Array.prototype.find()")}} + - : 配列内の要素に与えられたテスト関数を満足するものがあったら、見つかった値を返します。見つからなければ `undefined` を返します。{{jsxref("Array.prototype.find()")}} も参照してください。 +- {{jsxref("TypedArray.findIndex", "Uint8Array.prototype.findIndex()")}} + - : 配列内の要素に与えられたテスト関数を満足するものがあったら、見つかった位置を返します。見つからなければ `-1` を返します。{{jsxref("Array.prototype.findIndex()")}} も参照してください。 +- {{jsxref("TypedArray.forEach", "Uint8Array.prototype.forEach()")}} + - : 配列内のそれぞれの要素について関数を呼び出します。{{jsxref("Array.prototype.forEach()")}} も参照してください。 +- {{jsxref("TypedArray.includes", "Uint8Array.prototype.includes()")}} + - : 型付き配列に特定の要素があるかどうかを判断し、それに応じて `true` か `false`を返します。 {{jsxref("Array.prototype.includes()")}} も参照してください。 +- {{jsxref("TypedArray.indexOf", "Uint8Array.prototype.indexOf()")}} + - : 指定された値に等しい配列内の要素の最初の (最小の) 位置を返します。見つからなかった場合、 `-1` を返します。{{jsxref("Array.prototype.indexOf()")}} も参照してください。 +- {{jsxref("TypedArray.join", "Uint8Array.prototype.join()")}} + - : 配列のすべての要素を 1 つの文字列に結合します。{{jsxref("Array.prototype.join()")}} も参照してください。 +- {{jsxref("TypedArray.keys", "Uint8Array.prototype.keys()")}} + - : 配列内ですべての位置におけるキーを提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.keys()")}} も参照してください。 +- {{jsxref("TypedArray.lastIndexOf", "Uint8Array.prototype.lastIndexOf()")}} + - : 指定された値に等しい配列内の要素の最後の (最大の) 位置を返します。見つからなかった場合、 `-1` を返します。{{jsxref("Array.prototype.lastIndexOf()")}} も参照してください。 +- {{jsxref("TypedArray.map", "Uint8Array.prototype.map()")}} + - : この配列のすべての要素で与えられた関数を呼び出した結果をもつ新しい配列を生成します。{{jsxref("Array.prototype.map()")}} も参照してください。 +- {{jsxref("TypedArray.reduce", "Uint8Array.prototype.reduce()")}} + - : アキュムレーターとこの配列のそれぞれの値に対して (左から右へ) 関数を適用し、単一の値に還元します。{{jsxref("Array.prototype.reduce()")}} も参照してください。 +- {{jsxref("TypedArray.reduceRight", "Uint8Array.prototype.reduceRight()")}} + - : アキュムレーターとこの配列のそれぞれの値に対して (右から左へ) 関数を適用し、単一の値に還元します。{{jsxref("Array.prototype.reduceRight()")}} も参照してください。 +- {{jsxref("TypedArray.reverse", "Uint8Array.prototype.reverse()")}} + - : 配列の要素の順番を反転させます。最初の要素は最後になり、最後の要素は最初になります。{{jsxref("Array.prototype.reverse()")}} も参照してください。 +- {{jsxref("TypedArray.set", "Uint8Array.prototype.set()")}} + - : 入力値を指定した配列から読み込み、この型付き配列内に複数の値を格納します。 +- {{jsxref("TypedArray.slice", "Uint8Array.prototype.slice()")}} + - : 配列の一部を取り出して新しい配列を返します。{{jsxref("Array.prototype.slice()")}} も参照してください。 +- {{jsxref("TypedArray.some", "Uint8Array.prototype.some()")}} + - : この配列の 1 つ以上の要素が与えられたテスト関数を満たした場合に `true` を返します。{{jsxref("Array.prototype.some()")}} も参照してください。 +- {{jsxref("TypedArray.sort", "Uint8Array.prototype.sort()")}} + - : 配列の要素をその場で並べ替え、その配列を返します。{{jsxref("Array.prototype.sort()")}} も参照してください。 +- {{jsxref("TypedArray.subarray", "Uint8Array.prototype.subarray()")}} + - : 指定された先頭と末尾の要素位置から新しい `Uint8Array` を返します。 +- {{jsxref("TypedArray.values", "Uint8Array.prototype.values()")}} + - : 配列内ですべての位置における値を提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.values()")}} も参照してください。 +- {{jsxref("TypedArray.toLocaleString", "Uint8Array.prototype.toLocaleString()")}} + - : 配列とその要素を表すローカライズされた文字列を返します。{{jsxref("Array.prototype.toLocaleString()")}} も参照してください。 +- {{jsxref("TypedArray.toString", "Uint8Array.prototype.toString()")}} + - : 配列とその要素を表す文字列を返します。{{jsxref("Array.prototype.toString()")}} も参照してください。 +- {{jsxref("TypedArray.@@iterator", "Uint8Array.prototype[@@iterator]()")}} + - : 配列内ですべての位置における値を提供する新しい*配列イテレーター*を返します。 + +## 例 + +### 様々な方法で `Uint8Array` を作成 + +```js +// 長さから +var uint8 = new Uint8Array(2); +uint8[0] = 42; +console.log(uint8[0]); // 42 +console.log(uint8.length); // 2 +console.log(uint8.BYTES_PER_ELEMENT); // 1 + +// 配列から +var arr = new Uint8Array([21,31]); +console.log(arr[1]); // 31 + +// From another TypedArray +var x = new Uint8Array([21, 31]); +var y = new Uint8Array(x); +console.log(y[0]); // 21 + +// ArrayBuffer から +var buffer = new ArrayBuffer(8); +var z = new Uint8Array(buffer, 1, 4); + +// 反復可能オブジェクトから +var iterable = function*(){ yield* [1,2,3]; }(); +var uint8 = new Uint8Array(iterable); +// Uint8Array[1, 2, 3] +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- `Uint8Array` のポリフィルが [`core-js`](https://github.com/zloirock/core-js#ecmascript-typed-arrays) で利用できます +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- {{jsxref("ArrayBuffer")}} +- {{jsxref("DataView")}} diff --git a/files/ja/web/javascript/reference/global_objects/uint8clampedarray/index.html b/files/ja/web/javascript/reference/global_objects/uint8clampedarray/index.html deleted file mode 100644 index f75d81f605..0000000000 --- a/files/ja/web/javascript/reference/global_objects/uint8clampedarray/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: Uint8ClampedArray -slug: Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray -tags: - - Class - - JavaScript - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray ---- -<div>{{JSRef}}</div> - -<p><strong><code>Uint8ClampedArray</code></strong> は型付き配列であり、 0-255 に制約される 8 ビット符号なし整数値の配列を生成します。指定された値が [0,255] の範囲を超えた場合、 0 または 255 が代わりに設定されます。整数以外を指定しようとすると、最も近い整数が設定されます。中身は <code>0</code> で初期化されます。生成されると、配列の中の要素はオブジェクトのメソッドを使用するか、配列の標準的な添字の構文を使用するか (すなわち、ブラケット構文を使用するか) して参照することができます。</p> - -<h2 id="Constructor" name="Constructor">コンストラクター</h2> - -<dl> - <dt>{{jsxref("Global_Objects/Uint8ClampedArray/Uint8ClampedArray", "Uint8ClampedArray()")}}</dt> - <dd>新しい <code>Uint8ClampedArray</code> オブジェクトを生成します。</dd> -</dl> - -<h2 id="Static_properties" name="Static_properties">静的プロパティ</h2> - -<dl> - <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint8ClampedArray.BYTES_PER_ELEMENT")}}</dt> - <dd>要素の大きさの数値を返します。 <code>Uint8ClampedArray</code> の場合は <code>1</code> になります。</dd> - <dt>{{jsxref("TypedArray.name", "Uint8ClampedArray.name")}}</dt> - <dd>コンストラクターの名前を文字列値で返します。 <code>Uint8ClampedArray</code> 型の場合は "<code>Uint8ClampedArray</code>" です。</dd> -</dl> - -<h2 id="Static_methods" name="Static_methods">静的メソッド</h2> - -<dl> - <dt>{{jsxref("TypedArray.from", "Uint8ClampedArray.from()")}}</dt> - <dd>新しい <code>Uint8ClampedArray</code> を、配列風オブジェクトや反復可能オブジェクトから生成します。 {{jsxref("Array.from()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.of", "Uint8ClampedArray.of()")}}</dt> - <dd>新しい <code>Uint8ClampedArray</code> を、可変長引数から生成します。 {{jsxref("Array.of()")}} も参照してください。</dd> -</dl> - -<h2 id="Instance_properties" name="Instance_properties">インスタンスプロパティ</h2> - -<dl> - <dt>{{jsxref("TypedArray.prototype.buffer", "Uint8ClampedArray.prototype.buffer")}}</dt> - <dd><code>Uint8ClampedArray</code> オブジェクトによって参照される {{jsxref("ArrayBuffer")}} を返します。構築時に設定され、<strong>読取専用</strong>です。</dd> - <dt>{{jsxref("TypedArray.prototype.byteLength", "Uint8ClampedArray.prototype.byteLength")}}</dt> - <dd><code>Uint8ClampedArray</code> の長さを {{jsxref("ArrayBuffer")}} の先頭からのバイト単位で返します。構築時に設定され、<strong>読取専用</strong>です。</dd> - <dt>{{jsxref("TypedArray.prototype.byteOffset", "Uint8ClampedArray.prototype.byteOffset")}}</dt> - <dd><code>Uint8ClampedArray</code> のオフセットを、 {{jsxref("ArrayBuffer")}} の先頭からのバイト単位で返します。構築時に設定され、<strong>読取専用</strong>です。</dd> - <dt>{{jsxref("TypedArray.prototype.length", "Uint8ClampedArray.prototype.length")}}</dt> - <dd><code>Uint8ClampedArray</code> オブジェクト内に保持されている要素の数を返します。構築時に設定され、<strong>読取専用</strong>です。</dd> -</dl> - -<h2 id="Instance_methods" name="Instance_methods">インスタンスメソッド</h2> - -<dl> - <dt>{{jsxref("TypedArray.copyWithin", "Uint8ClampedArray.prototype.copyWithin()")}}</dt> - <dd>配列内で一連の配列要素をコピーします。 {{jsxref("Array.prototype.copyWithin()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.entries", "Uint8ClampedArray.prototype.entries()")}}</dt> - <dd>配列内の各添字に対するキーと値の組を含む、新しい<em>配列イテレーター</em>を返します。 {{jsxref("Array.prototype.entries()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.every", "Uint8ClampedArray.prototype.every()")}}</dt> - <dd>配列内のすべての要素に対して、指定された関数によるテストに合格するかどうかをテストします。 {{jsxref("Array.prototype.every()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.fill", "Uint8ClampedArray.prototype.fill()")}}</dt> - <dd>配列の先頭から末尾までのすべての要素を固定値で設定します。 {{jsxref("Array.prototype.fill()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.filter", "Uint8ClampedArray.prototype.filter()")}}</dt> - <dd>この配列のすべての要素のうち、指定されたフィルタリング関数が与えられたフィルタリング関数が <code>true</code> を返すすべての要素で、新しい配列を生成します。 {{jsxref("Array.prototype.filter()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.find", "Uint8ClampedArray.prototype.find()")}}</dt> - <dd>指定されたテスト関数を満足する要素が見つかった場合、その値を返します。見つからなかった場合は <code>undefined</code> を返します。 {{jsxref("Array.prototype.find()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.findIndex", "Uint8ClampedArray.prototype.findIndex()")}}</dt> - <dd>指定されたテスト関数を満足する要素が見つかった場合、その添字を返します。見つからなかった場合は <code>-1</code> を返します。 {{jsxref("Array.prototype.findIndex()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.forEach", "Uint8ClampedArray.prototype.forEach()")}}</dt> - <dd>配列内の各要素に対してある関数を呼び出します。 {{jsxref("Array.prototype.forEach()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.includes", "Uint8ClampedArray.prototype.includes()")}}</dt> - <dd>型付き配列にある要素が含まれているかどうかを判断し、それに応じて <code>true</code> または <code>false</code> を返します。 {{jsxref("Array.prototype.includes()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.indexOf", "Uint8ClampedArray.prototype.indexOf()")}}</dt> - <dd>配列内の要素のうち、指定された値と等しい最初の要素の添字を返します。見つからない場合は <code>-1</code> を返します。 {{jsxref("Array.prototype.indexOf()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.join", "Uint8ClampedArray.prototype.join()")}}</dt> - <dd>すべての配列要素を1つの文字列に結合します。 {{jsxref("Array.prototype.join()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.keys", "Uint8ClampedArray.prototype.keys()")}}</dt> - <dd>配列内のすべての添字に対するキーを含む新しい<em>配列イテレーター</em>を返します。 {{jsxref("Array.prototype.keys()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.lastIndexOf", "Uint8ClampedArray.prototype.lastIndexOf()")}}</dt> - <dd>配列内の要素のうち、指定された値と等しい最後の要素の添字を返します。見つからない場合は <code>-1</code> を返します。 {{jsxref("Array.prototype.lastIndexOf()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.map", "Uint8ClampedArray.prototype.map()")}}</dt> - <dd>この配列のすべての要素を引数として指定された関数を呼び出し、その結果で新しい配列を生成します。 {{jsxref("Array.prototype.map()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.reduce", "Uint8ClampedArray.prototype.reduce()")}}</dt> - <dd>アキュームレーターと配列の各要素に対して (左から右へ) 関数を適用し、単一の値に縮小します。 {{jsxref("Array.prototype.reduce()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.reduceRight", "Uint8ClampedArray.prototype.reduceRight()")}}</dt> - <dd>アキュームレーターと配列の各要素に対して (右から左へ) 関数を適用し、単一の値に縮小します。 {{jsxref("Array.prototype.reduceRight()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.reverse", "Uint8ClampedArray.prototype.reverse()")}}</dt> - <dd>配列要素の順番を反転させます。 — 最初の要素は最後になり、最後の要素は最初になります。 {{jsxref("Array.prototype.reverse()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.set", "Uint8ClampedArray.prototype.set()")}}</dt> - <dd>指定された配列から複数の入力値を読み込み、型付き配列に格納します。</dd> - <dt>{{jsxref("TypedArray.slice", "Uint8ClampedArray.prototype.slice()")}}</dt> - <dd>配列の一区間を取り出して新しい配列を返します。 {{jsxref("Array.prototype.slice()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.some", "Uint8ClampedArray.prototype.some()")}}</dt> - <dd>この配列内で、指定されたテスト関数を満たす要素が1つでもあった場合に <code>true</code> を返します。 {{jsxref("Array.prototype.some()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.sort", "Uint8ClampedArray.prototype.sort()")}}</dt> - <dd>配列の要素をその場でソートし、その配列を返します。 {{jsxref("Array.prototype.sort()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.subarray", "Uint8ClampedArray.prototype.subarray()")}}</dt> - <dd>指定された開始位置と終了位置の間にある要素から新しい <code>Uint8ClampedArray</code> を返します。</dd> - <dt>{{jsxref("TypedArray.values", "Uint8ClampedArray.prototype.values()")}}</dt> - <dd>配列内の各添字に対する値を含む新しい<em>配列イテレーター</em>を返します。 {{jsxref("Array.prototype.values()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.toLocaleString", "Uint8ClampedArray.prototype.toLocaleString()")}}</dt> - <dd>配列と要素を表すローカライズされた文字列を返します。 {{jsxref("Array.prototype.toLocaleString()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.toString", "Uint8ClampedArray.prototype.toString()")}}</dt> - <dd>配列と要素を表す文字列を返します。 {{jsxref("Array.prototype.toString()")}} も参照してください。</dd> - <dt>{{jsxref("TypedArray.@@iterator", "Uint8ClampedArray.prototype[@@iterator]()")}}</dt> - <dd>配列内のそれぞれの添字の値を含む新しい<em>配列イテレーター</em>オブジェクトを返します。</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Different_ways_to_create_a_Uint8ClampedArray" name="Different_ways_to_create_a_Uint8ClampedArray">Uint8ClampedArray を生成する様々な方法</h3> - -<pre class="brush: js notranslate">// 長さを指定 -var uintc8 = new Uint8ClampedArray(2); -uintc8[0] = 42; -uintc8[1] = 1337; -console.log(uintc8[0]); // 42 -console.log(uintc8[1]); // 255 (clamped) -console.log(uintc8.length); // 2 -console.log(uintc8.BYTES_PER_ELEMENT); // 1 - -// 配列から -var arr = new Uint8ClampedArray([21,31]); -console.log(arr[1]); // 31 - -// 他の型付き配列から -var x = new Uint8ClampedArray([21, 31]); -var y = new Uint8ClampedArray(x); -console.log(y[0]); // 21 - -// ArrayBuffer から -var buffer = new ArrayBuffer(8); -var z = new Uint8ClampedArray(buffer, 1, 4); - -// 反復可能オブジェクトから -var iterable = function*(){ yield* [1,2,3]; }(); -var uintc8 = new Uint8ClampedArray(iterable); -// Uint8ClampedArray[1, 2, 3] -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.Uint8ClampedArray")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Typed_arrays">JavaScript 型付き配列</a></li> - <li>{{jsxref("ArrayBuffer")}}</li> - <li>{{jsxref("DataView")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/uint8clampedarray/index.md b/files/ja/web/javascript/reference/global_objects/uint8clampedarray/index.md new file mode 100644 index 0000000000..4c3a6284cf --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/uint8clampedarray/index.md @@ -0,0 +1,148 @@ +--- +title: Uint8ClampedArray +slug: Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray +tags: + - クラス + - JavaScript + - TypedArray + - 型付き配列 + - ポリフィル +browser-compat: javascript.builtins.Uint8ClampedArray +translation_of: Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray +--- +{{JSRef}} + +**`Uint8ClampedArray`** は型付き配列で、 0-255 に制約される 8 ビット符号なし整数値の配列を表します。指定された値が \[0,255] の範囲を超えた場合、 0 または 255 が代わりに設定されます。整数以外を指定しようとすると、最も近い整数が設定されます。中身は `0` で初期化されます。生成されると、配列内の要素はそのオブジェクトのメソッドを使用するか、配列の標準的な添字の構文 (すなわち、ブラケット記法) を使用するかして参照することができます。 + +## コンストラクター + +- {{jsxref("Global_Objects/Uint8ClampedArray/Uint8ClampedArray", "Uint8ClampedArray()")}} + - : 新しい `Uint8ClampedArray` オブジェクトを生成します。 + +## 静的プロパティ + +- {{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint8ClampedArray.BYTES_PER_ELEMENT")}} + - : 要素の大きさを数値で返します。`Uint8ClampedArray` の場合は `1` です。 +- {{jsxref("TypedArray.name", "Uint8ClampedArray.name")}} + - : コンストラクター名を文字列値で返します。`Uint8ClampedArray` の場合、 "`Uint8ClampedArray`" です。 + +## 静的メソッド + +- {{jsxref("TypedArray.from", "Uint8ClampedArray.from()")}} + - : 配列風オブジェクトまたは反復可能オブジェクトから新しい `Uint8ClampedArray` オブジェクトを生成します。 {{jsxref("Array.from()")}} も参照してください。 +- {{jsxref("TypedArray.of", "Uint8ClampedArray.of()")}} + - : 可変長引数で新しい `Uint8ClampedArray` オブジェクトを生成します。{{jsxref("Array.of()")}} も参照してください。 + +## インスタンスプロパティ + +- {{jsxref("TypedArray.prototype.buffer", "Uint8ClampedArray.prototype.buffer")}} + - : `Uint8ClampedArray` オブジェクトによって参照される {{jsxref("ArrayBuffer")}} を返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.byteLength", "Uint8ClampedArray.prototype.byteLength")}} + - : `Uint8ClampedArray` の {{jsxref("ArrayBuffer")}} の先頭からの長さを (バイト単位で) 返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.byteOffset", "Uint8ClampedArray.prototype.byteOffset")}} + - : {{jsxref("ArrayBuffer")}} の先頭からの `Uint8ClampedArray` のオフセットを (バイト単位で) 返します。構築時に固定され、**読み取り専用**です。 +- {{jsxref("TypedArray.prototype.length", "Uint8ClampedArray.prototype.length")}} + - : `Uint8ClampedArray` オブジェクト内に保持されている要素の数を返します。構築時に固定され、**読み取り専用**です。 + +## インスタンスメソッド + +- {{jsxref("TypedArray.copyWithin", "Uint8ClampedArray.prototype.copyWithin()")}} + - : 配列内で一連の配列要素をコピーします。{{jsxref("Array.prototype.copyWithin()")}} も参照してください。 +- {{jsxref("TypedArray.entries", "Uint8ClampedArray.prototype.entries()")}} + - : 配列内ですべての位置におけるキーと値の組を提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.entries()")}} も参照してください。 +- {{jsxref("TypedArray.every", "Uint8ClampedArray.prototype.every()")}} + - : 配列内のすべての要素が関数によって提供されたテストに合格するかどうかテストを実行します。{{jsxref("Array.prototype.every()")}} も参照してください。 +- {{jsxref("TypedArray.fill", "Uint8ClampedArray.prototype.fill()")}} + - : 配列の先頭位置から末尾位置までのすべての要素を固定値に設定します。{{jsxref("Array.prototype.fill()")}} も参照してください。 +- {{jsxref("TypedArray.filter", "Uint8ClampedArray.prototype.filter()")}} + - : この配列のすべての要素のうち、与えられたフィルタリング関数が `true` を返すものをもつ新しい配列を生成します。{{jsxref("Array.prototype.filter()")}} も参照してください。 +- {{jsxref("TypedArray.find", "Uint8ClampedArray.prototype.find()")}} + - : 配列内の要素に与えられたテスト関数を満足するものがあったら、見つかった値を返します。見つからなければ `undefined` を返します。{{jsxref("Array.prototype.find()")}} も参照してください。 +- {{jsxref("TypedArray.findIndex", "Uint8ClampedArray.prototype.findIndex()")}} + - : 配列内の要素に与えられたテスト関数を満足するものがあったら、見つかった位置を返します。見つからなければ `-1` を返します。{{jsxref("Array.prototype.findIndex()")}} も参照してください。 +- {{jsxref("TypedArray.forEach", "Uint8ClampedArray.prototype.forEach()")}} + - : 配列内のそれぞれの要素について関数を呼び出します。{{jsxref("Array.prototype.forEach()")}} も参照してください。 +- {{jsxref("TypedArray.includes", "Uint8ClampedArray.prototype.includes()")}} + - : 型付き配列に特定の要素があるかどうかを判断し、それに応じて `true` か `false`を返します。 {{jsxref("Array.prototype.includes()")}} も参照してください。 +- {{jsxref("TypedArray.indexOf", "Uint8ClampedArray.prototype.indexOf()")}} + - : 指定された値に等しい配列内の要素の最初の (最小の) 位置を返します。見つからなかった場合、 `-1` を返します。{{jsxref("Array.prototype.indexOf()")}} も参照してください。 +- {{jsxref("TypedArray.join", "Uint8ClampedArray.prototype.join()")}} + - : 配列のすべての要素を 1 つの文字列に結合します。{{jsxref("Array.prototype.join()")}} も参照してください。 +- {{jsxref("TypedArray.keys", "Uint8ClampedArray.prototype.keys()")}} + - : 配列内ですべての位置におけるキーを提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.keys()")}} も参照してください。 +- {{jsxref("TypedArray.lastIndexOf", "Uint8ClampedArray.prototype.lastIndexOf()")}} + - : 指定された値に等しい配列内の要素の最後の (最大の) 位置を返します。見つからなかった場合、 `-1` を返します。{{jsxref("Array.prototype.lastIndexOf()")}} も参照してください。 +- {{jsxref("TypedArray.map", "Uint8ClampedArray.prototype.map()")}} + - : この配列のすべての要素で与えられた関数を呼び出した結果をもつ新しい配列を生成します。{{jsxref("Array.prototype.map()")}} も参照してください。 +- {{jsxref("TypedArray.reduce", "Uint8ClampedArray.prototype.reduce()")}} + - : アキュムレーターとこの配列のそれぞれの値に対して (左から右へ) 関数を適用し、単一の値に還元します。{{jsxref("Array.prototype.reduce()")}} も参照してください。 +- {{jsxref("TypedArray.reduceRight", "Uint8ClampedArray.prototype.reduceRight()")}} + - : アキュムレーターとこの配列のそれぞれの値に対して (右から左へ) 関数を適用し、単一の値に還元します。{{jsxref("Array.prototype.reduceRight()")}} も参照してください。 +- {{jsxref("TypedArray.reverse", "Uint8ClampedArray.prototype.reverse()")}} + - : 配列の要素の順番を反転させます。最初の要素は最後になり、最後の要素は最初になります。{{jsxref("Array.prototype.reverse()")}} も参照してください。 +- {{jsxref("TypedArray.set", "Uint8ClampedArray.prototype.set()")}} + - : 入力値を指定した配列から読み込み、この型付き配列内に複数の値を格納します。 +- {{jsxref("TypedArray.slice", "Uint8ClampedArray.prototype.slice()")}} + - : 配列の一部を取り出して新しい配列を返します。{{jsxref("Array.prototype.slice()")}} も参照してください。 +- {{jsxref("TypedArray.some", "Uint8ClampedArray.prototype.some()")}} + - : この配列の 1 つ以上の要素が与えられたテスト関数を満たした場合に `true` を返します。{{jsxref("Array.prototype.some()")}} も参照してください。 +- {{jsxref("TypedArray.sort", "Uint8ClampedArray.prototype.sort()")}} + - : 配列の要素をその場で並べ替え、その配列を返します。{{jsxref("Array.prototype.sort()")}} も参照してください。 +- {{jsxref("TypedArray.subarray", "Uint8ClampedArray.prototype.subarray()")}} + - : 指定された先頭と末尾の要素位置から新しい `Uint8ClampedArray` を返します。 +- {{jsxref("TypedArray.values", "Uint8ClampedArray.prototype.values()")}} + - : 配列内ですべての位置における値を提供する新しい*配列イテレーター*を返します。{{jsxref("Array.prototype.values()")}} も参照してください。 +- {{jsxref("TypedArray.toLocaleString", "Uint8ClampedArray.prototype.toLocaleString()")}} + - : 配列とその要素を表すローカライズされた文字列を返します。{{jsxref("Array.prototype.toLocaleString()")}} も参照してください。 +- {{jsxref("TypedArray.toString", "Uint8ClampedArray.prototype.toString()")}} + - : 配列とその要素を表す文字列を返します。{{jsxref("Array.prototype.toString()")}} も参照してください。 +- {{jsxref("TypedArray.@@iterator", "Uint8ClampedArray.prototype[@@iterator]()")}} + - : 配列内ですべての位置における値を提供する新しい*配列イテレーター*を返します。 + +## 例 + +### 様々な方法で `Uint8ClampedArray` を作成 + +```js +// 長さから +var uintc8 = new Uint8ClampedArray(2); +uintc8[0] = 42; +uintc8[1] = 1337; +console.log(uintc8[0]); // 42 +console.log(uintc8[1]); // 255 (制約を受けた) +console.log(uintc8.length); // 2 +console.log(uintc8.BYTES_PER_ELEMENT); // 1 + +// 配列から +var arr = new Uint8ClampedArray([21,31]); +console.log(arr[1]); // 31 + +// From another TypedArray +var x = new Uint8ClampedArray([21, 31]); +var y = new Uint8ClampedArray(x); +console.log(y[0]); // 21 + +// ArrayBuffer から +var buffer = new ArrayBuffer(8); +var z = new Uint8ClampedArray(buffer, 1, 4); + +// 反復可能オブジェクトから +var iterable = function*(){ yield* [1,2,3]; }(); +var uintc8 = new Uint8ClampedArray(iterable); +// Uint8ClampedArray[1, 2, 3] +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- `Uint8ClampedArray` のポリフィルが [`core-js`](https://github.com/zloirock/core-js#ecmascript-typed-arrays) で利用できます +- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- {{jsxref("ArrayBuffer")}} +- {{jsxref("DataView")}} diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/compile/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/compile/index.html deleted file mode 100644 index 1cdf19f657..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/compile/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: WebAssembly.compile() -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/compile -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/compile ---- -<div>{{JSRef}} {{SeeCompatTable}}</div> - -<p><strong><code>WebAssembly.compile()</code></strong> 関数は WebAssembly バイナリコードから {{jsxref("WebAssembly.Module")}} にコンパイルします。この関数はモジュールをインスタンス化する前にコンパイルする必要がある時に便利です。(そうでなければ、 {{jsxref("WebAssembly.instantiate()")}} 関数の使用が推奨されます。</p> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox">Promise<WebAssembly.Module> WebAssembly.compile(bufferSource);</pre> - -<h3 id="パラメータ">パラメータ</h3> - -<dl> - <dt><em>bufferSource</em></dt> - <dd>コンパイルする <a href="/ja/docs/Web/JavaScript/Typed_arrays">型付き配列</a> か <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a> を含む .wasm モジュールのバイナリコード。</dd> -</dl> - -<h3 id="戻り値">戻り値</h3> - -<p>解決時にコンパイルされたモジュールを表す {{jsxref("WebAssembly.Module")}} オブジェクト渡す <code>Promise 。</code></p> - -<h3 id="例外">例外</h3> - -<ul> - <li><font face="Consolas, Liberation Mono, Courier, monospace">バイナリソースが</font> <a href="/ja/docs/Web/JavaScript/Typed_arrays">型付き配列</a> でない場合、 {{jsxref("TypeError")}} がスローされます。</li> - <li>コンパイルが失敗したとき、プロミスは {{jsxref("WebAssembly.CompileError")}} で棄却されます。</li> -</ul> - -<h2 id="例">例</h2> - -<p>以下の例では (Github上のデモ <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index-compile.html">index-compile.html</a> と <a href="https://mdn.github.io/webassembly-examples/js-api-examples/index-compile.html">動作例</a> をご確認ください) <code>compile()</code> 関数を使ってロードした simple.wasm のバイトコードをコンパイルして、その後 <a href="/ja/docs/Web/API/Worker/postMessage">postMessage()</a> を使って <a href="https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API">worker</a> に送信しています。</p> - -<pre class="brush: js">var worker = new Worker("wasm_worker.js"); - -fetch('simple.wasm').then(response => - response.arrayBuffer() -).then(bytes => - WebAssembly.compile(bytes) -).then(mod => - worker.postMessage(mod) -);</pre> - -<p>ワーカー内で (<code><a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/wasm_worker.js">wasm_worker.js</a> を参照</code>) モジュールで使用するためのインポートオブジェクトを定義して、メインスレッドからモジュールを受け取るためのイベントハンドラをセットアップします。モジュールを受け取ったとき、 {{jsxref("WebAssembly.Instantiate()")}} メソッドを使用してモジュールからインスタンスを生成します。内部からエクスポートされた関数を実行して、その後に {{jsxref("WebAssembly.Module/exports", "WebAssembly.Module.exports")}} プロパティを使用してモジュール上で利用可能なエクスポートに関する情報を確認する方法を示します。</p> - -<pre class="brush: js">var importObject = { - imports: { - imported_func: function(arg) { - console.log(arg); - } - } -}; - -onmessage = function(e) { - console.log('module received from main thread'); - var mod = e.data; - - WebAssembly.instantiate(mod, importObject).then(function(instance) { - instance.exports.exported_func(); - }); - - var exports = WebAssembly.Module.exports(mod); - console.log(exports[0]); -};</pre> - -<h2 id="仕様">仕様</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('WebAssembly JS', '#webassemblycompile', 'compile()')}}</td> - <td>{{Spec2('WebAssembly JS')}}</td> - <td>初回ドラフト定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> - -<div>{{Compat("javascript.builtins.WebAssembly.compile")}}</div> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> overview page</li> - <li><a href="https://developer.mozilla.org/ja/docs/WebAssembly/Concepts">WebAssembly のコンセプト</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API を使用する</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/compile/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/compile/index.md new file mode 100644 index 0000000000..0fb86c25d4 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/compile/index.md @@ -0,0 +1,72 @@ +--- +title: WebAssembly.compile() +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/compile +tags: + - API + - JavaScript + - Method + - Object + - Reference + - WebAssembly + - compile +browser-compat: javascript.builtins.WebAssembly.compile +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/compile +--- +{{JSRef}} + +**`WebAssembly.compile()`** 関数は WebAssembly バイナリーコードを {{jsxref("WebAssembly.Module")}} の形にコンパイルします。この関数は、モジュールをインスタンス化する前にコンパイルする必要がある場合に便利です (それ以外の場合は、 {{jsxref("WebAssembly.instantiate()")}} 関数を使用してください)。</p> + +## 構文 + +```js +WebAssembly.compile(bufferSource) +``` + +### 引数 + +- _bufferSource_ + - : コンパイルする .wasm モジュールのバイナリーコードを含む[型付き配列](/ja/docs/Web/JavaScript/Typed_arrays)または [`ArrayBuffer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) です。 + +### 返値 + +コンパイルされたモジュールを表す {{jsxref("WebAssembly.Module")}} オブジェクトに解決する `Promise` です。 + +### 例外 + +- `bufferSource` が[型付き配列](/ja/docs/Web/JavaScript/Typed_arrays)ではなかった場合、 {{jsxref("TypeError")}} が発生します。 +- コンパイルに失敗した場合、プロミスは {{jsxref("WebAssembly.CompileError")}} で拒否されます。 + +## 例 + +### compile の使用 + +次の例では、読み込まれた simple.wasm バイトコードを、 `compile()` 関数を使用してコンパイルし、[ワーカー](/ja/docs/Web/API/Web_Workers_API)に [postMessage()](/ja/docs/Web/API/Worker/postMessage) を用いて送信します。 + +```js +var worker = new Worker("wasm_worker.js"); + +fetch('simple.wasm').then(response => + response.arrayBuffer() +).then(bytes => + WebAssembly.compile(bytes) +).then(mod => + worker.postMessage(mod) +); +``` + +> **Note:** おそらく多くの場合は {{jsxref("WebAssembly.compileStreaming()")}} を使用したほうが `compile()` よりも効率的なのでそちらの方がいいでしょう。 + + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/compileerror/compileerror/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/compileerror/compileerror/index.md new file mode 100644 index 0000000000..26fa3f0799 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/compileerror/compileerror/index.md @@ -0,0 +1,66 @@ +--- +title: WebAssembly.CompileError() コンストラクター +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError/CompileError +tags: + - Constructor + - JavaScript + - Reference + - WebAssembly +browser-compat: javascript.builtins.WebAssembly.CompileError.CompileError +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError/CompileError +--- +{{JSRef}} + +**`WebAssembly.CompileError()`** コンストラクターは、新しい WebAssembly の `CompileError` オブジェクトを生成します。これは WebAssembly のデコードまたは検証中のエラーを示します。 + +## 構文 + +```js +new WebAssembly.CompileError() +new WebAssembly.CompileError(message) +new WebAssembly.CompileError(message, fileName) +new WebAssembly.CompileError(message, fileName, lineNumber) +``` + +### 引数 + +- `message` {{optional_inline}} + - : このエラーの人間が読める説明です。 +- `fileName` {{optional_inline}} + - : 例外が発生したコードを含むファイル名です。 +- `lineNumber` {{optional_inline}} + - : 例外が発生したコードの行番号です。 + +## 例 + +### 新しい CompileError インスタンスの生成 + +以下のスニペットは新しい `CompileError` のインスタンスを生成し、コンソールに詳細を記録します。 + +```js +try { + throw new WebAssembly.CompileError('Hello', 'someFile', 10); +} catch (e) { + console.log(e instanceof CompileError); // true + console.log(e.message); // "Hello" + console.log(e.name); // "CompileError" + console.log(e.fileName); // "someFile" + console.log(e.lineNumber); // 10 + console.log(e.columnNumber); // 0 + console.log(e.stack); // コードの実行されていた位置を返す +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/compileerror/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/compileerror/index.html deleted file mode 100644 index 785e7f604e..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/compileerror/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: WebAssembly.CompileError() -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError ---- -<div>{{JSRef}} {{SeeCompatTable}}</div> - -<p><code><strong>WebAssembly.CompileError()</strong></code> コンストラクタは WebAssembly <code>CompileError</code> オブジェクトを生成します。WebAssembly のデコードやバリデーション中にエラーが発生したことを示します。</p> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox"><code>new WebAssembly.CompileError(<var>message</var>, <var>fileName</var>, <var>lineNumber</var>)</code></pre> - -<h3 id="パラメータ">パラメータ</h3> - -<dl> - <dt><code>message</code> {{optional_inline}}</dt> - <dd>ヒューマンリーダブルなエラーの説明。</dd> - <dt><code>fileName</code> {{optional_inline}}{{non-standard_inline}}</dt> - <dd>例外の原因となったコードを含むファイルの名前。</dd> - <dt><code>lineNumber</code> {{optional_inline}}{{non-standard_inline}}</dt> - <dd>例外の原因となったコードの行番号。</dd> -</dl> - -<h2 id="プロパティ">プロパティ</h2> - -<p><em><code>CompileError</code> コンストラクタは自身のプロパティを持ちませんが、プロトタイプチェーンを通していくつかのプロパティを継承します。</em></p> - -<dl> - <dt><code>WebAssembly.CompileError.prototype.constructor</code></dt> - <dd>インスタンスのプロトタイプを生成した関数を示します。</dd> - <dt>{{jsxref("Error.prototype.message", "WebAssembly.CompileError.prototype.message")}}</dt> - <dd>エラーメッセージ。ECMA-262では {{jsxref("URIError")}} は自身の <code>message</code> プロパティを提供する必要がありますが、<a href="/ja/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> では {{jsxref("Error.prototype.message")}} を継承します。</dd> - <dt>{{jsxref("Error.prototype.name", "WebAssembly.CompileError.prototype.name")}}</dt> - <dd>エラー名。{{jsxref("Error")}} から継承されます。</dd> - <dt>{{jsxref("Error.prototype.fileName", "WebAssembly.CompileError.prototype.fileName")}}</dt> - <dd>このエラーを発生させたファイルのパス。 {{jsxref("Error")}} から継承されます。</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "WebAssembly.CompileError.prototype.lineNumber")}}</dt> - <dd>このエラーを発生させたファイルの行番号。{{jsxref("Error")}} から継承されます。</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "WebAssembly.CompileError.prototype.columnNumber")}}</dt> - <dd>このエラーが発生した行の列番号。{{jsxref("Error")}} から継承されます。</dd> - <dt>{{jsxref("Error.prototype.stack", "WebAssembly.CompileError.prototype.stack")}}</dt> - <dd>スタックトレース。{{jsxref("Error")}} から継承されます。</dd> -</dl> - -<h2 id="メソッド">メソッド</h2> - -<p><em><code>CompileError</code> コンストラクタは自身のメソッドを持ちませんが、プロトタイプチェーンを通していくつかのメソッドを継承します。</em></p> - -<dl> - <dt>{{jsxref("Error.prototype.toSource", "WebAssembly.CompileError.prototype.toSource()")}}</dt> - <dd>同じエラーを評価できるコードを返します。{{jsxref("Error")}} から継承されます。</dd> - <dt>{{jsxref("Error.prototype.toString", "WebAssembly.CompileError.prototype.toString()")}}</dt> - <dd>指定された <code>Error</code> オブジェクトを表す文字列を返します。{{jsxref("Error")}} から継承されます。</dd> -</dl> - -<h2 id="例">例</h2> - -<p>以下のスニペットで <code>CompileError</code> インスタンスを生成して、詳細をコンソールに表示します。</p> - -<pre class="brush: js">try { - throw new WebAssembly.CompileError('Hello', 'someFile', 10); -} catch (e) { - console.log(e instanceof CompileError); // true - console.log(e.message); // "Hello" - console.log(e.name); // "CompileError" - console.log(e.fileName); // "someFile" - console.log(e.lineNumber); // 10 - console.log(e.columnNumber); // 0 - console.log(e.stack); // コードが実行された場所を返す -}</pre> - -<h2 id="仕様">仕様</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('WebAssembly JS', '#constructor-properties-of-the-webassembly-object', 'WebAssembly constructors')}}</td> - <td>{{Spec2('WebAssembly JS')}}</td> - <td>WebAssembly の初回ドラフト定義。</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard', 'NativeError')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>標準の NativeError 型の定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> - -<div>{{Compat("javascript.builtins.WebAssembly.CompileError")}}</div> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> overview page</li> - <li><a href="/ja/docs/WebAssembly/Concepts">WebAssembly のコンセプト</a></li> - <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API を使用する</a></li> -</ul> - -<dl> -</dl> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/compileerror/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/compileerror/index.md new file mode 100644 index 0000000000..e851a74a2a --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/compileerror/index.md @@ -0,0 +1,78 @@ +--- +title: WebAssembly.CompileError +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError +tags: + - API + - Class + - CompileError + - JavaScript + - NativeError + - Reference + - WebAssembly +browser-compat: javascript.builtins.WebAssembly.CompileError +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError +--- +{{JSRef}} + +**`WebAssembly.CompileError`** オブジェクトは、 WebAssembly のデコードや検証の間のエラーを示します。 + +## コンストラクター + +- [`WebAssembly.CompileError()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError/CompileError) + - : 新しい `WebAssembly.CompileError` オブジェクトを生成します。 + +## インスタンスプロパティ + +- {{jsxref("Error.prototype.message", "WebAssembly.CompileError.prototype.message")}} + - : エラーメッセージ。 {{jsxref("Error")}} から継承しています。 +- {{jsxref("Error.prototype.name", "WebAssembly.CompileError.prototype.name")}} + - : エラー名。 {{jsxref("Error")}} から継承しています。 +- {{jsxref("Error.prototype.fileName", "WebAssembly.CompileError.prototype.fileName")}} + - : このエラーを発生させたファイルのパス。 {{jsxref("Error")}} から継承しています。 +- {{jsxref("Error.prototype.lineNumber", "WebAssembly.CompileError.prototype.lineNumber")}} + - : このエラーを発生させたファイルの行番号。 {{jsxref("Error")}} から継承しています。 +- {{jsxref("Error.prototype.columnNumber", "WebAssembly.CompileError.prototype.columnNumber")}} + - : このエラーが発生した行の列番号。 {{jsxref("Error")}} から継承しています。 +- {{jsxref("Error.prototype.stack", "WebAssembly.CompileError.prototype.stack")}} + - : スタックトレース。 {{jsxref("Error")}} から継承しています。 + +## インスタンスメソッド + +- {{jsxref("Error.prototype.toSource", "WebAssembly.CompileError.prototype.toSource()")}} + - : 同じエラーを評価できるコードを返します。 {{jsxref("Error")}} から継承しています。 +- {{jsxref("Error.prototype.toString", "WebAssembly.CompileError.prototype.toString()")}} + - : 指定された `Error` オブジェクトを表す文字列を返します。{{jsxref("Error")}} から継承しています。 + +## 例 + +### 新しい CompileError のインスタンスの作成 + +以下のスニペットでは、新しい `CompileError` インスタンスを生成して、詳細をコンソールに記録します。 + +```js +try { + throw new WebAssembly.CompileError('Hello', 'someFile', 10); +} catch (e) { + console.log(e instanceof CompileError); // true + console.log(e.message); // "Hello" + console.log(e.name); // "CompileError" + console.log(e.fileName); // "someFile" + console.log(e.lineNumber); // 10 + console.log(e.columnNumber); // 0 + console.log(e.stack); // コードが実行されていた位置を返す +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/global/global/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/global/global/index.md new file mode 100644 index 0000000000..116ea04f15 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/global/global/index.md @@ -0,0 +1,84 @@ +--- +title: WebAssembly.Global() コンストラクター +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/Global +tags: + - Constructor + - JavaScript + - Reference + - WebAssembly +browser-compat: javascript.builtins.WebAssembly.Global.Global +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/Global +--- +{{JSRef}} + +**`WebAssembly.Global()`** コンストラクターは、グローバル変数のインスタンスを表す新しい `Global` オブジェクトを表し、これは JavaScript からアクセス可能で、 1 つ以上の {{jsxref("WebAssembly.Module")}} インスタンスの間でインポート/エクスポート可能です。これにより、複数のモジュールを動的リンクすることができます。 + +## 構文 + +```js +new WebAssembly.Global(descriptor, value) +``` + +### 引数 + +- _descriptor_ + + - : `GlobalDescriptor` 辞書オブジェクトで、 2 つのプロパティを持っています。 + + - `value`: [`USVString`](/ja/docs/Web/API/USVString) で、そのグローバル変数のデータ型を表します。これは `i32`、`i64`、`f32`、`f64` のいずれかです。 USVString は Unicode のスカラー値の取りうる並びに相当します。 USVString は JavaScript で返されたときに、 String にマップされます。一般的に、テキスト処理を行い、操作するために Unicode スカラー値の文字列を必要とする API にのみ使用されます。 USVString は、対になっていないサロゲートコードポイントを許可しないことを除いて、 DOMString と同等です。 USVString に存在する対になっていないサロゲートコードポイントは、ブラウザーが Unicode の「置換文字」 U+FFFD, (�) に変換されます。 + - `mutable`: 論理値で、そのグローバル変数が変更可能であるかどうかを表します。既定では `false` です。 + +- _value_ + - : 変数が保持する値です。変数のデータ型に合う限りどんな値でも取れます。もしも何の値も渡されないと、[`DefaultValue` + アルゴリズム](https://webassembly.github.io/spec/js-api/#defaultvalue)で指定した時のように、型付きの 0 が使われます。 + +## 例 + +### 新しい Global インスタンスの生成 + +以下の例は、 `WebAssembly.Global()` コンストラクターを用いて生成された新しいグローバルインスタンスです。これは変更可能 (mutable) な `i32` 型で、値は 0 です。 + +その後、グローバルの値は、まず `Global.value` プロパティを使用して `42` に変更され、次に `global.wasm` モジュールからエクスポートされた `incGlobal()` 関数を使用して 43 に変更されます (これは、与えられた値に 1 を追加してから新しい値を返します)。 + +```js +const output = document.getElementById('output'); + +function assertEq(msg, got, expected) { + output.innerHTML += `Testing ${msg}: `; + if (got !== expected) + output.innerHTML += `FAIL!<br>Got: ${got}<br>Expected: ${expected}<br>`; + else + output.innerHTML += `SUCCESS! Got: ${got}<br>`; +} + +assertEq("WebAssembly.Global exists", typeof WebAssembly.Global, "function"); + +const global = new WebAssembly.Global({value:'i32', mutable:true}, 0); + +WebAssembly.instantiateStreaming(fetch('global.wasm'), { js: { global } }) +.then(({instance}) => { + assertEq("getting initial value from wasm", instance.exports.getGlobal(), 0); + global.value = 42; + assertEq("getting JS-updated value from wasm", instance.exports.getGlobal(), 42); + instance.exports.incGlobal(); + assertEq("getting wasm-updated value from JS", global.value, 43); +}); +``` + +> **Note:** この例は[GitHub 上の実行例](https://mdn.github.io/webassembly-examples/js-api-examples/global.html)で確認できます。また、[ソースコード](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html)も参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) overview page +- [WebAssembly concepts](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) +- [Import/Export + mutable globals proposal](https://github.com/WebAssembly/mutable-global/blob/master/proposals/mutable-global/Overview.md) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/global/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/global/index.html deleted file mode 100644 index 16817b0777..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/global/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: WebAssembly.Global -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global -tags: - - API - - Constructor - - JavaScript - - Reference - - WebAssembly - - global -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global ---- -<div>{{JSRef}}</div> - -<p><strong><code>WebAssembly.Global</code></strong> はグローバル変数として存在し、JavaScript または {{jsxref("WebAssembly.Module")}} インスタンスから参照することができます。これにより動的に複数のモジュールをリンクすることができます。</p> - -<h2 id="Constructor_Syntax" name="Constructor_Syntax">コンストラクターの文法</h2> - -<pre class="syntaxbox">var myGlobal = new WebAssembly.Global(<em>descriptor</em>, <em>value</em>);</pre> - -<h3 id="Parameters" name="Parameters">パラメーター</h3> - -<dl> - <dt><em>descriptor</em></dt> - <dd><code>GlobalDescriptor</code> 辞書オブジェクト、2 つの要素を持っている: - <ul> - <li><code>value</code>: {{domxref("USVString")}} はグローバルデータ形式を表し値として <code>i32</code>、<code>i64</code>、<code>f32</code>、<code>f64</code> のうち一つを取ります。</li> - <li><code>mutable</code>: グローバルがミュータブルかどうかの真偽値です。デフォルトでは <code>false</code> です。</li> - </ul> - </dd> - <dt><em>value</em></dt> - <dd>変数が保持する値です。変数のデータ型に合う限りどんな値でも取れます。もしも何の値も渡されないと、<a href="https://webassembly.github.io/spec/js-api/#defaultvalue"><code>DefaultValue</code> algorithm</a> で指定した時の様な 型ありの 0 が使われます。</dd> -</dl> - -<h2 id="Function_properties_of_the_Global_constructor" name="Function_properties_of_the_Global_constructor">グローバルコンストラクターによる関数プロパティ</h2> - -<p>無し</p> - -<h2 id="Global_instances" name="Global_instances">グローバルインスタンス</h2> - -<p>すべてのグローバルインスタンスは <code>Global()</code> コンストラクターのプロパティオブジェクトを受け継ぐ — これによりすべての <code>Global</code> インスタンスを変更できる</p> - -<h3 id="Instance_properties" name="Instance_properties">インスタンスプロパティ</h3> - -<p>{{page('/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype', 'Properties')}}</p> - -<h3 id="Instance_methods" name="Instance_methods">インスタンスメソッド</h3> - -<p>{{page('/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype', 'Methods')}}</p> - -<h2 id="Examples" name="Examples">例</h2> - -<p>以下の例では新しいグローバルインスタンスは <code>WebAssembly.Global()</code> コンストラクターを用いて初期化され、初期値 0 のミュータブルな <code>i32</code> 型として定義されます。</p> - -<p>その後この値は、<code>Global.value</code> プロパティを使うことによって <code>42</code> に、<code>global.wasm</code> モジュールから公開された <code>incGlobal()</code> 関数 (入力に限らず 1 を加算する) を使うことによって <code>43</code> になります。</p> - -<pre class="brush: js">const output = document.getElementById('output'); - -function assertEq(msg, got, expected) { - output.innerHTML += `Testing ${msg}: `; - if (got !== expected) - output.innerHTML += `FAIL!<br>Got: ${got}<br>Expected: ${expected}<br>`; - else - output.innerHTML += `SUCCESS! Got: ${got}<br>`; -} - -assertEq("WebAssembly.Global exists", typeof WebAssembly.Global, "function"); - -const global = new WebAssembly.Global({value:'i32', mutable:true}, 0); - -WebAssembly.instantiateStreaming(fetch('global.wasm'), { js: { global } }) -.then(({instance}) => { - assertEq("getting initial value from wasm", instance.exports.getGlobal(), 0); - global.value = 42; - assertEq("getting JS-updated value from wasm", instance.exports.getGlobal(), 42); - instance.exports.incGlobal(); - assertEq("getting wasm-updated value from JS", global.value, 43); -});</pre> - -<div class="note"> -<p><strong>メモ</strong>: <a href="https://mdn.github.io/webassembly-examples/js-api-examples/global.html">GitHub 上で動くデモ</a>が試せます。<a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html">ソースコード</a>も確認してみてください。</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('WebAssembly JS', '#globals', 'WebAssembly.Global()')}}</td> - <td>{{Spec2('WebAssembly JS')}}</td> - <td>初回ドラフト定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> - -<div> - - -<p>{{Compat("javascript.builtins.WebAssembly.Global")}}</p> -</div> - -<h2 id="See_also" name="See_also">参考</h2> - -<ul> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> 概要ページ</li> - <li><a href="/ja/docs/WebAssembly/Concepts">WebAssembly とは何か</a></li> - <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API を使用する</a></li> - <li><a href="https://github.com/WebAssembly/mutable-global/blob/master/proposals/mutable-global/Overview.md">Import/Export mutable globals proposal</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/global/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/global/index.md new file mode 100644 index 0000000000..68b78bdb66 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/global/index.md @@ -0,0 +1,87 @@ +--- +title: WebAssembly.Global +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global +tags: + - Class + - JavaScript + - Reference + - WebAssembly +browser-compat: javascript.builtins.WebAssembly.Global +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global +--- +{{JSRef}} + +**`WebAssembly.Global`** はグローバル変数のインスタンスを表します。 JavaScript からアクセスでき、1つ以上の {{jsxref("WebAssembly.Module")}} インスタンス間でインポート/エクスポートすることができます。これにより複数のモジュールを動的にリンクすることができます。 + +## コンストラクター + +- [`WebAssembly.Global()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/Global) + - : 新しい `Global` オブジェクトを生成します。 + +## Global のインスタンス + +すべての `Global` のインスタンスは `Global()` コンストラクターのプロパティオブジェクトを継承します。これによりすべての `Global` インスタンスを変更することができます。 + +### インスタンスプロパティ + +- `Global.prototype.constructor` + - : このオブジェクトのインスタンスを生成した関数を返します。既定では、これは {{jsxref("WebAssembly.Global()")}} コンストラクターです。 +- `Global.prototype[@@toStringTag]` + - : [@@toStringTag](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) プロパティの初期値で、文字列値 "WebAssembly.Global" です。 +- `Global.prototype.value` + - : グローバル変数の中に含まれている値です。これにより、グローバル値を直接設定および取得することができます。 + +### インスタンスメソッド + +- `Global.prototype.valueOf()` + - : グローバル変数の中に含まれている値を返す古い形のメソッドです。 + +## 例 + +### 新しい Global インスタンスの生成 + +以下の例では新しいグローバルインスタンスは `WebAssembly.Global()` コンストラクターを用いて初期化され、初期値 0 の変更可能な `i32` 型として定義されます。 + +その後この値は、`Global.value` プロパティを使うことによって `42` に、`global.wasm` モジュールから公開された (どんな値が与えられても 1 を加算して、新しい値を返す) `incGlobal()` 関数を使うことによって `43` になります。 + +```js +const output = document.getElementById('output'); + +function assertEq(msg, got, expected) { + output.innerHTML += `Testing ${msg}: `; + if (got !== expected) + output.innerHTML += `FAIL!<br>Got: ${got}<br>Expected: ${expected}<br>`; + else + output.innerHTML += `SUCCESS! Got: ${got}<br>`; +} + +assertEq("WebAssembly.Global exists", typeof WebAssembly.Global, "function"); + +const global = new WebAssembly.Global({value:'i32', mutable:true}, 0); + +WebAssembly.instantiateStreaming(fetch('global.wasm'), { js: { global } }) +.then(({instance}) => { + assertEq("getting initial value from wasm", instance.exports.getGlobal(), 0); + global.value = 42; + assertEq("getting JS-updated value from wasm", instance.exports.getGlobal(), 42); + instance.exports.incGlobal(); + assertEq("getting wasm-updated value from JS", global.value, 43); +}); +``` + +> **Note:** この例は[GitHub 上の実行例](https://mdn.github.io/webassembly-examples/js-api-examples/global.html)で確認できます。また、[ソースコード](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html)も参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) overview page +- [WebAssembly concepts](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) +- [Import/Export mutable globals proposal](https://github.com/WebAssembly/mutable-global/blob/master/proposals/mutable-global/Overview.md) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/index.html deleted file mode 100644 index 721d647799..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: WebAssembly -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly -tags: - - API - - JavaScript - - Namespace - - Object - - Reference - - WebAssembly -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly ---- -<div>{{JSRef}}{{SeeCompatTable}}</div> - -<p><strong><code>WebAssembly</code></strong> JavaScript オブジェクトは全ての <a href="/ja/docs/WebAssembly">WebAssembly</a> に関連する機能の名前空間として振る舞います。</p> - -<p>他のグローバルオブジェクトとは異なり、<code>WebAssembly</code> はコンストラクタではありません (関数オブジェクトではない) 。数学定数、関数の名前空間である {{jsxref("Math")}} や 、国際化コンストラクタと他の言語に依存する関数のための {{jsxref("Intl")}} と同等のものです。</p> - -<h2 id="概要">概要</h2> - -<p><code>WebAssembly</code> オブジェクトの主な用途は次のとおりです:</p> - -<ul> - <li>{{jsxref("WebAssembly.instantiate()")}} 関数を用いて WebAssembly コードをロードします。</li> - <li>{{jsxref("WebAssembly.Memory()")}}/{{jsxref("WebAssembly.Table()")}} コンストラクタ経由で新しいメモリやテーブルを生成します。</li> - <li>{{jsxref("WebAssembly.CompileError()")}}/{{jsxref("WebAssembly.LinkError()")}}/{{jsxref("WebAssembly.RuntimeError()")}} コンストラクタを経由して、WebAssembly で発生するエラーを処理する機能を提供します、</li> -</ul> - -<h2 id="メソッド">メソッド</h2> - -<dl> - <dt>{{jsxref("WebAssembly.instantiate()")}}</dt> - <dd>WebAssembly コードをコンパイル、インスタンス化するための主要な API で、 <code>Module</code> と、その最初の <code>Instance</code> を返します。</dd> - <dt>{{jsxref("WebAssembly.instantiateStreaming()")}}</dt> - <dd>ソースのストリームから直接 WebAssembly モジュールをコンパイル、インスタンス化し、 <code>Module</code> と、その最初の <code>Instance</code> を返します。</dd> - <dt>{{jsxref("WebAssembly.compile()")}}</dt> - <dd>{{jsxref("WebAssembly.Module")}} を用いて WebAssembly バイナリコードからコンパイルします。インスタンス化は別ステップとして分離されます。</dd> - <dt>{{jsxref("WebAssembly.compileStreaming()")}}</dt> - <dd>ソースのストリームから直接 {{jsxref("WebAssembly.Module")}} にコンパイルします。インスタンス化は別ステップとして分離されます。</dd> - <dt>{{jsxref("WebAssembly.validate()")}}</dt> - <dd>WebAssembly バイナリコードの型付き配列を検証し、バイト列が有効な WebAssembly コードか (<code>true</code>) 否か (<code>false</code>) を返します。</dd> -</dl> - -<h2 id="コンストラクタ">コンストラクタ</h2> - -<dl> - <dt>{{jsxref("WebAssembly.Module()")}}</dt> - <dd>新しい WebAssembly <code>Module</code> オブジェクトを生成します。</dd> - <dt>{{jsxref("WebAssembly.Instance()")}}</dt> - <dd>新しい WebAssembly <code>Instance</code> オブジェクトを生成します。</dd> - <dt>{{jsxref("WebAssembly.Memory()")}}</dt> - <dd>新しい WebAssembly <code>Memory</code> オブジェクトを生成します。</dd> - <dt>{{jsxref("WebAssembly.Table()")}}</dt> - <dd>新しい WebAssembly <code>Table</code> オブジェクトを生成します。</dd> - <dt>{{jsxref("WebAssembly.CompileError()")}}</dt> - <dd>新しい WebAssembly <code>CompileError</code> オブジェクトを生成します。</dd> - <dt>{{jsxref("WebAssembly.LinkError()")}}</dt> - <dd>新しい WebAssembly <code>LinkError</code> オブジェクトを生成します。</dd> - <dt>{{jsxref("WebAssembly.RuntimeError()")}}</dt> - <dd>新しい WebAssembly <code>RuntimeError</code> オブジェクトを生成します。</dd> -</dl> - -<h2 id="例">例</h2> - -<p>fetch を使用して WebAssembly バイトコードをフェッチした後、{{jsxref("WebAssembly.instantiate()")}} 関数を使用してモジュールをコンパイル、インスタンス化します。その過程で、WebAssembly モジュールに JavaScript の関数をインポートします。このプロミスは解決時に <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module">Module</a></code> と <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance">Instance</a></code> を含むオブジェクト (<code>result</code>) を渡します。次に、<code>Instance</code> からエクスポートされている <a href="/ja/docs/WebAssembly/Exported_functions">エクスポートされた WebAssembly 関数</a> を呼び出します。</p> - -<pre class="brush: js notranslate">var importObject = { - imports: { - imported_func: function(arg) { - console.log(arg); - } - } -}; - -fetch('simple.wasm').then(response => - response.arrayBuffer() -).then(bytes => - WebAssembly.instantiate(bytes, importObject) -).then(result => - result.instance.exports.exported_func() -);</pre> - -<div class="note"> -<p><strong>注</strong>: GitHub上の例 (<a href="https://mdn.github.io/webassembly-examples/js-api-examples/">動作例</a>) の<a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index.html">index.html</a>では、我々で定義した <code><a href="https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js#L1">fetchAndInstantiate()</a></code> ライブラリ関数を使用しています。</p> -</div> - -<h2 id="仕様">仕様</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('WebAssembly JS', '#the-webassembly-object', 'WebAssembly')}}</td> - <td>{{Spec2('WebAssembly JS')}}</td> - <td>初回ドラフト定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> - -<div>{{Compat("javascript.builtins.WebAssembly")}}</div> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> overview page</li> - <li><a href="/ja/docs/WebAssembly/Concepts">WebAssembly のコンセプト</a></li> - <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API を使用する</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/index.md new file mode 100644 index 0000000000..700baceb0b --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/index.md @@ -0,0 +1,87 @@ +--- +title: WebAssembly +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly +tags: + - API + - JavaScript + - Namespace + - Object + - Reference + - WebAssembly +browser-compat: javascript.builtins.WebAssembly +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly +--- +{{JSRef}} + +**`WebAssembly`** は JavaScript のオブジェクトで、 [WebAssembly](/ja/docs/WebAssembly) に関するすべての機能の名前空間の役割をします。 + +他のグローバルオブジェクトとは異なり、 `WebAssembly` はコンストラクターではありません (関数オブジェクトではありません) 。数学の定数や関数の名前空間である {{jsxref("Math")}} や 、国際化のコンストラクターやその他の言語を意識した関数ための {{jsxref("Intl")}} と同様のものです。 + +## 概要 + +`WebAssembly` オブジェクトの主な用途は次のとおりです。 + +- {{jsxref("WebAssembly.instantiate()")}} 関数を用いた WebAssembly コードの読み込み。 +- {{jsxref("WebAssembly.Memory()")}}/{{jsxref("WebAssembly.Table()")}} コンストラクターによる新しいメモリーやテーブルインスタンスの生成。 +- {{jsxref("WebAssembly.CompileError()")}}/{{jsxref("WebAssembly.LinkError()")}}/{{jsxref("WebAssembly.RuntimeError()")}} コンストラクターによる、WebAssembly で発生するエラーの処理する機能の提供。 + +## コンストラクタープロパティ + +- [`WebAssembly.CompileError()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError/CompileError) + - : WebAssembly のデコードまたは検証中のエラーを示します。 +- [`WebAssembly.Global()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/Global) + - : グローバル変数のインスタンスを表し、 JavaScript からアクセス可能で、 1 つ以上の {{jsxref("WebAssembly.Module")}} インスタンスの間でインポート/エクスポート可能です。これにより、複数のモジュールを動的リンクすることができます。 +- [`WebAssembly.Instance()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/Instance) + - : ステートフルで、実行可能な [WebAssembly.Module](/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module) のインスタンスです。 +- [`WebAssembly.LinkError()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError/LinkError) + - : (関数開始後の[トラップ](https://webassembly.org/docs/semantics/#traps)ではなく) モジュールの初期化時に発生したエラーを示します。 +- [`WebAssembly.Memory()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/Memory) + - : {{jsxref("WebAssembly/Memory/buffer","buffer")}} プロパティが可変長の [ArrayBuffer](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) であり、これが WebAssembly の `Instance` からアクセス可能なメモリーのバイト列を保持しています。 +- [`WebAssembly.Module()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/Module) + - : ステートレスの WebAssembly のコードであり、ブラウザーでコンパイルされ、効率的に[ワーカーと共有](/ja/docs/Web/API/Worker/postMessage)することができ、複数回インスタンス化することができます。 +- [`WebAssembly.RuntimeError()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/RuntimeError/RuntimeError) + - : WebAssembly が[トラップ](https://webassembly.org/docs/semantics/#traps)を指定するたびに例外として発生するエラー型です。 +- [`WebAssembly.Table()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/Table) + - : WebAssembly のテーブルを表す配列風の構造で、関数の参照を保持します。 + +## 静的メソッド + +- {{jsxref("WebAssembly.instantiate()")}} + - : WebAssembly コードをコンパイル、インスタンス化するための主要な API で、 `Module` と、その最初の `Instance` を返します。 +- {{jsxref("WebAssembly.instantiateStreaming()")}} + - : ソースのストリームから直接 WebAssembly モジュールをコンパイル、インスタンス化し、 `Module` と、その最初の `Instance` を返します。 +- {{jsxref("WebAssembly.compile()")}} + - : {{jsxref("WebAssembly.Module")}} を用いて WebAssembly バイナリコードからコンパイルします。インスタンス化は別ステップとして分離されます。 +- {{jsxref("WebAssembly.compileStreaming()")}} + - : ソースのストリームから直接 {{jsxref("WebAssembly.Module")}} にコンパイルします。インスタンス化は別ステップとして分離されます。 +- {{jsxref("WebAssembly.validate()")}} + - : WebAssembly バイナリコードの型付き配列を検証し、バイト列が有効な WebAssembly コードか (`true`) 否か (`false`) を返します。 + +## 例 + +## .wasm モジュールを読み込み、コンパイルし、インスタンス化する + +次の例 (GitHub 上の [instantiate-streaming.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html) のデモと、[動作例](https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html)も参照) は、基礎となるソースから .wasm モジュールを直接ストリーミングし、コンパイルしてインスタンス化し、 `ResultObject` で履行されるプロミスを返します。 `instantiateStreaming()` 関数は [`Response`](/ja/docs/Web/API/Response "Response は Fetch API のインターフェイスで、リクエストのレスポンスを表します。") オブジェクトのプロミスを受け付けるので、 [`fetch()`](/ja/docs/Web/API/fetch) の呼び出し結果を直接渡すと、履行されたときにレスポンスを関数に渡すことができます。 + +```js +var importObject = { imports: { imported_func: arg => console.log(arg) } }; + +WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject) +.then(obj => obj.instance.exports.exported_func()); +``` + +それから `ResultObject` の instance メンバーにアクセスすると、呼び出し対象のエクスポートされた関数が入っています。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/instance/exports/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/instance/exports/index.html deleted file mode 100644 index 008a8c3feb..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/instance/exports/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: WebAssembly.Instance.prototype.exports -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports -tags: - - API - - JavaScript - - Property - - Reference - - WebAssembly - - exports - - instance - - プロパティ -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports ---- -<div>{{JSRef}}</div> - -<p><strong><code>exports</code></strong> は {{jsxref("WebAssembly.Instance")}} オブジェクトプロトタイプの読み取り専用プロパティで、 WebAssembly モジュールインスタンスからエクスポートされたすべての関数をメンバ－として持つオブジェクトを返します。これらは、 JavaScript からアクセスして使用することができます。</p> - -<pre class="syntaxbox">instance.exports</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<p>fetch を使用して WebAssembly バイトコードを読み取った後、 {{jsxref("WebAssembly.instantiate()")}} 関数を使用してモジュールをコンパイル、インスタンス化します。このプロセスの中で、 JavaScript 関数を WebAssembly モジュールにインポートします。その後、 <code>Instance</code> からエクスポートされた<a href="/ja/docs/WebAssembly/Exported_functions">エクスポート済み WebAssembly 関数</a> を呼び出します。</p> - -<pre class="brush: js">var importObject = { - imports: { - imported_func: function(arg) { - console.log(arg); - } - } -}; - -WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject) -.then(obj => obj.instance.exports.exported_func());</pre> - -<div class="note"> -<p><strong>メモ</strong>: この例は GitHub 上の <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html">instantiate-streaming.html</a> (<a href="https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html">ライブでも</a>) で見ることができます。</p> -</div> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAssembly JS', '#dom-instance-exports', 'WebAssembly.Instance: exports')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.WebAssembly.Instance.exports")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> 概要ページ</li> - <li><a href="/ja/docs/WebAssembly/Concepts">WebAssembly の概念</a></li> - <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API の使用</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/instance/exports/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/instance/exports/index.md new file mode 100644 index 0000000000..33c3d92a83 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/instance/exports/index.md @@ -0,0 +1,56 @@ +--- +title: WebAssembly.Instance.prototype.exports +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports +tags: + - API + - JavaScript + - プロパティ + - リファレンス + - WebAssembly + - exports + - instance +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports +--- +{{JSRef}} + +**`exports`** は {{jsxref("WebAssembly.Instance")}} オブジェクトプロトタイプの読み取り専用プロパティで、 WebAssembly モジュールインスタンスからエクスポートされたすべての関数をメンバ－として持つオブジェクトを返します。これらは、 JavaScript からアクセスして使用することができます。 + +```js +instance.exports +``` + +## 例 + +### exports の使用 + +fetch を使用して WebAssembly バイトコードを読み取った後、 {{jsxref("WebAssembly.instantiateStreaming()")}} 関数を使用してモジュールをコンパイルし、インスタンス化し、 JavaScript 関数をそのプロセスの WebAssembly モジュールにインポートします。その後、 `Instance` からエクスポートされた[エクスポート済み WebAssembly 関数](/ja/docs/WebAssembly/Exported_functions)を呼び出します。 + +```js +var importObject = { + imports: { + imported_func: function(arg) { + console.log(arg); + } + } +}; + +WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject) +.then(obj => obj.instance.exports.exported_func()); +``` + +> **Note:** この例は GitHub 上の [instantiate-streaming.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html) ([実行例](https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html)) で見ることができます。</p> +</div> + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/instance/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/instance/index.html index f194bec747..1d88562b57 100644 --- a/files/ja/web/javascript/reference/global_objects/webassembly/instance/index.html +++ b/files/ja/web/javascript/reference/global_objects/webassembly/instance/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance --- <div>{{JSRef}}</div> -<p><strong><code>WebAssembly.Instance</code></strong> オブジェクトはステートフルで、実行可能な {{jsxref("WebAssembly.Module")}} のインスタンスです。 <code>Instance</code> オブジェクトには JavaScript から WebAssembly コードを呼び出すことができるすべての<a href="/en-US/docs/WebAssembly/Exported_functions">エクスポートされた WebAssembly 関数</a>が含まれます。</p> +<p><strong><code>WebAssembly.Instance</code></strong> オブジェクトはステートフルで、実行可能な {{jsxref("WebAssembly.Module")}} のインスタンスです。 <code>Instance</code> オブジェクトには JavaScript から WebAssembly コードを呼び出すことができるすべての<a href="/ja/docs/WebAssembly/Exported_functions">エクスポートされた WebAssembly 関数</a>が含まれます。</p> <h2 id="Constructor" name="Constructor">コンストラクター</h2> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/instantiate/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/instantiate/index.html index 740383a83f..7b50060c4b 100644 --- a/files/ja/web/javascript/reference/global_objects/webassembly/instantiate/index.html +++ b/files/ja/web/javascript/reference/global_objects/webassembly/instantiate/index.html @@ -48,7 +48,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate <ul> <li><code>module</code>: コンパイルされた {{jsxref("WebAssembly.Module")}} オブジェクト。この <code>Module</code> は再度インスタンス化することや、 {{domxref("Worker.postMessage", "postMessage()")}} 経由で共有したり、 <a href="/ja/docs/WebAssembly/Caching_modules">IndexedDB にキャッシュ</a>することができます。</li> - <li><code>instance</code>: {{jsxref("WebAssembly.Instance")}} オブジェクトで、すべての <a href="/en-US/docs/WebAssembly/Exported_functions">エクスポートされた WebAssembly 関数</a> を含む。</li> + <li><code>instance</code>: {{jsxref("WebAssembly.Instance")}} オブジェクトで、すべての <a href="/ja/docs/WebAssembly/Exported_functions">エクスポートされた WebAssembly 関数</a> を含む。</li> </ul> <h4 id="Exceptions" name="Exceptions">例外</h4> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/linkerror/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/linkerror/index.html deleted file mode 100644 index df9758010e..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/linkerror/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: WebAssembly.LinkError() -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError ---- -<div>{{JSRef}} {{SeeCompatTable}}</div> - -<p><code><strong>WebAssembly.LinkError()</strong></code> コンストラクタは WebAssembly <code>LinkError</code> オブジェクトを生成します。これはモジュールのインスタンス化中にエラーが発生したことを示します (スタート関数からの <a href="http://webassembly.org/docs/semantics/#traps">トラップ</a> も含みます) 。</p> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox">new WebAssembly.LinkError(<var>message</var>, <var>fileName</var>, <var>lineNumber</var>)</pre> - -<h3 id="パラメータ">パラメータ</h3> - -<dl> - <dt><code>message</code> {{optional_inline}}</dt> - <dd>ヒューマンリーダブルなエラーの説明。</dd> - <dt><code>fileName</code> {{optional_inline}}{{non-standard_inline}}</dt> - <dd>例外の原因となったコードを含むファイルの名前。</dd> - <dt><code>lineNumber</code> {{optional_inline}}{{non-standard_inline}}</dt> - <dd>例外の原因となったコードの行番号。</dd> -</dl> - -<h2 id="プロパティ">プロパティ</h2> - -<p><em><code>LinkError</code> コンストラクタは自身のプロパティを持ちませんが、プロトタイプチェーンを通していくつかのプロパティを継承します。</em></p> - -<dl> - <dt><code>WebAssembly.LinkError.prototype.constructor</code></dt> - <dd>インスタンスのプロトタイプを生成した関数を示します。</dd> - <dt>{{jsxref("Error.prototype.message", "WebAssembly.LinkError.prototype.message")}}</dt> - <dd>エラーメッセージ。ECMA-262 では {{jsxref("URIError")}} は自身の <code>message</code> プロパティを提供する必要がありますが、<a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> では {{jsxref("Error.prototype.message")}} を継承します。</dd> - <dt>{{jsxref("Error.prototype.name", "WebAssembly.LinkError.prototype.name")}}</dt> - <dd>エラー名。{{jsxref("Error")}} から継承されます。</dd> - <dt>{{jsxref("Error.prototype.fileName", "WebAssembly.LinkError.prototype.fileName")}}</dt> - <dd>このエラーを発生させたファイルのパス。{{jsxref("Error")}} から継承されます。</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "WebAssembly.LinkError.prototype.lineNumber")}}</dt> - <dd>このエラーを発生させたファイルの行番号。{{jsxref("Error")}} から継承されます。</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "WebAssembly.LinkError.prototype.columnNumber")}}</dt> - <dd>このエラーが発生した行の列番号。{{jsxref("Error")}} から継承されます。</dd> - <dt>{{jsxref("Error.prototype.stack", "WebAssembly.LinkError.prototype.stack")}}</dt> - <dd>スタックトレース。{{jsxref("Error")}} から継承されます。</dd> -</dl> - -<h2 id="メソッド">メソッド</h2> - -<p><em><code>LinkError</code> コンストラクタは自身のメソッドを持ちませんが、プロトタイプチェーンを通していくつかのメソッドを継承します。</em></p> - -<dl> - <dt>{{jsxref("Error.prototype.toSource", "WebAssembly.LinkError.prototype.toSource()")}}</dt> - <dd>同じエラーを評価できるコードを返します。{{jsxref("Error")}} から継承されます。</dd> - <dt>{{jsxref("Error.prototype.toString", "WebAssembly.LinkError.prototype.toString()")}}</dt> - <dd>指定された <code>Error</code> オブジェクトを表す文字列を返します。{{jsxref("Error")}} から継承されます。</dd> -</dl> - -<h2 id="例">例</h2> - -<p>以下のスニペットで <code>LinkError</code> インスタンスを生成して、詳細をコンソールに表示します。</p> - -<pre class="brush: js">try { - throw new WebAssembly.LinkError('Hello', 'someFile', 10); -} catch (e) { - console.log(e instanceof LinkError); // true - console.log(e.message); // "Hello" - console.log(e.name); // "LinkError" - console.log(e.fileName); // "someFile" - console.log(e.lineNumber); // 10 - console.log(e.columnNumber); // 0 - console.log(e.stack); // コードが実行された場所を返す -}</pre> - -<h2 id="仕様">仕様</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('WebAssembly JS', '#constructor-properties-of-the-webassembly-object', 'WebAssembly constructors')}}</td> - <td>{{Spec2('WebAssembly JS')}}</td> - <td>WebAssembly の初回ドラフト定義。</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard', 'NativeError')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>標準の NativeError 型の定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> - -<div>{{Compat("javascript.builtins.WebAssembly.LinkError")}}</div> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> overview page</li> - <li><a href="/ja/docs/WebAssembly/Concepts">WebAssembly のコンセプト</a></li> - <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API を使用する</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/linkerror/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/linkerror/index.md new file mode 100644 index 0000000000..fb4adc12fe --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/linkerror/index.md @@ -0,0 +1,77 @@ +--- +title: WebAssembly.LinkError +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError +tags: + - API + - Class + - JavaScript + - LinkError + - Reference + - WebAssembly +browser-compat: javascript.builtins.WebAssembly.LinkError +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError +--- +{{JSRef}} + +**`WebAssembly.RuntimeLinkError`** オブジェクトは、モジュールのインスタンス化の際に発生したエラーを示します (開始した関数での[トラップ](https://webassembly.org/docs/semantics/#traps)を除く)。 + +## コンストラクター + +- [`WebAssembly.LinkError()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError/LinkError) + - : 新しい `WebAssembly.LinkError` オブジェクトを生成します。 + +## インスタンスプロパティ + +- {{jsxref("Error.prototype.message", "WebAssembly.LinkError.prototype.message")}} + - : エラーメッセージ。 {{jsxref("Error")}} から継承しています。 +- {{jsxref("Error.prototype.name", "WebAssembly.LinkError.prototype.name")}} + - : エラー名。 {{jsxref("Error")}} から継承しています。 +- {{jsxref("Error.prototype.fileName", "WebAssembly.LinkError.prototype.fileName")}} + - : このエラーを発生させたファイルのパス。 {{jsxref("Error")}} から継承しています。 +- {{jsxref("Error.prototype.lineNumber", "WebAssembly.LinkError.prototype.lineNumber")}} + - : このエラーを発生させたファイルの行番号。 {{jsxref("Error")}} から継承しています。 +- {{jsxref("Error.prototype.columnNumber", "WebAssembly.LinkError.prototype.columnNumber")}} + - : このエラーが発生した行の列番号。 {{jsxref("Error")}} から継承しています。 +- {{jsxref("Error.prototype.stack", "WebAssembly.LinkError.prototype.stack")}} + - : スタックトレース。 {{jsxref("Error")}} から継承しています。 + +## インスタンスメソッド + +- {{jsxref("Error.prototype.toSource", "WebAssembly.LinkError.prototype.toSource()")}} + - : 同じエラーを評価できるコードを返します。 {{jsxref("Error")}} から継承しています。 +- {{jsxref("Error.prototype.toString", "WebAssembly.LinkError.prototype.toString()")}} + - : 指定された `Error` オブジェクトを表す文字列を返します。{{jsxref("Error")}} から継承しています。 + +## 例 + +### 新しい LinkError のインスタンスの作成 + +以下のスニペットでは、新しい `LinkError` インスタンスを生成して、詳細をコンソールに記録します。 + +```js +try { + throw new WebAssembly.LinkError('Hello', 'someFile', 10); +} catch (e) { + console.log(e instanceof LinkError); // true + console.log(e.message); // "Hello" + console.log(e.name); // "LinkError" + console.log(e.fileName); // "someFile" + console.log(e.lineNumber); // 10 + console.log(e.columnNumber); // 0 + console.log(e.stack); // コードが実行されていた位置を返す +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/linkerror/linkerror/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/linkerror/linkerror/index.md new file mode 100644 index 0000000000..e1aa59eade --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/linkerror/linkerror/index.md @@ -0,0 +1,66 @@ +--- +title: WebAssembly.LinkError() コンストラクター +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError/LinkError +tags: + - Constructor + - JavaScript + - Reference + - WebAssembly +browser-compat: javascript.builtins.WebAssembly.LinkError.LinkError +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError/LinkError +--- +{{JSRef}} + +**`WebAssembly.LinkError()`** コンストラクターは、新しい WebAssembly `LinkError` オブジェクトを生成します。これは、 (関数開始後の[トラップ](https://webassembly.org/docs/semantics/#traps)ではなく) モジュールがインスタンス化される間に発生したエラーを発生します。 + +## 構文 + +```js +new WebAssembly.LinkError() +new WebAssembly.LinkError(message) +new WebAssembly.LinkError(message, fileName) +new WebAssembly.LinkError(message, fileName, lineNumber) +``` + +### 引数 + +- `message` {{optional_inline}} + - : 人間が読めるエラーの説明です。 +- `fileName` {{optional_inline}} + - : 例外が発生したコードを含むファイル名です。 +- `lineNumber` {{optional_inline}} + - : 例外が発生したコードの行番号です。 + +## 例 + +### 新しい LinkError のインスタンスの生成 + +以下のスニペットは新しい `LinkError` のインスタンスを生成し、コンソールに詳細を記録します。 + +```js +try { + throw new WebAssembly.LinkError('Hello', 'someFile', 10); +} catch (e) { + console.log(e instanceof WebAssembly.LinkError); // true + console.log(e.message); // "Hello" + console.log(e.name); // "LinkError" + console.log(e.fileName); // "someFile" + console.log(e.lineNumber); // 10 + console.log(e.columnNumber); // 0 + console.log(e.stack); // コードの実行されていた位置を返す +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/memory/buffer/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/memory/buffer/index.html deleted file mode 100644 index 78052aba53..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/memory/buffer/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: WebAssembly.Memory.prototype.buffer -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer -tags: - - API - - Buffer - - JavaScript - - Property - - Reference - - WebAssembly - - memory - - プロパティ -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer ---- -<div>{{JSRef}}</div> - -<p><strong><code>buffer</code></strong> は {{jsxref("WebAssembly.Memory")}} オブジェクトのプロトタイププロパティで、メモリに含まれるバッファーを返します。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<p>次の例では (GitHub 上の <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html">memory.html</a> および<a href="https://mdn.github.io/webassembly-examples/js-api-examples/memory.html">ライブデモ版</a> もご覧ください)、 memory.wasm バイトコードを {{jsxref("WebAssembly.instantiateStreaming()")}} メソッドを使用して読み込みんでインスタンス化し、その上の行で生成されたメモリにインポートします。それから、メモリにいくつかの値を格納し、関数をエクスポートして使用し、いくつかの値を合計します。</p> - -<pre class="brush: js">WebAssembly.instantiateStreaming(fetch('memory.wasm'), { js: { mem: memory } }) -.then(obj => { - var i32 = new Uint32Array(memory.buffer); - for (var i = 0; i < 10; i++) { - i32[i] = i; - } - var sum = obj.instance.exports.accumulate(0, 10); - console.log(sum); -});</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAssembly JS', '#dom-memory-buffer', 'buffer')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.WebAssembly.Memory.buffer")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> 概要ページ</li> - <li><a href="/ja/docs/WebAssembly/Concepts">WebAssembly の概念</a></li> - <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API の使用</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/memory/buffer/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/memory/buffer/index.md new file mode 100644 index 0000000000..49b0be1e58 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/memory/buffer/index.md @@ -0,0 +1,49 @@ +--- +title: WebAssembly.Memory.prototype.buffer +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer +tags: + - API + - Buffer + - JavaScript + - プロパティ + - Reference + - WebAssembly + - memory +browser-compat: javascript.builtins.WebAssembly.Memory.buffer +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer +--- +{{JSRef}} + +**`buffer`** は {{jsxref("WebAssembly.Memory")}} オブジェクトのプロトタイププロパティで、メモリーに含まれるバッファーを返します。 + +## 例 + +### buffer の使用 + +次の例 (GitHub 上の [memory.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html) および[動作例](https://mdn.github.io/webassembly-examples/js-api-examples/memory.html)も参照) では、 memory.wasm バイトコードを {{jsxref("WebAssembly.instantiateStreaming()")}} メソッドを使用して読み込みんでインスタンス化し、その上の行で生成されたメモリーにインポートします。それから、メモリーにいくつかの値を格納し、関数をエクスポートして使用し、いくつかの値を合計します。 + +```js +WebAssembly.instantiateStreaming(fetch('memory.wasm'), { js: { mem: memory } }) +.then(obj => { + var i32 = new Uint32Array(memory.buffer); + for (var i = 0; i < 10; i++) { + i32[i] = i; + } + var sum = obj.instance.exports.accumulate(0, 10); + console.log(sum); +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/memory/grow/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/memory/grow/index.html deleted file mode 100644 index 7f7d936a08..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/memory/grow/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: WebAssembly.Memory.prototype.grow() -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/grow -tags: - - API - - JavaScript - - Method - - Reference - - WebAssembly - - grow - - memory - - メソッド -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/grow ---- -<div>{{JSRef}}</div> - -<p><strong><code>grow()</code></strong> は {{jsxref("WebAssembly.Memory")}} オブジェクトのプロトタイプメソッドで、指定した WebAssembly ページの数だけメモリインスタンスの大きさを拡張します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">memory.grow(<em>number</em>); -</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><em>number</em></dt> - <dd>メモリを拡大する WebAssembly ページ数 (それぞれは 64KiB の大きさ)。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>以前のメモリの大きさを、 WebAssembly ページ単位で返します。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<p>以下の例では、新しい WebAssembly メモリインスタンスを初期サイズ1ページ (64KiB)、最大サイズ10ページ (640KiB) で作成します。</p> - -<pre class="brush: js">var memory = new WebAssembly.Memory({initial:1, maximum:10});</pre> - -<p>それから、インスタンスを1ページ分拡張することができます。</p> - -<pre class="brush: js">const bytesPerPage = 64 * 1024; -console.log(memory.buffer.byteLength / bytesPerPage); // "1" -console.log(memory.grow(1)); // "1" -console.log(memory.buffer.byteLength / bytesPerPage); // "2" -</pre> - -<p>なお、ここでの <code>grow()</code> の返値は直前の WebAssembly ページ数です。</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAssembly JS', '#dom-memory-grow', 'grow()')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.WebAssembly.Memory.grow")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> 概要ページ</li> - <li><a href="/ja/docs/WebAssembly/Concepts">WebAssembly の概念</a></li> - <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API の使用</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/memory/grow/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/memory/grow/index.md new file mode 100644 index 0000000000..e868d4621a --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/memory/grow/index.md @@ -0,0 +1,67 @@ +--- +title: WebAssembly.Memory.prototype.grow() +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/grow +tags: + - API + - JavaScript + - メソッド + - Reference + - WebAssembly + - grow + - memory +browser-compat: javascript.builtins.WebAssembly.Memory.grow +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/grow +--- +{{JSRef}} + +**`grow()`** は [`Memory`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory) オブジェクトのプロトタイプメソッドで、指定した WebAssembly ページの数だけメモリーインスタンスの大きさを拡張します。 + +## 構文 + +```js +grow(number) +``` + +## 引数 + +- _number_ + - : メモリーを拡大する WebAssembly ページ数 (それぞれは 64KiB の大きさ)。 + +### 返値 + +以前のメモリーの大きさを、 WebAssembly ページ単位で返します。 + +## 例 + +### grow の使用 + +以下の例では、新しい WebAssembly メモリーインスタンスを初期サイズ 1 ページ (64KiB)、最大サイズ 10 ページ (640KiB) で作成します。 + +```js +var memory = new WebAssembly.Memory({initial:1, maximum:10}); +``` + +それから、インスタンスを 1 ページ分拡張することができます。 + +```js +const bytesPerPage = 64 * 1024; +console.log(memory.buffer.byteLength / bytesPerPage); // "1" +console.log(memory.grow(1)); // "1" +console.log(memory.buffer.byteLength / bytesPerPage); // "2" +``` + +なお、ここでの `grow()` の返値は直前の WebAssembly ページ数です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) 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 deleted file mode 100644 index 4064df7666..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/memory/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: WebAssembly.Memory() -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory -tags: - - Class - - JavaScript - - Reference - - WebAssembly - - クラス -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory ---- -<div>{{JSRef}}</div> - -<p><code><strong>WebAssembly.Memory</strong></code> オブジェクトは {{jsxref("WebAssembly/Memory/buffer","buffer")}} プロパティを持ち、これはサイズ変更可能な {{jsxref("ArrayBuffer")}} で、 WebAssembly <code>Instance</code> からアクセスする生のバイト列のメモリを持ちます。</p> - -<p>JavaScript または WebAssembly コードから生成されたメモリは JavaScript と WebAssembly のどちらからもアクセス、変更が可能になります。</p> - -<h2 id="Constructor" name="Constructor">コンストラクター</h2> - -<dl> - <dt>{{jsxref("WebAssembly.Memory()")}}</dt> - <dd>新しい <code>Memory</code> オブジェクトを生成します。</dd> -</dl> - -<h2 id="Memory_インスタンス"><code>Memory</code> インスタンス</h2> - -<p>全ての <code>Memory</code> インスタンスは <code>Memory()</code> コンストラクターの<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/prototype">プロトタイプオブジェクト</a>を継承しています。これは全ての <code>Memory</code> インスタンスに影響するように変更可能です。</p> - -<h3 id="Instance_properties" name="Instance_properties">インスタンスプロパティ</h3> - -<dl> - <dt><code>Memory.prototype.constructor</code></dt> - <dd>このオブジェクトのインスタンスを生成した関数を返します。既定では {{jsxref("WebAssembly.Memory()")}} コンストラクターです。</dd> - <dt>{{jsxref("WebAssembly/Memory/buffer","Memory.prototype.buffer")}}</dt> - <dd>メモリに格納されているバッファーを返すアクセサープロパティです。</dd> -</dl> - -<h3 id="Instance_methods" name="Instance_methods">インスタンスメソッド</h3> - -<dl> - <dt>{{jsxref("WebAssembly/Memory/grow","Memory.prototype.grow()")}}</dt> - <dd>指定した WebAssembly ページの数 (64KBを1単位とする) で <code>Memory</code> インスタンスのサイズを増やします。</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<p><code>WebAssembly.Memory</code> オブジェクトを取得する方法は2つあります。1つ目は JavaScript から生成する方法です。以下の例では、初期サイズが10ページ (640KiB) 、最大サイズが100ページ (6.4MiB) で新しい WebAssembly Memory インスタンスを生成しています。</p> - -<pre class="brush: js">var memory = new WebAssembly.Memory({initial:10, maximum:100});</pre> - -<p>2つ目は WebAssembly モジュールからエクスポートされた <code>WebAssembly.Memory</code> オブジェクトを使用する方法です。次の例では (GitHub 上の <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html">memory.html</a> および<a href="https://mdn.github.io/webassembly-examples/js-api-examples/memory.html">ライブデモ版</a> もご覧ください)、 memory.wasm バイトコードを {{jsxref("WebAssembly.instantiateStreaming()")}} メソッドを使用して読み込みんでインスタンス化し、その上の行で生成されたメモリにインポートします。それから、メモリにいくつかの値を格納し、関数をエクスポートして使用し、いくつかの値を合計します。</p> - -<pre class="brush: js">fetchAndInstantiate('memory.wasm').then(function(instance) { - var i32 = new Uint32Array(instance.exports.mem.buffer); - for (var i = 0; i < 10; i++) { - i32[i] = i; - } - var sum = instance.exports.accumulate(0, 10); - console.log(sum); -});</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAssembly JS', '#memories', 'Memory')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.WebAssembly.Memory")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> 概要ページ</li> - <li><a href="/ja/docs/WebAssembly/Concepts">WebAssembly の概念</a></li> - <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API の使用</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/memory/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/memory/index.md new file mode 100644 index 0000000000..5432227ae2 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/memory/index.md @@ -0,0 +1,90 @@ +--- +title: WebAssembly.Memory() +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory +tags: + - クラス + - JavaScript + - Reference + - WebAssembly +browser-compat: javascript.builtins.WebAssembly.Memory +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory +--- +{{JSRef}} + +**`WebAssembly.Memory`** オブジェクトはサイズ変更可能な {{jsxref("ArrayBuffer")}} または [`SharedArrayBuffer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer) であり、 WebAssembly `Instance` からアクセスする生のバイト列のメモリーを持ちます。</p> + +JavaScript または WebAssembly コードから生成されたメモリーは JavaScript と WebAssembly のどちらからもアクセス、変更が可能になります。 + +## コンストラクター + +- [`WebAssembly.Memory()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/Memory) + - : 新しい `Memory` オブジェクトを生成します。 + +## インスタンスプロパティ + +- [`Memory.prototype.buffer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer) + - : メモリーに格納されているバッファーを返すアクセサープロパティです。 + +## インスタンスメソッド + +- [`Memory.prototype.grow()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/grow) + - : 指定した WebAssembly ページ (64KB で 1 単位) の数でメモリーのインスタンスのサイズを増やします。 + +## 例 + +### 新しい Memory オブジェクトの生成 + +`WebAssembly.Memory` オブジェクトを取得する方法は 2 つあります。 1 つ目は JavaScript から生成する方法です。以下の例では、初期サイズが 10 ページ (640KiB) 、最大サイズが 100 ページ (6.4MiB) で新しい WebAssembly Memory インスタンスを生成しています。その [`buffer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer) プロパティは [`ArrayBuffer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) を返します。 + +```js +var memory = new WebAssembly.Memory({initial:10, maximum:100}); +``` + +次の例では (GitHub 上の [memory.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html) および[実行例](https://mdn.github.io/webassembly-examples/js-api-examples/memory.html)も参照)、 memory.wasm バイトコードを {{jsxref("WebAssembly.instantiateStreaming()")}} メソッドを使用して読み込みんでインスタンス化し、その上の行で生成されたメモリにインポートします。それから、メモリにいくつかの値を格納し、関数をエクスポートして使用し、いくつかの値を合計します。 + +```js +WebAssembly.instantiateStreaming(fetch('memory.wasm'), { js: { mem: memory } }) +.then(obj => { + var i32 = new Uint32Array(memory.buffer); + for (var i = 0; i < 10; i++) { + i32[i] = i; + } + var sum = obj.instance.exports.accumulate(0, 10); + console.log(sum); +}); +``` + +WebAssembly.Memory オブジェクトを取得する 2 つ目の方法は、 WebAssembly モジュールによってエクスポートされることです。このメモリは WebAssembly インスタンスの `exports` プロパティで (メモリーが WebAssembly モジュール内でエクスポートされた後に) アクセスできます。次のスニペットは、 WebAssembly からエクスポートされたメモリを `memory`という名前でインポートし、メモリーの最初の要素を Uint32Array として解釈して表示しています。 + +```js +WebAssembly.instantiateStreaming(fetch('memory.wasm')) +.then(obj => { + var i32 = new Uint32Array(obj.instance.exports.memory.buffer); + console.log(i32[0]); + }); +``` + +### 共有メモリーの作成 + +既定では、 WebAssembly のメモリーは共有されていません。[共有メモリー](/ja/docs/WebAssembly/Understanding_the_text_format#shared_memories)を作成するには、コンストラクター +の初期化オブジェクトに `shared: true` を渡します。 + +```js +let memory = new WebAssembly.Memory({initial:10, maximum:100, shared: true}); +``` + +このメモリーの `buffer` プロパティは [`SharedArrayBuffer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer) を返します。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/memory/memory/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/memory/memory/index.html deleted file mode 100644 index 4c9c8f1d09..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/memory/memory/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: WebAssembly.Memory() コンストラクター -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/Memory -tags: - - Constructor - - JavaScript - - Reference - - WebAssembly - - コンストラクター -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/Memory ---- -<div>{{JSRef}}</div> - -<p>The <code><strong>WebAssembly.Memory()</strong></code> コンストラクターは新しい <code>Memory</code> オブジェクトを生成します。これは {{jsxref("WebAssembly/Memory/buffer","buffer")}} プロパティでサイズ変更可能な {{jsxref("ArrayBuffer")}} により、 WebAssembly <code>Instance</code> からアクセスする生のバイト列のメモリを持ちます。</p> - -<p>JavaScript または WebAssembly コードから生成されたメモリは JavaScript と WebAssembly のどちらからもアクセス、変更が可能になります。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">new WebAssembly.Memory(<var>memoryDescriptor</var>);</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code><var>memoryDescriptor</var></code></dt> - <dd>以下のメンバーを含むことができるオブジェクトです。 - <dl> - <dt><em>initial</em></dt> - <dd>WebAssembly メモリの初期サイズで、単位は WebAssembly ページ数です。</dd> - <dt><em>maximum {{optional_inline}}</em></dt> - <dd>WebAssembly メモリを拡張できる最大サイズで、単位は WebAssembly ページ数です。存在する場合、 <code>maximum</code> 引数はエンジンがメモリを予約するヒントとして使用されます。ただし、エンジンはこの予約リクエストを無視したり固定したりすることがあります。一般的に、ほとんどの WebAssembly モジュールは <code>maximum</code> を設定する必要はありません。</dd> - </dl> - </dd> -</dl> - -<div class="note"> -<p><strong>メモ</strong>: WebAssembly ページは 65,536 バイト、すなわち 64KiB の固定長です。</p> -</div> - -<h3 id="Exceptions" name="Exceptions">例外</h3> - -<ul> - <li><code>memoryDescriptor</code> がオブジェクトでない場合は、 {{jsxref("TypeError")}} が発生します。</li> - <li><code>maximum</code> が設定されており、かつ <code>initial</code> よりも小さい場合は、 {{jsxref("RangeError")}} が発生します。</li> -</ul> - -<h2 id="Examples" name="Examples">例</h2> - -<p><code>WebAssembly.Memory</code> オブジェクトを取得する方法は2つあります。1つ目は JavaScript から生成する方法です。以下の例では、初期サイズが10ページ (640KiB) 、最大サイズが100ページ (6.4MiB) で新しい WebAssembly Memory インスタンスを生成しています。</p> - -<pre class="brush: js">var memory = new WebAssembly.Memory({initial:10, maximum:100});</pre> - -<p>2つ目は WebAssembly モジュールからエクスポートされた <code>WebAssembly.Memory</code> オブジェクトを使用する方法です。次の例では (GitHub 上の <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html">memory.html</a> および<a href="https://mdn.github.io/webassembly-examples/js-api-examples/memory.html">ライブデモ版</a> もご覧ください)、 memory.wasm バイトコードを {{jsxref("WebAssembly.instantiateStreaming()")}} メソッドを使用して読み込みんでインスタンス化し、その上の行で生成されたメモリにインポートします。それから、メモリにいくつかの値を格納し、関数をエクスポートして使用し、いくつかの値を合計します。</p> - -<pre class="brush: js">WebAssembly.instantiateStreaming(fetch('memory.wasm'), { js: { mem: memory } }) -.then(obj => { - var i32 = new Uint32Array(memory.buffer); - for (var i = 0; i < 10; i++) { - i32[i] = i; - } - var sum = obj.instance.exports.accumulate(0, 10); - console.log(sum); -});</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAssembly JS', '#dom-memory-memory', 'Memory')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.WebAssembly.Memory.Memory")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> 概要ページ</li> - <li><a href="/ja/docs/WebAssembly/Concepts">WebAssembly の概念</a></li> - <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API の使用</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/memory/memory/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/memory/memory/index.md new file mode 100644 index 0000000000..377afbde14 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/memory/memory/index.md @@ -0,0 +1,91 @@ +--- +title: WebAssembly.Memory() コンストラクター +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/Memory +tags: + - コンストラクター + - JavaScript + - Reference + - WebAssembly +browser-compat: javascript.builtins.WebAssembly.Memory.Memory +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/Memory +--- +{{JSRef}} + +**`WebAssembly.Memory()`** コンストラクターは新しい `Memory` オブジェクトを生成します。これは {{jsxref("WebAssembly/Memory/buffer","buffer")}} プロパティがサイズ変更可能な [`ArrayBuffer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) または `SharedArrayBuffer` であり、 WebAssembly の `Instance` からアクセスする生のバイト列のメモリーであるものです。 + +JavaScript または WebAssembly コードから生成されたメモリーは JavaScript と WebAssembly のどちらからもアクセス、変更が可能になります。 + +## 構文 + +```js +new WebAssembly.Memory(memoryDescriptor) +``` + +### 引数 + +- _memoryDescriptor_ + + - : 以下のメンバーを含むことができるオブジェクトです。 + + - _initial_ + - : WebAssembly メモリーの初期サイズで、単位は WebAssembly ページ数です。 + - _maximum {{optional_inline}}_ + - : WebAssembly メモリーを拡張できる最大サイズで、単位は WebAssembly ページ数です。存在する場合、 `maximum` 引数はエンジンがメモリーを予約するヒントとして使用されます。ただし、エンジンはこの予約リクエストを無視したり固定したりすることがあります。一般的に、ほとんどの WebAssembly モジュールでは `maximum` を設定する必要はありません。 + - shared _{{optional_inline}}_ + - : 論理値で、このメモリーを共有メモリーにするかどうかを定義します。 `true` に設定すると、共有メモリーになります。既定値は `false` です。 + +> **Note:** WebAssembly ページは 65,536 バイト、すなわち 64KiB の固定長です。 + +### 例外 + +- `memoryDescriptor` がオブジェクトでない場合は、 {{jsxref("TypeError")}} が発生します。 +- `maximum` が設定されており、かつ `initial` よりも小さい場合は、 {{jsxref("RangeError")}} が発生します。 + +## 例 + +### 新しい Memory インスタンスの作成 + +`WebAssembly.Memory` オブジェクトを取得する方法は 2 つあります。 1 つ目は JavaScript から構築する方法です。次の例では、新しい WebAssembly Memory インスタンスを初期サイズが 10 ページ (640KiB) 、最大サイズが 100 ページ (6.4MiB) で生成しています。この [`buffer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer) プロパティは [`ArrayBuffer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) を返します。 + +```js +var memory = new WebAssembly.Memory({initial:10, maximum:100}); +``` + +2 つ目は WebAssembly モジュールからエクスポートされた `WebAssembly.Memory` オブジェクトを使用する方法です。次の例では (GitHub 上の [memory.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html) および[動作例](https://mdn.github.io/webassembly-examples/js-api-examples/memory.html)も参照)、 memory.wasm バイトコードを {{jsxref("WebAssembly.instantiateStreaming()")}} メソッドで読み込みんでインスタンス化し、その上の行で生成されたメモリーにインポートします。それから、メモリーにいくつかの値を格納し、関数をエクスポートして使用し、いくつかの値を合計します。 + +```js +WebAssembly.instantiateStreaming(fetch('memory.wasm'), { js: { mem: memory } }) +.then(obj => { + var i32 = new Uint32Array(memory.buffer); + for (var i = 0; i < 10; i++) { + i32[i] = i; + } + var sum = obj.instance.exports.accumulate(0, 10); + console.log(sum); +}); +``` + +### 共有メモリーの作成 + +既定では、 WebAssembly のメモリーは共有されていません。[共有メモリー](/ja/docs/WebAssembly/Understanding_the_text_format#shared_memories)を作成するには、コンストラクター +の初期化オブジェクトに `shared: true` を渡してください。 + +```js +let memory = new WebAssembly.Memory({initial:10, maximum:100, shared:true}); +``` + +このメモリーの `buffer` プロパティは [`SharedArrayBuffer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer) を返します。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/module/customsections/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/module/customsections/index.html deleted file mode 100644 index 1915dd6f59..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/module/customsections/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: WebAssembly.Module.customSections() -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/customSections -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/customSections ---- -<div>{{JSRef}}{{SeeCompatTable}}</div> - -<p><strong><code>WebAssembly.customSections()</code></strong> 関数はモジュールと文字列名を指定して、全てのカスタムセクションのコンテンツのコピーを返します。</p> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox">var custSec = WebAssembly.Module.customSections(<em>module</em>, <em>sectionName</em>);</pre> - -<h3 id="パラメータ">パラメータ</h3> - -<dl> - <dt><em>module</em></dt> - <dd>カスタムセクションが考慮されている {{jsxref("WebAssembly.Module")}} オブジェクト。</dd> - <dt><em>sectionName</em></dt> - <dd>目的のカスタムセクションの文字列名。</dd> -</dl> - -<h3 id="戻り値">戻り値</h3> - -<p><code>sectionName</code> にマッチした全てのカスタムセクションの {{domxref("ArrayBuffer")}} コピーの配列 (もしかしたら空の場合もあります) 。</p> - -<h3 id="例外">例外</h3> - -<p>もし <code>module</code> が {{jsxref("WebAssembly.Module")}} オブジェクトインスタンスでない場合、{{jsxref("TypeError")}} がスローされます。</p> - -<h2 id="カスタムセクション">カスタムセクション</h2> - -<p>wasm モジュールは一連の <strong>セクション</strong> で構成されています。これらのセクションのほとんどは wasm の仕様によって完全に指定、バリデーションされますが、バリデーション中に無視されスキップされる <strong>カスタムセクション</strong> をモジュールに含めることができます (通常のセクション("既知のセクション")とカスタムセクションを区別するための情報は <a href="https://github.com/WebAssembly/design/blob/master/BinaryEncoding.md#high-level-structure">高レベルの構造</a> を読んでください)。</p> - -<p>これにより開発者は他の目的のために wasm モジュール内にカスタムデータを含めることができます。例えば、開発者がモジュール内の全ての関数とローカル変数に名前を付けられる (ネイティブビルドにおける "シンボル" のようなもの) <a href="https://github.com/WebAssembly/design/blob/master/BinaryEncoding.md#name-section">ネームカスタムセクション</a> のようなものがあります 。</p> - -<p>Note that the WebAssembly テキストフォーマットには現在新しいカスタムセクションのための構文の仕様がありません。しかし、テキストフォーマットから .wasm に変換するときに wasm にネームセクションを追加することができます。<a href="https://github.com/webassembly/wabt">wabt tool</a> の一部である wast2wasm コマンドで <code>--debug-names</code> オプションを指定することができます。これを指定することにより、ネームカスタムセクションを持つ .wasm に変換することができます:</p> - -<pre class="brush: bash">wast2wasm simple-name-section.was -o simple-name-section.wasm --debug-names</pre> - -<h2 id="例">例</h2> - -<p>次の例では(custom-section.html の <a href="https://github.com/mdn/webassembly-examples/blob/master/other-examples/custom-section.html">ソース</a> と <a href="https://mdn.github.io/webassembly-examples/other-examples/custom-section.html">動作例</a> をご確認ください) 、ロードした section.wasm バイトコードをコンパイルしています。</p> - -<p>それから、<code>WebAssembly.Module.customSections</code> を使用して <code>length</code> が0より大きいかチェックして、モジュールに "name" カスタムセクションが含まれているかどうかチェックします。この例では "name" カスタムセクションが存在するため、<code>ArrayBuffer</code> オブジェクトが返されます。</p> - -<pre class="brush: js">fetch('simple-name-section.wasm').then(response => - response.arrayBuffer() -).then(bytes => - WebAssembly.compile(bytes) -).then(function(mod) { - var nameSections = WebAssembly.Module.customSections(mod, "name"); - if (nameSections.length != 0) { - console.log("Module contains a name section"); - console.log(nameSections[0]); - }; -});</pre> - -<h2 id="仕様">仕様</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('WebAssembly JS', '#webassemblymodulecustomsections', 'customSections()')}}</td> - <td>{{Spec2('WebAssembly JS')}}</td> - <td>初回ドラフト定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> - -<p>{{Compat("javascript.builtins.WebAssembly.Module.customSections")}}</p> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> overview page</li> - <li><a href="/ja/docs/WebAssembly/Concepts">WebAssembly のコンセプト</a></li> - <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API を使用する</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/module/customsections/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/module/customsections/index.md new file mode 100644 index 0000000000..401ddba03f --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/module/customsections/index.md @@ -0,0 +1,84 @@ +--- +title: WebAssembly.Module.customSections() +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/customSections +tags: + - API + - JavaScript + - Method + - Module + - Object + - Reference + - WebAssembly + - customSections +browser-compat: javascript.builtins.WebAssembly.Module.customSections +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/customSections +--- +{{JSRef}} + +**`WebAssembly.customSections()`** 関数はモジュールと文字列名を指定して、すべてのカスタムセクションのコンテンツのコピーを返します。 + +## 構文 + +```js +WebAssembly.Module.customSections(module, sectionName) +``` + +### 引数 + +- _module_ + - : カスタムセクションを考慮する {{jsxref("WebAssembly.Module")}} オブジェクト。 +- _sectionName_ + - : 目的のカスタムセクションの文字列名。 + +### 返値 + +`sectionName` に一致するすべてのカスタムセクションの {{jsxref("ArrayBuffer")}} コピーの配列 (空の場合もあります)。 + +### 例外 + +`module` が {{jsxref("WebAssembly.Module")}} オブジェクトのインスタンスでない場合、{{jsxref("TypeError")}} が発生します。 + +## 解説 + +wasm モジュールは一連の **セクション** で構成されています。これらのセクションのほとんどは wasm の仕様によって完全に指定、検証されますが、検証中に無視されスキップされる **カスタムセクション** をモジュールに含めることができます (通常のセクション ("既知のセクション") とカスタムセクションを区別するための情報は [高レベルの構造](https://github.com/WebAssembly/design/blob/master/BinaryEncoding.md#high-level-structure) を読んでください)。 + +これにより開発者は他の目的のために wasm モジュール内にカスタムデータを含めることができます。例えば、開発者がモジュール内の全ての関数とローカル変数に名前を付けられる (ネイティブビルドにおける "シンボル" のようなもの) [ネームカスタムセクション](https://github.com/WebAssembly/design/blob/master/BinaryEncoding.md#name-section) のようなものがあります 。 + +なお、 WebAssembly テキストフォーマットには現在新しいカスタムセクションのための構文の仕様がありません。しかし、テキストフォーマットから .wasm に変換するときに wasm にネームセクションを追加することができます。 [wabt tool](https://github.com/webassembly/wabt) の一部である wast2wasm コマンドで `--debug-names` オプションを指定することができ、これを指定することにより、ネームカスタムセクションを持つ .wasm に変換することができます。 + +```bash +wast2wasm simple-name-section.was -o simple-name-section.wasm --debug-names +``` + +## 例 + +### customSections の使用 + +次の例では (custom-section.html の[ソース](https://github.com/mdn/webassembly-examples/blob/master/other-examples/custom-section.html)と[動作例](https://mdn.github.io/webassembly-examples/other-examples/custom-section.html)をご確認ください) 、読み込んだ section.wasm バイトコードをコンパイルします。 + +それから、`WebAssembly.Module.customSections` を使用して `length` が 0 より大きいかチェックして、モジュールに "name" カスタムセクションが含まれているかどうかチェックします。この例では "name" カスタムセクションが存在するため、`ArrayBuffer` オブジェクトが返されます。 + +```js +WebAssembly.compileStreaming(fetch('simple-name-section.wasm')) +.then(function(mod) { + var nameSections = WebAssembly.Module.customSections(mod, "name"); + if (nameSections.length != 0) { + console.log("Module contains a name section"); + console.log(nameSections[0]); + }; +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/module/exports/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/module/exports/index.html deleted file mode 100644 index fb852a1a29..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/module/exports/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: WebAssembly.Module.exports() -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/exports -tags: - - API - - Constructor - - Experimental - - JavaScript - - Method - - Module - - Object - - Reference - - WebAssembly - - exports -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/exports ---- -<div>{{JSRef}} {{ SeeCompatTable}}</div> - -<p><strong><code>WebAssembly.exports()</code></strong> 関数は指定した <code>Module</code> のエクスポート宣言の定義の配列を返します。</p> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox">var exports = WebAssembly.Module.exports(module);</pre> - -<h3 id="パラメータ">パラメータ</h3> - -<dl> - <dt><em>module</em></dt> - <dd>{{jsxref("WebAssembly.Module")}} オブジェクト。</dd> -</dl> - -<h3 id="戻り値">戻り値</h3> - -<p>指定したモジュールのエクスポートされた関数を表現するオブジェクトの配列。</p> - -<h3 id="例外">例外</h3> - -<p>もしモジュールが {{jsxref("WebAssembly.Module")}} オブジェクトインスタンス出ない場合、{{jsxref("TypeError")}} がスローされます。</p> - -<h2 id="例">例</h2> - -<p>次の例では (Github のデモ <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index-compile.html">index-compile.html</a> と、<a href="https://mdn.github.io/webassembly-examples/js-api-examples/index-compile.html">動作例</a> もご確認ください) {{jsxref("WebAssembly.compile()")}} 関数を使用してロードした simple.wasm をコンパイルして、 <a href="/ja/docs/Web/API/Worker/postMessage">postMessage()</a> を使用してそれを <a href="https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API">worker</a> に送信しています。</p> - -<pre class="brush: js">var worker = new Worker("wasm_worker.js"); - -fetch('simple.wasm').then(response => - response.arrayBuffer() -).then(bytes => - WebAssembly.compile(bytes) -).then(mod => - worker.postMessage(mod) -);</pre> - -<p>worker (<code><a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/wasm_worker.js">wasm_worker.js</a></code> を参照) 内で、モジュールで使用するためにインポートオブジェクトを定義して、そのあとにメインスレッドからモジュールを受け取るためのイベントハンドラをセットアップします。モジュールを受け取ったとき、{{jsxref("WebAssembly.Instantiate()")}} メソッドを使用してインスタンスを生成し、その内部でエクスポートされた関数を実行します。そのあとに <code>WebAssembly.Module.exports</code> を使用してモジュール上の利用可能なエクスポートの情報を返す方法を示します。</p> - -<pre class="brush: js">var importObject = { - imports: { - imported_func: function(arg) { - console.log(arg); - } - } -}; - -onmessage = function(e) { - console.log('module received from main thread'); - var mod = e.data; - - WebAssembly.instantiate(mod, importObject).then(function(instance) { - instance.exports.exported_func(); - }); - - var exports = WebAssembly.Module.exports(mod); - console.log(exports[0]); -};</pre> - -<p><code>exports[0]</code> のアウトプットはこのようになります:</p> - -<pre class="brush: js">{ name: "exported_func", kind: "function" }</pre> - -<h2 id="仕様">仕様</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('WebAssembly JS', '#webassemblymoduleexports', 'exports()')}}</td> - <td>{{Spec2('WebAssembly JS')}}</td> - <td>Initial draft definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> - -<div>{{Compat("javascript.builtins.WebAssembly.Module.exports")}}</div> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> overview page</li> - <li><a href="/ja/docs/WebAssembly/Concepts">WebAssembly のコンセプト</a></li> - <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API を使用する</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/module/exports/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/module/exports/index.md new file mode 100644 index 0000000000..a9a33494b3 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/module/exports/index.md @@ -0,0 +1,96 @@ +--- +title: WebAssembly.Module.exports() +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/exports +tags: + - API + - JavaScript + - Method + - Module + - Object + - Reference + - WebAssembly + - exports +browser-compat: javascript.builtins.WebAssembly.Module.exports +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/exports +--- +{{JSRef}} + +**`WebAssembly.Module.exports()`** 関数は、指定された `Module` のエクスポート宣言の定義の配列を返します。 + +## 構文 + +```js +WebAssembly.Module.exports(module) +``` + +### 引数 + +- _module_ + - : {{jsxref("WebAssembly.Module")}} オブジェクトです。 + +### 返値 + +指定したモジュールのエクスポートされた関数を表現するオブジェクトの配列です。 + +### 例外 + +モジュールが {{jsxref("WebAssembly.Module")}} オブジェクトのインスタンスではない場合、{{jsxref("TypeError")}} が発生します。 + +## 例 + +### exports の使用 + +次の例 (Github のデモ [index-compile.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index-compile.html) と、[動作例](https://mdn.github.io/webassembly-examples/js-api-examples/index-compile.html)も参照) では、{{jsxref("WebAssembly.compileStreaming()")}} 関数を使用して読み込んだ simple.wasm のバイトコードをコンパイルして、[ワーカー](/ja/docs/Web/API/Web_Workers_API)に [postMessage()](/ja/docs/Web/API/Worker/postMessage) を使用して送信しています。</p> + +```js +var worker = new Worker("wasm_worker.js"); + +WebAssembly.compileStreaming(fetch('simple.wasm')) +.then(mod => + worker.postMessage(mod) +); +``` + +ワーカー ([`wasm_worker.js`](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/wasm_worker.js) を参照) 内で、モジュールで使用するためにインポートオブジェクトを定義して、そのあとにメインスレッドからモジュールを受け取るためのイベントハンドラをセットアップします。モジュールを受け取ったとき、{{jsxref("WebAssembly.Instantiate()")}} メソッドを使用してインスタンスを生成し、その内部でエクスポートされた関数を実行します。そのあとに `WebAssembly.Module.exports` を使用してモジュール上の利用可能なエクスポートの情報を返す方法を示します。 + +```js +var importObject = { + imports: { + imported_func: function(arg) { + console.log(arg); + } + } +}; + +onmessage = function(e) { + console.log('module received from main thread'); + var mod = e.data; + + WebAssembly.instantiate(mod, importObject).then(function(instance) { + instance.exports.exported_func(); + }); + + var exports = WebAssembly.Module.exports(mod); + console.log(exports[0]); +}; +``` + +`exports[0]` の出力はこのようになります。 + +```js +{ name: "exported_func", kind: "function" } +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/module/imports/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/module/imports/index.html deleted file mode 100644 index 564219f9af..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/module/imports/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: WebAssembly.Module.imports() -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/imports -tags: - - API - - JavaScript - - Method - - Module - - Object - - Reference - - WebAssembly - - imports - - メソッド -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/imports ---- -<div>{{JSRef}}</div> - -<p><strong><code>WebAssembly.imports()</code></strong> 関数は、指定した <code>Module</code> の全てのインポート宣言の定義を配列として返します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">WebAssembly.Module.imports(module);</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><em>module</em></dt> - <dd>{{jsxref("WebAssembly.Module")}} オブジェクトです。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>指定したモジュールのインポートされた関数を表現するオブジェクトの配列。</p> - -<h3 id="Exceptions" name="Exceptions">例外</h3> - -<p>もしモジュールが {{jsxref("WebAssembly.Module")}} オブジェクトのインスタンスでなければ {{jsxref("TypeError")}} が発生します。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<p>次の例では (imports.html の <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/imports.html">ソースコード</a> と <a href="https://mdn.github.io/webassembly-examples/js-api-examples/imports.html">動作例</a> もご確認ください) ロードした simple.wasm モジュールをコンパイルした後、インポート宣言を問い合わせています。</p> - -<pre class="brush: js">WebAssembly.compileStreaming(fetch('simple.wasm')) -.then(function(mod) { - var imports = WebAssembly.Module.imports(mod); - console.log(imports[0]); -}); -</pre> - -<p>出力結果は次のようになります。</p> - -<pre class="brush: js">{ module: "imports", name: "imported_func", kind: "function" }</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAssembly JS', '#dom-module-imports', 'imports()')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.WebAssembly.Module.imports")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> 概要ページ</li> - <li><a href="/ja/docs/WebAssembly/Concepts">WebAssembly の概念</a></li> - <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API の使用</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/module/imports/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/module/imports/index.md new file mode 100644 index 0000000000..29cf2c4a99 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/module/imports/index.md @@ -0,0 +1,71 @@ +--- +title: WebAssembly.Module.imports() +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/imports +tags: + - API + - JavaScript + - メソッド + - Module + - Object + - Reference + - WebAssembly + - imports +browser-compat: javascript.builtins.WebAssembly.Module.imports +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/imports +--- +{{JSRef}} + +**`WebAssembly.imports()`** 関数は、指定された `Module` の全てのインポート宣言の定義を配列として返します。 + +## 構文 + +```js +WebAssembly.Module.imports(module) +``` + +### 引数 + +- _module_ + - : {{jsxref("WebAssembly.Module")}} オブジェクトです。 + +### 返値 + +指定されたモジュールのインポートされた関数を表現するオブジェクトの配列。 + +### 例外 + +module が {{jsxref("WebAssembly.Module")}} オブジェクトインスタンスでなかった場合は、 {{jsxref("TypeError")}} が発生します。 + +## 例 + +### imports の使用 + +次の例では ([imports.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/imports.html) と[動作例](https://mdn.github.io/webassembly-examples/js-api-examples/imports.html)も参照)、読み込んだ simple.wasm モジュールをコンパイルします。このモジュールは imports から問い合わせされます。 + +```js +WebAssembly.compileStreaming(fetch('simple.wasm')) +.then(function(mod) { + var imports = WebAssembly.Module.imports(mod); + console.log(imports[0]); +}); +``` + +出力はこのようになります。 + +```js +{ module: "imports", name: "imported_func", kind: "function" } +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/module/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/module/index.html deleted file mode 100644 index 36fabff4a2..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/module/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: WebAssembly.Module -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module -tags: - - API - - Constructor - - Experimental - - JavaScript - - Module - - Reference - - WebAssembly -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module ---- -<div>{{JSRef}}</div> - -<p><strong><code>WebAssembly.Module</code></strong> オブジェクトには、ブラウザーでコンパイルされたステートレスな WebAssembly コードが含まれています。これを効率的に<a href="/ja/docs/Web/API/Worker/postMessage">ワーカー間で共有</a>したり、複数回インスタンス化したりすることができます。</p> - -<h2 id="Constructor" name="Constructor">コンストラクター</h2> - -<dl> - <dt>{{jsxref("Global_Objects/WebAssembly/Module/Module", "WebAssembly.Module()")}}</dt> - <dd>新しい <code>Module</code> オブジェクトを生成します。</dd> -</dl> - -<h2 id="Static_properties" name="Static_properties">静的プロパティ</h2> - -<dl> - <dt>{{jsxref("Global_Objects/WebAssembly/Module/customSections", "WebAssembly.Module.customSections()")}}</dt> - <dd><code>Module</code> と文字列を指定すると、モジュール内の与えられた文字列を名前に持つ全てのカスタムセクションの内容を返します。</dd> - <dt>{{jsxref("Global_Objects/WebAssembly/Module/exports", "WebAssembly.Module.exports()")}}</dt> - <dd><code>Module</code> を指定すると、エクスポート宣言の情報を配列として返します。</dd> - <dt>{{jsxref("Global_Objects/WebAssembly/Module/imports", "WebAssembly.Module.imports()")}}</dt> - <dd><code>Module</code> を指定すると、インポート宣言の情報を配列として返します。</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Sending_a_compiled_module_to_a_worker" name="Sending_a_compiled_module_to_a_worker">コンパイル済みのモジュールをワーカーに送信</h3> - -<p>以下の例では (GitHub 上の <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index-compile.html">index-compile.html</a> および<a href="https://mdn.github.io/webassembly-examples/js-api-examples/index-compile.html">ライブ表示</a>も参照してください)、読み込まれた <code>simple.wasm</code> のバイトコードを {{jsxref("WebAssembly.compileStreaming()")}} メソッドでコンパイルし、結果の <code>Module</code> インスタンスを<a href="/ja/docs/Web/API/Web_Workers_API">ワーカー</a>へ、 {{domxref("Worker/postMessage", "postMessage()")}} を使用して送信します。</p> - -<pre class="brush: js notranslate">var worker = new Worker("wasm_worker.js"); - -WebAssembly.compileStreaming(fetch('simple.wasm')) -.then(mod => - worker.postMessage(mod) -);</pre> - -<p>ワーカー内では (<code><a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/wasm_worker.js">wasm_worker.js</a></code> を参照)、モジュールを使用するための import オブジェクトを定義し、メインスレッドからモジュールを受け取るためのイベントハンドラーをセットアップします。モジュールを受け取ったら、 {{jsxref("WebAssembly.instantiate()")}} メソッドを使ってインスタンスを作成し、その中からエクスポートされた関数を呼び出します。</p> - -<pre class="brush: js notranslate">var importObject = { - imports: { - imported_func: function(arg) { - console.log(arg); - } - } -}; - -onmessage = function(e) { - console.log('module received from main thread'); - var mod = e.data; - - WebAssembly.instantiate(mod, importObject).then(function(instance) { - instance.exports.exported_func(); - }); -};</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAssembly JS', '#modules', 'WebAssembly.Module()')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.WebAssembly.Module")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> 概要ページ</li> - <li><a href="/ja/docs/WebAssembly/Concepts">WebAssembly の概念</a></li> - <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API の使用</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/module/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/module/index.md new file mode 100644 index 0000000000..64cdd9d996 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/module/index.md @@ -0,0 +1,79 @@ +--- +title: WebAssembly.Module +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module +tags: + - Class + - JavaScript + - Module + - Reference + - WebAssembly +browser-compat: javascript.builtins.WebAssembly.Module +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module +--- +{{JSRef}} + +**`WebAssembly.Module`** オブジェクトには、ブラウザーでコンパイルされたステートレスな WebAssembly コードが含まれています。これを効率的に[ワーカー間で共有](/ja/docs/Web/API/Worker/postMessage)したり、複数回インスタンス化したりすることができます。 + +## コンストラクター + +- {{jsxref("Global_Objects/WebAssembly/Module/Module", "WebAssembly.Module()")}} + - : 新しい `Module` オブジェクトを生成します。 + +## 静的プロパティ + +- {{jsxref("Global_Objects/WebAssembly/Module/customSections", "WebAssembly.Module.customSections()")}} + - : `Module` と文字列を指定すると、モジュール内の与えられた文字列を名前に持つすべてのカスタムセクションの内容を返します。 +- {{jsxref("Global_Objects/WebAssembly/Module/exports", "WebAssembly.Module.exports()")}} + - : `Module` を指定すると、エクスポート宣言の情報を配列として返します。 +- {{jsxref("Global_Objects/WebAssembly/Module/imports", "WebAssembly.Module.imports()")}} + - : `Module` を指定すると、インポート宣言の情報を配列として返します。 + +## 例 + +### コンパイル済みのモジュールをワーカーに送信 + +以下の例では (GitHub 上の [index-compile.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index-compile.html) および[実行例](https://mdn.github.io/webassembly-examples/js-api-examples/index-compile.html)も参照)、読み込まれた `simple.wasm` のバイトコードを {{jsxref("WebAssembly.compileStreaming()")}} メソッドでコンパイルし、結果の `Module` インスタンスを[ワーカー](/ja/docs/Web/API/Web_Workers_API)へ、 {{domxref("Worker/postMessage", "postMessage()")}} を使用して送信します。 + +```js +var worker = new Worker("wasm_worker.js"); + +WebAssembly.compileStreaming(fetch('simple.wasm')) +.then(mod => + worker.postMessage(mod) +); +``` + +ワーカー内では ([`wasm_worker.js`](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/wasm_worker.js) を参照)、モジュールを使用するための import オブジェクトを定義し、メインスレッドからモジュールを受け取るためのイベントハンドラーをセットアップします。モジュールを受け取ったら、 {{jsxref("WebAssembly.instantiate()")}} メソッドを使ってインスタンスを作成し、その中からエクスポートされた関数を呼び出します。 + +```js +var importObject = { + imports: { + imported_func: function(arg) { + console.log(arg); + } + } +}; + +onmessage = function(e) { + console.log('module received from main thread'); + var mod = e.data; + + WebAssembly.instantiate(mod, importObject).then(function(instance) { + instance.exports.exported_func(); + }); +}; +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/module/module/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/module/module/index.md new file mode 100644 index 0000000000..c92057ae93 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/module/module/index.md @@ -0,0 +1,73 @@ +--- +title: WebAssembly.Module() コンストラクター +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/Module +tags: + - Constructor + - JavaScript + - Module + - Reference + - WebAssembly +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/Module +browser-compat: javascript.builtins.WebAssembly.Module.Module +--- +{{JSRef}} + +**`WebAssembly.Module()`** コンストラクターは、ステートレスな WebAssembly コードを含む新しい Module オブジェクトを生成します。これはブラウザーでコンパイルされ、[Worker と効率的に共有する](/ja/docs/Web/API/Worker/postMessage)ことができ、複数回インスタンス化することができます。 + +`WebAssembly.Module()` コンストラクター関数は、与えられた WebAssembly バイナリーコードを同期的にコンパイルするために呼び出すことができます。しかし、`Module` を取得するには、 +{{jsxref("WebAssembly.compile()")}} のような非同期コンパイル関数を使用するほうが主流です。 + +## 構文 + +> **Warning:** 大きなモジュールのコンパイルにはコストがかかるため、開発者はどうしても同期コンパイルが必要な場合にのみ `Module()` コンストラクターを使用し、それ以外の場合には非同期の {{jsxref("WebAssembly.compileStreaming()")}} メソッドを使用してください。 + +```js +new WebAssembly.Module(bufferSource) +``` + +### 引数 + +- _bufferSource_ + - : [型付き配列](/en-US/docs/Web/JavaScript/Typed_arrays)または [ArrayBuffer](/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) で、コンパイルしたい .wasm モジュールのバイナリーコードです。 + +## 例 + +### WebAssembly モジュールの同期的なコンパイル + +```js +var importObject = { + imports: { + imported_func: function(arg) { + console.log(arg); + } + } +}; + +function createWasmModule(bytes) { + return new WebAssembly.Module(bytes); +} + +fetch('simple.wasm').then(response => + response.arrayBuffer() +).then(bytes => { + let mod = createWasmModule(bytes); + WebAssembly.instantiate(mod, importObject) + .then(result => + result.exports.exported_func() + ); +}) +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/runtimeerror/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/runtimeerror/index.html deleted file mode 100644 index 9b0b408383..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/runtimeerror/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: WebAssembly.RuntimeError() -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/RuntimeError -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/RuntimeError ---- -<div>{{JSRef}} {{SeeCompatTable}}</div> - -<p><code><strong>WebAssembly.RuntimeError()</strong></code> コンストラクタは WebAssembly <code>RuntimeError</code> オブジェクトを生成します。WebAssembly で定義されている <a href="http://webassembly.org/docs/semantics/#traps">トラップ</a> が発生するごとにスローされます。</p> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox">new WebAssembly.RuntimeError(<var>message</var>, <var>fileName</var>, <var>lineNumber</var>)</pre> - -<h3 id="パラメータ">パラメータ</h3> - -<dl> - <dt><code>message</code> {{optional_inline}}</dt> - <dd>ヒューマンリーダブルなエラーの説明。</dd> - <dt><code>fileName</code> {{optional_inline}}{{non-standard_inline}}</dt> - <dd>例外の原因となったコードを含むファイルの名前。</dd> - <dt><code>lineNumber</code> {{optional_inline}}{{non-standard_inline}}</dt> - <dd>例外の原因となったコードの行番号。</dd> -</dl> - -<h2 id="プロパティ">プロパティ</h2> - -<p><em><code>RuntimeError</code> コンストラクタは自身のプロパティを持ちませんが、プロトタイプチェーンを通していくつかのプロパティを継承します。</em></p> - -<dl> - <dt><code>WebAssembly.RuntimeError.prototype.constructor</code></dt> - <dd>インスタンスのプロトタイプを生成した関数を示します。</dd> - <dt>{{jsxref("Error.prototype.message", "WebAssembly.RuntimeError.prototype.message")}}</dt> - <dd>エラーメッセージ。ECMA-262 では {{jsxref("URIError")}} は自身の <code>message</code> プロパティを提供する必要がありますが、<a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> では {{jsxref("Error.prototype.message")}} を継承します。</dd> - <dt>{{jsxref("Error.prototype.name", "WebAssembly.RuntimeError.prototype.name")}}</dt> - <dd>エラー名。 {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.fileName", "WebAssembly.RuntimeError.prototype.fileName")}}</dt> - <dd>このエラーを発生させたファイルのパス。{{jsxref("Error")}} から継承されます。</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "WebAssembly.RuntimeError.prototype.lineNumber")}}</dt> - <dd>このエラーを発生させたファイルの行番号。{{jsxref("Error")}} から継承されます。</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "WebAssembly.RuntimeError.prototype.columnNumber")}}</dt> - <dd>このエラーが発生した行の列番号。<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Error" title="Error コンストラクターは、エラーオブジェクトを生成します。Error オブジェクトのインスタンスは、ランタイムエラーが発生した時に投げられます。Error オブジェクトは、ユーザー定義の例外の基底オブジェクトとして使用することもできます。標準の組み込みエラー型については下記を参照してください。"><code>Error</code></a> から継承されます。{{jsxref("Error")}} から継承されます。</dd> - <dt>{{jsxref("Error.prototype.stack", "WebAssembly.RuntimeError.prototype.stack")}}</dt> - <dd>スタックトレース。{{jsxref("Error")}} から継承されます。</dd> -</dl> - -<h2 id="メソッド">メソッド</h2> - -<p><em><code>RuntimeError</code> コンストラクタは自身のメソッドを持ちませんが、プロトタイプチェーンを通していくつかのメソッドを継承します。</em></p> - -<dl> - <dt>{{jsxref("Error.prototype.toSource", "WebAssembly.RuntimeError.prototype.toSource()")}}</dt> - <dd>同じエラーを評価できるコードを返します。{{jsxref("Error")}} から継承されます。</dd> - <dt>{{jsxref("Error.prototype.toString", "WebAssembly.RuntimeError.prototype.toString()")}}</dt> - <dd>指定された <code>Error</code> オブジェクトを表す文字列を返します。{{jsxref("Error")}} から継承されます。</dd> -</dl> - -<h2 id="例">例</h2> - -<p>以下のスニペットで <code>RuntimeError</code> インスタンスを生成して、詳細をコンソールに表示します。</p> - -<pre class="brush: js">try { - throw new WebAssembly.RuntimeError('Hello', 'someFile', 10); -} catch (e) { - console.log(e instanceof RuntimeError); // true - console.log(e.message); // "Hello" - console.log(e.name); // "RuntimeError" - console.log(e.fileName); // "someFile" - console.log(e.lineNumber); // 10 - console.log(e.columnNumber); // 0 - console.log(e.stack); // コードが実行された場所を返す -}</pre> - -<h2 id="仕様">仕様</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('WebAssembly JS', '#constructor-properties-of-the-webassembly-object', 'WebAssembly constructors')}}</td> - <td>{{Spec2('WebAssembly JS')}}</td> - <td>WebAssembly の初回ドラフト定義。</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard', 'NativeError')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>標準の NativeError 型の定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> - -<div>{{Compat("javascript.builtins.WebAssembly.RuntimeError")}}</div> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> overview page</li> - <li><a href="/ja/docs/WebAssembly/Concepts">WebAssembly のコンセプト</a></li> - <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API を使用する</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/runtimeerror/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/runtimeerror/index.md new file mode 100644 index 0000000000..9919812d76 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/runtimeerror/index.md @@ -0,0 +1,77 @@ +--- +title: WebAssembly.RuntimeError +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/RuntimeError +tags: + - API + - Class + - JavaScript + - Reference + - RuntimeError + - WebAssembly +browser-compat: javascript.builtins.WebAssembly.RuntimeError +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/RuntimeError +--- +{{JSRef}} + +**`WebAssembly.RuntimeError`** オブジェクトは、 WebAssembly が[トラップ](https://webassembly.org/docs/semantics/#traps)を指定するたびに例外として発生するエラー型です。 + +## コンストラクター + +- [`WebAssembly.RuntimeError()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/RuntimeError/RuntimeError) + - : 新しい `WebAssembly.RuntimeError` オブジェクトを生成します。 + +## インスタンスプロパティ + +- {{jsxref("Error.prototype.message", "WebAssembly.RuntimeError.prototype.message")}} + - : エラーメッセージ。 {{jsxref("Error")}} から継承しています。 +- {{jsxref("Error.prototype.name", "WebAssembly.RuntimeError.prototype.name")}} + - : エラー名。 {{jsxref("Error")}} から継承しています。 +- {{jsxref("Error.prototype.fileName", "WebAssembly.RuntimeError.prototype.fileName")}} + - : このエラーを発生させたファイルのパス。 {{jsxref("Error")}} から継承しています。 +- {{jsxref("Error.prototype.lineNumber", "WebAssembly.RuntimeError.prototype.lineNumber")}} + - : このエラーを発生させたファイルの行番号。 {{jsxref("Error")}} から継承しています。 +- {{jsxref("Error.prototype.columnNumber", "WebAssembly.RuntimeError.prototype.columnNumber")}} + - : このエラーが発生した行の列番号。 {{jsxref("Error")}} から継承しています。 +- {{jsxref("Error.prototype.stack", "WebAssembly.RuntimeError.prototype.stack")}} + - : スタックトレース。 {{jsxref("Error")}} から継承しています。 + +## インスタンスメソッド + +- {{jsxref("Error.prototype.toSource", "WebAssembly.RuntimeError.prototype.toSource()")}} + - : 同じエラーを評価できるコードを返します。 {{jsxref("Error")}} から継承しています。 +- {{jsxref("Error.prototype.toString", "WebAssembly.RuntimeError.prototype.toString()")}} + - : 指定された `Error` オブジェクトを表す文字列を返します。{{jsxref("Error")}} から継承しています。 + +## 例 + +### 新しい RuntimeError のインスタンスの作成 + +以下のスニペットでは、新しい `RuntimeError` インスタンスを生成して、詳細をコンソールに記録します。 + +```js +try { + throw new WebAssembly.RuntimeError('Hello', 'someFile', 10); +} catch (e) { + console.log(e instanceof WebAssembly.RuntimeError); // true + console.log(e.message); // "Hello" + console.log(e.name); // "RuntimeError" + console.log(e.fileName); // "someFile" + console.log(e.lineNumber); // 10 + console.log(e.columnNumber); // 0 + console.log(e.stack); // コードが実行されていた位置を返す +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/runtimeerror/runtimeerror/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/runtimeerror/runtimeerror/index.md new file mode 100644 index 0000000000..e55fb53be0 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/runtimeerror/runtimeerror/index.md @@ -0,0 +1,66 @@ +--- +title: WebAssembly.RuntimeError() コンストラクター +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/RuntimeError/RuntimeError +tags: + - Constructor + - JavaScript + - Reference + - WebAssembly +browser-compat: javascript.builtins.WebAssembly.RuntimeError.RuntimeError +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/RuntimeError/RuntimeError +--- +{{JSRef}} + +**`WebAssembly.RuntimeError()`** コンストラクターは、新しい WebAssembly `RuntimeError` オブジェクトを生成します。これは、 WebAssembly が[トラップ](https://webassembly.org/docs/semantics/#traps)を指定するたびに例外として発生する型です。 + +## 構文 + +```js +new WebAssembly.RuntimeError() +new WebAssembly.RuntimeError(message) +new WebAssembly.RuntimeError(message, fileName) +new WebAssembly.RuntimeError(message, fileName, lineNumber) +``` + +### 引数 + +- `message` {{optional_inline}} + - : 人間が読めるエラーの説明です。 +- `fileName` {{optional_inline}} + - : 例外が発生したコードを含むファイル名です。 +- `lineNumber` {{optional_inline}} + - : 例外が発生したコードの行番号です。 + +## 例 + +### 新しい RuntimeError のインスタンスの生成 + +以下のスニペットは新しい `RuntimeError` のインスタンスを生成し、コンソールに詳細を記録します。 + +```js +try { + throw new WebAssembly.RuntimeError('Hello', 'someFile', 10); +} catch (e) { + console.log(e instanceof WebAssembly.RuntimeError); // true + console.log(e.message); // "Hello" + console.log(e.name); // "RuntimeError" + console.log(e.fileName); // "someFile" + console.log(e.lineNumber); // 10 + console.log(e.columnNumber); // 0 + console.log(e.stack); // コードの実行されていた位置を返す +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/table/get/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/table/get/index.html deleted file mode 100644 index ebcbd78d9f..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/table/get/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: WebAssembly.Table.prototype.get() -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get -tags: - - API - - JavaScript - - Method - - Reference - - WebAssembly - - get - - table - - メソッド -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get ---- -<div>{{JSRef}}</div> - -<p><code><strong>get()</strong></code> は {{jsxref("WebAssembly.Table")}} オブジェクトのプロトタイプメソッドで、指定されたインデックスに格納された関数参照を取得します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">table.get(<em>index</em>); -</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><em>index</em></dt> - <dd>取得する関数参照のインデックス。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>関数参照を返します。これは <a href="/ja/docs/WebAssembly/Exported_functions">エクスポートされた WebAssembly 関数</a> 、wasm 関数を内在する JavaScript ラッパーです。</p> - -<h3 id="Exceptions" name="Exceptions">例外</h3> - -<p>もし <em>index</em> が {{jsxref("WebAssembly/Table/length","Table.prototype.length")}} 以上だった場合、{{jsxref("RangeError")}} をスローします。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<p>次の例では (Github の <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.html">table.html</a> と <a href="https://mdn.github.io/webassembly-examples/js-api-examples/table.html">動作例</a> も確認してください)、<code><a href="https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js">fetchAndInstantiate()</a></code> ユーティリティ関数を使用して table.wasm バイトコードをロード、コンパイルして、インスタンス化しています。その後、エクスポートされたテーブルに格納された参照を取得します。</p> - -<pre class="brush: js">WebAssembly.instantiateStreaming(fetch('table.wasm')) -.then(function(obj) { - var tbl = obj.instance.exports.tbl; - console.log(tbl.get(0)()); // 13 - console.log(tbl.get(1)()); // 42 -});</pre> - -<p>参照内に格納されている値を実際に取得するためには、アクセサの最後に2つ目の関数呼び出し演算子を含める必要があります(<code>get(0)</code> ではなく <code>get(0)()</code>) 。これは単純な値ではなく、関数です。</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAssembly JS', '#dom-table-get', 'get()')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.WebAssembly.Table.get")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> 概要ページ</li> - <li><a href="/ja/docs/WebAssembly/Concepts">WebAssembly の概念</a></li> - <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API の使用</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/table/get/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/table/get/index.md new file mode 100644 index 0000000000..826de450ca --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/table/get/index.md @@ -0,0 +1,68 @@ +--- +title: WebAssembly.Table.prototype.get() +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get +tags: + - API + - JavaScript + - メソッド + - Reference + - WebAssembly + - get + - table +browser-compat: javascript.builtins.WebAssembly.Table.get +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get +--- +{{JSRef}} + +**`get()`** は {{jsxref("WebAssembly.Table")}} オブジェクトのプロトタイプメソッドで、指定された位置に格納されている関数参照を取得します。 + +## 構文 + +```js +get(index) +``` + +### 引数 + +- _index_ + - : 取得する関数参照の位置です。 + +### 返値 + +関数参照を返します。これは[エクスポートされた WebAssembly 関数](/ja/docs/WebAssembly/Exported_functions)、wasm 関数を内在する JavaScript ラッパーです。</p> + +### 例外 + +_index_ が {{jsxref("WebAssembly/Table/length","Table.prototype.length")}} 以上であった場合、{{jsxref("RangeError")}} が発生します。 + +## 例 + +### get の使用 + +次の例では (Github の [table.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.html) と[動作例](https://mdn.github.io/webassembly-examples/js-api-examples/table.html)も確認してください)、 table.wasm バイトコードを +{{jsxref("WebAssembly.instantiateStreaming()")}} メソッドを使用して読み取り、コンパイルしてインスタンス化しています。その後、エクスポートされたテーブルに格納された参照を取得します。 + +```js +WebAssembly.instantiateStreaming(fetch('table.wasm')) +.then(function(obj) { + var tbl = obj.instance.exports.tbl; + console.log(tbl.get(0)()); // 13 + console.log(tbl.get(1)()); // 42 +}); +``` + +参照に格納されている値を実際に取得するためには、アクセサーの最後に 2 つ目の関数呼び出し演算子を含める必要があります (`get(0)` ではなく `get(0)()`)。これは単純な値ではなく、関数です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/table/grow/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/table/grow/index.html deleted file mode 100644 index 3c645810aa..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/table/grow/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: WebAssembly.Table.prototype.grow() -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/grow -tags: - - API - - JavaScript - - Method - - Reference - - WebAssembly - - grow - - table - - メソッド -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/grow ---- -<div>{{JSRef}}</div> - -<p><code><strong>grow()</strong></code> は {{jsxref("WebAssembly.Table")}} オブジェクトのプロトタイプメソッドで、指定された要素数でテーブルを拡張します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">table.grow(<em>number</em>); -</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><em>number</em></dt> - <dd>テーブルを拡張する要素数。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>以前のテーブルの長さ。</p> - -<h3 id="Exceptions" name="Exceptions">例外</h3> - -<p>もし <code>grow()</code> 操作が何かしらの理由で失敗した場合、{{jsxref("RangeError")}} をスローします。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<p>次の例では、初期サイズが2で最大サイズが10の WebAssembly Table を作成しています。</p> - -<pre class="brush: js">var table = new WebAssembly.Table({ element: "anyfunc", initial: 2, maximum: 10 });</pre> - -<p>次のようにすることで、テーブルのサイズを1拡張することができます:</p> - -<pre class="brush: js">console.log(table.length); // "2" -console.log(table.grow(1)); // "2" -console.log(table.length); // "3" -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAssembly JS', '#dom-table-grow', 'grow()')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.WebAssembly.Table.set")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> 概要ページ</li> - <li><a href="/ja/docs/WebAssembly/Concepts">WebAssembly の概念</a></li> - <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API の使用</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/table/grow/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/table/grow/index.md new file mode 100644 index 0000000000..3622d9dcaf --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/table/grow/index.md @@ -0,0 +1,68 @@ +--- +title: WebAssembly.Table.prototype.grow() +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/grow +tags: + - API + - JavaScript + - メソッド + - Reference + - WebAssembly + - grow + - table +browser-compat: javascript.builtins.WebAssembly.Table.grow +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/grow +--- +{{JSRef}} + +**`grow()`** は {{jsxref("WebAssembly.Table")}} オブジェクトのプロトタイプメソッドで、 Table インスタンスの大きさを指定された要素数だけ拡張します。 + +## 構文 + +```js +grow(number) +``` + +### 引数 + +- _number_ + - : テーブルを拡張する要素数です。 + +### 返値 + +直前のテーブルの長さです。 + +### 例外 + +`grow()` の操作が何らかの理由で失敗した場合、 {{jsxref("RangeError")}} が発生します。 + +## 例 + +### grow の使用 + +以下の例では、新しい WebAssembly Table のインスタンスを初期サイズ 2、最大サイズ 10 で生成しています。 + +```js +var table = new WebAssembly.Table({ element: "anyfunc", initial: 2, maximum: 10 }); +``` + +以下のようにして、テーブルを 1 だけ拡張することができます。 + +```js +console.log(table.length); // "2" +console.log(table.grow(1)); // "2" +console.log(table.length); // "3" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/table/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/table/index.html deleted file mode 100644 index 963a942b65..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/table/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: WebAssembly.Table() -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table ---- -<div>{{JSRef}}</div> - -<p><code><strong>WebAssembly.Table()</strong></code> コンストラクタは与えられたサイズと要素の型から <code>Table</code> オブジェクトを生成します。</p> - -<p>これは、配列ライクな構造で表現された WebAssembly テーブルの JavaScript ラッパーオブジェクトです。JavaScript か WebAssembly コード上で生成されたテーブルは JavaScript、WebAssembly の両方からアクセス、変更可能です。</p> - -<div class="note"> -<p><strong>注</strong>: 現在、テーブルには関数の参照のみ格納できます。しかし、将来的に拡張される予定です。</p> -</div> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox">var myTable = new WebAssembly.Table(tableDescriptor);</pre> - -<h3 id="パラメータ">パラメータ</h3> - -<dl> - <dt><em>tableDescriptor</em></dt> - <dd>以下のメンバーを含むことができるオブジェクト: - <dl> - <dt><em>element</em></dt> - <dd>テーブルに格納する値の型の文字列表現。現在は、<code>"anyfunc"</code> (関数) のみ設定できます。</dd> - <dt><em>initial</em></dt> - <dd>WebAssembly テーブルの初期要素数。</dd> - <dt><em>maximum {{optional_inline}}</em></dt> - <dd>WebAssembly テーブルが拡張できる要素の最大数。</dd> - </dl> - </dd> -</dl> - -<h3 id="例外">例外</h3> - -<ul> - <li>もし <code>tableDescriptor</code> がオブジェクト型でない場合、{{jsxref("TypeError")}} がスローされます。</li> - <li>もし <code>maximum</code> 定義されていて <code>initial</code> よりも小さい場合、{{jsxref("RangeError")}} がスローされます。</li> -</ul> - -<h2 id="Table_インスタンス"><code>Table</code> インスタンス</h2> - -<p>全ての <code>Table</code> インスタンスは <code>Table()</code>コンストラクタの <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/prototype">プロトタイプオブジェクト</a> を継承します。これは全ての <code>Table</code> インスタンスに影響するように変更可能です。</p> - -<h3 id="インスタンスプロパティ">インスタンスプロパティ</h3> - -<dl> - <dt><code>Table.prototype.constructor</code></dt> - <dd>このオブジェクトのインスタンスを生成した関数を返します。デフォルトでは {{jsxref("WebAssembly.Table()")}} コンストラクタです。</dd> - <dt>{{jsxref("Global_Objects/WebAssembly/Table/length","Table.prototype.length")}}</dt> - <dd>テーブルの長さを返します。すなわち、要素数です。</dd> -</dl> - -<h3 id="インスタンスメソッド">インスタンスメソッド</h3> - -<dl> - <dt>{{jsxref("Global_Objects/WebAssembly/Table/get","Table.prototype.get()")}}</dt> - <dd>アクセサ関数。インデックスから格納された要素を取得します。</dd> - <dt>{{jsxref("Global_Objects/WebAssembly/Table/grow","Table.prototype.grow()")}}</dt> - <dd>指定した要素数で Table インスタンスを拡張します。</dd> - <dt>{{jsxref("Global_Objects/WebAssembly/Table/set","Table.prototype.set()")}}</dt> - <dd>指定したインデックスに要素を格納します。</dd> -</dl> - -<h2 id="例">例</h2> - -<p>以下の例 (table2.htmlの <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table2.html">ソースコード</a> と <a href="https://mdn.github.io/webassembly-examples/js-api-examples/table2.html">動作例</a> を参照) では初期サイズが2の WebAssembly Table インスタンスを生成しています。次に、テーブルの長さと2つのインデックスの内容を表示しています (長さが2で両方の要素が {{jsxref("null")}} であることを確認するために、{{jsxref("WebAssembly/Table/get", "Table.prototype.get()")}} を使って読み込んでいます) 。</p> - -<pre class="brush: js">var tbl = new WebAssembly.Table({initial:2, element:"anyfunc"}); -console.log(tbl.length); // "2" -console.log(tbl.get(0)); // "null" -console.log(tbl.get(1)); // "null"</pre> - -<p>次に、テーブルを含むインポートオブジェクトを作ります:</p> - -<pre class="brush: js">var importObj = { - js: { - tbl:tbl - } -};</pre> - -<p>最後に {{jsxref("WebAssembly.instantiateStreaming()")}} を使用して wasm モジュール (table2.wasm) をロード し、インスタンス化します。table2.wasm モジュールは2の関数を持っていて (1つは42を、もう1つは83を返す) 、インポートされたテーブルの0、1番目に両方の要素が格納されます (<a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table2.wat">text representation</a>を参照) 。そして、インスタンス化された後、テーブルの長さは2のままです。しかし、今はJSから呼び出し可能な <a href="/en-US/docs/WebAssembly/Exported_functions">エクスポートされたWebAssembly関数</a> が含まれています。</p> - -<pre class="brush: js">WebAssembly.instantiateStreaming(fetch('table2.wasm'), importObject) -.then(function(obj) { - console.log(tbl.length); - console.log(tbl.get(0)()); - console.log(tbl.get(1)()); -});</pre> - -<p>内部の値を表示するためには、参照された関数のアクセサの呼び出しの後に、2つ目の関数呼び出しを含める必要があることに注意して下さい (<code>get(0)</code> ではなく <code>get(0)()</code>)。</p> - -<p>この例では、JavaScript からテーブルを作成してアクセスしていますが、wasm インスタンス内で同じテーブルを参照して呼び出すこともできます。</p> - -<h2 id="仕様">仕様</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('WebAssembly JS', '#webassemblytable-objects', 'Table')}}</td> - <td>{{Spec2('WebAssembly JS')}}</td> - <td>初回ドラフト定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> - -<div>{{Compat("javascript.builtins.WebAssembly.Table")}}</div> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> overview page</li> - <li><a href="https://developer.mozilla.org/ja/docs/WebAssembly/Concepts">WebAssembly のコンセプト</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API を使用する</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/table/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/table/index.md new file mode 100644 index 0000000000..049d2bec2d --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/table/index.md @@ -0,0 +1,86 @@ +--- +title: WebAssembly.Table +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table +tags: + - Class + - JavaScript + - Reference + - WebAssembly + - table +browser-compat: javascript.builtins.WebAssembly.Table +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table +--- +{{JSRef}} + +**`WebAssembly.Table()`** オブジェクトは JavaScript のラッパーオブジェクトであり、関数の参照を格納する WebAssembly Table を表す配列風の構造を持っています。 JavaScript や WebAssembly のコードで作成されたテーブルは、 JavaScript と WebAssembly の両方からアクセスでき、変更もできます。 + +> **Note:** 現在、テーブルには関数の参照のみが格納できますが、将来的に拡張される予定です。 + +## コンストラクター + +- [`WebAssembly.Table()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/Table) + - : 新しい `Table` オブジェクトを生成します。 + +## インスタンスプロパティ + +- {{jsxref("WebAssembly/Table/length","Table.prototype.length")}} + - : テーブルの長さを返します。すなわち、要素数です。 + +## インスタンスメソッド + +- {{jsxref("WebAssembly/Table/get","Table.prototype.get()")}} + - : アクセサー関数です。指定した位置に格納された要素を取得します。 +- {{jsxref("WebAssembly/Table/grow","Table.prototype.grow()")}} + - : Table インスタンスを指定した要素数だけ拡張します。 +- {{jsxref("WebAssembly/Table/set","Table.prototype.set()")}} + - : 指定した位置に要素を格納します。 + +## 例 + +### 新しい WebAssembly Table インスタンスの生成 + +次の例では ([table2.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table2.html) と[動作例](https://mdn.github.io/webassembly-examples/js-api-examples/table2.html)を確認してください)、新しい WebAssembly Table メソッドを初期サイズ 2 要素で生成します。それからそのテーブルの長さと 2 つの位置の内容を ({{jsxref("WebAssembly/Table/get", "Table.prototype.get()")}} を使用して受け取って) 表示し、長さが 2 で両方の要素が {{jsxref("null")}} であることを示します。 + +```js +var tbl = new WebAssembly.Table({initial:2, element:"anyfunc"}); +console.log(tbl.length); // "2" +console.log(tbl.get(0)); // "null" +console.log(tbl.get(1)); // "null" +``` + +次に、テーブルを含むインポートオブジェクトを生成します。 + +```js +var importObj = { + js: { + tbl:tbl + } +}; +``` + +<p>最後に {{jsxref("WebAssembly.instantiateStreaming()")}} を使用して wasm モジュール (table2.wasm) をロード し、インスタンス化します。table2.wasm モジュールは2の関数を持っていて (1つは42を、もう1つは83を返す) 、インポートされたテーブルの0、1番目に両方の要素が格納されます (<a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table2.wat">text representation</a>を参照) 。そして、インスタンス化された後、テーブルの長さは2のままです。しかし、今はJSから呼び出し可能な <a href="/en-US/docs/WebAssembly/Exported_functions">エクスポートされたWebAssembly関数</a> が含まれています。</p> + +<pre class="brush: js">WebAssembly.instantiateStreaming(fetch('table2.wasm'), importObject) +.then(function(obj) { + console.log(tbl.length); + console.log(tbl.get(0)()); + console.log(tbl.get(1)()); +});</pre> + +<p>内部の値を表示するためには、参照された関数のアクセサの呼び出しの後に、2つ目の関数呼び出しを含める必要があることに注意して下さい (<code>get(0)</code> ではなく <code>get(0)()</code>)。</p> + +<p>この例では、JavaScript からテーブルを作成してアクセスしていますが、wasm インスタンス内で同じテーブルを参照して呼び出すこともできます。</p> + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/table/length/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/table/length/index.html deleted file mode 100644 index fed2cb3d54..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/table/length/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: WebAssembly.Table.prototype.length -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/length -tags: - - API - - JavaScript - - Property - - Reference - - length - - table - - プロパティ -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/length ---- -<div>{{JSRef}}</div> - -<p>{{jsxref("WebAssembly.Table")}} オブジェクトの <code><strong>length</strong></code> プロトタイププロパティはテーブルの長さを返します。すなわち、テーブルの要素数です。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">table.length; -</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<p>次の例では、初期サイズが2で最大サイズが10の WebAssembly Table を作成しています。</p> - -<pre class="brush: js">var table = new WebAssembly.Table({ element: "anyfunc", initial: 2, maximum: 10 });</pre> - -<p>次のようにすることで、テーブルのサイズを1拡張することができます:</p> - -<pre class="brush: js">console.log(table.length); // "2" -console.log(table.grow(1)); // "2" -console.log(table.length); // "3" -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAssembly JS', '#dom-table-length', 'length')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.WebAssembly.Table.length")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> 概要ページ</li> - <li><a href="/ja/docs/WebAssembly/Concepts">WebAssembly の概念</a></li> - <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API の使用</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/table/length/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/table/length/index.md new file mode 100644 index 0000000000..08d20cefd1 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/table/length/index.md @@ -0,0 +1,49 @@ +--- +title: WebAssembly.Table.prototype.length +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/length +tags: + - API + - JavaScript + - プロパティ + - Reference + - WebAssembly + - length + - table +browser-compat: javascript.builtins.WebAssembly.Table.length +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/length +--- +{{JSRef}} + +**`length`** は {{jsxref("WebAssembly.Table")}} オブジェクトのプロトタイププロパティで、このテーブルの長さ、すなわち、テーブルの要素の数を返します。 + +## 例 + +### length の使用 + +次の例では、新しい WebAssembly Table インスタンスを初期サイズ 2、最大サイズ 10 で作成します。 + +```js +var table = new WebAssembly.Table({ element: "anyfunc", initial: 2, maximum: 10 }); +``` + +次のようにして、テーブルを 1 ずつ拡大することができます。 + +```js +console.log(table.length); // "2" +console.log(table.grow(1)); // "2" +console.log(table.length); // "3" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/table/set/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/table/set/index.html deleted file mode 100644 index d2c6e13f4c..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/table/set/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: WebAssembly.Table.prototype.set() -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/set -tags: - - API - - JavaScript - - Method - - Reference - - WebAssembly - - set - - table - - メソッド -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/set ---- -<div>{{JSRef}}</div> - -<p>{{jsxref("WebAssembly.Table")}} オブジェクトの <code><strong>set()</strong></code> プロトタイプメソッドは指定されたインデックスに格納されている参照を違う値に変更します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">table.set(<em>index</em>, <em>value</em>); -</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><em>index</em></dt> - <dd>変更する関数参照のインデックス。</dd> - <dt><em>value</em></dt> - <dd>変更する参照。これは <a href="/ja/docs/WebAssembly/Exported_functions">エクスポートされた WebAssembly 関数</a> 、 wasm 関数を内在する JavaScript ラッパーである必要があります。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>なし。</p> - -<h3 id="Exception" name="Exception">例外</h3> - -<ul> - <li><em>index</em> が {{jsxref("Global_Objects/WebAssembly/Table/length","Table.prototype.length")}} の場合、 {{jsxref("RangeError")}} がスローされます。</li> - <li><em>value</em> がエクスポートされた WebAssembly 関数でも <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code> でもない場合、{{jsxref("TypeError")}} をスローします。</li> -</ul> - -<h2 id="Examples" name="Examples">例</h2> - -<p>次の例では、2つ参照を持つ WebAssembly Table インスタンスを生成しています (table2.html <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table2.html">ソースコード</a> と <a href="https://mdn.github.io/webassembly-examples/js-api-examples/table2.html">動作例</a> を確認してください) 。それから、長さが2で、関数参照が含まれないこと ({{jsxref("null")}} を返します) を確認するために、テーブルの長さと2つのインデックス ({{jsxref("Global_Objects/WebAssembly/Table/get","Table.prototype.get()")}} を通して読み出して) のコンテンツを表示します。</p> - -<pre class="brush: js">var tbl = new WebAssembly.Table({initial:2, element:"anyfunc"}); -console.log(tbl.length); -console.log(tbl.get(0)); -console.log(tbl.get(1));</pre> - -<p>次にテーブルの参照を含むインポートオブジェクトを作成します:</p> - -<pre class="brush: js">var importObj = { - js: { - tbl:tbl - } -};</pre> - -<p>最後に、<code><a href="https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js">fetchAndInstantiate()</a></code> ユーティリティ関数を使用して wasm モジュール (table2.wasm) をロードしてインスタンス化します。テーブルの長さを表示して、いまテーブルに格納された(table2.wasm モジュール (<a href="https://github.com/mdn/webassembly-examples/blob/master/text-format-examples/table2.was">テキスト表現</a> を参照) はテーブルに2つの関数参照を追加し、両方とも、簡単な数値を表示します)2つの関数参照を実行します:</p> - -<pre class="brush: js">WebAssembly.instantiateStreaming(fetch('table2.wasm'), importObject) -.then(function(obj) { - console.log(tbl.length); - console.log(tbl.get(0)()); - console.log(tbl.get(1)()); -});</pre> - -<p>内部の値を表示するためには、参照された関数のアクセサの呼び出しの後に、2つ目の関数呼び出しを含める必要があることに注意して下さい (<code>get(0)</code> ではなく <code>get(0)()</code>)。</p> - -<p>この例では、JavaScript からテーブルを作成してアクセスしていますが、wasm インスタンス内で同じテーブルを参照して呼び出すこともできます。</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAssembly JS', '#dom-table-set', 'set()')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.WebAssembly.Table.set")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> 概要ページ</li> - <li><a href="/ja/docs/WebAssembly/Concepts">WebAssembly の概念</a></li> - <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API の使用</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/table/set/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/table/set/index.md new file mode 100644 index 0000000000..0a30208e6d --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/table/set/index.md @@ -0,0 +1,91 @@ +--- +title: WebAssembly.Table.prototype.set() +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/set +tags: + - API + - JavaScript + - メソッド + - Reference + - WebAssembly + - set + - table +browser-compat: javascript.builtins.WebAssembly.Table.set +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/set +--- +{{JSRef}} + +**`set()`** は {{jsxref("WebAssembly.Table")}} オブジェクトのプロトタイプメソッドで、指定された位置に格納されている参照を別な値に変更します。 + +## 構文 + +```js +set(index, value) +``` + +### 引数 + +- _index_ + - : 変更する関数参照の位置。 +- _value_ + - : 変更する参照。これは[エクスポートされた WebAssembly 関数](/ja/docs/WebAssembly/Exported_functions)、 wasm 関数を内在する JavaScript ラッパーである必要があります。 + +### 返値 + +なし。 + +### 例外 + +- _index_ が {{jsxref("WebAssembly/Table/length","Table.prototype.length")}} 以上の場合、 {{jsxref("RangeError")}} が発生します。 +- _value_ がエクスポートされた WebAssembly 関数でも <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code> でもない場合、{{jsxref("TypeError")}} が発生します。 + +## 例 + +### Table.set の使用 + +次の例 (table2.html の[ソースコード](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table2.html)と[動作例](https://mdn.github.io/webassembly-examples/js-api-examples/table2.html)を確認してください) では、初期サイズが参照 2 つである WebAssembly Table インスタンスを生成しています。そして、テーブルの長さと 2 つの位置の内容 ({{jsxref("WebAssembly/Table/get","Table.prototype.get()")}} で取得) を出力して、長さが 2 であること、それぞれの位置には現在、関数の参照が含まれていないこと (現在は {{jsxref("null")}} を返すこと) を示しています。 + +```js +var tbl = new WebAssembly.Table({initial:2, element:"anyfunc"}); +console.log(tbl.length); +console.log(tbl.get(0)); +console.log(tbl.get(1)); +``` + +次に、テーブルの参照を含むインポートオブジェクトを作成します。 + +```js +var importObj = { + js: { + tbl:tbl + } +}; +``` + +最後に、 wasm モジュール (table2.wasm) を {{jsxref("WebAssembly.instantiateStreaming()")}} を使用して読み込みインスタンス化します。テーブルの長さを記録し、テーブルに格納された 2 つの関数参照を呼び出します (table2.wasm モジュール ([テキスト表現]](https://github.com/mdn/webassembly-examples/blob/master/text-format-examples/table2.was)) がテーブルに 2 つの関数の参照を追加し、どちらも単純な表示を表示します)。 + +```js +WebAssembly.instantiateStreaming(fetch('table2.wasm'), importObject) +.then(function(obj) { + console.log(tbl.length); + console.log(tbl.get(0)()); + console.log(tbl.get(1)()); +}); +``` + +内部の値を表示するためには、参照された関数のアクセサーの呼び出しの後に、 2 つ目の関数呼び出しを含める必要があることに注意して下さい (`get(0)` ではなく `get(0)()`)。 + +この例では、JavaScript からテーブルを作成してアクセスしていますが、wasm インスタンス内で同じテーブルを参照して呼び出すこともできます。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/en-US/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/en-US/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/en-US/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/table/table/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/table/table/index.html deleted file mode 100644 index e17643ba50..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/table/table/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: WebAssembly.Table() コンストラクター -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/Table -tags: - - Constructor - - JavaScript - - Reference - - WebAssembly - - コンストラクター -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/Table ---- -<div>{{JSRef}}</div> - -<p><code><strong>WebAssembly.Table()</strong></code> コンストラクターは、大きさと要素の型を指定して新しい <code>Table</code> オブジェクトを生成します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">new WebAssembly.Table(tableDescriptor);</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><em>tableDescriptor</em></dt> - <dd>以下のメンバーを含むことができるオブジェクトです。 - <dl> - <dt><em>element</em></dt> - <dd>文字列で、テーブルに格納される値の型を表します。現時点では、 "<code>anyfunc</code>" (関数) の値のみを取ることができます。</dd> - <dt><em>initial</em></dt> - <dd>WebAssembly テーブルの初期の要素数です。</dd> - <dt><em>maximum {{optional_inline}}</em></dt> - <dd>WebAssembly テーブルが拡張する最大の要素数です。</dd> - </dl> - </dd> -</dl> - -<h3 id="Exceptions" name="Exceptions">例外</h3> - -<ul> - <li><code>tableDescriptor</code> がオブジェクトでない場合は、 {{jsxref("TypeError")}} が発生します。</li> - <li><code>maximum</code> が設定されており、かつ <code>initial</code> よりも小さい場合は、 {{jsxref("RangeError")}} が発生します。</li> -</ul> - -<h2 id="Examples" name="Examples">例</h2> - -<p>次の例では (table2.html の <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table2.html">ソースコード</a> と <a href="https://mdn.github.io/webassembly-examples/js-api-examples/table2.html">デモ版</a>) 新しく WebAssembly テーブルのインスタンスを、2要素を初期の大きさとして生成します。それからテーブルの長さと2つの要素の中身を ({{jsxref("WebAssembly/Table/get", "Table.prototype.get()")}} で取得して) 表示し、長さは2で2つの要素は共に {{jsxref("null")}} となります。</p> - -<pre class="brush: js">var tbl = new WebAssembly.Table({initial:2, element:"anyfunc"}); -console.log(tbl.length); // "2" -console.log(tbl.get(0)); // "null" -console.log(tbl.get(1)); // "null"</pre> - -<p>それからテーブルを含むインポートオブジェクトを作成します。</p> - -<pre class="brush: js">var importObj = { - js: { - tbl:tbl - } -};</pre> - -<p>最終的に、 wasm モジュール (table2.wasm) を {{jsxref("WebAssembly.instantiateStreaming()")}} メソッドを使用して読み込みインスタンス化します。 table2.wasm モジュールには2つの関数 (1つは 42 を返し、もう1つは 83 を返す) が入っており、それぞれをインポートされたテーブルの要素 0 と 1 に格納します。 (<a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table2.wat">テキスト表示</a> をご覧ください)。インスタンス化した後で、テーブルは長さが2のままですが、要素には呼び出し可能な<a href="/ja/docs/WebAssembly/Exported_functions">エクスポートされた WebAssembly 関数</a>が入り、 JS から呼び出せるようになりました。</p> - -<pre class="brush: js">WebAssembly.instantiateStreaming(fetch('table2.wasm'), importObject) -.then(function(obj) { - console.log(tbl.length); - console.log(tbl.get(0)()); - console.log(tbl.get(1)()); -});</pre> - -<p>なお、関数呼び出し演算子がアクセサーの後に二重についており、実際に参照している関数を呼び出して、その中に格納された値をログ出力しています (例えば <code>get(0)()</code> を <code>get(0)</code> の代わりに使用)。</p> - -<p>この例は JavaScript からテーブルを生成してアクセスする方法を示していますが、同じテーブルを wasm インスタンスの中から見ることができ、呼び出すこともできます。</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAssembly JS', '#dom-table-table', 'Table')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.WebAssembly.Table.Table")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> 概要ページ</li> - <li><a href="/ja/docs/WebAssembly/Concepts">WebAssembly の概念</a></li> - <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API の使用</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/table/table/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/table/table/index.md new file mode 100644 index 0000000000..ff30415f27 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/table/table/index.md @@ -0,0 +1,90 @@ +--- +title: WebAssembly.Table() コンストラクター +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/Table +tags: + - コンストラクター + - JavaScript + - Reference + - WebAssembly +browser-compat: javascript.builtins.WebAssembly.Table.Table +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/Table +--- +{{JSRef}} + +**`WebAssembly.Table()`** コンストラクターは、大きさと要素の型を指定して新しい `Table` オブジェクトを生成します。 + +## 構文 + +```js +new WebAssembly.Table(tableDescriptor) +``` + +### 引数 + +- _tableDescriptor_ + + - : 以下のメンバーを含むことができるオブジェクトです。 + + - _element_ + - : 文字列で、テーブルに格納される値の型を表します。現時点では、 `"anyfunc"` (関数) の値のみを取ることができます。 + - _initial_ + - : WebAssembly テーブルの初期の要素数です。 + - _maximum {{optional_inline}}_ + - : WebAssembly テーブルが拡張することができる最大の要素数です。 + +### 例外 + +- `tableDescriptor` がオブジェクトでない場合は、 {{jsxref("TypeError")}} が発生します。 +- `maximum` が設定されており、かつ `initial` よりも小さい場合は、 {{jsxref("RangeError")}} が発生します。 + +## 例 + +### 新しい WebAssembly Table インスタンスの生成 + +次の例では (table2.html の[ソースコード](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table2.html)と[実行例](https://mdn.github.io/webassembly-examples/js-api-examples/table2.html)はこちら) 新しく WebAssembly テーブルのインスタンスを、初期の大きさを 2 要素して生成します。それからテーブルの長さと 2 つの要素の中身を ({{jsxref("WebAssembly/Table/get", "Table.prototype.get()")}} で取得して) 表示し、長さは 2 で 2 つの要素は共に {{jsxref("null")}} となります。 + +```js +var tbl = new WebAssembly.Table({initial:2, element:"anyfunc"}); +console.log(tbl.length); // "2" +console.log(tbl.get(0)); // "null" +console.log(tbl.get(1)); // "null" +``` + +それからテーブルを含むインポートオブジェクトを作成します。 + +```js +var importObj = { + js: { + tbl:tbl + } +}; +``` + +最終的に、 wasm モジュール (table2.wasm) を {{jsxref("WebAssembly.instantiateStreaming()")}} メソッドを使用して読み込みインスタンス化します。 table2.wasm モジュールには 2 つの関数 (1 つは 42 を返し、もう 1 つは 83 を返す) が入っており、それぞれをインポートされたテーブルの要素 0 と 1 に格納します。 ([テキスト表現](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table2.wat)をご覧ください)。インスタンス化した後で、テーブルは長さは 2 のままですが、要素には呼び出し可能な<a href="/ja/docs/WebAssembly/Exported_functions">エクスポートされた WebAssembly 関数</a>が入り、 JS から呼び出せるようになりました。 + +```js +WebAssembly.instantiateStreaming(fetch('table2.wasm'), importObject) +.then(function(obj) { + console.log(tbl.length); + console.log(tbl.get(0)()); + console.log(tbl.get(1)()); +}); +``` + +なお、関数呼び出し演算子がアクセサーの後に二重についており (例えば `get(0)()` を `get(0)` の代わりに使用)、実際に参照している関数を呼び出して、その中に格納された値をログ出力しています。 + +この例は JavaScript からテーブルを生成してアクセスする方法を示していますが、同じテーブルを wasm インスタンスの中から見ることができ、呼び出すこともできます。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/operators/addition/index.html b/files/ja/web/javascript/reference/operators/addition/index.html index d87d6a2894..dc258fc3c1 100644 --- a/files/ja/web/javascript/reference/operators/addition/index.html +++ b/files/ja/web/javascript/reference/operators/addition/index.html @@ -70,13 +70,13 @@ false + false // 0 <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> </ul> diff --git a/files/ja/web/javascript/reference/operators/addition_assignment/index.html b/files/ja/web/javascript/reference/operators/addition_assignment/index.html index d2e2a59492..ca9497a6da 100644 --- a/files/ja/web/javascript/reference/operators/addition_assignment/index.html +++ b/files/ja/web/javascript/reference/operators/addition_assignment/index.html @@ -73,6 +73,6 @@ foo += 'bar' // "foobar"</pre> <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> - <li><a href="/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> </ul> diff --git a/files/ja/web/javascript/reference/operators/assignment/index.html b/files/ja/web/javascript/reference/operators/assignment/index.html index acf35e7514..c6b8cf4ceb 100644 --- a/files/ja/web/javascript/reference/operators/assignment/index.html +++ b/files/ja/web/javascript/reference/operators/assignment/index.html @@ -58,5 +58,5 @@ x = y = z // x, y そして z は全て 25</pre> <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> </ul> diff --git a/files/ja/web/javascript/reference/operators/bitwise_and_assignment/index.html b/files/ja/web/javascript/reference/operators/bitwise_and_assignment/index.html index 431e576433..9c30120ab7 100644 --- a/files/ja/web/javascript/reference/operators/bitwise_and_assignment/index.html +++ b/files/ja/web/javascript/reference/operators/bitwise_and_assignment/index.html @@ -59,6 +59,6 @@ a &= 2; // 0</pre> <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">ビット演算子ガイド</a></li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">ビット演算子ガイド</a></li> <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_AND">ビット論理積演算子</a></li> </ul> diff --git a/files/ja/web/javascript/reference/operators/bitwise_or/index.html b/files/ja/web/javascript/reference/operators/bitwise_or/index.html index 6e4121968e..d19e7be3bf 100644 --- a/files/ja/web/javascript/reference/operators/bitwise_or/index.html +++ b/files/ja/web/javascript/reference/operators/bitwise_or/index.html @@ -109,6 +109,6 @@ translation_of: Web/JavaScript/Reference/Operators/Bitwise_OR <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise">ビット演算子ガイド</a></li> - <li><a href="/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment">ビット論理和代入演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise">ビット演算子ガイド</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment">ビット論理和代入演算子</a></li> </ul> diff --git a/files/ja/web/javascript/reference/operators/bitwise_xor_assignment/index.html b/files/ja/web/javascript/reference/operators/bitwise_xor_assignment/index.html index 25ffd6de5c..90a6420cc5 100644 --- a/files/ja/web/javascript/reference/operators/bitwise_xor_assignment/index.html +++ b/files/ja/web/javascript/reference/operators/bitwise_xor_assignment/index.html @@ -66,6 +66,6 @@ console.log(b); // 00000000000000000000000000000101 <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">代入演算子ガイド</a></li> - <li><a href="/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR">ビット排他的論理和演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">代入演算子ガイド</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR">ビット排他的論理和演算子</a></li> </ul> diff --git a/files/ja/web/javascript/reference/operators/decrement/index.html b/files/ja/web/javascript/reference/operators/decrement/index.html index b22545059c..f5e63fd791 100644 --- a/files/ja/web/javascript/reference/operators/decrement/index.html +++ b/files/ja/web/javascript/reference/operators/decrement/index.html @@ -71,13 +71,13 @@ b = --a; <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> </ul> diff --git a/files/ja/web/javascript/reference/operators/destructuring_assignment/index.html b/files/ja/web/javascript/reference/operators/destructuring_assignment/index.html index c627dd6049..13aade654e 100644 --- a/files/ja/web/javascript/reference/operators/destructuring_assignment/index.html +++ b/files/ja/web/javascript/reference/operators/destructuring_assignment/index.html @@ -172,7 +172,7 @@ console.log(b); // [2, 3]</pre> <h4 id="Unpacking_values_from_a_regular_expression_match" name="Unpacking_values_from_a_regular_expression_match">正規表現の一致からの値取得</h4> -<p>正規表現オブジェクトの <code><a href="/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec"> exec()</a></code> メソッドは一致するものを見つけ、最初に一致した文字列全体の一部と、正規表現内の各括弧で囲まれたグループに一致した文字列の部分を含む配列を返します。分割代入によって、簡単にこの配列の一部分を取り出せます。また必要でない場合は、完全一致を無視できます。</p> +<p>正規表現オブジェクトの <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec"> exec()</a></code> メソッドは一致するものを見つけ、最初に一致した文字列全体の一部と、正規表現内の各括弧で囲まれたグループに一致した文字列の部分を含む配列を返します。分割代入によって、簡単にこの配列の一部分を取り出せます。また必要でない場合は、完全一致を無視できます。</p> <pre class="brush:js notranslate">function parseProtocol(url) { const parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url); diff --git a/files/ja/web/javascript/reference/operators/division/index.html b/files/ja/web/javascript/reference/operators/division/index.html index e3fd9b96f9..3db6a5715d 100644 --- a/files/ja/web/javascript/reference/operators/division/index.html +++ b/files/ja/web/javascript/reference/operators/division/index.html @@ -64,13 +64,13 @@ Math.floor(3 / 2) // 1 <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> </ul> diff --git a/files/ja/web/javascript/reference/operators/exponentiation/index.html b/files/ja/web/javascript/reference/operators/exponentiation/index.html index 8a3e13a8b1..40531f5a6c 100644 --- a/files/ja/web/javascript/reference/operators/exponentiation/index.html +++ b/files/ja/web/javascript/reference/operators/exponentiation/index.html @@ -10,7 +10,7 @@ translation_of: Web/JavaScript/Reference/Operators/Exponentiation --- <div>{{jsSidebar("Operators")}}</div> -<p>べき乗演算子 (<code>**</code>) は、1番目のオペランドを2番目のオペランドの累乗まで上げた結果を返します。これは <code>Math.pow</code> と同等ですが、オペランドとして <a href="/docs/Web/JavaScript/Data_structures#BigInt_%E5%9E%8B">BigInt</a> も受け入れます。</p> +<p>べき乗演算子 (<code>**</code>) は、1番目のオペランドを2番目のオペランドの累乗まで上げた結果を返します。これは <code>Math.pow</code> と同等ですが、オペランドとして <a href="/ja/docs/Web/JavaScript/Data_structures#BigInt_%E5%9E%8B">BigInt</a> も受け入れます。</p> <div>{{EmbedInteractiveExample("pages/js/expressions-exponentiation.html")}}</div> @@ -38,7 +38,7 @@ translation_of: Web/JavaScript/Reference/Operators/Exponentiation // JavaScriptでは意図が明白なため -4 </pre> -<p>注意: 一部のプログラミング言語ではべき乗計算にキャレット記号 <kbd>^</kbd> を使用していますが、JavaScript では<a href="/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR">ビット排他的論理和</a>にこの記号を使用しています。</p> +<p>注意: 一部のプログラミング言語ではべき乗計算にキャレット記号 <kbd>^</kbd> を使用していますが、JavaScript では<a href="/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR">ビット排他的論理和</a>にこの記号を使用しています。</p> <h2 id="例">例</h2> @@ -91,13 +91,13 @@ NaN ** 2 // NaN <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> </ul> diff --git a/files/ja/web/javascript/reference/operators/exponentiation_assignment/index.html b/files/ja/web/javascript/reference/operators/exponentiation_assignment/index.html index fa942f4779..9a7faa7c49 100644 --- a/files/ja/web/javascript/reference/operators/exponentiation_assignment/index.html +++ b/files/ja/web/javascript/reference/operators/exponentiation_assignment/index.html @@ -56,6 +56,6 @@ bar **= 'foo' // NaN</pre> <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">Assignment operators in the JS guide</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">Assignment operators in the JS guide</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li> </ul> diff --git a/files/ja/web/javascript/reference/operators/greater_than/index.html b/files/ja/web/javascript/reference/operators/greater_than/index.html index 247f76e0cb..e5a05c3bbb 100644 --- a/files/ja/web/javascript/reference/operators/greater_than/index.html +++ b/files/ja/web/javascript/reference/operators/greater_than/index.html @@ -22,7 +22,7 @@ translation_of: Web/JavaScript/Reference/Operators/Greater_than <h2 id="解説">解説</h2> -<p>オペランドは、 <a class="external external-icon" href="https://tc39.es/ecma262/#sec-abstract-relational-comparison" rel="noopener">抽象関係比較</a> アルゴリズムを使用して比較されます。このアルゴリズムの概要については、 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Less_than">小なり</a> 演算子のドキュメントを参照して下さい。</p> +<p>オペランドは、 <a class="external external-icon" href="https://tc39.es/ecma262/#sec-abstract-relational-comparison" rel="noopener">抽象関係比較</a> アルゴリズムを使用して比較されます。このアルゴリズムの概要については、 <a href="/ja/docs/Web/JavaScript/Reference/Operators/Less_than">小なり</a> 演算子のドキュメントを参照して下さい。</p> <h2 id="例">例</h2> @@ -94,7 +94,7 @@ console.log(NaN > 3); // false</pre> <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal">Greater than or equal operator</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Less_than">Less than operator</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal">Less than or equal operator</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal">Greater than or equal operator</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Less_than">Less than operator</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal">Less than or equal operator</a></li> </ul> diff --git a/files/ja/web/javascript/reference/operators/greater_than_or_equal/index.html b/files/ja/web/javascript/reference/operators/greater_than_or_equal/index.html index b72d8cf06c..12800994b8 100644 --- a/files/ja/web/javascript/reference/operators/greater_than_or_equal/index.html +++ b/files/ja/web/javascript/reference/operators/greater_than_or_equal/index.html @@ -22,7 +22,7 @@ translation_of: Web/JavaScript/Reference/Operators/Greater_than_or_equal <h2 id="解説">解説</h2> -<p>オペランドは、<a class="external external-icon" href="https://tc39.es/ecma262/#sec-abstract-relational-comparison" rel="noopener">抽象関係比較</a>アルゴリズムを使用して比較されます。 このアルゴリズムの概要は<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Less_than">小なり</a>演算子のドキュメントを参照して下さい。</p> +<p>オペランドは、<a class="external external-icon" href="https://tc39.es/ecma262/#sec-abstract-relational-comparison" rel="noopener">抽象関係比較</a>アルゴリズムを使用して比較されます。 このアルゴリズムの概要は<a href="/ja/docs/Web/JavaScript/Reference/Operators/Less_than">小なり</a>演算子のドキュメントを参照して下さい。</p> <h2 id="例">例</h2> @@ -94,7 +94,7 @@ console.log(NaN >= 3); // false</pre> <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Greater_than">Greater than operator</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Less_than">Less than operator</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal">Less than or equal operator</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Greater_than">Greater than operator</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Less_than">Less than operator</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal">Less than or equal operator</a></li> </ul> diff --git a/files/ja/web/javascript/reference/operators/in/index.html b/files/ja/web/javascript/reference/operators/in/index.html index ac6c61dc62..72b6bf5934 100644 --- a/files/ja/web/javascript/reference/operators/in/index.html +++ b/files/ja/web/javascript/reference/operators/in/index.html @@ -137,5 +137,5 @@ empties[2] // undefined を返す <li><code><a href="/ja/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code></li> <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li> <li>{{jsxref("Reflect.has()")}}</li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">プロパティの列挙可能性と所有権</a></li> + <li><a href="/ja/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">プロパティの列挙可能性と所有権</a></li> </ul> diff --git a/files/ja/web/javascript/reference/operators/increment/index.html b/files/ja/web/javascript/reference/operators/increment/index.html index 9b575490f5..8cbb2486a8 100644 --- a/files/ja/web/javascript/reference/operators/increment/index.html +++ b/files/ja/web/javascript/reference/operators/increment/index.html @@ -69,13 +69,13 @@ b = ++a; <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> </ul> diff --git a/files/ja/web/javascript/reference/operators/inequality/index.html b/files/ja/web/javascript/reference/operators/inequality/index.html index 7dba373779..aab622a884 100644 --- a/files/ja/web/javascript/reference/operators/inequality/index.html +++ b/files/ja/web/javascript/reference/operators/inequality/index.html @@ -10,7 +10,7 @@ translation_of: Web/JavaScript/Reference/Operators/Inequality --- <div>{{jsSidebar("Operators")}}</div> -<p>不等価演算子 (<code>!=</code>) は、2つのオペランドが等しくないかをチェックし、ブール値の結果を返します。<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Strict_inequality">厳密不等価</a>演算子とは異なり、異なる型のオペランドを変換して比較を行おうとします。</p> +<p>不等価演算子 (<code>!=</code>) は、2つのオペランドが等しくないかをチェックし、ブール値の結果を返します。<a href="/ja/docs/Web/JavaScript/Reference/Operators/Strict_inequality">厳密不等価</a>演算子とは異なり、異なる型のオペランドを変換して比較を行おうとします。</p> <div>{{EmbedInteractiveExample("pages/js/expressions-inequality.html")}}</div> @@ -22,19 +22,19 @@ translation_of: Web/JavaScript/Reference/Operators/Inequality <h2 id="説明">説明</h2> -<p>不等価演算子は、そのオペランドが等しくないかどうかをチェックします。これは<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Equality">等価</a>演算子の否定なので、次の2行は常に同じ結果になります。</p> +<p>不等価演算子は、そのオペランドが等しくないかどうかをチェックします。これは<a href="/ja/docs/Web/JavaScript/Reference/Operators/Equality">等価</a>演算子の否定なので、次の2行は常に同じ結果になります。</p> <pre class="brush: js notranslate">x != y !(x == y)</pre> -<p>比較アルゴリズムの詳細については、<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Equality">等価</a>演算子のページを参照して下さい。</p> +<p>比較アルゴリズムの詳細については、<a href="/ja/docs/Web/JavaScript/Reference/Operators/Equality">等価</a>演算子のページを参照して下さい。</p> <p>等価演算子と同様に、不等価演算子は異なる型のオペランドを変換して比較しようとします。</p> <pre class="brush: js notranslate">3 != "3"; // false</pre> -<p>これを防止し、異なる型が異なる結果を返すようにするには、代わりに<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Strict_inequality">厳密不等価</a>演算子を使用します:</p> +<p>これを防止し、異なる型が異なる結果を返すようにするには、代わりに<a href="/ja/docs/Web/JavaScript/Reference/Operators/Strict_inequality">厳密不等価</a>演算子を使用します:</p> <pre class="brush: js notranslate">3 !== "3"; // true</pre> @@ -92,7 +92,7 @@ object2 != object2 // false</pre> <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/docs/Web/JavaScript/Reference/Operators/Equality">等価演算子</a></li> - <li><a href="/docs/Web/JavaScript/Reference/Operators/Strict_equality">厳密等価演算子</a></li> - <li><a href="/docs/Web/JavaScript/Reference/Operators/Strict_inequality">厳密不等価演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Equality">等価演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality">厳密等価演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Strict_inequality">厳密不等価演算子</a></li> </ul> diff --git a/files/ja/web/javascript/reference/operators/left_shift_assignment/index.html b/files/ja/web/javascript/reference/operators/left_shift_assignment/index.html index cbe638ccd2..be51e08dda 100644 --- a/files/ja/web/javascript/reference/operators/left_shift_assignment/index.html +++ b/files/ja/web/javascript/reference/operators/left_shift_assignment/index.html @@ -56,6 +56,6 @@ bar <<= 2; // 20 <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> - <li><a href="/docs/Web/JavaScript/Reference/Operators/Left_shift">左シフト演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Left_shift">左シフト演算子</a></li> </ul> diff --git a/files/ja/web/javascript/reference/operators/less_than/index.html b/files/ja/web/javascript/reference/operators/less_than/index.html index c684188b51..e3d838febc 100644 --- a/files/ja/web/javascript/reference/operators/less_than/index.html +++ b/files/ja/web/javascript/reference/operators/less_than/index.html @@ -25,7 +25,7 @@ translation_of: Web/JavaScript/Reference/Operators/Less_than <p>オペランドは、以下に大まかに要約されている<a href="https://tc39.es/ecma262/#sec-abstract-relational-comparison">抽象関係比較</a>アルゴリズムを使用して比較されます:</p> <ul> - <li>最初に、オブジェクトは <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive">Symbol.ToPrimitive</a></code> を使用してプリミティブに変換されます。</li> + <li>最初に、オブジェクトは <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive">Symbol.ToPrimitive</a></code> を使用してプリミティブに変換されます。</li> <li>両方の値が文字列である場合、それらに含まれる Unicode コードポイントの値に基づいて、文字列として比較されます。</li> <li>それ以外の場合、 JavaScript は非数値型を数値に変換しようとします: <ul> @@ -35,7 +35,7 @@ translation_of: Web/JavaScript/Reference/Operators/Less_than <li>文字列は、含まれている値に基づいて変換され、数値が含まれていない場合は <code>NaN</code> として変換されます。</li> </ul> </li> - <li>いずれかの値が <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a></code> の場合、演算子は <code>false</code> を返します。</li> + <li>いずれかの値が <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a></code> の場合、演算子は <code>false</code> を返します。</li> <li>それ以外の場合、値は数値として比較されます。</li> </ul> @@ -109,7 +109,7 @@ console.log(NaN < 3); // false</pre> <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Greater_than">Greater than operator</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal">Greater than or equal operator</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal">Less than or equal operator</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Greater_than">Greater than operator</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal">Greater than or equal operator</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal">Less than or equal operator</a></li> </ul> diff --git a/files/ja/web/javascript/reference/operators/logical_and_assignment/index.html b/files/ja/web/javascript/reference/operators/logical_and_assignment/index.html index 1e74fc6b2d..95ac42b650 100644 --- a/files/ja/web/javascript/reference/operators/logical_and_assignment/index.html +++ b/files/ja/web/javascript/reference/operators/logical_and_assignment/index.html @@ -26,7 +26,7 @@ translation_of: Web/JavaScript/Reference/Operators/Logical_AND_assignment <h3 id="短絡評価（ショートサーキット）">短絡評価（ショートサーキット）</h3> -<p><a href="/docs/Web/JavaScript/Reference/Operators/Logical_AND">論理積演算子</a>は左から右に評価され、次のルールを使って短絡評価の可能性があるかどうかテストされます。</p> +<p><a href="/ja/docs/Web/JavaScript/Reference/Operators/Logical_AND">論理積演算子</a>は左から右に評価され、次のルールを使って短絡評価の可能性があるかどうかテストされます。</p> <p><code>(偽値の式) && expr</code> は、偽値の式が短絡評価されます。</p> diff --git a/files/ja/web/javascript/reference/operators/logical_nullish_assignment/index.html b/files/ja/web/javascript/reference/operators/logical_nullish_assignment/index.html index 1c2235a65e..ba7ebab53d 100644 --- a/files/ja/web/javascript/reference/operators/logical_nullish_assignment/index.html +++ b/files/ja/web/javascript/reference/operators/logical_nullish_assignment/index.html @@ -27,7 +27,7 @@ translation_of: Web/JavaScript/Reference/Operators/Logical_nullish_assignment <h3 id="短絡評価（ショートサーキット）">短絡評価（ショートサーキット）</h3> -<p><a href="/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">Null 合体演算子</a>は左から右に評価され、次のルールを使って短絡評価の可能性があるかどうかテストされます。</p> +<p><a href="/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">Null 合体演算子</a>は左から右に評価され、次のルールを使って短絡評価の可能性があるかどうかテストされます。</p> <p><code>(null や undefined ではない式) ?? expr</code> は、左辺が <code>null</code> でも <code>undefined</code> でもないことが証明されたら、左辺の式が短絡評価されます。</p> @@ -82,7 +82,7 @@ config({}); // { duration: 100, speed: 25 } <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">Null 合体演算子 (<code>??</code>)</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">Null 合体演算子 (<code>??</code>)</a></li> <li>{{Glossary("Nullish")}}</li> <li>{{Glossary("Truthy")}}</li> <li>{{Glossary("Falsy")}}</li> diff --git a/files/ja/web/javascript/reference/operators/logical_or_assignment/index.html b/files/ja/web/javascript/reference/operators/logical_or_assignment/index.html index 4f9a661684..96de814889 100644 --- a/files/ja/web/javascript/reference/operators/logical_or_assignment/index.html +++ b/files/ja/web/javascript/reference/operators/logical_or_assignment/index.html @@ -26,7 +26,7 @@ translation_of: Web/JavaScript/Reference/Operators/Logical_OR_assignment <h3 id="短絡評価（ショートサーキット）">短絡評価（ショートサーキット）</h3> -<p><a href="/docs/Web/JavaScript/Reference/Operators/Logical_OR">論理和</a>演算子は次のように動作します。</p> +<p><a href="/ja/docs/Web/JavaScript/Reference/Operators/Logical_OR">論理和</a>演算子は次のように動作します。</p> <pre class="brush: js notranslate">x || y; // x が truthy の場合 x を返します @@ -50,7 +50,7 @@ translation_of: Web/JavaScript/Reference/Operators/Logical_OR_assignment <h3 id="デフォルトの内容を設定する">デフォルトの内容を設定する</h3> -<p>"lyrics" 要素が空の場合は、<code><a href="/docs/Web/API/Element/innerHTML">innerHTML</a></code> をデフォルト値に設定します。</p> +<p>"lyrics" 要素が空の場合は、<code><a href="/ja/docs/Web/API/Element/innerHTML">innerHTML</a></code> をデフォルト値に設定します。</p> <pre class="brush: js notranslate">document.getElementById('lyrics').innerHTML ||= '<i>No lyrics.</i>'</pre> @@ -84,9 +84,9 @@ translation_of: Web/JavaScript/Reference/Operators/Logical_OR_assignment <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="/docs/Web/JavaScript/Reference/Operators/Logical_OR">論理和演算子 (||)</a></li> - <li><a href="/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">Null合体演算子 (<code>??</code>)</a></li> - <li><a href="/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment">ビット論理和代入 (<code>|=</code>)</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Logical_OR">論理和演算子 (||)</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">Null合体演算子 (<code>??</code>)</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment">ビット論理和代入 (<code>|=</code>)</a></li> <li>{{jsxref("Boolean")}}</li> <li>{{Glossary("Truthy")}}</li> <li>{{Glossary("Falsy")}}</li> diff --git a/files/ja/web/javascript/reference/operators/multiplication/index.html b/files/ja/web/javascript/reference/operators/multiplication/index.html index 3921c0c56a..4aed5ac7f6 100644 --- a/files/ja/web/javascript/reference/operators/multiplication/index.html +++ b/files/ja/web/javascript/reference/operators/multiplication/index.html @@ -62,13 +62,13 @@ Infinity * Infinity // Infinity</pre> <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> </ul> diff --git a/files/ja/web/javascript/reference/operators/multiplication_assignment/index.html b/files/ja/web/javascript/reference/operators/multiplication_assignment/index.html index 86e53c206a..557ce809ee 100644 --- a/files/ja/web/javascript/reference/operators/multiplication_assignment/index.html +++ b/files/ja/web/javascript/reference/operators/multiplication_assignment/index.html @@ -56,6 +56,6 @@ bar *= 'foo' // NaN</pre> <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> - <li><a href="/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> </ul> diff --git a/files/ja/web/javascript/reference/operators/object_initializer/index.html b/files/ja/web/javascript/reference/operators/object_initializer/index.html index 305f7259ed..bd7259d336 100644 --- a/files/ja/web/javascript/reference/operators/object_initializer/index.html +++ b/files/ja/web/javascript/reference/operators/object_initializer/index.html @@ -210,7 +210,7 @@ var clonedObj = { ...obj1 }; var mergedObj = { ...obj1, ...obj2 }; // Object { foo: "baz", x: 42, y: 13 }</pre> -<p>{{jsxref("Object.assign()")}} は <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/set">setters</a> をトリガーしますが、スプレッド構文はトリガーできません。</p> +<p>{{jsxref("Object.assign()")}} は <a href="/ja/docs/Web/JavaScript/Reference/Functions/set">setters</a> をトリガーしますが、スプレッド構文はトリガーできません。</p> <h3 id="Prototype_mutation" name="Prototype_mutation">プロトタイプ変異</h3> diff --git a/files/ja/web/javascript/reference/operators/remainder_assignment/index.html b/files/ja/web/javascript/reference/operators/remainder_assignment/index.html index ab7d348b8b..c70fc20598 100644 --- a/files/ja/web/javascript/reference/operators/remainder_assignment/index.html +++ b/files/ja/web/javascript/reference/operators/remainder_assignment/index.html @@ -57,6 +57,6 @@ bar %= 0 // NaN</pre> <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> - <li><a href="/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> </ul> diff --git a/files/ja/web/javascript/reference/operators/right_shift_assignment/index.html b/files/ja/web/javascript/reference/operators/right_shift_assignment/index.html index 6ff0bb1cba..ba48bb625b 100644 --- a/files/ja/web/javascript/reference/operators/right_shift_assignment/index.html +++ b/files/ja/web/javascript/reference/operators/right_shift_assignment/index.html @@ -56,6 +56,6 @@ b >>= 2; // -2 (-00000000000000000000000000000010)</pre> <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> - <li><a href="/docs/Web/JavaScript/Reference/Operators/Right_shift">右シフト演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Right_shift">右シフト演算子</a></li> </ul> diff --git a/files/ja/web/javascript/reference/operators/subtraction/index.html b/files/ja/web/javascript/reference/operators/subtraction/index.html index 499b95bd50..1a02506128 100644 --- a/files/ja/web/javascript/reference/operators/subtraction/index.html +++ b/files/ja/web/javascript/reference/operators/subtraction/index.html @@ -56,13 +56,13 @@ translation_of: Web/JavaScript/Reference/Operators/Subtraction <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> </ul> diff --git a/files/ja/web/javascript/reference/operators/subtraction_assignment/index.html b/files/ja/web/javascript/reference/operators/subtraction_assignment/index.html index 67fecfed23..f44dbc8232 100644 --- a/files/ja/web/javascript/reference/operators/subtraction_assignment/index.html +++ b/files/ja/web/javascript/reference/operators/subtraction_assignment/index.html @@ -56,6 +56,6 @@ bar -= 'foo' // NaN</pre> <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> - <li><a href="/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> </ul> diff --git a/files/ja/web/javascript/reference/operators/unary_plus/index.html b/files/ja/web/javascript/reference/operators/unary_plus/index.html index 6cd8b30087..418686a5c1 100644 --- a/files/ja/web/javascript/reference/operators/unary_plus/index.html +++ b/files/ja/web/javascript/reference/operators/unary_plus/index.html @@ -68,13 +68,13 @@ console.log(+y); <h2 id="関連情報">関連情報</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> </ul> diff --git a/files/ja/web/javascript/reference/operators/unsigned_right_shift_assignment/index.html b/files/ja/web/javascript/reference/operators/unsigned_right_shift_assignment/index.html index eb756b8c49..4e23558b27 100644 --- a/files/ja/web/javascript/reference/operators/unsigned_right_shift_assignment/index.html +++ b/files/ja/web/javascript/reference/operators/unsigned_right_shift_assignment/index.html @@ -56,6 +56,6 @@ b >>>= 2; // 1073741822 (00111111111111111111111111111110)</pre> <h2 id="関連項目">関連項目</h2> <ul> - <li><a href="/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> - <li><a href="/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift">符号なし右シフト演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift">符号なし右シフト演算子</a></li> </ul> diff --git a/files/ja/web/javascript/reference/statements/block/index.html b/files/ja/web/javascript/reference/statements/block/index.html index da3bb914b0..fa85236949 100644 --- a/files/ja/web/javascript/reference/statements/block/index.html +++ b/files/ja/web/javascript/reference/statements/block/index.html @@ -43,7 +43,7 @@ translation_of: Web/JavaScript/Reference/Statements/block <h2 id="Description" name="Description">解説</h2> -<p>ブロック文は、他の言語ではよく<strong>複合文</strong>と呼ばれます。これは複数の文を JavaScript からみて1つの文にまとめるために使用します。ブロック内に複数の文をまとめることは、JavaScript ではよく行われることです。反対の動作は<a href="/en-US/docs/Web/JavaScript/Reference/Statements/Empty">空文</a>を使用することで実現でき、これは1つの文が必要な場所に文を置かずにおくことができます。</p> +<p>ブロック文は、他の言語ではよく<strong>複合文</strong>と呼ばれます。これは複数の文を JavaScript からみて1つの文にまとめるために使用します。ブロック内に複数の文をまとめることは、JavaScript ではよく行われることです。反対の動作は<a href="/ja/docs/Web/JavaScript/Reference/Statements/Empty">空文</a>を使用することで実現でき、これは1つの文が必要な場所に文を置かずにおくことができます。</p> <p>ブロックは、{{jsxref("Statements/if...else", "if...else")}} や {{jsxref("Statements/for", "for")}} 文との組み合わせでよく使用されます。</p> diff --git a/files/ja/web/javascript/reference/statements/var/index.html b/files/ja/web/javascript/reference/statements/var/index.html index 23cc8fe37c..7f5863ef05 100644 --- a/files/ja/web/javascript/reference/statements/var/index.html +++ b/files/ja/web/javascript/reference/statements/var/index.html @@ -32,7 +32,7 @@ translation_of: Web/JavaScript/Reference/Statements/var <dd>その変数の初期値です。有効な式なら何でも取ることができます。既定値は <code>undefined</code> です。</dd> </dl> -<p>あるいは、<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">分割代入</a>を使用して変数を宣言することもできます。 +<p>あるいは、<a href="/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">分割代入</a>を使用して変数を宣言することもできます。 </p><pre class="notranslate">var <var>{ bar }</var> = <em>foo</em>; // where foo = { bar:10, baz:12 }; /* これは、値が 10 の「bar」という名前の変数を作成します。 */</pre> diff --git a/files/ja/web/manifest/index.html b/files/ja/web/manifest/index.html index 5c7959ef31..c4964ce6b0 100644 --- a/files/ja/web/manifest/index.html +++ b/files/ja/web/manifest/index.html @@ -89,9 +89,9 @@ translation_of: Web/Manifest <p>Chrome 47 以降では、ホーム画面からサイトが起動されるとスプラッシュ画面が表示されます。スプラッシュ画面はウェブアプリマニフェストのプロパティから、具体的には以下のように自動生成されます。</p> <ul> - <li><code><a href="/docs/Web/Manifest/name">name</a></code></li> - <li><code><a href="/docs/Web/Manifest/background_color">background_color</a></code></li> - <li><code><a href="/docs/Web/Manifest/icons">icons</a></code> の配列中のアイコンで、端末の 128dpi に最も近いもの。 + <li><code><a href="/ja/docs/Web/Manifest/name">name</a></code></li> + <li><code><a href="/ja/docs/Web/Manifest/background_color">background_color</a></code></li> + <li><code><a href="/ja/docs/Web/Manifest/icons">icons</a></code> の配列中のアイコンで、端末の 128dpi に最も近いもの。 </li></ul> <h2 id="Specification" name="Specification">仕様書</h2> diff --git a/files/ja/web/mathml/attribute/index.html b/files/ja/web/mathml/attribute/index.html index 8107079bca..616a59a7c3 100644 --- a/files/ja/web/mathml/attribute/index.html +++ b/files/ja/web/mathml/attribute/index.html @@ -6,13 +6,13 @@ tags: - MathML Reference translation_of: Web/MathML/Attribute --- -<p>これは MathML 属性のアルファベット順リストです。各属性の詳細はそれぞれの <a href="/docs/MathML/Element" title="/docs/MathML/Element">要素のページ</a> にあります。</p> +<p>これは MathML 属性のアルファベット順リストです。各属性の詳細はそれぞれの <a href="/ja/docs/MathML/Element" title="/docs/MathML/Element">要素のページ</a> にあります。</p> <p>補足:</p> <ul> <li>MathML {{ MathMLElement("mstyle") }} 要素と {{ MathMLElement("math") }} {{ gecko_minversion_inline("7.0") }} 要素は、すべての MathML プレゼンテーション要素のすべての属性を受け入れます。</li> - <li>MathML の値と単位についての補足は、<a href="/docs/MathML/Attributes/Values" title="/docs/MathML/Attributes/Values">値</a> を参照してください。</li> + <li>MathML の値と単位についての補足は、<a href="/ja/docs/MathML/Attributes/Values" title="/docs/MathML/Attributes/Values">値</a> を参照してください。</li> </ul> <table class="standard-table"> @@ -119,7 +119,7 @@ translation_of: Web/MathML/Attribute <tr id="depth"> <td><code>depth</code></td> <td>{{ MathMLElement("mpadded") }}</td> - <td>Sets or increments the depth. See <a href="/docs/MathML/Attributes/Values">length</a>.</td> + <td>Sets or increments the depth. See <a href="/ja/docs/MathML/Attributes/Values">length</a>.</td> </tr> <tr id="dir"> <td><code>dir</code></td> @@ -179,7 +179,7 @@ translation_of: Web/MathML/Attribute <tr id="height"> <td><code>height</code></td> <td>{{ MathMLElement("mglyph") }}, {{ MathMLElement("mpadded") }}, {{ MathMLElement("mspace") }}</td> - <td>Specifies the desired height. See <a href="/docs/MathML/Attributes/Values#Lengths" title="/docs/MathML/Attributes/Values#Lengths">lengths</a> for possible values.</td> + <td>Specifies the desired height. See <a href="/ja/docs/MathML/Attributes/Values#Lengths" title="/docs/MathML/Attributes/Values#Lengths">lengths</a> for possible values.</td> </tr> <tr id="href"> <td><code>href</code></td> @@ -279,7 +279,7 @@ translation_of: Web/MathML/Attribute <tr id="lspace"> <td><code>lspace</code></td> <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mpadded") }}</td> - <td>演算子の前側の空き量 (値と単位は <a href="/docs/MathML/Attributes/Values#Lengths">length</a> を参照)。</td> + <td>演算子の前側の空き量 (値と単位は <a href="/ja/docs/MathML/Attributes/Values#Lengths">length</a> を参照)。</td> </tr> <tr id="lquote"> <td><code>lquote</code></td> @@ -289,12 +289,12 @@ translation_of: Web/MathML/Attribute <tr id="mathbackground"> <td><code>mathbackground</code></td> <td><em>All</em></td> - <td>背景色。<code>#rgb</code> および <code>#rrggbb</code>、<a href="/docs/CSS/color_value#HTML.2fSVG.2fX11.c2.a0_Color_Keywords">HTML カラー名</a> が使用できます。</td> + <td>背景色。<code>#rgb</code> および <code>#rrggbb</code>、<a href="/ja/docs/CSS/color_value#HTML.2fSVG.2fX11.c2.a0_Color_Keywords">HTML カラー名</a> が使用できます。</td> </tr> <tr id="mathcolor"> <td><code>mathcolor</code></td> <td><em>All</em></td> - <td>テキスト色。<code>#rgb</code> および <code>#rrggbb</code>、<a href="/docs/CSS/color_value#HTML.2fSVG.2fX11.c2.a0_Color_Keywords">HTML カラー名</a> が使用できます。</td> + <td>テキスト色。<code>#rgb</code> および <code>#rrggbb</code>、<a href="/ja/docs/CSS/color_value#HTML.2fSVG.2fX11.c2.a0_Color_Keywords">HTML カラー名</a> が使用できます。</td> </tr> <tr id="mathsize"> <td><code>mathsize</code></td> @@ -314,7 +314,7 @@ translation_of: Web/MathML/Attribute <tr id="minlabelspacing"> <td>{{ unimplemented_inline() }} <code>minlabelspacing</code></td> <td>{{ MathMLElement("mtable") }}</td> - <td>A <a href="/docs/MathML/Attributes/Values">length value</a> specifing the minimum space between a <a href="Element/mlabeledtr" rel="internal">label</a> and the adjacent cell in the row.</td> + <td>A <a href="/ja/docs/MathML/Attributes/Values">length value</a> specifing the minimum space between a <a href="Element/mlabeledtr" rel="internal">label</a> and the adjacent cell in the row.</td> </tr> <tr id="minsize"> <td><code>minsize</code></td> @@ -460,7 +460,7 @@ translation_of: Web/MathML/Attribute <tr id="width"> <td><code>width</code></td> <td>{{ MathMLElement("mglyph") }}, {{ MathMLElement("mpadded") }}, {{ MathMLElement("mspace") }}, {{ MathMLElement("mtable") }}</td> - <td>Specifies the desired width. See <a href="/docs/MathML/Attributes/Values#Lengths">lengths</a> for possible values.</td> + <td>Specifies the desired width. See <a href="/ja/docs/MathML/Attributes/Values#Lengths">lengths</a> for possible values.</td> </tr> <tr id="xlink-href"> <td><code>xlink:href</code></td> diff --git a/files/ja/web/mathml/authoring/index.html b/files/ja/web/mathml/authoring/index.html index 3546ad1808..5051453456 100644 --- a/files/ja/web/mathml/authoring/index.html +++ b/files/ja/web/mathml/authoring/index.html @@ -11,7 +11,7 @@ translation_of: Web/MathML/Authoring <p>数式を表現しようと思うともっと複雑です。数学には分数や平方根、行列など独自のタグが必要になるような構造がいろいろあるからです。ですから、優良な MathML エディターが求められます。以下ではその幾つかについて述べていきます。取り分け、 Mozilla の MathML 開発チームが開発中の <a href="https://github.com/TeXZilla/">TeXZilla</a> は、 JavaScript 製 Unicode LaTeX-MathML コンバーターであり、本稿で紹介されているような多くの場面で用いられることを想定しています。無論、本稿のツール紹介ではすべてを網羅している訳ではありませんから、是非とも W3C が発行する <a class="external" href="https://www.w3.org/Math/Software/">MathML ソフトウェア一覧</a>をチェックして他のツールも見てみてください。</p> -<p>なお設計上、 MathML は HTML5 によく統合されており、特に CSS, DOM, Javascript, SVG のような通常のウェブ機能を使用できることができます。これはこのドキュメントの範囲外ですが、ウェブ言語の基本的な知識があれば、誰でも簡単にこれらの機能を MathML と組み合わせることができます。詳細については、<a href="/en-US/docs/Mozilla/MathML_Project#Sample_MathML_Documents">デモ</a>や <a href="/en-US/docs/Web/MathML">MathML リファレンスのページ</a>をご覧ください。</p> +<p>なお設計上、 MathML は HTML5 によく統合されており、特に CSS, DOM, Javascript, SVG のような通常のウェブ機能を使用できることができます。これはこのドキュメントの範囲外ですが、ウェブ言語の基本的な知識があれば、誰でも簡単にこれらの機能を MathML と組み合わせることができます。詳細については、<a href="/ja/docs/Mozilla/MathML_Project#Sample_MathML_Documents">デモ</a>や <a href="/ja/docs/Web/MathML">MathML リファレンスのページ</a>をご覧ください。</p> <h2 id="Using_MathML" name="Using_MathML">MathML の使用</h2> @@ -52,7 +52,7 @@ translation_of: Web/MathML/Authoring <pre class="brush: html notranslate"><script src="https://fred-wang.github.io/mathjax.js/mpadded-min.js"></script></pre> -<p>これら 2 つのスクリプトは <a href="/en-US/docs/Web/MathML/Element/mspace">mspace</a> または <a href="/en-US/docs/Web/MathML/Element/mpadded">mpadded</a> 要素の機能検出を行うことに注意してください (これらのページのブラウザー互換性表を参照してください)。また、良好な MathML の対応のないブラウザーのためにページの上部に警告を表示し、ユーザーに上記のフォールバックのいずれかを選択させるための同様のスクリプトもあります。</p> +<p>これら 2 つのスクリプトは <a href="/ja/docs/Web/MathML/Element/mspace">mspace</a> または <a href="/ja/docs/Web/MathML/Element/mpadded">mpadded</a> 要素の機能検出を行うことに注意してください (これらのページのブラウザー互換性表を参照してください)。また、良好な MathML の対応のないブラウザーのためにページの上部に警告を表示し、ユーザーに上記のフォールバックのいずれかを選択させるための同様のスクリプトもあります。</p> <pre class="brush: html notranslate"><script src="https://fred-wang.github.io/mathml-warning.js/mpadded-min.js"></script></pre> @@ -76,9 +76,9 @@ var isWebKit = ua.indexOf('AppleWebKit') > -1 && ua.indexOf('Chrome') <h4 id="数学記号用のフォント">数学記号用のフォント</h4> -<p>In order to get a good layout or to allow different style, it's important to have mathematical fonts available. It's always good to provide a link to <a href="/en-US/docs/Mozilla/MathML_Project/Fonts">MDN's Font Instructions</a>, so that your visitors can verify whether they have appropriate fonts installed on their system. It's also good to provide a fallback with Web fonts.</p> +<p>In order to get a good layout or to allow different style, it's important to have mathematical fonts available. It's always good to provide a link to <a href="/ja/docs/Mozilla/MathML_Project/Fonts">MDN's Font Instructions</a>, so that your visitors can verify whether they have appropriate fonts installed on their system. It's also good to provide a fallback with Web fonts.</p> -<p>Prior to Gecko 31.0 {{GeckoRelease("31.0")}}, it was a bit tedious to setup math fonts, see the <a href="/en-US/docs/Mozilla/MathML_Project/FontsMozilla2.0#MathML_Font_Selection_with_CSS">font instructions for Mozilla 2.0</a>. For Gecko 31.0 {{GeckoRelease("31.0")}}, this is much simpler and is compatible with any Web rendering engine with MathML support. For example, here is a minimal stylesheet to use Latin Modern for the text and Latin Modern Math for the mathematics:</p> +<p>Prior to Gecko 31.0 {{GeckoRelease("31.0")}}, it was a bit tedious to setup math fonts, see the <a href="/ja/docs/Mozilla/MathML_Project/FontsMozilla2.0#MathML_Font_Selection_with_CSS">font instructions for Mozilla 2.0</a>. For Gecko 31.0 {{GeckoRelease("31.0")}}, this is much simpler and is compatible with any Web rendering engine with MathML support. For example, here is a minimal stylesheet to use Latin Modern for the text and Latin Modern Math for the mathematics:</p> <pre class="brush: css notranslate">@namespace url('http://www.w3.org/1999/xhtml'); @namespace m url('http://www.w3.org/1998/Math/MathML'); @@ -90,7 +90,7 @@ m|math { font-family: Latin Modern Math; }</pre> -<p>You can then use the <a href="/en-US/docs/Web/CSS/@font-face">@font-face</a> rule as usual to provide WOFF fallback for Latin Modern and Latin Modern Math. See this <a href="https://github.com/fred-wang/MathFonts">GitHub repository to get WOFF fonts and sample CSS stylesheets</a> to use on your Web site and check <a href="http://fred-wang.github.io/MathFonts/">its test page</a>.</p> +<p>You can then use the <a href="/ja/docs/Web/CSS/@font-face">@font-face</a> rule as usual to provide WOFF fallback for Latin Modern and Latin Modern Math. See this <a href="https://github.com/fred-wang/MathFonts">GitHub repository to get WOFF fonts and sample CSS stylesheets</a> to use on your Web site and check <a href="http://fred-wang.github.io/MathFonts/">its test page</a>.</p> <h4 id="XML文書（XHTML，EPUB等々）におけるMathML">XML文書（XHTML，EPUB等々）におけるMathML</h4> diff --git a/files/ja/web/mathml/element/index.html b/files/ja/web/mathml/element/index.html index a0b50d1e43..a2195bb00f 100644 --- a/files/ja/web/mathml/element/index.html +++ b/files/ja/web/mathml/element/index.html @@ -112,14 +112,14 @@ translation_of: Web/MathML/Element <h3 id="Other_elements" name="Other_elements">他の要素</h3> <ul> <li>{{ MathMLElement("semantics") }} (セマンティックアノテーション用のコンテナ)</li> - <li><a href="/docs/MathML/Element/semantics"><code><annotation></code></a> (Data アノテーション)</li> - <li><a href="/docs/MathML/Element/semantics"><code><annotation-xml></code></a> (XML アノテーション)</li> + <li><a href="/ja/docs/MathML/Element/semantics"><code><annotation></code></a> (Data アノテーション)</li> + <li><a href="/ja/docs/MathML/Element/semantics"><code><annotation-xml></code></a> (XML アノテーション)</li> </ul> </div> <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/docs/Web/MathML">MathML</a></li> - <li><a href="/docs/Web/MathML/Attribute">MathML 属性リファレンス</a></li> + <li><a href="/ja/docs/Web/MathML">MathML</a></li> + <li><a href="/ja/docs/Web/MathML/Attribute">MathML 属性リファレンス</a></li> </ul> diff --git a/files/ja/web/mathml/element/mfenced/index.html b/files/ja/web/mathml/element/mfenced/index.html index 210ce30041..c89e7f5c8c 100644 --- a/files/ja/web/mathml/element/mfenced/index.html +++ b/files/ja/web/mathml/element/mfenced/index.html @@ -19,9 +19,9 @@ translation_of: Web/MathML/Element/mfenced <dt id="attr-href">href</dt> <dd>指定されたURIへのハイパーリンクを設定するために使用されます。</dd> <dt id="attr-mathbackground">mathbackground</dt> - <dd>背景色。#<code>#rgb</code>、<code>#rrggbb</code>、および<a href="/en-US/docs/CSS/color_value#Color_Keywords">HTMLの色名</a>を使用できます。</dd> + <dd>背景色。#<code>#rgb</code>、<code>#rrggbb</code>、および<a href="/ja/docs/CSS/color_value#Color_Keywords">HTMLの色名</a>を使用できます。</dd> <dt id="attr-mathcolor">mathcolor</dt> - <dd>テキストの色と分数数線の色。 <code>#rgb</code>、<code>#rrggbb</code>、および<a href="/en-US/docs/CSS/color_value#Color_Keywords">HTMLの色名</a>を使用できます。</dd> + <dd>テキストの色と分数数線の色。 <code>#rgb</code>、<code>#rrggbb</code>、および<a href="/ja/docs/CSS/color_value#Color_Keywords">HTMLの色名</a>を使用できます。</dd> <dt id="attr-open">open</dt> <dd>開き記号の文字列を与えます。既定値は "(" です。空白文字はすべて無くされます。</dd> <dt id="attr-separators">separators</dt> diff --git a/files/ja/web/mathml/element/mfrac/index.html b/files/ja/web/mathml/element/mfrac/index.html index 567cf6bb87..b61285d674 100644 --- a/files/ja/web/mathml/element/mfrac/index.html +++ b/files/ja/web/mathml/element/mfrac/index.html @@ -26,7 +26,7 @@ translation_of: Web/MathML/Element/mfrac <dd><a href="/ja/docs/CSS">スタイルシート</a> で装飾を行なう際に使われます。</dd> <dt id="attr-denomalign"><code>denomalign</code> {{deprecated_inline}}</dt> <dd>分数の下に分母をどう揃えるかを指定します。取り得る値は <code>left</code>、<code>center</code> (既定値) と <code>right</code> です。<br> - この属性は、非推奨で近日中に廃止されます。代わりに CSS を用いて <code><a href="ja/docs/Web/CSS/text-align">text-align</a></code> を指定してください。</dd> + この属性は、非推奨で近日中に廃止されます。代わりに CSS を用いて <code><a href="/ja/docs/Web/CSS/text-align">text-align</a></code> を指定してください。</dd> <dt id="attr-href"><code>href</code></dt> <dd>特定の URI へのハイパーリンクを設定するのに使われます。</dd> <dt id="attr-linethickness"><code>linethickness</code></dt> diff --git a/files/ja/web/mathml/element/mi/index.html b/files/ja/web/mathml/element/mi/index.html index ee4ed66910..4f8eafe3ab 100644 --- a/files/ja/web/mathml/element/mi/index.html +++ b/files/ja/web/mathml/element/mi/index.html @@ -26,7 +26,7 @@ translation_of: Web/MathML/Element/mi <li><code>small:</code> Font is rendered smaller than the current font size.</li> <li><code>normal:</code> Equivalent to 100% or 1em.</li> <li><code>big:</code> Font is rendered larger than the current font size.</li> - <li>a custom <a href="/en-US/docs/CSS/length">length</a>.</li> + <li>a custom <a href="/ja/docs/CSS/length">length</a>.</li> <li>or a unitless value which multiplies the default.</li> </ul> </dd> @@ -113,5 +113,5 @@ translation_of: Web/MathML/Element/mi <ul> <li>Starting with Gecko 20.0 {{geckoRelease("20.0")}} a unitless value for <code>mathsize</code> is allowed.</li> - <li>Some <code>mathvariant</code> values are only implemented starting with Gecko 28.0 {{ geckoRelease("28.0") }} and require appropriate <a href="/en-US/docs/Mozilla/MathML_Project/Fonts">math fonts</a>.</li> + <li>Some <code>mathvariant</code> values are only implemented starting with Gecko 28.0 {{ geckoRelease("28.0") }} and require appropriate <a href="/ja/docs/Mozilla/MathML_Project/Fonts">math fonts</a>.</li> </ul> diff --git a/files/ja/web/mathml/element/mmultiscripts/index.html b/files/ja/web/mathml/element/mmultiscripts/index.html index e7f6217cd3..40165c6cb6 100644 --- a/files/ja/web/mathml/element/mmultiscripts/index.html +++ b/files/ja/web/mathml/element/mmultiscripts/index.html @@ -22,17 +22,17 @@ translation_of: Web/MathML/Element/mmultiscripts <dl> <dt id="attr-class-id-style">class, id, style</dt> - <dd>Provided for use with <a href="/en-US/docs/CSS">stylesheets</a>.</dd> + <dd>Provided for use with <a href="/ja/docs/CSS">stylesheets</a>.</dd> <dt id="attr-href">href</dt> <dd>特定の URI へのハイパーリンクをセットするのに使います。</dd> <dt id="attr-mathbackground">mathbackground</dt> - <dd>背景色。<code>#rgb</code>, <code>#rrggbb</code> および <a href="/en-US/docs/CSS/color_value#Color_Keywords">HTML color names</a> が使えます。</dd> + <dd>背景色。<code>#rgb</code>, <code>#rrggbb</code> および <a href="/ja/docs/CSS/color_value#Color_Keywords">HTML color names</a> が使えます。</dd> <dt id="attr-mathcolor">mathcolor</dt> - <dd>文字色。<code>#rgb</code>, <code>#rrggbb</code> および <a href="/en-US/docs/CSS/color_value#Color_Keywords">HTML color names</a> が使えます。</dd> + <dd>文字色。<code>#rgb</code>, <code>#rrggbb</code> および <a href="/ja/docs/CSS/color_value#Color_Keywords">HTML color names</a> が使えます。</dd> <dt id="attr-subscriptshift">subscriptshift</dt> - <dd>The minimum space by which to shift the subscript below the baseline of the expression, as a <a href="/en-US/docs/CSS/length">CSS length</a>.</dd> + <dd>The minimum space by which to shift the subscript below the baseline of the expression, as a <a href="/ja/docs/CSS/length">CSS length</a>.</dd> <dt id="attr-superscriptshift">superscriptshift</dt> - <dd>The minimum space by which to shift the superscript above the baseline of the expression, as a <a href="/en-US/docs/CSS/length">CSS length</a>.</dd> + <dd>The minimum space by which to shift the superscript above the baseline of the expression, as a <a href="/ja/docs/CSS/length">CSS length</a>.</dd> </dl> <h2 id="例">例</h2> diff --git a/files/ja/web/mathml/element/mn/index.html b/files/ja/web/mathml/element/mn/index.html index 21d4fb2b84..94c9a6e47e 100644 --- a/files/ja/web/mathml/element/mn/index.html +++ b/files/ja/web/mathml/element/mn/index.html @@ -31,7 +31,7 @@ translation_of: Web/MathML/Element/mn <li><code>small</code>: Font is rendered smaller than the current font size.</li> <li><code>normal</code>: Equivalent to 100% or 1em.</li> <li><code>big</code>Font is rendered larger than the current font size.</li> - <li>a custom <a href="/en-US/docs/CSS/length">length</a>.</li> + <li>a custom <a href="/ja/docs/CSS/length">length</a>.</li> <li>or a unitless value which multiplies the default.</li> </ul> </dd> @@ -120,5 +120,5 @@ translation_of: Web/MathML/Element/mn <ul> <li>Starting with Gecko 20.0 {{geckoRelease("20.0")}} a unitless value for <code>mathsize</code> is allowed.</li> - <li>Some <code>mathvariant</code> values are only implemented starting with Gecko 28.0 {{ geckoRelease("28.0") }} and require appropriate <a href="/en-US/docs/Mozilla/MathML_Project/Fonts">math fonts</a>.</li> + <li>Some <code>mathvariant</code> values are only implemented starting with Gecko 28.0 {{ geckoRelease("28.0") }} and require appropriate <a href="/ja/docs/Mozilla/MathML_Project/Fonts">math fonts</a>.</li> </ul> diff --git a/files/ja/web/mathml/element/mo/index.html b/files/ja/web/mathml/element/mo/index.html index 504377c56e..2601ec133f 100644 --- a/files/ja/web/mathml/element/mo/index.html +++ b/files/ja/web/mathml/element/mo/index.html @@ -50,7 +50,7 @@ translation_of: Web/MathML/Element/mo <li><code>small:</code> Font is rendered smaller than the current font size.</li> <li><code>normal:</code> Equivalent to 100% or 1em.</li> <li><code>big:</code> Font is rendered larger than the current font size.</li> - <li>a custom <a href="/en-US/docs/MathML/Attributes/Values#Lengths">length</a>.</li> + <li>a custom <a href="/ja/docs/MathML/Attributes/Values#Lengths">length</a>.</li> <li>or a unitless value which multiplies the default.</li> </ul> </dd> @@ -90,14 +90,14 @@ translation_of: Web/MathML/Element/mo <dd>If <code>stretchy</code> is <code>true</code>, this attribute specifies the maximum size of the operator. Allowed values are: <ul> <li><code>infinity</code></li> - <li>an arbitrary <a href="/en-US/docs/MathML/Attributes/Values#Lengths">length</a></li> + <li>an arbitrary <a href="/ja/docs/MathML/Attributes/Values#Lengths">length</a></li> </ul> </dd> <dt id="attr-minsize">minsize</dt> <dd>If <code>stretchy</code> is <code>true</code>, this attribute specifies the minimum size of the operator. Allowed values are: <ul> <li><code>infinity</code></li> - <li>an arbitrary <a href="/en-US/docs/MathML/Attributes/Values#Lengths">length</a></li> + <li>an arbitrary <a href="/ja/docs/MathML/Attributes/Values#Lengths">length</a></li> </ul> </dd> <dt id="attr-movablelimits">movablelimits</dt> @@ -174,6 +174,6 @@ translation_of: Web/MathML/Element/mo <ul> <li>Starting with Gecko 16.0 {{ geckoRelease("16.0") }} the default values for <code>lspace</code> and <code>rspace</code> have been corrected to match the MathML3 specification. They now default to the constant <code>thickmathspace</code> (5/18em).</li> <li>Starting with Gecko 20.0 {{geckoRelease("20.0")}} a unitless value for <code>mathsize</code> is allowed.</li> - <li>Some <code>mathvariant</code> values are only implemented starting with Gecko 28.0 (Firefox 28.0 / Thunderbird 28.0 / SeaMonkey 2.25) and require appropriate <a href="https://developer.mozilla.org/en-US/docs/Mozilla/MathML_Project/Fonts">math fonts</a>.</li> + <li>Some <code>mathvariant</code> values are only implemented starting with Gecko 28.0 (Firefox 28.0 / Thunderbird 28.0 / SeaMonkey 2.25) and require appropriate <a href="/ja/docs/Mozilla/MathML_Project/Fonts">math fonts</a>.</li> <li>Any <a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.lbattrs">linebreaking</a> or <a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.lbindent.attrs">indentation attributes</a> are not implemented yet. See {{ bug("534962") }}.</li> </ul> diff --git a/files/ja/web/mathml/element/mover/index.html b/files/ja/web/mathml/element/mover/index.html index 2d6619d9a1..25a137a62a 100644 --- a/files/ja/web/mathml/element/mover/index.html +++ b/files/ja/web/mathml/element/mover/index.html @@ -19,13 +19,13 @@ translation_of: Web/MathML/Element/mover <dt id="attr-align">align</dt> <dd>オーバースクリプトの揃え位置。取り得る値は：<code>left</code>, <code>center</code> および <code>right</code>.</dd> <dt id="attr-class-id-style">class, id, style</dt> - <dd>Provided for use with <a href="/en-US/docs/CSS">stylesheets</a>.</dd> + <dd>Provided for use with <a href="/ja/docs/CSS">stylesheets</a>.</dd> <dt id="attr-href">href</dt> <dd>Used to set a hyperlink to a specified URI.</dd> <dt id="attr-mathbackground">mathbackground</dt> - <dd>The background color. You can use <code>#rgb</code>, <code>#rrggbb</code> and <a href="/en-US/docs/CSS/color_value#Color_Keywords">HTML color names</a>.</dd> + <dd>The background color. You can use <code>#rgb</code>, <code>#rrggbb</code> and <a href="/ja/docs/CSS/color_value#Color_Keywords">HTML color names</a>.</dd> <dt id="attr-mathcolor">mathcolor</dt> - <dd>The text color. You can use <code>#rgb</code>, <code>#rrggbb</code> and <a href="/en-US/docs/CSS/color_value#Color_Keywords">HTML color names</a>.</dd> + <dd>The text color. You can use <code>#rgb</code>, <code>#rrggbb</code> and <a href="/ja/docs/CSS/color_value#Color_Keywords">HTML color names</a>.</dd> </dl> <h2 id="例">例</h2> diff --git a/files/ja/web/mathml/element/mphantom/index.html b/files/ja/web/mathml/element/mphantom/index.html index b3e3e2c36b..196fbc9f49 100644 --- a/files/ja/web/mathml/element/mphantom/index.html +++ b/files/ja/web/mathml/element/mphantom/index.html @@ -11,9 +11,9 @@ translation_of: Web/MathML/Element/mphantom <dl> <dt id="attr-class-id-style">class, id, style</dt> - <dd>Provided for use with <a href="/en-US/docs/CSS">stylesheets</a>.</dd> + <dd>Provided for use with <a href="/ja/docs/CSS">stylesheets</a>.</dd> <dt id="attr-mathbackground">mathbackground</dt> - <dd>背景色。<code>#rgb</code>, <code>#rrggbb</code> および <a href="/en-US/docs/CSS/color_value#Color_Keywords">HTML color names</a> を用いることができる。</dd> + <dd>背景色。<code>#rgb</code>, <code>#rrggbb</code> および <a href="/ja/docs/CSS/color_value#Color_Keywords">HTML color names</a> を用いることができる。</dd> </dl> <h2 id="例">例</h2> diff --git a/files/ja/web/mathml/element/mspace/index.html b/files/ja/web/mathml/element/mspace/index.html index c5f70af81c..db5cb6ae68 100644 --- a/files/ja/web/mathml/element/mspace/index.html +++ b/files/ja/web/mathml/element/mspace/index.html @@ -11,7 +11,7 @@ translation_of: Web/MathML/Element/mspace <dl> <dt id="attr-class-id-style">class, id, style</dt> - <dd>Provided for use with <a href="/en-US/docs/CSS">stylesheets</a>.</dd> + <dd>Provided for use with <a href="/ja/docs/CSS">stylesheets</a>.</dd> <dt id="attr-depth">depth</dt> <dd>ベースラインからの希望の深さ（値と単位については <a href="/ja/docs/MathML/Attributes/Values#Lengths">length</a> 参照）</dd> <dt id="attr-height">height</dt> @@ -19,7 +19,7 @@ translation_of: Web/MathML/Element/mspace <dt id="attr-linebreak">linebreak</dt> <dd>この空白における改行について。取り得る値は <code>auto</code>（規定値），<code>newline，</code><code>nobreak，</code><code>goodbreak</code>，<code>badbreak</code>。MathML 3 以降は改行を制御するのに {{ MathMLElement("mo") }} を用いるのが好ましい。</dd> <dt id="attr-mathbackground">mathbackground</dt> - <dd>The background color. You can use <code>#rgb</code>, <code>#rrggbb</code> and <a href="/en-US/docs/CSS/color_value#Color_Keywords">HTML color names</a>.</dd> + <dd>The background color. You can use <code>#rgb</code>, <code>#rrggbb</code> and <a href="/ja/docs/CSS/color_value#Color_Keywords">HTML color names</a>.</dd> <dt id="attr-width">width</dt> <dd>希望の幅（値と単位については <a href="/ja/docs/MathML/Attributes/Values#Lengths">length</a> 参照）</dd> </dl> diff --git a/files/ja/web/mathml/element/msub/index.html b/files/ja/web/mathml/element/msub/index.html index 3e4f44c00f..e4be6d7edc 100644 --- a/files/ja/web/mathml/element/msub/index.html +++ b/files/ja/web/mathml/element/msub/index.html @@ -12,15 +12,15 @@ translation_of: Web/MathML/Element/msub <dl> <dt id="attr-class-id-style">class, id, style</dt> - <dd>Provided for use with <a href="/en-US/docs/CSS">stylesheets</a>.</dd> + <dd>Provided for use with <a href="/ja/docs/CSS">stylesheets</a>.</dd> <dt id="attr-href">href</dt> <dd>Used to set a hyperlink to a specified URI.</dd> <dt id="attr-mathbackground">mathbackground</dt> - <dd>The background color. You can use <code>#rgb</code>, <code>#rrggbb</code> and <a href="/en-US/docs/CSS/color_value#Color_Keywords">HTML color names</a>.</dd> + <dd>The background color. You can use <code>#rgb</code>, <code>#rrggbb</code> and <a href="/ja/docs/CSS/color_value#Color_Keywords">HTML color names</a>.</dd> <dt id="attr-mathcolor">mathcolor</dt> - <dd>The text color. You can use <code>#rgb</code>, <code>#rrggbb</code> and <a href="/en-US/docs/CSS/color_value#Color_Keywords">HTML color names</a>.</dd> + <dd>The text color. You can use <code>#rgb</code>, <code>#rrggbb</code> and <a href="/ja/docs/CSS/color_value#Color_Keywords">HTML color names</a>.</dd> <dt id="attr-subscriptshift">subscriptshift</dt> - <dd>下付き部分を本体のベースラインから下げる最小量を <a href="/en-US/docs/MathML/Attributes/Values#Lengths">length value</a> として指定します。</dd> + <dd>下付き部分を本体のベースラインから下げる最小量を <a href="/ja/docs/MathML/Attributes/Values#Lengths">length value</a> として指定します。</dd> </dl> <h2 id="例">例</h2> diff --git a/files/ja/web/mathml/element/msup/index.html b/files/ja/web/mathml/element/msup/index.html index 5d96ed2046..c1dc2d21c1 100644 --- a/files/ja/web/mathml/element/msup/index.html +++ b/files/ja/web/mathml/element/msup/index.html @@ -12,15 +12,15 @@ translation_of: Web/MathML/Element/msup <dl> <dt id="attr-class-id-style">class, id, style</dt> - <dd>Provided for use with <a href="/en-US/docs/CSS">stylesheets</a>.</dd> + <dd>Provided for use with <a href="/ja/docs/CSS">stylesheets</a>.</dd> <dt id="attr-href">href</dt> <dd>Used to set a hyperlink to a specified URI.</dd> <dt id="attr-mathbackground">mathbackground</dt> - <dd>The background color. You can use <code>#rgb</code>, <code>#rrggbb</code> and <a href="/en-US/docs/CSS/color_value#Color_Keywords">HTML color names</a>.</dd> + <dd>The background color. You can use <code>#rgb</code>, <code>#rrggbb</code> and <a href="/ja/docs/CSS/color_value#Color_Keywords">HTML color names</a>.</dd> <dt id="attr-mathcolor">mathcolor</dt> - <dd>The text color. You can use <code>#rgb</code>, <code>#rrggbb</code> and <a href="/en-US/docs/CSS/color_value#Color_Keywords">HTML color names</a>.</dd> + <dd>The text color. You can use <code>#rgb</code>, <code>#rrggbb</code> and <a href="/ja/docs/CSS/color_value#Color_Keywords">HTML color names</a>.</dd> <dt id="attr-superscriptshift">superscriptshift</dt> - <dd>上付き部分を本体のベースラインから持ち上げる最小の量を <a href="/en-US/docs/MathML/Attributes/Values#Lengths">length value.</a> で指定します。</dd> + <dd>上付き部分を本体のベースラインから持ち上げる最小の量を <a href="/ja/docs/MathML/Attributes/Values#Lengths">length value.</a> で指定します。</dd> </dl> <h2 id="例">例</h2> diff --git a/files/ja/web/mathml/element/mtable/index.html b/files/ja/web/mathml/element/mtable/index.html index 2d4c746517..c76c578e91 100644 --- a/files/ja/web/mathml/element/mtable/index.html +++ b/files/ja/web/mathml/element/mtable/index.html @@ -23,7 +23,7 @@ translation_of: Web/MathML/Element/mtable In addition, values of the <code>align</code> attribute can end with a <em>rownumber</em> (e.g. <code>align="center 3"</code>). This allows you to align the specified row of the table rather than the whole table. A negative Integer value counts rows from the bottom of the table. Starting with Gecko 8.0 {{ geckoRelease("8.0") }} the interpretation of <em>negative</em> values has been corrected ({{ bug(601436) }}). In Gecko 17.0 {{geckoRelease("17.0")}} the parsing has been updated to treat whitespace correctly.</dd> <dt id="attr-alignmentscope">alignmentscope</dt> <dt id="attr-class-id-style">class, id, style</dt> - <dd>Provided for use with <a href="/en-US/docs/CSS">stylesheets</a>.</dd> + <dd>Provided for use with <a href="/ja/docs/CSS">stylesheets</a>.</dd> <dt id="attr-columnalign">columnalign</dt> <dd>セル内の水平方向の揃えを指定します。スペース区切りで複数の値を書くこともでき，その場合，対応する列に適用されます（例：<code>columnalign="left right center"</code>）取り得る値は <code>left，center</code>（既定値）と <code>right</code> です。</dd> <dt id="attr-columnlines">columnlines</dt> @@ -46,11 +46,11 @@ translation_of: Web/MathML/Element/mtable <dt id="attr-href">href</dt> <dd>Used to set a hyperlink to a specified URI.</dd> <dt id="attr-mathbackground">mathbackground</dt> - <dd>The background color. You can use <code>#rgb</code>, <code>#rrggbb</code> and <a href="/en-US/docs/CSS/color_value#Color_Keywords">HTML color names</a>.</dd> + <dd>The background color. You can use <code>#rgb</code>, <code>#rrggbb</code> and <a href="/ja/docs/CSS/color_value#Color_Keywords">HTML color names</a>.</dd> <dt id="attr-mathcolor">mathcolor</dt> - <dd>The text color. You can use <code>#rgb</code>, <code>#rrggbb</code> and <a href="/en-US/docs/CSS/color_value#Color_Keywords">HTML color names</a>.</dd> + <dd>The text color. You can use <code>#rgb</code>, <code>#rrggbb</code> and <a href="/ja/docs/CSS/color_value#Color_Keywords">HTML color names</a>.</dd> <dt id="attr-minlabelspacing">minlabelspacing</dt> - <dd>A length value specifing the minimum space between a <a href="/en-US/docs/MathML/Element/mlabeledtr">label</a> and the adjacent cell in the row.</dd> + <dd>A length value specifing the minimum space between a <a href="/ja/docs/MathML/Element/mlabeledtr">label</a> and the adjacent cell in the row.</dd> <dt id="attr-rowalign">rowalign</dt> <dd>セルの垂直方向の揃えを指定します。スペース区切りで複数の値を書くこともでき，その場合，対応する行に適用されます（例：<code>rowalign="top bottom axis"</code>）。取り得る値は <code>axis，baseline</code>（既定値），<code>bottom，center</code> と <code>top</code> です。</dd> <dt id="attr-rowlines">rowlines</dt> @@ -60,7 +60,7 @@ translation_of: Web/MathML/Element/mtable <dt id="attr-side">side</dt> <dd>{{ MathMLElement("mlabeledtr") }} ラベル要素を置く場所を指定します。 取り得る値は <code>left</code>，<code>right</code>（既定値），<code>leftoverlap</code> と <code>rightoverlap</code> です。</dd> <dt id="attr-width">width</dt> - <dd>Specifies the width of the entire table. Accepts <a href="/en-US/docs/MathML/Attributes/Values#Lengths">length values</a>.</dd> + <dd>Specifies the width of the entire table. Accepts <a href="/ja/docs/MathML/Attributes/Values#Lengths">length values</a>.</dd> </dl> <h2 id="例">例</h2> diff --git a/files/ja/web/mathml/element/mtext/index.html b/files/ja/web/mathml/element/mtext/index.html index 7799f8b149..50c12704bf 100644 --- a/files/ja/web/mathml/element/mtext/index.html +++ b/files/ja/web/mathml/element/mtext/index.html @@ -32,7 +32,7 @@ translation_of: Web/MathML/Element/mtext <li><code>small:</code>Font is rendered smaller than the current font size.</li> <li><code>normal:</code>Equivalent to 100% or 1em.</li> <li><code>big:</code>Font is rendered larger than the current font size.</li> - <li>a custom <a href="/en-US/docs/MathML/Attributes/Values#Lengths">length</a>.</li> + <li>a custom <a href="/ja/docs/MathML/Attributes/Values#Lengths">length</a>.</li> <li>or a unitless value which multiplies the default.</li> </ul> </dd> @@ -116,5 +116,5 @@ translation_of: Web/MathML/Element/mtext <ul> <li>Starting with Gecko 20.0 {{geckoRelease("20.0")}} a unitless value for <code>mathsize</code> is allowed.</li> - <li>Some <code>mathvariant</code> values are only implemented starting with Gecko 28.0 (Firefox 28.0 / Thunderbird 28.0 / SeaMonkey 2.25) and require appropriate <a href="https://developer.mozilla.org/ja/docs/Mozilla/MathML_Project/Fonts">math fonts</a>.</li> + <li>Some <code>mathvariant</code> values are only implemented starting with Gecko 28.0 (Firefox 28.0 / Thunderbird 28.0 / SeaMonkey 2.25) and require appropriate <a href="/ja/docs/Mozilla/MathML_Project/Fonts">math fonts</a>.</li> </ul> diff --git a/files/ja/web/mathml/index.html b/files/ja/web/mathml/index.html index ccfd494454..a40847e547 100644 --- a/files/ja/web/mathml/index.html +++ b/files/ja/web/mathml/index.html @@ -9,20 +9,20 @@ tags: - XML translation_of: Web/MathML --- -<p><strong>Mathematical Markup Language (MathML)</strong> は、数学的表記を記述し、その構造と内容を表現するための <a href="/docs/XML" title="/docs/XML">XML</a> マークアップ言語です。このページには、MathML のパワフルな技術を用いた仕事を助けるための文書、サンプル、ツールへのリンクがあります。簡単な概要は、<a href="http://fred-wang.github.io/MozSummitMathML/index.html">Mozilla Summit 2013 で行われた innovation fair 向けのスライド</a> をご覧ください。</p> +<p><strong>Mathematical Markup Language (MathML)</strong> は、数学的表記を記述し、その構造と内容を表現するための <a href="/ja/docs/XML" title="/docs/XML">XML</a> マークアップ言語です。このページには、MathML のパワフルな技術を用いた仕事を助けるための文書、サンプル、ツールへのリンクがあります。簡単な概要は、<a href="http://fred-wang.github.io/MozSummitMathML/index.html">Mozilla Summit 2013 で行われた innovation fair 向けのスライド</a> をご覧ください。</p> <div class="row topicpage-table"> <div class="section"> <h2 id="MathML_リファレンス">MathML リファレンス</h2> <dl> - <dt><a href="/docs/Web/MathML/Element">MathML 要素リファレンス</a></dt> + <dt><a href="/ja/docs/Web/MathML/Element">MathML 要素リファレンス</a></dt> <dd>各 MathML 要素の詳細とデスクトップおよびモバイルのブラウザの互換性情報。</dd> - <dt><a href="/docs/Web/MathML/Attribute">MathML 属性リファレンス</a></dt> + <dt><a href="/ja/docs/Web/MathML/Attribute">MathML 属性リファレンス</a></dt> <dd>MathML 要素の見た目や振る舞いを変更する MathML 属性についての情報。</dd> - <dt><a href="/docs/Web/MathML/Examples">MathML の例</a></dt> + <dt><a href="/ja/docs/Web/MathML/Examples">MathML の例</a></dt> <dd>MathML の動作についての理解を深めるためのサンプルと例。</dd> - <dt><a href="/docs/Web/MathML/Authoring">MathML の書き方</a></dt> + <dt><a href="/ja/docs/Web/MathML/Authoring">MathML の書き方</a></dt> <dd>MathML を書くための提案とヒント、おすすめの MathML エディタ、その出力を Web コンテンツへ統合する方法。</dd> </dl> @@ -56,9 +56,9 @@ translation_of: Web/MathML <h2 id="関連トピック">関連トピック</h2> <ul> - <li><a href="/docs/Web/CSS">CSS</a></li> - <li><a href="/docs/Web/HTML">HTML</a></li> - <li><a href="/docs/Web/SVG">SVG</a></li> + <li><a href="/ja/docs/Web/CSS">CSS</a></li> + <li><a href="/ja/docs/Web/HTML">HTML</a></li> + <li><a href="/ja/docs/Web/SVG">SVG</a></li> </ul> </div> </div> diff --git a/files/ja/web/media/index.html b/files/ja/web/media/index.html index 5cfe5b75a9..0a98ae2308 100644 --- a/files/ja/web/media/index.html +++ b/files/ja/web/media/index.html @@ -27,7 +27,7 @@ translation_of: Web/Media <dt>{{HTMLElement("video")}}</dt> <dd><code><video></code> 要素は、Web コンテキストにおけるビデオコンテンツのエンドポイントです。単純にビデオファイルを提示するためにまたは、ストリーミングビデオコンテンツの宛先として使用することができます。<code><video></code> は、メディア API を他の HTML および、DOM 技術とリンクさせるための手段としても、使用できます。例えば、{{HTMLElement("canvas")}} (フレームの取得と操作) です。JavaScript から {{domxref("HTMLVideoElement")}} オブジェクトとしてアクセスできます。</dd> <dt>{{HTMLElement("track")}}</dt> - <dd>HTML の<code><track></code> 要素を {{HTMLElement("audio")}} または {{HTMLElement("video")}} 要素内に配置して、メディア再生時に使用する <a href="https://developer.mozilla.org/ja/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> 形式の字幕または、キャプショントラックへの参照を提供できます。JavaScript から {{domxref("HTMLTrackElement")}} オブジェクトとしてアクセスできます。</dd> + <dd>HTML の<code><track></code> 要素を {{HTMLElement("audio")}} または {{HTMLElement("video")}} 要素内に配置して、メディア再生時に使用する <a href="/ja/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> 形式の字幕または、キャプショントラックへの参照を提供できます。JavaScript から {{domxref("HTMLTrackElement")}} オブジェクトとしてアクセスできます。</dd> <dt>{{HTMLElement("source")}}</dt> <dd>HTML の<code><source></code> 要素は、{{HTMLElement("audio")}} または {{HTMLElement("video")}} 要素内で使用して、表示するソースメディアを指定します。複数のソースを使用して、さまざまなフォーマット、サイズまたは、解像度により、メディアを提供できます。JavaScript から {{domxref("HTMLSourceElement")}} オブジェクトとしてアクセスできます。</dd> </dl> diff --git a/files/ja/web/security/index.html b/files/ja/web/security/index.html index f7c86e751c..94b76d86dc 100644 --- a/files/ja/web/security/index.html +++ b/files/ja/web/security/index.html @@ -27,7 +27,7 @@ translation_of: Web/Security <dt>HTTPS</dt> <dd><strong>HTTPS</strong> (<strong><em>HyperText Transfer Protocol Secure</em></strong>) は、{{Glossary("HTTP")}} プロトコルの暗号化バージョンです。{{Glossary("SSL")}} または {{Glossary("TLS")}} を使用して、クライアントとサーバー間のすべての通信を暗号化します。この安全な接続により、クライアントは意図したサーバーに接続されていることを確認し、機密データを交換することができます。</dd> <dt><a href="/ja/docs/Web/HTTP/Headers/Strict-Transport-Security">HTTP Strict-Transport-Security</a></dt> - <dd><code>Strict-Transport-Security:</code> は <a href="/en-US/docs/Web/HTTP">HTTP</a> のヘッダーで、ウェブサイトを HTTPS を使用してのみアクセスできるようにするものです。</dd> + <dd><code>Strict-Transport-Security:</code> は <a href="/ja/docs/Web/HTTP">HTTP</a> のヘッダーで、ウェブサイトを HTTPS を使用してのみアクセスできるようにするものです。</dd> <dt><a href="/ja/docs/Web/Security/Certificate_Transparency">電子証明書の透明性</a></dt> <dd><strong>電子証明書の透明性</strong>は、証明書の誤発行を防止し、監視するために設計されたオープンなフレームワークです。新しく発行された証明書は、公開されている、多くの場合独立した CT ログに「記録」され、発行された TLS 証明書の追加のみの暗号的に保証された記録を維持します。</dd> <dt><a href="/ja/docs/Web/Security/Mixed_content">混在コンテンツ</a></dt> diff --git a/files/ja/web/security/subdomain_takeovers/index.html b/files/ja/web/security/subdomain_takeovers/index.html index e06a556296..c0ad1b1675 100644 --- a/files/ja/web/security/subdomain_takeovers/index.html +++ b/files/ja/web/security/subdomain_takeovers/index.html @@ -3,7 +3,7 @@ title: Subdomain takeovers slug: Web/Security/Subdomain_takeovers translation_of: Web/Security/Subdomain_takeovers --- -<p>subdomain takeover は、攻撃者がターゲットドメインのサブドメインの制御権を獲得したときに発生します。一般的には、サブドメインがドメインネームシステム (<a href="/en-US/docs/Glossary/DNS">DNS</a>) に正規名 (<a href="https://en.wikipedia.org/wiki/CNAME_record">CNAME</a>) を持っているが、そのサブドメインにコンテンツを提供しているホストがいない場合に発生します。これは、バーチャルホストがまだ公開されていないか、バーチャルホストが削除されているために起こる可能性があります。攻撃者は、自分のバーチャルホストを提供して、そのサブドメインのコンテンツをホストすることで、そのサブドメインを乗っ取ることができます。</p> +<p>subdomain takeover は、攻撃者がターゲットドメインのサブドメインの制御権を獲得したときに発生します。一般的には、サブドメインがドメインネームシステム (<a href="/ja/docs/Glossary/DNS">DNS</a>) に正規名 (<a href="https://en.wikipedia.org/wiki/CNAME_record">CNAME</a>) を持っているが、そのサブドメインにコンテンツを提供しているホストがいない場合に発生します。これは、バーチャルホストがまだ公開されていないか、バーチャルホストが削除されているために起こる可能性があります。攻撃者は、自分のバーチャルホストを提供して、そのサブドメインのコンテンツをホストすることで、そのサブドメインを乗っ取ることができます。</p> <p>攻撃者がこれを行うことができれば、メインドメインから設定された<a href="/ja/docs/Web/HTTP/Cookies">クッキー</a>を読み取ったり、<a href="/ja/docs/Web/Security/Types_of_attacks#Cross-site_scripting_XSS">クロスサイトスクリプティング</a>を行ったり、<a href="/ja/docs/Web/HTTP/CSP">コンテンツセキュリティポリシー</a>を回避したりすることが可能となり、保護された情報 (ログインを含む) を取得したり、不審なユーザーに悪意のあるコンテンツを送信したりすることが可能となります。</p> diff --git a/files/ja/web/svg/applying_svg_effects_to_html_content/index.html b/files/ja/web/svg/applying_svg_effects_to_html_content/index.html index de5f6f0fff..59201e2f3a 100644 --- a/files/ja/web/svg/applying_svg_effects_to_html_content/index.html +++ b/files/ja/web/svg/applying_svg_effects_to_html_content/index.html @@ -212,7 +212,7 @@ pre.target:hover { filter:url(#f3); }</code></pre> <h2 id="参照">参照</h2> <ul> - <li><a href="/en-US/docs/SVG" title="SVG">SVG</a></li> + <li><a href="/ja/docs/SVG" title="SVG">SVG</a></li> <li><a class="external" href="http://robert.ocallahan.org/2008/06/applying-svg-effects-to-html-content_04.html">SVG Effects for HTML Content</a> (ブログ記事)</li> <li><del><a class="external" href="/web-tech/2008/10/10/svg-external-document-references">SVG External Document References</a></del> (ブログ記事) (<a href="http://web.archive.org/web/20120512132948/https://developer.mozilla.org/web-tech/2008/10/10/svg-external-document-references/" title="Web Tech Blog » Blog Archive » SVG External Document References">[archive.org] Web Tech Blog » Blog Archive » SVG External Document References</a>)</li> </ul> diff --git a/files/ja/web/svg/attribute/cy/index.html b/files/ja/web/svg/attribute/cy/index.html index a5a891aad3..17804a9faa 100644 --- a/files/ja/web/svg/attribute/cy/index.html +++ b/files/ja/web/svg/attribute/cy/index.html @@ -39,7 +39,7 @@ translation_of: Web/SVG/Attribute/cy <tbody> <tr> <th scope="row">値</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + <td><strong><a href="/ja/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/ja/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> </tr> <tr> <th scope="row">既定値</th> @@ -62,7 +62,7 @@ translation_of: Web/SVG/Attribute/cy <tbody> <tr> <th scope="row">値</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + <td><strong><a href="/ja/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/ja/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> </tr> <tr> <th scope="row">既定値</th> @@ -85,7 +85,7 @@ translation_of: Web/SVG/Attribute/cy <tbody> <tr> <th scope="row">値</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong></td> + <td><strong><a href="/ja/docs/Web/SVG/Content_type#Length"><length></a></strong></td> </tr> <tr> <th scope="row">既定値</th> diff --git a/files/ja/web/svg/attribute/d/index.html b/files/ja/web/svg/attribute/d/index.html index 1775825110..9b4cbc6887 100644 --- a/files/ja/web/svg/attribute/d/index.html +++ b/files/ja/web/svg/attribute/d/index.html @@ -39,7 +39,7 @@ translation_of: Web/SVG/Attribute/d <tbody> <tr> <th scope="row">値</th> - <td><strong><a href="/docs/Web/SVG/Content_type#String"><string></a></strong></td> + <td><strong><a href="/ja/docs/Web/SVG/Content_type#String"><string></a></strong></td> </tr> <tr> <th scope="row">初期値</th> @@ -62,7 +62,7 @@ translation_of: Web/SVG/Attribute/d <tbody> <tr> <th scope="row">値</th> - <td><strong><a href="/docs/Web/SVG/Content_type#String"><string></a></strong></td> + <td><strong><a href="/ja/docs/Web/SVG/Content_type#String"><string></a></strong></td> </tr> <tr> <th scope="row">初期値</th> @@ -87,7 +87,7 @@ translation_of: Web/SVG/Attribute/d <tbody> <tr> <th scope="row">値</th> - <td><strong><a href="/docs/Web/SVG/Content_type#String"><string></a></strong></td> + <td><strong><a href="/ja/docs/Web/SVG/Content_type#String"><string></a></strong></td> </tr> <tr> <th scope="row">初期値</th> diff --git a/files/ja/web/svg/attribute/dx/index.html b/files/ja/web/svg/attribute/dx/index.html index 62f024708d..adbf070f74 100644 --- a/files/ja/web/svg/attribute/dx/index.html +++ b/files/ja/web/svg/attribute/dx/index.html @@ -9,21 +9,21 @@ tags: - SVG Attribute translation_of: Web/SVG/Attribute/dx --- -<p>« <a href="/en-US/docs/Web/SVG/Attribute">SVG Attribute reference home</a></p> +<p>« <a href="/ja/docs/Web/SVG/Attribute">SVG Attribute reference home</a></p> <p><code>dx</code> 属性は、要素またはその中身の位置についての、x 軸に沿ったずれを表します。まさしくずらされるものは、この属性が設定される要素によります。</p> -<p>{{SVGElement("feOffset")}} 要素の場合は、入力グラフィックをずらす量を表す <a href="/en-US/docs/Web/SVG/Content_type#Number"><number></a> です。この量は、 {{SVGElement("filter")}} 要素上に {{SVGAttr("primitiveUnits")}} 属性で確立した座標系で表されます。</p> +<p>{{SVGElement("feOffset")}} 要素の場合は、入力グラフィックをずらす量を表す <a href="/ja/docs/Web/SVG/Content_type#Number"><number></a> です。この量は、 {{SVGElement("filter")}} 要素上に {{SVGAttr("primitiveUnits")}} 属性で確立した座標系で表されます。</p> -<p>{{SVGElement("glyphRef")}} 要素の場合は, このグリフについてのフォント座標系内での相対的 X 座標を表す <a href="/en-US/docs/Web/SVG/Content_type#Number"><number></a> です。</p> +<p>{{SVGElement("glyphRef")}} 要素の場合は, このグリフについてのフォント座標系内での相対的 X 座標を表す <a href="/ja/docs/Web/SVG/Content_type#Number"><number></a> です。</p> -<p>{{SVGElement("text")}} 要素、 {{SVGElement("tspan")}} 要素、 {{SVGElement("tref")}} 要素、{{SVGElement("altGlyph")}} 要素の場合は、<a href="/en-US/docs/Web/SVG/Content_type#List-of-Ts"><list-of-length></a> を受け取るせいで、物事が少し複雑になります。</p> +<p>{{SVGElement("text")}} 要素、 {{SVGElement("tspan")}} 要素、 {{SVGElement("tref")}} 要素、{{SVGElement("altGlyph")}} 要素の場合は、<a href="/ja/docs/Web/SVG/Content_type#List-of-Ts"><list-of-length></a> を受け取るせいで、物事が少し複雑になります。</p> -<p>一つの <a href="/en-US/docs/Web/SVG/Content_type#Length"><length></a> が与えられた場合、この値は、この要素またはその子孫のうちのいずれかの内部における最初の文字についての現在テキスト位置の新たな相対的 X 座標です。 現在テキスト位置は 、最初の文字が描画される前に、現在のユーザ座標系の x 軸に沿って、 <a href="/en-US/docs/Web/SVG/Content_type#Length"><length></a> だけずらされます。<br> +<p>一つの <a href="/ja/docs/Web/SVG/Content_type#Length"><length></a> が与えられた場合、この値は、この要素またはその子孫のうちのいずれかの内部における最初の文字についての現在テキスト位置の新たな相対的 X 座標です。 現在テキスト位置は 、最初の文字が描画される前に、現在のユーザ座標系の x 軸に沿って、 <a href="/ja/docs/Web/SVG/Content_type#Length"><length></a> だけずらされます。<br> <br> - カンマまたはスペースで区切られた n 個の <a href="/en-US/docs/Web/SVG/Content_type#Length"><length> </a>のリストが与えられた場合、これらの値は、この要素またはその子孫のうちのいずれかの内部における最初の n 文字についての現在テキスト位置の、x 軸に沿ったインクリメンタルなずれを表します。よって、現在の {{SVGElement("text")}} 要素内部の文字を描いた結果として得られる現在テキスト位置が、現在のユーザ座標系の X 軸に沿って、 <a href="/en-US/docs/Web/SVG/Content_type#Length"><length></a> だけずらされます。<br> + カンマまたはスペースで区切られた n 個の <a href="/ja/docs/Web/SVG/Content_type#Length"><length> </a>のリストが与えられた場合、これらの値は、この要素またはその子孫のうちのいずれかの内部における最初の n 文字についての現在テキスト位置の、x 軸に沿ったインクリメンタルなずれを表します。よって、現在の {{SVGElement("text")}} 要素内部の文字を描いた結果として得られる現在テキスト位置が、現在のユーザ座標系の X 軸に沿って、 <a href="/ja/docs/Web/SVG/Content_type#Length"><length></a> だけずらされます。<br> <br> - <a href="/en-US/docs/Web/SVG/Content_type#Length"><length></a> よりも多数の文字が存在する場合は、これらの余分な文字の各々について、以下のようにします。</p> + <a href="/ja/docs/Web/SVG/Content_type#Length"><length></a> よりも多数の文字が存在する場合は、これらの余分な文字の各々について、以下のようにします。</p> <ul> <li>先祖の {{SVGElement("text")}} 要素または {{SVGElement("tspan")}} 要素が、その与えられた文字について、 <code>dx</code> 属性を通じて相対 X 座標を指定している場合には、その量の分だけ、現在のユーザ座標系の x 軸に沿って、現在テキスト位置がずらされます (もっとも近い先祖が優先されます)。</li> @@ -40,7 +40,7 @@ translation_of: Web/SVG/Attribute/dx </tr> <tr> <th scope="row">Value</th> - <td><a href="/en-US/docs/Web/SVG/Content_type#Number"><number></a> | <a href="/en-US/docs/Web/SVG/Content_type#List-of-<var>T<.2Fvar>s"><list-of-length></a></td> + <td><a href="/ja/docs/Web/SVG/Content_type#Number"><number></a> | <a href="/ja/docs/Web/SVG/Content_type#List-of-<var>T<.2Fvar>s"><list-of-length></a></td> </tr> <tr> <th scope="row">Animatable</th> diff --git a/files/ja/web/svg/attribute/fill-opacity/index.html b/files/ja/web/svg/attribute/fill-opacity/index.html index af7b8ba3ce..35c4a58fba 100644 --- a/files/ja/web/svg/attribute/fill-opacity/index.html +++ b/files/ja/web/svg/attribute/fill-opacity/index.html @@ -45,7 +45,7 @@ translation_of: Web/SVG/Attribute/fill-opacity <tbody> <tr> <th scope="row">値</th> - <td><code>[0-1]</code> | <strong><a href="/docs/Web/SVG/Content_type#Paint"><percentage></a></strong></td> + <td><code>[0-1]</code> | <strong><a href="/ja/docs/Web/SVG/Content_type#Paint"><percentage></a></strong></td> </tr> <tr> <th scope="row">規定値</th> diff --git a/files/ja/web/svg/attribute/fill/index.html b/files/ja/web/svg/attribute/fill/index.html index 53e1408b09..73ed5155b0 100644 --- a/files/ja/web/svg/attribute/fill/index.html +++ b/files/ja/web/svg/attribute/fill/index.html @@ -58,7 +58,7 @@ translation_of: Web/SVG/Attribute/fill <tbody> <tr> <th scope="row">Value</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + <td><strong><a href="/ja/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> </tr> <tr> <th scope="row">Default value</th> @@ -167,7 +167,7 @@ translation_of: Web/SVG/Attribute/fill <tbody> <tr> <th scope="row">Value</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + <td><strong><a href="/ja/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> </tr> <tr> <th scope="row">Default value</th> @@ -190,7 +190,7 @@ translation_of: Web/SVG/Attribute/fill <tbody> <tr> <th scope="row">Value</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + <td><strong><a href="/ja/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> </tr> <tr> <th scope="row">Default value</th> @@ -213,7 +213,7 @@ translation_of: Web/SVG/Attribute/fill <tbody> <tr> <th scope="row">Value</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + <td><strong><a href="/ja/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> </tr> <tr> <th scope="row">Default value</th> @@ -236,7 +236,7 @@ translation_of: Web/SVG/Attribute/fill <tbody> <tr> <th scope="row">Value</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + <td><strong><a href="/ja/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> </tr> <tr> <th scope="row">Default value</th> @@ -259,7 +259,7 @@ translation_of: Web/SVG/Attribute/fill <tbody> <tr> <th scope="row">Value</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + <td><strong><a href="/ja/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> </tr> <tr> <th scope="row">Default value</th> @@ -282,7 +282,7 @@ translation_of: Web/SVG/Attribute/fill <tbody> <tr> <th scope="row">Value</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + <td><strong><a href="/ja/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> </tr> <tr> <th scope="row">Default value</th> @@ -326,7 +326,7 @@ translation_of: Web/SVG/Attribute/fill <tbody> <tr> <th scope="row">Value</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + <td><strong><a href="/ja/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> </tr> <tr> <th scope="row">Default value</th> @@ -349,7 +349,7 @@ translation_of: Web/SVG/Attribute/fill <tbody> <tr> <th scope="row">Value</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + <td><strong><a href="/ja/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> </tr> <tr> <th scope="row">Default value</th> @@ -374,7 +374,7 @@ translation_of: Web/SVG/Attribute/fill <tbody> <tr> <th scope="row">Value</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + <td><strong><a href="/ja/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> </tr> <tr> <th scope="row">Default value</th> @@ -397,7 +397,7 @@ translation_of: Web/SVG/Attribute/fill <tbody> <tr> <th scope="row">Value</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + <td><strong><a href="/ja/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> </tr> <tr> <th scope="row">Default value</th> diff --git a/files/ja/web/svg/attribute/filterunits/index.html b/files/ja/web/svg/attribute/filterunits/index.html index f63ceb3091..710079223d 100644 --- a/files/ja/web/svg/attribute/filterunits/index.html +++ b/files/ja/web/svg/attribute/filterunits/index.html @@ -3,7 +3,7 @@ title: filterUnits slug: Web/SVG/Attribute/filterUnits translation_of: Web/SVG/Attribute/filterUnits --- -<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> +<p>« <a href="/ja/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> <p><code>filterUnits</code>属性は、 {{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} そして {{ SVGAttr("height") }} の座標系を定義します。</p> diff --git a/files/ja/web/svg/attribute/href/index.html b/files/ja/web/svg/attribute/href/index.html index 23dc210b4b..188bb35c71 100644 --- a/files/ja/web/svg/attribute/href/index.html +++ b/files/ja/web/svg/attribute/href/index.html @@ -5,7 +5,7 @@ translation_of: Web/SVG/Attribute/href --- <div>{{SVGRef}}</div> -<p>The <strong><code>href</code></strong> attribute defines a link to a resource as a reference <a href="/en-US/docs/Web/SVG/Content_type#URL">URL</a>. The exact meaning of that link depends on the context of each element using it.</p> +<p>The <strong><code>href</code></strong> attribute defines a link to a resource as a reference <a href="/ja/docs/Web/SVG/Content_type#URL">URL</a>. The exact meaning of that link depends on the context of each element using it.</p> <div class="note"> <p><strong>Note:</strong> Specifications before SVG 2 defined an {{SVGAttr("xlink:href")}} attribute, which is now rendered obsolete by the <code>href</code> attribute.</p> @@ -37,7 +37,7 @@ translation_of: Web/SVG/Attribute/href <tbody> <tr> <th scope="row">Value</th> - <td><code><a href="/en-US/docs/Web/SVG/Content_type#URL"><url></a></code></td> + <td><code><a href="/ja/docs/Web/SVG/Content_type#URL"><url></a></code></td> </tr> <tr> <th scope="row">Default value</th> @@ -66,7 +66,7 @@ translation_of: Web/SVG/Attribute/href <tbody> <tr> <th scope="row">Value</th> - <td><code><a href="/en-US/docs/Web/SVG/Content_type#URL"><url></a></code></td> + <td><code><a href="/ja/docs/Web/SVG/Content_type#URL"><url></a></code></td> </tr> <tr> <th scope="row">Default value</th> @@ -95,7 +95,7 @@ translation_of: Web/SVG/Attribute/href <tbody> <tr> <th scope="row">Value</th> - <td><code><a href="/en-US/docs/Web/SVG/Content_type#URL"><url></a></code></td> + <td><code><a href="/ja/docs/Web/SVG/Content_type#URL"><url></a></code></td> </tr> <tr> <th scope="row">Default value</th> @@ -116,7 +116,7 @@ translation_of: Web/SVG/Attribute/href <tbody> <tr> <th scope="row">Value</th> - <td><code><a href="/en-US/docs/Web/SVG/Content_type#URL"><url></a></code></td> + <td><code><a href="/ja/docs/Web/SVG/Content_type#URL"><url></a></code></td> </tr> <tr> <th scope="row">Default value</th> @@ -137,7 +137,7 @@ translation_of: Web/SVG/Attribute/href <tbody> <tr> <th scope="row">Value</th> - <td><code><a href="/en-US/docs/Web/SVG/Content_type#URL"><url></a></code></td> + <td><code><a href="/ja/docs/Web/SVG/Content_type#URL"><url></a></code></td> </tr> <tr> <th scope="row">Default value</th> @@ -174,7 +174,7 @@ translation_of: Web/SVG/Attribute/href <tbody> <tr> <th scope="row">Value</th> - <td><code><a href="/en-US/docs/Web/SVG/Content_type#URL"><url></a></code></td> + <td><code><a href="/ja/docs/Web/SVG/Content_type#URL"><url></a></code></td> </tr> <tr> <th scope="row">Default value</th> @@ -189,13 +189,13 @@ translation_of: Web/SVG/Attribute/href <h3 id="mpath">mpath</h3> -<p>For {{SVGElement("mpath")}}, <code>href</code> defines a URL referring to the {{SVGElement("path")}} element or <a href="/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes">basic shape</a> which defines the motion path.</p> +<p>For {{SVGElement("mpath")}}, <code>href</code> defines a URL referring to the {{SVGElement("path")}} element or <a href="/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes">basic shape</a> which defines the motion path.</p> <table class="properties"> <tbody> <tr> <th scope="row">Value</th> - <td><code><a href="/en-US/docs/Web/SVG/Content_type#URL"><url></a></code></td> + <td><code><a href="/ja/docs/Web/SVG/Content_type#URL"><url></a></code></td> </tr> <tr> <th scope="row">Default value</th> @@ -216,7 +216,7 @@ translation_of: Web/SVG/Attribute/href <tbody> <tr> <th scope="row">Value</th> - <td><code><a href="/en-US/docs/Web/SVG/Content_type#URL"><url></a></code></td> + <td><code><a href="/ja/docs/Web/SVG/Content_type#URL"><url></a></code></td> </tr> <tr> <th scope="row">Default value</th> @@ -237,7 +237,7 @@ translation_of: Web/SVG/Attribute/href <tbody> <tr> <th scope="row">Value</th> - <td><code><a href="/en-US/docs/Web/SVG/Content_type#URL"><url></a></code></td> + <td><code><a href="/ja/docs/Web/SVG/Content_type#URL"><url></a></code></td> </tr> <tr> <th scope="row">Default value</th> @@ -258,7 +258,7 @@ translation_of: Web/SVG/Attribute/href <tbody> <tr> <th scope="row">Value</th> - <td><code><a href="/en-US/docs/Web/SVG/Content_type#URL"><url></a></code></td> + <td><code><a href="/ja/docs/Web/SVG/Content_type#URL"><url></a></code></td> </tr> <tr> <th scope="row">Default value</th> @@ -273,13 +273,13 @@ translation_of: Web/SVG/Attribute/href <h3 id="textPath">textPath</h3> -<p>For {{SVGElement("textPath")}}, <code>href</code> defines a URL referring to the {{SVGElement("path")}} element or <a href="/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes">basic shape</a> onto which the text will be rendered if no {{SVGAttr("path")}} attribute is provided. On the {{SVGElement("textPath")}} element, the <code>href</code> attribute is animatable.</p> +<p>For {{SVGElement("textPath")}}, <code>href</code> defines a URL referring to the {{SVGElement("path")}} element or <a href="/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes">basic shape</a> onto which the text will be rendered if no {{SVGAttr("path")}} attribute is provided. On the {{SVGElement("textPath")}} element, the <code>href</code> attribute is animatable.</p> <table class="properties"> <tbody> <tr> <th scope="row">Value</th> - <td><code><a href="/en-US/docs/Web/SVG/Content_type#URL"><url></a></code></td> + <td><code><a href="/ja/docs/Web/SVG/Content_type#URL"><url></a></code></td> </tr> <tr> <th scope="row">Default value</th> @@ -302,7 +302,7 @@ translation_of: Web/SVG/Attribute/href <tbody> <tr> <th scope="row">Value</th> - <td><code><a href="/en-US/docs/Web/SVG/Content_type#URL"><url></a></code></td> + <td><code><a href="/ja/docs/Web/SVG/Content_type#URL"><url></a></code></td> </tr> <tr> <th scope="row">Default value</th> diff --git a/files/ja/web/svg/attribute/r/index.html b/files/ja/web/svg/attribute/r/index.html index 93c9b8198f..7e5e51021b 100644 --- a/files/ja/web/svg/attribute/r/index.html +++ b/files/ja/web/svg/attribute/r/index.html @@ -51,7 +51,7 @@ translation_of: Web/SVG/Attribute/r <tbody> <tr> <th scope="row">値</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + <td><strong><a href="/ja/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/ja/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> </tr> <tr> <th scope="row">デフォルト値</th> @@ -76,7 +76,7 @@ translation_of: Web/SVG/Attribute/r <tbody> <tr> <th scope="row">値</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + <td><strong><a href="/ja/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/ja/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> </tr> <tr> <th scope="row">デフォルト値</th> diff --git a/files/ja/web/svg/attribute/stroke-dasharray/index.html b/files/ja/web/svg/attribute/stroke-dasharray/index.html index e83a7e18f9..8824b97018 100644 --- a/files/ja/web/svg/attribute/stroke-dasharray/index.html +++ b/files/ja/web/svg/attribute/stroke-dasharray/index.html @@ -80,7 +80,7 @@ translation_of: Web/SVG/Attribute/stroke-dasharray <dl> <dt><var><dasharray></var></dt> <dd> - <p>A list of comma and/or white space separated <a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><var><length></var></a>s and <a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><var><percentage></var></a>s that specify the lengths of alternating dashes and gaps.</p> + <p>A list of comma and/or white space separated <a href="/ja/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><var><length></var></a>s and <a href="/ja/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><var><percentage></var></a>s that specify the lengths of alternating dashes and gaps.</p> <p>If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, <code>5,3,2</code> is equivalent to <code>5,3,2,5,3,2</code>.</p> </dd> diff --git a/files/ja/web/svg/attribute/stroke-dashoffset/index.html b/files/ja/web/svg/attribute/stroke-dashoffset/index.html index a988f3813d..e214009aec 100644 --- a/files/ja/web/svg/attribute/stroke-dashoffset/index.html +++ b/files/ja/web/svg/attribute/stroke-dashoffset/index.html @@ -68,7 +68,7 @@ translation_of: Web/SVG/Attribute/stroke-dashoffset <tbody> <tr> <th scope="row">Value</th> - <td><strong><a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a></strong> | <strong><a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><span><length></span></a></strong></td> + <td><strong><a href="/ja/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a></strong> | <strong><a href="/ja/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><span><length></span></a></strong></td> </tr> <tr> <th scope="row">Default value</th> @@ -81,7 +81,7 @@ translation_of: Web/SVG/Attribute/stroke-dashoffset </tbody> </table> -<p>The offset is usually expressed in user units resolved against the {{SVGAttr('pathLength')}} but if a <a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a> is used, the value is resolved as a percentage of the current viewport.</p> +<p>The offset is usually expressed in user units resolved against the {{SVGAttr('pathLength')}} but if a <a href="/ja/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a> is used, the value is resolved as a percentage of the current viewport.</p> <h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> diff --git a/files/ja/web/svg/attribute/stroke/index.html b/files/ja/web/svg/attribute/stroke/index.html index fc682c32df..34630359e4 100644 --- a/files/ja/web/svg/attribute/stroke/index.html +++ b/files/ja/web/svg/attribute/stroke/index.html @@ -6,7 +6,7 @@ tags: - SVG Attribute translation_of: Web/SVG/Attribute/stroke --- -<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> +<p>« <a href="/ja/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> <p><code>stroke</code>属性は与えられた図形要素の外側に描画される色を定義します。<code>stroke</code>属性のデフォルト値は <strong>none</strong> です<strong>.</strong></p> diff --git a/files/ja/web/svg/attribute/transform/index.html b/files/ja/web/svg/attribute/transform/index.html index dc8dc76929..269cd1724e 100644 --- a/files/ja/web/svg/attribute/transform/index.html +++ b/files/ja/web/svg/attribute/transform/index.html @@ -41,7 +41,7 @@ translation_of: Web/SVG/Attribute/transform <tbody> <tr> <th scope="row">値</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Transform-list"><code><transform-list></code></a></strong></td> + <td><strong><a href="/ja/docs/Web/SVG/Content_type#Transform-list"><code><transform-list></code></a></strong></td> </tr> <tr> <th scope="row">既定値</th> diff --git a/files/ja/web/svg/attribute/viewbox/index.html b/files/ja/web/svg/attribute/viewbox/index.html index 3c060d1bfb..8bb7ed5632 100644 --- a/files/ja/web/svg/attribute/viewbox/index.html +++ b/files/ja/web/svg/attribute/viewbox/index.html @@ -3,7 +3,7 @@ title: viewBox slug: Web/SVG/Attribute/viewBox translation_of: Web/SVG/Attribute/viewBox --- -<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> +<p>« <a href="/ja/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> <p><code>viewBox</code>属性は、特定のcontainer要素に合わせるためのグラフィックス stretchのセットを指定できます。</p> @@ -51,5 +51,5 @@ translation_of: Web/SVG/Attribute/viewBox <h2 id="See_also">See also</h2> <ul> - <li><a href="/en/SVG/Tutorial/Positions" title="https://developer.mozilla.org/en/SVG/Tutorial/Positions">SVG Getting Started: Positions</a></li> + <li><a href="/ja/SVG/Tutorial/Positions" title="https://developer.mozilla.org/en/SVG/Tutorial/Positions">SVG Getting Started: Positions</a></li> </ul> diff --git a/files/ja/web/svg/attribute/x/index.html b/files/ja/web/svg/attribute/x/index.html index ec7ce2f77c..1aee25dbd3 100644 --- a/files/ja/web/svg/attribute/x/index.html +++ b/files/ja/web/svg/attribute/x/index.html @@ -15,7 +15,7 @@ translation_of: Web/SVG/Attribute/x </tr> <tr> <th scope="row">値</th> - <td><a href="/en/SVG/Content_type#Coordinate" title="https://developer.mozilla.org/en/SVG/Content_type#Coordinate"><coordinate></a></td> + <td><a href="/ja/SVG/Content_type#Coordinate" title="https://developer.mozilla.org/en/SVG/Content_type#Coordinate"><coordinate></a></td> </tr> <tr> <th scope="row">アニメーション</th> diff --git a/files/ja/web/svg/attribute/x1/index.html b/files/ja/web/svg/attribute/x1/index.html index cf76281b74..9827bdc19d 100644 --- a/files/ja/web/svg/attribute/x1/index.html +++ b/files/ja/web/svg/attribute/x1/index.html @@ -45,7 +45,7 @@ translation_of: Web/SVG/Attribute/x1 <tbody> <tr> <th scope="row">値</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + <td><strong><a href="/ja/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/ja/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> </tr> <tr> <th scope="row">デフォルト値</th> @@ -80,7 +80,7 @@ translation_of: Web/SVG/Attribute/x1 <tbody> <tr> <th scope="row">値</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + <td><strong><a href="/ja/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/ja/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> </tr> <tr> <th scope="row">デフォルト値</th> diff --git a/files/ja/web/svg/attribute/y/index.html b/files/ja/web/svg/attribute/y/index.html index ca9eacfa11..3e6d2ce191 100644 --- a/files/ja/web/svg/attribute/y/index.html +++ b/files/ja/web/svg/attribute/y/index.html @@ -15,7 +15,7 @@ translation_of: Web/SVG/Attribute/y </tr> <tr> <th scope="row">値</th> - <td><a href="/en/SVG/Content_type#Coordinate" title="https://developer.mozilla.org/en/SVG/Content_type#Coordinate"><coordinate></a></td> + <td><a href="/ja/SVG/Content_type#Coordinate" title="https://developer.mozilla.org/en/SVG/Content_type#Coordinate"><coordinate></a></td> </tr> <tr> <th scope="row">アニメーション</th> diff --git a/files/ja/web/svg/element/a/index.html b/files/ja/web/svg/element/a/index.html index a6c8588a91..15f503cc3c 100644 --- a/files/ja/web/svg/element/a/index.html +++ b/files/ja/web/svg/element/a/index.html @@ -24,12 +24,12 @@ html,body,svg { height:100% }</pre> <pre class="brush: html notranslate"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- 図形を囲むリンク --> - <a href="/docs/Web/SVG/Element/circle"> + <a href="/ja/docs/Web/SVG/Element/circle"> <circle cx="50" cy="40" r="35"/> </a> <!-- テキストを囲むリンク --> - <a href="/docs/Web/SVG/Element/text"> + <a href="/ja/docs/Web/SVG/Element/text"> <text x="50" y="90" text-anchor="middle"> &lt;circle&gt; </text> @@ -72,19 +72,19 @@ svg|a:hover, svg|a:active { <small><em>値種別</em>: <strong><string></strong> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>no</strong></small></dd> <dt>{{SVGAttr("href")}}</dt> <dd>ハイパーリンクが指す先の {{Glossary("URL")}} または URL フラグメントです。<br> - <small><em>値種別</em>: <strong><a href="/docs/Web/SVG/Content_type#URL"><URL></a></strong> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>yes</strong></small></dd> + <small><em>値種別</em>: <strong><a href="/ja/docs/Web/SVG/Content_type#URL"><URL></a></strong> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>yes</strong></small></dd> <dt>{{htmlattrxref("hreflang", "a")}}</dt> <dd>ハイパーリンクが指す先の URL または URL フラグメントにおける人間の言語です。<br> <small><em>値種別</em>: <strong><string></strong> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>yes</strong></small></dd> <dt>{{htmlattrxref("ping", "a")}} {{experimental_inline}}</dt> <dd>空白区切りの URL のリストで、ハイパーリンクをたどるとき、 {{HTTPMethod("POST")}} リクエストで本文が <code>PING</code> であるものがブラウザーから (バックグラウンドで) 送信されます。通常はトラッキングのために使用されます。同じ用途でもっと広く対応されている機能として、 {{domxref("Navigator.sendBeacon()")}} を参照してください。<br> - <small><em>値種別</em>: <strong><a href="/docs/Web/SVG/Content_type#List-of-Ts"><list-of-URLs></a></strong> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>no</strong></small></dd> + <small><em>値種別</em>: <strong><a href="/ja/docs/Web/SVG/Content_type#List-of-Ts"><list-of-URLs></a></strong> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>no</strong></small></dd> <dt>{{htmlattrxref("referrerpolicy", "a")}} {{experimental_inline}}</dt> <dd>どの<a href="/ja/docs/Web/HTTP/Headers/Referer">リファラー</a>をアクセス先の {{Glossary("URL")}} に送信するかです。<br> <small><em>値種別</em>: <code>no-referrer</code>|<code>no-referrer-when-downgrade</code>|<code>same-origin</code>|<code>origin</code>|<code>strict-origin</code>|<code>origin-when-cross-origin</code>|<code>strict-origin-when-cross-origin</code>|<code>unsafe-url</code> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>no</strong></small></dd> <dt>{{htmlattrxref("rel", "a")}} {{experimental_inline}}</dt> <dd>対象のオブジェクトとリンクしているオブジェクトの関係です。<br> - <small><em>値種別</em>: <strong><a href="/docs/Web/HTML/Link_types"><list-of-Link-Types></a></strong> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>yes</strong></small></dd> + <small><em>値種別</em>: <strong><a href="/ja/docs/Web/HTML/Link_types"><list-of-Link-Types></a></strong> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>yes</strong></small></dd> <dt>{{SVGAttr("target")}}</dt> <dd>リンクされた {{Glossary("URL")}} の表示先です。<br> <small><em>値種別</em>: <code>_self</code>|<code>_parent</code>|<code>_top</code>|<code>_blank</code>|<strong><name></strong> ; <em>既定値</em>: <code>_self</code>; <em>アニメーション</em>: <strong>yes</strong></small></dd> @@ -93,21 +93,21 @@ svg|a:hover, svg|a:active { <small><em>値種別</em>: <strong><string></strong> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>yes</strong></small></dd> <dt>{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}</dt> <dd>ハイパーリンクがさす先の URL または URL フラグメントです。古いブラウザー向けの後方互換性のために必要な場合があります。<br> - <small><em>値種別</em>: <strong><a href="/docs/Web/SVG/Content_type#URL"><URL></a></strong> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>yes</strong></small></dd> + <small><em>値種別</em>: <strong><a href="/ja/docs/Web/SVG/Content_type#URL"><URL></a></strong> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>yes</strong></small></dd> </dl> <h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3> <dl> - <dt><a href="/docs/Web/SVG/Attribute/Core">コア属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Core">コア属性</a></dt> <dd><small>主なもの: {{SVGAttr('id')}}, {{SVGAttr('lang')}}, {{SVGAttr('tabindex')}}</small></dd> - <dt><a href="/docs/Web/SVG/Attribute/Styling">スタイル属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Styling">スタイル属性</a></dt> <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> - <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">条件付き処理属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Conditional_Processing">条件付き処理属性</a></dt> <dd><small>主なもの: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> <dt>イベント属性</dt> - <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">グローバルイベント属性</a>, <a href="/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes">文書要素イベント属性</a></small>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">グラフィックイベント属性</a></dd> - <dt><a href="/docs/Web/SVG/Attribute/Presentation">プレゼンテーション属性</a></dt> + <dd><small><a href="/ja/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">グローバルイベント属性</a>, <a href="/ja/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes">文書要素イベント属性</a></small>, <a href="/ja/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">グラフィックイベント属性</a></dd> + <dt><a href="/ja/docs/Web/SVG/Attribute/Presentation">プレゼンテーション属性</a></dt> <dd><small>主なもの: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> <dt>XLink 属性</dt> <dd><small>主なもの: {{SVGAttr("xlink:title")}}</small></dd> diff --git a/files/ja/web/svg/element/animate/index.html b/files/ja/web/svg/element/animate/index.html index a502099556..be6996c30e 100644 --- a/files/ja/web/svg/element/animate/index.html +++ b/files/ja/web/svg/element/animate/index.html @@ -31,25 +31,25 @@ translation_of: Web/SVG/Element/animate <h3 id="Animation_Attributes" name="Animation_Attributes">アニメーション属性</h3> <dl> - <dt><a href="/docs/Web/SVG/Attribute#Animation_Timing_Attributes">アニメーションタイミング属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute#Animation_Timing_Attributes">アニメーションタイミング属性</a></dt> <dd><small>{{SVGAttr("begin")}}, {{SVGAttr("dur")}}, {{SVGAttr("end")}}, {{SVGAttr("min")}}, {{SVGAttr("max")}}, {{SVGAttr("restart")}}, {{SVGAttr("repeatCount")}}, {{SVGAttr("repeatDur")}}, {{SVGAttr("fill")}}</small></dd> - <dt><a href="/docs/Web/SVG/Attribute#Animation_Value_Attributes">アニメーション値属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute#Animation_Value_Attributes">アニメーション値属性</a></dt> <dd><small>{{SVGAttr("calcMode")}}, {{SVGAttr("values")}}, {{SVGAttr("keyTimes")}}, {{SVGAttr("keySplines")}}, {{SVGAttr("from")}}, {{SVGAttr("to")}}, {{SVGAttr("by")}}</small></dd> - <dt><a href="/docs/Web/SVG/Attribute#Animation_Attributes">その他のアニメーション属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute#Animation_Attributes">その他のアニメーション属性</a></dt> <dd><small>特に重要なもの: {{SVGAttr("attributeName")}}, {{SVGAttr("additive")}}, {{SVGAttr("accumulate")}}</small></dd> - <dt><a href="/docs/Web/SVG/Attribute/Events#Animation_Event_Attributes">アニメーションイベント属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Events#Animation_Event_Attributes">アニメーションイベント属性</a></dt> <dd><small>特に重要なもの: {{SVGAttr("onbegin")}}, {{SVGAttr("onend")}}, {{SVGAttr("onrepeat")}}</small></dd> </dl> <h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3> <dl> - <dt><a href="/docs/Web/SVG/Attribute/Core">コア属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Core">コア属性</a></dt> <dd><small>特に重要なもの: {{SVGAttr('id')}}</small></dd> - <dt><a href="/docs/Web/SVG/Attribute/Styling">スタイル属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Styling">スタイル属性</a></dt> <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> <dt>イベント属性</dt> - <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">グローバルイベント属性</a>, <a href="/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes">文書要素イベント属性</a></small></dd> + <dd><small><a href="/ja/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">グローバルイベント属性</a>, <a href="/ja/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes">文書要素イベント属性</a></small></dd> </dl> <h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> diff --git a/files/ja/web/svg/element/animatecolor/index.html b/files/ja/web/svg/element/animatecolor/index.html index 1fbecd53f6..c818128252 100644 --- a/files/ja/web/svg/element/animatecolor/index.html +++ b/files/ja/web/svg/element/animatecolor/index.html @@ -52,7 +52,7 @@ translation_of: Web/SVG/Element/animateColor <h2 id="DOM_インターフェース">DOM インターフェース</h2> -<p>この要素は <code><a href="/en-US/docs/DOM/SVGAnimateColorElement" title="en/DOM/SVGAnimateColorElement">SVGAnimateColorElement</a></code> インターフェースを提供します。</p> +<p>この要素は <code><a href="/ja/docs/DOM/SVGAnimateColorElement" title="en/DOM/SVGAnimateColorElement">SVGAnimateColorElement</a></code> インターフェースを提供します。</p> <h2 id="仕様">仕様</h2> diff --git a/files/ja/web/svg/element/animatemotion/index.html b/files/ja/web/svg/element/animatemotion/index.html index 145d52c0da..87c3ae12e8 100644 --- a/files/ja/web/svg/element/animatemotion/index.html +++ b/files/ja/web/svg/element/animatemotion/index.html @@ -42,13 +42,13 @@ translation_of: Web/SVG/Element/animateMotion <dl> <dt id="attr-cx">{{SVGAttr("keyPoints")}}</dt> <dd>この属性は [0,1] の範囲で、それぞれの {{SVGAttr("keyTimes")}} に関連付けられた値に対して、パスに沿ってオブジェクトがどのくらいの距離にあるかを示します。<br> - <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a>*; <em>Default value</em>: none; <em>Animatable</em>: <strong>no</strong></small></dd> + <small><em>値の型</em>: <a href="/ja/docs/Web/SVG/Content_type#Number"><strong><number></strong></a>*; <em>Default value</em>: none; <em>Animatable</em>: <strong>no</strong></small></dd> <dt id="attr-cx">{{SVGAttr("path")}}</dt> <dd>この属性は、 {{SVGAttr('d')}} 属性と同じ構文を使用して、モーションパスを定義します。<br> <small><em>値の型</em>: <strong><string></strong>; <em>Default value</em>: none; <em>Animatable</em>: <strong>no</strong></small></dd> <dt id="attr-cx">{{SVGAttr("rotate")}}</dt> <dd>この属性は、パスに沿ってアニメーションされた要素に適用される回転を定義します。<br> - <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a>|<code>auto</code>|<code>auto-reverse</code>; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>no</strong></small></dd> + <small><em>値の型</em>: <a href="/ja/docs/Web/SVG/Content_type#Number"><strong><number></strong></a>|<code>auto</code>|<code>auto-reverse</code>; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>no</strong></small></dd> </dl> <div class="blockIndicator note"> @@ -58,25 +58,25 @@ translation_of: Web/SVG/Element/animateMotion <h3 id="Animation_Attributes" name="Animation_Attributes">アニメーション属性</h3> <dl> - <dt><a href="/docs/Web/SVG/Attribute#Animation_Timing_Attributes">アニメーションタイミング属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute#Animation_Timing_Attributes">アニメーションタイミング属性</a></dt> <dd><small>{{SVGAttr("begin")}}, {{SVGAttr("dur")}}, {{SVGAttr("end")}}, {{SVGAttr("min")}}, {{SVGAttr("max")}}, {{SVGAttr("restart")}}, {{SVGAttr("repeatCount")}}, {{SVGAttr("repeatDur")}}, {{SVGAttr("fill")}}</small></dd> - <dt><a href="/docs/Web/SVG/Attribute#Animation_Value_Attributes">アニメーション値属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute#Animation_Value_Attributes">アニメーション値属性</a></dt> <dd><small>{{SVGAttr("calcMode")}}, {{SVGAttr("values")}}, {{SVGAttr("keyTimes")}}, {{SVGAttr("keySplines")}}, {{SVGAttr("from")}}, {{SVGAttr("to")}}, {{SVGAttr("by")}}</small></dd> - <dt><a href="/docs/Web/SVG/Attribute#Animation_Attributes">他のアニメーション属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute#Animation_Attributes">他のアニメーション属性</a></dt> <dd><small>特に重要なもの: {{SVGAttr("attributeName")}}, {{SVGAttr("additive")}}, {{SVGAttr("accumulate")}}</small></dd> - <dt><a href="/docs/Web/SVG/Attribute/Events#Animation_Event_Attributes">アニメーションイベント属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Events#Animation_Event_Attributes">アニメーションイベント属性</a></dt> <dd><small>特に重要なもの: {{SVGAttr("onbegin")}}, {{SVGAttr("onend")}}, {{SVGAttr("onrepeat")}}</small></dd> </dl> <h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3> <dl> - <dt><a href="/docs/Web/SVG/Attribute/Core">コア属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Core">コア属性</a></dt> <dd><small>特に重要なもの: {{SVGAttr('id')}}</small></dd> - <dt><a href="/docs/Web/SVG/Attribute/Styling">スタイル付け属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Styling">スタイル付け属性</a></dt> <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> <dt>イベント属性</dt> - <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">グローバルイベント属性</a>, <a href="/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes">文書要素イベント属性</a></small></dd> + <dd><small><a href="/ja/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">グローバルイベント属性</a>, <a href="/ja/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes">文書要素イベント属性</a></small></dd> </dl> <h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> diff --git a/files/ja/web/svg/element/animatetransform/index.html b/files/ja/web/svg/element/animatetransform/index.html index 5cef265bb3..5ef64ae909 100644 --- a/files/ja/web/svg/element/animatetransform/index.html +++ b/files/ja/web/svg/element/animatetransform/index.html @@ -64,7 +64,7 @@ translation_of: Web/SVG/Element/animateTransform <h2 id="DOM_インターフェース">DOM インターフェース</h2> -<p>この属性は <code><a href="/en-US/docs/DOM/SVGAnimateTransformElement" title="en/DOM/SVGAnimateTransformElement">SVGAnimateTransformElement</a></code> インターフェースを提供します。</p> +<p>この属性は <code><a href="/ja/docs/DOM/SVGAnimateTransformElement" title="en/DOM/SVGAnimateTransformElement">SVGAnimateTransformElement</a></code> インターフェースを提供します。</p> <p> </p> diff --git a/files/ja/web/svg/element/circle/index.html b/files/ja/web/svg/element/circle/index.html index 16c38d5ac5..0344aa9dc0 100644 --- a/files/ja/web/svg/element/circle/index.html +++ b/files/ja/web/svg/element/circle/index.html @@ -5,7 +5,7 @@ translation_of: Web/SVG/Element/circle --- <div>{{SVGRef}}</div> -<p><code><strong><circle></strong></code> <a href="https://developer.mozilla.org/ja/docs/Web/SVG">SVG</a> 要素は SVG の基本的な図形を表すものであり、中心座標と半径を指定して円を描画します。</p> +<p><code><strong><circle></strong></code> <a href="/ja/docs/Web/SVG">SVG</a> 要素は SVG の基本的な図形を表すものであり、中心座標と半径を指定して円を描画します。</p> <h2 id="使用可能な場所">使用可能な場所</h2> @@ -16,10 +16,10 @@ translation_of: Web/SVG/Element/circle <h3 id="グローバル属性">グローバル属性</h3> <ul> - <li><a href="https://developer.mozilla.org/ja/SVG/Attribute#Conditional_processing_attributes">条件処理属性</a></li> - <li><a href="https://developer.mozilla.org/ja/SVG/Attribute#Core_attributes">コア属性</a></li> - <li><a href="https://developer.mozilla.org/ja/SVG/Attribute#Graphical_event_attributes">グラフィカルイベント属性</a></li> - <li><a href="https://developer.mozilla.org/ja/SVG/Attribute#Presentation_attributes">プレゼンテーション属性</a></li> + <li><a href="/ja/SVG/Attribute#Conditional_processing_attributes">条件処理属性</a></li> + <li><a href="/ja/SVG/Attribute#Core_attributes">コア属性</a></li> + <li><a href="/ja/SVG/Attribute#Graphical_event_attributes">グラフィカルイベント属性</a></li> + <li><a href="/ja/SVG/Attribute#Presentation_attributes">プレゼンテーション属性</a></li> <li>{{SVGAttr("class")}}</li> <li>{{SVGAttr("style")}}</li> <li>{{SVGAttr("externalResourcesRequired")}}</li> @@ -36,7 +36,7 @@ translation_of: Web/SVG/Element/circle <h2 id="DOM_インターフェイス">DOM インターフェイス</h2> -<p>この要素は <a href="https://developer.mozilla.org/en-US/docs/Web/API/SVGCircleElement">SVGCircleElement</a> インターフェイスを実装しています。</p> +<p>この要素は <a href="/ja/docs/Web/API/SVGCircleElement">SVGCircleElement</a> インターフェイスを実装しています。</p> <h2 id="例">例</h2> diff --git a/files/ja/web/svg/element/defs/index.html b/files/ja/web/svg/element/defs/index.html index e9fb934e13..8f722e6c7d 100644 --- a/files/ja/web/svg/element/defs/index.html +++ b/files/ja/web/svg/element/defs/index.html @@ -36,10 +36,10 @@ translation_of: Web/SVG/Element/defs <h3 id="グローバル属性">グローバル属性</h3> <ul> - <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">条件的処理属性（コンディショナルプロセッシング属性）</a> »</li> - <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">コア属性</a> »</li> - <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">描画イベント属性</a> »</li> - <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">プレゼンテーション属性</a> »</li> + <li><a href="/ja/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">条件的処理属性（コンディショナルプロセッシング属性）</a> »</li> + <li><a href="/ja/SVG/Attribute#Core" title="en/SVG/Attribute#Core">コア属性</a> »</li> + <li><a href="/ja/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">描画イベント属性</a> »</li> + <li><a href="/ja/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">プレゼンテーション属性</a> »</li> <li>{{ SVGAttr("class") }}</li> <li>{{ SVGAttr("style") }}</li> <li>{{ SVGAttr("externalResourcesRequired") }}</li> @@ -52,7 +52,7 @@ translation_of: Web/SVG/Element/defs <h2 id="DOM_インタフェース">DOM インタフェース</h2> -<p>この要素は <code><a href="/en/DOM/SVGDefsElement" title="en/DOM/SVGDefsElement">SVGDefsElement</a></code> インタフェースを実装しています。</p> +<p>この要素は <code><a href="/ja/DOM/SVGDefsElement" title="en/DOM/SVGDefsElement">SVGDefsElement</a></code> インタフェースを実装しています。</p> <h2 id="仕様">仕様</h2> diff --git a/files/ja/web/svg/element/ellipse/index.html b/files/ja/web/svg/element/ellipse/index.html index cb9ab982f7..70b797a4a9 100644 --- a/files/ja/web/svg/element/ellipse/index.html +++ b/files/ja/web/svg/element/ellipse/index.html @@ -33,19 +33,19 @@ translation_of: Web/SVG/Element/ellipse <dl> <dt>{{SVGAttr("cx")}}</dt> <dd>楕円の x 座標。<br> - <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>デフォルト値</em>: <code>0</code>; <em>アニメーション</em>: <strong>yes</strong></small></dd> + <small><em>Value type</em>: <a href="/ja/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/ja/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>デフォルト値</em>: <code>0</code>; <em>アニメーション</em>: <strong>yes</strong></small></dd> <dt>{{SVGAttr("cy")}}</dt> <dd>楕円の y 座標。<br> - <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>デフォルト値</em>: <code>0</code>; <em>アニメーション</em>: <strong>yes</strong></small></dd> + <small><em>Value type</em>: <a href="/ja/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/ja/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>デフォルト値</em>: <code>0</code>; <em>アニメーション</em>: <strong>yes</strong></small></dd> <dt>{{SVGAttr("rx")}}</dt> <dd>x 軸の半径。<br> - <small><em>Value type</em>: <code>auto</code>|<a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>デフォルト値</em>: <code>auto</code>; <em>アニメーション</em>: <strong>yes</strong></small></dd> + <small><em>Value type</em>: <code>auto</code>|<a href="/ja/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/ja/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>デフォルト値</em>: <code>auto</code>; <em>アニメーション</em>: <strong>yes</strong></small></dd> <dt>{{SVGAttr("ry")}}</dt> <dd>y 軸の半径。<br> - <small><em>Value type</em>: <code>auto</code>|<a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>デフォルト値</em>: <code>auto</code>; <em>アニメーション</em>: <strong>yes</strong></small></dd> + <small><em>Value type</em>: <code>auto</code>|<a href="/ja/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/ja/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>デフォルト値</em>: <code>auto</code>; <em>アニメーション</em>: <strong>yes</strong></small></dd> <dt>{{SVGAttr("pathLength")}}</dt> <dd>この属性は、使用単位での単位合計パス長さを指定します。<br> - <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>デフォルト値</em>: <em>none</em>; <em>アニメーション</em>: <strong>yes</strong></small></dd> + <small><em>Value type</em>: <a href="/ja/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>デフォルト値</em>: <em>none</em>; <em>アニメーション</em>: <strong>yes</strong></small></dd> </dl> <div class="note"> @@ -55,15 +55,15 @@ translation_of: Web/SVG/Element/ellipse <h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3> <dl> - <dt><a href="/docs/Web/SVG/Attribute/Core">コア属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Core">コア属性</a></dt> <dd><small>注目すべき属性: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> - <dt><a href="/docs/Web/SVG/Attribute/Styling">スタイリング属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Styling">スタイリング属性</a></dt> <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> - <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">条件処理属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Conditional_Processing">条件処理属性</a></dt> <dd><small>注目すべき属性: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> <dt>イベント属性</dt> - <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">グローバルイベント属性</a>、<a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Graphical イベント属性</a></small></dd> - <dt><a href="/docs/Web/SVG/Attribute/Presentation">プレゼンテーション属性</a></dt> + <dd><small><a href="/ja/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">グローバルイベント属性</a>、<a href="/ja/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Graphical イベント属性</a></small></dd> + <dt><a href="/ja/docs/Web/SVG/Attribute/Presentation">プレゼンテーション属性</a></dt> <dd><small>注目すべき属性: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> <dt>ARIA 属性</dt> <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> diff --git a/files/ja/web/svg/element/fedropshadow/index.html b/files/ja/web/svg/element/fedropshadow/index.html index 0350bab909..68ea01e62a 100644 --- a/files/ja/web/svg/element/fedropshadow/index.html +++ b/files/ja/web/svg/element/fedropshadow/index.html @@ -52,25 +52,25 @@ translation_of: Web/SVG/Element/feDropShadow <dl> <dt id="attr-cx">{{SVGAttr("dx")}}</dt> <dd>この属性は、ドロップシャドウの X 方向のオフセットを定義します。<br> - <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a>; <em>既定値</em>: <code>2</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <small><em>値の型</em>: <a href="/ja/docs/Web/SVG/Content_type#Number"><strong><number></strong></a>; <em>既定値</em>: <code>2</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> <dt id="attr-cx">{{SVGAttr("dy")}}</dt> <dd>この属性は、ドロップシャドウの Y 方向のオフセットを定義します。<br> - <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a>; <em>既定値</em>: <code>2</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <small><em>値の型</em>: <a href="/ja/docs/Web/SVG/Content_type#Number"><strong><number></strong></a>; <em>既定値</em>: <code>2</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> <dt id="attr-cx">{{SVGAttr("stdDeviation")}}</dt> <dd>この属性は、ドロップシャドウのぼかし操作の標準偏差を定義します。<br> - <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a>; <em>既定値</em>: <code>2</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <small><em>値の型</em>: <a href="/ja/docs/Web/SVG/Content_type#Number"><strong><number></strong></a>; <em>既定値</em>: <code>2</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> </dl> <h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3> <dl> - <dt><a href="/docs/Web/SVG/Attribute/Core">コア属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Core">コア属性</a></dt> <dd><small>特に: {{SVGAttr('id')}}</small></dd> - <dt><a href="/docs/Web/SVG/Attribute/Styling">スタイル属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Styling">スタイル属性</a></dt> <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> - <dt><a href="/docs/Web/SVG/Attribute#Filters_Attributes">フィルタープリミティブ属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute#Filters_Attributes">フィルタープリミティブ属性</a></dt> <dd><small>{{SVGAttr('height')}}, {{SVGAttr('in')}}, {{SVGAttr('result')}}, {{SVGAttr('x')}}, {{SVGAttr('y')}}, {{SVGAttr('width')}}</small></dd> - <dt><a href="/docs/Web/SVG/Attribute/Presentation">プレゼンテーション属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Presentation">プレゼンテーション属性</a></dt> <dd><small>特に: {{SVGAttr('flood-color')}}, {{SVGAttr('flood-opacity')}}</small></dd> </dl> diff --git a/files/ja/web/svg/element/g/index.html b/files/ja/web/svg/element/g/index.html index 595db4f508..471c6d6e3a 100644 --- a/files/ja/web/svg/element/g/index.html +++ b/files/ja/web/svg/element/g/index.html @@ -37,15 +37,15 @@ translation_of: Web/SVG/Element/g <h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3> <dl> - <dt><a href="/docs/Web/SVG/Attribute/Core">コア属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Core">コア属性</a></dt> <dd><small>特に: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> - <dt><a href="/docs/Web/SVG/Attribute/Styling">スタイリング属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Styling">スタイリング属性</a></dt> <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> - <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">条件処理属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Conditional_Processing">条件処理属性</a></dt> <dd><small>特に: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> <dt>イベント属性</dt> - <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">グローバルイベント属性</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">グラフィカルイベント属性</a></small></dd> - <dt><a href="/docs/Web/SVG/Attribute/Presentation">プレゼンテーション属性</a></dt> + <dd><small><a href="/ja/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">グローバルイベント属性</a>, <a href="/ja/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">グラフィカルイベント属性</a></small></dd> + <dt><a href="/ja/docs/Web/SVG/Attribute/Presentation">プレゼンテーション属性</a></dt> <dd><small>特に: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> <dt>Aria属性</dt> <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> diff --git a/files/ja/web/svg/element/line/index.html b/files/ja/web/svg/element/line/index.html index 985b4bcafc..5c0bc17f43 100644 --- a/files/ja/web/svg/element/line/index.html +++ b/files/ja/web/svg/element/line/index.html @@ -33,33 +33,33 @@ translation_of: Web/SVG/Element/line <dl> <dt>{{SVGAttr('x1')}}</dt> <dd>線の始点の X 座標を定義します。<br> - <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>|<a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>既定値</em>: <code>0</code>; <em>アニメーション</em>: <strong>可</strong></small></dd> + <small><em>値の型</em>: <a href="/ja/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/ja/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>|<a href="/ja/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>既定値</em>: <code>0</code>; <em>アニメーション</em>: <strong>可</strong></small></dd> <dt>{{SVGAttr('x2')}}</dt> <dd>線の終点の X 座標を定義します。<br> - <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>|<a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>既定値</em>: <code>0</code>; <em>アニメーション</em>: <strong>可</strong></small></dd> + <small><em>値の型</em>: <a href="/ja/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/ja/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>|<a href="/ja/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>既定値</em>: <code>0</code>; <em>アニメーション</em>: <strong>可</strong></small></dd> <dt>{{SVGAttr('y1')}}</dt> <dd>線の始点の Y 座標を定義します。<br> - <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>|<a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>既定値</em>: <code>0</code>; <em>アニメーション</em>: <strong>可</strong></small></dd> + <small><em>Value type</em>: <a href="/ja/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/ja/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>|<a href="/ja/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>既定値</em>: <code>0</code>; <em>アニメーション</em>: <strong>可</strong></small></dd> <dt>{{SVGAttr('y2')}}</dt> <dd>線の終点の Y 座標を定義します。<br> - <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>|<a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>既定値</em>: <code>0</code>; <em>アニメーション</em>: <strong>可</strong></small></dd> + <small><em>Value type</em>: <a href="/ja/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/ja/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>|<a href="/ja/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>既定値</em>: <code>0</code>; <em>アニメーション</em>: <strong>可</strong></small></dd> <dt>{{SVGAttr("pathLength")}}</dt> <dd>パス全体の長さをユーザーの単位で定義します。<br> - <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>可</strong></small></dd> + <small><em>Value type</em>: <a href="/ja/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>可</strong></small></dd> </dl> <h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3> <dl> - <dt><a href="/docs/Web/SVG/Attribute/Core">コア属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Core">コア属性</a></dt> <dd><small>主なもの: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> - <dt><a href="/docs/Web/SVG/Attribute/Styling">スタイル属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Styling">スタイル属性</a></dt> <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> - <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">条件付き処理属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Conditional_Processing">条件付き処理属性</a></dt> <dd><small>主なもの: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> <dt>イベント属性</dt> - <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">グローバルイベント属性</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">グラフィックイベント属性</a></small></dd> - <dt><a href="/docs/Web/SVG/Attribute/Presentation">プレゼンテーション属性</a></dt> + <dd><small><a href="/ja/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">グローバルイベント属性</a>, <a href="/ja/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">グラフィックイベント属性</a></small></dd> + <dt><a href="/ja/docs/Web/SVG/Attribute/Presentation">プレゼンテーション属性</a></dt> <dd><small>主なもの: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> <dt>ARIA 属性</dt> <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> diff --git a/files/ja/web/svg/element/lineargradient/index.html b/files/ja/web/svg/element/lineargradient/index.html index 41aac08a01..0f34077564 100644 --- a/files/ja/web/svg/element/lineargradient/index.html +++ b/files/ja/web/svg/element/lineargradient/index.html @@ -19,7 +19,7 @@ translation_of: Web/SVG/Element/linearGradient <h2 id="例">例</h2> -<p>» <a href="https://developer.mozilla.org/files/3265/linearGradient.svg" title="https://developer.mozilla.org/files/3265/linearGradient.svg">linearGradient.svg</a></p> +<p>» <a href="/files/3265/linearGradient.svg" title="https://developer.mozilla.org/files/3265/linearGradient.svg">linearGradient.svg</a></p> <h2 id="属性">属性</h2> @@ -49,7 +49,7 @@ translation_of: Web/SVG/Element/linearGradient <h2 id="DOM_インターフェース">DOM インターフェース</h2> -<p>この要素は <code><a href="/en/DOM/SVGLinearGradientElement" title="en/DOM/SVGLinearGradientElement">SVGLinearGradientElement</a></code> インターフェースを提供します。</p> +<p>この要素は <code><a href="/ja/DOM/SVGLinearGradientElement" title="en/DOM/SVGLinearGradientElement">SVGLinearGradientElement</a></code> インターフェースを提供します。</p> <h2 id="仕様">仕様</h2> diff --git a/files/ja/web/svg/element/mask/index.html b/files/ja/web/svg/element/mask/index.html index 2437f3db0d..d5834464d9 100644 --- a/files/ja/web/svg/element/mask/index.html +++ b/files/ja/web/svg/element/mask/index.html @@ -39,7 +39,7 @@ translation_of: Web/SVG/Element/mask <dl> <dt id="attr-cx">{{SVGAttr("height")}}</dt> <dd>This attribute defines the height of the masking area.<br> - <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a> ; <em>Default value</em>: <code>120%</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <small><em>Value type</em>: <a href="/ja/docs/Web/SVG/Content_type#Length"><strong><length></strong></a> ; <em>Default value</em>: <code>120%</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> <dt>{{SVGAttr("maskContentUnits")}}</dt> <dd>This attribute defines the coordinate system for the contents of the <code><mask></code>.<br> <small><em>Value type</em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code> ; <em>Default value</em>: <code>userSpaceOnUse</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> @@ -48,25 +48,25 @@ translation_of: Web/SVG/Element/mask <small><em>Value type</em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code> ; <em>Default value</em>: <code>objectBoundingBox</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> <dt id="attr-cx">{{SVGAttr("x")}}</dt> <dd>This attribute defines the x-axis coordinate of the top-left corner of the masking area.<br> - <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Coordinate"><strong><coordinate></strong></a> ; <em>Default value</em>: <code>-10%</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <small><em>Value type</em>: <a href="/ja/docs/Web/SVG/Content_type#Coordinate"><strong><coordinate></strong></a> ; <em>Default value</em>: <code>-10%</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> <dt id="attr-cx">{{SVGAttr("y")}}</dt> <dd>This attribute defines the y-axis coordinate of the top-left corner of the masking area.<br> - <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Coordinate"><strong><coordinate></strong></a> ; <em>Default value</em>: <code>-10%</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <small><em>Value type</em>: <a href="/ja/docs/Web/SVG/Content_type#Coordinate"><strong><coordinate></strong></a> ; <em>Default value</em>: <code>-10%</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> <dt id="attr-cx">{{SVGAttr("width")}}</dt> <dd>This attribute defines the width of the masking area.<br> - <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a> ; <em>Default value</em>: <code>120%</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <small><em>Value type</em>: <a href="/ja/docs/Web/SVG/Content_type#Length"><strong><length></strong></a> ; <em>Default value</em>: <code>120%</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> </dl> <h3 id="Global_attributes">Global attributes</h3> <dl> - <dt><a href="/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt> <dd><small>Most notably: {{SVGAttr('id')}}</small></dd> - <dt><a href="/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt> <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> - <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt> <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> - <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt> <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> </dl> diff --git a/files/ja/web/svg/element/metadata/index.html b/files/ja/web/svg/element/metadata/index.html index 10d943d20b..6bff4e88df 100644 --- a/files/ja/web/svg/element/metadata/index.html +++ b/files/ja/web/svg/element/metadata/index.html @@ -31,7 +31,7 @@ translation_of: Web/SVG/Element/metadata <h2 id="DOM_インターフェース">DOM インターフェース</h2> -<p>この要素は <code><a href="/en/DOM/SVGMetadataElement" title="en/DOM/SVGMetadataElement">SVGMetadataElement</a></code> インターフェースを提供します。</p> +<p>この要素は <code><a href="/ja/DOM/SVGMetadataElement" title="en/DOM/SVGMetadataElement">SVGMetadataElement</a></code> インターフェースを提供します。</p> <h2 id="仕様">仕様</h2> diff --git a/files/ja/web/svg/element/mpath/index.html b/files/ja/web/svg/element/mpath/index.html index 00c5daa516..d8e98247ac 100644 --- a/files/ja/web/svg/element/mpath/index.html +++ b/files/ja/web/svg/element/mpath/index.html @@ -56,8 +56,8 @@ translation_of: Web/SVG/Element/mpath <h3 id="グローバル属性">グローバル属性</h3> <ul> - <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li> - <li><a href="/en/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Xlink attributes</a> »</li> + <li><a href="/ja/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li> + <li><a href="/ja/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Xlink attributes</a> »</li> <li>{{ SVGAttr("externalResourcesRequired") }}</li> </ul> @@ -69,7 +69,7 @@ translation_of: Web/SVG/Element/mpath <h2 id="DOM_インターフェイス">DOM インターフェイス</h2> -<p>この要素は <code><a href="/en/DOM/SVGMPathElement" title="en/DOM/SVGMPathElement">SVGMPathElement</a></code> インターフェイスを提供します。</p> +<p>この要素は <code><a href="/ja/DOM/SVGMPathElement" title="en/DOM/SVGMPathElement">SVGMPathElement</a></code> インターフェイスを提供します。</p> <h2 id="仕様">仕様</h2> diff --git a/files/ja/web/svg/element/path/index.html b/files/ja/web/svg/element/path/index.html index 356acfb540..e0f6666eec 100644 --- a/files/ja/web/svg/element/path/index.html +++ b/files/ja/web/svg/element/path/index.html @@ -40,21 +40,21 @@ translation_of: Web/SVG/Element/path <small><em>値の型</em>: <strong><string></strong> ; <em>初期値</em>: <code>''</code>; <em>アニメーション可否</em>: <strong>yes</strong></small></dd> <dt>{{SVGAttr("pathLength")}}</dt> <dd>この属性は、ユーザ単位系でのパスの全長を指定することを可能にします。<br> - <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>初期値</em>: <em>none</em>; <em>アニメーション可否</em>: <strong>yes</strong></small></dd> + <small><em>値の型</em>: <a href="/ja/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>初期値</em>: <em>none</em>; <em>アニメーション可否</em>: <strong>yes</strong></small></dd> </dl> <h3 id="グローバル属性">グローバル属性</h3> <dl> - <dt><a href="/docs/Web/SVG/Attribute/Core">コア属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Core">コア属性</a></dt> <dd><small>特に: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> - <dt><a href="/docs/Web/SVG/Attribute/Styling">スタイル属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Styling">スタイル属性</a></dt> <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> - <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">条件処理属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Conditional_Processing">条件処理属性</a></dt> <dd><small>特に: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> <dt>イベント属性</dt> - <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">グローバルイベント属性</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">グラフィカルイベント属性</a></small></dd> - <dt><a href="/docs/Web/SVG/Attribute/Presentation">プレゼンテーション属性</a></dt> + <dd><small><a href="/ja/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">グローバルイベント属性</a>, <a href="/ja/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">グラフィカルイベント属性</a></small></dd> + <dt><a href="/ja/docs/Web/SVG/Attribute/Presentation">プレゼンテーション属性</a></dt> <dd><small>特に: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> <dt>ARIA属性</dt> <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> diff --git a/files/ja/web/svg/element/pattern/index.html b/files/ja/web/svg/element/pattern/index.html index adf33d7f5e..9a7f70231b 100644 --- a/files/ja/web/svg/element/pattern/index.html +++ b/files/ja/web/svg/element/pattern/index.html @@ -33,10 +33,10 @@ translation_of: Web/SVG/Element/pattern <dl> <dt>{{SVGAttr("height")}}</dt> <dd>This attribute determines the height of the pattern tile.<br> - <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <small><em>Value type</em>: <a href="/ja/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/ja/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> <dt>{{SVGAttr("href")}}</dt> <dd>This attribute reference a template pattern that provides default values for the <code><pattern></code> attributes.<br> - <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#URL"><strong><URL></strong></a>; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <small><em>Value type</em>: <a href="/ja/docs/Web/SVG/Content_type#URL"><strong><URL></strong></a>; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> <dt>{{SVGAttr("patternContentUnits")}}</dt> <dd>This attribute defines the coordinate system for the contents of the {{ SVGElement("pattern") }}.<br> <small><em>Value type</em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code>; <em>Default value</em>: <code>userSpaceOnUse</code>; <em>Animatable</em>: <strong>yes</strong></small> @@ -44,7 +44,7 @@ translation_of: Web/SVG/Element/pattern </dd> <dt>{{SVGAttr("patternTransform")}}</dt> <dd>This attribute contains the definition of an optional additional transformation from the pattern coordinate system onto the target coordinate system.<br> - <small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#Transform-list"><transform-list></a></strong>; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <small><em>Value type</em>: <strong><a href="/ja/docs/Web/SVG/Content_type#Transform-list"><transform-list></a></strong>; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> <dt>{{SVGAttr("patternUnits")}}</dt> <dd>This attribute defines the coordinate system for attributes <code>x</code>, <code>y</code>, <code>width</code> and <code>height</code>.<br> <small><em>Value type</em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code>; <em>Default value</em>: <code>objectBoundingBox</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> @@ -53,33 +53,33 @@ translation_of: Web/SVG/Element/pattern <small><em>Value type</em>: (<code>none</code>| <code>xMinYMin</code>| <code>xMidYMin</code>| <code>xMaxYMin</code>| <code>xMinYMid</code>| <code>xMidYMid</code>| <code>xMaxYMid</code>| <code>xMinYMax</code>| <code>xMidYMax</code>| <code>xMaxYMax</code>) (<code>meet</code>|<code>slice</code>)? ; <em>Default value</em>: <code>xMidYMid meet</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> <dt>{{SVGAttr("viewBox")}}</dt> <dd>This attribute defines the bound of the SVG viewport for the pattern fragment.<br> - <small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#List-of-Ts"><list-of-numbers></a></strong> ; <em>Default value</em>: none; <em>Animatable</em>: <strong>yes</strong></small></dd> + <small><em>Value type</em>: <strong><a href="/ja/docs/Web/SVG/Content_type#List-of-Ts"><list-of-numbers></a></strong> ; <em>Default value</em>: none; <em>Animatable</em>: <strong>yes</strong></small></dd> <dt>{{SVGAttr("width")}}</dt> <dd>This attribute determines the width of the pattern tile.<br> - <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <small><em>Value type</em>: <a href="/ja/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/ja/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> <dt>{{SVGAttr("x")}}</dt> <dd>This attribute determines the x coordinate shift of the pattern tile.<br> - <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <small><em>Value type</em>: <a href="/ja/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/ja/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> <dt>{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}</dt> <dd>This attribute reference a template pattern that provides default values for the <code><pattern></code> attributes.<br> - <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#URL"><strong><URL></strong></a>; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small> + <small><em>Value type</em>: <a href="/ja/docs/Web/SVG/Content_type#URL"><strong><URL></strong></a>; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small> <p class="note"><strong>Note:</strong> For browsers implementing <code>href</code>, if both <code>href</code> and <code>xlink:href</code> are set, <code>xlink:href</code> will be ignored and only <code>href</code> will be used.</p> </dd> <dt>{{SVGAttr("y")}}</dt> <dd>This attribute determines the y coordinate shift of the pattern tile.<br> - <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <small><em>Value type</em>: <a href="/ja/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/ja/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> </dl> <h3 id="グローバル属性">グローバル属性</h3> <dl> - <dt><a href="/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt> <dd><small>Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> - <dt><a href="/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt> <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> - <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt> <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> - <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt> <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> <dt>XLink Attributes</dt> <dd><small>Most notably: {{SVGAttr("xlink:title")}}</small></dd> diff --git a/files/ja/web/svg/element/polyline/index.html b/files/ja/web/svg/element/polyline/index.html index e093dce2fd..0d034b1bbb 100644 --- a/files/ja/web/svg/element/polyline/index.html +++ b/files/ja/web/svg/element/polyline/index.html @@ -20,17 +20,17 @@ translation_of: Web/SVG/Element/polyline <h2 id="例">例</h2> -<p>» <a href="https://developer.mozilla.org/files/3260/polyline.svg" title="https://developer.mozilla.org/files/3260/polyline.svg">polyline.svg</a></p> +<p>» <a href="/files/3260/polyline.svg" title="https://developer.mozilla.org/files/3260/polyline.svg">polyline.svg</a></p> <h2 id="属性">属性</h2> <h3 id="グローバル属性">グローバル属性</h3> <ul> - <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">条件処理属性</a> »</li> - <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">コア属性</a> »</li> - <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">グラフィカルイベント属性</a> »</li> - <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">プレゼンテーション属性</a> »</li> + <li><a href="/ja/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">条件処理属性</a> »</li> + <li><a href="/ja/SVG/Attribute#Core" title="en/SVG/Attribute#Core">コア属性</a> »</li> + <li><a href="/ja/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">グラフィカルイベント属性</a> »</li> + <li><a href="/ja/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">プレゼンテーション属性</a> »</li> <li>{{ SVGAttr("class") }}</li> <li>{{ SVGAttr("style") }}</li> <li>{{ SVGAttr("externalResourcesRequired") }}</li> @@ -45,7 +45,7 @@ translation_of: Web/SVG/Element/polyline <h2 id="DOM_インターフェイス">DOM インターフェイス</h2> -<p>この要素は <code><a href="/en/DOM/SVGPolylineElement" title="en/DOM/SVGPolylineElement">SVGPolylineElement</a></code> インターフェイスを提供します。</p> +<p>この要素は <code><a href="/ja/DOM/SVGPolylineElement" title="en/DOM/SVGPolylineElement">SVGPolylineElement</a></code> インターフェイスを提供します。</p> <h2 id="仕様">仕様</h2> diff --git a/files/ja/web/svg/element/rect/index.html b/files/ja/web/svg/element/rect/index.html index c4ad070e21..e095c85c26 100644 --- a/files/ja/web/svg/element/rect/index.html +++ b/files/ja/web/svg/element/rect/index.html @@ -18,11 +18,11 @@ translation_of: Web/SVG/Element/rect <h3 id="シンプルな_rect_要素の使い方">シンプルな <code>rect 要素の使い方</code></h3> -<p>» <a href="https://developer.mozilla.org/files/3247/rect-1.svg" title="https://developer.mozilla.org/files/3247/rect-1.svg">rect-1.svg</a></p> +<p>» <a href="/files/3247/rect-1.svg" title="https://developer.mozilla.org/files/3247/rect-1.svg">rect-1.svg</a></p> <h3 id="角の丸い_rect_要素"><code>角の丸い rect</code> 要素</h3> -<p>» <a href="https://developer.mozilla.org/files/3248/rect-2.svg" title="https://developer.mozilla.org/files/3248/rect-2.svg">rect-2.svg</a></p> +<p>» <a href="/files/3248/rect-2.svg" title="https://developer.mozilla.org/files/3248/rect-2.svg">rect-2.svg</a></p> <h2 id="属性">属性</h2> @@ -52,7 +52,7 @@ translation_of: Web/SVG/Element/rect <h2 id="DOM_インターフェイス">DOM インターフェイス</h2> -<p>この要素は <code><a href="/en/DOM/SVGRectElement" title="en/DOM/SVGRectElement">SVGRectElement</a></code> インターフェイスを提供します。</p> +<p>この要素は <code><a href="/ja/DOM/SVGRectElement" title="en/DOM/SVGRectElement">SVGRectElement</a></code> インターフェイスを提供します。</p> <h2 id="使用可能な場所">使用可能な場所</h2> diff --git a/files/ja/web/svg/element/set/index.html b/files/ja/web/svg/element/set/index.html index ff85e944c3..d9e72d82f3 100644 --- a/files/ja/web/svg/element/set/index.html +++ b/files/ja/web/svg/element/set/index.html @@ -42,7 +42,7 @@ translation_of: Web/SVG/Element/set <h2 id="DOM_インターフェース">DOM インターフェース</h2> -<p>この要素は <code><a href="/en/DOM/SVGSetElement" title="en/DOM/SVGSetElement">SVGSetElement</a></code> インターフェースを提供します。</p> +<p>この要素は <code><a href="/ja/DOM/SVGSetElement" title="en/DOM/SVGSetElement">SVGSetElement</a></code> インターフェースを提供します。</p> <h2 id="仕様">仕様</h2> diff --git a/files/ja/web/svg/element/text/index.html b/files/ja/web/svg/element/text/index.html index 5c42559230..5aa3855d70 100644 --- a/files/ja/web/svg/element/text/index.html +++ b/files/ja/web/svg/element/text/index.html @@ -12,7 +12,7 @@ translation_of: Web/SVG/Element/text <p><span class="seoSummary">SVG <strong><code><text></code></strong> 要素は、テキストからなるグラフィクス要素を定義します。<code><text></code> には、他の SVG グラフィクス要素と同じように、グラデーション、パターン、クリッピングパス、マスク、またはフィルターを適用することができます。</span></p> -<p>SVG 内でテキストが <code><text></code> 要素内以外で組み込まれた場合、レンダリングされません。これはデフォルトで隠されるのとは違い、<a href="/docs/Web/SVG/Attribute/display">ディスプレイプロパティ</a> を変更してもテキストは表示されません。</p> +<p>SVG 内でテキストが <code><text></code> 要素内以外で組み込まれた場合、レンダリングされません。これはデフォルトで隠されるのとは違い、<a href="/ja/docs/Web/SVG/Attribute/display">ディスプレイプロパティ</a> を変更してもテキストは表示されません。</p> <h2 id="Usage_context" name="Usage_context">使用可能な場所</h2> @@ -23,10 +23,10 @@ translation_of: Web/SVG/Element/text <h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3> <ul> - <li><a href="/docs/Web/SVG/Attribute#Conditional_processing_attributes">条件処理属性</a> »</li> - <li><a href="/docs/Web/SVG/Attribute#Core_attributes">コア属性</a> »</li> - <li><a href="/docs/Web/SVG/Attribute#Graphical_event_attributes">グラフィカルイベント属性</a> »</li> - <li><a href="/docs/Web/SVG/Attribute#Presentation_attributes">プレゼンテーション属性</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#Conditional_processing_attributes">条件処理属性</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#Core_attributes">コア属性</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#Graphical_event_attributes">グラフィカルイベント属性</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#Presentation_attributes">プレゼンテーション属性</a> »</li> <li>{{SVGAttr("class")}}</li> <li>{{SVGAttr("style")}}</li> <li>{{SVGAttr("externalResourcesRequired")}}</li> diff --git a/files/ja/web/svg/element/tspan/index.html b/files/ja/web/svg/element/tspan/index.html index 1ef05592ae..1dee4218a4 100644 --- a/files/ja/web/svg/element/tspan/index.html +++ b/files/ja/web/svg/element/tspan/index.html @@ -38,39 +38,39 @@ translation_of: Web/SVG/Element/tspan <dl> <dt>{{SVGAttr("x")}}</dt> <dd>テキストのベースラインの開始点の X 座標です。<br> - <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>既定値: none; Animatable</em>: <strong>yes</strong></small></dd> + <small><em>値の型</em>: <a href="/ja/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/ja/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>既定値: none; Animatable</em>: <strong>yes</strong></small></dd> <dt>{{SVGAttr("y")}}</dt> <dd>テキストのベースラインの開始点の Y 座標です。<br> - <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>既定値: none; Animatable</em>: <strong>yes</strong></small></dd> + <small><em>値の型</em>: <a href="/ja/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/ja/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>既定値: none; Animatable</em>: <strong>yes</strong></small></dd> <dt>{{SVGAttr("dx")}}</dt> <dd>テキストの位置を直前のテキスト要素から水平方向にずらします。<br> - <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <small><em>値の型</em>: <a href="/ja/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/ja/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> <dt>{{SVGAttr("dy")}}</dt> <dd>テキストの位置を直前のテキスト要素から垂直方向にずらします。<br> - <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>既定値: none; Animatable</em>: <strong>yes</strong></small></dd> + <small><em>値の型</em>: <a href="/ja/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/ja/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>既定値: none; Animatable</em>: <strong>yes</strong></small></dd> <dt>{{SVGAttr("rotate")}}</dt> <dd>それぞれの文字の向きを回転します。文字ごとに個別に回転させることができます。<br> - <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#List-of-Ts"><strong><list-of-number></strong></a> ; <em>既定値</em>: none; <em>Animatable</em>: <strong>yes</strong></small></dd> + <small><em>値の型</em>: <a href="/ja/docs/Web/SVG/Content_type#List-of-Ts"><strong><list-of-number></strong></a> ; <em>既定値</em>: none; <em>Animatable</em>: <strong>yes</strong></small></dd> <dt>{{SVGAttr("lengthAdjust")}}</dt> <dd>テキストを<code>textLength</code> 属性で定義された幅に合わせるために伸縮する方法です。<br> <small><em>値の型</em>: <code>spacing</code>|<code>spacingAndGlyphs</code>; <em>既定値</em>: <code>spacing</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> <dt>{{SVGAttr("textLength")}}</dt> <dd>テキストを伸縮して合わせる幅です。<br> - <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>既定値</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <small><em>値の型</em>: <a href="/ja/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/ja/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>既定値</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> </dl> <h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3> <dl> - <dt><a href="/docs/Web/SVG/Attribute/Core">コア属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Core">コア属性</a></dt> <dd><small>特に: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> - <dt><a href="/docs/Web/SVG/Attribute/Styling">スタイル属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Styling">スタイル属性</a></dt> <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> - <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">条件処理属性</a></dt> + <dt><a href="/ja/docs/Web/SVG/Attribute/Conditional_Processing">条件処理属性</a></dt> <dd><small>特に: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> <dt>Event Attributes</dt> - <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">グローバルイベント属性</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">グラフィックイベント属性</a></small></dd> - <dt><a href="/docs/Web/SVG/Attribute/Presentation">プレゼンテーション属性</a></dt> + <dd><small><a href="/ja/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">グローバルイベント属性</a>, <a href="/ja/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">グラフィックイベント属性</a></small></dd> + <dt><a href="/ja/docs/Web/SVG/Attribute/Presentation">プレゼンテーション属性</a></dt> <dd><small>特に: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('dominant-baseline')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr('text-anchor')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> <dt>Aria 属性</dt> <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> diff --git a/files/ja/web/svg/index.html b/files/ja/web/svg/index.html index bc2f471ea8..91fc84d703 100644 --- a/files/ja/web/svg/index.html +++ b/files/ja/web/svg/index.html @@ -22,7 +22,7 @@ translation_of: Web/SVG <p class="summary" style="border-top-width: 0; padding-top: 0;"><span class="seoSummary"><strong>Scalable Vector Graphics (SVG)</strong> は、二次元ベースの<a class="external" href="https://ja.wikipedia.org/wiki/ベクタ形式">ベクター形式</a>のための <a href="/ja/docs/Web/XML" title="XML">XML</a> に基づくマークアップ言語です。そのため、どんな大きさでもきれいにレンダリングできる画像を記述するためのテキストベースのオープンなウェブ標準であり、特に他のウェブ標準、例えば <a href="/ja/docs/Web/CSS">CSS</a>, <a href="/ja/docs/Web/API/Document_Object_Model">DOM</a>, <a href="/ja/docs/Web/JavaScript">JavaScript</a>, <a href="/ja/docs/Web/SVG/SVG_animation_with_SMIL">SMIL</a> などとうまく機能するように設計されています。 SVG は本質的に、グラフィックに対するもので、テキストに対する <a href="/ja/docs/Web/HTML">HTML</a> のような位置づけです。</span></p> -<p>SVG 画像と関連する振る舞いは <span class="seoSummary"><a href="/en-US/docs/Web/XML">XML</a></span> のテキストファイルに定義されるので、検索したり、インデックスをつけたり、スクリプトで操作したり、圧縮したりすることができます。加えて、これはあらゆるテキストエディターやドローソフトで作成したり編集したりできることを意味します。</p> +<p>SVG 画像と関連する振る舞いは <span class="seoSummary"><a href="/ja/docs/Web/XML">XML</a></span> のテキストファイルに定義されるので、検索したり、インデックスをつけたり、スクリプトで操作したり、圧縮したりすることができます。加えて、これはあらゆるテキストエディターやドローソフトで作成したり編集したりできることを意味します。</p> <p>旧来の {{Glossary("JPEG")}} や {{Glossary("PNG")}} のようなビットマップ画像形式と比較して、 SVG 形式のベクター画像は、品質を損なうことなく任意の大きさでレンダリングすることができ、テキストを更新することで、グラフィックエディターを使用せずに簡単にローカライズすることができます。適切なライブラリを使用すれば、 SVG ファイルをその場でローカライズすることも可能です。</p> diff --git a/files/ja/web/svg/namespaces_crash_course/index.html b/files/ja/web/svg/namespaces_crash_course/index.html index e2d0f49690..75ef5bdc51 100644 --- a/files/ja/web/svg/namespaces_crash_course/index.html +++ b/files/ja/web/svg/namespaces_crash_course/index.html @@ -7,7 +7,7 @@ tags: translation_of: Web/SVG/Namespaces_Crash_Course --- <h3 id=".E5.B0.8E.E5.85.A5" name=".E5.B0.8E.E5.85.A5">導入</h3> -<p><a href="ja/XML">XML</a> の派生言語として、 <a href="ja/SVG">SVG</a> は名前空間付けられています。もしあなたが SVG コンテンツを作成する予定なら名前空間の概念と使い方を理解することは重要です。 Firefox 1.5 リリースより前の幾つかのバージョンの SVG ビューワは残念ながら名前空間に対して十分な注意を払いませんが、 とても厳格でなくてならない <a href="ja/Gecko">Gecko</a> ベースのブラウザのようなユーザエージェントが複数の XML 派生言語をサポートするために不可欠です。今、名前空間を理解するためにいくらかの時間をとり、将来頭を悩ませる時間を節約しましょう。</p> +<p><a href="/ja/XML">XML</a> の派生言語として、 <a href="/ja/SVG">SVG</a> は名前空間付けられています。もしあなたが SVG コンテンツを作成する予定なら名前空間の概念と使い方を理解することは重要です。 Firefox 1.5 リリースより前の幾つかのバージョンの SVG ビューワは残念ながら名前空間に対して十分な注意を払いませんが、 とても厳格でなくてならない <a href="/ja/Gecko">Gecko</a> ベースのブラウザのようなユーザエージェントが複数の XML 派生言語をサポートするために不可欠です。今、名前空間を理解するためにいくらかの時間をとり、将来頭を悩ませる時間を節約しましょう。</p> <h3 id=".E8.83.8C.E6.99.AF" name=".E8.83.8C.E6.99.AF">背景</h3> <p>異なった種類の XML ベースのコンテンツが同じ XML ファイルの中で一緒に混ざるのを可能にするのことは W3C の長年の目標です。 例えば、SVG と MathML は直接 XHTML ベースの科学ドキュメントに組み込まれるかもしれません。このようなコンテンツ タイプを混ぜることが可能にすることは、多くの利点がありますが、解決するために非常に大問題を要しました。</p> <p>当然、それぞれのXML 派生言語は仕様で述べたマークアップタグ名の意味を定義します。 1つの XML ドキュメントに異なった XML 派生言語のコンテンツを混ぜることによる問題は 別の派生言語が 1つの派生言語によって定義されたタグと同じ名前のタグを定義するかもしれないということです。 例えば、XHTMLとSVGの両方には、<code><title></code> タグがあります。 事実、ユーザエージェントはどうやって XML コンテンツが(あらかじめ)知っているものであるとき時に、単なる未知の任意のタグ名を含む無意味な XML ファイルでないと言えますか?</p> @@ -148,4 +148,4 @@ image.setAttributeNS(XLink_NS, 'xlink:href', 'flower.png'); </pre> <p>あなたが特定のドキュメントでそれら全ての名前空間を使用しなくても、名前空間宣言を含んで全く害はありません。 後日、未使用の名前空間の1つをコンテンツに結局加えるなら、それはいくつかの煩わしいエラーから救ってくれるかもしれません。</p> <h3 id=".E5.AE.8C.E5.85.A8.E3.81.AA.E4.BE.8B" name=".E5.AE.8C.E5.85.A8.E3.81.AA.E4.BE.8B">完全な例</h3> -<p>完全な例は <a href="ja/SVG/Namespaces_Crash_Course/Example">SVG:Namespaces Crash Course:Example</a> を参照してください。</p> +<p>完全な例は <a href="/ja/SVG/Namespaces_Crash_Course/Example">SVG:Namespaces Crash Course:Example</a> を参照してください。</p> diff --git a/files/ja/web/svg/scripting/index.html b/files/ja/web/svg/scripting/index.html index 91830c66d4..37f369f7ca 100644 --- a/files/ja/web/svg/scripting/index.html +++ b/files/ja/web/svg/scripting/index.html @@ -53,6 +53,6 @@ translation_of: Web/SVG/Scripting <p>Mozilla では <code>svgElement.style.setProperty("fill-opacity", "0.0")</code> 関数は <code>SYNTAX ERR</code> という DOMException を投げます。この挙動は W3C によって DOM Level 2 Style 仕様の中で定められています。<code>setProperty</code> 関数は 3 つのパラメタを持つ関数として定義されています。上記は <code>'svgElement.style.setProperty("fill-opacity", "0.0", "")'</code> で置き換えられます。こちらの方がより標準に一致しています。 </p> <h3 id=".E3.83.AA.E3.83.B3.E3.82.AF" name=".E3.83.AA.E3.83.B3.E3.82.AF"> リンク </h3> -<p><a href="ja/SVG">SVG ホームページ</a> +<p><a href="/ja/SVG">SVG ホームページ</a> </p><p><a class="external" href="http://wiki.svg.org/Main_Page#Scripting_and_Programming">SVG wiki on Scripting and Programming</a> </p>{{ languages( { "en": "en/SVG/Scripting" } ) }} 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 0d70f03fe8..b33dd3c042 100644 --- a/files/ja/web/svg/svg_animation_with_smil/index.html +++ b/files/ja/web/svg/svg_animation_with_smil/index.html @@ -108,7 +108,7 @@ translation_of: Web/SVG/SVG_animation_with_SMIL </html> </pre> -<p><a href="https://developer.mozilla.org/samples/svg/svganimdemo1.html">View live sample</a></p> +<p><a href="/samples/svg/svganimdemo1.html">View live sample</a></p> <h3 id="例_2_曲線状の移動">例 2: 曲線状の移動</h3> diff --git a/files/ja/web/svg/tutorial/getting_started/index.html b/files/ja/web/svg/tutorial/getting_started/index.html index 184d127062..d382d76798 100644 --- a/files/ja/web/svg/tutorial/getting_started/index.html +++ b/files/ja/web/svg/tutorial/getting_started/index.html @@ -29,7 +29,7 @@ translation_of: Web/SVG/Tutorial/Getting_Started </svg> </pre> -<p>コードをコピーして、ファイル demo1.svg に貼り付けましょう。そして、ファイルを Firefox で開いてください。これは、下のスクリーンショットを表示するようレンダリングします。(Firefox のユーザは <a class="external" href="https://developer.mozilla.org/@api/deki/files/4571/=svgdemo1.xml" title="https://developer.mozilla.org/@api/deki/files/4571/=svgdemo1.xml">こちら</a> をクリックしてください)</p> +<p>コードをコピーして、ファイル demo1.svg に貼り付けましょう。そして、ファイルを Firefox で開いてください。これは、下のスクリーンショットを表示するようレンダリングします。(Firefox のユーザは <a class="external" href="/@api/deki/files/4571/=svgdemo1.xml" title="https://developer.mozilla.org/@api/deki/files/4571/=svgdemo1.xml">こちら</a> をクリックしてください)</p> <p><img alt="svgdemo1.png" class="default internal" src="/@api/deki/files/4928/=svgdemo1.png"></p> diff --git a/files/ja/web/svg/tutorial/other_content_in_svg/index.html b/files/ja/web/svg/tutorial/other_content_in_svg/index.html index 7fffed676b..50c381c8a1 100644 --- a/files/ja/web/svg/tutorial/other_content_in_svg/index.html +++ b/files/ja/web/svg/tutorial/other_content_in_svg/index.html @@ -21,7 +21,7 @@ translation_of: Web/SVG/Tutorial/Other_content_in_SVG xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"> <image x="90" y="-65" width="128" height="146" transform="rotate(45)" - xlink:href="https://developer.mozilla.org/static/img/favicon144.png"/> + xlink:href="/static/img/favicon144.png"/> </svg> </pre> diff --git a/files/ja/web/web_components/index.html b/files/ja/web/web_components/index.html index 79f4bbbe10..dac57aa0c2 100644 --- a/files/ja/web/web_components/index.html +++ b/files/ja/web/web_components/index.html @@ -31,7 +31,7 @@ translation_of: Web/Web_Components <p>Web Component を実装する基本的な流れは、以下に挙げてある通りです。</p> <ol> - <li>Web Component の機能を明示したクラスもしくは関数を作成します。クラスを使用するなら、ECMAScript 2015 のクラスの文法に従って下さい。 (詳細は<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">クラス</a>を参照して下さい。)</li> + <li>Web Component の機能を明示したクラスもしくは関数を作成します。クラスを使用するなら、ECMAScript 2015 のクラスの文法に従って下さい。 (詳細は<a href="/ja/docs/Web/JavaScript/Reference/Classes">クラス</a>を参照して下さい。)</li> <li>新しく作成したカスタム要素を登録します。{{domxref("CustomElementRegistry.define()")}} メソッドに、要素の名前、機能が明示されているクラスもしくは関数、またオプションでどの要素を継承するかを渡して下さい。</li> <li>必要なら、{{domxref("Element.attachShadow()")}} メソッドを使って、Shadow DOM をカスタム要素に紐付けます。通常の DOM メソッドを使って、子要素やイベントリスナーなどをShadow DOM に追加して下さい。</li> <li>必要なら、{{htmlelement("template")}} と {{htmlelement("slot")}} を使って、HTML テンプレートを定義します。通常の DOM メソッドを再度使って、テンプレートをクローンし、Shadow DOM に紐付けてください。</li> @@ -41,11 +41,11 @@ translation_of: Web/Web_Components <h2 id="チュートリアル">チュートリアル</h2> <dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">カスタム要素を使ってみよう</a></dt> + <dt><a href="/ja/docs/Web/Web_Components/Using_custom_elements">カスタム要素を使ってみよう</a></dt> <dd>単純な Web Component を作成するために、カスタム要素の機能の使い方を紹介したガイドラインです。それ以外にも、ライフサイクルコールバックやその他の高度な機能の中を覗いていきます。</dd> - <dt><a href="https://developer.mozilla.org/ja/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM を使ってみよう</a></dt> + <dt><a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM を使ってみよう</a></dt> <dd>Shadow DOM の基礎を眺めるガイドラインです。 Shadow DOM を要素にどう紐付けるか、Shadow DOM ツリーにどう追加するか、どうスタイルするかなどを紹介しています。</dd> - <dt><a href="https://developer.mozilla.org/ja/docs/Web/Web_Components/Using_templates_and_slots">テンプレートとスロットを使ってみよう</a></dt> + <dt><a href="/ja/docs/Web/Web_Components/Using_templates_and_slots">テンプレートとスロットを使ってみよう</a></dt> <dd>{{htmlelement("template")}} と {{htmlelement("slot")}} 要素を使って、再利用可能な HTML 構造体の定義と使用方法を紹介したガイドラインです。 </dd> </dl> @@ -58,7 +58,7 @@ translation_of: Web/Web_Components <dd>カスタム要素に関わる機能が含まれています。中でも注目すべきは、 {{domxref("CustomElementRegistry.define()")}} メソッドで、新しいカスタム要素を登録するために用います。それにより、カスタム要素をドキュメント内で使用できるようになります。</dd> <dt>{{domxref("Window.customElements")}}</dt> <dd><code>CustomElementRegistry</code> オブジェクトへの参照を返します。</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks">Life cycle callbacks</a></dt> + <dt><a href="/ja/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks">Life cycle callbacks</a></dt> <dd>カスタム要素のクラス定義の中で定義された特別なコールバック関数で、挙動に影響を与えます。 <ul> <li><code>connectedCallback</code>: カスタム要素がドキュメントの DOM に初めて接続したときに呼び出されます。</li> @@ -85,9 +85,9 @@ translation_of: Web/Web_Components <dd>カスタム要素に関連する擬似クラス: <ul> <li>{{cssxref(":defined")}}: ビルトイン要素と <code>CustomElementRegistry.define()</code> で定義されるカスタム要素を含む、あらゆる定義済みの要素にマッチします。</li> - <li>{{cssxref(":host")}}: 使われている CSS を含む、<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> のシャドーホストを選択します。</li> - <li>{{cssxref(":host()")}}: 使われている CSS を含む、<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> のシャドーホストを選択します。 (Shadow DOM の内側からカスタム要素を選択することができます。) ただし、関数のパラメータとして渡されるセレクタがシャドーホストに一致している場合に限ります。</li> - <li>{{cssxref(":host-context()")}}: 使われている CSS を含む、<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> のシャドーホストを選択します。 (Shadow DOM の内側からカスタム要素を選択することができます。) ただし、関数のパラメータとして渡されるセレクタが DOM 階層内のシャドーホストの先祖要素に一致している場合に限ります。</li> + <li>{{cssxref(":host")}}: 使われている CSS を含む、<a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> のシャドーホストを選択します。</li> + <li>{{cssxref(":host()")}}: 使われている CSS を含む、<a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> のシャドーホストを選択します。 (Shadow DOM の内側からカスタム要素を選択することができます。) ただし、関数のパラメータとして渡されるセレクタがシャドーホストに一致している場合に限ります。</li> + <li>{{cssxref(":host-context()")}}: 使われている CSS を含む、<a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> のシャドーホストを選択します。 (Shadow DOM の内側からカスタム要素を選択することができます。) ただし、関数のパラメータとして渡されるセレクタが DOM 階層内のシャドーホストの先祖要素に一致している場合に限ります。</li> </ul> </dd> </dl> @@ -129,7 +129,7 @@ translation_of: Web/Web_Components <dd>Contains an HTML fragment that is not rendered when a containing document is initially loaded, but can be displayed at runtime using JavaScript, mainly used as the basis of custom element structures. The associated DOM interface is {{domxref("HTMLTemplateElement")}}.</dd> <dt>{{htmlelement("slot")}}</dt> <dd>A placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together. The associated DOM interface is {{domxref("HTMLSlotElement")}}.</dd> - <dt>The <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot">slot</a></code> global HTML attribute</dt> + <dt>The <code><a href="/ja/docs/Web/HTML/Global_attributes/slot">slot</a></code> global HTML attribute</dt> <dd>Assigns a slot in a shadow DOM shadow tree to an element.</dd> <dt>{{domxref("Slotable")}}</dt> <dd>A mixin implemented by both {{domxref("Element")}} and {{domxref("Text")}} nodes, defining features that allow them to become the contents of an {{htmlelement("slot")}} element. The mixin defines one attribute, {{domxref("Slotable.assignedSlot")}}, which returns a reference to the slot the node is inserted in.</dd> @@ -173,22 +173,22 @@ translation_of: Web/Web_Components <tr> <td>{{SpecName("HTML WHATWG","custom-elements.html#custom-elements","custom elements")}}</td> <td>{{Spec2('HTML WHATWG')}}</td> - <td><a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">HTML Custom Elements</a> の定義です。</td> + <td><a href="/ja/docs/Web/Web_Components/Using_custom_elements">HTML Custom Elements</a> の定義です。</td> </tr> <tr> <td>{{SpecName("DOM WHATWG","#shadow-trees","shadow trees")}}</td> <td>{{Spec2('DOM WHATWG')}}</td> - <td><a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> の定義です。</td> + <td><a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> の定義です。</td> </tr> <tr> <td>{{SpecName("HTML Imports", "", "")}}</td> <td>{{Spec2("HTML Imports")}}</td> - <td><a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports">HTML Imports</a> の最初の定義です。</td> + <td><a href="/ja/docs/Web/Web_Components/HTML_Imports">HTML Imports</a> の最初の定義です。</td> </tr> <tr> <td>{{SpecName("Shadow DOM", "", "")}}</td> <td>{{Spec2("Shadow DOM")}}</td> - <td><a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> の最初の定義です。</td> + <td><a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> の最初の定義です。</td> </tr> </tbody> </table> diff --git a/files/ja/web/web_components/using_shadow_dom/index.html b/files/ja/web/web_components/using_shadow_dom/index.html index 3a990d1953..78d1a05317 100644 --- a/files/ja/web/web_components/using_shadow_dom/index.html +++ b/files/ja/web/web_components/using_shadow_dom/index.html @@ -13,7 +13,7 @@ translation_of: Web/Web_Components/Using_shadow_DOM <h2 id="High-level_view">High-level view</h2> -<p>この記事では <a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">DOM (Document Object Model)</a> —ドキュメントにある要素やテキストを表現するノードによって構成された木構造 — に親しんでいる前提で説明します。例として以下の HTML フラグメントを考えます。 </p> +<p>この記事では <a href="/ja/docs/Web/API/Document_Object_Model/Introduction">DOM (Document Object Model)</a> —ドキュメントにある要素やテキストを表現するノードによって構成された木構造 — に親しんでいる前提で説明します。例として以下の HTML フラグメントを考えます。 </p> <pre class="brush: html"><!DOCTYPE html> <html> @@ -181,7 +181,7 @@ wrapper.appendChild(info);</pre> <h3 id="カスタム要素の使用">カスタム要素の使用</h3> -<p>クラスを定義すると、定義したようにカスタム要素を使用することができます。(<a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Using custom elements</a>)</p> +<p>クラスを定義すると、定義したようにカスタム要素を使用することができます。(<a href="/ja/docs/Web/Web_Components/Using_custom_elements">Using custom elements</a>)</p> <pre class="brush: js">// Define the new element customElements.define('popup-info', PopUpInfo);</pre> @@ -212,7 +212,7 @@ shadow.appendChild(linkElem);</pre> <h2 id="参考">参考</h2> <ul> - <li><a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Using custom elements</a></li> - <li><a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Using templates and slots</a></li> + <li><a href="/ja/docs/Web/Web_Components/Using_custom_elements">Using custom elements</a></li> + <li><a href="/ja/docs/Web/Web_Components/Using_templates_and_slots">Using templates and slots</a></li> </ul> </div> diff --git a/files/ja/web/web_components/using_templates_and_slots/index.html b/files/ja/web/web_components/using_templates_and_slots/index.html index 71f1ac7ca7..016ad83ce5 100644 --- a/files/ja/web/web_components/using_templates_and_slots/index.html +++ b/files/ja/web/web_components/using_templates_and_slots/index.html @@ -106,8 +106,8 @@ document.body.appendChild(templateContent);</pre> <p>これからのコードは {{htmlelement("slot")}} を {{htmlelement("template")}} と共に使用する方法の例です。以下の2点を目指す JavaScript です。</p> <ul> - <li><a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> の中で <strong><code><element-details></code></strong> 要素を <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">slot</a> を用いて作ること。</li> - <li><strong><code><element-details></code></strong> 要素を、その <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> と一緒にレンダリングされるように作ること。つまり、要素の内容が <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">slots</a> の中身に代入されるようになります。</li> + <li><a href="/ja/docs/Web/API/ShadowRoot">shadow root</a> の中で <strong><code><element-details></code></strong> 要素を <a href="/ja/docs/Web/HTML/Element/slot#named-slot">slot</a> を用いて作ること。</li> + <li><strong><code><element-details></code></strong> 要素を、その <a href="/ja/docs/Web/API/ShadowRoot">shadow root</a> と一緒にレンダリングされるように作ること。つまり、要素の内容が <a href="/ja/docs/Web/HTML/Element/slot#named-slot">slots</a> の中身に代入されるようになります。</li> </ul> <p>{{htmlelement("slot")}} 要素は {{htmlelement("template")}} 要素なしで使用することが可能です。例えば、 {{HTMLElement("div")}} 要素の中で宣言しても Shadow DOM で使用した場合と同様にプレースホルダーとしての役割は果たします。しかし、{{HTMLElement("template")}} 要素の中で使用する方がより一般的で実用的です。</p> @@ -120,7 +120,7 @@ document.body.appendChild(templateContent);</pre> <h3 id="template_をスロットと共に作る">template をスロットと共に作る</h3> -<p>まず最初に{{htmlelement("template")}} 要素の中に {{htmlelement("slot")}} 要素を作成し、新しい "element-details-template" と名付けた<a href="/en-US/docs/Web/API/DocumentFragment">フラグメント</a>を作ります。</p> +<p>まず最初に{{htmlelement("template")}} 要素の中に {{htmlelement("slot")}} 要素を作成し、新しい "element-details-template" と名付けた<a href="/ja/docs/Web/API/DocumentFragment">フラグメント</a>を作ります。</p> <pre class="brush: html"><template id="element-details-template"> <style> @@ -160,12 +160,12 @@ document.body.appendChild(templateContent);</pre> <li><code><slot name="attributes"></code></li> </ul> </li> - <li>{{HTMLElement("template")}} の中で各 <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">slot</a> は{{HTMLElement("details")}} 要素の中に実装されています。</li> + <li>{{HTMLElement("template")}} の中で各 <a href="/ja/docs/Web/HTML/Element/slot#named-slot">slot</a> は{{HTMLElement("details")}} 要素の中に実装されています。</li> </ul> <h3 id="<template>_から_<element-details>_要素を作る"><template> から <element-details> 要素を作る</h3> -<p>次に <strong><code><element-details></code></strong> と名付けた新しいカスタム要素を作りましょう。 上で確認した簡単な例と同様に、{{DOMXref("Element.attachShadow")}} を利用してカスタム要素に <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> を追加します。</p> +<p>次に <strong><code><element-details></code></strong> と名付けた新しいカスタム要素を作りましょう。 上で確認した簡単な例と同様に、{{DOMXref("Element.attachShadow")}} を利用してカスタム要素に <a href="/ja/docs/Web/API/ShadowRoot">shadow root</a> を追加します。</p> <pre class="brush: js">customElements.define('element-details', class extends HTMLElement { @@ -208,9 +208,9 @@ document.body.appendChild(templateContent);</pre> <p>このコードについて以下の点に注意してください。</p> <ul> - <li>２つの <strong><code><element-details></code></strong> 要素が使用されており、いずれも {{htmlattrxref("slot")}} 属性を <code>"element-name"</code> および <code>"description"</code> と指定することで対応する <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">slot</a> を参照しています。</li> - <li>1つ目の <strong><code><element-details></code></strong> 要素でのみ <code>"attributes"</code> と名付けられた <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">slot</a> を参照しています。2個目の <code><strong><element-details</strong>></code> 要素では参照していません。</li> - <li>1つ目の <code><<strong>element-details></strong></code> 要素は {{HTMLElement("dl")}} 要素を用いて <code>"attributes"</code> と名付けられた <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">slot</a> を参照しています。</li> + <li>２つの <strong><code><element-details></code></strong> 要素が使用されており、いずれも {{htmlattrxref("slot")}} 属性を <code>"element-name"</code> および <code>"description"</code> と指定することで対応する <a href="/ja/docs/Web/HTML/Element/slot#named-slot">slot</a> を参照しています。</li> + <li>1つ目の <strong><code><element-details></code></strong> 要素でのみ <code>"attributes"</code> と名付けられた <a href="/ja/docs/Web/HTML/Element/slot#named-slot">slot</a> を参照しています。2個目の <code><strong><element-details</strong>></code> 要素では参照していません。</li> + <li>1つ目の <code><<strong>element-details></strong></code> 要素は {{HTMLElement("dl")}} 要素を用いて <code>"attributes"</code> と名付けられた <a href="/ja/docs/Web/HTML/Element/slot#named-slot">slot</a> を参照しています。</li> </ul> <h3 id="スタイルを追加する">スタイルを追加する</h3> @@ -236,11 +236,11 @@ document.body.appendChild(templateContent);</pre> <p>以下のことに着目してください。</p> <ul> - <li>ドキュメント内で <strong><code><element-details></code></strong> 要素のインスタンスは {{HTMLElement("details")}} 要素を直接使用しませんが、 <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> が {{HTMLElement("details")}} を生成することでレンダリングされます。</li> - <li>レンダリングされた {{HTMLElement("details")}} の出力結果で、<strong><code><element-details></code></strong> 要素のコンテンツは <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> から<a href="/en-US/docs/Web/HTML/Element/slot#named-slot">名前付きスロット</a>を埋め込みます。言い換えれば、<strong><code><element-details></code></strong> 要素のDOMツリーは <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> のコンテンツと共に構成されます。</li> - <li>両方の <strong><code><element-details></code></strong> 要素おいて、<code>"attributes"</code> 名前付きスロットが配置される前に、 <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> から自動的に <strong>Attributes </strong>見出しは自動的に追加されます。</li> - <li>最初の <strong><code><element-details></code></strong> は <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> から<a href="/en-US/docs/Web/HTML/Element/slot#named-slot">名前付きスロット</a>を明示的に参照している {{HTMLElement("dl")}} 要素を持つため、{{HTMLElement("dl")}} のコンテンツは <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> から <code>"attributes"</code> <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">名前付きスロット</a>を置き換えています。</li> - <li>二つ目の <strong><code><element-details></code></strong> は <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> から<a href="/en-US/docs/Web/HTML/Element/slot#named-slot">名前付きスロット</a>を明示的に参照していないため、<a href="/en-US/docs/Web/HTML/Element/slot#named-slot">名前付きスロット</a>のコンテンツは <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> のデフォルトのコンテンツが埋め込まれます。</li> + <li>ドキュメント内で <strong><code><element-details></code></strong> 要素のインスタンスは {{HTMLElement("details")}} 要素を直接使用しませんが、 <a href="/ja/docs/Web/API/ShadowRoot">shadow root</a> が {{HTMLElement("details")}} を生成することでレンダリングされます。</li> + <li>レンダリングされた {{HTMLElement("details")}} の出力結果で、<strong><code><element-details></code></strong> 要素のコンテンツは <a href="/ja/docs/Web/API/ShadowRoot">shadow root</a> から<a href="/ja/docs/Web/HTML/Element/slot#named-slot">名前付きスロット</a>を埋め込みます。言い換えれば、<strong><code><element-details></code></strong> 要素のDOMツリーは <a href="/ja/docs/Web/API/ShadowRoot">shadow root</a> のコンテンツと共に構成されます。</li> + <li>両方の <strong><code><element-details></code></strong> 要素おいて、<code>"attributes"</code> 名前付きスロットが配置される前に、 <a href="/ja/docs/Web/API/ShadowRoot">shadow root</a> から自動的に <strong>Attributes </strong>見出しは自動的に追加されます。</li> + <li>最初の <strong><code><element-details></code></strong> は <a href="/ja/docs/Web/API/ShadowRoot">shadow root</a> から<a href="/ja/docs/Web/HTML/Element/slot#named-slot">名前付きスロット</a>を明示的に参照している {{HTMLElement("dl")}} 要素を持つため、{{HTMLElement("dl")}} のコンテンツは <a href="/ja/docs/Web/API/ShadowRoot">shadow root</a> から <code>"attributes"</code> <a href="/ja/docs/Web/HTML/Element/slot#named-slot">名前付きスロット</a>を置き換えています。</li> + <li>二つ目の <strong><code><element-details></code></strong> は <a href="/ja/docs/Web/API/ShadowRoot">shadow root</a> から<a href="/ja/docs/Web/HTML/Element/slot#named-slot">名前付きスロット</a>を明示的に参照していないため、<a href="/ja/docs/Web/HTML/Element/slot#named-slot">名前付きスロット</a>のコンテンツは <a href="/ja/docs/Web/API/ShadowRoot">shadow root</a> のデフォルトのコンテンツが埋め込まれます。</li> </ul> <div class="hidden"> diff --git a/files/ja/web/xml/index.html b/files/ja/web/xml/index.html index 5c54c27742..8116e5f39c 100644 --- a/files/ja/web/xml/index.html +++ b/files/ja/web/xml/index.html @@ -12,6 +12,6 @@ translation_of: Web/XML --- <p>{{QuickLinksWithSubpages("/en-US/docs/Web/XML")}}{{Draft}}</p> -<p class="summary">The <strong>Extensible Markup Language</strong> is a strict serialisation of the <a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model</a>.</p> +<p class="summary">The <strong>Extensible Markup Language</strong> is a strict serialisation of the <a href="/ja/docs/Web/API/Document_Object_Model">Document Object Model</a>.</p> <p>{{LandingPageListSubpages}}</p> diff --git a/files/ja/web/xpath/axes/index.html b/files/ja/web/xpath/axes/index.html index fc379d42b4..3e7315f1de 100644 --- a/files/ja/web/xpath/axes/index.html +++ b/files/ja/web/xpath/axes/index.html @@ -11,7 +11,7 @@ translation_of: Web/XPath/Axes --- <p>{{ XsltRef() }} <a href="/ja/docs/Web/XPath">XPath</a> 仕様では 13 種類の軸 (Axis) が定められています。軸はコンテキストノードとの関連性を表し、ツリー上でのノードのコンテキストノードからの相対的な位置を示すのに用いられます。</p> -<p>XPath 式の使用に関するより詳しい情報は、 <a href="/ja/docs/Web/XSLT/Transforming_XML_with_XSLT">XSLT による XML の変換</a>の記事の最後の<a href="/en-US/docs/Web/XSLT/Transforming_XML_with_XSLT#for_further_reading">さらなる読み物</a>の節を参照してください。また、<a href="https://www.w3.org/TR/xpath-30/#axes">XPath 仕様書の 'axes' の節</a>も参照してください。</p> +<p>XPath 式の使用に関するより詳しい情報は、 <a href="/ja/docs/Web/XSLT/Transforming_XML_with_XSLT">XSLT による XML の変換</a>の記事の最後の<a href="/ja/docs/Web/XSLT/Transforming_XML_with_XSLT#for_further_reading">さらなる読み物</a>の節を参照してください。また、<a href="https://www.w3.org/TR/xpath-30/#axes">XPath 仕様書の 'axes' の節</a>も参照してください。</p> <dl> <dt><a href="/ja/docs/Web/XPath/Axes/ancestor">ancestor</a></dt> diff --git a/files/ja/web/xpath/comparison_with_css_selectors/index.html b/files/ja/web/xpath/comparison_with_css_selectors/index.html index faaa5ce0b5..0c0b166a3d 100644 --- a/files/ja/web/xpath/comparison_with_css_selectors/index.html +++ b/files/ja/web/xpath/comparison_with_css_selectors/index.html @@ -23,7 +23,7 @@ translation_of: Web/XPath/Comparison_with_CSS_selectors </thead> <tbody> <tr> - <td><a href="/en-US/docs/Web/XPath/Axes/ancestor"><code>ancestor</code></a>, <a href="/en-US/docs/Web/XPath/Axes/parent"><code>parent</code></a>, <a href="/en-US/docs/Web/XPath/Axes/preceding-sibling"><code>preceding-sibling</code></a> 軸</td> + <td><a href="/ja/docs/Web/XPath/Axes/ancestor"><code>ancestor</code></a>, <a href="/ja/docs/Web/XPath/Axes/parent"><code>parent</code></a>, <a href="/ja/docs/Web/XPath/Axes/preceding-sibling"><code>preceding-sibling</code></a> 軸</td> <td>{{CSSxRef(":has",":has()")}} セレクター {{experimental_inline}}</td> </tr> <tr> diff --git a/files/ja/web/xpath/introduction_to_using_xpath_in_javascript/index.html b/files/ja/web/xpath/introduction_to_using_xpath_in_javascript/index.html index 98c859da9e..b1d275a984 100644 --- a/files/ja/web/xpath/introduction_to_using_xpath_in_javascript/index.html +++ b/files/ja/web/xpath/introduction_to_using_xpath_in_javascript/index.html @@ -34,7 +34,7 @@ original_slug: Introduction_to_using_XPath_in_JavaScript <li><code>namespaceResolver</code>: <code>xpathExpression</code> に含まれるあらゆる名前空間接頭辞を渡され、その接頭辞に対応する名前空間 URI を表す文字列を返す関数です。この関数により、 XPath 式で使われている接頭辞と文書内で使われている接頭辞が異なっていたとしてもそれを変換することが可能になります。この関数は次のいずれかです。 <ul> - <li><code><a href="http://www.xulplanet.com/references/objref/XPathEvaluator.html">XPathEvaluator</a></code> オブジェクトの <code><a href="ja/DOM/document.createNSResolver">createNSResolver</a></code> メソッドにより<a href="#implementing_a_default_namespace_resolver">作成された</a>もの。ほとんどの場合はこれを使うべきでしょう。</li> + <li><code><a href="http://www.xulplanet.com/references/objref/XPathEvaluator.html">XPathEvaluator</a></code> オブジェクトの <code><a href="/ja/DOM/document.createNSResolver">createNSResolver</a></code> メソッドにより<a href="#implementing_a_default_namespace_resolver">作成された</a>もの。ほとんどの場合はこれを使うべきでしょう。</li> <li>HTML 文書の場合や、名前空間接頭辞が使われていない場合は <code>null</code> 。<code>xpathExpression</code> に名前空間接頭辞が含まれている場合に null を使うと、 <code>DOMException</code> が<code>NAMESPACE_ERR</code> コードと共に投げられるので注意してください。</li> <li>ユーザー定義のカスタム関数。詳しくは付録の<a href="#implementing_a_user_defined_namespace_resolver">ユーザー定義名前空間リゾルバーの使用</a>の節を参照してください。</li> </ul> @@ -248,7 +248,7 @@ while (thisHeading) { </people> </pre> -<p>拡張機能内で XML 文書の内容を取得できるようにするため、<code><a href="ja/XMLHttpRequest">XMLHttpRequest</a></code> オブジェクトを作成して文書を同期的に読み込みます。変数 <code>xmlDoc</code> には文書が <code><a href="ja/XMLDocument">XMLDocument</a></code> オブジェクトとして格納されるので、それに対して <code>evaluate</code> メソッドを使う事ができます。</p> +<p>拡張機能内で XML 文書の内容を取得できるようにするため、<code><a href="/ja/XMLHttpRequest">XMLHttpRequest</a></code> オブジェクトを作成して文書を同期的に読み込みます。変数 <code>xmlDoc</code> には文書が <code><a href="/ja/XMLDocument">XMLDocument</a></code> オブジェクトとして格納されるので、それに対して <code>evaluate</code> メソッドを使う事ができます。</p> <p>拡張機能の xul/js 文書で使用する JavaScript は以下の通りです。</p> diff --git a/files/ja/web/xslt/element/element/index.html b/files/ja/web/xslt/element/element/index.html index 4963fcf4c4..79b36498b4 100644 --- a/files/ja/web/xslt/element/element/index.html +++ b/files/ja/web/xslt/element/element/index.html @@ -30,7 +30,7 @@ translation_of: Web/XSLT/Element/element <dt><code>namespace</code></dt> <dd>出力要素の名前空間を指定します。</dd> <dt><code>use-attribute-sets</code></dt> - <dd><code>element</code> 要素の出力要素に適用される <a href="https://developer.mozilla.org/en-US/docs/Web/XSLT/attribute-set"><code>attribute-set</code> 要素</a>名のスペース区切りのリスト。適用された属性は、ネストされた属性要素によってオーバーライドできます。</dd> + <dd><code>element</code> 要素の出力要素に適用される <a href="/ja/docs/Web/XSLT/attribute-set"><code>attribute-set</code> 要素</a>名のスペース区切りのリスト。適用された属性は、ネストされた属性要素によってオーバーライドできます。</dd> </dl> <h3 id="Type" name="Type">タイプ</h3> diff --git a/files/ja/web/xslt/element/number/index.html b/files/ja/web/xslt/element/number/index.html index aaba95f2a2..1e33a8af19 100644 --- a/files/ja/web/xslt/element/number/index.html +++ b/files/ja/web/xslt/element/number/index.html @@ -45,7 +45,7 @@ translation_of: Web/XSLT/Element/number <dd> <dl> <dt><code>single</code></dt> - <dd>リスト内の項目のように、ノードを兄弟順に番号付けします。プロセッサは count 属性に一致する <a href="https://developer.mozilla.org/ja/docs/XSLT/Elements/en/Transforming_XML_with_XSLT/Mozilla_XSLT%2f%2fXPath_Reference/Axes/ancestor-or-self"><code>ancestor-or-self</code></a> 軸の最初のノードに移動し、そのノードとそれに先行するcount属性にも一致するすべての兄弟 (それが存在する場合は <code>from</code> 属性に一致すると停止する) をカウントします。一致するものが見つからない場合、シーケンスは空のリストになります。</dd> + <dd>リスト内の項目のように、ノードを兄弟順に番号付けします。プロセッサは count 属性に一致する <a href="/ja/docs/XSLT/Elements/en/Transforming_XML_with_XSLT/Mozilla_XSLT%2f%2fXPath_Reference/Axes/ancestor-or-self"><code>ancestor-or-self</code></a> 軸の最初のノードに移動し、そのノードとそれに先行するcount属性にも一致するすべての兄弟 (それが存在する場合は <code>from</code> 属性に一致すると停止する) をカウントします。一致するものが見つからない場合、シーケンスは空のリストになります。</dd> </dl> </dd> </dl> @@ -63,7 +63,7 @@ translation_of: Web/XSLT/Element/number <dd> <dl> <dt><code>any</code> (現時点ではサポートされていません)</dt> - <dd>レベルに関係なく、すべての一致するノードに順番に番号を付けます。 <a href="https://developer.mozilla.org/ja/docs/XSLT/Elements/en/Transforming_XML_with_XSLT/Mozilla_XSLT%2f%2fXPath_Reference/Axes/ancestor"><code>ancestor</code></a>、 <a href="https://developer.mozilla.org/ja/docs/XSLT/Elements/en/Transforming_XML_with_XSLT/Mozilla_XSLT%2f%2fXPath_Reference/Axes/self"><code>self</code></a>、および <a href="https://developer.mozilla.org/ja/docs/XSLT/Elements/en/Transforming_XML_with_XSLT/Mozilla_XSLT%2f%2fXPath_Reference/Axes/preceding"><code>preceding</code></a> 軸すべてが考慮されます。プロセッサは現在のノードから開始し、逆の文書順に進み、<code>from</code> 属性に一致する場合は停止します。 count属性に一致するものが見つからない場合、シーケンスは空のリストになります。このレベルは現時点ではサポートされていません。</dd> + <dd>レベルに関係なく、すべての一致するノードに順番に番号を付けます。 <a href="/ja/docs/XSLT/Elements/en/Transforming_XML_with_XSLT/Mozilla_XSLT%2f%2fXPath_Reference/Axes/ancestor"><code>ancestor</code></a>、 <a href="/ja/docs/XSLT/Elements/en/Transforming_XML_with_XSLT/Mozilla_XSLT%2f%2fXPath_Reference/Axes/self"><code>self</code></a>、および <a href="/ja/docs/XSLT/Elements/en/Transforming_XML_with_XSLT/Mozilla_XSLT%2f%2fXPath_Reference/Axes/preceding"><code>preceding</code></a> 軸すべてが考慮されます。プロセッサは現在のノードから開始し、逆の文書順に進み、<code>from</code> 属性に一致する場合は停止します。 count属性に一致するものが見つからない場合、シーケンスは空のリストになります。このレベルは現時点ではサポートされていません。</dd> </dl> </dd> </dl> diff --git a/files/ja/web/xslt/transforming_xml_with_xslt/for_further_reading/index.html b/files/ja/web/xslt/transforming_xml_with_xslt/for_further_reading/index.html index 87ecf2e669..ad01c7e38e 100644 --- a/files/ja/web/xslt/transforming_xml_with_xslt/for_further_reading/index.html +++ b/files/ja/web/xslt/transforming_xml_with_xslt/for_further_reading/index.html @@ -9,7 +9,7 @@ tags: - XSLT translation_of: Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading --- -<p><a href="/en-US/docs/Transforming_XML_with_XSLT">« Transforming XML with XSLT</a></p> +<p><a href="/ja/docs/Transforming_XML_with_XSLT">« Transforming XML with XSLT</a></p> <h2 id="Print" name="Print">印刷物</h2> diff --git a/files/ja/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.html b/files/ja/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.html index 759309026a..698ff02950 100644 --- a/files/ja/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.html +++ b/files/ja/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.html @@ -10,320 +10,320 @@ translation_of: Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Refe --- <p>次のリストは W3C の XSLT 1.0 勧告と、XPath 勧告に適したセクションの要素、axes、関数にアルファベット順に注釈をつけたものです。XSLT プロセッサの開発は進行中です。また、機能の拡張と共にこのドキュメントも更新されます。</p> -<h3 id=".E8.A6.81.E7.B4.A0" name=".E8.A6.81.E7.B4.A0"><a href="ja/XSLT/Elements">要素</a></h3> +<h3 id=".E8.A6.81.E7.B4.A0" name=".E8.A6.81.E7.B4.A0"><a href="/ja/XSLT/Elements">要素</a></h3> -<h4 id="xsl:apply-imports" name="xsl:apply-imports"><a href="ja/XSLT/apply-imports">xsl:apply-imports</a></h4> +<h4 id="xsl:apply-imports" name="xsl:apply-imports"><a href="/ja/XSLT/apply-imports">xsl:apply-imports</a></h4> <p><em>(対応済)</em></p> -<h4 id="xsl:apply-templates" name="xsl:apply-templates"><a href="ja/XSLT/apply-templates">xsl:apply-templates</a></h4> +<h4 id="xsl:apply-templates" name="xsl:apply-templates"><a href="/ja/XSLT/apply-templates">xsl:apply-templates</a></h4> <p><em>(対応済)</em></p> -<h4 id="xsl:attribute" name="xsl:attribute"><a href="ja/XSLT/attribute">xsl:attribute</a></h4> +<h4 id="xsl:attribute" name="xsl:attribute"><a href="/ja/XSLT/attribute">xsl:attribute</a></h4> <p><em>(対応済)</em></p> -<h4 id="xsl:attribute-set" name="xsl:attribute-set"><a href="ja/XSLT/attribute-set">xsl:attribute-set</a></h4> +<h4 id="xsl:attribute-set" name="xsl:attribute-set"><a href="/ja/XSLT/attribute-set">xsl:attribute-set</a></h4> <p><em>(対応済)</em></p> -<h4 id="xsl:call-template" name="xsl:call-template"><a href="ja/XSLT/call-template">xsl:call-template</a></h4> +<h4 id="xsl:call-template" name="xsl:call-template"><a href="/ja/XSLT/call-template">xsl:call-template</a></h4> <p><em>(対応済)</em></p> -<h4 id="xsl:choose" name="xsl:choose"><a href="ja/XSLT/choose">xsl:choose</a></h4> +<h4 id="xsl:choose" name="xsl:choose"><a href="/ja/XSLT/choose">xsl:choose</a></h4> <p><em>(対応済)</em></p> -<h4 id="xsl:comment" name="xsl:comment"><a href="ja/XSLT/comment">xsl:comment</a></h4> +<h4 id="xsl:comment" name="xsl:comment"><a href="/ja/XSLT/comment">xsl:comment</a></h4> <p><em>(対応済)</em></p> -<h4 id="xsl:copy" name="xsl:copy"><a href="ja/XSLT/copy">xsl:copy</a></h4> +<h4 id="xsl:copy" name="xsl:copy"><a href="/ja/XSLT/copy">xsl:copy</a></h4> <p><em>(対応済)</em></p> -<h4 id="xsl:copy-of" name="xsl:copy-of"><a href="ja/XSLT/copy-of">xsl:copy-of</a></h4> +<h4 id="xsl:copy-of" name="xsl:copy-of"><a href="/ja/XSLT/copy-of">xsl:copy-of</a></h4> <p><em>(対応済)</em></p> -<h4 id="xsl:decimal-format" name="xsl:decimal-format"><a href="ja/XSLT/decimal-format">xsl:decimal-format</a></h4> +<h4 id="xsl:decimal-format" name="xsl:decimal-format"><a href="/ja/XSLT/decimal-format">xsl:decimal-format</a></h4> <p><em>(対応済)</em></p> -<h4 id="xsl:element" name="xsl:element"><a href="ja/XSLT/element">xsl:element</a></h4> +<h4 id="xsl:element" name="xsl:element"><a href="/ja/XSLT/element">xsl:element</a></h4> <p><em>(対応済)</em></p> -<h4 id="xsl:fallback" name="xsl:fallback"><a href="ja/XSLT/fallback">xsl:fallback</a></h4> +<h4 id="xsl:fallback" name="xsl:fallback"><a href="/ja/XSLT/fallback">xsl:fallback</a></h4> <p><em>(非対応)</em></p> -<h4 id="xsl:for-each" name="xsl:for-each"><a href="ja/XSLT/for-each">xsl:for-each</a></h4> +<h4 id="xsl:for-each" name="xsl:for-each"><a href="/ja/XSLT/for-each">xsl:for-each</a></h4> <p><em>(対応済)</em></p> -<h4 id="xsl:if" name="xsl:if"><a href="ja/XSLT/if">xsl:if</a></h4> +<h4 id="xsl:if" name="xsl:if"><a href="/ja/XSLT/if">xsl:if</a></h4> <p><em>(対応済)</em></p> -<h4 id="xsl:import" name="xsl:import"><a href="ja/XSLT/import">xsl:import</a></h4> +<h4 id="xsl:import" name="xsl:import"><a href="/ja/XSLT/import">xsl:import</a></h4> <p><em>(ほとんど対応)</em></p> -<h4 id="xsl:include" name="xsl:include"><a href="ja/XSLT/include">xsl:include</a></h4> +<h4 id="xsl:include" name="xsl:include"><a href="/ja/XSLT/include">xsl:include</a></h4> <p><em>(対応済)</em></p> -<h4 id="xsl:key" name="xsl:key"><a href="ja/XSLT/key">xsl:key</a></h4> +<h4 id="xsl:key" name="xsl:key"><a href="/ja/XSLT/key">xsl:key</a></h4> <p><em>(対応済)</em></p> -<h4 id="xsl:message" name="xsl:message"><a href="ja/XSLT/message">xsl:message</a></h4> +<h4 id="xsl:message" name="xsl:message"><a href="/ja/XSLT/message">xsl:message</a></h4> <p><em>(対応済)</em></p> -<h4 id="xsl:namespace-alias" name="xsl:namespace-alias"><a href="ja/XSLT/namespace-alias">xsl:namespace-alias</a></h4> +<h4 id="xsl:namespace-alias" name="xsl:namespace-alias"><a href="/ja/XSLT/namespace-alias">xsl:namespace-alias</a></h4> <p><em>(非対応)</em></p> -<h4 id="xsl:number" name="xsl:number"><a href="ja/XSLT/number">xsl:number</a></h4> +<h4 id="xsl:number" name="xsl:number"><a href="/ja/XSLT/number">xsl:number</a></h4> <p><em>(一部対応)</em></p> -<h4 id="xsl:otherwise" name="xsl:otherwise"><a href="ja/XSLT/otherwise">xsl:otherwise</a></h4> +<h4 id="xsl:otherwise" name="xsl:otherwise"><a href="/ja/XSLT/otherwise">xsl:otherwise</a></h4> <p><em>(対応済)</em></p> -<h4 id="xsl:output" name="xsl:output"><a href="ja/XSLT/output">xsl:output</a></h4> +<h4 id="xsl:output" name="xsl:output"><a href="/ja/XSLT/output">xsl:output</a></h4> <p><em>(一部対応)</em></p> -<h4 id="xsl:param" name="xsl:param"><a href="ja/XSLT/param">xsl:param</a></h4> +<h4 id="xsl:param" name="xsl:param"><a href="/ja/XSLT/param">xsl:param</a></h4> <p><em>(対応済)</em></p> -<h4 id="xsl:preserve-space" name="xsl:preserve-space"><a href="ja/XSLT/preserve-space">xsl:preserve-space</a></h4> +<h4 id="xsl:preserve-space" name="xsl:preserve-space"><a href="/ja/XSLT/preserve-space">xsl:preserve-space</a></h4> <p><em>(対応済)</em></p> -<h4 id="xsl:processing-instruction" name="xsl:processing-instruction"><a href="ja/XSLT/processing-instruction">xsl:processing-instruction</a></h4> +<h4 id="xsl:processing-instruction" name="xsl:processing-instruction"><a href="/ja/XSLT/processing-instruction">xsl:processing-instruction</a></h4> -<h4 id="xsl:sort" name="xsl:sort"><a href="ja/XSLT/sort">xsl:sort</a></h4> +<h4 id="xsl:sort" name="xsl:sort"><a href="/ja/XSLT/sort">xsl:sort</a></h4> <p><em>(対応済)</em></p> -<h4 id="xsl:strip-space" name="xsl:strip-space"><a href="ja/XSLT/strip-space">xsl:strip-space</a></h4> +<h4 id="xsl:strip-space" name="xsl:strip-space"><a href="/ja/XSLT/strip-space">xsl:strip-space</a></h4> <p><em>(対応済)</em></p> -<h4 id="xsl:stylesheet" name="xsl:stylesheet"><a href="ja/XSLT/stylesheet">xsl:stylesheet</a></h4> +<h4 id="xsl:stylesheet" name="xsl:stylesheet"><a href="/ja/XSLT/stylesheet">xsl:stylesheet</a></h4> <p><em>(一部対応)</em></p> -<h4 id="xsl:template" name="xsl:template"><a href="ja/XSLT/template">xsl:template</a></h4> +<h4 id="xsl:template" name="xsl:template"><a href="/ja/XSLT/template">xsl:template</a></h4> <p><em>(対応済)</em></p> -<h4 id="xsl:text" name="xsl:text"><a href="ja/XSLT/text">xsl:text</a></h4> +<h4 id="xsl:text" name="xsl:text"><a href="/ja/XSLT/text">xsl:text</a></h4> <p><em>(一部対応)</em></p> -<h4 id="xsl:transform" name="xsl:transform"><a href="ja/XSLT/transform">xsl:transform</a></h4> +<h4 id="xsl:transform" name="xsl:transform"><a href="/ja/XSLT/transform">xsl:transform</a></h4> <p><em>(対応済)</em></p> -<h4 id="xsl:value-of" name="xsl:value-of"><a href="ja/XSLT/value-of">xsl:value-of</a></h4> +<h4 id="xsl:value-of" name="xsl:value-of"><a href="/ja/XSLT/value-of">xsl:value-of</a></h4> <p><em>(一部対応)</em></p> -<h4 id="xsl:variable" name="xsl:variable"><a href="ja/XSLT/variable">xsl:variable</a></h4> +<h4 id="xsl:variable" name="xsl:variable"><a href="/ja/XSLT/variable">xsl:variable</a></h4> <p><em>(対応済)</em></p> -<h4 id="xsl:when" name="xsl:when"><a href="ja/XSLT/when">xsl:when</a></h4> +<h4 id="xsl:when" name="xsl:when"><a href="/ja/XSLT/when">xsl:when</a></h4> <p><em>(対応済)</em></p> -<h4 id="xsl:with-param" name="xsl:with-param"><a href="ja/XSLT/with-param">xsl:with-param</a></h4> +<h4 id="xsl:with-param" name="xsl:with-param"><a href="/ja/XSLT/with-param">xsl:with-param</a></h4> <p><em>(対応済)</em></p> -<h3 id="Axes" name="Axes"><a href="ja/XPath/Axes">Axes</a></h3> +<h3 id="Axes" name="Axes"><a href="/ja/XPath/Axes">Axes</a></h3> -<h4 id="ancestor" name="ancestor"><a href="ja/XPath/Axes/ancestor">ancestor</a></h4> +<h4 id="ancestor" name="ancestor"><a href="/ja/XPath/Axes/ancestor">ancestor</a></h4> -<h4 id="ancestor-or-self" name="ancestor-or-self"><a href="ja/XPath/Axes/ancestor-or-self">ancestor-or-self</a></h4> +<h4 id="ancestor-or-self" name="ancestor-or-self"><a href="/ja/XPath/Axes/ancestor-or-self">ancestor-or-self</a></h4> -<h4 id="attribute" name="attribute"><a href="ja/XPath/Axes/attribute">attribute</a></h4> +<h4 id="attribute" name="attribute"><a href="/ja/XPath/Axes/attribute">attribute</a></h4> -<h4 id="child" name="child"><a href="ja/XPath/Axes/child">child</a></h4> +<h4 id="child" name="child"><a href="/ja/XPath/Axes/child">child</a></h4> -<h4 id="descendant" name="descendant"><a href="ja/XPath/Axes/descendant">descendant</a></h4> +<h4 id="descendant" name="descendant"><a href="/ja/XPath/Axes/descendant">descendant</a></h4> -<h4 id="descendant-or-self" name="descendant-or-self"><a href="ja/XPath/Axes/descendant-or-self">descendant-or-self</a></h4> +<h4 id="descendant-or-self" name="descendant-or-self"><a href="/ja/XPath/Axes/descendant-or-self">descendant-or-self</a></h4> -<h4 id="following" name="following"><a href="ja/XPath/Axes/following">following</a></h4> +<h4 id="following" name="following"><a href="/ja/XPath/Axes/following">following</a></h4> -<h4 id="following-sibling" name="following-sibling"><a href="ja/XPath/Axes/following-sibling">following-sibling</a></h4> +<h4 id="following-sibling" name="following-sibling"><a href="/ja/XPath/Axes/following-sibling">following-sibling</a></h4> -<h4 id="namespace" name="namespace"><a href="ja/XPath/Axes/namespace">namespace</a></h4> +<h4 id="namespace" name="namespace"><a href="/ja/XPath/Axes/namespace">namespace</a></h4> <dl> <dd><em>(非対応)</em></dd> </dl> -<h4 id="parent" name="parent"><a href="ja/XPath/Axes/parent">parent</a></h4> +<h4 id="parent" name="parent"><a href="/ja/XPath/Axes/parent">parent</a></h4> -<h4 id="preceding" name="preceding"><a href="ja/XPath/Axes/preceding">preceding</a></h4> +<h4 id="preceding" name="preceding"><a href="/ja/XPath/Axes/preceding">preceding</a></h4> -<h4 id="preceding-sibling" name="preceding-sibling"><a href="ja/XPath/Axes/preceding-sibling">preceding-sibling</a></h4> +<h4 id="preceding-sibling" name="preceding-sibling"><a href="/ja/XPath/Axes/preceding-sibling">preceding-sibling</a></h4> -<h4 id="self" name="self"><a href="ja/XPath/Axes/self">self</a></h4> +<h4 id="self" name="self"><a href="/ja/XPath/Axes/self">self</a></h4> -<h3 id=".E9.96.A2.E6.95.B0" name=".E9.96.A2.E6.95.B0"><a href="ja/XPath/Functions">関数</a></h3> +<h3 id=".E9.96.A2.E6.95.B0" name=".E9.96.A2.E6.95.B0"><a href="/ja/XPath/Functions">関数</a></h3> -<h4 id="boolean.28.29" name="boolean.28.29"><a href="ja/XPath/Functions/boolean">boolean()</a></h4> +<h4 id="boolean.28.29" name="boolean.28.29"><a href="/ja/XPath/Functions/boolean">boolean()</a></h4> <p><em>(対応済)</em></p> -<h4 id="ceiling.28.29" name="ceiling.28.29"><a href="ja/XPath/Functions/ceiling">ceiling()</a></h4> +<h4 id="ceiling.28.29" name="ceiling.28.29"><a href="/ja/XPath/Functions/ceiling">ceiling()</a></h4> <p><em>(対応済)</em></p> -<h4 id="concat.28.29" name="concat.28.29"><a href="ja/XPath/Functions/concat">concat()</a></h4> +<h4 id="concat.28.29" name="concat.28.29"><a href="/ja/XPath/Functions/concat">concat()</a></h4> <p><em>(対応済)</em></p> -<h4 id="contains.28.29" name="contains.28.29"><a href="ja/XPath/Functions/contains">contains()</a></h4> +<h4 id="contains.28.29" name="contains.28.29"><a href="/ja/XPath/Functions/contains">contains()</a></h4> <p><em>(対応済)</em></p> -<h4 id="count.28.29" name="count.28.29"><a href="ja/XPath/Functions/count">count()</a></h4> +<h4 id="count.28.29" name="count.28.29"><a href="/ja/XPath/Functions/count">count()</a></h4> <p><em>(対応済)</em></p> -<h4 id="current.28.29" name="current.28.29"><a href="ja/XPath/Functions/current">current()</a></h4> +<h4 id="current.28.29" name="current.28.29"><a href="/ja/XPath/Functions/current">current()</a></h4> <p><em>(対応済)</em></p> -<h4 id="document.28.29" name="document.28.29"><a href="ja/XPath/Functions/document">document()</a></h4> +<h4 id="document.28.29" name="document.28.29"><a href="/ja/XPath/Functions/document">document()</a></h4> <p><em>(対応済)</em></p> -<h4 id="element-available.28.29" name="element-available.28.29"><a href="ja/XPath/Functions/element-available">element-available()</a></h4> +<h4 id="element-available.28.29" name="element-available.28.29"><a href="/ja/XPath/Functions/element-available">element-available()</a></h4> <p><em>(対応済)</em></p> -<h4 id="false.28.29" name="false.28.29"><a href="ja/XPath/Functions/false">false()</a></h4> +<h4 id="false.28.29" name="false.28.29"><a href="/ja/XPath/Functions/false">false()</a></h4> <p><em>(対応済)</em></p> -<h4 id="floor.28.29" name="floor.28.29"><a href="ja/XPath/Functions/floor">floor()</a></h4> +<h4 id="floor.28.29" name="floor.28.29"><a href="/ja/XPath/Functions/floor">floor()</a></h4> <p><em>(対応済)</em></p> -<h4 id="format-number.28.29" name="format-number.28.29"><a href="ja/XPath/Functions/format-number">format-number()</a></h4> +<h4 id="format-number.28.29" name="format-number.28.29"><a href="/ja/XPath/Functions/format-number">format-number()</a></h4> <p><em>(対応済)</em></p> -<h4 id="function-available.28.29" name="function-available.28.29"><a href="ja/XPath/Functions/function-available">function-available()</a></h4> +<h4 id="function-available.28.29" name="function-available.28.29"><a href="/ja/XPath/Functions/function-available">function-available()</a></h4> <p><em>(対応済)</em></p> -<h4 id="generate-id.28.29" name="generate-id.28.29"><a href="ja/XPath/Functions/generate-id">generate-id()</a></h4> +<h4 id="generate-id.28.29" name="generate-id.28.29"><a href="/ja/XPath/Functions/generate-id">generate-id()</a></h4> <p><em>(対応済)</em></p> -<h4 id="id.28.29" name="id.28.29"><a href="ja/XPath/Functions/id">id()</a></h4> +<h4 id="id.28.29" name="id.28.29"><a href="/ja/XPath/Functions/id">id()</a></h4> <p><em>(一部対応)</em></p> -<h4 id="key.28.29" name="key.28.29"><a href="ja/XPath/Functions/key">key()</a></h4> +<h4 id="key.28.29" name="key.28.29"><a href="/ja/XPath/Functions/key">key()</a></h4> <p><em>(対応済)</em></p> -<h4 id="lang.28.29" name="lang.28.29"><a href="ja/XPath/Functions/lang">lang()</a></h4> +<h4 id="lang.28.29" name="lang.28.29"><a href="/ja/XPath/Functions/lang">lang()</a></h4> <p><em>(対応済)</em></p> -<h4 id="last.28.29" name="last.28.29"><a href="ja/XPath/Functions/last">last()</a></h4> +<h4 id="last.28.29" name="last.28.29"><a href="/ja/XPath/Functions/last">last()</a></h4> <p><em>(対応済)</em></p> -<h4 id="local-name.28.29" name="local-name.28.29"><a href="ja/XPath/Functions/local-name">local-name()</a></h4> +<h4 id="local-name.28.29" name="local-name.28.29"><a href="/ja/XPath/Functions/local-name">local-name()</a></h4> <p><em>(対応済)</em></p> -<h4 id="name.28.29" name="name.28.29"><a href="ja/XPath/Functions/name">name()</a></h4> +<h4 id="name.28.29" name="name.28.29"><a href="/ja/XPath/Functions/name">name()</a></h4> <p><em>(対応済)</em></p> -<h4 id="namespace-uri.28.29" name="namespace-uri.28.29"><a href="ja/XPath/Functions/namespace-uri">namespace-uri()</a></h4> +<h4 id="namespace-uri.28.29" name="namespace-uri.28.29"><a href="/ja/XPath/Functions/namespace-uri">namespace-uri()</a></h4> <p><em>(対応済)</em></p> -<h4 id="normalize-space.28.29" name="normalize-space.28.29"><a href="ja/XPath/Functions/normalize-space">normalize-space()</a></h4> +<h4 id="normalize-space.28.29" name="normalize-space.28.29"><a href="/ja/XPath/Functions/normalize-space">normalize-space()</a></h4> <p><em>(対応済)</em></p> -<h4 id="not.28.29" name="not.28.29"><a href="ja/XPath/Functions/not">not()</a></h4> +<h4 id="not.28.29" name="not.28.29"><a href="/ja/XPath/Functions/not">not()</a></h4> <p><em>(対応済)</em></p> -<h4 id="number.28.29" name="number.28.29"><a href="ja/XPath/Functions/number">number()</a></h4> +<h4 id="number.28.29" name="number.28.29"><a href="/ja/XPath/Functions/number">number()</a></h4> <p><em>(対応済)</em></p> -<h4 id="position.28.29" name="position.28.29"><a href="ja/XPath/Functions/position">position()</a></h4> +<h4 id="position.28.29" name="position.28.29"><a href="/ja/XPath/Functions/position">position()</a></h4> <p><em>(対応済)</em></p> -<h4 id="round.28.29" name="round.28.29"><a href="ja/XPath/Functions/round">round()</a></h4> +<h4 id="round.28.29" name="round.28.29"><a href="/ja/XPath/Functions/round">round()</a></h4> <p><em>(対応済)</em></p> -<h4 id="starts-with.28.29" name="starts-with.28.29"><a href="ja/XPath/Functions/starts-with">starts-with()</a></h4> +<h4 id="starts-with.28.29" name="starts-with.28.29"><a href="/ja/XPath/Functions/starts-with">starts-with()</a></h4> <p><em>(対応済)</em></p> -<h4 id="string.28.29" name="string.28.29"><a href="ja/XPath/Functions/string">string()</a></h4> +<h4 id="string.28.29" name="string.28.29"><a href="/ja/XPath/Functions/string">string()</a></h4> <p><em>(対応済)</em></p> -<h4 id="string-length.28.29" name="string-length.28.29"><a href="ja/XPath/Functions/string-length">string-length()</a></h4> +<h4 id="string-length.28.29" name="string-length.28.29"><a href="/ja/XPath/Functions/string-length">string-length()</a></h4> <p><em>(対応済)</em></p> -<h4 id="substring.28.29" name="substring.28.29"><a href="ja/XPath/Functions/substring">substring()</a></h4> +<h4 id="substring.28.29" name="substring.28.29"><a href="/ja/XPath/Functions/substring">substring()</a></h4> <p><em>(対応済)</em></p> -<h4 id="substring-after.28.29" name="substring-after.28.29"><a href="ja/XPath/Functions/substring-after">substring-after()</a></h4> +<h4 id="substring-after.28.29" name="substring-after.28.29"><a href="/ja/XPath/Functions/substring-after">substring-after()</a></h4> <p><em>(対応済)</em></p> -<h4 id="substring-before.28.29" name="substring-before.28.29"><a href="ja/XPath/Functions/substring-before">substring-before()</a></h4> +<h4 id="substring-before.28.29" name="substring-before.28.29"><a href="/ja/XPath/Functions/substring-before">substring-before()</a></h4> <p><em>(対応済)</em></p> -<h4 id="sum.28.29" name="sum.28.29"><a href="ja/XPath/Functions/sum">sum()</a></h4> +<h4 id="sum.28.29" name="sum.28.29"><a href="/ja/XPath/Functions/sum">sum()</a></h4> <p><em>(対応済)</em></p> -<h4 id="system-property.28.29" name="system-property.28.29"><a href="ja/XPath/Functions/system-property">system-property()</a></h4> +<h4 id="system-property.28.29" name="system-property.28.29"><a href="/ja/XPath/Functions/system-property">system-property()</a></h4> <p><em>(対応済)</em></p> -<h4 id="translate.28.29" name="translate.28.29"><a href="ja/XPath/Functions/translate">translate()</a></h4> +<h4 id="translate.28.29" name="translate.28.29"><a href="/ja/XPath/Functions/translate">translate()</a></h4> <p><em>(対応済)</em></p> -<h4 id="true.28.29" name="true.28.29"><a href="ja/XPath/Functions/true">true()</a></h4> +<h4 id="true.28.29" name="true.28.29"><a href="/ja/XPath/Functions/true">true()</a></h4> <p><em>(対応済)</em></p> -<h4 id="unparsed-entity-url.28.29" name="unparsed-entity-url.28.29"><a href="ja/XPath/Functions/unparsed-entity-url">unparsed-entity-url()</a></h4> +<h4 id="unparsed-entity-url.28.29" name="unparsed-entity-url.28.29"><a href="/ja/XPath/Functions/unparsed-entity-url">unparsed-entity-url()</a></h4> <p><em>(非対応)</em></p> diff --git a/files/ja/web/xslt/using_the_mozilla_javascript_interface_to_xsl_transformations/index.html b/files/ja/web/xslt/using_the_mozilla_javascript_interface_to_xsl_transformations/index.html index f707cb4701..3d570a566e 100644 --- a/files/ja/web/xslt/using_the_mozilla_javascript_interface_to_xsl_transformations/index.html +++ b/files/ja/web/xslt/using_the_mozilla_javascript_interface_to_xsl_transformations/index.html @@ -107,7 +107,7 @@ function onload() { <ul> <li><a href="/ja/docs/The_XSLT_JavaScript_Interface_in_Gecko" title="The_XSLT//JavaScript_Interface_in_Gecko">Gecko の XSLT/JavaScript インターフェース</a></li> - <li>XML文書の読み込みに関する<a href="https://developer.mozilla.org/en/DOM/document.load" title="en/DOM/document.load">document.load()</a> (上で使用したもの)</li> + <li>XML文書の読み込みに関する<a href="/ja/DOM/document.load" title="en/DOM/document.load">document.load()</a> (上で使用したもの)</li> </ul> <div class="originaldocinfo"> diff --git a/files/ja/webassembly/c_to_wasm/index.html b/files/ja/webassembly/c_to_wasm/index.html index a312484e2f..eb8d5bdf61 100644 --- a/files/ja/webassembly/c_to_wasm/index.html +++ b/files/ja/webassembly/c_to_wasm/index.html @@ -5,7 +5,7 @@ translation_of: WebAssembly/C_to_wasm --- <div>{{WebAssemblySidebar}}</div> -<p class="summary">C / C ++のような言語でコードを書いたら、<a href="/en-US/docs/Mozilla/Projects/Emscripten">Emscripten</a> のようなツールを使って WebAssembly にコンパイルすることができます。 どのように動作するかを見てみましょう。</p> +<p class="summary">C / C ++のような言語でコードを書いたら、<a href="/ja/docs/Mozilla/Projects/Emscripten">Emscripten</a> のようなツールを使って WebAssembly にコンパイルすることができます。 どのように動作するかを見てみましょう。</p> <h2 id="Emscripten_の環境設定">Emscripten の環境設定</h2> diff --git a/files/ja/webassembly/concepts/index.html b/files/ja/webassembly/concepts/index.html index 279b780017..106c86f762 100644 --- a/files/ja/webassembly/concepts/index.html +++ b/files/ja/webassembly/concepts/index.html @@ -128,7 +128,7 @@ translation_of: WebAssembly/Concepts <p>生成された HTML 文章は JavaScript グルーコードのファイルを読み込んで {{htmlelement("textarea")}} に標準出力を書き出します。もしアプリケーションが OpenGL を利用している場合、その HTML はまた出力先となる {{htmlelement("canvas")}} 要素を含みます。Emscripten の出力結果を修正して必要とするウェブアプリに変換するのは非常に簡単です。</p> -<p>Emscripten に関する完全なドキュメントは <a href="https://emscripten.org">emscripten.org</a> で参照でき、このツールチェインの組み込みと自身の C/C++ アプリを wasm へとコンパイルするガイドとしては <a href="https://developer.mozilla.org/ja/docs/WebAssembly/C_to_wasm">C/C++ を WebAssembly にコンパイルする</a> が参考になります。</p> +<p>Emscripten に関する完全なドキュメントは <a href="https://emscripten.org">emscripten.org</a> で参照でき、このツールチェインの組み込みと自身の C/C++ アプリを wasm へとコンパイルするガイドとしては <a href="/ja/docs/WebAssembly/C_to_wasm">C/C++ を WebAssembly にコンパイルする</a> が参考になります。</p> <h3 id="Writing_WebAssembly_directly" name="Writing_WebAssembly_directly">直接 WebAssembly を記述する</h3> diff --git a/files/ja/webassembly/loading_and_running/index.html b/files/ja/webassembly/loading_and_running/index.html index 9839824f2b..9903ec8926 100644 --- a/files/ja/webassembly/loading_and_running/index.html +++ b/files/ja/webassembly/loading_and_running/index.html @@ -54,7 +54,7 @@ translation_of: WebAssembly/Loading_and_running }</pre> <div class="note"> -<p><strong>注</strong>: 通常はインスタンスのみを気にしますが、キャッシュする場合や、<code><a href="https://developer.mozilla.org/en-US/docs/Web/API/MessagePort/postMessage">postMessage()</a></code> を使用して別のワーカーやウィンドウと共有する場合や、インスタンスをさらに作成したい場合に備えて、モジュールを用意すると便利です。</p> +<p><strong>注</strong>: 通常はインスタンスのみを気にしますが、キャッシュする場合や、<code><a href="/ja/docs/Web/API/MessagePort/postMessage">postMessage()</a></code> を使用して別のワーカーやウィンドウと共有する場合や、インスタンスをさらに作成したい場合に備えて、モジュールを用意すると便利です。</p> </div> <div class="note"> @@ -79,7 +79,7 @@ translation_of: WebAssembly/Loading_and_running })</pre> <div class="note"> -<p><strong>注</strong>: WebAssembly モジュールからのエクスポートの仕組みの詳細については <a href="https://developer.mozilla.org/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript APIを使用する</a> と <a href="https://developer.mozilla.org/ja/docs/WebAssembly/Understanding_the_text_format">WebAssemblyテキストフォーマットを理解する</a> を参照してください。</p> +<p><strong>注</strong>: WebAssembly モジュールからのエクスポートの仕組みの詳細については <a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript APIを使用する</a> と <a href="/ja/docs/WebAssembly/Understanding_the_text_format">WebAssemblyテキストフォーマットを理解する</a> を参照してください。</p> </div> <h2 id="Using_XMLHttpRequest">XMLHttpRequest を使用する</h2> diff --git a/files/ja/webassembly/understanding_the_text_format/index.html b/files/ja/webassembly/understanding_the_text_format/index.html index a83895909e..ea6a24cf7b 100644 --- a/files/ja/webassembly/understanding_the_text_format/index.html +++ b/files/ja/webassembly/understanding_the_text_format/index.html @@ -452,7 +452,7 @@ WebAssembly.instantiateStreaming(fetch('logger2.wasm'), importObject) </div> <div class="blockIndicator note"> -<p><strong>注:</strong> Memory と同じように Table も JavaScript から作成すること (<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table">WebAssembly.Table()</a></code> を参照) 、別の wasm モジュール間でインポートすることができます。</p> +<p><strong>注:</strong> Memory と同じように Table も JavaScript から作成すること (<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table">WebAssembly.Table()</a></code> を参照) 、別の wasm モジュール間でインポートすることができます。</p> </div> <h3 id="Mutating_tables_and_dynamic_linking" name="Mutating_tables_and_dynamic_linking">テーブルの変更と動的リンク</h3> diff --git a/files/ja/webassembly/using_the_javascript_api/index.html b/files/ja/webassembly/using_the_javascript_api/index.html index a8e956984f..ea6221a243 100644 --- a/files/ja/webassembly/using_the_javascript_api/index.html +++ b/files/ja/webassembly/using_the_javascript_api/index.html @@ -5,10 +5,10 @@ translation_of: WebAssembly/Using_the_JavaScript_API --- <div>{{WebAssemblySidebar}}</div> -<p class="summary">これまでに <a href="/en-US/docs/WebAssembly/C_to_wasm">Emscriptenのようなツールを使用して他の言語からモジュールをコンパイルしたり</a>、<a href="/en-US/docs/WebAssembly/Loading_and_running">あなた自身のコードをロードして実行しました</a>。次のステップは他のWebAssembly JavaScript APIの使い方について学ぶことです。この記事ではあなたが知る必要があることを説明します。</p> +<p class="summary">これまでに <a href="/ja/docs/WebAssembly/C_to_wasm">Emscriptenのようなツールを使用して他の言語からモジュールをコンパイルしたり</a>、<a href="/ja/docs/WebAssembly/Loading_and_running">あなた自身のコードをロードして実行しました</a>。次のステップは他のWebAssembly JavaScript APIの使い方について学ぶことです。この記事ではあなたが知る必要があることを説明します。</p> <div class="note"> -<p><strong>注</strong>: もし、この記事で説明している基本的なコンセプトがよくわからない場合、<a href="/en-US/docs/WebAssembly/Concepts">WebAssemblyのコンセプト</a> をはじめに読んでからこの記事に戻ってきてください。</p> +<p><strong>注</strong>: もし、この記事で説明している基本的なコンセプトがよくわからない場合、<a href="/ja/docs/WebAssembly/Concepts">WebAssemblyのコンセプト</a> をはじめに読んでからこの記事に戻ってきてください。</p> </div> <h2 id="シンプルな例">シンプルな例</h2> @@ -25,7 +25,7 @@ translation_of: WebAssembly/Using_the_JavaScript_API <li>まずは、wasm モジュールが必要です! <a href="https://github.com/mdn/webassembly-examples/raw/master/js-api-examples/simple.wasm">simple.wasm</a> をコピーしてローカルマシンの新しいディレクトリの中に保存します。</li> <li>次に、使用しているブラウザが WebAssembly に対応しているか確認します。Firefox 52+ と Chrome 57+ では WebAssembly がデフォルトで有効になっています。</li> <li>次に、wasm ファイルと同じディレクトリに <code>index.html</code> という名前でシンプルな HTML ファイルを作成しましょう (もしも簡単に利用できるテンプレートを持っていない場合、<a href="https://github.com/mdn/webassembly-examples/blob/master/template/template.html">simple template</a> を使用できます) 。</li> - <li>ここで、何が起こっているのか理解を助けるために、wasm モジュールのテキスト表現を見てみましょう (<a href="https://developer.mozilla.org/ja/docs/WebAssembly/Text_format_to_wasm">テキストフォーマットから wasm に変換する</a> も参照してください): + <li>ここで、何が起こっているのか理解を助けるために、wasm モジュールのテキスト表現を見てみましょう (<a href="/ja/docs/WebAssembly/Text_format_to_wasm">テキストフォーマットから wasm に変換する</a> も参照してください): <pre>(module (func $i (import "imports" "imported_func") (param i32)) (func (export "exported_func") @@ -46,7 +46,7 @@ translation_of: WebAssembly/Using_the_JavaScript_API <p>上で説明したように、 <code>imports.imported_func</code> でインポート機能を利用できます。</p> <div class="note"> -<p><strong>注</strong>: <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">ES6のアローファンクション</a> を使用するとより簡潔に書くことができます:</p> +<p><strong>注</strong>: <a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">ES6のアローファンクション</a> を使用するとより簡潔に書くことができます:</p> <pre class="brush: js">var importObject = { imports: { imported_func: arg => console.log(arg) } };</pre> </div> @@ -251,7 +251,7 @@ console.log(tbl.get(1)()); // 42</pre> </li> </ol> -<p>このコードはテーブルに格納されている各関数参照に順番にアクセスし、内包した値をコンソールに書き出すためにインスタンス化します。<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get">Table.prototype.get()</a></code> で各関数参照を取得した後、関数を実行するためには括弧を追加することに注意してください。</p> +<p>このコードはテーブルに格納されている各関数参照に順番にアクセスし、内包した値をコンソールに書き出すためにインスタンス化します。<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get">Table.prototype.get()</a></code> で各関数参照を取得した後、関数を実行するためには括弧を追加することに注意してください。</p> <div class="note"> <p><strong>注</strong>: 完全なデモは <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.html">table.html</a> (<a href="https://mdn.github.io/webassembly-examples/js-api-examples/table.html">動作例</a>) を参照してください。このバージョンでは <code><a href="https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js">fetchAndInstantiate()</a></code> 関数を使用しています。</p> diff --git a/files/ko/glossary/immutable/index.html b/files/ko/glossary/immutable/index.html new file mode 100644 index 0000000000..847f9bbbe3 --- /dev/null +++ b/files/ko/glossary/immutable/index.html @@ -0,0 +1,23 @@ +--- +title: Immutable +slug: Glossary/Immutable +tags: + - CodingScripting + - Glossary +--- +<p>불변 <a href="/ko/docs/Glossary/Object">객체</a> 는 내용을 변경할 수 없는 객체입니다.<br> + 객체는 다양한 이유로 불변일 수 있습니다. 예를 들어 아래와 같습니다.</p> + +<ul> + <li>성능 향상하기(향후 객체의 변경에 대한 계획 없음)</li> + <li>메모리 사용을 줄이기(전체 객체를 복제하는 대신 <a href="/ko/docs/Glossary/Object_reference">객체를 참조</a>)</li> + <li>스레드 안전성(여러 스레드가 서로 간섭하지 않고 동일한 객체 참조 가능)</li> +</ul> + +<h2 id="Learn_more">더 알아보기</h2> + +<h3 id="General_knowledge">일반적 지식</h3> + +<ul> + <li>{{interwiki("wikipedia", "Immutable object", "Immutable")}} on Wikipedia</li> +</ul>
\ No newline at end of file diff --git a/files/ko/glossary/mutable/index.html b/files/ko/glossary/mutable/index.html new file mode 100644 index 0000000000..664479134d --- /dev/null +++ b/files/ko/glossary/mutable/index.html @@ -0,0 +1,44 @@ +--- +title: Mutable +slug: Glossary/Mutable +tags: + - CodingScripting + - Glossary + - NeedsContent +--- +<p>"Mutable"은 변경 가능(가변)한 변수의 유형입니다. <a href="/ko/docs/Glossary/JavaScript">JavaScript</a>에서, <a href="/ko/docs/Glossary/Primitive">원시 값</a>이 아닌 <a href="/ko/docs/Glossary/Object">객체</a>와 <a href="/ko/docs/Glossary/array">배열</a>만이 mutable입니다.</p> + +<p>(변수 이름이 새 값을 가리키도록 "만들 수 있지만" 이전 값은 여전히 메모리에 유지됩니다. 따라서 Garbage collection이 필요합니다.)</p> + +<p><strong>가변 객체</strong>는 객체가 생성된 후 상태를 수정할 수 있는 객체입니다.</p> + +<p><strong>불변 객체</strong>는 일단 객체가 생성되면 상태를 변경할 수 없는 객체입니다.</p> + +<p><strong>문자열과 숫자</strong>는 <strong>불변</strong>입니다. 예제를 보고 이해해볼까요?</p> + +<pre>var immutableString = "Hello"; + +// 위의 코드에서는 문자열 값을 가진 새 개체가 생성됩니다. + +immutableString = immutableString + "World"; + +// 우리는 지금 기존 값에 "World" 를 추가하고 있습니다. +</pre> + +<p>문자열 값을 사용하여 "immutableString" 을 추가하면 다음 이벤트가 발생합니다.:</p> + +<ol> + <li>기존 값 "immutableString"이 검색되었습니다.</li> + <li>"World"가 "immutableString"의 기존 값에 추가됩니다.</li> + <li>결과 값이 새 메모리 블록에 할당됩니다.</li> + <li>"immutableString" 객체는 새로 만든 메모리 공간을 가리킵니다.</li> + <li>기존에 생성한 메모리 공간은 Garbage collection이 가능해 집니다.</li> +</ol> + +<h2 id="Learn_more">더 알아보기</h2> + +<h3 id="General_knowledge">일반적 지식</h3> + +<ul> + <li>{{Interwiki("wikipedia", "Immutable object")}} on Wikipedia</li> +</ul> diff --git a/files/ko/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/ko/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html index f4992c339f..bd3724cb47 100644 --- a/files/ko/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html +++ b/files/ko/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html @@ -85,11 +85,11 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and <p>Developers should use ARIA states to indicate the state of UI widget elements and use CSS attribute selectors to alter the visual appearance based on the state changes (rather than using script to change a class name on the element).</p> -<p>The Open Ajax Alliance website provides <a class="external" href="http://www.oaa-accessibility.org/example/25/">an example of CSS attribute selectors based on ARIA states</a>. The example shows a WYSIWYG editor interface with a dynamic menu system. Items currently selected in a menu, such as the font face, are visually distinguished from other items. The relevant parts of the example are explained below.</p> +<p>The Open Ajax Alliance website provides an example of CSS attribute selectors based on ARIA states. The example shows a WYSIWYG editor interface with a dynamic menu system. Items currently selected in a menu, such as the font face, are visually distinguished from other items. The relevant parts of the example are explained below.</p> <p>In this example, the HTML for a menu has the form shown in Example 1a. Note how, on lines 7 and 13, the <strong>aria-checked</strong> property is used to declare the selection state of the menu items.</p> -<p><em>Example 1a. HTML for a selectable menu (adapted from <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>).</em></p> +<p><em>Example 1a. HTML for a selectable menu.</em></p> <pre class="deki-transform"><ul id="fontMenu" class="menu" role="menu" aria-hidden="true"> <li id="sans-serif" @@ -109,7 +109,7 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and <p>The CSS that is used to alter the visual appearance of the selected item is shown in Example 1b. Note that there is no custom classname used, only the status of the <strong>aria-checked</strong> attribute on line 1.</p> -<p><em>Example 1b. Attribute-based selector for indicating state <em>(from <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>).</em></em></p> +<p><em>Example 1b. Attribute-based selector for indicating state.</em></p> <pre class="deki-transform">li[aria-checked="true"] { font-weight: bold; @@ -121,7 +121,7 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and <p>The JavaScript to update the <strong>aria-checked</strong> property has the form shown in Example 1c. Note that the script only updates the <strong>aria-checked</strong> attribute (lines 3 and 8); it does not need to also add or remove a custom classname.</p> -<p><em>Example 1c. JavaScript to update the aria-checked attribute </em><em> <em>(based on <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>)</em></em><em><em><em>.</em></em></em></p> +<p><em>Example 1c. JavaScript to update the aria-checked attribute</em></p> <pre class="deki-transform">var processMenuChoice = function(item) { // 'check' the selected item @@ -140,11 +140,11 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and <p>When content visibility is changed (i.e. an element is hidden or shown), developers should change the <strong>aria-hidden</strong> property value. The techniques described above should be used to declare CSS to visually hide an element using <code>display:none</code>.</p> -<p>The Open Ajax Alliance website provides <a class="external" href="http://www.oaa-accessibility.org/example/39/">an example of a tooltip that uses <strong>aria-hidden</strong> to control the visibility of the tooltip</a>. The example shows a simple web form with tooltips containing instructions associated with the entry fields. The relevant parts of the example are explained below.</p> +<p>The Open Ajax Alliance website provides an example of a tooltip that uses <strong>aria-hidden</strong> to control the visibility of the tooltip. The example shows a simple web form with tooltips containing instructions associated with the entry fields. The relevant parts of the example are explained below.</p> <p>In this example, the HTML for the tooltip has the form shown in Example 2a. Line 9 sets the <strong>aria-hidden</strong> state to <code>true</code>.</p> -<p><em>Example 2a. HTML for a tooltip (adapted from <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p> +<p><em>Example 2a. HTML for a tooltip.</em></p> <pre class="deki-transform"><div class="text"> <label id="tp1-label" for="first">First Name:</label> @@ -160,7 +160,7 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and <p>The CSS for this markup is shown in Example 2b. Note that there is no custom classname used, only the status of the <strong>aria-hidden</strong> attribute on line 1.</p> -<p>Example 2b. <em>Attribute-based selector for indicating state <em>(from <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></em></p> +<p>Example 2b. <em>Attribute-based selector for indicating state.</em></p> <pre class="deki-transform">div.tooltip[aria-hidden="true"] { display: none; @@ -169,7 +169,7 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and <p>The JavaScript to update the <strong>aria-hidden</strong> property has the form shown in Example 2c. Note that the script only updates the <strong>aria-</strong><strong>hidden</strong> attribute (line 2); it does not need to also add or remove a custom classname.</p> -<p><em>Example 2c. JavaScript to update the aria-checked attribute </em><em> <em>(based on <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>)</em></em><em><em><em>.</em></em></em></p> +<p><em>Example 2c. JavaScript to update the aria-checked attribute </em></p> <pre class="deki-transform">var showTip = function(el) { el.setAttribute('aria-hidden', 'false'); diff --git a/files/ko/web/api/streams_api/concepts/index.html b/files/ko/web/api/streams_api/concepts/index.html index 3537318227..fd212aa988 100644 --- a/files/ko/web/api/streams_api/concepts/index.html +++ b/files/ko/web/api/streams_api/concepts/index.html @@ -19,7 +19,7 @@ original_slug: Web/API/Streams_API/컨셉 <li><strong>Pull sources</strong> require you to explicitly request data from them once connected to. Examples include a file access operation via a <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> or <a href="/en-US/docs/Web/API/XMLHttpRequest/XMLHttpRequest">XHR</a> call.</li> </ul> -<p>컨The data is read sequentially in small pieces called <strong>chunks</strong>. A chunk can be a single byte, or it can be something larger such as a <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a> of a certain size. A single stream can contain chunks of different sizes and types.</p> +<p>The data is read sequentially in small pieces called <strong>chunks</strong>. A chunk can be a single byte, or it can be something larger such as a <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a> of a certain size. A single stream can contain chunks of different sizes and types.</p> <p><img alt="" src="https://mdn.mozillademos.org/files/15819/Readable%20streams.png" style="height: 452px; width: 1000px;"></p> diff --git a/files/ko/web/javascript/data_structures/index.md b/files/ko/web/javascript/data_structures/index.md index e72d37dd85..884d33c308 100644 --- a/files/ko/web/javascript/data_structures/index.md +++ b/files/ko/web/javascript/data_structures/index.md @@ -89,13 +89,13 @@ Infinity ### BigInt type -The {{jsxref("BigInt")}} type is a numeric primitive in JavaScript that can represent integers with arbitrary precision. With `BigInt`s, you can safely store and operate on large integers even beyond the safe integer limit for `Number`s. +[BigInt](/ko/docs/Web/JavaScript/Reference/Global_Objects/BigInt) 타입은 임의 정밀도로 정수를 나타낼 수 있는 자바스크립트의 숫자 원시 형식이다. `BigInt`를 사용하면 `Number`의 정수 한계를 넘어서는 큰 정수도 안전하게 저장 및 연산할 수 있다. -A `BigInt` is created by appending `n` to the end of an integer or by calling the constructor. +`BigInt`는 정수 끝에 `n`을 추가하거나 생성자를 호출하여 생성된다. -You can obtain the safest value that can be incremented with `Number`s by using the constant {{jsxref("Number.MAX_SAFE_INTEGER")}}. With the introduction of `BigInt`s, you can operate with numbers beyond the {{jsxref("Number.MAX_SAFE_INTEGER")}}. +`BigInt`의 도입으로, 다음의 [Number.MAX_SAFE_INTEGER](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER)로 작업할 수 있으며 상수 [Number.MAX_SAFE_INTEGER](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER)를 사용하여 숫자로 증가시킬 수 있는 가장 안전한 값을 얻을 수 있다. -This example demonstrates, where incrementing the {{jsxref("Number.MAX_SAFE_INTEGER")}} returns the expected result: +이 예제는 [Number.MAX_SAFE_INTEGER](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER)를 증가시키면 예상 결과가 반환된다는 것을 보여준다: ```js > const x = 2n ** 53n; @@ -104,11 +104,11 @@ This example demonstrates, where incrementing the {{jsxref("Number.MAX_SAFE_INTE 9007199254740993n ``` -You can use the operators `+`, `*`, `-`, `**`, and `%` with `BigInt`s—just like with `Number`s. A `BigInt` is not strictly equal to a `Number`, but it is loosely so. +산술 연산자 `+`, `*`, `-`, `**` 및 `%`를 `BigInt`에서도 사용할 수 있다. `BigInt`는 정확히 `Number`와 같지는 않으나 대략적으로는 같다. -A `BigInt` behaves like a `Number` in cases where it is converted to `Boolean`: `if`, `||`, `&&`, `Boolean`, `!`. +`BigInt`는 `if`, `||`, `&&,` `Boolean`, `!`와 같이 `Boolean 타입`으로 변환되는 경우 `Number`처럼 작동한다. -`BigInt`s cannot be operated on interchangeably with `Number`s. Instead a {{jsxref("TypeError")}} will be thrown. +`BigInt`는 `Number`로 교체할 수 없으며 [TypeError](/ko/docs/Web/JavaScript/Reference/Global_Objects/TypeError)가 발생한다. ### String 타입 @@ -145,77 +145,26 @@ Symbol 은 ECMAScript 6 에서 추가되었다. Symbol은 **유일**하고 **변 두 종류의 객체 속성이 있는데, 이들은 종류에 따라 특성값들을 가질 수 있다. 데이터 (data) 속성과 접근자 (accessor) 속성이 그것이다. -> **Note:** Each property has corresponding *attributes.* Attributes are used internally by the JavaScript engine, so you cannot directly access them. That's why attributes are listed in double square brackets, rather than single. +> **Note:** 각 프로퍼티에는 `특성들`이 있다. 특성은 자바스크립트 엔진에서 내부적으로 사용되므로 사용자가 직접 액세스할 수 없다. 그렇기 때문에 속성이 단일 대괄호가 아닌 이중 대괄호로 나열된다. > -> See {{jsxref("Object.defineProperty()")}} to learn more. +> 더 알아보려면 [Object.defineProperty()](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)를 확인하자. #### 데이터 속성 (Data property) 키에 값을 연결하고, 아래와 같은 특성들 (attribute) 이 있다. -<table class="standard-table"> - <caption> - Attributes of a data property - </caption> - <thead> - <tr> - <th scope="col">Attribute</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - <th scope="col">Default value</th> - </tr> - </thead> - <tbody> - <tr> - <td>[[Value]]</td> - <td>Any JavaScript type</td> - <td>The value retrieved by a get access of the property.</td> - <td><code>undefined</code></td> - </tr> - <tr> - <td>[[Writable]]</td> - <td>Boolean</td> - <td> - If <code>false</code>, the property's [[Value]] cannot be changed. - </td> - <td><code>false</code></td> - </tr> - <tr> - <td>[[Enumerable]]</td> - <td>Boolean</td> - <td> - <p> - If <code>true</code>, the property will be enumerated in - <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" - >for...in</a - > - loops.<br />See also - <a - href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties" - >Enumerability and ownership of properties</a - >. - </p> - </td> - <td><code>false</code></td> - </tr> - <tr> - <td>[[Configurable]]</td> - <td>Boolean</td> - <td> - If <code>false</code>, the property cannot be deleted, cannot be changed - to an accessor property, and attributes other than [[Value]] and - [[Writable]] cannot be changed. - </td> - <td><code>false</code></td> - </tr> - </tbody> -</table> +|Attribute|Type|Description|Default value| +|---------|----|-----------|-------------| +|[[Value]]|Any<br>JavaScript<br>type|액세스로 검색된 값의 속성을 가져온다.|`undefined`| +|[[Writable]]|Boolean|만약 `false` 라면, 속성의 [[Value]] 를 변경할 수 없다.|`false`| +|[[Enumerable]]|Boolean|만약 `true`이면, 이 속성은 [for...in](/ko/docs/Web/JavaScript/Reference/Statements/for...in)로 루프에서 열거될 수 있다.<br>참고 : [Enumerability and ownership of properties](/ko/docs/Web/JavaScript/Enumerability_and_ownership_of_properties)|`false`| +|[[Configurable]]|Boolean|만약 `false` 라면, 속성을 삭제하거나 접근자 속성으로 변경할 수 없으며, [[Value]] 와 [[Writable]] 특성 외에는 변경할 수 없다.|`false`| | Attribute | Type | Description | | ---------- | ------- | ----------------------------------------------------- | -| Read-only | Boolean | Reversed state of the ES5 [[Writable]] attribute. | -| DontEnum | Boolean | Reversed state of the ES5 [[Enumerable]] attribute. | -| DontDelete | Boolean | Reversed state of the ES5 [[Configurable]] attribute. | +| Read-only | Boolean | ES5의 [[Writable]] 특성으로 변경되었다. | +| DontEnum | Boolean | ES5의 [[Enumerable]] 특성으로 변경되었다. | +| DontDelete | Boolean | ES5의 [[Configurable]] 특성으로 변경되었다. | #### 접근자 속성 (Accessor property) @@ -225,7 +174,7 @@ Symbol 은 ECMAScript 6 에서 추가되었다. Symbol은 **유일**하고 **변 | ---------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | | [[Get]] | Function 객체 혹은 `undefined` | 이 속성의 값에 접근할 때마다, 인자 목록 없이 함수가 호출되고, 함수의 반환된 값으로 속성값을 가져온다. 같이보기 [`get`](/ko/docs/Web/JavaScript/Reference/Functions/get). | `undefined` | | [[Set]] | Function 객체 혹은 `undefined` | 이 속성의 값이 바뀌려고 할 때마다, 할당된 값을 인자로 함수가 호출된다. 같이보기 [`set`](/ko/docs/Web/JavaScript/Reference/Functions/set). | `undefined` | -| [[Enumerable]] | Boolean | 만약 `true`이면, 이 속성은, [for...in](/ko/docs/Web/JavaScript/Reference/Statements/for...in)로 루프에서 열거될 수 있다.loops. | `false` | +| [[Enumerable]] | Boolean | 만약 `true`이면, 이 속성은, [for...in](/ko/docs/Web/JavaScript/Reference/Statements/for...in)로 루프에서 열거될 수 있다. | `false` | | [[Configurable]] | Boolean | 만약 `false`이면, 이 속성은 제거될 수 없고, 데이터 속성을 수정할 수 없다. | `false` | ### "Normal" objects, and functions diff --git a/files/ko/web/javascript/reference/functions/arrow_functions/index.html b/files/ko/web/javascript/reference/functions/arrow_functions/index.html index cb42f89ebc..44e2310468 100644 --- a/files/ko/web/javascript/reference/functions/arrow_functions/index.html +++ b/files/ko/web/javascript/reference/functions/arrow_functions/index.html @@ -12,7 +12,14 @@ original_slug: Web/JavaScript/Reference/Functions/애로우_펑션 --- <div>{{jsSidebar("Functions")}}</div> -<p>화살표 함수 표현(<strong>arrow function expression</strong>)은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/function">function 표현</a>에 비해 구문이 짧고 자신의 <a href="/ko/docs/Web/JavaScript/Reference/Operators/this">this</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>, <a href="/ko/docs/Web/JavaScript/Reference/Operators/super">super</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a>을 바인딩 하지 않습니다. 화살표 함수는 항상 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/name">익명</a>입니다. 이 함수 표현은 메소드 함수가 아닌 곳에 가장 적합합니다. 그래서 생성자로서 사용할 수 없습니다.</p> +<p>화살표 함수 표현(<strong>arrow function expression</strong>)은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/function">전통적인 함수표현(function)</a>의 간편한 대안입니다. 하지만, 화살표 함수는 몇 가지 제한점이 있고 모든 상황에 사용할 수는 없습니다.</p> +<ul> +<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a>나 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a>에 대한 바인딩이 없고, <a href="https://developer.mozilla.org/en-US/docs/Glossary/Method">methods</a> 로 사용될 수 없습니다.</li> +<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a>키워드가 없습니다.</li> +<li>일반적으로 스코프를 지정할 때 사용하는 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">apply</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bind</a> methods를 이용할 수 없습니다.</li> +<li>생성자<a href="https://developer.mozilla.org/en-US/docs/Glossary/Constructor">(Constructor)</a>로 사용할 수 없습니다.</li> +<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield">yield</a>를 화살표 함수 내부에서 사용할 수 없습니다.</li> +</ul> <p>{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}</p> diff --git a/files/ko/web/javascript/reference/operators/object_initializer/index.html b/files/ko/web/javascript/reference/operators/object_initializer/index.html deleted file mode 100644 index b3bebf8541..0000000000 --- a/files/ko/web/javascript/reference/operators/object_initializer/index.html +++ /dev/null @@ -1,292 +0,0 @@ ---- -title: 객체 초기자 -slug: Web/JavaScript/Reference/Operators/Object_initializer -tags: - - ECMAScript 2015 - - ECMAScript6 - - JSON - - JavaScript - - Literal - - Methods - - Object - - Primary Expression - - computed - - mutation - - properties -translation_of: Web/JavaScript/Reference/Operators/Object_initializer ---- -<div>{{JsSidebar("Operators")}}</div> - -<p>객체는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>new Object()</code></a>, <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a></code> 또는 <em>리터럴</em> 표기법 (<em>initializer</em> 표기법)을 사용하여 초기화될 수 있습니다. 객체 초기자(object initializer)는 0개 이상인 객체 속성명 및 관련값 쌍 목록이 콤마로 분리되어 중괄호(<code>{}</code>)로 묶인 형태입니다.</p> - -<p>{{EmbedInteractiveExample("pages/js/expressions-objectinitializer.html", "taller")}}</p> - -<h2 id="구문">구문</h2> - -<pre class="brush: js notranslate">var o = {}; -var o = { a: "foo", b: 42, c: {} }; - -var a = "foo", b = 42, c = {}; -var o = { a: a, b: b, c: c }; - -var o = { - <var>property: function </var>([<var>parameters</var>]) {}, - get <var>property</var>() {}, - set <var>property</var>(<var>value</var>) {}, -}; -</pre> - -<h3 id="ECMAScript_2015의_새로운_표기법">ECMAScript 2015의 새로운 표기법</h3> - -<pre class="brush: js notranslate">// 단축 속성명 (ES2015) -let a = "foo", b = 42, c = {} -let o = { a, b, c } - -// 단축 메서드명 (ES2015) -var o = { - <var>property</var>([<var>parameters</var>]) {} -} - -// 계산된 속성명 (ES2015) -var prop = 'foo' -var o = { - [prop]: 'hey', - ['b' + 'ar']: 'there' -}</pre> - -<h2 id="설명">설명</h2> - -<p>객체 초기자는 {{jsxref("Object")}}의 초기화를 기술하는 표현식(expression)입니다. 객체는 객체를 설명하는 데 사용되는<em>속성</em>으로 구성됩니다. 객체의 속성값은 {{Glossary("primitive")}} 데이터 형 또는 다른 객체를 포함할 수 있습니다.</p> - -<h3 id="객체_리터럴_표기법_vs_JSON">객체 리터럴 표기법 vs JSON</h3> - -<p>객체 리터럴 표기법은 <strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation (<a href="/ko/docs/Glossary/JSON">JSON</a>)과 같지 않습니다. 비슷해 보이지만, 차이가 있습니다:</p> - -<ul> - <li>JSON은 <code>"property": value</code> 구문을 사용한 속성 정의<em>만</em> 허용합니다. 속성명은 큰 따옴표로 묶여야 하고, 정의는 단축(명)일 수 없습니다.</li> - <li>JSON에서 값은 오직 문자열, 숫자, 배열, <code>true</code>, <code>false</code>, <code>null</code> 또는 다른 (JSON) 객체만 될 수 있습니다.</li> - <li>함수 값(아래 "메서드" 참조)은 JSON에서 값에 할당될 수 없습니다.</li> - <li>{{jsxref("Date")}} 같은 객체는 {{jsxref("JSON.parse()")}} 후에 문자열이 됩니다.</li> - <li>{{jsxref("JSON.parse()")}}는 계산된 속성명을 거부하고 오류를 발생합니다.</li> -</ul> - -<h2 id="예제">예제</h2> - -<h3 id="객체_생성">객체 생성</h3> - -<p>속성이 없는 빈 객체는 다음과 같이 만들 수 있습니다:</p> - -<pre class="brush: js notranslate">var object = {};</pre> - -<p>그러나, 리터럴(<em>literal</em>) 또는 초기자(<em>initializer</em>) 표기법의 이점은, 빠르게 중괄호 내 속성이 있는 객체를 만들 수 있다는 것입니다. 당신은 그저 쉼표로 구분된 <strong><code>키: 값</code></strong> 쌍 목록을 표기합니다.</p> - -<p>다음 코드는 키가 <code>"foo"</code>, <code>"age"</code> 및 <code>"baz"</code>인 세 속성이 있는 객체를 만듭니다. 이들 키값은 문자열 <code>"bar"</code>, 숫자 <code>42</code> 그리고 세 번째 속성은 그 값으로 다른 객체를 갖습니다.</p> - -<pre class="brush: js notranslate">var object = { - foo: "bar", - age: 42, - baz: { myProp: 12 }, -}</pre> - -<h3 id="속성_접근">속성 접근</h3> - -<p>일단 객체를 생성하면, 읽거나 바꿀 수 있습니다. 객체 속성은 점 표기법 또는 각괄호 표기법을 사용하여 액세스될 수 있습니다. (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a> 참조.)</p> - -<pre class="brush: js notranslate">object.foo; // "bar" -object["age"]; // 42 - -object.foo = "baz"; -</pre> - -<h3 id="속성_정의">속성 정의</h3> - -<p>우리는 이미 초기자 구문을 사용한 속성 표기법을 배웠습니다. 가끔, 객체 안에 두고 싶은 코드 속 변수가 있습니다. 다음과 같은 코드가 보입니다:</p> - -<pre class="brush: js notranslate">var a = "foo", - b = 42, - c = {}; - -var o = { - a: a, - b: b, - c: c -};</pre> - -<p>ECMAScript 2015의 경우, 똑같은 일을 할 수 있는 더 짧은 표기법이 있습니다:</p> - -<pre class="brush: js notranslate">var a = "foo", - b = 42, - c = {}; - -// 단축 속성명 (ES6) -var o = { a, b, c } - -// 다시 말해서, -console.log((o.a === {a}.a)) // true -</pre> - -<h4 id="중복된_속성명">중복된 속성명</h4> - -<p>속성이 같은 이름을 쓰는 경우, 두 번째 속성은 첫 번째를 겹쳐씁니다.</p> - -<pre class="brush: js notranslate">var a = {x: 1, x: 2}; -console.log(a); // {x: 2} -</pre> - -<p>ECMAScript 5 엄격 모드 코드에서, 중복된 속성명은 {{jsxref("SyntaxError")}}로 간주됐습니다. 런타임에 중복을 가능케 하는 속성 계산명 도입으로, ECMAScript 2015는 이 제한을 제거했습니다.</p> - -<pre class="brush: js notranslate">function haveES6DuplicatePropertySemantics(){ - "use strict"; - try { - ({ prop: 1, prop: 2 }); - - // 오류 미 발생, 중복 속성명은 엄격 모드에서 허용됨 - return true; - } catch (e) { - // 오류 발생, 중복은 엄격 모드에서 금지됨 - return false; - } -}</pre> - -<h3 id="메서드_정의">메서드 정의</h3> - -<p>객체의 속성은 <a href="/ko/docs/Web/JavaScript/Reference/Functions">함수</a>나 <a href="/ko/docs/Web/JavaScript/Reference/Functions/get">getter</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Functions/set">setter</a> 메서드를 참조할 수도 있습니다.</p> - -<pre class="brush: js notranslate">var o = { - <var>property: function </var>([<var>parameters</var>]) {}, - get <var>property</var>() {}, - set <var>property</var>(<var>value</var>) {}, -};</pre> - -<p>ECMAScript 2015에서는, 단축 표기법을 이용할 수 있습니다, 그래서 키워드 "<code>function</code>"은 더 이상 필요치 않습니다.</p> - -<pre class="brush: js notranslate">// 단축 메서드 명 (ES6) -var o = { - <var>property</var>([<var>parameters</var>]) {}, -}</pre> - -<p>ECMAScript 2015에는 값이 생성기 함수인 속성을 간결하게 정의하는 법도 있습니다:</p> - -<pre class="brush: js notranslate">var o = { - *<var>generator</var>() { - ........... - } -};</pre> - -<p>ECMAScript 5에서는 다음과 같이 작성할 수 있습니다 (하지만 ES5는 생성기가 없음을 주의하세요):</p> - -<pre class="brush: js notranslate">var o = { - generator<var>Method: function* </var>() { - ........... - } -};</pre> - -<p>메서드에 관한 자세한 사항 및 예는, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Method_definitions">메서드 정의</a> 참조.</p> - -<h3 id="계산된_속성명">계산된 속성명</h3> - -<p>ECMAScript 2015를 시작으로, 객체 초기화 구문은 계산된 속성명(computed property name)도 지원합니다. 각괄호 <code>[]</code> 안에 식을 넣을 수 있고, 식이 계산되고 그 결과가 속성명으로 사용됩니다. 이는 이미 속성을 읽고 설정하는 데 사용했을 수 있는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a> 구문의 각괄호 표기법을 연상시킵니다. </p> - -<p>이제 당신은 객체 리터럴에서도 같은 구문을 쓸 수 있습니다:</p> - -<pre class="brush: js notranslate">// 계산된 속성명 (ES6) -var i = 0; -var a = { - ["foo" + ++i]: i, - ["foo" + ++i]: i, - ["foo" + ++i]: i -}; - -console.log(a.foo1); // 1 -console.log(a.foo2); // 2 -console.log(a.foo3); // 3 - -var param = 'size'; -var config = { - [param]: 12, - ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4 -}; - -console.log(config); // { size: 12, mobileSize: 4 }</pre> - -<h3 id="전개_속성">전개 속성</h3> - -<p><a href="https://github.com/tc39/proposal-object-rest-spread">ECMASCript의 나머지/전개 속성</a> 제안 (stage 4) 으로 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">전개(spread)</a> 속성이 객체 리터럴에 추가됩니다. 이 속성은 제공된 객체의 열거 가능한(enumerable) 속성을 새 객체로 복사합니다.</p> - -<p>(<code>prototype</code>을 제외하는) 얕은 복제(Shallow-cloning) 나 객체 합침(merging objects)이 이제{{jsxref("Object.assign()")}} 보다 짧은 문법으로 가능해집니다.</p> - -<pre class="notranslate">let obj1 = { foo: 'bar', x: 42 } -let obj2 = { foo: 'baz', y: 13 } - -let clonedObj = { ...obj1 } -// Object { foo: "bar", x: 42 } - -let mergedObj = { ...obj1, ...obj2 } -// Object { foo: "baz", x: 42, y: 13 }</pre> - -<div class="blockIndicator warning"> -<p>{{jsxref("Object.assign()")}}는 <a href="/ko/docs/Web/JavaScript/Reference/Functions/set">setters</a>를 작동시키지만, 전개 연산자(spread operator)는 아니라는 걸 주목하세요!</p> -</div> - -<h3 id="프로토타입_변이">프로토타입 변이</h3> - -<p><code>__proto__: value</code> 또는 <code>"__proto__": value</code> 형태의 속성 정의는 이름이 <code>__proto__</code>인 속성을 만들지 않습니다. 대신, 제공된 값이 객체 또는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>이면, 생성된 객체의 <code>[[Prototype]]</code>을 그 값으로 바꿉니다. (값이 객체나 null이 아니면, 객체는 바뀌지 않습니다.)</p> - -<pre class="brush: js notranslate">var obj1 = {}; -assert(Object.getPrototypeOf(obj1) === Object.prototype); - -var obj2 = { __proto__: null }; -assert(Object.getPrototypeOf(obj2) === null); - -var protoObj = {}; -var obj3 = { "__proto__": protoObj }; -assert(Object.getPrototypeOf(obj3) === protoObj); - -var obj4 = { __proto__: "not an object or null" }; -assert(Object.getPrototypeOf(obj4) === Object.prototype); -assert(!obj4.hasOwnProperty("__proto__")); -</pre> - -<p>단일 프로토타입 변이(mutation)만 객체 리터럴에 허용됩니다: 다중 프로토타입 변이는 구문 오류입니다.</p> - -<p>"colon" 표기법을 쓰지 않는 속성 정의는 프로토타입 변이가 아닙니다: 그들은 다른 이름을 사용하는 비슷한 정의와 동일하게 동작하는 속성 정의입니다.</p> - -<pre class="brush: js notranslate">var __proto__ = "variable"; - -var obj1 = { __proto__ }; -assert(Object.getPrototypeOf(obj1) === Object.prototype); -assert(obj1.hasOwnProperty("__proto__")); -assert(obj1.__proto__ === "variable"); - -var obj2 = { __proto__() { return "hello"; } }; -assert(obj2.__proto__() === "hello"); - -var obj3 = { ["__prot" + "o__"]: 17 }; -assert(obj3.__proto__ === 17); -</pre> - -<h2 id="스펙">스펙</h2> - -<table> - <tbody> - <tr> - <th scope="col">Specification</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<p>{{Compat("javascript.operators.object_initializer")}}</p> - -<h2 id="참조">참조</h2> - -<ul> - <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a></li> - <li><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/get">get</a></code> / <code><a href="/ko/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li> - <li><a href="/ko/docs/Web/JavaScript/Reference/Functions/Method_definitions">메서드 정의</a></li> - <li><a href="/ko/docs/Web/JavaScript/Reference/Lexical_grammar">어휘 문법</a></li> -</ul> diff --git a/files/ko/web/javascript/reference/operators/object_initializer/index.md b/files/ko/web/javascript/reference/operators/object_initializer/index.md new file mode 100644 index 0000000000..b4b6eb6bd9 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/object_initializer/index.md @@ -0,0 +1,314 @@ +--- +title: 객체 초기자 +slug: Web/JavaScript/Reference/Operators/Object_initializer +tags: + - ECMAScript 2015 + - JSON + - JavaScript + - Language feature + - Literal + - Methods + - Object + - Primary Expression + - computed + - mutation + - properties +browser-compat: javascript.operators.object_initializer +--- +{{JsSidebar("Operators")}} + +객체는 [`new Object()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/Object), [`Object.create()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/create) 또는 _literal_ 표기법(_initializer_ 표기법)을 사용해 초기화될 수 있습니다. 객체 초기자는 중괄호(`{}`)로 묶인 0개 이상의 객체의 프로퍼티명과 관련 값의 쌍을 콤마로 구분한 목록입니다. + +{{EmbedInteractiveExample("pages/js/expressions-objectinitializer.html", "taller")}} + +## 구문 + +```js +let o = {} +let o = {a: 'foo', b: 42, c: {}} + +let a = 'foo', b = 42, c = {} +let o = {a: a, b: b, c: c} + +let o = { + property: function (parameters) {}, + get property() {}, + set property(value) {} +}; +``` + +### ECMAScript 2015의 새로운 표기법 + +이러한 표기법의 지원에 대해서는 호환성 테이블을 확인해주세요. 지원하지 않는 환경에서는 이러한 표기법들은 구문 에러를 유발합니다. + +```js +// 프로퍼티명 약식 (ES2015) +let a = 'foo', b = 42, c = {}; +let o = {a, b, c} + +// 프로퍼티명 약식 (ES2015) +let o = { + property(parameters) {} +} + +// 계산된 프로퍼티명 (ES2015) +let prop = 'foo'; +let o = { + [prop]: 'hey', + ['b' + 'ar']: 'there' +} +``` + +## 설명 + +객체 초기자는 {{jsxref("Object")}}의 초기화를 나타내는 표현입니다. 객체는 객체를 나타내는 데 사용되는 _properties_로 구성됩니다. 객체 프로퍼티의 값은 [원시 값](/ko/docs/Glossary/Primitive) 데이터 타입 또는 다른 객체를 포함할 수 있습니다. + +### 객체 리터럴 표기법 vs JSON + +객체 리터럴 표기법은 **J**ava**S**cript **O**bject **N**otation([JSON](/ko/docs/Glossary/JSON))과 동일하지 않습니다. 비슷하게 보이지만 다음과 같은 차이가 있습니다. + +- JSON은 _오직_ `"property": value` 구문을 사용해 정의한 프로퍼티만 허용합니다. 프로퍼티명에는 반드시 큰따옴표를 사용해야 하며 약식으로 정의할 수 없습니다. +- JSON에서 값은 문자열, 숫자, 배열, `true`, `false`, `null`, 또는 다른 (JSON) 객체만 사용할 수 있습니다. +- 함수 값(아래 "메서드"를 보세요)은 JSON의 값으로 할당할 수 없습니다. +- {{jsxref("Date")}}와 같은 객체는 {{jsxref("JSON.parse()")}} 이후의 문자열이 됩니다. +- {{jsxref("JSON.parse()")}}는 계산된 프로퍼티명을 거부하며 에러가 발생합니다. + +## 예제 + +### 객체 생성하기 + +프로퍼티가 없는 빈 객체는 다음과 같이 생성합니다. + +```js +let object = {} +``` + +_literal_ 또는 _initializer_ 표기법의 장점은 중괄호 안에 프로퍼티를 갖는 객체를 빠르게 생성할 수 있다는 것입니다. 콤마로 구분하여 `key: value` 상의 목록을 작성하면 됩니다. + +다음 코드는 세 개의 프로퍼티를 갖는 객체를 생성하며 키는 `"foo"`, `"age"`, `"baz"`입니다. 다음 세 키의 값은 문자열 `"bar"`, 숫자 `42`, 그리고 다른 객체입니다. + +```js +let object = { + foo: 'bar', + age: 42, + baz: {myProp: 12} +} +``` + +### 프로퍼티에 접근하기 + +객체를 생성한 후에는 이를 읽거나 변경할 수 있습니다. 객체 프로퍼티는 점 표기법 또는 대괄호 표기법을 사용해 접근할 수 있습니다(자세한 정보는 [프로퍼티 접근자](/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors)를 보세요). + +```js +object.foo // "bar" +object['age'] // 42 +object.baz // {myProp: 12} +object.baz.myProp //12 +``` + +### 프로퍼티 정의 + +우리는 초기자 구문을 사용해 프로퍼티를 작성하는 방법을 이미 배웠습니다. 때때로 코드의 변수를 객체로 넣고 싶은 경우가 있습니다. 다음과 같은 코드를 보게 될 수 있습니다. + +```js +let a = 'foo', + b = 42, + c = {}; + +let o = { + a: a, + b: b, + c: c +} +``` + +ECMAScript 2015를 사용하면 더 짧은 표기법을 사용해 동일한 결과를 얻을 수 있습니다. + +```js +let a = 'foo', + b = 42, + c = {}; + +// 프로퍼티명 약식 (ES2015) +let o = {a, b, c} + +// 다르게 작성하면, +console.log((o.a === {a}.a)) // true +``` + +#### 중복된 프로퍼티명 + +동일한 프로퍼티명을 사용하면 두 번째 프로퍼티가 첫 번째 프로퍼티를 덮어씁니다. + +```js +let a = {x: 1, x: 2} +console.log(a) // {x: 2} +``` + +ECMAScript 5 엄격 모드 코드에서는 중복된 프로퍼티명을 {{jsxref("SyntaxError")}}로 간주합니다. 런타임 시 복제를 가능하게 한 계산된 프로퍼티 명의 도입으로 ECMScript 2015는 이 제한을 제거했습니다. + +```js +function haveES2015DuplicatePropertySemantics() { + 'use strict'; + try { + ({prop: 1, prop: 2}); + + // 에러가 발생하지 않음, 중복된 프로퍼티명이 엄격 모드에서 허용됨 + return true; + } catch(e) { + // 에러가 발생함, 엄격 모드에서 중복이 금지됨 + return false; + } +} +``` + +### 메서드 정의 + +객체의 프로퍼티는 [function](/ko/docs/Web/JavaScript/Reference/Functions) 또는 [getter](/ko/docs/Web/JavaScript/Reference/Functions/get) 또는 [setter](/ko/docs/Web/JavaScript/Reference/Functions/set) 메서드를 참조할 수도 있습니다. + +```js +let o = { + property: function (parameters) {}, + get property() {}, + set property(value) {} +} +``` + +ECMAScript 2015에서는 약식 표기법을 사용할 수 있으므로 "`function`" 키워드는 필요하지 않습니다. + +```js +// 약식 메서드명(ES2015) +let o = { + property(parameters) {}, +} +``` + +ECMAScript 2015에서는 값이 generator 함수인 프로퍼티를 간결하게 정의하는 방법이 있습니다. + +```js +let o = { + *generator() { + ........... + } +}; +``` + +다음의 ES5와 유사한 표기법과 동일합니다(하지만 ECMAScript 5에는 generator가 없음을 유의하세요). + +```js +let o = { + generator: function* () { + ........... + } +}; +``` + +메서드에 대한 상세 정보와 예제는 [메서드 정의](/ko/docs/Web/JavaScript/Reference/Functions/Method_definitions)를 보세요. + +### 계산된 프로퍼티명 + +ECMAScript 2015부터 객체 초기자 구문은 계산된 프로퍼티 명도 지원합니다. 대괄호 `[]` 안에서 표현식을 허용하며, 표현식은 프로퍼티명으로 계산되어 사용됩니다. 이는 이미 프로퍼티를 읽고 설정하는 데 사용하는 [프로퍼티 접근자](/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors) 구문의 대괄호 표기법을 연상시킵니다. + +이제 객체 리터럴에서도 유사한 구문을 사용할 수 있습니다. + +```js +// 계산된 프로퍼티명(ES2015) +let i = 0 +let a = { + ['foo' + ++i]: i, + ['foo' + ++i]: i, + ['foo' + ++i]: i +} + +console.log(a.foo1) // 1 +console.log(a.foo2) // 2 +console.log(a.foo3) // 3 + +const items = ["A","B","C"]; +const obj = { +[items]: "Hello" +} +console.log(obj); // A,B,C: "Hello" +console.log(obj["A,B,C"]) // "Hello" + +let param = 'size' +let config = { + [param]: 12, + ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4 +} + +console.log(config) // {size: 12, mobileSize: 4} +``` + +### 전개 프로퍼티 + +[ECMAScript의 나머지/전개 프로퍼티](https://github.com/tc39/proposal-object-rest-spread) 제안(stage 4)은 객체 리터럴에 [전개](/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax) 프로퍼티를 추가합니다. 이는 제공된 객체로부터 새로운 객체로 자신만의 열거형 프로퍼티를 복사합니다. + +이제 {{jsxref("Object.assign()")}} 보다 더 짧은 구문을 사용해 얕은 복제(`prototype` 제외) 또는 객체 병합이 가능합니다. + +```js +let obj1 = { foo: 'bar', x: 42 } +let obj2 = { foo: 'baz', y: 13 } + +let clonedObj = { ...obj1 } +// Object { foo: "bar", x: 42 } + +let mergedObj = { ...obj1, ...obj2 } +// Object { foo: "baz", x: 42, y: 13 } +``` + +> **경고:** {{jsxref("Object.assign()")}}은 [setters](/ko/docs/Web/JavaScript/Reference/Functions/set)를 트리거하는 반면 전개 연산자는 그렇지 않음을 유의하세요! + +### 프로토타입 변형 + +`__proto__: value` 또는 `"__proto__": value` 형태의 프로토타입 정의는 `__proto__` 이름을 갖는 프로퍼티를 생성하지 않습니다. 대신에, 제공된 값이 객체 또는 [`null`](/ko/docs/Web/JavaScript/Reference/Global_Objects/null)인 경우, 생성된 객체의 `[[Prototype]]`을 해당 값으로 변경합니다(값이 객체 또는 `null`이 아닌 경우, 객체는 변경되지 않습니다). + +```js +let obj1 = {} +assert(Object.getPrototypeOf(obj1) === Object.prototype) + +let obj2 = {__proto__: null} +assert(Object.getPrototypeOf(obj2) === null) + +let protoObj = {} +let obj3 = {'__proto__': protoObj} +assert(Object.getPrototypeOf(obj3) === protoObj) + +let obj4 = {__proto__: 'not an object or null'} +assert(Object.getPrototypeOf(obj4) === Object.prototype) +assert(!obj4.hasOwnProperty('__proto__')) +``` + +객체 리터럴에서는 단일 프로토타입 변형만 허용됩니다. 다중 프로토타입 변형은 구문 에러입니다. + +"콜론" 표기법을 사용하지 않는 프로퍼티 정의는 프로토타입 변형이 아닙니다. 이는 다른 이름을 사용하여 유사한 정의와 동일하게 동작하는 프로퍼티 정의입니다. + +```js +let __proto__ = 'variable' + +let obj1 = {__proto__} +assert(Object.getPrototypeOf(obj1) === Object.prototype) +assert(obj1.hasOwnProperty('__proto__')) +assert(obj1.__proto__ === 'variable') + +let obj2 = {__proto__() { return 'hello'; }} +assert(obj2.__proto__() === 'hello') + +let obj3 = {['__prot' + 'o__']: 17} +assert(obj3.__proto__ === 17) +``` + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [프로퍼티 접근자](/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors) +- [`get`](/ko/docs/Web/JavaScript/Reference/Functions/get) / [`set`](/ko/docs/Web/JavaScript/Reference/Functions/set) +- [메서드 정의](/ko/docs/Web/JavaScript/Reference/Functions/Method_definitions) +- [Lexical grammar](/ko/docs/Web/JavaScript/Reference/Lexical_grammar) diff --git a/files/pt-br/learn/server-side/django/skeleton_website/index.html b/files/pt-br/learn/server-side/django/skeleton_website/index.html index 5a453131b2..81185ef965 100644 --- a/files/pt-br/learn/server-side/django/skeleton_website/index.html +++ b/files/pt-br/learn/server-side/django/skeleton_website/index.html @@ -131,7 +131,7 @@ cd locallibrary</pre> </ul> <div class="note"> -<p><strong>Nota</strong>: Você notou o que falta na lista de arquivos acima? Apesar de existir um lugar para suas views e seus models, não há nenhum lugar para colocar seus mapeamentos de URL, templates ou arquivos estáticos. Nós iremos te ensinar como criá-los mais adiante (isso não é necessário em todos websites, mas precisarem em nosso exemplo).</p> +<p><strong>Nota</strong>: Você notou o que falta na lista de arquivos acima? Apesar de existir um lugar para suas views e seus models, não há nenhum lugar para colocar seus mapeamentos de URL, templates ou arquivos estáticos. Nós iremos te ensinar como criá-los mais adiante (isso não é necessário em todos websites, mas precisaremos em nosso exemplo).</p> </div> <h2 id="Registrando_o_aplicativo_de_catálogo">Registrando o aplicativo de catálogo</h2> @@ -348,7 +348,7 @@ python3 manage.py migrate <p>No momento basta saber que o Django está funcionando! </p> <div class="note"> -<p><strong>Nota</strong>: Você deve executar novamente as migrações e testar o site sempre que fizer alguma mudança signifcante. Não demora muito!</p> +<p><strong>Nota</strong>: Você deve executar novamente as migrações e testar o site sempre que fizer alguma mudança significante. Não demora muito!</p> </div> <h2 id="Desafio">Desafio</h2> diff --git a/files/pt-br/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/pt-br/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html index 1bd9eb9d44..c532e8f7f1 100644 --- a/files/pt-br/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html +++ b/files/pt-br/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html @@ -98,11 +98,11 @@ original_slug: Web/Acessibilidade/An_overview_of_accessible_web_applications_and <p>Os desenvolvedores devem dar preferência ao uso dos estados ARIA para indicar a situação atual <span id="result_box" lang="pt"><span>dos elemento</span><span><em>s widgets</em></span> <span>na interface de utilização (UI)</span></span> e os seletores de atributos CSS para alterar a sua aparência, com base nas mudanças desses estados (em vez de usar um roteiro (<em>script</em>) para mudar um nome de classe de um elemento).</p> -<p>A <em>Open Ajax Alliance</em> (OAA - Aliança <em>OpenAJAX </em>) disponibiliza um exemplo de um seletor de atributos CSS baseado nos estados ARIA (em inglês) - <a class="external" href="http://www.oaa-accessibility.org/example/25/">an example of CSS attribute selectors based on ARIA states</a>. O exemplo mostra a <span id="result_box" lang="pt"><span>interface de um editor</span> <span>WYS/WYG</span> <span>com um sistema de</span> <span>menu dinâmico. Os itens</span></span> selecionados no menu, como o tipo de fonte estão, visualmente, distintos dos outros. As partes importantes do exemplo são explicadas a seguir.</p> +<p>A <em>Open Ajax Alliance</em> (OAA - Aliança <em>OpenAJAX </em>) disponibiliza um exemplo de um seletor de atributos CSS baseado nos estados ARIA (em inglês) - an example of CSS attribute selectors based on ARIA states. O exemplo mostra a <span id="result_box" lang="pt"><span>interface de um editor</span> <span>WYS/WYG</span> <span>com um sistema de</span> <span>menu dinâmico. Os itens</span></span> selecionados no menu, como o tipo de fonte estão, visualmente, distintos dos outros. As partes importantes do exemplo são explicadas a seguir.</p> <p>Neste exemplo, a HTML para um menu tem a forma exibida abaixo. Note como, nas linhas 7 e 13, a propriedade (<em>property</em>) <strong><code>aria-checked</code></strong> é usada para declarar o estado da seleção dos itens do menu.</p> -<p><em>Exemplo 1a: HTML para um menu selecionável (adaptado da <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>).</em></p> +<p><em>Exemplo 1a: HTML para um menu selecionável.</em></p> <pre class="brush: html"><ul id="fontMenu" class="menu" role="menu" aria-hidden="true"> <li id="sans-serif" @@ -122,7 +122,7 @@ original_slug: Web/Acessibilidade/An_overview_of_accessible_web_applications_and <p>A CSS usada para alterar a aparência do item selecionado é mostrada no Exemplo 1b. Perceba que não existe um nome de classe (<em>classname</em>) de personalização, apenas o estado do atributo <strong><code>aria-checked</code></strong>, na linha 1.</p> -<p><em>Exemplo 1b: Seletor baseado em atributo para indicar um estado (da <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>).</em></p> +<p><em>Exemplo 1b: Seletor baseado em atributo para indicar um estado.</em></p> <pre class="brush: css">li[aria-checked="true"] { font-weight: bold; @@ -134,7 +134,7 @@ original_slug: Web/Acessibilidade/An_overview_of_accessible_web_applications_and <p>O JavaScript para atualizar a propriedade <strong><code>aria-checked</code></strong> tem a forma exibida no Exemplo 1c. Repare que o roteiro (<em>script</em>) apenas atualiza o atributo <strong><code>aria-checked</code></strong> (linhas 3 e 8); <span id="result_box" lang="pt"><span>também não é necessário</span> <span>adicionar, ou remover,</span> <span>um nome de</span> <span>classe personalizada</span></span>.</p> -<p><em>Exemplo 1c: A JavaScript atualiza o atributo aria-checked (baseado em <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>)</em>.</p> +<p><em>Exemplo 1c: A JavaScript atualiza o atributo aria-checked</em>.</p> <pre class="brush: javascript">var processMenuChoice = function(item) { // 'check' the selected item @@ -153,11 +153,11 @@ original_slug: Web/Acessibilidade/An_overview_of_accessible_web_applications_and <p>Quando o conteúdo visual é alterado (isto é, um elemento é escondido, ou mostrado), os desenvolvedores devem mudar o valor da propriedade <strong><code>aria-hidden</code></strong>. As técnicas descritas acima devem ser usadas, a fim de declarar a CSS para ocultar um elemento utilizando<code><em> </em></code><em><code>display:none</code></em><code> </code>(<em>exibir:nenhum</em>).</p> -<p>O sítio da <em>Open Ajax Alliance</em> fornece um exemplo de uma dica de tela (<em>tooltip</em>) que utiliza o estado aria-hidden para controlar a sua visibilidade (em inglês) <a class="external" href="http://www.oaa-accessibility.org/example/39/">an example of a tooltip that uses <strong><code>aria-hidden</code></strong> to control the visibility of the tooltip</a>. O exemplo mostra um formulário <em>web</em> simples, com caixas de dicas de tela contendo instruções associadas aos campos de entrada. As partes relevantes deste exemplo estão explicadas abaixo.</p> +<p>O sítio da <em>Open Ajax Alliance</em> fornece um exemplo de uma dica de tela (<em>tooltip</em>) que utiliza o estado aria-hidden para controlar a sua visibilidade (em inglês) an example of a tooltip that uses <strong><code>aria-hidden</code></strong> to control the visibility of the tooltip. O exemplo mostra um formulário <em>web</em> simples, com caixas de dicas de tela contendo instruções associadas aos campos de entrada. As partes relevantes deste exemplo estão explicadas abaixo.</p> <p>Aqui, a HTML para a dica de tela tem a forma exibida no Exemplo 2a. A linha 9 configura o estado da <strong><code>aria-hidden</code></strong> para <code>true</code>.</p> -<p><em>Exemplo 2a: HTML para dicas de tela (adaptado de <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p> +<p><em>Exemplo 2a: HTML para dicas de tela.</em></p> <pre class="brush: html"><div class="text"> <label id="tp1-label" for="first">First Name:</label> @@ -173,7 +173,7 @@ original_slug: Web/Acessibilidade/An_overview_of_accessible_web_applications_and <p>A CSS para esta marcação está explicada no Exemplo 2b. Veja que não há uso de <em>classname</em> personalizada, apenas o estado do atributo <strong><code>aria-hidden</code></strong>, na linha 1.</p> -<p><em>Exemplo 2b: Seletor basedo em atributo para indicar um estado (de <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p> +<p><em>Exemplo 2b: Seletor basedo em atributo para indicar um estado.</em></p> <pre class="brush: css">div.tooltip[aria-hidden="true"] { display: none; @@ -182,7 +182,7 @@ original_slug: Web/Acessibilidade/An_overview_of_accessible_web_applications_and <p>O JavaScript que atualiza a propriedade <strong><code>aria-hidden</code></strong> tem a forma exposta no Exemplo 2c. Observe que o roteiro apenas atualiza o atributo <strong><code>aria-hidden</code></strong> (linha 2); não é necessário adicionar, nem remover, uma <em>classname</em> customizada.</p> -<p><em>Exemplo 2c: JavaScript para atualização do atributo aria-checked (com base em <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p> +<p><em>Exemplo 2c: JavaScript para atualização do atributo aria-checked.</em></p> <pre class="brush: javascript">var showTip = function(el) { el.setAttribute('aria-hidden', 'false'); diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html index 1530013453..8a8d8398a8 100644 --- a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html +++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html @@ -105,13 +105,6 @@ document.getElementById("formInstruction").setAttribute("role", "alert");</pre> <pre class="brush: js">// removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert:(Remover a classe "<em>hidden</em>" faz o leitor de tela anunciar o alerta) document.getElementById("expirationWarning").className = ""; </pre> -<h4 id="Exemplos_de_Trabalhos">Exemplos de Trabalhos:</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/example/1/">Exemplo de funções com caixas de alerta ARIA - Alert role example using an ARIA alert box</a></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/alertdialog1/">Exemplo de alerta utilizando uma caixa de diálogo modal ARIA - Alert example using a modal ARIA dialog box</a></li> -</ul> - <h3 id="Notas">Notas:</h3> <ul> diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html index b97f335b27..1fdbd2300b 100644 --- a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html +++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html @@ -53,13 +53,6 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedb retornará você para a página principal</div> </pre> -<h3 id="Exemplos_funcionando">Exemplos funcionando:</h3> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/checkbox1/">Exemplo checkbox</a> usa <code>aria-describedby</code></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/tooltip1/">Exemplo tooltip</a> usa <code>aria-describedby</code></li> -</ul> - <h3 id="Notas">Notas</h3> <ul> diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html index 83c43f6522..eed5ab0d20 100644 --- a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html +++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html @@ -124,13 +124,6 @@ ou a uma preparação mais inerte prescrito para o alívio mental do paciente do </div> </pre> -<h4 id="Exemplos_Funcionais">Exemplos Funcionais:</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/button2/">Exemplo de um button</a> usando <code>aria-labelledby</code></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/combobox1/">Exemplo de um combobox</a> usando <code>aria-labelledby</code></li> -</ul> - <h3 id="Notas">Notas </h3> <p>O mapeamento mais comum de uma diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html index 1d7eb8df91..85f4ba1e11 100644 --- a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html +++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html @@ -45,10 +45,6 @@ original_slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_o_atributo_aria-req </form> </pre> -<h4 id="Exemplos_de_trabalho">Exemplos de trabalho:</h4> - -<p><a class="external" href="http://www.oaa-accessibility.org/examplep/tooltip1/">Exemplo de Tooltip </a> (inclui o uso do atributo <code>aria-required</code>)</p> - <h3 id="Notas">Notas </h3> <h3 id="Usado_em_ARIA_roles">Usado em ARIA roles</h3> diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html index 7ed48ef085..de0b43d68f 100644 --- a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html +++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html @@ -95,12 +95,6 @@ var updateSlider = function (newValue) { }; </pre> -<h4 id="Working_Examples">Working Examples:</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/">Slider example</a></li> -</ul> - <h3 id="Notas">Notas </h3> <h3 id="Atributos_ARIA_usados">Atributos ARIA usados</h3> diff --git a/files/pt-br/web/accessibility/aria/aria_test_cases/index.html b/files/pt-br/web/accessibility/aria/aria_test_cases/index.html index 22940acf65..dfad97191f 100644 --- a/files/pt-br/web/accessibility/aria/aria_test_cases/index.html +++ b/files/pt-br/web/accessibility/aria/aria_test_cases/index.html @@ -7,7 +7,7 @@ translation_of: Web/Accessibility/ARIA/ARIA_Test_Cases <div class="warning">A informação dessa página encontra-se desatualizada: sua última atualização foi em Novmebro de 2010. No entanto, as informações ainad podem ser úteis para alguns leitores.<br> <br> -Para ver exemplos atualizados, entre em <a class="external" href="http://oaa-accessibility.org/examples">OpenAjaxAlliance ARIA examples page</a>.</div> +Para ver exemplos atualizados, entre em OpenAjaxAlliance ARIA examples page.</div> <p>For each example we test the "Expected" results with assistive technologies, for each browser that AT supports WAI-ARIA in. Where a failure occurs we will test the browser for API incorrectness, using tools such as MSAA Inspect. This must be done in order to determine where to file a bug (browser or AT).</p> diff --git a/files/pt-br/web/accessibility/aria/forms/basic_form_hints/index.html b/files/pt-br/web/accessibility/aria/forms/basic_form_hints/index.html index 534443ab1b..46045112fb 100644 --- a/files/pt-br/web/accessibility/aria/forms/basic_form_hints/index.html +++ b/files/pt-br/web/accessibility/aria/forms/basic_form_hints/index.html @@ -42,7 +42,7 @@ original_slug: Web/Accessibility/ARIA/forms/Dicas_básicas_de_form <p>O exemplo abaixo mostra um grupo de botões rádio usando um lista não ordenada. Note que na linha 3, o elemento {{HTMLElement("li")}} seta o atributo <strong>aria-labelledby</strong> para "rg1_label," o <strong>id</strong> do elemento {{HTMLElement("h3")}} na linha 1, que é o label para o grupo rádio.</p> -<p><em>Exemplo 2. Um grupo rádio implementado usando uma lista não ordenada (adaptado de <a href="http://www.oaa-accessibility.org/examplep/radio1/">http://www.oaa-accessibility.org/examplep/radio1/</a>)</em></p> +<p><em>Exemplo 2. Um grupo rádio implementado usando uma lista não ordenada</em></p> <pre class="brush: html"><h3 id="rg1_label">Lunch Options</h3> diff --git a/files/pt-br/web/api/console/index.html b/files/pt-br/web/api/console/index.html index ee79abeab4..9c0f5eaa00 100644 --- a/files/pt-br/web/api/console/index.html +++ b/files/pt-br/web/api/console/index.html @@ -52,9 +52,9 @@ translation_of: Web/API/Console <p> </p> <dl> - <dt>{{domxref("console.time()", "console.time(name)")}}</dt> - <dd>Inicia um contador de tempo com o nome especificado no parâmetro <em>name</em>. Até 10.000 contadores de tempo podem ser rodados por página.</dd> - <dt>{{domxref("console.timeEnd()", "console.timeEnd(name)")}}</dt> + <dt>{{domxref("console.time()", "console.time(label)")}}</dt> + <dd>Inicia um contador de tempo com o nome especificado no parâmetro <em>label</em>. Até 10.000 contadores de tempo podem ser rodados por página.</dd> + <dt>{{domxref("console.timeEnd()", "console.timeEnd(label)")}}</dt> <dd>Interrompe o contador de tempo especificado e emite o tempo e registros do contador de tempo em milisegundos desde o seu início. Veja {{anch("Contadores de Tempo")}}.</dd> <dt>{{domxref("console.trace()")}}</dt> <dd>Emite um traçado de pilha. See {{anch("Traçados de pilha")}}.</dd> diff --git a/files/pt-br/web/api/console/time/index.html b/files/pt-br/web/api/console/time/index.html index a246f83984..a63c85d0b7 100644 --- a/files/pt-br/web/api/console/time/index.html +++ b/files/pt-br/web/api/console/time/index.html @@ -15,13 +15,13 @@ translation_of: Web/API/Console/time <h2 id="Syntax" name="Syntax">Sintaxe</h2> -<pre class="syntaxbox">console.time(<em>cronometroNome</em>); +<pre class="syntaxbox">console.time(<em>label</em>); </pre> <h2 id="Parâmetros">Parâmetros</h2> <dl> - <dt><code>cronometroNome</code></dt> + <dt><code>label</code></dt> <dd>O nome para dar ao novo cronômetro. Ele identificará o cronômetro; use o mesmo quando chamar {{ domxref("console.timeEnd()") }} para parar o cronômetro e obter o tempo na saída do console.</dd> </dl> diff --git a/files/pt-br/web/api/console/timeend/index.html b/files/pt-br/web/api/console/timeend/index.html index 2758d32e45..2a758b8532 100644 --- a/files/pt-br/web/api/console/timeend/index.html +++ b/files/pt-br/web/api/console/timeend/index.html @@ -18,13 +18,13 @@ translation_of: Web/API/Console/timeEnd <h2 id="Syntax" name="Syntax">Sintaxe</h2> -<pre class="syntaxbox">console.timeEnd(<var>timerName</var>); +<pre class="syntaxbox">console.timeEnd(<var>label</var>); </pre> <h3 id="Parametros">Parametros</h3> <dl> - <dt><code>timerName</code></dt> + <dt><code>label</code></dt> <dd>O nome do temporizador a ser interrompido. Uma vez interrompido, o tempo decorrido é automaticamente apresentado no <a href="/en-US/docs/Tools/Web_Console" title="Web Console">Web Console</a>.</dd> </dl> diff --git a/files/pt-br/web/api/url/searchparams/index.html b/files/pt-br/web/api/url/searchparams/index.html index 48d5af7416..70e6756f85 100644 --- a/files/pt-br/web/api/url/searchparams/index.html +++ b/files/pt-br/web/api/url/searchparams/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/URL/searchParams <p>Se a URL da sua página é <code>https://example.com/?name=Jonathan&age=18</code> você pode parsear os parametros 'name' e 'age' usando:</p> -<pre class="default prettyprint prettyprinted notranslate">let params = (new URL(document.location)).searchParams; +<pre class="default prettyprint prettyprinted notranslate brush: js">let params = (new URL(document.location)).searchParams; let name = params.get("name"); // é a string "Jonathan" let age = parseInt(params.get("age")); // é o número 18</pre> diff --git a/files/pt-br/web/http/overview/index.html b/files/pt-br/web/http/overview/index.html index 77b04da730..abebe46686 100644 --- a/files/pt-br/web/http/overview/index.html +++ b/files/pt-br/web/http/overview/index.html @@ -165,7 +165,7 @@ Content-Type: text/html <p>As requisições consistem dos seguintes elementos:</p> <ul> - <li>Um <a href="/pt-BR/docs/Web/HTTP/Methods">método</a> HTTP, geralmente é um verbo como {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}}, {{HTTPMethod("DELETE")}}, {{HTTPMethod("PUT")}}, etc, ou um substantivo como {{HTTPMethod("OPTIONS")}} ou {{HTTPMethod("HEAD")}} que define qual operação o cliente quer fazer. Tipicamente, um cliente que pegar um recurso (usando {{HTTPMethod("GET")}}) ou publicar dados de um <a href="/pt-BR/docs/Web/Guide/HTML/Forms">formulário HTML</a> (usando {{HTTPMethod("POST")}}), embora mais operações podem ser necessárias em outros casos.</li> + <li>Um <a href="/pt-BR/docs/Web/HTTP/Methods">método</a> HTTP, geralmente é um verbo como {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}}, {{HTTPMethod("DELETE")}}, {{HTTPMethod("PUT")}}, etc, ou um substantivo como {{HTTPMethod("OPTIONS")}} ou {{HTTPMethod("HEAD")}} que define qual operação o cliente quer fazer. Tipicamente, um cliente quer pegar um recurso (usando {{HTTPMethod("GET")}}) ou publicar dados de um <a href="/pt-BR/docs/Web/Guide/HTML/Forms">formulário HTML</a> (usando {{HTTPMethod("POST")}}), embora mais operações podem ser necessárias em outros casos.</li> <li>O caminho do recurso a ser buscado; a URL do recurso sem os elementos que são de contexto, por exemplo sem o protocolo {{glossary("protocol")}} (<code>http://</code>), o domínio {{glossary("domain")}} (aqui como <code>developer.mozilla.org</code>), ou a porta {{glossary("port")}} TCP (aqui indicada pelo <code>80</code> que é ocultado por ser o número da porta padrão)</li> <li>A versão do protocolo HTTP.</li> <li><a href="/pt-BR/docs/Web/HTTP/Headers">Cabeçalhos</a> opcionais que contém informações adicionais para os servidores.</li> diff --git a/files/pt-br/web/javascript/reference/functions/index.html b/files/pt-br/web/javascript/reference/functions/index.html index dd0de1a128..9786b8434a 100644 --- a/files/pt-br/web/javascript/reference/functions/index.html +++ b/files/pt-br/web/javascript/reference/functions/index.html @@ -77,7 +77,7 @@ function minhaFuncao(objeto) { <dl> <dt><code>param</code></dt> - <dd>O nome de um argumento a ser passado para a função. Uma função pode ter até 255 argumentos.</dd> + <dd>O nome de um argumento a ser passado para a função.</dd> </dl> <dl> @@ -101,7 +101,7 @@ function minhaFuncao(objeto) { <dl> <dt><code>param</code></dt> - <dd>O nome de um argumento a ser passado para a função. Uma função pode ter até 255 argumentos.</dd> + <dd>O nome de um argumento a ser passado para a função.</dd> </dl> <dl> diff --git a/files/pt-br/web/javascript/reference/global_objects/error/index.html b/files/pt-br/web/javascript/reference/global_objects/error/index.html index 221df3b8f7..b713bd39c8 100644 --- a/files/pt-br/web/javascript/reference/global_objects/error/index.html +++ b/files/pt-br/web/javascript/reference/global_objects/error/index.html @@ -37,7 +37,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Error <h3 id="Tipos_de_erro">Tipos de erro</h3> -<p>Além do construtor genérico de <code>Error</code>, existem outros seis construtores principais de erro no JavaScript. Para exceções em <em>client-side</em>, veja <a href="/en-US/docs/Web/JavaScript/Guide/Statements#Exception_Handling_Statements">Excessões na captura de Instruções</a>.</p> +<p>Além do construtor genérico de <code>Error</code>, existem outros seis construtores principais de erro no JavaScript. Para exceções em <em>client-side</em>, veja <a href="/en-US/docs/Web/JavaScript/Guide/Statements#Exception_Handling_Statements">Exceções na captura de Instruções</a>.</p> <dl> <dt>{{jsxref("EvalError")}}</dt> diff --git a/files/ru/_redirects.txt b/files/ru/_redirects.txt index 8dbb1dd636..b61407949d 100644 --- a/files/ru/_redirects.txt +++ b/files/ru/_redirects.txt @@ -301,6 +301,7 @@ /ru/docs/Web/API/AudioContext/createPanner /ru/docs/Web/API/BaseAudioContext/createPanner /ru/docs/Web/API/AudioContext/currentTime /ru/docs/Web/API/BaseAudioContext/currentTime /ru/docs/Web/API/AudioContext/decodeAudioData /ru/docs/Web/API/BaseAudioContext/decodeAudioData +/ru/docs/Web/API/ByteString /ru/docs/conflicting/Web/JavaScript/Reference/Global_Objects/String /ru/docs/Web/API/CSS_Object_Model/ориентация_экрана /ru/docs/Web/API/CSS_Object_Model/Managing_screen_orientation /ru/docs/Web/API/Canvas_API/Tutorial/Использование_изображений /ru/docs/Web/API/Canvas_API/Tutorial/Using_images /ru/docs/Web/API/Canvas_API/Tutorial/Композиции /ru/docs/Web/API/Canvas_API/Tutorial/Compositing @@ -322,6 +323,7 @@ /ru/docs/Web/API/Element.insertAdjacentHTML /ru/docs/Web/API/Element/insertAdjacentHTML /ru/docs/Web/API/Element/accessKey /ru/docs/Web/API/HTMLElement/accessKey /ru/docs/Web/API/EventTarget.addEventListener /ru/docs/Web/API/EventTarget/addEventListener +/ru/docs/Web/API/File/fileName /ru/docs/conflicting/Web/API/File/name /ru/docs/Web/API/File_and_Directory_Entries_API/Введение /ru/docs/Web/API/File_and_Directory_Entries_API/Introduction /ru/docs/Web/API/Geolocation/Using_geolocation /ru/docs/Web/API/Geolocation_API /ru/docs/Web/API/Geolocation/Using_geolocation/Using_the_Geolocation_API /ru/docs/Web/API/Geolocation_API/Using_the_Geolocation_API @@ -340,6 +342,8 @@ /ru/docs/Web/API/HTMLHyperlinkElementUtils/toString /ru/docs/Web/API/HTMLAnchorElement/toString /ru/docs/Web/API/HTMLHyperlinkElementUtils/username /ru/docs/Web/API/HTMLAnchorElement/username /ru/docs/Web/API/HTMLImageElement.Image /ru/docs/Web/API/HTMLImageElement/Image +/ru/docs/Web/API/KeyboardEvent/which /ru/docs/Web/API/UIEvent/which +/ru/docs/Web/API/MouseEvent/which /ru/docs/conflicting/Web/API/UIEvent/which /ru/docs/Web/API/NetworkInformation/connection /ru/docs/Web/API/Navigator/connection /ru/docs/Web/API/Node.appendChild /ru/docs/Web/API/Node/appendChild /ru/docs/Web/API/Node.contains /ru/docs/Web/API/Node/contains diff --git a/files/ru/_wikihistory.json b/files/ru/_wikihistory.json index 633ebd6995..d77429f430 100644 --- a/files/ru/_wikihistory.json +++ b/files/ru/_wikihistory.json @@ -5730,13 +5730,6 @@ "sh7dm" ] }, - "Web/API/ByteString": { - "modified": "2019-09-13T04:40:19.326Z", - "contributors": [ - "ekirpichyov", - "opereverzeva" - ] - }, "Web/API/CDATASection": { "modified": "2020-10-15T22:08:24.955Z", "contributors": [ @@ -7987,12 +7980,6 @@ "Lambrusco.pro" ] }, - "Web/API/File/fileName": { - "modified": "2019-03-23T22:09:17.877Z", - "contributors": [ - "Ferguse" - ] - }, "Web/API/File/getAsDataURL": { "modified": "2019-03-23T22:18:17.148Z", "contributors": [ @@ -9241,12 +9228,6 @@ "Tvortsa" ] }, - "Web/API/KeyboardEvent/which": { - "modified": "2020-10-15T22:21:03.336Z", - "contributors": [ - "Dzvonek" - ] - }, "Web/API/Location": { "modified": "2019-08-09T02:31:05.855Z", "contributors": [ @@ -9493,12 +9474,6 @@ "insafski" ] }, - "Web/API/MouseEvent/which": { - "modified": "2020-10-15T22:15:09.701Z", - "contributors": [ - "InoY" - ] - }, "Web/API/MutationObserver": { "modified": "2020-10-15T21:47:37.351Z", "contributors": [ @@ -10517,6 +10492,12 @@ "idushii" ] }, + "Web/API/UIEvent/which": { + "modified": "2020-10-15T22:21:03.336Z", + "contributors": [ + "Dzvonek" + ] + }, "Web/API/URL": { "modified": "2020-10-18T22:13:20.099Z", "contributors": [ @@ -24203,6 +24184,12 @@ "paulvoloschuk" ] }, + "conflicting/Web/API/File/name": { + "modified": "2019-03-23T22:09:17.877Z", + "contributors": [ + "Ferguse" + ] + }, "conflicting/Web/API/Geolocation": { "modified": "2019-03-23T22:43:32.725Z", "contributors": [ @@ -24246,6 +24233,12 @@ "Liubava77" ] }, + "conflicting/Web/API/UIEvent/which": { + "modified": "2020-10-15T22:15:09.701Z", + "contributors": [ + "InoY" + ] + }, "conflicting/Web/API/WebRTC_API": { "modified": "2019-03-23T22:34:55.398Z", "contributors": [ @@ -24556,14 +24549,10 @@ ] }, "conflicting/Web/JavaScript/Reference/Global_Objects/String": { - "modified": "2019-08-27T15:11:15.337Z", + "modified": "2019-09-13T04:40:19.326Z", "contributors": [ - "Yialo", - "EugeneTarasenko", - "ukrlex01", - "arctic-hare", - "webnarmin", - "Mingun" + "ekirpichyov", + "opereverzeva" ] }, "conflicting/Web/JavaScript/Reference/Global_Objects/Symbol": { diff --git a/files/ru/web/api/file/filename/index.html b/files/ru/conflicting/web/api/file/name/index.html index 6b236d1cf1..957bf8e41e 100644 --- a/files/ru/web/api/file/filename/index.html +++ b/files/ru/conflicting/web/api/file/name/index.html @@ -1,7 +1,8 @@ --- title: File.fileName -slug: Web/API/File/fileName +slug: conflicting/Web/API/File/name translation_of: Web/API/File/fileName +original_slug: Web/API/File/fileName --- <p>{{APIRef("File API")}}{{non-standard_header}}</p> diff --git a/files/ru/web/api/mouseevent/which/index.html b/files/ru/conflicting/web/api/uievent/which/index.html index f2a4a8cf09..97f0afc8ad 100644 --- a/files/ru/web/api/mouseevent/which/index.html +++ b/files/ru/conflicting/web/api/uievent/which/index.html @@ -1,10 +1,11 @@ --- title: MouseEvent.which -slug: Web/API/MouseEvent/which +slug: conflicting/Web/API/UIEvent/which tags: - API - "События\_DOM" translation_of: Web/API/MouseEvent/which +original_slug: Web/API/MouseEvent/which --- <p>{{APIRef("DOM Events")}}</p> diff --git a/files/ru/web/api/bytestring/index.html b/files/ru/conflicting/web/javascript/reference/global_objects/string/index.html index 01993390ee..bbf48536b8 100644 --- a/files/ru/web/api/bytestring/index.html +++ b/files/ru/conflicting/web/javascript/reference/global_objects/string/index.html @@ -1,9 +1,10 @@ --- title: ByteString -slug: Web/API/ByteString +slug: conflicting/Web/JavaScript/Reference/Global_Objects/String tags: - Строки translation_of: Web/API/ByteString +original_slug: Web/API/ByteString --- <div>{{APIRef("DOM")}}</div> diff --git a/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html b/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html index bf82bb9b98..8c89ecc871 100644 --- a/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html +++ b/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html @@ -46,7 +46,7 @@ translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Thr <script> var WIDTH = window.innerWidth; var HEIGHT = window.innerHeight; - /* весь наш JavaScript код будет после этого комментария */ + /* весь наш JavaScript-код будет после этого комментария */ </script> </body> </html> @@ -66,7 +66,7 @@ renderer.setClearColor(0xDDDDDD, 1); document.body.appendChild(renderer.domElement); </pre> -<p>Создаём новый WebGL renderer, устанавливаем размер так, чтобы он занимал все пространство страницы, прикрепляем DOM элемент к странице. Вы могли заметить параметр <code>antialias</code> в первой строке — если он установлен в <code>true</code>, то границы объектов сглаживаются. Метод <code>setClearColor()</code> устанавливает цвет фона (мы установили в 0xDDDDDD, светло-серый, значение по умолчанию - чёрный).</p> +<p>Создаём новый WebGL renderer, устанавливаем размер так, чтобы он занимал все пространство страницы, прикрепляем DOM-элемент к странице. Вы могли заметить параметр <code>antialias</code> в первой строке — если он установлен в <code>true</code>, то границы объектов сглаживаются. Метод <code>setClearColor()</code> устанавливает цвет фона (мы установили в 0xDDDDDD, светло-серый, значение по умолчанию - чёрный).</p> <p>Добавьте этот код в ваш элемент {{htmlelement("script")}}.</p> diff --git a/files/ru/games/techniques/3d_on_the_web/glsl_shaders/index.html b/files/ru/games/techniques/3d_on_the_web/glsl_shaders/index.html index 2d89598517..5844e41686 100644 --- a/files/ru/games/techniques/3d_on_the_web/glsl_shaders/index.html +++ b/files/ru/games/techniques/3d_on_the_web/glsl_shaders/index.html @@ -215,7 +215,7 @@ canvas { width: 100%; height: 100%; } <h3 id="Результат">Результат</h3> -<p>{{ EmbedLiveSample('Final_code', '100%', '400', '', 'Games/Techniques/3D_on_the_web/GLSL_Shaders') }}</p> +<p>{{ EmbedLiveSample('Финальный_вариант', '100%', '400', '', 'Games/Techniques/3D_on_the_web/GLSL_Shaders') }}</p> <h2 id="Заключение">Заключение</h2> diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html index 7e4b3d8e30..487843ecad 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html @@ -43,14 +43,14 @@ original_slug: >- <canvas id="myCanvas" width="480" height="320"></canvas> <script> - // JavaScript код будем писать здесь + // JavaScript-код будем писать здесь </script> </body> </html> </pre> -<p>Мы определили <code>charset</code>, {{htmlelement("title")}} и некий базовый CSS в заголовке. Тело документа содержит элементы {{htmlelement("canvas")}} и {{htmlelement("script")}} — мы будем визуализировать игру внутри первого и писать JavaScript код, который управляет игрой, во втором. Элемент {{htmlelement("canvas")}} имеет <code>id</code> равный <code>myCanvas</code>, который позволяет однозначно отыскать элемент. Так же этот элемент имеет ширину 480 пикселей и высоту 320 пикселей. Весь JavaScript код мы будем писать между открывающим тегом <code><script></code> и закрывающим тегом <code></script></code>.</p> +<p>Мы определили <code>charset</code>, {{htmlelement("title")}} и некий базовый CSS в заголовке. Тело документа содержит элементы {{htmlelement("canvas")}} и {{htmlelement("script")}} — мы будем визуализировать игру внутри первого и писать JavaScript-код, который управляет игрой, во втором. Элемент {{htmlelement("canvas")}} имеет <code>id</code> равный <code>myCanvas</code>, который позволяет однозначно отыскать элемент. Так же этот элемент имеет ширину 480 пикселей и высоту 320 пикселей. Весь JavaScript-код мы будем писать между открывающим тегом <code><script></code> и закрывающим тегом <code></script></code>.</p> <h2 id="Основы_Canvas">Основы Canvas</h2> diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html index 5738a86402..6641bd47b3 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html @@ -28,7 +28,7 @@ original_slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Перемест <p>Чтобы canvas постоянно обновлялся, необходимо определить функцию отрисовки, которая будет циклически запускаться с разными параметрами, чтобы изменять позицию элемента. Функцию можно циклически запускать с помощью JavaScript временной функции, такой как {{domxref("WindowTimers.setInterval()", "setInterval()")}} или {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}.</p> -<p>Удалите весь JavaScript код, который сейчас хранился в вашем HTML файле, за исключением первых двух строк, и добавьте следующий код после них. Функция <code>draw()</code> будет исполняться внутри функции <code>setInterval</code> каждые 10 мс:</p> +<p>Удалите весь JavaScript-код, который сейчас хранился в вашем HTML файле, за исключением первых двух строк, и добавьте следующий код после них. Функция <code>draw()</code> будет исполняться внутри функции <code>setInterval</code> каждые 10 мс:</p> <pre class="brush: js">function draw() { // код отрисовки diff --git a/files/ru/glossary/css/index.html b/files/ru/glossary/css/index.html index 1e61b72e51..b6f9240e80 100644 --- a/files/ru/glossary/css/index.html +++ b/files/ru/glossary/css/index.html @@ -10,9 +10,9 @@ original_slug: Глоссарий/CSS --- <p><span class="seoSummary"><strong>CSS</strong> (Cascading Style Sheets, или каскадные таблицы стилей) - это декларативный язык, который отвечает за то, как страницы выглядят в {{glossary("browser","веб браузере")}}. </span>CSS стили содержат свойства и их значения, которые и определяют, как будет выглядеть сайт.</p> -<p>CSS одна из ключевых Web технологий, наряду с {{Glossary("HTML")}} и {{Glossary("JavaScript")}}. Как правило CSS используется для определения стилей {{Glossary("Element","HTML элементов")}}, но также может быть применён совместно с другими языками разметки, такими как {{Glossary("SVG")}} или {{Glossary("XML")}}.</p> +<p>CSS одна из ключевых Web технологий, наряду с {{Glossary("HTML")}} и {{Glossary("JavaScript")}}. Как правило CSS используется для определения стилей {{Glossary("Element","HTML-элементов")}}, но также может быть применён совместно с другими языками разметки, такими как {{Glossary("SVG")}} или {{Glossary("XML")}}.</p> -<p>CSS правило состоит из {{Glossary("selector","селектора")}} и набора {{Glossary("CSS Property","свойств")}} с их значениями. В этом примере все HTML параграфы будут иметь текст жёлтого цвета на чёрном фоне:</p> +<p>CSS-правило состоит из {{Glossary("selector","селектора")}} и набора {{Glossary("CSS Property","свойств")}} с их значениями. В этом примере все HTML параграфы будут иметь текст жёлтого цвета на чёрном фоне:</p> <pre class="brush: css notranslate">/* Селектор "p" означает, что данное правило будет применено ко всем параграфам в документе */ p { diff --git a/files/ru/glossary/global_object/index.html b/files/ru/glossary/global_object/index.html index cfda431f7c..3b67604ecc 100644 --- a/files/ru/glossary/global_object/index.html +++ b/files/ru/glossary/global_object/index.html @@ -9,7 +9,7 @@ original_slug: Глоссарий/Global_object <p>В JavaScript всегда определён глобальный объект. В веб-браузере, когда скрипты создают глобальные переменные, они создаются как свойства глобального объекта. (В {{Glossary("Node.js")}} это не так.) {{Glossary("Interface")}} глобального объекта зависит от контекста, в котором выполняется скрипт.К примеру:</p> <ul> - <li>В веб-браузере любой код, который не запускается скриптом явно как фоновую задачу, имеет {{domxref("Window")}} в качестве своего глобального объекта. Это покрывает большую часть JavaScript кода в сети.</li> + <li>В веб-браузере любой код, который не запускается скриптом явно как фоновую задачу, имеет {{domxref("Window")}} в качестве своего глобального объекта. Это покрывает большую часть JavaScript-кода в сети.</li> <li>Код, работающий в {{domxref("Worker")}} имеет {{domxref("WorkerGlobalScope")}} объект в качестве своего глобального объекта.</li> <li>Скрипты, работающие в {{Glossary("Node.js")}} имеют объект, который называется <code><a href="https://nodejs.org/api/globals.html#globals_global">global</a></code> в качестве своего глобального объекта.</li> </ul> diff --git a/files/ru/glossary/tag/index.html b/files/ru/glossary/tag/index.html index 92d60248a0..595a1bd82f 100644 --- a/files/ru/glossary/tag/index.html +++ b/files/ru/glossary/tag/index.html @@ -9,7 +9,7 @@ tags: translation_of: Glossary/Tag original_slug: Глоссарий/Тег --- -<p>В {{Glossary("HTML")}} теги используются для создания {{Glossary("Элемент", "элементов")}}. <strong>Имя</strong> HTML элемента - это <strong>имя</strong> заключённое в угловые скобки, как например <p> для "абзаца". Обратите внимание, что концу <strong>имени</strong> предшествует символ косой черты (слеша), "</p>", и что в пустых элементах закрывающий тег не требуется и не допускается. Если атрибуты не указаны, то для них применяются значения по умолчанию. </p> +<p>В {{Glossary("HTML")}} теги используются для создания {{Glossary("Элемент", "элементов")}}. <strong>Имя</strong> HTML-элемента - это <strong>имя</strong> заключённое в угловые скобки, как например <p> для "абзаца". Обратите внимание, что концу <strong>имени</strong> предшествует символ косой черты (слеша), "</p>", и что в пустых элементах закрывающий тег не требуется и не допускается. Если атрибуты не указаны, то для них применяются значения по умолчанию. </p> <h2 id="Узнать_больше"><strong>Узнать больше</strong></h2> diff --git a/files/ru/learn/accessibility/html/index.html b/files/ru/learn/accessibility/html/index.html index af0dc28ff9..10af9fe8f9 100644 --- a/files/ru/learn/accessibility/html/index.html +++ b/files/ru/learn/accessibility/html/index.html @@ -19,7 +19,7 @@ original_slug: Learn/Доступность/HTML <div>{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}</div> -<p class="summary">Большая часть содержимого интернета может быть сделана доступной просто благодаря использованию правильных HTML элементов по назначению. В этой статье подробно рассмотрено как HTML может быть использован для обеспечения максимальной доступности.</p> +<p class="summary">Большая часть содержимого интернета может быть сделана доступной просто благодаря использованию правильных HTML-элементов по назначению. В этой статье подробно рассмотрено как HTML может быть использован для обеспечения максимальной доступности.</p> <table class="learn-box standard-table"> <tbody> @@ -38,9 +38,9 @@ original_slug: Learn/Доступность/HTML <h2 id="HTML_и_доступность">HTML и доступность</h2> -<p>По мере изучения HTML: чтения статей, просмотра примеров и т.д., вы заметите одну общую тему — важность использования семантического HTML (иногда называемого POSH (Plain Old Semantic HTML), или «старый добрый семантический HTML»). Это означает использование HTML элементов по назначению насколько это возможно.</p> +<p>По мере изучения HTML: чтения статей, просмотра примеров и т.д., вы заметите одну общую тему — важность использования семантического HTML (иногда называемого POSH (Plain Old Semantic HTML), или «старый добрый семантический HTML»). Это означает использование HTML-элементов по назначению насколько это возможно.</p> -<p>Вы спросите, почему это так важно? В конце концов, можно использовать комбинацию CSS и JavaScript, чтобы заставить почти любой HTML элемент вести себя так, как вы захотите. Например, кнопка для воспроизведения видео на вашем сайте может быть обозначена вот так:</p> +<p>Вы спросите, почему это так важно? В конце концов, можно использовать комбинацию CSS и JavaScript, чтобы заставить почти любой HTML-элемент вести себя так, как вы захотите. Например, кнопка для воспроизведения видео на вашем сайте может быть обозначена вот так:</p> <pre class="brush: html"><div>Воспроизвести видео</div></pre> @@ -48,7 +48,7 @@ original_slug: Learn/Доступность/HTML <pre class="brush: html"><button>Воспроизвести видео</button></pre> -<p>HTML элементы <code><button></code> не только имеют соответствующие кнопке стили по умолчанию (которые вы скорее всего захотите переписать), они также имеют встроенную доступность с клавиатуры: между ними можно передвигаться с помощью кнопки <kbd>Tab</kbd> и активировать, используя <kbd>Enter</kbd>.</p> +<p>HTML-элементы <code><button></code> не только имеют соответствующие кнопке стили по умолчанию (которые вы скорее всего захотите переписать), они также имеют встроенную доступность с клавиатуры: между ними можно передвигаться с помощью кнопки <kbd>Tab</kbd> и активировать, используя <kbd>Enter</kbd>.</p> <p>Вёрстка с помощью семантического HTML не займёт больше времени, чем с помощью не семантического (плохого) HTML, если делать это последовательно с самого начала проекта, и это также имеет другие преимущества помимо доступности:</p> @@ -66,7 +66,7 @@ original_slug: Learn/Доступность/HTML <h2 id="Хорошая_семантика">Хорошая семантика</h2> -<p>Мы уже говорили о важности хорошей семантики, и почему нам стоит использовать HTML элементы по назначению. Это нельзя игнорировать, поскольку это одно из основных мест, где ломается доступность из-за плохой семантики, если должным образом не уделять внимания.</p> +<p>Мы уже говорили о важности хорошей семантики, и почему нам стоит использовать HTML-элементы по назначению. Это нельзя игнорировать, поскольку это одно из основных мест, где ломается доступность из-за плохой семантики, если должным образом не уделять внимания.</p> <p>В интернете люди делают очень странные вещи с HTML разметкой. Некоторые злоупотребляют HTML, используя устаревшие практики, которые не были полностью забыты, а некоторые просто не знают. В любом случае, вам стоит заменить по возможности плохой код, где бы вы его не увидели.</p> diff --git a/files/ru/learn/accessibility/index.html b/files/ru/learn/accessibility/index.html index ddaa937807..aed1c30008 100644 --- a/files/ru/learn/accessibility/index.html +++ b/files/ru/learn/accessibility/index.html @@ -28,7 +28,7 @@ original_slug: Learn/Доступность <dt><a href="/ru/docs/Learn/Accessibility/What_is_accessibility">Что такое доступность?</a></dt> <dd>Данная статья открывает модуль, в котором рассматривается, что такое доступность на самом деле — она включает в себя группы людей, которые нам нужно учитывать и почему, какие инструменты используют разные пользователи для взаимодействия с вебом, и как мы можем сделать доступность частью нашего рабочего процесса веб-разработки.</dd> <dt><a href="/ru-RU/docs/Learn/Accessibility/HTML">HTML: Хорошая основа для доступности</a></dt> - <dd>Большая часть содержимого интернета может быть сделана доступной просто благодаря использованию HTML элементов по назначению. В этой статье подробно рассмотрено как HTML может быть использован для обеспечения максимальной доступности.</dd> + <dd>Большая часть содержимого интернета может быть сделана доступной просто благодаря использованию HTML-элементов по назначению. В этой статье подробно рассмотрено как HTML может быть использован для обеспечения максимальной доступности.</dd> <dt><a href="/ru-RU/docs/Learn/Accessibility/CSS_and_JavaScript">Лучшие практики CSS и JavaScript для обеспечения доступности</a></dt> <dd>CSS и JavaScript, при правильном использовании, также имеют потенциал для обеспечения доступности, но при неправильном использовании они могут существенно ухудшить доступность. Эта статья раскрывает некоторые из лучших практик CSS и JavaScript которые должны помочь сделать даже очень сложное содержимое как можно более доступным.</dd> <dt><a href="/ru-RU/docs/Learn/Accessibility/WAI-ARIA_basics">Основы WAI-ARIA</a></dt> diff --git a/files/ru/learn/common_questions/what_are_browser_developer_tools/index.html b/files/ru/learn/common_questions/what_are_browser_developer_tools/index.html index da683ca2ea..49d64d16a3 100644 --- a/files/ru/learn/common_questions/what_are_browser_developer_tools/index.html +++ b/files/ru/learn/common_questions/what_are_browser_developer_tools/index.html @@ -87,7 +87,7 @@ original_slug: Learn/Discover_browser_developer_tools <h3 id="Обзор_CSS_редактора">Обзор CSS редактора</h3> -<p>По умолчанию, CSS редактор отображает CSS свойства применённые к текущему выбранному элементу:</p> +<p>По умолчанию, CSS редактор отображает CSS-свойства применённые к текущему выбранному элементу:</p> <p><img alt="" src="https://mdn.mozillademos.org/files/9631/css-viewer-2.png" style="border: 1px solid black; display: block; height: 218px; margin: 0px auto; width: 326px;"></p> diff --git a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html index 36aa7ee1e2..ab427b275c 100644 --- a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html +++ b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html @@ -15,7 +15,7 @@ translation_of: Learn/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><span class="tlid-translation translation" lang="ru"><span title="">В этом уроке мы рассмотрим некоторые интересные возможности, которые вы можете сделать с помощью CSS свойств фона и границ .</span> <span title="">Благодаря добавлению градиентов, фоновых изображений и закруглённых углов свойства фона и границ ответят на многие вопросы стилизации в CSS.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">В этом уроке мы рассмотрим некоторые интересные возможности, которые вы можете сделать с помощью CSS-свойств фона и границ .</span> <span title="">Благодаря добавлению градиентов, фоновых изображений и закруглённых углов свойства фона и границ ответят на многие вопросы стилизации в CSS.</span></span></p> <table class="learn-box standard-table"> <tbody> @@ -32,7 +32,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <h2 id="Стилизация_фона_в_CSS">Стилизация фона в CSS</h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">CSS свойство {{cssxref ("background")}} является сокращением для ряда полных свойств фона, с которыми мы познакомимся в этом уроке.</span> <span title="">Если вы обнаружите сложное свойство </span></span><code>background</code><span class="tlid-translation translation" lang="ru"><span title=""> в таблице стилей, это может показаться трудным для понимания, так как одновременно может быть передано так много значений.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">CSS-свойство {{cssxref ("background")}} является сокращением для ряда полных свойств фона, с которыми мы познакомимся в этом уроке.</span> <span title="">Если вы обнаружите сложное свойство </span></span><code>background</code><span class="tlid-translation translation" lang="ru"><span title=""> в таблице стилей, это может показаться трудным для понимания, так как одновременно может быть передано так много значений.</span></span></p> <pre class="brush: css notranslate"><code>.box { background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, diff --git a/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html index 9361af4e38..a3de4a879b 100644 --- a/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html +++ b/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -77,7 +77,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance <p>Некоторые свойства не наследуются — например, если вы установили для элемента {{cssxref("width")}} равным 50%, все его дочерние элементы не получат ширину в 50% от ширины своего родительского элемента. Если бы это было так, CSS было бы чрезвычайно трудно использовать!</p> <div class="blockIndicator note"> -<p><strong>Примечание</strong>: На страницах справочника CSS свойств вы можете найти окно технической информации, обычно в конце раздела спецификации, в котором перечислены некоторые технические данные об этом свойстве, в том числе наследуется оно или нет. Например, здесь: <a href="https://developer.mozilla.org/ru-RU/docs/Web/CSS/color#Specifications">color property Specifications section</a>.</p> +<p><strong>Примечание</strong>: На страницах справочника CSS-свойств вы можете найти окно технической информации, обычно в конце раздела спецификации, в котором перечислены некоторые технические данные об этом свойстве, в том числе наследуется оно или нет. Например, здесь: <a href="https://developer.mozilla.org/ru-RU/docs/Web/CSS/color#Specifications">color property Specifications section</a>.</p> </div> <h2 id="Понимание_взаимодействия_этих_концепций">Понимание взаимодействия этих концепций</h2> @@ -145,7 +145,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance <h2 id="Понимание_каскада">Понимание каскада</h2> -<p>Теперь мы понимаем, почему параграф, следующий по глубине в структуре HTML документа, имеет тот же цвет, что CSS применяет к body, а вводные уроки дали понимание того, как изменить применение CSS к чему-либо в любой точке документа — или назначить CSS элементу, или создать класс. Теперь рассмотрим подробнее то, как каскад определяет выбор CSS правил, применяемых в случае влияния на стиль элемента нескольких объектов.</p> +<p>Теперь мы понимаем, почему параграф, следующий по глубине в структуре HTML документа, имеет тот же цвет, что CSS применяет к body, а вводные уроки дали понимание того, как изменить применение CSS к чему-либо в любой точке документа — или назначить CSS элементу, или создать класс. Теперь рассмотрим подробнее то, как каскад определяет выбор CSS-правил, применяемых в случае влияния на стиль элемента нескольких объектов.</p> <p>Вот три фактора, перечисленные в порядке возрастания важности. Следующий отменяет предыдущий.</p> diff --git a/files/ru/learn/css/css_layout/floats/index.html b/files/ru/learn/css/css_layout/floats/index.html index 7edb7ea011..195ffe4374 100644 --- a/files/ru/learn/css/css_layout/floats/index.html +++ b/files/ru/learn/css/css_layout/floats/index.html @@ -327,7 +327,7 @@ translation_of: Learn/CSS/CSS_layout/Floats display: block; }</pre> -<p>Теперь перезагрузите страницу и блок должен быть очищенным. <span class="tlid-translation translation" lang="ru"><span title="">По сути, это то же самое, как если бы вы добавили </span></span>HTML элемент такой как <code><div></code> ниже объекта и установили <code>clear: both</code>.</p> +<p>Теперь перезагрузите страницу и блок должен быть очищенным. <span class="tlid-translation translation" lang="ru"><span title="">По сути, это то же самое, как если бы вы добавили </span></span>HTML-элемент такой как <code><div></code> ниже объекта и установили <code>clear: both</code>.</p> <div id="Float_5"> <div class="hidden"> diff --git a/files/ru/learn/css/css_layout/introduction/index.html b/files/ru/learn/css/css_layout/introduction/index.html index 4f48b6d402..e8da5eafd9 100644 --- a/files/ru/learn/css/css_layout/introduction/index.html +++ b/files/ru/learn/css/css_layout/introduction/index.html @@ -55,7 +55,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <p>{{ EmbedLiveSample('Normal_flow', '100%', 200) }}</p> -<p>Заметьте, что HTML элементы здесь отображаются точно в таком порядке, как и в исходном коде — первый параграф, за ним неупорядоченный список, затем второй параграф.</p> +<p>Заметьте, что HTML-элементы здесь отображаются точно в таком порядке, как и в исходном коде — первый параграф, за ним неупорядоченный список, затем второй параграф.</p> <p>Элементы, выводящиеся один <em>под</em> другим, называются <em>блочными</em>, в противоположность <em>строчным</em>, которые выводятся один <em>вслед</em> за другим, как отдельные слова в обычном абзаце текста.</p> @@ -79,7 +79,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <p>Значения свойства <code>display</code> являются главными методами вёрстки разметки страницы в CSS. Это свойство позволяет нам менять то, как что-то отображается по умолчанию. Каждый элемент по умолчанию имеет свойство <code>display</code>, влияющее на то, как этот элемент отображается. Например, параграфы на английском располагаются один под другим только потому что они имеют по умолчанию свойство <code>display: block</code>. Если же вы создадите ссылку внутри параграфа, эта ссылка будет отображаться в общем потоке с остальным текстом, без переноса на новую строку. Это потому что у элемента {{htmlelement("a")}} по умолчанию установлено свойство <code>display: inline</code>.</p> -<p>Вы можете изменить дефолтное поведение display. К примеру, {{htmlelement("li")}} отображается как <code>display: block</code> по умолчанию, это означает что элементы списка отображаются один за другим в нашем документе.Если мы изменим значение display на <code>inline</code> они будут отображаться друг за другом, как это делают слова в предложении. Тот факт, что вы можете изменить значение display для любого элемента означает, что вы можете выбирать HTML элементы по их семантическому значению, не беспокоясь о том как они будут выглядеть. То как они выглядят это то, что вы можете поменять.</p> +<p>Вы можете изменить дефолтное поведение display. К примеру, {{htmlelement("li")}} отображается как <code>display: block</code> по умолчанию, это означает что элементы списка отображаются один за другим в нашем документе.Если мы изменим значение display на <code>inline</code> они будут отображаться друг за другом, как это делают слова в предложении. Тот факт, что вы можете изменить значение display для любого элемента означает, что вы можете выбирать HTML-элементы по их семантическому значению, не беспокоясь о том как они будут выглядеть. То как они выглядят это то, что вы можете поменять.</p> <p><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">В дополнение к возможности менять значение с </span></font><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> </span></font>block</code> на <code>inline</code> и обратно, есть и другие возможности вёрстки с другими значениями <code>display</code>. Однако, в основном все они требуют использования дополнительных свойств. Двумя наиболее важными для задач вёрстки страниц являются <code>display: flex</code> и <code>display: grid</code>.</p> @@ -420,7 +420,7 @@ p { <p>Абсолютное (Absolute) позиционирование используется чтобы полностью удалить элемент из нормального потока и разместить его, используя смещение от краёв содержащего блока.</p> -<p>Возвращаясь к нашему примеру без позиционирования, мы можем добавить следующее CSS правило, чтобы реализовать абсолютное позиционирование:</p> +<p>Возвращаясь к нашему примеру без позиционирования, мы можем добавить следующее CSS-правило, чтобы реализовать абсолютное позиционирование:</p> <pre class="brush: css notranslate">.positioned { position: absolute; diff --git a/files/ru/learn/css/index.html b/files/ru/learn/css/index.html index b88d38c409..290cee77a5 100644 --- a/files/ru/learn/css/index.html +++ b/files/ru/learn/css/index.html @@ -1,65 +1,75 @@ --- -title: CSS +title: Научитесь стилизовать HTML с помощью CSS slug: Learn/CSS tags: - - Beginner + - Новичкам - CSS - - Debugging - - Landing - - NeedsContent - - Topic - - TopicStub - - length + - Программирование + - Отладка + - Лэндинг + - Стили + - Тема + - Длина + - Специфичность translation_of: Learn/CSS --- -<p>{{LearnSidebar}}</p> +{{LearnSidebar}} -<p class="summary">Каскадные таблицы стилей, или CSS, — это технология, которую следует изучать непосредственно после HTML. В отличие от HTML, который служит для определения структуры и семантики содержимого, CSS отвечает за его внешний вид и отображение. К примеру, с помощью CSS можно изменять шрифт, цвет, размер, межстрочный интервал, разделять содержимое на колонки, а также добавлять анимацию и другие декоративные элементы.</p> +<p class="summary">Каскадные таблицы стилей — или {{glossary("CSS")}} — это технология, которую следует изучать непосредственно после HTML. В отличие от HTML, который служит для определения структуры и семантики содержимого, CSS отвечает за его внешний вид и отображение. К примеру, с помощью CSS можно изменять шрифт, цвет, размер, межстрочный интервал, разделять содержимое на колонки, а также добавлять анимацию и другие декоративные элементы.</p> -<h2 id="План_обучения">План обучения </h2> +<div class="callout"> + <h4 id="Looking_to_become_a_front-end_web_developer">Хотите стать frontend-разработчиком?</h4> -<p>Прежде чем браться за CSS, вам стоит разобраться с основами HTML. Мы рекомендуем изучить модуль <a href="/ru/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>. После его прохождения переходите к:</p> + <p>Мы составили курс, который содержит всю необходимую информацию для достижения этой цели.</p> -<ul> - <li>изучению CSS, начиная с модуля <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>;</li> - <li>далее — к более продвинутой теме <a href="/ru/docs/Learn/HTML#Модули">HTML-модули</a></li> - <li>после этого — к модулю <a href="/ru/docs/Learn/JavaScript">JavaScript</a> и тому, как его использовать, чтобы добавить вашим веб-страницам динамической функциональности.</li> -</ul> + <p><a href="/ru/docs/Learn/Front-end_web_developer"><strong>Начать изучение курса</strong></a></p> -<p>Мы рекомендуем изучать HTML и CSS одновременно. HTML гораздо интереснее в сочетании с CSS и изучать эти языки раздельно было бы ошибочно.</p> +</div> -<p>В данном разделе содержится информация, которая требует самой базовой ознакомленности с компьютером и интернетом. В статье <a href="/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Установка рабочего пространства</a> подробно описано необходимое ПО и способы его установки, необходимо также будет уметь создавать и управлять файлами, в чём поможет статья <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a>, которая включена в полное руководство для новичка <a href="/ru/docs/Learn/Getting_started_with_the_web">Основы веб</a>.</p> +<h2 id="Необходимые_условия">Необходимые условия</h2> -<p>Перед тем как начинать данный раздел, мы рекомендуем пройти руководство <a href="/ru/docs/Learn/Getting_started_with_the_web">Основы веб</a>, хотя это вовсе не обязательно; большая часть того, что вы найдёте в статье об основах CSS также встречается в разделе<a href="/ru/docs/Learn/CSS/First_steps"> Введение в CSS</a>, хотя и более детально.</p> +<p>Прежде чем браться за CSS, вам стоит разобраться с основами HTML. Мы рекомендуем сначала изучить модуль <a href="/ru/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a></p> + +<p>После того как вы разберётесь с основами HTML, мы рекомендуем продолжать изучение HTML и CSS одновременно, переключаясь между темами. HTML гораздо интереснее в сочетании с CSS, и вы не можете по настоящему изучить CSS не зная HTML</p> + +<p>В данном разделе содержится информация, которая требует базового знакомства с компьютером и интернетом. В статье <a href="/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Установка рабочего пространства</a> подробно описано необходимое ПО и способы его установки, необходимо также будет уметь создавать и управлять файлами, в чём поможет статья <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a>, которая включена в полное руководство для новичка <a href="/ru/docs/Learn/Getting_started_with_the_web">Основы веб</a>.</p> + +<p>Перед тем как начинать данный раздел, мы рекомендуем пройти руководство <a href="/ru/docs/Learn/Getting_started_with_the_web">Основы веб</a>, хотя это вовсе не обязательно — большая часть того, что вы найдёте в статье об основах CSS также встречается в разделе <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>, хотя и более детально.</p> <h2 id="Модули">Модули</h2> <p>Этот раздел содержит модули в порядке, наиболее подходящем для работы с ними. Лучше всего начать с самого первого.</p> <dl> - <dt><a href="/ru/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a></dt> - <dd>CSS (каскадные таблицы стилей) используется для стилизации и компоновки веб-страниц, — например, для изменения шрифта, цвета, размера и интервала содержимого, разделения его на несколько столбцов или добавления анимации и других декоративных элементов. Этот модуль обеспечивает хорошее начало вашего пути к освоению CSS с основами того, как он работает, как выглядит синтаксис и как вы можете начать использовать его для добавления стилей в HTML.</dd> - <dt><a href="/ru/docs/Learn/CSS/Styling_text">Дизайн текста</a></dt> - <dd>Здесь мы рассмотрим основы стилизации текста, в том числе изменение шрифта, жирности, курсивного написания, межстрочного и межбуквенного интервалов, теней и других особенностей текста. Завершается модуль демонстрацией применения пользовательских шрифтов на вашей странице, оформлением списков и ссылок.</dd> - <dt><a href="/ru/docs/Learn/CSS/Styling_boxes">Стилизация блоков</a></dt> - <dd>Далее мы рассмотрим дизайн блоков, один из основных шагов к разметке веб-страницы. В этом модуле мы кратко рассмотрим работу с блочными элементами, а затем ознакомимся с приёмами управления блоками, установив такие свойства, как поля, отступы и границы, настроим фоновые цвет и изображение, а также рассмотрим более сложные функции, такие как тени и фильтры.</dd> - <dt><a href="/ru/docs/Learn/CSS/CSS_layout">Размещение элементов с помощью CSS</a></dt> - <dd>К текущему моменту мы познакомились с основами CSS. Мы знаем, как оформлять текст, как оформлять и изменять блоки, в которых находится ваш контент. Пришло время узнать, как разместить ваши блоки в нужных местах в зависимости от области просмотра и тому подобного. Мы уже знаем достаточно, чтобы погрузиться в изучение разметки с помощью CSS, в то, как изменять отображение в зависимости от особенностей экрана, как использовать современные методы разметки, такие как Flexbox и CSS grid, и некоторые традиционные методы разметки, которые все ещё применяются.</dd> - <dt>Адаптивный дизайн (TBD)</dt> - <dd><span id="result_box" lang="ru"><span>В настоящее время существует множество устройств, способных осуществлять просмотр веб-страниц, адаптивный веб-дизайн (RWD - Responsive Web Design) стал основным навыком веб-разработки.</span> <span>В этом модуле рассказывается об основных принципах и инструментах RWD, объясняется, как применять различные CSS к документу в зависимости от таких функций устройства, как ширина экрана, ориентация и разрешение, а также изучить имеющиеся возможности отображения различных видео и изображений в зависимости от характеристик используемого пользователем устройства.</span></span></dd> + <dt><a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a></dt> + <dd>CSS (каскадные таблицы стилей) используется для стилизации и компоновки веб-страниц — например, для изменения шрифта, цвета, размера и интервала содержимого, разделения его на несколько столбцов или добавления анимации и других декоративных элементов. Этот модуль обеспечивает хорошее начало вашего пути к освоению CSS с основами того, как он работает, как выглядит синтаксис и как вы можете начать использовать его для добавления стилей в HTML.</dd> + <dt><a href="/ru/docs/Learn/CSS/Building_blocks">Устройство CSS</a></dt> + <dd> + <p class="summary">Этот модуль продолжается с того места, где закончился модуль <a href="/ru/docs/Learn/CSS/First_steps">введение в CSS</a> — теперь, после того как вы познакомились с языком и получили опыт его использования, пришло время погрузится немного глубже. В этот модуле рассказывается про каскад и наследование, все доступные типы селекторов, единицы измерения, размеры, стилизацию фона и рамок, отладку, и многое другое.</p> + + <p class="summary">Цель этого модуля — предоставить вам инструментарий для написания компетентного CSS, перед переходом к более специфичным дисциплинам, как <a href="/ru/docs/Learn/CSS/Styling_text">стилизация текста</a> и <a href="/ru/docs/Learn/CSS/CSS_layout">CSS раскладки</a>.</p> + </dd> + <dt><a href="/ru/docs/Learn/CSS/Styling_text">Стилизация текста</a></dt> + <dd>После изучения основ, следующая тема, которую стоит изучить — стилизация текста. Это одна из самых распространенных вещей, для которых используется CSS. В этом модуле мы рассмотрим основы стилизации текста, включая установку шрифта, жирность, курсив, межстрочный и межбуквенный интервалы, тени и другие особенности оформления. В завершении модуля мы рассмотрим подключение пользовательских шрифтов на странице, а так же стилизацию списков и ссылок</dd> + <dt><a href="/ru/docs/Learn/CSS/CSS_layout">CSS раскладки</a></dt> + <dd>К текущему моменту мы познакомились с основами CSS. Мы знаем, как оформлять текст, как оформлять и изменять блоки, в которых находится ваш контент. Пришло время узнать, как разместить ваши блоки в нужных местах в зависимости от области просмотра и тому подобного. Мы уже знаем достаточно, чтобы погрузиться в изучение раскладки с помощью CSS, в то, как изменять отображение в зависимости от особенностей экрана, как использовать современные методы раскладки, такие как Flexbox и CSS grid, и некоторые традиционные методы раскладки, которые все ещё применяются.</dd> </dl> -<h2 id="Решаем_часто_встречающиеся_проблемы_в_CSS">Решаем часто встречающиеся проблемы в CSS</h2> +<h2 id="Решаем_часто_встречающиеся_проблемы_в_CSS">Решаем часто встречающиеся проблемы в CSS</h2> + +<p>В разделе <strong><a href="/ru/docs/Learn/CSS/Howto">Использование CSS для решения общих проблем</a></strong> даны ссылки на разделы, объясняющие, как следует использовать CSS для решения самых распространённых проблем при создании веб-страницы.</p> + +<p>В самом начале вы будете применять цвет к тексту и фону HTML-элементов, изменять их размер, форму, местоположение, добавлять и стилизовать границы. Однако с углублённым знанием даже основ CSS вы сможете сделать практически что угодно. Одним из плюсов изучения CSS является то, что вы быстро начнёте понимать, можно или нельзя что-то сделать средствами CSS, даже если вы ещё не уверены, как это сделать.</p> + +<h2 id="CSS_странный">"CSS странный"</h2> -<p>В разделе <strong><a href="/ru/docs/Learn/CSS/Как">Использование CSS для решения общих проблем</a></strong> даны ссылки на разделы, объясняющие, как следует использовать CSS для решения самых распространённых проблем при создании веб-страницы.</p> +<p>CSS иначе, чем большинство языков программирования и инструментов для дизайна, с которыми вы можете столкнуться. Почему это работает именно так? В следующем видео, Мириам Сюзанна дает объяснение того, почему CSS работает так, как он работает, и почему он так развивался:</p> -<p>В самом начале вы будете применять цвет к тексту и фону HTML-элементов, изменять их размер, форму, местоположение, добавлять и стилизовать границы. Однако с уверенным знанием даже основ CSS вы сможете сделать практически что угодно. Одним из плюсов изучения CSS является то, что вы быстро начнёте понимать, можно или нельзя что-то сделать средствами CSS, даже если вы ещё не уверены, как это сделать. </p> +<p>{{EmbedYouTube("aHUtMbJw8iA")}}</p> <h2 id="Смотрите_также">Смотрите также</h2> <dl> - <dt><a href="/ru/docs/Web/CSS">CSS на MDN</a></dt> - <dd>Основная точка входа для CSS документации на MDN с подробными ссылками на дополнительные учебники.</dd> - <dt><a href="/ru/docs/Web/CSS/Reference">CSS-справочник</a></dt> - <dd><span id="result_box" lang="ru"><span>Комплексный</span> <span>справочник по</span> <span>всем многочисленным</span> <span>особенностям</span> <span>языка</span> <span>CSS,</span></span> — если Вы, к примеру, хотите знать, какие значения может иметь свойство, то вам сюда.</dd> + <dt><a href="/ru/docs/Web/CSS">CSS на MDN</a></dt> + <dd>Основная точка входа для CSS документации на MDN, где вы найдете вы найдете справочную информацию по функциям языка CSS. Хотите знать все значения, которые может принимать какое-либо свойство? Тогда вам сюда</dd> </dl> diff --git a/files/ru/learn/css/styling_text/index.html b/files/ru/learn/css/styling_text/index.html index 0057acaf1d..b4dbc60ec6 100644 --- a/files/ru/learn/css/styling_text/index.html +++ b/files/ru/learn/css/styling_text/index.html @@ -42,7 +42,7 @@ translation_of: Learn/CSS/Styling_text <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Основы стилизации текста и шрифта</a></dt> <dd>В этой статье мы детально изучим стилизацию текста и шрифтов, включая параметры weight, family, style, font shorthand, text alignment и прочие эффекты, а также line и letter spacing.</dd> <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Стилизация списков</a></dt> - <dd>Списки, по большей части, ведут себе так же, как и любой другой текст, но они имеют некоторые особые CSS свойства о которых нужно знать, и<br> + <dd>Списки, по большей части, ведут себе так же, как и любой другой текст, но они имеют некоторые особые CSS-свойства о которых нужно знать, и<br> некоторые методы которые стоит принять во внимание. Эта статья все разъясняет.</dd> <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Стилизация ссылок</a></dt> <dd>При стилизации ссылок важно понимать, как эффективно использовать псевдоклассы для стилизации состояний ссылок, и как стилизовать ссылки для использования в общих разнообразных функциях интерфейса, таких как навигационные меню и вкладки. Мы рассмотрим все эти темы в этой статье.</dd> diff --git a/files/ru/learn/forms/how_to_build_custom_form_controls/index.html b/files/ru/learn/forms/how_to_build_custom_form_controls/index.html index c7b901c27e..5799a28391 100644 --- a/files/ru/learn/forms/how_to_build_custom_form_controls/index.html +++ b/files/ru/learn/forms/how_to_build_custom_form_controls/index.html @@ -18,7 +18,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <p>В этой статье мы рассмотрим как создать такой виджет. Для этого мы возьмём пример: переделка элемента {{HTMLElement("select")}} .</p> <div class="note"> -<p><strong>Замечание:</strong> Мы сфокусируемся на создании виджетов, а не на том чтобы сделать код универсальным и многоразовым; поэтому будут использоваться некоторый нетривиальный JavaScript код и манипуляции DOM в неизвестном контексте, что выходит за рамки этой статьи.</p> +<p><strong>Замечание:</strong> Мы сфокусируемся на создании виджетов, а не на том чтобы сделать код универсальным и многоразовым; поэтому будут использоваться некоторый нетривиальный JavaScript-код и манипуляции DOM в неизвестном контексте, что выходит за рамки этой статьи.</p> </div> <h2 id="Дизайн_структура_и_семантика">Дизайн, структура и семантика</h2> @@ -338,7 +338,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <p>Из-за этого очень важно серьёзно подумать о том, что произойдёт, если JavaScript не сработает. Детальное рассмотрение этой проблемы выходит за рамки данной статьи, поскольку эта проблема тесно связана с тем, насколько универсальным и многократно используемым вы хотите сделать свой сценарий, но мы рассмотрим основы этого в нашем примере.</p> -<p>В нашем примере, если наш JavaScript код не работает, мы используем стандартный элемент {{HTMLElement("select")}}. Для этого, нам нужны две вещи.</p> +<p>В нашем примере, если наш JavaScript-код не работает, мы используем стандартный элемент {{HTMLElement("select")}}. Для этого, нам нужны две вещи.</p> <p>Во-первых нам нужно добавить стандартный элемент {{HTMLElement("select")}} перед каждым использованием нашего пользовательского виджета. Это также необходимо, чтобы отправить данные из нашего пользовательского виджета вместе с остальными данными формы; подробнее рассмотрим это позже.</p> diff --git a/files/ru/learn/getting_started_with_the_web/css_basics/index.html b/files/ru/learn/getting_started_with_the_web/css_basics/index.html index c7b482741e..4dc41f824a 100644 --- a/files/ru/learn/getting_started_with_the_web/css_basics/index.html +++ b/files/ru/learn/getting_started_with_the_web/css_basics/index.html @@ -53,11 +53,11 @@ translation_of: Learn/Getting_started_with_the_web/CSS_basics <dl> <dt>Селектор (Selector)</dt> - <dd>Имя HTML элемента в начале набора правил. Он выбирает элемент(ы) для применения стиля (в данном случае, элементы <code>p</code> ). Для стилизации другого элемента, просто измените селектор.</dd> + <dd>Имя HTML-элемента в начале набора правил. Он выбирает элемент(ы) для применения стиля (в данном случае, элементы <code>p</code> ). Для стилизации другого элемента, просто измените селектор.</dd> <dt>Объявление (Declaration)</dt> <dd>Единственное правило, например <code>color: red;</code> указывает, какие из <strong>свойств</strong> элемента вы хотите стилизовать.</dd> <dt>Свойства (Properties)</dt> - <dd>Способы, которыми вы можете стилизовать определённый HTML элемент (в данном случае, <code>color</code> является свойством для элементов {{htmlelement("p")}}). В CSS вы выбираете, какие свойства вы хотите затронуть в вашем правиле.</dd> + <dd>Способы, которыми вы можете стилизовать определённый HTML-элемент (в данном случае, <code>color</code> является свойством для элементов {{htmlelement("p")}}). В CSS вы выбираете, какие свойства вы хотите затронуть в вашем правиле.</dd> <dt>Значение свойства (Property value)</dt> <dd>Справа от свойства, после двоеточия, у нас есть <strong>значение свойства</strong>, которое выбирает одно из множества возможных признаков для данного свойства (существует множество значений <code>color</code>, помимо <code>red</code>).</dd> </dl> @@ -101,7 +101,7 @@ translation_of: Learn/Getting_started_with_the_web/CSS_basics <tbody> <tr> <td>Селектор элемента (иногда называемый селектором тега или типа)</td> - <td>Все HTML элемент(ы) указанного типа.</td> + <td>Все HTML-элемент(ы) указанного типа.</td> <td><code>p</code><br> Выбирает <code><p></code></td> </tr> @@ -142,7 +142,7 @@ translation_of: Learn/Getting_started_with_the_web/CSS_basics <li>Прежде всего, вернитесь и найдите <a href="/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">вывод из Google Fonts</a>, который вы уже где-то сохранили. Добавьте элемент {{htmlelement("link")}} где-нибудь внутри шапки вашего <code>index.html</code> (снова, в любом месте между тегами <code><head></code> и <code></head></code>). Это будет выглядеть примерно так: <pre class="brush: html notranslate"><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'></pre> - Этот код связывает вашу страницу с таблицой стилями, которая загружает семейство шрифтов Open Sans вместе с вашей страницей и позволяет вам применять их к вашим HTML элементам используя свою собственную таблицу стилей.</li> + Этот код связывает вашу страницу с таблицой стилями, которая загружает семейство шрифтов Open Sans вместе с вашей страницей и позволяет вам применять их к вашим HTML-элементам используя свою собственную таблицу стилей.</li> <li>Затем, удалите существующее правило в вашем <code>style.css</code> файле. Это был хороший тест, но красный текст, на самом деле, не очень хорошо выглядит.</li> <li>Добавьте следующие строки в нужное место, заменив строку <code>placeholder</code> актуальной <code>font-family</code> строкой, которую вы получили из Google Fonts. (<code>font-family</code> просто означает, какой шрифт(ы) вы хотите использовать для вашего текста). Это правило устанавливает глобальный базовый шрифт и размер шрифта для всей страницы (поскольку <code><html></code> является родительским элементом для всей страницы, и все элементы внутри него наследуют такой же <code>font-size</code> и <code>font-family</code>): <pre class="brush: css notranslate">html { @@ -174,7 +174,7 @@ p, li { <h2 id="Блоки_блоки_и_ещё_раз_блоки">Блоки, блоки и ещё раз блоки</h2> -<p>Одна вещь, которую вы заметите в написании CSS, заключается в том, что многое из этого касается блоков - настройка их размера, цвета, положения и т.д. Большинство HTML элементов на странице можно рассматривать как блоки, расположенные друг над другом.</p> +<p>Одна вещь, которую вы заметите в написании CSS, заключается в том, что многое из этого касается блоков - настройка их размера, цвета, положения и т.д. Большинство HTML-элементов на странице можно рассматривать как блоки, расположенные друг над другом.</p> <p><img alt="a big stack of boxes or crates sat on top of one another" src="boxes.jpg" style="display: block; margin: 0px auto;"></p> diff --git a/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.html index 90702e8220..c3868ca83b 100644 --- a/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.html +++ b/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -51,7 +51,7 @@ translation_of: Learn/Getting_started_with_the_web/Dealing_with_files <li><code><strong>index.html</strong></code>: Этот файл обычно содержит контент домашней страницы, то есть текст и изображения, которые люди видят, когда они впервые попадают на ваш сайт. Используя ваш текстовый редактор, создайте новый файл с именем <code>index.html</code> и сохраните его прямо внутри вашей папки <code>test-site</code>.</li> <li><strong>Папка <code>images</code></strong>: Эта папка будет содержать все изображения, которые вы используете на вашем сайте. Создайте папку с именем <code>images</code> внутри вашей папки <code>test-site</code>.</li> <li><strong>Папка <code>styles</code></strong>: Эта папка будет содержать CSS код, используемый для стилизации вашего контента (например, настройка текста и цвета фона). Создайте папку с именем <code>styles</code> внутри вашей папки <code>test-site</code>.</li> - <li><strong>Папка <code>scripts</code></strong>: Эта папка будет содержать весь JavaScript код, используемый для добавления интерактивных функций на вашем сайте (например, кнопки которые загружают данные при клике). Создайте папку с именем <code>scripts</code> внутри вашей папки <code>test-site</code>.</li> + <li><strong>Папка <code>scripts</code></strong>: Эта папка будет содержать весь JavaScript-код, используемый для добавления интерактивных функций на вашем сайте (например, кнопки которые загружают данные при клике). Создайте папку с именем <code>scripts</code> внутри вашей папки <code>test-site</code>.</li> </ol> <div class="note"> diff --git a/files/ru/learn/getting_started_with_the_web/javascript_basics/index.html b/files/ru/learn/getting_started_with_the_web/javascript_basics/index.html index 2e6e3278ea..1a7219bb05 100644 --- a/files/ru/learn/getting_started_with_the_web/javascript_basics/index.html +++ b/files/ru/learn/getting_started_with_the_web/javascript_basics/index.html @@ -162,7 +162,7 @@ myVariable = 'Steve';</pre> <h3 id="Комментарии">Комментарии</h3> -<p>Комментарии - это, по сути, короткие фрагменты текста, которые могут быть добавлены в код, и которые игнорируются браузером. Вы можете поместить комментарии в JavaScript код, так же как вы делали это в CSS:</p> +<p>Комментарии - это, по сути, короткие фрагменты текста, которые могут быть добавлены в код, и которые игнорируются браузером. Вы можете поместить комментарии в JavaScript-код, так же как вы делали это в CSS:</p> <pre class="brush: js notranslate">/* Всё, что находится тут - комментарий. diff --git a/files/ru/learn/html/introduction_to_html/getting_started/index.html b/files/ru/learn/html/introduction_to_html/getting_started/index.html index 2aaf93d4a4..e186996164 100644 --- a/files/ru/learn/html/introduction_to_html/getting_started/index.html +++ b/files/ru/learn/html/introduction_to_html/getting_started/index.html @@ -48,7 +48,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Начало_работы <p><strong>Примечание</strong>: Метки в HTML нечувствительны к регистру, то есть они могут быть записаны в верхнем или нижнем регистре. Например, тег {{htmlelement("title")}} может быть записан как <code><title></code>, <code><TITLE></code>, <code><Title></code>, <code><TiTlE></code>, и т.д., и он будет работать нормально. Лучшей практикой, однако, является запись всех тегов в нижнем регистре для обеспечения согласованности, удобочитаемости и других причин.</p> </div> -<h2 id="Структура_HTML_элементов">Структура HTML элементов</h2> +<h2 id="Структура_HTML_элементов">Структура HTML-элементов</h2> <p>Давайте рассмотрим элемент "параграф" чуть подробнее:</p> @@ -63,7 +63,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Начало_работы <li><strong>Элемент:</strong> открывающий тег + закрывающий тег + содержимое = элемент.</li> </ol> -<h3 id="active_learning_adding_attributes_to_an_element">Активное изучение: создание вашего первого HTML элемента</h3> +<h3 id="active_learning_adding_attributes_to_an_element">Активное изучение: создание вашего первого HTML-элемента</h3> <p>Отредактируйте строку текста ниже в поле <em>Ввод</em>, обернув её тегами <code><em></code> и <code></em></code> (вставьте <code><em></code> перед строкой, чтобы <em>указать начало элемента</em>, и <code></em></code> после неё, чтобы <em>указать конец элемента</em>) — эти действия должны выделить строку текста курсивом! Вы можете видеть изменения в реальном времени в поле <em>Вывод</em>.</p> @@ -459,7 +459,7 @@ textarea.onkeyup = function(){ <h2 id="Структура_HTML_документа">Структура HTML документа</h2> -<p>Ниже дан пример оборачивания основных, самостоятельных HTML элементов, которые сами по себе не очень полезны. Давайте посмотрим, как самостоятельные элементы объединяются для формирования всей HTML страницы:</p> +<p>Ниже дан пример оборачивания основных, самостоятельных HTML-элементов, которые сами по себе не очень полезны. Давайте посмотрим, как самостоятельные элементы объединяются для формирования всей HTML страницы:</p> <pre class="brush: html notranslate"><!DOCTYPE html> <html> diff --git a/files/ru/learn/html/introduction_to_html/index.html b/files/ru/learn/html/introduction_to_html/index.html index 336321157d..81fd942bf8 100644 --- a/files/ru/learn/html/introduction_to_html/index.html +++ b/files/ru/learn/html/introduction_to_html/index.html @@ -34,7 +34,7 @@ original_slug: Learn/HTML/Введение_в_HTML <dl> <dt><a href="/ru/docs/Learn/HTML/Введение_в_HTML/Начало_работы">Начало работы с HTML</a></dt> - <dd>Охватывает базовые основы HTML, чтобы вы начали изучение - мы опишем элементы, атрибуты и все другие важные термины, о которых вы, возможно, уже слышали, а также где и как они располагаются в языке. Мы также покажем, структуру HTML элемента, как устроена типичная страница HTML, и объясним другие важные языковые особенности. По ходу мы будем играть с HTML так, чтобы вам было интересно!</dd> + <dd>Охватывает базовые основы HTML, чтобы вы начали изучение - мы опишем элементы, атрибуты и все другие важные термины, о которых вы, возможно, уже слышали, а также где и как они располагаются в языке. Мы также покажем, структуру HTML-элемента, как устроена типичная страница HTML, и объясним другие важные языковые особенности. По ходу мы будем играть с HTML так, чтобы вам было интересно!</dd> <dt><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></dt> <dd>Заголовок HTML — это часть документа, которая <strong>не отображается</strong> в браузере при загрузке страницы. Он содержит информацию, такую как: страница {{htmlelement("title")}}, ссылки на {{glossary("CSS")}} (если вы хотите стилизовать свой HTML при помощи CSS), ссылки на пользовательские значки и метаданные (которые представляют собой данные о HTML, например, кто его написал или важные ключевые слова, которые описывают документ).</dd> <dt><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></dt> diff --git a/files/ru/learn/javascript/asynchronous/concepts/index.html b/files/ru/learn/javascript/asynchronous/concepts/index.html index cd87899ec3..bdc84b6f72 100644 --- a/files/ru/learn/javascript/asynchronous/concepts/index.html +++ b/files/ru/learn/javascript/asynchronous/concepts/index.html @@ -117,7 +117,7 @@ Thread 2: Task C --> Task D</pre> <pre class="notranslate">Main thread: Render circles to canvas --> Display alert()</pre> -<p>В итоге, JavaScript получил несколько инструментов, которые могут помочь в решении подобных проблем. <a href="/en-US/docs/Web/API/Web_Workers_API">Web workers</a> позволяют вам обработать некоторый JavaScript код в отдельном потоке, который называется обработчик, таким образом вы можете запускать отдельные блоки JavaScript кода одновременно. В основном, вы будете использовать воркеры, чтобы запустить ресурсоёмкий процесс, отдельно от основного потока, чтобы не блокировать действия пользователя.</p> +<p>В итоге, JavaScript получил несколько инструментов, которые могут помочь в решении подобных проблем. <a href="/en-US/docs/Web/API/Web_Workers_API">Web workers</a> позволяют вам обработать некоторый JavaScript-код в отдельном потоке, который называется обработчик, таким образом вы можете запускать отдельные блоки JavaScript-кода одновременно. В основном, вы будете использовать воркеры, чтобы запустить ресурсоёмкий процесс, отдельно от основного потока, чтобы не блокировать действия пользователя.</p> <pre class="notranslate"> Main thread: Task A --> Task C Worker thread: Expensive task B</pre> diff --git a/files/ru/learn/javascript/asynchronous/introducing/index.html b/files/ru/learn/javascript/asynchronous/introducing/index.html index f8f24c442d..9be0564c1d 100644 --- a/files/ru/learn/javascript/asynchronous/introducing/index.html +++ b/files/ru/learn/javascript/asynchronous/introducing/index.html @@ -176,7 +176,7 @@ gods.forEach(function (eachName, index){ <h3 id="Очередь_событий">Очередь событий</h3> -<p>Асинхронные операции, такие как промисы, помещаются в <strong>очередь событий</strong>, которая запускается после завершения обработки основного потока, чтобы они <em>не блокировали</em> выполнение JavaScript кода. Поставленные в очередь операции завершатся как можно скорее, а затем вернут свои результаты в среду JavaScript .</p> +<p>Асинхронные операции, такие как промисы, помещаются в <strong>очередь событий</strong>, которая запускается после завершения обработки основного потока, чтобы они <em>не блокировали</em> выполнение JavaScript-кода. Поставленные в очередь операции завершатся как можно скорее, а затем вернут свои результаты в среду JavaScript .</p> <h3 id="Промисы_и_колбэк-функции">Промисы и колбэк-функции</h3> diff --git a/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html b/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html index 50550da46a..8d00ba98af 100644 --- a/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html +++ b/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html @@ -360,7 +360,7 @@ div { <p>Разместите {{htmlelement("script")}} элемент перед <code></body></code> .</p> </li> <li> - <p>Разместите следующий JavaScript код в <code><script></code> . Здесь вы сохраняете ссылку на <code><div></code> внутри, устанавливаете для переменной <code>rotateCount</code> значение <code>0</code>, устанавливаете неинициализированную переменную, которая позже будет использоваться для хранения ссылки на вызов <code>requestAnimationFrame()</code>, и устанавливаете для переменной <code>startTime</code> значение <code>null</code>, которая будет позже использоваться для хранения времени начала <code>requestAnimationFrame()</code>.</p> + <p>Разместите следующий JavaScript-код в <code><script></code> . Здесь вы сохраняете ссылку на <code><div></code> внутри, устанавливаете для переменной <code>rotateCount</code> значение <code>0</code>, устанавливаете неинициализированную переменную, которая позже будет использоваться для хранения ссылки на вызов <code>requestAnimationFrame()</code>, и устанавливаете для переменной <code>startTime</code> значение <code>null</code>, которая будет позже использоваться для хранения времени начала <code>requestAnimationFrame()</code>.</p> <pre class="brush: js notranslate">const spinner = document.querySelector('div'); let rotateCount = 0; @@ -480,7 +480,7 @@ let rAF; <ol> <li> - <p>Прежде всего, скачайте <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html">стартовый файл</a>. Он содержит законченную структуру HTML и стили CSS, что даёт нам игровую доску, которая показывает информацию двух игроков (как показано выше), но с счётчиком и параграфом результатов, отображаемыми друг над другом. Вам нужно просто написать JavaScript код.</p> + <p>Прежде всего, скачайте <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html">стартовый файл</a>. Он содержит законченную структуру HTML и стили CSS, что даёт нам игровую доску, которая показывает информацию двух игроков (как показано выше), но с счётчиком и параграфом результатов, отображаемыми друг над другом. Вам нужно просто написать JavaScript-код.</p> </li> <li> <p>Внутри пустого элемента {{htmlelement("script")}} на вашей странице, начните с добавления следующих строк кода, которые определяют некоторые переменные и константы, которые вам понадобятся в дальнейшем:</p> diff --git a/files/ru/learn/javascript/building_blocks/image_gallery/index.html b/files/ru/learn/javascript/building_blocks/image_gallery/index.html index eaf3499a4d..8747a57971 100644 --- a/files/ru/learn/javascript/building_blocks/image_gallery/index.html +++ b/files/ru/learn/javascript/building_blocks/image_gallery/index.html @@ -40,7 +40,7 @@ translation_of: Learn/JavaScript/Building_blocks/Image_gallery <h2 id="Обзор_проекта">Обзор проекта</h2> -<p>В примере вы увидите несколько файлов HTML, CSS и изображений и несколько строк JavaScript кода. Вам нужно написать недостающий JavaScript код для того чтобы галерея заработала. Каркас HTML страницы выглядит так:</p> +<p>В примере вы увидите несколько файлов HTML, CSS и изображений и несколько строк JavaScript-кода. Вам нужно написать недостающий JavaScript-код для того чтобы галерея заработала. Каркас HTML страницы выглядит так:</p> <pre class="brush: html"><h1>Пример фотогалереи</h1> diff --git a/files/ru/learn/javascript/building_blocks/return_values/index.html b/files/ru/learn/javascript/building_blocks/return_values/index.html index 6354334caa..d562ac8034 100644 --- a/files/ru/learn/javascript/building_blocks/return_values/index.html +++ b/files/ru/learn/javascript/building_blocks/return_values/index.html @@ -90,7 +90,7 @@ console.log(newString); <p>Теперь напишем нашу собственную возвращающую значение функцию.</p> <ol> - <li>Первым делом, сделайте локальную копию файла <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library.html">function-library.html</a> из GitHub. Это простая HTML страничка, содержащая текстовое поле {{htmlelement("input")}} и параграф Также там есть элемент {{htmlelement("script")}} в котором мы храним в 2ух переменных ссылки на оба HTML элемента. Это маленькая страничка позволит вам ввести число в text box и отобразит различные, относящиеся к нему числа в параграфе ниже.</li> + <li>Первым делом, сделайте локальную копию файла <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library.html">function-library.html</a> из GitHub. Это простая HTML страничка, содержащая текстовое поле {{htmlelement("input")}} и параграф Также там есть элемент {{htmlelement("script")}} в котором мы храним в 2ух переменных ссылки на оба HTML-элемента. Это маленькая страничка позволит вам ввести число в text box и отобразит различные, относящиеся к нему числа в параграфе ниже.</li> <li>Теперь добавим несколько полезных функций в элемент <code><script></code> . Ниже двух существующих строчек JavaScript, добавьте следующие описания функций: <pre class="brush: js">function squared(num) { return num * num; diff --git a/files/ru/learn/javascript/client-side_web_apis/introduction/index.html b/files/ru/learn/javascript/client-side_web_apis/introduction/index.html index 5e2895d615..32cf39bfb3 100644 --- a/files/ru/learn/javascript/client-side_web_apis/introduction/index.html +++ b/files/ru/learn/javascript/client-side_web_apis/introduction/index.html @@ -260,7 +260,7 @@ request.onload = function() { <h2 id="Итоги">Итоги</h2> -<p>На данном этапе, у вас должно сформироваться представление о том, что такое API, как они работают и как вы можете применить их в своём JavaScript коде. Вам наверняка не терпится начать делать по-настоящему интересные вещи с конкретными API, так вперёд! В следующий раз мы рассмотрим работу с документом с помощью Document Object Model (DOM).</p> +<p>На данном этапе, у вас должно сформироваться представление о том, что такое API, как они работают и как вы можете применить их в своём JavaScript-коде. Вам наверняка не терпится начать делать по-настоящему интересные вещи с конкретными API, так вперёд! В следующий раз мы рассмотрим работу с документом с помощью Document Object Model (DOM).</p> <p>{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}</p> diff --git a/files/ru/learn/javascript/first_steps/index.html b/files/ru/learn/javascript/first_steps/index.html index 9e296362a7..5f02bb1255 100644 --- a/files/ru/learn/javascript/first_steps/index.html +++ b/files/ru/learn/javascript/first_steps/index.html @@ -34,7 +34,7 @@ original_slug: Learn/JavaScript/Первые_шаги <dt><a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/A_first_splash">Первое погружение в JavaScript</a></dt> <dd>Теперь, когда вы знаете кое-что о JavaScript, и что он может делать, мы предлагаем вам пройти интенсивный практический урок по базовой функциональности JavaScript. Здесь вы, шаг за шагом, создадите простую игру "Угадай число".</dd> <dt><a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/%D0%A7%D1%82%D0%BE_%D0%BF%D0%BE%D1%88%D0%BB%D0%BE_%D0%BD%D0%B5_%D1%82%D0%B0%D0%BA">Что пошло не так? Устранение ошибок JavaScript</a></dt> - <dd>В процессе создания игры "Угадай число" из предыдущего урока, вы могли заметить что она не работала. Не стоит унывать - данная статья научит вас беречь собственные нервы, а так же, даст несколько советов о том как решать такие проблемы, искать и исправлять неполадки в JavaScript коде.</dd> + <dd>В процессе создания игры "Угадай число" из предыдущего урока, вы могли заметить что она не работала. Не стоит унывать - данная статья научит вас беречь собственные нервы, а так же, даст несколько советов о том как решать такие проблемы, искать и исправлять неполадки в JavaScript-коде.</dd> <dt><a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/Variables">Хранение нужной вам информации - Переменные</a></dt> <dd>После прочтения предыдущих статей вы должны знать что из себя представляет JavaScript, что он может, как взаимодействует с другими web технологиями, и каковы его основные особенности в общем приближении. В этой статье спустимся к самым основам языка и поработаем с <strong>Переменными</strong>.</dd> <dt><a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/Math">Базовая математика в JavaScript — числа и операторы</a></dt> diff --git a/files/ru/learn/javascript/first_steps/silly_story_generator/index.html b/files/ru/learn/javascript/first_steps/silly_story_generator/index.html index 8e0b8b7ac9..042b6e844d 100644 --- a/files/ru/learn/javascript/first_steps/silly_story_generator/index.html +++ b/files/ru/learn/javascript/first_steps/silly_story_generator/index.html @@ -50,7 +50,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Создатель_глу <h2 id="Краткое_описание_проекта"><span class="short_text" id="result_box" lang="ru"><span>Краткое описание проекта</span></span></h2> -<p><span id="result_box" lang="ru"><span>Вам предоставили некоторый необработанный HTML/CSS, несколько текстовых строк и функций JavaScript;</span> <span>вам необходимо написать необходимый JavaScript код, чтобы превратить это в рабочую программу, которая выполняет следующие действия:</span></span></p> +<p><span id="result_box" lang="ru"><span>Вам предоставили некоторый необработанный HTML/CSS, несколько текстовых строк и функций JavaScript;</span> <span>вам необходимо написать необходимый JavaScript-код, чтобы превратить это в рабочую программу, которая выполняет следующие действия:</span></span></p> <ul> <li>Создаёт глупую историю по нажатию на кнопку "Generate random story".</li> diff --git a/files/ru/learn/javascript/first_steps/strings/index.html b/files/ru/learn/javascript/first_steps/strings/index.html index aad1044a22..9acead263a 100644 --- a/files/ru/learn/javascript/first_steps/strings/index.html +++ b/files/ru/learn/javascript/first_steps/strings/index.html @@ -121,7 +121,7 @@ button.onclick = function() { alert('Hello ' + name + ', nice to see you!'); }</pre> -<p>{{ EmbedLiveSample('Concatenation_in_context', '100%', 50) }}</p> +<p>{{ EmbedLiveSample('Конкатенация_строк_в_контексте', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p> <p>Здесь мы используем функцию {{domxref ("Window.prompt ()", "Window.prompt ()")}} в строке 4, которая просит пользователя ответить на вопрос через всплывающее диалоговое окно, а затем сохраняет введённый текст внутри заданной переменной — в этом случае <code><strong>name</strong></code>. Затем мы используем функцию {{domxref ("Window.alert ()", "Window.alert ()")}} в строке 5 для отображения другого всплывающего окна, содержащего строку, которую мы собрали из двух строковых литералов и переменной <code>name</code>.</p> diff --git a/files/ru/learn/javascript/first_steps/what_is_javascript/index.html b/files/ru/learn/javascript/first_steps/what_is_javascript/index.html index dfa1b50be6..87d7ca4c63 100644 --- a/files/ru/learn/javascript/first_steps/what_is_javascript/index.html +++ b/files/ru/learn/javascript/first_steps/what_is_javascript/index.html @@ -32,7 +32,7 @@ original_slug: Learn/JavaScript/Первые_шаги/What_is_JavaScript <ul> <li>{{glossary("HTML")}} - это язык разметки, который мы используем для визуального и смыслового структурирования нашего web контента, например, определяем параграфы, заголовки, таблицы данных, или вставляем изображения и видео на страницу.</li> <li>{{glossary("CSS")}} - это язык стилей с помощью которого мы придаём стиль отображения нашего HTML контента, например придаём цвет фону (background) и шрифту, придаём контенту многоколоночный вид.</li> - <li>{{glossary("JavaScript")}} язык программирования, который позволяет вам создать динамически обновляемый контент, управляет мультимедиа, анимирует изображения, впрочем, делает всё, что угодно. Окей, не все, что угодно, но всё равно, это удивительно, что можно достичь с помощью нескольких строк JavaScript кода.</li> + <li>{{glossary("JavaScript")}} язык программирования, который позволяет вам создать динамически обновляемый контент, управляет мультимедиа, анимирует изображения, впрочем, делает всё, что угодно. Окей, не все, что угодно, но всё равно, это удивительно, что можно достичь с помощью нескольких строк JavaScript-кода.</li> </ul> <p>Три слоя прекрасно выстраиваются друг над другом. Возьмём простой текст для примера. Для придания структуры и смыслового назначения тексту, разметим его с помощью HTML:</p> @@ -254,7 +254,7 @@ for(let i = 0; i < buttons.length ; i++) { <h3 id="Инлайновые_JavaScript_обработчики">Инлайновые JavaScript обработчики</h3> -<p>Обратите внимание, что иногда можно столкнуться с частями JavaScript кода, который живёт внутри HTML. Это может выглядеть примерно так:</p> +<p>Обратите внимание, что иногда можно столкнуться с частями JavaScript-кода, который живёт внутри HTML. Это может выглядеть примерно так:</p> <div id="Inline_JavaScript_handlers"> <pre class="brush: js example-bad">function createParagraph() { @@ -294,7 +294,7 @@ for(let i = 0; i < buttons.length ; i++) { <h2 id="Комментарии">Комментарии</h2> -<p>Так же, как и в HTML и CSS, возможно писать комментарии в вашем JavaScript коде, что будет проигнорировано браузером, и существует только для того, чтобы давать подсказки вашим друзьям-разработчикам о том, как работает код (и лично вам, если вы вернётесь к коду спустя 6 месяцев и не сможете вспомнить, что вы делали). Комментарии очень полезны, и вы должны часто их использовать, особенно для больших приложений. Вот два типа комментариев:</p> +<p>Так же, как и в HTML и CSS, возможно писать комментарии в вашем JavaScript-коде, что будет проигнорировано браузером, и существует только для того, чтобы давать подсказки вашим друзьям-разработчикам о том, как работает код (и лично вам, если вы вернётесь к коду спустя 6 месяцев и не сможете вспомнить, что вы делали). Комментарии очень полезны, и вы должны часто их использовать, особенно для больших приложений. Вот два типа комментариев:</p> <ul> <li>Однострочный комментарий пишется после двойного слеша (//), например: diff --git a/files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.html b/files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.html index 0ce0f94ca1..570073df36 100644 --- a/files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.html +++ b/files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.html @@ -27,7 +27,7 @@ original_slug: Learn/JavaScript/Объекты/Adding_bouncing_balls_features <p>Для начала скопируйте файлы <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index-finished.html">index-finished.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css">style.css</a> и <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js">main-finished.js</a> из предыдущей статьи в новую директорию на вашем компьютере.</p> -<p>Для выполнения упражнения вы можете использовать сайт <a class="external external-icon" href="http://jsbin.com/">JSBin</a> или <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a>. Вы можете вставлять HTML, CSS и JavaScript код в один из этих онлайн-редакторов. Если ваш онлайн-редактор не поддерживает раздельные панели для редактирования JavaScript/CSS кода, то вы можете встроить код в HTML с помощью тегов <code><script></code>/<code><style></code>.</p> +<p>Для выполнения упражнения вы можете использовать сайт <a class="external external-icon" href="http://jsbin.com/">JSBin</a> или <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a>. Вы можете вставлять HTML, CSS и JavaScript-код в один из этих онлайн-редакторов. Если ваш онлайн-редактор не поддерживает раздельные панели для редактирования JavaScript/CSS кода, то вы можете встроить код в HTML с помощью тегов <code><script></code>/<code><style></code>.</p> <div class="note"> <p><strong>Примечание</strong>. Если у вас что-то не получается — попросите о помощи. Более подробная информация находится в секции {{anch("Assessment or further help")}} в конце этой страницы.</p> diff --git a/files/ru/learn/javascript/objects/inheritance/index.html b/files/ru/learn/javascript/objects/inheritance/index.html index 174f7e0f3a..97e9a98fbd 100644 --- a/files/ru/learn/javascript/objects/inheritance/index.html +++ b/files/ru/learn/javascript/objects/inheritance/index.html @@ -177,7 +177,7 @@ original_slug: Learn/JavaScript/Объекты/Inheritance <h2 id="Попробуйте_пример">Попробуйте пример</h2> -<p>Теперь, когда вы ввели весь код, попробуйте создать экземпляр объекта из <code>Teacher()</code>, поставив ниже вашего JavaScript кода (или что-то похожее по вашему выбору):</p> +<p>Теперь, когда вы ввели весь код, попробуйте создать экземпляр объекта из <code>Teacher()</code>, поставив ниже вашего JavaScript-кода (или что-то похожее по вашему выбору):</p> <pre class="brush: js notranslate">var teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');</pre> diff --git a/files/ru/learn/server-side/django/web_application_security/index.html b/files/ru/learn/server-side/django/web_application_security/index.html index 9ceb8c74e2..d51f5ffa05 100644 --- a/files/ru/learn/server-side/django/web_application_security/index.html +++ b/files/ru/learn/server-side/django/web_application_security/index.html @@ -40,7 +40,7 @@ translation_of: Learn/Server-side/Django/web_application_security <p>XSS это термин, применяющийся для описания класса атак, позволяющего атакующему, через веб-сайт внедрить скрипты, которые будут выполнены на устройстве зашедшего на страницу пользователя. Часто это происходит через сохранение вредоносного кода в базе данных, откуда данный код будет возвращён и выполнен для запросившего некие данные пользователя (типичный пример - сохранение тега <script> с вредоносным кодом в комментарии, который может увидеть другой пользователь). Другой вектор атаки - в том чтобы сгенерировать определённую ссылку, при клике на которую пользователь запустит выполнение некоего замаскированного кода JavaScript в своём браузере.</p> -<p>Система шаблонов Django защищает от большинства XSS атак, <a href="https://docs.djangoproject.com/en/2.0/ref/templates/language/#automatic-html-escaping">экранируя определённые символы</a>, считающиеся "опасными" в HTML. Мы можем продемонстрировать это, попытавшись внедрить произвольный JavaScript код в наше приложение LocalLibrary через форму добавления автора, созданную в <a href="/en-US/docs/Learn/Server-side/Django/Forms">Руководство часть 9: Работа с формами</a>.</p> +<p>Система шаблонов Django защищает от большинства XSS-атак, <a href="https://docs.djangoproject.com/en/2.0/ref/templates/language/#automatic-html-escaping">экранируя определённые символы</a>, считающиеся "опасными" в HTML. Мы можем продемонстрировать это, попытавшись внедрить произвольный JavaScript-код в наше приложение LocalLibrary через форму добавления автора, созданную в <a href="/en-US/docs/Learn/Server-side/Django/Forms">Руководство часть 9: Работа с формами</a>.</p> <ol> <li>Запустите веб-сайт, используя сервер разработки (<code>python3 manage.py runserver</code>).</li> @@ -62,9 +62,9 @@ translation_of: Learn/Server-side/Django/web_application_security <pre class="brush: html"><h1>Author: Boon&lt;script&gt;alert(&#39;Test alert&#39;);&lt;/script&gt;, David (Boonie) </h1> </pre> -<p>Использование шаблонов Django защищает вас от большинства XSS атак. Однако существует возможность отключения данной защиты, при котором экранирование не будет автоматически применятся ко всем полям, которые не должны будут заполнятся пользователем(к примеру, поле <code>help_text</code> обычно заполняется не пользователем, поэтому Django не будет экранировать его значение).</p> +<p>Использование шаблонов Django защищает вас от большинства XSS-атак. Однако существует возможность отключения данной защиты, при котором экранирование не будет автоматически применятся ко всем полям, которые не должны будут заполнятся пользователем(к примеру, поле <code>help_text</code> обычно заполняется не пользователем, поэтому Django не будет экранировать его значение).</p> -<p>Так же XSS атаки могут быть осуществлены через другие ненадёжные источники данных, такие как cookies, сторонние сервисы или загруженные файлы (и прочие источники, данные которых не были специально обработаны перед отображением на странице). Если вы отображаете данные из этих источников, вы должны добавить ваш собственный обработчик для фильтрации данных.</p> +<p>Так же XSS-атаки могут быть осуществлены через другие ненадёжные источники данных, такие как cookies, сторонние сервисы или загруженные файлы (и прочие источники, данные которых не были специально обработаны перед отображением на странице). Если вы отображаете данные из этих источников, вы должны добавить ваш собственный обработчик для фильтрации данных.</p> <h3 id="Межсайтовая_подделка_запроса_(CSRF)">Межсайтовая подделка запроса (CSRF)</h3> diff --git a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.html b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.html new file mode 100644 index 0000000000..10b9438740 --- /dev/null +++ b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.html @@ -0,0 +1,335 @@ +--- +title: Начало работы с Angular +slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started +original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started +translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started +tags: + - Новички + - Фреймворки + - Установка + - JavaScript + - Изучение + - client-side + - Angular +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div> + +<p class="summary">Пришло время взглянуть на фреймворк от Google — Angular, еще один популярный вариант, с которым вы часто будете сталкиваться. В этой статье мы рассмотрим, что Angular может предложить, установим необходимые компоненты, запустим пример приложения, и разберём базовую архитектуру Angular.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Необходимые условия:</th> + <td>Понимание основ <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, и <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, знание <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">терминала/командной строки</a>. + </td> + </tr> + <tr> + <th scope="row">Цель:</th> + <td>Настроить локальную среду разработки Angular, создать стартовое приложение, и понять основные принципы работы.</td> + </tr> + </tbody> +</table> + +<h2 id="what_is_angular">Что такое Angular?</h2> + +<p>Angular — это платформа для разработки, написанная на <a href="https://www.typescriptlang.org/">TypeScript</a>. Как платформа Angular включает:</p> + +<ul> + <li>Основанный на компонентах фреймворк для создания масштабируемых веб-приложений</li> + <li>Набор хорошо интегрированных библиотек, охватывающих широкий спектр функций: маршрутизация, управление формами, клиент-серверное взаимодействие и т.д.</li> + <li>Набор инструментов разработчика, которые помогут вам разрабатывать, собирать, тестировать и обновлять ваш код</li> +</ul> + +<p>Когда вы создаете приложение с помощью Angular, вы пользуетесь преимуществами платформы, которая может масштабироваться от проекта, который разрабатывает один человек, до приложений корпоративного уровня. Angular разработан, чтобы максимально упростить обновление, поэтому вы можете использовать последние разработки с минимумом усилий. А самое замечательное то, что экосистема Angular состоит из огромного сообщества, включающего более чем 1.7 миллиона разработчиков, авторов библиотек и создателей контента.</p> + +<p>Прежде, чем приступить к изучению платформы Angular, сначала стоит познакомиться с Angular CLI. Angular CLI - это быстрый, простой и рекомендуемый способ разработки Angular-приложений. Angular CLI облегчает выполнение ряда задач. Вот некоторые из них:</p> + +<table class="standard-table"> +<tr> +<td><code><a href="https://angular.io/cli/build">ng build</a></code></td> +<td>Компилирует Angular-приложение в выходной каталог.</td> +</tr> +<tr> +<td><code><a href="https://angular.io/cli/serve">ng serve</a></code></td> +<td>Собирает и запускает ваше приложение, пересобирая его при изменении файлов.</td> +</tr> +<tr> +<td><code><a href="https://angular.io/cli/generate">ng generate</a></code></td> +<td>Генерирует или изменяет файлы на основе схематиков</td> +</tr> +<tr> +<td><code><a href="https://angular.io/cli/test">ng test</a></code></td> +<td>Запускает модульные тесты для заданного проекта.</td> +</tr> +<tr> +<td><code><a href="https://angular.io/cli/e2e">ng e2e</a></code></td> +<td>Собирает и запускает Angular-приложение, запуская затем сквозные тесты.</td> +</tr> +</table> + +<p>Скоро вы сами убедитесь, что Angular CLI является полезным инструментом для создания ваших приложений.</p> + +<h2 id="what-you-ll-build">Что вы создадите</h2> + +<p>Эта серия руководств проведёт вас через создание приложения со списком дел (to-do list). С помощью этого приложения вы узнаете, как использовать Angular для управления, редактирования, добавления, удаления и фильтрации элементов.</p> + +<h2 id="prerequisites">Необходимые условия</h2> + +<p>Чтобы установить Angular в вашей локальной системе, вам понадобится следующее:</p> + +<ul> + <li><p><strong>Node.js</strong></p> + <p>Angular требует <a href="https://nodejs.org/about/releases">текущую, последнюю LTS, или поддерживаемую LTS</a> версию Node.js. Для получения информации о конкретных требованиях к версии смотрите ключ <code>engines</code> в <a href="https://unpkg.com/@angular/cli/package.json">package.json</a> файле.</p> + <p>Для получения дополнительной информации о установке Node.js смотрите <a href="https://nodejs.org" title="Nodejs.org">nodejs.org</a>. +Если вы не знаете какая версия Node.js установлена в вашей системе, запустите <code>node -v</code> в терминале.</p> + </li> + <li><p><strong>пакетный менеджер npm</strong></p> + <p>Angular, Angular CLI, Angular приложения зависят от <a href="https://docs.npmjs.com/getting-started/what-is-npm">npm пакетов</a> которые обеспечивают множество функций. + Для загрузки и установки npm пакетов, вам необходим пакетный менеджер npm. + Это руководство использует <a href="https://docs.npmjs.com/cli/install">npm</a> через интерфейс командной строки, который устанавливается с <code>Node.js</code> по умолчанию. + Для того, чтобы узнать какая версия npm установлена, запустите <code>npm -v</code> в терминале.</p> + </li> +</ul> + +<h2 id="set_up_your_application">Настройка приложения</h2> + +<p>Вы можете использовать Angular CLI, запуская команды в терминале для генерации, сборки, тестирования, и развертывания приложений на Angular. +Для установки Angular CLI, запустите следующие команды в терминале:</p> + +<pre class="brush: js">npm install -g @angular/cli</pre> + +<p>Команды Angular CLI начинаются с <code>ng</code>, за которым следует то, что вы хотите CLI сделал. +В рабочей директории (например, Desktop) выполните команду <code>ng new</code>, чтобы создать новое приложение под названием <code>todo</code>:</p> + +<pre class="brush: js">ng new todo --routing=false --style=css</pre> + +<p>В текущей директории команда <code>ng new</code> создаст необходимое для работы маленькое Angular-приложение. +Дополнительные флаги, <code>--routing</code> и <code>--style</code>, определяют, как обрабатывать навигацию и стили в приложении. +В этом руководстве эти функции будут описаны позже.</p> + +<p>Если вам будет предложено применить строгую проверку типов, вы можете ответить "yes".</p> + +<p>Перейдите в ваш новый проект с помощью команды <code>cd</code>:</p> + +<pre class="brush: js">cd todo</pre> + +<p>Запустите ваше приложение <code>todo</code>, выполнив команду <code>ng serve</code>:</p> + +<pre class="brush: js">ng serve</pre> + +<p>Когда CLI спросить про аналитику, ответьте <code>no</code>.</p> + +<p>В браузере перейдите на <a href="http://localhost:4200/">http://localhost:4200/</a>, и вы увидите ваше новое приложение. +Если измените любой из исходных файлов, приложение автоматически перезагрузится.</p> + +<p>Пока выполняется <code>ng serve</code>, запускать другие команды можно в новой вкладке или окне терминала. +Если вы захотите остановить работу приложения, нажмите <code>Ctrl+c</code> в терминале, где оно было запущено.</p> + +<h2 id="get_familiar_with_your_angular_application">Знакомство с вашим Angular приложением</h2> + +<p>Исходные файлы, на которых будет сосредоточено внимание в этом руководстве находится в <code>src/app</code>. +Файлы, генерируемые CLI автоматически, на которые стоит обратить внимание:</p> + +<ol> + <li><code>app.module.ts</code>: определяет файлы, которые использует приложение. +Этот файл действует как центральный узел для других файлов в вашем приложении.</li> + <li><code>app.component.ts</code>: Определяет класс, который содержит логику основной страницы приложения.</li> + <li><code>app.component.html</code>: Содержит HTML для <code>AppComponent</code>. Содержимое этого файла также называется шаблоном. +Шаблон определяет представление или то, что вы видите в браузере.</li> + <li><code>app.component.css</code>: Содержит стили для <code>AppComponent</code>. Этот файл используется, когда вам нужно стилизовать определённый компонент, а не всё приложение.</li> +</ol> + +<p>Компонент Angular состоит из трех основных частей: шаблон, стили, и класс. +Например, <code>app.component.ts</code>, <code>app.component.html</code>, и <code>app.component.css</code> вместе составляют <code>AppComponent</code>. +Эта структура разделяет логику, представление и стили, чтобы приложение было более масштабируемым и удобным в обслуживании.</p> + +<p>Таким образом, с самого начала вы используете лучшие приёмы разработки.</p> + +<p>Angular CLI также генерирует файл для тестирования компонента <code>app.component.spec.ts</code>, но в это руководство не входит тестирование, поэтому вы можете игнорировать этот файл.</p> + +<p>Каждый раз, когда вы генерируете компонент, CLI создает эти четыре файла в каталоге с указанным вами именем.</p> + +<h2 id="the_structure_of_an_angular_application">Структура Angular приложения</h2> + +<p>Angular построен на TypeScript. +TypeScript — это надмножество JavaScript, т.е. любой правильный JavaScript-код будет работать в TypeScript. +TypeScript предлагает типизацию и более лаконичный синтаксис, чем простой JavaScript, который дает вам инструмент для создание более удобного в сопровождении кода и минимизации ошибок.</p> + +<p>Компоненты — это строительные блоки Angular-приложений. +Компоненты включают TypeScript-класс, который имеет декоратор <code>@Component()</code>, HTML-шаблон и стили.</p> + +<h3 id="the_class">Класс</h3> + +<p>Класс — это место, где вы помещаете любую логику, которая нужна вашему компоненту. +Этот код должен включать функции, обработчики событий, свойства, и ссылки на сервисы. +Класс находится в файле с таким именем, как <code>feature.component.ts</code>, где <code>feature</code> это название вашего компонента. +Итак, у вас могут быть файлы с такими именами как <code>header.component.ts</code>, <code>signup.component.ts</code>, или <code>feed.component.ts</code>. +Вы создаете компонент с декоратором <code>@Component()</code>, включающий метаданные, которые сообщают Angular расположение HTML- и CSS-файлов. +Типичный компонент выглядит так:</p> + +<pre class="brush: js"> +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-item', + // следующие метаданные определяют расположение других частей компонента + templateUrl: './item.component.html', + styleUrls: ['./item.component.css'] +}) + +export class ItemComponent { +// ваш код будет тут +}</pre> + +<p>Компонент называется <code>ItemComponent</code>, и имеет селектор <code>app-item</code>. +Вы можете использовать этот селектор как и обычные HTML-теги, помещая его в другие шаблоны. +Когда селектор находится в компоненте, браузер отображает шаблон этого компонента. +Это руководство поможет вам создать два компонента и использовать один в другом.</p> + +<p>Компонентная модель Angular предлагает надежную инкапсуляцию и интуитивно понятную структуру приложения. +Компоненты также упрощают модульное тестирование вашего приложения и могут улучшить общую читаемость кода.</p> + +<h3 id="the_html_template">HTML-шаблоны</h3> + +<p>У каждого компонента есть HTML-шаблон, в котором определяется то, что этот компонент будет отображать. +Шаблон можно задать либо строкой, либо как путь к файлу.</p> + +<p>Для ссылки на внешний HTML-файл, используется свойство <code>templateUrl</code>:</p> + +<pre class="brush: js">@Component({ + selector: 'app-root', + templateUrl: './app.component.html' +}) + +export class AppComponent { +}</pre> + +<p>Чтобы указать напрямую HTML-код, используется свойство <code>template</code> с обратными кавычками:</p> + +<pre class="brush: js">@Component({ + selector: 'app-root', + template: `<h1>Hi!</h1>`, +}) + +export class AppComponent { +}</pre> + +<p>Angular расширяет HTML дополнительным синтаксисом, который позволяет вставлять динамические данные в компонент. +Angular автоматически обновляет DOM, когда состояние компонента изменяется. +Например, этот синтаксис можно применить для вставки динамического текста, как показано в следующем примере.</p> + +<pre class="brush: html"><h1>\{{ title }}</h1></pre> + +<p>Двойные фигурные скобки говорят Angular, что содержимое внутри них нужно интерполировать. +Значение для <code>title</code> берется из класса компонента:</p> + +<pre class="brush: js">import { Component } from '@angular/core'; + +@Component ({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent { + title = 'To do application'; +}</pre> + +<p>Когда приложение загружает компонент и его шаблон, браузер видит следующее:</p> + +<pre class="brush: html"><h1>To do application</h1> +</pre> + +<h3 id="styles">Стили</h3> + +<p>Компонент может наследовать общие стили приложения из файла <code>styles.css</code> или переопределять их собственными стилями. +Вы можете писать стили для конкретных компонентов прямо в декораторе <code>@Component()</code> или указывая путь к CSS-файлу.</p> + +<p>Чтобы включить стили непосредственного в декоратор компонента, используется свойство <code>styles</code>:</p> + +<pre class="brush: js">@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styles: ['h1 { color: red; }'] +})</pre> + +<p>Обычно компонент использует стили определяемые в отельном файле, указанном в свойстве <code>styleUrls</code>:</p> + +<pre class="brush: js">@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +})</pre> + +<p>С помощью стилей для конкретных компонентов вы можете организовывать свой CSS так, чтобы его было легко поддерживать и переносить.</p> + +<h2 id="summary">Резюме</h2> + +<p>Это ваше первое знакомство с Angular. На этом этапе всё должно быть настроено и готово к созданию Angular-приложения, а у вас быть базовое представление о том, как работает Angular. В следующей статье мы углубим эти знания и начнем создавать структуру вашего приложения списка дел.</p> + +<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div> + +<h2 id="In_this_module">В это модуле</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Введение в клиентские фреймворки</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Основные функции фреймворков</a></li> + <li>React + <ul> + <li><a href="/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Начало работы с React</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Начало создания приложения списка дел с React</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Компоненты React приложения</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">Интерактивность React: события и состояние</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">Интерактивность React: редактирование, фильтрация, условная отрисовка</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Доступность в React</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">Ресурсы по React</a></li> + </ul> + </li> + <li>Ember + <ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Начало работы с Ember</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Структура Ember приложения и компоненты</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Интерактивность Ember: события, классы и состояние</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Интерактивность Ember: функциональность подвала, условная отрисовка</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Маршрутизация в Ember</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ресурсы по Ember и устранение неполадок</a></li> + </ul> + </li> + <li>Vue + <ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Начало работы с Vue</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Создание вашего первого компонента Vue</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Отрисовка списка Vue компонентов</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Добавление новой формы во Vue: события, методы, и модели</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Стилизация Vue компонентов с CSS</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Использование вычисляемых свойств во Vue</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Условная отрисовка во Vue: Редактирование существующих дел</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Управление фокусом во Vue с помощью refs</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Ресурсы по Vue</a></li> + </ul> + </li> + <li>Svelte + <ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Начало работы со Svelte</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Начинаем приложение списка дел c использованием Svelte</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Динамическое поведение в Svelte: работа с переменными и пропсами</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Компоненты Svelte приложения</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Продвинутый Svelte: реактивность, жизненный цикл, доступность</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Работа хранилищами в Svelte</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">Поддержка TypeScript в Svelte</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Развертывание и следующие шаги</a></li> + </ul> + </li> + <li>Angular + <ul> + <li><a href="/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started">Начало работы с Angular</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning">Начинаем приложение списка дел с использованием Angular</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling">Стилизация Angular приложения</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component">Создание компонента элемента (item component)</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering">Фильтрация списка дел</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building">Сборка Angular приложений и другие ресурсы</a></li> + </ul> + </li> +</ul> diff --git a/files/ru/mozilla/add-ons/webextensions/content_security_policy/index.html b/files/ru/mozilla/add-ons/webextensions/content_security_policy/index.html index 14c8fbadf8..c69f623d4a 100644 --- a/files/ru/mozilla/add-ons/webextensions/content_security_policy/index.html +++ b/files/ru/mozilla/add-ons/webextensions/content_security_policy/index.html @@ -69,7 +69,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Content_Security_Policy <p><a href="/ru/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy#eval()_%D0%B8_%D1%82%D0%BE%D0%B2%D0%B0%D1%80%D0%B8%D1%89%D0%B8">Расширению не разрешено выполнять код, представленный в виде JavaScript строк.</a></p> </li> <li> - <p><a href="/ru/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy#%D0%92%D1%81%D1%82%D1%80%D0%B0%D0%B8%D0%B2%D0%B0%D0%B5%D0%BC%D1%8B%D0%B9_(inline)_JavaScript">Встраиваемый (inline) JavaScript код не будет выполняться.</a></p> + <p><a href="/ru/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy#%D0%92%D1%81%D1%82%D1%80%D0%B0%D0%B8%D0%B2%D0%B0%D0%B5%D0%BC%D1%8B%D0%B9_(inline)_JavaScript">Встраиваемый (inline) JavaScript-код не будет выполняться.</a></p> </li> </ul> @@ -102,7 +102,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Content_Security_Policy <h3 id="Встраиваемый_(inline)_JavaScript">Встраиваемый (inline) JavaScript</h3> -<p>Изначальная политика защиты содержимого не позволяет выполнять JavaScript код, встраиваемый в HTML теги. Это запрещает как выполнение JavaScript кода вложенного прямо в <code><script></code> тег, так и выполнение вписанных в атрибут обработчиков событий, означая, что следующий код так же не будет работать:</p> +<p>Изначальная политика защиты содержимого не позволяет выполнять JavaScript-код, встраиваемый в HTML теги. Это запрещает как выполнение JavaScript-кода вложенного прямо в <code><script></code> тег, так и выполнение вписанных в атрибут обработчиков событий, означая, что следующий код так же не будет работать:</p> <pre class="brush: html"><script>console.log("foo");</script></pre> diff --git a/files/ru/mozilla/firefox/releases/33/index.html b/files/ru/mozilla/firefox/releases/33/index.html index 2706047c5b..1cbf2e2dfe 100644 --- a/files/ru/mozilla/firefox/releases/33/index.html +++ b/files/ru/mozilla/firefox/releases/33/index.html @@ -23,7 +23,7 @@ translation_of: Mozilla/Firefox/Releases/33 <li>Реализовано <strong>@counter-style</strong> правило({{bug(966166)}}).</li> <li>Больше нет необходимости использовать префикс <strong>-moz-ethiopic-numeric</strong>({{bug(985825)}}).</li> <li>Добавлена поддержка <strong>disclosure-open/disclosure-closed</strong> стилей счётчиков({{bug(982355)}}).</li> - <li>CSS анимация с пустыми keyframes свойствами обрабатывает события по умолчанию({{bug(1004377)}}).</li> + <li>CSS-анимация с пустыми keyframes свойствами обрабатывает события по умолчанию({{bug(1004377)}}).</li> </ul> <h3 id="HTML">HTML</h3> diff --git a/files/ru/mozilla/firefox/releases/43/index.html b/files/ru/mozilla/firefox/releases/43/index.html index 73a19659b1..6438ef35c4 100644 --- a/files/ru/mozilla/firefox/releases/43/index.html +++ b/files/ru/mozilla/firefox/releases/43/index.html @@ -31,10 +31,10 @@ translation_of: Mozilla/Firefox/Releases/43 <h3 id="CSS">CSS</h3> <ul> - <li>Удалён префикс CSS свойства {{Cssxref("hyphens")}} ({{bug(953408)}}).</li> + <li>Удалён префикс CSS-свойства {{Cssxref("hyphens")}} ({{bug(953408)}}).</li> <li>CCS свойство {{cssxref("font")}} теперь поддерживает указание {{cssxref("font-stretch")}} {{bug(1057680)}}).</li> <li>Псевдокласс {{cssxref(":fullscreen")}} теперь выбирает весь стек элементов с дисплея в полноэкранном режиме, а не только элементы высшего уровня ({{bug(1199522)}}).</li> - <li>Устаревшие свойства SVG {{cssxref("writing-mode")}}, <code>lr</code>, <code>lr-tb</code>, <code>rl</code>, <code>tb</code>, and <code>tb-rl</code>, добавлены в CSS как алиасы стандартных CSS свойств ({{bug(1205787)}}).</li> + <li>Устаревшие свойства SVG {{cssxref("writing-mode")}}, <code>lr</code>, <code>lr-tb</code>, <code>rl</code>, <code>tb</code>, and <code>tb-rl</code>, добавлены в CSS как алиасы стандартных CSS-свойств ({{bug(1205787)}}).</li> </ul> <h3 id="HTML">HTML</h3> diff --git a/files/ru/mozilla/firefox/releases/53/index.html b/files/ru/mozilla/firefox/releases/53/index.html index 80cd5e2d10..49e952210b 100644 --- a/files/ru/mozilla/firefox/releases/53/index.html +++ b/files/ru/mozilla/firefox/releases/53/index.html @@ -195,7 +195,7 @@ translation_of: Mozilla/Firefox/Releases/53 <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS">tabs.insertCSS</a></code><font><font>теперь поддерживает </font></font><code>cssOrigin</code><font><font>, что </font><font>позволяет вставлять таблицы стилей пользователя.</font></font></li> </ul> -<h3 id="модули_JavaScript_код"><font><font>модули JavaScript код</font></font></h3> +<h3 id="модули_JavaScript_код"><font><font>модули JavaScript-код</font></font></h3> <ul> <li><font><font>Асинхронные </font></font><a href="../../../Add-ons/Add-on_Manager/AddonManager"><font><font>интерфейсы AddonManager</font></font></a><font><font> теперь поддерживают {{jsxref ( "Promise", "Промис")}}, а также колбэки ({{bug (987512)}}.</font></font></li> diff --git a/files/ru/mozilla/firefox/releases/68/index.html b/files/ru/mozilla/firefox/releases/68/index.html index b2035a7097..179f4e9bb4 100644 --- a/files/ru/mozilla/firefox/releases/68/index.html +++ b/files/ru/mozilla/firefox/releases/68/index.html @@ -19,7 +19,7 @@ translation_of: Mozilla/Firefox/Releases/68 <h4 id="Браузервеб_консоль">Браузер/веб консоль</h4> <ul> - <li>Веб консоль теперь предоставляет <a href="/ru-RU/docs/Tools/Web_Console/Console_messages#CSS">больше информации о CSS предупреждениях</a>, включая древо DOM элементов, которые используют CSS-правило ({{bug(1093953)}}).</li> + <li>Веб консоль теперь предоставляет <a href="/ru-RU/docs/Tools/Web_Console/Console_messages#CSS">больше информации о CSS предупреждениях</a>, включая древо DOM-элементов, которые используют CSS-правило ({{bug(1093953)}}).</li> <li>Теперь вы можете фильтровать контент Веб консоли, пользуясь регулярными выражениями ({{bug(1441079)}}).</li> <li>The Browser console now allows you to show or hide messages from the content process by setting or clearing the checkbox labeled <em>Show Content Messages</em> ({{bug(1260877)}}).</li> </ul> diff --git a/files/ru/tools/index.html b/files/ru/tools/index.html index 0c957d83e3..cfba15a0d1 100644 --- a/files/ru/tools/index.html +++ b/files/ru/tools/index.html @@ -78,7 +78,7 @@ translation_of: Tools <p><a href="/ru/docs/Tools/Debugger"><img alt="The all-new Firefox 57 Debugger.html" src="https://mdn.mozillademos.org/files/16369/landingPage_Debugger.png" style="border: 1px solid #0080f0;"></a></p> -<p>Позволяет остановить, выполнять по шагам, исследовать и изменять JavaScript код выполняемый на странице.</p> +<p>Позволяет остановить, выполнять по шагам, исследовать и изменять JavaScript-код выполняемый на странице.</p> </div> <div class="column-half"> diff --git a/files/ru/tools/page_inspector/how_to/examine_and_edit_css/index.html b/files/ru/tools/page_inspector/how_to/examine_and_edit_css/index.html index 8b8aa492ed..a9da633774 100644 --- a/files/ru/tools/page_inspector/how_to/examine_and_edit_css/index.html +++ b/files/ru/tools/page_inspector/how_to/examine_and_edit_css/index.html @@ -7,7 +7,7 @@ translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_CSS <p>Просмотр и редактирование CSS в <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">панели CSS</a> Инспектора.</p> -<h2 id="Просмотр_CSS_правил">Просмотр CSS правил</h2> +<h2 id="Просмотр_CSS_правил">Просмотр CSS-правил</h2> <p>На панели <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules(Правила)</a> отображаются все правила, применяемые к выбранному элементу, в порядке приоритета сверху-вниз:</p> diff --git a/files/ru/tools/web_console/index.html b/files/ru/tools/web_console/index.html index 33fa903170..cd1223888c 100644 --- a/files/ru/tools/web_console/index.html +++ b/files/ru/tools/web_console/index.html @@ -194,7 +194,7 @@ translation_of: Tools/Web_Console <p><span id="result_box" lang="ru"><span>Если</span> сделанное <span>изменение</span> <span>аннулирует</span> <span>текущую схему</span> <span>-</span> <span>например,</span> <span>окно браузера</span> <span>изменяется</span> <span>или</span> <span>некоторые</span> <span>JavaScript</span> <span>изменяют</span> <span>CSS</span> <span>элемент -</span> <span>макет</span> <span>не пересчитывается</span> <span>немедленно.</span> <span>Вместо</span></span><span lang="ru"> <span>переформатирования </span></span><span lang="ru"> <span>в асинхронном режиме</span><span>,</span> <span>в следующий</span> <span>раз браузер</span> <span>решает что это</span> <span>должно быть сделано</span> <span>(как правило</span><span>,</span> <span>в следующий</span> <span>раз браузер</span> <span>перекрашивается</span><span>)</span><span>.</span> <span>Таким образом,</span> <span>браузер может</span> <span>накопить</span> <span>коллекцию</span> <span>основанную на недействующих </span><span>изменениях</span> <span>и</span> <span>пересчитать</span> <span>их эффект</span> <span>сразу</span><span>.</span></span></p> -<p><span id="result_box" lang="ru"><span>Тем не менее</span><span>,</span> <span>если</span> <span>какой-то</span> <span>JavaScript код</span> <span>читает что</span> <span>стиль</span><span> был изменён</span><span>,</span> <span>то</span> <span>браузер должен</span> <span>выполнить</span> <span>синхронное</span> <span>переформатирование</span></span><span lang="ru"><span> в порядке вычисленным расчётом стиля</span><span> чтобы вернуться</span><span>.</span> <span>Например</span><span>, код</span><span> как</span> <span>этот хочет вызвать</span> <span>немедленное</span><span>,</span> <span>синхронное</span><span>,</span> </span><span id="result_box" lang="ru"><span>переформатирование</span></span><span lang="ru"><span>,</span> <span>когда вызовет</span></span> <code>window.getComputedStyle(thing).height</code>:</p> +<p><span id="result_box" lang="ru"><span>Тем не менее</span><span>,</span> <span>если</span> <span>какой-то</span> <span>JavaScript-код</span> <span>читает что</span> <span>стиль</span><span> был изменён</span><span>,</span> <span>то</span> <span>браузер должен</span> <span>выполнить</span> <span>синхронное</span> <span>переформатирование</span></span><span lang="ru"><span> в порядке вычисленным расчётом стиля</span><span> чтобы вернуться</span><span>.</span> <span>Например</span><span>, код</span><span> как</span> <span>этот хочет вызвать</span> <span>немедленное</span><span>,</span> <span>синхронное</span><span>,</span> </span><span id="result_box" lang="ru"><span>переформатирование</span></span><span lang="ru"><span>,</span> <span>когда вызовет</span></span> <code>window.getComputedStyle(thing).height</code>:</p> <pre class="brush: js notranslate">var thing = document.getElementById("the-thing"); thing.style.display = "inline-block"; diff --git a/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html b/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html index 6bb6b393cb..f749a4646d 100644 --- a/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html +++ b/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html @@ -53,13 +53,6 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedb return you back to the main page</div> </pre> -<h3 id="Рабочие_примеры">Рабочие примеры:</h3> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/checkbox1/">Checkbox example</a> использования <code>aria-describedby</code></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/tooltip1/">Tooltip example</a> использования <code>aria-describedby</code></li> -</ul> - <h3 id="Примечания">Примечания</h3> <ul> diff --git a/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html b/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html index 63a5eab101..42c2789b96 100644 --- a/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html +++ b/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html @@ -11,7 +11,7 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attr --- <p><span class="seoSummary">Атрибут <a class="external" href="https://www.w3.org/TR/wai-aria/#aria-label" rel="external"><code>aria-label</code></a> создаёт текстовую метку текущего элемента в случае отсутствия видимого текста описания элемента. Если есть видимый текст, обозначающий элемент, используйте вместо этого <a href="/ru/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="Using the aria-labelledby attribute">aria-labelledby</a>.</span></p> -<p>Этот атрибут может быть использован для любого стандартного HTML элемента; не ограничивается элементами с ARIA <code>role</code>.</p> +<p>Этот атрибут может быть использован для любого стандартного HTML-элемента; не ограничивается элементами с ARIA <code>role</code>.</p> <h3 class="editable" id="Значение">Значение</h3> diff --git a/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html b/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html index fac9e228d0..647214e1cc 100644 --- a/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html +++ b/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html @@ -13,7 +13,7 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby <p>Чтобы повысить совместимость с <a href="https://ru.wikipedia.org/wiki/User_agent">клиентскими приложениями </a>которые не поддерживают ARIA атрибуты, вы можете использовать <code>aria-labelledby</code> вместе элементом {{ HTMLElement("label") }} (используя <code>for</code> атрибут)</p> -<p>Этот атрибут может быть использован в любом типичном HTML элементе формы, он не ограничен элементами которые имеют атрибут ARIA <code>role</code></p> +<p>Этот атрибут может быть использован в любом типичном HTML-элементе формы, он не ограничен элементами которые имеют атрибут ARIA <code>role</code></p> <h3 id="Значение">Значение</h3> diff --git a/files/ru/web/accessibility/aria/roles/checkbox_role/index.html b/files/ru/web/accessibility/aria/roles/checkbox_role/index.html index 307c56e1f9..6fcdcbbff6 100644 --- a/files/ru/web/accessibility/aria/roles/checkbox_role/index.html +++ b/files/ru/web/accessibility/aria/roles/checkbox_role/index.html @@ -10,7 +10,7 @@ translation_of: Web/Accessibility/ARIA/Roles/checkbox_role <pre class="brush: html"><span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk1-label"> </span> <label id="chk1-label">Remember my preferences</label></pre> -<p>Первое правило ARIA - если у нативного HTML элемента или атрибута присутствует необходимая семантика или поведение, следует использовать его, а не использовать другой элемент не по назначению, добавляя ARIA. Вместо этого лучше использовать <a href="/en-US/docs/Web/HTML/Element/input/checkbox">HTML checkbox</a> <code><a href="/en-US/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code>, который изначально предоставляет необходимый функционал:</p> +<p>Первое правило ARIA - если у нативного HTML-элемента или атрибута присутствует необходимая семантика или поведение, следует использовать его, а не использовать другой элемент не по назначению, добавляя ARIA. Вместо этого лучше использовать <a href="/en-US/docs/Web/HTML/Element/input/checkbox">HTML checkbox</a> <code><a href="/en-US/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code>, который изначально предоставляет необходимый функционал:</p> <pre class="brush: html"><input type="checkbox" id="chk1-label"> <label for="chk1-label">Запомнить мои предпочтения</label></pre> @@ -132,7 +132,7 @@ translation_of: Web/Accessibility/ARIA/Roles/checkbox_role <h2 id="Лучшие_практики">Лучшие практики</h2> -<p>Первое правило ARIA - если у нативного HTML элемента или атрибута присутствует необходимая семантика или поведение, следует использовать его, а не использовать другой элемент не по назначению, добавляя ARIA, чтобы сделать его доступным. По существу, рекомендуется использовать нативный <a href="/en-US/docs/Web/HTML/Element/input/checkbox">HTML checkbox</a> вместо воспроизведения функциональности чекбокса с помощью JavaScript и ARIA.</p> +<p>Первое правило ARIA - если у нативного HTML-элемента или атрибута присутствует необходимая семантика или поведение, следует использовать его, а не использовать другой элемент не по назначению, добавляя ARIA, чтобы сделать его доступным. По существу, рекомендуется использовать нативный <a href="/en-US/docs/Web/HTML/Element/input/checkbox">HTML checkbox</a> вместо воспроизведения функциональности чекбокса с помощью JavaScript и ARIA.</p> <h2 id="Смотрите_также">Смотрите также:</h2> diff --git a/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html b/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html index 8a7a122fa9..b8c7001239 100644 --- a/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html +++ b/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html @@ -52,7 +52,7 @@ translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets <h4 id="Простые_контролы">Простые контролы</h4> -<p>Чтобы сделать простой виджет доступным через клавишу Tab, задайте <code>tabindex="0"</code> на HTML элементах {{HTMLElement("div")}} или {{HTMLElement("span")}}, из которых он состоит. Ниже представлен пример эмулирования чекбоксов. Вместо элементов input в примере используется {{HTMLElement("span")}}.</p> +<p>Чтобы сделать простой виджет доступным через клавишу Tab, задайте <code>tabindex="0"</code> на HTML-элементах {{HTMLElement("div")}} или {{HTMLElement("span")}}, из которых он состоит. Ниже представлен пример эмулирования чекбоксов. Вместо элементов input в примере используется {{HTMLElement("span")}}.</p> <p><em>Пример 1: Простой виджет, эмулирующий работу чекбосов путём смены изображений. Виджет использует tabindex, чтобы обеспечить доступ с клавиатуры.</em></p> @@ -154,7 +154,7 @@ translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets <p>Эта техника позволяет объединить каждый отдельно взятый обработчик событий в контейнер графического элемента и использовать <code>aria-activedescendent</code> для слежения за "виртуальным" фокусом . (Для получения более подробной информации относительно ARIA обратите внимание на <a href="/ru/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets">обзор доступных веб-приложений и виджетов </a>.)</p> -<p>The <code>aria-activedescendant</code> property identifies the ID of the descendent element that currently has the virtual focus. The event handler on the container must respond to key and mouse events by updating the value of <code>aria-activedescendant</code> and ensuring that the current item is styled appropriately (for example, with a border or background color). See the source code of this <a href="https://www.oaa-accessibility.org/example/28/">ARIA radiogroup example</a> for a direct illustration of how this works.</p> +<p>The <code>aria-activedescendant</code> property identifies the ID of the descendent element that currently has the virtual focus. The event handler on the container must respond to key and mouse events by updating the value of <code>aria-activedescendant</code> and ensuring that the current item is styled appropriately (for example, with a border or background color).</p> <h5 id="Tips">Tips</h5> diff --git a/files/ru/web/api/animationevent/index.html b/files/ru/web/api/animationevent/index.html index 9837e5c412..72304b3643 100644 --- a/files/ru/web/api/animationevent/index.html +++ b/files/ru/web/api/animationevent/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/AnimationEvent <dl> <dt>{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}</dt> - <dd>Является {{domxref("DOMString")}} содержащей значения {{cssxref("animation-name")}} CSS свойств связанных с <strong>transition.</strong></dd> + <dd>Является {{domxref("DOMString")}} содержащей значения {{cssxref("animation-name")}} CSS-свойств связанных с <strong>transition.</strong></dd> <dt>{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}</dt> <dd>Является числом с плавающей точкой, которое задаёт количество времени от начала анимации в секундах, когда это событие отклонено, несмотря на какое-либо время анимация была остановлена.Для события "animationstart" , elapsedTime равно <code>0.0 если не было заданно отрицательное значение для </code>{{cssxref("animation-delay")}}, в этом случае событие будет срабатывать с elapsedTime содержащим <code>(-1 * </code><em>delay</em><code>)</code>.</dd> <dt>{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}</dt> @@ -70,6 +70,6 @@ translation_of: Web/API/AnimationEvent <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations">Использование CSS анимации</a></li> - <li>Анимация связанных CSS свойств и по правилам: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations">Использование CSS-анимации</a></li> + <li>Анимация связанных CSS-свойств и по правилам: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li> </ul> diff --git a/files/ru/web/api/audiocontext/createmediaelementsource/index.html b/files/ru/web/api/audiocontext/createmediaelementsource/index.html index 58fc493708..e22a302124 100644 --- a/files/ru/web/api/audiocontext/createmediaelementsource/index.html +++ b/files/ru/web/api/audiocontext/createmediaelementsource/index.html @@ -6,7 +6,7 @@ translation_of: Web/API/AudioContext/createMediaElementSource <p>{{ APIRef("Web Audio API") }}</p> <div> -<p>Метод <code>createMediaElementSource()</code> интерфейса {{ domxref("AudioContext") }} используется для создания объекта {{ domxref("MediaElementAudioSourceNode") }} из существующих HTML элементов {{htmlelement("audio")}} или {{htmlelement("video")}} для дальнейших манипуляций со звуком и его воспроизведения.</p> +<p>Метод <code>createMediaElementSource()</code> интерфейса {{ domxref("AudioContext") }} используется для создания объекта {{ domxref("MediaElementAudioSourceNode") }} из существующих HTML-элементов {{htmlelement("audio")}} или {{htmlelement("video")}} для дальнейших манипуляций со звуком и его воспроизведения.</p> </div> <p>Узнать больше о созданном таким образом аудио узле можно на справочной странице {{ domxref("MediaElementAudioSourceNode") }}.</p> diff --git a/files/ru/web/api/canvas_api/index.html b/files/ru/web/api/canvas_api/index.html index 100425ba48..8dbb43155b 100644 --- a/files/ru/web/api/canvas_api/index.html +++ b/files/ru/web/api/canvas_api/index.html @@ -105,7 +105,7 @@ window.addEventListener("load", drawCanvas); <dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Demo: A basic ray-caster</a></dt> <dd>Демо анимации трассировки-лучей используя canvas.</dd> <dt><a href="/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas">Drawing DOM objects into a canvas</a></dt> - <dd>Как рисовать DOM контент, таких как HTML элементы, в canvas.</dd> + <dd>Как рисовать DOM контент, таких как HTML-элементы, в canvas.</dd> <dt><a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulating video using canvas</a></dt> <dd>Объединяет {{HTMLElement("video")}} и {{HTMLElement("canvas")}} для манипулирования видео данных в реальном времени.</dd> </dl> diff --git a/files/ru/web/api/canvas_api/tutorial/using_images/index.html b/files/ru/web/api/canvas_api/tutorial/using_images/index.html index 288787c605..891cb3e9e1 100644 --- a/files/ru/web/api/canvas_api/tutorial/using_images/index.html +++ b/files/ru/web/api/canvas_api/tutorial/using_images/index.html @@ -235,7 +235,7 @@ img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAs ctx.drawImage(document.getElementById('frame'),0,0); }</pre> -<p>В этот раз мы применили другой способ загрузки изображения. Вместо загрузки методом создания новых {{domxref("HTMLImageElement")}} объектов, мы включили их как {{HTMLElement("img")}} тэги прямо в наш HTML файл и из них выбрали изображения. Изображения скрыты с помощью CSS свойства {{cssxref("display")}}, установленного в "none" для этих изображений.</p> +<p>В этот раз мы применили другой способ загрузки изображения. Вместо загрузки методом создания новых {{domxref("HTMLImageElement")}} объектов, мы включили их как {{HTMLElement("img")}} тэги прямо в наш HTML файл и из них выбрали изображения. Изображения скрыты с помощью CSS-свойства {{cssxref("display")}}, установленного в "none" для этих изображений.</p> <p>{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}</p> diff --git a/files/ru/web/api/console/dirxml/index.html b/files/ru/web/api/console/dirxml/index.html index b79983557e..18f05e1352 100644 --- a/files/ru/web/api/console/dirxml/index.html +++ b/files/ru/web/api/console/dirxml/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Console/dirxml --- <div>{{APIRef("Console API")}}</div> -<p>Отображает интерактивное дерево из дочерних элементов указанного XML / HTML элемента. Если невозможно отобразить как элемент, то вместо этого отображается представление объекта JavaScript. Выходные данные представлены в виде иерархического списка расширяемых узлов, которые позволяют вам видеть содержимое дочерних узлов.</p> +<p>Отображает интерактивное дерево из дочерних элементов указанного XML / HTML-элемента. Если невозможно отобразить как элемент, то вместо этого отображается представление объекта JavaScript. Выходные данные представлены в виде иерархического списка расширяемых узлов, которые позволяют вам видеть содержимое дочерних узлов.</p> <p style="margin-bottom: 0cm; line-height: 100%;"></p> diff --git a/files/ru/web/api/cssstyledeclaration/getpropertyvalue/index.html b/files/ru/web/api/cssstyledeclaration/getpropertyvalue/index.html index 53701aa75c..906e9d5208 100644 --- a/files/ru/web/api/cssstyledeclaration/getpropertyvalue/index.html +++ b/files/ru/web/api/cssstyledeclaration/getpropertyvalue/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/CSSStyleDeclaration/getPropertyValue --- <p>{{ APIRef("CSSOM") }}</p> -<p><strong>CSSStyleDeclaration.getPropertyValue()</strong> интерфейс метода, который возвращает {{domxref('DOMString')}}, указанного CSS свойства.</p> +<p><strong>CSSStyleDeclaration.getPropertyValue()</strong> интерфейс метода, который возвращает {{domxref('DOMString')}}, указанного CSS-свойства.</p> <h2 id="Синтаксис">Синтаксис</h2> @@ -25,7 +25,7 @@ translation_of: Web/API/CSSStyleDeclaration/getPropertyValue <h2 id="Пример">Пример</h2> -<p>Следующий JavaScript код проверяет отмечен ли margin как important в CSS правиле селектора:</p> +<p>Следующий JavaScript-код проверяет отмечен ли margin как important в CSS-правиле селектора:</p> <pre class="brush: js">var declaration = document.styleSheets[0].rules[0].style; var value = declaration.getPropertyValue('margin'); // "1px 2px" diff --git a/files/ru/web/api/document/index.html b/files/ru/web/api/document/index.html index ef7162302c..df3d75e7eb 100644 --- a/files/ru/web/api/document/index.html +++ b/files/ru/web/api/document/index.html @@ -50,7 +50,7 @@ translation_of: Web/API/Document <dt>{{domxref("Document.doctype")}}</dt> <dd>Возвращает Document Type Definition (DTD) текущего документа .</dd> <dt>{{domxref("Document.documentElement")}}</dt> - <dd>Возвращает Element, который является первым дочерним элементом документа. Для HTML документов это HTML элемент.</dd> + <dd>Возвращает Element, который является первым дочерним элементом документа. Для HTML документов это HTML-элемент.</dd> <dt>{{domxref("Document.documentURI")}}</dt> <dd>Возвращает URL документа.</dd> <dt>{{domxref("Document.domConfig")}} {{Deprecated_inline}}</dt> diff --git a/files/ru/web/api/document_object_model/examples/index.html b/files/ru/web/api/document_object_model/examples/index.html index 8aa52fafd6..11e0233688 100644 --- a/files/ru/web/api/document_object_model/examples/index.html +++ b/files/ru/web/api/document_object_model/examples/index.html @@ -127,7 +127,7 @@ function changeText() { <h2 id="Example_4_Using_Stylesheets" name="Example_4:_Using_Stylesheets">Пример 4: Использование Стилей</h2> -<p>Свойство styleSheets объекта документа возвращает список таблиц стилей, которые были загружены в этот документ. Вы можете получить доступ к этим таблицам стилей и их правилам индивидуально, используя объекты таблицы стилей, стилей и CSS правил объекта, как показано в этом примере, который выводит все селектора правил стиля в консоль.</p> +<p>Свойство styleSheets объекта документа возвращает список таблиц стилей, которые были загружены в этот документ. Вы можете получить доступ к этим таблицам стилей и их правилам индивидуально, используя объекты таблицы стилей, стилей и CSS-правил объекта, как показано в этом примере, который выводит все селектора правил стиля в консоль.</p> <pre class="brush:js">var ss = document.styleSheets; diff --git a/files/ru/web/api/document_object_model/index.html b/files/ru/web/api/document_object_model/index.html index 97f0d238f6..1dfe67aba7 100644 --- a/files/ru/web/api/document_object_model/index.html +++ b/files/ru/web/api/document_object_model/index.html @@ -91,7 +91,7 @@ original_slug: DOM/DOM_Reference <p><code><font face="Open Sans, Arial, sans-serif">Объект </font>HTMLDocument</code> также даёт доступ к следующим возможностям браузера: вкладки, окна, в которых отрисовывается страница, используя интерфейс {{domxref("Window")}}, ассоциированный с ним {{domxref("window.style", "Style")}} (обычно CSS), история браузера, относящаяся к контексту, {{domxref("window.history", "History")}}, в конце концов, {{domxref("Selection")}} в документе.</p> -<h3 id="Интерфейсы_HTML_элементов">Интерфейсы HTML элементов</h3> +<h3 id="Интерфейсы_HTML_элементов">Интерфейсы HTML-элементов</h3> <div class="index"> <ul> diff --git a/files/ru/web/api/element/attachshadow/index.html b/files/ru/web/api/element/attachshadow/index.html index d2fcdbf0df..fa956a1ae5 100644 --- a/files/ru/web/api/element/attachshadow/index.html +++ b/files/ru/web/api/element/attachshadow/index.html @@ -80,7 +80,7 @@ element.shadowRoot === null; // returns true </tr> <tr> <td>NotSupportedError</td> - <td>Вы пытаетесь прикрепить shadow DOM к HTML элементу с некорректным именем, или к запрещённому элементу. (см. выше)</td> + <td>Вы пытаетесь прикрепить shadow DOM к HTML-элементу с некорректным именем, или к запрещённому элементу. (см. выше)</td> </tr> </tbody> </table> diff --git a/files/ru/web/api/element/index.html b/files/ru/web/api/element/index.html index 8fe70d2d05..f62292283b 100644 --- a/files/ru/web/api/element/index.html +++ b/files/ru/web/api/element/index.html @@ -54,7 +54,7 @@ translation_of: Web/API/Element <dd>Пространство имён URI элемента или null, если это не пространство имён.</dd> <dd> <div class="note"> - <p><strong>Примечание:</strong> В Firefox версии 3.5 и ранее, HTML элементы не находятся в пространстве имён. В более поздних версиях, HTML элементы находятся в пространстве имён <code><a href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> как в деревьях HTML, так и XML. {{ gecko_minversion_inline("1.9.2") }}</p> + <p><strong>Примечание:</strong> В Firefox версии 3.5 и ранее, HTML-элементы не находятся в пространстве имён. В более поздних версиях, HTML-элементы находятся в пространстве имён <code><a href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> как в деревьях HTML, так и XML. {{ gecko_minversion_inline("1.9.2") }}</p> </div> </dd> </dl> diff --git a/files/ru/web/api/element/innerhtml/index.html b/files/ru/web/api/element/innerhtml/index.html index 9920c078ae..197bddb724 100644 --- a/files/ru/web/api/element/innerhtml/index.html +++ b/files/ru/web/api/element/innerhtml/index.html @@ -50,7 +50,7 @@ javascript:"<pre>"+document.documentElement.innerHTML.replace(/</g,"&am <p>Не редко можно увидеть использование InnerHTML для вставки текста в веб страницу. Это приводит к рискам безопасности.</p> <pre class="brush: js notranslate">const name = "John"; -// предполагая, что 'el' является HTML DOM элементом. +// предполагая, что 'el' является HTML DOM-элементом. el.innerHTML = name; // безвредный в этом случае // ... diff --git a/files/ru/web/api/element/localname/index.html b/files/ru/web/api/element/localname/index.html index 5512a8c180..9a48d667af 100644 --- a/files/ru/web/api/element/localname/index.html +++ b/files/ru/web/api/element/localname/index.html @@ -62,7 +62,7 @@ original_slug: Web/API/Node/localName <div class="note"> -<p><strong>Примечание:</strong> В {{Gecko("1.9.2")}} и ранее, свойство возвращает версию локального имени в верхнем регистре для HTML элементов в HTML DOMs (в отличии от XHTML элементов в XML DOMs). В более поздних версиях, в соответствии с HTML5, свойство возвращает, в случае внутреннего хранилища DOM, в нижнем регистре для HTML элементов в HTML DOMs и XHTML элементов в XML DOMs. {{domxref("element.tagName","tagName")}} свойство продолжает возвращать в верхнем регистре для HTML элементов в HTML DOMs.</p> +<p><strong>Примечание:</strong> В {{Gecko("1.9.2")}} и ранее, свойство возвращает версию локального имени в верхнем регистре для HTML-элементов в HTML DOMs (в отличии от XHTML элементов в XML DOMs). В более поздних версиях, в соответствии с HTML5, свойство возвращает, в случае внутреннего хранилища DOM, в нижнем регистре для HTML-элементов в HTML DOMs и XHTML элементов в XML DOMs. {{domxref("element.tagName","tagName")}} свойство продолжает возвращать в верхнем регистре для HTML-элементов в HTML DOMs.</p> </div> <p>Для узла другого <a href="/en-US/docs/DOM/Node.nodeType" title="DOM/Node.nodeType">типа</a> отличного от <code>ELEMENT_NODE</code> и <code>ATTRIBUTE_NODE</code> <code>localName</code> всегда <code>null</code>.</p> diff --git a/files/ru/web/api/element/namespaceuri/index.html b/files/ru/web/api/element/namespaceuri/index.html index a9c6516acc..5dcdd8d2df 100644 --- a/files/ru/web/api/element/namespaceuri/index.html +++ b/files/ru/web/api/element/namespaceuri/index.html @@ -27,7 +27,7 @@ original_slug: Web/API/Node/namespaceURI <p>Это не вычисленное значение, которое является результатом поиска имён на основе проверки декларации в области пространства имён. Пространство имён URI узла заморожена в момент создания узла.</p> -<p>В Firefox 3.5 и выше, пространство имён URI для HTML элементов в HTML документах это <code>null</code>. В более поздних версиях, в соответствии с HTML5, это <code><a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a></code> как в XHTML. {{gecko_minversion_inline("1.9.2")}}</p> +<p>В Firefox 3.5 и выше, пространство имён URI для HTML-элементов в HTML документах это <code>null</code>. В более поздних версиях, в соответствии с HTML5, это <code><a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a></code> как в XHTML. {{gecko_minversion_inline("1.9.2")}}</p> <p>Для узлов любого <a href="/en-US/docs/DOM/Node.nodeType" title="DOM/Node/NodeType/Node.nodeType">nodeType</a> кроме <code>ELEMENT_NODE</code> и <code>ATTRIBUTE_NODE</code> значение <code>namespaceURI</code> всегда <code>null</code>.</p> diff --git a/files/ru/web/api/element/scrollheight/index.html b/files/ru/web/api/element/scrollheight/index.html index 895c36a2a8..b6bd9333ee 100644 --- a/files/ru/web/api/element/scrollheight/index.html +++ b/files/ru/web/api/element/scrollheight/index.html @@ -166,7 +166,7 @@ onload = function () { </tbody> </table> -<p><strong>В версиях Firefox до 21-й:</strong> когда контент элемента не создаёт вертикальную полосу прокрутки, его свойство <code style="font-size: 14px;">scrollHeight</code><span style="line-height: 1.5;"> равно значению </span><code style="font-size: 14px;">clientHeight</code><span style="line-height: 1.5;">. Это может означать либо то, что контента слишком мало, чтобы ему потребовалась полоса прокрутки, либо то, что у элемента значение CSS свойства overflow равно visible (в этом случае прокрутка отсутствует).</span></p> +<p><strong>В версиях Firefox до 21-й:</strong> когда контент элемента не создаёт вертикальную полосу прокрутки, его свойство <code style="font-size: 14px;">scrollHeight</code><span style="line-height: 1.5;"> равно значению </span><code style="font-size: 14px;">clientHeight</code><span style="line-height: 1.5;">. Это может означать либо то, что контента слишком мало, чтобы ему потребовалась полоса прокрутки, либо то, что у элемента значение CSS-свойства overflow равно visible (в этом случае прокрутка отсутствует).</span></p> <h2 id="See_Also" name="See_Also">Смотрите также</h2> diff --git a/files/ru/web/api/event/index.html b/files/ru/web/api/event/index.html index 9c37ad1516..ff419387c8 100644 --- a/files/ru/web/api/event/index.html +++ b/files/ru/web/api/event/index.html @@ -107,7 +107,7 @@ translation_of: Web/API/Event <dt>{{domxref("Event.returnValue")}} {{non-standard_inline}}</dt> <dd>Нестандартная альтернатива (оставшаяся от старых версий Microsoft Internet Explorer) для {{domxref("Event.preventDefault()")}} и {{domxref("Event.defaultPrevented")}}.</dd> <dt>{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}</dt> - <dd>{{jsxref("Boolean", "Логическое значение")}}, показывающее всплывает ли данное событие через shadow root (внутренний DOM элемента). Это свойство было переименовано в {{domxref("Event.composed", "composed")}}.</dd> + <dd>{{jsxref("Boolean", "Логическое значение")}}, показывающее всплывает ли данное событие через shadow root (внутренний DOM-элемента). Это свойство было переименовано в {{domxref("Event.composed", "composed")}}.</dd> <dt>{{domxref("Event.srcElement")}} {{non-standard_inline}}</dt> <dd>Нестандартный синоним (остался от старых версий Microsoft Internet Explorer) для {{domxref("Event.target")}}.</dd> <dt>{{domxref("Event.target")}} {{readonlyinline}}</dt> diff --git a/files/ru/web/api/event/stopimmediatepropagation/index.html b/files/ru/web/api/event/stopimmediatepropagation/index.html index fd19d6a123..e1156ed315 100644 --- a/files/ru/web/api/event/stopimmediatepropagation/index.html +++ b/files/ru/web/api/event/stopimmediatepropagation/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Event/stopImmediatePropagation --- <p id="Summary">{{APIRef("DOM")}}</p> -<p>Останавливает цепочку вызова событий для последующих обработчиков DOM элемента.</p> +<p>Останавливает цепочку вызова событий для последующих обработчиков DOM-элемента.</p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> diff --git a/files/ru/web/api/eventtarget/addeventlistener/index.html b/files/ru/web/api/eventtarget/addeventlistener/index.html index 812720bd62..1d1f2bd40c 100644 --- a/files/ru/web/api/eventtarget/addeventlistener/index.html +++ b/files/ru/web/api/eventtarget/addeventlistener/index.html @@ -214,7 +214,7 @@ el.addEventListener("click", () => { modifyText("four"); }, false);</pre> <ul> <li>Позволяет добавлять множество обработчиков для одного события. Это особенно полезно для <a href="/en-US/docs/DHTML" title="DHTML">DHTML</a> библиотек или <a href="/en-US/docs/Extensions" title="Extensions">Mozilla extensions</a>, которые должны работать в условиях использования сторонних библиотек/расширений.</li> <li>Предоставляет точный контроль фазы срабатывания(вызова) обработчика (захват или всплытие)</li> - <li>Срабатывает на любом DOM элементе, а не только на HTML элементах.</li> + <li>Срабатывает на любом DOM-элементе, а не только на HTML-элементах.</li> </ul> <p>Ниже описан другой, <a href="#Older_way_to_register_event_listeners">более старый способ регистрации обработчиков</a>.</p> diff --git a/files/ru/web/api/globaleventhandlers/onanimationcancel/index.html b/files/ru/web/api/globaleventhandlers/onanimationcancel/index.html index 6ee4a7539d..abdbb8cef3 100644 --- a/files/ru/web/api/globaleventhandlers/onanimationcancel/index.html +++ b/files/ru/web/api/globaleventhandlers/onanimationcancel/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/GlobalEventHandlers/onanimationcancel <h3 id="Значения">Значения</h3> -<p>Функция {{jsxref("Function")}} вызывается когда {{event("animationcancel")}} происходит событие, указывающее, что CSS анимация запустилась на объекте <em>target</em>, где объект <em>target</em> object это HTML элемент ({{domxref("HTMLElement")}}), документ ({{domxref("Document")}}), или окно ({{domxref("Window")}}). Эта функция принимает один параметр {{domxref("AnimationEvent")}} - объект, описывающий событие, которое произошло.</p> +<p>Функция {{jsxref("Function")}} вызывается когда {{event("animationcancel")}} происходит событие, указывающее, что CSS-анимация запустилась на объекте <em>target</em>, где объект <em>target</em> object это HTML-элемент ({{domxref("HTMLElement")}}), документ ({{domxref("Document")}}), или окно ({{domxref("Window")}}). Эта функция принимает один параметр {{domxref("AnimationEvent")}} - объект, описывающий событие, которое произошло.</p> <h2 id="Example" name="Example">Пример</h2> diff --git a/files/ru/web/api/globaleventhandlers/onanimationend/index.html b/files/ru/web/api/globaleventhandlers/onanimationend/index.html index f8de26a359..e3b2c90f90 100644 --- a/files/ru/web/api/globaleventhandlers/onanimationend/index.html +++ b/files/ru/web/api/globaleventhandlers/onanimationend/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/GlobalEventHandlers/onanimationend --- <div>{{APIRef("CSS3 Animations")}}</div> -<p>Обработчик события {{event("animationend")}}. Это событие вызывается когда <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS анимация</a> достигает конца своего активного периода, который вычисляется как ({{cssxref("animation-duration")}} * {{cssxref("animation-iteration-count")}}) + {{cssxref("animation-delay")}}.</p> +<p>Обработчик события {{event("animationend")}}. Это событие вызывается когда <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS-анимация</a> достигает конца своего активного периода, который вычисляется как ({{cssxref("animation-duration")}} * {{cssxref("animation-iteration-count")}}) + {{cssxref("animation-delay")}}.</p> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/api/htmlanchorelement/index.html b/files/ru/web/api/htmlanchorelement/index.html index 82fcf82abb..8abe567e77 100644 --- a/files/ru/web/api/htmlanchorelement/index.html +++ b/files/ru/web/api/htmlanchorelement/index.html @@ -133,5 +133,5 @@ translation_of: Web/API/HTMLAnchorElement <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li>HTML элемент реализующий это интерфейс: {{HTMLElement("a")}}</li> + <li>HTML-элемент реализующий это интерфейс: {{HTMLElement("a")}}</li> </ul> diff --git a/files/ru/web/api/htmlareaelement/index.html b/files/ru/web/api/htmlareaelement/index.html index 8dd31972f5..db81d5ab4b 100644 --- a/files/ru/web/api/htmlareaelement/index.html +++ b/files/ru/web/api/htmlareaelement/index.html @@ -122,5 +122,5 @@ translation_of: Web/API/HTMLAreaElement <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li>HTML элемент реализующий этот интерфейс: {{ HTMLElement("area") }}.</li> + <li>HTML-элемент реализующий этот интерфейс: {{ HTMLElement("area") }}.</li> </ul> diff --git a/files/ru/web/api/htmlaudioelement/index.html b/files/ru/web/api/htmlaudioelement/index.html index 68e2136b06..7ae3ba2fcf 100644 --- a/files/ru/web/api/htmlaudioelement/index.html +++ b/files/ru/web/api/htmlaudioelement/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/HTMLAudioElement <div> </div> -<p><strong><code>HTMLAudioElement</code></strong> позволяет получить доступ к элементу {{HTMLElement("audio")}} и имеет DOM элемент {{domxref("HTMLMediaElement")}}.</p> +<p><strong><code>HTMLAudioElement</code></strong> позволяет получить доступ к элементу {{HTMLElement("audio")}} и имеет DOM-элемент {{domxref("HTMLMediaElement")}}.</p> <h2 id="Properties" name="Properties">Свойства</h2> diff --git a/files/ru/web/api/htmlbaseelement/index.html b/files/ru/web/api/htmlbaseelement/index.html index 0c53ae9551..fa0a9d0868 100644 --- a/files/ru/web/api/htmlbaseelement/index.html +++ b/files/ru/web/api/htmlbaseelement/index.html @@ -70,5 +70,5 @@ translation_of: Web/API/HTMLBaseElement <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li>HTML элемент реализующий этот интерфейс: {{ HTMLElement("base") }}</li> + <li>HTML-элемент реализующий этот интерфейс: {{ HTMLElement("base") }}</li> </ul> diff --git a/files/ru/web/api/htmlbasefontelement/index.html b/files/ru/web/api/htmlbasefontelement/index.html index f247204fcc..4ff14ea171 100644 --- a/files/ru/web/api/htmlbasefontelement/index.html +++ b/files/ru/web/api/htmlbasefontelement/index.html @@ -55,5 +55,5 @@ translation_of: Web/API/HTMLBaseFontElement <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li>HTML элемент {{HTMLElement("basefont")}}осуществляющий этот интерфейс.</li> + <li>HTML-элемент {{HTMLElement("basefont")}}осуществляющий этот интерфейс.</li> </ul> diff --git a/files/ru/web/api/htmlbodyelement/index.html b/files/ru/web/api/htmlbodyelement/index.html index 90167ebbc7..358b859efc 100644 --- a/files/ru/web/api/htmlbodyelement/index.html +++ b/files/ru/web/api/htmlbodyelement/index.html @@ -110,5 +110,5 @@ translation_of: Web/API/HTMLBodyElement <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li>HTML элемент реализующий этот интерфейс: {{ HTMLElement("body") }}</li> + <li>HTML-элемент реализующий этот интерфейс: {{ HTMLElement("body") }}</li> </ul> diff --git a/files/ru/web/api/htmlbrelement/index.html b/files/ru/web/api/htmlbrelement/index.html index d12006f28a..f07fb4e550 100644 --- a/files/ru/web/api/htmlbrelement/index.html +++ b/files/ru/web/api/htmlbrelement/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/HTMLBRElement <div> </div> -<p><strong><code>HTMLBRElement</code></strong> интерфейс представляющий HTML элемент линии разрыва ({{htmlelement("br")}}). Это унаследовано от {{domxref("HTMLElement")}}.</p> +<p><strong><code>HTMLBRElement</code></strong> интерфейс представляющий HTML-элемент линии разрыва ({{htmlelement("br")}}). Это унаследовано от {{domxref("HTMLElement")}}.</p> <h2 id="Свойства">Свойства</h2> @@ -75,5 +75,5 @@ translation_of: Web/API/HTMLBRElement <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li>HTML элемент реализующий этот интерфейс: {{HTMLElement("br")}}</li> + <li>HTML-элемент реализующий этот интерфейс: {{HTMLElement("br")}}</li> </ul> diff --git a/files/ru/web/api/htmlcollection/index.html b/files/ru/web/api/htmlcollection/index.html index 02d4d07a6b..41d13b7f8d 100644 --- a/files/ru/web/api/htmlcollection/index.html +++ b/files/ru/web/api/htmlcollection/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/HTMLCollection <p>Интерфейс <strong><code>HTMLCollection</code></strong> является обобщённой коллекцией (объектом, ведущим себя подобно массиву) элементов (в порядке упоминания в документе) и предоставляет методы и свойства для получения хранящихся в нём элементов.</p> -<div class="note"><strong>Замечание:</strong> Интерфейс назван <code>HTMLCollection</code> по историческим причинам. До стандарта DOM4 коллекции, реализующие данный интерфейс, использовались только для хранения HTML элементов.</div> +<div class="note"><strong>Замечание:</strong> Интерфейс назван <code>HTMLCollection</code> по историческим причинам. До стандарта DOM4 коллекции, реализующие данный интерфейс, использовались только для хранения HTML-элементов.</div> <p><code>HTMLCollection</code>, хранящая элементы DOM, является динамической. При изменении документа она моментально отражает все произведённые изменения.</p> @@ -24,12 +24,12 @@ translation_of: Web/API/HTMLCollection <dt>{{domxref("HTMLCollection.item()")}}</dt> <dd>Возвращает узел с порядковым номером <code>index</code>; отсчёт ведётся от нуля. Возвращает <code>null</code>, если <code>index </code>выходит за границы допустимого диапазона.</dd> <dt>{{domxref("HTMLCollection.namedItem()")}}</dt> - <dd>Возвращает узел, идентификатор или имя (в целях совместимости) которого совпадает со строкой, переданной в аргументе <code>name</code>. Соответствие имени проверяется в самую последнюю очередь, только для HTML элементов и только для тех из них, которые поддерживают свойство <code>name</code>. Возвращает <code>null</code> , если искомый элемент отсутствует.</dd> + <dd>Возвращает узел, идентификатор или имя (в целях совместимости) которого совпадает со строкой, переданной в аргументе <code>name</code>. Соответствие имени проверяется в самую последнюю очередь, только для HTML-элементов и только для тех из них, которые поддерживают свойство <code>name</code>. Возвращает <code>null</code> , если искомый элемент отсутствует.</dd> </dl> <h2 id="Использование_в_JavaScript">Использование в JavaScript</h2> -<p><code>HTMLCollection</code> предоставляет своё содержимое как собственные свойства, доступные как по имени, так и по индексу (как в массиве). Это связано с тем, что идентификаторы HTML элементов, содержащие точки и двоеточие (допустимо в HTML5), адресуемы исключительно через синтаксис доступа к массиву. Однако, при числовых идентификаторах невозможно определить, производится ли запрос по индексу или по идентификатору, неявно приведённому к числу.</p> +<p><code>HTMLCollection</code> предоставляет своё содержимое как собственные свойства, доступные как по имени, так и по индексу (как в массиве). Это связано с тем, что идентификаторы HTML-элементов, содержащие точки и двоеточие (допустимо в HTML5), адресуемы исключительно через синтаксис доступа к массиву. Однако, при числовых идентификаторах невозможно определить, производится ли запрос по индексу или по идентификатору, неявно приведённому к числу.</p> <p>Пусть в документе присутствует элемент <code><form> </code>с <code>id,</code> равным «<code>myForm</code>»<code>:</code></p> diff --git a/files/ru/web/api/htmldataelement/index.html b/files/ru/web/api/htmldataelement/index.html index 5413e65602..e3ab32d179 100644 --- a/files/ru/web/api/htmldataelement/index.html +++ b/files/ru/web/api/htmldataelement/index.html @@ -61,5 +61,5 @@ translation_of: Web/API/HTMLDataElement <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li>HTML элемент реализующий этот интерфейс: {{HTMLElement("data")}}.</li> + <li>HTML-элемент реализующий этот интерфейс: {{HTMLElement("data")}}.</li> </ul> diff --git a/files/ru/web/api/htmldialogelement/index.html b/files/ru/web/api/htmldialogelement/index.html index 941f36a9bc..db86f745fb 100644 --- a/files/ru/web/api/htmldialogelement/index.html +++ b/files/ru/web/api/htmldialogelement/index.html @@ -132,5 +132,5 @@ translation_of: Web/API/HTMLDialogElement <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li>HTML элемент, реализующий этот интерфейс взаимодействия: {{ HTMLElement("dialog") }}.</li> + <li>HTML-элемент, реализующий этот интерфейс взаимодействия: {{ HTMLElement("dialog") }}.</li> </ul> diff --git a/files/ru/web/api/htmldialogelement/open/index.html b/files/ru/web/api/htmldialogelement/open/index.html index 28a6c8f812..d207727568 100644 --- a/files/ru/web/api/htmldialogelement/open/index.html +++ b/files/ru/web/api/htmldialogelement/open/index.html @@ -122,5 +122,5 @@ var myOpenValue = dialogInstance.open;</pre> <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li>HTML элемент, использующий данный интерфейс взаимодействия: {{ HTMLElement("dialog") }}.</li> + <li>HTML-элемент, использующий данный интерфейс взаимодействия: {{ HTMLElement("dialog") }}.</li> </ul> diff --git a/files/ru/web/api/htmldivelement/index.html b/files/ru/web/api/htmldivelement/index.html index d98a50dcbe..d9dc9fdff6 100644 --- a/files/ru/web/api/htmldivelement/index.html +++ b/files/ru/web/api/htmldivelement/index.html @@ -65,5 +65,5 @@ translation_of: Web/API/HTMLDivElement <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li>HTML элемент реализующий этот интерфейс: {{ HTMLElement("div") }}.</li> + <li>HTML-элемент реализующий этот интерфейс: {{ HTMLElement("div") }}.</li> </ul> diff --git a/files/ru/web/api/htmlelement/hidden/index.html b/files/ru/web/api/htmlelement/hidden/index.html index e94f8d2729..11f118c0a9 100644 --- a/files/ru/web/api/htmlelement/hidden/index.html +++ b/files/ru/web/api/htmlelement/hidden/index.html @@ -4,7 +4,7 @@ slug: Web/API/HTMLElement/hidden translation_of: Web/API/HTMLElement/hidden --- <div> -<div>HTMLElement <span class="seoSummary">Свойство <strong><code>hidden</code></strong> является {{jsxref("Boolean")}} типом данных , который принимает значение true , если содержимое спрятано, в противном случае значение будет false. Это свойство совершенно отличается от использования CSS свойства {{cssxref("display")}} , чтобы контролировать отображение элемента.Свойство </span><code>hidden</code> <span class="seoSummary">применимо ко всем режимам представления и не должно использоваться для скрытия содержимого предназначенного для прямого доступа к пользователю. Соответствующие варианты использования включают:</span></div> +<div>HTMLElement <span class="seoSummary">Свойство <strong><code>hidden</code></strong> является {{jsxref("Boolean")}} типом данных , который принимает значение true , если содержимое спрятано, в противном случае значение будет false. Это свойство совершенно отличается от использования CSS-свойства {{cssxref("display")}} , чтобы контролировать отображение элемента.Свойство </span><code>hidden</code> <span class="seoSummary">применимо ко всем режимам представления и не должно использоваться для скрытия содержимого предназначенного для прямого доступа к пользователю. Соответствующие варианты использования включают:</span></div> </div> <ul> @@ -66,7 +66,7 @@ translation_of: Web/API/HTMLElement/hidden <h4 id="The_follow-up_panel">The follow-up panel</h4> -<p>После того, как пользователь нажимает OK в welcome panel, JavaScript код меняет две панели изменяя их значения hidden. Следующая The follow-up panel представлена в этом HMTL:</p> +<p>После того, как пользователь нажимает OK в welcome panel, JavaScript-код меняет две панели изменяя их значения hidden. Следующая The follow-up panel представлена в этом HMTL:</p> <pre class="brush: html"><div id="awesome" class="panel" hidden> <h1>Thanks!</h1> diff --git a/files/ru/web/api/htmlheadelement/index.html b/files/ru/web/api/htmlheadelement/index.html index a95cbb4205..c0a0202f29 100644 --- a/files/ru/web/api/htmlheadelement/index.html +++ b/files/ru/web/api/htmlheadelement/index.html @@ -64,5 +64,5 @@ translation_of: Web/API/HTMLHeadElement <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li>HTML элемент реализующий этот интерфейс: {{HTMLElement("head")}}</li> + <li>HTML-элемент реализующий этот интерфейс: {{HTMLElement("head")}}</li> </ul> diff --git a/files/ru/web/api/htmlmediaelement/index.html b/files/ru/web/api/htmlmediaelement/index.html index e05f2bc409..6c030c3263 100644 --- a/files/ru/web/api/htmlmediaelement/index.html +++ b/files/ru/web/api/htmlmediaelement/index.html @@ -278,7 +278,7 @@ translation_of: Web/API/HTMLMediaElement <ul> <li>Рекомендации <ul> - <li>{{HTMLElement("video")}} и {{HTMLElement("audio")}} HTML элементы.</li> + <li>{{HTMLElement("video")}} и {{HTMLElement("audio")}} HTML-элементы.</li> <li>{{domxref("HTMLVideoElement")}} и {{domxref("HTMLAudioElement")}} интерфейсы, полученные из HTMLMediaElement.</li> </ul> </li> diff --git a/files/ru/web/api/htmltimeelement/index.html b/files/ru/web/api/htmltimeelement/index.html index 747b45af01..3e58608d55 100644 --- a/files/ru/web/api/htmltimeelement/index.html +++ b/files/ru/web/api/htmltimeelement/index.html @@ -60,5 +60,5 @@ translation_of: Web/API/HTMLTimeElement <h2 id="See_also" name="See_also">Смотрите также</h2> <ul> - <li>HTML элемент, реализующий данный интерфейс: {{HTMLElement("time")}}.</li> + <li>HTML-элемент, реализующий данный интерфейс: {{HTMLElement("time")}}.</li> </ul> diff --git a/files/ru/web/api/htmlunknownelement/index.html b/files/ru/web/api/htmlunknownelement/index.html index d6d69fe0f0..d455f1787e 100644 --- a/files/ru/web/api/htmlunknownelement/index.html +++ b/files/ru/web/api/htmlunknownelement/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/HTMLUnknownElement <div>{{ APIRef("HTML DOM") }}</div> </div> -<p>Интерфейс <strong><code>HTMLUnknownElement</code></strong> предоставляет недопустимый HTML элемент и происходит от интерфейса {{domxref("HTMLElement")}}, но без каких либо дополнительных свойств и методов.</p> +<p>Интерфейс <strong><code>HTMLUnknownElement</code></strong> предоставляет недопустимый HTML-элемент и происходит от интерфейса {{domxref("HTMLElement")}}, но без каких либо дополнительных свойств и методов.</p> <h2 id="Свойства">Свойства</h2> @@ -46,5 +46,5 @@ translation_of: Web/API/HTMLUnknownElement <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li>Устаревшие или нестандартные HTML элементы реализующие этот интерфейс: {{HTMLElement("bgsound")}}, {{HTMLElement("blink")}}, {{HTMLElement("isindex")}}, {{HTMLElement("multicol")}}, {{HTMLElement("nextid")}}, {{HTMLElement("rb")}}, {{HTMLElement("spacer")}}</li> + <li>Устаревшие или нестандартные HTML-элементы реализующие этот интерфейс: {{HTMLElement("bgsound")}}, {{HTMLElement("blink")}}, {{HTMLElement("isindex")}}, {{HTMLElement("multicol")}}, {{HTMLElement("nextid")}}, {{HTMLElement("rb")}}, {{HTMLElement("spacer")}}</li> </ul> diff --git a/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html b/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html index d47c4fd2f4..8c3ac3595c 100644 --- a/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html +++ b/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html @@ -185,7 +185,7 @@ article h2 { <h2 id="Совмещаем_с_JavaScript">Совмещаем с JavaScript</h2> -<p>Перейдём к JavaScript коду, который всё оживит. Начнём с глобальных переменных:</p> +<p>Перейдём к JavaScript-коду, который всё оживит. Начнём с глобальных переменных:</p> <pre class="brush: js notranslate">let contentBox; diff --git a/files/ru/web/api/mediadevices/getusermedia/index.html b/files/ru/web/api/mediadevices/getusermedia/index.html index bd42ad72b5..bd39dd9fd0 100644 --- a/files/ru/web/api/mediadevices/getusermedia/index.html +++ b/files/ru/web/api/mediadevices/getusermedia/index.html @@ -211,7 +211,7 @@ translation_of: Web/API/MediaDevices/getUserMedia <ul> <li>Документ, загруженный в песочницу {{HTMLElement("iframe")}} элемента не может вызвать <code>getUserMedia()</code>, до тех пор пока, на элементе <code><iframe></code> находиться атрибут {{htmlattrxref("sandbox", "iframe")}}, установленный в значение <code>allow-same-origin</code>.</li> - <li>Документ, загруженный по протоколам <code>data://</code> или <code>blob://</code> в URL-адресе, не имеющий источника (такими являются типы URL-ов, введённые пользователями в строке адреса браузера) не может вызвать <code>getUserMedia()</code>. Подобные типы URL-ов, загружаемые из JavaScript кода, наследуют разрешения скрипта.</li> + <li>Документ, загруженный по протоколам <code>data://</code> или <code>blob://</code> в URL-адресе, не имеющий источника (такими являются типы URL-ов, введённые пользователями в строке адреса браузера) не может вызвать <code>getUserMedia()</code>. Подобные типы URL-ов, загружаемые из JavaScript-кода, наследуют разрешения скрипта.</li> <li>Иные ситуации, документы которых не имеют источника, к примеру элемент, содержащий атрибут {{htmlattrxref("srcdoc", "iframe")}}, использующийся для указания содержимого фрейма.</li> </ul> diff --git a/files/ru/web/api/node/index.html b/files/ru/web/api/node/index.html index 6061ca10a4..c19789a028 100644 --- a/files/ru/web/api/node/index.html +++ b/files/ru/web/api/node/index.html @@ -30,9 +30,9 @@ translation_of: Web/API/Node <dt>{{domxref("Node.lastChild")}} {{readonlyInline}}</dt> <dd>Возвращает {{domxref("Node")}}, представляющий последний прямой узел потомок узла или <code>null</code>, если узел не имеет потомков.</dd> <dt>{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt> - <dd>Возвращает {{domxref("DOMString")}} представляющий локальную часть условного имени элемента. В Firefox 3.5 и более ранних версиях, свойство локального имени в верхнем регистре для HTML элементов (но не XHTML элементов). В более поздних версиях, такого не произошло, и свойство находится в нижнем регистре для HTML и XHTML {{ gecko_minversion_inline("1.9.2") }}. Хотя недавние спецификации требуют от <code>localName</code> быть определённым как интерфейс {{domxref("Element")}}, но браузеры основанные на Gecko все ещё реализуют его как интерфейс {{domxref("Node")}}.</dd> + <dd>Возвращает {{domxref("DOMString")}} представляющий локальную часть условного имени элемента. В Firefox 3.5 и более ранних версиях, свойство локального имени в верхнем регистре для HTML-элементов (но не XHTML элементов). В более поздних версиях, такого не произошло, и свойство находится в нижнем регистре для HTML и XHTML {{ gecko_minversion_inline("1.9.2") }}. Хотя недавние спецификации требуют от <code>localName</code> быть определённым как интерфейс {{domxref("Element")}}, но браузеры основанные на Gecko все ещё реализуют его как интерфейс {{domxref("Node")}}.</dd> <dt>{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}</dt> - <dd>Пространство имён URI данного узла или <code>null,</code> если нет пространства имён. В Firefox 3.5 и более ранних версиях, HTML элементы не имеют пространства имён. В более поздних версиях, HTML элементы находятся в пространстве имён <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> для деревьев HTML и XML. {{ gecko_minversion_inline("1.9.2") }}<br> + <dd>Пространство имён URI данного узла или <code>null,</code> если нет пространства имён. В Firefox 3.5 и более ранних версиях, HTML-элементы не имеют пространства имён. В более поздних версиях, HTML-элементы находятся в пространстве имён <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> для деревьев HTML и XML. {{ gecko_minversion_inline("1.9.2") }}<br> Хотя недавние спецификации требуют <code>namespaceURI</code> быть определённым как интерфейс {{domxref("Element")}}, но браузеры основанные на Gecko все ещё реализуют его как интерфейс {{domxref("Node")}}.</dd> <dt>{{domxref("Node.nextSibling")}} {{readonlyInline}}</dt> <dd>Возвращает {{domxref("Node")}} представляющий следующий узел в древе или <code>null,</code> если не такого узла.</dd> diff --git a/files/ru/web/api/node/isequalnode/index.html b/files/ru/web/api/node/isequalnode/index.html index c091b24c9f..f80614f7bd 100644 --- a/files/ru/web/api/node/isequalnode/index.html +++ b/files/ru/web/api/node/isequalnode/index.html @@ -20,7 +20,7 @@ translation_of: Web/API/Node/isEqualNode <h2 id="Пример">Пример</h2> -<p>В этом примере мы создаём три блока {{HTMLElement ("div")}}. Первый и третий имеют одинаковое содержание и атрибуты, в то время как второй отличается. Затем мы запускаем некоторый JavaScript код для сравнения узлов с помощью isEqualNode () и выводим результаты.</p> +<p>В этом примере мы создаём три блока {{HTMLElement ("div")}}. Первый и третий имеют одинаковое содержание и атрибуты, в то время как второй отличается. Затем мы запускаем некоторый JavaScript-код для сравнения узлов с помощью isEqualNode () и выводим результаты.</p> <h3 id="HTML">HTML</h3> diff --git a/files/ru/web/api/keyboardevent/which/index.html b/files/ru/web/api/uievent/which/index.html index 0b78a32ab4..3c2fc530cc 100644 --- a/files/ru/web/api/keyboardevent/which/index.html +++ b/files/ru/web/api/uievent/which/index.html @@ -1,6 +1,6 @@ --- title: KeyboardEvent.which -slug: Web/API/KeyboardEvent/which +slug: Web/API/UIEvent/which tags: - API - DOM @@ -8,6 +8,7 @@ tags: - Property - Reference translation_of: Web/API/KeyboardEvent/which +original_slug: Web/API/KeyboardEvent/which --- <div>{{APIRef ("События DOM")}} {{Deprecated_header}}<br> Свойство which только для чтения интерфейса {{domxref ("KeyboardEvent")}} возвращает числовой код клавиши нажатой клавиши или код символа (charCode) для нажатой буквенно-цифровой клавиши.</div> diff --git a/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html b/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html index 9aa24fcce9..9e3a8044d1 100644 --- a/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html +++ b/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API <p>В <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> открывает анимацию на движке браузеров для разработчиков и манипуляции через (с помощью) JavaScript.<br> Этот API был разработан в основе реализации <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> и <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a>, и оставлял свободу движений для будущих анимационных эффектов. Это один из самых эффективных способов анимации, поддерживаемой в Интернете, позволяя браузеру сделать свою собственную внутреннюю оптимизацию без хаков, принуждения, или {{domxref("Window.requestAnimationFrame()")}}.</p> -<p>С Web Animations API, мы можем управлять интерактивной анимацией со стилями JavaScript, отделяя представление от действия. Нам больше не нужно полагаться на DOM-heavy методики написания CSS свойств и обзорных классов для элементов контроля воспроизведения направления. И в отличии от чисто декларативного CSS, JavaScript также позволяет устанавливать динамические значения свойств и их продолжительность. Для создания пользовательских библиотек и интерактивной анимации Web Animations API может стать прекрасным инструментом в работе. Давайте посмотрим, что он может сделать!</p> +<p>С Web Animations API, мы можем управлять интерактивной анимацией со стилями JavaScript, отделяя представление от действия. Нам больше не нужно полагаться на DOM-heavy методики написания CSS-свойств и обзорных классов для элементов контроля воспроизведения направления. И в отличии от чисто декларативного CSS, JavaScript также позволяет устанавливать динамические значения свойств и их продолжительность. Для создания пользовательских библиотек и интерактивной анимации Web Animations API может стать прекрасным инструментом в работе. Давайте посмотрим, что он может сделать!</p> <h2 id="Поддержка_Браузеров">Поддержка Браузеров</h2> @@ -91,7 +91,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API </ul> <div class="note"> -<p>Существует ряд небольших различий между терминологией, используемой в анимации CSS и терминологии, которая используется в веб-анимации. Например, веб-анимации не используется строка "бесконечное", а вместо этого использует JavaScript код бесконечность. И вместо временной-функции мы используем ослабление. Мы не будем перечислять здесь значение ослабления, потому что, в отличие от CSS анимации, где по умолчанию <a href="/en-US/docs/Web/CSS/animation-timing-function">animation-timing-function</a> это просто, в веб-анимации API для ослабления по умолчанию используется линейная зависимость - которые мы используем здесь</p> +<p>Существует ряд небольших различий между терминологией, используемой в анимации CSS и терминологии, которая используется в веб-анимации. Например, веб-анимации не используется строка "бесконечное", а вместо этого использует JavaScript-код бесконечность. И вместо временной-функции мы используем ослабление. Мы не будем перечислять здесь значение ослабления, потому что, в отличие от CSS-анимации, где по умолчанию <a href="/en-US/docs/Web/CSS/animation-timing-function">animation-timing-function</a> это просто, в веб-анимации API для ослабления по умолчанию используется линейная зависимость - которые мы используем здесь</p> </div> <h4 id="Собираем_части_вместе.">Собираем части вместе.</h4> @@ -129,7 +129,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API <h2 id="Управление_воспроизведением_с_помощью_play_pause_reverse_and_playbackRate">Управление воспроизведением с помощью play(), pause(), reverse() and playbackRate</h2> -<p>Хотя мы можем писать CSS анимацию с Web Animations API, где API действительно хорошо подходит в качестве воздействия для воспроизведения анимации. Web Animations API обеспечивает несколько удобных методов для контроля воспроизведения анимации. Давайте посмотрим на паузу и воспроизведение анимации в росте/уменьшении Алисы в игре (проверить полный код можно на сайте <a href="http://codepen.io/rachelnabors/pen/PNYGZQ">full code on Codepen</a>):</p> +<p>Хотя мы можем писать CSS-анимацию с Web Animations API, где API действительно хорошо подходит в качестве воздействия для воспроизведения анимации. Web Animations API обеспечивает несколько удобных методов для контроля воспроизведения анимации. Давайте посмотрим на паузу и воспроизведение анимации в росте/уменьшении Алисы в игре (проверить полный код можно на сайте <a href="http://codepen.io/rachelnabors/pen/PNYGZQ">full code on Codepen</a>):</p> <p><a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010"><img alt="Playing the growing and shrinking game with Alice." src="https://mdn.mozillademos.org/files/13845/growing-shrinking_article_optimized.gif" style="display: block; height: 374px; margin-left: auto; margin-right: auto; width: 700px;"></a></p> diff --git a/files/ru/web/api/web_workers_api/using_web_workers/index.html b/files/ru/web/api/web_workers_api/using_web_workers/index.html index fb4326715e..a524285050 100644 --- a/files/ru/web/api/web_workers_api/using_web_workers/index.html +++ b/files/ru/web/api/web_workers_api/using_web_workers/index.html @@ -138,7 +138,7 @@ importScripts('foo.js', 'bar.js'); /* imports two scripts */ <p>Разделяемый worker доступен нескольким разным скриптам — даже если они находятся в разных окнах, фреймах или даже worker-ах. В этом разделе мы обсудим JavaScript, который можно найти в нашем <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">базовом примере разделяемых worker-ов</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">запустить разделяемый worker</a>): Он очень похож на базовый пример выделенных worker-ов, за исключением двух функций, которые доступны из разных скриптовых файлов: <em>умножение двух чисел</em> или <em>возведение числа в степень.</em> Оба скрипта используют один и тот же worker для необходимых вычислений.</p> -<p>Здесь мы сосредоточимся на разнице между выделенными и разделёнными worker-ами. Обратите внимание, что в данном примере есть две HTML страницы с JavaScript кодом, которые используют один и тот же файл worker-а.</p> +<p>Здесь мы сосредоточимся на разнице между выделенными и разделёнными worker-ами. Обратите внимание, что в данном примере есть две HTML страницы с JavaScript-кодом, которые используют один и тот же файл worker-а.</p> <div class="note"> <p><strong>Примечание</strong>: Если разделяемый worker может быть доступен из нескольких контекстов просмотра, то все они должны иметь одно и то же происхождение (одни и те же протокол, хост и порт).</p> diff --git a/files/ru/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html index 8ff610ae34..c8ba6a2fc9 100644 --- a/files/ru/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html +++ b/files/ru/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL --- <p>{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}</p> -<p><a class="external" href="http://www.khronos.org/webgl/">WebGL</a> позволяет веб-контенту использовать API, основанный на <a class="external" href="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0, для визуализации трёхмерной графики без использования плагинов в HTML элементе <a class="internal" href="/en/HTML/Canvas" title="en/HTML/Canvas"><code>canvas</code></a> в браузерах, которые осуществляют его поддержку. WebGL программы состоят из кода управления, написанном на JavaScript и кода специальных эффектов (шейдерного кода), который выполняется на графическом процессоре. WebGL элементы могут быть смешаны с другими HTML элементами и собраны с другими частями веб-страницы или фоном веб-страницы.</p> +<p><a class="external" href="http://www.khronos.org/webgl/">WebGL</a> позволяет веб-контенту использовать API, основанный на <a class="external" href="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0, для визуализации трёхмерной графики без использования плагинов в HTML элементе <a class="internal" href="/en/HTML/Canvas" title="en/HTML/Canvas"><code>canvas</code></a> в браузерах, которые осуществляют его поддержку. WebGL программы состоят из кода управления, написанном на JavaScript и кода специальных эффектов (шейдерного кода), который выполняется на графическом процессоре. WebGL элементы могут быть смешаны с другими HTML-элементами и собраны с другими частями веб-страницы или фоном веб-страницы.</p> <p>Эта статья знакомит вас с основами использования WebGL. Предполагается, что вы уже знакомы с математическими основами трёхмерной графики. Данная статья не обучит вас OpenGL.</p> @@ -24,7 +24,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL <h3 id="Подготовка_контекста_WebGL">Подготовка контекста WebGL</h3> -<p>Функция <code>start()</code>, в нашем JavaScript коде вызывается после загрузки документа. Её назначение - настройка контекста WebGL и начать отрисовку содержимого.</p> +<p>Функция <code>start()</code>, в нашем JavaScript-коде вызывается после загрузки документа. Её назначение - настройка контекста WebGL и начать отрисовку содержимого.</p> <pre class="brush: js">var gl; // глобальная переменная для контекста WebGL diff --git a/files/ru/web/api/webgl_api/tutorial/index.html b/files/ru/web/api/webgl_api/tutorial/index.html index 10a59240e2..1be6cfbc06 100644 --- a/files/ru/web/api/webgl_api/tutorial/index.html +++ b/files/ru/web/api/webgl_api/tutorial/index.html @@ -8,7 +8,7 @@ translation_of: Web/API/WebGL_API/Tutorial <div>{{WebGLSidebar}}</div> <div class="summary"> -<p><a class="external" href="http://www.khronos.org/webgl/">WebGL</a> позволяет использовать API, основанную на <a class="external" href="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 для осуществления 3D рендеринга в HTML {{HTMLElement("canvas")}} в браузерах, которые его поддерживают без использования плагинов. WebGL программы состоят из программ, написанных на JavaScript, и специального кода шейдеров, который выполняется на видеокарте. WebGL элементы могут использоваться с HTML элементами и скомпонованы с другими частями страницы или фона страницы.</p> +<p><a class="external" href="http://www.khronos.org/webgl/">WebGL</a> позволяет использовать API, основанную на <a class="external" href="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 для осуществления 3D рендеринга в HTML {{HTMLElement("canvas")}} в браузерах, которые его поддерживают без использования плагинов. WebGL программы состоят из программ, написанных на JavaScript, и специального кода шейдеров, который выполняется на видеокарте. WebGL элементы могут использоваться с HTML-элементами и скомпонованы с другими частями страницы или фона страницы.</p> </div> <p><span class="seoSummary">В этом руководстве с нуля рассказывается о том, как использовать элемент<code><canvas></code> для отрисовки WebGL. Предоставленные примеры помогут вам понять, как можно использовать WebGL, также вы сможете использовать код из примеров как сниппеты для ваших разработок.</span></p> diff --git a/files/ru/web/api/webvr_api/using_the_webvr_api/index.html b/files/ru/web/api/webvr_api/using_the_webvr_api/index.html index aae1549b03..4ccf129cfb 100644 --- a/files/ru/web/api/webvr_api/using_the_webvr_api/index.html +++ b/files/ru/web/api/webvr_api/using_the_webvr_api/index.html @@ -28,7 +28,7 @@ translation_of: Web/API/WebVR_API/Using_the_WebVR_API <p>После того, как вы всё подготовили, можете проверить всё ли работает как следует. Для этого надо открыть <a href="https://mdn.github.io/webvr-tests/aframe-demo/">простой A-Frame пример</a> и убедиться, что сцена отображается и что можно перейти в VR режим по нажатию на кнопку в правом нижнем углу.</p> -<p>Фреймворк <a href="https://aframe.io/">A-Frame</a> является лучшим вариантом, если вы хотите быстро создать WebVR-совместимую сцену, не углубляясь в огромное количество JavaScript кода. Однако, пользуясь им, вы не узнаете о работе с чистым WebVR API, а именно этим мы сейчас и займёмся.</p> +<p>Фреймворк <a href="https://aframe.io/">A-Frame</a> является лучшим вариантом, если вы хотите быстро создать WebVR-совместимую сцену, не углубляясь в огромное количество JavaScript-кода. Однако, пользуясь им, вы не узнаете о работе с чистым WebVR API, а именно этим мы сейчас и займёмся.</p> <h2 id="Introducing_our_demo">Introducing our demo</h2> diff --git a/files/ru/web/api/window/getcomputedstyle/index.html b/files/ru/web/api/window/getcomputedstyle/index.html index 15c8e0b858..6c18775336 100644 --- a/files/ru/web/api/window/getcomputedstyle/index.html +++ b/files/ru/web/api/window/getcomputedstyle/index.html @@ -21,7 +21,7 @@ translation_of: Web/API/Window/getComputedStyle <h2 id="Выводы">Выводы</h2> -<p>Метод <code>Window.getComputedStyle()</code> предоставляет все значения CSS свойств элементов после применения текущей таблицы стилей или базового расчёта каких-либо значений, которые могут быть.</p> +<p>Метод <code>Window.getComputedStyle()</code> предоставляет все значения CSS-свойств элементов после применения текущей таблицы стилей или базового расчёта каких-либо значений, которые могут быть.</p> <h2 id="Пример">Пример</h2> diff --git a/files/ru/web/api/window/index.html b/files/ru/web/api/window/index.html index 6d4cedf218..0aa749bb0b 100644 --- a/files/ru/web/api/window/index.html +++ b/files/ru/web/api/window/index.html @@ -201,7 +201,7 @@ translation_of: Web/API/Window <dt>{{domxref("Window.getAttentionWithCycleCount()")}}</dt> <dd>{{todo("NeedsContents")}}</dd> <dt>{{domxref("Window.getComputedStyle()")}}</dt> - <dd>Получает подсчитанные стили для определённого элемента. Подсчитанные стили включают подсчитанные значения всех CSS свойств элемента.</dd> + <dd>Получает подсчитанные стили для определённого элемента. Подсчитанные стили включают подсчитанные значения всех CSS-свойств элемента.</dd> <dt>{{domxref("Window.getDefaulComputedStyle()")}}</dt> <dd>Получает подсчитанные стили по умолчанию для определённого элемента, игнорируя авторские стили.</dd> <dt>{{domxref("Window.getSelection()")}}</dt> diff --git a/files/ru/web/api/xmlhttprequest/index.html b/files/ru/web/api/xmlhttprequest/index.html index dc94d8668c..39182d12e4 100644 --- a/files/ru/web/api/xmlhttprequest/index.html +++ b/files/ru/web/api/xmlhttprequest/index.html @@ -385,7 +385,7 @@ translation_of: Web/API/XMLHttpRequest <h3 id="open()" name="open()">open()</h3> -<p>Инициализирует запрос. Этот метод может (и должен) быть вызван из JavaScript кода; если необходимо вызвать запрос из нативного кода, то нужно использовать метод <a class="internal" href="/en/nsIXMLHttpRequest#openRequest()" title="/en/XMLHttpRequest#openRequest()"><code>openRequest()</code></a>.</p> +<p>Инициализирует запрос. Этот метод может (и должен) быть вызван из JavaScript-кода; если необходимо вызвать запрос из нативного кода, то нужно использовать метод <a class="internal" href="/en/nsIXMLHttpRequest#openRequest()" title="/en/XMLHttpRequest#openRequest()"><code>openRequest()</code></a>.</p> <div class="note"><strong>Примечание:</strong> Вызов этого метода из активного запроса (если метод <code>open() или</code> <code>openRequest() уже были вызваны</code>) эквивалентно вызову метода <code>abort()</code>.</div> diff --git a/files/ru/web/css/@font-feature-values/index.html b/files/ru/web/css/@font-feature-values/index.html index 29da2c6394..2a9777a306 100644 --- a/files/ru/web/css/@font-feature-values/index.html +++ b/files/ru/web/css/@font-feature-values/index.html @@ -29,7 +29,7 @@ translation_of: Web/CSS/@font-feature-values } </pre> -<p>Правило <code>@font-feature-values</code> может использоваться как на вернём уровне вашего CSS так и внутри любого <a href="/en-US/docs/Web/CSS/At-rule#Conditional_Group_Rules" title="CSS/At-rule#Conditional_Group_Rules">условного CSS правила</a>.</p> +<p>Правило <code>@font-feature-values</code> может использоваться как на вернём уровне вашего CSS так и внутри любого <a href="/en-US/docs/Web/CSS/At-rule#Conditional_Group_Rules" title="CSS/At-rule#Conditional_Group_Rules">условного CSS-правила</a>.</p> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/css/@namespace/index.html b/files/ru/web/css/@namespace/index.html index 390ec3bb14..fa83237dfb 100644 --- a/files/ru/web/css/@namespace/index.html +++ b/files/ru/web/css/@namespace/index.html @@ -29,7 +29,7 @@ svg|a {} <p><code>@namespace</code> правила можно использовать для определения префиксов имён. Когда селектор имеет префикс, он будет выбирать элементы совпадающие по пространству имён и именам или атрибутам.</p> -<p>В <a href="/ru/docs/HTML/HTML5">HTML5</a> существуют <a href="https://html.spec.whatwg.org/#foreign-elements">сторонние элементы</a> которые автоматически ассоциируются с соответствующими пространствами имён. Это значит, что HTML элементы будут действовать так, как если бы они находились в пространстве имён (<code>http://www.w3.org/1999/xhtml</code>), также если они не имеют <code>xmlns</code> атрибута где-либо в документе, то такие элементы как <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/SVG"><svg></a> и <a href="/ru/docs/Web/MathML/Element/math"><math></a> будут ассоциироваться с их стандартными пространствами имён (<code>http://www.w3.org/2000/svg</code> and <code>http://www.w3.org/1998/Math/MathML</code>).</p> +<p>В <a href="/ru/docs/HTML/HTML5">HTML5</a> существуют <a href="https://html.spec.whatwg.org/#foreign-elements">сторонние элементы</a> которые автоматически ассоциируются с соответствующими пространствами имён. Это значит, что HTML-элементы будут действовать так, как если бы они находились в пространстве имён (<code>http://www.w3.org/1999/xhtml</code>), также если они не имеют <code>xmlns</code> атрибута где-либо в документе, то такие элементы как <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/SVG"><svg></a> и <a href="/ru/docs/Web/MathML/Element/math"><math></a> будут ассоциироваться с их стандартными пространствами имён (<code>http://www.w3.org/2000/svg</code> and <code>http://www.w3.org/1998/Math/MathML</code>).</p> <div class="blockIndicator note"> <p>Примечание: В XML, если префикс отличается от атрибута (Например, <code>xlink:href</code>), то атрибут не будет иметь пространства имён. Другими словами, атрибуты не могут наследовать пространство имён элемента в котором они находятся.</p> diff --git a/files/ru/web/css/@page/index.html b/files/ru/web/css/@page/index.html index 04daa7d53e..911d966128 100644 --- a/files/ru/web/css/@page/index.html +++ b/files/ru/web/css/@page/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/@page --- <div>{{CSSRef}}</div> -<p>Правило CSS <strong><code>@page</code></strong> используется для модификации некоторых свойств CSS при печати документа.<strong> </strong>Вы не можете изменить все CSS свойства с <code>@page</code>. Вы можете изменить только margin, orphans, widows, и разрывы страницы документа. Попытки изменить любые другие свойства CSS будут игнорироваться.</p> +<p>Правило CSS <strong><code>@page</code></strong> используется для модификации некоторых свойств CSS при печати документа.<strong> </strong>Вы не можете изменить все CSS-свойства с <code>@page</code>. Вы можете изменить только margin, orphans, widows, и разрывы страницы документа. Попытки изменить любые другие свойства CSS будут игнорироваться.</p> <pre class="brush: css no-line-numbers">@page { margin: 1cm; diff --git a/files/ru/web/css/_colon_any-link/index.html b/files/ru/web/css/_colon_any-link/index.html index 97f4785909..fe8818340c 100644 --- a/files/ru/web/css/_colon_any-link/index.html +++ b/files/ru/web/css/_colon_any-link/index.html @@ -79,7 +79,7 @@ a:-webkit-any-link { <ul> <li><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li> - <li>Соответствует HTML элементам: <code><a href="/en-US/docs/Web/HTML/Element/a"><a></a></code>, <code><a href="/en-US/docs/Web/HTML/Element/area"><area></a></code> и <code><a href="/en-US/docs/Web/HTML/Element/link"><link></a></code> с атрибутом {{htmlattrxref("href", "a")}}</li> + <li>Соответствует HTML-элементам: <code><a href="/en-US/docs/Web/HTML/Element/a"><a></a></code>, <code><a href="/en-US/docs/Web/HTML/Element/area"><area></a></code> и <code><a href="/en-US/docs/Web/HTML/Element/link"><link></a></code> с атрибутом {{htmlattrxref("href", "a")}}</li> <li>Похожие CSS селекторы: <ul> <li><code><a href="/en-US/docs/Web/CSS/:visited">:visited</a></code></li> diff --git a/files/ru/web/css/_colon_checked/index.html b/files/ru/web/css/_colon_checked/index.html index 8bd759a9fa..4e51bc1f3f 100644 --- a/files/ru/web/css/_colon_checked/index.html +++ b/files/ru/web/css/_colon_checked/index.html @@ -64,7 +64,7 @@ option:checked { <h3 id="Использование_скрытых_чекбоксов_чтобы_хранить_некоторые_булевские_значения_в_CSS">Использование скрытых чекбоксов, чтобы хранить некоторые булевские значения в CSS</h3> -<p>Псевдокласс <code>:checked</code> применяется к скрытым чекбоксам в начале вашей страницы, которые могут использоваться, чтобы хранить некоторые динамические значения, используемые в CSS правилах. Следующий пример показывает, как скрывать/показывать некоторые расширяемые элементы, нажимая на кнопку (<a class="internal" href="/@api/deki/files/6246/=expandable-elements.html" title="Expandable elements through the :checked pseudoclass">открыть это демо</a>).</p> +<p>Псевдокласс <code>:checked</code> применяется к скрытым чекбоксам в начале вашей страницы, которые могут использоваться, чтобы хранить некоторые динамические значения, используемые в CSS-правилах. Следующий пример показывает, как скрывать/показывать некоторые расширяемые элементы, нажимая на кнопку (<a class="internal" href="/@api/deki/files/6246/=expandable-elements.html" title="Expandable elements through the :checked pseudoclass">открыть это демо</a>).</p> <pre class="brush: html"><!doctype html> <html> diff --git a/files/ru/web/css/_colon_first/index.html b/files/ru/web/css/_colon_first/index.html index fba196ebfb..c074b438d4 100644 --- a/files/ru/web/css/_colon_first/index.html +++ b/files/ru/web/css/_colon_first/index.html @@ -19,7 +19,7 @@ translation_of: 'Web/CSS/:first' }</pre> <div class="note"> -<p><strong>Обратите внимание:</strong> Вы можете изменять не все CSS свойства в этом псевдоклассе. Вы можете изменять только внешние отступы, {{cssxref("orphans")}}, {{cssxref("widows")}}, и разбитие документа на страницы. Более того, вы можете использовать только <a href="/en-US/docs/Web/CSS/размер#Абсолютные_единицы_измерения_размера">абсолютные единицы измерения</a>, определяя внешние отступы. Все остальные правила будут проигнорированы.</p> +<p><strong>Обратите внимание:</strong> Вы можете изменять не все CSS-свойства в этом псевдоклассе. Вы можете изменять только внешние отступы, {{cssxref("orphans")}}, {{cssxref("widows")}}, и разбитие документа на страницы. Более того, вы можете использовать только <a href="/en-US/docs/Web/CSS/размер#Абсолютные_единицы_измерения_размера">абсолютные единицы измерения</a>, определяя внешние отступы. Все остальные правила будут проигнорированы.</p> </div> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/css/_colon_host()/index.html b/files/ru/web/css/_colon_host()/index.html index 9637e4a49f..117abc8e8f 100644 --- a/files/ru/web/css/_colon_host()/index.html +++ b/files/ru/web/css/_colon_host()/index.html @@ -36,7 +36,7 @@ translation_of: 'Web/CSS/:host()' <pre class="brush: html; notranslate"><h1>Host selectors <a href="#"><context-span>example</context-span></a></h1></pre> -<p>Внутри конструктора элемента мы создаём элементы <code>style</code> и <code>span</code>, заполняем <code>span</code> контентом пользовательского элемента и заполняем элемент <code>style</code> CSS правилами:</p> +<p>Внутри конструктора элемента мы создаём элементы <code>style</code> и <code>span</code>, заполняем <code>span</code> контентом пользовательского элемента и заполняем элемент <code>style</code> CSS-правилами:</p> <pre class="brush: js; notranslate">let style = document.createElement('style'); let span = document.createElement('span'); diff --git a/files/ru/web/css/_colon_placeholder-shown/index.html b/files/ru/web/css/_colon_placeholder-shown/index.html index 2c28dc2bb2..881ad16822 100644 --- a/files/ru/web/css/_colon_placeholder-shown/index.html +++ b/files/ru/web/css/_colon_placeholder-shown/index.html @@ -189,6 +189,6 @@ input.studentid:placeholder-shown { <ul> <li>Псевдоэлемент {{cssxref("::placeholder")}}, применяющий стили к <em>самому себе</em>.</li> - <li>Связанные HTML элементы: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li> + <li>Связанные HTML-элементы: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li> <li><a href="/ru/docs/Learn/HTML/Forms">HTML формы</a></li> </ul> diff --git a/files/ru/web/css/_colon_right/index.html b/files/ru/web/css/_colon_right/index.html index 6f098bafa8..44494719fa 100644 --- a/files/ru/web/css/_colon_right/index.html +++ b/files/ru/web/css/_colon_right/index.html @@ -14,7 +14,7 @@ translation_of: 'Web/CSS/:right' <p>Whether the page is left or right is decided by the major writing direction of the document. For example, if the first page has a major writing direction of left-to-right then it will be a <code>:right</code> page and if it has a major writing direction of right-to-left then it will be a <code>{{ Cssxref(":left") }}</code> page.</p> -<div class="note"><strong>Note:</strong> Вы можете не менять все CSS свойства, а поменять только margin, padding, border, и background для страницы. Все остальные CSS свойства будут проигнорированы и изменения будут применены только для страницы, но не для её содержимого.</div> +<div class="note"><strong>Note:</strong> Вы можете не менять все CSS-свойства, а поменять только margin, padding, border, и background для страницы. Все остальные CSS-свойства будут проигнорированы и изменения будут применены только для страницы, но не для её содержимого.</div> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/css/_doublecolon_backdrop/index.html b/files/ru/web/css/_doublecolon_backdrop/index.html index 0d79fce37b..d3e38a773d 100644 --- a/files/ru/web/css/_doublecolon_backdrop/index.html +++ b/files/ru/web/css/_doublecolon_backdrop/index.html @@ -77,6 +77,6 @@ dialog::backdrop { <ul> <li>{{cssxref(":fullscreen")}} псевдокласс</li> - <li>{{HTMLElement("dialog")}} HTML элемент</li> + <li>{{HTMLElement("dialog")}} HTML-элемент</li> <li><a href="/ru/docs/DOM/Using_fullscreen_mode">Fullscreen API</a></li> </ul> diff --git a/files/ru/web/css/_doublecolon_cue/index.html b/files/ru/web/css/_doublecolon_cue/index.html index 9f4e8ba401..97b401e812 100644 --- a/files/ru/web/css/_doublecolon_cue/index.html +++ b/files/ru/web/css/_doublecolon_cue/index.html @@ -14,7 +14,7 @@ translation_of: 'Web/CSS/::cue' <h2 id="Разрешённые_свойства">Разрешённые свойства</h2> -<p>Правила с <code>::cue</code> в селекторе ограничены в использовании CSS свойств следующим списком:</p> +<p>Правила с <code>::cue</code> в селекторе ограничены в использовании CSS-свойств следующим списком:</p> <ul> <li>{{CSSxRef("background")}} и его свойства</li> diff --git a/files/ru/web/css/_doublecolon_marker/index.html b/files/ru/web/css/_doublecolon_marker/index.html index 1841be3659..37caf3ec01 100644 --- a/files/ru/web/css/_doublecolon_marker/index.html +++ b/files/ru/web/css/_doublecolon_marker/index.html @@ -89,5 +89,5 @@ translation_of: 'Web/CSS/::marker' <h2 id="See_also">See also</h2> <ul> - <li>HTML элементы, у которые есть маркеры списка по умолчанию: {{HTMLElement("ol")}}, {{HTMLElement("li")}}, {{HTMLElement("summary")}}</li> + <li>HTML-элементы, у которые есть маркеры списка по умолчанию: {{HTMLElement("ol")}}, {{HTMLElement("li")}}, {{HTMLElement("summary")}}</li> </ul> diff --git a/files/ru/web/css/_doublecolon_placeholder/index.html b/files/ru/web/css/_doublecolon_placeholder/index.html index 8eb701150c..71de4d917a 100644 --- a/files/ru/web/css/_doublecolon_placeholder/index.html +++ b/files/ru/web/css/_doublecolon_placeholder/index.html @@ -16,7 +16,7 @@ translation_of: 'Web/CSS/::placeholder' font-size: 1.5em; }</pre> -<p>В <code>::placeholder</code> можно использовать только те CSS свойства, которые разрешены в псевдоэлементе {{cssxref("::first-line")}}.</p> +<p>В <code>::placeholder</code> можно использовать только те CSS-свойства, которые разрешены в псевдоэлементе {{cssxref("::first-line")}}.</p> <div class="note"> <p><strong>Note:</strong> В большинстве браузеров по умолчанию placeholder выглядит как полупрозрачный или светло-серый текст.</p> @@ -146,6 +146,6 @@ translation_of: 'Web/CSS/::placeholder' <ul> <li>Псевдокласс {{cssxref(":placeholder-shown")}}, который позволяет применять стили к элементу с <em><strong>активным </strong></em>placeholder.</li> - <li>Связанные HTML элементы: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li> + <li>Связанные HTML-элементы: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li> <li><a href="/ru/docs/Learn/HTML/Forms">HTML-формы</a></li> </ul> diff --git a/files/ru/web/css/actual_value/index.html b/files/ru/web/css/actual_value/index.html index d5fb579491..ddea4fc2b5 100644 --- a/files/ru/web/css/actual_value/index.html +++ b/files/ru/web/css/actual_value/index.html @@ -12,7 +12,7 @@ original_slug: Web/CSS/Действительное_значение <h2 id="Описание">Описание</h2> -<p><strong>Действительное значение</strong> CSS свойства - используемое после всех приближений значение. Например, браузер может отображать рамки только с целым значением пикселей и будет принудительно округлять ширину.</p> +<p><strong>Действительное значение</strong> CSS-свойства - используемое после всех приближений значение. Например, браузер может отображать рамки только с целым значением пикселей и будет принудительно округлять ширину.</p> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/css/animation-delay/index.html b/files/ru/web/css/animation-delay/index.html index 2ce027e4a4..70bd6bad72 100644 --- a/files/ru/web/css/animation-delay/index.html +++ b/files/ru/web/css/animation-delay/index.html @@ -3,8 +3,8 @@ title: animation-delay slug: Web/CSS/animation-delay tags: - CSS - - CSS анимации - - CSS свойства + - CSS-анимации + - CSS-свойства translation_of: Web/CSS/animation-delay --- <div>{{CSSRef}}{{SeeCompatTable}}</div> @@ -40,7 +40,7 @@ animation-delay: 2s, 4ms; <h2 id="Примеры">Примеры</h2> -<p>Посмотрите <a href="/en-US/docs/CSS/CSS_animations" title="CSS/CSS_animations">CSS анимации</a> для примера.</p> +<p>Посмотрите <a href="/en-US/docs/CSS/CSS_animations" title="CSS/CSS_animations">CSS-анимации</a> для примера.</p> <h2 id="Спецификации">Спецификации</h2> @@ -68,6 +68,6 @@ animation-delay: 2s, 4ms; <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="Tutorial about CSS animations">Использование CSS анимаций</a></li> + <li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="Tutorial about CSS animations">Использование CSS-анимаций</a></li> <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li> </ul> diff --git a/files/ru/web/css/animation-direction/index.html b/files/ru/web/css/animation-direction/index.html index d09af8c353..3ca800d670 100644 --- a/files/ru/web/css/animation-direction/index.html +++ b/files/ru/web/css/animation-direction/index.html @@ -79,6 +79,6 @@ animation-direction: unset; <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Использование CSS анимации</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Использование CSS-анимации</a></li> <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li> </ul> diff --git a/files/ru/web/css/animation-duration/index.html b/files/ru/web/css/animation-duration/index.html index ea9fc00874..d335a5b16a 100644 --- a/files/ru/web/css/animation-duration/index.html +++ b/files/ru/web/css/animation-duration/index.html @@ -44,7 +44,7 @@ animation-duration: 10s, 30s, 230ms; <h2 id="Примеры_2">Примеры</h2> -<p>Смотрите для примеров <a href="/en/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS анимации</a>.</p> +<p>Смотрите для примеров <a href="/en/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS-анимации</a>.</p> <h2 id="Specifications" name="Specifications">Спецификации</h2> @@ -72,6 +72,6 @@ animation-duration: 10s, 30s, 230ms; <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Использование CSS анимации</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Использование CSS-анимации</a></li> <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li> </ul> diff --git a/files/ru/web/css/animation-fill-mode/index.html b/files/ru/web/css/animation-fill-mode/index.html index db2ab9c5d9..051736e859 100644 --- a/files/ru/web/css/animation-fill-mode/index.html +++ b/files/ru/web/css/animation-fill-mode/index.html @@ -3,8 +3,8 @@ title: animation-fill-mode slug: Web/CSS/animation-fill-mode tags: - CSS - - CSS анимации - - CSS свойства + - CSS-анимации + - CSS-свойства translation_of: Web/CSS/animation-fill-mode --- <div>{{CSSRef}}{{SeeCompatTable}}</div> @@ -176,6 +176,6 @@ animation-fill-mode: both, forwards, none; <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Использование CSS анимации</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Использование CSS-анимации</a></li> <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li> </ul> diff --git a/files/ru/web/css/animation-iteration-count/index.html b/files/ru/web/css/animation-iteration-count/index.html index 713c56a8f1..27fad33da4 100644 --- a/files/ru/web/css/animation-iteration-count/index.html +++ b/files/ru/web/css/animation-iteration-count/index.html @@ -45,7 +45,7 @@ animation-iteration-count: 2, 0, infinite; <h2 id="Примеры">Примеры</h2> -<p>Смотрите примеры <a href="/ru/docs/Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy">CSS анимации</a>.</p> +<p>Смотрите примеры <a href="/ru/docs/Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy">CSS-анимации</a>.</p> <h2 id="Specifications" name="Specifications">Спецификации</h2> @@ -73,6 +73,6 @@ animation-iteration-count: 2, 0, infinite; <h2 id="Также_смотрите">Также смотрите</h2> <ul> - <li><a href="/ru/docs/Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy" title="Обучение CSS анимациям">Использование CSS анимацией</a></li> + <li><a href="/ru/docs/Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy" title="Обучение CSS-анимациям">Использование CSS-анимацией</a></li> <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li> </ul> diff --git a/files/ru/web/css/animation-name/index.html b/files/ru/web/css/animation-name/index.html index f2c2866b47..88624b853d 100644 --- a/files/ru/web/css/animation-name/index.html +++ b/files/ru/web/css/animation-name/index.html @@ -77,6 +77,6 @@ animation-name: <a href="/en-US/docs/Web/CSS/unset">unset</a> <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Использование CSS анимации</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Использование CSS-анимации</a></li> <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li> </ul> diff --git a/files/ru/web/css/animation-play-state/index.html b/files/ru/web/css/animation-play-state/index.html index d8e6888001..62e1e62403 100644 --- a/files/ru/web/css/animation-play-state/index.html +++ b/files/ru/web/css/animation-play-state/index.html @@ -72,6 +72,6 @@ animation-play-state: unset; <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Использование CSS анимаций</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Использование CSS-анимаций</a></li> <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li> </ul> diff --git a/files/ru/web/css/animation-timing-function/index.html b/files/ru/web/css/animation-timing-function/index.html index 5e0e2e857d..0a0ad11c23 100644 --- a/files/ru/web/css/animation-timing-function/index.html +++ b/files/ru/web/css/animation-timing-function/index.html @@ -87,6 +87,6 @@ translation_of: Web/CSS/animation-timing-function <p><span style='font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 2.33333rem; letter-spacing: -0.00278rem;'>Смотрите также</span></p> <ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS developer guide about CSS animations">Использование CSS анимаций</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS developer guide about CSS animations">Использование CSS-анимаций</a></li> <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li> </ul> diff --git a/files/ru/web/css/animation/index.html b/files/ru/web/css/animation/index.html index 2f613d625f..5301fbf619 100644 --- a/files/ru/web/css/animation/index.html +++ b/files/ru/web/css/animation/index.html @@ -36,7 +36,7 @@ translation_of: Web/CSS/animation <h2 id="Примеры">Примеры</h2> -<p>Посмотрите примеры <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS анимаций.</a></p> +<p>Посмотрите примеры <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS-анимаций.</a></p> <h3 id="Cylon_Eye">Cylon Eye</h3> @@ -113,6 +113,6 @@ translation_of: Web/CSS/animation <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Использование CSS анимации</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Использование CSS-анимации</a></li> <li>JavaScript {{domxref("AnimationEvent")}} API</li> </ul> diff --git a/files/ru/web/css/appearance/index.html b/files/ru/web/css/appearance/index.html index b84ac013b4..15e43760ea 100644 --- a/files/ru/web/css/appearance/index.html +++ b/files/ru/web/css/appearance/index.html @@ -8,7 +8,7 @@ translation_of: Web/CSS/appearance --- <div>{{CSSRef}}{{SeeCompatTable}}</div> -<p>CSS свойство <strong><code>-moz-appearance</code></strong> используется в Gecko (Firefox) для отображения элемента, используя базовые стили платформы на основе темы операционной системы.</p> +<p>CSS-свойство <strong><code>-moz-appearance</code></strong> используется в Gecko (Firefox) для отображения элемента, используя базовые стили платформы на основе темы операционной системы.</p> <p>Свойство <strong><code>-webkit-appearance</code></strong> используется в браузерах WebKit-based (например, Safari) и Blink-based (например, Chrome, Opera) для того же эффекта. Заметьте, что Firefox и Edge также поддерживают <code>-webkit-appearance</code>, для обеспечения совместимости.</p> diff --git a/files/ru/web/css/background-color/index.html b/files/ru/web/css/background-color/index.html index 8b7ddd854c..7c2ac24002 100644 --- a/files/ru/web/css/background-color/index.html +++ b/files/ru/web/css/background-color/index.html @@ -3,7 +3,7 @@ title: background-color slug: Web/CSS/background-color tags: - CSS - - CSS свойства + - CSS-свойства - CSS фоны - Графика - Определение diff --git a/files/ru/web/css/background-image/index.html b/files/ru/web/css/background-image/index.html index 3ec3eaa46c..da3f708698 100644 --- a/files/ru/web/css/background-image/index.html +++ b/files/ru/web/css/background-image/index.html @@ -14,7 +14,7 @@ translation_of: Web/CSS/background-image <p>Свойство <a href="/ru/docs/CSS" title="/ru/docs/CSS">CSS</a> <strong><code>background-image</code></strong> устанавливает одно или несколько фоновых изображений для элемента. Изображения рисуются в слоях контекстов наложения одно поверх другого. Первый слой выводится так, чтобы он был ближе всего к пользователю.</p> -<p><a href="/ru/CSS/border" title="border">Границы</a> {{cssxref("border")}} элемента затем рисуются поверх них, и {{cssxref("background-color")}} рисуется под ними. То, как изображения отрисовываются относительно рамки и её границ, определяется CSS свойствами {{cssxref("background-clip")}} и {{cssxref("background-origin")}}.</p> +<p><a href="/ru/CSS/border" title="border">Границы</a> {{cssxref("border")}} элемента затем рисуются поверх них, и {{cssxref("background-color")}} рисуется под ними. То, как изображения отрисовываются относительно рамки и её границ, определяется CSS-свойствами {{cssxref("background-clip")}} и {{cssxref("background-origin")}}.</p> <p>Если указанное изображение не может быть нарисовано (например, когда файл, определённый указанным URI, не может быть загружен), браузеры обрабатывают его так, как если бы оно было значением <code>none</code>.</p> diff --git a/files/ru/web/css/background-repeat/index.html b/files/ru/web/css/background-repeat/index.html index ad4d0bffd0..38bff7a1d2 100644 --- a/files/ru/web/css/background-repeat/index.html +++ b/files/ru/web/css/background-repeat/index.html @@ -87,7 +87,7 @@ background-repeat: unset;</code></pre> </tr> <tr> <td><code>space</code></td> - <td>Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Оставшееся незакрытое пространство равномерно распределено между изображениями. Первое и последнее изображения касаются края элемента. Значение CSS свойства {{cssxref("background-position")}} игнорируется для рассматриваемого направления, за исключением случаев, когда отдельное изображение больше области рисования фонового изображения, что является единственным случаем, когда изображение может быть обрезано, когда используется значение <code>space</code>.</td> + <td>Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Оставшееся незакрытое пространство равномерно распределено между изображениями. Первое и последнее изображения касаются края элемента. Значение CSS-свойства {{cssxref("background-position")}} игнорируется для рассматриваемого направления, за исключением случаев, когда отдельное изображение больше области рисования фонового изображения, что является единственным случаем, когда изображение может быть обрезано, когда используется значение <code>space</code>.</td> </tr> <tr> <td><code>round</code></td> @@ -95,7 +95,7 @@ background-repeat: unset;</code></pre> </tr> <tr> <td><code>no-repeat</code></td> - <td>Изображение не повторяется (и, следовательно, область рисования фонового изображения не обязательно будет полностью покрыта). Расположение неповторяющегося фонового изображения определяется CSS свойством {{cssxref("background-position")}}.</td> + <td>Изображение не повторяется (и, следовательно, область рисования фонового изображения не обязательно будет полностью покрыта). Расположение неповторяющегося фонового изображения определяется CSS-свойством {{cssxref("background-position")}}.</td> </tr> </tbody> </table> diff --git a/files/ru/web/css/background-size/index.html b/files/ru/web/css/background-size/index.html index e0409db9b7..4b6324b938 100644 --- a/files/ru/web/css/background-size/index.html +++ b/files/ru/web/css/background-size/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/background-size <p>Значение <strong><code>background-size</code></strong> в <a href="/en-US/docs/CSS" title="CSS">CSS</a> позволяет задавать размер фонового изображения. Изображение может быть оставлено в исходном размере, растянуто, или подогнано под размеры доступного пространства.</p> -<div class="note"><strong>Предупреждение:</strong> Если значение этого свойства не задано в сокращённом свойстве {{cssxref("background")}}, которое применяется к элементу после CSS свойства <code>background-size</code>, то значение этого свойства затем сбрасывается до исходного значения c помощью сокращённого свойства.</div> +<div class="note"><strong>Предупреждение:</strong> Если значение этого свойства не задано в сокращённом свойстве {{cssxref("background")}}, которое применяется к элементу после CSS-свойства <code>background-size</code>, то значение этого свойства затем сбрасывается до исходного значения c помощью сокращённого свойства.</div> <p>{{cssinfo}}</p> diff --git a/files/ru/web/css/border-image-slice/index.html b/files/ru/web/css/border-image-slice/index.html index a645932308..72ea0222b5 100644 --- a/files/ru/web/css/border-image-slice/index.html +++ b/files/ru/web/css/border-image-slice/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/border-image-slice <h2 id="Описание">Описание</h2> -<p>CSS свойство <strong><code>border-image-slice</code></strong> делит изображение указанное в {{cssxref("border-image-source")}} на девять областей: четыре угла, четыре края и середину. Это происходит путём указания 4 внутренних смещений.</p> +<p>CSS-свойство <strong><code>border-image-slice</code></strong> делит изображение указанное в {{cssxref("border-image-source")}} на девять областей: четыре угла, четыре края и середину. Это происходит путём указания 4 внутренних смещений.</p> <p><a href="/files/3814/border-image-slice.png" style="float: left;"><img alt="The nine slices defined by the CSS border-image shorthand or border-image-slice longhand properties" src="/files/3814/border-image-slice.png" style="height: 132px; margin: 1px; padding: 1em; width: 250px;"></a>Четыре значения управляют положением линий среза. If some are not specified, they are inferred from the other with the usual 4-value syntax of CSS.</p> diff --git a/files/ru/web/css/border-radius/index.html b/files/ru/web/css/border-radius/index.html index d08dd0e681..f0130766f2 100644 --- a/files/ru/web/css/border-radius/index.html +++ b/files/ru/web/css/border-radius/index.html @@ -3,7 +3,7 @@ title: border-radius slug: Web/CSS/border-radius tags: - CSS - - CSS свойство + - CSS-свойство - Скругление - Углы translation_of: Web/CSS/border-radius diff --git a/files/ru/web/css/border-width/index.html b/files/ru/web/css/border-width/index.html index e2bfa325af..b61951732d 100644 --- a/files/ru/web/css/border-width/index.html +++ b/files/ru/web/css/border-width/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/border-width <h2 id="Summary">Summary</h2> -<p>CSS свойство {{cssxref("border-width")}}<span style="line-height: 1.5;"> определяет ширину рамки элемента. Но обычно её задают не отдельно, а в составе свойства {{cssxref("border")}}.</span></p> +<p>CSS-свойство {{cssxref("border-width")}}<span style="line-height: 1.5;"> определяет ширину рамки элемента. Но обычно её задают не отдельно, а в составе свойства {{cssxref("border")}}.</span></p> <p>{{cssinfo}}</p> diff --git a/files/ru/web/css/border/index.html b/files/ru/web/css/border/index.html index 93ce8b8020..d939fb8503 100644 --- a/files/ru/web/css/border/index.html +++ b/files/ru/web/css/border/index.html @@ -3,7 +3,7 @@ title: border slug: Web/CSS/border tags: - CSS Границы - - CSS свойства + - CSS-свойства - Разметка - Совместимость Мобильных Браузеров - Справка diff --git a/files/ru/web/css/bottom/index.html b/files/ru/web/css/bottom/index.html index baec36aaa1..1f2f0fec06 100644 --- a/files/ru/web/css/bottom/index.html +++ b/files/ru/web/css/bottom/index.html @@ -4,7 +4,7 @@ slug: Web/CSS/bottom tags: - CSS - CSS Позиционирование - - CSS свойство + - CSS-свойство - Справка translation_of: Web/CSS/bottom --- diff --git a/files/ru/web/css/box-shadow/index.html b/files/ru/web/css/box-shadow/index.html index 3366118622..ec7fb316b1 100644 --- a/files/ru/web/css/box-shadow/index.html +++ b/files/ru/web/css/box-shadow/index.html @@ -3,7 +3,7 @@ title: box-shadow slug: Web/CSS/box-shadow tags: - CSS - - CSS свойства + - CSS-свойства - CSS стили - HTML цвета - Стили diff --git a/files/ru/web/css/calc()/index.html b/files/ru/web/css/calc()/index.html index dfcc9a492d..f87a4979a0 100644 --- a/files/ru/web/css/calc()/index.html +++ b/files/ru/web/css/calc()/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/calc() <h2 id="Синтаксис">Синтаксис</h2> -<p>Функция <code>calc()</code> принимает в качестве параметра математическое выражение, результат вычисления которого можно использовать как значение CSS свойства. Выражение может включать операторы +, -, *, / <span id="result_box" lang="ru"><span class="hps">с использованием стандартных</span> <span class="hps">правил</span> <span class="hps">приоритета операторов</span></span>:</p> +<p>Функция <code>calc()</code> принимает в качестве параметра математическое выражение, результат вычисления которого можно использовать как значение CSS-свойства. Выражение может включать операторы +, -, *, / <span id="result_box" lang="ru"><span class="hps">с использованием стандартных</span> <span class="hps">правил</span> <span class="hps">приоритета операторов</span></span>:</p> <dl> <dt><strong>+</strong></dt> diff --git a/files/ru/web/css/cascade/index.html b/files/ru/web/css/cascade/index.html index f1c17ceff6..51fc535d5e 100644 --- a/files/ru/web/css/cascade/index.html +++ b/files/ru/web/css/cascade/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/Cascade -<p>Каскадность это алгоритм, который определяет как совмещать и сочетать значения свойств происходящих из различных источников(CSS правила могут располагаться как в самом веб-документе, так и во внешних файлах). Данный алгоритм лежит в основе CSS, как можно понять из его названия: <em>Cascading</em> Style Sheets(<em>Каскадные </em>Таблицы Стилей). Данная статья объясняет что такое каскадность, порядок в котором определяется какие свойства будут в конечном итоге выполнены и как это затрагивает вас, веб разработчика.</p> +<p>Каскадность это алгоритм, который определяет как совмещать и сочетать значения свойств происходящих из различных источников(CSS-правила могут располагаться как в самом веб-документе, так и во внешних файлах). Данный алгоритм лежит в основе CSS, как можно понять из его названия: <em>Cascading</em> Style Sheets(<em>Каскадные </em>Таблицы Стилей). Данная статья объясняет что такое каскадность, порядок в котором определяется какие свойства будут в конечном итоге выполнены и как это затрагивает вас, веб разработчика.</p> <h2 id="What_CSS_entities_participate_in_the_cascade">What CSS entities participate in the cascade</h2> diff --git a/files/ru/web/css/computed_value/index.html b/files/ru/web/css/computed_value/index.html index 964fb73790..1139807651 100644 --- a/files/ru/web/css/computed_value/index.html +++ b/files/ru/web/css/computed_value/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/computed_value --- <div>{{cssref}}</div> -<p><strong>Вычисленное значение</strong> CSS свойства вычисляется из указанного значения посредством:</p> +<p><strong>Вычисленное значение</strong> CSS-свойства вычисляется из указанного значения посредством:</p> <ul> <li>Обработки специальных значений {{cssxref("inherit")}} и {{cssxref("initial")}}, а также</li> diff --git a/files/ru/web/css/css_animations/using_css_animations/index.html b/files/ru/web/css/css_animations/using_css_animations/index.html index d385be5f08..557d5bb65f 100644 --- a/files/ru/web/css/css_animations/using_css_animations/index.html +++ b/files/ru/web/css/css_animations/using_css_animations/index.html @@ -13,7 +13,7 @@ original_slug: Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy --- <p>{{SeeCompatTable}}{{CSSRef}}</p> -<p><span class="seoSummary">CSS анимации позволяют анимировать переходы от одной конфигурации CSS стилей к другой.</span> CSS-анимации состоят из двух компонентов: стилевое описание анимации и набор ключевых кадров, определяющих начальное, конечное и, возможно, промежуточное состояние анимируемых стилей.</p> +<p><span class="seoSummary">CSS-анимации позволяют анимировать переходы от одной конфигурации CSS стилей к другой.</span> CSS-анимации состоят из двух компонентов: стилевое описание анимации и набор ключевых кадров, определяющих начальное, конечное и, возможно, промежуточное состояние анимируемых стилей.</p> <p>Есть три преимущества CSS-анимации перед традиционными способами:</p> @@ -233,7 +233,7 @@ her in a languid, sleepy voice.</p> <h3 id="Установка_нескольких_значений_свойствам_анимации">Установка нескольких значений свойствам анимации </h3> -<p>CSS свойство анимации может иметь несколько значений, разделённых запятыми. Это используется, чтобы указать несколько значений анимации в одном правиле и установить разную продолжительность, число повторений и т.д., для различных анимаций. Рассмотрим несколько примеров, чтобы увидеть разницу.</p> +<p>CSS-свойство анимации может иметь несколько значений, разделённых запятыми. Это используется, чтобы указать несколько значений анимации в одном правиле и установить разную продолжительность, число повторений и т.д., для различных анимаций. Рассмотрим несколько примеров, чтобы увидеть разницу.</p> <p>В первом примере у свойства имени анимации установлены три значения, у свойств продолжительности и количества повторений — по одному. В этом случае у всех трёх анимаций одинаковая продолжительность и число повторений:</p> @@ -384,6 +384,6 @@ e.className = "slidein"; <ul> <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li> - <li><a href="/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support" title="en/CSS/CSS animations/Detecting CSS animation support">Определение поддержки CSS анимации</a></li> + <li><a href="/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support" title="en/CSS/CSS animations/Detecting CSS animation support">Определение поддержки CSS-анимации</a></li> <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Использование CSS-переходов</a></li> </ul> diff --git a/files/ru/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/ru/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html index 1969398293..0592b4bc12 100644 --- a/files/ru/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html +++ b/files/ru/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -12,7 +12,7 @@ original_slug: >- --- <div>{{cssref}}</div> -<p><a href="/en-US/docs/Mozilla/Gecko">Gecko</a> 1.8 (<a href="/en-US/Firefox/Releases/1.5">Firefox 1.5</a>, SeaMonkey 1.0) поддерживает URL-значения для CSS свойства {{cssxref("cursor")}} в Windows и Linux. Поддержка Mac была добавлена в Gecko 2 (Firefox 4). Это позволяет устанавливать произвольные изображения в качестве курсора мыши — может быть использовать любой формат изображений, поддерживаемый Gecko.</p> +<p><a href="/en-US/docs/Mozilla/Gecko">Gecko</a> 1.8 (<a href="/en-US/Firefox/Releases/1.5">Firefox 1.5</a>, SeaMonkey 1.0) поддерживает URL-значения для CSS-свойства {{cssxref("cursor")}} в Windows и Linux. Поддержка Mac была добавлена в Gecko 2 (Firefox 4). Это позволяет устанавливать произвольные изображения в качестве курсора мыши — может быть использовать любой формат изображений, поддерживаемый Gecko.</p> <h3 id="Синтаксис">Синтаксис</h3> @@ -56,7 +56,7 @@ original_slug: >- <p>Могут быть использованы любые форматы, поддерживаемые Gecko. Это означает, что вы можете использовать PNG, GIF, JPG, BMP, CUR и т.д. ANI не поддерживается. Анимированные PNG и GIF не добавят анимацию курсору.</p> <div class="note"> -<p><strong>Примечание:</strong> Начиная с Gecko 2.0 {{geckoRelease("2.0")}}, Gecko также поддерживает формат SVG в качестве изображения курсора. Тем не менее, SVG изображение должно содержать значения (кроме процентных значений) высоты и ширины на корневом <code>SVG</code> узле. JavaScript, CSS анимация и декларативный SMIL внутри SVG изображения игнорируются; например, вы не можете использовать SVG, чтобы создать анимированный курсор.</p> +<p><strong>Примечание:</strong> Начиная с Gecko 2.0 {{geckoRelease("2.0")}}, Gecko также поддерживает формат SVG в качестве изображения курсора. Тем не менее, SVG изображение должно содержать значения (кроме процентных значений) высоты и ширины на корневом <code>SVG</code> узле. JavaScript, CSS-анимация и декларативный SMIL внутри SVG изображения игнорируются; например, вы не можете использовать SVG, чтобы создать анимированный курсор.</p> </div> <p>В Gecko (Firefox) максимальный размер курсора - 128×128 пикселей. Изображения большего размера игнорируются. Однако, вам следую ограничиться размером курсора в 32×32 пикселя для максимальной совместимости с операционными системами и платформами.</p> diff --git a/files/ru/web/css/css_columns/using_multi-column_layouts/index.html b/files/ru/web/css/css_columns/using_multi-column_layouts/index.html index af886ff78f..46a7b5e42c 100644 --- a/files/ru/web/css/css_columns/using_multi-column_layouts/index.html +++ b/files/ru/web/css/css_columns/using_multi-column_layouts/index.html @@ -8,7 +8,7 @@ original_slug: Web/Guide/CSS/Using_multi-column_layouts <p><span class="seoSummary"><strong>CSS разметка для многих колонок</strong> расширяет <em>способ блочной разметки, </em>чтобы позволить лёгкое описание нескольких колонок текста.</span> Людям сложно читать текст, если строки слишком длинные; это занимает слишком много времени для глаз, чтобы перемещать взгляд с конца одной на начало следующей строки, и они забывают на какой строке находились. Поэтому, чтобы использовать большие дисплеи по максимуму, авторам следует ограничить ширину колонок текст расположенных бок о бок, как в газетах.</p> -<p>К несчастью, это невозможно сделать с CSS и HTML без принудительного разбиения колонки в фиксированных позициях, или строго ограничить допустимую разметку в тексте, или использовать экстраординарный скрипт. Это ограничение снимается с помощью добавления новых CSS свойств, чтобы расширить традиционный блочный способ разметки.</p> +<p>К несчастью, это невозможно сделать с CSS и HTML без принудительного разбиения колонки в фиксированных позициях, или строго ограничить допустимую разметку в тексте, или использовать экстраординарный скрипт. Это ограничение снимается с помощью добавления новых CSS-свойств, чтобы расширить традиционный блочный способ разметки.</p> <h2 id="Использование_колонок">Использование колонок</h2> diff --git a/files/ru/web/css/css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/index.html index bac225352c..158ee6bef7 100644 --- a/files/ru/web/css/css_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/index.html @@ -78,7 +78,7 @@ translation_of: Web/CSS/CSS_Grid_Layout <h2 id="Ссылки">Ссылки</h2> -<h3 id="CSS_свойства">CSS свойства</h3> +<h3 id="CSS_свойства">CSS-свойства</h3> <div class="index"> <ul> diff --git a/files/ru/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/ru/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html index 26fc648a2c..f2eedc49c9 100644 --- a/files/ru/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html +++ b/files/ru/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html @@ -3,7 +3,7 @@ title: Контекст наложения (stacking context) slug: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context --- -<p>Контекст наложения (stacking context) это концепция трёхмерного расположения HTML элементов вдоль оси Z по отношению к пользователю, находящемуся перед экраном. HTML элементы занимают это место по порядку, основанному на атрибутах элемента.</p> +<p>Контекст наложения (stacking context) это концепция трёхмерного расположения HTML-элементов вдоль оси Z по отношению к пользователю, находящемуся перед экраном. HTML-элементы занимают это место по порядку, основанному на атрибутах элемента.</p> <p>« <a href="/en-US/docs/CSS" title="CSS">CSS</a> « <a href="/en-US/docs/CSS/Understanding_z-index" title="Understanding CSS z-index">Understanding CSS z-index</a></p> @@ -34,12 +34,12 @@ translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_conte <p>Суммируем:</p> <ul> - <li>Позиционирование и присваивание HTML элементам свойства z-index создаёт контекст наложения, (так же как и присваивание элементу opacity меньше 1).</li> + <li>Позиционирование и присваивание HTML-элементам свойства z-index создаёт контекст наложения, (так же как и присваивание элементу opacity меньше 1).</li> <li>Контексты наложения могут быть частью других контекстов наложения и вместе создавать иерархию контекстов наложения. </li> <li>Каждый контекст наложения абсолютно независим от своего соседа: только подчинённые элементы учитываются при обработке контекста наложения.</li> </ul> -<div class="note"><strong>Note:</strong> Иерархия контекстов наложения является подмножеством иерархии HTML элементов, потому что только определённые элементы создают контексты наложения. Можно сказать, что элементы, которые не создают собственного контекста наложения, используют контекст наложения родителя.</div> +<div class="note"><strong>Note:</strong> Иерархия контекстов наложения является подмножеством иерархии HTML-элементов, потому что только определённые элементы создают контексты наложения. Можно сказать, что элементы, которые не создают собственного контекста наложения, используют контекст наложения родителя.</div> <h2 id="Пример"><strong>Пример</strong></h2> diff --git a/files/ru/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/ru/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html index 7c112e8d03..c978d0c833 100644 --- a/files/ru/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html +++ b/files/ru/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html @@ -6,7 +6,7 @@ original_slug: Web/CSS/CSS_Селекторы/Using_the_:target_pseudo-class_in_ --- <div>{{CSSRef}}</div> -<p>Иногда пользователям трудно заметить, что URL указывает на определённую часть документа. Узнайте, как можно использовать простое CSS правило, чтобы привлечь внимание пользователей к цели указания URL и улучшить их впечатления.</p> +<p>Иногда пользователям трудно заметить, что URL указывает на определённую часть документа. Узнайте, как можно использовать простое CSS-правило, чтобы привлечь внимание пользователей к цели указания URL и улучшить их впечатления.</p> <h2 id="Picking_a_Target" name="Picking_a_Target">Выбор целевых элементов</h2> diff --git a/files/ru/web/css/css_transitions/using_css_transitions/index.html b/files/ru/web/css/css_transitions/using_css_transitions/index.html index d02444ac6b..ccb564051d 100644 --- a/files/ru/web/css/css_transitions/using_css_transitions/index.html +++ b/files/ru/web/css/css_transitions/using_css_transitions/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions --- <p>{{CSSref}}{{SeeCompatTable}}</p> -<p><span class="seoSummary"><strong>CSS transitions</strong> предоставляют способ контролировать скорость анимации, при изменении CSS свойств. Вместо того, чтобы свойство применилось сразу, вы можете сделать это действие происходящим в течение какого-то момента времени. Например, если вы смените цвет элемента с белого на чёрный, изменение произойдёт моментально, а вот с CSS transitions, изменения произойдут за временные интервалы, следующих кривой ускорения, все из которых могут быть настроены.</span></p> +<p><span class="seoSummary"><strong>CSS transitions</strong> предоставляют способ контролировать скорость анимации, при изменении CSS-свойств. Вместо того, чтобы свойство применилось сразу, вы можете сделать это действие происходящим в течение какого-то момента времени. Например, если вы смените цвет элемента с белого на чёрный, изменение произойдёт моментально, а вот с CSS transitions, изменения произойдут за временные интервалы, следующих кривой ускорения, все из которых могут быть настроены.</span></p> <p>Анимации, составляющие переход между двумя состояниями, часто называют <em>неявными переходами</em>, так как промежуточные состояния в период между начальным и конечным состоянием неявно определяются браузером.<img alt="A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions." src="/files/4529/TransitionsPrinciple.png" style="display: block; height: 196px; margin: auto; width: 680px;"></p> @@ -13,7 +13,7 @@ translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions <div class="note"><strong>Замечание:</strong> CSS переходы могут использоваться без префиксов, однако спецификация только недавно достигла стабильности, префиксы по-прежнему необходимы для браузеров на WebKit. Они также необходимы для поддержки старых версий браузеров (таких как: Firefox 15, Opera 12 и более ранних). Таблица совместимости приведена внизу страницы с ещё большим количеством информации.</div> -<h2 id="Какие_CSS_свойства_анимируются">Какие CSS свойства анимируются?</h2> +<h2 id="Какие_CSS_свойства_анимируются">Какие CSS-свойства анимируются?</h2> <p>Разработчик может определить какое свойство и как анимировать. Это позволяет создавать сложные переходы. Так как некоторые свойства не имеет смысла анимировать, перечень<a href="/en-US/docs/CSS/CSS_animated_properties"> доступных для анимирования свойств </a>ограничен определённым набором.</p> @@ -21,7 +21,7 @@ translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions <p class="note">Значение свойства <code>auto</code> является сложным случаем. Спецификация не рекомендует анимировать в значение <code>auto</code> и из значения <code>auto</code>. Браузеры, основанные на Gecko, исполняют это требование в точности, а основанные на WebKit не так строго. Использование переходов с <code>auto</code> следует избегать, так как это может привести к непредсказуемым результатам, в зависимости от браузера и его версии.</p> -<p class="note">Необходимо также соблюдать осторожность при использовании переходов сразу после добавления элемента в DOM с помощью <code>.appendChild()</code> или удаления его <code>display: none; свойства</code>. Это выглядит, как будто никогда не происходило начальное состояние, а элемент всегда был в конечном состоянии. Самый простой способ преодолеть это ограничение - применить <code>window.setTimeout()</code> c некоторым количеством миллисекунд до изменения CSS свойства, которое вы собираетесь анимировать.</p> +<p class="note">Необходимо также соблюдать осторожность при использовании переходов сразу после добавления элемента в DOM с помощью <code>.appendChild()</code> или удаления его <code>display: none; свойства</code>. Это выглядит, как будто никогда не происходило начальное состояние, а элемент всегда был в конечном состоянии. Самый простой способ преодолеть это ограничение - применить <code>window.setTimeout()</code> c некоторым количеством миллисекунд до изменения CSS-свойства, которое вы собираетесь анимировать.</p> <h3 id="Пример_анимирования_нескольких_свойств">Пример анимирования нескольких свойств</h3> @@ -56,7 +56,7 @@ translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions <p>{{ EmbedLiveSample('Пример_анимирования_нескольких_свойств', 600, 300) }}</p> -<h2 id="CSS_свойства_определяющие_переходы">CSS свойства, определяющие переходы</h2> +<h2 id="CSS_свойства_определяющие_переходы">CSS-свойства, определяющие переходы</h2> <p>CSS переходы контролируются свойством<a href="https://developer.mozilla.org/en-US/docs/CSS/transition"> </a>{{cssxref("transition")}}. Это лучший способ их настроить, позволяет избежать длинных свойств и их несоответствий, которые могут сделать отладку CSS долгой.</p> @@ -1070,5 +1070,5 @@ document.addEventListener('click', function(ev){ <ul> <li><span><a href="http://techstream.org/Web-Design/Dock-Menu-with-CSS3" title="CSS3 Dock Menu using CSS transitions">Нижнее меню</a> с использованием CSS переходов</span></li> <li>Интерфейс {{domxref("TransitionEvent")}} и событие {{event("transitionend")}}.</li> - <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Использование CSS анимаций</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Использование CSS-анимаций</a></li> </ul> diff --git a/files/ru/web/css/css_types/index.html b/files/ru/web/css/css_types/index.html index 47189715ea..783fececfd 100644 --- a/files/ru/web/css/css_types/index.html +++ b/files/ru/web/css/css_types/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/CSS_Types --- <div>{{CssRef}}</div> -<p>Базовые типы данных в<strong> CSS </strong>определяют типичные значения (включая ключевые слова и единицы измерения), принимаемые CSS свойствами и функциями. Они являются частным случаем <a href="https://www.w3.org/TR/css3-values/#component-types">component value type</a>.</p> +<p>Базовые типы данных в<strong> CSS </strong>определяют типичные значения (включая ключевые слова и единицы измерения), принимаемые CSS-свойствами и функциями. Они являются частным случаем <a href="https://www.w3.org/TR/css3-values/#component-types">component value type</a>.</p> <p>В формальном синтаксисе типы данных обозначаются ключевыми словами, расположенными межу символами неравенства "<" и">".</p> diff --git a/files/ru/web/css/filter/index.html b/files/ru/web/css/filter/index.html index acd3dc2dfa..39615088ae 100644 --- a/files/ru/web/css/filter/index.html +++ b/files/ru/web/css/filter/index.html @@ -79,7 +79,7 @@ img { <h2 id="Функции">Функции</h2> -<p>Для использования CSS свойства <code>filter</code>, вы указываете значение для одной из выбранных функций. Если это значение недействительно, функция возвращает "none." За исключением тех случаев, когда функции, которые принимают значение, выраженное в процентах (34%), также принимают значение, выраженное как десятичная дробь (0.34).</p> +<p>Для использования CSS-свойства <code>filter</code>, вы указываете значение для одной из выбранных функций. Если это значение недействительно, функция возвращает "none." За исключением тех случаев, когда функции, которые принимают значение, выраженное в процентах (34%), также принимают значение, выраженное как десятичная дробь (0.34).</p> <h3 id="url"><code>url()</code></h3> diff --git a/files/ru/web/css/float/index.html b/files/ru/web/css/float/index.html index d8ac0950d5..2b53b4b528 100644 --- a/files/ru/web/css/float/index.html +++ b/files/ru/web/css/float/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/float <h2 id="Summary">Summary</h2> -<p>CSS свойство <code>float</code> указывает, что текущий элемент должен быть изъят из обычного flow (потока) и прижат к левой или правой стороне родительского элемента. Текст и inline элементы будут обтекать такой элемент.</p> +<p>CSS-свойство <code>float</code> указывает, что текущий элемент должен быть изъят из обычного flow (потока) и прижат к левой или правой стороне родительского элемента. Текст и inline элементы будут обтекать такой элемент.</p> <p><strong>Плавающий элемент</strong> - это любой элемент со свойством <code>float</code> отличным от <code>none</code>.</p> diff --git a/files/ru/web/css/font-family/index.html b/files/ru/web/css/font-family/index.html index 44df7fc34e..331894b960 100644 --- a/files/ru/web/css/font-family/index.html +++ b/files/ru/web/css/font-family/index.html @@ -3,14 +3,14 @@ title: font-family slug: Web/CSS/font-family tags: - CSS - - CSS свойства - - CSS свойство + - CSS-свойства + - CSS-свойство - семейства-шрифтов translation_of: Web/CSS/font-family --- <div>{{CSSRef}}</div> -<p>CSS свойство <strong><code>font-family</code></strong> определяет приоритетный список из одного или нескольких названий семейства шрифтов и/или общее имя шрифта для выбранного элемента.</p> +<p>CSS-свойство <strong><code>font-family</code></strong> определяет приоритетный список из одного или нескольких названий семейства шрифтов и/или общее имя шрифта для выбранного элемента.</p> <div>{{EmbedInteractiveExample("pages/css/font-family.html")}}</div> diff --git a/files/ru/web/css/font-size/index.html b/files/ru/web/css/font-size/index.html index 8605e28f61..b51205dfa7 100644 --- a/files/ru/web/css/font-size/index.html +++ b/files/ru/web/css/font-size/index.html @@ -3,7 +3,7 @@ title: font-size slug: Web/CSS/font-size tags: - CSS - - CSS свойства + - CSS-свойства - css шрифты translation_of: Web/CSS/font-size --- diff --git a/files/ru/web/css/font-style/index.html b/files/ru/web/css/font-style/index.html index 2792ec7228..f72a3efbd8 100644 --- a/files/ru/web/css/font-style/index.html +++ b/files/ru/web/css/font-style/index.html @@ -8,7 +8,7 @@ translation_of: Web/CSS/font-style --- <div>{{CSSRef}}</div> -<p><strong><code>font-style</code></strong> это CSS свойство определяющее каким образом шрифт должен быть стилизирован, будь то это normal, italic, или oblique face из его {{cssxref("font-family")}}.</p> +<p><strong><code>font-style</code></strong> это CSS-свойство определяющее каким образом шрифт должен быть стилизирован, будь то это normal, italic, или oblique face из его {{cssxref("font-family")}}.</p> <div>{{EmbedInteractiveExample("pages/css/font-style.html")}}</div> diff --git a/files/ru/web/css/grid-area/index.html b/files/ru/web/css/grid-area/index.html index eef3305724..4efb6555aa 100644 --- a/files/ru/web/css/grid-area/index.html +++ b/files/ru/web/css/grid-area/index.html @@ -3,7 +3,7 @@ title: grid-area slug: Web/CSS/grid-area translation_of: Web/CSS/grid-area --- -<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">CSS свойство </span></font><strong>grid-area</strong></code> - это <a href="/en-US/docs/Web/CSS/Shorthand_properties">сокращённая форма записи</a> для свойств {{cssxref("grid-row-start")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-row-end")}} и {{cssxref("grid-column-end")}}. Определяет размер и местоположение грид-элемента в пределах {{glossary("grid rows", "grid row")}}. Задаёт края {{glossary("grid areas", "грид-области")}} грид-элемента.</p> +<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">CSS-свойство </span></font><strong>grid-area</strong></code> - это <a href="/en-US/docs/Web/CSS/Shorthand_properties">сокращённая форма записи</a> для свойств {{cssxref("grid-row-start")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-row-end")}} и {{cssxref("grid-column-end")}}. Определяет размер и местоположение грид-элемента в пределах {{glossary("grid rows", "grid row")}}. Задаёт края {{glossary("grid areas", "грид-области")}} грид-элемента.</p> <pre class="brush: css no-line-numbers">/* Ключевые слова в качестве значений */ grid-area: auto; diff --git a/files/ru/web/css/grid-template-areas/index.html b/files/ru/web/css/grid-template-areas/index.html index 9930232eec..9e8105a107 100644 --- a/files/ru/web/css/grid-template-areas/index.html +++ b/files/ru/web/css/grid-template-areas/index.html @@ -3,7 +3,7 @@ title: grid-template-areas slug: Web/CSS/grid-template-areas translation_of: Web/CSS/grid-template-areas --- -<p>CSS свойство <strong><code>grid-template-areas</code></strong> определяет название {{glossary("grid-области")}}.</p> +<p>CSS-свойство <strong><code>grid-template-areas</code></strong> определяет название {{glossary("grid-области")}}.</p> <div>{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}}</div> @@ -119,7 +119,7 @@ grid-template-areas: unset; <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li>Связанные CSS свойства: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template")}}</li> + <li>Связанные CSS-свойства: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template")}}</li> <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></em></li> <li>Video tutorial: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li> </ul> diff --git a/files/ru/web/css/grid-template-columns/index.html b/files/ru/web/css/grid-template-columns/index.html index 15278dec92..e4effc8e08 100644 --- a/files/ru/web/css/grid-template-columns/index.html +++ b/files/ru/web/css/grid-template-columns/index.html @@ -7,7 +7,7 @@ tags: - grid translation_of: Web/CSS/grid-template-columns --- -<p><span class="seoSummary">CSS свойство <strong><code>grid-template-columns</code></strong> определяет имена линий и функции гибкости линий. {{glossary("grid column", "grid columns")}}. Другими словами, задаёт количество столбцов "колонок" в сетке и может определять ширину каждой из них.</span></p> +<p><span class="seoSummary">CSS-свойство <strong><code>grid-template-columns</code></strong> определяет имена линий и функции гибкости линий. {{glossary("grid column", "grid columns")}}. Другими словами, задаёт количество столбцов "колонок" в сетке и может определять ширину каждой из них.</span></p> <p>{{EmbedInteractiveExample("pages/css/grid-template-columns.html")}}</p> diff --git a/files/ru/web/css/grid-template-rows/index.html b/files/ru/web/css/grid-template-rows/index.html index 0a0d5ec229..4de6e334d0 100644 --- a/files/ru/web/css/grid-template-rows/index.html +++ b/files/ru/web/css/grid-template-rows/index.html @@ -3,7 +3,7 @@ title: grid-template-rows slug: Web/CSS/grid-template-rows translation_of: Web/CSS/grid-template-rows --- -<p class="summary"><span class="seoSummary"><code>grid-template-rows</code> </span>— это<span class="seoSummary">CSS свойство, </span> которое определяет названия линий и путь размера функции <span class="seoSummary"> {{glossary("grid rows", "grid rows")}}.</span></p> +<p class="summary"><span class="seoSummary"><code>grid-template-rows</code> </span>— это<span class="seoSummary">CSS-свойство, </span> которое определяет названия линий и путь размера функции <span class="seoSummary"> {{glossary("grid rows", "grid rows")}}.</span></p> <pre class="brush: css no-line-numbers">/* Keyword value */ grid-template-rows: none; diff --git a/files/ru/web/css/grid/index.html b/files/ru/web/css/grid/index.html index d46d0121c6..6f14f37d84 100644 --- a/files/ru/web/css/grid/index.html +++ b/files/ru/web/css/grid/index.html @@ -3,7 +3,7 @@ title: grid slug: Web/CSS/grid tags: - CSS - - CSS свойства + - CSS-свойства - CSS сетка - Ссылки translation_of: Web/CSS/grid diff --git a/files/ru/web/css/hyphens/index.html b/files/ru/web/css/hyphens/index.html index 00858e50a1..94ba6884da 100644 --- a/files/ru/web/css/hyphens/index.html +++ b/files/ru/web/css/hyphens/index.html @@ -59,7 +59,7 @@ hyphens: unset; </dl> <div class="blockIndicator note"> -<p>Когда HTML элемент <code><a href="/en-US/docs/Web/HTML/Element/wbr"><wbr></a></code> приводит к разрыву строки, дефис не добавляется.</p> +<p>Когда HTML-элемент <code><a href="/en-US/docs/Web/HTML/Element/wbr"><wbr></a></code> приводит к разрыву строки, дефис не добавляется.</p> </div> <h2 id="Формальное_определение"><font><font>Формальное определение</font></font></h2> diff --git a/files/ru/web/css/inherit/index.html b/files/ru/web/css/inherit/index.html index af782dd1ed..f172276f08 100644 --- a/files/ru/web/css/inherit/index.html +++ b/files/ru/web/css/inherit/index.html @@ -16,7 +16,7 @@ translation_of: Web/CSS/inherit --- <div>{{CSSRef}}</div> -<p><span class="seoSummary">Ключевое слово <strong> <code>inherit</code></strong> (CSS) вынуждает элемент использовать <a href="/ru/docs/Web/CSS/computed_value">вычисленное значение</a> аналогичного свойства родительского элемента.</span> Это может быть применено к любому свойству CSS, включая CSS свойство {{cssxref("all")}}.</p> +<p><span class="seoSummary">Ключевое слово <strong> <code>inherit</code></strong> (CSS) вынуждает элемент использовать <a href="/ru/docs/Web/CSS/computed_value">вычисленное значение</a> аналогичного свойства родительского элемента.</span> Это может быть применено к любому свойству CSS, включая CSS-свойство {{cssxref("all")}}.</p> <p>Для <a href="/ru/docs/Web/CSS/inheritance" title="ru/docs/Web/CSS/inheritance">наследуемых свойств</a>, это усиливает поведение по умолчанию и требуется только для переопределения другого правила. Для <a href="/ru/docs/Web/CSS/inheritance" title="/ru/docs/Web/CSS/inheritance">ненаследуемых свойств</a>, это указывает на поведение, которое обычно имеет относительно мало смысла, и вы можете рассмотреть возможность использовать вместо него {{cssxref("initial")}} или {{cssxref("unset")}} со свойством {{cssxref("all")}}.</p> diff --git a/files/ru/web/css/inheritance/index.html b/files/ru/web/css/inheritance/index.html index ec125b3493..add80ff011 100644 --- a/files/ru/web/css/inheritance/index.html +++ b/files/ru/web/css/inheritance/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/inheritance --- <h2 id="Описание">Описание</h2> -<p>Описание каждого <a href="/ru/docs/Web/CSS/Reference" title="en/CSS_Reference">CSS свойства</a> говорит наследуется ли оно по умолчанию ("Наследуется: да/нет"). Наследование контролирует, что происходит, если значение свойства элемента не определено.</p> +<p>Описание каждого <a href="/ru/docs/Web/CSS/Reference" title="en/CSS_Reference">CSS-свойства</a> говорит наследуется ли оно по умолчанию ("Наследуется: да/нет"). Наследование контролирует, что происходит, если значение свойства элемента не определено.</p> <h2 id="Inherited_properties" name="Inherited_properties">Наследуемые свойства</h2> diff --git a/files/ru/web/css/initial/index.html b/files/ru/web/css/initial/index.html index 66be3f1690..d83cb08da9 100644 --- a/files/ru/web/css/initial/index.html +++ b/files/ru/web/css/initial/index.html @@ -15,7 +15,7 @@ translation_of: Web/CSS/initial --- <div>{{CSSRef}}</div> -<p><span class="seoSummary">Ключевое слово <strong><code>initial</code></strong> (CSS) устанавливает свойство элемента в <a href="/ru/docs/Web/CSS/initial_value">начальное (или по умолчанию) значение</a>. Это может быть применимо к любому свойству CSS.</span> Это относится также к CSS свойству {{cssxref("all")}}, с которым <code>initial</code> может быть использовано для восстановления всех CSS свойств до их начальных значений.</p> +<p><span class="seoSummary">Ключевое слово <strong><code>initial</code></strong> (CSS) устанавливает свойство элемента в <a href="/ru/docs/Web/CSS/initial_value">начальное (или по умолчанию) значение</a>. Это может быть применимо к любому свойству CSS.</span> Это относится также к CSS-свойству {{cssxref("all")}}, с которым <code>initial</code> может быть использовано для восстановления всех CSS-свойств до их начальных значений.</p> <div class="note"> <p><strong>Примечание:</strong> На <a href="/ru/docs/Web/CSS/inheritance#Inherited_properties">наследуемые свойства</a> действие значения initial может быть непредвиденным. Вы должны рассмотреть возможность использования ключевых слов {{cssxref("inherit")}}, {{cssxref("unset")}} или {{cssxref("revert")}} вместо него.</p> diff --git a/files/ru/web/css/initial_value/index.html b/files/ru/web/css/initial_value/index.html index 6805742d06..53868364ce 100644 --- a/files/ru/web/css/initial_value/index.html +++ b/files/ru/web/css/initial_value/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/initial_value --- <h2 id="Описание">Описание</h2> -<p><strong>Начальное значение</strong>, данное в кратком описании <a href="/ru/docs/Web/CSS/Reference" title="en/CSS_Reference">каждого CSS свойства</a> имеет различное значение для <a href="/ru/docs/Web/CSS/inheritance" title="en/CSS/inheritance">наследуемых и не наследуемых свойств</a>.</p> +<p><strong>Начальное значение</strong>, данное в кратком описании <a href="/ru/docs/Web/CSS/Reference" title="en/CSS_Reference">каждого CSS-свойства</a> имеет различное значение для <a href="/ru/docs/Web/CSS/inheritance" title="en/CSS/inheritance">наследуемых и не наследуемых свойств</a>.</p> <p>Для <a href="/ru/docs/Web/CSS/inheritance#Inherited_properties" title="en/CSS/inheritance#Inherited_properties">наследуемых</a>, начальное значение установлено <strong>только</strong> для корневого элемента, если не указано никакого значения для элемента.</p> diff --git a/files/ru/web/css/layout_mode/index.html b/files/ru/web/css/layout_mode/index.html index 3be34f7296..55c204725d 100644 --- a/files/ru/web/css/layout_mode/index.html +++ b/files/ru/web/css/layout_mode/index.html @@ -19,7 +19,7 @@ original_slug: Web/CSS/Способ_расположения </ul> <div class="note"> -<p><strong>Примечание:</strong> не все <a href="/ru/docs/Web/CSS/Reference" title="/ru/docs/Web/CSS/Reference">CSS свойства</a> применимы ко всем способам разметки. Большинство из них применяются к одному или двум из них и не действуют, если применяются на элементе, участвующем в другом режиме разметки.</p> +<p><strong>Примечание:</strong> не все <a href="/ru/docs/Web/CSS/Reference" title="/ru/docs/Web/CSS/Reference">CSS-свойства</a> применимы ко всем способам разметки. Большинство из них применяются к одному или двум из них и не действуют, если применяются на элементе, участвующем в другом режиме разметки.</p> </div> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/web/css/margin-bottom/index.html b/files/ru/web/css/margin-bottom/index.html index 6e65b841ff..dd47948112 100644 --- a/files/ru/web/css/margin-bottom/index.html +++ b/files/ru/web/css/margin-bottom/index.html @@ -3,7 +3,7 @@ title: margin-bottom slug: Web/CSS/margin-bottom tags: - CSS - - CSS свойство + - CSS-свойство translation_of: Web/CSS/margin-bottom --- <div>{{CSSRef}}</div> @@ -14,7 +14,7 @@ translation_of: Web/CSS/margin-bottom <p class="hidden">Исходник этого интерактивного примера хранится на репозитории GitHub.Если вы хотите внести свой вклад в проект интерактивных примеров, перейдите по ссылке https://github.com/mdn/interactive-examples и отправьте нам запрос на добавление.</p> -<p> <img alt="Влияние CSS свойства margin-bottom на блок элемента" src="https://mdn.mozillademos.org/files/16471/margin-bottomru.png" style="border-style: solid; border-width: 1px; font-size: 1rem; height: 150px; letter-spacing: -0.00278rem; width: 459px;"></p> +<p> <img alt="Влияние CSS-свойства margin-bottom на блок элемента" src="https://mdn.mozillademos.org/files/16471/margin-bottomru.png" style="border-style: solid; border-width: 1px; font-size: 1rem; height: 150px; letter-spacing: -0.00278rem; width: 459px;"></p> <p>Это свойство не имеет воздействия на незамещаемые элементы, такие как {{HTMLElement("span")}} или {{HTMLElement("code")}}.</p> diff --git a/files/ru/web/css/mix-blend-mode/index.html b/files/ru/web/css/mix-blend-mode/index.html index cb6cfde131..55db946685 100644 --- a/files/ru/web/css/mix-blend-mode/index.html +++ b/files/ru/web/css/mix-blend-mode/index.html @@ -4,12 +4,12 @@ slug: Web/CSS/mix-blend-mode tags: - CSS - CSS композитинг - - CSS свойство + - CSS-свойство translation_of: Web/CSS/mix-blend-mode --- <div>{{CSSRef}}</div> -<p>CSS свойство <strong><code>mix-blend-mode</code></strong> определяет режим смешивания цветов выбранного элемента с низлежащими слоями.</p> +<p>CSS-свойство <strong><code>mix-blend-mode</code></strong> определяет режим смешивания цветов выбранного элемента с низлежащими слоями.</p> <p>{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}</p> diff --git a/files/ru/web/css/opacity/index.html b/files/ru/web/css/opacity/index.html index 92b9189692..d434f4cfe0 100644 --- a/files/ru/web/css/opacity/index.html +++ b/files/ru/web/css/opacity/index.html @@ -3,7 +3,7 @@ title: opacity slug: Web/CSS/opacity tags: - CSS - - CSS свойство + - CSS-свойство - Opacity - Непрозрачность - Прозрачность diff --git a/files/ru/web/css/order/index.html b/files/ru/web/css/order/index.html index 783af7d5b6..ca01f0c801 100644 --- a/files/ru/web/css/order/index.html +++ b/files/ru/web/css/order/index.html @@ -4,7 +4,7 @@ slug: Web/CSS/order tags: - CSS - CSS Flexible Boxes - - CSS свойства + - CSS-свойства translation_of: Web/CSS/order --- <div>{{CSSRef}}</div> diff --git a/files/ru/web/css/padding-left/index.html b/files/ru/web/css/padding-left/index.html index f669f782d3..21de36b1ab 100644 --- a/files/ru/web/css/padding-left/index.html +++ b/files/ru/web/css/padding-left/index.html @@ -3,7 +3,7 @@ title: padding-left slug: Web/CSS/padding-left tags: - CSS - - CSS свойство + - CSS-свойство translation_of: Web/CSS/padding-left --- <div><font><font>{{CSSRef}}</font></font></div> diff --git a/files/ru/web/css/padding-right/index.html b/files/ru/web/css/padding-right/index.html index bba1e82b18..dda2578083 100644 --- a/files/ru/web/css/padding-right/index.html +++ b/files/ru/web/css/padding-right/index.html @@ -3,7 +3,7 @@ title: padding-right slug: Web/CSS/padding-right tags: - CSS - - CSS свойство + - CSS-свойство translation_of: Web/CSS/padding-right --- <div>{{CSSRef}}</div> diff --git a/files/ru/web/css/padding/index.html b/files/ru/web/css/padding/index.html index d299d9dbf2..b2fc38a794 100644 --- a/files/ru/web/css/padding/index.html +++ b/files/ru/web/css/padding/index.html @@ -4,7 +4,7 @@ slug: Web/CSS/padding tags: - CSS - CSS Padding - - CSS свойство + - CSS-свойство translation_of: Web/CSS/padding --- <div>{{CSSRef}}</div> diff --git a/files/ru/web/css/pointer-events/index.html b/files/ru/web/css/pointer-events/index.html index 7e58107238..30aecfec17 100644 --- a/files/ru/web/css/pointer-events/index.html +++ b/files/ru/web/css/pointer-events/index.html @@ -2,7 +2,7 @@ title: pointer-events slug: Web/CSS/pointer-events tags: - - CSS свойства + - CSS-свойства - Ссылка translation_of: Web/CSS/pointer-events --- @@ -10,7 +10,7 @@ translation_of: Web/CSS/pointer-events <h2 id="Описание">Описание</h2> -<p>CSS свойство<strong> <code>pointer-events</code></strong> позволяет контролировать события, при которых элемент может стать объектом события мыши. Если это свойство не задано, то к содержимому SVG будут применяться характеристики значения <code>visiblePainted.</code></p> +<p>CSS-свойство<strong> <code>pointer-events</code></strong> позволяет контролировать события, при которых элемент может стать объектом события мыши. Если это свойство не задано, то к содержимому SVG будут применяться характеристики значения <code>visiblePainted.</code></p> <p>Вдобавок к указанию того, что элемент не является объектом события мыши, значение <code>none</code> сообщает событию мыши проходить "через" элемент и обращаться к элементу, находящемуся "под" ним.</p> diff --git a/files/ru/web/css/replaced_element/index.html b/files/ru/web/css/replaced_element/index.html index 5ea04a61f3..54898babfe 100644 --- a/files/ru/web/css/replaced_element/index.html +++ b/files/ru/web/css/replaced_element/index.html @@ -40,7 +40,7 @@ original_slug: Web/CSS/Замещаемый_элемент <p>CSS обрабатывает замещаемые элементы особым образом в некоторых случаях, например при расчёте внешних отступов и некоторых значений <code>auto</code>.</p> -<p>Заметим, что у некоторых замещаемых элементов, но не у всех, есть внутренние размеры или определённая базовая линия, которая используется CSS свойствами вроде {{cssxref("vertical-align")}}.</p> +<p>Заметим, что у некоторых замещаемых элементов, но не у всех, есть внутренние размеры или определённая базовая линия, которая используется CSS-свойствами вроде {{cssxref("vertical-align")}}.</p> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/web/css/resolved_value/index.html b/files/ru/web/css/resolved_value/index.html index 295f999c83..e1113aafa9 100644 --- a/files/ru/web/css/resolved_value/index.html +++ b/files/ru/web/css/resolved_value/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/resolved_value --- <div>{{cssref}}</div> -<p><strong>Решённое значение</strong> CSS свойства - значение, возвращаемое {{domxref("Window.getComputedStyle", "getComputedStyle()")}}. Для многих свойств, это {{cssxref("computed_value", "вычисленное значение") }}, но для старых свойств (включая {{cssxref("width")}} и {{cssxref("height")}}), это {{cssxref("used_value", "используемое значение")}}. Смотрите ссылку спецификации ниже для дополнительной информации.</p> +<p><strong>Решённое значение</strong> CSS-свойства - значение, возвращаемое {{domxref("Window.getComputedStyle", "getComputedStyle()")}}. Для многих свойств, это {{cssxref("computed_value", "вычисленное значение") }}, но для старых свойств (включая {{cssxref("width")}} и {{cssxref("height")}}), это {{cssxref("used_value", "используемое значение")}}. Смотрите ссылку спецификации ниже для дополнительной информации.</p> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/css/right/index.html b/files/ru/web/css/right/index.html index e825de23ab..0699fd57a1 100644 --- a/files/ru/web/css/right/index.html +++ b/files/ru/web/css/right/index.html @@ -4,7 +4,7 @@ slug: Web/CSS/right tags: - CSS - CSS Позиционирование - - CSS свойство + - CSS-свойство translation_of: Web/CSS/right --- <div>{{CSSRef}}</div> diff --git a/files/ru/web/css/scroll-behavior/index.html b/files/ru/web/css/scroll-behavior/index.html index 0797bac009..fa2127eda6 100644 --- a/files/ru/web/css/scroll-behavior/index.html +++ b/files/ru/web/css/scroll-behavior/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/scroll-behavior <h2 id="Summary" name="Summary">Описание</h2> -<p><strong><code>scroll-behavior</code></strong> - CSS свойство, которое определяет поведение прокрутки для любого элемента на странице. Отрабатывается в момент автоматической прокрутки навигационных элементов, либо CSSOM прокручивается API. Любые другие прокручивания, например, те, которые выполняются пользователем, не затрагиваются этим свойством. Если это свойство указано на корневой элемент, оно относится ко всему <em>viewport</em> пространству.</p> +<p><strong><code>scroll-behavior</code></strong> - CSS-свойство, которое определяет поведение прокрутки для любого элемента на странице. Отрабатывается в момент автоматической прокрутки навигационных элементов, либо CSSOM прокручивается API. Любые другие прокручивания, например, те, которые выполняются пользователем, не затрагиваются этим свойством. Если это свойство указано на корневой элемент, оно относится ко всему <em>viewport</em> пространству.</p> <p>Юзер-агенты могут игнорировать это свойство.</p> diff --git a/files/ru/web/css/shorthand_properties/index.html b/files/ru/web/css/shorthand_properties/index.html index 90738acb1b..8f6baf168a 100644 --- a/files/ru/web/css/shorthand_properties/index.html +++ b/files/ru/web/css/shorthand_properties/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/Shorthand_properties --- <div>{{cssref}}</div> -<p class="summary"><strong><dfn>Сокращённые свойства</dfn></strong> - это такие CSS свойства, которые позволяют одновременно устанавливать значения нескольких других свойств. Используя сокращённое свойство, вы можете писать более сжатые (и часто более читаемые) таблицы стилей, экономя время и энергию.</p> +<p class="summary"><strong><dfn>Сокращённые свойства</dfn></strong> - это такие CSS-свойства, которые позволяют одновременно устанавливать значения нескольких других свойств. Используя сокращённое свойство, вы можете писать более сжатые (и часто более читаемые) таблицы стилей, экономя время и энергию.</p> <p>The CSS specification defines shorthand properties to group the definition of common properties acting on the same theme. For instance, the CSS {{cssxref("background")}} property is a shorthand property that's able to define the values of {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, and {{cssxref("background-position")}}. Similarly, the most common font-related properties can be defined using the shorthand {{cssxref("font")}}, and the different margins around a box can be defined using the {{cssxref("margin")}} shorthand.</p> diff --git a/files/ru/web/css/specified_value/index.html b/files/ru/web/css/specified_value/index.html index 7cc26d6db9..3bf9b4c6b9 100644 --- a/files/ru/web/css/specified_value/index.html +++ b/files/ru/web/css/specified_value/index.html @@ -9,11 +9,11 @@ original_slug: Web/CSS/Указанное_значение --- <p>{{CSSRef}}</p> -<p><strong>Указанное значение</strong> CSS свойства может устанавливаться одним из 3 следующих способов.</p> +<p><strong>Указанное значение</strong> CSS-свойства может устанавливаться одним из 3 следующих способов.</p> <ol> <li>Если в таблице стилей документа указано значение свойства, которое будет использоваться. Например, если свойство {{cssxref("color")}} устанавливается в <code>green</code>, то цвет текста соответствующего элемента становится зелёным.</li> - <li>Если в таблице стилей документа указано значение, которое может наследоваться от родительского элемента (если возможно). Например, у нас есть параграф ({{HTMLElement("p")}}) внутри {{HTMLElement("div")}}, а к {{HTMLElement("div")}} применено CSS свойство <code>font</code> со значением "Arial", а у {{HTMLElement("p")}} не установлено свойство <code>font</code>, то он унаследует значение шрифта "Arial".</li> + <li>Если в таблице стилей документа указано значение, которое может наследоваться от родительского элемента (если возможно). Например, у нас есть параграф ({{HTMLElement("p")}}) внутри {{HTMLElement("div")}}, а к {{HTMLElement("div")}} применено CSS-свойство <code>font</code> со значением "Arial", а у {{HTMLElement("p")}} не установлено свойство <code>font</code>, то он унаследует значение шрифта "Arial".</li> <li>Если не выполняется не то, не другое, начальное значение элемента применяется из CSS спецификации.</li> </ol> diff --git a/files/ru/web/css/syntax/index.html b/files/ru/web/css/syntax/index.html index 18803ab95c..fa36a6bf1f 100644 --- a/files/ru/web/css/syntax/index.html +++ b/files/ru/web/css/syntax/index.html @@ -17,7 +17,7 @@ original_slug: Web/CSS/Синтаксис <h2 id="Объявления_CSS">Объявления CSS</h2> -<p>Задание CSS свойствам определённых значений — это основная функция CSS. Пара свойство-значение называется <em>объявлением</em>. Работа CSS движка заключается в поиске соответствий между объявлениями стилей и элементом на странице, чтобы правильно отобразить и форматировать этот элемент.</p> +<p>Задание CSS-свойствам определённых значений — это основная функция CSS. Пара свойство-значение называется <em>объявлением</em>. Работа CSS движка заключается в поиске соответствий между объявлениями стилей и элементом на странице, чтобы правильно отобразить и форматировать этот элемент.</p> <p>И свойство, и значения регистрозависимы. Пара свойство-значение разделяется двоеточием, '<code>:</code>' (<code>U+003A COLON</code>), а пробелы до, между и после свойства или значения игнорируются.</p> diff --git a/files/ru/web/css/text-align-last/index.html b/files/ru/web/css/text-align-last/index.html index ca8d567785..b7f525971c 100644 --- a/files/ru/web/css/text-align-last/index.html +++ b/files/ru/web/css/text-align-last/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/text-align-last <h2 id="Кратко">Кратко</h2> -<p><code>text-align-last</code> CSS свойство описывает как выравнивается последняя строка в блоке или строка, идущая сразу перед принудительным разрывом строки.</p> +<p><code>text-align-last</code> CSS-свойство описывает как выравнивается последняя строка в блоке или строка, идущая сразу перед принудительным разрывом строки.</p> <div>{{cssinfo}}</div> diff --git a/files/ru/web/css/text-align/index.html b/files/ru/web/css/text-align/index.html index bbd885ec7b..8c58dd091b 100644 --- a/files/ru/web/css/text-align/index.html +++ b/files/ru/web/css/text-align/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/text-align <h2 id="Резюме">Резюме</h2> -<p><code>text-align</code> CSS свойство описывает, как линейное содержимое, наподобие текста, выравнивается в блоке его родительского элемента. <code>text-align</code> не контролирует выравнивание элементов самого блока, но только их линейное содержимое.</p> +<p><code>text-align</code> CSS-свойство описывает, как линейное содержимое, наподобие текста, выравнивается в блоке его родительского элемента. <code>text-align</code> не контролирует выравнивание элементов самого блока, но только их линейное содержимое.</p> <p>{{cssinfo}}</p> diff --git a/files/ru/web/css/top/index.html b/files/ru/web/css/top/index.html index 41f4143b26..24e7bcac0c 100644 --- a/files/ru/web/css/top/index.html +++ b/files/ru/web/css/top/index.html @@ -4,7 +4,7 @@ slug: Web/CSS/top tags: - CSS - CSS Позиционирование - - CSS свойство + - CSS-свойство - Справка translation_of: Web/CSS/top --- diff --git a/files/ru/web/css/visual_formatting_model/index.html b/files/ru/web/css/visual_formatting_model/index.html index 6c756b85ba..7256046229 100644 --- a/files/ru/web/css/visual_formatting_model/index.html +++ b/files/ru/web/css/visual_formatting_model/index.html @@ -26,7 +26,7 @@ original_slug: Web/Guide/CSS/Visual_formatting_model <h3 id="Блочные_элементы_и_блок-боксы">Блочные элементы и блок-боксы</h3> -<p>Говорят, что элемент является блочным, когда вычисленное значение его CSS свойства {{ cssxref("display") }} равно: <code>block</code>, <code>list-item</code>, или <code>table</code>. Блочный элемент визуально форматируется как блок (например, параграф), предназначенный для вертикальной компоновки (в столбик).</p> +<p>Говорят, что элемент является блочным, когда вычисленное значение его CSS-свойства {{ cssxref("display") }} равно: <code>block</code>, <code>list-item</code>, или <code>table</code>. Блочный элемент визуально форматируется как блок (например, параграф), предназначенный для вертикальной компоновки (в столбик).</p> <p>Каждый элемент блочного уровня участвует в <a href="/ru/docs/CSS/block_formatting_context" title="block formatting context">контексте блочного форматирования</a>. Каждый элемент блочного уровня генерирует как минимум один блок-бокс, названный <em>главным блок-боксом</em>. Некоторые элементы, например, такие как list-item, создают дополнительные боксы для хранения маркеров и других типографических элементов, содержащихся в list item. Большинство блочных элементов генерирует только один, главный блок-бокс.</p> @@ -42,7 +42,7 @@ original_slug: Web/Guide/CSS/Visual_formatting_model <p>В некоторых случаях алгоритм визуального форматирования вынужден добавлять дополнительные боксы. Так как эти боксы невозможно как-то переименовать и к ним невозможно применить css-селекторы, поэтому эти боксы называют <em>анонимными</em>.</p> -<p>Из-за того, что к анонимным боксам невозможно применить селекторы, их невозможно изменить с помощью таблицы стилей. Это значит, что все наследуемые CSS свойства для них будут иметь значение <code>inherit</code>, а все ненаследуемые свойства будут иметь значение <code>initial</code>.</p> +<p>Из-за того, что к анонимным боксам невозможно применить селекторы, их невозможно изменить с помощью таблицы стилей. Это значит, что все наследуемые CSS-свойства для них будут иметь значение <code>inherit</code>, а все ненаследуемые свойства будут иметь значение <code>initial</code>.</p> <p>Блоки-контейнеры содержат либо только инлайн-боксы, либо только элементы блочного уровня. Но, как правило, документ содержит и те и другие. В этом случае анонимные блок-боксы создаются вокруг примыкающих к ним инлайн-боксов.</p> @@ -86,7 +86,7 @@ followed by more inline text.</code></pre> <h3 id="Элементы_инлайн-уровня_и_инлайн-боксы">Элементы инлайн-уровня и инлайн-боксы</h3> -<p>Элементы, которые называются <em>элементами инлайн-уровня</em> - это элементы, у которых вычисленное значение CSS свойства {{ cssxref("display") }} установлено в : <code>inline</code>, <code>inline-block</code> или <code>inline-table</code>. Визуально они не представляют собой какие-то отдельные блоки, но они они располагаются в одну линию с другим контентом инлайн-уровня. Например, содержание параграфа, с различным форматированием, таким как подчёркивание или картинка, состоит из элементов инлайн-уровня.</p> +<p>Элементы, которые называются <em>элементами инлайн-уровня</em> - это элементы, у которых вычисленное значение CSS-свойства {{ cssxref("display") }} установлено в : <code>inline</code>, <code>inline-block</code> или <code>inline-table</code>. Визуально они не представляют собой какие-то отдельные блоки, но они они располагаются в одну линию с другим контентом инлайн-уровня. Например, содержание параграфа, с различным форматированием, таким как подчёркивание или картинка, состоит из элементов инлайн-уровня.</p> <p><img alt="venn_inlines.png" class="internal lwrap" src="https://developer.mozilla.org/@api/deki/files/6008/=venn_inlines.png" style="float: left;"></p> diff --git a/files/ru/web/css/widows/index.html b/files/ru/web/css/widows/index.html index 46606134b4..e1a3aafde1 100644 --- a/files/ru/web/css/widows/index.html +++ b/files/ru/web/css/widows/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/widows <p>Свойство <code>widows</code> <a href="/en-US/docs/CSS" title="CSS">CSS</a> определяет какое минимальное количество линий должно быть оставлено в начале новой страницы на <code>paged</code> носителе. В типографике, «висячая» строка<strong> (</strong><em>widow)</em> это последняя строка параграфа, оказавшаяся в начале следующей страницы. Установка свойства <code>widows</code> позволяет предотвратить висячие строки.</p> -<p>На нестраничных носителях, таких как <code>screen</code>, CSS свойство <code>widows</code> не имеет эффекта.</p> +<p>На нестраничных носителях, таких как <code>screen</code>, CSS-свойство <code>widows</code> не имеет эффекта.</p> <p>{{cssinfo}}</p> diff --git a/files/ru/web/events/index.html b/files/ru/web/events/index.html index f84755f259..daa7c8848c 100644 --- a/files/ru/web/events/index.html +++ b/files/ru/web/events/index.html @@ -155,7 +155,7 @@ translation_of: Web/Events <table class="standard-table"> <caption> - <h3 id="События_CSS_анимации">События CSS анимации</h3> + <h3 id="События_CSS_анимации">События CSS-анимации</h3> </caption> <thead> <tr> @@ -166,19 +166,19 @@ translation_of: Web/Events <tbody> <tr> <td>{{Event("animationstart")}}</td> - <td><a href="/en-US/docs/CSS/CSS_animations">CSS анимация</a> началась.</td> + <td><a href="/en-US/docs/CSS/CSS_animations">CSS-анимация</a> началась.</td> </tr> <tr> <td>{{Event("animationcancel")}}</td> - <td><a href="/en-US/docs/CSS/CSS_animations">CSS анимация</a> прервалась.</td> + <td><a href="/en-US/docs/CSS/CSS_animations">CSS-анимация</a> прервалась.</td> </tr> <tr> <td>{{Event("animationend")}}</td> - <td><a href="/en-US/docs/CSS/CSS_animations">CSS анимация</a> завершена.</td> + <td><a href="/en-US/docs/CSS/CSS_animations">CSS-анимация</a> завершена.</td> </tr> <tr> <td>{{Event("animationiteration")}}</td> - <td><a href="/en-US/docs/CSS/CSS_animations">CSS анимация</a> повторяется.</td> + <td><a href="/en-US/docs/CSS/CSS_animations">CSS-анимация</a> повторяется.</td> </tr> </tbody> </table> diff --git a/files/ru/web/guide/graphics/index.html b/files/ru/web/guide/graphics/index.html index 638ddb7343..7a988030c7 100644 --- a/files/ru/web/guide/graphics/index.html +++ b/files/ru/web/guide/graphics/index.html @@ -4,7 +4,7 @@ slug: Web/Guide/Graphics translation_of: Web/Guide/Graphics original_slug: Web/Guide/Графика --- -<p>Современным веб-сайтам и веб-приложениям часто требуется отображать графику. Статические изображения легко отобразить с помощью элемента {{HTMLElement("img")}}, или с помощью CSS свойства {{cssxref("background-image")}}. Часто требуется создавать графику на лету, или модифицировать её каким-либо образом после. Как это проделать можно узнать в следующих статьях.</p> +<p>Современным веб-сайтам и веб-приложениям часто требуется отображать графику. Статические изображения легко отобразить с помощью элемента {{HTMLElement("img")}}, или с помощью CSS-свойства {{cssxref("background-image")}}. Часто требуется создавать графику на лету, или модифицировать её каким-либо образом после. Как это проделать можно узнать в следующих статьях.</p> <h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">2D графика</h2> diff --git a/files/ru/web/html/applying_color/index.html b/files/ru/web/html/applying_color/index.html index 1815d66f34..9d3a24da5a 100644 --- a/files/ru/web/html/applying_color/index.html +++ b/files/ru/web/html/applying_color/index.html @@ -1,17 +1,17 @@ --- -title: Применение цвета к HTML элементам с помощью CSS +title: Применение цвета к HTML-элементам с помощью CSS slug: Web/HTML/Applying_color translation_of: Web/HTML/Applying_color --- <div>{{HTMLRef}}</div> <div> -<p>Использование цвета - одна из фундаментальных форм человеческого восприятия, так дети экспериментируют с цветом ещё до того, как начинают осознанно рисовать. Возможно, именно поэтому цвет - одна из первых вещей, с которой люди хотят экспериментировать, изучая разработку веб-сайтов. С помощью <span class="seoSummary"><a href="/en-US/docs/Web/CSS">CSS</a></span>, существует множество способов присвоить цвет <a href="/en-US/docs/Web/HTML">HTML</a> элементам, чтобы придать им желаемый вид. <span class="seoSummary">Эта статья даёт базовые представления о всех способах </span>применения цвета к HTML элементам с помощью CSS<span class="seoSummary">.</span></p> +<p>Использование цвета - одна из фундаментальных форм человеческого восприятия, так дети экспериментируют с цветом ещё до того, как начинают осознанно рисовать. Возможно, именно поэтому цвет - одна из первых вещей, с которой люди хотят экспериментировать, изучая разработку веб-сайтов. С помощью <span class="seoSummary"><a href="/en-US/docs/Web/CSS">CSS</a></span>, существует множество способов присвоить цвет <a href="/en-US/docs/Web/HTML">HTML</a> элементам, чтобы придать им желаемый вид. <span class="seoSummary">Эта статья даёт базовые представления о всех способах </span>применения цвета к HTML-элементам с помощью CSS<span class="seoSummary">.</span></p> </div> -<p>К счастью, присвоить цвет к HTML элементу очень просто, и это можно сделать практически со всеми элементами.</p> +<p>К счастью, присвоить цвет к HTML-элементу очень просто, и это можно сделать практически со всеми элементами.</p> -<p>Мы затронем большинство из того, что нужно знать при использовании цвета, включая {{anch("Что может иметь цвет", "список элементов, которые могут иметь цвет, и необходимые для этого CSS свойства")}}, {{anch("Как задать цвет", "как задать цвет")}}, и как {{anch("Использование цвета", "использовать его в таблицах стилей и в JS скриптах")}}. Мы также рассмотрим как {{anch("Предоставляем возможность пользователю выбрать цвет", "предоставить возможность пользователю выбрать цвет")}}. </p> +<p>Мы затронем большинство из того, что нужно знать при использовании цвета, включая {{anch("Что может иметь цвет", "список элементов, которые могут иметь цвет, и необходимые для этого CSS-свойства")}}, {{anch("Как задать цвет", "как задать цвет")}}, и как {{anch("Использование цвета", "использовать его в таблицах стилей и в JS скриптах")}}. Мы также рассмотрим как {{anch("Предоставляем возможность пользователю выбрать цвет", "предоставить возможность пользователю выбрать цвет")}}. </p> <p>Завершим мы статью размышлениями на тему как {{anch("Using color wisely", "использовать цвет с умом")}}: как выбрать подходящий цвет, учитывая потребности людей с различными визуальными способностями.</p> @@ -19,7 +19,7 @@ translation_of: Web/HTML/Applying_color <p>На уровне элементов HTML, всему можно присвоить цвет. С точки зрения отдельных составляющих элементов, таких как текст, границы и т.д., существует ряд свойств CSS, с помощью которых можно присвоить цвет. </p> -<p>На фундаментальном уровне, свойство {{cssxref ("color")}} определяет цвет текста HTML элемента, а свойство {{cssxref ("background-color")}} - цвет фона элемента. Они работают практически для всех элементов.</p> +<p>На фундаментальном уровне, свойство {{cssxref ("color")}} определяет цвет текста HTML-элемента, а свойство {{cssxref ("background-color")}} - цвет фона элемента. Они работают практически для всех элементов.</p> <h3 id="Текст">Текст</h3> @@ -157,7 +157,7 @@ translation_of: Web/HTML/Applying_color </figure> </div> -<p>Значение компонента <em>оттенок</em> (H) цветовой модели HSL определяется углом при движении вдоль окружности цилиндра от красного через жёлтый, зелёный, голубой, синий и маджента, и заканчивая через 360° снова красным. Данное значение определяет базовый цвет. Его можно задать в любых единицах, поддерживаемых CSS свойством {{cssxref("<angle>")}}, а именно - в градусах (<code>deg</code>), радианах (<code>rad</code>), градиентах (<code>grad</code>) или поворотах (<code>turn</code>). Но компонент <em>оттенок </em>никак не влияет на то, насколько насыщенным, ярким или темным будет цвет.</p> +<p>Значение компонента <em>оттенок</em> (H) цветовой модели HSL определяется углом при движении вдоль окружности цилиндра от красного через жёлтый, зелёный, голубой, синий и маджента, и заканчивая через 360° снова красным. Данное значение определяет базовый цвет. Его можно задать в любых единицах, поддерживаемых CSS-свойством {{cssxref("<angle>")}}, а именно - в градусах (<code>deg</code>), радианах (<code>rad</code>), градиентах (<code>grad</code>) или поворотах (<code>turn</code>). Но компонент <em>оттенок </em>никак не влияет на то, насколько насыщенным, ярким или темным будет цвет.</p> <p>Компонент <em>насыщенность</em> (S) определяет количество конечного цвета из которого состоит указанный оттенок. Остальное определяется уровнем серого цвета, которое указывает компонент luminance/ lightness (L).</p> @@ -270,7 +270,7 @@ th { <p>Все довольно просто: первый {{HTMLElement("div")}} используется как обёртка (wrapper) содержимого, которое состоит из ещё двух <code><div></code>, каждый из которых содержит один параграф ({{HTMLElement("p")}}) и имеет свой стиль.</p> -<p>Все волшебство, как всегда, происходит в CSS, где мы и будем присваивать цвет к данным HTML элементам..</p> +<p>Все волшебство, как всегда, происходит в CSS, где мы и будем присваивать цвет к данным HTML-элементам..</p> <h4 id="CSS">CSS</h4> diff --git a/files/ru/web/html/attributes/index.html b/files/ru/web/html/attributes/index.html index 60708c8ea7..5f927d8c8e 100644 --- a/files/ru/web/html/attributes/index.html +++ b/files/ru/web/html/attributes/index.html @@ -422,7 +422,7 @@ translation_of: Web/HTML/Attributes <td> <p>Этот атрибут устанавливает цвет текста, используя либо название цвета, либо шестнадцатеричный формат #RRGGBB.</p> - <p>Примечание: это устаревший атрибут. Используйте CSS свойство {{ Cssxref("color") }}.</p> + <p>Примечание: это устаревший атрибут. Используйте CSS-свойство {{ Cssxref("color") }}.</p> </td> </tr> <tr> @@ -482,7 +482,7 @@ translation_of: Web/HTML/Attributes даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></p> </td> <td> - <p>Позволяет прикрепить произвольные атрибуты для HTML элемента.</p> + <p>Позволяет прикрепить произвольные атрибуты для HTML-элемента.</p> </td> </tr> <tr> @@ -652,5 +652,5 @@ translation_of: Web/HTML/Attributes <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li><a href="/ru/docs/HTML/Element" title="/ru/docs/HTML/Element">HTML элементы</a></li> + <li><a href="/ru/docs/HTML/Element" title="/ru/docs/HTML/Element">HTML-элементы</a></li> </ul> diff --git a/files/ru/web/html/element/b/index.html b/files/ru/web/html/element/b/index.html index 3d08e60bb5..c6cf6a937a 100644 --- a/files/ru/web/html/element/b/index.html +++ b/files/ru/web/html/element/b/index.html @@ -3,7 +3,7 @@ title: <b> slug: Web/HTML/Element/b translation_of: Web/HTML/Element/b --- -<p><strong>HTML элемент <code><b></code> </strong> является частью текста стилистически отличающейся от нормального текста, не носящий какого-либо специального значения или важности, и как правило выделен жирным шрифтом.</p> +<p><strong>HTML-элемент <code><b></code> </strong> является частью текста стилистически отличающейся от нормального текста, не носящий какого-либо специального значения или важности, и как правило выделен жирным шрифтом.</p> <table class="properties"> <tbody> diff --git a/files/ru/web/html/element/base/index.html b/files/ru/web/html/element/base/index.html index 8f97d94d95..ccda66cde3 100644 --- a/files/ru/web/html/element/base/index.html +++ b/files/ru/web/html/element/base/index.html @@ -10,7 +10,7 @@ translation_of: Web/HTML/Element/base --- <p id="Summary">{{HTMLRef}}</p> -<p><strong>HTML элемент</strong> <strong><code><base></code> </strong>определяет основной адрес (URL), используемый для всех относительных адресов (URLs) в документе. Может быть только один <strong><code><base></code></strong> элемент в одном документе. <br> +<p><strong>HTML-элемент</strong> <strong><code><base></code> </strong>определяет основной адрес (URL), используемый для всех относительных адресов (URLs) в документе. Может быть только один <strong><code><base></code></strong> элемент в одном документе. <br> Основной адрес (URL) документа можно запросить скриптом используя {{domxref('document.baseURI')}}.</p> <table class="properties"> diff --git a/files/ru/web/html/element/bdi/index.html b/files/ru/web/html/element/bdi/index.html index 154ecac965..953c973ba9 100644 --- a/files/ru/web/html/element/bdi/index.html +++ b/files/ru/web/html/element/bdi/index.html @@ -11,11 +11,11 @@ translation_of: Web/HTML/Element/bdi --- <h2 id="Описание">Описание</h2> -<p><strong>HTML элемент <code><bdi></code></strong><em> </em>(<em>bidirectional isolation</em>, или изоляция двунаправленности [текста]) изолирует от окружающего текста текстовый фрагмент, направление в котором может отличаться от направления окружающего текста (но не обязательно отличается).</p> +<p><strong>HTML-элемент <code><bdi></code></strong><em> </em>(<em>bidirectional isolation</em>, или изоляция двунаправленности [текста]) изолирует от окружающего текста текстовый фрагмент, направление в котором может отличаться от направления окружающего текста (но не обязательно отличается).</p> <p>Этот элемент полезен при встраивании текста с неизвестным направлением (например, из базы данных) внутрь текста с заданным направлением.</p> -<p class="note">Хотя тот же эффект может быть достигнут применением CSS правила {{cssxref("unicode-bidi")}}<code>: isolate</code> к элементу {{HTMLElement("span")}} или другому элементу форматирования текста, семантическое значение передаётся только с помощью элемента <code><bdi></code>. Тем более, что браузеры могут игнорировать стили. В этом случае, текст будет отображён корректно при использовании HTML элемента, и некорректно при использовании только CSS стилей.</p> +<p class="note">Хотя тот же эффект может быть достигнут применением CSS правила {{cssxref("unicode-bidi")}}<code>: isolate</code> к элементу {{HTMLElement("span")}} или другому элементу форматирования текста, семантическое значение передаётся только с помощью элемента <code><bdi></code>. Тем более, что браузеры могут игнорировать стили. В этом случае, текст будет отображён корректно при использовании HTML-элемента, и некорректно при использовании только CSS стилей.</p> <table class="properties"> <tbody> diff --git a/files/ru/web/html/element/caption/index.html b/files/ru/web/html/element/caption/index.html index dfef5ffe40..d2aafc32d2 100644 --- a/files/ru/web/html/element/caption/index.html +++ b/files/ru/web/html/element/caption/index.html @@ -145,8 +145,8 @@ table, th, td { <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li>Другие связанные с таблицей HTML элементы: {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> - <li>CSS свойства, которые могут быть применены для стилизации элемента {{HTMLElement("caption")}}: + <li>Другие связанные с таблицей HTML-элементы: {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> + <li>CSS-свойства, которые могут быть применены для стилизации элемента {{HTMLElement("caption")}}: <ul> <li>{{cssxref("text-align")}}, {{cssxref("caption-side")}}.</li> </ul> diff --git a/files/ru/web/html/element/code/index.html b/files/ru/web/html/element/code/index.html index 9034056b6c..c933cfcacd 100644 --- a/files/ru/web/html/element/code/index.html +++ b/files/ru/web/html/element/code/index.html @@ -68,7 +68,7 @@ input field so the user can, for example, copy or delete the text.</p> <p>Для представления нескольких строк кода, оберните элемент <code><code></code> в элемент {{HTMLElement("pre")}}. Элемент <code><code></code> сам по себе представляет только один элемент кода или строку кода.</p> -<p>CSS правило может быть определено для того, чтобы селектор <code>code</code> переопределил шрифт браузера по умолчанию. Предпочтения, установленные пользователем, могут иметь приоритет над указанными CSS.</p> +<p>CSS-правило может быть определено для того, чтобы селектор <code>code</code> переопределил шрифт браузера по умолчанию. Предпочтения, установленные пользователем, могут иметь приоритет над указанными CSS.</p> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/html/element/col/index.html b/files/ru/web/html/element/col/index.html index 064802ce09..6827588630 100644 --- a/files/ru/web/html/element/col/index.html +++ b/files/ru/web/html/element/col/index.html @@ -11,7 +11,7 @@ tags: translation_of: Web/HTML/Element/col --- <p>{{HTMLRef}}<br> - <strong>HTML элемент</strong> <strong><code><col></code></strong> определяет столбец в таблице и используется для определения общей семантики на всех ячейках. Обычно он находится в элементе {{HTMLElement("colgroup")}}.</p> + <strong>HTML-элемент</strong> <strong><code><col></code></strong> определяет столбец в таблице и используется для определения общей семантики на всех ячейках. Обычно он находится в элементе {{HTMLElement("colgroup")}}.</p> <p>Этот элемент позволяет стилизировать столбцы с использованием CSS, но только несколько атрибутов будут иметь эффект на столбец (<a href="https://www.w3.org/TR/CSS21/tables.html#columns">смотри спецификацию CSS 2.1</a>).</p> diff --git a/files/ru/web/html/element/form/index.html b/files/ru/web/html/element/form/index.html index 4541d113fb..3d71822ef4 100644 --- a/files/ru/web/html/element/form/index.html +++ b/files/ru/web/html/element/form/index.html @@ -34,7 +34,7 @@ translation_of: Web/HTML/Element/form <h2 id="Attributes" name="Attributes">Атрибуты</h2> -<p>Как и все HTML элементы, этот элемент поддерживает <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">глобальные атрибуты</a>.</p> +<p>Как и все HTML-элементы, этот элемент поддерживает <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">глобальные атрибуты</a>.</p> <dl> <dt>{{htmlattrdef("accept")}} {{HTMLVersionInline(4)}} {{obsolete_inline}}</dt> diff --git a/files/ru/web/html/element/heading_elements/index.html b/files/ru/web/html/element/heading_elements/index.html index ba4e038b90..ba5d86e45e 100644 --- a/files/ru/web/html/element/heading_elements/index.html +++ b/files/ru/web/html/element/heading_elements/index.html @@ -1,9 +1,9 @@ --- -title: '<h1>–<h6>: HTML элементы заголовков секций' +title: '<h1>–<h6>: HTML-элементы заголовков секций' slug: Web/HTML/Element/Heading_Elements translation_of: Web/HTML/Element/Heading_Elements --- -<p id="Summary"><span class="seoSummary"><strong>HTML элементы <code><h1></code>–<code><h6></code></strong> представляют собой 6 уровней заголовков секций. <code><h1></code> это наибольший заголовок и<code><h6></code> - наименьший</span></p> +<p id="Summary"><span class="seoSummary"><strong>HTML-элементы <code><h1></code>–<code><h6></code></strong> представляют собой 6 уровней заголовков секций. <code><h1></code> это наибольший заголовок и<code><h6></code> - наименьший</span></p> <table class="properties"> <tbody> diff --git a/files/ru/web/html/element/img/index.html b/files/ru/web/html/element/img/index.html index 27a34a7338..88fd5d280f 100644 --- a/files/ru/web/html/element/img/index.html +++ b/files/ru/web/html/element/img/index.html @@ -29,7 +29,7 @@ translation_of: Web/HTML/Element/img <ul> <li>управление Referrer/CORS в целях безопасности. Смотрите ниже атрибуты <code>crossorigin</code> и <code>referrerpolicy</code>;</li> - <li>настройка {{glossary("Intrinsic Size", "внутреннего размера")}} с использованием <code>width</code> и <code>hight</code>, которые полезны, когда вы хотите задать пространство занимаемое изображением, чтобы обеспечить стабильность макета страницы перед его загрузкой;</li> + <li>настройка {{glossary("Intrinsic Size", "внутреннего размера")}} с использованием <code>width</code> и <code>height</code>, которые полезны, когда вы хотите задать пространство занимаемое изображением, чтобы обеспечить стабильность макета страницы перед его загрузкой;</li> <li>адаптивные изображения рекомендуется использовать с атрибутами <code>sizes</code> и <code>srcset</code> (смотрите также элемент {{htmlelement("picture")}} и наше руководство "<a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Адаптивные изображения</a>").</li> </ul> diff --git a/files/ru/web/html/element/input/range/index.html b/files/ru/web/html/element/input/range/index.html index 68b81356e4..8fc4558932 100644 --- a/files/ru/web/html/element/input/range/index.html +++ b/files/ru/web/html/element/input/range/index.html @@ -131,7 +131,7 @@ translation_of: Web/HTML/Element/input/range <dl> <dt>{{htmlattrdef("orient")}} {{non-standard_inline}}</dt> - <dd id="orient-include">Похоже на -moz-orient не стандартное CSS свойство влияющее на {{htmlelement('progress')}} и{{htmlelement('meter')}} элементы, <code>orient</code> атрибут определяем ориентацию слайдера. Значение <code>horizontal</code>, значит что слайдер будет отображён горизонтально, а <code>vertical</code>- что вертикально .</dd> + <dd id="orient-include">Похоже на -moz-orient не стандартное CSS-свойство влияющее на {{htmlelement('progress')}} и{{htmlelement('meter')}} элементы, <code>orient</code> атрибут определяем ориентацию слайдера. Значение <code>horizontal</code>, значит что слайдер будет отображён горизонтально, а <code>vertical</code>- что вертикально .</dd> </dl> <div class="blockIndicator note"> diff --git a/files/ru/web/html/element/kbd/index.html b/files/ru/web/html/element/kbd/index.html index bcb2759bd5..bd9fb3e954 100644 --- a/files/ru/web/html/element/kbd/index.html +++ b/files/ru/web/html/element/kbd/index.html @@ -3,7 +3,7 @@ title: '<kbd>: Элемент ввода с клавиатуры' slug: Web/HTML/Element/kbd translation_of: Web/HTML/Element/kbd --- -<p><span class="seoSummary"><strong>HTML элемент ввода с клавиатуры</strong> (<strong><code><kbd></code></strong>) указывает на то, что текст внутри элемента описывает пользовательский ввод с клавиатуры, голосовой ввод или ввод с использованием любого другого типа устройств ввода текста.</span> По общему соглашению, {{Glossary("user agent")}} использует моноширинный шрифт для отображения содержимого элемента <code><kbd></code> по умолчанию, хотя это и не указывается HTML стандартом явно.</p> +<p><span class="seoSummary"><strong>HTML-элемент ввода с клавиатуры</strong> (<strong><code><kbd></code></strong>) указывает на то, что текст внутри элемента описывает пользовательский ввод с клавиатуры, голосовой ввод или ввод с использованием любого другого типа устройств ввода текста.</span> По общему соглашению, {{Glossary("user agent")}} использует моноширинный шрифт для отображения содержимого элемента <code><kbd></code> по умолчанию, хотя это и не указывается HTML стандартом явно.</p> <p><code><kbd></code> можно использовать в различных комбинациях с {{HTMLElement("samp")}} (Sample Output) элементом для отображения различных форм ввода с клавиатуры или ввода, базирующегося на визуальных сигналах.</p> diff --git a/files/ru/web/html/element/label/index.html b/files/ru/web/html/element/label/index.html index 1363f779d5..660264e853 100644 --- a/files/ru/web/html/element/label/index.html +++ b/files/ru/web/html/element/label/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTML/Element/label --- <div>{{HTMLRef}}</div> -<p><strong>HTML элемент <code><label></code> </strong>представляет собой подпись к элементу пользовательского интерфейса.</p> +<p><strong>HTML-элемент <code><label></code> </strong>представляет собой подпись к элементу пользовательского интерфейса.</p> <table class="properties"> <tbody> diff --git a/files/ru/web/html/element/li/index.html b/files/ru/web/html/element/li/index.html index e8c10e59c1..5bed3c4c10 100644 --- a/files/ru/web/html/element/li/index.html +++ b/files/ru/web/html/element/li/index.html @@ -71,7 +71,7 @@ translation_of: Web/HTML/Element/li </ul> Этот атрибут переопределяет тип унаследованный от родительского элемента {{HTMLElement("ol")}} или любого другого. - <div class="note"><strong>Примечание к использованию:</strong> Этот атрибут был убран: используйте CSS свойство {{cssxref("list-style-type")}} взамен.</div> + <div class="note"><strong>Примечание к использованию:</strong> Этот атрибут был убран: используйте CSS-свойство {{cssxref("list-style-type")}} взамен.</div> </dd> </dl> @@ -146,8 +146,8 @@ translation_of: Web/HTML/Element/li <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li>Остальные списковые HTML элементы: {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}} и устаревший {{HTMLElement("dir")}};</li> - <li>CSS свойства, которые были бы полезны для стилизации <code><li></code> элементов: + <li>Остальные списковые HTML-элементы: {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}} и устаревший {{HTMLElement("dir")}};</li> + <li>CSS-свойства, которые были бы полезны для стилизации <code><li></code> элементов: <ul> <li>свойство {{cssxref("list-style")}}, для выбора стиля маркера/порядкового номера,</li> <li><a href="/ru/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS счётчики</a>, для обработки сложных вложенных списков,</li> diff --git a/files/ru/web/html/element/menu/index.html b/files/ru/web/html/element/menu/index.html index 7d0b236c41..86545b3654 100644 --- a/files/ru/web/html/element/menu/index.html +++ b/files/ru/web/html/element/menu/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTML/Element/menu --- <p>{{HTMLRef}}{{SeeCompatTable}}</p> -<p><strong>HTML элемент <code><menu></code></strong> представляет группу команд, которые пользователь может выполнить или активировать. Он включает как меню-списки, которые могут отображаться в верхней части экрана, так и <a href="/en-US/docs/Web/HTML/Element/menu#Context_menu"> контекстные меню</a>, например, такие, что могут появиться под кнопкой после нажатия.</p> +<p><strong>HTML-элемент <code><menu></code></strong> представляет группу команд, которые пользователь может выполнить или активировать. Он включает как меню-списки, которые могут отображаться в верхней части экрана, так и <a href="/en-US/docs/Web/HTML/Element/menu#Context_menu"> контекстные меню</a>, например, такие, что могут появиться под кнопкой после нажатия.</p> <table class="properties"> <tbody> diff --git a/files/ru/web/html/element/meta/index.html b/files/ru/web/html/element/meta/index.html index 0a9dc58d64..2e14b041ce 100644 --- a/files/ru/web/html/element/meta/index.html +++ b/files/ru/web/html/element/meta/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTML/Element/meta --- <div>{{HTMLRef}}</div> -<p><strong>HTML элемент <code><meta></code></strong> представляет такие {{Glossary("Metadata","метаданные")}}, которые не могут быть представлены другими HTML-метатегами, такими как {{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} или {{HTMLElement("title")}}.</p> +<p><strong>HTML-элемент <code><meta></code></strong> представляет такие {{Glossary("Metadata","метаданные")}}, которые не могут быть представлены другими HTML-метатегами, такими как {{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} или {{HTMLElement("title")}}.</p> <table class="properties"> <tbody> @@ -88,7 +88,7 @@ translation_of: Web/HTML/Element/meta <dt><code>"Content-Security-Policy"</code></dt> <dd>Это значение позволит администратору веб-сайта определить политику содержания для обслуживаемых ресурсов. За некоторыми исключениями, политика в основном включают в себя указание происхождения сервера и конечные точки сценария. Это помогает предотвратить атаки межсайтового скриптинга.</dd> <dt><code>"content-type"</code> {{obsolete_inline}}</dt> - <dd>Этот атрибут определяет <a href="/en-US/docs/MIME">MIME type</a> документа. За ним следует синтаксис такой же как и в поле заголовка объекта содержимого HTTPI, однако как и внутри HTML элемента, большинство этих значений не доступно.<br> + <dd>Этот атрибут определяет <a href="/en-US/docs/MIME">MIME type</a> документа. За ним следует синтаксис такой же как и в поле заголовка объекта содержимого HTTPI, однако как и внутри HTML-элемента, большинство этих значений не доступно.<br> Поэтому допустимым синтаксисом для его содержимого является литеральная строка '<code>text/html</code>', за которой следует набор символов со следующим синтаксисом: '<code>; charset=</code><em><code>IANAcharset</code></em>' где <code>IANAcharset</code> это предпочтительное<em> MIME имя</em> для набора символов, который определяется как<a class="external" href="https://www.iana.org/assignments/character-sets"> IANA.</a> <div class="note"><strong>Замечания:</strong> <ul> diff --git a/files/ru/web/html/element/ol/index.html b/files/ru/web/html/element/ol/index.html index 91ead417f1..0dd6ac43c4 100644 --- a/files/ru/web/html/element/ol/index.html +++ b/files/ru/web/html/element/ol/index.html @@ -204,7 +204,7 @@ translation_of: Web/HTML/Element/ol <ul> <li>Другие элементы HTML списка: {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}}</li> - <li>CSS свойства, которые могут быть полезны для стилизации <code><ol></code> элемента: + <li>CSS-свойства, которые могут быть полезны для стилизации <code><ol></code> элемента: <ul> <li>свойство {{CSSxRef("list-style")}}, для порядковых показов</li> <li><a href="/ru/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS счётчики</a>, для более сложных вложенных списков</li> diff --git a/files/ru/web/html/element/option/index.html b/files/ru/web/html/element/option/index.html index 86efde49f4..deb839e4a4 100644 --- a/files/ru/web/html/element/option/index.html +++ b/files/ru/web/html/element/option/index.html @@ -8,7 +8,7 @@ translation_of: Web/HTML/Element/option --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary"><strong>HTML элемент <code><option></code></strong> используется для определения пункта списка контейнера {{HTMLElement("select")}}, элемента {{HTMLElement("optgroup")}}, или элемента {{HTMLElement("datalist")}}. Элемент <code><option></code> может представлять раздел меню всплывающих окон и других перечней или списков HTML документа.</span></p> +<p><span class="seoSummary"><strong>HTML-элемент <code><option></code></strong> используется для определения пункта списка контейнера {{HTMLElement("select")}}, элемента {{HTMLElement("optgroup")}}, или элемента {{HTMLElement("datalist")}}. Элемент <code><option></code> может представлять раздел меню всплывающих окон и других перечней или списков HTML документа.</span></p> <table class="properties"> <tbody> @@ -41,7 +41,7 @@ translation_of: Web/HTML/Element/option <h2 id="Attributes" name="Attributes">Атрибуты</h2> -<p>Как и все HTML элементы, этот элемент поддерживает <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">глобальные атрибуты</a>.</p> +<p>Как и все HTML-элементы, этот элемент поддерживает <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">глобальные атрибуты</a>.</p> <dl> <dt>{{htmlattrdef("disabled")}} -- отключён(о)</dt> diff --git a/files/ru/web/html/element/ruby/index.html b/files/ru/web/html/element/ruby/index.html index 310b8b48b8..dcbce9afcf 100644 --- a/files/ru/web/html/element/ruby/index.html +++ b/files/ru/web/html/element/ruby/index.html @@ -9,7 +9,7 @@ tags: - Web translation_of: Web/HTML/Element/ruby --- -<p><code><font face="Open Sans, Arial, sans-serif">HTML элемент</font><strong><ruby></strong></code> предназначен для добавления небольшой аннотации сверху или снизу от заданного текста. Такая форма записи преимущественно используется для идеографической письменности вроде китайского языка, но может применяться и для других языков, если требуется написать один текст над другим.</p> +<p><code><font face="Open Sans, Arial, sans-serif">HTML-элемент</font><strong><ruby></strong></code> предназначен для добавления небольшой аннотации сверху или снизу от заданного текста. Такая форма записи преимущественно используется для идеографической письменности вроде китайского языка, но может применяться и для других языков, если требуется написать один текст над другим.</p> <table class="properties"> <tbody> diff --git a/files/ru/web/html/element/slot/index.html b/files/ru/web/html/element/slot/index.html index c0da7f7050..ddf06556c7 100644 --- a/files/ru/web/html/element/slot/index.html +++ b/files/ru/web/html/element/slot/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTML/Element/slot --- <p>{{HTMLRef}}</p> -<p><span class="seoSummary">HTML элемент <code><slot></code> является частью набора технологии <a href="/en-US/docs/Web/Web_Components">Web Components</a>, является заполнителем внутри веб компонента, который можно заполнить собственной разметкой, которая позволяет создавать отдельные деревья DOM и представлять их вместе.</span></p> +<p><span class="seoSummary">HTML-элемент <code><slot></code> является частью набора технологии <a href="/en-US/docs/Web/Web_Components">Web Components</a>, является заполнителем внутри веб компонента, который можно заполнить собственной разметкой, которая позволяет создавать отдельные деревья DOM и представлять их вместе.</span></p> <table class="properties"> <tbody> diff --git a/files/ru/web/html/element/td/index.html b/files/ru/web/html/element/td/index.html index 1aff1b6a4e..1d4e235444 100644 --- a/files/ru/web/html/element/td/index.html +++ b/files/ru/web/html/element/td/index.html @@ -3,7 +3,7 @@ title: '<td>: элемент ячейки таблицы данных' slug: Web/HTML/Element/td translation_of: Web/HTML/Element/td --- -<p><strong>HTML элемент <code><td></code></strong> определяет ячейку таблицы которая содержит данные. Участвует в <em>табличной модели</em>.</p> +<p><strong>HTML-элемент <code><td></code></strong> определяет ячейку таблицы которая содержит данные. Участвует в <em>табличной модели</em>.</p> <table class="properties"> <tbody> @@ -59,7 +59,7 @@ translation_of: Web/HTML/Element/td <div class="note"><strong>Примечание: </strong>Не используйте этот атрибут, он устарел (не поддерживается) в последней версии стандарта. <ul> - <li>Чтобы добиться такого же эффекта как при <code>left</code>, <code>center</code>, <code>right</code> или <code>justify</code> значениях, используйте их как параметры CSS свойства {{cssxref("text-align")}}.</li> + <li>Чтобы добиться такого же эффекта как при <code>left</code>, <code>center</code>, <code>right</code> или <code>justify</code> значениях, используйте их как параметры CSS-свойства {{cssxref("text-align")}}.</li> <li>Чтобы добиться эффекта как <code>char</code> значение в CSS3, вы можете использовать значение {{htmlattrxref("char", "td")}} как значение свойства {{cssxref("text-align")}} {{unimplemented_inline}}.</li> </ul> </div> @@ -156,11 +156,11 @@ translation_of: Web/HTML/Element/td <li>и <code>top</code>, который будет выравнивать текст как можно ближе к верхней части ячейки.</li> </ul> - <div class="note"><strong>Примечание: </strong>Не используйте этот атрибут, он устарел (не поддерживается) в последней версии стандарта: вместо этого используйте CSS свойство {{cssxref("vertical-align")}}.</div> + <div class="note"><strong>Примечание: </strong>Не используйте этот атрибут, он устарел (не поддерживается) в последней версии стандарта: вместо этого используйте CSS-свойство {{cssxref("vertical-align")}}.</div> </dd> <dt>{{htmlattrdef("width")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> <dd>Этот атрибут устанавливает рекомендуемую ширину ячейки. Свойства <a href="/en-US/docs/Web/API/HTMLTableElement/cellSpacing">cellspacing</a> и <a href="/en-US/docs/Web/API/HTMLTableElement/cellPadding">cellpadding</a> могут добавить дополнительное пространство и ширина элемента {{HTMLElement("col")}} может иметь некоторый эффект. Обычно если ширина столбца слишком узкая чтобы показать конкретную ячейку должным образом, она может быть расширена при отображении. - <div class="note"><strong>Примечание: </strong>Не используйте этот атрибут, он устарел в последней версии стандарта: вместо этого используйте CSS свойство {{cssxref("width")}}.</div> + <div class="note"><strong>Примечание: </strong>Не используйте этот атрибут, он устарел в последней версии стандарта: вместо этого используйте CSS-свойство {{cssxref("width")}}.</div> </dd> </dl> @@ -199,7 +199,7 @@ translation_of: Web/HTML/Element/td <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li>Другие табличные HTML элементы: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li> + <li>Другие табличные HTML-элементы: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li> </ul> <p>{{HTMLRef}}</p> diff --git a/files/ru/web/html/element/ul/index.html b/files/ru/web/html/element/ul/index.html index 3b398d94e5..ad10e21735 100644 --- a/files/ru/web/html/element/ul/index.html +++ b/files/ru/web/html/element/ul/index.html @@ -171,8 +171,8 @@ translation_of: Web/HTML/Element/ul <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li>Остальные списковые HTML элементы: {{ HTMLElement("ol") }}, {{ HTMLElement("li") }}, {{ HTMLElement("menu") }} и устаревший {{ HTMLElement("dir") }};</li> - <li>CSS свойства, которые могут быть полезны для стилизации <code><ul></code> элементов: + <li>Остальные списковые HTML-элементы: {{ HTMLElement("ol") }}, {{ HTMLElement("li") }}, {{ HTMLElement("menu") }} и устаревший {{ HTMLElement("dir") }};</li> + <li>CSS-свойства, которые могут быть полезны для стилизации <code><ul></code> элементов: <ul> <li>свойство <a href="/en-US/docs/Web/CSS/list-style">list-style</a>, полезное для выбора способа отображения маркеров,</li> <li><a href="/ru/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS счётчики</a>, для более сложных вложенных списков,</li> diff --git a/files/ru/web/html/element/video/index.html b/files/ru/web/html/element/video/index.html index 1d8d520b82..7fd0a0bb6c 100644 --- a/files/ru/web/html/element/video/index.html +++ b/files/ru/web/html/element/video/index.html @@ -39,7 +39,7 @@ translation_of: Web/HTML/Element/video <h2 id="Атрибуты">Атрибуты</h2> -<p><span style="background-color: #ffffff; color: #4d4e53; display: inline !important; float: none; font-family: open sans,arial,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;">Как и все HTML элементы, этот элемент поддерживает</span> <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> +<p><span style="background-color: #ffffff; color: #4d4e53; display: inline !important; float: none; font-family: open sans,arial,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;">Как и все HTML-элементы, этот элемент поддерживает</span> <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> <dl> <dt>{{htmlattrdef("autoplay")}}</dt> diff --git a/files/ru/web/html/global_attributes/index.html b/files/ru/web/html/global_attributes/index.html index bc1d9b8ed2..6ca8cde1bc 100644 --- a/files/ru/web/html/global_attributes/index.html +++ b/files/ru/web/html/global_attributes/index.html @@ -6,10 +6,10 @@ translation_of: Web/HTML/Global_attributes <div>{{HTMLSidebar("Global_attributes")}}</div> <div class="summary"> -<p><strong>Глобальные атрибуты </strong>—<strong> это атрибуты общие для всех HTML элементов</strong>; они могут использоваться всеми элементами, хотя на некоторые элементы могут не оказывать влияния.</p> +<p><strong>Глобальные атрибуты </strong>—<strong> это атрибуты общие для всех HTML-элементов</strong>; они могут использоваться всеми элементами, хотя на некоторые элементы могут не оказывать влияния.</p> </div> -<p>Глобальные атрибуты могут быть указаны для любых <a href="/ru/docs/Web/HTML/Element">элементов HTML</a>, <em>даже для тех, которые не указаны в стандарте.</em> Это значит, что все нестандартные элементы должны допускать эти атрибуты, даже если использование этих элементов означает, что документ больше не является HTML5-совместимым. Например, HTML5-совместимые браузеры скрывают содержимое, помеченное как <code><foo hidden>...<foo></code><code>, хотя </code><code><foo></code> не является верным HTML элементом.</p> +<p>Глобальные атрибуты могут быть указаны для любых <a href="/ru/docs/Web/HTML/Element">элементов HTML</a>, <em>даже для тех, которые не указаны в стандарте.</em> Это значит, что все нестандартные элементы должны допускать эти атрибуты, даже если использование этих элементов означает, что документ больше не является HTML5-совместимым. Например, HTML5-совместимые браузеры скрывают содержимое, помеченное как <code><foo hidden>...<foo></code><code>, хотя </code><code><foo></code> не является верным HTML-элементом.</p> <p>В дополнение к <em>основным </em>для HTML глобальным атрибутам, также существуют следующие глобальные атрибуты:</p> diff --git a/files/ru/web/http/cors/index.html b/files/ru/web/http/cors/index.html index c6031dbb96..a4d1f6204f 100644 --- a/files/ru/web/http/cors/index.html +++ b/files/ru/web/http/cors/index.html @@ -46,7 +46,7 @@ translation_of: Web/HTTP/CORS <p>Здесь мы рассмотрим три сценария, которые иллюстрируют как Cross-Origin Resource Sharing работает. Каждый сценарий использует объект {{domxref("XMLHttpRequest")}}, который может быть использован для межсайтового взаимодействия, в любом, поддерживающем данный объект, браузере.</p> -<p>Фрагменты JavaScript кода, включённые в эти секции (а также фрагменты кода, отвечающие за корректную обработку межсерверных запросов, которые запускаются на сервере) могут быть испытаны "в действии" на <a class="external" href="http://arunranga.com/examples/access-control/">http://arunranga.com/examples/access-control/</a>, и будут работать в браузерах, которые поддерживают {{domxref("XMLHttpRequest")}}.</p> +<p>Фрагменты JavaScript-кода, включённые в эти секции (а также фрагменты кода, отвечающие за корректную обработку межсерверных запросов, которые запускаются на сервере) могут быть испытаны "в действии" на <a class="external" href="http://arunranga.com/examples/access-control/">http://arunranga.com/examples/access-control/</a>, и будут работать в браузерах, которые поддерживают {{domxref("XMLHttpRequest")}}.</p> <p>Обсуждение Cross-Origin Resource Sharing с точки зрения сервера (включая фрагменты кода на PHP) может быть найдено в статье <a class="internal" href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Server-Side Access Control (CORS)</a>.</p> diff --git a/files/ru/web/http/csp/index.html b/files/ru/web/http/csp/index.html index 3598af01de..9141ba8341 100644 --- a/files/ru/web/http/csp/index.html +++ b/files/ru/web/http/csp/index.html @@ -20,7 +20,7 @@ translation_of: Web/HTTP/CSP <h3 id="Межсайтовый_скриптинг">Межсайтовый скриптинг</h3> -<p>Основная цель создания CSP заключается в устранении XSS атак и сборе данных об их попытках. XSS атаки используют доверие браузера к контенту, полученному с сервера. Зловредные скрипты исполняются в браузере жертвы, поскольку браузер доверяет источнику, даже когда скрипт поставляется не оттуда, откуда кажется.</p> +<p>Основная цель создания CSP заключается в устранении XSS-атак и сборе данных об их попытках. XSS-атаки используют доверие браузера к контенту, полученному с сервера. Зловредные скрипты исполняются в браузере жертвы, поскольку браузер доверяет источнику, даже когда скрипт поставляется не оттуда, откуда кажется.</p> <p>CSP даёт возможность администраторам серверов снизить или полностью устранить вектора, по которым злоумышленники могут провести XSS, с помощью определения доменов, которые браузер клиента должен считать доверенными источниками исполняемых скриптов. В таком случае, браузер, совместимый с CSP, будет исполнять только те скрипты, которые были получены из списка разрешённых источников, и игнорировать прочие (в т.ч. встраиваемые скрипты и обработчики событий, указанные непосредственно в HTML-атрибутах).</p> diff --git a/files/ru/web/http/headers/content-language/index.html b/files/ru/web/http/headers/content-language/index.html index 5f2799b5ef..f44696fb43 100644 --- a/files/ru/web/http/headers/content-language/index.html +++ b/files/ru/web/http/headers/content-language/index.html @@ -58,7 +58,7 @@ Content-Language: de-DE, en-CA <h3 id="Указание_использованного_языка_документа">Указание использованного языка документа</h3> -<p>Глобальный атрибут <code><a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a></code> используется на HTML элементах для указания языка всего HTML документа или его частей.</p> +<p>Глобальный атрибут <code><a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a></code> используется на HTML-элементах для указания языка всего HTML документа или его частей.</p> <pre class="brush: html"><html lang="de"></pre> diff --git a/files/ru/web/http/overview/index.html b/files/ru/web/http/overview/index.html index ef2663f832..8b35300ebd 100644 --- a/files/ru/web/http/overview/index.html +++ b/files/ru/web/http/overview/index.html @@ -10,13 +10,13 @@ translation_of: Web/HTTP/Overview --- <div>{{HTTPSidebar}}</div> -<p class="summary"><strong>HTTP</strong> — это {{glossary("протокол")}}, позволяющий получать различные ресурсы, например HTML-документы. Протокол HTTP лежит в основе обмена данными в Интернете. HTTP является протоколом клиент-серверного взаимодействия, что означает инициирование запросов к серверу самим получателем, обычно веб-браузером (web-browser). Полученный итоговый документ будет (может) состоять из различных поддокументов являющихся частью итогового документа: например, из отдельно полученного текста, описания структуры документа, изображений, видео-файлов, скриптов и многого другого.</p> +<p class="summary"><strong>HTTP</strong> — это {{glossary("протокол")}}, позволяющий получать различные ресурсы, например HTML-документы. Протокол HTTP лежит в основе обмена данными в Интернете. HTTP является протоколом клиент-серверного взаимодействия, что означает инициирование запросов к серверу самим получателем, обычно веб-браузером (web-browser). Полученный итоговый документ будет (может) состоять из различных поддокументов, являющихся частью итогового документа: например, из отдельно полученного текста, описания структуры документа, изображений, видео-файлов, скриптов и многого другого.</p> <p><img alt="A Web document is the composition of different resources" src="https://mdn.mozillademos.org/files/13677/Fetching_a_page.png" style="height: 319px; width: 545px;"></p> <p>Клиенты и серверы взаимодействуют, обмениваясь одиночными сообщениями (а не потоком данных). Сообщения, отправленные клиентом, обычно веб-браузером, называются <em>запросами</em>, а сообщения, отправленные сервером, называются <em>ответами</em>.</p> -<p><img alt="HTTP as an application layer protocol, on top of TCP (transport layer) and IP (network layer) and below the presentation layer." src="https://mdn.mozillademos.org/files/13673/HTTP%20&%20layers.png" style="float: left; height: 299px; padding-bottom: 15px; padding-right: 20px; width: 418px;">Хотя HTTP был разработан ещё в начале 1990-х годов, за счёт своей расширяемости в дальнейшем он все время совершенствовался. HTTP является протоколом прикладного уровня, который чаще всего использует возможности другого протокола - {{glossary("TCP")}} (или {{glossary("TLS")}} - защищённый TCP) - для пересылки своих сообщений, однако любой другой надёжный транспортный протокол теоретически может быть использован для доставки таких сообщений. Благодаря своей расширяемости, он используется не только для получения клиентом гипертекстовых документов, изображений и видео, но и для передачи содержимого серверам, например, с помощью HTML-форм. HTTP также может быть использован для получения только частей документа с целью обновления веб-страницы по запросу (например посредством AJAX запроса).</p> +<p><img alt="HTTP as an application layer protocol, on top of TCP (transport layer) and IP (network layer) and below the presentation layer." src="https://mdn.mozillademos.org/files/13673/HTTP%20&%20layers.png" style="float: left; height: 299px; padding-bottom: 15px; padding-right: 20px; width: 418px;">Хотя HTTP был разработан ещё в начале 1990-х годов, за счёт своей расширяемости в дальнейшем он все время совершенствовался. HTTP является протоколом прикладного уровня, который чаще всего использует возможности другого протокола - {{glossary("TCP")}} (или {{glossary("TLS")}} - защищённый TCP) - для пересылки своих сообщений, однако любой другой надёжный транспортный протокол теоретически может быть использован для доставки таких сообщений. Благодаря своей расширяемости, он используется не только для получения клиентом гипертекстовых документов, изображений и видео, но и для передачи содержимого серверам, например, с помощью HTML-форм. HTTP также может быть использован для получения только частей документа с целью обновления веб-страницы по запросу (например, посредством AJAX запроса).</p> <h2 id="Составляющие_систем_основанных_на_HTTP">Составляющие систем, основанных на HTTP</h2> @@ -34,7 +34,7 @@ translation_of: Web/HTTP/Overview <p>Браузер <strong>всегда</strong> является той сущностью, которая создаёт запрос. Сервер обычно этого не делает, хотя за многие годы существования сети были придуманы способы, которые могут позволить выполнить запросы со стороны сервера.</p> -<p>Чтобы отобразить веб страницу, браузер отправляет начальный запрос для получения HTML-документа этой страницы. После этого браузер изучает этот документ, и запрашивает дополнительные файлы, необходимые для отображения содержания веб-страницы (исполняемые скрипты, информацию о макете страницы - CSS таблицы стилей, дополнительные ресурсы в виде изображений и видео-файлов), которые непосредственно являются частью исходного документа, но расположены в других местах сети. Далее браузер соединяет все эти ресурсы для отображения их пользователю в виде единого документа — веб-страницы. Скрипты, выполняемые самим браузером, могут получать по сети дополнительные ресурсы на последующих этапах обработки веб-страницы, и браузер соответствующим образом обновляет отображение этой страницы для пользователя.</p> +<p>Чтобы отобразить веб страницу, браузер отправляет начальный запрос для получения HTML-документа этой страницы. После этого браузер изучает этот документ и запрашивает дополнительные файлы, необходимые для отображения содержания веб-страницы (исполняемые скрипты, информацию о макете страницы - CSS таблицы стилей, дополнительные ресурсы в виде изображений и видео-файлов), которые непосредственно являются частью исходного документа, но расположены в других местах сети. Далее браузер соединяет все эти ресурсы для отображения их пользователю в виде единого документа — веб-страницы. Скрипты, выполняемые самим браузером, могут получать по сети дополнительные ресурсы на последующих этапах обработки веб-страницы, и браузер соответствующим образом обновляет отображение этой страницы для пользователя.</p> <p>Веб-страница является гипертекстовым документом. Это означает, что некоторые части отображаемого текста являются ссылками, которые могут быть активированы (обычно нажатием кнопки мыши) с целью получения и соответственно отображения новой веб-страницы (переход по ссылке). Это позволяет пользователю "перемещаться" по страницам сети (Internet). Браузер преобразует эти гиперссылки в HTTP-запросы и в дальнейшем полученные HTTP-ответы отображает в понятном для пользователя виде.</p> @@ -46,7 +46,7 @@ translation_of: Web/HTTP/Overview <h3 id="Прокси">Прокси</h3> -<p>Между веб-браузером и сервером находятся большое количество сетевых узлов передающих HTTP сообщения. Из за слоистой структуры, большинство из них оперируют также на транспортном сетевом или физическом уровнях, становясь прозрачным на HTTP слое и потенциально снижая производительность. Эти операции на уровне приложений называются <u><strong>прокси</strong></u>. Они могут быть прозрачными, или нет, (изменяющие запросы не пройдут через них), и способны исполнять множество функций:</p> +<p>Между веб-браузером и сервером находятся большое количество сетевых узлов, передающих HTTP сообщения. Из-за слоистой структуры большинство из них оперируют также на транспортном сетевом или физическом уровнях, становясь прозрачным на HTTP слое и потенциально снижая производительность. Эти операции на уровне приложений называются <u><strong>прокси</strong></u>. Они могут быть прозрачными или нет, (изменяющие запросы не пройдут через них), и способны исполнять множество функций:</p> <ul> <li>caching (кеш может быть публичным или приватными, как кеш браузера)</li> @@ -68,17 +68,17 @@ translation_of: Web/HTTP/Overview <h3 id="HTTP_не_имеет_состояния_но_имеет_сессию">HTTP не имеет состояния, но имеет сессию</h3> -<p>HTTP не имеет состояния: не существует связи между двумя запросами, которые последовательно выполняются по одному соединению. Из этого немедленно следует возможность проблем для пользователя, пытающегося взаимодействовать с определённой страницей последовательно, например, при использовании корзины в электронном магазине. Но хотя ядро HTTP не имеет состояния, куки позволяют использовать сессии с сохранением состояния. Используя расширяемость заголовков, куки добавляются к рабочему потоку, позволяя сессии на каждом HTTP-запросе делиться некоторым контекстом, или состоянием.</p> +<p>HTTP не имеет состояния: не существует связи между двумя запросами, которые последовательно выполняются по одному соединению. Из этого немедленно следует возможность проблем для пользователя, пытающегося взаимодействовать с определённой страницей последовательно, например, при использовании корзины в электронном магазине. Но хотя ядро HTTP не имеет состояния, куки позволяют использовать сессии с сохранением состояния. Используя расширяемость заголовков, куки добавляются к рабочему потоку, позволяя сессии на каждом HTTP-запросе делиться некоторым контекстом или состоянием.</p> <h3 id="HTTP_и_соединения">HTTP и соединения</h3> -<p>Соединение управляется на транспортном уровне, и потому принципиально выходит за границы HTTP. Хотя HTTP не требует, чтобы базовый транспортного протокол был основан на соединениях, требуя только <em>надёжность</em>, или отсутствие потерянных сообщений (т.е. как минимум представление ошибки). Среди двух наиболее распространённых транспортных протоколов Интернета, TCP надёжен, а UDP -- нет. HTTP впоследствии полагается на стандарт TCP, являющийся основанным на соединениях, несмотря на то, что соединение не всегда требуется.</p> +<p>Соединение управляется на транспортном уровне, и потому принципиально выходит за границы HTTP. Хотя HTTP не требует, чтобы базовый транспортного протокол был основан на соединениях, требуя только <em>надёжность</em>, или отсутствие потерянных сообщений (т.е. как минимум представление ошибки). Среди двух наиболее распространённых транспортных протоколов Интернета, TCP надёжен, а UDP — нет. HTTP впоследствии полагается на стандарт TCP, являющийся основанным на соединениях, несмотря на то, что соединение не всегда требуется.</p> <p>HTTP/1.0 открывал TCP-соединение для каждого обмена запросом/ответом, имея два важных недостатка: открытие соединения требует нескольких обменов сообщениями, и потому медленно, хотя становится более эффективным при отправке нескольких сообщений, или при регулярной отправке сообщений: <em>тёплые</em> соединения более эффективны, чем <em>холодные</em>.</p> <p>Для смягчения этих недостатков, HTTP/1.1 предоставил конвейерную обработку (которую оказалось трудно реализовать) и устойчивые соединения: лежащее в основе TCP соединение можно частично контролировать через заголовок {{HTTPHeader("Connection")}}. HTTP/2 сделал следующий шаг, добавив мультиплексирование сообщений через простое соединение, помогающее держать соединение тёплым и более эффективным.</p> -<p>Проводятся эксперименты по разработке лучшего транспортного протокола, более подходящего для HTTP. Например, Google экспериментирует с <a href="https://en.wikipedia.org/wiki/QUIC">QUIC</a>, которая основана на UDP, для предоставления более надёжного и эффективного транспортного протокола.</p> +<p>Проводятся эксперименты по разработке лучшего транспортного протокола, более подходящего для HTTP. Например, Google экспериментирует с <a href="https://en.wikipedia.org/wiki/QUIC">QUIC</a> (которая основана на UDP) для предоставления более надёжного и эффективного транспортного протокола.</p> <h2 id="Чем_можно_управлять_через_HTTP">Чем можно управлять через HTTP</h2> @@ -88,15 +88,15 @@ translation_of: Web/HTTP/Overview <ul> <li><em><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching">Кеш</a></em><br> - Сервер может инструктировать прокси и клиенты: что и как долго кешировать. Клиент может инструктировать прокси промежуточных кешей игнорировать хранимые документы.</li> + Сервер может инструктировать прокси и клиенты, указывая что и как долго кешировать. Клиент может инструктировать прокси промежуточных кешей игнорировать хранимые документы.</li> <li><em>Ослабление ограничений источника</em><br> - Для предотвращения шпионских и других, нарушающих приватность, вторжений, веб-браузер обеспечивает строгое разделение между веб-сайтами. Только страницы из<strong> того же источника</strong> могут получить доступ к информации на веб-странице. Хотя такие ограничение нагружают сервер, заголовки HTTP могут ослабить строгое разделение на стороне сервера, позволяя документу стать частью информации с различных доменов (по причинам безопасности).</li> + Для предотвращения шпионских и других нарушающих приватность вторжений, веб-браузер обеспечивает строгое разделение между веб-сайтами. Только страницы из<strong> того же источника</strong> могут получить доступ к информации на веб-странице. Хотя такие ограничение нагружают сервер, заголовки HTTP могут ослабить строгое разделение на стороне сервера, позволяя документу стать частью информации с различных доменов (по причинам безопасности).</li> <li><em>Аутентификация</em><br> Некоторые страницы доступны только специальным пользователям. Базовая аутентификация может предоставляться через HTTP, либо через использование заголовка {{HTTPHeader("WWW-Authenticate")}} и подобных ему, либо с помощью настройки спецсессии, используя куки.</li> <li><em><a href="/en-US/docs/Web/HTTP/Proxy_servers_and_tunneling">Прокси и туннелирование</a></em><br> - Серверы и/или клиенты часто располагаются в интернете, и скрывают свои истинные IP-адреса от других. HTTP запросы идут через прокси для пересечения этого сетевого барьера. Не все прокси -- HTTP прокси. SOCKS-протокол, например, оперирует на более низком уровне. Другие, как, например, ftp, могут быть обработаны этими прокси.</li> + Серверы и/или клиенты часто располагаются в интернете и скрывают свои истинные IP-адреса от других. HTTP запросы идут через прокси для пересечения этого сетевого барьера. Не все прокси — HTTP прокси. SOCKS-протокол, например, оперирует на более низком уровне. Другие, как, например, ftp, могут быть обработаны этими прокси.</li> <li><em>Сессии</em><br> - Использование HTTP кук позволяет связать запрос с состоянием на сервере. Это создаёт сессию, хотя ядро HTTP -- протокол без состояния. Это полезно не только для корзин в интернет-магазинах, но также для любых сайтов, позволяющих пользователю настроить выход.</li> + Использование HTTP кук позволяет связать запрос с состоянием на сервере. Это создаёт сессию, хотя ядро HTTP — протокол без состояния. Это полезно не только для корзин в интернет-магазинах, но также для любых сайтов, позволяющих пользователю настроить выход.</li> </ul> <h2 id="HTTP_поток">HTTP поток</h2> @@ -104,8 +104,8 @@ translation_of: Web/HTTP/Overview <p>Когда клиент хочет взаимодействовать с сервером, являющимся конечным сервером или промежуточным прокси, он выполняет следующие шаги:</p> <ol> - <li>Открытие TCP соединения: TCP-соединение будет использоваться для отправки запроса или запросов, и получения ответа. Клиент может открыть новое соединение, переиспользовать существующее, или открыть несколько TCP-соединений к серверу.</li> - <li>Отправка HTTP-сообщения: HTTP-сообщения (до HTTP/2) являются человекочитаемыми. Начиная с HTTP/2, простые сообщения инкапсулируются во фреймы, делая невозможным их чтения напрямую, но принципиально остаются такими же. + <li>Открытие TCP соединения: TCP-соединение будет использоваться для отправки запроса (или запросов) и получения ответа. Клиент может открыть новое соединение, переиспользовать существующее или открыть несколько TCP-соединений к серверу.</li> + <li>Отправка HTTP-сообщения: HTTP-сообщения (до HTTP/2) являются человекочитаемыми. Начиная с HTTP/2, простые сообщения инкапсулируются во фреймы, делая невозможным их чтение напрямую, но принципиально остаются такими же. <pre class="line-numbers language-html notranslate"><code class="language-html">GET / HTTP/1.1 Host: developer.mozilla.org Accept-Language: fr</code></pre> @@ -131,7 +131,7 @@ Content-Type: text/html <p><a href="https://developer.mozilla.org/ru/docs/Web/HTTP/Messages">Подробнее в отдельной статье «Сообщения HTTP»</a></p> -<p>HTTP/1.1 и более ранние HTTP сообщения человеко-читаемы. В версии HTTP/2 эти сообщения встроены в новую бинарную структуру, фрейм, позволяющий оптимизации, такие как компрессия заголовков и мультиплексирование. Даже если часть оригинального HTTP сообщения отправлена в этой версии HTTP, семантика каждого сообщения не изменяется и клиент воссоздаёт (виртуально) оригинальный HTTP-запрос. Это также полезно для понимания HTTP/2 сообщений в формате HTTP/1.1.</p> +<p>HTTP/1.1 и более ранние HTTP сообщения человекочитаемые. В версии HTTP/2 эти сообщения встроены в новую бинарную структуру, фрейм, позволяющий оптимизации, такие как компрессия заголовков и мультиплексирование. Даже если часть оригинального HTTP сообщения отправлена в этой версии HTTP, семантика каждого сообщения не изменяется и клиент воссоздаёт (виртуально) оригинальный HTTP-запрос. Это также полезно для понимания HTTP/2 сообщений в формате HTTP/1.1.</p> <p>Существует два типа HTTP сообщений, запросы и ответы, каждый в своём формате.</p> @@ -147,7 +147,7 @@ Content-Type: text/html <li>HTTP-<a href="/en-US/docs/Web/HTTP/Methods">метод</a>, обычно глагол подобно {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}} или существительное, как {{HTTPMethod("OPTIONS")}} или {{HTTPMethod("HEAD")}}, определяющее операцию, которую клиент хочет выполнить. Обычно, клиент хочет получить ресурс (используя <code>GET</code>) или передать значения <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML-формы</a> (используя <code>POST</code>), хотя другие операция могут быть необходимы в других случаях.</li> <li>Путь к ресурсу: URL ресурсы <span id="result_box" lang="ru"><span>лишены элементов, которые очевидны из контекста</span></span>, например без {{glossary("protocol")}} (<code>http://</code>), {{glossary("domain")}} (здесь <code>developer.mozilla.org</code>), или TCP {{glossary("port")}} (здесь <code>80</code>).</li> <li>Версию HTTP-протокола.</li> - <li><a href="/en-US/docs/Web/HTTP/Headers">Заголовки</a> (опционально), предоставляющие дополнительную информацию для сервера.</li> + <li><a href="/en-US/docs/Web/HTTP/Headers">Заголовки</a> (опционально), предоставляющие дополнительную информацию для сервера.</li> <li>Или тело, для некоторых методов, таких как <code>POST</code>, которое содержит отправленный ресурс.</li> </ul> @@ -162,13 +162,13 @@ Content-Type: text/html <ul> <li>Версию HTTP-протокола.</li> <li><a href="/en-US/docs/Web/HTTP/Status">HTTP код состояния</a>, сообщающий об успешности запроса или причине неудачи.</li> - <li>Сообщение состояния -- краткое описание кода состояния.</li> + <li>Сообщение состояния — краткое описание кода состояния.</li> <li>HTTP <a href="/en-US/docs/Web/HTTP/Headers">заголовки</a>, подобно заголовкам в запросах.</li> <li>Опционально: тело, содержащее пересылаемый ресурс.</li> </ul> <h2 id="Вывод">Вывод</h2> -<p>HTTP -- лёгкий в использовании расширяемый протокол. Структура клиент-сервера, вместе со способностью к простому добавлению заголовков, позволяет HTTP продвигаться вместе с расширяющимися возможностями Сети.</p> +<p>HTTP — лёгкий в использовании расширяемый протокол. Структура клиент-сервера, вместе со способностью к простому добавлению заголовков, позволяет HTTP продвигаться вместе с расширяющимися возможностями Сети.</p> <p>Хотя HTTP/2 добавляет некоторую сложность, встраивая HTTP сообщения во фреймы для улучшения производительности, базовая структура сообщений осталась с HTTP/1.0. Сессионный поток остаётся простым, позволяя исследовать и отлаживать с простым <a href="/en-US/docs/Tools/Network_Monitor">монитором HTTP-сообщений</a>.</p> diff --git a/files/ru/web/index.html b/files/ru/web/index.html index e084f7e316..c5be97f019 100644 --- a/files/ru/web/index.html +++ b/files/ru/web/index.html @@ -92,7 +92,7 @@ translation_of: Web <dt><a href="/ru/docs/Web/SVG">SVG</a></dt> <dd>SVG (Scalable Vector Graphics - масштабируемая векторная графика) - позволяет вам описать изображение в виде линий, кривых и других геометрических фигур. Благодаря этому можно масштабировать рисунок без потери качества.</dd> <dt><a href="/ru/docs/Web/WebGL" title="/ru/docs/Web/WebGL">WebGL</a></dt> - <dd>WebGL - это JavaScript API, позволяющее рисовать 3D или 2D изображения используя HTML элемент {{HTMLElement("canvas")}}. Эта технология позволяет использовать стандарт OpenGL ES в Web-содержимом.</dd> + <dd>WebGL - это JavaScript API, позволяющее рисовать 3D или 2D изображения используя HTML-элемент {{HTMLElement("canvas")}}. Эта технология позволяет использовать стандарт OpenGL ES в Web-содержимом.</dd> <dt> <h3 id="Аудио_видео_и_мультимедиа">Аудио, видео и мультимедиа</h3> </dt> diff --git a/files/ru/web/javascript/a_re-introduction_to_javascript/index.html b/files/ru/web/javascript/a_re-introduction_to_javascript/index.html index 01888a792b..7a93230090 100644 --- a/files/ru/web/javascript/a_re-introduction_to_javascript/index.html +++ b/files/ru/web/javascript/a_re-introduction_to_javascript/index.html @@ -574,7 +574,7 @@ add(2, 3, 4, 5); // 14 avg(2, 3, 4, 5); // 3.5 </pre> -<p>Это довольно полезно, но при этом кажется излишне подробным. Для уменьшения количества кода взглянем на замену использования массива аргументов способом <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest parameter syntax</a>. В этом случае мы можем передавать в функцию любое количество аргументов, сохраняя код минималистичным. <strong>Rest parameter operator</strong> используется в списке параметров функции в формате: <strong>...variable</strong> и включает в себя целый список аргументов, с которыми функция будет вызвана. Мы будем также использовать замену цикла <strong>for</strong> циклом <strong>for...of</strong> для получения значений, которые будет содержать наша переменная.</p> +<p>Это довольно полезно, но при этом кажется излишне подробным. Для уменьшения количества кода взглянем на замену использования массива аргументов <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">синтаксисом остаточных параметров</a>. В этом случае мы можем передавать в функцию любое количество аргументов, сохраняя код минималистичным. <strong>Оператор остаточных параметров</strong> используется в списке параметров функции в формате: <strong>...variable</strong> и включает в себя целый список аргументов, с которыми функция будет вызвана. Мы будем также использовать замену цикла <strong>for</strong> циклом <strong>for...of</strong> для получения значений, которые будет содержать наша переменная.</p> <pre class="brush: js notranslate">function avg(...args) { var sum = 0; @@ -828,7 +828,7 @@ s.toString(); // "<Person: Simon Willison>"</pre> } </pre> -<p>Это не точная копия <code>new</code>, так как она не устанавливает цепочку прототипов (это сложно ). Метод <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">apply()</a></code> применяется не очень часто, но знать его важно. В примере выше, запись <code>...args</code> (включая многоточие) называется "<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest arguments</a>"— она включает в себя все оставшиеся аргументы.</p> +<p>Это не точная копия <code>new</code>, так как она не устанавливает цепочку прототипов (это сложно ). Метод <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">apply()</a></code> применяется не очень часто, но знать его важно. В примере выше, синтаксис <code>...args</code> (включая многоточие) называется <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">остаточными параметрами</a>, потому что они включают в себя все оставшиеся аргументы.</p> <p>Вызов</p> diff --git a/files/ru/web/javascript/guide/functions/index.html b/files/ru/web/javascript/guide/functions/index.html index 433c6647db..28385a4c3e 100644 --- a/files/ru/web/javascript/guide/functions/index.html +++ b/files/ru/web/javascript/guide/functions/index.html @@ -526,7 +526,7 @@ myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley'); <h2 id="Параметры_функции"><a id="definition" name="definition"></a>Параметры функции</h2> -<p>Начиная с ECMAScript 2015 появились два новых вида параметров: параметры по умолчанию (<em>default parameters</em>) и оставшиеся параметры (<em>rest parameters</em>).</p> +<p>Начиная с ECMAScript 2015 появились два новых вида параметров: параметры по умолчанию (<em>default parameters</em>) и остаточные параметры (<em>rest parameters</em>).</p> <h3 id="Параметры_по_умолчанию_Default_parameters">Параметры по умолчанию (Default parameters)</h3> @@ -552,9 +552,9 @@ multiply(5); // 5</pre> <p>Для более детального рассмотрения ознакомьтесь с <a href="/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">параметрами по умолчанию</a>.</p> -<h3 id="Оставшиеся_параметры_Rest_parameters">Оставшиеся параметры (Rest parameters)</h3> +<h3 id="Остаточные_параметры_Rest_parameters">Остаточные параметры (Rest parameters)</h3> -<p><a href="/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">Оставшиеся параметры</a> предоставляют нам массив неопределённых аргументов. В примере мы используем оставшиеся параметры, чтобы собрать аргументы с индексами со 2-го до последнего. Затем мы умножим каждый из них на значение первого аргумента. В этом примере используется стрелочная функция (<u><em><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a>)</em></u>, о которой будет рассказано в следующей секции.</p> +<p><a href="/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">Остаточные параметры</a> предоставляют нам массив неопределённых аргументов. В примере мы используем остаточные параметры, чтобы собрать аргументы с индексами со 2-го до последнего. Затем мы умножим каждый из них на значение первого аргумента. В этом примере используется стрелочная функция (<u><em><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a>)</em></u>, о которой будет рассказано в следующей секции.</p> <pre class="brush: js">function multiply(multiplier, ...theArgs) { return theArgs.map(x => multiplier * x); diff --git a/files/ru/web/javascript/guide/introduction/index.html b/files/ru/web/javascript/guide/introduction/index.html index d1739b7e0e..c9881446a1 100644 --- a/files/ru/web/javascript/guide/introduction/index.html +++ b/files/ru/web/javascript/guide/introduction/index.html @@ -136,7 +136,7 @@ original_slug: Web/JavaScript/Guide/Введение_в_JavaScript <h3 id="Hello_world">Hello world</h3> -<p>Чтобы начать писать JavaScript код откройте Scratchpad и напишите свой первый "Hello World!" код:</p> +<p>Чтобы начать писать JavaScript-код откройте Scratchpad и напишите свой первый "Hello World!" код:</p> <pre><code>(function(){ "use strict"; diff --git a/files/ru/web/javascript/guide/keyed_collections/index.html b/files/ru/web/javascript/guide/keyed_collections/index.html index 62de077e0c..dfffa495e5 100644 --- a/files/ru/web/javascript/guide/keyed_collections/index.html +++ b/files/ru/web/javascript/guide/keyed_collections/index.html @@ -155,7 +155,7 @@ mySet2 = new Set([1,2,3,4]); <li><code>WeakSet</code> <em>нельзя итерировать</em>. А также нельзя получить список (итератор) элементов.</li> </ul> -<p>Использование <code>WeakSet</code> достаточно специфическое. Пользуясь тем, что они не могут создавать утечек памяти, в них можно, например, безопасно помещать ссылки на DOM элементы.</p> +<p>Использование <code>WeakSet</code> достаточно специфическое. Пользуясь тем, что они не могут создавать утечек памяти, в них можно, например, безопасно помещать ссылки на DOM-элементы.</p> <p>Больше примеров и полное описание на странице справочника {{jsxref("WeakSet")}}</p> diff --git a/files/ru/web/javascript/guide/modules/index.html b/files/ru/web/javascript/guide/modules/index.html index 41001b32b3..45148d3202 100644 --- a/files/ru/web/javascript/guide/modules/index.html +++ b/files/ru/web/javascript/guide/modules/index.html @@ -9,15 +9,15 @@ translation_of: Web/JavaScript/Guide/Modules <h2 id="Модули_история_вопроса">Модули: история вопроса</h2> -<p>Сначала программы на JavaSctipt были небольшими — в прежние времена они использовались для изолированных задач, добавляя при необходимости немного интерактивности веб-страница, так что большие скрипты в основном не требовались. Прошло несколько лет, и вот уже мы видим полномасштабные приложения, работающие в броузерах и содержащие массу кода на JavaScript; кроме того, язык стал использоваться и в других контекстах (например, <a href="/en-US/docs/Glossary/Node.js">Node.js</a>).</p> +<p>Сначала программы на JavaScript были небольшими — в прежние времена они использовались для изолированных задач, добавляя при необходимости немного интерактивности веб-страницам, так что большие скрипты в основном не требовались. Прошло несколько лет, и вот мы уже видим полномасштабные приложения, работающие в браузерах и содержащие массу кода на JavaScript; кроме того, язык стал использоваться и в других контекстах (например, <a href="/en-US/docs/Glossary/Node.js">Node.js</a>).</p> -<p>Таким образом, в последние годы появились причины на то, чтобы подумать о механизмах деления программ на JavaScript на отдельные модули, которые можно импортировать по мере нужды. Node.js включала такую возможность уже давно, кроме того, некоторые библиотеки и фреймворки JavaSctipt разрешали использование модулей (например, <a href="https://en.wikipedia.org/wiki/CommonJS">CommonJS</a> и основанные на <a href="https://github.com/amdjs/amdjs-api/blob/master/AMD.md">AMD</a> системы модулей типа <a href="https://requirejs.org/">RequireJS</a>, а позднее также <a href="https://webpack.github.io/">Webpack</a> и <a href="https://babeljs.io/">Babel</a>).</p> +<p>Таким образом, в последние годы появились причины на то, чтобы подумать о механизмах деления программ на JavaScript на отдельные модули, которые можно импортировать по мере необходимости. Node.js включал такую возможность уже давно, кроме того, некоторые библиотеки и фреймворки JavaScript разрешали использование модулей (например, <a href="https://en.wikipedia.org/wiki/CommonJS">CommonJS</a> и основанные на <a href="https://github.com/amdjs/amdjs-api/blob/master/AMD.md">AMD</a> системы модулей типа <a href="https://requirejs.org/">RequireJS</a>, а позднее также <a href="https://webpack.github.io/">Webpack</a> и <a href="https://babeljs.io/">Babel</a>).</p> -<p>К счастью, современные броузера стали сами поддерживать функциональность модулей, о чем и рассказывает эта статья. Этому можно только порадоваться — броузеры могут оптимизировать загрузку модулей, что было бы гораздо эффективнее использования библиотеки, и взять на себя обработку на стороне клиента и прочие накладные расходы.</p> +<p>К счастью, современные браузеры стали сами поддерживать функциональность модулей, о чем и рассказывает эта статья. Этому можно только порадоваться — браузеры могут оптимизировать загрузку модулей, что было бы гораздо эффективнее использования библиотеки, и взять на себя обработку на стороне клиента и прочие накладные расходы.</p> -<h2 id="Поддержка_в_броузерах">Поддержка в броузерах</h2> +<h2 id="Поддержка_в_браузерах">Поддержка в браузерах</h2> -<p>Встроенная обработка модулей JavaScript связана с функциями {{JSxRef("Statements/import", "import")}} и {{JSxRef("Statements/export", "export")}}, которые поддерживаются броузерами следующим образом:</p> +<p>Встроенная обработка модулей JavaScript связана с функциями {{JSxRef("Statements/import", "import")}} и {{JSxRef("Statements/export", "export")}}, которые поддерживаются браузерами следующим образом:</p> <h3 id="import">import</h3> diff --git a/files/ru/web/javascript/index.html b/files/ru/web/javascript/index.html index 67ee50a50f..5557b54e98 100644 --- a/files/ru/web/javascript/index.html +++ b/files/ru/web/javascript/index.html @@ -122,7 +122,7 @@ translation_of: Web/JavaScript <dt><a href="/ru/docs/Tools">Инструменты разработчика Firefox</a></dt> <dd><a href="/ru/docs/Tools/Черновик">Простой редактор JavaScript</a>, <a href="/ru/docs/Tools/Web_Console">Веб-консоль</a>, <a href="/ru/docs/Tools/Profiler">JavaScript Профайлер</a>, <a href="/ru/docs/Tools/Debugger">Отладчик</a> и другие.</dd> <dt><a href="/ru/docs/Web/JavaScript/JavaScript_шеллы">JavaScript шеллы</a></dt> - <dd>JavaScript шеллы позволяют быстро проверять фрагменты JavaScript кода.</dd> + <dd>JavaScript шеллы позволяют быстро проверять фрагменты JavaScript-кода.</dd> <dt><a href="https://togetherjs.com/">TogetherJS</a></dt> <dd>Объединение усилий стало проще. Добавляя TogetherJS на вашу веб-страницу, ваши пользователи могут помочь другу-другу в реальном времени!</dd> <dt><a href="http://stackoverflow.com/questions/tagged/javascript">Stack Overflow</a></dt> diff --git a/files/ru/web/javascript/memory_management/index.html b/files/ru/web/javascript/memory_management/index.html index 59c5590a1b..4fa942b997 100644 --- a/files/ru/web/javascript/memory_management/index.html +++ b/files/ru/web/javascript/memory_management/index.html @@ -54,7 +54,7 @@ someElement.addEventListener('click', function(){ <p>Вызовы некоторых функций также ведут к выделению памяти под объект:</p> <pre class="brush: js notranslate">var d = new Date(); -var e = document.createElement('div'); // выделяет память под DOM элемент +var e = document.createElement('div'); // выделяет память под DOM-элемент </pre> <p>Некоторые методы выделяют память для новых значений или объектов:</p> diff --git a/files/ru/web/javascript/reference/functions/arguments/index.html b/files/ru/web/javascript/reference/functions/arguments/index.html index 80f8c29342..0cadf2be3f 100644 --- a/files/ru/web/javascript/reference/functions/arguments/index.html +++ b/files/ru/web/javascript/reference/functions/arguments/index.html @@ -15,7 +15,7 @@ translation_of: Web/JavaScript/Reference/Functions/arguments <p>Объект <code><strong>arguments</strong></code> — это подобный массиву объект, который содержит аргументы, переданные в функцию.</p> <div class="blockIndicator note"> -<p><strong>Примечание:</strong> Если вы пишите ES6-совместимый код, то лучше использовать <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">rest параметры</a>.</p> +<p><strong>Примечание:</strong> Если вы пишите ES6-совместимый код, то лучше использовать <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">остаточные параметры</a>.</p> </div> <div class="blockIndicator note"> @@ -139,9 +139,9 @@ myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");</pre> */</pre> -<h3 id="Оставшиеся_деструктурированные_и_параметры_по_умолчанию">Оставшиеся, деструктурированные и параметры по умолчанию</h3> +<h3 id="Остаточные_деструктурированные_и_параметры_по_умолчанию">Остаточные, деструктурированные и параметры по умолчанию</h3> -<p>Объект <code>arguments</code> может использоваться совместно с <a href="/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">оставшимися параметрами</a>, <a href="/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">параметрами по умолчанию </a>или <a href="/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">деструктурированными параметрами</a>.</p> +<p>Объект <code>arguments</code> может использоваться совместно с <a href="/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">остаточными параметрами</a>, <a href="/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">параметрами по умолчанию </a>или <a href="/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">деструктурированными параметрами</a>.</p> <pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span>args<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> arguments<span class="punctuation token">;</span> @@ -156,7 +156,7 @@ myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");</pre> <span class="punctuation token">}</span> <span class="function token">bar</span><span class="punctuation token">(</span><span class="number token">10</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 10</span></code></pre> -<p>В следующем примере возвращается 100, поскольку здесь нет <a href="/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">оставшихся параметров</a>, <a href="/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">параметров по умолчанию</a> или <a href="/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">деструктурированных параметров</a>:</p> +<p>В следующем примере возвращается 100, поскольку здесь нет <a href="/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">остаточных параметров</a>, <a href="/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">параметров по умолчанию</a> или <a href="/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">деструктурированных параметров</a>:</p> <pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">zoo</span><span class="punctuation token">(</span>a<span class="punctuation token">)</span> <span class="punctuation token">{</span> arguments<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span> <span class="operator token">=</span> <span class="number token">100</span><span class="punctuation token">;</span> @@ -164,7 +164,7 @@ myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");</pre> <span class="punctuation token">}</span> <span class="function token">zoo</span><span class="punctuation token">(</span><span class="number token">10</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 100</span></code></pre> -<p>На самом деле, если <a href="/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">оставшиеся параметры</a>, <a href="/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">параметры по умолчанию</a> или <a href="/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">деструктурированные параметры</a> не используются, формальные аргументы будут ссылаться на последние значения объекта <strong><code>arguments</code></strong>, при считывании значений формальных аргументов будут считаны последние данные из <strong><code>arguments</code></strong>, а при изменении значений формальных аргументов будет обновлён и объект <strong><code>arguments</code></strong>. Пример приведён в коде ниже:</p> +<p>На самом деле, если <a href="/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">остаточные параметры</a>, <a href="/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">параметры по умолчанию</a> или <a href="/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">деструктурированные параметры</a> не используются, формальные аргументы будут ссылаться на последние значения объекта <strong><code>arguments</code></strong>, при считывании значений формальных аргументов будут считаны последние данные из <strong><code>arguments</code></strong>, а при изменении значений формальных аргументов будет обновлён и объект <strong><code>arguments</code></strong>. Пример приведён в коде ниже:</p> <pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">func</span><span class="punctuation token">(</span>a<span class="punctuation token">,</span> b<span class="punctuation token">)</span> <span class="punctuation token">{</span> arguments<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span> <span class="operator token">=</span> <span class="number token">90</span><span class="punctuation token">;</span> @@ -184,7 +184,7 @@ myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");</pre> <span class="function token">func</span><span class="punctuation token">(</span><span class="number token">3</span><span class="punctuation token">,</span> <span class="number token">4</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//9, 99</span></code></pre> -<p>Но в случае, когда применяются <a href="/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">оставшиеся параметры</a>, <a href="/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">параметры по умолчанию</a> или <a href="/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">деструктурированные параметры</a>, будет обработано нормальное поведение, как в случае <a href="/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">параметров по умолчанию</a>:</p> +<p>Но в случае, когда применяются <a href="/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">остаточные параметры</a>, <a href="/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">параметры по умолчанию</a> или <a href="/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">деструктурированные параметры</a>, будет обработано нормальное поведение, как в случае <a href="/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">параметров по умолчанию</a>:</p> <pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">func</span><span class="punctuation token">(</span>a<span class="punctuation token">,</span> b<span class="punctuation token">,</span> c<span class="operator token">=</span><span class="number token">9</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> arguments<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span> <span class="operator token">=</span> <span class="number token">99</span><span class="punctuation token">;</span> diff --git a/files/ru/web/javascript/reference/functions/arrow_functions/index.html b/files/ru/web/javascript/reference/functions/arrow_functions/index.html index e336bb93b5..8cabc98dcb 100644 --- a/files/ru/web/javascript/reference/functions/arrow_functions/index.html +++ b/files/ru/web/javascript/reference/functions/arrow_functions/index.html @@ -36,7 +36,7 @@ singleParam => { statements } <pre class="brush: js">// Когда возвращаете литеральное выражение объекта, заключите тело в скобки params => ({foo: bar}) -// <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">Rest параметры</a> и <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">параметры по умолчанию</a> поддерживаются +// <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">Остаточные параметры</a> и <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">параметры по умолчанию</a> поддерживаются (param1, param2, ...rest) => { statements } (param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements } @@ -188,7 +188,7 @@ function foo() { foo(1); // 3</pre> -<p>В большинстве случаев лучшей заменой объекта arguments в стрелочных функциях являются <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest параметры</a>:</p> +<p>В большинстве случаев лучшей заменой объекта arguments в стрелочных функциях являются <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">остаточные параметры</a>:</p> <pre class="brush: js">function foo() { var f = (...args) => args[0]; diff --git a/files/ru/web/javascript/reference/functions/default_parameters/index.html b/files/ru/web/javascript/reference/functions/default_parameters/index.html index b257a5fe65..bff4368a58 100644 --- a/files/ru/web/javascript/reference/functions/default_parameters/index.html +++ b/files/ru/web/javascript/reference/functions/default_parameters/index.html @@ -117,7 +117,7 @@ callSomething(); // 2 greet('David', 'Hi'); // ["David", "Hi", "Hi David"] greet('David', 'Hi', 'Happy Birthday!'); // ["David", "Hi", "Happy Birthday!"]</pre> -<p>Следующий пример пример ещё раз иллюстрирует эту возможность, а также позволяет ещё раз сравнить два способа достижения одного и того же результата: с использованием инициализации параметров по умолчанию и без её использования:</p> +<p>Следующий пример ещё раз иллюстрирует эту возможность, а также позволяет ещё раз сравнить два способа достижения одного и того же результата: с использованием инициализации параметров по умолчанию и без её использования:</p> <pre class="brush: js">function go() { return ":P" diff --git a/files/ru/web/javascript/reference/functions/index.html b/files/ru/web/javascript/reference/functions/index.html index 2bdc3496e1..26a0bdc114 100644 --- a/files/ru/web/javascript/reference/functions/index.html +++ b/files/ru/web/javascript/reference/functions/index.html @@ -154,16 +154,16 @@ param => expression <h2 id="Параметры_функции">Параметры функции</h2> <div class="note"> -<p><strong>Примечание:</strong> Оставшиеся параметры и параметры по умолчанию <em>— это экспериментальная </em>технология, часть спецификации ECMAScript 6, и они пока ещё не получили широкой поддержки среди браузеров.</p> +<p><strong>Примечание:</strong> Остаточные параметры и параметры по умолчанию <em>— это экспериментальная </em>технология, часть спецификации ECMAScript 6, и они пока ещё не получили широкой поддержки среди браузеров.</p> </div> <h3 id="Параметры_по_умолчанию">Параметры по умолчанию</h3> <p>Параметры функции по умолчанию позволяют инициализировать формальные параметры со значениями по умолчанию, если им не было передано значение, или было передано <code>undefined</code>. Подробнее о них можно узнать в статье <a href="/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">Параметры по умолчанию</a>.</p> -<h3 id="Оставшиеся_параметры">Оставшиеся параметры</h3> +<h3 id="Остаточные_параметры">Остаточные параметры</h3> -<p>Синтаксис оставшихся параметров позволяет передать бесконечное число аргументов как массив. Подробности можно найти в статье <a href="/ru/docs/Web/JavaScript/Reference/Functions/rest_parameters">Оставшиеся параметры</a>.</p> +<p>Синтаксис оставшихся параметров позволяет передать бесконечное число аргументов как массив. Подробности можно найти в статье <a href="/ru/docs/Web/JavaScript/Reference/Functions/rest_parameters">Остаточные параметры</a>.</p> <h2 id="The_arguments_object" name="The_arguments_object">Объект <code>arguments</code></h2> @@ -417,7 +417,7 @@ result = padZeros(5,4); // возвращает "0005" <tr> <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> <td>{{Spec2('ES6')}}</td> - <td>Новое: стрелочные функции, генераторы, параметры по умолчанию, оставшиеся параметры</td> + <td>Новое: стрелочные функции, генераторы, параметры по умолчанию, остаточные параметры</td> </tr> </tbody> </table> diff --git a/files/ru/web/javascript/reference/functions/rest_parameters/index.html b/files/ru/web/javascript/reference/functions/rest_parameters/index.html index 14229ded17..0132e6b5ed 100644 --- a/files/ru/web/javascript/reference/functions/rest_parameters/index.html +++ b/files/ru/web/javascript/reference/functions/rest_parameters/index.html @@ -1,15 +1,15 @@ --- -title: Оставшиеся параметры (rest parameters) +title: Остаточные параметры (rest parameters) slug: Web/JavaScript/Reference/Functions/Rest_parameters tags: - JavaScript - - Оставшиеся параметры + - Остаточные параметры - Функции translation_of: Web/JavaScript/Reference/Functions/rest_parameters --- <div>{{jsSidebar("Functions")}} </div> -<p>Синтаксис <strong>оставшихся параметров</strong> функции позволяет представлять неограниченное множество аргументов в виде массива.</p> +<p>Синтаксис <strong>остаточных параметров</strong> функции позволяет представлять неограниченное множество аргументов в виде массива.</p> <p>{{EmbedInteractiveExample("pages/js/functions-restparameters.html")}}</p> @@ -38,21 +38,21 @@ myFun("один", "два", "три", "четыре", "пять", "шесть"); // manyMoreArgs, [три, четыре, пять, шесть] </pre> -<h3 id="Отличия_оставшихся_параметров_от_объекта_arguments">Отличия оставшихся параметров от объекта <code>arguments</code></h3> +<h3 id="Отличия_остаточных_параметров_от_объекта_arguments">Отличия остаточных параметров от объекта <code>arguments</code></h3> -<p>Существует три основных отличия оставшихся параметров от объекта <a href="/ru/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments"><code>arguments</code></a>:</p> +<p>Существует три основных отличия остаточных параметров от объекта <a href="/ru/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments"><code>arguments</code></a>:</p> <ul> - <li>оставшиеся параметры включают только те, которым не задано отдельное имя, в то время как объект <code>arguments</code> содержит все аргументы, передаваемые в функцию;</li> - <li>объект <code>arguments</code> не является массивом, в то время как оставшиеся параметры являются экземпляром <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a> и методы <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/sort" title="Array sort method"><code>sort</code></a>, <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/map" title="Array map method"><code>map</code></a>, <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" title="Array forEach method"><code>forEach</code></a> или <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/pop" title="Array pop method"><code>pop</code></a> могут непосредственно у них использоваться;</li> + <li>остаточные параметры включают только те, которым не задано отдельное имя, в то время как объект <code>arguments</code> содержит все аргументы, передаваемые в функцию;</li> + <li>объект <code>arguments</code> не является массивом, в то время как остаточные параметры являются экземпляром <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a> и методы <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/sort" title="Array sort method"><code>sort</code></a>, <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/map" title="Array map method"><code>map</code></a>, <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" title="Array forEach method"><code>forEach</code></a> или <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/pop" title="Array pop method"><code>pop</code></a> могут непосредственно у них использоваться;</li> <li>объект <code>arguments</code> имеет дополнительную функциональность, специфичную только для него (например, свойство <code>callee</code>).</li> </ul> <h3 id="Из_аргументов_в_массив">Из аргументов в массив</h3> -<p>Оставшиеся параметры были введены для уменьшения количества шаблонного кода:</p> +<p>Остаточные параметры были введены для уменьшения количества шаблонного кода:</p> -<pre class="brush: js notranslate">// До появления оставшихся параметров "arguments" конвертировали в обычный массив используя: +<pre class="brush: js notranslate">// До появления остаточных параметров "arguments" конвертировали в обычный массив используя: function f(a, b) { @@ -67,16 +67,16 @@ function f(a, b) { } -// Теперь мы можем легко получить оставшиеся параметры как обычный массив +// Теперь мы можем легко получить остаточные параметры как обычный массив function f(...args) { var normalArray = args; var first = normalArray.shift(); // OK, даёт первый аргумент }</pre> -<h3 id="Деструктуризация_оставшихся_параметров">Деструктуризация оставшихся параметров</h3> +<h3 id="Деструктуризация_остаточных_параметров">Деструктуризация остаточных параметров</h3> -<p>Оставшиеся параметры могут быть деструктурированы (только массивы). Это означает, что их данные могут быть заданы как отдельные значения. Смотрите <a href="/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Деструктурирующее присваивание</a>.</p> +<p>Остаточные параметры могут быть деструктурированы (только массивы). Это означает, что их данные могут быть заданы как отдельные значения. Смотрите <a href="/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Деструктурирующее присваивание</a>.</p> <pre class="notranslate"><code>function f(...[a, b, c]) { return a + b + c; @@ -132,7 +132,7 @@ fun1(); // 0 fun1(5); // 1 fun1(5, 6, 7); // 3</pre> -<p>В следующем примере, оставшиеся параметры используются для сбора всех аргументов после первого в массив. Каждый из них умножается на первый параметр и возвращается массив:</p> +<p>В следующем примере, остаточные параметры используются для сбора всех аргументов после первого в массив. Каждый из них умножается на первый параметр и возвращается массив:</p> <pre class="brush: js notranslate"><code>function multiply(multiplier, ...theArgs) { return theArgs.map(function(element) { @@ -143,7 +143,7 @@ fun1(5, 6, 7); // 3</pre> var arr = multiply(2, 1, 2, 3); console.log(arr); // [2, 4, 6]</code></pre> -<p>Методы <code>Array</code> могут быть использованы на оставшихся параметрах, но не на объекте <code>arguments</code>: </p> +<p>Методы <code>Array</code> могут быть использованы на остаточных параметрах, но не на объекте <code>arguments</code>: </p> <pre class="brush: js notranslate">function sortRestArgs(...theArgs) { var sortedArgs = theArgs.sort(); diff --git a/files/ru/web/javascript/reference/global_objects/eval/index.html b/files/ru/web/javascript/reference/global_objects/eval/index.html index da097ab92c..3c0ed3ae24 100644 --- a/files/ru/web/javascript/reference/global_objects/eval/index.html +++ b/files/ru/web/javascript/reference/global_objects/eval/index.html @@ -13,7 +13,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/eval <p><strong>Warning:</strong> <font>Выполнение кода JavaScript с текстовой строки - это невероятный риск для безопасности. </font><font>Злоумышленнику слишком легко запустить какой угодно код, когда вы используете</font> <code>eval()</code>. Смотрите <a href="#Не_используйте_eval_без_необходимости!">Никогда не используйте eval()!</a>, ниже.</p> </div> -<p>Метод <code><strong>eval()</strong></code> выполняет JavaScript код, представленный строкой.</p> +<p>Метод <code><strong>eval()</strong></code> выполняет JavaScript-код, представленный строкой.</p> <p>{{EmbedInteractiveExample("pages/js/globalprops-eval.html")}}</p> diff --git a/files/ru/web/javascript/reference/global_objects/function/function/index.md b/files/ru/web/javascript/reference/global_objects/function/function/index.md new file mode 100644 index 0000000000..610c5b6b58 --- /dev/null +++ b/files/ru/web/javascript/reference/global_objects/function/function/index.md @@ -0,0 +1,79 @@ +--- +title: Конструктор Function() +slug: Web/JavaScript/Reference/Global_Objects/Function/Function +tags: + - Конструктор + - Function + - JavaScript + - Справочник +browser-compat: javascript.builtins.Function.Function +--- +{{JSRef}} + +**Конструктор `Function`** создаёт новый **объект** `Function`. Вызов конструктора напрямую позволяет создавать функции программным путём, однако такой способ представляет угрозу для безопасности, а также несёт разные (хотя не такие значительные) проблемы с производительностью при использовании с {{jsxref("Global_Objects/eval")}}. Однако в отличие от eval, конструктор `Function` создаёт функции, выполняемые только в глобальной области видимости. + +{{EmbedInteractiveExample("pages/js/function-constructor.html","shorter")}} + +## Синтаксис + +```js +new Function(arg1, functionBody) +new Function(arg1, arg2, functionBody) +new Function(arg1, ... , argN, functionBody) +``` + +### Параметры + +- `arg1, arg2, ... argN` + + - : Имена, используемые функцией в качестве имён формальных аргументов. Каждое имя должно быть строкой с правильным JavaScript-значением (либо [идентификатором](/ru/docs/Glossary/Identifier), [оставшимся параметром](/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters), или [деструктурирующим присваиванием](/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment), либо списком таких строк, разделённых запятой. + + Поскольку параметры разбираются так же, как и объявления функций, допускается использование пробелов и комментариев. Например: `"x", "theValue = 42", "[a, b] /* numbers */"` — или `"x, theValue = 42, [a, b] /* numbers */"`. (`"x, theValue = 42", "[a, b]"` также будет правильным, хотя трудно читаемым). + +- `functionBody` + - : Строка, содержащая инструкции JavaScript, составляющие определение функции. + +## Описание + +Объекты `Function`, созданные конструктором `Function`, разбираются при создании функции. Определение функции при помощи {{jsxref("Operators/function", "выражения function", "", 1)}} или {{jsxref("Statements/function", "инструкции function", "", 1)}} и вызова её внутри вашего кода более эффективно, поскольку такие функции разбираются вместе с остальным кодом. + +Все аргументы, переданные в функцию, трактуются как имена идентификаторов параметров создаваемой функции, и имеют тот же порядок следования, что и при их передаче в конструктор функции. Если опустить аргумент, то значение этого параметра будет `undefined`. + +Вызов конструктора `Function` как функции (без использования оператора `new`) имеет тот же самый эффект, что и вызов его как конструктора. + +## Примеры + +### Пример: указание аргументов в конструкторе Function + +Следующий код создаёт объект `Function, который принимает два аргумента. + +```js +// Пример может быть запущен непосредственно в вашей консоли JavaScript + +// Создаём функцию, принимающую два аргумента, и возвращающую их сумму +const adder = new Function('a', 'b', 'return a + b'); + +// Вызываем функцию +adder(2, 6); +// 8 +``` + +Аргументы "`a`" и "`b`" являются именами формальных аргументов, которые используются в теле функции, "`return a + b`". + +## Спецификации + +{{Specifications}} + +## Поддержка браузерами + +{{Compat}} + +## Смотрите также + +- {{jsxref("Functions", "Функции и их область видимости", "", 1)}} +- Инструкция {{jsxref("Statements/function", "function")}} +- Выражение {{jsxref("Operators/function", "function")}} +- Инструкция {{jsxref("Statements/function*", "function*")}} +- Выражение {{jsxref("Operators/function*", "function*")}} +- {{jsxref("AsyncFunction")}} +- {{jsxref("GeneratorFunction")}} diff --git a/files/ru/web/javascript/reference/global_objects/function/index.html b/files/ru/web/javascript/reference/global_objects/function/index.html deleted file mode 100644 index fecafa06de..0000000000 --- a/files/ru/web/javascript/reference/global_objects/function/index.html +++ /dev/null @@ -1,196 +0,0 @@ ---- -title: Function -slug: Web/JavaScript/Reference/Global_Objects/Function -tags: - - JavaScript - - Конструктор - - Функция -translation_of: Web/JavaScript/Reference/Global_Objects/Function ---- -<div>{{JSRef("Global_Objects", "Function")}}</div> - -<p>{{JSRef}}</p> - -<p><strong><code>Function</code> constructor</strong> создаёт новый объект <code>Function</code>. Вызов <code>constructor</code> создаёт функцию динамически, но страдает от проблем безопасности и аналогичных (но гораздо менее значительных) проблем производительности {{jsxref("eval")}}. Однако, в отличие от eval, конструктор функций создаёт функции, которые выполняются только в глобальной области..</p> - -<p>{{EmbedInteractiveExample("pages/js/function-constructor.html")}}</p> - -<div class="hidden"> -<p>Источник для этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект interactive examples, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> -</div> - -<p>Каждая функция JavaScript на самом деле является объектом функции. Это можно увидеть с помощью кода <code>(function(){}).constructor === Function</code> которая возвращает true.</p> - -<h2 id="Syntax" name="Syntax">Синтаксис</h2> - -<pre class="syntaxbox"><code>new Function([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</code></pre> - -<h3 id="Parameters" name="Parameters">Параметры</h3> - -<dl> - <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> - <dd>Имена, используемые функцией в качестве имён формальных аргументов. Каждое имя должно быть строкой, представляющий допустимый идентификатор JavaScript, либо списком таких строк, разделённых запятой; например "<code>x</code>", "<code>theValue</code>" или "<code>a,b</code>".</dd> - <dt><code>functionBody</code></dt> - <dd>Строка, содержащая инструкции JavaScript, составляющие определение функции.</dd> -</dl> - -<h2 id="Description" name="Description">Описание</h2> - -<p>Объекты <code>Function</code>, созданные конструктором <code>Function</code>, разбираются при создании функции. Это менее эффективно определения функции при помощи <a href="/ru/docs/Web/JavaScript/Reference/Operators/function">выражения <code>function</code></a> или <a href="/ru/docs/Web/JavaScript/Reference/Statements/function">инструкции <code>function</code></a> и вызова её внутри вашего кода, поскольку такие функции разбираются вместе с остальным кодом.</p> - -<p>Все аргументы, переданные в функцию, трактуются как имена идентификаторов параметров создаваемой функции, и имеют тот же порядок следования, что и при их передаче в конструктор функции.</p> - -<div class="note"> -<p><strong>Примечание:</strong> функции, созданные конструктором <code>Function</code>, не создают замыканий на их контексты создания; они всегда создаются в глобальной области видимости. При их вызове, они получат доступ только к своим локальным переменным и переменным из глобальной области видимости, но не к переменным в той области видимости, в которой вызывался конструктор <code>Function</code>. Это поведение отличается от поведения при использовании функции {{jsxref("Global_Objects/eval", "eval")}} с кодом создания функции.</p> -</div> - -<p>Вызов конструктора <code>Function</code> как функции (без использования оператора <code>new</code>) имеет тот же самый эффект, что и вызов его как конструктора.</p> - -<h2 id="Properties_and_Methods_of_Function" name="Properties_and_Methods_of_Function">Свойства и методы объекта <code>Function</code></h2> - -<p>Глобальный объект <code>Function</code> не имеет собственных методов или свойств, однако, поскольку он сам является функцией, он наследует некоторые методы и свойства через цепочку прототипов объекта {{jsxref("Function.prototype")}}.</p> - -<h2 id="Function_prototype_object" name="Function_prototype_object">Прототип объекта <code>Function</code></h2> - -<h3 id="Properties" name="Properties">Свойства</h3> - -<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype', 'Properties')}}</div> - -<h3 id="Methods" name="Methods">Методы</h3> - -<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype', 'Methods')}}</div> - -<h2 id="Function_instances" name="Function_instances">Экземпляры объекта <code>Function</code></h2> - -<p>Экземпляры объекта <code>Function</code> наследуют методы и свойства из объекта {{jsxref("Function.prototype")}}. Как и со всеми другими конструкторами, вы можете изменить объект прототипа конструктора для применения изменений ко всем экземплярам объекта <code>Function</code>.</p> - -<h2 id="Examples" name="Examples">Примеры</h2> - -<h3 id="Example_Specifying_arguments_with_the_Function_constructor" name="Example:_Specifying_arguments_with_the_Function_constructor">Пример: указание аргументов в конструкторе <code>Function</code></h3> - -<p>Следующий код создаёт объект <code>Function</code>, который принимает два аргумента.</p> - -<pre class="brush: js">// Пример может быть запущен непосредственно в вашей консоли JavaScript - -// Создаём функцию, принимающую два аргумента, и возвращающую их сумму -var adder = new Function('a', 'b', 'return a + b'); - -// Вызываем функцию -adder(2, 6); -// > 8 -</pre> - -<p>Аргументы "<code>a</code>" и "<code>b</code>" являются именами формальных аргументов, которые используются в теле функции, "<code>return a + b</code>".</p> - -<h3 id="Example_A_recursive_shortcut_to_massively_modify_the_DOM" name="Example:_A_recursive_shortcut_to_massively_modify_the_DOM">Пример: рекурсивное сокращение для массового изменения DOM</h3> - -<p>Создание функции через конструктор <code>Function</code> - это один из способов динамического создания из функции неизвестного количества новых объектов с некоторым выполняемым кодом в глобальной области видимости. Следующий пример (a рекурсивное сокращение для массового изменения DOM) был бы невозможен без вызова конструктора <code>Function</code> для каждого нового запроса, если вы хотите избежать использования замыканий.</p> - -<pre class="brush: html"><!doctype html> -<html> -<head> -<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> -<title>Пример MDN - рекурсивное сокращение для массового изменения DOM</title> -<script type="text/javascript"> -var domQuery = (function() { - var aDOMFunc = [ - Element.prototype.removeAttribute, - Element.prototype.setAttribute, - CSSStyleDeclaration.prototype.removeProperty, - CSSStyleDeclaration.prototype.setProperty - ]; - - function setSomething(bStyle, sProp, sVal) { - var bSet = Boolean(sVal), fAction = aDOMFunc[bSet | bStyle << 1], - aArgs = Array.prototype.slice.call(arguments, 1, bSet ? 3 : 2), - aNodeList = bStyle ? this.cssNodes : this.nodes; - - if (bSet && bStyle) { aArgs.push(''); } - for ( - var nItem = 0, nLen = this.nodes.length; - nItem < nLen; - fAction.apply(aNodeList[nItem++], aArgs) - ); - this.follow = setSomething.caller; - return this; - } - - function setStyles(sProp, sVal) { return setSomething.call(this, true, sProp, sVal); } - function setAttribs(sProp, sVal) { return setSomething.call(this, false, sProp, sVal); } - function getSelectors() { return this.selectors; }; - function getNodes() { return this.nodes; }; - - return (function(sSelectors) { - var oQuery = new Function('return arguments.callee.follow.apply(arguments.callee, arguments);'); - oQuery.selectors = sSelectors; - oQuery.nodes = document.querySelectorAll(sSelectors); - oQuery.cssNodes = Array.prototype.map.call(oQuery.nodes, function(oInlineCSS) { return oInlineCSS.style; }); - oQuery.attributes = setAttribs; - oQuery.inlineStyle = setStyles; - oQuery.follow = getNodes; - oQuery.toString = getSelectors; - oQuery.valueOf = getNodes; - return oQuery; - }); -})(); -</script> -</head> - -<body> - -<div class="testClass">Lorem ipsum</div> -<p>Некоторый текст</p> -<div class="testClass">dolor sit amet</div> - -<script type="text/javascript"> -domQuery('.testClass') - .attributes('lang', 'en')('title', 'Risus abundat in ore stultorum') - .inlineStyle('background-color', 'black')('color', 'white')('width', '100px')('height', '50px'); -</script> -</body> - -</html> -</pre> - -<h2 id="Specifications" name="Specifications">Спецификации</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарии</th> - </tr> - <tr> - <td>ECMAScript 1-е издание.</td> - <td>Стандарт</td> - <td>Изначальное определение. Реализована в JavaScript 1.0.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.3', 'Function')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-function-objects', 'Function')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> - -<p>{{Compat("javascript.builtins.Function")}}</p> - -<h2 id="See_also" name="See_also">Смотрите также</h2> - -<ul> - <li>{{jsxref("Functions_and_function_scope", "Функции и их область видимости", "", 1)}}</li> - <li>{{jsxref("Function")}}</li> - <li>{{jsxref("Statements/function", "инструкция function", "", 1)}}</li> - <li>{{jsxref("Operators/function", "выражение function", "", 1)}}</li> - <li>{{jsxref("Statements/function*", "инструкция function*", "", 1)}}</li> - <li>{{jsxref("Operators/function*", "выражение function*", "", 1)}}</li> - <li>{{jsxref("GeneratorFunction")}}</li> -</ul> diff --git a/files/ru/web/javascript/reference/global_objects/function/index.md b/files/ru/web/javascript/reference/global_objects/function/index.md new file mode 100644 index 0000000000..09939fcbe5 --- /dev/null +++ b/files/ru/web/javascript/reference/global_objects/function/index.md @@ -0,0 +1,92 @@ +--- +title: Function +slug: Web/JavaScript/Reference/Global_Objects/Function +tags: + - Класс + - Function + - JavaScript +browser-compat: javascript.builtins.Function +--- +{{JSRef}} + +На самом деле каждая JavaScript-функция является объектом `Function`. Это легко проверить, выполнив проверку `(function(){}).constructor === Function`, которая вернёт true. + +## Конструктор + +- {{jsxref("Function/Function", "Function()")}} + - : Создаёт новый объект `Function`. Вызов конструктора напрямую позволяет создавать функции программным путём. Такой способ представляет угрозу для безопасности, а также несёт разные (хотя не такие значительные) проблемы с производительностью при использовании с {{jsxref("Global_Objects/eval")}}. Однако в отличие от eval, конструктор `Function` создаёт функции, выполняемые только в глобальной области видимости. + +## Свойства экземпляра + +- {{jsxref("Function.prototype.arguments")}} + - : Массив с переданными функции аргументами. + Это устаревшее свойство объекта {{jsxref("Function")}}. Вместо него используйте объект {{jsxref("Functions/arguments", "arguments")}} (доступный внутри функции). +- {{jsxref("Function.prototype.caller")}} + - : Содержит функцию, которая вызвала текущую выполняющуюся функцию. + Это устаревшее свойство, которое работает только в функциях без включённого строгого режима. +- {{jsxref("Function.prototype.displayName")}} + - : Отображаемое имя функции. +- {{jsxref("Function.prototype.length")}} + - : Содержит количество аргументов в функции. +- {{jsxref("Function.prototype.name")}} + - : Имя функции. + +## Методы экземпляра + +- {{jsxref("Function.prototype.apply()", "Function.prototype.apply(<var>thisArg</var> [, <var>argsArray</var>])")}} + - : Вызывает функцию и устанавливает её `this` на переданный `thisArg`. Аргументы могут быть переданы в виде объекта {{jsxref("Array")}}. +- {{jsxref("Function.prototype.bind()", "Function.prototype.bind(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]]])")}} + - : Создает новую функцию, при вызове которой её `this` будет установлен на `thisArg`. Можно также указать ряд аргументов, которые будут добавлены к аргументам при вызове новой привязанной функции. +- {{jsxref("Function.prototype.call()", "Function.prototype.call(<var>thisArg</var>[, <var>arg1</var>, <var>arg2</var>, ...<var>argN</var>])")}} + - : Вызывает функцию и устанавливает её `this` на переданное значение. Аргументы могут быть переданы как есть. +- {{jsxref("Function.prototype.toString()", "Function.prototype.toString()")}} + - : Возвращает строку с исходным кодом функции. + Переопределяет метод {{jsxref("Object.prototype.toString")}}. + +## Примеры + +### Сравнение конструктора Function и объявления функции + +Функции, созданные через конструктор `Function`, не имеют доступа к собственному контексту исполнения, т.е. они всегда создаются в глобальной области видимости. При выполнении таких функций, они смогут обращаться только к своим локальным и глобальным переменным, но не к переменным в той области видимости, в которой вызывался конструктор `Function`. В этом они отличаются от использования {{jsxref("Global_Objects/eval")}} с функциями-выражениями. + +```js +var x = 10; + +function createFunction1() { + var x = 20; + return new Function('return x;'); // здесь |x| ссылается на глобальный |x| +} + +function createFunction2() { + var x = 20; + function f() { + return x; // здесь |x| ссылается на локальный |x| выше + } + return f; +} + +var f1 = createFunction1(); +console.log(f1()); // 10 +var f2 = createFunction2(); +console.log(f2()); // 20 +``` + +Хотя этот код работает в браузерах, в окружении Node.js вызов `f1()` приведёт к ошибке `ReferenceError`, потому что `x` не будет найден. Это происходит из-за того, что область видимости верхнего уровня в Node не является глобальной областью видимости, поэтому `x` ссылается на локальную переменную в пределах текущего модуля. + +## Спецификации + +{{Specifications}} + +## Поддержка браузерами + +{{Compat}} + +## Смотрите также + +- {{jsxref("Functions", "Функции и их область видимости", "", 1)}} +- Инструкция {{jsxref("Statements/function", "function")}} +- Выражение {{jsxref("Operators/function", "function")}} +- Инструкция {{jsxref("Statements/function*", "function*")}} +- Выражение {{jsxref("Operators/function*", "function*")}} +- {{jsxref("AsyncFunction")}} +- {{jsxref("GeneratorFunction")}} diff --git a/files/ru/web/javascript/reference/global_objects/proxy/index.html b/files/ru/web/javascript/reference/global_objects/proxy/index.html index 0d4574126f..ffb56bcf1e 100644 --- a/files/ru/web/javascript/reference/global_objects/proxy/index.html +++ b/files/ru/web/javascript/reference/global_objects/proxy/index.html @@ -56,7 +56,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Proxy <table class="standard-table"> <thead> <tr> - <th>JavaScript код</th> + <th>JavaScript-код</th> <th>Метод обработчика</th> <th>Описание</th> </tr> diff --git a/files/ru/web/javascript/reference/index.html b/files/ru/web/javascript/reference/index.html index 606c77d483..f498c81725 100644 --- a/files/ru/web/javascript/reference/index.html +++ b/files/ru/web/javascript/reference/index.html @@ -35,7 +35,7 @@ translation_of: Web/JavaScript/Reference <li><a href="/ru/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code></a></li> <li><a href="/ru/docs/Web/JavaScript/Reference/Arrow_functions">Стрелочные функции</a></li> <li><a href="/ru/docs/Web/JavaScript/Reference/Default_parameters">Параметры по умолчанию</a></li> - <li><a href="/ru/docs/Web/JavaScript/Reference/Functions/rest_parameters">Оставшиеся параметры</a></li> + <li><a href="/ru/docs/Web/JavaScript/Reference/Functions/rest_parameters">Остаточные параметры</a></li> </ul> <h2 id="Additional_reference_pages" name="Additional_reference_pages">Дополнительные справочные страницы</h2> diff --git a/files/ru/web/javascript/reference/lexical_grammar/index.html b/files/ru/web/javascript/reference/lexical_grammar/index.html index e1332b977d..ac86ccd94b 100644 --- a/files/ru/web/javascript/reference/lexical_grammar/index.html +++ b/files/ru/web/javascript/reference/lexical_grammar/index.html @@ -111,7 +111,7 @@ ECMAScript также определяет ключевые слова и лит <h2 id="Окончание_строк">Окончание строк</h2> -<p>В дополнение к пробельным символам, символы окончания строк тоже используются для читабельности исходного кода. Однако, в некоторых случаях, символы окончания строк могут влиять на выполнение JavaScript кода, т.к. есть некоторые места, где они запрещены.</p> +<p>В дополнение к пробельным символам, символы окончания строк тоже используются для читабельности исходного кода. Однако, в некоторых случаях, символы окончания строк могут влиять на выполнение JavaScript-кода, т.к. есть некоторые места, где они запрещены.</p> <p>Окончания строк также затрагивают процесс <a href="#Automatic_semicolon_insertion">автоматического проставления точки с запятой</a>. Также окончания строк попадают под условия <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">регулярных выражений</a> при поиске <strong>\s</strong> класса.</p> diff --git a/files/ru/web/javascript/reference/operators/this/index.html b/files/ru/web/javascript/reference/operators/this/index.html index 64840be7d9..33aa7207b2 100644 --- a/files/ru/web/javascript/reference/operators/this/index.html +++ b/files/ru/web/javascript/reference/operators/this/index.html @@ -368,14 +368,14 @@ for (var i = 0; i < elements.length; i++) { <h3 id="В_инлайновом_обработчике_событий">В инлайновом обработчике событий</h3> -<p>Когда код вызван из инлайнового обработчика, <code>this</code> указывает на DOM элемент, в котором расположен код события:</p> +<p>Когда код вызван из инлайнового обработчика, <code>this</code> указывает на DOM-элемент, в котором расположен код события:</p> <pre class="brush:js"><button onclick="alert(this.tagName.toLowerCase());"> Показать this </button> </pre> -<p>Код выше выведет '<code>button</code>'. Следует отметить, что <code>this</code> будет указывать на DOM элемент только во внешних (не вложенных) функциях:</p> +<p>Код выше выведет '<code>button</code>'. Следует отметить, что <code>this</code> будет указывать на DOM-элемент только во внешних (не вложенных) функциях:</p> <pre class="brush:js"><button onclick="alert((function() {return this;} ()));"> Показать вложенный this diff --git a/files/ru/web/javascript/reference/strict_mode/index.html b/files/ru/web/javascript/reference/strict_mode/index.html index 8370cd4bfa..0264f43fb4 100644 --- a/files/ru/web/javascript/reference/strict_mode/index.html +++ b/files/ru/web/javascript/reference/strict_mode/index.html @@ -244,7 +244,7 @@ f(); // выдаст TypeError <h3 id="Безопасный_JavaScript">"Безопасный" JavaScript</h3> -<p>Строгий режим упрощает написание "безопасного" JavaScript кода. Сейчас некоторые веб-сайты предоставляют пользователям возможность писать JavaScript, который будет выполняться на сайте <em>от имени других пользователей. </em>В браузерах, JavaScript может иметь доступ к приватной информации пользователя, поэтому, в целях ограничения доступа к запретной функциональности, такой JavaScript перед выполнением должен быть частично преобразован. Гибкость JavaScript делает это практически невозможным без многочисленных проверок во время исполнения. Функционал, исполняемый языком иногда столь массивен, что выполнение любых дополнительных проверок во время исполнения скрипта приведёт к значительной потере производительности. Однако, некоторые особенности строгого режима, плюс обязательное требование того, чтобы JavaScript, загруженный пользователем, имел строгий режим и вызывался определённым способом, существенно снижают потребность в таких проверках.</p> +<p>Строгий режим упрощает написание "безопасного" JavaScript-кода. Сейчас некоторые веб-сайты предоставляют пользователям возможность писать JavaScript, который будет выполняться на сайте <em>от имени других пользователей. </em>В браузерах, JavaScript может иметь доступ к приватной информации пользователя, поэтому, в целях ограничения доступа к запретной функциональности, такой JavaScript перед выполнением должен быть частично преобразован. Гибкость JavaScript делает это практически невозможным без многочисленных проверок во время исполнения. Функционал, исполняемый языком иногда столь массивен, что выполнение любых дополнительных проверок во время исполнения скрипта приведёт к значительной потере производительности. Однако, некоторые особенности строгого режима, плюс обязательное требование того, чтобы JavaScript, загруженный пользователем, имел строгий режим и вызывался определённым способом, существенно снижают потребность в таких проверках.</p> <p>Во-первых, значение, передаваемое в функцию как <code>this</code>, в строгом режиме не приводится к объекту (не "упаковывается"). В обычной функции <code>this</code> всегда представляет собой объект: либо это непосредственно объект, в случае вызова с <code>this</code>, представляющим объект-значение; либо значение, упакованное в объект, в случае вызова с <code>this</code> типа Boolean, string, или number; либо глобальный объект, если тип <code>this</code> это <code>undefined</code> или <code>null</code>. (Для точного определения конкретного <code>this</code> используйте <code>{{jsxref('Global_Objects/Function/call', 'call')}}</code>, <code>{{jsxref('Global_Objects/Function/apply', 'apply')}}</code>, или <code>{{jsxref('Global_Objects/Function/bind', 'bind')}}</code>.) Автоматическая упаковка не только снижает производительность, но и выставляет на показ глобальный объект, что в браузерах является угрозой безопасности, потому что глобальный объект предоставляет доступ к функциональности, которая должна быть ограничена в среде "безопасного" JavaScript. Таким образом, для функции в строгом режиме точно определённый <code>this</code> не упаковывается в объект, а если не определён точно, <code>this</code> является <code>undefined</code>:</p> diff --git a/files/ru/web/javascript/reference/trailing_commas/index.html b/files/ru/web/javascript/reference/trailing_commas/index.html index 322cfe9080..918671b8b4 100644 --- a/files/ru/web/javascript/reference/trailing_commas/index.html +++ b/files/ru/web/javascript/reference/trailing_commas/index.html @@ -89,7 +89,7 @@ Math.max(10, 20,); <h3 id="Недопустимые_висящие_запятые">Недопустимые висящие запятые</h3> -<p>Определение параметров функции или вызов функции, содержащих только запятую будет генерировать {{Jsxref("SyntaxError")}}. Кроме того, при использовании <a href="/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">оставшихся параметров</a> не допускается использовать висящие запятые:</p> +<p>Определение параметров функции или вызов функции, содержащих только запятую будет генерировать {{Jsxref("SyntaxError")}}. Кроме того, при использовании <a href="/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">остаточных параметров</a> не допускается использовать висящие запятые:</p> <pre class="brush: js example-bad">function f(,) {} // SyntaxError: missing formal parameter (,) => {}; // SyntaxError: expected expression, got ',' diff --git a/files/ru/web/javascript/shells/index.html b/files/ru/web/javascript/shells/index.html index 7d00cdd193..864a577889 100644 --- a/files/ru/web/javascript/shells/index.html +++ b/files/ru/web/javascript/shells/index.html @@ -35,7 +35,7 @@ original_slug: Web/JavaScript/JavaScript_шеллы <li><a class="external" href="http://www.squarefree.com/shell/">JavaScript Shell (web page)</a> - также доступен как часть <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/7434">Extension Developer's Extension</a></li> <li><a class="external" href="http://www.billyreisinger.com/jash/">Jash: JavaScript Shell</a> - оболочка, основана на DHTML, которая предоставляет доступ к командной строки веб-страницы.</li> <li><a class="external" href="http://hyperstruct.net/projects/mozrepl">MozRepl</a> - Подключайтесь к Firefox и другим приложениям Mozilla, изучайте и изменяйте их изнутри, пока они работают.</li> - <li><a class="external" href="http://www.mouseless.de/index.php?/content/view/18/31/">Execute JS</a> - (больше не поддерживается) Расширение для Firefox, представляющее собой расширенную JavaScript-консоль, в которой можно удобно набирать и выполнять произвольный JavaScript код и изменить функции.</li> + <li><a class="external" href="http://www.mouseless.de/index.php?/content/view/18/31/">Execute JS</a> - (больше не поддерживается) Расширение для Firefox, представляющее собой расширенную JavaScript-консоль, в которой можно удобно набирать и выполнять произвольный JavaScript-код и изменить функции.</li> <li><a href="https://addons.mozilla.org/addon/159546">xqjs</a> - Простая консоль для Firefox.</li> <li><a class="external" href="http://code.eligrey.com/shell/help.html">JavaScript Shell Extended</a> - Модифицированная версия вышеупомянутого шелла с различными улучшениями, такими как поддержка JSON, поддержка последней версии JavaScript и т.д.</li> <li><a class="link-https" href="https://sekhmet.acceleration.net/ADW/JsShellServer/">JavaScript Shell Server</a> - Осуществляет связь через Emacs.</li> diff --git a/files/ru/web/mathml/element/math/index.html b/files/ru/web/mathml/element/math/index.html index 15e951f867..fe8943ba56 100644 --- a/files/ru/web/mathml/element/math/index.html +++ b/files/ru/web/mathml/element/math/index.html @@ -161,7 +161,7 @@ translation_of: Web/MathML/Element/math <h2 id="Смотрите_также"><span class="notranslate">Смотрите также</span></h2> <ul> - <li><span class="notranslate">HTML элемент верхнего уровня: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html" title="HTML <HTML> Элемент (или HTML корневой элемент) представляет собой корень из HTML или документа XHTML. Все остальные элементы должны быть потомками этого элемента."><code><html></code></a></span></li> + <li><span class="notranslate">HTML-элемент верхнего уровня: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html" title="HTML <HTML> Элемент (или HTML корневой элемент) представляет собой корень из HTML или документа XHTML. Все остальные элементы должны быть потомками этого элемента."><code><html></code></a></span></li> <li><span class="notranslate">SVG элемент верхнего уровня: <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg" title="Элемент SVG могут быть использованы для гнезда автономный SVG фрагмент внутри текущего документа (в том числе в HTML документе) до тех пор, SVG не является корневым элементом. Это автономный фрагмент имеет свой собственный просмотра и свою собственную систему координат."><code><svg></code></a></span></li> <li><span class="notranslate">Тест-браузер MathML: Для <a class="external link-https external-icon" href="https://www.eyeasme.com/Joe/MathML/MathML_browser_test">XHTML</a> и <a class="external link-https external-icon" href="https://eyeasme.com/Joe/MathML/HTML5_MathML_browser_test">HTML5</a></span></li> </ul> diff --git a/files/ru/web/performance/animation_performance_and_frame_rate/index.html b/files/ru/web/performance/animation_performance_and_frame_rate/index.html index 0d0688c535..ef421c2507 100644 --- a/files/ru/web/performance/animation_performance_and_frame_rate/index.html +++ b/files/ru/web/performance/animation_performance_and_frame_rate/index.html @@ -11,7 +11,7 @@ tags: translation_of: Web/Performance/Animation_performance_and_frame_rate original_slug: Web/Performance/Производительность_анимации --- -<p>Анимация в Вебе может быть сделана с помощью {{domxref('SVGAnimationElement', 'SVG')}}, {{domxref('window.requestAnimationFrame','JavaScript')}}, включая {{htmlelement('canvas')}} и {{domxref('WebGL_API', 'WebGL')}}, CSS {{cssxref('animation')}}, {{htmlelement('video')}}, анимированных GIF и даже с помощью анимированных PNG и других типов изображений. Производительность CSS анимации может отличаться от одного CSS-свойства к другому, а попытка анимировать некоторые "дорогие" CSS-свойства может привести к зависаниям ({{glossary('jank')}}), даже несмотря на то, что браузер борется за то, чтобы смягчить частоту смены кадров {{glossary('frame rate')}}.</p> +<p>Анимация в Вебе может быть сделана с помощью {{domxref('SVGAnimationElement', 'SVG')}}, {{domxref('window.requestAnimationFrame','JavaScript')}}, включая {{htmlelement('canvas')}} и {{domxref('WebGL_API', 'WebGL')}}, CSS {{cssxref('animation')}}, {{htmlelement('video')}}, анимированных GIF и даже с помощью анимированных PNG и других типов изображений. Производительность CSS-анимации может отличаться от одного CSS-свойства к другому, а попытка анимировать некоторые "дорогие" CSS-свойства может привести к зависаниям ({{glossary('jank')}}), даже несмотря на то, что браузер борется за то, чтобы смягчить частоту смены кадров {{glossary('frame rate')}}.</p> <p>Для анимированных медиа, таких как видео и GIF, основная проблема производительности - это размер файлов. Скачивание больших по объёму файлов не может не повлиять на производительность системы или на то, как эту систему воспринимает пользователь. </p> @@ -25,23 +25,23 @@ original_slug: Web/Performance/Производительность_анимац <p>Графики <a href="/en-US/docs/Tools/Performance/Frame_rate">frame rate</a> и <a href="/en-US/docs/Tools/Performance/Waterfall">waterfall</a> из встроенных инструментов браузера дают информацию о том, как браузер выполняет работу по анимации. Используя эти инструменты, вы можете измерить fps приложения и диагностировать узкие места, в которых fps уменьшается.</p> -<p>С помощью <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">CSS анимации</a> вы указываете <a href="/en-US/docs/Web/CSS/@keyframes">ключевые кадры (keyframes)</a>, каждый из которых использует определённые CSS свойства, чтобы определить внешний вид элемента в конкретный (ключевой) момент анимации. Браузер создаёт анимации с помощью плавных переходов от одного ключевого кадра к следующему.</p> +<p>С помощью <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">CSS-анимации</a> вы указываете <a href="/en-US/docs/Web/CSS/@keyframes">ключевые кадры (keyframes)</a>, каждый из которых использует определённые CSS-свойства, чтобы определить внешний вид элемента в конкретный (ключевой) момент анимации. Браузер создаёт анимации с помощью плавных переходов от одного ключевого кадра к следующему.</p> <p>Если сравнивать анимацию с помощью JavaScript и CSS, вы увидите, что CSS-анимации проще создать. Более того, CSS-анимации гарантируют лучшую производительность, так как они автоматически делегируют некоторые задачи браузеру. Например, в случае CSS браузер сам решает, когда нужно отрендерить кадр, а когда пропустить кадр, если это необходимо. </p> <p><br> - Однако, стоимость изменения разных CSS свойств варьируется. Общепринято, что 60 кадров в секунду - это достаточная частота, чтобы анимация выглядела мягкой и плавной. Несложный подсчёт говорит, что при частоте 60 кадров в секунду, браузер имеет лишь 16.7 миллисекунд, чтобы выполнить все скрипты, пересчитать стили, скомпоновать слои и отрисовать новый кадр. Отсюда следует, что медленные скрипты и анимация дорогих CSS свойств может может привести к <a href="/en-US/docs/Glossary/Jank">зависаниям</a>, так как браузер все ещё будет пытаться вычислить все 60 кадров.</p> + Однако, стоимость изменения разных CSS-свойств варьируется. Общепринято, что 60 кадров в секунду - это достаточная частота, чтобы анимация выглядела мягкой и плавной. Несложный подсчёт говорит, что при частоте 60 кадров в секунду, браузер имеет лишь 16.7 миллисекунд, чтобы выполнить все скрипты, пересчитать стили, скомпоновать слои и отрисовать новый кадр. Отсюда следует, что медленные скрипты и анимация дорогих CSS-свойств может может привести к <a href="/en-US/docs/Glossary/Jank">зависаниям</a>, так как браузер все ещё будет пытаться вычислить все 60 кадров.</p> <p>Стоит заметить, что 60 кадров в секунду - это стандартная частота обновления экрана. Существуют экраны с гораздо большим FPS. Например, экраны игровых ноутбуков или iPad Pro 2018 имеют частоту смены кадров, равную 120 fps и выше. Для таких устройств производители браузеров ограничивают частоту 60-ю кадрами в секунду, но с помощью некоторых опций этот лимит можно убрать. И в этом случае, на формирование каждого кадра устройство будет отводить лишь 8.6 миллисекунд.</p> <h2 id="Этапы_рендеринга">Этапы рендеринга</h2> -<p>Процесс, используемый браузером для отображения анимации CSS свойств, может быть представлен как последовательность этапов из следующего изображения:</p> +<p>Процесс, используемый браузером для отображения анимации CSS-свойств, может быть представлен как последовательность этапов из следующего изображения:</p> <p><img alt="" src="https://mdn.mozillademos.org/files/10821/css-rendering-waterfall.png" style="display: block; height: 203px; margin-left: auto; margin-right: auto; width: 546px;"></p> <ol> - <li><strong>Recalculate Style</strong>: когда любое CSS свойство для элемента изменяется, браузер должен заново вычислить результирующий набор свойств.</li> + <li><strong>Recalculate Style</strong>: когда любое CSS-свойство для элемента изменяется, браузер должен заново вычислить результирующий набор свойств.</li> <li><strong>Layout</strong>: затем браузер использует вычисленные стили для того, чтобы понять позицию и геометрию элементов - как изменённого, так и рядом лежащих. Эта операция называется "layout", но иногда её так же называют "reflow".</li> <li><strong>Paint</strong>: наконец, браузер должен перерисовать элементы на экране. Но этот этап не обязательно должен быть простым, как на изображении. Страница может быть разделена на слои, каждый из которых перерисовывается независимо, а только после этого они комбинируются в процессе, который называется композицией "Composition".</li> </ol> @@ -50,7 +50,7 @@ original_slug: Web/Performance/Производительность_анимац <p>В любом случае, вычисление каждого следующего кадра должно происходить достаточно быстро, чтобы успеть попасть в частоту обновления экрана, чтобы не было зависаний.</p> -<h2 id="Стоимость_CSS_свойств">Стоимость CSS свойств</h2> +<h2 id="Стоимость_CSS_свойств">Стоимость CSS-свойств</h2> <p>На всех этапах рендеринга изменение некоторых свойств является более затратным, других - менее:</p> @@ -107,7 +107,7 @@ original_slug: Web/Performance/Производительность_анимац </table> <div class="note"> -<p>На Веб-сайте <a href="http://csstriggers.com/">CSS Triggers</a> хорошо показано, какие CSS свойства вызывают те или иные этапы обновления в разных браузерах.</p> +<p>На Веб-сайте <a href="http://csstriggers.com/">CSS Triggers</a> хорошо показано, какие CSS-свойства вызывают те или иные этапы обновления в разных браузерах.</p> </div> <h2 id="Пример_margin_против_transform">Пример: margin против transform</h2> diff --git a/files/ru/web/performance/critical_rendering_path/index.html b/files/ru/web/performance/critical_rendering_path/index.html index 2153463b89..dd20f81e0d 100644 --- a/files/ru/web/performance/critical_rendering_path/index.html +++ b/files/ru/web/performance/critical_rendering_path/index.html @@ -19,7 +19,7 @@ translation_of: Web/Performance/Critical_rendering_path <h3 id="Document_Object_Model">Document Object Model</h3> -<p>Построение DOM инкрементально. Ответ в виде HTML превращается в токены, которые превращаются в узлы (nodes), которые формируют DOM дерево. Простейший узел начинается с startTag-токена и заканчивается токеном endTag. Узлы содержат всю необходимую информацию об HTML элементе, соответствующем этому узлу. Узлы (nodes) связаны с Render Tree с помощью иерархии токенов: если какой-то набор startTag и endTag-токенов появляется между уже существующим набором токенов, мы получаем узел (node) внутри узла (node), то есть получаем иерархию дерева DOM.</p> +<p>Построение DOM инкрементально. Ответ в виде HTML превращается в токены, которые превращаются в узлы (nodes), которые формируют DOM дерево. Простейший узел начинается с startTag-токена и заканчивается токеном endTag. Узлы содержат всю необходимую информацию об HTML-элементе, соответствующем этому узлу. Узлы (nodes) связаны с Render Tree с помощью иерархии токенов: если какой-то набор startTag и endTag-токенов появляется между уже существующим набором токенов, мы получаем узел (node) внутри узла (node), то есть получаем иерархию дерева DOM.</p> <p>Чем больше количество узлов (node) имеет приложение, тем дольше происходит формирование DOM tree, а значит дольше происходит обработка критических этапов рендеринга. Измеряйте! Несколько лишних узлов (node) не сделают погоды, но <a href="https://en.wiktionary.org/wiki/divitis">divitis</a> обязательно приведёт к подвисаниям.</p> @@ -27,7 +27,7 @@ translation_of: Web/Performance/Critical_rendering_path <p>DOM несёт в себе всё содержимое страницы. CSSOM содержит все стили страницы, то есть данные о том, как стилизовать DOM. CSSOM похож на DOM, но всё же отличается. Если формирование DOM инкрементально, CSSOM - нет. CSS блокирует рендер: браузер блокирует рендеринг страницы до тех пор, пока не получит и не обработает все CSS-правила. CSS блокирует рендеринг, потому что правила могут быть перезаписаны, а значит, необходимо дождаться построения CSSOM, чтобы убедиться в отсутствии дополнительных переопределений.</p> -<p>У CSS имеются свои правила валидации токенов. Помните, что C в CSS означает "Cascade". CSS правила ниспадают каскадом. Иными словами, когда парсер преобразует токены в узлы (nodes), вложенные узлы наследуют стили от родительских. Инкрементальная обработка недоступна для CSS, потому что набор следующих правил может перезаписать предыдущие. Объектная модель CSS (CSSOM) строится по мере парсинга CSS, но она не может быть использована для построения дерева рендера (render tree), потому что может оказаться так, что следующий набор правил может сделать какой-либо из узлов дерева невидимым на экране. Это может привести к лишнему вызову компоновки и перерасчёта стилей.</p> +<p>У CSS имеются свои правила валидации токенов. Помните, что C в CSS означает "Cascade". CSS-правила ниспадают каскадом. Иными словами, когда парсер преобразует токены в узлы (nodes), вложенные узлы наследуют стили от родительских. Инкрементальная обработка недоступна для CSS, потому что набор следующих правил может перезаписать предыдущие. Объектная модель CSS (CSSOM) строится по мере парсинга CSS, но она не может быть использована для построения дерева рендера (render tree), потому что может оказаться так, что следующий набор правил может сделать какой-либо из узлов дерева невидимым на экране. Это может привести к лишнему вызову компоновки и перерасчёта стилей.</p> <p>Говоря о производительности селекторов (selector), наименее специфичные селекторы срабатывают быстрее. Например, <code>.foo {}</code> сработает быстрее <code>.bar .foo {}</code>. В первом случае, условно, понадобится одна операция, чтобы найти элемент <code>.foo</code>, во втором случае, сначала будут найдены все <code>.foo</code>, а<strong> </strong>потом<strong> браузер пройдёт вверх</strong> по дереву в поисках родительского элемента <code>.bar</code>. Более специфичные селекторы требуют от браузера большего количества работы, но эти проблемы, вероятно, не стоят их оптимизации.</p> @@ -35,7 +35,7 @@ translation_of: Web/Performance/Critical_rendering_path <h3 id="Дерево_рендера_Render_Tree">Дерево рендера (Render Tree)</h3> -<p>Дерево рендера охватывает сразу и содержимое страницы, и стили: это место, где DOM и CSSOM деревья комбинируются в одно дерево. Для построения дерева рендера браузер проверяет каждый узел (node) DOM, начиная от корневого (root) и определяет, какие CSS правила нужно присоединить к этому узлу. </p> +<p>Дерево рендера охватывает сразу и содержимое страницы, и стили: это место, где DOM и CSSOM деревья комбинируются в одно дерево. Для построения дерева рендера браузер проверяет каждый узел (node) DOM, начиная от корневого (root) и определяет, какие CSS-правила нужно присоединить к этому узлу. </p> <p>Дерево рендера охватывает только видимое содержимое. Например, секция head (в основном) не содержит никакой видимой информации, а потому может не включаться в дерево. Кроме того, если у какого-то узла стоит свойство <code>display: none</code>, оно так же не включается в дерево (как и потомки этого узла).</p> diff --git a/files/ru/web/performance/css_javascript_animation_performance/index.html b/files/ru/web/performance/css_javascript_animation_performance/index.html index 0f5b52e792..e071af27cc 100644 --- a/files/ru/web/performance/css_javascript_animation_performance/index.html +++ b/files/ru/web/performance/css_javascript_animation_performance/index.html @@ -65,9 +65,9 @@ translation_of: Web/Performance/CSS_JavaScript_animation_performance <h3 id="Анимация_вне_основного_потока_процесса">Анимация вне основного потока процесса</h3> -<p>Браузерный JavaScript является строго однопоточным языком, то есть он не может одновременно работать над двумя задачами. В этом кроется проблема анимации с помощью JavaScript. Выполняя такую анимацию, вы занимаете процессор, который мог бы в это время заниматься другими функциями. В противоположность этому, CSS анимации могут быть выделены в отдельный поток, то есть при выполнении таких анимаций браузер не блокирует выполнение других процессов. </p> +<p>Браузерный JavaScript является строго однопоточным языком, то есть он не может одновременно работать над двумя задачами. В этом кроется проблема анимации с помощью JavaScript. Выполняя такую анимацию, вы занимаете процессор, который мог бы в это время заниматься другими функциями. В противоположность этому, CSS-анимации могут быть выделены в отдельный поток, то есть при выполнении таких анимаций браузер не блокирует выполнение других процессов. </p> -<p>Для того, чтобы выделить анимацию CSS в отдельный процесс, нам нужно убедиться, что изменяемые свойства не запускают этапы reflow/repaint (подробнее здесь: <a href="http://csstriggers.com/">CSS triggers</a>). Если изменяемые CSS свойства не делают этого, то мы можем вынести операции по вычислению стилей в отдельный поток. Наиболее известное свойство - это CSS Transform, которое выводит элемент в отдельный <a href="https://wiki.mozilla.org/Gecko:Overview#Graphics">слой</a>. Если элемент представляет из себя отдельный слой, то вычисление каждого следующего кадра может быть сделано на графическом процессоре (GPU). Это радикально улучшает производительность, особенно на мобильных устройства. Подробности здесь: <a href="https://wiki.mozilla.org/Platform/GFX/OffMainThreadCompositing">OffMainThreadCompositing</a>.</p> +<p>Для того, чтобы выделить анимацию CSS в отдельный процесс, нам нужно убедиться, что изменяемые свойства не запускают этапы reflow/repaint (подробнее здесь: <a href="http://csstriggers.com/">CSS triggers</a>). Если изменяемые CSS-свойства не делают этого, то мы можем вынести операции по вычислению стилей в отдельный поток. Наиболее известное свойство - это CSS Transform, которое выводит элемент в отдельный <a href="https://wiki.mozilla.org/Gecko:Overview#Graphics">слой</a>. Если элемент представляет из себя отдельный слой, то вычисление каждого следующего кадра может быть сделано на графическом процессоре (GPU). Это радикально улучшает производительность, особенно на мобильных устройства. Подробности здесь: <a href="https://wiki.mozilla.org/Platform/GFX/OffMainThreadCompositing">OffMainThreadCompositing</a>.</p> <p>Вы можете отключить выведение анимации в отдельный поток, чтобы посмотреть, как эта особенность влияет на FPS. Для этого в настройках Firefox найдите флаг <code>layers.offmainthreadcomposition.async-animations</code>. И переключите его в <code>false</code>.</p> diff --git a/files/ru/web/performance/fundamentals/index.html b/files/ru/web/performance/fundamentals/index.html index 2fd01a765d..29c524e0cd 100644 --- a/files/ru/web/performance/fundamentals/index.html +++ b/files/ru/web/performance/fundamentals/index.html @@ -166,9 +166,9 @@ original_slug: Web/Performance/Основы <h4 id="Используйте_CSS_animation_и_transition">Используйте CSS animation и transition</h4> -<p>Вместо использования функции <code>animate()</code> какой-нибудь библиотеки, которая, вероятно, использует много плохих решений (например ({{domxref("window.setTimeout()")}} или анимирование top / left), используйте <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">CSS анимации</a>. Во многих случаях, вы можете использовать <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">CSS Transitions</a>. Использование этих свойств поможет, так как браузер спроектирован так, чтобы оптимизировать эти эффекты и переносить часть вычислений на GPU, чтобы они работали плавно и с минимальным влиянием на процессор. Другое преимущество - вы можете определить эти анимации в CSS декларативным образом, а не в бизнес-логике приложения.</p> +<p>Вместо использования функции <code>animate()</code> какой-нибудь библиотеки, которая, вероятно, использует много плохих решений (например ({{domxref("window.setTimeout()")}} или анимирование top / left), используйте <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">CSS-анимации</a>. Во многих случаях, вы можете использовать <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">CSS Transitions</a>. Использование этих свойств поможет, так как браузер спроектирован так, чтобы оптимизировать эти эффекты и переносить часть вычислений на GPU, чтобы они работали плавно и с минимальным влиянием на процессор. Другое преимущество - вы можете определить эти анимации в CSS декларативным образом, а не в бизнес-логике приложения.</p> -<p>CSS анимации дают вам очень точный контроль эффектов, если вы используете <a href="/en-US/docs/Web/CSS/@keyframes">keyframes</a>. Более того, вы сможете отслеживать события, которые происходят во время анимации, так как основной поток обработки не блокируется. Вы можете с лёгкостью запускать анимации с помощью {{cssxref(":hover")}}, {{cssxref(":focus")}} или {{cssxref(":target")}}. Или динамически добавляя или удаляя классы элемента.</p> +<p>CSS-анимации дают вам очень точный контроль эффектов, если вы используете <a href="/en-US/docs/Web/CSS/@keyframes">keyframes</a>. Более того, вы сможете отслеживать события, которые происходят во время анимации, так как основной поток обработки не блокируется. Вы можете с лёгкостью запускать анимации с помощью {{cssxref(":hover")}}, {{cssxref(":focus")}} или {{cssxref(":target")}}. Или динамически добавляя или удаляя классы элемента.</p> <p>Если вы хотите создавать анимации "на лету" или изменять их с помощью JavaScript, Джеймс Лонг написал простую библиотеку для этого - <a href="https://github.com/jlongster/css-animations.js/">CSS-animations.js</a>.</p> diff --git a/files/ru/web/svg/attribute/core/index.html b/files/ru/web/svg/attribute/core/index.html index 6abb480a61..960f9d6fc7 100644 --- a/files/ru/web/svg/attribute/core/index.html +++ b/files/ru/web/svg/attribute/core/index.html @@ -55,7 +55,7 @@ translation_of: Web/SVG/Attribute/Core <p>SVG поддерживает стандартный XML-атрибут <code>xml:space</code> для указания обработки символов пробела в пределах заданных {{ SVGElement("text") }} символов текущего элемента.</p> <div class="note"> - <p><strong>Примечание:</strong> Вместо атрибута <code>xml:space</code> следует использовать CSS свойство {{cssxref('white-space')}}.</p> + <p><strong>Примечание:</strong> Вместо атрибута <code>xml:space</code> следует использовать CSS-свойство {{cssxref('white-space')}}.</p> </div> <p><small><em>Значение</em>: <code><strong>default</strong></code> | <code>preserve</code>; <em>Анимируемый</em>: <strong>Нет</strong></small></p> diff --git a/files/ru/web/svg/attribute/fill-rule/index.html b/files/ru/web/svg/attribute/fill-rule/index.html index b7c3a793e0..22b569a33b 100644 --- a/files/ru/web/svg/attribute/fill-rule/index.html +++ b/files/ru/web/svg/attribute/fill-rule/index.html @@ -7,7 +7,7 @@ translation_of: Web/SVG/Attribute/fill-rule <p>The <strong><code>fill-rule</code></strong> этот атрибут представления, формулирует алгоритм, используемый для определения внутренней части фигуры.</p> -<p class="note"><strong>Note:</strong> Атрибут представления, <code>fill-rule</code> может быть использован как CSS свойство.</p> +<p class="note"><strong>Note:</strong> Атрибут представления, <code>fill-rule</code> может быть использован как CSS-свойство.</p> <p>Как атрибут представления, он может быть применён к следующим восьми элементам:: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p> diff --git a/files/ru/web/svg/attribute/index.html b/files/ru/web/svg/attribute/index.html index 390328c17f..d258b6134c 100644 --- a/files/ru/web/svg/attribute/index.html +++ b/files/ru/web/svg/attribute/index.html @@ -448,7 +448,7 @@ translation_of: Web/SVG/Attribute <h3 id="Атрибуты_представления">Атрибуты представления</h3> -<div class="note">Заметьте, что все атрибуты представления SVG можно использовать как CSS свойства.</div> +<div class="note">Заметьте, что все атрибуты представления SVG можно использовать как CSS-свойства.</div> <p>{{ SVGAttr("alignment-baseline") }}, {{ SVGAttr("baseline-shift") }}, {{ SVGAttr("clip") }}, {{ SVGAttr("clip-path") }}, {{ SVGAttr("clip-rule") }}, {{ SVGAttr("color") }}, {{ SVGAttr("color-interpolation") }}, {{ SVGAttr("color-interpolation-filters") }}, {{ SVGAttr("color-profile") }}, {{ SVGAttr("color-rendering") }}, {{ SVGAttr("cursor") }}, {{ SVGAttr("direction") }}, {{ SVGAttr("display") }}, {{ SVGAttr("dominant-baseline") }}, {{ SVGAttr("enable-background") }}, {{ SVGAttr("fill") }}, {{ SVGAttr("fill-opacity") }}, {{ SVGAttr("fill-rule") }}, {{ SVGAttr("filter") }}, {{ SVGAttr("flood-color") }}, {{ SVGAttr("flood-opacity") }}, {{ SVGAttr("font-family") }}, {{ SVGAttr("font-size") }}, {{ SVGAttr("font-size-adjust") }}, {{ SVGAttr("font-stretch") }}, {{ SVGAttr("font-style") }}, {{ SVGAttr("font-variant") }}, {{ SVGAttr("font-weight") }}, {{ SVGAttr("glyph-orientation-horizontal") }}, {{ SVGAttr("glyph-orientation-vertical") }}, {{ SVGAttr("image-rendering") }}, {{ SVGAttr("kerning") }}, {{ SVGAttr("letter-spacing") }}, {{ SVGAttr("lighting-color") }}, {{ SVGAttr("marker-end") }}, {{ SVGAttr("marker-mid") }}, {{ SVGAttr("marker-start") }}, {{ SVGAttr("mask") }}, {{ SVGAttr("opacity") }}, {{ SVGAttr("overflow") }}, {{ SVGAttr("pointer-events") }}, {{ SVGAttr("shape-rendering") }}, {{ SVGAttr("stop-color") }}, {{ SVGAttr("stop-opacity") }}, {{ SVGAttr("stroke") }}, {{ SVGAttr("stroke-dasharray") }}, {{ SVGAttr("stroke-dashoffset") }}, {{ SVGAttr("stroke-linecap") }}, {{ SVGAttr("stroke-linejoin") }}, {{ SVGAttr("stroke-miterlimit") }}, {{ SVGAttr("stroke-opacity") }}, {{ SVGAttr("stroke-width") }}, {{ SVGAttr("text-anchor") }}, {{ SVGAttr("text-decoration") }}, {{ SVGAttr("text-rendering") }}, {{ SVGAttr("unicode-bidi") }}, {{ SVGAttr("visibility") }}, {{ SVGAttr("word-spacing") }}, {{ SVGAttr("writing-mode") }}</p> diff --git a/files/ru/web/svg/element/ellipse/index.html b/files/ru/web/svg/element/ellipse/index.html index 0ac542ad66..4b04443b5e 100644 --- a/files/ru/web/svg/element/ellipse/index.html +++ b/files/ru/web/svg/element/ellipse/index.html @@ -52,7 +52,7 @@ original_slug: Web/SVG/Элемент/ellipse <div class="blockIndicator note"> - <p><strong>Обратите внимание:</strong> Начиная с SVG2, <code>cx</code>, <code>cy</code>, <code>rx</code> и <code>ry</code> это <em>Геометрические свойства</em>. Это означает, что они могут быть использованы как CSS свойства элемента.</p> + <p><strong>Обратите внимание:</strong> Начиная с SVG2, <code>cx</code>, <code>cy</code>, <code>rx</code> и <code>ry</code> это <em>Геометрические свойства</em>. Это означает, что они могут быть использованы как CSS-свойства элемента.</p> </div> <h3 id="Глобальные_Атрибуты">Глобальные Атрибуты</h3> diff --git a/files/ru/web/svg/element/lineargradient/index.html b/files/ru/web/svg/element/lineargradient/index.html index 88934c35a4..5034823e8a 100644 --- a/files/ru/web/svg/element/lineargradient/index.html +++ b/files/ru/web/svg/element/lineargradient/index.html @@ -2,101 +2,96 @@ title: <linearGradient> slug: Web/SVG/Element/linearGradient tags: - - NeedsUpdate - SVG - SVG градиент - - Справка - Элемент translation_of: Web/SVG/Element/linearGradient original_slug: Web/SVG/Элемент/linearGradient --- <div>{{SVGRef}}</div> -<p>Элемент <strong><code><linearGradient></code></strong> <a href="/en-US/docs/Web/SVG">SVG</a> позволяет авторам определять линейные градиенты для заполнения или изменения графических элементов.</p> +<p><strong><code><linearGradient></code></strong> позволяет определять линейные градиенты для заполнения или изменения графических элементов.</p> -<h2 id="Контекст_использования">Контекст использования</h2> - -<p>{{svginfo}}</p> - -<h2 id="Атрибуты">Атрибуты</h2> - -<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> - -<ul> - <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Основные атрибуты</a></li> - <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Атрибуты презентации</a></li> - <li><a href="/en-US/docs/Web/SVG/Attribute#Xlink_attributes">Атрибуты Xlink</a></li> - <li>{{SVGAttr("class")}}</li> - <li>{{SVGAttr("style")}}</li> - <li>{{SVGAttr("externalResourcesRequired")}}</li> -</ul> - -<h3 id="Специфические_атрибуты">Специфические атрибуты</h3> +<div class="notecard note"> +<p>Не путайте с CSS {{cssxref('linear-gradient()')}}, CSS-градиенты могут быть применены только к HTML-элементам, тогда как SVG-градиент применим только к SVG-элементам.</p> +</div> -<ul> - <li>{{SVGAttr("gradientUnits")}}</li> - <li>{{SVGAttr("gradientTransform")}}</li> - <li>{{SVGAttr("x1")}}</li> - <li>{{SVGAttr("y1")}}</li> - <li>{{SVGAttr("x2")}}</li> - <li>{{SVGAttr("y2")}}</li> - <li>{{SVGAttr("spreadMethod")}}</li> - <li>{{SVGAttr("xlink:href")}}</li> -</ul> +<div id="Example"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> -<h2 id="DOM_интерфейс">DOM интерфейс</h2> +<pre class="brush: html"><svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <linearGradient id="myGradient" gradientTransform="rotate(90)"> + <stop offset="5%" stop-color="gold" /> + <stop offset="95%" stop-color="red" /> + </linearGradient> + </defs> + + <!-- using my linear gradient --> + <circle cx="5" cy="5" r="4" fill="url('#myGradient')" /> +</svg></pre> -<p>Этот элемент реализует {{domxref("SVGLinearGradientElement")}} интерфейс.</p> +<p>{{EmbedLiveSample('Example', 150, '100%')}}</p> +</div> -<h2 id="Пример">Пример</h2> +<h2 id="Attributes">Атрибуты</h2> + +<dl> + <dt id="attr-gradientUnits">{{SVGAttr("gradientUnits")}}</dt> + <dd>Определяет систему координат для атрибутов <code>x1</code>, <code>x2</code>, <code>y1</code>, <code>y2</code><br> + <small><em>Тип значения</em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code> ; <em>Значение по умолчанию</em>: <code>objectBoundingBox</code>; <em>Анимируемый</em>: <strong>да</strong></small></dd> + <dt id="attr-gradientTransform">{{SVGAttr("gradientTransform")}}</dt> + <dd>Этот атрибут обеспечивает дополнительное <a href="/ru/docs/Web/SVG/Attribute/transform">преобразование</a> для системы координат градиента.<br> + <small><em>Тип значения</em>: <strong><a href="/en-US/docs/Web/SVG/Content_type#transform-list"><transform-list></a></strong> ; <em>Значение по умолчанию</em>: <em>identity transform</em>; <em>Анимируемый</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr("href")}}</dt> + <dd>Этот атрибут определяет ссылку на другой элемент <code><linearGradient></code>, который будет использоваться в качестве шаблона.<br> + <small><em>Тип значения</em>: <a href="/en-US/docs/Web/SVG/Content_type#url"><strong><URL></strong></a> ; <em>Значение по умолчанию</em>: none; <em>Анимируемый</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr("spreadMethod")}}</dt> + <dd>Этот атрибут указывает, как ведет себя градиент, если он начинается или заканчивается внутри границ фигуры, содержащей градиент.<br> + <small><em>Тип значения</em>: <code>pad</code>|<code>reflect</code>|<code>repeat</code> ; <em>Значение по умолчанию</em>: <code>pad</code>; <em>Анимируемый</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr("x1")}}</dt> + <dd>Этот атрибут определяет координату x начальной точки векторного градиента, вдоль которой рисуется линейный градиент.<br> + <small><em>Тип значения</em>: <a href="/en-US/docs/Web/SVG/Content_type#length"><strong><length></strong></a> ; <em>Значение по умолчанию</em>: <code>0%</code>; <em>Анимируемый</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr("x2")}}</dt> + <dd>Этот атрибут определяет координату x конечной точки векторного градиента, вдоль которой рисуется линейный градиент. <br> + <small><em>Тип значения</em>: <a href="/en-US/docs/Web/SVG/Content_type#length"><strong><length></strong></a> ; <em>Значение по умолчанию</em>: <code>100%</code>; <em>Анимируемый</em>: <strong>да</strong></small></dd> + <dt id="attr-cx">{{SVGAttr("xlink:href")}}</dt> + <dd>{{Deprecated_Header}}<a href="/en-US/docs/Web/SVG/Content_type#iri"><IRI></a> ссылка на другой <code><linearGradient></code> элемент, который будет использоваться в качестве шаблона.<br> + <small><em>Тип значения</em>: <a href="/en-US/docs/Web/SVG/Content_type#iri"><strong><IRI></strong></a> ; <em>Значение по умолчанию</em>: none; <em>Анимируемый</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr("y1")}}</dt> + <dd>Этот атрибут определяет координату y начальной точки векторного градиента, вдоль которой рисуется линейный градиент.<br> + <small><em>Тип значения</em>: <a href="/en-US/docs/Web/SVG/Content_type#length"><strong><length></strong></a> ; <em>Значение по умолчанию</em>: <code>0%</code>; <em>Анимируемый</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr("y2")}}</dt> + <dd>Этот атрибут определяет координату y конечной точки векторного градиента, вдоль которой рисуется линейный градиент.<br> + <small><em>Тип значения</em>: <a href="/en-US/docs/Web/SVG/Content_type#length"><strong><length></strong></a> ; <em>Значение по умолчанию</em>: <code>0%</code>; <em>Анимируемый</em>: <strong>да</strong></small></dd> +</dl> + +<h3 id="Global_attributes">Глобальные атрибуты</h3> + +<dl> + <dt><a href="/ru/docs/Web/SVG/Attribute/Core">Основные атрибуты</a></dt> + <dd><small>Прежде всего: {{SVGAttr('id')}}</small></dd> + <dt><a href="/en-US/docs/Web/SVG/Attribute/Styling">Атрибуты стилизации</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt>Атрибуты событий</dt> + <dd><small><a href="/en-US/docs/Web/SVG/Attribute/Events#global_event_attributes">Глобальные атрибуты событий</a>, <a href="/en-US/docs/Web/SVG/Attribute/Events#document_element_event_attributes">Атрибуты событий элементов документа</a></small></dd> + <dt><a href="/en-US/docs/Web/SVG/Attribute/Presentation">Атрибуты презентации</a></dt> + <dd><small>Прежде всего: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>XLink атрибуты</dt> + <dd><small>{{SVGAttr("xlink:href")}}, {{SVGAttr("xlink:title")}}</small></dd> +</dl> + +<h2 id="Usage_notes">Примечания по использованию</h2> -<pre class="brush: html"><svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"> - <defs> - <linearGradient id="MyGradient"> - <stop offset="5%" stop-color="green"/> - <stop offset="95%" stop-color="gold"/> - </linearGradient> - </defs> +<p>{{svginfo}}</p> - <rect fill="url(#MyGradient)" - x="10" y="10" width="100" height="100"/> -</svg></pre> +<h2 id="Specifications">Спецификации</h2> -<p>{{EmbedLiveSample("Example", 120, 120, "https://mdn.mozillademos.org/files/10061/svg-lineargradient.png")}}</p> - -<h2 id="Характеристики">Характеристики</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('SVG2', 'pservers.html#LinearGradientElement', '<linearGradient>')}}</td> - <td>{{Spec2('SVG2')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'pservers.html#LinearGradients', '<linearGradient>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Начальное определение</td> - </tr> - </tbody> -</table> - -<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2> - -<div id="compat-desktop"> -<p>{{Compat("svg.elements.linearGradient")}}</p> -</div> +{{Specifications}} -<h2 id="Смотрите_также">Смотрите также</h2> +<h2 id="Browser_compatibility">Совместимость с браузерами</h2> -<ul> - <li>{{SVGElement("radialGradient")}}</li> - <li>{{SVGElement("stop")}}</li> -</ul> +<p>{{Compat}}</p> diff --git a/files/ru/web/svg/tutorial/svg_in_html_introduction/index.html b/files/ru/web/svg/tutorial/svg_in_html_introduction/index.html index aba7b679fd..bcce85b746 100644 --- a/files/ru/web/svg/tutorial/svg_in_html_introduction/index.html +++ b/files/ru/web/svg/tutorial/svg_in_html_introduction/index.html @@ -55,7 +55,7 @@ translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction <h2 id="Discussion" name="Discussion">Примечание</h2> -<p>В примере представлен обычный XHTML, CSS и JavaScript код. Здесь есть лишь одна особенность, это наличие SVG элемента. Этот элемент объявлен в специальном пространстве имён SVG, содержит градиент и две фигуры заполненные градиентом. По замыслу, когда пользователь введёт что-нибудь неправильное, то скрипт установит для BODY класс .invalid, где правила стиля изменяют цвет градиента и делают видимым сообщение об ошибке.</p> +<p>В примере представлен обычный XHTML, CSS и JavaScript-код. Здесь есть лишь одна особенность, это наличие SVG элемента. Этот элемент объявлен в специальном пространстве имён SVG, содержит градиент и две фигуры заполненные градиентом. По замыслу, когда пользователь введёт что-нибудь неправильное, то скрипт установит для BODY класс .invalid, где правила стиля изменяют цвет градиента и делают видимым сообщение об ошибке.</p> <p>Такой способ имеет следующие пункты в свою пользу:</p> diff --git a/files/ru/web/web_components/index.html b/files/ru/web/web_components/index.html index dd15703d25..68c16cc449 100644 --- a/files/ru/web/web_components/index.html +++ b/files/ru/web/web_components/index.html @@ -160,7 +160,7 @@ translation_of: Web/Web_Components <tr> <td>{{SpecName("HTML WHATWG","custom-elements.html#custom-elements","custom elements")}}</td> <td>{{Spec2("HTML WHATWG")}}</td> - <td>Определение <a href="/ru/docs/Web/Web_Components/Использование_пользовательских_элементов">пользовательских HTML элементов</a></td> + <td>Определение <a href="/ru/docs/Web/Web_Components/Использование_пользовательских_элементов">пользовательских HTML-элементов</a></td> </tr> <tr> <td>{{SpecName("DOM WHATWG","#shadow-trees","shadow trees")}}</td> diff --git a/files/ru/webassembly/c_to_wasm/index.html b/files/ru/webassembly/c_to_wasm/index.html index f0cfd57bfe..bdd2e6dd3d 100644 --- a/files/ru/webassembly/c_to_wasm/index.html +++ b/files/ru/webassembly/c_to_wasm/index.html @@ -20,8 +20,8 @@ translation_of: WebAssembly/C_to_wasm <p>Когда рабочее окружение подготовлено, попробуем собрать пример кода на языке Си при помощи Emscripten. Вам доступно большое количество опций для настройки компиляции, но мы рассмотрим только два основных сценария компиляции с использованием Emscripten:</p> <ul> - <li>Компиляция в wasm и создание HTML-страницы для запуска вашего кода, а также JavaScript кода, необходимого для работы wasm модуля в веб-среде.</li> - <li>Просто компиляция в wasm и создание JavaScript кода.</li> + <li>Компиляция в wasm и создание HTML-страницы для запуска вашего кода, а также JavaScript-кода, необходимого для работы wasm модуля в веб-среде.</li> + <li>Просто компиляция в wasm и создание JavaScript-кода.</li> </ul> <p>Мы рассмотрим оба способа ниже.</p> @@ -95,7 +95,7 @@ int main(int argc, char ** argv) { <p>В этот раз мы использовали немного другие параметры компиляции:</p> <ul> - <li>Мы указали <code>-o hello2.html</code>, чтобы компилятор по прежнему генерировал необходимый JavaScript код и <code>.html</code> файл.</li> + <li>Мы указали <code>-o hello2.html</code>, чтобы компилятор по прежнему генерировал необходимый JavaScript-код и <code>.html</code> файл.</li> <li>Также, мы указали <code>--shell-file html_template/shell_minimal.html </code>чтобы компилятор использовал ваш шаблон для создания HTML страницы запускающей этот пример.</li> </ul> </li> @@ -105,7 +105,7 @@ int main(int argc, char ** argv) { </ol> <div class="note"> -<p><strong>Примечание</strong>: вы можете указать компилятору создавать только JavaScript кода, без HTML, используя внутри флага <code>-o</code>, <code>.js</code> вместо <code>.html</code> для формата выходного файла, например <code>emcc -o hello2.js hello2.c -O3 -s WASM=1</code>. После этого вы должны создать свой собственный HTML файл с нуля. Однако так делать не рекомендуется — Emscripten требуется большое количество связывающего кода для обработки операций выделения памяти, утечек памяти и других проблем, которые уже включены в предоставляемый шаблон. Намного легче использовать уже готовое решение, чем создавать свои собственные версии самому.</p> +<p><strong>Примечание</strong>: вы можете указать компилятору создавать только JavaScript-кода, без HTML, используя внутри флага <code>-o</code>, <code>.js</code> вместо <code>.html</code> для формата выходного файла, например <code>emcc -o hello2.js hello2.c -O3 -s WASM=1</code>. После этого вы должны создать свой собственный HTML файл с нуля. Однако так делать не рекомендуется — Emscripten требуется большое количество связывающего кода для обработки операций выделения памяти, утечек памяти и других проблем, которые уже включены в предоставляемый шаблон. Намного легче использовать уже готовое решение, чем создавать свои собственные версии самому.</p> </div> <h3 id="Вызов_пользовательской_функции_определённой_в_Си">Вызов пользовательской функции, определённой в Си</h3> diff --git a/files/ru/webassembly/rust_to_wasm/index.html b/files/ru/webassembly/rust_to_wasm/index.html index 9413beea7a..1f2d6d644d 100644 --- a/files/ru/webassembly/rust_to_wasm/index.html +++ b/files/ru/webassembly/rust_to_wasm/index.html @@ -297,7 +297,7 @@ js.then(js => { <p>Заметьте, что вам нужно будет снова ввести ваше имя для npm.</p> -<p>Так мы импортируем наш модуль из папки <code>node_modules</code>. Это не считается лучшей практикой, но это пример, так что пока сойдёт. Как только файл загрузится, он вызовет функцию <code>greet</code> из этого модуля, передав <code>"WebAssembly"</code>, как строку. Обратите внимание, что здесь нет ничего особенного, и всё же мы вызываем код на Rust! Насколько JavaScript код может судить, это просто обычный модуль.</p> +<p>Так мы импортируем наш модуль из папки <code>node_modules</code>. Это не считается лучшей практикой, но это пример, так что пока сойдёт. Как только файл загрузится, он вызовет функцию <code>greet</code> из этого модуля, передав <code>"WebAssembly"</code>, как строку. Обратите внимание, что здесь нет ничего особенного, и всё же мы вызываем код на Rust! Насколько JavaScript-код может судить, это просто обычный модуль.</p> <p>Мы закончили! Давайте попробуем:</p> diff --git a/files/ru/webassembly/using_the_javascript_api/index.html b/files/ru/webassembly/using_the_javascript_api/index.html index 1840b83b92..d5e1b72e4a 100644 --- a/files/ru/webassembly/using_the_javascript_api/index.html +++ b/files/ru/webassembly/using_the_javascript_api/index.html @@ -187,7 +187,7 @@ console.log(sum);</pre> <p><span class="tlid-translation translation"><span title="">Когда приходит время для вызова указателя на функцию, вызывающая сторона WebAssembly предоставляет индекс, который затем может быть проверен на безопасность по таблице перед индексацией и вызовом ссылки на индексированную функцию. Таким образом, таблицы в настоящее время являются лучшим низкоуровневым примитивом, используемым для безопасной и удобной компиляции низкоуровневых возможностей языка программирования.</span></span></p> -<p>Таблицы могут изменятся с помощью метода <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/set">Table.prototype.set()</a></code>, который обновляет одно из значений в таблице, и метода <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/grow">Table.prototype.grow()</a></code>, который увеличивает количество значений, которое может быть размещено в таблице. Это позволяет этому "непрямо-вызываемому набору функций" изменяться со временем, что необходимо для <a href="http://webassembly.org/docs/dynamic-linking/">техник динамического связывания</a>. Изменения немедленно становятся доступными с помощью метода <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get">Table.prototype.get()</a></code> в JavaScript коде и wasm-модулях.</p> +<p>Таблицы могут изменятся с помощью метода <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/set">Table.prototype.set()</a></code>, который обновляет одно из значений в таблице, и метода <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/grow">Table.prototype.grow()</a></code>, который увеличивает количество значений, которое может быть размещено в таблице. Это позволяет этому "непрямо-вызываемому набору функций" изменяться со временем, что необходимо для <a href="http://webassembly.org/docs/dynamic-linking/">техник динамического связывания</a>. Изменения немедленно становятся доступными с помощью метода <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get">Table.prototype.get()</a></code> в JavaScript-коде и wasm-модулях.</p> <h3 id="Пример_таблицы">Пример таблицы</h3> diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index ff820f35f0..24c212fc84 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -223,8 +223,8 @@ /zh-CN/docs/DOM/Element.querySelectorAll /zh-CN/docs/Web/API/Element/querySelectorAll /zh-CN/docs/DOM/EventTarget /zh-CN/docs/Web/API/EventTarget /zh-CN/docs/DOM/File /zh-CN/docs/Web/API/File -/zh-CN/docs/DOM/File.fileName /zh-CN/docs/Web/API/File/fileName -/zh-CN/docs/DOM/File.fileSize /zh-CN/docs/Web/API/File/fileSize +/zh-CN/docs/DOM/File.fileName /zh-CN/docs/conflicting/Web/API/File/name +/zh-CN/docs/DOM/File.fileSize /zh-CN/docs/conflicting/Web/API/Blob/size /zh-CN/docs/DOM/File.getAsBinary /zh-CN/docs/Web/API/File/getAsBinary /zh-CN/docs/DOM/File.getAsText /zh-CN/docs/Web/API/File/getAsText /zh-CN/docs/DOM/File.lastModifiedDate /zh-CN/docs/Web/API/File/lastModifiedDate @@ -1232,9 +1232,11 @@ /zh-CN/docs/Web/API/AudioContext/onstatechange /zh-CN/docs/Web/API/BaseAudioContext/onstatechange /zh-CN/docs/Web/API/AudioContext/sampleRate /zh-CN/docs/Web/API/BaseAudioContext/sampleRate /zh-CN/docs/Web/API/AudioContext/state /zh-CN/docs/Web/API/BaseAudioContext/state +/zh-CN/docs/Web/API/AudioNodeOptions /zh-CN/docs/conflicting/Web/API/AudioNode /zh-CN/docs/Web/API/Blob.size /zh-CN/docs/Web/API/Blob/size /zh-CN/docs/Web/API/Blob.slice /zh-CN/docs/Web/API/Blob/slice /zh-CN/docs/Web/API/Blob.type /zh-CN/docs/Web/API/Blob/type +/zh-CN/docs/Web/API/ByteString /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/String /zh-CN/docs/Web/API/CSSStyleSheet.insertRule /zh-CN/docs/Web/API/CSSStyleSheet/insertRule /zh-CN/docs/Web/API/CSS分页规则 /zh-CN/docs/Web/API/CSSPageRule /zh-CN/docs/Web/API/CanvasCaptureMediaStream /zh-CN/docs/Web/API/CanvasCaptureMediaStreamTrack @@ -1317,12 +1319,14 @@ /zh-CN/docs/Web/API/FetchController/AbortController /zh-CN/docs/Web/API/AbortController/AbortController /zh-CN/docs/Web/API/FetchController/abort /zh-CN/docs/Web/API/AbortController/abort /zh-CN/docs/Web/API/Fetch_API/基本概念 /zh-CN/docs/Web/API/Fetch_API/Basic_concepts -/zh-CN/docs/Web/API/File.fileName /zh-CN/docs/Web/API/File/fileName -/zh-CN/docs/Web/API/File.fileSize /zh-CN/docs/Web/API/File/fileSize +/zh-CN/docs/Web/API/File.fileName /zh-CN/docs/conflicting/Web/API/File/name +/zh-CN/docs/Web/API/File.fileSize /zh-CN/docs/conflicting/Web/API/Blob/size /zh-CN/docs/Web/API/File.getAsBinary /zh-CN/docs/Web/API/File/getAsBinary /zh-CN/docs/Web/API/File.getAsText /zh-CN/docs/Web/API/File/getAsText /zh-CN/docs/Web/API/File.lastModifiedDate /zh-CN/docs/Web/API/File/lastModifiedDate /zh-CN/docs/Web/API/File.name /zh-CN/docs/Web/API/File/name +/zh-CN/docs/Web/API/File/fileName /zh-CN/docs/conflicting/Web/API/File/name +/zh-CN/docs/Web/API/File/fileSize /zh-CN/docs/conflicting/Web/API/Blob/size /zh-CN/docs/Web/API/FileReader/中止事件(abort) /zh-CN/docs/Web/API/FileReader/abort_event /zh-CN/docs/Web/API/FormData/删除 /zh-CN/docs/Web/API/FormData/delete /zh-CN/docs/Web/API/Fullscreen_API/指南 /zh-CN/docs/Web/API/Fullscreen_API/Guide @@ -1381,8 +1385,10 @@ /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/KeyboardEvent/which /zh-CN/docs/Web/API/UIEvent/which /zh-CN/docs/Web/API/Location.replace /zh-CN/docs/Web/API/Location/replace /zh-CN/docs/Web/API/MediaStream.addTrack /zh-CN/docs/Web/API/MediaStream/addTrack +/zh-CN/docs/Web/API/MouseEvent/which /zh-CN/docs/conflicting/Web/API/UIEvent/which /zh-CN/docs/Web/API/Navigator.battery /zh-CN/docs/Web/API/Navigator/battery /zh-CN/docs/Web/API/Navigator.buildID /zh-CN/docs/Web/API/Navigator/buildID /zh-CN/docs/Web/API/Navigator.cookieEnabled /zh-CN/docs/Web/API/Navigator/cookieEnabled diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index ea8dba13d9..f5a9fec677 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -7831,12 +7831,6 @@ "MisicDemone" ] }, - "Web/API/AudioNodeOptions": { - "modified": "2019-03-18T21:39:54.122Z", - "contributors": [ - "WhiteMind" - ] - }, "Web/API/AudioParam": { "modified": "2019-03-23T22:14:20.528Z", "contributors": [ @@ -8264,13 +8258,6 @@ "Spikef" ] }, - "Web/API/ByteString": { - "modified": "2019-07-13T11:30:42.104Z", - "contributors": [ - "RainSlide", - "zhouxu" - ] - }, "Web/API/CDATASection": { "modified": "2020-10-15T21:50:11.923Z", "contributors": [ @@ -13363,20 +13350,6 @@ "QizhongFang" ] }, - "Web/API/File/fileName": { - "modified": "2019-03-23T23:33:53.867Z", - "contributors": [ - "teoli", - "ziyunfei" - ] - }, - "Web/API/File/fileSize": { - "modified": "2019-03-23T23:33:53.292Z", - "contributors": [ - "teoli", - "ziyunfei" - ] - }, "Web/API/File/getAsBinary": { "modified": "2019-03-24T00:16:15.441Z", "contributors": [ @@ -16601,12 +16574,6 @@ "cuixiping" ] }, - "Web/API/KeyboardEvent/which": { - "modified": "2020-10-15T22:35:00.980Z", - "contributors": [ - "xgqfrms" - ] - }, "Web/API/LocalFileSystemSync": { "modified": "2019-03-23T22:09:04.520Z", "contributors": [ @@ -17290,12 +17257,6 @@ "Dcfm" ] }, - "Web/API/MouseEvent/which": { - "modified": "2019-03-18T21:11:17.379Z", - "contributors": [ - "WayneCui" - ] - }, "Web/API/MouseEvent/x": { "modified": "2019-03-23T22:05:16.814Z", "contributors": [ @@ -20821,6 +20782,12 @@ "pans9" ] }, + "Web/API/UIEvent/which": { + "modified": "2020-10-15T22:35:00.980Z", + "contributors": [ + "xgqfrms" + ] + }, "Web/API/URL": { "modified": "2020-10-15T21:33:08.666Z", "contributors": [ @@ -46979,6 +46946,12 @@ "hl7514576" ] }, + "conflicting/Web/API/AudioNode": { + "modified": "2019-03-18T21:39:54.122Z", + "contributors": [ + "WhiteMind" + ] + }, "conflicting/Web/API/Beacon_API": { "modified": "2020-04-23T03:45:20.732Z", "contributors": [ @@ -46987,6 +46960,13 @@ "xgqfrms" ] }, + "conflicting/Web/API/Blob/size": { + "modified": "2019-03-23T23:33:53.292Z", + "contributors": [ + "teoli", + "ziyunfei" + ] + }, "conflicting/Web/API/Canvas_API/Tutorial": { "modified": "2019-03-23T23:20:14.159Z", "contributors": [ @@ -47150,6 +47130,13 @@ "daisyHawen" ] }, + "conflicting/Web/API/File/name": { + "modified": "2019-03-23T23:33:53.867Z", + "contributors": [ + "teoli", + "ziyunfei" + ] + }, "conflicting/Web/API/File_and_Directory_Entries_API/Introduction": { "modified": "2019-03-23T23:17:06.579Z", "contributors": [ @@ -47300,6 +47287,12 @@ "hibernake" ] }, + "conflicting/Web/API/UIEvent/which": { + "modified": "2019-03-18T21:11:17.379Z", + "contributors": [ + "WayneCui" + ] + }, "conflicting/Web/API/URL": { "modified": "2019-03-23T22:22:37.359Z", "contributors": [ @@ -47829,23 +47822,10 @@ ] }, "conflicting/Web/JavaScript/Reference/Global_Objects/String": { - "modified": "2020-10-15T21:27:29.084Z", + "modified": "2019-07-13T11:30:42.104Z", "contributors": [ - "gqbre", - "pabloyshi", - "zhazhjie", - "zqyue", - "Ende93", - "midare", - "Yuxuan_Jiang", - "micheal-death", - "xgqfrms-GitHub", - "Hugh", - "terrycafe520", - "qianjiahao", - "paddingme", - "teoli", - "ziyunfei" + "RainSlide", + "zhouxu" ] }, "conflicting/Web/JavaScript/Reference/Global_Objects/Symbol": { diff --git a/files/zh-cn/web/api/audionodeoptions/index.html b/files/zh-cn/conflicting/web/api/audionode/index.html index 5587111d47..fb6b1b2b4d 100644 --- a/files/zh-cn/web/api/audionodeoptions/index.html +++ b/files/zh-cn/conflicting/web/api/audionode/index.html @@ -1,7 +1,8 @@ --- title: AudioNodeOptions -slug: Web/API/AudioNodeOptions +slug: conflicting/Web/API/AudioNode translation_of: Web/API/AudioNodeOptions +original_slug: Web/API/AudioNodeOptions --- <p>{{APIRef("'Web Audio API'")}}</p> diff --git a/files/zh-cn/web/api/file/filesize/index.html b/files/zh-cn/conflicting/web/api/blob/size/index.html index a434d9db7c..1975c7c0b2 100644 --- a/files/zh-cn/web/api/file/filesize/index.html +++ b/files/zh-cn/conflicting/web/api/blob/size/index.html @@ -1,7 +1,8 @@ --- title: File.fileSize -slug: Web/API/File/fileSize +slug: conflicting/Web/API/Blob/size translation_of: Web/API/File/fileSize +original_slug: Web/API/File/fileSize --- <div> <p>{{APIRef("File API") }}{{non-standard_header}}</p> diff --git a/files/zh-cn/web/api/file/filename/index.html b/files/zh-cn/conflicting/web/api/file/name/index.html index 4a1a83889e..ee26420b69 100644 --- a/files/zh-cn/web/api/file/filename/index.html +++ b/files/zh-cn/conflicting/web/api/file/name/index.html @@ -1,7 +1,8 @@ --- title: File.fileName -slug: Web/API/File/fileName +slug: conflicting/Web/API/File/name translation_of: Web/API/File/fileName +original_slug: Web/API/File/fileName --- <div> <p>{{APIRef("File API") }}{{non-standard_header}}</p> diff --git a/files/zh-cn/web/api/mouseevent/which/index.html b/files/zh-cn/conflicting/web/api/uievent/which/index.html index 591412dda3..760958f975 100644 --- a/files/zh-cn/web/api/mouseevent/which/index.html +++ b/files/zh-cn/conflicting/web/api/uievent/which/index.html @@ -1,12 +1,13 @@ --- title: MouseEvent.which -slug: Web/API/MouseEvent/which +slug: conflicting/Web/API/UIEvent/which tags: - API - 只读 - 非标准 - 鼠标事件 translation_of: Web/API/MouseEvent/which +original_slug: Web/API/MouseEvent/which --- <p>{{APIRef("DOM Events")}}</p> diff --git a/files/zh-cn/web/api/bytestring/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/string/index.html index 7c3c0d004f..b2da7aeebf 100644 --- a/files/zh-cn/web/api/bytestring/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/string/index.html @@ -1,6 +1,6 @@ --- title: ByteString -slug: Web/API/ByteString +slug: conflicting/Web/JavaScript/Reference/Global_Objects/String tags: - API - DOM @@ -9,6 +9,7 @@ tags: - 参考 - 字符串 translation_of: Web/API/ByteString +original_slug: Web/API/ByteString --- <p>{{APIRef("DOM")}}</p> diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.html b/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.html index f549f9919d..9d35d65f08 100644 --- a/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.html +++ b/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.html @@ -35,7 +35,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction <h2 id="什么是API">什么是API?</h2> -<p>应用程序接口（API）是基于编程语言构建的结构，使开发人员更容易地创建复杂的功能。它们抽象了复杂的代码，并提供一些简单的接口规则直接使用。</p> +<p>应用程序接口（API，Application Programming Interface）是基于编程语言构建的结构，使开发人员更容易地创建复杂的功能。它们抽象了复杂的代码，并提供一些简单的接口规则直接使用。</p> <p>来看一个现实中的例子：想想您的房子、公寓或其他住宅的供电方式，如果您想在您的房子里用电，只要把电器的插头插入插座就可以，而不是直接把它连接到电线上——这样做非常低效，而且对于不是电工的人会是困难和危险的。</p> diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html index 038c045279..a565259187 100644 --- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html +++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html @@ -235,11 +235,7 @@ import './App.css';</pre> <h3 id="App_组件"><code>App</code> 组件</h3> -<div class="hidden"> -<p>在 import 所需资源之后，我们定义了一个名为 App 的函数，尽管大部分 JavaScript 社区推崇使用camel命名法，如：“helloWorld”。但React组件使用pascal变量命名法，如“HelloWorld”，来帮助用户辨认一个JSX元素是React组件而非普通的HTML标签。如果您将函数名“App”改为“app”，您的浏览器会显示错误。(时间不够，先翻译到这里了)</p> -</div> - -<p>After the imports, we have a function named <code>App</code>. Whereas most of the JavaScript community prefers camel-case names like <code>helloWorld</code>, React components use pascal-case variable names, like <code>HelloWorld</code>, to make it clear that a given JSX element is a React component, and not a regular HTML tag. If you were to rename the <code>App</code> function to <code>app</code>, your browser would show you an error.</p> +<p>在 import 所需资源之后，我们定义了一个名为 App 的函数，尽管大部分 JavaScript 社区推崇使用驼峰式命名法，如：“helloWorld”。但 React 组件使用帕斯卡命名法，如 “HelloWorld”，来帮助用户辨认一个 JSX 元素是 React 组件而非普通的 HTML 标签。如果您将函数名 “App” 改为 “app”，您的浏览器会显示错误。</p> <p>让我们进一步看下App方法。</p> @@ -266,13 +262,11 @@ import './App.css';</pre> <p>App方法返回一个JSX表达式，这个表达式定义了浏览器最终要渲染的DOM。</p> -<p>表达式中的元素就像以前写的HTML一样，都拥有属性。</p> - -<p>Some elements in the expression have attributes, which are written just like in HTML, following a pattern of <code>attribute="value"</code>. On line 3, the opening <code><a href="/en-US/docs/Web/HTML/Element/div"><div></a></code> tag has a <code>className</code> attribute. This the same as the <code><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a></code> attribute in HTML, but because JSX is JavaScript, we can't use the word <code>class</code> – it's reserved, meaning JavaScript already uses it for a specific purpose and it would cause problems here in our code. A few other HTML attributes are written differently in JSX than they are in HTML too, for the same kind of reason. We'll cover them as we encounter them.</p> +<p>表达式中的元素就像以前写的HTML一样，都拥有属性，并且遵循 <code>attribute="value"</code> 的模式。 在第三行，开始标签 <code><a href="/en-US/docs/Web/HTML/Element/div"><div></a></code> 有着 <code>className</code> 属性。 这个属性与在HTML中的 <code><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a></code> 属性相同，但是由于JSX就是JavaScript, 我们不能使用 <code>class</code> 属性 - 这个是关键字，意味着JavaScript已经用它执行其它任务，使用 <code>class</code> 属性将会在我们的代码中产生冲突。由于同样的原因，一些其它的HTML属性在JSX中也有着不同的书写方式，当我们碰到它们时，我们将会详述。</p> -<p>Take a moment to change the <code><a href="/en-US/docs/Web/HTML/Element/p"><p></a></code> tag on line 6 so that it reads "Hello, world!", then save your file. You'll notice that this change is immediately rendered in the development server running at <code>http://localhost:3000</code> in your browser. Now delete the <code><a href="/en-US/docs/Web/HTML/Element/a"><a></a></code> tag and save; the "Learn React" link will be gone.</p> +<p>把第6行的 <code><a href="/en-US/docs/Web/HTML/Element/p"><p></a></code> 标签内容改为 "Hello, world!" 并保存文件。你会发现这个改变也会立即在浏览器的<code>http://localhost:3000</code> 中同步渲染。 现在删掉 <code><a href="/en-US/docs/Web/HTML/Element/a"><a></a></code> 标签并保存，"Learn React"链接也会同样被删除。</p> -<p>Your <code>App</code> component should now look like this:</p> +<p>你的 <code>App</code> 组件应该如下所示:</p> <pre class="brush: js notranslate">function App() { return ( @@ -287,13 +281,13 @@ import './App.css';</pre> ); }</pre> -<h3 id="Export_statements">Export statements</h3> +<h3 id="Export_statements">Export 语句</h3> -<p>At the very bottom of the <code>App.js</code> file, the statement <code>export default App</code> makes our <code>App</code> component available to other modules.</p> +<p>在 <code>App.js</code> 文件的最底部, <code>export default App</code> 语句使得 <code>App</code> 组件能被其它模块使用.</p> <h2 id="Interrogating_the_index">Interrogating the index</h2> -<p>Let’s open <code>src/index.js</code>, because that's where the <code>App</code> component is being used. This file is the entry point for our app, and it initially looks like this:</p> +<p>现在让我们打开 <code>src/index.js</code>, 因为这也是 <code>App</code> 组件被用到的地方。 这个文件是我们 app 的入口点，在一开始它如下所示</p> <pre class="brush: js notranslate">import React from 'react'; import ReactDOM from 'react-dom'; @@ -308,24 +302,25 @@ ReactDOM.render(<App />, document.getElementById('root')); // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister();</pre> -<p>As with <code>App.js</code>, the file starts by importing all the JS modules and other assets it needs to run. <code>src/index.css</code> holds global styles that are applied to our whole app. We can also see our <code>App</code> component imported here; it is made available for import thanks to the <code>export</code> statement at the bottom of <code>App.js</code>.</p> +<p>就像 <code>App.js</code> 一样,这个文件一开始 import 了所有的 JS 模块和其它运行所需要的资源。<code>src/index.css</code>定义了运用于整个 app 的 global style。 我们可以看到我们的 <code>App</code> 组件也被 imported 了， 这是在 <code>App.js</code> 底部的语句让 import <code>App</code> 变得可行。</p> -<p>Line 7 calls React’s <code>ReactDOM.render()</code> function with two arguments:</p> +<p>第七行调用 React 的 <code>ReactDOM.render()</code> 函数，并传入两个参数：</p> <ul> - <li>The component we want to render, <code><App /></code> in this case.</li> - <li>The DOM element inside which we want the component to be rendered, in this case the element with an ID of <code>root</code>. If you look inside <code>public/index.html</code>, you'll see that this is a <code><div></code> element just inside the <code><body></code>.</li> + <li>我们想要渲染的组件, 在这个例子中是 <code><App /></code> .</li> + + <li>我们想要渲染组件所在的 DOM 元素，在这个例子中是带着 <code>root</code> 标签的元素。 让我们看一下 <code>public/index.html</code> 的代码， 可以看到这有一个 <code><div></code> 元素 在 <code><body></code> 里。 </li> </ul> -<p>All of this tells React that we want to render our React application with the <code>App</code> component as the root, or first component.</p> +<p>上述所有都告诉 React 我们想把 <code>App</code> 组件作为 root 或者第一个组件来渲染我们的 React App。</p> <div class="blockIndicator note"> -<p><strong>Note</strong>: In JSX, React components and HTML elements must have closing slashes. Writing just <code><App></code> or just <code><img></code> will cause an error.</p> +<p><strong>注意</strong>: 在 JSX 中， React 组件和 HTML 元素必须有 closing slashes，如 <code><App /></code>， 如果我们写 <code><App></code> 或者 <code><img></code> 将会报错。</p> </div> -<p><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service workers</a> are interesting pieces of code that help application performance and allow features of your web applications to work offline, but they’re not in scope for this article. You can delete line 5, as well as lines 9 through 12.</p> +<p><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service workers</a> 能让我们的 App 离线运行，但它不在本篇文章的范围中，您可以删除第5行和第9到12行。</p> -<p>Your final <code>index.js</code> file should look like this:</p> +<p>您最终的 <code>index.js</code> 文件应该如下所示：</p> <pre class="brush: js notranslate">import React from 'react'; import ReactDOM from 'react-dom'; @@ -336,17 +331,17 @@ ReactDOM.render(<App />, document.getElementById('root'));</pre> <h2 id="Variables_and_props">Variables and props</h2> -<p>Next, we'll use a few of our JavaScript skills to get a bit more comfortable editing components and working with data in React. We'll talk about how variables are used inside JSX, and introduce props, which are a way of passing data into a component (which can then be accessed using variables).</p> +<p>接下来，我们将使用一些 JavaScript 的技巧来让我们在 React 中编辑组件以及处理数据更加顺手。我们将讨论如何在 JSX 中 使用 variables， 并且介绍 props， props是我们用来往组件里传入数据的一种方法， 传入之后我们可以用 variable 访问传入的变量。</p> <h3 id="Variables_in_JSX">Variables in JSX</h3> -<p>Back in <code>App.js</code>, let’s focus on line 9:</p> +<p>回到 <code>App.js</code>, 让我们看一下第9行:</p> <pre class="brush: js notranslate"><img src={logo} className="App-logo" alt="logo" /></pre> -<p>Here, the <code><img /></code> tag's <code>src</code> attribute value is in curly braces. This is how JSX recognizes variables. React will see <code>{logo}</code>, know you are referring to the logo import on line 2 of our app, then retrieve the logo file and render it.</p> +<p>可以看到， <code><img /></code> 标签的 <code>src</code> 属性只值是在大括号中的 -- <code>{logo}</code>. 这是JSX 识别变量的方式。 React 将会识别 <code>{logo}</code>， 知道您在指在我们 app 第二行引入的 logo， 然后 React 会读取这个文件它并渲染。</p> -<p>Let's try making a variable of our own. Before the return statement of <code>App</code>, add <code>const subject = 'React';</code>. Your <code>App</code> component should now look like this:</p> +<p>让我们试着设置一个我们自己的变量，在 <code>App</code> return 之前， 添加 <code>const subject = 'React';</code>。 您的代码现在应该如下所示：</p> <pre class="brush: js notranslate">function App() { const subject = "React"; @@ -362,7 +357,7 @@ ReactDOM.render(<App />, document.getElementById('root'));</pre> ); }</pre> -<p>Change line 8 to use our <code>subject</code> variable instead of the word "world", like this:</p> +<p>把第8行的 "world" 替换成我们自己的变量 <code>subject</code> ，如下所示：</p> <pre class="brush: js notranslate">function App() { const subject = "React"; @@ -378,19 +373,19 @@ ReactDOM.render(<App />, document.getElementById('root'));</pre> ); }</pre> -<p>When you save, your browser should display "Hello, React!" instead of "Hello, world!"</p> +<p>当我们保存时， 浏览器将会显示 "Hello, React!"， 而不是 "Hello, world!"</p> -<p>Variables are convenient, but the one we've just set doesn’t make great use of React's features. That's where props come in.</p> +<p>变量十分方便，但是我们没有利用到 React 的特性， 接下来我们将介绍 Props。</p> <h3 id="Component_props">Component props</h3> -<p>A <strong>prop</strong> is any data passed into a React component. Props are written inside component calls, and use the same syntax as HTML attributes — <code>prop="value"</code>. Let’s open <code>index.js</code> and give our <code><App/></code> call its first prop.</p> +<p><strong>prop</strong> 是任何传入 React 组件的数据。Props 写在组件中，并且像 HTML 属性一样写成 <code>prop="value"</code>。 让我们打开 <code>index.js</code> 并且为我们的 <code><App/></code> 添加第一个 prop。</p> -<p>Add a prop of <code>subject</code> to the <code><App/></code> component call, with a value of <code>Clarice</code>. When you are done, your code should look something like this:</p> +<p>为 <code><App/></code> 组件添加一个叫 <code>subject</code> 并有着 <code>Clarice</code> 值的 prop。 当完成之后，您的代码应如下所示： </p> <pre class="brush: js notranslate">ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));</pre> -<p>Back in <code>App.js</code>, let's revisit the App function itself, which reads like this (with the <code>return</code> statement shortened for brevity):</p> +<p> 回到 <code>App.js</code>， 代码应该如下所示 （return 中的内容省略了） <pre class="brush: js notranslate">function App() { const subject = "React"; @@ -399,7 +394,7 @@ ReactDOM.render(<App />, document.getElementById('root'));</pre> ); }</pre> -<p>Change the signature of the <code>App</code> function so that it accepts <code>props</code> as a parameter. Just like any other parameter, you can put <code>props</code> in a <code>console.log()</code> to read it out to your browser's console. Go ahead and do that after your <code>subject</code> constant but before the <code>return</code> statement, like so:</p> +<p>改变 <code>App</code> 的函数签名，让它接收 <code>props</code> 作为一个参数。 就像其它参数一样， 您可以把 <code>props</code> 放在 <code>console.log()</code> 中，让其在浏览器打印出来。 把它放在您的 <code>subject</code> 之后，以及 <code>return</code> 之前， 您的代码应如下所示：</p> <pre class="brush: js notranslate">function App(props) { const subject = "React"; @@ -409,13 +404,13 @@ ReactDOM.render(<App />, document.getElementById('root'));</pre> ); }</pre> -<p>Save your file and check your browser's JavaScript console. You should see something like this logged:</p> +<p>保存您的文件并检查您浏览器中的 JavaScript Console， 您将会发现如下所示的语句：</p> <pre class="brush: js notranslate">Object { subject: "Clarice" }</pre> -<p>The object property <code>subject</code> corresponds to the <code>subject</code> prop we added to our <code><App /></code> component call, and the string <code>Clarice</code> corresponds to its value. Component props in React are always collected into objects in this fashion.</p> +<p> 对象的 <code>subject</code> 属性与我们放入 <code>App</code> 函数签名的 prop 相对应，并且 <code>Clarice</code> 字符串与它的值相对应， 在 React 中的组件 props 总是用这种方式传入object 中。</p> -<p>Now that <code>subject</code> is one of our props, let's utilize it in <code>App.js</code>. Change the <code>subject</code> constant so that, instead of defining it as the string <code>React</code>, you are reading the value of <code>props.subject</code>. You can also delete your <code>console.log()</code> if you want.</p> +<p> 现在 <code>subject</code> 是我们的 props 之一了， 让我们在 <code>App.js</code> 中使用它。 用 <code>props.subject</code> 替代原本的 <code>React</code> 字符串， 如果你想的话，也可以删除 <code>console.log()</code>， 您的代码将如下所示： <pre class="brush: js notranslate">function App(props) { const subject = props.subject; @@ -424,20 +419,21 @@ ReactDOM.render(<App />, document.getElementById('root'));</pre> ); }</pre> -<p>When you save, the the app should now greet you with "Hello, Clarice!". If you return to <code>index.js</code>, edit the value of <code>subject</code>, and save, your text will change.</p> +<p>当您保存之后， app 应该会输出 "Hello, Clarice!"。 如果您回到 <code>index.js</code>， 并且修改 <code>subject</code> 的值并保存， 您输出的字也会随之改变。 </p> + +<h2 id="Summary">总结</h2> -<h2 id="Summary">Summary</h2> -<p>This brings us to the end of our initial look at React, including how to install it locally, creating a starter app, and how the basics work. In the next article we'll start building our first proper application — a todo list. Before we do that, however, let's recap some of the things we’ve learned.</p> +<p>以上就是我们对 React 的初步认识， 包括如何在本地下载它， 创建一个初始 app， 以及一些基本的操作。 在下篇文章，我们将会开始创建我们的第一个 app -- 一个任务清单。在我们开始下篇文章之前，让我们先复习下我们现在所学的。</p> -<p>In React:</p> +<p>在 React 中:</p> <ul> - <li>Components can import modules they need, and must export themselves at the bottom of their files.</li> - <li>Component functions are named with <code>PascalCase</code>.</li> - <li>You can read JSX variables by putting them between curly braces, like <code>{so}</code>.</li> - <li>Some JSX attributes are different to HTML attributes, so that they don't conflict with JavaScript reserved words. For example, <code>class</code> in HTML translates to <code>className</code> in JSX. Note that multi-word attributes are camel-cased.</li> - <li>Props are written just like attributes inside component calls, and are passed into components.</li> + <li>组件可以 import 它们需要的模块，并且在文件底部将自身 export，以让其它组件使用。</li> + <li>组件是用 <code>PascalCase</code> 也就是帕斯卡命名法命名的。</li> + <li>通过把变量放在大括号中，您可以读取 JSX 的变量， 如<code>{so}</code> </li> + <li>一些 JSX 属性与 HTML 属性不相同，这样就不会与JavaScript的保留字相冲突，比如说，在 HTML 中的 <code>class</code> 会在 JSX 中转译为 <code>className</code>。 注意这些属性都是驼峰式命名的。</li> + <li>Props 就像属性一样写在组件里，并且传入组件。</li> </ul> <p>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p> diff --git a/files/zh-cn/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/zh-cn/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html index ac91393cc0..6a901933a9 100644 --- a/files/zh-cn/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html +++ b/files/zh-cn/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html @@ -85,11 +85,11 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and <p>Developers should use ARIA states to indicate the state of UI widget elements and use CSS attribute selectors to alter the visual appearance based on the state changes (rather than using script to change a class name on the element).</p> -<p>The Open Ajax Alliance website provides <a class="external" href="http://web.archive.org/web/20160303012540/http://oaa-accessibility.org/example/25/" title="http://www.oaa-accessibility.org/example/25/">an example of CSS attribute selectors based on ARIA states</a>. The example shows a WYSIWYG editor interface with a dynamic menu system. Items currently selected in a menu, such as the font face, are visually distinguished from other items. The relevant parts of the example are explained below.</p> +<p>The Open Ajax Alliance website provides an example of CSS attribute selectors based on ARIA states. The example shows a WYSIWYG editor interface with a dynamic menu system. Items currently selected in a menu, such as the font face, are visually distinguished from other items. The relevant parts of the example are explained below.</p> <p>In this example, the HTML for a menu has the form shown in Example 1a. Note how, on lines 7 and 13, the <strong><code>aria-checked</code></strong> property is used to declare the selection state of the menu items.</p> -<p><em>Example 1a. HTML for a selectable menu (adapted from <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>).</em></p> +<p><em>Example 1a. HTML for a selectable menu.</em></p> <pre class="brush: html"><ul id="fontMenu" class="menu" role="menu" aria-hidden="true"> <li id="sans-serif" @@ -109,7 +109,7 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and <p>The CSS that is used to alter the visual appearance of the selected item is shown in Example 1b. Note that there is no custom classname used, only the status of the <strong><code>aria-checked</code></strong> attribute on line 1.</p> -<p><em>Example 1b. Attribute-based selector for indicating state (from <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>).</em></p> +<p><em>Example 1b. Attribute-based selector for indicating state.</em></p> <pre class="brush: css">li[aria-checked="true"] { font-weight: bold; @@ -121,7 +121,7 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and <p>The JavaScript to update the <strong><code>aria-checked</code></strong> property has the form shown in Example 1c. Note that the script only updates the <strong><code>aria-checked</code></strong> attribute (lines 3 and 8); it does not need to also add or remove a custom classname.</p> -<p><em>Example 1c. JavaScript to update the aria-checked attribute (based on <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>)</em>.</p> +<p><em>Example 1c. JavaScript to update the aria-checked attribute</em>.</p> <pre class="brush: javascript">var processMenuChoice = function(item) { // 'check' the selected item @@ -140,11 +140,11 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and <p>When content visibility is changed (i.e., an element is hidden or shown), developers should change the <strong><code>aria-hidden</code></strong> property value. The techniques described above should be used to declare CSS to visually hide an element using <code>display:none</code>.</p> -<p>The Open Ajax Alliance website provides <a class="external" href="http://www.oaa-accessibility.org/example/39/" title="http://www.oaa-accessibility.org/example/39/">an example of a tooltip that uses <strong><code>aria-hidden</code></strong> to control the visibility of the tooltip</a>. The example shows a simple web form with tooltips containing instructions associated with the entry fields. The relevant parts of the example are explained below.</p> +<p>The Open Ajax Alliance website provides an example of a tooltip that uses <strong><code>aria-hidden</code></strong> to control the visibility of the tooltip. The example shows a simple web form with tooltips containing instructions associated with the entry fields. The relevant parts of the example are explained below.</p> <p>In this example, the HTML for the tooltip has the form shown in Example 2a. Line 9 sets the <strong><code>aria-hidden</code></strong> state to <code>true</code>.</p> -<p><em>Example 2a. HTML for a tooltip (adapted from <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p> +<p><em>Example 2a. HTML for a tooltip.</em></p> <pre class="brush: html"><div class="text"> <label id="tp1-label" for="first">First Name:</label> @@ -160,7 +160,7 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and <p>The CSS for this markup is shown in Example 2b. Note that there is no custom classname used, only the status of the <strong><code>aria-hidden</code></strong> attribute on line 1.</p> -<p><em>Example 2b. Attribute-based selector for indicating state (from <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p> +<p><em>Example 2b. Attribute-based selector for indicating state.</em></p> <pre class="brush: css">div.tooltip[aria-hidden="true"] { display: none; @@ -169,7 +169,7 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and <p>The JavaScript to update the <strong><code>aria-hidden</code></strong> property has the form shown in Example 2c. Note that the script only updates the <strong><code>aria-hidden</code></strong> attribute (line 2); it does not need to also add or remove a custom classname.</p> -<p><em>Example 2c. JavaScript to update the aria-checked attribute (based on <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p> +<p><em>Example 2c. JavaScript to update the aria-checked attribute.</em></p> <pre class="brush: javascript">var showTip = function(el) { el.setAttribute('aria-hidden', 'false'); diff --git a/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html b/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html index 80be18aa54..dde89b01be 100644 --- a/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html +++ b/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html @@ -117,13 +117,6 @@ an inert preparation prescribed more for the mental relief of the patient than f </div> </pre> -<h4 id="操作实例">操作实例:</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/button2/" title="http://www.oaa-accessibility.org/examplep/button2/">Button example</a> uses <code>aria-labelledby</code></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/combobox1/" title="http://www.oaa-accessibility.org/examplep/combobox1/">Combobox example</a> uses <code>aria-labelledby</code></li> -</ul> - <h3 id="注意">注意 </h3> <p>The most common <em>accessibility API</em> mapping for a label is the <em>accessible name</em> property</p> diff --git a/files/zh-cn/web/accessibility/keyboard-navigable_javascript_widgets/index.html b/files/zh-cn/web/accessibility/keyboard-navigable_javascript_widgets/index.html index 178539ea3a..303570acbe 100644 --- a/files/zh-cn/web/accessibility/keyboard-navigable_javascript_widgets/index.html +++ b/files/zh-cn/web/accessibility/keyboard-navigable_javascript_widgets/index.html @@ -135,7 +135,7 @@ translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets <li>更改之前被 focus 中元素的 tabindex 为“-1”.</li> </ol> -<p>这里有个 <a class="external text" href="http://www.oaa-accessibility.org/example/40/" rel="nofollow" title="http://www.oaa-accessibility.org/example/40/">WAI-ARIA tree view</a> 的例子是使用这种方案的。</p> +<p>这里有个 WAI-ARIA tree view 的例子是使用这种方案的。</p> <h5 id="提示">提示</h5> @@ -153,7 +153,7 @@ translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets <p>这个办法包含绑定一个单独的事件句柄到容器窗口组件上，运用 <code>aria-activedescendent属性</code>来追踪一个 "虚拟" 焦点。（关于ARIA更多的信息, 查看 <a class="external text" href="../../../../An_Overview_of_Accessible_Web_Applications_and_Widgets" rel="nofollow" title="https://developer.mozilla.org/An_Overview_of_Accessible_Web_Applications_and_Widgets">overview of accessible web applications and widgets</a>.）</p> -<p><code>aria-activedescendant</code> 属性用来标识拥有虚拟焦点的后代元素的 ID。在窗口容器的事件句柄里面在键盘和鼠标事件响应更新 <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">aria-activedescendant 值并且确保当前</span><span style="line-height: 1.5;">The event handler on the container must respond to key and mouse events by updating the value of </span><code style="font-size: 14px;">aria-activedescendant</code><span style="line-height: 1.5;"> and ensuring that the current item is styled appropriately (for example, with a border or background color). See the source code of this </span><a class="external text" href="http://www.oaa-accessibility.org/example/28/" rel="nofollow" style="line-height: 1.5;" title="http://www.oaa-accessibility.org/example/28/">ARIA radiogroup example</a><span style="line-height: 1.5;"> for a direct illustration of how this works.</span></p> +<p><code>aria-activedescendant</code> 属性用来标识拥有虚拟焦点的后代元素的 ID。在窗口容器的事件句柄里面在键盘和鼠标事件响应更新 <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">aria-activedescendant 值并且确保当前</span><span style="line-height: 1.5;">The event handler on the container must respond to key and mouse events by updating the value of </span><code style="font-size: 14px;">aria-activedescendant</code><span style="line-height: 1.5;"> and ensuring that the current item is styled appropriately (for example, with a border or background color). </span></p> <h5 id="Tips">Tips</h5> diff --git a/files/zh-cn/web/api/keyboardevent/which/index.html b/files/zh-cn/web/api/uievent/which/index.html index 56136f398e..b94bab0616 100644 --- a/files/zh-cn/web/api/keyboardevent/which/index.html +++ b/files/zh-cn/web/api/uievent/which/index.html @@ -1,6 +1,6 @@ --- title: KeyboardEvent.which -slug: Web/API/KeyboardEvent/which +slug: Web/API/UIEvent/which tags: - Code - DOM @@ -9,6 +9,7 @@ tags: - keyCode - which translation_of: Web/API/KeyboardEvent/which +original_slug: Web/API/KeyboardEvent/which --- <div>{{ APIRef("DOM Events") }} {{Deprecated_header}}</div> diff --git a/files/zh-cn/web/api/web_speech_api/index.html b/files/zh-cn/web/api/web_speech_api/index.html index c72b65cdd5..fef7cff1a0 100644 --- a/files/zh-cn/web/api/web_speech_api/index.html +++ b/files/zh-cn/web/api/web_speech_api/index.html @@ -22,7 +22,7 @@ translation_of: Web/API/Web_Speech_API <p>Web Speech API 使 Web 应用能够处理语音数据，该项 API 包含以下两个部分：</p> <ul> - <li>语音识别通过 {{domxref("SpeechRecognition")}} 接口进行访问，它提供了识别从音频输入（通常是设备默认的语音识别服务）中识别语音情景的能力。一般来说，你将使用该接口的构造函数来构造一个新的 {{domxref("SpeechRecognition")}} 对象，该对象包含了一些列有效的对象处理函数来检测识别设备麦克风中的语音输入。{{domxref("SpeechGrammar")}} 接口则表示了你应用中想要识别的特定文法。文法则通过 <a href="http://www.w3.org/TR/jsgf/">JSpeech Grammar Format</a> (<strong>JSGF</strong>.) 来定义。</li> + <li>语音识别通过 {{domxref("SpeechRecognition")}} 接口进行访问，它提供了识别从音频输入（通常是设备默认的语音识别服务）中识别语音情景的能力。一般来说，你将使用该接口的构造函数来构造一个新的 {{domxref("SpeechRecognition")}} 对象，该对象包含了一系列有效的对象处理函数来检测识别设备麦克风中的语音输入。{{domxref("SpeechGrammar")}} 接口则表示了你应用中想要识别的特定文法。文法则通过 <a href="http://www.w3.org/TR/jsgf/">JSpeech Grammar Format</a> (<strong>JSGF</strong>.) 来定义。</li> <li>语音合成通过 {{domxref("SpeechSynthesis")}} 接口进行访问，它提供了文字到语音（TTS）的能力，这使得程序能够读出它们的文字内容（通常使用设备默认的语音合成器）。不同的声音类类型通过 {{domxref("SpeechSynthesisVoice")}} 对象进行表示，不同部分的文字则由 {{domxref("SpeechSynthesisUtterance")}} 对象来表示。你可以将它们传递给 {{domxref("SpeechSynthesis.speak()")}} 方法来产生语音。</li> </ul> diff --git a/files/zh-cn/web/css/_doublecolon_first-letter/index.html b/files/zh-cn/web/css/_doublecolon_first-letter/index.html index f679d5cdbf..2876bd9e1c 100644 --- a/files/zh-cn/web/css/_doublecolon_first-letter/index.html +++ b/files/zh-cn/web/css/_doublecolon_first-letter/index.html @@ -5,7 +5,7 @@ translation_of: 'Web/CSS/::first-letter' --- <p>{{ CSSRef() }}</p> -<p id="概述"><a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/Pseudo-elements" title="Pseudo-elements">伪元素</a> <code>::first-letter会</code>选中某 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">block-level element</a>（块级元素）第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格） 。</p> +<p id="概述"><a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/Pseudo-elements" title="Pseudo-elements">伪元素</a> <code>::first-letter</code>会选中某 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">block-level element</a>（块级元素）第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格） 。</p> <pre><code>/* Selects the first letter of a <p> */ p::first-letter { @@ -30,7 +30,7 @@ p::first-letter { <p> </p> -<p>只有一小部分CSS可以在包含<code>使用了::first-letter</code> 伪元素选择器的CSS规则集声明块内运用:</p> +<p>只有一小部分CSS可以在包含使用了<code>::first-letter</code> 伪元素选择器的CSS规则集声明块内运用:</p> <ul> <li>所有的字体属性 : {{ Cssxref("font") }}, {{ Cssxref("font-style") }}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{ Cssxref("font-variant") }}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{cssxref("font-size-adjust")}}, {{ Cssxref("line-height") }} 以及 {{ Cssxref("font-family") }}.</li> diff --git a/files/zh-cn/web/css/_doublecolon_first-line/index.html b/files/zh-cn/web/css/_doublecolon_first-line/index.html index af932f21df..efbb961c47 100644 --- a/files/zh-cn/web/css/_doublecolon_first-line/index.html +++ b/files/zh-cn/web/css/_doublecolon_first-line/index.html @@ -9,7 +9,7 @@ translation_of: 'Web/CSS/::first-line' <p>和其他所有的 伪元素一样，::first-line 不能匹配任何真实存在的html元素。</p> -<p> ::first-line 伪元素只能在块容器中,所以,<code>::first-line伪元素</code>只能在一个display值为block, <code>inline-block</code>, <code>table-cell</code> 或者 <code>table-caption中有用</code>.。在其他的类型中，<code>::first-line</code> 是不起作用的.</p> +<p> ::first-line 伪元素只能在块容器中,所以,<code>::first-line</code>伪元素只能在一个display值为block, <code>inline-block</code>, <code>table-cell</code> 或者 <code>table-caption</code>中有用.。在其他的类型中，<code>::first-line</code> 是不起作用的.</p> <p> </p> @@ -17,7 +17,7 @@ translation_of: 'Web/CSS/::first-line' <p> </p> -<p>在一个使用了 <code>::first-line 伪元素的选择器中，</code>只有很小的一部分css属性能被使用：</p> +<p>在一个使用了 <code>::first-line</code> 伪元素的选择器中，只有很小的一部分css属性能被使用：</p> <ul> <li>所有和字体有关的属性：{{Cssxref("font")}}, {{cssxref("font-kerning")}}, {{Cssxref("font-style")}}, {{Cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{Cssxref("font-weight")}}, {{Cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}}, and {{Cssxref("font-family")}}</li> diff --git a/files/zh-cn/web/html/block-level_elements/index.html b/files/zh-cn/web/html/block-level_elements/index.html index 77db95f538..cb0df4261a 100644 --- a/files/zh-cn/web/html/block-level_elements/index.html +++ b/files/zh-cn/web/html/block-level_elements/index.html @@ -8,7 +8,7 @@ tags: - 指南 translation_of: Web/HTML/Block-level_elements --- -<p>HTML（超文本标记语言）中元素大多数都是“块级”元素或<a href="/zh-CN/docs/HTML/Inline_elements" title="/zh-CN/docs/HTML/Inline_elements">行内元素</a>。块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。这篇文章帮助解释这个概念。</p> +<p>HTML（超文本标记语言）中元素大多数都是“块级”元素或<a href="/zh-CN/docs/HTML/Inline_elements" title="/zh-CN/docs/HTML/Inline_elements">行内元素</a>。块级元素占据其父元素（容器）的整个水平空间，垂直空间等于其内容高度，因此创建了一个“块”。这篇文章帮助解释这个概念。</p> <p>通常浏览器会在块级元素前后另起一个新行。下面的例子表明了块级元素的作用：</p> diff --git a/files/zh-cn/web/html/element/link/index.html b/files/zh-cn/web/html/element/link/index.html index e2b2038e43..b8b9fe0246 100644 --- a/files/zh-cn/web/html/element/link/index.html +++ b/files/zh-cn/web/html/element/link/index.html @@ -60,7 +60,7 @@ translation_of: Web/HTML/Element/link <dl> <dt>{{htmlattrdef("as")}}</dt> - <dd>该属性仅在<code><link></code>元素设置了 <code>rel="preload"</code> 时才能使用。它规定了<code><link>元素</code>加载的内容的类型，对于内容的优先级、请求匹配、正确的<a href="/zh-CN/docs/Web/HTTP/CSP">内容安全策略</a>的选择以及正确的 {{httpheader("Accept")}}请求头的设置，这个属性是必需的。</dd> + <dd>该属性仅在<code><link></code>元素设置了 <code>rel="preload"</code> 或者 <code>rel="prefetch"</code> 时才能使用。它规定了<code><link>元素</code>加载的内容的类型，对于内容的优先级、请求匹配、正确的<a href="/zh-CN/docs/Web/HTTP/CSP">内容安全策略</a>的选择以及正确的 {{httpheader("Accept")}}请求头的设置，这个属性是必需的。</dd> <dt> <table> <thead> diff --git a/files/zh-cn/web/javascript/a_re-introduction_to_javascript/index.html b/files/zh-cn/web/javascript/a_re-introduction_to_javascript/index.html index bcf94763b0..7c567f3902 100644 --- a/files/zh-cn/web/javascript/a_re-introduction_to_javascript/index.html +++ b/files/zh-cn/web/javascript/a_re-introduction_to_javascript/index.html @@ -327,7 +327,7 @@ do { <pre class="brush: js notranslate">var allowed = (age > 18) ? "yes" : "no"; </pre> -<p>在需要多重分支时可以使用 <code>基于一个数字或字符串的switch</code> 语句：</p> +<p>在需要多重分支时可以使用基于一个数字或字符串的 <code>switch</code> 语句：</p> <pre class="brush: js notranslate">switch(action) { case 'draw': diff --git a/files/zh-cn/web/javascript/data_structures/index.html b/files/zh-cn/web/javascript/data_structures/index.html index 193a5cc08a..8e1d7d433a 100644 --- a/files/zh-cn/web/javascript/data_structures/index.html +++ b/files/zh-cn/web/javascript/data_structures/index.html @@ -26,7 +26,7 @@ foo = true; // foo is a Boolean now <p>最新的 ECMAScript 标准定义了 8 种数据类型:</p> <ul> - <li>6 种{{Glossary("Primitive", "原始类型")}}，使用 {{Glossary("typeof")}} 运算符检查: + <li>7 种{{Glossary("Primitive", "原始类型")}}，使用 {{Glossary("typeof")}} 运算符检查: <ul> <li>{{Glossary("undefined")}}：<code>typeof instance === "undefined"</code></li> <li>{{Glossary("Boolean")}}：<code>typeof instance === "boolean"</code></li> @@ -34,9 +34,9 @@ foo = true; // foo is a Boolean now <li>{{Glossary("String")}}：<code>typeof instance === "string</code></li> <li>{{Glossary("BigInt")}}：<code>typeof instance === "bigint"</code></li> <li>{{Glossary("Symbol")}} ：<code>typeof instance === "symbol"</code></li> + <li>{{Glossary("null")}}：<code>typeof instance === "object"</code>。</li> </ul> </li> - <li>{{Glossary("null")}}：<code>typeof instance === "object"</code>。</li> <li>{{Glossary("Object")}}：<code>typeof instance === "object"</code>。任何 {{Glossary("constructed")}} 对象实例的特殊非数据结构类型，也用做数据结构：new {{Glossary("Object")}}，new {{Glossary("Array")}}，new {{Glossary("Map")}}，new {{Glossary("Set")}}，new {{Glossary("WeakMap")}}，new {{Glossary("WeakSet")}}，new {{Glossary("Date")}}，和几乎所有通过 {{Glossary("new keyword")}} 创建的东西。</li> </ul> diff --git a/files/zh-cn/web/javascript/reference/global_objects/function/apply/index.html b/files/zh-cn/web/javascript/reference/global_objects/function/apply/index.html index 3e87c9ded3..0bf0414cf8 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/function/apply/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/function/apply/index.html @@ -66,7 +66,7 @@ console.info(array); // ["a", "b", 0, 1, 2] <h3 id="apply_and_built-in_functions" name="apply_and_built-in_functions">使用<code>apply</code>和内置函数</h3> -<p>对于一些需要写循环以便历数组各项的需求，我们可以用<code>apply</code>完成以避免循环。</p> +<p>对于一些需要写循环以遍历数组各项的需求，我们可以用<code>apply</code>完成以避免循环。</p> <p>下面是示例，我们将用<code>Math.max</code>/<code>Math.min</code>求得数组中的最大/小值。</p> diff --git a/files/zh-cn/web/web_components/using_shadow_dom/index.html b/files/zh-cn/web/web_components/using_shadow_dom/index.html index 1267f49508..02dbe80525 100644 --- a/files/zh-cn/web/web_components/using_shadow_dom/index.html +++ b/files/zh-cn/web/web_components/using_shadow_dom/index.html @@ -53,7 +53,7 @@ translation_of: Web/Web_Components/Using_shadow_DOM <p>你可以使用同样的方式来操作 Shadow DOM，就和操作常规 DOM 一样——例如添加子节点、设置属性，以及为节点添加自己的样式（例如通过 <code>element.style</code> 属性），或者为整个 Shadow DOM 添加样式（例如在 {{htmlelement("style")}} 元素内添加样式）。不同的是，Shadow DOM 内部的元素始终不会影响到它外部的元素（除了 {{CSSxRef(":focus-within")}}），这为封装提供了便利。</p> -<p>注意，不管从哪个方面来看，Shadow DOM 都不是一个新事物——在过去的很长一段时间里，浏览器用它来封装一些元素的内部结构。以一个有着默认播放控制按钮的 {{htmlelement("video")}} 元素为例。你所能看到的只是一个 <code><video></code> 标签，实际上，在它的 Shadow DOM 中，包含来一系列的按钮和其他控制器。Shadow DOM 标准允许你为你自己的元素（custom element）维护一组 Shadow DOM。</p> +<p>注意，不管从哪个方面来看，Shadow DOM 都不是一个新事物——在过去的很长一段时间里，浏览器用它来封装一些元素的内部结构。以一个有着默认播放控制按钮的 {{htmlelement("video")}} 元素为例。你所能看到的只是一个 <code><video></code> 标签，实际上，在它的 Shadow DOM 中，包含了一系列的按钮和其他控制器。Shadow DOM 标准允许你为你自己的元素（custom element）维护一组 Shadow DOM。</p> <h2 id="基本用法">基本用法</h2> diff --git a/files/zh-tw/_redirects.txt b/files/zh-tw/_redirects.txt index ba04b91d36..15d6d7d893 100644 --- a/files/zh-tw/_redirects.txt +++ b/files/zh-tw/_redirects.txt @@ -544,6 +544,7 @@ /zh-TW/docs/Web/API/Document_Object_Model/事件 /zh-TW/docs/orphaned/Web/API/Document_Object_Model/Events /zh-TW/docs/Web/API/ElementCSSInlineStyle/style /zh-TW/docs/orphaned/Web/API/ElementCSSInlineStyle/style /zh-TW/docs/Web/API/Event/createEvent /zh-TW/docs/Web/API/Document/createEvent +/zh-TW/docs/Web/API/File/fileName /zh-TW/docs/Web/API/File/name /zh-TW/docs/Web/API/Geolocation/Using_geolocation /zh-TW/docs/Web/API/Geolocation_API /zh-TW/docs/Web/API/HTMLElement/dataset /zh-TW/docs/orphaned/Web/API/HTMLOrForeignElement/dataset /zh-TW/docs/Web/API/HTMLElement/style /zh-TW/docs/orphaned/Web/API/ElementCSSInlineStyle/style diff --git a/files/zh-tw/_wikihistory.json b/files/zh-tw/_wikihistory.json index bbfdfa477f..1185efe0ba 100644 --- a/files/zh-tw/_wikihistory.json +++ b/files/zh-tw/_wikihistory.json @@ -3654,7 +3654,7 @@ "orinx" ] }, - "Web/API/File/fileName": { + "Web/API/File/name": { "modified": "2019-03-23T22:06:22.686Z", "contributors": [ "lynn456" diff --git a/files/zh-tw/web/accessibility/aria/forms/basic_form_hints/index.html b/files/zh-tw/web/accessibility/aria/forms/basic_form_hints/index.html index 532911294d..007ce8bbe3 100644 --- a/files/zh-tw/web/accessibility/aria/forms/basic_form_hints/index.html +++ b/files/zh-tw/web/accessibility/aria/forms/basic_form_hints/index.html @@ -41,7 +41,7 @@ translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints <p>下面的範例顯示使用無序列表 ( unordered list ) 實現的單選按鈕組 ( radio button group )。注意程式碼第三行 , {{ HTMLElement("li") }} 元素將 <code><strong>aria-labelledby</strong></code> 屬性設置為 <code>"rg1_label"</code> , 在第一行中元素 {{ HTMLElement("h3") }} 的 <strong><code>id</code> </strong>, 即單選按鈕組的標籤。</p> -<p><em>範例 2. </em>使用無序列表實現的單選按鈕組<em> ( 改編自 <a href="http://www.oaa-accessibility.org/examplep/radio1/">http://www.oaa-accessibility.org/examplep/radio1/</a>)</em></p> +<p><em>範例 2. </em>使用無序列表實現的單選按鈕組</p> <pre class="brush: html"><h3 id="rg1_label">Lunch Options</h3> diff --git a/files/zh-tw/web/api/file/filename/index.html b/files/zh-tw/web/api/file/name/index.html index 0e6cceb4f3..1581728451 100644 --- a/files/zh-tw/web/api/file/filename/index.html +++ b/files/zh-tw/web/api/file/name/index.html @@ -1,7 +1,8 @@ --- title: File.fileName -slug: Web/API/File/fileName +slug: Web/API/File/name translation_of: Web/API/File/fileName +original_slug: Web/API/File/fileName --- <p>{{APIRef("File API")}}{{non-standard_header}}</p> |
