11 ms·
WTF, HTML and CSS?
- restlessmedia 13y agoGood insights into voodoo problems. Slightly unsure about the sweary angle though, I love a swear up as much as the next man, but in this it feels unnecessary.
- wubbfindel 13y agoAgreed. It's a shame that swearing has to spoil a potentially good resource. I won't be able to share this will my little brother, who could benefit from this while learning to code, purely because of the amount of swearing.
- bloke_zero 13y agoMaybe, but it's hard not to forgive swearing in any piece mentioning ie6.
- caio1982 13y agoYou guys are being too harsh on it. Or apparently I failed to see how one "wtf" in the title and one "fucked" in the header could spoil such good resource. I'm sure there are many ways to go around these two if you want to point it to your little brother.
- watwut 13y agoWhat amount of swearing? There is exactly one "wtf", exactly one "fuck" and the rest is polite. If you do not want to show it to brother, more power to you and you got my respect for thinking about what language he picks up. Really. However, the resource has exactly two impolite words in it, so it is hardly huge amount.
- robobro 13y agoThere's 2 "shit"s too. Maybe the author feels obliged to curse a little bit, and mostly in jest / for its own sake because the domain name includes a simulacrum of obscenity (WTF) in it.
- wubbfindel 13y agoFair comment, it's not a "huge" amount of swearing. But I didn't say that it was. It's just too strong for me to feel comfortable sharing it with younger ones. I guess a more accurate way to describe the issue for me would be to say it's because of the "strength" of the swearing rather than the quantity. However, I will be sharing this with co-workers! It's a good document for reference.
- deleted 13y ago[deleted]
- icantthinkofone 13y agoSwearing for the sake of swearing is never appropriate. I agree with you.
- rmrfrmrf 13y agoWait, wait! Just fork the repo and send your brother an edited version!
- Aldo_MX 13y agoDitching a resource just because a bit of swearing? You all can't be serious...
- lumpypua 13y agoAre you kidding?!? Do you know how much swearing solving voodoo html/css problems has caused? This is but a ghost of the blight of cuss they've brought on the world.
- CmonDev 13y agoInstead of fixes to fundamentals we get HTML5 feature creep. I think there should be way, way more swearing. An email should be sent to each member of WWWC each time this website is opened by someone.
- tericho 13y agoSubmit a PR, Mark seems like a reasonable guy I'm sure he'll oblige. https://github.com/mdo/wtf-html-css/pulls https://github.com/mdo/wtf-html-css/pulls
- markdown 13y agoReasonable? Isn't this the guy whose ego is so great he crapped all over Douglas Crockford when that man so generously spent time trying to help improve Twitter Bootstrap? The very same Douglas Crockford who has contributed so much to building the JS/frontend community to what it is today.
- jessaustin 13y agoMaybe there should be an Accept-Vulgarity http header, which some HN readers would keep set to "scatology;q=1.0, obscenity;q=0.9, banality;q=0.1"?
- ivan_gammel 13y agoInteresting reading. However, I don't like non-semantic CSS class names - parent, float and clearfix. There are better names like used here: http://stackoverflow.com/questions/14874341/how-to-clearfix-without-markup http://stackoverflow.com/questions/14874341/how-to-clearfix-...
- rmrfrmrf 13y agoIMO that just leads to less reusable CSS and more stylesheet spaghetti. I see a class "clearfix" in HTML and I know what it's doing; I see ".clearfix {" and I know what it's doing; but I look at "article:after, .article:after, .group:after, col-2:after, {" and have to figure out what's going on. In terms of code, I think you should be semantic from a developer's perspective.
- mdo 13y agoTo be clear, those are just example class names so you know exactly what element I'm referring to and where it resides in the markup.
- kaliblack 13y agoGreat tips, but it seems like a fairly random selection with basics about positioning and good gotcha tips like <tr> styling. I feel like there could be a whole page dedicated to floats.
- caniscrator 13y agoThanks. Some are exactly what I found annoying most of the time.
- hopfog 13y agoThis is great. Even if you're familiar with most of the items it's nice to have such clear and concise problem descriptions and solutions.
- igvadaimon 13y agoLet's not forget absolute positioned elements inside table cell in Firefox: http://wisercoder.com/firefox-displaytable-cell-and-absolute-positioning/ http://wisercoder.com/firefox-displaytable-cell-and-absolute...
- myfonj 13y agoGood point. Headsup: this issue should be gone from the Trunk build of Firefox after July 2014; relevant bug [0] is resolved and fix shipped to Nightlies already. [0] https://bugzilla.mozilla.org/show_bug.cgi?id=63895 https://bugzilla.mozilla.org/show_bug.cgi?id=63895
- bzbarsky 13y agoJune, actually. The fix landed for Firefox 30.
- userbinator 13y ago> Internet Explorer 9 and below have a max of 4,096 selectors per stylesheet. The reason for that is a rather cute implementation explained here: http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164... (...and IMHO 4K selectors is a lot more than any sane page should use...)
- kijin 13y ago> (...and IMHO 4K selectors is a lot more than any sane page should use...) I don't think this is a problem with hand-coded CSS files. But since the trend nowadays is to generate CSS from a bunch of LESS or SASS files, minify the whole thing, and stuff it into a single HTTP request, it's not impossible for large and complicated apps to end up with over 4K selectors. When you're living in SASS fairyland you don't always remember that your beautifully nested rules and mixins will compile into dozens of CSS selectors.
- thejosh 13y agoRan into this problem when doing some crazy silly CSS, ended up using bless[1] to fix this issue. [1] http://blesscss.com/ http://blesscss.com/
- STRML 13y agoI've run into this before with a large app: bootstrap + font awesome + plugins + custom css in a single blob put me well over 4096 selectors. Fortunately, bless (via grunt-bless) and a simple IE conditional comment fixed it for good. Bless is a great project.
- Already__Taken 13y agoIsn't @Import a bad idea? At least if you write multiple <link>s for css they can download in parallel. @Import will always have to wait for the first sheet to download AND Execute. Which isn't so bad with CSS but still.
- 13y ago
- jbeja 13y agoIs so hard not to use the "F" word for some people?
- akerl_ 13y agoYou make the assumption that "people" are trying to censor themselves and failing. Not sure how you came to that conclusion, but I doubt the name of this page just "slipped out": I'm betting it was intentional.
- rail2rail 13y agoYou only dislike that word because someone told you to dislike it. Get over it.
- stan_rogers 13y agoI don't know about the grandparent, but I dislike the word in many contexts because it makes other people extremely uncomfortable. It was probably more frequent than "the" or "a" in my casual speech while I was in the military, but I'm not in the military at the moment, and other people matter.
- pyrocat 13y agothe key is to not give a shit about those people
- stan_rogers 13y agoNo, the key is not to offend people who don't particularly need to be offended. You aren't talking about "freedom", you're talking about being abrasive for no good reason. There are rude words that you may freely use to describe that sort of person, should you wish.
- codingdave 13y agoNo, I dislike it because it is not necessary to communicate effectively. It is a lazy way to punctuate your language, taking advantage of the fact that people dislike it to cheaply draw an emotional response.
- pgl 13y agoAwesome list! Thanks for providing it. It would be nice to add a bit more of an explanation for some of these things. eg: - There's a bold warning about float elements with display: block set - "Do not set both". Why is this so important? - "Skipping the doctype can cause issues with malformed tables, inputs, and more" - some examples of what could go wrong would be really handy here. Or a link to a more in-depth explanation? In general some more links would be great.
- aestra 13y ago> some examples of what could go wrong would be really handy here. One small example that I've seen go wrong, elements don't center with CSS if you skip the doctype. Seems to ignore margin-left and margin-right. Omitting the doctype basically sends the browser into "quirks mode" and then the page is rendered with old browser rendering bugs. http://en.wikipedia.org/wiki/Quirks_mode http://en.wikipedia.org/wiki/Quirks_mode
- paulirish 13y agoA partial list of the random bugs you'll find in Quirks Mode: http://quirks.spec.whatwg.org/ http://quirks.spec.whatwg.org/ It's a bad scene. Avoid it at all costs.
- gioele 13y agoAbout the problem with `rem` in media queries, see http://stackoverflow.com/q/12201003/449288 http://stackoverflow.com/q/12201003/449288 . It contains a description of the problem and links to the relevant bugs.
- icantthinkofone 13y agoIt would behoove the author of this list to learn HTML and CSS so such things are not so shocking and mysterious to him. I should start a blog about the horrors or C where mysteries are explained such as "You must declare variables before you use them!!" followed by appropriate horror music.
- ghiculescu 13y agoThe author, @mdo, also wrote Bootstrap.
- deneca 13y agogotem.
- SomeoneWeird 13y agoFunny how the comment author hasn't replied yet eh?
- mdo 13y agoDidn't really see the need to honestly :).
- SomeoneWeird 13y agoFunny how the comment author hasn't replied yet eh?
- bhauer 13y ago> Table rows, trs, cannot be styled unless you set border-collapse: separate; on the parent table. I don't recall any trouble applying styles to tr elements without having to do anything special to the parent table. Setting the border-collapse to "collapse" explicitly just to test: http://jsfiddle.net/x3Pkd/ http://jsfiddle.net/x3Pkd/ What am I missing here?
- deleted 13y ago[deleted]
- Pwntastic 13y agoIt looks like Chrome's default user agent stylesheet defaults table border-collapse to separate. So you don't necessarily have to set it, but it's required and will potentially confound you if you use a css reset that changes this.
- bzbarsky 13y agoThe initial value of 'border-collapse' in the absence of any user/document/UA styles is "separate". See http://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse http://www.w3.org/TR/CSS21/tables.html#propdef-border-collap... If you have a "CSS reset" that resets it to a non-initial value, that seems like a bug in that "CSS reset", no?
- Pwntastic 13y agoAh. Well I hadn't checked the spec; I just meant that in my 5 minute testing it appeared that chrome set border-collapse to separate by default, which would explain why the parent commenter didn't ever have to set it to see table styles.
- mdo 13y agoApologies for this, I was trying to be brief and lost most of the meaning in that one last night. I've updated it to better communicate the potential problem folks can run into.
- smickie 13y agoWould love to have the list of all the conditions under which a vertical margin will collapse.
- leephillips 13y agohttp://www.w3.org/TR/CSS2/box.html#collapsing-margins http://www.w3.org/TR/CSS2/box.html#collapsing-margins I don't know if that's the whole story, but at least it's official.
- ElongatedTowel 13y agoBorder-box is great, but whenever I have to use 3rd party code all hell breaks lose. You can mix both, but only applying border-box to your own code is tricky and the mental overhead is quite annoying. Even then some minor glitches can occur which you might not even spot in most cases. For example nanoScroller.js exposes Firefox's scrollbars when zooming because there is no way to hide them via CSS and the code to hide them underneath other elements breaks when using border-box. Not even sure how to handle such problems.
- xtc 13y agoHopefully this will work as a means to beating my W3Schools education to death once and for all.
- outside1234 13y agoThank you mdo - wish more people wrote up best practices / gotchas like this in HTML / CSS like folks do for code. (Or perhaps they do and I'm just not running into them or they are buried underneath the W3Schools sewage?)
- jbranchaud 13y agoI haven't seen much in the way of HTML/CSS best practices articles either, it would be helpful if other commenters could post such articles that they have run into.
- mdo 13y agoIf you like this, you might like my Code Guide: http://mdo.github.io/code-guide http://mdo.github.io/code-guide.
- markdown 13y agoNone of it is new (some are over a decade old), but it's a nice resource for CSS/HTML noobs who learnt their craft in Google Chrome and never had to memorize the horrors at http://www.positioniseverything.net http://www.positioniseverything.net
- vegustui 13y agoCSS sucks
- chubot 13y agoDoes "tidy" catch these problems or is it out of date by now? Is there another lint tool that is recommended for HTML (and CSS)?
- duskwuff 13y agoHTML Tidy only catches structural issues with HTML (e.g, mismatched or missing start/end tags, invalid attributes, etc). It barely knows about CSS at all, and it certainly doesn't try to do any validation on it.
- ArtDev 13y agoIts an ok start. As a collaborative effort it could actually be useful. Clearfix doesn't need a space character. content: "" is sufficient. Edit - on the github page he encourages contributions. https://github.com/mdo/wtf-html-css/ https://github.com/mdo/wtf-html-css/
- ZeroGravitas 13y agoHe links to the guy who came up with that particular clearfix technique, and there is documentation on why and when that space is necessary.
- ArtDev 13y agoThis pairs well with his HTML and CSS Code Guide: http://mdo.github.io/code-guide/ http://mdo.github.io/code-guide/
- radicaledward 13y ago> Fun fact: Years ago, we had to set display: inline; for most floats to work properly in IE6 to avoid the double margin bug. However, those days have long passed. I wish those days were long passed. There are definitely still a lot of IE6 users. I recently worked on a project which services the Chinese market. http://www.modern.ie/ie6countdown http://www.modern.ie/ie6countdown
- marknutter 13y agoIf 4.4% IE6 usage rate in China is accurate, that doesn't seem worth the effort.
- bdavisx 13y agoAcording to Wikipedia: As of 2012, China had 568,192,066 internet users. 4.4% of that would be 25,000,450 users. Depending on what you're doing, leaving out 25M potential users might not be a good idea (again, depends on what you're doing).
- loup-vaillant 13y agoWell, it's not like a double margin would prevent them from seeing your text at all. They only lose out on pixel perfection. Leaving a few million users out of pixel perfection doesn't sound so bad. (And out of those millions, how many will actually stumble upon your web site anyway?)
- groby_b 13y agoI keep hearing this argument, and in most cases, it's invalid. For the average page, it's not 25M users but 4.4% of whatever the user base is. These 4.4% more might still matter, but the cost-benefit tradeoff looks much different now.
- darth_aardvark 13y agoIt's 4.4% usage rate worldwide. China is 22%.
- 13y ago
- pjmlp 13y agoThe portability of the web. Write once, debug in every single browser version.
- notatoad 13y agoa fun one that i ran into yesterday, that maybe is basic but i hadn't known before: z-index can only be applied to positioned elements. if you need to z-index something, it can't be position:static
- tricolon 13y agoI'm surprised this didn't mention stacking contexts, which threw me for a loop a couple times: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ http://philipwalton.com/articles/what-no-one-told-you-about-... https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Under...