Friday, October 14, 2011

And more about CSS

CSS was the one thing that really wasn't focused on at jquerycon weekend (I took an entire day overview of HTML5, but CSS was just incidentally spoken about in talks).
So this stuff is particularly new to me.

I really wish there were a way to have semantics in CSS for "next to"

Something along the lines of:

#div1 {
nextTo: #div2 side(right) top(30px);
}

to say "div1 is on the right side of div1, 30 pixels down." and have them stick together. At least for use with IDs. Obviously it can be worked around in javascript, or the math can be done in advance, but that's a pain.

Anyway, this brings me to programmatically-created CSS.
This basically gives me 3 options: LESS, SASS, or PHP/roll-my-own script.
I have to explore these options to see which one is worthwhile, if any.
They all basically do the same thing; allow for variables and less repetition when writing, but outputting standard CSS to the browser.
None of them seem to have the "next-to" functionality that I desire, except in making it easier to do the math.. But that doesn't make them bad.
I will try some stuff out.


3 comments:

  1. Heh you know, I'm not sure if I ever got the code quite ready for "prime time" but I made that in jQuery, a function like "moveNear" that took that kind of offset. It had too many dependencies on the times being absolutely positioned and in a containter that was relatively or abslutely positioned etc, and then I had to catch when the browser resized (I think because of the way we were centerhing things) but the basic idea is sound, and especially useful for positioning something relative to its parent, but dynamically

    ReplyDelete
  2. Yeah, wouldn't it just be nice if CSS had this commonly-desired but difficult-to-implement instruction?

    ReplyDelete
  3. Yeah it's been so long since I first leanred CSS and had that desire, I just normally assume a container div with floated elments inside. Or an absolutely position div.

    ReplyDelete

Note: Only a member of this blog may post a comment.