The Sparkbox team has some ideas about what we’d like to see included in the CSS spec, so we’re sharing our wishlist of properties and values that we’d like to see under our CSS tree. Be sure to add to the list with your comments and ideas as well!
Rob Tarr
Math in CSS
My first reaction to this question is simple—Math. I would love the ability to do calculations on the fly in CSS. I could then have a 100% width box with padding that doesn’t break out of its parent container:
.box {
width: 100% - 40px;
padding: 0 20px;
}
The ability to perform calculations would open up possibilities in CSS that are currently only available using JavaScript solutions. While talking to Ben about this, he pointed out that the CSS3 spec has calc(), but there are two major drawbacks I can see at first glance. First, it’s currently only implemented in Firefox 4+ and IE 9+. Second, I would love to use other element’s properties in my calculations:
h1 {
font-size: header.width / 10
padding: 0 20px;
}
This is similar to what the JavaScript solution fittext.js does.
Ryan Buttrey
Text-Shadow Spread-Radius
Mine’s pretty practical. I didn’t necessarily dream big, but I’d seriously love to see the text-shadow property have a spread-radius value like box-shadow does. I recently ran into a case where this would have been very useful—where the design called for a heavy stroke around the text. I could fake a thin stroke around the text with a text-shadow that has no blur and no offset. However, unlike with box-shadow, it isn’t possible to set a value for a spread-radius to cause the shadow to expand or get bigger.
Ben Callahan
More Media Features for Media Queries
I would love to see an expansion of the media features list for the media queries specification. Right now, browsers that fully support media queries are limited to a fairly short list of features which can be queried:
width
height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio
color
color-index
monochrome
resolution
scan
grid
The common ones are width, height, device-width, device-height, and orientation. Most people don’t even know that you can specify unique styles when your content is being viewed on a monochrome device.
Dream with me a bit—What if there was a “speed” media feature? I’m not talking about processor speed (although that would be pretty cool) but something that detects how fast the device is traveling. With this, you could provide a unique set of styles for those sitting still, walking, or riding in a car, train, bus, plane, etc.
How about “distance?” What if you could specify unique styles when your content is being viewed within ten miles of a specified location? Temperature, environmental brightness, and time are only a few of the cool ways this could be used.
Combining the environmental sensors in modern mobile devices with the power of media queries creates some pretty interesting possibilities. Obviously, these are a bit far-fetched, but they are fun to think about. Truthfully, there is a lot of potential to be explored in the list of currently supported media features. Maybe we should start there?
Rob Harr
Regular Expression Support
I would like to see CSS selectors have regular expression support. If you could provide a regular expression for ids, classes, attributes, elements, etc., then you could bend CSS to your will. This would give CSS authors ultimate power. If you needed to add parent selectors, then you could do so with a well-crafted expression. There would be almost no selector that you could not create. I realize this could cause serious problems if someone were to write a bad expression, but that’s true with any other programing language. I think those using CSS/HTML should have the same opportunity to create something beautiful or blow everything up. Remember that “with great power comes great responsibility.”
In the beginning, you would have some people leading the charge by writing really slick expressions and sharing them. Once an expression is widely shared, it may be added to the core spec. Almost all programing languages have some way to extend the language. The good ones get reused, the great ones get added to the language, and the bad get ignored. I think adding this support would allow the spec to develop faster and give developers the ability to test new paradigms in the wild. There is no doubt that mistakes would be made, but that is the only way we can move things forward together. We should never let the bad things people might do limit the brilliant things that are possible.
Andy Rossi
CSS Blending Modes
Even with a small set of choices, such as “Multiply,” “Screen,” and “Overlay,” CSS blending modes would be an extremely powerful tool. The ability to set elements or text as an overlay without the need to use complicated masking techniques would be the bee’s knees. It would no longer be necessary to use flattened images to get a blended effect across in a design, and the fewer images needed to execute a web design, the better.
Drew Clemens
CSS Stroke Property
Admittedly, I’m one of the least experienced with CSS in the office, but as I’ve worked with our genius front-end developers, I have found one property that I’m surprised doesn’t exist—Stroke. It’s a concept that exists in any design application, however it must be faked in CSS. And sometimes you can’t entirely simulate the original design. It seems that stroke property values such as pixel width, positive/negative placement (to create outset/inset effects), and transparency would be quite useful. Multiple instances on an object would be pretty sweet as well.
Not only would I like to see a stroke property available, I’d like to see it available for more elements than just boxes. Fonts would be a no-brainer.
