From 4568a39d049c3e5bec575959f97932985496b21b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Auswo=CC=88ger?= Date: Sat, 18 Jul 2015 18:26:32 +0200 Subject: [PATCH] Add recursion demo --- README.md | 3 +++ demos/recursion/index.html | 26 ++++++++++++++++++++++++++ demos/recursion/styles.css | 14 ++++++++++++++ 3 files changed, 43 insertions(+) create mode 100644 demos/recursion/index.html create mode 100644 demos/recursion/styles.css diff --git a/README.md b/README.md index 0d5d22f..f587707 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,9 @@ This repo uses a modified version of [Rob Brackett’s](https://github.com/Mr0gr **[Whitworth](http://responsiveimagescg.github.io/ALA-Whitworth-Demo/demo1/index.html)**
Illustrates how container queries could be used for both modular layout, and finessing smaller responsive design details (in this case, the position of the “add to cart” button). +**Recursion**
+Illustrates that container queries can still (as element queries) result in an infinite loop. + ## Quick Setup These demos can only be viewed via HTTP—you can’t open the index files in your browser, if you’ve cloned the repo and want to tinker with these pages locally. You have two options for running this locally without wading through a bunch of Apache nonsense: diff --git a/demos/recursion/index.html b/demos/recursion/index.html new file mode 100644 index 0000000..ddf1c4f --- /dev/null +++ b/demos/recursion/index.html @@ -0,0 +1,26 @@ + + + + + Element Query Demo + + + + + + + + + + +

Recursion

+

Container queries can still (as element queries) result in an infinite loop.

+

Resize the browser to see it flashing.

+ +
+
+
+
+
+ + diff --git a/demos/recursion/styles.css b/demos/recursion/styles.css new file mode 100644 index 0000000..c8a891e --- /dev/null +++ b/demos/recursion/styles.css @@ -0,0 +1,14 @@ +.container { + /* Let the width of the container depend on its contents */ + display: inline-block; +} +.inner { + width: 15em; + height: 15em; + background: red; + color: white; +} +.container:media(min-width: 10em) > .inner { + width: 5em; + background: green; +}