This week you are going to create multiple background images on the same div. Yo
ID: 3539203 • Letter: T
Question
This week you are going to create multiple background images on the same div. You will also add a drop shadow. Your end result should be: Inside of this zip file, you will find everything you need to get started. There is a file called recycleStart.html inside of this zip file. You should not make any changes to the HTML, only additions to the CSS! Your div should include a drop shadow, and you should have 5 background images on the same div. The positioning should be close to what you see above.You must use CSS3 to accomplish this. The design should look the same in both Firefox & Chrome in order to receive full credit.
Explanation / Answer
Modernizr is a small JavaScript library that 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.
Unlike with the traditional%u2014but highly unreliable%u2014method of doing %u201CUAsniffing,%u201D which is detecting a browser by its (user-configurable) navigator.userAgent property, Modernizr does actual feature detection to reliably discern what the various browsers can and cannot do. After all, the same rendering engine may not necessarily support the same things, and some users change their userAgent string to get around poorly developed websites that don%u2019t let them through otherwise.
Modernizr aims to bring an end to the UA sniffing practice. Using feature detection is a more reliable mechanic to establish what you can and cannot do in the current browser, and Modernizr makes it convenient for you in a variety of ways:
With this knowledge that Modernizr gives you, you can take advantage of these new features in the browsers that can render or utilize them, and still have easy and reliable means of controlling the situation for the browsers that cannot.
Head over to the Download page, and select which features you intend to use in your project. This way we can provide the slimmest bits of code that you%u2019ll need. Hit Generate and you%u2019ve got your own custom build of Modernizr. If you don%u2019t know yet what features you%u2019ll be using, get the Development version which contains them all, but is uncompressed.
Drop the script tags in the <head> of your HTML. For best performance, you should have them follow after your stylesheet references. The reason we recommend placing Modernizr in the head is two-fold: the HTML5 Shiv (that enables HTML5 elements in IE) must execute before the <body>, and if you%u2019re using any of the CSS classes that Modernizr adds, you%u2019ll want to prevent a FOUC.
If you don't support IE8 and don't need to worry about FOUC, feel free to include modernizr.js whereever.
The name %u201CModernizr%u201D might throw you for a second, we%u2019ll admit. The library does allow you to use the new HTML5 sectioning elements in IE, but aside from that, it doesn%u2019t modernize any other features. The name Modernizr actually stems from the goal of modernizing our development practices (and ourselves). However! Modernizr still pairs extremely well with scripts that do provide support when native browser support is lacking. In general, these scripts are called polyfills.
So a websocket polyfill would create a window.WebSocket global with the same properties and methods on it as a native implementation. That means you can develop for the future, with the real API, and only load your compatibility polyfills on browsers that do not support that API or feature.
And good news for you, there is a polyfill for nearly every HTML5 feature that Modernizr detects. Yup. So in most cases, you can use a HTML5 or CSS3 feature and be able to replicate it in non-supporting browsers. Yes, not only can you use HTML5 today, but you can use it in the past, too!
But that leads to a big, fat warning: just because you can use a polyfill doesn%u2019t mean you should. You want to deliver the best user experience possible, which means it should be quick! Loading five compatibility scripts for IE7 so it looks and works the exact same as Chrome and Opera isn't a wise choice. There are no hard and fast rules, but keep in mind how adding more scripts to the page can impact the user experience. And remember, none of your users view your site in more than one browser; It%u2019s okay if it looks and acts differently.
Now for more on how to effectively use and serve polyfills for all your different users, read on%u2026
Modernizr.load is a resource loader (CSS and JavaScript) that was made to specifically to work side-by-side with Modernizr. It%u2019s optional in your build, but if you are loading polyfills, There%u2019s a good chance it can save you some bandwidth and boost performance a bit.
Modernizr.load syntax is generally very easy to understand, so we%u2019ll start with a basic example:
In this example, we decided that we should load a different script depending on whether geolocation is supported in the host browser or not. By doing this, you save users from having to download code that their browser does not need. This increases page performance, and offers a clear place to build a healthy amount of abstraction to yourpolyfills (both 'geo.js' and 'geo-polyfill.js' would seem the same to the rest of the app, even if they're implemented differently).
There%u2019s a good chance that you%u2019re not terribly unhappy with your script downloading speeds now, but you%u2019ll be happy to know that Modernizr.load does not slow anything down, and can sometimes offer a small boost in performance by loading scripts asynchronously and in parallel. There%u2019s a lot of variables to weigh in this area, so we suggest that you try a few things to make sure you%u2019re getting maximum performance for your specific situation.
Modernizr.load is small and simple, but it can do quite a bit of heavy-lifting for you. Here is a slightly more complicated example of using Modernizr.load when your scripts rely on more than one Modernizr feature-test. A good technique is to wrap up multiple polyfill scripts into a single 'oldbrowser' type script, that way you don%u2019t end up loading too many scripts at once. Here's how that might work:
There%u2019s a lot that you can do with Modernizr.load. It was released standalone as yepnope.js but it was made specifically with Modernizr and feature-testing in mind. You can check out the full docs for Modernizr.load atyepnopejs.com.
One cool feature of Modernizr.load is it%u2019s complete decoupling of load and execution of scripts. That might not mean much to you, but users of the HTML5 Boilerplate might be familiar with the Google CDN copy of jQuery fallback. It looks something like this:
It works by trying to load in the script, and then immediately after, testing to see if the jQuery object is available. If It%u2019s not, then they load a local copy of jQuery as a fallback. This is generally not that easy in script-loaders, but Modernizr.load has got you covered. You can just use the same logic, and Modernizr.load will handle the execution order for you:
A quick note, though: only use this technique as a method for fallbacks, because it can hurt performance by forcing scripts to load in serial instead of in parallel.
Modernizr.load is extensible as well. You can load your own prefixes and filters for your scripts. For more advanced information on that, you can check out the docs on the yepnopejs.com homepage. You can even go as far as to replace entire steps of the loading process and replace them with custom logic. So start using it and saving those precious, precious bytes.
For a lot of the tests, Modernizr does its %u201Cmagic%u201D by creating an element, setting a specific style instruction on that element and then immediately retrieving it. Browsers that understand the instruction will return something sensible; browsers that don%u2019t understand it will return nothing or %u201Cundefined%u201D.
Many tests in the documentation come with a small code sample to illustrate how you could use that specific test in your web development workflow. Actual use cases come in many more varieties, though. The possible uses of Modernizr are limited only by your imagination.
If you%u2019re really interested in the details of how Modernizr works, look at the source code of modernizr.js and the various feature detects, and dig into the project on GitHub.
Modernizr runs through a little loop in JavaScript to enable the various elements from HTML5 (as well as abbr) for styling in Internet Explorer. Note that this does not mean it suddenly makes IE support the Audio or Video element, it just means that you can use section instead of div and style them in CSS. you%u2019ll also probably want to set many of these elements to display:block; see the HTML5 Boilerplate CSS for an example. As of Modernizr 1.5, this script is identical to what is used in the popular html5shim/html5shiv library. Both also enable printability of HTML5 elements in IE6-8, though you might want to try out the performance hit if you have over 100kb of css.
We support IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome. On mobile, we support iOS's mobile Safari, Android's WebKit browser, Opera Mobile, Firefox Mobile and whilst we%u2019re still doing more testing we believe we support Blackberry 6+.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.