From 98b665bb0d4b0db430c7de0abbee1ac0e4d1dd65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Auswo=CC=88ger?= Date: Sun, 2 Aug 2015 00:00:42 +0200 Subject: [PATCH] Add CSS example to readme --- README.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 314d263..885dcb6 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ This is a [prolyfill](https://youtu.be/UpVj5azI-iI?t=24m54s) for a special version of [container queries](https://github.com/ResponsiveImagesCG/container-queries). You can read more about the syntax and how they work in [this article](https://au.si/css-container-queries). -Use with caution! This is **not** a [polyfill](https://en.wikipedia.org/wiki/Polyfill). +Use with caution! This is **not** a [polyfill](https://en.wikipedia.org/wiki/Polyfill). The syntax may change frequently. ## Download @@ -16,6 +16,16 @@ You can load the script in any way you like, I would recommend to load it asynch ``` +Now you can use container queries in the following form: + +```css +.element:container(min-width: 100px) { + /* Styles for .element if it’s container is at least 100px wide */ +} +``` + +Supported queries are `min-width`, `max-width`, `min-height` and `max-height`. + The script triggers itself on load, on DOM ready and if the browser window resizes. If you want to trigger it manually you can call `reprocess` (step 1), `reparse` (step 2) or `reevaluate` (step 3) on the `window.containerQueries` object. Most of the time `reevaluate` should do the job if you didn’t add, remove or change stylesheets. E.g. ```js