Interop 2026 brings cross-browser compatibility for numerous CSS features. Chrome, Safari, and Firefox are collaborating on anchor positioning, advanced attr() with type conversion, container style queries, contrast-color() function, custom highlights (::search-text, ::target-text), dialogs and popovers, media pseudo-classes
Table of contents
Anchor positioningAnchor Positioning Just Don’t Care About Source OrderAnchor Positioning QuirksCSS Anchor Positioning GuideA First Look at the Interest Invoker API (for Hover-Triggered Popovers)Fancy Menu Navigation Using Anchor PositioningAdvanced attr()attr()CSS Bar Charts Using Modern FunctionsThe CSS attr() function got nothin’ on custom propertiesContainer style queriesA Cornucopia of Container QueriesEarly Days of Container Style QueriesDigging Deeper Into Container Style QueriesWorlds Collide: Keyframe Collision Detection Using Style QueriesCSS Container QueriesThe contrast-color() functionExploring color-contrast() for the First TimeExploring the CSS contrast-color() Function… a Second TimeThe thing about contrast-colorApproximating contrast-color() With Other CSS FeaturesCustom HighlightsCSS Custom Highlight API: The Future of Highlighting Text Ranges on the WebStyling ::search-text and Other Highlight-y Pseudo-ElementsDialogs and popoversClarifying the Relationship Between Popovers and DialogsPoppin’ InThere is No Need to Trap Focus on a Dialog ElementPop(over) the BalloonsWorking With Multiple CSS Anchors and Popovers Inside the WordPress LoopCreating an Auto-Closing Notification With an HTML PopoverA First Look at the Interest Invoker API (for Hover-Triggered Popovers)Getting Creative With HTML DialogMeet the New Dialog ElementPrevent a page from scrolling while a dialog is openInvoker Commands: Additional Ways to Work With Dialog, Popover… and More?Some Hands-On with the HTML Dialog ElementMedia pseudo-classesScroll-driven animationsScroll-Driven Animations Inside a CSS CarouselScroll-Driven Sticky HeadingBringing Back Parallax With Scroll-Driven CSS AnimationsModern Scroll Shadows Using Scroll-Driven AnimationsScroll Driven Animations NotebookUnleash the Power of Scroll-Driven AnimationsSlide Through Unlimited Dimensions With CSS Scroll TimelinesWeb-Slinger.css: Like Wow.js But With CSS-y Scroll AnimationsScroll snappingscroll-marginscroll-paddingscroll-snap-alignscroll-snap-stopscroll-snap-typeCSS Scroll Snap Slide Deck That Supports Live CodingHow I Added Scroll Snapping To My Twitter TimelineHow to use CSS Scroll SnapIntroducing CSS Scroll Snap PointsPractical CSS Scroll SnappingThe shape() functionCSS shape() CommandsBetter CSS Shapes Using shape() — Part 1: Lines and ArcsBetter CSS Shapes Using shape() — Part 2: More on ArcsBetter CSS Shapes Using shape() — Part 3: CurvesBetter CSS Shapes Using shape() — Part 4: Close and MoveSVG to CSS Shape ConverterView transitionsToe Dipping Into View TransitionsWhat on Earth is the `types` Descriptor in View Transitions?::view-transition::view-transition-group::view-transition-image-new::view-transition-image-old::view-transition-image-pair::view-transition-new()::view-transition-old()@view-transitionview()view-transition-classview-transition-nameCSS zoom propertySort: