StyleSheets

HTML5 – Introduction to HTML5Shiv for Internet Explorer 6/7/8

January 3, 2013 All, Back-2-Bascis, Codes, CodeSnippets, Community, CSS, CSS 3, HTML, HTML5, JavaScript, KnowledgeBase, MSDN, StyleSheets, Web 2 comments

HTML5Shiv is a JavaScript workaround, discovered by Sjoerd Visscher, to enable support styling of HTML5 elements in versions of Internet Explorer prior to version 9.0, which do not allow unknown elements to be styled without JavaScript. Means your CSS classes and attributes will not be applied to the particular HTML5 specific display element, until and unless the object is available in the DOM tree.

What HTML5Shiv does is that it creates the objects for all known HTML5 elements(of the Page) in the DOM tree?. This gives the browser an implication that the particular element is supported and available in the DOM tree and it applies the specific CSS classes to the element.

Follow these simple steps to integrate HTML5Shiv to your existing page:

Step 1: Get HTML5Shiv binary – You can get HTML5Shiv binary(html5shiv.js) from  http://code.google.com/p/html5shiv/

Step 2: Insert the necessary code block in the <head> element of your html page (after or before your CSS)

code block:

<blockquote><p>&lt;!--[if lt IE 9]&gt;<br />&lt;script src=&quot;scripts/html5shiv.js&quot;&gt;&lt;/script&gt;<br />&lt;![endif]—&gt;</p></blockquote>

NB: Assuming that html5shiv.js is kept under the scripts folder under the root folder of your web application.

Lets look for a simple example:

Look at the below html sample, with an article element:

Copy the below code block  in to notepad and save as ‘test.html’ – to a location wherever you like 🙂

<!DOCTYPE HTML>
<html>
<head>
     <style>
          article {
               font-size: 22px;
               color: orange;
          }
     </style>
</head>
<body>
     <article>Hello!</article>
</body>
</html>

Try to Browse the sample in Internet Explorer 7.0(by double clicking on ‘test.html’ file) and you can see that font color and font size are not applied and as a default fallback – it is displaying text in a normal font and color. It is because browser will not apply the CSS to an unknown element, HTML5 elements are aliens 🙂 for IE 8.0 and below.

[Before – HTML5 Shiv is applied]

HTML5Code_before

Now try to apply the HTML5Shiv code block on to the above sample and see the magic. Modified code block will look like below:

&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;!--[if lt IE 9]&gt;<br />&lt;script src=&quot;scripts/html5shiv.js&quot;&gt;&lt;/script&gt;<br />&lt;![endif]--&gt;
     &lt;style&gt;
          article {
               font-size: 22px;
               color: orange;
          }
     &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
     &lt;article&gt;Hello!&lt;/article&gt;
&lt;/body&gt;
&lt;/html&gt;

[After – HTML5 Shiv is applied]

HTML5Code_after

Very nice! right?. Yes, it is indeed helpful for enabling backward support of your HTML5 elements styling on IE 6,7,8 versions.

DOWNLOAD and USE

You can get HTML5Shiv binary from here: http://code.google.com/p/html5shiv/

and Full original, uncompressed source available here: https://github.com/aFarkas/html5shiv

Hope you enjoy this nice tip.

Courtesy: Wikipedia and Google Code

HTML5 Definition Complete, W3C Moves to Interoperability Testing and Performance

December 19, 2012 All, ANDROID, Community, CSS, CSS 3, HTML, HTML5, IE, IE10, Internet Explorer 10, iOS, iPhone, JavaScript, JQuery Mobile, KnowledgeBase, Mobile Frameworks, mobile web, Mobile-Development, MSDN, StyleSheets, Web No comments

The World Wide Web Consortium (W3C) has published —  the complete definition of the HTML5 and Canvas 2D specifications on 17 December 2012.

Quoting from the announcement here

  • Though not yet W3C standards, these specifications are now feature complete, meaning businesses and developers have a stable target for implementation and planning.

  • HTML5 is the cornerstone of the Open Web Platform, a full programming environment for cross-platform applications with access to device capabilities; video and animations; graphics; style, typography, and other tools for digital publishing; extensive network capabilities; and more.

W3C also announced today the first draft of HTML 5.1 and Canvas 2D, Level 2, an early view of the next round of standardization.

To reduce browser fragmentation and extend implementations to the full range of tools that consume and produce HTML, W3C now embarks on the stage of W3C standardization devoted to interoperability and testing (called "Candidate Recommendation"). Expecting the broad HTML5 Interoperability in 2014.

During this stage, the W3C HTML Working Group will conduct a variety of activities to ensure that the specifications may be implemented compatibly across browsers, authoring tools, email clients, servers, content management systems, and other Web tools.

  • The group will analyze current HTML5 implementations, establish priorities for test development, and work with the community to develop those tests.

  • The HTML Working Group has planned for this implementation phase to last into mid-2014, after which W3C expects to publish the final HTML5 Recommendation, available Royalty-Free to implementers under the W3C Patent Policy.

Sencha(Leading cross platform mobile framework product developer) – has published a blog on HTML5 readiness here

Quoting from Sencha’s report

Feature Standardization Status:

A long list of major HTML5 technologies has now reached advanced stages of standardization.

Here is a list of just some of the big technologies in advanced standardization status with the date of the most recent standard:

