diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-10 08:37:18 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-10 08:37:18 -0500 |
| commit | 65cc6eabd71b1bceccf6fd3d3d4970c2955f3784 (patch) | |
| tree | 3d54e994e6b6ff762841fe4c3eb60e87130589a5 /files | |
| parent | a065e04d529da1d847b5062a12c46d916408bf32 (diff) | |
| download | translated-content-65cc6eabd71b1bceccf6fd3d3d4970c2955f3784.tar.gz translated-content-65cc6eabd71b1bceccf6fd3d3d4970c2955f3784.tar.bz2 translated-content-65cc6eabd71b1bceccf6fd3d3d4970c2955f3784.zip | |
dump 2020-12-10
Diffstat (limited to 'files')
61 files changed, 2568 insertions, 1256 deletions
diff --git a/files/de/web/css/_doublecolon_marker/index.html b/files/de/web/css/_doublecolon_marker/index.html new file mode 100644 index 0000000000..ee5dd917d2 --- /dev/null +++ b/files/de/web/css/_doublecolon_marker/index.html @@ -0,0 +1,101 @@ +--- +title: '::marker' +slug: 'Web/CSS/::marker' +tags: + - CSS + - CSS Liste + - Experimental + - Layout + - Pseudo-element + - Referenz + - Selektor +translation_of: 'Web/CSS/::marker' +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">Das <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/CSS/Pseudo-elements">pseudo-element</a> <strong><code>::marker</code></strong> </span>wählt das Markierungsfeld eines Listenelements aus, das in der Regel einen Aufzählungspunkt oder eine Zahl enthält. Es funktioniert mit jedem Element oder Pseudo-Element, das angezeigt werden soll: Listenelement <code><a href="/de/docs/Web/CSS/display">display: list-item</a></code>, wie z.B. die Elemente {{HTMLElement("li")}} und {{HTMLElement("summary")}} elements.</p> + +<pre class="brush: css no-line-numbers notranslate">::marker { + color: blue; + font-size: 1.2em; +}</pre> + +<h2 id="Zulässige_Eigenschaften">Zulässige Eigenschaften</h2> + +<p>Nur bestimmte CSS-Eigenschaften können in einer Regel mit <code>::marker</code> als Selektor verwendet werden:</p> + +<ul> + <li>Alle <a href="/de/docs/Web/CSS/CSS_Fonts">Schrift-Eigenschaften</a></li> + <li>Die Eigenschaft {{CSSxRef("white-space")}}</li> + <li>{{CSSxRef("color")}}</li> + <li>Die Eigenschaften {{CSSxRef("text-combine-upright")}}, {{CSSxRef("unicode-bidi")}} und {{CSSxRef("direction")}}</li> + <li>Die Eigenschaft {{CSSxRef("content")}}</li> + <li>Alle <a href="/de/docs/Web/CSS/CSS_Animations#CSS_Properties">Animations</a>- und <a href="/en-US/docs/Web/CSS/CSS_Transitions#Properties">Transitions</a>-Eigenschaften</li> +</ul> + +<div class="blockIndicator note"> +<p>Die Spezifikation besagt, dass in Zukunft weitere CSS-Eigenschaften unterstützt werden können.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre> + +<h2 id="Examples" name="Examples">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><ul> + <li>Peaches</li> + <li>Apples</li> + <li>Plums</li> +</ul></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">ul li::marker { + color: red; + font-size: 1.5em; +}</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>{{EmbedLiveSample('Examples')}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Pseudo-Elements', '#marker-pseudo', '::marker')}}</td> + <td>{{Spec2('CSS4 Pseudo-Elements')}}</td> + <td>Keine wesentliche Änderung.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Lists', '#marker-pseudo', '::marker')}}</td> + <td>{{Spec2('CSS3 Lists')}}</td> + <td>Ursprüngliche Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<div> +<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div> + +<p>{{Compat("css.selectors.marker")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>HTML-Elemente, die standardmäßig Markierungsfelder haben: {{HTMLElement("ol")}}, {{HTMLElement("li")}}, {{HTMLElement("summary")}}</li> +</ul> diff --git a/files/es/web/api/fetch_api/utilizando_fetch/index.html b/files/es/web/api/fetch_api/utilizando_fetch/index.html index 0f647a7e61..51617ad047 100644 --- a/files/es/web/api/fetch_api/utilizando_fetch/index.html +++ b/files/es/web/api/fetch_api/utilizando_fetch/index.html @@ -37,7 +37,7 @@ translation_of: Web/API/Fetch_API/Using_Fetch .then(response => response.json()) .then(data => console.log(data));</pre> -<p>Aquí estamos recuperando un archivo JSON a través de red e impriminedo en la consola. El uso de <code>fetch()</code> más simple toma un argumento (la ruta del recurso que quieres buscas) y devuelve un objeto Promise conteniendo la respuesta, un objeto {{domxref("Response")}}.</p> +<p>Aquí estamos recuperando un archivo JSON a través de red e imprimiendo en la consola. El uso de <code>fetch()</code> más simple toma un argumento (la ruta del recurso que quieres obtener) y devuelve un objeto Promise conteniendo la respuesta, un objeto {{domxref("Response")}}.</p> <p>Esto es, por supuesto, una respuesta HTTP no el archivo JSON. Para extraer el contenido en el cuerpo del JSON desde la respuesta, usamos el método {{domxref("Body.json","json()")}} (definido en el <a href="https://es.wikipedia.org/wiki/Mixin">mixin</a> de {{domxref("Body")}}, el cual está implementado por los objetos {{domxref("Request")}} y {{domxref("Response")}}).</p> diff --git a/files/es/web/html/elemento/nav/index.html b/files/es/web/html/elemento/nav/index.html index 1e88157775..c8d998cef2 100644 --- a/files/es/web/html/elemento/nav/index.html +++ b/files/es/web/html/elemento/nav/index.html @@ -58,9 +58,9 @@ translation_of: Web/HTML/Element/nav <h2 id="Ejemplo">Ejemplo</h2> -<p>In this example, a <code><nav></code> block is used to contain an unordered list ({{HTMLElement("ul")}}) of links. With appropriate CSS, this can be presented as a sidebar, navigation bar, or drop-down menu.</p> +<p>En este ejemplo, un bloque <code><nav></code> es usado para contener una lista no ordenada ({{HTMLElement("ul")}}) de enlaces. Con el CSS apropiado, esto puede ser presentado como una barra lateral, una barra de navegación o un menú desplegable.</p> -<pre class="brush: html"><nav class="menu"> +<pre class="brush: html notranslate"><nav class="menu"> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Sobre nosotros</a></li> @@ -88,7 +88,7 @@ translation_of: Web/HTML/Element/nav <tr> <td>{{SpecName('HTML5 W3C', 'sections.html#the-nav-element', '<nav>')}}</td> <td>{{Spec2('HTML5 W3C')}}</td> - <td>Definicion inicial</td> + <td>Definición inicial</td> </tr> </tbody> </table> diff --git a/files/es/web/javascript/referencia/classes/constructor/index.html b/files/es/web/javascript/referencia/classes/constructor/index.html index 71fcb413f1..9ad7ec8de9 100644 --- a/files/es/web/javascript/referencia/classes/constructor/index.html +++ b/files/es/web/javascript/referencia/classes/constructor/index.html @@ -11,9 +11,11 @@ translation_of: Web/JavaScript/Reference/Classes/constructor <p>El método constructor es un metodo especial para crear e inicializar un objeto creado a partir de una clase.</p> +<p>El código fuente para este ejemplo interactivo se encuentra almacenado en un repositorio de Github. Si quieres contribuir al proyecto de ejemplos interactivos, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud para extraer el código (pull request).</p> + <h2 id="Sintaxis">Sintaxis</h2> -<pre class="syntaxbox">constructor([argumentos]) { ... }</pre> +<pre class="syntaxbox notranslate">constructor([argumentos]) { ... }</pre> <h2 id="Descripción">Descripción</h2> @@ -29,7 +31,7 @@ translation_of: Web/JavaScript/Reference/Classes/constructor <p>Este fragmento de código se toma de la <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a>).</p> -<pre class="brush: js">class Square extends Polygon { +<pre class="brush: js notranslate">class Square extends Polygon { constructor(length) { // Aquí, llama al constructor de la clase padre con sus longitudes // contemplando la anchura y la altura del Polígono @@ -53,12 +55,12 @@ translation_of: Web/JavaScript/Reference/Classes/constructor <p>Si no especifica un método constructor, se utiliza un constructor predeterminado. Para las clases base, el constructor por defecto es:</p> -<pre class="brush: js">constructor() {} +<pre class="brush: js notranslate">constructor() {} </pre> <p>Para las clases derivadas, el constructor por defecto es:</p> -<pre class="brush: js">constructor(...args) { +<pre class="brush: js notranslate">constructor(...args) { super(...args); }</pre> @@ -86,10 +88,10 @@ translation_of: Web/JavaScript/Reference/Classes/constructor <h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> - - <p>{{Compat("javascript.classes.constructor")}}</p> +<p>La tabla de compatibilidad de esta pagina está generada a partir de data estructurada. Si quieres contribuir a la data, por favor dirígete a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción</p> + <h2 id="Ver_también">Ver también</h2> <ul> diff --git a/files/fr/web/api/web_animations_api/index.html b/files/fr/web/api/web_animations_api/index.html index fac19092e5..0b64fa7a75 100644 --- a/files/fr/web/api/web_animations_api/index.html +++ b/files/fr/web/api/web_animations_api/index.html @@ -1,78 +1,83 @@ --- title: Web Animations API slug: Web/API/Web_Animations_API +tags: + - API + - Animation + - Reference + - Web Animations translation_of: Web/API/Web_Animations_API --- -<p><font><font>{{DefaultAPISidebar ("Web Animations")}}</font></font></p> +<p>{{DefaultAPISidebar("Web Animations")}}</p> -<p><font><font>L' </font></font><strong><font><font>API Web Animations</font></font></strong><font><font> permet de synchroniser et de chronométrer les changements de présentation d'une page Web, c'est-à-dire l'animation d'éléments DOM. </font><font>Pour ce faire, il combine deux modèles: le modèle de synchronisation et le modèle d'animation.</font></font></p> +<p>L'<strong>API Web Animations</strong> permet de synchroniser et de chronométrer les changements de présentation d'une page Web, c'est-à-dire l'animation d'éléments DOM. Pour ce faire, il combine deux modèles : le modèle de synchronisation et le modèle d'animation.</p> -<h2 id="Concepts_et_utilisation"><font><font>Concepts et utilisation</font></font></h2> +<h2 id="Concepts_et_utilisation">Concepts et utilisation</h2> -<p><font><font>L'API Web Animations fournit un langage commun aux navigateurs et aux développeurs pour décrire les animations sur les éléments DOM. </font><font>Pour obtenir plus d'informations sur les concepts derrière l'API et comment l'utiliser, lisez </font></font><a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API"><font><font>Utilisation de l'API Web Animations</font></font></a><font><font> .</font></font></p> +<p>L'API Web Animations fournit un langage commun aux navigateurs et aux développeurs pour décrire les animations sur les éléments DOM. Pour obtenir plus d'informations sur les concepts derrière l'API et comment l'utiliser, lisez <a href="/fr/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Utilisation de l'API Web Animations</a>.</p> -<h2 id="Interfaces_danimations_Web"><font><font>Interfaces d'animations Web</font></font></h2> +<h2 id="Interfaces_danimations_Web">Interfaces d'animations Web</h2> <dl> - <dt><font><font>{{domxref ("Animation")}}</font></font></dt> - <dd><font><font>Fournit des commandes de lecture et une chronologie pour un nœud ou une source d'animation. </font><font>Peut prendre un objet créé avec le constructeur {{domxref ( "KeyframeEffect.KeyframeEffect", "KeyframeEffect ()")}}.</font></font></dd> - <dt><font><font>{{domxref ("KeyframeEffect")}}</font></font></dt> - <dd><font><font>Décrit des ensembles de propriétés et de valeurs animables, appelées </font></font><strong><font><font>images clés</font></font></strong><font><font> et leurs </font></font><a href="/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options"><font><font>options de minutage</font></font></a><font><font> . </font><font>Ceux-ci peuvent ensuite être lus en utilisant le constructeur {{domxref ("Animation.Animation", "Animation ()")}}.</font></font></dd> - <dt><font><font>{{domxref ("AnimationTimeline")}}</font></font></dt> - <dd><font><font>Représente la chronologie de l'animation. </font><font>Cette interface existe pour définir les fonctionnalités de la chronologie (héritées par {{domxref ("DocumentTimeline")}} et les futurs objets de chronologie) et n'est pas elle-même accessible par les développeurs.</font></font></dd> - <dt><font><font>{{domxref ("AnimationEvent")}}</font></font></dt> - <dd><font><font>Fait actuellement partie des animations CSS.</font></font></dd> - <dt><font><font>{{domxref ("DocumentTimeline")}}</font></font></dt> - <dd><font><font>Représente les chronologies d'animation, y compris la chronologie du document par défaut (accessible à l'aide de la propriété {{domxref ("Document.timeline")}}).</font></font></dd> - <dt><font><font>{{domxref ("EffectTiming")}}</font></font></dt> - <dd><font><font>{{domxref ("Element.animate ()")}}, {{domxref ("KeyframeEffectReadOnly.KeyframeEffectReadOnly ()")}} et {{domxref ("KeyframeEffect.KeyframeEffect ()")}} acceptent tous un dictionnaire facultatif objet des propriétés de synchronisation.</font></font></dd> + <dt>{{domxref("Animation")}}</dt> + <dd>Fournit des commandes de lecture et une chronologie pour un nœud ou une source d'animation. Peut prendre un objet créé avec le constructeur {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}}.</dd> + <dt>{{domxref("KeyframeEffect")}}</dt> + <dd>Décrit des ensembles de propriétés et de valeurs animables, appelées <strong>images clés</strong> (<em>keyframes</em>) et leurs <a href="/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options">options de minutage</a> . Ceux-ci peuvent ensuite être lus en utilisant le constructeur {{domxref("Animation.Animation", "Animation()")}}.</dd> + <dt>{{domxref("AnimationTimeline")}}</dt> + <dd>Représente la chronologie de l'animation. Cette interface existe pour définir les fonctionnalités de la chronologie (héritées par {{domxref("DocumentTimeline")}} et les futurs objets de chronologie) et n'est pas elle-même accessible par les développeurs.</dd> + <dt>{{domxref("AnimationEvent")}}</dt> + <dd>Fait actuellement partie des animations CSS.</dd> + <dt>{{domxref("DocumentTimeline")}}</dt> + <dd>Représente les chronologies d'animation, y compris la chronologie du document par défaut (accessible à l'aide de la propriété {{domxref("Document.timeline")}}).</dd> + <dt>{{domxref("EffectTiming")}}</dt> + <dd>{{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect()")}} acceptent tous un dictionnaire facultatif objet des propriétés de synchronisation.</dd> </dl> -<h2 id="Extensions_à_dautres_interfaces"><font><font>Extensions à d'autres interfaces</font></font></h2> +<h2 id="Extensions_à_dautres_interfaces">Extensions à d'autres interfaces</h2> -<p><font><font>L'API Web Animations ajoute de nouvelles fonctionnalités à {{domxref ("document")}} et {{domxref ("element")}}.</font></font></p> +<p>L'API Web Animations ajoute de nouvelles fonctionnalités à {{domxref("document")}} et {{domxref("element")}}.</p> -<h3 id="Extensions_à_l_Documentinterface"><font><font>Extensions à l' </font></font><code>Document</code><font><font>interface</font></font></h3> +<h3 id="Extensions_à_linterface_Document">Extensions à l'interface <code>Document</code></h3> <dl> - <dt><font><font>{{domxref ("document.timeline")}}</font></font></dt> - <dd><font><font>L' </font></font><code>DocumentTimeline</code><font><font>objet représentant la chronologie du document par </font><font>défaut.</font></font></dd> - <dt><font><font>{{domxref ("document.getAnimations ()")}}</font></font></dt> - <dd><font><font>Renvoie un tableau d'objets {{domxref ("Animation")}} actuellement en vigueur sur les éléments du </font></font><code>document</code><font><font>.</font></font></dd> + <dt>{{domxref("document.timeline")}}</dt> + <dd>L'objet <code>DocumentTimeline</code> représentant la chronologie du document par défaut.</dd> + <dt>{{domxref("document.getAnimations()")}}</dt> + <dd>Renvoie un tableau d'objets {{domxref("Animation")}} actuellement en vigueur sur les éléments du <code>document</code>.</dd> <dt> - <h3 id="Extensions_à_l_Elementinterface"><font><font>Extensions à l' </font></font><code>Element</code><font><font>interface</font></font></h3> + <h3 id="Extensions_à_linterface_Element">Extensions à l'interface <code>Element</code></h3> </dt> - <dt><font><font>{{domxref ("Element.animate ()")}}</font></font></dt> - <dd><font><font>Une méthode de raccourci pour créer et lire une animation sur un élément. </font><font>Il renvoie l'instance d'objet {{domxref ("Animation")}} créée.</font></font></dd> - <dt><font><font>{{domxref ("Element.getAnimations ()")}}</font></font></dt> - <dd><font><font>Renvoie un tableau d'objets {{domxref ("Animation")}} affectant actuellement un élément ou qui sont programmés pour le faire à l'avenir.</font></font></dd> + <dt>{{domxref("Element.animate()")}}</dt> + <dd>Une méthode de raccourci pour créer et lire une animation sur un élément. Il renvoie l'instance d'objet {{domxref("Animation")}} créée.</dd> + <dt>{{domxref("Element.getAnimations()")}}</dt> + <dd>Renvoie un tableau d'objets {{domxref("Animation")}} affectant actuellement un élément ou qui sont programmés pour le faire à l'avenir.</dd> </dl> -<h2 id="Caractéristiques"><font><font>Caractéristiques</font></font></h2> +<h2 id="Spécifications">Spécifications</h2> <table class="standard-table"> <tbody> <tr> - <th scope="col"><font><font>spécification</font></font></th> - <th scope="col"><font><font>Statut</font></font></th> - <th scope="col"><font><font>Commentaire</font></font></th> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> </tr> <tr> - <td><font><font>{{SpecName ('Web Animations')}}</font></font></td> - <td><font><font>{{Spec2 ('Web Animations')}}</font></font></td> - <td><font><font>Définition initiale</font></font></td> + <td>{{SpecName('Web Animations')}}</td> + <td>{{Spec2('Web Animations')}}</td> + <td>Définition initiale</td> </tr> </tbody> </table> -<h2 id="Voir_également"><font><font>Voir également</font></font></h2> +<h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API"><font><font>Utilisation de l'API Web Animations</font></font></a></li> - <li><a href="https://mozdevs.github.io/Animation-examples/"><font><font>Démos d'animations Web</font></font></a></li> - <li><a href="https://github.com/web-animations/web-animations-js"><font><font>Polyfill</font></font></a></li> - <li><font><a href="https://birtles.github.io/areweanimatedyet/"><font>Implémentation</font></a><font> actuelle de Firefox: </font></font><a href="https://birtles.github.io/areweanimatedyet/"><font><font>AreWeAnimatedYet</font></font></a></li> + <li><a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Utilisation de l'API Web Animations</a></li> + <li><a href="https://mozdevs.github.io/Animation-examples/">Démos d'animations web</a></li> + <li><a href="https://github.com/web-animations/web-animations-js">Polyfill / Prothèse d'implémentation</a></li> + <li><a href="https://birtles.github.io/areweanimatedyet/">Implémentation</a> actuelle de Firefox : <a href="https://birtles.github.io/areweanimatedyet/">AreWeAnimatedYet</a></li> <li> - <p><a href="http://codepen.io/danwilson/pen/xGBKVq"><font><font>Test de prise en charge du navigateur</font></font></a></p> + <p><a href="http://codepen.io/danwilson/pen/xGBKVq">Test de prise en charge du navigateur</a></p> </li> </ul> diff --git a/files/it/glossary/nullish/index.html b/files/it/glossary/nullish/index.html index 3d4ac992ed..f8cf4dcd7c 100644 --- a/files/it/glossary/nullish/index.html +++ b/files/it/glossary/nullish/index.html @@ -1,5 +1,5 @@ --- -title: Nullish value +title: Valori nulli slug: Glossary/Nullish translation_of: Glossary/Nullish --- diff --git a/files/ja/learn/css/first_steps/index.html b/files/ja/learn/css/first_steps/index.html index 3a7a08cb48..b576a008e4 100644 --- a/files/ja/learn/css/first_steps/index.html +++ b/files/ja/learn/css/first_steps/index.html @@ -14,6 +14,14 @@ translation_of: Learn/CSS/First_steps <p class="summary">CSS (Cascading Style Sheets) はウェブページをスタイリングしたりレイアウトしたりするのに使われます — 例えば、文字、色、大きさを変えたり、コンテンツに余白を設けたり、複数列に分けたり、あるいはアニメーションを加えたりなど様々な装飾機能があります。このモジュールでは CSS を習得するために、どう働くかの基本とともに、構文のありかたと HTML にスタイリングを加えることを簡単な始め方を提供します。</p> +<div class="in-page-callout webdev"> +<h3 id="Looking_to_become_a_front-end_web_developer" name="Looking_to_become_a_front-end_web_developer">フロントエンドのウェブ開発者になりたいですか？</h3> + +<p>ゴールに向かって頑張るために必要な情報をまとめたコースをご用意しました。</p> + +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">始める</a></p> +</div> + <h2 id="Prerequisites" name="Prerequisites">前提条件</h2> <p>このモジュールを始める前に、次の状態になっておくべきです。</p> diff --git a/files/ja/learn/forms/styling_html_forms/index.html b/files/ja/learn/forms/styling_html_forms/index.html index 4634665cef..71d463f0c7 100644 --- a/files/ja/learn/forms/styling_html_forms/index.html +++ b/files/ja/learn/forms/styling_html_forms/index.html @@ -199,7 +199,7 @@ legend { <p>上記のコードを HTML の body に追加します。</p> -<h3 id="Organizing_your_assets" name="Organizing_your_assets">Organizing your assets</h3> +<h3 id="Organizing_your_assets" name="Organizing_your_assets">アセットを揃える</h3> <p>ここからがおもしろいところです! コードを書き始める前に、ここでは 3 つの追加要素が必要です:</p> @@ -308,7 +308,7 @@ form { <p>テキストフィールドのスタイル設定が完了して、次は単一行および複数行のテキストフィールドの表示が同じになるよう調整しなければなりません。これは、一般的にこれらのデフォルト表示が同じでないためです。</p> -<h4 id="Tweaking_the_textareas" name="Tweaking_the_textareas">Tweaking the textareas</h4> +<h4 id="Tweaking_the_textareas" name="Tweaking_the_textareas">textareaの微調整</h4> <p>{{HTMLElement("textarea")}} 要素はデフォルトでブロック要素としてレンダリングされるようにします。ここで重要なことは、{{cssxref("resize")}} プロパティと {{cssxref("overflow")}} プロパティの 2 つです。ここでは固定サイズでデザインしているため、ユーザーが複数行のテキストフィールドをリサイズできないように <code>resize</code> プロパティを使用します。{{cssxref("overflow")}} プロパティは、ブラウザー間でのフィールドの一貫性を向上させるために使用します。これのデフォルト値が <code>auto</code> であるブラウザーと <code>scroll</code> であるブラウザーが存在します。この例では、すべてのブラウザーが <code>auto</code> になるようにするのがよいでしょう。</p> @@ -348,7 +348,8 @@ button:hover, button:focus { outline : none; background : #000; - co</pre> + color : #FFF; +}</pre> <h3 id="The_final_result" name="The_final_result">最終結果</h3> 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 8390797c5b..79ddcd712b 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 @@ -1,5 +1,5 @@ --- -title: バウンスボールに機能を追加する +title: バウンスボールのデモに機能を追加する slug: Learn/JavaScript/Objects/Adding_bouncing_balls_features tags: - Assessment diff --git a/files/ja/learn/javascript/objects/index.html b/files/ja/learn/javascript/objects/index.html index 65df0e0ece..3985137adb 100644 --- a/files/ja/learn/javascript/objects/index.html +++ b/files/ja/learn/javascript/objects/index.html @@ -48,6 +48,6 @@ translation_of: Learn/JavaScript/Objects <h2 id="Assessments" name="Assessments">評価</h2> <dl> - <dt><a href="/ja/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">バウンスボールのデモへの機能の追加</a></dt> + <dt><a href="/ja/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">バウンスボールのデモに機能を追加する</a></dt> <dd>この評価では、前の記事のバウンスボールデモを出発点として使用し、新しい興味深い機能を追加する予定です。</dd> </dl> diff --git a/files/ja/web/api/htmlelement/beforeinput_event/index.html b/files/ja/web/api/htmlelement/beforeinput_event/index.html index 4939f3e9b8..060277ae97 100644 --- a/files/ja/web/api/htmlelement/beforeinput_event/index.html +++ b/files/ja/web/api/htmlelement/beforeinput_event/index.html @@ -2,19 +2,20 @@ title: 'HTMLElement: beforeinput イベント' slug: Web/API/HTMLElement/beforeinput_event tags: - - DOM + - API - Event - - Experimental + - HTML DOM + - HTMLElement - InputEvent - Reference - beforeinput translation_of: Web/API/HTMLElement/beforeinput_event --- -<div>{{APIRef}} {{SeeCompatTable}}</div> +<div>{{APIRef}}</div> -<p><span class="seoSummary">DOM の <strong><code>beforeinput</code></strong> イベントは、{{HTMLElement("input")}}、{{HTMLElement("select")}}、または {{HTMLElement("textarea")}} 要素の値が変更されようとしているときに発生します。 このイベントは、{{domxref("HTMLElement.contentEditable", "contenteditable")}} が有効になっている要素、および {{domxref("Document.designMode", "designMode")}} がオンになっている要素にも適用されます。</span></p> +<p>DOM の <strong><code>beforeinput</code></strong> イベントは、{{HTMLElement("input")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}} 要素の値が変更されようとしているときに発生します。 このイベントは、{{domxref("HTMLElement.contentEditable", "contenteditable")}} が有効になっている要素、および {{domxref("Document.designMode", "designMode")}} がオンになっている要素にも適用されます。</p> -<p><code>contenteditable</code> や <code>designMode</code> の場合、イベントのターゲットは<em>編集ホスト</em>です。 これらのプロパティが複数の要素に適用された場合、編集ホストは、親が編集可能ではない直近の先祖要素になります。</p> +<p><code>contenteditable</code> や <code>designMode</code> の場合、イベントのターゲットは<strong>編集ホスト</strong>です。 これらのプロパティが複数の要素に適用された場合、編集ホストは、親が編集可能ではない直近の先祖要素になります。</p> <table class="properties"> <tbody> @@ -43,7 +44,7 @@ translation_of: Web/API/HTMLElement/beforeinput_event <td>はい</td> </tr> <tr> - <th>デフォルトのアクション</th> + <th>既定のアクション</th> <td>DOM 要素の更新</td> </tr> </tbody> @@ -51,16 +52,27 @@ translation_of: Web/API/HTMLElement/beforeinput_event <h2 id="Examples" name="Examples">例</h2> -<p>この例では、{{HtmlElement("input")}} 要素の値を変更する直前に値を記録します。</p> +<h3 id="機能の検出">機能の検出</h3> -<h3 id="HTML" name="HTML">HTML</h3> +<p>以下の関数は、 <code>beforeinput</code> に対応していれば true を返します。</p> -<pre class="brush: html"><input placeholder="テキストを入力" name="name"/> +<pre class="brush: js notranslate">function isBeforeInputEventAvailable() { + return typeof InputEvent.prototype.getTargetRanges === "function"; +} +</pre> + +<h3 id="Simple_logger" name="Simple_logger">単純なロガー</h3> + +<p>この例では、 {{HtmlElement("input")}} 要素に適用された新しい値に置き換える直前に、要素の現在の値をログに記録しています。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><input placeholder="テキストを入力" name="name"/> <p id="values"></p></pre> -<h3 id="JavaScript" name="JavaScript">JavaScript</h3> +<h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js">const input = document.querySelector('input'); +<pre class="brush: js notranslate">const input = document.querySelector('input'); const log = document.getElementById('values'); input.addEventListener('beforeinput', updateValue); @@ -69,16 +81,16 @@ function updateValue(e) { log.textContent = e.target.value; }</pre> -<h3 id="Result" name="Result">結果</h3> +<h4 id="Result" name="Result">結果</h4> -<p>{{EmbedLiveSample("Examples")}}</p> +<p>{{EmbedLiveSample("Simple_logger")}}</p> -<h2 id="Specifications" name="Specifications">仕様</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> </tr> <tr> @@ -90,7 +102,7 @@ function updateValue(e) { <h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - +<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("api.HTMLElement.beforeinput_event")}}</p> diff --git a/files/ja/web/api/xrinputsource/gripspace/index.html b/files/ja/web/api/xrinputsource/gripspace/index.html index 45e0b9a0c9..87c326186c 100644 --- a/files/ja/web/api/xrinputsource/gripspace/index.html +++ b/files/ja/web/api/xrinputsource/gripspace/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/XRInputSource/gripSpace --- <div>{{securecontext_header}}{{APIRef("WebXR")}}</div> -<p class="summary"><span class="seoSummary">{{domxref("XRInputSource")}} の <strong><code>gripSpace</code></strong> 読み取り専用プロパティは、ネイティブの原点がユーザーの手（またはその一部）に保持しているように見える仮想オブジェクトのレンダリングに使用するポーズを追跡する {{domxref("XRSpace")}} を返します。</span> 例えば、ユーザーが仮想の真っ直ぐな棒を持っている場合、この <code>XRSpace</code> のネイティブの原点は、ユーザーの拳のおおよその重心にあります。</p> +<p class="summary"><span class="seoSummary">{{domxref("XRInputSource")}} の <strong><code>gripSpace</code></strong> 読み取り専用プロパティは、ネイティブの原点がユーザーの手に保持している（またはユーザーの手の一部の）ように見える仮想オブジェクトのレンダリングに使用するポーズを追跡する {{domxref("XRSpace")}} を返します。</span> 例えば、ユーザーが仮想の真っ直ぐな棒を持っている場合、この <code>XRSpace</code> のネイティブの原点は、ユーザーの拳のおおよその重心にあります。</p> <h2 id="Syntax" name="Syntax">構文</h2> diff --git a/files/ja/web/api/xrinputsource/targetraymode/index.html b/files/ja/web/api/xrinputsource/targetraymode/index.html new file mode 100644 index 0000000000..f29a2b1f9d --- /dev/null +++ b/files/ja/web/api/xrinputsource/targetraymode/index.html @@ -0,0 +1,77 @@ +--- +title: XRInputSource.targetRayMode +slug: Web/API/XRInputSource/targetRayMode +tags: + - API + - AR + - Pointing + - Property + - Ray + - Read-only + - Reference + - VR + - WebXR + - WebXR API + - WebXR Device API + - XR + - XRInputSource + - direction + - pointer + - target + - targetRayMode +translation_of: Web/API/XRInputSource/targetRayMode +--- +<p>{{APIRef("WebXR")}}{{securecontext_header}}</p> + +<p>{{domxref("XRInputSource")}} の <strong><code>targetRayMode</code></strong> 読み取り専用プロパティは、入力ソースのターゲット光線を生成する方法と、それをユーザーに提示する方法を示します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">let <em>rayMode</em> = <em>xrInputSource</em>.targetRayMode;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("XRTargetRayMode")}} 列挙型から取得した {{domxref("DOMString")}}。 ターゲット光線を生成してユーザーに提示するときに使用する方法を示します。 可能な値は次のとおりです。</p> + +<p>{{page("/ja/docs/Web/API/XRTargetRayMode", "Values")}}</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p>入力ソースの {{domxref("XRInputSource.targetRaySpace", "targetRaySpace")}} は、ターゲット光線の位置と向きを示し、光線をレンダリングする場所を決定するために使用できます。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>{{page("/ja/docs/Web/API/XRTargetRayMode", "Examples")}}</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('WebXR','#dom-xrinputsource-targetraymode','XRInputSource.handedness')}}</td> + <td>{{Spec2('WebXR')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden"> +<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("api.XRInputSource.handedness")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/WebXR_Device_API">WebXR Device API</a></li> + <li><a href="/ja/docs/Web/API/WebXR_Device_API/Inputs">入力と入力ソース</a></li> + <li><a href="/ja/docs/Web/WebXR%20Device%20API/Gamepads">WebXR アプリケーションでのゲームパッドの使用</a></li> +</ul> diff --git a/files/ja/web/api/xrreferencespaceevent/referencespace/index.html b/files/ja/web/api/xrreferencespaceevent/referencespace/index.html index f9cb5f0c48..c2649cd291 100644 --- a/files/ja/web/api/xrreferencespaceevent/referencespace/index.html +++ b/files/ja/web/api/xrreferencespaceevent/referencespace/index.html @@ -31,7 +31,7 @@ translation_of: Web/API/XRReferenceSpaceEvent/referenceSpace <h3 id="Value" name="Value">値</h3> -<p>An {{domxref("XRReferenceSpace")}} indicating the source of the event.</p> +<p>イベントのソースを示す {{domxref("XRReferenceSpace")}}。</p> <h2 id="Examples" name="Examples">例</h2> diff --git a/files/ja/web/api/xrreferencespacetype/index.html b/files/ja/web/api/xrreferencespacetype/index.html index d59470e742..3f55c590b3 100644 --- a/files/ja/web/api/xrreferencespacetype/index.html +++ b/files/ja/web/api/xrreferencespacetype/index.html @@ -33,7 +33,7 @@ translation_of: Web/API/XRReferenceSpaceType <h3 id="Reference_space_descriptors" name="Reference_space_descriptors">参照空間記述子</h3> -<p>参照空間のタイプを以下の表に示します。 それらの使用例と、それらを実装するために使用されるインターフェイスについての簡単な情報が含まれています。</p> +<p>参照空間のタイプを以下の表に示します。 それらのユースケースと、それらを実装するために使用されるインターフェイスについての簡単な情報が含まれています。</p> <div id="foo"> <table class="standard-table" id="value-list"> @@ -71,7 +71,7 @@ translation_of: Web/API/XRReferenceSpaceType </tr> <tr> <td><a id="viewer" name="viewer"><code>viewer</code></a></td> - <td>ネイティブの原点がビューアーの位置と方向を追跡する追跡空間。 これは、ユーザーが物理的に移動できる環境で使用し、没入型（immersive）とインライン（inline）の両方の {{domxref("XRSession")}} のすべてのインスタンスをサポートしますが、インラインセッションで最も役立ちます。 ビューアーと入力の間の距離を決定するとき、またはオフセット空間を操作するときに特に役立ちます。 そうでない場合、通常、他の参照空間タイプの1つがより頻繁に使用されます。</td> + <td>ネイティブの原点がビューアーの位置と向きを追跡する追跡空間。 これは、ユーザーが物理的に移動できる環境で使用し、没入型（immersive）とインライン（inline）の両方の {{domxref("XRSession")}} のすべてのインスタンスをサポートしますが、インラインセッションで最も役立ちます。 ビューアーと入力の間の距離を決定するとき、またはオフセット空間を操作するときに特に役立ちます。 そうでない場合、通常、他の参照空間タイプの1つがより頻繁に使用されます。</td> <td>{{domxref("XRReferenceSpace")}}</td> </tr> </tbody> diff --git a/files/ja/web/api/xrrigidtransform/index.html b/files/ja/web/api/xrrigidtransform/index.html new file mode 100644 index 0000000000..6558e44e64 --- /dev/null +++ b/files/ja/web/api/xrrigidtransform/index.html @@ -0,0 +1,98 @@ +--- +title: XRRigidTransform +slug: Web/API/XRRigidTransform +tags: + - API + - AR + - Interface + - Reality + - Reference + - Reference Space + - VR + - Virtual + - WebXR + - WebXR API + - WebXR Device API + - XR + - XRReferenceSpace + - XRRigidTransform + - augmented + - space + - transform +translation_of: Web/API/XRRigidTransform +--- +<p>{{APIRef("WebXR Device API")}}</p> + +<p><span class="seoSummary"><strong><code>XRRigidTransform</code></strong> は、位置と向きによって記述される 3D 幾何学的変換を表す <a href="/ja/docs/Web/API/WebXR_API">WebXR API</a> のインターフェイスです。</span></p> + +<p><code>XRRigidTransform</code> は、以下を含む WebXR API 全体で変換を指定するために使用されます。</p> + +<ul> + <li>{{domxref("XRReferenceSpace.getOffsetReferenceSpace", "getOffsetReferenceSpace()")}} を使用して新しい参照空間を作成するときに使用する、親参照空間を基準にしたオフセットと向き。</li> + <li>{{domxref("XRView")}} の {{domxref("XRView.transform", "transform")}}。</li> + <li>{{domxref("XRPose")}} の {{domxref("XRPose.transform", "transform")}}。</li> + <li>{{domxref("XRReferenceSpace")}} が受信した {{domxref("XRReferenceSpace.reset_event", "reset")}} イベントにある {{domxref("XRReferenceSpaceEvent")}} イベントの {{domxref("XRReferenceSpaceEvent.transform", "transform")}} プロパティ。</li> +</ul> + +<p>行列データを提供する裸の配列ではなく、これらの場所で <code>XRRigidTransform</code> を使用する利点は、<code>XRRigidTransform</code> が変換の逆の計算などを自動的に実行することです。 さらに良いことに、一度計算したらキャッシュされるため、後続の要求は大幅に高速化されます。</p> + +<h2 id="Constructor" name="Constructor">コンストラクター</h2> + +<dl> + <dt>{{domxref("XRRigidTransform.XRRigidTransform", "new XRRigidTransform()")}}</dt> + <dd>指定された位置や向きを適用する変換を表す新しい <code>XRRigidTransform</code> オブジェクトを作成します。</dd> +</dl> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<dl> + <dt>{{DOMxRef("XRRigidTransform.position")}} {{readonlyInline}} {{experimental_inline}}</dt> + <dd>変換の平行移動成分を記述する、メートルで表される3次元の点を指定する {{DOMxRef("DOMPointReadOnly")}}。 {{DOMxRef("DOMPointReadonly.w", "w")}} プロパティは常に <code>1.0</code> です。</dd> + <dt>{{DOMxRef("XRRigidTransform.orientation")}} {{readonlyInline}} {{experimental_inline}}</dt> + <dd>変換の回転成分を記述する単位クォータニオンを含む {{DOMxRef("DOMPointReadOnly")}}。 単位クォータニオンとして、その長さは常に <code>1.0</code> に正規化されます。</dd> + <dt>{{DOMxRef("XRRigidTransform.matrix")}} {{readonlyInline}} {{experimental_inline}}</dt> + <dd>16 メンバーの {{DOMxRef("Float32Array")}} の形式で変換行列を返します。 配列を使用して行列を表す方法については、<a href="/ja/docs/Web/API/XRRigidTransform/matrix#Matrix_format">行列のフォーマット</a>のセクションを参照してください。</dd> +</dl> + +<dl> + <dt>{{DOMxRef("XRRigidTransform.inverse")}} {{readonlyInline}} {{experimental_inline}}</dt> + <dd>この変換の逆である <code>XRRigidTransform</code> を返します。 つまり、元の変換によって以前に変換されたオブジェクトに適用された場合、変換が元に戻され、元のオブジェクトが返されます。</dd> +</dl> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p><code>XRRigidTransform</code> が解釈されると、位置が適用される前に、影響を受けるオブジェクトに常に向きが適用されます。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>このコードスニペットは、<code>XRRigidTransform</code> を作成して、新しい参照空間を作成するときに使用する現在の参照空間に対するオフセットと向きを指定します。 次に、セッションの {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} メソッドを呼び出して、最初のアニメーションフレームコールバックを要求します。</p> + +<pre class="brush: js notranslate">xrSession.requestReferenceSpace(refSpaceType) +.then((refSpace) => { + xrReferenceSpace = refSpace; + xrReferenceSpace = xrReferenceSpace.getOffsetReferenceSpace( + new XRRigidTransform(viewerStartPosition, cubeOrientation)); + animationFrameRequestID = xrSession.requestAnimationFrame(drawFrame);</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("WebXR","#xrrigidtransform-interface","XRRigidTransform")}}</td> + <td>{{Spec2("WebXR")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div>{{Compat("api.XRRigidTransform")}}</div> diff --git a/files/ja/web/api/xrrigidtransform/inverse/index.html b/files/ja/web/api/xrrigidtransform/inverse/index.html new file mode 100644 index 0000000000..164428f197 --- /dev/null +++ b/files/ja/web/api/xrrigidtransform/inverse/index.html @@ -0,0 +1,80 @@ +--- +title: XRRigidTransform.inverse +slug: Web/API/XRRigidTransform/inverse +tags: + - API + - AR + - Property + - Read-only + - Reality + - Reference + - VR + - Virtual + - WebXR + - WebXR API + - WebXR Device API + - XR + - XRRigidTransform + - augmented + - inverse + - transform +translation_of: Web/API/XRRigidTransform/inverse +--- +<p>{{APIRef("WebXR Device API")}}</p> + +<p><span class="seoSummary">{{domxref("XRRigidTransform")}} インターフェイスの <code><strong>inverse</strong></code> 読み取り専用プロパティは、それ自体の変換の逆である別の {{domxref("XRRigidTransform")}} オブジェクトを返します。</span> つまり、逆を明示的に生成する代わりに、<code>inverse</code> プロパティを使用して、<code>XRRigidTransform</code> の逆をいつでも取得できます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">let <em>transformInverse</em> = <em>xrRigidTransform</em>.inverse;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>アクセスした <code>XRRigidTransform</code> の逆を含む {{domxref("XRRigidTransform")}}。</p> + +<p>親 <code>XRRigidTransform</code> によって以前に変換されたオブジェクトに変換の逆を適用すると、常に変換が元に戻され、結果としてオブジェクトは前のポーズに戻ります。 つまり、その位置と向きの両方が以前の構成に戻ります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では、オブジェクトのモデルビュー行列は、ビュー行列を取得し、それをオブジェクトのポーズ行列で乗算することによって計算されます。</p> + +<pre class="brush: js notranslate">let modelViewMatrix = mat4.create(); + +for (let view of pose.view) { + let viewport = glLayer.getViewport(view); + gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); + + /* ... */ + + mat4.multiply(modelViewMatrix, view.transform.inverse.matrix, objectMatrix); + gl.uniformMatrix4fv(programInfo.uniformLocations.modelViewMatrix, + false, modelViewMatrix); + + /* ... */ +} +</pre> + +<p>このレンダラーのコアコードのあらましは、ビューアーの位置と向きに基づいてオブジェクトを変換するために使用するモデルビュー行列として、その変換の逆の行列をを取ることによって、ポーズのビューがどのように表されるかを示しています。 逆の行列にオブジェクトの行列を掛けてモデルビュー行列を取得し、その情報を含むようにユニフォームを設定することで、シェーダープログラムに渡します。</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("WebXR","#dom-xrrigidtransform-inverse","XRRigidTransform.inverse")}}</td> + <td>{{Spec2("WebXR")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div>{{Compat("api.XRRigidTransform.inverse")}}</div> diff --git a/files/ja/web/api/xrrigidtransform/matrix/index.html b/files/ja/web/api/xrrigidtransform/matrix/index.html new file mode 100644 index 0000000000..9f4e81806f --- /dev/null +++ b/files/ja/web/api/xrrigidtransform/matrix/index.html @@ -0,0 +1,96 @@ +--- +title: XRRigidTransform.matrix +slug: Web/API/XRRigidTransform/matrix +tags: + - API + - AR + - Property + - Read-only + - Reality + - Reference + - VR + - Virtual + - WebXR + - WebXR API + - WebXR Device API + - XR + - XRRigidTransform + - augmented + - matrix + - transform +translation_of: Web/API/XRRigidTransform/matrix +--- +<p>{{APIRef("WebXR Device API")}}</p> + +<p>{{domxref("XRRigidTransform")}} の <strong><code>matrix</code></strong> 読み取り専用プロパティは、オブジェクトによって表される変換行列を返します。 そして、返された行列に列ベクトルを前乗算して、{{domxref("XRRigidTransform.orientation", "orientation")}} で指定された 3D 回転でベクトルを回転させ、{{domxref("XRRigidTransform.position", "position")}} で平行移動させることができます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">let <em>matrix</em> = <em>xrRigidTransform</em>.matrix;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("XRRigidTransform.position", "position")}} プロパティと {{domxref("XRRigidTransform.orientation", "orientation")}} プロパティで記述される 4x4 変換行列を表す 16 個のエントリーを含む {{domxref("Float32Array")}}。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<h3 id="Matrix_format" name="Matrix_format">行列のフォーマット</h3> + +<p>WebGL で使用されるすべての 4x4 変換行列は、16 要素の {{domxref("Float32Array")}} に格納されます。 値は、列優先の順序で配列に格納されます。 つまり、各列は上から下に向かって配列に書き込まれ、その後、1つ右側の列に移動して、次の列が配列に書き込まれます。 したがって、配列 [a0, a1, a2, ..., a13, a14, a15] の場合、行列は次のようになります。</p> + +<p><math display="block"><semantics><mrow><mo>[</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>0</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>4</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>8</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>12</mn><mo stretchy="false">]</mo></mtd></mtr><mtr><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>1</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>5</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>9</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>13</mn><mo stretchy="false">]</mo></mtd></mtr><mtr><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>2</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>6</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>10</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>14</mn><mo stretchy="false">]</mo></mtd></mtr><mtr><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>3</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>7</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>11</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>15</mn><mo stretchy="false">]</mo></mtd></mtr><mtr><mtd></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\begin{bmatrix} a[0] & a[4] & a[8] & a[12]\\ a[1] & a[5] & a[9] & a[13]\\ a[2] & a[6] & a[10] & a[14]\\ a[3] & a[7] & a[11] & a[15]\\ \end{bmatrix}</annotation></semantics></math></p> + +<p><code>matrix</code> は最初に要求されたときに計算します。 その後は、必要になるたびに計算して速度が低下しないように、キャッシュされます。</p> + +<h3 id="Creating_the_matrix" name="Creating_the_matrix">行列の作成</h3> + +<p>このセクションでは、より高度な読者を対象として、API が指定された変換の行列を計算する方法について説明します。 それは、新しい行列を割り当て、それに 4x4 の単位行列を書き込むことから始まります。</p> + +<p><math display="block"><semantics><mrow><mo>[</mo><mtable rowspacing="0.5ex"><mtr><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\begin{bmatrix} 1 & 0 & 0 & 0\\ 0 & 1 & 0 & 0\\ 0 & 0 & 1 & 0\\ 0 & 0 & 0 & 1 \end{bmatrix}</annotation></semantics></math></p> + +<p>これは、適用した点、ベクトル、またはオブジェクトの向きや位置を変更しない変換です。</p> + +<p>次に、このように <code>position</code> を右側の列に配置して、回転を変更せずに、各次元で指定した距離だけ座標系を変換する平行移動行列を作成します。 ここで、<code>p<sub>x</sub></code>、<code>p<sub>y</sub></code>、<code>p<sub>z</sub></code> は、{{domxref("DOMPointReadOnly")}} の <code>position</code> の <code>x</code>、<code>y</code>、<code>z</code> メンバーの値です。</p> + +<p><math display="block"><semantics><mrow><mo>[</mo><mtable rowspacing="0.5ex"><mtr><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mi>p<sub>x</sub></mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd><mtd><mi>p<sub>y</sub></mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd><mtd><mi>p<sub>z</sub></mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\begin{bmatrix} 1 & 0 & 0 & x\\ 0 & 1 & 0 & y\\ 0 & 0 & 1 & z\\ 0 & 0 & 0 & 1 \end{bmatrix}</annotation></semantics></math></p> + +<p>次に、<code>orientation</code> で指定された単位クォータニオンから列ベクトル回転行列を計算することにより、回転行列を作成します。</p> + +<p><math display="block"><semantics><mrow><mo>[</mo><mtable rowspacing="0.5ex"><mtr><mtd><mn>1</mn><mo>-</mo><mn>2</mn><mo stretchy="false">(</mo><msubsup><mi>q</mi><mi>y</mi><mn>2</mn></msubsup><mo>+</mo><msubsup><mi>q</mi><mi>z</mi><mn>2</mn></msubsup><mo stretchy="false">)</mo></mtd><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>y</mi></msub><mo>-</mo><msub><mi>q</mi><mi>z</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>z</mi></msub><mo>+</mo><msub><mi>q</mi><mi>y</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>y</mi></msub><mo>+</mo><msub><mi>q</mi><mi>z</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mn>1</mn><mo>-</mo><mn>2</mn><mo stretchy="false">(</mo><msubsup><mi>q</mi><mi>x</mi><mn>2</mn></msubsup><mo>+</mo><msubsup><mi>q</mi><mi>z</mi><mn>2</mn></msubsup><mo stretchy="false">)</mo></mtd><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>y</mi></msub><msub><mi>q</mi><mi>z</mi></msub><mo>-</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>z</mi></msub><mo>-</mo><msub><mi>q</mi><mi>y</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>y</mi></msub><msub><mi>q</mi><mi>z</mi></msub><mo>+</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mn>1</mn><mo>-</mo><mn>2</mn><mo stretchy="false">(</mo><msubsup><mi>q</mi><mi>x</mi><mn>2</mn></msubsup><mo>+</mo><msubsup><mi>q</mi><mi>y</mi><mn>2</mn></msubsup><mo stretchy="false">)</mo></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\begin{bmatrix} 1 - 2(q_y^2 + q_z^2) & 2(q_xq_y - q_zq_w) & 2(q_xq_z + q_yq_w) & p_x\\ 2(q_xq_y + q_zq_w) & 1 - 2(q_x^2 + q_z^2) & 2(q_yq_z - q_xq_w) & p_y\\ 2(q_xq_z - q_yq_w) & 2(q_yq_z + q_xq_w) & 1 - 2(q_x^2 + q_y^2) & p_z\\ 0 & 0 & 0 & 1 \end{bmatrix}</annotation></semantics></math></p> + +<p>最終的な変換 <code>matrix</code> は、平行移動行列に回転行列を <code>(translation * rotation)</code> の順序で乗算することで計算します。 これにより、<code>matrix</code> が返す最終的な変換行列を生成します。</p> + +<p><math display="block"><semantics><mrow><mo>[</mo><mtable rowspacing="0.5ex"><mtr><mtd><mn>1</mn><mo>-</mo><mn>2</mn><mo stretchy="false">(</mo><msubsup><mi>q</mi><mi>y</mi><mn>2</mn></msubsup><mo>+</mo><msubsup><mi>q</mi><mi>z</mi><mn>2</mn></msubsup><mo stretchy="false">)</mo></mtd><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>y</mi></msub><mo>-</mo><msub><mi>q</mi><mi>z</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>z</mi></msub><mo>+</mo><msub><mi>q</mi><mi>y</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mi>p<sub>x</sub></mi></mtd></mtr><mtr><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>y</mi></msub><mo>+</mo><msub><mi>q</mi><mi>z</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mn>1</mn><mo>-</mo><mn>2</mn><mo stretchy="false">(</mo><msubsup><mi>q</mi><mi>x</mi><mn>2</mn></msubsup><mo>+</mo><msubsup><mi>q</mi><mi>z</mi><mn>2</mn></msubsup><mo stretchy="false">)</mo></mtd><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>y</mi></msub><msub><mi>q</mi><mi>z</mi></msub><mo>-</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mi>p<sub>y</sub></mi></mtd></mtr><mtr><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>z</mi></msub><mo>-</mo><msub><mi>q</mi><mi>y</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>y</mi></msub><msub><mi>q</mi><mi>z</mi></msub><mo>+</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mn>1</mn><mo>-</mo><mn>2</mn><mo stretchy="false">(</mo><msubsup><mi>q</mi><mi>x</mi><mn>2</mn></msubsup><mo>+</mo><msubsup><mi>q</mi><mi>y</mi><mn>2</mn></msubsup><mo stretchy="false">)</mo></mtd><mtd><mi>p<sub>z</sub></mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><mrow></mrow><annotation encoding="TeX">\begin{bmatrix} 1 - 2(q_y^2 + q_z^2) & 2(q_xq_y - q_zq_w) & 2(q_xq_z + q_yq_w) & p_x\\ 2(q_xq_y + q_zq_w) & 1 - 2(q_x^2 + q_z^2) & 2(q_yq_z - q_xq_w) & p_y\\ 2(q_xq_z - q_yq_w) & 2(q_yq_z + q_xq_w) & 1 - 2(q_x^2 + q_y^2) & p_z\\ 0 & 0 & 0 & 1 \end{bmatrix}</annotation></semantics></math></p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では、特定のオフセットと向きに一致するようにオブジェクトを配置するために、WebGL オブジェクトのレンダリング中に変換として使用できる行列を作成するための変換が作成されます。 次に、<code>matrix</code> を、WebGL を使用して、指定された名前に一致するオブジェクトを指定された位置と向きに配置するために指定された変換行列を使用してレンダリングするライブラリー関数に渡します。</p> + +<pre class="brush: js notranslate">let transform = new XRRigidTransform( + {x: 0, y: 0.5, z: 0.5}, + {x: 0, y: -0.5, z: -0.5, w: 1}); +drawGLObject("magic-lamp", transform.matrix); +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("WebXR","#dom-xrrigidtransform-matrix","XRRigidTransform.matrix")}}</td> + <td>{{Spec2("WebXR")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div>{{Compat("api.XRRigidTransform.matrix")}}</div> diff --git a/files/ja/web/api/xrrigidtransform/orientation/index.html b/files/ja/web/api/xrrigidtransform/orientation/index.html new file mode 100644 index 0000000000..951c25fff1 --- /dev/null +++ b/files/ja/web/api/xrrigidtransform/orientation/index.html @@ -0,0 +1,75 @@ +--- +title: XRRigidTransform.orientation +slug: Web/API/XRRigidTransform/orientation +tags: + - API + - AR + - Orientation + - Property + - Read-only + - Reality + - Reference + - VR + - Virtual + - WebXR + - WebXR API + - WebXR Device API + - XR + - XRRigidTransform + - augmented + - rotation +translation_of: Web/API/XRRigidTransform/orientation +--- +<p>{{APIRef("WebXR Device API")}}</p> + +<p><span class="seoSummary">{{domxref("XRRigidTransform")}} の <strong><code>orientation</code></strong> 読み取り専用プロパティは、オブジェクトによって表される変換の回転成分を指定する正規化された{{Glossary("quaternion","クォータニオン")}}（<strong><a href="https://ja.wikipedia.org/wiki/%E5%9B%9B%E5%85%83%E6%95%B0#%E5%8D%98%E4%BD%8D%E5%9B%9B%E5%85%83%E6%95%B0">単位クォータニオン</a></strong>または<strong>ベルソル</strong>とも呼ばれます）を含む {{DOMxRef("DOMPointReadOnly")}} です。</span> 長さが正確に 1.0 メートルではないクォータニオンを指定すると、正規化されます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">let <em>orientation</em> = <em>xrRigidTransform</em>.orientation;</pre> + +<h3 id="Value" name="Value">Value</h3> + +<p>変換の向き成分を提供する単位クォータニオンを含む {{domxref("DOMPointReadOnly")}} オブジェクト。 単位クォータニオンとして、返されるクォータニオンの長さは常に 1.0 メートルです。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>地面から 2 メートル離れた位置に、真上を向くように配置された参照空間を作成するには、次のようにします。</p> + +<pre class="brush: js notranslate">xrReferenceSpace = refSpace.getOffsetReferenceSpace( + new XRRigidTransform({y: -2}, {x: 0.0, y: 1.0, z: 0.0, w: 1.0}); +); +</pre> + +<p>ここで指定されている単位クォータニオンは [0.0, 1.0, 0.0, 1.0] であり、オブジェクトが y 軸に沿って直接向いている必要があることを示します。</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("WebXR","#dom-xrrigidtransform-orientation","XRRigidTransform.orientation")}}</td> + <td>{{Spec2("WebXR")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div>{{Compat("api.XRRigidTransform.orientation")}}</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/WebXR_Device_API/Movement_and_motion">移動、向き、モーション</a></li> + <li><a href="https://ja.wikipedia.org/wiki/%E5%9B%9B%E5%85%83%E6%95%B0#%E5%8D%98%E4%BD%8D%E5%9B%9B%E5%85%83%E6%95%B0">単位クォータニオン</a></li> + <li><a href="https://en.wikipedia.org/wiki/Quaternions_and_spatial_rotation">クォータニオンと空間回転</a>（英語）</li> +</ul> diff --git a/files/ja/web/api/xrrigidtransform/position/index.html b/files/ja/web/api/xrrigidtransform/position/index.html new file mode 100644 index 0000000000..fa15870672 --- /dev/null +++ b/files/ja/web/api/xrrigidtransform/position/index.html @@ -0,0 +1,102 @@ +--- +title: XRRigidTransform.position +slug: Web/API/XRRigidTransform/position +tags: + - 3D + - API + - AR + - Coordinates + - Location + - Point + - Position + - Property + - Reference + - VR + - WebXR + - WebXR API + - XR + - XRRigidTransform + - transform +translation_of: Web/API/XRRigidTransform/position +--- +<p>{{APIRef("WebXR Device API")}}</p> + +<p>{{domxref("XRRigidTransform")}} の <strong><code>position</code></strong> 読み取り専用プロパティは、変換の平行移動成分を記述する、メートルで指定された 3D 点を提供する {{domxref("DOMPointReadOnly")}} オブジェクトです。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">let <em>pos</em> = <em>xrRigidTransform</em>.position;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>変換行列の 3D 位置成分を示す読み取り専用の {{domxref("DOMPointReadOnly")}}。 単位はメートルです。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 点の <code>w</code> 成分は常に 1.0 です。</p> +</div> + +<h2 id="Example" name="Example">例</h2> + +<p>オブジェクトを目の高さに配置するために使用できる参照空間を作成するには、次のようにします（目の高さが 1.5 メートルであると想定）。</p> + +<pre class="brush: js notranslate">function onSessionStarted(xrSession) { + xrSession.addEventListener("end", onSessionEnded); + + gl = initGraphics(xrSession); + + let glLayer = new XRWebGLLayer(xrSession, gl); + xrSession.updateRenderState({ baseLayer: glLayer }); + + if (immersiveSession) { + xrSession.requestReferenceSpace("bounded-floor").then((refSpace) => { + refSpaceCreated(refSpace); + }).catch(() => { + session.requestReferenceSpace("local-floor").then(refSpaceCreated); + }); + } else { + session.requestReferenceSpace("viewer").then(refSpaceCreated); + } +} + +function refSpaceCreated(refSpace) { + if (immersiveSession) { + xrReferenceSpace = refSpace; + } else { + xrReferenceSpace = refSpace.getOffsetReferenceSpace( + new XRRigidTransform({y: -1.5}); + ); + } + xrSession.requestAnimationFrame(onFrame); +} +</pre> + +<p>WebXR で使用するグラフィックスコンテキストを設定した後、これは変数 <code>immersiveSession</code> が <code>true</code> であるかどうかを確認することから始まります。 その場合、最初に <code>bounded-floor</code> 参照空間を要求します。 それが失敗した場合（おそらく <code>bounded-floor</code> がサポートされていないため）、<code>local-floor</code> 参照空間を要求しようとします。</p> + +<p>没入型セッションでない場合は、代わりに <code>viewer</code> 参照空間を要求します。</p> + +<p>いずれの場合も、空間が取得されたら、<code>refSpaceCreated()</code> 関数に渡します。 没入型空間の場合、指定された空間は将来の使用のために単に保存します。 ただし、インラインセッションの場合、床レベルが自動的に調整されない空間にいることがわかっているので、オフセット参照空間を要求して、ビューアーの高さを推定床レベルの 0 メートルより 1.5 メートル上にシフトします。 その新しい参照空間は、最初に受け取ったものの代わりに使用します。</p> + +<p>最後に、アニメーションフレームの要求が送信されます。</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("WebXR","#dom-xrrigidtransform-position","XRRigidTransform.position")}}</td> + <td>{{Spec2("WebXR")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div>{{Compat("api.XRRigidTransform.position")}}</div> diff --git a/files/ja/web/api/xrrigidtransform/xrrigidtransform/index.html b/files/ja/web/api/xrrigidtransform/xrrigidtransform/index.html new file mode 100644 index 0000000000..b268c41da9 --- /dev/null +++ b/files/ja/web/api/xrrigidtransform/xrrigidtransform/index.html @@ -0,0 +1,90 @@ +--- +title: XRRigidTransform() +slug: Web/API/XRRigidTransform/XRRigidTransform +tags: + - API + - AR + - Constructor + - Mixed Reality + - Orientation + - Position + - Reality + - Reference + - VR + - Virtual + - WebXR + - XR + - XRRigidTransform + - augmented + - transform +translation_of: Web/API/XRRigidTransform/XRRigidTransform +--- +<div>{{APIRef("WebXR Device API")}}</div> + +<p><span class="seoSummary"><strong><code>XRRigidTransform()</code></strong> コンストラクターは、点またはオブジェクトの位置と向きを表す新しい {{domxref("XRRigidTransform")}} オブジェクトを作成して返します。</span> 特に、<code>XRRigidTransform</code> は、空間を横断する座標系間で平行移動するための変換を提供するときに使用されます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">let <em>xrRigidTransform</em> = new XRRigidTransform(<em>position</em>, <em>orientation</em>);</pre> + +<h3 id="Parameters" name="Parameters">パラメーター</h3> + +<dl> + <dt><code>position</code> {{optional_inline}}</dt> + <dd>点またはオブジェクトが配置される座標を指定する {{domxref("DOMPointInit")}} に準拠するオブジェクト。 これらの寸法はメートルで指定します。 このパラメーターが省略されているか、<code>DOMPointInit</code> と互換性がない場合、使用される位置は <code>{x: 0, y: 0, z: 0, w: 1}</code> であると見なされます。 <code>w</code> は<em>常に</em> 1 でなければなりません。</dd> + <dt><code>orientation</code> {{optional_inline}}</dt> + <dd>オブジェクトが向いている方向を指定する {{domxref("DOMPointInit")}} に準拠するオブジェクト。 向きのデフォルト値は <code>{x: 0, y: 0, z: 0, w: 1}</code> です。 指定された向きは、まだ正規化されていない場合は正規化されます。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">戻り値</h3> + +<p>オブジェクトの位置と向きを原点から指定された <code>position</code> に調整し、<code>orientation</code> によって示される方向を向く変換行列を表すように初期化された新しい {{domxref("XRRigidTransform")}} オブジェクト。</p> + +<h3 id="Exceptions" name="Exceptions">例外</h3> + +<dl> + <dt><code>TypeError</code></dt> + <dd>指定された <code>position</code> の <code>w</code> 座標の値が 1.0 ではありません。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では、シーンのアニメーションの開始が示されています。 特定のタイプの参照空間の要求から始まり、最初のアニメーションフレームを要求する前に、変換に基づいて座標系をシフトします。</p> + +<pre class="brush: js notranslate">let animationFrameRequestID = 0; + +xrSession.requestReferenceSpace("local-floor") +.then((refSpace) => { + xrReferenceSpace = refSpace.getOffsetReferenceSpace( + new XRRigidTransform(viewerPosition, viewerOrientation)); + animationFrameRequestID = xrSession.requestAnimationFrame(drawFrame); +});</pre> + +<p><code>local-floor</code> タイプの参照空間を要求した後、返された promise は最終的に解決され、その時点で新しい参照空間オブジェクト <code>refSpace</code> を受け取ります。 ビューアーの初期位置と向きから <code>XRRigidTransform</code> を作成した後、新しい変換を {{domxref("XRReferenceSpace.getOffsetReferenceSpace", "getOffsetReferenceSpace()")}} に渡して<em>別</em>の参照空間を作成します。 オフセットして、その原点が <code>viewerPosition</code> によって指定された座標と同じ空間内の場所に配置されるようにします。 向きも同様に修正されます。</p> + +<p>次に、{{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} が呼び出され、描画する新しいアニメーションフレームを要求します。 <code>drawFrame()</code> コールバックは、システムが次のフレームを描画する準備ができたときに実行されます。</p> + +<p><a href="/ja/docs/Web/API/WebXR_Device_API/Movement_and_motion">移動、向き、モーション</a>には、さらに多くの例があります。</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("WebXR","#dom-xrrigidtransform-xrrigidtransform","XRRigidTransform()")}}</td> + <td>{{Spec2("WebXR")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div>{{Compat("api.XRRigidTransform.XRRigidTransform")}}</div> diff --git a/files/ja/web/api/xrtargetraymode/index.html b/files/ja/web/api/xrtargetraymode/index.html new file mode 100644 index 0000000000..37144393b8 --- /dev/null +++ b/files/ja/web/api/xrtargetraymode/index.html @@ -0,0 +1,106 @@ +--- +title: XRTargetRayMode +slug: Web/API/XRTargetRayMode +tags: + - 3D + - API + - AR + - Enum + - Enumerated Type + - Input + - Reality + - Reference + - Type + - VR + - Virtual + - WebXR + - WebXR API + - WebXR Device API + - XR + - XRTargetRayMode + - augmented + - source + - target +translation_of: Web/API/XRTargetRayMode +--- +<p>{{APIRef("WebXR")}}</p> + +<p><span class="seoSummary"><a href="/ja/docs/Web/API/WebXR_Device_API">WebXR Device API</a> の <strong><code>XRTargetRayMode</code></strong> 列挙型は、入力コントローラーのターゲティング光線を生成する方法を記述します。</span> ターゲティングは、視線追跡システムを使用してターゲットを見るか、ハンドコントローラー、グローブ、またはモーショントラッキングシステムを使用してターゲットを指すか、画面上で指やマウスを使用してターゲットをタップまたはクリックすることによって行うことができます。</p> + +<p>通常、<strong>ターゲット光線</strong>は、ターゲティングシステムのソースから、ユーザーが見ている方向または指している方向にターゲット光線に沿って描画されます。 光線の終点を示す方法と同様に、光線のスタイルは一般的にあなた次第です。 ターゲットとなる点またはオブジェクトは、図形を描画するか、ターゲットとなる表面またはオブジェクトを強調表示することによって示される場合があります。</p> + +<div style="width: 42em;"> +<figure style="background: #eee; padding: 0.5em; border: 1px solid #aaa; border-radius: 1em; max-width: 504px; padding: 1em; margin: 1em auto;"> +<figcaption><strong>ハンドコントローラーから放出されるターゲット光線。</strong></figcaption> +<img alt="ハンドコントローラーから放出されるターゲット光線を示すスクリーンショット" src="https://mdn.mozillademos.org/files/17089/example-target-ray.gif" style="width: 100%;"></figure> +</div> + +<p>ターゲット光線は、単純な線（理想的には距離とともにフェードする）から、上のスクリーンショットに示されているサイエンスフィクションの「フェイザー」スタイルなどのアニメーション効果まで、何でもかまいません。</p> + +<h2 id="Values" name="Values">値</h2> + +<dl> + <dt><code>gaze</code>（視線）</dt> + <dd>ユーザーは、ユーザーが見ている方向を検出する視線追跡システム（または<strong>視線入力</strong>）を使用しています。 ターゲット光線は、ビューアーの目を起点として描画され、ビューアーが見ている方向に追従します。</dd> + <dt><code>screen</code>（画面）</dt> + <dd>ターゲット光線の方向は、タッチスクリーン、マウス、またはその他の触覚入力デバイスをタップして示します。</dd> + <dt><code>tracked-pointer</code>（追跡ポインター）</dt> + <dd>ターゲティングは、ユーザーがターゲットの方向に向けるハンドヘルドデバイスまたはハンドトラッキングシステムを使用して行われます。 ターゲット光線は、手（または手の中のオブジェクト）からターゲット方向に伸びます。 方向はプラットフォーム固有のルールを使用して決定されますが、そのようなルールが存在しない場合は、ユーザーが人差し指を手からまっすぐに向けていると仮定して方向が選択されます。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<p>このコードの断片は、フレームごとに1回呼び出される関数の一部を示しています。 <code>null</code> 以外の {{domxref("XRInputSource.targetRaySpace", "targetRaySpace")}} を持つ入力を探します。 このプロパティの値を持つ入力は、ターゲット光線をユーザーから外側に投影する入力を表します。</p> + +<p>このような入力ごとに、この例では、{{domxref("XRInputSource.targetRayMode", "targetRayMode")}} が <code>tracked-pointer</code> である入力を探します。 これは、入力が実際には、視線入力デバイス、画面タップ、またはマウスクリックではなく、ターゲティングデバイスを表すことを目的としていることを示しています。 追跡ポインターの場合、関数 <code>myRenderTargetRayAsBeam()</code> が呼び出され、入力コントローラーの仮想位置から、それが指している方向に外側にビームをレンダリングします。</p> + +<p>コードは、仮想空間でのユーザーの手の位置を表すコントローラーや任意のオブジェクトの描画、その他の入力関連のタスクなどを引き続き実行する必要があります。</p> + +<pre class="brush: js notranslate">function updateInputSources(session, frame, refSpace) { + for (let source of session.getInputSources()) { + let targetRayPose = frame.getPose(inputSource.targetRaySpace, refSpace); + + if (targetRayPose) { + if (source.targetRayMode == "tracked-pointer") { + myRenderTargetRayAsBeam(targetRayPose); + } + } + + /* ... */ + } +} +</pre> + +<p>詳細とより完全な例については、<a href="/ja/docs/Web/API/WebXR_Device_API/Inputs">入力と入力ソース</a>の記事を参照してください。</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('WebXR','#enumdef-xrtargetraymode','XRTargetRayMode')}}</td> + <td>{{Spec2('WebXR')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden"> +<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("api.XRTargetRayMode")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/WebXR_Device_API">WebXR Device API</a></li> + <li><a href="/ja/docs/Web/API/WebXR_Device_API/Inputs">入力と入力ソース</a></li> +</ul> diff --git a/files/ja/web/html/applying_color/index.html b/files/ja/web/html/applying_color/index.html index 02e1596709..3e49ec608c 100644 --- a/files/ja/web/html/applying_color/index.html +++ b/files/ja/web/html/applying_color/index.html @@ -4,173 +4,174 @@ slug: Web/HTML/Applying_color tags: - Beginner - CSS - - CSS 色 + - CSS Colors - Guide - HTML - - HTML スタイル - - HTML 色 + - HTML Colors + - HTML Styles + - Styling HTML - color translation_of: Web/HTML/Applying_color --- <div>{{HTMLRef}}</div> -<p>色を使うことは、人間の表現の基礎的な姿です。子どもは絵がうまくなるより前に色を試してみるものです。恐らくこれが、人々がウェブサイトの開発を学ぶときに色を最初に学ぶ理由でしょう。<span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> では、 <a href="/ja/docs/Web/HTML">HTML</a> <a href="/ja/docs/Web/HTML/Element">要素</a>に色を追加して望みの外見にする方法がたくさんあります。この記事では CSS の色を HTML の中で利用できるそれぞれの方法の基本をご案内します。</span></p> +<p>色使いは人間の表現の基本形です。子どもは絵がうまくなる前から色に触れています。恐らくこれこそが、人がウェブサイト開発を学ぶときにまず色を触る理由でしょう。<span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> では、<a href="/ja/docs/Web/HTML">HTML</a> <a href="/ja/docs/Web/HTML/Element">要素</a>に色を追加し好みの見た目にする方法が多岐に渡ります。この記事では CSS の色を HTML の中で利用できる各方法の基本をご案内します。</span></p> -<p>運の良いことに、 HTML に色をつけることは本当にかんたんで、またほとんどすべての要素に色をつけることができます。</p> +<p>幸いなことに HTML での着色は本当に簡単で、ほぼ全ての要素に色をつけられます。</p> -<p>{{anch("Things that can have color", "色を付けることができる物の一覧とそのための CSS プロパティ")}}、{{anch("How to describe a color", "色の記述方法")}}、{{anch("Using color", "スタイルシートとスクリプトでの色の利用")}}など、色を使うときに知る必要があることの多くに触れていきます。{{anch("Letting the user picka color", "ユーザーに色を選択させる")}}方法にも触れます。</p> +<p>{{anch("Things that can have color", "色付けできる物の一覧とそのための CSS プロパティ")}}、{{anch("How to describe a color", "色の記述方法")}}、{{anch("Using color", "スタイルシートとスクリプトでの色の利用")}}など、色使いにおいて知っておくべき数多のことに触れていきます。{{anch("Letting the user picka color", "ユーザーに色を選択させる")}}方法にも触れます。</p> -<p>それから、{{anch("Using color wisely", "賢い色の使い方")}}について短い議論を行います。様々な視力の人がいることを意識した、適切な色の選択方法です。</p> +<p>それから、{{anch("Using color wisely", "賢い色の使い方")}}について短い論述をします。これは、様々な視覚の人がいることを意識した、適切な色の選択方法です。</p> -<h2 id="Things_that_can_have_color" name="Things_that_can_have_color">色をつけられるもの</h2> +<h2 id="Things_that_can_have_color" name="Things_that_can_have_color">色付けできる物</h2> -<p>要素レベルでは、 HTML のすべてのものに色をつけることができます。Instead, let's look at things in terms of the kinds of things that are drawn in the elements, such as text and borders and so forth. それぞれについて、それらに色をつけられるCSSのプロパティのリストを見てみましょう。</p> +<p>要素レベルでは、HTML 内のすべての物に色を付けられます。そこで、テキストや境界線などの要素として描画されるものの種類ごとに、色を付ける CSS プロパティのリストを見ていきます。</p> -<p>基礎的・入門的なレベルにおいては、 {{cssxref("color")}} プロパティは HTML 要素のコンテンツの色を定義し、また {{cssxref("background-color")}} は HTML 要素の背景色を定義します。 これらのプロパティはほとんどすべての要素について使用できます。</p> +<p>基礎的なレベルでならば、 {{cssxref("color")}} プロパティは HTML 要素の手前側の色を定義し、{{cssxref("background-color")}} は HTML 要素の背景色を定義すると言えます。これらのプロパティはほぼ全ての要素で使用できます。</p> <h3 id="Text" name="Text">テキスト</h3> -<p>要素がレンダリングされるときにはいつも、以下のプロパティにもとづきテキストの色、背景の色、そしてテキストの装飾が決定されます。</p> +<p>この要素を描画するときは、以下のプロパティに基づいてテキストの色、背景色、テキストの装飾を決定します。</p> <dl> <dt>{{cssxref("color")}}</dt> - <dd>The color to use when drawing the text and any <a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals#Font_style_font_weight_text_transform_and_text_decoration">text decorations</a> (such as the addition of under- or overlines, strike-through lines, and so forth.</dd> + <dd>テキストと<a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals#Font_style_font_weight_text_transform_and_text_decoration">テキストの装飾</a> (下線や上線、打ち消し線などを付加するもの) に使用する色です。</dd> <dt>{{cssxref("background-color")}}</dt> - <dd>テキストの背景の色</dd> + <dd>テキストの背景色です。</dd> <dt>{{cssxref("text-shadow")}}</dt> - <dd>Configures a shadow effect to apply to text. Among the options for the shadow is the shadow's base color (which is then blurred and blended with the background based on the other parameters). See {{SectionOnPage("/ja/docs/Learn/CSS/Styling_text/Fundamentals", "Text drop shadows")}} to learn more.</dd> + <dd>テキストに適用する影の効果を設定します。影の設定には、影のベース色 (他のパラメータに基づいて背景をぼかして混色する色) があります。より詳しくは{{SectionOnPage("/ja/docs/Learn/CSS/Styling_text/Fundamentals", "テキストのドロップシャドウ")}}を参照してください。</dd> <dt>{{cssxref("text-decoration-color")}}</dt> - <dd>By default, text decorations (such as underlines, strikethroughs, etc) use the <code>color</code> property as their colors. However, you can override that behavior and use a different color for them with the <code>text-decoration-color</code> property.</dd> + <dd>デフォルトでは、テキストの装飾 (下線、打ち消し線など) の色には <code>color</code> プロパティを使用します。しかし、<code>text-decoration-color</code> プロパティを用いることで、この挙動をオーバーライドして異なる色を使用できます。</dd> <dt>{{cssxref("text-emphasis-color")}}</dt> - <dd>The color to use when drawing emphasis symbols adjacent to each character in the text. This is used primarily when drawing text for East Asian languages.</dd> + <dd>文章中の各文字に隣接した圏点の描画に使用する色です。主に東アジア言語の文字描画で使用します。</dd> <dt>{{cssxref("caret-color")}}</dt> - <dd>The color to use when drawing the {{Glossary("caret")}} (sometimes referred to as the text input cursor) within the element. This is only useful in elements that are editable, such as {{HTMLElement("input")}} and {{HTMLElement("textarea")}} or elements whose HTML {{htmlattrxref("contenteditable")}} attribute is set.</dd> + <dd>要素の {{Glossary("caret", "キャレット")}} (テキスト入力カーソルとも表現されるもの) の描画に使用する色です。これは編集可能な要素では有用で、{{HTMLElement("input")}} や {{HTMLElement("textarea")}} または HTML {{htmlattrxref("contenteditable")}} 属性がセットされた要素に使用されます。</dd> </dl> <h3 id="Boxes" name="Boxes">ボックス</h3> -<p>Every element is a box with some sort of content, and has a background and a border in addition to whatever contents the box may have.</p> +<p>すべての要素は中身があるボックスであり、そのボックスの内容に加えて、背景と境界線もあります。</p> <dl> - <dt>{{anch("Borders")}}</dt> - <dd>See the section {{anch("Borders")}} for a list of the CSS properties you can use to set the colors of a box's borders.</dd> + <dt>{{anch("Borders", "境界線")}}</dt> + <dd>ボックスの境界線の色を設定できる CSS プロパティ一覧は、{{anch("Borders", "境界線")}} の章を参照してください。</dd> <dt>{{cssxref("background-color")}}</dt> - <dd>要素の前面になにもない時、その要素の範囲に使われる背景の色です。</dd> + <dd>要素の前面を除いて、その要素の領域で使われる背景色です。</dd> <dt>{{cssxref("column-rule-color")}}</dt> - <dd>テキストの列（カラム）を区切る線に使われる色です。</dd> + <dd>テキストの列を区切る線に使う色です。</dd> <dt>{{cssxref("outline-color")}}</dt> - <dd>The color to use when drawing an outline around the outside of the element. This outline is different from the border in that it doesn't get space set aside for it in the document (so it may overlap other content). It's generally used as a focus indicator, to show which element will receive input events.</dd> + <dd>要素の外側に輪郭線を描くときに使う色です。この輪郭線は境界線とは異なり、ドキュメント内でそのスペースを確保しません (そのため他のコンテンツと重なる可能性があります)。一般的には、入力イベントを受け取る要素を示したフォーカスインジケーターに使用されます。</dd> </dl> <h3 id="Borders" name="Borders">境界線</h3> -<p>あらゆる要素には、まわりに境界線が存在します。 基本的な要素の境界は、要素の内容の端に描かれている線です。 See {{SectionOnPage("/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model", "Box properties")}} to learn about the relationship between elements and their borders, and the article <a href="/ja/docs/Learn/CSS/Styling_boxes/Borders">Styling borders using CSS</a> to learn more about applying styles to borders.</p> +<p>あらゆる要素には、周りに境界線が存在します。基本的な要素の境界は、要素の内容の端に描かれている線です。要素とその境界線の関係性については {{SectionOnPage("/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model", "ボックスのプロパティ")}} を、より詳しい境界線へのスタイルの適用については <a href="/ja/docs/Learn/CSS/Styling_boxes/Borders">CSS での境界線のスタイル付け</a> をご参照ください。</p> -<p>You can use the {{cssxref("border")}} shorthand property, which lets you configure everything about the border in one shot (including non-color features of borders, such as its <a href="/ja/docs/Web/CSS/border-width">width</a>, <a href="/ja/docs/Web/CSS/border-style">style</a> (solid, dashed, etc.), and so forth.</p> +<p>{{cssxref("border")}} 短縮プロパティを使用することもできます。これは、境界線に関する (色に関しない<a href="/ja/docs/Web/CSS/border-width">線幅</a>、<a href="/ja/docs/Web/CSS/border-style">線の種類</a> (実線、破線など) のような境界線の機能も含んだ) すべての設定をこれ一つで行えます。</p> <dl> <dt>{{cssxref("border-color")}}</dt> - <dd>Specifies a single color to use for every side of the element's border.</dd> - <dt>{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, and {{cssxref("border-bottom-color")}}</dt> - <dd>Lets you set the color of the corresponding side of the element's border.</dd> - <dt>{{cssxref("border-block-start-color")}} and {{cssxref("border-block-end-color")}}</dt> - <dd>With these, you can set the color used to draw the borders which are closest to the start and end of the block the border surrounds. In a left-to-right writing mode (such as the way English is written), the block start border is the top edge and the block end is the bottom. This differs from the inline start and end, which are the left and right edges (corresponding to where each line of text in the box begins and ends).</dd> - <dt>{{cssxref("border-inline-start-color")}} and {{cssxref("border-inline-end-color")}}</dt> - <dd>These let you color the edges of the border closest to to the beginning and the end of the start of lines of text within the box. Which side this is will vary depending on the {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} properties, which are typically (but not always) used to adjust text directionality based on the language being displayed. For example, if the box's text is being rendered right-to-left, then the <code>border-inline-start-color</code> is applied to the right side of the border.</dd> + <dd>要素の境界線の各辺に使用する単色を指定します。</dd> + <dt>{{cssxref("border-left-color")}} と {{cssxref("border-right-color")}} と {{cssxref("border-top-color")}} と {{cssxref("border-bottom-color")}}</dt> + <dd>要素の境界線の各辺に対応する色を指定できます。</dd> + <dt>{{cssxref("border-block-start-color")}} と {{cssxref("border-block-end-color")}}</dt> + <dd>これらは、境界線が囲むブロックの始点と終点に最も近い境界線の描画色を設定することができます。左から右への書き方 (英語の書き方など) では、ブロック開始の境界線は上端、ブロック終了の境界線は下端になります。これは、インライン開始とインライン終了である左右の (ボックス内の各行のテキストの開始と終了の位置に対応する) 端とは異なります。</dd> + <dt>{{cssxref("border-inline-start-color")}} と {{cssxref("border-inline-end-color")}}</dt> + <dd>これらは、ボックス内のテキスト行の先頭と末尾に最も近い境界線の縁に色を付けられます。これは {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} プロパティに依存しますが、どちら側になるかは {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} プロパティによって異なります。例えば、ボックスのテキストが右から左に描画される場合、<code>border-inline-start-color</code> は境界線の右側に適用されます。</dd> </dl> <h3 id="Other_ways_to_use_color" name="Other_ways_to_use_color">色をつける他の方法</h3> -<p>CSS が唯一の色を付けるためのウェブ技術ではありません。ウェブで使用することができ、色もサポートしているグラフィック技術があります。</p> +<p>CSS が唯一の色を付けるためのウェブ技術ではありません。色もサポートしている、ウェブで使用可能なグラフィック技術があります。</p> <dl> - <dt>HTMLの <a href="/ja/docs/Web/API/Canvas_API">Canvas API</a></dt> - <dd>Canvas APIで、2Dのビットマップ画像を {{HTMLElement("canvas")}} 要素の中に描画しましょう。 より学ぶには次のリンクを参照してください: <a href="/ja/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a> .</dd> + <dt>HTML <a href="/ja/docs/Web/API/Canvas_API">Canvas API</a></dt> + <dd>Canvas API では、2D のビットマップ画像を {{HTMLElement("canvas")}} 要素の中に描画できます。より詳しくは <a href="/ja/docs/Web/API/Canvas_API/Tutorial">Canvas チュートリアル</a>をご参照ください。</dd> <dt><a href="/ja/docs/Web/SVG">SVG</a> (Scalable Vector Graphics)</dt> - <dd>SVGを用いれば、特定の形・パターン・線を描くコマンドを用いて画像を描くことができます。 SVGのコマンドはXMLの形式で、それにより直接ウェブページに埋め込む事ができ、またHTMLのimg要素を用いて、他の画像と同じように画像を配置することもできます。</dd> + <dd>SVG ならば、特定の形状、パターン、線を描くコマンドで画像を描画できます。 SVG のコマンドは XML の形式となっており、直接ウェブページに埋め込めます。また、img 要素を使うと他の画像と同じような配置もできます。</dd> <dt><a href="/ja/docs/Web/API/WebGL_API">WebGL</a></dt> - <dd>Web Graphics Library とはOpen GL ESを基礎にしたAPIで、これを用いるとウェブ上に2Dや3Dのハイパフォーマンスなグラフィックを描画することができます。より詳しく知るには <a href="/ja/docs/Web/API/WebGL_API/Tutorial">WebGL チュートリアル</a>を参照してください。</dd> + <dd>Web Graphics Library は Open GL ES を基にした API で、ウェブ上に 2D や 3D のハイパフォーマンスなグラフィックを描画できます。より詳しくは <a href="/ja/docs/Web/API/WebGL_API/Tutorial">WebGL チュートリアル</a>をご参照ください。</dd> </dl> -<h2 id="How_to_describe_a_color" name="How_to_describe_a_color">色をどうやって指定するか</h2> +<h2 id="How_to_describe_a_color" name="How_to_describe_a_color">色の指定方法</h2> -<p>CSSを用いて色を表現するには、アナログの概念である「色」の概念をコンピュータが解釈できるようなデジタルの形式に翻訳する方法を見つける必要があります。 This is typically done by breaking down the color into components, such as how much of each of a set of primary colors to mix together, or how bright to make the color. As such, there are several ways you can describe color in CSS.</p> +<p>CSS で色を表現するには、アナログの概念である「色」の概念を、コンピュータが解釈できるようなデジタル形式に翻訳する方法が必要です。これは通常、原色の集合それぞれをどのくらい混ぜるか、どのくらいの明るさにするかなど、色を構成要素に分解することで行います。ここでは、CSS で色を表現するいくつかの方法を示します。</p> -<p>For more detailed discussion of each of the color value types, see the reference for the CSS {{cssxref("<color>")}} unit.</p> +<p>色の値型の詳細は、CSS {{cssxref("<color>")}} 単位のリファレンスをご参照ください。</p> <h3 id="Keywords" name="Keywords">キーワード</h3> -<p>A set of standard color names have been defined, letting you use these keywords instead of numeric representations of colors if you choose to do so and there's a keyword representing the exact color you want to use. Color keywords include the standard primary and secondary colors (such as <code>red</code>, <code>blue</code>, or <code>orange</code>), shades of gray (from <code>black</code> to <code>white</code>, including colors like <code>darkgray</code> and <code>lightgrey</code>), and a variety of other blended colors including <code>lightseagreen</code>, <code>cornflowerblue</code>, and <code>rebeccapurple</code>.</p> +<p>標準の色名がいくつか定義されており、色の数値表現の代わりにこれらのキーワードを使用できます。色キーワードには原色と副色 (<code>red</code>、<code>blue</code>、<code>orange</code> など)、灰色 (<code>black</code> から <code>white</code> までの <code>darkgray</code> や <code>lightgrey</code> といった色を含む)、これらを混ぜた色である <code>lightseagreen</code>、<code>cornflowerblue</code>、<code>rebeccapurple</code> が含まれます。</p> -<p>See {{SectionOnPage("/ja/docs/Web/CSS/color_value", "Color keywords", "code")}} for a list of all available color keywords.</p> +<p>利用可能な全ての色キーワードの一覧は、{{SectionOnPage("/ja/docs/Web/CSS/color_value", "色キーワード")}}をご参照ください。</p> -<h3 id="RGB_values" name="RGB_values">RGB値</h3> +<h3 id="RGB_values" name="RGB_values">RGB 値</h3> -<p>There are three ways to represent an RGB color in CSS.</p> +<p>CSS での RGB の色表現は 3 通りあります。</p> -<h4 id="Hexadecimal_string_notation" name="Hexadecimal_string_notation">16進数の文字列表記</h4> +<h4 id="Hexadecimal_string_notation" name="Hexadecimal_string_notation">16 進数文字列表記</h4> -<p>Hexadecimal string notation represents a color using hexadecimal digits to represent each of the color components (red, green, and blue). It may also include a fourth compoment: the alpha channel (or opacity). Each color component can be represented as a number between 0 and 255 (0x00 and 0xFF) or, optionally, as a number between 0 and 15 (0x0 and 0xF). All components <em>must</em> be specified using the same number of digits. If you use the single-digit notation, the final color is computed by using each component's digit twice; that is, <code>"#D"</code> becomes <code>"#DD"</code> when drawing.</p> +<p>16 進数文字列表記は、色の各要素 (赤、緑、青) を表すために 16 進数の数字で色を表します。また、4 つ目の要素のアルファチャネル (または不透明度) を含められます。各色要素は、0 〜 255 (0x00 と 0xFF) の間の数値、または任意で 0 ～ 15 (0x0 と 0xF) の間の数値として表せます。全要素は同じ桁数で指定する必要があります。1 桁の表記を使用した場合、描画時の最終的な色は <code>"#D"</code> が <code>"#DD"</code> になるように各構成要素の桁を 2 回繰り返して計算します。</p> -<p>A color in hexadecimal string notation always begins with the character <code>"#"</code>. After that come the hexadecimal digits of the color code. The string is case-insensitive.</p> +<p>16 進数文字列表記の色は、常に文字 <code>"#"</code> で始まります。その後にカラーコードの 16 進数が来ます。文字列の大文字小文字は区別されません。</p> <dl> <dt><code>"#rrggbb"</code></dt> - <dd>Specifies a fully-opaque color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>.</dd> + <dd>16 進数の完全不透明色を指定します。赤色成分が <code>0xrr</code>、緑色成分がが <code>0xgg</code>、青色成分が <code>0xbb</code> です。</dd> <dt><code>"#rrggbbaa"</code></dt> - <dd>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>. The alpha channel is specified by <code>0xaa</code>; the lower this value is, the more translucent the color becomes.</dd> + <dd>16 進数の色を指定します。赤色成分が <code>0xrr</code>、緑色成分がが <code>0xgg</code>、青色成分が <code>0xbb</code> です。アルファチャンネルは <code>0xaa</code> で指定します。この値が小さいほど透明に近づきます。</dd> <dt><code>"#rgb"</code></dt> - <dd>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>.</dd> + <dd>16 進数の完全不透明色を指定します。赤色成分が <code>0xrr</code>、緑色成分がが <code>0xgg</code>、青色成分が <code>0xbb</code> です。</dd> <dt><code>"#rgba"</code></dt> - <dd>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>. The alpha channel is specified by <code>0xaa</code>; the lower this value is, the more translucent the color becomes.</dd> + <dd>16 進数の色を指定します。赤色成分が <code>0xrr</code>、緑色成分がが <code>0xgg</code>、青色成分が <code>0xbb</code> です。アルファチャンネルは <code>0xaa</code> で指定します。この値が小さいほど透明に近づきます。</dd> </dl> -<p>As an example, you can represent the opaque color bright blue as <code>"#0000ff"</code> or <code>"#00f"</code>. To make it 25% opaque, you can use <code>"#0000ff44"</code> or <code>"#00f4"</code>.</p> +<p>例として、明るい青の不透明色は <code>"#0000ff"</code> や <code>"#00f"</code> で表現できます。25% 不透明にするには、<code>"#0000ff44"</code> や <code>"#00f4"</code> のようにします。</p> <h4 id="RGB_functional_notation" name="RGB_functional_notation">RGB 関数表記</h4> -<p>RGB (Red/Green/Blue) functional notation, like hexadecimal string notation, represents colors using their red, green, and blue components (as well as, optionally, an alpha channel component for opacity). However, instead of using a string, the color is defined using the CSS function {{cssxref("color_value", "rgb()", "#rgb()")}}. This function accepts as its input parameters the values of the red, green, and blue components and an optional fourth parameter, the value for the alpha channel.</p> +<p>RGB (赤/緑/青) 関数表記法は、16 進文字列表記法と同様に赤、緑、青の各成分 (任意では不透明度のアルファチャンネル成分) を用いて色を表現しますが、文字列ではなく CSS 関数 {{cssxref("color_value", "rgb()", "#rgb()")}} で色を定義します。この関数は、入力パラメータとして赤、緑、青の各成分の値と、任意の第 4 引数のアルファチャンネル値を受け取ります。</p> -<p>Legal values for each of these parameters are:</p> +<p>これらの引数の正常値は以下の通りです。</p> <dl> - <dt><code>red</code>, <code>green</code>, and <code>blue</code></dt> - <dd>Each must be an {{cssxref("<integer>")}} value between 0 and 255 (inclusive), or a {{cssxref("<percentage>")}} from 0% to 100%.</dd> + <dt><code>red</code>、<code>green</code>、<code>blue</code></dt> + <dd>0 以上 255 以下の {{cssxref("<integer>")}} 型の値か、0% から 100% の {{cssxref("<percentage>")}} 型の値です。</dd> <dt><code>alpha</code></dt> - <dd>The alpha channel is a number between 0.0 (fully transparent) and 1.0 (fully opaque). You can also specify a percentage where 0% is the same as 0.0 and 100% is the same as 1.0.</dd> + <dd>アルファチャンネルは、0.0 (完全透過) から 1.0 (完全不透明) の間の数値です。また、 パーセントも指定でき、これは 0% が 0.0 と同じで 100% が 1.0 と同じです。</dd> </dl> -<p>For example, a bright red that's 50% opaque can be represented as <code>rgb(255, 0, 0, 0.5)</code> or <code>rgb(100%, 0, 0, 50%)</code>.</p> +<p>例えば、不透明度 50% の明るい赤は <code>rgb(255, 0, 0, 0.5)</code> や <code>rgb(100%, 0, 0, 50%)</code> のように表現できます。</p> <h3 id="HSL_functional_notation" name="HSL_functional_notation">HSL 関数表記</h3> -<p>デザイナーやアーティストたちは {{interwiki("wikipedia", "HSL and HSV", "HSL")}} (Hue/Saturation/Luminosity) をもちいて仕事をしたがる場合があります。 Webにおいては、HSL色はHSL関数表記をもちいて表現されています。CSSの <code>hsl()</code> 関数は、 <code>rgb()</code> 関数と表現方法においてとても似ています。</p> +<p>デザイナーやアーティストは {{interwiki("wikipedia", "HSL and HSV", "HSL")}} (Hue/Saturation/Luminosity) で作業しようとすることがあります。ウェブにおける HSL 色は、HSL 関数表記で表現します。CSS の <code>hsl()</code> 関数の表現方法は、<code>rgb()</code> 関数とよく似ています。</p> <div style="padding-bottom: 20px;"> <figure style="width: 500px;"><img alt="HSL 色円柱" src="https://mdn.mozillademos.org/files/15445/1200px-HSL_color_solid_cylinder_alpha_lowgamma.png" style="height: 375px; width: 500px;"> -<figcaption><em><strong>図1 HSL 色円柱</strong> Hue defines the actual color based on the position along a circular color wheel representing the colors of the visible spectrum. Saturation is a percentage of how much of the way between being a shade of gray and having the maximum possible amount of the given hue. As the value of luminance (or lightness) increases, the color transitions from the darkest possible to the brightest possible (from black to white). Image courtesy of user <a href="http://commons.wikimedia.org/wiki/User:SharkD">SharkD</a> on <a href="https://www.wikipedia.org/">Wikipedia</a>, distributed under the <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a> license.</em></figcaption> +<figcaption><em><strong>図 1. HSL 色円柱</strong> </em>色相は、可視スペクトルの色を表す円形の色相環に沿った位置に基づいて実際の色を定義します。彩度は、灰色の強さ、もしくはその色相で取りうる最も濃い色に対する割合です。輝度 (または明度) の値が高くなると、色は最も暗い色から最も明るい色 (黒から白) へと変化します。<em>画像提供は <a href="https://www.wikipedia.org/">Wikipedia </a>の <a href="http://commons.wikimedia.org/wiki/User:SharkD">SharkD</a> さんより、<a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a> ライセンスで配布されているものです。</em></figcaption> </figure> </div> -<p>The value of the hue (H) component of an HSL color is an angle from red around through yellow, green, cyan, blue, and magenta (ending up back at red again at 360°) that identifies what the base color is. The value can be specified in any {{cssxref("<angle>")}} unit supported by CSS, including degrees (<code>deg</code>), radians (<code>rad</code>), gradians (<code>grad</code>), or turns (<code>turn</code>). But this doesn't control how vivid or dull, or how bright or dark the color is.</p> +<p>HSL カラーの色相 (H) 成分の値は、赤から黄、緑、水、青、マゼンタ (そして 360° で再び赤に戻る) までの角度で、ベースの色を特定します。度 (<code>deg</code>)、ラジアン (<code>rad</code>)、グラジアン (<code>grad</code>)、回転 (<code>turn</code>) など、CSS がサポートする任意の {{cssxref("<angle>")}} 単位で値を指定できます。しかしこれでは、鮮やかさや濁り、色の明るさや暗さを制御できません。</p> -<p>The saturation (S) component of the color specifies what percentage of the final color is comprised of the specified hue. The rest is defined by the grey level provided by the luminance (L) component.</p> +<p>色の彩度 (S) 成分は、最終的な色を指定の色相が構成する割合を指定します。残りの輝度 (L) 成分は、灰色の強さを定義します。</p> -<p>Think of it like creating the perfect paint color:</p> +<p>以下のように、完璧な絵の具の色を作るかのように考えてみましょう。</p> <ol> - <li>You start with base paint that's the maximum intensity possible for a given color, such as the most intense blue that can be represented by the user's screen. This is the <strong>hue</strong> (H) component: a value representing the angle around the color wheel for the vivid hue we want to use as our base.</li> - <li>Then select a greyscale paint that corresponds how bright you want the color to be; this is the luminance. Do you want it to be very bright and nearly white, or very dark and closer to black, or somewhere in between? This is specified using a percentage, where 0% is perfectly black and 100% is perfectly white. (regardless of the saturation or hue). In between values are a literal grey area.</li> - <li>Now that you have a grey paint and a perfectly vivid color, you need to mix them together. The saturation (S) component of the color indicates what percentage of the final color should be comprised of that perfectly vivid color. The rest of the final color is made up of the grey paint that represents the saturation.</li> + <li>ユーザーの画面で表現できる最も強い青など、その色で最も強いベースの絵の具から始めます。これが<strong>色相</strong> (H) 要素で、ベースとして使用したい鮮やかな色相環の周りの角度を表す値です。</li> + <li>次に、欲しい色の明るさに対応するグレースケールの絵の具を選びます。非常に明るくて白に近い色にしたいのか、それとも非常に暗くて黒に近い色にしたいのか、それともその中間のどこかにしたいのか。これはパーセンテージで指定し、0% が完全な黒、100% が完全な白となります。(彩度や色相に関係なく)。この値の間には文字通り灰色の領域があります。</li> + <li>灰色の絵の具と完全に鮮やかな色が手に入ったので、これらを混ぜ合わせる必要があります。色の彩度 (S) 成分は、最終的な色のうち完全に鮮やかな色が構成するパーセントを示します。残りは、彩度を表すグレーの絵の具となります。</li> </ol> -<p>You can also optionally include an alpha channel, to make the color less than 100% opaque.</p> +<p>任意でアルファチャンネルを追加して、色を 100% 以下の不透明度にすることもできます。</p> -<p>Here are some sample colors in HSL notation:</p> +<p>こちらは、HSL 表記のサンプル色です。</p> <div id="hsl-swatches"> <div class="hidden"> -<pre class="brush: css">table { +<pre class="brush: css notranslate">table { border: 1px solid black; font: 16px "Open Sans", Helvetica, Arial, sans-serif; border-spacing: 0; @@ -187,7 +188,7 @@ th { background-color: hsl(0, 0%, 75%); }</pre> -<pre class="brush: html"><table> +<pre class="brush: html notranslate"><table> <thead> <tr> <th scope="col">Color in HSL notation</th> @@ -227,26 +228,26 @@ th { </div> <div class="note"> -<p>hueの単位を省略した場合には、度 (<code>deg</code>)であるとされることに注意してください。</p> +<p>注意として、色相の単位を省略した場合は度 (<code>deg</code>) と見なされます。</p> </div> -<h2 id="Using_color" name="Using_color">色の使用</h2> +<h2 id="Using_color" name="Using_color">色の活用</h2> -<p>Now that you know what CSS properties exist that let you apply color to elements and the formats you can use to describe colors, you can put this together to begin to make use of color. As you may have seen from the list under {{anch("Things that can have color")}}, there are plenty of things you can color with CSS. Let's look at this from two sides: using color within a {{Glossary("stylesheet")}}, and adding and changing color using {{Glossary("JavaScript")}} code to alter the styles of elements.</p> +<p>要素に色を適用する CSS プロパティの存在と、色の記述に使用可能な形式が分かったので、これをまとめて色を活用し始めてみましょう。{{anch("着色できる物")}}のリストを見て把握できたと思いますが、CSS で色を付けられる物はたくさんあります。ここでは、{{Glossary("stylesheet", "スタイルシート")}}内で色を使う場合と、{{Glossary("JavaScript")}} コードで要素のスタイルを変更するために色を追加したり変更したりする場合の、2 つの側面から見ていきます。</p> -<h3 id="Specifying_colors_in_stylesheets" name="Specifying_colors_in_stylesheets">スタイルシート(CSS)を使った色の指定</h3> +<h3 id="Specifying_colors_in_stylesheets" name="Specifying_colors_in_stylesheets">スタイルシートでの色指定</h3> -<p>The easiest way to apply color to elements—and the way you'll usually do it—is to simply specify colors in the CSS that's used when rendering elements. While we won't use every single property mentioned previously, we'll look at a couple of examples. The concept is the same anywhere you use color.</p> +<p>要素に色を適用する最も簡単な方法は、要素の描画に使用する CSS で色を指定することです。前述のプロパティをすべて使用するわけではありませんが、いくつかの例を見てみましょう。色を使う場所によらず、考え方は同じです。</p> -<p>Let's take a look at an example, starting by looking at the results we're trying to achieve:</p> +<p>先にこれからやることの結果を見てから、サンプルを見ていきます。</p> <div>{{EmbedLiveSample("Specifying_colors_in_stylesheets", 650, 150)}}</div> <h4 id="HTML">HTML</h4> -<p>The HTML responsible for creating the above example is shown here:</p> +<p>上記の例を作成するための HTML は、この通りです。</p> -<pre class="brush: html"><div class="wrapper"> +<pre class="brush: html notranslate"><div class="wrapper"> <div class="box boxLeft"> <p> This is the first box. @@ -259,15 +260,15 @@ th { </div> </div></pre> -<p>This is pretty simple, using a {{HTMLElement("div")}} as a wrapper around the contents, which consists of two more <code><div></code>s, each styled differently with a single paragraph ({{HTMLElement("p")}}) in each box.</p> +<p>これは非常にシンプルで、{{HTMLElement("div")}} をコンテンツのラッパーとして使用し、さらに 2 つの <div> で構成しています。</p> -<p>The magic happens, as usual, in the CSS, where we'll apply colors define the layout for the HTML above.</p> +<p>魔法はいつも、CSS で起こります。上記の HTML で定義したレイアウトに、色を適用していきます。</p> <h4 id="CSS">CSS</h4> -<p>We'll look at the CSS to create the above results a piece at a time, so we can review the interesting parts one by one.</p> +<p>上記の結果を作り出す CSS を一つずつ見ていけば、面白い部分も一つずつ見られるでしょう。</p> -<pre class="brush: css">.wrapper { +<pre class="brush: css notranslate">.wrapper { width: 620px; height: 110px; margin: 0; @@ -275,13 +276,13 @@ th { border: 6px solid mediumturquoise; }</pre> -<p>The <code>.wrapper</code> class is used to assign styles to the {{HTMLElement("div")}} that encloses all of our other content. This establishes thesize of the container using {{cssxref("width")}} and {{cssxref("height")}} as well as its {{cssxref("margin")}} and {{cssxref("padding")}}.</p> +<p><code>.wrapper</code> クラスは、他のすべてのコンテンツを囲む {{HTMLElement("div")}} にスタイルを割り当てるために使っています。これは {{cssxref("width")}} と {{cssxref("height")}} を使ってコンテナのサイズを決定し、さらに {{cssxref("margin")}} と {{cssxref("padding")}} を使っています。</p> -<p>Of more interest to our discussion here is the use of the {{cssxref("border")}} property to establish a border around the outside edge of the element. This border is a solid line, 6 pixels wide, in the color <code>mediumturquoise</code>.</p> +<p>ここでの論述でさらに興味深いのは、{{cssxref("border")}} プロパティで要素の縁に境界線を設定していることです。この境界線は幅 6 ピクセルの実線で、色は <code>mediumturquoise</code> です。</p> -<p>Our two colored boxes share a number of properties in common, so next we establish a class, <code>.box</code>, that defines those shared properties:</p> +<p>2 つの色付きボックスには共通のプロパティがいくつかありますので、そのプロパティを定義するクラス <code>.box</code> を作成します。</p> -<pre class="brush: css">.box { +<pre class="brush: css notranslate">.box { width: 290px; height: 100px; margin: 0; @@ -292,23 +293,23 @@ th { align-items: center; }</pre> -<p>In brief, <code>.box</code> establishes the size of each box, as well as the configuration of the font used within. We also take advantage of <a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexbox</a> to easily center the contents of each box. We enable <code>flex</code> mode using {{cssxref("display", "display: flex")}}, and set both {{cssxref("justify-content")}} and {{cssxref("align-items")}} to <code>center</code>. Then we can create a class for each of the two boxes that defines the properties that differ between the two.</p> +<p>簡単に言えば、<code>.box</code> は各ボックスのサイズとその中で使用するフォントの構成を確立しています。また、<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS フレックスボックス</a>も利用して簡単に各ボックスのコンテンツを中央揃えしています。{{cssxref("display", "display: flex")}} で <code>flex</code> モードを有効にし、{{cssxref("justify-content")}} と {{cssxref("align-items")}} を <code>center</code> に設定しています。あとは、2 つのボックスそれぞれに異なるプロパティを定義するクラスを作るだけです。</p> -<pre class="brush: css">.boxLeft { +<pre class="brush: css notranslate">.boxLeft { float: left; background-color: rgb(245, 130, 130); outline: 2px solid darkred; }</pre> -<p>The <code>.boxLeft</code> class—which, cleverly, is used to style the box on the left—floats the box to the left, then sets up the colors:</p> +<p><code>.boxLeft</code> クラスは、左側のボックスのスタイルとして巧みに使われ、以下のようにボックスを左側に浮かせて色を設定しています。</p> <ul> - <li>The box's background color is set by changing the value of the CSS {{cssxref("background-color")}} property to <code>rgb(245, 130, 130)</code>.</li> - <li>An outline is defined for the box. Unlike the more commonly used <code>border</code>, {{cssxref("outline")}} doesn't affect layout at all; it draws over the top of whatever may happen to be outside the element's box instead of making room as <code>border</code> does. This outline is a solid, dark red line that's two pixels thick. Note the use of the <code>darkred</code> keyword when specifying the color.</li> - <li>Notice that we're not explicitly setting the text color. That means the value of {{cssxref("color")}} will be inherited from the nearest containing element that defines it. By default, that's black.</li> + <li>CSS {{cssxref("background-color")}} プロパティを <code>rgb(245, 130, 130)</code> の値に変更することで、ボックスの背景色を設定しています。</li> + <li>ボックスに輪郭線を定義しています。一般的によく使われる <code>border</code> とは異なり、{{cssxref("outline")}} はレイアウトに全く影響しません。この輪郭線は、2 ピクセルの太さの、濃い赤色の実線です。色の指定に <code>darkred</code> キーワードを使用していることにご注意ください。</li> + <li>注意として、テキストの色は明示的に設定していません。この場合 {{cssxref("color")}} の値はそれを含んだ最も近い要素から継承されます。すなわち、デフォルトである黒色です。</li> </ul> -<pre class="brush: css">.boxRight { +<pre class="brush: css notranslate">.boxRight { float: right; background-color: hsl(270deg, 50%, 75%); outline: 4px dashed rgb(110, 20, 120); @@ -317,37 +318,41 @@ th { text-shadow: 2px 2px 3px black; }</pre> -<p>Finally, the <code>.boxRight</code> class describes the unique properties of the box that's drawn on the right. It's configured to float the box to the right so that it appears next to the previous box. Then the following colors are established:</p> +<div class="blockIndicator note"> +<p>こちらを Safari で表示しようとしても、正常に表示されません。なぜなら、Safari は <code>text-decoration: underline wavy #88ff88</code> をサポートしていないからです。</p> +</div> + +<p>最後に、<code>.boxRight</code> クラスで右に描画されるボックス固有のプロパティを記述します。これは、先のボックスの隣に表示されるように、ボックスを右に浮かす設定をしています。そして、以下のように色を設定しています。</p> <ul> - <li>The <code>background-color</code> is set using the HSL value specified using <code>hsl(270deg, 50%, 75%)</code>. This is a medium purple color.</li> - <li>The box's <code>outline</code> is used to specify that the box should be enclosed in a four pixel thick dashed line whose color is a somewhat deeper purple (<code>rgb(110, 20, 120)</code>).</li> - <li>The foreground (text) color is specified by setting the {{cssxref("color")}} property to <code>hsl(0deg, 100%, 100%)</code>. This is one of many ways to specify the color white.</li> - <li>We add a green wavy line under the text with {{cssxref("text-decoration")}}.</li> - <li>Finally, a bit of a shadow is added to the text using {{cssxref("text-shadow")}}. Its <code>color</code> parameter is set to <code>black</code>.</li> + <li><code>background-color</code> は <code>hsl(270deg, 50%, 75%)</code> で指定した HSL 値を設定しています。この色は中くらいの紫色です。</li> + <li>ボックスの <code>outline</code> は、 ボックスを太さ 4 ピクセルの破線で囲み、色はやや濃い紫色 (<code>rgb(110, 20, 120)</code>) となるように指定しています。</li> + <li>前景 (テキスト) の色は、{{cssxref("color")}} プロパティを <code>hsl(0deg, 100%, 100%)</code> にすることで指定してあります。これは白色を指定する方法のうちの一つです。</li> + <li>{{cssxref("text-decoration")}} でテキストの下に緑の波線を引いています。</li> + <li>最後に、{{cssxref("text-shadow")}} を使用してテキストに少しだけ影をつけています。この <code>color</code> 引数は <code>black</code> にしています。</li> </ul> <h2 id="Letting_the_user_pick_a_color" name="Letting_the_user_pick_a_color">ユーザーに色を選択させる</h2> -<p>There are many situations in which your web site may need to let the user select a color. Perhaps you have a customizable user interface, or you're implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it's been necessary to implement your own {{interwiki("wikipedia", "color picker")}}, HTML now provides support for browsers to provide one for your use through the {{HTMLElement("input")}} element, by using <code>"color"</code> as the value of its {{htmlattrxref("type", "input")}} attribute.</p> +<p>ウェブサイト上では、ユーザーに色を選択させる必要がある場合があります。カスタマイズ可能なユーザーインターフェースがある場合や、お絵かきアプリを実装している場合などが考えられるでしょう。編集可能なテキストがあってユーザーにテキストの色を選択させる、あるいはアプリでフォルダやアイテムに色を割り当てることができる場合があるかもしれません。古くは、独自の{{interwiki("wikipedia", "カラーピッカー")}}を実装する必要がありましたが、HTML では {{HTMLElement("input")}} 要素を通じて {{htmlattrxref("type", "input")}} 属性の値を <code>"color"</code> にすれば、ブラウザが色選択を提供できるようになりました。</p> -<p>The <code><input></code> element represents a color only in the {{anch("Hexadecimal string notation", "hexadecimal string notation")}} covered above.</p> +<p><code><input></code> 要素は、先で取り上げた {{anch("Hexadecimal string notation", "16進数文字列表記")}} でのみ色を表します。</p> <h3 id="Example_Picking_a_color" name="Example_Picking_a_color">例: 色の選択</h3> -<p>Let's look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker's value is displayed.</p> +<p>ユーザーが色を選択できる簡単な例を見てみましょう。ユーザーが色を調整すると、サンプルの周囲の境界線が新しい色を反映するように変化します。色を選び終えると、カラーピッカーの値が表示されます。</p> <p>{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}</p> <div class="note"> -<p>On macOS, you indicate that you've finalized selection of the color by closing the color picker window.</p> +<p>macOS では、カラーピッカーウインドウを閉じると色の選択が完了したことになります。</p> </div> <h4 id="HTML_2">HTML</h4> -<p>The HTML here creates a box that contains a color picker control (with a label created using the {{HTMLElement("label")}} element) and an empty paragraph element ({{HTMLElement("p")}}) into which we'll output some text from our JavaScript code.</p> +<p>この HTML は、({{HTMLElement("label")}} 要素で作成したラベル付きの) カラーピッカーコントロールと、空の段落要素 ({{HTMLElement("p")}}) を含むボックスを作成します。この段落要素に JavaScript コードからテキストを出力する予定です。</p> -<pre class="brush: html"><div id="box"> +<pre class="brush: html notranslate"><div id="box"> <label for="colorPicker">Border color:</label> <input type="color" value="#8888ff" id="colorPicker"> <p id="output"></p> @@ -355,9 +360,9 @@ th { <h4 id="CSS_2">CSS</h4> -<p>The CSS simply establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color that won't last, courtesy of the JavaScript below...</p> +<p>この CSS では、ボックスのサイズと見た目の基本的なスタイルを設定しています。境界線には 2 ピクセルの幅を設定していますが、色は下記の JavaScript のおかげで変化します。</p> -<pre class="brush: css">#box { +<pre class="brush: css notranslate">#box { width: 500px; height: 200px; border: 2px solid rgb(245, 220, 225); @@ -367,9 +372,9 @@ th { <h4 id="JavaScript">JavaScript</h4> -<p>The script here handles the task of updating the starting color of the border to match the color picker's value. Then two event handlers are added to deal with input from the <code><a href="/ja/docs/Web/HTML/Element/input/color"><input type="color"></a></code> element.</p> +<p>このスクリプトは、境界線の開始色をカラーピッカーの値と同じに更新するタスクを処理します。<code><a href="/ja/docs/Web/HTML/Element/input/color"><input type="color"></a></code> 要素からの入力をハンドルするために、2 つのイベントハンドラを追加しています。</p> -<pre class="brush: js">let colorPicker = document.getElementById("colorPicker"); +<pre class="brush: js notranslate">let colorPicker = document.getElementById("colorPicker"); let box = document.getElementById("box"); let output = document.getElementById("output"); @@ -383,129 +388,129 @@ colorPicker.addEventListener("change", function(event) { output.innerText = "Color set to " + colorPicker.value + "."; }, false);</pre> -<p>The {{event("input")}} event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box's border color to match the color picker's current value.</p> +<p>この {{event("input")}} イベントは要素の値が変更されるたびに送信されます。このイベントが来るたびに、ボックスの境界線の色をカラーピッカーの現在値に合わせます。</p> -<p>The {{event("change")}} event is received when the color picker's value is finalized. We respond by setting the contents of the <code><p></code> element with the ID <code>"output"</code> to a string describing the finally selected color.</p> +<p>カラーピッカーの値が確定したときに、{{event("change")}} イベントを受信します。ID が <code>"output"</code> の <code><p></code> 要素の内容を、最後に選択した色を表す文字列に設定することで応答します。</p> <h2 id="Using_color_wisely" name="Using_color_wisely">賢く色を使う</h2> -<p>Making the right choices when selecting colors when designing a web site can be a tricky process, especially if you aren't well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people withcertain vision problems, particularly color blindness.</p> +<p>ウェブサイトのデザインで正しい色選びをする際には、芸術、デザイン、少なくとも基本的な色理論に精通していないと、格段に複雑な工程となるでしょう。間違った色の選択は、サイトが醜くなったり、さらに悪いことにコントラストや相反する色の問題でコンテンツが読めなくなってしまうことがあります。また、間違った色を使用してしまうことで、特定の視覚的問題、特に色覚異常を持つ人々がコンテンツを全く利用できなくなる恐れがあります。</p> <h3 id="Finding_the_right_colors" name="Finding_the_right_colors">適切な色を見つける</h3> -<p>Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can't replace having a good designer helping you make these decisions, they can definitely get you started.</p> +<p>何らかの芸術やデザインを触れずに、丁度よく正しい色を思い付くことは難しいでしょう。幸いなことに、あなたの手助けになりえる便利なツールがあります。これらは意思決定を助ける良きデザイナーを持つことには代わりませんが、火付け役にはなるでしょう。</p> -<h4 id="Base_color" name="Base_color">ベース色</h4> +<h4 id="Base_color" name="Base_color">ベースカラー</h4> -<p>The first step is to choose your <strong>base color</strong>. This is the color that in some way defines your web site or the subject matter of the site. Just as we associate green with the beverage {{interwiki("wikipedia", "Mountain Dew")}} and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include:</p> +<p>最初のステップは、<strong>ベースカラー</strong>を選ぶことです。これは、何らかの形であなたのウェブサイトやサイトの主題を定義する色です。緑がお茶を連想させるように、また青は空や海と関係があるように考えるところから、サイトを表すのに適切なベースカラー選びを始めると良いでしょう。ベースカラーを選ぶ方法はたくさんありますが、以下のようないくつかのアイデアがあります。</p> <ul> - <li>A color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey.</li> - <li>A color that comes from imagery associated with what your content is about. If you're creating a web site about a given item or product, choose a color that's physically present on that item.</li> - <li>Browse web sites that let you look at lots of existing color palettes and images to find inspiration.</li> + <li>商品やアイデアで識別される既存の色や、伝えたい感情を代表する色など、コンテンツのトピックに自然に関連する色。</li> + <li>コンテンツが表す物に関連付いたイメージから来る色。特定の項目や製品に関するウェブサイトを作成する場合は、それらに物理的に存在する色を選びます。</li> + <li>ウェブサイトを探して既存のカラーパレットや画像をたくさん見ることで、インスピレーションを得ます。</li> </ul> -<p>When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the web site <a href="http://www.colorzilla.com/">ColorZilla</a> offers an extension (<a href="http://www.colorzilla.com/chrome">Chrome</a> / <a href="http://www.colorzilla.com/firefox">Firefox</a>) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.</p> +<p>ベースカラーを決める際には、ウェブコンテンツから色を選択できるブラウザ拡張機能が特に便利です。拡張機能の中には、こういった作業を支援するために特別に設計されたものもあります。例えば、ウェブサイトの <a href="http://www.colorzilla.com/">ColorZilla</a> はウェブから色を選ぶためのスポイトツールの拡張機能 (<a href="http://www.colorzilla.com/chrome">Chrome</a> / <a href="http://www.colorzilla.com/firefox">Firefox</a>) を提供しています。また、様々なサイズの領域やページの選択すた領域のピクセルの色の平均を取ることもできます。</p> <div class="note"> -<p>The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.</p> +<p>色の平均を取る利点は、一見同じ色に見えるものが、実際には驚くほど多様な数の関連色が協調して使用され、目的の効果を生み出すために混色されていることが多いためです。これらのピクセル内から 1 つだけ選んでしまうと、それだけでは非常に場違いな色になることがあります。</p> </div> -<h4 id="Fleshing_out_the_palette" name="Fleshing_out_the_palette">Fleshing out the palette</h4> +<h4 id="Fleshing_out_the_palette" name="Fleshing_out_the_palette">パレットを豊かにする</h4> -<p>Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See {{anch("Color and accessibility")}} for a brief explanation of why this matters.</p> +<p>ベースカラーが決まれば、ベースカラーに色理論を適用して、ベースカラーと一緒に使用する適切なカラーパレットを構築します。さらなる適切な色の決定に役立つオンラインツールもたくさんあります。これらの多くはフィルターをかけた色表示もサポートしているので、さまざまな色盲の人がどう見えるかを確認できます。これがなぜ重要なのかについては、{{anch("Color and accessibility", "色とアクセシビリティ")}}で簡単に説明しています。</p> -<p>A few examples (all free to use as of the time this list was last revised):</p> +<p>以下はいくつかの例 (このリストが最終改訂された時点では、すべて無料で使用できるもの) です。</p> <ul> - <li><a href="/ja/docs/Web/CSS/CSS_Colors/Color_picker_tool">MDN's color picker tool</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Colors/Color_picker_tool">MDN のカラーピッカーツール</a></li> <li><a href="http://paletton.com">Paletton</a></li> - <li><a href="https://color.adobe.com/create/color-wheel">Adobe Color CC online color wheel</a></li> + <li><a href="https://color.adobe.com/create/color-wheel">Adobe Color CC オンライン色相環</a></li> </ul> -<p>When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you'll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.</p> +<p>パレットをデザインする際には、これらのツールが典型的に生成する色に加えて、白 (またはほぼ白)、黒 (またはほぼ黒)、グレーの濃淡などの中核となる中性的な色を加える必要があることも念頭に置いてください。</p> <div class="note"> -<p>Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.</p> +<p>通常は、可能な限り色の数を少なくした方がはるかに良くなります。ページ上の全てに色を加えるのではなく色をアクセントに使うと、内容が読みやすくなり使った色のインパクトが増します。</p> </div> -<h3 id="Color_theory_resources" name="Color_theory_resources">色の理論に関する参考文献</h3> +<h3 id="Color_theory_resources" name="Color_theory_resources">色理論に関する参考文献</h3> -<p>A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:</p> +<p>色理論の全面的な履修はこの記事の範囲を超えていますが、色理論に関する記事も豊富に用意されており、最寄りの学校や大学にも講座があるでしょうから、ぜひ参考にしてみてください。色理論に関する有用なリソースをいくつかご紹介します。</p> <dl> - <dt><a href="https://www.khanacademy.org/partner-content/pixar/color">Color Science</a> (<a href="https://www.khanacademy.org/">Khan Academy</a> in association with <a href="https://www.pixar.com/">Pixar</a>)</dt> - <dd>An online course which introduces concepts such as what color is, how it's percieved, and how to use colors to express ideas. Presented by Pixar artists and designers.</dd> - <dt>{{interwiki("wikipedia", "Color theory")}} on Wikipedia</dt> - <dd>Wikipedia's entry on color theory, which has a lot of great information from a technical perspective. It's not really a resource for helping you with the color sleection process, but is still full of useful information.</dd> + <dt><a href="https://www.khanacademy.org/partner-content/pixar/color">Color Science</a> (<a href="https://www.khanacademy.org/">カーンアカデミー</a> と <a href="https://www.pixar.com/">ピクサー</a> の共著)</dt> + <dd>色とは何か、色の認識のされ方、色を使ったアイデアの表現方法などの概念を紹介するオンライン講座です。ピクサーのアーティストやデザイナーが講師を務めています。</dd> + <dt>Wikipedia の {{interwiki("wikipedia", "Color theory")}}</dt> + <dd>ウィキペディアの色理論に関する記事で、技術的観点の素晴らしい情報がたくさんあります。色選びの参考にはなりませんが、有用な情報が満載です。</dd> </dl> <h3 id="Color_and_accessibility" name="Color_and_accessibility">色とアクセシビリティ</h3> -<p>There are several ways color can be an {{Glossary("accessibility")}} problem. Improper or careless use of color can result in a web site or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it's important to consider your use of color carefully.</p> +<p>色が {{Glossary("accessibility", "アクセシビリティ")}} の問題となることがあります。色の不適切及び不注意な使用は、利用者の何割かが適切に使用できないウェブサイトやアプリになり、トラフィックの損失、ビジネスの損失、さらには広報の問題につながる可能性があります。そのため、色の使い方を慎重に検討することは重要です。</p> -<p>You should do at least basic research into {{interwiki("wikipedia", "color blindness")}}. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.</p> +<p>少なくとも {{interwiki("wikipedia", "色覚異常")}} についての基礎的な研究はしておいた方が良いでしょう。いくつかの種類がありますが、最も一般的なのは赤緑色覚異常で、赤と緑の色を区別しづらいものです。他にも、特定の色の違いを見分けることができないものから、全く色が見えないものまであります。</p> <div class="note"> -<p>The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what's happening.</p> +<p>最も重要なルール: 色だけで情報を知る手段を使ってはいけません。例えば、ある操作の成功や失敗を示すために、図形の色を白から緑、失敗を示すために赤に変えた場合、赤緑の色盲のユーザーはサイトを適切に利用できません。代わりにテキストと色を併用すれば、誰もが起こったことを理解できるようになるでしょう。</p> </div> -<p>For more information about color blindness, see the following articles:</p> +<p>色覚異常については、以下の記事をご覧ください。</p> <ul> - <li><a href="https://medlineplus.gov/colorblindness.html">Medline Plus: Color Blindness</a> (United States National Institute of Health)</li> + <li><a href="https://medlineplus.gov/colorblindness.html">Medline Plus: Color Blindness</a> (<span class="module__title__link">アメリカ国立衛生研究所)</span></li> <li><a href="https://www.aao.org/eye-health/diseases/what-is-color-blindness">American Academy of Ophthamology: What Is Color Blindness?</a></li> - <li><a href="https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html">Color Blindness & Web Design</a> (Usability.gov: United States Department of Health and Human Services)</li> + <li><a href="https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html">Color Blindness & Web Design</a> (Usability.gov: アメリカ保健福祉省)</li> </ul> <h3 id="Palette_design_example" name="Palette_design_example">パレットデザインの例</h3> -<p>Let's consider a quick example of selecting an appropriate color palette for a site. Imagine that you're building a web site for a new game that takes place on the planet Mars. So let's do a <a href="https://www.google.com/search?q=Mars&tbm=isch">Google search for photos of Mars</a>. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet's surface. We use a color picker tool to select a sample of the color we choose.</p> +<p>サイトの適切なカラーパレットを選ぶにあたって、簡単な例を考えてみましょう。火星で開かれる新しいゲームのウェブサイトを構築すると想像してみてください。そこで、<a href="https://www.google.com/search?q=Mars&tbm=isch">火星の写真を Google 検索</a>してみましょう。火星のカラーリングの良い例がたくさんあるはずです。私たちは慎重にモックアップや映画の写真を避け、火星で撮影された写真を使うことにしました。そして、このゲームは惑星の表面で行われるため、人類が過去数十年にわたって表面に滞在させている火星着陸機の一つが撮影した写真を使用することにしました。カラーピッカーツールを使って、この選んだ色のサンプルを採ります。</p> -<p>Using an eyedropper tool, we identify a color we like and determine that the color in question is <code>#D79C7A</code>, which is an appropriate rusty orange-red color that's so stereotypical of the Martian surface.</p> +<p>スポイトツールを使って好みの色を特定し、件の色は <code>#D79C7A</code> であることを確認しました。これは火星表面のステレオタイプな錆びたオレンジレッドの色です。</p> -<p>Having selected our base color, we need to build out our palette. We decide to use <a href="http://www.paletton.com/">Paletton</a> to come up with the other colors we need. Upon opening Paletton, we see:</p> +<p>ベースカラーを選択したら、パレットを構築する必要があります。そこで、<a href="http://www.paletton.com/">Paletton </a>を使って他の色を考えてみることにしました。Plaetton を開くと、以下のような画面が出てきます。</p> <p><img alt="Right after loading Paletton." src="https://mdn.mozillademos.org/files/15451/paletton1.png" style="height: 361px; width: 600px;"></p> -<p>Next, we enter our color's hex code (<code>D79C7A</code>) into the "Base RGB" box at the bottom-left corner of the tool:</p> +<p>次に、ツールの左下隅にある "Base RGB" の欄に色の 16 進数コード (<code>D79C7A</code>) を入力します。</p> <p><img alt="After entering base color" src="https://mdn.mozillademos.org/files/15453/paletton2.png" style="height: 361px; width: 600px;"></p> -<p>We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the "add complementary" toggle underneath the menu that lets you select the palette type (currently "Monochromatic"). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is <code>#508D7C</code>.</p> +<p>火星の写真から選んだ色をベースにした単色パレットが出てきました。何らかの理由で関連色がたくさん必要な場合は、そういった色も良い色になる可能性はあります。しかし、私たちが本当に欲しいのはアクセントカラー、ベースカラーに添えて目立つ色です。これを見つけるには、パレットの種類の選択メニューにある "add complementary" のトグル (現在は "Monochromatic") をクリックします。右下のアクセントカラーをクリックすると、補色が <code>#508D7C</code> であることが計算されます。</p> <p><img alt="Now with complementary colors included." src="https://mdn.mozillademos.org/files/15455/paletton3.png" style="height: 361px; width: 600px;"></p> -<p>If you're unhappy with the color that's proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don't like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:</p> +<p>提案された色が気に入らない場合は、配色を変更して、もっと良さそうな色を確かめることができます。例えば、提案の緑青色が気に入らない場合、トライアド配色のアイコンをクリックすれば以下のように表示されます。</p> <p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15457/paletton4.png" style="height: 361px; width: 600px;"></p> -<p>That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's <code>#556E8D</code>. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:</p> +<p>右上のあの灰色っぽい青はなかなか良さそうですね。クリックすると、<code>#556E8D</code> でした。これをアクセントカラーとして、見出しやタブの強調表示のようにものを目立たせる目的で控えめに使用します。</p> <p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15459/paletton-color-detail.png" style="height: 370px; width: 526px;"></p> -<p>Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.</p> +<p>これで、ベースカラーとアクセントカラーができました。さらに、グラデーションなどが必要な場合に備えて、それぞれの色の補色をいくつか用意します。これらの色を後から利用できるように、何らかの形式で出力しておきます。</p> -<p>Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there's just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It's easy to go too far in one way or another so be sure to get feedback on your colors once you've selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.</p> +<p>これらの色を決めてなお、適切な中性的カラーも選択する必要があります。一般的なデザインでは、テキストが鮮明で読みやすい十分なコントラストがありつつ、目に厳しいほどのコントラストではないというスイートスポットを見つけようとします。どちらかの方に行き過ぎてしまいがちなので、色を選んで使用例に着手したら、必ずフィードバックをもらうようにしましょう。コントラストが低すぎるとテキストが背景に洗い流されて読めなくなりがちです。またコントラストが高すぎると、ユーザーはサイトを見ているだけで、見栄えが悪く不愉快に感じるでしょう。</p> -<h3 id="Color_backgrounds_contrast_and_printing">Color, backgrounds, contrast, and printing</h3> +<h3 id="色、背景、コントラスト、印刷">色、背景、コントラスト、印刷</h3> -<p>What looks good on screen may look very different on paper. In addition, ink can be expensive, and if a user is printing your page, they don't necessarily need all the backgrounds and such using up their precious ink when all that matters is the text itself. Most browsers, by default, remove background images when printing documents.</p> +<p>画面上では良いように見えるものが、紙の上では全く違って見えるかもしれません。さらに、往々にしてインクは高価なものです。ユーザーがページを印刷している場合、重要なのはテキストであるにも関わらず、背景すべてが貴重なインクを使い切るわけにはいきません。ほとんどのブラウザはデフォルトで、ドキュメント印刷時に背景画像を除きます。</p> -<p>If your background colors and images have been selected carefully and/or are crucial to the usefulness of the content, you can use the CSS {{cssxref("color-adjust")}} property to tell the browser that it should not make adjustments to the appearance of content.</p> +<p>背景色や画像が慎重に選択されている場合や、背景がコンテンツの有用性に決定的な影響を与える場合、CSS {{cssxref("color-adjust")}} プロパティを使用して、コンテンツの外観を調整しないようにブラウザに指示できます。</p> -<p>The default value of <code>color-adjust</code>, <code>economy</code>, indicates that the browser is allowed to make appearance changes as it deems necessary in order to try to optimize the legibility and/or print economy of the content, given the type of output device the document is being drawn onto.</p> +<p><code>color-adjust</code>、<code>economy</code> のデフォルト値は、ブラウザが必要に応じて外観を変更することができるかどうかを示します。ブラウザはドキュメントを描画する出力デバイスの種類に応じて、コンテンツの読みやすさや印刷の経済効率を最適化しようとします。</p> -<p>You can set <code>color-adjust</code> to <code>exact</code> to tell the browser that the element or elements on which you use it have been designed specifically to best work with the colors and images left as they are. With this set, the browser won't tamper with the appearance of the element, and will draw it as indicated by your CSS.</p> +<p><code>color-adjust</code> を <code>exact</code> にすると、色や画像があった場合でも、それを使用することで適した動作の要素になる特別なデザインであることを、ブラウザに伝えられます。これを設定すると、ブラウザは要素の外観に手を加えることなく、CSS で指定された通りに要素を描画します。</p> <div class="note"> -<p><strong>Note:</strong> There is no guarantee, though, that <code>color-adjust: exact</code> will result in your CSS being used exactly as given. If the browser provides user preferences to change the output (such as a "don't print backgrounds" checkbox in a print dialog box), that overrides the value of <code>color-adjust</code>.</p> +<p><strong>注意:</strong> <code>color-adjust: exact</code> を与えても CSS がその通りに使用されるとは限りません。ブラウザ出力を変更するユーザー設定 (印刷ダイアログボックスの「背景をプリントしない」チェックボックスなど) が提供されている場合、<code>color-adjust</code> の値はそれによって上書きされます。</p> </div> <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li> - <li><a href="/ja/docs/Web/Guide/Graphics">Graphics on the web</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Colors/Color_picker_tool">MDN's color picker tool</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">グラフィックの描画</a></li> + <li><a href="/ja/docs/Web/Guide/Graphics">ウェブのグラフィック</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Colors/Color_picker_tool">MDN のカラーピッカーツール</a></li> </ul> diff --git a/files/ko/learn/css/building_blocks/상자_모델/index.html b/files/ko/learn/css/building_blocks/상자_모델/index.html index aafc0a5241..eec5f2b929 100644 --- a/files/ko/learn/css/building_blocks/상자_모델/index.html +++ b/files/ko/learn/css/building_blocks/상자_모델/index.html @@ -2,9 +2,9 @@ title: 상자 모델 slug: Learn/CSS/Building_blocks/상자_모델 tags: + - CSS - 디스플레이 - 상자 모델 - - 씨에스에스 - 여백 - 초보자 - 테두리 @@ -14,69 +14,69 @@ translation_of: Learn/CSS/Building_blocks/The_box_model --- <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div> -<p>씨에스에스에 포함되는 모든 요소의 외장은 상자이며, 이 상자를 이해하는 것은 씨에스에스 조판을 생성하거나, 항목을 다른 항목과 대비해 정렬 능력을 갖추게 해주는 열쇠입니다. 이번 단원에서 우리는 씨에스에스 <em>상자 모델</em>을 제대로 살펴보겠습니다. 상자의 작동 방식과 상자와 관련된 용어를 이해함으로써 더 복잡한 조판 작업으로 넘어갈 수 있도록합니다.</p> +<p>CSS에 포함되는 모든 요소의 외장은 박스이며, 이 박스를 이해하는 것은 CSS을 통해 레이아웃을 생성하거나, 아이템과 다른 아이템을 정렬하는 것을 가능하게 하는 열쇠입니다. 이번 단원에서 우리는 CSS 박스<em>모델</em>을 제대로 살펴보겠습니다. 박스의 작동 방식과 박스와 관련된 용어를 이해함으로써 더 복잡한 레이아웃 작업으로 넘어갈 수 있도록합니다.</p> <table class="learn-box standard-table"> <tbody> <tr> <th scope="row">선결 사항:</th> - <td>기본 컴퓨터 활용 능력<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업에 대한 기본 지식</a>, 에이치티엠엘 기본기 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">에이치티엠엘</a> 학습), 씨에스에스 작동 방식에 대한 개념 (<a href="/en-US/docs/Learn/CSS/First_steps">씨에스에스 첫 단계</a> 학습.) 등에 대한 기본 지식</td> + <td>기본 컴퓨터 활용 능력<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업에 대한 기본 지식</a>, HTML 기본기 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML</a> 학습), CSS 작동 방식에 대한 개념 (<a href="/en-US/docs/Learn/CSS/First_steps">CSS 첫 단계</a> 학습.) 등에 대한 기본 지식</td> </tr> <tr> <th scope="row">목표:</th> - <td>씨에스에스 상자 모델, 상자 모델을 구성하고 대체 모델로 전환하는 방법에 대해 학습합니다.</td> + <td>CSS 박스 모델, 박스 모델을 구성하고 대체 모델로 전환하는 방법에 대해 학습합니다.</td> </tr> </tbody> </table> -<h2 id="블록_및_인라인_상자">블록 및 인라인 상자</h2> +<h2 id="블록_및_인라인_박스">블록 및 인라인 박스</h2> -<p>씨에스에스에는 크게 두 가지 상자(<strong>블록 상자</strong>와 <strong>인라인 상자</strong>) 유형이 있습니다. 이러한 특성은 상자가 페이지 대열 측면 및 페이지의 다른 상자와 관련하여 상자의 작동 방식을 나타냅니다.</p> +<p>CSS에는 크게 두 가지 박스(<strong>블록 박스</strong>와 <strong>인라인 박스</strong>) 유형이 있습니다. 이러한 특성은 박스가 페이지 대열 측면 및 페이지의 다른 박스와 관련하여 박스의 작동 방식을 나타냅니다.</p> -<p>상자가 블록으로 정의되면 다음과 같은 방식으로 동작합니다:</p> +<p>박스가 블록으로 정의되면 다음과 같은 방식으로 동작합니다:</p> <ul> - <li>상자는 인라인 방향으로 연장되어 상위 콘테이너에서 사용 가능한 공간을 채웁니다. 대부분은 경우 이것은 상자가 사용 가능한 공간을 100%로 채우면서 상위 콘테이너 너비만큼 된다는 의미입니다.</li> - <li>상자는 새 줄로 행갈이를 합니다.</li> + <li>박스는 인라인 방향으로 연장되어 상위 콘테이너에서 사용 가능한 공간을 채웁니다. 대부분은 경우 이것은 박스가 사용 가능한 공간을 100%로 채우면서 상위 콘테이너 너비만큼 된다는 의미입니다.</li> + <li>박스는 새 줄로 행갈이를 합니다.</li> <li>{{cssxref("width")}}와 {{cssxref("height")}} 속성은 존중됩니다.</li> - <li>패딩과 여백, 테두리로 인해 다른 요소들이 상자로부터 밀려납니다.</li> + <li>패딩과 여백, 테두리로 인해 다른 요소들이 박스로부터 밀려납니다.</li> </ul> <p>여러분이 디스플레이 유형은 인라인으로 변경하지 않는 한 머리글(<code><h1></code>)과 <code><p></code>)와 같은 요소는 모두 기본값으로 외부 디스플레이 유형을 <code>block</code> 사용합니다.</p> -<p>상자의 외부 디스플레이 유형이 <code>inline</code>일 경우:</p> +<p>박스의 외부 디스플레이 유형이 <code>inline</code>일 경우:</p> <ul> - <li>상자는 새 줄로 행갈이를 하지 않습니다.</li> + <li>박스는 새 줄로 행갈이를 하지 않습니다.</li> <li>{{cssxref("width")}}와 {{cssxref("height")}} 속성은 적용되지 않습니다.</li> - <li>패딩과 여백, 테두리는 다른 인라인 상자들이 당 상자로부터 멀어지지게 하지 않습니다.</li> + <li>패딩과 여백, 테두리는 다른 인라인 박스들이 당 박스로부터 멀어지지게 하지 않습니다.</li> </ul> <p>링크용 <code><a></code> 요소와 <code><span></code>, <code><em></code> 및 <code><strong></code> 요소는 모두 기본적으로 인라인으로 표시됩니다.</p> -<p>요소에 적용되는 상자 유형은 <code>block</code> 및 <code>inline</code>과 같은 {{cssxref("display")}} 속성 값으로 정의되며. 아울러 그것은 <code>display</code>의 <strong>outer</strong> 값과 관련이 있습니다.</p> +<p>요소에 적용되는 박스 유형은 <code>block</code> 및 <code>inline</code>과 같은 {{cssxref("display")}} 속성 값으로 정의되며. 아울러 그것은 <code>display</code>의 <strong>outer</strong> 값과 관련이 있습니다.</p> <h2 id="구분_내부_및_외부_디스플레이_유형">구분: 내부 및 외부 디스플레이 유형</h2> -<p>이 시점에 우리는 <strong>내부</strong> 및 <strong>외부</strong> 디스플레이 유형에 대해 설명하는 게 좋겠습니다. 위에서 언급했듯이 씨에스에스의 상자는 <em>외부</em> 디스플레이 유형을 가지며, 이는 상자가 블록인지 인라인인지를 자세히 설명합니다.</p> +<p>이 시점에 우리는 <strong>내부</strong> 및 <strong>외부</strong> 디스플레이 유형에 대해 설명하는 게 좋겠습니다. 위에서 언급했듯이 CSS의 박스는 <em>외부</em> 디스플레이 유형을 가지며, 이는 박스가 블록인지 인라인인지를 자세히 설명합니다.</p> -<p>그러나 상자에는 <em>내부</em> 디스플레이 유형도 있으며 당 상자 내부의 요소가 배치되는 방법을 나타냅니다. 기본적으로 상자 내부의 요소는 <strong><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">일반 대열</a></strong>로 배치되며, 이는 (위에서 설명한 바와 같이) 여타 블록 및 인라인 요소와 마찬가지로 작동한다는 것을 의미합니다.</p> +<p>그러나 박스에는 <em>내부</em> 디스플레이 유형도 있으며 당 박스 내부의 요소가 배치되는 방법을 나타냅니다. 기본적으로 박스 내부의 요소는 <strong><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">일반 대열</a></strong>로 배치되며, 이는 (위에서 설명한 바와 같이) 여타 블록 및 인라인 요소와 마찬가지로 작동한다는 것을 의미합니다.</p> -<p>그러나 여러분은 <code>flex</code>과 같은 <code>display</code> 값을 사용하여 내부 디스플레이 유형을 변경할 수 있습니다. 어떤 요소에 우리가 <code>display: flex;</code>를 설정하면 외부 디스플레이 유형은 블록이지만 내부 디스플레이 유형은 <ruby><code>flex</code><rp> (</rp><rt>가변</rt><rp>) </rp></ruby>으로 변경됩니다. 이 상자의 직계 자식은 가변 항목이 되고, 나중에 익히게 될 <a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">가변상자</a> 규격에 명시된 규칙에 따라 배치됩니다.</p> +<p>그러나 여러분은 <code>flex</code>과 같은 <code>display</code> 값을 사용하여 내부 디스플레이 유형을 변경할 수 있습니다. 어떤 요소에 우리가 <code>display: flex;</code>를 설정하면 외부 디스플레이 유형은 블록이지만 내부 디스플레이 유형은 <ruby><code>flex</code><rp> (</rp><rt>가변</rt><rp>) </rp></ruby>으로 변경됩니다. 이 박스의 직계 자식은 가변 항목이 되고, 나중에 익히게 될 <a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">가변박스</a> 규격에 명시된 규칙에 따라 배치됩니다.</p> <div class="blockIndicator note"> -<p><strong>참고</strong>: 디스플레이 속성 값 및 상자가 블록 및 인라인 조판에서 작동하는 방법에 대해 자세히 보려면 <a href="/ko/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">블록 및 인라인 조판</a>에 대한 모질라 개발자 네트워크 가이드를 참조하십시오.</p> +<p><strong>참고</strong>: 디스플레이 속성 값 및 박스가 블록 및 인라인 레이아웃에서 작동하는 방법에 대해 자세히 보려면 <a href="/ko/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">블록 및 인라인 레이아웃</a>에 대한 모질라 개발자 네트워크 가이드를 참조하십시오.</p> </div> -<p>씨에스에스 조판에 대해 자세한 내용을 배우려면 다음번에는 예로 <code>flex</code>나 <code><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>같은 상자가 취할 수 있는 그 밖의 다양한 내부 속성 값을 마주치게 될 겁니다.</p> +<p>CSS 레이아웃에 대해 자세한 내용을 배우려면 다음번에는 예로 <code>flex</code>나 <code><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>같은 박스가 취할 수 있는 그 밖의 다양한 내부 속성 값을 마주치게 될 겁니다.</p> -<p>그러나 블록 및 인라인 조판이 웹상에 사물이 행동하는 기본값입니다. 앞서 언급했듯이 그럴 일컬어 <ruby><em>normal flow</em><rp> (</rp><rt>일반 대열</rt><rp>) </rp></ruby>이라고 합니다. 그렇게 부르는 까닭은 다른 지시 사항이 없으면 상자는 블록 또는 인라인 상자로 배치되기 때문입니다.</p> +<p>그러나 블록 및 인라인 레이아웃이 웹상에 사물이 행동하는 기본값입니다. 앞서 언급했듯이 그럴 일컬어 <ruby><em>normal flow</em><rp> (</rp><rt>일반 대열</rt><rp>) </rp></ruby>이라고 합니다. 그렇게 부르는 까닭은 다른 지시 사항이 없으면 박스는 블록 또는 인라인 박스로 배치되기 때문입니다.</p> <h2 id="서로_다른_디스플레이_유형의_예">서로 다른 디스플레이 유형의 예</h2> -<p>계속해서 몇 가지 예를 살펴보겠습니다. 아래에 우리는 세 개의 서로 다른 에이치티엠엘 요소가 있으며, 모두 외부 디스플레이 유형이 <code>block</code>입니다. 첫 번째 단락은 씨에스에스에 테두리가 추가된 단락입니다. 브라우저는 이걸 블록 상자로 렌더링하므로 단락은 새 줄에서 시작되며 확보된 너비 전체까지 확장할 겁니다.</p> +<p>계속해서 몇 가지 예를 살펴보겠습니다. 아래에 우리는 세 개의 서로 다른 HTML 요소가 있으며, 모두 외부 디스플레이 유형이 <code>block</code>입니다. 첫 번째 단락은 CSS에 테두리가 추가된 단락입니다. 브라우저는 이걸 블록 박스로 렌더링하므로 단락은 새 줄에서 시작되며 확보된 너비 전체까지 확장할 겁니다.</p> -<p>두 번째는 <code>display: flex</code> 사용해 배치된 목록입니다. 이 예제는 컨테이너 내부의 항목에 대해 가변 조판을 수립하지만, 목록 자체는 블록 상자이며 단락과 같이 전체 컨테이너 너비로 확장되어 새 줄로 행갈이를 합니다.</p> +<p>두 번째는 <code>display: flex</code> 사용해 배치된 목록입니다. 이 예제는 컨테이너 내부의 항목에 대해 가변 레이아웃을 수립하지만, 목록 자체는 블록 박스이며 단락과 같이 전체 컨테이너 너비로 확장되어 새 줄로 행갈이를 합니다.</p> <p>바로 아래에 우리는 블록 수준 단락을 하나 갖고 있으며 그 안에 두 개의 <code><span></code> 요소가 있습니다. 이들 요소는 보통 <code>inline</code>이겠지만, 그 중 하나에 블록 클래스에 있습니다. 우리가 그걸 미리 <code>display: block</code>로 설정했으니까요.</p> @@ -84,7 +84,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p>우리는 다음 예제에서 <code>inline</code> 요소가 어떻게 동작하는지 볼 수 있습니다. 첫 번째 단락에서 <code><span></code>는 기본값으로 인라인으므로 새 줄 행갈이를 강제하지 않습니다.</p> -<p><code>display: inline-flex</code>로 설정된 <code><ul></code> 요소도 갖고 있는데, 이는 몇 가지 가변 항목 주변에 인라인 상자를 생성합니다.</p> +<p><code>display: inline-flex</code>로 설정된 <code><ul></code> 요소도 갖고 있는데, 이는 몇 가지 가변 항목 주변에 인라인 박스를 생성합니다.</p> <p>마지막으로 <code>display: inline</code>으로 설정된 두 단락이 있습니다. 인라인 가변 컨테이너와 단락은 모두 하나의 라인에서 하나로 진행하지 블록 수준 요소처럼 표시하기 위해 새 줄로 행갈이를 하지 않습니다.</p> @@ -92,36 +92,36 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}}</p> -<p>나중에 해당 단원에서 가변 조판과 같은 것들을 접하게 될 것입니다. 당장 기억해야 할 핵심은 <code>display</code> 속성 값을 변경하면 상자의 외부 디스플레이 유형이 블록인지 인라인인지를 변경하여, 조판 속 다른 요소 주위에 자신을 표시하는 방법이 달라진다는 것입니다.</p> +<p>나중에 해당 단원에서 가변 레이아웃과 같은 것들을 접하게 될 것입니다. 당장 기억해야 할 핵심은 <code>display</code> 속성 값을 변경하면 박스의 외부 디스플레이 유형이 블록인지 인라인인지를 변경하여, 레이아웃 속 다른 요소 주위에 자신을 표시하는 방법이 달라진다는 것입니다.</p> <p>나머지 수업에서는 외부 디스플레이 유형에 집중할 것이다.</p> -<h2 id="씨에스에스_박스_모델이란_무엇인가">씨에스에스 박스 모델이란 무엇인가?</h2> +<h2 id="CSS_Box_Model이란_무엇인가">CSS Box Model이란 무엇인가?</h2> -<p>전체 씨에스에스 상자 모델은 블록 상자에 적용되며, 인라인 상자는 상자 모델에 정의된 일부 동작만 사용합니다. 이 모델은 당신이 페이지에서 볼 수 있는 상자를 생성하기 위해 상자의 서로 다른 부분인 여백, 테두리, 패딩 및 콘텐츠등이 어떻게 함께 작동할 것인지를 정의합니다. 몇 가지 복잡성을 추가하기 위해 표준 및 대체 상자 모델이 있습니다.</p> +<p>전체 CSS box model은 블록 박스에 적용되며, 인라인 박스는 박스 모델에 정의된 일부 동작만 사용합니다. 이 모델은 당신이 페이지에서 볼 수 있는 박스를 생성하기 위해 박스의 서로 다른 부분인 여백, 테두리, 패딩 및 콘텐츠등이 어떻게 함께 작동할 것인지를 정의합니다. 몇 가지 복잡성을 추가하기 위해 표준 및 대체 박스 모델이 있습니다.</p> -<h3 id="상자의_구성">상자의 구성</h3> +<h3 id="Box의_구성">Box의 구성</h3> -<p>씨에스에스 블록 상자 구성하기 위한 우리의 준비물은:</p> +<p>CSS 블록 박스 구성하기 위한 우리의 준비물은:</p> <ul> - <li><strong>콘텐츠 상자</strong>: 당신의 콘텐츠가 표시되는 영역으로 그 크기는 {{cssxref("width")}} and {{cssxref("height")}}와 같은 속성을 사용해서 정할 수 있습니다.</li> - <li><strong>패딩 상자</strong>: 패딩은 콘텐츠 주변을 마치 공백처럼 자리잡습니다. 패딩의 크기는 {{cssxref("padding")}}와 관련 속성을 사용해 제어할 수 있습니다.</li> - <li><strong>테두리 상자</strong>: 테두리 상자는 콘텐츠와 패딩까지 둘러쌉니다. 테두리의 크기와 스타일은 {{cssxref("border")}}와 관련 속성을 사용하여 제어할 수 있습니다.</li> - <li><strong>여백 상자</strong>: 여백은 가장 바깥 쪽 레이어로 콘텐츠와 패딩, 테두리를 둘러싸면서 당 상자와 다른 요소 사이 공백 역할을 합니다. 여백 상자의 크기는 {{cssxref("margin")}}와 관련 속성을 사용하여 제어될 수 있습니다.</li> + <li><strong>콘텐츠 박스</strong>: 당신의 콘텐츠가 표시되는 영역으로 그 크기는 {{cssxref("width")}} and {{cssxref("height")}}와 같은 속성을 사용해서 정할 수 있습니다.</li> + <li><strong>패딩 박스</strong>: 패딩은 콘텐츠 주변을 마치 공백처럼 자리잡습니다. 패딩의 크기는 {{cssxref("padding")}}와 관련 속성을 사용해 제어할 수 있습니다.</li> + <li><strong>테두리 박스</strong>: 테두리 박스는 콘텐츠와 패딩까지 둘러쌉니다. 테두리의 크기와 스타일은 {{cssxref("border")}}와 관련 속성을 사용하여 제어할 수 있습니다.</li> + <li><strong>여백 박스</strong>: 여백은 가장 바깥 쪽 레이어로 콘텐츠와 패딩, 테두리를 둘러싸면서 당 박스와 다른 요소 사이 공백 역할을 합니다. 여백 박스의 크기는 {{cssxref("margin")}}와 관련 속성을 사용하여 제어될 수 있습니다.</li> </ul> <p>아래 도표는 이들 레이어를 보여줍니다.</p> <p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p> -<h3 id="표준_씨에스에스_상자_모델">표준 씨에스에스 상자 모델</h3> +<h3 id="표준_CSS_box_model">표준 CSS box model</h3> -<p>표준 상자 모델에서 상자에서 <code>width</code>와 <code>height</code>를 부여하면 <em>content box</em>의 너비와 높이가 정의됩니다. 그런 다음 패딩과 테두리는 상자의 너비와 높이에 추가되여 상자가 점유하는 전체 크기가 정해집니다. 그 내용이 아래 이미지에서 제시되었습니다.</p> +<p>표준 box model에서 box에서 <code>width</code>와 <code>height</code>를 부여하면 <em>content box</em>의 너비와 높이가 정의됩니다. 그런 다음 패딩과 테두리는 박스의 너비와 높이에 추가되여 박스가 점유하는 전체 크기가 정해집니다. 그 내용이 아래 이미지에서 제시되었습니다.</p> -<p>우리는 상자의 <code>width</code>와 <code>height</code>, <code>margin</code>과 <code>border</code> 및 <code>padding</code> 씨에스에스 값이 다음과 같이 지정되어 있다고 간주합니다:</p> +<p>우리는 박스의 <code>width</code>와 <code>height</code>, <code>margin</code>과 <code>border</code> 및 <code>padding</code> CSS 값이 다음과 같이 지정되어 있다고 간주합니다:</p> -<pre class="brush: css">.box { +<pre class="brush: css notranslate">.box { width: 350px; height: 150px; margin: 25px; @@ -130,29 +130,29 @@ translation_of: Learn/CSS/Building_blocks/The_box_model } </pre> -<p>표준 박스 모델을 사용하여 상자가 차지하는 공간은 실제로 너비 410px(350 + 25 + 25 + 5 + 5), 높이 210px(150 + 25 + 25 + 5 + 5)가 될 것인데, 양쪽 패딩과 테두리는 콘텐츠 상자에 사용되는 너비에 더해지기 때문입니다.</p> +<p>표준 박스 모델을 사용하여 박스가 차지하는 공간은 실제로 너비 410px(350 + 25 + 25 + 5 + 5), 높이 210px(150 + 25 + 25 + 5 + 5)가 될 것인데, 양쪽 패딩과 테두리는 콘텐츠 박스에 사용되는 너비에 더해지기 때문입니다.</p> <p><img alt="Showing the size of the box when the standard box model is being used." src="https://mdn.mozillademos.org/files/16559/standard-box-model.png" style="height: 300px; width: 500px;"></p> <div class="blockIndicator note"> -<p><strong>참고</strong>: 여백은 상자의 실제 크기에 포함되지 않습니다. 물론 여백은 상자가 페이지에서 차지하는 총 공간에 영향을 미치지만, 상자의 외부 공간에만 영향을 미칩니다. 상자의 영역은 테두리에서 멈추게 됩니다. 여백으로 확장되지 않습니다.</p> +<p><strong>참고</strong>: 여백은 박스의 실제 크기에 포함되지 않습니다. 물론 여백은 박스가 페이지에서 차지하는 총 공간에 영향을 미치지만, 박스의 외부 공간에만 영향을 미칩니다. 박스의 영역은 테두리에서 멈추게 됩니다. 여백으로 확장되지 않습니다.</p> </div> -<h3 id="대체_씨에스에스_상자_모델">대체 씨에스에스 상자 모델</h3> +<h3 id="대체_CSS_box_model">대체 CSS box model</h3> -<p>상자의 실제 크기를 얻기 위해 테두리와 패딩을 추가하는 것이 다소 불편하다고 생각할 수 있습니다. 당신 말이 옳을 것입니다! 이러한 이유로 씨에스에스는 표준 상자 모델 이후 머지않아 대체 상자 모델이 도입되었습니다. 이 모델을 사용한다면 너비는 페이지에서 표시되는 상자 너비이므로 콘텐츠 영역 너비는 너비에서 패딩 및 테두리 너비를 뺀 너비입니다. 위에서 사용된 것과 동일한 씨에스에스를 아래 결과에 대입하면(폭 = 350px, 높이 = 150px)가 됩니다.</p> +<p>박스의 실제 크기를 얻기 위해 테두리와 패딩을 추가하는 것이 다소 불편하다고 생각할 수 있습니다. 당신 말이 옳을 것입니다! 이러한 이유로 CSS는 표준 박스 모델 이후 머지않아 대체 박스 모델이 도입되었습니다. 이 모델을 사용한다면 너비는 페이지에서 표시되는 박스 너비이므로 콘텐츠 영역 너비는 너비에서 패딩 및 테두리 너비를 뺀 너비입니다. 위에서 사용된 것과 동일한 CSS를 아래 결과에 대입하면(폭 = 350px, 높이 = 150px)가 됩니다.</p> <p><img alt="Showing the size of the box when the alternate box model is being used." src="https://mdn.mozillademos.org/files/16557/alternate-box-model.png" style="height: 240px; width: 440px;"></p> -<p>기본값으로 브라우저는 기본 상자 모델을 사용합니다. 요소에 대체 모델을 활성화하려면 거기에 <code>box-sizing: border-box</code>를 설정하여 그렇게 할 수 있습니다. 이렇게 하면 당신이 설정한 크기에 따라 정의된 영역만큼 테두리 상자가 점유하도록 브라우저에 전달할 수 있습니다.</p> +<p>기본값으로 브라우저는 기본 박스 모델을 사용합니다. 요소에 대체 모델을 활성화하려면 거기에 <code>box-sizing: border-box</code>를 설정하여 그렇게 할 수 있습니다. 이렇게 하면 당신이 설정한 크기에 따라 정의된 영역만큼 테두리 박스가 점유하도록 브라우저에 전달할 수 있습니다.</p> -<pre class="brush: css"><code>.box { +<pre class="brush: css notranslate"><code>.box { box-sizing: border-box; } </code></pre> -<p>모든 요소가 대체 상자 모델을 사용하길 원한다면, (그것이 개발자들의 흔한 선택이기도 합니다) <code><html></code> 요소에 <code>box-sizing</code> 속성을 설정한 다음 아래의 소예제에서 볼 수 있듯이 다른 모든 요소가 해당 값을 상속하도록 설정하십시요. 이런 내용의 뒷배경이 되는 생각을 이해하고 싶다면 <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">상자 크기에 관한 씨에스에스 요령</a> 문서를 참조하십시오.</p> +<p>모든 요소가 대체 박스 모델을 사용하길 원한다면, (그것이 개발자들의 흔한 선택이기도 합니다) <code><html></code> 요소에 <code>box-sizing</code> 속성을 설정한 다음 아래의 소예제에서 볼 수 있듯이 다른 모든 요소가 해당 값을 상속하도록 설정하십시요. 이런 내용의 뒷배경이 되는 생각을 이해하고 싶다면 <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">박스 크기에 관한 CSS 요령</a> 문서를 참조하십시오.</p> -<pre class="brush: css"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span> +<pre class="brush: css notranslate"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span> <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span> <span class="punctuation token">}</span> <span class="selector token">*, *<span class="pseudo-element token">::before</span>, *<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span> @@ -160,14 +160,14 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <span class="punctuation token">}</span></code></pre> <div class="blockIndicator note"> -<p><strong>참고</strong>: 흥미로운 기록이 있습니다. 인터넷 익스플로러는 기본적으로 대체 상자 모델로 사용되었으며 전환할 수있는 메커니즘이 없습니다.</p> +<p><strong>참고</strong>: 흥미로운 기록이 있습니다. 인터넷 익스플로러는 기본적으로 대체 박스 모델로 사용되었으며 전환할 수있는 메커니즘이 없습니다.</p> </div> -<h2 id="상자_모델_부리기">상자 모델 부리기</h2> +<h2 id="박스_모델_부리기">박스 모델 부리기</h2> -<p>아래 예제에서 당신은 상자 2개를 확인할 수 있습니다. 둘 다 <code>.box</code> 클래스에 해당하며 <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, <code>padding</code>에 대해 동일한 값이 주어졌습니다. 유일한 차이라면 두 번째 상자는 대체 상자 모델을 사용하도록 설정되었다는 겁니다.</p> +<p>아래 예제에서 당신은 박스 2개를 확인할 수 있습니다. 둘 다 <code>.box</code> 클래스에 해당하며 <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, <code>padding</code>에 대해 동일한 값이 주어졌습니다. 유일한 차이라면 두 번째 박스는 대체 박스 모델을 사용하도록 설정되었다는 겁니다.</p> -<p><strong>당신은 (<code>.alternate</code> 클래스를 씨에스에스에 추가해) 두 번째 상자 크기를 변경해 첫 번째 상자의 너비와 높이와 일치하도록 할 수 있습니까?</strong></p> +<p><strong>당신은 (<code>.alternate</code> 클래스를 CSS에 추가해) 두 번째 박스 크기를 변경해 첫 번째 박스의 너비와 높이와 일치하도록 할 수 있습니까?</strong></p> <p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}}</p> @@ -175,21 +175,21 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p><strong>참조</strong>: <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">여러분은 이곳에서 동 질문에 대한 답변을 확인할 수 있습니다.</a>.</p> </div> -<h3 id="브라우저_개발자도구를_사용해_상자_모델_보기">브라우저 개발자도구를 사용해 상자 모델 보기</h3> +<h3 id="브라우저_개발자도구를_사용해_박스_모델_보기">브라우저 개발자도구를 사용해 박스 모델 보기</h3> -<p><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">브라우저 개발자 도구</a>를 사용하면 상자 모델을 훨씬 쉽게 이해할 수 있습니다. 파이어폭스의 개발자 도구에서 요소를 검사하면 요소의 크기와 여백, 패딩 및 테두리를 볼 수 있습니다. 이 방법으로 요소를 검사하면 실제로 그것이 당신이 생각하는 크기인지를 알아낼 수 있어 좋은 방법입니다.</p> +<p><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">브라우저 개발자 도구</a>를 사용하면 박스 모델을 훨씬 쉽게 이해할 수 있습니다. 파이어폭스의 개발자 도구에서 요소를 검사하면 요소의 크기와 여백, 패딩 및 테두리를 볼 수 있습니다. 이 방법으로 요소를 검사하면 실제로 그것이 당신이 생각하는 크기인지를 알아낼 수 있어 좋은 방법입니다.</p> <p><img alt="Inspecting the box model of an element using Firefox DevTools" src="https://mdn.mozillademos.org/files/16560/box-model-devtools.png" style="height: 683px; width: 1150px;"></p> <h2 id="여백과_패딩과_테두리">여백과 패딩과 테두리</h2> -<p>상술한 예제에서 여러분은 이미 {{cssxref("margin")}}과 {{cssxref("padding")}}, 그리고 {{cssxref("border")}}를 보았습니다. 이번 예제에서 사용된 속성은 <ruby><strong>약칭</strong><rp>(</rp><rt>shorthands</rt><rp>)</rp></ruby>으로 한꺼번에 상자의 사방면을 설정할 수 있게 해줍니다. 해당 약칭은 또한 동명의 정식 명칭 속성도 있어 상자의 사방면을 개별적으로 제어할 수 있도록 해줍니다.</p> +<p>상술한 예제에서 여러분은 이미 {{cssxref("margin")}}과 {{cssxref("padding")}}, 그리고 {{cssxref("border")}}를 보았습니다. 이번 예제에서 사용된 속성은 <ruby><strong>약칭</strong><rp>(</rp><rt>shorthands</rt><rp>)</rp></ruby>으로 한꺼번에 박스의 사방면을 설정할 수 있게 해줍니다. 해당 약칭은 또한 동명의 정식 명칭 속성도 있어 박스의 사방면을 개별적으로 제어할 수 있도록 해줍니다.</p> <p>해당 속성에 대한 자세한 내용을 탐구해 봅시다.</p> <h3 id="여백">여백</h3> -<p>여백은 상자 주변에 보이지 않는 공간입니다. 여백은 상자로부터 다른 요소를 밀어냅니다. 여백은 양수값 또는 음수값을 가질 수 있습니다. 상자 한쪽 측면에 음수값 여백을 설정하면 페이지의 다른 부분과 공백이 겹칠 수 있습니다. 여러분이 표준 또는 대체 상자 모델을 사용하든지 관계없이 표시되는 상자의 크기를 계산한 후에 항상 여백이 추가됩니다.</p> +<p>여백은 박스 주변에 보이지 않는 공간입니다. 여백은 박스로부터 다른 요소를 밀어냅니다. 여백은 양수값 또는 음수값을 가질 수 있습니다. 박스 한쪽 측면에 음수값 여백을 설정하면 페이지의 다른 부분과 공백이 겹칠 수 있습니다. 여러분이 표준 또는 대체 박스 모델을 사용하든지 관계없이 표시되는 박스의 크기를 계산한 후에 항상 여백이 추가됩니다.</p> <p>우리는 {{cssxref("margin")}} 속성을 사용하여 요소의 사방 여백을 한번에 제어할 수 있으며, 마찬가지로 동명의 정식 명칭 속성을 사용하며 각변의 여백을 제어할 수 있습니다.</p> @@ -200,7 +200,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <li>{{cssxref("margin-left")}}</li> </ul> -<p><strong>아래 예제에서 여백 값을 변경하여 당 요소와 상위 컨테이너 요소 사이의 여백 생성 또는 공간 제거(음의 여백인 경우)로 인해 상자가 어떻게 밀려나는지 확인하십시오.</strong></p> +<p><strong>아래 예제에서 여백 값을 변경하여 당 요소와 상위 컨테이너 요소 사이의 여백 생성 또는 공간 제거(음의 여백인 경우)로 인해 박스가 어떻게 밀려나는지 확인하십시오.</strong></p> <p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}}</p> @@ -208,7 +208,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p>여백 이해의 핵심은 여백 축소에 대한 개념입니다. 여백이 서로 맞닿은 두 개의 요소가 있으면 해당 여백은 합쳐져 하나의 여백이 됩니다. 그 중 가장 큰 여백의 크기가 됩니다.</p> -<p>아래 예제에는 단락 두 개가 있습니다. 상위 단락은 <code>margin-bottom</code> 값이 50픽셀이 주어졌습니다. 두 번째 단락은 <code>margin-top</code> 값이 30픽셀이 주어졌습니다. 전체 여백은 합쳐져 축소되면서 실제 상자 사이 여백은 50픽셀이며, 두 가지 여백을 합계가 되지 않습니다.</p> +<p>아래 예제에는 단락 두 개가 있습니다. 상위 단락은 <code>margin-bottom</code> 값이 50픽셀이 주어졌습니다. 두 번째 단락은 <code>margin-top</code> 값이 30픽셀이 주어졌습니다. 전체 여백은 합쳐져 축소되면서 실제 박스 사이 여백은 50픽셀이며, 두 가지 여백을 합계가 되지 않습니다.</p> <p><strong>여러분은 2번째 단락의 <code>margin-top</code> 값을 0으로 설정해 이를 시험해 볼 수 있습니다. 두 단락 사이 표시되는 여백은 변경되지 않을 것이며, 첫 번째 단락의 <code>bottom-margin</code>에 설정된 50픽셀은 유지됩니다.</strong></p> @@ -218,7 +218,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <h3 id="테두리">테두리</h3> -<p>테두리는 상자의 여백과 패딩 사이에 그려집니다. 표준 상자 모델을 사용하는 경우 테두리의 크기가 상자의 <code>width</code>과 <code>height</code>에 추가됩니다. 대체 상자 모델을 사용하고 있는 경우, 테두리의 크기는 사용 가능한 <code>width</code>와 <code>height</code>의 일부를 점유함으로 콘텐츠 상자가 더 작아지게 됩니다.</p> +<p>테두리는 박스의 여백과 패딩 사이에 그려집니다. 표준 박스 모델을 사용하는 경우 테두리의 크기가 박스의 <code>width</code>과 <code>height</code>에 추가됩니다. 대체 박스 모델을 사용하고 있는 경우, 테두리의 크기는 사용 가능한 <code>width</code>와 <code>height</code>의 일부를 점유함으로 콘텐츠 박스가 더 작아지게 됩니다.</p> <p>테두리를 스타일링의 경우 많은 속성이 있습니다. 4개의 테두리, 각 테두리에는 스타일, 너비 및 색상 등 당신이 변경하고 싶을만한 것들이 있습니다.</p> @@ -275,17 +275,17 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <li>{{cssxref("padding-left")}}</li> </ul> -<p><strong>아래 예제에서 <code>.box</code>클래스에 대한 패딩값을 변경하면 상자와 관계하여 텍스트가 시작되는 지점이 달라지는지 볼 수 있습니다.</strong></p> +<p><strong>아래 예제에서 <code>.box</code>클래스에 대한 패딩값을 변경하면 박스와 관계하여 텍스트가 시작되는 지점이 달라지는지 볼 수 있습니다.</strong></p> -<p><strong>여러분은 또한 <code>.container,</code> 클래스에 대한 패딩을 변경하여 컨테이너와 상자 사이 공간을 만들 수 있습니다. 패딩 변경은 모든 요소에 가능하며 테두리와 요소 내부 공간 사이에 공간을 만듭니다.</strong></p> +<p><strong>여러분은 또한 <code>.container,</code> 클래스에 대한 패딩을 변경하여 컨테이너와 박스 사이 공간을 만들 수 있습니다. 패딩 변경은 모든 요소에 가능하며 테두리와 요소 내부 공간 사이에 공간을 만듭니다.</strong></p> <p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}}</p> -<h2 id="상자_모델과_인라인_상자">상자 모델과 인라인 상자</h2> +<h2 id="박스_모델과_인라인_박스">박스 모델과 인라인 박스</h2> -<p>상술한 모든 내용은 블록 상자에도 100% 적용됩니다. 상술한 속성 중의 일부는 인라인 상자에도 적용할 수 있습니다. 예를 들어 <code><span></code>에 의해 생성된 속성도 그렇습니다.</p> +<p>상술한 모든 내용은 블록 박스에도 100% 적용됩니다. 상술한 속성 중의 일부는 인라인 박스에도 적용할 수 있습니다. 예를 들어 <code><span></code>에 의해 생성된 속성도 그렇습니다.</p> -<p>아래 예제에 한 단락 내부에 <code><span></code>가 있고 거기에 <code>width</code>와 <code>height</code>, 그리고 <code>margin</code>와 <code>border</code>를 적용했습니다. 여러분이 보시다시피 너비와 높이는 무시됩니다. 여백, 패딩 및 테두리는 존치되지만 다른 콘텐츠와 인라인 상자아의 관계를 변경하지 않으므로 패딩 및 테두리는 단락의 다른 단어와 겹칩니다.</p> +<p>아래 예제에 한 단락 내부에 <code><span></code>가 있고 거기에 <code>width</code>와 <code>height</code>, 그리고 <code>margin</code>와 <code>border</code>를 적용했습니다. 여러분이 보시다시피 너비와 높이는 무시됩니다. 여백, 패딩 및 테두리는 존치되지만 다른 콘텐츠와 인라인 박스아의 관계를 변경하지 않으므로 패딩 및 테두리는 단락의 다른 단어와 겹칩니다.</p> <p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}}</p> @@ -297,10 +297,10 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <ul> <li><code>width</code>와 <code>height</code> 속성은 존중됩니다.</li> - <li><code>padding</code>와 <code>margin</code>과 <code>border</code> 속성으로 인해 다른 요소가 상자에서 밀려납니다.</li> + <li><code>padding</code>와 <code>margin</code>과 <code>border</code> 속성으로 인해 다른 요소가 박스에서 밀려납니다.</li> </ul> -<p>그러나 새 줄로 행갈이를 하지 않고, <code>width</code>와 <code>height</code> 속성을 명시적으로 추가하는 경우에만 해당 요소의 콘텐츠보다 (동 상자가) 더 커질 뿐입니다.</p> +<p>그러나 새 줄로 행갈이를 하지 않고, <code>width</code>와 <code>height</code> 속성을 명시적으로 추가하는 경우에만 해당 요소의 콘텐츠보다 (동 박스가) 더 커질 뿐입니다.</p> <p><strong>다음 예제에서 우리는 <code><span></code> 요소에 <code>display: inline-block</code>를 추가했습니다. 스팬 요소 속성을 <code>display: block</code>로 변경하던가 추가했던 라인을 제거한 뒤 디스플레이 모델의 차이를 확인해 보십시요.</strong></p> @@ -308,7 +308,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p>여러분이 <code>padding</code>를 추가해 링크에 적중 영역을 확대하길 원하는 경우 이것이 유용할 수 있습니다. <code><a></code>는 <code><span></code>처럼 인라인 요소입니다. 여러분은 해당 요소에 <code>display: inline-block</code>을 사용해 패딩을 설정할 수 있으므로 사용자가 링크를 클릭할 수 있습니다.</p> -<p>탐색 (메뉴)모음에서 꽤 자주 사용되는 것을 볼겁니다. 아래 탐색 모음은 가변상자를 사용해 행으로 표시되었으며, <code><a></code>를 마우스로 가리킬 때 <code>background-color</code>를 변경할 수 있도록 <code><a></code> 요소에 패딩 추기했습니다. 패딩은 <code><ul></code> 요소의 테두리와 겹치는 것처럼 보입니다. 그렇게 된 까닭은 <code><a></code>가 인라인 요소이기 때문입니다.</p> +<p>탐색 (메뉴)모음에서 꽤 자주 사용되는 것을 볼겁니다. 아래 탐색 모음은 가변박스를 사용해 행으로 표시되었으며, <code><a></code>를 마우스로 가리킬 때 <code>background-color</code>를 변경할 수 있도록 <code><a></code> 요소에 패딩 추기했습니다. 패딩은 <code><ul></code> 요소의 테두리와 겹치는 것처럼 보입니다. 그렇게 된 까닭은 <code><a></code>가 인라인 요소이기 때문입니다.</p> <p><strong><code>.links-list a</code> 선택기에 딸린 규칙에 <code>display: inline-block</code>를 추가하면, 다른 요소에 의한 패딩이 존중되므로 여러분은 이(겹치는) 문제가 해결되는 것을 보게될 것입니다.</strong></p> @@ -316,9 +316,9 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <h2 id="요약정리">요약정리</h2> -<p>박스 모델에 대해 이해해야 할 내용의 대부분입니다. 상자들이 조판에 어떻게 포함된 것인지 혼란스러워지면, 향후 여러분은 이번 단원을 다시 찾게을 수 있습니다.</p> +<p>박스 모델에 대해 이해해야 할 내용의 대부분입니다. 박스들이 레이아웃에 어떻게 포함된 것인지 혼란스러워지면, 향후 여러분은 이번 단원을 다시 찾게을 수 있습니다.</p> -<p>다음 단원에서는 <a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">배경과 테두리</a>를 사용하여 평범한 보이는 상자를 더욱 흥미롭게 보이려면 어떤 방법이 있는지 살펴보겠습니다.</p> +<p>다음 단원에서는 <a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">배경과 테두리</a>를 사용하여 평범한 보이는 박스를 더욱 흥미롭게 보이려면 어떤 방법이 있는지 살펴보겠습니다.</p> <p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</p> @@ -326,7 +326,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <ol> <li><a href="/ko/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">계단식 나열과 상속</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">씨에스에스 선택기</a> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS 선택기</a> <ul> <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">유형과 클레스, 아이디 선택기 selectors</a></li> <li><a href="/ko/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">딸린 속성 선택기</a></li> @@ -334,14 +334,14 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <li><a href="/ko/docs/Learn/CSS/Building_blocks/Selectors/Combinators">조합기</a></li> </ul> </li> - <li><a href="/ko/docs/Learn/CSS/Building_blocks/%EC%83%81%EC%9E%90_%EB%AA%A8%EB%8D%B8">상자 모델</a></li> + <li><a href="/ko/docs/Learn/CSS/Building_blocks/%EC%83%81%EC%9E%90_%EB%AA%A8%EB%8D%B8">박스 모델</a></li> <li><a href="/ko/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">배경 및 테두리</a></li> <li><a href="/ko/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">서로 다른 텍스트 방향 처리</a></li> <li><a href="/ko/docs/Learn/CSS/Building_blocks/Overflowing_content">대열이탈 콘텐츠</a></li> <li><a href="/ko/docs/Learn/CSS/Building_blocks/Values_and_units">속성값과 단위</a></li> - <li><a href="/ko/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">씨에스에스 항목 크기 설정</a></li> + <li><a href="/ko/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS 항목 크기 설정</a></li> <li><a href="/ko/docs/Learn/CSS/Building_blocks/Images_media_form_elements">이미지와 미디아, 양식 요소</a></li> <li><a href="/ko/docs/Learn/CSS/Building_blocks/Styling_tables">테이블 스타일링</a></li> - <li><a href="/ko/docs/Learn/CSS/Building_blocks/Debugging_CSS">씨에스에스 디버깅</a></li> - <li><a href="/ko/docs/Learn/CSS/Building_blocks/Organizing">씨에스에스 체계화</a></li> + <li><a href="/ko/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS 디버깅</a></li> + <li><a href="/ko/docs/Learn/CSS/Building_blocks/Organizing">CSS 체계화</a></li> </ol> diff --git a/files/ko/learn/css/building_blocks/선택자/index.html b/files/ko/learn/css/building_blocks/선택자/index.html index 7674063921..274653da91 100644 --- a/files/ko/learn/css/building_blocks/선택자/index.html +++ b/files/ko/learn/css/building_blocks/선택자/index.html @@ -22,7 +22,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors <h2 id="선택자란_무엇인가">선택자란 무엇인가?</h2> -<p>이미 선택자 (selector) 를 만났습니다. CSS 선택자는 CSS 규칙의 첫 부분입니다. 규칙 내의 CSS 속성값을 적용하기 위해 어떤 HTML 요소를 선택해야 하는지 브라우저에 알려주는 요소 및 기타 용어의 패턴입니다. 선택자에 의해 선택된 요소들은 <em><strong>선택자의 주제(subject)</strong> </em>로 지칭됩니다.</p> +<p>우리는 이미 선택자 (selector) 를 만났습니다. CSS 선택자는 CSS 규칙의 첫 부분입니다. 규칙 내의 CSS 속성값을 적용하기 위해 어떤 HTML 요소를 선택해야 하는지 브라우저에 알려주는 요소 및 기타 용어의 패턴입니다. 선택자에 의해 선택된 요소들은 <em><strong>선택자의 주제(subject)</strong> </em>로 지칭됩니다.</p> <p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p> @@ -34,7 +34,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors <p>동일한 CSS 를 사용하는 항목이 두 개 이상인 경우 규칙이 모든 개별 선택자에 적용되도록 개별 선택자를 <em><strong>선택자 목록</strong> </em>으로 결합할 수 있습니다. 예를 들어, <code>h1</code> 에 대해 동일한 CSS 와 <code>special</code> class 를 사용하면 이것을 두 개의 별도 규칙으로 작성할 수 있습니다.</p> -<pre class="brush: css"><code>h1 { +<pre class="brush: css notranslate"><code>h1 { color: blue; } @@ -44,13 +44,13 @@ translation_of: Learn/CSS/Building_blocks/Selectors <p>또한 이들 사이에 쉼표를 추가하여 선택자 목록으로 결합할 수도 있습니다.</p> -<pre class="brush: css"><code>h1, .special { +<pre class="brush: css notranslate"><code>h1, .special { color: blue; } </code></pre> <p>공백은 쉼표 앞뒤에 유효합니다. 각 라인이 새 라인에 있으면 선택자를 더 읽기 쉽습니다.</p> -<pre class="brush: css"><code>h1, +<pre class="brush: css notranslate"><code>h1, .special { color: blue; } </code></pre> @@ -63,7 +63,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors <p>다음 예에서는, 잘못된 class 선택자 규칙이 무시되고 <code>h1</code> 은 여전히 스타일이 지정됩니다.</p> -<pre class="brush: css"><code>h1 { +<pre class="brush: css notranslate"><code>h1 { color: blue; } @@ -73,7 +73,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors <p>그러나 결합하면, 전체 규칙이 유효하지 않은 것으로 간주되어 <code>h1</code> 또는 class 가 스타일 지정되지 않습니다.</p> -<pre class="brush: css"><code>h1, ..special { +<pre class="brush: css notranslate"><code>h1, ..special { color: blue; } </code></pre> @@ -85,41 +85,41 @@ translation_of: Learn/CSS/Building_blocks/Selectors <p>이 그룹에는 <code><h1></code> 과 같은 HTML 요소를 대상으로 하는 선택자가 포함됩니다.</p> -<pre class="brush: css">h1 { }</pre> +<pre class="brush: css notranslate">h1 { }</pre> <p>또한 class 를 대상으로 하는 선택자가 포함됩니다:</p> -<pre class="brush: css">.box { }</pre> +<pre class="brush: css notranslate">.box { }</pre> <p>또는 ID:</p> -<pre class="brush: css">#unique { }</pre> +<pre class="brush: css notranslate">#unique { }</pre> <h3 id="속성_선택자">속성 선택자</h3> <p>이 선택자 그룹은 요소에 특정 속성이 있는지에 따라 요소를 선택하는 다른 방법을 제공합니다:</p> -<pre class="brush: css">a[title] { }</pre> +<pre class="brush: css notranslate">a[title] { }</pre> <p>또는 특정 값을 가진 속성의 존재 여부를 기반으로 선택하십시오:</p> -<pre class="brush: css">a[href="https://example.com"] { }</pre> +<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre> <h3 id="Pseudo-classes_및_pseudo-elements">Pseudo-classes 및 pseudo-elements</h3> <p>이 선택자 그룹에는 요소의 특정 상태를 스타일링하는 pseudo-classes 가 포함됩니다. 예를 들어 <code>:hover</code> pseudo-class 는 마우스 포인터에 의해 요소를 가리킬 때만 요소를 선택합니다:</p> -<pre class="brush: css">a:hover { }</pre> +<pre class="brush: css notranslate">a:hover { }</pre> <p>또한 요소 자체가 아닌 요소의 특정 부분을 선택하는 pseudo-elements 도 포함됩니다. 예를 들어, <code>::first-line</code> 은 항상 <code><span></code> 이 첫 번째 형식의 라인을 감싸는 것처럼 작동하여, 요소 내부의 첫 번째 텍스트 라인 (아래의 경우 <code><p></code>) 을 선택합니다.</p> -<pre class="brush: css">p::first-line { }</pre> +<pre class="brush: css notranslate">p::first-line { }</pre> <h3 id="결합자_Combinators">결합자 (Combinators)</h3> <p>최종 선택자 그룹은 문서 내의 요소를 대상으로 하기 위해 다른 선택자를 결합합니다. 예를 들어 다음은 자식 결합자 (<code>></code>) 를 사용하여 <code><article></code> 요소의 자식인 단락을 선택합니다:</p> -<pre class="brush: css">article > p { }</pre> +<pre class="brush: css notranslate">article > p { }</pre> <h2 id="다음_단계">다음 단계</h2> diff --git a/files/ko/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html b/files/ko/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html index 0975005ad9..06baaa4e2a 100644 --- a/files/ko/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html +++ b/files/ko/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html @@ -35,7 +35,7 @@ translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB <h2 id="concepts" name="concepts">주요 개념들</h2> -<p>만약 당신이 다른 종류의 데이터베이스로 작업하고 있었다면, IndexedDB로 작업할 때 힘들어질 수도 있습니다. 그러므로 다음의 중요한 개념들을 염두에 두어야 합니다.</p> +<p>만약 당신이 다른 DB 시스템을 사용해봤던 경험이 있다면 오히려 잘못된 추측으로 인해 IndexedDB로 작업할 때 힘들어질 수도 있습니다. 그러므로 다음의 중요한 개념들을 잘 정리해 두어야 합니다.</p> <ul> <li> @@ -98,17 +98,17 @@ translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB <p><strong>Note</strong>: 파이어폭스에서 (나중에 다시 계산 할 수 없는 까다로운 데이터를 저장하는 것)과 같은 몇 가지 이유로 지속성을 보장하고 싶다면, <code>complete</code> 이벤트가 전달되기 전에 아직 정식 표준이 아닌 실험적인 <code>readwriteflush</code> 모드를 이용하여 트랜젝션을 데이터베이스에 강제로 반영할 수 있습니다. ({{domxref("IDBDatabase.transaction")}} 참고.) 현재는 실험적으로 적용되어 있고(experimental), <code>about:config</code>에서<code>dom.indexedDB.experimental</code>값이 <code>true</code> 로 설정되어 있을 때만 사용할 수 있습니다.</p> </div> </dd> - <dt><a name="gloss_object_store">객체 저장소</a></dt> + <dt><a name="gloss_object_store">객체 저장소 ( Object Store )</a></dt> <dd> <p>데이터베이스에 데이터가 저장되는 매커니즘입니다. 객체 저장소는 키(key)와 값(value)의 쌍으로 된 레코드를 영구적으로 잡습니다. 한 객체 저장소 안의 레코드는 키(key)에 따라 오름차순으로 정렬됩니다.</p> - <p>모든 객체 저장소는 데이터베이스 안에서 고유한 이름을 가져야 합니다. Object store는 선택적으로 <em><a href="#gloss_keygenerator">key generator</a></em>와 <em><a href="#gloss_keypath">key path</a>를 가질 수 있다</em>.만약 object store가 key path를 가진다면, 그것은 <em><a href="#gloss_inline_key">in-line keys</a>를 사용한다</em>; 아니면, 그것은 <em><a href="#gloss_outofline_key">out-of-line keys</a>를 사용한다</em>.</p> + <p>모든 객체 저장소는 데이터베이스 안에서 고유한 이름을 가져야 합니다. 객체 저장소는 선택적으로 <em><a href="#gloss_keygenerator">key generator</a></em>와 <em><a href="#gloss_keypath">key path</a>를 가질 수 있습니다</em>. 만약 객체 저장소가 key path를 가진다면, 그것은 <em><a href="#gloss_inline_key">in-line keys</a>를 사용합니다. </em> 아니면, 그것은 <em><a href="#gloss_outofline_key">out-of-line keys</a>를 사용하는 것입니다.</em></p> - <p>Object store에 대한 참고 문서를 위해, <a href="../../../../en/IndexedDB/IDBObjectStore" rel="internal">IDBObjectStore</a> 또는 <a href="../../../../en/IndexedDB/IDBObjectStoreSync" rel="internal">IDBObjectStoreSync</a>를 보라.</p> + <p>객체 저장소에 대한 보다 자세한 정보는, <a href="../../../../en/IndexedDB/IDBObjectStore" rel="internal">IDBObjectStore</a> 또는 <a href="../../../../en/IndexedDB/IDBObjectStoreSync" rel="internal">IDBObjectStoreSync</a>를 참조하세요.</p> </dd> <dt><a name="gloss_version">version</a></dt> - <dd>Database가 처음 만들어질 때, 그것의 version은 interger 1이다. 각 database는 한번에 하나의 version을 가진다; 하나의 데이터베이스가 한번에 여러 version으로 존재할 수 없다. version을 바꾸는 유일한 방법은 현재 버전보다 큰 버전으로 그것을 여는 것이다. 이는 <a href="/en-US/docs/Web/API/IDBVersionChangeRequest"><code>versionchange</code></a> <em>transaction을 시작하고</em> <a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB"><code>upgradeneeded</code></a> event를 fire한다. database의 schema를 변경할 수 있는 유일한 곳은 그 event의 handler 내부이다.</dd> - <dd>Note: This definition describes the <a class="external" href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">most recent specification</a>, which is only implemented in up-to-date browsers. Old browsers implemented the now deprecated and removed <a href="/en-US/docs/IndexedDB/IDBDatabase#setVersion()" title="/en-US/docs/IndexedDB/IDBDatabase#setVersion()"><code>IDBDatabase.setVersion()</code></a> method.</dd> + <dd>Database가 처음 만들어질 때, version은 정수형 숫자로 1입니다. 각 database는 하나의 version을 집니다; 하나의 데이터베이스가 한번에 여러 version으로 존재할 수 없다. version을 바꾸는 유일한 방법은 현재 버전보다 큰 버전으로 그것을 여는 것입니다. 이렇ㄱ하면 <a href="/en-US/docs/Web/API/IDBVersionChangeRequest"><code>versionchange</code></a> <em>트랜잭션을 시작하고</em> <a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB"><code>upgradeneeded</code></a> event를 발생시킵니다. database의 schema를 변경하려면 upgradeneed 이벤트 핸들러내에서 수행해야 합니다.</dd> + <dd>Note: 이 스펙은 <a class="external" href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">most recent specification</a>, which is only implemented in up-to-date browsers. Old browsers implemented the now deprecated and removed <a href="/en-US/docs/IndexedDB/IDBDatabase#setVersion()" title="/en-US/docs/IndexedDB/IDBDatabase#setVersion()"><code>IDBDatabase.setVersion()</code></a> method.</dd> <dt><a name="gloss_database_connection">database connection</a></dt> <dd> <em><a href="#gloss_database">database</a>를 여는 것에 의해 생성되는 operation</em>. 한 주어진 database는 동시에 여러개의 connections를 가질 수 있다.</dd> <dt><a name="gloss_transaction">transaction</a></dt> @@ -199,15 +199,15 @@ translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB <li>그 feature에 호환되지 않는 변경이 이루어졌다.</li> </ul> -<p>실제 환경과 브라우저 호환성은 시간에 따라 변하지만, 브라우저 제조사의 기본 철학은 가능한한 데이터를 유지하는 데에 최대한 노력하는 것이다.</p> +<p>정확한 삭제 시점과 브라우져의 DB 수용능력은 때때로 달라질 수 있습니다만, 브라우져 벤더가 지킬려고 노력하는 가장 기본적인 철학은 데이터를 가능한 최대한 데이터를 지킬려고 노력한다는 것입니다.</p> <h2 id="next" name="next">Next steps</h2> -<p>자 이제 이들 지식을 가지고서 , 우리는 더 큰 것들을 가질 수 있게 되었다.the API 사용법에 대한 튜토리얼을 위해서, <a href="/en/IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Using IndexedDB</a>를 보라.</p> +<p>이제 큰 그림은 이해할 수 있게 됐고 아울러 보다 복잡한 사용법을 익힐 준비가 됐네요. 실제로 어떻게 API를 사용하는지 알아보기 위해서, <a href="/en/IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Using IndexedDB</a>를 살펴봅시다.</p> <h2 id="함께_보기">함께 보기</h2> -<p> </p> + <ul> <li><a href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/">Indexed Database API Specification</a></li> @@ -216,4 +216,8 @@ translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB <li><a href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li> </ul> -<p> </p> + + +<div id="gtx-trans" style="position: absolute; left: 225px; top: 8418px;"> +<div class="gtx-trans-icon"></div> +</div> diff --git a/files/ko/webassembly/concepts/index.html b/files/ko/webassembly/concepts/index.html index 605784b4b8..b45b546a98 100644 --- a/files/ko/webassembly/concepts/index.html +++ b/files/ko/webassembly/concepts/index.html @@ -136,7 +136,7 @@ translation_of: WebAssembly/Concepts <h3 id="AssemblyScript_사용하기">AssemblyScript 사용하기</h3> -<p>AssemblyScript는 Rust 혹은 C를 자세히 배우지 않고 WebAssembly를 활용해 보고 싶은 개발자를 위한 최고의 선택지입니다. AssemblyScript는 작은 번들을 만들고 C나 Rust보단 느립니다. <a href="https://docs.assemblyscript.org/">https://docs.assemblyscript.org/</a> 문서에서 확인해 보실 수 있습니다.</p> +<p>AssemblyScript는 Rust 혹은 C를 자세히 배우지 않고 WebAssembly를 활용해 보고 싶은 개발자를 위한 최고의 선택지입니다. AssemblyScript는 작은 번들을 만들고 C나 Rust보단 살짝 느립니다. <a href="https://docs.assemblyscript.org/">https://docs.assemblyscript.org/</a> 문서에서 확인해 보실 수 있습니다.</p> <h2 id="요약">요약</h2> diff --git a/files/pl/learn/getting_started_with_the_web/html_basics/index.html b/files/pl/learn/getting_started_with_the_web/html_basics/index.html index 1b7835d180..5f4868af40 100644 --- a/files/pl/learn/getting_started_with_the_web/html_basics/index.html +++ b/files/pl/learn/getting_started_with_the_web/html_basics/index.html @@ -3,11 +3,7 @@ title: HTML podstawy slug: Learn/Getting_started_with_the_web/HTML_basics translation_of: Learn/Getting_started_with_the_web/HTML_basics --- -<ol> - <li> - <h2 id="LearnSidebar">{{LearnSidebar}}</h2> - </li> -</ol> +<div>{{LearnSidebar}}</div> <div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div> @@ -214,7 +210,7 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics <p>Jeśli podążałeś za instrukcjami zawartymi w tym artykule, obecnie twoja strona powinna wyglądać podobnie do tej poniżej (możesz ją również zobaczyć <a href="http://mdn.github.io/beginner-html-site/">tutaj</a>):<br> <br> - <s><img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></s></p> + <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p> <p>Jeśli gdzieś po drodze utknąłeś, zawsze możesz porównać swój kod z GitHub <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">ukończonymi przykładami</a> na GitHubie.</p> diff --git a/files/pt-br/aprender/html/introducao_ao_html/criando_hyperlinks/index.html b/files/pt-br/aprender/html/introducao_ao_html/criando_hyperlinks/index.html index b386ae46e3..1abbfa20c4 100644 --- a/files/pt-br/aprender/html/introducao_ao_html/criando_hyperlinks/index.html +++ b/files/pt-br/aprender/html/introducao_ao_html/criando_hyperlinks/index.html @@ -72,7 +72,7 @@ translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks <p>Isto nos dá o seguinte resultado (o título aparecerá como uma dica de ferramenta quando o link estiver suspenso):</p> -<p>Estou criando um link para <a class="ignore-external" href="https://www.mozilla.org/pt-BR/">a página inicial da Mozilla</a>.</p> +<p>Estou criando um link para <a class="ignore-external" href="https://www.mozilla.org/pt-BR/" title="O melhor lugar para encontrar mais informações sobre a missão da Mozilla e como contribuir">a página inicial da Mozilla</a>.</p> <div class="note"> <p><strong>Nota</strong>: Um título de link só é revelado ao passar o mouse sobre ele, o que significa que as pessoas que dependem do teclado ou <em>touchscreen</em> para navegar em páginas web terão dificuldade em acessar a informação do título. Se a informação de um título é realmente importante para a usabilidade da página, então você deve apresentá-la de uma maneira que será acessível a todos os usuários, por exemplo, colocando-o no texto normal.</p> diff --git a/files/ru/learn/css/building_blocks/handling_different_text_directions/index.html b/files/ru/learn/css/building_blocks/handling_different_text_directions/index.html index 708c8a9d39..f572aa9758 100644 --- a/files/ru/learn/css/building_blocks/handling_different_text_directions/index.html +++ b/files/ru/learn/css/building_blocks/handling_different_text_directions/index.html @@ -5,9 +5,9 @@ translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions --- <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</div> -<p>Many of the properties and values that we have encountered so far in our CSS learning have been tied to the physical dimensions of our screen. We create borders on the top, right, bottom, and left of a box, for example. These physical dimensions map very neatly to content that is viewed horizontally, and by default the web tends to support left-to-right languages (e.g. English or French) better than right-to-left languages (such as Arabic).</p> +<p>Многие свойства и значения, с которыми мы столкнулись до сих пор при изучении CSS, были привязаны к физическим размерам нашего экрана. Мы создаем границы, например, сверху, справа, снизу и слева от коробки.Эти физические размеры очень точно соответствуют контенту, который просматривается по горизонтали, и по умолчанию Интернет имеет тенденцию поддерживать языки с письмом слева направо (например, английский или французский) лучше, чем языки с письмом справа налево (например, арабский).</p> -<p>In recent years however, CSS has evolved in order to better support different directionality of content, including right-to-left but also top-to-bottom content (such as Japanese) — these different directionalities are called <strong>writing modes</strong>. As you progress in your study and begin to work with layout, an understanding of writing modes will be very helpful to you, therefore we will introduce them now.</p> +<p>Однако в последние годы CSS развивался чтобы лучше поддерживать разную направленность контента, включая контент с направлением справа налево, а также контент сверху вниз (например, в японском языке) - эти разные направления называются режимами письма. По мере того, как вы продвигаетесь в обучении и начинаете работать с макетом, понимание режимов письма будет вам очень полезно, поэтому мы сейчас и познакомимся с ними.</p> <table class="learn-box standard-table"> <tbody> @@ -16,29 +16,29 @@ translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td> </tr> <tr> - <th scope="row">Objective:</th> - <td>To understand the importance of writing modes to modern CSS.</td> + <th scope="row">Цель:</th> + <td>Понять важность режимов письма для современного CSS.</td> </tr> </tbody> </table> -<h2 id="What_are_writing_modes">What are writing modes?</h2> +<h2 id="Какие_бывают_режимы_письма">Какие бывают режимы письма?</h2> -<p>A writing mode in CSS refers to whether the text is running horizontally or vertically. The {{cssxref("writing-mode")}} property lets us switch from one writing mode to another. You don't need to be working in a language which uses a vertical writing mode to want to do this — you could also change the writing mode of parts of your layout for creative purposes.</p> +<p>Режим письма в CSS определяет, идет ли текст по горизонтали или по вертикали. Свойство {{cssxref ("writing-mode")}} позволяет нам переключаться из одного режима письма в другой. Для этого вам не обязательно работать на языке, который использует режим вертикального письма - вы также можете изменить режим письма частей вашего макета для творческих целей.</p> -<p>In the example below we have a heading displayed using <code>writing-mode: vertical-rl</code>. The text now runs vertically. Vertical text is common in graphic design, and can be a way to add a more interesting look and feel to your web design.</p> +<p>В приведенном ниже примере заголовок отображается с использованием <code>writing-mode: vertical-rl</code>. Теперь текст идет вертикально. Вертикальный текст часто используется в графическом дизайне и может быть способом добавить более интересный вид вашему веб-дизайну.</p> <p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}</p> -<p>The three possible values for the <code><a href="/en-US/docs/Web/CSS/writing-mode">writing-mode</a></code> property are:</p> +<p>Три возможных значения свойства <code><a href="/en-US/docs/Web/CSS/writing-mode">writing-mode</a></code>:</p> <ul> - <li><code>horizontal-tb</code>: Top-to-bottom block flow direction. Sentences run horizontally.</li> - <li><code>vertical-rl</code>: Right-to-left block flow direction. Sentences run vertically.</li> - <li><code>vertical-lr</code>: Left-to-right block flow direction. Sentences run vertically.</li> + <li><code>horizontal-tb</code>: Направление потока блока сверху вниз. Предложения идут горизонтально.</li> + <li><code>vertical-rl</code>: Направление потока блоков справа налево. Предложения идут вертикально.</li> + <li><code>vertical-lr</code>: Направление потока блока слева направо. Предложения идут вертикально.</li> </ul> -<p>So the <code>writing-mode</code> property is in reality setting the direction in which block-level elements are displayed on the page — either from top-to-bottom, right-to-left, or left-to-right. This then dictates the direction text flows in sentences.</p> +<p>Таким образом, свойство <code>writing-mode</code> на самом деле устанавливает направление, в котором элементы уровня блока отображаются на странице - сверху вниз, справа налево или слева направо. Это затем определяет направление движения текста в предложениях.</p> <h2 id="Writing_modes_and_block_and_inline_layout">Writing modes and block and inline layout</h2> diff --git a/files/ru/learn/css/building_blocks/the_box_model/index.html b/files/ru/learn/css/building_blocks/the_box_model/index.html index f0a09df9f5..74a40b9a33 100644 --- a/files/ru/learn/css/building_blocks/the_box_model/index.html +++ b/files/ru/learn/css/building_blocks/the_box_model/index.html @@ -71,7 +71,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p>Когда вы перейдёте к более подробному изучению CSS вёрстки, вы встретите <code>flex</code>, и другие внутренние значения, которые могут иметь ваши элементы, например <code><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p> -<p>Тем не менее, блочное и строчное расположение, это поведение web-элементов по умолчанию — как было сказано выше, это иногда называют <em>нормальным потоком (normal flow)</em>, потому что при отсутствии какой-либо другой инструкций коробки имеют блочное или строчное расположение.</p> +<p>Тем не менее, блочное и строчное расположение, это поведение web-элементов по умолчанию — как было сказано выше, это иногда называют <em>нормальным потоком (normal flow)</em>, потому что при отсутствии какой-либо другой инструкции коробки имеют блочное или строчное расположение.</p> <h2 id="Примеры_разных_типов_отображения">Примеры разных типов отображения</h2> @@ -145,7 +145,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p><img alt="Showing the size of the box when the alternate box model is being used." src="https://mdn.mozillademos.org/files/16557/alternate-box-model.png" style="height: 240px; width: 440px;"></p> -<p>По умолчанию браузеры используют стандартную блочную модель. Если вы хотите использовать альтернативную блочную модель для элемента, установивите для него свойство <code>box-sizing: border-box</code>. С помощь этого вы говорите браузеру о том, что граница элемента определяется любыми размерами которые вы устанавливаете.</p> +<p>По умолчанию браузеры используют стандартную блочную модель. Если вы хотите использовать альтернативную блочную модель для элемента, установите для него свойство <code>box-sizing: border-box</code>. С помощью этого вы говорите браузеру о том, что граница элемента определяется любыми размерами которые вы устанавливаете.</p> <pre class="brush: css notranslate"><code>.box { box-sizing: border-box; @@ -223,7 +223,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <h3 id="Границы">Границы</h3> -<p>Граница распологается между margin и padding блочного элемента. Если вы используете стандартную блочную модель, размер границы прибавляется к значениям <code>width</code> и <code>height</code> бокса. Если вы используете альтернативную блочную модель, то размер границы уменьшает поле контента данного блока, так как значения границы входит в значения <code>width</code> и <code>height</code>.</p> +<p>Граница располагается между margin и padding блочного элемента. Если вы используете стандартную блочную модель, размер границы прибавляется к значениям <code>width</code> и <code>height</code> бокса. Если вы используете альтернативную блочную модель, то размер границы уменьшает поле контента данного блока, так как значения границы входит в значения <code>width</code> и <code>height</code>.</p> <p>Для слилизации границ существует большое количество различных свойств — имеется четыре границы, и каждая из них имеет свой стиль, ширину и цвет, которыми мы можем манипулировать.</p> diff --git a/files/ru/learn/html/multimedia_and_embedding/index.html b/files/ru/learn/html/multimedia_and_embedding/index.html index 6cf2856997..5926902c75 100644 --- a/files/ru/learn/html/multimedia_and_embedding/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/index.html @@ -5,14 +5,14 @@ translation_of: Learn/HTML/Multimedia_and_embedding --- <p>{{LearnSidebar}}</p> -<p>Мы уже прочли много текста в этом курсе. МНОГО текста. Но веб был бы скучным, если бы состоял только из текста, поэтому давайте посмотрим, как оживить веб при помощи более интересного контента! Этот модуль объясняет, как при помощи HTML вставлять мультимедиа в ваши web-страницы, включая разные способы вставки изображений, видео, аудио и также других страниц целиком.</p> +<p>Мы уже прочли много текста в этом курсе. МНОГО текста. Но веб был бы скучным, если бы состоял только из текста, поэтому давайте посмотрим, как оживить веб при помощи более интересного контента! Этот модуль объясняет, как при помощи HTML вставлять мультимедиа в ваши web-страницы, включая разные способы вставки изображений, видео, аудио, а также других страниц целиком.</p> <h2 id="Перед_стартом">Перед стартом</h2> -<p>Перед изучением этого модуля, вам необходимо изучить азы HTML, изложенные во <a href="/ru/docs/Learn/HTML/Введение_в_HTML">Введении HTML</a>. <span style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>Если вы не прошли этот модуль (или что-нибудь подобное), сначала пройдите его, затем возвращайтесь!</span></p> +<p>Перед изучением этого модуля, вам необходимо изучить азы HTML, изложенные во <a href="/ru/docs/Learn/HTML/Введение_в_HTML">Введении в HTML</a>. Если вы не прошли этот модуль (или подобный ему), сначала пройдите его, затем возвращайтесь!</p> <div class="note"> -<p><strong>Внимание: </strong>Если вы работаете на компьютере/планшете/другом устройстве, на котором у вас нет возможности создавать файлы, вы можете попробовать сделать упражнения на программирование (большинство из) в онлайн сервисах, например в <a href="http://jsbin.com/">JSBin</a> или <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +<p><strong>Внимание: </strong>Если вы работаете на компьютере/планшете/другом устройстве, на котором у вас нет возможности создавать файлы, вы можете попробовать сделать упражнения на программирование (большинство из них) в онлайн сервисах, например в <a href="http://jsbin.com/">JSBin</a> или <a href="https://thimble.mozilla.org/">Thimble</a>.</p> </div> <h2 id="Руководство">Руководство</h2> @@ -22,17 +22,19 @@ translation_of: Learn/HTML/Multimedia_and_embedding <dl> <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Изображения_в_HTML">Изображения в HTML</a></dt> <dd> - <p>Можно рассматривать другие типы мультимедиа, но логично начать с простого элемента {{htmlelement("img")}}, используемого для встраивания простого изображения в веб-страницу. В этой статье мы увидим, как использовать его в целом, включая основы, подписывать ее используя {{htmlelement("figure")}} и как он взаимодействует с фоновым изображением CSS.</p> + <p>Можно рассматривать другие типы мультимедиа, но логично начать с простого элемента {{htmlelement("img")}}, используемого для встраивания простого изображения в веб-страницу. В этой статье мы увидим, как использовать его в целом, включая основы, подписывать его, используя {{htmlelement("figure")}}, и как он взаимодействует с фоновым изображением CSS.</p> </dd> <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Видео и аудио контент</a></dt> - <dd><span style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>Далее мы увидим, как использовать </span><span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>HTML</span><span style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>5-элементы {{htmlelement("video")}} и {{htmlelement("audio")}} для встраивания видео и аудио в наши страницы, включая основы, обеспечение доступа к файлам разного формата для различных браузеров, добавление надписей и субтитров, и как добавлять откаты для старых браузеров.</span></dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">От <object> до <iframe> — другие технологии встраивания</a></dt> - <dd><span style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>В этом месте мы бы хотели сделать шаг в сторону, чтобы изучить пару элементов, которые позволят встраивать широкий спектр типов контента в ваши веб-страницы: элементы {{htmlelement("iframe")}}, {{htmlelement("embed")}} и{{htmlelement("object")}}. <iframe> используется для встраивания других веб-страниц, а другие два элемента позволяют встраивать </span><span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>PDF</span><span style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>, </span><span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>SVG</span><span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'> </span><span style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>и даже </span><span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>Flash</span><span style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'> – устаревающая технология, но все еще часто встречаемая.</span></dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Добавление векторной графики в Веб</a></dt> - <dd>Векторная графика может быть очень полезной в определенных ситуациях. В отличие от обычных форматов типа PNG/JPG, они не деформируются/пикселизируются при растяжении – они могут остаться гладкими при растягивании. Эта статья знакомит вас с понятием векторной графики и учит вас встраивать популярный формат {{glossary("SVG")}} в веб-страницы.</dd> + <dd> + <p>Далее мы рассмотрим, как использовать элементы HTML5 {{htmlelement ("video")}} и {{htmlelement ("audio")}} для встраивания видео и аудио на наши страницы, включая основы, обеспечивая доступ к различным форматам файлов для разных браузеров, добавление подписей и субтитров, а также как добавить резервные копии для старых браузеров.</p> + </dd> + <dt><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">От <object> к <iframe> — другие технологии встраивания</a></dt> + <dd>В этом месте мы бы хотели сделать шаг в сторону, чтобы изучить пару элементов, которые позволят встраивать широкий спектр типов контента в ваши веб-страницы: элементы {{htmlelement("iframe")}}, {{htmlelement("embed")}} и{{htmlelement("object")}}. <iframe> используется для встраивания других веб-страниц, а другие два элемента позволяют встраивать PDF, SVG и даже Flash – устаревающая технология, но все еще часто встречаемая.</dd> + <dt><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Добавление_r_graphics_to_the_Web">Добавление векторной графики в Веб</a></dt> + <dd>Векторная графика может быть очень полезной в определенных ситуациях. В отличие от обычных форматов типа PNG/JPG, она не деформируются/пикселизируются при растяжении, она остаётся гладкой при масштабировании. Эта статья знакомит вас с понятием векторной графики и учит вас встраивать популярный формат {{glossary("SVG")}} в веб-страницы.</dd> <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Адаптивные изображения</a></dt> <dd> - <p>В этой статье мы познакомимся с концепцией адаптивных изображений - изображений, которые хорошо работают на устройствах с сильно различающимися размерами экрана, разрешением и другими подобными функциями, и рассмотрим, какие инструменты предоставляет HTML для их реализации. Это помогает повысить производительность различных устройств. Адаптивные изображения - это всего лишь одна часть адаптивного дизайна, будущая тема CSS, которую вы должны изучить.</p> + <p>В этой статье мы познакомимся с концепцией адаптивных изображений - изображений, которые хорошо работают на устройствах с сильно различающимися размерами экрана, разрешением и другими подобными характеристиками, и рассмотрим, какие инструменты предоставляет HTML для их реализации. Это помогает повысить производительность различных устройств. Адаптивные изображения - это всего лишь одна часть адаптивного дизайна, будущей темы CSS, которую вы должны изучить.</p> </dd> </dl> @@ -41,7 +43,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding <p>Следующая аттестация проверит ваше понимание основ HTML, изложенных в перечисленных выше статьях.</p> <dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Страница приветствия Mozilla</a></dt> + <dt><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/заставка_Mozilla">Страница приветствия Mozilla</a></dt> <dd>В этой аттестации мы проверим ваши знания по некоторым технологиям, которые обсуждались в статьях этого модуля, заставляя вас добавить несколько изображений и видео на примитивную приветственную страницу, посвященную Mozilla!</dd> </dl> @@ -52,6 +54,6 @@ translation_of: Learn/HTML/Multimedia_and_embedding <dd>Карта изображения предоставляет способ разделить изображение на части, которые ссылаются на разные места (представьте себе географическую карту, которая показывает подробную информацию о каждой стране, когда вы кликаете на нее.) Эта технология иногда может быть полезной.</dd> <dt><a href="https://learning.mozilla.org/en-US/activities/web-lit-basics-two/">Основы Веб-грамотности 2</a></dt> <dd> - <p>Превосходный курс от фонда Mozilla , который освещает и проверяет некоторые навыки, полученные в модуле<em>Мультимедиа и встраивание</em>. Погрузитесь глубже в основы верстки веб-страниц, проектирования для доступности, обмена ресурсами, использования интернет-СМИ и работы с открытым кодом.</p> + <p>Превосходный курс от фонда Mozilla, который освещает и проверяет некоторые навыки, полученные в модуле <em>Мультимедиа и встраивание</em>. Погрузитесь глубже в основы верстки веб-страниц, проектирования для доступности, обмена ресурсами, использования интернет-СМИ и работы с открытым кодом.</p> </dd> </dl> diff --git a/files/ru/learn/html/multimedia_and_embedding/изображения_в_html/index.html b/files/ru/learn/html/multimedia_and_embedding/изображения_в_html/index.html index 930362d696..76b192dd4e 100644 --- a/files/ru/learn/html/multimedia_and_embedding/изображения_в_html/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/изображения_в_html/index.html @@ -13,51 +13,53 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML <tbody> <tr> <th scope="row">Необходимы:</th> - <td>Базовые знания компьютера, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">установленное базовое ПО</a>, базовые знания по <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">работе с файлами</a>, (как описано в статье <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>.)</td> + <td>Базовые знания компьютера, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">установленное базовое ПО</a>, базовые знания по <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">работе с файлами</a>, знания основ HTML (как описано в статье <a href="/ru/docs/Learn/HTML/Введение_в_HTML/Начало_работы">Начало работы с HTML</a>).</td> </tr> <tr> <th scope="row">Цель:</th> - <td>Научиться вставлять простые изображения в HTML, приписывать их комментариями, и какое отношение HTML изображения имеют к фоновым изображениям CSS.</td> + <td>Узнать, как встраивать изображения в HTML, как добавлять к ним описания и как изображения HTML связаны с фоновыми изображениями CSS.</td> </tr> </tbody> </table> <h2 id="Как_разместить_картинку_на_странице">Как разместить картинку на странице?</h2> -<p>Для того, что бы разместить изображение на странице, нужно использовать тег {{htmlelement("img")}}. Это пустой элемент (имеется ввиду что, не содержит текста и закрывающего тега) который требует минимум один атрибут для использования — <code>src</code> (произносится <em>эс-ар-си</em>, иногда говорят его полное название, <em>со-о-рс</em>). Атрибут <code>src</code> содержит путь к изображению которое вы хотите встроить в страницу, который может быть относительным или абсолютным URL, таким же образом, как для элемента {{htmlelement("a")}} значение атрибута <code>href</code>.</p> +<p>Чтобы разместить изображение на странице, нужно использовать тег {{htmlelement("img")}}. Это пустой элемент (имеется ввиду что, не содержит текста и закрывающего тега), который требует минимум один атрибут для использования — <code>src</code> (произносится <em>эс-ар-си</em>, иногда говорят его полное название, <em>source</em>). Атрибут <code>src</code> содержит путь к изображению, которое вы хотите встроить в страницу, и может быть относительным или абсолютным URL, точно так же, как значения атрибута <code>href</code> для элемента {{htmlelement("a")}}.</p> <div class="note"> -<p><strong>Примечание</strong>: Перед тем как продолжить, вы можете прочитать <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#A_quick_primer_on_URLs_and_paths">Быстрый пример про URL - адресс и путь</a> чтобы обновить свою память про относительный и абсолютный URL - адресс.</p> +<p><strong>Примечание</strong>: Перед тем как продолжить, вам стоит вспомнить про <a href="/ru/docs/Learn/HTML/Введение_в_HTML/Создание_гиперссылок#Абсолютные_и_относительные_URL-адреса">типы адресов URL</a>, чтобы обновить в памяти про относительные и абсолютные адресса.</p> </div> <p>Например, если ваше изображение называется <code>dinosaur.jpg</code>, и оно находится в той же директории что и ваша HTML страница, вы можете встроить это изображение как:</p> <pre class="brush: html notranslate"><img src="dinosaur.jpg"></pre> -<p>Если изображение было в поддиректории <code>images</code> , находящаяся внутри директории, в которой HTML страница (что рекомендует Google для индексации SEO целей), тогда вы можете встроить ее как:</p> +<p>Если изображение было в поддиректории <code>images</code> , находящаяся внутри той же директории, что и HTML страница (что рекомендует Google для индексации и целей SEO), тогда вы можете встроить его так:</p> <pre class="brush: html notranslate"><img src="images/dinosaur.jpg"></pre> <p>И так далее.</p> <div class="note"> -<p><strong>Примечание</strong>: Поисковые системы также читают имена изображений и считают их для оптимизации поискового запроса. Поэтому, давайте вашим изображениям смысловые имена; <code>dinosaur.jpg</code> лучше, чем <code>img835.png</code>.</p> +<p><strong>Примечание</strong>: Поисковые системы также читают имена изображений и считают их для оптимизации поискового запроса. Поэтому присваивайте вашим изображениям смысловые имена: <code>dinosaur.jpg</code> лучше, чем <code>img835.png</code>.</p> </div> <p>Вы можете встроить изображение используя абсолютный URL, например:</p> <pre class="brush: html notranslate"><img src="https://www.example.com/images/dinosaur.jpg"></pre> -<p>Но это бесмыссленно, так как он просто заставляет браузер делать больше работы, используя IP-адрес от DNS-сервера все снова, и т.д. Вы почти всегда будете держать свои изображения для сайта на том же сервере, что и ваш HTML.</p> +<p>Но это бесмыссленно, так как он просто заставляет браузер делать больше работы, запрашивая IP-адрес от DNS-сервера все снова, и т.д. Вы почти всегда будете держать свои изображения для сайта на том же сервере, что и ваш HTML.</p> <div class="warning"> -<p><strong>Внимание:</strong> Большиство изображений защищены. Не отображайте изображения на вашем сайте пока:<br> - <br> - 1) вы не будете владеть изображением<br> - 2) у вас не будет письменного разрешения владельца изображения, или<br> - 3) пока у вас не будет достаточно доказательств что изображение находится в открытом доступе.<br> - <br> - Нарушение авторских прав является не законным. Кроме того, никогда не указывайте в своем атрибуте <code>src</code> ссылку на изображение, размещенную на чужом сайте. Это называется "хотлинкинг" (с англ. 'hotlinking' - 'горячая ссылка'). Запомните, кража чей-то пропускной способности не законно. Кроме того, это замедляет вашу страницу, оставляя вас без контроля над изображением; было ли оно удалено или случайно перемещено.</p> +<p><strong>Внимание:</strong> Большиство изображений защищены. Не отображайте изображения на вашем сайте пока:</p> + +<ul> + <li>вы не будете владеть изображением</li> + <li>у вас не будет письменного разрешения владельца изображения, или</li> + <li>пока у вас не будет достаточно доказательств что изображение находится в открытом доступе.</li> +</ul> + +<p>Нарушение авторских прав является незаконным. Кроме того, никогда не указывайте в своем атрибуте <code>src</code> ссылку на изображение, размещенную на чужом сайте. Это называется "хотлинкинг" (с англ. 'hotlinking' - 'горячая ссылка'). Запомните, кража пропускной способности чужого сайта незаконна. Это также замедляет вашу страницу, не позволяя вам контролировать, будет ли изображение удалено или заменено чем-то неприятным.</p> </div> <p>Наш код выше даст нам следующий результат:</p> @@ -65,22 +67,22 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML <p><img alt="A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it" src="https://mdn.mozillademos.org/files/12700/basic-image.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> <div class="note"> -<p><strong>Примечание</strong>: Элементы как {{htmlelement("img")}} и {{htmlelement("video")}} иногда называются заменяемые элементы. Это потому что содержание элемента и размер, определяет внешний ресурс (как изображение или видео файл), а не содержание самого элемента. </p> +<p><strong>Примечание</strong>: Элементы как {{htmlelement("img")}} и {{htmlelement("video")}} иногда называются замещаемыми элементами. Это потому что содержание элемента и размер, определяет внешний ресурс (как изображение или видео файл), а не содержание самого элемента. Вы можете узнать о них больше в <a href="/ru/docs/Web/CSS/Замещаемый_элемент">Замещаемых элементах</a>.</p> </div> <div class="note"> -<p><strong>Примечание</strong>: Вы можете найти готовый пример здесь <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">running on Github</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">source code</a> too.)</p> +<p><strong>Примечание</strong>: Вы можете найти готовый пример здесь <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">running on Github</a> (смотрите так же <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">исходный код</a>)</p> </div> <h3 id="Альтернативный_текст">Альтернативный текст</h3> -<p>Следующий атрибут, который мы рассмотрим, — <code>alt</code>. Предполагается, что значением атрибута является текстовое описание изображения; данный атрибут используется в ситуациях, когда изображение скрыто или его не удается отобразить. Чтобы продемонстрировать использование атрибута <code>alt</code> на практике, внесем изменения в код из предыдущего примера:</p> +<p>Следующий атрибут, который мы рассмотрим — <code>alt</code>. Его значением должно быть текстовое описание изображения для использования в ситуациях, когда изображение не может быть просмотрено / отображено или отрисовка занимает много времени из-за медленного интернет-соединения. Чтобы продемонстрировать использование атрибута <code>alt</code> на практике, внесем изменения в код из предыдущего примера:</p> -<p><img src="images/dinosaur.jpg"<br> - alt="The head and torso of a dinosaur skeleton;<br> - it has a large head with long sharp teeth"></p> +<pre class="notranslate"><img src="images/dinosaur.jpg" + alt="Голова и туловище скелета динозавра; + у него большая голова с длинными острыми зубами"></pre> -<p class="syntaxbox">Самый простой способ увидеть атрибут <code>alt</code> в действии — это сделать намеренную ошибку в имени файла. Например, если бы мы написали имя изображения как <code>dinosooooor.jpg</code>, браузер не смог бы его отобразить, и на экране появился бы текст из атрибута <code>alt</code>:</p> +<p>Самый простой способ увидеть атрибут <code>alt</code> в действии — это сделать намеренную ошибку в имени файла. Например, если бы мы написали имя изображения как <code>dinosooooor.jpg</code>, браузер не смог бы его отобразить, и на экране появился бы текст из атрибута <code>alt</code>:</p> <p><img alt="The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place." src="https://mdn.mozillademos.org/files/12702/alt-text.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;">Итак, в каких случаях текст из атрибута <code>alt</code> может быть нам полезен? Приведем несколько примеров:</p> @@ -96,20 +98,20 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML <ul> <li><strong>Декорация. </strong>Если изображение служит просто украшением и не является частью содержимого, добавьте пустой <code>alt=""</code>. Например, программа чтения с экрана не тратит время на чтение содержимого, которое не является важным для пользователя. На самом деле, декоративные изображения не принадлежат вашему HTML. {{anch("CSS background images")}} должны быть использованы для вставки декораций, но, если это неизбежно, то лучшее решение - использовать <code>alt=""</code>.</li> - <li><strong>Контент.</strong> Если ваше изображение содержит важную информацию, передайте ту же информацию через краткий<em> </em><code>alt</code>. Или даже лучше, в <em>главном</em> тексте, который все увидят. Не используйте <code>alt</code> , если можете обойтись без него. Насколько неудобно было бы для пользователя если бы <em>параграфы</em> были написаны дважды в <em>главном контенте</em>? Если изображение адекватно описано в основном тексте, можете просто использовать <code>alt=""</code>.</li> - <li><strong>Ссылка.</strong> Если вы помещаете изображение в {{htmlelement("a")}}, для того, чтобы сделать из него ссылку, вы всё ещё должны предоставить <a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Use_clear_link_wording">accessible link text</a>. В таком случае, вы сможете использовать элемент <code><a></code> или атрибут <code>alt</code> . Старайтесь выбрать лучший вариант.</li> - <li><strong>Текст.</strong> Не пишите текст в изображениях. Если вашему заголовку понадобиться тень, то лучше используйте для этого<a href="/en-US/docs/Web/CSS/text-shadow"> CSS</a> вместо добавления текста в изображение. Однако, если <em>действительно этого не избежать</em>, то вам следует дополнить текст в атрибуте <code>alt</code>.</li> + <li><strong>Контент.</strong> Если ваше изображение содержит важную информацию, передайте ту же информацию через краткий<em> </em><code>alt</code>. Или даже лучше, в <em>главном</em> тексте, который все увидят. Не используйте <code>alt</code> , если можете обойтись без него. Насколько неудобно было бы для пользователя, если бы <em>параграфы</em> были написаны дважды в <em>главном контенте</em>? Если изображение адекватно описано в основном тексте, можете просто использовать <code>alt=""</code>.</li> + <li><strong>Ссылка.</strong> Если вы помещаете изображение в {{htmlelement("a")}}, для того, чтобы сделать из него ссылку, вы всё ещё должны <a href="/ru/docs/Learn/HTML/Введение_в_HTML/Создание_гиперссылок#Используйте_четкие_формулировки_описания_ссылок">использовать четкие формулировки описания ссылок</a>. В таком случае, вы сможете использовать элемент <code><a></code> или атрибут <code>alt</code> . Старайтесь выбрать лучший вариант.</li> + <li><strong>Текст.</strong> Не пишите текст в изображениях. Если вашему заголовку понадобится тень, то лучше используйте для этого <a href="/ru/docs/Web/CSS/text-shadow">CSS</a> вместо добавления текста в изображение. Однако, если <em>действительно этого не избежать</em>, то вам следует дополнить текст в атрибуте <code>alt</code>.</li> </ul> -<p>По существу, главная идея здесь это предоставить нечто полезное, для случая когда изображения не видны. Это гарантирует что все пользователи не упустят ничего из содержимого страницы. Попробуйте отключить изображения в своём браузере и посмотрите как всё выглядит. Вы вскоре выясните насколько полезным является альтернативный текст если изображения не видны.</p> +<p>По существу, главная идея здесь это предоставить нечто полезное, для случая когда изображения не видны. Это гарантирует что все пользователи не упустят ничего из содержимого страницы. Попробуйте отключить изображения в своём браузере и посмотрите как всё выглядит. Вы вскоре выясните насколько полезным является альтернативный текст, если изображения не видны.</p> <div class="note"> -<p><strong>Примечание</strong>: Более подробную информацию, смотрите здесь <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text Alternatives</a>.</p> +<p><strong>Примечание</strong>: Более подробную информацию, смотрите здесь <a href="/ru/docs/Learn/Доступность/HTML#Альтернативный_текст">Альтернативный текст</a>.</p> </div> <h3 id="Ширина_и_высота">Ширина и высота</h3> -<p>Вы можете использовать атрибуты <code>width</code> и <code>height</code>, чтобы указать ширину и высоту вашего изображения . Ширину и высоту вашего избражение можете найти различными способами. Например на Mac можно использовать <kbd>Cmd</kbd> + <kbd>I</kbd> что получить информацию по изображению. Повторяя наш пример, мы можем сделать так:</p> +<p>Вы можете использовать атрибуты <code>width</code> и <code>height</code>, чтобы указать ширину и высоту вашего изображения . Ширину и высоту вашего избражение можете найти различными способами. Например, на Mac можно использовать <kbd>Cmd</kbd> + <kbd>I</kbd> чтобы получить информацию по изображению. Повторяя наш пример, мы можем сделать так:</p> <pre class="brush: html notranslate"><img src="images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; @@ -123,15 +125,15 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML <p>Это хорошая практика, в результате страница загрузится быстрей и более гладко.</p> -<p>Однако, вы не должны изменять размеры ваших изображений используя HTML аттрибуты. Если вы установите размер изображения слишком большим, то в конечном итоге вы столкнётесь с изображениями, которые выглядят зернистыми, размытыми, или слишком маленькими, и потратите трафик для загрузки изображения, которое не будет соответствовать нуждам пользователя. Конечное изображение может также выглядеть искажённым, если вы не сохраните правильное <a href="https://en.wikipedia.org/wiki/Aspect_ratio_(image)">соотношение сторон</a>. Рекомендуется использовать графический редактор для подгонки изображения к нужному размеру, перед вставкой его на вашу вэб-страницу.</p> +<p>Однако, вы не должны изменять размеры ваших изображений используя HTML аттрибуты. Если вы установите размер изображения слишком большим, то в конечном итоге вы сталкнётесь с изображениями, которые выглядят зернистыми, размытыми, или слишком маленькими, и потратите трафик для загрузки изображения, которое не будет соответствовать нуждам пользователя. Конечное изображение может также выглядеть искажённым, если вы не сохраните правильное <a href="https://en.wikipedia.org/wiki/Aspect_ratio_(image)">соотношение сторон</a>. Рекомендуется использовать графический редактор для подгонки изображения к нужному размеру, перед вставкой его на вашу вэб-страницу.</p> <div class="note"> -<p><strong>Примечание</strong>: Если вам нужно задать размеры вашего изображения, взамен вы можете использовать <a href="/en-US/docs/Learn/CSS">CSS</a>.</p> +<p><strong>Примечание</strong>: Если вам нужно задать размеры вашего изображения, взамен вы можете использовать <a href="/ru/docs/Learn/CSS">CSS</a>.</p> </div> <h3 id="Заголовок_изображения">Заголовок изображения</h3> -<p>Как и для <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Adding_supporting_information_with_%3Ctitle%3E">ссылок</a>, вы можете также добавить атрибут <code>title</code> для изображений, чтобы обеспечить дополнительную подтверждающую информацию если это необходимо. В нашем примере, мы можем это сделать так:</p> +<p>Как и для <a href="/ru/docs/Learn/HTML/Введение_в_HTML/Создание_гиперссылок">ссылок</a>, вы можете также добавить атрибут <code>title</code> для изображений, чтобы обеспечить дополнительную подтверждающую информацию если это необходимо. В нашем примере, мы можем это сделать так:</p> <pre class="brush: html notranslate"><img src="images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; @@ -148,7 +150,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML <h3 id="Активное_обучение_встраивание_изображения">Активное обучение: встраивание изображения</h3> -<p>Наступила очередь немного поиграть! Этот раздел активного обучения поможет вам выполнить простое упражнение по встраиванию. Вы будете обеспечены простым {{htmlelement("img")}} тэгом; мы хотели бы чтобы вы встроили изображение расположенное по следующей ссылке:</p> +<p>Наступила очередь немного поиграть! Этот раздел активного обучения поможет вам выполнить простое упражнение по встраиванию. Вы будете обеспечены простым {{htmlelement("img")}} тэгом; мы хотели бы чтобы вы встроили изображение расположенное по следующей ссылке:</p> <p>https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg</p> @@ -335,20 +337,20 @@ window.addEventListener("load", drawOutput); <p>{{ EmbedLiveSample('Playable_code_2', 700, 500) }}</p> -<h2 id="CSS_background-images">CSS background-images</h2> +<h2 id="Фоновые_изображения_CSS">Фоновые изображения CSS</h2> -<p>Также альтернативой является использование css изображений (или JavaScript, но это совсем другая история). CSS-свойство {{cssxref("background-image")}} , и другие <code>background-*</code> свойства, применяются для контроля размещения фонового изображения. К примеру, чтобы залить фон каждого параграфа страницы, необходимо сделать следующее:</p> +<p>Вы можете использовать CSS для встраивания изображений в веб-страницы (или JavaScript, но это совсем другая история). CSS-свойство {{cssxref("background-image")}} , и другие <code>background-*</code> свойства, применяются для контроля размещения фонового изображения. К примеру, чтобы залить фон каждого параграфа страницы, необходимо сделать следующее:</p> <pre class="brush: css notranslate">p { background-image: url("images/dinosaur.jpg"); }</pre> -<p>Получившееся в конечном итоге изображение можно легко позиционировать и контролировать, в отличие от его HTML аналога. Так зачем же париться с HTML изображениями? Согласено вышесказанному, фоновые изображения CSS используются только в качестве украшения. Если вы хотите просто добавить что-нибудь красивое на вашу страницу, всё круто. Тем не менее, такого рода изображения не имеют семантического смысла вообще. Они не могут иметь каких-то текстовых эквивалентов, видимых посетителю, и тп. Это звёздное время для HTML!</p> +<p>Получившееся в конечном итоге изображение можно легко позиционировать и контролировать, в отличие от его HTML аналога. Так зачем же возиться с HTML изображениями? Согласено вышесказанному, фоновые изображения CSS используются только в качестве украшения. Если вы просто хотите добавить что-то красивое на свою страницу, чтобы улучшить визуальные эффекты, это нормально. Тем не менее, такого рода изображения не имеют семантического смысла вообще. Они не могут иметь каких-то текстовых эквивалентов, видимых посетителю, и тп. Это звёздное время для HTML!</p> <p>Итог: если изображение имеет важность, в контексте содержимого вашей страницы, вам следует использовать HTML изображения. Если же картинка является банальной декорацией, используйте фоновые изображения CSS.</p> <div class="note"> -<p><strong>Замечание</strong>: Вы можете узнать больше о <a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">CSS background images</a> в нашей теме о <a href="/en-US/docs/Learn/CSS">CSS</a>.</p> +<p><strong>Замечание</strong>: Вы можете узнать больше о <a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">фоновых изображениях CSS</a> в нашей теме о <a href="/en-US/docs/Learn/CSS">CSS</a>.</p> </div> <p>Вот и всё. Мы детально описали изображения и заголовки. В следующей статье мы перейдём на новый уровень, затронув тему встраивания видео и аудио в веб-страницу.</p> diff --git a/files/ru/learn/html/введение_в_html/structuring_a_page_of_content/index.html b/files/ru/learn/html/введение_в_html/structuring_a_page_of_content/index.html index 7ade9310c1..b5bb7fa235 100644 --- a/files/ru/learn/html/введение_в_html/structuring_a_page_of_content/index.html +++ b/files/ru/learn/html/введение_в_html/structuring_a_page_of_content/index.html @@ -68,7 +68,7 @@ translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content <h2 id="Советы_и_подсказки">Советы и подсказки</h2> <ul> - <li>Используйте <a href="https://validator.w3.org/">W3C HTML validator</a> для проверки вашего HTML; вы получите бонусные баллы, если он будет проверять как можно больше (строка «googleapis» используется для импорта пользовательских шрифтов на страницу из службы Google Fonts, она не проверяет, но не беспокойтесь об этом слишком много - валидатор - полезный инструмент, но 100% проверка является идеальным, а не полностью необходимым).</li> + <li>Используйте <a href="https://validator.w3.org/">W3C HTML validator</a> для проверки вашего HTML; вы получите бонусные баллы, если он будет проверять как можно больше (строка «googleapis» используется для импорта пользовательских шрифтов на страницу из службы Google Fonts, она не проверяет, но не беспокойтесь об этом слишком много - валидатор - полезный инструмент, но 100% проверка является идеальной, а не полностью необходимой).</li> <li>Вам не нужно знать CSS, чтобы сделать эту оценку; вам просто нужно поместить предоставленный CSS внутри HTML-элемента.</li> <li>Предоставленный CSS разработан таким образом, что при добавлении правильных структурных элементов в разметку они будут отображаться зелеными на отображаемой странице.</li> <li>Если вы застряли и не можете понять, какие элементы куда помещать, часто помогает вывести простую блок-схему макета страницы и сделать надписи на элементах, которые, по вашему мнению, должны обернуть каждый блок.</li> diff --git a/files/ru/learn/javascript/asynchronous/introducing/index.html b/files/ru/learn/javascript/asynchronous/introducing/index.html index b25ca4037e..340938e010 100644 --- a/files/ru/learn/javascript/asynchronous/introducing/index.html +++ b/files/ru/learn/javascript/asynchronous/introducing/index.html @@ -105,7 +105,7 @@ let blob = response.blob(); <p>Первый параметр — тип прослушиваемого события, второй параметр — функция обратного вызова, вызываемая при срабатывании события.</p> -<p>При передаче функциии обратного вызова как аргумента в другую функцию, мы передаем только ссылку на функцию как аргумент, следовательно коллбэк функция <strong>не</strong> выполняется мгновенно. Где-то существует "обратный вызов" (отсюда и название), выполняющийся асинхронно внутри тела, содержащего функцию. Эта функция должна выполнять функцию обратногго вызова в нужный момент.</p> +<p>При передаче функциии обратного вызова как аргумента в другую функцию, мы передаем только ссылку на функцию как аргумент, следовательно колбэк функция <strong>не</strong> выполняется мгновенно. Где-то существует "обратный вызов" (отсюда и название), выполняющийся асинхронно внутри тела, содержащего функцию. Эта функция должна выполнять функцию обратного вызова в нужный момент.</p> <p>Вы можете написать свою собственную функцию, содержащую функцию обратного вызова. Давайте взглянем на еще один пример, в котором происходит загрузка ресурсов через <a href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code> API</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html">запустите пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html">посмотрите исходный код</a>):</p> @@ -143,7 +143,7 @@ gods.forEach(function (eachName, index){ console.log(index + '. ' + eachName); });</pre> -<p>В этом примере мы перебираем массив с именами греческих богов и выводим индексы и значения в консоль. Ожидаемый параметр для <code>forEach() </code> — это функцияобратного вызова, которая содержит два параметра: ссылку на имя массива и значения индексов. Однако эта функция не ожидает никаких действий — она запускается немедленно.</p> +<p>В этом примере мы перебираем массив с именами греческих богов и выводим индексы и значения в консоль. Ожидаемый параметр для <code>forEach() </code> — это функция обратного вызова, которая содержит два параметра: ссылку на имя массива и значения индексов. Однако эта функция не ожидает никаких действий — она запускается немедленно.</p> <h2 id="Промисы">Промисы</h2> diff --git a/files/ru/learn/javascript/asynchronous/таймауты_и_интервалы/index.html b/files/ru/learn/javascript/asynchronous/таймауты_и_интервалы/index.html index 00506c2a14..e3aa0c72b8 100644 --- a/files/ru/learn/javascript/asynchronous/таймауты_и_интервалы/index.html +++ b/files/ru/learn/javascript/asynchronous/таймауты_и_интервалы/index.html @@ -61,7 +61,7 @@ translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals <p>Как следствие, такой код, как setTimeout (fn, 0), будет выполняться, как только стек будет пуст, а не сразу. Если вы выполните такой код, как setTimeout (fn, 0), но сразу после выполнения цикла, который насчитывает от 1 до 10 миллиардов, ваш обратный вызов будет выполнен через несколько секунд.</p> </div> -<p>В слудующем примере, браузер будет ожидать две секунды перед тем как выполнит анонимную функцию, тогда отобразит сообщение (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">живой пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">исходный код</a>):</p> +<p>В следующем примере, браузер будет ожидать две секунды перед тем как выполнит анонимную функцию, тогда отобразит сообщение (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">живой пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">исходный код</a>):</p> <pre class="brush: js notranslate">let myGreeting = setTimeout(function() { alert('Hello, Mr. Universe!'); @@ -151,7 +151,7 @@ clearInterval(myInterval);</pre> <p>Несколько подсказок для вас:</p> <ul> - <li>Вы можете структурировать и стилизовать разметку кнопок по своему усмотрению; просто убедитесь, что вы используете семантический HTML с ковычками, которые позволяют захватывать ссылки на кнопки с помощью JavaScript.</li> + <li>Вы можете структурировать и стилизовать разметку кнопок по своему усмотрению; просто убедитесь, что вы используете семантический HTML с кавычками, которые позволяют захватывать ссылки на кнопки с помощью JavaScript.</li> <li>Вероятно, вы захотите создать переменную, которая начинается с 0, а затем увеличивается на единицу каждую секунду с использованием постоянного цикла.</li> <li>Этот пример проще создать без использования объекта Date (), как мы это делали в нашей версии, но он будет менее точен - вы не можете гарантировать, что обратный вызов сработает ровно через 1000 мс. Более точным способом было бы запустить startTime = Date.now (), чтобы получить метку времени, когда пользователь нажал кнопку запуска, а затем выполнить Date.now () - startTime, чтобы получить количество миллисекунд после того, как была нажата кнопка запуска .</li> <li>Вам также нужно рассчитать количество часов, минут и секунд как отдельные значения, а затем отображать их вместе в строке после каждой итерации цикла. На втором счетчике вы можете отработать каждую из них.</li> @@ -168,7 +168,7 @@ clearInterval(myInterval);</pre> </ul> <div class="blockIndicator note"> -<p><strong>Note</strong>: Если вы застрали, вы можете <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">увидеть нашу версию</a> (см. также <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">исходный код</a> ).</p> +<p><strong>Note</strong>: Если вы застряли, вы можете <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">увидеть нашу версию</a> (см. также <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">исходный код</a> ).</p> </div> <h2 id="Что_нужно_помнить_о_setTimeout_и_setInterval">Что нужно помнить о <code>setTimeout ()</code> и <code>setInterval ()</code></h2> @@ -359,7 +359,7 @@ div { <p>Разместите {{htmlelement("script")}} элемент перед <code></body></code> .</p> </li> <li> - <p>Разместите следующий JavaScript код в <code><script></code> . Здесь вы сохраняете ссылку на <code><div></code> внутри, устанавливаете дяпеременной <code>rotateCount</code> значение <code>0</code>, устанавливаете неинициализированную переменную, которая позже будет использоваться для хранения ссылки на вызов <code>requestAnimationFrame()</code>, и устанавливатете для переменной <code>startTime</code> значение <code>null</code>, которая будет позже использоваться для хранения времени начала <code>requestAnimationFrame()</code>.</p> + <p>Разместите следующий JavaScript код в <code><script></code> . Здесь вы сохраняете ссылку на <code><div></code> внутри, устанавливаете дяпеременной <code>rotateCount</code> значение <code>0</code>, устанавливаете неинициализированную переменную, которая позже будет использоваться для хранения ссылки на вызов <code>requestAnimationFrame()</code>, и устанавливаете для переменной <code>startTime</code> значение <code>null</code>, которая будет позже использоваться для хранения времени начала <code>requestAnimationFrame()</code>.</p> <pre class="brush: js notranslate">const spinner = document.querySelector('div'); let rotateCount = 0; @@ -368,7 +368,7 @@ let rAF; </pre> </li> <li> - <p>Под предыдущим котом вставьте функцию <code>draw()</code> соторая будет использоваться для хранения нашешо кода анимации, который включает параметр <code>timestamp</code> :</p> + <p>Под предыдущим кодом вставьте функцию <code>draw()</code> соторая будет использоваться для хранения нашешо кода анимации, который включает параметр <code>timestamp</code> :</p> <pre class="brush: js notranslate">function draw(timestamp) { @@ -513,7 +513,7 @@ const result = document.querySelector('.result');</pre> }</pre> </li> <li> - <p>Затем добавьте функцию draw(), которая анимирует спиннер. Это очень похоже на версию из предыдущего примера просторо счетчика:</p> + <p>Затем добавьте функцию draw(), которая анимирует спиннер. Это очень похоже на версию из предыдущего примера простого счетчика:</p> <pre class="brush: js notranslate">function draw(timestamp) { if(!startTime) { @@ -595,16 +595,16 @@ function start() { }; }</pre> - <p>Пройдите через это:</p> + <p>Выполните следующие инструкции:</p> <ol> - <li>Во-первых, отмените анимацию спиннера с помощью {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (всегда полезно очистить ненужный процессы), и скройте контейнер счетчика.</li> + <li>Во-первых, отмените анимацию спиннера с помощью {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (всегда полезно очистить ненужные процессы), и скройте контейнер счетчика.</li> <li>Затем, отобразите абзац с результатами и установите для его текстового содержимого значение "PLAYERS GO!!" чтобы сообщить игрокам, что теперь они могут нажать свою кнопку, чтобы победить.</li> <li>Прикрепите к документу прослушиватель событий <code><a href="/en-US/docs/Web/API/Document/keydown_event">keydown</a></code> . При нажатии любой кнопки запускается функция <code>keyHandler()</code>.</li> <li>Внутри <code>keyHandler()</code>, код включает обьект события в качестве параметра (представленного <code>e</code>) — его свойство {{domxref("KeyboardEvent.key", "key")}} содержит только что нажатую клавишу, и вы можете использовать это для твета на определенные нажатия клавиш определенными действиями.</li> <li>Установите для переменной <code>isOver</code> значение false, чтобы мы могли отслеживать, были ли нажаты правильные клавиши, чтобы игрок 1 или 2 выиграл. Мы не хотим, чтобы игра заканчивалась при нажатии неправильной клваиши.</li> <li>Регистрация <code>e.key</code> в консоли, это полезный способ узнать значение различных клавиш, которые вы нажимаете.</li> - <li>Когда <code>e.key</code> принимает значение "a", отобразить сообщение о том, что Player 1 выиграл, а когда <code>e.key</code> это "l", отобразить сообщение о том, что Player 2 выиграл. (<strong>Note:</strong> Это будет работать только со строчными буквами a и l — если переданы прописные A или L , это считается другими клавишами!) Если была нажата одна из этих клавишь, установите для <code>isOver</code> значение <code>true</code>.</li> + <li>Когда <code>e.key</code> принимает значение "a", отобразить сообщение о том, что Player 1 выиграл, а когда <code>e.key</code> это "l", отобразить сообщение о том, что Player 2 выиграл. (<strong>Note:</strong> Это будет работать только со строчными буквами a и l — если переданы прописные A или L , это считается другими клавишами!) Если была нажата одна из этих клавиш, установите для <code>isOver</code> значение <code>true</code>.</li> <li>Только еслиf <code>isOver</code> равно <code>true</code>, удалите прослушиватель событий <code>keydown</code> с помощью {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} чтобы после того, как произошло выигрышное нажатие, больше не было возможности ввода с клавиатуры, чтобы испортить финальный результат игры. Вы также используете <code>setTimeout()</code> для вызова <code>reset()</code> через 5 секунд — как обьяснялось ранее, эта функция сбрасывает игру обратно в исходное состояние, чтобы можно было начать новую игру.</li> </ol> </li> diff --git a/files/ru/learn/server-side/django/введение/index.html b/files/ru/learn/server-side/django/введение/index.html index 1eaffac0cf..4bff707908 100644 --- a/files/ru/learn/server-side/django/введение/index.html +++ b/files/ru/learn/server-side/django/введение/index.html @@ -3,6 +3,7 @@ title: Django введение slug: Learn/Server-side/Django/Введение tags: - Python + - django - Вступление - Джанго - Начинающим @@ -13,13 +14,13 @@ translation_of: Learn/Server-side/Django/Introduction <div>{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}</div> -<p class="summary">В первой статье о Django мы отвечаем на вопрос «Что есть Django?» и даём обзор того, что делает его особенным. Мы опишем основные функции, в том числе некоторые из расширенных функций, которые у нас не будет времени подробно рассмотреть в этом модуле. Мы также покажем вам некоторые основные строительные блоки приложения Django (хотя на данный момент у вас еще не будет среды разработки для тестирования).</p> +<p class="summary">В первой статье о Django мы отвечаем на вопрос «Что такое Django?» и даём обзор того, что делает его особенным. Мы опишем основные функции, в том числе некоторые из расширенных функций, которые у нас не будет времени подробно рассмотреть в этом модуле. Мы также покажем вам некоторые основные строительные блоки приложения Django (хотя на данный момент у вас ещё не будет среды разработки для тестирования).</p> <table class="learn-box standard-table"> <tbody> <tr> <th scope="row">Требования:</th> - <td>Базовая компьютерная грамотность. Общее понимание <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">server-side website programming</a>, и в частности, механики <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">client-server interactions in websites</a>.</td> + <td>Базовая компьютерная грамотность. Общее понимание <a href="https://developer.mozilla.org/ru/docs/Learn/Server-side/First_steps">server-side website programming</a>, и в частности, механики <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">client-server interactions in websites</a>.</td> </tr> <tr> <th scope="row">Задача:</th> @@ -28,51 +29,49 @@ translation_of: Learn/Server-side/Django/Introduction </tbody> </table> -<h2 id="Что_есть_Django">Что есть Django?</h2> +<h2 id="Что_такое_Django">Что такое Django?</h2> -<p>Django - это высокоуровневый Python веб-фреймворк, который позволяет быстро создавать безопасные и поддерживаемые веб-сайты. Созданный опытными разработчиками, Django берет на себя большую часть хлопот веб-разработки, поэтому вы можете сосредоточиться на написании своего веб-приложения без необходимости изобретать велосипед . Он бесплатный и с открытым исходным кодом, имеет активное процветающее сообщество, отличную документацию и множество вариантов как бесплатной, так и платной поддержки.</p> +<p>Django — это высокоуровневый Python веб-фреймворк, который позволяет быстро создавать безопасные и поддерживаемые веб-сайты. Созданный опытными разработчиками, Django берёт на себя большую часть хлопот веб-разработки, поэтому вы можете сосредоточиться на написании своего веб-приложения без необходимости изобретать велосипед. Он бесплатный и с открытым исходным кодом, имеет растущее и активное сообщество, отличную документацию и множество вариантов как бесплатной, так и платной поддержки.</p> <p>Django помогает писать программное обеспечение, которое будет:</p> <dl> <dt>Полным</dt> - <dd>Django следует философии «Батарейки в комплекте» и предоставляет почти все, что разработчики могут захотеть сделать «из коробки». Поскольку все, что вам нужно, является частью единого «продукта», все это безупречно работает вместе, соответствует последовательным принципам проектирования, и имеет обширную и <a href="https://docs.djangoproject.com/en/3.0/">актуальную документацию</a>.</dd> + <dd>Django следует философии «Всё включено» и предоставляет почти всё, что разработчики могут захотеть сделать «из коробки». Поскольку всё, что вам нужно, является частью единого «продукта», всё это безупречно работает вместе, соответствует последовательным принципам проектирования и имеет обширную и <a href="https://docs.djangoproject.com/en/3.0/">актуальную документацию</a>.</dd> <dt>Разносторонним</dt> - <dd>Django может быть (и был) использован для создания практически любого типа веб-сайтов - от систем управления контентом и wiki до социальных сетей и новостных сайтов. Он может работать с любой клиентской средой и может доставлять контент практически в любом формате (включая HTML, RSS-каналы, JSON, XML и т.д.). Сайт, который вы сейчас читаете, создан с помощью Django!</dd> - <dd>Хотя оDjango предоставляет решения практически для любой функциональности, которая вам может понадобиться (например, для нескольких популярных баз данных, шаблонизаторов и т. д.), внутренне он также может быть расширен сторонними компонентами, если это необходимо.</dd> + <dd>Django может быть (и был) использован для создания практически любого типа веб-сайтов — от систем управления контентом и wiki до социальных сетей и новостных сайтов. Он может работать с любой клиентской средой и может доставлять контент практически в любом формате (включая HTML, RSS-каналы, JSON, XML и т. д.). Сайт, который вы сейчас читаете, создан с помощью Django!</dd> + <dd>Хотя Django предоставляет решения практически для любой функциональности, которая вам может понадобиться (например, для нескольких популярных баз данных, шаблонизаторов и т. д.), внутренне он также может быть расширен сторонними компонентами, если это необходимо.</dd> <dt>Безопасным</dt> - <dd>Django помогает разработчикам избежать многих распространенных ошибок безопасности, предоставляя фреймворк, разработанный чтобы «делать правильные вещи» для автоматической защиты сайта. Например, Django предоставляет безопасный способ управления учетными записями пользователей и паролями, избегая распространенных ошибок, таких как размещение информации о сеансе в файлы cookie, где она уязвима (вместо этого файлы cookie содержат только ключ, а фактические данные хранятся в базе данных) или непосредственное хранение паролей. вместо хэша пароля.<br> - <br> - Хэш пароля - это значение фиксированной длины, созданное путем обработки пароля через <em><a href="https://ru.wikipedia.org/wiki/%D0%9A%D1%80%D0%B8%D0%BF%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B0%D1%8F_%D1%85%D0%B5%D1%88-%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D1%8F">криптографическую хэш-функцию</a>. </em>Django может проверить правильность введенного пароля, пропустив его через хэш-функцию и сравнив вывод с сохраненным значением хэша. Благодаря «одностороннему» характеру функции, даже если сохраненное хэш-значение скомпрометировано, злоумышленнику будет сложно определить исходный пароль.<br> - <br> - Django, по умолчанию, обеспечивает защиту от многих уязвимостей, включая SQL-инъекцию, межсайтовый скриптинг, подделку межсайтовых запросов и кликджекинг (см. <a href="/ru/docs/Web/Security">Website security</a> для получения дополнительной информации об этих атаках).</dd> + <dd>Django помогает разработчикам избежать многих распространённых ошибок безопасности, предоставляя фреймворк, разработанный чтобы «делать правильные вещи» для автоматической защиты сайта. Например, Django предоставляет безопасный способ управления учётными записями пользователей и паролями, избегая распространённых ошибок, таких как размещение информации о сеансе в файлы cookie, где она уязвима (вместо этого файлы cookie содержат только ключ, а фактические данные хранятся в базе данных) или непосредственное хранение паролей вместо хэша пароля.</dd> + <dd><em>Хэш пароля </em>—<em> это значение фиксированной длины, созданное путём обработки пароля через <a href="https://ru.wikipedia.org/wiki/%D0%9A%D1%80%D0%B8%D0%BF%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B0%D1%8F_%D1%85%D0%B5%D1%88-%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D1%8F">криптографическую хэш-функцию</a>. Django может проверить правильность введённого пароля, пропустив его через хэш-функцию и сравнив вывод с сохранённым значением хэша. Благодаря «одностороннему» характеру функции, даже если сохранённое хэш-значение скомпрометировано, злоумышленнику будет сложно определить исходный пароль.</em></dd> + <dd>Django, по умолчанию, обеспечивает защиту от многих уязвимостей, включая SQL-инъекцию, межсайтовый скриптинг, подделку межсайтовых запросов и кликджекинг (см. <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/Server-side/First_steps/%D0%92%D0%B5%D0%B1_%D0%91%D0%B5%D0%B7%D0%BE%D0%BF%D0%B0%D1%81%D0%BD%D0%BE%D1%81%D1%82%D1%8C">Website security</a> для получения дополнительной информации об этих атаках).</dd> <dt>Масштабируемым</dt> - <dd>Django использует компонентную “<a href="https://en.wikipedia.org/wiki/Shared_nothing_architecture">shared-nothing</a>” архитектуру (каждая её часть независима от других и, следовательно, может быть заменена, либо изменена). Четкое разделение между частями означает, что Django может масштабироваться при увеличении трафика путем добавления оборудования на любом уровне: серверы кэширования, серверы баз данных или серверы приложений. Одни из самых загруженных сайтов успешно масштабировали Django (например, Instagram и Disqus).</dd> + <dd>Django использует компонентную “<a href="https://en.wikipedia.org/wiki/Shared_nothing_architecture">shared-nothing</a>” архитектуру (каждая её часть независима от других и, следовательно, может быть заменена или изменена, если это необходимо). Чёткое разделение частей означает, что Django может масштабироваться при увеличении трафика, путём добавления оборудования на любом уровне: серверы кэширования, серверы баз данных или серверы приложений. Одни из самых загруженных сайтов успешно масштабировали Django (например, Instagram и Disqus, если назвать только два из них).</dd> <dt>Удобным в сопровождении</dt> - <dd>Код Django написан с использованием принципов и шаблонов проектирования, которые поощряют создание поддерживаемого и повторно используемого кода. В частности, в нем используется принцип «Don't Repeat Yourself» (DRY, не повторяйся), поэтому нет ненужного дублирования, что сокращает объем кода. Django также способствует группированию связанных функциональных возможностей в повторно используемые «приложения» и, на более низком уровне, группирует связанный код в модули (в соответствии с шаблоном Model View Controller (MVC)).</dd> + <dd>Код Django написан с использованием принципов и шаблонов проектирования, которые поощряют создание поддерживаемого и повторно используемого кода. В частности, в нём используется принцип «Don't Repeat Yourself» (DRY, «не повторяйся»), поэтому нет ненужного дублирования, что сокращает объём кода. Django также способствует группированию связанных функциональных возможностей в повторно используемые «приложения» и, на более низком уровне, группирует связанный код в модули (в соответствии с шаблоном <a href="https://developer.mozilla.org/en-US/docs/Glossary/MVC">Model View Controller (MVC)</a>).</dd> <dt>Переносным</dt> - <dd>Django написан на Python, который работает на многих платформах. Это означает, что вы не привязаны к какой-либо конкретной серверной платформе и можете запускать приложения на многих версиях Linux, Windows и Mac OS X. Кроме того, Django хорошо поддерживается многими веб-хостингами, которые часто предоставляют определенную инфраструктуру и документацию для размещения сайтов Django.</dd> + <dd>Django написан на Python, который работает на многих платформах. Это означает, что вы не привязаны к какой-либо конкретной серверной платформе и можете запускать приложения на многих версиях Linux, Windows и Mac OS X. Кроме того, Django хорошо поддерживается многими веб-хостингами, которые часто предоставляют определённую инфраструктуру и документацию для размещения сайтов Django.</dd> </dl> <h2 id="Как_он_появился">Как он появился?</h2> -<p>Django был разработан в период с 2003 по 2005 год командой, которая занималась созданием и обслуживанием газетных веб-сайтов. После создания нескольких сайтов, команда начала повторно использовать множество общего кода и шаблонов проектирования. Этот общий код эволюционировал в веб-фреймворк "Django", как open-source проект в Июле 2005 года.</p> +<p>Django был разработан в период с 2003 по 2005 год командой, которая занималась созданием и обслуживанием газетных веб-сайтов. После создания нескольких сайтов, команда начала повторно использовать множество общего кода и шаблонов проектирования. Этот общий код эволюционировал в веб-фреймворк, который превратился в проект "Django" с открытым исходным кодом в июле 2005 года.</p> -<p>Django продолжает расти и улучшаться с момента его первого релиза (1.0) в сентябре 2008 года до недавно выпущенной версии 2.0 (2017). В каждой версии добавлены новые функциональные возможности и исправлены ошибки, начиная от поддержки новых типов баз данных, шаблонизаторов и кэширования, до добавления «общих» функций и классов (уменьшающих объем кода, который разработчики должны писать для ряда задач).</p> +<p>Django продолжает расти и улучшаться с момента его первого релиза (1.0) в сентябре 2008 года до недавно выпущенной версии 3.1 (2020). В каждой версии добавлены новые функциональные возможности и исправлены ошибки, начиная от поддержки новых типов баз данных, шаблонизаторов и кэширования, до добавления «общих» функций просмотра и классов (уменьшающих объём кода, который разработчики должны писать для ряда программных задач).</p> <div class="note"> -<p><strong>Заметка</strong>: Ознакомтесь с <a href="https://docs.djangoproject.com/en/stable/releases/">примечаниями к версии </a> на сайте <span style="line-height: 1.5;">Django, чтобы увидеть что изменилось в последних версиях, и как много работы было проделано чтобы улучшить Django.</span></p> +<p><strong>Заметка</strong>: Ознакомтесь с <a href="https://docs.djangoproject.com/en/3.1/releases/">примечаниями к версии</a> на сайте <span style="line-height: 1.5;">Django, чтобы увидеть что изменилось в последних версиях и как много работы было проделано, чтобы улучшить Django.</span></p> </div> -<p>Django - это процветающий совместный проект с открытым исходным кодом, в котором заняты многие тысячи пользователей и участников. Несмотря на то, что у него все еще есть некоторые особенности, которые отражают его происхождение, Django превратился в универсальную среду, способную разрабатывать веб-сайты любого типа.</p> +<p>Django — это процветающий совместный проект с открытым исходным кодом, в котором заняты многие тысячи пользователей и участников. Несмотря на то, что у него всё ещё есть некоторые особенности, которые отражают его происхождение, Django превратился в универсальный фреймворк, способный разрабатывать веб-сайты любого типа.</p> <h2 id="Насколько_популярен_Django">Насколько популярен Django?</h2> -<p>Нет никаких доступных и окончательных оценок популярности серверных фреймворков (хотя сайты, подобные Hot Framework, пытаются оценить популярность, используя такие механизмы, как подсчет количества проектов на GitHub и вопросов на StackOverflow для каждой платформы). Лучший вопрос - "Достаточно ли Django популярен, чтобы избежать проблем непопулярных платформ?". Продолжает ли он развиваться? Можете ли вы получить помощь, если вам это нужно? Найдёте ли вы работу, если вы изучите Django?</p> +<p>Нет никаких доступных и окончательных оценок популярности серверных фреймворков (хотя сайты наподобие <a href="http://hotframeworks.com/">Hot Framework</a> и пытаются оценить популярность, используя такие механизмы, как подсчёт количества проектов на GitHub и вопросов на StackOverflow для каждой платформы). Лучший вопрос — «достаточно ли Django популярен», чтобы избежать проблем непопулярных платформ. Продолжает ли он развиваться? Можете ли вы получить помощь, если вам нужно? Найдёте ли вы оплачиваемую работу, если изучите Django?</p> -<p>Основываясь на количестве крупных сайтов, которые используют Django, количестве участников и количестве людей, предоставляющих как бесплатную, так и платную поддержку, можно полагать, что Django - популярный фреймворк.</p> +<p>Основываясь на количестве крупных сайтов, которые используют Django, количестве участников и количестве людей, предоставляющих как бесплатную, так и платную поддержку, можно ответить: да, Django — популярный фреймворк!</p> -<p>Django используют такие крупные сайты, как Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest, и Open Stack (источник: <a href="https://www.djangoproject.com/">домашняя страница Django</a>).</p> +<p>Django используют такие крупные сайты, как Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest и Open Stack (источник: <a href="https://www.djangoproject.com/start/overview/">обзорная страница Django</a>).</p> <h2 id="Является_ли_Django_гибким">Является ли Django гибким?</h2> @@ -86,17 +85,17 @@ translation_of: Learn/Server-side/Django/Introduction <h2 id="Как_выглядит_код_Django">Как выглядит код Django?</h2> -<p>В традиционном информационом веб-сайте, веб-приложение ожидает запросов HTTP от веб-браузера (или другого клиента). Когда запрос получен, приложение разрабатывает то, что необходимо на основе URL-адреса и, возможно, информации в <code>POST</code> или в <code>GET</code> запросах. В зависимости от того, что требуется, он может читать или записывать информацию из базы данных или выполнять другие задачи, необходимые для удовлетворения запроса. Приложение затем вернет ответ веб-браузеру, часто динамически создавая страницу HTML для отображения браузера, вставляя полученные данные в HTML шаблон.</p> +<p>На традиционном информационом веб-сайте веб-приложение ожидает HTTP-запросы от веб-браузера (или другого клиента). Когда запрос получен, приложение разрабатывает то, что необходимо на основе URL-адреса и, возможно, данных в <code>POST</code> или <code>GET</code> запросах. В зависимости от того, что требуется, далее он может читать или записывать информацию из базы данных или выполнять другие задачи, необходимые для удовлетворения запроса. Затем приложение вернёт ответ веб-браузеру, часто динамически создавая HTML-страницу для отображения в браузере, вставляя полученные данные в HTML-шаблон.</p> -<p>Веб-приложения написанные на Django обычно группируют код, который обрабатывает каждый из этих шагов, в отдельные файлы:</p> +<p>Веб-приложения, написанные на Django, обычно группируют код, который обрабатывает каждый из этих шагов, в отдельные файлы:</p> <p><img alt="" src="https://mdn.mozillademos.org/files/13931/basic-django.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> <ul> - <li><strong>URLs: </strong>Хотя можно обрабатывать запросы с каждого URL-адреса с помощью одной функции, гораздо удобнее писать отдельную функцию для обработки каждого ресурса. URL-mapper используется для перенаправления HTTP-запросов в соответствующее представление на основе URL-адреса запроса. URL-mapper также может извлекать данные из URL-адреса в соответствии с заданным шаблоном и передавать их в соответствующую функцию в виде аргументов.</li> - <li><strong>View:</strong> Представление (view) - это функция обработчика запросов, которая получает HTTP-запросы и возвращает ответы. View имеет доступ к данным через модели (необходимым для удовлетворения запросов и делегирования ответа в шаблоны).</li> + <li><strong>URLs: </strong>Хотя можно обрабатывать запросы с каждого URL-адреса с помощью одной функции, гораздо удобнее писать отдельную функцию для обработки каждого ресурса. URL-маршрутизатор используется для перенаправления HTTP-запросов в соответствующее представление на основе URL-адреса запроса. Кроме того, URL-маршрутизатор может извлекать данные из URL-адреса в соответствии с заданным шаблоном и передавать их в соответствующую функцию отображения (view) в виде аргументов.</li> + <li><strong>View:</strong> View (англ. «отображение») — это функция обработчика запросов, которая получает HTTP-запросы и возвращает ответы. Функция view имеет доступ к данным, необходимым для удовлетворения запросов, и делегирует ответы в шаблоны через модели.</li> <li><strong>Models:</strong> Модели представляют собой объекты Python, которые определяют структуру данных приложения и предоставляют механизмы для управления (добавления, изменения, удаления) и выполнения запросов в базу данных.</li> - <li><strong>Templates:</strong> Template (шаблон) - это текстовый файл определяющий структуру или разметку страницы (например HTML страницы), с полями для подстановки используемыми для представления актуального содержимого. <em>View</em> может динамически создавать HTML страницы, используя HTML шаблоны и заполняя их данными из модели (<em>model).</em> Шаблон может быть использован для определения структуры файлов любых типов, не обязательно HTML.</li> + <li><strong>Templates:</strong> Template (англ. «шаблон») — это текстовый файл, определяющий структуру или разметку страницы (например HTML-страницы), с полями для подстановки, которые используются для вывода актуального содержимого. <em>View</em> может динамически создавать HTML-страницы, используя HTML-шаблоны и заполняя их данными из модели (<em>model).</em> Шаблон может быть использован для определения структуры файлов любых типов, не обязательно HTML.</li> </ul> <div class="note"> @@ -106,40 +105,37 @@ translation_of: Learn/Server-side/Django/Introduction <ul> </ul> -<p>Далее разделы дадут Вам понимание того как выглядят основные части Django (мы их изучим более детально чуть позже на курсе, когда будет настраивать окружение разработчика). </p> +<p>Следующие разделы дадут вам понимание того, как выглядят основные части Django (мы их изучим более детально чуть позже на курсе, когда будет настраивать окружение разработчика). </p> <h3 id="Отправка_запроса_в_правильное_view_urls.py">Отправка запроса в правильное view (urls.py)</h3> -<p>Сопоставитель URL-адресов обычно хранится в файле <strong>urls.py</strong>. В примере ниже сопоставитель (<code>urlpatterns</code>) определяет список соответствия между определенными URL-<em>шаблонами </em>и соотвествующими функциями отображения (view). Если полученный HTTP запрос подходит под определенный шаблон ( такой как <code>r'^$'</code>, ниже), то будет вызвана ассоциированная функция отображения<strong> </strong>(такая как <code>views.index</code>) и передана в запрос.</p> +<p>Сопоставитель URL-адресов обычно содержится в файле <strong>urls.py</strong>. В примере ниже сопоставитель (<code>urlpatterns</code>) определяет список сопоставлений между<em>маршрутами </em>(определёнными URL-<em>шаблонами</em>) и соотвествующими функциями отображения (view). Если получен HTTP-запрос, который имеет URL-адрес, соответствующий определённому шаблону, то затем будет вызвана связанная функция отображения (view) и передана в запрос.</p> <pre class="notranslate">urlpatterns = [ - <strong>url(r'^$', views.index),</strong> - url(r'^([0-9]+)/$', views.best), -] -</pre> + <strong>path('admin/', admin.site.urls), + </strong>path('book/<int:id>/', views.book_detail, name='book_detail'), + path('catalog/', include('catalog.urls')), + re_path(r'^([0-9]+)/$', views.best), +]</pre> -<div class="note"> -<p><strong>Note</strong>: Немного Python:</p> +<p>Объект <code>urlpatterns</code> является списком функций <code>path()</code> и/или <code>re_path()</code> (в Python списки определяются с помощью квадратных скобок, внутри которых элементы разделены запятыми и могут содержать <a href="https://docs.python.org/2/faq/design.html#why-does-python-allow-commas-at-the-end-of-lists-and-tuples">необязательную завершающую запятую</a>. Например: <code>[item1, item2, item3,]</code>).</p> -<ul> - <li>Объект <code>urlpatterns</code> является списком функций <code>url()</code>. В Python, списки определяются с помощью квадратных скобок. Элементы разделены запятыми и могут содержать <a href="https://docs.python.org/2/faq/design.html#why-does-python-allow-commas-at-the-end-of-lists-and-tuples">необязательную завершающую запятую</a>. Например: <code>[item1, item2, item3,]</code>.</li> - <li>Странный на вид синтаксис шаблона известен как регулярное выражение (regular expression). Мы о нем поговорим позже!</li> - <li>Второй аргумент функции <code>url()</code> это другая функция, которая будет вызвана, когда шаблон будет удачно сопоставлен. Обозначение <code>views.index</code> обозначает, что будет вызвана функция <code>index()<font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="background-color: #fff3d4; font-size: 18px;">, которая может быть найдена в модуле под названием </span></font></code><code>views</code> (т.е. в файле <code>views.py</code>).</li> -</ul> -</div> +<p>Первый аргумент в обоих методах - маршрут (шаблон), который будет сопоставлен. В методе <code>path()</code> угловые скобки используются для определения частей URL-адреса, которые будут захвачены и переданы в функцию отображения (view) в качестве именованных аргументов. Функция <code>re_path()</code> использует гибкий подход к сопоставлению с шаблоном, известный как регулярное выражение. Мы поговорим об этом в следующей статье!</p> + +<p>Второй аргумент — это ещё одна функция, которая будет вызываться при сопоставлении шаблона. Обозначение <code>views.book_detail</code> указывает, что функция называется <code>book_detail()</code> и может быть обнаружена в модуле с именем <code>views</code> (т.е. внутри файла с именем <code>views.py</code>).</p> <h3 id="Обработка_запроса_views.py">Обработка запроса (views.py)</h3> -<p>Отображения (views) - это сердце веб-приложения, принимающего HTTP-запросы от веб-клиентов и возвращающего HTTP-ответы. В промежутке они собирают другие ресурсы платформы для доступа к базам данных, шаблонам визуализации и т. д. </p> +<p>Отображения (views) — это сердце веб-приложения, принимающего HTTP-запросы от веб-клиентов и возвращающего HTTP-ответы. Между этим они используют другие ресурсы фреймворка для доступа к базам данных, шаблонам визуализации и т. д. </p> -<p>В приведенном ниже примере показана минимальная функция представления <code>index()</code>, которая могла быть вызвана нашим преобразователем URL в предыдущем разделе. Как и все функции представления, она получает объект <code>HttpRequest</code> в качестве параметра <code>(request)</code> и возвращает объект <code>HttpResponse</code>. В этом случае мы ничего не делаем с запросом, и наш ответ просто возвращает жестко запрограммированную строку. Мы покажем вам запрос, который делает что-то более интересное в следующем разделе.</p> +<p>В приведённом ниже примере показана минимальная функция представления <code>index()</code>, которая могла быть вызвана нашим сопоставителем URL-адресов в предыдущем разделе. Как и все функции отображения (view), она получает объект <code>HttpRequest</code> в качестве параметра (<code>request</code>) и возвращает объект <code>HttpResponse</code>. В этом случае мы ничего не делаем с запросом, и наш ответ просто возвращает жёстко запрограммированную строку. Мы покажем вам запрос, который делает что-то более интересное в следующем разделе.</p> <pre class="brush: python notranslate">## filename: views.py (Django view functions) from django.http import HttpResponse def index(request): - # Получить HttpRequest - параметр запроса + # Получить HttpRequest — параметр запроса # Выполнить операции, используя информацию из запроса. # Вернуть HttpResponse return HttpResponse('Hello from Django!') @@ -149,21 +145,21 @@ def index(request): <p><strong>Заметка</strong>: Немного Python:</p> <ul> - <li><a href="https://docs.python.org/3/tutorial/modules.html">Модули Python</a> это библиотеки функций, сохраненные в различных файлах, которые мы можем использовать в нашем коде. Здесь мы импортируем только объект <code>HttpResponse</code> из <code>django.http</code> модуля, таким образом мы можем использовать его в нашем отображении (view): <code>from django.http import HttpResponse</code> . Так же есть другие способы импортирования некоторых или всех объектов модуля.</li> - <li>Функции объявляются с помощью ключевого слова <code>def</code> как показано выше, с именованными параметрами, перечисленными в скобках после имени функции; строка завершается двоеточием. Заметьте, что следующие строки содержат отступы. Отступы важны, так как они определяют какие строки кода находятся внутри конкретного блока (обязательные отступы - это ключевая особенность Python и одна из причин, почему код на Python так легко читать).</li> + <li><a href="https://docs.python.org/3/tutorial/modules.html">Модули Python</a> это библиотеки функций, сохранённые в различных файлах, которые мы можем использовать в нашем коде. Здесь мы импортируем только объект <code>HttpResponse</code> из модуля <code>django.http</code> чтобы использовать его в нашем отображении (view): <code>from django.http import HttpResponse</code> . Также есть другие способы импортирования некоторых или всех объектов модуля.</li> + <li>Функции объявляются с помощью ключевого слова <code>def</code>, как показано выше, с именованными параметрами, перечисленными в скобках после имени функции; строка завершается двоеточием. Заметьте, что следующие строки содержат отступы. Отступы важны, так как они определяют, какие строки кода находятся внутри конкретного блока (обязательные отступы — это ключевая особенность Python и одна из причин, почему код на Python так легко читать).</li> </ul> </div> <ul> </ul> -<p>Отображения (View) обычно сохранены в файле <strong>views.py</strong>.</p> +<p>Отображения (view) обычно содержатся в файле <strong>views.py</strong>.</p> <h3 id="Определение_данных_модели_models.py">Определение данных модели (models.py)</h3> -<p>Веб-приложения Django обрабатывают и запрашивают данные через объекты Python, называемые моделями. Модели определяют структуру хранимых данных, включая типы полей и, возможно, их максимальный размер, значения по умолчанию, параметры списка выбора, текст справки для документации, текст меток для форм и т. д. Определение модели не зависит от СУБД (MySQL или PostgreSQL) - ваши модели будут работать в любой из них. После того, как вы выбрали базу данных, которую хотите использовать, Вам не нужно напрямую обращатся к ней - вы просто пишете свою структуру модели и другой код, а Django обрабатывает всю грязную работу по обращению к базе данных за вас.</p> +<p>Веб-приложения Django обрабатывают и запрашивают данные через объекты Python, называемые моделями. Модели определяют структуру хранимых данных, включая типы полей и, возможно, их максимальный размер, значения по умолчанию, параметры списка выбора, текст справки для документации, текст меток для форм и т. д. Определение модели не зависит от используемой базы данных — ваши модели будут работать в любой из них. После того как вы выбрали базу данных, которую хотите использовать, вам не нужно напрямую обращатся к ней — вы просто пишете свою структуру модели и другой код, а Django выполняет всю «грязную работу» по обращению к базе данных за вас.</p> -<p>В приведенном ниже фрагменте кода показана очень простая модель Django для объекта <code>Team</code> . Класс <code>Team</code> наследуется от класса <code>models.Model</code>. Он определяет имя команды и командный уровень в качестве полей символов и задает максимальное количество символов, которые должны быть сохранены для каждой записи. <code>Team_level</code> может быть одним из нескольких значений, поэтому мы определяем его как поле выбора и предоставляем сопоставление между отображаемыми вариантами и хранимыми данными вместе со значением по умолчанию. </p> +<p>В приведённом ниже фрагменте кода показана очень простая модель Django для объекта <code>Team</code>. Класс <code>Team</code> наследуется от класса <code>models.Model</code>. Он определяет имя команды и командный уровень в качестве полей символов и задаёт максимальное количество символов, которые могут быть сохранены для каждой записи. <code>Team_level</code> может быть одним из нескольких значений, поэтому мы определяем его как поле выбора и предоставляем сопоставление между отображаемыми вариантами и хранимыми данными вместе со значением по умолчанию.</p> <pre class="brush: python notranslate"># filename: models.py @@ -182,20 +178,20 @@ class Team(models.Model): </pre> <div class="note"> -<p><strong>Заметка</strong>: Немного Python'а:</p> +<p><strong>Заметка</strong>: Немного Python:</p> <ul> - <li>Python поддерживает «объектно-ориентированное программирование», стиль программирования, в котором мы организуем наш код в объекты, которые включают связанные данные и функции для работы с этими данными. Объекты также могут наследовать / расширять / выводить из других объектов, позволяя совместное поведение между связанными объектами. В Python мы используем ключевое слово <code>class</code> , чтобы определить "скелет" для объекта. Мы можем создать несколько конкретных <em>экземпляров</em> типа объекта на основе модели в классе.<br> + <li>Python поддерживает «объектно-ориентированное программирование», то есть стиль программирования, в котором мы организуем наш код в объекты, которые включают связанные данные и функции для работы с этими данными. Объекты также могут наследовать / расширять / выводить из других объектов, позволяя использовать одинаковое поведение между связанными объектами. В Python мы используем ключевое слово <code>class</code>, чтобы определить «скелет» для объекта. Мы можем создать несколько конкретных <em>экземпляров</em> типа объекта на основе модели в классе.<br> <br> - Так например, мы имеем класс <code>Team</code>, который происходит от класса <code>Model</code>. Это означает, что эта модель будет содержать все методы модели, но мы также можем дать ей специализированные возможности. В нашей модели мы определяем поля нашей базы данных, в которой будем хранить данные, присваивая им конкретные имена. Django использует эти определения, включая имена полей, для создания основной базы данных.</li> + Так, например, мы имеем класс <code>Team</code>, который происходит от класса <code>Model</code>. Это означает, что эта модель будет содержать все методы модели, но мы также можем дать ей специализированные возможности. В нашей модели мы определяем поля нашей базы данных, в которой будем хранить данные, присваивая им конкретные имена. Django использует эти определения, включая имена полей, для создания основной базы данных.</li> </ul> </div> <h3 id="Запросы_данных_views.py">Запросы данных (views.py)</h3> -<p>Модель Django предоставляет простой API запросов для поиска в базе данных. Поиск может осуществляться по нескольким полям одновременно с использованием разных критериев (таких как exact, case-insensitive, greater than и т.д.), и может поддерживать сложные выражения (например, вы можете указать поиск в командах U11, у которых есть имя команды, начинающееся с «Fr» или заканчивается на «al»).</p> +<p>Модель Django предоставляет простой API запросов для поиска в базе данных. Поиск может осуществляться по нескольким полям одновременно, используя различные критерии (такие как exact («точный»), case-insensitive («без учёта регистра»), greater than («больше чем») и т. д.), и может поддерживать сложные выражения (например, вы можете указать поиск в командах U11, у которых есть имя команды, начинающееся с «Fr» или заканчивается на «al»).</p> -<p>Фрагмент кода показывает функцию view (обработчик ресурсов) для отображения всех команд U09. Жирная строка показывет как мы можем использовать модель API запросов для того, чтобы отфильтровать все записи где поле <code>team_level</code> в точности содержит текст 'U09' (обратите внимание, как эти критерии передаются функции <code>filter()</code> в качестве аргумента с именем поля и типом соответствия, разделенным двойным подчеркиванием: <strong>team_level__exact</strong>).</p> +<p>Фрагмент кода показывает функцию view (обработчик ресурсов) для отображения всех команд U09. Выделенная жирным строка показывет, как мы можем использовать модель API-запросов для того, чтобы отфильтровать все записи, где поле <code>team_level</code> в точности содержит текст 'U09' (обратите внимание, как эти критерии передаются функции <code>filter()</code> в качестве аргумента с именем поля и типом соответствия, разделённым двойным подчеркиванием: <strong>team_level__exact</strong>). </p> <pre class="brush: python notranslate">## filename: views.py @@ -211,36 +207,38 @@ def index(request): <dl> </dl> -<p>Данная функция использует функцию <code>render()</code> для того, чтобы создать <code>HttpResponse</code>, который будет отправлен назад браузеру. Эта функция является ярлыком; она создает HTML-файл, комбинируя указанный шаблон HTML и некоторые данные для вставки в шаблон (предоставляется в переменной с именем "<code>context</code>"). В следующем разделе мы покажем как данные вставляются в шаблон для создания HTML-кода.</p> +<p>Данная функция использует функцию <code>render()</code> для того, чтобы создать <code>HttpResponse</code>, который будет отправлен назад браузеру. Эта функция является <em>ярлыком</em>; она создаёт HTML-файл, комбинируя указанный HTML-шаблон и некоторые данные для вставки в шаблон (предоставляется в переменной с именем «<code>context</code>»). В следующем разделе мы покажем как данные вставляются в шаблон для создания HTML-кода.</p> -<h3 id="Отображение_данных_HTML_templates">Отображение данных (HTML templates)</h3> +<h3 id="Вывод_данных_HTML-шаблоны">Вывод данных (HTML-шаблоны)</h3> -<p>Системы шаблонов позволяют указать структуру выходного документа, используя заполнители для данных, которые будут заполнены при создании страницы. Шаблоны часто используются для создания HTML, но также могут создавать другие типы документов. Django поддерживает как собственную систему шаблонов, так и другую популярную библиотеку Python под названием Jinja2 (она также может быть использована для поддержки других систем, если это необходимо).</p> +<p>Системы шаблонов позволяют указать структуру выходного документа, используя заполнители для данных, которые будут вставлены при генерировании страницы. Шаблоны часто используются для создания HTML, но также могут создавать другие типы документов. Django «из коробки» поддерживает как собственную систему шаблонов, так и другую популярную библиотеку Python под названием Jinja2 (она также может быть использована для поддержки других систем, если это необходимо).</p> -<p>Фрагмент кода показывает, как выглядит HTML-шаблон, вызванный функцией <code>render()</code> из предыдущего раздела. Этот шаблон был написан в предположении, что во время рендеринга он будет иметь доступ к переменной списка, называемой <code>youngest_teams</code> (содержащейся в контекстной переменной внутри функции <code>render()</code> выше). Внутри скелета HTML мы имеем выражение, которое сначала проверяет, существует ли переменная <code>youngest_teams</code>, а затем выполняет итерацию в цикле <code>for</code>. На каждой итерации шаблон отображает значение <code>team_name</code> каждой команды в элементе {{htmlelement ("li")}}.</p> +<p>Фрагмент кода показывает, как может выглядеть HTML-шаблон, вызванный функцией <code>render()</code> из предыдущего раздела. Этот шаблон был написан с предположением, что во время отрисовки он будет иметь доступ к переменной списка, названной <code>youngest_teams</code> (содержащейся в контекстной переменной внутри функции <code>render()</code> выше). Внутри скелета HTML мы имеем выражение, которое сначала проверяет, существует ли переменная <code>youngest_teams</code>, а затем повторяет её в цикле <code>for</code>. При каждом повторе шаблон отображает значение <code>team_name</code> каждой команды в элементе <code>{{htmlelement("li")}}</code>.</p> -<pre class="brush: python notranslate">## filename: best/templates/best/index.html +<pre class="notranslate">## filename: best/templates/best/index.html <!DOCTYPE html> <html lang="en"> +<head> + <meta charset="utf-8"> + <title>Home page</title> +</head> <body> - - {% if youngest_teams %} + {% if youngest_teams %} <ul> - {% for team in youngest_teams %} - <li>\{\{ team.team_name \}\}</li> - {% endfor %} + {% for team in youngest_teams %} + <li>\{\{ team.team_name \}\}</li> + {% endfor %} </ul> -{% else %} + {% else %} <p>No teams are available.</p> -{% endif %} - + {% endif %} </body> </html></pre> -<h2 id="Что_еще_можно_сделать">Что еще можно сделать?</h2> +<h2 id="Что_ещё_можно_сделать">Что ещё можно сделать?</h2> -<p>В предыдущих разделах показаны основные особенности, которые вы будете использовать почти в каждом веб-приложении: сопоставление URL, представления, модели и шаблоны. Также Django предоставляет несколько других вещей:</p> +<p>В предыдущих разделах показаны основные особенности, которые вы будете использовать почти в каждом веб-приложении: сопоставление URL-адресов, отображение, модели и шаблоны. Также Django предоставляет несколько других вещей:</p> <ul> <li><strong>Формы</strong>: HTML-формы используются для сбора пользовательских данных для обработки на сервере. Django упрощает создание, проверку и обработку формы.</li> @@ -254,6 +252,6 @@ def index(request): <p>Поздравляем, вы завершили первый шаг в своем путешествии по Django! Теперь вы должны понимать основные преимущества Django, немного его истории, и примерно как может выглядеть каждая из основных частей приложения Django. Вы должны также изучить несколько вещей о языке программирования Python, включая синтаксис списков, функций и классов.</p> -<p>Вы уже видели код на Django выше, но в отличие от клиентского кода вам нужно настроить среду разработки для ее запуска. Это наш следующий шаг</p> +<p>Вы уже видели код на Django выше, но в отличие от клиентского кода вам нужно настроить среду разработки для её запуска. Это наш следующий шаг.</p> <div>{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}</div> diff --git a/files/ru/learn/server-side/first_steps/web_frameworks/index.html b/files/ru/learn/server-side/first_steps/web_frameworks/index.html index af2b467d3f..9be015a4a6 100644 --- a/files/ru/learn/server-side/first_steps/web_frameworks/index.html +++ b/files/ru/learn/server-side/first_steps/web_frameworks/index.html @@ -1,6 +1,12 @@ --- -title: Выполняемые на сервере веб фреймворки +title: Выполняемые на сервере веб-фреймворки slug: Learn/Server-side/First_steps/Web_frameworks +tags: + - '-фреймворк' + - Ве + - Программирование серверной части + - Сервер + - начальный уровень translation_of: Learn/Server-side/First_steps/Web_frameworks --- <div>{{LearnSidebar}}</div> @@ -30,7 +36,7 @@ translation_of: Learn/Server-side/First_steps/Web_frameworks <p>В следующем разделе приводится более подробная информация о том, как веб-фреймворки могут облегчить разработку веб-приложений. Затем мы объясним некоторые критерии, которые вы можете использовать для выбора веб-фреймворка, а затем перечислим некоторые из ваших вариантов.</p> -<h2 id="Что_может_сделать_веб-фреймворк_для_вас">Что может сделать веб-фреймворк для вас ?</h2> +<h2 id="Что_может_сделать_веб-фреймворк_для_вас">Что может сделать веб-фреймворк для вас?</h2> <p>Веб-фреймворки предоставляют инструменты и библиотеки для упрощения общих операций веб-разработки. Вы не обязаны использовать веб-фреймворк на стороне сервера, но это настоятельно рекомендуется — это сделает вашу жизнь намного проще.</p> @@ -238,43 +244,52 @@ def youngest(request): <p><a href="http://expressjs.com/">Express</a> — быстрый, непринуждённый, гибкий и минималистский веб-фреймворк для <a href="https://nodejs.org/en/">Node.js</a> (node — это серверная среда для запуска JavaScript). Он обеспечивает надёжный набор функций для веб и мобильных приложений и предоставляет полезные HTTP-утилиты и <a href="/en-US/docs/Glossary/Middleware">middleware</a> (промежуточные интерфейсы).</p> -<p><span class="tlid-translation translation" lang="ru">Express чрезвычайно популярен, частично потому, что он облегчает миграцию клиентских веб-программистов JavaScript в разработку на стороне сервера, а частично потому, что он ресурсоэффективен (базовая среда узлов использует легкую многозадачность в потоке, а не порождает отдельные процессы для каждого новый веб-запрос).<br> - <br> - Поскольку Express является минималистской веб-инфраструктурой, он не включает в себя все компоненты, которые вы, возможно, захотите использовать (например, доступ к базе данных и поддержка пользователей и сеансов предоставляются через независимые библиотеки). Есть много отличных независимых компонентов, но иногда бывает сложно решить, какой из них лучше всего подходит для конкретной цели!<br> - <br> - Многие популярные серверные и полные стеки (включая серверные и клиентские) основаны на Express, включая Feathers, ItemsAPI, KeystoneJS, Kraken, LEAN-STACK, LoopBack, MEAN и Sails.<br> - <br> - Многие крупные компании используют Express, в том числе: Uber, Accenture, IBM и т. Д. (Список приведен здесь).</span></p> +<p><span class="tlid-translation translation" lang="ru">Express чрезвычайно популярен, частично потому, что он облегчает миграцию клиентских веб-программистов JavaScript в разработку на стороне сервера, а частично потому, что он ресурсоэффективен (базовая среда узлов использует легкую многозадачность в потоке, а не порождает отдельные процессы для каждого новый веб-запроса).</span></p> + +<p><span class="tlid-translation translation" lang="ru">Поскольку Express является минималистским веб-фреймворком, он не включает в себя все компоненты, которые вы, возможно, захотите использовать (например, доступ к базе данных и поддержка пользователей и сеансов предоставляются через независимые библиотеки). Есть много отличных независимых компонентов, но иногда бывает сложно решить, какой из них лучше всего подходит для конкретной цели! </span></p> + +<p><span class="tlid-translation translation" lang="ru">На Express основаны многие популярные серверные фреймворки, а также фреймворки полного цикла (которые включают как серверную, так и клиентскую часть), в числе которых <a href="http://feathersjs.com/">Feathers</a>, <a href="https://www.itemsapi.com/">ItemsAPI</a>, <a href="http://keystonejs.com/">KeystoneJS</a>, <a href="http://krakenjs.com/">Kraken</a>, <a href="http://loopback.io/">LoopBack</a>, <a href="http://mean.io/">MEAN</a> и <a href="http://sailsjs.org/">Sails</a>.</span></p> + +<p><span class="tlid-translation translation" lang="ru">Express используют многие крупные компании, в том числе: Uber, Accenture, IBM и т. д. (список приведён <a href="http://expressjs.com/en/resources/companies-using-express.html">здесь</a>).</span></p> <h3 id="Ruby_on_Rails_Ruby">Ruby on Rails (Ruby)</h3> -<p><span class="tlid-translation translation" lang="ru"><span title="">Rails (обычно называемый «Ruby on Rails») - это веб-фреймворк, написанный для языка программирования Ruby.</span><br> - <br> - <span title="">Rails следует очень похожей философии дизайна на Django.</span> <span title="">Как и Django, он предоставляет стандартные механизмы для маршрутизации URL, доступа к данным из базы данных, генерации HTML из шаблонов и форматирования данных как {{glossary ("JSON")}} или {{glossary ("XML")}}.</span> <span title="">Точно так же поощряется использование шаблонов проектирования, таких как DRY («не повторяйте себя» - пишите код только один раз, если это возможно), MVC (модель-представление-контроллер) и ряд других.</span><br> +<p><span class="tlid-translation translation" lang="ru"><span title=""><a href="http://rubyonrails.org/">Rails</a> (обычно именуется «Ruby on Rails») </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> это веб-фреймворк, написанный для языка программирования Ruby.</span></span></p> + +<p><span class="tlid-translation translation" lang="ru"><span title="">Rails следует очень похожей философии дизайна на Django.</span> <span title="">Как и Django, он предоставляет стандартные механизмы для маршрутизации URL-адресов, доступа к данным из базы данных, генерации HTML из шаблонов и форматирования таких данных как {{glossary ("JSON")}} или {{glossary ("XML")}}.</span> Им <span title="">точно так же поощряется использование шаблонов проектирования, таких как DRY («не повторяйте себя» </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> пишите код только один раз, если это возможно), MVC (модель-представление-контроллер) и ряд других.</span><br> <br> - <span title="">Конечно, есть много различий, связанных с конкретными проектными решениями и характером языков.</span><br> + <span title="">Конечно, в них существует и много различий, которые связаны с конкретными проектными решениями и природой самих языков.</span><br> <br> - <span title="">Rails использовался для крупных сайтов, в том числе: Basecamp, GitHub, Shopify, Airbnb, Twitch, SoundCloud, Hulu, Zendesk, Square, Highrise.</span></span></p> + <span title="">Rails использовался для крупных сайтов, в том числе: <a href="https://basecamp.com/">Basecamp</a>, <a href="https://github.com/">GitHub</a>, <a href="https://shopify.com/">Shopify</a>, <a href="https://airbnb.com/">Airbnb</a>, <a href="https://twitch.tv/">Twitch</a>, <a href="https://soundcloud.com/">SoundCloud</a>, <a href="https://hulu.com/">Hulu</a>, <a href="https://zendesk.com/">Zendesk</a>, <a href="https://square.com/">Square</a>, <a href="https://highrisehq.com/">Highrise</a>.</span></span></p> <h3 id="ASP.NET">ASP.NET</h3> -<p><span class="tlid-translation translation" lang="ru"><span title="">ASP.NET - это веб-инфраструктура с открытым исходным кодом, разработанная Microsoft для создания современных веб-приложений и сервисов.</span> <span title="">С ASP.NET вы можете быстро создавать веб-сайты на основе HTML, CSS и JavaScript, масштабировать их для использования миллионами пользователей и легко добавлять более сложные возможности, такие как веб-API, формы поверх данных или коммуникации в режиме реального времени.</span><br> - <br> - <span title="">Одним из отличий для ASP.NET является то, что он построен на Common Language Runtime (CLR), что позволяет программистам писать код ASP.NET с использованием любого поддерживаемого языка .NET (C #, Visual Basic и т. д.).</span> <span title="">Как и многие продукты Microsoft, он обладает отличными инструментами (часто бесплатными), активным сообществом разработчиков и хорошо написанной документацией.</span><br> - <br> - <span title="">ASP.NET используется Microsoft, Xbox.com, Stack Overflow и многими другими.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title=""><a href="http://www.asp.net/">ASP.NET</a> </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> это веб-фреймворк с открытым исходным кодом, разработанный Microsoft для создания современных веб-приложений и сервисов.</span> <span title="">С ASP.NET вы можете быстро создавать веб-сайты на основе HTML, CSS и JavaScript, масштабировать их для использования миллионами пользователей и легко добавлять более сложные возможности, такие как веб-API, формы поверх данных или коммуникации в режиме реального времени.</span></span></p> + +<p><span class="tlid-translation translation" lang="ru"><span title="">Одним из отличий ASP.NET является то, что он построен на <a href="https://ru.wikipedia.org/wiki/Common_Language_Runtime">Common Language Runtime</a> </span></span>(CLR, «общеязыковая исполняющая среда»)<span class="tlid-translation translation" lang="ru"><span title="">, что позволяет программистам писать код ASP.NET с использованием любого поддерживаемого языка .NET (C#, Visual Basic и т. п.).</span> <span title="">Как и многие продукты Microsoft, он обладает отличными инструментами (часто бесплатными), активным сообществом разработчиков и хорошо написанной документацией.</span></span></p> + +<p><span class="tlid-translation translation" lang="ru"><span title="">ASP.NET используется Microsoft, Xbox.com, Stack Overflow и многими другими.</span></span></p> <h3 id="Mojolicious_Perl">Mojolicious (Perl)</h3> -<p><span class="tlid-translation translation" lang="ru">Mojolicious - это веб-фреймворк следующего поколения для языка программирования Perl.<br> - <br> - Еще в первые дни Интернета многие люди изучали Perl из-за замечательной библиотеки Perl под названием CGI. Это было достаточно просто, чтобы начать, не зная много о языке и достаточно мощный, чтобы держать вас в курсе. Mojolicious реализует эту идею, используя новейшие технологии.<br> - <br> - Некоторые из функций, предоставляемых Mojolicious: веб-инфраструктура в режиме реального времени, позволяющая легко превращать отдельные файловые прототипы в хорошо структурированные веб-приложения MVC; RESTful маршруты, плагины, команды, шаблоны Perl-ish, согласование контента, управление сеансами, проверка форм, структура тестирования, статический файловый сервер, обнаружение CGI / PSGI, поддержка Unicode первого класса; Реализация полного стека HTTP и WebSocket клиент / сервер с IPv6, TLS, SNI, IDNA, HTTP / SOCKS5 прокси, сокет домена UNIX, Comet (длинный опрос), поддержка активности, пул соединений, тайм-аут, cookie, поддержка нескольких частей и сжатия gzip; Парсеры и генераторы JSON и HTML / XML с поддержкой селекторов CSS; Очень чистый, портативный и объектно-ориентированный чистый Perl API без скрытой магии; Свежий код, основанный на многолетнем опыте, бесплатный и открытый исходный код.</span></p> +<p><span class="tlid-translation translation" lang="ru"><a href="http://mojolicious.org/">Mojolicious</a> </span>—<span class="tlid-translation translation" lang="ru"> это веб-фреймворк следующего поколения для языка программирования Perl.</span></p> + +<p><span class="tlid-translation translation" lang="ru">Ещё в первые дни Интернета многие люди изучали Perl из-за замечательной библиотеки Perl под названием <a href="https://metacpan.org/module/CGI">CGI</a>. Язык позволял довольно просто начать, не зная многого о языке, и был достаточно мощным, чтобы вы продолжали работу. Mojolicious реализует эту идею, используя новейшие технологии.</span></p> + +<p><span class="tlid-translation translation" lang="ru">Некоторые из функций, предоставляемых Mojolicious</span>:</p> + +<ul> + <li><span class="tlid-translation translation" lang="ru">веб-инфраструктура в режиме реального времени, позволяющая легко превращать отдельные файловые прототипы в хорошо структурированные веб-приложения MVC</span>.</li> + <li><span class="tlid-translation translation" lang="ru">RESTful маршруты, плагины, команды, шаблоны Perl-ish, согласование контента, управление сеансами, проверка форм, структура тестирования, статический файловый сервер, обнаружение CGI/<a href="http://plackperl.org/">PSGI</a>, первоклассная поддержка Unicode</span>.</li> + <li><span class="tlid-translation translation" lang="ru">Реализация полного стека HTTP и WebSocket клиент/сервер с IPv6, TLS, SNI, IDNA, HTTP/SOCKS5 прокси, сокет домена UNIX, Comet (длинный опрос), поддержка активности, пул соединений, тайм-аут, cookie, поддержка нескольких частей и сжатия gzip</span>.</li> + <li><span class="tlid-translation translation" lang="ru">Парсеры и генераторы JSON и HTML/XML с поддержкой селекторов CSS</span>.</li> + <li><span class="tlid-translation translation" lang="ru">Очень чистый, портативный и объектно-ориентированный Perl API без скрытой магии</span>.</li> + <li><span class="tlid-translation translation" lang="ru">Свежий код, основанный на многолетнем опыте, бесплатный и с открытым исходным кодом</span>.</li> +</ul> <h2 id="Резюме"><span class="tlid-translation translation" lang="ru"><span title="">Резюме</span></span></h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">Эта статья показала, что веб-фреймворки могут упростить разработку и поддержку кода на стороне сервера.</span> <span title="">Он также предоставил общий обзор нескольких популярных платформ и обсудил критерии выбора платформы веб-приложений.</span> <span title="">Теперь у вас должно быть хотя бы представление о том, как выбрать веб-фреймворк для собственной разработки на стороне сервера.</span> <span title="">Если нет, то не беспокойтесь - позже в курсе мы дадим вам подробные учебники по Django и Express, чтобы дать вам некоторый опыт работы с веб-фреймворком.</span> </span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Эта статья показала, что веб-фреймворки могут упростить разработку и поддержку кода на стороне сервера.</span> <span title="">Она также предоставила общий обзор нескольких популярных платформ и обсудила критерии выбора платформы веб-приложений.</span> <span title="">Теперь у вас должно быть хотя бы представление о том, как выбрать веб-фреймворк для собственной разработки на стороне сервера.</span> <span title="">Если нет, то не беспокойтесь </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> позже в курсе мы дадим вам подробные учебники по Django и Express, чтобы дать вам некоторый опыт работы с веб-фреймворком.</span> </span></p> <p>Для следующей статьи в этом модуле мы немного изменим направление и рассмотрим веб-безопасность.</p> @@ -283,7 +298,7 @@ def youngest(request): <h2 id="В_этом_модуле">В этом модуле</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Introduction">Introduction to the server side</a></li> + <li><a href="/ru/docs/Learn/Server-side/First_steps/Introduction">Introduction to the server side</a></li> <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">Client-Server overview</a></li> <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">Server-side web frameworks</a></li> <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a></li> diff --git a/files/ru/web/api/domimplementation/createhtmldocument/index.html b/files/ru/web/api/domimplementation/createhtmldocument/index.html new file mode 100644 index 0000000000..51092a034b --- /dev/null +++ b/files/ru/web/api/domimplementation/createhtmldocument/index.html @@ -0,0 +1,111 @@ +--- +title: DOMImplementation.createHTMLDocument() +slug: Web/API/DOMImplementation/createHTMLDocument +tags: + - API + - DOM Reference + - DOMImplementation + - Method + - Reference +translation_of: Web/API/DOMImplementation/createHTMLDocument +--- +<p>{{ApiRef("DOM")}}</p> + +<p><span class="seoSummary">Метод <strong><code>DOMImplementation.createHTMLDocument()</code></strong> создает новый HTML {{ domxref("Document") }}.</span></p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">const <var>newDoc</var> = document.implementation.createHTMLDocument(<var>title</var>)</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code><var>title</var></code> {{optional_inline}} (except in IE)</dt> + <dd>{{domxref("DOMString")}}, содержащий заголовок для создания нового HTML-документа.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<p>В этом примере создается новый HTML-документ и вставляется в {{HTMLElement("iframe")}} текущего документа.</p> + +<p>Вот HTML для этого примера:</p> + +<pre class="brush: html notranslate"><body> + <p>Click <a href="javascript:makeDocument()">here</a> to create a new document and insert it below.</p> + <iframe id="theFrame" src="about:blank" /> +</body> +</pre> + +<p>Реализация JavaScript <code>makeDocument()</code> выглядит следующим образом:</p> + +<pre class="brush: js notranslate">function makeDocument() { + let frame = document.getElementById("theFrame"); + + let doc = document.implementation.createHTMLDocument("New Document"); + let p = doc.createElement("p"); + p.innerHTML = "This is a new paragraph."; + + try { + doc.body.appendChild(p); + } catch(e) { + console.log(e); + } + + // Copy the new HTML document into the frame + + let destDocument = frame.contentDocument; + let srcNode = doc.documentElement; + let newNode = destDocument.importNode(srcNode, true); + + destDocument.replaceChild(newNode, destDocument.documentElement); +} +</pre> + +<p>Код в строках 4-12 обрабатывает создание нового HTML-документа и вставку в него некоторого содержимого. Строка 4 использует <code>createHTMLDocument()</code> для создания нового HTML-документа, чей {{ HTMLElement("title") }} это <code>"New Document"</code>. Строки 5 и 6 создают новый элемент абзаца с некоторым простым содержимым, а затем строки 8-12 обрабатывают вставку нового абзаца в новый документ.</p> + +<p>Строка 16 вытягивает <code>contentDocument</code> фрейма; это документ, в который мы будем вводить новое содержимое. Следующие две строки обрабатывают импорт содержимого нашего нового документа в контекст нового документа. Наконец, строка 20 фактически заменяет содержимое фрейма содержимым нового документа.</p> + +<p><a href="/samples/domref/createHTMLDocument.html">Смотреть Видео Примеры</a></p> + +<p>Возвращаемый документ предварительно сконструирован со следующим HTML-кодом:</p> + +<pre class="brush: html notranslate"><!doctype html> +<html> +<head> +<title><var>title</var></title> +</head> +<body> +</body> +</html> +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-domimplementation-createhtmldocument', 'DOMImplementation.createHTMLDocument')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Первоначальное определение.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("api.DOMImplementation.createHTMLDocument")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Интерфейс {{domxref("DOMImplementation")}}, к которому он принадлежит.</li> +</ul> diff --git a/files/ru/web/api/domimplementation/index.html b/files/ru/web/api/domimplementation/index.html new file mode 100644 index 0000000000..f68c256376 --- /dev/null +++ b/files/ru/web/api/domimplementation/index.html @@ -0,0 +1,82 @@ +--- +title: DOMImplementation +slug: Web/API/DOMImplementation +tags: + - API + - DOM + - Interface + - Reference +translation_of: Web/API/DOMImplementation +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>Интерфейс <code><strong>DOMImplementation</strong></code> представляет собой объект, предоставляющий методы, которые не зависят от какого-либо конкретного документа. Такой объект возвращается свойством {{domxref("Document.implementation")}}.</p> + +<h2 id="Свойства">Свойства</h2> + +<p><em>Этот интерфейс не имеет определенного свойства и не наследует его.</em></p> + +<h2 id="Методы">Методы</h2> + +<p><em>Нет унаследованного метода.</em></p> + +<dl> + <dt>{{domxref("DOMImplementation.createDocument()")}}</dt> + <dd>Создает и возвращает {{domxref("XMLDocument")}}.</dd> + <dt>{{domxref("DOMImplementation.createDocumentType()")}}</dt> + <dd>Создает и возвращает {{domxref("DocumentType")}}.</dd> + <dt>{{domxref("DOMImplementation.createHTMLDocument()")}}</dt> + <dd>Создает и возвращает HTML {{domxref("Document")}}.</dd> + <dt>{{domxref("DOMImplementation.hasFeature()")}}</dt> + <dd>Возвращает {{domxref("Boolean")}}, указывающий, поддерживается ли данная функция или нет. Эта функция ненадежна и сохраняется только для целей совместимости: за исключением запросов, связанных с SVG, она всегда возвращает true. Старые браузеры очень непоследовательны в своем поведении.</dd> +</dl> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#domimplementation', 'DOMImplementation')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> + <p>Removed the <code>getFeature()</code> method.<br> + Added the <code>createHTMLDocument()</code> method.<br> + Modified the return type of <code>createDocument()</code> from {{domxref("Document")}} to {{domxref("XMLDocument")}}.</p> + + <p>Удален метод <code>getFeature()</code>. Добавлен метод <code>createHTMLDocument()</code>. Изменён тип возвращаемого значения <code>createDocument()</code> с {{domxref("Document")}} на {{domxref("XMLDocument")}}.</p> + </td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-102161490', 'DOMImplementation')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Добавлен метод <code>getFeature()</code> (никогда не реализованный ни одним агентом пользователя).</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-102161490', 'DOMImplementation')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Добавлены методы <code>createDocument()</code> и <code>createDocumentType()</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-102161490', 'DOMImplementation')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Первоначальное определение.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("api.DOMImplementation")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index.</a></li> +</ul> diff --git a/files/ru/web/api/eventtarget/attachevent/index.html b/files/ru/web/api/eventtarget/attachevent/index.html index e7d6f423a4..3c34f1f843 100644 --- a/files/ru/web/api/eventtarget/attachevent/index.html +++ b/files/ru/web/api/eventtarget/attachevent/index.html @@ -1,93 +1,8 @@ --- title: EventTarget.attachEvent() slug: Web/API/EventTarget/attachEvent +tags: + - Junk translation_of: Web/API/EventTarget/addEventListener --- -<p>{{APIRef("DOM Events")}}</p> - -<p>{{ Non-standard_header() }}</p> - -<h2 id="Кратко">Кратко</h2> - -<p>Проприетарная альтернатива методу {{domxref("EventTarget.addEventListener()")}} от Microsoft Internet Explorer.</p> - -<h2 id="Syntax" name="Syntax">Синтаксис</h2> - -<pre class="syntaxbox"><em>attached</em> = <em>target</em>.attachEvent(<em>eventNameWithOn</em>, <em>callback</em>) -</pre> - -<dl> - <dt>target</dt> - <dd>DOM элемент, на который требуется повесить "attachEvent()"</dd> - <dt>eventNameWithOn</dt> - <dd>Название ивента, начинающийся на "on" (так если бы это был колбэк атрибут), чей обработчик должен быть убран. Например, вам следует использовать <code>"onclick" для установки обработчика для данного "click" ивента.</code></dd> - <dt>callback</dt> - <dd>Функция, вызываемая при появлении ивента на целевом элементе. Функция будет вызвана без аргументов, и с "this", ссылающимся на <a href="/en-US/docs/Web/API/Window/window"><code>window</code> object.</a></dd> - <dt>attached</dt> - <dd>Возвращает "true"если установка была успешна, иначе "false".</dd> -</dl> - -<h2 id="Спецификации">Спецификации</h2> - -<p>Не является частью спецификации.</p> - -<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms536343(v=vs.85).aspx">содержит описание на MSDN</a>.</p> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Браузерная совместимость</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>6 thru 10 [1]</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1]: <code>attachEvent()</code> больше не поддерживается в IE11+. {{domxref("EventTarget.addEventListener()")}} поддерживается в IE9+.</p> - -<h2 id="Смотрите_так-же">Смотрите так-же</h2> - -<ul> - <li>{{domxref("EventTarget.detachEvent()")}}</li> - <li>{{domxref("EventTarget.fireEvent()")}}</li> -</ul> +<p>{{DOMxRef("EventTarget.addEventListener","EventTarget.addEventListener()")}}</p> diff --git a/files/ru/web/api/formdata/index.html b/files/ru/web/api/formdata/index.html index 35ea12c24a..3553574ec7 100644 --- a/files/ru/web/api/formdata/index.html +++ b/files/ru/web/api/formdata/index.html @@ -29,18 +29,24 @@ translation_of: Web/API/FormData <h2 id="Методы">Методы</h2> <dl> - <dt>{{domxref("FormData.append")}}</dt> + <dt>{{domxref("FormData.append()")}}</dt> <dd>Добавляет новое значение существующего поля объекта <code style="font-style: normal;">FormData</code>, либо создаёт его и присваивает значение.</dd> - <dt>{{domxref("FormData.delete")}}</dt> + <dt>{{domxref("FormData.delete()")}}</dt> <dd>Удаляет пару ключ-значение из объекта <code>FormData</code>.</dd> - <dt>{{domxref("FormData.get")}}</dt> + <dt>{{domxref("FormData.get()")}}</dt> <dd>Возвращает первое значение ассоциированное с переданным ключом из объекта <code>FormData</code>.</dd> - <dt>{{domxref("FormData.getAll")}}</dt> + <dt>{{domxref("FormData.getAll()")}}</dt> <dd>Возвращает массив всех значений ассоциированных с переданным ключом из объекта <code style="font-style: normal;">FormData</code>.</dd> - <dt>{{domxref("FormData.has")}}</dt> - <dd>Возвращает булево значение касательно наличия в объекте <span style="font-family: consolas,monaco,andale mono,monospace;">FormData</span> конкретной пары ключ-значение.</dd> - <dt>{{domxref("FormData.set")}}</dt> - <dd>Устанавливает новое значение для существующего ключа объекта <span style="font-family: consolas,monaco,andale mono,monospace;">FormData</span>, или добавляет пару ключ-значение, если таковой не обнаружено в объекте.</dd> + <dt>{{domxref("FormData.has()")}}</dt> + <dd>Возвращает булево значение касательно наличия в объекте <code style="font-style: normal;">FormData</code> конкретной пары ключ-значение.</dd> + <dt>{{domxref("FormData.set()")}}</dt> + <dd>Устанавливает новое значение для существующего ключа объекта <code style="font-style: normal;">FormData</code>, или добавляет пару ключ-значение, если таковой не обнаружено в объекте.</dd> + <dt>{{domxref("FormData.keys()")}}</dt> + <dd>Возвращает {{jsxref("Iteration_protocols", "iterator")}} , который позволяет пройтись по всем ключам для каждой пары "ключ-значение" , содержащимся внутри обьекта <code style="font-style: normal;">FormData</code></dd> + <dt>{{domxref("FormData.entries()")}}</dt> + <dd>Возвращает {{jsxref("Iteration_protocols","iterator")}} который позволяет пройтись по всем парам "ключ-значение", содержащимся внутри обьекта <code style="font-style: normal;">FormData</code></dd> + <dt>{{domxref("FormData.values()")}}</dt> + <dd>Возвращает {{jsxref("Iteration_protocols", "iterator")}} , который позволяет пройтись по всем значениям , содержащимся в обьекте <code style="font-style: normal;">FormData</code></dd> </dl> <div class="note"> diff --git a/files/ru/web/api/mouseevent/ctrlkey/index.html b/files/ru/web/api/mouseevent/ctrlkey/index.html index 6b8815d8da..96c98ae093 100644 --- a/files/ru/web/api/mouseevent/ctrlkey/index.html +++ b/files/ru/web/api/mouseevent/ctrlkey/index.html @@ -5,11 +5,11 @@ translation_of: Web/API/MouseEvent/ctrlKey --- <p>{{APIRef("DOM Events")}}</p> -<p>Свойство только для чтения <strong><code>MouseEvent.ctrlKey</code></strong> возращает true, когда клавиша Ctrl была нажата, а если нет - false.</p> +<p>Свойство только для чтения <strong><code>MouseEvent.ctrlKey</code></strong> возвращает true, когда клавиша Ctrl была нажата, а если нет - false.</p> <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox">var <em>ctrlKeyPressed</em> = <em>instanceOfMouseEvent</em>.ctrlKey +<pre class="syntaxbox notranslate">var <em>ctrlKeyPressed</em> = <em>instanceOfMouseEvent</em>.ctrlKey </pre> <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> @@ -18,7 +18,7 @@ translation_of: Web/API/MouseEvent/ctrlKey <h2 id="Example" name="Example">Пример</h2> -<pre class="brush: js"><html> +<pre class="brush: js notranslate"><html> <head> <title>Пример с ctrlKey</title> diff --git a/files/ru/web/api/node/appendchild/index.html b/files/ru/web/api/node/appendchild/index.html index 50af4e38da..e011179528 100644 --- a/files/ru/web/api/node/appendchild/index.html +++ b/files/ru/web/api/node/appendchild/index.html @@ -17,6 +17,11 @@ translation_of: Web/API/Node/appendChild <p>Если данный дочерний элемент является {{domxref("DocumentFragment")}}, то все содержимое {{domxref("DocumentFragment")}} перемещается в дочерний список указанного родительского узла.</p> +<div class="blockIndicator note"> +<p><strong>Доступен новый API!</strong><br> + <a href="https://developer.mozilla.org/ru/docs/Web/API/ParentNode/append"><code>ParentNode.append()</code></a> поддерживает несколько аргументов и добавляемые строки.</p> +</div> + <h2 id="Syntax" name="Syntax">Синтаксис</h2> <pre class="syntaxbox notranslate">var child = <em>element</em>.appendChild(<em>child</em>);</pre> diff --git a/files/ru/web/javascript/reference/global_objects/generator/index.html b/files/ru/web/javascript/reference/global_objects/generator/index.html index b5fe95a5bf..385792c2e0 100644 --- a/files/ru/web/javascript/reference/global_objects/generator/index.html +++ b/files/ru/web/javascript/reference/global_objects/generator/index.html @@ -16,17 +16,23 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Generator <p><code><strong>Генератор</strong></code> - это объект, возвращаемый {{jsxref("Statements/function*", "функцией-генератором", "", 1)}} и соответствующий как <a href="/ru/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">"Итерируемому" протоколу</a>, так и <a href="/ru/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">протоколу "Итератор"</a>.</p> -<h2 id="Синтаксис">Синтаксис</h2> +<h2 id="Конструктор">Конструктор</h2> -<pre class="syntaxbox">function* gen() { +<p>Этот объект не может быть инстанциирован напрямую. Вместо этого, экемпляр <code>Generator</code> может быть возвращён из <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction">функции-генератора</a>:</p> + +<pre class="notranslate line-numbers language-html">function* generator() { yield 1; yield 2; yield 3; } -var g = gen(); // "Generator { }"</pre> +const gen = generator(); // "Generator { }" + +console.log(gen.next().value); // 1 +console.log(generator().next().value); // 1 +console.log(generator().next().value); // 1</pre> -<h2 id="Методы">Методы</h2> +<h2 id="Методы_экземпляра">Методы экземпляра</h2> <dl> <dt>{{jsxref("Generator.prototype.next()")}}</dt> @@ -41,7 +47,7 @@ var g = gen(); // "Generator { }"</pre> <h3 id="Бесконечный_Итератор">Бесконечный Итератор</h3> -<pre class="brush: js">function* idMaker() { +<pre class="brush: js notranslate">function* idMaker() { var index = 0; while(true) yield index++; @@ -54,39 +60,7 @@ console.log(gen.next().value); // 1 console.log(gen.next().value); // 2 // ...</pre> -<h2 id="Legacy_generator_objects">Legacy generator objects</h2> - -<p>Firefox (SpiderMonkey) also implements an earlier version of generators in <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7</a>, where the star (*) in the function declaration was not necessary (you just use the <code>yield</code> keyword in the function body). However, legacy generators are deprecated. Do not use them; they are going to be removed ({{bug(1083482)}}).</p> - -<h3 id="Legacy_generator_methods">Legacy generator methods</h3> - -<dl> - <dt><code>Generator.prototype.next() </code>{{non-standard_inline}}</dt> - <dd>Returns a value yielded by the {{jsxref("Operators/yield", "yield")}} expression. This corresponds to <code>next()</code> in the ES2015 generator object.</dd> - <dt><code>Generator.prototype.close()</code> {{non-standard_inline}}</dt> - <dd>Closes the generator, so that when calling <code>next()</code> an {{jsxref("StopIteration")}} error will be thrown. This corresponds to the <code>return()</code> method in the ES2015 generator object.</dd> - <dt><code>Generator.prototype.send()</code> {{non-standard_inline}}</dt> - <dd>Used to send a value to a generator. The value is returned from the {{jsxref("Operators/yield", "yield")}} expression, and returns a value yielded by the next {{jsxref("Operators/yield", "yield")}} expression. <code>send(x)</code> corresponds to <code>next(x)</code> in the ES2015 generator object.</dd> - <dt><strong><code>Generator.</code></strong><code>prototype.</code><strong><code>throw()</code> </strong> {{non-standard_inline}}</dt> - <dd>Throws an error to a generator. This corresponds to the <code>throw()</code> method in the ES2015 generator object.</dd> -</dl> - -<h3 id="Legacy_generator_example">Legacy generator example</h3> - -<pre class="brush: js">function fibonacci() { - var a = yield 1; - yield a * 2; -} - -var it = fibonacci(); -console.log(it); // "Generator { }" -console.log(it.next()); // 1 -console.log(it.send(10)); // 20 -console.log(it.close()); // undefined -console.log(it.next()); // throws StopIteration (as the generator is now closed) -</pre> - -<h2 id="Specifications">Specifications</h2> +<h2 id="Спецификации">Спецификации</h2> <table class="standard-table"> <tbody> @@ -103,73 +77,22 @@ console.log(it.next()); // throws StopIteration (as the generator is now close <tr> <td>{{SpecName('ESDraft', '#sec-generator-objects', 'Generator objects')}}</td> <td>{{Spec2('ESDraft')}}</td> - <td> </td> + <td></td> </tr> </tbody> </table> -<h2 id="Browser_compatibility">Browser compatibility</h2> +<h2 id="Совместимость">Совместимость</h2> -<p>{{CompatibilityTable}}</p> -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome(39.0)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(39.0)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(39.0)}}</td> - </tr> - </tbody> -</table> -</div> +<p>{{Compat("javascript.builtins.Generator")}}</p> <h2 id="See_also">See also</h2> <h3 id="Legacy_generators">Legacy generators</h3> <ul> - <li>{{jsxref("Statements/Legacy_generator_function", "The legacy generator function", "", 1)}}</li> - <li>{{jsxref("Operators/Legacy_generator_function", "The legacy generator function expression", "", 1)}}</li> - <li>{{jsxref("StopIteration")}}</li> <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol">The legacy Iterator protocol</a></li> </ul> diff --git a/files/tr/web/javascript/reference/statements/const/index.html b/files/tr/web/javascript/reference/statements/const/index.html index 39f62e3144..f04efc9a90 100644 --- a/files/tr/web/javascript/reference/statements/const/index.html +++ b/files/tr/web/javascript/reference/statements/const/index.html @@ -5,10 +5,6 @@ translation_of: Web/JavaScript/Reference/Statements/const --- <div>{{jsSidebar("Statements")}}</div> -<p>170 / 5000</p> - -<h2 id="Çeviri_sonuçları">Çeviri sonuçları</h2> - <p>Sabit değerler(const), let anahtar sözcüğü kullanılarak bildirilen değişkenler gibi blok kapsamlıdır. Bir sabitin değeri yeniden atama yoluyla değiştirilemez ve yeniden beyan edilemez.</p> <div>{{EmbedInteractiveExample("pages/js/statement-const.html")}}</div> diff --git a/files/tr/öğren/css/css_layout/index.html b/files/tr/öğren/css/css_layout/index.html index 42a4b4f5c1..1ffe9c03cb 100644 --- a/files/tr/öğren/css/css_layout/index.html +++ b/files/tr/öğren/css/css_layout/index.html @@ -19,52 +19,66 @@ tags: - float translation_of: Learn/CSS/CSS_layout --- -<div>{{draft}}</div> - <div>{{LearnSidebar}}</div> -<p class="summary">Bu zamana kadar Css temellerini, metnin nasıl stillendirileceğini, ve içeriğinizin içindeki kutuların nasıl biçimleneceğini öğrendik. Şimdi, kutuların bir web sayfasına nasıl yerleştireceğimizi öğrenme zamanı geldi. CSS düzenini daha iyi öğrenebilmek için, farklı görüntü ayarlarına, flexbox, CSS ızgarası ve konumlandırma gibi modern düzen araçlarına ve hala bilmek isteyebileceğiniz bazı eski tekniklere bakabilmemiz için gerekli ön koşulları ele aldık.</p> +<p class="summary">Bu noktaya kadar CSS'in temellerini, metnin nasıl şekillendirileceğini ve içeriğinizin iiçnde bulunduğu kutualrı nasıl biçimlendirip değiştireceğinizi inceledik. Bundan sonra, kutularınızı görüntü alanına ve birbirlerine göre doğru yere nasıl yerleştiriceğinize bakacağız. CSS düzenine derinlemesine dalabilmemiz, farklı görüntü ayarlarına, flexbox, CSS ızgarası ve konumlandırma gibi modern düzen araçlarına ve hala bilmek isteyebileceğiniz bazı eski tekniklere bir göz atacağız.</p> + +<div class="in-page-callout webdev"> +<h3 id="Bir_Web_ön-uçfront-end_geliştiricisi_mi_olmak_istiyorsun">Bir Web ön-uç(front-end) geliştiricisi mi olmak istiyorsun?</h3> + +<p>Hedefinize ulaşmak için ihtiyacınız olan tüm temel bilgileri içeren bir kurs hazırladık.</p> -<h2 id="Ön_Koşullar">Ön Koşullar</h2> +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Başlayın</a></p> +</div> + +<h2 id="Ön_koşullar">Ön koşullar</h2> -<p>Bu modülü öğrenmeye başlamadan önce şunları bilmelisin:</p> +<p>Bu üniteye başlamdan önce şunları yapmalısınız:</p> <ol> - <li><a href="/tr/docs/Öğren/HTML/Introduction_to_HTML">HTML'e giriş</a> kursunda anlatıldığı gibi temel HTML bilgisine sahip olun.</li> - <li><a href="/tr/docs/Web/Guide/CSS/Getting_started">Introduction to CSS</a> kursunda anlatıldığı gibi CSS konusunda rahat olun</li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu Modeli</a> kavramını anlamak.</li> + <li><a href="/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> ünitesinde anlatıldığı gibi temel HTML bilgisine sahip olun.</li> + <li><a href="/tr/docs/Öğren/CSS/Introduction_to_CSS">CSS'e Giriş</a> bölümünde anlatıldığı gibi, temel CSS bilgisine sahip olun.</li> + <li><a href="/tr/docs/Öğren/CSS/Styling_boxes">Kutuları şekillendirme</a> hakkında bilgi sahibi olun.</li> </ol> <div class="note"> -<p><strong>Note</strong>: Eğer kendi dosyalarınızı oluşturamayacağınız bir bilgisayar, tablet veya başka bir cihazdan çalışıyorsanız <a href="http://jsbin.com/">JSBin</a> veya <a href="https://thimble.mozilla.org/">Thimble</a> gibi bir çevrimci ortam kullanabilirsiniz.</p> +<p><strong>Not</strong>: Kendi dosayalrınızı oluşturma yeteneğinizin olmadığı bir bilgisayar/table/başka bir cihaz üzerinde çalışıyorsanız, <a href="http://jsbin.com/">JSBin</a> veya <a href="https://glitch.com/">Glitch</a> gibi bir çevrim içi kodlama programıyla okd örnelerinin çoğunu deneyebilirsiniz.</p> </div> -<h2 id="Guides">Guides</h2> +<h2 id="Dersler">Dersler</h2> -<p>These articles will provide instruction on the fundamental layout tools and techniques available in CSS.</p> +<p>Bu dersler, CSS'de bulunan temel düzen araçları ve teknikleri hakkında talimat sağlayacaktır. Derslerin sonunda, bir web sayfası düzenleyerek düzen yöntemlerini anlamanıza yardımcı olacak değerlendirmelerimiz mevcuttur.</p> <dl> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></dt> - <dd>This article will recap some of the CSS layout features we've already touched upon in previous modules — such as different {{cssxref("display")}} values — and introduce some of the concepts we'll be covering throughout this module.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></dt> - <dd>Originally for floating images inside blocks of text, the {{cssxref("float")}} property has become one of the most commonly used tools for creating multiple column layouts on webpages. This article explains all.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></dt> - <dd>Positioning allows you to take elements out of the normal document layout flow, and make them behave differently, for example sitting on top of one another, or always remaining in the same place inside the browser viewport. This article explains the different {{cssxref("position")}} values, and how to use them.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a></dt> - <dd>With the basics of positioning covered in the last article, we will now look at building a couple of real world examples, to illustrate what kinds of things you can do with positioning.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt> - <dd>A new technology, but with support now fairly widespread across browsers, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a> is starting to become ready for widespread use. Flexbox provides tools to allow rapid creation of complex, flexible layouts, and features that historically proved difficult with CSS. This articles explains all the fundamentals.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></dt> - <dd>Grid systems are another very common feature used in CSS layouts, which tend to be implemented using floats or other layout features. You imagine your layout as a set number of columns (e.g. 4, 6, or 12), and then fit your content columns inside these imaginary columns. In this article we'll explore the basic idea behind creating a grid system, look at using a ready-made grid system provided by a grid framework, and end by experimenting with CSS Grids — a nascent new browser feature that makes implementing grid design on the Web a lot easier.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Introduction">CSS mizanpajına giriş</a></dt> + <dd>bu derste, önceki derslerde değindiğimiz bazı CSS mizanpaj özelliklerini — farklı {{cssxref("display")}} nitelik değerleri gibi — özetleyecek ve bu ünite boyunca ele alacağımız bazı kavramları tanıtacağız.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Normal_Flow">Normal akış(Normal Flow)</a></dt> + <dd>Web sayfalarındaki öğeler, biz bunu değiştirmek için bir şeyler yapana kadar kendilerini normal akışa göre düzenler. Bu derste, nasıl değiştirileceğini öğrenmek için normal akışın temellerini açıklayacağız.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Flexbox">Esnek kutular (Flexbox)</a></dt> + <dd><a href="/tr/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a>, öğelerin satırlar veya sütunlar halinde yerleştirmek için tek boyutlu bir yerleşim yöntemidir. Öğeler ek alanı doldurmak için esner ve daha küçük alanlara sığacak şekilde küçülür. Bu derste tüm temelleri açıklayacağız. Bu dersi inceledikten sonra, devam etmeden önce anlayıp anlamadığınızı kontrol etmek için <a href="/tr/docs/Öğren/CSS/CSS_layout/Flexbox_skills">flexbox becerilerinizi test</a> edebilirsiniz.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Grids">Izgaralar(Grids)</a></dt> + <dd>CSS Izgara(Grid) düzeni, web için iki boyutlu bir düzen sistemidir. içeriği satırlar ve sütunlar halinde yerleştirmenize olanak tanır ve karmaşık düzenler oluşturmayı kolaylaştıran birçok özelliğe sahiptir. Bu derste size sayfa düzenine başlamak için bilmeniz gereken her şeyi verecek, ardından devam etmeden önce <a href="/tr/docs/Öğren/CSS/CSS_layout/Grid_skills">ızgara(grid) becerilerinizi test</a> edecektir.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Floats">Yüzen nesneler (Floats)</a></dt> + <dd>Başlangıçta metin blokları içerisindeki görüntüleri konumlandırmak için kullanılan {{cssxref("float")}} niteliği, tüm öğelerin konumlandırılması ve web sayfalarıda sütunlar oluşturmak için kullanılan en yaygın araçlardan biri haline geldi. Fakat Flexbox ve Grid'in kullanıma sokulmasıyla, bu derste açıklandığı gibi asıl kullanım amacına geri döndü.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Positioning">Konumlandırma(Positioning)</a></dt> + <dd>Konumlandırma, öğeleri normal belge mizanpajı akışından çıkarmanıza ve bunların farklı şekilde davranmasını sağlar. örn öğelerin birbirinin üstüne durabilmesini ve/veya taryıcı görünüm alanı içinde her zaman aynı konumda kalmasını sağlar. Bu derste farklı {{cssxref("position")}} değerlerinin nasıl kullanılacağını açıklamaktadır.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Multiple-column_Layout">Birden çok sütun düzeni</a></dt> + <dd>Çok sütunlu düzen özelliği, bir gazetede görebileceğiniz gibi, içeriği sütunlar halinde yerleştirmek için bir yöntem sunar. Bu derste, bu özelliğin nasıl kullanılacağını açıklamaktadır.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Responsive_Design">Duyarlı tasarım</a></dt> + <dd>Web özellikli cihazlarda daha çeşitli ekran boyutları ortaya çıktıkça, duyarlı web tasarımı (RWD) kavramı ortaya çıkmıştır: web sayfalarının düzenlerini ve görünümlerini farklı ekran genişliklerine, çözünürlüklerine vb. uyacak şekilde değiştirmesine izin veren bir dizi uygulama. Bir web sayfasının farklı cihazlarda tasarım şeklimizi değiştiren bir fikirdir ve bu derste, bu konuda uzmanlaşmak için bilmeniz gereken ana teknikleri anlamanıza yardımcı olacağız.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Media_queries">Acemiler için medya sorguları klavuzu</a></dt> + <dd><strong>CSS Medya Sorugusu</strong> size, tarayıcı ve cihaz ortamının genişliğinin belirttiğiniz kural ile eşleştiğinde uygulamak istediğiniz CSS tanımlarını uygulamanıza olanak tanır. Ortam sorguları, görüntü alanının boyutuna bağlı olarak farklı düzenler oluşturmanıza olanak sağladığından, duyarlı web tasarımının önemli bir parçasıdır, ayrıca sitenizin üzerinde çalıştığı ortamla ilgili diğer bilgileride size sağlayabilir, örneğin kullanıcı fare yerine dokunmatik ekran kullanıyor. Bu derste önce medya sorgualraında kullanılan sözdizimi hakkında bilgi edinecek ve ardından bunları basit bir tasarımın nasıl duyarlı hale getirilebileceğini gösteren işlenmiş bir örnekte kullanmayı deneyeceksiniz.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Legacy_Layout_Methods">Eski düzen yönetmleri</a></dt> + <dd>Izgara sistemleri, CSS mizanpajlarında kullanılan çok yaygın bir özelliktir ve CSS Grid Layout'tan önce kayan öğeler veya diğer mizanpaj özelliklerinde kullanılmaktaydılar. Düzeninizi belirli sayıda sütun (örneğin 4, 6 veya 12) olarak hayal edin ve ardından içerik sütunlarınızı bu hayali sütunların içine sığdırın. Bu derste, daha eski bir projede çalışıyorsanız nasıl kullanıldığını anlamanız için bu eski yöntemlerin nasıl çalıştığını inceleyceğiz.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Supporting_Older_Browsers">Eski tarayıcıları desteklemek</a></dt> + <dd>Bu derste, tasarımlarınız için ana yerleşim yöntemleri olarak Flexbox ve Grid'i kullanmanızı öneririz. Bununla birlikte, sitenize, kullandığınız yöntemleri desteklemeyen eski tarayıcıları kulllanan ziyaretçiler olacaktır. Bu, web'de her zaman geçerli olacaktır — yani özellikler geliştirildikçe, farklı tarayıcılar farklı şeylere öncelik verecektir. Bu derste, eski teknoloji kullanıcılarını engellemeden modern web tekniklerinin nasıl kullanılacağını açıklamaktadır.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Fundamental_Layout_Comprehension">Değerlendirme: Temel düzeni anlama</a></dt> + <dd>Bir web sayfası düzenleyerek farklı düzen yöntemlerini hakkındaki bilginizi test etmek için bir değerlendirme.</dd> </dl> -<h2 id="Assessments">Assessments</h2> - -<p>The following assessments will test your ability to lay out web pages with CSS.</p> +<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> <dl> - <dt>Creating a flexible multicolumn layout (TBD)</dt> - <dd>This assessment tests your ability to create a standard multicolumn layout, with a few interesting features.</dd> - <dt>Creating a fixed control widget (TBD)</dt> - <dd>This assessment challenges your understanding of positioning by asking you to create a fixed position control widget that allows the user to access a web app's controls regardless of where they scroll to.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Practical_positioning_examples">Pratik konumlandırma örnekleri</a></dt> + <dd>Bu derst, konumlandırmayla ne tür şeyler yapabilceğinizi göstermek için bazı gerçek dünya örneklerini nasıl oluşturacağınızı gösterir.</dd> </dl> diff --git a/files/tr/öğren/css/css_layout/introduction/index.html b/files/tr/öğren/css/css_layout/introduction/index.html new file mode 100644 index 0000000000..396d9459f6 --- /dev/null +++ b/files/tr/öğren/css/css_layout/introduction/index.html @@ -0,0 +1,707 @@ +--- +title: CSS mizanpajına giriş +slug: Öğren/CSS/CSS_layout/Introduction +translation_of: Learn/CSS/CSS_layout/Introduction +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">This article will recap some of the CSS layout features we've already touched upon in previous modules — such as different {{cssxref("display")}} values — and introduce some of the concepts we'll be covering throughout this module.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>The basics of HTML (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of How CSS works (study <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.)</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>To give you an overview of CSS page layout techniques. Each technique can be learned in greater detail in subsequent tutorials.</td> + </tr> + </tbody> +</table> + +<p>CSS page layout techniques allow us to take elements contained in a web page and control where they are positioned relative to their default position in normal layout flow, the other elements around them, their parent container, or the main viewport/window. The page layout techniques we'll be covering in more detail in this module are</p> + +<ul> + <li>Normal flow</li> + <li>The {{cssxref("display")}} property</li> + <li>Flexbox</li> + <li>Grid</li> + <li>Floats</li> + <li>Positioning</li> + <li>Table layout</li> + <li>Multiple-column layout</li> +</ul> + +<p>Each technique has its uses, advantages, and disadvantages, and no technique is designed to be used in isolation. By understanding what each method is designed for you will be in a good place to understand which is the best layout tool for each task.</p> + +<h2 id="Normal_flow">Normal flow</h2> + +<p>Normal flow is how the browser lays out HTML pages by default when you do nothing to control page layout. Let's look at a quick HTML example:</p> + +<pre class="brush: html notranslate"><p>I love my cat.</p> + +<ul> + <li>Buy cat food</li> + <li>Exercise</li> + <li>Cheer up friend</li> +</ul> + +<p>The end!</p></pre> + +<p>By default, the browser will display this code as follows:</p> + +<p>{{ EmbedLiveSample('Normal_flow', '100%', 200) }}</p> + +<p>Note here how the HTML is displayed in the exact order in which it appears in the source code, with elements stacked up on top of one another — the first paragraph, followed by the unordered list, followed by the second paragraph.</p> + +<p>The elements that appear one below the other are described as <em>block</em> elements, in contrast to <em>inline</em> elements, which appear one beside the other, like the individual words in a paragraph.</p> + +<div class="note"> +<p><strong>Note</strong>: The direction in which block element contents are laid out is described as the Block Direction. The Block Direction runs vertically in a language such as English, which has a horizontal writing mode. It would run horizontally in any language with a Vertical Writing Mode, such as Japanese. The corresponding Inline Direction is the direction in which inline contents (such as a sentence) would run.</p> +</div> + +<p>For many of the elements on your page the normal flow will create exactly the layout you need, however for more complex layouts you will need to alter this default behavior using some of the tools available to you in CSS. Starting with a well-structured HTML document is very important, as you can then work with the way things are laid out by default rather than fighting against it.</p> + +<p>The methods that can change how elements are laid out in CSS are as follows:</p> + +<ul> + <li><strong>The {{cssxref("display")}} property</strong> — Standard values such as <code>block</code>, <code>inline</code> or <code>inline-block</code> can change how elements behave in normal flow, for example making a block-level element behave like an inline element (see <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">Types of CSS boxes</a> for more information). We also have entire layout methods that are switched on via specific <code>display</code> values, for example <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">CSS Grid</a> and <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, which alter how elements inside the element they are set on are laid out.</li> + <li><strong>Floats</strong> — Applying a {{cssxref("float")}} value such as <code>left</code> can cause block level elements to wrap alongside one side of an element, like the way images sometimes have text floating around them in magazine layouts.</li> + <li><strong>The {{cssxref("position")}} property</strong> — Allows you to precisely control the placement of boxes inside other boxes. <code>static</code> positioning is the default in normal flow, but you can cause elements to be laid out differently using other values, for example always fixed to the top of the browser viewport.</li> + <li><strong>Table layout</strong> — features designed for styling the parts of an HTML table can be used on non-table elements using <code>display: table</code> and associated properties.</li> + <li><strong>Multi-column layout</strong> — The <a href="/en-US/docs/Web/CSS/CSS_Columns">Multi-column layout</a> properties can cause the content of a block to layout in columns, as you might see in a newspaper.</li> +</ul> + +<h2 id="The_display_property">The display property</h2> + +<p>The main methods of achieving page layout in CSS are all values of the <code>display</code> property. This property allows us to change the default way something displays. Everything in normal flow has a value of <code>display</code>, used as the default way that elements they are set on behave. For example, the fact that paragraphs in English display one below the other is due to the fact that they are styled with <code>display: block</code>. If you create a link around some text inside a paragraph, that link remains inline with the rest of the text, and doesn’t break onto a new line. This is because the {{htmlelement("a")}} element is <code>display: inline</code> by default.</p> + +<p>You can change this default display behavior. For example, the {{htmlelement("li")}} element is <code>display: block</code> by default, meaning that list items display one below the other in our English document. If we change the display value to <code>inline</code> they now display next to each other, as words would do in a sentence. The fact that you can change the value of <code>display</code> for any element means that you can pick HTML elements for their semantic meaning, without being concerned about how they will look. The way they look is something that you can change.</p> + +<p>In addition to being able to change the default presentation by turning an item from <code>block</code> to <code>inline</code> and vice versa, there are some bigger layout methods that start out as a value of <code>display</code>. However, when using these, you will generally need to invoke additional properties. The two values most important for our purposes when discussing layout are <code>display: flex</code> and <code>display: grid</code>.</p> + +<h2 id="Flexbox">Flexbox</h2> + +<p>Flexbox is the short name for the <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexible Box Layout</a> Module, designed to make it easy for us to lay things out in one dimension — either as a row or as a column. To use flexbox, you apply <code>display: flex</code> to the parent element of the elements you want to lay out; all its direct children then become flex items. We can see this in a simple example.</p> + +<p>The HTML markup below gives us a containing element, with a class of <code>wrapper</code>, inside which are three {{htmlelement("div")}} elements. By default these would display as block elements, below one another, in our English language document.</p> + +<p>However, if we add <code>display: flex</code> to the parent, the three items now arrange themselves into columns. This is due to them becoming <em>flex items</em> and being affected by some initial values that flexbox sets on the flex container. They are displayed in a row, because the initial value of {{cssxref("flex-direction")}} set on their parent is <code>row</code>. They all appear to stretch to the height of the tallest item, because the initial value of the {{cssxref("align-items")}} property set on their parent is <code>stretch</code>. This means that the items stretch to the height of the flex container, which in this case is defined by the tallest item. The items all line up at the start of the container, leaving any extra space at the end of the row.</p> + +<div id="Flex_1"> +<div class="hidden"> +<h6 id="Flexbox_Example_1">Flexbox Example 1</h6> + +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} + </pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: flex; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Flex_1', '300', '200') }}</p> + +<p>In addition to the above properties that can be applied to the flex container, there are properties that can be applied to the flex items. These properties, among other things, can change the way that the items flex, enabling them to expand and contract to fit into the available space.</p> + +<p>As a simple example of this, we can add the {{cssxref("flex")}} property to all of our child items, with a value of <code>1</code>. This will cause all of the items to grow and fill the container, rather than leaving space at the end. If there is more space then the items will become wider; if there is less space they will become narrower. In addition, if you add another element to the markup the items will all become smaller to make space for it — they will adjust size to take up the same amount of space, whatever that is.</p> + +<div id="Flex_2"> +<div class="hidden"> +<h6 id="Flexbox_Example_2">Flexbox Example 2</h6> + +<pre class="brush: css notranslate"> * {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + } + </pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: flex; +} + +.wrapper > div { + flex: 1; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Flex_2', '300', '200') }}</p> + +<div class="note"> +<p><strong>Note</strong>: This has been a very short introduction to what is possible in Flexbox, to find out more, see our <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> article.</p> +</div> + +<h2 id="Grid_Layout">Grid Layout</h2> + +<p>While flexbox is designed for one-dimensional layout, Grid Layout is designed for two dimensions — lining things up in rows and columns.</p> + +<p>Once again, you can switch on Grid Layout with a specific value of display — <code>display: grid</code>. The below example uses similar markup to the flex example, with a container and some child elements. In addition to using <code>display: grid</code>, we are also defining some row and column tracks on the parent using the {{cssxref("grid-template-rows")}} and {{cssxref("grid-template-columns")}} properties respectively. We've defined three columns each of <code>1fr</code> and two rows of <code>100px</code>. I don’t need to put any rules on the child elements; they are automatically placed into the cells our grid has created.</p> + +<div id="Grid_1"> +<div class="hidden"> +<h6 id="Grid_example_1">Grid example 1</h6> + +<pre class="brush: css notranslate"> * {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + } + </pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 100px 100px; + grid-gap: 10px; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> + <div class="box4">Four</div> + <div class="box5">Five</div> + <div class="box6">Six</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Grid_1', '300', '330') }}</p> + +<p>Once you have a grid, you can explicitly place your items on it, rather than relying on the auto-placement behavior seen above. In the second example below we have defined the same grid, but this time with three child items. We've set the start and end line of each item using the {{cssxref("grid-column")}} and {{cssxref("grid-row")}} properties. This causes the items to span multiple tracks.</p> + +<div id="Grid_2"> +<div class="hidden"> +<h6 id="Grid_example_2">Grid example 2</h6> + +<pre class="brush: css notranslate"> * {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + } + </pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 100px 100px; + grid-gap: 10px; +} + +.box1 { + grid-column: 2 / 4; + grid-row: 1; +} + +.box2 { + grid-column: 1; + grid-row: 1 / 3; +} + +.box3 { + grid-row: 2; + grid-column: 3; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Grid_2', '300', '330') }}</p> + +<div class="note"> +<p><strong>Note</strong>: These two examples are just a small part of the power of Grid layout; to find out more see our <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid Layout</a> article.</p> +</div> + +<p>The rest of this guide covers other layout methods, which are less important for the main layout structures of your page but can still help you achieve specific tasks. By understanding the nature of each layout task, you will soon find that when you look at a particular component of your design the type of layout best suited to it will often be clear.</p> + +<h2 id="Floats">Floats</h2> + +<p>Floating an element changes the behavior of that element and the block level elements that follow it in normal flow. The element is moved to the left or right and removed from normal flow, and the surrounding content floats around the floated item.</p> + +<p>The {{cssxref("float")}} property has four possible values:</p> + +<ul> + <li><code>left</code> — Floats the element to the left.</li> + <li><code>right</code> — Floats the element to the right.</li> + <li><code>none</code> — Specifies no floating at all. This is the default value.</li> + <li><code>inherit</code> — Specifies that the value of the <code>float</code> property should be inherited from the element's parent element.</li> +</ul> + +<p>In the example below we float a <code><div></code> left, and give it a {{cssxref("margin")}} on the right to push the text away from the element. This gives us the effect of text wrapped around that box, and is most of what you need to know about floats as used in modern web design.</p> + +<div id="Float_1"> +<div class="hidden"> +<h6 id="Floats_example">Floats example</h6> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +} + +p { + line-height: 2; + word-spacing: 0.1rem; +} + +.box { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + border-radius: 5px; +} +</pre> +</div> + +<pre class="brush: html notranslate"><h1>Simple float example</h1> + +<div class="box">Float</div> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +</pre> + +<pre class="brush: css notranslate"> +.box { + float: left; + width: 150px; + height: 150px; + margin-right: 30px; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Float_1', '100%', 600) }}</p> + +<div class="note"> +<p><strong>Note</strong>: Floats are fully explained in our lesson on the <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">float and clear</a> properties. Prior to techniques such as Flexbox and Grid Layout floats were used as a method of creating column layouts. You may still come across these methods on the web; we will cover these in the lesson on <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">legacy layout methods</a>.</p> +</div> + +<h2 id="Positioning_techniques">Positioning techniques</h2> + +<p>Positioning allows you to move an element from where it would be placed when in normal flow to another location. Positioning isn’t a method for creating your main page layouts, it is more about managing and fine-tuning the position of specific items on the page.</p> + +<p>There are however useful techniques for certain layout patterns that rely on the {{cssxref("position")}} property. Understanding positioning also helps in understanding normal flow, and what it is to move an item out of normal flow.</p> + +<p>There are five types of positioning you should know about:</p> + +<ul> + <li><strong>Static positioning</strong> is the default that every element gets — it just means "put the element into its normal position in the document layout flow — nothing special to see here".</li> + <li><strong>Relative positioning</strong> allows you to modify an element's position on the page, moving it relative to its position in normal flow — including making it overlap other elements on the page.</li> + <li><strong>Absolute positioning</strong> moves an element completely out of the page's normal layout flow, like it is sitting on its own separate layer. From there, you can fix it in a position relative to the edges of the page's <code><html></code> element (or its nearest positioned ancestor element). This is useful for creating complex layout effects such as tabbed boxes where different content panels sit on top of one another and are shown and hidden as desired, or information panels that sit off screen by default, but can be made to slide on screen using a control button.</li> + <li><strong>Fixed positioning</strong> is very similar to absolute positioning, except that it fixes an element relative to the browser viewport, not another element. This is useful for creating effects such as a persistent navigation menu that always stays in the same place on the screen as the rest of the content scrolls.</li> + <li><strong>Sticky positioning</strong> is a newer positioning method which makes an element act like <code>position: static</code> until it hits a defined offset from the viewport, at which point it acts like <code>position: fixed</code>.</li> +</ul> + +<h3 id="Simple_positioning_example">Simple positioning example</h3> + +<p>To provide familiarity with these page layout techniques, we'll show you a couple of quick examples. Our examples will all feature the same HTML, which is as follows:</p> + +<pre class="brush: html notranslate"><h1>Positioning</h1> + +<p>I am a basic block level element.</p> +<p class="positioned">I am a basic block level element.</p> +<p>I am a basic block level element.</p></pre> + +<p>This HTML will be styled by default using the following CSS:</p> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + margin: 10px; + border-radius: 5px; +} +</pre> + +<p>The rendered output is as follows:</p> + +<p>{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}</p> + +<h3 id="Relative_positioning">Relative positioning</h3> + +<p>Relative positioning allows you to offset an item from the position in normal flow it would have by default. This means you could achieve a task such as moving an icon down a bit so it lines up with a text label. To do this, we could add the following rule to add relative positioning:</p> + +<pre class="brush: css notranslate">.positioned { + position: relative; + top: 30px; + left: 30px; +}</pre> + +<p>Here we give our middle paragraph a {{cssxref("position")}} value of <code>relative</code> — this doesn't do anything on its own, so we also add {{cssxref("top")}} and {{cssxref("left")}} properties. These serve to move the affected element down and to the right — this might seem like the opposite of what you were expecting, but you need to think of it as the element being pushed on its left and top sides, which result in it moving right and down.</p> + +<p>Adding this code will give the following result:</p> + +<div id="Relative_1"> +<div class="hidden"> +<h6 id="Relative_positioning_example">Relative positioning example</h6> + +<pre class="brush: html notranslate"><h1>Relative positioning</h1> + +<p>I am a basic block level element.</p> +<p class="positioned">This is my relatively positioned element.</p> +<p>I am a basic block level element.</p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + margin: 10px; + border-radius: 5px; +} +</pre> +</div> + +<pre class="brush: css notranslate">.positioned { + position: relative; + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Relative_1', '100%', 300) }}</p> + +<h3 id="Absolute_positioning">Absolute positioning</h3> + +<p>Absolute positioning is used to completely remove an element from normal flow, and place it using offsets from the edges of a containing block.</p> + +<p>Going back to our original non-positioned example, we could add the following CSS rule to implement absolute positioning:</p> + +<pre class="brush: css notranslate">.positioned { + position: absolute; + top: 30px; + left: 30px; +}</pre> + +<p>Here we give our middle paragraph a {{cssxref("position")}} value of <code>absolute</code>, and the same {{cssxref("top")}} and {{cssxref("left")}} properties as before. Adding this code, however, will give the following result:</p> + +<div id="Absolute_1"> +<div class="hidden"> +<h6 id="Absolute_positioning_example">Absolute positioning example</h6> + +<pre class="brush: html notranslate"><h1>Absolute positioning</h1> + +<p>I am a basic block level element.</p> +<p class="positioned">This is my absolutely positioned element.</p> +<p>I am a basic block level element.</p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + margin: 10px; + border-radius: 5px; +} +</pre> +</div> + +<pre class="brush: css notranslate">.positioned { + position: absolute; + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Absolute_1', '100%', 300) }}</p> + +<p>This is very different! The positioned element has now been completely separated from the rest of the page layout and sits over the top of it. The other two paragraphs now sit together as if their positioned sibling doesn't exist. The {{cssxref("top")}} and {{cssxref("left")}} properties have a different effect on absolutely positioned elements than they do on relatively positioned elements. In this case the offsets have been calculated from the top and left of the page. It is possible to change the parent element that becomes this container and we will take a look at that in the lesson on <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">positioning</a>.</p> + +<h3 id="Fixed_positioning">Fixed positioning</h3> + +<p>Fixed positioning removes our element from document flow in the same way as absolute positioning. However, instead of the offsets being applied from the container, they are applied from the viewport. As the item remains fixed in relation to the viewport we can create effects such as a menu which remains fixed as the page scrolls beneath it.</p> + +<p>For this example our HTML is three paragraphs of text, in order that we can cause the page to scroll, and a box to which we will give <code>position: fixed</code>.</p> + +<pre class="brush: html notranslate"><h1>Fixed positioning</h1> + +<div class="positioned">Fixed</div> + +<p>Paragraph 1.</p> +<p>Paragraph 2.</p> +<p>Paragraph 3.</p> +</pre> + +<div id="Fixed_1"> +<div class="hidden"> +<h6 id="Fixed_positioning_example">Fixed positioning example</h6> + +<pre class="brush: html notranslate"><h1>Fixed positioning</h1> + +<div class="positioned">Fixed</div> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +</pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +.positioned { + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> +</div> + +<pre class="brush: css notranslate">.positioned { + position: fixed; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Fixed_1', '100%', 200) }}</p> + +<h3 id="Sticky_positioning">Sticky positioning</h3> + +<p>Sticky positioning is the final positioning method that we have at our disposal. It mixes the default static positioning with fixed positioning. When an item has <code>position: sticky</code> it will scroll in normal flow until it hits offsets from the viewport that we have defined. At that point it becomes "stuck" as if it had <code>position: fixed</code> applied.</p> + +<div id="Sticky_1"> +<div class="hidden"> +<h6 id="Sticky_positioning_example">Sticky positioning example</h6> + +<pre class="brush: html notranslate"><h1>Sticky positioning</h1> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<div class="positioned">Sticky</div> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> </pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +.positioned { + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> +</div> + +<pre class="brush: css notranslate">.positioned { + position: sticky; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p> + +<div class="note"> +<p><strong>Note</strong>: to find more out about positioning, see our <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a> article.</p> +</div> + +<h2 id="Table_layout">Table layout</h2> + +<p>HTML tables are fine for displaying tabular data, but many years ago — before even basic CSS was supported reliably across browsers — web developers used to also use tables for entire web page layouts — putting their headers, footers, different columns, etc. in various table rows and columns. This worked at the time, but it has many problems — table layouts are inflexible, very heavy on markup, difficult to debug, and semantically wrong (e.g., screen reader users have problems navigating table layouts).</p> + +<p>The way that a table looks on a webpage when you use table markup is due to a set of CSS properties that define table layout. These properties can be used to lay out elements that are not tables, a use which is sometimes described as "using CSS tables".</p> + +<p>The example below shows one such use; using CSS tables for layout should be considered a legacy method at this point, for those situations where you have very old browsers without support for Flexbox or Grid.</p> + +<p>Let's look at an example. First, some simple markup that creates an HTML form. Each input element has a label, and we've also included a caption inside a paragraph. Each label/input pair is wrapped in a {{htmlelement("div")}}, for layout purposes.</p> + +<pre class="brush: html notranslate"><form> + <p>First of all, tell us your name and age.</p> + <div> + <label for="fname">First name:</label> + <input type="text" id="fname"> + </div> + <div> + <label for="lname">Last name:</label> + <input type="text" id="lname"> + </div> + <div> + <label for="age">Age:</label> + <input type="text" id="age"> + </div> +</form></pre> + +<p>Now, the CSS for our example. Most of the CSS is fairly ordinary, except for the uses of the {{cssxref("display")}} property. The {{htmlelement("form")}}, {{htmlelement("div")}}s, and {{htmlelement("label")}}s and {{htmlelement("input")}}s have been told to display like a table, table rows, and table cells respectively — basically, they'll act like HTML table markup, causing the labels and inputs to line up nicely by default. All we then have to do is add a bit of sizing, margin, etc. to make everything look a bit nicer and we're done.</p> + +<p>You'll notice that the caption paragraph has been given <code>display: table-caption;</code> — which makes it act like a table {{htmlelement("caption")}} — and <code>caption-side: bottom;</code> to tell the caption to sit on the bottom of the table for styling purposes, even though the markup is before the <code><input></code> elements in the source. This allows for a nice bit of flexibility.</p> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +form { + display: table; + margin: 0 auto; +} + +form div { + display: table-row; +} + +form label, form input { + display: table-cell; + margin-bottom: 10px; +} + +form label { + width: 200px; + padding-right: 5%; + text-align: right; +} + +form input { + width: 300px; +} + +form p { + display: table-caption; + caption-side: bottom; + width: 300px; + color: #999; + font-style: italic; +}</pre> + +<p>This gives us the following result:</p> + +<p>{{ EmbedLiveSample('Table_layout', '100%', '170') }}</p> + +<p>You can also see this example live at <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">css-tables-example.html</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">source code</a> too.)</p> + +<h2 id="Multi-column_layout">Multi-column layout</h2> + +<p>The multi-column layout module gives us a way to lay out content in columns, similar to how text flows in a newspaper. While reading up and down columns is less useful in a web context as you don’t want to force users to scroll up and down, arranging content into columns can be a useful technique.</p> + +<p>To turn a block into a multicol container we use either the {{cssxref("column-count")}} property, which tells the browser how many columns we would like to have, or the {{cssxref("column-width")}} property, which tells the browser to fill the container with as many columns of at least that width.</p> + +<p>In the below example we start with a block of HTML inside a containing <code><div></code> element with a class of <code>container</code>.</p> + +<pre class="brush: html notranslate"><div class="container"> + <h1>Multi-column layout</h1> + + <p>Paragraph 1.</p> + <p>Paragraph 2.</p> + +</div> +</pre> + +<p>We are using a <code>column-width</code> of 200 pixels on that container, causing the browser to create as many 200-pixel columns as will fit in the container and then share the remaining space between the created columns.</p> + +<div id="Multicol_1"> +<div class="hidden"> +<h6 id="Multicol_example">Multicol example</h6> + +<pre class="brush: html notranslate"> <div class="container"> + <h1>Multi-column Layout</h1> + + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + + </div> + </pre> + +<pre class="brush: css notranslate">body { max-width: 800px; margin: 0 auto; } </pre> +</div> + +<pre class="brush: css notranslate"> .container { + column-width: 200px; + }</pre> +</div> + +<p>{{ EmbedLiveSample('Multicol_1', '100%', 200) }}</p> + +<h2 id="Summary">Summary</h2> + +<p>This article has provided a brief summary of all the layout technologies you should know about. Read on for more information on each individual technology!</p> + +<p>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li> +</ul> diff --git a/files/zh-cn/glossary/javascript/index.html b/files/zh-cn/glossary/javascript/index.html index 232e87ec8f..66c98619b4 100644 --- a/files/zh-cn/glossary/javascript/index.html +++ b/files/zh-cn/glossary/javascript/index.html @@ -8,15 +8,15 @@ translation_of: Glossary/JavaScript --- <p>JavaScript (JS) 是一种编程语言，为通常用于客户端（client-side）的网页动态脚本，不过，也常通过像<a href="http://nodejs.org/" rel="external">Node.js</a>这样的包，用于服务器端（{{Glossary("Server","server")}}-side）。</p> -<p>不应该把JavaScript 和 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">Java</a> 的混淆。“Java” 和 “JavaScript” 都是 Oracle 公司在美国和其他国家注册的商标，但是这两种编程语言在语法、语义和使用方面都明显不同。</p> +<p>不应该把JavaScript 和 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">Java</a> 混淆。“Java” 和 “JavaScript” 都是 Oracle 公司在美国和其他国家注册的商标，但是这两种编程语言在语法、语义和使用方面都明显不同。</p> -<p>Brendan Eich （彼时受雇于 Netscape ）为服务器端构想的语言，JavaScript ，不久却在 1995 年九月加入 Netscape Navigator 2.0。JavaScript 很快获得了成功，而 <a href='{{glossary("Microsoft Internet Explorer", "Internet Explorer 3.0")}}'>Internet Explorer 3.0</a> 也在 1996 年八月，引入了对 JavaScript 的支持，冠以 JScript 之名。</p> +<p>Brendan Eich （彼时受雇于 Netscape ）为服务器端构想的语言 JavaScript ，不久便在 1995 年 9 月被加入 Netscape Navigator 2.0。JavaScript 很快获得了成功，而 <a href='{{glossary("Microsoft Internet Explorer", "Internet Explorer 3.0")}}'>Internet Explorer 3.0</a> 也在 1996 年 8 月，引入了对 JavaScript 的支持，冠以 JScript 之名。</p> -<p>1996 年十一月，Netscape 开始与 ECMA 国际化组织合作以使 JavaScript 成为行业标准。从此以后，标准化的 JavaScript 就被称为 ECMAScript 并规范于 ECMA-262 之下，其最新（第八）版在 2017 年六月生效。</p> +<p>1996 年 11 月，Netscape 开始与 ECMA 国际化组织合作以使 JavaScript 成为行业标准。从此以后，标准化的 JavaScript 就被称为 ECMAScript 并由 ECMA-262 规范，其最新版（第八版）在 2017 年 6 月生效。</p> <p>JavaScript 通常用于浏览器，使开发者能通过{{Glossary("DOM")}}来操纵网页内容、或透过{{Glossary("AJAX")}}与{{Glossary("IndexedDB")}}来操作数据；还可以用它在{{Glossary("canvas")}}上面绘图、通过各种{{Glossary("API","APIs")}}与运行浏览器的各种设备交互……等等。由于近年来的发展、以及各浏览器的{{Glossary("API","APIs")}}性能改善，JavaScript 成了世界上最常用的编程语言之一。</p> -<p>最近，JavaScript 的流行程度 ，由于<a href="http://nodejs.org/">Node.js</a>平台 ——这个除浏览器外最流行的跨平台JavaScript运行环境——的成功，大大提升。Node.js 使开发者可以在 PC 上使用 JavaScript 作为脚本语言使用以自动化处理和构建功能完备的 {{Glossary("HTTP")}} 和 {{Glossary("Web Sockets")}} 服务器。</p> +<p>最近，JavaScript 的流行程度，随着除浏览器外最流行的跨平台 JavaScript 运行环境——<a href="http://nodejs.org/">Node.js</a> 平台的成功而大大提升。Node.js 使开发者可以在 PC 上使用 JavaScript 作为脚本语言以自动化处理和构建功能完备的 {{Glossary("HTTP")}} 和 {{Glossary("Web Sockets")}} 服务器。</p> <h2 id="了解更多">了解更多</h2> @@ -29,7 +29,7 @@ translation_of: Glossary/JavaScript <h3 id="学习JavaScript">学习JavaScript</h3> <ul> - <li>MDN 的 {{Link("/en-US/docs/Web/JavaScript/Guide")}} </li> + <li>MDN 的 {{Link("/zh-CN/docs/Web/JavaScript/Guide")}} </li> <li><a href="http://nodeschool.io/#workshoppers">NodeSchool 的 javascripting 工坊</a></li> <li><a href="http://www.codecademy.com/tracks/javascript" rel="external">codecademy.com 的 JavaScript 课程</a></li> <li><a href="http://ejohn.org/apps/learn/" rel="external">John Resig 的 Learning Advanced JavaScript</a></li> diff --git a/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.html b/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.html index 870ef031ff..81505125b2 100644 --- a/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.html +++ b/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.html @@ -64,7 +64,7 @@ translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS <p>除了让万物都有一个确定的大小以外，我们可以让CSS给定一个元素的最大或最小尺寸。如果你有一个包含了变化容量的内容的盒子，而且你总是想让它<strong>至少</strong>有个确定的高度，你应该给它设置一个{{cssxref("min-height")}}属性。盒子就会一直保持大于这个最小高度，但是如果有比这个盒子在最小高度状态下所能容纳的更多内容，那么盒子就会变大。</p> -<p>I在以下的示例中，你可以看到两个盒子，两个都有150像素的确定高度，左边的盒子有150像素高，右边的盒子有需要更多空间才能装下的内容，所以它变得比150像素高。</p> +<p>在以下的示例中，你可以看到两个盒子，两个都有150像素的确定高度，左边的盒子有150像素高，右边的盒子有需要更多空间才能装下的内容，所以它变得比150像素高。</p> <p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p> diff --git a/files/zh-cn/learn/css/css_layout/introduction/index.html b/files/zh-cn/learn/css/css_layout/introduction/index.html index ef7ff27324..7657c460f7 100644 --- a/files/zh-cn/learn/css/css_layout/introduction/index.html +++ b/files/zh-cn/learn/css/css_layout/introduction/index.html @@ -76,7 +76,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <p>注意：块元素内容的布局方向被描述为<strong>块方向</strong>。块方向在英语等具有水平<strong>书写模式</strong>(<code>writing mode</code>)的语言中垂直运行。它可以在任何垂直书写模式的语言中水平运行。对应的<strong>内联方向</strong>是内联内容（如句子）的运行方向。</p> </div> -<p>当你使用css创建一个布局时，你正在离开<strong>正常布局流</strong>，但是对于页面上的多数元素，<strong>正常布局流</strong>将完全可以创建你所需要的布局。从一个结构良好的Html文档开始是如此重要，因为你可以按照默认的方式来搭建页面，而不是自己发明轮子。</p> +<p>当你使用css创建一个布局时，你正在离开<strong>正常布局流</strong>，但是对于页面上的多数元素，<strong>正常布局流</strong>将完全可以创建你所需要的布局。从一个结构良好的Html文档开始是非常重要，因为你可以按照默认的方式来搭建页面，而不是自造车轮。</p> <p>下列布局技术会覆盖默认的布局行为：</p> diff --git a/files/zh-cn/learn/javascript/异步/async_await/index.html b/files/zh-cn/learn/javascript/异步/async_await/index.html index ae79af9899..739ab63602 100644 --- a/files/zh-cn/learn/javascript/异步/async_await/index.html +++ b/files/zh-cn/learn/javascript/异步/async_await/index.html @@ -323,11 +323,11 @@ timeTest().then(() => { <p>您必须仔细测试您的代码，并在性能开始受损时牢记这一点。</p> -<p>另一个小小的不便是你必须将期待已久的promise封装在异步函数中。</p> +<p>另一个小小的不便是你必须将等待执行的promise封装在异步函数中。</p> <h2 id="Asyncawait_的类方法">Async/await 的类方法</h2> -<p>最后值得一提的是，我们可以在类/对象方法前面添加<code>async</code>，以使它们返回promises，并<code>await</code>它们内部的promises。查看 <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ECMAScript_2015_Classes">ES class code we saw in our object-oriented JavaScript article</a>，然后使用异步方法查看我们的修改版本：</p> +<p>最后值得一提的是，我们可以在类/对象方法前面添加<code>async</code>，以使它们返回promises，并<code>await</code>它们内部的promises。查看 <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ECMAScript_2015_Classes">ES class code we saw in our object-oriented JavaScript article</a>，然后查看使用异步方法的修改版本：</p> <pre class="brush: js notranslate">class Person { constructor(first, last, age, gender, interests) { diff --git a/files/zh-cn/learn/javascript/异步/choosing_the_right_approach/index.html b/files/zh-cn/learn/javascript/异步/choosing_the_right_approach/index.html index f11113420e..276d815b85 100644 --- a/files/zh-cn/learn/javascript/异步/choosing_the_right_approach/index.html +++ b/files/zh-cn/learn/javascript/异步/choosing_the_right_approach/index.html @@ -7,7 +7,7 @@ translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach <div>{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</div> -<p>为了完成这个模块，我们将简要讨论我们在整个过程中讨论的不同编码技术和功能，看看你应该使用哪一个，并提供适当的常见陷阱的建议和提醒。随着时间的推移，我们可能会添加到此资源中。</p> +<p>为了完成这个模块，我们将简要讨论之前章节谈论过编码技术和功能，看看你应该使用哪一个，并提供适当的建议和提醒。随着时间的推移，我们可能会添加到此资源中。</p> <table class="learn-box standard-table"> <tbody> @@ -24,7 +24,7 @@ translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach <h2 id="异步回调">异步回调</h2> -<p>通常在旧式API中找到，涉及将函数作为参数传递给另一个函数，然后在异步操作完成时调用该函数，以便回调可以依次对结果执行某些操作。这是promise的先导;它不那么高效或灵活。仅在必要时使用。</p> +<p>通常在旧式API中找到，涉及将函数作为参数传递给另一个函数，然后在异步操作完成时调用该函数，以便回调可以依次对结果执行某些操作。这是promise的前身;它不那么高效或灵活。仅在必要时使用。</p> <table class="standard-table"> <caption>Useful for...</caption> @@ -76,7 +76,7 @@ loadAsset('coffee.jpg', 'blob', displayImage);</pre> <ul> <li>嵌套回调可能很麻烦且难以阅读（即“回调地狱”）</li> - <li>每层嵌套都需要调用一次失败回调，而使用promises，您只需使用一个<code>.catch（）</code>代码块来处理整个链的错误。</li> + <li>每层嵌套都需要故障回调，而使用promises，您只需使用一个<code>.catch（）</code>代码块来处理整个链的错误。</li> <li>异步回调不是很优雅。</li> <li>Promise回调总是按照它们放在事件队列中的严格顺序调用;异步回调不是。</li> <li>当传入到一个第三方库时，异步回调对函数如何执行失去完全控制。</li> @@ -137,8 +137,8 @@ setTimeout(function run() { <p>递归<code>setTimeout（）</code>和<code>setInterval（）</code>之间存在差异：</p> <ul> - <li>递归<code>setTimeout（）</code>保证执行之间至少经过指定的时间（在本例中为100ms）;代码将运行，然后等待100毫秒再次运行。无论代码运行多长时间，间隔都是相同的。</li> - <li>使用<code>setInterval（）</code>，我们选择的间隔包括执行我们想要运行的代码所花费的时间。假设代码需要40毫秒才能运行 ––然后间隔最终只有60毫秒。</li> + <li>递归<code>setTimeout（）</code>保证两次执行间经过指定的时间量（在本例中为100ms）;代码将运行，然后等待100毫秒再次运行。无论代码运行多长时间，间隔都是相同的。</li> + <li>使用<code>setInterval（）</code>，我们选择的时间间隔包含了运行代码所花费的时间。（还是100ms为例）假设代码需要40毫秒才能运行 –– 间隔最终只会有60毫秒。</li> </ul> <p>当你的代码有可能比你分配的时间间隔更长时间运行时，最好使用递归的<code>setTimeout（）</code> ––这将使执行之间的时间间隔保持不变，无论代码执行多长时间，你不会得到错误。</p> @@ -156,7 +156,7 @@ setTimeout(function run() { <h2 id="setInterval">setInterval()</h2> -<p><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code>是一种允许您在每次执行之间以设定的时间间隔重复运行函数的方法。不如<code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code>有效，但允许您选择运行速率/帧速率。</p> +<p><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code>函数允许重复执行一个函数，并设置时间间隔。不如<code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code>有效率，但允许您选择运行速率/帧速率。</p> <table class="standard-table"> <caption>Useful for...</caption> diff --git a/files/zh-cn/learn/javascript/异步/promises语法/index.html b/files/zh-cn/learn/javascript/异步/promises语法/index.html index a817a71d79..665bda8129 100644 --- a/files/zh-cn/learn/javascript/异步/promises语法/index.html +++ b/files/zh-cn/learn/javascript/异步/promises语法/index.html @@ -188,7 +188,7 @@ translation_of: Learn/JavaScript/Asynchronous/Promises <p>好的，我们还需要做点额外的工作。Fetch promises 不会产生 404 或 500错误，只有在产生像网路故障的情况时才会不工作。总的来说，Fetch promises 总是成功运行，即使<a href="https://developer.mozilla.org/en-US/docs/Web/API/Response/ok">response.ok</a> 属性是<code> false</code>。为了产生404错误，我们需要判断 <code>response.ok</code> ，如果是 <code>false</code>，抛出错误，否则返回 blob。就像下面的代码这样做。</p> -<pre class="notranslate"><code>let promise2 = promise.then(response => { +<pre class="brush: js notranslate"><code>let promise2 = promise.then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } else { @@ -204,7 +204,7 @@ translation_of: Learn/JavaScript/Asynchronous/Promises <p>6. 现在让我们填写执行程序函数的主体。在花括号内添加以下行：</p> -<pre class="notranslate"><code>let objectURL = URL.createObjectURL(myBlob); +<pre class="brush: js notranslate"><code>let objectURL = URL.createObjectURL(myBlob); let image = document.createElement('img'); image.src = objectURL; document.body.appendChild(image);</code></pre> @@ -237,8 +237,14 @@ document.body.appendChild(image);</code></pre> <p>这是写出来的一种非常简便的方式;我们故意这样做是为了帮助你清楚地了解发生了什么。如本文前面所示，你可以将<code>.then()</code>块（以及<code>.catch()</code>块）链接在一起。上面的代码也可以这样写(参阅GitHub上的<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch-chained.html">simple-fetch-chained.html</a> ):</p> -<pre class="brush: js notranslate">fetch('coffee.jpg') -.then(response => response.blob()) +<pre class="brush: js notranslate"><code>fetch('coffee.jpg') +.then(response => { + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } else { + return response.blob(); + } +}) .then(myBlob => { let objectURL = URL.createObjectURL(myBlob); let image = document.createElement('img'); @@ -247,7 +253,7 @@ document.body.appendChild(image);</code></pre> }) .catch(e => { console.log('There has been a problem with your fetch operation: ' + e.message); -});</pre> +});</code></pre> <p>请记住，履行的promise所返回的值将成为传递给下一个 <code>.then()</code> 块的executor函数的参数。</p> @@ -279,9 +285,9 @@ document.body.appendChild(image);</code></pre> ... });</pre> -<p>如果它们都<strong>实现</strong>，那么一个包含所有这些结果的数组将作为<code>.all()</code>的参数传给其链接的<code>.then()</code>块的执行器函数。如果传递给<code>Promise.all()</code>的任何promise都<strong>拒绝</strong>，整个块将<strong>拒绝</strong>。</p> +<p>如果它们都<strong>实现</strong>，那么数组中的结果将作为参数传递给<code>.then()</code>块中的执行器函数。如果传递给<code>Promise.all()</code>的任何一个 promise <strong>拒绝</strong>，整个块将<strong>拒绝</strong>。</p> -<p>这非常有用。想象一下，我们正在获取信息以在内容上动态填充页面上的UI功能。在许多情况下，接收所有数据然后才显示完整内容，而不是显示部分信息是有意义的。</p> +<p>这非常有用。想象一下，我们正在获取信息以在内容上动态填充页面上的UI功能。在许多情况下，接收所有数据然后才显示完整内容，而不是显示部分信息。</p> <p>让我们构建另一个示例来展示这一点。</p> @@ -323,11 +329,11 @@ Promise.all([a, b, c]).then(values => { <p>这看起来有点复杂，所以让我们一步一步地完成它：</p> <ol> - <li>首先，我们定义函数，向它传递一个URL和一个表示它正在获取的资源类型的字符串。</li> - <li>在函数体内部，我们有一个类似于我们在第一个例子中看到的结构 - 我们调用<code>fetch()</code>函数来获取指定URL处的资源，然后将其链接到另一个返回解码（或“read”）的promise。 ）响应body。这始终是前一个示例中的<code>blob()</code>方法。</li> + <li>首先，我们定义函数，向它传递一个URL和字符串，这个字符串表示资源类型。</li> + <li>在函数体内部，我们有一个类似于我们在第一个例子中看到的结构 - 我们调用<code>fetch()</code>函数来获取指定URL处的资源，然后将其链接到另一个 promise ，它解码（或“read”）响应body。这是前一个示例中的<code>blob()</code>方法。</li> <li>但是，这里有两处不同： <ul> - <li>首先，我们返回的第二个promise会因类型值的不同而不同。在执行函数内部，我们包含一个简单的<code>if ... else if</code>语句，根据我们需要解码的文件类型返回不同的promise（在这种情况下，我们可以选择<code>blob</code>或<code>text</code>，但这很容易扩展这个以处理其他类型）。</li> + <li>首先，我们返回的第二个promise会因类型值的不同而不同。在执行函数内部，我们包含一个简单的<code>if ... else if</code>语句，根据我们需要解码的文件类型返回不同的promise（在这种情况下，我们可以选择<code>blob</code>或<code>text</code>，而且很容易扩展这个以处理其他类型）。</li> <li>其次，我们在<code>fetch()</code>调用之前添加了<code>return</code>关键字。它的作用是运行整个链，然后运行最终结果（即<code>blob()</code>或<code>text()</code>返回的promise作为我们刚刚定义的函数的返回值）。实际上，<code>return</code>语句将结果从链返回到顶部。</li> </ul> </li> @@ -352,7 +358,7 @@ let description = fetchAndDecode('description.txt', 'text');</pre> });</pre> - <p>你可以看到它需要一个包含promises作为参数的数组。执行者只有在所有三个promises的状态成为<strong>resolved</strong>时才会运行;当发生这种情况时，它将传递一个数组，其中包含来自各个promise（即解码的响应主体）的结果，类似于 [coffee-results, tea-results, description-results].</p> + <p>你可以看到它需要一个包含promises作为参数的数组。执行者只有在所有三个promises的状态成为<strong>resolved</strong>时才会运行;当发生这种情况时，它将被传入一个数组，其中包含来自各个promise（即解码的响应主体）的结果，类似于 [coffee-results, tea-results, description-results].</p> </li> <li> <p>最后，在执行程序中添加以下内容。这里我们使用一些相当简单的同步代码将结果存储在单独的变量中（从blob创建对象URL），然后在页面上显示图像和文本。</p> @@ -407,7 +413,7 @@ document.body.appendChild(para);</pre> runFinalCode(); });</pre> -<p>在最近的现代浏览器中，<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code> 方法可用，它可以链接到常规promise链的末尾，允许你减少代码重复并更优雅地执行操作。上面的代码现在可以写成如下：</p> +<p>在现代浏览器中，<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code> 方法可用，它可以链接到常规promise链的末尾，允许你减少代码重复并更优雅地执行操作。上面的代码现在可以写成如下：</p> <pre class="brush: js notranslate">myPromise .then(response => { @@ -422,12 +428,16 @@ document.body.appendChild(para);</pre> <p>有关一个真实示例，请查看我们的<a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-finally.html">promise-finally.html demo</a>（另请参阅<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-finally.html">source code</a>）。这与我们在上面部分中看到的<code>Promise.all()</code>演示完全相同，除了在<code>fetchAndDecode()</code>函数中我们将<code>finally()</code>调用链接到链的末尾：</p> -<pre class="brush: js notranslate">function fetchAndDecode(url, type) { +<pre class="brush: js notranslate"><code>function fetchAndDecode(url, type) { return fetch(url).then(response => { - if(type === 'blob') { - return response.blob(); - } else if(type === 'text') { - return response.text(); + if(!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } else { + if(type === 'blob') { + return response.blob(); + } else if(type === 'text') { + return response.text(); + } } }) .catch(e => { @@ -436,7 +446,7 @@ document.body.appendChild(para);</pre> .finally(() => { console.log(`fetch attempt for "${url}" finished.`); }); -}</pre> +}</code></pre> <p>这会将一条简单的消息记录到控制台，告诉我们每次获取尝试的时间。</p> @@ -454,7 +464,7 @@ document.body.appendChild(para);</pre> <p>可以使用<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise()</a></code> 构造函数构建自己的promise。当你需要使用现有的旧项目代码、库或框架以及基于现代promise的代码时，这会派上用场。比如，当你遇到没有使用promise的旧式异步API的代码时，你可以用promise来重构这段异步代码。</p> -<p>让我们看一个简单的示例来帮助你入门 —— 这里我们使用promise包装一个<code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code>调用 - 它会在两秒后运行一个函数，该函数将用字符串“Success!”，解析当前promise（调用链接的<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve">resolve()</a></code>），。</p> +<p>让我们看一个简单的示例来帮助你入门 —— 这里我们用 promise 包装一了个<code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a>，</code>它会在两秒后运行一个函数，该函数将用字符串“Success!”，解析当前promise（调用链接的<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve">resolve()</a></code>）。</p> <pre class="brush: js notranslate">let timeoutPromise = new Promise((resolve, reject) => { setTimeout(function(){ @@ -462,7 +472,7 @@ document.body.appendChild(para);</pre> }, 2000); });</pre> -<p><code>resolve()</code>和<code>reject()</code>是用来<strong>实现</strong>和<strong>拒绝</strong>新创建的promise的函数。此处，promise<strong>实现</strong>了字符串“Success!”。</p> +<p><code>resolve()</code>和<code>reject()</code>是用来<strong>实现</strong>和<strong>拒绝</strong>新创建的promise的函数。此处，promise 成功运行通过显示字符串“Success!”。</p> <p>因此，当你调用此promise时，可以将<code>.then()</code>块链接到它的末尾，它将传递给<code>.then()</code>块一串“Success!”。在下面的代码中，我们显示出该消息：</p> @@ -534,7 +544,7 @@ document.body.appendChild(para);</pre> <h3 id="一个更真实的例子">一个更真实的例子</h3> -<p>上面的例子是故意做得简单，以使概念易于理解，但它并不是实际上完全同步。异步性质基本上是使用<code>setTimeout()</code>伪造的，尽管它仍然表明promises对于创建具有合理的操作流程，良好的错误处理等的自定义函数很有用</p> +<p>上面的例子是故意做得简单，以使概念易于理解，但它并不是实际上完全异步。异步性质基本上是使用<code>setTimeout()</code>伪造的，尽管它仍然表明promises对于创建具有合理的操作流程，良好的错误处理等的自定义函数很有用</p> <p>我们想邀请你学习的一个例子是<a href="https://github.com/jakearchibald/idb/">Jake Archibald's idb library</a>，它真正地显示了<code>Promise()</code>构造函数的有用异步应用程序。这采用了 <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB API</a>，它是一种旧式的基于回调的API，用于在客户端存储和检索数据，并允许你将其与promises一起使用。如果你查看<a href="https://github.com/jakearchibald/idb/blob/master/lib/idb.js">main library file</a>，你将看到我们在上面讨论过的相同类型的技术。以下块将许多IndexedDB方法使用的基本请求模型转换为使用promise：</p> diff --git a/files/zh-cn/learn/javascript/异步/简介/index.html b/files/zh-cn/learn/javascript/异步/简介/index.html index c218d064ca..1792c0e086 100644 --- a/files/zh-cn/learn/javascript/异步/简介/index.html +++ b/files/zh-cn/learn/javascript/异步/简介/index.html @@ -229,7 +229,7 @@ console.log("all done");</pre> <p>要查看实际情况，请尝试获取<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync.html">示例</a>的本地副本，并将第三个<code>console.log()</code>调用更改为以下命令：</p> -<pre class="brush: js notranslate">console.log ('All done! ' + image + 'displayed.');</pre> +<pre class="brush: js notranslate">console.log ('All done! ' + image.src + 'displayed.');</pre> <p>此时控制台将会报错，而不会显示第三个 <code>console.log</code> 的信息：</p> diff --git a/files/zh-cn/web/api/eventtarget/attachevent/index.html b/files/zh-cn/web/api/eventtarget/attachevent/index.html index 3ddf224034..41ce03185b 100644 --- a/files/zh-cn/web/api/eventtarget/attachevent/index.html +++ b/files/zh-cn/web/api/eventtarget/attachevent/index.html @@ -1,96 +1,8 @@ --- title: 为这个EventTarget附加事件. slug: Web/API/EventTarget/attachEvent +tags: + - Junk translation_of: Web/API/EventTarget/addEventListener --- -<p>{{APIRef("DOM Events")}}</p> - -<p>{{ Non-standard_header() }}</p> - -<h2 id="摘要">摘要</h2> - -<p>这是早期IE浏览器（IE8及早期版本）的一个专有的替代性标准，替代EventTarget.addEventListener()方法，{{domxref("EventTarget.addEventListener()")}} 方法</p> - -<h2 id="Syntax" name="Syntax">语法</h2> - -<pre class="syntaxbox"><em>attached</em> = <em>target</em>.attachEvent(<em>eventNameWithOn</em>, <em>callback</em>) - -</pre> - -<dl> - <dt> 作用的元素（target）</dt> - <dd>一个用于监听事件的文档对象模型元素</dd> - <dt>事件名伴随On（eventNameWithOn）</dt> - <dd>监听的事件名以on前置，类似一个属性的管理者，譬如当你使用onclick时能够监听你的click事件</dd> - <dt>回调函数</dt> - <dd>当目标触发事件时回调函数被调用。这个函数被调用时不带参数，并且这些都将设置在<a href="/en-US/docs/Web/API/Window/window"><code>window</code> object.</a>这个对象中</dd> - <dt>附加</dt> - <dt> 是否成功附加上属性会以布尔值表示</dt> -</dl> - -<h2 id="规范">规范</h2> - -<p>不存在于任何标准规范中</p> - -<p>微软在MSDN有详细描述 <a href="https://msdn.microsoft.com/en-us/library/ms536343(v=vs.85).aspx">has a description on MSDN</a>.</p> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器是否合适</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>6 thru 10 [1]</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1]: <code>attachEvent()</code> 不再被IE11支持。</p> - -<p>{{domxref("EventTarget.addEventListener()")}}被IE9+支持.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("EventTarget.detachEvent()")}}</li> - <li>{{domxref("EventTarget.fireEvent()")}}</li> -</ul> +<p>{{DOMxRef("EventTarget.addEventListener","EventTarget.addEventListener()")}}</p> diff --git a/files/zh-cn/web/api/idbkeyrange/index.html b/files/zh-cn/web/api/idbkeyrange/index.html index 32481c3a02..af65cfbb11 100644 --- a/files/zh-cn/web/api/idbkeyrange/index.html +++ b/files/zh-cn/web/api/idbkeyrange/index.html @@ -16,10 +16,10 @@ translation_of: Web/API/IDBKeyRange <p>{{APIRef("IndexedDB")}}</p> <div> -<p>The <strong><code>IDBKeyRange</code></strong> interface of the <a href="/en/IndexedDB" title="en/IndexedDB">IndexedDB API</a> represents a continuous interval over some data type that is used for keys. Records can be retrieved from {{domxref("IDBObjectStore")}} and {{domxref("IDBIndex")}} objects using keys or a range of keys. You can limit the range using lower and upper bounds. For example, you can iterate over all values of a key in the value range A–Z.</p> +<p><a href="/en/IndexedDB" title="en/IndexedDB">IndexedDB API</a> 的<strong><code>IDBKeyRange</code></strong>接口表示一些数据类型上的键的连续间隔。可以使用一个键或某个范围的键从{{domxref("IDBObjectStore")}} 和{{domxref("IDBIndex")}} 对象中检索记录。您也可以指定键的上界和下界来限制范围。例如，您可以遍历值范围a - z中的键的所有值。</p> </div> -<p>A key range can be a single value or a range with upper and lower bounds or endpoints. If the key range has both upper and lower bounds, then it is <em>bounded</em>; if it has no bounds, it is <em>unbounded</em>. A bounded key range can either be open (the endpoints are excluded) or closed (the endpoints are included). To retrieve all keys within a certain range, you can use the following code constructs:</p> +<p>键范围可以是单个值，也可以是具有上界、下界或端点的范围。如果键范围同时有上界或下界，那么它是有界的，否则是无界的。有界键范围可以是开放的（不包含端点）或闭合的（包含了端点）。要检索一定范围内的所有键值，可以使用以下的代码结构：</p> <table class="standard-table"> <thead> @@ -66,21 +66,21 @@ translation_of: Web/API/IDBKeyRange </thead> </table> -<p>A key is in a key range if the following conditions are true:</p> +<p>如果以下条件为true，则键包含在键范围中:</p> <ul> - <li>The lower value of the key range is one of the following: + <li>键范围的下界值为以下值或符合以下条件之一时: <ul> <li><code>undefined</code></li> - <li>Less than key value</li> - <li>Equal to key value if <code>lowerOpen</code> is <code>false</code>.</li> + <li>低于正在被鉴定的键值</li> + <li>等于正在被鉴定的键值，且键范围的<code>lowerOpen属性</code>为<code>false</code>.</li> </ul> </li> - <li>The upper value of the key range is one of the following: + <li>键范围的上界值为以下值或符合以下条件之一时: <ul> <li><code>undefined</code></li> - <li>Greater than key value</li> - <li>Equal to key value if <code>upperOpen</code> is <code>false</code>.</li> + <li>高于正在被鉴定的键值</li> + <li>等于正在被鉴定的键值，且键范围的<code>upperOpen<font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">属性为</span></font></code><code>false</code>.</li> </ul> </li> </ul> @@ -91,13 +91,13 @@ translation_of: Web/API/IDBKeyRange <dl> <dt>{{domxref("IDBKeyRange.lower")}} {{readonlyInline}}</dt> - <dd>Lower bound of the key range.</dd> + <dd>键范围的下界</dd> <dt>{{domxref("IDBKeyRange.upper")}} {{readonlyInline}}</dt> - <dd>Upper bound of the key range.</dd> + <dd>键范围的上界</dd> <dt>{{domxref("IDBKeyRange.lowerOpen")}} {{readonlyInline}}</dt> - <dd>Returns false if the lower-bound value is included in the key range.</dd> + <dd>如果下界值包含在键范围内，则返回false。</dd> <dt>{{domxref("IDBKeyRange.upperOpen")}} {{readonlyInline}}</dt> - <dd>Returns false if the upper-bound value is included in the key range.</dd> + <dd>如果上界值包含在键范围内，则返回false。</dd> </dl> <h2 id="Methods">Methods</h2> @@ -106,31 +106,31 @@ translation_of: Web/API/IDBKeyRange <dl> <dt>{{domxref("IDBKeyRange.bound()")}}</dt> - <dd>Creates a new key range with upper and lower bounds.</dd> + <dd>指定上界和下界来创建一个新的键范围</dd> <dt>{{domxref("IDBKeyRange.only()")}}</dt> - <dd>Creates a new key range containing a single value.</dd> + <dd>指定单个键值来创建一个新的键范围</dd> <dt>{{domxref("IDBKeyRange.lowerBound()")}}</dt> - <dd>Creates a new key range with only a lower bound.</dd> + <dd>指定结果集的下界来创建一个新的键范围</dd> <dt>{{domxref("IDBKeyRange.upperBound()")}}</dt> - <dd>Creates a new upper-bound key range.</dd> + <dd>指定结果集的上界来创建一个新的键范围</dd> </dl> <h3 id="Instance_methods">Instance methods</h3> <dl> <dt>{{domxref("IDBKeyRange.includes()")}}</dt> - <dd>Returns a boolean indicating whether a specified key is inside the key range.</dd> + <dd>返回一个布尔值来表示指定的键是否在键范围内。</dd> </dl> <h2 id="Examples">Examples</h2> -<p>The following example illustrates how you'd use a key range. Here we declare a <code>keyRangeValue</code> as a range between values of "A" and "F". We open a transaction (using {{domxref("IDBTransaction")}}) and an object store, and open a Cursor with {{domxref("IDBObjectStore.openCursor")}}, declaring <code>keyRangeValue</code> as its optional key range value. This means that the cursor will only retrieve records with keys inside that range. This range includes the values "A" and "F", as we haven't declared that they should be open bounds. If we used <span style="background-color: #fafbfc; font-family: consolas,monaco,andale mono,monospace; font-size: 1rem; line-height: 19px; white-space: pre;">IDBKeyRange.bound("A", "F", true, true);</span>, then the range would not include "A" and "F", only the values between them.</p> +<p>以下示例用以说明该如果使用键范围。在此我们将 <code>keyRangeValue</code> 声明为A～F之间的范围。我们打开一个事务 (使用 {{domxref("IDBTransaction")}}) 和一个对象存储, 并用 {{domxref("IDBObjectStore.openCursor")}}打开一个游标，其中<code>keyRangeValue</code>是一个可选的键范围值，指定之后游标将只检索键在该范围内的记录。这里的键范围包括了“A”和“F”，因为我们还没声明键范围为开放边界。如果我们使用 <span style="background-color: #fafbfc; font-family: consolas,monaco,andale mono,monospace; font-size: 1rem; line-height: 19px; white-space: pre;"><code>IDBKeyRange.bound("A", "F", true, true);</code>，那么这个键范围将不包括</span>“A”和“F”，只包含它们之间的值。</p> <div class="note"> <p><strong>Note</strong>: For a more complete example allowing you to experiment with key range, have a look at our <a href="https://github.com/mdn/indexeddb-examples/tree/master/idbkeyrange">IDBKeyRange-example</a> repo (<a href="https://mdn.github.io/indexeddb-examples/idbkeyrange/">view the example live too</a>.)</p> </div> -<pre class="brush: js">function displayData() { +<pre class="brush: js notranslate">function displayData() { var keyRangeValue = IDBKeyRange.bound("A", "F"); var transaction = db.transaction(['fThings'], 'readonly'); diff --git a/files/zh-cn/web/api/window/scrollto/index.html b/files/zh-cn/web/api/window/scrollto/index.html index 715e3f0190..83cc7657aa 100644 --- a/files/zh-cn/web/api/window/scrollto/index.html +++ b/files/zh-cn/web/api/window/scrollto/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Window/scrollTo <h2 id="Syntax" name="Syntax">语法</h2> -<pre><code>window.scrollTo(x<em>-coord</em>,<em>y-coord</em> )</code> +<pre class="notranslate"><code>window.scrollTo(x<em>-coord</em>,<em>y-coord</em> )</code> <code>window.scrollTo(options)</code></pre> @@ -26,7 +26,7 @@ translation_of: Web/API/Window/scrollTo <ol> <li><code><em>top</em></code> 等同于 <code><em>y-coord</em></code></li> <li><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">left</span></font> 等同于 <code>x<em>-coord</em></code></li> - <li><code><em>behavior</em></code><em> 类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant</em></li> + <li><code><em>behavior</em></code><em> 类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto</em></li> </ol> <dl> @@ -34,7 +34,7 @@ translation_of: Web/API/Window/scrollTo <h2 id="Example" name="Example">例子</h2> -<pre>window.scrollTo( 0, 1000 ); +<pre class="notranslate">window.scrollTo( 0, 1000 ); <code>// 设置滚动行为改为平滑的滚动 window.scrollTo({ diff --git a/files/zh-cn/web/css/filter/index.html b/files/zh-cn/web/css/filter/index.html index 0bb84948cb..4b8ab9fcdb 100644 --- a/files/zh-cn/web/css/filter/index.html +++ b/files/zh-cn/web/css/filter/index.html @@ -10,9 +10,9 @@ translation_of: Web/CSS/filter --- <p>{{CSSRef}}</p> -<p><strong><code>filter </code></strong><span style="background-color: #fafafa; color: #2b2b2b; font-family: arial,sans-serif;">CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。</span></p> +<p><strong><code>filter</code> </strong><span style="background-color: #fafafa; color: #2b2b2b; font-family: arial,sans-serif;">CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。</span></p> -<p>CSS标准里包含了一些已实现预定义效果的函数。你也可以参考一个SVG<span style="background-color: #fafafa; color: #2b2b2b; font-family: arial,sans-serif;">滤镜</span>，通过一个URL链接到SVG<span style="background-color: #fafafa; color: #2b2b2b; font-family: arial,sans-serif;">滤镜元素</span>(<a href="/en-US/docs/Web/SVG/Element/filter" style="line-height: 1.5;" title="/en/SVG/Element/filter">SVG filter element</a>)。</p> +<p>CSS 标准里包含了一些已实现预定义效果的函数。你也可以参考一个 SVG <span style="background-color: #fafafa; color: #2b2b2b; font-family: arial,sans-serif;">滤镜</span>，通过一个 URL 链接到 SVG <span style="background-color: #fafafa; color: #2b2b2b; font-family: arial,sans-serif;">滤镜元素</span>(<a href="/en-US/docs/Web/SVG/Element/filter" style="line-height: 1.5;" title="/en/SVG/Element/filter">SVG filter element</a>)。</p> <div>{{EmbedInteractiveExample("pages/css/filter.html")}}</div> @@ -20,7 +20,7 @@ translation_of: Web/CSS/filter <h2 id="语法">语法</h2> -<pre class="brush:css no-line-numbers">/* URL to SVG filter */ +<pre class="brush:css no-line-numbers notranslate">/* URL to SVG filter */ filter: url("filters.svg#filter-id"); /* <filter-function> values */ @@ -38,247 +38,84 @@ filter: sepia(60%); /* Multiple filters */ filter: contrast(175%) brightness(3%); +/* Use no filter */ +filter: none; + /* Global values */ filter: inherit; filter: initial; -filter: unset; -</pre> +filter: unset;</pre> <p>设置一种函数，方法如下：</p> -<pre>filter: <filter-function> [<filter-function>]* | none +<pre class="notranslate">filter: <filter-function> [<filter-function>]* | none </pre> -<p>给SVG元素 {{ SVGElement("filter") }}引用滤镜, 如下：</p> +<p>给SVG元素 {{SVGElement("filter")}} 引用滤镜, 如下：</p> -<pre class="eval">filter: url(svg-url#element-id) -</pre> +<pre class="notranslate">filter: url(file.svg#filter-element-id)</pre> <h3 id="插值">插值</h3> -<p>如果起始和结束过滤器都有一个不含{{cssxref("<url>")}}的相同长度的函数列表，则会根据其指定的规则对其每个过滤器函数进行插值。如果它们的长度不同，较长列表中确实的等效过滤器函数将使用空白的值添加到较短列表的尾部，然后所有的过滤器函数根据其特定的规则插值。如果一个过滤器是<code>none</code>则会使用过滤器函数的默认值替换函数列表，然后根据特定的规则进行插值，否则使用离散插值。</p> - -<h3 id="形式语法">形式语法</h3> - -<pre>{{csssyntax}}</pre> - -<h2 id="实例">实例</h2> - -<p>下面的例子是使用预设的滤镜函数。每个函数都有特定的例子.</p> - -<pre class="brush: css">.mydiv { filter: grayscale(50%) } - -/* gray all images by 50% and blur by 10px */ -img { - filter: grayscale(0.5) blur(10px); -}</pre> - -<p>下面的例子展示：通过url函数引入一个svg资源.</p> - -<pre class="brush: css">.target { filter: url(#c1); } - -.mydiv { filter: url(commonfilters.xml#large-blur) } -</pre> +<p>如果起始和结束过滤器都有一个不含 {{cssxref("<url>")}} 的相同长度的函数列表，则会根据其指定的规则对其每个过滤器函数进行插值。如果它们的长度不同，较长列表中确实的等效过滤器函数将使用空白的值添加到较短列表的尾部，然后所有的过滤器函数根据其特定的规则插值。如果一个过滤器是<code>none</code>则会使用过滤器函数的默认值替换函数列表，然后根据特定的规则进行插值，否则使用离散插值。</p> <h2 id="函数">函数</h2> -<p>使用CSS滤镜属性，你需要设定下面某一函数的值。如果该值无效，函数返回“none“。除特殊说明外，函数的值如果接受百分比值（如34%），那么该函数也接受小数值（如0.34）。</p> +<p>使用 CSS 滤镜属性，你需要设定下面某一函数的值。如果该值无效，函数返回 <code>none</code>。除特殊说明外，函数的值如果接受百分比值（如 <code>34%</code>），那么该函数也接受小数值（如0.34）。</p> -<h3 id="url()"><code>url()</code></h3> +<p>当单个 <code>filter</code> 属性具有两个或多个函数时，其结果将与将两个或多个 <code>filter</code> 属性分别应用于相同的函数时的结果不同</p> -<p>URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素.</p> +<h3 id="SVG_filter">SVG filter</h3> -<pre class="brush: css">filter: url(resources.svg#c1) -</pre> +<h4 id="url">url()</h4> -<h3 id="blur()"><code>blur()</code></h3> +<p>获取指向SVG过滤器的URI，该 <a href="/zh-CN/docs/Web/SVG/Element/filter">SVG filter</a> 可以嵌入到外部XML文件中。</p> -<p><code>给图像设置高斯模糊。“radius”一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。</code></p> +<pre class="brush: css notranslate">filter: url(resources.svg#c1)</pre> -<pre class="brush: css">filter: blur(5px) -</pre> +<h3 id="Filter_函数">Filter 函数</h3> -<div id="blur_example" style="display: none;"> -<pre class="brush: html"> <table class="standard-table"> - <thead> - <tr> - <th align="left" scope="col">Original image</th> - <th align="left" scope="col">Live example</th> - <th align="left" scope="col">SVG Equivalent</th> - <th align="left" scope="col">Static example</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /></td> - <td><img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg id="img3" viewbox="0 0 233 176"> - <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%" > - <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> - </filter> - <image xlink:href="/files/3710/Test_Form_2.jpeg" filter="url(#svgBlur)" x="5%" y="5%" width="212px" height="161px" /> -</svg><div></td> - <td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3711/Test_Form_2_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table></pre> +<h4 id="blur">blur()</h4> -<pre class="brush: css">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter:blur(5px); - -webkit-filter:blur(5px); - -o-filter:blur(5px); - -ms-filter:blur(5px); - filter:blur(5px); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - height: 100%; - width: 85%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} +<p>{{cssxref("filter-function/blur", "blur()")}} 函数将高斯模糊应用于输入图像。<code>radius</code> 定义了高斯函数的标准偏差值，或者屏幕上有多少像素相互融合，因此，较大的值将产生更多的模糊。若没有设置值，默认为<code>0</code>。该参数可以指定为 CSS 长度，但不接受百分比值。</p> + +<pre class="brush: css notranslate">filter: blur(5px) </pre> -</div> -<pre class="brush: html"><svg height="0" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: html notranslate"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"> <feGaussianBlur in="SourceGraphic" stdDeviation="5"/> </filter> </svg></pre> -<p>{{EmbedLiveSample('blur_example','100%','236px','')}}</p> +<p>{{EmbedLiveSample('blur_example','100%','236px','','', 'no-codepen')}}</p> -<h3 id="brightness()"><code>brightness()</code></h3> +<h4 id="brightness">brightness()</h4> -<p>给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。</p> +<p>{{cssxref("filter-function/brightness", "brightness()")}} 函数将线性乘法器应用于输入图像，使其看起来或多或少地变得明亮。值为 <code>0％</code> 将创建全黑图像。值为 <code>100％</code> 会使输入保持不变。其他值是效果的线性乘数。如果值大于 <code>100%</code> 提供更明亮的结果。若没有设置值，默认为 <code>1</code>。</p> -<pre class="brush: css">filter: brightness(0.5)</pre> +<pre class="brush: css notranslate">filter: brightness(2)</pre> -<pre class="brush: html"><svg height="0" xmlns="http://www.w3.org/2000/svg"> - <filter id="brightness"> +<pre class="brush: html notranslate"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> + <filter id="brightness"> <feComponentTransfer> - <feFuncR type="linear" slope="[amount]"/> - <feFuncG type="linear" slope="[amount]"/> - <feFuncB type="linear" slope="[amount]"/> + <feFuncR type="linear" slope="[amount]"/> + <feFuncG type="linear" slope="[amount]"/> + <feFuncB type="linear" slope="[amount]"/> </feComponentTransfer> </filter> </svg></pre> -<div id="brightness_example" style="display: none;"> -<pre class="brush: html"><table class="standard-table"> - <thead> - <tr> - <th align="left" scope="col">Original image</th> - <th align="left" scope="col">Live example</th> - <th align="left" scope="col">SVG Equivalent</th> - <th align="left" scope="col">Static example</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /></td> - <td><img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217"> - <filter id="brightness"> - <feComponentTransfer> - <feFuncR type="linear" slope="2"/> - <feFuncG type="linear" slope="2"/> - <feFuncB type="linear" slope="2"/> - </feComponentTransfer> - </filter> - <image xlink:href="/files/3708/Test_Form.jpg" filter="url(#brightness)" width="286px" height="217px" /> -</svg><div></td> - <td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3709/Test_Form_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> +<p>{{EmbedLiveSample('brightness_example','100%','231px','','', 'no-codepen')}}</p> -<pre class="brush: css">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter:brightness(2); - -webkit-filter:brightness(2); - -o-filter:brightness(2); - -ms-filter:brightness(2); - filter:brightness(2); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - height:100%; - width: 85%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<p>{{EmbedLiveSample('brightness_example','100%','231px','')}}</p> +<h4 id="contrast">contrast()</h4> -<h3 id="contrast()"><code>contrast()</code></h3> +<p>{{cssxref("filter-function/contrast", "contrast()")}} 函数可调整输入图像的对比度。值是 <code>0%</code> 的话，图像会全黑。值是 <code>100%</code>，图像不变。值可以超过 <code>100%</code>，意味着会运用更低的对比。若没有设置值，默认是 <code>1</code>。</p> -<p>调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。</p> - -<pre class="brush: css">filter: contrast(200%) +<pre class="brush: css notranslate">filter: contrast(200%) </pre> -<pre class="brush: html"><svg height="0" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: html notranslate"><svg height="0" xmlns="http://www.w3.org/2000/svg"> <filter id="contrast"> <feComponentTransfer> <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> @@ -290,7 +127,7 @@ table.standard-table td { </pre> <div id="contrast_example" style="display: none;"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> <th align="left" scope="col">Original image</th> @@ -319,7 +156,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css notranslate">html { height:100%; } body { @@ -365,28 +202,25 @@ table.standard-table td { </pre> </div> -<p>{{EmbedLiveSample('contrast_example','100%','203px','')}}</p> +<p>{{EmbedLiveSample('contrast_example','100%','203px','','', 'no-codepen')}}</p> -<h3 id="drop-shadow()"><code>drop-shadow()</code></h3> +<h4 id="drop-shadow">drop-shadow()</h4> -<p>给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受<code><shadow>（</code>在CSS3背景中定义）类型的值，除了“inset”关键字是不允许的。该函数与已有的<code>box-shadow</code> {{cssxref("box-shadow")}}属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。 <shadow>参数如下：</p> +<p>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}} 函数对输入图像应用阴影效果。阴影可以设置模糊度的，以特定颜色画出的遮罩图的偏移版本，最终合成在图像下面。 函数接受<code><shadow></code>（在CSS3背景中定义）类型的值，除了 <code>inset</code> 和 <code>spread</code> 关键字。该函数与已有的 {{cssxref("box-shadow")}} 属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。<code><shadow></code> 参数如下：</p> <dl> <dt><code><offset-x></code> <code><offset-y></code> <small>(必须)</small></dt> - <dd>这是设置阴影偏移量的两个 {{cssxref("<length>")}}值. <code><offset-x></code> 设定水平方向距离. 负值会使阴影出现在元素左边. <code><offset-y></code>设定垂直距离.负值会使阴影出现在元素上方。.查看 {{cssxref("<length>")}}可能的单位.<br> - <code><font face="Open Sans, sans-serif">如果两个值都是</font>0</code>, 则阴影出现在元素正后面 (如果设置了<span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;"><blur-radius></code><span style="line-height: 1.5;"> and/or </span><code style="font-style: normal; line-height: 1.5;"><spread-radius>，</code><span style="line-height: 1.5;">会有模糊效果</span><span style="line-height: 1.5;">).</span></dd> + <dd>这是设置阴影偏移量的两个 {{cssxref("<length>")}} 值。 <code><offset-x></code> 设定水平方向距离，负值会使阴影出现在元素左边。 <code><offset-y></code>设定垂直距离，负值会使阴影出现在元素上方。查看 {{cssxref("<length>")}} 了解可能的单位.<br> + <font face="Open Sans, sans-serif">如果两个值都是 </font><code>0</code>, 则阴影出现在元素正后面 (如果设置了<span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;"><blur-radius></code><span style="line-height: 1.5;"> 且/或 </span><code><spread-radius></code> 也<span style="line-height: 1.5;">会有模糊效果</span><span style="line-height: 1.5;">).</span></dd> <dt><code><blur-radius></code> <small>(可选)</small></dt> - <dd>这是第三个 {{cssxref("<length>")}}值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值 若未设定，默认是0 (则阴影的边界很锐利).</dd> - <dt><code><spread-radius></code> <small>(可选)</small></dt> - <dd>这是第四个 {{cssxref("<length>")}} 值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小). <br> - 注意: Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。</dd> + <dd>这是第三个 {{cssxref("<length>")}} 值。值越大，越模糊，所以阴影可以变得更大或更淡。不允许负值。若未设定，默认是 <code>0</code> (则阴影的边界很锐利)。</dd> <dt><code><color></code> <small>(可选)</small></dt> - <dd>查看 {{cssxref("<color>")}}该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 会应用 {{ cssxref("color") }}属性的值。另外，如果颜色值省略，WebKit中阴影是透明的。</dd> + <dd>查看 {{cssxref("<color>")}} 了解该值可能的关键字和标记。若未设定，颜色值基于浏览器 —— 通常是 {{cssxref("<color>")}} 属性的值，但请注意，在这种情况下，Safari 当前会绘制透明阴影。<s>在 Gecko (Firefox), Presto (Opera) 和 Trident (Internet Explorer) 中， 会应用 {{cssxref("<color>")}} 属性的值。另外，如果颜色值省略，WebKit 中阴影是透明的。</s></dd> </dl> -<pre class="brush: css">filter: drop-shadow(16px 16px 10px black)</pre> +<pre class="brush: css notranslate">filter: drop-shadow(16px 16px 10px black)</pre> -<pre class="brush: html"><svg height="0" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: html notranslate"><svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"> <filter id="drop-shadow"> <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/> <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/> @@ -397,129 +231,18 @@ table.standard-table td { <feMergeNode in="SourceGraphic"/> </feMerge> </filter> -</svg> -</pre> - -<div id="shadow_example" style="display: none;"> -<pre class="brush: html"><table class="standard-table"> - <thead> - <tr> - <th align="left" scope="col">Original image</th> - <th align="left" scope="col">Live example</th> - <th align="left" scope="col">SVG Equivalent</th> - <th align="left" scope="col">Static example</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form_4.jpeg" id="img1" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_4.jpg" id="img2" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 239 187"> - <filter id="drop-shadow"> - <feGaussianBlur in="SourceAlpha" stdDeviation="5"/> - <feOffset dx="16" dy="16"/> - <feMerge> - <feMergeNode/> - <feMergeNode in="SourceGraphic"/> - </feMerge> - </filter> - <image xlink:href="/files/3714/Test_Form_4.jpeg" filter="url(#drop-shadow)" width="213px" height="161px" /> -</svg><div></td> - <td><img alt="Test_Form_4_s.jpg" id="img4" class="internal default" src="/files/3715/Test_Form_4_s.jpg" style="width: 100%;" /></td> - </tr> - <tr> - <td><img alt="Test_Form_4 distorded border - Original image" id="img11" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td> - <td><img alt="Test_Form_4 distorded border - Live example" id="img12" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td> - <td> - <div class="svg-container"> - <svg xmlns="http://www.w3.org/2000/svg" id="img13" viewbox="0 0 239 187"> - <filter id="drop-shadow2"> - <feGaussianBlur in="SourceAlpha" stdDeviation="4"/> - <feOffset dx="8" dy="10"/> - <feMerge> - <feMergeNode/> - <feMergeNode in="SourceGraphic"/> - </feMerge> - </filter> - <image xlink:href="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png<span style="font-size: 1rem;">" filter="url(#drop-shadow2)" width="213px" height="161px" /></span> - </svg> - <div> - </td> - <td><img alt="Test_Form_4 distorded border drop shadow - Static example" id="img14" class="internal default" src="/files/8469/Test_Form_4_irregular-shape_opacity-gradient_drop-shadow.png" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter: drop-shadow(16px 16px 10px black); - -webkit-filter: drop-shadow(16px 16px 10px black); - -o-filter: drop-shadow(16px 16px 10px black); - -ms-filter: drop-shadow(16px 16px 10px black); - filter: drop-shadow(16px 16px 10px black); -} -#img12 { - width:100%; - height:auto; - -moz-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); - -webkit-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); - -o-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); - -ms-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); - filter: ; -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -#irregular-shape { - width: 64%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3, #img13 { - height:100%; -} -</pre> -</div> +</svg></pre> -<p>{{EmbedLiveSample('shadow_example','100%','300px','')}}</p> +<p>{{EmbedLiveSample('shadow_example','100%','300px','','', 'no-codepen')}}</p> -<h3 id="grayscale()"><code>grayscale()</code></h3> +<h4 id="grayscale">grayscale()</h4> -<p>将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。</p> +<p>{{cssxref("filter-function/grayscale", "grayscale()")}} 函数将改变输入图像灰度。<code>amount</code> 的值定义了转换的比例。值为 <code>100%</code> 则完全转为灰度图像，值为 <code>0%</code> 图像无变化。值在 <code>0%</code> 到 <code>100%</code> 之间，则是效果的线性乘数。若未设置值，默认是 <code>0</code>。</p> -<pre class="brush: css">filter: grayscale(100%)</pre> +<pre class="brush: css notranslate">filter: grayscale(100%)</pre> <div id="grayscale_example" style="display: none;"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> <th align="left" scope="col">Original image</th> @@ -548,7 +271,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css notranslate">html { height:100%; } body { @@ -594,16 +317,22 @@ table.standard-table td { </pre> </div> -<p>{{EmbedLiveSample('grayscale_example','100%','209px','')}}</p> +<p>{{EmbedLiveSample('grayscale_example','100%','209px','','', 'no-codepen')}}</p> -<h3 id="hue-rotate()"><code>hue-rotate()</code></h3> +<h4 id="hue-rotate">hue-rotate()</h4> -<p>给图像应用色相旋转。“angle”一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。</p> +<p>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}} 函数在输入图像上应用色相旋转。<code>angle</code> 一值设定图像会被调整的色环角度值。值为 <code>0deg</code>，则图像无变化。若值未设置值，默认为 <code>0deg</code>。该值虽然没有最大值，超过 <code>360deg</code> 的值相当于又绕一圈。</p> -<pre class="brush: css">filter: hue-rotate(90deg)</pre> +<pre class="brush: css notranslate">filter: hue-rotate(90deg)</pre> + +<pre class="brush: html notranslate"><svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"> + <filter id="svgHueRotate" > + <feColorMatrix type="hueRotate" values="[angle]" /> + <filter /> +</svg></pre> <div id="huerotate_example" style="display: none;"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> <th align="left" scope="col">Original image</th> @@ -629,7 +358,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css notranslate">html { height:100%; } body { @@ -675,16 +404,16 @@ table.standard-table td { </pre> </div> -<p>{{EmbedLiveSample('huerotate_example','100%','221px','')}}</p> +<p>{{EmbedLiveSample('huerotate_example','100%','221px','','', 'no-codepen')}}</p> -<h3 id="invert()"><code>invert()</code></h3> +<h4 id="invert">invert()</h4> -<p>反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。</p> +<p>{{cssxref("filter-function/invert", "invert()")}} 函数反转输入图像。<code>amount</code> 的值定义转换的比例。<code>100%</code> 的价值是完全反转。值为 <code>0%</code> 则图像无变化。值在 <code>0%</code> 和 <code>100%</code> 之间，则是效果的线性乘数。 若值未设置值，默认为 <code>0</code>。</p> -<pre class="brush: css">filter: invert(100%)</pre> +<pre class="brush: css notranslate">filter: invert(100%)</pre> <div id="invert_example" style="display: none;"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> <th align="left" scope="col">Original image</th> @@ -713,7 +442,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css notranslate">html { height:100%; } body { @@ -759,16 +488,16 @@ table.standard-table td { </pre> </div> -<p>{{EmbedLiveSample('invert_example','100%','407px','')}}</p> +<p>{{EmbedLiveSample('invert_example','100%','407px','','', 'no-codepen')}}</p> -<h3 id="opacity()"><code>opacity()</code></h3> +<h4 id="opacity">opacity()</h4> -<p>转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。</p> +<p>{{cssxref("filter-function/opacity", "opacity()")}} 转化图像的透明程度。<code>amount</code> 的值定义转换的比例。值为 <code>0%</code> 则是完全透明，值为 <code>100%</code> 则图像无变化。值在 <code>0%</code> 和 <code>100%</code> 之间，则是效果的线性乘数。也相当于图像样本乘以数量。 若值未设置，值默认是<code>1</code>。该函数与已有的 <code>opacity</code> 属性很相似，不同之处在于通过 <code>filter</code>，一些浏览器为了提升性能会提供硬件加速。</p> -<pre class="brush: css">filter: opacity(50%)</pre> +<pre class="brush: css notranslate">filter: opacity(50%)</pre> <div id="opacity_example" style="display: none;"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> <th align="left" scope="col">Original image</th> @@ -795,7 +524,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css notranslate">html { height:100%; } body { @@ -841,16 +570,16 @@ table.standard-table td { </pre> </div> -<p>{{EmbedLiveSample('opacity_example','100%','210px','')}}</p> +<p>{{EmbedLiveSample('opacity_example','100%','210px','','', 'no-codepen')}}</p> -<h3 id="saturate()"><code>saturate()</code></h3> +<h4 id="saturate">saturate()</h4> -<p>转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。</p> +<p>{{cssxref("filter-function/saturate", "saturate()")}} 函数转换图像饱和度。<code>amount</code> 的值定义转换的比例。值为 <code>0%</code> 则是完全不饱和，值为 <code>100%</code> 则图像无变化。其他值是效果的线性乘数。超过 <code>100%</code> 则有更高的饱和度。 若未设置值，默认为 <code>1</code>。</p> -<pre class="brush: css">filter: saturate(200%)</pre> +<pre class="brush: css notranslate">filter: saturate(200%)</pre> <div id="saturate_example" style="display: none;"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> <th align="left" scope="col">Original image</th> @@ -876,7 +605,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css notranslate">html { height:100%; } body { @@ -922,16 +651,16 @@ table.standard-table td { </pre> </div> -<p>{{EmbedLiveSample('saturate_example','100%','332px','')}}</p> +<p>{{EmbedLiveSample('saturate_example','100%','332px','','', 'no-codepen')}}</p> -<h3 id="sepia()"><code>sepia()</code></h3> +<h4 id="sepia">sepia()</h4> -<p>将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。</p> +<p> {{cssxref("filter-function/sepia", "sepia()")}} 函数将图像转换为深褐色。<code>amount</code> 的值定义转换的比例。值为 <code>100%</code> 则完全是深褐色的，值为 <code>0%</code> 图像无变化。值在 <code>0%</code> 到 <code>100%</code> 之间，值是效果的线性乘数。若未设置，值默认是 <code>0</code>。</p> -<pre class="brush: css">filter: sepia(100%)</pre> +<pre class="brush: css notranslate">filter: sepia(100%)</pre> <div id="sepia_example" style="display: none;"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> <th align="left" scope="col">Original image</th> @@ -960,7 +689,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css notranslate">html { height:100%; } body { @@ -1006,16 +735,16 @@ table.standard-table td { </pre> </div> -<p>{{EmbedLiveSample('sepia_example','100%','229px','')}}</p> +<p>{{EmbedLiveSample('sepia_example','100%','229px','','', 'no-codepen')}}</p> <h2 id="复合函数">复合函数</h2> <p>你可以组合任意数量的函数来控制渲染。下面的例子可以增强图像的对比度和亮度。</p> -<pre class="brush: css">filter: contrast(175%) brightness(3%)</pre> +<pre class="brush: css notranslate">filter: contrast(175%) brightness(3%)</pre> <div id="combination_example" style="display: none;"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> <th align="left" scope="col">Original image</th> @@ -1033,7 +762,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css notranslate">html { height:100%; } body { @@ -1080,7 +809,37 @@ table.standard-table td { </pre> </div> -<p>{{EmbedLiveSample('combination_example','100%','209px','')}}</p> +<p>{{EmbedLiveSample('combination_example','100%','209px','','', 'no-codepen')}}</p> + +<h2 id="正式定义">正式定义</h2> + +<p>{{cssinfo}}</p> + +<h2 id="形式语法">形式语法</h2> + +<pre dir="rtl">{{csssyntax}}</pre> + +<h2 id="示例">示例</h2> + +<h3 id="应用_filter_功能">应用 filter 功能</h3> + +<p>下面显示了使用预定义功能的示例。有关特定示例，请参见每个功能。</p> + +<pre class="brush: css notranslate">.mydiv { filter: grayscale(50%) } + +/* gray all images by 50% and blur by 10px */ +img { + filter: grayscale(0.5) blur(10px); +}</pre> + +<h3 id="应用_SVG_filter">应用 SVG filter</h3> + +<p>将 URL 函数与 SVG 资源一起使用的示例如下：</p> + +<pre class="brush: css notranslate">.target { filter: url(#c1); } + +.mydiv { filter: url(commonfilters.xml#large-blur) } +</pre> <h2 id="规范">规范</h2> @@ -1101,8 +860,6 @@ table.standard-table td { </tbody> </table> -<p>{{cssinfo}}</p> - <h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> <p>{{Compat("css.properties.filter")}}</p> diff --git a/files/zh-cn/web/guide/css/block_formatting_context/index.html b/files/zh-cn/web/guide/css/block_formatting_context/index.html index 04ccc3bedb..740c8186d5 100644 --- a/files/zh-cn/web/guide/css/block_formatting_context/index.html +++ b/files/zh-cn/web/guide/css/block_formatting_context/index.html @@ -22,7 +22,7 @@ translation_of: Web/Guide/CSS/Block_formatting_context <li>表格单元格（元素的 {{ cssxref("display") }} 为 <code>table-cell</code>，HTML表格单元格默认为该值）</li> <li>表格标题（元素的 {{ cssxref("display") }} 为 <code>table-caption</code>，HTML表格标题默认为该值）</li> <li>匿名表格单元格元素（元素的 {{ cssxref("display") }} 为 <code>table<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">、</span></font></code><code>table-row</code>、 <code>table-row-group<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">、</span></font></code><code>table-header-group<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">、</span></font></code><code>table-footer-group</code>（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 <code>inline-table</code>）</li> - <li>{{ cssxref("overflow") }} 值不为 <code>visible</code> 的块元素</li> + <li>{{ cssxref("overflow") }} 计算值(Computed)不为 <code>visible</code> 的块元素</li> <li>{{ cssxref("display") }} 值为 <code><a href="https://drafts.csswg.org/css-display/#valdef-display-flow-root">flow-root</a></code> 的元素</li> <li>{{ cssxref("contain") }} 值为 <code>layout</code>、<code>content </code>或 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">paint</span></font> 的元素</li> <li>弹性元素（{{ cssxref("display") }} 为 <code>flex</code> 或 <code>inline-flex </code>元素的直接子元素）</li> 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 b7e809269d..256961d4e6 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 @@ -594,10 +594,9 @@ for (var i = 0, j = 9; i <= j; i++, j--) <h4 id="delete" name="delete"><code>delete</code></h4> -<p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>操作符，删除一个对象或一个对象的属性或者一个数组中某一个键值。语法如下:</p> +<p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>操作符，删除一个对象的属性或者一个数组中某一个键值。语法如下:</p> -<pre class="brush: js notranslate">delete objectName; -delete objectName.property; +<pre class="brush: js notranslate">delete objectName.property; delete objectName[index]; delete property; // legal only within a with statement </pre> |