Confirmed users
42
edits
DevTools/CSSTips: Difference between revisions
Jump to navigation
Jump to search
Modernize this page
(Updating page to be more accurate with latest code base) |
(Modernize this page) |
||
| Line 5: | Line 5: | ||
First, you can find existing DevTools CSS at https://dxr.mozilla.org/mozilla-central/source/browser/themes/shared. Here are some basic tips that can optimize reviews if you are changing CSS. | First, you can find existing DevTools CSS at https://dxr.mozilla.org/mozilla-central/source/browser/themes/shared. Here are some basic tips that can optimize reviews if you are changing CSS. | ||
* Avoid <tt>!important</tt> but if you have to use it, make sure it's obvious why you're using it (maybe with a comment) | * Avoid <tt>!important</tt> but if you have to use it, make sure it's obvious why you're using it (maybe with a comment) | ||
* Avoid magic numbers, prefer automatic sizing | * Avoid magic numbers, prefer automatic sizing | ||
| Line 18: | Line 17: | ||
CSS changes to the toolbox should generally be similar across platforms since they used a shared implementation, but there can still be differences worth checking out. Check major changes on Windows, OSX and Ubuntu. | CSS changes to the toolbox should generally be similar across platforms since they used a shared implementation, but there can still be differences worth checking out. Check major changes on Windows, OSX and Ubuntu. | ||
== Formatting == | == Formatting == | ||
We use 2-spaces indentation for the CSS. | |||
In general the formatting looks like this: | In general the formatting looks like this: | ||
selector, | selector, | ||
| Line 33: | Line 31: | ||
** Example: Use <tt>margin: 0;</tt>, not <tt>margin: 0px;</tt> | ** Example: Use <tt>margin: 0;</tt>, not <tt>margin: 0px;</tt> | ||
* Add a space after each comma, '''except''' within color functions | * Add a space after each comma, '''except''' within color functions | ||
** Example: <tt> | ** Example: <tt>linear-gradient(to bottom, black 1px, rgba(255,255,255,0.2) 1px)</tt> | ||
* Always add a space before <tt> !important</tt> | * Always add a space before <tt> !important</tt> | ||
* Assume <tt>="true"</tt> in attribute selectors | * Assume <tt>="true"</tt> in attribute selectors | ||
| Line 43: | Line 41: | ||
* lower-case-with-dashes is the most common | * lower-case-with-dashes is the most common | ||
* But camelCase is also used sometimes. It makes sense to first try to fit in with code around, and if there is doubt or if isn't anything to fit in with to use lower-case-with-dashes. | * But camelCase is also used sometimes. It makes sense to first try to fit in with code around, and if there is doubt or if isn't anything to fit in with to use lower-case-with-dashes. | ||
== Light and Dark theme support == | |||
DevTools support 2 different themes : the dark theme and the light theme. In order to support both, there are 2 class names available (theme-light and theme-dark). Here are some common practices to follow : | |||
* Use [https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors pre-defined CSS variables] instead of hardcoding colors when possible | |||
* If you need to support themes and the pre-defined variables don't fit, define a variable with your custom colors at the beginning of the CSS file, this avoids selector duplication in the code. | |||
Example : | |||
.theme-light { | |||
--some-variable-name: <color-for-light-theme>; | |||
} | |||
.theme-dark { | |||
--some-variable-name: <color-for-dark-theme>; | |||
} | |||
#myElement { | |||
background-color: var(--some-variable-name); | |||
} | |||
== HDPI support == | |||
In order to support retina displays and Windows DPI settings, it's recommended to use SVG since it keeps the CSS clean. However, if only 1x and 2x PNG assets are available, you can use this @media query to target HDPI : <tt>@media (min-resolution: 1.1dppx)</tt> | |||
== Performance == | == Performance == | ||
| Line 51: | Line 67: | ||
** Descendent selector should be avoided | ** Descendent selector should be avoided | ||
** If possible find ways to use '''only''' id selectors, class selectors and selector groups | ** If possible find ways to use '''only''' id selectors, class selectors and selector groups | ||
== Localization == | == Localization == | ||
Text Direction: | Text Direction: | ||
* For margins, padding and borders, use start/end rather than left/right | * For margins, padding and borders, use inline-start/inline-end rather than left/right | ||
** Example: Use <tt>- | ** Example: Use <tt>margin-inline-start: 3px;</tt> not <tt>margin-left: 3px</tt> | ||
* When there is no special RTL-aware property (eg. float: left|right) available, use the pseudo :-moz-locale-dir(ltr|rtl) | * For RTL-aware positioning (left/right), use <tt>offset-inline-start/end</tt> | ||
* When there is no special RTL-aware property (eg. float: left|right) available, use the pseudo :-moz-locale-dir(ltr|rtl) (for XUL files) or :-moz-dir(ltr|rtl) (for HTML files) | |||
* Remember that while a tab content's scrollbar still shows on the right in RTL, an overflow scrollbar will show on the left | * Remember that while a tab content's scrollbar still shows on the right in RTL, an overflow scrollbar will show on the left | ||
* Write "padding: 0 3px 4px;" instead of "padding: 0 3px 4px 3px;". This makes it more obvious that the padding is symmetrical (so RTL won't be an issue) | * Write "padding: 0 3px 4px;" instead of "padding: 0 3px 4px 3px;". This makes it more obvious that the padding is symmetrical (so RTL won't be an issue) | ||
| Line 105: | Line 85: | ||
Sometimes you have a style that you want to turn on and off. For example a tree twisty, a tab background, etc. The Mozilla way is to perform the toggle using an attribute rather than a class. So: | Sometimes you have a style that you want to turn on and off. For example a tree twisty, a tab background, etc. The Mozilla way is to perform the toggle using an attribute rather than a class. So: | ||
.tree-node[ | .tree-node { | ||
background-image: url(right-arrow.png); | |||
} | |||
.tree-node[open] { | |||
background-image: url(down-arrow.png); | background-image: url(down-arrow.png); | ||
} | } | ||
== Tips == | == Tips == | ||