...I find that teaching the CSS3 workshop is always a great reminder of the crazy ass selectors you can use in CSS now, and I end up using them way more in the weeks after. And then forgetting again. :-)
This is really neat. I've been using CSS for several years and have never stumbled upon something that uniquely educates in this manner. You'll only really grasp a true understanding of CSS like this if you sift through a lot of (dull) specification.
Also, this brings a lot of attention to the fact that CSS relies upon formal grammar and vocabulary (as the page is titled), which is something that you won't see often.
What do you mean exhibit their own idea of grammar? All programming languages are defined in terms of their formal grammar. A grammar and vocabulary is really all that they are.
I've spent a lot of time in the past year mucking with CSS, some my own, but most of it applying to other sites via browser extensions. I'd learned most of the specific spec entities described here (though learned a few terms I'd not picked out before), some of which have proven quite useful in getting the results I want. Which often translate to "make the goddamned page readable".
And yes, I restyled the referenced page to improve readability (text to white, larger fonts, different spacing and padding).
I think it could be possible for any context-free language, through outputting the parse tree with ranges wrapped with class="symbol-type". CSS's grammar being like this (for those not familiar with the idea): http://www.w3.org/TR/CSS21/grammar.html, and JS's being like this: http://www-archive.mozilla.org/js/language/grammar14.html. You might want to have a black/white list of foundational grammar rules to ignore.
Very neat and straight to the point. I'm writing a book about CSS, and this comes in very handy considering the vocabulary in CSS is usually misused and lacks precision, especially on Stack Overflow (including by me).
Thanks for telling me, In fact I did send a pull request on the matter. (Although I don't understand the down-vote for stating a constructive criticism, what if I didn't know the vocabulary for media queries and was genuinely hoping to learn it on this site?).
This is a really great visual way to learn CSS vocabulary. Love the simple and clear UX/UI. Have you thought about adding pop ups when you click on each term that explains the exact purpose of each? It could be an interesting way to expand this into a 5 minute self-taught tutorial.
This is really nice, I might fork it myself and add to it as I'd like to see some more explanation on certain parts, though it would then become something different.
Pseudo-elements use two colons. A small number ("before", "after", "first-line", "first-letter") are grandfathered in as allowing either one or two, for backwards compat back to the days when there was no distinction between pseudo-elements and pseudo-classes in CSS.
how is CSS dead? CSS is going to live on forever as the base of styling. Stylus, SASS, LESS will always compile to CSS, and their will be a "religious war" of which one to make as the base.
Assuming you're not simply trolling, would you care to clarify and expand your comments?
Are you referring to the HTML 5 canvas element? That's principally intended to provide native graphics capabilities for HTML, not to allow for semantic styling of textual content, as is the case (mostly) for CSS.
Otherwise, your comments here are not constructive nor do they follow the HN guidelines as I read them.
How would one create a document type page with a canvas? I'm generally curious and would love an example. I've use canvas before, but strictly for image manipulation and exploring animation.
My experience and limited knowledge of it don't lead me to believe it'll replace HTML/CSS documents anytime soon (which are really the starting point before blogs/apps).
What about resizing causing the whole canvas to be wiped away (thats a default behavior right?).
Edit: Also, how do you achieve separation of content and style?
Canvas is just a low level API for 2D graphics, on top of it you could build your own rendering engine with custom document object model, document serialization format, layout engine, styling engine, etc. This would be an enormous amount of work though, I don't believe that standard HTML/SVG/CSS/DOM are that broken that reimplementing them from scratch would become a viable option.
For those of you looking for alternative ways to learn CSS (or teach it), here are our materials:
* CSS Basics/Layout: http://www.teaching-materials.org/htmlcss-1day/ (Scroll down) * CSS3: https://dl.dropboxusercontent.com/u/10998095/css3-workshop/i...
...I find that teaching the CSS3 workshop is always a great reminder of the crazy ass selectors you can use in CSS now, and I end up using them way more in the weeks after. And then forgetting again. :-)