gtk2/docs/reference/gtk/css-overview.xml
Matthias Clasen 84fd7cf704 Shorten CSS docs
Fold the two CSS chapters into one, make more compact
tables of selectors and properties, and stop explaining
general CSS syntax.
2020-04-18 12:34:17 -04:00

1185 lines
48 KiB
XML

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE refentry PUBLIC "-//OASIS//DTD DocBook XML V4.3//EN"
"http://www.oasis-open.org/docbook/xml/4.3/docbookx.dtd" [
]>
<refentry id="chap-css-overview">
<refmeta>
<refentrytitle>GTK CSS Overview</refentrytitle>
<manvolnum>3</manvolnum>
<refmiscinfo>GTK Library</refmiscinfo>
</refmeta>
<refnamediv>
<refname>GTK CSS Overview</refname>
<refpurpose>
The language used for style information in GTK
</refpurpose>
</refnamediv>
<refsect1 id="css">
<title>CSS in GTK</title>
<para>
This chapter describes how GTK uses CSS for styling and layout.
It is not meant to be an explanation of CSS from first principles,
but focuses on listing supported CSS features and differences
between Web CSS and GTK.
</para>
<para>
There is plenty of introductory documentation available that
can be used to learn about CSS in general. In the tables below
we include links to the official specs that can be used to look
up the definition of individual selectors and properties.
</para>
<refsect2>
<title>CSS nodes</title>
<para>
GTK applies the style information found in style sheets by matching
the selectors against a tree of nodes. Each node in the tree has a
name, a state and possibly style classes. The children of each node
are linearly ordered.
</para>
<para>
Every widget has one or more of these CSS nodes, and determines their
name, state, style classes and how they are layed out as children and
siblings in the overall node tree. The documentation for each widget
explains what CSS nodes it has.
</para>
<example>
<title>The CSS nodes of a GtkScale</title>
<programlisting><![CDATA[
scale[.fine-tune]
├── marks.top
│ ├── mark
┊ ┊
│ ╰── mark
├── trough
│ ├── slider
│ ├── [highlight]
│ ╰── [fill]
╰── marks.bottom
├── mark
╰── mark
]]></programlisting>
</example>
</refsect2>
<refsect2>
<title>Selectors</title>
<para>
Selectors work very similar to the way they do on the web.
</para>
<para>
All widgets have one or more CSS nodes with element names and style
classes. When style classes are used in selectors, they have to be prefixed
with a period. Widget names can be used in selectors like IDs. When used
in a selector, widget names must be prefixed with a &num; character.
</para>
<table>
<title>GTK CSS Selectors</title>
<tgroup cols="3">
<thead>
<row><entry>Pattern</entry><entry>Reference</entry><entry>Notes</entry></row>
</thead>
<tbody>
<row>
<entry>*</entry>
<entry><ulink url="https://www.w3.org/TR/css3-selectors/#universal-selector">CSS Selectors Level 3</ulink></entry>
<entry></entry>
</row>
<row>
<entry>E</entry>
<entry><ulink url="https://www.w3.org/TR/css3-selectors/#type-selectors">CSS Selectors Level 3</ulink></entry>
<entry></entry>
</row>
<row>
<entry>E.class</entry>
<entry><ulink url="https://www.w3.org/TR/css3-selectors/#class-html">CSS Selectors Level 3</ulink></entry>
<entry></entry>
</row>
<row>
<entry>E#id</entry>
<entry><ulink url="https://www.w3.org/TR/css3-selectors/#id-selectors">CSS Selectors Level 3</ulink></entry>
<entry>GTK uses the widget name as ID</entry>
</row>
<row>
<entry>E:nth-child(nth-child)</entry>
<entry><ulink url="https://www.w3.org/TR/css3-selectors/#structural-pseudos">CSS Selectors Level 3</ulink></entry>
<entry></entry>
</row>
<row>
<entry>E:nth-last-child(nth-child)</entry>
<entry><ulink url="https://www.w3.org/TR/css3-selectors/#structural-pseudos">CSS Selectors Level 3</ulink></entry>
<entry></entry>
</row>
<row>
<entry>E:first-child</entry>
<entry><ulink url="https://www.w3.org/TR/css3-selectors/#structural-pseudos">CSS Selectors Level 3</ulink></entry>
<entry></entry>
</row>
<row>
<entry>E:last-child</entry>
<entry><ulink url="https://www.w3.org/TR/css3-selectors/#structural-pseudos">CSS Selectors Level 3</ulink></entry>
<entry></entry>
</row>
<row>
<entry>E:only-child</entry>
<entry><ulink url="https://www.w3.org/TR/css3-selectors/#structural-pseudos">CSS Selectors Level 3</ulink></entry>
<entry>Equivalent to E:first-child:last-child</entry>
</row>
<row>
<entry>E:link, E:visited</entry>
<entry><ulink url="https://www.w3.org/TR/css3-selectors/#link">CSS Selectors Level 3</ulink></entry>
<entry>Corresponds to GTK_STATE_FLAG_LINK and GTK_STATE_FLAGS_VISITED</entry>
</row>
<row>
<entry>E:active, E:hover, E:focus</entry>
<entry><ulink url="https://www.w3.org/TR/css3-selectors/#useraction-pseudos">CSS Selectors Level 3</ulink></entry>
<entry>Correspond to GTK_STATE_FLAG_ACTIVE, GTK_STATE_FLAG_PRELIGHT, GTK_STATE_FLAGS_FOCUSED</entry>
</row>
<row>
<entry>E:focus-within</entry>
<entry><ulink url="https://drafts.csswg.org/selectors/#focus-within-pseudo">CSS Selectors Level 4</ulink></entry>
<entry>Set on all ancestors of the focus widget, unlike CSS</entry>
</row>
<row>
<entry>E:focus-visible</entry>
<entry><ulink url="https://drafts.csswg.org/selectors/#the-focus-visible-pseudo">CSS Selectors Level 4</ulink></entry>
<entry>Set on focus widget and all ancestors, unlike CSS</entry>
</row>
<row>
<entry>E:disabled</entry>
<entry><ulink url="https://www.w3.org/TR/css3-selectors/#UIstates">CSS Selectors Level 3</ulink></entry>
<entry>Corresponds to GTK_STATE_FLAG_INSENSITIVE</entry>
</row>
<row>
<entry>E:checked</entry>
<entry><ulink url="https://www.w3.org/TR/css3-selectors/#UIstates">CSS Selectors Level 3</ulink></entry>
<entry>Corresponds to GTK_STATE_FLAG_CHECKED</entry>
</row>
<row>
<entry>E:indeterminate</entry>
<entry><ulink url="https://www.w3.org/TR/css3-selectors/#indeterminate">CSS3 Selectors Level 3</ulink></entry>
<entry>Corresponds to GTK_STATE_FLAG_INCONSISTENT</entry>
</row>
<row>
<entry>E:backdrop, E:selected</entry>
<entry></entry>
<entry>Corresponds to GTK_STATE_FLAG_BACKDROP, GTK_STATE_FLAG_SELECTED</entry>
</row>
<row>
<entry>E:not(selector)</entry>
<entry><ulink url="https://www.w3.org/TR/css3-selectors/#negation">CSS Selectors Level 3</ulink></entry>
<entry></entry>
</row>
<row>
<entry>E:dir(ltr), E:dir(rtl)</entry>
<entry><ulink url="https://drafts.csswg.org/selectors/#the-dir-pseudo">CSS Selectors Level 4</ulink></entry>
<entry></entry>
</row>
<row>
<entry>E:drop(active)</entry>
<entry><ulink url="https://drafts.csswg.org/selectors/#drag-pseudos">CSS Selectors Level 4</ulink></entry>
<entry></entry>
</row>
<row>
<entry>E F</entry>
<entry><ulink url="https://www.w3.org/TR/css3-selectors/#descendent-combinators">CSS Selectors Level 3</ulink></entry>
<entry></entry>
</row>
<row>
<entry>E > F</entry>
<entry><ulink url="https://www.w3.org/TR/css3-selectors/#child-combinators">CSS Selectors Level 3</ulink></entry>
<entry></entry>
</row>
<row>
<entry>E ~ F</entry>
<entry><ulink url="https://www.w3.org/TR/css3-selectors/#general-sibling-combinators">CSS Selectors Level 3</ulink></entry>
<entry></entry>
</row>
<row>
<entry>E + F</entry>
<entry><ulink url="https://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators">CSS Selectors Level 3</ulink></entry>
<entry></entry>
</row>
</tbody>
</tgroup>
</table>
</refsect2>
</refsect1>
<refsect1 id="css-properties">
<title>GTK CSS Properties</title>
<para>
GTK supports CSS properties and shorthands as far as they can be applied
in the context of widgets, and adds its own properties only when needed.
All GTK-specific properties have a -gtk prefix.
</para>
<refsect2>
<title>Basic types</title>
<para>
All properties support the following keywords: inherit, initial, unset, with
the same meaning as defined in the <ulink url="https://www.w3.org/TR/css3-cascade/#defaulting-keywords">CSS Cascading and Inheritance</ulink> spec.
</para>
<para>
The following units are supported for basic datatypes:
</para>
<variablelist>
<varlistentry>
<term>Length</term><listitem> px, pt, em, ex, rem, pc, in, cm, mm, calc()</listitem>
</varlistentry>
<varlistentry>
<term>Percentage</term><listitem> %, calc()</listitem>
</varlistentry>
<varlistentry>
<term>Angle</term><listitem> deg | grad | turn, calc()</listitem>
</varlistentry>
<varlistentry>
<term>Time </term><listitem> s | ms, calc()</listitem>
</varlistentry>
</variablelist>
<para>
Length values with the em or ex units are resolved using the font
size value, unless they occur in setting the font-size itself, in
which case they are resolved using the inherited font size value.
</para>
<para>
The rem unit is resolved using the initial font size value, which is
not quite the same as the CSS definition of rem.
</para>
<para>
The calc() notation adds considerable expressive power. There are limits
on what types can be combined in such an expression (e.g. it does not make
sense to add a number and a time). For the full details, see the
<ulink url="https://www.w3.org/TR/css3-values/#calc-notation">CSS3 Values and
Units</ulink> spec.
</para>
<para>
A common pattern among shorthand properties (called 'four sides') is one
where one to four values can be specified, to determine a value for each
side of an area. In this case, the specified values are interpreted as
follows:
<variablelist>
<varlistentry>
<term>4 values: </term><listitem>top right bottom left</listitem>
</varlistentry>
<varlistentry>
<term>3 values: </term><listitem>top horizontal bottom</listitem>
</varlistentry>
<varlistentry>
<term>2 values: </term><listitem>vertical horizontal</listitem>
</varlistentry>
<varlistentry>
<term>1 value: </term><listitem>all</listitem>
</varlistentry>
</variablelist>
</para>
</refsect2>
<refsect2>
<title>Colors</title>
<para>
GTK extends the CSS syntax with several additional ways to specify colors.
</para>
<para>
The first is a reference to a color defined via a @define-color rule in CSS.
The syntax for @define-color rules is as follows:
<simplelist>
<member><literal>@define-color <replaceable>Name</replaceable> <replaceable>Color</replaceable></literal></member>
</simplelist>
</para>
<para>
To refer to the color defined by a @define-color rule, prefix the name with @.
</para>
<para>
GTK also supports color expressions, which allow colors to be transformed to
new ones. Color expressions can be nested, providing a rich language to
define colors. Color expressions resemble functions, taking 1 or more colors
and in some cases a number as arguments.
<simplelist>
<member><literal>lighter(<replaceable>Color</replaceable>)</literal> produces a brigher variant of Color</member>
<member><literal>darker(<replaceable>Color</replaceable>)</literal> produces a darker variant of Color</member>
<member><literal>shade(<replaceable>Color</replaceable>, <replaceable>Number</replaceable>)</literal> changes the lightness of Color. The number ranges from 0 for black to 2 for white.</member>
<member><literal>alpha(<replaceable>Color</replaceable>, <replaceable>Number</replaceable>)</literal> replaces the alpha value of color with number (between 0 and 1)</member>
<member><literal>mix(<replaceable>Color1</replaceable>, <replaceable>Color2</replaceable>, <replaceable>Number</replaceable>)</literal> interpolates between the two colors</member>
</simplelist>
</para>
</refsect2>
<refsect2>
<title>Images</title>
<para>
GTK extends the CSS syntax for images and also uses it for specifying icons.
To load a themed icon, use
<simplelist>
<member><literal>-gtk-icontheme(<replaceable>Name</replaceable>)</literal></member>
</simplelist>
The specified icon name is used to look up a themed icon, while taking into
account the values of the -gtk-icon-theme and -gtk-icon-palette properties.
This kind of image is mainly used as value of the -gtk-icon-source property.
</para>
<para>
Symbolic icons from the icon theme are recolored according to the
-gtk-icon-palette property, which defines a list of named colors.
The recognized names for colors in symbolic icons are error, warning
and success. The default palette maps these three names to symbolic
colors with the names @error_color, @warning_color and @success_color
respectively. The syntax for defining a custom palette is a comma-separated
list of name-color pairs, e.g.
<simplelist>
<member><literal>success blue, warning #fc3, error magenta</literal></member>
</simplelist>
</para>
<para>
Recoloring is sometimes needed for images that are not part of an icon theme,
and the
<simplelist>
<member><literal>-gtk-recolor(<replaceable>uri</replaceable>, <replaceable>palette</replaceable>)</literal></member>
</simplelist>
syntax makes this available. -gtk-recolor requires a url as first argument.
The remaining arguments specify the color palette to use. If the palette is
not explicitly specified, the current value of the -gtk-icon-palette property
is used.
</para>
<para>
GTK supports scaled rendering on hi-resolution displays. This works best if
images can specify normal and hi-resolution variants. From CSS, this can be
done with
<simplelist>
<member><literal>-gtk-scaled(<replaceable>Image1</replaceable>, <replaceable>Image2</replaceable>)</literal></member>
</simplelist>
</para>
</refsect2>
<table pgwide="1">
<title>GTK CSS Properties</title>
<tgroup cols="3">
<colspec align="left" colnum="1" colname="name"/>
<colspec align="left" colnum="2" colname="references"/>
<colspec align="left" colnum="3" colname="notes"/>
<spanspec namest="name" nameend="notes" spanname="span"/>
<thead>
<row><entry spanname="span">Color and Filter Properties</entry></row>
<row><entry>Name</entry><entry>Reference</entry><entry>Notes</entry></row>
</thead>
<tbody>
<row>
<entry>color</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-color/#foreground">CSS Color Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>opacity</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-color/#opacity">CSS Color Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>filter</entry>
<entry>
<ulink url="https://drafts.fxtf.org/filters/#FilterProperty">CSS Filter Effects Level 1</ulink>
</entry>
<entry></entry>
</row>
<row style="title"><?dbhtml class="subhead"?><entry spanname="span">Font Properties</entry></row>
<row>
<entry>font-family</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-fonts/#font-family-prop">CSS Fonts Level 3</ulink>
</entry>
<entry>defaults to gtk-font-name setting</entry>
</row>
<row>
<entry>font-size</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-fonts/#font-size-prop">CSS Fonts Level 3</ulink>
</entry>
<entry>defaults to gtk-font-name setting</entry>
</row>
<row>
<entry>font-style</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-fonts/#font-style-prop">CSS Fonts Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>font-variant</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-fonts/#descdef-font-variant">CSS Fonts Level 3</ulink>
</entry>
<entry>only CSS2 values supported</entry>
</row>
<row>
<entry>font-weight</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-fonts/#font-weight-prop">CSS Fonts Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>font-stretch</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-fonts/#font-stretch-prop">CSS Fonts Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>font-kerning</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-fonts/#font-kerning-prop">CSS Fonts Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>font-variant-ligatures</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-fonts/#font-variant-ligatures-prop">CSS Fonts Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>font-variant-position</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-fonts/#font-variant-position-prop">CSS Fonts Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>font-variant-caps</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-fonts/#font-variant-position-prop">CSS Fonts Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>font-variant-numeric</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-fonts/#font-variant-numeric-prop">CSS Fonts Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>font-variant-alternates</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-fonts/#font-variant-alternates-prop">CSS Fonts Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>font-variant-east-asian</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-fonts/#font-variant-east-asian-prop">CSS Fonts Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>font-feature-settings</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-fonts/#font-feature-settings-prop">CSS Fonts Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>font-variation-settings</entry>
<entry>
<ulink url="https://www.w3.org/TR/css-fonts-4/#font-variation-settings-def">CSS Fonts Level 4</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>-gtk-dpi</entry>
<entry><ulink url="https://www.w3.org/TR/css3-values/#number-value">Number</ulink></entry>
<entry>defaults to screen resolution</entry>
</row>
<row><?dbhtml class="subhead"?><entry namest="name" nameend="notes">Font Shorthands</entry></row>
<row>
<entry>font</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-fonts/#font-prop">CSS Fonts Level 3</ulink>
</entry>
<entry>CSS allows line-height, etc</entry>
</row>
<row>
<entry>font-variant</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-fonts/#font-variant-prop">CSS Fonts Level 3</ulink>
</entry>
<entry></entry>
</row>
<row><?dbhtml class="subhead"?><entry spanname="span">Text Caret Properties</entry></row>
<row>
<entry>caret-color</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-ui/#caret-color">CSS Basic User Interface Level 3</ulink>
</entry>
<entry>CSS allows an auto value</entry>
</row>
<row>
<entry>-gtk-secondary-caret-color</entry>
<entry><ulink url="https://www.w3.org/TR/css-color-3/#valuea-def-color">Color</ulink></entry>
<entry>used for the secondary caret in bidirectional text</entry>
</row>
<row><?dbhtml class="subhead"?><entry spanname="span">Text Decoration Properties</entry></row>
<row>
<entry>letter-spacing</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-text/#letter-spacing">CSS Text Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>text-decoration-line</entry>
<entry>
<ulink url="https://www.w3.org/TR/css-text-decor-3/#text-decoration-line-property">CSS Text Decoration Level 3</ulink>
</entry>
<entry>CSS allows overline</entry>
</row>
<row>
<entry>text-decoration-color</entry>
<entry>
<ulink url="https://www.w3.org/TR/css-text-decor-3/#text-decoration-color-property">CSS Text Decoration Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>text-decoration-style</entry>
<entry>
<ulink url="https://www.w3.org/TR/css-text-decor-3/#text-decoration-style-property">CSS Text Decoration Level 3</ulink>
</entry>
<entry>CSS allows dashed and dotted</entry>
</row>
<row>
<entry>text-shadow</entry>
<entry>
<ulink url="https://www.w3.org/TR/css-text-decor-3/#text-shadow-property">CSS Text Decoration Level 3</ulink>
</entry>
<entry></entry>
</row>
<row><?dbhtml class="subhead"?><entry spanname="span">Text Decoration Shorthands</entry></row>
<row>
<entry>text-decoration</entry>
<entry>
<ulink url="https://www.w3.org/TR/css-text-decor-3/#text-decoration-property">CSS Text Decoration Level 3</ulink>
</entry>
<entry></entry>
</row>
<row><?dbhtml class="subhead"?><entry spanname="span">Icon Properties</entry></row>
<row>
<entry>-gtk-icon-source</entry>
<entry><ulink url="https://www.w3.org/TR/css-backgrounds-3/#typedef-image">Image</ulink>, <literal>builtin</literal> or <literal>none</literal></entry>
<entry>used for builtin icons in buttons and expanders</entry>
</row>
<row>
<entry>-gtk-icon-theme</entry>
<entry>Theme name</entry>
<entry>icon theme to use with -gtk-icontheme()</entry>
</row>
<row>
<entry>-gtk-icon-size</entry>
<entry><ulink url="https://www.w3.org/TR/css3-values/#length-value">Length</ulink></entry>
<entry>size used for builtin icons in buttons and expanders</entry>
</row>
<row>
<entry>-gtk-icon-style</entry>
<entry><literal>requested</literal>, <literal>regular</literal> or <literal>symbolic</literal></entry>
<entry>preferred style for application-loaded icons</entry>
</row>
<row>
<entry>-gtk-icon-transform</entry>
<entry>
<ulink url="https://drafts.csswg.org/css-transforms-1/#typedef-transform-list">Transform list</ulink> or <literal>none</literal>
</entry>
<entry>applied to builtin and application-loaded icons</entry>
</row>
<row>
<entry>-gtk-icon-palette</entry>
<entry>Color palette, as explained above</entry>
<entry>used to recolor symbolic icons</entry>
</row>
<row>
<entry>-gtk-icon-shadow</entry>
<entry>
<ulink url="https://www.w3.org/TR/css-backgrounds-3/#typedef-shadow">Shadow</ulink> or <literal>none</literal>
</entry>
<entry>applied to builtin and application-loaded icons</entry>
</row>
<row>
<entry>-gtk-icon-filter</entry>
<entry>
<ulink url="https://www.w3.org/TR/filter-effects-1/#typedef-filter-value-list">Filter value list</ulink> or <literal>none</literal>
</entry>
<entry>applied to builtin and application-loaded icons</entry>
</row>
<row><?dbhtml class="subhead"?><entry spanname="span">Box Properties</entry></row>
<row>
<entry>transform</entry>
<entry>
<ulink url="https://drafts.csswg.org/css-transforms-2/">CSS Transforms Level 2</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>min-width</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-box/#min-width">CSS Box Model Level 3</ulink>
</entry>
<entry>CSS allows percentages</entry>
</row>
<row>
<entry>min-height</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-box/#min-height">CSS Box Model Level 3</ulink>
</entry>
<entry>CSS allows percentages</entry>
</row>
<row>
<entry>margin-top</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-box/#margin-top">CSS Box Model Level 3</ulink>
</entry>
<entry>CSS allows percentages or auto</entry>
</row>
<row>
<entry>margin-right</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-box/#margin-right">CSS Box Model Level 3</ulink>
</entry>
<entry>CSS allows percentages or auto</entry>
</row>
<row>
<entry>margin-bottom</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-box/#margin-bottom">CSS Box Model Level 3</ulink>
</entry>
<entry>CSS allows percentages or auto</entry>
</row>
<row>
<entry>margin-left</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-box/#margin-left">CSS Box Model Level 3</ulink>
</entry>
<entry>CSS allows percentages or auto</entry>
</row>
<row>
<entry>padding-top</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-box/#padding-top">CSS Box Model Level 3</ulink>
</entry>
<entry>CSS allows percentages</entry>
</row>
<row>
<entry>padding-right</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-box/#padding-right">CSS Box Model Level 3</ulink>
</entry>
<entry>CSS allows percentages</entry>
</row>
<row>
<entry>padding-bottom</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-box/#padding-bottom">CSS Box Model Level 3</ulink>
</entry>
<entry>CSS allows percentages</entry>
</row>
<row>
<entry>padding-left</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-box/#padding-left">CSS Box Model Level 3</ulink>
</entry>
<entry>CSS allows percentages</entry>
</row>
<row><?dbhtml class="subhead"?><entry spanname="span">Box Shorthands</entry></row>
<row>
<entry>margin</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-box/#margin">CSS Box Model Level 3</ulink>
</entry>
<entry>a 'four sides' property</entry>
</row>
<row>
<entry>padding</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-box/#padding">CSS Box Model Level 3</ulink>
</entry>
<entry>a 'four sides' property</entry>
</row>
<row><?dbhtml class="subhead"?><entry spanname="span">Border Properties</entry></row>
<row>
<entry>border-top-width</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#the-border-width">CSS Backgrounds and Borders Level 3</ulink></entry>
<entry>CSS allows other values</entry>
</row>
<row>
<entry>border-right-width</entry>
<entry>
<ulink url="https://www.w3.org/css3-background/#the-border-width">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry>CSS allows other values</entry>
</row>
<row>
<entry>border-bottom-width</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#the-border-width">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry>CSS allows other values</entry>
</row>
<row>
<entry>border-left-width</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#the-border-width">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry>CSS allows other values</entry>
</row>
<row>
<entry>border-top-style</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#the-border-style">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>border-right-style</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#the-border-style">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>border-bottom-style</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#the-border-style">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>border-left-style</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#the-border-style">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>border-top-right-radius</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#the-border-radius">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>border-bottom-right-radius</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#the-border-radius">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>border-bottom-left-radius</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#the-border-radius">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>border-top-left-radius</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#the-border-radius">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>border-top-color</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#the-border-color">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>border-right-color</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#the-border-color">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>border-bottom-color</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#the-border-color">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>border-left-color</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#the-border-color">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>border-image-source</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#the-border-image-source">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>border-image-repeat</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#the-border-image-repeat">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>border-image-slice</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#the-border-image-slice">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry>a 'four sides' property</entry>
</row>
<row>
<entry>border-image-width</entry>
<entry>
<ulink url="https://www.w3.org/TR//css3-background/#the-border-image-width">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry>a 'four sides' property</entry>
</row>
<row><?dbhtml class="subhead"?><entry spanname="span">Border Shorthands</entry></row>
<row>
<entry>border-width</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#the-border-width">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry>a 'four sides' property</entry>
</row>
<row>
<entry>border-style</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#the-border-style">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry>a 'four sides' property</entry>
</row>
<row>
<entry>border-color</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#border-color">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry>a 'four sides' property</entry>
</row>
<row>
<entry>border-top</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#border-top">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>border-right</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#border-right">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>border-bottom</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#border-bottom">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>border-left</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#border-left">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>border</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#border">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>border-radius</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#border-radius">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>border-image</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#border-image">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry></entry>
</row>
<row><?dbhtml class="subhead"?><entry spanname="span">Outline Properties</entry></row>
<row>
<entry>outline-style</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-ui/#outline-style">CSS Basic User Interface Level 3</ulink>
</entry>
<entry>initial value is none, auto is not supported</entry>
</row>
<row>
<entry>outline-width</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-ui/#outline-width">CSS Basic User Interface Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>outline-color</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-ui/#outline-color">CSS Basic User Interface Level 3</ulink>
</entry>
<entry>initial value is currentColor, invert is not supported</entry>
</row>
<row>
<entry>outline-offset</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-ui/#outline-offset">CSS Basic User Interface Level 3</ulink>
</entry>
<entry></entry>
</row>
<row><?dbhtml class="subhead"?><entry spanname="span">Outline Shorthands</entry></row>
<row>
<entry>outline</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-ui/#propdef-outline">CSS Basic User Interface Level 3</ulink>
</entry>
<entry></entry>
</row>
<row><?dbhtml class="subhead"?><entry spanname="span">Background Properties</entry></row>
<row>
<entry>background-color</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#background-color">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>background-clip</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#background-clip">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>background-origin</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#background-origin">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>background-size</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#background-size">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>background-position</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#background-position">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>background-repeat</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#background-repeat">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>background-image</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#background-image">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry>not supported: urls without quotes, colors in crossfades</entry>
</row>
<row>
<entry>box-shadow</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#box-shadow">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>background-blend-mode</entry>
<entry>
<ulink url="https://www.w3.org/TR/compositing-1/#propdef-background-blend-mode">CSS Compositing and Blending Level 1</ulink>
</entry>
<entry>only affects multiple backgrounds</entry>
</row>
<row><?dbhtml class="subhead"?><entry spanname="span">Background Shorthands</entry></row>
<row>
<entry>background</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-background/#background">CSS Backgrounds and Borders Level 3</ulink>
</entry>
<entry></entry>
</row>
<row><?dbhtml class="subhead"?><entry spanname="span">Transition Properties</entry></row>
<row>
<entry>transition-property</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-transitions/#transition-property">CSS Transitions</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>transition-duration</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-transitions/#transition-duration">CSS Transitions</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>transition-timing-function</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-transitions/#transition-timing-function">CSS Transitions</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>transition-delay</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-transitions/#transition-delay">CSS Transitions</ulink>
</entry>
<entry></entry>
</row>
<row><?dbhtml class="subhead"?><entry spanname="span">Transition Shorthands</entry></row>
<row>
<entry>transition</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-transitions/#transition">CSS Transitions</ulink>
</entry>
<entry></entry>
</row>
<row><?dbhtml class="subhead"?><entry spanname="span">Animation Properties</entry></row>
<row>
<entry>animation-name</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-animations/#animation-name">CSS Animations Level 1</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>animation-duration</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-animations/#animation-duration">CSS Animations Level 1</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>animation-timing-function</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-animations/#animation-timing-function">CSS Animations Level 1</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>animation-iteration-count</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-animations/#animation-iteration-count">CSS Animations Level 1</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>animation-direction</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-animations/#animation-direction">CSS Animations Level 1</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>animation-play-state</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-animations/#animation-play-state">CSS Animations Level 1</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>animation-delay</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-animations/#animation-delay">CSS Animations Level 1</ulink>
</entry>
<entry></entry>
</row>
<row>
<entry>animation-fill-mode</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-animations/#animation-fill-mode">CSS Animations Level 1</ulink>
</entry>
<entry></entry>
</row>
<row><?dbhtml class="subhead"?><entry spanname="span">Animation Shorthands</entry></row>
<row>
<entry>animation</entry>
<entry>
<ulink url="https://www.w3.org/TR/css3-animations/#animation">CSS Animations Level 1</ulink>
</entry>
<entry></entry>
</row>
<row><?dbhtml class="subhead"?><entry spanname="span">Table-related Properties</entry></row>
<row>
<entry>border-spacing</entry>
<entry>
<ulink url="https://www.w3.org/TR/css-tables-3/#border-spacing-property">CSS Table Level 3</ulink>
</entry>
<entry>respected by GtkBox and GtkGrid</entry>
</row>
</tbody>
</tgroup>
</table>
</refsect1>
</refentry>