Search results for 'app:weblogs' matching tags 'Modernizr' and 'HTML5'

HTML5 TechDays material

Maurice — Fri, 17 Feb 2012 06:00:00 GMT

Several people asked about getting the slides and samples from my HTML5 talk at the TechDays conference in the Netherlands. You can download the slides and the sample if you like.

Enjoy!

TheProblemSolver
DotNetEvents

HTML5 Presentatie slides en demo

Maurice — Fri, 06 Jan 2012 06:00:00 GMT

De PowerPoint slides en de demo code van mijn HTML5 presentatie van gisteravond zijn nu beschikbaar.

Voor de liefhebbers ook online via SlideShare.

HTML5 Overview

View more presentations from Maurice Beijer

Met dank aan 4DotNet die de sponsor was van deze bijeenkomst.

Enjoy!

TheProblemSolver
DotNetEvents

HTML5, Google Chrome Frame and older browsers

Maurice — Thu, 08 Dec 2011 06:00:00 GMT

Consider the following problem:

You might be tempted to start working with HTML5 features in your web applications but you have to support older bowsers.

So for many HTML5 features there are polyfills available that will let you make older browsers like Internet Explorer 7 or 8 work with the newer API. See a possible list of HTML5 polyfills here. However a number of these is JavaScript based and while that works in older browsers their JavaScript engine is often quite slow as well making it hard to work with.

But how about just upgrading the complete browser?

Seems to make far more sense right? Except upgrading from IE8 to IE9 isn’t possible in all cases. One big showstopper can be people still running Windows XP because IE9 requires Windows VISTA as a minimum.

So we can upgrade to another browsers like FireFox or Chrome which has far better HTML5 support. While that technically works it causes headaches as it means people must switch browsers. And worse you might also have to support some site that only works well in IE forcing the users to switch between multiple browsers. Not a problem for techies, I do it all the time, but not much fun for the average end user.

So it turns out there is a great solution out there called Google Chrome Frame.

Users can install Google Chrome Frame in their machine and by default it does nothing noticeable. Only when a specific HTML meta tag X-UA-Compatible is added to the head section does the plugin start working. And then it intercepts the response and starts rendering it using Google Chrome Frame instead. However this is done inside the Internet Explorer window so the user has no clue he or she has just switched to Google Chrome Frame. And just like magic all the cool new HTML5 features supported in Chrome will work in what appears to be IE.

<meta http-equiv="X-UA-Compatible" content="chrome=1">

A simple example

When I try to new up a WebSocket object in IE9 I get the following error.

And with a simple addition of the HTML header the sample starts working. Notice that as far as the end user is concerned he is still using IE9, no changes there whatsoever.

Pretty cool right

And the good thing is that by default Google Chrome Frame is self updating just like Google Chrome so you know that once installed the plugin will always be up to date.

Detecting Google Chrome Frame

If you want to detect if Chrome Frame is installed ahead of time you can look at the User-Agent header the browser sends to the server. If installed and active Chrome Frame will add chromeframe/X.X.X.X where the X.X.X.X is the version number to the User-Agent string.

So why just add it to a single page?

Enabling Chrome Frame for al pages in a website is easy, just add the following to your web.config

<configuration>

  <system.webServer>

     <httpProtocol>

        <customHeaders>

           <add name="X-UA-Compatible" value="chrome=1" />

        </customHeaders>

     </httpProtocol>

  </system.webServer>

</configuration>

You can read the Google Chrome Frame FAQ with lots of extra bits of information here.

Enjoy!

www.TheProblemSolver.nl
www.dotnetevents.nl

Customizing the HTML5 checks Modernizr does

Maurice — Wed, 09 Nov 2011 06:00:00 GMT

In the previous blog post I demonstrated how to use Modernizr to test for the availability of HTML 5 features. Doing so was quite easy but as every test is always performed to add CSS classes to the <html> element there is a bit of overhead in using the default Modernizr JavaScript file. Fortunately they have made a fix for this rather easy and added a page where you can quickly create a custom version with just the checks you need for your site.

Adding custom checks

The careful reader might have noticed that there is no option for Server-Sent Events I used in the previous blog post. And worse if you take the standard Modernizr JavaScript and use that the test I was using, either the JavaScript or the CSS styles

if (Modernizr.eventsource) {

    // Good to go

}

else {

    // Oops

}

doesn’t work and the JavaScript actually causes an error. The reason the code worked for me is another nice Modernizr capability of adding custom checks. In the Razor master page I added the following custom check using Modernizr.addTest().

