Dev Source Code: HTML 5

Showing posts with label HTML 5. Show all posts

Saturday, January 21, 2012

HTML5 - Details

The aim of the element is to provide native support for a feature common on the Web—a collapsible box that has a title, and more info or functionality hidden away.

The HTML5 details element can be used to expand the relevant addional information and hide the content when needed. <details> element is accompanied with optional <summary> element. <details> is the wrapper for all the content we want to show and hide, and <summary> contains the summary and title of the section.

Currently, this feature only available on Chrome.

<details>

<summary>My Summary</summary>

<UL>
<LI>Content 1</LI>
<LI>Content 2</LI>
<LI>Content 3</LI>
</UL>

</details>

Saturday, January 14, 2012

HTML5 Feature Support Detection

None of the browsers currently fully supports HTML5. HTML5 browser support timeline for any given browser is also not clear. So, it is vital for HTML5 developers to know whether a specific HTML5 feature is supported on a given client’s browser or not.

Modernizr is a JavaScript library that can be leveraged by developers to detect whether a given HTML5 feature is supported on the client’s browser or not. So, Modernizr can be very useful in developing HTML5 applications.

These are few ways HTML5 developers can use Modernizr in their HTML5 development efforts.

1. Modernizr.[HTML5 feature name] returns true or false for a given HTML5 feature and developers can write program logics accordingly.

<!doctype html>

<html>

<head>

<title>Modernizr Basics</title>

Modernizr.load({
test: Modernizr.geolocation,
yep : 'Script1.js',
nope: 'Script2.js'
});

test: The Modernizr property you want to detect.
yep: The location of the script you want to load if the test succeeds. Use an array for multiple scripts.
nope: The location of the script you want to load if the test fails. Use an array for multiple scripts.
3. Modernizr.[HTML5 feature name]? can be used to implement fallback behavior if the browser does not support given HTML5 feature.
var audio = new Audio();
audio.src = Modernizr.audio.ogg ? 'background.ogg' :
Modernizr.audio.mp3 ? 'background.mp3' :
'background.m4a';
audio.play();

Saturday, December 3, 2011

HTML 5 async attribute

Async attribute can be used to load an external file and allows developers to load the file asynchronously. So, this means async attribute load the script in the background as soon as script is available without causing other page elements to delay while it loads.

<script async src="Script.js" onload="Init()"></script>

async attribute would benefit the user experience if the script is loaded as soon as possible, rather than after the page loads. So, this attribute will speed up the web by loading script asynchronously.

Tuesday, September 6, 2011

HTML 5 Input Type - Number

HTML 5 Number Input type control allows user to increase or decrease the value of the textbox by clicking on up or down arrow buttons. As of today, only Chrome 13 and Safari 5 support this feature.

<!DOCTYPE html>
<html>
<head>     
    <title>Testing HTML 5 Number Input Type</title>
</head>
<body>
   <form>
        <label for="date">
            Please enter date:
            <input type="number" name="date" id="date"
                min="1" max="31" step="1" value="15">              
        </label>
    </form>
</body>
</html

Tuesday, August 30, 2011

HTML 5 support in Visual Studio 2010

HTML 5 support in Visual Studio 2010 was something development community was asking for a long time. Web Standards Update for Microsoft Visual Studio 2010 SP1 adds support to Visual Studio and the editor for HTML5 and CSS3 and provides intellisense and validation according to W3C specification.
http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83

Dev Source Code

Pages

Search This Blog