Overview of CSS Localization

Although well-defined in the client-app world, localization of CSS code is not very well supported. Ajax Minifier attempts to provide a solution by utilizing .NET .RESX and/or .RESOURCES files in your project to produce localized stylesheets. What Ajax Minifier does is look for specifically-formatted comments from which it can pull a string identifier. If the .RESX or .RESOURCES contains a string by that name, it replaces the value of the next property declaration with the value of that string resource. The format of the comment is /* [ID] */ – where “ID” is the name of the string resource to use.

Example

Let’s say we have the following .RESX file, named jp.resx. It defines three string resources: BackgroundColor1, TextColor1, and FontFamily1.

image

The CSS source file, foo.css, will have default, non-localized values for certain properties, but will preface those properties with the appropriate comments that name the resources to use for the value that follows:

body 
{
    /* [BackgroundColor1] */
    background-color: #fff;
    /* [TextColor1] */
    color: #000;
    /* [FontFamily1] */
    font-family: arial,helvetica,sans-serif;
}

The replacements will work on the property declaration values following each comment, so the resulting CSS would look something like:

body 
{
    background-color: #ffc;
    color: #333;
    font-family: meiryo,"ms pgothic",osaka,sans-serif;
}

When minifying your source CSS, simply use the –res switch to merge your resources. For example, if you have four .RESX files, en.resx, fr.resx, ru.resx, and jp.resx, these four commands would generate your four localized CSS files:

ajaxmin.exe foo.css –o foo.en.css –resx en.resx
ajaxmin.exe foo.css –o foo.fr.css –resx fr.resx
ajaxmin.exe foo.css –o foo.ru.css –resx ru.resx
ajaxmin.exe foo.css –o foo.jp.css –resx jp.resx

Unlike JavaScript localization, CSS localization does not utilize the :IDENT portion of the –res switch.

Last edited Oct 17, 2011 at 10:23 PM by ronlo, version 1

Comments

No comments yet.