recursal/MDN huggingface dataset:
padding-inline-start
====================

**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-inline-start`** define el relleno de inicio lógico en línea 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`, or `padding-left` (en-US) dependiendo de los valores definidos por `writing-mode`, `direction`, y `text-orientation`.

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

Pruébalo
--------

Sintaxis
--------


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

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

/\* Global values \*/
padding-inline-start: inherit;
padding-inline-start: initial;
padding-inline-start: 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-inline-start` toma los mismos valores de la propiedad `padding-left` (en-US).

### Sintaxis formal
```

padding-inline-start =   
  <'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-inline-start: 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`
-webkit-mask-attachment
=======================

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

Si se ha especificado una `-webkit-mask-image` , `-webkit-mask-attachment` determina si la posición de la imagen de la máscara es fija dentro de la ventana (viewport) , o se desplaza a lo largo del bloque que la contiene.

|  |  |
| --- | --- |
| Valor inicial | `scroll` |
| Applies to | all elements |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | discrete |

Síntaxis
--------

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

scroll

Si se ha especifiacod `scroll` , la imagen de máscara se desplaza dentro de la ventana (viewport) junto con el bloque que contiene la máscara de imagen.

fixed

Si se ha especificado el valor `fixed` , la imagen de máscara no se desplaza junto con el elemento que la contienen, en vez de eso permanece es una posición fija dentro de la ventana (viewport).

Ejemplos
--------


```css
body {
  -webkit-mask-image: url("images/mask.png");
  -webkit-mask-attachment: fixed;
}
```

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

No forma parte de ningún estándar.

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

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

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

`-webkit-mask`, `-webkit-mask-clip`, `-webkit-mask-box-image`, `-webkit-mask-origin`, `-webkit-mask-image`,`-webkit-mask-composite`,`-webkit-mask-repeat`
animation-play-state
====================

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

Resumen
-------

La propiedad CSS **`animation-play-state`** determina si una animación está en ejecución o en pausa. Puede ser consultada para determinar si la animación se está ejecutando. Además, su valor se puede establecer para pausar y reanudar una animación.

Reanudando una animación pausada, ésta empezará en el punto en el que fue pausada, en vez de empezar desde el principio.

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

Sintaxis
--------


```css
/\* Single animation \*/
animation-play-state: running;
animation-play-state: paused;

/\* Multiple animations \*/
animation-play-state: paused, running, running;

/\* Global values \*/
animation-play-state: inherited;
animation-play-state: initial;
animation-play-state: unset;
```

### Valores

`running`

La animación se está ejecutando.

`paused`

La animación está pausada.

### Syntax formal
```

animation-play-state =   
  <single-animation-play-state>#    
  
<single-animation-play-state> =   
  running  |  
  paused     
  
```

Ejemplos
--------

Visita animaciones CSS para ver algunos ejemplos.

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

| Specification |
| --- |
| CSS Animations Level 1 # animation-play-state |

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

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

Consulte también
----------------

* Usando animaciones CSS
* `AnimationEvent`
env()
=====

La función CSS **`env()`** puede ser utilizada para insertar el valor de una variable de entorno, que sea global para un documento en particular, al contrario de una propiedad personalizada. Entonces, la funcion env() puede ser utilizada para remplazar el valor en ubicaciones arbitrarias, de la misma manera que la función var().

La función env() puede ser utilizada en el lugar de cualquier parte de un valor en cualquier propiedad de cualquier elemento, o de cualquier parte de un valor en cualquier descriptor de cualquier regla @, y en varios otros lugares donde los valores CSS están permitidos.

Las Variables de Entorno CSS están actualmente en curso de definición en un borrador de Recomendación: CSS Environment Variables Module Level 1.

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

| Specification |
| --- |
| CSS Environment Variables Module Level 1 # env-function |

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

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

**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-inline`** define el relleno en línea lógico de inicio y final de un elemento, que asigna las propiedades de relleno físicas dependiendo del modo de escritura del elemento, direccionalidad, y orientación del texto.


```css
/\* <length> values \*/
padding-inline: 10px 20px; /\* An absolute length \*/
padding-inline: 1em 2em; /\* relative to the text size \*/
padding-inline: 5% 2%; /\* relative to the nearest block container's width \*/
padding-inline: 10px; /\* sets both start and end values \*/

/\* Keyword values \*/
padding-inline: auto;

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


Estos valores corresponden a las propiedades`padding-top` y `padding-bottom`, o `padding-right` (en-US), y `padding-left` (en-US) dependiendo de los valores definidos `writing-mode`, `direction`, y `text-orientation`.

Los valores pueden ser establecidos individualmente como `padding-inline-start` y `padding-inline-end`. La propiedad de la dirección bloque es `padding-block` que establece `padding-block-start`, y `padding-block-end`.

|  |  |
| --- | --- |
| Valor inicial | as each of the properties of the shorthand:* `padding-inline-start`: `0`
* `padding-inline-end`: `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 each of the properties of the shorthand:* `padding-inline-start`: as `length`
* `padding-inline-end`: as `length`
 |
| Animation type | a length |

Sintaxis
--------

### Valores

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

### Sintaxis formal
```

padding-inline =   
  <'padding-top'>{1,2}    
  
```

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-rl;
  padding-inline: 20px 40px;
  background-color: #c8c800;
}
```

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

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

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`
inherit
=======

<< Volver

### Resumen

**inherit** es un valor permitido en todas las propiedades CSS. Hace que el elemento al cual se aplica tome el valor calculado de la propiedad de su elemento padre.

#### Para propiedades heredadas

Para las propiedades heredadas, este valor refuerza el comportamiento del valor por defecto y es necesario sólo para anular otras reglas. Por ejemplo:
```

  /* hacer las cabeceras de segundo nivel, verdes */
  h2 { color: green; }

  /* ...pero deja aquellas cabeceras dentro de de la barra lateral con el valor por defecto (el valor que tenga el elemento padre */
  #sidebar h2 { color: inherit; }
```


Ten en cuenta que en este ejemplo, el elemento `h2` dentro de sidebar, puede tener un color distinto. Por ejemplo, si alguno de los elementos es un hijo de un elemento div con la siguiente regla:
```

 div#current { color: blue; }
```


el elemento será azul.

#### Para propiedades no heredadas

Para las propiedades no heredadas, este valor especifica un comportamiento que tiene relativamente poco sentido al no reforzar el valor por defecto.

### Notas

Siempre se hereda desde el elemento padre dentro del árbol del documento, aún cuando el elemento padre no es el bloque contenedor.

### Especificaciones

* CSS 2.1
### Compatibilidad de navegadores

### Ver también

initial

Categorías

Interwiki Languages
object-position
===============

Summary
-------

La propiedad **`object-position`** determina el alineamiento del elemento dentro de la caja.

|  |  |
| --- | --- |
| Valor inicial | `50% 50%` |
| Applies to | replaced elements |
| Heredable | yes |
| Percentages | refer to width and height of element itself |
| Valor calculado | como se especifica |
| Animation type | a repeatable list |

Sintaxis
--------


```css
/\* <position> valores \*/
object-position: 100px 50px;

/\* Valores globales \*/
object-position: inherit;
object-position: initial;
object-position: unset;
```

### Valores

`<position>`

`<position>` (en-US), este es un valor de cuatro que representa una posición en 2D con respecto a los bordes de la caja. Posiciones Relativas o absolutas pueden presentar compensaciones. Tenga en cuenta que la posición puede ser establecida fuera de la caja.

### Sintaxis formal
```

object-position =   
  <position>    
  
<position> =   
  [ left | center | right | top | bottom | <length-percentage> ]  |  
  [ left | center | right ] && [ top | center | bottom ]  |  
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |  
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Ejemplo
-------

#### Ejemplo de HTML


```html
<img id="object-position-1" src="mdn.svg" alt="MDN Logo" />
<img id="object-position-2" src="mdn.svg" alt="MDN Logo" />
```


#### Ejemplo de CSS


