recursal/MDN huggingface dataset:
CSS Object Model
================

El Modelo de objetos CSS (**CSS Object Model**) es un conjunto de APIs que permite manipular CSS desde JavaScript. Así como el DOM (Document Object Model) es para HTML, el CSSOM (CSS Object Model) es para CSS. Permite leer y modificar el estilo de CSS de forma dinámica.

Referencia
----------

* `AnimationEvent`
* `CaretPosition` (en-US)
* `CSS` (en-US)
* `CSSCharsetRule`
* `CSSConditionRule` (en-US)
* `CSSCounterStyleRule` (en-US)
* `CSSFontFaceRule` (en-US)
* `CSSFontFeatureValuesMap`
* `CSSFontFeatureValuesRule` (en-US)
* `CSSGroupingRule` (en-US)
* `CSSImportRule` (en-US)
* `CSSKeyframeRule` (en-US)
* `CSSKeyframesRule` (en-US)
* `CSSMarginRule`
* `CSSMediaRule` (en-US)
* `CSSNamespaceRule` (en-US)
* `CSSPageRule` (en-US)
* `CSSRule`
* `CSSRuleList` (en-US)
* `CSSStyleSheet`
* `CSSStyleDeclaration`
* `CSSSupportsRule` (en-US)
* `CSSVariablesMap`
* `CSSViewportRule`
* `ElementCSSInlineStyle` (en-US)
* `GeometryUtils`
* `GetStyleUtils`
* `LinkStyle` (en-US)
* `MediaList` (en-US)
* `MediaQueryList`
* `PseudoElement`
* `Screen`
* `StyleSheet`
* `StyleSheetList` (en-US)
* `TransitionEvent` (en-US)

Algunas otras interfaces también son complementadas por las especificaciones relacionadas con CSSOM: `Document`, `Window`, `Element`, `HTMLElement`, `HTMLImageElement`, `Range`, `MouseEvent`, y `SVGElement` (en-US).

Tutoriales
----------

* Determinar las dimensiones de los elementos (en-US) (Necesita actualización porque se realizó con DHTML/Ajax).
* Gestionando la orientación de la pantalla (en-US)
Especificaciones
----------------

| Specification |
| --- |
| CSS Object Model (CSSOM)  |
| CSSOM View Module  |
| CSS Typed OM Level 1  |

Notas de compatibilidad con los navegadores
-------------------------------------------

Todas estas funcionalidades han sido añadidas a los navegadores poco a poco durante los años: Es un complejo proceso que no puede ser resumido en una simple tabla. Por favor busca la disponibilidad en navegadores en las interfaces específicas.
Position
========

**Contexto seguro:** Esta función está disponible solo en contextos seguros (en-US) (HTTPS), en algunos o todos los navegadores que lo soportan.

La interfaz **`Position`** representa la posición del dispositivo en cuestión en un momento dado. La posición, representada por el objeto `Coordinates`, comprende la posición en dos dimensiones del dispositivo en un esferoide representando la Tierra y además su altitud y velocidad.

Propiedades
-----------

*La interfaz `Position` no hereda ninguna propiedad.*

`Position.coords` (en-US) Read only  Contexto seguro

Devuelve un objeto `Coordinates` que indica la posición actual.

`Position.timestamp` (en-US) Read only  Contexto seguro

Devuelve un `DOMTimeStamp` (en-US) indicando el momento en que la localización ha sido recuperada.

Métodos
-------

La interfaz `Position` no implementa ni hereda ningún método.

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

| Specification |
| --- |
| Geolocation API # position\_interface |

Compatibilidad de navegadores
-----------------------------

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

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

* Using geolocation
* La interfaz `Geolocation` que la usa.
Crypto
======

La interfaz **`Crypto`** representa las características básicas de criptografía disponibles en el contexto actual. Permite acceder a un generador de números aleatorios criptográficamente fuerte y a primitivos criptográficos.

Un objeto con esta interfaz está disponible en el contexto de la Web a través de la propiedad `Window.crypto`.

Propiedades
-----------

*Esta interfaz implementa las propiedades definidas en `RandomSource` (en-US).*

`Crypto.subtle` Read only 

Retorna un `SubtleCrypto` objeto proporcionando acceso a primitivos criptográficos comunes, como el hashing, el firmado, cifrado o descifrado.

Métodos
-------

*Esta interfaz implementa las propiedades definidas en `RandomSource` (en-US).*

`Crypto.getRandomValues()`

Llena el pasado `TypedArray` valores aleatorio sólidos criptográficamente.

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

