Element Queries: Prollyfilled

Smashing Magazine recently tweeted about two Blog articles: Responsive Containers by Andy Hume  and Media Queries Are A Hack by Ian Storm Taylor  basically arguing that media queries are not enough, we need “element queries”.  Fortunately, our friend François REMY had proposed something like this to the CSS Working Group and based on some work with Mozilla’s Daniel Buchner has created a prollyfill with HitchJS to let you use them now, fork it, provide feedback and help make the Web a better place for us all.

Download the latest version of HitchJS, mark one of your stylesheets with the data-hitch-interpret flag, require it and get rolling:

For a quick look at the basic proposal, see the draft in the HitchJS Repo – for a more in-depth look, check out his article on Element Query prollyfilling/concepts.

Advertisements

Content based CSS: -link-*

This is the 3rd in a series of posts about writing CSS for HTML based on the content of selectors and not just the selectors themselves. As in our first article, we will be discussing how Hitch lets you use ideas currently drafted in CSS Selectors Level 4, right now.

It is frequently the case that we want to style the links in our site according to the level that they correspond to in the URL path – the information architecture.

For example the URL path /2012/05 is important because it represents a month and /2012/05/05 is important because it represents a day. The markup for these is very simple:

<a href="/2012">View 2012</a> 
<a href="/2012/05">View May</a> 
<a href="/2012/05/05">View May 5th</a>

With the current CSS standards there is no way to apply a style based on the path nesting. Today, we attempt to achieve something like this by attaching related classes or impose additional structures. CSS Selectors Level 4 addresses this and once again, Hitch lets you realize the benefit today…

Simply require the hitch and then use it:

 /* add some support for link selectors */ 
@-hitch-requires http://www.hitchjs.com/use/bkardell.links/1.js; 

/* links with /-- should be black */ 
a:-links-local(0) { color: #000000; } 

/* links with /--/-- should be blue */ 
a:-links-local(1) { color: #336699; } 

/* links with /--/--/-- should be gray */ 
a:-links-local(2){ color: #333333; }

With the Link Pseudo Class filters you can specify a style for any number of nested paths and even base the style on fragment identifiers in the URL of the link.

Selectors Level 4 also allows us to select an anchor if it is currently the target in the browser (matches the #hash). Hitch can give you similar capabilities now using the same hitch we already required. To illustrate, given the following markup:

<a name="Summary">View 2012 Summary</a>

You can style it like this:

/* the current target's background should be yellow. */ 
a:-links-target(){ background-color : yellow; }

If the page URL is http://example.com/index.html#Summary then that link’s background would be colored yellow.

The CSS rules are subtly different (but still very standard) while the functionality is extremely new and currently not doable without Hitch.

Doesn’t that feel better? Take a look at Hitch for more expressive CSS!

Note: Hitch is a rather new project. It has amazing potential and also a few things yet to be built. It’s open sourced and available on Github: https://github.com/bkardell/Hitch/. Fork it. Change how CSS works!

Content based CSS: -math-*

This is a second in a series of posts about how Hitch allows you to write CSS rules on more than just standard selectors.

With HTML there are many occasions where data is provided in the form of attributes to elements. This way of providing meta information about the markup has been generally only useable by JavaScript. CSS has yet to provide clear and simple ways to use this information for presentation.

Imagine you have the following markup containing HTML data-* attributes with numerical values:

<div data-level="5">Shekhar</div>
<div data-level="1">Willie</div>
<div data-level="10">Brian</div>
<div data-level="15">Clint</div>

This seems like a pretty trivial way of providing some meta-data to each element. How might you style these elements directly with CSS?

Imagine we want to be able to style these elements based on the numerical values of those attributes so that:

  • a level of 1-4 should be red
  • a level of 5-9 should be orange
  • a level of 10-14 should be blue
  • a level of 15 and higher should be green

So let’s try to write CSS to achieve this. CSS provides attribute selectors, however, it treats attributes as strings. We could potentially write some very convoluted rules like:

div[data-level=1], 
div[data-level=2], 
div[data-level=3], 
div[data-level=4]{ color: red; }

That’s about the best you can do really, and it isn’t imaginable you could (or would) do that with numbers that were very big (like 1-100). Even this, extremely simple example, looks like it would turn into a lot of work.

Luckily, there’s a Hitch for that! All you need to do is require it at the top of your Hitch-enabled CSS:

@-hitch-requires http://hitchjs.com/use/bkardell.math/1;

-math-greaterthan()

Now we can solve this problem in CSS, with normal rules:

div{ color: red; }
div:-math-greaterthan(data-level,4){ color: orange; }
div:-math-greaterthan(data-level,10){ color: blue; }
div:-math-greaterthan(data-level,14){ color: green; }

-math-lessthan()

Let’s add a border to all data-level less than 12:

div:-math-lessthan(data-level, 12){ border: solid 1px gray; }

Awesome! Now what if we wanted to only color the element that had the least value, or maybe the greatest among the siblings?

-math-greatest(), -math-least()

div:-math-greatest(data-level){ color: yellow; }
div:-math-least(data-level){ color: white; }

These rules have the ability to find the greatest/least value in the data-level attribute of all the DIV elements and styling them accordingly.

Doesn’t that feel better? Take a look at Hitch for more expressive CSS!

Note: Hitch is a rather new project. It has amazing potential and also a few things yet to be built. It’s open sourced and available on Github: https://github.com/bkardell/Hitch/. Fork it. Change how CSS works!

Content based CSS: -hitch-has

This is the first in a series of posts about writing CSS for HTML based on the content of selectors and not just the selectors themselves.

-hitch-has()

Imagine you have the following markup:

<p>Text is red because <span class="fast">of this SPAN.</span></p>
<p>Text is green because <span class="slow">of this SPAN.</span></p>

In the first paragraph it would be nice to make the text red because it has a SPAN with a class of “fast”. In the second it would be nice to make it green because it has a SPAN with a class of “slow”. We want this:

Text is red because of this SPAN.
Text is green because of this SPAN.

So let’s try to write CSS to achieve this:

p span.fast { color: red; }
p span.slow { color: green; }

Nope. That won’t work. Hmmm. How about:

p > span.fast { color: red; }
p > span.slow { color: green; }

That’s not it either. The reason is in how CSS works natively. CSS selectors are intended to find a single element or a set of elements. But once that selector is matched there is no way to traverse up or down the DOM for anything else to base the match on. What we want is to say “find a P element that has a SPAN element with a CLASS”. That’s currently not doable in native CSS.

Hitch provides -hitch-has() and here’s the answer:

p:-hitch-has(span.fast) { color: red; }
p:-hitch-has(span.slow) { color: green; }

Doesn’t that feel better? Take a look at Hitch for more expressive CSS!

Note: Hitch is a rather new project. It has amazing potential and also a few things yet to be built. It’s open sourced and available on Github: https://github.com/bkardell/Hitch/. Fork it. Change how CSS works!