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

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.

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.
Hard coding according to selector priority is available, and both transitions and keyframes are available 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.

XUL

Sometimes firefox can use XUL that have been written and binded with C++ for performance like a treeview of bookmarks.

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.

7.2 KiB Raw Blame History