在GTK+中使用CSS定制软件外观

曾建凯
 曾建凯
发布于 2010年08月29日
收藏 3

原作者文章:CSS-like styling for GTK+

Qt的CSS是一个非常强大的东西,他能够让开发人员迅速更换软件界面的外观,而不会影响程序自身。很早就听说GTK+也在计划加入CSS引擎,但这已经是2年前的新闻了。但是最近又有新的消息,以下翻译作者原话:

最近,我一直在断断续续的开发gtk-style-context分支,这是一个用于代替GtkStyle,旨在为开发者摆脱在创建软件界面时的局限性。这里列举一些特性:

  • Cairo将被作为头等公民:这意味着样式定义可以在任何环境中输出,而不仅仅局限于X Windows下(跨平台样式渲染)。
  • 无需定义外部元件:新增一个GtkWidgetPath的抽象,他可以准确的定义到元件的每个部位的样式(类似CSS的伪类、子元素,查询路径)
  • 元件可标识化:你可以为元件定义不同名称区域,使他们拥有不同的风格(类似Qt的setObjectName("myWidget"),对应CSS的#myWidget,看例子GTK还将会支持.class的标识符的,不知道将会如何实现。)
  • 动画支持:不需要在主题引擎中进行hack,可通过CSS定制。(这可比Qt的CSS还有趣了)
    比如我需要在复选按钮在勾选时以一个“ease-in-out”的动画呈现,则只需:(资料来源
    GtkCheckButton:active {
    transition: 200ms ease-in-out;
    }

以下是一份CSS in GTK+的代码实例:

@named-color: #01a4f9;

/* Set background on GtkCheckButton
* and other types inheriting from
* it
*/
GtkCheckButton {
background-color: #14a414;
}

/* Theme buttons inside a table,
* not necessarily a direct child
*/
GtkTable GtkButton {
foreground-color: #f01df4;
text-color: #f01df4;
}

/* Theme scale widgets that are
* direct children of a GtkTable
*/
GtkTable > GtkScale {
foreground-color: #01ab39;
}

/* Widget states may be defined */
GtkButton:active {
background-color: #f01;
}

/* Generic classes may be used as well */
.button:prelight {
background-color: #10f;
}

/* any widget with this name will be themed */
*#some-widget-name {
font-color: #e0a;
}

/* This will apply if both states happen on the
* widget, such as a pressed checkbox button with
* the pointer on it.
*/
GtkButton:active:prelight {
background-color: shade (#f01, 1.3);
}

/* Set bg color on odd rows */
GtkTreeView row:nth-child(even) {
background-color: #f00f10;
}

/* Theme first notebook tab differently */
GtkNotebook tab:nth-child(first) {
background-color: @named-color;
}

/* And paint a bit darker if active */
GtkNotebook tab:nth-child(first):active {
background-color: shade (@named-color, 0.7);
}

/* Animate checkbutton transitions */
GtkCheckButton:active {
transition: 200ms ease-in-out;
}

目前,GTK+已经开始在内部获得对CSS的支持,即通过新增的GtkStyleContext。如果一切顺利的话,GTK+的CSS支持将在3.0版本正式完成。

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区。
转载请注明:文章转载自 开源中国社区 [http://www.oschina.net]
本文标题:在GTK+中使用CSS定制软件外观
加载中
返回顶部
顶部