Search
Fixed Headers and Jump Links? The Solution is scroll-margin-top
21.2.2020
The problem: you click a jump link like <a href="#header-3">Jump</a> which links to something like <h3 id="header-3">Header</h3>. That's totally fine, until you have a position: fixed; header at the top of the page obscuring the header you're trying to link to!
Fixed...
Freezing User-Agent Strings
3.2.2020
There's been news about Chrome freezing their User-Agent string (and all other major browsers are on board). That means they'll still have a User-Agent (UA) string (that comes across in headers and is available in JavaScript as navigator.userAgent. By freezing it, it will be less useful over time...
Quick Gulp Cache Busting
7.8.2019
You should for sure be setting far-out cache headers on your assets like CSS and JavaScript (and images and fonts and whatever else). That tells the browser "hang on to this file basically forever." That way, when navigating from page to page on a site — or revisiting it, or refreshing...
Position Sticky and Table Headers
13.7.2019
You can't position: sticky; a <thead>. Nor a <tr>. But you can sticky a <th>, which means you can make sticky headers inside a regular ol' <table>. This is tricky stuff, because if you didn't know this weird quirk, it would be hard to blame you. It makes way more...
Collective #511
25.4.2019
bento-starter * HTTP headers for the responsible developer * The CSS Handbook * Sortraits * Widget of the Week
Collective #511 was written by Pedro Botelho and published on Codrops
Fixed Headers, On-Page Links, and Overlapping Content, Oh My!
3.4.2019
Let's take a basic on-page link:
<a href="#section-two">Section Two</a>
When clicked, the browser will scroll itself to the element with that ID: <section id="section-two"></section>. A browser feature as old as browsers themselves, just about.
But as soon as...
Solved With CSS! Dropdown Menus
1.5.2018
A common UI pattern that we see on the web are dropdown menus. They’re used to display related information in pieces, without overwhelming the user with buttons, text, and options. Somewhere that we see these a lot is inside of headers or navigation areas on websites.
Let’s see if we can make...