recursal/MDN huggingface dataset:
pointer
=======

La caracteristica **`pointer`** CSS comprueba si el usuario tiene un dispositivo de puntero (como el ratón), y si es así, cuán preciso es el dispositivo de puntero primario.

**Nota:** Si quieres comprobar la precisión de cualquier dispositivo apuntador, usa `any-pointer` (en-US) en su lugar.

Sintaxis
--------

La propiedad `pointer` se especifica como un valor de palabra clave elegido de la lista que figura a continuación.

`none`

El mecanismo de entrada principal no incluye un dispositivo apuntador.

`coarse`

El mecanismo primario de entrada incluye un dispositivo de apuntamiento de precisión limitada.

`fine`

El mecanismo de entrada principal incluye un dispositivo de apuntamiento preciso.

Ejemplo
-------

Este ejemplo crea una pequeño checkbox para los usuarios con punteros primarios finos y un gran checkbox para los usuarios con punteros primarios gruesos.

### HTML


```html
<input id="test" type="checkbox" /> <label for="test">Mírame!</label>
```

### CSS


```css
input[type="checkbox"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: solid;
  margin: 0;
}

input[type="checkbox"]:checked {
  background: gray;
}

@media (pointer: fine) {
  input[type="checkbox"] {
    width: 15px;
    height: 15px;
    border-width: 1px;
    border-color: blue;
  }
}

@media (pointer: coarse) {
  input[type="checkbox"] {
    width: 30px;
    height: 30px;
    border-width: 2px;
    border-color: red;
  }
}
```

### Resultado

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

| Specification |
| --- |
| Media Queries Level 4 # pointer |

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

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

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

* The `any-pointer` media feature (en-US)
display-mode
============

La característica de medios (media feature) de CSS **`display-mode`** puede ser utilizada para probar el modo de visualización de una aplicación. Puede ser usada para proveer de una experiencia de usuario consistente entre el lanzamiento de un sitio desde una URL y desde un ícono del escritorio.

La característica corresponde al miembro `display` del manifiesto de la aplicación web. Ambos aplican al contexto de navegación de nivel más alto y a cualquier hijo del contexto de navegación. La característica de consulta aplica sin importar si el manifiesto de la aplicación web esta presente

Sintaxis
--------

La característica `display-mode` se especifica como un valor de palabra clave elegida de la siguiente lista.

| Modo de visualización | Descripción | `Modo de visualización de reserva` |
| --- | --- | --- |
| `fullscreen` | Toda la área disponible de desplegado es usada y ningún agente de usuario chrome es mostrado. | `standalone` |
| `standalone` | La aplicación se vera y sentira como una aplicación independiente. Esto puede incluir que la aplicación tenga una ventana diferente, su propio ícono en el lanzador de aplicaciones, etc. En este modo, el agente de usuario excluirá elementos UI paara controlar la navegación, pero puede incluir otros elementos UI como la barra de estado. | `minimal-ui` |
| `minimal-ui` | La aplicación se vera y sentira como una apicación autónoma, pero tendra un conjunto mínimo de elementos UI para controlar la navegación. Los elementos pueden variar por navegador. | `browser` |
| `browser` | La aplicación se abre en una pestaña o nueva ventana convencional del navegador, dependiendo del navegador y la plataforma. | (none) |

Ejemplo
-------


```css
@media all and (display-mode: fullscreen) {
  body {
    margin: 0;
    border: 5px solid black;
  }
}
```

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

| Specification |
| --- |
| Media Queries Level 5 # display-mode |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Resolución
==========

**`resolución`** es una función de medios de CSS cuyo valor es la densidad de píxeles del dispositivo de salida, como un CSS`<resolution>`.

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

| Specification |
| --- |
| Media Queries Level 4 # resolution |

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

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

Las CSS media feature (consulta de medios) **`height`** puede ser usada para aplicar estilos basados en la altura del viewport (o la caja de la página, para paged media (en-US)).

Sintáxis
--------

La característica `height` es especificada como un valor `<length>` representando la altura de la vista (viewport). Es una característica en rangos, lo que siginifica que puede ser prefijada con las variantes **`min-height`** y **`max-height`** para consultar valores mínimos y máximos, respectivamente.

Ejemplo
-------

### HTML


```html
<div>Watch this element as you resize your viewport's height.</div>
```

### CSS


```css
/\* Altura exacta \*/
@media (height: 360px) {
  div {
    color: red;
  }
}

/\* Altura mínima \*/
@media (min-height: 25rem) {
  div {
    background: yellow;
  }
}

/\* Altura máxima \*/
@media (max-height: 40rem) {
  div {
    border: 2px solid blue;
  }
}
```

### Resultado

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

| Specification |
| --- |
| Media Queries Level 4 # height |

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

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

La característica de medios CSS **`hover`**, puede se utilizada para probar si el mecanismo de entrada primario de un usuario puede flotar sobre los elementos.

Sintaxis
--------

La característica hover es especificada como un valor de palabra clave elegida de la siguiente lista.

`none`

El mecanismo de entrada primario no puede flotar o no puede convenientemente flotar (es decir, algunos dispositivos mobiles emulan la flotación cuando el usuario presiona inconvenientemente por bastante rato la pantalla), o no hay mecanismo de puntero primario.

`hover`

El mecanismo de entrada primario puede convenientemente flotar sobre los elementos.

Ejemplo
-------

### HTML


```html
<a href="#">Try hovering over me!</a>
```

### CSS


```css
@media (hover: hover) {
  a:hover {
    background: yellow;
  }
}
```

### Resultado

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

| Specification |
| --- |
| Media Queries Level 4 # hover |

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

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

**`color`** es una característica CSS relativa al medio de presentación cuyo valor es un `<integer>` que contiene el número de bits por componente de color en el dispositivo de salida, o cero si el dispositivivo no es en color.

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

| Specification |
| --- |
| Media Queries Level 4 # color |

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

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

El **`width`** CSS `@media` media caracteristica puede ser usada para aplicar estilos basados en el ancho de el viewport (o la caja de la pagina, para paged media (en-US)).

Syntax
------

La característica `width` es especificada como `<length>` valor que representa el ancho de la ventana gráfica. Es una función de rango, lo que significa que también puede usar el prefijo **`min-width`** and **`max-width`** variantes para consultar valores mínimos y máximos, respectivamente.

Example
-------

### HTML


```html
<div>Watch this element as you resize your viewport's width.</div>
```

### CSS


```css
/\* Exact width \*/
@media (width: 360px) {
  div {
    color: red;
  }
}

/\* Minimum width \*/
@media (min-width: 35rem) {
  div {
    background: yellow;
  }
}

/\* Maximum width \*/
@media (max-width: 50rem) {
  div {
    border: 2px solid blue;
  }
}
```

### Result

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

| Specification |
| --- |
| Media Queries Level 4 # width |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Uso de CSS transforms
=====================

Al modificar las coordenadas del espacio, las transformaciones CSS permiten cambiar la posición del contenido afectado sin interrumpir el flujo normal. Se implementan haciendo uso de un conjunto de propiedades CSS que permiten aplicar transformaciones lineales a elementos HTML. Estas transformaciones incluyen rotar, torcer, escalar y desplazar en plano o en un espacio 3D.

Propiedades de las transformaciones CSS
---------------------------------------

Se usan dos propiedades principalmente para definir las transformaciones CSS: `transform` y `transform-origin`

`transform-origin`

Especifica la posición de origen que se usará para la transformación. Por defecto es el lado superior izquierdo del elemento. Esta posición es usada por varias transformaciones como rotar, escalar o torcer ya que necesitan de este punto especifico como parámetro.

`transform`

Especifica la transformación a realizar sobre el elemento. Se define como una lista separada por espacios de transformaciones que se aplican en orden una después de la otra, tal y como es requerido por la operación de composición.

Ejemplos
--------

Esta es una imagen inalterada del logo de MDN:

![MDN Logo](/es/docs/Web/CSS/CSS_transforms/Using_CSS_transforms/logo.png)

### Ejemplo: Rotando

Aquí está el logo MDN en un iframe rotado 90 grados desde su esquina inferior izquierda.


```html
<img
 style="transform: rotate(90deg);
 transform-origin: bottom left;"
 src="logo.png" />
```

### Ejemplo: Torciendo y desplazando

Aquí está el logo MDN torcido 10 grados y desplazado 150 pixels en el eje X.


```html
<img
 style="transform: skewx(10deg) translatex(150px);
 transform-origin: bottom left;"
 src="logo.png" />
```

Propiedades CSS específicas para 3D
-----------------------------------

Realizar cambios en las propiedades CSS en el espacio tridemensional es un poco más complejo. Debes empezar configurando el espacio 3D dándole una perspectiva, a continuación debes configurar cómo interactuarán los elementos 2D en dicho espacio.

