use these “new”, “futuristic” features of the CSS language now, today, in production projects, and we should future proof our work instead of waiting for features to be supported in every browser our projects require and missing out on the latest fun new features.
and see how we got here. • CSS first proposed by Håkon Wium Lie in October 1994 • CSS level 1 published December 1996 • CSS level 2 specification was developed by the W3C and published as a recommendation in May 1998 • CSS 2.1 went to Proposed Recommendation on 12 April 2011 • The earliest CSS 3 drafts were published in June 1999 • As of June 2012, there are over fifty CSS modules published from the CSS Working Group - these modules are considered CSS4, but in reality there’s no CSS4.
-moz-orient -moz-padding-end -moz-padding-start -moz-stack-sizing -moz-window-shadow /* wtf??? */ Though this may seem a bit mad, browser vendors are now working more closely together to implement as per HTML/CSS specifications.
Disadvantages Learning curve Messy code Output CSS - We may use them too much and rely on certain features. - However the CSSWG take note of what we use preprocessors for, and have started implementing useful things like variables (custom properties) and mixins (using the @apply rule) - There is also specifications being written and implemented by post-processors around nesting syntax
rgba(255, 255, 0, .35); --f-f-sans-serif: source-sans-pro, sans-serif; --f-f-serif: magneta, serif; --f-s-base: 1.25rem; --f-w-bold: 700; --u-margin: 20px; --u-padding--large: 40px; } Daniel Furze | @furzeface Custom properties Syntax - Because most of the time I used globally scoped variables, I scope them with naming conventions e.g. BEM - You can use variables as variables, variableception!
{ color: red; font-weight: bold; text-transform: uppercase; }; } .alert--info { --alert-title: { color: lightblue; font-weight: bold; }; } CSS native support Mixins (@apply) Demo - Can inherit base styles from the ‘mixin’ - Can be overridden on a case by case basis - Overriding wipes current styles, doesn’t add to them
Chrome and Firefox versions support this. To get best support, go to the bleeding edge: - Chromium - Chrome Canary - Firefox Nightly - Safari Technology Preview
that we can and should use progressive CSS techniques like these, today. There’s no reason why not, we’ll be ready for when these features land and can rip out the fallbacks. And it’s fun!