--- title: Best SitePoint posts — May 2026 | daily.dev description: The most upvoted SitePoint posts from May 2026, curated by the daily.dev community. canonical: https://daily.dev/sources/sitepoint/best-of/2026/05 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/sitepoint/best-of/2026/05 og:type: website og:site_name: daily.dev og:title: Best SitePoint posts — May 2026 | daily.dev og:description: The most upvoted SitePoint posts from May 2026, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of SitePoint — May 2026 1. 1 [](https://daily.dev/posts/css-sibling-index-and-sibling-count-native-list-staggering-without-javascript-bsxh6wlwk "CSS sibling-index() and sibling-count(): Native List Staggering Without JavaScript") Article SitePoint · 18w CSS sibling-index() and sibling-count(): Native List Staggering Without JavaScript CSS is gaining two new value functions — sibling-index() and sibling-count() — shipping in Chrome 137+ that give elements native awareness of their position and total sibling count. These eliminate the need for JavaScript MutationObservers, Sass loops, or inline data attributes to achieve staggered animations, dynamic color distribution, and responsive layouts. sibling-index() returns a 1-based integer usable inside calc(), mod(), and other math functions; sibling-count() returns the total number of siblings including self. The guide covers a full staggered card entrance animation tutorial with progressive enhancement via @supports, accessibility via prefers-reduced-motion, advanced patterns like rainbow tag clouds, z-index stacking, flex grid sizing, and scroll-driven animation integration, plus common pitfalls such as the custom property inheritance gotcha and Shadow DOM behavior. 61 2 2. 2 [](https://daily.dev/posts/how-to-build-modern-ui-components-using-css-generators-vmdywpczk "How to Build Modern UI Components Using CSS Generators") Article SitePoint · 17w How to Build Modern UI Components Using CSS Generators CSS generators are browser-based WYSIWYG tools that output production-ready CSS, saving developers significant time on repetitive styling tasks like gradients, box shadows, animations, and grid layouts. The post covers what CSS generators are, the types of UI components they help build (buttons, cards, tooltips, loaders, responsive layouts), real-world workflow examples, best practices such as using generated values as CSS custom properties, and common pitfalls including accessibility gaps and unoptimized output. Key advice: treat generated CSS as a strong starting draft, always review before shipping, and remain responsible for accessibility concerns like focus states and prefers-reduced-motion. 61 3 3. 3 [](https://daily.dev/posts/the-selectmenu-element-stop-using-javascript-dropdown-libraries-22c9sm7x7 "The Element: Stop Using JavaScript Dropdown Libraries") Article SitePoint · 18w The Element: Stop Using JavaScript Dropdown Libraries The \`appearance: base-select\` CSS property, shipping in Chrome 133+, finally allows full styling of native \`\` elements without JavaScript dropdown libraries. By applying this single CSS declaration, developers unlock pseudo-elements like \`::picker(select)\` and \`::checkmark\`, can add a \`\` trigger with \`\` for rich option display, and animate open/close transitions with \`@starting-style\`. The article walks through step-by-step implementation, a feature comparison against React Select, Downshift, Headless UI, and Choices.js (showing 0 KB vs 8–27 KB bundle costs), React integration patterns, progressive enhancement via \`@supports\`, and common pitfalls. Multi-select tag UIs, async typeahead, and virtualized lists still require JavaScript libraries. Firefox and Safari have not yet shipped support, so \`@supports\` guards are essential for production use. 22 4. 4 [](https://daily.dev/posts/scroll-driven-css-in-2026-building-carousels-without-javascript-o8z3jgfok "Scroll-Driven CSS in 2026: Building Carousels Without JavaScript") Article SitePoint · 18w Scroll-Driven CSS in 2026: Building Carousels Without JavaScript Modern CSS (2025-2026) now enables fully functional image carousels without any JavaScript. Using CSS Overflow Level 5's \`::scroll-button()\` and \`::scroll-marker()\` pseudo-elements alongside Scroll-Driven Animations Level 1, developers can build carousels with prev/next navigation, dot indicators, snap behavior, entrance animations, and a scroll progress bar in pure CSS. The tutorial covers semantic HTML structure, scroll snap setup, generating navigation buttons and dot markers via pseudo-elements, binding animations to scroll position with \`animation-timeline: view()\`, and wrapping all new features in \`@supports\` blocks for progressive enhancement. Browser support is strong in Chrome 135+ and Safari 19+, with Firefox still partially behind flags. JavaScript remains necessary only for autoplay, infinite looping, or dynamic content loading. 19 1 5. 5 [](https://daily.dev/posts/css-math-random-in-production-native-randomness-without-javascript-g9weud1hs "CSS math-random() in Production: Native Randomness Without JavaScript") Article SitePoint · 18w CSS math-random() in Production: Native Randomness Without JavaScript CSS is gaining a native random() function (CSS Values and Units Level 5) that enables per-element randomness evaluated by the rendering engine without JavaScript. As of mid-2025, no stable browser ships it yet, but the spec is mature enough to build against using progressive enhancement. The guide covers the full syntax including per-element vs. named caching identifiers, practical use cases (generative backgrounds, staggered animations, non-uniform grid layouts), React integration patterns that avoid hydration mismatches, SSR fallback strategies using custom properties, performance considerations, accessibility requirements including prefers-reduced-motion handling, and a production checklist. The recommended approach is to gate all random() usage behind @supports blocks with JavaScript fallbacks injecting CSS custom properties for unsupported browsers. 16 [See all SitePoint archives](/sources/sitepoint/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/sources/sitepoint/best-of/2026/05#page","url":"https://daily.dev/sources/sitepoint/best-of/2026/05","name":"Best SitePoint Posts — May 2026","description":"The most upvoted SitePoint posts from May 2026, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/sitepoint/best-of/2026/05#items","numberOfItems":5,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/css-sibling-index-and-sibling-count-native-list-staggering-without-javascript-bsxh6wlwk","name":"CSS sibling-index() and sibling-count(): Native List Staggering Without JavaScript"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/how-to-build-modern-ui-components-using-css-generators-vmdywpczk","name":"How to Build Modern UI Components Using CSS Generators"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/the-selectmenu-element-stop-using-javascript-dropdown-libraries-22c9sm7x7","name":"The Element: Stop Using JavaScript Dropdown Libraries"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/scroll-driven-css-in-2026-building-carousels-without-javascript-o8z3jgfok","name":"Scroll-Driven CSS in 2026: Building Carousels Without JavaScript"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/css-math-random-in-production-native-randomness-without-javascript-g9weud1hs","name":"CSS math-random() in Production: Native Randomness Without JavaScript"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Sources","item":"https://daily.dev/sources"},{"@type":"ListItem","position":3,"name":"SitePoint","item":"https://daily.dev/sources/sitepoint"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/sitepoint/best-of"},{"@type":"ListItem","position":5,"name":"May 2026"}]}]} ```