Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New module: CSS units and values #38218

Merged
merged 17 commits into from
Feb 20, 2025
Merged

New module: CSS units and values #38218

merged 17 commits into from
Feb 20, 2025

Conversation

estelle
Copy link
Member

@estelle estelle commented Feb 18, 2025

CSS units and values module landing page.

Created a landing page for the module. /en-US/docs/Web/CSS/CSS_Values_and_Units is basically a new page.

The two guides, /en-US/docs/Web/CSS/CSS_Values_and_Units/numeric_data_types and
/en-US/docs/Web/CSS/CSS_Values_and_Units/textual_data_types were part of the landing page and have been moved to sub pages The content is not edited other than front matter, headers and links. So, they don't need a full review (unless you want to).

Other edits are links to both these pages, and a few titbits i noticed as i made those edits.

@estelle estelle requested review from a team as code owners February 18, 2025 20:48
@estelle estelle requested review from chrisdavidmills and wbamberg and removed request for a team February 18, 2025 20:48
@github-actions github-actions bot added Content:CSS Cascading Style Sheets docs Content:WebAPI Web API docs Content:Learn Learning area docs size/l [PR only] 501-1000 LoC changed labels Feb 18, 2025
@github-actions github-actions bot removed the Content:Learn Learning area docs label Feb 18, 2025
Copy link
Contributor

github-actions bot commented Feb 18, 2025

Preview URLs (26 pages)
Flaws (133)

Note! 12 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units
Title: CSS values and units
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/color_wheel is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/color_wheel which is a redirect

URL: /en-US/docs/Web/CSS/Reference
Title: CSS reference
Flaw count: 57

  • broken_links:
    • /en-US/docs/Web/CSS/CSS_Values_and_Units/ is a redirect
  • macros:
    • Macro produces link /en-US/docs/Web/CSS/-webkit-line-clamp which is a redirect
    • Can't resolve /en-US/docs/Web/CSS/:active-view-transition
    • Can't resolve /en-US/docs/Web/CSS/:active-view-transition-type()
    • Can't resolve /en-US/docs/Web/CSS/an-plus-b
    • Can't resolve /en-US/docs/Web/CSS/anchor-scope
    • and 51 more flaws omitted

URL: /en-US/docs/Web/CSS/string
Title: <string>
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/character_reference is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/character_reference which is a redirect

URL: /en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox
Title: Basic concepts of flexbox
Flaw count: 6

  • broken_links:
    • /en-US/docs/Glossary/main_axis is ill cased
    • /en-US/docs/Glossary/cross_axis is ill cased
    • /en-US/docs/Glossary/flex_container is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/main_axis which is a redirect
    • Macro produces link /en-US/docs/Glossary/cross_axis which is a redirect
    • Macro produces link /en-US/docs/Glossary/flex_container which is a redirect

URL: /en-US/docs/Web/CSS/attr
Title: attr()
Flaw count: 4

  • broken_links:
    • Can't resolve /en-US/docs/Web/CSS/declaration-value
    • Can't resolve /en-US/docs/Web/CSS/ident-token
    • Can't resolve /en-US/docs/Web/CSS/ident-token
    • Can't resolve /en-US/docs/Web/CSS/attr-unit

URL: /en-US/docs/Web/CSS/length
Title: <length>
Flaw count: 16

  • broken_links:
    • /en-US/docs/Glossary/viewport is ill cased
    • /en-US/docs/Glossary/advance_measure is ill cased
    • /en-US/docs/Glossary/advance_measure is ill cased
    • /en-US/docs/Glossary/advance_measure is ill cased
    • /en-US/docs/Glossary/viewport is ill cased
    • and 3 more flaws omitted
  • macros:
    • Macro produces link /en-US/docs/Glossary/viewport which is a redirect
    • Macro produces link /en-US/docs/Glossary/advance_measure which is a redirect
    • Macro produces link /en-US/docs/Glossary/advance_measure which is a redirect
    • Macro produces link /en-US/docs/Glossary/advance_measure which is a redirect
    • Macro produces link /en-US/docs/Glossary/viewport which is a redirect
    • and 3 more flaws omitted

URL: /en-US/docs/Web/CSS/var
Title: var()
Flaw count: 2

  • broken_links:
    • Can't resolve /en-US/docs/Web/CSS/custom-property-name
    • Can't resolve /en-US/docs/Web/CSS/declaration-value

