I had seen this tech talk on CSS Grid just thirty-six days prior and thus some of the Amy Kapernick talk had some overlap. I will focus on what was new for me in what follows. The old way of doing things, floats, is bad because floats play poorly with media queries and you have to have extra divs with clear: both; in the mix. In the Flexbox paradigm, the trick wherein display: flex; sits at the outermost wrapping actor, we could finally center stuff vertically. Alright, repeat(3, 200px) as an assignment is going to define three columns or three rows tersely in lieu of typing 200px out three times. It is a convenience thing. The fractional units help get us away from using calc which is ghetto. grid-column: span 5; is going to span five columns and what is more grid-column: 1/-1; may be used to make a header that cuts across the entire layout. Does the grid take the place of Flexbox? No. The two are complementary and you should use the right one at the right time. Flexbox's role is now more niche, for elements that need to wrap. Internet Explorer 11 started with version one of the specification and thus it is a bit out of date while Internet Explorer 10 does not support CSS Grid at all. 90.98% of browser usage in the United States supports CSS Grid and Flexbox has 97.39% support. @supports(display: grid) { followed eventually by a closing curly brace can wrap other CSS like a media query and only run if indeed CSS Grid is supported. There is a gotcha however. This will not work with IE. CSS Grid 2.0 is coming, changing the names of some properties. This should make Internet Explorer 11 yet harder to accommodate. Amy's talk was fun. She compared using CSS Grid and Flexbox together to Batgirl and Black Canary working together as a team and, at the end, threw Australian chocolates into the audience (poorly) towards anyone brave enough to ask a question. This was the only CSS and layout talk I saw at the Norwegian Developers Conference and it, like the rest of the very impressive event, was dandy.
No comments:
Post a Comment