DevTools/CSSTips: Difference between revisions

DevTools/CSSTips (view source)

Revision as of 08:57, 24 November 2011

19 bytes removed , 24 November 2011

no edit summary

JoeWalker

Confirmed users

295

edits

@@ Line 85: / Line 85: @@
 [1] However there is probably a better way than using absolute positioning.
+== Localization ==
+Text Direction:
+* For margins, padding and borders, use start/end rather than left/right
+** Example: Use <tt>-moz-margin-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)
+* 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)
+Testing:
+* Use the [https://addons.mozilla.org/en-US/firefox/addon/force-rtl/ Force RTL extension]
+* Or go to about:config and set <tt>intl.uidirection.en</tt> to rtl
 == The Mozilla Environment ==
@@ Line 96: / Line 109: @@
 * Where a theme value doesn't fit, make sure you have buy-in from UX
-Lists of theme values
+Lists of theme values:
 * [https://developer.mozilla.org/en/CSS/color_value#Mozilla_System_Color_Extensions System Colors]
 * [https://developer.mozilla.org/en/CSS/font#Mozilla_Extensions System Fonts]
@@ Line 105: / Line 118: @@
 * Use <tt>:empty</tt> to match a node that doesn't have children
-== Localization ==
-Text Direction:
-* For margins, padding and borders, use start/end rather than left/right
-** Example: Use <tt>-moz-margin-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)
-* 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)
-Testing:
-* Use the [https://addons.mozilla.org/en-US/firefox/addon/force-rtl/ Force RTL extension]
-* Or go to about:config and set <tt>intl.uidirection.en</tt> to rtl
-== Code Smells ==
 * Usually, if <tt>margin</tt> or <tt>padding</tt> has 4 values, something is wrong. If the left and right values are asymmetrical, you're supposed to use <tt>-start</tt> and <tt>-end</tt>. If the values are symmetrical, so use only 3 values (see localization section)