My Website

Search

    CSS nuggets

    Center a wrapper

    Center a wrapper section. The first value is margin top and bottom. The second value provides auto to margin left and right.

     margin-inline auto;  

    [[Container query example]]

    Navbar wrapper

    <nav class="using-flex">
  <div class="branding-wrapper">logo</div>
  <div class="actions-wrapper">
	<div>action 1</div>
	<div>action 2</div>
	<div>action 3</div>
  </div>
</nav>

<nav class="using-grid-01">
  <div class="branding-wrapper">logo</div>
  <div class="actions-wrapper">
	<div>action 1</div>
	<div>action 2</div>
	<div>action 3</div>
  </div>
</nav>

<nav class="using-grid-02">
  <div class="branding-wrapper">logo</div>
  <div class="actions-wrapper">
	<div>action 1</div>
	<div>action 2</div>
	<div>action 3</div>
  </div>
</nav>

    nav.using-flex {
  display: flex;
  justify-content: space-between; /* Pushes children to opposite ends */
  align-items: center;           /* Vertically centers the items */
  padding: 10px 20px;            /* Optional: adds some breathing room */
}

.actions-wrapper {
  display: flex;                 /* Makes the action items sit side-by-side */
  gap: 15px;                     /* Adds spacing between action 1, 2, and 3 */
}

    Find overflow issues

    Kevin Powell

    *,
*::before,
*::after {
	outline: 2px solid lime;
	/* Shows layers */ 
	background: hsl(0 100% 50% / .1)
	
}

    Also, Chrome DevTools has a few specific features to help you identify overflowing elements. There isn't a "neon highlight" that stays on automatically, but there are three very effective ways to find them:

    1. The "scroll" Badge (Newer Versions)

    In the Elements panel (the DOM tree), Chrome automatically adds a small grey badge that says scroll next to any element that is a scroll container.

    • How to use it: Look down the tags in your DOM tree. If an element is causing a scroll, you will see a scroll badge next to the tag.
    • What it does: Clicking that badge doesn't highlight the overflow, but it helps you quickly identify which container is responsible for the scroll.

    2. The "Layout" Tab (Best for Overflows)

    If you want to see exactly how much an element is overflowing:

    1. Open DevTools and go to the Elements panel.
    2. In the bottom pane (where Styles/Computed are), look for the Layout tab.
    3. Under Scroll Snap, it lists elements that have scroll properties.
    4. More importantly, in the Styles pane, if a property (like width or flex-basis) is causing an element to overflow its parent, Chrome often shows a small info icon next to the property that says "This element is overflowing its container."

    3. Finding "Ghost" Horizontal Scroll (Console Snippet)

    If you have a horizontal scrollbar and you don't know which element is "poking out" and causing it, there isn't a specific button, but you can run this tiny script in the Console to instantly find the culprit:

    // This highlights any element that is wider than the screen in red
