Wondering about people's opinion on this. For some complex layouts, to
achive certain graphical effects, it is *necessary* to wrap semantic
markup
within quite a few container elements. Specifically I mean layouts where
an
element or group of elements are enclosed within a box that has rounded
corners and/or a drop shadow and still remains flexible in nature, that
is,
able to respond to changes in view****t and text size without breaking.
I have in the past submitted pages for critique that are entirely semantic
in nature aside from some rather heavy wrapping of some elements inside
divs
to achieve affects otherwise not achievable due to the current limitations
of browsers, mostly non-sup****t for CSS3 multiple backgrounds.
The way I see it, CSS actually serves two purposes. One is specifying the
way the page is laid out, ie two column, three column, whatever,
information
boxes floated left or right within some other content, lists of links with
display inline or float to make horizontal navigation etc etc. The second
is in specifying how the content actually looks. So a) positioning of
elements (singly or in groups) and b) "skinning" and styling of elements
(colors, fonts, borders, margin, padding etc. etc. etc.).
So:
1. HTML - content marked up semantically
2. Layout CSS - how the content appears on the page and where
3. Skin/Appearance CSS - how the content looks
4. Javascript - Adds behaviour, should never take the place of #1. Or 2
or
3? That is my question I guess.
Now, adding HTML to enable #2 (layout) is still within the bounds of
semantic markup, if you enclose some of your content within a div (or
whatever) in order to display that content in a specific column for
example,
you are implying that the enclosed content is all related in some way or
another.
However, I've in the past been heavily criticised for adding HTML markup
(lots of wrapper divs usually) solely in order to enable #3, CSS that
controls the appearance or skin applied to a set of content.
Is this such a bad thing? If it is so terrible to pollute the HTML with
all
of these wrappers, then what about serving a page that consists solely of
1#
from the list above, semantic html, along with #2 from the list above, CSS
used solely for positioning (still semantic as I mentioned above, implying
relation****ps between elements), and a limited amount of #3, just CSS that
is is possible with current browser sup****t without adding any unsemantic
wrapper elements to the page (ie just colors, simple backgrounds, borders
etc), and then finally using Javascript to modify the DOM adding wrappers
where necessary to apply the final CSS allowing the page to become
graphically rich.
Without Javascript and with thoughtful application of colours etc. etc.
the
user gets a usable page but not necessarily graphically rich. With
Javascript they get the graphically rich version via extra wrappers being
added to the DOM.
So what's worse, only serving rich, modern graphical layouts to JS enabled
browsers, or "polluting" your markup with large amounts of wrappers that
serve only to enable appearance?
|
