diff --git a/README.md b/README.md index dffde54..4287701 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ BROWSER SUPPORT ----------------- Impress.js is developed with current webkit-based browsers in mind (Chrome, -Safari), but *should* work also in other browsers supporting CSS3 transforms +Safari), but *should* work also in other browsers supporting CSS3 3D transforms and transitions (Firefox, IE10). It's actively developed with newest Chromium and tested in Firefox Aurora. @@ -17,6 +17,9 @@ It's actively developed with newest Chromium and tested in Firefox Aurora. I don't really expect it to run smoothly in non-webkit-based browser. If it does, just let me know, I'll glad to hear that! +For browsers not supporting CSS3 3D transforms impress.js adds `impress-not-supported` +class on `#impress` element, so fallback styles can be applied. + LICENSE --------- diff --git a/css/style.css b/css/style.css index 75191ed..d27c801 100644 --- a/css/style.css +++ b/css/style.css @@ -64,6 +64,7 @@ body { } b, strong { font-weight: bold } +i, em { font-style: italic} a { color: inherit; @@ -403,3 +404,34 @@ a:hover { white-space: nowrap; } + +/* IMPRESS NOT SUPPORTED STYLES */ + +.fallback-message { + font-family: sans-serif; + line-height: 1.3; + + display: none; + width: 780px; + padding: 10px 10px 0; + margin: 20px auto; + + border-radius: 10px; + border: 1px solid #E4C652; + background: #EEDC94; +} + +.fallback-message p { + margin-bottom: 10px; +} + +.impress-not-supported .step { + position: relative; + opacity: 1; + margin: 20px auto; +} + +.impress-not-supported .fallback-message { + display: block; +} + diff --git a/index.html b/index.html index 4dbcd5e..f953a1b 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,13 @@ -
+ +
+ +
+

Your browser doesn't support features required by impress.js, so are presented with simplified version of this presentation.

+

For the best experience please use latest Chrome or Safari browser. Firefox 10 and Internet Explorer 10 should also handle it.

+
Aren't you just bored with all those slides-based presentations? diff --git a/js/impress.js b/js/impress.js index a7dd565..432aafc 100644 --- a/js/impress.js +++ b/js/impress.js @@ -72,10 +72,21 @@ return " scaleX(" + s.x + ") scaleY(" + s.y + ") scaleZ(" + s.z + ") "; } + // CHECK SUPPORT + + var impressSupported = (pfx("perspective") != null); + // DOM ELEMENTS var impress = document.getElementById("impress"); + if (!impressSupported) { + impress.className = "impress-not-supported"; + return; + } else { + impress.className = ""; + } + var canvas = document.createElement("div"); canvas.className = "canvas";