List of suggested extensions to CSS

1. Columns

Especially for printing, but also possibly on wide screens, text is often displayed in columns (also known as newspaper columns, or snaking columns).

Desirable features are:

• a way to specify the (approximate or min/max) width of a column, and let the actual number of columns depend on the width of the containing block.

• a way to make floating boxes float to the edge of a particular column, or even span columns.

• specify whether columns are balanced, or have a particular height (the page height, e.g.)

• make columns as high as the viewport, necessitating horizontal scrolling only (useful, e.g., for spreadsheet-like displays)

• specify rules and gaps between columns

One concrete proposal is as follows:

Three properties ('column-number', 'column-width', 'column-gap') and one shorthand property ('columns') set either the number of columns, the width(s) of the columns, or both. They are not inherited. For example:

DIV.main {
    column-number: 2;
    column-width: auto;
    column-gap: 1em
}

formats the DIV as two balanced columns, each of nearly half the width of the element.

Properties 'column-rule-style', 'column-rule-width', 'column-rule-color' and the shorthand 'column-rule' determine the style of the vertical rules between the columns. These properties are inherited.

For a similar idea, see e-mail by e-mail by David Baron.

For more details see Chris Wilson' proposal [member-only link].

2. Swash letters and other glyph substitutions

CSS2 can specify fonts, but if a font contains multiple glyphs for the same character, there is no way to get them (other than by creating a new font with the alternate glyph and the default swapped...) Maybe CSS should have a way of indicating which glyph to use for each character in the source. Problem is, of course, that there are no standard names for glyphs. The index number of a glyph inside a font file is unreliable as well.

Somewhat related: control over ligatures. In Latin scripts, the rule is simple enough to leave to the UA: always use all that the font provide. Occasionally a writer may have to insert a zero-width-space between two letters where tradition forbids a ligature, but otherwise the use of ligatures is seldomly a style question. In Arabic, things are different. Varying the amount and complexity of the ligatures is a common device to distinguish different types of documents.

3. Running headers and footers

At the top and bottom (but maybe not only there) of a document that is split over several pages, you often find things like page numbers, author, title, date, current section, keywords, etc.

Robert Stevahn is collecting requirements. [member-only link]

1. We must support an arbitrary number of 'objects' in the header/footer areas.
2. We must be able to align these objects arbitrarily with respect to the boundaries of the header/footer areas.
3. We must be able to support running headers/footers. For example, we must be able to include the current page and chapter number in the header/footer without knowing this information a priori.
4. We must support two kinds of generated running information: page-based (i.e. page numbers, footnotes & some figure numbers) and document-based (i.e. chapter numbers).
5. We must be able to insert the current date/time into the header/footer area.
6. We must be able to extract data from the document for inclusion in the header/footer area. For example, if H1 elements define chapter titles, we must be able to extract the contents of these elements for running headers/footers.
7. We must be able to suppress the display of this extracted information in the body of the document. For example, a confidentiality clause that is pulled out into the footer area does not need to be repeated in the body of the document. However, you would want to display it in place when using a non-print medium.
8. We must be able to style portions of header/footer content at an appropriate level of granularity.

4. Cross-references

If you print a document with hyperlinks to parts of itself, you might want to print them as "see page 17" or "(section 5.1, page 53)" or "list item 4", See Daniel Glazman's e-mail.

5. Vertical text

Vertical text for the whole document, but also mixing vertical and horizontal, within a line, or on a page. For example, in vertical text in Japanese, it is quite common to put small numbers (2 or 3 digits) horizontally.

6. Ruby

Ruby are small annotations, usually written on top of a character in Japanese or Chinese, that either give the pronunciation or the meaning of the characters under them.

See Microsoft's proposal. [member-only link]

7. Diagonal text & text along a path

SVG will probably provide means to do the complex things, but a diagonal header above a table column might be possible without SVG. See also e-mail by Jeffrey Veen. [member-only link]

8. Style properties for embedded 2D graphics

