Stories
Slash Boxes
Comments
Search

News for nerds, stuff that matters

Slashdot Log In

Log In

Create Account  |  Retrieve Password

10 Best Resources for CSS

Posted by CmdrTaco on Mon Aug 15, 2005 06:41 AM
from the slashdot-is-moving-to-css-in-just-a-few-weeks dept.
The Internet
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."
+ -
story
This discussion has been archived. No new comments can be posted.
The Fine Print: The following comments are owned by whoever posted them. We are not responsible for them in any way.

10 Best Resources for CSS 50 Comments More /

 Full
 Abbreviated
 Hidden
More
Loading... please wait.

  • No CSS on that site. (Score:3, Interesting)

    by McDutchie (151611) on Monday August 15 2005, @06:43AM (#13320224) Homepage
    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. (Score:5, Insightful)

      by iBod (534920) on Monday August 15 2005, @07:10AM (#13320291)
      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. (Score:2, Informative)

        by mill (1634)
        Umm, it isn't valid semantic markup if you are using tables for layout.
        • 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

          • Re:No CSS on that site. (Score:5, Insightful)

            by schon (31600) on Monday August 15 2005, @09:23AM (#13321022) Homepage
            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. (Score:5, Insightful)

              by arkanes (521690) <arkanesNO@SPAMgmail.com> on Monday August 15 2005, @09:41AM (#13321152) Homepage
              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. (Score:3, Interesting)

                by iBod (534920)
                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

      • Re:No CSS on that site. (Score:2, Informative)

        by 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. (Score:5, Informative)

        by Bogtha (906264) on Monday August 15 2005, @08:32AM (#13320701)

        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.

        • 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 *c

            • 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 developin

  • The remains of the hull of the USS Merrimack [wikipedia.org].
    • 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 [wikipedia.org] 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.

  • Counterstike (Score:4, Funny)

    by flamearrows (821733) on Monday August 15 2005, @06:54AM (#13320250)
    Please don't let me be the only one who saw the title and immediately though Counterstrike: Source...

  • CSS Cheat Sheet (Score:5, Informative)

    by Sheriff Fatman (602092) * on Monday August 15 2005, @06:56AM (#13320256) Homepage

    May I also recommend Dave Child's CSS Cheat Sheet [ilovejackdaniels.com] ?

    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 [ilovejackdaniels.com] if you're interested.

  • 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? (Score:5, Informative)

    by Anonymous Coward on Monday August 15 2005, @06:56AM (#13320259)
    The edit css [mozdev.org] plugin for firefox lets you edit the css data for any page and instantly see the changes.

  • CSS Sidebar for Mozilla/Firefox (Score:5, Informative)

    by superflippy (442879) on Monday August 15 2005, @06:57AM (#13320260) Homepage Journal
    I find the CSS Sidebar [mozilla.org] 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 ... (Score:5, Interesting)

    by ggvaidya (747058) on Monday August 15 2005, @06:59AM (#13320266) Homepage Journal
    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!

  • pwnd. (Score:2, Informative)

    by mindwar (708277)
    slashcache [slashcache.com]
    also here's a few interesting links bookmarks [alvit.de] layouts [thenoodleincident.com] more layouts [bluerobot.com]
  • A List Apart [alistapart.com] and StopDesign [stopdesign.com] are sites that have great resources and tutorials, well worth a look.

  • Best - NCDesign.org (Score:5, Informative)

    by N8F8 (4562) on Monday August 15 2005, @07:14AM (#13320301)
    Awesome reference for HTML and CSS that shows examples and browser compatability:

  • CSS tables (Score:5, Insightful)

    by Richard W.M. Jones (591125) <rich@annexia.PARISorg minus city> on Monday August 15 2005, @07:20AM (#13320317) Homepage
    Yes, a few sites are now using CSS. But often, they still don't "get it" - they've just replaced <table> with <div> 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.

      • 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 (Score:5, Informative)

            by Richard W.M. Jones (591125) <rich@annexia.PARISorg minus city> on Monday August 15 2005, @08:45AM (#13320802) Homepage

            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 (Score:4, Informative)

            by Millennium (2451) on Monday August 15 2005, @10:26AM (#13321599) Homepage
            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.
          • 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.
  • I've not been paying as much attention to the browser wars as I once did. Does anyone know how WebCore (Safari) and Gecko (Firefox) compare in rendering CSS? I know that Safari supports the (completely awesome) text-shadow [w3.org] property whereas Firefox does not, but what are some other differences?

      • Re:-moz-stylings (Score:4, Informative)

        by arkanes (521690) <arkanesNO@SPAMgmail.com> on Monday August 15 2005, @09:15AM (#13320961) Homepage
        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.

  • CSS Zen Garden styles (Score:4, Interesting)

    by AaronLawrence (600990) on Monday August 15 2005, @07:25AM (#13320334)
    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).

  • Take a step back and re-evaluate CSS (Score:5, Interesting)

    by Loundry (4143) on Monday August 15 2005, @07:31AM (#13320357) Journal
    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.
    • 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.
    • 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 f
    • 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 (Score:3, Interesting)

    by syousef (465911) on Monday August 15 2005, @07:32AM (#13320364) Journal
    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 [uts.edu.au]

  • quirksmode (Score:3, Informative)

    by eelcoh (775552) on Monday August 15 2005, @08:21AM (#13320622)
    Has anyone mentioned http://www.quirksmode.org/ [quirksmode.org]?

  • css attributes reference (Score:3, Informative)

    by rnd() (118781) on Monday August 15 2005, @08:40AM (#13320761) Homepage
    this [microsoft.com] is a great reference, and it shows which features are IE only vs which are standard.

  • Recoding a web site in CSS (Score:3, Informative)

    by horza (87255) on Monday August 15 2005, @12:13PM (#13322424) Homepage
    If you look at the following web site with property for sale in Nice [medinheaven.co.uk], 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.

All trademarks and copyrights on this page are owned by their respective owners. Comments are owned by the Poster. The Rest © 1997-2010 Geeknet, Inc.