(css) add all properties listed on MDN

[BaliBalo]

Changes

This adds all the missing properties listed on MDN. A number of those properties are already widely supported, like aspect-ratio.

Full list of added properties:

anchor-name
animation-composition
animation-range
animation-range-end
animation-range-start
animation-timeline
aspect-ratio
backdrop-filter
background-position-x
background-position-y
box-align
box-direction
box-flex
box-flex-group
box-lines
box-ordinal-group
box-orient
box-pack
contain-intrinsic-block-size
contain-intrinsic-height
contain-intrinsic-inline-size
contain-intrinsic-size
contain-intrinsic-width
container
container-name
container-type
counter-set
field-sizing
font-optical-sizing
font-palette
font-smooth
font-synthesis-position
font-synthesis-small-caps
font-synthesis-style
font-synthesis-weight
font-variant-alternates
font-variant-emoji
forced-color-adjust
hyphenate-character
hyphenate-limit-chars
initial-letter
initial-letter-align
inset-area
line-height-step
margin-trim
masonry-auto-flow
math-depth
math-shift
math-style
offset
offset-anchor
offset-distance
offset-path
offset-position
offset-rotate
overflow-anchor
overflow-block
overflow-clip-margin
overflow-inline
overlay
overscroll-behavior
overscroll-behavior-block
overscroll-behavior-inline
overscroll-behavior-x
overscroll-behavior-y
page
paint-order
place-content
place-items
place-self
position-anchor
position-visibility
print-color-adjust
ruby-align
ruby-position
scroll-behavior
scroll-timeline
scroll-timeline-axis
scroll-timeline-name
text-decoration-skip
text-size-adjust
text-wrap
text-wrap-mode
text-wrap-style
timeline-scope
touch-action
transition-behavior
user-modify
user-select
view-timeline
view-timeline-axis
view-timeline-inset
view-timeline-name
view-transition-name
white-space-collapse
zoom

---

For future reference, an easy way to get the list directly from MDN is using the following snippet in devtools on any CSS page (e.g. the reference page):

$$('a', $x('//*[@id="sidebar-quicklinks"]//summary[text() = "Properties"]/..')[0]).map(link => link.textContent).filter(prop => !prop.startsWith('-'))

This extracts the links from the "Properties" section of the sidebar, while excluding the -moz- and -webkit- prefixed properties. These do not however list SVG presentation attributes, so it is important to not replace the existing list, but rather to get their union (for example with [...new Set(currentArray.concat(valuesFromMDN))]).

Checklist

• Added markup tests, or they don't apply here because... (keywords update)
• Updated the changelog at CHANGES.md

[joshgoebel]

Looks good after we fix attribution.

[github-actions]

Build Size Report

Changes to minified artifacts in /build, after gzip compression.

9 files changed

Total change +3.37 KB

View Changes

file	base	pr	diff
es/languages/css.min.js	3.92 KB	4.34 KB	+423 B
es/languages/less.min.js	4.33 KB	4.75 KB	+422 B
es/languages/scss.min.js	4.37 KB	4.79 KB	+417 B
es/languages/stylus.min.js	4.02 KB	4.45 KB	+422 B
highlight.min.js	8.23 KB	8.23 KB	+1 B
languages/css.min.js	3.93 KB	4.35 KB	+423 B
languages/less.min.js	4.33 KB	4.76 KB	+423 B
languages/scss.min.js	4.38 KB	4.79 KB	+418 B
languages/stylus.min.js	4.03 KB	4.45 KB	+421 B