CSS Wishlist: 21 Designer/Developers Sound Off

Avatar of Chris Coyier
Chris Coyier on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

I asked a bunch of designers what they thought needed to change in CSS.

Wolfgang Bartelme

Designer at Bartelme Design

I’d love to see cross-browser support for gradients, shadows, opacity masks and rounded corners. I guess that would not just dramatically reduce bandwidth, but also speed up production and customization.

Jon Hicks

Designer at hicksdesign

I would love a different box model! I find it bizarre that padding and border add the width of an object, and would love to be able to give something like a textarea 100% width and 3px padding without worrying what it’s going to do the layout. Perhaps something like padding-inside as a new selector?

In that vain I also wish I could specify a 100% width for an element, minus a set fixed width. Again, very useful when creating fluid designs with form elements!

Andy Budd

Author and Web Standards Pioneer: AndyBudd.com

Most of the stuff I want is in CSS3, so what I actually want is the core modules finished and implemented fully by at least two browser vendors.

David Walsh

Web Development Blogger: David Walsh Blog

I think that the lack of font abilities that we’ve been living with is a sin. Our other options for using non-standard web fonts, sIFR and utilizing images, are painful and have really held the creativity of the web back. I also believe that standard corner-rounding properties must be added — we’re all tired of creating rounded-corner images and browser-specific hacks to achieve our goals. Lastly, I wish CSS would be implemented in browsers faster. We’ve had little advancement in the past few years.

Collis Ta’eed

Entrepreneur, Blogger, Designer at Envato, Home

The biggest problem I have with my CSS is that with large sites it gets very unwieldy. On a site like FlashDen the CSS goes on for miles, and then I have a second set of sheets to apply to change all the styles for people visiting alternate versions of the site (ThemeForest or AudioJungle). Even with the best intentions, it’s pretty messy.

I wish that I could have an inheritance concept in CSS like you have in object oriented programming. So you could go:

.button {  
 /* some styles */
}
.button >> .sidebar_button { 
/* inherits all of .button and adds new styles */
}

I know that currently I could just define it like this:

.button, .sidebar_button {  
/* some styles */
}
.sidebar_button { 
/* inherits all of .button and adds new styles */
}

But somehow that doesn’t seem like an elegant way to do things. And if the first and second definitions happen to be separated by a large block of other CSS code, when you come back to read your CSS later, there is no way for you to know that .sidebar_button has some more styles attached to it. Whereas the inheritance version above, you can read that it’s a derivative of .button.

Keith Robinson

Creative Director at Blue Flavor, Home

I wish CSS could handle embedded fonts in the manner we use sIFR now,

Shaun Inman

Designer/Developer of Mint, Home

Here’s the thing, one more half-baked, tacked-on stopgap isn’t going to improve CSS in any meaningful way–it would only compound a fundamental flaw in its design. CSS feels like a style sheet implementation you’d find in a late 90’s desktop publishing app. It’s still very text-centric. Style sheets just weren’t designed for creating complex layouts. CSS’s layout features are tacked on–and 10 years later it definitely shows.

I’d love to see the CSS Text Module rewritten by experienced typographers and typesetters and the CSS Layout Module rewritten by experienced publication designers, both traditional and newfangled.

And sometime before 2022 if at all possible.

Jeffrey Jordan Way

Editor at NETTUTS and ThemeForest Blog, Home

I wish we could assign variables in our stylesheets. For example, it would be nice if, rather than having to scroll to the top of my document every time I needed to grab the hex value for my chosen “blue”, I could simply assign that value to a variable called “myBlue”.

var myBlue = #191955;

#someElement{
  color: myBlue;
}

This is a topic that has been debated to death, and truthfully, it might prove to be a bad idea. I’m still not sure. I could swing either way in such a discussion. Once you open that door, you sort of lose the whole concept of CSS. But, I think if done responsibly, variable assigning could potentially save us a great deal of time when designing.

Steven Vandelay

Designer at Vandelay Design

One of the great things about working with CSS is that there’s usually different ways to approach something that you’re trying to accomplish, but in some ways I would like to see more standardization when it comes to layouts.

Andy Clarke

Author, Designer, and Developer: Stuff and Nonsense

Well, aside from the obvious (making sure that Obama gets elected, making me very rich and making me a cup of nice tea) what I would like most from CSS are better layout tools to allow me to create rich, intricate designs without the need to add presentational elements into my markup. The CSS Working Group (of which I am a former member) have been working hard on these layout tools. I hope that before too long we will see the browser makers implementing these proposals (using -browser- extensions) so that designers and developers can experiment with them.

Chris Spooner

Designer at SpoonGraphics, Home

