32
edits
DevTools/CSSTips: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary |
No edit summary |
||
| Line 7: | Line 7: | ||
** ... or you can go to about:config and set <tt>intl.uidirection.en</tt> to rtl. | ** ... or you can go to about:config and set <tt>intl.uidirection.en</tt> to rtl. | ||
* For RTL compatibility, for margins, padding and borders, don't use <tt>*-left</tt> or <tt>*-right</tt> but <tt>*-start</tt> and <tt>*-end</tt>); | * For RTL compatibility, for margins, padding and borders, don't use <tt>*-left</tt> or <tt>*-right</tt> but <tt>*-start</tt> and <tt>*-end</tt>); | ||
* | * When there is no special RTL-aware property (eg. float: left|right) available, add the pseudo :-moz-locale-dir(ltr|rtl) | ||
* | * Remember 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); | |||
* 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 previous tip); | * 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 previous tip); | ||
* replace <tt>0px/0em/…</tt> with <tt>0</tt>; | * replace <tt>0px/0em/…</tt> with <tt>0</tt>; | ||