Invest in the Caribbean
Enjoy the skies, the water, the views.


Real Estate &
Accommodation:
from affordable to luxury

Caribation logo for rentals and real estate

Caribation. The sunny side of your life.
Bungalow for rent
Real Estate Boutique
Punta Cana / Bavaro
Boca Chica Club
Service
Information
Data Protection rules


Bookmark Caribation: Ctrl-D
National flag Dominican RepublicEmergency phones
Dominican Republic
Ambulance 809-532 0000
Fire Brigade:
Santo Domingo 809-682 2000
Boca Chica 809-523 4626
Puerto Plata 809-586 2312
Police:
Santo Domingo 809-682 2151
Puerto Plata 809-586 2331
National flag CubaEmergency phones Cuba
Ambulance (Havana)
838 1185
838 2185
Fire Brigade: 105
Police: 106
Drug Unit: 103


Home | About us | Contact  English English

Palma Real

Modernizr.js for HTML5 and CSS3

  

Caribation Labs reports

Caribation Service for Web Developers

Use of modernizr.js for HTML5 and CSS3


Caribation Labs develops webs for the future and applies the javascript library modernizr. Currently (2011) few browsers support HTML5 and CSS3 in full. It is therefore necessary to test each client which features of the future web standards it supports and which not. This is exactly what modernizr does: inspecting the browser.

Caribation Service for Web Developers

You simply include modernizr.js and modify the <html> tag adding a class="no-js" element, as in this example: <html lang="en-US" class="no-js">


This would be all to start the test. You will find the results under View generated source (or in Firebug). The no-js string will then be replaced by the list of all HTML5/CSS3 features. If a feature is not supported it's name will be prefixed with a "no-" Below we show the lists the Modernizr has helped us to obtained from the current browsers.

EXAMPLE:
As you can see the canvas property is supported by FF 3.6 and 6.0, Chrome 13.0, IE 9.0 but not by IE 8.0. Here all results:

Firefox 3.6.22

<html class=" js flexbox canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity no-cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg no-inlinesvg no-smil svgclippaths" lang="en-US">

Firefox 6.0

<html class="<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" lang="en-US">

Chrome 13.0

<html class="<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms no-csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" lang="en-US">

IE 8.0

<html class=" js no-flexbox no-canvas no-canvastext no-webgl no-touch no-geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets no-rgba no-hsla no-multiplebgs no-backgroundsize no-borderimage no-borderradius no-boxshadow no-textshadow no-opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections no-csstransforms no-csstransforms3d no-csstransitions fontface generatedcontent no-video no-audio localstorage sessionstorage no-webworkers no-applicationcache no-svg no-inlinesvg no-smil no-svgclippaths" lang="en-US">

IE 9.0

<html class=" js no-flexbox canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow no-textshadow opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions fontface generatedcontent video audio localstorage sessionstorage no-webworkers no-applicationcache svg inlinesvg smil svgclippaths" lang="en-US">

Please note: slim is fast!

Modernizr is scalable. You can only include into the .js script the feature checks you need for the current page. For this demonstration purpose we have used the full, unabbreviated .js file (87 KB). Needless to say, an optimized, smaller script will improve the page performance.

Checking a spefific browser feature. Example: geolocation

Does user's browser support geolocation? If yes, the Website (JavaScript, precisely) could determine the geographic location of the user, even more exactly if he is surfing on mobile or WLAN. Knowing the browser's support for geolocation Modernizr could then load the proper .js script

A simple example:

  Modernizr.load({
  test: Modernizr.geolocation,
  ja  : 'geo.js',
  nein: 'geo-polyfill.js'

Hint: The resource loder .load can be applied to both JavaScript and CSS!


New from July 2012: The current 2.6 Version includes about a dozen new detects!



What do you think? Other web workers will be grateful for your shared your experience, remarks or smart questions...

Trying some mash-up on the topic...

     Found on Google News (modernizr,html5,css3)

Sun, 13 Jan 2013
Feature Detection Strategy: a wise web development thanks to Modernizr  Designmodo
Thu, 22 Oct 2015
How to Use Modernizr Responsibly — SitePoint  SitePoint
Thu, 04 Aug 2011
Modernizr | Using Browser Feature Detection  HTML Goodies

Pictures from flickr (Yahoo): HTML5,css3

AI Article Summarizer with Open AI API and ReactJS
2023-10-20

rangaslcreations posted a photo:

AI Article Summarizer with Open AI API and ReactJS

With OpenAI API and ReactJS

AI Article Summarizer with Open AI API and ReactJS
2023-10-20

rangaslcreations posted a photo:

AI Article Summarizer with Open AI API and ReactJS

With OpenAI API and ReactJS

HTML5 on Wiki






Caribation Labs for the future of your web experience
Search
Atlantic Villa in the Dom Rep

Villa with ocean view $350 000
caribbean apartment with ocean view

Apartment with Ocean View for rent in a beach area

To the girls

red heart club

Caribation succeeds with Huawei Technology!