I'm currently using HTML conditional statements to select a CSS file based on IE version. How do I do this on the server side instead.
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="style/ie6.css" media="screen" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style/ie7.css" media="screen" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="style/ie8.css" media="screen" />
<![endif]-->
Determine the browser type from the HTTP request:
System.Web.HttpBrowserCapabilities browser = Request.Browser
Then render the page accordingly:
<% if (browser.Browser == "IE" && browser.MajorVersion == 6) { %>
<link rel="stylesheet" type="text/css" href="style/ie6.css" media="screen" />
<% } else if (browser.Browser == "IE" && browser.MajorVersion == 7) { %>
<link rel="stylesheet" type="text/css" href="style/ie7.css" media="screen" />
<% } else if (browser.Browser == "IE" && browser.MajorVersion == 8) { %>
<link rel="stylesheet" type="text/css" href="style/ie8.css" media="screen" />
<% } %>
I believe you have to set the runat="server" attribute within the <head> element of the page for this to work.
This isn't a very good way of doing it though. A better way would be to do it client-side using either JavaScript or the method used in the question.
What's your directory structure?
What ASP.NET Framework are you using, Webforms, MVC?
The only thing that come up to my mind is the CSS Path that you are using, in MVC for example, the default behavior you should write /Content/Css/ie6.css for example.
A good idea is always use the backslash sign / that will point to the website root and append the folder in the path from there.
Every thing else works well in ASP.NET, just remember that the only difference is that a plain HTML page does not need any server to run, so it picks everything where you open the file in your browser, an a PHP / ASP.NET need a Server to run into, so you need to respect the Server Paths.
By the way, I would recommend Html5 boilerplate if you are starting a new website...
I think you should stick with your current solution but if you need to do it server side you could always check the user agent and then register the stylesheet.
Something like this;
Dim userAgent As String = Request.UserAgent
If (userAgent.IndexOf("MSIE 6.0") > -1) Then
HtmlLink css = new HtmlLink();
css.Href = "css/ie6.css";
css.Attributes["rel"] = "stylesheet";
css.Attributes["type"] = "text/css";
css.Attributes["media"] = "all";
Page.Header.Controls.Add(css);
End If
Read more about the HttpRequest.UserAgent Property
Try this:
<link runat="server" rel="stylesheet" type="text/css"
ie:href="style/ie6.css" ie7:href="style/ie7.css" ie8:href="style/ie8.css"
ie9:href="style/ie8.css" ie0plus:"style/ie8.css"
media="screen" />
The property modifiers like "ie:" match the furthest element down the browser tree they can, so "ie" alone will match all IE browsers, but if it's IE7, then "ie7" will match instead. I don't think there's a browser pattern for IE6, which is why you need the keys for ie9 and ie10plus; since they are further down the tree, they will match instead of just "ie".
The .NET browser pattern files are located in:
C:\Windows\Microsoft.NET\Framework64\v4.0.30319\Config\Browsers
You can also add your own pattern files if you want (don't edit the existing ones). After adding one, run:
aspnet_regbrowsers -i
Note re. accepted answer (adding code to <head>):
This will cause an error if <head> is set as runat="server" and you (or any other code) attempts to alter the HEAD's .Controls collection.
The AJAX Control Toolkit does this in some situations.
not sure how to do it using aspx, but there are many ways to do it using JavaScript.
Related
While having this code:
<link rel="stylesheet" type="text/css" href="externalsite.com/style.css" />
EPi-Server removes this above code when saving.
When having this code:
<![CDATA[
<link rel="stylesheet" type="text/css" href="externalsite.com/style.css" />
//]]>
it seems to work.
Is this a "correct" way of doing this (to use CDATA) ?
UPDATE
It didn't actually work. It was left in code, but the css is not applied ):
UPDATE2
In case someone stumples on this issue. use jQuery and add css to head-element (within a document ready).
$('head').append('<link rel="stylesheet" href="http://externalsite.com/style.css" type="text/css" />');
No, CDATA sections are used to exempt data from being parsed as HTML, so you would just be turning the code to visible content.
I am trying to call a different style sheet in the head section of my page depending on if the browser used is IE. It's "greyed" out but from what I understand, it's still supposed to work this way. The two style sheets are identical except for one line. But, it's not linking to mainIE.css and not replacing main.css. Am I doing something wrong?
<link href="examples/main.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="examples/mainIE.css" rel="stylesheet" type="text/css" />
<![endif]-->
First, the conditional comments aren't supported in IE 10 and up. That may be why you are not seeing the other stylesheet load.
Second, the conditional comment won't instruct IE to replace your first stylesheet, just to load up another one. Typically in the second stylesheet you would just put in only the differences and let the C in CSS take care of it for you.
Try the following:
<!--[if !IE]><!--><link href="examples/main.css" rel="stylesheet" type="text/css" /><!--<![endif]-->
<!--[if IE]><link href="examples/mainIE.css" rel="stylesheet" type="text/css" /><![endif]-->
Also I knew you can do the same thing within one CSS file, if only one line is the difference.
as noted, conditional comments don't work in ie10+; you need to use conditional compilation to target them...with that said, i'm not sure how to differentiate between ie10, 11 and mobile exactly, but i bet you can simply check your jscript version. here's a demo of conditional compilation
http://dev.bowdenweb.com/ua/browsers/ie/conditional-compilation.html
The second ('commented') stylesheet for IE will NOT replace your existing stylesheet. It's added in as a comment so all other browsers ignore it, and IE tries to find comments with this [if] statement in it to display that content. Your IE stylesheet can simply overwrite that single line that's different instead of the whole stylesheet (DRY!), saving the IE user a duplicate download.
The latest versions of IE do not support them anymore (http://www.sitepoint.com/microsoft-drop-ie10-conditional-comments/), otherwise you can find more info here: http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx
[EDIT: here is a Javascript solution]
You could always do it with javascript if you went to target only IE users. You could do something like the following:
var useragent = navigator.userAgent.toLowerCase();
var internetExplorer = (
useragent.indexOf("trident") >= 0
|| useragent.indexOf("ms") >= 0
|| useragent.indexOf("ie") >= 0
) ? true : false;
if(internetExplorer){
// do whatever you want here, like...
document.getElementById("myElement").style.height = "100px";
}
[EDIT2:] Actually, you could just write the stylesheet if its IE:
if(internetExplorer){
document.write('<link href="examples/main.css" rel="stylesheet" type="text/css" />');
}
In ASP.NET MVC4 application, style bundle is created using
bundles.Add(new StyleBundle("~/css/pos.css")
.Include("~/css/mypos.css"));
and rendered in view as
#Styles.Render("~/css/pos.css")
Generated output in debug mode is
<link href="/myapp/css/mypos.css" rel="stylesheet"/>
How to add media attribute to output so that style is used for screen
<link href="/myapp/css/mypos.css" media="screen" rel="stylesheet"/>
or for print
<link href="/myapp/css/mypos.css" media="print" rel="stylesheet"/>
Or is there better way to to this, can media specified in css file or other solution ?
jquery and jquery-ui are used.
Within your Razor page you would add the following:
<link href="#Styles.Url("~/css/pos.css")" rel="stylesheet" type="text/css" media="print" />
Late to the party, but nonetheless: There is a method
Styles.RenderFormat(string tagFormat, params string[] paths)
This is used internally by the normal Styles.Render call. For the format, you can simply use
"<link href=\"{0}\" rel=\"stylesheet\" media=\"print\" />"
or whichever other attributes you wish to add.
I have a master page to apply to all my pages, the master page is doing its work however, it seems that is unable to resolve the CSS file address for pages I have in child folders.
I have a set of folders like this:
RootContent
UsersContent
AdminContent
Since the master page and css files are on the Root content, when the master page tries to locate the css file inside UsersContent or AdminContent it cannot find it.
I'm using JavaScript to detect the browser and set the css properly for most browsers and another file for IE6 since is required in here, any ideas?.
<script type="text/javascript">
if((BrowserDetect.browser.toString() == "Firefox") && (BrowserDetect.version.toString() == "3.5"))
{
document.write('<link rel="Stylesheet" href="<%=ResolveUrl("~/StyleSheet.css") %>" type="text/css" />');
}
else if((BrowserDetect.browser.toString() == "Explorer") && (BrowserDetect.version.toString() == "6"))
{
document.write('<link rel="Stylesheet" href="~/StylesheetIE6.css" type="text/css" />');
}
</script>
In the code above I tried <% ResolveUrl("~/StyleSheet.css") %> but didn't work, it works while in the same folder but not on the childs.
EDIT: Just to clarify my CSS file is on my Root Folder not on the childs
A simplest way Add App_Themes folder under your web project. Add a theme and under that theme add all css files include their respective image directories.
In your web.config, add
It will automatically get added to the every page.
Note:- In this case all css will get applied. If you have browser specific css, then this is not the way.
[SEE UPDATED]
a CSS file like "iespecific.css" to be loaded by IE 6 and not other browsers, use the following code in the HEAD section of your web page:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
Likewise, for any version of IE 5 (including 5.0, 5.01, 5.5, etc), use the following:
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
to detect the release build of IE 5.5, you will need the following code:
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
For example, to test for all versions of IE greater than or equal to version 6, you can use
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
The above code examples work because a normal browser sees the entire block as HTML comments since they are enclosed within "". IE 5 or above will however attempt to parse the block to see if it has instructions specific to it.
You can also exclude a certain style sheet using this method. For example, to exclude the CSS file "not-ie.css" from IE 6, use:
<![if !(IE 6)]>
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]>
Notice the operator "!" immediately preceding "IE". This is the NOT operator, causing the statements following to be used only if the expression "IE 6" is not matched by the browser.
Again, the above code works because a normal browser will interpret "" and "<[endif]>" as HTML tags that it does not recognise, and ignore them. This code, however, will not validate as correct in a HTML validator, since it does not use valid HTML tags.
Note that you can also test for IE without specifying a version number. For example, the following loads the style sheet only if the browser is not IE 5 or above:
<![if !IE]>
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]>
Microsoft's documentation for this non-standard feature can be found at http://msdn2.microsoft.com/en-us/library/ms537512.aspx
Since the documentation does not specify that these features apply only to the Windows versions of IE, I assume that they also apply to the Macintosh version. I'm not able to verify this though.
I have always used ResolveClientUrl for this purpose. Can you try that instead of ResolveUrl? And here's a post discussing the difference.
Have you tried adding runat="server" to the link tag? Worked for me.
Every time I put an inline tag on the link's href attribute it somehow gets auto-encoded. Is this ASP.NET's default behavior? How can I dynamically set the Href attribute using code? This is in MVC btw.
Attempted something like this
<link href="<%: Link.Content.Jquery_css %>" rel="stylesheet" type="text/css" />
which rendered this (nothing changed)
<link href="<%: Link.Content.Jquery_css %>" rel="stylesheet" type="text/css" />
and this
<link href="<%= Link.Content.Jquery_css %> rel="stylesheet" type="text/css" />
which produced this (I couldn't remember the exact numbers, but it seems the bracket-percent-equals was encoded to link format)
<link href="/View/Shared%25Link.Content.Jquery_css%25" %>" rel="stylesheet" type="text/css" />
Link.Content.Jquery_css is a strongly typed string containing the link made using T4MVC.
Add'l info: I used ASP.NET MVC 2, in .NET 4 and testing in Firefox.
I got the same issue in the master page. (It doesn't happen in an individual page.) I found removing "runat=server" from the head tag fixed the problem.
It's getting auto-encoded because of the tag your using (<%: %>). If you don't want the URL to be Encoded, use the following:
<link href="<%= Link.Content.Jquery_css %>" rel="stylesheet" type="text/css" />
Change the ":" to "=" and that remove the auto encoding
Your view is unable to access Link.Content.Jquery_css property. ASP.NET unhelpfully doesn't throw any error.
Move that line inside the body of the page and you will see compilation error.
You could do this:
<head>
<style type="text/css">
#import "<%= ResolveUrl("~/content/styles.css") %>";
#import "<%= ResolveUrl("~/content/print.css") %>" print;
</style>
</head>