| Specification |
| --- |
| Web Cryptography API # crypto-interface |

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

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

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

* Components.utils.importGlobalProperties
AnimationEvent
==============

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

La interfaz **`AnimationEvent`** representa los eventos que proporciona información relacionada con las animaciones (en-US).

Event

AnimationEventPropiedades
-----------

*También hereda las propiedades de su padre `Event`*.

`AnimationEvent.animationName` Read only 

Es un `DOMString` que contiene el valor de la propiedad CSS `animation-name` asociado con la transición.

`AnimationEvent.elapsedTime` (en-US) Read only 

Es un número flotante que da la cantidad de tiempo que ha estado corriendo la animación, en segundos, cuando este evento es disparado, excluyendo cualquier vez que la aimación fue pausada. Para un evento `"animationstart"`, `elapsedTime` es `0.0` a ménos que hubiera un valor negativo para `animation-delay`, en tal caso sería disparado el evento con `elapsedTime` conteniendo `(-1 *`*retraso*`)`.

`AnimationEvent.pseudoElement` (en-US) Read only 

Es un `DOMString`, empezando con `'::'`, conteniendo el nombre del pseudo-element en el cual corre la animación. Si la animación no corre sobre un pseudo-element sino en el elemento, un string vacío: ''.

Constructor
-----------

`AnimationEvent()` (en-US)

Crea un evento `AnimationEvent` con los parametros dados.

Métodos
-------

*También hereda los métodos de su padre `Event`*.

`AnimationEvent.initAnimationEvent()` (en-US) 
Non-standard

Obsoleto

Inicializa un evento `AnimationEvent` creado utilizando el método obsoleto `Document.createEvent("AnimationEvent")`

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

| Specification |
| --- |
| CSS Animations Level 1 # interface-animationevent |

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

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

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

* Usando animaciones CSS (en-US)
* Las propiedades CSS referentes a animación y reglas: `animation`, `animation-delay`, `animation-direction`, `animation-duration`, `animation-fill-mode`, `animation-iteration-count`, `animation-name`, `animation-play-state`, `animation-timing-function`, `@keyframes`.
MimeType
========

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

La interfaz **`MimeType`** provee información acerca de un tipo MIME asociado con un plugin en particular. `NavigatorPlugins.mimeTypes` (en-US) retorna un arreglo de estos objetos.

Propiedades
-----------

`MimeType.type`

Retorna el tipo MIME del plugin asociado.

`MimeType.description`

Retorna la descripción del plugin asociado o un string vacío en caso de no haberla.

`MimeType.suffixes`

Un string que contiene las extensiones de archivo válidas para los datos mostrados por el plugin, o un string vacío si una extensión de archivo no es válida para el módulo en particular. Por ejemplo, un módulo de decriptación de contenido del navegador podría aparecer en la lista de plugins, pero soportar más extensiones de archivo de las que se pueden anticipar. Por lo tanto, podría retornar un string vacío.

`MimeType.enabledPlugin`

Retorna una instancia de `Plugin` (en-US) que contiene la información acerca del plugin en sí mismo.

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

| Specification |
| --- |
| HTML Standard # mimetype |

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

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

`Cadenas JavaScript` son cadenas codificadas en UTF-16. Esto significa que cada unidad de código requiere dos bytes de memoria y puede representar `65535` puntos de código diferentes. Un subconjunto de estas cadenas está representado por cadenas UTF-16 que contienen solo caracteres ASCII (es decir, caracteres cuyo punto de código no excede `127`). Por ejemplo, la cadena `"¡Hola mundo!"` pertenece al subconjunto ASCII, mientras que la cadena `"ÀÈÌÒÙ"` no. Una **cadena binaria** es un concepto similar al subconjunto ASCII, pero en lugar de limitar el rango a `127`, permite hasta `255` puntos de código. Sin embargo, su propósito no es representar caracteres, sino datos binarios. El tamaño de los datos así representados es el doble de lo que sería en formato binario normal, sin embargo, esto no será visible para el usuario final, ya que la longitud de las cadenas de JavaScript se calcula usando dos bytes como unidad.

Las cadenas binarias no forman parte del diseño del lenguaje JavaScript. Sin embargo, al menos una función nativa requiere cadenas binarias como entrada, `btoa()` (en-US): invocarla en una cadena que contiene puntos de código mayores de `255` causará un error `Caracter fuera de rango`.

