A fraction value is a <number> followed by the label fr. Thus, one fraction unit is 1fr, four fraction units are 4fr, and so on. This is a concept introduced by Grid Layout, and is used to divide up fractions of the unconstrained space in a layout. Note that fr is not a <length> unit, and thus cannot be used in places where length values are permitted (e.g., calc() expressions, see “Calculation Values”).
A URI value (<uri>) is a reference to a file such as a graphic or another stylesheet. CSS defines a URI as relative to the stylesheet that contains it. URI stands for Uniform Resource Identifier, which is the more recent name for URLs. (Technically, URLs are a subset of URIs.) In CSS, which was first defined when URIs were still called URLs, this means that references to URIs will often appear in the form url(<uri>). Fun!
The format of an <angle> is expressed as a <number> followed immediately by an angle unit. There are four types of angle units: degrees (deg), grads (grad), radians (rad), and turns (turn). For example, a right angle could be declared as 90deg, 100grad, 1.571rad, or 0.25turn. In each case, the values are translated into degrees in the range 0 through 360. This is also true of negative values: −90deg is equivalent to 270deg.
A time value (<time>) is expressed as a <number> followed immediately by a time unit. There are two types of time units: seconds (s) and milliseconds (ms). Time values appear in aural styles, which are not widely supported, and in the much better-supported transitions and animations.
A frequency value (<frequency>) is expressed as a non-negative <number> followed immediately by a frequency unit. There are two types of frequency units: hertz (Hz) and kilohertz (kHz). The unit identifiers are case-insensitive, so 6kHz and 6khz are equivalent. As of this writing, frequency values are only used with aural styles, which are not well supported.
A position value (<position>) is how you specify the placement of an origin image in backgrounds, object fitting, masking placement, and a few other circumstances. Its syntactical structure is rather complicated:
[
[ left | center | right | top | bottom | <percentage> | <length> ] |
[ left | center | right | <percentage> | <length> ]
[ top | center | bottom | <percentage> | <length> ] |
[ center | [ left | right ] [ <percentage> | <length> ]? ] &&
[ center | [ top | bottom ] [ <percentage> | <length> ]? ]
]
That might seem a little convoluted and repetitive, but it’s all down to the subtly complex patterns that this value type has to allow, such as center, bottom right, 50% center, left 77px, and so on. The notation used here is described in “Value Syntax Conventions”.
A string (<string>) is a series of characters enclosed by either single or double quotes. If a string needs to include the same quote that encloses it, it must be escaped. For example, ‘That\’s amazing!’ or “Deploy the \”scare quotes\” at once!”. If a newline is needed within a string, it is represented as \A, which is the Unicode codepoint for the line feed character. Any Unicode character can be represented using an escaped codepoint reference; thus, a left curly double quotation mark can be represented with \201C. If a string does contain a line feed for legibility reasons, it must be escaped and will be removed when processing the string.
There are some properties that accept an identifier value, which is a user-defined label of some kind; the most common examples are grid lines and areas in grid layout and keyframe names in animations. Identifiers are represented in the value syntax as <identifier>. Identifiers are words and are case-sensitive; thus, myID and MyID are, as far as CSS is concerned, completely distinct and unrelated to each other. In cases where a property accepts both an identifier and one or more keywords, the author should take care to never define an identifier identical to a valid keyword.
In a few CSS properties, it’s possible to pull in the value of an HTML attribute defined for the element being styled. This is done with the attr() value. As of early 2018, this is almost exclusively done with generated content, using the content property.
For example, h2::before {content: “[” attr(ID) “] “;} will insert an opening square bracket, the ID of the h2 element, and then a closing square bracket and trailing space. Any attribute, including HTML data-* attributes, can be addressed in this manner.
Calculation values take the form calc(), with an equation inside the parentheses. calc() can be used wherever <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> values are allowed. You can also use all these unit types within a calc() value, though there are some limitations to keep in mind.
Inside the parentheses, you can construct simple mathematical expressions. The permitted operators are + (addition), – (subtraction), * (multiplcation), and / (division), as well as parentheses. These follow the traditional PEMDAS (parentheses, exponents, multiplication, division, addition, subtraction) precedence order—although in this case it’s really just PMDAS, since as of early 2018, exponents are not permitted in calc().
The basic limitation is that calc() does simple type-checking to make sure that units are compatible:
There’s one more notable limitation: whitespace is required to either side of the + and – operators, while it is not for * and /. This avoids ambiguity with respect to numeric values, which can be negative.
The technical term for this is custom properties, even though what these really do is create (sort of) variables in your CSS. They do not, contrary to their name, create special CSS properties, in the sense of properties like color or font.
Custom properties are defined by giving a custom identifier a value, like this:
html {
--mainColor: #AEA434;
}
The important thing is that any custom identifier of this type begins with two hyphens (–). Anything else, and the identifier will not be recognized, meaning the variable definition will fail.
The defined value can then be invoked later on using a var() value type, like this:
h1 {color: var(--mainColor);}
Note that these names are case-sensitive, so –maincolor and –MainColor are completely separate identifiers. Custom properties are scoped to the element to which they are applied.
Got Something To Say: