10 Best Resources for CSS

victorialever writes "Since one could have noticed an increasing number of websites that are employing CSS and an increasing number of resources talking about how great CSS is, it seems to become impossible not to jump on the CSS bandwagon as well. The 10 Best Resources for CSS provides an impressive list of the CSS resources which have recently become essential for web-developers. Among them - CSSZenGarden, The Web Developer's Handbook, Stylegala, PositionIsEverything etc."

Comments

No CSS on that site.

[McDutchie]

Anyone taking even a cursory look at the sitepronews.com article source code can see that the layout is done with the usual mess of tables.

Re:No CSS on that site.

[BishonenAngstMagnet]

But we all know that it can be fixed...

Re:No CSS on that site.

[iBod]

It's still easier to do certain things with table-based layouts than it is with CSS alone. Control of vertical positioning/height being the obvious one. That and fluid layouts.

If you're a busy designer, sometimes you just have to take the pragmatic route rather that waste hours or days trying to make a pure CSS layout work across all the common browsers (none of which implement CSS 100% correctly anyway).

Either that or (worse) you compromise the design to make it fit the limitations of a pure CSS layout.

I think the latter approach accounts for the huge number of 'identikit', bloggish-looking sites out there (all proudly displaying their little W3c validation logos of course).

It's still perfectly possible to create valid, semantic XHTML/CSS markup that uses the odd table for layout (no, I don't mean a heap of nested ones with spacer gifs!).

While I'm all for standards and separating content from presentation, at this stage of the game, we just need to choose the solution that works best.

I know it's probably heresy to say this, but IMO tables work in an intuitive way that you can easily visualize whereas a mass of floated DIVs often do not!

Re:No CSS on that site.

[mill]

Umm, it isn't valid semantic markup if you are using tables for layout.

Re:No CSS on that site.

[Anonymous Coward]

I agree that CSS got limitation, but not with vertical height/positioning and fluid layouts. The only thing bothering me is vertical centering.

Re:No CSS on that site.

[Bogtha]

It's still easier to do certain things with table-based layouts than it is with CSS alone. Control of vertical positioning/height being the obvious one. That and fluid layouts.

Okay, vertical positioning, I'll give you. But fluid layouts? That's not hard at all. Websites are fluid by default, they only stop being fluid when you set explicit widths using fixed units. You can do that with CSS or tables.

If you're a busy designer, sometimes you just have to take the pragmatic route rather that waste hours or days trying to make a pure CSS layout work across all the common browsers

If you are an experienced designer, then you've already done similar layouts a hundred times before, so you have the code and bug workarounds memorised and making it "work across all the common browsers" is at the very least least as easy as dumping a load of table code into each page.

Either that or (worse) you compromise the design to make it fit the limitations of a pure CSS layout.

I think the latter approach accounts for the huge number of 'identikit', bloggish-looking sites out there

Er, CSS is far less limited than tables (check out the CSS Zen Garden), and I've seen way, way, way more websites out there using tables that all look alike.

The reason most weblogs look alike is because they come with a set of default templates that people don't tweak very much.

It's still perfectly possible to create valid, semantic XHTML/CSS markup that uses the odd table for layout

Er, no. Not semantic. Not at all. If you are using tables for anything other than tabular data, it's not semantic.

While I'm all for standards and separating content from presentation, at this stage of the game, we just need to choose the solution that works best.

At any stage of the game you need to choose the solution that works best. In my experience, switching to CSS saved me a whole lot of time that was spent dealing with cruddy code. Sure, in the beginning, that extra time was wasted on stuff I didn't know about CSS, but once I got a bit of experience, it was a real time-saver.

I know it's probably heresy to say this, but IMO tables work in an intuitive way that you can easily visualize whereas a mass of floated DIVs often do not!

I've heard that before. Exclusively from developers that have years of experience with tables and who haven't spent any significant amount of time with CSS. Once they spend a week or two coding CSS every day, they wonder how they did without it. And if they never had much experience with tables in the first place, they don't want to bother with all the crap associated with tables (counting rowspans is never intuitive).

Really, just think about the difference involved in "just move that over to the right a bit" for the two approaches. With tables you have to insert an extra column, count rowspans, if there's any rows spanning across the whole layout you have to break for that, alter its colspan and put another cell below it with rowspans... and with CSS, you open up the stylesheet and change one number.

Re:No CSS on that site.

[arkanes]

