10: Mathematics & Dynamic CSS Visualizations

In the future, CSS visualizations will dramatically change. How they will change is debatable but they will enable developers to do a lot more than they may think. We may see custom properties like variables to further improve DRY (Don’t Repeat Yourself) code & on-the-fly cascading calculations, CSS Extensions to create our own custom selector properties, custom functions, & custom selector combinations.  Some of these rules are even starting to be implemented in browsers today like “will-change” to pre-optimize changes in DOM structures and CSS Shapes. These will further help us define display, flow, & wrapping of content and it’s containers. CSS is moving rapidly and this is just the tip of what is to come for web development in the coming years or even months in some cases.

It used to be to create powerful visualizations in a browser you needed to use Flash or some non-standard tool to get the performance & consistency you needed from complicated animations. Today we have help in bridging the gaps of today and tomorrow. CSS Preprocessors given us powerful features in our CSS code. Some of the more notable ones are loops, conditionals, variables, custom mixins/functions, and heavy grade math calculations. While these are extremely useful, they only help us, currently, before we even see CSS in the browser. Online tools like Codepen.io help us quickly build and view CSS, HTML, & JavaScript that can be easily shared and updated without the overhead of understanding setup, build processess, or dependency management.

Although extremely powerful, this means that the tools we have only have the ability to allow CSS to react to change in the DOM in a limited capacity. Looking at todays standard CSS, we now have ways of doing some dynamic calculations and conditions in the browser and device viewers. Directives like @supports and @media give us powerful conditionals. We have several types units of measurement, such as viewport units, frequency units, time units, & resolution units. Rules like ‘calc’ give us the ability to computationally react to mutations in the DOM tree. Keyframe Directives give us robust animation, the ‘transform’ rule yields great power to setup and animate DOM structures and also dynamically change rotation, skewing, scaling, and translation both 2D and 3D space, all without needing one line of JavaScript.

Resources

http://davidwalsh.name

http://codepen.io/thebabydino/live/08634ee35593c97bd8cfb2ddd9324c24

http://davidwalsh.name/css-supports

http://www.w3.org/TR/css3-values/

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms

http://css-tricks.com/five-questions-with-david-walsh/

http://codepen.io/collection/wHune/

http://codepen.io/thebabydino/pen/jgtof

http://codepen.io/thebabydino/

http://techblog.rga.com/math-driven-css/

http://davidwalsh.name/css-flip

http://css-tricks.com/a-couple-of-use-cases-for-calc/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

http://stackoverflow.com/users/1397351/ana

http://davidwalsh.name/svg-animation

http://stackoverflow.com/users/1397351/ana

http://stackoverflow.com/help/badges/17/necromancer?userid=1878132

http://sass-lang.com/

http://www.myth.io/

http://dev.w3.org/csswg/css-extensions/

http://sarasoueidan.com/

http://shoptalkshow.com/episodes/129-sara-soueidan/

http://5by5.tv/webahead/81

http://www.sitepoint.com/css-variables-can-preprocessors-cant/

http://codepen.io/shankarcabus/pen/jcyDA

http://daneden.github.io/animate.css/

http://codepen.io/thebabydino/tag/calc()/

http://figures.spec.whatwg.org/