6 ms·
Don't Blame CSS For Your Incompetence
- tlrobinson 18y ago"They're both wrong. You can order your content how your like. You are restricted only by your knowledge of CSS and not its ability as a styling language to render your documents. It took me about 30 minutes to knock up a demonstration, which you can see for yourself: columns in order and columns out of order." I think the fact that it took you (a CSS pro) 30 minutes to come up with a simple 3 column example that's hard for me to understand, reflects poorly on CSS. Just because something is possible doesn't make it a good technology automatically. I might be able to make a Turing machine out of my blender, some rubber bands, and chewing gum (note: haven't actually tried this). It might be Turing complete, but I'm not going to be able to program anything useful with it (an admittedly extreme example)
- Jem 18y agoI'm working on an unfamiliar system, with unfamiliar tools, and doing several things at once - all whilst dribbling snot over my keyboard - but I'll be sure to narrow it down to 10 mins next time. :)
- KrisJordan 18y agoThis article, while well intentioned, misses the point it was trying to prove. The article gives an example of a three column layout with two different orderings of the <div>'s in HTML to prove "ordering doesn't matter". The problem is the CSS in the examples changes along with the re-ordering of divs. This is exactly the point it was trying to disprove. Though the coupling between CSS and HTML is loose it's not quite loose enough to allow HTML to be arbitrarily reordered and maintain the same presentation without also modifying the CSS.
- Jem 18y agoYou're right, I misread Joel's quote & I'm grateful he took the time to clarify. This doesn't make it any less possible. For example: http://www.jemjabella.co.uk/junk/rearrange/abs-columns-in-order.htm http://www.jemjabella.co.uk/junk/rearrange/abs-columns-in-or... http://www.jemjabella.co.uk/junk/rearrange/abs-columns-out-of-order.htm http://www.jemjabella.co.uk/junk/rearrange/abs-columns-out-o... Same CSS, re-ordered columns. Although for the record, I dislike the technique used to achieve the results. As the person above you said - just because it's possible it doesn't mean it's any good!
- shiranaihito 18y agoOut of curiosity.. Is there a fun story behind your website's headline: "Jem Jabella - Ultimately Better Than You" ?
- Jem 18y agojemjabella was nickname given to me about 10 years ago, and the tagline is intended as humour. I use it as a measure of whether or not people should read my site... i.e. if you find it funny, or are able to ignore the blatant egotism, then you would probably be OK reading my site. If it winds you up or gets to you, then you won't like the content and you should read at your own risk. :)
- shiranaihito 18y ago> the tagline is intended as humour. I see.. :p Could you explain the joke to me?
- slig 18y ago"I think the fact that it took you (a CSS pro) 30 minutes to come up with a simple 3 column example that's hard for me to understand" Not to mention the fact that he only tested in FF. The real nightmare starts when you have to make it look good on IE too.
- Jem 18y agoDid you test it in IE before you made that comment? I ask because I'm now at work, and have access to a windows box with IE6 installed. Lo and behold, my examples work EXACTLY the same as they did in FF3. No nightmares involved. :)
- henryl 18y agoNot to mention, the "in order" example he gave doesn't scale with the width of the browser and only works for fixed width. There is only one way in CSS (without js) to do a layout where there are two fixed width side bars on either side and one center content area that grows/shrinks with the width of the browser window and that is the "out of order" way (two floats, one non-floating div with margin-left, margin-right equal to left,right sidebars' widths), which coincidentally, he also screws up via the use of relative positioning and 3 floats.
- Jem 18y agoIt's "she", if you don't mind; and nobody asked for a fluid layout. You're trying to point out flaws in an example designed to prove a totally different point.
- henryl 18y agoI apologize. While I understand the point you are making in the article, I disagree with this statement: "You can order your content how your like. You are restricted only by your knowledge of CSS and not its ability as a styling language to render your documents. " I will retract what I've said if you can demonstrate a fluid 3 column layout using only those 3 divs (left, right, center) where the center column expands with the browser, the sides remain constant width, and the order is preserved. This is trivial using tables. Css tends to show its rough edges when you use it outside of a fixed width or absolutely positioned environment.
- leohorie 18y agoAm I the only one who gets scope creep on rethorics like this? And we joke about clueless project managers... :) Afaik, the exact challenge you're proposing can be done with something like: .a,.b,.c {position:absolute;} .a {left:0;width:200px;} .b {left:200px;right:200px;} .c {right:0;width:200px;} Before anyone adds new requirements, consider these ones: it has to be emailed and in the printout, the columns should look like tabs above the midle area. In all seriousness, sometimes requirements are inane, pointless and unreasonable and you just have to push back and say it can't be done. I think CSS detractors tend to obsess over specific points that tables can handle normally, but often leave out real life situations where obsessive alignment is not necessarily the biggest of the problems. Bias (in this case towards css vs tables, as opposed to web dev in general) is an interesting phenomenon.
- brentb 18y agoI also think it's funny that the simple 3-column example that took you 30 minutes to put together has exactly the same shortcomings that are discussed in the original article (for instance, try setting the background color of one of the sidebars or swapping their order in the markup without changing the CSS). It's true that you can order the markup however you want and write the CSS to make it look right, but the key point is recognizing that (unless you position everything absolutely) there is still no true separation between the markup and the CSS (at least where layout is concerned). If they were truly independent, then it wouldn't matter what order the elements appeared in the markup... the CSS would lead them to render the same way on the screen every time. It's worth pointing out that there is true independence between the markup and CSS where styling is concerned (and this is where CSS shines). If you style the background, font, opacity, whatever of a particular element and then move that element to a different location within the markup, the element will still look exactly the same (unless the new position in the DOM subjects it to other CSS rules that override the old ones). I'm rambling a bit here, but all I'm really trying to say is that CSS has its place in the web development toolbox, but old-school tables often have the edge when looking for a layout that just works.
- trapper 18y agoPlease everyone read the second paragraph of brents insightful comment. Another place where tables have the edge: when a new browser version comes out, css layouts are often broken, especially if they rely on hacks.
- deleted 18y ago[deleted]
- Jem 18y agoI apologise in advance. On reflection, the title sounds much more offensive than was intended. The point of the entry still stands, however.
- gojomo 18y agoFYI, I found your blog's color scheme -- blue-on-blue with blue links -- and small text hard to read. Design tips that are hard to read are somewhat self-nullifying.
- Jem 18y agoDesign and coding are two totally separate arenas. I am useless at design. Nonetheless, I'll bear your criticism in mind. (Although you can resize the text yourself, it's %-driven.)
- Jem 18y agoI threw in an override stylesheet with larger text and more contrast; append ?useoverride to any of my URLs if you need to use it.
- pg 18y agoIf you give me a new title that's closer to what's intended, I'll change the title of the link.
- Jem 18y agoGiven that the point of the entry is to show off the position independent examples rather than insult any one individual's abilities, something like "Order-Independent CSS Layout Examples" would probably be more appropriate. I assume I could change it myself (the edit link is there)...
- pg 18y agoI thought you meant the link had timed out. (It does after a while.) If that would be a better title, why not change it?
- wernerv0nbraun 18y agooh christ here we go again, another blogger telling me that choosing tools is pointless, if i have a brain i will excel with any tool, regardless of it being mishapen and dull.
- arockwell 18y agoThis is not exactly a very convincing article. For one the two examples do not display the same in FF3 (there's different amounts of white space between the three columns in the different versions), and of course, the examples looks completely different in IE 6 which is about 90% of the problem to begin with.
- Jem 18y agoThe articles I'm disagreeing with state that it's not possible, neither restrict that statement as purely an IE6 problem. The demonstration is to prove that it is possible, which it clearly is. I could tweak the positioning of the columns by one or two pixels but it wouldn't make any difference to my point, would it?
- randallsquared 18y agoWe Tablists* only have to point out one hole at a time to continue being right. Not restricting the statement just makes it harder to refute, since you have to cover all the ways in which CSS-for-layout is deficient, rather than just a single way. * Table-for-layout-ists is just too long, don't you agree? ;)
- KrisJordan 18y agoYou're actually proving the point those articles are agreeing on. Your CSS changed to make that possible. The point is when you change the ordering of DIVs your CSS often also has to change. So they are not as loosely coupled as one would hope a Model-View relationship might be.
- mixmax 18y agoApparently it's CSS day on HN.
- eli 18y agoI think it's one downside to the only-vote-up story system; once a debate spills outside the comments of one article, you end up with half a dozen submissions reflecting various viewpoints.
- deleted 18y ago[deleted]
- ibsulon 18y agoThe original example had a top and bottom spanning all three columns, making the problem fundamentally different than you describe. I would be more interested if you could take that original example in the original post and show how CSS does not run into the problem that is described in the original post. Further, you test it in Firefox 3. The problem that I see is that in the Real World (TM), I must make sure that the website works on Internet Explorer 6. Most of the problems I encounter with CSS layout involves cross-browser inconsistency. I do not pretend to be a specialist in front end work; frankly, it is my least favorite part of development. However, I've made an effort to learn CSS layout systems only to go back to tables in projects that someone else isn't doing the work.
- Jem 18y agoThe original example in the original post complained about not being able to swap the center and side columns, I didn't feel that the header was relevant. However, I could create additional examples if necessary. Ref: real world - agree totally. However, as I said earlier today ( http://news.ycombinator.com/item?id=463712 http://news.ycombinator.com/item?id=463712 ) you can't blame CSS for the flaws in IE.
- eli 18y agoThe thing I think a lot of people are missing is that I don't care whose fault it is. As a designer, I just need my sites to work in the real world (where 1/3 of my traffic is IE6). I'm not placing any blame, but if it doesn't work in IE6 then it doesn't work for me.
- axod 18y agoHow about you create a full solution... * valign works * cells are equal heights, dependent on contents * if width of contents is too big, cells adjust and display it best they can
- Jem 18y agoI wish :)
- sam_in_nyc 18y agoI like tables because I know how to use them, and they work in all browsers. Plus valign and align work. The lack of valign in CSS as well as the documentation of it appearing to be: "this but that unless this or that and then that, but you cant do that unless this, duh, know CSS," makes me want to RAAAAAGE. I always thought CSS worked well for decorating stuff, and not for layout. But, anyway, I almost always use CSS. The exception being: I need some quick layout where floats are screwed up and I don't feel like spending a whole day figuring out why (see above statement about its documentation). Regardless, one thing that bothers me is when people claim that it's entirely your fault if you can't use something, because you didn't bother to learn enough about it. This is always true, but surely we all can agree that things have different levels of inherent difficulties. Adding, for example, is much easier than differentiating, though they both require you to learn it before you can use it. So when people complain about how CSS is not as simple as it could be, or that all the little nuances and exceptions are ridiculous, this is due to some mixture of ignorance and inherent complexity in CSS, and is not entirely the person not knowing CSS. This also applies to situations where rather than taking a criticism in stride, the answer is: "Don't like it? GET OUT." I guess, in short, the attitude of "that's the way it works, deal with it" as being a valid argument for "you shouldn't be complaining" really pisses me off.
- joe_the_user 18y agoAh, the thing I just realized that I know more about divs and CSS and yet I can still use tables better. Having only worked with table a dozen times, I still know exactly what a table will look like when I create it. I know that I won't know, exactly. what div/CSS is going to look like when I'm done. And mod-up "Regardless, one thing that bothers me is when people claim that it's entirely your fault if you can't use something, because you didn't bother to learn enough about it." A good language, a good system, a good process "makes easy things easy and difficult things possible". As far as I can see, CSS fails with both. And, today was the tipping point for me personally. I would have endorsed CSS yesterday. Well, I know CSS is great if I want arbitrary rectangles place on the page.
- sam_in_nyc 18y ago
- discojesus 18y ago> It took me about 30 minutes to knock up a demonstration Really? >Both are visually identical in appearance, both use CSS to control the positioning of the columns, but one is in "correct" logical order in the document (left, center, right) and the other out of order (center, left, right). Really?? > (Only tested in Firefox3 on Linux.) Ah, there it is. :)
- braindead_in 18y agoWe'll the author says intent was to prove it is possible. I believe him.
- Jem 18y agoHer.
- braindead_in 18y agooops. my bad.
- Jem 18y agoDon't worry, you're not the only one that made that assumption. Apparently only men should be allowed near code ;)
- braindead_in 18y ago:). It was just a careless mistake. And we really love it when someone can figure out CSS better than us ;).
- ars 18y ago"He" can mean male, but in English it's also the gender neutral. BTW you have 4 w's in the url in your profile on HN.
- 18y ago
- sayrer 18y agoCSS is missing features. http://news.ycombinator.com/item?id=464428 http://news.ycombinator.com/item?id=464428
- newt0311 18y agoSay... I decide to write a word processor in ASM (think... ultra fast etc...). I manage to waste 3 months in the process and get nothing useful. At the end of this ordeal, should I 1) Blame ASM and use something more convenient like python, or 2) Blame my incompetence and soldier on? Now replace ASM with CSS, python with tables, and word processor with complex webpage.
- fhars 18y ago(Tested only in Firefox 3 ...) Ay, there's the rub, / For what in that tests of compatibility for bugs may come / When we have shuffled aroud this horrible mess of browser code / Must give us pause.
- Jem 18y agoIt works in IE6 too.