```css
img {
  width: 300px;
  height: 250px;
  border: 1px solid black;
  background-color: silver;
  margin-right: 1em;
  object-fit: none;
}

#object-position-1 {
  object-position: 10px;
}

#object-position-2 {
  object-position: 100% 10%;
}
```


#### Resultado

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

| Specification |
| --- |
| CSS Images Module Level 3 # the-object-position |

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

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

Contenido relacionado
---------------------

* Other image-related CSS properties: `object-fit`, `image-orientation` (en-US), `image-rendering`, `image-resolution` (en-US).
-moz-box-ordinal-group
======================

**Advertencia:** Esta propiedad pertenece al borrador original del diseño o esquema de la caja CSS flexible, y ha sido reemplazada en borradores posteriores.

Ver Flexbox (en-US) para más información sobre qué usar en sustitución de esta propiedad.

Resumen
-------

Indica el grupo ordinal al que pertenece el elemento. Aquellos elementos con un grupo ordinal menor son mostrados antes que aquellos con un grupo ordinal mayor.

Valores
-------

Los valores deben ser enteros positivos (mayores de cero). El valor por defecto para esta propiedad es 1.

Ejemplos
--------


```html
<style type="text/css">
 #Flexbox {
 display: -ms-box;
 display: -moz-box;
 display: -webkit-box;
 }

 #text1 {
 background: red;
 -ms-box-ordinal-group: 4;
 -moz-box-ordinal-group: 4;
 -webkit-box-ordinal-group: 4;
 }

 #text2 {
 background: green;
 -ms-box-ordinal-group: 3;
 -moz-box-ordinal-group: 3;
 -webkit-box-ordinal-group: 3;
 }

 #text3 {
 background: blue;
 -ms-box-ordinal-group: 2;
 -moz-box-ordinal-group: 2;
 -webkit-box-ordinal-group: 2;
 }

 #text4 {
 background: orange;
 }
</style>

<div id="Flexbox">
  <div id="text1">text 1</div>
  <div id="text2">text 2</div>
  <div id="text3">text 3</div>
  <div id="text4">text 4</div>
</div>
```
:indeterminate
==============

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

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

* Learn more
* See full compatibility
* Report feedback
La pseudo-clase **`:indeterminate`** de CSS representa cualquier elemento de formulario cuyo estado sea indeterminado.


```css
/\* Selecciona cualquier <input> cuyo estado sea indeterminado \*/
input:indeterminate {
  background: lime;
}
```


Los elementos seleccionados por este selector son:

* Elementos `<input type="checkbox">` cuya propiedad `indeterminate` se establece en `true` por JavaScript
* Elementos `<input type="radio">` (en-US), cuando todos los radio buttons con el mismo valor `name` en el formulario no están marcados
* Elementos `<progress>` en un estado indeterminado
Sintaxis
--------

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

### Checkbox y radio button

Este ejemplo aplica estilos especiales a las etiquetas asociadas con campos de formulario indeterminados.

#### HTML


```html
<div>
  <input type="checkbox" id="checkbox" />
  <label for="checkbox">Esta etiqueta comienza con el color lima.</label>
</div>
<div>
  <input type="radio" id="radio" />
  <label for="radio">Esta etiqueta comienza con el color lima.</label>
</div>
```


#### CSS


```css
input:indeterminate + label {
  background: lime;
}
```


#### JavaScript


```js
var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {
  inputs[i].indeterminate = true;
}
```


#### Resultado

### Barra de progreso

#### HTML


```html
<progress></progress>
```


#### CSS


```css
progress {
  margin: 4px;
}

progress:indeterminate {
  opacity: 0.5;
  background-color: lightgray;
  box-shadow: 0 0 2px 1px red;
}
```


#### Resultado

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

| Specification |
| --- |
| HTML Standard # selector-indeterminate |
| Selectors Level 4 # indeterminate |

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

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

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

Resumen
-------

La propiedad CSS animation-name especifica una lista de animaciones que se deben aplicar al elemento seleccionado. Cada nombre indica un `@keyframes` esta regla define los valores de las propiedades de la secuencia de animación.

A menudo es conveniente utilizar la propiedad abrevieda `animation` para ajustar todas las propiedades de animación a la vez.

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

Sintaxis
--------
```

Sintaxis formal: 
```
animation-name =   
  [ none | <keyframes-name> ]#    
  
<keyframes-name> =   
  <custom-ident> (en-US)  |  
  <string> (en-US)          
  
```


animation-name: none;
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;

animation-name: test1;
animation-name: test1, animation4;
animation-name: none, -moz-specific, sliding;

animation-name: initial;
animation-name: inherit;
animation-name: unset;
```

### Valores

`<single-animation-name>` es una de las siguientes palabras clave:

`none`

Es una palabra clave especial que denota que no hay fotogramas (keyframes) clave. Se puede utilizar para desactivar una animación sin cambiar el orden de los otros identificadores, o para desactivar animaciones procedentes de las cascada.

`<custom-ident>` (en-US)

Cadena que identifica la animación. Este identificador está compuesto por una combinación de letras mayúsculas y minúsculas de la "A"a la "Z", números del 0 al 9, guiones bajos "\_" y/o guiones "-". el primer caracter siempre debe ser una letra, ni un numero, excepto un guión (no se pueden poner dos guiones seguidos o más al principio del nombre.) No puede usarse `none`, `unset`, `initial`, o `inherit` ni ninguna combinación de estos casos.

Ejemplos
--------

Ver ejemplos CSS animations (en-US).

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

| Specification |
| --- |
| CSS Animations Level 1 # animation-name |

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

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

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

* Usando CSS animations (en-US)
* `AnimationEvent`
border-block-end-style
======================

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

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


```css
border-block-end-style: dashed;
border-block-end-style: dotted;
border-block-end-style: groove;
```


Está relacionada a `border-block-start-style`, `border-inline-start-style`, y `border-inline-end-style`, que definen las otras propiedades de estilos de borde del elemento.

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

Sintaxis
--------

### Valores

`<'border-style'>`

See `border-style`

### Sintaxis formal
```

border-block-end-style =   
  <line-style>    
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

Ejemplo
-------

### Contenido HTML


```html
<div>
  <p class="exampleText">Texto de ejemplo</p>
</div>
```

### Contenido CSS


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

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-block-end-style: dashed;
}
```

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

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

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

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

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

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

Sumario
-------

La propiedad CSS `quotes` indica cómo debe renderizar las citas el navegador.

|  |  |
| --- | --- |
| Valor inicial | depends on user agent |
| Applies to | all elements |
| Heredable | yes |
| Valor calculado | como se especifica |
| Animation type | discrete |

Sintaxis
--------


```css
/\* Valor con palabras clave \*/
quotes: none;

/\* Valor <string> \*/
quotes: "«" "»"; /\* Especifica open-quote y close-quote a las marcas de cita francesas \*/
quotes: "«" "»" "‹" "›"; /\* Especifica dos niveles de marcas de cita \*/

/\* Valores globales \*/
quotes: inherit;
quotes: initial;
quotes: unset;
```

### Valores

`none`

Los valores `open-quote` y `close-quote` de la propiedad `content` no renderiza marcas de cita.

`[<string> <string>]+`

Uno o más pares de valores `<string>` (en-US) para `open-quote` y `close-quote`. El primer par representa el nivel más externo de citación, el segundo par es para el primer nivel anidado, el siguiente par para el siguiente nivel, y así sucesivamente.

### Sintaxis formal
```

quotes =   
  auto                    |  
  none                    |  
  [ <string> (en-US) <string> (en-US) ]+    
  
```

Ejemplos
--------


```css
q {
  quotes: '"' '"' "'" "'";
}
q:before {
  content: open-quote;
}
q:after {
  content: close-quote;
}
```

Notas
-----

Desde Firefox 3.5, el valor inicial de la propiedad de las citas se puede leer usando `-moz-initial`. Esto no es posible en versiones anteriores de Firefox.

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

| Specification |
| --- |
| CSS Generated Content Module Level 3 # quotes |

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

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

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

* `content`