exu/configs

Fork 0

RealStickman ea279e52e5 Update firefox

2022-05-11 21:19:02 +02:00

13 KiB

Raw 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).

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
}

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.

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

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(Autoconfig), 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.

Onething 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 binded with C++ for performance like a treeview of bookmarks.
XUL's box model and DOM are different from HTML.

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

Available CSS features are also restricted.

Example of legacy documents that will help.

Another case.
Like <toolbar align="end"></toolbar>, attributes is set and CSS of same property may not be appplied. (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 the mozilla need real time changes, are using @media to handle it.

If project only use 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 */

13 KiB Raw Blame History