CSS Tricks

The process of a web browser turning HTML, CSS, and JavaScript into a finished visual representation is quite complex and involves a good bit of magic. Here’s a simplified set of steps the browser goes through: Browser creates the DOM and CSSOM. Browser creates the render tree, where the DOM and styles from the CSSOM are taken into account (display: none elements are avoided). Browser computes the geometry of the layout and its elements based on the render tree. Browser paints pixel by pixel to create the visual representation we see on the screen. In this article, I'd like to focus on the last part: painting. All of those steps combined is a lot of work for a browser to do on load... and actually, not just on load, but any time the DOM (or CSSOM) is changed. That’s why many web develope...

Just like the title says! Here's a sidebar navigation bar that... Uses sticky positioning. It stays on the screen when it can, but won't overlap the header, footer, or ever make any of it's links inaccessible. Scrolls smoothly to the sections you click to. Activates the current nav based on scroll position (it's a single page thing). See the Pen Sticky, Smooth, Active Nav by Chris Coyier (@chriscoyier) on CodePen. Sticky It's easy to toss position: sticky; top: 0; on something. But for it to work, it's gotta be within a taller parent element. So, the unordered list (<ul>) within the navigation (<nav>) works great here. Thanks to the CSS grid layout, the <nav> is as tall as the <main> content area. However, note that that we also gotta position: -webkit-sticky; for...

I love shopping online. I can find what I need and get most things for a decent price. I am Nigerian currently working and studying in India, and two things I dread when shopping online are: Filling out a credit card form Filling out shipping and billing address forms Maybe I’m just lazy, but these things are not without challenges! For the first one, thanks to payment processing services like PayPal and e-wallets, I neither have to type in my 12-digit credit card number for every new e-commerce site I visit, nor have to save my credit card details with them. For the second, the only time-saving option given by most shopping websites is to save your shipping address, but you still have to fill the form (arrghh!). This is where the challenge is. I've had most of my orders returned because ...

If you are new to React, and perhaps have only played with building to-do and counter apps, you may not yet have run across a need to pull in data for your app. There will likely come a time when you’ll need to do this, as React apps are most well suited for situations where you’re handling both data and state. The first set of data you may need to handle might be hard-coded into your React application, like we did for this demo from our Error Boundary tutorial: See the Pen error boundary 0 by Kingsley Silas Chijioke (@kinsomicrote) on CodePen. What if you want to handle data from an API? That's the purpose of this tutorial. Specifically, we'll make use of the Fetch API and axios as examples for how to request and use data. The Fetch API The Fetch API provides an interface for fetching re...

I am a VS Code extension snob. I like to hunt down the most obscure extensions for VS Code — the ones that nobody knows about — and impress people at parties with my knowledge of finely aged and little-known VS Code capabilities… then watch as they look around desperately for someone else to talk to. It’s like the “Sideways” of VS Code. In my endless pursuit of the perfect VS Code setup, I reached out to my colleagues here on the Azure team and asked them to share their favorite extension in their own words. So clear your pallet and breathe in the aromatic flavors of productivity; I am your VS Code Extension Sommelier. Christina Warren - Settings Sync I cannot live without this extension. If you use multiple machines (especially on multiple platforms, where a sym-linked Dropbox folder won...

I'm sure a lot of you are like me and have switched code editors a number of times. I think my first major editor was Coda. Then I moved to TextMate when I started working primarily on local. Then Sublime Text. And, most recently, VS Code. I bet your journey was different. I know lots of folks that quite love Atom, Brackets, WebStorm, and even BBedit. You do you! For me, that's four changes in a dozen years, or a change every three years. Moving isn't something I do quickly. Here's a collection of thoughts around the idea of changing editors. When moving, I have to take time to make sure it works pretty much like the old one. Otherwise, I'll just end up disliking it to the point that I switch back a day or two later. It's happened to me every time I switch. I have little false-starts afte...

Viewport units have always been controversial and some of that is because of how mobile browsers have made things more complicated by having their own opinions about how to implement them. Case in point: should the scrollbar be taken into account for the vw unit? What about a site's navigation or page controls — should those count in the calculation? Then there are physical attributes of the devices themselves (hello, notch!) that can't be overlooked. First, a little context The spec is pretty vague about how viewport units should be calculated. With mobile devices, we're often concerned with the vertical height, so let's look specifically at viewport height (vh): vh unit Equal to 1% of the height of the initial containing block. So yeah, no clear guidance there when it comes to handling ...

Here's a little example that Jeremy Keith used to use in his talks. It's stuck with me as one of the coolest examples of progressive enhancement and Technology Being CoolTM around. There is this musical notation format called abc. They don't capitalize it. Kinda like npm, which I guess makes sense as it isn't an acronym. But it is the name of something so it's super awkward. Ughakdhk. Anyway. The format itself is really cool. It's super simple and text-based. Here's the example from their homepage: X:1 T:Speed the Plough M:4/4 C:Trad. K:G |:GABc dedB|dedB dedB|c2ec B2dB|c2A2 A2BA| GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:| |:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df| g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:| A little like YAML, I suppose. That's the music for that whole song. It's not loade...

A reader wrote in to tell me we should update our articles about SVG <use> elements. The attribute we always use for them, xlink:href, is deprecated. Indeed, MDN says: That's pretty strong language, hence the reader's warning. This is a bit surprising to me, as the SVG 2 thing got a little weird. It looks like it did become a Candidate Recommendation though. So... <!-- This is old --> <svg> <use xlink:href="#whatever" /> </svg> <!-- This is new --> <svg> <use href="#whatever" /> </svg> I like it. But does it actually work? Lemme fork my little old demo and change all the references. In a quick run through of what I have easy access to: Chrome 67 Firefox 61 Safari 11 Edge 17 IE 11 iOS 11 ✅ ✅ ?‍♂️ ✅ ✅ ?‍♂️ Better than I thought! But...