From 3a774abbfe05ab3a0d650c1d69fb7824d415a88a Mon Sep 17 00:00:00 2001 From: Matthias Clasen Date: Fri, 8 Jan 2016 23:31:48 -0500 Subject: [PATCH] CSS documenation improvements Work around some problems with the formatting of the online docs, and split off the properties as a separate chapter. --- docs/reference/gtk/Makefile.am | 3 +- docs/reference/gtk/css-overview.xml | 984 ++++++++++++ .../gtk/{css.xml => css-properties.xml} | 1415 +++-------------- docs/reference/gtk/gtk-docs.sgml | 3 +- 4 files changed, 1215 insertions(+), 1190 deletions(-) create mode 100644 docs/reference/gtk/css-overview.xml rename docs/reference/gtk/{css.xml => css-properties.xml} (50%) diff --git a/docs/reference/gtk/Makefile.am b/docs/reference/gtk/Makefile.am index f02c98bca9..f4aa412ee9 100644 --- a/docs/reference/gtk/Makefile.am +++ b/docs/reference/gtk/Makefile.am @@ -285,7 +285,8 @@ content_files = \ broadwayd.xml \ building.sgml \ compiling.sgml \ - css.xml \ + css-overview.xml \ + css-properties.xml \ drawing-model.xml \ getting_started.xml \ glossary.xml \ diff --git a/docs/reference/gtk/css-overview.xml b/docs/reference/gtk/css-overview.xml new file mode 100644 index 0000000000..8d15f81288 --- /dev/null +++ b/docs/reference/gtk/css-overview.xml @@ -0,0 +1,984 @@ + + + + +GTK+ CSS +3 +GTK Library + + + +GTK+ CSS + +Overview of CSS in GTK+ + + + + + + + + Overview of CSS in GTK+ + + + This chapter describes in detail how GTK+ uses CSS for styling + and layout. + + + + We loosely follow the CSS + value definition + specification in the formatting of syntax productions. + + Nonterminals are enclosed in angle backets (〈〉), all other strings that are not listed here are literals + Juxtaposition means all components must occur, in the given order + A double ampersand (&&) means all components must occur, in any order + A double bar (||) means one or more of the components must occur, in any order + A single bar (|) indicates an alternative; exactly one of the components must occur + Brackets ([]) are used for grouping + A question mark (?) means that the preceding component is optional + An asterisk (*) means zero or more copies of the preceding component + A plus (+) means one or more copies of the preceding component + A number in curly braces ({n}) means that the preceding component occurs exactly n times + Two numbers in curly braces ({m,n}) mean that the preceding component occurs at least m times and at most n times + + + + + CSS nodes + + + 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. + + + + 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. + + + + The CSS nodes of a GtkScale + + + + + + + Style sheets + + + The basic structure of the style sheets understood by GTK+ is + a series of statements, which are either rule sets or “@-rules”, + separated by whitespace. + + + + A rule set consists of a selector and a declaration block, which is + a series of declarations enclosed in curly braces. The declarations + are separated by semicolons. Multiple selectors can share the same + declaration block, by putting all the separators in front of the block, + separated by commas. + + + + A rule set with two selectors + + + + + + + Importing style sheets + + + GTK+ supports the CSS @import rule, in order to load another + style sheet in addition to the currently parsed one. + + + + The syntax for @import rules is as follows: + + +〈import rule〉 = @import [ 〈url〉 | 〈string〉] ; +〈url〉 = url( 〈string〉) + + + An example for using the @import rule + + + + + To learn more about the @import rule, you can read the + Cascading + module of the CSS specification. + + + + + + Selectors + + + Selectors work very similar to the way they do in CSS. + + + + Typically widgets have one or more CSS nodes with element names (GTK+ falls + back to using the widget type if a widget has no element name) 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 # character. + + + + In more complicated situations, selectors can be combined in various ways. + To require that a node satisfies several conditions, combine several selectors + into one by concatenating them. To only match a node when it occurs inside some + other node, write the two selectors after each other, separated by whitespace. + To restrict the match to direct children of the parent node, insert a > + character between the two selectors. + + + + Theme labels that are descendants of a window + + + + + Theme notebooks, and anything within + + + + + Theme combo boxes, and entries that are direct children of a notebook + entry { + color: @fg_color; + background-color: #1209a2 +} +]]> + + + + Theme any widget within a GtkBin + + + + + Theme a label named title-label + + + + + Theme any widget named main-entry + + + + + Theme all widgets with the style class entry + + + + + Theme the entry of a GtkSpinButton + + + + + It is possible to select CSS nodes depending on their position amongst + their siblings by applying pseudo-classes to the selector, like :first-child, + :last-child or :nth-child(even). When used in selectors, pseudo-classes + must be prefixed with a : character. + + + + Theme labels in the first notebook tab + + + + + Another use of pseudo-classes is to match widgets depending on their + state. The available pseudo-classes for widget states are :active, :hover + :disabled, :selected, :focus, :indeterminate, :checked and :backdrop. + In addition, the following pseudo-classes don't have a direct equivalent + as a widget state: :dir(ltr) and :dir(rtl) (for text direction), :link and + :visited (for links) and :drop(active) (for highlighting drop targets). + Widget state pseudo-classes may only apply to the last element in a selector. + + + + Theme pressed buttons + + + + + Theme buttons with the mouse pointer over it + + + + + Theme insensitive widgets + + + + + Theme checkbuttons that are checked + + + + + Theme focused labels + + + + + Theme inconsistent checkbuttons + + + + + To determine the effective style for a widget, all the matching rule + sets are merged. As in CSS, rules apply by specificity, so the rules + whose selectors more closely match a node will take precedence + over the others. + + + + The full syntax for selectors understood by GTK+ can be found in the + table below. The main difference to CSS is that GTK+ does not currently + support attribute selectors. + + + + Selector syntax + + + PatternMatchesReferenceNotes + + + + * + any node + CSS + + + + E + any node with name E + CSS + GTK+ uses the type name of the widget if no CSS name has been set + + + E.class + any E node with the given style class + CSS + + + + E#id + any E node with the given ID + CSS + GTK+ uses the widget name as ID + + + E:nth‑child(〈nth‑child〉) + any E node which is the n-th child of its parent node + CSS + + + + E:nth‑last‑child(〈nth‑child〉) + any E node which is the n-th child of its parent node, counting from the end + CSS + + + + E:first‑child + any E node which is the first child of its parent node + CSS + + + + E:last‑child + any E node which is the last child of its parent node + CSS + + + + E:only‑child + any E node which is the only child of its parent node + CSS + Equivalent to E:first-child:last-child + + + E:link, E:visited + any E node which represents a hyperlink, not yet visited (:link) or already visited (:visited) + CSS + Corresponds to GTK_STATE_FLAG_LINK and GTK_STATE_FLAGS_VISITED + + + E:active, E:hover, E:focus + any E node which is part of a widget with the corresponding state + CSS + Corresponds to GTK_STATE_FLAG_ACTIVE, GTK_STATE_FLAG_PRELIGHT and GTK_STATE_FLAGS_FOCUSED; GTK+ also allows E:prelight and E:focused + + + E:disabled + any E node which is part of a widget with is disabled + CSS + Corresponds to GTK_STATE_FLAG_INSENSITIVE; GTK+ also allows E:insensitive + + + E:checked + any E node which is part of a widget (e.g. radio- or checkbuttons) which is checked + CSS + Corresponds to GTK_STATE_FLAG_CHECKED + + + E:indeterminate + any E node which is part of a widget (e.g. radio- or checkbuttons) which is in an inconsistent state + CSS3, + CSS4 + Corresponds to GTK_STATE_FLAG_INCONSISTENT; GTK+ also allows E:inconsistent + + + E:backdrop, E:selected + any E node which is part of a widget with the corresponding state + + Corresponds to GTK_STATE_FLAG_BACKDROP, GTK_STATE_FLAG_SELECTED + + + E:not(〈selector〉) + any E node which does not match the simple selector 〈selector〉 + CSS + + + + E:dir(ltr), E:dir(rtl) + any E node that has the corresponding text direction + CSS4 + + + + E:drop(active) + any E node that is an active drop target for a current DND operation + CSS4 + + + + E F + any F node which is a descendent of an E node + CSS + + + + E > F + any F node which is a child of an E node + CSS + + + + E ~ F + any F node which is preceded by an E node + CSS + + + + E + F + any F node which is immediately preceded by an E node + CSS + + + + +
+ +〈nth-child〉 = even | odd | 〈integer〉 | 〈integer〉n | 〈integer〉n [ + | - ] 〈integer〉 + + + + To learn more about selectors in CSS, read the + Selectors + module of the CSS specification. + + + + + + Colors + + + CSS allows to specify colors in various ways, using numeric + values or names from a predefined list of colors. + + +〈color〉 = currentColor | transparent | 〈color name〉 | 〈rgb color〉 | 〈rgba color〉 | 〈hex color〉 | 〈gtk color〉 +〈rgb color 〉 = rgb( 〈number〉, 〈number〉, 〈number〉 ) | rgb( 〈percentage〉, 〈percentage〉, 〈percentage〉 ) +〈rgba color 〉 = rgba(〈number〉, 〈number〉, 〈number〉, 〈alpha value〉) | rgba( 〈percentage〉, 〈percentage〉, 〈percentage〉, 〈alpha value〉 ) +〈hex color〉 = #〈hex digits〉 +〈alpha value〉 = 〈number〉, clamped to values between 0 and 1 + + + + The keyword currentColor resolves to the current value of the + color property when used in another property, and to the inherited value + of the color property when used in the color property itself. + + + + The keyword transparent can be considered a shorthand for rgba(0,0,0,0). + + + + For a list of valid color names and for more background on colors in + CSS, see the Color + module of the CSS specification. + + + + Specifying colors in various ways + + + + + GTK+ adds several additional ways to specify colors. + + +〈gtk color〉 = 〈symbolic color〉 | 〈color expression〉| 〈win32 color〉 + + + + The first is a reference to a color defined via a @define-color rule. + The syntax for @define-color rules is as follows: + + +〈define color rule〉 = @define-color 〈name〉 〈color〉 + + + + To refer to the color defined by a @define-color rule, + use the name from the rule, prefixed with @. + + +〈symbolic color〉 = @〈name〉 + + + An example for defining colors + + + + + GTK+ also allows to form color expressions, which can be nested and + provide a rich language to define colors which are derived from a + set of base colors. + + +〈color expression〉 = ligher(〈color〉) | darker(〈color〉) | shade(〈number〉,〈color〉) | alpha(〈number〉,〈color〉) | mix(〈number〉,〈color〉,〈color〉) + + + + On Windows, GTK+ allows to refer to system colors, as follows: + + +〈win32 color〉 = -gtk-win32-color( 〈name〉, 〈integer〉) + + + + + + Images + + + CSS allows to specify images in various ways, for backgrounds + and borders. + + +〈image〉 = 〈url〉 | 〈crossfade〉 | 〈gradient〉 | 〈gtk image〉 +〈crossfade〉 = cross-fade( 〈percentage〉, 〈image〉, 〈image〉) +〈gradient〉 = 〈linear gradient〉 | 〈radial gradient〉 +〈linear gradient〉 = [ linear-gradient | repeating-linear-gradient ] ( + [ [ 〈angle〉 | to 〈side or corner〉 ] , ]? + 〈color stops〉 ) +〈radial gradient〉 = [ radial‑gradient | repeating‑radial‑gradient ] ( + [ [ 〈shape〉 || 〈size〉 ] [ at 〈position〉 ]? , | at 〈position〉, ]? + 〈color stops〉 ) +〈side or corner〉 = [ left | right ] || [ top | bottom ] +〈color stops〉 = 〈color stop〉 [ , 〈color stop〉]+ +〈color stop〉 = 〈color〉 [ 〈percentage〉 | 〈length〉 ]? +〈shape〉 = circle | ellipse +〈size〉 = 〈extent keyword〉 | 〈length〉 | [ 〈length〉 | 〈percentage〉 ]{1,2} +〈extent keyword〉 = closest-size | farthest-side | closest-corner | farthest-corner + + + + The simplest way to specify an image in CSS is to load an image + file from a URL. CSS does not specify anything about supported file + formats; within GTK+, you can expect at least PNG, JPEG and SVG to + work. The full list of supported image formats is determined by the + available gdk-pixbuf image loaders and may vary between systems. + + + + Loading an image file + + + + + A crossfade lets you specify an image as an intermediate between two + images. Crossfades are specified in the draft of the level 4 + Image + module of the CSS specification. + + + + + + + Crossfading two images + + + + + Gradients are images that smoothly fades from one color to another. CSS + provides ways to specify repeating and non-repeating linear and radial + gradients. Radial gradients can be circular, or axis-aligned ellipses. + In addition to CSS gradients, GTK+ has its own -gtk-gradient extensions. + + + + A linear gradient is created by specifying a gradient line and then several + colors placed along that line. The gradient line may be specified using + an angle, or by using direction keywords. + + + + Linear gradients + + + + + A radial gradient is created by specifying a center point and one or two + radii. The radii may be given explicitly as lengths or percentages or + indirectly, by keywords that specify how the end circle or ellipsis + should be positioned relative to the area it is derawn in. + + + + Radial gradients + + + + + To learn more about gradients in CSS, including details of how color stops + are placed on the gradient line and keywords for specifying radial sizes, + you can read the + Image + module of the CSS specification. + + + + GTK+ extends the CSS syntax for images and also uses it for specifying icons. + + +〈gtk image〉 = 〈gtk gradient〉 | 〈themed icon〉 | 〈scaled image〉 | 〈win32 theme part〉 + + + + GTK+ supports an alternative syntax for linear and radial gradients (which + was implemented before CSS gradients were supported). + + +〈gtk gradient〉 = 〈gtk linear gradient〉 | 〈gtk radial gradient〉 +〈gtk linear gradient〉 = -gtk-gradient(linear, + [ 〈x position〉 〈y position〉 , ]{2} + 〈gtk color stops〉 ) +〈gtk radial gradient〉 = -gtk-gradient(radial, + [ 〈x position〉 〈y position〉 , 〈radius〉 , ]{2} + 〈gtk color stops〉 ) +〈x position〉 = left | right | center | 〈number〉 +〈y position〉 = top | bottom | center | 〈number〉 +〈radius 〉 = 〈number〉 +〈gtk color stops〉 = 〈gtk color stop〉 [ , 〈gtk color stop〉 ]+ +〈gtk color stop〉 = color-stop( 〈number〉 , 〈color〉 ) | from( 〈color〉 ) | to( 〈color〉 ) + + + + The numbers used to specify x and y positions, radii, as well as the + positions of color stops, must be between 0 and 1. The keywords for for + x and y positions (left, right, top, bottom, center), map to numeric + values of 0, 1 and 0.5 in the obvious way. Color stops using the from() and + to() syntax are abbreviations for color-stop with numeric positions of + 0 and 1, respectively. + + + + Linear gradients + + + + + Radial gradients + + + + + GTK+ has extensive support for loading icons from icon themes. It is + accessible from CSS with the -gtk-icontheme syntax. + + +〈themed icon〉 = -gtk-icontheme( 〈icon name〉 ) + + + + The specified icon name is used to look up a themed icon, while taking + the values of the -gtk-icon-style and -gtk-icon-theme properties. This + kind of image is mainly used as value of the -gtk-icon-source property. + + + + Using themed icons in CSS + + + + + GTK+ supports scaled rendering on hi-resolution displays. This works + best if images can be specify normal and hi-resolution variants. From + CSS, this can be done with the -gtk-scaled syntax. + + +〈scaled image〉 = -gtk-scaled( 〈image〉[, 〈image〉]* ) + + + + While -gtk-scaled accepts multiple higher-resolution variants, in + practice, it will mostly be used to specify a regular image and one + variant for scale 2. + + + + Scaled images in CSS + + + + + On Windows, GTK+ allows to refer to system theme parts as images, as follows: + + +〈win32 theme part〉 = -gtk-win32-theme-part( 〈name〉, 〈integer〉 〈integer〉 + [, [ over( 〈integer〉 〈integer〉 [ , 〈alpha value〉]? ) | margins( 〈integer〉{1,4} ) ] ]* ) + + + + + + Transitions + + + CSS defines a mechanism by which changes in CSS property values can + be made to take effect gradually, instead of all at once. GTK+ supports + these transitions as well. + + + + To enable a transition for a property when a rule set takes effect, it + needs to be listed in the transition-property property in that rule set. + Only animatable properties can be listed in the transition-property. + + + + The details of a transition can modified with the transition-duration, + transition-timing-function and transition-delay properties. + + + + To learn more about transitions, you can read the + Transitions + module of the CSS specification. + + + + + + Animations + + + In addition to transitions, which are triggered by changes of the underlying + node tree, CSS also supports defined animations. While transitions specify how + property values change from one value to a new value, animations explicitly + define intermediate property values in keyframes. + + + + Keyframes are defined with an @-rule which contains one or more of rule sets + with special selectors. Property declarations for nonanimatable properties + are ignored in these rule sets (with the exception of animation properties). + + +〈keyframe rule〉 = @keyframes 〈name〉 { 〈animation rule〉 } +〈animation rule〉 = 〈animation selector〉 { 〈declaration〉* } +〈animation selector〉 = 〈single animation selector〉 [ , 〈single animation selector ]* +〈single animation selector〉 = from | to | 〈percentage〉 + + + + To enable an animation, the name of the keyframes must be set as the value + of the animation-name property. The details of the animation can modified + with the animation-time, animation-timing-function, animation-iteration-count + and other animation properties. + + + + A CSS animation + + + + + To learn more about animations, you can read the + Animations + module of the CSS specification. + + + + + + Key bindings + + + In order to extend key bindings affecting different widgets, + GTK+ supports the @binding-set rule to parse a set of bind/unbind + directives. Note that in order to take effect, the binding sets + defined in this way must be associated with rule sets by setting + the -gtk-key-bindings property. + + + + The syntax for @binding-set rules is as follows: + + +〈binding set rule〉 = @binding-set 〈binding name〉{ [ [ 〈binding〉 | 〈unbinding〉] ; ]* } +〈binding〉 = bind "〈accelerator〉" { 〈signal emission〉* } +〈signal emission〉 = "〈signal name〉" ( [ 〈argument〉[ , 〈argument〉]* ]? } +〈unbinding〉 = unbind "〈accelerator〉" ; + + + + where 〈accelerator〉 is a string that can be parsed by gtk_accelerator_parse(), + 〈signal name〉 is the name of a keybinding signal of the widget in question, + and the 〈argument〉 list must be according to the signals declaration. + + + + An example for using the @binding-set rule + Left" { "move-cursor" (visual-positions, -3, 0) }; + unbind "End"; +}; + +@binding-set binding-set2 { + bind "Right" { "move-cursor" (visual-positions, 3, 0) }; + bind "KP_space" { "delete-from-cursor" (whitespace, 1) + "insert-at-cursor" (" ") }; +}; + +entry { + -gtk-key-bindings: binding-set1, binding-set2; +} +]]> + + + + + + diff --git a/docs/reference/gtk/css.xml b/docs/reference/gtk/css-properties.xml similarity index 50% rename from docs/reference/gtk/css.xml rename to docs/reference/gtk/css-properties.xml index 3ea9f6d8ed..053cd14150 100644 --- a/docs/reference/gtk/css.xml +++ b/docs/reference/gtk/css-properties.xml @@ -2,7 +2,7 @@ - + GTK+ CSS 3 @@ -12,7 +12,7 @@ GTK+ CSS -Overview of CSS in GTK+ +GTK+ CSS Properties @@ -31,966 +31,13 @@ We use 〉 U+232A Right-pointing Angle Bracket for indicating non-terminals in syntax productions. + +We use for syntax productions, and each line is put in a +(the latter is a workaround for deficiences in the developer.gnome.org post-processing). --> - - Overview of CSS in GTK+ - - - This chapter describes in detail how GTK+ uses CSS for styling - and layout. - - - - We loosely follow the CSS - value definition - specification in the formatting of syntax productions. - - Nonterminals are enclosed in angle backets (〈〉), all other strings that are not listed here are literals - Juxtaposition means all components must occur, in the given order - A double ampersand (&&) means all components must occur, in any order - A double bar (||) means one or more of the components must occur, in any order - A single bar (|) indicates an alternative; exactly one of the components must occur - Brackets ([]) are used for grouping - A question mark (?) means that the preceding component is optional - An asterisk (*) means zero or more copies of the preceding component - A plus (+) means one or more copies of the preceding component - A number in curly braces ({n}) means that the preceding component occurs exactly n times - Two numbers in curly braces ({m,n}) mean that the preceding component occurs at least m times and at most n times - - - - - CSS nodes - - - 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. - - - - 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. - - - - The CSS nodes of a GtkScale - - - - - - - Style sheets - - - The basic structure of the style sheets understood by GTK+ is - a series of statements, which are either rule sets or “@-rules”, - separated by whitespace. - - - - A rule set consists of a selector and a declaration block, which is - a series of declarations enclosed in curly braces. The declarations - are separated by semicolons. Multiple selectors can share the same - declaration block, by putting all the separators in front of the block, - separated by commas. - - - - A rule set with two selectors - - - - - - - Importing style sheets - - - GTK+ supports the CSS @import rule, in order to load another - style sheet in addition to the currently parsed one. - - - - The syntax for @import rules is as follows: - - - -〈import rule〉 = @import [ 〈url〉 | 〈string〉] ; -〈url〉 = url( 〈string〉) - - - An example for using the @import rule - - - - - To learn more about the @import rule, you can read the - Cascading - module of the CSS specification. - - - - - - Selectors - - - Selectors work very similar to the way they do in CSS. - - - - Typically widgets have one or more CSS nodes with element names (GTK+ falls - back to using the widget type if a widget has no element name) 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 # character. - - - - In more complicated situations, selectors can be combined in various ways. - To require that a node satisfies several conditions, combine several selectors - into one by concatenating them. To only match a node when it occurs inside some - other node, write the two selectors after each other, separated by whitespace. - To restrict the match to direct children of the parent node, insert a > - character between the two selectors. - - - - Theme labels that are descendants of a window - - - - - Theme notebooks, and anything within - - - - - Theme combo boxes, and entries that are direct children of a notebook - entry { - color: @fg_color; - background-color: #1209a2 -} -]]> - - - - Theme any widget within a GtkBin - - - - - Theme a label named title-label - - - - - Theme any widget named main-entry - - - - - Theme all widgets with the style class entry - - - - - Theme the entry of a GtkSpinButton - - - - - It is possible to select CSS nodes depending on their position amongst - their siblings by applying pseudo-classes to the selector, like :first-child, - :last-child or :nth-child(even). When used in selectors, pseudo-classes - must be prefixed with a : character. - - - - Theme labels in the first notebook tab - - - - - Another use of pseudo-classes is to match widgets depending on their - state. The available pseudo-classes for widget states are :active, :hover - :disabled, :selected, :focus, :indeterminate, :checked and :backdrop. - In addition, the following pseudo-classes don't have a direct equivalent - as a widget state: :dir(ltr) and :dir(rtl) (for text direction), :link and - :visited (for links) and :drop(active) (for highlighting drop targets). - Widget state pseudo-classes may only apply to the last element in a selector. - - - - Theme pressed buttons - - - - - Theme buttons with the mouse pointer over it - - - - - Theme insensitive widgets - - - - - Theme checkbuttons that are checked - - - - - Theme focused labels - - - - - Theme inconsistent checkbuttons - - - - - To determine the effective style for a widget, all the matching rule - sets are merged. As in CSS, rules apply by specificity, so the rules - whose selectors more closely match a node will take precedence - over the others. - - - - The full syntax for selectors understood by GTK+ can be found in the - table below. The main difference to CSS is that GTK+ does not currently - support attribute selectors. - - - - Selector syntax - - - PatternMatchesReferenceNotes - - - - * - any node - CSS - - - - E - any node with name E - CSS - GTK+ uses the type name of the widget if no CSS name has been set - - - E.class - any E node with the given style class - CSS - - - - E#id - any E node with the given ID - CSS - GTK+ uses the widget name as ID - - - E:nth‑child(〈nth‑child〉) - any E node which is the n-th child of its parent node - CSS - - - - E:nth‑last‑child(〈nth‑child〉) - any E node which is the n-th child of its parent node, counting from the end - CSS - - - - E:first‑child - any E node which is the first child of its parent node - CSS - - - - E:last‑child - any E node which is the last child of its parent node - CSS - - - - E:only‑child - any E node which is the only child of its parent node - CSS - Equivalent to E:first-child:last-child - - - E:link, E:visited - any E node which represents a hyperlink, not yet visited (:link) or already visited (:visited) - CSS - Corresponds to GTK_STATE_FLAG_LINK and GTK_STATE_FLAGS_VISITED - - - E:active, E:hover, E:focus - any E node which is part of a widget with the corresponding state - CSS - Corresponds to GTK_STATE_FLAG_ACTIVE, GTK_STATE_FLAG_PRELIGHT and GTK_STATE_FLAGS_FOCUSED; GTK+ also allows E:prelight and E:focused - - - E:disabled - any E node which is part of a widget with is disabled - CSS - Corresponds to GTK_STATE_FLAG_INSENSITIVE; GTK+ also allows E:insensitive - - - E:checked - any E node which is part of a widget (e.g. radio- or checkbuttons) which is checked - CSS - Corresponds to GTK_STATE_FLAG_CHECKED - - - E:indeterminate - any E node which is part of a widget (e.g. radio- or checkbuttons) which is in an inconsistent state - CSS3, - CSS4 - Corresponds to GTK_STATE_FLAG_INCONSISTENT; GTK+ also allows E:inconsistent - - - E:backdrop, E:selected - any E node which is part of a widget with the corresponding state - - Corresponds to GTK_STATE_FLAG_BACKDROP, GTK_STATE_FLAG_SELECTED - - - E:not(〈selector〉) - any E node which does not match the simple selector 〈selector〉 - CSS - - - - E:dir(ltr), E:dir(rtl) - any E node that has the corresponding text direction - CSS4 - - - - E:drop(active) - any E node that is an active drop target for a current DND operation - CSS4 - - - - E F - any F node which is a descendent of an E node - CSS - - - - E > F - any F node which is a child of an E node - CSS - - - - E ~ F - any F node which is preceded by an E node - CSS - - - - E + F - any F node which is immediately preceded by an E node - CSS - - - - -
- - -〈nth-child〉 = even | odd | 〈integer〉 | 〈integer〉n | 〈integer〉n [ + | - ] 〈integer〉 - - - - To learn more about selectors in CSS, read the - Selectors - module of the CSS specification. - - - - - - Colors - - - CSS allows to specify colors in various ways, using numeric - values or names from a predefined list of colors. - - - -〈color〉 = currentColor | transparent | 〈color name〉 | 〈rgb color〉 | 〈rgba color〉 | 〈hex color〉 | 〈gtk color〉 -〈rgb color 〉 = rgb( 〈number〉, 〈number〉, 〈number〉 ) | rgb( 〈percentage〉, 〈percentage〉, 〈percentage〉 ) -〈rgba color 〉 = rgba(〈number〉, 〈number〉, 〈number〉, 〈alpha value〉) | rgba( 〈percentage〉, 〈percentage〉, 〈percentage〉, 〈alpha value〉 ) -〈hex color〉 = #〈hex digits〉 -〈alpha value〉 = 〈number〉, clamped to values between 0 and 1. - - - - The keyword currentColor resolves to the current value of the - color property when used in another property, and to the inherited value - of the color property when used in the color property itself. - - - - The keyword transparent can be considered a shorthand for rgba(0,0,0,0). - - - - For a list of valid color names and for more background on colors in - CSS, see the Color - module of the CSS specification. - - - - Specifying colors in various ways - - - - - GTK+ adds several additional ways to specify colors. - - - -〈gtk color〉 = 〈symbolic color〉 | 〈color expression〉| 〈win32 color〉 - - - - The first is a reference to a color defined via a @define-color rule. - The syntax for @define-color rules is as follows: - - - -〈define color rule〉 = @define-color 〈name〉 〈color〉 - - - - To refer to the color defined by a @define-color rule, - use the name from the rule, prefixed with @. - - - -〈symbolic color〉 = @〈name〉 - - - An example for defining colors - - - - - GTK+ also allows to form color expressions, which can be nested and - provide a rich language to define colors which are derived from a - set of base colors. - - - -〈color expression〉 = ligher(〈color〉) | darker(〈color〉) | shade(〈number〉,〈color〉) | alpha(〈number〉,〈color〉) | mix(〈number〉,〈color〉,〈color〉) - - - - On Windows, GTK+ allows to refer to system colors, as follows: - - - -〈win32 color〉 = -gtk-win32-color( 〈name〉, 〈integer〉) - - - - - - Images - - - CSS allows to specify images in various ways, for backgrounds - and borders. - - - -〈image〉 = 〈url〉 | 〈crossfade〉 | 〈gradient〉 | 〈gtk image〉 -〈crossfade〉 = cross-fade( 〈percentage〉, 〈image〉, 〈image〉) -〈gradient〉 = 〈linear gradient〉 | 〈radial gradient〉 -〈linear gradient〉 = [ linear-gradient | repeating-linear-gradient ] ( - [ [ 〈angle〉 | to 〈side or corner〉 ] , ]? - 〈color stops〉 ) -〈radial gradient〉 = [ radial‑gradient | repeating‑radial‑gradient ] ( - [ [ 〈shape〉 || 〈size〉 ] [ at 〈position〉 ]? , | at 〈position〉, ]? - 〈color stops〉 ) -〈side or corner〉 = [ left | right ] || [ top | bottom ] -〈color stops〉 = 〈color stop〉 [ , 〈color stop〉]+ -〈color stop〉 = 〈color〉 [ 〈percentage〉 | 〈length〉 ]? -〈shape〉 = circle | ellipse -〈size〉 = 〈extent keyword〉 | 〈length〉 | [ 〈length〉 | 〈percentage〉 ]{1,2} -〈extent keyword〉 = closest-size | farthest-side | closest-corner | farthest-corner - - - - The simplest way to specify an image in CSS is to load an image - file from a URL. CSS does not specify anything about supported file - formats; within GTK+, you can expect at least PNG, JPEG and SVG to - work. The full list of supported image formats is determined by the - available gdk-pixbuf image loaders and may vary between systems. - - - - Loading an image file - - - - - A crossfade lets you specify an image as an intermediate between two - images. Crossfades are specified in the draft of the level 4 - Image - module of the CSS specification. - - - - - - - Crossfading two images - - - - - Gradients are images that smoothly fades from one color to another. CSS - provides ways to specify repeating and non-repeating linear and radial - gradients. Radial gradients can be circular, or axis-aligned ellipses. - In addition to CSS gradients, GTK+ has its own -gtk-gradient extensions. - - - - A linear gradient is created by specifying a gradient line and then several - colors placed along that line. The gradient line may be specified using - an angle, or by using direction keywords. - - - - Linear gradients - - - - - A radial gradient is created by specifying a center point and one or two - radii. The radii may be given explicitly as lengths or percentages or - indirectly, by keywords that specify how the end circle or ellipsis - should be positioned relative to the area it is derawn in. - - - - Radial gradients - - - - - To learn more about gradients in CSS, including details of how color stops - are placed on the gradient line and keywords for specifying radial sizes, - you can read the - Image - module of the CSS specification. - - - - GTK+ extends the CSS syntax for images and also uses it for specifying icons. - - - -〈gtk image〉 = 〈gtk gradient〉 | 〈themed icon〉 | 〈scaled image〉 | 〈win32 theme part〉 - - - - GTK+ supports an alternative syntax for linear and radial gradients (which - was implemented before CSS gradients were supported). - - - -〈gtk gradient〉 = 〈gtk linear gradient〉 | 〈gtk radial gradient〉 -〈gtk linear gradient〉 = -gtk-gradient(linear, - [ 〈x position〉 〈y position〉 , ]{2} - 〈gtk color stops〉 ) -〈gtk radial gradient〉 = -gtk-gradient(radial, - [ 〈x position〉 〈y position〉 , 〈radius〉 , ]{2} - 〈gtk color stops〉 ) -〈x position〉 = left | right | center | 〈number〉 -〈y position〉 = top | bottom | center | 〈number〉 -〈radius 〉 = 〈number〉 -〈gtk color stops〉 = 〈gtk color stop〉 [ , 〈gtk color stop〉 ]+ -〈gtk color stop〉 = color-stop( 〈number〉 , 〈color〉 ) | from( 〈color〉 ) | to( 〈color〉 ) - - - - The numbers used to specify x and y positions, radii, as well as the - positions of color stops, must be between 0 and 1. The keywords for for - x and y positions (left, right, top, bottom, center), map to numeric - values of 0, 1 and 0.5 in the obvious way. Color stops using the from() and - to() syntax are abbreviations for color-stop with numeric positions of - 0 and 1, respectively. - - - - Linear gradients - - - - - Radial gradients - - - - - GTK+ has extensive support for loading icons from icon themes. It is - accessible from CSS with the -gtk-icontheme syntax. - - - -〈themed icon〉 = -gtk-icontheme( 〈icon name〉 ) - - - - The specified icon name is used to look up a themed icon, while taking - the values of the -gtk-icon-style and -gtk-icon-theme properties. This - kind of image is mainly used as value of the -gtk-icon-source property. - - - - Using themed icons in CSS - - - - - GTK+ supports scaled rendering on hi-resolution displays. This works - best if images can be specify normal and hi-resolution variants. From - CSS, this can be done with the -gtk-scaled syntax. - - - -〈scaled image〉 = -gtk-scaled( 〈image〉[, 〈image〉]* ) - - - - While -gtk-scaled accepts multiple higher-resolution variants, in - practice, it will mostly be used to specify a regular image and one - variant for scale 2. - - - - Scaled images in CSS - - - - - On Windows, GTK+ allows to refer to system theme parts as images, as follows: - - - -〈win32 theme part〉 = -gtk-win32-theme-part( 〈name〉, 〈integer〉 〈integer〉 - [, [ over( 〈integer〉 〈integer〉 [ , 〈alpha value〉]? ) | margins( 〈integer〉{1,4} ) ] ]* ) - - - - - - Transitions - - - CSS defines a mechanism by which changes in CSS property values can - be made to take effect gradually, instead of all at once. GTK+ supports - these transitions as well. - - - - To enable a transition for a property when a rule set takes effect, it - needs to be listed in the transition-property property in that rule set. - Only animatable properties can be listed in the transition-property. - - - - The details of a transition can modified with the transition-duration, - transition-timing-function and transition-delay properties. - - - - To learn more about transitions, you can read the - Transitions - module of the CSS specification. - - - - - - Animations - - - In addition to transitions, which are triggered by changes of the underlying - node tree, CSS also supports defined animations. While transitions specify how - property values change from one value to a new value, animations explicitly - define intermediate property values in keyframes. - - - - Keyframes are defined with an @-rule which contains one or more of rule sets - with special selectors. Property declarations for nonanimatable properties - are ignored in these rule sets (with the exception of animation properties). - - - -〈keyframe rule〉 = @keyframes 〈name〉 { 〈animation rule〉 } -〈animation rule〉 = 〈animation selector〉 { 〈declaration〉* } -〈animation selector〉 = 〈single animation selector〉 [ , 〈single animation selector ]* -〈single animation selector〉 = from | to | 〈percentage〉 - - - - To enable an animation, the name of the keyframes must be set as the value - of the animation-name property. The details of the animation can modified - with the animation-time, animation-timing-function, animation-iteration-count - and other animation properties. - - - - A CSS animation - - - - - To learn more about animations, you can read the - Animations - module of the CSS specification. - - - - - - Key bindings - - - In order to extend key bindings affecting different widgets, - GTK+ supports the @binding-set rule to parse a set of bind/unbind - directives. Note that in order to take effect, the binding sets - defined in this way must be associated with rule sets by setting - the -gtk-key-bindings property. - - - - The syntax for @binding-set rules is as follows: - -〈binding set rule〉 = @binding-set 〈binding name〉{ [ [ 〈binding〉 | 〈unbinding〉] ; ]* } -〈binding〉 = bind "〈accelerator〉" { 〈signal emission〉* } -〈signal emission〉 = "〈signal name〉" ( [ 〈argument〉[ , 〈argument〉]* ]? } -〈unbinding〉 = unbind "〈accelerator〉" ; - - where 〈accelerator〉 is a string that can be parsed by gtk_accelerator_parse(), - 〈signal name〉 is the name of a keybinding signal of the widget in question, - and the 〈argument〉 list must be according to the signals declaration. - - - - An example for using the @binding-set rule - Left" { "move-cursor" (visual-positions, -3, 0) }; - unbind "End"; -}; - -@binding-set binding-set2 { - bind "Right" { "move-cursor" (visual-positions, 3, 0) }; - bind "KP_space" { "delete-from-cursor" (whitespace, 1) - "insert-at-cursor" (" ") }; -}; - -entry { - -gtk-key-bindings: binding-set1, binding-set2; -} -]]> - - - - - - Supported Properties + + Supported CSS Properties GTK+ supports CSS properties and shorthands as far as they can be applied @@ -1006,12 +53,11 @@ entry { The following basic datatypes are used throughout: - -〈length〉 = 〈number〉 [ px | pt | em | ex | pc | in | cm | mm ] -〈percentage〉 = 〈number〉 % -〈angle〉 = 〈number〉 [ deg | grad | turn ] -〈time〉 = 〈number〉 [ s | ms ] - +〈length〉 = 〈number〉 [ px | pt | em | ex | pc | in | cm | mm ] +〈percentage〉 = 〈number〉 % +〈angle〉 = 〈number〉 [ deg | grad | turn ] +〈time〉 = 〈number〉 [ s | ms ] + Length values with the em or ex units are resolved using the font @@ -1051,8 +97,8 @@ entry { color - 〈color〉 - rgba(1,1,1,1) + 〈color〉 + rgba(1,1,1,1) ✓ ✓ CSS2, @@ -1061,8 +107,8 @@ entry { opacity - 〈alpha value〉 - 1 + 〈alpha value〉 + 1 ✓ CSS3 @@ -1089,7 +135,7 @@ entry { font‑family - 〈family name〉 [ , 〈family name〉 ]* + 〈family name〉 [ , 〈family name〉 ]* gtk-font-name setting ✓ @@ -1099,7 +145,7 @@ entry { font‑size - 〈absolute size〉 | 〈relative size〉 | 〈length〉 | 〈percentage〉 + 〈absolute size〉 | 〈relative size〉 | 〈length〉 | 〈percentage〉 gtk-font-name setting ✓ ✓ @@ -1109,8 +155,8 @@ entry { font‑style - normal | oblique | italic - normal + normal | oblique | italic + normal ✓ CSS2, @@ -1119,8 +165,8 @@ entry { font‑variant - normal | small-caps - normal + normal | small-caps + normal ✓ CSS2, @@ -1129,8 +175,8 @@ entry { font‑weight - normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 - normal + normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 + normal ✓ ✓ CSS2, @@ -1139,8 +185,8 @@ entry { font‑stretch - ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded - normal + ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded + normal ✓ CSS3 @@ -1148,7 +194,7 @@ entry { ‑gtk‑dpi - 〈number〉 + 〈number〉 screen resolution ✓ ✓ @@ -1164,7 +210,7 @@ entry { font - [ 〈font-style〉 || 〈font-variant〉 || 〈font-weight〉 || 〈font-stretch〉 ]? 〈font-size〉 〈font-family〉 + [ 〈font-style〉 || 〈font-variant〉 || 〈font-weight〉 || 〈font-stretch〉 ]? 〈font-size〉 〈font-family〉 see individual properties CSS2, CSS3 @@ -1174,10 +220,9 @@ entry { - -〈absolute size〉 = xx-small | x-small | small | medium | large | x-large | xx-large -〈relative size〉 = larger | smaller - +〈absolute size〉 = xx-small | x-small | small | medium | large | x-large | xx-large +〈relative size〉 = larger | smaller + The font properties determine the font to use for rendering text. Relative @@ -1196,8 +241,8 @@ entry { caret-color - 〈color〉 - currentColor + 〈color〉 + currentColor ✓ ✓ CSS3 @@ -1205,8 +250,8 @@ entry { -gtk-secondary-caret-color - 〈color〉 - currentColor + 〈color〉 + currentColor ✓ ✓ @@ -1232,8 +277,8 @@ entry { letter‑spacing - 〈length〉 - 0px + 〈length〉 + 0px ✓ ✓ CSS3 @@ -1241,8 +286,8 @@ entry { text‑decoration‑line - none | underline | line-through - none + none | underline | line-through + none CSS2, @@ -1251,8 +296,8 @@ entry { text‑decoration‑color - 〈color〉 - currentColor + 〈color〉 + currentColor ✓ CSS3 @@ -1260,8 +305,8 @@ entry { text‑decoration‑style - solid | double | wavy - solid + solid | double | wavy + solid CSS3 @@ -1269,8 +314,8 @@ entry { text‑shadow - none | 〈shadow〉 - none + none | 〈shadow〉 + none ✓ ✓ CSS3 @@ -1285,7 +330,7 @@ entry { text‑decoration - 〈text-decoration-line〉 || 〈text-decoration-style〉 || 〈text-decoration-color〉 + 〈text-decoration-line〉 || 〈text-decoration-style〉 || 〈text-decoration-color〉 see individual properties CSS3 @@ -1294,9 +339,8 @@ entry { - -〈shadow〉 = 〈length〉 〈length〉 〈color〉? - +〈shadow〉 = 〈length〉 〈length〉 〈color〉? + The text decoration properties determine whether to apply extra decorations @@ -1314,8 +358,8 @@ entry { ‑gtk‑icon‑source - builtin | 〈image〉 | none - builtin + builtin | 〈image〉 | none + builtin ✓ @@ -1323,8 +367,8 @@ entry { ‑gtk‑icon‑transform - none | 〈transform〉+ - none + none | 〈transform〉+ + none ✓ @@ -1332,8 +376,8 @@ entry { ‑gtk‑icon‑style - requested | regular | symbolic - requested + requested | regular | symbolic + requested ✓ @@ -1341,7 +385,7 @@ entry { ‑gtk‑icon‑theme - 〈name〉 + 〈name〉 current icon theme ✓ @@ -1350,8 +394,8 @@ entry { ‑gtk‑icon‑palette - default | 〈name〉 〈color〉 [ , 〈name〉 〈color〉 ]* - default + default | 〈name〉 〈color〉 [ , 〈name〉 〈color〉 ]* + default ✓ ✓ @@ -1359,8 +403,8 @@ entry { ‑gtk‑icon‑shadow - none | 〈shadow〉 - none + none | 〈shadow〉 + none ✓ ✓ @@ -1368,8 +412,8 @@ entry { ‑gtk‑icon‑effect - none | highlight | dim - none + none | highlight | dim + none ✓ @@ -1379,11 +423,10 @@ entry { - -〈transform〉 = matrix( 〈number〉 [ , 〈number〉 ]{5} ) | translate( 〈length〉, 〈length〉 ) | translateX( 〈length〉 ) | translateY( 〈length〉 ) | - scale( 〈number〉[ , 〈number〉 ]? ) | scaleX( 〈number〉 ) | scaleY( 〈number〉 ) | rotate( 〈angle〉 ) | skew( 〈angle〉 [ , 〈angle〉 ]? ) | - skewX( 〈angle〉 ) | skewY( 〈angle〉 ) - +〈transform〉 = matrix( 〈number〉 [ , 〈number〉 ]{5} ) | translate( 〈length〉, 〈length〉 ) | translateX( 〈length〉 ) | translateY( 〈length〉 ) | + scale( 〈number〉[ , 〈number〉 ]? ) | scaleX( 〈number〉 ) | scaleY( 〈number〉 ) | rotate( 〈angle〉 ) | skew( 〈angle〉 [ , 〈angle〉 ]? ) | + skewX( 〈angle〉 ) | skewY( 〈angle〉 ) + The icon properties are used by widgets that are rendering 'icons', such @@ -1405,8 +448,8 @@ entry { min‑width - 〈length〉 - 0px + 〈length〉 + 0px ✓ CSS2, @@ -1415,8 +458,8 @@ entry { min‑height - 〈length〉 - 0px + 〈length〉 + 0px ✓ CSS2, @@ -1425,8 +468,8 @@ entry { margin‑top - 〈length〉 - 0px + 〈length〉 + 0px ✓ CSS2, @@ -1435,8 +478,8 @@ entry { margin‑right - 〈length〉 - 0px + 〈length〉 + 0px ✓ CSS2, @@ -1445,8 +488,8 @@ entry { margin‑bottom - 〈length〉 - 0px + 〈length〉 + 0px ✓ CSS2, @@ -1455,8 +498,8 @@ entry { margin‑left - 〈length〉 - 0px + 〈length〉 + 0px ✓ CSS2, @@ -1465,8 +508,8 @@ entry { padding‑top - 〈length〉 - 0px + 〈length〉 + 0px ✓ CSS2, @@ -1475,8 +518,8 @@ entry { padding‑right - 〈length〉 - 0px + 〈length〉 + 0px ✓ CSS2, @@ -1485,8 +528,8 @@ entry { padding‑bottom - 〈length〉 - 0px + 〈length〉 + 0px ✓ CSS2, @@ -1495,8 +538,8 @@ entry { padding‑left - 〈length〉 - 0px + 〈length〉 + 0px ✓ CSS2, @@ -1512,7 +555,7 @@ entry { margin - 〈length〉{1,4} + 〈length〉{1,4} see individual properties CSS2, CSS3 @@ -1520,7 +563,7 @@ entry { padding - 〈length〉{1,4} + 〈length〉{1,4} see individual properties CSS2, CSS3 @@ -1541,8 +584,8 @@ entry { border‑top‑width - 〈length〉 - 0px + 〈length〉 + 0px ✓ CSS2, @@ -1551,8 +594,8 @@ entry { border‑right‑width - 〈length〉 - 0px + 〈length〉 + 0px ✓ CSS2, @@ -1561,8 +604,8 @@ entry { border‑bottom‑width - 〈length〉 - 0px + 〈length〉 + 0px ✓ CSS2, @@ -1571,8 +614,8 @@ entry { border‑right‑width - 〈length〉 - 0px + 〈length〉 + 0px ✓ CSS2, @@ -1581,8 +624,8 @@ entry { border‑top‑style - 〈border style〉 - none + 〈border style〉 + none CSS2, @@ -1591,8 +634,8 @@ entry { border‑right‑style - 〈border style〉 - none + 〈border style〉 + none CSS2, @@ -1601,8 +644,8 @@ entry { border‑bottom‑style - 〈border style〉 - none + 〈border style〉 + none CSS2, @@ -1611,8 +654,8 @@ entry { border‑left‑style - 〈border style〉 - none + 〈border style〉 + none CSS2, @@ -1621,8 +664,8 @@ entry { border‑top‑right‑radius - 〈corner radius〉 - 0 + 〈corner radius〉 + 0 ✓ CSS2, @@ -1631,8 +674,8 @@ entry { border‑bottom‑right‑radius - 〈corner radius〉 - 0 + 〈corner radius〉 + 0 ✓ CSS2, @@ -1641,8 +684,8 @@ entry { border‑bottom‑left‑radius - 〈corner radius〉 - 0 + 〈corner radius〉 + 0 ✓ CSS2, @@ -1651,8 +694,8 @@ entry { border‑top‑left‑radius - 〈corner radius〉 - 0 + 〈corner radius〉 + 0 ✓ CSS2, @@ -1661,8 +704,8 @@ entry { border‑top‑color - 〈color〉 - currentColor + 〈color〉 + currentColor ✓ CSS2, @@ -1671,8 +714,8 @@ entry { border‑right‑color - 〈color〉 - currentColor + 〈color〉 + currentColor ✓ CSS2, @@ -1681,8 +724,8 @@ entry { border‑bottom‑color - 〈color〉 - currentColor + 〈color〉 + currentColor ✓ CSS2, @@ -1691,8 +734,8 @@ entry { border‑left‑color - 〈color〉 - currentColor + 〈color〉 + currentColor ✓ CSS2, @@ -1701,8 +744,8 @@ entry { border‑image‑source - 〈image〉 | none - none + 〈image〉 | none + none ✓ CSS3 @@ -1710,8 +753,8 @@ entry { border‑image‑repeat - 〈border repeat〉{1,2} - stretch + 〈border repeat〉{1,2} + stretch CSS3 @@ -1719,8 +762,8 @@ entry { border‑image‑slice - [ 〈number〉 | 〈percentage〉 ]{1,4} && fill? - 100% + [ 〈number〉 | 〈percentage〉 ]{1,4} && fill? + 100% CSS3 @@ -1728,8 +771,8 @@ entry { border‑image‑width - [ 〈length〉 | 〈number〉 | 〈percentage〉 | auto ]{1,4} - 1 + [ 〈length〉 | 〈number〉 | 〈percentage〉 | auto ]{1,4} + 1 CSS3 @@ -1745,7 +788,7 @@ entry { border‑width - 〈length〉{1,4} + 〈length〉{1,4} see individual properties CSS2, CSS3 @@ -1753,7 +796,7 @@ entry { border‑style - 〈border style〉{1,4} + 〈border style〉{1,4} see individual properties CSS2, CSS3 @@ -1761,14 +804,14 @@ entry { border‑color - 〈color〉{1,4} + 〈color〉{1,4} see individual properties CSS3 a 'four sides' shorthand border‑top - 〈length〉 || 〈border style〉 || 〈color〉 + 〈length〉 || 〈border style〉 || 〈color〉 see individual properties CSS2, CSS3 @@ -1776,7 +819,7 @@ entry { border‑left - 〈length〉 || 〈border style〉 || 〈color〉 + 〈length〉 || 〈border style〉 || 〈color〉 see individual properties CSS2, CSS3 @@ -1784,7 +827,7 @@ entry { border‑bottom - 〈length〉 || 〈border style〉 || 〈color〉 + 〈length〉 || 〈border style〉 || 〈color〉 see individual properties CSS2, CSS3 @@ -1792,7 +835,7 @@ entry { border‑right - 〈length〉 || 〈border style〉 || 〈color〉 + 〈length〉 || 〈border style〉 || 〈color〉 see individual properties CSS2, CSS3 @@ -1800,7 +843,7 @@ entry { border - 〈length〉 || 〈border style〉 || 〈color〉 + 〈length〉 || 〈border style〉 || 〈color〉 see individual properties CSS2, CSS3 @@ -1808,14 +851,14 @@ entry { border‑radius - [ 〈length〉 | 〈percentage〉 ]{1,4} [ / [ 〈length〉 | 〈percentage> ]{1,4} ]? + [ 〈length〉 | 〈percentage〉 ]{1,4} [ / [ 〈length〉 | 〈percentage> ]{1,4} ]? see individual properties CSS3 border‑image - 〈border-image-source〉 || 〈border-image-slice〉 [ / 〈border-image-width〉 | / 〈border-image-width〉? / 〈border-image-outset〉 ]? || 〈border-image-repeat〉 + 〈border-image-source〉 || 〈border-image-slice〉 [ / 〈border-image-width〉 | / 〈border-image-width〉? / 〈border-image-outset〉 ]? || 〈border-image-repeat〉 see individual properties CSS3 @@ -1824,10 +867,9 @@ entry { - -〈border style〉 = none | solid | inset | outset | hidden | dotted | dashed | double | groove | ridge -〈corner radius〉 = [ 〈length〉 | 〈percentage〉 ]{1,2} - +〈border style〉 = none | solid | inset | outset | hidden | dotted | dashed | double | groove | ridge +〈corner radius〉 = [ 〈length〉 | 〈percentage〉 ]{1,2} + Outline properties @@ -1840,8 +882,8 @@ entry { outline‑style - none | solid | inset | outset | hidden | dotted | dashed | double | groove | ridge - none + none | solid | inset | outset | hidden | dotted | dashed | double | groove | ridge + none CSS2, @@ -1850,8 +892,8 @@ entry { outline‑width - 〈length〉 - 0px + 〈length〉 + 0px ✓ CSS2, @@ -1860,8 +902,8 @@ entry { outline‑color - 〈color〉 - currentColor + 〈color〉 + currentColor ✓ CSS2, @@ -1870,8 +912,8 @@ entry { outline‑offset - 〈length〉 - 0px + 〈length〉 + 0px CSS3 @@ -1879,8 +921,8 @@ entry { ‑gtk‑outline‑top‑left‑radius - 〈corner radius〉 - 0 + 〈corner radius〉 + 0 ✓ @@ -1888,8 +930,8 @@ entry { ‑gtk‑outline‑top‑right‑radius - 〈corner radius〉 - 0 + 〈corner radius〉 + 0 ✓ @@ -1897,8 +939,8 @@ entry { ‑gtk‑outline‑bottom‑right‑radius - 〈corner radius〉 - 0 + 〈corner radius〉 + 0 ✓ @@ -1906,8 +948,8 @@ entry { ‑gtk‑outline‑bottom‑left‑radius - 〈corner radius〉 - 0 + 〈corner radius〉 + 0 ✓ @@ -1922,7 +964,7 @@ entry { outline - 〈outline-color〉 || 〈outline-style〉 || 〈outline-width〉 + 〈outline-color〉 || 〈outline-style〉 || 〈outline-width〉 see individual properties CSS2, CSS3 @@ -1930,7 +972,7 @@ entry { ‑gtk‑outline‑radius - [ 〈length〉|〈percentage〉 ]{1,4} [ / [〈length〉 | 〈percentage> ]{1,4} ]? + [ 〈length〉|〈percentage〉 ]{1,4} [ / [〈length〉 | 〈percentage> ]{1,4} ]? see individual properties @@ -1950,8 +992,8 @@ entry { background‑color - 〈color〉 - rgba(0,0,0,0) + 〈color〉 + rgba(0,0,0,0) ✓ CSS2, @@ -1960,8 +1002,8 @@ entry { background‑clip - 〈box〉 [ , 〈box〉 ]* - border-box + 〈box〉 [ , 〈box〉 ]* + border-box CSS3 @@ -1969,8 +1011,8 @@ entry { background‑origin - 〈box〉 [ , 〈box〉 ]* - padding-box + 〈box〉 [ , 〈box〉 ]* + padding-box CSS3 @@ -1978,8 +1020,8 @@ entry { background‑size - 〈bg-size〉 [ , 〈bg-size〉 ]* - auto + 〈bg-size〉 [ , 〈bg-size〉 ]* + auto ✓ CSS3 @@ -1987,8 +1029,8 @@ entry { background‑position - 〈position〉 [ , 〈position〉 ]* - 0 + 〈position〉 [ , 〈position〉 ]* + 0 ✓ CSS2, @@ -1997,8 +1039,8 @@ entry { background‑repeat - 〈bg-repeat 〉[ , 〈bg-repeat〉 ]* - repeat + 〈bg-repeat 〉[ , 〈bg-repeat〉 ]* + repeat CSS2, @@ -2007,8 +1049,8 @@ entry { background‑image - 〈bg-image〉[ , 〈bg-image〉 ]* - none + 〈bg-image〉[ , 〈bg-image〉 ]* + none ✓ CSS2, @@ -2017,8 +1059,8 @@ entry { box‑shadow - none | 〈box shadow〉 [ , 〈box shadow〉 ]* - none + none | 〈box shadow〉 [ , 〈box shadow〉 ]* + none ✓ CSS3 @@ -2033,7 +1075,7 @@ entry { background - [ 〈bg-layer〉 , ]* 〈final-bg-layer〉 + [ 〈bg-layer〉 , ]* 〈final-bg-layer〉 see individual properties CSS2, CSS3 @@ -2043,16 +1085,15 @@ entry {
- -〈box〉 = border-box | padding-box | content-box -〈bg-size〉 = [ 〈length〉 | 〈percentage〉 | auto ]{1,2} | cover | contain -〈position〉 = [ left | right | center | top | bottom | 〈percentage〉 | 〈length〉 ]{1,2,3,4} -〈bg-repeat〉 = repeat-x | repeat-y | [ no-repeat | repeat | round | space ]{1,2} -〈bg-image〉 = 〈image〉 | none -〈bg-layer〉 = 〈bg-image〉 || 〈position〉 [ / 〈bg-size〉 ]? || 〈bg-repeat〉 || 〈box〉 || 〈box〉 -〈final-bg-layer〉 = 〈bg-image〉 || 〈position〉 [ / 〈bg-size〉 ]? || 〈bg-repeat〉 || 〈box〉 || 〈box〉|| 〈color〉 -〈box shadow〉 = inset? && 〈length〉{2,4}? && 〈color〉? - +〈box〉 = border-box | padding-box | content-box +〈bg-size〉 = [ 〈length〉 | 〈percentage〉 | auto ]{1,2} | cover | contain +〈position〉 = [ left | right | center | top | bottom | 〈percentage〉 | 〈length〉 ]{1,2,3,4} +〈bg-repeat〉 = repeat-x | repeat-y | [ no-repeat | repeat | round | space ]{1,2} +〈bg-image〉 = 〈image〉 | none +〈bg-layer〉 = 〈bg-image〉 || 〈position〉 [ / 〈bg-size〉 ]? || 〈bg-repeat〉 || 〈box〉 || 〈box〉 +〈final-bg-layer〉 = 〈bg-image〉 || 〈position〉 [ / 〈bg-size〉 ]? || 〈bg-repeat〉 || 〈box〉 || 〈box〉|| 〈color〉 +〈box shadow〉 = inset? && 〈length〉{2,4}? && 〈color〉? + @@ -2066,8 +1107,8 @@ entry { transition‑property - none | all | 〈property name〉 [ , 〈property name〉 ]* - all + none | all | 〈property name〉 [ , 〈property name〉 ]* + all CSS3 @@ -2075,8 +1116,8 @@ entry { transition‑duration - 〈time〉 [ , 〈time〉 ]* - 0s + 〈time〉 [ , 〈time〉 ]* + 0s CSS3 @@ -2084,8 +1125,8 @@ entry { transition‑timing‑function - 〈single‑timing‑function〉[ , 〈single‑timing‑function〉 ]* - ease + 〈single‑timing‑function〉[ , 〈single‑timing‑function〉 ]* + ease CSS3 @@ -2093,8 +1134,8 @@ entry { transition‑delay - 〈time〉 [ , 〈time〉 ]* - 0s + 〈time〉 [ , 〈time〉 ]* + 0s CSS3 @@ -2109,7 +1150,7 @@ entry { transition - 〈single-transition〉 [ , 〈single-transition〉 ]* + 〈single-transition〉 [ , 〈single-transition〉 ]* see individual properties CSS3 @@ -2118,11 +1159,11 @@ entry {
- -〈single-timing-function〉 = ease | linear | ease-in | ease-out | ease-in-out | - step-start | step-end | steps( 〈integer〉 [ , [ start | end ] ]? ) | cubic-bezier( 〈number〉, 〈number〉, 〈number〉, 〈number〉 ) -〈single-transition〉 = [ none | 〈property name〉 ] || 〈time〉 || 〈single-transition-timing-function〉 || 〈time〉 - +〈single-timing-function〉 = ease | linear | ease-in | ease-out | ease-in-out | + step-start | step-end | steps( 〈integer〉 [ , [ start | end ] ]? ) | + cubic-bezier( 〈number〉, 〈number〉, 〈number〉, 〈number〉 ) +〈single-transition〉 = [ none | 〈property name〉 ] || 〈time〉 || 〈single-transition-timing-function〉 || 〈time〉 + Animation properties @@ -2135,8 +1176,8 @@ entry { animation‑name - 〈single-animation-name〉 [ , 〈single-animation-name〉 ]* - none + 〈single-animation-name〉 [ , 〈single-animation-name〉 ]* + none CSS3 @@ -2144,8 +1185,8 @@ entry { animation‑duration - 〈time〉 [ , 〈time〉 ]* - 0s + 〈time〉 [ , 〈time〉 ]* + 0s CSS3 @@ -2153,8 +1194,8 @@ entry { animation‑timing‑function - 〈single‑timing‑function〉 [ , 〈single‑timing‑function〉 ]* - ease + 〈single‑timing‑function〉 [ , 〈single‑timing‑function〉 ]* + ease CSS3 @@ -2162,8 +1203,8 @@ entry { animation‑iteration-count - 〈single‑animation‑iteration‑count〉 [ , 〈single‑animation‑iteration‑count〉 ]* - 1 + 〈single‑animation‑iteration‑count〉 [ , 〈single‑animation‑iteration‑count〉 ]* + 1 CSS3 @@ -2171,8 +1212,8 @@ entry { animation‑direction - 〈single‑animation‑direction〉 [ , 〈single‑animation‑direction〉 ]* - normal + 〈single‑animation‑direction〉 [ , 〈single‑animation‑direction〉 ]* + normal CSS3 @@ -2180,8 +1221,8 @@ entry { animation‑play‑state - 〈single‑animation‑play‑state〉 [ , 〈single‑animation‑play‑state〉 ]* - running + 〈single‑animation‑play‑state〉 [ , 〈single‑animation‑play‑state〉 ]* + running CSS3 @@ -2189,8 +1230,8 @@ entry { animation‑delay - 〈time〉 [ , 〈time〉 ]* - 0s + 〈time〉 [ , 〈time〉 ]* + 0s CSS3 @@ -2198,8 +1239,8 @@ entry { animation‑fill‑mode - 〈single‑animation‑fill‑mode〉 [ , 〈single‑animation‑fill‑mode〉 ]* - none + 〈single‑animation‑fill‑mode〉 [ , 〈single‑animation‑fill‑mode〉 ]* + none CSS3 @@ -2214,7 +1255,8 @@ entry { animation - 〈single‑animation〉 [ , 〈single‑animation〉]* + 〈single‑animation〉 [ , 〈single‑animation〉]* + see individual properties CSS3 @@ -2222,15 +1264,14 @@ entry {
- -〈single-animation-name〉 = none | 〈property name〉 -〈single-animation-iteration-count〉 = infinite | 〈number〉 -〈single-animation-direction〉 = normal | reverse | alternate | alternate-reverse -〈single-animation-play-state〉 = running | paused -〈single-animation-fill-mode〉 = none | forwards | backwards | both -〈single-animation〉 = 〈single-animation-name〉 || 〈time〉 || 〈single-timing-function〉 || 〈time〉 || - 〈single-animation-iteration-count〉 || 〈single-animation-direction〉 || 〈single-animation-play-state〉 || 〈single-animation-fill-mode〉 - +〈single-animation-name〉 = none | 〈property name〉 +〈single-animation-iteration-count〉 = infinite | 〈number〉 +〈single-animation-direction〉 = normal | reverse | alternate | alternate-reverse +〈single-animation-play-state〉 = running | paused +〈single-animation-fill-mode〉 = none | forwards | backwards | both +〈single-animation〉 = 〈single-animation-name〉 || 〈time〉 || 〈single-timing-function〉 || 〈time〉 || + 〈single-animation-iteration-count〉 || 〈single-animation-direction〉 || 〈single-animation-play-state〉 || 〈single-animation-fill-mode〉 + Key binding properties @@ -2243,8 +1284,8 @@ entry { ‑gtk‑key‑bindings - none | 〈binding name〉 [ , 〈binding name〉 ]* - none + none | 〈binding name〉 [ , 〈binding name〉 ]* + none @@ -2255,10 +1296,8 @@ entry {
- 〈binding name〉 must have been assigned to a binding set with a - @binding-set rule. + 〈binding name〉 must have been assigned to a binding set with a @binding-set rule. - diff --git a/docs/reference/gtk/gtk-docs.sgml b/docs/reference/gtk/gtk-docs.sgml index 7cae512204..f29097308f 100644 --- a/docs/reference/gtk/gtk-docs.sgml +++ b/docs/reference/gtk/gtk-docs.sgml @@ -375,7 +375,8 @@ Theming in GTK+ - + +