Skip to content

Commit

Permalink
Add more properties to check their order
Browse files Browse the repository at this point in the history
Properties added (sorted alphabetically):

- `accent-color`
- `backdrop-filter`
- `backface-visibility`
- `background-blend-mode`
- `border-spacing`
- `box-decoration-break`
- `caret-color`
- `color-scheme`, `color-interpolation`
- `column-fill`, `column-span`
- `contain` (including all long-hand variants)
- `container` (including all long-hand variants)
- `counter-set`
- `direction`
- `empty-cells`
- `font-size-adjust`, `font-variant-*`, `font-feature-settings`, `font-stretch`, `font-synthesis` (including all long-hand variants), `font-kerning`, `font-optical-sizing`, `font-palette`
- `image-orientation`, `image-rendering`
- `inset` (including all long-hand variants),
- `justify-items`
- `list-style-image`
- `mask` (including all long-hand variants), `mask-border` (including all long-hand variants), `mask-type`
- `mix-blend-mode`
- `outline-*`
- `overflow-anchor`
- `overscroll-behavior` (including all long-hand variants).
- `paint-order`,
- `perspective`, `perspective-origin`
- `place-content`, `place-items`, `place-self`
- `quotes`
- `scrollbar-*`
- `table-layout`
- `text-align-last`, `text-indent`, `text-decoration-skip-ink`, `text-underline-*`, `text-rendering`, `text-wrap` (including all long-hand variants)
- `touch-action`,
- `transform-box`, `transform-style`, individual transforms: `translate`, `rotate`, `scale`,
- `transition-behavior`
- `white-space-collapse`
- `word-spacing`

The key is roughly like this: all properties from MDN that are standard, widely supported,
non-experimental, not specific for non-western languages, and not designed for paged media.

https://developer.mozilla.org/en-US/docs/Web/CSS
  • Loading branch information
adamkudrna committed Jul 29, 2024
1 parent 57b33df commit 95d950f
Showing 1 changed file with 111 additions and 3 deletions.
114 changes: 111 additions & 3 deletions order.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,16 +32,34 @@ module.exports = {

// Position
'position',
'inset',
'inset-inline',
'inset-inline-start',
'inset-inline-end',
'inset-block',
'inset-block-start',
'inset-block-end',
'top',
'right',
'bottom',
'left',
'contain',
'contain-intrinsic-size',
'contain-intrinsic-inline-size',
'contain-intrinsic-width',
'contain-intrinsic-block-size',
'contain-intrinsic-height',
'isolation',
'z-index',

// General appearance
'appearance',

// Box model
'direction',
'container',
'container-name',
'container-type',
'display',
'flex',
'flex-grow',
Expand Down Expand Up @@ -70,6 +88,8 @@ module.exports = {
'grid-row-gap',
'columns',
'column-count',
'column-fill',
'column-span',
'column-width',
'column-rule',
'column-rule-width',
Expand All @@ -78,12 +98,18 @@ module.exports = {
'gap',
'column-gap',
'row-gap',
'place-self',
'place-content',
'place-items',
'align-self',
'align-content',
'align-items',
'justify-self',
'justify-content',
'justify-items',
'order',
'table-layout',
'empty-cells',
'shape-outside',
'shape-image-threshold',
'shape-margin',
Expand Down Expand Up @@ -130,48 +156,82 @@ module.exports = {
'margin-left',
'overflow',
'overflow-inline',
'overflow-block',
'overflow-x',
'overflow-block',
'overflow-y',
'overflow-anchor',

// Typography
'font',
'font-style',
'font-weight',
'font-size',
'font-size-adjust',
'line-height',
'font-family',
'font-variant',
'font-variant-alternates',
'font-variant-caps',
'font-variant-east-asian',
'font-variant-emoji',
'font-variant-ligatures',
'font-variant-numeric',
'font-variant-position',
'font-feature-settings',
'font-stretch',
'font-synthesis',
'font-synthesis-weight',
'font-synthesis-style',
'font-synthesis-small-caps',
'font-synthesis-position',
'font-kerning',
'font-optical-sizing',
'font-palette',
'font-display',
'src',
'letter-spacing',
'quotes',
'text-align',
'text-align-last',
'text-indent',
'text-decoration',
'text-decoration-color',
'text-decoration-line',
'text-decoration-style',
'text-decoration-thickness',
'text-decoration-skip-ink',
'text-underline-offset',
'text-underline-position',
'text-overflow',
'text-shadow',
'text-rendering',
'text-size-adjust',
'text-transform',
'text-wrap',
'text-wrap-mode',
'text-wrap-style',
'writing-mode',
'white-space',
'white-space-collapse',
'word-break',
'word-spacing',
'overflow-wrap',
'hyphens',
'vertical-align',
'list-style',
'list-style-image',
'list-style-position',
'list-style-type',
'counter-increment',
'counter-reset',
'counter-set',

// Decorations
'color-scheme',
'color',
'color-interpolation',
'accent-color',
'border',
'border-inline',
'border-block',
'border-width',
'border-style',
'border-color',
Expand Down Expand Up @@ -231,6 +291,7 @@ module.exports = {
'border-bottom-right-radius',
'border-bottom-left-radius',
'border-collapse',
'border-spacing',
'background',
'background-image',
'background-position',
Expand All @@ -242,22 +303,59 @@ module.exports = {
'background-origin',
'background-clip',
'background-color',
'background-blend-mode',
'paint-order',
'stroke',
'fill',
'outline',
'outline-color',
'outline-style',
'outline-width',
'outline-offset',
'box-decoration-break',
'box-shadow',

// Effects and transforms
'visibility',
'opacity',
'mix-blend-mode',
'filter',
'backdrop-filter',
'mask',
'mask-clip',
'mask-composite',
'mask-image',
'mask-mode',
'mask-origin',
'mask-position',
'mask-repeat',
'mask-size',
'mark-border',
'mask-border-mode',
'mask-border-outset',
'mask-border-repeat',
'mask-border-slice',
'mask-border-source',
'mask-border-width',
'mask-type',
'translate',
'rotate',
'scale',
'perspective',
'perspective-origin',
'transform',
'transform-box',
'transform-origin',
'transform-style',
'backface-visibility',
'image-orientation',
'image-rendering',

// Interactions
'user-select',
'pointer-events',
'resize',
'touch-action',
'scroll-behavior',
'scroll-snap-type',
'scroll-padding',
Expand All @@ -284,14 +382,24 @@ module.exports = {
'scroll-margin-bottom',
'scroll-margin-left',
'scroll-snap-stop',
'overscroll-behavior',
'overscroll-behavior-inline',
'overscroll-behavior-block',
'overscroll-behavior-x',
'overscroll-behavior-y',
'caret-color',
'cursor',
'scrollbar-color',
'scrollbar-gutter',
'scrollbar-width',

// Transitions and animations
'transition',
'transition-property',
'transition-duration',
'transition-timing-function',
'transition-delay',
'transition-behavior',
'animation',
'animation-name',
'animation-duration',
Expand Down

0 comments on commit 95d950f

Please sign in to comment.