What is Digg?Sponsored by AVG
CNET Top Weekly Download for Free Anti-Virus view!
free.avg.com - 2.4 million people a week get AVG Anti-Virus Free, for the best protection against web threats.
91 Comments
- deansfurniture5, on 10/12/2007, -3/+65I'm not sure a CSS article has much worth if it's published using the default WordPress theme...
- inspecality, on 10/12/2007, -2/+30Counter Strike Source duh!! Obviously it is teh b3st for teh intarwebs.
- Fordi, on 10/12/2007, -3/+27I have only one disagreement with this page, rule 10:
Only a few hacks are (currently) needed:
1) The IE/Everyone Else Opacity disagreement. You need the #filter: alpha(opacity=x) hack for this to work properly. Or you could live without opacity, but who wants that?
2) The "IE won't hover non-anchors" bug. For this I skin a.div to display:block where I need hoverable stuff, instead of DIVs (SPANs need no such skinning). It helps alot that hoverables are usually stuff you'll want to be clicking anyways. It's technically a hack, but not a terribly hacky one, as it works cross-browser.
3) The IE/everyone else box model disagreement; the damned borders are inside the box in IE. You need a #width statement to account for this. - nofxjunkee, on 10/12/2007, -3/+23@PabloMac:
Since you're being pedantic I'll join the party.
"'I have only one disagreement...'
That's three, not one."
He has 3 reasons for disagreeing with one of the points. You didn't understand that? - Fordi, on 10/12/2007, -0/+20Funny thing. I got a page back from a designer once. Apparently the guy didn't know you're only supposed to use an ID on a page ONCE. They were used interchangably with classNames. I mean, fine fine, it looks alright, but I had to add JavaScript to this page, and locking down a given element was a bitch because of it. I ended up having to regex-replace every ID in every of about sixty files, then manually determine which ones were important.
Of course, the HTML and CSS weren't anything like well separated or neat either. Viewing it without CSS was ridiculously broken.
Damned moron. I wanted to shake him and yell LEARN YOUR GODDAMN TRADE, DOUCHE!! - mallow005, on 10/12/2007, -0/+18Actually, it IS straightforward and easy. The only things that make using CSS difficult are the different browser implementations of it. There is no excuse, the W3C drafts say exactly how CSS should behave.
- Drgn547, on 10/12/2007, -2/+20"Hacks are stupid. You don’t need them. Many CSS tutorials teach that to make a page work in multiple browsers, that you need to learn various “CSS hacks”. All this stuff is crap. You don’t need any of it."
Oh? What's this in lines 357-367 of his CSS file? Looks like a "Child Selector Hack" to me! (html>body = Child Selector Hack)
html>body .entry ul {
margin-left: 0px;
padding: 0 0 0 30px;
list-style: none;
padding-left: 10px;
text-indent: -10px;
}
html>body .entry li {
margin: 7px 0 8px 10px;
} - Agret, on 10/12/2007, -0/+18Well it's actually the default wordpress theme so I doubt he wrote that code.
- robinator08, on 10/12/2007, -2/+19"stack your classes: no one EVER uses this trick; you can apply as many css classes to a single tag as you want, just put spaces between the names, like will apply both the class exciting AND the class warning. this saves TONS of duplication in your CSS. (i don’t know why no one uses this trick. it’s great. when you see someone’s stylesheet that has dozens of lines like:"
Probably been posted before, but very useful. - tbeseda, on 10/12/2007, -8/+24Ignore the books?
Many CSS books are a priceless resource for true developers. Real web designers should have a broad, deep knowledge of the "language", not just a few tricks picked up on the relentless lists submitted to Digg.
I'll admit, many CSS books aren't worth much more than the lame articles that show up on Digg, and this resource is a good supplement to a developer's CSS knowledge base. - rodii, on 10/12/2007, -1/+15It is illegal. Take a look at the HTML 4.01 DTD:
<!ELEMENT P - O (%inline;)* -- paragraph -->
P is an unusual block element in that its content model only allows inline elements. - anagoge, on 10/12/2007, -2/+151) Don't use Century Gothic at 10pt as the body font.
- ropers, on 10/12/2007, -1/+11This isn't MySpace and I don't care what bands you like.
- Haplo, on 10/12/2007, -1/+10At a first glance, yes. While you learn more and more about it you notice that it's not that easy as often is the case when something starts with a simple language/idea and has to be extended and fixed in every next iteration.
- bjohnsonwsu, on 10/12/2007, -0/+9When declaring multiple properties on borders / margins / paddings / anything with four sides, you can use short hand:
margin: auto (puts the margin auto on all four sides)
margin: 0 auto (puts margin 0 on top and bottom, auto on left and right) - ropers, on 10/12/2007, -2/+11Your wish is my command.
**diggs babyboy808's comment down** - Haplo, on 10/12/2007, -0/+8He talks about positioning /everything/ with absolute positioning, which indeed is something one should try to avoid when possible. The problem with short write ups like this is that in order to keep it short one has to simplify. Otherwise it turns into Cascading Style Sheets, 2nd edition, close to 500 pages...
Things could have written better though, but to nit pick on each sentence is silly. Beginners should probably avoid absolute positioning, hacks, etc. People who understand the ins and outs don't need his advice, they are smart enough to make the decisions themselves... - mbthompson, on 10/12/2007, -0/+8Ok fair enough, thanks for the explanation. :)
- Haplo, on 10/12/2007, -1/+8"DIV and SPAN and are containers"
No points. HTML is case insensitive, and XHTML /is/ case sensitive, and guess what case it is...
"Build your site according to international web standards"
No points. W3C publishes recommendations. CSS 2.1 and 3.0 are still in draft AFAIK.
"Only then open up IE with rubber gloves and create a hack CSS page so that the site accounts for the stupidity of IE."
No points. Avoid hacks when not needed, use conditional comments.
http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp - dontera, on 10/12/2007, -1/+8I loved the GasBag analogy. Very accurate and a good way to explain the forces at work in page rendering.
- BobMysterioso, on 10/12/2007, -9/+16Maybe its just me, but I don't take CSS tips from a default wordpress install.
Its just feels wrong. - Alisic, on 10/12/2007, -0/+7Ten.
- yongfookathome, on 10/12/2007, -1/+7It is invalid. I actually wrote a comment on his blog about this but then found that all comments there are being moderated.
The p tag only allows inline elements inside it. Heading tags are block elements. Not only that but as another poster said, semantically it doesn't even make sense as headers and paragraphs are in a hierarchical-sense separate entities anyway.
I hate seeing these articles on digg by so-called experts that fail to keep even the most basic stuff (html validity) in check. Although I guess that's what keeps me in a job... - MannyHills, on 10/12/2007, -1/+7@miles01110
You misunderstood what he meant. He was saying that it is possible to get your site to display properly in multiple browsers without hacks. - Drgn547, on 10/12/2007, -1/+7for those who like to "know more" about anything (if you don't already)-
html>body is commonly called a "hack", but it is actually valid CSS. Its purpose is to show the proceeding CSS attributes only in non-IE6 (and below) browsers. IE7 can read it, so you have to use either a separate style sheet (in certain circumstances) with a conditional statement for IE7, or if you wanted to use a hack, you could use: *:first-child+html { } to ONLY display a certain attribute in IE7.
I just thought it was ironic that "hacks" were bashed hard in the article, yet something so commonly known as a "hack" is used in his own CSS file. - 2Deluxe, on 10/12/2007, -0/+6kokopelli2001, you've violated rule 11.
- aceat64, on 10/12/2007, -4/+10Ya, that bugged the heck out of me. Overall the list was pretty good though.
- jxc1, on 10/12/2007, -0/+5Not so much "things" as much as guidance. Plus there's only 7.
1. Read the spec online at http://w3.org. It is confusing as hell but after reading it you will be able to tell which books in the bookstore are blatant copies with no added value.
2. Create a reusable format that makes sense to you. This worked for me:
/*-------------------------------------------------- NAME */
div#name {
/*MARGINS . . . . . . . . . . . . . . . . . . . . */
/* . . . DIMENSIONS . . . . . . . . . . . . . . . */
/* . . . . . . . . . IMAGE . . . . . . . . . . . .*/
/* . . . . . . . . . BORDERS . . . . . . . . . . .*/
/* . . . . . . . . . . . . .PADDING . . . . . . .*/
/* . . . . . . . . . . . . . . . . .FONTS/TEXT . .*/
/* COLORS . . . . . . . . . . . . . . . . . . . .*/
}
/*The section title positions are reminders about precedence:*/
3. Realize that most GUI web authoring software isn't so CSS savy.
4. Try to make something simple happen using only a text editor
5. Visit the Zen Garden and become inspired to become fully compliant. All CSS all the time.
6. Get increasingly frustrated with cross browser and/or other undocumented issues. Try all the hacks for fun.
7. After much fretting and wasted time, suddenly realize that you really don't have to be fully compliant. Enjoy the feeling of having all that weight lifted off your shoulders. Live again! - mbthompson, on 10/12/2007, -2/+7Since when is CSS cryptic and cranky? It's always seemed rather straightforward to me.
- Fordi, on 10/12/2007, -0/+5Remitted. I was going to say how child selectors aren't a hack, but I noticed it's html>body, which is a hack to do something in w3c compliant browsers, but not IE. This one, I believe, is to correct the ul positioning bug in IE/FF.
Though, this CAN be done without the hack, you just have to be very strict. - RonAcierno, on 02/07/2008, -2/+6Who else thinks the programming topic should have sub categories with all of the popular programming languages!
Personally I enjoy learning about P.Languages I don't know (I'm going to college for CS next year) but it seems like alot of people are getting upset about hearing about CSS.
I think it would be nice if people that only want to hear about lets say Python, C,C++ can choose to only see those ones.
Maybe its a lame idea, but I think it would be nice... - tybris, on 10/12/2007, -1/+51. Don't read about CSS. Practice!
- dasluvaluva, on 10/12/2007, -3/+6Semantically (is that the right word?), it doesn't make sense. a tag is for a paragraph of text while a tag is for a heading, which should be separate from the paragraph.
- inactive, on 10/12/2007, -0/+3@miles01110: No, you must have misread (that is, if your quote of the article was correct - I haven't bothered reading it). It said that you don't have to use CSS hacks in order to have a web page work in multiple browsers.
- Fordi, on 10/12/2007, -2/+5Semantic reasoning doesn't make code illegal. Just because it conforms to spec doesn't make it sensical. I COULD, theoretically, restyle ol a and ul a into list elements, just to save 2-9 bytes of code for every list element. Doesn't mean it makes semantic sense.
- fforw, on 10/12/2007, -0/+3@Fordi:
You don't really need hacks for this.. IE conditional comments are enough to solve this issues and they're not really hacks. They're standard conform comments which IE (always the browser to do stuff the wrong way) interprets.. - aceallways, on 10/12/2007, -2/+5Using "think" twice makes that last part read very strangely, it sounds like:
I think that's going a little bit overboard.
Don't you think? - UrsusMorologus, on 10/12/2007, -1/+3Nice list. Wish I'd had this a few years back.
- RustIndy, on 10/12/2007, -1/+3@brothereye:
I think the proper term is "Hear, hear".... makes more sense, doncha think? - everlaster, on 10/12/2007, -0/+2How many *10* things do I have to know about CSS ?!!
- mikeruiz7, on 10/12/2007, -1/+3#10 - The AK is better than the M4, but only in the right hands.
- strangerzero, on 10/12/2007, -0/+2It's easier and faster to use vanilla HTML in most cases.
- inactive, on 10/12/2007, -1/+2Its a good thing no one uses IE6
- theNthDoctor, on 10/12/2007, -0/+1Definitely "dramments."
- BrotherEye, on 10/12/2007, -4/+5Here, Here.
- karasin, on 10/12/2007, -3/+4Will I think this is a great tutorial. As a back end web developer this is about all I need to know about CSS most days...
I tike this one to...
margin:auto auto auto auto;
this makes stuff center - Drakazz, on 10/12/2007, -2/+3Hard cover books own :-)
Well, I don't have one, and using some random sites won't help either.
Just go to w3.org and it will give everything you need to know about CSS. - tybris, on 10/12/2007, -1/+2because if you know CSS well enough, you don't need them.
- aaroncampbell, on 10/12/2007, -2/+3He does go a little extreme there "don’t do this"...Absolute positioning DOES have it place. Especially since you don't have to place an absolutely positioned element in reference to the page. If there is an ancestor element with position:relative, then the absolutely positioned element is positioned in reference to that.
- erdnaze, on 10/12/2007, -0/+1i'm coining a new word: comment drama. (commdrama? dramments?)
-
Show 51 - 91 of 91 discussions
© Digg Inc. 2009
— Content created and posted by Digg users is