GTK and CSS updates

I’ve written before about the powerful GTK3 CSS engine that drives the appearance of our favorite desktop OS.

Since my last post on the topic, GTK 3.4 brought in a lot of improvements, including among the others, support for most of the properties of the CSS3 backgrounds and borders family, linear gradients and the long requested inactive windows theming feature, which is showcased in GNOME 3.4.

Inactive windows theming

In the meanwhile, work didn’t stop on the development branch of GTK, and Benjamin, after improving the performance of our CSS parsing/caching engine by a factor of 10 or so, implemented support for transitions. CSS animations are around the corner too, and GNOME 3.6 will make use of all this goodness for a look cooler than ever!

Another feature that will be in GTK 3.6 is support for multiple layers of background images for a single element, as specified by CSS3; in other words, where you could only render a gradient or a solid color before, you can now render an unbounded set of images and patterns. If you combine this with the other CSS3 background properties, and transitions, the possibilities of what you can do are basically endless! Code for this is already in the GTK master branch, so go grab it and play with it while it’s hot!

This is a video I made to demonstrate these new features, enjoy :)

16 comments ↓

#1 yeyeyeyey on 06.01.12 at 12:53 am

I’m afraid of the more-than-possible overuse of this…

Please keep it simple. Please.

#2 ebassi on 06.01.12 at 7:04 am

@yeyeyeyey everything can be misused; what’s implemented here is CSS3 support as far as gtk+ can use it. the designers and app developers want this flexibility when it comes to creating new applications.

#3 ao2 on 06.01.12 at 9:01 am

Hi Cosimo, is there anything in the works to make theme building/hacking easier for beginners?

Something like FireBug for Firefox which shows style changes live; maybe based on gtkparasite[1] ?

(JFYI gtkparasite can be patched to handle Gtk3 but it doesn’t know anything about CSS theming.)

Thanks,
Antonio

[1] https://github.com/chipx86/gtkparasite

#4 Benjamin Otte on 06.01.12 at 9:13 am

@yeyeyeyey: Why keep GTK simple? Designers should have the tools to do beautiful designs, no?

#5 liam on 06.01.12 at 6:37 pm

So, can we expect client side window decorations to be an upcoming feature?
Amazing work all! Css animations will provide a really easy and lightweight way to perform various effects we current need clutter to do (though clutter is obviously far more general), and the n-backgrounds could be used to interest effect.

#6 zac on 06.01.12 at 9:10 pm

Will these be available in gnome-shell or are these only for gtk?

#7 cosimoc on 06.01.12 at 9:11 pm

It’s GTK only.

#8 cosimoc on 06.01.12 at 9:14 pm

Client-side window decorations are kinda unrelated to this, even though they would obviously benefit from a more powerful GTK/CSS engine.
In the long run, the idea is to rebase GTK on top of Clutter, so these animations would be performed using Clutter in the backend (but this is probably not going to happen very soon, at least not before another year or so).

#9 cosimoc on 06.01.12 at 9:20 pm

Hi Antonio, as far as I know there’s nothing in the works specifically targeted at building themes. The closest thing that comes to my mind is gedit-cossa . gtk-demo also has some examples of interactive GTK/CSS editors, but they’re separate binaries and don’t allow live style changes to running applications a-la FireBug. It would be cool indeed if this could be somehow part of gtkparasite. Rui Matos started a first integration of style visualization in gtkparasite in his branch here [1].

[1] https://github.com/rtcm/gtkparasite

#10 liam on 06.01.12 at 11:02 pm

So are we moving to replace the cairo backed gdk or is clutter only going to be used for staging and animation purposes?
Regarding thw cswd, I has in mind the problem of native Wayland applications.

Again, nice work.

Best/liam

#11 Sri Ramkrishna on 06.02.12 at 6:51 am

Great stuff dude!

I was hoping the clutter thing would be done this year. At least I had the impression that we would be moving fairly quickly, but perhaps I have mis-remembered Emmanuele’s post.

#12 sewa komputer on 06.02.12 at 7:42 am

Nice post, thank for the informations.

#13 ebassi on 06.02.12 at 10:27 pm

@Sri: in order to get gtk based on clutter I need to release clutter 2.0 – and that’s not going to happen this year. then, after I get clutter 2.0 out we still need to figure out the details of getting gtk built on top of it. I’d say end of 2013/mid 2014 is a better timeframe for it.

#14 ebassi on 06.02.12 at 10:31 pm

@liam: the idea is to have clutter actors represent css boxes, so that writing applications using gtk would not change drastically – but writing widgets would imply drawing with cairo and arranging elements with clutter.

#15 will on 06.05.12 at 5:10 pm

at what point does a GTK implementation of CSS make it indistinguishable (and thus redundant?) from a real web browser?

#16 Craig on 06.25.12 at 6:06 am

@Will

How on earth does a trivial similarity like both using CSS make one or the other “redundant”? That’s a pretty large and ignorant leap of logic.

Have you been institutionalized by consumerism into thinking that appearances are all that matters? Because I think the people pouring hours of their time into platforms and applications would disagree with you.

HTML/DOM applications are good for some things and really quite terrible for others. No amount of web advocacy is going to change that.