recursal/MDN huggingface dataset:
grid-template-areas
===================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
`La propiedad CSS grid-template-areas` especifica nombres para cada una de las grid areas.


```css
/\* Keyword value \*/
grid-template-areas: none;

/\* <string> values \*/
grid-template-areas: "a b";
grid-template-areas:
  "a b b"
  "a c d";

/\* Global values \*/
grid-template-areas: inherit;
grid-template-areas: initial;
grid-template-areas: unset;
```


Estas áreas no están asociadas a ningún elemento particular de la cuadrícula, pero pueden referenciarse desde otras propiedades de posicionamiento en la cuadrícula: `grid-row-start` (en-US), `grid-row-end` (en-US), `grid-column-start` (en-US), `grid-column-end` (en-US), y sus formas abreviadas `grid-row` (en-US), `grid-column` (en-US), and `grid-area` (en-US).

|  |  |
| --- | --- |
| Valor inicial | `none` |
| Applies to | grid containers |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | discrete |

Sintaxis
--------

### Valores

`none`

El contenedor de la cuadrícula no define ningún nombre para las áreas de la cuadrícula.

`<string>+`

Las filas se crean listando líneas de cadenas separadas, mientras que las columnas se reflejan en cada una de las celdas que aparecen en la cadena. Multiple named cell tokens within and between rows create a single named grid area that spans the corresponding grid cells. Unless those cells form a rectangle, the declaration is invalid.

### Formal syntax
```

grid-template-areas =   
  none       |  
  <string> (en-US)+    
  
```

Example
-------

### HTML


```html
<section id="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main area</main>
  <footer>Footer</footer>
</section>
```

### CSS


```css
#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas:
    "head head"
    "nav main"
    "nav foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}
```

### Result

Especificaciones
----------------

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # grid-template-areas-property |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Related CSS properties: `grid-template-rows`, `grid-template-columns`, `grid-template` (en-US)
* Grid Layout Guide: *Grid template areas (en-US)*
* Video tutorial: *Grid Template Areas*
:invalid
========

La pseudo-clase **`:invalid`** de CSS representa cualquier elemento `<input>` u otro elemento `<form>` cuyos contenidos no se puedan validar (en-US).


```css
/\* Selecciona cualquier <input> no válido \*/
input:invalid {
  background-color: pink;
}
```


Esta pseudo-clase es útil para resaltar errores de campo para el usuario.

Sintaxis
--------

Error: could not find syntax for this itemEjemplo
-------

Este ejemplo presenta una forma simple que colorea los elementos en verde cuando son validos y en rojo cuando no lo son.

### HTML


```html
<form>
  <label for="url\_input">Ingresa una URL:</label>
  <input type="url" id="url\_input" />
  <br />
  <br />
  <label for="email\_input"
 >Introduzca una dirección de correo electrónico:</label
 >
  <input type="email" id="email\_input" required />
</form>
```

### CSS


```css
input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #c00000;
}
```

### Resultado

Problemas de accesibilidad
--------------------------

El color rojo se usa comúnmente para indicar una entrada no válida. Las personas que tienen ciertos tipos de daltonismo no podrán determinar el estado de la entrada a menos que vaya acompañado de un indicador adicional que no dependa del color para transmitir el significado. Normalmente, se utilizan texto descriptivo y / o un icono.

* MDN Comprensión de las WCAG, explicaciones de la Guía 1.4
* Comprender el Criterio de Conformidad 1.4.1 | W3C Comprender WCAG 2.0
Notas
-----

### Radio buttons

Si alguno de los radio buttons en un grupo es `required`, la pseudo-clase `:invalid` se aplica a todos ellos si no se selecciona ninguno de los botones del grupo. (Los radio buttons agrupados comparten el mismo valor para su atributo `name`).

### Gecko por defecto

Por defecto, Gecko no aplica un estilo a la pseudo-clase `:invalid`. Sin embargo, sí aplica un estilo (un "resplandor" rojo que usa la propiedad `box-shadow`) a la pseudoclase `:-moz-ui-invalid`, que se aplica en un subconjunto de casos para: `:invalid`.

