• 200820 Jan

    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.

    Remember that the Working Group want examples of what you are trying to achieve, so that they know if current proposals fit that need, or they can think about adding new functionality. Also state why you want to be able to do that, if it isn’t obvious. They are not looking for feedback on syntax, so just leaving a list of new properties you want added won’t be helpful. Also try to check the latest draft modules to see if your proposal is already possible. Things like rounded corners (border-radius) and striped tables (tr:nth-of-type(odd); or nth-child(even); etc.) are already possible. There may be things that you want to be able to do with a property that isn’t possible in the current spec (such as being able to have an inverted rounded corner using border-radius for an example off the top of my head). If this is the case then the suggestion will be very much worthwhile.

    Also remember that there is no guarantee that things you suggest will be added to the spec, even if it makes sense, and is technically realistic to achieve.

    We at CSS3.info are planning to have a wiki (or similar system) to collate feedback on CSS3 in one place, which can be referenced easier than a mailing list. We will include the most popular suggestions from the WaSP post (with full attribution) when the wiki is in place, and open it up to the public to edit. If suggestions get added to the spec, we can also include the syntax that will achieve that suggestion, and eventually a demo that will produce the same result, once it gets implemented.

    You can skip to the end and leave a response.

  • Comments

    • 01.

      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…

    • 02.

      Something like “color: transparent;” (for text) or “content: invisible;” (to just not display the content of an element, but render the page as if it were there) would be nice.

      I have a link on my website that goes to the main page of the site. It’s just an ordinary <a></a> tag with the text “Home”. With CSS I changed it to my logo (with background-image), but I am not able to hide the text (“display: none;” on the <a></a> removes the entire link). I don’t want to use an tag for this, because I use other style sheets without the logo – and as you know, separate content from style!

      BTW, strangely this only works the way I want it in Firefox and Konqueror – Opera only displays the logo, but makes the link unclickable. Is it because I probably use some not so well-known selectors?

    • 03.

      Oops sorry, using angular brackets messed up my previous comment. :( I hope you can fix that.

    • 04.

      It would probably be best if these suggestions were on the WaSP site, to keep the comments in one place.

      color: transparent; already exists in CSS3. See http://www.w3.org/Style/CSS/Test/CSS3/Color/20070927/xhtml1/t040203-transparent-1-a.xht. You can also use content: ""; to clear the content, but that wont set it to the same size as it was, as far as I know.

      You can use the content trick above to make your link display correctly, or use line height to hide the text off screen.

    • 05.

      I hope to see gradient colors someday in css:
      Would be awesome to use them instead images.

    • 06.

      Thanks for the content:”” trick, I hadn’t thought of that. I encountered the same problem with my site: I have menu buttons made with background images, and I wanted to have a text fall back when CSS is off.
      I noticed Firefox and Safari supported color:transparent without any problem, but not Opera. As for IE, setting the font-size to 0 did the trick for me. It leaves a few barely visible pixels that you don’t notice unless you check closely, but that’s an acceptable hack to me, for the sake of accessibility.

    • 07.

      transparent works for Opera, but not in color yet, as this wasn’t an allowed value in CSS2.1. It is most likely just a matter of linking the current code to be enabled for that property.

    • 08.

      In my site menu example I brought up above, transparent text still has a tiny flaw that content:”” doesn’t have: you can select it to see it.
      Not a very big deal, but still not totally perfect for what I wanted to achieve. But still totally acceptable.

    • 09.

      @David Storey:

      Thanks for the trick with “content”, but it works only on Konqueror and Opera for me. Not even the Firefox 3 Beta changes the content to what I want. :(

    • 10.

      Marcus: yes, that’s why you need to use color:transparent for Firefox and Safari on the side.

    • 11.

      Marcus: That is because Firefox doesn’t support content in CSS3. It only supports it in CSS2.1 (i.e. on :before and :after).

    • 12.
    • 13.

      To repeat David’s call; please post suggestions on the WaSP site, so the Working Group will see them. They’ve promised to look there (and on their www-style mailing list, of coure).

    • 14.

      Matching attributes with a NOT modifier.

    • 15.

      I would like to see some facility for supporting isolated cascades in css3, to support portal systems that are built from modular units. Currently CCS assumes that only one stylesheet applies to the overall page, and without using braindead techniques such as IFRAMES, it is difficult to create module templates that standalone and can be assembled without negative interactions with the overall cascade description.

      See: http://tshawkins.blogspot.com/2008/01/what-i-would-like-in-css3-save-restore.html for more

    • 16.

      “”We at CSS3.info are planning to have a wiki (or similar system) to collate feedback on CSS3 in one place, which can be referenced easier than a mailing list.””

      IS this wiki up yet? I look forward to it. Thanks

    • 17.

      […] Let the CSS WG Know What You Need From CSS3 – David Storey […]

    • 18.

      JavaScript has “//” to comment a single line and “/* … */” to comment out a block of lines.

      This would be great in CSS files as well. I like to comment my CSS files but then if I want to block out a section of CSS code, for whatever reason, and there is already a comment within this block it won’t work.

      For example;

      /* This is a simple box */
      padding: 4px;
      background-color: #a0a0a0;
      border: 1px solid #808080;

      Now if I want to comment this out for any reason, this won’t work. The closing of the original comment interferes

      /* This is a simple box */
      padding: 4px;
      background-color: #a0a0a0;
      border: 1px solid #808080;

      Whereas, borrowing commenting from JavaScript, this would be ideal;

      // This is a simple box
      padding: 4px;
      background-color: #a0a0a0;
      border: 1px solid #808080;


Advertise here?