### Definiendo una perspectiva

El primer elemento a definir es la *perspectiva*. La perspectiva es lo que nos da la sensación de 3D. Cuanto más lejanos estén los elementos del espectador, más pequeños serán.

Definímos como de rápido se encogen con la propiedad `perspective`. Cuánto más pequeño sea el valor, más profunda será la perspectiva.

| `perspective:0;` | `perspective:250px;` |  |  |
| --- | --- | --- | --- |
| 123456 | 123456 | 123456 | 123456 |

El segundo elemento a configurar es la posición del espectador, con la propiedad `perspective-origin` (en-US). Por defecto, la perspectiva está centrada en el espectador, pero no siempre es lo adecuado.

| `perspective-origin:150px 150px;` | `perspective-origin:50% 50%;` | `perspective-origin:-50px -50px;` |
| --- | --- | --- |
| 123456 | 123456 | 123456 |

Una vez has hecho esto, ya puedes trabajar con los elementos en el espacio 3D.

### 2D elements in the 3D space

See also
--------

* Using deviceorientation in 3D Transforms
Entendiendo el colapso de margen
================================

Los márgenes Top (en-US) y bottom de los bloques a veces están combinados (colapsados) en un solo margen cuyo tamaño es el mayor de los márgenes combinados, un comportamiento conocido como **colapso de margen**. Ten en cuenta que los márgenes de flotantes y elementos con posición absoluta nunca colapsan.

El colapso de margen ocurre en tres casos básicos:

Hermanos adjacentes

Los márgenes de los hermanos adjacentes son colapsados (excepto cuando el último hermano necesita ser limpiado después de usar los flotantes).

Padre y primer/último hijo

Si no hay un borde, padding, contenido en línea, block formatting context creado, o un *limpiado* para separar el `margin-top` (en-US) de un bloque del `margin-top` (en-US) de su primer bloque hijo; o no hay borde, padding, contenido en línea, `height`, `min-height`, o `max-height` para separar el `margin-bottom` de un bloque del `margin-bottom` de su último hijo, entonces esos márgenes colapsan. El margen colapsado termina fuera del padre.

Bloques vacíos

Si no hay borde, padding, contenido en línea, `height`, o `min-height` para separar el `margin-top` (en-US) de un bloque de su `margin-bottom`, entonces sus márgenes superiores e inferiores colapsan.

Cosas a tener en cuenta:

* Cuando estos casos están combinados ocurrirá un colapso de márgenes más complejo (de más de dos márgenes).
* Estas reglas se aplican incluso a márgenes con valor cero, así que el margen del primer/último hijo siempre termina fuera de su padre (de acuerdo a las reglas de arriba) independientemente de que el margen del padre sea o no sea cero.
* Cuando se trata de márgenes negativos, el tamaño del margen colapsado es la suma del margen positivo más grande y el margen negativo más pequeño (el más negativo).
* Cuando todos los márgenes son negativos, el tamaño del margen colapsado es el margen más pequeño (el más negativo). Esto se aplica tanto a los elementos adyacentes como a los elementos anidados.
Ejemplos
--------

### HTML


```html
<p>El margen inferior de este párrafo está colapsado ....</p>
<p>
  ... con el margen superior de este párrafo, lo que deja un margen de<code
 >1.2rem</code
 >
  entre ellos.
</p>

<div>
  Este elemento padre contiene dos párrafos!
  <p>
    Este párrafo tiene un margen de <code>.4rem</code> entre él y el texto
    anterior.
  </p>
  <p>
    Mi margen inferior se colapsa con mi padre, produciendo un margen inferior
    de <code>2rem</code>.
  </p>
</div>

<p>Estoy <code>2rem</code> por debajo del elemento de arriba.</p>
```

### CSS


```css
div {
  margin: 2rem 0;
  background: lavender;
}

p {
  margin: 0.4rem 0 1.2rem 0;
  background: yellow;
}
```

### Result

También puedes ver
------------------

* CSS Reference
* 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.
Usando la pseudo-clase :target en selectores
============================================

When a URL points at a specific piece of a document, it can be difficult to ascertain. Find out how you can use some simple CSS to draw attention to the target of a URL and improve the user's experience. 

Como ayuda para identificar el destino de un enlace que apunta a una parte específica de un documento, los Selectores CSS3 incluyen la pseudo-clase `:target`.

### Seleccionando un objetivo (target)

La pseudo-clase ``:target`` es usada para estilizar el elemento objetivo de una URI que contiene un identificador de fragmento. Por ejemplo, la URI `http://developer.mozilla.org/en/docs/Using_the_:target_selector#Example` contiene el identificador de fragmento `#Example`. En HTML, los identificadores son valores de los atributos `id` o `name`, pues ambos comparten el mismo espacio de nombres. Por lo tanto, la URI de ejemplo apuntará al encabezado "Example" en este documento.

Supongamos que se quiere estilizar cualquier elemento `h2` que sea el objetivo de una URI, pero no queremos que cualquier otro elemento tenga esos mismos estilos. Es así de simple:
```

h2:target {font-weight: bold;}
```


También es posible crear estilos específicos para fragmentos particulares del documento. Esto se hace usando el mismo valor del identificador que se encuentra en la URI. Así, para añadir un borde al fragmento `#Example`, escribiremos:
```

#Example:target {border: 1px solid black;}
```

### Aplicando estilos a todos los elementos objetivo

Si lo que se intenta es crear un estilo que cubra a todos los elementos objetivo, se puede usar el selector universal:
```

:target {color: red;}
```

### Ejemplo

En el siguiente ejemplo, hay cinco enlaces que apuntan a elementos en el mismo documento. Seleccionar el enlace "First", por ejemplo, causará que `<h1 id="one">` sea el elemento objetivo. Nótese que el documento puede desplazarse a una nueva posición, pues los elementos objetivo están ubicados en la parte superior de la ventana del navegador cuando es posible.
```

<h4 id="one">...</h4> <p id="two">...</p>
<div id="three">...</div> <a id="four">...</a> <em id="five">...</em>

<a href="#one">First</a>
<a href="#two">Second</a>
<a href="#three">Third</a>
<a href="#four">Fourth</a>
<a href="#five">Fifth</a>
```

### Conclusión

En los casos en los que un identificador de fragmento apunte a una porción del documento, los lectores pueden confundirse sobre qué parte del documento se supone que están leyendo. Darle un estilo particular al objetivo de la URI le resta confusión al lector, o incluso la elimina.

### Enlaces relacionados

* Selectores CSS3 #target-pseudo
* Referencia CSS :target
### Información del Documento Original

* Autor(es): Eric Meyer, Evangelista de Estándares, Netscape Communications
* Información Original de Copyright: Copyright © 2001-2003 Netscape. Todos los derechos reservados.
* Nota: El artículo en inglés era originalmente parte del sitio DevEdge.
Herramienta para seleccionar color
==================================

Esta herramienta facilita crear, ajustar, y experimentar con colores personalizados para uso web. Además permite facilmente convertir entre varios formatos de color soportados por CSS, incluyendo: HEXA, RGB y HSL. También soporta el control de alpha en los formatos RGB (rgba) y HSL (hsla).

Cada color se presenta en los 3 formatos estándar de CSS mientras se ajusta; además, basada en el color actual, se genera una paleta para HSL y HSV, así como para alpha. El recuadro "eyedropper" se puede cambiar entre los formatos HSL y HSC.
Entendiendo la propiedad CSS z-index
====================================

Usualmente se puede considerar que las páginas HTML tienen dos dimensiones, porque el texto, las imágenes y otros elementos son organizados en la página sin superponerse. Hay un solo flujo de renderizado, y todos los elementos son concientes del espacio ocupado por otros. El atributo `z-index` te permite ajustar el orden de las capas de los objetos cuando el contenido está siendo renderizado.

> 
> En CSS 2.1, cada caja tiene una posición en tres dimensiones. Adicionalmente a sus posiciones horizontales y verticales, las cajas caen a lo largo de un "eje-z" y son formadas una encima de la otra. Las posiciones eje-Z son particularmente relevantes cuando las cajas se superponen visualmente.
> 
> 
> 

(de CSS 2.1 Section 9.9.1 - Layered presentation)

Eso significa que las reglas de estilo CSS te permiten posicionar cajas en capas adicionales a la capa normal de renderizado (capa 0). La posición Z de cada capa es expresada como un entero que representa el orden de apilamiento durante el proceso de renderizado. Números más grandes significan mayor cercanía al observador. La posición Z puede ser controlada con la propiedad CSS `z-index`.

