Cover the features listed in the State Of XYZ surveys

[captainbrosset]

Here is another potentially useful burndown list to add features to the repo.
The CSS and HTML features are mentioned, in some way, in either State of CSS or State of HTML (over the past 4 years).
This was made by using the GraphQL API as detailed in Devographics/surveys#247 (comment).

The first ID on each row is the ID of features in State of CSS and State of HTML. Not to be confused with web-features IDs (even if they look very similar in some cases).
I've checked some of the boxes below according to what I think web-features already covers and added links to the relevant web-features-explorer pages.

I added the word "unclear" for some of the features, with my questions.

CSS (2021/2022/2023/2024)

• accent_color https://web-platform-dx.github.io/web-features-explorer/features/accent-color/
• anchor_positioning https://web-platform-dx.github.io/web-features-explorer/features/anchor-positioning/
• aria_attributes https://web-platform-dx.github.io/web-features-explorer/features/aria-attribute-reflection/
• aspect_ratio https://web-platform-dx.github.io/web-features-explorer/features/aspect-ratio/
• at_container_size https://web-platform-dx.github.io/web-features-explorer/features/container-queries/
• at_container_style https://web-platform-dx.github.io/web-features-explorer/features/contain-style/
• at_container (likely not needed, this was used before size and style queries were introduced separately) See comment
• at_property https://web-platform-dx.github.io/web-features-explorer/features/registered-custom-properties/ (this also covers CSS.registedrProperty())
• at_scope https://web-platform-dx.github.io/web-features-explorer/features/scope/
• backdrop_filter https://web-platform-dx.github.io/web-features-explorer/features/backdrop-filter/
• blend_modes (This is the Blend mode group)
• break_rules https://web-platform-dx.github.io/web-features-explorer/features/page-breaks/
• calc https://web-platform-dx.github.io/web-features-explorer/features/calc/
• cascade_layers https://web-platform-dx.github.io/web-features-explorer/features/cascade-layers/
• clip_path https://web-platform-dx.github.io/web-features-explorer/features/clip-path/
• color_contrast in-progress Add new contrast-color feature #2304
• color_function https://web-platform-dx.github.io/web-features-explorer/features/color-function/
• color_gamut https://web-platform-dx.github.io/web-features-explorer/features/color-gamut/
• color_mix https://web-platform-dx.github.io/web-features-explorer/features/color-mix/
• color_scheme https://web-platform-dx.github.io/web-features-explorer/features/color-scheme/
• comparison_functions https://web-platform-dx.github.io/web-features-explorer/features/min-max-clamp/
• conic_gradient https://web-platform-dx.github.io/web-features-explorer/features/conic-gradients/
• containment - web-features defines inline-size, layout, and paint containment. This is the containment group
• content_visibility https://web-platform-dx.github.io/web-features-explorer/features/content-visibility/
• css_nesting https://web-platform-dx.github.io/web-features-explorer/features/nesting/
• currentcolor https://web-platform-dx.github.io/web-features-explorer/features/currentcolor/
• discrete_properties_animations https://web-platform-dx.github.io/web-features-explorer/features/transition-behavior/
• exponential_functions https://web-platform-dx.github.io/web-features-explorer/features/exp-functions/
• feature_support_queries https://web-platform-dx.github.io/web-features-explorer/features/supports/
• filter_effects https://web-platform-dx.github.io/web-features-explorer/features/filter/
• flexbox_gap https://web-platform-dx.github.io/web-features-explorer/features/flexbox-gap/
• flexbox https://web-platform-dx.github.io/web-features-explorer/features/flexbox/
• focus_visible https://web-platform-dx.github.io/web-features-explorer/features/focus-visible/
• font_display https://web-platform-dx.github.io/web-features-explorer/features/font-display/
• font_palette https://web-platform-dx.github.io/web-features-explorer/features/font-palette/
• font_variant_numeric - https://web-platform-dx.github.io/web-features-explorer/features/font-variant-numeric/
• font_variant - https://web-platform-dx.github.io/web-features-explorer/features/font-variant/
• forced_colors https://web-platform-dx.github.io/web-features-explorer/features/forced-colors/
• gradient_color_spaces https://web-platform-dx.github.io/web-features-explorer/features/conic-gradients/, specifically css.types.image.gradient.conic-gradient.interpolation_color_space
• grid https://web-platform-dx.github.io/web-features-explorer/features/grid/
• hanging_punctuation https://web-platform-dx.github.io/web-features-explorer/features/hanging-punctuation/
• has_selector https://web-platform-dx.github.io/web-features-explorer/features/has/
• houdini https://web-platform-dx.github.io/web-features-explorer/features/css-object-model/
• image_function https://web-platform-dx.github.io/web-features-explorer/features/image-function/
• image_set https://web-platform-dx.github.io/web-features-explorer/features/image-set/
• individual_transform_properties https://web-platform-dx.github.io/web-features-explorer/features/individual-transforms/
• initial_letter https://web-platform-dx.github.io/web-features-explorer/features/initial-letter/
• intrinsic_sizing https://web-platform-dx.github.io/web-features-explorer/features/min-max-content/
• light_dark https://web-platform-dx.github.io/web-features-explorer/features/light-dark/
• line_clamp https://web-platform-dx.github.io/web-features-explorer/features/line-clamp/
• linear_easing_function https://web-platform-dx.github.io/web-features-explorer/features/linear-easing/
• logical_properties https://web-platform-dx.github.io/web-features-explorer/features/logical-properties/
• marker - In progress- Add counters and list styles #1764
• masks https://web-platform-dx.github.io/web-features-explorer/features/masks/
• media_queries_range_contexts https://web-platform-dx.github.io/web-features-explorer/features/media-query-range-syntax/
• multi_column https://web-platform-dx.github.io/web-features-explorer/features/column-breaks/
• nth_child_of_s https://web-platform-dx.github.io/web-features-explorer/features/nth-child-of/
• object_fit https://web-platform-dx.github.io/web-features-explorer/features/object-fit/
• object_view_box https://web-platform-dx.github.io/web-features-explorer/features/object-view-box/
• offset_path https://web-platform-dx.github.io/web-features-explorer/features/motion-path/
• overflow_anchor https://web-platform-dx.github.io/web-features-explorer/features/overflow-anchor/
• overscroll_behavior Add overscroll-behavior #1834
• perspective https://web-platform-dx.github.io/web-features-explorer/features/transforms3d/
• pointer_events https://web-platform-dx.github.io/web-features-explorer/features/pointer-events/
• position_sticky https://web-platform-dx.github.io/web-features-explorer/features/sticky-positioning/
• prefers_color_scheme https://web-platform-dx.github.io/web-features-explorer/features/prefers-color-scheme/
• prefers_contrast https://web-platform-dx.github.io/web-features-explorer/features/prefers-contrast/
• prefers_reduced_data https://web-platform-dx.github.io/web-features-explorer/features/prefers-reduced-data/
• prefers_reduced_motion https://web-platform-dx.github.io/web-features-explorer/features/prefers-reduced-motion/
• relative_colors https://web-platform-dx.github.io/web-features-explorer/features/relative-color/
• scroll_behavior https://web-platform-dx.github.io/web-features-explorer/features/scroll-behavior/
• scroll_snap https://web-platform-dx.github.io/web-features-explorer/features/scroll-snap/
• scroll_timeline https://web-platform-dx.github.io/web-features-explorer/features/scroll-driven-animations/
• scrollbar_gutter https://web-platform-dx.github.io/web-features-explorer/features/scrollbar-gutter/
• shadow_dom_css https://web-platform-dx.github.io/web-features-explorer/features/constructed-stylesheets/
• shapes https://web-platform-dx.github.io/web-features-explorer/features/shapes/
• sign_related_functions https://web-platform-dx.github.io/web-features-explorer/features/abs-sign/
• stepped_value_functions Adds cubic-bezier() and steps() easing functions #1812
• subgrid https://web-platform-dx.github.io/web-features-explorer/features/subgrid/
• tabindex https://web-platform-dx.github.io/web-features-explorer/features/tabindex/
• text_wrap_balance https://web-platform-dx.github.io/web-features-explorer/features/text-wrap-balance/
• text_wrap_pretty https://web-platform-dx.github.io/web-features-explorer/features/text-wrap-pretty/
• touch_action https://web-platform-dx.github.io/web-features-explorer/features/touch-action/
• trigonometric_functions https://web-platform-dx.github.io/web-features-explorer/features/trig-functions/
• variable_fonts - https://web-platform-dx.github.io/web-features-explorer/features/font-variation-settings/
• variables https://web-platform-dx.github.io/web-features-explorer/features/custom-properties/
• view_timeline https://web-platform-dx.github.io/web-features-explorer/features/scroll-driven-animations/
• view_transitions https://web-platform-dx.github.io/web-features-explorer/features/view-transitions/
• viewport_percentage_length_units https://web-platform-dx.github.io/web-features-explorer/features/viewport-units/
• where_selector https://web-platform-dx.github.io/web-features-explorer/features/where/
• wide_gamut_colors https://web-platform-dx.github.io/web-features-explorer/features/lab/ and https://web-platform-dx.github.io/web-features-explorer/features/oklab/
• will_change https://web-platform-dx.github.io/web-features-explorer/features/will-change/
• writing_modes writing-mode

