What do you want from CSS3?

have your say to help them prioritise

[SuzyUK]

Tell the CSS WG what you want from CSS3 [webstandards.org]

The CSSWG plans to discuss its charter at our next face-to-face meeting in March. If groups like CSS3.info, the CSS Eleven, and the WaSP and/or individuals like Jeffrey Zeldman and Eric Meyer could organize a collectively-written list of priorities and submit it to us before then, we could take that into account when writing our charter for 2008+.

also see: css3.info [css3.info]

Note that they are not looking for feedback on syntax, and would like you to try to check the latest draft modules to see if your proposal is already possible. What they are looking for is for people who use CSS extensively to let them know if there is some functionality that is missing, and would be useful, but is not in current specs.

[vincevincevince]

I'm afraid the only thing I want from CSS3 is browser support. That means all parts of CSS3 (required and optional) being fully supported in all major browsers (at the least: IE6*, IE7, Firefox, Opera, and Safari). Come to think about it - if they kept CSS3 the same as CSS2 but got it supported - that would be a really brilliant thing. Maybe trademark CSS3 and restrict its use only to fully supporting browsers.
* Unless Microsoft forces upgrades to a CSS3 IE7

[lavazza]

css3.info/let-the-css-wg-know-what-you-need-from-css3/
»
soapbox.css3.info/
»
Hixie's Natural Log 2007-06-06 08:21 UTC [ln.hixie.ch]

The CSS working group is irrelevant

The CSS working group right now is chronically dysfunctional, as most close observers have noticed.

<snip/>

Anyone (literally anyone) can post to the WHATWG blog... <snip/>

The CSS working group, on the other hand, has been discussing how to set up a blog, and what the first entry should say, and what tool to use, for over two months! Nearly every phone call (the group has weekly teleconferences) for the past nine weeks has had the blog discussed at some point.

The blog was finally made available last week. To post, you have to be a group member. The first post can be summarised as follows: the CSS working group members don't want to bother going out of their way to get feedback on their specs; instead, people should post their comments on CSS to the public CSS mailing list (despite the fact that most CSS working group members aren't subscribed to this list).

:(

[SuzyUK]

Not sure about the whole Hixie/CSSWG fallout story yet.. but

• 1. Ian's proposed solution in that post, to help, is for WhatWG [wiki.whatwg.org] to set up a subproject :o - fwiw I think CSS outgrew being a 'subproject' a long time ago and I think WhatWG are way too busy arguing over HTML5 ;)

• 2. his apparent disillusionment with the CSSWG has led to positivity within the existing group, encouraging them to open up their channels of communication source [lists.w3.org]

• 3. Hixie already admits he had to "bail" on CSS due to his work for Google on HTML5, so I applaud him for getting the existing group to take heed regards "becoming irrelevant" however I would have grave reservations that he could give his time to make sure WhatWG would handle it any better at this time.

• 4. as the quote in the original post excerpt shows, the 'open channels', CSS3.info, CSS11 and WaSP seem to be a very useful mix of the right people when it comes to CSSWG getting feedback from real world, respected users..

• 5. I think they're listening now..

All I'm really sure of is that I want CSS3 to progress, I don't want to get bogged down, arguing about the past nor contribute to any present "tit for tat" that is still going on, at least not in this thread

edited for speeling!

[edited by: SuzyUK at 6:03 pm (utc) on Jan. 21, 2008]

[adwatson]

I don't really follow new standards development until they're actually out and implemented by the browsers. But one thing I always though would be handy would be ability to assign images to the different borders in the box model - would make doing rounded corner type boxes a lot simpler.

[MatthewHSE]

I'd like to be able to assign margins that wouldn't interrupt the flow of the document. Something like this:

img.offset {
float: right;
margin-right: 200px;
margin-type: wrap-around;
}

The idea being to allow an element to be positioned a specified distance from the edge of its container, while allowing other page elements, including text, to flow around on both sides.

The effect could also be included on elements with

position:absolute

applied, maybe with a

flow:insert

property or something like that.

float:center;

would be nice too.

CSS3 already supports columns, right?

Any guess on how long it will be before we can use this stuff in the real world? ;)

[Jon_King]

A second vote for float:center;

[gaouzief]

multiple background images on one element, with layeing order (z-index for backgrounds), opacity and merging options (much like photoshop's layers)

div{ 
 background:url(someimage.png) 1 merge; 
 background:url(someotherimage.png) 2 density; 
 } 

[sgietz]

Me three for float:center. I'd also like to have rounded corners. That would make life so much easier.

[Murdoch]

How about a vertical-align property that actually works...

[limbo]

an anchor based sub syntax for linking one part of a stylesheet to another - to make navigating large style sheets easier.

[MatthewHSE]

an anchor based sub syntax for linking one part of a stylesheet to another - to make navigating large style sheets easier.

Care to elucidate on what this would look like? I don't think I understand what you mean, but it sounds intriguing!

[lavazza]

All I'm really sure of is that I want CSS3 to progress, I don't want to get bogged down, arguing about the past nor contribute to any present "tit for tat" that is still going on, at least not in this thread

Indeed... and I apologise, esp to you Suzy, if my previous post threatened to derail this thread

I have followed a few links and get the impression that the process (of soliciting feedback, requests, ideas etc.) seems rather fragmented, and I have yet to find ONE forum that looks like its going to be the VHS to the many other BetaMaxs out there...

I'm looking because my CSS knowledge is lacking in both depth and breadth and I suspect that most things on my wish-list are EITHER totally impractical OR they have been/are being considered and expressed much more coherently by others... I just want/need to find where that's happening

Anyhoo... whilst I'm here... my wishlist:

• A validator that can parse an HTML file with a variety of external CSS files (of various media types) and report errors and/or warnings re possible 'conflicts' (e.g. simple issues like colour contrast, and more complex issues like cross-browser/platform 'bugs')

• The ability to declare global and/or local variables, e.g.
  

  var color myCol1 = #F00; 
  var color myBG1 = #FF0; 
  

  that could then be used in 'regular' class declarations with or without more attributes, e.g.
  

  #header{ 
  color:myCol1 ;  
  background: myBG1; 
  } 
  #footer{ 
  color:myCol1 ;  
  background: myBG1 + url(../images/myImage.gif) right repeat-y; 
  } 
  

Told I don't know much about CSS!

Oh, and I fourth (or whatever the count is by now) float:center;

-----------
ETA: one more for the wishlist... English spellings for colour, centre, etc

[MatthewHSE]

lavazza, you can probably already get the behavior you want from global "variables" by setting your CSS files to be parsed for PHP. That said, it would be nice for CSS to support that kind of thing natively.

[edited by: MatthewHSE at 9:54 pm (utc) on Jan. 21, 2008]

[swa66]

I'm 100% with vincevincevince:

Find a way to force browser vendors to implement each little bit of *whatever* spec.

E.g. by trademarking the term+logo and make them sign a contract where they have to support it -or else- in exchange for the right to mention the name.

Make sure the -or else- is big enough that Microsoft and the like would actually care.

[explorador]

What about a "copyright" tag? So, no javascript or layers over the text to avoid being copied. Just a tag that makes THAT text unavailable to the clipboard? I guess it will involve browser support. Or replace the text by ****

Yes I know... but at least we make things harder to those people stealing our content or just copying it for their school homework. :)

[SuzyUK]

lavazza,
no worries and no need to apologise. Going by the quick scan I did for that bulleted info, I do think it might make for another interesting thread sometime soon. There is so much more going on, time to kick out the inertia cobwebs and pay some attention though as something definitely seems to be stirring in snoozy CSS-Land

Yes it's fragmented but at least the doors are opening and the feelers are out and I think the consensus is that they'll collect the initial feelings and information on WaSP , which "fantasai" from CSS-WG will collect, indeed she's been actively participating in the WaSP thread already.

I *think* on further reading of what might happen is that the CSS-WG are possibly looking push for some kind of interim solution. CSS3 is completely modularised and some of those modules will likely never see the light of day, at least in their entirety. However because it is modularised, a single module can be brought to Candidate Recommendation without the whole of CSS3 needing to be ready (very wise!)

However I think another stage, which they're realising?, is that parts of the modules could be, indeed have been (by some browsers) implemented because they're useful already without the whole module being at candidate recommendation stage. e.g. the

border-radius

