Learning Modernizr

By Adam Watson

Adam Watson, "Learning Modernizr"
English | ISBN: 1782160221 | 2012 | writer: Packt Publishing | EPUB | 118 pages | three + 2 MB

Create forward-compatible web content utilizing function detection beneficial properties of Modernizr

Overview
Build a revolutionary event utilizing an enormous array of detected CSS3 features
Replace photographs with CSS dependent counterparts.
Learn some great benefits of detecting good points rather than checking the identify and model of the browser and serving accordingly.

In Detail

Modern net browsers help an entire diversity of recent HTML5 and CSS3 gains that make internet improvement enjoyable. yet aiding previous browsers could make an online developer's existence tricky. With HTML5 Modernizr, you could payment for gains and bring a layout round them that's not simply backward, but in addition ahead compatible.

"Learning Modernizr" will consultant you step-by-step during the strategy of changing to a function wealthy CSS3 adventure utilizing the Modernizr function detection JavaScript library. With this e-book, you could take an image-based layout and progressively convert it to be 100% CSS established utilizing Modernizr to discover function support.

You also will the best way to enforce the majority of today’s top CSS3 positive aspects no longer restricted to animations, textual content shadow, content material new release, and extra. additionally, you will discover ways to swap the web page utilizing media queries to figure out the scale of the web page and change the content material for that reason in addition to HTML5 beneficial properties comparable to localstorage so that you can retailer content material to the browser.

You will examine every thing you must comprehend to be able to layout steadily utilizing function detection. organize your layout not to simply deal with legacy browsers, but in addition for the HTML5 normal positive factors you recognize should be extra into next types of the browser.

What you'll examine from this book
Perform function detection with the Modernizr JavaScript library.
Use HTML periods to change the glance of the web page according to gains found.
Check for beneficial properties utilizing JavaScript
Explore how characteristic detection differs from person Agent Detection.
The distinction among blocking off as opposed to nonblocking scripts .
Create numerous backgrounds utilizing a number of backgrounds and gradients.
Draw and animate CSS3 clouds that actually rain features.
Automatically generate seller prefixes.
Use CSS to attract and animate an collection of shapes and shadows.

Approach

Written in an interesting, easy-to-follow type, "Learning Modernizr" is a realistic advisor for utilizing the function detection beneficial properties of HTML5 Modernizr to create ahead suitable websites.

Show description

Quick preview of Learning Modernizr PDF

Show sample text content

DropSet = rainDrops. slice( commence , end); for ( i=0; i< dropSet. size; i++ ){ drops += '

'+ rainDrops[start + i] +'

'; } //Move the pointer up within the array for the following set. commence = finish; finish = finish + slice; $('. rain-drops . drops-wrapper', '#frame-5'). html(drops); } window. setInterval( function(){ dripFaucet(); }, 2000); The JavaScript loops in the course of the kept Modernizr exams, if a try handed, it's kept in an array.

Best - navBarHeight;$( 'html,body' ). animate( { scrollTop: quantity }, 'slow' ); // Cancel the default browser habit by way of returning fake. // to be able to disable the hash within the deal with bar from showing. go back fake; }); } )( jQuery ); I additionally got rid of the former bits that have been used to envision the connectedness of our prior JavaScripts on account that we do not desire them anymore now that we all know every thing is attached properly. The script in all fairness trouble-free and makes use of jQuery to do the heavy lifting.

Js', whole: function(){ console. log('respond. js has been loaded'); } }); Now that we have got a media question performance effectively polyfilled, let's utilize it. As i discussed sooner than, i will borrow a web page from the instance to be had at the reply JS try web page yet with a bit of a twist. during this subsequent step, i will be including the next CSS, pasted from the instance at the reply JS web site, after which tailored to our instance code we've got already been utilizing. within the reply JS try out case, the heritage colour of the web page alterations colour as varied media queries are met.

Cssgradients. rgba #frame-5 h1{ -webkit-box-reflect: lower than -0. 35em -webkit-gradient(linear, left best, left backside, from(transparent), color-stop(80%, transparent), to(rgba(255,255,255,0. 3))); } The impact of the field shadow estate might be noticeable within the following screenshot: changing the clouds to CSS The CSS clouds we're at present utilizing really all started their existence as simply CSS-based. I want i may take the credits for those yet they have been really created on certainly one of my favourite web content at codepen.

RemoveClass('additionalBgRgb') . addClass('additionalBgRgba'); } The CSS with RGBA should be related, with a mild distinction being the opacity, with the intention to tone down the saturation of the colour a marginally. The code used to make this alteration is as follows: . additionalBgRgba{ heritage: -webkit-linear-gradient(0deg,rgba(7, one hundred sixty five, 179, zero. 6) 50%, rgba(138, 214, 230, zero. eighty two) 50%), rgba(40, 194, 209, zero. 5); } the best way we've the code arrange now's that we payment for a number of heritage aid, and if came across, season the frame-2 aspect with a brand new category of addtionalBgRgb.

Download PDF sample

Rated 4.29 of 5 – based on 18 votes