The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

Article Archives


Finding and Fixing Slow WordPress Database Queries

Slow SQL queries can crush your WordPress site's performance. Sometimes, slow queries are a result of poorly-formed SQL that never should have been done that way. And sometimes, slow queries were actually fast queries at one point—but as the site grew older, the query got slower and slower, unable to keep up with the expanding database.

Regardless of how your SQL got slow, let's take a look at a few ways to find and fix problem queries in WordPress.…

What is Code?

An epic piece by Paul Ford. I'll just pick one fun quote because why not.

There are 11 million professional software developers on earth, according to the research firm IDC. (An additional 7 million are hobbyists.) That's roughly the population of the greater Los Angeles metro area. Imagine all of L.A. programming. East Hollywood would be for Mac programmers, West L.A. for mobile, Beverly Hills for finance programmers, and all of Orange County for Windows.

What do you think front …

Importing CSS Breakpoints Into JavaScript

Say you need your JavaScript to do something when a CSS media query breakpoint changes. That's what matchMedia is for, but that isn't as supported as media queries are and requires you to maintain those breakpoints is both CSS and JS.

People have been inventing solutions for this for a while. Even right here on CSS-Tricks, like Enquire.js, an animations based technique that avoids resize events, and even utilizing Sass.

Mike Herchel's solution is to change the :before

Level 4 CSS Selectors

Louis Lazaris does a peak into the future of selectors (most of these aren't very well supported yet). Some of them I've seen and played with (e.g. :valid), and some were totally new to me (e.g. :focus-within which selects an input in focus and also the parent element).…

Sponsor: OSCON (Open Source Convention)

Five days at OSCON equal several years of on-the-job training--that's what OSCON attendees tell us. Hear from the best minds in technology. Learn insights and strategies for using the latest tools and technologies. Get exposure to the full stack, in all possible configurations, including Linux, MySQL, the LAMP stack, Perl, Python, Ruby on Rails, middleware, and applications. If software is what you do, OSCON is where you want to be.

OSCON takes place July 20 - 24 in Portland, OR. …


The Difference Between Throttling and Debouncing

I got these confused the other day and someone corrected me. So I tossed it on the ol' list of blog post ideas and here we are. Both of them are ways to limit the amount of JavaScript you are executing based on DOM events for performance reasons. But they are, you guessed it, different. …

Supercharging page load

Bask in 11 minutes of Jake Archibald weirdness charm while learning about what we need to be considering in terms of performance and how are built and respond to requests.…

Adders and logic gates in pure CSS

Experiment by Schabse Laks:

Silon is an experiment in the true power of CSS selectors. Most people would not expect CSS selectors to be capable of expressing arbitrary boolean logic. However, thanks to the sibling selector (AND), the comma selector (OR), and the :not() selector, this is actually completely possible.

To me the syntax looks more complicated than the CSS it compiles into, but hey I'm kind of a CSS guy.…

Against CSS in JS

Keith J Grant on the connection between HTML and JavaScript:

This coupling is real, and it is unavoidable. We must bind event listeners to elements on the page. We must update elements on the page from our JavaScript. Our code must interact bidirectionally and in real-time with the elements of the DOM.

And so:

... the mantra of React is to stop pretending the DOM and the JavaScript that controls it are separate concerns.


The relationship between CSS and …


Performance Tools

Weekend roundup time! From the multitude of Grunt and Gulp plugins to web apps that can help us visualize our websites with data, learning all the ins and outs of performance tooling is tough. I thought it might be useful to catalogue as many tools out there as I could find.…


Copy & Paste & The Web

Have you ever tried to copy and paste some text only to find it frustrating, awkward, or even impossible? I bet you have. It's not random. On the web, you have a decent amount of control over it. Let's just lay a bunch of stuff out there as food for thought.…

Viewport vs Percentage Units

Ire Aderinokun with a reminder that 100vw is sometimes wider than the viewable area (because scrollbars). The same is true for vh units, but it's rare websites have horizontal scrollbars.

But the best bit is about sizing images such that no matter the screen size there will be a position you can scroll to such that you can see the whole image. …

Web! What is it good for?

My favorite bit of Jeremy Keith's recent article is the third and fourth sentences:

I just can't get excited about the prospect of building something for any particular operating system, be it desktop or mobile. I think about the potential lifespan of what would be built and end up asking myself "why bother?"

The web fits my personality in that way, too. I like working on long term projects. Plugging away at making things better and finding success through time …

Sponsored: Win Cash in Spiceworks IT Platform App Contest

Build the next breakthrough app on the world's largest IT platform! Spiceworks is putting $65,000 in prizes up for grabs. You could win best app in four categories: inventory, help desk, fan favorite and top all-around. Winning apps will be featured exclusively in the Spiceworks App Center.

We've created a special frame template so that building an app in Spiceworks is as easy possible. See complete contest details. You can also check out app examples in the Spiceworks Community.

5 Minute Physics

I got to watch David DeSandro give this talk live at Code Genius last month, and thankfully it's online now. In five minutes, he shows how easily physics can be implemented in JavaScript in terms of moving things around in a natural feeling way. It's essentially what is behind David's Flickity library that he introduced here a few months ago.

The demos are on CodePen.…

Revisiting :Visited

Joel Califa:

An email client without read/unread functionality would be unacceptable, so why are we fine with a site without :visited styling?

I don't know if I feel that strongly about it. I think it's a context thing, similiar to when to use _blank. If there is a group of links that are rather list-like and it could be imagined a user would benefit from knowing which ones they have been to, by all means, add :visited styling. But …


Tools To Notify You When Dependencies Update

Any given website has, approximately, a whole bunch of dependencies. Take CodePen. The site is Ruby on Rails. Both Ruby and Rails are actively developed, versioned dependencies. There are a good 30+ gems in the project that help us do different internal things (e.g. process Sass into CSS) and user-facing things (e.g. process user-generated Markdown). Those gems are versioned dependencies. Not to mention front-end libraries we use. Not to mention Not to mention server-level software. Not to mention Node stuff.…


Getting Acquainted with Initial

If someone walked up to me the other day and asked me what the difference between inherit and initial is, I may have replied:

"What, there's a difference?"…

The End of Global CSS

Mark Dalgleish:

Every selector has the potential to have unintended side effects by targeting unwanted elements or clashing with other selectors. More surprisingly, our selectors may even lose out in the global specificity war, ultimately having little or no effect on the page at all.

Any time we make a change to a CSS file, we need to carefully consider the global environment in which our styles will sit. No other front end technology requires so much discipline just to …


Please Update Picturefill

The following is a guest post by Mat Marquis. Mat has a important PSA for us regarding responsive images.

I don't want to bury the lede: if you're using a version of Picturefill from prior to 2.3.1, please update right away—update your /lib files, file an issue on your project, or run a quick npm update picturefill and let your mind be set at ease. There haven't been any breaking changes in any version of Picturefill 2, so you …

On writing real CSS (again)

Cole Peters on the current pre-processor landscape and ditching Sass for PostCSS:

... here's what we gain by using PostCSS and cssnext, as compared to typical pre-processors:

  • extremely fast compilation times (in my example case, ~800% faster)
  • source code written in CSS, as defined by current and upcoming specs, which means:
  • no vendor-specific syntax (unless we write our own — be careful!), and thus:
  • source code that is immediately comprehensible to anyone with a half-decent understanding of CSS, and:
  • source

Color Filters Can Turn Your Gray Skies Blue

The following is a guest post by Amelia Bellamy-Royds. I've always enjoyed the "duotone" effect in photos. In Photoshop, you can create them by converting an image into grayscale mode, then into duotone. So the lights are "mapped" to one color, and the darks another. Not only does it look cool, but images with less colors are smaller in file size and thus good for performance. When I saw Amelia playing around with this programatically through SVG on CodePen,

Decadent and Depraved

Mat Marquis writing for BuzzFeed Bocoup:

All this typographic power came with a cost: text-rendering: optimizeLegibility is slow—and by "slow" I mean that it can bog down an entire page, from initial render time to repaints. More than that, though, it's buggy: Android in particular has serious issues trying to render a page that uses optimizeLegibility heavily.…

Throttled Thursdays

Chris Ruppel:

I propose that web developers everywhere start taking at least one day of their week to throttle their internet connections.

I'm guilty of mostly working under the most ideal possible conditions. The best hardware, the latest software, the fastest internet. Because I like it. And it's my job is to be productive. Once I even paid for redundant internet service at my house because I hated it so much when it went down or got slow.

But this …


What You Should Know About Collapsing Margins

OK, so some spacing walks into a bar, trips and falls on the floor. The bartender asks if he should be cut off and the spacing replies, "No, I'm just a collapsed margin."

Sorry, dumb joke.…

In CSS, the Only Wrong Answers are Definitive Ones

Nick Walsh's reation to Simuai's article Nesting Components (which covers eight possibilities for the simple task of styling elements within other elements):

the very nature of CSS leaves many problems without an exact solution, and the right one for you won't always work for others. If you write, speak, or otherwise communicate about stylesheets, don't be afraid to offer an open-ended answer.

Philip Walton reacts to the same article:

While I share his desire to nail down the best …

Sponsor: WebdesignerNews – Curated Daily Web Design News

Design is hard enough without scouring hundreds of blogs, countless social media accounts, and thousands of design sites just to keep up with what's changing. That's why the team at Webdesigner Depot created WebdesignerNews, a one-stop site for the very latest industry developments.

WebdesignerNews covers a range of topics, from vanilla web design to code demos, from branding to brand new apps. If it matters to our industry, you'll find it here. Even better, it is curated by humans. The …


An Introduction to Vagrant

The following post is by Jason Witt, a regular around here on topics like WordPress development. This time Jason introduces us to a development prerequisite: the development environment itself. There are lots of ways to level up behind off-the-shelf app solutions, including scripting your own setups.

Iconifying Content

Will Boyd with a clever tutorial on using CSS transforms to turn page elements into thumbnail-sized previews of themselves.…


Considerations on Bug Reporting in Teams

Here's a frustrating situation: someone notices a real layout bug or a glitch of some kind, but they fail to accurately describe the problem when they tell you about it. As front-end developers, and all-round good team players, it's our responsibility to establish a workflow for reporting, cataloguing, and describing the bugs that people are likely to encounter.…


Understanding and Manually Improving SVG Optimization

The following is a guest post by Raymond Schwartz. Like it's raster brethren, SVG should be optimized before being used on production sites. There are several great tools for that, but as Raymond is about to show you, the best results come from a deeper understanding and a little manual work. For instance, decimal precision is a big factor in SVG optimization, but it's a rather arbitrary metric depending on the coordinate system of SVG. Alter that system, get


Sites for Browsing Type Pairings

Last weekend we did a post on Sites with High Quality Photos and it ended up being a kinda perfect fun weekend thing. Nothing you have to think too hard about, just enjoy. So let's keep in that tradition a little bit! Why not! This week we'll do sites that are intended to help you choose fonts for your website by showcasing nice pairings (as not any two typefaces necessarily go together well). …

Sponsored: Animate HTML5 like a pro with Hype

Animations get complex quickly. Anything beyond the trivial you need tools to help. Tumult Hype is the perfect tool to help you build animations. It's a native app for OS X. It gives you a stage to place all the elements in your animation, and a timeline to control what happens with each element at which time. The animations you build work on desktops, smartphones and tablets. No coding required.

Try it out by downloading the 14-day free trial.…


I had heard rumors of this but didn't realize they were so many months into actually doing it. The jQuery foundation is creating...

... an attempt at creating open standards designed for CSS libraries, JavaScript UI libraries, and web developers in general. This project will define standards for markup and class names for common widgets and patterns, as well as an implementation of those standards. Just like DOM libraries can build upon Sizzle, we hope UI libraries will build upon …


Functional CSS Tabs Re-Revisited

Update: We're redacting this article. Much of it was work originally done by Art Lawry and published on A List Apart in the article Radio-Controlled Web Design. We didn't appropriately credit that work. Apologies to Art and A List Apart.

Further explanation and more about CSS tabs:

Here at CSS-Tricks, we've been playing with the idea of CSS tabs for years. Half a decade ago we explored seven different techniques (All of them pretty bad, don't use those). We …


The At-Rules of CSS

The at-rule is a statement that provides CSS with instructions to perform or how to behave. Each statement begins with an @ followed directly by one of several available keywords that acts as the identifier for what CSS should do. This is the common syntax, though each at-rule is a variation of it.…


Sites with High Quality Photos You Can Use for Free

I've been keeping a list like this around for a while, and the CSS-Tricks Staff just added a bunch of new links to it, so I figured HEY that sounds like fun little weekend post. There are so many of these it's really no excuse to have crappy photos in the work you do, be it websites, presentations, print work, whatever.…


Using the WP-API to Fetch Posts

It may be news to you, but there is a nifty resource called Quotes on Design that serves up interesting quotes about design, curated by our very own Chris Coyier.

Up to this point, Quotes on Design (QoD) used a bit of custom code to query the WordPress database and serve up quotes. This was used for the site itself, and for its API to allow use on external sites. With the excitement surrounding the upcoming WordPress JSON


Transforms on SVG Elements

The following is a guest post by Ana Tudor. Ana always does a great job digging into the math behind what we can do graphically on the web. In this case, that's extra-useful as there are several ways to handle SVG transforms and they require a bit of mathematical thinking, especially converting one type to another for the best cross browser support. Here's Ana.

Just like HTML elements, SVG elements can be manipulated using transform functions. However, a lot …