When you embed a PNG or GIF, you can only adapt the colors of the text to the graphic, but with SVG, you should be able to do it the other way round: if your page is red, then the graphic should be drawn in red lines as well. You could specify the style for the text and the style for the graphic in a single style sheet, and when the SVG is embedded/linked from an HTML page, it could inherit the style sheet. This needs cooperation with SVG [member-only link]

9. Hyphenation control

Properties for turning hyphenation on/off or settings in between: highly undesirable, avoid two hyphenated lines in a row, no restrictions...

Maybe also a way to list hyphenation exceptions (difficult words) in the style sheet.

10. Image filters

Primitive (raster-) image operations, which can be applied to either the foreground, or both the foreground and background of an element, and which can be chained in sequence to create more complex effects.

Examples: convolution matrices.

11. Rendering objects for forms

Including control over look of interaction objects in their various states. Keyword 'normal' or something similar to revert to normal look for user's platform.

Note: only the look is set with CSS. You can make an element look like a native button, and you can maybe even cause it to change its look when the user clicks or otherwise selects it, but it won't affect anything outside itself, or send anything to a server, unless it also has the semantics of a button, over which CSS has no control.

See also Tantek Çelik's proposal. [member-only link]

12. A pseudo-element for the URL #fragment-id

Some URLs refer to a location within a resource. This kind of URL ends with "#" followed by an anchor identifier (called the fragment identifier). URLs with fragment identifiers link to a certain element within the document, known as the target element. For instance, here is a URI pointing to an anchor named "section_2":

http://somesite.com/html/top.html#section_2

The target element could be styled with a :target pseudo-class:

:target { color: red }

If the URI that has been followed has no fragment identifier, the rule above will have no effect.

This idea was first suggested by Russell O'Connor, in an e-email to www-style@w3.org, March 1998.

13. Floating boxes to top & bottom of a page

In paged media, elements are often floated to the bottom or top of the (next) page, because leaving them inline would cause ugly page breaks, and they are too wide to float to the side.

A simple solution is to add 'top' and 'bottom' to the 'float' property, and possibly introduce additional properties to configure how many floats can accumulate at the top of a page, or how far from its original location an element can float.

There is a connection with footnotes here. See also numbered floats below.

14. Footnotes

Footnotes are somewhat like floats that go to the bottom of the page, but they also leave a footnote marker behind. Therefore they might need special treatment. Endnotes should be just a stylistic variant of footnotes, but how do you indicate where the endnotes go?

A footnote is also like a hyperlink, so maybe it should be possible to render the target of a hyperlink in a footnote to the source of the hyperlink.

See also numbered floats below.

15. "Tooltips"/"balloonhelp"

Some connection with footnotes/endnotes. See thread [member-only link] in CSS & FP WG. The text to pop up could be an element in the document itself, or a hyperlinked document.

See also folding lists below.

16. Math

MathML has presentation objects. Should they be added to CSS? And should CSS have additional properties for the fine points of mathematics typesettting?

17. Folding lists

Traditionally, hypertext systems have included a type of hyperlink that inserted ("transcluded") linked text in the text it was linked from: the first click unfolded the text, the next one hid it again. Like with tooltips/balloonhelp, this display mode could be applied to elements in a document, but also to whole documents. The first replaces, e.g., a list with a single button that unfolds the list. The second replaces an A element with the document it points to.

The property for the second method (using hyperlinks) could be as simple as:

DIV.expand {hyper-display: folding
  /* or: replace, pop-up, new-window,... */}

meaning that within a DIV with CLASS "expand" all hyperlinks, when activated, will cause the target document to be displayed in-place, replacing their source anchor. Browsers would need to provide a way to undo the effect, of course.

What will be the style of the included document? It should probably be the same as the document it is included into, or maybe that is under the control of another property. (A question of another type: any new legislation necessary to stop people from maliciously transcluding other people's documents?)

18. Page-transition effects

When one page is replaced by another, and the new page doesn't take too long to load, the transition between the two can be made a bit more interesting, with effects like those commonly found in slide show presentations: wipes, fades, checkerboards, etc. For example:

A.local {transition-style: fade}

19. Timed styles

Clock-controled styles, drawing ideas from SMIL. (Although SMIL can probably do it better.)

20. Leaders

Tables allow tabular information to be presented in certain ways, but one common effects is missing: leaders.

"Leaders" is the name of the row of dots that connects data in two columns, often seen in ToCs, but also in wide tables when there is a danger that the eye can't connect the two columns. The dots in subsequent lines are usually aligned vertically, but not always. Sometimes they are not dots, but lines, arrows, or other things.

Chapter 1. Introduction . . . . . . 1
Chapter 2. The life of bats . . . . 3
Chapter 3. Bats and ants  . . . .  34

21. Smart tabs

In a table in which one column has a few entries that are longer than most others, it is sometimes useful to make the column narrow, and allow those few entries to extend into the next column. The data in that next column then moves down one line. The same effect is also used for right aligned author names after a quote, or certain kinds of bibliographic references: if the name fits on the same line as the last word of the quote, it is put there, otherwise it is put on the next line.

Paper . . . . . 12.50
Pens  . . . . .  3.75
Special paper to wrap
  around other paper
. . . . . . . . 24.00
Pencils . . . .  1.10
               ------
Total . . . . .  0.00

Here is a quote from an e-mail:

I have two tabulator positions (say at 60/80 and 70/80), pieces of text (align=justify) that are to extend over the whole line (from 0 to 80), and then I want to insert something like <TAB=60>. The cursor should jump to the tab position 60/80 (in the same line if there is enough space, otherwise in the next line) and I want the text in this tab row to be aligned to the right. Then I have another tab stop at 70/80 with the same requirements. After a "end of line" <BR> or <P>, I want to return to the plain text extending over the whole line as before.

[9 Apr 1998, Gerhard Schon <worldcoins@metronet.de>]

22. Spreadsheet functions

Some parts of a document may be redundant in a very straightforward and easy to specify way, such as the sum of a column of numbers, the amount of sales tax on a paid price, or a word or phrase that is repeated in several places.

There are at least four ways to deal with this:

1. do nothing: all redundancy is handled at the "server-side," i.e., by the author of the page, possibly with the help of scripts or a macro processor.
2. extend HTML: elements in HTML could express that their content is computed from other elements.
3. extend CSS: the 'content' property could accept functions.
4. develop a spreadsheet format (in XML), that can then be embedded in HTML (via the OBJECT element); a way for OBJECT to inherit the style sheet is also needed.

23. Non-rectangular wrap-around

Either driven by the shape of the image (the parts that are X percent or more transparent), or by a shape specified in the style sheet. The simplest proposal dates from 1996, and adds the keyword 'contour' on the 'float' property. See WD-css1-960726:

IMG {float: left contour}

Specifying the shape explicitly in the style sheet can be done with a similar syntax as that used by the 'clip' property.

24. Gradient & stretched backgrounds

It is currently not possible to make a background image that is exactly as wide as the element it is behind. CSS allows it to be centered or tiled, but not resized. With the coming vector graphics formats (SVG), it seems especially useful to be able to scale a background image.

One particular example is a color gradient: a background that changes gradually in color between two points or sides. Rather than an external image in SVG, this might even be a primitive in CSS.

25. Textures/images instead of foreground colors

CSS can set the color of text, but in some headings especially, people might want not a color, but a pattern mapped on the letters. (See also e-mail by Jeffrey Veen.[member-only link])

26. Transparency

Transparency (as given by the 'visibility' property, is currently limited to 0% and 100%. Values in between are needed for some effects with overlapping texts. Transparency can also be added to the <color> type, e.g.: rgba(40%, 40%, 100%,70%), for a 70% opaque light blue.

27. Constant expressions

You can set 'font-size: larger', but wouldn't it be nice to be able to say 'font-size: font-size + 2pt'? or 'line-height: max(10pt, width/12)'

As long as these expressions can be evaluated at the time the element is loaded, the extra work isn't much bigger than for percentages. On the other hand, specifying such an expression in a WYSIWYG and/or Direct-Manipulation editor isn't easy. Limiting the expressions to a small set might allow such an editor to provide them in a pull-down menu.

28. Symbolic constants

If the same value appears in multiple places, such as all headings getting the same color, you can use rule grouping:

H1, H2, H3 {color: #faa}

Some people find it more convenient to use grouping for other purposes, and use a symbolic constant instead. E.g.:

@define orange = #faa;

H1 {color: orange}
H2 {color: orange}
H3 {color: orange}

29. Mixed mode rendering

CSS can specify style sheets for aural rendering and for vusal rendering, even in the same style sheet, but it cannot specify a style for a device that can do both at the same time. And yet, for a device with a small or hard-to-read screen (mobile phone, car information system, TV), you might like to specify that some parts of the document are displayed (headers, for example) and others are spoken (the rest).

(Since this is multimedia, it probably belongs in SMIL, though.)

30. Grid-device properties

Control for spacing on a TTY device. An em doesn't mean much in text mode. How do you say that the line should be indented by two characters? A new grid unit could be added for such media. A braille device has similar requirements..

31. Co-dependencies between rules

Style rules can fail, because the UA is unable to allocate the necessary resources (no more colors, for example), or because the UA doesn't implement a particular rule (CSS1 browser with a CSS2 property, for example). Designers can provide a fallback for the latter case, but only for that same property. They cannot replace a failed color with an underline.

CSS could introduce a notion of success/failure for rules, and provide, for example, selectors that apply only when some other rule fails.

32. High-level constraints

Instead of specifying specific values for properties, one could give relations between properties and constraints on their values, and then give some criterium to optimise. For example, a certain element must have a larger font size than another element., or the indent must be less than 25% of the width. The actual values would then be found by a constraint solver.

33. Float: gutter-side/fore-edge-side

Currently, elements can be floated left or right. In double-sided printing, you might want to specify that an element floats to the left or right side, depending on whether the page is a left or right page. Other possible names for the keywords: inside/outside, back-side, outer-edge. See Daniel Glazman's message. [member-only link]

Similar mechanisms for other properties that have left/right values: caption-side, running headers and footers, page numbers, and maybe even text-align.

34. Icons & minimization

Replacing an element with an icon, which, when activated, expands into the normal contents. The icon for the toplevel element could be used by a browser as its own icon, when the browser itself is iconified.

icon: url(some-image)

How is it specified that the element is collapsible? How is the spacing around the icon specified? How is the initial display mode specified? See also tooltips/balloonhelp and folding lists above.

35. Namespaces

Some XML-based formats may allow other XML-based resources to be directly embedded, instead of linked via elements like IMG or OBJECT. For these documents it may be handy to have separate sections in a style sheet that only apply to the outer document, only to the embedded one, or to both. One suggested syntax, inspired by the @media, is

@namespace url(url-identifiying-a-format) {
  ... format-specific style rules...
}

This would work for document formats that use XML namespaces (see draft) for mixing formats. The style rules in such a section only apply to elements in the document that have the given namespace URL, or whose parent is in that namespace. It would most likely also cause any namespace-prefixes to be discarded in the document. (Normally, an element name like <x:foo> is just regarded as a name of 5 letters x : f o o, but inside this @-rule, the "x:" would be stripped before matching against a selector.)

The format may also be identified by a MIME type instead of a URL, if the embedding is an XML-based format that has a registered MIME type.

36. Braille

Properties for braille could include

• whether to do contractions or not (contractions are abbreviations: certain very common words are replaced by single codes.These codes are language-dependent, and probably even variable within a language.)
• how to "explode" a table: re-order the cells of a table that is too wide.
• paper sizes

37. Numbered floats

Floats can be used to create side-notes, and, if floats are extended, probably also footnotes and endnotes. However, while it is possible to number the floats, it is not possible to leave a copy of the number at the place where the float is anchored. This is similar to cross-references, but this could be common enough to warrant a single-property solution:

SPAN.sidenote {float: left; width: 4em; float-style: decimal}

38. "Visual" top/bottom margins

When an indented display follows a paragraph, the visual impression of the whitespace between them depends on the length of the last line of the paragraph. Compare

This is the last but one line of this
paragraph, it just fills some space.
This is the last line of a paragraph
that ends with a fairly full line.

      Here is a blockquote or displayed
      formula, separated from the
      paragraph by some white space.

with:

This is the last but one line of this
paragraph, it just fills some space.
This paragraph ends with a short
line.

      Here is a blockquote or displayed
      formula, separated from the
      paragraph by some white space.

T_EX is one of the few (maybe the only?) system that handles this automatically (via a pair of parameters).

39. ToC's, tables of figures, etc.

Automatically adding tables of contents, tables of figures, etc. to the printed version of a document seems to require going over the document once for every type of table, applying a different style sheet to it every time, plus some way to collate the various results in the right order.

If each table is on its own page, then maybe the existence of a certain @page could be the trigger to start the multipass processing. See Daniel Glazman' e-mail.

40. Indexes

Indexes differ from tables of contents in the fact that they are sorted in complex ways. Just applying a different style sheet is not enough to turn a document into an index of itself. Indexes are probably better generated by dedicated software, or maybe by putting sorting routines into XSL. If added to CSS, they might need a lot of properties.

41. pseudo-element

Some magazines print not just the first line in a special style, but the first n lines. For example, if the drop-cap spans three lines, the first three lines are in uppercase as well. See Daniel Glazman' e-mail.

42. 'First-word' pseudo-element

Similar to 'first-letter' and 'first-line', but for the first "word" (however we define "word").. See Ian Hickson's list.

43. Corner pieces for borders

CSS2 has a small number of styles for the borders, but how the borders meet in the corners is left undefined. Maybe properties for rounded corners, open corners, or various ornaments can be added. See Daniel Glazman' e-mail.

44. Local and external anchors

A link within the same document might be given a different style from one pointing outside. A pseudo-class might make this distinction:

A:link:local, A:visited:local {color: green}

See Daniel Glazman' e-mail. Also see cross-references above.

45. Access to attribute values

CSS2 only gives access to attribute values of the current element (the "subject" of the selector), and then only as a string for use in the 'content' attribute. Access to arbitrary attributes of arbitrary elements, and conversion/string-manipulation of those elements for use in arbitrary property values has been suggested.

46. Linked flows

A complex layout may have several areas that are chained: when the first one fills up, the rest of the text flows to the second, etc. For example, a newspaper often has one small column of a story on the front page, and then the rest on other pages. See e-mail by Jeffrey Veen [member-only link]. One way is to use the ideas from NOTE-layout (or some other refinement of the page-box idea from CSS2), and give the boxes thus defined a 'flow' property, that contains an identifier. Elements can then be given a 'flow' property as well, causing the content of the element to go into the boxes with the same named flow.

47. Pseudo-classes for user states

The ':hover', ':active', and 'focus' pseudo-classes provide selectors for elements that the user is interacting with. The list could be extended (see e-mail by Jeffrey Veen [member-only link].):

:drag

style for an element that is being dragged.

:drop

style for an element that accepts drops while a dragged element is hovering over it.

:mouse-down

style for an element during the time any mouse button is pressed on it.

:mouse1-down

style for an element during the time mouse button 1 is pressed on it.

Question is, of course, how many events should be defined, and at what level of abstraction. Some browsers don't use a mouse or keyboard, some mice have 1, others have 2 or 3 buttons, joysticks have yet other buttons, the remote control of a TV has different buttons again, etc.

48. List numbering generalized and internationalized

Add keywords and/or properties that control various dimensions independently: ordinal ("5th") vs cardinal ("5"), digits ("5") vs words ("five"), and additional international numbering systems & scripts. See document by Daniel Glazman [member-only link].

49. "Subtractive" text-decoration

'Text-decoration' only adds decorations to a text. There is no way for a child element to remove a decoration added to it by its parent. A new property, or one or more new keywords could make it possible that a child element interrupts the underlining of its parent:

text-decoration: overline no-underline

50. Style for HTML's MAP & AREA elements

The MAP & AREA elements in HTML define regions in a replaced element (typically an image). Can these regions be given a style? A background behind the object? An outline on top of the object?

51. Transliteration

A property to invoke a transliteration process: 'transliteration: fr-ca' would transliterate the text using the (or: some set of) rules for Canadian French. Instead of assuming transliteration knowledge, we could point (via a URL) to a transliteration table in some standard format (which would have to be developed). The transliteration table could even be in CSS itself: @transliteration ja fr-ca {...} contains the table that transliterates Japanese for Canadian French readers. An @import would then suffice.

Instead of becoming a new property, transliteration could be added to 'text-transform':

SPAN.foreign {text-transform: uppercase nl}

would transliterate to Dutch and convert to uppercase at the same time.

52. Regular expressions in selectors

Regular expressions (or their less powerful cousins: wildcards) are very powerful, but also very hard for people not trained in them. They could be used in several places:

• element & attribute names: if there are so many elements that enumerating all of them is too much work: H<[0-9]+]> matches all names H0, H1,... H10, H11, H12,... etc.
• attribute values
• element content: match an element based on the occurence of a pattern in the content; you could make all occurences of a company name red, even without SPANs around them

If they exist in selectors, then there should probably also be a way to use the matched text on the right hand side.

53. Last-of... selectors

Selectors can currently match the first child, and can (in principle, though somewhat inconveniently) count children, but they can't match the last (or last but one, or...) child, or the first/last of a certain kind. Such last-of selectors make progressive rendering impossible, but could be useful in some print environments. STTS3 defines :first-of-type, :last-of-type, :not-first-of-type, :only-of-type, and several others. See also XSL.

54. Control over progressive rendering

A designer might want to display something specific in place of the generic icon, while a large image is loading. Or hold off displaying part of a list in favor of displaying it all at once when it has been loaded completely. Or give text a different color until the document is complete. See Tantek Çelik's proposal [member-only link].

55. Inline-block

'Display: inline-block' creates an inline element that internally acts like a block. Needed for the BUTTON element. If the source is like this:

SPAN {display: inline-block; width: 8em}
...
<P>Before <SPAN>several lines of text in an inline block,
the width of which is set, the height isn't.</SPAN> 
and after the line continues

the result might look something like this:

        several lines  of
        text in an inline
before  block, the  width  and after the line continues
        of  which  is set,
        the height isn't.

56. Non-breaking inline elements

'whitespace: nowrap' prevents breaking in block-level elements, but doesn't apply to inline-level elements. Maybe it should.

57. Suppress word spacing

Adding a value 'none' to word-spacing will allow a phrase entered with a space to be rendered without one, something often seen in letter-spaced titles. Source:

<H2>Channel 7</H2>

Style sheet:

letter-spacing: 0.6em;
word-spacing: none;
text-transform: uppercase

Result:

C  H  A  N  N  E  L  7

58. HSV or HSL color notation

In addition to the rgb() notation, CSS could support an hsv() or hsl() notation, which some people find easier to work with. The meaning would still be defined relative to the sRGB color model: rgb() and hsv() can be converted into each other with a simple computation. (HSL was first suggested by Steven Pemberton, Braden N. McDaniel recently suggested HSV.)

59. 140-odd color names

Back in 1993, most browsers ran only under Unix. Most Unixes come with a windowing system called the X Window System. That's where the Web got its hexadecimal color notation ("#rrggbb") from. Most X's include a list of some 140 color names, and in fact the same X function that translates "#rrggbb" to a color also translates those names to colors. That's why early Web browsers supported so many color names: it came for free under Unix. On most systems, the system administrators never changed the color names that came with the system, even though a program was provided specifically to do that. And thus the original list thrown together by some MIT students in the early '80s continued on.

Later browsers kept on supporting those names, even on non-Unix systems, and even though there is no single authoritative list, and no single way to translate the names to colors. Some people still use them. CSS could standardize a list, and specify the precise sRGB colors for each of them (although we might have to coordinate that with the developers of X.)

60. Copyfitting/auto-sizing/auto-spacing

In newspapers and in advertisements you often find titles above columns of text that are exactly as wide as the column. That is not a coincidence. In newspapers the effect is achieved by rewording the title until it fits, in advertisements the font-size & letter-spacing are simply adjusted until the text fits. CSS obviously can't do the former, but it might do the latter.

Håkon's proposal [member-only link] introduces a property that applies to block-level elements, and that gives the adjustment to apply (none, font-size, or letter-spacing), and the limits within font-size or letter-spacing may be varied. The UA will try to find a font-size or letter-spacing inside the given range so that the text exactly fills one line. If it fails, text will be displayed normally.

61. @page inside @media

CSS2 doesn't allow you to combine two style sheets for different media together into one style sheet with two @media sections, if the two style sheets have different @page rules. That could be fixed by allowing @page to occur inside @media. See Christian Kaufhold's e-mail.

@media print {
    @page {size: 21cm 29.7cm}
    /* ... other rules... */
}
@media projector {
    @page {size: 800px 600px}
    /* ... other rules... */
}

62. Color profiles

When a page is displayed on a color system with limited colors (such as 256 colors), all the colors may have been used up after the first image. Text and images from then on can only get approximate colors.

Some browsers have tried to solve that problem by using a fixed palette of colors: no matter what color you ask for, you only get the nearest color from that palette. As a result, no image looks exactly right, but at least all parts of the document look equally bad.

One solution, suggested many years ago, is to let the author specify his own palette at the top of the document or in the style sheet, which the browser will then use instead of its normal one. For example, if a document uses a lots of different browns, but no green at all, the author can provide a palette with many more tints of brown than usual, and fewer greens.

63. Underline styles

Instead of a solid line, underlines could also be dashed, dotted, doubled, wavy, etc.

64. Actions/behaviors mixed in with styles

The CSS syntax, in particular its selector syntax, is useful for other things than style. It has been suggested, for example, to use it to associate scripts with elements. See for example Netscape's Action Sheets submission. That in itself has nothing to do with CSS.

But one step further is to allow the rules that apply style to an element and the rules that attach a script to an element to be mixed in the same style sheet (although style sheet is not exactly the right name then...). Should different "sheets" that use the CSS syntax be allowed to mix?

65. Comment syntax "//"

Comments in CSS are delimited by /* and */, as in C. Some people have experimented with an additional comment syntax, that delimits comments by "//" and the end of the line. In C++ it has proven useful to have both of them.

Note: this would be a change that is not backward compatible. Although "//" has no assigned meaning in CSS1 or CSS2, the occurrence of "//" in CSS1 and CSS2 causes different things to be ignored than it would in a version of CSS which uses "//" as a comment starter.

66. Replaced elements without an intrinsic size

CSS2 classifies certain elements (such as images) as "replaced elements" and assumes that those elements have an intrinsic width and height. If the width and height properties are not set in the style sheet, they are taken from the element. However, there may be replaced elements that don't have an intrinsic size, for example vector graphics that can be drawn at any scale. See Note.

A future CSS may have to define how such elements are handled; at the very least it will have to say what 'width: auto' means.

67. Fitting replaced elements into a given space

SMIL has a "fit" attribute that specifies how an object will be scaled and/or clipped to fit in a given area. Some of its values cannot be expressed in CSS. See Note. In particular:

• fit="meet" in the case that both 'width' and 'height' are set, means the object is scaled to the largest size possible within the rectangle defined by the 'width' and 'height', while keeping its aspect ratio. Some space above/below or left/right of the object may remain unused (filled with background color)
• fit="slice" in the case that both 'width' and 'height' are set, means that the object is scaled to its smallest size that leaves no part of the rectangle unoccupied, while keeping its aspect ratio. Some part of the object may fall outside that rectangle.

End of form