CSS-Tricks·36wBringing Back Parallax With Scroll-Driven CSS Animations
CSS scroll-driven animations now enable parallax effects without JavaScript, using scroll() and view() timeline functions to control animation progress based on scroll position. The technique includes animation ranges for precise timing control, accessibility considerations with prefers-reduced-motion, and browser support strategies including polyfills for unsupported browsers.
Web Dev Simplified·35wShadcn Finally Has MultiSelect!
A developer creates a custom MultiSelect component for Shadcn UI library, addressing the missing functionality. The implementation combines Popover and Command components, uses React Context for state management, and employs clever techniques to handle component registration before rendering. Key challenges included making components work with Shadcn's declarative syntax, implementing dynamic overflow handling for selected items, and ensuring accessibility. The component is available as a Shadcn registry installation with customizable badges, wrapping behaviors, and search functionality.
Sara Soueidan·34wCSS-only scrollspy effect using scroll-marker-group and :target-current
CSS now offers a JavaScript-free way to create scrollspy effects using the scroll-target-group property and :target-current pseudo-selector. By applying scroll-target-group: auto to a container of anchor links, browsers automatically highlight the active link as users scroll through content sections. However, current implementations lack proper accessibility support, as Chrome doesn't automatically add aria-current attributes to active links, creating WCAG compliance issues that still require JavaScript solutions.
Bootstrap·33wBootstrap 5.3.8
Bootstrap 5.3.8 has been released as the final patch before version 5.4.0. This update reverts a dropdown focus bug, includes CSS improvements for WCAG 2.1 compliance and spinner distortion fixes, and removes references to the discontinued Bootstrap Themes site. The release focuses primarily on bug fixes and documentation updates rather than new features.
CSS-Tricks·33wA Radio Button Shopping Cart Trick
A CSS-only technique for animating items into a shopping cart using radio button pairs that toggle states to trigger smooth transitions. Each product contains two radio inputs with the same name attribute, creating a see-saw effect when clicked. When selected, items shrink and move to the cart position using CSS transforms and transitions. The approach includes JavaScript for counting items and discusses accessibility limitations due to duplicate interactive elements. The author suggests modern alternatives like the View Transitions API for better implementation.
Hacker News·35wThe beauty of a text only webpage
Text-only webpages offer a clean, fast, and distraction-free browsing experience without cookie banners, ads, or auto-play videos. They load instantly, work everywhere, are infinitely reproducible, and cost almost nothing to host. While they may sacrifice some engagement metrics, these simple pages contribute to a calmer, more accessible internet that prioritizes content over flashy features.
Lobsters·35wmissing.css
missing.css version 1.2.0 introduces toggle buttons with ARIA switch roles, print annotations for abbreviations and links, new grid modifiers for print layouts, extensive customization variables for borders and shadows, layout utilities, color scheme support via meta tags, scrollbar theming, progress and meter element styling, improved flexbox classes, Lucide icon integration, breadcrumb enhancements, button colorways, select element improvements, and various bug fixes while deprecating several older classes and variables.
Hacker News·37wWICG/html-in-canvas
A new web API proposal introduces methods to render HTML content directly into Canvas 2D and WebGL contexts. The proposal includes layoutsubtree attribute for canvas elements, drawElement() for 2D rendering, texElement2D() for WebGL textures, and setHitTestRegions() for interactive elements. This addresses current limitations in canvas-based content regarding accessibility, internationalization, and complex text layouts. The API enables use cases like styled chart components, rich content in creative tools, HTML rendering in 3D contexts, and composing HTML with WebGL shaders.
Lobsters·36wWhy Semantic HTML Still Matters
Semantic HTML provides crucial structure that modern web development often overlooks in favor of component-based approaches and utility classes. Proper HTML semantics improve performance by reducing DOM complexity, enable better accessibility for assistive technologies, help search engines and AI agents understand content, and create more resilient applications. The shift toward meaningless div soup and utility-heavy markup creates performance bottlenecks through layout thrashing, increased rendering costs, and bloated stylesheets. Semantic elements like article, nav, and section provide natural boundaries that browsers can optimize, while also serving as a foundation for modern CSS features like containment and content-visibility.