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.

Sign up for GitHub

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

Jump to bottom

fix(css): add bracketed range notation #34670

Merged
merged 5 commits into from
Jul 18, 2024
Merged

fix(css): add bracketed range notation #34670

Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8462ae2
fix(css): add bracked range notation
OnkarRuikar Jul 6, 2024
7ef093d
add section seperator
OnkarRuikar Jul 6, 2024
15dd86f
Apply suggestions from code review
OnkarRuikar Jul 8, 2024
fafd72d
update curly entry in the table
OnkarRuikar Jul 8, 2024
dc3a3e5
small grammar fixes
chrisdavidmills Jul 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 23 additions & 1 deletion files/en-us/web/css/value_definition_syntax/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ The definition syntax describes which values are allowed and the interactions be

#### Generic keywords

A keyword with a predefined meaning appears literally, without quotation marks. For example: `auto`, `smaller` or `ease-in`.
A keyword with a predefined meaning appears literally, without quotation marks. For example: `auto`, `smaller`, or `ease-in`.

#### The specific case of `inherit`, `initial` and `unset`

Expand Down Expand Up @@ -304,6 +304,19 @@ But not:
- `smaller bold`, as `bold` is juxtaposed and must appear before the `smaller` keyword.
- `bold smaller bold`, as `bold` and `smaller` may only appear once.

## Bracketed range notation (`[,]`)
OnkarRuikar marked this conversation as resolved.
Show resolved Hide resolved

Some properties take numeric values that can be in a limited range, and any value out of the range makes the declarations invalid and the declaration is ignored. For example, the [`column-count`](/en-US/docs/Web/CSS/column-count) property can have values from 1 to positive infinity only.
OnkarRuikar marked this conversation as resolved.
Show resolved Hide resolved

The _bracketed range notation_ `[min, max]` indicates the range between `min` and `max` values. The range includes `min` and `max` values as well. The range notation is used in numeric type notations, e.g. `<angle [0,180deg]>`. Infinities, -∞ and ∞, must not have units specified. Zero values can be written without units, even zero seconds.
OnkarRuikar marked this conversation as resolved.
Show resolved Hide resolved

Following are some examples:
OnkarRuikar marked this conversation as resolved.
Show resolved Hide resolved

- `<integer>` or `<integer [-∞,∞]>` - any integer from negative infinity to positive infinity
OnkarRuikar marked this conversation as resolved.
Show resolved Hide resolved
- `<integer [0,∞]>` - negative integers not allowed
OnkarRuikar marked this conversation as resolved.
Show resolved Hide resolved
- `<time [0s,10s]>` or `<time [0,10s]>` - time less than 11 seconds
OnkarRuikar marked this conversation as resolved.
Show resolved Hide resolved
- `<integer [-∞,-1]> | <integer [1,∞]>` - any integer except zero
OnkarRuikar marked this conversation as resolved.
Show resolved Hide resolved

## Summary

<table class="standard-table">
Expand Down Expand Up @@ -402,6 +415,15 @@ But not:
<td>Group must produce at least 1 value</td>
<td><code>[ bold? smaller? ]!</code></td>
</tr>
<tr>
<th colspan="4">Ranges</th>
</tr>
<tr>
<td><code>[,]</code></td>
OnkarRuikar marked this conversation as resolved.
Show resolved Hide resolved
<td>Numeric bracketed range</td>
<td>Specifies a numeric range</td>
<td><code>&#x3C;integer [0,∞]></code></td>
</tr>
</tbody>
</table>

Expand Down