How far back do you need to be compatible?
I mean, if you can drop IE7 / 8, you should use css3 rounded corners. If you need to support IE8 / 7, then you should definitely use graceful degradation . Probably not worth the time and effort to strive for excellence everywhere. This is simply a goal that cannot be met when browsers are never updated again.
1) What could be the reason for this
This is a fairly broad question, I could not reproduce the problem or really find it in Chrome 20 (beta), so I just listed everything that could ruin it.
- Common browser rounding errors, browsers are not accurate, were not designed for exact subpixel
- Mixing px values with other values, different grindings make values that add up differently.
- Positioning items in the stream that are affected by other items in the stream on the page (they are usually difficult to track)
- Properties of the parent element (parents with overflow are hidden, fixed sizes, for example, I think this may be a problem here in jsfiddle)
- Browser Errors
- Combination of the above
In this case, jsfiddle has a crapload of containers and frames (with overflow set to hidden, fixed heights / widths, based on pixels), etc. on the page, even in full screen mode. Therefore, if you really want to make sure, make an html file on your own open / test computer with this.
2) In general, what makes layouts sensitive to change (if such a general rule exists ...)?
In modern browsers, this may not be all that is important, because the zoom function is often very advanced and can even scale layouts with a full number of pixels without any problems. The only real problem browser that is still in use is IE7. IE7's scaling ability is terrible, and for this reason you should only use% or em values for text.
The only "official" recommendations can be found in WCAG 2.0 , recommendations on accessibility / accessibility methodology w3:
Thus, browsers can scale, modern ones do not have problems here, but were not designed to be accurate, it is also an impossible task with mixed units (em,%, px).
3) Is Dan Cederholm's book really bulletproof ...?
Before I start here, I have not read a book ... I have never read a CSS book (many other resources) in my life, but my first and main skill is dreaming about it.
Let's start with "What is bulletproof?" Bulletproof in web design means it will work everywhere, and it won’t break anywhere. This one should give you the key.
He might have been very bulletproof very well when he wrote this book, but the website is dynamic, and even if I take the latest blogging blog for the announcement, it dates back to December last year. Since then, at least 3 new versions of Chrome (rough estimate) and even more versions of Firefox have been released. Microsoft was sitting on his ass, this time (we would have big problems if they decided to make speed schedules).
Everything has changed, since then new errors have appeared.
No matter what violates it, nothing is ever bulletproof, just very, very close to what you always want, with slight variations between browsers.
This does not mean that this is a terrible book that looks at his resume, he is definitely a guru in web design, so he is probably right about a lot in this area. I just hope that he will explain why everything is done in a certain way, because it makes you much wiser than just learning something.
A: "You always use EMs for text! EMs are annoying! Why do you do that anyway?!" B: "I dunno, read somewhere I should..." A: "Lets just use pixels! Pixels always work." B: "Hmmm ok."
You just lost support for IE7. (be it bad, another discussion)