Vaadin themes can be inherited, and this action requires using CSS @import statement. This is very useful mechanism, but I found that IE restricts @import to directives to maximum of 3 nested CSS files.
I tried to use Chameleon Blue theme as the base for my own theme and got application not working in IE. Googling did not give any solution. After some playing with IE and its developer tools I found that “base” theme CSS seem to be not linked to the application page (though it is imported in Chameleon’s CSS). Then I created a simple HTML page that includes a CSS, which in turn imports another CSS, and so on. IE allowed importing only three CSS in this manner.
I solved my problem by inserting Chameleon Blue’s styles.css directly in my CSS file, thus removing one level of import. However, this doesn’t look pleasant.
It seems that Vaadin needs another theme inheritance mechanism, e.g. inserting “base” CSS files directly in the host page instead of importing them via CSS @import.
I would like to discuss this on the forum before writing a ticket asking for enhancement. Any suggestions? Are there another solutions for this problem? Can it be reproduced, or I have too specific IE settings?
Thanks for the info, I hadn’t even considered this limitation before!
This sounds like a good suggestion, since the base should always be present for all Vaadin apps. Probably requires loads of changes to all servlets, and probably won’t make it into a release before version 7, though.
Having the base styles as a separate stylesheet of course means one additional HTTP request, which is discouraged.
Another option is to concatenate the base theme styles to all inheriting styles (as it is done with Reindeer and Runo). This is recommended for production environments with customized themes as well, since each @import statement requires one additional HTTP request (and if I remember correctly, IE has some issues with caching @import stylesheets properly). There are probably several viable tools that perform this sort of concatenation.
I’m planning to concatenate the Chameleon theme styles into one file once I have the time to make a new release. The online editor will also be made to produce only one file per each color scheme, so you only need to include one JAR in your classpath.
Crazy bugs… Can you let us know when the new all-in-one theme is ready? I spent a fair amount of time today trying to figure out why IE8 all of a sudden wasn’t working. It wasn’t until I backed out to reindeer that I realized it was even theme related since I just got a blank page, though I could see the page title being set.
Overall, I like chameleon-blue, though wonder if my users will be at all confused by the border-less unselected tabs. The icons and labels seem to just be floating out there, though it is very clean.
I’m still a bit unsure when the next version (1.1) will be released. I probably won’t be able to make it until after the summer break (I’ll be only vacation for a total of eight weeks through june to october).
For a workaround, you could try and import the “…/chameleon/styles.css” in your extending theme as well, before “…/chameleon-blue/styles.css”, and see if that fixes the nested imports. And you probably should isolate that fix for IE only, if possible.
Another workaround is to copy-paste the contents of the “chameleon-blue/styles.css” file into your own theme, and begin extending after that, but you probably already did this
It seems like combining them all into one file is not worth it. Just using the two imports does the trick for me, in my theme’s CSS file which includes yours using:
It may just be a matter of documenting this, or removing the base import from chameleon-blue so it becomes a requirement that you first suck in chameleon base, then the other color. Anyway, that does seem to resolve IE.
