useLogicalProperties (CSS)
Language CSS
Summary
Section titled “Summary”- Rule available since:
v2.5.15 - Diagnostic Category:
lint/nursery/useLogicalProperties - This rule has an unsafe fix.
- The default severity of this rule is warning.
How to configure
Section titled “How to configure”{ "linter": { "rules": { "nursery": { "useLogicalProperties": "error" } } }}Description
Section titled “Description”Prefer logical CSS properties over physical properties.
Physical properties such as left, margin-left, and width describe fixed directions or
dimensions. Logical properties such as inset-inline-start, margin-inline-start, and
inline-size adapt when text runs right to left or uses a vertical writing mode.
Examples
Section titled “Examples”Invalid
Section titled “Invalid”p { width: 100%;}code-block.css:2:3 lint/nursery/useLogicalProperties FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ Use logical CSS properties over physical ones.
1 │ p {
> 2 │ width: 100%;
│ ^^^^^
3 │ }
4 │
ℹ Logical properties adapt better to different writing modes and layout directions.
ℹ Replace width with inline-size.
ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
ℹ Unsafe fix: Use the logical CSS replacement.
1 1 │ p {
2 │ - ··width:·100%;
2 │ + ··inline-size:·100%;
3 3 │ }
4 4 │
p { top: 0;}code-block.css:2:3 lint/nursery/useLogicalProperties FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ Use logical CSS properties over physical ones.
1 │ p {
> 2 │ top: 0;
│ ^^^
3 │ }
4 │
ℹ Logical properties adapt better to different writing modes and layout directions.
ℹ Replace top with inset-block-start.
ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
ℹ Unsafe fix: Use the logical CSS replacement.
1 1 │ p {
2 │ - ··top:·0;
2 │ + ··inset-block-start:·0;
3 3 │ }
4 4 │
p { margin-left: 1rem;}code-block.css:2:3 lint/nursery/useLogicalProperties FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ Use logical CSS properties over physical ones.
1 │ p {
> 2 │ margin-left: 1rem;
│ ^^^^^^^^^^^
3 │ }
4 │
ℹ Logical properties adapt better to different writing modes and layout directions.
ℹ Replace margin-left with margin-inline-start.
ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
ℹ Unsafe fix: Use the logical CSS replacement.
1 1 │ p {
2 │ - ··margin-left:·1rem;
2 │ + ··margin-inline-start:·1rem;
3 3 │ }
4 4 │
p { border-left: 1px solid;}code-block.css:2:3 lint/nursery/useLogicalProperties FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ Use logical CSS properties over physical ones.
1 │ p {
> 2 │ border-left: 1px solid;
│ ^^^^^^^^^^^
3 │ }
4 │
ℹ Logical properties adapt better to different writing modes and layout directions.
ℹ Replace border-left with border-inline-start.
ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
ℹ Unsafe fix: Use the logical CSS replacement.
1 1 │ p {
2 │ - ··border-left:·1px·solid;
2 │ + ··border-inline-start:·1px·solid;
3 3 │ }
4 4 │
p { float: left;}code-block.css:2:10 lint/nursery/useLogicalProperties FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ Use logical CSS values over physical ones.
1 │ p {
> 2 │ float: left;
│ ^^^^
3 │ }
4 │
ℹ Logical properties adapt better to different writing modes and layout directions.
ℹ Replace left with inline-start.
ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
ℹ Unsafe fix: Use the logical CSS replacement.
1 1 │ p {
2 │ - ··float:·left;
2 │ + ··float:·inline-start;
3 3 │ }
4 4 │
p { text-align: right;}code-block.css:2:15 lint/nursery/useLogicalProperties FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ Use logical CSS values over physical ones.
1 │ p {
> 2 │ text-align: right;
│ ^^^^^
3 │ }
4 │
ℹ Logical properties adapt better to different writing modes and layout directions.
ℹ Replace right with end.
ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
ℹ Unsafe fix: Use the logical CSS replacement.
1 1 │ p {
2 │ - ··text-align:·right;
2 │ + ··text-align:·end;
3 3 │ }
4 4 │
p { justify-content: left;}code-block.css:2:20 lint/nursery/useLogicalProperties ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ Use logical CSS values over physical ones.
1 │ p {
> 2 │ justify-content: left;
│ ^^^^
3 │ }
4 │
ℹ Logical properties adapt better to different writing modes and layout directions.
ℹ Choose a logical alignment value based on the layout axis.
ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
p { inline-size: anchor-size(width);}code-block.css:2:28 lint/nursery/useLogicalProperties FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ Use a logical size in anchor-size().
1 │ p {
> 2 │ inline-size: anchor-size(width);
│ ^^^^^
3 │ }
4 │
ℹ Logical properties adapt better to different writing modes and layout directions.
ℹ Replace width with self-inline.
ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
ℹ Unsafe fix: Use the logical CSS replacement.
1 1 │ p {
2 │ - ··inline-size:·anchor-size(width);
2 │ + ··inline-size:·anchor-size(self-inline);
3 3 │ }
4 4 │
p { inset-block-start: anchor(bottom);}code-block.css:2:29 lint/nursery/useLogicalProperties FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ Use a logical side in anchor().
1 │ p {
> 2 │ inset-block-start: anchor(bottom);
│ ^^^^^^
3 │ }
4 │
ℹ Logical properties adapt better to different writing modes and layout directions.
ℹ Replace bottom with end.
ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
ℹ Unsafe fix: Use the logical CSS replacement.
1 1 │ p {
2 │ - ··inset-block-start:·anchor(bottom);
2 │ + ··inset-block-start:·anchor(end);
3 3 │ }
4 4 │
p { inline-size: 100%; inset-block-start: 0; margin-inline-start: 1rem; border-inline-start: 1px solid; float: inline-start; text-align: end; justify-content: start; inline-size: anchor-size(self-inline); block-size: anchor-size(self-block); inset-block-start: anchor(end);}Options
Section titled “Options”direction
Section titled “direction”Sets the text direction used to replace left and right properties. Use "ltr" for
left-to-right text or "rtl" for right-to-left text. Defaults to "ltr".
{ "linter": { "rules": { "nursery": { "useLogicalProperties": { "level": "on", "options": { "direction": "rtl" } } } } }}Invalid
Section titled “Invalid”p { margin-left: 1rem;}code-block.css:2:3 lint/nursery/useLogicalProperties FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ Use logical CSS properties over physical ones.
1 │ p {
> 2 │ margin-left: 1rem;
│ ^^^^^^^^^^^
3 │ }
4 │
ℹ Logical properties adapt better to different writing modes and layout directions.
ℹ Replace margin-left with margin-inline-end.
ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
ℹ Unsafe fix: Use the logical CSS replacement.
1 1 │ p {
2 │ - ··margin-left:·1rem;
2 │ + ··margin-inline-end:·1rem;
3 3 │ }
4 4 │
p { margin-inline-end: 1rem;}Related links
Section titled “Related links”Sponsored by
Copyright (c) 2023-present Biome Developers and Contributors.