Chapter 4: Feature Detection & Drag and Drop

HTML5 Video Series Chapter 4: Feature Detection & Drag and Drop

What Is Feature Detection? Finding specific properties or methods in a browser's DOM to detect the browser type and whether it supports a given operation HTML5 Video Series It is NOT Browser detection Developers use to use “UA Sniffing” to detect the user’s browser using the navigator.userAgent property. This would detect the actual browser but was unreliable. This is now obsolete and not recommended

Modernizr At the moment, the best way to detect HTML5 and CSS3 features are by using 3rd party Javascript libraries such as Modernizr. Modernizr does not try to detect the browser but it detects certain features. You can download Modernizr at http://modernizr.com/download/ and actually pick and choose what features you want to search for and it will generate a Javascript file to include in your HTML5 website. Once implemented you would use simple programming such as the lines below if (document.querySelector) { element = document.querySelector(selectors); } HTML5 Video Series

What Modernizr Detects CSS Animations CSS Gradients CSS Transforms Drag & Drop SVG Web GL Geolocation Local and Session Storage Canvas Web Fonts Flexi Box Model HTML5 History Web Sockets Web Workers HTML5 Input Types Application Cache HTML5 Video Series

How Do We Implement Modernizr? All you need to do is download the file, include it in your <head> section and add class=“no-js” to your <html> tag <!DOCTYPE html> <html class="no-js"> <head> <meta charset="utf-8"> <title>HTML 5 and CSS3 Test Page</title> <script src="modernizr-2.0.6.min.js"></script> </head> HTML5 Video Series

Testing For Object & Properties Modernizr creates properties for all of the features that it tests for. You can refer to these properties to check whether the browser supports the object and its properties. Here is an example that checks to see if canvas is supported… if (Modernizr.canvas) { // Yes, canvas is supported } else { // No, canvas is not supported } HTML5 Video Series

Updated CSS For CSS3 able browsers, we can use new gradient properties such as linear-gradient. With Modernizr, we can use the no-js and no-cssgradients rule to tell a browser that does not support CSS3 gradients, to use a specified background image instead of just ignoring it.. .no-js .glossy, .no-cssgradients .glossy { background: url("glossybutton.png"); } .cssgradients .glossy { background-image: linear-gradient(top, #555, #333); } HTML5 Video Series

Drag and Drop Feature HTML5 and Javascript allow us to "grab" an object and drag it to a different location. In HTML5, drag and drop is part of the standard, and any element can be draggable. IE 9, Firefox, Opera 12, Chrome, and Safari 5 support drag and drop. HTML5 Video Series

Drag And Drop Syntax We need to set the “draggable” attribute to “true” <img draggable="true"> We specify what we want to drag with ondragstart and the setData() function function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id);} HTML5 Video Series

Drag And Drop Syntax 2 • By default, data/elements cannot be dropped in other elements. To allow a drop, we need to prevent the default handling of the element. • We do this with the event.preventDefault() function event.preventDefault() Now the drop event function drop(ev){ev.preventDefault();vardata=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));} HTML5 Video Series

Lets Dive In! Start Coding! HTML5 Video Series

Chapter 4: Feature Detection & Drag and Drop