Topic awaiting preservation: CSS - I think I know the Pros, but what are the cons?

ok.. well most of you know me as someone who is very slow to change.. that said, CSS is beginning to intrigue me.

I pretty much understand the concept , and have used liberal amounts of it (mainly for controlling fonts etc.. not for positioning yet).

So the question is.. what are the 'negatives' (if any) of moving away from tradiional html tags such as tables etc?
I presume browser compatibility is the main one?

any thoughts? tia

There aren't many.

Browser compatability with *older* browsers is a con. ("old" browsers in the context of web standards tends to mean version 4 or below, in rare cases IE 5, since it has some flaws.) But browser compatability with future, yet uncreated browsers improves, since you're no longer coding to weird different browser ways of doing things; you're coding to one standard, which will remain backwards compatable for quite some time.

Hmm... I can't think of any other cons right now... Ask me to list the pros though =)

Oh, by the way, although tables aren't encouraged as ways of formatting a page, they *are* completely supported by CSS. It's just that they're meant to be used for, like, data; things that you would put in a table in real life. Like a spreadsheet, or a "comparison of A to B" table, or something. I just wanted to say that to clear up any misconceptions people might have that table tags are "bad."

(nice sig btw)

I can't really give input on the pros or cons cause I'm not that accustomed to CSS yet, but me and a friend who are starting a site togehter just started "discussing" using CSS vs. <font> and <left> <center> etc. tags, he said that to execute a css file takes longer so the font tags are better while i thought font would take longer cause of a bigger html file. Anyways, if you could give an opinion/insight into that, its appreciated. Thanks
-cole

ACharmedOne, there is a *bit* of slowdown, if you put the CSS in a separate file. However, if you want to avoid that slowdown, you can put the CSS into the same file as the content (with <style> tags); and this:

P {font-family:Arial; font-size:10pt;}

is a lot shorter than this:

<p><font face="Arial" size="2">...<font></p>
<p><font face="Arial" size="2">...<font></p>
<p><font face="Arial" size="2">...<font></p>
<p><font face="Arial" size="2">...<font></p>
<p><font face="Arial" size="2">...<font></p>
<p><font face="Arial" size="2">...<font></p>
<p><font face="Arial" size="2">...<font></p>

If you only put one font tag around the whole body, then it's still about the same length of code. Of course, if you do this:

<p style="font-family:Arial; font-size:10pt;"></p>

over and over, that's even worse. But... there's no reason to do this when you can just specify it once with style tags in the head.

On the other hand, if you do put the CSS in an outside file, and you link to it from multiple pages, the browser will only have to download it *once*, so there will be the slowdown then, but after that, on other pages it should be instantaneous.

Personally, I think that we can't ditch tables completely in favor of CSS. There are still a lot of people who are using older web browsers. And I'm not just talking about NN4 here (which is now mostly used on Linux systems in cases where Mozilla would be an overkill due to hardware limitations). A lot of people still use old versions of IE, and we all know that CSS support is different in each version of IE (just remember of hacks that were necessary in order to fix relative positioning in IE5 and hacks related to setting actual layer width). So, we would still need to use a few different workarounds in our pages. We'll have to wait quite some time before we would be able to use only standards compliant stuff. Also, big corporate web sites still use tables for the same reasons that I mentioned above (just take a look at ZDNET, CNN, etc.)

Have you ever tried to center a layer in the middle of the screen?

margin-top:auto;
margin-bottom:auto;

Looks good, but did not work!

U-neek: try adding BODY {height:100%;}, that might do it.

Max, I guess you're sorta right about that. But things are improving, and I hate to encourage people *not* to upgrade by supporting old browsers.

And that brings up what may be another disadvantage: at the moment, CSS doesn't quite support pixel-precise designing, so it's not always easy to get things to line up just like you want them. It's getting better though.

recommend any books? or can I find everything I need to know on the web? I kinda like books better

For CSS? The ultimate resource, of course, is www.w3.org (click on CSS on the left and then look for "specifications"). When I want a book, I always turn to O'Reilly... but I'm not sure they have one on just CSS. I know their XML/XHTML book, or at least it's previous version (which was really HTML 4.01), has a good CSS explanation, but it only covers what CSS did back when the book was published.

My ¢2

CSS is the way to go for your personal site. Still not out there enough for professional situations though.
If you don't like using the rel link for calling CSS you can also use SSI

It's not comprehensive but this is a really nice resource especially when you are first getting started



:[ Computers let you make more mistakes faster than any other invention in human history, with the possible exceptions of handguns and tequila. ]:

I find the link that Bit gives there to be the one I return to constantly as a reference guide, if you're compiling votes.

and remember, as Slime points out: tables validate too

Jason

Here are a bunch of pages that I like to refer to:

• http://www.thenoodleincident.com/tutorials/box_lesson/index.html
• http://www.webreference.com/authoring/style/sheets/
• http://www.w3.org/TR/WCAG10-CSS-TECHS/
• http://www.w3schools.com/css/css_reference.asp
• http://www.htmlhelp.com/reference/css/
• http://dmoz.org/Computers/Programming/Internet/CSS/
• http://www.opera.com/docs/specs/
• http://www.webreview.com/style/css1/charts/mastergrid.shtml
• http://www.bluerobot.com/web/layouts
• http://www.glish.com/css/

Hope something there may help.

Later,
C:\

[This message has been edited by CPrompt (edited 12-30-2001).]

[This message has been edited by CPrompt (edited 12-30-2001).]

vp: There are 2 issues really:

1. The use of CSS in general.

2. The use of CSS-only for layout.

I think most people would agree that using CSS to control the link colours and get rid of the font tags is a good idea and it degrades nicely in older browsers as long as you are prepared to accept the fact that it won't like exactly the same in every browser.

Its the use of CSS-only layouts which is, as far as I'm concerned, the tricky issue. mr.maX has put forward a good arguement for sticking with tables for now and you really have to know your audience - as you know its been proposed that the GN moves over to a CSS-only layout and Pugzly has posted a link to the logs which shows that most people are using recent versions of the browsers so it would seem a reasonable move.

Here is a list of my pros for CSS-only layout:

1. Works well with things like braille browsers and increases the accessibility of your pages. This point is very important indeed - if done right your page should still be viewable in older browsers (it just may not look perfect) but it is now accessible to other devices. I believe there are laws on making webpages accessibile to people with disabilities currently in place or in the works (depending on where you are) and this is a vital part of that making things accessibile.

2. Allows one to eliminate tags which will become obsolete making your page less heavy in code.

3. External CSS files cache so it reduces the download even more.

4. There are a growing number of sites and enthusiasts for this approach providing help with various problems.

5. Allows one to separate content and style.

6. You are making your page 'future-compliant' rather than trying to make it look identical in every browser, which is impossible anyway (esp. given the continued presence of text only browsers).

7. It makes updating your site easier and allows a more consistent 'style' to be maintained.

8. Pretty easy to learn.

and here are the cons:

1. Can degrade badly in older browsers but this needn't be the case as I've found that NS4.x can work well with CSS layouts based on float (see mobrul's site in Site Reviews as an example).

2. Can require more testing in various browsers (although one should be doing this with a tables layout too). Getting it right in all browsers is possible but can be a pain.

3. A real pain to teach in introductory web design as each design can have its own quirks which need ironing out. I always tell people to use a table based layout initially (and hand out a few simple table-based templates if required) and once they are used to the HTML and they are interested then they should have a crack at a CSS-only layout.

4. Browser implementation is still 'eccentric' (e.g. IE5 getting the box model wrong).

I may add more at a later date as they occur to me (as I'm sure I've missed some out - I've been meaning to right them down).

Personally I think making the move is a good idea as long as you know your audience and, if relevant, your client understands the issues and you want to

Slime: Although you can wrap all your content in a FONT tag I'm pretty sure it doesn't work in all browsers.

Emps


You're my wife now Dave

Thanks guys for your insight and thoughts. Its really appreciated ~Vp~