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

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".