Treehouse: Grow your CSS skills. Land your dream job.

Article Archives

13 comments

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.

But:

The relationship between CSS and …

10 comments

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.…

24 comments

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 …

7 comments

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.…

41 comments

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 …

7 comments

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
14 comments

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 …

29 comments

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 …

28 comments

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.…

10 comments

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.…

28 comments

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

6 comments

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.…

Chassis

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 …

28 comments

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 …

17 comments

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.…

42 comments

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.…

32 comments

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

9 comments

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 …

30 comments

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. …

15 comments

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 SiteBuilder.com 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 …

29 comments

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.…

one comment

The Deal with WordPress Transients

The following is a guest post by Scott Fennell. In this article Scott is going to dig into an important type of caching that is available to you in WordPress: transients. Like any cache, you use transients to store any kind of data that takes a long time to get, so the next time you need it, it returns super fast. The beauty of transients is they clean up after themselves, as long as you watch out for the

8 comments

Chaining Multiple Blend Modes

The background-blend-mode CSS property is nifty in lots of ways. It gives developers the ability to blend one background-image with its own background-color, or even with another background-image that's been applied to that very same element.

What's extra interesting is that you can chain these blend modes together. If you add multiple background images to an element you can also declare which background should use which specific blend-mode.…

16 comments

How to Make a Smartphone Controlled 3D Web Game

The following is a guest post by Charlie Walter. Charlie does a bunch of work with Three.js (3D in the browser with WebGL) and gaming concepts. If that stuff interests you, read on!

In this tutorial I'll explain an approach on how to connect your smartphone to a 3D web game. We'll be making a car which you can control by tilting your phone (using the phone's accelerometer). We'll use the JavaScript library three.js for working with WebGL as …

27 comments

Thoughts on an API-First WordPress

The following is a guest post by Eduardo Bouças. We all know WordPress is a CMS, but here Eduardo thinks about using it only as an API for content. No front end at all, just URL endpoints that return JSON for use anywhere else. This doesn't detail a comprehensive solution to doing this, it's food for thought with some example code to get you going on a custom solution. If you want to get started developing on a