recursal/MDN huggingface dataset:
Module CSS Styles de compteurs (Counter Styles)
===============================================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

Le module CSS Styles de compteurs (*Counter Styles*) permet de définir des styles de compteurs personnalisés qui peuvent être utilisés pour les marqueurs de listes CSS et les compteurs des contenus générés.

Interfaces
----------

`CSSCounterStyleRule` (en-US)

Représente une règle `@counter-style`.

Spécifications
--------------

| Specification |
| --- |
| CSS Counter Styles Level 3 # the-csscounterstylerule-interface |

Compatibilité des navigateurs
-----------------------------

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

Voir aussi
----------

* Utiliser les compteurs CSS
WindowClient
============

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

L'interface `WindowClient` de l'API ServiceWorker (en-US) représente la portée d'un client service worker lorsque celui-ci existe en tant que document dans un contexte navigateur, controlé par un worker actif. Le client sélectionne et utilise un service worker pour son propre chargement et celui de ses sous-ressources.

Méthodes
--------

*`WindowClient` hérite certaines méthodes de son parent, `Client`.*

`WindowClient.focus()`

Assigne le focus au client en cours.

`WindowClient.navigate()`

Charge l'url spécifiée dans la page en cours.

Propriétés
----------

*`WindowClient` hérite certaines propriétés de son parent, `Client`.*

`WindowClient.focused` Lecture seule 

Un booléen qui indique si oui ou non le client en cours est focus.

`WindowClient.visibilityState` Lecture seule 

Indique la visibilité du client en cours. Peut prendre les valeures `hidden`, `visible`, `prerender`, ou `unloaded`.

Exemple
-------


```js
self.addEventListener("notificationclick", function (event) {
  console.log("On notification click: ", event.notification.tag);
  event.notification.close();

  // Vérifie si le client en cours est ouvert et
  // le focus le cas échéant
  event.waitUntil(
    clients
      .matchAll({
        type: "window",
      })
      .then(function (clientList) {
        for (var i = 0; i < clientList.length; i++) {
          var client = clientList[i];
          if (client.url == "/" && "focus" in client) return client.focus();
        }
        if (clients.openWindow) return clients.openWindow("/");
      }),
  );
});
```

Spécifications
--------------

| Specification |
| --- |
| Service Workers # windowclient |

Compatibilité des navigateurs
-----------------------------

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

Voir aussi
----------

* Using Service Workers (en-US)
* Service workers basic code example
* Is ServiceWorker ready?
* Promises
* Using web workers (en-US)
* Channel Messaging API (en-US)
WindowBase64.btoa()
===================

La méthode `WindowOrWorkerGlobalScope.btoa()` crée une chaîne ASCII codée en base 64 à partir d'un objet `String` dans lequel chaque caractère de la chaîne est traité comme un octet de données binaires.

**Note :** étant donné que cette fonction traite chaque caractère comme un octet de données binaires, quel que soit le nombre d'octets composant le caractère, une exception `InvalidCharacterError` est déclenchée si le code point d'un caractère quelconque est en dehors de la plage 0x00 à 0xFF. Voir Chaînes Unicode pour un exemple montrant comment encoder des chaînes avec des caractères en dehors de la plage 0x00 à 0xFF.

Syntaxe
-------


```js
var donneesEncodees = scope.btoa(chaineAEncoder);
```

### Paramètres

`chaineAEncoder`

Une chaîne dont les caractères représentent chacun un octet unique de données binaires à encoder en ASCII.

### Valeur retournée

Une chaîne contenant la représentation Base64 de la `chaineAEncoder`.

### Exceptions

Exemple
-------


```js
var donneesEncodees = window.btoa("Salut, monde"); // encode une chaîne
var donneesDecodees = window.atob(donneesEncodees); // décode la chaîne
```

Notes
-----

