UP | HOME

No initial for IE, then what should I use?

You might not know that IE browsers does not supports initial value in CSS, that doesn't sound like a big deal until you got a problem.

In my case, we have an element that always display its text (coming from unknown source) as lowercase, except the text containing company name, for example: "people are trying to get rid of the big five such as Google, Facebook and Amazon".

The solution we picked up was, wrapping the dynamic content in a filtering function, which will return all of the company names as a span, for example, the above text will be output as this HTML:

<div class="lowercase-text">people are trying to get rid of the big five such as <span class="no-mess">Google</span>, <span class="no-mess">Facebook</span> and <span class="no-mess">Amazon</span></div>

And we would define the CSS rules as the following snippet, reset the text-transform value for no-mess class:

.lowercase-text {
  text-transform: lowercase;
  .no-mess {
    text-transform: initial;
  }
}

This works well on any browsers except IE, because the damn browser doesn't supports initial value.

So how do we fix it?

Just change initial to none, since they has the same effect:

.no-mess {
  text-transform: none;
}

Date: 2019-02-06 Wed 00:00

Author: Huy Tran

Created: 2019-04-22 Mon 14:40