path: root/files/fr/mozilla/add-ons/webextensions/user_interface/browser_styles/index.html

---
title: Styles des navigateurs
slug: Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles
translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles
---
<div>{{AddonSidebar}}</div>

<p>Certains composants de l'interface utilisateur - les <a href="/fr/Add-ons/WebExtensions/user_interface/Popups">fenêtres contextuelles</a>, <a href="/fr/Add-ons/WebExtensions/user_interface/Sidebars">fenêtres latérales</a>, et les <a href="/fr/Add-ons/WebExtensions/user_interface/Options_pages">pages d'options</a> du navigateur et de la page - sont spécifiés par votre extension de la même manière  :</p>

<ol>
 <li>créer un fichier HTML définissant la structure de l'élément d'interface utilisateur</li>
 <li>ajoutez une clé manifest.json (<code><a href="/fr/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code>, <code><a href="/fr/Add-ons/WebExtensions/manifest.json/page_action">page_action</a></code>, <code><a href="/fr/Add-ons/WebExtensions/manifest.json/sidebar_action">sidebar_action</a></code>, ou <code><a href="/fr/Add-ons/WebExtensions/manifest.json/options_ui">options_ui</a></code>) pointant vers ce fichier HTML.</li>
</ol>

<p>L'un des défis de cette approche est de styliser l'élément de telle sorte qu'il s'intègre au style du navigateur.<br>
 Pour aider à cela, les clés manifest.json keys incluent une propriété optionnelle supplémentaire : <code>browser_style</code>.<br>
 Si cela est inclus et défini sur <code>true</code>, votre document obtiendra une ou plusieurs feuilles de style supplémentaires qui le rendront cohérent avec l'interface utilisateur du navigateur et avec d'autres extensions utilisant la propriété <code>browser_style</code>.</p>

<p>Lorsque vous envisagez d'utiliser le <code>browser_style: true</code>, vous devez tester votre extension avec différents thèmes (intégrés ou AMO) pour vous assurer que l'interface d'extension se comporte comme vous l'attendez..</p>

<div class="blockIndicator warning">
<p>Quand <code>browser_style: true</code> est inclus dans le manifest de votre extension web, la sélection de texte dans l'interface utilisateur de votre extension est désactivée sauf dans les contrôles de saisie. Si cela pose un problème, incluez plutôt browser_style:false.</p>
</div>

<div class="blockIndicator note">
<p><strong>Google Chrome</strong> et <strong>Opera</strong> utilisent <code>chrome_style</code> au lieu de <code>browser_style</code>, donc si vous souhaitez les prendre en charge, vous devez ajouter les deux clés.</p>
</div>

<p>Dans Firefox, la feuille de style peut être vue sur <code>chrome://browser/content/extension.css</code>. La feuille de style peut être vue sur <code>chrome://browser/content/extension-mac.css</code> est également incluse sur OS X.</p>

<p>La plupart des styles sont automatiquement appliqués, mais certains éléments nécessitent que vous ajoutiez la classe  <code style="white-space: nowrap;">browser-style</code> non standard pour obtenir leur style, comme indiqué dans le tableau ci-dessous :</p>

<table class="fullwidth-table standard-table">
 <thead>
  <tr>
   <th scope="col">Element</th>
   <th scope="col">Exemple</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code><a href="/fr/docs/Web/HTML/Element/button">&lt;button&gt;</a></code></td>
   <td>
    <pre class="brush: html no-line-numbers">
&lt;button class="browser-style"&gt;Click me&lt;/button&gt;{{non-standard_inline}}</pre>
   </td>
  </tr>
  <tr>
   <td>
    <p><code><a href="/fr/docs/Web/HTML/Element/select">&lt;select&gt;</a></code></p>
   </td>
   <td>
    <pre class="brush: html no-line-numbers">
&lt;select class="browser-style" name="select"&gt;
  &lt;option value="value1"&gt;Value 1&lt;/option&gt;
  &lt;option value="value2" selected&gt;Value 2&lt;/option&gt;
  &lt;option value="value3"&gt;Value 3&lt;/option&gt;
&lt;/select&gt;</pre>
   </td>
  </tr>
  <tr>
   <td><code><a href="/fr/docs/Web/HTML/Element/textarea">&lt;textarea&gt;</a></code></td>
   <td>
    <pre class="brush: html no-line-numbers">
&lt;textarea class="browser-style"&gt;Write here&lt;/textarea&gt;</pre>
   </td>
  </tr>
  <tr>
   <td>Parent d'un <code><a href="/fr/docs/Web/HTML/Element/input">&lt;input&gt;</a></code></td>
   <td>
    <pre class="brush: html no-line-numbers">
&lt;div class="browser-style"&gt;
  &lt;input type="radio" id="op1" name="choices" value="op1"&gt;
  &lt;label for="op1"&gt;Option 1&lt;/label&gt;

  &lt;input type="radio" id="op2" name="choices" value="op2"&gt;
  &lt;label for="op2"&gt;Option 2&lt;/label&gt;
&lt;/div&gt;</pre>
   </td>
  </tr>
 </tbody>
</table>

<div class="blockIndicator note">
<p>Voir le {{bug(1465256)}} pour la suppression de cette exigence inutile.</p>
</div>

<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2>



<p>{{Compat("webextensions.browser_style")}}</p>

<h2 id="Composants_du_panneau_Firefox">Composants du panneau Firefox</h2>

<div class="overheadIndicator nonStandard">
<p><strong>Non-Standard</strong><br>
 Cette fonctionnalité est non standard et ne fonctionne que dans Firefox.</p>
</div>

<p>La feuille de style <code>chrome://browser/content/extension.css</code> contient également les styles des composants du panneau Firefox.</p>

<p>L'<a href="https://firefoxux.github.io/StyleGuide/#/navigation">ancien guide de style de Firefox</a> documente l'utilisation appropriée.</p>

<table class="fullwidth-table standard-table">
 <thead>
  <tr>
   <th scope="col">Element</th>
   <th scope="col">Exemple</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Header</td>
   <td>
    <pre class="brush: html">
&lt;header class="panel-section panel-section-header"&gt;
  &lt;div class="icon-section-header"&gt;&lt;img src="image.svg"/&gt;&lt;/div&gt;
  &lt;div class="text-section-header"&gt;Header&lt;/div&gt;
&lt;/header&gt;</pre>
   </td>
  </tr>
  <tr>
   <td>Footer</td>
   <td>
    <pre class="brush: html">
&lt;footer class="panel-section panel-section-footer"&gt;
  &lt;button class="panel-section-footer-button"&gt;Cancel&lt;/button&gt;
  &lt;div class="panel-section-footer-separator"&gt;&lt;/div&gt;
  &lt;button class="panel-section-footer-button default"&gt;Confirm&lt;/button&gt;
&lt;/footer&gt;</pre>
   </td>
  </tr>
  <tr>
   <td>Tabs</td>
   <td>
    <pre class="brush: html">
&lt;div class="panel-section panel-section-tabs"&gt;
  &lt;button class="panel-section-tabs-button selected"&gt;Tab&lt;/button&gt;
  &lt;div class="panel-section-tabs-separator"&gt;&lt;/div&gt;
  &lt;button class="panel-section-tabs-button"&gt;Tab&lt;/button&gt;
  &lt;div class="panel-section-tabs-separator"&gt;&lt;/div&gt;
  &lt;button class="panel-section-tabs-button"&gt;Tab&lt;/button&gt;
&lt;/div&gt;</pre>
   </td>
  </tr>
  <tr>
   <td>Form</td>
   <td>
    <pre class="brush: html">
&lt;div class="panel-section panel-section-formElements"&gt;
  &lt;div class="panel-formElements-item"&gt;
    &lt;label for="name01"&gt;Label:&lt;/label&gt;
    &lt;input type="text" value="Name" id="name01" /&gt;
  &lt;/div&gt;
  &lt;div class="panel-formElements-item"&gt;
    &lt;label for="picker01"&gt;Label:&lt;/label&gt;
    &lt;select id="picker01"&gt;
      &lt;option value="value1" selected="true"&gt;Dropdown&lt;/option&gt;
      &lt;option value="value2"&gt;List Item&lt;/option&gt;
      &lt;option value="value3"&gt;List Item&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  &lt;div class="panel-formElements-item"&gt;
    &lt;label for="placeholder01"&gt;Label:&lt;/label&gt;
    &lt;input type="text" placeholder="Placeholder" id="placeholder01" /&gt;
    &lt;button name="expander" class="expander"&gt;&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
   </td>
  </tr>
  <tr>
   <td>Menu</td>
   <td>
    <pre class="brush: html">
&lt;div class="panel-section panel-section-list"&gt;
  &lt;div class="panel-list-item"&gt;
    &lt;div class="icon"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;List Item&lt;/div&gt;
    &lt;div class="text-shortcut"&gt;Ctrl-L&lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="panel-list-item"&gt;
    &lt;div class="icon"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;List Item&lt;/div&gt;
    &lt;div class="text-shortcut"&gt;&lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="panel-section-separator"&gt;&lt;/div&gt;

  &lt;div class="panel-list-item disabled"&gt;
    &lt;div class="icon"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;Disabled List Item&lt;/div&gt;
    &lt;div class="text-shortcut"&gt;&lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="panel-section-separator"&gt;&lt;/div&gt;

  &lt;div class="panel-list-item"&gt;
    &lt;div class="icon"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;List Item&lt;/div&gt;
    &lt;div class="text-shortcut"&gt;&lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="panel-list-item"&gt;
    &lt;div class="icon"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;List Item&lt;/div&gt;
    &lt;div class="text-shortcut"&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
   </td>
  </tr>
 </tbody>
</table>

<h3 id="Exemple">Exemple</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;header class="panel-section panel-section-header"&gt;
  &lt;div class="icon-section-header"&gt;&lt;!-- An image goes here. --&gt;&lt;/div&gt;
  &lt;div class="text-section-header"&gt;Header&lt;/div&gt;
&lt;/header&gt;

&lt;div class="panel-section panel-section-list"&gt;
  &lt;div class="panel-list-item"&gt;
    &lt;div class="icon"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;List Item&lt;/div&gt;
    &lt;div class="text-shortcut"&gt;Ctrl-L&lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="panel-list-item"&gt;
    &lt;div class="icon"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;List Item&lt;/div&gt;
    &lt;div class="text-shortcut"&gt;&lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="panel-section-separator"&gt;&lt;/div&gt;

  &lt;div class="panel-list-item disabled"&gt;
    &lt;div class="icon"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;Disabled List Item&lt;/div&gt;
    &lt;div class="text-shortcut"&gt;&lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="panel-section-separator"&gt;&lt;/div&gt;

  &lt;div class="panel-list-item"&gt;
    &lt;div class="icon"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;List Item&lt;/div&gt;
    &lt;div class="text-shortcut"&gt;&lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="panel-list-item"&gt;
    &lt;div class="icon"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;List Item&lt;/div&gt;
    &lt;div class="text-shortcut"&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;footer class="panel-section panel-section-footer"&gt;
  &lt;button class="panel-section-footer-button"&gt;Cancel&lt;/button&gt;
  &lt;div class="panel-section-footer-separator"&gt;&lt;/div&gt;
  &lt;button class="panel-section-footer-button default"&gt;Confirm&lt;/button&gt;
&lt;/footer&gt;</pre>

<div class="hidden">
<h4 id="CSS">CSS</h4>

<pre class="brush: css">/* Global */
html,
body {
  background: white;
  box-sizing: border-box;
  color: #222426;
  cursor: default;
  display: flex;
  flex-direction: column;
  font: caption;
  margin: 0;
  padding: 0;
  -moz-user-select: none;
}

body * {
  box-sizing: border-box;
  text-align: start;
}

button.panel-section-footer-button,
button.panel-section-tabs-button {
  color: inherit;
  background-color: unset;
  font: inherit;
  text-shadow: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}

/* Panel Section */
.panel-section {
  display: flex;
  flex-direction: row;
}

.panel-section-separator {
  background-color: rgba(0, 0, 0, 0.15);
  min-height: 1px;
}

/* Panel Section - Header */
.panel-section-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  padding: 16px;
}