Vous pouvez utiliser cette méthode pour encoder des données qui, autrement, pourraient engendrer des problèmes de communication, les transmettre et utiliser alors la méthode `atob()` pour décoder les données à nouveau. Par exemple, vous pouvez encoder des caractères de contrôle tels que les valeurs ASCII de 0 à 31.

`btoa()` est également disponible pour les composants XPCOM implémentés en JavaScript, même si {domxref("Window")}} n'est pas l'objet global dans les composants.

Chaînes Unicode
---------------

Dans la plupart des navigateurs, l'appel de `btoa()` sur une chaîne Unicode engendrera une exception `InvalidCharacterError`.

Une option est d'échapper tous les caractères étendus, de telle sorte que la chaîne que vous voulez en fait encoder soit une représentation ASCII de l'original. Voyez cet exemple, noté par Johan Sundström :


```js
// Chaîne ucs-2 en ascii encodé en base64
function uena(chn) {
  return window.btoa(unescape(encodeURIComponent(chn)));
}
// Ascii encodé en base64 en chaîne ucs-2
function aenu(chn) {
  return decodeURIComponent(escape(window.atob(chn)));
}
// Usage :
uena("✓ à la mode"); // 4pyTIMOgIGxhIG1vZGU=
aenu("4pyTIMOgIGxhIG1vZGU="); // "✓ à la mode"

uena("I \u2661 Unicode!"); // SSDimaEgVW5pY29kZSE=
aenu("SSDimaEgVW5pY29kZSE="); // "I ♡ Unicode!"
```


Une solution meilleure, plus fiable et moins coûteuse consiste à utiliser des tableaux typés pour faire la conversion.

Spécifications
--------------

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

Compatibilité des navigateurs
-----------------------------

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

Voir aussi
----------

* Base64 encoding and decoding (en-US)
* Les URL de `données`
* `atob()`
* Components.utils.importGlobalProperties
PerformanceObserverEntryList
============================

L'interface **`PerformanceObserverEntryList`** est une liste d'événements de performance qui ont été explicitement *observés* via la méthode `observe()`.

**Note :** Cette interface est exposée à `Window` et `Worker`.

Méthodes
--------

`PerformanceObserverEntryList.getEntries()`

Retourne une liste d'objets explicitement *observés* de `PerformanceEntry` en fonction du *filtre* donné.

`PerformanceObserverEntryList.getEntriesByType()`

Retourne une liste d'objets explicitement *observés* de `PerformanceEntry` du *type d'entrée* donné.

`PerformanceObserverEntryList.getEntriesByName()`

Retourne une liste d'objets explicitement *observés* de `PerformanceEntry` en fonction du *nom* et du *type d'entrée* donnés.

Exemple
-------


```js
// Crée un observateur pour tous les types d'événements de performance
// la liste est de type PerformanceObserveEntryList
const observe_all = new PerformanceObserver(function (list, obs) {
  let perfEntries = list.getEntries();
  for (let i = 0; i < perfEntries.length; i++) {
    print\_perf\_entry(perfEntries[i]);
    // faire quelque chose avec
  }
});
```

Spécifications
--------------

| Specification |
| --- |
| Performance Timeline # performanceobserverentrylist-interface |

Compatibilité des navigateurs
-----------------------------

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

Les évènements de transition de page sont émis quand une page web est chargée ou déchargée.

Information du DOM
------------------

### Hiérarchie d'héritage

Event PageTransitionEvent

Exemple
-------

### HTML


```html
<!doctype html>
<html>
  <body onpageshow="myFunction(event)"></body>
</html>
```

### JavaScript


```js
function myFunction(event) {
  if (event.persisted) {
    alert("La page a été mise en cache par le navigateur");
  } else {
    alert("La page n’a PAS été mise en cache par le navigateur");
  }
}
```

Membres
-------

L'objet **PageTransitionEvent** possède les types de membres suivants :

* Propriétés
### Propriétés

L'objet **PageTransitionEvent** possède les propriétés suivantes :

| Propriété | Type d'accès | Description |
| --- | --- | --- |
| `persisted` | Lecture seule | Indique si une page web est chargée depuis le cache. |
window.atob
===========


 La fonction `WindowOrWorkerGlobalScope.atob()` décode une chaîne de données qui a été codée en utilisant le codage en base 64. Vous pouvez utiliser la méthode `btoa()` pour encoder et transmettre des données qui pourraient causer des problèmes de communication, puis les transmettre et utiliser la méthode atob() pour décoder les données . Par exemple, vous pouvez coder, transmettre et décoder des caractères de contrôle tels que les valeurs ASCII 0 à 31.

Pour une utilisation avec des chaînes Unicode ou UTF-8, voir cette note sur l'encodage et le décodage Base64 et cette note sur btoa().

Syntaxe
-------


```js
var donneesDecodees = scope.atob(donneesEncodees);
```

### Déclenche

Déclenche une `DOMException` si la longueur de la chaîne passée en entrée n'est pas un multiple de 4.

Exemple
-------


```js
donneesEncodees = window.btoa("Salut, monde"); // encode une chaîne
donneesDecodees = window.atob(donneesEncodees); // décode la chaîne
```

Spécifications
--------------

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

Compatibilité des navigateurs
-----------------------------

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

Voir aussi
----------

* Base64 encoding and decoding (en-US)
* Les URL de `données`
* `btoa()`
PerformanceNavigation
=====================

**Attention :** cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface `PerformanceNavigationTiming` à la place.

L'ancienne interface **`PerformanceNavigation`** représente des informations sur la façon dont la navigation vers le document actuel a été effectuée.

Un objet de ce type peut être obtenu en appelant l'attribut en lecture seule `Performance.navigation`.

Propriétés
----------

*L'interface `PerformanceNavigation` n'hérite d'aucune propriété.*

`PerformanceNavigation.type` Lecture seule  
Obsolète

Une valeur `unsigned short` qui indique comment la navigation vers cette page s'est faite. Les valeurs possibles sont :

`TYPE_NAVIGATE` (0)

La page a été consultée en suivant un lien, un signet, un formulaire ou un script, ou en tapant l'URL dans la barre d'adresse.

`TYPE_RELOAD` (1)

L'accès à la page s'est fait en cliquant sur le bouton Recharger ou via la méthode `Location.reload()`.

`TYPE_BACK_FORWARD` (2)

On a accédé à cette page en naviguant dans l'historique.

`TYPE_RESERVED` (255)

De n'importe quelle autre manière.


`PerformanceNavigation.redirectCount` Lecture seule  
Obsolète

Un `unsigned short` représentant le nombre de **Redirections** effectués avant d'atteindre la page.

Méthodes
--------

*L'interface `Performance` n'hérite d'aucune méthode.*

`PerformanceNavigation.toJSON()` (en-US) 
Obsolète

Un sérialiseur renvoyant un objet json représentant l'objet `PerformanceNavigation`.

Spécifications
--------------

#### No specification found

No specification data found for `api.PerformanceNavigation`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Compatibilité des navigateurs
-----------------------------

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

Voir aussi
----------

* L'interface `Performance` qui permet d'accéder à un objet de ce type.
* `PerformanceNavigationTiming` (fait partie de Navigation Timing Level 2) 
Expérimental
DOMQuad
=======

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

Un `DOMQuad` est une collection de 4 `DOMPoint` définissant les coins d'un quadrilatère arbitraire. Renvoyer des `DOMQuad` permet à `getBoxQuads()` de retourner des informations précises, même lorsque des transformations 2D ou 3D arbitraires sont présentes. Il possède un attribut `bounds` pratique qui retourne un `DOMRectReadOnly` pour les cas où vous voulez juste un rectangle de délimitation aligné sur l'axe.

Constructeur
------------

`DOMQuad.DOMQuad()`

Crée un nouvel objet `DOMQuad`.

Propriétés
----------

p1,p2,p3,p4 Lecture seule 

