From 3cf9bd8b9901006085d4e0f353b0d3b6b8f69d93 Mon Sep 17 00:00:00 2001 From: julieng Date: Mon, 15 Nov 2021 21:45:15 +0100 Subject: convert content to md --- .../manifest.json/theme_experiment/index.md | 215 ++++++++++++--------- 1 file changed, 121 insertions(+), 94 deletions(-) (limited to 'files/fr/mozilla/add-ons/webextensions/manifest.json/theme_experiment') diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/theme_experiment/index.md b/files/fr/mozilla/add-ons/webextensions/manifest.json/theme_experiment/index.md index 5bf66f5ad3..29fbf0babf 100644 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/theme_experiment/index.md +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/theme_experiment/index.md @@ -15,22 +15,22 @@ tags: translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/theme_experiment original_slug: Mozilla/Add-ons/WebExtensions/manifest.json/theme_experimentation --- -
{{AddonSidebar}}
+{{AddonSidebar}} - - - - - - - - - - - - + + + + + + + + + + + - - +} + + +
TypeObject
ObligatoireNon
Exemple - 
+
TypeObject
ObligatoireNon
Exemple + 
 "theme_experiment": {
   "stylesheet": "style.css",
   "colors": {
@@ -43,119 +43,146 @@ original_slug: Mozilla/Add-ons/WebExtensions/manifest.json/theme_experimentation
     "toolbar_image_alignment":
     "--toolbar-bgalignment"
   }
-}
-
-

Cette clé permet de définir les propriétés de la clé expérimentale de theme pour l'interface Firefox. Ces expériences sont un précurseur pour proposer de nouvelles fonctionnalités thématiques à inclure dans Firefox. L'expérimentation se fait par:

+Cette clé permet de définir les propriétés de la clé expérimentale de [`theme`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme) pour l'interface Firefox. Ces expériences sont un précurseur pour proposer de nouvelles fonctionnalités thématiques à inclure dans Firefox. L'expérimentation se fait par: - +- créer une feuille de style qui définit les correspondances entre les sélecteurs CSS internes pour les éléments d'interface utilisateur Firefox et les variables CSS arbitraires. Les variables CSS sont ensuite mappées dans les objets `colors`, `images`, et `properties` avec les nouvelles propriétés de clé de `theme`. +- (sans feuille de style) en utilisant `colors`, `images`, et `properties` pour mapper les sélecteurs CSS internes de Firefox, tels que `--arrowpanel-dimmed` vers les nouvelles propriétés de clé de `theme` key properties. Cette option limite l'expérimentation aux composants d'interface utilisateur associés à une variable CSS intégrée. -

Pour découvrir les sélecteurs CSS des éléments de l'interface utilisateur Firefox ou des variables CSS internes de Firefox, utilise la boite à outils du navigateur.

+Pour découvrir les sélecteurs CSS des éléments de l'interface utilisateur Firefox ou des variables CSS internes de Firefox, utilise la [boite à outils du navigateur](/fr/docs/Outils/Boîte_à_outils_du_navigateur). -
-

Note : Cette clé est uniquement disponible pour une utilisation dans les canaux Firefox Developer Edition et Firefox Nightly et nécessite l'activation de la préférence extensions.legacy.enabled.

-
+> **Note :** Cette clé est uniquement disponible pour une utilisation dans les canaux Firefox Developer Edition et Firefox Nightly et nécessite l'activation de la préférence `extensions.legacy.enabled`. -
-

Attention : Cette fonctionnalité est expérimentale et peut être sujette à modification.

-
+> **Attention :** Cette fonctionnalité est expérimentale et peut être sujette à modification. -

Syntaxe

+## Syntaxe -

La clé theme_experiment est un objet qui prend les propriétés suivantes :

+La clé theme_experiment est un objet qui prend les propriétés suivantes : - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomTypeDescription
stylesheetString -

Facultatif

- -

