mdn · Josh-Cena · Mar 22, 2026 · Mar 21, 2026 · Mar 22, 2026 · Mar 22, 2026
@@ -6,16 +6,19 @@ Addy
 Adham
 Adhemar
 Adilah
+Aisyah
 Akhgari
 alastairc
 Aldous
 Alexa
 Alman
+Amara
 Amit
 Amorim
 Amstelvar
 Amélie
 Anand
+Ananya
 ANDI
 Andreas
 Andreessen
@@ -27,6 +30,7 @@ Ansyari
 Apapou
 Aptana
 Araneae
+Arjun
 Arkanoid
 Artur
 Arun
@@ -93,6 +97,7 @@ Cassini
 Caterina
 caugner
 cdxgen
+Chaiyaporn
 Chakra
 Chamakh
 Chimero
@@ -140,6 +145,7 @@ Dedreux
 Deepti
 Deke
 Delaville
+Demir
 Denicola
 DeSandro
 Desaulniers
@@ -234,12 +240,15 @@ Grigsby
 Grissom
 Groff
 Grosso
+Gruber
 GSAP
 Guildford
+Haddad
 Haile
 Hamish
 hamishwillee
 Haml
+Hassan
 Haverbeke
 Headsight
 Hemiptera
@@ -249,6 +258,7 @@ Hickson
 Hidde
 Highrise
 Hildy
+Hiroshi
 hmatrjp
 Hobday
 hochan
@@ -275,7 +285,9 @@ Ionos
 Irena
 ITCSS
 ITEC
+Ivanova
 Jada
+Jakub
 Jalkhov
 jamiedoe
 Janc
@@ -304,6 +316,7 @@ Kadlec
 Kahlo
 Kaku
 Kang
+Kanya
 Kaply
 Karmadrome
 KASI
@@ -332,6 +345,7 @@ Koen
 Kokoro
 Konva
 Kravets
+Kwame
 Kyouko
 Kütük
 Laravel
@@ -369,8 +383,10 @@ Mapquest
 mapsort
 marcelozarate
 Marcotte
+Mariam
 Marijn
 Masayuki
+Mateo
 Mathoid
 Matomo
 Matroska
@@ -384,6 +400,7 @@ McNally
 McVerry
 Megalosaurus
 Menard
+Mensah
 Mercure
 Merkle
 mfuji
@@ -431,6 +448,7 @@ Neocities
 Nixpacks
 Noida
 Norah
+Novak
 Nurek
 Nuxt
 Nyman
@@ -443,6 +461,7 @@ Odelola
 Odenwald
 Oeschger
 Oikarinen
+Okafor
 Oleksii
 Oliveira
 olliej
@@ -471,9 +490,11 @@ Platane
 Pogany
 Poki
 Polycom
+Popescu
 potappo
 Powerbook
 Powermapper
+Prasetyo
 Prateek
 Presskit
 Prisca
@@ -485,6 +506,7 @@ Quora
 rachelandrew
 Radev
 Radimir
+Rahman
 Ramesh
 Rapp
 Rauschmayer
@@ -511,6 +533,7 @@ Ryuno
 Sagat
 Saionaro
 Sakura
+Salah
 Salame
 Salva
 Sandrina
@@ -573,6 +596,7 @@ Symfony
 Szewinska
 Tabliss
 Tamaran
+Tanaka
 Tanx
 Techopedia
 Tegra
@@ -600,6 +624,7 @@ Trustwave
 twgl
 Usain
 usrsctp
+Valentina
 Vallejoanderson
 Vanderheiden
 Vandermonde
@@ -657,6 +682,7 @@ Yslow
 YubiKey
 Yuki
 Yura
+Yusuf
 Zakas
 Zakirt
 Zangief

@@ -405,9 +405,9 @@ After the last two sections, the final updated state of our `<select>` is render
 
 {{EmbedLiveSample("full-render", "100%", "410px")}}
 
-## Styling optgroups
+## Styling optgroup elements
 
