Article Archives

Hey, Look What Day It Is

One of my favorite self-declared holidays.

Interesting tidbit. It was considered a mistake by the CSS Working Group:

Box-sizing should be border-box by default.…

9 comments

Choosing the Right Markdown Parser

The following is a guest post by Ray Villalobos. Ray is going to explore many of the different varietals of Markdown. All of them offer features beyond what the original Markdown can do, but they offer different features amongst themselves. If you're choosing a version to use (or a version you're offering to users on your web product), it pays to know what you are getting into, as it's difficult to switch once you've chosen and there is content

Critical Web Fonts

Zach Leatherman outlines a new method for loading webfonts whereby the process can be broken up into two stages:

...instead of a full Roman webfont in the first stage, it loads a small subset of the Roman webfont, in this case with only the uppercase and lowercase alphabetic characters.

Then, in the second stage, we can load all the extra parts of that font, such as numbers or special characters. Ultimately, this greatly decreases the time in which readers will …

2 comments

Hookbin – Capture and Inspect HTTP Requests

The following is a guest post by Przemek Matylla, who created a tool I suspect will be mighty useful for some of you out there. There is a lot of mystery out there in webdev. What value is this variable at this moment in execution? Why is this property being overridden? What's causing this scrollbar? There is also mystery with HTTP requests. What data came along for the ride? What metadata? Is everything there (and not there) as I

Extending Sass with PostCSS

I think Ashley Nolan has the right idea here:

Many posts on PostCSS compare it’s features to Sass equivalents, but PostCSS doesn’t have to be used as an alternative to Sass. It can instead be used to add additional features to your workflow that Sass doesn’t provide. ... These extra tasks can run either before or after your Sass compilation, as PostCSS can parse both SCSS and CSS.

PostCSS has proven to be much easier for developers to write add-ons …

Sponsor: FullStory Searchies – Answers Before You Ask​

FullStory is a customer experience platform that gives product, marketing, and support teams unprecedented insight into the interactions of visitors and customers. By adding a simple script to any website, FullStory captures every event and interaction during a visit, making it easy to replay, search, and analyze each user’s experience.

FullStory Searchies intelligently determine which questions you’ll want to ask of a search or segment and present the answers in the most visually intuitive way: with a funnel, line graph, …

[Talk] HTTP/2 is Here, Now Let’s Make it Easy

Rebecca Murphey's talk from dotJS 2015 explores all the various gotchas surrounding HTTP/2. For instance, how will servers support it? How does our front-end process change to benefit the most from this new protocol? How will developers know that everything is working correctly?…

6 comments

Using Templating Engines to Streamline WordPress Theme Development

The following is a guest post by Charlie Walter. Charlie has written for us before, when he's not making me extremely envious. Now he's back to share something completely different. We're going to learn about methods he's learned for streamlining WordPress theming using templating engines.

Templating engines are fantastic! They make complex programming languages much easier to write and include features that streamline the development process.

WordPress is a natural environment for us to see how templating …

Performance Budget Builder

Brad Frost has made a very interesting visualization tool that helps teams think about performance budgets. It shows all the assets (HTML, CSS, JS, images, fonts, etc) as part of one proportional bar chart. It's a great way to look at it, because it reinforces the idea of "increase one, others need to shrink".…

The Responsive Image Breakpoints Generator

Nadav Soferman has written a great post about the common mistakes that can be made when developers attempt to make images responsive:

Whichever responsive design solution or framework you choose, you still need to generate and deliver multiple versions of each image. The challenge of finding the best fitting resolutions, which are the responsive breakpoints for each specific image, is common for all approaches and frameworks.

What’s especially surprising to me is we need to serve a different number …

10 comments

Mood Driven Development

I suspect this is what many of us do (based on my own behavior and what I observe of others), but I'm not sure we outright say it or embrace it. Mood Driven Development: Work on what you feel like working on.…

Doing Science on the Web

Alex Russell on the current problem with testing experimental web features:

Prefixes “look” ugly and the thought was that ugliness  —  combined with an aversion to proprietary gunk by web developers —  would cause sites to cease using them once standards are in place and browsers implement. But that’s not what happens.

Tools like Autoprefixer compound the problem that we developers use prefixed-anything as soon as we can get our hands on it.

He talks about some strategies for solving …

20 comments

OS X Window Manager Apps

There is no shortage of apps to help you arrange windows. I find them tremendously useful. Most Windows (the operating system) users I know quite like the built-in abilities it has to position windows, but there isn't as much of that built into OS X. OS X El Capitan (10.11) brought some split screen stuff, but it has quite a few limitations and certainly isn't fulfilling all the needs of the discerning nerd.

So let's look at the options! Fair

Revisiting the Float Label Pattern with CSS

The “floating label” is a common design pattern where the label of a form is displayed on top of an input until someone taps it. It’ll then transition out of the way to reveal the placeholder text beneath, but the label will still be visible above or below.

Emil Björklund walks us through an interesting demo that replicates this pattern but without the need for any JavaScript and with the :placeholder-shown pseudo selector.

Note there are other CSS-only methods for …

3 comments

Some Pretty Splendid SVG Links

I'm always running across wonderful SVG stuff. Demos, tutorials, tools, art... some of the best timeless resources end up in our SVG compendium. Some I think are best suited to posts like this!

Some of these are pretty new. Some of them are not, but I found them useful recently or are new-to-me.…

Sponsor: Media Temple

I'm pretty excited to welcome Media Temple as a the brand-spankin' new primary site sponsor around here. I pitched the idea to them, actually. While sponsors are vital for the site, I'm selective about the companies we work with. I personally approve and endorse every one. I'm particularly selective about the primary sponsor. I want it to be a company that I not only use and endorse, but that I select as a good fit. Media Temple was at the …

9 comments

CSS Specificity is Base-Infinite

There is a good amount of information on this site about specificity. The seminal one is Specifics on CSS Specificity, which has been updated a few times over the years. When it was originally published in 2008, it presented the information in a bit of a misleading way. It has long since been fixed, but the mistake is still interesting.…

4 comments

Planning a Tech Event in 6 Months

The following is a guest post by Brad Westfall. I ran into Brad at a conference not long ago and we talked about potential guest post ideas. Brad recently ran a conference of his own, CSSDay.io, and as you would expect he is full of thoughts on that experience. The perfect time to write!

10 comments

The Current State of Web Security (An Interview with Anselm Hannemann)

Anselm Hannemann recently made a post about some of the misconceptions that front-end developers might have about web security. Since I had lots of questions about these things, I thought I'd interview Anselm to get his take on the surprising complexity of getting set up with HTTPS. We talk about things like generating certificates and how we might best make sense of the conflicting opinions many developers, including myself, have about third-party services such as Cloudflare.

The HTTPS-Only Standard

A project by the U.S. General Services Administration that outlines how Federal agencies should implement basic web security, going into great detail as to why government websites should always use HTTPS over HTTP:

HTTP has become central to today’s way of life. HTTP is currently the primary protocol for applications used on computers, tablets, smartphones, and many other devices. As our dependency on the internet has grown, the risk to users' privacy and safety has grown along with it. Every …

38 comments

A _______ of JSON

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. Yadda yadda yadda.

But what do you call a small amount of it?…

56 comments

Designing A Product Page Layout with Flexbox

The following is a guest post by Levin Mejia, a Designer Advocate at Shopify. Shopify uses flexbox in a new theme they developed and they wanted to share some of the techniques they used to do it here. To that I say: yes please.

15 comments

Influencing Web Layouts with Print Layouts

Jen Simmons has a compelling talk (video) where she calls out web design as being far too dominated by the HEADER CONTENT SIDEBAR FOOTER pattern we're all too familiar with. Print design, despite so often being dubbed "dead" or in massive decline by those of us in web design, still excels in quality and variety of layout.

Certainly we can learn from print design on the web, yeah?…

20 comments

The Sass Ampersand

The following is a guest post by Rich Finelli. Rich told me he used to have some trouble with the special ampersand character in Sass, but then had a bit of an epiphany and wanted to share that understanding (it's powers and limitations) with others. My favorite!

The & is an extremely useful feature in Sass (and Less). It's used when nesting. It can be a nice time-saver when you know how to use it, or a bit …

Moving Along a Curved Path in CSS

motion-path is specced and already has some support. But there is another way to replicate curved motion paths, as Tobias Ahlin points out:

... if we add a container around the object we want to animate, we can apply one timing function for the X-axis, and another one for the Y-axis. Below, we're using ease-in for the X-axis, and ease-out for the Y-axis.…

Optimizing SVGs for Web Use

An in-depth series of posts by Andreas Larsen that walks us through the process of how to (hand) optimize SVGs. He suggests optimizations that it's unlikely software could do for you. Things like changing the viewBox size to accommodate simple, rounded integers.

Adding this one to our compendium of SVG info.…

Safari 9.1

There are lots of exciting new features rolling out in Safari 9.1 such as support for the picture element, enhancements to the web inspector, CSS variables and gesture events for iOS. Although, what I’m most excited for is the OpenType support with properties such as font-feature-settings and its variants like font-variant-ligatures and font-variant-caps, all of which give us more fine-tuned control over typesetting.

You can play around with these new features in the OSX 10.11.4 and iOS 9.3 betas …

6 comments

What is Bikeshedding?

The #1 place I hear people use this unusual term is standards people talking about standards stuff. It's not an intuitive term, but what it means is quite a useful and short way to describe a certain situation.…

Sponsor: ​LightCMS

LightCMS is the only true white-label Content Management System on the market. If you've ever considered branding your web design business as your own while using someone else's system, you need to check out their Developer Program. You'll have all of their enhanced reseller tools at your fingertips, as well full access to the HTML and CSS of your sites. They even give you a free website for your business.

If you're thinking about switching CMS providers, or even …

Swiss in CSS

Swiss in CSS is a delightful project by Jon Yablonski that recreates posters made in the International Typographic Style, a visual design movement that began in the 1940s.

Open the examples in CodePen to take a look at how each of them work under the hood.…

12 comments

Thank You (2015 Edition)

GOSH! Don't the years roll by fast? It's that time of year to say "Thank you!" I am grateful for the CSS-Tricks community: you read, help me, and help each other be better at our craft. It is each of you that has made this site what it is today. We get mushy on you every year, if you're keeping track.…

DuoTone themes

Some classy understated themes for Atom by simurai. This might be the little thing that gets me to try switching to Atom. I gotta imagine people will port them over to other apps, though.…

A Few Picks from 24 Ways 2015

Strong year for 24 Ways! The whole archives is worth browsing through and bookmarking the articles that most interest you. Here's some of our favorites:

31 comments

Should I use a video as a background?

A reader writes in:

I've seen done beautifully, but I'm having a hard time finding any articles on best practices. I try to steer clients away from wanting video background even though it's hard to argue against it because it does look stunning when done right.

"Look at my competitor's website, they have a video!! You can do it!!", they say.

The problem I run into is when a client actually sends me a video they want to use, it's …

29 comments

`flex-grow` is weird. Or is it?

The following is a guest post by Manuel Matuzovic. It illustrates how flex-grow works, weird quirks and all. Then he goes into several examples on how common layout patterns may be implemented using flex-grow and flex-basis.

When I found out about flex-grow, I made a simple demo to find out what it did and how it worked.
I thought I got everything figured out, but when I tried it on a website a colleague has recently made, …

15 comments

Click SVG Element to Focus (and Style)

A reader writes in:

Is there anything on your site that shows me how to make an SVG clickable using CSS? As in, I have an SVG and I click on part of it and it should reveal an outline on that part of the element? I have a telephone interview Tuesday for a job as a remote SVG Illustrator and I don't want to look like a turkey.…

The Website Obesity Crisis

Maciej Ceglowski’s latest talk is all about front-end performance, the advertising bubble and surveillance on the web. It’s interesting that he argues how each of these separate problems are really interrelated issues that ultimately damages how the web is built.…

Sponsor: Christmas Came Early (Take 20% Off Top Design Resources at Creative Market)

Before you get caught up in holiday sweets and ugly sweater parties, be sure to look at Creative Market's new 20% off deal — covering everything from stellar brush fonts to detailed textures to stunning graphic kits. Start the new year with fresh new additions to your design toolbox and watch your work improve in 2016. This is a unique opportunity to grab assets created by talented shop owners to optimize your design workflow — and they're all 20% off!…

40 comments

New Poll: “front” “end” ughck.

I don't think it causes confusion, but there doesn't seem to be any consensus on how we write out the word front end. I had to make a choice right there. My preferred style, for now, is just that: front end. But I figured it would be a fun and potentially interesting poll to see what everyone thinks. Voting in the widget in the sidebar (large screen) or somewhere-down-there (small screen).…

TypeKit Starts Using Native Font Loading API

Typekit has updated the WebFont Loader project with support for the new CSS font loading API:

Before the introduction of the native API, we detected font loading by inserting test elements in the page. These elements were regularly polled for width to see if the font had loaded. This process is very expensive because it triggers a page wide style reflow each time the elements are checked. Using the native API, we can bypass this process completely, which results …

8 comments

Poll Results on Performance Culture

Our latest poll asked:

What's the web performance situation on your main project?

Then provided five possible answers related to the general attitude of the team as it relates to web performance, ranging from "everybody cares" to "nobody cares".

With over 13,000 votes, the data is in!…

Building a Better Web Browser

James Mickens, an associate professor of computer science at Harvard, gave a talk about the various flaws of web browsers and how we might go about making them more secure and robust:

To fix the browser, we need to radically restructure the browser architecture…so in particular I propose that we dramatically narrow the responsibilities of the browser itself and give more responsibilities to web pages. So in this new model the web developer defines her own rendering engine and her …

ShopTalk 2015 Holiday Gift Guide

There are some things Dave and I talk about regularly on ShopTalk. Certain hardware we use. Software we like. Books we recommend. Services that make life easier. We rounded them up into a little list for the holidays. Enjoy!…

Smaller, Faster Websites

Mat Marquis’ talk from TXJS 2015 is a rallying cry for performance, responsive images and trying to build websites in the most conscientious way possible:

We, as an industry, have nearly decided that we’re doing a great job as long as we don’t count the cases where we’re doing a terrible job. We want the user to think about The Website—to sympathize with us—over their reason for being there. We’re making them sit through a lecture about furniture design …

We have a pretty good* newsletter.