frontend – DAILY NEWS

TECH & AI

Stop Hardcoding Hex #d9d9d9 In Your CSS

jackminion Jun 29, 2026 0

If you open any massive legacy codebase or inspect a fresh Figma handoff, you will probably see one hex code repeating everywhere: #d9d9d9.

It’s the ultimate default. Developers use it for disabled buttons, subtle borders, card backgrounds, and dividers. But treating this specific light gray as a “safe” neutral is causing massive UI bugs in your production apps right now.

Here is why you need to stop hardcoding #d9d9d9 and how to handle it properly.

The Dark Mode Theme Breaker

****The most common mistake junior developers make is hardcoding border: 1px solid #d9d9d9; directly into their component CSS.

When your app switches to dark mode, that 85% lightness gray becomes a glaring, dominant bright line that ruins the dark UI ergonomics.

The Fix: Never hardcode this hex. Always map it to a semantic CSS variable or a design token.

CSS`/* ❌ Bad Practice */.card { border: 1px solid #d9d9d9; }

/* ✅ Good Practice /:root {–color-border-subtle: #d9d9d9;}@media (prefers-color-scheme: dark) {:root {–color-border-subtle: #3d3d3d; / Adjusted for dark mode */`}}.card { border: 1px solid var(–color-border-subtle); }

The Accessibility (a11y) TrapA lot of devs layer #d9d9d9 backgrounds with #9e9e9e text to create a “subtle” disabled state. This combination completely fails WCAG AA standards. While pure black text on #d9d9d9 passes Lighthouse audits, using gray-on-gray is an accessibility anti-pattern. If you are using it for a disabled button, you must pair it with a secondary indicator (like cursor: not-allowed or a specific icon) because color-blind users might not see the difference.
Display P3 vs. sRGB RenderingDid you know #d9d9d9 looks completely different depending on the monitor? On modern MacBooks (which use the Display P3 color space), it looks sharp and cool. But on cheaper, uncalibrated TN panels (which many of your users have), it washes out and becomes almost indistinguishable from a white background (#ffffff).

The Ultimate #d9d9d9 Developer GuideHandling gray scales properly separates mid-level devs from senior frontend engineers.

I have written a massive, deep-dive guide on everything you need to know about #d9d9d9. It includes:

How to use it with OKLCH for uniform rendering.

The exact Tailwind CSS equivalents (gray-300).

Copy-paste platform codes for SwiftUI, Jetpack Compose, React Native, and Flutter.

👉 Read the Full Developer Guide on Hex #d9d9d9 Here

(Need to quickly convert #d9d9d9 to RGB, HSL, or CMYK for your current project? Check out our (free Hex to RGB Converter tool as well)“

Source link

TECH & AI

Properties of scroll-timeline: creating animations on scroll without JavaScript

jackminion May 16, 2026 0

Stop Using JS for Scroll Animations: Meet Scroll-Timeline

Grab a coffee, friend. We need to talk about that heavy JavaScript library you are probably using just to make a header shrink or a progress bar move. It is 2026, and the days of hijacking the main thread with scroll listeners are officially over. We finally have scroll-timeline, and it is a total game-changer for both performance and developer sanity. Imagine creating complex parallax effects with the same ease as a simple hover transition.

How we suffered before

Remember the struggle? To create a simple parallax effect or a reading indicator, we had to attach an event listener to the window scroll. Then came the “scroll-jank” – that stuttering mess when the browser could not keep up with the JavaScript calculations and the rendering at the same time. We tried to fix it with requestAnimationFrame, debouncing functions, or bringing in heavy-duty libraries like ScrollMagic or GSAP. While those tools are powerful, they are often overkill for simple UI polish. We even spent time styling the scrollbar in all modern browsers just to make things look cohesive, but the logic remained bulky and JS-dependent. It was a lot of code for something that should have been native.

The modern way in 2026

Now, we have CSS Scroll-driven Animations. The core idea is simple: instead of an animation progressing over time (seconds), it progresses over scroll distance (pixels or percentage). Using scroll-timeline, we can define a named timeline on a scrollable container. Then, we link any element’s animation to that timeline using animation-timeline. It is declarative, it is readable, and most importantly, it runs off the main thread. If you have already mastered managing scroll behavior with overscroll-behavior, this is the natural next step in your CSS journey. You are no longer calculating offsets; you are just describing how things should look at the start and end of the scroll.

Ready-to-use code snippet

Here is a classic example: a reading progress bar that grows as you scroll down the page. Notice how we do not need a single line of script to make this happen.

/* 1. Define the animation as you normally would */
@keyframes grow-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}

/* 2. Setup the scroll container and name the timeline */
body {
scroll-timeline-name: –reading-timeline;
scroll-timeline-axis: block; /* ‘block’ refers to the vertical scroll axis */
}

/* 3. Link the progress bar element to the scroll timeline */
.progress-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 8px;
background: #ff4757;
transform-origin: 0 50%;
z-index: 100;

/* The magic happens here: no duration in seconds, but ‘auto’ */
animation: grow-progress auto linear;
animation-timeline: –reading-timeline;
}

Common beginner mistake

The most common pitfall is forgetting the animation-duration. Even though the animation is driven by scrolling and not time, the CSS specification still requires a duration value (set to auto or any time value like 1s) for the animation to actually initialize. If you omit it, your animation might just sit there doing nothing, leaving you scratching your head. Also, ensure your scroll-timeline-name is defined on an actual scrollable parent; if the container does not have overflow: auto or scroll (or it is the body), the timeline will not have any range to work with and your animation will stay stuck at the first frame.

🔥 We publish more advanced CSS tricks, ready-to-use snippets, and tutorials in our Telegram channel. Subscribe so you don’t miss out!

Source link