Des objets `DOMPoint` pour chacun des 4 coins de l'objet `DOMQuad`.

Méthode
-------

`DOMQuad.fromRect()`

Renvoie un nouvel objet `DOMQuad` basé sur l'ensemble de coordonnées fournit.

`DOMQuad.fromQuad()`

Renvoie un nouvel objet `DOMQuad` basé sur l'ensemble de coordonnées fournit.

`DOMQuad.getBounds()`

Renvoie un objet `DOMRect` avec les coordonnées et les dimensions de l'objet `DOMQuad`.

`DOMQuad.toJSON()`

Renvoie une représentation JSON de l'objet `DOMQuad`.

Spécifications
--------------

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # DOMQuad |

Compatibilité des navigateurs
-----------------------------

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

L'interface TimeRanges est utilisée pour représenter un ensemble de plages de temps, principalement dans le but de savoir quelles portions du média ont été mises en mémoire tampon lors du chargement avec les éléments `<audio>` et `<video>`.

Un objet TimeRanges comprend une ou plusieurs plages de temps, chacune définie par une position de début et de fin. On récupère ces valeurs en utilisant les méthodes start() et end(), en passant en paramètre l'index de la plage de temps que l'on souhaite récupérer.

Le terme "normalized TimeRanges object" (objet TimeRanges normalisé) indique que les plages dans un tel objet sont ordonnées, ne se chevauchent pas, ne sont pas vides, et ne se touchent pas (les plages adjacentes sont encapsulées dans une plage plus grande).

### Propriétés

| Nom | Description | Type retourné | Disponibilité |
| --- | --- | --- | --- |
| `TimeRanges.length` | 
 Le nombre de plages de temps contenues dans l'objet TimeRanges.
 **Lecture seule**.
  | unsigned long | ? |

### Méthodes

`TimeRanges.start` (en-US)

Retourne la position de début de la plage de temps. En paramètre, l'index de la plage de temps souhaitée.

`TimeRanges.end` (en-US)

Retourne la position de fin de la plage de temps. En paramètre, l'index de la plage de temps souhaitée.

### Spécification

* WHATWG Working Draft
Coordinates
===========

**Contexte sécurisé:** Cette fonctionnalité est uniquement disponible dans des contextes sécurisés (HTTPS), pour certains navigateurs qui la prennent en charge.

L'interface **`Coordinates`** représente la position et l'altitude du périphérique sur Terre, ainsi que la précision avec lesquels ces propriétés sont calculées.Propriétés
----------

*L'interface `Coordinates` n'hérite d'aucune propriété.*

`Coordinates.latitude` (en-US) Lecture seule  Contexte sécurisé

Renvoie un `double` représentant la latitude en degrés décimaux.

`Coordinates.longitude` (en-US) Lecture seule  Contexte sécurisé

Renvoie un `double` représentant la longitude en degrés décimaux.

`Coordinates.altitude` (en-US) Lecture seule  Contexte sécurisé

Renvoie un `double` représentant l'altitude en mètres, relatif au niveau de la mer. Cette valeur peut être `null` si l'implémentation ne peut pas fournir de données.

`Coordinates.accuracy` (en-US) Lecture seule  Contexte sécurisé

Renvoie un `double` représentant la précision des propriétés `latitude` et `longitude` , exprimé en mètres.

`Coordinates.altitudeAccuracy` (en-US) Lecture seule  Contexte sécurisé

Renvoie un `double` représentant la précision de l'`altitude` . Cette valeur peut être `null`.

`Coordinates.heading` (en-US) Lecture seule  Contexte sécurisé

Renvoie un `double` représentant la direction dans laquelle le périphérique se déplace. Cette valeur, spécifiée en degrés, indique la distance à laquelle le périphérique se trouve par rapport au Vrai Nord. `0` degrés représente le Vrai Nord, la direction est déterminé suivant le sens horaire des aiguilles d'une montre (ce qui veut dire que l'Est se trouve à `90` degrés et l'Ouest à `270` degrés). Si `speed` est à `0`, `heading` est alors `NaN` (en-US). Si le périphérique est incapable de fournir des informations relatives à l'endroit où il se déplace (`heading`), cette valeur est alors `null`.

