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

Article Archives

14 comments

Choose a Random Option based on a Range

I have three options and I need to randomly pick one (in JavaScript). But not equally random. I want there to be a 10% chance of the first option, 20% chance of the second one, and 70% chance of the third.

Here are some ways to do that.…

30 comments

Numeric Inputs – A Comparison of Browser Defaults

The spec, purposefully, stops short of telling implementations (browsers) how to handle UI. In this article we're looking specifically at <input type="number"/>, and you might be surprised to learn that the spec specifically says:

This specification does not define what user interface user agents are to use.

It goes on to explain that different languages, cultures, and regions might have good reason to handle numeric inputs differently. So browsers are on their own here, and perhaps this time …

13 comments

WordPress Front End Security: CSRF and Nonces

In our last article, we covered Cross-Site Scripting (XSS) and the functions WordPress provides to prevent XSS attacks. Today, we'll look at another security concern for front end developers: Cross-Site Request Forgery (CSRF). …

11 comments

Introduction to WordPress Front End Security: Escaping the Things

If you're a WordPress developer that writes HTML/CSS/JS (which is 100% of theme developers and 99% of plugin developers), you need to know the basics of front end security for WordPress. WordPress gives you all the tools you need to make your theme or plugin secure. You just need to know how and when to use each tool.

For example, one huge responsibility you have as a front-end developer is to prevent unescaped content from being printed to the page

Textures.js

SVG patterns for Data Visualization by Riccardo Scalco.

This is like all my favorite web things smashed together. Beautiful design, SVG, accessibility, programmatic control with JavaScript, and open source. #swoon…

Sponsor: All Courses on Skillfeed Free for a Month

For a limited time, Skillfeed is offering access to all courses and tutorials for free! Web designers and other creative professionals can pick up career-building skills in web and graphic design, CSS, Adobe software, and more, from anywhere, at anytime. To celebrate its launch, Skillfeed is offering 30 days of free access to hundreds of online courses. Take your web design skills to the next level today. Don't miss out!

40 comments

Probably Use initial-scale=1

If you're doing responsive design, you're using viewport <meta /> tags. These tell the browser what width it should render the viewport at. If you don't use this tag, it will render at the device's default, which almost certainly isn't what you want. But even if you are using viewport <meta />, there are subtle differences in the value you put in it.

I just wanna focus on one little difference here.…

20 comments

Left Half and Right Half Layout – Many Different Ways

A whole bunch of years ago, we posted on this idea here on CSS-Tricks. We figured it was about time to update that and do the subject justice.

Imagine a scenario where you need to split a layout in half. Content on the left and content on the right. Basically two equal height columns are needed inside of a container. Each side takes up exactly half of the container, creating a distinct break between one. Like many things in CSS, …

5 comments

Strategies for Staying on Top of Web Performance

Step one is caring about the performance of your websites. Step two is doing things to make it better. Step three is staying on top of performance for the long haul.

That means not just poking at trying to improve your web performance a few times a year, but making it a part of your active development and trying to prevent regressions. Certainly something that gets harder the more actively developed your site is.…

Sponsored: Creative Market’s March Big Bundle

Fill up your toolbox with a ton of design resources from Creative Market! 77 really nice fonts, graphics, vectors, brushes, stamps, patterns, themes, branding kits, and more that all reflect current trends and tastes in visual design. Purchased individually, everything would cost over $1,200 - on sale this week only for $39.

Get it now →

38 comments

New Poll: You get this email…

Maybe you know the kind. It's from someone you've never met, but it sounds like good news. They have an idea for new web thing. They know what you do, and they want your help. In fact, they want to cut you in on it, perhaps co-found this company. Control over the parts that matter to you. It's a decent idea. Not mind-blowing, but lots of ideas seem kind mediocre at first right? It's what you do with them, you …

What Does My Site Cost?

With the average website size closing in on 2 MB (!), Tim Kadlec's new site forces us to think how much money it costs to load a single website when you're paying for data on a mobile connection. In Germany, that's a dang U.S. quarter for one site. …

Em-based media queries are based on…

(drumroll please)

Stephanie Rewis (off a lead from Susan Robertson):

the em base in media queries comes from the user's setting (which is the 16px browser default if not changed by the user).

Intuitively, it seems like changing the font-size at the :root / html level would change what 1em is and thus change where breakpoints hit, but it doesn't.

Em-based media queries got very popular after Lyza Gardner detailed how breakpoints didn't hit as you'd expect with browser zooming. …

11 comments

Poll Wrapup: The Number of People Touching CSS

The last poll around here was:

How many people touch the CSS in your current main project?

Defined as:

  • Actually author and edit it.
  • Or, are an active consumer of it. You/they write HTML and use the CSS available thus have a vested interest in the actual CSS, not just the outcome.

My desire with this poll was to get a sense of how shared CSS is. Is CSS the kind of code that is generally in and out of …

15 comments

Using the HTML5 History API

The HTML5 History API gives developers the ability to modify a website's URL without a full page refresh. This is particularly useful for loading portions of a page with JavaScript, such that the content is significantly different and warrants a new URL.

Here's an example. Let's say a person navigates from the homepage of a site to the Help page. We're loading the content of that Help page with Ajax. That user then heads off to the Products page which …

30 comments

Moving to HTTPS on WordPress

I just recently took CSS-Tricks "HTTPS everywhere". That is, every URL on this site enforces the HTTPS (SSL) protocol. Non-secure HTTP requests get redirected to HTTPS. Here's some notes on that journey.…

Sponsored: Win a Full Scholarship to Attend Launch Academy

For two years now, Launch Academy has given the gift of loving what you do to each of their 250+ graduates. To celebrate, they want to provide someone with that same gift, for free. Show them your love for code, and you could win a full scholarship (worth $12,500) to attend Launch Academy this summer! You can become a software developer at a technology company in 10 weeks at no cost to you.

Simply submit a solution to the coding …

38 comments

Creating responsive, touch-friendly carousels with Flickity

The following is a guest post by David DeSandro. David is a legend in front-end design and development. He's worked for top agencies like nclud and huge products like Twitter, all the while building amazing open source projects like Masonry and Packery. Lately he's been full time on these open source projects as Metafizzy, the latest one he'll tell you about here.

23 comments

I like how percentage background-position works

I learned something the other day when we were fleshing out the background properties in the Almanac. It's such an intuitive thing, that I guess I just never stopped to think about it before.

By default, background-position is 0 0, the top left corner. Now imagine you set it to 50% 0. That background image is now center top. It figures out the size of that image, and positions the center of it at the center of …

Quantity Queries for CSS

Heydon Pickering with some clever CSS selectors like:

li:nth-last-child(n+6), li:nth-last-child(n+6) ~ li { /* Selects all list items if there are 6 or more */ }

Similar to Matt Mastracci's article where he focuses on styles for groups of specific numbers. …

55 comments

Considerations on Choosing a University CMS

The other day a friend of mine, who works at a university, told me he was on a committee to choose a CMS for the whole university. I definitely don't envy that task, but I do find it quite interesting. …

21 comments

Using AngularJS for Data Visualisations

The following is a guest post by Nick Moreton. I gotta say I find this idea rather intriguing. I know that I love working in HTML, SVG, and CSS, so when Nick shares that we can use that for structure and use the data directly to style a chart, that appeals to me. And then to know that, because you're using Angular, the chart can automatically change when the data changes... that's just dang cool.

32 comments

Dropdown Menus with More Forgiving Mouse Movement Paths

This is a fairly old UX concept that I haven't heard talked about in a while, but is still relevant in the case of multi-level dropdown menus. A fine-grained pointer like a mouse sometimes has to travel through pretty narrow corridors to accurately get where it needs to in a dropdown menu. It's easy to screw up (have the mouse pointer leave the path) and be penalized by having it close up on you. Perhaps we can make that less …

29 comments

Polylion

The following is a guest post by Dennis Gaebel. Dennis created some pretty captivating polygon SVG effects on CodePen, and here he'll share how he did it.

Sponsored: Hack Reactor Remote Beta – Now With Need-Blind Tuition Deferral

Since Hack Reactor's Remote Beta online coding school kicked off its first cohort this past July, it’s grown into a program that rivals the company’s renowned onsite course in educational quality and student experience.

In an effort to showcases confidence in the employability of Remote Beta Software Engineers, Hack Reactor has recently announced a need-blind tuition model, never before seen in online immersion education. Starting with the March 23 class:

  • Eligible Remote Beta students can now defer up to
27 comments

Accidental CSS Resets

Any time you use a shorthand property in CSS, you set all the values for all the properties it deals with. It's not a bug, it's just how CSS works. I've seen it confuse people plenty of times. Let's shine a light on the issue to hopefully make it more understood.…

13 comments

Thoughts on the Advertising Ecosystem

There are lots of business on the web. One type of those is a website that sells products or services. Those websites employ people who work on the site, incur server costs, material costs, etc. The products and services they provide are useful to people, and they pay for them. Business. Cool.

Those websites need customers. They need people to come to those sites. There are all sorts of ways to do that. Word of mouth. SEO. Wear a costume …

2 comments

CSS-Tricks Chronicle XXI

As I write I'm half way through my month-long stay at Hilton Head Health. I like coming here to keep my weight in check. I hope to break some personal records while I'm here this time. It's also been a good way to escape some of the Wisconsin winter. It has been mild up until I left, but it sounds like February has been pretty rough so far. …

Sponsor: Stack

Stack is what we use here at Team CSS-Tricks to keep organized. Check out our interview over on their site.

There is a lot to keep track of: article ideas, site bugs, site improvement ideas, guest posts, etc. Also business things like invoicing statuses, accounting tasks, and merchandise. Stack allows us to break all those things up into projects. Then each project has tasks, like "Update the Sprites article" or "Order more green T-Shirts" - which get organized by custom …

FLIP Your Animations

First, Last, Invert, Play.

Paul Lewis demonstrates a performant way to approach animations. It's the opposite of how you normally think of them. In this approach, the state you first see elements in is the the result of manipulation from the elements final state. Then you remove all the transforms (et al.) to trigger the animation.…

BrowserSync 2.0

It was only a year and a half ago when Shane Osborne introduced BrowserSync here. It does those things we really love as front end devs: style injection, reloading when necessary, and running a server so you can test across multiple devices and see that stuff happen across all of them. But it did more: synced forms as-you-type, synced scroll position across devices, even followed links so as you navigated around the site all the devices would come …

Styled Range Sliders

Ana Tudor produced dozens of beautiful examples, all with just a single <input type="range">. We've covered the how-to before, but Ana goes deeper adding useful functionality and using new uncharted stuff like /deep/.…

Responsible Social Share Links

Using actual social sharing buttons, as provided by Twitter or Facebook (et al.) is a no-go for most performance-concerned or privacy-concerned websites. Too slow, too dangerous. It's kind of a shame though, as those buttons are nicely functional. An alternative is "share intent" URL's, which generally link to a barebones page in which to share the content. Jonathan Suh shares how you can fancy those up a bit with popup windows. I like it, feels much nicer.…

11 comments

Inline SVG with Grunticon Fallback

In which we look at Grunticon and how it can be used as the fallback system even if you want to start with inline SVG in the document.
21 comments

Spriting with <img>

Sprites aren't limited to background-image, as with the object-fit and object-position properties we can nudge an inline image around its content-box to act just like a sprite. …

Sponsored: Team Communication Starts with HipChat

Give your team the right tools to communicate. HipChat combines IM, group chat rooms, file sharing, screen sharing, video chat and audio calls - into one simple team communication solution.

Don't want to walk to the other side of the office? Relax, your co-workers are just keystrokes away. Big project? Create a group chat room for your team members to collaborate and make decisions. Want to integrate with other tools? We've got over 50 integrations, from the practical like GitHub …

Transitioning to SCSS at Scale

I like Dan Na's introduction here:

Naively, CSS appears easy to comprehend — it doesn't have many programming constructs, and it's a declarative syntax that describes the appearance of the DOM rather than an executable language. Ironically it's this lack of functionality that can make CSS difficult to reason about.

I've tried to make the pitch the preprocessing makes CSS easier (not harder) myself.…

20 comments

The Gooey Effect

The following is a post by Lucas Bebber. Lucas the originator of some of the most creative effects I've ever seen on the web. So much so I couldn't resist blogging about them myself several times. Much better this time: we got the man himself to explain how SVG filters work and how you can use them to create a very cool gooey effect.

9 comments

You can copy() from the console

You can in Blink/WebKit, anyway. You can't directly in JavaScript, as I'm sure that's some security (or good taste) issue that just isn't allowed. Sites that do it tend to rely on Flash. But it works in the console, and that can be all kinds of useful!…

15 comments

Progressive Enhancement and Data Visualizations

The following is a guest post by Chris Scott. Chris has written for us before - always on the cutting edge of things. This time Chris shows us something new in the form of a new charting technique his company offers. But it's based on something old: the fundamentals of the web itself.

28 comments

Simple CSS-Only Row and Column Highlighting

Highlighting rows of a table is pretty darn easy in CSS. tr:hover { background: yellow; } does well there. But highlighting columns has always been a little trickier, because there is no single HTML element that is parent to table cells in a column. A dash of JavaScript can handle it easily, but Andrew Howe recently emailed me to share a little trick he found on StackOverflow, posted by Matt Walton.

It was a few years old, so …

Sponsor: Ironhack

Ironhack is a coding school that offers full-time, immersive 8-week courses in Web & iOS development. Founded in Madrid and Barcelona, Ironhack recently launched its third campus in Miami and is accepting applications for its March 16th Web Development cohort.

Receive instruction from experts, hailing from leading technology companies such as Spotify, Yahoo and eBay, among others. In addition to teaching relevant technologies, they impart to you their methodologies for making quality software.

Ironhack provides career support to all its …

12 comments

Fun with line-height!

The line-height property in CSS controls the space between lines of text. It is often set in a unitless value (e.g. line-height: 1.4;) so that it is proportional to the font-size. It's a vital property for typographic control. Too low and lines are awkwardly squished together; too high and lines are awkwardly far apart. Both inhibit readability. But you probably already know that.

In this article we'll focus on some trickery. If you know (or can figure out) the …

“The Escalator”

Patrick Stirling of The Guardian shows off some new ads formats they are using. The first two look like they are just using some @media queries to shuffle things around and resize them. I wasn't able to find a live one to look under the hood at though. It would be really neat to see SVG be used for these because 1) you could make it nicely accessible with real text 2) The scale-and-maintain-proportions ability (even text) would seem appealing. …