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

Article Archives

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 …

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

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

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

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

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

22 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

14 comments

Where Style Guides Fit Into Process

Brad Frost was showing me some slides from one of his talks recently. He had some graphics that demonstrated different approaches to where a style guide can fit into a team's process. As you might imagine, it's a matter of just having one or not that will determine its effectiveness.

I thought I would attempt to explain my own thoughts on these approaches based on my own experiences.…

44 comments

HTML vs Body in CSS

The difference between <html></html> and <body></body> is easy to overlook. It seems to be one of those things that falls into the category of trivial. Admittedly, I have a bad habit of applying all global styles to <body></body> and, when that falls short, I move to <html></html> without thinking about it.

There are differences, however, and it's a good idea to be aware of them regardless of whether we're CSS veterans or rookies. We'll go over those in this post …

Sponsor: Mack Weldon

Guys. (Literally guys this time, sorry gals.)

I don't particularly like clothes shopping. So I don't. 95% of the clothes I own I buy online. But I also like nicely made clothes. It's not a splurge. They last longer, are more comfortable, and end up being a more economical buy.

That's why I'm glad there are companies like Mack Weldon that make high quality clothes that used to suck to shop for: underwear, undershirts, and socks. This is what they …

Cut and Copy (from JavaScript)

Matt Gaunt shares that IE 10 and bleeding edge Chrome and Opera how support document.execCommand('copy'); and friends, which can make for some mighty convenience UX opportunities. …

13 comments

Using Chrome DevTools to Debug JavaScript in Any Browser with Ghostlab 2

The following a guest post by Andi Dysart and Matthias Christen of Ghostlab. I was pretty impressed when I heard that the newly-released Ghostlab 2 could do this. I think a lot of us developers use Chrome because the DevTools are so good, and it sure would be able to use them in other browsers, even on mobile devices. And why not? Chrome DevTools are a part of Blink, which is open source, right? We just needed a tool

12 comments

More Control over Text Decoration

Marie Mosley just finished up a revamping of the text-decoration property (and friends) in the Almanac. You're probably aware of this property. For instance, most default browser styles include underlined links by way of text-decoration: underline; - which you can remove with text-decoration: none;.

But you may not be aware that there is more you can do with this property, as well as various sub-properties offering more fine-grained control.…

15 comments

Chronicle XXII

We put up a proper Team page. CSS-Tricks isn't just me, but a whole team of part-time staff that keep this ship sailing. That includes writers. We've always had guest posts, but now, for the first time, you'll be seeing articles not written by me that also aren't "guest" posts, because they work here! Example. Notice it doesn't have an introduction written by me like a guest post would. We'll get proper author archives up soon. …

Be Careful with will-change

The concept behind the will-change property is to stop using hacks like transform: translateZ(0) to tell browsers where to optimize and standardize it. The typical, understandable gripe is that this complicates CSS. Shouldn't browsers be smart enough to do these optimizations, rather than leaving it up to us authors? To which browsers say: it's near impossible to heuristically determine these things. Much like the sizes property in responsive images - just telling the browser allows it to act on that …

12 comments

Override Gmail’s Mobile Optimized Emails

Many emails are designed with a large screen in mind. Text that looks great on a large screen can be difficult to read on a mobile device, though. If Gmail deems that the font-size of any text in an email is too small to be legible, it will increase the size and flag the message. That’s pretty nice. What could have been illegible is made legible, eliminating the need to pinch and zoom our screens. It can also be a little frustrating.
8 comments

Starting a Refactor with CSS Dig

The following is a guest post by Tom Genoni. Tom built an open source Chrome Extension for analyzing CSS. I'll let him introduce it.

It's a new web project. You're starting from scratch. The front end is going to be clean and orderly. You've set your defaults. Your CSS files are organized. You've got a system! This time will be different. What could possibly go wrong?…

Be experienced, not cynical.

Jamison Dance:

If you don't share experience with others, your effectiveness will never scale beyond your own efforts. If you impart your battle scars on others without considering the circumstances in which they were inflicted, people who believe you will miss out on awesome things. The challenge of the experienced developer is to pass on wisdom without passing on dogma, but most developers think their personal experience should be enshrined as a best practice.…

Accessibility Wins

Marcy Sutton's new site "showcasing accessible user interfaces".

I don't know about you, but I sure like the idea of celebrating the good to balance out all the shaming of the bad.…

88 comments

BEM 101

The following is a collaborative post by guest Joe Richardson, Robin Rendle, and a bunch of the CSS-Tricks staff. Joe wanted to do a post about BEM, which we loved, and just about everybody around here had thoughts and opinions about BEM, so we figured we'd all get together on it and do it together.

The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Developed by

Browser representatives on CSS [selector] performance

My anecdotal evidence regarding CSS selector performance is: I've never once bothered with optimizing for it, and typically outright ignore traditional "advice" around it, and it's never been a problem.

Ben Frain looks around at what browser people say about it and:

At this point I'm happily re-concluding that CSS selectors are rarely a problem with static pages. Plus, attempting to second guess which selector will perform well is probably futile.

If you're doing something extraordinarily DOM-heavy, I think you …

Loading CSS without blocking render

Typically you do want CSS to block rendering. Pages would load in a very awkward manner if you saw the page load with no CSS first, then shift around as the CSS is parsed and applied to the page.

But there are some situations where you want to defer loading of CSS - for instance a stylesheet of custom fonts you don't mind downloading late. Or even your main stylesheet if you're doing critical CSS.

Keith Clark presents a …

8 comments

FOUT, FOIT, FOFT

A (very) brief look at custom font loading. How browsers handle that, how we can exert control over it, and the acronyms invented to describe it.