.panel-section-header &gt; .icon-section-header {
  background-position: center center;
  background-repeat: no-repeat;
  height: 32px;
  margin-right: 16px;
  position: relative;
  width: 32px;
}

.panel-section-header &gt; .text-section-header {
  align-self: center;
  font-size: 1.385em;
  font-weight: lighter;
}

/* Panel Section - List */
.panel-section-list {
  flex-direction: column;
  padding: 4px 0;
}

.panel-list-item {
  align-items: center;
  display: flex;
  flex-direction: row;
  height: 24px;
  padding: 0 16px;
}

.panel-list-item:not(.disabled):hover {
  background-color: rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.panel-list-item:not(.disabled):hover:active {
  background-color: rgba(0, 0, 0, 0.1);
}

.panel-list-item.disabled {
  color: #999;
}

.panel-list-item &gt; .icon {
  flex-grow: 0;
  flex-shrink: 0;
}

.panel-list-item &gt; .text {
  flex-grow: 10;
}

.panel-list-item &gt; .text-shortcut {
  color: #808080;
  font-family: "Lucida Grande", caption;
  font-size: .847em;
  justify-content: flex-end;
}

.panel-section-list .panel-section-separator {
  margin: 4px 0;
}

/* Panel Section - Footer */
.panel-section-footer {
  background-color: rgba(0, 0, 0, 0.06);
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  color: #1a1a1a;
  display: flex;
  flex-direction: row;
  height: 41px;
  margin-top: -1px;
  padding: 0;
}

.panel-section-footer-button {
  flex: 1 1 auto;
  height: 100%;
  margin: 0 -1px;
  padding: 12px;
  text-align: center;
}

.panel-section-footer-button &gt; .text-shortcut {
  color: #808080;
  font-family: "Lucida Grande", caption;
  font-size: .847em;
}

.panel-section-footer-button:hover {
  background-color: rgba(0, 0, 0, 0.06);
}

.panel-section-footer-button:hover:active {
  background-color: rgba(0, 0, 0, 0.1);
}

.panel-section-footer-button.default {
  background-color: #0996f8;
  box-shadow: 0 1px 0 #0670cc inset;
  color: #fff;
}

.panel-section-footer-button.default:hover {
  background-color: #0670cc;
  box-shadow: 0 1px 0 #005bab inset;
}

.panel-section-footer-button.default:hover:active {
  background-color: #005bab;
  box-shadow: 0 1px 0 #004480 inset;
}

.panel-section-footer-separator {
  background-color: rgba(0, 0, 0, 0.1);
  width: 1px;
  z-index: 99;
}</pre>

<hr>
<pre class="brush: css">/* Example specific – not part of chrome://browser/content/extension.css */
body {
  background: #fcfcfc;
  background-clip: padding-box;
  border: 1px solid rgba(24,26,27,.2);
  box-shadow: 0 3px 5px rgba(24,26,27,.1),0 0 7px rgba(24,26,27,.1);
  box-sizing: content-box;
  margin: 2em auto .5em;
  width: 384px;
}

html {
  min-height: 100vh;
}

html &gt; body {
  margin: auto;
}

.icon-section-header {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48Y2lyY2xlIGZpbGw9IiMzNjM5NTkiIGN4PSIxNSIgY3k9IjE1IiByPSIxNSIvPjwvc3ZnPg==");
}</pre>
</div>

<h4 id="Resultat">Resultat</h4>

<p>{{EmbedLiveSample("Exemple","640","360")}}</p>