CSS Paris #320 Oct 2015
Third edition of the ParisCSS meetup. I could not attend the first two sessions, so this is a first for me. It took place at Numa, and we were about 70.
In the first talk, Vincent De Oliveira told us about CSS masks. He started by telling us that we might all already use CSS masks without knowing it.
overflow:hidden are actually masking techniques, even if we do not think of them that way. He showed some nice and clever tricks with a few simple divs, rotation animation and
He then told us about clipping, or how to use images with some transparent pixels to define which part of an image should be displayed. He had an impressive demo of a text that could be visible trough a complex form (here it was the Eiffel tower), using only an image as background and a mask on top of the element.
The end of the talk was really impressive, but it was also really hard to understand how things were working without testing the code directly. He showed us how he animated icons or animated a cursive script but to be honest I did not really understood how this worked. I'll have to play with the slides.
The second talk was done by Jean-Pierre Vincent (alias @theystolemynick). I gave him a #millisecondsmatters Algolia shirt right before the talk, and he wore it while speaking. Algolia everywhere ;)
The slides are already available here.
The talk was dense, and a broad array of topics were discussed, but the overall rhythm was slow and it was sometimes hard to follow. The talk started with the conventionnal numbers for this kind of talk (on how speed is directly linked to revenue), but he also spoke about how it is now good for SEO and how the human brain reacts to instant.
He covered the subjects of repaints and reflows in CSS, but focused on CSS animations compared to jQuery animations. Done well, animations can really improve the user speed perception. Quickly moving items or fading images when changing pages can distract the user long enough so she cannot see that a page is currently loading.
For every animation that do not depend on user input (eg. moving an image from one fixed position to another), we can pre-compute the bounds and simply create two CSS classes (one for the start and one for the end), and use CSS animations to let the GPU handle the rendering.
For "unpredictable animations" (eg. based on the way the user moves her mouse or scroll the page), there is no silver bullet. The main advice is to throttle or debounce the call. There is no need to fire an animation on every
scroll event, but only on the first or last one.
As always, there is no perfect solution. One must be aware of all the pros and cons of every technique. For example, using the GPU (through CSS animations) allows for much faster rendering, but will also drain the battery more quickly on mobile devices. One can use the
translateZ(0) trick to force an animation to use the GPU, but this will prevent browsers from doing any optimisation natively.
The trickiest part is that some devices have better GPU than others. Sometimes, it is better to let the CPU handle the animation in specific browser/device targets. As it is near impossible to perfectly target each mobile/browser with the best implementation, you either have to go for the lowest common denominator, or only focus on a few specific devices. None of this solutions are optimal.
He gave a rapid overview of the various layout techniques in CSS. We started with
<table>-based layout, using the HTML markup to split our page. Then, we used
display: table, which are still hacks and not made to do layout. Then came
display: inline-block which have all the pros of
inline (stays on the same line) and
block (can have dimensions), but still has its own shortcomings (whitespace in markup and parent
font-size can impact the rendering).
In the end, doing layouts in CSS is not easy and requires a deep knowledge of all the quirks and limitations. Frameworks like Bootstrap exists so users do not see the complex code used to do a simple grid layout. Few people really know how things work internally.
Then came flexbox, which is a set of CSS properties here for layout purposes. With it, you no longer need Bootstrap for your grid needs.
Still, all this techniques requires you to have specific markup to separate your rows from your columns. If you want to do a specific layout on various RWD breakpoints, and move an element from one row to another you might have to add the element twice to the markup and show/hide them depending on the current viewport.
display: grid is the future of CSS and fixes all that. By adding this to a parent element and then adding
grid-column attributes to children elements, we can simply specify where each cell should go. It also comes with its own set of rules letting you define a custom grid template, default spacing, stacking cells, move cells on breakpoints, define their dimensions based on the available space and even do ASCII art to draw your grid.
This is brilliant and really really powerful while having a simple and straightforward syntax. Unfortunatly, this is only available in the latest Chrome under an experimental flag.
Anyway, this future CSS syntax will one day become our present CSS syntax, so we'd better start using it now to get familiar with it and push issues and feature requests.
The overall level of the talks is quite high for a young meetup like this one, and the large number of attendees shows that Paris needed a CSS meetup. I will speak at the next event and encourage you to submit your talk ideas or proposals.
Tags : #css
Want to add something ? Feel free to get in touch on Twitter : @pixelastic