-
Notifications
You must be signed in to change notification settings - Fork 22.6k
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
Conversation
files/en-us/learn_web_development/core/styling_basics/what_is_css/index.md
Outdated
Show resolved
Hide resolved
Preview URLs (26 pages)
Flaws (133)Note! 12 documents with no flaws that don't need to be listed. 🎉 URL:
URL:
URL:
URL:
URL:
URL:
URL:
URL:
URL:
URL:
URL:
URL:
URL:
URL:
External URLs (4)URL:
URL:
(comment last updated: 2025-02-20 09:34:27) |
There was a problem hiding this 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. |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- : 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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- : 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")}} |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
files/en-us/web/css/css_values_and_units/textual_data_types/index.md
Outdated
Show resolved
Hide resolved
|
||
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 |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- [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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
good catch
files/en-us/web/css/string/index.md
Outdated
@@ -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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- [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 |
part of openwebdocs/project#218 and openwebdocs/project#147 |
part of openwebdocs/project#220 |
@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. |
There was a problem hiding this 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.
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.