`Coordinates.speed` (en-US) Lecture seule  Contexte sécurisé

Renvoie un `double` représentant la vélocité du périphérique en mètres par seconde. Cette valeur peut être `null`.

Méthodes
--------

***L'interface* `Coordinates` *n'implémente et n'hérite d'aucune méthode.***

Spécifications
--------------

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

Compatibilité des navigateurs
-----------------------------

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

Voir aussi
----------

* Using geolocation (en-US)
* The `Geolocation` interface that uses it.
MediaStreamEvent
================

**Obsolète:** Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

L'interface **`MediaStreamEvent`** représente les événements qui se produisent en relation avec un `MediaStream`. Deux événements de ce type peuvent être lancés: `addstream` (en-US) et `removestream` (en-US).

Propriétés
----------

*Un `MediaStreamEvent` étant un `Event`, cet événement implémente également ces propriétés*.

`MediaStreamEvent.stream` (en-US) Lecture seule 

Contient le `MediaStream` contenant le flux associé à l'événement.

Constructeurs
-------------

`MediaStreamEvent()` (en-US)

Renvoie un nouveau `MediaStreamEvent`. Il prend deux paramètres, le premier étant un `DOMString` représentant le type de l'événement; le second un dictionnaire contenant le `MediaStream` auquel il se réfère.

Méthodes
--------

Un **`MediaStreamEvent`** étant un `Event`, cet évènement implémente également ces propriétés. Il n'y a pas de méthode **`MediaStreamEvent`** spécifique.

Exemples
--------


```js
pc.onaddstream = function (ev) {
  alert(
    "Un stream (id: '" + ev.stream.id + "') a été ajouté à cette connexion.",
  );
};
```

Compatibilité des navigateurs
-----------------------------

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

Voir aussi
----------

* WebRTC
* Sa cible habituelle: `RTCPeerConnection`.
CSS Object Model
================

Le **CSS Object Model** est un ensemble d'API permettant de manipuler le CSS depuis JavaScript. C'est l'équivalent des API DOM et HTML, mais pour CSS. Il permet de lire et modifier des styles CSS dynamiquement.

Référence
---------

* `AnimationEvent`
* `CaretPosition` (en-US)
* `CSS`
* `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`
* `CSSNamespaceRule` (en-US)
* `CSSPageRule` (en-US)
* `CSSRule` (en-US)
* `CSSRuleList`
* `CSSStylesheet` (en-US)
* `CSSStyleDeclaration`
* `CSSSupportsRule` (en-US)
* `CSSVariablesMap`
* `CSSViewportRule`
* `ElementCSSInlineStyle` (en-US)
* `GeometryUtils`
* `GetStyleUtils`
* `LinkStyle` (en-US)
* `MediaList` (en-US)
* `MediaQueryList` (en-US)
* `PseudoElement`
* `Screen` (en-US)
* `Stylesheet`
* `StylesheetList`
* `TransitionEvent`

Quelques autres interfaces sont également étentues par les spécifications relatives au CSSOM : `Document`, `Window`, `Element`, `HTMLElement`, `HTMLImageElement`, `Range`, `MouseEvent`, et `SVGElement`.

Tutoriels
---------

* Déterminer les dimensions l'un élément (nécéssite une mise à jour, car datant de l'époque DHTML/Ajax).
* Gérer l'orientation de l'écran
Spécifications
--------------

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

Notes sur la compatibilité des navigateurs
------------------------------------------

Toutes ces fonctionnalités ont été ajoutées petit à petit au fil des années dans les différents navigateurs : ce fut un processus assez complexe, impossible à résumer en un simple tableau. Veuillez vous référer aux interfaces spécifiques pour connaître leurs disponibilités.