Question

I`m using LessCSS, java, and colorbox. Colorbox has a css file. One of the styles is as follow:

.cboxIE6 #cboxMiddleRight {
    _behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}

it´s seems i´m need to use an escape character. When lesscss compiles the file, i getting the error

javax.servlet.ServletException: Parse Error: Syntax Error on line 77 (line 77, column 1) near
.cboxIE6 #cboxMiddleRight {
 _behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}

then i tried this..

.cboxIE6 #cboxMiddleRight {
    _behavior: ~"expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split(\'\"\')[1], this.style.background = \"none\", this.style.filter = \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\" + this.src + \", sizingMethod=\'scale\')\")";
}

but. i get an error saying i´m missing a closing “}”

I don´t know how to solve this. Sure it´s a simple thing, but i can´t solve it.

Here is the java less css configuration (web.xml):

<servlet>
    <servlet-name>less</servlet-name>
    <servlet-class>com.asual.lesscss.LessServlet</servlet-class>
    <init-param>
        <param-name>compress</param-name>
        <param-value>true</param-value>
    </init-param>
    <init-param>
        <param-name>cache</param-name>
        <param-value>false</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
    </servlet>


<servlet>
    <servlet-name>resource</servlet-name>
    <servlet-class>com.asual.lesscss.ResourceServlet</servlet-class>
    <load-on-startup>2</load-on-startup>
</servlet>

<servlet-mapping>
    <servlet-name>less</servlet-name>
    <url-pattern>*.css</url-pattern>
</servlet-mapping>

Any idea?

Thanks in advance.

Answer 1

This compiles fine for me:

.cboxIE6 #cboxMiddleRight {
  _behavior: ~`this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')"`;
}

but it also tries executing the JavaScript at compile time. To avoid that, you could add another more quotes:

.cboxIE6 #cboxMiddleRight {
  _behavior: ~`"\"this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('\\\"')[1], this.style.background = \\\"none\\\", this.style.filter = \\\"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\\\" + this.src + \\\", sizingMethod='scale')\""`;
}

Though it looks ugly, it compiles down to this:

.cboxIE6 #cboxMiddleRight {
  _behavior: "this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('\"')[1], this.style.background = \"none\", this.style.filter = \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\" + this.src + \", sizingMethod='scale')";
}