Article Archives


Drag and Drop File Uploading

The following is a guest post by Osvaldas Valutis. Osvaldas is going to show us not only how drag and drop file uploading works, but goes over what nice UI and UX for it can be, browser support, and how to approach it from a progressive enhancement standpoint.

40% Sale in the Shop

Have you been trying to find some kind of SALE happening online today, but coming up empty handed? We have some CSS-Tricks T-Shirts and hoodies in the store at 40% off (use coupon code trikzare4kids) now through Monday.

If you're size Small or XXL/XXXL, most of the designs are available. If you're Medium or Large, not so much, but we hope to have some kind of new fun merch soon.…

Rolling Out Responsive

Redesigning a site with responsive design? The tech stuff can be challenging, but easy compared to the decision-making, process-defining, and organization-wrangling before you even get there. Karen McGrane has a new book on all this stuff called Going Responsive, and this link post links to Chapter 2 of that, published on A List Part.

In other book news, Christopher Schmitt is working on a book around one of those rollout options: retrofitting. And there is a new Ethan …


A New Responsive Font Format for the Web

Nick Sherman gave a fascinating talk at Ampersand earlier this month which was based on an article he wrote called Variable Fonts for Responsive Design. In both the talk and the essay he suggests that we need a new font format to solve complex responsive design problems:

…the glyph shapes in modern fonts are restricted to a single, static configuration. Any variation in weight, width, stroke contrast, etc.—no matter how subtle—requires separate font files. This concept may not seem …


Scaled/Proportional Content with CSS and JavaScript

The web is a fluid place. Different sized screens, yadda yadda yadda. Fortunately for us, the web is ready for it. Text wraps. CSS gives us control over how to size things. What we don't get (easily, anyway) is a way to scale whole element (and it's children) proportionally—retaining its exact layout as it changes size.

We can do it though.…

WPO stats

WPO, as in, "Web Performance Optimizations", I believe.

Case studies and experiments demonstrating the impact of performance optimization on user experience and business metrics.

Real companies, real performance changes, real impact. Ya know, Little things like:

Staples reduced median homepage load time by 1 second and reduced load time for the 98th percentile by 6 seconds. As a result, they saw a 10% increase in their conversion rate.…

Animate box-shadow with Silky Smooth Performance

Neat trick by Tobias Ahlin:

How do you animate the box-shadow property in CSS without causing re-paints on every frame, and heavily impacting the performance of your page? Short answer: you don’t. Animating a change of box-shadow will hurt performance.

There’s an easy way of mimicking the same effect, however, with minimal re-paints, that should let your animations run at a solid 60 FPS: animate the opacity of a pseudo element.…


Pretty bold step for WordPress. Totally new UI. Totally new technologies. No more PHP and MySQL, it's Node.js, React, Flux, Babel, Webpack... the fanciest of fancy modern tooling. Still completely open source.

Matt Mullenweg:

On one hand it seems risky. How much of WordPress' success is based on the epic backwards compatibility and ability to run on nearly any server? Will this ever become the self-hosted variant? At the moment, they are saying "Install JetPack and you can …


On Keeping Breakpoints DRY

The following is a guest post by Eduardo Bouças. Eduardo is back to follow up on his journey of approaching media queries programatically. He'll catch you up on how this started, where it's went, and how that's going.


Creating an Animated Menu Indicator with CSS Selectors

The following article is by James Nowland, a front end developer for Headjam, a creative agency in Newcastle, Australia. James has created a fairly simple little effect here, but one that you might think would require a little JavaScript. Instead, it uses some clever selector usage.


The Cost of Frameworks Recap

A classic blog-and-forth, my favorite form of internet discussion.

Paul Lewis does some research on the performance of differnet frameworks, pitting each of their TodoMVC versions against one another:

For me the results are pretty clear: there appears to be a pretty hefty tax to using Frameworks on mobile, especially compared to writing vanilla JavaScript.

Tom Dale:

Most critics miss the key [value to using a framework]: frameworks let you manage the complexity of your application as it and

Sponsored: Learn by Doing with Code School

Join over 1 million students who are learning by doing with Code School. With more than 50 courses covering JavaScript, HTML/CSS, Ruby, Git, iOS, Database, and more, Code School pairs experienced instructors with engaging content.

How Our CSS Framework Helps Enforce Accessibility

Ian McBurnie:

A user interface control not only needs to look like a certain control, it must be described as that control too.

What if we could also write our CSS framework in a way that acts as another layer in our line of defense? Read on to find out how!

One of the tricks:

[role=button].btn { /* Gotta be the right role before it gets the styles */ }

Dear CSS-Tricks Reader, Who Are You?

I'd love to gather some anonymous aggregate information about all y'all who read CSS-Tricks. In part, to help guide upcoming content. Also just because it's fun and it will be interesting data for us all to look at.…


Visual Regression Testing with PhantomCSS

The following is a guest post by Jon Bellah, a Lead Front End Engineer at 10up. Jon reached out to us about writing on the idea of visual regression testing, which is a form of CSS testing (i.e. making sure you don't screw up your site by accident). I thought the use-case was particularly interesting: re-architecting CSS (converting to Sass, splitting up files, etc) and making sure there wasn't regressions during that process. Here Jon will go into


Loading Web Fonts with the Web Font Loader

Several years ago the consensus on font loading in the community was that, as a website loads, all fonts should be hidden until the correct resources have been downloaded. Many designers and developers argued that the default font loading method called the “Flash of Unstyled Text”, or FOUT, was an annoyance to users. This is when the fallback web font, say Georgia, is shown on screen first then replaced by a custom font when it loaded. They argued that it …


Recreating the Google Logo Animation with SVG and GreenSock

The following is a guest post by Petr Tichy. Petr writes a lot about animation, interaction, and SVG, so I'm excited to have him here to share some of that expertise with such a fun demo. It's an animation I bet a lot of you have seen before, but feels kinda magical perhaps outside of what it feels like we can do on the web. Like was created by video artists / video editing software. But nope, SVG-can-do-that.


Making a Simple Site Work Offline with ServiceWorker

When Nicolas Bevacqua (of Pony Foo) started talking about a potential guest post, I knew right away we should do something with offline. Nicolas has been writing a lot about the ServiceWorker API and offline stuff is one of the things it was made for. Rather than a theoretical look with code snippets, I thought we could combine that with a demo website with it all working. So that's what we did - take it away Nicolas!


CSS Wisdom from Goofus and Gallant

I found some old Highlights magazines and these Goofus and Gallant characters sure had some prescient wisdom to share.…


The Making of the CSS-Tricks Logo Easter Egg Animation

When Chris first started the CSS-Tricks redesign, he came to me with some screenshots of the direction it was headed in, and suggested that I make an animation for the logo as part of the design refresh. I was excited about this project, and my mind immediately started to shuffle through possible animation and interaction.

I’ve been working a ton with the GreenSock Animation Platform and SVG lately. If you are not aware of it, is worth checking out. It’s …

Sponsored: Build Next-Generation Mobile Apps with Telerik Platform

Creating the best user experience for your mobile apps is critical to their success. But time constraints and limited resources sometimes force you to compromise. It shouldn’t have to be a tradeoff. Telerik Platform 2.0 changes the game in mobile app development, enabling you to build beautiful apps with a rich user experience, fast and efficiently.

Join Telerik on Thursday, Dec 3, 11 a.m. ET, as we show you how you can build the next generation of mobile apps …


Posting Code Blocks on a WordPress Site

Originally published in February 2014, now updated/corrected/expanded.

So you've installed WordPress and want to blog about code. Yay! You're a hero and I thank on behalf of myself an coders everywhere. Here's what you'll need to do and think about to actually get publishing blocks of code.…

Do We Actually Need Specificity In CSS?

Philip Walton:

While it’s not possible to simply instruct the browser to ignore specificity altogether, it is possible to prevent specificity from affecting the cascade for a particular CSS file or set of CSS files.

How? The answer is to make specificity and source order the same.

Imagine a stylesheet in which all rules were ordered from least specific to most specific. In such a stylesheet, since the specificity of the rules also corresponds to the source order or the …


The Image Replacement Museum

CSS image replacement is a technique of replacing a text element (usually a header tag like an <h1></h1>) with an image (often a logo). It has its origins in the time before web fonts and SVG. For years, web developers battled against browser inconsistencies to craft image replacement techniques that struck the right balance between design and accessibility.

Now that web fonts and SVG do much more of the heavy lifting for stylized text on the web, these techniques …


Throttling the Network in Chrome DevTools

The Network tab in Chrome DevTools has an option to faux throttle your network, so you can experience what your users might experience visiting your website on 3G, 2G and GPRS connections. Besides the obvious, it's also useful for visualising how fonts load.

Here’s how to do it in Chrome v.46:

  1. Open DevTools (cmd + alt + i)
  2. Click the ‘Network’ tab
  3. Select which type of connection you want to imitate
  4. Reload the page to see assets downloading at that

font: caption;

Joe Richardson shared this little trick over on CodePen:

body { /* operating system font */ font: caption; }
  • If you're on Ubuntu this will be the Ubuntu Font.
  • If you're on Yosemite this will be Helvetica.
  • If you're on El Capitan this will be San Francisco.
  • If you're on Microsoft this will be Segoe UI.

Not entirely sure the support of this, but if it works for your needs it's a lot easier than declaring them directly or …


Background Image Shapes

The following is a guest post by Joe Markevicius. Joe had a particular design he needed to implement for the BFI's Britain on Film website. Like a true front end developer, Joe considered the requirements and went through many different options to find the best approach. He'll take us through that journey here. I don't know about you but I love this kind of thing.

one comment

Fresh SVG Talks

I'm just back from CSS Dev Conf (Dave and I wrapped it up over on ShopTalk) and it was a pleasant surprise for me to have seen four (!) SVG talks back-to-back on the first day. Just a little confirmation SVG is a hot topic these days. Anytime anyone asked the room who was using SVG, nearly every hand in the room went up. Here's the presentations:

  1. Sara Soueidan (@SaraSoueidan): SVG For Web Designers (and Developers)
  2. Brenda

Sponsored: Syncano – Database. Backend. Middleware. Real-time. Microservices. All in one place.

Syncano is a backend platform to build powerful real-time apps more efficiently. Customize your backend with several different modules and minimize boilerplate code. Define your data schema, add real-time communication, integrate with any API, add microservice-like functionality without setting up a server or building out a custom API route, and more - all from one place. Get started with our Rest API or one of our open source libraries. Start building, take the time you need, and pay only when …

Embracing the Network

Patrick Hamann in a fast-paced talk on avoiding single points of failure. He suggests:

Developers at the Financial Times managed to shave 1.5s off the total download time by providing users with assets served over HTTP/2. I think this suggests just how different the future of performance and optimisation is going to look.

Related: Facebook has …

Redesigning The Toast

Karen McGrane tweets, dreamteam assembles, epic redesign ensues, story of entire process published.

Some minor nuggets #RelevantToMyInterets:

  • A big part of the effort was content strategy and taxonomy work. Cleaning up the tag and category system (and actually inventing different types of tags) meant they could offer many more interesting ways to browse the site.
  • They stayed on WordPress. They don't have too much positive to say about it, but I suspect it's about like this. They are

Conference Talk → Web

Levels of awesomeness of what you can do with your presentation/slides:

  1. Not awesome: do nothing.
  2. Average: post your slides on something like Speaker Deck.
  3. A little awesome: make slides for the web in the first place, so they work on the web already.
  4. Very awesome: redesign your presentation for the web.

Scott Jehl just did this for his talk Delivering Responsibly and credits Frank Chimero (e.g. The Web's Grain) and Maciej Cegłowski (e.g. The Internet With A Human

Angled Edges with CSS Masks and Transforms

Jeremy Frank with a very simple and clever way to have elements not end perfectly horizontally, but at an angle:

.section { clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%); }

Just make sure there is enough bottom padding so nothing important gets cut off.…


CSSgram is a CSS library by Una Kravets recreating Instagram filters. The filters are pseudo elements on the <figure>, sitting on to of the <img>, using different gradients, opacities, and mix-blend-modes.

This continues her excellent work in experimenting with blend modes and filters, from vintage washouts to 3d image effects.…

Sponsor: Learn Web Design with Treehouse

Treehouse is structured, inexpensive, modern training to for learning how to be a web designer and developer. I love how they allow you learn in ways that match what you want to do. Wanna learn to build a game for iOS? They have a project you can do. Want to learn Ruby? That's a topic you can dig into. Want to learn what you need to become a web designer? That's a track.

Their Code Challenge Engine allows you …

ES6 Overview in 350 Bullet Points

Nicolas Bevacqua summarises everything ES6 with an invaluable list of each new feature and links to find more info about them:

My ES6 in Depth series consists of 24 articles covering most syntax changes and features coming in ES6. This article aims to summarize all of those, providing you with practical insight into most of ES6, so that you can quickly get started. I’ve also linked to the articles in ES6 in Depth so that you can easily go deeper …


A Brief History of People Being Mad About Inputs

Jonathan Gillette, "Textarea, You Are A Sunken Nothing", 2004:

Yes, I mean it, Textarea. You are a Sunken Nothing. You have a beveled edge, but you are a worthless thing to jot upon. Bad pad! BAD PAD!!


Do you accept tabs? Oop. Well, my premature article is published now.

You are the most popular text editor. You are the worst text editor. Even Notepad has search and replace. And I can make it bigger and smaller.

Kroc Camen, …


CSS-Tricks Chronicle XXIV

In which I blather about my recent trips and events, things going on here at CSS-Tricks, and over on CodePen and ShopTalk. A little about the big redesigns that have gone out. Probably a little oversharing.

Sponsor: UltraEdit – A Feature-Rich Text Editor

UltraEdit is a deeply customizable, lightning-fast and feature-rich text editor whose ability to open and edit large files is second to none. It's also edited code that’s been to Mars… but that’s all we’re allowed to say.

It's the web developer’s multi-tool. With features like integrated FTP, SSH and support for hundreds of languages, it’s the best you can get. Especially on Windows, where SSHing into your server normally requires a separate program.

Other features include file compare, code folding, …


Rendering SVG Paths in WebGL

The following is a guest post by Matt DesLauriers. Matt combined a bunch of techniques and open source modules to build an incredible demo where simple recognizable icons explode into vector triangles only to reform into a completely new icon. Here he talks about some of the tools and ideas involved in making it happen, but beyond that, other approaches and other related concepts. This is some pretty advanced stuff and I hope it turns on some mental lightbulbs


Dark Matter

The "Dark Matter Developer" moniker has been floating around for several years. Scott Hanselman introduced the term to describe developers who do not have active online or social personas:

They don't read a lot of blogs, they never write blogs, they don't go to user groups, they don't tweet or facebook, and you don't often see them at large conferences. Where are these dark matter developers online?…


Reverse Text Color Based on Background Color Automatically in CSS

Over the weekend I noticed an interesting design for a progress meter in a videogame. The % complete was listed in text in the middle of the bar and didn't move. But that text was the same color as the background of the bar that was filling up from left to right. It seemed like the background was going to make the text invisible once they overlapped, but instead, the text color reversed to be white instead anywhere it overlapped …

Sponsor: FullStory – let your customers show you how to improve

FullStory records each customer session exactly as it rendered in their browser – unlocking pixel-perfect playback, DOM and console inspection, searchability on any page element or interaction, and more.

Watch and understand how real users are interacting with your site. Go beyond analytics to see why customers aren't taking the expected actions, or troubleshoot problem sessions exactly as they occurred without needing to recreate the bug after the fact. See what it's like to get the full story with a

Responsive Images in WordPress Core

In April 2014 Tim Evko created a WordPress plugin that used the CMS's capabilities to make using responsive images much easier (just do what you were already doing, reap benefits). He wrote about it here. Later it became the official plugin of the RICG. Now a year and a half later it was merged into WordPress core (meaning when v4.4 drops, it will be in there). …


The WordPress Nav Walker Class: A Guided var_dump()

The following is a guest post by Scott Fennell. Scott is a WordPress theme & plugin developer in Anchorage, Alaska. Here, he customizes the default HTML output of WordPress' menu system to his liking, without damaging the useful things it already does.

There are many things about the WordPress nav menu system that I like, and a handful of things I really dislike. The things I dislike happen to trigger my pet peeves: Markup-bloat and non-SMACCS-ish class …

Windows Editors and Shells

Dave Rupert is switching to Windows in part because the web dev crowd is a little heavy on the Apple, which isn't true, generally, of the user's we build for.

But not only is he switching, he's documenting the important developer-y stuff that he's having to go through in the transition. …

We have a pretty good* newsletter.