Table of topic groups > Front page of CSS-guide > Proposals > Proposals for CSS3

Proposals for CSS3

Topics

• Common
• What are selectors, classes and id-attributes
• Pseudo-classes and Pseudo-elements
  • Common
  • Pseudo-classes
  • Pseudo-elements
• How to set CSS for backgrounds and borders
• A list of proposals

Common

I have found some problems in CSS or I have desired of some new properties. I put in this file my proposals into the CSS3.

What are selectors, classes and id-attributes

I have found that it is not always very handy to use CSS. Using preceding elements in tag sequences like this:

<blockquote><i>...</i></blockquote>

I can't get a matching pattern based rule to the block quote, if I need a special rule to the element BLOCKQUOTE. I can give it only to the element I. But this kind of rule could do it:

blockquote < i {} /* the rule concerns the parent element blockquote, not the element i; This is different as blockquote > i {}, which concerns the element i */

In order to avoid difficulties, this might need to limit only in one level. Just to the parent element, not to all possible ancestor elements (using in the rule for example <<) like style="color:#660033; background-color:yellow;". Browsers might not be able to handle them (and those cause extra formatting work). This is much easier afterward to exchange as these kinds rules:

<blockquote class="some_class"><i>
This might have following rule:
.some_class i {color:blue}

If you have not originally marked the class, you must search all possible places, where you have used these elements. But this rule blockquote < i {color:blue} you could add afterward without touching to the document!

Pseudo-classes and Pseudo-elements

Common

CSS Pattern matching would work more powerful with these new pseudo-classes. I have found also a new pseudo element useful, when I have read magazines.

Pseudo-classes

• :second-child pseudo-class, :third-child pseudo-class and so on.
• :second-sibling pseudo-class, :third-sibling pseudo-class and so on.
• :paired-paragraph pseudo-class; an-paired-paragraph pseudo-class

Pseudo-elements

My proposal to a new pseudo-element is p:first-word - the first-word pseudo-element. In Finland "Tekniikan maailma" use this kind of system in paragraphs:

THE first word of each of paragraph is in upper case letters.

Look at also the next section, where I handle ::viewport.

How to set CSS for backgrounds and borders

Opera Software and Microsoft had made different conclusions of CSS1 border display. To avoid this problem, I have a proposal. In future CSS-definitions would be added border-attachment -value, which could work according to the same principles as background-attachment and does have values scroll and fixed. Fixed would go according to the viewport - like MS 5.0. Scroll means the system, which Mozilla and Opera have just now - and very often there is no border on the top or bottom. That could be expressed like this way:

If borders of BODY or HTML container element is defined border-attachment:fixed, they are fixed at the respect of the viewport and borders are placed according to the viewport instead of outside of the element's padding area.

Alternatively the same result could be achiever if the CSS3 could have the pseudo-elements ::viewport and ::canvas and borders have been set for those pseudo-elements. ::viewport could represent a single window. ::canvas represent a set of windows in the case of the FRAMESET elements has been used and a sigle window, if framesets has not been used. In the latter case ::canvas == ::viewport.

Background image size properties; image-height and image-width. This was left open in CSS2, but it is useful especially making different style sheets using the media rule - small devices needs smaller images.

Indeed this can be fixed in principle by using frame sets or with the overflow property.

CSS doesn't cover <iframe frameborder="1" style="border:1px solid black">. Now the element has double borders. CSS3 should have the frameborder property. In addition of frames, it could be useful with form control elements, which have natural borders. The frameborder attribute could be understood as inner borders.

I have also some additional comments to my proposals for CSS3.

A list of proposals

These proposals concerns also other than CSS, but all of the proposals has something to do with CSS:

• My proposals for CSS3 - this proposal page
  
• Some comments to my proposals for CSS3
• XCSS (my own proposal)
• CESS (my own proposal)
• Current works, which includes for example:
  • User Interface for CSS3 (my favorite proposal)
  • Behavioral Extensions to CSS (BECSS)
  • Translating CSS to DSSSL (Bert Bos, W3C; designer of CSS and XSL)
  • Multi-column layout in CSS (Håkon Wium Lie, Opera Software; the "father" of CSS1 and CSS2 in W3C)
  • Paged Media Properties for CSS3 (Robert Stevahn)
  • Adding Style and Behavior to XML with a dash of Spice (Robert Stevahn)