RadScriptManager and JQueryUI Background Image URLs

[Rob sherwood]

Hi there,

I'm using:

Visual Studio 2010
AJAX Q2 2011 2011.2.712.35 (Bin35)

I use the RadScriptManager to include all my CSS - I'm successfully including my own stylesheets, as well as a custom skin:

(web.config)

<add key="Telerik.Web.UI.StyleSheetFolders" value="~/_Resources/CSS/" />
<add key="Telerik.Skin" value="IntranetSkin" />
<add key="Telerik.EnableEmbeddedSkins" value="false" />
<add key="Telerik.EnableEmbeddedBaseStylesheet" value="false" />

(Base.Master)

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" EnableStyleSheetCombine="true">
    <StyleSheets>
        <telerik:StyleSheetReference Path="~/_Resources/CSS/base.css" />
        <telerik:StyleSheetReference Path="~/_Resources/CSS/start/jquery-ui-1.8.15.custom.css" />
        <telerik:StyleSheetReference Path="~/_Resources/CSS/styles.css" />
        <telerik:StyleSheetReference Name="Telerik.Web.UI.Skins.Menu.css" Assembly="Telerik.Web.UI" />
        <telerik:StyleSheetReference Name="Telerik.Web.UI.Skins.Grid.css" Assembly="Telerik.Web.UI" />
    </StyleSheets>
</telerik:RadStyleSheetManager>

However, when I do something like this (these classes apply background images to the elements):

(index.aspx)

<div class="ui-state-default ui-corner-all">
    <span class="ui-icon ui-icon-circle-zoomin"></span>
</div>

I get the following 404 errors (via Chrome's error console):

GET http://localhost:411/images/ui-bg_glass_45_0078ae_1x400.png 404 (Not Found)
GET http://localhost:411/images/ui-icons_e0fdff_256x240.png 404 (Not Found)

The files in question exist in http://localhost:411/_Resources/CSS/start/images/, and they're referenced correctly by the JQuery UI CSS file:

(_Resources/CSS/start/jquery-ui-1.8.15.custom.css)

.ui-state-default .ui-icon { background-image: url(images/ui-icons_e0fdff_256x240.png); }

If I include the CSS outside of the StyleSheetManager:

(Base.Master)

<link type="text/css" href="~/_Resources/CSS/start/jquery-ui-1.8.15.custom.css" rel="Stylesheet" />

then things work as expected. I don't seem to have problems with background-image URLs in my other included CSS files.

Any ideas?

Thanks,
Rob

[Simon]

Hello Rob Sherwood,

This behavior is caused to the following fact: the external style sheets are requested through Telerik.Web.UI.WebResource.axd, which is in the web site root. So the URLs of the images referenced in these CSS files have to be also relative to the root, e.g. the one from your example has to be:

.ui-state-default .ui-icon { background-image: url(/_Resources/CSS/images/ui-icons_e0fdff_256x240.png); }

I hope this helps.

Greetings,
Simon
the Telerik team

[Kevin Warnke]

Are there plans to make the RadStyleSheetManager smarter so that it would parse through CSS content to see if any paths need to be updated when it's including a CSS file?  This seems like a feature that it could do pretty easily (maybe a new attribute on the manager as to whether this step should be performed).

Thanks,
Kevin

[Simon]

Hi Kevin,

Could you please elaborate more - what kind of path modifications do you mean?

Regards,
Simon
the Telerik team

[Kevin Warnke]

Let's say you have AppRoot/MyDesign/Css/External1.css that contains the following:

.MyClass
{
    background-image: url(myimage.jpg);
}

Let's also assume that myimage.jpg is located in the AppRoot/MyDesign/Css folder.

Using the CSS above by including the CSS file will work fine because the myimage.jpg path is relative to where the CSS came from.

Using the RadStyleSheetManager to combine CSS, though, will break this since the CSS is served from AppRoot.  To fix this one would have to change the style def to:

.MyClass
{
    background-image: url(/AppRoot/MyDesign/Css/myimage.jpg);
}

This works and all, but the Manager knows where the CSS files are located and could do this automatically when combining the CSS together so that we could still use relative paths in our CSS even when combining with a manager, etc.

Thanks,
Kevin

[Simon]

Hello Kevin Warnke,

Thank you for the clarification.

We are aware of this problem will consider fixing it in future versions of the control. (Currently the existence of this limitation is only mentioned it in our documentation.)

Unfortunately the Q3 2011 release is coming close and we may not have enough time to test the code properly, so probably we will do that for the Service Pack.

Greetings,
Simon
the Telerik team

[eric]

It would be beneficial to have the StyleSheetManager resolve URLs in the standard way ASP.net does it and have it look for relative paths in the CSS and resolve them upon combining:

body
{
    background: #FFFEEF url(~/img/background.jpg) scroll top center;
    font-family: 'Droid Sans';
    font-size:13px;
}


It would also be awesome if it removed comments and minifed the CSS as well :)

[Simon]

Hello eric,

Thank you for the suggestions.

We will consider implementing the first one for the Q1 2012 SP release. As for dynamic CSS minification we will consider it for future versions of RadStyleSheetManager.

I updated your Telerik points.

All the best,
Simon
the Telerik team