Working together for standards The Web Standards Project

The W3C’s CSS Working Group charter expires on 1 July 2008, so the group will be discussing its revised charter in March this year. Fantasai, an Invited Expert in the group, has put out a call for web professionals to help the working group prioritise its work:

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

Source

I’d like to use the comments below to collect your feedback so that fantasai can take it back to the working group. It’s possible that some (or all) will be subsequently imported into a wiki on css3.info for further public discussion, with full attribution of course.

If your comments are very long, require HTML or example screenshots, please post a link to an entry on your own website—the aim is to get a single place for the working group to look at.

The CSS working group’s charter

The charter defines and limits the scope of work the CSS working group is expected to pursue, its deliverables and a timetable. It also defines the logistics of how it operates, how often it meets, and whether it’s public or private.

There’s been a lot of debate recently about whether the current charter is adequate. The CSS Working Group read those, but in order to focus on the work of the group (rather than meta-issues like its constitution), I don’t want to re-open that discussion here; if you have something that hasn’t already been said about the constitution of the CSS working group, please comment on those discussions.

The timetable

The charter contains a list of CSS3 modules and their relative priorities. Remember, this list is from the expiring charter, and indicates the intentions and priorities as of 1 July 2006. (You can see the current statuses in the current work.)

The working group seeks feedback on whether those priorities are correct. Please indicate which features are most important to you, with any explanation you can give to help the group understand the different priorities of various sectors of web professional work.

For example, I’m an accessibility wonk, and I work with public sector organisations, so my emphasis is (by priority and by talent) on the information rather than the aesthetics. So, I can live without the borders module, but I’m very interested in the advanced printing options specified in the Generated Content for Paged Media module so that the large consultation documents and reports that I publish can be more
user-friendly and I can avoid having to dual-publish information in print formats (e.g., Word documents or PDFs).

Your experience will certainly vary—so please tell the working group what you need, and why.

Do you have a new idea for CSS 3?

What do you think should be added to CSS? This is your chance to let the working group know what’s missing. Feel free to link to your own blog with mocked-up screenshots: whatever you need to get the point across.

Fantasai told me

What we really need is to understand what problem needs solving and some idea of how people would like it solved. If someone’s proposing a solution, we need to understand why they’re framing the solution that way—so if we need to flesh out details or design a different solution we can understand what capabilities are important.

… If we can understand what the author is really trying to do, then we can design a feature that makes that possible. If it’s just a list of disconnected features, we won’t be able to identify with the author’s goals and then it’s likely we’ll either misunderstand what they want or not find it compelling.

The definition of the problem is by far more important a suggested solution or syntax.

As an illustration, I propose a new pseudo-element which I called ::line-break. There may be lots of good reasons why this might be bad syntax, but I don’t care whether the syntax is adopted. I just want a solution to the problem I define—that of styling to differentiate between an author-coded line break and one that the browser has inserted (very important if you’re reading poetry or code—see my “What I want from CSS3″ blog entry).

I should point out that there is no guarantee that you’ll get what you want; both the CSSWG and the browser developers have limited resources, so can’t do everything. For example, many people would like parent selector, but this is repeatedly dismissed because it’s too processor-intensive and because it breaks incremental rendering (although whether these are legitimate objections is another discussion).

Fantasai adds

What we work on first is based also on how complicated something is, how much prior work we can leverage, and sometimes other concerns that aren’t as obvious to web designers, like interoperability, accessibility, and internationalization. We know we haven’t been doing very well prioritizing our work or getting web designer feedback, and we want to do better, but practical issues will always be a factor.

Whatever your interest in CSS, here’s a real chance to influence the development of the language. So let’s do it: tell them what you want – what you really really want.

Polish translation by Sebastian Snopek

Your Replies

#1 On January 18th, 2008 2:52 am Bruce Lawson’s personal site  : Tell the CSS WG what you want from CSS3 replied:

[...] So at the Web Standards Project we’re collecting such a list of priorities. Thinking caps on, if you please. [...]

#2 On January 18th, 2008 4:19 am AlastairC replied:

It’s great to here the CSSWG is listening and providing an avenue to comment. The CSS3 aspect I would like most is the layout module.

Although people seem to be getting excited that IE8 will include table CSS properties for layout, this is no better than minimal tables. Solid, source-order independent layout would make accessibility and device independence from one source actually possible.

A minor one, but I’ll repeat it here is being able to identify text-only nodes in CSS.

#3 On January 18th, 2008 5:00 am Petr Stanicek replied:

http://pixy.cz/pixynergia/2008/what-im-missing-in-css/
(an english text on a non-english blog, I’m sorry for that).

#4 On January 18th, 2008 8:27 am Matt Wilcox replied:

/* variables */
$background1 = #333;
$background2 = #fff;
$border1 = 2px solid red;

div#container { background : $background1; border : $border1; }

/* expressions */
div#container { width : 24%; }
div#excerpt {
width : (div#container – 80px); /* because sometimes % and em just aren’t good enough when mixed with px */
}

/* finer control over positioning */
div#example {
position : absolute;
top : (div#container); /* let me place relative to an element other than the last explicitly positioned parent */
}
div#example2 {
position : absolute;
top : (div#container bottom right); /* and a known position on the specified element */
}

/* better control of backgrounds */
why is it not possible to place a background image FROM THE BOTTOM AND RIGHT in pixels?

div#example {
width : 30%; height : 30%;
background : #000 url(image.gif) ) (right-80px) (bottom-80px) no-repeat;
}

#5 On January 18th, 2008 10:27 am Fyrd replied:

I personally like the following suggestions I’ve seen elsewhere:
- Color gradients
- Media queries for rendering engines
- nth-word selectors, etc
- Transformations (especially rotate)
- Basic animation

#6 On January 18th, 2008 1:12 pm Andy Ford replied:

I’d like to see a “width-increment” and “height-increment” attribute.

This would be helpful when using a precisely tiled background graphic such as a grid or torn piece of paper.

Let’s say that the tiled background is 20px tall – it probably doesn’t look so good when it clips at an increment that’s not divisible by 20 pixels. So if your container ends up being 513 pixels tall, the height-increment attribute would expand it to 520px.

The selector would look something like this:
div.example {
background: url(tile.gif);
height-increment: 20px;
}

so div.example would be transformed from 513px height to 520px height.

there should probably be 3 ways to format the argument:
value[units] (“normal” rounding – rounds up or down to nearest increment)
-value[units] (always rounds down)
+value[units] (always rounds up)

Hopefully I’ve articulated this sufficiently. Please get in touch if a better explanation is needed.
Thanks!

#7 On January 18th, 2008 1:36 pm Dominic Shiells replied:

What is the aim of CSS
To me what is CSS’s aim is more important. With more and more people providing flash based websites.
To me the aim is to make it more easy for humans to use.
To me CSS’s aim is to provide a markup for HTML to make it a painters canvas.

What the other Web technologies do
You have
1. Javascript
2.HTML to provide basic text functions and links and pictures and menu’s
3.SVG to provide pictures which can be manipulated and scaled
4.HTML DOM or XForms to provide things such as Textboxes and Checkboxes
5.MySQL,Access, Oracle, others to be a database
6.PHP, Pearl, AJAX, Python to provide a programming side to the Internet
I do know what function PHP, AJAX,

What I would like to see new in CSS
Gradients
A gradient box or text

Curved Text

E:HoverR:red
Right Click Hover Element aswell as a Left Click Hover

#8 On January 18th, 2008 3:43 pm bruce replied:

Hi Dominic,
can you elaborate more on “curved text”, and what you mean by left click hover and right click hover?

(I’d like to understand the problem you’re trying to solve)

#9 On January 18th, 2008 3:50 pm Daniel replied:

I think a :current pseudo class is something many authors would like to see.

So we can style the link that leads to the currently visited site. However, I understand, that this could be very hard to specify with all the possible URLs out in the web.

This would be a great addition to the :link and :visited classes.

#10 On January 18th, 2008 5:55 pm Chris replied:

I’d like the ability to style “img” elements when they fall back to the “alt” attribute independently, for example, if I currently had:

img {
float: left;
margin: 15px 5px;
border-top: 1px solid red;
}

… but the image failed to load and the “alt” text was shown, I’d like to be able to bring it back in line with the rest of the document, using something like:

img:alt {
margin: 0;
display:inline;
border:0;
}

… so that I’m not left with some floating text with a large margin.

#11 On January 18th, 2008 5:57 pm Andy Mabbett replied:

The ability to have “stripy” tables, with alternate (or every third, or whatever) rows *or columns* having, say, different font-faces, or different background colours, please.

#12 On January 18th, 2008 6:10 pm thinsoldier replied:

http://thinsoldier.com/csswishlist/

if more info is needed just email me. I’ll try to update the page with more explanation sometime this week.

Possibly some of this is already possible in css3:

#1 ability to use single pixel image combined with multiple backgrounds and stretch/scale it to achieve various designs that involved blocks of color and lots of horizonal/vertical lines.

#2 is probably already in css3

#3 Talks about background images but after i thought about it some more I think Foreground Images & multiple foreground images would be better.

There needs to be an explicit attribute to command an element to surround it’s floated children other than relying on overflow:hidden/overflow:auto

There are time when I want to expand an element around its floated children only and just ignore it’s grand-children but with overflow:hidden the grand children won’t be fully visible if they partially extend below the bottom of their floating parents. And with overflow:auto the grand-children activate the scrollbar

#13 On January 18th, 2008 6:17 pm thinsoldier replied:

Also… I’m not sure I believe what they say about parent selectors being too hard to do.

With prototype.js I can do $$(‘form.loginForm’).up(); and have the parent div of the login form be selected.

$$(‘form.loginForm’).up().style.display=’none’;

#14 On January 18th, 2008 6:22 pm thinsoldier replied:

ability to mirror/flip images and background images so that I don’t have to use double the amount of files in a layout with left/right or top/bottom symmetry

Old IE already has a propriety css property that sort of did this with image tags

#15 On January 18th, 2008 7:07 pm thinsoldier replied:

A——
Curved Text / Text along a path
http://safari.oreilly.com/images/0201750430/graphics/11fig56.gif

#header p#slogan {
textpath: url(/svg/curlypath.svg); // must be an svg consisting of a single path

textpath-direction: positive // text starts at the first anchor point of the path (or negative to flow backwards from the last anchor point … or … isn’t there something already to make text flow right to left?)

textpath-base: top // makes the Top of the text flow along the path instead of the bottom
}

B—–
Ability to absolutely position a picture or other sized element over a block of text and have the text flow around the element.

C—-
Ability to define a non-square shape around an element as a “clipping path” that affects the visiblity of the element (like an image) and the wrapping of text within the element based on the shape (paragraph) AND affects the flowing of text around the element as described in the previous section.

#calloutStar {
clipping-path: url(/svg/star.svg);
background: url(http://www.imagemagick.org/RMagick/doc/ex/clip_path.gif) center; // look at the image
box-shadow: …drop shadow stuff…;

// at this point text would still treat the element as a square
// to change that
text-flow-external: url(/svg/star.svg);
// now surrounding text would react to the shape of the star but text inside the element would still behave like it’s in a square
// to change that
text-flow-internal: url(/svg/star.svg);
}

D—
Ability to use a grayscale image as an “alpha channel” to affect the visibility of an element. This could be used in place of create a new .png for multiple things

http://www.facilities.ohiou.edu/cats/images/Bus-Stop-Sign-oval-blur.gif
…I know I know I know…… :(
“But in the right hands it could be used for good!”

img#mainPhoto {
alpha: url(/gray/oval.gif)
}

