New CSS error in kendo.common.css introduced with 2013.1.514 build

[Ryan]

There's a strange margin declaration in the 2013.1.514 build that's causing my css parser to fail.

.k-menu .k-animation-container,
.k-popup .k-animation-container {
  margin-top: -1px;
  margin-top: -2px\9;
  padding-left: 1px;
}

margin-top: -2px\9;

And the less declaration:

.k-menu .k-animation-container,
.k-popup .k-animation-container
{
    margin-top: -1px;
    margin-top: ~"-2px\9";
    padding-left: 1px;
}

[Dimo]

Hello Ryan,

~"..." is a LESS syntax and tells the LESS compiler to skip processing the string inside the quotes and convert it to CSS code as is. Such statements are used for non-standard-compliant CSS hacks that would otherwise will be misinterpreted by the LESS compiler.

margin-top: ~"-2px\9";

However, I don't see the above code in any of the kendo.common.css CSS files in any of the recent internal builds. It is only present in the kendo.common.less files.

Regards,
Dimo
Telerik

[Ryan]

Hi Dimo,

The kendo.common.min.css file doesn't have it. You have to look inside the src\styles folder. There, both the kendo.common.css and kendo.common.less file has it.  Also, my less compiler 1.3.3 still has the bug after compiling kendo.common.less. What I see even after compilation:

.k-menu .k-animation-container,
.k-popup .k-animation-container {
  margin-top: -1px;
  margin-top: -2px\9;
  padding-left: 1px;
}

[Dimo]

Hi Ryan,

It seems I did not understand you the first time.

Anyway, the resulting CSS output is actually correct. \9 is a CSS hack, which targets IE.

We now have means to use standard-compliant browser-specific CSS, so we will replace the hack with an IE-specific selector. Changes will take effect in the next internal and official builds.

Regards,
Dimo
Telerik

[Ryan]

Update: I just saw your reply. Great, thanks!

To sum up the following, nothing in the kendo UI source needs changed. It is just tripping me up as this is the only non-standard CSS rule that presents a problem.

To build more upon this, I see what you mean about it being a non-standard compliant hack. I guess that margin-top: -2px\9; is a "valid" css hack. I have the need to scope all of the Kendo UI rules within a selector I use as a container. I started with the less files by wrapping everything like this:

.my-scope {
  // kendo ui LESS source here
}

But, some of the mixins such as 

.sprite-hoverable(@row, @column, @grid-size: 16px) when (ispixel(@column)) {
    .sprite-position(@row, @column);

    .k-link:not(.k-state-disabled):hover > &,
    .k-state-hover &,
    .k-button:hover &,
    .k-textbox:hover &,
    .k-button:active & {
        .sprite-position(@row - @grid-size, @column);
    }
}

Gave me a problem because after compilation the rules are messed up:

.k-state-hover .my-container .k-i-arrow-e {}

The LESS got even messier in some other spots like template.less. So to address all of the issues I compile all of the kendoui less without the scoping. Then, take the output CSS and wrap that inside my scope and compile it as less. So now the problem is the less compiler trying to process margin-top: -2px\9; as it is now missing the ~"..." preface.

Currently I have just removed the non-standard CSS rule from the LESS and CSS to avoid the problem.