[css] add reserved words

[orionlee]

I just added a few missing ones from what I encountered:

1. property all
2. media feature prefers-color-scheme, with values dark, light

[orionlee]

There are others that are probably should be added. The below are some candidates that are semi-automatically derived.

CSS Properties

Generated by comparing those in css.js against the ones present in document.body.style on Chrome 84.

background-repeat-x
background-repeat-y
buffered-rendering
color-scheme
contain-intrinsic-size
font-display
inline-size
mask-type
max-zoom
min-zoom
orientation
overflow-anchor
overscroll-behavior
overscroll-behavior-block
overscroll-behavior-inline
overscroll-behavior-x
overscroll-behavior-y
paint-order
touch-action
transform-box
unicode-range
user-zoom
vector-effect
-webkit-align-content
-webkit-align-items
-webkit-align-self
-webkit-animation
-webkit-animation-delay
-webkit-animation-direction
-webkit-animation-duration
-webkit-animation-fill-mode
-webkit-animation-iteration-count
-webkit-animation-name
-webkit-animation-play-state
-webkit-animation-timing-function
-webkit-app-region
-webkit-appearance
-webkit-backface-visibility
-webkit-background-clip
-webkit-background-origin
-webkit-background-size
-webkit-border-after
-webkit-border-after-color
-webkit-border-after-style
-webkit-border-after-width
-webkit-border-before
-webkit-border-before-color
-webkit-border-before-style
-webkit-border-before-width
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius
-webkit-border-end
-webkit-border-end-color
-webkit-border-end-style
-webkit-border-end-width
-webkit-border-horizontal-spacing
-webkit-border-image
-webkit-border-radius
-webkit-border-start
-webkit-border-start-color
-webkit-border-start-style
-webkit-border-start-width
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-vertical-spacing
-webkit-box-align
-webkit-box-decoration-break
-webkit-box-direction
-webkit-box-flex
-webkit-box-ordinal-group
-webkit-box-orient
-webkit-box-pack
-webkit-box-reflect
-webkit-box-shadow
-webkit-box-sizing
-webkit-clip-path
-webkit-column-break-after
-webkit-column-break-before
-webkit-column-break-inside
-webkit-column-count
-webkit-column-gap
-webkit-column-rule
-webkit-column-rule-color
-webkit-column-rule-style
-webkit-column-rule-width
-webkit-column-span
-webkit-column-width
-webkit-columns
-webkit-filter
-webkit-flex
-webkit-flex-basis
-webkit-flex-direction
-webkit-flex-flow
-webkit-flex-grow
-webkit-flex-shrink
-webkit-flex-wrap
-webkit-font-feature-settings
-webkit-font-size-delta
-webkit-font-smoothing
-webkit-highlight
-webkit-hyphenate-character
-webkit-justify-content
-webkit-line-break
-webkit-line-clamp
-webkit-locale
-webkit-logical-height
-webkit-logical-width
-webkit-margin-after
-webkit-margin-before
-webkit-margin-end
-webkit-margin-start
-webkit-mask
-webkit-mask-box-image
-webkit-mask-box-image-outset
-webkit-mask-box-image-repeat
-webkit-mask-box-image-slice
-webkit-mask-box-image-source
-webkit-mask-box-image-width
-webkit-mask-clip
-webkit-mask-composite
-webkit-mask-image
-webkit-mask-origin
-webkit-mask-position
-webkit-mask-position-x
-webkit-mask-position-y
-webkit-mask-repeat
-webkit-mask-repeat-x
-webkit-mask-repeat-y
-webkit-mask-size
-webkit-max-logical-height
-webkit-max-logical-width
-webkit-min-logical-height
-webkit-min-logical-width
-webkit-opacity
-webkit-order
-webkit-padding-after
-webkit-padding-before
-webkit-padding-end
-webkit-padding-start
-webkit-perspective
-webkit-perspective-origin
-webkit-perspective-origin-x
-webkit-perspective-origin-y
-webkit-print-color-adjust
-webkit-rtl-ordering
-webkit-ruby-position
-webkit-shape-image-threshold
-webkit-shape-margin
-webkit-shape-outside
-webkit-tap-highlight-color
-webkit-text-combine
-webkit-text-decorations-in-effect
-webkit-text-emphasis
-webkit-text-emphasis-color
-webkit-text-emphasis-position
-webkit-text-emphasis-style
-webkit-text-fill-color
-webkit-text-orientation
-webkit-text-security
-webkit-text-size-adjust
-webkit-text-stroke
-webkit-text-stroke-color
-webkit-text-stroke-width
-webkit-transform
-webkit-transform-origin
-webkit-transform-origin-x
-webkit-transform-origin-y
-webkit-transform-origin-z
-webkit-transform-style
-webkit-transition
-webkit-transition-delay
-webkit-transition-duration
-webkit-transition-property
-webkit-transition-timing-function
-webkit-user-drag
-webkit-user-modify
-webkit-user-select
-webkit-writing-mode

Media Features

Generated by comparing the ones in `css.js` against those listed on MDN:

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

color-gamut
display-mode
forced-colors
inverted-colors
light-level
overflow-block
overflow-inline
prefers-contrast
prefers-reduced-motion
prefers-reduced-transparency
scripting
update

The script that generates the list.

[marijnh]

The mode parses vendor prefixes separate from the property, so thing like -webkit-animation are covered. If you can separate the standardized and non-standardized words in the remaining list, I'll gladly add those to the mode.

[orionlee]

hmm, could you clarify what it means by non-standard words in the context of css.js?

I originally thought it meant the property may be vendor-prefixed. However, it does not appear to be the case.

E.g., border-block-end is listed in nonStandardPropertyKeywords_, but:

• it is not prefixed with -webkit (in chrome 84)
• on MDN reference, it is not listed as vendor-prefixed ever either.
• The reference does indicate it is an experimental technology.

Another example is line-break, listed as standard, but based on MDN reference, it may be prefixed in Safari.

[marijnh]

could you clarify what it means by non-standard words in the context of css.js?

Not being in any current (non-draft) CSS standard.