Google I/O 2024: what's new for web developers?
Web Platform Dashboard & 11 new game-changing features for the Web platform! 🕸️
If you are just discovering this newsletter or if someone forwarded this edition to you and would like to sign up for Webpreneurs:
Hey Webpreneurs! 👋
It's been a while since I last shared updates with you through this newsletter, but I'm excited to be back with some big changes! To reach a wider audience, I've decided to switch the newsletter to English. Along with this language change, I've revamped the format. Each edition will now feature a main topic and sometimes, there will be some news about Product, Design, Engineering, Tech, and Entrepreneurship news at the end.
Let’s dive into the latest from Google I/O and the exciting developments for Web platform.
Google I/O 2024: my recap' for web developers
After watching some talks and articles from Google I/O, I’m happy to share with you some news about the Web platform. Last year, at Google I/O were introduced Baseline, an initiative that brings clarity to information about browser support for web platform features. And this year, they are back with even more news.
The Web Platform Dashboard
Imagine a place like caniuse.com where you can see the entire web platform's journey, track the evolution of individual features, and watch them become part of Baseline. Sounds amazing, right? That’s exactly what the Web Platform Dashboard offers!
This place is available on webstatus.dev.
It’s an innovative way to stay updated on web platform interoperability. Check out all the details in our announcement.
New to Baseline: 11 game-changing features
At Google I/O 2024, Rachel Andrew shared some web platform features that have recently become part of Baseline Newly Available. These features are now available in Chrome, Edge, Firefox, and Safari, and range from small additions that can streamline development, to some of the most wanted features by developers—including container queries and :has().
I’m here to present you 11 of these new features with some videos & articles from the community that explains them efficiently!
1. CSS Container Queries
Wave goodbye to viewport-only CSS Media Queries. CSS Container Queries let you adapt your designs based on the size of containers. This means more flexibility and reusable components that can adjust themselves perfectly within different layouts.
2. :has() selector
Finally, a parent selector! The :has() selector allows you to select an element based on its children, making your components even more versatile.
3. Subgrid for CSS Grid Layout
Subgrid lets nested grids inherit tracks from their parent grid, perfect for aligning items in nested layouts seamlessly.
4. CSS Nesting
Inspired by Sass, CSS Nesting helps you avoid repetitive selectors, improving readability and grouping related styles.
5. <search> element
Meet the new HTML <search> element that semantically identifies the purpose of the element's contents as having search or filtering capabilities. The search or filtering functionality can be for the website or application, the current web page or document, or the entire Internet or subsection thereof. For more details, see the MDN page.
6. Responsive <video> element
Serve appropriately sized videos to different devices using the <source> element within the <video> tag, similar to responsive images. For more details, check this article.
7. inert attribute
Control interactivity of UI elements with the inert attribute, making parts of your UI non-interactive when needed. It is a Boolean attribute indicating that the browser will ignore the element. With the inert attribute, all of the element's flat tree descendants (such as modal <dialog>) that don't otherwise escape inertness are ignored. The inert attribute also makes the browser ignore input events sent by the user, including focus-related events and events from assistive technologies. For more details, check this article.
8. color-mix() CSS function
Mix colors in any color space, including the latest color models like LCH and OKLab, directly in CSS thanks to color-mix() CSS function.
9. :user-valid and :user-invalid pseudo-classes
Enhance form validation with pseudo-classes that only trigger after user interaction, improving user experience.
10. Declarative Shadow DOM
Create shadow trees directly from HTML, perfect for server-side rendered components (SSR) and environments where JavaScript might not run.
11. Popover API
Create decorative popups for menus, notifications, and more with the new Popover API.
Stay ahead with Baseline
These new features are just the tip of the iceberg. Baseline continues to grow, bringing you the latest tools and improvements to enhance your development process. Explore more about Baseline 2023 and the upcoming 2024 features.
See web.dev & webstatus.dev for further informations!
If you want a kind of video format of these new features, here is the official one from Google I/O 2024:
Stay innovative, keep experimenting, and let’s continue building a better web together!
💌 Thank you
A big thank you to each of you for being there during this edition of my newsletter.
Your feedback is important to me so don't hesitate to give it to me, any criticism is welcome! Stay tuned for more content to come in future editions.
Thanks again for reading & see you soon 👋
If you are just discovering via a link or someone forwarded this edition to you and would like to sign up for Webpreneurs: