OWD Project: CSS specs: module landing pages

[estelle]

Problem statement

Many new features a landing in each new browser release and specs are being updated all the time. It is difficult to keep up. Improving landing pages for new specs and technical spec features pages can help developers better understand known properties and learn about new features.

Proposed solutions

• Improve landing pages listed below
  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • associated properties
  • glossary terms

Task list

• Compositing_and_Blending

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms
  • CSS module landing page mdn/content#23898

• CSS Anchor positioning Anchor positioning: css module #178

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

• CSS Animations

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

• CSS Backgrounds and Borders

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

• CSS Basic User Interface

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

• CSS Box Alignment

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms
  • https://drafts.csswg.org/css-align-3/

• CSS Box Model - CSS module: box sizing & box model mdn/content#33182

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms
  • https://drafts.csswg.org/css-box-3/

• Cascade and inheritance New module: CSS Cascading and Inheritance #165

  • https://drafts.csswg.org/css-cascade-4/
  • New page needed

• Charsets CSS Charsets #186

• CSS Colors

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms
  • https://drafts.csswg.org/css-color-4/

• CSS Color Adjustment

  • brief (5-paragraph approx) description
  • demonstration example (NOT DOING - based on user preferences)
  • properties
  • data types
  • associated properties
  • glossary terms
  • New CSS Module: CSS color adjustment mdn/content#25211
  • https://drafts.csswg.org/css-color-adjust-1/

• Color HDR - Not official. Not doing.

  • https://drafts.csswg.org/css-color-hdr/

• CSS Multi-column Layout

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms
  • CSS module: multicol mdn/content#27184
  • CSS column layout module example mdn/css-examples#140

• Conditional Rules CSS Module: Conditional Rules #188

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms
  • https://drafts.csswg.org/css-conditional-5/

• CSS Containment

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms
  • https://drafts.csswg.org/css-contain-3/

• CSS Counter Styles CSS Modules: Counter Styles #181

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms
  • https://drafts.csswg.org/css-counter-styles-3/

• CSS Custom Highlight API

  • New page needed? YES. API is documented. Need to add to CSS
  • https://drafts.csswg.org/css-highlight-api-1/
  • ::highlight() pseudo-element and Highlight and HighlightRegistry interfaces

• CSS Display

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms
  • https://drafts.csswg.org/css-display-4/

• CSS Easing Functions

  • New page
  • https://drafts.csswg.org/css-easing-2/

• CSS Expressive Generalizations and Gadgetry Level 1 - Is this real or a joke?

  • New page
  • https://drafts.csswg.org/css-egg-1/

• CSS Environment Variables

  • https://drafts.csswg.org/css-env-1/
  • New page

• CSS Exclusions

  • Determine if needed (wrap-through and wrap-flow properties)
  • https://drafts.csswg.org/css-exclusions-1/
  • New page

• CSS extensions

  • Determine if needed (Custom Properties, Functions, Selector Combinators ,and At-Rules)
  • https://drafts.csswg.org/css-extensions-1/

• CSS Flexible Box Layout Flexbox #202

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms
  • https://drafts.csswg.org/css-flexbox/

• Font loading: CSS Modue: font loading #177

  • https://drafts.csswg.org/css-font-loading-3/
  • fontFace, fontFaceSet, and FontFaceSource interfaces
  • NEW PAGE needed (mostly JS CSS spec)

• CSS Fonts: CSS Module: Fonts #176

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms
  • https://drafts.csswg.org/css-fonts/

• CSS Form Styling - NOT DOING

  • https://drafts.csswg.org/css-forms-1/

• CSS Fragmentation

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms
  • https://drafts.csswg.org/css-break-3/

• CSS content CSS Module: Generated Content #180

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms
  • https://drafts.csswg.org/css-content-3/

• CSS Generated Content for Paged Media - NOT READY

  • New page needed? NO
  • https://drafts.csswg.org/css-gcpm/
  • string-set, footnote-display, footnote-policy properties, content(), string(), running(), and element() value, and ::footnote-call & ::footnote-marker pseudo-elements

• CSS Grid Layout

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms
  • https://drafts.csswg.org/css-grid/

• CSS Images

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms
  • https://drafts.csswg.org/css-images/

• CSS Inline Layout Module Level 3 - New module: css inline layout mdn/content#36582

  • New page needed? Yes. initial-letter-align is defined.
  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms
  • https://drafts.csswg.org/css-inline-3/

• CSS Line Grid Module

  • New page
  • https://drafts.csswg.org/css-line-grid-1/
  • page needed? NO. Line-grid and box-snap not yet supported, though -webkit-line-snap exists.

• CSS lists CSS Lists #183

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

• CSS logical properties and values CSS Logical Properties and Values #205

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

• CSS Masking

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

• CSS Miscellaneous

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

• CSS Motion Path

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

• CSS Namespace CSS Modules: Namespaces #170

  • New page
  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

• CSS Overflow - CSS overflow module mdn/content#26425

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

• CSS Paged Media

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

• CSS Positioned Layout

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

• CSS pseudo elements New Module: CSS pseudo elements  #163

  • New page
  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

• CSS Ruby Layout

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

• CSS scoping CSS Scoping module #166

  • New page
  • brief (5-paragraph approx) Description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

• Scroll driven animations Document scroll driven animations mdn/content#26544

  • New page
  • brief (5-paragraph approx) description Add docs for CSS Scroll-driven animations mdn/content#27075
  • properties
  • data types
  • associated properties
  • glossary terms
  • Author: ChrisMills

• Scroll snap web/css/css_scroll_snap/ - #155

  • New page
  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

• CSS Scroll Snap Points Page needs to be deleted and redirected mdn/content#26426

  • Redirect page to CSS scroll-snap

• web/css/css_scrollbars/ - #154 CSS scrollbar styles

  • New page
  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

• CSS selectors New module landing: CSS Selectors #164

  • New page
  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

• CSS Shadow Parts

  • New page
  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

• CSS shapes CSS Module: CSS Shapes #204

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

• CSS Table - CSS modules: CSS table mdn/content#33236

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

• CSS Text - CSS module: css text mdn/content#36470

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

• CSS Text Decoration

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

• CSS Transforms

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

• CSS Transitions

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

• CSS Custom Properties for Cascading Variables

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

• CSS Writing Modes

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

• CSSOM View

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

• Filter Effects

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

• Media queries Media queries #192

  • brief (5-paragraph approx) description
  • demonstration example
  • properties
  • data types
  • associated properties
  • glossary terms

[estelle]

Side projects:

• - add links to all filter function pages to the properties that use them Add see also to <filter-function> and related pages mdn/content#24234

• - create filter effects guide

• - make filter a normal property page. - CSS property page: filter mdn/content#24417

• - update css-examples repo to include:

  • - lang attribute
  • - charset meta tag
  • - viewport meta tag
  • - title

• Rewrite filter property page. CSS property page: filter mdn/content#24417 CSS property page: filter mdn/content#24417

• Rewrite all the filter-function and sub pages:

  • Add see also to all the sub pages (https://github.com/mdn/content/pull/24234/files)
  • filter-function
  • blur()
  • brightness() Filter function: brightness() mdn/content#25057
  • contrast() - CSS filter function: contrast() mdn/content#24990
  • drop-shadow()
  • grayscale()
  • hue-rotate() - hue-rotate() filter function. Add SVG back in. mdn/content#24968
  • invert()
  • opacity()
  • saturate()
  • sepia()

• Update SVG fecolormatrix attributes #24966

• Using CSS filter effect guide - New page: CSS filter functions guide mdn/content#26096

• - Add accent-color to form styling guide. Advanced form styling should mention accent-color mdn/content#24304

• Colors

  • <hue> page - Minor: tweaks to color-mix() and hue mdn/content#25685
  • colors and luminance - Color and luminance mdn/content#25133
  • color blindness - Add color blindness tool to article mdn/content#26356

• - Overflow

  • - overflow-ink glossary - New glossary: ink overflow mdn/content#26369
  • - <overflow> values page - New page: overflow values mdn/content#26395
    • - BCD for <overflow> - New BCD: <overflow> value type mdn/browser-compat-data#19483
    • - Data for <overflow> - New data type: overflow mdn/data#662
  • add clip value to overflow-inline - add clip to overflow-inline mdn/content#26396
  • add clip value to overflow-block - overflow-block: add clip mdn/content#26420
  • add links to overflow values page on overflow, -x, -y, -inline, and -block - Overflow: add <overflow> and see also mdn/content#26543

• Multicolumn layout - Edit all the multi-column guides Updates: CSS Multicol guides mdn/content#27058 and Minor: added guide to see also mdn/content#27054

  • remove "when supported"
  • differentiate between fragmentation and multicol specs.
  • Grammar issues
  • Ensure the guides are linked elsewhere in the site.

[itsuka-dev]

It looks like font-variant-emoji is missing from CSS Fonts Module page: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts

Also, I just wanted to say a big thank you for all the hard work you put into this massive project.

[estelle]

Still need to look at:

• CSS Working Group Editor Drafts
• CSS Box Model Module Level 3
• CSS Linked Parameters
• CSS Lists and Counters Module Level 3
• CSS Logical Properties and Values Level 1
• CSS Mobile Profile 2.0
• CSS Multi-column Layout Module Level 2
• CSS Multi-column Layout Module Level 1
• CSS Namespaces Module Level 3
• [CSS Properties and Values API(https://drafts.css-houdini.org/css-properties-values-api-1)
• CSS Spatial Navigation Level 1
• CSS Nesting Module
• CSS Overflow Module Level 3
• CSS Overscroll Behavior Module Level 1
• CSS Paged Media Module Level 3
• CSS Page Floats
• CSS Pagination Templates Module Level 3
• CSS Positioned Layout Module Level 3
• CSS Presentation Levels Module
• CSS Print Profile
• CSS Pseudo-Elements Module Level 4
• CSS Regions Module Level 1
• CSS Rhythmic Sizing
• CSS Round Display Level 1
• CSS Ruby Annotation Layout Module Level 1
• CSS Scoping Module Level 1
• CSS Scroll Anchoring Module Level 1
• CSS Scroll Snap Module Level 1
• CSS Scrollbars Styling Module Level 1
• CSS Shadow Parts
• CSS Shapes Module Level 1
• CSS Mobile Text Size Adjustment Module Level 1
• CSS Box Sizing Module Level 3 - CSS module: box sizing & box model mdn/content#33182
• CSS Speech Module Level 1
• CSS Style Attributes
• CSS Syntax Module Level 3 - CSS Charsets #186
• CSS Table Module Level 3 (NOT READY) CSS modules: CSS table mdn/content#33236
• CSS Template Layout Module
• CSS Text Module Level 3
• CSS Text Decoration Module Level 3
• CSS Transforms Module Level 1
• CSS Transitions
• CSS TV Profile 1.0
• CSS Basic User Interface Module Level 3 (CSS3 UI)
• CSS Values and Units Module Level 4
• CSS Basic User Interface Module Level 4
• CSS Custom Properties for Cascading Variables Module Level 1
• CSS View Transitions Module Level 1
• CSS Viewport Module Level 1
• CSS Will Change Module Level 1
• CSS Writing Modes Level 4
• CSS Object Model (CSSOM)
• CSSOM View Module
• Media Queries Level 4
• Resize Observer
• Scroll-driven Animations
• Selectors Level 4
• Web Animations Level 2
• Non-element Selectors Module Level 1

[bsmth]

Hey @estelle - I've just opened a PR for the Properties and Values API -> mdn/content#30503 it adds a module landing page for this, plus touches the "CSS Custom Properties for Cascading Variables" page. Do you want to take a look?

[estelle]

Hey @estelle - I've just opened a PR for the Properties and Values API -> mdn/content#30503 it adds a module landing page for this, plus touches the "CSS Custom Properties for Cascading Variables" page. Do you want to take a look?

Thanks. Feedback provided!

[zfox23]

hi @estelle 😄 this week, as part of the mdn content team's scheduled work, i am going to make improvements to CSS transforms by adding more information to that Module page and by writing an additional Guide. i am writing this here so that you or someone with whom you work does not duplicate this effort. ty!

[estelle]

hi @estelle 😄 this week, as part of the mdn content team's scheduled work, i am going to make improvements to CSS transforms by adding more information to that Module page and by writing an additional Guide. i am writing this here so that you or someone with whom you work does not duplicate this effort. ty!

Thanks @zfox23
Please take a look at https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Page_structures/Page_types/CSS_module_landing_page_template for the css module landing page template; or some of the pages with all the boxes checked in the project list above.

[estelle]

hi @estelle 😄 this week, as part of the mdn content team's scheduled work, i am going to make improvements to CSS transforms by adding more information

Just took a look. There is a lot of content missing from that page. The list at https://drafts.csswg.org/css-transforms/#index-defined-here provides a good overview of what should be on that page.

Some of https://drafts.csswg.org/css-transforms/#index-defined-elsewhere can be in the "related concepts" section (like "interpolation"). Related concepts likely should also include animations and transition references as most people consider them related

[dipikabh]

Hi @estelle, I wanted to let you know that I am planning to pick up this task as part of our Interop project:

• CSS Overscroll Behavior Module Level 1

Please feel free to let me know if you had anything specific in mind for this module, anything I should pay attention to, since you worked on the related overflow and scroll-snap module pages. I can ping you here when I have a PR ready.

[dipikabh]

Hi @estelle, I have a PR ready for the overscroll behavior module landing page. I'd appreciate if you can take a look when you get the chance: mdn/content#30981