Use: I have a left column with a photo at the top the fades out towards the bottom to blend into the background color AND TEXTURE of the column. Instead of having to
a. save a new .jpg with the photo + blend into texture/color for EVERY photo i plan to use
b. save a transparent .png for Every photo I plan to use
I only need to save the transparency itself as a greyscale file and reuse it as alpha on the photos on every page.

E—
Ability to use a purely black and white image to do all the same stuff mentioned in section C of this reply. Wouldn’t want to try to do [C] using an alpha channel from [D]. Too much gray transitional data between black and white to calculate a difinitive boundary. But with pure black and white it should be a piece of cake.

This would be for the benefit of people who want to do [C] but lack vector software.

I think microsoft already did something like this with transparent .gifs long ago.

F—–
I’m sure others have already requested css gradients.
I’d like for gradients to be able to have their colors defined with css variables.
Then I’d like to save the gradients themselves as css variables.
Then I’d like to be able to use a purely greyscale gradient as an alpha (see [D])

p#downloadArea{
background: cssVar($blueSunriseRadialGradient) top right;
alpha: cssVar($sunriseAlphaRadialGradient) top right;
foreground: url(/svg/sunLogo.svg) top right no-repeat; // Did I mention Foreground-images and using svg as background/foreground images
foreground-passthrough: true //if the foreground image hides a link or something under it, if you click, you’ll still click the link as if the foreground image wasn’t there
}

#16 On January 18th, 2008 7:18 pm Petr Stanicek replied:

thisoldier remembers me another idea of background images, the crop:

background-image-crop: 16px 64px 32px 48px;

Which means: crop the specified image (i.e. by given top-right-bottom-left coords) and use only the clipped part as the background image. This would allow single-image “sprites” (all graphics placed into a single image and positioned as background-image of small boxes) to be centered, aligned, repeated etc.

#17 On January 18th, 2008 9:02 pm Dominic Shiells replied:

Bendy Text

Curved Text and Ordinary
I mean if you say have a title and you want the title to say bend round in say a bezier curve. So the text goes round and follows a circle or any other shape.

Left Click and Right Click Hover
When clicking on a link it would be nice to have two different colours for say the left click and the right click or even the scrollbar.
Say you hover over a link in say AJAX where you use your right click button to maybe turn a different colour than the left click button

#18 On January 18th, 2008 10:08 pm Neal replied:

I have a few things I can think of:

1. The ability to create gradients using only css and to choose where the midpoints fall.

2. Change the color of strike-throughs, under-lines and over-lines

3. The ability to create drop shadows (could be a combination of gradient and opacity)

4. Better ability to style form controls (browse button anyone?)

5. Ability to change scrollbar colors (I know IE and opera support this, why not just make it a standard, its part of the presentation)

6. Ability to style alt/title popups within browsers.

Also in the current CSS3 spec, I really like the double (or hopefully multiple background images) and the ability to resize elements (textareas etc) Also border radius sounds really cool to me as well. Other than that, CSS3 doesn’t seem too revolutionary to me. Keep up the good work with selectors, the more ways I can select elements the happier I am!

#19 On January 19th, 2008 3:14 am fantasai replied:

@Matt Wilcox – It would help if you drew up some sample layouts that you can’t achieve reasonably in CSS right now (source markup + resulting geometry), so we can better understand what you want to achieve. A lot of the current layout limitations in CSS can be solved with the Advanced Layout proposals, for example, but it’s hard to tell whether it’s sufficient to address your use cases from the information you’ve provided.

@Fyrd – Can you give us some examples of what you’d want to use those for?

@Andy Mabbett – We already have that, see the Selectors module.

@Neal – Can you elaborate about the drop shadows as a response to this css3.info post?

#20 On January 19th, 2008 5:41 am Chris Jay replied:

Color gradients
Transition animations
Transformations (especially rotate)
CSS expressions, especially the ability to make one element’s style depend in realtime on another, e.g. #div1{width: (div2.width * 2)}
Full XPath selectors, especially the ability to do what MS Excel calls “conditional styling”, e.g. XPath(“//p[contains(., 'Chris')]“) {border: 1px solid black} – give a border to all paragraphs containing the word “Chris”. After all, you can create slow javascript expressions as well as slow XPath expressions – but JS developers accept it’s their job to write code that executes fast. No reason why CSS developers shouldn’t have the same job too.

#21 On January 19th, 2008 10:51 am Rick replied:

What do I want from CSS3? I’m not really sure. I’m still far enough down on the learning curve for CSS2 that I can’t see what I’m missing or what I’d need/like.

What I do want from the CSS3 WG is a solid set of deliverables with a clear timeline. No more of this ‘we’ll get to it in about 2010 or so, if my real job doesn’t interfere too much. If it does, then 2030 or so.’ This means the group will have to have enough enthusiastic and committed participants to actually get some work done, instead of the apparent three or four bodies/minds working on the current draft. More people means there needs to more and better leadership, something that currently is missing. And something that is hard to come by.

#22 On January 19th, 2008 11:09 am Georg replied:

The ability to use one positioning value for horizontal and one for vertical, like ‘position-x: absolute; position-y: fixed’.
This would make it possible to position an element relative to a layout-container horizontally and to the viewport vertically.
The existing position-values: ‘static / relative / absolute / fixed’ can then be used more efficiently – in combination with media queries, to tune a layout to make use of available space without having to deal with overlapping or elements ending up outside the viewport and out of reach with browsers’ scrolling-mechanisms.

Example of what I’m after can be seen on _very_ narrow windows in IE6 (and older) on this page…

…where the ‘fixed’ right column can be reached by scrolling horizontally. It works in IE6 because I’m using an IE-expression to fake ‘position: fixed’.
In Firefox the right, fixed’, column is lost outside the viewport on very narrow windows, as it would otherwise end up overlapping the main, scrollable, column.
In Opera 9.50beta the same example is “saved” to a degree by switching positioning value to ‘absolute’ on narrow windows – same works in Safari 3 when page is reloaded on narrow windows, but all this would work a lot better if positioning could be switched for one axis at a time – depending on actual conditions.

#23 On January 19th, 2008 11:11 am Georg replied:

Lost the example-page there. Look at the signature page since that’s using the same methods.

#24 On January 19th, 2008 3:42 pm Matt Wilcox replied:

@fantasai – my apologies, I had not got the time to do that when I replied. I shall try to get something more suitable done for you tomorrow. For what it’s worth, the Advanced Layout module as I understand it would not work for the positioning behaviour that I was after.

As an aside, the advanced module appears to be a hideously complicated. And unless I’m missing a trick, you can’t style the slots themselves, only their content, which will be rather limiting in terms of design – I’d want to be able to specify background images for the slot itself for example. Which would allow me to make ‘seemless’ layout areas. As I understand it at the moment, if one of the slots is not filled by content, then you’ll end up with a visual hole. It seems like we’d be needing to do another ‘faux columns’ type work-around.

#25 On January 19th, 2008 3:46 pm Chris Griego replied:

Incorporate the :has() and :matches() CSS selector syntaxes proposed in 2002; it takes care of the need for selecting parents without breaking incremental rendering.

http://lists.w3.org/Archives/Public/www-style/2002May/0037.html

Also, rotation as mentioned.

I also believe some sort of time-based selector syntax based on keyframes would put animation, a stylistic thing, back into CSS.

#26 On January 19th, 2008 8:48 pm Sander Aarts replied:

– Float positioning –
A combination between absolute positioning and float: the ability to position an element by using coordinates, leaving no blank space (as with absolute positioning) and whereby the element behaves as a floating element on its new position, pushing other element aside (or maybe only elements that have the same z-index).

For instance:

#mainNav {
position: float;
top: 2em;
left: 10px;
}

This would make it possible to visually rearrange the order of the source code without the risk of elements overlapping when content or font sizes increase.

– box radius –
Like border-radius a way to give round corners, where no background images or colors are shown, to elements without borders. Maybe “border-style: none;” combined with a border-radius will do the trick. That would be sufficient then I guess. The working draft is not clear about it though.

– –
And issues mentioned by Matt Wilcox:
- CSS variables
- Exprressions (though not relying on JavaScript being enabled), for simple calculations mixing different types of units
- Relative background positioning from the bottom and right side

#27 On January 20th, 2008 12:57 am fantasai replied:

@Chris Jay – A feature wishlist isn’t nearly as useful as explanations of what’s needed and what it’s needed for. Examples of what you want to do with the features you list would help.

@Chris Griego – Changing the syntax doesn’t make the parent selector functionality easier to implement or affect incremental rendering any differently. Time-based selector syntax sounds like an interesting way to approach animation. I think Apple’s proposal uses something similar.

@Sander – The Advanced Layout proposal makes it possible to visually rearrange the order of the source code without the complexity of floats. (If the layouts you can’t be done with that, we’ll need some examples to understand what you’re after.) Wrt ‘border-radius’, I recently clarified our draft to say that overflow, when hidden, is clipped to the curve. So you could, e.g. put curved corners on an image. Does that address your concern there, or am I misunderstanding what you meant?

#28 On January 20th, 2008 8:55 am Jens Grochtdreis replied:

I hope for CSS3 in the near future. Please make an end to the discussions and finalize the now known CSS3. THEN go straight on and work on CSS3.5 or CSS4. And finalize this work within two years. Don’t hear our pleas for new functions in the next version. Just do it. Just make an end to the discussion.

W3C is not better than Microsoft with a six year distance for a new browser. Tne internet is a powerful and fast medium. Unfortunately the standardization-institution seems too slow for the mediums speed.

So: meet with the needs or step out of the way.

#29 On January 20th, 2008 9:04 am F-LOG-GE » Blog Archive » CSS Working-Group replied:

[...] Die CSS Working-Group sucht eine Orientierung für die Arbeit der nächsten Jahre und holt das Feedback der Community ein. Das Webstandards Project vermeldet dies und bietet die Plattform für die Diskussion. [...]

#30 On January 20th, 2008 12:14 pm Let the CSS WG know what you need from CSS3 - CSS3 . Info replied:

[...] Is there ever a time when you wish CSS allowed you to apply style in ways that either are not currently possible, or require hacks and extra markup to make it possible? Well now is the chance to let the working group know exactly what you want. Bruce Lawson is collecting your feedback on the WaSP site. Go there and leave a comment outlining what effects you’d like to achieve. You can also leave feedback on the CSS3 Soapbox. [...]

#31 On January 20th, 2008 12:46 pm Antti Rasinen replied:

I’d like to see the DOM decoupled from the box-model. Specifically, I’d like to be able to specify my own boxes inside and outside already existing boxes. An example:

#myBox {border: thin solid red:}
#mybox:outer {border: thin solid blue;}

This would wrap the #myBox in a new anynomous box and in effect create a double border for #myBox. Other usecases are of course multiple backgrounds, different combinations of paddings and margins etc. There are also often cases when I’d like to see the border or the background spill outside the element itself.

Variants for the syntax in the case of multiple boxes could be :inner:inner or :inner-nth(2).

This proposition is unfortunately not orthogonal to other CSS3 improvements. Multiple background images, multiple borders and calc() solve many of the same use cases. Despite those reservations, I believe this would allow us to write more semantic HTML without the need for .content-wrapper that I see occasionally.

#32 On January 20th, 2008 1:22 pm Simon Fraser replied:

I’d like to have a “shrink to fit” mode for background-image. “Shrink to fit” would reduce the scale of the image until both height and width fit in the background, while maintaining aspect ratio. Currently, it’s only possible to do either width or height.

This should be really trivial to implement.

#33 On January 20th, 2008 1:23 pm Simon Fraser replied:

Second request: I’d like a way to use rounded corners on elements that clip the contents (not just the background) of the element.

#34 On January 20th, 2008 1:34 pm Jon replied:

I had this crazy idea once that I wanted to be able to switch the direction of flow.

I want to make it so that websites flow from left to right (or right to left if you language works like that) instead of top to bottom.

Basically the way it works now is that if you create a block element and then another it will go underneath the first. Unless you use floats. Switching the flow rotates this 90degress. Now a new block element will go to the left of the first. You can float elements to the top or bottom.

Scrolling a mouse wheel will be reinterpreted as down meaning scroll right, up meaning scroll left.

Currently by default items fill the available width and are only as high as needed. Switching the flow will reverse this.

That’s as simple as I can put it. I hope it makes sense.

One thing of note is that this will make the proposed multi column layout stuff actually useful.

And while I’m probably wrong, I reckon it’s probably fairly easy for browser vendors to implement this.

Syntax could be flow: default; flow: ltr; flow: rt; maybe even go crazy and have flow: reverser; where elements stack from the bottom and you have to scroll up.

I’ll say another thing about this idea…. lots and lots of ideas I have read and a lot of the stuff already planned for CSS3 just make stuff easier to do that can already be done with varying degrees of success by hacking various bits together.

This idea, I think, presents an opportunity to break the mould a bit and open up totally new ways of laying out sites.

#35 On January 20th, 2008 1:39 pm ryan groth replied:

I think this is in CSS3, but rounded corners, rotated text, and drop shadows constantly seem to give me trouble.

#36 On January 20th, 2008 2:31 pm Sander Aarts replied:

@fantasai
- I will have tot take a closer look at the advanced layout proposal then.

- In the working draft I indeed read that background-images are clipped outside the border-radius (although this is immediatly questioned as well), but I’m not sure how I can give rounded corners to a background-image without having to apply a border to the element. Does the clipping still occur if I set a border-radius combined with ‘border-style: none;’?

#37 On January 20th, 2008 3:01 pm Stifu replied:

One thing I wouldn’t mind having is a way to define diagonal borders. For example, if I want to make tabs with a sharp diagonal on one edge or both.
Check the blue tabs at http://stifu.free.fr/fr/links.php for something just like that (done with images).

#38 On January 20th, 2008 3:43 pm David Storey replied:

I see a lot of requests to do things in CSS that can already be done in SVG. That is an issue for a couple of reasons: a) most web developers don’t know much about SVG and b) most major browser engines have already implemented something that will do what web developers are asking for and c) If they are added to CSS it bloats the browser engine as it has to be implemented twice if the engine is to be CSS and SVG compliant.

As the things that are often asked for (gradients, rotation, text following paths, animation) are often fairly trivial to do in SVG (I’m in the process of writing one or two articles showing how easy it can be), then I’d propose that either CSS allows SVG to be attached to it or used inside CSS (this may be difficult as CSS isn’t XML), HTML elements can be selected from inside SVG (much like foreignObject, but just selecting that HTML element instead of actually including the HTML in the SVG file – or including SVG in the HTML file), or for a subset of SVG, have a CSS syntax that can be used to apply that SVG. The first two would be more powerful as you could do anything SVG does, while the last would be easier as it would be transparent to the designer, and they’d just need to learn a new CSS property for each new functionality. For the later to work it would have to take in the same arguments as SVG, or just allow a subset of what the equivalent SVG would do.

For things like gradients, it is very easy to use the SVG as it is at the moment. Just create a SVG background-image. You can even specify the colour of the gradient using the SVG extensions to CSS. For rotation and animation it is more tricky. If you want to rotate a HTML element, it can’t be done directly. You have to either wrap the HTML is SVG in the XHTML file (it has to be XHTML, as HTML isn’t XML) or include the HTML in the SVG file. To me this isn’t good enough as you are mixing content with style. You can most likely do it with scripting of course, but this isn’t ideal. Allowing SVG to be attached by CSS or being able to select HTML elements in a SVG file would solve this. If you can do this already then I don’t know how to do it.

This is not all directly relating to CSS or the CSSWG, but as they are being asked to add quite a few stuff that is already possible, they should perhaps work with the SVG WG to this stuff to be easier or allow both standards to work together better.

#39 On January 20th, 2008 3:46 pm David Storey replied:

@Stifu: You can probably do that with border-image. See CSS3.info for more info. You’ll need Safari, as it doesn’t work in any other browser yet.

#40 On January 20th, 2008 6:00 pm Matt Wilcox replied:

I have written up CSS3 wish-list with rationale and use-cases here:

http://mattwilcox.net/sandbox/css3-proposals.htm

#41 On January 20th, 2008 6:06 pm Gérard Talbot replied:

Hello all,

The first thing CSS 3 should do is clarify or specify or define the obscur points and issues remaining as such and stated as such in CSS 2.1. One can easily find some 20 of those points just by running a text string search for “undefined” (or “future” or “later” or “unspecified” or “unknown”, etc) in the CSS 2.1 sections of the specification.

Examples:

“The meaning of input that cannot be tokenized or parsed is undefined in CSS 2.1.” CSS 2.1, Section 4.1.1

“It is undefined in CSS 2.1 what happens if a style sheet does contain a character with Unicode codepoint zero.” Section 4.1.3

“If the containing block’s width depends on this element, then the resulting layout is undefined in CSS 2.1.”
Section 8.3

“If the containing block’s width depends on this element, then the resulting layout is undefined in CSS 2.1.” CSS 2.1, Section 8.4

“The effect of ‘position:relative’ on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.” CSS 2.1, Section 9.3.1

“For other media types, the presentation is undefined.” CSS 2.1, Section 9.3.1

“The percentage is calculated with respect to the width of the generated box’s containing block. If the containing block’s width depends on this element’s width, then the resulting layout is undefined in CSS 2.1.” CSS 2.1, Section 10.2

“If the containing block’s width depends on this element’s width, then the resulting layout is undefined in CSS 2.1.” CSS 2.1, Section 10.4

“after 26 list items, ‘lower-latin’ rendering is undefined.” CSS 2.1, Section 12.5.1

“The tiling and positioning of the background-image on inline elements is undefined in this specification.” CSS 2.1, Section 14.2.1

“Percentage offsets are no longer undefined for containing blocks without an explicit height.” CSS 2.1, Section C.2.46 does not say much, does not mean much and is still not sufficiently clear and univocal for some people despite “The percentage is calculated with respect to the height of the generated box’s containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to ‘auto’.” section 10.5 which can be interpreted equivocally by some people.

Above all, what CSS 3 must do is
- give, use, provide more examples (complete and/or small), ideally with screenshots of expected rendering results, graphics so that the specification is less subject/vulnerable to different interpretations by software implementors and/or web authors
- avoid duplicating what is already defined, covered and addressed by other specifications. E.g. text-path is already covered by SVG

Regards, Gérard

#42 On January 20th, 2008 6:18 pm Gérard Talbot replied:

CSS 2.1, Section 11.1.2 Clipping shape values, not just rect: “In CSS 2.1, all clipping regions are rectangular. We anticipate future extensions to permit non-rectangular clipping. Future updates may also reintroduce a syntax for offsetting shapes from each edge instead of offsetting from a point.”

Regards, Gérard

#43 On January 20th, 2008 8:46 pm Diogo Baeder replied:

Maybe “draggable” and “resizable” properties, if none of them would be processor-intensive and the second one could be not so hardly standardized for browser vendors (like what happens to box-models among different browsers) – fixing standards regarding to positioning could be a real pain, for example.

Thanks,

Diogo

#44 On January 20th, 2008 10:55 pm Rowan replied:

“Wrt ‘border-radius’, I recently clarified our draft to say that overflow, when hidden, is clipped to the curve. So you could, e.g. put curved corners on an image. Does that address your concern there, or am I misunderstanding what you meant?”

I just created a table with rounded corners which uses a background color/image on the TH element, when I viewed this in Firefox 3 the table’s border didn’t crop the TH.

So it would be great if there was a way to have a rounded corner that cropped every child element, as well as the first element. In my mind, border-radius is only fulfilling 50% of its potential for this reason.

#45 On January 20th, 2008 11:08 pm Trevor Davis | Blog » Weekly Link Round-Up #14 replied:

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

#46 On January 20th, 2008 11:08 pm Trevor Davis | Blog | Weekly Link Round-Up #14 replied:

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

#47 On January 21st, 2008 2:10 am Liechtenecker’s Blog » Vorschläge für CSS 3? replied:

[...] Die CSS-Working Group, also das Webstandard Projekt startet eine Diskussion was man alles in CSS 3 aufnehmen könnte. Nun ja, es sollte mal die Version 2.1 richtig verabschiedet werden, oder wie viele Jahre sollen noch vergehen bis die Browserhersteller endlich CSS 3 mit seinen unbestreitbaren Vorteilen einbauen können. [...]

#48 On January 21st, 2008 4:01 am Wilco replied:

Well, aside from the layout proposal they’ve already put out, and the calc() function which they’ve already got…. Hmmm, how about variables?

Well maybe call them constants. You could have document constsants, force them to be defined at the top of the css file / style element. Like:

@constants {
page.width: 20em;
content.width: calc(page.width – 5em);
}

I tend to like the : and ; notation here so it’s not quite like making a calculation rather you reference a value to a name. This is more or less the way i use it in my comments. I also got to like the idea of having variables with the dot (.) in it’s name so you can have page.width and page.bgColor. Having a dot there, unlike most programming languages really doesn’t matter to the name and it just makes things easier to read, and easier to make good referenced.

Coming to think of it, there’s another thing. It would be great if you could set up the base reference of the uris, because often you start local, so you make local references but then when you upload these all have to change. It’d be great if you could make CSS docs more portable.

Oh! And another (yes I’m on a roll), some extra flexibility with selecters would be great .I’d like to be able to do something like this:

#content {
padding:1em .4em;

children: .comment {
padding:.2em;
}
}

This idea has been floating around the web for a while now and I think it would make it a little easier to structure large documents.

#49 On January 21st, 2008 7:03 am Arjan replied:

I currently have no cool features, but I find it very important the CSS3 WG also provides proper test suites. If there are test suites, user-agents that want to implement (parts of) CSS3 can easily test if they’ve implemented it right.

At this moment no browser fully supports CSS2.1. I think that’s because there is no good test suite for it. I don’t think many people want a repetition of lots of time waiting for good implementations.

The best is to make images with intended renderings of pieces of code. And that for all features. For ‘difficult’ features you could even provide more than one rendering image.

#50 On January 21st, 2008 11:28 am Moe replied:

A selector like “p s that contain a ) would be very useful.

#51 On January 21st, 2008 12:59 pm Fyrd replied:

@Fantasai:
Here’s some elaboration and examples on how I’d like to use the aforementioned items:

- Color gradients
Yes, this can be achieved fairly easily using SVG, but that’s not something that can be as easily modified like other properties. Using a separate image feels more like a hack than a real solution to me. Additionally, I suspect people may also want to use gradients on text, which could not be achieved using this method as far as I can tell.

Modern GUIs seem to use gradient background colors more and more these days. Web 2.0 Textual logos and headers also often use gradients. Seems like a clear indication for a need to create them easily in CSS.

- Media queries for rendering engines
Just having a practical and official way to write different rules for different rendering engines would help prevent the use of unseemly hacks. Note that I’m not just talking about writing special fixes for IE etc. here, but also for when using new properties that only one or few browsers support, it would be very helpful to easily send just them certain rules, while sending others alternative rules.

Examples include issues where there’s no easy way to provide fallback, like text that would be invisible without a text-shadow (by having the text be the same color as the background), or an SVG background image where you would want to supply a different background image for browsers without support.

- nth-word selectors, etc
Useful for text effects, to prevent using spans over and over again.

- Transformations (especially rotate)
Mostly useful when wanting to display images in different ways, but also for things like column header text in tables.

- Basic animation
Many javascript libraries offer easy ways to do animation, usually just for visual effects (rather than actual behaviour). Seems to me like something designers want to do easily, so it makes sense for CSS.

#52 On January 21st, 2008 5:28 pm Brad Kemper replied:

For example, many people would like parent selector, but this is repeatedly dismissed because it’s too processor-intensive and because it breaks incremental rendering

In other words, “tell us what you need, and we will tell you why we refuse to implement it, despite popular demand.” The “incremental rendering” bugaboo is the popular excuse d’jour for turning down just about every suggestion of useful additions, even when they greatly resemble existing properties and behavior. Effects on incremental rendering should be just one consideration; they should not override all other considerations.

What does it do to processor usage or incremental rendering when authors start turning to huge JavaScript libraries to accomplish what the CSSWG steadfastly refuses to provide? (JQuery, for instance, has many more pseudo-classes and pseudo-elements than CSS does, including parent selectors, and authors can use it to select elements and add style to them.) The result of using JS for basic styling is that the page takes longer to load, and the styling does not finish rendering until after the page load is already otherwise complete (not to mention all the other problems associated with relying on a scripting language to do styling).

Yet authors will use such complex work-arounds in order to achieve the designs that they want, rather than limit themselves to the designs that the WG engineer-types and design-hostile-types are willing to consider as valid efforts. Even basic things like centering often require extra markup, more complex rules to achieve, and sacrificing layout liquidity. Yet this is somehow considered preferable by the CSSWG than to, say, allowing authors to position an element by its center instead of just by its edges.

The same sort of situation occurred in the 90s, when authors were told by the HTML purists that style and design were not important, and that authors should not try to make Web pages resemble other visual media. Well, the designers and their employers disagreed, and they discovered unsanctioned ways to wrest more design control into their pages than what the HTMl wonks considered appropriate. Thus were born invisible tables and transparent, single pixel GIFs as a layout tool and as a means for creating borders, padding, and margin. “Font” tags and the various “table” tags started to account for the vast majority of the markup on any page.

It was these excesses of HTML abuse that directly lead to a recognition of a need for CSS, to get all that extra markup out of the html and into shared, style-centric files. Now authors are turning to JavaScript, complex twisting of CSS rules, and multiple embedded Flash files in order to be able to achieve the creative freedom that CSS can’t quite handle. Although the working group asks for designer feedback, the design freedom that designers care about most is never considered as important as “incremental rendering” or the anti-designer rhetoric that is allowed to drown out all other voices in the mailing list.

#53 On January 21st, 2008 5:29 pm Neal replied:

Fantasai: Here is how I see the css being for drop shadows

drop-shadow-width: 5px;
drop-shadow-offset: 5px;
drop-shadow-color: #333333;
drop-shadow-direction: 300; /*degrees*/
drop-shadow-transparency: 80%; /*100% equals none*/

Really, all you have to do is look at a typical image editing program and steal any of the features they offer. The less we have to open the program up the better.

#54 On January 21st, 2008 6:21 pm C L replied:

Nested selectors

#pageid {
#content {
blah: blah;
}
#nav {
yada: yada;
}
}

instead of

#pageid #content {
blah: blah;
}
#pageid nav {
yada: yada;
}

#55 On January 21st, 2008 7:58 pm Brad Kemper replied:

A few Features that I would like to see:

• simple gradients that could be used almost everywhere that colors are used (borders, backgrounds, text, outlines, etc.), with a previously specified solid color as a fallback for browsers that don’t yet support the property. I do not want to have to use SVG for this, or to specify the gradients in a separate file. Simple and easy to read and write is key. Linear and Radial gradients should take precedence over other future types like fractal cloud.

• A way to have float-like text-wrapping, but with more precise positioning (not just to left or right edges of container, and vertically not just to where it begins in the flow). Being able to set whether the text wraps on the left, right, or both. “Both” would mean starting on one side and continuing on the other (if there was room), unless the item straddled a column gap of a multi-column element (which would equate to there not being room for the text to start on one side and continue on the other within the column block).

• In positioned elements, to be able to set the position of not only the left, right, top, and bottom, but also the horizontal center and/or vertical center of the element.

• To have many more ways to select items with pseudo classes and pseudo elements. To select by content, for instance, such as by what elements the children are or by what text is inside. To have parent selectors that are the opposite of child selectors (carefully worded to prevent infinitely looping logic).

• To be able to rotate HTML elements, such as DIVs, H1-H6s, and A’s. Not just rotating some text in an external SVG file, but rotating actual content elements that are part of the existing mark-up. 90 degree rotating would be a good start that does not require complex new ways to deal with margins (just rotate the margins too, same as the borders and padding, and end up with rectangular areas, same os now).

• Have a special type of rotation for table headers (and those items styled as such with “display”), so that they can be rotated by any angle, given a width that is different from the column width, the leading and trailing edges would remain parallel to their original tops and bottoms, and the leading edge corners would align with the top corners of the column (the bottom edge corners before the rotation). This would allow long table headers to be usable on narrow columns.

• Acknowledge that it will be many years, if ever, that UAs will have complete feature parity of CSS capabilities, and include a media-queries-based mechanism for providing different rules to different rendering engines. When this is not part of the official specification and software, then authors have to find their own way of accomplishing the same thing, via CSS hacks, JavaScript UA detection, or server-side UA detection. All those other methods have significant disadvantages over an officially supported method, but authors will resort to them if it is the only way.

#56 On January 21st, 2008 8:44 pm jive replied:

text-vertical – being able to put text vertically EXAMPLE:

c
o
o
l

font-stretch, font-squash

mask – this would be pretty powerful, but I’m not sure how you would define the mask.

#57 On January 22nd, 2008 1:39 am La domo de karotoj » Kion vi volas en CSS 3-a? replied:

[...] La CSS-a laborgrupo volas scii. Kelkaj bonaj proponoj estis faritaj, sed du elstaras: [...]

#58 On January 22nd, 2008 1:40 am Gérard Talbot replied:

Fantasai,

All of the obscur points (“this specification does not specify how”, “not defined by this specification”) of CSS 2.1, section 10.6.1 should be clarified, defined, specified in CSS 3.

Regards, Gérard

#59 On January 22nd, 2008 2:50 am fantasai replied:

@Rowan: If you’re using a build from after 2007-12-18, file a bug against Firefox.

@Arjan: we are working on the CSS2.1 Test Suite, but it’s a massive amount of work. People are welcome to help. I’ll be posting more about that once the W3C lawyer-types sort out some licensing issues.

#60 On January 22nd, 2008 5:03 am WebCards Blog » What Do You Want From CSS? The CSS3 Working Group Want To Know replied:

[...] The CSS3 working group are looking for feedback on what people want implemented in CSS3. [...]

#61 On January 22nd, 2008 5:38 am Ian M replied:

I would like them to simplify their CSS ratification process, or simply reword the various levels of progress, such that Microsoft can’t claim that it’s a standard yet, like they STILL do with CSS 2.1.

#62 On January 22nd, 2008 6:17 am Anders replied:

Parent selectors would be a nice feature.

Suppose I have a nested list, acting as a menu system, where the nested li:s are hidden by default. I would like to style only the li elements containing a child element, for example adding a background image to indicate that there’s a deeper level to navigate. The only current solution as I see it, is to get those parent elements through javascript, or having the server side put a class on those li:s.

Could be a pseudo class, something like element:is-parent/element:has-children…

#63 On January 22nd, 2008 6:39 am Ed Everett replied:

Here’s a simple one (I think…)

Grouped selectors.

.mySpecificClass #mySpecificId (h2, h3, h4) {color:red;}
.mySpecificClass #mySpecificId (p, ul, ol) {color:#666666;}

So you could group child selectors under one parent making for neater css files and less repetative strain injury for web developers.

#64 On January 22nd, 2008 7:22 am Max Design - standards based web design, development and training » Some links for light reading (22/1/08) replied:

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

#65 On January 22nd, 2008 9:10 am daembrace replied:

A shortcut to specify both the width and the height together, like this:

size: 450px 100%;

that would be the same as:

width: 450px;
height: 100%;

since a lot of times you specify both of them at the same time. The eventual override by the classic specification could be resolved just like the same override problem in the borders compact and expanded versions.

#66 On January 22nd, 2008 12:47 pm Christian Norton replied:

border-image, so you don’t need to mess with combining padding and background-image.

#67 On January 22nd, 2008 4:17 pm Henry Francis replied:

Suggestion for future CSS versions.

The coding and maintenance efficiency of CSS would be enhanced by adding the capability of declaring a variable, which could then be assigned some value and used in multiple instances as a property value. For example, suppose I wanted to assign a standard 25px of padding to many different classes of divs. At the top of the style sheet I would declare a variable “xpad”, set it equal to 25px, and write my classes using padding: xpad; . Then, if in the future I wished to change the amount of padding, I would only need to change the value of xpad.

#68 On January 22nd, 2008 6:14 pm Christopher replied:

I would like CSS3 to focus more on layout techniques that are easy to understand. The current CSS2 implementation is useless for creating fluid layouts unless you have an IQ above 300.

Everything else CSS has to offer is top-notch.

#69 On January 22nd, 2008 9:33 pm hawken king replied:

simple really.

Auto spanning text columns, with column span variable
Vertical Japanese text with Japanese text options
rounded corner div blocks, with corner miter variable

Thats all I’ve ever wanted.

#70 On January 23rd, 2008 8:04 am Sander Aarts replied:

– vertical-float –
I’d like to see an option to tell block elements to stretch to the maximum available height. A vertical-float property so to speak. The current, default behaviour would be:

vertical-float: top;

…and in order to make the element stretch to the available height you could use:

vertical-float: none; (or maybe ‘full’ or ‘stretch’)

This would make it easy to give sibling elements the same height without hard coding it. The element with the largest content would stretch the mutual parent and the sibling would stretch to the height of the parent.

– grouped (sub) selectors –
I like the grouped selectors (maybe grouped sub selectors is a better definition), as proposed by Ed Everett

– :current pseudo class –
Selecting links to the current page

#71 On January 23rd, 2008 2:32 pm Christian Norton replied:

Also, but I don’t know if this is at all in the scope here… it would great to be able to pass css through a URL. Say like http://www.url.com?id=header|display=none
something like that.

#72 On January 23rd, 2008 6:56 pm fantasai replied:

@Sander Aarts – I think I need an illustration to understand what you mean by your vertical-float idea.

@Christian Norton – yeah, that’s out-of-scope here :) Your server application would have to handle something like that.

@Christopher – Support for display: table/table-row/table-cell in IE8 should help with that. We’re also looking at some proposals for a template-based system. It would be helpful to get an illustrated list of specific layouts designers want to achieve.

#73 On January 24th, 2008 4:42 am Tom Coleman replied:

More cardinal points, i.e.:

top-left, top-center, top-right,
mid-left, mid-center, mid-right,
bottom-left, bottom-center, bottom-right.

(Sorry if this is redundant.)

#74 On January 24th, 2008 5:37 am bruce replied:

Christian, what’s a use-case, please?

#75 On January 24th, 2008 11:56 am Christian Norton replied:

New idea: encasing through CSS. Lets say I have a chunk of HTML in the code tag instead of having to encase each of my greater then or less then we could set this in CSS. Something like code {text-transform: escape;}

As for the CSS in URL use case. Say I’ve got an page I’m going to use in different ways, one as just a static page, and one from and email drawing attention to a particular parts of the page. By allowing CSS in a URL I now have the ability to completely separate style from the structure, allowing different presentation of the same data at the same time.

