ASP.NET Archives - Hyperdrive Designs

OK. Let’s take a look at the IE changes over time. When we wanted to target IE browsers in order to use IE specific styles, we would normally create a CSS specific file(normally titled: ie.css) with the IE specific CSS styles. We would then use conditional commenting as such:

<!--- code for using different IE stylesheets --->
 
 <!--[if IE 8]>
       <link rel="stylesheet" type="text/css" href="http://test.com/css/ie8.css" />
 < ![endif]-->
 <!--[if IE 9]>
    	<link rel="stylesheet" type="text/css" href="http://test.com/css/ie.css" />
 < ![endif]-->

Then if the browser was IE, it would load the specific IE css file with the IE specific styles.

Then came the changes. IE 10 drops conditional commenting. Then IE 11 decides to change their User Agent. So now what?

In order to target IE and render the IE specific CSS styles we had to do a work around. So this is a quick example of how to accomplish this task in today’s modern IE browsers.

1. Create a small piece of JavaScript which I place in my header files which grabs the user agent of the browser.

<script type="text/javascript">
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);    
</script>

2. Then in my CSS style sheet, (you can create an IE only css file or just place the IE specific styles in your main css file) I create my specific styles for each of my IE Browsers. So as of today, I normally target back to IE 8. This is now my code looks like in my CSS style sheet. Unfortunately, these styles get loaded for every browser but the styles are only used for their specific IE versions. Normally, I usually do not have a lot of specific IE styles just a small amount so the little bit of extra payload is not that big of deal having to be loaded in every browser.

/* ==========================================================================
   IE STYLES
   ========================================================================== */
/************* IE 11 STYLES *****************/
html[data-useragent*='rv:11.0']  .socialmediaicons {
    width: 480px;
}

/************* IE 10 STYLES *****************/
html[data-useragent*='MSIE 10.0']  .socialmediaicons {
    width: 480px;
}

/************* IE 9 STYLES *****************/     
html[data-useragent*='MSIE 9.0']  .socialmediaicons {
    width: 480px;
}

/************* IE 8 STYLES *****************/
html[data-useragent*='MSIE 8.0']  .socialmediaicons {
    width: 480px;
    margin-right: 35px;
    margin-top: -50px !important;
}

Now the next big question is, what will the NEW Microsoft Edge browser have in store for us. No worries about the later versions of IE as they will still be around for some time in support of legacy software. So using the above solution will still be in play for a while.

Please feel to leave comments and let me know what you think or if you run into any issues.

OK. This article ASP.NET 4.0 Website Fix for IE 11 will show you how to fix your websites that break in IE 11. This is for anyone that has discovered the new IE 11 User Agent String issue. This is for all web sites, applications. projects that are targeted at the ASP.NET 4.0 framework. The main issue is the new IE 11 User Agent and the bug in the 4.0 framework. I will describe what the issues is and then show the fix. It is easier than upgrading your web server and all of your ASP.NET applications up to the 4.5 framework. The 4.5 framework has the user agent string bug fixed. So here is the details:

First there is a bug in the ASP.NET 4.0 framework when it reads the User Agent Strings. Here is the article talking about this issue from Scott Hanselman:

http://www.hanselman.com/blog/IE10AndIE11AndWindows81AndDoPostBack.aspx.

The bug causes the Post Back functions to not work. So when trying to view our ASP.NET 4.0 website in IE 11 our site would not work. All of our Post Back functionality was gone. So I tried using the Microsoft magic line of code to fix this issue by forcing IE to emulate IE10.

Microsoft Magic Line of Code: <meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE10″/>

Well this did not work. It forced IE11 to display site in IE10 mode but it kept the User Agent String as Default which would break the site. I then opened up IE 11 Developer Tools and then switched the User Agent String to IE 10 and BOOM, Goes the Dynamite! It worked. The site Post Back functionality is working. So I knew something was wrong. It would force IE to go to whatever IE version I chose, but it kept the User Agent String at Default, thus breaking the website. Image 1 shows dev tools and the website in IE 10 with User Agent String as default breaking the website.

image 2 show dev tools and the website in IE 10 and me manually changing the User String Agent to IE 10 and the website works.

So after many hours of research, I found out that Microsoft changed the IE 11 User Agent String. This caused IE 11 to stay at Default for User Agent String because it has been confused by the change. It is what I found out about the new IE 11 User Agent String: This is from the Microsoft website:

