I love Christmas. I love walking around the streets of London, looking at the beautifully decorated windows, seeing the shiny lights that hang above Oxford Street and listening to Christmas songs.
I’m not going to lie though. Not only do I like buying presents, I love receiving them too. I remember making long lists that I would send to Father Christmas with all of the Lego sets I wanted to get. I knew I could only get one a year, but I would spend days writing the perfect list.
The years have gone by, but I still enjoy making wish lists. And I’ll tell you a little secret: my mum still asks me to send her my Christmas list every year.
This time I’ve made my CSS wish list. As before, I’d be happy with just one present.
Before I begin…
… this list includes:
- things that don’t exist in the CSS specification (if they do, please let me know in the comments – I may have missed them);
- others that are in the spec, but it’s incomplete or lacks use cases and examples (which usually means that properties haven’t been implemented by even the most recent browsers).
Like with any other wish list, the further down I go, the more unrealistic my expectations – but that doesn’t mean I can’t wish. Some of the things we wouldn’t have thought possible a few years ago have been implemented and our wishes fulfilled (think multiple backgrounds, gradients and transformations, for example).
The list
Cross-browser implementation of font-size-adjust
When one of the fall-back fonts from your font stack is used, rather than the preferred (first) one, you can retain the aspect ratio by using this very useful property. It is incredibly helpful when the fall-back fonts are smaller or larger than the initial one, which can make layouts look less polished.
What font-size-adjust does is divide the original font-size of the fall-back fonts by the font-size-adjust value. This preserves the x-height of the preferred font in the fall-back fonts. Here’s a simple example:
p {
font-family: Calibri, "Lucida Sans", Verdana, sans-serif;
font-size-adjust: 0.47;
}
In this case, if the user doesn’t have Calibri installed, both Lucida Sans and Verdana will keep Calibri’s aspect ratio, based on the font’s x-height. This property is a personal favourite and one I keep pointing to.
Firefox supported this property from version three. So far, it’s the only browser that does. Fontdeck provides the font-size-adjust value along with its fonts, and has a handy tool for calculating it.
More control over overflowing text
The text-overflow property lets you control text that overflows its container. The most common use for it is to show an ellipsis to indicate that there is more text than what is shown. To be able to use it, the container should have overflow set to something other than visible, and white-space: nowrap:
div {
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
This, however, only works for blocks of text on a single line. In the wish list of many CSS authors (and in mine) is a way of defining text-overflow: ellipsis on a block of multiple text lines. Opera has taken the first step and added support for the -o-ellipsis-lastline property, which can be used instead of ellipsis. This property is not part of the CSS3 spec, but we could certainly make good use of it if it were…
WebKit has -webkit-line-clamp to specify how many lines to show before cutting with an ellipsis, but support is patchy at best and there is no control over where the ellipsis shows in the text. Many people have spent time wrangling JavaScript to do this for us, but the methods used are very processor intensive, and introduce a JavaScript dependency.
Indentation and hanging punctuation properties
You might notice a trend here: almost half of the items in this list relate to typography. The lack of fine-grained control over typographical detail is a general concern among designers and CSS authors. Indentation and hanging punctuation fall into this category.
The CSS3 specification introduces two new possible values for the text-indent property: each-line; and hanging. each-line would indent the first line of the block container and each line after a forced line break; hanging would invert which lines are affected by the indentation.
The proposed hanging-punctuation property would allow us to specify whether opening and closing brackets and quotes should hang outside the edge of the first and last lines. The specification is still incomplete, though, and asks for more examples and use cases.
Text alignment and hyphenation properties
Following the typographic trend of this list, I’d like to add better control over text alignment and hyphenation properties. The CSS3 module on Generated Content for Paged Media already specifies five new hyphenation-related properties (namely: hyphenate-dictionary; hyphenate-before and hyphenate-after; hyphenate-lines; and hyphenate-character), but it is still being developed and lacks examples.
In the text alignment realm, the new text-align-last property allows you to define how the last line of a block (or a line just before a forced break) is aligned, if your text is set to justify. Its value can be: start; end; left; right; center; and justify. The text-justify property should also allow you to have more control over text set to text-align: justify but, for now, only Internet Explorer supports this.
calc()
This is probably my favourite item in the list: the calc() function. This function is part of the CSS3 Values and Units module, but it has only been implemented by Firefox (4.0). To take advantage of it now you need to use the Mozilla vendor code, -moz-calc().
Imagine you have a fluid two-column layout where the sidebar column has a fixed width of 240 pixels, and the main content area fills the rest of the width available. This is how you could create that using -moz-calc():
#main {
width: -moz-calc(100% - 240px);
}
Can you imagine how many hacks and headaches we could avoid were this function available in more browsers? Transitions and animations are really nice and lovely but, for me, it’s the ability to do the things that calc() allows you to that deserves the spotlight and to be pushed for implementation.
Selector grouping with -moz-any()
The -moz-any() selector grouping has been introduced by Mozilla but it’s not part of any CSS specification (yet?); it’s currently only available on Firefox 4.
This would be especially useful with the way HTML5 outlines documents, where we can have any number of variations of several levels of headings within numerous types of containers (think sections within articles within sections…).
Here is a quick example (copied from the Mozilla blog post about the article) of how -moz-any() works. Instead of writing:
section section h1, section article h1, section aside h1,
section nav h1, article section h1, article article h1,
article aside h1, article nav h1, aside section h1,
aside article h1, aside aside h1, aside nav h1, nav section h1,
nav article h1, nav aside h1, nav nav h1, {
font-size: 24px;
}
You could simply write:
-moz-any(section, article, aside, nav)
-moz-any(section, article, aside, nav) h1 {
font-size: 24px;
}
Nice, huh?
More control over styling form elements
Some are of the opinion that form elements shouldn’t be styled at all, since a user might not recognise them as such if they don’t match the operating system’s controls. I partially agree: I’d rather put the choice in the hands of designers and expect them to be capable of deciding whether their particular design hampers or improves usability.
I would say the same idea applies to font-face: while some fear designers might go crazy and litter their web pages with dozens of different fonts, most welcome the freedom to use something other than Arial or Verdana.
There will always be someone who will take this freedom too far, but it would be useful if we could, for example, style the default Opera date picker:
<input type="date" />
or Safari’s slider control (think star movie ratings, for example):
<input type="range" min="0" max="5" step="1" value="3" />
Parent selector
I don’t think there is one CSS author out there who has never come across a case where he or she wished there was a parent selector. There have been many suggestions as to how this could work, but a variation of the child selector is usually the most popular:
article < h1 {
…
}
One can dream…
Flexible box layout
The Flexible Box Layout Module sounds a bit like magic: it introduces a new box model to CSS, allowing you to distribute and order boxes inside other boxes, and determine how the available space is shared.
Two of my favourite features of this new box model are:
- the ability to redistribute boxes in a different order from the markup
- the ability to create flexible layouts, where boxes shrink (or expand) to fill the available space
Let’s take a quick look at the second case. Imagine you have a three-column layout, where the first column takes up twice as much horizontal space as the other two:
<body>
<section id="main">
</section>
<section id="links">
</section>
<aside>
</aside>
</body>
With the flexible box model, you could specify it like this:
body {
display: box;
box-orient: horizontal;
}
#main {
box-flex: 2;
}
#links {
box-flex: 1;
}
aside {
box-flex: 1;
}
If you decide to add a fourth column to this layout, there is no need to recalculate units or percentages, it’s as easy as that.
Browser support for this property is still in its early stages (Firefox and WebKit need their vendor prefixes), but we should start to see it being gradually introduced as more attention is drawn to it (I’m looking at you…). You can read a more comprehensive write-up about this property on the Mozilla developer blog.
It’s easy to understand why it’s harder to start playing with this module than with things like animations or other more decorative properties, which don’t really break your layouts when users don’t see them. But it’s important that we do, even if only in very experimental projects.
Nested selectors
Anyone who has never wished they could do something like the following in CSS, cast the first stone:
article {
h1 { font-size: 1.2em; }
ul { margin-bottom: 1.2em; }
}
Even though it can easily turn into a specificity nightmare and promote redundancy in your style sheets (if you abuse it), it’s easy to see how nested selectors could be useful. CSS compilers such as Less or Sass let you do this already, but not everyone wants or can use these compilers in their projects.
Every wish list has an item that could easily be dropped. In my case, I would say this is one that I would ditch first – it’s the least useful, and also the one that could cause more maintenance problems. But it could be nice.
Implementation of the ::marker pseudo-element
The CSS Lists module introduces the ::marker pseudo-element, that allows you to create custom list item markers. When an element’s display property is set to list-item, this pseudo-element is created.
Using the ::marker pseudo-element you could create something like the following:
Footnote 1: Both John Locke and his father, Anthony Cooper, are
named after 17th- and 18th-century English philosophers; the real
Anthony Cooper was educated as a boy by the real John Locke.
Footnote 2: Parts of the plane were used as percussion instruments
and can be heard in the soundtrack.
where the footnote marker is generated by the following CSS:
li::marker {
content: "Footnote " counter(notes) ":";
text-align: left;
width: 12em;
}
li {
counter-increment: notes;
}
You can read more about how to use counters in CSS in my article from last year.
Bear in mind that the CSS Lists module is still a Working Draft and is listed as “Low priority”. I did say this wish list would start to grow more unrealistic closer to the end…
Variables
The sight of the word ‘variables’ may make some web designers shy away, but when you think of them applied to things such as repeated colours in your stylesheets, it’s easy to see how having variables available in CSS could be useful.
Think of a website where the main brand colour is applied to elements like the main text, headings, section backgrounds, borders, and so on. In a particularly large website, where the colour is repeated countless times in the CSS and where it’s important to keep the colour consistent, using variables would be ideal (some big websites are already doing this by using server-side technology).
Again, Less and Sass allow you to use variables in your CSS but, again, not everyone can (or wants to) use these.
If you are using Less, you could, for instance, set the font-family value in one variable, and simply call that variable later in the code, instead of repeating the complete font stack, like so:
@fontFamily: Calibri, "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
body {
font-family: @fontFamily;
}
Other features of these CSS compilers might also be useful, like the ability to ‘call’ a property value from another selector (accessors):
header {
background: #000000;
}
footer {
background: header['background'];
}
or the ability to define functions (with arguments), saving you from writing large blocks of code when you need to write something like, for example, a CSS gradient:
.gradient (@start:"", @end:"") {
background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
background: -moz-linear-gradient(-90deg,@start,@end);
}
button {
.gradient(#D0D0D0,#9F9F9F);
}
Standardised comments
Each CSS author has his or her own style for commenting their style sheets. While this isn’t a massive problem on smaller projects, where maybe only one person will edit the CSS, in larger scale projects, where dozens of hands touch the code, it would be nice to start seeing a more standardised way of commenting.
One attempt at creating a standard for CSS comments is CSSDOC, an adaptation of Javadoc (a documentation generator that extracts comments from Java source code into HTML). CSSDOC uses ‘DocBlocks’, a term borrowed from the phpDocumentor Project. A DocBlock is a human- and machine-readable block of data which has the following structure:
/**
* Short description
*
* Long description (this can have multiple lines and contain <p> tags
*
* @tags (optional)
*/
CSSDOC includes a standard for documenting bug fixes and hacks, colours, versioning and copyright information, amongst other important bits of data.
I know this isn’t a CSS feature request per se; rather, it’s just me pointing you at something that is usually overlooked but that could contribute towards keeping style sheets easier to maintain and to hand over to new developers.
Final notes
I understand that if even some of these were implemented in browsers now, it would be a long time until all vendors were up to speed. But if we don’t talk about them and experiment with what’s available, then it will definitely never happen.
Why haven’t I mentioned better browser support for existing CSS3 properties? Because that would be the same as adding chocolate to your Christmas wish list – you don’t need to ask, everyone knows you want it.
The list could go on. There are dozens of other things I would love to see integrated in CSS or further developed. These are my personal favourites: some might be less useful than others, but I’ve wished for all of them at some point.
Part of the research I did while writing this article was asking some friends what they would add to their lists; other than a couple of items I already had in mine, everything else was different. I’m sure your list would be different too. So tell me, what’s on your CSS wish list?
Comments
Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.
Got something to add? You can leave a comment below.
24/12/2010
I am not sure how efficient -moz-any() really is, when it comes to performance. I can think that it’s considerably less efficient than .title <h1 class=“title”>
Good thoughts around the typography.
calc() is my favorite.
For few of them, I am happy to survive without advanced CSS which shall makes things effortless, and might reduce the mark-up by a few KBs while making it look much cleaner. BUT cry so badly on the time of testing CSS performance. Although these are so tempting that I will not hesitate trying each one of them on personal websites.
Vote Helpful or Unhelpful
03/12/2010
Hey Inayaili, I’ve been using text-overflow:ellipsis a lot recently even more so with fluid layouts I do. I would really like to be able to chose x line ellipsis. I didn’t know that webkit have already dabbled at this. Going to have a play in the morning to see what support is like. Thanks.
Vote Helpful or Unhelpful
03/12/2010
I have been dying for some Generated Content implementation. Seems like both spec editors and implementors have forgotten about the awesome features of replaced content
Vote Helpful or Unhelpful
03/12/2010
I didn`t know about this moz-calc() and moz-any() stuff at all.
I`m with you wishing all those features to be massively adopted by the browsers soon :)
Vote Helpful or Unhelpful
03/12/2010
Great list. I personally would like a ‘full’ value for height. This could do what you would expect 100% height to do. Though I have to admit the CSS table stuff does this.
It would be great to have ‘//’ create comments for CSS too.
Vote Helpful or Unhelpful
03/12/2010
I’d like to have a pseudo-selector that can select the inner text node of an element. Like <code>::text</code> or something.
Vote Helpful or Unhelpful
03/12/2010
Thanks Yaili ~~ Very attractive wish list .
especially the calc perperty, I love this “100%height”;
Wish css could support the % height and width that could help us forget the table layout.
Vote Helpful or Unhelpful
03/12/2010
I’d like the ability to simply vertically align text in a block element.
I know we can cheat with table-cell but it just doesn’t feel right.
Vote Helpful or Unhelpful
03/12/2010
I agree with Inayaili … lack of good typographic control on a websites is a major shortcoming. Thank goodness we can now start to use webfonts with some confidence. It’s just layout which is lagging behind.
Great list. Thank you.
Vote Helpful or Unhelpful
03/12/2010
On my wish list would be
inherit: none;– a declaration to stop all inheritance on the given element – a bit like a locally appliedreset.css.This would enable you to create reusable modules that could be dropped into any page without needing to worry about how the page’s surrounding CSS will affect its display.
Vote Helpful or Unhelpful
03/12/2010
As for the calc() fuction, I believe the given example can be accomplished quite easily with simple css2.1. Usually a fixed-width float and a margin (same size, same direction) will do the trick.
One thing missing from the list (and on top of my own list) is more control over css background images. I would love to make better use of css sprites but until I can somehow dynamically crop a specific part of the image and only show that part css sprites are only useful in borderline cases. I try to make my css as flexible as possible, so hiding other parts of the sprite based on px values is not something I generally do.
Vote Helpful or Unhelpful
03/12/2010
I second Drew’s suggestion, but I fear widespread misuse.
People who don’t understand cascading will use it in every declaration.
Vote Helpful or Unhelpful
03/12/2010
I have frequent daydreams about the thought of variables in pure (non-JavaScriptified) CSS. Variables = tiny stylesheets.
Universal adoption of the Flexible Box Module would be high up on my wishlist too.
Vote Helpful or Unhelpful
03/12/2010
For me, I would want regular expression selectors, with backreferences available for use by the rules inside!
Vote Helpful or Unhelpful
03/12/2010
A mighty fine wish list you have there, and I am really pleased to see the amount of typographic wishes you have made. I know what you mean with dreaming about the < parent selector (I can think of a few instances where that could’ve been useful), but this would defy the cascade, and we would end up just calling CSS simply SS.
@Drew – inherit: none; Beautiful, that isn’t something I have thought about, but yes, that would be immensely powerful.
Vote Helpful or Unhelpful
03/12/2010
Great round up, Yaili :-)
The thing I have been wanting for ages is some kind of flexible font size control, much like the minimumFontSize property in XCode. This would allow much more flexibility when working with dynamic content, from a CMS or webapp, as well as multilanguage websites.
My second request has already been noted by Drew.
And I’d love some inset box shadows, as well as shadow knock-out beneath a box-shadowed or text-shadowed element.
Vote Helpful or Unhelpful
03/12/2010
Great list!
Variables and parent selectors are definitely my top requests.
calc() looks like a much better version of the old IE expression() rule, which was really a way of shoehorning JS into CSS and required JS enabled on the browser. It was messy, but it’s usefulness was there for all to see, so it’s great to see this being revisited.
I have yet to play around with LESS and SASS but it’s fantastic that they are innovating with stuff that will hopefully make it back into the CSS spec.
Vote Helpful or Unhelpful
03/12/2010
Always great to see forward-thinkers like Inayaili getting us involved in what ‘could be’, and possibly, ‘should be’.
There are a lot of proposed solutions here that would be an excellent time-saver for designs & developers, and it’s swallow the idea that even if some of these were to start being implemented into browsers, the adoption by the majority would take a long time.
But it’s a nice glimpse of what kind of new features CSS might adopt in future. Thanks, Inayaili!
Vote Helpful or Unhelpful
03/12/2010
This is a nice list with some good ideas, particularly font-size-adjust, calc() and variables.
I’d like to add, and reiterate JulienW’s comment: vertical alignment vertical alignment vertical alignment vertical alignment! I just can’t believe we are still having to contort ourselves so hideously just to get some vertical centering going on.
Vote Helpful or Unhelpful
03/12/2010
Have you seen LESS? http://lesscss.org/ it is a good way to integrate variables in you CSS code. (and saves you a lot of troubles)
Have a Merry Christmas and I hope your wishes come true!
Vote Helpful or Unhelpful
03/12/2010
Great comments, and great ideas, keep them coming! :)
@Kevin Dees — You can do that with Less now, not sure about Sass.
@Julienw — That’s a really good idea, it would make my life a lot easier.
@Drew and @Tom — Agreed, and agreed.
@Jordan — It has actually quite good support, surprisingly. I’ve started using it in projects where the audience is mainly web devs and designers.
@A.Nelia — Less is mentioned with great prominence in the article ;)
Vote Helpful or Unhelpful
03/12/2010
I definitely agree with the whishlist, and thank you for letting me know about the -moz-any() thing.
My #1 whish is something like -moz-any, something to reduce the duplication and amount of redundant selectors you have to write.
My #2 whish is to make the order in which classes are added to an element matter – to not ever have to use !important.
Vote Helpful or Unhelpful
03/12/2010
CSS variables are something I’ve been looking into for one of my new CSS projects. While researching I managed to dig up some interesting information (well, I thought it was) that I thought I’d share with you all.
There’s actually a draft proposal for a CSS Variables spec written by Dan Glazman (W3C CSS WG chair) and David Hyatt (Apple) that was published in 2008.
Apparently, this spec was implemented in webkit but was not enabled in the versions used in Safari or Chrome. Unfortunately, it looks like CSS variables were completely removed from webkit last month – hopefully this isn’t the end of them!
I also found an essay from a W3C WG memeber that highlights some of the negatives of CSS varaibles: Why ‘variables’ in CSS are harmful.
Personally, I like the idea of pre-defining data in CSS but I believe the term “variables” is incorrect. I think “constants” better describes their purpose since their contents cannot be programmatically modified once declared (using something like JavaScript)
Vote Helpful or Unhelpful
03/12/2010
Great list, lets home your wishes come true. :D
Vote Helpful or Unhelpful
03/12/2010
I’d like transitions to work on :before and :after. Also box-shadows to be able to be manipulated differently (eg: the curled shadows) would be brilliant for adding different shadow effects and being able to keep a fluid layout without it messing up.
Vote Helpful or Unhelpful
03/12/2010
I have been using Sass and Compass for one year and I never looked back. Sass gives you variables and calculation, compass has a number of abstracted mixins to deal with cross-browser implementations. It takes one line to get a cross-compatible css3 gradient.
Also, it compiles, so you can pass you css stuff to colleagues who don’t want to use sass.
I know some people see Sass as a ‘developer tool’ in a world of designers, but give it a try, your stylesheet will get shorter, faster to maintain and more optimized when loading.
Davide
Vote Helpful or Unhelpful
03/12/2010
what about a crossbrowser support of background-position-x and background-position-y? They would be a great improvement on complex sprite-based design
Vote Helpful or Unhelpful
03/12/2010
Great whish list and thank you for writing about moz-any() and moz-calc() as i did not know about.
Vote Helpful or Unhelpful
03/12/2010
1. A new height unit based on the number of lines of content.
Example:
element { min-height: 2lines; }
2. Define a section of a larger image and repeat this in the background.
Example: Image size is 200×200 pixel but I want to repeat just a 20×50 pixel (top left) section of it.
element { background-repeat: repeat(0,0,20px,50px); }
literally meaning…repeat(x-coordinate, y-coordinate, width, height)
Vote Helpful or Unhelpful
03/12/2010
One thing I’m looking forward to is more control over generated content.
A simple example of this would be:
input:invalid:after { content: ‘ invalid’; }
But we can use generated content on form elements :(
Vote Helpful or Unhelpful
03/12/2010
Here’s one thing you can scratch from your wish list: calc() is supported in IE9. Without a prefix. OK, you still can’t use it in WebKit, but I’m sure that’s only a matter of time.
Flexible Box is more problematic, unfortunately. Although implemented in Gecko and WebKit, there are a lot of inconsistencies between the two. Also, the W3C have just announced that the whole module is to be revised; there will be a lot of changes, not least that the names of all the properties will change. There was limited support for Flex Box in an earlier IE9 preview, but that’s been removed – probably because of the proposed changes. This is extra annoying because I just wrote an article about Flex Box for .Net magazine!
Vote Helpful or Unhelpful
03/12/2010
Nice list! I would also like to see a kindof “previous”-selector
You have like:
div.left.hideRight + div.right {
display: none;
}
I would like:
div.left – div.right.hideLeft {
display: none;
}
And maybe a “++” and “—” selector for selecting all siblings?
Kind regards
Vote Helpful or Unhelpful
03/12/2010
And what about something like this?
img[width>=150]{}
There are attributes that are integers, not just strings.
Vote Helpful or Unhelpful
03/12/2010
Nice list, though parent selectors would suffer from serious performance issues:
http://snook.ca/archives/html_and_css/css-parent-selectors
Vote Helpful or Unhelpful
03/12/2010
I would looooooooooooooove the CSS3 spec of the attr() function to be adopted. There is so much potential here. There isn’t enough clamor going on about it.
See my post about attr()
Vote Helpful or Unhelpful
03/12/2010
Good, non-hack vertical alignment.
More precise letter-spacing control.
Great article. Well said.
Vote Helpful or Unhelpful
03/12/2010
As Jamie said, the calc() method seems very similar to the MS expression() rule. But besides the fact that it was vendor-specific, it’s advised not to use it because it’s a horrible performance drag.
For MSIE, the expression was evaluated every time the browser was resized and every time the mouse moved in the browser window. Avoiding the use of these epxressions made Rule #7 of Yahoo’s High Performance Web Site Rules (http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_6/).
Do we know what kind of performance drawbacks -moz-calc() brings?
Vote Helpful or Unhelpful
03/12/2010
Nice article, but there is an error on the section about -moz-any. The correct selector should be:
-moz-any(section, article, aside, nav) -moz-any(section, article, aside, nav) h1 { font-size: 24px; }
Vote Helpful or Unhelpful
03/12/2010
One of the things the designers I work with bring up time and time again is typography widows. In this I mean the times when a single word is left in a paragraph or heading. Would be nice to control this better without using some JavaScript hack (such as adding between the last two words).
Note: CSS widows is something quite different and controls page breaks when printing.
Vote Helpful or Unhelpful
03/12/2010
Nice article!
I would like to add mine: blend modes in CSS. I use blend modes a lot in Photoshop (and I know I’m not the only one…) and I would love to be able to apply them in CSS.
Something like:
div { blend: multiply; }
Or even better: applied on other properties:
div{ background: #333333 no-repeat multiply; }
or p{ text-shadow: #333333 0px 3px 3px screen; }
What do you think? It might save even more resources and we would be able to make even more things with CSS
Vote Helpful or Unhelpful
03/12/2010
I wouldn’t mind a “float: center;†to compliment left and right.
Also, I’ve had a few times where I wished that css could do simple math that looks a bit like this: “width: 100%-.5em;†(when used with a .25em border). That would allow greater control of the box, especially if the margin is set to “0 auto†for centering.
Vote Helpful or Unhelpful
03/12/2010
Heya, Tab Atkins here, member of the CSSWG. Allow me to address each of your requests, arbitrarily reordered to suit my whims:
* CROSS-BROWSER IMPLEMENTATION OF FONT-SIZE-ADJUST
* CALC
* INDENTATION AND HANGING PUNCTUATION PROPERTIES
* TEXT ALIGNMENT AND HYPHENATION PROPERTIES
* IMPLEMENTATION OF THE ::MARKER PSEUDO-ELEMENT
These are all pretty much a matter of time. All of these properties will move through the standards process and be implemented as browser vendors decide to pay attention. So you don’t have to take any particular action, except maybe to bug (with actual bugs, like in their bug tracker) browsers to implement the ones you care about most.
* MORE CONTROL OVER OVERFLOWING TEXT
This is an area where we could really use some use-cases so we can figure out exactly what controls are needed. If you could produce some pictures or samples or whatnot where you would really have liked some auto-generated ellipses, it would be great if you could send them to the www-style@w3.org mailing list.
(It’s also a spec that needs more editor attention – CSS3 is kinda big and we don’t actually have enough editors to work on all of it at once, unfortunately. But it’ll be done eventually.)
* SELECTOR GROUPING WITH -MOZ-ANY
* PARENT SELECTOR
Both of these should show up in Selectors 4, once someone has enough bandwidth to write the spec. I’m pushing for the latter to be a :has-child(selector) pseudoclass.
* MORE CONTROL OVER STYLING FORM ELEMENTS
Tantek is back at Mozilla and has picked up his former editorship of CSS3 UI again. Better control over styling form elements is explicitly one of his goals for CSS UI 4. Expect some stuff to start showing up in this area in the coming year.
* FLEXIBLE BOX LAYOUT
I and Alex Mogilevsky (from Microsoft) are working on a minor rewrite of this spec right now to take it slightly further away from its XUL roots and make it slightly more useful within the context of modern webpages. After that, expect to see more implementations showing up. Fun!
* NESTED SELECTORS
* VARIABLES
Here at Google we’ve got a group putting together a new experimental implementation of variables, along with mixins, namespaces, and selector nesting. That’s why Webkit’s previous variables implementation was removed last month – it was just some cleanup at the start of the project. A spec proposal for the CSSWG should be following soon.
* STANDARDISED COMMENTS
As you say, this isn’t really a CSS issue. We just need a tool to show that adding metadata in a standardized form to your CSS files is useful, and then for that tool to become ubiquitous. Something like Doxygen.
Vote Helpful or Unhelpful
03/12/2010
Per your request for variable font-family font stacks. You know you can just use the @font-face property and list your font stack as local() options. Check it out: http://pastebin.com/Z24bjxRX
Vote Helpful or Unhelpful
03/12/2010
The :any pseudo class, variables and CSS3 macros are implemented in my CSS pre-processor CSS Crush
I use on all the sites I work on now. Makes writing CSS a much more pleasant experience!
Vote Helpful or Unhelpful
03/12/2010
It’s a good article and there have been lots of quality response as well.
I, too, can’t wait for implementation of the calc() function in Webkit.
One thing I’d like to see is greater control of list images (and perhaps some more border styles – why so few?)
Vote Helpful or Unhelpful
03/12/2010
The Flexible Box Model just blew my mind. I’ve been looking for something like that for YEARS.
Vote Helpful or Unhelpful
03/12/2010
Nice read. I am sad to see how many readers did not know about the stuff Mozilla is pushing.
Open Type Font features is another one that deserves mention.
http://hacks.mozilla.org/2010/11/firefox-4-font-feature-support/
I suspect designers have an Apple bias that makes them overlook stuff not coming first in Safari.
A small nit:
-moz-any(section, article, aside, nav) h1
Should be:
-moz-any(section, article, aside, nav) -moz-any(section, article, aside, nav) h1
To be functionally equivalent to the other example.
Vote Helpful or Unhelpful
03/12/2010
Lars:
I don’t necessarily agree with that – there’s a lot of support for Firefox. I think it’s simply that Mozilla aren’t as good at communicating the cool stuff they’re doing.
Vote Helpful or Unhelpful
03/12/2010
I think that the absolute best improvement that could be made to CSS would be a way (a syntax) to specify how a browser should behave when a style is applied.
While some might argue that CSS shouldn’t describe behaviour, this would effectively allow us to get rid of the countless ugly JavaScript hacks used in 99% of the websites out there.
Vote Helpful or Unhelpful
03/12/2010
We’ve corrected the @-moz-any()@ example – that was a production mistake, sorry folks. It was correct in Yaili’s original submission.
Vote Helpful or Unhelpful
04/12/2010
Tried to make a comment yesterday but something must of went wrong. Looks like Tab did a much better job of some of the things I was going to say.
Back in 2008 they did have some examples of CSS variables in a nightly build of webkit (since been removed as Tab said above).
calc() support is also in IE9 but without a vendor prefix which is an incredibly stupid move by MS (hopefully they correct this to atleast -ms-calc before stable release), it only supports very basic CSS units at the moment (px and ems but not % etc). I did a demo a while back when playing around with it, should work in IE9.
Vote Helpful or Unhelpful
04/12/2010
Great list. Thanks for this.
As for variables // I tend to use a general class for colors and utilize this inside the HTML file.
Specifically speaking —
CSS:
.politics {background:#d90000;color:#fff;}
.sports {background:#430000;color:#fff;}
.header {width:100%;height:140px;}
HTML:
<div class=“header politics”>
NEWS
</div>
<div class=“header sports”>
SPORTS
</div>
This way I make use of the URL by dynamically parsing elements into the class attribute. Which is not possible to do inside the CSS file.
In other words:
<div class=“header {segment_1}”>
SPORTS
</div>
Where {segment_1} would be /SPORTS/ right after http://domain.com/
(BTW Expression Engine is my weapon of choice)
This works for me quite nicely, and I can change selector values very easily.
////
Cheers for the great post and your awesome wish-list : )
Valon.
boldUnderline.
Vote Helpful or Unhelpful
04/12/2010
True fact: if you pick up Yaili, turn her upside down and give her a shake, css falls out…
Great article. My personal wants: hanging-punctuation, calc and a parent selector.
Interesting to note the number of typographic wishes. CSS has obviously come a long way in the last year or two on that front but still has some way to go. Great to see Tab responding too.
Maybe one day we’ll be able to use a word processor to style our content and have a ‘save to web’ option… oh hang on, wait… ;)
Vote Helpful or Unhelpful
04/12/2010
Voor CSS variables and Nested selectors I use xCSS.
Vote Helpful or Unhelpful
04/12/2010
“CSS compilers such as Less or Sass let you do this already, but not everyone wants or can use these compilers in their projects.”
I’m not sure “can” should be part of this sentence. SASS comes as a Ruby gem and can run on any OS. So unless your paranoid IT department refuses to install Ruby on your machine, there’s really no reason you can’t use it.
Vote Helpful or Unhelpful
04/12/2010
Whenever I see mentions of variables and functions in CSS, the use cases for them appear to be identical to a #define in C rather than a genuine variable or function. In other words, what CSS authors are asking for are macros, not variables or functions.
In that case, this problem has already been solved with LESS. You create your macros as a less file and then, just like in C, compile it into a format the browser understands.
This, to me, looks like the ideal implementation and is superior to integrating that functionality into CSS itself. Otherwise, we push the burden of compiling onto the server on each page request or, even worse, the browser itself. You might not think of it as compiling because it is handled for you, but that is what would happen.
Vote Helpful or Unhelpful
04/12/2010
There is a way to get star rating control form elements:
trac.webkit.org
On Mac OS X, WebKit provide multiple built-in appearances for <meter>.
-webkit-appearance: continuous-capacity-level-indicator; (Default)
-webkit-appearance: discrete-capacity-level-indicator;
-webkit-appearance: relevancy-level-indicator;
-webkit-appearance: rating-level-indicator;
Vote Helpful or Unhelpful
05/12/2010
How about the ability to comment out single lines of code by just using two slashes “//” like in JavaScript and several other languages?
Vote Helpful or Unhelpful
06/12/2010
Thanks Inayaili. This list chimes so many times with my own. It’s no surprise that…
As Gerry McGovern put it…
I’ll also second Adrian Westlake’s point about line length balancing/adjusting, especially for headings. Adrian (and others) calls it typography widows. Maybe we need another term to distinguish ‘widow’ from its traditional sense of short lines at the top or bottom of a column. Whatever we call it, we shouldn’t have to resort to JavaScript hacks like Dave Cardwell’s jQWidon’t, adapted from Shaun Inman’s WordPress plug-in.
Vote Helpful or Unhelpful
06/12/2010
Very nice Yaili! I’ve recently used text-overflow in my latest project and although it’s not the most ground-breaking of implementations, it adds a nice little touch to a layout.
My only wish would be for webkit to fix their meter display, as it’s broken some of my sites.
Vote Helpful or Unhelpful
06/12/2010
Nice list!
The top things in my wishlist would be:
* CSS3 attr() implementation (attr() in CSS3 does so much more than in CSS2: http://www.w3.org/TR/css3-values/#attribute)
* Cross browser calc() implementation
* Allowing CSS functions like attr() and counter() in calc(). I wrote a blog post on this a while ago: http://leaverou.me/2010/09/on-attr-and-calc/.
Vote Helpful or Unhelpful
06/12/2010
A thought provoking article and some really interesting comments – thanks.
My favourites:
@drew’s suggestion of inherit:none.
Superior control over text – particularly hypenation and justification (As discussed here but without javascript – http://www.alistapart.com/articles/the-look-that-says-book/)
I’d quite fancy a text stroke
and maybe a text pattern fill where the solid fill of the text is replaced either by a pattern – or even – negative space! – oh to dream :)
Variables were high on my list but I’m probably going to have to consider the use of SASS after the insightful comments by @Rupert.
Vote Helpful or Unhelpful
06/12/2010
I’d really love to be able to apply blending modes to transparencies via CSS.
A few simple, often used animations which don’t require lots of parameters would be nice too. Like the default jQuery animations?
I think most of my wishes have been covered, it was fun thinking about the future, I hope these wishes become feasible and not just dreams.
Vote Helpful or Unhelpful
06/12/2010
Don’t forget CSS gradients on text.
That, on its own, would create world peace.
Vote Helpful or Unhelpful
06/12/2010
The < selector would be really great, but I think this will never (I mean not in the next 10 years) happen, because of the way browsers render the css file. :-(
Vote Helpful or Unhelpful
08/12/2010
@Rupert: No, there are actually very good reasons to want proper variables rather than macros. Javascript access, for one. Why should it be easy to set up a var(header-color) in your stylesheet and change it in the CSS, but not in javascript?
Plus, proper variables usually imply the familiar last-wins semantics of CSS, which we like.
Vote Helpful or Unhelpful
08/12/2010
Vendor prefixes irk me. I understand why they’re useful, but I think it would be great to be able to tell a browser that you trust it’s implementation of a particular property. E.g.
@browser {-moz-trust: border-radius, linear-gradient;}
Then you’d be able to use the standard declaration.
Vote Helpful or Unhelpful
10/12/2010
Of this list, I would most like to see calc() and the parent selector.
Vote Helpful or Unhelpful
10/12/2010
calc(), parent selector and variables are my favorites
Vote Helpful or Unhelpful
11/12/2010
Most of the time people request a parent selector, it turns out they could have easily solved their problem in a different (CSS) way. Maybe that’s why nobody seems to listen to them.
Just yesterday I stumbled upon a great use case for the parent selector. Suppose you’ve got the following markup. (Which, in my opinion, is the only right way to mark up forms while being able to style them in every way you like. Tables? Definition lists? Ha!)
<div class=“form-row”>
<label>Name:</label><input type=“text” name=“name” />
</div>
Now, if you want to highlight the label along with the input itself when the input has the :focus, you can only rely on JavaScript.
In this case, it would be great to have something like input:focus < .form-row { … }
Maybe the problem is that selectors generally don’t allow parent elements to sit on the right of a child (Some CSS1 grammar stuff you can’t take back or something..?). That’s not an excuse; in this case, you could do the same thing with a pseudo class: .form-row:contains(input:focus) { … }
Is there anything on the W3C mailing list about this topic?
(BTW I haven’t read the other comments.)
Vote Helpful or Unhelpful
11/12/2010
Brilliant list. Loving it.
Vote Helpful or Unhelpful
13/12/2010
I can perfectly live without all of this (maybe the calc looks promising), but i miss very often floating to bottom (e.g. something like: float:bottom-right; Or even better some way to set position absolute, so that it would not be “removed” from the block, but i could position it anywhere and the text (and anything else) would wrap around it
Vote Helpful or Unhelpful
13/12/2010
There are some good mentions of stuff that would be really useful (from everyone[nested selectors, parent selectors, blending/gradients, better text controls]).
It’d be good to see some actually become part of the CSS spec.
I’d like to have:
- Better Selectors/Nested Selectors
- Cross-browser: text rendering & effects
- Browser Selectors
ie-6 #wrapper #header { …
moz-4 #wrapper #header { …
webkit #wrapper #header { …
I’ll have more ideas soon
Vote Helpful or Unhelpful
13/12/2010
Wouldn’t it be nice to be able to have some control over individual words, or even letters in a block of text?
I suggest the following syntax:
h1:nth-word(X) {property: value;}
h1:nth-word(X):nth-letter(Y) {property: value;}
Anyone with me on this?
Vote Helpful or Unhelpful
14/12/2010
Props Inayaili, this was a great read. Calc(), parent selectors and variables are my top three from this list, although font-size adjust would be nice, too. Typographic control has come a long way in the past few years, so it’d be great to see this trend continue!
Vote Helpful or Unhelpful
23/12/2010
Mozilla has a nice pseudo-class :-moz-only-whitespace that matches an element that is empty or contains only whitespace. CSS3 does have an :empty pseudo-class but it must be empty of all DOM nodes, include text nodes. I’m sure every designer has come across a need to destroy nicely nested and organized HTML to wrestle white space in empty nodes — it’d be nice if Webkit et all followed suit and it got into the standards.
Vote Helpful or Unhelpful
Impress us