I posted a video of this talk some months back, but it was nearly an hour and a half long. Here’s an updated version that I gave at JAMstack_conf that’s only 30 minutes:
The gist is that the front-end stack is wildly powerful these days. Our front-end skillset can be expanded to give us power to do back-end-ish things and talk with APIs that allow us to build entire products in a way we haven’t quite been able to before.
Exclusions (which are currently in a “working draft” spec as I write) are kinda like float in that they allow inline content to wrap around an element. But not exactly a float. Chen Hui Jing has an excellent explanation:
An exclusion element is a block-level element which is not a float, and generates an exclusion box. An exclusion element establishes a new block formatting context.
An element becomes an exclusion when its wrap-flow property is computed to something other than its initial value of auto. When an element becomes an exclusion, inline content will wrap around the exclusion areas, but within their own formatting contexts.
Support is limited to Edge and IE (again, as I write):
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Mobile / Tablet
Chen makes a great case for why they are useful, but another round of discussion has cropped up lately as well. Rob Weychert documents a simple layout situation in which an image is floated left and text is wrapping around it:
As those light red bars indicate, Rob has set up some display: grid; columns to align elements in the article to those axes. A classic “editorial layout” indeed. But there really is no good mechanism to place that image onto the grid and maintain the wrapping. By placing both the content and the image into separate grid items, you don’t get the wrapping. You can use float, but that’s not using the grid.