<script src="@Url.Content("~/Scripts/modernizr-2.0.6-development-only.js")" type="text/javascript"></script>   1:  

<script>

    Modernizr.addTest('eventsource', function () { return !!window.EventSource; });
</script>

Adding a test this way automatically adds both the test itself and the extra CSS classes to the <html> element.

Adding custom scripts

Another nice capability of Modernizr, actually implemented using yepNope.js, is the capability to conditionally load extra scripts. A great way to load HTML 5 polyfills for missing pieces in specific browsers.

An example, taken from the Modernizr, loading a geo location polyfill for those browser that don’t support geo location out of the box.

Modernizr.load({

  test: Modernizr.geolocation,

  yep : 'geo.js',

  nope: 'geo-polyfill.js'

});

Modernizr is a must have in your HTML 5 arsenal.

Enjoy!

www.TheProblemSolver.nl
www.dotnetevents.nl

HTML5 feature detection aka Modernizr

Maurice — Tue, 08 Nov 2011 06:00:00 GMT

Yesterday I blogged about using the new Server-Sent Events or the EventSource object to send messages from the server to the client. But what happens if I try to do this in a browser that doesn’t support Server-Sent Events?

If I run the code from yesterday in Internet Explorer 9 I sill see the following error dialog:

The reason is that IE 9 doesn’t support Server-Sent Events, see CanIUse.com, so it results in an Microsoft JScript runtime error: 'EventSource' is undefined exception

HTML5 Feature detection

In the old days if web development we used to check the browser the client was using and make decisions based on the bowser type and version. These days that is no linger a recommended approach as browsers are updated frequently and keeping up to date base on browser versions would be a nightmare.

A better approach, and much more common these days.. is feature detection. Feature detection basically checks if a specific feature is available in a given browser. And because that uses tests based on the official API it is much easier to maintain and more reliable as it doesn’t depend on specific browsers.

In the case of the Server-Sent Events we can check for the existence of the EventSource object using the following test:

if (window.EventSource) {

    // Good to go

}

else {

    // Oops

}

This would work just fine but it means we have to create checks and make sure these work in every browser.

Modernizr to the rescue

Fortunately we don’t have to do so ourselves but we can use the excellent Modernizr JavaScript library. Modernizr contains checks for almost all HTML 5 you might want to test for and will make sure the tests are checked against all relevant browsers. And to make live easy for the ASP.NET MVC developers the team decided to add Modernizr to the standard HTML5 project template so you get it automatically. If you don’t have it yet it is easy to add to an existing project through the NuGet package.

The developers solution

Developer write code for their day to day business so as a developer when I have a problem I am going to write some code to solve this problem. By adding Modernizr to the mix and adding a simple check we can use the following code and get the result below.

if (Modernizr.eventsource) {

    var source = new EventSource('home/events');

  

    source.onmessage = function (e) {

        $('<li>').text(e.data).appendTo('#messages');

    };

  

    source.addEventListener('ping', function (e) {

        $('<li>').text(e.data).appendTo('#messages');

        console.log(e.data);

    }, false);

}

else {

    $("<li>This browser doesn't support Server-Sent Events</li>").css('color', 'red').appendTo('#messages');

}

Not bad but we can do even better

Besides the Modernizr object where we can check of features the library actually adds or removes CSS classes to the root <html> we can use to style element. When a feature exists it adds a class with the same name as the feature, eventsource in this case, if it doesn’t it add as class no-eventsource instead. Using this we can actually start showing or hiding elements using just CSS and no JavaScript code.

Suppose I use the following HTML:

<style>

    html.eventsource .warning

    {

        visibility: hidden;

    }

    html.no-eventsource .warning

    {

        background-color: Red;

    }

    html.no-eventsource #messages

    {

        visibility: hidden;

    }

</style>

<div class='warning'>

    This browser doesn't support Server-Sent Events</div>

<ol id='messages'>

</ol>

We get the following result:

You can even test for JavaScript being enabled this way. If it is Modernizr will remove a no-js class in the <html> element and add a js class. Of course if JavaScript is disabled Modernizr can’t add a css class to you must add the no-js class yourself.

The general recommendation for JavaScript is to add it at the bottom of the page, after all content but these CSS classes are the reason you should make an exception for Modernizr and always add that to the <head> of your page.

When doing HTML 5 work you just have to live Modernizr

Enjoy!