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.
- Sources:
- Same as
csstools/use-logical - Same as
liberty/use-logical-spec
- Same as
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 { margin: 1px 2px;}code-block.css:2:3 lint/nursery/useLogicalProperties FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ Use logical CSS longhands instead of a multi-value physical shorthand.
1 │ p {
> 2 │ margin: 1px 2px;
│ ^^^^^^
3 │ }
4 │
ℹ Logical properties adapt better to different writing modes and layout directions.
ℹ Multi-value shorthands always map to physical sides.
ℹ 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: Replace with margin-block and margin-inline.
2 │ ··margin-block:·1px;·margin-inline:·2px;
│ ++++++ ++++++++++++++++
p { padding: var(--spacing) 2px;}code-block.css:2:3 lint/nursery/useLogicalProperties ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ Use logical CSS longhands instead of a multi-value physical shorthand.
1 │ p {
> 2 │ padding: var(--spacing) 2px;
│ ^^^^^^^
3 │ }
4 │
ℹ Logical properties adapt better to different writing modes and layout directions.
ℹ The variable or function may supply multiple values, so check its substitution and split the shorthand manually.
ℹ 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 { margin-block-start: 1px; margin-block-end: 2px;}code-block.css:2:3 lint/nursery/useLogicalProperties FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ These logical longhands can be combined into a shorthand.
1 │ p {
> 2 │ margin-block-start: 1px;
│ ^^^^^^^^^^^^^^^^^^
3 │ margin-block-end: 2px;
4 │ }
ℹ Logical properties adapt better to different writing modes and layout directions.
ℹ 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: Combine these properties as margin-block.
1 1 │ p {
2 │ - ··margin-block-start:·1px;
3 │ - ··margin-block-end:·2px;
2 │ + ··margin-block:·1px·2px;
4 3 │ }
5 4 │
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);}A multi-value physical shorthand always applies values to physical sides. Use separate
logical properties when values differ by axis. A four-sided shorthand is only equivalent
when all four values are identical, so the rule does not combine differing axis values
into one. Shorthands containing var(), env(), attr(), if(), or a SCSS variable are
reported without an automatic fix because these values can expand to multiple values. Check the
substitution before splitting the shorthand manually.
p { margin: 1px; margin: var(--spacing); margin-block: 1px 2px; color: red;}$spacing: 1rem;
p { margin: $spacing 2px;}code-block.scss:4:3 lint/nursery/useLogicalProperties ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ Use logical CSS longhands instead of a multi-value physical shorthand.
3 │ p {
> 4 │ margin: $spacing 2px;
│ ^^^^^^
5 │ }
6 │
ℹ Logical properties adapt better to different writing modes and layout directions.
ℹ The variable or function may supply multiple values, so check its substitution and split the shorthand manually.
ℹ 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.
Options
Section titled “Options”direction
Section titled “direction”Sets the text direction used to replace left and right properties and to order the inline
values when splitting a four-value physical shorthand. 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: 1px 2px 3px 4px;}code-block.css:2:3 lint/nursery/useLogicalProperties FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ Use logical CSS longhands instead of a multi-value physical shorthand.
1 │ p {
> 2 │ margin: 1px 2px 3px 4px;
│ ^^^^^^
3 │ }
4 │
ℹ Logical properties adapt better to different writing modes and layout directions.
ℹ Multi-value shorthands always map to physical sides.
ℹ 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: Replace with margin-block and margin-inline.
1 1 │ p {
2 │ - ··margin:·1px·2px·3px·4px;
2 │ + ··margin-block:·1px·3px;·margin-inline:·2px·4px;
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.