Question

In a css property, there are certain value declarations that look like functions, eg

background: rgba(0,0,0,0);

or

background-image: url('bg.png');

The first part is called the property, eg background and background-image. The second part in general is called the value. But what is the part outside of the parentheses called, eg rgba(...) and url(...).

Thanks!

Answer 1

Generically, they’re just called "<whatever> notations"; see this part of the spec for example:

The image() function allows an author to:

• use media fragments to clip out a portion of an image
• specify fallback images in case the preferred image can’t be decoded or is a type that > the browser doesn’t recognize
• use a solid color as an image
• annotate an image with a directionality

The image() notation is defined as:

<image-list> = image( [ <image-decl> , ]* [ <image-decl> | <color> ] )
<image-decl> = [ <url> | <string> | <element-reference> ]

Each <string> or <url> inside image() represents an image, just as if the url() notation had been used. As usual for URLs in CSS, relative URLs are resolved to an absolute URL (as described in Values & Units [CSS3VAL]) when a specified image() value is computed.

So url('bg.png') is the url() notation. However, you can get more specific. Values that represent images, such as:

• linear-gradient(red, white)
• url('../images/hello.png')
• radial-gradient(orange, yellow)
• cross-fade(image1, image2)

Are called image values. This applies to things like rect(), too, which is a shape value¹. As for calc(), that’s just generally called an expression, I believe.

_{¹ Note that in the sidebar, rect() is also referred to as a function.}