Re: position: pointer

On Fri, Oct 12, 2012 at 11:20 PM, Lea Verou <lea@w3.org> wrote:

> I agree the use case needs to be addressed, but I'm not sure about the
> position proposal. This only addresses a very limited number of use cases.
> For instance, suppose we have a radial gradient and we want its center to
> follow the mouse pointer [1]. Or, a shadow that moves its offsets as the
> mouse moves, to look more natural [2]. Or the infamous parallax effect. We
> still won't be able to do things like that.
>
> I think the most flexible solution would be a new unit (e.g. mx for
> horizontal and my for vertical) that describes the offsets of the mouse
> from the viewport. Akin to vw and vh, 100mx would represent the horizontal
> offset of the mouse from the left edge of the viewport and my the vertical
> offset from the top. Not sure if scrolling should affect this or not.
>
> That way, position: pointer would be:
> position: absolute; /* or fixed */
> left: 100mx;
> top: 100my;
>
> Thoughts?
>

A very interesting idea! However I don't quite like it in this form, and
certainly doesn't seem like a better alternative for the use cases of
`position: pointer`, it doesn't give any added value there and is clunky
for the features you proposed it would enable (e.g. you don't want the
box-shadow to vary 1920px on 1080p resolution). Not sure it would be as
good for accessibility either; it doesn't make sense for a gradient to
follow the caret, or the focused element, but for a tooltip it might be a
good idea.

However, when you take it out of the competitive setting, I think these two
ideas could coexist quite nicely! It doesn't really make sense to add a
unit that is an offset to something else, so I'd rather it was relative,
i.e. 0.5mx is half the mouse's X position, this would make parallax easier
to achieve. But even then, you'd have to design for each screen size
separately (for example using media queries, but still a hassle) if you
wanted reasonably sized box shadows, so let's refine it a bit further; What
if:

1mx = mouseX / viewport width
1my = mouseY / viewport height

so if you wanted a box-shadow to move 4px depending on the mouse x
coordinate:

box-shadow: calc(2px - 4mx);

Parallax background relative to mouse:

background-position: 40mx 0;

These two proposals serve different use cases, imho. Thoughts?

Cheers,
Jussi


> [1]: http://tweeplus.com/
> [2]: http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.html
>
>
> On Oct 8, 2012, at 20:08, Jussi Kalliokoski wrote:
>
> Hi everyone,
>
> I wanted to discuss the possibility of adding a new `position` type called
> `pointer`. I came up with the idea as I was thinking about how limited
> `title` attribute tooltips are, which made me check out the JS libraries
> for the purpose, which are crappy as well, and I think JS shouldn't be
> needed for "simple" positioning of elements like this (there may be a few
> cycles to save here as well). The idea is pretty simple, it works kinda
> like absolute or fixed position (in that the element is floating), but the
> given coordinates are relative to the main pointer position.
>
> This would let you make tooltips in pure CSS and HTML (not to mention that
> you could recreate those stars flying around the mouse from the 90s with
> just CSS and HTML ;). I made a small demo [1] [2] to give a better picture
> of what I mean. The actual demo uses a silly JS shim, and I think the
> smoothness speaks for itself about how unsuitable JS is for this kind of
> functionality.
>
> Looking forward to feedback!
>
> Cheers,
> Jussi
>
> [1] (code) https://gist.github.com/3853601
> [2] (result) http://labs.avd.io/position-pointer/
>
>
>