For more than twenty years, since level 1, CSS has had a background layer for each box, controlled by the various background properties. This has been extended from a single image atop a single color to many ones in later levels. However, there is no way to subsequently select any of the multiple stacked layers of a box individually and change their fill color or picture content. Instead, everything is set once by a multitude of properties.
Lately, CSS began inheriting properties from SVG through the Effects Task Force. Among them are fill and stroke-related ones, on the one hand, and properties for filters and, more importantly, masks, on the other hand. The latter effectively generate foreground layers and the former are also necessary for this idea to work.
Nothing is really different about background-image, mask-image, border-image and list-style-image, yet only the latter can be accessed in an alternative way: as the content property of the ::marker pseudo element, applicable to all boxes that have display set to list-item (and also covering various textual counters, of course).
Iʼm considering to propose that we extend this pattern to everything that can have backgrounds, masks or borders, i.e. basically every box in CSS would accept new pseudo-element selectors. Alas, Iʼm lacking convincing use cases that would justify this major change to the fundamentals of CSS. I would therefore very much appreciate any thoughts on practical benefits of this idea, especially about actual problems or world solve.
All existing background-, mask- and, perhaps, border- properties of the basic element box would be mapped to more generic properties of the respective pseudo-element box, with automatic synchronization back and forth, but there would be no dedicated new properties where they are missing. Some of the more specific existing sub-properties, e.g. background-repeat would require new generic counterparts, though.
Background bikeshedding and examples
::back,
::backdrop,
::background,
::backstage
{
content: <background-image>;
fill: <background-color>;
}
Foreground bikeshedding and examples
::mask,
::filter,
::face,
::front,
::frontstage,
::foreground
{
content: <mask-image>;
}
Middleground?
It might make sense to also handle default content as a central layer, but Iʼm not sure whether thatʼd be useful at all.
::content, ::contents,
::base,
::plane,
::ground, ::mainground, ::middleground, ::playground, ::fairground, ::focalground,
::stage, ::centerstage, ::mainstage,
{;}
Arbitrary Layers or Stacking Parts
::layer(),
::level(),
::plane(),
::ground(),
::stage()
{;}
-
::layer(0)=::middleground -
::layer(min < 0)=::background -
::layer(max > 0)=::foreground
Borders
Furthermore, borders can be considered box edges or lines that do not necessarily come in multiple levels but otherwise behave similarly to backgrounds and foregrounds.
::border
{
fill: <border-color>;
stroke-width: <border-width>;
stroke-color: <border-color>;
stroke-pattern: <~border-style>;
content: <border-image>;
}
::border-top, ::border:top,
::border-right, ::border:right,
::border-bottom, ::border:bottom,
::border-left, ::border:left
{;}