Styling Unknown Markup
michelle.dsouza at utoronto.ca
michelle.dsouza at utoronto.ca
Mon Nov 10 14:34:02 UTC 2008
Hi,
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.
http://wiki.fluidproject.org/x/4INI
Michelle