Candidate Recommendation:

  • CSS Multi-column (2011)
  • CSS Flexbox (2012)
  • CSS Values & Units 3 (2012)
  • CSS Backgrounds and Borders 3 (2012)
  • CSS Images & Replaced Content 3 (2012)
  • CSS Style Attributes (2010)
  • Web Storage (2011)
  • Web Sockets (2012)
  • Web Workers (2012)
  • Web Messaging (2012)
  • Touch Events

Proposed Recommendation

  • Geolocation (2012)

Full Recommendation

  • CSS Media Queries (2012)
  • CSS Selectors 3 (2011)
  • CSS Namespaces (2011)
  • CSS Color 3 (2011)
  • Media Fragments (2012)
  • SVG 1.1 (2nd Ed) (2011)

HTML5 Feature Implementation Progress in Browsers

The very good news is that HTML5 and CSS3 implementations across all major browsers on desktop and mobile have become increasingly convergent. The chart below shows the progress of HTML5 feature implementation across major desktop and mobile browsers in the last three years using the HTML5test.com scoring methodology.

Adoption on Desktop Browsers

HTML5 Support on Dektop Browser

Adoption on Mobile Browsers

HTML5 Support on Mobile Browser

HTML5 features have been rapidly adopted by all major browsers – with Internet Explorer’s progress on both mobile and desktop being particularly impressive. The feature implementation ramp from IE8 in 2010 to IE9 in 2011 to IE10 this year has been very steep.

Information Sources:

http://www.sencha.com/blog/html5-progress-report

http://www.html5test.com

http://www.w3.org/2012/12/html5-cr

Great News! for all Mobile and Web Developers

Free HTML5 Certification and Training Offer from Microsoft–Prove your HTML5 Programming Skills for free

December 1, 2012 All, Certification, Community, CSS, CSS 3, DevLabs, Help Links, HTML, HTML5, JavaScript, jQuery, KnowledgeBase, Microsoft, Microsoft Learning, MSDN, StyleSheets, VisualStudio, VS2012, Web, Web 2.0, Windows, Windows 8, Windows 8 apps development, Windows Store Development, WinJS 8 comments

Microsoft few month back launched a free HTML5 Certification program for exam – 070-480 – Programming in HTML5, CSS3 and JavaScript. To prepare for this exam you have set of nice Training materials also available through http://www.microsoftvirtualacademy.com. Lets go through in detail How you can utilize this exam.

When you pass Exam 70-480: Programming in HTML5 with JavaScript and CSS3, you complete the requirements for the following certification(s):

  • Programming in HTML5 with JavaScript and CSS3 Specialist

Also Exam 70-480: Programming in HTML5 with JavaScript and CSS3: counts as credit toward the following certification(s):

  • MCSD: Web Applications
  • MCSD: Windows Store Apps using HTML5

FREE TRAINING RESOURCES FOR 70-480!  & HOW TO PREPARE FOR THIS EXAM

  1. Attend the training session https://www.microsoftvirtualacademy.com/tracks/developing-html5-apps-jump-start
  2. Complete the training session. Now you will have enough knowledge to write the exam. But remember to practice what you have learnt.
  3. Additionally Prepare for your certification exams and boost your dev skills with:
    Kraig Brockschmidt’s FREE e-book: "Programming Windows 8 Apps with HTML, CSS, and JavaScript" .
  4. You can download the eBook in PDF format here: http://go.microsoft.com/FWLink/?Linkid=270056 (17.9 MB)

    EPUB format is here: http://go.microsoft.com/FWLink/?Linkid=272592 (37.3 MB)

    MOBI format is here: http://go.microsoft.com/FWLink/?Linkid=272591 (69.5 MB)

    Download the Updated Companion Content Set for the Book  (source code samples) (59MB)

FREE EXAM VOUCHER FOR 70-480!

  • Register now to take Exam 70-480 Programming in HTML5 with JavaScript and CSS3 for FREE!
  • Just use this voucher code when scheduling your exam: HTMLJMP (voucher code available through 3/31/2013 or while supplies last.)

HOW TO TAKE THE EXAM

  • Go to www.register.prometric.com and follow the steps to schedule Exam 70-480: Programming in HTML5 with JavaScript and CSS3 at a testing center near you.
  • Use the voucher code HTMLJMP to get the free exam.

That’s it you are an HTML5 Programmer or a beginner and you want to prove your HTML5 development skills – then this is the right time. You will have the time till 03/31/2013 and till stocks last. Happy Programming.. Remember sharing is caring, so share with your friends.Smile

Courtesy: Microsoft Learning & Microsoft Virtual Academy

CSSCop for Visual Studio – FxCop for StyleSheet

January 3, 2012 .NET, .NET Framework, All, CSS, Microsoft, StyleSheets No comments

CSSCop makes it easy to adhere to best practices for writing stylesheets. It catches common errors that affect browser compatibility and much more. You can think of it as FxCop for stylesheets.

CSSCop for Visual Studio tries to help us write better CSS, by making sure we remember all the right vendor specific properties or that you cannot set the margin on inline HTML elements etc.

CSSCop is developed by Mads Kristensen - Program Manager at the Microsoft Web Platform Team and founder of BlogEngine.NET.

Get CSSCop for Visual Studio