It isn't valid semantic markup if you have to nest everything in 18 layers of divs and spans to convince a browser to apply your CSS rules correctly, either. There's nothing "less" semantic about using tables instead, and there's some serious advantages - like the fact that all major and most minor browsers will render them identically, that they're far more intuitive, and that they allow re-flowing in a way that you can only do with CSS attributes that are explicitly designed to mimic the layout algorithms of "traditional" tables. Which, of course, IE doesn't implement. And much as it'd be nice to simply use the tags anyway, as a practical matter you can't simply ignore IE unless you're creating a special purposed or otherwise private web site.

HTML is not a semantic markup language, hijackers in the W3C not withstanding. It's a rich text markup format. It always has been. XML is (well, can be) semantic markup, and if you really want to store your pages semantically, use XML (with no styling at all), and transform them with XSLT. Dispense with the ridiculous concept of "semantic HTML", which is useless in practice and almost useless in theory, and try using the correct tools for the right job - XML for storing your content, and HTML for presenting it.

Re:No CSS on that site.

[arkanes]

Okay, vertical positioning, I'll give you. But fluid layouts? That's not hard at all. Websites are fluid by default, they only stop being fluid when you set explicit widths using fixed units. You can do that with CSS or tables.

There is no way in CSS to say something like "size this element relative to the size of that other element" without a parent-child relationship between them. That's the biggest flaw in CSS and it's supposed "semantic markup", because the parent-child stuff is determined by your *content*, the markup, and not just by the CSS.

Your point about the difficulty of moving stuff around in tables is well taken, but on the other hand compare the difficulty of moving from a 3-column fixed format to a 2-column flowed one in CSS vs tables - the hacks to do that kind of flowed layout (at least cross-browser) will require a total reworking of the CSS, as well as content changes. The table version requires changing a couple tag attributes and some reformatting. And even with the huge amount of CSS hackery required to get a basic "newspaper" style column layout (and it takes a very detailed knowledge of CSS to implement this, although [of course] most people will simply lift it from elsewhere), it *still* doesn't demonstrate the same, intuitive behavior that table rendering does when you size it very small or very large. To the best of my knowledge, you cannot make a column based layout in CSS without defining explicit widths at some point without relying on the table-layout attributes, which are not widely implemented.

And it still grates on my nerves how people will proudly display their hacks with comments and exploiting bugs in parsers and 100s of lines of CSS to create "cross browser" CSS, while at the same time decrying table based markup as "hackish". Here's a hint - your bug reliant stylesheets are actually an *obstacle* to the implementation of proper CSS support in IE.

Re:No CSS on that site.

[xENoLocO]

Oh, ye with little experience.

Those of us who have been dealing with CSS for several years have no problem at all visualizing the layout. The big question here is, how do you visualize YOUR layout when you can't have images loading? How do you visualize your table layout on a cellphone? How do you visualize your layout when you cant visualize anything at all... for example if you have low vision or no vision?

Maybe instead of thinking about getting the job done fast you should consider getting the job done right when you're doing your estimates.

Have a good one!

This post brought to you in semantic XHTML.

Re:No CSS on that site.

[schon]

there's some serious advantages - like the fact that all major and most minor browsers will render them identically, that they're far more intuitive, and that they allow re-flowing in a way that you can only do with CSS attributes that are explicitly designed to mimic the layout algorithms of "traditional" tables

If you really believe all of this, then I don't think theres hope for you... unless you define "major and minor" browsers as "IE". Tables get rendered differently by different browsers, just like CSS gets rendered differently.. the only thing is that it's easier to work around CSS bugs

CSS is *WAY* more intuitive than tables ever were (and there's a reason - because it's designed that way.) You use DIVs to define blocks of code, then use CSS to say how you want them positioned. With tables, you have to screw around with row and column spans *in the HTML itself*.

It's pretty obvious that you prefer tables because you've spent a lot of time learning their quirks - don't slam CSS just because you don't know how to use it properly.

try using the correct tools for the right job

If you really believed this, you'd be using CSS.

Re:No CSS on that site.

[arkanes]

Table layout algorithms have been essentially identical in all major browsers for at least 4 years. CSS layout, on the other hand, has at least 4 years to go before it's anywhere close.

I've been using CSS for many years. I've been using tables for many years, too, but don't mistake the fact that I'm aware of deficencies both in the CSS stndard and in it's imlpementations for a lack of knowledge. And the fact that you're telling me I need to use blocks of DIVs to layout my stuff is telling me that you're just another blind herd following CSS monkey, rather than anyone who can actually evaluate the usefullness and appropriateness of claims like "semantic markup". There's no excuse for telling someone to replace thier tables with divs "just because".

