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

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 specification is worth a review.

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 …

Read Article →

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, so the new width would be applied, so the query would no longer match, so the new width wouldn’t be applied—and so on unto infinity. We've achieved a TARDIS-caliber paradox with just a few lines of CSS, and there's no predictable way for the browser to handle it.

Jon Neal actually had some ideas on how browsers could handle that:

Infinite loops would freeze at the offending block. While infinite loops are much more likely to happen with element media queries, this issue has been around since :hover. Therefore, a clear specification would be doubly useful.

But alas, perhaps forcing the queries onto a parent element will help:

... we need to reframe the way we talk about a potential solution. Since a solution can't allow an element to restyle itself, we can build that constraint into the specification: queries attached to an element can only influence the styling of that element's child elements.

I don't think it totally solves the infinite loop problem, but makes it easier to handle somehow?

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 …

Read Article →

#139: Explaining the Server Side Mustard Cut

I published a written post about this idea of the Server Side Mustard Cut. So if you're into reading and checking out code samples and stuff, that's the place for you. In this video I just walk through all that, explaining myself as we go.

I'll give the same caveat I have everywhere else I've introduced this: this may not be perfect for every site out there. In fact I think normal RWD stuff is generally better, up to …

Watch Video →

More Blog Posts →