La razón que llevó al uso de unidades de código UTF-16 como marcadores de posición para los números `uint8` es que a medida que las aplicaciones web se vuelven cada vez más poderosas (agregando funciones como manipulación de audio y video, acceso a datos sin procesar usando WebSockets, y así sucesivamente) ha quedado claro que hay ocasiones en las que sería útil que el código JavaScript pudiera manipular rápida y fácilmente datos binarios sin procesar.

En el pasado, esto se tenía que simular tratando los datos sin procesar como string (en-US) y utilizar el método `charCodeAt()` (en-US) para leer los bytes del búfer de datos (es decir, usando cadenas binarias). Sin embargo, esto es lento y propenso a errores, debido a la necesidad de múltiples conversiones (especialmente si los datos binarios en realidad no son datos en formato de bytes, sino, por ejemplo, enteros de 32 bits o flotantes).

Los arreglos tipados en JavaScript proporcionan un mecanismo para acceder a datos binarios sin procesar mucho más eficientemente. La API de `StringView` cuyo constructor no es nativo está un nivel por encima de los arreglos tipados y proporciona una interfaz para cadenas similar a la de C.

Ve también
----------

* Arreglos tipados
* `DOMString`
* String
* `StringView`
WindowBase64.atob()
===================

La función **WindowBase64.atob()** descodifica una cadena de datos que ha sido codificada utilizando la codificación en base-64. Puedes utilizar el método `window.btoa()` (en-US) para codificar y transmitir datos que, de otro modo podrían generar problemas de comunicación. Luego de ser transmitidos se puede usar el método window.atob() para decodificar los datos de nuevo. Por ejemplo, puedes codificar, transmitir y decodificar los caracteres de control como valores ASCII 0 a 31.

For use with Unicode or UTF-8 strings, see this note at Base64 encoding and decoding (en-US) and this note at `window.btoa()` (en-US).

Syntax
------
```

var decodedData = window.atob(encodedData);
```

Example
-------


```js
var encodedData = window.btoa("Hello, world"); // encode a string
var decodedData = window.atob(encodedData); // decode the string
```

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

| Specification |
| --- |
| HTML Standard # dom-atob-dev |

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

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

See also
--------

* Base64 encoding and decoding (en-US)
* `data` URIs (en-US)
* `window.btoa()` (en-US)
* Components.utils.importGlobalProperties
caches
======

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

La propiedad de sólo-lectura **`caches`** devuelve el objeto `CacheStorage` asociado al contexto actual. Este objeto habilita funcionalidades como guardar assets para su utilización *offline*, y generar respuestas personalizadas a las peticiones.

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

