Forums
View unanswered posts | View active topics It is currently Mon Sep 01, 2014 7:50 am



Reply to topic  [ 8 posts ] 
 Tip: CSS3Pie and ASP.NET Relative Linking 
Author Message

Joined: Sun Aug 08, 2010 10:58 pm
Posts: 4
Post Tip: CSS3Pie and ASP.NET Relative Linking
First off I’d like to say that I’m loving CSS3 Pie and am currently finding ways to incorporate it into a lot of projects… it’s an excellent contribution to the community and is leaps and bounds beyond the other solutions out there.

The only major issue I've had with it is a limitation in IE dealing with loading HTC files being relative to the page being viewed as opposed to being relative to the CSS file. Using a static absolute URL within your domain works just fine, but that also can can issues when using URLs that could change, such as moving from a dev server to a production server, etc, as the extra time is needed to go into your CSS and change your URLs... hence the code is no longer an exact match to the build on your dev server if that's a feature you need.

I ended up deciding that header redirection from something like mod.rewrite would be the best solution, as you could include a string in your URL that would always trigger a 301 redirect... mod rewrite for Apache or the Rewrite module for IIS could handle this, but since I try to look at solutions that are within my framework code and don't require outside configuration, I came up with a solution that is easy to implement for anyone using ASP.NET.