And just because you managed to find some stylesheet on a CSS site that you use blindly to work around certain CSS bugs (no doubt without realizing that the stylesheet itself relies on other bugs to work correctly, and the widespread reliance on these bugs is a major obstacle to the uptake of correct CSS implemetations in IE), doesn't mean that CSS incompatibilities are easier to work around than the practically non-existant table ones.

Re:No CSS on that site.

[Bogtha]

There is no way in CSS to say something like "size this element relative to the size of that other element" without a parent-child relationship between them.

Yes, there is. You can do it with CSS tables. Internet Explorer doesn't understand them, but we're talking about the capabilities of CSS, not the capabilities of Internet Explorer, right?

In any case, there's very few instances where a parent-child relationship isn't available to be used in this way. That's just the nature of web pages - things that are visually related tend to be structurally related too.

compare the difficulty of moving from a 3-column fixed format to a 2-column flowed one in CSS vs tables

That's not a very good example; in both cases it usually requires drastic alterations to the page structure.

The table version requires changing a couple tag attributes and some reformatting.

Come off it. Typical table layouts would need way more changes than that. I've made this change quite a few times to various websites of both kinds. The CSS websites, I've had to rearrange a couple of <div> elements and change a single stylesheet. The table websites, I've had to completely rework dozens or hundreds of pages, depending on whether they were dynamically generated or static.

And even with the huge amount of CSS hackery required to get a basic "newspaper" style column layout (and it takes a very detailed knowledge of CSS to implement this, although [of course] most people will simply lift it from elsewhere)

Rubbish. Float the first column over to the side, set percentage widths on each column, and clear the footer. That's not "a huge amount of CSS hackery", and it's even easier if you don't have to support Internet Explorer.

it *still* doesn't demonstrate the same, intuitive behavior that table rendering does when you size it very small or very large.

That's what min-width is for. I don't think table behaviour at extreme sizes is very intuitive at all, and I think it's just a convenient distraction - how many people actually need to resize their window to extremely small sizes and keep the layout intact?

To the best of my knowledge, you cannot make a column based layout in CSS without defining explicit widths at some point

You are being ambiguous. Did you mean fixed width?

Here's a hint - your bug reliant stylesheets are actually an *obstacle* to the implementation of proper CSS support in IE.

Unless you are an Internet Explorer developer, you'd better back off on that point, because they have posted on their weblog that they are going ahead and fixing CSS 2 selectors anyway. So it's not an obstacle and it looks very much like you've just made that up.

Re:No CSS on that site.

[Bogtha]

I'm an experienced designer but if I can't get CSS to do what I want (or find an example on the web) where does this code come from?

Well you don't start out with a complicated example when you learn other stuff, do you? Back off on the corporate intranet pages and do a few simple layouts to begin with. Once you're familiar with the basic concepts, it'll be easier to move on and do more complicated things.

Experience with tables doesn't translate to experience with CSS. You aren't experienced, you are a newbie as far as CSS layouts are concerned.

HTML isn't semantic, never was, and doesn't look like it ever will be.

What are you talking about? "Semantics" means "meaning". If you are using element types that mean something (as opposed to element types that just give a particular visual effect), then you are using semantic HTML. HTML has had semantic element types since the very first version.

The code is nasty but it wins hands down for speed and being intuitive.

People keep saying tables are intuitive. They aren't. You've just been using them a long time. Lots of rowspans and colspans aren't intuitive. Spacer gifs aren't intuitive. Superfluous closing tags aren't intuitive. It's all just stuff you've memorised. Of course something new is going to be at a disadvantage if you are assuming that you are going to be just as good with the new stuff even though you haven't built up this experience first.

Re:No CSS on that site.

[arkanes]

Yes, there is. You can do it with CSS tables. Internet Explorer doesn't understand them, but we're talking about the capabilities of CSS, not the capabilities of Internet Explorer, right?

Maybe you are. I'm talking about not only the CSS standard, but also the usefullness of CSS layout vs. tables in the real world, where implementations matter. Talking about what CSS3 could do if there was 100% browser support might be interesting over a beer, but it's not very usefull when it actually comes to developing web pages. In any case, there's very few instances where a parent-child relationship isn't available to be used in this way. That's just the nature of web pages - things that are visually related tend to be structurally related too.

Thats why there's no need for lots of semantically meaningless divs and spans in CSS markup, right? So if I go to a CSS advocacy site I shouldn't see any of those, or any suggestions to use those to implement the layouts I want? The direct parent-child relationships needed to "hook" in your CSS are fairly rare. Thats why you end up creating them, either with div/span (meaningless markup, existing for no other reason than to manage layout and in my personal view, a bigger sin than using tables), or by going with tables and dispensing with the notion of semantic markup alltogether.

Re:No CSS on that site.

[iBod]

Well said!

I have yet to see any browser grossly mangle a table layout in they way the commonly do with CSS floats and DIVs.

A question for those who endlessly bang on about 'semantic markup' would be "what semantic value do DIVs and SPANs add"?

Tables do at least have some semantic value when used for actual tabular data - DIVs and SPANs have none at all - they only serve as containers to which styles are applied.

If you want your markup to be purely semantic, it should have no presentational aspect at all (no DIVs, no SPANs).

As you say, the logical conclusion would be to use XML and XSLT. The trouble is, it's not always a practical or desirable solution.

Best Resource for CSS?

[gowen]

The remains of the hull of the USS Merrimack.

Re:A list of the site links?

[RangerRick98]

Google Cache of article

Re:A list of the site links?

[BishonenAngstMagnet]

http://www.csszengarden.com/ http://www.alvit.de/handbook/ http://www.wpdfd.com/editorial/basics/index.html http://www.w3.org/TR/REC-CSS2/ http://css.maxdesign.com.au/listamatic/ http://www.cssvault.com/ http://glish.com/css/home.asp http://webhost.bridgew.edu/etribou/layouts/index.h tml http://www.positioniseverything.net/ http://www.stylegala.com/

Counterstike

[flamearrows]

Please don't let me be the only one who saw the title and immediately though Counterstrike: Source...

Re:But they forgot..

[RangerRick98]

Interesting; the article I read has that site listed third as "Official Cascading Style Sheets Level 2 Specification."

CSS Cheat Sheet

[Sheriff Fatman]

May I also recommend Dave Child's CSS Cheat Sheet ?

Print it out & stick it on the wall/partition - it covers almost all the CSS you'll use day-to-day, and (IMHO) it's much quicker than digging through the online documentation or the O'Reilly book.

Similar things for Javascript, PHP, etc. are linked from here if you're interested.

Re:CSS Cheat Sheet

[dse]

Visibone's HTML/CSS reference card is worth the $10. Nice four-page card that goes into a lot more detail on browser compatibility, CSS property values, how CSS relates with HTML, and so forth, yet manages to fit all the CSS stuff in one page.

(They also make a good JavaScript card from which I learned most of my JavaScript, as well as those nifty color charts.)

Another top 10, hurray!

[suspected]

I love reading articles that indicate the top 10 of anything because you never have to worry about the list being subjective. You always know that the author went out of his way and used a numerous amount of resources, reviews, and statistics to compile such a list. Either that or he just inappropriately used the "top 10" catch phrase to garner more readers, but I'll give him the benefit of the doubt since this article is on, as Bush would phrase it, "the internets."

can I add one?

[Anonymous Coward]

The edit css plugin for firefox lets you edit the css data for any page and instantly see the changes.

CSS Sidebar for Mozilla/Firefox

[superflippy]

I find the CSS Sidebar immensely useful. It lets me quickly look up a style and see what values it takes. It's also a good reminder of some of the little-used styles.

The REAL news ...

[ggvaidya]

from the slashdot-is-moving-to-css-in-just-a-few-weeks dept. ...

Is that for real? Not been having much problems which Slashdot recently, but if they're chucking away their mess of tables ... the apocalypse might be at hand after all! Yippee!

Re:The REAL news ...

[The Mgt]

I notice slashcode seems to have done away with table layout, on the main page anyway.

Re:The REAL news ...

[H0p313ss]

With multiple stylesheets no less! Time to pre-order Duke Nukum Forever!

<link rel="stylesheet" type="text/css" media="screen, projection" href="//www.slashcode.com/base.css" >
<link rel="stylesheet" type="text/css" media="screen, projection" href="//www.slashcode.com/ostgnavbar.css" >
<link rel="stylesheet" type="text/css" media="screen, projection" href="//www.slashcode.com/slashcode.css" title="Slashcode" >
<link rel="Alternate stylesheet" type="text/css" media="screen, projection" href="//www.slashcode.com/slashdot.css" title="Slashdot" >
<link rel="stylesheet" type="text/css" media="print" href="//www.slashcode.com/print.css" >