Puede inhabilitar el brillo con el siguiente CSS o anularlo por completo para modificar la apariencia de los campos no válidos:


```css
:invalid {
  box-shadow: none;
}

:-moz-submit-invalid {
  box-shadow: none;
}

:-moz-ui-invalid {
  box-shadow: none;
}
```

Especificaciones
----------------

| Specification |
| --- |
| HTML Standard # selector-invalid |
| Selectors Level 4 # validity-pseudos |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* Otras pseudo-clases relacionadas con la validación: `:required`, `:optional`, `:valid`
* Pseudo-clases relacionadas de Mozilla: `:-moz-ui-invalid`, `:-moz-submit-invalid`
* Validación de datos de formulario (en-US)
:out-of-range
=============

La pseudo-clase (en-US) **`:out-of-range`** de CSS representa un elemento `<input>` cuyo valor actual está fuera de los límites de rango especificados por los atributos `min` y `max`.


```css
/\* Selecciona cualquier <input>, pero solo cuando tiene un
 rango especificado, y su valor está fuera de ese rango \*/
input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
}
```


Esta pseudo-clase es útil para dar al usuario una indicación visual de que el valor actual de un campo está fuera de los límites permitidos.

**Nota:** Esta pseudo-clase solo se aplica a los elementos que tienen (y pueden tomar) una limitación de rango. En ausencia de tal limitación, el elemento no puede estar "dentro del rango" ni "fuera de rango".

Sintaxis
--------

Error: could not find syntax for this itemEjemplo
-------

### HTML


```html
<form action="" id="form1">
  <ul>
    Los valores entre 1 y 10 son válidos.
    <li>
      <input
 id="value1"
 name="value1"
 type="number"
 placeholder="1 a 10"
 min="1"
 max="10"
 value="12" />
      <label for="value1">Tu valor esta </label>
    </li>
  </ul>
</form>
```

### CSS


```css
li {
  list-style: none;
  margin-bottom: 1em;
}

input {
  border: 1px solid black;
}

input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}

input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
  border: 2px solid red;
}

input:in-range + label::after {
  content: "bien.";
}

input:out-of-range + label::after {
  content: "¡fuera de rango!";
}
```

### Resultado

Especificaciones
----------------

| Specification |
| --- |
| HTML Standard # selector-out-of-range |
| Selectors Level 4 # out-of-range-pseudo |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* `:in-range`
* Validación de datos de formulario (en-US)
:-moz-loading
=============

**No estándar:** Esta característica no es parte de los estándares. No la uses en sitios Web en producción: no funcionará para todos los usuarios. Podrían haber también incompatibilidades considerables entre distintas implementaciones y el comportamiento podría cambiar en el futuro.

Resumen
-------

La pseudo-clase CSS `:-moz-loading` selecciona elementos que no pueden mostrarse porque no aún no se han empezado a cargar, elementos como imágenes que todavía no han empezado a llegar. Destacar que las imágenes que están *en proceso de carga* no son seleccionadas por esta pseudo-clase.

Principalmente es útil para desarrolladores de temas.
text-orientation
================

La propiedad CSS**`text-orientation`** define la orientación del texto en una línea de escritura. Ésta propiedad sólo tiene efecto en modo vertical, ésto es, cuando `writing-mode` no está establecido cómo `horizontal-tb`. Ésta propiedad CSS es util para controlar la forma en que se muestran los lenguajes que utilizan escritura vertical, y tambien para construir encabezados verticales para tablas.


```css
/\* Palabras clave valor \*/
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

/\* Valores globales \*/
text-orientation: inherit;
text-orientation: initial;
text-orientation: unset;
```


|  |  |
| --- | --- |
| Valor inicial | `mixed` |
| Applies to | all elements, except table row groups, rows, column groups, and columns |
| Heredable | yes |
| Valor calculado | como se especifica |
| Animation type | Not animatable |

Sintaxis
--------

