Re: position: pointer

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?

[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/