# The Future of CSS: Top 10 Interop 2027 Proposals Exploring upcoming CSS features that promise to revolutionize web layout and animation capabilities. - **Source:** [Josh Comeau](https://www.joshwcomeau.com) - **Published:** 2026-10-20 - **Topic:** [Software & Engineering](https://brifing.si/c/engineering) - **Original article:** - **On Brifing:** https://brifing.si/s/9d487f7a-8f1c-4d72-8db8-b86975b4bbd5 ## Collaborative Browser Standardization Major browser vendors including Google, Apple, Microsoft, and Mozilla collaborate through the Interop project to unify web technology support. This initiative has proven highly successful, often achieving near-100% cross-browser compatibility within one year for selected focus areas. As of October 2026, planning for Interop 2027 is underway to prioritize essential features. ## CSS Functions Proposal The proposed @function syntax allows developers to define custom CSS functions, mirroring JavaScript logic. This feature enables complex operations like converting polar to cartesian coordinates directly within stylesheets. Currently implemented in Chromium browsers, this science-fiction-like capability could see widespread adoption if prioritized in the upcoming Interop 2027 cycle for universal support. ## Advanced Corner Shaping The corner-shape property introduces non-standard border geometries like squircle, bevel, notch, and scoop. Unlike clip-path, this property modifies the actual border-box, ensuring that borders, outlines, and shadows follow the new shapes correctly. It serves as an excellent progressive enhancement, providing sophisticated visual control for modern, high-fidelity user interface designs. ## Custom Border Geometry The border-shape proposal offers a lower-level alternative to corner-shape, enabling developers to draw custom borders using straight lines, arcs, and Bézier curves. This feature allows for complex shapes like circular scoops while maintaining correct border-box behavior. Developers can even animate between different border shapes, significantly expanding the creative possibilities for web layouts. ## Anchor Positioning Evolution Building on the successful Interop 2026 implementation of the Anchor Positioning API, the Level 2 proposal introduces container queries to detect fallback positions. This solves a critical pain point for tooltips, allowing developers to programmatically determine if an element has flipped its position, ensuring UI components remain perfectly aligned with their triggers. ## Inherit Function Utility The proposed inherit() function aims to solve the limitation of the current inherit keyword by allowing mathematical modifications to inherited values. By integrating with calc(), developers could dynamically adjust properties like nested border radii. While currently in a preliminary stage, this feature would greatly simplify complex, reusable component styling across large applications. ## Scroll-Triggered Animations While scroll-driven animations are now widely supported, the new proposal for scroll-triggered animations aims to simplify proximity-based effects. Currently, developers rely on the complex IntersectionObserver API in JavaScript to achieve this. Native CSS support would allow for cleaner, more performant animations that trigger when elements reach specific points during user scrolling. ## Reading Flow Control The reading-flow property addresses accessibility issues caused by responsive layouts where visual order deviates from DOM order. By allowing developers to specify tab order based on grid or flexbox layouts, this property ensures assistive technologies navigate content logically. Championed by Rachel Andrew, it is a vital proposal for inclusive web development. ## Animating Keyword Sizes The interpolate-size property, alongside the calc-size() function, finally enables smooth transitions between keyword values like height: auto. This solves a long-standing frustration for developers creating collapsible accordion UIs. By allowing discrete transitions, it eliminates the need for complex JavaScript workarounds, providing a native, performant solution for dynamic content sizing and layout. ## The Power of Interop The Interop project has fundamentally changed how web standards evolve by forcing consensus among browser vendors. By focusing on developer-requested features, the project ensures that new CSS capabilities reach production-ready status rapidly. As the industry looks toward 2027, these proposals represent the next frontier in creating more expressive, accessible, and performant web interfaces. ## Progressive Enhancement Strategy Modern CSS development relies heavily on progressive enhancement, allowing developers to use cutting-edge features while maintaining fallback support for older browsers. By utilizing @supports queries and feature detection, developers can implement advanced properties like corner-shape today. This approach balances the desire for innovation with the necessity of maintaining a stable, accessible web. ## Future Web Development The trajectory of CSS indicates a shift toward more functional, logic-based styling capabilities. Features like custom functions, advanced geometry, and improved layout control empower developers to build complex UIs with less reliance on JavaScript. As these proposals move through the Interop process, the web platform continues to mature into a highly capable application environment. ## Sources covering this story - https://www.joshwcomeau.com/css/interop-2027/ — --- _Summary written by Brifing from the original reporting. Copyright in the original article belongs to its publisher; read the full piece at the link above._