La propiedad `text-orientation` puede tener cómo valor una de las palabras clave listadas a continuación.

### Valores

`mixed`

Rota los caracteres de escritura horizontal 90° en sentido de las manecillas del reloj. Establece los caracteres de escritura vertical de forma natural. Este es el valor por defecto.

`upright`

Establece los caracteres de escritura horizontal de forma natural (pero se presentan de arriba hacia abajo), de igual manera establece de forma natural los glifos para escritura vertical. Note que ésta palabra clave causa que todos los caracteres sean considerados de forma izquierda-a-derecha: el valor utilizado para `direction` es forzado a ser `ltr`.

`sideways`

Causa que los caracteres sean presentados de la forma en que se presentarían de manera horizontal, pero con la línea de escritura rotada 90° en sentido de las manecillas del reloj.

`sideways-right`

Un alias para `sideways` que se mantiene para propositos de compatibilidad.

`use-glyph-orientation`

En elementos SVG, ésta palabra clave produce que sea utilizado el valor de las propiedades SVG desaprobadas `glyph-orientation-vertical` y `glyph-orientation-horizontal`.

### Sintaxis formal
```

text-orientation =   
  mixed     |  
  upright   |  
  sideways    
  
```

Ejemplos
--------

### HTML


```html
<p>Lorem ipsum dolet semper quisquam.</p>
```

### CSS


```css
p {
  writing-mode: vertical-rl;
  text-orientation: upright;
}
```

### Resultado

Especificaciones
----------------

| Specification |
| --- |
| CSS Writing Modes Level 4 # text-orientation |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Vea tambien
-----------

* Las otras propiedades CSS relacionadas con escritura vertical: `writing-mode`, `text-combine-upright` (en-US), y `unicode-bidi` (en-US).
:-moz-locale-dir(rtl)
=====================

**No estándar:** Esta característica no es parte de los estándares. No la uses en sitios Web en producción: no funcionará para todos los usuarios. Podrían haber también incompatibilidades considerables entre distintas implementaciones y el comportamiento podría cambiar en el futuro.

Resumen
-------

La pseudo-clase CSS `:-moz-locale-dir(rtl)` selecciona un elemento si el interfaz del usuario se está mostrando de derecha a izquierda. Esto viene determinado cuando la opción de las preferencias `intl.uidirection.locale` (donde `locale` es la localización de idioma actual) está estáblecida a "rtl".

Esto permite que extensiones (y temas) puedan fácilmente adaptar su interfaz de usuario dependiendo de las necesidades del usuario en relación a la localización.Puede variar de ventana a ventana e incluso de pestaña a pestaña. Permite que las extensiones funcionen incluso si no soportan esa preferencia del usuario, siempre que puedan soportar izquierda-derecha o derecha-izquierda, sin preocuparse de las necesidades específicas con respecto a la localización.

Este selector no funciona adecuadamente en HTML; nunca selecciona nada, no importa si la localización del UI (Interfaz de Usuario) sea izquierda a derecha (left-to-right) o derecha a izqauierda (right-to-left).

Ver además
----------

* `:-moz-locale-dir(ltr)`
* Aségurate que tu tema funciona con localizaciones RTL
padding-bottom
==============

Sumario
-------

La propiedad **`padding-bottom`** CSS establece el espacio de relleno requerido en la parte inferior del elemento. El área de padding es el espacio entre el contenido del elemento y su borde. Contrariamente de la propiedad **`margin-bottom`**, valores negativos no son válidos.

|  |  |
| --- | --- |
| Valor inicial | `0` |
| Applies to | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column`. It also applies to `::first-letter` and `::first-line`. |
| Heredable | no |
| Percentages | refer to the width of the containing block |
| Valor calculado | the percentage as specified or the absolute length |
| Animation type | a length |

Sintaxis
--------


```css
/\* <length> values (Valores fijos)\*/
padding-bottom: 0.5em;
padding-bottom: 0;
padding-bottom: 2cm;

/\* <percentage> value (Valores porcentuales)\*/
padding-bottom: 10%;

