index.html

<!DOCTYPE>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1">
<link href=//staticresource.s3.amazonaws.com/template/css/basic.css rel=stylesheet>
<title>Querious: Element Queries Demo</title>
<style>
  div {
    border: 1px solid;
    min-height: 2.5em;
  }
  div, input, textarea {
    width: 100%;
    padding: .5em;
    margin: 1em 0;
    display: block;
    font-size: 12pt;
  }
  blockquote {
    margin-top: 5em;
    font-size: 12pt;
  }
  h3, h4 {
    margin: 1.5em 0 1em 0;
  }
  .data-width { background: lime; }
  .data-height { color: red; }
  .data-characters { background: violet; }
  .data-children { background: gold; }
  .data-words { background: orange; }
</style>

<h1>Querious</h1>
<h2>Element Queries Demo</h2>
<p>This is not a serious element query plugin, just an experiment to demonstrate what the concept of element queries is about, prove how support can be written in JavaScript, and to highlight the features and limitations of such an approach.</p>
<h3>Limitations:</h3>
<ul>
  <li>can only use PX units
  <li>can only apply one instance of each condition per element
  <li>doesn't support IE9, and likely some other browsers too
</ul>
<h3>Element Query Demos</h3>

<h4>Min-width : <code>data-width=500</code></h4>
<div data-width=500></div>

<h4>Min-width &amp; Max-width : <code>data-width=400,600</code></h4>
<div data-width=400,600></div>

<h4>Min-height : <code>data-height=50</code></h4>
<div data-height=50>----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ---- -----</div>

<h4>Min-characters &amp; Max-characters : <code>data-characters=5,10</code></h4>
<input data-characters=5,10 placeholder="Type 5-10 Characters">

<h4>Min-words &amp; Max-words : <code>data-words=2,5</code></h4>
<textarea data-words=2,5 placeholder="Type 2-5 words"></textarea>

<h4>Min-children : <code>data-children=4</code></h4>
<div data-children=4>This <strong>div</strong> contains <u>4</u> <strong>different</strong> <u>elements</u></div>

<blockquote>For a more fully-featured, easier-to-use, and more powerful element query syntax check out <a href=http://elementqueries.com>http://elementqueries.com</a></blockquote>
<script src=querious.js></script>