Обзор CSS в GTK+

Узлы CSS

GTK+ применяет информацию о стиле, найденную в таблице стилей, сопоставляя селекторы с деревом узлов. Каждый узел в дереве имеет имя, состояние и, возможно, классы стилей. Потомки каждого узла упорядочены линейно.

Каждый виджет имеет один или несколько таких узлов CSS и определяет их имя, состояние, классы стилей и то, как они расположены как дочерние и родственные элементы в общем дереве узлов. Документация по каждому виджету объясняет, какие узлы CSS он имеет.

Таблицы стилей

Основная структура таблиц стилей, понятных GTK+, представляет собой серию операторов, которые являются либо наборами правил, либо правилами «@», разделенными пробелами.

Набор правил состоит из селектора и блока деклараций, представляющего собой серию деклараций, заключенных в фигурные скобки. Декларации разделяются точкой с запятой. Несколько селекторов могут использовать один и тот же блок деклараций, помещая все разделители перед блоком, разделенные запятыми.

Импортирование таблиц стилей

GTK+ поддерживает правило CSS @import для загрузки другой таблицы стилей помимо текущей.

Синтаксис правила @import выглядит следующим образом:

〈import rule〉 = @import [ 〈url〉 | 〈string〉 ]

〈url〉 = url( 〈string〉 )

Чтобы узнать больше о правиле @import, вы можете прочитать модуль Каскадирования спецификации CSS.

Селекторы

Селекторы работают очень похоже на то, как они работают в CSS.

Все виджеты имеют один или несколько узлов CSS с именами элементов и классами стилей. При использовании классов стилей в селекторах, они должны быть префиксрованы точкой. Имена виджетов могут быть использованы в селекторах как идентификаторы. При использовании в селекторе, имена виджетов должны быть префиксрованы символом #.

В более сложных ситуациях селекторы могут быть объединены различными способами. Для того, чтобы узел удовлетворял нескольким условиям, объедините несколько селекторов в один, конкатенировав их. Чтобы сопоставить узел только тогда, когда он встречается внутри какого-то другого узла, запишите два селектора друг за другом, разделив их пробелом. Чтобы ограничить сопоставление прямыми потомками родительского узла, вставьте символ > между двумя селекторами.

Можно выбрать узлы CSS в зависимости от их позиции среди своих братьев по применению псевдоклассов к селектору, таких как :first-child, :last-child или :nth-child(even). При использовании в селекторах, псевдоклассы должны быть префиксрованы символом :.

Другое применение псевдоклассов заключается в сопоставлении виджетов в зависимости от их состояния. Доступные псевдоклассы для состояний виджетов: :active, :hover, :disabled, :selected, :focus, :indeterminate, :checked и :backdrop. Кроме того, следующие псевдоклассы не имеют прямого эквивалента как состояния виджета: :dir(ltr) и :dir(rtl) (для направления текста), :link и :visited (для ссылок) и :drop(active) (для выделения целей переноса). Псевдоклассы состояния виджета могут применяться только к последнему элементу в селекторе.

Для определения эффективного стиля для виджета, все совпадающие наборы правил объединяются. Как и в CSS, правила применяются по специфичности, поэтому правила, селекторы которых более точно соответствуют узлу, будут иметь приоритет над другими.

Полный синтаксис селекторов, поддерживаемых GTK+, можно найти в таблице ниже. Основное отличие от CSS состоит в том, что GTK+ в настоящее время не поддерживает селекторы атрибутов.

〈nth-child〉 = even | odd | 〈integer〉 | 〈integer〉n | 〈integer〉n [ + | - ] 〈integer〉

Чтобы узнать больше о селекторах в CSS, прочитайте модуль Селекторы спецификации CSS.

Цвета

CSS позволяет задавать цвета различными способами, используя числовые значения или имена из предопределённого списка цветов.

〈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〉

Ключевое слово currentColor разрешается до текущего значения свойства color при использовании в другом свойстве и до унаследованного значения свойства color при использовании в самом свойстве color.

Ключевое слово transparent можно рассматривать как сокращение для rgba(0,0,0,0).

Список допустимых имён цветов и дополнительную информацию о цветах в CSS см. в модуле Цвет спецификации CSS.

GTK+ добавляет несколько дополнительных способов задания цветов.

〈gtk color〉 = 〈symbolic color〉 | 〈color expression〉 | 〈win32 color〉

Первый — ссылка на цвет, определённый правилом @define-color. Синтаксис для правил @define-color следующий:

〈define color rule〉 = @define-color 〈name〉 〈color〉