-The default styling of {{htmlelement("optgroup")}} elements in customizable selects is the same as in classic `<select>` elements — bolded and indented less than the contained options. In customizable selects, however, optgroups behave just like any other block-level container, and can be styled as such. In addition, the {{htmlelement("legend")}} element is allowed as a child of `<optgroup>`, to provide a label that is easy to target and style. This replaces any text set in the `<optgroup>` element's `label` attribute, and it has the same semantics.
+The default styling of {{htmlelement("optgroup")}} elements in customizable selects is the same as in classic `<select>` elements — bolded and indented less than the contained options. In customizable selects, however, option groups behave just like any other block-level container, and can be styled as such. In addition, the {{htmlelement("legend")}} element is allowed as a child of `<optgroup>`, to provide a label that is easy to target and style. This replaces any text set in the `<optgroup>` element's `label` attribute, and it has the same semantics.
 
 Let's look at a basic example. Our HTML looks like this:
 
@@ -429,7 +429,7 @@ Let's look at a basic example. Our HTML looks like this:
 </select>
 ```
 
-We start our CSS by styling the `<optgroup>` elements themselves. These are mostly rudimentary styles to make the optgroups look like containers for their descendant `<option>` elements. We've given them some {{cssxref("margin-top")}} to put some space between each optgroup, and between the top optgroup and the select button.
+We start our CSS by styling the `<optgroup>` elements themselves. These are mostly rudimentary styles to make the optgroup elements look like containers for their descendant `<option>` elements. We've given them some {{cssxref("margin-top")}} to put some space between each optgroup, and between the top optgroup and the select button.
 
 ```css hidden live-sample___optgroup-example
 * {

@@ -425,7 +425,7 @@ In a real site you will probably pull in an up-to-date contacts list from a serv
 ```js
 const contacts = [
   { name: "Aisha Khan", selected: false },
-  ...
+  // …
 ];
 ```
 

@@ -110,26 +110,24 @@ The `action` key is an object that may have any of these properties, all optiona
     > [!NOTE]
     > Alternatively, you can specify an SVG icon in `default_icon` and use a media query on `prefers-color-scheme` to update the icon for light and dark themes. For example:
     >
-    > ```html
-    > <style>
+    > ```css
+    > #outside {
+    >   fill: black;
+    > }
+    > #inside {
+    >   fill: red;
+    > }
+    > @media (prefers-color-scheme: dark) {
     >   #outside {
-    >     fill: black;
+    >     fill: white;
     >   }
     >   #inside {
-    >     fill: red;
-    >   }
-    >   @media (prefers-color-scheme: dark) {
-    >     #outside {
-    >       fill: white;
-    >     }
-    >     #inside {
-    >       fill: black;
-    >     }
+    >     fill: black;
     >   }
-    > </style>
+    > }
     > ```
     >
-    > For more information, see the [themed-icons](https://github.com/mdn/webextensions-examples/tree/master/themed-icons) example.
+    > For more information, see the [themed-icons](https://github.com/mdn/webextensions-examples/tree/main/themed-icons) example.
 
 ## Choosing icon sizes
 

@@ -128,26 +128,24 @@ The `browser_action` key is an object that may have any of the following propert
     > [!NOTE]
     > Alternatively, you can specify an SVG icon in `default_icon` and use a media query on `prefers-color-scheme` to update the icon for light and dark themes. For example:
     >
-    > ```html
-    > <style>
+    > ```css
+    > #outside {
+    >   fill: black;
+    > }
+    > #inside {
+    >   fill: red;
+    > }
+    > @media (prefers-color-scheme: dark) {
     >   #outside {
-    >     fill: black;
+    >     fill: white;
     >   }
     >   #inside {
-    >     fill: red;
-    >   }
-    >   @media (prefers-color-scheme: dark) {
-    >     #outside {
-    >       fill: white;
-    >     }
-    >     #inside {
-    >       fill: black;
-    >     }
+    >     fill: black;
     >   }
-    > </style>
+    > }
     > ```
     >