HTML (2023/2024)

• accordion_element (unclear: this is probably from the Missing elements question, so there won't be a feature in web-features for it, what should we do?)
• autocomplete_attribute
• badging_api
• blocking_render https://web-platform-dx.github.io/web-features-explorer/features/blocking-render/
• content_security_policy
• contenteditable_plaintext
• controlslist_attribute https://web-platform-dx.github.io/web-features-explorer/features/controls-list/
• custom_elements_defining
• custom_elements_using
• datalist_element https://web-platform-dx.github.io/web-features-explorer/features/datalist/
• declarative_shadow_dom https://web-platform-dx.github.io/web-features-explorer/features/declarative-shadow-dom/
• details_element https://web-platform-dx.github.io/web-features-explorer/features/details/
• dialog_element https://web-platform-dx.github.io/web-features-explorer/features/dialog/
• dom_parts
• element_internals
• fetchpriority_attribute https://web-platform-dx.github.io/web-features-explorer/features/fetch-priority/
• file_handling_api
• filesystem_access https://web-platform-dx.github.io/web-features-explorer/features/file-system-access/
• focusgroup_attribute
• formdata
• html_modules
• imperative_slot https://web-platform-dx.github.io/web-features-explorer/features/slot-assign/
• inert_attribute https://web-platform-dx.github.io/web-features-explorer/features/inert/
• isolated_webapps
• landmark_elements
• launch_handler_api
• lazy_loading https://web-platform-dx.github.io/web-features-explorer/features/loading-lazy/
• media_capture https://web-platform-dx.github.io/web-features-explorer/features/media-capture/
• model_element
• popover_api https://web-platform-dx.github.io/web-features-explorer/features/popover/
• resource_hints
• respimg_attributes
• scoped_element_registries
• search_element https://web-platform-dx.github.io/web-features-explorer/features/search/
• selectlist_element In-progress: Early customizable select feature #2301
• shadow_dom https://web-platform-dx.github.io/web-features-explorer/features/shadow-dom/
• showpicker (we have 2 features: https://web-platform-dx.github.io/web-features-explorer/features/show-picker-input/ and https://web-platform-dx.github.io/web-features-explorer/features/show-picker-select/)
• slot_attribute
• tabindex_attribute https://web-platform-dx.github.io/web-features-explorer/features/tabindex/
• template_element https://web-platform-dx.github.io/web-features-explorer/features/template/
• web_share_api
• window_controls_overlay https://web-platform-dx.github.io/web-features-explorer/features/window-controls-overlay/

[SachaG]

at_container (unclear: is this a group for the 2 above properties?)

Before style queries were a concern we used at_container to designate container size queries, but I decided to make the split more explicit going forward.

[autonome]

accordion_element

looks like details and exclusive details are already done, if that's what this is referring to.

[captainbrosset]

accordion_element

looks like details and exclusive details are already done, if that's what this is referring to.

I think this comes from https://2023.stateofhtml.com/en-US/usage/#html_missing_elements which is about missing html elements. So, by definition, we won't have a web-feature entry for it, or other missing elements (e.g. carousel, data table, tabs, ...)

[ddbeck]

The first ID on each row is the ID of features in State of CSS and State of HTML

Are there human-readable strings strings associated with the IDs? Some of the IDs are easy enough to figure out, but others are unclear.

[SachaG]

@ddbeck you can get more metadata via our GraphQL API https://graphiql.devographics.com/. Here's an example query:

query MyQuery {
  entity(id: "subgrid") {
    id
    name
  }
}

[ddbeck]

Thank you, @SachaG! I put the results in a gist: https://gist.github.com/ddbeck/5fc3c7b8c07f0e14d753579b03ef4fc9. This might be a good source of prior art for our name fields, too.

[captainbrosset]

@jamesnw I updated the top description based on your comment. Thank you!

[jamesnw]

Apart from the in-progress contrast-color PR, it appears all CSS keys are mapped.