recursal/MDN huggingface dataset:
system-property
===============

**Référence XSLT/XPath** : Éléments XSLT, Fonctions EXSLT, Fonctions XPath, Axes XPath

La fonction `system-property()` retourne un objet représentant la propriété système donnée.

### Syntaxe
```

system-property( nom )
```

### Arguments

*`nom`* (optionnel)

Le nom de la propriété système. L'argument s'évaluer en une chaîne qui est un QName. Le QName est développé en un nom à l'aide des déclarations d'espaces de nommage s'appliquant à l'expression. La fonction `system-property()` retourne un objet représentant la valeur de la propriété système identifiée par le nom. Si cette propriété système n'existe pas, une chaîne vide est retournée.

### Retour

Un objet représentant le propriété système donnée.

### Notes

* xsl:version, un nombre correspondant à la version de XSLT implémentée par le processeur ; pour les processeurs XSLT implémentant la version de XSLT définit dans ce document, ce nombre est 1.0.
* xsl:vendor, une chaîne identifiant le vendeur du processeur XSLT.
* xsl:vendor-url, une chaîne contenant une URL qui identifie le vendeur du processeur XSLT ; généralement, il s'agit de l'adresse de la page Web du vendeur.
### Définition

XSLT 1.0, section 12.4.

### Support Gecko

Supportée.
contains
========

**Référence XSLT/XPath** : Éléments XSLT, Fonctions EXSLT, Fonctions XPath, Axes XPath

La fonction `contains` détermine si la chaîne passée en premier argument contient la chaîne passée en second argument et retourne le booléen `true` ou `false`.

### Syntaxe
```

contains( meule , aiguille )
```

### Arguments

`meule`

La chaîne dans laquelle chercher.


`aiguille`

La chaîne à rechercher dans `meule`

### Retour

`true` si `meule` contient `aiguille`. Autrement, `false`.

### Définition

XPath 1.0, section 4.2.

### Support Gecko

Supportée.
Tutoriels
=========

Cette page répertorie les tutoriels permettant d'apprendre à développer des applications web progressives (abbrégé PWA en anglais pour « *Progressive Web Apps* »). Les tutoriels décrivent les étapes de la création d'une application, du début à la fin, en expliquant comment les différentes fonctionnalités de l'application sont mises en œuvre.

Créer votre première PWA

Ce tutoriel pour débutantes et débutants présente la création d'une application web pour le suivi des cycles menstruels. Les leçons comprennent un passage en revue du HTML, du CSS et du JavaScript nécessaires pour créer une application web entièrement fonctionnelle, la mise en place d'un environnement de test et des explications complètes guidant dans la mise à niveau de l'application web en une application web progressive ; y compris le développement et l'inspection d'un manifeste, l'ajout d'un *service workers* et l'utilisation de *service workers* pour supprimer les caches périmés.

Introduction aux PWA

Ce tutoriel de niveau intermédiaire présente la création d'une PWA qui répertorie les informations sur les jeux soumis dans la catégorie A-Frame du concours js13kGames 2017. Ce tutoriel comprend toutes les bases de la création d'une PWA, avec des fonctionnalités supplémentaires, y compris les notifications, l'usage de *push* et les performances de l'application.
js13kGames
==========

* Aperçu : js13kGames
* Suivant

Dans ce tutoriel, nous allons examiner le code source d'un site web qui répertorie des informations sur les jeux soumis dans la catégorie *A-Frame* du concours js13kGames 2017. Vous n'avez pas besoin de vous soucier du contenu même de ce site web ; l'essentiel est d'apprendre à utiliser les fonctionnalités des PWA dans vos propres projets.

Vous pouvez voir cette application en ligne, et le code source est disponible sur GitHub. Dans ce tutoriel, nous allons examiner attentivement ce code.

Commençons par examiner la structure de notre application d'exemple.

* Aperçu : js13kGames
* Suivant
<angle-percentage>
==================

Le type de donnée **`<angle-percentage>`** représente une valeur qui peut être une valeur de type `<angle>` ou une valeur de type `<percentage>`.

Syntaxe
-------

Voir la documentation des types `<angle>` et `<percentage>` pour plus de détails sur les syntaxes possibles avec chacun de ces types.

Utilisation avec `calc()`
-------------------------

Lorsqu'il est possible d'utiliser une valeur de type `<angle-percentage>` dans une déclaration, cela signifie que le pourcentage sera résolu avec une valeur angulaire et qu'il peut être utilisé dans une expression `calc()`.

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # mixed-percentages |

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

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

Le type de données CSS **`<percentage>`** représente une valeur exprimée en pourcentages. De nombreuses propriétés CSS utilisent des valeurs en pourcentages, la plupart du temps pour déterminer des tailles en fonction de la taille des éléments parent.

De nombreuses propriétés CSS utilisent des pourcentages : `width`, `margin`, `padding`, etc.. Les pourcentages peuvent aussi être vus avec `font-size`, où la taille du texte est directement en relation avec celle de son parent.

**Note :** Seules les valeurs calculées sont héritées. Ainsi, même si une valeur en pourcentage est utilisée sur la propriété parent, une valeur réelle, comme une largeur en pixel pour une valeur `<length>`, sera accessible sur la propriété héritée, pas la valeur en pourcentage.

Syntaxe
-------

Les valeurs de type `<percentage>` sont formées d'un `<number>` immédiatement suivi par le signe pourcentage `%`. Comme pour toutes les valeurs avec unité en CSS, il n'y a aucun espace entre le '%' et le nombre.

Interpolation
-------------

Les valeurs du type `<percentage>` peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par des nombres réels à virgule flottante. La rapidité de l'interpolation est déterminée par la `fonction de temporisation` associée à l'animation.

Exemples
--------

### `width` et `margin-left`


```html
<div style="background-color:#0000FF;">
  <div style="width:50%;margin-left:20%;background-color:#00FF00;">
    width : 50%, left-margin : 20%
  </div>
  <div style="width:30%;margin-left:60%;background-color:#FF0000;">
    width : 30%, left-margin : 60%
  </div>
</div>
```


Le fragment de HTML précédent sera affiché de cette façon :

### `font-size`


```html
<div style="font-size:18px;">
  <p>Texte en taille normale (18px)</p>
  <p><span style="font-size:50%;">50%</span></p>
  <p><span style="font-size:200%;">200%</span></p>
</div>
```


Le fragment HTML précédent donnera ce résultat :

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # percentages |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
:target-within
==============

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

La pseudo-classe CSS **`:target-within`** représente un élément ciblé ou qui *contient* un élément ciblé. Un élément ciblé est un élément unique disposant d'un `id` correspondant au fragment de l'URL. En d'autres termes, il représente un élément qui correspond lui-même à la pseudo-classe `:target` ou qui a un descendant correspondant à `:target` (cela inclut les descendants des arbres fantômes).


```css
/\* Sélectionne une <div> lorsqu'un de ses descendants est une cible \*/
div:target-within {
  background: cyan;
}
```

Syntaxe
-------

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

### Mise en avant d'un article

La pseudo-classe `:target-within` peut être utilisée pour mettre en avant un article si quoi que ce soit dans son contenu a été mis en lien. La pseudo-classe `:target` est aussi utilisée pour montrer l'élément qui a été ciblé.

#### HTML


```html
<h3>Table des matières</h3>
<ol>
  <li><a href="#p1">Aller au premier paragraphe&nbsp;!</a></li>
  <li><a href="#p2">Aller au second paragraphe&nbsp;!</a></li>
</ol>

<article>
  <h3>Mon bel article</h3>
  <p id="p1">
    Vous pouvez cibler <i>ce paragraphe</i> en utilisant un fragment d'URL.
    Cliquez sur le lien ci-dessus pour essayer&nbsp;!
  </p>
  <p id="p2">
    Ceci est <i>un autre paragraphe</i>, également accessible depuis les liens
    ci-dessus. N'est-ce pas savoureux&nbsp;?
  </p>
</article>
```


#### CSS


```css
article:target-within {
  background-color: gold;
}

/\* Ajout d'un pseudo élément à l'intérieur de l'élément cible \*/
p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: 0.25em;
}

/\* Style des éléments en italique à l'intérieur de l'élément cible \*/
p:target i {
  color: red;
}
```


#### Résultat

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

| Specification |
| --- |
| Selectors Level 4 # the-target-within-pseudo |

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

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

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

* `:target`
outline-style
=============

La propriété **`outline-style`** permet de définir la mise en forme utilisée pour dessiner la bordure d'un élément. Cette bordure est dessinée autour de la boîte de bordure et peut être utilisée afin de faire ressortir l'élément.

Exemple interactif
------------------

Cette propriété est synthétisée grâce à la propriété `outline` qui regroupe outline-style, `outline-width` et `outline-color`.

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;

/\* Valeurs globales \*/
outline-style: inherit;
outline-style: initial;
outline-style: unset;
```

### Valeurs

`auto`

L'agent utilisateur peut afficher une bordure avec une mise en forme par défaut.

`none`

Aucune bordure n'est dessinée (équivalent à `outline-width` avec la valeur `0`).

`dotted`

Le bordure est dessinée avec une série de points.

`dashed`

La bordure est dessinée avec des tirets.

`solid`

La bordure est dessinée avec une ligne continue.

`double`

La bordure est dessinée avec deux lignes continues. La valeur de la propriété `outline-width` désigne la somme de la largeur des deux lignes et de l'espace entre elles.

`groove`

La bordure est dessinée comme si elle était gravée dans le document.

`ridge`

La forme obtenue est opposée à `groove` : la bordure semble dépasser du document.

`inset`

La bordure semble être intégrée dans le document..

`outset`

La forme obtenue est opposée à `inset` : la bordure semble ressortir du document.

Définition formelle
-------------------

|  |  |
| --- | --- |
| Valeur initiale | `none` |
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | by computed value type |

Syntaxe formelle
----------------
```

outline-style =   
  auto                  |  
  <outline-line-style>    
  
```

Exemples
--------

### Exemple simple

#### CSS


```css
.exemple-groove {
  outline-style: groove;
  outline-color: red;
  outline-width: 2px;
}

.exemple-outset {
  outline-style: outset;
  outline-color: green;
  outline-width: 1px;
}
```


#### HTML


```html
<p class="exemple-groove">Ça c'est le groove</p>
<p class="exemple-outset">Et ça c'est outset</p>
```


#### Résultat

### Utilisation de la valeur auto

La valeur `auto` indique une bordure sur mesure selon l'interface du système d'exploitation ou de l'agent utilisateur.

#### CSS


```css
.auto {
  outline-style: auto; /\* same result as "outline: auto" \*/
}

/\* To make the Demo clearer \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```


#### HTML


```html
<div>
  <p class="auto">Outline Demo</p>
</div>
```


#### Résulat

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline-style |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
::-webkit-progress-value
========================

**Non standard:** Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

Le pseudo-élément **`::-webkit-progress-value`** permet de représenter la portion « remplie » de la barre d'un élément `<progress>`. C'est un pseudo-élément fils du pseudo-élément `::-webkit-progress-bar`.

**Note :** Afin que `::-webkit-progress-value` ait un effet, il faut que `-webkit-appearance` (en-US) vaille `none` sur l'élément `<progress>`.

Exemples
--------

### CSS


```css
progress {
  -webkit-appearance: none;
}

::-webkit-progress-value {
  background-color: orange;
}
```

### HTML


```html
<progress value="10" max="50"></progress>
```

### Résultat

Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon :

![](/fr/docs/Web/CSS/::-webkit-progress-value/progress-value.png)

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

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

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

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

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

* Les pseudo-éléments relatifs à WebKit/Blink qui permettent de mettre en forme les autres parties des éléments `<progress>` :
    + `::-webkit-progress-bar`
    + `::-webkit-progress-inner-element`
* `::-moz-progress-bar`
* `::-ms-fill`
::slotted()
===========

Le pseudo-élément CSS **`::slotted()`** représente n'importe quel élément ayant été placé à l'intérieur d'un emplacement (*slot*) au sein d'un gabarit (*template*) HTML (cf. Utiliser les gabarits et les emplacements pour plus d'informations).

Cela ne fonctionne que pour du CSS placé à l'intérieur d'un élément `<template>` et/ou dans le *shadow DOM*. On notera également que ce sélecteur ne sélectionnera pas les noeuds texte placés dans les emplacements, il ne cible que les éléments.


```css
/\* Cible n'importe quel élément placé dans un emplacement \*/
::slotted(\*) {
  font-weight: bold;
}

/\* Cible n'importe quel élément <span> placé dans un emplacement \*/
::slotted(span) {
  font-weight: bold;
}
```

Syntaxe
-------

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

Les fragments de code suivants sont tirés du dépôt `slotted-pseudo-element` (voir le résultat en *live*).

Dans cette démonstration, on utilise un gabarit avec trois emplacements :


```html
<template id="person-template">
  <div>
    <h2>Carte d'identité d'une personne</h2>
    <slot name="person-name">NOM ABSENT</slot>
    <ul>
      <li><slot name="person-age">AGE ABSENT</slot></li>
      <li><slot name="person-occupation">POSTE ABSENT</slot></li>
    </ul>
  </div>
</template>
```


Un élément personnalisé — `<person-details>` — est défini de la façon suivante :


```js
customElements.define(
  "person-details",
  class extends HTMLElement {
    constructor() {
      super();
      let template = document.getElementById("person-template");
      let templateContent = template.content;

      const shadowRoot = this.attachShadow({ mode: "open" });

      let style = document.createElement("style");
      style.textContent =
        "div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }" +
        "h2 { margin: 0 0 10px; }" +
        "ul { margin: 0; }" +
        "p { margin: 10px 0; }" +
        "::slotted(\*) { color: gray; font-family: sans-serif; } ";

      shadowRoot.appendChild(style);
      shadowRoot.appendChild(templateContent.cloneNode(true));
    }
  },
);
```


On voit ici que, lorsqu'on renseigne le `style` de l'élément, on sélectionne tous les éléments présents dans les emplacements (`::slotted(*)`) afin de leur fournir différentes polices et couleurs. Cela permet d'avoir une meilleur vision des emplacements qui ne sont pas encore occupés.

Voici ce à quoi ressemblera l'élément lorsqu'il sera inséré dans la page :


```html
<person-details>
  <p slot="person-name">Dr. Shazaam</p>
  <span slot="person-age">Immortel</span>
  <span slot="person-occupation">Super-héros</span>
