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

Article Archives

5 comments

The Eighth Fourth

It just so happens the United States birthday is the same as CSS-Tricks birthday! It was on this day, eight years ago I first launched the site. Since then, I do a bit of a commemorative post each year. …

Native CSS Scroll Snap Points

The newly-introduced CSS “snap points” properties could make it a whole lot easier to create CSS-only scroll effects (once browser support catches up). This post from Sergey Gospodarets' blog includes demos of snappy scrolling for image galleries and full-page vertical scrolling.

Scroll snapping is used widely for a better separation of the provided content (vertical full height pages) or, for example, to emulate galleries behavior... Can you imagine how easy would be creating such effects using CSS only?

The full

Accessible Footnotes with CSS

Nice demo from Hugo Giraudel where the footnotes are order-labeled with CSS counters and provide jump-down and jump-back links.…

8 comments

Working with Shapes in Web Design

When we make a new component on a website, we’re effectively creating rectangles of different sizes, whether we realise it or not. But what happens if we want to experiment a little? How many different ways are there to make shapes?

In this post I want to roughly outline some of the most common ways to make circles, triangles, and polygons, as well jot down the advantages and disadvantages for these methods so we can experiment with those that might …

HTTP 203: Progressive loading

The latest episode from HTTP 203, a series of talks about front-end development with Paul Lewis and Jake Archibald, takes a look at progressively loading assets.

Jake makes the comparison between websites and the way that video games will let users download and play the first level instead of forcing them to wait for the all the assets to finish downloading. What does your level one website look like?…

Container Queries: Once More Unto the Breach

I guess the plan is to stop with the "element queries" and start thinking and referring to them as "container queries". We've been following this saga for a while. Element queries have a serious pitfall: infinite loops.

.our-element:media(min-width: 500px) { width: 499px; }

As Responsive Issues Community Group member Mat Marquis puts it:

Well, since the query no longer matches, the new width is no longer applied. Since that new width is never applied, the element query would match again, …

New Poll: What’s your take on managing styles entirely in JavaScript?

For a primer on this, check out the post The Debate Around "Do We Even Need CSS Anymore?". That post is intended to present the idea of styling a website through inline styles as applied through JavaScript, as a way to help with some of the perceived problems in CSS. There are, of course, points to be made and opinions on both sides. I'm going to close the comments here so the conversation can be focused there.

This new …

The Last Word on Helvetica?

If you're going to co-opt an opinion on Helvetica, you'd do well to take John Boardley's.

So rather than hate a typeface, why not channel that energy into loving another.

Might as well poke around the ilovetypography.com redesign while you're there!…

Why availability matters

GIFs from Stuart Langridge demonstrating that a tiny percentage of visitors that can't view your site isn't just a static minority, it's a scattered minority.

It's not 1% of people who always can't see your site and 99% of people who always can. It's 1% of visits. Almost all the people who don't get your site correctly actually should have been able to.…

Web performance: Cache efficiency exercise

Ryan Albrecht digs into how efficient browser caching is on Facebook.com. They release code twice a day, breaking cache as they do, so they were curious if that was too often for browser cache to be efficient.

After collecting data, they are seeing 44.6% users getting an empty cache, which they determine effective:

The best practices tell us to use external styles and scripts, include Cache-Control and ETag headers, compress data on the wire, use URLs to expire cached resources, …

6 comments

Using Pinterest Data Attributes and Meta Tags

Pinterest is kind of a big deal. In the blog and e-commerce world, it's threatening to edge out Google as the most important search engine. That's the world I come from, so I've had lots of opportunity to work with Pinterest's data attributes and meta tags. These bits of markup give site owners control over how their images and site are presented on Pinterest, and what can and can't be “pinned”.

Before we get into the tag and attribute details, …

130 comments

The Debate Around “Do We Even Need CSS Anymore?”

This has become quite the hot topic lately. It's been talked about at a number of conferences and meetups I've been at personally lately. I've seen slide decks on it. I know people literally not shipping any CSS in production. Pretty wild, eh?

I thought we could have a little campfire here and talk about it as rationally as we can, covering all the relevant points. …

Contextual Styling: UI Components, Nesting, and Implementation Detail

What should you do if you need a smaller button style whenever those buttons are placed in the header? Do you make a new class or a new custom button modifier? Harry Roberts tackles this problem in the following post on modifying components when they're inside another component:

If you need to change the cosmetics of a UI component based on where it is placed, your design system is failing. It’s as simple as that. Things should be designed to …

12 comments

Poll Results on the Unsolicited Startup Idea Email

In this last poll we asked:

You get an email from someone you've never met (poor communication skills, but a decent idea) and they want to cut you in and give you control over a new web company they want to start. Do you:

And listed some potential responses. This is how you over 27,000 of you responded.…

Viewport sized typography with minimum and maximum sizes

There is no min-font-size or max-font-size, so while setting font-size in viewport units is cool, there's a good chance your font-size might get too small on small screens or too big on large screens.

Eduardo Boucas has a clever workaround though. Use media queries to force the font-size back into a set pixel value when the viewport has gotten to the breakpoints at which those min/max values would be exceeded. He's got a Sass mixin to help with the …

12 comments

So. Many. States.

"States", as in contexts or situations in which any given element might be in. Let's take a stroll.…

18 comments

What is Code “Golf”?

From the grand archives of "Things Chris was totally confused about for far too long and now half understands so might as well blog it": code golf. I would hear someone say something like "I got it down that small from my own golf." I would squint, confused, and just let it pass because it didn't seem important enough to ask about. Slang for "work", perhaps, or "tinkering".…

On being overwhelmed with our fast paced industry

Wes Bos:

Companies make multi-year investments in technology and will stick to their stack for quite some time. So as much as you think that everyone scraps their current setup for a shiny new framework every 6 months, it isn't the case at all.

It's easy to make "DAYS SINCE LAST JAVASCRIPT FRAMEWORK: 0" jokes (because it's kinda true), but it doesn't mean that you need to care or change directions.

Related: How To Stay Up To Date With Web

19 comments

Useful Flexbox Technique: Alignment Shifting Wrapping

I just ran into a situation where I had a title that was split into two sections. The main title, big and bold, left-aligned like any regular title. But then a bit of a subtitle, right-aligned, sitting on the same line as the title. When there is room for that, it's great. But of course text is always changing and the space you have available is variable. Let's take a look.…

Sponsor: Divi 2.4

Divi isn't just a WordPress theme. It's a theme for building your perfect theme. You build pages by adding rows and columns of content types of your choosing. The result is a beautiful, modern, responsive page layout that is easy to control.

Divi 2.4 has pushed the envelope of design and functionality even further, solidifying Divi's position as Elegant Themes' flagship theme, as well as being one of the all-time most popular responsive WordPress themes. New and exciting features …

9 comments

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

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

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