Reisen in die Karibik
Geniesse den Himmel, das Wasser, die Meereblicke


Von günstig bis luxuriös
Immobilien und Unterkünfte
Dom Rep, Kuba

Caribation logo for rentals and real estate

Caribation. Die Sonnenseite Ihres Lebens.
Bungalow zu vermieten
Real Estate Boutique
Punta Cana / Bavaro
Boca Chica Club
Service
Information
Datenschutz


Caribation zu den Favoriten hinzufügen: Strg-D
Nationalflagge Dominikanische RepublikNotrufnummer
Dominikanische Republik
Notarzt 809-532 0000
Feuerwehr Santo Domingo 809-682 2000
Feuerwehr Boca Chica 809-523 4626
Feuerwehr Puerto Plata 809-586 2312
Polizei:
Santo Domingo 809-682 2151
Puerto Plata 809-586 2331
Nationalflagge KubaNotrufnummer Cuba
Notarzt (Havanna)
838 1185
838 2185
Feuerwehr: 105
Polizei: 106
Drogen: 103


Home | Impressum | Kontakt  English English

Palma Real

Modernizr.js für HTML5 und CSS3

  

Caribation Labs berichtet

Caribation Service für Web Entwickler

Einsatz von modernizr.js für HTML5 und CSS3


Caribation Labs entwickelt Webs der Zukunft unter Einsatz der Javascript Bibliothek modernizr. Weil noch (2011) so wenige Browsers HTML5 und CSS3 unterstützen, ist derzeit notwendig festzusellen welche Funktionalitäten des zukunftigen Web-Stadards der konkrete Client unterstützt und welche nicht. Gernau das macht modernizr, mehr nicht.

Caribation Service für Web-Entwickler

Nach der Inklusion des modernizr.js reicht es nur im <html> Tag class="no-js" wie hier einzufügen: <html lang="en-US" class="no-js">


Für den Test wäre das schon alles. Unter View generated source (oder im Firebug) wird dann der no-js String mit der Liste aller Eigenschaften ersetzt. Unten werden die Listen gezeigt, die wir mit Hilfe des Modernizr aus den gängigen Browsers erhalten haben.

BEISPIEL:
Die canvas Eigenschaft wird unterstützt in FF 3.6 und FF 6.0, Chrome 13.0, IE 9.0 aber nicht in IE 8.0. Es folgen alle Ergebnise:

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">

Merke: schlank ist schnell!

Modernizr ist skalierbar. Man kann nur Checks verwenden, die eine konkrete Seite gerade braucht. Ein Check aller Funktionen haben wir hier zur Veranschaulichung veröffentlicht. Aus Gründen der Performance-Optimierung wird es aber empfohlen nur eine schlanke version des .js Packetes (87 KB) zu verwenden.

Eine bestimmte Browser-Feature checken. Beispiel: geolocation

Unterstützt der Browser geolocation? Wenn ja, die Webseite (sprich Javascript) kann den Ort des Users bestimmen, und zwar sehr genau, wenn we per WLAN oder Mobilfunk surft. Modernizr wird dann entsprechendes Script laden

Hier einfaches Beispiel:

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

Hint: Den Resource Loder .load kann man sowohl für JavaScript wie auch für CSS verwenden!


Neu ab Juli 2012: Die aktuelle 2.6 Version wurde um einige neue Detects reicher!



Was denken Sie? Teilen Sie es anderen Webworkers mit...

Nun etwas Mash-up zum Thema

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

coffee
2022-12-08

hasanmtech posted a photo:

coffee

HTML5 on Wiki








Caribation Labs für die Webs der Zukunft
Suchen
Atlantic Villa in the Dom Rep

Villa mit Meerblick $350 000
Appartment mit Meerblick in der Karibik

Appartment mit Meerblick zu vermieten in Strandnähe

To the girls

red heart club

Caribation succeeds with Huawei Technology!