recursal/MDN huggingface dataset:
:empty
======

La pseudo-clase **`:empty`** de CSS representa cualquier elemento que no tenga hijos. Los hijos pueden ser nodos de elemento o texto (incluido el espacio en blanco). Los comentarios o las instrucciones de procesamiento no afectan si un elemento se considera vacío.

**Nota:** En Selectors Level 4 la pseudo-clase `:empty` fue modificada para actuar como `:-moz-only-whitespace`, pero ningún navegador actualmente suporta aún esto.


```css
/\* Selecciona cualquier <div> que no contenga contenido \*/
div:empty {
  background: lime;
}
```

Sintaxis
--------

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

### HTML


```html
<div class="box"><!-- Voy a ser de color lima. --></div>
<div class="box">Voy a ser de color rosa.</div>
<div class="box">
  <!-- Seré de color rosa debido a los espacios en blanco alrededor de este comentario. -->
</div>
```

### CSS
```

body {
  display: flex;
  justify-content: space-around;
}
```



```css
.box {
  background: pink;
  height: 80px;
  width: 80px;
}

.box:empty {
  background: lime;
}
```

### Resultado

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

La tecnología de asistencia, como los lectores de pantalla, no puede analizar el contenido interactivo que está vacío. Todo el contenido interactivo debe tener un nombre accesible, que se crea proporcionando un valor de texto para el elemento principal del control interactivo (anclajes, botones, etc.). Los nombres accesibles exponen el control interactivo al árbol de accesibilidad, una API que comunica información útil para las tecnologías de asistencia.

El texto que proporciona el nombre accesible del control interactivo se puede ocultar mediante una combinación de propiedades que lo eliminan visualmente de la pantalla, pero que la tecnología de asistencia lo puede analizar. Esto se usa comúnmente para botones que dependen solo de un ícono para transmitir el propósito.

* Qué es un nombre accesible (What is an accessible name?) | The Paciello Group
* Contenido oculto para mejor a11y (Hidden content for better a11y) | Go Make Things
* MDN entendiendo WCAG, explicaciones para el lineamiento 2.4 (en-US)
* Understanding Success Criterion 2.4.4 | W3C Understanding WCAG 2.0
Especificaciones
----------------

| Specification |
| --- |
| Selectors Level 4 # the-empty-pseudo |

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

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

Resumen
-------

La propiedad background-origin especifica el área de origen de un fondo o imagen en determinada caja. para que la propiedad background-position calcule la posición de inicio de un fondo o imagen definida por la propiedad background-image.

* Valor inicial: padding-box
* Aplica a: Todos los elementos
* Heredado: No
* Porcentajes: n/a
* Media: Visual
* Valor computado: Mismo que valor especificado.
* Animación: No
Sintaxis
--------
```

background-origin:[padding-box | border-box | content-box][, [border-box | padding-box | content-box]]*
```

Valores
-------

border-box

El fondo se extiende al borde exterior (por debajo del borde en el orden z), la posición es relativa al borde de la caja.

padding-box

El fondo se extiende al borde exterior del padding, la posición es relativa al padding de la caja.

content-box

El fondo se extiende dentro del (recortado al) contenido de la caja, la posición es relativa al contenido de la caja.

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

div{
  border:4px dotted #FBE700;
  background:url('imagen.jpg');
  background-position:0 0;
  background-origin:border-box;
}
```


```
div{
  background-image: url('image1.jpg'), url('image2.jpg');
  background-position: 0 0, bottom left;
  background-origin: padding-box, content-box;
}
```

Notas
-----

* La propiedad background-origin es ignorada si la propiedad background-attachment tiene un valor de fixed.
* Si el valor de esta propiedad no es establecido en la propiedad abreviada (shorthand) background que es aplicada a el elemento despues de la propiedad background-origin, el valor de esta propiedad sera restablecido a su valor inicial por la propiedad abreviada background.
### Especificaciones

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-background-origin |

### Compatibilidad con navegadores

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

Relacionado
-----------

background, background-attachment, background-image,background-repeat
margin-block-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 **`margin-block-start`** CSS property defines the logical block start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.

Pruébalo
--------

Sintaxis
--------


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

/\* Keyword values \*/
margin-block-start: auto;

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


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

Se relaciona con `margin-block-end` (en-US), `margin-inline-start`, and `margin-inline-end`, que define las otras márgenes del elemento.

|  |  |
| --- | --- |
| Valor inicial | `0` |
| Applies to | same as `margin` |
| Heredable | no |
| Percentages | depends on layout model |
| Valor calculado | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto` |
| Animation type | a length |

### Valores

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

### Sintaxis formal
```

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

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # margin-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: `margin-top` (en-US), `margin-right`, `margin-bottom`, y `margin-left` (en-US)
* `writing-mode`, `direction`, `text-orientation`
Layout mode
===========

Un **modo de diseño** CSS(CSS layout mode), a veces simplemente llamado "*layout*", es un algoritmo que determina la posición y tamaño de cajas basado en la forma en la que interactúan con sus (elementos) hermanos y padres. Hay varios de ellos:

* El *block layout*, diseñado para presentar documentos. El block layout contiene características de documento-centrado, como la capacidad de flotar(*float*) elementos o distribuirlos en *múltiples columnas.*
* El *inline layout,* diseñado para presentar texto.
* El *table layout*, diseñado para presentar tablas.
* El *positioned layout*, diseñado para posicionar elementos sin demasiada interacción con otros elementos.
* El *flexible box layout*, diseñado para presentar páginas complejas que pueden redimensionarse de forma fluida.
* El *grid layout*, diseñado para presentar elementos relativos a una cuadrícula fija (fixed grid).

**Nota:** No todas las propiedades CSS aplican a todos los ***modos de diseño***. La mayoría de ellos aplican a uno o dos de ellos y no tienen efecto si se configuran en un elemento que es parte de otro modo de diseño.

Ver También
-----------

* 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.
min-inline-size
===============

**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 **`min-inline-size`** define el tamaño mínimo horizontal o vertical de los elementos en bloque, dependiendo del modo de escritura. Esto corresponde ya sea a la propiedad `min-width` o la propiedad `min-height`, dependiendo del valor de `writing-mode`.

Pruébalo
--------

Sintaxis
--------


```css
/\* <length> values \*/
min-inline-size: 100px;
min-inline-size: 5em;

/\* <percentage> values \*/
min-inline-size: 10%;

/\* Keyword values \*/
min-inline-size: max-content;
min-inline-size: min-content;
min-inline-size: fit-content;
min-inline-size: fill-available;

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


Si el modo de escritura es verticalmente orientado, el valor de `min-inline-size` se relaciona con el mínimo alto del elemento; de otra manera, se relaciona al mínimo ancho del elemento. Una propiedad relacionada es `min-block-size`, que define la otra dimensión del elemento.

|  |  |
| --- | --- |
| Valor inicial | `0` |
| Applies to | same as `width` and `height` |
| Heredable | no |
| Percentages | inline-size of containing block |
| Valor calculado | same as `min-width` and `min-height` |
| Animation type | a length, percentage or calc(); |

### Valores

La propiedad `min-inline-size` toma los mismos valores de las propiedades `min-width` y `min-height`.

### Sintaxis formal
```

min-inline-size =   
  <'min-width'>    
  
```

Ejemplo
-------

### Contenido HTML


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

### Contenido CSS


```css
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 5%;
  min-inline-size: 200px;
}
```

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-min-inline-size |
| CSS Box Sizing Module Level 4 # sizing-values |

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: `min-width` y `min-height`
* `writing-mode`
border-start-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-start-end-radius`** define al radio del borde lógico de un elemento, que se asigna al radio de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades `writing-mode`, `direction`, and `text-orientation`.


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

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

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


Por ejemplo, en un modo de escritura `horizontal-tb`, esta propiedad corresponde a la propiedad `border-bottom-left-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-start-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-start-end-radius: 10px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-start-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-left-radius`
* `writing-mode`, `direction`, `text-orientation`
border-start-start-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-start-start-radius`** define al radio del borde lógico de un elemento, que se asigna al radio de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades `writing-mode`, `direction`, y `text-orientation`.


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

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

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


Por ejemplo, en un modo de escritura `horizontal-tb`, esta propiedad corresponde a la propiedad `border-top-left-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-start-start-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-start-start-radius: 10px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-start-start-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-top-left-radius`
* `writing-mode`, `direction`, `text-orientation`
border-right
============

La propiedad CSS **`border-right`** es un a propiedad rápida para dar valores al `border-right-width` (en-US), `border-right-style` (en-US) y `border-right-color` (en-US). Estas propiedades establecen un bordederecho del elemento.

Pruébalo
--------

Como con todas las propiedades rápidas, `border-right` siempre establece los valores de todas las propiedades que puede establecer, incluso si no están especificadas. Establece los no especificados a sus valores por defecto. Lo que significa que ...


```css
border-right-style: dotted;
border-right: thick green;
```


... es en realidad lo mismo que ...


```css
border-right-style: dotted;
border-right: none thick green;
```


... y el valor de `border-right-style` (en-US) dado previamente a `border-right` es ignorado. Puesto que el valor por defecto de `border-right-style` (en-US) es `none`, si no se especifica la parte `border-style` el resultado es no establecer un borde.

Sintaxis
--------


```css
border-right: 1px;
border-right: 2px dotted;
border-right: medium dashed green;
```


Los tres valores de la propiedad rápida pueden ser especificados en cualquier orden, incluso omitiendo uno o dos de ellos.

### Valores

`<br-width>`

Ver `border-right-width` (en-US).

`<br-style>`

Ver `border-right-style` (en-US).

`<color>`

Ver `border-right-color` (en-US).

### Formal syntax
```

border-right =   
  <line-width>  ||  
  <line-style>  ||  
  <color>         
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

Ejemplo
-------


```html
<div>Esta caja tiene un borde en el lado derecho.</div>
```



```css
div {
  border-right: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}
```

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-shorthands |

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

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

**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 `-moz-user-focus`se usa para indicar si el elemento puedo obtener el foco.

Al poner el valor de esta propiedad a `ignore`, deshabilitas el hecho de que el elemento pueda obtener el foco lo que significa que el usuario no podrá activar el elemento. Se saltará el elemento es un secuncia de tabuladores.

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

Síntaxis
--------


```css
/\* Palabras clave de valores \*/
-moz-user-focus: normal;
-moz-user-focus: ignore;

/\* Valores gloables \*/
-moz-user-focus: inherit;
-moz-user-focus: initial;
-moz-user-focus: unset;
```

### Valores

`ignore`

El elemento no aceptará el foco y será saltado en el orden de tabulación.

`normal`

El elemento puedeo aceptar el foco del teclado.

`select-after`

?

`select-before`

?

`select-menu`

?

`select-same`

?

`select-all`

?

`none`

?

### Síntaxis Formal

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

Esta propiedad no es parte de ninguna especificación. Una propiedad similar `user-focus` fue propuesta en borradores previos de la especificación CSS 3 UI pero finalmente fué rechazada por el grupo de trabajo.

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
list-style-image
================

### Resumen

La imagen de lista (`list-style-image`) define la imagen que será utilizada como marcador del listado.

* `Valor inicial`: `ninguno`
* Se aplica a: elementos con 'display: list-item'
* `Valor heredado`: Sí
* Porcentajes: n/a
* Medio: `visual`
* `Valor calculado`: URI absoluta o `none`
### Sintaxis
```

list-style-image: <uri> | none | inherit
```

### Valores

`uri`

directorio donde se encuentra la imagen que se utilizará como marcador.

Ejemplos
--------

### HTML


```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
```

### CSS


```css
ul {
  list-style-image: url("starsolid.gif");
}
```

### Result

### Especificaciones

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

### Ver también

`list-style`, `list-style-type`, `list-style-position`
inset-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 **`inset-block`** define los bloques lógicos de inicio y fin de las compensaciones de un elemento, que se asignan a las compensaciones físicas en función del modo de escritura del elemento, la direccionalidad y la orientación del texto. Corresponde a las propiedades `top` y `bottom`, o `right` y `left` dependiendo de las propiedades en los valores definidos para `modo de escritura`, `dirección` y `orientación de texto`.


```css
/\* <length> values \*/
inset-block: 3px 10px;
inset-block: 2.4em 3em;
inset-block: 10px; /\* value applied to start and end \*/

/\* <percentage>s of the width or height of the containing block \*/
inset-block: 10% 5%;

/\* Keyword value \*/
inset-block: auto;

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


La abreviación para la otra dimensión `inset-inline`, que es una abreviación para `inset-inline-start`, y `inset-inline-end`.

|  |  |
| --- | --- |
| Valor inicial | as each of the properties of the shorthand:* `inset-block-start`: `auto`
* `inset-block-end`: `auto`
 |
| Applies to | positioned elements |
| Heredable | no |
| Percentages | logical-height of containing block |
| Valor calculado | as each of the properties of the shorthand:* `inset-block-start`: same as box offsets: `top`, `right`, `bottom`, `left` properties except that directions are logical
* `inset-block-end`: same as box offsets: `top`, `right`, `bottom`, `left` properties except that directions are logical
 |
| Animation type | a length, percentage or calc(); |

Sintaxis
--------

### Valores

La propiedad `inset-block` toma los mismos valores de la propiedad `left`.

### Sintaxis formal
```

inset-block =   
  <'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-lr;
  position: relative;
  inset-block: 20px 50px;
  background-color: #c8c800;
}
```

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-inset-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: `top`, `right`, `bottom`, y `left`
* `writing-mode`, `direction`, `text-orientation`