Title: [216359] trunk/Websites/webkit.org
- Revision
- 216359
- Author
- jcr...@apple.com
- Date
- 2017-05-08 00:56:02 -0700 (Mon, 08 May 2017)
Log Message
2017-05-08 James Craig <jcr...@apple.com>
More demo files for prefers-reduced-motion post
https://bugs.webkit.org/show_bug.cgi?id=170663
Unreviewed.
* blog-files/prefers-reduced-motion/jaws.gif: Added.
* blog-files/prefers-reduced-motion/jaws.jpg: Added.
* blog-files/prefers-reduced-motion/prm.htm: New animated GIF example.
Modified Paths
Added Paths
Diff
Modified: trunk/Websites/webkit.org/ChangeLog (216358 => 216359)
--- trunk/Websites/webkit.org/ChangeLog 2017-05-08 07:33:57 UTC (rev 216358)
+++ trunk/Websites/webkit.org/ChangeLog 2017-05-08 07:56:02 UTC (rev 216359)
@@ -1,3 +1,14 @@
+2017-05-08 James Craig <jcr...@apple.com>
+
+ More demo files for prefers-reduced-motion post
+ https://bugs.webkit.org/show_bug.cgi?id=170663
+
+ Unreviewed.
+
+ * blog-files/prefers-reduced-motion/jaws.gif: Added.
+ * blog-files/prefers-reduced-motion/jaws.jpg: Added.
+ * blog-files/prefers-reduced-motion/prm.htm: New animated GIF example.
+
2017-04-24 James Craig <jcr...@apple.com>
Upload demo files for prefers-reduced-motion post
Added: trunk/Websites/webkit.org/blog-files/prefers-reduced-motion/jaws.gif
(Binary files differ)
Index: trunk/Websites/webkit.org/blog-files/prefers-reduced-motion/jaws.gif
===================================================================
--- trunk/Websites/webkit.org/blog-files/prefers-reduced-motion/jaws.gif 2017-05-08 07:33:57 UTC (rev 216358)
+++ trunk/Websites/webkit.org/blog-files/prefers-reduced-motion/jaws.gif 2017-05-08 07:56:02 UTC (rev 216359)
Property changes on: trunk/Websites/webkit.org/blog-files/prefers-reduced-motion/jaws.gif
___________________________________________________________________
Added: svn:mime-type
+image/gif
\ No newline at end of property
Added: trunk/Websites/webkit.org/blog-files/prefers-reduced-motion/jaws.jpg
(Binary files differ)
Index: trunk/Websites/webkit.org/blog-files/prefers-reduced-motion/jaws.jpg
===================================================================
--- trunk/Websites/webkit.org/blog-files/prefers-reduced-motion/jaws.jpg 2017-05-08 07:33:57 UTC (rev 216358)
+++ trunk/Websites/webkit.org/blog-files/prefers-reduced-motion/jaws.jpg 2017-05-08 07:56:02 UTC (rev 216359)
Property changes on: trunk/Websites/webkit.org/blog-files/prefers-reduced-motion/jaws.jpg
___________________________________________________________________
Added: svn:mime-type
+image/jpeg
\ No newline at end of property
Modified: trunk/Websites/webkit.org/blog-files/prefers-reduced-motion/prm.htm (216358 => 216359)
--- trunk/Websites/webkit.org/blog-files/prefers-reduced-motion/prm.htm 2017-05-08 07:33:57 UTC (rev 216358)
+++ trunk/Websites/webkit.org/blog-files/prefers-reduced-motion/prm.htm 2017-05-08 07:56:02 UTC (rev 216359)
@@ -152,5 +152,21 @@
</script>
+
+<h2>Example 4: Only display animated version if prefers-reduced-motion is both supported *and* off.</h2>
+<p>This example uses a more explicit match for <code>(prefers-reduced-motion: no-preference)</code> which excludes all browsers that don't yet support the new feature.</p>
+<img id="jaws" src="" alt="Brody realizing the shark is in the water" width="480" height="214">
+
+<script type="text/_javascript_">
+
+var motionQuery2 = matchMedia('(prefers-reduced-motion: no-preference)');
+function handleReduceMotionChanged2() {
+ document.images['jaws'].src = "" ? 'jaws.gif' : 'jaws.jpg';
+}
+handleReduceMotionChanged2(); // trigger this once on load to set up the initial value
+motionQuery.addListener(handleReduceMotionChanged2); // Note: https://webkit.org/b/168491
+
+</script>
+
</body>
</html>
\ No newline at end of file
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes