[csswg-drafts] [css-variables] User Agent properties and variables

grorg has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-variables] User Agent properties and variables ==
Here is WebKit's proposal for a new type of property and variable.

User Agent Properties
====

This specification defines an open-ended set of properties called 'User Agent
properties', which, among other things, are used to define the substitution
value of 'constant()' functions.

Name: (various)
Value: <declaration-value>
Initial: (nothing, see prose)
Applies to: all elements
Inherited: yes
Percentages: n/a
Media: all
Computed value: specified value with variables substituted (but see prose for "invalid variables")
Canonical order: per grammar
Animatable: no

A User Agent property is not specified in a style sheet. User Agent properties
instead define variables, referenced with the 'constant()' notation.
For example, a page that wants to use the user's requested font sizing, and page
background:

'''
:root {
  font-size: constant(user-font-size);
}

body {
  background-color: constant(user-background-color);
}
'''

Unlike other CSS properties, User Agent property names are case-sensitive.

User Agent properties are not reset by the all property. If a style rule attempts to
define a value for a User Agent property, it is ignored.


Using Cascading User Agent Variables: the 'constant()' notation
====

The value of a 'User Agent property' can be substituted into the value of another
property with the constant() function. The syntax of constant() is:

'''
constant() = constant( <user-agent-property-name> [, <declaration-value> ]? )
'''

The 'constant()' function is used in the same manner, and follows the same rules,
as the 'var()' function.

Defined User Agent Variables
====

- 'user-font-size': User's requested font size
- 'user-background-color': User's requested background color
- 'user-foreground-color': User's requested foreground color
- 'safe-area-inset-top': Inset, as a '&lt;length&gt;' from the top of the viewport to the title-safe content area.
- 'safe-area-inset-right': Inset, as a '&lt;length&gt;' from the right of the viewport to the title-safe content area.
- 'safe-area-inset-left': Inset, as a '&lt;length&gt;' from the left of the viewport to the title-safe content area.
- 'safe-area-inset-bottom': Inset, as a '&lt;length&gt;' from the bottom of the viewport to the title-safe content area.



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1693 using your GitHub account

Received on Friday, 4 August 2017 08:07:33 UTC