
WTF, HTML and CSS? - nreece
http://wtfhtmlcss.com/
======
userbinator
> 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/10164...](http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx)

(...and IMHO 4K selectors is a _lot_ more than any sane page should use...)

~~~
ntkachov
>The root of the limitations is that Internet Explorer uses a 32bit integer to
identify, sort, and apply the cascading rules. The integer’s 32bits are split
into five fields: four sheetIDs of 5 bits each, and one 12bit ruleID

Is there a reason for this? Why not just use 3 shorts?

~~~
Tloewald
Presumably this also leads to an upper limit on the number of stylesheets.

~~~
ArtDev
Its 32.

------
bhauer
> _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?

~~~
mdo
Apologies 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.

~~~
bhauer
Aha! Your clarification makes a lot of sense. Thanks!

------
pgl
Awesome 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
> 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)

------
restlessmedia
Good 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
Agreed. 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.

~~~
watwut
What 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
There'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.

------
ArtDev
This pairs well with his HTML and CSS Code Guide: [http://mdo.github.io/code-
guide/](http://mdo.github.io/code-guide/)

~~~
Flimm
That's more of a style guide rather than a list of gotchas.

------
outside1234
Thank 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
I 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
If you like this, you might like my Code Guide: [http://mdo.github.io/code-
guide](http://mdo.github.io/code-guide).

------
gioele
About 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.

------
igvadaimon
Let's not forget absolute positioned elements inside table cell in Firefox:

[http://wisercoder.com/firefox-displaytable-cell-and-
absolute...](http://wisercoder.com/firefox-displaytable-cell-and-absolute-
positioning/)

~~~
myfonj
Good 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
June, actually. The fix landed for Firefox 30.

------
ElongatedTowel
Border-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.

------
tricolon
I'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-...](http://philipwalton.com/articles/what-no-one-told-you-about-z-
index/)

[https://developer.mozilla.org/en-
US/docs/Web/Guide/CSS/Under...](https://developer.mozilla.org/en-
US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context)

------
chubot
Does "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
HTML 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
Its 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
He links to the guy who came up with that particular clearfix technique, and
there is documentation on why and when that space is necessary.

------
radicaledward
> _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
If 4.4% IE6 usage rate in China is accurate, that doesn't seem worth the
effort.

~~~
bdavisx
Acording 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
Well, 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?)

------
ivan_gammel
Interesting 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-...](http://stackoverflow.com/questions/14874341/how-to-clearfix-
without-markup)

~~~
rmrfrmrf
IMO 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.

------
xtc
Hopefully this will work as a means to beating my W3Schools education to death
once and for all.

------
pjmlp
The portability of the web. Write once, debug in every single browser version.

------
kaliblack
Great 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.

------
hopfog
This 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.

------
smickie
Would love to have the list of all the conditions under which a vertical
margin will collapse.

~~~
leephillips
[http://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.

------
notatoad
a 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

------
caniscrator
Thanks. Some are exactly what I found annoying most of the time.

------
vegustui
CSS sucks

------
icantthinkofone
It 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
The author, @mdo, also wrote Bootstrap.

~~~
SomeoneWeird
Funny how the comment author hasn't replied yet eh?

~~~
mdo
Didn't really see the need to honestly :).

------
jbeja
Is so hard not to use the "F" word for some people?

~~~
rail2rail
You only dislike that word because someone told you to dislike it. Get over
it.

~~~
stan_rogers
I 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
the key is to not give a shit about those people

~~~
stan_rogers
No, 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.

