CSS Wishlist

CSS-Wishlist.md

CSS Wishlist

Pseudo elements

• Allow them to be animated (already works in Firefox, soon also in WebKit).
• Allow more than 2 pseudo elements. Maybe we don't need it if Web Components will come.

Pseudo selectors

• Once an element has display: none, it shouldn’t affect first/last-child and other pseudo selectors. Or maybe it makes sense to add something like display: removed. It would behave like when that element is removed from the DOM aka make pseudo selectors ignore them. Use case: When you temporarly wanna remove items in a list, see demo, but keep the design intact.

Mouse

• Allow mouse click areas be any custom shape, not just the element's bounding box. Like image maps. Maybe by using an SVG shape like hit-area: url(shape.svg);? Note: Often the alpha level would be ok, but not always. For example a tree that has lots of tiny branches needs a hit area that doesn't have small holes in it and rather a more even shape around: http://cl.ly/EulM

Using SVG ClipPaths might be a good work-around: http://labs.sawyerhollenshead.com/lab/svg-clippath/

Transforms

• Allow to break apart transforms like transform-scale:.5; transform-rotate:90deg; so that for example in a keyframe animation, the scale doesn't also need to be repeated if it stays .5 the whole time. There is the problem of order, maybe allow a separate order property like transform-order: scale, rotate; Use case: https://tinker.io/aec25 See how I had to repeat the translate in the random-shake animation. Also, what if I wanna animate translate and rotate individually?

Effects

• Allow inset text-shadow. Syntax could be the same as for box-shadows: text-shadow: inset 0 0 4px 2px black;. Use case: Pretty complicated (WebKit only) workaround: http://cssdesk.com/vWq4t.

Animation

• Allow to toggle display:none together with other transitions like opacity, transforms.
• Multiple easing points and not just start and end. So you can for an example do a bounce.

Media Queries

• Allow media-queries on a per element basis. Currently they only take effect on the whole browser window, but what if you wanna resize just a single element and have its children respond to that change? Maybe something like element:media(max-width:500px) { ... }? Use case: http://filamentgroup.com/examples/rwd-table-patterns/ (imagine it in a resizable side panel). Here a post by Andy with a JS implementation.
• Or an overflow media-query. Similar to text-overflow, we could change the styling as soon as an element's children starts to overflow. Great for Responsive Design. Use case: http://jsfiddle.net/simurai/E387E/ There is an overflow event in JS which might be used for a polyfill.

SVG

• Implement SVG fragment identifiers in background images. (Already works in Firefox, WebKit is still debating). Would be very useful for stacking SVG icons, see SVG stacks. We wouldn't need to fiddle with the offsets in sprites and still could load them with just a single request.

Units

• An aspect ratio unit. So you could do something like width:300px; height:0.5ar; (ar = aspect ratio). This would have the effect that the height is 50% of that element's width. You could create all kinds of responsive containers that keep aspect ratios while being resized. There is the "padding hack", but it doesn't work when the height should be 100%. Here a hack that works, but only in Chrome.

Math

• Random numbers in CSS! Currently transitions/animations all look pretty static/robot like when used on natural objects. Random numbers could make movements that slightly change in values more natural looking. You could pass in a range between two numbers like opacity: random(.5, 1); resulting the opacity be something between 0.5 and 1. Or transform: translateX( random(50px, 100px) ); moving the element between 50px - 100px. Example: https://tinker.io/aec25

+1 on random numbers, too

I would love to see an aspect-ratio-property. Something like this:

Values: auto | inherit | maintain | [<rel-width> <rel-height>]
Initial value: auto
Applies to: block elements and inline-block elements
Inherited: yes

block.element {
  aspect-ratio: 16 9;
}

aspect-ratio can take a keyword or two numbers as argument. The valid keywords would be auto, inherit and maintain.

• auto the initial value of all block elements, and is the same as no aspect-ratio value
• inherit will inherit the aspect-ratio of the closest parent where aspect-ratio is not auto, or, if all parents are auto, the element will be auto as well
• maintain will keep the aspect-ratio the element gets on page load
• [<rel-width> <rel-height>] specifies an aspect-ratio in relative numbers, I.E. aspect-ratio: 4 3; with width: 400px; would result in a height of the element equal to 300px.

1. If one of css properties width or height is set (not auto), that value would be used to calculate the other.
   If an element with the aspect-ratio property set, has a width value of auto and a height value set in percent (or other relative unit), the height should be calculated from the closest parents height. So if closest parent is 50px high, and our element has aspect-ratio: 2 1; and a height: 100%;, our element dimensions would turn out to be 100px wide and 50px high.
2. If neither css property width nor height is set on the element (both is auto), the aspect-ratio would work the same way as background-size: contain, I.E. aspect-ratio is maintained, and whatever relative value of the aspect-ratio-property that first would be equal to 100% of the parent element corresponding property, would be used as the base for calculating the other. Above mentioned value calculation regarding height values in percent (or other relative units) comes into play here as well.
3. If both css properties width and height are set on the element, aspect-ratio has no effect.

Also, a specification for different accessibility properties wold be nice to have access to in the css, so we could get rid of some hacks and accessibility-inline-styles (aria-hidden=true).

And a semi value between visibility: hidden and display: none, likely to become a value of the display-property:

.accessibility {
  display: no-layout;
}

.aria-mute {
  aria-visibility: hidden;
}

button {
  width: 20px;
  height: 20px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  background-color: transparent;
}

<button><span class="accessibility">Close list of stores</span><span class="aria-mute">╳ </span></button>

This would render a round button with the familiar "╳" and a white border, read by the screenreaders as "Close list of stores".