Here is the user agent string from IE 11 on a Windows 8.1 machine: Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko

IE 11 on Windows 7 machine: Mozilla/5.0 (Windows NT 6.1; Trident/7.0; rv:11.0) like Gecko

Older IE 10 Use Agent String Version: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)

IE 9 User Agent String Version:

See in the past, to identify Internet Explorer just search for the string “MSIE” in the user-agent string. If present, the browser is Internet Explorer. Now that is gone in IE 11. Also they added ‘Mozilla’ and ‘like Gecko’ in IE 11 User Agent String. This sounds like a Firefox browser.

Here is the link from Microsoft about the IE 11 changes:

http://msdn.microsoft.com/en-us/library/ie/hh869301(v=vs.85).aspx

OK. Anyway enough about the issue. How the heck do we fix this. One fix that I read was to upgrade from the ASP.NET 4.0 framework to the 4.5 framework. I figured out an easier way around this. OK, we need to create an ASP.NET folder named, App_Browsers. This ASP.NET folder is the one most unknown. Here is a link to read more about the App_Browsers folder:

http://www.shubho.net/2011/01/what-is-appbrowsers-folder-in-aspnet.html

Now we just add a file with the extension .browser in this folder. Place this code in the file and save. Restart your IIS server and it works.

<browsers>
  <browser id="IE11" parentID="Mozilla">
    <identification>
      <useragent match="Trident\/7.0; rv:(?'version'(?'major'\d+)(\.(?'minor'\d+)?)(?'letters'\w*))(?'extra'[^)]*)"></useragent>
      <useragent nonMatch="IEMobile"></useragent>
    </identification>
    <capture>
      <useragent match="Trident/(?'layoutVersion'\d+)"></useragent>
    </capture>
    <capabilities>
      <capability name="browser"              value="IE"></capability>
      <capability name="layoutEngine"         value="Trident"></capability>
      <capability name="layoutEngineVersion"  value="${layoutVersion}"></capability>
      <capability name="extra"                value="${extra}"></capability>
      <capability name="isColor"              value="true"></capability>
      <capability name="letters"              value="${letters}"></capability>
      <capability name="majorversion"         value="${major}"></capability>
      <capability name="minorversion"         value="${minor}"></capability>
      <capability name="screenBitDepth"       value="8"></capability>
      <capability name="type"                 value="IE${major}"></capability>
      <capability name="version"              value="${version}"></capability>
    </capabilities>
  </browser>
 
  <!-- Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11,0) like Gecko -->
  <browser id="IE110" parentID="IE11">
    <identification>
      <capability name="majorversion" match="11"></capability>
    </identification>
 
    <capabilities>
      <capability name="ecmascriptversion"    value="3.0"></capability>
      <capability name="jscriptversion"       value="5.6"></capability>
      <capability name="javascript"           value="true"></capability>
      <capability name="javascriptversion"    value="1.5"></capability>
      <capability name="msdomversion"         value="${majorversion}.${minorversion}"></capability>
      <capability name="w3cdomversion"        value="1.0"></capability>
      <capability name="ExchangeOmaSupported" value="true"></capability>
      <capability name="activexcontrols"      value="true"></capability>
      <capability name="backgroundsounds"     value="true"></capability>
      <capability name="cookies"              value="true"></capability>
      <capability name="frames"               value="true"></capability>
      <capability name="javaapplets"          value="true"></capability>
      <capability name="supportsCallback"     value="true"></capability>
      <capability name="supportsFileUpload"   value="true"></capability>
      <capability name="supportsMultilineTextBoxDisplay" value="true"></capability>
      <capability name="supportsMaintainScrollPositionOnPostback" value="true"></capability>
      <capability name="supportsVCard"        value="true"></capability>
      <capability name="supportsXmlHttp"      value="true"></capability>
      <capability name="tables"               value="true"></capability>
      <capability name="supportsAccessKeyAttribute"    value="true"></capability>
      <capability name="tagwriter"            value="System.Web.UI.HtmlTextWriter"></capability>
      <capability name="vbscript"             value="true"></capability>
    </capabilities>
  </browser>
</browsers>

Here is the link where I found this nice piece of code: http://stackoverflow.com/questions/18244223/webform-dopostbackwithoptions-is-undefined-in-ie11-preview/19585664#19585664

Category: ASP.NET

How to target IE / IE Specific CSS styles

ASP.NET 4.0 Website Fix for IE 11