Article Archives

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 …

17 comments

SMIL is dead! Long live SMIL! A Guide to Alternatives to SMIL Features

SMIL, SVG’s native animation specification, has been highly regarded because it offers so many bells and whistles for performant SVG animation rendering. Unfortunately, support for SMIL is waning in WebKit, and has never (nor will likely ever) exist for Microsoft’s IE or Edge browsers. Have no fear! We’ve got you covered. This article explores some of those SMIL-specific features and delves into the alternatives to achieve the same effects with a longer tail of support.…

CSS-Tricks Chronicle XXV

It's been a few months since I've done a Chronicle post around here. There are the posts in which I catch you up with all the goings on of the site and myself. A roundup of life, if you will.…

Sponsor: An Event Apart

Set yourself apart. Get better at what you do today and find out how you’ll be doing your job in a year or two. An Event Apart—three days of design, code, and content for people who make websites—is where ideas like responsive design and mobile first were launched, and where this year’s attendees are already learning how grid layout, CSS shapes, and other advanced techniques will fundamentally change…well, everything. Don’t miss it!​​​

What is going to an An Event …

8 comments

Using Multi-Step Animations and Transitions

CSS animations are rad and the concept is fairly simple. Name the animation, define the movement in @keyframes and then call that animation on an element. If you haven't worked with them, you can level up on the syntax right here in the Almanac.

While the concept is simple, there are little tricks to make the animations seem complex and one of those is multi-step transitions. That's what we're going to look at in this post.…

Caring about OpenType features

Type aficionado Tim Brown has written a great piece about how to make typographic enhancements with the OpenType features of a web font. These additions can be subtle, such as ligatures and small caps, but other tools such as kerning or contextual alternates can often have a big impact on the overall reading experience:

More than fancy swashes and superfluous ligatures, OpenType features are font superpowers. The best, most capable typefaces are full of sophisticated reasoning and delightful surprises …

Intrinsic Placeholders with the Picture Element

By using intrinsic ratios and the picture element, Dave Rupert describes his attempts to stop the clunky page reflow when images load on a page. He also shows us how it’s possible to style this element with a background-color to give users a more elegant loading experience.…

Getting Started with the WordPress Customizer

The following is a guest post by Scott Fennell, a WordPress theme & plugin developer in Anchorage, AK and a regular contributor around here.

Let's say you have a client whose business is large enough to have several departments. Now let's say that this client wants each of their departments to have their own website on a dedicated domain. Each site is to have the same layout, but a different color scheme. This is a phenomenal use-case for the …

Why I’m Excited About Native CSS Variables

Philip Walton:

Native CSS variables weren’t just an attempt to copy what CSS preprocessors could already do. In fact, if you read some of the initial design discussions, you’ll see that most of the motivation for native CSS variables was to make it possible to do things you can’t do with preprocessors!

CSS preprocessors are fantastic tools, but their variables are static and lexically scoped. Native CSS variables, on the other hand, are an entirely different kind of variable: …

I Turned Off JavaScript for a Whole Week and it Was Glorious

As you can imagine, I ran into some problems. Netflix wouldn’t work. Neither would YouTube, at least not without turning on Adobe Flash, which would kind of defeat the point of turning off JavaScript. And of course you can forget using Google Docs without JavaScript.

But the most surprising thing is that most things just worked. And in many cases, worked better. Pages loaded nearly instantly, my laptop battery lasted longer, and I could browse the web with fewer distractions.…

41 comments

The “Blur Up” Technique for Loading Background Images

The following is a guest post by Emil Björklund. Filter effects in CSS have been around for a while, and together with things like blend modes, they bring new possibilities for recreating and manipulating stuff in the browser that we previously had to do in Photoshop. Here, Emil explores a performance technique using one of the more forgotten filter effects – the filter function – as well as recreating it with SVG.…

Some Great Flexbox Links Lately…

  • Flexbox Froggy: A game from Thomas Park where by you learn about differnet flexbox properties and values by positioning a frog.
  • Flexbox Grid Finesse: Heydon Pickering shows off that useful feature of flexbox where a grid with leftover boxes can be distributed along the final line. But you can caress things a bit ensuring you don't get a 4-4-4-1 situation and instead get a 4-4-3-2 situation with some min-width and :nth-child stuff.
  • Flexbox’s Best-Kept Secret: Sam Provenza

Sponsor: The Iron Yard

The Iron Yard is one of the world’s largest and fastest-growing in-person code schools. The Iron Yard exists to create real, lasting change for people, their companies, and communities through technology education. It offers full-time programs in back and front-end engineering, mobile, data science and design. There are 14 campuses dotted all across the U.S. and one in the U.K., with many more opening soon. The immersive format of the 12-week courses helps people learn to code and be prepared …

31 comments

A Guide to 2016 Front End Conferences