A Complete Guide to SVG Fallbacks

The following is a guest post by Amelia Bellamy-Royds and me. Amelia and I recently presented at the same conference together. We both covered SVG, yet neither of us SVG fallbacks comprehensively. It's such a huge topic, after all. While I've covered SVG fallbacks before, it's been a few years and we figured we could do that subject better justice now. Here we go!

Icon and Text Alignment

Jonathan Snook on a frustrating CSS situation I know I deal with regularly, getting an image/icon to line up nicely with a name/word. This was exactly the impetus behind this tweet. I feel validated to know that his solution is the same as mine normally is: relative positioning and nudge it with relative units until it looks right. …


Ignoring `the` in WordPress Queries

The following is a post by Jason Witt. Here Jason shares a method for doing something you might assume is pretty easy, but turns out to be a little bit more complicated than you might like. Fortunately with Jason's code and examples, it can be easy.

Sponsor: SiteBuilder

I bet you can guess what does. It helps you build, manage, and host a website completely with their online tool. I'm a big fan of giving people the power to do this on their own without having to learn to be a web developer themselves. There is a certain type of client that SiteBuilder is absolutely perfect for. One of the CSS-Tricks staffers even said their (quite young) kid uses it for their site, a testament to …


The Priority+ Navigation Pattern

The idea is: show as many navigation items as will fit horizontally with a UI toggle to show the rest. I like the idea. Why hide everything behind a toggle if there is room to expose the most important links? How it looks and how it is implemented could vary. Let's look at some examples!…

Cyclomatic Complexity: Logic in CSS

Harry Roberts on thinking about CSS selectors as a long series of nested logic. Sometimes it's hard for people to wrap their heads around why long, overly specific CSS selectors are problematic. When you see it as a crazy nested block of IF (SPECIFIC_CONDITION) { } blocks, it might make that more clear to some folks.…

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed