2023’s Halftime Update: A Spotlight on Browser Features, JavaScript, and CSS Updates
It’s been a couple of months into the year, and a lot has happened in the web development space. We’ve seen several updates on browsers, tons of CSS improvements and JS superpowers. This article will cover some of the work that cuts across this, highlighting major advancements that will soon be the peak of every web developer’s experience.
To give a brief introduction: every year all major browser vendors, and other stakeholders, work together to solve the top browsers compatibility issues and improve the web for developers. The result of this is the Interop 2023 which is an extension of Interop 2022. Its main focus has been to achieve interoperability, where browsers have the same behavior, therefore making it easy for developers to build without worrying about cross-browser compatibility.
The features highlighted include some existing features that are just now reaching interoperability, innovations in the browser space(specifically Chrome and Chromium browsers), JavaScript, and CSS Enhancements.
Let’s dive in!
1. Browser Memory Saver and Energy Saver modes
Chromium browsers recently did an update that lets users reduce the amount of memory their browser consumes using the memory saver tool. Memory saver mode proactively discards tabs that have been unused in the background for some time. When a tab is discarded, its title and favicon still appear in the tab strip but the page itself is gone, exactly as if the tab had been closed normally. If the user revisits that tab, the page will be automatically reloaded.
It’s important to note that no event is fired when a tab is discarded. Developers, therefore, need to anticipate this and prepare ahead of time. Users can also instruct Chrome not to discard tabs for specific sites. This might be particularly useful for intensive sites with complex flows and rich content that would be expensive to reload if the page were discarded.
Activities that exclude a tab from deactivation include: playing audio or video, screen sharing, active downloads, partially filled forms and other ongoing interactions such as Bluetooth connection.
In Energy Saver mode, Chrome conserves battery power by reducing the display refresh rate. This affects scrolling, animations and video frame rates.
2. Search in Chrome’s Omnibox
The Chrome address bar also known as Omnibox has additional features that give users more power when it comes to performing searches.
- In the address bar type
@and a couple of options will be displayed, where you can click on the category you want to search from.
- If you wish to search for an item within a specific site, directly from the omnibox: navigate to
chrome://settings/searchEngines>Site Search, and click to add a site. Once added, you’ll get the option to search within that site, and avoid generic searches such asadidas amazon.com. This is particularly helpful, if you do frequent searches on that site or would just appreciate the convenience.
chrome site search3. Override network response headers
Traditionally, you’d need access to the web server to experiment with HTTP response headers. This is now an inbuilt functionality in most Chromium browsers, which gives you the power to override response headers or add new headers all within the devtools network panel.
To override a header, navigate to Network > Headers > Response Headers, hover over a header’s value, and click the edit icon to make edits. You will be required to select a local folder to store the .headers file, which will contain all the updates made.
4. CSS documentation
Conveniently read about CSS properties on the elements > styles pane, which now shows you a short description when you hover over a property. It also includes a link to the mdn docs reference of that property.
5. WebTransport Api vs Web Socket
The WebTransport API provides a modern update to WebSockets transmitting data between client and server using HTTP/3. It is based on Google’s QUIC protocol (which is itself based on UDP), and fixes several issues around the classic TCP protocol, on which HTTP and WebSockets are based. These include: faster performance, better network transitions, and reliable transport.
The WebTransport API provides low-level access to two-way communication via HTTP/3, support for multiple streams and supporting both reliable and unreliable data transmission. “Reliable” meaning transmission and order of data are guaranteed.
6. JS scrollend event
How do we tell when a user is done scrolling the page? Without this, events could fire late or while a user’s finger is still down on the screen.
The scrollend event provides a way to detect when a scroll is complete, making it the perfect time to call out and do the hard work as scrolling is no longer happening.
document.onscrollend = event => {…}7. CSS Color() function & new Color Spaces
A color space is a mapping of colors whereas a color gamut is a range of colors. Consider a color gamut as a total of particles and a color space as a bottle made to hold that range of particles.
CSS is getting more colors.. how exciting is that!!
The challenge with color on the web was that CSS wasn’t fully high-definition ready, with support for only 30% of the colors the human eye can see. The color capability of displays rapidly surpassed CSS. Fortunately, CSS has now caught up. With support for HD (high definition) displays, we can now specify colors from within these wider ranges
From Chrome 111 is support for CSS Color 4 gamuts and color spaces, joining Safari who’s had support for display-p3 since 2016. In supporting browsers, there’ll be 50% more colors to pick from.
What does this mean for you as a developer: you’ll be able to specify more colors, enhance gradients, and pick the best color spaces and color gamuts for each task. For example we can assign the color red by value or using the color function and the new color spaces. In browsers that don’t support the new color spaces, the value shown will be the text value; red.
color: red;
color: color(display-p3 1 0 0);8. Inbuilt CSS nesting
One of our favourite CSS preprocessor features is now built into the language.
Nesting helps developers by reducing the need to repeat selectors. The elements > styles pane now also recognises CSS Nesting syntax and applies nested styles to the right elements.
Conclusion
I hope you found this article to be a valuable learning experience and that identified a feature that piques your interest and sparks further exploration. As we embark on the tail end of the year, we eagerly anticipate the forthcoming enhancements that will elevate the web experience even further.
If you’re interested in exploring opportunities for collaborations or wish to delve deeper into the topics discussed, please don’t hesitate to reach out to me on LinkedIn. I’m always open to connecting and engaging in fruitful discussions.
Let’s stay curious, keep pushing boundaries and shape an even brighter future for the web!
References:
