recursal/MDN huggingface dataset:
:-moz-window-inactive
=====================

Resumen
-------

La pseudo-clase CSS `:-moz-window-inactive` selecciona cualquier elemento mientras está en una ventana inactiva.

**Nota:** Antes de añadir esta pseudo-clase, dar dieferentes estilos a las ventanas de fondo podría lograrse con el atributo (`active="true"`) en la venta del nivel superior XUL. Este atributo ya no se usa.

`:-moz-window-inactive` funciona también en documentos de contenido HTML.

Ejemplo
-------

Este ejemplo modifica la apariencia del fondo de una caja dependiendo de si está o no en una ventana activa.


```html
<style type="text/css">
 #mybox {
 background: linear-gradient(to bottom, blue, cyan);
 }

 #mybox:-moz-window-inactive {
 background: cyan;
 }
</style>

<div id="mybox" style="width:200px; height:200px;">
  <p>This is a box!</p>
</div>
```


Puedes verlo aquí en un ejemplo en directo.

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

No es parte de ninguna especificación.

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
:-moz-broken
============

**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-broken` selecciona elementos con enlaces a imágenes no válidos

Este selector está pensado sobre todo para desarrolladores de temas.

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

* Error 11011 en Firefox
* `-moz-alt-content`
padding-block-end
=================

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

La propiedad de CSS **`padding-block-end`** define el relleno de final de bloque lógico de un elemento, que se asigna a un relleno físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades `padding-top`, `padding-right` (en-US), `padding-bottom`, o `padding-left` (en-US) dependiendo de los valores definidos por `writing-mode`, `direction`, y `text-orientation`.

Esto se relaciona con `padding-block-start`, `padding-inline-start`, y `padding-inline-end`, que define los otros rellenos del elemento.

Pruébalo
--------

Sintaxis
--------


```css
/\* <length> values \*/
padding-block-end: 10px; /\* An absolute length \*/
padding-block-end: 1em; /\* A length relative to the text size \*/

/\* <percentage> value \*/
padding-block-end: 5%; /\* A padding relative to the block container's width \*/

/\* Global values \*/
padding-block-end: inherit;
padding-block-end: initial;
padding-block-end: unset;
```


|  |  |
| --- | --- |
| 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` |
| Heredable | no |
| Percentages | logical-width of containing block |
| Valor calculado | as `length` |
| Animation type | a length |

### Valores

La propiedad `padding-block-end` toma los mismos valores de la propiedad `padding-left` (en-US).

### Sintaxis formal
```

padding-block-end =   
  <'padding-top'>    
  
```

Ejemplo
-------

### Contenido HTML


```html
<div>
  <p class="exampleText">Example text</p>
</div>
```

### Contenido CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  padding-block-end: 20px;
  background-color: #c8c800;
}
```

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # padding-properties |

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

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

Mira también
------------

* Las propiedades físicas mapeadas: `padding-top`, `padding-right` (en-US), `padding-bottom`, y `padding-left` (en-US)
* `writing-mode`, `direction`, `text-orientation`
transform-style
===============

La propiedad **`transform-style`** CSS establece si el elemento hijo esta posicionado en el espacio 3D (preserve-3d) o esta integrado(flat) en el plano del elemento.

Pruébalo
--------

Si esta integrado (flat), el elemento hijo no existirá por sí solo en el espacio 3D.

Como esta propiedad no se hereda, debe establecerse para todos los nodos internos descendientes (hijos) del elemento.

Syntax
------


```css
/\* Keyword values \*/
transform-style: flat;
transform-style: preserve-3d;

/\* Global values \*/
transform-style: inherit;
transform-style: initial;
transform-style: unset;
```

### Values

`flat`

Indica que el elemento hijo yace en el plano del elemento mismo.

`preserve-3d`

Indica que el elemento hijo debe ser posicionado en el espacio 3D.

### Formal syntax
```

transform-style =   
  flat         |  
  preserve-3d    
  
```

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

| Specification |
| --- |
| CSS Transforms Module Level 2 # transform-style-property |

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

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

See also
--------

* Using CSS transforms
:-moz-submit-invalid
====================

**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-submit-invalid` representa cualquier botón de enviar de formularios cuyos contenidos no sean válidos conforme a las restricciones de validación HTML.

Por defecto no se aplica ningún estilo. Puedes usar tu estilo para personalizar la apariencia del botón de enviar cuando existen campos no válidos en el formulario.

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

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

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

* `:valid`
* `:invalid`
* `:required`
* `:optional`
caret-color
===========

La propiedad CSS **`caret-color`** especifica el color del cursor de texto, el indicador visible del punto de inserción en un elemento donde el usuario puede introducir texto u otro contenido.


```css
/\* Palabras clave \*/
caret-color: auto;
color: transparent;
color: currentColor;

/\* Valores <color> \*/
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);
```


**Nota:** Los agentes usuario podrían incluir otras cosas que consideren "cursor de texto". Por ejemplo, puede haber una "cursor para navegación", que actúa de forma similar al cursor de texto pero puede ser movido en textos no editables. Por otro lado, la imagen de cursor mostrada cuando se coloca el cursor del ratón sobre texto cuando la propiedad `cursor` es `auto`, o sobre un elemento donde la propiedad `cursor` es `text` o `vertical-text`, aunque a veces se parezca al cursor de texto, no lo es (es un cursor del ratón). En algunos navegadores que no soportan esta propiedad, el color del cursor de texto no está asociado al color de la fuente.

|  |  |
| --- | --- |
| Valor inicial | `auto` |
| Applies to | all elements |
| Heredable | yes |
| Valor calculado | `auto` is computed as specified and `<color>` values are computed as defined for the `color` property. |
| Animation type | a color |

Sintaxis
--------

### Valores

`auto`

Los agentes usuarios deberán usar `currentcolor`, pero podrían ajustar automáticamente el color del cursor para asegurar la correcta visibilidad y contraste con el contenido alrededor, posiblemente con base en `currentcolor`, el fondo, sombras, etc.

**Nota:** Aunque los agentes usuarios puedan usar `currentcolor` (que usualmente es animable) para el valor `auto`, `auto` no es interpolado en las transiciones/animaciones.

`<color>`

Color del cursor de texto.

### Sintaxis formal
```

caret-color =   
  auto     |  
  <color>    
  
```

Ejemplo
-------

### HTML


```html
<input />
```

### CSS


```css
input {
  caret-color: red;
}
```

### Resultado

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # caret-color |

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

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

La propiedad CSS **`transition-property`** se usa para definir los nombres de las propiedades CSS en las que el efecto de la transición debe aplicarse.


```css
/\* Keyword values \*/
transition-property: none;
transition-property: all;
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;

transition-property: test1;
transition-property: test1, animation4;
transition-property: all, height, all;
transition-property:
  all,
  -moz-specific,
  sliding;

/\* Global values \*/
transition-property: inherit;
transition-property: initial;
transition-property: unset;
```


**Nota:** El conjunto de propiedades que puede ser animado (en-US) está sujeto a cambios. Por lo tanto deberías evitar incluir en la lista cualquiera de las propiedades que actualmente no puede animarse, aunque algún día pudieran, ya que podría causar resultados inesperados.

Si se especifica una propiedad abreviada (por ejemplo , `background`) todas sus subpropiedades que soporten animación serán animadas.

|  |  |
| --- | --- |
| Valor inicial | all |
| Applies to | todos los elementos y los pseudoelementos `::before` y `::after` |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | Not animatable |

Sintaxis
--------

### Valores

`none`

Ninguna propiedad tendrá transición.

`all`

Todas las propiedades que puedan tener una transición animada la tendrán.

`IDENT`

Una cadena que identifique la propiedad en la que el efecto de la transición debe ser aplicado cuando su valor cambie. Este identificador está compuesto por letras de la `a` a la `z` insensibles a mayúsculas, números del `0` al `9`, un guión bajo (`_`) o un guión simple (`-`). El primer carácter que no sea un guión debe ser una letra (es decir: no debe haber números al principio, aunque esten precedidos de un guión). Además, no están permitidos dos guiones al principio del identificador.

### Sintaxis formal
```

transition-property =   
  none                           |  
  <single-transition-property>#    
  
<single-transition-property> =   
  all             |  
  <custom-ident> (en-US)    
  
```

Ejemplos
--------

Hay varios ejemplos de transiciones CSS incluídos en el artículo principal Transiciones CSS.

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

| Specification |
| --- |
| CSS Transitions # transition-property-property |

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

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

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

* Usando transiciones CSS (en-US)
* `TransitionEvent` (en-US)
direction
=========

### Resumen

La propiedad `direction` se utiliza para indicar en que dirección fluye el texto: `rtl` para hebreo o árabe y `ltr` para otros tipos de escritura. Esto tendría que especificarse como parte del documento (por ejemplo, usando el código `dir` en HTML) en lugar que directamente en la hoja de estilo CSS.

Esta propiedad establece el sentido de base del texto para los elementos de tipo bloque y la dirección para los elementos creados por la propiedad `unicode-bidi` (en-US). Además, asigna el valor por defecto para la alineación de texto y de elementos tipo bloque dentro de las celdas de una tabla.

* `Valor inicial`: `de izquierda a derecha`
* Se aplica a: todos los elementos.
* `Valor heredado`: si
* Porcentajes: n/a
* Medio: `visual`
* `Valor calculado`:
### Sintaxis
```

direction: [ ltr | rtl | inherit ] ;
```

### Valores

ltr

Valor por defecto de `direction`. El contenido, texto y otros elementos fluyen de izquierda a derecha.

rtl

El contenido, texto y otros elementos van de derecha a izquierda.

Para que la propiedad `direction` tenga algún efecto en elementos de tipo en línea (*inline*), el valor de la propiedad `unicode-bidi` (en-US) debe ser `embed` o `override`.

### Ejemplos
```

blockquote {
  direction : rtl ;
}
```

### Notas

Al contrario que el atributo `dir` en HTML, la propiedad `direction` no es heredada desde las columnas de una tabla a las celdas, ya que la herencia en CSS sigue el árbol del documento, y las celdas de una tabla son parte de las filas y no de las columnas.

### Especificaciones

* CSS 2.1
* CSS 3 Text Module
### Ver también

`unicode-bidi` (en-US) - `ltr` - `rtl`
Categorías

Interwiki Languages
::-moz-progress-bar
===================

**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.

El pseudo-elemento **`::-moz-progress-bar`** de CSS es una extensión de Mozilla que representa la barra de progreso dentro de un elemento `<progress>`. (La barra representa la cantidad de progreso que se ha realizado).

Sintaxis
--------

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

### HTML


```html
<progress value="30" max="100">30%</progress>
<progress max="100">Indeterminado</progress>
```

### CSS


```css
::-moz-progress-bar {
  background-color: red;
}

/\* Forzar barras indeterminadas para tener ancho cero \*/
:indeterminate::-moz-progress-bar {
  width: 0;
}
```

### Resultado

La primera barra de arriba debe tener este aspecto:

![Custom styled progress bar](/es/docs/Web/CSS/::-moz-progress-bar/redbar.png)

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

* `<progress>`
* `::-ms-fill`
* `::-webkit-progress-bar`
* `::-webkit-progress-value`
* `::-webkit-progress-inner-element`
CSS Colors
==========

**Los colores CSS** son un módulo de CSS que trabaja con colores, tipos de colores y transparencias.

Referencia
----------

### Propiedades

* `color`
* `opacity`
### Tipos de datos CSS

`<color>`Guías
-----

*Ninguna.*

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

| Specification |
| --- |
| CSS Color Module Level 4  |
| CSS Color Module Level 5  |

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

* En CSS, las gradientes no son colores sino imágenes (en-US).
-webkit-text-stroke
===================

**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 propiedad CSS **`-webkit-text-stroke`** especifica la anchura y color del trazo para los caractéres de texto. Esta forma es una manera corta en relación con la forma larga que necesita usar las propiedades`-webkit-text-stroke-width` y `-webkit-text-stroke-color`.

|  |  |
| --- | --- |
| Valor inicial | as each of the properties of the shorthand:* `-webkit-text-stroke-width`: `0`
* `-webkit-text-stroke-color`: `currentcolor`
 |
| Applies to | all elements |
| Heredable | yes |
| Valor calculado | as each of the properties of the shorthand:* `-webkit-text-stroke-width`: absolute `length`
* `-webkit-text-stroke-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `-webkit-text-stroke-width`: discrete
* `-webkit-text-stroke-color`: a color
 |

Síntaxis
--------


```css
/\* Valores anchura y color \*/
-webkit-text-stroke: 4px navy;

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

### Valores

`<length>`

La anchura del trazo.

`<color>`

El color del trazo.

### Síntaxis Formal
```

-webkit-text-stroke =   
  <line-width>  ||  
  <color>         
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
```

Ejemplo
-------

### HTML


```html
<p id="example">El trazo de este texto es rojo.</p>
```

### CSS


```css
#example {
  font-size: 50px;
  margin: 0;
  -webkit-text-stroke: 2px red;
}
```

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

| Specification |
| --- |
| Compatibility Standard # the-webkit-text-stroke |

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

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

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

* Post en el blog Surfin' Safari anunciando esta característica
* Artículo en CSS-Tricks explicando esta característica
* `-webkit-text-stroke-width`
* `-webkit-text-stroke-color`
* `-webkit-text-fill-color`
border-end-end-radius
=====================

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

La propiedad de CSS **`border-end-end-radius`** define un radio de borde lógico en un elemento, que se asigna a un radio de borde físico que depende de los elementos `writing-mode`, `direction`, y `text-orientation`.


```css
/\* <length> values \*/
/\* With one value the corner will be a circle \*/
border-end-end-radius: 10px;
border-end-end-radius: 1em;

/\* With two values the corner will be an ellipse \*/
border-end-end-radius: 1em 2em;

/\* Global values \*/
border-end-end-radius: inherit;
border-end-end-radius: initial;
border-end-end-radius: unset;
```


Por ejemplo, en un modo de escritura `horizontal-tb`, esta propiedad corresponde a la propiedad `border-bottom-right-radius`.

Sintaxis
--------

### Valores

`<length-percentage>`

Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS `<length>`. Los porcentajes para el eje horizontal se refieren al ancho de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos.

### Sintaxis formal
```

border-end-end-radius =   
  <length-percentage [0,∞]>{1,2}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Ejemplo
-------

### Contenido HTML


```html
<div>
  <p class="exampleText">Example</p>
</div>
```

### Contenido CSS


```css
div {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-end-end-radius: 10px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-end-end-radius: 10px;
}
```

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # border-radius-properties |

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

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

Mira también
------------

* La propiedad física asignada: `border-bottom-right-radius`
* `writing-mode`, `direction`, `text-orientation`
:read-write
===========

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 pseudo-clase (en-US) **`:read-write`** de CSS representa un elemento (como un input) que es editable por el usuario.


```css
/\* Selecciona cualquier elemento <input> que sea editable \*/
/\* Compatible con Firefox con un prefijo \*/
input:-moz-read-write {
  background-color: #bbf;
}

/\* Compatible con Blink/WebKit/Edge sin un prefijo \*/
input:read-write {
  background-color: #bbf;
}
```


**Nota:** Este selector no solo selecciona texto de `<input>`; seleccionará *cualquier* elemento que pueda editar el usuario, como un elemento `<p>` con `contenteditable` establecido en él.

Sintaxis
--------

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

### HTML


```html
<input type="text" value="Escribe lo que quieras aquí." />
<input type="text" value="Este es un campo de solo lectura." readonly />
<p>Este es un párrafo normal.</p>
<p contenteditable="true">¡Puedes editar este párrafo!</p>
```

### CSS


```css
input {
  min-width: 25em;
}
input:-moz-read-write {
  background: cyan;
}
input:read-write {
  background: cyan;
}

p:-moz-read-write {
  background: lightgray;
}
p:read-write {
  background: lightgray;
}
p[contenteditable="true"] {
  color: blue;
}
```

### Resultado

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

| Specification |
| --- |
| HTML Standard # selector-read-write |
| Selectors Level 4 # rw-pseudos |

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

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

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

* `:read-only`
* Atributo HTML `contenteditable`
::-moz-range-track
==================

**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
-------

El pseudo-elemento CSS **`::-moz-range-track`** representa la trayectoría, es decir la ranura sobre la cual se desliza el indicador de un `<input>` con `type="range"`.

**Nota:** Si usamos `::-moz-range-track` con cualquier otra cosa que no sea un `<input type="range">` ni seleccionaremos nada ni se mostrará efecto alguno.

Síntaxis
--------

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

### Contenido CSS


```css
input[type="range"]::-moz-range-track {
  background-color: green;
}
```

### Contenido HTML


```html
<input type="range" min="0" max="100" step="5" value="50" />
```

### Salida

Un barra de progreso con ese estilo tendrá una apariencia similar a la siguiente:

![A range with the track green.](/es/docs/Web/CSS/::-moz-range-track/screen_shot_2015-12-04_at_10.14.34.png)

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

No es parte de ninguna especificación.

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

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

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

* Los pseudo-elementos usados por Gecko para proporcionar estilos a las distintas partes de un input con type="range":
    + `::-moz-range-thumb`, el cursor deslizándose sobre la ranura.
    + `::-moz-range-progress`
* Pseudo-elementos similares en otros navegadores:
    + `::-webkit-slider-runnable-track`, pseudo-elemento soportado por WebKit y Blink (Safari, Chrome and Opera).
    + `::-ms-track`, pseudo-elemento soportado por Internet Explorer y Edge.
* CSS-Tricks: Dando estilo con CSS a elementos Input con type="range" para que se muestren correctamente en todos los navegadores.
* QuirksMode: Dando estilos y scripting a elementos deslizantes