URL: /en-US/docs/Web/CSS/text-spacing-trim
Title: text-spacing-trim
Flaw count: 3

  • macros:
    • Macro produces link /en-US/docs/Web/CSS/initial_value which is a redirect
    • Macro produces link /en-US/docs/Web/CSS/inheritance which is a redirect
    • Macro produces link /en-US/docs/Web/CSS/computed_value which is a redirect

URL: /en-US/docs/Web/CSS/percentage
Title: <percentage>
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/interpolation is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/interpolation which is a redirect

URL: /en-US/docs/Web/CSS/@media
Title: @media
Flaw count: 6

  • broken_links:
    • /en-US/docs/Glossary/user_agent is ill cased
    • /en-US/docs/Glossary/aspect_ratio is ill cased
    • Can't resolve /en-US/docs/Web/CSS/media-query-list
    • Can't resolve /en-US/docs/Web/CSS/rule-list
  • macros:
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect
    • Macro produces link /en-US/docs/Glossary/aspect_ratio which is a redirect

URL: /en-US/docs/Web/CSS/CSS_Values_and_Units
Title: CSS values and units
Flaw count: 17

  • broken_links:
    • /en-US/docs/Glossary/advance_measure is ill cased
    • /en-US/docs/Glossary/device_pixel is ill cased
    • /en-US/docs/Glossary/identifier is ill cased
    • /en-US/docs/Glossary/interpolation is ill cased
    • /en-US/docs/Glossary/keyword is ill cased
    • and 4 more flaws omitted
  • macros:
    • Macro produces link /en-US/docs/Web/CSS/url which is a redirect
    • Macro produces link /en-US/docs/Glossary/advance_measure which is a redirect
    • Macro produces link /en-US/docs/Glossary/device_pixel which is a redirect
    • Macro produces link /en-US/docs/Glossary/identifier which is a redirect
    • Macro produces link /en-US/docs/Glossary/interpolation which is a redirect
    • and 3 more flaws omitted

URL: /en-US/docs/Web/CSS/CSS_Values_and_Units/Textual_data_types
Title: Textual data types
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/enumerated is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/enumerated which is a redirect

URL: /en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types
Title: CSS data types
Flaw count: 9

  • broken_links:
    • /en-US/docs/Glossary/color_wheel is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/color_wheel which is a redirect
    • Can't resolve /en-US/docs/Web/CSS/color-stop-list
    • Can't resolve /en-US/docs/Web/CSS/linear-color-stop
    • Can't resolve /en-US/docs/Web/CSS/linear-color-hint
    • Can't resolve /en-US/docs/Web/CSS/ending-shape
    • and 3 more flaws omitted

URL: /en-US/docs/Web/CSS/CSS_Values_and_Units/Numeric_data_types
Title: Numeric data types
Flaw count: 5

  • broken_links:
    • /en-US/docs/Web/HTML/Element/HTML is ill cased
    • /en-US/docs/Web/SVG/Element/SVG is ill cased
  • macros:
    • Macro produces link /en-US/docs/Web/HTML/Element/HTML which is a redirect
    • Macro produces link /en-US/docs/Web/SVG/Element/SVG which is a redirect
    • Can't resolve /en-US/docs/Web/CSS/toggle
External URLs (4)

URL: /en-US/docs/Web/CSS/exp
Title: exp()


URL: /en-US/docs/Web/CSS/CSS_Values_and_Units/Numeric_data_types
Title: Numeric data types

(comment last updated: 2025-02-20 09:34:27)

@estelle estelle marked this pull request as draft February 18, 2025 20:49
@github-actions github-actions bot added the Content:Learn Learning area docs label Feb 19, 2025
@estelle estelle marked this pull request as ready for review February 19, 2025 01:10
@estelle estelle changed the title DRAFT: New module: CSS units and values New module: CSS units and values Feb 19, 2025
@sideshowbarker sideshowbarker removed the request for review from a team February 19, 2025 07:28
Copy link
Contributor

@chrisdavidmills chrisdavidmills left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@estelle good work; few comments for you, but nothing too major.

