Daily micro-tips for C#, SQL, performance, and scalable backend engineering.
📱 Responsive Grids, Zero Media Queries Media queries for every breakpoint? Tedious. Grid auto-fit/auto-fill creates responsive layouts automatically. Items reflow based on space available. The Magic Formula .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; } /* That’s it! Fully responsive without media queries Items wrap automatically based on available space */ 🎯 […]
📦 Responsive Components, Not Just Pages Media queries check viewport width. Component in sidebar? Full width? Same breakpoint fails. Container queries check parent width. The Problem with Media Queries ❌ Media Queries /* Card component */ .card { display: flex; } @media (max-width: 768px) { .card { flex-direction: column; /* Stack on mobile */ } […]
📏 Fluid Typography That Just Works Writing 5 media queries for font sizes? clamp() does it in one line. Responsive typography perfected. The Old Way (Painful) h1 { font-size: 24px; } @media (min-width: 640px) { h1 { font-size: 32px; } } @media (min-width: 768px) { h1 { font-size: 40px; } } @media (min-width: 1024px) { […]
Need to style parent based on child? Impossible in CSS. Was. /* Style form if it has an error */ form:has(.error) { border: 2px solid red; } /* Style card if image is loading */ .card:has(img[loading]) { opacity: 0.5; } /* Style container if checkbox is checked */ .container:has(input:checked) { background: green; } Browser Support: […]
🎯 Cascade Control !important is tech debt. @layer organizes CSS priority cleanly. @layer reset, base, components, utilities; @layer reset { * { margin: 0; padding: 0; } } @layer base { body { font-family: sans-serif; } } @layer components { .button { background: blue; } } @layer utilities { .mt-4 { margin-top: 1rem; } } […]
The ‘Frosted Glass’ effect is everywhere in iOS and Windows. Here is the code to do it right. .glass-panel { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 15px; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); } Note: backdrop-filter is the magic property that blurs everything […]
Media queries react to the viewport. Container queries react to the parent element’s size. This is a revolution for component-based design. .card-container { container-type: inline-size; } @container (min-width: 400px) { .card { display: flex; flex-direction: row; } } Why? Now your card component can be placed in a sidebar or a main feed and it […]
Ever had a row of cards where the headers didn’t align because of text length? Subgrid solves the biggest headache in CSS Grid. .container { display: grid; grid-template-rows: repeat(3, auto); } .card { display: grid; grid-template-rows: subgrid; grid-row: span 3; } This tells the card to inherit the row sizing of its parent, ensuring all […]
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;