7 ms·
CSS Vocabulary
- voltagex_ 13y agoThis is a neat and simple idea. I wonder how difficult it would be to add other languages.
- harlanji 13y agoI 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 http://www.w3.org/TR/CSS21/grammar.html, and JS's being like this: http://www-archive.mozilla.org/js/language/grammar14.html http://www-archive.mozilla.org/js/language/grammar14.html. You might want to have a black/white list of foundational grammar rules to ignore.
- conectorx 13y agowell css is death so, no, thank you.
- hhsnopek 13y agohow 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.
- conectorx 13y agojust because you use it, or because you like it does not mean is the right approach for styling websites. The future is canvas.
- kingnight 13y agoHow 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?
- jarek-foksa 13y agoCanvas 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.
- conectorx 13y agothank you... I don know why i'm being voted down.I thought I was talking to experience software engineers, but i see i'm talking only to wannabes, but here are some examples where canvas is taking over css. https://famo.us/ https://famo.us/ - framework www.zebkit.com - framework and some more libraries out there, but that's for you to find out.. Just my 2 cents. Don't hate, educate :)
- dredmorbius 13y agoAssuming 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.
- hhsnopek 13y agohow 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.
- hhsnopek 13y agohow 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.
- hhsnopek 13y agohow 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.
- zatkin 13y agoThis 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.
- Swizec 13y agoWhat 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.
- zatkin 13y agoSorry, I edited my post to clarify.
- reubenmorais 13y ago>You'll only really grasp a true understanding of CSS like this if you sift through a lot of (dull) specification. You'll likely only need this "true understanding" if you're editing said specification. Or implementing it.
- dredmorbius 13y agoNot really. 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).
- sakamies 13y ago
- hackaflocka 13y agoGreat resource. Anyone know of something like this for Javascript or PHP?
- rmmw 13y agoThis is great! To anyone else delving into CSS, I also found this tutorial on CSS selectors helpful: http://flukeout.github.io/ http://flukeout.github.io/
- SquareWheel 13y agoVery neat and intuitive way to learn. I wasn't aware of the difference between "pseudo classes" and "pseudo elements" before.
- bbx 13y agoVery 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).
- nnq 13y agoWhy do they use `::before` instead of `:before`? Is that a typo?
- agr8man 13y agoThe double-colon notation is introduced in order to establish a discrimination between pseudo-classes and pseudo-elements. Doesn't work with IE.
- windsurfer 13y ago> Doesn't work with IE That's not true. IE has supported it since IE9 at least. http://msdn.microsoft.com/en-us/library/ie/cc304078%28v=vs.85%29.aspx http://msdn.microsoft.com/en-us/library/ie/cc304078%28v=vs.8...
- bzbarsky 13y agoPseudo-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.
- bowlofpetunias 13y agoFor someone with only superficial knowledge of CSS but who regularly has to communicate with front-end devs, this is very very helpful. A shared vocabulary is so important in any collaboration.
- pamelafox 13y agoAwesome! Just tweeted this out for our GirlDevelopIt students, this is a great review resource. 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/ http://www.teaching-materials.org/htmlcss-1day/ (Scroll down) * CSS3: https://dl.dropboxusercontent.com/u/10998095/css3-workshop/index.html#slide3 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. :-)
- indubitably 13y agoThis is awesome.
- JazCE 13y agoThis 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.
- runarberg 13y agoReally nice. Why did you skip the media query though? @media only screen and (min-width: 35em) { /* responsive styles */ } @media print { /* printed styles */ }
- SimeVidas 13y agoPage footer: Made by @sakamies Improvements welcome at https://github.com/sakamies/css-vocabulary https://github.com/sakamies/css-vocabulary
- runarberg 13y agoThanks 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?).
- SimeVidas 13y agoI didn't down-vote.
- reshambabble 13y agoThis 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.
- deleted 13y ago[deleted]
- ArtDev 13y agoI always referred to a declaration block as "rules". A single declaration is a "rule". I am not sure where I picked it up, but it is simpler.
- deleted 13y ago[deleted]