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; +}