Confirmed users
295
edits
DevTools/CSSTips: Difference between revisions
→Localization
| Line 56: | Line 56: | ||
== Localization == | == Localization == | ||
* For margins, padding and borders, use start/end rather than left/right | * For margins, padding and borders, use start/end rather than left/right | ||
| Line 66: | Line 62: | ||
* 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) | ||
* For 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 == | == 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 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) | ||