Для ссылки на цвет, определённый правилом @define-color, используйте имя из правила, помещённое перед @.

〈symbolic color〉 = @〈name〉

GTK+ также поддерживает выражения цвета, которые позволяют преобразовывать цвета в новые и могут быть вложенными, предоставляя богатый язык для определения цветов. Выражения цвета напоминают функции, принимающие 1 или более цветов и в некоторых случаях число в качестве аргументов.

shade() оставляет цвет неизменным, когда число равно 1, и преобразует его в чёрный или белый по мере приближения числа к 0 или 2 соответственно. Для mix(), 0 или 1 возвращают неизменённый первый или второй цвет соответственно; числа между 0 и 1 возвращают смешение двух цветов; числа меньше 0 или больше 1 усиливают RGB-компоненты первого или второго цвета соответственно. alpha() принимает число от 0 до 1 и применяет его в качестве непрозрачности указанного цвета.

〈color expression〉 = lighter( 〈color〉 ) | darker( 〈color〉 ) | shade( 〈color〉, 〈number〉 ) |

                     alpha( 〈color〉, 〈number〉 ) | mix( 〈color〉, 〈color〉, 〈number〉 )

В Windows GTK+ позволяет ссылаться на системные цвета следующим образом:

〈win32 color〉 = -gtk-win32-color( 〈name〉, 〈integer〉 )

Изображения

CSS позволяет задавать изображения различными способами, для фонов и границ.

〈image〉 = 〈url〉 | 〈crossfade〉 | 〈alternatives〉 | 〈gradient〉 | 〈gtk image〉

〈crossfade〉 = cross-fade( 〈percentage〉, 〈image〉, 〈image〉 )

〈alternatives〉 = image([ 〈image〉, ]* [ 〈image〉 | 〈color〉 ] )

〈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

Самый простой способ указать изображение в CSS — загрузить файл изображения из URL. CSS не определяет ничего о поддерживаемых форматах файлов; в GTK+ вы можете ожидать, что по крайней мере PNG, JPEG и SVG будут работать. Полный список поддерживаемых форматов изображений определяется доступными загрузчиками изображений gdk-pixbuf и может различаться в разных системах.

Переход позволяет указать изображение как промежуточное между двумя изображениями. Переходы задаются в черновике модуля Изображение спецификации CSS 4 уровня.

Синтаксис image() предоставляет способ указать резервные варианты, на случай, если формат изображения не поддерживается. Можно указать несколько резервных изображений, которые будут проверены по очереди, пока не будет успешно загружено одно из них. Последний резервный вариант может быть цветом, который будет отображен как однородное изображение.

Градиенты — это изображения, плавно переходящие от одного цвета к другому. CSS предоставляет способы задания повторяющихся и неповторяющихся линейных и радиальных градиентов. Радиальные градиенты могут быть круговыми или ориентированными по осям эллипсами. В дополнение к CSS-градиентам GTK+ имеет собственные расширения -gtk-gradient.

Линейный градиент создаётся путём указания линии градиента и нескольких цветов, размещённых вдоль этой линии. Линия градиента может задаваться с помощью угла или с помощью ключевых слов направления.

Радиальный градиент создаётся путём указания центральной точки и одного или двух радиусов. Радиусы могут быть заданы явно как длины или проценты, или косвенно, с помощью ключевых слов, определяющих, как конечный круг или эллипс должен располагаться относительно области, в которой он рисуется.

Чтобы узнать больше о градиентах в CSS, включая подробности о том, как цветовые остановки размещаются на линии градиента и ключевые слова для указания размеров радиуса, вы можете прочитать модуль Изображение спецификации CSS.

GTK+ расширяет синтаксис CSS для изображений и также использует его для задания иконок.

〈gtk image〉 = 〈gtk gradient〉 | 〈themed icon〉 | 〈scaled image〉 | 〈recolored image〉 | 〈win32 theme part〉

GTK+ поддерживает альтернативный синтаксис для линейных и радиальных градиентов (который был реализован до поддержки CSS-градиентов).

〈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〉 )

Числа, используемые для задания положений x и y, радиусов, а также положений цветовых остановок, должны быть между 0 и 1. Ключевые слова для положений x и y (слева, справа, сверху, снизу, по центру) отображаются в числовых значениях 0, 1 и 0,5 очевидным образом. Цветовые остановки, использующие синтаксис from() и to(), являются сокращениями для цветовой остановки с числовыми позициями 0 и 1 соответственно.

GTK+ имеет широкую поддержку загрузки иконок из тем иконок. Она доступна из CSS с синтаксисом -gtk-icontheme.

