In the CSS Features thread I threw out the idea of CSS layers. Not much commentary on them, possibly due to thread length. In spare time I’ve been mulling over what they mean and what they could be used for and now that I think about it they might be a very, very powerful tool. This is what layers do in brief:
- They create a new cascade context.
- They separate styling rules and styling patterns.
- They solve a few longstanding problems in CSS in a backwards compat way.
So that no one needs to look at the original post I’ll go back over what I suggested with some additional information.
First, a layer is an entity property like a class or id. If the layer is not specified then the entity is on the root layer.
Unlike classes and id’s, entities inherit their layer from their parent. Like id’s an entity can only have one layer. Like classes multiple entities can have the same layer.
Each layer has its own cascade scope. That is the most important trait of layers. If an entity is assigned a layer it will not inherit anything from it’s ancestors and it will no longer have an effect on them.
Assigning an entity to a layer affects content around it in the same way as if the entity was set to absolute or fixed positioning. Also, like absolute positioning, the default position of a layer entity is the computed position it would have had.
Layers have global properties that apply to the layer. These are tenative names - please let me know if you have a better name.
- interactive (yes/no): Are entities on the layer interacted with by the user. This allows the designer to designate a layer with visual effects in front of elements the user wants to interact with. For example, placing a transparent animated gif of animated and tile it over the entire viewport.
Elements on a non-interactive layer are removed from the tab-index, cannot receive focus do not fire mouse events of any sort. - z-index: The z-index of layers is relative to other layers, not to elements. If an element is on a layer with a z-index of 0 and has a z-index of 1000 it will still be displayed behind the elements on a layer with a z-index of 1.
- opacity:On the layer as a whole. If an element has an opacity of its own this is applied relative the layer opacity. An element with opacity .5 on a layer of opacity .5 would have .25 overall opacity.
- cascade:How the layer cascades
[list][*]normal: Default, the layer follows normal CSS rules. - non-positional: Rules inheritance applies (div.class declarations inherit div declarations) but positional inheritance does not.
- positional: Inheritance is by position only (div.class does not inherit from div meaning it is treated as if it had its own tag. It would inherit from a div that contained it.
- none: Cascading does not occur on the layer. Admittedly this will be more useful in scripting than in design.[/list]
- origin: The location of position 0,0 in the viewport. The root layer’s origin is top left so existing position schemes will work normally. The other options are top center, top right, middle left, middle center, middle right, bottom left, bottom center and bottom right.
- anchor: Similar to the above, this is where the elements on the page anchor from.
- ordering: How elements are resolved.
[list] - top: The long standing default of CSS is to put elements on the top of the layout and work down. This option continues to be the layer default.
- bottom: Entities start from the bottom and go up. If the root layer is set to this the scrollbars will start at their lowest position.
- left: Entities nest left to right.
- right: Entities nest right to left.
[/list] - overflow: Can the layer overflow the viewport, creating scrollbars. Having this be a layer property eliminates the need of creating a container div for everything on the layer and setting it’s overflow property.
And that’s all I’ve thought of for now, but I’m sure there’s other possibilities. Here’s what style sheets would look like.
First, layers need their own character. We have # for ids, @ for media rules, . for classes, * for global declarations. That leaves ~ or $ Of these I think ~ is best.
/* The properties of the root layer can be changed with this.
the settings below work more nicely with languages which
normally go bottom to top and right to left in print */
~ {
origin: bottom right;
ordering: bottom;
}
/* An example layer for putting a decorative smoke glass pane
in front of the contents. */
~glass {
origin: center, center;
interactive: no;
overflow: no;
}
~glass div {
background: url(glass.png) center center repeat;
z-index: 1;
}
/* These are equivalent */
* { }
~ * { }
/* And to set new defaults for all entities on a layer */
~glass * {}
/* Layers don't inherit - that's sort of their point. But occassionally
making a statement about all layers will be useful. To do that */
~~ div {
/* properties of all divs on all layers. */
}
/* The :not psuedo elements applies to layers */
~~:not(glass) div {
/* property for divs on all layers but the glass layer */
Ok. Please post questions, comments, concerns and merciless mocking. 