Alan, a few points to make in response to your post, with inherently
dynamic CSS in mind:
On 16 April 2011 13:55, Alan Gresley <a...@css-class.com> wrote:
> Another question is what else is possible with CSS? I presume some would
> believe that CSS animation with a little JS is outright abuse of CSS.
I sympathise with the notion behind this ("for the love of God, let's
keep our behaviour and presentation separate!"), but the way that came
out spanks a bit of zealotry. Are we to take it you are in the market
of exclusively targeting that choice demographic of sensible users who
download Webkit nightlies and keep scripting turned off? ;)
In all seriousness: the transitions, transform and translation effects
of CSS achieve new heights with minimal scripting. The problem is that
'minimal' is a yet-to-be-reached ideal scenario: to achieve consistent
and safely & presentably degradable effects, an intelligent
architecture of fallbacks involving verbose and involved script and
style dependencies becomes necessary. The truth is, CSS is not ideally
suited to describing dynamic scenarios by itself: apart from the
pseudo-classes, CSS cannot in of itself describe the situations it
promises with many of these new properties.
Example:
http://www.hrp.org.uk/TowerOfLondon/
The large widget in the middle of the page uses minimal Javascript in
the ideal situation, but it is nonetheless crucial. Ignoring for a
second the DHTML scrollbar (slightly redundant in that situation — and
please don't remind me of what the validator has to say about this ;),
the mechanism of tabs which fill the widget's main panel with their
related content relies on script exclusively for changing the class of
1 element on click in modern browsers (the wrapper 'heroModule'
element gains an 'activeItemX' class, where X is the index of the
displayed item).
Javascript feature-detects transitions and, ironically, falls back to
more involved Javascript-led animations if impossible. The notion of
inheritance and classes to produce these things is incredibly simple:
the amount of DOM work necessary in Javascript to establish the right
presentation is much more difficult. Nevertheless, a small amount of
script was necessary to bring out the most of these CSS effects — and
I personally believe that while it is excellent that CSS should handle
so much of the presentation layer, the inherent triggers are
necessarily behavioural, and as such within the scope of scripting.
CSS animations involve a script API, whereby callbacks and animation
frames are features of the CSS that are only accessible via script.
For these features to reach their full potential, scripting (much more
elegant scripting than what we're used to in the world of DHTML
animation, I might add) is a boon.
> Here is one demo of mine where I hack in a box-shadow and then position it
> under another element (later in the source) that has a transparent
> background. I achieved what is forbidden by the CSS spec (a box-shadow seen
> through a semi transparent background of the element creating the shadow).
This is pretty impressive. As with a lot of the more recently
applicable CSS effects, we're reaching an awkward stage where the
dedicated designer is relegated to not having a full understanding of
what is possible, and not having the level of detailed graphic control
over how these things present themselves to the user. In many
situations I've willingly used graphics and extra markup along with
plain old tried and tested CSS2 to create exacting replications of
drop-shadows, gradients and rounded corners that could not reliably
look as good in programmed, browser-interpreted methods.
Essentially I'm saying that for a developer to be able to produce this
kind of stuff using nothing but HTML and styles is an impressive step
forward, but there's no way an exacting designer would let this case
study sway them from traditional methods.
Nevertheless, the future is bright, and it's up to us to forge ahead.
> Seriously, I think CSS and CSS3 is wonderful.
Amen to that.
Regards,
Barney
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