/\* Global values (Valores globales)\*/
padding-bottom: inherit;
padding-bottom: initial;
padding-bottom: unset;
```

### Valores

<length>

Especifica un valor positivo fijo. Veáse `<length>` para más detalles.

<percentage>

Especifica un porcentaje con respecto al bloque que lo contiene.

### Sintaxis formal
```

padding-bottom =   
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Ejemplos
--------
```

.content { padding-bottom: 5%; }
.sidebox { padding-bottom: 10px; }
```

Especificaciones
----------------

| Specification |
| --- |
| CSS Box Model Module Level 3 # padding-physical |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
fit-content()
=============

**Experimental:** **Esta es una tecnología experimental**  
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

La función CSS **`fit-content()`** ajusta un tamaño dado a un tamaño disponible de acuerdo a la fórmula: `min(maximum size, max(minimum size, argument))`.


```css
/\* <length> values \*/
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)

/\* <percentage> value \*/
fit-content(40%)
```


La función se puede usar como un tamaño de track en las propiedades de CSS Grid, donde el tamaño máximo es definido por `max-content` y el mínimo por `auto`, el cual es calculado por "`auto"` (ej. `minmax(auto, max-content)`), excepto que el tamaño del track se restringe al argumento si éste es mas grande que el "auto" mínimo .

También puede usarse como tamaño de caja disponible para `width`, `height`, `min-width`, `min-height`, `max-width` (en-US) y `max-height`, donde el tamañó máximo se refiere al tamaño máximo contenido y el mínimo al tamaño mínimo contenido.

Sintaxis
--------

Función que acepta un `<length>` o un `<percentage>` como un argumento.

### Values

`<length>`

Una Longitud Absoluta.

`<percentage>`

Un porcentaje relativo al espacio disponible en los ejes dados.

In grid properties it is relative to the inline size of the grid container in column tracks and to the block size of the grid container for row tracks. Otherwise it is relative to the available inline size or block size of the laid out box depending on the writing mode.

### Formal syntax

Error: could not find syntax for this itemEjemplo
-------

### CSS


```css
#container {
  display: grid;
  grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}
```

### HTML


```html
<div id="container">
  <div>Item as wide as the content.</div>
  <div>
    Item con más texto en él. Porque el contenido que es mas grande que el ancho
    máximo, está restringido a los 300 pixeles.
  </div>
  <div>Flexible item</div>
</div>
```

### Result

Especificaciones
----------------

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # valdef-width-fit-content |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
margin-bottom
=============

Summary
-------

![The effect of the CSS margin-bottom property on the element box](/files/4045/margin-bottom.svg)El `margin-bottom` CSS (*margen-inferior*) es la propiedad de un elemento que establece el espacio requerido en la parte inferior de un elemento. Tambien se permiten valores negativos.

Esta propiedad no tiene ningun efecto sobre los elementos en linea *non-replaced* , como `<tt>` o `<span>`.

|  |  |
| --- | --- |
| Valor inicial | `0` |
| Applies to | all elements, except elements with table `display` types other than `table-caption`, `table` and `inline-table`. It also applies to `::first-letter`. |
| Heredable | no |
| Percentages | refer to the width of the containing block |
| Valor calculado | the percentage as specified or the absolute length |
| Animation type | a length |

Syntax
------
```

Formal syntax: 
```
margin-bottom =   
  <length-percentage>  |  
  auto                   
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```


```
```

margin-bottom: 10px;        /* Una longitud absoluta (sin redimension) */
margin-bottom: 1em;         /* Una longitud en relacion con el tamaño del texto */
margin-bottom: 5%;          /* Un margen respecto al ancho de su objeto padre (el que lo contiene)  */
margin-bottom: auto;

margin-bottom: inherit; /*margen heredado*/
```

### Values

`<length>`

Specifies a fixed width. See `<length>` for possible values.

`<percentage>`

A `<percentage>` always relative to the **width** of the containing block.

`auto`

See `margin`.

Examples
--------


```css
.content {
  margin-bottom: 5%;
}
.sidebox {
  margin-bottom: 10px;
}
.logo {
  margin-bottom: -5px;
}
#header {
  margin-bottom: 1em;
}
```


Ver en el JSFiddle

Especificaciones
----------------

| Specification |
| --- |
| CSS Box Model Module Level 3 # margin-physical |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
background-blend-mode
=====================

Resumen
-------

La propiedad CSS **`background-blend-mode`** describe cómo las imágenes de fondo y el color de fondo del elemento deben mezclar entre sí.

Los modos de fusión deben ser definidos en el mismo orden que la propiedad CSS `background-image`. Si la cantidad de modos de fusión y de imagenes de fondo no son iguales, se repetirán y/o truncarán hasta igualar las cantidades.

|  |  |
| --- | --- |
| Valor inicial | `normal` |
| Applies to | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.. It also applies to `::first-letter` and `::first-line`. |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | Not animatable |

Sintaxis
--------


```css
/\* Un valor \*/
background-blend-mode: normal;

/\* Dos valores, uno por fondo \*/
background-blend-mode: darken, luminosity;

/\* Valores globales \*/
background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: unset;
```

### Valores

`<blend-mode>`

Es un `<blend-mode>` que denota el modo de fusión que se aplicará. Puede haber varios valores, separados por coma.

Ejemplos
--------


```html
<select id="select">
  <option>normal</option>
  <option>multiply</option>
  <option selected>screen</option>
  <option>overlay</option>
  <option>darken</option>
  <option>lighten</option>
  <option>color-dodge</option>
  <option>color-burn</option>
  <option>hard-light</option>
  <option>soft-light</option>
  <option>difference</option>
  <option>exclusion</option>
  <option>hue</option>
  <option>saturation</option>
  <option>color</option>
  <option>luminosity</option>
</select>
<div id="div"></div>
```



```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: screen;
}
```



```js
document.getElementById("select").onchange = function (event) {
  document.getElementById("div").style.backgroundBlendMode =
    document.getElementById("select").selectedOptions[0].innerHTML;
};
console.log(document.getElementById("div"));
```

Especificaciones
----------------

| Specification |
| --- |
| Compositing and Blending Level 2 # background-blend-mode |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* `<blend-mode>`
* `mix-blend-mode`
border-bottom-style
===================

<< Volver

### Resumen

`border-bottom-style` define el estilo de línea del borde inferior de una caja.

* `Valor inicial`: `ninguno`
* Se aplica a: todos los elementos
* `Valor heredado`: no
* Porcentajes: N/A
* Medio: `visual` (en-US)
* `Valor calculado`: como se especificó
### Sintaxis
```

border-bottom-style: <border-style> | inherit
```

### Valores

none

sin borde.

hidden

es igual a 'none', excepto en términos de resolución de conflicto para elementos de tabla.

dotted

series de puntos (....).

dashed

series de guiones cortos o pequeñas líneas (----).

solid

línea única, recta y sólida.

double

dos líneas rectas que se suman a la cantidad de píxeles definidos como ancho de borde `border-width`.

groove

efecto de hundido.

ridge

al revés de 'groove'. El borde aparece en 3D (saliendo).

inset

hace que la caja aparezca hundida.

outset

opuesto a 'inset'. La caja aparece en 3D (saliendo).

### Propiedades relacionadas

* `border-left-style` (en-US)
* `border-right-style` (en-US)
* `border-top-style` (en-US)
* `border-style`
### Ejemplos

Ver El Ejemplo Vivo
```

element {
        border-bottom-size: 1px;
        border-bottom-style: dotted;
        border-bottom-color: #000;
}
```

### Notas

A menos que un valor `border-style` sea definido, el borde no aparecerá porque el valor por defecto es 'none'.

### Especificaciones

* CSS 2.1
* CSS 3
### Compatibilidades

### Ver también

`border-bottom`, `border-color`, `border-bottom-style`, `border-bottom-width`
Categorías

Interwiki Languages