Daily micro-tips for C#, SQL, performance, and scalable backend engineering.
Default scrollbars often look ugly and clash with your design. Customize them with pure CSS. ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #3498db; border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: #2980b9; } Why? It’s a small detail that makes your web app feel ‘finished’ and high-end.
Before an image loads, the browser doesn’t know its height, causing the layout to ‘jump’ (Cumulative Layout Shift – CLS). This is bad for SEO. .video-container { width: 100%; aspect-ratio: 16 / 9; background: #eee; /* Placeholder */ } The Result: The browser reserves the space before the content arrives, resulting in a smooth, professional […]
Stop hunting and replacing hex codes. Use :root variables for professional scalability. :root { –primary-color: #3498db; –spacing-unit: 1rem; } .card { padding: var(–spacing-unit); border: 2px solid var(–primary-color); } Result: To change your entire site’s branding, you only edit one line of code.
🎨 The Layout Revolution Flexbox was great. But CSS Grid + Subgrid? It’s game over. Layouts that took 200 lines of CSS now take 10. The Problem Subgrid Solves ❌ The Old Nightmare You have a card grid. Each card has a title, image, description, and button. You want all titles aligned, all images the […]
Writing the same selector multiple times is verbose. :is() groups them cleanly. Old Way (Verbose): header h1, header h2, header h3, footer h1, footer h2, footer h3 { color: blue; } With :is(): :is(header, footer) :is(h1, h2, h3) { color: blue; } :where() vs :is(): Same syntax, but :where() has 0 specificity (won’t override other […]
For decades, we designed based on the viewport. But components should be responsive based on their container. .card-container { container-type: inline-size; } @container (min-width: 400px) { .card { display: flex; } } This allows a component to look different depending on whether it’s in a narrow sidebar or a wide main content area. A total […]
Stop using heavy JS sliders. Use pure CSS to make your image galleries feel like a mobile app. .container { scroll-snap-type: x mandatory; overflow-x: scroll; display: flex; } .item { scroll-snap-align: center; flex: 0 0 100%; } Result: Smooth, flick-to-scroll galleries that work perfectly on touch screens.
Aligning elements inside nested components was nearly impossible until CSS Subgrid arrived. .parent { display: grid; grid-template-columns: 1fr 2fr 1fr; } .child { grid-column: 1 / 4; display: grid; grid-template-columns: subgrid; } Now, the child’s items will align perfectly with the parent’s columns. Professional, pixel-perfect layout achieved.
Achieve the frosted glass look used in iOS and Windows 11 using pure CSS. .glass-card { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 15px; }
Browsers optimize animations better when they know about them in advance. will-change hints at upcoming changes. Without Optimization: .box:hover { transform: scale(1.2); /* Browser not prepared, may cause janky animation */ } With will-change: .box { will-change: transform; /* Browser prepares for transform changes */ } .box:hover { transform: scale(1.2); /* Smooth animation – browser […]
Headlines with one word on last line look unprofessional. text-wrap: balance distributes text evenly across lines. The Problem: This is a Long Heading That Ends With Just One Awkward Word Alone The Fix: h1, h2, h3 { text-wrap: balance; } Result: This is a Long Heading That Ends Much More Nicely Balanced Also Available: p […]
:focus shows outline on mouse clicks (annoying). :focus-visible shows only for keyboard navigation. Old Way (:focus): button:focus { outline: 2px solid blue; } /* Problem: Shows outline when clicked with mouse Users disable it: outline: none; (BAD for accessibility!) */ Better Way (:focus-visible): button:focus { outline: none; /* Remove default */ } button:focus-visible { outline: […]
Media queries for every screen size is tedious. CSS Grid auto-fit + minmax creates responsive layouts automatically. Traditional Responsive: .grid { display: grid; grid-template-columns: repeat(4, 1fr); } @media (max-width: 1200px) { .grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .grid { […]
Changing colors throughout CSS is tedious. CSS variables centralize values for easy updates. Define Variables: :root { –primary-color: #3498db; –secondary-color: #2ecc71; –font-size-base: 16px; –spacing-unit: 8px; } Use Variables: button { background: var(–primary-color); font-size: var(–font-size-base); padding: calc(var(–spacing-unit) * 2); } Dynamic Theming: /* Light theme (default) */ :root { –bg-color: white; –text-color: black; } /* Dark […]
Setting font sizes for mobile, tablet, desktop with media queries is tedious. clamp() does it automatically. Old Way – Multiple Media Queries: h1 { font-size: 24px; } @media (min-width: 768px) { h1 { font-size: 32px; } } @media (min-width: 1200px) { h1 { font-size: 48px; } } New Way – One Line: h1 { font-size: […]
Always wanted to style parent based on what’s inside? CSS :has() makes it possible – no JavaScript needed. Example – Highlight Card If It Has Sale Badge: /* Style card differently if it contains .sale badge */ .card:has(.sale) { border: 3px solid red; background: #fff3f3; } More Examples: /* Form with errors gets red border […]
Maintaining aspect ratios with padding-bottom: 56.25% trick is outdated. Use aspect-ratio property. Old Way: .video-container { position: relative; padding-bottom: 56.25%; /* 16:9 ratio */ height: 0; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } New Way: .video-container { aspect-ratio: 16 / 9; } That’s it! Works for any […]
Still struggling with float and position hacks? CSS Grid simplifies complex layouts with clean, maintainable code. The Grid vs Flexbox Decision Tree: /* When to use Grid vs Flexbox: */ /* USE GRID WHEN: */ /* 1. Two-dimensional layouts (rows AND columns) */ /* 2. You need precise control over both axes */ /* 3. […]
Loading spinners look outdated. Modern sites use skeleton screens that show content placeholders while data loads. Pure CSS, no libraries needed. The Basic Skeleton: .skeleton { background: linear-gradient( 90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75% ); background-size: 200% 100%; animation: loading 1.5s infinite; border-radius: 4px; } @keyframes loading { 0% { background-position: 200% 0; } […]
Page navigation feels jarring? The new CSS View Transitions API creates native app-like transitions without a single line of JavaScript. The Basic Setup: /* Enable view transitions for all navigations */ @view-transition { navigation: auto; } /* Customize the transition */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.3s; animation-timing-function: ease-in-out; } /* Fade effect */ ::view-transition-old(root) { […]
Most people blame the browser.The real reason is parent overflow context. Problem .sidebar { position: sticky; top: 0; } Works… until it doesn’t. Hidden cause If ANY parent has: overflow: hidden; overflow: auto; overflow: scroll; Sticky breaks. Why position: sticky is calculated relative to the nearest scroll container, not the viewport. Fix .parent { overflow: […]
Animations look fine on desktop… then stutter on phones. Root cause Animating layout-triggering properties: width height top / left Correct approach Only animate GPU-friendly properties. transform: translateX(); opacity: 0.9;
Sticky works… until it doesn’t. Actual rules Parent must NOT have overflow: hidden|auto|scroll Sticky only works within scroll container Z-index context matters Fix Move sticky element outside overflow containers.
:where(button) { margin: 0; } Why it mattersStyle globally without specificity wars.
.video { aspect-ratio: 16 / 9; } Why it mattersCleaner layouts, zero JS.
font-size: clamp(1rem, 2vw, 1.5rem); Why it mattersOne rule replaces media queries.
Margins break when layouts change direction. .container { display: flex; gap: 16px; } Why this mattersCleaner CSS, fewer overrides, better responsive behavior.
The issue is usually layout reflow, not position: sticky. header { position: sticky; top: 0; will-change: transform; } Why this workswill-change hints the browser to optimize rendering early.
UI feels heavy. Why it happensAnimating layout properties. Why it mattersBad UX on mobile. Vital fix Use transform & opacity only
Desktop perfect, mobile chaos. Why it happensFixed widths ignore viewport. Why it mattersMobile users bounce. Smart fixUse min() and max(). .container { width: min(100%, 1200px); }