Confirmed users
38
edits
Gaia/CSS Guidelines: Difference between revisions
→Use direction-sensitive rules: text-align: {start,end}
Ivanovpavel (talk | contribs) |
(→Use direction-sensitive rules: text-align: {start,end}) |
||
| (7 intermediate revisions by 3 users not shown) | |||
| Line 3: | Line 3: | ||
* Indent by two spaces. | * Indent by two spaces. | ||
* No (trailing spaces) spaces that appears at the end of a string. | * No (trailing spaces) spaces that appears at the end of a string. | ||
==Style== | |||
* Use lowercased-and-hyphen delimited classes and ids. | |||
==Units== | ==Units== | ||
| Line 31: | Line 34: | ||
.b2g, | .b2g, | ||
.gaia, | .gaia, | ||
. | .firefox-os { | ||
... | ... | ||
} | } | ||
| Line 114: | Line 117: | ||
color: #00ff00 /* HEX color - defined using the 6-character dash notation */ | color: #00ff00 /* HEX color - defined using the 6-character dash notation */ | ||
color: rgba( 34, 12, 64, 0.3); /* rgba(R,G,B,a) - using only for transparent colors */ | color: rgba( 34, 12, 64, 0.3); /* rgba(R,G,B,a) - using only for transparent colors */ | ||
} | |||
</pre> | |||
==Direction (RTL/LTR and BiDi)== | |||
Many UI elements are have to be mirrored for languages written Right-To-Left. This comes for free with flex-box and other inline element layouts. However, if you need to use positioning or other explicit styling and layout, here’s how you can make it easier. | |||
===Use the same specificity for LTR and RTL=== | |||
Rules that are direction-specific (e.g LTR) should have the same specificity as their RTL counterparts. Rules with an implicit direction should be made explicit using either the dir attribute selector (html[dir="ltr|rtl"]), or the :-moz-dir(rtl) pseudo-class. RTL and LTR -specific rules should always be grouped together in the same stylesheet to simplify maintenance. | |||
<pre> | |||
html[dir="ltr"] .foo { | |||
left: 0; | |||
} | |||
html[dir="rtl"] .foo { | |||
right: 0; | |||
} | |||
</pre> | |||
===Use direction-sensitive rules=== | |||
Many CSS rules that include a `left` or `right` keyword can be written with `start` or `end` instead: | |||
{| class="wikitable" style="width: 100%" | |||
|- | |||
! left/right !! begin/end !! browser compatibility | |||
|- | |||
|style="text-align: center" colspan="3"| text alignment | |||
|- | |||
| <code>text-align: left<br>text-align: right</code> || <code>[https://developer.mozilla.org/en-US/docs/Web/CSS/text-align text-align: start]<br>[https://developer.mozilla.org/en-US/docs/Web/CSS/text-align text-align: end]</code> || Chrome 1.0+, Safari 3.1+, Firefox 3.6+, Android, iOS <br> Not supported by Internet Explorer | |||
|- | |||
|style="text-align: center" colspan="3"| padding, margin, border | |||
|- | |||
| <code>padding-left<br>padding-right</code> || <code>[https://developer.mozilla.org/docs/Web/CSS/padding-inline-start padding-inline-start]<br>[https://developer.mozilla.org/docs/Web/CSS/padding-inline-end padding-inline-end]</code> || Firefox 41+ | |||
|- | |||
| <code>border-left<br>border-right</code> || <code>[https://developer.mozilla.org/docs/Web/CSS/border-inline-start border-inline-start]<br>[https://developer.mozilla.org/docs/Web/CSS/border-inline-end border-inline-end]</code> || Firefox 41+ | |||
|- | |||
| <code>margin-left<br>margin-right</code> || <code>[https://developer.mozilla.org/docs/Web/CSS/margin-inline-start margin-inline-start]<br>[https://developer.mozilla.org/docs/Web/CSS/margin-inline-end margin-inline-end]</code> || Firefox 41+ | |||
|- | |||
|style="text-align: center" colspan="3"| absolute positioning | |||
|- | |||
| <code>left<br>right</code> || <code>[https://developer.mozilla.org/docs/Web/CSS/offset-inline-start offset-inline-start]<br>[https://developer.mozilla.org/docs/Web/CSS/offset-inline-end offset-inline-end]</code> || Firefox 41+ | |||
|- | |||
|style="text-align: center" colspan="3"| float positioning | |||
|- | |||
| <code>float: left<br>float: right</code> || <code>[https://developer.mozilla.org/en-US/docs/Web/CSS/float float: inline-start]<br>[https://developer.mozilla.org/en-US/docs/Web/CSS/float float: inline-end]</code> || Firefox 45+ | |||
|} | |||
'''Warning:''' in most cases, you don’t want to apply these direction-sensitive rules to HTML elements carrying a <code>dir="auto"</code> attribute because the layout would be modified by the content direction. | |||
===margin, padding, border: do not use 4-value shorthands=== | |||
Beware of the shorthands on margin/padding/border rules: | |||
<pre> | |||
margin: 1rem; /* OK: start and end margins are set to 1rem */ | |||
margin: 1rem 2rem; /* OK: start and end margins are set to 2rem */ | |||
margin: 1rem 2rem 3rem; /* OK: start and end margins are set to 2rem */ | |||
margin: 1rem 2rem 3rem 4rem; /* direction-specific! */ | |||
</pre> | |||
Shorthands with 1, 2 or 3 values are BiDi-proof; shorthands with 4 values are not. | |||
As an example, rather than using: | |||
<pre> | |||
.myClass { | |||
padding: 1rem 2rem 3rem 4rem; | |||
} | |||
</pre> | |||
you should use: | |||
<pre> | |||
.myClass { | |||
padding: 1rem 2rem 3rem; | |||
padding-inline-start: 4rem; | |||
} | |||
</pre> | |||
or, if the target element has a <code>dir="auto"</code> attribute (or if your browser doesn’t support -inline-start): | |||
<pre> | |||
.myClass { | |||
padding: 1rem 2rem 3rem; | |||
} | |||
html[dir="ltr"] .myClass { | |||
padding-left: 4rem; | |||
} | |||
html[dir="rtl"] .myClass { | |||
padding-right: 4rem; | |||
} | } | ||
</pre> | </pre> | ||