18 KiB

Raw Permalink Blame History

Restrictions

Table of Contents

Compatibility
Internals

Compatibility

Cross Platform

Different compatibility issues occur in Win7, Win8, Win10, KDE, Gnome, Mac, etc.

For example, The appearance of the context menu varies from platform to platform.

Consider compatibility as much as possible, but use dedicated media queries in special cases.

Even the implementation is also different like Context menu's image.
If you need to implement it in a variety of forms, make a sort of API using css var().

Problems that are not appearance: auto may require emulation like Win7, 8's menu active color.
Complex UI emulation is quite tricky. [Linux's Proton UI Library Chrome, Linux's Proton UI Library Content]

Bookmark menu is also similar example(code).

In the case of the Mac native menu, there may be a menu that cannot be displayed icon or added at the OS level.

Firefox Version

There may be changes that change by version of Firefox.

It's more frequent than your thought, and we need to respond to compatibility between Nightly and ESR versions.

This project is using SCSS to make a reusable compatible mixins.

@include OS($linux) {
  // Your CSS
}

@include Dark {
  // Your CSS
}

Main compatibility bugs

-moz-toolbar-prefers-color-scheme -> prefers-color-scheme #250
:root[lwtheme-mozlightdark] is removed #288
-moz-os-version -> -moz-platform #331
Breaking change with -moz-accent-color/-moz-accent-color-foreground -> AccentColor/AccentColorText #433
-moz-box to flex layout #670
Drop windows7 and windows8#744
- -moz-platform: windows-win7, -moz-platform: windows-win8, -moz-platform: windows-win10, -moz-windows-non-native-menus

Side Effect

Only CSS modifications can cause bugs that are hard to think of in the general web, such as the context menu not appearing.
Sometimes there are times when there is a really hard to understand. #503

Especially be careful when customizing XUL elements.
The following code will cause extension panels fail to open and trying to open them might even crash Firefox. (@MrOtherGuy reports)

#nav-bar {
  display: flex;
}

Info: #nav-bar is toolbar.

Another display: flex's side effect examples. #368 #372
After FF v107, breakage due to -moz-box may occur.

RTL

It can be detected using :-moz-locale-dir(rtl) on the interface(chrome) and :dir(rtl) on the content.

margin-inline and padding-inline works as desired, but background-position-x and translateX() should use the opposite values.

`-moz-accent-color`

I don't know the exact reason, but it can be a problem if it is not applied to CSS Variable. #437

Fork Browsers

Fork browsers have a different installation location (bash, powershell), and there may be a menu that Firefox does not have.

List of fork browsers supported by this project:

Add-ons

Web extentions

You can apply Web extentions's context menu icons.

At this time, we recommend that the explicit ID is set.
If not, an anonymous ID is created in the local, so you need a UUID replacer.

List of web extentions supported by this project:

Legacy Addons

We should consider Legacy addons, not web extentions.

Legacy addons can be loaded by Auto config's feature or bootstrapLoder and can directly manipulate the DOM structure and style. onemen/TabMixPlus#168

List of legacy addons supported by this project:

Tab Mix Plus

SCSS

Due to various compatibility and option dependency requirements, we are using a CSS preprocessor, SCSS.

-moz-document has been deprecated in SCSS, and displays a lot of warnings.

Unlike normal cases, this project works because it is at the UA sheet level, and we have to hide warnings to show other critical errors.

Internals

CSS Loading Order

User CSS (userChrome.css, userContent.css) is usually loaded first.

In many cases, overriding should be prevented with !important (Anti-pattern in general web), and side effects should also be considered. #11

DOM structure cannot be modified

It is possible with JS (Auto config), but there are security and configuration issues, so we should make the most of CSS.

::before and ::after can indirectly add CSS elements.

Many implementations using ::before, ::after.

For icons, list-style-image and background-image are available.

It is recommended to use list-style-image when a layout is provided for the image.
background-image may require many calculations to fit the layout.

You can use -moz-box-ordinal-group (-moz-box) and order (at flex) to change the order of the layout.
In experience, the detailed actions of -moz-box and flex are different, so tests are required.

Finally, it's time to respond to various states.

By default, attribute selectors is used, and sometimes hard coding according to selector specificity may be required.
If there is no state attributes, you can bypass by using both transitions and keyframes for animation.

Shadow DOM

Firefox actively uses shadow DOM internally.

To modify, it is often a roundabout approach or impossible to inherit.

One bypass method is to declare var() to shadow root.

Scrollbutton Padding
Audio, Video Player UI
Video Player Twoline UI: It is pretty difficult when the condition becomes complicated.

Another limitation of shadow DOM in user style is that you cannot use shadow DOM related selectors like :host and ::part.

XUL

Sometimes firefox can use XUL that have been written and bound with C++ for performance like a treeview of bookmarks.
XUL's box model and DOM are different from HTML.

There are a few appropriate documents, so we have to read the source code and work. (Ex. 1, 2)

Available CSS features are also restricted.

Examples of legacy documents that will help:

Another case.
Like <toolbar align="end"></toolbar>, attributes is set and CSS of same property may not be applied. (Ex. box-align: start)

Supports

@supports change in CSS is not detected in real time. (Caching after checking only once)

So a restart is required, and if Mozilla needs real time changes, they are using @media to handle it.

If project only uses pure CSS, we cannot add @media rules.

This restriction is also related to the Doc: Preference.md.

Namespace

In older codes, the following namespace is commonly seen:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

However, it is only applicable to XUL, so it is recommended to use with prefix.

@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");

/* Use */
xul|search-textbox {
  border: 2px solid red !important;
}
html|input {
  border: 2px solid green !important;
}

If you want to limit the coverage to some pages, you can use @-moz-document:

/* Main browser UI */
@-moz-document url("chrome://browser/content/browser.xhtml") {
  /* Your CSS */
}

/* Library UI */
@-moz-document url("chrome://browser/content/places/places.xhtml") {
  /* Your CSS */
}

/* PageInfo UI */
@-moz-document url("chrome://browser/content/pageinfo/pageInfo.xhtml") {
  /* Your CSS */
}

Import

There are a few caveats when you @import the CSS.
It's because of specification definition, not Firefox design, but to prevent some mistakes.

@import rule is not a nested statement. Therefore, it cannot be used inside conditional group at-rules.

/* Precede */
@import url("YourFile.css"); /* Works */

/* Nested */
@supports -moz-bool-pref("userChrome.test.pref") {
  @import url("AnotherFile.css"); /* Not Works */
}

Any @namespace rules must follow all @charset and @import rules, and precede all other at-rules and style declarations in a style sheet.

/* Before - Namespace */
@import url("YourFile.css"); /* Works */

/* Declare - Namespace */
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");

/* After - Namespace */
@import url("YourFile.css"); /* Not Works */

18 KiB Raw Permalink Blame History