First off, great article. As for the “CSS in a weekend” comment: learning the correct syntax for a language and knowing how to make it sing are two different things. You can learn the correct syntax for CSS, but that doesn’t mean you know it. I’ve been playing around with it for a decade and am STILL fascinated by the things people do with it. As a backend/DB dev by trade and someone who is fluent in over a dozen different development languages and APIs, I can say that creating with CSS is by far the most personally satisfying work I do, as well as the most challenging. It isn’t anything any code geek should be looking down their nose at.
4 Likes
Great article, thanks for this 
As for the comment about css being so easy to learn that it can be done over a weekend, it really depends what do you mean by ‘learning’. If you mean to be able to do something with it, sure, you can even create your first layout just after having studying css for a few hours.
Now, how about making it cross-browser compatible and responsives ?
How about smart layout that adapt to the content, and doesn’t break as soon as the content is not exactly ‘ideal’ for your layout ?
How about knowing exactly how to combine the different properties ?
Does width: 0 auto works to center horizontally a div without a fixed width ?
How does percentage actually work ? it’s a percentage of what ?
How does background-position work ? does background-position: 25% 25% means the left and top edges of the image will start at 25% of the left and top edge of the div ? No it doesn’t.
Knowing the details and how to combine css properties take time and is definetly not learned over a weekend.
Trick question; width:0 auto; is invalid (you meant margin 
) and also what’s the display type for the div .
It depends on your point of view.
It’s perfectly valid in CSS 2.1 when used on the elements available in the css2.1 specs: namely, :first-line, :first-letter, :before and :after. If you are supporting IE8 then you must use the single colon syntax for the above elements.
If you use css3 the new pseudo elements (that weren’t available in CSS2.1) then you should use the double colon syntax.
From the specs:
For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after).
Millions of pages were written using :after long before ::after came into being and they don’t all suddenly become invalid
Useless pedantry. By the time IE 8 was built everyone else had already moved to the :: syntax. So at this point it’s a way to reliably shut out Microsoft’s crappy browser. No one has ever used :after or :before to insure it will continue to work on any browser but IE 8.
I beg your pardon? I take exception to that.
I was merely pointing out that :after is perfectly valid css 2.1 and there is no reason to use ::after as long as you are supporting IE8 (which quite a lot of us still do). Telling people to use the double colon syntax on CSS 2.1 pseudo elements will cause those pages to break in IE8 which is why I chimed in as you are not the first to recommend this.
The html5 boilerplate and bootstrap3 all use the single colon syntax for :after and :before and I recommend that everyone continues to use this format for a couple of more years at least.
Nice catch, you are right I meant ‘margin’ and not ‘width’
About the display type, I was supposing a display: block;
Meh, the sooner IE 8 dies the better. And I’m not above putting in things I know will break in IE 8 these days when I’m allowed to.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.