〈themed icon〉 = -gtk-icontheme( 〈icon name〉 )

Указанное имя иконки используется для поиска тематической иконки, учитывая значения свойств -gtk-icon-theme и -gtk-icon-palette. Этот тип изображения используется в основном в качестве значения свойства -gtk-icon-source.

GTK+ поддерживает масштабирование рендеринга на дисплеях с высоким разрешением. Это лучше всего работает, если изображения могут указывать нормальные и варианты высокого разрешения. Из CSS это можно сделать с помощью синтаксиса -gtk-scaled.

〈scaled image〉 = -gtk-scaled( 〈image〉[ , 〈image〉 ]* )

Хотя -gtk-scaled принимает несколько вариантов более высокого разрешения, на практике он в основном будет использоваться для указания обычного изображения и одного варианта для масштаба 2.

〈recolored image〉 = -gtk-recolor( 〈url〉 [ , 〈color palette〉 ] )

Символьные иконки из темы иконок перекрашиваются в соответствии со свойством -gtk-icon-palette. Перекрашивание иногда необходимо для изображений, которые не являются частью темы иконок, и синтаксис -gtk-recolor делает это доступным. -gtk-recolor требует URL в качестве первого аргумента. Остальные аргументы задают цветовую палитру для использования. Если палитра не указана явно, используется текущее значение свойства -gtk-icon-palette.

В Windows GTK+ позволяет ссылаться на части системной темы как на изображения следующим образом:

〈win32 theme part〉 = -gtk-win32-theme-part( 〈name〉, 〈integer〉 〈integer〉

                                              [ , [ over( 〈integer〉 〈integer〉 [ , 〈alpha value〉 ]? ) | margins( 〈integer〉{1,4} ) ] ]* )

Переходы

CSS определяет механизм, с помощью которого изменения значений свойств CSS могут быть выполнены постепенно, а не сразу. GTK+ также поддерживает эти переходы.

Чтобы включить переход для свойства, когда набор правил вступает в силу, его необходимо указать в свойстве transition-property в этом наборе правил. Только анимируемые свойства могут быть указаны в transition-property.

Подробности перехода можно изменить с помощью свойств transition-duration, transition-timing-function и transition-delay.

Чтобы узнать больше о переходах, вы можете прочитать модуль Переходы спецификации CSS.

Анимации

В дополнение к переходам, которые запускаются изменениями базового дерева узлов, CSS также поддерживает определённые анимации. В то время как переходы определяют, как значения свойств изменяются от одного значения к новому, анимации явно определяют промежуточные значения свойств в ключевых кадрах.

Ключевые кадры определяются с помощью правила @, которое содержит один или несколько наборов правил со специальными селекторами. Объявления свойств для неанимируемых свойств игнорируются в этих наборах правил (за исключением свойств анимации).

〈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〉

Чтобы включить анимацию, имя ключевых кадров должно быть установлено в качестве значения свойства animation-name. Подробности анимации можно изменить с помощью свойств animation-duration, animation-timing-function, animation-iteration-count и других свойств анимации.

Чтобы узнать больше об анимациях, вы можете прочитать модуль Анимации спецификации CSS.

Связывания с клавишами

Для расширения связывания с клавишами, влияющего на различные виджеты, GTK+ поддерживает правило @binding-set для обработки набора директив bind/unbind. Обратите внимание, что для того, чтобы они вступили в силу, наборы связей, определённые таким образом, должны быть связаны с наборами правил путём установки свойства -gtk-key-bindings.

Синтаксис правил @binding-set следующий:

〈binding set rule〉 = @binding-set 〈binding name〉 { [ [ 〈binding〉 | 〈unbinding〉 ] ; ]* }

〈binding〉 = bind "〈accelerator〉" { 〈signal emission〉* }

〈signal emission〉 = "〈signal name〉" ( [ 〈argument〉 [ , 〈argument〉 ]* ]? }

〈unbinding〉 = unbind "〈accelerator〉"

где 〈ускоритель〉 — строка, которую можно разобрать с помощью gtk_accelerator_parse(), 〈имя сигнала〉 — имя сигнала keybinding для соответствующего виджета, и список 〈аргументов〉 должен соответствовать объявлению сигналов.

scale[.fine-tune]
├── marks.top
│   ├── mark
┊   ┊
│   ╰── mark
├── trough
│   ├── slider
│   ├── [highlight]
│   ╰── [fill]
╰── marks.bottom
    ├── mark
    ┊
    ╰── mark