</person-details>
```

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

| Specification |
| --- |
| CSS Scoping Module Level 1 # slotted-pseudo |

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

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

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

* Les composants web
-moz-user-input
===============

**Non standard:** Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

**gecko 60:** 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.

Pour les applications Mozilla, la propriété **`-moz-user-input`** détermine si l'utilisateur peut effectuer une saisie sur l'élément (bien que rejetée, cette propriété a contribué à la construction de la propriété standard `user-input`.


```css
/\* Valeurs avec un mot-clé \*/
-moz-user-input: none;
-moz-user-input: enabled;
-moz-user-input: disabled;

/\* Valeurs globales \*/
-moz-user-input: inherit;
-moz-user-input: initial;
-moz-user-input: unset;
```


Pour les éléments qui acceptent la saisie par défaut (ex. les élémetns `<textarea>`), la valeur initiale de `-moz-user-input` sera `enabled`.

Syntaxe
-------

### Valeurs

`none`

L'élément ne réagit pas aux saisies de l'utilisateur et il ne prend jamais l'état `:active`.

`enabled`

L'utilisateur peut effectuer une saisie sur cet élément. Pour les boîtes de texte, c'est le comportement par défaut. **Cette valeur n'est plus prise en charge à partir de Firefox 60 (cf. bug Firefox 1405087).**

`disabled`

L'utilisateur ne peut pas effectuer de saisie sur cet élément (cela n'est pas équivalent à utiliser l'attribut `disabled` avec la valeur `true` car l'élément est dessiné normalement). **Cette valeur n'est plus prise en charge à partir de Firefox 60 (cf. bug Firefox 1405087).**

### Syntaxe formelle

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


```css
input.exemple {
  /\* L'utilisateur pourra sélectionner le texte
 mais ne pourra pas le modifier. \*/
  -moz-user-input: disabled;
}
```

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

Cette propriété est une propriété propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification. Une propriété similaire : `user-focus` a été proposée pour des brouillons de l'ancienne spécifications CSS3 pour les interfaces utilisateurs mais a été rejetée par le groupe de travail.

|  |  |
| --- | --- |
| Valeur initiale | `auto` |
| Applicabilité | tous les éléments |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

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

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

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

* `-moz-user-focus`
* `-moz-user-modify`
* `-moz-user-select` (en-US)
:disabled
=========

La pseudo-classe **`:disabled`** permet de cibler un élément désactivé. Un élément est désactivé s'il ne peut pas être activé (sélectionné, cliqué ou saisi) ou s'il ne peut pas recevoir le focus de l'utilisateur. L'élément possède également un état activé dans lequel il peut être sélectionné ou recevoir le focus.


```css
/\* Cible tous les champs de saisie texte \*/
/\* qui sont désactivés \*/
input[type="text"]:disabled {
  background: #ccc;
}
```

Syntaxe
-------

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

### CSS


```css
input[type="text"]:disabled {
  background: #ccc;
}
```

### HTML


```html
<form action="#">
  <fieldset>
    <legend>Adresse de livraison</legend>
    <input type="text" placeholder="Nom" />
    <input type="text" placeholder="Adresse" />
    <input type="text" placeholder="Code postal" />
  </fieldset>
  <fieldset id="facturation">
    <legend>Adresse de facturation</legend>
    <label for="facturation\_livraison"
 >Identique à l'adresse de livraison</label
 >
    <input
 type="checkbox"
 id="facturation\_livraison"
 onchange="javascript:toggleBilling()"
 checked />
    <br />
    <input type="text" placeholder="Nom" disabled />
    <input type="text" placeholder="Adresse" disabled />
    <input type="text" placeholder="Code postal" disabled />
  </fieldset>
</form>
```

### JavaScript


```js
function toggleBilling() {
  var billingItems = document.querySelectorAll(
    '#facturation input[type="text"]',
  );
  for (var i = 0; i < billingItems.length; i++) {
    billingItems[i].disabled = !billingItems[i].disabled;
  }
}
```

### Résultat

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

| Specification |
| --- |
| HTML Standard # selector-disabled |
| Selectors Level 4 # enableddisabled |

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

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

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

* `:enabled`