Una Kravets, developer advocate at Google & web platform ambassador, takes Amal & Nick through the amazing features in CSS, from nesting to container queries. They discuss the use of origin trials, updates in CSS components, and upcoming additions like select lists and pop-overs.
The linear easing function in CSS allows developers to create custom easing animations without the need for JavaScript.
The popover component in CSS simplifies the development of interactive elements like popovers and tooltips by providing attributes and events for declarative control.
Anchor positioning in CSS eliminates the need for manual JavaScript calculations or external libraries when positioning elements relative to a specific anchor point.
Deep dives
Linear Easing Function
The linear easing function is a new feature that allows developers to create custom easing animations. It can be used to plot values in a chart and create various transitions like bounces. This eliminates the need for custom JavaScript implementations for creating custom easing effects.
Popover Component
The popover component is a new feature that allows developers to easily create popovers, tooltips, menus, and other interactive elements. It provides attributes and events that enable declarative control over the appearance and behavior of the popover. This eliminates the need for complex JavaScript logic and simplifies the development of interactive components.
Anchor Positioning
Anchor positioning is another notable addition to CSS that enables developers to anchor elements to other elements on the page. This feature is particularly useful for creating tooltips, notifications, and other interactive elements that need to be positioned relative to a specific anchor point. It eliminates the need for manual JavaScript calculations or reliance on external libraries.
Linear Easing Function
The linear easing function is a new feature that allows developers to create custom easing animations. It replaces the need for custom JavaScript implementations and offers greater flexibility to create various easing effects.
CSS podcast covers common CSS questions and demos
The CSS podcast, hosted by Adam and the guest, discusses common CSS questions and provides demos. They talk about topics such as scroll-driven animations, which enable scroll-based animation experiences without requiring JavaScript. They also mention a site called scroll-driven-animations.style, which provides demos and videos on how to use these animations. Another topic covered is the performance benefits of using new CSS APIs, which are more performant and browser-accelerated compared to traditional JavaScript methods. The podcast also explores the concept of separating application styles from application logic, providing benefits in terms of developer experience, performance, and better architecture.
CSS podcast highlights container queries and new approach to responsive design
The CSS podcast delves into container queries and how they allow for a new approach to responsive design. By writing styles in a container mode and looking for the size of the parent element, developers can create self-contained styles that adapt to different contexts within the page. This leads to more logical component architecture and better separation of concerns. The discussion also touches on style queries and the 'has' selector, which let developers create custom property values and apply styles based on the presence or state of children within an element. These new CSS features offer exciting possibilities for building responsive interfaces and provide more flexibility in styling and layout.
Una Kravets, web platform ambassador & lead of the Google Chrome UI Developer Relations Team, joins Amal & Nick to take them CSS to school as they start this podcast in CSS kindergarten and end it with a Level-Up CSS Diploma. (LUCD?)
We explore all the amazing features which have recently landed in CSS — enabling super-charged user experiences with no JavaScript. Don’t forgot to check out all the epic links & demos in the show notes — and hold on to your butts, kids, this one is a ride!
Changelog++ members support our work, get closer to the metal, and make the ads disappear. Join today!
Sponsors:
Fastly – Our bandwidth partner. Fastly powers fast, secure, and scalable digital experiences. Move beyond your content delivery network to their powerful edge cloud platform. Learn more at fastly.com
Fly.io – The home of Changelog.com — Deploy your apps and databases close to your users. In minutes you can run your Ruby, Go, Node, Deno, Python, or Elixir app (and databases!) all over the world. No ops required. Learn more at fly.io/changelog and check out the speedrun in their docs.
Typesense – Lightning fast, globally distributed Search-as-a-Service that runs in memory. You literally can’t get any faster!
