useLogicalProperties (CSS)

Language CSS

Caution

This rule is part of the nursery group. This means that it is experimental and the behavior can change at any time.

Summary

• Rule available since: v2.5.15
• Diagnostic Category: lint/nursery/useLogicalProperties
• This rule doesn’t have a fix.
• The default severity of this rule is warning.

How to configure

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "useLogicalProperties": "error"
      }
    }
  }
}

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

Invalid

p {
  width: 100%;
}

code-block.css:2:3 lint/nursery/useLogicalProperties ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ 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.
  

p {
  top: 0;
}

code-block.css:2:3 lint/nursery/useLogicalProperties ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ 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.
  

p {
  margin-left: 1rem;
}

code-block.css:2:3 lint/nursery/useLogicalProperties ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ 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.
  

p {
  border-left: 1px solid;
}

code-block.css:2:3 lint/nursery/useLogicalProperties ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ 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.
  

Valid

p {
  inline-size: 100%;
  inset-block-start: 0;
  margin-inline-start: 1rem;
  border-inline-start: 1px solid;
}

Options

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".

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "useLogicalProperties": {
          "level": "on",
          "options": {
            "direction": "rtl"
          }
        }
      }
    }
  }
}

Invalid

p {
  margin-left: 1rem;
}

code-block.css:2:3 lint/nursery/useLogicalProperties ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ 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.
  

Valid

p {
  margin-inline-end: 1rem;
}

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code (Edit this Page)
• Test Cases
• Try in the playground