HTML + CSS + JavaScript ~= HTML5
- HTML: neue Tags (video, nav, section, ...) neue Attribute (type=url, ...)
- CSS: neue (Pseudo-)Selektoren (:nth-child, ~, ...), Eigenschaften (transform,, transition, border-radius, ...) und Media Queries
- JS: neue APIs (Geolocation, History, Web Workers, Local/Session Storage, ...)
- Mehr (CORS, JSON, Canvas, ...)
Warum HTML5?
- Native Desktop & Mobile RIA (Rich Internet Application)
- Erweiterbar
- Einheitlich
- Performant
- Semantisch
"Und mein Internet Explorer 6?"
Wie können unteschiedliche Browser mit abweichenden Funktionalitäten unterstützt werden?
Cross-Browser-Support
Unterschiedliche Endgeräte mit verschiedene Browser aber "nur" eine App
- Progressive enhancement
- Graceful degradation
- Responsive Web
Progressive enhancement
User Agent Sniffing if (jQuery.browser.msie) { /*do IE specific things here*/ }- Feature Detection
if ("geolocation" in navigator) { /*do geo stuff here*/ }
- Polyfills (Füllwatte)
Tipp: schaut was wo geht und was nicht auf caniuse.com
Graceful degradation
<input type="number" name="myName" style="border: 1px solid green; border-radius: 5px;">
Chrome 20:
Internet Explorer 9:
Internet Explorer 7:
Die App bleibt trotz beschänktem Funktionsumfang bzw. vermindertem Aussehen nutzbar.
Responsive Web
- Media Queries
@media only screen and (max-width: 400px) { /*apply styles here*/ }
- IE: Conditional Comments
<!--[if IE]><![endif]-->
Wo sind wir?
Was steht an?
- Springer Medizin 2.0
- eDetails
- BSL
←
→
/
#
