Triple Periods in front of CSS

Question

This is pretty weird, a mail I received has the following definitions for the css:

<style type="text/css">
...NL-default {
    font-family: "Arial";
    font-size: 12px;
    color: #000000;
}
...style1 {
    font-family: "Arial";
    font-size: 12px;
    color: #0000FF;
}
...style4 {
    text-align: center;
    background-color: #F3F3F3;
    font-family: "Arial";
    font-size: 12px;
    color: #000000;
}
...style7 {
    text-align: center;
    color: #FFFFFF;
    background-color: #000080;
    font-family: "Arial";
    font-size: 12px;
    font-weight: bold;
}
...style14 {
    font-family: "Arial";
    font-size: 14px;
    color: #FF3300;
    font-weight: bold;
}

Basically all styles have triple periods in front of them.

And it's applied in a matter like so:

    <table style="width: 100%;" class="style41" cellSpacing="1" cellPadding="3">

        <tbody><tr>
            <td style="width: 233px;" class="style34" strong=""><strong>Notification</strong></td>

I believe most peoples' first intuition might be.. this won't work and you'd be right. On Chrome, Firefox and IE9, the CSS isn't applied to the mail body at all.

However, on IE8, it gets applied perfectly which bewilders me quite a bit. What's the purpose of putting triple periods in front of your CSS definitions? Why does this work only on IE8?

IE is strange, you can't expect a lot of it, but this is indeed baffling.. — Deep Frozen, Jan 11 '13 at 07:27
given the generic class names and repetitive style attributes, I'd guess this was out of some automated system of some sort (and, as stated, perhaps attempting to use some IE hacks as well). Ugly all around. — DA., Jan 11 '13 at 07:44

score 2 · Accepted Answer · edited May 23 '17 at 10:24

IE is known to treat leading dots in class selectors as a regular class selector, much like it treats multiple class selectors as only the last in the chain, in quirks mode.

That said... this seems like a really ugly hack. I'm not even sure that it was intended as an IE hack, because the code doesn't look like it was intended only for IE to use. In that case, I don't know what the real purpose is of adding leading periods to the mail styles like that.

Also, I'm not sure why the code wouldn't work in IE9, not even in quirks mode. The following test case definitely makes the text red in all IE versions up to and including 9:

<html>
  <head>
    <style type="text/css">
    ...foo {
        color: #FF0000;
    }
    </style>
  </head>
  <body>
    <p class="foo">This text should not be red.</p>
  </body>
</html>

As you may have guessed, this isn't valid CSS. That's why it doesn't work in other browsers, not even in their quirks modes.

Triple Periods in front of CSS

1 Answers1

Linked