An analysis on CSS properties:

Our side: Generated browsers.ts
MDN: at-rules and properties

When we compare our browser data with MDN data, there are 239 rules in our side and not in MDN side, here is a complete list:

Properties in VSC not in MDN

alt
behavior
clip-rule
color-interpolation-filters
enable-background
fill
fill-opacity
fill-rule
flood-color
flood-opacity
glyph-orientation-horizontal
glyph-orientation-vertical
kerning
lighting-color
marker
marker-end
marker-mid
marker-start
motion
motion-offset
motion-path
motion-rotation
-moz-animation
-moz-animation-delay
-moz-animation-direction
-moz-animation-duration
-moz-animation-iteration-count
-moz-animation-name
-moz-animation-play-state
-moz-animation-timing-function
-moz-backface-visibility
-moz-background-clip
-moz-background-inline-policy
-moz-background-origin
-moz-border-image
-moz-box-align
-moz-box-direction
-moz-box-flex
-moz-box-flexgroup
-moz-box-ordinal-group
-moz-box-orient
-moz-box-pack
-moz-box-sizing
-moz-column-count
-moz-column-gap
-moz-column-rule
-moz-column-rule-color
-moz-column-rule-style
-moz-column-rule-width
-moz-columns
-moz-column-width
-moz-font-feature-settings
-moz-hyphens
-moz-perspective
-moz-perspective-origin
-moz-text-align-last
-moz-text-decoration-color
-moz-text-decoration-line
-moz-text-decoration-style
-moz-text-size-adjust
-moz-transform
-moz-transform-origin
-moz-transition
-moz-transition-delay
-moz-transition-duration
-moz-transition-property
-moz-transition-timing-function
-moz-user-select
-ms-behavior
-ms-flex
-ms-flex-align
-ms-flex-direction
-ms-flex-flow
-ms-flex-item-align
-ms-flex-line-pack
-ms-flex-order
-ms-flex-pack
-ms-flex-wrap
-ms-grid-column
-ms-grid-column-align
-ms-grid-columns
-ms-grid-column-span
-ms-grid-layer
-ms-grid-row
-ms-grid-row-align
-ms-grid-rows
-ms-grid-row-span
-ms-hyphens
-ms-ime-mode
-ms-interpolation-mode
-ms-layout-grid
-ms-layout-grid-char
-ms-layout-grid-line
-ms-layout-grid-mode
-ms-layout-grid-type
-ms-line-break
-ms-perspective
-ms-perspective-origin
-ms-perspective-origin-x
-ms-perspective-origin-y
-ms-progress-appearance
-ms-text-align-last
-ms-text-combine-horizontal
-ms-text-justify
-ms-text-kashida-space
-ms-text-overflow
-ms-text-size-adjust
-ms-text-underline-position
-ms-touch-action
-ms-transform
-ms-transform-origin
-ms-transform-origin-x
-ms-transform-origin-y
-ms-transform-origin-z
-ms-word-break
-ms-word-wrap
-ms-writing-mode
-ms-zoom
-ms-zoom-animation
nav-down
nav-index
nav-left
nav-right
nav-up
-o-animation
-o-animation-delay
-o-animation-direction
-o-animation-duration
-o-animation-fill-mode
-o-animation-iteration-count
-o-animation-name
-o-animation-play-state
-o-animation-timing-function
-o-border-image
-o-object-fit
-o-object-position
-o-table-baseline
-o-tab-size
-o-text-overflow
-o-transform
-o-transform-origin
-o-transition
-o-transition-delay
-o-transition-duration
-o-transition-property
-o-transition-timing-function
ruby-overhang
ruby-span
scrollbar-3dlight-color
scrollbar-arrow-color
scrollbar-base-color
scrollbar-darkshadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color
scrollbar-track-color
shape-rendering
size
stop-color
stop-opacity
stroke
stroke-dasharray
stroke-dashoffset
stroke-linecap
stroke-linejoin
stroke-miterlimit
stroke-opacity
stroke-width
text-anchor
-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-appearance
-webkit-backdrop-filter
-webkit-backface-visibility
-webkit-background-clip
-webkit-background-composite
-webkit-background-origin
-webkit-border-image
-webkit-box-align
-webkit-box-direction
-webkit-box-flex
-webkit-box-flex-group
-webkit-box-ordinal-group
-webkit-box-orient
-webkit-box-pack
-webkit-box-sizing
-webkit-break-after
-webkit-break-before
-webkit-break-inside
-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-columns
-webkit-column-span
-webkit-column-width
-webkit-filter
-webkit-flow-from
-webkit-flow-into
-webkit-font-feature-settings
-webkit-hyphens
-webkit-line-break
-webkit-margin-bottom-collapse
-webkit-margin-collapse
-webkit-margin-start
-webkit-margin-top-collapse
-webkit-mask-size
-webkit-nbsp-mode
-webkit-padding-start
-webkit-perspective
-webkit-perspective-origin
-webkit-region-fragment
-webkit-text-size-adjust
-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

Observations:

189 of them are prefixed properties. Many are already implemented natively in browser and prefixes are no-longer required, but they might still exist in people's code-base
Some of these properties are non-standard or deprecated

When we compare MDN data against ours, there are 87 properties not in our css (31 prefixed), and 9 at-rules not in our css:

Properties in MDN data but not in VSC data

-ms-ime-align
-moz-binding
-moz-context-properties
-moz-float-edge
-moz-force-broken-image-icon
-moz-image-region
-moz-orient
-moz-outline-radius
-moz-outline-radius-bottomleft
-moz-outline-radius-bottomright
-moz-outline-radius-topleft
-moz-outline-radius-topright
-moz-stack-sizing
-moz-text-blink
-moz-user-input
-moz-user-modify
-moz-window-dragging
-moz-window-shadow
-webkit-border-before
-webkit-border-before-color
-webkit-border-before-style
-webkit-border-before-width
-webkit-mask
-webkit-mask-attachment
-webkit-mask-composite
-webkit-mask-position
-webkit-mask-position-x
-webkit-mask-position-y
-webkit-mask-repeat-x
-webkit-mask-repeat-y
appearance
azimuth
backdrop-filter
box-align
box-direction
box-flex
box-flex-group
box-lines
box-ordinal-group
box-orient
box-pack
color-adjust
font-variation-settings
gap
hanging-punctuation
image-resolution
initial-letter
initial-letter-align
line-height-step
mask
mask-border
mask-border-mode
mask-border-outset
mask-border-repeat
mask-border-slice
mask-border-source
mask-border-width
mask-clip
mask-composite
offset
offset-anchor
offset-distance
offset-path
offset-position
offset-rotate
overflow-clip-box
overscroll-behavior
overscroll-behavior-x
overscroll-behavior-y
place-content
rotate
row-gap
ruby-merge
scale
scroll-snap-type-x
scroll-snap-type-y
text-combine-upright
text-decoration-skip
text-decoration-skip-ink
text-emphasis
text-emphasis-color
text-emphasis-position
text-emphasis-style
text-size-adjust
transform-box
translate
speak-as
font-display
font-variation-settings
bleed
marks
max-zoom
min-zoom
orientation
user-zoom

Observations:

MDN data differentiate between at-rule properties and properties. Using this data we could check if a property is properly used, which is currently impossible with our data
Most of these are newly added css properties
MDN data has a status on each properties. For the 87 properties, we have:
- 18 standard, 22 experimental, 43 nonstandard

Overall consideration:

As MDN don't have short description for each css property/value, it's not possible to replace our browsers.ts entirely as of now
MDN data is much more actively maintained than ours
MDN data is richer and allows us to give more detailed, up-to-date suggestions, for example:
- status: We can inform user when he's using a non-standard property
- syntax: We might use this to provide correct property value suggestions, or hint invalid ones. This requires a parser that understand CSS Value definition syntax
- Combining mdn/data and mdn/browser-compat-data, we can provide always up-to-date support matrix for each properties. Solves issues like Maintaining browser support data #40

Use MDN data to power the CSS language server #68

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions