CSS
css/logical-properties
Sites that run or may run right to left use logical properties (margin-inline-start, inset-inline-end), not left and right.
drobnaręcznefe-css-layout
Dlaczego
margin-left, padding-right, left and text-align: left describe the screen, not the text. When the page switches to dir="rtl", every one of them points the wrong way and needs an override, while logical properties follow the writing direction on their own.
Poprawka
Use margin-inline-start/-end, padding-inline, inset-inline-start, border-inline-end, text-align: start, inline-size and block-size. In a site that will only ever be left to right, logical properties are still a good default for new code; do not rewrite working code for it alone.
Przykłady
/* bad */
.icon { margin-right: 0.5rem; }
/* good */
.icon { margin-inline-end: 0.5rem; }Źródła
Fakty
- Identyfikator
css/logical-properties- Waga
- drobna
- Sprawdzanie
- ręczne ocenia człowiek; raport podaje to jako listę kontrolną
- Dotyczy plików
cssscssless- Uczy jej skill
fe-css-layoutCSS layout- Od wersji
- 0.1.0
Przeczytaj w terminalu
npx github:dawidolko/frontend-skills explain css/logical-properties