Tuesday, August 18, 2020

CSS Grid Layout Module Level 2 Candidate Recommendation

 CSS Grid Layout Module Level 2 specification is now a Candidate Recommendation. The biggest change is the addition of subgrids to the spec, although at the current time subgrids are only supported by the Firefox browser. https://www.w3.org/TR/css-grid-2/#subgrids

Sunday, August 02, 2020

Lazy Loading for Images and Iframes

There is a new attribute in town. It's the loading attribute which can be applied to the img element and the iframe element. This can provide the perception of a quicker loading web page when you set the loading attribute to the value "lazy" on img and iframe elements that are not initially in the browser viewport. The resource is only requested when the web page visitor scrolls near the element. See https://web.dev/native-lazy-loading and https://web.dev/iframe-lazy-loading for more info.

Pausing a GIF with details & summary elements

Cool technique — create the effect of pausing an animated gif using the details and summary elements. See the demo and code at https://css-tricks.com/pause-gif-details-summary/ .