(Please, no spam or flames for using Microsoft tech, I used to be a php-only guy, but I've moved over to the MS platform recently as I've had a few clients demand it and I'm pretty happy with the results... not to mention you can do quite a hell of a bit with their free tool offering ala Web Express)

For starters, in any of your linked CSS Stylesheets, you'd use the following:
Code:
.thisstyle
{
    -pie-background: linear-gradient(#ff0000, #0000ff);
    behavior: url("CSS3PIE.aspx"); /* .aspx extension forces IIS to handoff to the ASP.NET Processor */
}


Then, you need to add an entry to your Global.asax file:
Code:
        protected void Application_BeginRequest(Object sender, EventArgs e)
        {
            string inboundURL = (Request.Url.Scheme + "://" + HttpContext.Current.Request.Url.Authority + HttpContext.Current.Request.Url.AbsolutePath);

            // Add Response Redirection for requests to the PIE htc behavior for CSS3 Support in IE below 9
            if (Regex.IsMatch(inboundURL, "CSS3PIE"))
            {
                Response.Clear();
                Response.Status = "301 Moved Permanently";
                // The path entered here should be the App-relative path to the PIE HTC Behavior.
                // We've forced it to all lowercase because I'm also forcing all lowercase urls in my application
                // via 301 redirects so if you do the same it won't cause multiple redirects
                string appRelativePath = "~/Content/PIE.htc";
                string path = VirtualPathUtility.ToAbsolute(appRelativePath.ToLower());
                Response.AddHeader("Location", path);
                Response.End();
            }
        }



Things to Note:

Many web servers running IIS check for the existence of a URL and return a 404 response automatically without handing off processing to the ASP.NET engine. To test if your server is configured this way, you can add the code to your Global.asax file, compile and deploy, and then visit http://yourdomain/yourapp/randomurl/CSS3PIE
If it returns a 404 error, then IIS is checking for file existence ahead of time. This won’t be an issue on any servers already configured for ASP.NET MVC. If you get the 404 error from IIS, then you can add an empty CSS3PIE.aspx file to any directories which house aspx pages viewable that require this behavior.


Hopefully this help out other CSS3PIE users running ASP.NET!


Sun Aug 08, 2010 11:13 pm
Profile

Joined: Sun Aug 08, 2010 10:58 pm
Posts: 4
Post Re: Tip: CSS3Pie and ASP.NET Relative Linking
Here's the same code for those who prefer VB.NET to C#...

Code:
Protected Sub Application_BeginRequest(sender As [Object], e As EventArgs)
   Dim inboundURL As String = (Request.Url.Scheme + "://" + HttpContext.Current.Request.Url.Authority + HttpContext.Current.Request.Url.AbsolutePath)

   ' Add Response Redirection for requests to the PIE htc behavior for CSS3 Support in IE below 9
   If Regex.IsMatch(inboundURL, "CSS3PIE") Then
      Response.Clear()
      Response.Status = "301 Moved Permanently"
      ' The path entered here should be the App-relative path to the PIE HTC Behavior.
      ' We've forced it to all lowercase because I'm also forcing all lowercase urls in my application
      ' via 301 redirects so if you do the same it won't cause multiple redirects
      Dim appRelativePath As String = "~/Content/PIE.htc"
      Dim path As String = VirtualPathUtility.ToAbsolute(appRelativePath.ToLower())
      Response.AddHeader("Location", path)
      Response.[End]()
   End If
End Sub


Sun Aug 08, 2010 11:17 pm
Profile

Joined: Tue Aug 10, 2010 2:40 am
Posts: 4
Post Re: Tip: CSS3Pie and ASP.NET Relative Linking
Thanks a million man. You saved my day!!


Tue Aug 10, 2010 7:20 am
Profile

Joined: Sat Aug 14, 2010 6:46 am
Posts: 1
Post Re: Tip: CSS3Pie and ASP.NET Relative Linking
Great post, helped a lot. Thank you!


Sat Aug 14, 2010 6:48 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Tip: CSS3Pie and ASP.NET Relative Linking
Great tip! Thanks for posting it.

I'm not fluent in ASP.NET, so could you answer a question for me please... in your example, your code shows:
Code:
behavior: url("CSS3PIE.aspx");

Would that also work if it were:
Code:
behavior: url("/CSS3PIE.aspx");

(notice the leading slash, to make it relative to the domain root)

If this would work, then as a best practice you should do it this way. The reason is cacheability. Without the leading slash it would always be requested at the same directory level as the current HTML page, so as you stepped through the site you'd potentially be requesting CSS3PIE.aspx at different URLs, so the browser won't use its cached copy between levels. If, however, you use the leading slash then it's always requested from the same exact URL so the cached copy is used.


Sat Aug 14, 2010 2:50 pm
Profile

Joined: Sun Aug 08, 2010 10:58 pm
Posts: 4
Post Re: Tip: CSS3Pie and ASP.NET Relative Linking
Actually, that's why we're using the 301 redirect... a leading slash makes the path relative to the domain root, not the application root, so if you're hosting in a virtual directory you'd need to always reference that virtual directory... but if you have a scenario where you're sometimes in a virtual directory and sometimes in a root directory, as is sometimes the case when dealing with production versus development servers, you'd have to change your reference.

Quote:
The only major issue I've had with it is a limitation in IE dealing with loading HTC files being relative to the page being viewed as opposed to being relative to the CSS file. Using a static absolute URL within your domain works just fine, but that also can can issues when using URLs that could change, such as moving from a dev server to a production server, etc, as the extra time is needed to go into your CSS and change your URLs... hence the code is no longer an exact match to the build on your dev server if that's a feature you need.


I've tested this in multiple browsers and it while an additional request is generated when making the initial file request if you've gone from one directory to another, it does allow for caching once the browser recognizes the url it's being redirected to... that's why I'm using the header redirect as opposed to sending the file through the request stream.


Sun Aug 15, 2010 1:38 pm
Profile

Joined: Sun Aug 08, 2010 10:58 pm
Posts: 4
Post Re: Tip: CSS3Pie and ASP.NET Relative Linking
That said, if you're in a scenario where you do not have to concern yourself with changing directories and CAN use an absolute static url at all times, then that is still the best way to go... it just doesn't fit everyone's needs.


Sun Aug 15, 2010 1:40 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Tip: CSS3Pie and ASP.NET Relative Linking
Cool, thanks for clarifying!


Sun Aug 15, 2010 8:28 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 8 posts ] 

Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.