Skip to content

Latest commit

 

History

History
35 lines (26 loc) · 761 Bytes

use-logical-properties-and-values.md

File metadata and controls

35 lines (26 loc) · 761 Bytes

Pattern: Missing use of logical property/value

Issue: -

Description

Enforce the use of logical CSS properties and values.

Example of incorrect code:

.heading {
  max-width: 90ch; /* Will flag the use of "width" */
  text-align: left; /* Will flag the use of "left" */
  opacity: 1;
  transition:
    opacity 1s ease,
    max-width 1s ease; /* Will flag the use of 'max-width' */
}

Example of correct code:

.heading {
  max-inline-size: 90ch;
  text-align: start;
  opacity: 1;
  transition: opacity 1s ease, max-inline-size: 1s ease;
}

Further Reading