Eqcss Versions Save

This patch addresses a few changes:

• adds better XHR support for the bug reported in issue #94
• replaces innerHTML with innerText when populating <style> tags
• removes quotes from around selectors in many demos

This release adds two new ways to use existing features, introducing the children and characters query conditions. Similar to how min-children and max-children work, children will select only an exact number of children. Also characters works to select an exact number of characters of text content an element has, rather than a range like min-characters or max-characters.

This release adds new aliases for meta-selectors. Introducing :self as an alias for $this and eq_parent for inter-plugin standardization with other element query plugins.

Changes

• EQCSS.apply() previously parsed EQCSS custom syntax and added all parsed queries to EQCSS.data directly. Now EQCSS.apply simply returns an array of JavaScript objects filled with parsed queries. This should make it easier to deal with EQCSS syntax outside of the plugin (like using the new command-line EQCSS parsing tool) as well as make it easier to load queries into EQCSS without having to use EQCSS's custom syntax.

New Features

• EQCSS.register() accepts either a single parsed query, or an array of parsed queries and loads them into EQCSS.data to be reprocessed along with the other registered queries.

• EQCSS.process() is a little sugar for parsing and registering queries stored in EQCSS syntax. This makes it possible to use EQCSS syntax inside JavaScript modules without needing to output the custom syntax to be read by the plugin - parsing of the queries can be done inside your modules and the result loaded into EQCSS directly via JS.

This is now possible:

var eqcss = require('eqcss')

eqcss.process(`
  @element html {
    $this {
      background: lime;
    }
  }
`)

Bugfixes

• fixed a bug with $prev and $next support in IE8 that appeared sometime. This has been fixed now by avoiding the use of previousElementSibling and nextElementSibling

• fixed a bug relating to reading of the contents of files loaded via <link> and <script type=text/eqcss> tags in HTML for IE8 - previously we were using xhr.onload to read the response text, but xhr.onreadystatechange works better

• add EQCSS.reset() function to reset up EQCSS.data and the DOM from the tags and attributes EQCSS generates when it runs (you can reload EQCSS any time after running EQCSS.reset() by running EQCSS.load())

This helps issue #64

• switch mousedown event listener to only trigger on left mouse button clicks to recalculate EQCSS on left click drag. (Previous to version 1.6.0, EQCSS would trigger for all mousemove events between mousedown and mouseup for mouse clicks of all buttons)

• performance improvements:

• • replace == with === and != with !==
• • replace querySelectorAll() with getElementsByTagName()
• • replace getAttribute('rel') & getAttribute('type') with rel & type

This update brings bugfix, a change, and some improved source formatting to EQCSS.js

Originally selector lists were implemented in EQCSS.js by wrapping them with single or double quotes, like this:

@element 'div' {}
@element "div" {}

There were some issues extracting selectors that included double quotes as noted in #53. This release fixes the previous bugs and also relaxes the requirement to allow unquoted selector lists as well. The following is now also supported and equivalent to the previous two examples:

@element div {}

In addition to the bugfix, I've also formatted the source code of EQCSS.js optimizing for legibility, and applied quotes, semicolons, and naming a little more consistently throughout the source. This should make it easier to read, edit, and extend in the future.

This new version of EQCSS modularizes the plugin in a UMD style based on this template for use with module loaders like Webpack. Also included in this update:

• code for eval("") moved to its own function
• variables used in the plugin are no longer global

To use with NPM and Webpack, follow these steps:

• run npm install eqcss
• in your JavaScript, add var example = require('eqcss')
• now EQCSS will be bundled with your code
• you can also access functions like EQCSS.apply() and EQCSS.throttle() scoped with example.apply() and example.throttle() because we named it example when importing it

If this plugin is loaded directly in the browser (or via CDN) outside of a module loader, it will simply attach itself to the global object and run as before (with EQCSS.apply() and EQCSS.throttle() available globally)

Here's an example project using webpack and another using browserify

This new version adds support for new element-based units. Much like viewport units vw, vh, vmin, and vmax which represent 1/100th of the viewport's width, height, shortest edge and longest edge, EQCSS now supports the following units:

• ew element width unit
• eh element height unit
• emin element minimum unit
• emax element maximum unit

These represent 1/100th of the scoped element's width, height, shortest edge, or longest edge - though inside the element query you are able to use the dimensions of one element to style any other element on the page.

@element 'div' {
  $this {
    font-size: 10ew;
  }
}

This will set the font size to 1/10th of the width of the element. But things like this are also possible, which would set the width of the #sidebar element based on the height of the main element:

@element 'main' {
  #sidebar {
    height: 100eh;
  }  
}

This minor update moves EQCSS.domReady below EQCSS.throttle in the EQCSS.js and EQCSS.min.js files to fix #39

Add conditions related to element aspect ratios: orientation, min-aspect-ratio, & max-aspect-ratio.

The three recognized orientations are square, portrait, & landscape with a query like @element 'div' and (orientation: portrait) {}.

To use min-aspect-ratio or max-aspect-ratio express the ratio in the format width/height with a / slash between the width and height values with a query like @element 'div' and (min-aspect-ratio: 16/9) {}.