chapter 4 feature detection drag and drop n.
Skip this Video
Loading SlideShow in 5 Seconds..
Chapter 4: Feature Detection & Drag and Drop PowerPoint Presentation
Download Presentation
Chapter 4: Feature Detection & Drag and Drop

Loading in 2 Seconds...

play fullscreen
1 / 11

Chapter 4: Feature Detection & Drag and Drop - PowerPoint PPT Presentation

  • Uploaded on

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.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Chapter 4: Feature Detection & Drag and Drop' - manasa

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
what is feature detection
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


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 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
What Modernizr Detects

CSS Animations

CSS Gradients

CSS Transforms

Drag & Drop


Web GL


Local and Session Storage


Web Fonts

Flexi Box Model

HTML5 History

Web Sockets

Web Workers

HTML5 Input Types

Application Cache

HTML5 Video Series

how do we implement modernizr
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">


<meta charset="utf-8">

<title>HTML 5 and CSS3 Test Page</title>

<script src="modernizr-2.0.6.min.js"></script>


HTML5 Video Series

testing for object properties
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
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
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
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",;}

HTML5 Video Series

drag and drop syntax 2
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


Now the drop event

function drop(ev){ev.preventDefault();vardata=ev.dataTransfer.getData("Text");;}

HTML5 Video Series

lets dive in
Lets Dive In!

Start Coding!

HTML5 Video Series