IE specific CSS

Flow
1

Hi everyone,

We have started to implement a new Vaadin web app which heavily uses the CssLayout. Mainly to give our designer more freedom and possibilities to include very brand-specific behaviour.

I was recently asked whether it’s possible to have IE-specific CSS files. I’m not a front end developer myself, but it seems common to have CSS that works with IE and other CSS for other browsers.

Looking through the Vaadin code, I found the BrowserInfo class and in particular:

    static {
        // Add browser dependent v-* classnames to body to help css hacks
        String browserClassnames = get().getCSSClass();
        RootPanel.get().addStyleName(browserClassnames);
    }

and

public String getCSSClass()

Also, the reindeer theme contains a button-ie.css file with .ie classes defined. Without having spent any time trying that out, I want to ask if that’s enough? Creating a styles-ie.css file with .ie styles to get that to load in IE.
I somehow have a suspicion that this would be too nice to be true… :wink:

Thanks

2

Hi,

Yes, that’s too good to be true!

Hopefully Jouni, the Vaadin CSS Ninja, will point out any errors in the following, but basically :

Vaadin doesn’t do selective inclusion of CSS files; it just includes VAADIN/themes/the-theme-name/styles.css.

To allow for browser specific workarounds, it adds CSS classes to the body element of the HTML. Here are some examples from browsers and machines I have on my desk :

<body scroll="auto" class="v-generated-body v-sa v-ch v-webkit v-win">
<body scroll="auto" class="v-generated-body v-sa v-sa5 v-sa50 v-webkit v-mac">
<body scroll="auto" class="v-generated-body v-ff v-ff3 v-ff36 v-gecko v-win" >
<body scroll="auto"  class="v-generated-body v-ie v-ie8 v-ie80 v-trident v-win" >

As a silly example, if you wanted the background of textfields to be yellow on IE, but green on Safari on mac you could do :[code]

.v-ie .v-textfield {
background: yellow;
}

.v-sa.v-mac .v-textfield {
background: green;
}
[/code]
You can, if you want “silo” the ie-specifics into a separate stylesheet, and include it into the main stylesheet e.g.
in styles.css, you can add @import url(‘styles-ie.css’). This would not be conditional, of course, it would always be included.

If you really wanted to do selective inclusion of a stylesheet just for IE - and I contend that it’s really not necessary - you can do
traditional" conditional stylesheets
 by overriding ApplicationServlet#writeAjaxPageHtmlHeader(BufferedWriter, String, String, HttpServletRequest) e.g.

public class ExampleApplicationServlet extends ApplicationServlet {
  @Override
  protected void writeAjaxPageHtmlHeader(BufferedWriter page, String title, String themeUri, HttpServletRequest request) throws IOException {
    super.writeAjaxPageHtmlHeader(page, title, themeUri, request);

    page.write("<!--[if IE]
>\n");
    page.write("        <link rel=\"stylesheet\" type=\"text/css\" href=\"" + themeUri + "/styles-ie.css\" />\n");
    page.write("<![endif]
-->");
  }
}

I have not tried this, but that’s the way I would approach it. Hope that helps a little!

Cheers,

Charles

3

Hey Charles,

That’s exactly what we needed. We’ll keep everything in styles.css and think of splitting it out in different files later if the one styles.css file should be come too big (although probably not anytime soon ;-)).

Thanks,

Mike

4

Try to use conditinal comments for IE. IE has smart way to control styles for different version of the browser. For other browsers, there are some hacks-bags:
CSS hacks for Mozilla Firefox, Opera, Safari and Internet Explorer
.