recursal/MDN huggingface dataset:
flex-grow
=========

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

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

* Learn more
* See full compatibility
* Report feedback
Resumen
-------

La propiedad **`flex-grow`** de CSS especifica el factor de crecimiento de un elemento flexible (que tiene asignado display:flex), en su dirección principal. El factor de crecimiento especifica qué cantidad del espacio restante dentro del contenedor flexible, debería ocupar el item en cuestión.

La dirección principal puede ser la altura o el ancho del elemento, dependiendo del valor de `flex-direction`.

El espacio restante es el tamaño del contenedor flexible menos el tamaño de todos los elementos flexibles juntos. Si todos los ítems dentro del contenedor tienen el mismo factor de crecimiento, todos los elementos reciben la misma cantidad del espacio restante. De lo contrario, el espacio restante se distribuye en función de los diferentes factores de crecimientos de cada item.

|  |  |
| --- | --- |
| Valor inicial | `0` |
| Applies to | flex items, including in-flow pseudo-elements |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | a number |

Ver Usando las cajas flexibles en CSS para más propiedades e información.

Sintaxis
--------


```css
/\* <number> valores \*/
flex-grow: 3;
flex-grow: 0.6;

/\* Valores globales \*/
flex-grow: inherit;
flex-grow: initial;
flex-grow: unset;
```

### Valores

`<number>`

Ver `<number>`. Los valores negativos no son válidos.

### Sintaxis formal
```

flex-grow =   
  <number [0,∞]>    
  
```

Ejemplo
-------

### HTML


```html
<h4>This is a Flex-Grow</h4>
<h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
  <div class="box" style="background-color:brown;">F</div>
</div>
```

### CSS


```css
#content {
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;

  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-items: stretch;
  align-items: stretch;
}

.box {
  flex-grow: 1;
  border: 3px solid rgba(0, 0, 0, 0.2);
}

.box1 {
  flex-grow: 2;
  border: 3px solid rgba(0, 0, 0, 0.2);
}
```

### Resultado

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

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-grow-property |

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

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

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

* Usando las cajas flexibles en CSS
:-moz-user-disabled
===================

**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-class CSS `:-moz-user-disabled` selecciona imágenes que no fueron cargadas porque en las preferencias del usuario las imagenes han sido totalmente desahabilitadas.

Está pensado para que, sobre todo, sea usado por desarrolladores de temas.
Valor resuelto
==============

El **valor resuelto** (**resolved value**) de una propiedad CSS es el valor devuelto por `getComputedStyle()`. Para la mayoría de las propiedades, esto es el `valor calculado`, pero para algunas propiedades antiguas (incluyendo `width` y `height`), éste es el `valor usado` (en-US). Véase el enlace a la especificación a continuación para más detalles por propiedad.

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # resolved-values |

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

* Referencia CSS
* `window.getComputedStyle`
* CSS Key Concepts: CSS syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual formatting models (en-US), and margin collapsing, or the initial, computed, resolved, specified, used (en-US), and actual values. Definitions of value syntax, shorthand properties and replaced elements.
:in-range
=========

La pseudo-clase (en-US) **`:in-range`** de CSS representa un elemento `<input>` cuyo valor actual se encuentra dentro 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á dentro de ese rango \*/
input:in-range {
  background-color: rgba(0, 255, 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á dentro 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-in-range |
| Selectors Level 4 # in-range-pseudo |

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

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

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

* `:out-of-range`
* Validación de datos de formulario (en-US)
Top
===

### Sumario

La propiedad `top` especifica parte de la posición de un elemento posicionado. No tiene efecto en elementos no posicionados.

Para los elementos con una posición absoluta (aquellos que tienen la propiedad `position``: absolute` o `position``: fixed`), determina la distancia entre el borde superior del elemento y el borde superior del bloque que lo contiene.

Para los elementos con una posición relativa (aquellos que tienen la propiedad `position``: relative`), determina el desplazamiento hacia abajo que tendrá el elemento con respecto a su posición normal.

Cuando se define tanto la propiedad `top` como `bottom` para un elemento, y `height` no se ha definido, tiene un valor `auto` o 100%, tanto la distancia `top` como `bottom` se respetan. Si `height` está definida, la aplicación de la propiedad `top` tiene precedencia y `bottom` será ignorada.

* Valor inicial: `auto` (en-US)
* Aplicable a: Posicionar Elementos
* Heredable: no
* Porcentajes: se refieren a la altura del bloque contenedor.
* Medio: `visual` (en-US)
* Valor calculado: valor absoluto, porcentaje ó auto.
### Sintaxis
```

   top: <longitud> | <porcentaje> | auto | inherit
```

### Ejemplos


```css
/\* se puede también usar unidades px para posicionar body para luego operar con el div \*/
body {
  width: 100%;
  height: 100%;
}
/\* ahora podemos operar con unidades de porcentajes (con al 100% respecto de body) \*/
div {
  position: absolute;
  left: 15%;
  top: 30%;
  bottom: 30%;
  width: 70%;
  height: 40%;
  text-align: left;
  border: 3px rgb(0, 0, 0) solid;
}
```



```html
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml" />
    <title>Mozzila.org height top left width porcentaje CSS</title>
    <style type="text/css">
 /\* se puede también usar unidades px para posicionar body para luego operar con el div \*/
 body {
 width: 100%;
 height: 100%;
 }
 /\* ahora podemos operar con unidades de porcentajes (con respecto al 100% del body) \*/
 div {
 position: absolute;
 left: 15%;
 top: 30%;
 bottom: 30%;
 width: 70%;
 height: 40%;
 text-align: left;
 border: 3px rgb(0, 0, 0) solid;
 }
 </style>
  </head>
  <body>
    <center>
      <div>...Contenido...</div>
    </center>
  </body>
</html>
```

### Especificaciones

| Specification |
| --- |
| CSS Positioned Layout Module Level 3 # insets |

### Compatibilidad con navegadores

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

### Ver también

`position`, `right`, `bottom`, `left`
list-style-position
===================

### Resumen

La posición de la lista (`list-style-position`) especifica donde será colocado el marcador de la lista en relación a la caja principal.

* `Valor inicial`: `outside (afuera)`
* Se aplica a: elementos con 'display: list-item'
* `Valor heredado`: Sí
* Porcentajes: n/a
* Medio: `visual`
* `Valor calculado`: como especificado
### Sintaxis
```

list-style-position: inside | outside | inherit
```

### Valores

`outside`

el marcador se encuentra fuera de la caja principal.

`inside`

el marcador es la primera caja en línea dentro de la caja principal, después de la cual fluye el resto de los elementos.

Ejemplos
--------

### HTML


```html
<ul class="one">
  List 1
  <li>List Item 1-1</li>
  <li>List Item 1-2</li>
  <li>List Item 1-3</li>
  <li>List Item 1-4</li>
</ul>
<ul class="two">
  List 2
  <li>List Item 2-1</li>
  <li>List Item 2-2</li>
  <li>List Item 2-3</li>
  <li>List Item 2-4</li>
</ul>
<ul class="three">
  List 3
  <li>List Item 3-1</li>
  <li>List Item 3-2</li>
  <li>List Item 3-3</li>
  <li>List Item 3-4</li>
</ul>
```

### CSS


```css
.one {
  list-style: square inside;
}

.two {
  list-style-position: outside;
  list-style-type: circle;
}

.three {
  list-style-image: url("starsolid.gif");
  list-style-position: inherit;
}
```

### Result

### Especificaciones

* CSS 1
* CSS 2.1
* css3-lists
### Compatibilidad con navegadores

### Ver también

`list-style`, `list-style-type`, `list-style-image`
url()
=====

La función de CSS **`url()`** usa un filtro SVG (en-US) para cambiar la apariencia en la imagen de entrada.

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

url(location)
```

### Parámetros

`location`

La `<url>()` de un archivo XML que especifique un filtro SVG, y puede incluir un ancla a un elemento filtro específico.

Ejemplo
-------


```css
url(resources.svg#c1)
```

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

* `<filter-function>`
padding-block
=============

**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`** define el relleno lógico de inicio y final del bloque de un elemento, que se asigna a las propiedades físicas del relleno según el modo de escritura del elemento, la direccionalidad y la orientación del texto.


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

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

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


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

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

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

Sintaxis
--------

### Valores

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

### Sintaxis formal
```

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

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

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

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`
border-inline-width
===================

**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-inline-width`** define al ancho del borde lógico en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades `border-top-width` (en-US) y `border-bottom-width`, o `border-left-width` (en-US), y `border-right-width` (en-US) dependiendo de los valores definidos por `writing-mode`, `direction`, y `text-orientation`.


```css
/\* <'border-width'> values \*/
border-inline-width: 5px 10px;
border-inline-width: 5px;
border-inline-width: thick;
```


El ancho del borde en otra dimensión puede establecerse con `border-block-width`, que establece `border-block-start-width`, y `border-block-end-width`.

|  |  |
| --- | --- |
| Valor inicial | `medium` |
| Applies to | all elements |
| Heredable | no |
| Percentages | logical-width of containing block |
| Valor calculado | absolute length; `0` if the border style is `none` or `hidden` |
| Animation type | by computed value type |

Sintaxis
--------

### Valores

`<'border-width'>`

El ancho del borde. Mira `border-width`.

### Sintaxis formal
```

border-inline-width =   
  <'border-top-width'>{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-lr;
  border: 1px solid blue;
  border-inline-width: 5px 10px;
}
```

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

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

Compatibilidad en navegadores
-----------------------------

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

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

* Esta propiedad se asigna a una de las propiedades del borde físico:`border-top-width` (en-US), `border-right-width` (en-US), `border-bottom-width`, y `border-left-width` (en-US)
* `writing-mode`, `direction`, `text-orientation`
CSS Fonts
=========

**CSS Fonts** es el modulo CSS que define todo lo relacionado con los recursos tipográficos, sus propiedades y como son cargados. Permite definir el estilo de una fuente, su familia tipográfica, tamaño o peso, y las variantes que puede tener la fuente. También permite definir la altura de una línea.

Referencia
----------

### Propiedades

* `font`
* `font-family`
* `font-feature-settings` (en-US)
* `font-kerning` (en-US)
* `font-language-override`
* `font-size`
* `font-size-adjust`
* `font-stretch` (en-US)
* `font-style`
* `font-synthesis` (en-US)
* `font-variant`
* `font-variant-alternates`
* `font-variant-caps` (en-US)
* `font-variant-east-asian` (en-US)
* `font-variant-ligatures` (en-US)
* `font-variant-numeric` (en-US)
* `font-variant-position` (en-US)
* `font-weight`
* `line-height`
### Atributos

`@font-face`

* `font-family`
* `font-feature-settings` (en-US)
* `font-style`
* `font-variant` (en-US)
* `font-weight` (en-US)
* `font-stretch` (en-US)
* `src`
* `unicode-range`

`@font-feature-values`

Empty

Guia
----

*None.*

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

| Specification |
| --- |
| CSS Fonts Module Level 4  |
border-inline-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 de CSS **`border-inline-end-style`** CSS property defines the style of the logical inline end border of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades `border-top-style` (en-US) y `border-bottom-style`, o `border-left-style` (en-US), y `border-right-style` (en-US) dependiendo de los valores definidos por `writing-mode`, `direction`, y `text-orientation`.

Pruébalo
--------

Sintaxis
--------


```css
/\* <'border-style'> values \*/
border-inline-end-style: dashed;
border-inline-end-style: dotted;
border-inline-end-style: groove;
```


Propiedades relacionadas son `border-block-start-style`, `border-block-end-style`, and `border-inline-start-style`, que definen los otros estilos del borde del elemento.

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

### Valores

`<'border-style'>`

La línea de estilo del borde. Mira `border-style`.

### Sintaxis formal
```

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

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;
  border: 5px solid blue;
  border-inline-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.

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

* Esta propiedad se asigna a una de las propiedades del borde físico: `border-top-style` (en-US), `border-right-style` (en-US), `border-bottom-style`, o `border-left-style` (en-US).
* `writing-mode`, `direction`, `text-orientation`
::-webkit-meter-suboptimum-value
================================

**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 `::-webkit-meter-suboptimum-value` da color amarillo al elemento meter cuando su valor cae fuera del rango mix-max.

Ejemplos
--------


```html
<meter min="0" max="10" value="6">Puntuación sobre 10</meter>
```



```css
meter::-webkit-meter-suboptimum-value {
  background: -webkit-gradient linear, left top, left bottom,
  height: 100%;
  box-sizing: border-box;
}
```


**Nota:** Sólo funciona en navegadores basados en Webkit/Blink

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

No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.

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 WebKit/Blink para dar estilo a otras partes del elemento `<meter>` (en-US) :

* `::-webkit-meter-inner-element`
* `::-webkit-meter-bar`
* `::-webkit-meter-even-less-good-value`
* `::-webkit-meter-optimum-value`
:-webkit-autofill
=================

**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 `:-webkit-autofill` CSS selecciona un elemento `<input>` cuando su valor es rellenado automáticamente por el navegador.

**Nota:** La hoja de estilos por defecto de muchos navegadores usan `!important` en sus declaraciones de estilo `:-webkit-autofill` , haciendo que no puedan ser sobrescritos por páginas que no usen trucos JavaScript.

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

* Asunto Chromium 46543: El realce con fondo amarillo de los campos input de texto con valor automático no puede ser deshabilitados.
* WebKit bug 66032: Permite a los autores sobrescribir los colores de los campos que se rellenan automáticamente.
* Mozilla bug 740979: implementar `la pseudo-clase :-moz-autofill` en elemento input con un valor de relleno automático.
::-webkit-slider-thumb
======================

admi

**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 **`::-webkit-slider-thumb`** representa el selector que el usuario puede mover a lo largo de la ranura de un elemento `<input>` con `type="range"` para modificar su valor numérico.

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

No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.

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

* `::-webkit-slider-runnable-track`
* Psuedo-elementos similares en otros navegadores:
    + `::-moz-range-thumb`
    + `::-ms-thumb`
* CSS-Tricks: Dando estilos con CSS a elementos Input de tipo range para que se muestren correctamente en distintos navegadores
* QuirksMode: Dando estilos y aplicando scripts a elementos deslizantes