Tagged: Modernizr

Snippet – What to Do About Old Browsers

image_thumb_7F533839Web sites reflect the company’s professional image. If your site renders improperly or not at all, your company’s reputation can be tarnished. If your site has browser display problems, visitors and potential customers will leave your site and not look back.

In the post Using Modernizr, Polyfills, YepNope, you learned how you can support browsers that might not have the capabilities that you need. But at some point you may not be able to support really old browsers. At that point, you may just want to recommend the user update. Even for enterprise apps, you will want to remind users to use a current browser rather than have your app fail because your app is expecting something that does not exist.>p>You can use the following code to help your users get up to date browsers. Continue reading

Advertisements

HTML5 Tutorial – Drag and Drop

imageDrag and drop is a part of the HTML5 standard. Drag-and-drop functionality is something that computer users have come to take for granted as “just working,” and there are a few ways to enable it within the browser.

Imagine a computer or smartphone with a pointing device. — a drag operation could be like a mousedown event that is followed by a series of mousemover events, and the drop could be triggered by the mouse being released.

Continue reading

HTML5 Tutorial – Video, Audio Multimedia

imageHTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element.

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the video element, but you may need multiple files to support the video formats.

For this demo, I’m using a video that is in the public domain, Popeye for President.

Continue reading

HTML5 Tutorial – Local Storage

w3c_homeOne of the new features that you may want to use in your line of business application is local storage. We can store data locally or use cookies.

localstorage provides a way to persist data on the client side without using cookies. The localStorage attribute provides persistent storage areas for domains. It allows Web applications to store nearly 10 MB of user data, such as entire documents or a user’s mailbox, on the client for performance reasons.

Continue reading

HTML5 Tutorial – HTML Forms Tags

HTML5_Badge_256

One of the cool features of HTML5 is the support offered in forms. You’ve probably worked with HTML form tag, which is how you collect customer responses and add interactivity to your website. HTML forms interact with scripts to collect data, record information, or simply involve your readers with your web page.

You’ve used input types like text, password, file, hidden, checkbox, radio, submit and button.

But with only those input types, you had to write you own controls for things like a data picker. Your date picker has been a combination of JavaScript and HTML for the user to select a date and insert it into a text.

Continue reading

Using Modernizr, Polyfills, YepNope

image_thumb_7F533839Modernizr is a small JavaScript library that you can use for feature detection, browser compatibility using polyfills, and quick JavaScript loading. I’ll take each one in turn.

It detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications. Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.

Once you do the feature detection for your browser, you can then do polyfill.

Continue reading

HTML5, CSS3 Tip – Boilerplates

html5-boilerplateAs you have seen in our introductory posts on HTML5, you will want to start with some sort of boilerplate. Boilerplates help you remember all of the items you need to be successful.

HTML5Boilerplate helps you start your project with a lean, mobile-friendly HTML template; optimized Google Analytics snippet; placeholder touch-device icon; and docs covering dozens of extra tips and tricks.

Continue reading