Multiple Backgrounds, Rounded Corners, Border Images and Opacity are my first thoughts when asked what I wish CSS could do, then I remember – these are all in the pipeline for CSS3! In this case, my dreams are coming true in terms of CSS, which makes the question; Is there anything you wish Browsers could do?!

One CSS technique I wish there was a shorter technique for would be to easily make a two or three column layout with equal height sidebars without the use of the faux column method.

Elliot Jay Stocks

Designer, Writer and Speaker, Home

I’d like to see conditionals natively supported in CSS without the need for workarounds such as (the excellent) Conditional-CSS. Many people argue that browser detection is essentially something that should be handled outside of a stylesheet, but all of the HTML-based conditional comments I use to handle IE-specific code is entirely to call in ‘hack’ CSS files. The implementation of code along the lines of what we use to target Gecko- or WebKit-based browsers would be a hugely welcome addition for me.

Nick La

Designer – Web Designer Wall, N.Design Studio

I wish CSS could do layer styles like Photoshop where you can add: inner shadow, outer glow, bevel effects, etc. It would be even better if we could have layer blending mode.

Jesse Bennett-Chamberlain

Designer at 31Three

The only thing that comes to mind would be variables. I don’t get my hands too dirty with code very much any more, but variables would be quite handy for when I do. Ask me what I would like Photoshop to do and I could give you a much longer answer :)

Volkan Görgülü

Designer / Developer – Web Deneyimleri

I wish instead of writing

#sample h1, #sample h2, #sample h3 —> (long and ugly)

something like this

#sample [h1, h2, h3] —> (short and clean)

would do the job :)

Another example can be

#sample a:link, #sample a:visited

#sample a [link, visited]

Veerle Pieters

Designer at Duoh!, Blog

I wish CSS had support for gradient borders and easier usage for transparency, like in InDesign or Quark for example. Applicable on every possible object, text etc. Easier and more logical way of floating elements. Lastly that we don’t have to wait on CSS 3 for another 5 years. I also wish that CSS would get mad and punish if some browsers don’t behave :)

Jonathan Snook

Designer/Developer at Sidebar Creative, Home

I’d love to see consistent implementations across all major browsers for CSS3 features like multiple backgrounds, border-radius, and border-image. CSS Transforms would be handy, too. They might seem gimmicky but there are plenty of practical reasons for it like long headers names for narrow columns in a data table. Being able to rotate elements would improve the design while maintaining accessibility (and avoiding have to resort to images). The landscape in 5 years will, I believe, offer us plenty of functionality we don’t enjoy now.

Eric Meyer

Web Standards Writer and Speaker, Home

Strong grid-based layout. We still don’t have it, and it’s needed. At this point I honestly don’t care if it’s accomplished through CSS or some other new language.

Cameron Moll

Designer, Speaker, Author, Home

First and foremost, I’d like CSS to answer my email.

Second, I’d like CSS to convince browser developers to cooperatively and incrementally include “future” CSS features and proposals today, rather than waiting for a full spec to be “officially” released.

Wishful thinking? Perhaps, though I anticipate the first may happen before the second.

Dan Rubin

User Experience Director at Sidebar Creative, Home

I’d love to see the W3C bring in a proper typographer and book designer to help craft the type and layout parts of the specification. Someone like Robert Bringhurst would be ideal, as both an expert typographer and book designer, so the specification would be created with designers’ needs in mind, rather than by programmers.

In a feature-specific way, I would hope this results in much better typographic control, and a web equivalent to “master pages”, which are an old standard in print design software.

Stephanie Sullivan

Coder, Trainer, Writer at W3Conversions

Outside the holy grail of creating equal height columns without using a faux method (while still supporting browsers like IE6 and IE7), I’d love to see a way to set background positioning from the bottom or right side of an element. No, I don’t mean setting them all the way to the bottom or right, of course we can do that now. I mean setting a background image that’s not quite at the bottom or right and remains a specific value away from it. It’s not possible to accurately determine the height of elements containing text, so setting the background image 350px from the top will give wildly variable results in relation to the bottom of the element. Having a reliable way to set a background image 20px from the bottom without adding a non-semantic wrapper, could in some circumstances be very helpful.

Some great ideas from the comments:

  • Andy Ford:
    I’d like to see a “height-increment” property.
    Essentially making a block level element only grow in height in specified “chunks” rather than pixel by pixel.
  • Tony Freixas:
    GUI applications have access to rich layout tools that could easily have been adapted to Web layout, but were completely ignored.
    Layout is definitely something that could be entirely re-written.
  • Andy Pemberton:
    CSS needs a more advanced “fallback” support model.
    Right now, we can specify multiple fonts to ‘fallback’ to, but what if that fallback font really could use some negative letter-spacing too?