Adventures in the CSS land

Some time ago I blogged about a number of improvements which made its way into the GNOME 3.0 theme, thanks to the new GTK3 CSS-powered theming engine.

This cycle, Benjamin and I have been working on making the CSS parser in GTK3 more conforming to the W3C specifications, while adding some cool new features in the meanwhile.

What’s already there

• The parser from GTK master will now report errors consistently when it fails to parse the CSS data, including the position in the data where the error occurred. This can be used nicely e.g. to highlight the broken line in an editor, such as Carlos’ nice gedit-cossa plugin (GTK master also recently grew a very simple live-editor too if you feel like toying with this).
• It’s really easy to hook up parsing for new properties; CSS features such as inheritance and shorthand properties are now supported natively by GtkThemingEngine. Existing properties have been extended to be shorthands according to the CSS specification (e.g. border-width, padding, border-radius), and the non-shorthand versions have been added too (e.g. setting border-right will now do the right thing).
• nth-child structural pseudo-class support have been extended to work for generic containers. GtkBox already supports this, with other popular containers (e.g. GtkToolbar) to follow shortly. This means it’s easy now for themes to visually connect contiguous borders.

New properties

We’re adding support for new CSS properties, to allow themes to specify subtle eye-candy directly from the stylesheet. Here’s a list of additions targeting GTK 3.2.

• text-shadow is supported already in GTK master.
  
  
• icon-shadow is a custom property which behaves similar to text-shadow for icons. It looks great with symbolic icons. It’s also generic enough to be used with icon-like UI elements such as arrows, spinners and whatnot in the future – git branch
  
  
• box-shadow allows to render inset and outset frame shadows. Outset box-shadow support is unfortunately really hard to implement within the current GTK drawing process, so it won’t make it in 3.2.
  
  
• border-image will be expanded to be a shorthand property as well, and match the CSS3 specification for drawing.
  
  

Considerations

CSS is huge and complete property coverage is not interesting for GTK. We plan to incrementally add support for new properties/pseudo-classes based on the requirements of the designs to be implemented; help/feedback is gladly appreciated. If you have a CSS attribute in mind that should be supported at the GTK level, please file a bug, possibly with a patch attached 🙂

We’re still carrying over a legacy of many per-widget style properties that specify paddings/borders; I think we should try to get rid of them where possible, and try to use standard CSS and style classes (e.g. to define different areas inside a widget) as much as possible: CSS is documented very well, and we can trust the specification for any semantic of the properties, not reinventing the wheel for every widget. This is a GTK4-ish goal, but I think it’d be great to start soon porting and deprecating.

I also think native theming engines should be as small as possible; ideally they should be able to get any desired effect using the CSS stylesheet only. This means the builtin GTK theming engine should be flexible enough for most of the use cases.