Html5, Tutorial, Web

Html5 Tutorial – Lesson 8

html5-tutorials

Welcome to the another lesson of our Html5 course.In this lesson we will discus about the feature detection.We will try to cover all the component of feature detection clearly here so that you can understand it easily.

Html5 Tutorial – Lesson 1                                               Html5 Tutorial – Lesson 6

Html5 Tutorial – Lesson 2                                               Html5 Tutorial – Lesson 7

Html5 Tutorial – Lesson 3

Html5 Tutorial – Lesson 4

Html5 Tutorial – Lesson 5

 

Html5 Tutorial – Lesson 8

3:Feature Detection

3.1:An Introduction to Feature Detection

Now that we’ve learned some of handful new Html5 tags and input type.Now we’re going to begin learning about some of the more difficult JavaScript API. However before we can do that we first need to learn a bit about feature detection and subsequently Modernizr.So let’s get into it.You have learned about feature detection in the previous lessons.But let’s go over it again.Let’s say we won’t use one of the new input attribute.So we’ll say input=text and we’re going to apply a placeholder in maybe this is somebody’s name and will say John Doe.Now the older browsers nothing to happen the page is not going to break these simple a will not display anything at all.

html5-tutorial-72

That may be an issue, you may want to provide a JavaScript fall back in those older browsers.So we can perform feature detection tool of physics.I will show you how.With a script tag performing attribute detection is really quite easy.
html5-tutorial-73So if you would instead like to provide a fullback,you can say if not and then in this case you can implement polyfill.Now polyfill what is that exactly mean,very simple don’t let that word confuse you.It’s simply a way to ensure that regardless of whether they user’s browser that supports these new Html5 tags or input or API they still get same experience.
html5-tutorial-74

In that’s the polyfill will do.It will detect support so that if you are in a modern browser you get used these fun new features.However if you’re not a fallback javascript solution will be provided for those older browser.It’s a way to make everyone happy.It should javascript shim.Now continuing on what you’ll find is detection will be different depending upon what you’re looking for support for your location or an input attribute.

Next I want to detect support for something like the email inpute type.We can do,once again we will create an elemen to work with.Next we will attempt to set it’s type
html5-tutorial-75We are going to tell the browser to attach an email type for this input.One or Two things will happen to that,the browser who either understand or it’ii have no idea what an emal type is.This case all browser if it doesn’t the type it falls back to a regular text box.So with that in mind we can now say (return i.type==’email’;).Now for return we wanna place this to a function and we will say test support something like that.

Now we can run if ( testSuport{}) and if we want to make more dynamic we simply replace the email into type.If text support,we will gonna look for email support.We created an input then we are going to attach an email type into that input we created.Then we are going to return either true or false.
html5-tutorial-76

And we detecting if the type of this input we created still email the browser will recognise it and there is no problem,If it doesn’t support,it will return false.Once again I can say if that’s not support provide fallback.
html5-tutorial-77Let’s take a look of the few other, may be we are working with canvas and you want to detect support for that.we can say if( document.create elemen{“canvas”}).This time we create a new canvas tag.Now we are determine wether get Context is available.So this not going to return a specific value.And now if that’s true
will support it
html5-tutorial-78 Next what will happen with a audio or video tag.Same thing the only different is we are going to create an audio and test for canPlayType.
html5-tutorial-79 Now if we want to test for video support we can do that like so.
html5-tutorial-80Next let’s say we are testing new html5 logo storage.Don’t worry if we are not familiar with this you are gonna learn all about this in future lesson.But for now to detect them we could say ( localStorage) and this will work in some browser. So instead we will frun it through a try block and we will say
html5-tutorial-81Now within our try block we will return lik so
html5-tutorial-82
So now if an error is thrown the catch box will run and we return false and then support storage will equally false.And lastly atone more because I don’t want to overflow you too much with this feature detection when you have learned about location,storage or canvas.So for a last one we are going to detect GO location which allows the browser to truck your.We can do that by saying so
html5-tutorial-83Make sure that we are testing for a true or false value.And that’s is so easy.

3.2:Modernizr

 

html5-tutorial-84Modenerizer is a JavaScript library that detect support for all of the new Html5 and CSS3 features.So you wouldn’t be remiss to assume that modernized actually upgrade this older browser to provide support but that’s not what it does.It performs detection so that you can respond accordingly.So let’s jump into and see how we can use it.If we click on the download button for production you will want to create your own version of modernized using their built tool. And that way the file size will be much smaller and you’re not performing tests on features or API is that you won’t be the using.
html5-tutorial-85However for development purposes I recomend to use this version right here.
html5-tutorial-86

So let’s go ahead and bring that in.
html5-tutorial-87 Now you want to place this within the head of your document and you want to do that for couple of reason.You might have red or you might be in a habit of placing these at the bottom because that way the page will appear to load faster.That’s a smart idea and good in many cases. However for Modernizr you don’t want to do that for a couple of reasons.

First modernizer implements the Html5 shim that we learned about in a previous lesson.So don’t in both of those because it’s already in modernize and secondly the way Modernizr works is it applies classes to the HTML tag based upon what the browser supports.So for example if the browser supports local storage it will apply a class of local storage.If it’s an older version of IE the class will then be no – local storage.So you can imagine if you want to use box shadow if you place the script the bottom of the page using these classes in your style sheets that are loaded at the top of the page there could be what we call a flicker or a flash of content stick with best practice in place this within the head document and after your style sheets.

Next we’re going to remove this class right here and we’re going to apply a class a no-js and this is fairly common even outside of modernization.In the way this works is in browsers where javascript is disabled this class will always be there and you can you use that in your style sheets accordingly maybe said something display none if it requires js.
html5-tutorial-88

Now Modernizr what it will do is replace trans JavaScript is enabled and modernizr is executing it, will take this class and replace it with Js and then it will run it feature detection to make sure you at that on.Now of course we have blank Page if view the source you’re not going to see anything but we want to see is the generated tree.So I am gonna open up chrome developer tools and check it out we had this new section right here in this is all done because of modernized.
html5-tutorial-89

First it updates no js and then it applies a huge handful of classes again or dynamically generated based upon what the browser does or does not support.So here we can see it’s browser support CSS 3d transforms it supports wet workers this is a very advanced Prosser.I believe this is chrome 16.However watch what happens if we view this in Firefox 8.Here we are in now you can see firefox doesn’t support as much as chrome and general.
html5-tutorial-90

Here we can see transformers 3d because this browser does not support it.So that is the format it takes.When it supported it gives you the name and when it does not supported it will have a class of no-then the name.So we can use this now within our style sheets accordingly.Let’s say you want to work with the box model with CSS it’s pretty need.However it doesn’t have a huge amount of support yet.

So what we can do here is within the style we can say flexbox I want you to know if I’m getting this class based upon right here.So if you forget the name just open up Chrome developer tools and see what they called it.So in browsers that support flexible box model you can use that or which you may find yourself doing more is looking for browser which don’t support the flexible box model.Then you can fall back to a float layout whatever you’re working with.Now I want you to remember this is the class of the html.

So you wouldn’t do it like this you might do .no- flexbox .container and then you would apply the necessary floats or something like that. But Modernizr,it gives you those hooks to latch onto.Now what if you’re working with JavaScript well it’s going to be the same thing we can access modernizr by the global modernize object.So if I want to detect support for local storage we can see right here it does supported.
html5-tutorial-91

html5-tutorial-92 So now we can run if{ modernizer.localStorage} and now this official way with the capital S.However modernizer want that to be lowercase.So if{modernizer. local storage} have fun or you can say is not then pride a fall back or a poly fill and we will cover that in the next lesson.

Now we come back to the Modernizr website and we take a look at the documentation.I want you to take a look at a couple of things we can see here which browsers are supported which feature detection are run you can see if we’re testing for border-radius noticed that the convention is it becomes lower case.So border- radius would be tested with modernizr.borderradius with no dash.
html5-tutorial-93If we take a look at this example right here we can see that in browse that don’t support box shadow we’re going to apply a border just add a little bit of dash.However it do support box shadow we’re going to remove the border and instead use new CSS 3 box shadow to provide that.And this is a nice way to use Modernizr.

Now the last thing in this lesson I want you to take note of is what’s going on underneath the hood in this important to take a look for your own sanity.So remember how in the previous lesson we learned that if we want to test for geolocation support we can say if(!! navigator.geolocation).Let’s see what Modernizr does,if we scroll back and view the source I’m going to search for geo location and you can see right here here is the test.
html5-tutorial-94

A new function to the test called geolocation and take a look it does the same thing as it returns navigator.geolocations and that’s because it’s one of the easiest one to detect.But what you would find is for other test you have to do some different things so for example here we testing for web sequel database support and that’s who needs to be run through a try Statement.
html5-tutorial-95So that’s what’s nice about this Modernizr runs all of these featured a test for you so that you don’t have to worry about it you can focus on your web application and less on browser works.So now we have learned about how to detect support,how to work with it in our CSS and how to work with it in our javascript.In this case rather than navigator touch your location we would do Modernizr touch your location.So now we’ve learned some browser will not support your locations while we would provide fallback or polyfill how would we do that.

Next lesson we’ll discuss about Poliyfills and Modernizr load.

You Might Also Like

Leave a Reply