#76 On January 25th, 2008 8:30 am Chris Jay replied:

I’d like a “border-path” property that allows us to make an element’s border have any shape and size – e.g. stars, clouds, triangles, human outline, etc. Perhaps using the SVG closed path notation.

This is better than using background images, because it allows padding, margins and clips to follow the border shape (e.g. text automatically fits neatly inside). It’s like rounded corners on steroids!

#77 On January 25th, 2008 1:22 pm Dave replied:

This is exciting – I’d assumed that it was too late / there was no way for non-recognized experts to give any input on these processes.

1) Defined defaults for margin and padding on all elements (or perhaps, for all attributes). Right now, CSS authors must use a Reset stylesheet everywhere. If everyone is using Reset stylesheets everywhere, wouldn’t it make more sense to build some foundation into CSS itself? I would further suggest that the defaults aim for “0″ rather than semi-arbitrary “this will make a page look nice when people don’t know what they’re doing. I hate to make CSS3 an experts-only club, but if we try to juggle what experts need with what newbies need done for them, I think we all lose.

2) Much stronger border style options. I’m picturing the ability to use images for borders. You could specify 8 images (4 corners and 4 tiles for borders), or a smaller number that would be rotated by the browser based on definitions in the spec. (The popularity of the “sliding doors” hacks is one example of a need that stronger border styles could/should satisfy.)

3) Better general layout tools. I’ve gone from hardcore standards & semantics fanatic back to someone who appreciates that tables are the only or easiest way to achieve some of the most desired layouts. Any new layout tools that don’t offer everything tables did with the same ease as tables is truly an incremental step that is just wasting everyone’s time.

4) A built-in system of CSS version support identification that gives developers some ability to trust/know/control/influence what a browser will actually do. XHTML’s Strict/Transitional doctypes seem to be the closest example I can think of to what I’m picturing. I would love to be able to say “if browser supports CSS4, use stylesheet.css4, else .css3, else .css”. There will probably always be conditional comments / javascript /server-side solutions, but honestly there has to be a way to include this in the spec that would eliminate the (future) need for all those hack-type solutions.

5) Declare entire font styles the way that font-family is currently used. Instead of something like “font-x, font-y, sans”, let me say “Family size line height”. For example “font-x 14px 1.3em, font-y 16px 1.2em, sans 14px 1.2em”. Should some solution offering more web fonts surface (which will probably happen in the very near future judging by potential) we need a way to work with the fact that different fonts are…different.

I think that’s it. I want CSS to have strong tools to let me put an HTML element where I want it, make it look how I want it to, (both without assuming anything for me which I then just have to tell the browser to override) and I want to be able to trust that the browser will do what I ask or else rollback to a stylesheet that it can handle.

#78 On January 25th, 2008 1:26 pm Andy Budd replied:

I would like:

A parent selector
Linear gradients
Irregular shaped boxes
Presentational animations/fades

I don’t think we should have:

Variables (useful, but CSS isn’t a programming language)

I will cry if we have:

Coloured scroll bars

But mostly I would like:

The CSS-WG to finish what they already have without adding more features. CSS4 anybody?

#79 On January 25th, 2008 2:36 pm thinsoldier replied:

@jive (#56)
See my earlier posts on alpha/transparency masks, svg clipping path masks, and svg/bitmap text wrap masks.

#80 On January 25th, 2008 2:50 pm thinsoldier replied:

The scroolbar of the main window chrome MUST NEVER BE STYLED.

However, I strongly believe than any scroll-bar on an overflow:auto element WITHIN _MY_ page should obey my wishes and allow me to style it however I want.

Use Case:
A website for old people with poor eye-sight and motor skills.
Using a couple scrolling areas on a single page so they don’t have to bother with all the complicated “back button” tom-foolery and style the scroll-bars to be FAT and impossible to miss or have trouble using.

Also, I’ve seen interesting layouts that had their “artistic vibe” completely destroyed by the OS X shiny scroll-bars. We should be allowed to style scroll-bars _within_OUR_ layouts for visual consistency with the overall appearance of OUR CROSS-PLATFORM WEB-APP.

#81 On January 25th, 2008 3:32 pm Tekopia » Blog Archive » Tell the CSS WG what you want from CSS3 - The Web Standards Project replied:

[...] Tell the CSS WG what you want from CSS3 – The Web Standards Project [...]

#82 On January 26th, 2008 1:03 am fantasai replied:

@Antti Rasinen – For effects not covered by other features such as multiple backgrounds, border-image, and calc(), XBL can add more boxes and generate content in a very powerful way. If there are some common effects that you feel really should be possible in CSS alone, you’d need to describe them individually.

@Stifu – That’s something I’ve thought about, actually. I think the tough part is figuring out what color/style to make the slanted edges. What would you expect?

@Diogo – See the ‘resize’ property. For dragging, you’ll probably have to check HTML5 since the effect of dragging involves semantics, i.e. knowing what the intent is.

@Moe – what would you use it for?

@Neal – That doesn’t help me much. I need examples of the end result you want to get on the web page. Telling me to look at a graphics program doesn’t help much because I know that designers often do further manual processing after applying a drop shadow and that processing would need to be built-into CSS.

@Gérard Talbot – Yep, defining behavior, or at least specifying preferred behavior, for undefined parts of CSS2.1 is one of our goals for CSS3. Some things will remain undefined, e.g. line breaking rules, but for box model stuff I think we do want more precision.

@hawken king – I’m not sure what “auto spanning text columns, with column span variable” means. Could you give some examples?

@Tom Coleman – I have no idea what you mean by that. You’ll have to explain more.

@Christian Norton – You can’t use CSS for escaping code. CSS applies to the document after the HTML has been parsed.

@Dave – I believe the HTML5 effort will be looking to create a recommended default stylesheet for HTML. We can’t set things to zero because many pages depend on the defaults. CSS can’t be versioned for the same reasons HTML can’t be properly versioned — that’s a long argument I won’t get into here.

#83 On January 26th, 2008 12:02 pm Andrew Senter replied:

They seem to of covered most of that I’m after;

1. Full control over the DOM using selectors. Seems to be part the way there, but I notice we’re missing a parent selector, and how about something similar to xPath? Although that could be seen as crossing into XML territory.

2. Background-size,multiple backgrounds etc; I truly believe that these beauties will greatly remove the need some people feel for extraneous HTML elements (for creating drop shadows, fancy corners, complex navigation items etc).

#84 On January 26th, 2008 6:48 pm Kenny replied:

Please read this, and take heed of the recommendations. In particular, the reference to ASCII art.

http://alex.dojotoolkit.org/?p=625

#85 On January 27th, 2008 10:47 am Harald replied:

Variables or constants would be nice.

/*Overwritable*/
$myred:var = #cc0000;
/*Not overwritable:*/
$myblue:constant = #000099;

p { color: $myblue; border: 1px solid $myred }

Another suggestion is float by a vector form, a bit like area elements with the keywords rect, poly and circle.

img.decoration {
floatarea: poly 1px 2px 3px 4px 5px;
float: left;
margin-right: 5px;
}

The floatarea my use paths in images to:

img.decoration {
floatarea: imagepath;
float: left;
margin-right: 5px;
}

Hyphenation should be supported by UAs in the future, so there is an need to handle it:

p { hyphenation: off; }
blockquote { hyphen-follow-limit: 3}

#86 On January 27th, 2008 12:50 pm peter replied:

I would like two simple things…
Imagine a div containing two columns; both columns have width 48%, one is floated left and the other floated right, neither has a height specified. The left floated div contains a lot of text, the right floated div contains a little text.

Firstly I would like a property meaning the element it applies to expands vertically to fill the containing element. E.g. my imaginary right hand column stretches to be the same height as my left hand column.

Secondly I would like a property meaning the element it applies to expands vertically to include all floated elements within it. E.g My container div visually contains the two floated divs (without having an extra element after the two floated divs which has clear: both).

I also like the idea of constants in CSS as per comment 4.

#87 On January 28th, 2008 9:54 am Anders replied:

Having the opportunity to vertically align content within a container would be good. Like margin:0 auto, but the other way round (margin:auto 0).

#88 On January 28th, 2008 4:17 pm Art Clark replied:

/*
If you’ve ever had the chance to read the “arguing” about the impementation of how scrollbars should/shouldn’t be included in the viewport’s dimensions, you know that each browser seems to have a different way of dealing with this. Microsoft had it half right by permitting the scrollbar to be styled, and firefox got the scrollbar half right by including the width of the scrollbar in the viewport’s area. I’ve read about hacks using overflow, but this is not consistant with all browsers either. How often have you read blogs with content in scrollable regions that were 1 em high, but there is a horizontal scrollbar which consumes all the visible viewport!
Maybe all I am looking for is an extended attribute to “overflow” like “inside” or “outside”.
*/
.box1 { overflow: auto outside }
.box2 { overflow: outside } /*same as box1*/
/*
scrollbar width when visible is not part of the viewport width(viewport gets wider)

For an example, open “Word2007″, then goto “Word Options”, then “Customize”. Resize this dialog to various heights, and widths to see how the tablist and listboxes resize for an example of inclusive, and exclusive scroll regions in viewports box1 style may partially apply to the tablist on left (“Popular”,”Display”,…”Resources”)
*/
.box3 { overflow: auto inside }
.box4 { overflow: inside } /*same as box3*/
/*
scrollbar becomes part of viewport width-the viewport does not get wider

Observe this behaviour in “Select” boxes in middle and right side of Word2007 dialog mentioned previously.
*/
/*
Notes:
Presently, achieving these effects is possible by adding some browser-targeted CSS and additional divisional blocks for presentation purposes only.
*/

#89 On January 28th, 2008 4:37 pm Art Clark replied:

/*
When can we start to style form field elements:
*/
option.item1
{
background-image: url(item1.png);
margin-left: 30px /*white space so that background image icon is visible */
}
/*
Bad syntax, I know, hoping that we might use a syntax similar to this to zebra-strip rows
*/
#table1 tbody td.elements[1,3,5,6,7]
{
background-color: #ff0000
}

#90 On January 28th, 2008 7:43 pm Simon Lilja replied:

This is, I believe, a simple and somewhat realistic request:

In a nutshell, I’d like to be able to offset/wrap background images. Anyone who’s been working with image editing tools (_any_ decent ones) should know what I’m talking about. Having a background image that measures 200×200 pixels and using this (imaginary) syntax…

body {
background-image: url(image.png);
background-position: -100px 0;
background-offset: wrap; /* This is just some made up syntax, it might not make too much sense but it’ll have to do for this example. */
}

… would produce a result like this: http://tinyurl.com/ysg5ej (pardon the ugly image)

Basically, instead of having parts of the image vanishing into thin cyberspace as it exits any edge of the browser window, that part will re-appear on the opposite end—both on the x and y-axis, of course.

I can think of several really useful uses of something like this, having “two” virtual background-images (made up of just one actual image as in the example) on either side of a liquid-size element is just one of them.

#91 On January 30th, 2008 5:27 am Paul B replied:

I would like to see and extension of inheritance where you can specify one class to inherit/apply the styles of another class from within the stylesheet itself.

Lite weight example:
Current practice is to assign two class names:

.pad10px{ padding:10px; } /* consistent padding for many text block divs */
.article{ border:1px solid #333; text-align:justify; }

…

What would be helpful is to assign the second (pad10px) class through the stylesheet:

.pad10px{ padding:10px; } /* consistent padding for all text blocks */
.article{ inherit:.pad10px; border:1px solid #333; text-align:justify; }
/* OR */
.article{ .pad10px; border:1px solid #333; text-align:justify; }

…

I also second the suggestion from C L re Nested selectors – I always look for ways to reduce duplicate content in the sytlesheets and this is a good way to do so.

#92 On January 30th, 2008 5:33 am Paul B replied:

Edit to previous post…. my div examples did not show up:

Example – current
<div class=”article pad10px”>…</div>

Example 2 – proposed
<div class=”article”>…</div>

#93 On January 30th, 2008 6:43 am Björn Weinbrenner replied:

I agree to Paul that an (multiple) inheritance / extension mechanism would be a very nice feature . I would like a java-like syntax
.redBackground { background-color: red; }
.blueBorder { border: 1px blue solid; }
.redButtonWithBlueBorder extends redBackground, blueBorder {
…
}

Regards
Björn

#94 On January 30th, 2008 7:41 am Ariel replied:

The problem:

Float a number of boxes, give them a fixed width if you like, but the content, and thus the height is not known ahead of time.

They don’t line up nicely. I understand why. I would like to fix it.

My idea:

Some sort of tag that says all the boxes should have the same hight.

Something like:

.box {
height: @foo;
}

.box2 {
height: @foo;
}

This basically means all block level elements using the same name in the height tag will all have the same height (specifically the height of the largest one).

Something like:

height: {@foo 10px}

Would mean the height of the largest @foo box, or 10px, whichever is greater. Min-height probably can’t substitute since I’d like to be able to do:

.box {
min-height: @foo;
}

.box2 {
height: @foo;
}

So box will always be at least as large as box2, but could also be larger.

And all the various permutations that this can provide. I would even suggest the the ID names are global – i.e. you can set the margin of one box to be equal to the height of another.

My syntax is not fully thought out, and I’m worried about pathological cases when one element affects another in a circular fashion. (Some kind of restriction or cycle breaking rule might be necessary.)

But you did ask what designers would like, and a syntax to have elements match, when the value (height, width) is browser determined would help tremendously!

Can I add something to this? An align tag that does the same thing: all the elements with the same ID align to the same spot plus an optional offset.

I’m trying to think of how to define the rules here, how to decide which elements should move, and at the moment I don’t know.

But since this is a wishlist, that’s another major item in my wishlist. (I once posted it on slashdot, and the idea got modded to +5. It was the only +5 idea Håkon did not reply to – he told me it was not fleshed out enough, and he was right. But it’s still a big wishlist idea – not just from me, but other people as well as the +5 indicates.)

#95 On January 30th, 2008 7:46 am Ariel replied:

To add something to:

height: {@foo 10px}

If 10px is greater than all the others, that means @foo is now equal to 10px, and all the other boxes should grow too.

And add a third element as well: an offset.

height: {@foo 10px +5px}

Means whatever size is calculated for @foo, add +5px just to this one element, but don’t change the meaning of @foo. (It doesn’t have to by the third item in the list the + (or -) before it tags it as being an offset, rather than an initializer.)

#96 On January 30th, 2008 10:16 am Phil Houghton replied:

Thanks for this opportunity.

The arguments for and against constants have done the rounds for a long time. Has anyone discussed what I might call “directed inheritance”?

e.g.

.class1 {color: #ABC456; background-color: #456ABC;font-size: 1em;}

.class2 {>>.class1; /* inherit properties from .class1 */ font-size: 1.2em;}

And – in response to the number of very large displays out there – some way of gracefully stretching fixed background images. Is that silly?

#97 On January 30th, 2008 5:30 pm Gérard Talbot replied:

Fantasai,

Section 5.12.2 The :first-letter pseudo-element should be clarified with examples (with screenshots) and should be a lot more easy to predict. Right now, there may be up to 30 different properties which may affect, may style first-letter… there are just too many properties which can affect first-letter IMO. At the very least, the expected rendering should be easier – a lot more easier – to predict in CSS 3.

Regards, Gérard

#98 On January 31st, 2008 8:02 am iain replied:

how come folks who wrote books on css haven’t commented yet? or have i skimmed too fast…

#99 On February 1st, 2008 3:43 am Chris Kennish replied:

I’d like to be able to specify colours for the bullets (UL) and numbers (OL) that are different from the (LI) text colour.

Also, I’d like to be able to reliably target the various different TYPES of INPUTS.

#100 On February 1st, 2008 12:10 pm Aaron replied:

It would be nice to have a style that would block inheritance/cascading. An example may be Test. This style is so needed because many web applications get inserted into websites as blocks that may be changed by hostile styles, and this would be a way to ensure consistency no matter what the user’s pre-existing style sheets were.

#101 On February 2nd, 2008 8:21 am Matt Wilcox replied:

Nice one Aaron – i had the same though myself yesterday when working on an old site where inheritence was causing big headaches. It’d be brilliant to have a

inheritance : off;

switch that could be used on an element.

#102 On February 2nd, 2008 8:22 am Matt Wilcox replied:

@ Chris Kenish

you already can target differnt input types. It’s just that IE doesn’t support the attribute selector; but the method is already part of the specification.

input[type='text'] { rules here }

#103 On February 4th, 2008 7:18 am Ron Wenton replied:

First and foremost:

Gradients.
They are used everywhere, yet we still have to resort to clunky image files to create them. Make our life easier, and save bandwidth while you are at it: Implement gradients in CSS3.

color: gradient( startColor, endColor, [linear|radial], [angle] );

(or implement using N colors for fancy gradients and inner-shadow-like properties)

You have rounded borders in the spec, gradients are needed for the exact same reasons.

CSS3 should give me the complete toolset I need to create a visually modern webpage, *without* resorting to external graphics.

Constants.
Eliminate the need for search and replace operations, let us structure the CSS through constants for easier editing, and save some bandwidth while you are at it.

$common border-left: 1px solid black;
$color1 color: #DEADBE;

.class { $common $color1 }

#104 On February 4th, 2008 7:49 am Ron Wenton replied:

Quick addition to my post: I see that the “svg can do it” argument gets thrown around in defense of not implementing gradients. I don’t like that line of reasoning.

A gradient should be “just-another-color”, ie usable in fonts, in borders, everywhere you can define a color.

The goal should be to give the designer a set of tools which allows him to do as much as possible without resorting to external files (an SVG is just the same as a gif, really, I do not find it a redeeming feature that I get to write the image using numbers rather than draw it).

The SVG argument can be used for any feature. You can always just make an SVG with rounded borders and then include it. Or use it to make shadows. And so on.

Gradients are used everywhere, it is an integral part of webdesign. It needs to be a part of the spec, just like red or blue. You can always just make “blue” with an SVG, right?

Take a tip from HTML5 here and see what they are doing. They look at *what is the common things out there that has no markup*. to replace floating , to replace ‘s with CSS fixes, and so on.

And one of the most common design elements out there, which have no markup and thus have to be made as images, are gradients.

#105 On February 4th, 2008 7:51 am Ron Wenton replied:

Fix:

Take a tip from HTML5 here and see what they are doing. They look at *what is the common things out there that has no markup*. column to replace floating div, menu to replace ul’s with CSS fixes, and so on.

#106 On February 6th, 2008 7:55 am Phil Houghton replied:

Ooooh! Styleable scroll bars please! Preferably using the same values as existing IE proprietary code.

#107 On February 8th, 2008 1:10 am Rayne Van-Dunem replied:

* Text gradients, with the option of not needing a background gradient image for it to render correctly.

* Greater behavioral capabilities, such as the ability to click a button which will dynamically scroll to another section smoothly. Currently, it can only be done in JavaScript, but I think it could fit in with the idea of giving CSS the ability to style the page without interfering with the basic readability of the webpage with, say, a voice reader.

Also, I agree with what everyone else has already said. Thanks.

#108 On February 8th, 2008 1:21 am Rayne Van-Dunem replied:

Also, as a markup language like XHTML, SVG is supposed to handle the bare minimum of 2D graphics (lines and such), not the whole kaboodle (color filling, gradients, etc.). It should be as manipulable with CSS as XHTML currently is.

Then again, I’d like to see if SVG + CSS can be used in future 3D animation, as the current solution for 3D animation in SVG is through JavaScript (as few browsers support SMIL). With the moves of the CSS WG towards incorporating basic animation, SVG could benefit from any CSS animation as well. A web animation standard could be developed around the greater capabilities of CSS in SVG.

#109 On February 11th, 2008 6:02 pm greg replied:

I read through about 92% of these suggestions so I am fairly certain that I am not duplicating anyone else’s input (good or bad?)… I have 2.5 longish suggestions / thoughts and they might be outside of the purist realm.

1. I would be interested in seeing CSS create a slowly and carefully expanding library of ‘standard’ fonts. The goal would be to solidify the display of web media not only on our current group of platforms but for different pixel depths in the future. The present situation with fonts seems to stagnate and I think if the organizing group were to say undertake the development of a standard font library that could help improve the situation with image replacement… The current morass that application development is in regarding higher ‘dpi’ or ‘ppi’ display is going to be compounded by difficulties on websites that cannot easily transition up… (MS is definitely the godfather of this issue because of the extra space added to text to maintain it’s ‘sharpness’) I would hate to think that web development could slow down the evolution of display technology even further.

who pays for it? read on.

1.5 (My half suggestion) – explore ways of bringing svg elements into css. This is attached to the previous thought. Because while I acknowledge that all fonts can’t (legally) be supported in a browser… if we could substitute characters, borders, corners etc with svg directly from css then the future for ‘hi-def’ web display would be a lot more certain.

I know some of this is available, but I like some of the suggestions above regarding svg css overlap and think there could be some interesting outcomes… like being able to specify a path in CSS for text to flow or be clipped where the path is an SVG import… some of this could be smooth like if you are specifying pixel values the browser defaults to raster (pixelated) display, but if you specify em or % the browser could switch to using a svg render. Maybe some forced controls and or hinting to boot. BTW: SVG is great for people without vector software, someone worried about that above. But some clean implementation of vector based display elements in CSS could be rad! And forward thinking.

2. Has any thought been given to an all or nothing approach with regards to CSS? It seems to me that the carrot and the stick need to both have a place in the discussion of why certain browsers are unable to display CSS ‘correctly’. Again, maybe this is a bit extreme, but I could see the organizing body saying hey we are an open development project, but if you want to implement our standard you have to do it accurately, otherwise we will pull you ‘license’ and force you not to display css at all! WOW, can’t believe that huh? but think about it… At this point the power has moved somewhat from the browser dev community to the web / app dev community. People want their youtube and their gmail and everything else, if you told even microsoft that you were going to stop them from using CSS incorrectly they would be hosed. There is the stick.

I would see there being some sort of practice of noting / patching CSS render bugs or flagging a company for inappropriate usage and forcing a css shutdown patch or legal damages. ($$$) With regards to the earlier font-library, you just shuffle that and svg support in with it. Hey you want to use CSS? Great, here is the kit… use it or lose it.

I think the purpose of CSS is eroded by poor / incomplete / intentionally inaccurate implementation. At least this is an interesting thought.

#110 On February 12th, 2008 8:15 am cynglas replied:

Wholehearted support for 2 of Dave’s points:

1. “0″ margin and padding on all elements rather than “this will make a page look nice when people don’t know what they’re doing’. The most frustrating case in point is the “collapsing border” model. Ditch it and let the designer set the aesthetic spacing between block elements as they see fit. What we currently have is built-in defaults arbitrarily demanding white space that breaks out of the unless you set an invisible “border” etc. etc. In other words give the end user full control of the layout tools without CSS trying to second guess what is good design. That approach just creates confusion and endless workarounds.

2. “Tables are the only or easiest way to achieve some of the most desired layouts”. Eric Meyer says the same thing in several books. So we need dedicated layout tools that are capable of the speed, intuitiveness and stability that tables gave to onscreen layout, without the disadvantages for accessibility and multi-agent deployment.

Specifically we need:

a) that can be quickly be set and remain associated in parallell across a screen (to form a grid-like framework that does not have to contain “tabular data”).

b) Parallel that can be grouped to auto adjust to the same height as the longest in the group (according to its variable content).

Quite often I read help tutorials that explain (at great length) that once you understand the way the CSS rules (eg the float function) were drawn up, then you can see why the complexities arise. Well yes, but the answer surely is to change the rules becasue they aren’t fit for purpose.

A cognitive suggestion for CSS3 planning: stop thinking of web “documents” on the model of just Word processors (like the awful Microsoft Word) and start thinking of flexibly designed spaces, more like DTP (eg. InDesign).

#111 On February 12th, 2008 6:55 pm greg replied:

To the previous post and Dave…

Agreed, eliminate the reset.css
Would a value that could be applied to the document or a tag do this or would it just default to no-assumptions mode?

#112 On February 12th, 2008 8:46 pm Dwight L. Stegall replied:

It doesn’t matter to me what you put in it. But I really don’t want to wait another 7 years for you to implement it. I’d like to use it sometime before I die. It’s time to stop dragging your feet and finish it. :(

#113 On February 12th, 2008 10:18 pm 겨미♡웹 replied:

Some CSS3 Idea.

Conditional selector depends on child nodes
ul(a:hover) {property:value;}
Code means select ul element that contains a element with hover statement.
Example
<style type="text/css">
ul { background-color: #999; }
ul a:link { color: bl…

#114 On February 13th, 2008 7:46 am Ron Wenton replied:

Support loading fonts from the website

font: url(…);

#115 On February 13th, 2008 1:07 pm Alexandre Falcoeiras replied:

solving important CSS2 issues like:

1 – a attribute to a container div to force all her child divs to be the same height, there are now dozens of ways to do that, css hack, javascript, div to behave like table row and table cell, background image “faux columns”.

it would be really nice to do that a unique attribute to the container div and all her child divs would be the height of the mother div which would have height:auto, it would´n matter f it had 2,3,4 columns.

2 – div overflow:hidden – there is a really important issue with anchors, solve the issue so the content does not slides up and down hiding the rest of the content, anchor in a div overflow hidden to behave like in normal html.

many thanks

#116 On February 17th, 2008 8:57 pm Lee Carré replied:

Relating to the “list-style-type” property.

I request a value for the “list-style-type” property to produce ‘decimal’ list numbering, which is artifically produced on such projects as the GIMP (documentation), Wireshark (documentation), and the IETF’s very own RFCs.

The effect I’m after is one in which the items of nested lists (eg a child list within an item of a parent list) is prefixed with the number value of it’s parent item followed by a dot, then the value of the child/sub list item.

An example:
(Hopefully my indentation will be preserved upon posting.)

1 Parent Item
1.1 Sub-Item
1.2 Sub-Item
2 Parent Item
2.1 Sub-Item
2.2 Sub-Item
3 Parent Item
3.1 Sub-Item
3.2 Sub-Item

This seems to be a popular stylistic choice, and it would be nice to have it applied by the browser (via CSS) rathar than require manual maintanence.

#117 On February 19th, 2008 3:51 pm Gus replied:

I agree with Paul B (91) and Björn Weinbrenner (93) : an inheritance is needed when css is used on modular projects.
For example : a core developement team maintains a main.css, which contains style for standard objects of a framework (eg : buttons), and an other team maintains a module.css, which contains style for customized instaciations of the standard objects (eg : buttons with a specific icon in background).
In this case, for example :
– the main.css will contain a.standard_button { background-color:gray; }
– the module.css will contain a.user_icon_button extends a.standard_button { background-image:user.png; }

#118 On February 20th, 2008 7:26 am mac replied:

I’d like to see somekind of nested selectors. For example like this:

img .smile {
display: none;
}

a:hover:external(img .smile) {
display: block;
}

I think that would look cleaner than this:

a:hover {
img .smile {
display: block;
}
}

Another thing I’d like to have is :target-referrer pseudo-selector. It’s includes links, that refer to element mentioned.

That/those would be useful when I want construct the whole site in to one xhtml-document using :target and absolute positioning like this:

/*This is what I have in my xhtml-document*/
Place one
Place two
…

…

…

…

/*And here is the css*/
.place {
display: none;
position: absolute;
width: 100%;
height: 100%;
}

.place:target {
display: block;
z-index: 10;
}
/*Changes color of all links which’ refer to .place (#place_one and #place_two)*/
.place:target-referrer {
color: red;
}

#119 On February 25th, 2008 9:09 pm Crumpetstilskin replied:

1 anything that ppl like and would rather do without scripting.
re comments preceding this one:
2 gradient could be similar to opacity. gradient would need similar params, such as % start vs end?
3 instead of rejecting parent selector(s), consider ways to limit/control them? insert numeral to indicate parent level? apply the style narrowly?

#120 On February 29th, 2008 12:31 pm Johan De Silva replied:

Have the ability for multiple background images inside a div or element.

#121 On February 29th, 2008 5:15 pm WaSP Member faruk replied:

Johan,

That’s already part of the CSS3 Borders and Backgrounds module; Safari 3, Firefox 3 (beta) and I believe Opera 9.50 (not sure about that one) already support it.

#122 On March 2nd, 2008 8:20 am Mark Wales replied:

These have all be mentioned before, but these are what I’d want:

Proper layout functionality: shouldn’t have to use float for page layout (other than for actually floating images and such). There should be an easy way to get a side-column to be the same height as everything else.

Multiple background images would also be very useful. It would hopefully rid the world of divitis.

Shadow support for any type of object. It would be misused by lots of people no doubt, but when used properly it could save a lot of image files.

#123 On March 2nd, 2008 6:39 pm Webmac replied:

- background-color with transparency would be nice
- background-color with gradient support
- extension of background-image for all kind of media types
[background-media: url("application/x-shockwave-flash","flash.swf")]
- support of x-repeat with non-zero start-position
- support of shadow for all elements

support for “intelligent” css selektors
- apply if element is parent of another element
- apple if element if n- or mod-n- child-element
- …

#124 On March 3rd, 2008 12:02 am Daniel Delaney replied:

Death to Faux Columns. Long live properly handled percentage values for height and width rules on div elements.

#125 On March 3rd, 2008 12:16 am Ali Sattari replied:

In addition to Matt Wilcox great ideas, i add:

* Rule includes:
p#description {
font-size: 14px;
line-hight: 120%;
margin: 10px autp 5px;
}
p#info {
@include(p#description);
color: orange;
}

* Parent selectors: some way to select the parent block using direct child elements.

Sorry if they have mentioned before or they are already in working drafts :)

#126 On March 3rd, 2008 12:28 am Ali Sattari replied:

Forgot this one:

* a way to exclude some elements in selectors, simply a NOT!

p.short-desc {
margin: 5px;
color: blue;
}
div#content p !p.short-desc {
padding: 10px;
color: black;
line-height: 120%;
}

Here we have some paragraphs with ‘short-desc’ class inside div with id ‘content’. and we need to exclude them from general paragraph styling (since it has its own style defined before and we do not like to reset unwanted rules after this)

#127 On March 3rd, 2008 3:24 am Thomas Peklak replied:

In my work there is often a number of styles that target the same area (e.g. header, footer, content). I would suggest to introduce something like a with block. This should lead to a much cleaner code and a good structure in the style sheet.

Example:

standard code
#header h1{…}
#header h1 a{…}
#header ul{…}
#header li{…}
#header li.current{…}

with block code

with #header{
h1{…}
h1 a{…}
ul{…}
li{…}
li.current{…}
}

If you structure your code this way, the code gets more legible and shorter and you would not even require a comment to know where the header starts and ends.

#128 On March 3rd, 2008 4:50 am David Storey replied:

Webmac: background-color with transparency can be done with HSLA and RGBA colour models. background-color gradient can be done with a SVG file (including using CSS to specify the gradient). I’m not sure about extending background-image to every media type, as it then becomes background-movie, or such, and you can never predict what plug-ins are installed. As SVG is an image type, you can do many of the things you’d want to do with interactive media like Flash. Only Opera supports this at present, but only supports static images, not animation. I’m not sure if this is a bug or a design decision (or part of the spec?) . Shadows can be applied to any element using box-shadow (or text-shadow for text). For selectors, there are many that fit the bill, such as nth-child, nth-of-type, first-child, last-child etc.

Ali: There is a not selector, that should be useable for that purpose.

For the debate on CSS vs SVG gradients, I personally think it would be best to get things in CSS that currently can’t be done cleanly (such as adding extra mark up and scripting), over things that are already possible in a clean manor. There is no doubt that the integration between SVG and CSS could be stronger though (CSS support in SVG is already strong, but not the reverse). You can already set the stop-color and stop-opacity of the gradient using CSS. It is just really the offsets, and the gradient direction you have to set up using SVG attributes (for a linear gradient). Using SVG in this manor, there is not much difference than it would be if using pure CSS for a gradient. If gradients are added to CSS though, it would make sense to make them syntax compatible with SVG, to enable transferable skills and less code duplication in the browser.

#129 On March 3rd, 2008 7:32 am goosweb replied:

body {width:full;height:full;}
#header {height:30px;background:#ccc;}
#content {clear:both;height:full;background:#ccc;}
#left {height:full;background:#ccc;}
#center {height:full;background:#ccc;}
#right {height:full;background:#ccc;}
#footer {clear:both;height:50px;background:#ccc;}

full size fixed….?

#130 On March 3rd, 2008 9:15 am Pavel Panchekha replied:

1. Gradients
Gradients are very difficult and annoying to replicate with images. It would be great if they could be replicated with CSS.

2. Variables
Especially for colors, to allow the layout to be easily changed

3. @engine
Select rendering engines. While it could well fail due to non-support from IE and other “behind” engines, it would at least provide a way to easily differentiate between browsers.

4. Grid
Already planned, but this would be awesome

5. a:hover->div#menu
A selector matching one element (such as the :hover above) allows rules to apply to another selector. Here, hovering over the link would (for example) show the menu.

#131 On March 3rd, 2008 11:05 am Manne replied:

p:line(0n+1) {
background:#ccc;
}

to select lines

#132 On March 3rd, 2008 2:27 pm Emil Ivanov replied:

I would like to see more CSS filters
This so old browser IE have some of them like alpha, grayscale, blur, invert, glow, shadow, drop shadow…

CSS have only opacity and drop shadow.

Also i would like to see more options for text decoration. For example styling the link is not a problem with border color and padding, but there is one big but: when the link is combined with image or background it becomes ugly mess, and inside the link there should be span which have to be decorated. This leads to extra markup. The text-decoration property is very limited, but combined with image is not bad. The reason why i dont use it, is because i want to control the line offset or to make the line with another style(dotted, dashed etc.), which at this time is impossible.

#133 On March 3rd, 2008 2:58 pm Emil Ivanov replied:

And one more thing:
I would like to control the border length. Creating navigation list with border only between every item is easier but the text is smaller than the borders and this is not the desired result thats why i use horizontal lines which are text and are the same height, but this is not very handy.

#134 On March 3rd, 2008 3:06 pm Neal replied:

@David Storey

“I see a lot of requests to do things in CSS that can already be done in SVG. ”

The same argument could have been used when they created background-color.

#135 On March 3rd, 2008 3:47 pm Ali Sattari replied:

@David Storey:
Thanks, i checked selectors module again and found it.

NOT pseudo selector: http://www.w3.org/TR/css3-selectors/#negation

#136 On March 4th, 2008 2:11 am Emil Stenström replied:

If I could chooce, I would focus CSS3 on two things: DRY and Ease of use.

Don’t repeat yourself (DRY) is something that goes strong in all other languages, but CSS is far behind when it comes to this. You’re required to repeat those colors, width, over and over again, and even if the cascade helps, it certainly does not go all the way.

Ease of use is the other current. Ever tried to explain to a programmer how web development works? It’s a real pain. Floats are really difficult to understand, and even though your remove the problem with differing browser implementations you need lots of time to understand even the basics.

#137 On March 4th, 2008 6:04 am Lea Verou replied:

2-color gradients via css as a background would be nice.
Also, text-orientation, that would allow somebody to specify a value in degrees and have the text rotated by that amount.

#138 On March 4th, 2008 7:32 am Oldřich Vetešník replied:

When I code horizontal navigation bars, sometimes I need to float them right instead of left, in this case I have to re-code ‘ul li’ elements in reverse order in order to make them look like they are floated left. If there was a thing that would re-order them on screen but leave them untouched in the code would be awesome, don’t know if it’s possible though.

(I’m sorry if I posted what has already been posted before, I cannot read all 137 comments right now.)

#139 On March 4th, 2008 5:45 pm Stephanie replied:

Thank you guys *very much* for soliciting this information, reading through it all, making sense of it in the context of your knowledge of CSS3, and working to incorporate it. I know I want to read the proposals but I want to do a lot of things. Also, thanks for the deadline. I never get anything done without a deadline :)

I’ve made a list of what parts of the specs I want sooner rather than later and what I would add given the opportunity. It comes complete with images for illustration, the problems I’d be hoping to solve, and what the css code might look like.

Part one of my CSS3 wish list. I’m happy to answer any questions or give more details.

Thanks!

#140 On March 4th, 2008 11:06 pm johan kim replied:

(i’m asian)

I want you to ask I want a added function of dotted/dashed in a border

When the border is dotted/solid, once we have the control of the border gop and width/height, we shoul be able to delete the meaningless border by image.

regards.

example >>
http://cfs3.tistory.com/upload_control/download.blog?fhandle=YmxvZzExNDYyQGZzMy50aXN0b3J5LmNvbTovYXR0YWNoLzAvMjEuZ2lm

.border {
border-width:10px;
border-height:3px;
border-margin:10px;
border-color:black;
}

#141 On March 5th, 2008 10:02 am Isaac Csandl replied:

(posted here)

Others have said this too, I’ll say it again for emphasis… I want:

Positioning and sizing of elements relative to others. Grouping of elements. I want to say #a #b and every div.awesome constitute a group named #superGreat, and then be able to say that #c should always appear below that group, or to the right of it, or 23 ems from the top left of the group. I want to say that every item in that group should have the height of the tallest one among them, based on its content… or that all the members should have their bottom edges aligned, and the tops move down based on each element’s size.

I realize that this is difficult to implement in a rendering engine because an amateur could easily create circular dependencies (to name just one of many). I’m not opposed to the browser throwing an error dialog in this situation. We’re all grown-ups here, and if you can’t think through your design well enough to avoid infinite recursion, then you need to think it through again.

Next, I want to have variables where I can define a set of color, borders, backgrounds, or whatever, and then apply that set of styles to other elements.

That’s about as simply as I can say it.

#142 On March 5th, 2008 10:52 am ailaG replied:

a. Calculations.
b. A variable for “my parent’s height/width”.
c. A variable for “the height/width I’m free to occupy”

b. and c. would solve the equal-height columns problem, for example.

d. floats that do matter for the parent’s height / width, to avoid all these “clearfix” elements that are, in fact, design.
(e.g. a picture gallery with all the thumbs floated would require clearing at its end, that should be native to css)

e. BOX MODEL
give us a way to mix border-box and content-box on a whim. I read about a suggestion for ‘border-width’ and ‘content-width’, that.

f. Several background images.
That could make round corners easier, as we could just make 4 background images and place them.

g. BACKGROUND POSITIONING RELATIVE TO BOTTOM / RIGHT. currently, background: url(foo.jpg) no-repeat 10px 10px; would set the background relative to the top / left sides of the box, but I know of no way to set it relative to the right / bottom sides.
It matters even more with RTL docs.

Thanks to anyone who got to reading this.

#143 On March 5th, 2008 10:57 am ailaG replied:

Oh, and conditionals.

e.g. #title:my-parent-is-very-thin #wideLogo { display: none; }
that way we could make a pretty liquid design for 1024×768 and above, and modify it to be small but pretty in lower proportions. In this example, when the window is too thin I removed a redundant graphic to make room.

It could be done by JS, I know.. but WHY?

#144 On March 5th, 2008 11:03 am ailaG replied:

That wasn’t conditionals. Oh, you know what I meant. Selectors that include info on the size of the parent, to help us deal with different window sizes.

#145 On March 5th, 2008 2:26 pm Emil Ivanov replied:

Would be good to see list-style-type on cyrillic.

#146 On March 5th, 2008 6:39 pm Jeroen Visser replied:

If I’m duplicating any issue here, please excuse me; see this comment as an extra kudos for the issue concerned.

What I’d like to see:

More control over bullets and numbering in lists
Think: sizing, color, alternative glyphs from the current font-family, etcetera.

Xpath like selectors
It would be really useful to be able to apply CSS to an element depending on its children. For example: say you have a blockquote, but not always with a accompanying [cite] element. Depending on the presence of [cite] you could display one of two backgrounds:
blockquote { (...) }
blockquote < cite { (...) }

I think this would greatly diminish the need for classes all over the place. ;-)

Typographic awareness
Most importantly: a true baseline grid, with an option to specify the distance from the first baseline to the top of the element’s box. This would greatly enhance legibility and design consistency within a site (for instance: lining up two content columns, or making tag clouds’ keywords stick to a common baseline).

Hyphenation
For most Western languages, it would be great to be able to specify where a long word can be hyphenated, without resorting to injecting all sorts of unicode characters in the content. Hyphenation essentially is a presentation issue (to avoid ugly gaps in left or fully justified text), so I’d guess it’s in its place in CSS.

Just my two cents. Thanks for this opportunity, and I’m curious what makes it into the CSS3 working draft!

#147 On March 5th, 2008 9:18 pm Soon-il DDang replied:

hello… i’m still green, but i want to tell for css3 style module…
i have things for scrollbar style… i was know this scrollbar style modul for ie only, and i think long time for this scrollbar…

if i want to tell for this module…
this style code…

/* this is pseudo class code exsample… */
div.box:scrollbar {
scrollbar-width: 3;
scrollbar-face: #555 url(img/blahblah.jpg);
scrollbar-heightlight : #ccc;
scrollbar-shadow: #000;
scrollbar-arrow: #fff;
scrollbar-track: #fff; }

i want to change scrolbar color and style in css3 spac too… ( scrolbar style fot more web standard browsers ) and i want to able to chang transparent color too…

#148 On March 6th, 2008 10:14 pm Soon-il DDang replied:

hello… i have things for anchor element style too…
i was think to able to toggle event for anchor and box in css3 spec…

/* ex – pseudo class example for toggle event to anchor and more element */

div.box a:toggle {}

/* hide eventing menu */
div.box ul {display: none;}
div.box:toggle ul {display: block;}

if user want to make toggle event to more menu or banner menu, it will be make and use javascript till now, but it is complex…
so… i was think to can use toggle event for more element in css3 spec too…

#149 On March 6th, 2008 10:26 pm Soon-il DDang replied:

ah… my mistake…

/* ex – hide event menu */
div.box ul {display: none;}
div.box:toggle-on ul {display: block;}
div.box:toggle-off ul {display: none;}

#150 On March 7th, 2008 7:23 am Darko Laus replied:

Hello…

Wouldn’t it be neat if we could have variables in CSS3?

For example you define a variable called my_color (and the syntax could be similar to PHP – with a $ before the variable name)

$my_color: “#FFFFFF”;

and then in the code you just use it like this

border: 1px solid $my_color;
background-color: $my_color;

It would be much easier to maintain the website with just changing the variable value (if you decide to change the color for example) then to change each induvidual value every time…

Another suggestion – will vertical alignment be possible in CSS3?

#151 On March 7th, 2008 5:00 pm Stephanie replied:

Ah, I just remembered the problem I’ve been wanting calculations to try to solve.

With the standard box model there’s no way to have to divs that are each 50% of the screen AND have padding, margin, or border. There isn’t, in fact, a way to style anything an accurate percentage width of the screen and give it padding, margin, or border.

In an ideal world we could say:
#box{
width:50% -20px;
border:10px;
}

There are actually two other solutions to this particular problem. Setting the box model:

#box{
width:50%;
box-sizing: border-box;
border:10px;
}

Or being able to dynamically define an inner box like comment #31 suggested:
#box{
width:50%;
}
#box:inner{
border:10px;
}

Thanks again.

#152 On March 7th, 2008 5:09 pm Stephanie replied:

I’m going to admit to myself I’m not going to have time to read over the layout module before Saturday but I saw a demo that Andy Clarke did of the bit about the slots and it worries me. It seems really unmaintainable.

Not having read it myself there is one thing that I thought would improve it though it may already be part of it:

Not having to define the slots in alphabetical order a.b.c. For example could also be a.f.m. That would make it much easier to make a.a.a.a.a.a.b.c.d.e.f into a.a.a.a.s.s.b.c.d.e.f without having to redefine a-f.

#153 On March 7th, 2008 8:01 pm Ben 'Cerbera' Millard replied:

I’ve blogged some review and ideas at What Ben Millard would like from CSS3. A lot more than I had planned to, actually.

Main things from my perspective as an author are:

widespread implementation of useful stuff from CSS2;
avoiding a proliferation of features which all do very similar things in CSS3;
and making CSS easier for authors.

#154 On March 8th, 2008 10:43 pm Gyrobo replied:

I’d really appreciate those nth-word selectors.

And maybe an nth-letter selector, which could be used in conjunction with web fonts to create some really nice effects.

Also, could you add back in the :indeterminate pseudo-class? That would help users more easily see which options they haven’t selected yet.

ex.
input[type=radio]:indeterminate + label:after {
content:” Select One”;
}

#155 On March 10th, 2008 2:21 am Bernie Zimmermann replied:

Back in 2004 I expressed a need for ignoring all styles for a page element regardless of any other normal styling rules that might have normally been applied due to inheritance, etc. If there’s a way to do this currently, I’d be interested in knowing. If there isn’t, then it would be cool to see it considered for CSS3.

#156 On March 10th, 2008 3:59 am Fenring replied:

Everyone is coming with great ideas and if all this is developed in CSS3, it’ll be great.

But I’m more concerned about HOW you will implement these features. Will you add yet another way to do things we already do ?
Please don’t.
I agree with David Storey.

If I want a complex gradient, please let me point (xpath, xpointer) to the corresponding gradient in an svg document.
If I want an animation, please let me use SMIL.
If I want a filter effect (blur, shadow, noise, …), please let me point my svg again.

Thanks heaps !

#157 On March 10th, 2008 4:13 am akrem replied:

i could need a pseudo-class that select evey even child in an element for exaple a table:

table:evenchild{backgroundcolor:grey}

this one has a grey bg

this one has a grey bg

this one has a grey bg

ans so on…

it would be possible to crate tables with alternating backgroundcolors like this http://www.innoq.com/blog/phaus/table.before.png

#158 On March 10th, 2008 12:03 pm WaSP Member blawson replied:

Thanks everyone. Comments are closed. To contribute to the discussion, please use the W3C mailing list www-style, which is open to all.

Return to top

Post a Reply

Comments are closed.