diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-13 17:16:08 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-13 17:16:08 -0500 |
| commit | a5fcfafb665e96cae5d04dfba927db8dcdfd7f14 (patch) | |
| tree | 8eda610157e718083f580c6b31b0e101c3cf0bbc | |
| parent | ba5d6f9610d6bb352eecfa3ded1bb99bc9892916 (diff) | |
| download | translated-content-a5fcfafb665e96cae5d04dfba927db8dcdfd7f14.tar.gz translated-content-a5fcfafb665e96cae5d04dfba927db8dcdfd7f14.tar.bz2 translated-content-a5fcfafb665e96cae5d04dfba927db8dcdfd7f14.zip | |
2020-12-13
25 files changed, 573 insertions, 299 deletions
diff --git a/files/es/web/api/navigator/mediadevices/index.html b/files/es/web/api/navigator/mediadevices/index.html new file mode 100644 index 0000000000..0a7e70e7e4 --- /dev/null +++ b/files/es/web/api/navigator/mediadevices/index.html @@ -0,0 +1,49 @@ +--- +title: Navigator.mediaDevices +slug: Web/API/Navigator/mediaDevices +translation_of: Web/API/Navigator/mediaDevices +--- +<div>{{APIRef("Media Capture and Streams")}}</div> + +<p>The <strong><code>Navigator.mediaDevices</code></strong> read-only property returns a {{domxref("MediaDevices")}} object, which provides access to connected media input devices like cameras and microphones, as well as screen sharing.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">var <em>mediaDevices</em> = navigator.mediaDevices; +</pre> + +<h3 id="Return_value">Return value</h3> + +<p>The {{domxref("MediaDevices")}} singleton object. Usually, you just use this object's members directly, such as by calling {{domxref("navigator.mediaDevices.getUserMedia()")}}.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Media Capture', '#mediadevices', 'NavigatorUserMedia.mediaDevices')}}</td> + <td>{{Spec2('Media Capture')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Navigator.mediaDevices")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a>: The entry point to the documentation about the entire media stream API.</li> + <li><a href="/en-US/docs/Web/API/WebRTC_API"><font><font>API de WebRTC</font></font></a><font><font> : documentación sobre la API de WebRTC, que está estrechamente relacionada.</font></font></li> +</ul> diff --git a/files/es/web/css/background-attachment/index.html b/files/es/web/css/background-attachment/index.html index 0075a07f88..a632fd024e 100644 --- a/files/es/web/css/background-attachment/index.html +++ b/files/es/web/css/background-attachment/index.html @@ -55,7 +55,7 @@ translation_of: Web/CSS/background-attachment get out again. </p></pre> -<h4 id="Result">Result</h4> +<h4 id="Resultado">Resultado</h4> <p>{{EmbedLiveSample("Simple_example")}}</p> @@ -89,7 +89,7 @@ translation_of: Web/CSS/background-attachment little golden key in the lock, and to her great delight it fitted! </p></pre> -<h4 id="Resultado">Resultado</h4> +<h4 id="Resultado_2">Resultado</h4> <p>{{EmbedLiveSample("Multiple_background_image_support")}}</p> diff --git a/files/es/web/javascript/referencia/objetos_globales/date/getfullyear/index.html b/files/es/web/javascript/referencia/objetos_globales/date/getfullyear/index.html index be63745dbd..0d047fbbc3 100644 --- a/files/es/web/javascript/referencia/objetos_globales/date/getfullyear/index.html +++ b/files/es/web/javascript/referencia/objetos_globales/date/getfullyear/index.html @@ -1,121 +1,64 @@ --- title: Date.prototype.getFullYear() slug: Web/JavaScript/Referencia/Objetos_globales/Date/getFullYear +tags: + - Fecha + - JavaScript + - Prototipo + - Referencia + - metodo translation_of: Web/JavaScript/Reference/Global_Objects/Date/getFullYear --- <div>{{JSRef}}</div> -<p>El método <strong><code>getFullYear()</code></strong> devuelve el año del objeto de fecha especificado acorde al tiempo local.</p> +<p>El método <strong><code>getFullYear()</code></strong> devuelve el año de la fecha indicada acorde a la hora local.</p> -<p>Es prefererible usar este método en sustitución del método <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getYear">getYear()</a>.</p> +<p>Usa este método en lugar del método {{jsxref("Date.prototype.getYear()", "getYear()")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getfullyear.html","shorter")}}</div> <h2 id="Sintaxis">Sintaxis</h2> -<pre class="syntaxbox"><code><var>dateObj</var>.getFullYear()</code></pre> +<pre class="syntaxbox notranslate"><var>dateObj</var>.getFullYear()</pre> -<h3 id="Parámetros">Parámetros</h3> +<h3 id="Valor_devuelto">Valor devuelto</h3> -<p>Ninguno.</p> +<p>Un número correspondiente al año de la fecha indicada, según la hora local.</p> -<h3 id="Devuelve">Devuelve</h3> +<h2 id="Descripción">Descripción</h2> -<p>El valor devuelto por <code>getFullYear()</code> es un número absolute. Para fechas entre los años 1000 y 9999, <code>getFullYear()</code> devuelve un número de cuatro cifras, por ejemplo, 1995. Use esta función para obtener un año que cumpla con el efecto del año 2000.</p> +<p>El valor devuelto por <code>getFullYear()</code> es un número absoluto. Para fechas entre los años 1000 y 9999, <code>getFullYear()</code> devuelve un número de cuatro cifras, por ejemplo, 1995. Utiliza esta función para obtener un año que cumpla con los años posteriores al 2000.</p> <h2 id="Ejemplos">Ejemplos</h2> -<h3 id="Usando_getFullYear">Usando <code>getFullYear()</code></h3> +<h3 id="Utilizando_getFullYear">Utilizando getFullYear()</h3> -<p>El siguiente ejemplo asigna un valor de cuatro digitos con el año actual a la variable <code>year</code>.</p> +<p>El siguiente ejemplo asigna el valor de cuatro dígitos del año actual a la variable <code>year</code>.</p> -<pre class="brush: js">var today = new Date(); +<pre class="brush: js notranslate">var today = new Date(); var year = today.getFullYear(); </pre> <h2 id="Especificaciones">Especificaciones</h2> <table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificaciones</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> + <thead> <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Definición inicial. Implementado en JavaScript 1.3.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.9.5.10', 'Date.prototype.getFullYear')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> + <th scope="col">Especificación</th> </tr> + </thead> + <tbody> <tr> <td>{{SpecName('ESDraft', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> </tr> </tbody> </table> -<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> - -<div>{{CompatibilityTable}}</div> +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Chrome para Android</th> - <th>Firefox para móvil (Gecko)</th> - <th>IE para móvil</th> - <th>Opera para móvil</th> - <th>Safari para móvil</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> +<p>{{Compat("javascript.builtins.Date.getFullYear")}}</p> -<h2 id="Vea_también">Vea también</h2> +<h2 id="Ver_también">Ver también</h2> <ul> <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li> diff --git a/files/fa/glossary/grid/index.html b/files/fa/glossary/grid/index.html new file mode 100644 index 0000000000..1d77496989 --- /dev/null +++ b/files/fa/glossary/grid/index.html @@ -0,0 +1,77 @@ +--- +title: Grid +slug: Glossary/Grid +translation_of: Glossary/Grid +--- +<p>A <em>CSS grid</em> i</p> + + + + + + + +<p><code>bnvbnvbngfid</code> value of the {{cssxref("display")}} property; you can define columns and rows on your grid using the {{cssxref("grid-template-rows")}} and {{cssxref("grid-template-columns")}} properties.</p> + +<p>The grid that you define using these properties is described as an <em>explicit grid</em>.</p> + +<p>If you place content outside of this explicit grid, or if you are relying on auto-placement and the grid algorithm needs to create additional row or column {{glossary("grid tracks", "tracks")}} to hold {{glossary("grid item", "grid items")}}, then extra tracks will be created in the implicit grid. The <em>implicit grid</em> is the grid created automatically due to content being added outside of the tracks defined.</p> + +<p>In the example below I have created an <em>explicit grid</em> of three columns and two rows. The <em>third</em> row on the grid is an <em>implicit grid</em> row track, formed due to their being more than the six items which fill the explicit tracks.</p> + +<div id="example"> +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 100px 100px; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> + <div>Eight</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('example', '500', '330') }}</p> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li>CSS Grid Layout Guide:<br> + <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of grid layout</a></em></li> + <li>Property reference + <ol> + <li>{{cssxref("grid-template-columns")}}</li> + <li>{{cssxref("grid-template-rows")}}</li> + <li>{{cssxref("grid")}}</li> + <li>{{cssxref("grid-template")}}</li> + </ol> + </li> +</ol> +</section> diff --git a/files/fr/apprendre/front-end_web_developer/index.html b/files/fr/apprendre/front-end_web_developer/index.html index 835ba97d15..e520a7a9a3 100644 --- a/files/fr/apprendre/front-end_web_developer/index.html +++ b/files/fr/apprendre/front-end_web_developer/index.html @@ -113,7 +113,7 @@ translation_of: Learn/Front-end_web_developer <h4 id="Prérequis_5">Prérequis</h4> -<p>l est recommandé d'avoir des connaissances de base en HTML avant de commencer à apprendre JavaScript. Vous devriez au moins étudier l'<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a> d'abord.</p> +<p>ll est recommandé d'avoir des connaissances de base en HTML avant de commencer à apprendre JavaScript. Vous devriez au moins étudier l'<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a> d'abord.</p> <h4 id="Comment_saurai-je_que_je_suis_prêt_à_passer_à_autre_chose_4">Comment saurai-je que je suis prêt à passer à autre chose ?</h4> diff --git a/files/fr/glossaire/csp/index.html b/files/fr/glossaire/csp/index.html index 219a060822..45a154a033 100644 --- a/files/fr/glossaire/csp/index.html +++ b/files/fr/glossaire/csp/index.html @@ -23,5 +23,5 @@ translation_of: Glossary/CSP <h3 id="Connaissances_techniques">Connaissances techniques</h3> <ul> - <li><a href="/fr/docs/Sécurité/CSP">Documentation Content Security Policy sur MDN</a></li> + <li><a href="/fr/docs/Web/HTTP/CSP">Documentation Content Security Policy sur MDN</a></li> </ul> diff --git a/files/fr/web/guide/html/formulaires/les_blocs_de_formulaires_natifs/index.html b/files/fr/web/guide/html/formulaires/les_blocs_de_formulaires_natifs/index.html index 97c4a12af6..6b692ee256 100644 --- a/files/fr/web/guide/html/formulaires/les_blocs_de_formulaires_natifs/index.html +++ b/files/fr/web/guide/html/formulaires/les_blocs_de_formulaires_natifs/index.html @@ -51,7 +51,7 @@ translation_of: Learn/Forms/Basic_native_form_controls <tr> <td><code>autofocus</code></td> <td>(<em>false</em>)</td> - <td>Cet attribut, booléen, vous permet de spécifier que cet élément doit avoir automatiquement le focus au chargement de la page, sauf si l'utilisateur prend la main, en faisant, par exemple, une saisie dans un autre contrôle. Un seul élément associé à une forme peut avoir cet attribut activé.</td> + <td>Cet attribut, booléen, vous permet de spécifier que cet élément doit avoir automatiquement le focus au chargement de la page, sauf si l'utilisateur prend la main, en faisant, par exemple, une saisie dans un autre contrôle. Seul un élément associé à un formulaire peut avoir cet attribut activé.</td> </tr> <tr> <td><code>disabled</code></td> @@ -107,7 +107,7 @@ translation_of: Learn/Forms/Basic_native_form_controls <p>Voici un exemple élémentaire de champ texte sur une ligne :</p> -<pre class="brush: html"><input type="text" id="comment" name="comment" value="Je suis un champ texte"></pre> +<pre class="brush: html notranslate"><input type="text" id="comment" name="comment" value="Je suis un champ texte"></pre> <p>Les champs texte sur une ligne n'ont qu'une seule contrainte : si vous saisissez du texte avec des sauts de ligne, le navigateur les supprime avant d'envoyer les données.</p> @@ -119,7 +119,7 @@ translation_of: Learn/Forms/Basic_native_form_controls <p>Ce type de champ est défini en donnant la valeur <code>email</code> à l'attribut {{htmlattrxref("type","input")}} :</p> -<pre class="brush: html"> <input type="email" <code class="language-html"><span class="tag token"><span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span> </span></code>multiple></pre> +<pre class="brush: html notranslate"> <input type="email" <code class="language-html"><span class="tag token"><span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span> </span></code>multiple></pre> <p>Avec ce <code>type</code> , l'utilisateur doit saisir un e‑mail valide dans le champ. Tout autre type de contenu amène le navigateur à émettre une erreur lors de la soumission du formulaire. Notez que cette validation s'opère côté client et est faite par le navigateur :</p> @@ -137,7 +137,7 @@ translation_of: Learn/Forms/Basic_native_form_controls <p>Ce type de champ est défini en donnant la valeur <code>password</code> à l'attribut {{htmlattrxref("type","input")}} :</p> -<pre class="brush: html"> <input type="password" id="pwd" name="pwd"></pre> +<pre class="brush: html notranslate"> <input type="password" id="pwd" name="pwd"></pre> <p>Aucune contrainte de saisie du texte n'est ajoutée, mais la valeur entrée dans le champ est masquée (avec des points ou des astérisques) afin qu'elle ne puisse pas être lue par d'autres.</p> @@ -149,7 +149,7 @@ translation_of: Learn/Forms/Basic_native_form_controls <p>Ce type de champ se définit avec la valeur <code>search</code> de l'attribut {{htmlattrxref("type","input")}} :</p> -<pre class="brush: html"> <input type="search" id="search" name="search"></pre> +<pre class="brush: html notranslate"> <input type="search" id="search" name="search"></pre> <p>La principale différence entre un champ textuel et un champ de recherche est dans l'apparence — souvent, les champs de recherche sont affichés avec des coins arrondis, et/ou avec une « × » à cliquer pour effacer la valeur entrée. Toutefois, une fonction est aussi ajoutée : les valeurs saisies peuvent être automatiquement enregistrées afin d'être utilisées pour compléter des recherches sur plusieurs pages du même site.</p> @@ -159,7 +159,7 @@ translation_of: Learn/Forms/Basic_native_form_controls <p>Ce type de champ se définit en donnant la valeur <code>tel</code> à l'attribut {{htmlattrxref("type","input")}} :</p> -<pre class="brush: html"> <input type="tel" id="tel" name="tel"></pre> +<pre class="brush: html notranslate"> <input type="tel" id="tel" name="tel"></pre> <p>À cause de la grande variété de formats de numéros de téléphones à travers le monde, ce type de champ n'ajoute pas de contrainte à la valeur saisie par l'utilisateur. C'est principalement une différence sémantique, bien que sur certains appareils (notamment mobiles) un clavier virtuel différent, mieux adapté à la saisie de numéros de téléphone, puisse être présenté.</p> @@ -167,7 +167,7 @@ translation_of: Learn/Forms/Basic_native_form_controls <p>Ce type de champ se définit en donnant la valeur <code>url</code> à l'attribut {{htmlattrxref("type","input")}} :</p> -<pre class="brush: html"> <input type="url" id="url" name="url"></pre> +<pre class="brush: html notranslate"> <input type="url" id="url" name="url"></pre> <p>Il ajoute une contrainte de validation spéciale du champ ; le navigateur renvoie une erreur si une URL invalide est saisie.</p> @@ -181,7 +181,7 @@ translation_of: Learn/Forms/Basic_native_form_controls <p>Un champ texte sur plusieurs lignes se définit avec l'élément {{HTMLElement("textarea")}}, et non avec l'élément {{HTMLElement("input")}}.</p> -<pre class="brush: html"> <textarea cols="30" rows="10"></textarea></pre> +<pre class="brush: html notranslate"> <textarea cols="30" rows="10"></textarea></pre> <p>La principale différence entre un champ <code>textarea</code> et un champ monoligne est que, dans un textarea, l'utilisateur peut saisir du texte avec des sauts de ligne en dur (c'est à dire en pressant la touche <code>Retour</code>).</p> @@ -238,7 +238,7 @@ translation_of: Learn/Forms/Basic_native_form_controls <p>Une boîte à sélection est créée avec l'élément {{HTMLElement("select")}} complétée d'un ou plusieurs éléments enfants {{HTMLElement("option")}} définissant les valeurs possibles.</p> -<pre class="brush: html"> <select> +<pre class="brush: html notranslate"> <select> <option>Banane</option> <option>Cerise</option> <option>Citron</option> @@ -246,7 +246,7 @@ translation_of: Learn/Forms/Basic_native_form_controls <p>Si nécessaire, la valeur par défaut de la boîte de sélection peut être définie en utilisant l'attribut {{htmlattrxref("selected","option")}} dans l'élément {{HTMLElement("option")}} désiré. Les éléments {{HTMLElement("option")}} peuvent être imbriqués dans des éléments {{HTMLElement("optgroup")}} pour créer des groupes de valeurs associées :</p> -<pre class="brush: html"> <select> +<pre class="brush: html notranslate"> <select> <optgroup label="Fruits"> <option>Banane</option> <option selected>Cerise</option> @@ -271,7 +271,7 @@ translation_of: Learn/Forms/Basic_native_form_controls <p>Dans ce cas toutefois, la boîte d'utilisateur n'affiche plus les valeurs sous forme d'un menu déroulant. Les valeurs sont toutes affichées dans une liste.</p> -<pre class="brush: html"> <select multiple> +<pre class="brush: html notranslate"> <select multiple> <option>Banane</option> <option>Cerise</option> <option>Citron</option> @@ -289,7 +289,7 @@ translation_of: Learn/Forms/Basic_native_form_controls <p>Une fois la liste de données affiliée au widget de formulaire, ses options s'utilisent comme complémentation du texte saisi par l'utilisateur ; cela se présente généralement à l'utilisateur sous forme d'une boîte déroulante listant des correspondances possibles avec ce qui doit être saisi dans la boîte.</p> -<pre class="brush: html"> <label for="onFruit">Quel est votre fruit préféré ?</label> +<pre class="brush: html notranslate"> <label for="onFruit">Quel est votre fruit préféré ?</label> <input type="text" id="onFruit" list="maSuggestion" /> <datalist id="maSuggestion"> <option>Pomme</option> @@ -313,7 +313,7 @@ translation_of: Learn/Forms/Basic_native_form_controls <p>Pour gérer cela, voici une petite astuce offrant une bonne solution de repli pour ces navigateurs :</p> -<pre class="brush:html; line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myFruit<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Quel est votre fruit préféré ? (avec repli)<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> +<pre class="brush:html; line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myFruit<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Quel est votre fruit préféré ? (avec repli)<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myFruit<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>fruit<span class="punctuation token">"</span></span> <span class="attr-name token">list</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>fruitList<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>datalist</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>fruitList<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> @@ -364,7 +364,7 @@ translation_of: Learn/Forms/Basic_native_form_controls <p>Une casce à cocher se crée avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur <code>checkbox</code>.</p> -<pre class="brush: html"> <input type="checkbox" <code class="language-html"><span class="tag token"><span class="attr-name token">checked</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>carrots<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>carrots<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>carrots<span class="punctuation token">"</span></span></span></code>> +<pre class="brush: html notranslate"> <input type="checkbox" <code class="language-html"><span class="tag token"><span class="attr-name token">checked</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>carrots<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>carrots<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>carrots<span class="punctuation token">"</span></span></span></code>> </pre> <p>Mettre l'attribut <code>checked</code> fait que la case sera cochée au chargement de la page.</p> @@ -375,11 +375,11 @@ translation_of: Learn/Forms/Basic_native_form_controls <p>Un bouton radio se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a la valeur <code>radio</code>.</p> -<pre class="brush: html"> <input type="radio" checked<code class="language-html"><span class="tag token"><span class="attr-name token"> id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>soup<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>meal<span class="punctuation token">"</span></span></span></code>></pre> +<pre class="brush: html notranslate"> <input type="radio" checked<code class="language-html"><span class="tag token"><span class="attr-name token"> id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>soup<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>meal<span class="punctuation token">"</span></span></span></code>></pre> <p>Plusieurs boutons radio peuvent être liés ensemble. S'ils partagent la même valeur pour leur attribut {{htmlattrxref("name","input")}}, ils seront considérés comme faisant partie d'un seul groupe de boutons. Seulement un bouton à la fois peut être coché par groupe. Ceci signifie que si l'un d'entre eux est coché, tous les autres sont automatiquement décochés. Lorsque le formulaire est envoyé, seule la valeur du bouton coché est envoyée. Si aucun des boutons n'est coché, l'ensemble des boutons du groupe est considéré comme étant dans un état inconnu et aucune valeur n'est envoyée avec le formulaire.</p> -<pre class="brush: html line-numbers language-html"><code class="language-html"><fieldset> +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><fieldset> <legend>Quel est votre mets préféré ?</legend> <ul> <li> @@ -416,7 +416,7 @@ translation_of: Learn/Forms/Basic_native_form_controls <h3 id="submit">submit</h3> -<pre class="brush: html"> <button type="submit"> +<pre class="brush: html notranslate"> <button type="submit"> Ceci est un <br><strong>bouton d'envoi</strong> </button> @@ -424,7 +424,7 @@ translation_of: Learn/Forms/Basic_native_form_controls <h3 id="reset">reset</h3> -<pre class="brush: html"> <button type="reset"> +<pre class="brush: html notranslate"> <button type="reset"> Ceci est un <br><strong>bouton de réinitialisation</strong> </button> @@ -432,7 +432,7 @@ translation_of: Learn/Forms/Basic_native_form_controls <h3 id="anonymous">anonymous</h3> -<pre class="brush: html"> <button type="button"> +<pre class="brush: html notranslate"> <button type="button"> Ceci est un <br><strong>bouton lambda</strong> </button> @@ -466,7 +466,7 @@ translation_of: Learn/Forms/Basic_native_form_controls <h4 id="Exemple">Exemple</h4> -<pre class="brush: html"> <input type="number" <code class="language-html"><span class="tag token"><span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>age<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>age<span class="punctuation token">"</span></span></span></code> min="1" max="10" step="2"></pre> +<pre class="brush: html notranslate"> <input type="number" <code class="language-html"><span class="tag token"><span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>age<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>age<span class="punctuation token">"</span></span></span></code> min="1" max="10" step="2"></pre> <p>Ceci créé un widget pour un nombre dont la valeur est comprise entre 1 et 10 et dont les boutons d'incrémentation/décrémentation modifient la valeur par pas de 2.</p> @@ -478,20 +478,20 @@ translation_of: Learn/Forms/Basic_native_form_controls <h4 id="Exemple_2">Exemple</h4> -<pre class="brush: html line-numbers language-html"> <code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>range<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beans<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beans<span class="punctuation token">"</span></span> <span class="attr-name token">min</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">max</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>500<span class="punctuation token">"</span></span> <span class="attr-name token">step</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span><span class="punctuation token">> +<pre class="brush: html line-numbers language-html notranslate"> <code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>range<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beans<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beans<span class="punctuation token">"</span></span> <span class="attr-name token">min</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">max</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>500<span class="punctuation token">"</span></span> <span class="attr-name token">step</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span><span class="punctuation token">> </span></span></code></pre> <p>Cet exemple créé un curseur dont les valeurs varient entre 0 et 500, et dont les bouton d'incrément/décrément font varier la valeur de ±10.</p> <p>Un problème avec les curseurs est qu'il n'offrent aucun moyen visue de savoir quelle est leur valeur courante. Il est nécessaire d'ajouter cela vous‑même à l'aide de JavaScript, mais c'est assez facile. Dans cet exemple nous ajoutons un élément {{htmlelement("span")}} dans lequel nous écrivons la valeur courante du curseur et la mettons à jour quand elle est modifiée.</p> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beans<span class="punctuation token">"</span></span><span class="punctuation token">>Combien de haricots pouvez‑vous manger </span></span>?<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beans<span class="punctuation token">"</span></span><span class="punctuation token">>Combien de haricots pouvez‑vous manger </span></span>?<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>range<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beans<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beans<span class="punctuation token">"</span></span> <span class="attr-name token">min</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">max</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>500<span class="punctuation token">"</span></span> <span class="attr-name token">step</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beancount<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span></code></pre> <p>et en JavaScript :</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> beans <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'#beans'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">var</span> beans <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'#beans'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="keyword token">var</span> count <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.beancount'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> count<span class="punctuation token">.</span>textContent <span class="operator token">=</span> beans<span class="punctuation token">.</span>value<span class="punctuation token">;</span> @@ -514,29 +514,29 @@ beans<span class="punctuation token">.</span>oninput <span class="operator token <p>Cette valeur d'attribut créé un widget pour afficher et sélectionner une date et une heure quelque soit le fuseau horaire.</p> -<pre class="brush: html line-numbers language-html"><code class="language-html"><input type="datetime-local" name="datetime" id="datetime"></code></pre> +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><input type="datetime-local" name="datetime" id="datetime"></code></pre> <h4 id="month"><code>month</code></h4> <p>Cette valeur d'attribut créé un widget pour afficher et sélectionner un mois dans une année donnée.</p> -<pre class="brush: html line-numbers language-html"><code class="language-html"><input type="month" name="month" id="month"></code></pre> +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><input type="month" name="month" id="month"></code></pre> <h4 id="time"><code>time</code></h4> <p>Cette valeur d'attribut créé un widget pour afficher et sélectionner un horaire.</p> -<pre class="brush: html line-numbers language-html"><code class="language-html"><input type="time" name="time" id="time"></code></pre> +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><input type="time" name="time" id="time"></code></pre> <h4 id="week"><code>week</code></h4> <p>Cette valeur d'attribut crée un widget pour afficher et sélectionner une semaine et l'année correspondante.</p> -<pre class="brush: html line-numbers language-html"><code class="language-html"><input type="week" name="week" id="week"></code></pre> +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><input type="week" name="week" id="week"></code></pre> <p>Tous les contrôles de sélection de date et heure peuvent être contraints à l'aide des attributs {{htmlattrxref("min","input")}} et {{htmlattrxref("max","input")}}.</p> -<pre class="brush: html"> <label for="maDate">Quand êtes vous disponible cet été ?</label> +<pre class="brush: html notranslate"> <label for="maDate">Quand êtes vous disponible cet été ?</label> <input type="date" min="2013-06-01" max="2013-08-31" id="maDate"></pre> <p class="warning"><strong>Attention :</strong> Les widgets de date et heure sont encore peu pris en charge. Au moment de la rédaction de cet article, Chrome, Edge et Opera les prennent bien en charge, mais il n'y a pas de prise en charge dans Internet Explorer et Firefox et Safari n'ont qu'une prise en charge lacunaire de ces derniers.</p> @@ -547,7 +547,7 @@ beans<span class="punctuation token">.</span>oninput <span class="operator token <p>Un widget de sélection de couleur se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur <code>color</code>.</p> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>color<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>color<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>color<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>color<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>color<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>color<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> <p>Attention : la prise en charge du widget <code>color</code> n'est pas très bonne actuellement. Il n'y a aucune prise en charge dans Internet Explorer, ni actuellement dans Safari. Les autres navigateurs majeurs le prennent en charge.</p> @@ -569,7 +569,7 @@ beans<span class="punctuation token">.</span>oninput <span class="operator token <p>Dans cet exemple, le widget de sélection de fichiers permet de sélectionner des fichiers d'images. L'utilisateur peut sélectionner plusieurs fichiers.</p> -<pre class="brush: html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">accept</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>image/*<span class="punctuation token">"</span></span> <span class="attr-name token">multiple</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">accept</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>image/*<span class="punctuation token">"</span></span> <span class="attr-name token">multiple</span><span class="punctuation token">></span></span></code></pre> <h3 id="Contenu_caché">Contenu caché</h3> @@ -577,7 +577,7 @@ beans<span class="punctuation token">.</span>oninput <span class="operator token <p>Si vous créez un tel élément, il est obligatoire de définir ses attributs <code>name</code> et <code>value</code> :</p> -<pre class="brush: html"> <input type="hidden" <code class="language-html"><span class="tag token"><span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>timestamp<span class="punctuation token">"</span></span> </span></code>name="timestamp" value="1286705410"></pre> +<pre class="brush: html notranslate"> <input type="hidden" <code class="language-html"><span class="tag token"><span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>timestamp<span class="punctuation token">"</span></span> </span></code>name="timestamp" value="1286705410"></pre> <h3 id="Image-bouton">Image-bouton</h3> @@ -585,7 +585,7 @@ beans<span class="punctuation token">.</span>oninput <span class="operator token <p>Une image-bouton se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur <code>image</code>. Cet élément accepte exactement le même ensemble d'attributs que l'élément {{HTMLElement("img")}}, en plus de tous les attributs valides pour n'importe quel bouton de formulaire.</p> -<pre class="brush: html"> <input type="image" alt="Click me!" src="my-img.png" width="80" height="30" /></pre> +<pre class="brush: html notranslate"> <input type="image" alt="Click me!" src="my-img.png" width="80" height="30" /></pre> <p>Si l'image-bouton est utilisée pour envoyer un formulaire, ce widget n'envoie pas sa valeur mais les coordonnées X et Y du clic sur l'image (les coordonnées sont relatives à l'image, ce qui veut dire que le coin supérieur gauche représente les coordonnées 0, 0). Les coordonnées sont envoyées sous la forme de deux paires de clé/valeur :</p> @@ -596,7 +596,7 @@ beans<span class="punctuation token">.</span>oninput <span class="operator token <p>Lorsque vous cliquez sur l'image dans ce formulaire, vous êtes redirigés une URL du type suivant :</p> -<pre> http://foo.com?pos.x=123&pos.y=456</pre> +<pre class="notranslate"> http://foo.com?pos.x=123&pos.y=456</pre> <p>C'est une façon très commode de construire une « hot map » (cartographie des parties d'une page Internet le plus souvent balayées par le regard des lecteurs). La manière d'envoyer et d'extraire ces valeurs est détaillée dans l'article <span>« </span><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires" title="/fr/docs/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires"><span>Envoi des données de formulaire</span></a> ».</p> @@ -608,7 +608,7 @@ beans<span class="punctuation token">.</span>oninput <span class="operator token <p>Une barre de progression représente une valeur qui évolue dans le temps jusqu'à une valeur maximale définie par l'attribut {{htmlattrxref("max","progress")}}. Une telle barre peut être créée grace à un élément {{ HTMLElement("progress")}}.</p> -<pre class="brush: html"> <progress max="100" value="75">75/100</progress></pre> +<pre class="brush: html notranslate"> <progress max="100" value="75">75/100</progress></pre> <p>Cela sert à mettre en œuvre visuellement un rapport d'avancement, comme le pourcentage du nombre total de fichiers téléchargés ou le nombre de questions posées dans un questionnaire.</p> @@ -645,7 +645,7 @@ beans<span class="punctuation token">.</span>oninput <span class="operator token <p>Une telle barre se crée avec un élément {{HTMLElement("meter")}}. Cela permet d'implémenter toute sorte d'étalonnage, par exemple une barre montrant l'espace total utilisé sur un disque, qui devient rouge si le disque commence à être plein.</p> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meter</span> <span class="attr-name token">min</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">max</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>75<span class="punctuation token">"</span></span> <span class="attr-name token">low</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>33<span class="punctuation token">"</span></span> <span class="attr-name token">high</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>66<span class="punctuation token">"</span></span> <span class="attr-name token">optimum</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>75<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>meter</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meter</span> <span class="attr-name token">min</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">max</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>75<span class="punctuation token">"</span></span> <span class="attr-name token">low</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>33<span class="punctuation token">"</span></span> <span class="attr-name token">high</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>66<span class="punctuation token">"</span></span> <span class="attr-name token">optimum</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>75<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>meter</span><span class="punctuation token">></span></span></code></pre> <p>Le contenu de l'élément {{HTMLElement("meter")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément ; les technologies d'assistance vocalisent cet affichage.</p> diff --git a/files/ja/learn/forms/ui_pseudo-classes/index.html b/files/ja/learn/forms/ui_pseudo-classes/index.html index 8ab11cbac6..36c83f9155 100644 --- a/files/ja/learn/forms/ui_pseudo-classes/index.html +++ b/files/ja/learn/forms/ui_pseudo-classes/index.html @@ -15,7 +15,7 @@ translation_of: Learn/Forms/UI_pseudo-classes --- <p>{{LearnSidebar}}{{PreviousMenuNext("Learn/Forms/Advanced_form_styling", "Learn/Forms/Form_validation", "Learn/Forms")}}</p> -<p>In the previous articles we covered the styling of various form controls, in a general manner. This included some usage of pseudo-classes, 例えば、using <code>:checked</code> to target a checkbox only when it is selected. <span class="seoSummary">In this article, we will explore in detail the different UI pseudo-classes available to us in modern browsers for styling forms in different states.</span></p> +<p>In the previous articles, we covered the styling of various form controls, in a general manner. This included some usage of pseudo-classes, 例えば、using <code>:checked</code> to target a checkbox only when it is selected. <span class="seoSummary">In this article, we will explore in detail the different UI pseudo-classes available to us in modern browsers for styling forms in different states.</span></p> <table class="learn-box standard-table"> <tbody> @@ -49,7 +49,7 @@ translation_of: Learn/Forms/UI_pseudo-classes <li>{{cssxref(":checked")}}, {{cssxref(":indeterminate")}}, and {{cssxref(":default")}}: Respectively target checkboxes and radio buttons that are checked, in an indeterminate state (neither checked or not checked), and the default selected option when the page loads (e.g. an <code><a href="/ja/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code> with the <code>checked</code> attribute set, or an <code><a href="/ja/docs/Web/HTML/Element/option"><option></a></code> element with the <code>selected</code> attribute set).</li> </ul> -<p>There are many others too, but the ones listed above are the most obviously useful. Some of the others are aimed at solving very specific niche problems, or simply not very well supported in browsers yet. The ones listed above all have pretty good browser support, but of course you should test your form implementations carefully to make sure they work for your target audience.</p> +<p>There are many others too, but the ones listed above are the most obviously useful. Some of the others are aimed at solving very specific niche problems, or simply not very well supported in browsers yet. The ones listed above all have pretty good browser support, but of course, you should test your form implementations carefully to make sure they work for your target audience.</p> <div class="blockIndicator note"> <p><strong>注</strong>: A number of the pseudo-classes discussed here are concerned with styling form controls based on their validation state (is their data valid, or not?) You'll learn much more about setting and controlling validation constraints in our next article — <a href="/ja/docs/Learn/Forms/Form_validation">Client-side form validation</a> — but for now we'll keep things simple with regards to form validation, so it doesn't confuse things.</p> @@ -96,11 +96,11 @@ input:optional { <p>{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/basic-required-optional.html", '100%', 400)}}</p> -<p>You can also try submitting the form without flling it in, to see the client-side validation error messages browsers give you 既定では.</p> +<p>You can also try submitting the form without filling it in, to see the client-side validation error messages browsers give you 既定では.</p> <p>The above form isn't bad, but it isn't great either. For a start, we are signalling required versus optional status using color alone, which isn't great for colorblind people. Second, the standard convention on the web for required status is an asterisk (*), or the word "required" being associated with the controls in question.</p> -<p>In the next section we'll look at a better example of indicating required fields using <code>:required</code>, which also digs into using generated content.</p> +<p>In the next section, we'll look at a better example of indicating required fields using <code>:required</code>, which also digs into using generated content.</p> <div class="blockIndicator note"> <p><strong>注</strong>: You'll probably not find yourself using the <code>:optional</code> pseudo-class very often. Form controls are optional 既定では, so you could just do your optional styling 既定では, and add styles on top for required controls.</p> @@ -112,7 +112,7 @@ input:optional { <h2 id="Using_generated_content_with_pseudo-classes" name="Using_generated_content_with_pseudo-classes">疑似クラスでコンテンツを生成する</h2> -<p>In previous articles we've seen usage of <a href="/ja/docs/Web/CSS/CSS_Generated_Content">generated content</a>, but we thought now would be a good time to talk about it in a bit more detail.</p> +<p>In previous articles, we've seen the usage of <a href="/ja/docs/Web/CSS/CSS_Generated_Content">generated content</a>, but we thought now would be a good time to talk about it in a bit more detail.</p> <p>The idea is that we can use the <code><a href="/ja/docs/Web/CSS/::before">::before</a></code> and <code><a href="/ja/docs/Web/CSS/::after">::after</a></code> pseudo-elements along with the <code><a href="/ja/docs/Web/CSS/content">content</a></code> property to make a chunk of content appear before or after the affected element. The chunk of content is not added to the DOM, so is invisible to screenreaders; it is part of the document's styles. Because it is a pseudo element, it can be targetted with styles in the same way that any actual DOM node can.</p> @@ -158,7 +158,7 @@ input[type="radio"]:checked::before { <span></span> </div></pre> -<p>The immediate problem with this was that the span was dropping onto a new line below the input, because the input and label are both set with <code>width: 100%</code>. To fix this we style the parent <code><div></code> to become a flex container, but also tell it to wrap its contents onto new lines if the content becomes too long:</p> +<p>The immediate problem with this was that the span was dropping onto a new line below the input because the input and label are both set with <code>width: 100%</code>. To fix this we style the parent <code><div></code> to become a flex container, but also tell it to wrap its contents onto new lines if the content becomes too long:</p> <pre class="brush: css notranslate">fieldset > div { margin-bottom: 20px; @@ -263,7 +263,7 @@ input:valid + span::before { <p><strong>注</strong>: Numeric input types are <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, and <code>range</code>.</p> </div> -<p>It is worth noting that inputs whose data is in-range will also be matched by the <code>:valid</code> pseudo-class, and inputs whose data is out-of-range will also be matched by the <code>:invalid</code> pseudo-class. So why have both? The issue is really one of semantics — out-of-range is a more specific type of invalid communication, so you might want to provide a different message for out-of-range inputs, which will be more helpful to users than just saying "invalid". You might even want to provide both.</p> +<p>It is worth noting that inputs whose data is in-range will also be matched by the <code>:valid</code> pseudo-class and inputs whose data is out-of-range will also be matched by the <code>:invalid</code> pseudo-class. So why have both? The issue is really one of semantics — out-of-range is a more specific type of invalid communication, so you might want to provide a different message for out-of-range inputs, which will be more helpful to users than just saying "invalid". You might even want to provide both.</p> <p>Let's look at an example that does exactly this. Our <a href="https://mdn.github.io/learning-area/html/forms/pseudo-classes/out-of-range.html">out-of-range.html</a> demo (see also the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/pseudo-classes/out-of-range.html">source code</a>) builds on top of the previous example to provide out-of-range messages for the numeric inputs, as well as saying whether they are required.</p> @@ -362,7 +362,7 @@ input:out-of-range + span::after { <div><button>Submit</button></div> </form></pre> -<p>Now onto the CSS. The most relevant parts to this example are as follows:</p> +<p>Now onto the CSS. The most relevant parts of this example are as follows:</p> <pre class="brush: css notranslate">input[type="text"]:disabled { background: #eee; @@ -424,26 +424,27 @@ function toggleBilling() { value="Mr Soft" readonly> </div></pre> -<p>If you try the live example, you'll see that the top set of form elements are not focusable, however the values are submitted when the form is submitted. We've also styled the read-only form controls using the <code>:read-only</code> pseudo-class, like so:</p> +<p>If you try the live example, you'll see that the top set of form elements are not focusable, however the values are submitted when the form is submitted. We've styled the form controls using the <code>:read-only</code> and <code>:read-write</code> pseudo-classes, like so:</p> -<pre class="brush: css notranslate">input:-moz-read-only, textarea:-moz-read-only { - border: 0; - box-shadow: none; - resize: none; - background-color: white; +<pre class="brush: css notranslate">input:-moz-read-only, textarea:-moz-read-only, +input:read-only, textarea:read-only { + border: 0; + box-shadow: none; + background-color: white; } -input:read-only, textarea:read-only { - border: 0; - box-shadow: none; - resize: none; - background-color: white; +textarea:-moz-read-write, +textarea:read-write { + box-shadow: inset 1px 1px 3px #ccc; + border-radius: 5px; }</pre> -<p>Yes, you've guessed it — Firefox only supports it with a prefix, hence having to double up the ruleset.</p> +<p>Firefox only supported these pseudo-classes with a prefix up to version 78; at which point it started to support the unprefixed version. The full example looks like so:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/readonly-confirmation.html", '100%', 660)}}</p> <div class="blockIndicator note"> -<p><strong>注</strong>: <code>:enabled</code> and <code>read-write</code> are two more pseudo-classes that you'll probably rarely use, given that they describe the default states of input elements.</p> +<p><strong>注</strong>: <code>:enabled</code> and <code>:read-write</code> are two more pseudo-classes that you'll probably rarely use, given that they describe the default states of input elements.</p> </div> <h2 id="ラジオとチェックボックスの状態_—_チェック済み、既定、中間">ラジオとチェックボックスの状態 — チェック済み、既定、中間</h2> @@ -459,7 +460,7 @@ input:read-only, textarea:read-only { <p>When checked, they will be matched by the {{cssxref(":checked")}} pseudo-class.</p> -<p>The most common use of this is to add a different style onto the checkbox/radiobutton when it is checked, in cases where you've removed the system default styling with <code>appearance: none;</code> and want to build the styles back up yourself. We saw examples of this in the previous article, when we talked about <a href="/ja/docs/Learn/Forms/Advanced_form_styling#Using_appearence_none_on_radioscheckboxes">Using <code>appearence: none</code> on radios/checkboxes</a>.</p> +<p>The most common use of this is to add a different style onto the checkbox/radiobutton when it is checked, in cases where you've removed the system default styling with <code>appearance: none;</code> and want to build the styles back up yourself. We saw examples of this in the previous article when we talked about <a href="/ja/docs/Learn/Forms/Advanced_form_styling#Using_appearence_none_on_radioscheckboxes">Using <code>appearence: none</code> on radios/checkboxes</a>.</p> <p>As a recap, the <code>:checked</code> code from our <a href="https://mdn.github.io/learning-area/html/forms/styling-examples/radios-styled.html">Styled radio buttons</a> example looks like so:</p> @@ -586,6 +587,10 @@ input:default ~ span::after { <li>The <code><a href="https://drafts.csswg.org/selectors-4/#user-invalid-pseudo">:user-invalid</a></code> pseudo-class, when supported, will be similar to {{cssxref(":invalid")}}, but with better user experience. If the value is valid when the input receives focus, the element may match <code>:invalid</code> as the user enters data if the value is temporarily invalid, but will only match <code>:user-invalid</code> when the element loses focus. If the value was originally invalid, it will match both <code>:invalid</code> and <code>:user-invalid</code> for the whole duration of the focus. In a similar manner to <code>:invalid</code>, it will stop matching <code>:user-invalid</code> if the value does become valid.</li> </ul> +<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="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_Advanced_styling">Test your skills: Advanced styling</a>.</p> + <h2 id="Summary" name="Summary">まとめ</h2> <p>This completes our look at UI pseudo-classes that relate to form inputs. Keep playing with them, and create some fun form styles! Next up, we'll move on to something different — <a href="/ja/docs/Learn/Forms/Form_validation">client-side form validation</a>.</p> diff --git a/files/ja/learn/javascript/objects/adding_bouncing_balls_features/index.html b/files/ja/learn/javascript/objects/adding_bouncing_balls_features/index.html index 79ddcd712b..d37df09dd3 100644 --- a/files/ja/learn/javascript/objects/adding_bouncing_balls_features/index.html +++ b/files/ja/learn/javascript/objects/adding_bouncing_balls_features/index.html @@ -124,7 +124,7 @@ translation_of: Learn/JavaScript/Objects/Adding_bouncing_balls_features <ul> <li>最後の 2行を削除します。後で見られるように、別の方法で邪悪な円を動かすので、フレーム毎に邪悪な円の位置を自動的に更新する必要はありません。</li> - <li>テストが true を返す場合、<code>if()</code> ステートメントの内部で<code>velX</code>/<code>velY</code> を更新したくありません。代わりに <code>x</code>/<code>y</code> の値を変更して、邪悪な円が画面上に少し跳ね返ってくるようにします。邪悪な円の size プロパティを（必要に応じて）増減させることは理にかなっています。</li> + <li><code>if()</code> ステートメントの内部でそのテストが true を返す場合、<code>velX</code>/<code>velY</code> を更新したくありません。代わりに <code>x</code>/<code>y</code> の値を変更して、邪悪な円が画面内に少し跳ね返ってくるようにしたいのです。邪悪な円の size プロパティを（適切に）加えたり減じたりすることは理にかなっています。</li> </ul> <h4 id="setControls" name="setControls"><code>setControls()</code></h4> diff --git a/files/ja/learn/javascript/objects/inheritance/index.html b/files/ja/learn/javascript/objects/inheritance/index.html index 7830f5a676..fefcbaa131 100644 --- a/files/ja/learn/javascript/objects/inheritance/index.html +++ b/files/ja/learn/javascript/objects/inheritance/index.html @@ -38,7 +38,7 @@ translation_of: Learn/JavaScript/Objects/Inheritance <p>ここまで動作している継承 ー プロトタイプチェーンがどのように動作するか、どのようにメンバーが繋がるチェーンから継承されるのかを見てきました。しかし、これらの大半はブラウザーの組み込み関数で実行されています。我々が他のオブジェクトから継承したオブジェクトを作成するには JavaScript でどのようにするのでしょうか。</p> -<p>具体的な例をjj使ってどのようの継承が行われているかを見てゆきましょう。</p> +<p>具体的な例を使ってどのようの継承が行われているかを見てゆきましょう。</p> <h2 id="Getting_started" name="Getting_started">さあ始めてみよう</h2> @@ -81,7 +81,7 @@ translation_of: Learn/JavaScript/Objects/Inheritance this.subject = subject; }</pre> -<p>これは多くの点で Person コンストラクタと似ていますが、これまでに見てきたものと異なったものがあります— <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call()</a></code> 関数です。この関数は基本的にその他の場所 (ただし現在のコンテキスト) で定義された関数から呼ぶことができます。最初の引数は関数を実行するときに使用することのできる <code>this</code> の値を表します、また他の引数は実行される関数に渡されるべき値です。</p> +<p>これは多くの点で Person コンストラクタと似ていますが、これまでに見てきたものと異なったものがあります— <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call()</a></code> 関数です。この関数は基本的に別の場所で定義された関数を、しかし現在のコンテキストで呼び出すことができます。最初の引数は関数を実行するときに使用したい <code>this</code> の値を指定します、また他の引数は実行される関数に渡されるべき値です。</p> <p><code>Teacher()</code> コンストラクタは継承元の <code>Person()</code> コンストラクタと同じ引数を取りたいため、 <code>call()</code> を呼び出して、すべての引き数を引数として渡します。</p> diff --git a/files/ja/learn/javascript/objects/object_prototypes/index.html b/files/ja/learn/javascript/objects/object_prototypes/index.html index 4e9419e49d..af08b53692 100644 --- a/files/ja/learn/javascript/objects/object_prototypes/index.html +++ b/files/ja/learn/javascript/objects/object_prototypes/index.html @@ -41,11 +41,11 @@ translation_of: Learn/JavaScript/Objects/Object_prototypes <h2 id="プロトタイプベースの言語とは">プロトタイプベースの言語とは?</h2> -<p>JavaScript はしばしば<strong>プロトタイプベースの言語</strong>として記述されます - 継承を提供するために、オブジェクトはメソッドやプロパティを継承するテンプレートオブジェクトとして機能する <strong><code>prototype</code> オブジェクト</strong>を持つことができます。</p> +<p>JavaScript はしばしば<strong>プロトタイプベースの言語</strong>として記述されます - 継承機能を提供するため、オブジェクトは <strong><code>prototype</code></strong> <strong>オブジェクト </strong>を持つことができます。これはテンプレートオブジェクトとして機能し、そこからメソッドやプロパティを継承します。</p> -<p>オブジェクトのプロトタイプオブジェクトは、メソッドやプロパティを継承するプロトタイプオブジェクトを持つことができます。これはしばしば<strong>プロトタイプチェーン</strong>と呼ばれ、異なるオブジェクトが他のオブジェクトに定義されたプロパティやメソッドを持つ理由を説明しています。</p> +<p>オブジェクトのプロトタイプオブジェクトもまたメソッドやプロパティを継承するプロトタイプオブジェクトを持つことができます。これはしばしば<strong>プロトタイプチェーン</strong>と呼ばれ、異なるオブジェクトが他のオブジェクトに定義されたプロパティやメソッドを持つ理由を説明しています。</p> -<p>JavaScript では、オブジェクトのインスタンスとプロトタイプ (コンストラクタの <code>prototype</code> プロパティから派生した <code>__proto__</code> プロパティ) の間にリンクが張られており、プロパティとメソッドはプロトタイプの連鎖を辿って見つけられます。</p> +<p>JavaScript では、あるオブジェクトのインスタンスとそのプロトタイプ (コンストラクタの <code>prototype</code> プロパティから派生した <code>__proto__</code> プロパティ) の間にリンクが張られており、そのプロパティとメソッドはプロトタイプの連鎖を辿って発見されます。</p> <div class="note"> <p><strong>Note:</strong> <strong>オブジェクトの <code>prototype</code></strong> (<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf">Object.getPrototypeOf(<var>obj</var>)</a></code> または非推奨の <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/proto">__proto__</a></code> プロパティで取得可能) と<strong>コンストラクタ関数の<code>prototype</code> プロパティ</strong>の違いを理解することが重要です。</p> diff --git a/files/ja/mozilla/firefox/releases/83/index.html b/files/ja/mozilla/firefox/releases/83/index.html index cfa83930bf..26f5cb6ca1 100644 --- a/files/ja/mozilla/firefox/releases/83/index.html +++ b/files/ja/mozilla/firefox/releases/83/index.html @@ -12,6 +12,10 @@ translation_of: Mozilla/Firefox/Releases/83 <p class="summary">このページでは、開発者に影響する Firefox 83 の変更点をまとめています。Firefox 83 は、2020 年 11 月 17 日にリリースされました。</p> +<div class="blockIndicator note"> +<p class="summary"><strong>注記</strong>: Mozilla hacks の <a href="https://hacks.mozilla.org/2020/11/firefox-83-is-upon-us/">Firefox 83 is upon us</a> もご覧ください。</p> +</div> + <h2 id="Changes_for_web_developers" name="Changes_for_web_developers">ウェブ開発者向けの変更点一覧</h2> <h3 id="Developer_Tools" name="Developer_Tools">開発者ツール</h3> diff --git a/files/ja/mozilla/firefox/releases/84/index.html b/files/ja/mozilla/firefox/releases/84/index.html index c0cf8feff6..d72844fce0 100644 --- a/files/ja/mozilla/firefox/releases/84/index.html +++ b/files/ja/mozilla/firefox/releases/84/index.html @@ -10,19 +10,19 @@ translation_of: Mozilla/Firefox/Releases/84 --- <p>{{FirefoxSidebar}}</p> -<p class="summary">このページでは、開発者に影響する Firefox 84 の変更点をまとめています。Firefox 84 は現在 <a href="https://www.mozilla.org/firefox/channel/desktop/#nightly">Nightly バージョン</a> であり、米国時間 <a href="https://wiki.mozilla.org/RapidRelease/Calendar#Future_branch_dates">2020 年 12 月 15 日</a> にリリースする予定です。</p> +<p class="summary">このページでは、開発者に影響する Firefox 84 の変更点をまとめています。Firefox 84 は現在 <a href="https://www.mozilla.org/firefox/channel/desktop/#beta">Beta バージョン</a> であり、米国時間 <a href="https://wiki.mozilla.org/RapidRelease/Calendar#Future_branch_dates">2020 年 12 月 15 日</a> にリリースする予定です。</p> <h2 id="Changes_for_web_developers" name="Changes_for_web_developers">ウェブ開発者向けの変更点一覧</h2> <h3 id="Developer_Tools" name="Developer_Tools">開発者ツール</h3> <ul> - <li>Firefox の <a href="/ja/docs/Tools/Accessibility_inspector">アクセシビリティインスペクター</a> で、ウェブページの <a href="/ja/docs/Tools/Accessibility_inspector##Show_web_page_tabbing_order">タブオーダー</a> の表示をサポートしました。ページがキー操作でどのようなナビゲーションになるかを、単にリンクをタブ移動するよりも高レベルな概要で示します。({{bug(1654956)}})</li> + <li>Firefox の <a href="/ja/docs/Tools/Accessibility_inspector">アクセシビリティインスペクター</a> で、ウェブページの <a href="/ja/docs/Tools/Accessibility_inspector##Show_web_page_tabbing_order">タブオーダー</a> の表示をサポートしました。ページがキー操作でどのようなナビゲーションになるかを、単にリンクをタブ移動するよりも高レベルな概要で示します ({{bug(1654956)}})。</li> </ul> <h3 id="HTML" name="HTML">HTML</h3> -<h4 id="Removals" name="Removals">廃止</h4> +<p><em>変更なし。</em></p> <h3 id="CSS" name="CSS">CSS</h3> @@ -30,7 +30,7 @@ translation_of: Mozilla/Firefox/Releases/84 <li>{{cssxref(":not()")}} 疑似クラスで、複雑なセレクターをサポートしました ({{bug(933562)}})。</li> </ul> -<h4 id="Removals_2" name="Removals_2">廃止</h4> +<h4 id="Removals" name="Removals">廃止</h4> <ul> <li>独自仕様である <code>-moz-default-appearance</code> プロパティの値 <code>scrollbar-small</code> (代わりに <code>scrollbar-width: thin</code> を使用します) および <code>scrollbar</code> (macOS 限定。代わりに <code>scrollbar-horizontal</code> や <code>scrollbar-vertical</code> を使用します) を削除しました ({{bug(1673132)}})。</li> @@ -38,23 +38,18 @@ translation_of: Mozilla/Firefox/Releases/84 <h3 id="JavaScript" name="JavaScript">JavaScript</h3> -<p><em>変更なし。</em></p> - -<h4 id="Removals_3" name="Removals_3">廃止</h4> - -<h3 id="HTTP" name="HTTP">HTTP</h3> - <ul> - <li></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat"><code>Intl.DateTimeFormat()</code> コンストラクター</a> の引数として指定する独自の日時書式に、<code>fractionalSecondDigits</code> (秒の端数として表示する桁数) を含めることが可能になりました ({{bug(1645107)}})。</li> </ul> -<h4 id="Removals_4" name="Removals_4">廃止</h4> +<h3 id="HTTP" name="HTTP">HTTP</h3> + +<p><em>変更なし。</em></p> <h3 id="Security" name="Security">セキュリティ</h3> <ul> - <li>Firefox で <em>http://localhost/</em> や <em>http://dev.localhost/</em> のような <code>localhost</code> URL が、ローカルホストのループバックインターフェイス (例えば <em>http://127.0.0.1</em>) を参照するものとして保証されるようになりました。この結果、<code>localhost</code> から読み込まれるリソースが安全に提供された (<a href="/ja/docs/Web/Security/Secure_Contexts">安全なコンテキスト</a> を参照) とみなされ、<a href="/ja/docs/Web/Security/Mixed_content">混在コンテンツ</a> として扱われなくなります。({{bug(1220810)}}, {{bug(1488740)}})</li> - <li>Firefox が、安全なページで <a href="/ja/docs/Web/Security/Mixed_content#Upgrading_mixed-display_resources">混在表示コンテンツを自動的に HTTP から HTTPS に切り替える</a> ようになりました。切り替えに失敗した (メディアのホストが HTTPS をサポートしないため) 場合は、メディアが読み込まれません。また、切り替えが成功したことを示す警告を新たにコンソールへ表示します。({{bug(1633743)}}, {{bug(1435733)}})</li> + <li>Firefox で <em>http://localhost/</em> や <em>http://dev.localhost/</em> のような <code>localhost</code> URL が、ローカルホストのループバックインターフェイス (例えば <em>http://127.0.0.1</em>) を参照するものとして保証されるようになりました。この結果、<code>localhost</code> から読み込まれるリソースが安全に提供された (<a href="/ja/docs/Web/Security/Secure_Contexts">安全なコンテキスト</a> を参照) とみなされ、<a href="/ja/docs/Web/Security/Mixed_content">混在コンテンツ</a> として扱われなくなります ({{bug(1220810)}}, {{bug(1488740)}})。</li> </ul> <h3 id="APIs" name="APIs">API</h3> @@ -64,30 +59,28 @@ translation_of: Mozilla/Firefox/Releases/84 <li>{{domxref('Navigator.registerProtocolHandler()')}} メソッドが、<code>scheme</code> と <code>url</code> の 2 つの引数のみ受け入れるようになりました。<code>title</code> は削除されました ({{bug(1631464)}})。</li> </ul> -<h4 id="DOM" name="DOM">DOM</h4> - <h4 id="Media_WebRTC_and_Web_Audio" name="Media_WebRTC_and_Web_Audio">Media、WebRTC、Web Audio</h4> <ul> - <li>{{domxref('MediaRecorder.start()')}} メソッドで、記録されているストリームのいくつかのトラックが変更されたときに <code>InvalidModificationError</code> が発生するようになりました。({{bug(1581139)}})</li> + <li>{{domxref('MediaRecorder.start()')}} メソッドで、記録されているストリームのいくつかのトラックが変更されたときに <code>InvalidModificationError</code> が発生するようになりました ({{bug(1581139)}})。</li> </ul> -<h4 id="Removals_5" name="Removals_5">廃止</h4> +<h4 id="Removals_2" name="Removals_2">廃止</h4> + +<ul> + <li><a href="/ja/docs/Web/HTML/Using_the_application_cache">アプリケーションキャッシュ</a> を削除しました。開発者は、代わりに <a href="/ja/docs/Web/API/Service_Worker_API">Service Worker API</a> を使用してください ({{bug(1619673)}})。</li> +</ul> <h3 id="WebAssembly" name="WebAssembly">WebAssembly</h3> <p><em>変更なし。</em></p> -<h4 id="Removals_6" name="Removals_6">廃止</h4> - <h2 id="Changes_for_add-on_developers" name="Changes_for_add-on_developers">アドオン開発者向けの変更点</h2> <ul> - <li><code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/browsingData/remove">browsingData.remove</a></code> API が、<code>cookieStoreId</code> でデータ型のサブセットの削除をサポートしました。</li> + <li><code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/browsingData/remove">browsingData.remove()</a></code> API が、<code>cookieStoreId</code> でデータ型のサブセットの削除をサポートしました。</li> </ul> -<h4 id="Removals_7" name="Removals_7">廃止</h4> - <h2 id="Older_versions" name="Older_versions">過去のバージョン</h2> <p>{{Firefox_for_developers(83)}}</p> diff --git a/files/ja/web/api/clipboard/index.html b/files/ja/web/api/clipboard/index.html index cd25f411b6..c4cf3e26d4 100644 --- a/files/ja/web/api/clipboard/index.html +++ b/files/ja/web/api/clipboard/index.html @@ -59,7 +59,7 @@ translation_of: Web/API/Clipboard <p>例えば、Firefox はまだ <code>"clipboard-read"</code> と <code>"clipboard-write"</code> パーミッションをサポートしていないため、これとは異なる方法でクリップボードの内容にアクセスし変更するメソッドへのアクセスを制限します。</p> -<p>WebExtension の場合、clipboardRead や clipboardWrite パーミッションを要求することで clipboard.readText() や clipboard.writeText() を使うことができます。ウェブサイトに適用されたコンテンツスクリプトは、Clipboard オブジェクトにアクセスすることはできません。<a href="https://blog.mozilla.org/addons/2018/08/31/extensions-in-firefox-63/">Extensions in Firefox 63</a> を参照してください。</p> +<p>WebExtension の場合、clipboardRead や clipboardWrite パーミッションを要求することで clipboard.readText() や clipboard.writeText() を使うことができます。HTTPサイトに適用されたコンテンツスクリプトは、Clipboard オブジェクトにアクセスすることはできません。<a href="https://blog.mozilla.org/addons/2018/08/31/extensions-in-firefox-63/">Extensions in Firefox 63</a> を参照してください。</p> <p>また、{{domxref("Clipboard.read", "read()")}} と {{domxref("Clipboard.write", "write()")}} はデフォルトで無効にされており、これらを有効にするには設定を変更する必要があります。これらを使う前にブラウザー実装状況の表を確認してください。</p> diff --git a/files/ja/web/css/content-visibility/index.html b/files/ja/web/css/content-visibility/index.html new file mode 100644 index 0000000000..d480c67fed --- /dev/null +++ b/files/ja/web/css/content-visibility/index.html @@ -0,0 +1,119 @@ +--- +title: content-visibility +slug: Web/CSS/content-visibility +translation_of: Web/CSS/content-visibility +--- +<p>{{CSSRef}}</p> + +<p><span style="">content-visibility CSSプロパティは、要素がそのコンテンツをレンダリングするかどうかを制御するとともに、強力な包含セットを強制することで、ユーザーエージェントが必要になるまで大量のレイアウトとレンダリング作業を省略できるようにします。基本的に、ユーザーエージェントは、レイアウトやペイントなどの要素のレンダリング作業を必要になるまでスキップできるため、最初のページの読み込みがはるかに高速になります。</span></p> + +<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> + + + +<pre class="brush: css no-line-numbers notranslate">/* Keyword values */ +content-visibility: visible; +content-visibility: hidden; +content-visibility: auto; + +/* Global values */ +content-visibility: initial; +content-visibility: unset; +</pre> + + + +<h3 id="値">値</h3> + +<dl> + <dt><code>visible</code></dt> + <dd> + <p dir="ltr" id="tw-target-text">無効。要素のコンテンツは通常どおりにレイアウトおよびレンダリングされます。</p> + + + </dd> + <dt><code>hidden</code></dt> + <dd> + <p dir="ltr" id="tw-target-text">要素はその内容をスキップします。スキップされたコンテンツは、ページ内検索、タブオーダーナビゲーションなどのユーザーエージェント機能にアクセスできたり、選択またはフォーカス可能であってはなりません。これは、<code>display: none</code>をコンテンツに与えるのと似ています。</p> + + + </dd> + <dt><code>auto</code></dt> + <dd> + <p>この要素は、レイアウトの封じ込め、スタイルの封じ込め、およびペイントの封じ込めをオンにします。要素がユーザーに関連していない場合は、その内容もスキップします。非表示とは異なり、スキップされたコンテンツは、ページ内検索、タブオーダーナビゲーションなどのユーザーエージェント機能に対して通常どおり利用可能である必要があり、通常どおりフォーカス可能で選択可能である必要があります。</p> + </dd> +</dl> + +<h2 id="例"><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></h2> + +<h3 dir="ltr" id="autoを使用して長いページのレンダリングコストを削減">autoを使用して長いページのレンダリングコストを削減</h3> + +<p dir="ltr" id="tw-target-text">次の例は、autoを使用して画面外のセクションのペイントとレンダリングをスキップする方法を示しています。ビューポート外のコンテンツはレンダリングされないため、これはページの読み込みと操作の両方に役立ちます。</p> + +<pre class="brush: html notranslate"><style> +section { + content-visibility: auto; + contain-intrinsic-size: 0 500px; +} + +<section>... +<section>... +<section>... +<section>... +... +</pre> + +<h3 dir="ltr" id="hiddenを使用して手動で可視性を管理">hiddenを使用して手動で可視性を管理</h3> + +<p>次の例は、スクリプトで可視性を管理できることを示しています。たとえば、display：noneの代わりにcontent-visiblity：hiddenを使用することの追加の利点は、content-visibilityで非表示にしたときにレンダリングされたコンテンツがレンダリング状態を保持することです。これは、コンテンツが再度表示される場合、他のコンテンツよりも速くレンダリングされることを意味します。</p> + +<pre class="brush: html notranslate"><style> +.hidden { + content-visibility: hidden; + /* 非表示の場合、要素のサイズを0x500pxサイズの子が1つあるかのようにします */ + contain-intrinsic-size: 0 500px; +} +.visible { + content-visibility: visible; + /* これは、.hiddenと.visibleを切り替えるときにレイアウトがシフトしないようにするためです */ + contain: style layout paint; +} + + + +<div class=hidden>... +<div class=visible>... +<div class=hidden>... +<div class=hidden>... +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Containment 2', '#content-visibility')}}</td> + <td>{{Spec2('CSS Containment 2')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.content-visibility")}}</p> + +<h2 id="See_Also">See Also</h2> + +<ul> + <li><a href="https://web.dev/content-visibility/">content-visibility: the new CSS property that boosts your rendering performance</a> (web.dev)</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.html b/files/ja/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.html index e32c959169..737c53f023 100644 --- a/files/ja/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.html +++ b/files/ja/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.html @@ -11,27 +11,41 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/resolv --- <div>{{JSRef}}</div> -<p>ローケルを反映しているプロパティとこの{{jsxref("Global_Objects/NumberFormat", "NumberFormat")}}オブジェクトの初期化中に計算された数値変換オプションをもった新しいオブジェクトを返します。</p> +<p><strong><code>Intl.NumberFormat.prototype.resolvedOptions()</code></strong> メソッドは、この {{jsxref("NumberFormat")}} オブジェクトの初期化時に計算されたロケールと数値整形オプションを反映したプロパティを持つ新しいオブジェクトを返します。</p> -<h2 id="構文">構文</h2> +<div>{{EmbedInteractiveExample("pages/js/intl-numberformat-prototype-resolvedoptions.html")}}</div> -<pre class="syntaxbox"><code><var>numberFormat</var>.resolvedOptions()</code></pre> +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> -<h2 id="説明">説明</h2> +<h2 id="Syntax" name="Syntax">構文</h2> -<p>ローケルを反映しているプロパティとこの{{jsxref("Global_Objects/NumberFormat", "NumberFormat")}}オブジェクトの初期化中に計算された数値変換オプションをもった新しいオブジェクトを返します。オブジェクトは次のプロパティを持っています。:</p> +<pre class="syntaxbox notranslate"><var>numberFormat</var>.resolvedOptions()</pre> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>この {{jsxref("NumberFormat")}} オブジェクトの初期化時に計算されたロケールと数値整形オプションを反映したプロパティを持つ新しいオブジェクトです。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p>返されるオブジェクトには以下のプロパティがあります。</p> <dl> <dt><code>locale</code></dt> - <dd>実際に使われているローケルに対するBCP47言語タグ。Unicode表現値が入力BCP47言語タグでリクエストされたら、このローケルに対してリクエストされサポートされているキー／バリューペアは<code>locale</code>に含まれます。</dd> + <dd>実際に使用したロケールの BCP 47 言語タグ。このロケールにつながる入力 BCP 47 言語タグに Unicode 拡張値が要求された場合、要求されたキーと値のペアのうち、このロケールで対応しているものが <code>locale</code> に含まれます。</dd> <dt><code>numberingSystem</code></dt> - <dd>Unicode表現キー<code>"nu"</code>を使うかデフォルトとして設定される値。</dd> - <dt><code>style</code></dt> + <dd>もし存在すれば、 <code>options</code> 引数でこのプロパティに指定された値、または Unicode 拡張キーの <code>"nu"</code> を使って要求された値、または既定として設定される値です。</dd> + <dt><code>notation</code></dt> + <dd><code>options</code> 引数でこのプロパティに指定された値、または既定として設定される <code>standard</code> です。</dd> + <dt><code>compactDisplay</code></dt> + <dd><code>options</code> 引数でこのプロパティに指定された値、または既定として設定される <code>short</code> です。</dd> + <dd>このプロパティは <code>notation</code> が "compact" に設定されている場合のみ存在します。</dd> + <dt><code>signDisplay</code></dt> + <dd><code>options</code> 引数でこのプロパティに指定された値、または既定として設定される <code>auto</code> です。</dd> <dt><code>useGrouping</code></dt> - <dd><code>options</code>引数でプロパティに対して提供されるかデフォルトとして設定される値。</dd> + <dd><code>options</code> 引数でこのプロパティに指定された値、または既定として設定される値。</dd> <dt><code>currency</code></dt> <dt><code>currencyDisplay</code></dt> - <dd><code>options</code>引数でプロパティに対して提供されるかデフォルトとして設定される値。<code>style</code>が<code>"currency"</code>の場合のみ、これらのプロパティは存在しています。</dd> + <dd><code>options</code> 引数でこのプロパティに指定された値、または既定として設定される値。<code>style</code>が<code>"currency"</code>の場合のみ、これらのプロパティは存在しています。</dd> </dl> <p>次の２つのプロパティのグループのうちどちらかのみが含まれています。:</p> @@ -40,21 +54,23 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/resolv <dt><code>minimumIntegerDigits</code></dt> <dt><code>minimumFractionDigits</code></dt> <dt><code>maximumFractionDigits</code></dt> - <dd><code>options</code>引数でプロパティに対して提供されるかデフォルトとして設定される値。<code>minimumSignificantDigits</code>または<code>maximumSignificantDigits</code>が<code>options</code>引数で提供されなかった場合のみ、これらのプロパティは存在しています。</dd> + <dd><code>options</code> 引数でプロパティに対して提供されるか既定で設定される値。 <code>minimumSignificantDigits</code> または <code>maximumSignificantDigits</code> が <code>options</code> 引数で提供されなかった場合のみ、これらのプロパティは存在しています。</dd> <dt><code>minimumSignificantDigits</code></dt> <dt><code>maximumSignificantDigits</code></dt> <dd><code>options</code>引数でプロパティに対して提供されるかデフォルトとして設定される値。 これらのプロパティのうち少なくとも１つが<code>options</code>引数で提供された場合のみ、これらのプロパティは存在しています。</dd> </dl> -<h2 id="例">例</h2> +<h2 id="Examples" name="Examples">例</h2> -<h3 id="resolvedOptions_メソッドを使う"><code>resolvedOptions</code> メソッドを使う</h3> +<h3 id="Using_the_resolvedOptions_method" name="Using_the_resolvedOptions_method">resolvedOptions メソッドの使用</h3> -<pre class="brush: js">var de = new Intl.NumberFormat('de-DE'); +<pre class="brush: js notranslate">var de = new Intl.NumberFormat('de-DE'); var usedOptions = de.resolvedOptions(); usedOptions.locale; // "de-DE" usedOptions.numberingSystem; // "latn" +usedOptions.notation; // "standard" +usedOptions.signDisplay; // "auto" usedOption.style; // "decimal" usedOptions.minimumIntegerDigits; // 1 usedOptions.minimumFractionDigits; // 0 @@ -62,77 +78,28 @@ usedOptions.maximumFractionDigits; // 3 usedOptions.useGrouping; // true </pre> -<h2 id="仕様">仕様</h2> +<h2 id="Specifications" name="Specifications">仕様書</h2> <table class="standard-table"> <tbody> <tr> - <th scope="col">仕様</th> - <th scope="col">状況</th> - <th scope="col">コメント</th> + <th scope="col">仕様書</th> </tr> <tr> - <td>{{SpecName('ES Int 1.0', '#sec-11.3.3', 'Intl.NumberFormat.prototype.resolvedOptions')}}</td> - <td>{{Spec2('ES Int 1.0')}}</td> - <td>Initial definition.</td> + <td>{{SpecName('ES Int Draft', '#sec-intl.numberformat.prototype.resolvedoptions', 'Intl.NumberFormat.prototype.resolvedOptions')}}</td> </tr> </tbody> </table> -<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> - -<div>{{CompatibilityTable}}</div> +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>機能</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>基本サポート</td> - <td>{{CompatChrome("24")}}</td> - <td>{{CompatGeckoDesktop("29")}}</td> - <td>{{CompatIE("11")}}</td> - <td>{{CompatOpera("15")}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>機能</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>基本サポート</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome("26")}}</td> - <td>{{CompatNo}}<br> - {{bug("864843")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> +<p>{{Compat("javascript.builtins.Intl.NumberFormat.resolvedOptions")}}</p> </div> -<h2 id="関連情報">関連情報</h2> +<h2 id="See_also" name="See_also">関連情報</h2> <ul> <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li> 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 8108241d0b..866ceb218c 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 @@ -8,76 +8,78 @@ tags: - NumberFormat translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/supportedLocalesOf --- -<div>{{JSRef("Global_Objects", "NumberFormat", "Intl,Collator,DateTimeFormat")}}</div> +<p>{{JSRef}}</p> + +<p><strong><code>Intl.ListFormat.supportedLocalesOf()</code></strong> メソッドは、ランタイムの既定のロケールで代替する必要なく数値の書式で対応されているものを含む配列を返します。</p> + +<div>{{EmbedInteractiveExample("pages/js/intl-numberformat-prototype-supportedlocalesof.html","shorter")}}</div> -<h2 id="概要">概要</h2> -<p>ランタイムのデフォルトローケルに戻る必要なしで数値変換でサポートされる提供されたローケルを含んでいる配列を返します。</p> <h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox"><code>Intl.NumberFormat.supportedLocalesOf(<var>locales</var>[, <var>options</var>])</code></pre> +<pre class="syntaxbox notranslate">Intl.NumberFormat.supportedLocalesOf(<var>locales</var>[, <var>options</var>])</pre> <h3 id="Parameters" name="Parameters">引数</h3> <dl> - <dt><code>locales</code></dt> - <dd>BCP47言語タグをもった文字列、そのような文字列の配列。<code>locales</code>引数の一般的な形式に対して、{{jsxref("Global_Objects/Intl", "Intl page", "#Locale_identification_and_negotiation", 1)}}を確認して下さい。</dd> - <dt><code>options</code></dt> + <dt><code><var>locales</var></code></dt> + <dd>BCP 47 言語タグを持つ文字列、またはそのような文字列の配列です。 <code>locales</code> 引数の一般的な形式については、 {{jsxref("Intl", "Intl のページ", "#Locale_identification_and_negotiation", 1)}}を参照してください。</dd> + <dt><code><var>options</var></code></dt> <dd> - <p>任意。次のプロパティを持つオブジェクト:</p> + <p>省略可能です。以下のプロパティを持つことがあるオブジェクトです。</p> <dl> <dt><code>localeMatcher</code></dt> - <dd>使用するローケルマッチングアルゴリズム。利用可能な値は<code>"lookup"</code> や <code>"best fit"</code>です。デフォルトは<code>"best fit"</code>です。このオプションについての情報のために、{{jsxref("Global_Objects/Intl", "Intl page", "#Locale_negotiation", 1)}}を確認して下さい。</dd> + <dd>使用するロケールの一致アルゴリズムです。指定可能な値は <code>lookup</code> および <code>best fit</code> で、既定値は <code>best fit</code> です。このオプションの詳細は、 {{jsxref("Intl", "Intl のページ", "#Locale_negotiation", 1)}}を参照してください。</dd> </dl> </dd> </dl> -<h2 id="説明">説明</h2> +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>指定したロケールタグのサブセットを表す文字列の配列で、ランタイムの既定のロケールで代替する必要なく数値の書式で対応されているものを含みます。</p> -<p><code>locales</code>で提供された言語パックのサブセットをもった配列を返します。返される言語タグでは、ランタイムが使われているローケルマッチングアルゴリズムが考慮して数値変換でローケルをサポートしているので、デフォルトローケルに戻る必要はありません。</p> +<h2 id="Description" name="Description">解説</h2> -<h2 id="例">例</h2> +<p><code>locales</code> で提供されている言語タグのサブセットを含む配列を返します。返される言語タグは、ランタイムが数値のロケールに対応しているもので、使用しているロケール一致アルゴリズムで一致しているとみなされているものです。</p> -<h3 id="例_supportedLocalesOfを使う">例: <code>supportedLocalesOf</code>を使う</h3> +<h2 id="Examples" name="Examples">例</h2> -<p>数値フォーマットで、バリ語ではなく、インドネシア語とドイツ語をサポートしているランタイムを仮定すると、<code>supportedLocalesOf</code> はインドネシア語とドイツ語の言語タグを返します。<code>pinyin</code> は数値フォーマットには適切ではなくインドネシア語では使われていません。インドネシアの特定のドイツ語はサポートされそうにもありません。<code>"lookup"</code>アルゴリズムの指定に注意して下さい。<code>"best fit"</code> はインドネシア語はバリ語に対して、十分にふさわしいと決定するかもしれません。というのも、 ほとんどのバリの人はインドネシア語も理解するからです。それゆえバリ言語タグも同様に返します。</p> +<h3 id="Using_supportedLocalesOf" name="Using_supportedLocalesOf">supportedLocalesOf() の使用</h3> -<pre class="brush: js">var locales = ['ban', 'id-u-co-pinyin', 'de-ID']; +<p>数値の書式でインドネシア語とドイツ語に対応しており、バリ語に対応していないランタイムを想定すると、 <code>supportedLocalesOf</code> はインドネシア語とドイツ語の言語タグを変更せずに返しますが、 <code>pinyin</code> の照合は数値の書式には関係なく、インドネシア語でも使用されません。ここでの <code>lookup</code> アルゴリズムの仕様に注意してください — バリ語話者のほとんどはインドネシア語も理解しているので、 <code>best fit</code> のマッチャーはインドネシア語がバリ語に適切に一致すると判断し、バリ語の言語タグも返すかもしれません。</p> + +<pre class="brush: js notranslate">var locales = ['ban', 'id-u-co-pinyin', 'de-ID']; var options = { localeMatcher: 'lookup' }; console.log(Intl.NumberFormat.supportedLocalesOf(locales, options).join(', ')); // → "id-u-co-pinyin, de-ID" </pre> -<h2 id="仕様">仕様</h2> +<h2 id="Specifications" name="Specifications">仕様書</h2> <table class="standard-table"> - <tbody> + <thead> <tr> - <th scope="col">仕様</th> - <th scope="col">状況</th> - <th scope="col">コメント</th> + <th scope="col">仕様書</th> </tr> + </thead> + <tbody> <tr> - <td>{{SpecName('ES Int 1.0', '#sec-11.2.2', 'Intl.NumberFormat.supportedLocalesOf')}}</td> - <td>{{Spec2('ES Int 1.0')}}</td> - <td>Initial definition.</td> + <td>{{SpecName('ES Int Draft', '#sec-intl.numberformat.supportedlocalesof', 'Intl.NumberFormat.supportedLocalesOf')}}</td> </tr> </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> <div> -<div> - +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> <p>{{Compat("javascript.builtins.Intl.NumberFormat.supportedLocalesOf")}}</p> </div> -</div> -<h2 id="関連情報">関連情報</h2> +<h2 id="See_also" name="See_also">関連情報</h2> <ul> <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li> diff --git a/files/ko/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/ko/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html index 677cf2fdaf..ee66eb7b65 100644 --- a/files/ko/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html +++ b/files/ko/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html @@ -5,14 +5,12 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Contain --- <p>{{CSSRef}}</p> -<p class="summary">flexbox가 웹 개발자들의 관심 받게된 이유 중 하나는 웹 최초로 최초로 적절한 정렬 기능을 제공했기 때문입니다. flexbox의 수직 정렬 기능을 이용하여 우리는 드디어 쉽게 박스(역주: 여기서 박스는 <strong>flex 컨테이너</strong>를 의미합니다) 내부를 중앙 정렬 할 수 있게 되었습니다. 이 가이드에서 우리는 flexbox의 정렬 및 끝 마추기 기능에 대해 자세히 살펴볼 것입니다.</p> +<p class="summary">flexbox가 웹 개발자들의 관심 받게된 이유 중 하나는 웹 최초로 최초로 적절한 정렬 기능을 제공했기 때문입니다. flexbox의 수직 정렬 기능을 이용하여 우리는 드디어 쉽게 박스(역주: 여기서 박스는 <strong>flex 컨테이너</strong>를 의미합니다) 내부를 중앙 정렬 할 수 있게 되었습니다. 이 가이드에서 우리는 flexbox의 정렬 및 끝 맞추기 기능에 대해 자세히 살펴볼 것입니다.</p> <p>박스 내부를 중앙 정렬 하기 위해 박스에 <code>align-items</code> 속성을 지정하면 교차 축에 대해 flex 항목을 정렬할 수 있습니다. 아래 경우, 교차 축은 수직 축입니다. <code>justify-content</code> 속성을 지정하면 flex 항목을 주축에 대해 정렬 할 수 있습니다. 아래 경우, 주축은 수평 방향입니다.</p> <p><img alt="A containing element with another box centered inside it." src="https://mdn.mozillademos.org/files/15627/align1.png" style="display: block; height: 357px; margin: 0px auto; width: 616px;"></p> - - <p>아래 예제의 코드를 살펴보세요. flex 컨테이너(역주: .box로 지정된 div 태그)나 flex 항목(역주: .box div로 지정된 div 태그)의 크기를 조절해도 flex 컨테이너 내부는 중앙 정렬됨을 보실 수 있습니다.</p> <p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}</p> diff --git a/files/pl/mozilla/add-ons/webextensions/twój_pierwszy_webextension/index.html b/files/pl/mozilla/add-ons/webextensions/twój_pierwszy_webextension/index.html index f5f1f8e3fc..94746493b6 100644 --- a/files/pl/mozilla/add-ons/webextensions/twój_pierwszy_webextension/index.html +++ b/files/pl/mozilla/add-ons/webextensions/twój_pierwszy_webextension/index.html @@ -1,6 +1,13 @@ --- title: Twoje pierwsze rozszerzenie slug: Mozilla/Add-ons/WebExtensions/Twój_pierwszy_WebExtension +tags: + - Add-ons + - Dodatki + - Extensions + - Przewodnik + - WebExtensions + - Wtyczki translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension --- <div>{{AddonSidebar}}</div> @@ -15,14 +22,14 @@ translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension <p>Stwórz nowy folder i przejdź do niego:</p> -<pre class="brush: bash">mkdir borderify +<pre class="brush: bash notranslate">mkdir borderify cd borderify</pre> <h3 id="manifest.json">manifest.json</h3> <p>Teraz stwórz nowy plik o nazwie "manifest.json" bezpośrednio w katalogu "borderify". Wprowadź do niego poniższy kod:</p> -<pre class="brush: json">{ +<pre class="brush: json notranslate">{ "manifest_version": 2, "name": "Borderify", @@ -59,7 +66,7 @@ cd borderify</pre> <div class="warning"> <p><a href="/en-US/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID#When_do_you_need_an_Add-on_ID">W niektórych sytuacjach musisz nadać ID swojemu rozszerzeniu</a>. Jeśli potrzebujesz nadać rozszerzeniu ID, dołącz klucz <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/applications">applications</a></code> do <code>manifest.json</code> i przypisz mu pole <code>id</code>:</p> -<pre class="brush: json">"applications": { +<pre class="brush: json notranslate">"applications": { "gecko": { "id": "borderify@przyklad.pl" } @@ -75,7 +82,7 @@ cd borderify</pre> <p>Jeśli zdecydujesz się dodać własną ikonę, to powinna być w formacie 48x48 pikseli. Możesz także dodać ikonę o rozmiarze 96x96 pikseli dla ekranów o wysokiej rozdzielczości i jeśli dodasz ją, to powinna ona zostać przypisana jako wartość pola 96 obiektu <code>icons</code> <br> w pliku manifest.json:</p> -<pre class="brush: json">"icons": { +<pre class="brush: json notranslate">"icons": { "48": "icons/border-48.png", "96": "icons/border-96.png" }</pre> @@ -90,7 +97,7 @@ cd borderify</pre> <p>Ostatecznie stwórz plik o nazwie "borderify.js" bezpośrednio w katalogu "borderify". Wpisz do niego poniższy kod:</p> -<pre class="brush: js">document.body.style.border = <code class="language-js"><span class="string token">"5px solid red"</span></code>;</pre> +<pre class="brush: js notranslate">document.body.style.border = <code class="language-js"><span class="string token">"5px solid red"</span></code>;</pre> <p>Ten skrypt b<span class="st">ę</span>dzie załadowany na stronach spełniających wzór określony w kluczu <code>content_scripts</code> w pliku manifest.json. Skrypt ma bezpośredni dostęp do dokumentu, podobnie jak skrypty wczytane przez stronę.</p> @@ -102,7 +109,7 @@ cd borderify</pre> <p>Najpierw dokładnie sprawdź, czy odpowiedne pliki są w właściwych miejsacach:</p> -<pre>borderify/ +<pre class="notranslate">borderify/ icons/ border-48.png borderify.js @@ -146,7 +153,7 @@ cd borderify</pre> <p>Teraz gdy ty masz <span class="short_text" id="result_box" lang="pl"><span>pomysł</span></span> na temat procesu tworzenia rozszerzeń (WebExtension) dla Firefoxa, to spróbuj:</p> <ul> - <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">przeczytać więcej na temat anatomi rozszerzeń</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">przeczytać więcej na temat anatomii rozszerzeń</a></li> <li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">napisać bardziej rozbudowane rozszerzenie</a></li> <li><a href="/en-US/Add-ons/WebExtensions/API">przeczytać o JavaScript API dostępnym dla rozszerzeń.</a></li> </ul> diff --git a/files/pt-pt/learn/front-end_web_developer/index.html b/files/pt-pt/learn/front-end_web_developer/index.html index f451a5a053..08d3626f6a 100644 --- a/files/pt-pt/learn/front-end_web_developer/index.html +++ b/files/pt-pt/learn/front-end_web_developer/index.html @@ -7,7 +7,7 @@ translation_of: Learn/Front-end_web_developer <p>Bem-vindos ao roteiro de aprendizado em desenvolvimento web front-end!</p> -<p>Aqui disponibilizamos tudo o que precisas para te tornares um desenvolvedor Web front-end. Simplesmente trabalha cada secção deste curso, aprendendo novas habilidades (ou melhorando as que já tens) á medida que avanças. <span style="">Cada secção inclui exercicios e avaliações para testar a tua compreensão antes de avançares para proxima.</span></p> +<p>Aqui disponibilizamos tudo o que precisas para te tornares um desenvolvedor Web front-end. Simplesmente trabalha cada secção deste curso, aprendendo novas habilidades (ou melhorando as que já tens) á medida que avanças. <span>Cada secção inclui exercicios e avaliações para testar a tua compreensão antes de avançares para proxima.</span></p> <h2 id="Temas_abrangidos">Temas abrangidos</h2> @@ -28,7 +28,7 @@ translation_of: Learn/Front-end_web_developer <p>Voce nao precisa de nenhum conhecimento anterior para este curso. Tudo que precisas e de um computador que possa operar um navegador moderno, conexao a internet, e boa vontade para aprender.</p> -<p>Se nao estiveres seguro de que desenvolvimento web front-end e para si, i/ou voce quer uma introducao mais gentil antes de iniciar um curso mais longo e completo, trabalhe no nosso modulo <a href="/en-US/docs/Learn/Getting_started_with_the_web">Iniciando com a web</a> (ingles) primeiramente.</p> +<p>Se nao estiveres seguro de que desenvolvimento web front-end e para si, e/ou voce quer uma introducao mais gentil antes de iniciar um curso mais longo e completo, trabalhe no nosso modulo <a href="/en-US/docs/Learn/Getting_started_with_the_web">Iniciando com a web</a> (ingles) primeiramente.</p> <h2 id="Obtendo_ajuda">Obtendo ajuda</h2> @@ -66,7 +66,7 @@ translation_of: Learn/Front-end_web_developer <h4 id="Pre_requisitos_3">Pre requisitos</h4> -<p>Nada mais, excepto um basico dominio computacional, i um basico ambiente de desenvolvimento web.</p> +<p>Nada mais, excepto um basico dominio computacional e um basico ambiente de desenvolvimento web.</p> <h4 id="Como_saberei_que_estou_pronto_para_continuar_2">Como saberei que estou pronto para continuar?</h4> @@ -135,7 +135,7 @@ translation_of: Learn/Front-end_web_developer <h4 id="Pre_requisitos_6">Pre requisitos</h4> -<p>Formularios requerem conhecimento sobre HTML, CSS, i JavaScript. A complexidade em trabalhar com formularios fazem deste um topico dedicado.</p> +<p>Formularios requerem conhecimento sobre HTML, CSS e JavaScript. A complexidade em trabalhar com formularios fazem deste um topico dedicado.</p> <h4 id="Como_saberei_que_estou_pronto_para_continuar_5">Como saberei que estou pronto para continuar?</h4> @@ -153,7 +153,7 @@ translation_of: Learn/Front-end_web_developer <h4 id="Pre_requisitos_7">Pre requisitos</h4> -<p>Seria uma otima ideia conhecer sobre HTML, CSS, i JavaScript antes de trabalhar nesta seccao. Inclui outras tecnicas e boas praticas em contacto com multiplas tecnologias.</p> +<p>Seria uma otima ideia conhecer sobre HTML, CSS e JavaScript antes de trabalhar nesta seccao. Inclui outras tecnicas e boas praticas em contacto com multiplas tecnologias.</p> <h4 id="Como_saberei_que_estou_pronto_para_continuar_6">Como saberei que estou pronto para continuar?</h4> @@ -172,7 +172,7 @@ translation_of: Learn/Front-end_web_developer <h4 id="Pre_requisitos_8">Pre requisitos</h4> -<p>Seria uma otima ideia conhecer sobre HTML, CSS, i JavaScript antes de trabalhar nesta seccao, tal como ferramentas abordadas que trabalham em conjunto com muitas destas tecnologias.</p> +<p>Seria uma otima ideia conhecer sobre HTML, CSS e JavaScript antes de trabalhar nesta seccao, tal como ferramentas abordadas que trabalham em conjunto com muitas destas tecnologias.</p> <h4 id="Como_saberei_que_estou_pronto_para_continuar_7">Como saberei que estou pronto para continuar?</h4> diff --git a/files/ru/web/api/analysernode/getbytefrequencydata/index.html b/files/ru/web/api/analysernode/getbytefrequencydata/index.html new file mode 100644 index 0000000000..c042694040 --- /dev/null +++ b/files/ru/web/api/analysernode/getbytefrequencydata/index.html @@ -0,0 +1,113 @@ +--- +title: AnalyserNode.getByteFrequencyData() +slug: Web/API/AnalyserNode/getByteFrequencyData +translation_of: Web/API/AnalyserNode/getByteFrequencyData +--- +<p>{{ APIRef("Web Audio API") }}</p> + +<p>Метод <strong><code>getByteFrequencyData()</code></strong> интерфейса {{ domxref("AnalyserNode") }} копирует текущие данные частоты в переданный в него Uint8Array {{domxref("Uint8Array")}} (unsigned byte array).</p> + +<p>Данные частоты состоят из целых чисел по шкале от 0 до 255.</p> + +<p>Каждый элемент в массиве представляет собой значение в децибелах для определенной частоты. Частоты распределены линейно от 0 до 1/2 частоты дискретизации. Например, для частоты дискретизации <code>48000</code> последний элемент массива будет представлять значение в децибелах для <code>24000</code> Гц.</p> + +<p>Если в массиве меньше элементов, чем в {{domxref("AnalyserNode.frequencyBinCount")}}, лишние элементы удаляются. Если в нем больше элементов, чем необходимо, лишние элементы игнорируются.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush: js notranslate">var audioCtx = new AudioContext(); +var analyser = audioCtx.createAnalyser(); +var dataArray = new Uint8Array(analyser.frequencyBinCount); // Uint8Array должен иметь такой же размер, что и frequencyBinCount + +void <em>analyser</em>.getByteFrequencyData(dataArray); // заполняет Uint8Array данными, полученными из getByteFrequencyData() +</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>array</code></dt> + <dd>{{domxref("Uint8Array")}} , в который будут скопированы данные частотной области. Для любого образца, который не содержит данных, значение равно <code>-<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>.<br> + Если в массиве меньше элементов, чем в {{domxref ("AnalyserNode.frequencyBinCount")}}, лишние элементы удаляются. Если в нем больше элементов, чем необходимо, лишние элементы игнорируются.</dd> +</dl> + +<h3 id="Возвращаемое_значение">Возвращаемое значение</h3> + +<p>None.</p> + +<h2 id="Пример">Пример</h2> + +<p>Следующий пример показывает базовое использование {{domxref ("AudioContext")}} для создания AnalyserNode, затем {{domxref ("window.requestAnimationFrame ()", "requestAnimationFrame")}} и {{htmlelement ("canvas" )}} для повторения сбора частотных данных и вывода в стиле гистограммы winamp для текущего аудиовхода. Для получения дополнительных примеров / информации ознакомьтесь с нашей демонстрацией <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> (см. соответствующий код в строках <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a> ).</p> + +<pre class="brush: js notranslate">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +var analyser = audioCtx.createAnalyser(); + + ... + +analyser.fftSize = 256; +var bufferLength = analyser.frequencyBinCount; +console.log(bufferLength); +var dataArray = new Uint8Array(bufferLength); + +canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + +function draw() { + drawVisual = requestAnimationFrame(draw); + + analyser.getByteFrequencyData(dataArray); + + canvasCtx.fillStyle = 'rgb(0, 0, 0)'; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + var barWidth = (WIDTH / bufferLength) * 2.5; + var barHeight; + var x = 0; + + for(var i = 0; i < bufferLength; i++) { + barHeight = dataArray[i]; + + canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)'; + canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2); + + x += barWidth + 1; + } +}; + +draw();</pre> + +<h2 id="Параметры_2">Параметры</h2> + +<dl> + <dt>array</dt> + <dd>{{domxref("Uint8Array")}}, в который будут скопированы данные частотной области.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Web Audio API', '#dom-analysernode-getbytefrequencydata', 'getByteFrequencyData()')}}</td> + <td>{{Spec2('Web Audio API')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_в_браузерах">Поддержка в браузерах</h2> + +<div> +<div class="hidden">Таблица совместимости на этой странице создана на основе структурированных данных. Если вы хотите внести свой вклад в данные, посетите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request..</div> + +<p>{{Compat("api.AnalyserNode.getByteFrequencyData")}}</p> +</div> + +<h2 id="См._также">См. также</h2> + +<ul> + <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> +</ul> diff --git a/files/tr/öğren/index.html b/files/tr/öğren/index.html index 533f6c7a8e..2aece44072 100644 --- a/files/tr/öğren/index.html +++ b/files/tr/öğren/index.html @@ -1,5 +1,5 @@ --- -title: Web Öğren +title: Web Programlama Öğren slug: Öğren tags: - öğren @@ -14,8 +14,6 @@ translation_of: Learn <p>Bu alanda tamamen yeni iseniz, web geliştiriciliği biraz zorlayıcı olabilir. Bu nedenle, elinizden tutup, konuları doğru biçimde öğrenmeniz ve kendinizi rahat hissetmeniz için gerekli ayrıntıları sağlayacağız. Web geliştirmeyi öğrenen bir öğrenci (kendi kendine ya da sınıf içinde öğrenen) , kaynak araştıran bir öğretmen, amatör, ya da sadece web teknolojileri hakkında daha fazla bilgi edinmek isteyen biri olsanız da kendinizi evinizde hissetmelisiniz.</p> - - <hr> <h2 id="Yenilikler_Neler">Yenilikler Neler?</h2> @@ -27,11 +25,10 @@ translation_of: Learn <p>Hedefinize ulaşmanız için gereken önemli tüm bilgileri içeren kursu oluşturduk.</p> +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Hadi Başlayalım</a></p> +</div> - -<hr> <h2 id="Nereden_Başlamalı">Nereden Başlamalı?</h2> -</div> <ul class="card-grid"> <li><span>Tamamen Yeniyim:</span> diff --git a/files/zh-cn/learn/tools_and_testing/index.html b/files/zh-cn/learn/tools_and_testing/index.html index 064d064027..b7146bac62 100644 --- a/files/zh-cn/learn/tools_and_testing/index.html +++ b/files/zh-cn/learn/tools_and_testing/index.html @@ -34,6 +34,6 @@ translation_of: Learn/Tools_and_testing <dl> <dt>真实世界web开发工具(TBD)</dt> <dd>在这个模块中，我们探索各种可用的web开发工具。这包括审查你不得不解决的最基本的任务，如何让它们在一个工作流中协调配合以及目前能够完成这些任务的最好的工具。</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">跨浏览器测试</a></dt> + <dt><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing">跨浏览器测试</a></dt> <dd>这个模块在测试web项目跨不同浏览器的领域看起来很特别。我们要识别你的目标受众（比如，你最担心的是哪些用户、浏览器和设备？），如何做测试，主要的问题是你将面临不同类型的代码和如何修复它们，有什么有用的工具能够帮助你测试和修复问题，如何通过自动化来增加测试效率。</dd> </dl> diff --git a/files/zh-cn/web/javascript/guide/expressions_and_operators/index.html b/files/zh-cn/web/javascript/guide/expressions_and_operators/index.html index 256961d4e6..62d4b97ab5 100644 --- a/files/zh-cn/web/javascript/guide/expressions_and_operators/index.html +++ b/files/zh-cn/web/javascript/guide/expressions_and_operators/index.html @@ -603,7 +603,7 @@ delete property; // legal only within a with statement <p><code>objectName</code>是一个对象名，<code>property</code> 是一个已经存在的属性，<code>index</code>是数组中的一个已经存在的键值的索引值。</p> -<p>第四行的形式只在<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code>声明的状态下是合法的， 从对象中删除一个属性。</p> +<p>第三行的形式只在<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code>声明的状态下是合法的， 从对象中删除一个属性。</p> <p>你能使用 <code>delete</code> 删除各种各样的隐式声明， 但是被<code>var</code>声明的除外。</p> diff --git a/files/zh-cn/web/javascript/guide/numbers_and_dates/index.html b/files/zh-cn/web/javascript/guide/numbers_and_dates/index.html index 392c659766..6376d14908 100644 --- a/files/zh-cn/web/javascript/guide/numbers_and_dates/index.html +++ b/files/zh-cn/web/javascript/guide/numbers_and_dates/index.html @@ -246,7 +246,7 @@ var notANum = Number.NaN; </tr> <tr> <td>{{jsxref("Math.sinh", "sinh()")}}, {{jsxref("Math.cosh", "cosh()")}}, {{jsxref("Math.tanh", "tanh()")}}</td> - <td>双曲三角函数; 返回值为弧度.</td> + <td>双曲三角函数; 参数为弧度.</td> </tr> <tr> <td>{{jsxref("Math.asinh", "asinh()")}}, {{jsxref("Math.acosh", "acosh()")}}, {{jsxref("Math.atanh", "atanh()")}}</td> @@ -260,7 +260,7 @@ var notANum = Number.NaN; </tr> <tr> <td>{{jsxref("Math.floor", "floor()")}}, {{jsxref("Math.ceil", "ceil()")}}</td> - <td>返回最大/最小整数小于/大于或等于参数</td> + <td>返回小于等于参数的最大整数；返回大于等于参数的最小整数</td> </tr> <tr> <td>{{jsxref("Math.min", "min()")}}, {{jsxref("Math.max", "max()")}}</td> @@ -279,7 +279,7 @@ var notANum = Number.NaN; <tr> <td>{{jsxref("Math.sqrt", "sqrt()")}}, {{jsxref("Math.cbrt", "cbrt()")}}, {{jsxref("Math.hypot", "hypot()")}}</td> <td> - <p>平方根，立方根，平方参数的和的平方根 </p> + <p>平方根，立方根，所有参数平方和的平方根 </p> <p>两个参数平方和的平方根</p> </td> |