$$('*').forEach(el => {
  if (el.offsetWidth > document.documentElement.offsetWidth) {
    console.log(el);
    el.style.outline = '2px solid red';
  }
});

    4. The "Rendering" Tab (Scroll Performance)

    If you want to see where scroll-related areas are visually:

    1. Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows).
    2. Type "Show Rendering" and hit Enter.
    3. Check the box for Scrolling Performance Issues.
    4. This will highlight areas of the page in transparent green that might cause slow scrolling or have specific overflow logic.

    Summary: Which one should you use?

    • If you see a scrollbar and don't know why: Use the Console Snippet (#3).
    • If you want to see which container is scrollable: Look for the scroll badge in the DOM tree (#1).
    • If you want to know why it's overflowing: Check the Styles/Layout tabs (#2).

    Light/dark favicon

    Kevin Powell

    <link rel="icon" 
      href="/white-logo.png"
      media="(prefers-color-scheme: dark)" />
      
<link rel="icon"
      href="/black-logo.png"
      media="(prefers-color-scheme: light)"/>

    SVGs as favicons don't work in Safari

    Numeric type

    Kevin Powell

    Numeric input without spinners

    Read about the pattern attribute on MDN

    See this CodePen

    CSS modern reset

    In this video, Kevin Powell shares three modern CSS properties that he recommends adding to every project's reset to improve layout stability, responsiveness, and visual polish.

    html {
	min-block-size: 100svh;
}	

    min-block-size: 100svh;
display: grid;
grid-template-rows: auto 1fr auto;

    1. Setting a minimum height with 100svh (0:20 - 2:54): Instead of standard vh or dvh units, Kevin suggests using 100svh (small viewport height) for your min-block-size (or min-height). This prevents layout glitches and unexpected resizing on mobile devices when browser UI elements shift while scrolling, ensuring your hero sections and layouts remain consistent.

    html {
	scrollbar-gutter: stable;
}

    2. Using scrollbar-gutter: stable (2:55 - 4:49): To prevent the page layout from jumping horizontally when navigating between pages of different lengths, you should add scrollbar-gutter: stable to the html element. This reserves space for a scrollbar even on pages where one isn't needed, keeping your navigation and content perfectly aligned.

    html {
	interpolate-size: allow-keywords;
}

    3. Enabling interpolate-size: allow-keywords (4:50 - 8:55): For modern animations, adding interpolate-size: allow-keywords to your root element allows you to animate elements to intrinsic sizes like auto, fit-content, or min-content. Kevin demonstrates how this allows for smooth transitions when opening and closing and elements, which was previously difficult to animate without fixed heights.

    See this part of Kevin's video where he animates the detail/summary tags.

    color-scheme

    See this chunk of KP's video

    overscroll-behavior, caret, accent-color, place-content

    In this video, Kevin Powell shares several practical CSS tips that can help improve user experience, styling, and layout efficiency. Here is a summary of the techniques covered:

    • overscroll-behavior (0:21 - 2:32): Prevents the "scroll chaining" effect where scrolling inside a container continues to scroll the parent page. It is particularly useful for mobile touch interactions.
    • caret-color and caret-shape (2:30 - 4:35): Allows developers to customize the color of the text input cursor to match branding. The bonus tip, caret-shape, offers experimental control over the cursor's appearance (e.g., block, underscore).
    • accent-color (4:35 - 6:00): A simple way to apply brand colors to form elements like checkboxes and radio buttons. The browser automatically adjusts the checkmark color to maintain contrast.
    • color-scheme and light-dark() (6:00 - 9:30): Enables native dark mode support. Using color-scheme automatically updates user-agent styles for inputs and scrollbars, while the light-dark() function provides a way to define color values that adapt based on the user's system preference.
    • place-content (9:30 - 13:23): A powerful shorthand for centering elements. The video demonstrates using place-content: center with display: grid for easy layout alignment, and discusses how these alignment properties can also be applied to absolutely positioned elements.

    To easily center content

    display: grid;
place-content: center;

    selecting children

    .stuff {
	outline: 1px solid blue;
	
	/* select its children */
	& > * {
		...
	}
}

    autofit grid

    See this Kevin Powell video

    .auto-grid {
    --min-col-size: 300;
	display: grid;
	gap: irem;
	grid-template-columns :
	repeat(auto-fit, minmax(min(var(--min-col-size), 100%), 1fr));
}

    Adaptive layouts

    See this Kevin Powell video

    .sidebar-section { 
	container-type: inline-size;
}
.promo-list { 
	display: grid; gap: lrem;
	©container (width > 500px) {
		grid-template-columns: repeat(3, lfr);
	}			
}

    Scroll animation like the Mac toolbar

    See this Kevin Powell video

    Subgrid for vertical alignment in cards

    See CodePen

        <div class="lang-grid">
      <div class="lang-card encore revealx reveal-delay-2x">
        <div class="lang-icon encore">RPG</div>
        <h3>Encore RPG</h3>
        <p>
          An RPG-like syntax that compiles to .NET. Encore is a powerful
          short-term bridge — letting your RPG team remain productive while
          learning the .NET platform at their own pace.
        </p>
        <ul>
          <li>Familiar syntax for RPG programmers</li>
          <li>Runs natively on .NET</li>
          <li>Convert to C# anytime — with virtually no friction</li>
          <li>A strategic stepping stone, not a dead end</li>
        </ul>
      </div>
      <div class="lang-card csharp revealx reveal-delay-1x">
        <div class="lang-icon csharp">C#</div>
        <h3>Microsoft C#</h3>
        <p>
          The long-term target for most shops. Modern, widely supported, with a
          vast developer community. Your migrated application runs as native
          .NET with full access to the Microsoft ecosystem.
        </p>
        <ul>
          <li>Massive developer talent pool</li>
          <li>Full .NET and Azure ecosystem access</li>
          <li>Long-term maintainability</li>
          <li>ASP.NET Razor UI layer</li>
        </ul>
      </div>
    </div>

    .lang-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: .8rem; 

  & * > * {
	 margin-block: 0; 
  }
		 
  @container (width <=  760px) {
	grid-template-columns: 1fr;
  }

  & div.lang-card {
	 display: grid;
	 /* 
		Set the card's display to grid and its grid-template-rows to subgrid. 
	 */
	 grid-template-rows: subgrid;
	 /* 
		Span the Correct Rows: Use grid-row: span X (where X is the number of
		internal elements) to ensure each card occupies the necessary parent tracks.
	 */
	 grid-row: span 4;
 } 
}

    5 underrated CS properties

    In this video, Kevin Powell covers five underrated but highly useful CSS properties that can help streamline development and improve UI quality.

    The five properties discussed are:

    1. CSS Counters (0:10 - 3:48): An effective way to number elements (like lists or section headers) dynamically without manual entry. Kevin explains how to use counter-reset and counter-increment alongside pseudo-elements to handle numbering automatically.

    2. user-select: none (3:49 - 5:39): A property used to prevent users from accidentally selecting text in specific UI elements (like buttons), which can improve the feel of interactive components.

    3. font-variant-numeric: tabular-nums (5:40 - 6:57): This setting ensures numbers have a consistent, monospace-like width, which is essential for aligning tabular data and improving readability.

    4. Multi-column Layout (6:58 - 10:52): A powerful tool for creating responsive columns of text using properties like column-width and column-gap. Kevin notes that this is often overlooked for simple layouts and mentions the future potential of 'gap decorations' for Grid and Flexbox.

    5. Text Decoration Styling (10:53 - 13:42): Kevin moves beyond basic underlines to explore granular control over links, including text-decoration-thickness, text-underline-offset, and custom styles (like wavy lines), allowing for more polished design details.