Usar z-index parece extremadamente fácil: una sola propiedad, asigna un número entero, con un comportamiento fácil de entender. Sin embargo, cuando z-index es aplicada a jerarquías complejas de elementos HTML, su comportamiento puede ser difícil de entender o incluso impredecible. Esto es debido a reglas complejas de apilamiento. De hecho una sección dedicada ha sido reservada en la especificación CSS CSS-2.1 Appendix E para explicar mejor estas reglas.

Este artículo va a intentar explicar esas reglas, de una forma más simple y con varios ejemplos.

1. Apilando sin z-index : Reglas de apilamiento por defecto
2. Apilamiento y float : Cómo son manejados los elementos flotantes
3. Agregando z-index : Usando z-index para cambiar el apilamiento por defecto
4. El contexto de apilamiento : Notas sobre el contexto de apilamiento
5. Ejemplo 1 del contexto de apilamiento : Jerarquía HTML de 2 niveles, z-index en el último nivel
6. Ejemplo 2 del contexto de apilamiento : Jerarquía HTML de 2 niveles, z-index en todos los niveles
7. Ejemplo 3 del contexto de apilamiento : Jerarquía HTML de 3 niveles, z-index en el segundo nivel

*Nota del autor: Gracias a Wladimir Palant y Rod Whiteley por la revisión.*

### Información del documento original

* Autor(es): Paolo Lombardi
* Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
* Fecha de última actualización: 9 de Julio del 2005
Imagen con CORS habilitado
==========================

La especificación HTML introduce un atributo `crossorigin` para imágenes que, en conjunto con el encabezado CORS apropiado, permite definir imágenes con el elemento `<img>` que se carguen de orígenes externos dentro de un lienzo (*canvas*) como si estas fuesen cargadas del origen actual.

Vea el artículo "Atributos de configuración CORS" para mas detalles de como el atributo "crossorigin" es usado.

¿Qué es un "tainted" canvas?
----------------------------

Aunque puedes usar imágenes sin la aprobación del CORS en el elemento canvas, hacerlo puede "manchar" el canvas. Por ejemplo, no puedes usar los métodos canvas `toBlob()`, `toDataURL()`, or `getImageData(). Si los usas se lanzará un mensaje de seguridad.`

Esto protegerá a los usuarios de tener información privada usada por medio de imágenes que cogen información desde otras web sin permiso.

Ejemplo: Almacenando una imagen desde un origen externo
-------------------------------------------------------

Debes de tener un servidor de hosting de imágenes con el apropiado `Access-Control-Allow-Origin` header. Añadiendo el atributo crossOrigin crea un request header.

Puedes utilizar este fragemto de la configuración del servidor Apache del Boilerplate HTML5 para responder apropiadamente con este encabezado de respuesta.


```xml
<IfModule mod\_setenvif.c>
    <IfModule mod\_headers.c>
        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
    </IfModule>
</IfModule>
```


Dado que está todo ordenado, serás capás de guardar esas imagenes en el almacenamiento del DOM, así como si fueran solicitados de tu dominio.


```js
var img = new Image(),
  canvas = document.createElement("canvas"),
  ctx = canvas.getContext("2d"),
  src = "http://example.com/image"; // insert image url here

img.crossOrigin = "Anonymous";

img.onload = function () {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  localStorage.setItem("savedImageData", canvas.toDataURL("image/png"));
};
img.src = src;
// make sure the load event fires for cached images too
if (img.complete || img.complete === undefined) {
  img.src =
    "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
  img.src = src;
}
```

También puede ver
-----------------

* Using Cross-domain images in WebGL and Chrome 13
* HTML Specification - the `crossorigin` attribute
Referencia HTML
===============

Esta referencia HTML describe todos los **elementos** y **atributos** de HTML, incluyendo los **atributos globales** que se aplican a todos los elementos.

Referencia de Elementos HTML

Esta página lista todos los elementos HTML

Referencia de Atributos HTML

Los elementos en HTML tienen atributos; estos son valores adicionales que configuran los elementos o ajustan su comportamiento de diversas formas para cumplir los criterios de los usuarios.

Atributos Globales

Los atributos globales son atributos comunes a todos los elementos HTML; pueden usarse en todos los elementos, aunque pueden no tener efecto en algunos de ellos.

Tipos de enlaces

En HTML, los siguientes tipos de enlaces indican la relación entre dos documentos, de los cuales uno enlaza al otro usando un elemento <a> o bien <area>, o bien <link>.