property which is part of the backgrounds and borders module [w3.org] (it's the one that does the rounded corners, sgietz - supported in Firefox and Safari 3)

incidentally gaouzief, Layering Multiple Background Images [w3.org] and Border Images [w3.org] are also part of that module. Border Images only has support in Safari currently, and multiple backgrounds in Safari >1.3 and Konqueror

I think if they find out from users what is required now, or if they've missed something and make a priority list if you like, it will help them provide a clear summary of what is wanted/needed, and if that "what" is ready, those guidelines could be prioritised and cleared for implementation which would enable the browser manufacturers to implement them, even if under their own namespace, in their next release or two.

I hope anyway..

CSS3 already supports columns, right?

Yes and Mozilla and Safari 3 have implemented it - see preview [css3.info]

float: center.. interesting, I can't find anything about it, though Matthew would that not also be achievable with that proposed :offset and wrap-around idea. I presume you would be looking to wrap text around both sides of said center floated element?

perhaps Floating between columns [w3.org] (Part of the multi column layout module) is an answer.. or could be one to mock up and post to that WaSP thread.

Any guess on how long it will be before we can use this stuff in the real world?

hehe no idea.. but you can use some of it already and my favourite idea would be to use it to death when and where you can, encouraging the browser makers to implement it and then shout for the W3C to standardise - it's the only way we're likely to see wider adoption of it.. bit like CSS2 really ;)

[carsten888]

wauw, I am positively surprised that I find just about everthing I wished for in a new CSS-version is in the above posts!
So glad to find that fellow front-end-developers notice the same shortcomings.

already mentioned:
-renders in all css-3 browsers IN THE SAME WAY
-vertical align in div's
-float: center;
-multiple background-images

may I add:
-renders solid and relative width on block-level elements when floating next to each other. so you can have a column layout with columns with fixed width and columns with width in ems or %. (don't reply like "but you can do it like this...", I know, it can just be made soooo much easyer)
-more fonts! I know that does not have much to do with the actual css. Nowadays it all depends on fonts installed on the client, maybe with css3 fonts don't nessisarily have to be stored on the client. Of course this might lead to security-risks when hackers put malitious code in font-files. anyway...more fonts!
-full support for selectors! in css2 there is loads of good stuff, but its just not supported. see [css.maxdesign.com.au...]
A selector I would love to see is to select the first li in a menu-list, so to style it different then the other menu-items. same for the last li.

I can go on and on, but I realize a lot has to do much with how browsers render things. In HTML5 a lot of thing will change. see:
[#*$!.com...]
on a list apart search for html5

[Rosalind]

already mentioned:
-renders in all css-3 browsers IN THE SAME WAY
-vertical align in div's
-float: center;
-multiple background-images

I'm going to add to the tide of people asking for the same things. Plus another vote for gradient colours.

In particular I'd like to see more consistency in the way spacing between elements and font sizing are handled.

I will say, however, that I hope CSS3 doesn't go overboard in complexity. There's no point in proposing a standard that the browser manufacturers are incapable of supporting, and they have already proven to be inconsistent in the way CSS 1 and 2 have been implemented.

[ChrisBolton]

I agree with 'float: center;'

Also wouldn't it be great if we could:

div {
background:url (topLeft.png) no-repeat top left;
background:url (topRight.png) no-repeat top right;
background:url (bottomLeft.png) no-repeat bottom left;
background:url (bottomRight.png) no-repeat bottom right;
}

Just two for now, I will be back with the rest later!

[Clark]

How about if there was an easy way to emulate tables in the stylesheet? It is bloody easy to make things look good with a table. Background colors expand properly. Alignment happens correctly. The only "bad" thing about it is that you specify those details on the (x)html rather than the stylesheet and tables are officially for tabular data.

Why there isn't yet an easy way to handle the same thing w/ CSS is beyond me. People would actually start using CSS in droves if it wasn't so damn hard to get a decent looking layout w/o getting a degree in CSSology.

And of course, let the advanced stuff still exist for those who want to move an arrow.png a pixel to the left, with a right margin of 2px and a top dotted medium border.

[HelenDev]

I'd like to add my votes to these items already mentioned:

Rounded corners
Columns
Gradient and opacity colours
Multiple background images

I also like MatthewHSE's idea...

The idea being to allow an element to be positioned a specified distance from the edge of its container, while allowing other page elements, including text, to flow around on both sides.

It would be nice for example to be able to position a footer always at the bottom of the page but to never allow it to overlap the relatively positioned content in the main part of the page.

[SuzyUK]

If you don't mind me asking, those of you want float:center, what would you actually use it for?

I've never really felt the need for it, but am not averse to finding out a reason where or why it might be useful

It would be nice for example to be able to position a footer always at the bottom of the page but to never allow it to overlap the relatively positioned content in the main part of the page.

may I add:
-renders solid and relative width on block-level elements when floating next to each other. so you can have a column layout with columns with fixed width and columns with width in ems or %. (don't reply like "but you can do it like this...", I know, it can just be made soooo much easyer

OK won't reply then.

...I lied... you are right it seems there is an easier plan - no floats involved! - under construction in the draft under Advanced Layout Module [w3.org] - The idea is you segment your page into "slots" - header, footer, nav, content, as many as you want in grid/table like layout.. you can then actually place them into the layout grid as if they were absolutely positioned only in this model it will not remove the slots from the flow (like Absolute positioning does) it will make up the grid as if row/column spans existed and will stretch heights to fit so slots don't overlap each other.. ideal for any layout you could possibly think of really. It would solve sticky bottom footer problems too and source code could be in any order you like.

PS: even if you don't read it all (it's draft anyway) the images at the top of that page should give the idea.. Though I have to be honest and say I don't think we'll see this particular module any time soon! I fear the table properties will be (ab)used before then ;)

Oh how cool would that calc() function be, I hadn't seen it before, that would be good if it came in soon, IE can do that already with a CSS expression.

ooohh.. Imagine the table properties (come on IE8!) with the calc() function.. that would solve a lot of these 100% height, full length column layouts already even without the advanced layout module!

[rebelde]

My wish is that CSS3 be expressed in code or pseudo-code, not words.
That way web browsers will create a consistent implementation (by copying the code).

[HelenDev]

Advanced Layout Module

Nice :)