Nom d'une feuille de style fournissant le mappage des sélecteurs CSS des éléments de l'interface Firefox aux variables CSS.

-
imagesObject -

Facultatif

- -

Mappings des variables CSS (telles que définies dans Firefox ou par la feuille de style définie dans la stylesheet) aux noms de propriétés images à utiliser dans la clé theme.

-
colorsObject -

Facultatif

- -

Mappings des variables CSS (telles que définies dans Firefox ou par la feuille de style définie dans la stylesheet) aux noms de propriétés colors à utiliser dans la clé theme.

-
propertiesObject -

Facultatif

- -

Mappings des variables CSS (telles que définies dans Firefox ou par la feuille de style définie dans la stylesheet) aux noms de propriétés properties à utiliser dans la clé theme.

-
NomTypeDescription
stylesheetString +

Facultatif

+

+ Nom d'une feuille de style fournissant le mappage des sélecteurs CSS + des éléments de l'interface Firefox aux variables CSS. +

+
imagesObject +

Facultatif

+

+ Mappings des variables CSS (telles que définies dans Firefox ou par la + feuille de style définie dans la stylesheet) aux noms de + propriétés images à utiliser dans la clé + theme. +

+
colorsObject +

Facultatif

+

+ Mappings des variables CSS (telles que définies dans Firefox ou par la + feuille de style définie dans la stylesheet) aux noms de + propriétés colors à utiliser dans la clé + theme. +

+
propertiesObject +

Facultatif

+

+ Mappings des variables CSS (telles que définies dans Firefox ou par la + feuille de style définie dans la stylesheet) aux noms de + propriétés properties à utiliser dans la clé + theme. +

+
-

Exemples

+## Exemples -

Ces exemples utilisent une feuille de style appelée style.css pour permettre de définir une couleur pour le bouton de recharge du navigateur dans la clé theme.

+Ces exemples utilisent une feuille de style appelée `style.css` pour permettre de définir une couleur pour le bouton de recharge du navigateur dans la clé [`theme`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme). -

La feuille de style définit :

+La feuille de style définit : -
#reload-button {
+```css
+#reload-button {
   fill: var(--reload-button-color);
 }
-
+``` -

où #reload-button est le sélecteur CSS interne de Firefox pour le bouton reload et  --reload-button-color est un nom arbitraire..

+où `#reload-button` est le sélecteur CSS interne de Firefox pour le bouton reload et  `--reload-button-color` est un nom arbitraire.. -

Dans le fichier manifest.json, --reload-button-color est alors mappé au nom à utiliser dans la propriété theme colors :

+Dans le fichier `manifest.json`, `--reload-button-color` est alors mappé au nom à utiliser dans la propriété `theme` `colors` : -
"theme_experiment": {
+```json
+"theme_experiment": {
   "stylesheet": "style.css",
   "colors": {
     "reload_button": "--reload-button-color"
   }
 }
-
+``` -

L'argument reload_button est alors utilisé de la même manière que n'importe quelle autre propriété de theme .

+L'argument `reload_button` est alors utilisé de la même manière que n'importe quelle autre propriété de `theme` . -
"theme": {
+```json
+"theme": {
   "colors": {
     "reload_button": "orange"
   }
 }
-
+``` -

Ceci a pour effet de rendre l'icône de recharge orange.

- +Ceci a pour effet de rendre l'icône de recharge orange. +![](theme_experiment.png) -

Cette propriété peut également être utilisée dans browser.theme.update(). images et  properties travaillent de la même manière que colors.

+Cette propriété peut également être utilisée dans `browser.theme.update()`. `images` et  `properties` travaillent de la même manière que `colors`. -

Compatibilité du navigateur

+## Compatibilité du navigateur -

{{Compat("webextensions.manifest.theme_experiment")}}

+{{Compat("webextensions.manifest.theme_experiment")}} -- cgit v1.2.3-54-g00ecf