I'm proposing to replace the current rendering mechanism, based on Behavioural Extension to CSS, that in turn is based on XBL2, with something based on the CSS3 Basic User Interface (css3-ui), ie replacing the binding: property with appropriate appearance: property directly on the element, instead of relying on the binding itself.<br>
<br>This in particular applies to the button, input, select and textarea. Something like this could be included:<br><br>button,input[type=submit],input[type=button],input[type=reset] {<br>appearance:push-button;<br>}<br>input[type=submit],input[type=button],input[type=reset] {<br>
content:attr(value,string,contents);<br>}<br>input {<br>appearance:field;<br>border-width: calc(attr(size,px,0) / 2); /* presentational hint */<br>}<br>input[type=password] {<br>appearance:password;<br>}<br>input[type=url]::outside::after {<br>
appearance:push-button;<br>content:icon;<br>icon: url(<icon uri>);<br>} /* the current appearance in Opera */<br>input[type=range] {<br>appearance:range; /* Webkit uses a proprietary -webkit-slider-horizontal for this */<br>
}<br>input[type=checkbox] {<br>appearance:checkbox;<br>}<br>input[type=radio] {<br>appearance:radiobutton;<br>}<br>input[type=file]::outside::after {<br>appearance:push-button;<br>content: "Browse...";<br>}<br>select[size] {<br>
appearance:list-menu;<br>}<br>select,select[size=1] {<br>appearance:pop-up-menu;<br>}<br><br>The advantage of appearance vs binding is that:<br>1) you don't need an additional pass before applying the correct platform-specific widget style<br>
2) you depend on css3-ui, in CR stage, instead of becss, a very early WD<br>3) you don't block the binding property: I don't expect that applying an XBL binding on an element causes it to appear like a span (because it gets almost no default CSS)<br>
4) you keep the appearance property working: current UA (Firefox and Safari at least) already implement appearance, and correctly set it on the input element. This could no longer be possible using XBL, because of the CSS inheritance model inside XBL (if you apply to appearance to some part of the shadow tree, it is not visible on the bound element)<br>
5) becss requires "one or more binding languages": it is not necessarily XBL2, but currently XBL2 is the only one available: are you constraining the implementation of HTML5 on that of XBL2?<br><br>~ o ~<br><br>
A part from that, I would like to propose the following CSS for some missing parts:<br><br>marquee[behaviour=slide] {<br>marquee-style:slide;<br>}<br>marquee[behaviour=scroll] {<br>marquee-style:scroll;<br>}<br>marquee[behaviour=alternate] {<br>
marquee-style:slide;<br>}<br>marquee[direction=left] {<br>marquee-direction:forward;<br>overflow-style:marquee-line;<br>}<br>marquee[direction=right] {<br>
marquee-direction:backward;<br>
overflow-style:marquee-line;<br>
}<br>marquee[direction=up] {<br>
marquee-direction:backward;<br>
overflow-style:marquee-block;<br>
}<br>marquee[direction=down] {<br>
marquee-direction:forward;<br>
overflow-style:marquee-block;<br>
}<br>marquee[loop] {<br>marquee-play-count: attr(loop,integer,initial);<br>}<br><br>(This obviously means that we need a definition of marquee accepting attributes behaviour = (slide | scroll | alternate), direction = (left | right | up | down), loop = <integer>. Info found from MSDN).<br>
<br>progress {<br>display:block;<br>content:none;<br>background-color:green;<br>width: calc(1% * attr(value,number,0) / attr(max,number,1) );<br>}<br>progress::outside {<br>display:block;<br>text-align:center;<br>width:auto;<br>
content:contents;<br>}<br>progress:empty::outside {<br>content:calc(attr(value,number,0) / attr(max,number,1) * 100) "%";<br>}<br><br>The same could apply for meter as well, except for the handling of optimal and suboptimal parts.<br>
<br>menu[type=toolbar] {<br>appearance:menu-bar; /* are menu bars visually different from tool bars? */<br>}<br>menu[type=context]:active {<br>appearance:menu;<br>display:block; /* may be actually implied by appearance:menu */<br>
}<br>menu[type=toolbar] > menu::outside::before, menu[type=toolbar] > select::outside::before, menu[type=toolbar] > menu::outside::after, menu[type=toolbar] > select::outside::after, menu[type=toolbar] > hr, menu[type=toolbar] > option[value=]:disabled, menu[type=context] > menu::outside::before, menu[type=context] >
select::outside::before, menu[type=toolbar] > menu::outside::after, menu[type=toolbar] > select::outside::after, menu[type=context] > hr, menu[type=context]
> option[value=]:disabled { /* separators */<br>display:block;<br>content:"";<br>border: 1px solid ThreeDFace;<br>width:0px;<br>}<br>menu[type=toolbar] > menu[label], menu[type=toolbar] > optgroup[label], menu[type=context] > menu[label], menu[type=context] > optgroup[label] {<br>
appearance:pull-down-menu; /* actually, where are we supposed to specify the label? */<br>}<br>menu[type=toolbar] a, menu[type=toolbar] button, menu[type=toolbar] input[type=submit], menu[type=toolbar] input[type=reset], menu[type=toolbar] input[type=button], menu[type=toolbar] input[type=checkbox], menu[type=toolbar] input[type=radio], menu[type=toolbar] select option, menu[type=toolbar] command, menu[type=toolbar] bb, menu[type=context] a, menu[type=context] button, menu[type=context]
input[type=submit], menu[type=context] input[type=reset],
menu[type=context] input[type=button], menu[type=context]
input[type=checkbox], menu[type=context] input[type=radio],
menu[type=toolbar] select option, menu[type=context] command, menu[type=context] bb { /* commands */<br>appearance:menu-item;<br>}<br><br>I hope that this will help a bit the editor.<br><br>Giovanni<br>