Sent by Markus Fischer on 28 November 2003 11:11
Please note that I'm not a professional in this area.
On Fri, Nov 28, 2003 at 11:14:47AM -0000, Ian Vaughan wrote :
> What are the benefits of making a site 100% in CSS. If you look at the
> likes of the BBC.com and many other sites they seem to be using a
> combination of html tables and divs ??
>
> I am creating a new site that will need to be at least WAI A, HTML
> compatible etc (government guidelines etc) and it seems there is a shift
> toward creating a site using CSS.
>
> What are the benefits of creating a site in 100% CSS over what the likes
> of the BBC do which is a combination of HTML and CSS Divs ? Can a site
> made in 100% CSS be viewed in browsers such as IE 4.0 etc as it needs to
> be available to not just the top end users
From my expirience, if the site has to look "more or less exactly"
in IE 4 or NS 4 and if you're beginning with CSS, you better not,
let's say carefully, waste your time with it.
Why? Those old browsers don't understand CSS enough to really use
it; you're practically bound creating your primary layout with
tables.
Of course some will say, you sure can make a site in CSS and it
looks the same from IE 4.0 to IE 6.0; but then you're very limited
in what you can do anyway.
The other question is, how do you define "Can a site made in 100%
CSS be viewed in browsers such as IE 4.0" ?
Is pixel-perfect layout important?
Is the content more important i.e. that the information IS
accessible no matter (to a certain degree) how it looks.
Usually, people going the pure CSS way to present their pages also
always focus more on using "meaingfull" HTML mark-up to give the
page the right structure (i.e. making use of the tags h1-h6, lists,
fieldset, legend, label, p, address, strong, em, acronym, cite,
blockquote, thead, tbody, etc). Given that, if you now take away the
CSS layout style information from such a page it is certainly NOT
meaningless; you will see that even IE 4 and NS 4 manage to provide
the information in a pleasent and readable way because the know e.g.
how to display list (for example if you use nested unorded lists for
navigation, it will still look meaningful in NS4 without any style
information explicitely given).
So, what else benefits from pure CSS? Pages by nature [tm] start to
get slimmer; you don't have the "table in table" spaghetti code;
less html to load for the browser after all. If the webserver is
configured properly, the CSS files get cached and won't needed to be
loaded at all. And, since the Mark-Up to create this pages
decreases, you have less code to work with; you get a better
overview.
But, and this is also one of my major points, you do not need to say
"table based or 100% CSS"! No one forces you to go only for choice
one or only for choice two. You can combine them and usually life
well with it. If you don't grasp the how floats work and how you
troubless create multi-column layouts, you can still use tables for
it if you're more comfortable. But if you are still willing to dig
into the "CSS"-thing then you e.g could stop using font tags, also
style tables itself with CSS, and you will see that even this makes
your pages smaller and better manageable code-wise.
> And how can the snippet of code I have below (which is the header) be
> made into CSS, or would you recommend it is left as it is ?
If you want to start using CSS, you do not need to go the hard way
and say "tables bad, I use pure CSS now".
A possible path is: you analyse the code yourself and look: what
attributes do I have in this code? And now, how can I convert the
information from the attributes into CSS syntax and slim down the
already existing HTML code?
> <table border="0" cellpadding="0" cellspacing="0" width="780">
This, for example, can be expressed the follwing way (note that many
ways lead to the same goal; this shows just one):
CSS:
table.header {
border: none;
border-collapse: collapse;
width: 780px;
}
table.header td {
padding: 0;
}
HTML:
<table class="header">
At first glance, it may seem to be more work. More characters. But
don't forget, you can reuse this very CSS information in every page
which has this header (and, headers usually are all the same on all
pages). Thus you put this CSS information into an external style
sheet and include in every page which has this header. Taking
advantage of a proper configured webserver, the CSS file only needs
to get loaded once; so what the browser effectively loads for every
page now is only
<table class="header">
and not
<table border="0" cellpadding="0" cellspacing="0" width="780">
anymore.
> <a accesskey="C" href="#" title="Link to the Text Only version of
> the site">Text Only</a>
One key component of the whole CSS concept ("separate content from
presentation") is a very well well reason for NOT having a separate
text version.
If a page is well done in terms of using the right HTML Mark-Up to
make the page semantic meaninful and then use the CSS to spice it
up you get the "text only" version for free! -> just remove the
style from it. No need to make it two real separated pages.
(removing the style from it can be done server side with the
programming language of choice; just to make sure you don't need to
make two copies of the HTML with and without the stylesheet)
It's not that CSS demands you take a trip to hell and back to get
the hard "100% CSS way" ;) Start slowly migrating to it and you will
sooner or later see whether you benefit from it or not.
whew, length mail. cheers,
- Markus
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/