var myCacheStorage = self.caches; // or just caches
```

### Valor

Un objeto `CacheStorage`.

Ejemplo
-------

El siguiente ejemplo muestra la forma en la que utilizarías una cache en un contexto de service worker para guardar assets *offline*.


```js
this.addEventListener("install", function (event) {
  event.waitUntil(
    caches.open("v1").then(function (cache) {
      return cache.addAll(
        "/sw-test/",
        "/sw-test/index.html",
        "/sw-test/style.css",
        "/sw-test/app.js",
        "/sw-test/image-list.js",
        "/sw-test/star-wars-logo.jpg",
        "/sw-test/gallery/",
        "/sw-test/gallery/bountyHunters.jpg",
        "/sw-test/gallery/myLittleVader.jpg",
        "/sw-test/gallery/snowTroopers.jpg",
      );
    }),
  );
});
```

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

| Specification |
| --- |
| Service Workers # self-caches |

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

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

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

* Service Workers (en-US)
* Web Workers
* `CacheStorage`
* `Cache` (en-US)
WebGL
=====

WebGL trae gráficos en 3D para la Web mediante la introducción de una API que cumple estrictamente la OpenGL ES 2.0 que se puede utilizar en elementos `canvas` HTML5. La compatibilidad para WebGL viene en Firefox 4 y se puede probar en las betas de Firefox 4 o en trunk builds. .

**Nota:** La especificación para WebGL se encuentra todavía en fase de borrador y sujeta a cambios.

Temas sobre desarrollo
----------------------

Primeros pasos con WebGL

Cómo crear un contexto WebGL.

Adición de contenido 2D a un contexto WebGL

Cómo representar formas planas sencillas utilizando WebGL.

Uso de sombreadores para aplicar color en WebGL

Muestra cómo agregar color a las formas mediante sombreadores.

Animación de objetos con WebGL

Muestra cómo rotar y trasladar los objetos para crear animaciones sencillas.

Creación de objetos 3D utilizando WebGL

Muestra cómo crear y animar un objeto 3D (en este caso, un cubo).

Uso de texturas en WebGL

Muestra cómo asignar texturas a las caras de un objeto.

Iluminación en WebGL

Cómo simular efectos de iluminación en tu contexto WebGL.

Animación de texturas en WebGL

Se muestra cómo animar texturas, en este caso, mediante la asignación de un vídeo Ogg a las caras de un cubo que gira.

Recursos
--------

Especificación WebGL (Borrador de trabajo)

El borrador de la especificación WebGL.

Sitio de Khronos WebGL

El sitio web principal de WebGL en el Grupo Khronos.

Aprender WebGL

Un sitio con tutoriales sobre cómo usar WebGL.

La guía práctica de WebGL

Un sitio web con recetas muy útiles para escribir código WebGL.

Sylvester

Una biblioteca de código abierto para la manipulación de vectores y matrices.

Planeta WebGL

Un agregador de RSS para las personas que pertenecen a la comunidad WebGL.

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

### api.WebGLRenderingContext

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

### api.WebGL2RenderingContext

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

**Gamepad API** es la manera de los desarrolladores de acceder y responder a las señales de los gamepads y otros controles para juegos de una manera simple y consistente. Éste contiene tres interfaces, dos eventos y una función especializada, para responder a los gamepads siendo conectados y desconectados, y acceder a otra información sobre los mismos gamepads, y que botones y otros controles están siendo presionados.

Interfaces
----------

`Gamepad` (en-US)

Representa un gamepad/control conectado a la computadora.

`GamepadButton`

Representa un botón en uno de los gamepads conectados.

`GamepadEvent` (en-US)

El evento objeto representa eventos que son enviados a los gamepads.

### Extensiones experimentales de los gamepads

`GamepadHapticActuator` (en-US)

Representa el hardware en el control designado para proveer retroalimentación háptica al usuario (si está disponible), más comunmente hardware de vibración.

`GamepadPose` (en-US)

Representa la posición de un control (ej. posición y orientación el espacio 3D) en el caso de un controllador WebVR. Éste no es usado por el nuevo estándar WebXR (en-US).

Ver también las extensiones para la interfaz del navegador (en-US), para caracteristicas que le permitan acceder a la información mencionada.

### Extensiones y otras interfaces

#### Navigator

`Navigator.getGamepads()` (en-US)

Una extensión a el objeto `Navigator` que devuelve un arreglo de objetos `Gamepad` (en-US), uno para cada gamepad conectado.

#### Eventos del Window

`Window.ongamepadconnected` (en-US)

Representa un manejador de evento que se ejecutará cuando un gamepad es conectado (cuando se dispara el evento `gamepadconnected` (en-US)).

`Window.ongamepaddisconnected` (en-US)

Representa un manejador de evento que se ejecutará cuando un gamepad es desconectado (cuando se dispara el evento `gamepaddisconnected` (en-US)).

Guías y tutoriales
------------------

* Usando la gamepad API (en-US)
* Implementación de controles usando la gamepad API (en-US)
Especificaciones
----------------

| Specification |
| --- |
| Gamepad # gamepad-interface |
| Gamepad Extensions # partial-gamepad-interface |

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

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

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

* La gamepad API por Ted Mielczarek y Robert Nyman
* Página de demostración simple de la API (código fuente)
Window.crypto
=============

La propiedad de sólo lectura `Window.crypto` devuelve el objeto Crypto asociado a un objeto global. Este objeto permite a las páginas web acceder a ciertos servicios relacionados con criptografía.

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

var cryptoObj = window.crypto || window.msCrypto; // para IE 11
```

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

| Specification |
| --- |
| Web Cryptography API # dom-windoworworkerglobalscope-crypto |

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

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

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

* El objeto Global `Window`
DOMError
========

La interfaz **`DOMError`** describe un objeto de error que contiene un nombre de error.

Propiedades
-----------

`DOMError.name` Read only 

Devuelve un `DOMString` representando uno de los tipos de errores listados a continuación.

Tipos de errores
----------------

