W3C home > Mailing lists > Public > www-style@w3.org > June 2006

column and form text-input pseudo-classes

From: C. Scott Ananian <cscott@cscott.net>
Date: Sat, 10 Jun 2006 15:08:26 -0400 (EDT)
To: www-style@w3.org
Message-ID: <Pine.LNX.4.61.0606101428580.30378@cag.csail.mit.edu>

I've noticed two minor deficiencies in the current CSS standard which I 
thought I might bring to the attention of the august members of this list:

1) the current multi-column css spec is very nice:
     http://www.w3.org/TR/2005/WD-css3-multicol-20051215
    but often items at the top/bottom of columns want to be rendered
    slightly differently than their companions.  For example, imagine a
    styled multicolumn list, where you might want to put rules between
    items, but not put a rule at the very top/bottom.  a selector for
    top/bottom of a column would be helpful, eg:

    .multicol li { border-bottom: 1px solid red; }
    .multicol li:column-bottom { border-bottom: none; }

2) when styling HTML forms, a common desire is for a text input element
    which displays some suggestion to the user (ie, "Enter search term")
    when it is empty, and removes that suggestion once the user has
    started to enter some data into the form.  It seems that something like:
        form input[type="text"][value=""] { /* ... */ }
    could select an empty text input element, but in fact the 'value'
    attribute is static and is unaffected as the user begins to type into
    it.  It is for this purpose (in a different context) that the :checked
    pseudo-class was added to CSS3:
       http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#UIstates
    It would be nice if we had an :empty or :edited pseudo-class for text
    input elements to parallel :checked, and allow something like:
      form input[type="text"]:not(:edited) {
        background-image: url("input-prompt.png");
      }
    where the input-prompt.png image says something like "Enter search
    term" in a light font.  (Other more complicated effects would also be
    possible.)

    An even better solution would expose the *dynamic* value of the 'value'
    attribute of <input> elements to CSS -- and this could replace the
    current 'checked' pseudo-class.  What's needed is a pseudo-attribute
    reflecting this value; this could be done in the XHTML interface to
    CSS, not even in CSS directly:
        form input[type="text"][::value=""] { /* ... */ }
    and of course, you could use the substring matching selectors then as
    well.

Finally, one brief note on the multi-column specification and floats: A 
common layout for articles is multicolumn with some floating diagrams in 
the columns.  Current implementations seem to handle oversize floats in 
columns poorly -- the float overflows into adjacent columns.  It would be 
nicer if the column layout algorithm took the float sizes into 
consideration when chosing the minimum size for the column so that the 
diagrams are guaranteed to fit.  The spec might require that column 
min-width be at least as wide as the largest contained float, but (I 
think) this is inconsistent with how floats are handled in non-column 
contexts (where they are allowed to overflow -- right?) A workaround now 
is to set 'column-width' to the figure size, but what is really wanted is 
a 'column-min-width' property, since the column-width is typically 
set in ems to be proportional to the font size, while figures are usually 
a fixed pixel size (at least until widespread adoption of SVG).
  --scott

DES AEFOXTROT bomb Dictionary Cocaine milita explosion SKILLET Delta Force 
Ft. Bragg ECJOB quiche Honduras pending UNIFRUIT WTO SEQUIN QKENCHANT
                          ( http://cscott.net/ )
Received on Sunday, 11 June 2006 18:49:47 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:45 GMT