[Dabrowski]

Multiple background images? Why don't you guys just flatten an image and use that?

I'm definately for rounded corners, right on for columns, well said Murdoch for a vertical align that actually aligns things vertically. Yes, yes, I know we're supposed to be able to use

display: table-cell;

but nobody does because of IE, and why should only a table cell be allowed to have vertical align?

But I can't believe nobody has mentioned the almost infinately asked about height control?

I'd like a choice of box model - so I can use height 100% and have padding without forcing it off the screen. If not that, multiple declarations of dimensions would be nice, like:

myDiv { 
width: 100%; 
width: -20px; 
padding: 0 10px; 
}

You get the idea?

[LoganFoster]

Another vote for proper vertical alignment and float: center.

[ronin]

I don't mean to come across as ignorant but how would:

margin: 1.5em 0; float: center;

be any different from:

margin: 1.5em auto;

?

Do I misunderstand what you guys mean by float:center;?

If it's not already included, I'd love to have drop-shadows behind photos (yes, very 1990s, I know...)

Here's quite a full drop-shadow (80% intensity), 1em wide, 0.2 ems short of the top and left-hand borders of the image, on a blue background and hence quite a dark blue in colour (#003).

img .photo {drop-shadow: 1em 0.2em 80% #003;}

Any good?

[HelenDev]

Multiple background images? Why don't you guys just flatten an image and use that?

Like ChrisBolton said

div {
background:url (topLeft.png) no-repeat top left;
background:url (topRight.png) no-repeat top right;
background:url (bottomLeft.png) no-repeat bottom left;
background:url (bottomRight.png) no-repeat bottom right;
}

If you want to have fancy edges or corners to a box there's currently no way to do this easily.

[Dabrowski]

Oh I see, wouldn't this be covered with the new border attributes, with rounding and images included?

I thought they were doing something like:

myDiv { 
border: 1px solid red; 
border-rounded: 10px; 
}

Or

myDiv { 
border: 10px solid red; 
border-tl-image: url( 'tl.gif'); 
border-tr-image: url( 'tr.gif'); 
border-bl-image: url( 'bl.gif'); 
border-br-image: url( 'br.gif'); 
background: red; 
}

I'm sure I read somewhere a while ago that that was going to be included?

Anyways, that's what I had in mind for borders, hence no need for multiple backgrounds, but as long as they do one way or another I'll be happy.