- [`vw`](/en-US/docs/Web/CSS/length#vw)
- [`x`](/en-US/docs/Web/CSS/length#x)

[Flex units](/en-US/docs/Web/CSS/CSS_Values_and_Units/numeric_data_types#flex_units) (`fr`) and [container units](/en-US/docs/Web/CSS/CSS_Values_and_Units/numeric_data_types#container_units) (`cqb`,`cqh`,`cqi`,`cqmax`,`cqmin`,`cqw`) are defined in the [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) and [CSS containment](/en-US/docs/Web/CSS/CSS_containment) modules, respectively.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Container units are now specified in the Conditional rules spec: https://www.w3.org/TR/css-conditional-5/#container-lengths. Would it be a good idea to make this correct as per the current state of the specs, even thought we currently document container queries as being part of CSS containment? We will need to update the structure of those spec pages soon anyway, because of this.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good catch.thanks.


- [Textual data types](/en-US/docs/Web/CSS/CSS_Values_and_Units/Textual_Data_Types)

- : Overview of the textual data types, including pre-defined keyword values, global css keyword values, and URLs.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- : Overview of the textual data types, including pre-defined keyword values, global css keyword values, and URLs.
- : Overview of the textual data types, including pre-defined keyword values, global CSS keyword values, and URLs.


- [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax)

- : The formal grammar used to define the set of valid values for CSS properties and function.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- : The formal grammar used to define the set of valid values for CSS properties and function.
- : The formal grammar used to define the set of valid values for CSS properties and functions.

- [CSS Basic Data Types](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types)
- [Learn: Values and units](/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units)
- [Trigonometric functions in CSS](https://web.dev/articles/css-trig-functions)
- {{cssxref("initial")}}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As I said in an earlier comment, it feels like these CSS-wide, or global, values should be put in their own section, a list in the "Related" section, as they are quite significant.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

moved to related concepts under cascade and inheritance grouping.


Every CSS declaration includes a property / value pair. Depending on the property, the value can include a single integer or keyword, to a series of keywords and values with or without units. There are a common set of data types — values and units — that CSS properties accept. Below is an overview of the textual data types. Refer to the page for each value type for more detailed information.

## Textual data types
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The section structure of this page is weird, as-is. In the right-hand sidebar, you've only got "Textual data types", "Specifications", and "See also". And this page is all about Textual data types, so why is there an h2 of "Textual data types"?

I'd suggest changing the "Textual data types" h2 to something like "Summary of textual data types", and then promoting the "Pre-defined keyword values", "CSS-wide values", and "URLs" h3s to h2s.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

agree. updated.

@@ -189,5 +189,5 @@ span {
- [Using CSS gradients](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients)
- Gradient functions: {{cssxref("gradient/linear-gradient", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}}
- [CSS Basic Data Types](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types)
- [CSS Units and Values](/en-US/docs/Web/CSS/CSS_Values_and_Units)
- [CSS units and values](/en-US/docs/Web/CSS/CSS_Values_and_Units) module
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- [CSS units and values](/en-US/docs/Web/CSS/CSS_Values_and_Units) module
- [CSS values and units](/en-US/docs/Web/CSS/CSS_Values_and_Units) module

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good catch

@@ -58,6 +58,6 @@ awesome string"

## See also

- [CSS Units and Values](/en-US/docs/Web/CSS/CSS_Values_and_Units)
- [CSS Basic Data Types](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types)
- [CSS units and values](/en-US/docs/Web/CSS/CSS_Values_and_Units) module
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- [CSS units and values](/en-US/docs/Web/CSS/CSS_Values_and_Units) module
- [CSS values and units](/en-US/docs/Web/CSS/CSS_Values_and_Units) module

@estelle
Copy link
Member Author

estelle commented Feb 19, 2025

@estelle
Copy link
Member Author

estelle commented Feb 19, 2025

part of openwebdocs/project#220

@estelle
Copy link
Member Author

estelle commented Feb 20, 2025

@chrisdavidmills Thanks for the excellent review. I think I've addressed everything. I'm leaving the intro sentence as most will not be comeing from landing page. otherwise, updated based on your other comments.

Copy link
Contributor

@chrisdavidmills chrisdavidmills left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lovely, thanks @estelle. Your updates all look good; I'm approving and merging this now.

Full disclosure — I did a bit of messing around with the intro text for the numeric and textual data types pages, to use some of my text from the main values and units pages, but tailor it to be more about data types.

I thought you'd prefer me to get it done rather than go through another round of review, but let me know if you would like to see some more changes there, and I can open another PR.

@chrisdavidmills chrisdavidmills merged commit 83dd196 into main Feb 20, 2025
12 checks passed
@chrisdavidmills chrisdavidmills deleted the unitsguides branch February 20, 2025 09:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Content:CSS Cascading Style Sheets docs Content:Learn Learning area docs Content:WebAPI Web API docs size/l [PR only] 501-1000 LoC changed
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants