8 Groovy CSS Proposals

19th November 2011 · Last updated: 5th October 2016
 

Comments

Here are eight proposals I have envisaged for the future of CSS. If any of these are already planned, or in draft form, let me know.

1. Styling Elements Based On Others

Say you style an element like a header. It'd be cool if you could then style another element based on the first one. So when you changed the style, it would reflect both elements. And it would be easier than copying identical code for each element. Example:

h1 {color:#f00; background-color:#fff}
h2=h1 /* makes h2 use the same styles as h1 */

2. Text On A Curve

Text could follow the curve of an arc, defined in degrees and angle. Example:

.curve {arc:up(10deg)}

3. CSS That Affects Other Elements

Hover over one element and another is styled. Say you have a header and a piece of text lower down. Hovering over the text changes the header style. Example:

h1 {color:#f00}
#test:hover {h1:color:#000}

4. Outline Radius

Exactly like border-radius. Example:

h1 {outline-radius:50px}

5. Reset All

Resets everything possible to zero. So all paddings, margins, borders etc are set to 0. Example:

* {reset:all}

6. Regex

Style specific items in text by searching for a character or range. So you could style all full-stops in bold, or all numbers in a different font etc. It would save having to add span tags around the characters and would make for easy updating of styles. Patterns for searching could follow those in other languages, like PHP. Example:

regex("0-9") {font-family:Georgia}
regex(".") {font-weight:bold}

7. Exceptions

Instead of styling multiple elements and then having to unstyle the ones you don't want all of the styles to affect, how about allowing for exceptions? It would use only one line of CSS instead of two. Example:

/* code used today */
h1,h2,h3,h4,h5,p {color:red; border:10px solid green}
p.noborder {border:none}

/* suggested code */
h1,h2,h3,h4,h5,p {color:red; border(exception:p[class="noborder"]):10px solid green}

OR... allow :not to be used to with classes as well as elements. I tried this recently, but it didn't work:

:not(p[class="noborder"])

8. Fitting Text Inside A Block

A block of known height and width could be filled with text that expands to fit the sides. A CSS command textfit would indicate how the text fits in the block, with values allowing for text that stretches horizontally, vertically, or in both ways.

To demonstrate this fully, I made a demo showing what I mean.