Merge remote-tracking branch 'upstream/main' into work

files/es/learn_web_development/extensions/forms/your_first_form/index.md

@@ -14,7 +14,7 @@ El primer artículo de nuestra serie te proporciona una primera experiencia de c
       <th scope="row">Prerrequisitos:</th>
       <td>
         Conocimientos básicos de informática y de
-        <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">lenguaje HTML</a>.
+        <a href="/es/docs/Learn/HTML/Introduction_to_HTML">lenguaje HTML</a>.
       </td>
     </tr>
     <tr>
@@ -47,7 +47,7 @@ Diseñar formularios es un paso importante cuando creas un sitio web o una aplic
 
 En este artículo, vamos a crear un formulario de contacto sencillo. Hagamos un esbozo.
 
-![Esbozo aproximado del formulario que vamos a construir](/files/4579/form-sketch-low.jpg)
+![Esbozo aproximado del formulario que vamos a construir](form-sketch-low.jpg)
 
 Nuestro formulario va a tener tres campos de texto y un botón. Le pedimos al usuario su nombre, su correo electrónico y el mensaje que desea enviar. Al pulsar el botón sus datos se enviarán a un servidor web.
 
@@ -57,15 +57,15 @@ De acuerdo, intentemos crear el HTML para nuestro formulario. Vamos a utilizar l
 
 Antes de continuar, haz una copia local de nuestra [plantilla HTML simple](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html): introduce aquí tu formulario HTML.
 
-### El elemento {{HTMLelement("form")}}
+### El elemento `form`
 
 Todos los formularios comienzan con un elemento {{HTMLelement("form")}}, como este:
 
 ```html
 <form action="/my-handling-form-page" method="post"></form>
 ```
 
-Este elemento define formalmente un formulario. Es un elemento contenedor, como un elemento {{HTMLelement("section")}} o {{HTMLelement("footer")}}, pero específico para contener formularios; también admite algunos atributos específicos para la configuración de la forma en que se comporta el formulario. Todos sus atributos son opcionales, pero es una práctica estándar establecer siempre al menos los atributos [`action`](/es/docs/Web/HTML/Attributes/action) y [`method`](/es/docs/Web/HTML/Attributes/method):
+Este elemento define formalmente un formulario. Es un elemento contenedor, como un elemento {{HTMLelement("section")}} o {{HTMLelement("footer")}}, pero específico para contener formularios; también admite algunos atributos específicos para la configuración de la forma en que se comporta el formulario. Todos sus atributos son opcionales, pero es una práctica estándar establecer siempre al menos los atributos [`action`](/es/docs/Web/HTML/Element/form#action) y [`method`](/es/docs/Web/HTML/Element/form#method):
 
 - El atributo `action` define la ubicación (URL) donde se envían los datos que el formulario ha recopilado cuando se validan.
 - El atributo `method` define con qué método HTTP se envían los datos (generalmente `get` o `post`).
@@ -75,7 +75,7 @@ Este elemento define formalmente un formulario. Es un elemento contenedor, como
 
 Por ahora, añade el elemento {{htmlelement("form")}} anterior a tu elemento HTML {{htmlelement("body")}}.
 
-### Los elementos {{HTMLelement("label")}}, {{HTMLelement("input")}} y {{HTMLelement("textarea")}}
+### Los elementos `<label>`, `<input>` y `<textarea>`
 
 Nuestro formulario de contacto no es complejo: la parte para la entrada de datos contiene tres campos de texto, cada uno con su elemento {{HTMLelement("label")}} correspondiente:
 
@@ -106,7 +106,7 @@ En términos de código HTML, para implementar estos controles de formulario nec
 
 Actualiza el código de tu formulario para que se vea como el anterior.
 
-Los elementos {{HTMLelement("li")}} están ahí para estructurar nuestro código convenientemente y facilitar la aplicación de estilo (ver más adelante en el artículo). Por motivos de usabilidad y accesibilidad incluimos una etiqueta explícita para cada control de formulario. Ten en cuenta el uso del atributo [`for`](/es/docs/Web/HTML/Attributes/for) en todos los elementos {{HTMLelement("label")}}, que toma como valor el [`id`](/es/docs/Web/HTML/Attributes/id) del control de formulario con el que está asociado; así es como asocias un formulario con su etiqueta.
+Los elementos {{HTMLelement("li")}} están ahí para estructurar nuestro código convenientemente y facilitar la aplicación de estilo (ver más adelante en el artículo). Por motivos de usabilidad y accesibilidad incluimos una etiqueta explícita para cada control de formulario. Ten en cuenta el uso del atributo [`for`](/es/docs/Web/HTML/Attributes/for) en todos los elementos {{HTMLelement("label")}}, que toma como valor el [`id`](/es/docs/Web/HTML/Global_attributes/id) del control de formulario con el que está asociado; así es como asocias un formulario con su etiqueta.
 
 Hacer esto presenta muchas ventajas porque la etiqueta está asociada al control del formulario y permite que los usuarios con ratón, panel táctil y dispositivos táctiles hagan clic en la etiqueta para activar el control correspondiente, y también proporciona accesibilidad con un nombre que los lectores de pantalla leen a sus usuarios. Encontrarás más detalles sobre las etiquetas de los formularios en [Cómo estructurar un formulario web](/es/docs/Learn/Forms/How_to_structure_a_web_form).
 
@@ -115,7 +115,7 @@ En el elemento {{HTMLelement("input")}}, el atributo más importante es `type`.
 - En nuestro ejemplo sencillo, usamos el valor {{HTMLelement("input/text")}} para la primera entrada, el valor predeterminado para este atributo. Representa un campo de texto básico de una sola línea que acepta cualquier tipo de entrada de texto.
 - Para la segunda entrada, usamos el valor {{HTMLelement("input/email")}}, que define un campo de texto de una sola línea que solo acepta una dirección de correo electrónico. Esto convierte un campo de texto básico en una especie de campo «inteligente» que efectúa algunas comprobaciones de validación de los datos que el usuario escribe. También hace que aparezca un diseño de teclado más apropiado para introducir direcciones de correo electrónico (por ejemplo, con un símbolo @ por defecto) en dispositivos con teclados dinámicos, como teléfonos inteligentes. Encontrarás más información sobre la validación de formularios en el artículo de [Validación de formularios por parte del cliente](/es/docs/Learn/Forms/Form_validation) más adelante.
 
-Por último, pero no por ello menos importante, ten en cuenta la sintaxis de `<input>` en contraposición con la de `<textarea></textarea>`. Esta es una de las rarezas del HTML. La etiqueta `<input>` es un elemento vacío, lo que significa que no necesita una etiqueta de cierre. El elemento {{HTMLElement("textarea")}} no es un elemento vacío, lo que significa que debe cerrarse con la etiqueta de cierre adecuada. Esto tiene un impacto en una característica específica de los formularios: el modo en que defines el valor predeterminado. Para definir el valor predeterminado de un elemento {{HTMLElement("input")}}, debes usar el atributo [`value`](/es/docs/Web/HTML/Attributes/value) de esta manera:
+Por último, pero no por ello menos importante, ten en cuenta la sintaxis de `<input>` en contraposición con la de `<textarea></textarea>`. Esta es una de las rarezas del HTML. La etiqueta `<input>` es un elemento vacío, lo que significa que no necesita una etiqueta de cierre. El elemento {{HTMLElement("textarea")}} no es un elemento vacío, lo que significa que debe cerrarse con la etiqueta de cierre adecuada. Esto tiene un impacto en una característica específica de los formularios: el modo en que defines el valor predeterminado. Para definir el valor predeterminado de un elemento {{HTMLElement("input")}}, debes usar el atributo [`value`](/es/docs/Web/HTML/Element/input#value) de esta manera:
 
 ```html
 <input type="text" value="por defecto este elemento se llena con este texto" />
@@ -129,7 +129,7 @@ Por defecto, este elemento contiene este texto
 </textarea>
 ```
 
-### El elemento {{HTMLelement("button")}}
+### El elemento `button`
 
 El marcado de nuestro formulario está casi completo; solo necesitamos añadir un botón para permitir que el usuario envíe sus datos una vez que haya completado el formulario. Esto se hace con el elemento {{HTMLelement("button")}}; añade lo siguiente justo encima de la etiqueta de cierre `</form>`:
 
@@ -240,9 +240,9 @@ Guarda y vuelve a cargar, y observa que tu formulario presenta un aspecto mucho
 
 ## Enviar los datos del formulario a un servidor web
 
-La última parte, y quizás la más complicada, es manejar los datos del formulario en el lado del servidor. El elemento {{HTMLelement("form")}} define dónde y cómo enviar los datos gracias a los atributos [`action`](/es/docs/Web/HTML/Attributes/action) y [`method`](/es/docs/Web/HTML/Attributes/method).
+La última parte, y quizás la más complicada, es manejar los datos del formulario en el lado del servidor. El elemento {{HTMLelement("form")}} define dónde y cómo enviar los datos gracias a los atributos [`action`](/es/docs/Web/HTML/Element/form#action) y [`method`](/es/docs/Web/HTML/Element/form#method).
 
-Proporcionamos un nombre ([`name`](/es/docs/Web/HTML/Attributes/name)) a cada control de formulario. Los nombres son importantes tanto en el lado del cliente como del servidor; le dicen al navegador qué nombre debe dar a cada dato y, en el lado del servidor, dejan que el servidor maneje cada dato por su nombre. Los datos del formulario se envían al servidor como pares de nombre/valor.
+Proporcionamos un nombre (`name`) a cada control de formulario. Los nombres son importantes tanto en el lado del cliente como del servidor; le dicen al navegador qué nombre debe dar a cada dato y, en el lado del servidor, dejan que el servidor maneje cada dato por su nombre. Los datos del formulario se envían al servidor como pares de nombre/valor.
 
 Para poner nombre a los diversos datos que se introducen en un formulario, debes usar el atributo `name` en cada control de formulario que recopila un dato específico. Veamos de nuevo algunos de nuestros códigos de formulario:
 

files/ja/web/css/abs/index.md

@@ -0,0 +1,82 @@
+---
+title: abs()
+slug: Web/CSS/abs
+l10n:
+  sourceCommit: 5332af37c3d94913bf15b6aed87aaed2693f19d5
+---
+
+{{CSSRef}}
+
+**`abs()`** [CSS](/ja/docs/Web/CSS) [関数](/ja/docs/Web/CSS/CSS_Functions) は、引数の絶対値を同じ型で返します。
+
+## 構文
+
+```css
+/* プロパティ: abs(式) */
+width: abs(20% - 100px);
+```
+
+### 引数
+
+`abs(x)` 関数は、1つの引数を受け取ります。
+
+- `x`
+  - : 数値に解決される計算式です。
+
+### 返値
+
+`x` の絶対値を返します。
+
+- もし `x` の数値が正または `0⁺` であれば、`x` を返します。
+- そうでない場合は、`-1 * x` を返します。
+
+## 形式文法
+
+{{CSSSyntax}}
+
+## 例
+
+### 正の変数
+
+`abs()` 関数を使用すると、値が常に正となることを保証できます。次の例では、`--font-size` という CSS カスタムプロパティが {{CSSxRef("font-size")}} の値として使用されています。このカスタムプロパティを `abs()` で囲むと、負の値が正に変換されます。
+
+```css
+h1 {
+  font-size: abs(var(--font-size));
+}
+```
+
+### グラデーション方向の角度を制御する
+
+`abs()` 関数を使用して、グラデーションの方向を制御することもできます。次の例では、角度が -45 度の場合、グラデーションは赤から青に変化します。`abs()` を使用して正の値にすると、グラデーションの変化は青から赤になります。
+
+```css
+div {
+  --deg: -45deg;
+  background-image: linear-gradient(abs(var(--deg)), blue, red);
+}
+```
+
+### 後方互換性のためのフォールバック
+
+CSS `abs()` 関数をサポートしていない古いブラウザでは、次のように CSS {{CSSxRef("max")}} 関数を使用することで同じ結果を得られます。
+
+```css
+p {
+  line-height: max(var(--lh), -1 * var(--lh));
+}
+```
+
+{{CSSxRef("max")}} 関数により、`var(--lh)` と `-1 * var(--lh)` のうち大きい値が返されます。`--lh` が正であれ負であれ、返される値は常に正であり、これは絶対値となります。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{CSSxRef("sign")}}