Re:The REAL news ...

[dancallaghan]

Yeah about time too ... I mean, CSS has only been around for almost nine years ...

Re:The REAL news ...

[schon]

Yeah, too bad it doesn't validate. :o)

Re:The REAL news ...

[SnowWolf2003]

Looks like it is for real

See CmdrTaco's journal

pwnd.

[mindwar]

slashcache
also here's a few interesting links bookmarks layouts more layouts

Re:But they forgot..

[dagny_dev_]

I also wish they would have listed the web developer's handbook , at least as an aside. It's a good starting point. I keep it bookmarked and use it to get to other sites.

Best - NCDesign.org

[N8F8]

Awesome reference for HTML and CSS that shows examples and browser compatability:

• CSS
• CSS Property List
• HTML
• HTML Tag List

Bookmark this page

[jurt1235]

A lot of other CSS sources are already being quoted now, better start bookmarking this /. article then.

CSS tables

[Richard W.M. Jones]

Yes, a few sites are now using CSS. But often, they still don't "get it" - they've just replaced with to arrive at a mess of divs, instead of a mess of tables. We call this "CSS tables".

Structural markup is the essential differentiating factor, not just that you have found out how to replace tables with divs ...

</rant> over.

Rich.

Re:CSS tables

[zkn]

And divs are ment to mark divisions, not be a universal styling element.
The point of CSS is to seperate the design from the underlying HTML, not just replace tables with a mess of nested divs.
Divs are ofcause usefull to seperate different parts of the site like menues and content, but to many use several nested divs to make borders, backgrounds and position elements "just right" ending up with code like this for menues:

<div>
<div><a /><div>
<div><a /><div>
<div><a /><div>
</div>

So instead of using CSS to improve the HTML, they use it to fuck it even more up. Now having effectively removed even the slightly understandeble table layout, and replaced it with HTML that only looks right when you have the magic Stylesheet that it was designed for.

Now that CSS has caught on, people need to push semantic HTML using divs for everything just isn't right.

Re:CSS tables

[Darkman, Walkin Dude]

CSS Zen Garden is a wonderful resource and has a lot of pretty pictures in it, but really it is taking two steps back to the start of the web, where every site was a poster with little interaction. All of those fixed layout designs and shiny objects are good to display artistic talent, but try putting dynamic content in there, and you are in for a world of hurt.

Re:CSS tables

[Richard W.M. Jones]

Why? I really don't understand this, what's wrong with divs?

So that your site works in older browsers. - If it's just a bunch of nested divs, it'll collapse into short lines of text on an older browser.

So that your site works in text-only browsers. Not just some Unix reprobates using Lynx, but people using mobile or otherwise "reduced" devices.

So that a speech reader (an accessibility device used by the millions of partially sighted and blind people in the world) can stress the structure of the page when reading it, which helps the visitor to understand how it is laid out even when they can't see it.

So that you can easily retarget content just by changing the stylesheet or (better) providing device-specific alternate stylesheets.

So that search engine spiders can understand the structure of your page - eg. they can identify the important headings.

So that you don't forget what elements in your site mean.

That's just off the top of my head.

Rich.

Re:CSS tables

[Millennium]

Why? I really don't understand this, what's wrong with divs?

Nothing is inherently wrong with divs, as long as you keep in mind that divs don't mean anything, and that a meaningful tag is always preferable when one is available.

To illustrate this, let's look at some common page-design tasks. Suppose that you want your page's title (which you'll type in text) and an image to appear at the top of your page. Many people would tell you to use a div with an id of 'head' to wrap everything, but there's a better way: simply use an h1 tag and give it a background and background-image. By using a meaningful tag for your page header, you've cut out excess HTML code, and the result is more elegant.

Let's say, however, that you want more than just text and an image in your header. Suppose, for example,that you want to do something like Slashdot, using text, an image, and more images representing the last several categories that have been updated. There is no one tag that can encompass all of this, and so here we have a case where a div is appropriate. Give it a meaningful ID -'header' is a common choice- and put your header elements inside it.

The rule for elegant code is to use the most meaningful tags which will do what you want. DIV tags are suitable when nothing else is available, and there are times when that happens. However, they should not be used when better tags exist.

Re:CSS tables

[Bogtha]

Preferably, anyone back to the version 2 browsers should be able to get something out of it

That's taking things too far. Anybody using browsers that old are dead in the water - they don't support the HTTP Host header, which makes it impossible to visit websites that use virtual hosting - which is extremely common. Also, if I remember correctly, you couldn't even use Internet Explorer 2.0 to download Internet Explorer 4.0 from microsoft.com when it was released - about five years ago.

As far as version 3.0-era browsers go, their SSL root authority certificates expired years ago, so you can't use them for e-commerce without customers getting big warnings about your website being insecure.

Version 4.0-era browsers are so rare, with capabilities so diminished compared with version 5.0-era browsers, that I would say that it's not worth supporting them, although a case can be made both ways. But supporting 3.0 and 2.0-era browsers isn't justifiable in my opinion.

CSS Zen Garden styles

[AaronLawrence]

I find it interesting that none of the CSS ZenGarden style sheets I tried resized at all with the browser window, and most of them coped poorly or not at all with large text (many became unusable).

Re:CSS Zen Garden styles

[nazh]

There are exception like Patrick Griffith's "Elastic Lawn" http://www.csszengarden.com/?cssfile=/063/063.css& page=0. Scales rather nicely when you adjust the font-size.

Re:CSS Zen Garden styles

[Bogtha]

you (still) can't create beautiful layouts in CSS, while maintaining anything like cross browser support

The majority of the CSS Zen Garden designs have cross-browser support.

user defined styles or overriden text size or even page size

Table layouts have no support for user-defined styles.

Whether a layout works with overridden text size or has a fluid layout is not something that is different between table layouts and CSS layouts. Both can break, both can work. It's whether you assume a certain text size or canvas size when laying things out that makes the difference, not whether you use CSS or tables.

Of course, having all these features in some avante-garde fancy art designers wet dream is hard using *any* technology - and thats another fundamental that people skip over, too.

I missed your point there. Can you restate it?

CSS garden could be implemented with a big image map much more simply, and a Flash site not only simply but also with more functionality.

Huh? Maybe you could get it to look similar under default settings, but it wouldn't work the same - and I thought you just said user-defined styles, overridden text size, different window size and cross-browser support were success criteria? Image maps and Flash presentations can't acheive all that.

Re:CSS Zen Garden styles

[nazh]

He was also complaining about designs that did not handle resizing of text very vell. And very common "webdesigners" tries to lock the users to one font-size and the layout breaks horrible if one tries to resize the text. So yes, the layout I linked to is an exception to that rule. Even a layout that uses the whole width can break when the text is resized.

So for me a design that doesn't break in diffrent font-sizes is more important than one that uses the whole width.

How great CSS is

[ChrisF79]

I'm not the best one to comment on this by any means, but when I saw in the summary the part about "how great CSS is," I really do have to agree. I threw together a site just as a way to help some of my students back when I was teaching and really didn't know anything about creating a website. I hacked together a site with tables for layout and some very limited PHP and enjoyed doing it. From there, I went to a site that showed a table layout and the exact page done in CSS and used that as a starting point to learn CSS. I have to say, I was impressed with how much easier it was to use and modify later. Like I said, I'm still a horrible web designer by all accounts, but I can attest to how much easier it is for a person new to the concepts to use CSS instead of tables.

Moderators, you didn't get the joke

[lasindi]

During the US Civil War, the sunken USS Merrimack was raised and converted to an ironclad by the Confederates, who renamed it the CSS Virginia (which later fought in the famous battle of the ironclads). So the parent was just trying to make a, albeit lame, joke about the acronym "CSS." It wasn't truly offtopic, and it definitely wasn't a troll.

Take a step back and re-evaluate CSS

[Loundry]

I'm a programmer who has been thrust into the world of CSS and been on many occasions quite frustrated with it. It seems arbitrary, arcane, and particularly difficult to debug. On top of that, it seems to have a set of zealots who defend it (and demand it) with bitter viciousness.

I had concluded that CSS was "programmer-friendly" in the same way that a rusty jigsaw was "penis-friendly".

I recently picked up a book entitled _Designing with Web Standards_ by Jeffrey Zeldman. It's a good an honest resource, and he even claims to avoid zealotry. But, in the book, he examines a particular website, one with a plain-jane two-column appearance, which he said took "three CSS experts" to re-code from tables to CSS layout. Not three CSS advocates, three CSS *experts*. On top of that, their "solution" turned out to be a hack.

Honestly, what success am I supposed to expect in using CSS when recoding common layouts in CSS is a struggle for even CSS experts? I am forced to conclude that it is folly trying to adhere to any kind of CSS standards with any kind of rigor until CSS itself becomes more mature.

Now this is where I get flamed. I'm sorry, but I have to call it like I see it.

Re:Take a step back and re-evaluate CSS

[foniksonik]

Despite the limitations CSS is still the future of the web. It's not about beating table layouts though. It's about programmable attributes in a scalable system.

Think about using XML + XSLT + CSS to generate scalable presentation layers that meet the needs of multiple PLATFORMS using the same business logic and content layers.

Think about Accessibilty and the ability to define stylesheets for web browsers, text readers for the blind, PDF, printed versions, etc. without having to use multiple html layouts.

I find CSS to be quite robust as it is now and couldn't possibly design some of the web sites I've created recently without it. In fact I find myself wishing for a more robust CSS like stylesheet support model in my print programs, ie: InDesign, Illustrator, etc. so that I could transform content designs into multiple print layouts as easily as I do my web sites.

Sorry I couldn't flame you more but I felt it was more important to point out the positive side of CSS than tell you how ignorant you may or may not be on the subject.

Re:Take a step back and re-evaluate CSS

[Anonymous Coward]

Oh, don't be so silly. A two column layout? Please.

body{background:url(tilingstripe.png) center repeat-y;}
#leftcol{width:49%;float:left} #rightcol{width:49%;float:left}

Pshaw. And I'm a *girl*.

-Dody

Re:Take a step back and re-evaluate CSS

[Finuvir]

That same design would have been trivial to convert to CSS (dropping most of the extraneous markup along the way) if those experts were able to use the full power of CSS2. Unfortunately a significant number of people use a browser that has yet to make any headway into supporting CSS2. You may be able to guess who produces said browser.

Java Swing or AWT to HTML and CSS

[syousef]

Here's a shameless plug for you. Here's my code for converting Java Swing or AWT to HTML and CSS. It's primitive, but it may be useful to someone. It should be easy to modify this to convert any running Swing/AWT application from Java to HTML/CSS. Oh and of course its GPL.

http://www.progsoc.uts.edu.au/~sammy/javaGUIConver ter.html

Trying to understand CSS...

[islandrain]

Ironically, I am taking the week to sit down and really figure out CSS because I'm sick of seeing the term everywhere and having ZERO clue of how to use it effectively. Let me get this straight to begin with - I'm a designer, not a web expert. I use *gasp* Dreamweaver, although I know HTML just fine. It's a visual thing and I work better seeing the flow of the graphics, etc. directly on the page. So my biggest beef is wanting to design non-framed pages where menu links will change without having to manually change them in each page. I want you CSS people to respond to this: Tell me three reasons why CSS is the way to go (cleaner codes isn't a good reason for me, either).

Re:Trying to understand CSS...

[goldspider]

1. You don't have to modify every .html file when it comes time to re-design.

2. Accessibility - your site will be readable by screen-readers and PDAs.

3. You can use standalone CSS to control the overall dosplay, and in-line CSS to control page-specific elements.

I wouldn't call myself a CSS "expert", but I am a recent convert.

Bandwagon?

[danbeck]

Jump on the bandwagon? There is no bandwagon, web pages are built with HTML and CSS for many reasons - the least of which is because the Jones' are doing it.

Welcome to the intarnetz, we use CSS here.

The problem is browsers, not CSS

[goldspider]

I'm reading that book too, but I have a different take on why it took three CSS "experts" to re-code that page.

It's not CSS' fault; it's the noncompliant browsers. Zeldman's book is basically about using CSS to build a standards-compliant web site that renders properly on a variety of non-compliant browsers.

Given the differing level of support among the browsers out there, it's no wonder that one has to jump through some hoops to get a consistent display.

One more

[amrittuladhar]

One more, a good resource not only for CSS but many different web technologies, mostly for beginners:

W3 schools (Warning: Has a popup, but it's worth it)

Essential Bookmarks For Web Developers

[vitaly.friedman]

Ironically, the main version of The Web Developer's Handbook wasn't mentioned in the list. However, I actually feel great being slashdotted again. ;)

quirksmode

[eelcoh]

Has anyone mentioned http://www.quirksmode.org/?

css attributes reference

[rnd()]

this is a great reference, and it shows which features are IE only vs which are standard.

Re:Keep it simple stupid...

[Bogtha]

I use the web as an information resource. That means I want "Just the facts Mam". Those could have been presented to me in HTML 3.2

Disable CSS in your web browser. You'll get "just the facts" from the websites that use HTML + CSS, and you'll get "the facts dressed up with lots of style" from the websites that use HTML + tables. It sounds to me like HTML + CSS does what you want, not HTML + tables.

I.e. I get back to a world where I view what is important to *me* [...] But I tend to come from the old school -- show me what I want to see -- when I want to see it.

That's exactly what CSS was designed to do. Want a plainer website? Use a user-stylesheet that disables all the backgrounds, hides all the graphics, and uses your colour scheme. That's the "Cascade" in "Cascading Style Sheets".

Re:-moz-stylings

[arkanes]

These are the mozilla-specific names for features that are in CSS 3. The dash prefix, by the way, is the correct and standards-compliant way to create extensions.

I believe that -moz-border-radius is already mapped to it's CSS3 name, but if not they will be as CSS3 support is implemented.

Recoding a web site in CSS

[horza]

If you look at the following web site with property for sale in Nice, you will see it uses extensive CSS. The original web site was done using tables, which I then converted to CSS. There isn't a single image in the whole of the HTML of the web site apart from a few photos which are content and not design.

Advantages CSS over tables:
* the nested tables were fixed width, too complicated to convert to proportional, and if you resized the windows to anything larger than 1024x768 then you had to pan around using the scroll bars. The CSS degrades wonderfully. Even if the display breaks and doesn't look as pretty, it's still usable at any window size
* pages are a fraction of their original size, and the actual content is clearly visible and editable

Advantages tables over CSS:
* cross-browser compatibility. Everything always works in Firefox but IE is a nightmare. Grey bars appearing randomly for no apparent reason, margins having unpredictable behaviour, and things breaking for no reason when pixels are exactly aligned (as proved by basic arithmetic)

From painful experience I can recommend that you get the designer to mock up in photoshop, and then you design the site directly in CSS and ask for the images to be chopped into the way you need as you go along. Don't get the designer to provide you the HTML in table form which you then convert afterwards.

Hope this helps,

Phillip.

Re:Recoding a web site in CSS

[yasgo]

You don't code a site in CSS. The content still uses HTML.

The CSS styles that content.

Instead of div hell you should code the content using semantic blocks: headings (to introduce sections of the page), lists (for lists of items), forms, paragraphs (for most of the normal content), and tables (for your tabular data)

Write plain HTML, then just add divs

[oddityfds]

Just write a plain HTML page, something that would look ok and be readable without CSS. Then add div:s and CSS.

The result is a page that separates content from layout and works well both with and without CSS. It will also be easy to replace the CSS when you need to. This is also useful when you have different style sheets for different media. Have a "print" style sheet that excludes the sidebar and uses different colours.

Re:Don't sweat it

[Bogtha]

1. For some layouts, CSS just can't cut it the same way that tables can. Not all layouts, just some layouts.

Maybe I'm just an unusual exception, but it's been years since I've resorted to table layouts. Netscape 4 was the last reason to hang onto them as far as I'm concerned. Maybe it's different if you are making "arty" websites, but for websites that just want to present information in an attractive way (i.e. every website I can think of outside of graphic design), I really don't see any need.

2. CSS syntax, behavior, and debugging are arcane and unintutive.

I agree. But I think exactly the same thing about table layouts. I think the only reason people call them "intuitive" is because they've been doing them for years. I once watched somebody (with a lot of experience) build a website that had tables nested about a dozen deep. I then went in and deleted more than half of them - without adding any CSS or anything - and the layout remained exactly the same. I've seen similar people get completely tied in knots trying to keep track of how deep they are and how many rowspans they need. I've seen bugs relating to table layouts where one half of a submit button was clickable and the other half wasn't. Things like that wouldn't happen if table layouts were intuitive.

3. CSS advocates are often times really snotty, mean, and religious about CSS.

You can say that about any technology really (table layout bigot example), if you use that as a reason to avoid CSS, then you are just cutting off your nose to spite your face.

Firefox users; a handy extension to help learn CSS

[rjd97c]

This is a great extension which enables you to see and edit (in real time) CSS for sites, as well as overlay ID and class info on the actual page! BRILLIANT! (and a lot more stuff too) WEB DEVELOPER