CSS can do that
- Smooth scrolling
- Lazy-loading images
- Keeping elements stuck in the viewport while scrolling
- Smoothly scrolling in & snapping elements into place
Even cooler stuff coming up
Meanwhile there's also a lot of work being done to make CSS Container Queries possible. Currently, responsiveness in front-end website design is based entirely around the browser (also called 'viewport') width. Container queries makes responsive web design more granular. It will allow for the look of individual components to be adjusted based on the width of their parent container. For example, this would allow a card component to have a wider layout if used in the main content block of a website, while switching to a stacked layout if it's placed inside a narrow sidebar. Container queries are currently available in Chrome behind flags, but hopefully the work going on to make them possible goes smoothly and we can start seeing wider support.
- The Future of CSS: Scroll-Linked Animations - Bramus Van Damme gives us a peak at
@scroll-timeline, a powerful upcoming addition to CSS.
Building a resilient frontend using progressive enhancement
Not an article this week, more of a guide. This one is from the Gov.uk team, and provides a service manual for their design and development teams to reference when building out new pages and features.
The next issue of Optimised will be in your inbox on September 3rd. The website has an archive of all previous emails. It's a good place to recap on anything we've covered, and also handy to share with friends or colleagues.
As always if you've got any feedback or specific topics you want to be covered then just reply to this email.
Keep safe, stay well.