Best of CSS — February 2026

  1. 1
    Article
    Avatar of hackadayHackaday·12w

    CSS, Now It’s Got Your 8086

    Developer Lyra Rebane has built an 8086 CPU emulator written in pure CSS, demonstrating CSS's Turing completeness in a novel and experimental way. The project runs in Chrome-based browsers (using CSS functions not yet available in Firefox) and uses a tiny JavaScript snippet only for clock stability. While not practically useful, it showcases the extreme limits of CSS as a computational medium and invites speculation about more capable minimalist RISC designs using the same approach.

  2. 2
    Article
    Avatar of chromeChrome Developers·14w

    Chrome for Developers

    Chrome 145 introduces column wrapping for multi-column layouts with `column-wrap` and `column-height` properties, allowing columns to wrap vertically instead of creating horizontal overflow. The release includes a new Origin API that provides an `Origin` object for safer origin comparisons and parsing. Device Bound Session Credentials (DBSC) enhances security by binding user sessions to specific devices using hardware-backed key pairs and short-lived cookies, making stolen session cookies harder to exploit.

  3. 3
    Article
    Avatar of joshwcomeauJosh W Comeau·13w

    Sprites on the Web • Josh W. Comeau

    A deep dive into using sprite-based animation on the web, inspired by Twitter's 2015 'Like' button implementation. The technique uses a spritesheet (a single image containing all animation frames) combined with CSS `object-fit: cover`, `object-position`, and the lesser-known `steps()` timing function to flip between frames. The post covers the full implementation, explains the nuances of `jump-none` vs `jump-end` step positions in looping vs non-looping animations, and discusses when sprites are appropriate (pixel-art style characters, game assets) versus when procedural CSS/JS animation is preferable (particle effects that benefit from randomness). Includes a real-world example of an animated cat character with dynamic state changes.

  4. 4
    Video
    Avatar of asaprogrammerAs a Programmer·15w

    100 HTML CSS JavaScript Projects for Beginners in 2026

    A hands-on course offering 100 beginner-friendly web development projects built with HTML, CSS, and JavaScript. Projects include e-commerce shopping carts, QR code generators, UI components like pricing cards and contact forms, and interactive features like quiz games and color palette generators. Each project is taught step-by-step with complete code walkthroughs, workspace setup guidance, and responsive design implementation.

  5. 5
    Article
    Avatar of lobstersLobsters·13w

    Death to Scroll Fade!

    A developer rant against the ubiquitous 'scroll fade' web design trend, where page elements fade in as they scroll into view. The author argues it's tacky, often demanded last-minute by stakeholders, and raises real concerns: accessibility issues for users with vestibular disorders, cognitive overload, cross-platform inconsistency, and negative impact on Core Web Vitals like LCP. The post crowdsources practical arguments to push back against scroll fade requests, while humorously suggesting developers collectively pretend the technique is now illegal.

  6. 6
    Article
    Avatar of codepenCodePen·14w

    Chris’ Corner: All Together Now

    Modern CSS has evolved to handle tasks that previously required JavaScript. Features like custom selects with `appearance: base-select`, anchor positioning, scroll-driven animations, and scroll state queries now enable complex UI patterns purely in CSS. When combined, these capabilities demonstrate CSS's transformation into a more powerful, intelligent language that covers most presentation and interaction needs without JavaScript.

  7. 7
    Video
    Avatar of kevinpowellKevin Powell·12w

    And they say CSS isn't a programming language

    A walkthrough of a CSS-only shortest path finder demo (by Tmania on CSSON.dev) that calculates and highlights the shortest route between draggable nodes using advanced CSS features. The demo uses CSS math functions like hypot(), CSS counters for displaying distances, view timelines to track element positions, container style queries with range syntax to compare distances, anchor positioning for connecting nodes, and registered custom properties — all without any JavaScript logic (JS is only used for drag-and-drop). The author explores the code live, explaining how each CSS feature contributes to the pathfinding algorithm.

  8. 8
    Article
    Avatar of csstipCSS Tip·15w

    Elastic/Bouncy Hover Effect

    A CSS technique demonstrates how to create an elastic/bouncy hover effect using modern CSS features like shape(), sibling-index()/sibling-count(), and linear(). The implementation requires a monospace font and wrapping each letter individually, but avoids text duplication. Currently only works in Chrome, and the author warns against using this technique in production due to accessibility concerns with ARIA on links.

  9. 9
    Article
    Avatar of softwaretestingmagazineSoftware Testing Magazine·13w

    Using Free Slot Games As A Sandbox For Frontend And UX Testing

    Online slot games, with their high-density graphics, rapid state changes, and heavy asset loads, serve as an unconventional but effective sandbox for stress-testing frontend frameworks and UX. Key insights include: JavaScript-driven animations expose browser rendering jank and main thread exhaustion; testing on mid-range hardware (used by ~55% of global PC users) reveals real-world performance gaps; browser engines (Blink, WebKit, Gecko) handle heavy graphical assets differently, requiring manual cross-browser testing; and network instability simulations uncover weaknesses in error handling and state recovery logic. The argument is that typical enterprise SaaS apps lack the asset density to meaningfully stress a rendering engine, making slot game environments a uniquely demanding proving ground.

  10. 10
    Article
    Avatar of logrocketLogRocket·13w

    CSS @container scroll-state: Replace JS scroll listeners now

    CSS @container scroll-state is a new declarative feature that allows developers to replace JavaScript scroll event listeners and layout measurements with pure CSS state queries. This enables smoother, scroll-driven UI interactions without the performance overhead of JS-based scroll handling.

  11. 11
    Article
    Avatar of frontendmastersFrontend Masters·14w

    Glowing Gradient `hr` – Frontend Masters Blog

    Chris Coyier recreates a glowing gradient divider component as an HTML `<hr>` element using CSS custom properties and gradients. He makes it highly configurable using his slideVars library, which he recently updated to preserve the order of custom properties as they appear in CSS.

  12. 12
    Article
    Avatar of codepenCodePen·14w

    Chris’ Corner: Light & Boxes

    A coding challenge explores creating dynamic box shadows that respond to a light source as elements scroll. Multiple developers showcase solutions using scroll-driven animations with animation-timeline: view() and scroll(), manipulating shadow properties through CSS custom properties and @property declarations. Solutions range from JavaScript-assisted approaches to pure CSS implementations that interpolate shadow directions based on viewport position.

  13. 13
    Article
    Avatar of css_tricksCSS-Tricks·13w

    Potentially Coming to a Browser :near() You

    A deep dive into the proposed CSS :near() pseudo-class, which would match elements when the pointer is within a specified distance. The article explores practical use cases like dimming/hiding elements until proximity, prefetching via the Speculation Rules API, and improving hover-triggered overlays with the Interest Invoker API. Since :near() isn't browser-supported yet, demos simulate the behavior using padding, content-visibility, contain-intrinsic-size, and animation tricks. Accessibility concerns around WCAG criteria for focus visibility and target size are also discussed, along with potential abuses like fingerprinting and performance issues.

  14. 14
    Article
    Avatar of css_tricksCSS-Tricks·13w

    Distinguishing “Components” and “Utilities” in Tailwind

    The distinction between 'components' and 'utilities' in Tailwind is more semantic than practical. Rather than placing component styles in @layer components (which requires extra boilerplate and prevents utilities from acting as components), a cleaner approach is to define component-like styles using @utility and override them with Tailwind's !important modifier directly in HTML. This sidesteps the traditional component/utility divide, which the author argues is largely a marketing construct rather than a meaningful architectural boundary.

  15. 15
    Article
    Avatar of wordpressdevWordPress Developer·14w

    What’s new for developers? (February 2026)

    WordPress 7.0 Beta 1 introduces significant developer updates including a fully iframed post editor, viewport-based block visibility controls, per-block custom CSS, and expanded UI components. The release also brings anchor support for dynamic blocks, improved text styling across multiple blocks, restructured Tabs block architecture, and enhanced Navigation overlay features. WordPress Studio CLI now supports AI-assisted development tools, while the AI Experiments plugin adds excerpt generation and content summarization capabilities. Additional updates include Playground runtime support for wp-env, view transitions in the admin, and various block-specific improvements for themes and plugins.

  16. 16
    Article
    Avatar of kittygiraudelKitty says hi.·12w

    Nerdy Design Details

    A personal blog post detailing CSS and design improvements made to a personal website. Covers a tri-state dark/light/auto theme switcher using aria-pressed, fluid typography with min/max/vw, styled blockquotes and callouts with gradient borders using background-clip tricks, typographic fleurons as decorative elements, squircle corners via the new CSS corner-shape property, improved focus styles with outline and scroll-margin-top, and smarter ad placement using Liquid templating and :has() CSS selector.

  17. 17
    Article
    Avatar of cssweCSS Weekly·13w

    Frontend News #20: CSS Grid Lanes, ::search-text Pseudo-Element, HTML Geolocation Element

    Frontend News #20 covers several emerging web platform features: CSS Grid Lanes for native masonry layouts, the new `::search-text` pseudo-element for styling in-page search results, a new HTML `<geolocation>` element, a deep dive into how a single emoji character can cause major performance issues, and a CodePen demo of a bubble color picker.

  18. 18
    Article
    Avatar of codepenCodePen·16w

    Chris’ Corner: Lovingly Esoteric CSS

    Advanced CSS selector patterns and modern features are explored through practical examples. The difference between :has(:not) and :not(:has) selectors is clarified by expanding implied selectors. Range syntax for style queries enables conditional styling based on custom property values, though with limitations when querying the same element. The box-decoration-break property solves visual issues with wrapped inline elements. Modern CSS units can be combined using functions like min() and round() for more flexible spacing systems.

  19. 19
    Article
    Avatar of hnHacker News·14w

    Modern CSS Code Snippets

    A curated collection comparing outdated CSS hacks with their modern, native CSS replacements. Shows side-by-side examples of how commonly Googled CSS techniques can now be implemented using clean, contemporary approaches.

  20. 20
    Article
    Avatar of alwaystwistedAlways Twisted·15w

    Underlining Links With CSS

    Modern CSS provides granular control over link underlines through individual text-decoration properties. Beyond the basic text-decoration shorthand, you can control line style (solid, dotted, dashed, wavy), color, thickness, offset from text, position relative to descenders, and whether underlines skip over letter descenders. These properties enable precise styling while maintaining progressive enhancement for older browsers.

  21. 21
    Video
    Avatar of wdsWeb Dev Simplified·13w

    Top 17 Accessibility Features No One Knows About

    A practical deep-dive into 17 lesser-known web accessibility features that most developers overlook. Topics covered include: using `aria-describedby` and `aria-live` (with `aria-atomic` and `aria-relevant`) for dynamic form errors and toast notifications; the `inert` HTML attribute to prevent keyboard focus on off-screen or hidden content like drawers and modals; proper `autocomplete` attribute values for form inputs; minimum touch target sizes (24×24px recommended, 44×44px ideal); avoiding ARIA role overrides when native HTML elements suffice; skip-to-main-content links; dyslexia-friendly fonts; and the importance of keeping visual CSS order aligned with HTML DOM order for correct tab navigation. The testing section covers Chrome DevTools rendering emulation (color blindness, reduced motion, contrast, font scaling), Lighthouse accessibility audits, and color contrast ratio checking.

  22. 22
    Video
    Avatar of kevinpowellKevin Powell·13w

    5 CSS fouls that I see way too often

    Five common CSS mistakes that even experienced developers make: (1) Useless declarations like unnecessary `width: 100%` that can cause overflow issues with margins or in flex/grid contexts. (2) Being overly prescriptive with fixed heights instead of using `min-height` or `max-width` to work with browser defaults. (3) Poor code organization and failing to refactor duplicated styles. (4) Removing focus outlines with `outline: none` instead of using `:focus-visible`, which breaks keyboard navigation accessibility. (5) Overusing flexbox or grid when the other layout tool would be more appropriate, a pattern increasingly seen in AI-generated CSS.

See all CSS archives