Learning CSS (3) - WIP πŸ‘©β€πŸ’»

Disclaimer: not everything is related to the 3rd edition of CSS CSS3 logo

Positioning

Flex

TODO

Grid

TODO

Effects

CSS transforms can include Transitions (in CSS and SVG) and CSS Animations. From w3

Therefore it includes all applied CSS3 Transitions, CSS3 Animations or SVG Animations

When to use what? Use CSS transitions when there is only a start and end state. Use CSS animations if you need fine-grained control. Again from w3:

Animations are similar to transitions in that they change the presentational value of CSS properties over time. The principal difference is that while transitions trigger implicitly when property values change, animations are explicitly executed when the animation properties are applied. Because of this, animations require explicit values for the properties being animated.

Question: What about SVG animation.

Example of a CSS transition

TODO

Example of a CSS animation

  • Slider for 2 cards. Inspired by css-tricks (specifically the idea of "invisible" container) and (a looot) simpler than the follow up I wanted to play with CSS animations (though a transition would be better suited here). The contributions are:
  • CSS only effect (no jquery, no magic numbers)
  • It snaps into place. But it works only with 2 cards as is (that's good for me now). Given some effort I think it could be done for more.

Z-index

Z-index always confused me and it turns out I am not the only one.

The bible:

From back to forth

  1. The stacking context’s root element
  2. Positioned elements (and their children) with negative z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
  3. Non-positioned elements (ordered by appearance in the HTML)
  4. Positioned elements (and their children) with a z-index value of auto (ordered by appearance in the HTML)
  5. Positioned elements (and their children) with positive z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)

Note: non-positioned are items without a position property or set to static

I like this because it considers a) opacity and b) also the order of appearance unlike this very simple and this from MDN. I would like some more details about new CSS3 properties like transitions etc.

In MDN, stacking without z-index (1.) and the stacking context (4.) from here are good:

Importantly, the z-index values of its child stacking contexts only have meaning in this parent. Stacking contexts are treated atomically as a single unit in the parent stacking context.

Question: Does auto == z-index set to 0?

SVG

TODO https://www.opera.com/docs/specs/presto25/svg/cssproperties/

http://blog.teamtreehouse.com/using-data-uris-speed-website https://css-tricks.com/lodge/svg/08-using-svg-iframeobjectembed/ http://tutorials.jenkov.com/svg/index.html http://svgtutorial.com/important-svg-elements/

Canvas?

TODO?

Box model

The box-sizing CSS3 property dictates how the element width is calculated see image from spec, with the default value being content-box. Many (experts including Paul Irish or reset libraries like normalize.css) suggest using box-model (IE's old implementation) and I πŸ‘πŸ».

http://phrogz.net/CSS/vertical-align/index.html

Responsive

https://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem–cms-23984 https://medium.com/@elad/responsive-design-best-practices-for-big-projects-5a72e3ecdcd2 http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32 https://css-tricks.com/approaches-media-queries-sass/ https://www.creativebloq.com/how-to/how-to-structure-media-queries-in-sass https://davidwalsh.name/write-media-queries-sass https://medium.com/front-end-developers/the-solution-to-media-queries-in-sass-5493ebe16844 https://medium.com/codeartisan/breakpoints-and-media-queries-in-scss-46e8f551e2f2 https://gist.github.com/anthonyshort/2028061

Performance

MDN