| Type | Description |
| --- | --- |
| `IndexSizeError` | Indice fuera de rango (Ej:. en un objeto `range`). |
| `HierarchyRequestError` | El árbol de jerarquías del nodo no es correcto. |
| `WrongDocumentError` | El objeto está en un `document` incorrecto. |
| `InvalidCharacterError` | El string contiene caracteres inválidos. |
| `NoModificationAllowedError` | El objeto no puede modificarse. |
| `NotFoundError` | El objeto no puede hallarse. |
| `NotSupportedError` | La operación no está permitida/soportada. |
| `InvalidStateError` | El objeto está inválido. |
| `SyntaxError` | El string no coincide con el patrón dado. |
| `InvalidModificationError` | El objeto no puede modificarse de esta manera. |
| `NamespaceError` | La operación no está permitida por Namespaces de XML. |
| `InvalidAccessError` | El objeto no soporta la operación o el argumento. |
| `TypeMismatchError` | El tipo de objeto no es el esperado. |
| `SecurityError` | La operación es insegura. |
| `NetworkError` | Error de red. |
| `AbortError` | La operación fue abortada. |
| `URLMismatchError` | La URL dada no coincide con otra URL a comparar. |
| `QuotaExceededError` | La quota ha sido excedida. |
| `TimeoutError` | La operación ha alcanzado su timeout. |
| `InvalidNodeTypeError` | El nodo (o uno de sus antecedentes) es incorrecto. |
| `DataCloneError` | El objeto no puede clonarse. |

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

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

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

* `DOMException`
BeforeUnloadEvent
=================

El evento **`beforeunload`** se diapara cuando la ventana, el documento y sus recursos están a punto de ser cerrados.

Cuando una cadena no vacía es asignada a la propiedad `returnValue` del Evento, un cuadro de diálogo aparece, pidiendo a los usuarios la confirmación para la página (ver ejemplo a continuación). Cuando no es asignado un valor, el evento se procesa en silencio. Algunas implementaciones muestran solamente el cuadro de diálogo si el marco o cualquier marco embebido recibe un gesto o interacción del usuario. Ver Compatibilidad del navegador para más información.

|  |  |
| --- | --- |
| Burbujas | No |
| Cancelable | Sí |
| Objetos de destino | defaultView |
| Interface | `Event` |

Ejemplos
--------


```js
window.addEventListener("beforeunload", function (event) {
  event.returnValue = "\\o/";
});

//is equivalent to
window.addEventListener("beforeunload", function (event) {
  event.preventDefault();
});
```


Los navegadores basado en Webkit no se basan en las especificaciones del cuadro de diálogo. Un ejemplo compatible con la mayoria de los navegadores seria algo parecido al siguiente ejemplo.


```js
window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\\o/";

  (e || window.event).returnValue = confirmationMessage; //Gecko + IE
  return confirmationMessage; //Webkit, Safari, Chrome etc.
});
```

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

| Specification |
| --- |
| HTML Standard # the-beforeunloadevent-interface |

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

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

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

* `DOMContentLoaded` (en-US)
* `readystatechange` (en-US)
* `load`
* `beforeunload`
* `unload` (en-US)
* Descargas de documentos — Solicitud para descargar un documento
objeto Stylesheet
=================

Esta sección describe el objeto CSSStyleSheet, que representa una única hoja de estilos CSS.

Una hoja de estilos CSS consiste en reglas CSS que pueden, cada una de ellas, ser manipuladas a través del objeto CSSRule. El objeto de la hoja de estilo en sí mismo, te permite examinar y modificar la hoja de estilos, incluyendo su lista de reglas.

Puedes tomar la lista de estilos de un documento determinado mediante el uso de la propiedad document.styleSheets.

### Propiedades

stylesheet.cssRules

Devuelve todas las reglas CSS que hay en la hoja de estilo, en forma de arreglo.

stylesheet.disabled

Esta propiedad indica si se ha aplicado o no, la hoja de estilo actual.

stylesheet.href

Devuelve la localización de la hoja de estilo.

stylesheet.media

Especifica el medio al que se tiene intención de aplicar la hoja de estilo.

stylesheet.ownerNode

el nodo que asocia la hoja de estilo con el documento.

stylesheet.ownerRule

Si la hoja de estilo tiene una regla marcada con @import, la propiedad ownerRule contendrá la CSSImportRule.

stylesheet.parentStyleSheet

Devuelve la hoja de estilo que que está incluida en esta, si existe.

stylesheet.title

Devuelve el título de la hoja de estilo actual.

stylesheet.type

Especifica el lenguaje de la hoja de estilo.

### Métodos

stylesheet.deleteRule

Elimina una regla de la hoja de estilo.

stylesheet.insertRule

Agrega una nueva regla de estilo a la hoja de estilo actualmente usada.

### Especificación

DOM Level 2 Style Sheets: StyleSheet

DOM Level 2 CSS: CSSStyleSheet
SVGPoint
========

Crea un nuevo elemento SVGPoint que se inicializa en el origen ( 0,0) del sistema de coordenadas. El elemento no es visible ni es agregado al DOM