Releases: eqcss/eqcss
EQCSS 1.9.1
This patch addresses a few changes:
- adds better XHR support for the bug reported in issue #94
- replaces
innerHTML
withinnerText
when populating<style>
tags - removes quotes from around selectors in many demos
EQCSS 1.9.0
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
.
EQCSS 1.8.0
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.
EQCSS 1.7.0
Changes
EQCSS.apply()
previously parsed EQCSS custom syntax and added all parsed queries toEQCSS.data
directly. NowEQCSS.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 intoEQCSS.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 ofpreviousElementSibling
andnextElementSibling
-
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 usingxhr.onload
to read the response text, butxhr.onreadystatechange
works better
EQCSS 1.6.0
- add
EQCSS.reset()
function to reset upEQCSS.data
and the DOM from the tags and attributes EQCSS generates when it runs (you can reload EQCSS any time after runningEQCSS.reset()
by runningEQCSS.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 allmousemove
events betweenmousedown
andmouseup
for mouse clicks of all buttons) -
performance improvements:
-
- replace
==
with===
and!=
with!==
- replace
-
- replace
querySelectorAll()
withgetElementsByTagName()
- replace
-
- replace
getAttribute('rel')
&getAttribute('type')
withrel
&type
- replace
EQCSS v1.5.1
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.
EQCSS v1.5.0
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()
andEQCSS.throttle()
scoped withexample.apply()
andexample.throttle()
because we named itexample
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
EQCSS 1.4.0
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 uniteh
element height unitemin
element minimum unitemax
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;
}
}
EQCSS 1.3.1
This minor update moves EQCSS.domReady
below EQCSS.throttle
in the EQCSS.js
and EQCSS.min.js
files to fix #39
EQCSS 1.3.0
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) {}
.