So to summarize, since around 2012 a couple of really important things have happened on the Internet.
Second, these new standards HTML5 and CSS3 have been more or less fully and correctly implemented by the major browser vendors: Mozilla, Apple, Microsoft, Google, Opera. In the past, some features were implemented by most browsers, but almost no feature was implemented by every browser, and if it was, it was not implemented in the same way. (The CSS mother ship refers to this as ‘browser compatibility’) This meant that websites for the general public were necessarily full of ‘hacks’ — workarounds to get the thing to behave the way intended. Now, with these new standards, and their almost universal adoption, fewer hacks are required to make real-world web sites, even when visitors to a site are not using the most up-to-date browser.
Estelle Weyl summarizes the way these new standards have impacted real-world web development in her lecture on HTML5 Web Forms . She repeatedly states how and where hacks that were required to achieve a certain features in the past are no longer required, because the features are now apart of the standard.
The latest standard for CSS is completely off the hook. Never mind reading the official standard; look at what people are doing with it.
I suppose if I had to explain to someone off the top of my head what is so great — or even useful — about CSS3, I would say rounded corners on boxes. ‘Rounded corners on boxes? Big deal.’ Well, it was a big deal. Under HTML4/CSS2.1, boxes with rounded corners usually involved a 9 cell table, with very thin top, bottom and sides, very tiny corners, and JPEG or PNG images to fill those 8 outer table cells with the appearance of a rectangle with rounded corners. Now, it only takes one line in your stylesheet. (Technically, two, because Mozilla browsers need a unique syntax, but let’s not sweat the small stuff.)
Here is a list of about 41 shapes drawn entirely in CSS. Think of it as a new-fangled way to lay a foundation that allows you to build buildings ten miles high.
You will see examples of how to draw the infinity symbol, a magnifying glass, a pac man, all my manipulating a DIV border with CSS. As well, an important feature of HTML5 demonstrated on this page is that the ‘example’ CSS code is editable, and the shape draw updates immediately (you cannot add new attributes, but you can change the values of the existing attributes). The example code displayed to the page visitor is the same code that the page uses to render itself. How nifty does it get?
Along these lines is also the example page from Chris Pattle, where some of the major Simpsons characters are drawn entirely with CSS. (My daughter Zoe says, ‘this guy must have a lot of free time.’ To which I responded, ‘Yes, well…’)
“…and the battle to save the Internet…”
Sara Soueidan is a wizard in the MIT sense of the word. Are your icons not programmatically drawn and animated. Well let’s hope this heralds the end of your incessant mansplaining. Sit back and watch these icons rock.
I had been waiting for programmable CSS for years. It snuck up on me and was wearing a disguise, called SASS. Everything you need to get started with SASS is right here, including how to modularize your CSS for reusability.
(LESS is the other major CSS pre-processor that I have run across.)
Sass requires Ruby, but there are many applications available which encapsulate Ruby for you. Now at the end of the day Sass is compiled to properly formatted CSS3, which means that it is a nice-to-have rather than a requirement. Still, this emphasizes the fact that the standard is good; new tools help you get to the goal defined by the standard faster; they do not lead you to a different goal.