It's difficult to keep track of all of the great talks and conferences happening in our industry. Sometimes you may find out too late that an event is taking place, and it's a real shame when it's an something you might have attended. We've compiled this list so you can see what's happening, both in your hometown, and abroad. This list will be updated throughout the year.…

Putting Thought into Things

A 2014 article from Information Architects on the process of modern day web design:

  1. Make a tree structure
  2. Photoshop the Home, Section, and Article pages
  3. Hack on WordPress or one of its cousins
  4. Fill in the content
  5. Complain that people are stupid, or evil, or both

Do web projects fail because everybody except us is stupid? Or evil? Or both? Is it because small agencies get small budgets and no time? Because established web designers lie a lot? Because while …

12 comments

Password Strength `meter`

The following is a guest post by Pankaj Parashar. Pankaj is our resident expert on all things <progress></progress> and <meter></meter> and this post is more evidence of that. Here, he walks us through implementing a password strength meter using what is likely the semantically best option.

Building and Shipping Functional CSS

Cole Peters has written a great piece on his work refactoring the TrialReach CSS codebase:

A functional approach to CSS has thus far played out really well for us at TrialReach — we’ve significantly reduced complexity and bloat in our CSS, and find ourselves reusing existing styles far more often than we create new ones...

A few quick notes about Cole’s post that I find interesting:

  • The style guide acts as a guide, rather than as a final arbiter
10 comments

Creating a Web Type Lockup

A type lockup is a typographic design where the words and characters are styled and arranged very specifically. Like the design is literally locked in place. This idea is slightly at-odds with the responsive web that we know and love, where text is fluid and wrappable and whatnot. Yet, the design possibilities of lockups are very appealing. I think we can hang onto what makes them awesome while still holding onto what makes the web awesome.…

New Improved Illustrator SVG Export Settings

If you use Illustrator for SVG wrangling, you'll love last night's release. All of the new features make for an easier workflow. Some of them include:

  • Better default code that's easier to hand-edit
  • Better ID's (gone are the days of #foo_1_), with new options for unique IDs or layer names
  • Ability to export individually selected elements at a time
  • Higher quality output of SVG shapes, gradients, patterns, symbols, and masked objects
  • Ability to change the decimal place precision
  • Ability

Animating Your Brand

Donovan Hutchinson kicks off this years 24 ways, the webnerd advent calendar which is always a great way to close off the year.

They have an RSS feed, and since I know that 42% of you read this site with RSS that might be of interest. I've been enjoying Digg.com as a feed reader.…

Sponsor: Syncano – a serverless architecture to help you build apps more efficiently

Syncano is all about giving creative freedom to the front end developer. Here are a few ways Syncano can make it easier to build apps:

  • Run your own code (Python, Ruby, JavaScript, etc) without setting up any servers.
  • Build your own microservices. A "CodeBox" is a script you can run on our servers, that you can communicate with, that can do things that are too expensive to do on mobile/front end (e.g. use a third-party API, process an image, etc).

I’m personally responsible for every bug on every website

Sorry the website I just sent you the link to wasn't looking right on your phone. I checked it out, and the layout was pretty jacked up. I personally caused that, as I'm solely responsible for each and every website on the internet. My bad, everybody.…

Building for HTTP/2

Rebecca Murphey:

This is everything-you-thought-you-knew-is-wrong kind of stuff. In an HTTP/2 world, there are few benefits to concatenating a bunch of JS files together, and in many cases the practice will be actively harmful. Domain sharding becomes an anti-pattern. Throwing a bunch of <script> tags in your HTML is suddenly not a laughably terrible idea. Inlining of resources is a thing of the past. Browser caching — and cache busting — can occur on a per-module basis.

I can't help …

Metadata Markup

Jeremy Keith looks at the competing standards for the metadata that goes in the head which ultimately helps services such as Slack, Twitter and Facebook to create a preview of the content of a website. Unfortunately the lack of consensus is an annoying problem for developers:

We’ve seen this kind of waste before. I remember when Netscape and Microsoft were battling it out in the browser wars: Internet Explorer added a proprietary acronym element, while Netscape added the abbr element. …

10 comments

Drag and Drop File Uploading

The following is a guest post by Osvaldas Valutis. Osvaldas is going to show us not only how drag and drop file uploading works, but goes over what nice UI and UX for it can be, browser support, and how to approach it from a progressive enhancement standpoint.

40% Sale in the Shop

Have you been trying to find some kind of SALE happening online today, but coming up empty handed? We have some CSS-Tricks T-Shirts and hoodies in the store at 40% off (use coupon code trikzare4kids) now through Monday.

If you're size Small or XXL/XXXL, most of the designs are available. If you're Medium or Large, not so much, but we hope to have some kind of new fun merch soon.…

We have a pretty good* newsletter.