Re: Tabbed Interfaces in CSS

Boris Zbarsky wrote:
> Brad Kemper wrote:
>>>> Ah, so that's what it is. And I can't seem to override it with my 
>>>> own '!important' declarations either, even if I put it in a 'style' 
>>>> attribute, so that does seem like a bug in Firefox.
>>>
>>> Use of !important rules in a UA sheet is a vendor-specific extension
>>
>> It is? I thought !important was well defined for use within any style 
>> sheet.
> 
...
> 
>> Innards of select cannot always be described or restyled via CSS, but 
>> some things, like positioning and width, often can be, and often are.
> 
> Sort of.  Can you really describe or restyle the position and width of 
> the <select size="1"> dropmarker (assuming there is one in the relevant 
> platform theme at all)?  Of the <select size="1"> display area (the one 
> that shows the currently selected option)?  I have yet to see a UA that 
> would let me do that.
> 

Just in case, here is a fragment of so called master CSS used in 
HTMLayout. This style set defines <select size=1> for MS Windows and Gnome.

It is based on the 'flow' attribute and flex units.
The engine supports position:popup feature that allows to show element 
in popup window.

Shadow model of the <select> is this:

<select size=1>
   <caption>...</caption> <button />
   <popup>
     <option>..</option>
     <option>..</option>
   </popup>
</select>

And the style set:

@set std-select-dropdown
   {
     :root
     {	
       font:system;
       behavior:dropdown-select;
       padding:0;
       flow:horizontal;  /* caption, button*/
       background-repeat:stretch;
       background-image:url(theme:edit-normal);
       width: max-intrinsic;
       height: max-intrinsic;
     }

     :root:disabled
     {
       background-image:url(theme:edit-disabled);
       color:graytext;
     }

     /* caption portion of combobox */
     :root > caption
     {
       padding:1px;
       margin:2px 1px 2px 2px;
       overflow-x:hidden;
       width:*; /* everything left from the button */
       height:*; /* takes full height */
       min-height:1em;
       min-width: system-scrollbar-width;
       vertical-align:middle;
       white-space: nowrap;
       color:windowtext;
     }

     /* caption portion of combobox when select is in focus */
     :root:focus > caption
     {
       background-color:highlight; color:highlighttext;
     }

     /* popup select element */
     :root > popup
     {
       behavior:select;
       overflow-x:hidden;
       overflow-y:auto;
       padding:2px;
       display:block;
       visibility:collapse;/* invisible normally */
       border:none;
       min-width: max-intrinsic;
       width: *;
       height: max-intrinsic;

       position: popup-window;
       transition:window-slide-ttb;
     }
     :root > popup:popup
     {
       visibility:visible;/* visible when in popup state */
     }

     :root > popup option:current
     {
       background-color:highlight; color:highlighttext;
     }

     /* dropdown button of the combobox */
     :root > button
     {
       width	:system-scrollbar-width;
       height	:*;
       margin	:system-border-width; /*1px 1px 1px 0px;*/
       padding	:0;
       background-repeat	:stretch;
       background-image	:url(theme:combobox-button-normal);
       behavior	    :clickable;
       white-space   :nowrap;
     }

     :root > button:hover
     {
       background-image:url(theme:combobox-button-hover);
     }

     :root > button:active
     {
       background-image:url(theme:combobox-button-pressed);
     }

     :root:disabled > button
     {
       background-image:url(theme:combobox-button-disabled);
       color:graytext;
     }

     :root[editable] > caption
     {
       behavior:edit;
       cursor:text;
       context-menu:url(res:behavior-edit-menu.htm);
     }
     /*
     @media ms-vista-aero
     {
       ....
     }
     */
   }

Images like
    background-image	:url(theme:combobox-button-normal);
is just a delegation of drawing to native OS theme primitives.

So technically if you have flex units in place you can
style combobox in full.  Position of popup element is
a bit tricky (position on screen and multihomed systems)
- so it is handled by intrinsic behavior. Other than that
it is pretty easy I would say. E.g. in the engine
you can easily have <select size=1> that has e.g. two
buttons instead of one.

And of course the popup element can be styled to something like this:
http://www.terrainformatica.com/htmlayout/images/selects3.jpg
This is also <select size=1>

Cheers.

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Saturday, 25 April 2009 06:47:54 UTC