-    > For more information, see the [themed-icons](https://github.com/mdn/webextensions-examples/tree/master/themed-icons) example.
+    > For more information, see the [themed-icons](https://github.com/mdn/webextensions-examples/tree/main/themed-icons) example.
 
 ## Choosing icon sizes
 

@@ -71,26 +71,24 @@ You can use SVG, and the browser scales your icon appropriately. There are two c
 
 You can use a media query on `prefers-color-scheme` to update the icon for light and dark themes. For example:
 
-```html
-<style>
+```css
+#outside {
+  fill: black;
+}
+#inside {
+  fill: red;
+}
+@media (prefers-color-scheme: dark) {
   #outside {
-    fill: black;
+    fill: white;
   }
   #inside {
-    fill: red;
-  }
-  @media (prefers-color-scheme: dark) {
-    #outside {
-      fill: white;
-    }
-    #inside {
-      fill: black;
-    }
+    fill: black;
   }
-</style>
+}
 ```
 
-For more information, see the [themed-icons](https://github.com/mdn/webextensions-examples/tree/master/themed-icons) example.
+For more information, see the [themed-icons](https://github.com/mdn/webextensions-examples/tree/main/themed-icons) example.
 
 > [!NOTE]
 > Chromium-based browsers don't support this feature. See [Chromium bug 29683](https://crbug.com/29683).

@@ -86,26 +86,24 @@ The `page_action` key is an object that may have any of three properties, all op
 
     You can use an SVG icon. You can also have the icon adapt to light and dark themes using a media query on `prefers-color-scheme`. For example:
 
-    ```html
-    <style>
+    ```css
+    #outside {
+      fill: black;
+    }
+    #inside {
+      fill: red;
+    }
+    @media (prefers-color-scheme: dark) {
       #outside {
-        fill: black;
+        fill: white;
       }
       #inside {
-        fill: red;
-      }
-      @media (prefers-color-scheme: dark) {
-        #outside {
-          fill: white;
-        }
-        #inside {
-          fill: black;
-        }
+        fill: black;
       }
-    </style>
+    }
     ```
 
-    For more information, see the [themed-icons](https://github.com/mdn/webextensions-examples/tree/master/themed-icons) example.
+    For more information, see the [themed-icons](https://github.com/mdn/webextensions-examples/tree/main/themed-icons) example.
 
     > [!NOTE]
     > An implicit CSS filter applies to SVG icons in dark UI themes. This filter will be deactivated in Firefox Desktop version 152 ([Firefox bug 2016509](https://bugzil.la/2016509)). You can test SVG icons with the CSS filter disabled by creating a boolean `about:config` preference called `extensions.webextensions.pageActionIconDarkModeFilter.enabled` and setting it to `false`. The filter is deactivated by default in Firefox Desktop Nightly from 149.

@@ -82,7 +82,7 @@ You can change any of the page action properties programmatically using the [`pa
 
 ## Icons
 
-You can use bitmap image formats, such as PNG, or provide SVG icons. If you use an SVG icon, you can use a media query on `prefers-color-scheme` to update the icon for light and dark themes. For more information, see [`"page_action"` `"default_icon"`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action#default_icon) and the [themed-icons](https://github.com/mdn/webextensions-examples/tree/master/themed-icons) example.
+You can use bitmap image formats, such as PNG, or provide SVG icons. If you use an SVG icon, you can use a media query on `prefers-color-scheme` to update the icon for light and dark themes. For more information, see [`"page_action"` `"default_icon"`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action#default_icon) and the [themed-icons](https://github.com/mdn/webextensions-examples/tree/main/themed-icons) example.
 
 > [!NOTE]
 > An implicit CSS filter applies to SVG icons in dark UI themes. This filter will be deactivated in Firefox Desktop version 152 ([Firefox bug 2016509](https://bugzil.la/2016509)). You can test SVG icons with the CSS filter disabled by creating a boolean `about:config` preference called `extensions.webextensions.pageActionIconDarkModeFilter.enabled` and setting it to `false`. The filter is deactivated by default in Firefox Desktop Nightly from 149.
@@ -94,4 +94,4 @@ For details on how to create icons to use with your page action, see [Iconograph
 The [webextensions-examples](https://github.com/mdn/webextensions-examples) repository on GitHub includes the:
 
 - [chill-out](https://github.com/mdn/webextensions-examples/tree/main/chill-out) example, which implements a page action without a popup.
-- [themed-icons](https://github.com/mdn/webextensions-examples/tree/master/themed-icons) example, which shows how an SVG page action icon can respond to the light and dark themes in the browser UI.
+- [themed-icons](https://github.com/mdn/webextensions-examples/tree/main/themed-icons) example, which shows how an SVG page action icon can respond to the light and dark themes in the browser UI.
@@ -50,7 +50,7 @@ You can change many of the browser action properties programmatically using:
 
 If you don't specify `"default_icon"`, the extension icon is used. If the extension doesn't specify an icon, the default web extension puzzle piece icon is used. If `"default_title"` isn't specified, the extension name is used.
 
-You can provide icons for light and dark UI themes using the `"theme_icons"` property or use a media query on `prefers-color-scheme` in an SVG icon. For more information, see [`"browser_action"` `"theme_icons"`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action#theme_icons) or [`"action"` `"theme_icons"`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/action#theme_icons), and the [themed-icons](https://github.com/mdn/webextensions-examples/tree/master/themed-icons) example.
+You can provide icons for light and dark UI themes using the `"theme_icons"` property or use a media query on `prefers-color-scheme` in an SVG icon. For more information, see [`"browser_action"` `"theme_icons"`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action#theme_icons) or [`"action"` `"theme_icons"`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/action#theme_icons), and the [themed-icons](https://github.com/mdn/webextensions-examples/tree/main/themed-icons) example.
 
 For details on how to create icons to use with your browser action, see [Iconography](https://acorn.firefox.com/latest/foundations/styles/iconography-QEDMXQqj) in the [Acorn Design System](https://acorn.firefox.com/latest) documentation.
 

@@ -133,7 +133,7 @@ Firefox 149 is the current [Beta version of Firefox](https://www.firefox.com/en-
     ([Firefox bug 1993037](https://bugzil.la/1993037))
 - Adds support for `tabId` as a top-level parameter in {{WebExtAPIRef("action.isEnabled")}} and {{WebExtAPIRef("browserAction.isEnabled")}}. This change provides for compatibility with the Chrome implementation of `action.isEnabled`. ([Firefox bug 2013477](https://bugzil.la/2013477))
 - A user gesture is no longer required for {{WebExtAPIRef("action.openPopup")}} and {{WebExtAPIRef("browserAction.openPopup")}} to open a popup. This feature was available behind the `extensions.openPopupWithoutUserGesture.enabled` preference from Firefox 108. This change aligns Firefox's behavior with Chrome and Safari. ([Firefox bug 1799344](https://bugzil.la/1799344))
-- If `winedowId` is passed in {{WebExtAPIRef("action.openPopup")}} or {{WebExtAPIRef("browserAction.openPopup")}}, the window must be focused (active) for the popup to open. To open a popup in an unfocused window {{WebExtAPIRef("windows.update","windows.update(windowId, { focused: true })")}} must be called first. This change aligns Firefox behavior with Chrome. ([Firefox bug 2011516](https://bugzil.la/2011516))
+- If `windowId` is passed in {{WebExtAPIRef("action.openPopup")}} or {{WebExtAPIRef("browserAction.openPopup")}}, the window must be focused (active) for the popup to open. To open a popup in an unfocused window {{WebExtAPIRef("windows.update","windows.update(windowId, { focused: true })")}} must be called first. This change aligns Firefox behavior with Chrome. ([Firefox bug 2011516](https://bugzil.la/2011516))
 
 <!-- ### Removals -->
-Original file line number
+Diff line change
@@ Expand Up @@
     ```js
     const contacts = [
       { name: "Aisha Khan", selected: false },
-      ...
+      // …
     ];
     ```
@@ Expand Down @@