Author: Chris Coyier

Let’s Say You Were Going to Write a Blog Post About Dark Mode

This is not that blog post. I’m saying let’s say you were. This is not a knock any other blog posts out there about Dark Mode. There are lots of good ones, and I’m a fan of any information-sharing blog post. This is more of a thought exercise on what I think it would take […]

Pages for Likes | CSS-Tricks

I posted about parsing an RSS feed in JavaScript the other day. I also posted about my RSS setup talking about how Feedbin is at the heart of it. Dave discovered that Feedbin can also produce an RSS feed for all your likes. Likes is a feature of Feedbin, and fortunately also NetNewsWire, which syncs […]

Gutenberging | CSS-Tricks

It’s been over a year since the big WordPress launch of Gutenberg, the new editor. It seems to me most of the controversy around it has died down. There has been enough time that the UX and accessibility of it have improved, and people are seeing the potential a lot more clearly. There ain’t no […]

iOS 13 Design Guidelines, Templates, and Downloads – Learn UI Design

Maybe you’ve never designed an iPhone app, and have no idea where to begin. Maybe you’ve designed a dozen, but still want one place to reference best practices. Heaven knows Apple’s Human Interface Guidelines are awful to try and read. Either way, this is the guide for you. I cover basically everything you need to […]

Fixed Headers and Jump Links? The Solution is scroll-margin-top

The problem: you click a jump link like Jump which links to something like Header . 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 headers have a nasty habit of hiding the element you’re trying to link to. […]

Animate SVG Path Changes in CSS

Every once in a while I’m motivated to attempt to draw some shapes with , the all-powerful drawing syntax of SVG. I only understand a fragment of what it all can do, but I know enough to be dangerous. All the straight-line syntax commands (like L) are pretty straightforward and I find the curved Q […]

Footnote Characters | CSS-Tricks

There are special superset number characters that are sometimes perfect for footnotes. Here they are: ¹ ² ³ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ I generally prefer to superscript the number myself, like: This next word1 has a footnote. That way I can select it in CSS or JavaScript in case I want to do […]

monica.css – Monica Dinculescu

February 19, 2020 Back in the day when I worked on Polymer I got used to relying on a bunch of useful CSS classes that at the time we called iron-flex-layout. They were there partly because flexbox was a sadness on IE and you needed to say everything 3 times to maybe get it right […]

Finally, a CSS only solution to :hover on touchscreens

There have been problems with the :hover pseudo-class ever since the first web browser was installed on a touchscreen device. Of course there were solutions, but none of those were the solution. With the new Level 4 Media Queries, this issue seems like it’s solved for good. So let’s say you simply added a :hover […]

Centering a div That Maintains Aspect-Ratio When There’s Body Margin

Andrew Welch had a little CSS challenge the other day to make an ordinary div: • centered vertically + horizontally• scales to fit the viewport w/ a margin around it• maintains an arbitrary aspect ratio• No JS There’s a video in that tweet if it helps you visualize the challenge. I saw Paul Bakaus blogging […]