Styling Unknown Markup

michelle.dsouza at michelle.dsouza at
Mon Nov 10 14:34:02 UTC 2008


One of the many tasks associated with the work of UI Options is the  
ability to style unknown markup. Jacob and I have been experimenting  
with our high contrast skin and some of Fluid Infusion's in context  
examples to find out how much we can do without knowing anything about  
the markup.

As we expected, there were many places where CSS collisions resulted  
in a page that had styling issues. We knew that we were going to hit  
some of these issues given the experience of the Transformable  
project. We also know that if the user provides us with contextual  
information about the markup we can do a better job of restyling the  
page. What we are trying to do is the best possible job with no  
additional information.

The five issues that remain after our changes to the existing high  
contrast skin are:

1. font size in form controls was not adjusted
This is an area that we still need to do some research and experimentation.

2. font sizes that had been specified using pt, px, x- were not adjusted
This is because we are using relative sizing for fonts. We think this  
is a better way to go and perhaps the answer here is to advise the  
integrator to also use relative sizing for their out of the box CSS.

3. icons that were background images on empty anchors were removed
We felt that the heavy handed approach of removing background images  
was appropriate for a high contrast skin. This will not be appropriate  
for our other skins so the larger issue of background and foreground  
colours will need to be dealt with as we move forward. In this  
particular case, we could use a strategy of adding the 'alt text' of  
an empty anchor to the UI when we remove the background image.

4. iframes were not restyled
We can solve this by finding the iframes in the page and injecting the  
required style-sheets and class names.

5. things that were styled using important were not adjusted
There is not much we can do about this given the rules of CSS. Likely  
the only option here is to implement a hinting strategy where the  
integrator can provide us with more information about the markup.

You can see the results of our experiments on the wiki.


More information about the fluid-work mailing list